@charset "utf-8";

*{
	box-sizing:border-box;
}

@media screen and (max-width: 640px) {

html,body{
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

body{width:100%;}


.gnaviArea{width:100%;background-color:#164a9c;border-bottom-style:solid;border-bottom-width:7px;border-bottom-color:#0e3e89;position:relative;display:none;}
.gnaviArea ul.gnaviTop{width:1000px;display:flex;margin:0 auto;justify-content: flex-start;}
.gnaviArea ul.gnaviTop li{margin:23px 33px 23px 0 ;background: url(../images/common/navi_sprite.png) no-repeat;}
.gnaviArea ul.gnaviTop li a{display:block;text-indent:-9999px;width:100%;height:20px;}
.gnaviArea ul.gnaviTop li a:hover{background-positon:top -20px ;}
.gnaviArea ul.gnaviTop li:nth-child(1){width:86px;background-position: top 0px left 0px;}
.gnaviArea ul.gnaviTop li:nth-child(2){width:86px;background-position: top 0px left -117px;}
.gnaviArea ul.gnaviTop li:nth-child(3){width:77px;background-position: top 0px left -234px;}
.gnaviArea ul.gnaviTop li:nth-child(4){width:141px;background-position: top 0px left -343px;}
.gnaviArea ul.gnaviTop li:nth-child(5){width:150px;background-position: top 0px left -516px;}
.gnaviArea ul.gnaviTop li:nth-child(6){width:81px;background-position: top 0px left -698px;}
.gnaviArea ul.gnaviTop li:nth-last-child(1){width:160px;margin:7px 0px 0 !important;height:unset;}
.gnaviArea ul.gnaviTop li:nth-child(n + 7){background:unset;text-indent:0px;}

.gnaviArea ul.gnaviTop li ul.snsNavi{padding:5px 10px ;display:flex;background-color:#FFF;justify-content: center;}

/* 子要素 unset */
.gnaviArea ul.gnaviTop li ul.snsNavi li{width:unset;height:unset;background:unset;margin:unset;text-indent:0px !important;}
.gnaviArea ul.gnaviTop li ul.snsNavi li a{text-indent:0px;}
.gnaviArea ul.gnaviTop li ul.snsNavi li{width:40px !important;margin-right:10px;}
.gnaviArea ul.gnaviTop li ul.snsNavi li:nth-last-child(1){margin:0% !important;}
.gnaviArea ul.gnaviTop li ul.snsNavi li img{width:100%;}
.mainAreaTop{width:100%;margin:0 auto;background: url(../images/common/mainvisual_sp.jpg) no-repeat ;background-size:100%;}

.mainAreaTop .areaRight{width:auto;margin:0px;padding:0;}

.mainAreaTop h1{width:41%;margin: 0px;padding: 3% 0 0 20px;}
.mainAreaTop .info01{width:61.5%;margin:0 auto;padding-top:64%;}
.mainAreaTop .info02{width:auto;margin:0 0 30px 0;display:none;}
.mainAreaTop .info03{width:67%;margin:0 auto;padding-bottom:3%;}



.secondAreaTop{width:100%;background-color:#164a9c;}
.secondMain{    width: 100%;
    padding: 20px 0 0 0;
    margin: 0 auto;
    justify-content: flex-start;
    background: url(../images/common/topicsarea.jpg) no-repeat top 0px right 0px;}
    
.topicsArea{width:52%;}




.topMovieArea {padding-top:50.625%; position: relative;width:90%;margin:5% auto;}
.topMovieArea  iframe{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border:5px #164a9d solid;
    }

dl.topicsList{width:auto;display:flex; flex-wrap:wrap;}
dl.topicsList dt{    width: 33%;
    margin-right: 5%;
    margin-bottom: 20px;
    border: 5px #ccc solid;}
dl.topicsList dd{    width: 58%;
    margin-bottom: 20px;}
dl.topicsList dd a{    color: #FFF;
    font-size: 1.076em;
    line-height: 1.375em;}
dl.topicsList dd a span{    color: #b4bed7;
    text-decoration: none !important;
    display: block;
    font-weight: 700;
    line-height: 2em;
    font-size: 0.875em;}
    
dl.topicsList dd a span img{margin-left:10px;}
    
dl.topicsList dd a{ text-decoration:underline;}
 dl.topicsList dd a:hover{ text-decoration:none;}   
    
.twitterArea{    width: auto;
    background-color: #FFF !important;
    color: black;
    padding: 20px 10px 50px;}
    
.twitterArea h2 img:nth-child(1){display:none;} 
.followBtn a img:nth-child(1){display:none;} 
.twitterAreaIn{    width:auto;
    margin: 0 auto;
    background-color: #FFF;
    height: 450px;
}

#twitter-widget-0 {height:450px !important;width:350px !important;margin:0 auto;}

.followBtn{width:30%;margin:20px auto 0;}
.secondMain h2{        
	width: 50%;
    margin-bottom: 20px;
   }

/*サブナビエリア */

h1.sub {
    width: 37%;
    position: relative;
    top: -3px;
    left: -25px;
    padding: 0px 0px 6px 10px;
}

h1.sub a img{
    width: 100% !important;}

.spTitle{width: 42%;
    position: absolute;
    top: 24px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    }
    
.navBtn{width: 10%;   
	 position: absolute;
    top: 20px;
    right: 10px;
    cursor:pointer;
   
}




.subheader{width:auto;background:unset;border-top-style:solid;border-top-width:2px;border-top-color:#164a9c;}
.subheaderIn{width:1000px;margin:0 auto;display:none;}

.subheader {
    background: url(../images/common/sub_header.jpg) no-repeat top left 61%;
    height: 57px;
    background-size: 205%;
}


#topics .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top 0px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
    
#about .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -51px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
   #story .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -102px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;} 



    
    
#character .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -153px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
#caststaff .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -204px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
    
#movie .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -255px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}

.mainAreaSub {width: auto;margin: 35px 0 0 0;}







.topicsAreaSub{
    width: auto;
    margin: 35px auto;
    font-size: 1.125em;
    line-height: 2em;
}

.topicsTopArea{width: aout%;
    margin-bottom: 30px;
    color: #333;
    padding-left:15px;
    }
    
.topicsArea{    width: auto;
    margin-bottom: 70px;
    color: #333;padding:0 30px ;}

.topicsArea strong{font-weight:700 !important;font-size:1.125em;color:#164a9c;}
.black{color:#000;}

dl.topicsList2 a{text-decoration:none !important;}
dl.topicsList2{width:100%;display:flex;flex-wrap:wrap;}
dl.topicsList2 dt{    width: 32%;
    margin-right: 3%;
    margin-bottom: 45px;
    border: solid #efefef 5px;
    font-size:0.935em;line-height:1.25em;
    }
dl.topicsList2 dd {width: 65%;line-height: 1.375em !important;}
dl.topicsList2 dd a{width:auto;color:#666 !important;margin-bottom:20px;font-size:0.935em;line-height:1.25em;text-decoration:underline !important;}
dl.topicsList2 dd a span{color:#164a9c;display:block;}
dl.topicsList2 dd a span img{margin-left:10px;}
dl.topicsList2 dd a span:nth-child(2){color:#164a9c;display:inline-block;width:29px;}
dl.topicsList2 dd a:hover{text-decoration:none!important;}

.newImage{width:18px !important;}

.topicsHeader{width:auto;margin-bottom:35px;overflow:hidden;}
.cfArea{
    padding: 15px 10px;
    background: #fff0f1;
    border: 5px solid #ffd4d7;
    border-radius: 10px;
    margin-bottom: 30px;
	}
.snsAreaShare{ display: flex;
    justify-content: start;
    margin: 15px 0 0;
    float: right;
    max-height:20px;}
.snsAreaShare li{margin-right:10px;}
.snsAreaShare li:nth-child(2){margin:-8px 10px 0 0;}
.castArea{width:auto;margin-bottom:70px;color:#333;font-size:1em;padding:0px 30px;}
.staffArea{width:auto;margin-bottom:70px;color:#333;font-size1em;padding:0px 30px;}
.aboutArea{width:auto;margin-bottom:70px;color:#333;font-size1em;padding:0px 30px;}
.storyArea{width:auto;margin-bottom:70px;color:#333;font-size1em;padding:0px 30px;}

ul.story{width:auto;display:flex;justify-content: center;}
ul.story li{width:33%;margin-right:1px;padding:15px 0;color:#FFF;font-size:1.375em;background-color:#164a9d;text-align:center;}
ul.story li a{color:#FFF;text-decoration:underline;}
ul.story li a:hover{color:#FFF;text-decoration:none;}
.chapter{   padding: 5px 20px;
    color: #FFF;
    font-size: 1em;
    line-height:1.125em;
    background-color: #164a9d;
    text-align: center;
    margin-bottom: 5px;
    display: inline-block;
}

#story article{width:auto;}
#story article p{font-size: 1.25em;
    font-weight: 700;
    line-height: 1.25em;
    margin: 10px 0;}

.movieArea{    width: auto;
    padding: 0 30px;}
    
.movieArea article{    width: 90%;
    font-size: 0.935em;
    color: #333;
    line-height: 1.125em;
    text-align: center;
    margin: 0 auto 60px;
    }

.movie {padding-top: 56.25%; position: relative;}
.movie iframe{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border:5px #164a9d solid;
    }

.red{color:#cb1313 !important;}
h3.red01{font-size:1.8em;color:#cb1313;font-weight:700;}
h3.red02{font-size:1.5em;color:#cb1313;font-weight:700;    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ccc;
    padding-bottom: 30px;}
h4.red03{font-size:1.5em;color:#cb1313;font-weight:700;display:block;margin-bottom:5px;}

.mainAreaSub p{font-size:1.075em;line-height:2em;}
.mainAreaSub p strong{font-weight:700;}

.characterArea{width:100%;position:relative;}
.characterArea article{width:100%;}
.characterArea article:nth-child(odd){background-color:#f5f5f5;}
.characterArea article:nth-child(even){background-color:#FFF;}
.characterArea article div:nth-child(1) {width: 44%;}
.characterArea article div.charaSpace {
    width: auto;
    display: flex;
    margin: 0 auto;
    padding: 30px 0;
}


.characterArea article div:nth-child(2){width: 56%;}

ul.charaNavi {
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding: 5px 10px;
    background-color: #164a9c;
    justify-content: center;
}
ul.charaNavi li	{width: 15%;}
ul.charaNavi li img{width:100%;}
ul.charaNavi li a:hover{opacity:0.4;}

time{font-size:1.125em;color:#999;}
.mainCont{font-size:1.375em !important;line-height:1.8em !important;}
.column2a {
    width: 100%;

}

.column2b {
    display: flex;
}

.wid10{width:100%;}
.wid20{width:100%;}
.wid30{width:100%;}
.wid40{width:100%;}
.wid50{width:100%;}
.wid60{width:100%;}
.wid70{width:100%;}
.wid80{width:100%;}
.wid90{width:100%;}
.wid100{width:100%;}

.wid50{}

.sp60{width:60% ;}

p.charaName{    font-size: 1.5em;
    margin-bottom: 6px;
    font-weight: 700;
    margin-top: 20px;}
    
p.charaName span{font-size:0.685em;}

.charaName2{    
font-size: 1.125em;
    font-weight: 700;
    display: block;
    margin-bottom: 18px;}
    
.comment {
    font-size: 1em !important;
    line-height: 1.8em!important;
    margin: 15px 15px 0 0;
    color: #333;
}

.co01{color:#e05f71 !important;}
.co02{color:#5591da !important;}
.co03{color:#d08836 !important;}
.co04{color:#39a476 !important;}
.co05{color:#5c6785 !important;}
.co06{color:#666 !important;}

.commentBox1 {
    z-index: 101;
    position: relative;
    padding: 9px 1px;
    color: #fff;
    font-size: 1.125em;
    background: #c4252a;
    width: 70%;
    text-align: center;
    z-index: 101;
}
.commentBox1:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -15px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #c4252a transparent transparent transparent;
    border-width: 20px 10px 0 10px;

}


.commentBox2{
    position: relative;
    padding: 9px 1px;
    color: #fff;
    font-size: 1.25em;
    background: #5693d6;
    width: 70%;
    text-align: center;
    font-weight: 700;
}
.commentBox2:after{
  content: "";
  position: absolute;
  right: 0;
    bottom: -15px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #5693d6 transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}

.commentBox3{
    position: relative;
    padding: 9px 1px;
    color: #fff;
    font-size: 1.25em;
    background: #d28833;
    width: 70%;
    text-align: center;
    font-weight: 700;
}
.commentBox3:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #d28833 transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}


.commentBox4{
    position: relative;
    padding: 9px 1px;
    color: #fff;
    font-size: 1.25em;
    background:  #3aa071;
    width: 70%;
    text-align: center;
    font-weight: 700;
}
.commentBox4:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #3aa071 transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}

.commentBox5{
    position: relative;
    padding: 9px 1px;
    color: #fff;
    font-size: 1.25em;
    background: #61668c;
    width:70%;
    text-align: center;
    font-weight: 700;

}
.commentBox5:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #61668c transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}







/* フッター */
#footerArea{width:100%;border:unset;position:relative;}



ul.bannerArea{width:65%;margin:20px auto 40px;}
ul.bannerArea li{width:100%;margin-bottom:15px;ma}


ul.snsArea {
    display: flex;
    justify-content: space-around;
    width: 60%;
    margin: 50px auto 30px;
}

.snsArea li {width:40px;}

.snsArea li img {width:100%;}

#copyright{padding:30px;fotn-size:0.875em;color:#FFF;text-align:center;background-color:#164a9c;}



.column320{width:auto;margin-left:auto;margin-right:auto;}
.column360{width:auto;margin-left:auto;margin-right:auto;}
.column480{width:auto;margin-left:auto;margin-right:auto;}
.column600{width:auto;margin-left:auto;margin-right:auto;}
.column640{width:auto;margin-left:auto;margin-right:auto;}
.column720{width:auto;margin-left:auto;margin-right:auto;}

.column3{width:auto%;}
.column3 p {width:auto;}


.spBottomNavi{width:100%;margin-top:200px;}
.spBottomNavi p{width:auto;color:#bec8d7;padding:5px 10px;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#8a9cb8;background-color:#24467a;font-weight:700;}

.spBottomNaviTop{width:100%;}
.spBottomNaviTop p{width:auto;color:#bec8d7;padding:5px 10px;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#8a9cb8;background-color:#24467a;font-weight:700;}

ul.underMenu{background-color:#164a9c;display:flex; flex-wrap: wrap;}
ul.underMenu li a{color:#FFF;font-weight:700;display:block;width:auto;padding:20px 0;text-decoration:none;font-size:1.25em;}
ul.underMenu li:nth-child(odd){width:50%;border-right-width:1px;border-right-color:#8a9cb8;border-right-style:solid;border-bottom-width:1px;border-bottom-color:#8a9cb8;border-bottom-style:solid;
text-align:center;
}

ul.underMenu  li:nth-child(even){width:50%;border-bottom-width:1px;border-bottom-color:#8a9cb8;border-bottom-style:solid;
text-align:center;
}

ul.underMenu  li:nth-last-child(1){width:100%;border-bottom-width:1px;border-bottom-color:#8a9cb8;border-bottom-style:solid;
text-align:center;
}



.drawerBack{background-color:#164a9c;opacity:0.95;width:100%;height:100%;position:fixed;display:block;z-index:3000;display:none;}
.drawer{position:fixed;top:0px;z-index:3020;display:none;}
.drawerLogo {
    padding: 15px 20px 20px;
    text-align: center;
    background-color: #FFF;
    display: block;
}
ul.spTopNavi{width:auto;display:flex; flex-wrap: wrap;}
ul.spTopNavi li a{color:#FFF;font-weight:700;display:block;width:auto;padding:20px 0;text-decoration:none;font-size:1.25em;}
ul.spTopNavi li:nth-child(odd){width:50%;border-right-width:1px;border-right-color:#8a9cb8;border-right-style:solid;border-bottom-width:1px;border-bottom-color:#8a9cb8;border-bottom-style:solid;
text-align:center;
}

ul.spTopNavi  li:nth-child(even){width:50%;border-bottom-width:1px;border-bottom-color:#8a9cb8;border-bottom-style:solid;
text-align:center;
}

ul.spTopNavi li:nth-last-child(2){width:100%;border-bottom-width:1px;border-bottom-color:#8a9cb8;border-bottom-style:solid;
text-align:center;
}

ul.spTopNavi li:nth-last-child(1){width:100%;
text-align:center;
padding:30px 0;font-size:1.8em;
border:unset;
}

.closetBtn {
    width: 10%;
    position: absolute;
    top: 20px;
    right: 10px;
    cursor: pointer;
    z-index:3020;
}

#pageTop{
    right: 10px;
    bottom: 100px;
    background: none;
    position: fixed;

}

.pcN{display:none;}
}





@media screen and (min-width: 641px) {

html,body{
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

#top .gnaviArea{width:100%;background-color:#164a9c;border-bottom-style:solid;border-bottom-width:7px;border-bottom-color:#0e3e89;position:relative;top:0px;}
.gnaviArea{width:100%;background-color:#164a9c;border-bottom-style:solid;border-bottom-width:7px;border-bottom-color:#0e3e89;position:relative;top:-20px;}
.gnaviArea ul.gnaviTop{width:1000px;display:flex;margin:0 auto;justify-content: flex-start;}
.gnaviArea ul.gnaviTop li{margin:23px 33px 23px 0 ;background: url(../images/common/navi_sprite.png) no-repeat;}
.gnaviArea ul.gnaviTop li a{display:block;text-indent:-9999px;width:100%;height:20px;}
.gnaviArea ul.gnaviTop li a:hover{background-positon:top -20px ;}
.gnaviArea ul.gnaviTop li:nth-child(1){width:86px;background-position: top 0px left 0px;max-height:20px;}
.gnaviArea ul.gnaviTop li:nth-child(2){width:86px;background-position: top 0px left -117px;max-height:20px;}
.gnaviArea ul.gnaviTop li:nth-child(3){width:77px;background-position: top 0px left -234px;max-height:20px;}
.gnaviArea ul.gnaviTop li:nth-child(4){width:141px;background-position: top 0px left -343px;max-height:20px;}
.gnaviArea ul.gnaviTop li:nth-child(5){width:150px;background-position: top 0px left -516px;max-height:20px;}
.gnaviArea ul.gnaviTop li:nth-child(6){width:81px;background-position: top 0px left -698px;max-height:20px;}
.gnaviArea ul.gnaviTop li:nth-last-child(1){width:160px;margin:7px 0px 0 !important;height:unset;}
.gnaviArea ul.gnaviTop li:nth-child(n + 7){background:unset;text-indent:0px;}

.gnaviArea ul.gnaviTop li ul.snsNavi{padding:5px 10px ;display:flex;background-color:#FFF;justify-content: center;height:50px;}

/* 子要素 unset */
.gnaviArea ul.gnaviTop li ul.snsNavi li{width:unset;height:unset;background:unset;margin:unset;text-indent:0px !important;}
.gnaviArea ul.gnaviTop li ul.snsNavi li a{text-indent:0px;}
.gnaviArea ul.gnaviTop li ul.snsNavi li{width:40px !important;margin-right:10px;margin-top:0px;}
.gnaviArea ul.gnaviTop li ul.snsNavi li:nth-last-child(1){margin:0% !important;}
.gnaviArea ul.gnaviTop li ul.snsNavi li img{width:100%;}
.mainAreaTop{width:975px;height:789px;margin:0 auto;background: url(../images/common/mainvisual.jpg) no-repeat top right;padding-left:25px;}

.mainAreaTop .areaRight{width:335px;margin:0px;padding:10px 0 0 0;}

.mainAreaTop h1{width:auto;margin:0 0 15px 0;}
.mainAreaTop .info01{width:auto;margin:0 0 5px 0;}
.mainAreaTop .info02{width:auto;margin:0 0 15px 0;}
.mainAreaTop .info03{display:none;}



.secondAreaTop{width:100%;background-color:#164a9c;}
.secondMain{width:1000px;;display:flex;padding:70px 0 35px;margin:0 auto;justify-content: flex-start;background: url(../images/common/topicsarea.jpg) no-repeat top 0px right 10px;}
.topicsArea{width:52%;margin-right:5%;}

.spTitle{display:none;}
.navBtn{display:none;}

.topMovieArea {padding-top: 56.25%; position: relative;}
.topMovieArea  iframe{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border:5px #164a9d solid;
    }

dl.topicsList{width:auto;display:flex; flex-wrap:wrap;}
dl.topicsList dt{width:30%;margin-right:2%;margin-bottom:20px;border:5px #ccc solid;}
dl.topicsList dd{width:63%;margin-bottom:20px;}
dl.topicsList dd a{color:#FFF;font-size:1.375em;line-height:1.5em;}
dl.topicsList dd a{ text-decoration:underline;}
 dl.topicsList dd a:hover{ text-decoration:none;}   

dl.topicsList dd a span{color:#b4bed7;text-decoration:none !important;display:block;font-weight:700;}
dl.topicsList dd a span img{margin-left:10px;}
.twitterArea{width:42%;}
.twitterArea h2 img:nth-child(2){display:none;} 
.followBtn a img:nth-child(2){display:none;} 
.twitterAreaIn{    width: 95%;
    margin: 0 5% 0 0;
    background-color: #FFF;
    height: 450px;
}


.followBtn{width:30%;margin:20px auto 0;}
.secondMain h2{width:225px;margin-bottom:20px;}

/*サブナビエリア */

h1.sub{width:1080px;position:absolute;top:-15px;left:0px;z-index:1000;margin:0 auto;right:0px;}
.subheader{width:auto;background: url(../images/common/sub_header.jpg) no-repeat top center;height:145px;}
.subheaderIn{width:1000px;margin:0 auto;}

.subheader {
    width: auto;
    background: url(../images/common/sub_header.jpg) no-repeat top center;

    padding: 59px 0 35px 0;
    text-indent: -9999px;
    margin-top:-20px;
}

.subheaderIn {
    width: 1000px;
    margin: 0 auto 0 auto;
}
#topics .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top 0px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
    
#about .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -51px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
   #story .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -102px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;} 



    
    
#character .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -153px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
#caststaff .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -204px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}
    
    
#movie .subheader h2 {    background: url(../images/common/sub_navi_sprite.png) no-repeat top -255px left;
    width: 598px;
    height: 51px;
    margin: 0 0 0 40px;}

#top .mainAreaSub{width:925px;margin:75px auto;}
.mainAreaSub{width:925px;margin:55px auto;}

.gnaviArea ul.gnaviSub{width:1080px;display:flex;margin:35px auto 0;justify-content: flex-start;padding-left:215px;}

.gnaviArea ul.gnaviSub li{margin:23px 33px 23px 0 ;position:relative;z-index:1001;}

.gnaviArea ul.gnaviSub li a{display:block;text-indent:-9999px;width:100%;height:20px;background: url(../images/common/navi_sprite.png) ;}
.gnaviArea ul.gnaviSub li a:hover{background: url(../images/common/navi_sprite.png) ;background-position:top -20px left 0px;display:block;}

.gnaviArea ul.gnaviSub li:nth-child(1) a{width:86px;background-position: top 0px left 0px;}
.gnaviArea ul.gnaviSub li:nth-child(2) a{width:86px;background-position: top 0px left -117px;}
.gnaviArea ul.gnaviSub li:nth-child(3) a{width:77px;background-position: top 0px left -234px;}
.gnaviArea ul.gnaviSub li:nth-child(4) a{width:141px;background-position: top 0px left -343px;}
.gnaviArea ul.gnaviSub li:nth-child(5) a{width:150px;background-position: top 0px left -516px;}
.gnaviArea ul.gnaviSub li:nth-child(6) a{width:81px;background-position: top 0px left -698px;}

.topicsAreaSub{width:925px;margin:75px auto;font-size:1.25em;line-height:2em;}
.topicsTopArea{    
	width: 57%;
    margin-bottom: 30px;
    color: #333;
    padding: 0 10px;
    }
.topicsArea{width:auto;margin-bottom:70px;color:#333;}

.topicsArea strong{font-weight:700 !important;font-size:1.25em;color:#164a9c;}
.black{color:#000;}

dl.topicsList2 a{text-decoration:none !important;}
dl.topicsList2{width:100%;display:flex;flex-wrap:wrap;}
dl.topicsList2 dt{width:25%;margin-right:3%;margin-bottom:60px;border: solid #efefef 5px;}
dl.topicsList2 dd {width:72%;margin-bottom:60px;}
dl.topicsList2 dd a{width:auto;color:#666 !important;margin-bottom:20px;font-size:1.25em;line-height:1.6em;text-decoration:underline !important;}
dl.topicsList2 dd a span{color:#164a9c;display:block;}
dl.topicsList2 dd a span img{margin-left:10px;}

dl.topicsList2 dd a:hover{text-decoration:none!important;}

.topicsHeader{width:auto;margin-bottom:35px;overflow:hidden;}
.cfArea{
    padding: 15px 10px;
    background: #fff0f1;
    border: 5px solid #ffd4d7;
    border-radius: 10px;
    margin-bottom: 30px;
	}
.snsAreaShare{    display: flex;
    justify-content: start;
    margin: 15px 0 0;
    float: right;}
.snsAreaShare li{margin-right:10px;}
.snsAreaShare li:nth-child(2){margin:-10px 10px 0 0;}
.castArea{width:auto;display:flex;margin-bottom:70px;justify-content:space-between;color:#333;font-size:1.125em;}
.staffArea{width:auto;display:flex;margin-bottom:70px;justify-content:space-between;color:#333;font-size:1.125em;}
.aboutArea{width:auto;margin-bottom:70px;color:#333;}

ul.story{width:auto;display:flex;justify-content: center;}
ul.story li{width:15%;margin-right:1px;padding:15px 0;color:#FFF;font-size:1.375em;background-color:#164a9d;text-align:center;}
ul.story li a{color:#FFF;text-decoration:underline;}
ul.story li a:hover{color:#FFF;text-decoration:none;}
.chapter{  padding: 5px 20px;
    color: #FFF;
    font-size: 1.125em;
    background-color: #164a9d;
    text-align: center;
    margin-bottom: 2px;
    display: inline-block;
    margin-bottom:5px;

}

#story article{width:720px;margin-right:auto;margin-left:auto;}
#story article p{font-size:1.5em;font-weight:700;}

.movieArea{width:830px;display:flex;margin:0 auto 70px;justify-content:space-between;color:#333;}
.movieArea article{width:48.5%; font-size:0.935em;color:#333;line-height:1.125em;text-align:center;}

.movie {padding-top: 56.25%; position: relative;}
.movie iframe{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border:5px #164a9d solid;
    }

.red{color:#cb1313 !important;}
h3.red01{font-size:2.2em;color:#cb1313;font-weight:700;}
h3.red02{font-size:1.6em;color:#cb1313;font-weight:700;    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ccc;
    padding-bottom: 30px;}
h4.red03{font-size:1.5em;color:#cb1313;font-weight:700;display:block;margin-bottom:5px;}

.mainAreaSub p{font-size:1.25em;line-height:2.5em;}
.mainAreaSub p strong{font-weight:700;}

.characterArea{width:100%;padding-top:30px;position:relative;}
.characterArea article{width:auto;}
.characterArea article:nth-child(odd){background-color:#f5f5f5;}
.characterArea article:nth-child(even){background-color:#FFF;}
.characterArea article div:nth-child(1) {
    width: 630px;
    margin-right: 20px;
}
.characterArea article div.charaSpace {
    width: 930px;
    display: flex;
    margin: 0 auto;
    padding: 30px 0;
}

.characterArea article div:nth-child(2){margin:50px 0 0 0;}

ul.charaNavi {
    width: 300px;
    position: absolute;
    top: 16px;
    right: 10%;
    display: flex;
    border: 5px solid #164a9c;
}
ul.charaNavi li{width:20%;}
ul.charaNavi li img{width:100%;}
ul.charaNavi li a:hover{opacity:0.4;}

time{font-size:1.125em;color:#999;}
.mainCont{font-size:1.375em !important;line-height:1.8em !important;}
.column2a {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.column2b {
    display: flex;
}

.wid10{width:9%;}
.wid20{width:19%;}
.wid30{width:29%;}
.wid40{width:39%;}
.wid50{width:49.5%;}
.wid60{width:59%;}
.wid70{width:69%;}
.wid80{width:79%;}
.wid90{width:89%;}
.wid100{width:99%;}

.wid50{}

p.charaName{font-size:2.2em;margin-bottom:10px;font-weight:700;}
p.charaName span{font-size:0.685em;}
.charaName2{font-size:1.5em;font-weight:700;display:block;margin-bottom:25px;}
.comment{font-size: 1.25em !important;
    line-height: 2em!important;
    margin: 25px 15px 0 0;
    color: #333;}

.co01{color:#e05f71 !important;}
.co02{color:#5591da !important;}
.co03{color:#d08836 !important;}
.co04{color:#39a476 !important;}
.co05{color:#5c6785 !important;}
.co06{color:#666 !important;}

.commentBox1 {
    position: relative;
    padding: 15px 35px;
    color: #fff;
    font-size: 1.25em;
    background: #c4252a;
    width: 27%;
    text-align: center;
    font-weight: 700;
}
.commentBox1:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -13px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #c4252a transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}


.commentBox2{
    position: relative;
    padding: 15px 35px;
    color: #fff;
    font-size: 1.25em;
    background: #5693d6;
    width: 27%;
    text-align: center;
    font-weight: 700;
}
.commentBox2:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #5693d6 transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}

.commentBox3{
    position: relative;
    padding: 15px 35px;
    color: #fff;
    font-size: 1.25em;
    background: #d28833;
    width: 27%;
    text-align: center;
    font-weight: 700;
}
.commentBox3:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #d28833 transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}


.commentBox4{
    position: relative;
    padding: 15px 35px;
    color: #fff;
    font-size: 1.25em;
    background:  #3aa071;
    width: 27%;
    text-align: center;
    font-weight: 700;
}
.commentBox4:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #3aa071 transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}

.commentBox5{
    position: relative;
    padding: 15px 35px;
    color: #fff;
    font-size: 1.25em;
    background: #61668c;
    width: 27%;
    text-align: center;
    font-weight: 700;

}
.commentBox5:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #61668c transparent transparent transparent;
    border-width: 20px 12px 0 12px;
}







/* フッター */
#footerArea{margin-top:250px;width:100%;border-top-style:solid;border-top-width:5px;border-top-color:#164a9c;padding:100px 0 0 0;position:relative;}


ul.bannerArea{width:62%;display:flex;margin:0 auto 45px;justify-content: center;}
ul.bannerArea li{width:30%;margin-right:3%;}
ul.bannerArea li:nth-child(1){margin-top:-15px;}

ul.snsArea {
    display: flex;
    justify-content: space-around;
    width: 200px;
    margin: 0 auto 70px;
}

.snsArea li {width:40px;}

.snsArea li img {width:100%;}

#copyright{padding:30px;fotn-size:0.875em;color:#FFF;text-align:center;background-color:#164a9c;}



.column320{width:320px;margin-left:auto;margin-right:auto;}
.column360{width:360px;margin-left:auto;margin-right:auto;}
.column480{width:480px;margin-left:auto;margin-right:auto;}
.column600{width:600px;margin-left:auto;margin-right:auto;}
.column640{width:640px;margin-left:auto;margin-right:auto;}
.column720{width:720px;margin-left:auto;margin-right:auto;}
.column3{width:auto;display:flex; justify-content: space-between;}
.column3 p {width:33%;}

.spBottomNavi{display:none;}


.drawerBack{display:none;}
.drawer{display:none;}



#pageTop{
	right:15%;
	bottom:100px;
	width:60px;
	position:fixed;

}

#pageTop a:hover{
	opacity:.6;
}

br.sp{display:none;}

.spBottomNaviTop{display:none;}

.spN{display:none;}
.sp60{width:100% ;}

}










.mT10{margin-top:10px;}
.mT20{margin-top:20px;}
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.mT50{margin-top:50px;}
.mT60{margin-top:60px;}
.mT70{margin-top:70px;}
.mT80{margin-top:80px;}
.mT90{margin-top:90px;}
.mT100{margin-top:100px;}
.mT110{margin-top:110px;}
.mT120{margin-top:120px;}

.mB10{margin-bottom:10px;}
.mB20{margin-bottom:20px;}
.mB30{margin-bottom:30px;}
.mB40{margin-bottomp:40px;}
.mB50{margin-bottom:50px;}
.mB60{margin-bottom:60px;}
.mB70{margin-bottom:70px;}
.mB80{margin-bottom:80px;}
.mB90{margin-bottom:90px;}
.mB100{margin-bottom:100px;}
.mB110{margin-bottom:110px;}
.mB120{margin-bottom:120px;}


.fs10{font-size:0.875em;}
.fs11{font-size:0.935em;}