@import url("https://use.typekit.net/lfn1tgt.css");
@import url("https://use.typekit.net/caz8wgv.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 {font-size:85% !important;}
.f80 {font-size:80% !important;}
.f75 {font-size:75% !important;}
.stred{color:#fb4033;}
.stye{color:#fffb80;}
.stgrn{color:#8ae9b7;}
.stblu{color:#8bd2f8;}
.stblu2{color:#add9fc;}
.stblu3{color:#87b0f3;}
.stpk{color:#f77c99;}
.stpk2{color:#ffb7c8;}
.stpu{color:#ccccff;}
.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,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;}

.zenmaru {
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;
}
.alphapipe {
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: normal;
}
.ahand {
font-family: adobe-handwriting-ernie, sans-serif;
font-weight: 400;
font-style: normal;
}

/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {background-color:#fce2de; color:#212121;}
#con-body {background-color:transparent;}
.inner{width:1000px; margin:0 auto;}

header{margin:0 auto;}
#top main{width:100%;}
#top h1{width:1080px; height:765px; position:relative; margin:0 auto;}
#top h1 .main1{background: url(../img/top/main.jpg?1) no-repeat left bottom; background-size:cover; width:100%; height:100%; margin:0 auto; position:absolute; bottom:0; left:0;
  animation: fadein 1.5s cubic-bezier(.4, 0, .2, 1) normal;}
#top h1 .main2{position:absolute; bottom:11%; left:0;right:0; margin:auto; width:88%; opacity: 0;
  animation: slide-in .5s ease-in .5s 1 forwards;}
#top h1 .main3{position:absolute; right:2%; bottom:1%; width:62%; opacity: 0;
  animation: slide-in .5s ease 1.5s 1 forwards;}

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

/*menu*/
#menu {margin:0 auto; background-color:rgba(255,255,255,1); position: relative; padding:.2em 0 0;}
header#dir #menu:before{background: url(../img/menu_btm.png) repeat-x center 0; background-size:contain;
  content: '';
  position: absolute;
  top:-1px;
  left:0; right:0; margin:auto;
  width:99%;
  height:3px;
  z-index:1;
}
#menu:after{background: url(../img/menu_btm.png) repeat-x 0 0; background-size:contain;
  content: '';
  position: absolute;
  bottom:-2px;
  left:0; right:0; margin:auto;
  width:99%;
  height:3px;
  z-index:1;
}
#menu ul {max-width:1080px; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#menu li {text-align:center; padding:0 1.5em; height:100px; vertical-align: middle; position: relative;}
#menu li:before { 
  content:'';
  width: 3px;
  height: 78%;
  position: absolute;
  display: inline-block;
  background: url(../img/line_v.svg) no-repeat center center;
  background-size:contain;
  top:8%;
  left: 0;
}
#menu li.menu1:before {
  background:none;
}
#menu li a {width:100%; height:100%; display: block; text-decoration:none; vertical-align: middle; color:#fca9bd;
z-index:5; box-sizing: border-box;
display: flex;  justify-content: center; align-items: center;
transition-duration: .5s;
}
#menu li:nth-child(2n) a{color:#8bd2f8;}
#menu li p{line-height:150%;}
#menu li span.eng{font-size:230%;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: normal;}
#menu li span.f75{font-size:75%;}
#menu li span.ttlruby{color:#000; display:inline-block; padding:.2em 0 0; font-size:90%;
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;}
#menu li.menu5 span.ttlruby{letter-spacing:-.15em;}

.bn_tdc{margin:.6em auto 2.5em;width:640px; height:100px; position: relative;}
.bn_tdc a{display:block; width:100%; height:100%; background:#fff url(../img/top/bn_tdc.png?1) no-repeat center center; background-size:contain; transition: 0.5s; box-shadow:6px 6px rgba(173,217,252,0.8);}
.bn_tdc a:hover{opacity:0.5;}

#top #container{margin:0 auto; position:relative; padding:1.5em 0 0;
background-image:url(../img/bdr1.svg),url(../img/bdr2.svg);
background-repeat:no-repeat,no-repeat;
background-position:calc(50% + 430px) 140px,calc(50% - 500px) 850px;
background-size:330px,300px;
}

#next h2,#update h2,#tbstopics h2,#stream h2{font-size:480%; line-height:100%; letter-spacing:0; padding:0; text-shadow: -3px -4px #add9fc; color:#f77c99;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: italic;}

#topsns{width:770px; margin:1.5em auto; text-align:left; padding:0 0 0 4.5em; position:relative;}
#topsns h2{position:relative; vertical-align:middle; display:inline-block; padding:1.2em 0 1.2em 1.5em; font-size:220%; text-align:left; 
background: url(../img/top/cir3.svg) no-repeat 0 center; background-size:auto 100%;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: italic;
}
#topsns h2 span{background: url(../img/top/wave.svg) repeat-x 0 bottom; background-size:auto; padding:0 0 .1em;}
#topsns #sns{text-align:center; margin:0 0 0 1em; display:inline-block; vertical-align:middle;}
#topsns #sns a{width:90px; height:90px; margin:0 5px 0; position: relative; display:inline-block; border-radius:50%; border:2px solid #000; transition:.3s; background-color:rgba(255,255,255,1); box-shadow:3px 3px rgba(173,217,252,0.8);}
#topsns #sns a:hover{opacity:0.5;}
#topsns #sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:50%;}
#topsns #sns a.sns_l img{width:55%;}
.hashtag{position:absolute; right:0; top:-10px; width:170px;}

.notice{text-align:center; font-weight: 500; font-size:110%; padding:0; line-height:140%;}

#next{padding:0 0; margin:4.5em auto;}
#next h2{position:absolute;left:5%;top:-45px;}
#next .inner{max-width:1080px; background-color:rgba(173,217,252,0.6); padding:1em 0 1em; border-radius:20px; z-index:0;}
#newep{width:864px; margin:3.5em auto 0; background-color:#fff; border:2px solid #000; position:relative;}
#newep:before{
  content: '';
  position: absolute;
  top:-25px;
  left:-25px;
  width:100%;
  height:100%;
  z-index:-1;
  background-color:#c5f1ff;
  border:2px solid #000;
}
#newep h3.oadate{width:100%; font-size:180%; padding:.3em .4em; text-align:right; font-size:200%; background: url(../img/top/arw.svg) no-repeat 2.5% center; background-size:80px;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: normal;
}
#newep .oadate{font-size:100%;}
#next #trailer {position: relative; width:100%; height:486px; background-size:cover; background-position: center center; background-repeat: no-repeat; margin:0 auto; overflow: hidden; z-index:111; transition:.5s; background-size:cover;}
#next #trailer iframe,#next #trailer a,#spmov iframe {width:100%; height:100%; display:block;}
#next .play_btn,#spmov .play_btn { width:75px; height: 75px; border-radius:50%; background: rgba(247,124,153,0.6); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block; z-index:111;}
#next .play_txt,#spmov .play_txt { color: rgba(255, 255, 255,0.8); font-size:200%; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%)  rotate(90deg);}

#storyline{position: relative; width:90%; padding:0 0 1em; margin:0 auto; background: url(../img/top/freeline.svg) no-repeat left 5% center; background-size:20%;}
#storyline p.text {padding:1em 0; line-height:160%; font-size:110%; word-break: break-all; width:80%; margin:0 0 0 auto;}
#storyline .marker a{display:block; transition: 0.5s; width:25%; margin:.3em auto; position: relative; border-radius:50px; line-height:100%;
    padding: .8em 1em 1em;
    border-radius: 50px;
    /*box-shadow:3px 4px #add9fc, 3px 4px 0 2px #212121;*/
    box-shadow:4px 5px #c5f1ff;
    border: 2px solid #212121;
    background-color: #fefefe;
    color: #212121;
    font-size:150%;
    font-weight: 600;
    text-align: center;
    }
#next .epnum{position:absolute; left:5%; top:10%; width:115px;}
.tr1{position:absolute; right:calc(45% - 500px); bottom:2%; width:140px;}

/*topics*/
#tbstopics{padding:0 0 1.5em; margin:0 auto; background-color:rgba(255,255,255,1);
background-image:url(../img/cir4.svg),url(../img/bg1.png);
background-repeat:no-repeat,repeat;
background-position:calc(50% - 500px) 2%,0 0;
background-size:200px,20px;
}
#tbstopics h2{padding:0 0 .5% 5%;}
#topics {position:relative; padding:1em 0 0; background: url(../img/top/cir1.svg) no-repeat right 10% top 5%; background-size:180px;}
#topics .tolist{text-align:right; position: absolute; top:15%; right:5%;}
#topics .tolist a{position:relative; display:block; z-index:2; font-weight:500;}
#topics .tolist a:before{
content: "";
width:50px;
height:1px;
background-color:#000;
position: absolute;
left: -65px;
top: 50%;
}
.cir2{position:absolute; right:calc(45% - 500px); bottom:-10%; width:120px;}

/*whatsnew*/
#whatsnew{margin:0 auto; position:relative; padding:1.5em 0 0;
background-image:url(../img/top/tr4.svg),url(../img/top/tr5.svg);
background-repeat:no-repeat,no-repeat;
background-position:calc(50% - 500px) 10%,calc(50% + 500px) 30%;
background-size:250px,150px;
}
#update {width:1010px; position:relative; margin:0 auto; padding:1.8em 0 1.5em;
background-image:url(../img/top/chara.svg),url(../img/top/arw3.svg);
background-repeat:no-repeat,no-repeat;
background-position:right 20% top 0,left 50% top 13%;
background-size:250px,80px;}
#update h2{margin:0 auto; z-index:1; padding:0 0 .5em; text-align:left;}
#update ul#topicslist{display: flex; flex-flow: row wrap; justify-content: center; align-items: center;
height:auto; height:300px; overflow-y:scroll; padding:.5em 1em 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.5); border-radius:20px;}

#update ul#topicslist li{width:47%; height:120px; position: relative; margin:0 0 2em .5em; background-color:rgba(255,255,255,1); border-radius:10px; overflow: hidden; z-index:1; border:2px solid #000; box-shadow:4px 4px rgba(173,217,252,0.8); border-radius:16px;}
#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/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:#000;}
#update ul#topicslist li a:hover{opacity: 0.5; transition: 0.4s;}
#update ul#topicslist li span.ymd{color:#f77c99; font-size:120%; display:inline-block; position:absolute; bottom:7%; right:3%; text-align:right; font-weight:500;}
/*#update ul#topicslist li:nth-last-child(2) 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 .thum_80{background-position: center center !important; background-size:80% !important; background-color:rgba(255,255,255,1);}
#update .logothum{background-position: center center !important; background-size:90% !important; background-color:#eff7fe;}
#update .thum_150{background-position: center center !important; background-size:150% !important; background-color:rgba(255,255,255,0.1);}

/*bnr*/
.bnarea{padding:2% 0 1%; background: url(../img/bg2.png) 0 0; background-size:20px;
/*background-image:linear-gradient(to top, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.35) 100%); 
background-repeat:no-repeat;
background-size:100% 85%;
background-position:right bottom;*/
position:relative;
}
ul.bnr,ul.streambnr{display: flex; flex-flow: row wrap; 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; box-shadow:4px 4px rgba(173,217,252,0.8); border-radius:16px;}
ul.bnr li a{display:block; width:100%; height:100%; background-repeat: no-repeat; background-position:center center; position: relative; background-size:cover;  border-radius:16px;}
ul.bnr li.bn_ar a {background-image:url(../img/top/bn_ar.jpg);}
ul.bnr li.bn_dvd a {background-image:url(../img/top/bn_dvd.jpg);}
ul.bnr li.bn_goods a {background-image:url(../img/top/bn_goods.jpg);}
ul.bnr li.bn_gallery a {background-image:url(../img/top/bn_gallery.jpg);}
ul.bnr li.bn_drama2023 a {background-image:url(../img/top/bn_drama2023.jpg);}
ul.bnr li.bn_linestamp a {background-image:url(../img/top/bn_linestamp.png);}
ul.bnr li.bn_linestamp2 a {background-image:url(../img/top/bn_linestamp2.png);}

ul.streambnr{margin:0 auto;}
ul.streambnr li{width:300px; height:120px; margin:1.5% 0; text-align:center; position: relative;
width: -webkit-calc(100% / 3 - 2%) ;
width: calc(100% / 3 - 2%);}

.endtxt{position: absolute; left:0;right:0; top:40%; z-index:2; opacity:1 !important; text-align:center; width:100%; font-size:110% !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; color:#000 !important; 
font-weight:600;}

/*sns*/
#snsarea{padding:2% 0 8%; margin:0 auto; position: relative; background: url(../img/bg3.png) 0 0; background-size:600px;}
#snsarea:before{
background-color:rgba(197,241,255,0.5); border-radius:20px 0 0 20px;
  content: '';
  position: absolute;
  top:10%;
  right:0;
  width:80%;
  height:80%;
}

#snsarea .inner{width:1000px; margin:0 auto; padding:6.5em 0 0; display: flex; flex-flow: row wrap; position: relative; justify-content: center; background: url(../img/top/sns.svg) no-repeat 5% 0; background-size:150px;}
#igTL h3,#twTL h3,#rect h3,#rect h4{font-size:200%; color:#000; line-height:100%;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: italic;}

#igTL,#twTL{width:345px; height:auto; margin:0 1.5em 0 0; position: relative; background-color:#fff; padding:0; border:2px solid #000; box-shadow:4px 4px rgba(173,217,252,0.8); border-radius:20px;}
#igTL div.insta,#twTL .tline{width:100%; margin:0 auto; overflow:hidden; padding:0;}
#igTL h3,#twTL h3{text-align:center; border-bottom:2px solid #000; padding:.2em 0 .4em;}
#twTL h3 span{font-size:2rem;
font-family: "zen-maru-gothic", sans-serif;
font-weight: 500;
font-style: normal;
}
#igTL .outgo,#twTL .outgo{position:absolute; bottom:-6%; left:1%; font-size:75%;}

#rect {width:255px; text-align:center; padding:2em 0 0; background: url(../img/top/tr2.svg) no-repeat center top; background-size:55%;}
#rect h3{margin:0; padding:0 0 4%;}
#rect h4{font-size:200% !important;}

#snsarea #sns{text-align:center; margin:0 auto 2em;}
#snsarea #sns a{width:85px; height:85px; position: relative; display:inline-block; border-radius:50%; border:2px solid #000; background-color:rgba(255,255,255,1); box-shadow:3px 3px rgba(173,217,252,0.8);}
#snsarea #sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:50%;}
#snsarea #sns a{width:70px; height:70px; margin:5% 1% 0;}
#snsarea #sns a img{width:50%;}
#snsarea #sns a img.sns_l{width:56%;}

#top #share{margin:0 auto; width:100%; padding:0 0 1em; }
#top #share h4{font-size:120%; padding:0 0 .4em; position: relative;}
/*#top #share h4:before{
content: "";
width:1px;
height:48%;
background-color:#172c66;
position: absolute;
left: 50%;
top:0;
z-index:1;
}*/

/*footer*/
footer {background-color:rgba(250,195,201,0.6); text-align:center; padding:2em 0;}
footer p.copy {text-align:center; padding:1em 0; font-size:80%; line-height:140%;
font-family: "zen-maru-gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
/*f2*/
footer.dir2{margin:5% 0 0;}
/*
margin:10% 0 0; padding:0 0 1em;
background-image:linear-gradient(to top, rgba(249,205,171,0.3) 0%,rgba(249,205,171,0.3) 100%); 
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center bottom;
*/
}
footer.dir2 .share{position:absolute; top:20%; left:0;}
#rect2 {width:300px; height: 250px; background:#fff; position:absolute; bottom:10%; right:0;}

.bn_ad{text-align:center; padding:0 0 1.5em;}

/*------------------　2nd　------------------ */
header#dir{padding:0; margin:0 auto 1em; position: relative; background-color:#eff7fe;}
header#dir #logo{margin:0 auto; padding:2em 0;
animation: fadein 1.5s ease 0s 1 normal;
-webkit-animation: fadein 2s ease 0s 1 normal;}
header#dir #logo a{max-width:840px; height:230px; display:block; background: url(../img/head.svg) no-repeat center center; margin:0 auto; background-size:contain;}
h1#ttl{font-size:550%; line-height:100%; letter-spacing:0; text-align:center; background: url(../img/tr3.svg) no-repeat center center; padding:.5em 0 .7em; background-size:auto 100%; margin:0 auto; text-shadow: -3px -4px #add9fc; color:#f77c99;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: italic;}

.wrap{position: relative; padding:.5em 0 0;
background-image:url(../img/cir4.svg),url(../img/bdr1.svg);
background-repeat:no-repeat,no-repeat;
background-position:calc(50% - 410px) 50px,calc(50% + 400px) 50px;
background-size:250px,400px;
}

#contents{max-width:980px; border:2px solid #000; background-color:rgba(255,255,255,1); padding:2em 0 2em; margin:0 auto 3em; position: relative; box-shadow:6px 6px rgba(173,217,252,0.8); border-radius:20px; background:#fff url(../img/bg.png) 0 0; background-size:20px;}
#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,190,205,0.5) 70%); padding:0 .2em .1em;}
.line2 {background: linear-gradient(transparent 80%, rgba(197,241,255,0.6) 80%); padding:0 .2em .1em;}
.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; 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:600; line-height:170%; font-size:180%; margin:0 0 1em; text-align:center;}
#highlight h3{font-weight:600; line-height:150%; font-size:140%; margin:1em 0 0;}
#highlight h3 span{border-bottom:1px solid #000;}
#highlight h3 + p{padding:.5em 0 !important;}
#highlight h4{font-weight:500; line-height:150%; font-size:140%; margin:.5em 0 .5em; text-align:center;}
#highlight .ph1{width:550px; height:751px;}
#highlight .ph1 span {width:100%; height:100%; background-image:url(../img/main.jpg); background-position: center bottom; position: absolute; z-index:auto; display:block;  background-size: cover;}
#highlight .ph1:before,
#comic .comiccover:before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  background-image: radial-gradient(#8bd2f8 12%, transparent 25%),radial-gradient(#8bd2f8 12%, transparent 25%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
  /*z-index:-1;*/
}
#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 {cursor :pointer;}
#highlight input {display: none;}
#highlight .comment {padding:.8em 1.2em; margin:1.5em 0; border:1px dashed #000; border-radius:1.5vw; background-color: rgba(255, 255, 255, 0.4);}
#highlight .comment h3{font-weight:600; line-height:140%; font-size:140%; margin:.2em 0 0;}
#highlight .comment h3 span{border:none;}
#highlight .comment h4{padding:0 0 0 2.5em; margin:1.5em 0 0; font-size:115%; font-weight:500; text-align:left; position: relative;}
#highlight .comment h4 + p{padding:0 !important;}
#highlight .comment h4:before{
content: "";
width:40px;
height:1px;
background-color:#000;
position: absolute;
left:0;
top:50%;
}
#highlight .comment p,#music .comment p{padding:.5em;}
.emphasis {
	text-emphasis: filled dot black;
	-webkit-text-emphasis: filled dot black;
}

/*caststaff*/
#caststaff h1#ttl span.spv{font-size:160%; padding:0 0 .2em; display:inline-block;}
#caststaff h2{color:#000; margin:0 auto .5em; text-align:center; letter-spacing:.05em; font-size:360%; position:relative; display:inline-block; position: relative; padding: 0 70px;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: normal;
font-style: italic;
}
#caststaff h2.staff{margin:1.5em auto .5em;}
#caststaff h2:before, #caststaff h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color:#000;
}
#caststaff h2:before {
  left:0;
}
#caststaff h2:after {
  right: 0;
}
#caststaff h3{width:75%; margin:1.5em auto .6em; font-size:105%; font-weight:500; background-color:rgba(197,241,255,0.4); position: relative; line-height:170%;
/*border-bottom:1px solid #000; border-right:1px solid #000;*/
outline: 2px solid #fff;
box-shadow: 3px 3px #000;}
#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:80% !important;}
#caststaff .credit span.f80_2{font-size:85%; line-height:130%; display:block;}
#caststaff .credit span.f80_3{font-size:80%; line-height:130%; display:block;}
#caststaff #spvlist.credit p{line-height:120%;}
#caststaff table{width:80%; margin:0 auto; font-size:160%;}
#caststaff table td{text-align:center; padding:2.5% 0; line-height:1; font-weight:500;}
#caststaff table td.cname{text-align:left;width:46.5%; vertical-align:middle;}
#caststaff table td.chara{text-align:right;width:46.5%; vertical-align:middle; color:#f77c99; line-height:100%;}
#caststaff table td.naka{padding:0 0 0; font-size:80%; vertical-align:middle; line-height:0; color:#000; font-weight:400;}
#caststaff table td.maru{font-size:90%; color:#000; padding:2% 0; font-weight:400;}
#caststaff table td.blank{padding:.5% 0;}
#caststaff ruby[data-ruby] {
  position:relative;
}
#caststaff ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-2em;
  top:-1em;
  right:-2em;
  text-align:center;
  font-size:.5em;
}

/*btn*/
a.btn_df,#highlight label {width:40%; display:block; text-align:center; font-weight:600; font-size:140%; transition: 0.5s; position: relative; padding:1.4em 0; margin:1.5em auto; background: none;}
a.btn_df span,#highlight label span{position: relative;  z-index:2;}
a.btn_df:before,
#highlight label:before {border:2px solid #000; border-radius:50px;
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
}
a.btn_df:after,#highlight label:after{
background-color:rgba(197,241,255,0.5); border-radius:50px;
  content: '';
  position: absolute;
  top:8px;
  left:8px;
  width:100%;
  height:100%;
  z-index: -1:
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(0deg);
}

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{position: relative;}
#share span:before{
content: "";
width:35%;
height:1px;
background-color:#172c66;
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: 768px) {
.nobr{display: none;	}
#top header{background-color:#fff;
background-image:linear-gradient(#fff,#fff),url(../img/bg1.png); 
background-repeat:no-repeat,repeat;
background-size:100% 150px,20px;
background-position:left bottom,0 0;
}
.myharu{position:absolute; left:-40px; top:-80px; width:60px;}
#update ul#topicslist{justify-content: start; align-items: start;}
#update ul#topicslist li:nth-child(2n){margin:0 0 2em 2.5em;}
ul.bnr li:nth-child(2n){margin:0 2.5em 1.5em 1.5em;}
/*#update ul#topicslist li:last-child{margin:0 0 2em 2.5em;}
ul.bnr li.bn_ar{margin:0 4em 1.5em 1em;}*/
#topics{width:1080px; margin:0 auto;}
}

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

#top h1{width:100%; height:auto; padding:70.8333333333% 0 0;}
#top h1 .main1{width:100%; height:0; padding:70.8333333333% 0 0; background-size:cover; background-position: right 30% bottom;}
#top h1 .main2{width:90%; bottom:11%;  z-index:11;}
#top h1 .main3{width:65%; bottom:.5%; z-index:11;}

#menu{padding:0;}
header#dir #menu:before,#menu:after{height:2px;}
#menu ul {width:100%;}
#menu li {height:0;
width: -webkit-calc(100% / 3) ;
width: calc(100% / 3);
padding:18% 0 0;
}
/*#menu li:before { 
  width: 2px;
  background-size:2px auto;
}*/
#menu li.menu1:after,
#menu li.menu2:after,
#menu li.menu3:after { 
  content:'';
  width:86%;
  height: 3px;
  position: absolute;
  display: inline-block;
  background: url(../img/line_h.svg) no-repeat right center;
  background-size:auto 2px;
  bottom:0;
  left: 0;
  right: 0;
  margin:auto;
  border-radius: 2vw 0 0 2vw;
}
#menu li.menu4:before {
  background:none;
}
#menu li p{line-height:140%;}
#menu li a{position:absolute; top:0; left:0; background-size:68%;}
#menu li span.eng{font-size:5.7vw;}
#menu li span.ttlruby{font-size:3.6vw; padding:0 0 0;}
#menu li.menu5 span.ttlruby{letter-spacing:-.2em;}

.bn_tdc{margin:0 auto 5%; width:95%; height:0; padding:15% 0 0;}
.bn_tdc a{box-shadow:4px 4px rgba(173,217,252,0.8);}

#top #container{margin:0 auto; position:relative; padding:4% 0 0;
background-image:url(../img/bdr1.svg),url(../img/bdr2.svg);
background-repeat:no-repeat,no-repeat;
background-position:right -15% top 4.5%,left -50% top 600px;
background-size:55%,55%;
}

#topsns{width:100%; margin:0 auto 8%; margin:0 auto 4%; padding:0;}
#topsns h2{font-size:7vw; padding:4% 0 3% 10%; margin:0 0 0 10%;}
#topsns #sns{text-align:center; margin:0 auto; display:block; width:80%; vertical-align:middle; padding:0;}
#topsns #sns a{width:18vw; height:18vw; margin:0 1% 0;}
.hashtag{position:absolute; right:5%; top:0; width:33%;}

.notice{font-size:3.9vw; padding:0 .4em; line-height:130%;}

#next h2,#newep h2,#update h2,#tbstopics h2,#stream h2,#igTL h3,#twTL h3,#rect h3{font-size:12vw;}

#next{margin:10% auto 0; padding:0 0 5%;}
#next h2{top:-4.5%;}
#next .inner{width:100%; padding:2% 0 2%; border-radius:4vw; margin:0 auto;}
#newep{width:96%; margin:7% 0 0 auto;}
#newep:before{
  top:-4%;
  left:-3%;
}
#newep h3.oadate{font-size:5vw; background-size:15%;}
#next #trailer {height:auto;}
#next #trailer{position:relative; padding:54% 0 0; height:0; overflow: hidden !important; z-index:11; margin:0 auto;}
#next #trailer{background-position:top 30% center !important; padding:54% 0 0;}
#trailer iframe,.emb iframe{ position:absolute; top: 0; left:0; width:100% !important; height: 100% !important;}
#next .play_btn,#spmov .play_btn{width:14%; height:25%;}
#next .play_txt,#spmov .play_txt {font-size:4.3vw;}
#storyline{width:95%; margin:0 auto; background-position:left 5% top 20%; background-size:30%;}
#storyline p.text {width:80%; line-height:150%; font-size:3.7vw; padding:3% 0 0;}
#storyline .marker a {width:52%; font-size:4.8vw; padding:4% 0; margin:4% auto 0; box-shadow:3px 4px #c5f1ff;}
#next .epnum{position:absolute; left:-.5%; top:6%; width:18.5%;}
.tr1{right:0; bottom:2%; width:20%;}
.myharu{position:absolute; right:0; bottom:-5%; width:8%; z-index:-1;}

/*topics*/
#tbstopics{padding:0 0 6%;
background-position:left -2% top 3%,0 0;
background-size:30%,20px;
}
#tbstopics h2{padding:2% 0 2.5% 3.5%;}
#topics {padding:0;
background-position:right 2% top 5%;
background-size:30%;
}
#topics .tolist{text-align:right; position: absolute; top:8%; right:2%; }
#topics .tolist a:before{
width:40%;
height:1px;
left: -50%;
top: 50%;
}
.cir2{position:absolute; right:0; bottom:-10%; width:20%; z-index:-1;}

#whatsnew{margin:0 auto; padding:2% 0 0;
background-position:left -5% top 5%,right -15% bottom 0;
background-size:35%,30%;
}
#whatsnew h2{padding:5% 0 3% 3.5%; font-size:11vw;}
#update{padding:0; width:100%;
background-position:right 1% top 0,left 50% top 13%;
background-size:32%,0;
}
#update ul#topicslist{/*height:auto;*/
overflow-y:scroll;
height:460px; padding:0;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
height:43vh;}
#update ul#topicslist li p{line-height:130% !important; font-size:4vw;}
#update ul#topicslist li{width:88%; height:auto; margin:0 0 4%; border-radius:3.5vw;}
#update ul#topicslist li a span.thum{width:35%; height:auto; margin:0 2% 0 0; position:relative; padding:25% 0 0;} 
#update ul#topicslist li span.ymd{font-size:3.8vw;}

.bnarea{padding:5% 0 5%; 
}
ul.bnr{width:100%; align-items: center;}
ul.bnr li{width:80%; height:auto; margin:2% auto;}
ul.bnr li.bn_stmp,ul.bnr li.bn_porg{width:86%; height:auto; margin:0 auto 5%;}
ul.bnr li a{height:0; padding:30% 0 0;}
ul.bnr li.bn_stmp a,ul.bnr li.bn_porg a{height:0; padding:39.1304347826% 0 0;}
ul.bnr li.bn_comic img{right:8%; top:-3%;}

ul.streambnr{width:65%; align-items: center;}
ul.streambnr li{width:100%; height:auto; margin:5% 0 0;}
ul.streambnr li.tbsfree{margin:5% 0 0;}
ul.streambnr li a{height:0; padding:32% 0 0;}
ul.streambnr li a span.stream{line-height:140%; font-size:3vw; padding:2% 0;}
ul.streambnr li.paravi a{ background-size:52%; background-position:center 23%;}
ul.streambnr li.tbsfree a{background-size:52%; background-position:center 30%;}
ul.streambnr li.tver a{background-size:26%; background-position:center 26%;}
.endtxt{font-size:4vw !important;}

#snsarea{background-size:100%; padding:4% 0 0;}
#snsarea:before{
  top:5%;
  height:80%;
  width:90%;
}
#snsarea .inner{width:100%; margin:0 auto; background-size:33%; padding:21vw 0 0;}
#igTL,#twTL{margin:0 auto 10%; width:90%; height: calc(320px + 2%); padding:1% 0 2%;}
#igTL h3,#twTL h3{padding:0; line-height:100%; font-size:10vw;}
#igTL{height:auto; margin:0 auto 15%;}
#igTL .tline,#twTL .tline{margin:0 auto;}
#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;
}*/
#igTL .outgo,#twTL .outgo{position:absolute; left:2%; bottom:-4%;}
#twTL .outgo{left:2%; bottom:-5%;}

#rect {margin:0 auto 5%; z-index:10; padding:6% 0 0; background-size:45%;}
#rect h3{margin:0; padding:0 0 3%; font-size:9vw;}
#rect h4{font-size:9vw !important;}

#snsarea #sns{margin:3% auto 0;}
#snsarea #sns a{width:65px; height:65px; margin:2% 1.5% 0;}

@media all and (max-width: 320px) {
#next #sns{width:80%; background-size:100%;}
#next #sns a{width:65px; height:65px; margin:0 1% 0;}
}

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

/*------------------　2nd　------------------ */
header#dir{padding:4% 0 0; margin:0 auto;}
header#dir #logo{width:86%; height:auto; padding:22% 0 0; position: relative; margin:0 auto 4%;}
header#dir #logo a {width:100%; height:100%; background-size:cover; position: absolute; left:0; top:0;}

h1#ttl{font-size:14vw; padding:6% 0 8%;}
.wrap{position: relative; padding:1% 0 0;
background-position:0 20px,right -30px top 40px;
background-size:30%,45%;
}

#contents{width:96%; margin:0 auto 5%; padding:4% 0; background-size:4vw; box-sizing: border-box; box-shadow:4px 4px rgba(173,217,252,0.8); }
#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.8vw; padding:0 .5% 0; line-height:160%;}
.sp_adjust{font-size:5vw;}
#about #contents p,#story #contents p,#music #contents p {padding:1em 1em .5em;}
#highlight h3{font-size:4.5vw; padding:0 1em; margin:1em auto 0;}
#highlight h3 + p{padding:.5em 1em .5em !important;}
#highlight h4{font-size:4.5vw;}
#highlight .ph1{width:90%; height:0; padding:122.94% 0 0;}
#highlight .ph1 span,#comic .comiccover span{position: absolute; top:0; left:0;}
#highlight .ph1:before,#comic .comiccover:before {
  bottom: -12px;
  right: -14px;
}
#highlight .comment h3{padding:0; margin:0;}
#highlight .comment,#comic .comment{width:94%; margin:.8em auto 1em; padding:2.5%; border-radius:4vw;}
#highlight .comment p{padding:0 .6em !important; font-size:95%;}
#highlight .comment h4{padding:0 0 2% 0; line-height:140%; margin:5% 0 0;}
#highlight .comment h4:before{
background:none;}

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

/*caststaff*/
#caststaff h2{font-size:9vw; margin:0 auto 2%;}
#caststaff h2.staff{margin:8% auto 2%;}
#caststaff h3{margin:5% auto .5em; font-size:4.3vw;}
#caststaff #spvlist h2{margin:5% auto 1%;}
#caststaff #spvlist h2:first-of-type{margin:0 auto 1%;}
#caststaff table{width:100%; margin:0 auto;}
#caststaff table td{padding:2.5% 0;}
#caststaff table td.cname{font-size:4.8vw; width:47%; }
#caststaff table td.chara{font-size:4.8vw; width:45%;}
#caststaff table td.naka{font-size:3.5vw; vertical-align:middle;}
#caststaff .credit{width:95%; font-size:4.2vw; margin:0 auto 2%;}
#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:0;}
#caststaff table td.cname span.f80{font-size:3vw !important;}
#caststaff .credit span.f80_2{font-size:90%;}
#caststaff ruby[data-ruby]::before {
  left:-2em;
  top:-1em;
  right:-2em;
  font-size:1rem;
}

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

a.btn_df:before,
#highlight label:before{
border-radius:10vw;
}
a.btn_df:after,#highlight label:after{
border-radius:10vw;
  top:6px;
  left:6px;
}

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

/*share*/
#share{width:100%; margin:2% auto 5%;}
#top #share{margin:8% auto 0;}
#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);}
}

/*	instagram
============================== */
#igTL div.insta{padding:1.5% 1.5% 1.5%;}
div.insta ul{margin:0 auto 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
div.insta ul li {
margin:1.25%;
width: -webkit-calc(100% / 3 - 3%) ;
width: calc(100% / 3 - 3%);
}
div.insta ul li span, div.insta ul li a, div.insta ul li a img {
	display:block;
}
div.insta ul li a, div.insta ul li a img {
	background-position:center center;
	background-repeat:no-repeat;
}
div.insta ul li a {
	background-size:cover;
	position:relative;
	height:0;
	padding-top:100%;
}
div.insta ul li a:hover img {
	background-color:rgba(244,195,171,0.4);
}
div.insta ul li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:0;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:.5s;
}
div.insta ul li a img.icon-video {
	background-image:url(../img/top/play.svg);
	background-size:35%;
}
@media all and (max-width: 767px) {
div.insta ul{margin:1.5% auto 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;}

#stream{background-color:rgba(255,255,255,0.5); padding:0 0 1.5%; margin:3em auto 1em; position:relative;}
#stream:before{
  content: '';
  position: absolute;
  bottom:-8px;
  right:calc(50% - 500px);
  width:260px;
  height:20px;
background: url(../img/top/wave2.svg) no-repeat right bottom;
background-size:contain;
}
#stream h2{position:absolute;left:5%;top:-35px;}

div#tshd{padding:1em 0 1em; background-color:#def0fe; border-radius: 0 0 20px 20px; width:1080px; margin:0 auto;}
div#tshd span.tbs-stream-txt{
font-family: "zen-maru-gothic", sans-serif;
font-weight: 500;
font-style: normal;
}

div#tsft{padding:3% 0 0; margin:0 auto; position:relative;
	max-width:1080px; 
}
.tbs-stream-footer nav ul li {
	margin:0 0 0 !important;
}
.tbs-stream-footer nav ul li a {
	display:block;
	padding:35% 0 0;
	background-repeat: no-repeat;
	background-position:center center;
}
.tbs-stream-footer p {
line-height:120%;
font-size:85%;
padding:0 !important;
margin:0 !important;
font-family: "zen-maru-gothic", sans-serif;
font-weight: 400;
font-style: normal;
}

/*//////smp//////*/
@media all and (max-width: 767px) {
div#tshd{padding:2.5% 0; width:100%; border-radius:0;}
#stream:before{
  bottom:-5px;
  right:0;
  width:40%;
  height:60%;
}
#stream h2{top:-6vw;}
div#tsft{padding:4% 0 0;} 
}