@import url("https://use.typekit.net/tbm6iln.css");
@import url("https://use.typekit.net/ouj8jyy.css");
@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}
/*/////////////////////////////////////////////////////////////////////////
default_CSS
/////////////////////////////////////////////////////////////////////////*/
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}
body { font-family: Roboto, 'Helvetica Neue' ,'Terminal', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%; line-height: 1;}
body, h1, h2, h3, h4, h5, div, p, dl, dt, dd, ol, ul, li, form, table, caption, tbody, tfoot, thead, tr, th, td, article,figure { margin:0; padding:0; font-weight: normal; font-size:100%; box-sizing: border-box;}
p {background-color:rgba(255,255,255,.01);}
img,iframe { border:none;}
ol,ul { list-style:none; list-style-type: none;}
.relative { position: relative;}
.hid{visibility: hidden;}
.cover {width:100%; height:100%;}
@media print {
.noprint {display:none !important;}
}
/*font*/
.tCenter { text-align:center !important}
.tRight { text-align:right !important}
.tLeft { text-align:left !important}
/*font-size*/
html { font-size: 62.5%;} /* = 10px */
body { font-size: 1.6rem; } /* = 16px */
h1 { font-size: 3.2rem; }
h2 { font-size: 2.3rem; }
h3 { font-size: 2.1rem; }
h4 { font-size: 2.0rem; }
p { font-size: 1.6rem; }
.f160 { font-size:160%;}
.f140 { font-size:140%;}
.f130 { font-size:130%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f95 { font-size:95%;}
.f90 { font-size:90%;}
.f85 { line-height:normal !important; font-size:85% !important;}
.f80 { line-height:normal !important; font-size:80% !important;}
.stred{color:#ca0915;}
.stye{color:#fef900;}
.storg{color:#ea843a;}
.stgrn{color:#69c0b7;}
.stblu{color:#43c0f6;}
.stblu2{color:#5dc1d0;}
.stpk{color:#ec789e;}
.stpk2{color:#ec576b;}
.ffsp{font-feature-settings: "palt";}
/*link*/
a { text-decoration:none; color:#ca0915;}
a:hover { text-decoration:none; color:#ca0915;}
#menu li,header #logo a,a.btn_prev,a.btn_s,a.btn_i,#prevnext ul li a,.update li a,.bnarea ul li a,.bn_prev a,#gotop a,a.btn_df,ul.bnr li a,.btnitem,#snsarea #sns a,.paraviorg{text-decoration:none;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
#menu li:hover,header #logo a:hover,a.btn_i:hover,a.btn_df:hover,.bn_prev a:hover,#gotop a:hover,ul.bnr li a:hover,.btnitem:hover,#snsarea #sns a:hover,.paraviorg:hover{text-decoration:none;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;}
.no-link{ pointer-events: none; cursor: default; text-decoration:none; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}

.aomg {
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 600;
font-style: normal;
}
.prso {
font-family: pressio-condensed, sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing:.05em;
}
.hgoa {
font-family: headline-gothic-atf, sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing:.05em;
}

/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {background-color:#102a65; background: url(../img/bg.png); color:#102a65; background-attachment: fixed;}
#con-body {background-color:transparent;}
.inner{width:1000px; margin:0 auto;}

header{margin:0 auto; background: url(../img/top/bg_main.jpg) no-repeat center center; background-size:cover;}
#top main{width:100%;}
#top h1{width:1080px; height:765px; position:relative; margin:0 auto;}
#top h1 .main1{background: url(../img/top/sp_main.jpg?1) no-repeat center center; background-size:cover; width:1080px; height:765px; margin:0 auto; position:absolute; top:0; left:0;
animation: fadein 1.5s ease 0s 1 normal;
-webkit-animation: fadein 2s ease 0s 1 normal;}
#top h1 .main2{background: url(../img/top/logo_main.png) no-repeat 0 0; background-size:contain; position:absolute; bottom:0; left:0; width:720px; height:223px; opacity: 0;
-webkit-animation: fadein 1.5s ease 0.5s 1 forwards;
  animation: fadein 1.5s ease 0.5s 1 forwards;}
#top h1 .main3{background: url(../img/top/onsale.png) no-repeat 0 0; background-size:contain; position:absolute; bottom:29px; right:20px; width:355px; height:97px; opacity: 0; font-size:80%;
-webkit-animation: fadein 2s ease 1s 1 forwards;
  animation: fadein 2s ease 1s 1 forwards;}
#top h1 .main4{background:rgba(255,255,255,0.5) url(../img/top/main4.svg?2302) no-repeat left 25px top 13px; background-size:80%; position:absolute; top:40px; left:50px; width:230px; height:230px; opacity: 0; border-radius:50%; border:6px solid #c90915;
box-shadow: -5px -5px 20px 0px rgba(255, 255, 255, 0.8), 5px 5px 20px 0px rgba(0, 0, 0, 0.3); text-align:center; vertical-align: middle;
-webkit-animation: fadein 1.5s ease 1.5s 1 forwards;
  animation: fadein 1.5s ease 1.5s 1 forwards;}
#top h1 .mermovie{background:rgba(255,255,255,0); position:absolute; bottom:0; right:0; width:190px; height:30px;
animation: fadein 1.5s ease 0s 1 normal;
}
#top h1 .movie2025{background: url(../img/top/bn_movie2025.jpg) no-repeat 0 0; background-size:cover; position:absolute; top:50px; left:20px; width:500px; height:118px; box-shadow:4px 4px 10px rgba(60,60,60,0.4);}
#top h1 .main4 a,#top h1 .mermovie a,#top h1 .movie2025 a{display:block; width:100%; height:100%;}

@keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}


#countdown {margin:2em auto 0; width:100%; vertical-align: middle; position:relative; text-align:center; padding:0 0 3em;}
#countdown .byoa{color:#ca0915; font-weight:bold;/*position:absolute; top:0; bottom:0; left:0; margin:auto;*/ vertical-align:bottom; display:inline-block; font-size:220%; padding:0 0 .15em; text-align:right;}
.timer{display:inline-block; margin:0 0 0 1em; padding:0; vertical-align:bottom; color:#ca0915;}   
.timertext{font-weight:bold; font-size:220%; letter-spacing:.1em;}
.timertext span.number{font-size:280%; color:#fff;
font-family: pressio-condensed, sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing:0;}
.timer span.nowoa{text-align:center; font-weight:bold; font-size:450%; color:#fff;}
#countdown p{background:none !important;}

/*menu*/
#menu {margin:0 auto; background: url(../img/mbg_pc.png) repeat center bottom; position: relative;}
#menu ul {width:1000px; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#menu li {text-align:center; width:160px; height:110px; vertical-align: middle; position: relative;}
#menu li:before,#menu li:after { 
  content:'';
  width: 15px;
  height: 15px;
  position: absolute;
  display: inline-block;
}
#menu li:before {
  border-left: solid 2px #fff;
  border-top: solid 2px #fff;
  top:0;
  left: 0;
}
#menu li:after {
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  bottom:0;
  right: 0;
}

/*#menu li.menu6{opacity:0.5;}*/
#menu li:nth-child(odd){background: linear-gradient(135deg, rgba(202,9,21,0.8) 0%,rgba(202,9,21,0) 80%,rgba(202,9,21,0) 100%);}
#menu li:nth-child(even){background: linear-gradient(-50deg, rgba(202,9,21,0.8) 0%,rgba(202,9,21,0) 80%,rgba(202,9,21,0) 100%);}
#menu li a {width:100%; height:100%; display: block; text-decoration:none; color:#fff; vertical-align: middle;
z-index:5; box-sizing: border-box;
display: flex;  justify-content: center; align-items: center;
transition-duration: .5s;}
#menu li a p{font-size:145%; font-weight:bold;}
#menu li span.eng{color:#fff; display:inline-block; padding:.2em 0 0; font-size:80%;
font-family: pressio-condensed, sans-serif;
font-weight: 400;
font-style: normal;}

#newep h2,#update h2,#tbstopics h2,#twTL h3,#rect h3{font-size:330%; color:#ca0915;}

.oainfo{color:#fff; text-align:center; font-size:125%; line-height:140%; padding:.5em 0 0; background:none;}
.onsale231013{width:780px; text-align:center; margin:0 auto 2.5em; display:block;}

#next{background: url(../img/bgsmoke.jpg) no-repeat center bottom; padding:2em 0 3.5em; margin:0 auto; background-size:cover;}
#next .inner{background: url(../img/mermark.png) no-repeat left top; background-size:30%; padding:2em 0 0; z-index:1;}
#next #trailer {position: relative; width:800px; height:450px; background-size:cover; background-position: center center; background-repeat: no-repeat; margin:1.5em auto; box-shadow:20px 30px 30px rgba(16,42,101,0.9); overflow: hidden; z-index:11; transition:.5s;}
#next #trailer iframe,#spmov iframe {width:100%; height:450px;}
#next .play_btn { width:80px; height:80px; border-radius:50%; background: rgba(0, 0, 0, .5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block; z-index:111;}
#next .play_txt { color: rgba(255, 255, 255, 1); font-size:160%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)  rotate(90deg);}

#newep{width:100%; margin:2em 0 3.5em; position:relative; display:inline-block; vertical-align:top; padding:0 0 0;}
#newep:before,#newep:after { 
  content:'';
  width: 100px;
  height: 100px;
  position: absolute;
  display: inline-block;
}
#newep:before {
  border-left: solid 2px #fff;
  border-top: solid 2px #fff;
  top:0;
  left: 0;
}
#newep:after {
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  bottom:0;
  right: 0;
}
#newep figure#mainph{width:380px; height:240px; background-size:cover; background-position: center center; background-repeat: no-repeat; display:inline-block;
margin:1em 1.8em 0 1.5em; vertical-align:top; background-image:url(../story/img/sp1/sp1.jpg?1);}

#newep #storyline{width:calc(100% - 460px); display:inline-block; padding:0;}
#newep h2{position:absolute; top:4%; left:3%; line-height:0;}
#newep h3.epnm{color:#ca0915; font-size:180%; display:inline-block;}
#newep .oadate{font-size:100%;}
#newep p.text {padding:.5em 0 1em; line-height:1.4; font-size:110%; word-break: break-all; color:#fff;
text-shadow:10px 10px 10px rgba(16,42,101,0.9); background:none !important;}
#newep .marker a,#storyline_sp label {width:38%; margin:.3em auto; padding:.6em 0; display:block; background-color:rgba(16,42,101,0.8); text-align:center; font-weight:bold; font-size:140%; color:#be9c41; transition: 0.5s; box-shadow:5px 5px 10px rgba(16,42,101,0.9); border:2px solid #ffff; color:#fff;}
#newep .marker a:hover{background-color:rgba(255,255,255,0);}
.tmer{position:absolute; left:-1%; bottom:-2%; bottom:23%; width:700px;}

#scr{margin:0 auto 2.5em;}
#scr h2{width:800px; color:#fff; font-size:300%; text-align:center; background-color:rgba(255,255,255,0.1); margin:0 auto; padding:.3em 0;}
#scr #trailer{margin:0 auto !important;}

/*topics*/
#tbstopics{padding:1.5em 0 2em; margin:0 auto; background: url(../img/bg3.png); }
#tbstopics h2{text-align:center; margin:-1em auto 0; display:block;}
#topics {position: relative; padding:1.5em 0 0;}
#topics .tolist a{color:#fff; position:absolute;right:5%; top:-10px;}

/*whatsnew*/
#whatsnew{background:url(../img/top/bg_ph.jpg) no-repeat center top; background-size:cover;}
#update {width:1010px; position:relative; margin:0 auto; padding:1em 0 3em;}
#update h2{margin:0 auto; z-index:1; padding:.5em 0 .8em; text-align:center;}
#update ul#topicslist{display: flex; flex-flow: row wrap; justify-content: center; align-items: center;
height:290px; overflow-y:scroll; padding:2px .5em 0 0;}
#update ul::-webkit-scrollbar {width:3px;}
#update ul::-webkit-scrollbar-track {background:none;}
#update ul::-webkit-scrollbar-corner {display: none;}
#update ul::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.2);}

#update ul#topicslist li{width:47%; height:120px; position: relative; margin:0 0 2em .5em;}
#update ul#topicslist li a span.thum{width:160px; height:120px; display:inline-block; background-size: cover; background-repeat: no-repeat; background-position: center top; vertical-align:top; margin:0 2.5% 0 0; vertical-align: middle; /*background-image:url(../img/top/update/ph1.jpg);*/}
#update ul#topicslist li p{display:inline-block;line-height:1.4; padding:0; width:58%; vertical-align: middle;}
#update ul#topicslist li a{display:block; width:100%; color:#fff; border:2px solid #fff;}
#update ul#topicslist li a:hover{opacity: 0.5; transition: 0.4s;}
#update ul#topicslist li span.ymd{color:#fff; line-height:140%; font-size:120%; display:inline-block; border-bottom:1px solid #fff; padding:0 0 .2em; margin:0 0 .5em; width:100%;}
#update ul#topicslist li:nth-last-child(4) a{pointer-events: none; cursor: default;}
#update .ytbthum{background-position: center center !important; background-size:contain !important; background-color:rgba(255,255,255,0.1);}
#update .thum0701{background-position: center center !important; background-size:auto 100% !important; background-color:rgba(255,255,255,0.1);}
#update .thum0917{background-position: center center !important; background-size:95% !important; background-color:rgba(255,255,255,0.1);}
#update .thum0416{background-position: center center !important; background-size:40% !important; background-color:rgba(255,255,255,0.1);}

/*stream*/
#stream{background-color:rgba(255,255,255,0.6); padding:0 0 1em; margin:0 auto;}
#stream h3{font-size:200%; font-weight:600; position: relative; z-index:1; text-align:center; color:#fff; margin:0 0 .2em;}
#stream h3 span{background-color:rgba(202,9,21,0.9); display:inline-block; padding:.05em;}
#stream_free{width:60%; padding:0 0 5px; vertical-align:top; position: relative;}
#stream figure#ph_thumb{width:59%; display:inline-block;}
#stream figure#ph_thumb span{display:block; width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; position:relative; padding:66% 0 0;}
#stream figure#ph_thumb span.epthum{/*background-image:url(../img/top/free_ep9.jpg);*/background-image:url(../story/img/ep11/ep11.jpg);}
#stream_free ul{width:38%; display:inline-block; vertical-align:top;}
#stream_free ul li{width:100%; height:75px; margin:0 1% 2.8% 1.8%;
background:rgba(255,255,255,0.6) url(../img/top/play.png) no-repeat left 4% center; background-size:16%; transition:.5s; position:relative;}
#stream_free ul li a{display:block; width:100%; height:100%; position:relative;}
#stream_free ul li:hover,#stream #paravi_os figure:hover{filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;}
#stream_free ul li span{width:80%; display:inline-block; text-align:center; font-size:85%;/* position:absolute; right:0; bottom:0; padding:.3em 0;*/}
#stream_free ul li .sitelogo{height:40px; display:block; margin:auto; position:absolute; right:10%; bottom:0; top:0;}
#stream_free ul li.tver span{color:#00a6d6;}
#stream_free ul li.tbsfree span{color:#0050ff;}
#stream_free ul li.tver span .sitelogo{right:26%;}
#stream_free ul li.tbsfree span .sitelogo{height:29px;}
#stream_free ul li.paravi span{color:#004f99;}

#stream #paravi_os{width:37%; /*background-color:#004f99;*/ text-align:center; background-color:#102a65; margin:.6em 0 0;}
#stream #paravi_os figure{background: url(../img/top/pos_main.jpg) repeat 0 0; width:100%; padding:56.25% 0 0; background-size: cover; position:relative; transition:.5s;}
#stream #paravi_os figure img,#stream figure#ph_thumb img{position:absolute;left:0;top:0; width:100%; height:100%;}
#stream #paravi_os p{width:98%; padding:2.5% 0 1.6%; vertical-align:middle; margin:0 auto; line-height:100%;}
#stream #paravi_os p span{display:inline-block; font-size:100%; letter-spacing:-.05em; color:#fff;}
#stream #paravi_os p img{width:28%; vertical-align:middle; margin:0 .4em .3em 0;}

/*#stream_free ul li.tver,#stream_free ul li.tbsfree,*/#stream_free ul li.paravi{pointer-events: none; cursor: default; text-decoration:none;}
/*#stream_free ul li.tver a,#stream_free ul li.tbsfree a,*/#stream_free ul li.paravi a{opacity:0.3;}
/*#stream_free ul li.tver:before,
#stream_free ul li.tbsfree:before,*/
#stream_free ul li.paravi:before{
position: absolute;
content:"";
background-color:rgba(252,252,252,0.5);
left:0;right:0;top:0;bottom:0;
z-index:1;
font-weight:bold;
text-align: center;
}
.endtxt{position: absolute; left:0;right:0; top:40%; z-index:2; opacity:1 !important; text-align:center; width:100%; font-size:105% !important;
text-shadow:1px 1px 5px rgba(252,252,252,0.8),-1px 1px 5px rgba(252,252,252,0.8),1px -1px 5px rgba(252,252,252,0.8),-1px -1px 5px rgba(252,252,252,0.8); margin:auto; padding:0 !important; color:#102a65 !important;}

/*bnr*/
ul.bnr{display: flex; flex-flow: row wrap; width:1000px; margin:0 auto 4em; justify-content: center; position:relative; z-index:1;}
ul.bnr li{width:465px; height:110px; margin:0 .5em 1.2em .5em; text-align:center; /*border:2px solid #fff;*/ box-shadow:5px 18px 18px rgba(16,42,101,0.4);}
ul.bnr li a{display:block; width:100%; height:100%; background-repeat: no-repeat; background-position:center center; position: relative; background-size:cover;}
ul.bnr li a span.stream{text-align:center; color:#fff; position: absolute; bottom:0; left:0; right:0; display:inline-block; line-height:210%;}
ul.bnr li.bn_spv a {background-image:url(../img/top/bn_spv.jpg);}
ul.bnr li.bn_spv a:before, ul.bnr li.bn_spv a:after { 
  content:'';
  width: 30px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
ul.bnr li.bn_spv a:before {
  border-left: solid 1px #0f2964;
  border-top: solid 1px #0f2964;
  top:6px;
  left:6px;
}
ul.bnr li.bn_spv a:after {
  border-right: solid 1px #0f2964;
  border-bottom: solid 1px #0f2964;
  bottom:6px;
  right:6px;
}
ul.bnr li.bn_pos a {background-image:url(../img/top/bn_pos.jpg?2);}
ul.bnr li.bn_tbsshop a {background-image:url(../img/top/bn_goods.png?2);}
ul.bnr li.bn_tbsshop2 a {background-image:url(../img/top/bn_dvd.jpg);}
ul.bnr li.bn_stamp a {background-image:url(../img/top/bn_stamp.png);}
ul.bnr li.bn_paravi a {background-image:url(../img/top/bn_paravi.jpg);}
ul.bnr li.bn_ytb,ul.bnr li.bn_gogo{height:262px;}
ul.bnr li.bn_ytb a {background-image:url(../img/top/bn_gogo.jpg);}
ul.bnr li.bn_gogo a {background-image:url(../img/top/bn_gogo2.png?1);}
ul.bnr li.bn_sacas,ul.bnr li.bn_zexa_pc{height:145px;}
ul.bnr li.bn_sacas a {background-image:url(../img/top/bn_sacas.jpg);}
ul.bnr li.bn_zexa_pc a,ul.bnr li.bn_zexa_sp a {background-image:url(../img/top/bn_zexa.jpg);}
ul.bnr li.bn_goods a {background-image:url(../img/top/bn_goods.jpg?1);}

/*sns*/
#snsarea{padding:3% 0 0; margin:0 auto;
background-image:linear-gradient(to top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); 
background-repeat:no-repeat;
background-size:100% 50%;
background-position:center bottom;}
.clip.triangle{
  -webkit-clip-path: polygon(0 0, 0% 100%, 80% 0);
  clip-path: polygon(0 0, 0% 100%, 80% 0);
    width:60%;
   position:absolute; top: 0; left:0;
   opacity: 0.8;
}
#snsarea .inner{width:1000px; margin:0 auto; display: flex; flex-flow: row wrap; position: relative; justify-content: center;}
#twTL{width:600px; height:430px; margin:0 3em 0 0; position: relative; z-index:1; background-color:rgba(16,42,101,0.5); padding:1% 0 0;}
#twTL .tline{width:96%; margin:0 auto; overflow:hidden; border:2px solid #fff; border-top: none; position: relative; padding:1.5em 0 0;}
#twTL .tw-inner{width:96%; margin:0 auto; border:2px solid #fff; border-top: none; position: relative; padding:1.5em 0 0;}
#twTL h3{color:#fff; text-align:center; line-height:0;}
.sidebdr {
width:96%;
margin:0 auto;
display: flex;
align-items: center;
}
.sidebdr:before,
.sidebdr:after {
border-top: 2px solid;
content: "";
flex-grow: 1;
}
.sidebdr:before {
margin-right:2rem;
}
.sidebdr:after {
margin-left:2rem;
}
#twTL .outgo{position:absolute; bottom:-5%; left:3%; font-size:75%; color:#fff;}

#rect {width:300px; text-align:center;}
#rect h3{margin:-5% 0 0; padding:0 0 5%; color:#fff;}
#rect .ad {display:block; width:300px; height: 250px; background:#fff;}
#snsarea #sns{text-align:center; margin:0 auto 2em;}
#snsarea #sns a{width:80px; height:80px; margin:0 1% 0; position: relative; display:inline-block; border-radius:50%; border:1px solid #fff;}
#snsarea #sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:80%;}

/*footer*/
#top footer{text-align:center; padding:2em 0 2.5em;}
footer .share{display:inline-block; vertical-align:top; padding:35px 0 0; position: relative; z-index:10;}
footer p.copy {text-align:right; padding:1em 0; font-size:80%; color:#fff;}
#top footer p.copy {display:inline-block; width:720px; margin:0 auto; padding:40px 0 0;}
footer p.copy a{color:#fff;}
/*f2*/
footer.dir2{margin:8% 0 0; position:relative; padding:0 0 0;
background-image:linear-gradient(to top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); 
background-repeat:no-repeat;
background-size:100%;
background-position:center bottom;
}
footer.dir2 .inner{width:980px; margin:0 auto; position:relative; height:200px; }
footer.dir2 .share{position:absolute; top:20%; left:0;}
#rect2 {width:300px; height: 250px; background:#fff; position:absolute; bottom:10%; right:0;}

#gotop {position: fixed; bottom:0; right:0; z-index:10;}
#gotop a {display:block; width:80px; height:80px; position: relative; background-color:rgba(202,9,21,0.9);} 
#gotop a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:50%;}

/*------------------　2nd　------------------ */
header#dir{padding:0; margin:0 auto; background:url(../img/bgsmoke.jpg) no-repeat center bottom 5%; background-size:cover; position: relative;}
header#dir #logo{width:980px; margin:0 auto; padding:2.5em 0;}
header#dir #logo a{width:600px; height:125px; display:block; background: url(../img/logo.svg) no-repeat center 0; margin:0 auto; background-size:contain;}
h1#ttl {text-align:center; font-size:200%; color:#fff; position: relative;}
h1#ttl span.engttl{font-size:200%; padding:0 .1em 0 0;}
.slash{height:70px; z-index:1; display:inline-block; vertical-align: top;}
.wrap{position: relative; padding:3em 0 0;}
.wrap::before {
background:url(../img/bgph.jpg) no-repeat center center;
  background-size: cover;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 300px;
  top: 0;  left: 0;
}
#contents{width:980px; background:url(../img/bg2.png); padding:3em 0 2em; margin:1.8em auto 3em; position: relative; box-shadow:20px 30px 40px rgba(16,42,101,0.9);}
#contents .inner{width:90%;}
#contents .inner p {padding:1em 0 .5em; line-height:1.7;}

.ph_cut {width:600px; height:400px; margin:1.5em auto; background-size: cover; background-repeat: no-repeat; background-position: center center;
background-color:rgba(255,255,255,0.5);}
.ph_cut_l {width:400px; height:600px; margin:1.5em auto; background-size: cover; background-repeat: no-repeat; background-position: center top; background-color:rgba(255,255,255,0.5);}
.lazy {position:relative; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.lazy img {position:absolute;left:0;top:0; width:100%; height:100%;}
.line1 {background: linear-gradient(transparent 60%, rgba(254,249,0,0.7) 60%);}
.line2 {background: linear-gradient(transparent 75%, rgba(93,193,207,0.3) 75%);}
.bdr{padding:.8em 1.5em; margin:1.5em auto; font-size:95%; background-color:rgba(255,251,244,0.8);}
.bdr2{padding:.8em 1.5em; margin:1.5em auto .5em; font-size:95%; border:1px solid #dabd64; background:url(../img/bg3.png); box-shadow:10px 10px 20px rgba(197,152,97,0.2);}
.fuchidori {font-weight: bold; color: rgba(0, 0, 0, 0); text-shadow:2px 2px 0 #fef900; -webkit-text-stroke: 1px #fd52ba; text-stroke: 1px #fd52ba;}

/*about*/
#highlight h2{font-weight:bold; line-height:140%; font-size:165%; margin:0 0 1em; text-align:center;}
#highlight h2 span.f150{font-size:150%; line-height:130%;}
#highlight .ph1 {width:800px; height:565px; background-image:url(../img/ph1.jpg?1); background-position: center bottom;}
#highlight .ph_sp {width:800px; height:533px; background-image:url(../img/ph_sp.jpg); background-position: center bottom;}
#cast table td {padding:.5em .5em .5em 1em; font-size:90%;}
#highlight p.cap {font-size:85%; text-align:center; padding:0 !important; margin:0 !important;}
#highlight .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
#highlight input:checked ~ .hidden_show {
    padding:.5em 0 0;
    height: auto;
    opacity: 1;
}
#highlight label,#caststaff label {cursor :pointer;}
#highlight input,#caststaff input {display: none;}
#highlight .comment {padding:.8em 1.2em; background-color:rgba(16,42,101,0.05); margin:1.5em 0;}
#highlight h3{font-size:120%; font-weight:bold; padding:.5em 0;}
#highlight h3.ttl_cmnt{font-size:180%; padding:0 ; color:#ca0915; margin:1.5em 0 0; position: relative; padding:0 0 0 6%;}
#highlight h3.ttl_cmnt:before{
content: "";
width:5%;
height:1px;
background-color:#ca0915;
position: absolute;
left:0;
top: 50%;
}
#highlight .comment h3{border-left:4px solid #ca0915; color:#ca0915; padding:.3em 0 .3em .5em;}
#highlight .comment p,#music .comment p{padding:.5em;}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tab_label {
  color: #13c3ac;
  font-weight: bold;
  border: solid 2px #13c3ac;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.tab_label:hover {
  opacity: 0.75;
}
.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}
.tabs input:checked + .tab_label {
  color: #fff;
  background-color: #063784;
  transition: .5s ;
}
.tabs input:checked + .orgd {
  background-color: #ca0915;
}
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content {
  display: block;
}
.tab_content{
  position: relative;
  animation: fadeup 1s ease;
}
@keyframes fadeup {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
.tabs label.tab_label{font-size:150%; display:block; font-weight:bold; text-align:center; width:40%; margin:0 .5em 2em;  letter-spacing:.05em; text-decoration: none; padding:1em 0;}
.spd{border:2px solid #063784; color:#063784;}
.orgd{border:2px solid #ca0915; color:#ca0915;}

/*story*/
#story h2{font-size:250%; text-align:center; width:600px; margin:0 auto .5em;
  position: relative;
  line-height: 1.4;
  padding:.1em 0;
  display:block;
  }
#story h2:before, #story h2:after { 
  content:'';
  width: 50px;
  height: 50px;
  position: absolute;
  display: inline-block;
}
#story h2:before {
  border-left: solid 2px #102a65;
  border-top: solid 2px #102a65;
  top:0;
  left: 0;
}
#story h2:after {
  border-right: solid 2px #102a65;
  border-bottom: solid 2px #102a65;
  bottom:0;
  right: 0;
}

#story #trailer{width:700px; height:393.75px; margin:.5em auto 1em;}
#story #trailer iframe{width:100%; height:393.75px;}
#story #trailer{width:700px; height:394px; margin:.5em auto 1em; background-size:cover; background-position: center center; background-repeat: no-repeat;}
#story ul#movlist {margin:1em auto; text-align:center;}
#story ul#movlist li {width:340px; margin:0 5px 10px; display: inline-block; font-size:110%; line-height:135%; position:relative;}
#story ul#movlist li a {width:100%; display:block; padding:.8em 0; color:#ca0915; font-weight:bold; z-index:1; position:relative; border:2px solid #ca0915; transition: 0.5s;}
#story ul#movlist li a:hover{box-shadow:5px 5px #ca0915;}
#story #contents .inner p a{ color:#ca0915;}
#story #bknm{width:100%; margin:0 auto; padding:0 0 1em;}
#story #bknm h3{letter-spacing:.05em; font-size:300%; position:relative; padding:0 0 0 4%; margin:4% 0 0; color:#ca0915;}
#story #bknm ul{margin:1em auto 0; display: flex; flex-flow: row wrap; width:95%;}
#story #bknm li{margin:0 0 1em 1em; position:relative; width:215px; box-shadow:8px 8px 10px rgba(4,0,0,0.2);}
#story #bknm li:before { 
  content:'';
  width: 30px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
#story #bknm li:before {
  border-left: solid 3px #ca0915;
  border-top: solid 3px #ca0915;
  top:0;
  left: 0;
  z-index:1;
}
#story #bknm li a{display:block; width:100%; height:140px; text-align:center; position:relative; overflow: hidden; background-color:#fff; margin:0 auto 0; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: 0.3s;}
#story #bknm li a:after{
position: absolute;content: "";display: block;width: 100%;height: 100%;top: 0;background-size: cover; background-repeat: no-repeat; background-position: center center;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   transition: all .3s ease-out;}
#story #bknm li a:hover:after{
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}
#story #bknm li span.epn {padding:4.5% 5%; font-size:100%; position: absolute; top:0; left:0; margin:0 auto; z-index:1;}
.triangle::before {
    content: "";
    bottom: 0;
    right: 0;
    border-top:4em solid transparent;
    border-right:4em solid rgba(202,9,21,0.9);
    position: absolute;
    z-index:10;
}
.triangle span.enum{position: absolute; right:3%; bottom:3%;  z-index:11; font-size:235%; color:#fff;}
.triangle span.f70 {font-size:60%; line-height:1;}

#story #gallery{margin:1.5em auto 0; width:100%;}
#gallery ul#show{width:100%; margin:0 auto 1em; display:flex; flex-flow: row wrap; align-items: center;}
#gallery ul#show li{margin:6px;}
#gallery ul#show li span {background-size: cover; background-repeat: no-repeat; background-position: center top;}
#gallery ul#show li span.lazy {position:relative; display:block;}
#gallery ul#show li span a {width:280px; height:187px; display:block; transition: 0.5s;}
#gallery ul#show li span a:hover{background-color:rgba(202,9,21,0.6);}
.lbg-pics{background-color:none !important; box-shadow:none !important;}

/*caststaff*/
#caststaff h1#ttl span.spv{font-size:160%; padding:0 0 .2em; display:inline-block;}
#caststaff h2{margin:0 auto .5em; text-align:center; letter-spacing:.2em; font-size:350%; position:relative; display:inline-block; color:#ca0915;}
#caststaff h2.staff{margin:1.5em auto .5em;}
#caststaff .castlist{/*background:url(../img/cast.png?2) no-repeat 28% 0;*/background: url(../img/cast.png?4) no-repeat 34% 0; background-size:contain; width:60%; height:auto; margin:0 auto; display:block; padding:115% 0 0 !important;}
#caststaff .castlist_sp{background: url(../img/cast_sp.png) no-repeat 25% 0; background-size:contain; width:60%; height:auto; margin:0 auto; display:block; padding:83% 0 0 !important;}
#caststaff h3,#caststaff #spvlist h2{width:75%; margin:1.5em auto .6em; font-size:105%; color:#ca0915; border:1px solid #ca0915; font-weight:bold;}
#caststaff #spvlist h2{margin:2em auto 0; letter-spacing:0;}
#caststaff #spvlist h2:first-of-type{margin:0 auto;}
#caststaff h3:first-of-type{margin:0 auto .6em;}
#caststaff .credit{text-align:center; width:60%; margin:0 auto 2em; font-size:140%; line-height:1.7;}
#caststaff .credit span.f80{font-size:75% !important;}
#caststaff .credit span.f80_2{line-height:1.2; font-size:80%; display:block;}
#caststaff .credit span.f80_3{font-size:80% !important;}
#caststaff #spvlist.credit p{line-height:120%;}
#caststaff table{width:80%; margin:0 auto 2.5em; font-size:160%;}
#caststaff table td{text-align:center; padding:1.8% 0; line-height:1;}
#caststaff table td.cname{text-align:left;width:46.5%; vertical-align:bottom; }
#caststaff table td.chara{text-align:right;width:46.5%;}
#caststaff table td.naka{padding:0 0 3%; font-size:80%; vertical-align:bottom; line-height:0; color:#9fa7bc;}
#caststaff table td.maru{vertical-align:bottom;font-size:80%; padding:5px 0; font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;}
.kanasp{letter-spacing:-.15em;}
#caststaff [data-ruby] {
    position: relative;
}
#caststaff [data-ruby]::before,
#caststaff [data-ruby-r]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -.5em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    letter-spacing:0;
    text-align:center;
}
#caststaff [data-ruby-r] {
    position: relative;
}
#caststaff [data-ruby-r]::before {
    content: attr(data-ruby-r);
    text-align:right;
}

/*btn*/
a.btn_df,#highlight label.btn_cmnt{font-size:140%; color:#ca0915; display:block; font-weight:bold; text-align:center; width:40%; margin:1em auto 1.5em;  letter-spacing:.05em; text-decoration: none; padding:1.5em 0; border:3px solid #ca0915;}
a.btn_df2{font-size:140%; color:#ca0915; display:block; font-weight:bold; text-align:center; width:44.5%; margin:1em auto 1.5em;  letter-spacing:.05em; text-decoration: none; padding:1em 0; border:1px solid #ca0915; transition:.5s;}
a.btn_df2:hover{box-shadow:5px 5px #ca0915;}
a.btn_s {background:#81cac4; padding:.5em; color:#fff; display:block; font-weight:bold; margin:.5em auto; border-radius:30px; text-align:center; width:30%; letter-spacing:.2em; font-size:120%;} 

/*share*/
#share{width:50%; text-align:center; margin:2% auto; vertical-align:middle;}
#share span {color:#102a65; background-color:rgba(255,255,255,0.9); font-weight:bold; font-size:90%;}
#share span {vertical-align:middle;
    position: relative;
    display: inline-block;
    padding: 6px 0;
    min-width: 100px;
    max-width: 100%;
    box-sizing: border-box;
}
#share span:before{
    content: "";
    position: absolute;
    top: 60%;
    right: -14px;
    margin-top: -6px;
    border:4px solid transparent;
    border-left:10px solid rgba(255,255,255,0.9);
}
#share ul{display: inline-block; margin:0 0 0 1.2em; vertical-align:middle;}
#share ul li{display:inline-block; border-radius:50%; background-clip: content-box; padding:5px 5px 3px; margin:0 .1em 0;}
#share ul li img{width:50px;}
#share ul li a{display:block;}
#share ul li a img{transition: .5s;}
#share ul li a:hover img{transform: scale(1.2);}

/*//////pc//////*/
@media all and (min-width: 768px) {
.nobr{display: none;	}
#menu li {border-right:1px solid #fff; border-top:1px solid #fff; border-bottom:1px solid #fff;}
#menu li:first-child{border-left:1px solid #fff;}
#update ul#topicslist{justify-content: start; align-items: start;}
#update ul#topicslist li:nth-child(2n){margin:0 0 2em 2.5em;}
/*#update ul#topicslist li:last-child{margin:0 0 2em 2.5em;}*/
/*ul.bnr li:nth-child(2n){margin:0 .8em 1.2em 1.2em;}*/
#topics{width:1080px; margin:0 auto;}
#stream .inner{display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
#stream_free:before,#stream_free:after { 
  content:'';
  width:80px;
  height:60px;
  position: absolute;
  display: inline-block;
}
#stream_free:before {
  border-left: solid 2px #fff;
  border-top: solid 2px #fff;
  top:30px;
  left:-14px;
}
#stream_free:after {
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  bottom:0;
  right:-4px;
}
ul.bnr li.bn_zexa_sp{display:none;}
ul.bnr li.bn_goods{margin:0 2em 1.2em;}
}

/*//////smp//////*/
@media all and (max-width: 767px) {
body,p { font-size: 1.4rem;}
h1 { font-size: 2.6rem;}
h2 { font-size: 2rem; line-height:1.5em;}
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
.f90 { font-size: 1.2rem;}
.hidtxt{visibility:visible;}
.hid_sp{display:none;}
.pcbr{display: none;	}
.ph_cut img,.ph_cut_l img,#top main h1 img,#spot #trailer img,#update ul#topicslist li span.thum img,#newep figure#mainph img {position:absolute;left:0;top:0; width:100%; height:100%;}

header{margin:0;}
#top h1{width:100%; height:auto; padding:70.83% 0 0;}
#top h1 .main1{width:100%; height:0; padding:70.83% 0 0;}
#top h1 .main2{width:68%; height:0; padding:21.0682080925% 0 0;}
#top h1 .main3{width:32%; height:0; padding:8.77753779698% 0 0; bottom:4%; right:1.5%;}
#top h1 .main4{width:28%; height:39%; top:4%; left:5%; border:3px solid #c90915; background-position: left 45% center; background-size:81%;}
#top h1 .mermovie{width:18%; height:4%; bottom:0;}
#top h1 .movie2025{width:47%; height:0; padding:11% 0 0; top:8%; left:2.25%; box-shadow:2px 2px 8px rgba(60,60,60,0.4);}

#countdown{width:100%; margin:2% auto 0; background-size:190%; padding:0 0 3%;}
#countdown .byoa{width:30%; font-size:4.7vw; padding:0 0 1.2%; letter-spacing:-.05em;}
.timer{margin:0 0 0 .5%; padding:0 0 .5%; text-align:left;}
.timertext{font-weight:bold; font-size:3.8vw;}
.timertext span.number{font-size:11vw;}
.timer span.nowoa{font-size:10vw;}

.bn_prev{width:100%; margin:1% auto 2%;}
.bn_prev a{width:100%; background-size:cover; margin:0; height:0; padding:16.3% 0 0;}

#menu{background: url(../img/mbg_sp.png) repeat-x center bottom;  background-size:contain;}
#menu ul {width:100%;}
#menu li {height:0;
width: -webkit-calc(100% / 3) ;
width: calc(100% / 3);
padding:20% 0 0;
border-top:1px solid #fff;
border-right:1px solid #fff;}
#menu li:nth-child(1),#menu li:nth-child(4) {border-left:1px solid #fff;}
#menu li:nth-child(4),#menu li:nth-child(5),#menu li:nth-child(6) {border-bottom:1px solid #fff;}
#menu li a{position:absolute; top:0; left:0;}
#menu li a p{font-size:4.3vw; margin:0 .3em 0 0;}

#newep h2,#update h2,#tbstopics h2,#twTL h3,#rect h3{font-size:9.5vw;}

.oainfo{font-size:3.4vw; line-height:140%; padding:0 2% 2.5%;}
.onsale231013{width:90%; margin:0 auto 5%;}

#next{margin:0 auto; padding:5% 0 10%;}
#next .inner{width:100%; padding:0; background-position: right top 70%; background-size:35%; background:none;}
#next #trailer,#spmov {width:96%; height:auto; margin:.2em auto 0; box-shadow:none;}
#next #trailer div,#spmov div {width:100%; position:relative; padding:56.25% 0 0; height:0; overflow: hidden;}
#trailer iframe,.emb iframe,#spmov iframe{ position:absolute; top: 0; left:0; width:100% !important; height: 100% !important;}
#next #trailer a,#next #trailer img{position:absolute; top: 0; left:0; width:100% !important; height: 100% !important;}
#spmov{width:96%; margin:1.5% auto 20%; box-shadow:none;}
#next #trailer{background-position:top 30% center !important; padding:54% 0 0; box-shadow:none;}
#next .play_btn{width:14.5%; height:26%;}
#next .play_txt {font-size:4.3vw;}


#newep{width:100%; margin:7% auto 6%; padding:0 0 0;}
#newep:before,#newep:after {
width:12%;
height:12%;
}
#newep:before {left: 2%;}
#newep:after {right: 2%;}
#newep figure#mainph{width:75%; margin:1em auto 0; display:block; height:0; padding:45% 0 0; position:relative;}
#newep #storyline{width:92%; margin:3.5% auto 0; display:block;}
#newep h2{top:1.5%; left:5%; z-index:1;}
#newep h3.epnm{font-size:5.2vw; padding:0;}
#newep .marker a,#storyline_sp label{font-size:4.3vw; width:48%; background-size:100%; padding:4% 0; margin:3.5% auto 0;}
#newep p.text {line-height:160%; font-size:90%; margin:0 auto; padding:.2em 0 0;}
#storyline_sp a{font-size:110%; margin:2% auto 0; width:45%; display:block; border:2px dotted; border-radius:50px; text-align:center; padding:3% 0;}
.tmer{position:absolute; left:-1%; bottom:-1%; bottom:20%; width:80%;}
#scr{margin:2% auto 2%;}
#scr h2{font-size:8vw; width:96%; padding:0;}

#tbstopics{padding:1em 0 1em; /*margin:10% auto 5%;*/ }
#tbstopics h2{margin:-1.1em auto 0; font-size:10vw;}
#topics {padding:0;}
#topics .tolist a{right:2%; top:-9%; font-size:90%;}

#update{padding:4% 0 4%; width:100%;}
#update h2{padding:0;}
#update ul#topicslist{height:auto;
height:460px; padding:2px 0 0 0;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
height:40vh;}
#update ul#topicslist li p{line-height:130% !important; font-size:90%;}
#update ul#topicslist li{width:88%; height:auto; margin:0 0 3%;}
#update ul#topicslist li a span.thum{width:35%; height:auto; margin:0 2% 0 0; position:relative; padding:23.3% 0 0;} 
#update ul#topicslist li span.ymd{font-size:100%;}

/*stream*/
#stream{margin:1em auto 0; padding:0 0 .5em;}
#stream .inner{width:100%;}
#stream h3{font-size:7vw; margin:0 auto 2%}
#stream_free{width:100%; margin:0 auto; padding:0 0 .6%; vertical-align:middle;
/*background-image:linear-gradient(rgba(16,42,101,0.46), rgba(16,42,101,0.4));
background-repeat:no-repeat;
background-size:100% 95%;
background-position:right bottom;*/}
#stream_free:before,#stream_free:after { 
  content:'';
  width:60%;
  height:0;
  position: absolute;
  display: inline-block;
}
#stream_free:before {
  width:28%;
  border-top: solid 2px #fff;
  top:7%;
  left:0;
}
#stream_free:after {
  border-bottom: solid 2px #fff;
  bottom:0;
  right:0;
}
#stream figure#ph_thumb{width:52%; margin:4% 0 0 0;}
#stream_free ul{width:43%;}
#stream_free ul li{height:auto; background-size:14%; margin:0 1% 4% 3.5%;}
#stream_free ul li a{height:0; padding:30% 0 0;}
#stream_free ul li span{width:85%; font-size:2.6vw; padding:2% 0;}
#stream_free ul li span .sitelogo{width:65%; height:auto; display:block;}
#stream_free ul li.tver span .sitelogo{width:35%;  height:auto;}
#stream_free ul li.tbsfree span .sitelogo{width:64%;  height:auto;}

#stream #paravi_os{width:88%; margin:1.2em auto 0;}
#stream #paravi_os p{padding:2% 0 0;}
#stream #paravi_os p span{font-size:3.9vw;}
#stream #paravi_os p img{width:25%; margin:0 2% 2% 0;}

.endtxt{font-size:3.3vw;}

@media all and (max-width: 320px) {
#stream figure#ph_thumb{width:50%; margin:5% 0 0;}
#stream_free ul{width:48%;}
#stream_free ul li span{font-size:60% !important;}
}

ul.bnr{width:100%; margin:2% auto 8%; align-items: center;}
ul.bnr li{width:88%; height:auto; margin:2% 0;}
ul.bnr li a{height:0; padding:23% 0 0;}
ul.bnr li.bn_gogo,ul.bnr li.bn_ytb,ul.bnr li.bn_sacas,ul.bnr li.bn_zexa_sp{height:auto; margin:2% 0;}
ul.bnr li.bn_gogo a,ul.bnr li.bn_ytb a{height:0; padding:56.25% 0 0;}
ul.bnr li.bn_sacas a,ul.bnr li.bn_zexa_sp a{height:0; padding:31.1827956989% 0 0;}
ul.bnr li.bn_zexa_pc{display:none;}
ul.bnr li.bn_spv a:before, ul.bnr li.bn_spv a:after { 
  width:7%;
  height:30%;
}

#snsarea{padding:3% 0 0;
background-size:100% 30%;}
.clip.triangle{width:80%;}
#snsarea .inner{width:100%;}
#twTL{margin:0 auto 3em; width:90%; height: calc(320px + 2%); padding:2% 0;}
#twTL .tw-inner{margin:0 auto; padding:5% 0 0;}
#twTL .tline{margin:0 auto; padding:5% 0 0;}
#twTL .tline{
height:280px;
/*overflow-y: scroll;*/
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;}
/*#twTL .tline iframe.twitter-timeline {
width :100% !important;
height: 280px !important;
}*/
#twTL .outgo{position:absolute; bottom:-4%;}

#rect {margin:0 auto 3em; z-index:10;}
#rect h3{margin:0; padding:0 0 3%;}
#snsarea #sns a{width:65px; height:65px; margin:0 2% 0;}

#top footer{text-align:center; height:auto; padding:0 0 5%;}
footer .share{display:block; padding:0;}
#top footer p.copy {width:100%; padding:2% 5%;}

footer.dir2 .inner{width:100%; height:auto; text-align:center; padding:5% 0 0;}
footer p.copy{text-align:center; padding:2% 5%; line-height:130%;}
footer.dir2 .share{position:static; padding:5% 0;}
#rect2{position:static; margin:0 auto;}
#gotop {bottom: 0; right:0; z-index:11;}
#gotop a {width:60px; height:60px;}

/*------------------　2nd　------------------ */
header#dir{padding:0; margin:0 auto ; background:url(../img/bgsmoke2.jpg) no-repeat center top; background-size:100%;}
header#dir #logo{width:100%; padding:5% 0;}
header#dir #logo a {width:75%; height:0; padding:18% 0 0; background-size:contain;}
h1#ttl{font-size:4.8vw;}
.slash{width:8%; height:auto;}
.wrap{position: relative; padding:7% 0 0;}
.wrap::before {
height:20%;
}

#contents{width:96%; margin:4% auto; padding:6% 0 2em; box-sizing: border-box; box-shadow:none;}
#contents .inner{width:98%;}
#contents .inner p {padding:.5em 0 1em; line-height:160%;}
#contents .inner p.f85,#contents .inner p.f80 {line-height:normal !important;}
.ph_cut {width:95%; height:0; padding:63% 0 0; position: relative; margin:1em auto;}
.ph_cut_l {width:60%; height:0; padding:90% 0 0; position: relative; margin:1em auto .5em;}
#bknm{width:100%; margin:2em auto 1em;}
.bdr{width:92%; padding:.4em 0;}

/*about*/
#highlight h2{font-size:4.4vw; padding:0 1% 0;}
#about #contents p,#story #contents p,#music #contents p {padding:1em 1em .5em;}
#highlight h3{font-size:3.6vw; padding:0; width:94%; margin:1em auto 0;}
#highlight .ph1{width:90%; height:0; padding:63.4921875% 0 0;}
#highlight .ph_sp{width:90%; height:0; padding:60% 0 0;}
#highlight .comment,#music .comment{width:94%; margin:.8em auto; padding:2.5%;}
#highlight h3.ttl_cmnt{font-size:6vw; margin:7% 0 1%; padding:0 0 0 9%;}
#highlight h3.ttl_cmnt:before{width:8%;}
#highlight .comment h3{font-size:4.5vw; border-left:3px solid #ca0915; padding:.2em 0 .2em .5em; margin:0 0 .4em;}
#highlight .comment p{padding:0 .5em !important; font-size:95%;}

#highlight h2 span.f150{font-size:126%;}
.tabs label.tab_label{font-size:5vw; display:block; font-weight:bold; text-align:center; width:45%; margin:0 1% 5%; padding:4% 0;}

.bdr3{width:92%;}
.bdr3:last-child{padding:0 !important;}

/*story*/
#story h2{font-size:5.5vw; width:80%;}
#story h2:before, #story h2:after {width:8%; height:50%;}
#story h2 span.num,#gallery h2 span.num{font-size:180%;}
#story ul#movlist {width:100%; padding:0; margin:1em auto 0;}
#story ul#movlist li{width:44.5%; margin:0 1.2% 1.5% .5%; font-size:3.3vw;}
#story ul#movlist li span.f90{font-size:2.3vw;}
#story ul#movlist li a{padding:5% 0;}
#story #trailer,#info .emb,#movie .emb {width:92%; position: relative; padding:51.75% 0 0; height: 0; overflow: hidden; height:auto; margin:0 auto .5em;}
#story #trailer iframe,#topics .emb iframe,#movie .emb iframe,#story #trailer img{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
#story #bknm{padding:0;}
#story #bknm h3{font-size:8vw; margin:5% 0 0;}
#story #bknm h3:before{
width:7%;
top: 50%;
}
#story #bknm ul,#gallery #bknm ul{margin:2.8% auto 0; width:95%;}
#story #bknm li,#gallery #bknm li{width:46.5%; height:auto; margin:0 1.4% 3% 1.8%;}
#story #bknm li a,#gallery #bknm li a{height:0; padding:60% 0 0;}
#story #bknm li a img,#gallery #bknm li a img{position:absolute;left:0;top:0; width:100%; height:100%;}
#story #gallery{margin:1em auto;}
#gallery ul#show{width:90%; }
#gallery ul#show li {/*margin:1.5%;
width:45%;
width: -webkit-calc(100% / 2 - 3%) ;
width: calc(100% / 2 - 3%);*/
width:100%;
}
#gallery ul#show li span a {width:100%; height:0; padding:66.5% 0 0;}

/*caststaff*/
#caststaff h1#ttl{font-size:4.5vw; letter-spacing:-.1em;}
#caststaff h1#ttl span.engttl{font-size:180%; padding:0;}
#caststaff .slash{width:6.5%; height:auto;}
#caststaff h1 span.casjp{letter-spacing:-.2em;}
#caststaff h1#ttl span.spv{padding:0 0 .2em;}
#caststaff h2{font-size:9vw; margin:0 auto 2%;}
#caststaff .castlist{width:95%; padding:180% 0 0 !important;}
#caststaff .castlist_sp{width:95%; padding:130% 0 0 !important;}
#caststaff h2.staff{margin:8% auto 2%;}
#caststaff h3,#caststaff #spvlist h2{margin:5% auto .5em; font-size:4.3vw; font-weight:bold;}
#caststaff #spvlist h2{margin:5% auto 1%;}
#caststaff #spvlist h2:first-of-type{margin:0 auto 1%;}
#caststaff table{width:100%; margin:0 auto 1em;}
#caststaff table td{padding:.3.5em 0; font-weight:bold;}
#caststaff table td.cname{font-size:4.5vw; width:46%;}
#caststaff table td.chara{font-size:4.5vw; width:46%;}
#caststaff table td.naka{padding:2% 0 0; font-size:3vw; vertical-align:middle;}
#caststaff .credit{width:95%; font-size:4.2vw; font-weight:bold; margin:0 auto 2%;}
#caststaff table td.cname span.f90{font-size:3vw;}
#caststaff [data-ruby]::before,
#caststaff [data-ruby-r]::before {
    top: -15%;
    font-size:.01em;
}

a.btn_ap {margin:.5em auto 1.5em; width:62%; font-size:1.5rem; font-size:4vw;}
a.btn_s{width:50%;}
a.btn_i {margin:.5em 0 .2em; padding:.5em 2em;}
a.btn_df,#highlight label.btn_cmnt,a.btn_df2{width:70%; margin:1.2em auto 1.5em; padding:5.5% 0; font-size:4.5vw; letter-spacing:.05em;}
a.btn_df2{width:70%; padding:4% 0; margin:1.5em auto 1em; font-size:4.3vw;}

#msg #contents h1.entry span.ttl img{top:-1.2%;}
#msg .postbtn{margin:12% auto 5%;}

/*share*/
#share{width:100%; margin:2% auto 5%;}
#share span{min-width:90px;}
#share ul li img{width:40px;}
}

@media all and (max-width: 320px) {
a.btn_ap {width:70%;}
}
.md-inner {box-shadow:none !important;}
.md-caption {color:#222 !important;}

.fadedown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadedown;
 -ms-animation-name: fadedown;
 animation-name: fadedown;
 visibility: visible !important;
}
@-webkit-keyframes fadedown {
 0% { opacity: 0; -webkit-transform: translateY(10px);}
 100% { opacity: 1; -webkit-transform: translateY(0);}
}
@keyframes fadedown {
 0% { opacity: 0; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px);}
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

figure.top-bnr {
	background: url(../img/bgsmoke.jpg) no-repeat center bottom;background-size:cover;
}
figure.top-bnr a, figure.top-bnr span, figure.top-bnr img {
	display:block;
}
figure.top-bnr span {
	position:relative;
	height:0;
	padding-top:13.75%;
	background-size:cover;
}
figure.top-bnr span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

@media all and (min-width: 768px) {
figure.top-bnr a {
	max-width:800px;
	padding:30px 0;
	margin:0 auto;
}
}
@media all and (max-width: 767px) {
figure.top-bnr {
	padding:10px;
}
}

.tbs-stream{text-align:center; padding:.5em 0 0;}
.tbs-stream ul {max-width:1100px; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
.tbs-stream nav ul li {
    width:300px;
	margin:0 0 0;
}
.tbs-stream nav ul li a {
	display:block;
	padding:20% 0 0;
	background-repeat: no-repeat;
	background-position:center center;
	background-size:contain;
	background-image: url(../img/top/u-next.svg);
}
.tbs-stream p {
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 400;
font-style: normal;
font-size:90%;
padding:0 !important;
}
@media all and (max-width: 767px) {
.tbs-stream{padding:.5% 0 1%;}
.tbs-stream nav ul li {width:52%;}
.tbs-stream p {font-size:1.1rem;}
}