@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;}

.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: 1000px;
  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-img170424.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: 100%;
  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;
  margin-top: 20px;
}

.onair-info__p{
  overflow: hidden;
  margin-bottom: 7px;
}

.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:3px; 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_story{
  background: url(../photo/story-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_arasuji{
  background: url(../photo/news-bg.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_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/staff-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_oa{
  background: url(../photo/game-bg.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/movie-bg.jpg) no-repeat center center #000;
  background-size: cover;
}

.basic-section-wrap_music{
  background: url(../photo/key-bg.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;
}

.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__story{
  width: 824px;
  margin: 50px auto 150px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;  height: 556px;
}

.story_text{font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; padding:180px 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 150px auto;
  background-color: rgba(255,255,255,0.72);
  position: relative;  height: 596px; 
}

.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:left; margin-left:-20px; margin-right:10px;}
.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;
}

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

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

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

.key-text-area{ width:610px;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;}.key-imgR{ float: right; margin-top:-10px; height:100px;}

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

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


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

.staff_text{font-size: 15px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964; padding:30px 40px 0 50px; line-height:155%;
  text-align:left;
  text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;
}

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

.basic-section__haishin{
  width: 764px;
  margin: 50px auto 120px 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:100spx; 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 150px 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_character{
  background: url(../img/content_character20170424.png) no-repeat center center rgba(255,255,255,0.72);
}

.basic-section__content__detail_left{
  position: absolute;
  left: 60px;
  top: 170px;
  text-align: left;
}

.basic-section__content__detail_left__txt{
  font-size: 16px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
  color: #100964;
  text-shadow: 0 0 6px #fff;
}

.basic-section__content__detail_left__txt_eng{
  font-size: 14px;
}

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


/*---------------
character__btn
---------------*/

.character-list__item__btn{
  cursor: pointer;
}

.character-list__item__btn_ryuto{
  position: absolute;
  left: 397px;
  bottom: 307px;
}

.character-list__item__btn_navirou{
  position: absolute;
  left: 440px;
  bottom: 36px;
}

.character-list__item__btn_riveruto{
  position: absolute;
  left: 505px;
  bottom: 446px;
}

.character-list__item__btn_shimonu{
  position: absolute;
  left: 670px;
  bottom: 383px;
}

.character-list__item__btn_riria{
  position: absolute;
  left: 490px;
  bottom: 298px;
}

.character-list__item__btn_shuval{
  position: absolute;
  left: 310px;
  bottom: 38px;
}

.character-list__item__btn_ayuria{
  position: absolute;
  left: 255px;
  bottom: 353px;
}

.character-list__item__btn_deburi{
  position: absolute;
  left: 680px;
  bottom: 37px;
}

.character-list__item__btn_omuna{
  position: absolute;
  left: 187px;
  bottom: 35px;
}

.character-list__item__btn_dan{
  position: absolute;
  left: 40px;
  bottom: 425px;
}
.character-list__item__btn_hakase{
  position: absolute;
  left: 15px;
  bottom: 37px;
}

.character-list__item__btn_ichi{
  position: absolute;
  left: 170px;
  bottom: 37px;
}

.character-list__item__btn_nakama{
  position: absolute;
  left: 660px;
  bottom: 425px;
}


.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:20px 0 10px 0;  height: 502px;}

.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-size: 18px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: nomal;
  color: #100964;
  text-shadow: 0 0 6px #fff; line-height:170%;}

.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:70px 20px 40px 0; width:400px; float:right;}  
.music_JK{  margin:60px 0 0 40px; text-align:center; width:340px; height:342px;
background:url(../photo/jacket.jpg); background-repeat:no-repeat; float:left;}

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

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

/*---------------
sp2
---------------*/

.basic-section_sp2{
  width:85%;
  height:auto;
  margin: auto; padding-top:60px; padding-bottom:50px;
}

.basic-section__sp2{  width: 900px;padding:20px 10px 20px 10px; 
text-align:center; height: 580px; font-size:14px;
}

.sp2_in{ width:710px; margin:0px auto; padding-left:30px;}
.sp2_in2{ width:880px; margin:10px auto; padding-left:10px;}

.icon_title{ margin-bottom:0;}

.icon{ margin:5px 25px 10px 0px; float:left; line-height:115%;text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;}
.icon2{ margin:5px 10px 10px 0px; float:left; line-height:115%;text-shadow: 0px -1px 3px #FFF,1px 0px 3px #FFF,0px 1px 3px #FFF,-1px 1px 3px #FFF;}
.iconImg{ margin-bottom:5px; width:115px; }
.iconText{color: #100964;}

.icon, .icon2 a{ text-decoration:none;font-weight:bold;color: #100964;}
.icon, .icon2 a:hover{ text-decoration: underline;color: #C60;}

.sp2__item__btn_new1{position: absolute;left: 650px;bottom: 180px;}
.sp2__item__btn_new2{position: absolute;left: 770px;bottom: 180px;}
.sp2__item__btn_new3{position: absolute;left: 600px;bottom: 27px;}

.sp2_bnr{ }

/*---------------
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;
      }