@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html{
  margin: 0;
  padding: 0;
}

body{
  margin: 0;
  padding: 0; background-color:#000000;
}

h1,h2,h3,h4,h5,ul,li,p{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
}

a:focus, *:focus {
  outline:none;
}

.br:before {
  content: "\A" ;
  white-space: pre ;
}

.br_mt {
  display: block;
}

.red{ color:#C00;}
.blue{ color:#03F;}
.navy{color: #100964; }

.tac{ text-align:center;}
.b { font-weight:bold;}

.f70{ font-size:70%;}
.f80{ font-size:80%;}
.f90{ font-size:90%;}

.r11{ font-size:11px;}
.r12{ font-size:12px;}
.r14{ font-size:14px;}
.r16{ font-size:16px;}
.r18{ font-size:18px;}
.r20{ font-size:20px;}
.r22{ font-size:22px;}
.r24{ font-size:24px;}

.lh200{ line-height:200%;}

.ls1{ letter-spacing:0.1em;}
.ls05{ letter-spacing:-0.05em;}
.ls01{ letter-spacing:-0.1em;}

/*----------------------------------------
header
----------------------------------------*/

.header{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  padding:5px 0 ;
  background-color: #000;
  color: #fff;
  z-index: 1000;
  line-height:25px;
}

/*header {
  background-color: #000;
  text-align: center;
  width: 100%;
  color: #fff;  line-height:30px;
}*/

.gloval-nav{
  width: 1100px;
  margin: 5px auto; text-align:center;
}

.gloval-nav__item{
  display: inline-block;
  margin-right: 20px;
}

.gloval-nav__item:last-child{
  margin-right: 0;
}

/*
#story, #yokoku, #oa, #haishin, #key, #character, #staff, #news, #movie, #music, #sp2, #bl, #game
{ padding-top:60px;}
*/


/*----------------------------------------
main-content
----------------------------------------*/

.main-content{
  position: relative;
}

/*--------------------
hero
--------------------*/

.hero{
  margin-top: 70px;
  background: url(../photo/hero-img170903.jpg) no-repeat center center #000;
-moz-background-size:100% 100%; background-size:100% 100%; 
  background-size: cover;
  height: 100vh;
  width: 100%;
  text-align: center;
  position: relative;
  box-sizing: border-box; background-color:#000;
}

.hero-inner{
  width:97%;
  height: 100vh;
  margin: auto;
  position: relative;
  overflow: hidden; padding:0 2% 0 0;
}
@media screen and (min-width: 1400px) {
.hero-inner{
  width: 90%; padding-right:4%;
}}
@media screen and (min-width: 1550px) {
.hero-inner{
  width: 85%; padding-right:4%;
}}

@media screen and (min-width: 1650px) {
.hero-inner{
  width: 83%; padding-right:4%;
}}

.site-logo{
  float: left;
  margin-top: 20px;
}


/*繝輔ぃ繝ｼ繧ｹ繝医ン繝･繝ｼ繝九Η繝ｼ繧ｹ繧ｨ繝ｪ繧｢*/
.news-area{ width:245px; background-color: rgba(255,255,255,0.72);color: #100964; border-radius:20px;
margin:10px 0 0 35px; text-align:left; font-size:13px; font-weight:bold; padding:20px 8px 20px 13px; }
.news-area p{margin-bottom:15px; line-height:150%;}
.news-area a{}
.news-area a:hover{ color:#09C;}
.news-area ul li{ list-style: outside square; padding:3px; line-height:150%; margin-left:10px;}

/*all*/
.base-text{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; padding:0 40px; line-height:175%;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}

.base-text_bl{
  font-family: 'Noto Sans Japanese', sans-serif;
  color: #100964; padding:0 40px; line-height:140%;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}


/*繝医ャ繝励お繝ｪ繧｢*/
.onair-info{
  float: right;}

.onair-info__p{
  overflow: hidden;
  margin:20px 0 15px;
}

.onair-info__p:last-child{
  margin-bottom: 0;
}

.onair-info__p__link{
  display: block;
  width: 200px;
  height: 100px;
  background-color: #eee;
  float: right;
}

.onair-info__p__link__img{
  width: 200px;
  height: 100px;
}

.bnr_area{ float: right; width:200px;}
.bnr{ margin-bottom:4px; width:175px;}

.hero-inner__sns-links-wrap{
  width: 100%;
  position: absolute;
  bottom: 70px; 
  padding-bottom: 20px;
}

/*--------------------
basic-section
--------------------*/

.basic-section-wrap{
  display: table;
  text-align: center;
  height: 100vh;
  width: 100%;
  position: relative;
}

.basic-section-wrap_shinsho{
  background: url(../photo/shinsho-bg2.jpg) no-repeat center center #000;
  background-size: cover; 
}

.basic-section-wrap_shinsho-chara{
  background: url(../photo/shinsho-chara_bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_story{
  background: url(../photo/bg2017_2.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_arasuji{
  background: url(../photo/bg2017_6.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_sp2{
  background: url(../photo/story-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_sp2017{
  background: url(../photo/bg2017_5.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_key{
  background: url(../photo/key-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_character{
  background: url(../photo/character-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_staff{
  background: url(../photo/bg2017_4.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_oa{
  background: url(../photo/bg2017_3.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_haishin{
  background: url(../photo/movie-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_news{
  background: url(../photo/news-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_movie{
  background: url(../photo/bg2017_7.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_music{
  background: url(../photo/bg2017_8.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_bl{
  background: url(../photo/news-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_game{
  background: url(../photo/game-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section{
  text-align: center;
  display: table-cell;
  vertical-align: middle; padding-top:30px; padding-bottom:30px;
}

.shinsho-section{
  text-align: center;
  display: table-cell;
  vertical-align: middle; padding:0 !important;
}

.basic-section__heading{
  padding-top: 48px;
  margin-bottom: 30px;
}

.basic-section__content{
  width: 824px;
  height: 562px;
  margin: auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;
}

.basic-section__shinsho{
  width: 824px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72) !important;
  position: relative;}

.shinsho_text{font-size: 20px; float:left;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold; line-height:150%;
  text-align:center; margin:0 0 0px 0;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF; 
  color:#1b2fed;}
.shinsho_text a{color:#1b2fed; text-decoration:none;}
.shinsho_text a:hover{color: #0066cc;}

.basic-section__story{
  width: 794px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;  height: 600px; padding:30px;
}

.story_text{font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; padding:10px 50px 0 70px; line-height:150%;
  text-align:left;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}

.basic-section_yokoku{ padding-top:30px;}
.basic-section__yokoku{
  width: 824px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative; padding-bottom:20px; 
}

.arasuji_text{font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; padding:80px 50px 0 70px; line-height:150%;
  text-align:left;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}
.yokoku_title{ float:none; margin-left:-20px;}
.yokoku_text{font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; padding:30px 50px 0 70px; line-height:150%;
  text-align:left;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}


.yokoku_date{font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #C00; padding:0px 50px 0 70px; line-height:150%;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}


.arasuji_day{ font-size:21px; padding-top:0px;}
.arasuji_photo{width:780px; margin:0 auto;margin-top:30px; }
.Aphoto{width:250px;}
.yokoku_movie{ margin:20px auto 15px auto; text-align:center;}
.goto_arasuji{ text-align:center; margin:15px auto 0 auto;}

.basic-section__key{
  width: 824px; padding:10px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative; 
}

.key-area{ margin:20px 10px; height:60px;}

.key-text-area{ width:620px;font-size: 14px; padding-top:5px;;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964;  line-height:155%;
  text-align:left;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;}  

.key-img{ float:left; margin-right:10px;}
.key-imgR{ float: right; margin-top:-10px; height:80px;}

hr.key{ border:none;border-bottom: #d7b774 1px dotted; margin:15px;}

.basic-section__chara{
  width: 824px;
  height: 602px;
  margin: auto;
  background-color: rgba(255,255,255,0.72);
  position: relative; 
}


.basic-section__staff{
  width: 824px; padding:20px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;  height: 506px;
}

.staff_textL, .staff_textR{font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; line-height:200%;
  text-align:left; padding:70px 20px 20px 20px;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}
.staff_textL{ float:left; margin:0px 30px 0 30px;}
.staff_textR{ float:left;}
.staff-img{ width:250px; margin:0 0 10px -20px;}

.basic-section__oa{
  width: 784px;
  margin: 50px auto ;
  background-color: rgba(255,255,255,0.72);
  position: relative;  height: 350px; }
  
  .basic-section__content_oa{
  padding: 80px 30px 0px 30px;
}

.basic-section__haishin{
  width: 764px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;  height: 450px; padding:10px 0 80px 80px;}

.base-text-haishin{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold; font-size:18px;
  color: #100964; padding:30px 0 0 0; line-height:230%;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}

.h-li1{ text-align:left; width:330px; float:left; margin-left:100px; list-style:square;}
.h-li1 a{ text-decoration:none;}
.h-li1 a:hover{ text-decoration: underline; color:rgba(125,194,255,1.00);}

.h-li1-2{ text-align:left; width:230px; float:left; margin-left:80px; list-style:square;}
.h-li1-2 a{ text-decoration:none;}
.h-li1-2 a:hover{ text-decoration: underline; color:rgba(125,194,255,1.00);}

.h-li2{ text-align:left; width:800px; letter-spacing:0.05em;}



.h-li1-3{ text-align:left; width:320px; float:left; margin-left:20px; list-style:square;}
.h-li1-3 a{ text-decoration:none;}
.h-li1-3 a:hover{ text-decoration: underline; color:rgba(125,194,255,1.00);}

.basic-section_movie{
  width:85%;
  height:auto;
  margin: auto; padding-top:80px; padding-bottom:30px;
}

.movie_list{ padding-top:0px; width:100%;}
.thumb_img{ margin:10px;}


.basic-section__bl{
  width: 824px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;  padding:30px 0 20px 0; text-align:left;height: 540px;}


.basic-section__content_story{background:url(../img/detail_story.png)no-repeat center center rgba(255,255,255,0.72);}
.basic-section__content_arasuji{ background-color: rgba(255,255,255,0.72);}

.basic-section__content_game{
  width: 864px;
  height: 620px;
  margin: auto;
  background-color: rgba(255,255,255,0.72);
  position: relative; padding:20px 0;
}

.game2017-title{ width:400px;}
.game2017-img{ width:200px;}
.game2017-jac{ float:right; width:350px; margin:20px 45px 0 0;}

.game2017-text{ width:350px; float:left;line-height:28px;
  text-align: center; margin:40px 20px 20px 70px;font-size: 20px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964;
   text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;}
  
  
.game2017-textS{width:370px; float:left;
  text-align: left; margin:30px 20px 20px 50px;font-size: 14px;
  font-family: 'Noto Sans Japanese', sans-serif;
   font-weight: bold;color: #c00; line-height:22px;
  text-shadow: 0 0 6px #fff;}
  


.basic-section__content__detail_left_link{
  display: block;
  margin-top: 1em;
}


/*---------------
character
---------------*/

.basic-section__content_character{
  background: url(../img/content_character20170903.png) no-repeat center center rgba(255,255,255,0.72);
  margin-bottom:50px; padding:0px 0px 20px 0;
}

.basic-section__content_shinsho-chara{
  background: url(../img/shinsho_character20171112.png) no-repeat center center;
  height:552px; margin:40px auto; 
}

.character-list__item__btn{
  cursor: pointer;
}

.character-list__item__btn_anvisu{
  position: absolute;
  left: 655px;
  bottom: 16px;
}
.character-list__item__btn_geiru{
  position: absolute;
  left: 328px;
  bottom: 15px;
}
.character-list__item__btn_rasu{
  position: absolute;
  left: 430px;
  bottom: 26px;
}
.character-list__item__btn_shadow{
  position: absolute;
  left: 210px;
  bottom: 17px;
}
.character-list__item__btn_mad{
  position: absolute;
  left: 70px;
  bottom: 31px;
}

.character-list__item__btn_ryuto{
  position: absolute;
  left: 360px;
  bottom: 323px;
}

.character-list__item__btn_navirou{
  position: absolute;
  left: 422px;
  bottom: 22px;
}

.character-list__item__btn_riveruto{
  position: absolute;
  left: 512px;
  bottom: 490px;
}

.character-list__item__btn_shimonu{
  position: absolute;
  left: 700px;
  bottom: 433px;
}

.character-list__item__btn_riria{
  position: absolute;
  left: 702px;
  bottom: 26px;
}

.character-list__item__btn_shuval{
  position: absolute;
  left: 280px;
  bottom: 24px;
}

.character-list__item__btn_ayuria{
  position: absolute;
  left: 455px;
  bottom: 383px;
}

.character-list__item__btn_miru{
  position: absolute;
  left: 215px;
  bottom: 311px;
}

.character-list__item__btn_hyoro{
  position: absolute;
  left: 135px;
  bottom: 25px;
}

.character-list__item__btn_nariki{
  position: absolute;
  left: 30px;
  bottom: 305px;
}


.character-list__item__btn_numbers{
  position: absolute;
  left: 665px;
  bottom: 465px;
}


.character-list__item__btn_new1{
  position: absolute;
  left: 20px;
  bottom: 11px;
}

.character-list__item__btn_new2{
  position: absolute;
  left: 175px;
  bottom: 11px;
}

.character-list__item__btn_new3{
  position: absolute;
  left: 30px;
  bottom: 476px;
}

/*---------------
oa
---------------*/

.oa-list{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  text-shadow: 0 0 6px #fff;
  text-align: center;}

.oa-list__item{
  padding: 20px;
}

.oa-list__item__date{
  font-size: 16px; color:#C00; margin-top:30px; letter-spacing:0.1em; 
  font-weight:normal;
}

.oa-list__item__topic{
  font-size: 36px;
  line-height:170%; color: #100964;
}

.oa-list__item__text{
  font-size: 24px;
  line-height:200%;  color: #100964;

}
/*---------------
news
---------------*/

.basic-section__content_news{
  padding: 30px 60px; overflow:scroll; height:500px;
}

.news-list{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964;
  text-shadow: 0 0 6px #fff;
  text-align: left;
  border-top: 1px solid #000;
}

.news-list__item{
  border-bottom: 1px solid #000;
  padding: 20px;
}

.news-list__item__date{
  font-size: 12px;
}

.news-list__item__topic{
  font-size: 16px;
}

.news-comment{ border:1px #100964 dotted; padding:10px; text-align:left; font-size:13px; color:#100964; margin-top:10px; line-height:130%;}

/*---------------
music
---------------*/

.basic-section__music{ padding:50px 0 60px 0;  height: 350px; margin-bottom:30px;}

.music_title{ 
  font-size: 32px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964;
  text-shadow: 0 0 6px #fff; line-height:170%;}

.music_text{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; line-height:170%;
  padding:5px 20px 5px;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;}
  s

.music_coment{font-size: 14px; text-align:left; margin:20px 40px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964;
  line-height:160%;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
  }

.music_title2{ margin:50px 20px 40px 0; width:400px; float:left;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;}  
.music_JK{  margin:0px 45px 0 0px; text-align:center; width:300px; height:297px;
background:url(../photo/jacket.jpg); background-repeat:no-repeat; float:right;}

#music-content a{color:#1b2fed; text-decoration:none;}
#music-content a:hover{color: #0066cc;}



@media print {#no_print{display:none;}}

#music .base-text{ float:right;}

/*---------------
sp2縲€sp2017
---------------*/

.basic-section_sp2017{
  padding:40px 0 ;  margin-bottom:30px;}

.basic-section__sp2017{  padding:30px 10px 30px; 
text-align:center;  margin-bottom:30px;
}

.sp2017_text{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; line-height:170%;
  padding:5px 20px 5px;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;}

/*---------------
movie
---------------*/



/*----------------------------------------
footer
----------------------------------------*/

.footer-area{
  width: 100%;
  background-color: #100964;
  padding: 20px 0;
  box-sizing: border-box;
}

.footer{
  width: 95%;
  margin: auto;
  text-align: center;
}

.banner-list{
  margin: 0 auto 20px;
}

.banner-list__item{
  display: inline-block;
  width: 200px;
  height: 100px;
  margin-right: 8px;
  background-color: #fff;
}

.banner-list__item:last-child{
  margin-right: 0;
}

.sns-links{
  margin: 0 auto 0;
}

.sns-links_footer{
  margin: 40px auto 80px;
}

.footertextbnr a{ color:#fff; text-decoration:none;}
.footertextbnr a:hover{opacity: 0.72;}


.sns-links__item{
  display: inline-block;
  margin-right: 28px;
}

.sns-links__item:last-child{
  margin-right: 0;
}

.copy-right{
  text-align: left;
  color: #fff;
}

a img:hover{
  opacity: 0.72;
}

/*
gotop
*/

#page-top,
#page-top a{ position: fixed;bottom: 20px;right: 30px; z-index:9999;}

/*Magnific Popup*/
      .mfp-fade.mfp-bg {
        opacity: 0.001; /* Chrome opacity transition bug */
        -webkit-transition: all 0.15s ease-out;
        -moz-transition: all 0.15s ease-out;
        transition: all 0.15s ease-out;
      }
      .mfp-fade.mfp-bg.mfp-ready {
        opacity: 0.8;
      }
      .mfp-fade.mfp-bg.mfp-removing {
        opacity: 0;
      }
      .mfp-fade.mfp-wrap .mfp-content {
        opacity: 0;
        -webkit-transition: all 0.15s ease-out;
        -moz-transition: all 0.15s ease-out;
        transition: all 0.15s ease-out;
      }
      .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
        opacity: 1;
      }
      .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
        opacity: 0;
      }