@import url("https://use.typekit.net/krt4qcv.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:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", 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,0);}
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; }
.f200 { font-size:200%;}
.f180 { font-size:180%;}
.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 {font-size:85% !important;}
.f80 {font-size:80% !important;}
.f75 {font-size:75% !important;}
.f70 {font-size:70% !important;}
.stred{color:#de3f42;}
.stblu{color:#0061a8;}

.ffsp{font-feature-settings: "palt";}
/*link*/
a { text-decoration:none; color:#000;}
a:hover { text-decoration:none; color:#000;}
#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,a.btn_df2,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;
}
header #logo a:hover,a.btn_i:hover,a.btn_df:hover,a.btn_df2:hover,.bn_prev a:hover,#gotop a:hover,ul.bnr li a:hover,.btnitem:hover,#snsarea #sns a:hover{text-decoration:none;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;}
/*#menu li.menu7:hover{filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}*/
.no-link{ pointer-events: none; cursor: default; text-decoration:none; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}

.zenmaru {
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;
}
.mambo {
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
}
.montserrat {
font-family: "montserrat", sans-serif;
font-weight: 600;
font-style: normal;
}

/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {background-color:#fff; color:#231815; width:100%;
background: url(../img/bg.png); background-size:500px;}
#con-body {background-color:transparent;}
.inner:not(.slider-unit div.outer ul,.slider-pics div.outer ul){max-width:1200px; margin:0 auto;}

header{margin:0 auto;}
#top main{width: min(98%, 1000px); margin:0 auto;}
#top h1{width:100%; aspect-ratio: 400 / 283; position:relative; margin:.5em auto .25em;}
#top h1 .main1{background: url(../img/top/main.jpg) no-repeat left bottom; background-size:cover; width:100%; height:100%; margin:0 auto; position:absolute; bottom:0; left:0; border-radius:30px;
  animation: fadein 1.5s cubic-bezier(.4, 0, .2, 1) normal;}
#top h1 .main2{position:absolute; top:32%; right:3%; width:29.5%; opacity: 0; 
  animation: fadein .8s ease-in .5s 1 forwards;}
#top h1 .main3{position:absolute; left:10%; /*right:0; margin:auto;*/ top:6%; width:8.9%; opacity: 0;
  animation: fadein 1.25s ease 1s 1 forwards;}
#top h1 .main4{position:absolute; left:0; right:0; margin:auto; bottom:2%; width:26%; opacity: 0;
  animation: fadein 1.25s ease 1.5s 1 forwards;}
#top h1 .main1 img{position:absolute;left:0;top:0; width:100%; height:100%;}

@keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.topbnr{padding:1em 0; border-bottom:1px solid #000;}
.bn_recruit{margin:1.5em auto; width:700px; position: relative; aspect-ratio: 128 / 25; border:2px dashed #de3f42; border-radius:20px;}
.bn_recruit a{display:block; width:100%; height:100%; background: url(../img/top/bn_sp.png?6) repeat center center; background-size:cover; transition: 0.5s; border-radius:20px; box-shadow:4px 4px #de3f42;}
.bn_recruit a:hover{opacity:0.5;}

#top_container{width:100%; margin:0 auto; position:relative; padding:0;}

/*menu*/
#menu {margin:0 auto; position: relative;}
#menu ul {max-width:980px; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#menu li {text-align:center; vertical-align: middle; position: relative; margin:0 1.5px; height:90px;  color:#fdf5ba;
width: calc(100% / 8 - 4px);}
#menu li a {width:100%; height:100%; display: block; text-decoration:none; vertical-align: middle; position: relative;
z-index:5; box-sizing: border-box;
display: flex;  justify-content: center; align-items: center;
transition-duration: .5s;
}
#menu li p{line-height:100%;}
#menu li span.sub{color:#fdf5ba; font-size:130%;
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;
display:block;
}
#menu li span.f75{font-size:75%;}
#menu li span.ttlruby{color:#de3f42; display:inline-block; padding:.1em .5em; font-size:80%;
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
margin:.8em 0 0;
background-color:#fdf5ba;
border-radius:100vh;
line-height:100% !important;
}
#menu li.menu5 span.sub{letter-spacing:.2em; margin:0 0 0 .25em !important;}
#menu li.menu4 span.sub,#menu li.menu6 span.sub{letter-spacing:-.15em;}
#menu li.menu4 p span.sub{margin:0 0 0 -.25em !important;}
#menu li.menu6 span.sub{line-height:90%;}
#menu li.menu6 span.ttlruby{margin:.5em 0 0; letter-spacing:-.08em; padding:.1em .3em .1em .1em;}

@media all and (min-width: 768px) {
#menu li:nth-child(odd){background-color:#de3f42; border-radius:30px 30px 30px 0;}
#menu li:nth-child(even){background-color:#0061a8; border-radius:30px 0 30px 30px;}
#menu li:nth-child(even) span.ttlruby{color:#0061a8;}
}

@media all and (max-width: 901px) { 
#top main{width:100%; margin:0 auto;}
#top h1{margin:0 auto;}
#top h1 .main1{border-radius:0 0 4vw 4vw;}
#menu{padding:1% 0 0; background-size:cover;}
#menu ul {width:98%;}
#menu li {height:0; margin:0 .2% .5%;
width: calc(100% / 4 - .5%);
padding:11% 0 0;
}
#menu li a{position:absolute; top:0; left:0; padding:0;}
#menu li.menu2,#menu li.menu4,#menu li.menu5,#menu li.menu7{background-color:#0061a8; border-radius:3vw 0 3vw 3vw;}
#menu li.menu1,#menu li.menu3,#menu li.menu6,#menu li.menu8{background-color:#de3f42; border-radius:3vw 3vw 3vw 0;}
#menu li.menu2 span.ttlruby,#menu li.menu4 span.ttlruby,#menu li.menu5 span.ttlruby,#menu li.menu7 span.ttlruby{color:#0061a8;}
#menu li.menu1 span.ttlruby,#menu li.menu3 span.ttlruby#menu li.menu6 span.ttlruby,#menu li.menu8 span.ttlruby,{color:#de3f42;}
}

/*sns*/
#toplink{text-align:center; padding:1em 0 2em;}
#toplink p{font-weight: 500; font-size:110%;}
#toplink ul{display: flex; flex-flow: row wrap; justify-content: center; align-items: center; position:relative; z-index:1; margin:1em auto;}
#toplink ul li{width: min(47%, 280px); margin:0 .5em; background-color:#fff; border:1px dashed #231815; border-radius:20px; position: relative;
aspect-ratio: 7 / 2;
}
#toplink ul li a{display:block; width:100% !important; height:100%; background-repeat: no-repeat; background-position:center center; position: relative; background-size:cover;}
#toplink ul li a img{position:absolute;left:0;top:0; width:100%; height:100%;}
#toplink ul li.bn_free a {background-image:url(../img/stream/tbsfree.svg); background-size:60%;}
#toplink ul li.bn_tver a {background-image:url(../img/stream/tver.svg); background-size:30%;}

#snslink{width:60%; margin:2em auto 0; text-align:center; padding:0; position:relative;}
#snslink p{vertical-align:middle; display:inline-block; padding:0; font-size:200%; text-align:left; color:#de3f42; 
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
}
#snslink p span{display:block; font-size:1.25rem !important; padding:.6em 0 0 ;}
#snslink #sns{text-align:center; margin:0 0 0 1em; display:inline-block; vertical-align:middle;}
#snslink #sns a{width:60px; height:60px; margin:0 1px 0; position: relative; display:inline-block; border-radius:50%; transition:.3s; background-color:#de3f42;}
#snslink #sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:41.5%;}

.notice{background-color:rgba(255,255,255,0.6);}
.notice p{text-align:center; color:#003586; font-weight: 500; font-size:120%; padding:1.8em .5em 1.8em; line-height:140%; text-shadow: 0px 0px 5px rgba(255,255,255,1), 0 0 1px rgba(255,255,255,1);}

#next{padding:.5em 0 2.5em; margin:2em auto 1em;
background-image:url(../img/bdr.png),url(../img/top/nextstory.svg),linear-gradient(to top, #fdf5ba, #fdf5ba);
background-repeat:repeat-x,no-repeat,no-repeat;
background-size:auto 5px,45px,100%;
background-position:left bottom,calc(50% + 470px) 60%,center top 15vw;
}
#next:before{
content: "";
background: url(../img/top/halfc.svg) no-repeat center top;
width:100%;
height:15vw;
position: absolute;
left:0;
top:0;
z-index:0;
background-size:cover;
}
#next:after{
content: "";
background: url(../img/clock.png) no-repeat 0 0;
width:75px;
aspect-ratio: 119 / 160;
position: absolute;
right:15%;
bottom:-2%;
z-index:0;
background-size:contain;
}
#next h2,#topics h2,#whatsnew h2,#stream h2{font-size:360%; color:#de3f42;
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
}
#next h2{padding:.25em 0 0 .8em; position:relative;}
#next h2:before{
content: "";
background: url(../img/lightning.png) no-repeat left 0 top 0;
width:45px;
aspect-ratio: 452 / 991;
position: absolute;
left:0;
top:0;
z-index:1;
background-size:100%;}
#next .inner{max-width:920px; margin:0 auto; padding:0;}
#next .oadate{position:absolute; right:4.1%; top:2%; width:28%; z-index:1;}

#newep{width:100%; margin:0 auto; padding:1.5em 0 0; position:relative;}
#next .nextmov,.slider-wrap{width:100%; margin:0 auto;}
div.mov-inner {
	position:relative;
	height:0;
	padding-top:51.75%;
	background-color:#fff;
	width:92%;
	margin:0 auto;
	z-index:11;
	border-radius:20px; overflow: hidden;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#storyline{position: relative; width:92%; padding:0; margin:1.5em auto 0;}
#storyline h3.epnum{position:absolute; left:1.25%; top:0; width:14%;}
#storyline p.text {position: relative; font-size:100%; word-break: break-all; color:#000; font-weight:500; line-height:160%; width:80%; margin:0 0 0 auto; padding:.5em 0 1em;}
#storyline h3.epnum img,#next .oadate img{width:100%;}

#storyline .marker{width:280px; margin:0 auto;}
#storyline .marker a,a.btn_df,a.btn_df2,#highlight label{position: relative; font-size:160%; display: block; width:100%; text-align:center; color:#fdf5ba; font-weight: 600;
padding:.8em 0;
z-index:11;
border-radius:100vh;
background-color:#de3f42;
background: url(../img/bg3.png) repeat 0 0; background-size:50%;
outline: 1.5px dashed #fdf5ba;
outline-offset: -6px;
}
a.btn_df2{background-image: url(../img/bg2.png);}
a.btn_df,a.btn_df2,#highlight label{padding:0 0;}
.balloon{position:absolute; left:calc(50% - 360px); bottom:-9%; width:55px;}

@media all and (max-width: 991px) {
#next .inner{width:96%;}
}

/*tbsfree*/
#mov_tbsfree{width:100%; margin:0 auto; padding:2em 0;
border-bottom:1px solid #000;
}

/*topics*/
#tbstopics{padding:0 0 2.5em; margin:1.5em auto 0; position:relative;}
#tbstopics:before{
content: "";
background: url(../img/bg2.png);
border-radius:0 50px 0 0;
position: absolute;
left:0;
top:0;
width:95%;
height:100%;
background-size:200px;
z-index:0;
}
#tbstopics h2{position: absolute; left:5%; top:-.5em; width:90%; font-size:380%;
background:url(../img/car.png) no-repeat right 5% bottom 4px; background-size:110px;}
#topics {position:relative; padding:1.8em 0 0;
background: url(../img/clover.png) no-repeat left 5% bottom 0; background-size:50px;
}
#topics a.tolist{width:25%; display:block; z-index:2; font-weight:700; color:#fdf5ba; background-color:#de3f42; margin:1em auto 0; text-align:center; padding:1em 0; border-radius:100vh; font-size:110%;}

@media all and (min-width: 768px) {
#topics{max-width:980px; margin:0 auto;}
}

/*whatsnew*/
#whatsnew{margin:0 auto; position:relative; padding:1.5em 0 1.8em;}
#whatsnew:before{
content: "";
background: url(../img/bg3.png);
border-radius:0 0 0 50px;
position: absolute;
right:0;
top:0;
width:95%;
height:100%;
background-size:200px;
z-index:0;
}
#whatsnew:after{
content: "";
background: url(../img/top/stitch.svg) repeat-x left top;
position: absolute;
right:0;
top:-2px;
width:95.1%;
height:12px;
background-size:auto 12px;
z-index:1;
}
#whatsnew h2{position:relative; padding:.4em 0 .2em; color:#fdf5ba; text-align:center; width: min(92%, 600px); margin:0 auto;}
#whatsnew h2:before{
content: "";
background: url(../img/trumpet.png) no-repeat left center;
width:80px;
aspect-ratio: 233 / 133;
position: absolute;
left:0;
bottom:15%;
z-index:1;
background-size:contain;}
#whatsnew h2:after{
content: "";
background: url(../img/rice.png) no-repeat right top;
width:70px;
aspect-ratio: 361 / 281;
position: absolute;
right:2%;
bottom:15%;
z-index:1;
background-size:contain;
}

#update {max-width:920px; position:relative; margin:0 auto; z-index:11;}
#update ul#topicslist{
height:auto; height:350px; overflow-y:scroll; padding:2px .5em 2px 0;
margin:.5em auto 0;
height:}
@media all and (min-width: 768px) {
#update ul#topicslist{display: flex; flex-flow: row wrap; align-items: center;}
}

#update ul::-webkit-scrollbar {width:1px;}
#update ul::-webkit-scrollbar-track {background:none;}
#update ul::-webkit-scrollbar-corner {display: none;}
#update ul::-webkit-scrollbar-thumb {background:#fdf5ba; border-radius:20px;}

#update ul#topicslist li{width:48%; position: relative; margin:0 0 .8em .8em; z-index:1; border-radius:20px; border:1.5px dashed #fdf5ba;}
#update ul#topicslist li span.thum{width:43%; height:0; padding:28% 0 0; display:block; background-size: cover; background-repeat: no-repeat; background-position: center top; background-color:#fdf5ba; border-radius:20px; }
#update ul#topicslist li p{line-height:140%; padding:0; font-weight:500; font-size:100%; display:block; width:53%; padding:0 3% 0 0;}
#update ul#topicslist li a{display:block; width:100%; color:#fdf5ba;
display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
#update ul#topicslist li span.ymd{color:#fdf5ba; font-size:90%; display:inline-block; position:absolute; bottom:0; right:0; text-align:right; line-height:100%; padding:.2em .4em;
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
background-color:#de3f42;
border-radius:8px 0 0 0;
}
#update .ytbthum{background-position: center center !important; background-size:contain !important;}
#update .thum_90{background-position: center center !important; background-size:90% !important;}
#update .thum_80{background-position: center center !important; background-size:80% !important;}
@media all and (max-width: 991px) {
#update {width:96%;}
#update ul#topicslist{height:300px;}
#update ul#topicslist li p{line-height:150%; font-size:90%;}
}

/*bnr*/
.bnarea{padding:2em 0 1em;  margin:0 auto; position:relative; border-bottom:1px solid #000;}
ul.bnr,ul.streambnr{display: flex; flex-flow: row wrap; max-width:1000px; margin:0 auto; justify-content: center; position:relative; z-index:1;}
ul.bnr li{width:450px; height:135px;  margin:0 1em 1.5em 1em;}
ul.bnr li a{display:block; width:100%; height:100%; background-repeat: no-repeat; background-position:center center; position: relative; background-size:cover; border:1px solid #000; border-radius:10px;}
ul.bnr li.bn_goods a {background-image:url(../img/top/bn_goods.jpg);}
ul.bnr li.bn_newsdig a {background-image:url(../img/top/bn_newsdig.png);}
ul.bnr li.bn_dvd a {background-image:url(../img/top/bn_dvd.jpg);}

/*post*/
#snspost{margin:0 auto; text-align:center; padding:0; position:relative; padding:2.5em 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#snspost p:first-of-type{font-size:160% !important; text-align:center; font-weight:600 !important; line-height:120% !important;}
#snspost p span.outgo{display:block; font-size:1.25rem !important; padding:0 !important;}
#snspost #sns{text-align:center; margin:0 0 0 1em;}
#snspost #sns a{width:80px; height:80px; margin:0 2px 0; position: relative; display:inline-block; border-radius:50%; transition:.3s; background-color:#de3f42;}
#snspost #sns a:hover{opacity:0.5;}
#snspost #sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:40%;}
#snspost p.htag{font-size:160% !important; display:inline-block; padding:1em 0 .5em; line-height:100% !important; font-weight:500 !important; width:100%;}
#snspost p.htag span{color:#fdf5ba; background-color:#de3f42; padding:0 !important; display:inline-block; letter-spacing:.05em;}
#snspost a.postbtn{width:300px; color:#de3f42; padding:.7em 0; font-size:140%; margin:.5em auto 0; display:block; border-radius:50px; transition:.3s; font-weight:500; border:2px dashed #de3f42; transition:.3s;}
#snspost a.postbtn:hover{color:#fdf5ba; background-color:#de3f42;}

/*footer*/
footer {text-align:center; padding:2em 0 0;
/*background-image:linear-gradient(to top, rgba(165,194,224,0.4) 0%,rgba(138,176,213,0.6) 30%,rgba(15,52,122,0.3) 100%);*/
}
footer p.copy {text-align:center; padding:2.5em 0; font-size:80%; line-height:140%;}
footer p.copy a{color:#000;}
/*f2*/
footer.dir2{margin:0;}

/*------------------　2nd　------------------ */
header#dir{padding:0 0 1.25em; margin:0 auto; position: relative; background:none; background: url(../img/bdr.png) repeat-x left bottom; background-size:auto 5px;}
header#dir #logo{margin:0 auto; padding:2em 0; position: relative;
animation: fadein 1.5s ease 0s 1 normal;
-webkit-animation: fadein 2s ease 0s 1 normal;}
header#dir #logo a{max-width:720px; display:block; margin:0 auto;  
background: url(../img/logo.png) no-repeat center center; background-size:contain;
aspect-ratio: 4 / 1;
}
.wrap{position: relative; padding:2.5em 0 0;
background-image:url(../img/circle1.png),url(../img/circle2.png);
background-repeat:no-repeat,no-repeat;
background-size:120px,120px;
}
@media all and (min-width: 768px) {
.wrap{background-position:calc(50% - 275px) 50px,calc(50% + 275px) 50px;}
}

h1#ttl{font-size:400%; font-weight:600; text-align:center; letter-spacing:0; color:#de3f42; position: relative; margin:0 auto;
padding:0 0 .8em;
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
background-image:url(../img/stitch2.svg),url(../img/freeline.svg);
background-repeat:no-repeat,no-repeat;
background-size:300px,380px;
background-position:calc(50% + 190px) 55px,center center;
}
h1#ttl span{font-size:2.8rem; display:block; padding:.3em 0 0;}
#contents{max-width:980px; background:#fcf8d8; padding:3em 0 2em; margin:0 auto 3em; position: relative; border-radius:30px; border:2px dashed #de3f42; box-shadow:6px 6px #de3f42;}

#special #contents{padding:0 !important;}
#contents .inner{width:90%;}
#contents .inner p {font-size:105%; padding:1em 0 .5em; line-height:1.7; font-weight:400;}

.ph_cut {width:700px; height:467px; margin:1.5em auto; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;}
.ph_cut_l {width:400px; height:600px; margin:1.5em auto; background-size: cover; background-repeat: no-repeat; background-position: center top; position: relative;}
.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 70%, rgba(255,242,77,0.5) 70%); padding:0 .2em .1em;}
.line2 {background: linear-gradient(transparent 75%, rgba(222,63,66,0.45) 75%); padding:0 .2em 0;}
.bdr{padding:.8em 1.5em; margin:1.5em auto; font-size:95%; background-color:rgba(255,251,244,0.8);}

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

a.btn_df,a.btn_df2,#highlight label{font-size:180%; width:45%; margin:1.25em auto; padding:1.2em 0;}

@media all and (max-width: 991px) { 
header#dir{padding:0 0 1.5vw;}
header#dir #logo{padding:3vw 0 2vw; width:85%;}
header#dir #logo a {width:100%;}
#contents{width:96%; margin:0 auto 5%; padding:5% 0; box-sizing: border-box; border-radius:4vw;}
.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;}
}

/*about*/
#about h1#ttl:not(span) {letter-spacing:-.1em !important;}
#about h1#ttl span {letter-spacing:0 !important;}
#highlight h2{font-weight:600; line-height:180%; font-size:190%; padding:0 0 .5em; text-align:center;
white-space:nowrap;
overflow:hidden;
opacity: 0;
animation:fadein .8s ease-in forwards;
}

#highlight h2 span{
font-size:130%;
color: #de3f42;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: #0061a8;
text-decoration-thickness: 3px;
text-underline-offset: 8px;
}
#highlight h3{font-weight:600; line-height:180%; font-size:180%; margin:1em 0 .25em; color:#0061a8; text-align:center;}
#highlight h3:first-of-type span{
background:linear-gradient(transparent 97%, #0061a8 0%); display: inline; padding:0 0 .2em;
background: url(../img/stitch4.png) repeat-x left bottom; background-size:auto 2.5px;
}
#highlight h3:nth-of-type(2){color:#0061a8; margin:.5em 0 1em;}

#highlight h3 + p{padding:.5em 0 !important;}
#highlight h4{font-weight:500; line-height:160%; font-size:130%; padding:1em 0 .5em; text-align:center;}
#highlight p strong.dash{
font-size:120%;
color: #ff8a00;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: #ff8a00;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
#highlight .ph1{width: min(94%, 820px); position: relative; margin:1.5em auto 1em; aspect-ratio: 100 / 67;
border-radius:20px; overflow: hidden;
}
#highlight .ph1 span {width:100%; height:100%; background:url(../img/about.jpg) no-repeat 0 0; position: absolute; top:0; left:0; display:block;  background-size: cover;}
#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:0 0;
    height: auto;
    opacity: 1;
}
#highlight label {cursor :pointer;}
#highlight input {display: none;}
#highlight .comment {padding:.8em 1.5em; margin:.5em auto 1em; position: relative; border:1px solid #de3f42; border-radius:20px;}
#highlight .comment h3{font-weight:700; line-height:140%; font-size:140%; margin:.2em 0 0; color:#de3f42; border-bottom:1px dashed #de3f42; padding:0 0 .25em;}
#highlight .comment h4{padding:0 0 0 2.5em; margin:.8em 0 .2em; font-size:115%; font-weight:500; text-align:left; position: relative; color:#ff8f9f;}
#highlight .comment h4 + p{padding:0 0 .5em !important;}
#highlight .comment h4:before{
content: "";
width:40px;
height:1px;
background-color:#ff8f9f;
position: absolute;
left:0;
top:50%;
}
#highlight .comment p{padding:.5em; font-size:100%;}
.emphasis {
	text-emphasis: filled dot black;
	-webkit-text-emphasis: filled dot black;
}

/*caststaff*/
#caststaff h1#ttl:not(span) {letter-spacing:-.2em !important;}
#caststaff h1#ttl span {letter-spacing:0 !important;}
#caststaff .slash{z-index:1; display:inline; vertical-align: middle; padding:0 0 0 .2em !important; font-size:4rem !important;}
#caststaff h2{color:#de3f42; font-size:300%; letter-spacing:.25rem; display:inline-block; position: relative; margin:0 auto .8em;
font-family: "ads-mambo", sans-serif;
font-weight: 400;
font-style: normal;
border-top:2px dashed #de3f42;
border-bottom:2px dashed #de3f42;
padding:.1em .5em;
line-height:120%;
}
.interpunct{background:none !important; font-size:70% !important; padding:0 !important; letter-spacing:-1rem;}
#caststaff h2.staff{margin:1em auto .5em; color:#0061a8; border-top:2px dashed #0061a8; border-bottom:2px dashed #0061a8;}
#caststaff #spvlist h2{margin:2em auto 0; letter-spacing:0;}
#caststaff #spvlist h2:first-of-type{margin:0 auto;}
#caststaff h3{width:45%; margin:1.3em auto .4em; font-size:105%; font-weight:600; position: relative; line-height:170%;
color:#fdf5ba; background: url(../img/bg2.png) repeat 0 0; background-size:50%;}
#caststaff .credit{text-align:center; width:90%; margin:0 auto 2em; font-size:140%; line-height:160%; font-weight:500;}
#caststaff table{width:98%; margin:0 auto 1em; font-size:160%;}
#caststaff table td{text-align:center; padding:2% 0; line-height:1; font-weight:500;}
#caststaff table td.cname{text-align:left;width:48%; vertical-align:middle;}
#caststaff table td.chara{text-align:right;width:48%; vertical-align:middle; color:#000; line-height:100%;}
#caststaff table td.naka{padding:0; font-size:80%; vertical-align:middle; line-height:0; color:#B6B2B1; font-weight:400;}
#caststaff table td.maru{font-size:80%; color:#B6B2B1; padding:1.5% 0 2.5%; font-weight:400;}
#caststaff table span.f75{font-size:1.6rem !important;}
#caststaff ruby[data-ruby] {
  position:relative;
}
#caststaff ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-2em;
  top:-1.3em;
  right:-2em;
  text-align:center;
  font-size:.45em;
}
#caststaff .credit span.f80{font-size:1.5rem !important;}
#caststaff .credit span.f80_3{font-size:1.5rem; line-height:100%; display:block; line-height:130% !important; margin:0 0 .25em;}


/*share*/
#share{width:50%; text-align:center; margin:2% auto 4%; vertical-align:middle;}
#top #share{margin:5% auto;}
#share span{position: relative; color:#000; font-weight:600;}
#share span:before{
content: "";
width:35%;
height:1px;
background-color:#000;
position: absolute;
left:-45%;
top:50%;
z-index:1;
}
#share ul{display: inline-block; margin:0 0 0 .5em; vertical-align:middle;}
#share ul li{display:inline-block; border-radius:50%; margin:0 .4em 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: 992px) {
.nobr{display: none;	} 
}
@media all and (max-width: 991px) {
.pcbr{display: none;	} 
}

/*//////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;}
.ph_cut img,.ph_cut_l img,#spot #trailer img,#update ul#topicslist li span.thum img,#newep figure#mainph span img,header#dir #logo a img,.bn_recruit a,.bn_tdc a{position:absolute;left:0;top:0; width:100%; height:100%;}

html, body, div#con-body {background-size:100%;}

.bn_recruit{margin:4vw auto 7vw;width:90%; border:1.5px dashed #de3f42; border-radius:3vw;}
.bn_recruit a{border-radius:3vw;}

/*menu*/
#menu li {padding:17% 0 0; margin:0 .4% .8%;
width: calc(100% / 4 - .8%);
}
#menu li span.sub{font-size:4.3vw;}
#menu li span.ttlruby{font-size:2.5vw; margin:2.5vw 0 0;}
#menu li.menu2,#menu li.menu4,#menu li.menu5,#menu li.menu7{border-radius:5vw 0 5vw 5vw;}
#menu li.menu1,#menu li.menu3,#menu li.menu6,#menu li.menu8{border-radius:5vw 5vw 5vw 0;}

/*sns*/
#toplink{width:97%; padding:2.5% 0 3%; margin:0 auto; text-align:center;}
#toplink p{font-size:4vw;}
#toplink ul{margin:3% auto;}
#toplink ul li{margin:0 .8%; border-radius:3vw;}

#snslink{width:95%; margin:6% auto 0;}
#snslink p{font-size:7vw;}
#snslink p span{display:block; font-size:2.4vw !important; padding:4% 0 0; letter-spacing:0 !important;}
#snslink #sns{margin:0 0 0 2vw; width:56%; text-align:left;}
#snslink #sns a{width:13.5vw; height:13.5vw; margin:0 .5% 0;}
.slash{display:none;}

.notice p{font-size:3vw; padding:3.5% 1%; line-height:160%;}

#topics h2,#whatsnew h2,#stream h2 {font-size:9vw;}

/*next*/
#next{padding:0 0 4%; margin:5% auto;
background-size:auto 4px,45px,100%;
background-position:left bottom,calc(50% + 470px) 60%,center top 15vw;
}
#next:after{width:12.5%; right:5%;}
#next h2{padding:0 0 0 9.5%; line-height:120%; font-size:9.5vw;}
#next h2:before{left:2%; width:6%;}
#next .inner{width:98%;}
#next .oadate{right:2%; top:1%; width:39%;}

#newep{padding:2.5% 0 0;}
div.mov-inner {border-radius:3vw;}
#storyline{width:96%; padding:0; margin:3% auto 2.5%;}
#storyline h3.epnum{left:0; width:19%; background-position:center center;}
#storyline p.text{font-size:3.5vw; width:77%; line-height:145%; padding:1% 3% 0 0;}
#storyline .marker{width:52%; margin:3.5% auto 0;}
#storyline .marker a,a.btn_df,a.btn_df2,#highlight label{
font-size:5vw;
padding:3.8vw 0;
outline: 1px dashed #fdf5ba;
outline-offset: -4px;
}
.balloon{left:2%; bottom:-8%; width:9vw;}

/*tbsfree*/
#mov_tbsfree{padding:2.5% 0;}

/*topics*/
#tbstopics{padding:0 0 4%; margin:8% auto 0;}
#tbstopics:before{border-radius:0 8vw 0 0; background-size:50%;}
#topics h2 {width:92%; font-size:11.5vw; background-size:22%; left:2.5%; top:-7.5%; background-position: right 5% bottom 15%; line-height:100%;}
#topics a.tolist{width:45%; font-size:4vw; padding:3% 0;}
#topics{padding:8vw 0 2%; background-size:10%;}

/*whatsnew*/
#whatsnew{padding:4% 0 5%;}
#whatsnew:before{border-radius:0 0 0 8vw; background-size:50%;}
#whatsnew:after{
height:10px;
background-size:auto 10px;
}
#whatsnew h2{padding:1vw 0;}
#whatsnew h2:before{width:13.5%; bottom:20%;}
#whatsnew h2:after{width:12%; bottom:20%;}
#update {width:90%;}
#update ul#topicslist{height:auto; margin:0 0 0 auto; width:96%; align-items: start;
overflow-y:scroll;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
padding:2px 2.5% 0 0;
height:50vh;
}
#update ul#topicslist li{width:96%; margin:0 1% 2.5% auto; border-radius:3vw; border:1px dashed #fdf5ba;}
#update ul#topicslist li p{line-height:130% !important; font-size:3.5vw; font-weight:600;}
#update ul#topicslist li span.thum{ border-radius:3vw;}
#update ul#topicslist li span.ymd{font-size:3vw;}

.bnarea{padding:3% 0 6%;}
ul.bnr{width:100%; align-items: center;}
ul.bnr li{width:83%; height:auto; margin:2.5% auto 0;}
ul.bnr li a{height:0; padding:30% 0 0; border-radius:2vw;}

/*post*/
#snspost{padding:6% 0;}
#snspost p:first-of-type{font-size:5.2vw !important; width:40%; padding:2vw 0 0 !important;}
#snspost p span.outgo{font-size:2vw !important;}
#snspost #sns{margin:0; width:55%; text-align:left;}
#snspost #sns a{width:14vw; height:14vw; margin:0 .5% 0;}
#snspost p.htag{font-size:5vw !important; line-height:130% !important; padding:4vw 0 4vw !important;}
#snspost a.postbtn{width:55%; font-size:4vw; margin:.5vw auto 0;}

footer p.copy {width:100%; padding:5%;}
footer{padding:5% 0 0;}

#gotop {bottom: 0; right:0; z-index:11;}
#gotop a {width:60px; height:60px;}

/*------------------　2nd　------------------ */
header#dir {padding:0 0 2vw; background-size:auto 4px;}
header#dir #logo{width:93%;}
.wrap{padding:5% 0;
background-size:14vw,14vw;
background-position:left 1.5vw top 7.5vw,right 1.5vw top 7.5vw;}

h1#ttl{font-size:12vw; padding:2% 0 7%;
background-size:41%,60%;
background-position:right -4% bottom 15%,center center;
}
h1#ttl span{font-size:4.5vw;}

#contents{border-radius:6vw; border:1.5px dashed #de3f42;}
#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;}
.bdr{width:92%; padding:.4em 0; }

/*about*/
#highlight h2{font-size:4.5vw; padding:2.5% 1.5% 5%; line-height:160%;}
#highlight h2 span{font-size:120%;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
#about #contents p,#story #contents p {padding:1em 4% .5em;}
#highlight h3{font-size:4vw; padding:0 1.5%; margin:2.5% auto 1.5%; line-height:170%;}
#highlight h3:nth-of-type(2){font-size:4.5vw; line-height:140% !important; margin:3% 0 4%;}
#highlight h3 + p{padding:.5em 4% .5em !important;}
#highlight h4{font-size:4vw; padding:2% 1% 0;}
#highlight.inner p{line-height:170% !important;}
#highlight p strong.dash{
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
#highlight .ph1{margin:0 auto; border-radius:3vw;}
#highlight .comment h3{font-size:4.8vw; padding:0 0 2%; margin:0 0 2%;}
#highlight .comment{width:94%; margin:0 auto 3%; padding:2% 4% 4%; background-size:50%;}
#highlight .comment p{padding:1% 0 0 !important;}

/*caststaff*/
#caststaff h1#ttl:not(span) {letter-spacing:-.3em !important; font-size:11.5vw; }
#caststaff h1#ttl span {letter-spacing:0 !important;}
#caststaff .slash{font-size:6vw !important; margin:0 !important; padding:0 0 0 2.5vw !important;}
#caststaff h2{margin:1% auto 5%; font-size:8vw; border-width:1.5px !important;}
#caststaff h3{width:60%; margin:5% auto 1.5%;}
#caststaff h3:first-of-type{margin:2.5% auto 1.5%;}
#caststaff table{width:100%; margin:0 auto;}
#caststaff table td{padding:2.5% 0;}
#caststaff table td.cname{font-size:5vw; width:48%;}
#caststaff table td.chara{font-size:5vw; width:46%;}
#caststaff table td.naka{font-size:3.5vw; vertical-align:middle;}
#caststaff .credit{font-size:4.3vw; margin:0 auto 2%; width:98%;}
#caststaff table td.cname span.f90{font-size:3vw;}
#caststaff table td.maru{font-size:75%; padding:2% 0 !important; line-height:100% !important;}
#caststaff table td.blank{padding:2% 0;}

#caststaff .credit span.orgttl{line-height:130% !important; display:inline-block;}
#caststaff .credit span.subttl{font-size:3.8vw; line-height:100% !important; margin:0 0 .25em;}
#caststaff .credit span.f80,#caststaff .credit span.f80_3,#caststaff table span.f75{font-size:3vw !important;}
#caststaff ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  top:-1.1em;
  font-size:.48em;
}

a.btn_df,a.btn_df2,#highlight label{width:70%; margin:5% auto; padding:5vw 0; font-size:5vw; letter-spacing:.05em;
outline: 1px dashed #fdf5ba;
outline-offset: -4px;}

/*share*/
#share{width:100%; margin:2% auto 4%;}
#top #share{margin:6% auto 5%;}
#share span:before{
content: "";
width:40%;
left: -50%;
}
#share ul li{margin:0 .2em 0;}
#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);}
}
.nocontxt { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none; text-align:center;}
.nocontxt img { pointer-events: none;}