/*/////////////////////////////////////////////////////////////////////////
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;}
h1,h2,h3,h4,h5,p {background-color:rgba(255,255,255,.01);}
img,iframe { border:none;}
ol,ul { list-style:none; list-style-type: none;}
.alt{ position:absolute; top:-5000px; left:-9999px;}
.relative { position: relative;}
.hid{visibility: hidden;}
/*画像保護用*/
.cover {width:100%; height:100%;}
/*float*/
.floatL { float:left;}
.floatR { float:right;}
.clearfloat { height:1px; font-size:1%; clear:both; display:block; background: transparent;}
.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.clearfix { min-height:1px;}
* html .clearfix {height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
/*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:#e60012;}
.stye{color:#fef900;}
.storg{color:#fa7f12;}
.stgrn{color:#14ca91;}
.stblu{color:#03a8fe;}
.stpk{color:#fd52ba;}
/*link*/
a { text-decoration:none; color:#100c0e;}
a:hover { text-decoration:none; color:#100c0e;}
#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,#cts 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,#cts 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;}

.fftg { font-style: nomal;
  font-family: fot-tsukuardgothic-std, sans-serif;
  -ms-text-size-adjust: 100%;
  font-kerning: normal;
  font-feature-settings: "palt";
  text-align: justify;
  text-justify: inter-ideograph;}

/* animation*/
html, body, div#con-body {background-color:transparent;}
#animation_container {width:100%; height:100%;position:absolute;left: 0px; top: 0px;z-index:-1;}
#canvas {width:100%; height:100%;position: fixed;z-index:-1; background-color:#fadfea; background-image: radial-gradient(#fff,#fadfea,rgba(229,99,152,0.6));}
#dom_overlay_container {pointer-events:none; overflow:hidden; width:1280px; height:720px; position: absolute; left: 0px; top: 0px; display: none;}

/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {color:#100c0e;}

#top main{width:980px; height:840px; margin:0 auto 2em; position:relative;}
#top h1 .main1{background: url(../img/top/logo.png) no-repeat 0 0; position:absolute; top:0; right:0; width:469px; height:206px; 
animation: fadein 1s ease 0s 1 normal;
-webkit-animation: fadein 1s ease 0s 1 normal;}

#top h1 .main2{background: url(../img/top/ph_main.png) no-repeat 0 0; width:845px; height:829px; position:absolute; bottom:0; left:10px; 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/catchphrase.png) no-repeat 0 0; position:absolute; top:40px; left:72px; width:83px; height:266px; opacity: 0;
-webkit-animation: fadein 2s ease 1.5s 1 forwards;
  animation: fadein 2s ease 1.5s 1 forwards;}
@keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #top main{display:block;}
  /* IE11 */
}

header{margin:0 0 6em;
background-image:url(../img/wave.png);
background-repeat:repeat-x;
background-position:left 0px bottom 20px;
background-size:auto;}
#top header{margin:0 0 10em;}

#top main #countdown {position:absolute; bottom:0; left:0;  padding:1.5em 0 0;
width:100%; box-shadow:0 0 0 5px rgba(255,255,255,0.7),20px 20px 50px rgba(201,95,136,0.6); border: 2px dashed rgba(232,105,156,0.5); background-color:rgba(255,255,255,0.7); border-radius:20px; text-align:center; vertical-align: bottom;}
#top main #countdown .epnm{width:136px; height:75px; position:absolute; top:-35px; left:0; background: url(../img/top/ep.png) no-repeat 0 0; background-size:100%; display:block; color:#fff; text-align:center; font-weight:bold; font-size:190%; line-height:60px;
text-shadow:1px 1px 0 #fd52ba, -1px -1px 0 #fd52ba,
              -1px 1px 0 #fd52ba, 1px -1px 0 #fd52ba,
              0px 2px 0 #fd52ba,  0 -2px 0 #fd52ba,
              -1px 0 0 #fd52ba, 1px 0 0 #fd52ba;}
#top main #countdown .epnm span{transform: rotate(-4deg); display:inline-block;}
#top main #countdown .byoa{position:absolute; top:0; left:49%; width:250px;}
.cdarea{display: flex; justify-content: center; padding:0 0 .8em; align-items:flex-end;}
#top main #countdown .oadate{background: url(../img/top/oa1006.png) no-repeat center bottom; background-size:90%; width:45%; margin:0 0 0 3%; height:90px;} 
.timer{width:50%; text-align:center; line-height:180%;}
.timertext{color:#ff59b3; font-weight:bold; font-size:210%;}
.timertext span.number{font-size:210%; font-family: 'Avenir Next Condensed','Gill Sans','Arial','Franklin Gothic Medium'; letter-spacing:-.03em;}
.timer span.nowoa{text-align:center; color:#ff59b3; font-weight:bold; font-size:410%; font-family: 'Avenir Next Condensed','Gill Sans','Arial','Franklin Gothic Medium'; letter-spacing:.01em; display:inline-block; width:100%; vertical-align:bottom; line-height:70%;}
#top main #countdown .onsale{background: url(../img/top/dvdsale.png) no-repeat center top; background-size:84%;margin:0 0 .3em; height:90px;} 

/*menu*/
#menu {margin:0 auto;}
#menu ul {width:1050px; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#menu li {text-align:center; margin:0 5px 0; width:112px; height:108px; text-shadow:1px 2px #ea3ca6;
background-color:rgba(253,82,186,0.85);
border-radius: 50% 40% 50% 50%/50% 50% 50% 50%;
box-shadow:4px 4px 0 0 rgba(229,57,162,0.4),10px 10px 10px rgba(232,105,156,0.5);
background-image:url(../img/bubble.png);
transition: all .3s;
}
#menu li:nth-child(even){margin:20px 10px 0;}
#menu li:hover{transform: translateY(-6px);}
#menu li a {width:100%; height:100%; display: block; text-decoration:none; transition:0.5s; color:#fff; display: flex; justify-content: center; align-items: center;
font-size:120%; font-weight:bold;}
#menu li a span.eng{font-size:80%; display:inline-block; margin:.5em 0 0;}
#menu li.menu2{background-color:rgba(3,168,254,0.85);
box-shadow:4px 4px 0 0 rgba(0,151,230,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu2 a{text-shadow:1px 2px #0385c8;}
#menu li.menu3{background-color:rgba(20,202,145,0.85);
box-shadow:4px 4px 0 0 rgba(7,186,130,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu3 a{text-shadow:1px 2px #2aae6d;}
#menu li.menu4{background-color:rgba(238,204,0,0.85);
box-shadow:4px 4px 0 0 rgba(238,204,0,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu4 a{text-shadow:1px 2px #c9ac00;}
#menu li.menu5{background-color:rgba(153,67,225,0.85);
box-shadow:4px 4px 0 0 rgba(134,32,220,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu5 a{text-shadow:1px 2px #872bba;}
#menu li.menu6{background-color:rgba(73,212,31,0.85);
box-shadow:4px 4px 0 0 rgba(51,159,0,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu6 a{text-shadow:1px 2px #4faf1c;}
#menu li.menu7{background-color:rgba(250,127,18,0.85);
box-shadow:4px 4px 0 0 rgba(212,100,0,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu7 a{text-shadow:1px 2px #dd6b16;}
#menu li.menu8{background-color:rgba(63,99,235,0.85);
box-shadow:4px 4px 0 0 rgba(63,99,235,0.4),10px 10px 10px rgba(232,105,156,0.5);}
#menu li.menu8 a{text-shadow:1px 2px #4350d1;}
#menu li.menu8 span{line-height:130%;}

#next .inner{width:980px; position: relative; margin:0 auto;}
#next h2{text-align:center; position: absolute; top:-5.5em; left:0; right:0; margin:0 auto 0; z-index:1;}
#spot{width:730px; margin:0 auto; padding:15px; background-color:rgba(255,255,255,0.5); box-shadow:30px 30px 50px rgba(201,95,136,0.5);}
#spot #trailer {width:700px; height:394px; background: url(../img/top/spotend.jpg) no-repeat 0 0; background-size:cover;}
#spot #trailer iframe {width:100%; height:394px;}

#newep{width:100%; margin:0 auto 5em; position:relative;}
.saru1{position:absolute; bottom:-30px; left:0; width:150px; z-index:1;}
#newep h2{position: absolute; top:-25px; left:5px; width:110px; z-index:1;}
#newep h2 img{max-width:100%; height:auto;}
#newep .storyline{width:87%; margin:2em 0 0 auto; padding:1em; background-color:rgba(255,255,255,0.5); border-radius:15px; box-shadow:8px 8px 0 rgba(253,82,186,0.2),20px 20px 40px rgba(201,95,136,0.4); position:relative;}
#newep .storyline p.text {padding:1.4em 1em 1em; line-height:1.4; font-size:110%;}
#newep .epnm{width:70px; height:70px; position:absolute; top:-12%; left:-1%; background: url(../img/top/heart.png) no-repeat 0 0; background-size:100%; display:block; color:#fff; text-align:center; font-weight:bold; font-size:190%; line-height:60px;}
#newep .oadate{position:absolute; top:-5%; left:8%; font-weight:bold; font-size:180%; background-color:rgba(23,163,242,0.8); color:#fff; padding:.1em .5em; transform: rotate(-2deg); display:inline-block;}
#newep .marker a {position:absolute; bottom:-20px; right:-20px; width:200px; height:55px; display:block; background: url(../img/top/marker.png) no-repeat 0 0; text-align:center; font-weight:bold; font-size:150%; color:#fff; line-height:55px; transition: 0.5s;
text-shadow:1px 1px 0 #fd52ba, -1px -1px 0 #fd52ba,
              -1px 1px 0 #fd52ba, 1px -1px 0 #fd52ba,
              0px 2px 0 #fd52ba,  0 -2px 0 #fd52ba,
              -1px 0 0 #fd52ba, 1px 0 0 #fd52ba;}
#newep .marker a:hover{color:#f0ff00;}

#update {position:relative; height:auto; margin:0 auto;}
#update h2{position: absolute; bottom:0; left:0; right:0; width:20%; display:block; margin:7% 0 0 auto; z-index:1;}
#update h2 img{max-width:100%; height:auto;}
#update #uplist {width:82%; background-color:rgba(253,82,186,0.6); padding:.5em; border-radius:50px; box-shadow:0 6px 0 rgba(253,82,186,0.8); position:relative;}
#update ul li{line-height:180%; color:#fff; padding:0 0 0 1em; font-weight:bold;}
#update li a{transition: 0.4s ease-in-out; color:#fff;}
#update li a:hover{filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;}
#update span.ymd{color:#fdee00; font-family:"Gill Sans"; margin:0 .5em 0 0; font-weight:normal;}
#update button {position: absolute; top:5%; right:2.5%;
    width:5%;
    padding:0;
    margin:0;
    background:none;
    border:0;
    font-size:0;
    line-height:0;
    overflow:visible;
    cursor:pointer;
}
#update button img {display: block; max-width:100%;}

/*cts*/
#cts{position:relative;
margin:4% auto; padding:0 0 0;
background-image:url(../img/top/stitch.png),url(../img/top/stitch.png);
background-repeat:repeat-x,repeat-x;
background-position:left top,left top 12px;
background-size:auto,auto;
/*background-image:linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65));
background-repeat:no-repeat;
background-size:100% 40%;
background-position:right bottom;*/}
.needle{position:absolute; top:-42px; right:5%; width:132px;}
#ctsbtn {display: flex; flex-flow: row wrap; width:980px; margin:0 auto; justify-content: center;}
.btnitem {position: relative;
  width:295px; height:250px;
  margin:3% 1.1% 0;
  box-shadow:10px 10px 30px rgba(201,95,136,0.4);
}
.btnitem a,.paraviorg a{display:block;width:100%; height:100%;}
.btnitem span.chara{position: absolute; z-index:1; width:28%;}
.btnitem span.chara img{max-width:100%; height:auto;}

#cts .about{background-image: url(../img/top/about.png);
border-radius: 50% 40% 50% 50%/50% 50% 50% 50%;}
#cts .about span.chara{left:0; bottom:0;}
#cts .topics{background-image: url(../img/top/topics.png);
border-radius: 80% 30% 50% 50%/50%;}
#cts .topics span.chara{right:0; bottom:0;}
#cts .topics span.upd{color:#f0ff00; position: absolute; bottom:10%; left:35%; text-align:center; font-family:"Gill Sans";}
#cts .chart{background-image: url(../img/top/chart.png);
border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;}
#cts .chart span.chara{right:0; bottom:-10px; width:25%;}
#cts .caststaff{background-image: url(../img/top/caststaff.png);
border-radius: 80% 30% 50% 50%/50%;}
#cts .fmsg{background-image: url(../img/top/fmsg.png);
border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;}
#cts .fmsg span.chara{right:-20px; bottom:-10px; width:33%;}

#cts .movie{background-image: url(../img/top/movie.png);
border-radius:60% 40% 40% 45%/50%;}
#cts .quiz{background-image: url(../img/top/quiz.png);
border-radius: 50% 40% 50% 50%/50% 50% 50% 50%;}
#cts .linestmp{background-image: url(../img/top/linestmp.png);
border-radius: 60% 50% 40% 50%/50%;}
#cts .linestmp2{background-image: url(../img/top/linestmp2.png);
border-radius: 40% 45% 45% 50%/50% 50% 50% 45%;}

.paraviorg{margin:1em 0 0 0; width:343px; height:296px; background: url(../img/top/koikane.png) no-repeat 0 0; position: relative;}
.comingsoon{margin:1em 0 0 0; width:345px; height:292px; background: url(../img/top/comingsoon.png) no-repeat 0 0;}

#cts ul.bnr{display: flex; flex-flow: row wrap; width:980px; margin:2em auto 0; justify-content: center;}
#cts ul.bnr li{width:300px; height:120px; margin:1.5% 1.15%; text-align:center;}
#cts ul.bnr li a{display:block; width:100%; height:100%; background-repeat: no-repeat; background-position:center center; position: relative; box-shadow:10px 10px 30px rgba(201,95,136,0.4); background-size:cover;}
#cts 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%;}
#cts ul.bnr li.paravi a {background-image:url(../img/top/bn_paravi.png);}
#cts ul.bnr li.free a {background-image:url(../img/top/bn_free.png);}
#cts ul.bnr li.tver a {background-image:url(../img/top/bn_tver.png);}
#cts ul.bnr li.koikane a {background-image:url(../img/top/bn_koikane.png);}
#cts ul.bnr li.cmoa a {background-image:url(../img/top/cmoa.png);}
#cts ul.bnr li.ishop a {background-image:url(../img/top/ishop.jpg);}

/*sns*/
#snsarea{padding:3% 0 0; margin:0 auto;}
.fallsaru{position:absolute; top:-50px; left:470px; width:200px; z-index:2;}
#snsarea .inner{width:980px; margin:0 auto; display: flex; flex-flow: row wrap; position: relative; justify-content: center;}
#snsarea h3{position: absolute; top:-45px; left:15px; z-index:1;}
#snsarea h3 img{width:90%;}
#twTL{width:600px; height:420px; background:url(../img/top/bg_pp.png); margin:1em 3em 0 0; position: relative; z-index:1; box-shadow:20px 20px 30px rgba(201,95,136,0.3);}
#twTL .tline{width:95%; margin:40px auto 0; height:360px; overflow:hidden; background-color:rgba(255,255,255,0.7);}
#twTL .tw-inner{width:95%; margin:40px auto 0; background-color:rgba(255,255,255,0.7);}

#rect {width:300px;margin:1.5em 0 0 0;}
#rect .ad {display:block; width:300px; height: 250px; background:#eee;}
#snsarea #sns{text-align:center; margin:0 auto 2em;}
#snsarea #sns a{width:130px; height:130px; margin:0 1% 0; position: relative; display:inline-block; box-shadow:10px 10px 30px rgba(201,95,136,0.3);}
#snsarea #sns a.twt{background:url(../img/top/bg_b.png);}
#snsarea #sns a.line{background:url(../img/top/bg_g.png);}
#snsarea #sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}

/*footer*/
#top footer{text-align:center; padding:1em 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; font-family: "Gill Sans";}
#top footer p.copy {display:inline-block; width:720px; margin:0 auto; padding:40px 0 0;}
footer a,footer a:hover{color:#fff;}
/*f2*/
footer.dir2{margin:3% 0 0; position:relative; padding:3% 0 0;
background-image: linear-gradient(rgba(250,223,234,0), rgba(250,223,234,0.5));}
footer.dir2 .inner{width:980px; margin:0 auto; position:relative; height:250px; }
footer.dir2 .share{position:absolute; top:40%; left:0;}
#rect2 {width:300px; height: 250px; background:#fff; position:absolute; bottom:10%; right:0;}

#gotop {position: fixed; bottom:0; right:1%; z-index:10; animation: key1.4s ease infinite alternate;}
#gotop a {display:block; width:139px; height:150px; background:url(../img/gotop.png) no-repeat 0 0; background-size:cover;}
@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

/*------------------　2nd　------------------ */
header#dir #logo{width:980px; margin:0 auto; padding:.5em 0 1.5em; position: relative; }
header#dir #logo a{width:600px; height:196px; display:block; background:url(../img/logo.png) no-repeat 0 0; margin:0 auto; background-size:cover;}

#container{
background-image:url(../img/bbl_l.png),url(../img/bbl_r.png);
background-repeat:no-repeat,no-repeat;
background-position:calc(50% - 500px) 10%,calc(50% + 500px) 40%;
background-size:auto,auto;
}
#contents{width:980px; padding:6em 0 2em; margin:2.5em auto 3em; background-color:rgba(255,255,255,0.7); box-shadow:20px 20px 50px rgba(232,105,156,0.3); border-radius:30px; border:5px solid #fef900; position: relative;
background-image:url(../img/grn.png),url(../img/yel.png),url(../img/blu.png),url(../img/pnk.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:right 0,0 0,right bottom,0 bottom;
background-size:auto,auto,auto,auto;}
#contents h1 span.ttl img{max-width:100%; height:auto; position:absolute;left:2%;top:-35px; display:block;}

#contents .inner{width:90%; margin:0 auto;}
#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;
box-shadow:10px 10px 20px rgba(232,105,156,0.3); background-color:rgba(255,255,255,0.5); border: 3px solid #fff; }
.ph_cut_l {width:400px; height:600px; margin:1.5em auto; background-size: cover; background-repeat: no-repeat; background-position: center top; box-shadow:10px 10px 20px rgba(232,105,156,0.3); background-color:rgba(255,255,255,0.5); border: 3px solid #fff;}
.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 60%, rgba(124,196,213,0.2) 60%);}
.bdr{border-radius:10px; padding:.8em 1.5em; box-shadow:10px 10px 24px rgba(232,105,156,0.3); margin:1.5em auto; font-size:90%; background-color:rgba(255,255,255,0.5);}
.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{padding:1em 0;}
#highlight h2{font-weight:bold; line-height:1.4; font-size:140%; padding:0; text-align:center;}
#highlight h3{padding:1em 0 .5em; font-size:130%; font-weight:bold; line-height:150%; text-align:center;}
#highlight .ph1 {background-image:url(../img/about/ph1.jpg);}
#highlight .ph2 {background-image:url(../img/about/ph2.jpg); height:200px;}
#highlight .ph3 {background-image:url(../img/story/ep1/ep1_6.jpg);}
#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 {border-radius:10px; padding:.5em 1em; background-color:rgba(255,255,255,0.5); margin:1.5em 0;}
#highlight h4{font-size:110%; font-weight:bold; color:#fd52ba; padding:.5em 0 0;}
#highlight .comment p{padding:.5em;}

/*news*/
#info .emb{width:600px; height:338px; margin:1em auto .5em !important;}
#info span.date {padding:2px 3px; display:inline-block; font-size:100%; margin:0 0 .2em; font-family: "Gill Sans"; background-color:rgba(3,168,254,0.8); color:#fff;}
#info article {margin:0 auto 3em;}
#info article h2{width:100％; padding:.2em .2em .4em; line-height:145%; font-weight:bold; color:#fd52ba; font-size:160%;}
#info article h3{font-size:120%; line-height:145%; color:#03a8fe; font-weight:bold; border-left:2px dashed #03a8fe; padding:0 0 0 1em; margin:.5em 0 .4em;}
#info article h4{font-size:120%; line-height:145%; padding:1em 0 .5em; font-weight:bold;}
#info p.bdr{padding:1em 1.5em !important;}

/*story*/
#story h2{font-weight:bold; font-size:250%; margin:0 0 0 5%; text-align:center;}
#story h2 span.num{font-size:200%;}
#story #trailer,#movie .emb{width:700px; height:393.75px; margin:.5em auto 1em;}
#story #trailer iframe,#movie .emb iframe{width:100%; height:393.75px;}
#story #trailer{width:700px; height:394px; margin:.5em auto 1em; background-size:cover;}
#story #trailer.ep1 {background-image:url(../img/story/ep1/ep1.jpg);}
#story #trailer.ep2 {background-image:url(../img/story/ep2/ep2.jpg);}
#story #trailer.ep3 {background-image:url(../img/story/ep3/ep3.jpg);}
#story #trailer.ep4 {background-image:url(../img/story/ep4/ep4.jpg);}
#story ul#movlist {margin:1em auto 0; text-align:center;}
#story ul#movlist li {width:340px; margin:0 5px; display: inline-block; font-size:110%; line-height:135%;}
#story ul#movlist li a {width:100%; display:block; padding:.8em 0; color:#fd52ba; font-weight:bold;}
#story ul#movlist li a {
  position:relative;
  border:1px solid #fd52ba;
}
#story ul#movlist li a:after {background:#fef900;
  position: absolute;
  top:5px;
  left:-8px;
  content:"";
  height:100%;
  width:100%;
  z-index:-1;
  -webkit-transform: rotate(-1deg);
  moz-transform: rotate(0deg);
}
#story #contents .inner p a{ color:#fd52ba;}
#story #bknm{width:100%; margin:0 auto; padding:0 0 1em;
background-image:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5));
background-repeat:no-repeat;
background-size:100% 50%;
background-position:right bottom;}
#story #bknm h3{margin:0 0 0 1em; font-weight:bold; letter-spacing:.1em; font-size:260%; font-family: "Gill Sans"; position:relative;}
#story #bknm ul{margin:2em 1em 0; display: flex; flex-flow: row wrap;}
#story #bknm li{margin:0 0 25px 28px; position:relative; width:200px; height:130px; border-radius:10px;}
#story #bknm li a{display:block; width:100%; height:130px; text-align:center; position:relative; overflow: hidden; background-color:#fff; border-radius:10px; box-shadow:6px 6px rgba(254,249,0,0.5);
box-shadow:0 0 0 4px rgba(255,255,255,0.7),15px 15px 30px -10px rgba(201,95,136,0.5); border:1px dashed rgba(232,105,156,0.9);}
#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%; color:#fff; position: absolute; top:-8px; left:-8px; margin:0 auto; z-index:1; background-color:rgba(253,82,186,0.8); font-family:'Arial','Avenir Next Condensed','Franklin Gothic Medium';}
#story #bknm li span.epn strong{font-size:160%;}

/*gallery*/
#gallery{margin:2em auto 3em; width:100%;}
#gallery ul#show{width:100%; margin:0 auto; 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(250,223,234,0.5);}
#story .lbg-pics{background-color:none !important; box-shadow:none !important;}
#story #bknm li.bk1 a:after {background-image:url(../img/story/ep1/ep1_1.jpg);}
#story #bknm li.bk2 a:after {background-image:url(../img/story/ep2/ep2_1.jpg);}
#story #bknm li.bk3 a:after {background-image:url(../img/story/ep3/ep3_1.jpg);}
#story #bknm li.bk4 a:after {background-image:url(../img/story/ep4/ep4_1.jpg);}

/*chart*/
#chart .diagram{ position:relative; margin:.5em auto 2em; background:url(../img/chart/chart.png?1) no-repeat 0 0;}
#chart .diagram ul,#chart .diagram ul li {position: absolute;}
#chart .diagram ul li a{ display: block; text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap;
background:linear-gradient(to top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:195px; height:238px;}
#chart .diagram ul li.sz-m a img {width:165px; height:218px;}
#chart .diagram ul li.sz-s a img {width:134px; height:175px;}
#chart .diagram ul li a {
filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
transition: 0.3s;}
#chart .diagram ul li a:hover { filter: alpha(opacity=100); -moz-opacity:100; opacity:100;}
#chart ul li.reiko {left:245px; top:394px;}
#chart ul li.keita {left:514px; top:394px;}
#chart ul li.ken {left:14px; top:285px;}
#chart ul li.jun {left:488px; top:727px;}
#chart ul li.maria {left: 720px; top: 728px;}
#chart ul li.ruri {left:27px; top:542px;}
#chart ul li.tamotsu {left:95px; top:963px;}
#chart ul li.mizuki {left: 281px; top: 963px;}
#chart ul li.hikari {left:724px; top: 974px;}
#chart ul li.haruto {left:527px; top:974px;}
#chart ul li.nanako {left:726px; top: 70px;}
#chart ul li.meiko {left:97px; top: 727px;}
#chart ul li.yoshiaki {left:281px; top: 727px;}
#chart ul li.yasuo {left:54px; top:39px;}
#chart ul li.sachi {left:281px; top:39px;}
#chart ul li.tomihiko {left:515px; top:70px;}

/*quiz*/
#quiz #contents{padding:2em 0 3em;}
#quiz h1{width:864px; height:404px; margin:0 auto 1em; background:url(../img/quiz_h1.png?2) no-repeat 0 0;}
#quiz h2{font-size:150%; line-height:140%; padding:0; font-weight:bold;}
#quiz #outline h3{display:inline-block; font-size:105%; margin:1.2em 0; padding:0;}
#quiz #outline h3 span{background-color:rgba(255,255,255,0.9); margin:0 0 .5em; line-height:175%; padding:.1em;}
#quiz h3.que{font-weight:bold; text-align:center; font-size:160%; line-height:140%; padding:0 0 .5em;}
#quiz h3.que:first-letter {font-size:150%; line-height:1; color:#fd52ba; font-family:'Arial','Franklin Gothic Medium';}
#quiz span.epnum{text-align:center; padding:.5em; margin:-.8em auto 1.2em; font-size:160%; display:block; width:20%; background-color:#fd52ba; color:#fff; font-weight:bold;
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);}
#quiz .qbox{width:95%; border:2px dotted #fd52ba; padding:0 1em .5em; margin:3.5em auto; box-shadow:10px 10px rgba(254,249,0,0.3); border-radius:20px;}
#quiz h4.answer{font-weight:bold; font-size:140%; width:60%; margin:.5em auto; color:#fd52ba; padding:.5em 0; border:1px solid #fd52ba; text-align:center; letter-spacing:.2em;}
#quiz .qbox .ans{font-size:200%; padding:0 0 .8em; font-weight:bold; color:#fd52ba; text-align:center;}
ul#pastq {margin:0 0 1em;}
ul#pastq li{padding:1em; margin:1em 0 .5em; background-color:rgba(253,82,186,0.05);}
ul#pastq li span.vnm{display:block; color:#fff; padding:.2em; margin:0 0 .4em; background-color:#fd52ba; width:10%; text-align:center;}
ul#pastq li span.asw{display:inline-block; background-color:#fd52ba; color:#fff; padding:.1em .2em; margin:.6em .3em 0 0;}
ul#pastq li strong.f120{color:#fd52ba; font-family:'Arial','Franklin Gothic Medium';}

/*caststaff*/
#caststaff h2{margin:1em auto 1.2em; font-weight:bold; text-align:center; letter-spacing:.3em; font-size:240%; font-family: "Gill Sans"; position:relative;}
#caststaff h2:before{
content: "";
width:1px;
height:25px;
background-color:#4f4f4f;
position: absolute;
left: 50%;
bottom:-35px;
}
#caststaff h2.staff{margin:1em auto 1.5em;}
#caststaff h3{width:80%; margin:1.5em auto .6em; background-color:rgba(253,82,186,0.6); color:#fff;}
#caststaff .credit{text-align:center; width:60%; margin:0 auto 2em; font-size:120%; line-height:1.7;}
#caststaff .credit span.f80_2{line-height:1.2; font-size:80%; display:block;}
#caststaff table{width:80%; margin:0 auto 3em; font-size:145%;}
#caststaff table td{text-align:center; padding:1.5% 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%; color:#fd52ba;}
#caststaff table td.naka{padding:0 0 3%; font-size:80%; vertical-align:bottom; line-height:0;}
#caststaff table td.maru{vertical-align:bottom;font-size:90%; padding:5px 0; font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;}

/*movie*/
#movie h2{font-weight:bold; font-size:200%; margin:1em 0 .5em; text-align:center; line-height:130%;}
#movie ul#movlist {display: flex; flex-flow: row wrap; margin:5% auto;}
#movie ul#movlist li {width:47%; margin:2% 1% 0; padding:.8em; background-color:rgba(255,255,255,0.7); box-shadow:20px 20px 24px -8px rgba(232,105,156,0.3);}
#movie ul#movlist li figure.thumb{width:100％; height:0; padding:56.25% 0 0; background-size:cover !important; text-align:center; background-repeat: no-repeat !important; background-position: 0 0; position: relative; display:block;}
#movie ul#movlist li figure.thumb img{transition: 0.3s; position:absolute;left:0;top:0; width:100%; height:100%;}
#movie ul#movlist li figure.thumb img:hover {filter: brightness(0.8);}
#movie ul#movlist h3{padding:.5em 0; font-size:110%; line-height:140%;}
#movie ul#movlist li span.ymd{background-color:rgba(253,82,186,0.8); color:#fff; padding:2px 3px; display:inline-block; font-size:100%; margin:0 0 .4em; font-family: "Gill Sans";}

/*msg*/
iframe#iframe {width:100%; border:none; padding:0; margin:0;}
#msg h2{margin:1.5em auto 1em; font-weight:bold; padding:.6em 0; width:90%; color:#fff; background-color:rgba(253,82,186,0.7); border-radius:10px;}
#msg .inner ul#notice {width:90%; margin:0 auto;}
#msg .inner ul#notice li{margin:0 0 .7em 1em; font-size:95%; text-indent: -1em; line-height:1.4; color:#100c0e;}
#msg .inner ul#notice li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color:#fd52ba;}
#msg p.att{font-size:120%; padding:.5em 0; font-weight:bold;}
#msg p.pinfo{width:90%; background-color:rgba(255,255,255,0.4); margin:1em auto 1em; padding:1em !important; font-size:90%; line-height:1.5;}
#msg p.pinfo a{text-decoration:underline;}
#msg p.bdr{border:1px solid rgba(189,226,234,0.9); padding:.8em 1em; margin:0 auto 2em; width:90%;font-size:95%;}
#msg p.fmend{width:90%; margin:2em auto 1.5em; font-weight:bold;}
#prevnext { width:90%; padding:0; margin:2em auto .5em;}
#prevnext ul li {text-align:center; width:50px; height:50px; font-size:2.5rem; font-weight:bold; font-family:arial black,Verdana; background-color:rgba(253,82,186,0.7); color:#fff; line-height:50px; text-align:center;}
#prevnext ul li a {color:#fff; display:block; width:50px; height:50px; background-color:rgba(253,82,186,0.7); transition:0.5s;}
#prevnext ul li a:hover{opacity:0.5;}
#prevnext ul li.prev { float:left; }
#prevnext ul li.next { float:right;}

/*btn*/
a.btn_df,#highlight label{font-size:140%; color:#fff; 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; background-color:rgba(253,82,186,0.9); box-shadow:0 0 0 5px rgba(253,82,186,0.9),10px 10px 20px rgba(232,105,156,0.3); border-radius:10px; border: 2px dashed #fff;  text-shadow: -1px -1px #db2895;}
a.btn_s {background:#e60012; 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%;} 
a.btn_i {color:#c44a8f; padding:.6em 2em; border:1px solid #c44a8f; margin:.2em 0 0; display:inline-block; font-size:110%;
text-shadow:1px 1px 0 #fff; box-shadow:2px 2px 0 #c44a8f; letter-spacing:0.05em; border-radius:4px;
background:-webkit-gradient(linear,left bottom,left center,from(rgba(196,74,143,0.1)),to(rgba(196,74,143,0)));}

/*share*/
#share{width:50%; text-align:center; margin:2% auto; vertical-align:middle;}
#share span {color:#fff; background-color:rgba(253,82,186,0.7); font-weight:bold; font-size:90%;}
#share span {vertical-align:middle;
    position: relative;
    display: inline-block;
    padding: 8px 0;
    min-width: 110px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius:5px;
}
#share span:before{
    content: "";
    position: absolute;
    top: 60%;
    right: -18px;
    margin-top: -8px;
    border:6px solid transparent;
    border-left:12px solid rgba(253,82,186,0.7);
}
#share ul{display: inline-block; margin:0 0 0 1.2em; vertical-align:middle;}
#share ul li{display:inline-block; border-radius:50%; box-shadow:10px 10px 20px rgba(232,105,156,0.3); border:1px dashed white; 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;	}
.cdarea{height:90px;}
.btnitem:nth-child(4){margin:3% 1.4% 0 4%;}
.btnitem:nth-child(5){margin:3% 4% 0 1.4%;}
#chart .diagram{ width:922px; height:1263px; background-size:cover;}
#msg .postbtn{margin:2em auto 1.5em;}
#msg p.fmend{text-align:center;}
}

/*//////smp//////*/
@media all and (max-width: 767px) {
body,p { font-size: 1.3rem;}
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,#story #trailer img {position:absolute;left:0;top:0; width:100%; height:100%;}

header{
background-position:left bottom 10;
background-size:300%;}
#top header{margin:0 0 25%;
background-position:left bottom 5%;}
#top #container{
background-position:left 20%,right 50%;
background-size:40%,40%;}

#top main{width:100%; height:auto; margin:0 auto 1.8em; padding:95% 0 0;}
#top h1 .main1{width:50%; height:0; padding:21.96% 0 0; background-size:cover;}
#top h1 .main2{width:94%; height:0; padding:92.2201183432% 0 0; left:3%; bottom:-5px; background-size:cover;}
#top h1 .main3{width:11%; height:0; padding:35.2530120482% 0 0; top:5%; left:6%; background-size:cover;}

#top main #countdown{width:95%; left:0; right:0; margin:0 auto; border-radius:10px; padding:2.5% 0 0; border:1px dashed rgba(232,105,156,0.5);
box-shadow:0 0 0 5px rgba(255,255,255,0.7),20px 20px 40px rgba(201,95,136,0.5); vertical-align: top;}
#top main #countdown .epnm{width:20%; height:auto; top:-45%; left:-5%; line-height:100%; background-size:100%; padding:2% 0 5.3%; font-size:4.3vw;}
#top main #countdown .byoa{top:0; left:48%; width:35%;}
#top main #countdown .cdarea {padding:0 0 2%;}
#top main #countdown .oadate{width:45%; background-size:98%; margin:0; height:auto; padding:7% 0 0; background-position:right bottom;}
.timer{width:53%; line-height:100%; text-align:center;}
.timertext{color:#ff59b3; font-weight:bold; font-size:3.5vw;}
.timertext span.number{font-size:220%;}
.timer span.nowoa{font-size:7.5vw;}
#top main #countdown .onsale{ background-size:90%;margin:0 0 1%; height:0; padding:10% 0 0;} 

#menu ul {width:100%;}
#menu li {margin:0 1.4% 1%; height:auto;
width:20%;
width: -webkit-calc(100% / 4 - 4%) ;
width: calc(100% / 4 - 4%);
padding:5.8% 0;
box-shadow:3px 3px 0 0 rgba(229,57,162,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li:nth-child(even){margin:2.6% 1.4% 0;}
#menu li.menu5,#menu li.menu6{padding:3.8% 0;}
#menu li.menu8{line-height:180%; padding:5% 0;}
#menu li a{font-size:3.8vw;}
#menu li.menu2{box-shadow:3px 3px 0 0 rgba(0,151,230,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li.menu3{box-shadow:3px 3px 0 0 rgba(7,186,130,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li.menu4{box-shadow:3px 3px 0 0 rgba(238,204,0,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li.menu5{box-shadow:3px 3px 0 0 rgba(134,32,220,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li.menu6{box-shadow:3px 3px 0 0 rgba(51,159,0,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li.menu7{box-shadow:3px 3px 0 0 rgba(212,100,0,0.4),6px 6px 18px rgba(232,105,156,0.5);}
#menu li.menu8{box-shadow:3px 3px 0 0 rgba(63,99,235,0.4),6px 6px 18px rgba(232,105,156,0.5);}

#next .inner{width:100%;}
#next h2{width:50%; top:-17%;}
#next h2 img{max-width:100%;}
#spot{width:96%; margin:0 auto 7%; height:auto; display:block; box-shadow:20px 20px 30px rgba(201,95,136,0.4); padding:10px;}
#spot #trailer {width:100%; height:auto; margin:.2em auto 0; box-shadow:none;}
#spot #trailer div {width:100%; position:relative; padding:56.25% 0 0; height:0; overflow: hidden;}
#trailer iframe,.emb iframe{ position:absolute; top: 0; left:0; width:100% !important; height: 100% !important;}
#spot #trailer{width:100%; position:relative; padding:56.25% 0 0; height:0;}

#spot ul#movlist{margin:0 1% 0 0; top:2.5%; width:90%; font-size:0;}
#spot ul#movlist li{font-size:3.3vw;}

#newep{width:100%; margin:0 auto 6%;}
.saru1{width:20%; bottom:-10%;}
#newep .epnm{top:-12%; left:-2%; width:14%; height:auto; font-size:5.4vw; line-height:100%; padding:3% 0 3%;}
#newep .oadate{top:-5%; left:14%; font-size:4.5vw;}
#newep .marker a{font-size:4.5vw; width:30%; height:auto; background-size:100%; line-height:190%; bottom:-14.5%; right:0;}
#newep .storyline{padding:.5em; width:87%; margin:2em 2% 0 auto; box-shadow:6px 6px 0 rgba(253,82,186,0.2),20px 20px 30px rgba(201,95,136,0.3);}
#newep .storyline p{font-size:3.4vw !important; padding:5% 3% 2% 9% !important;}

#update{padding:6% 0 0;}
#update h2{width:30%; margin:0 0 0 auto; right:0; bottom:0;}
#update #uplist{width:78%; margin:0 0 0 1%; box-shadow:0 4px 0 rgba(253,82,186,0.8);}
#update ul li{font-size:3.3vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:82%; padding:0 0 0 2%; line-height:170%;}
#update button{top:8%; right:9.5%; width:9%;}

#cts {width:100%; margin:7% auto 0; padding:4% 0 3%;
background-size:90%,90%;}
.needle{right:0; width:15%; display:none;}
#ctsbtn{width:100%;}
.btnitem{
  width:43%; height:auto;
  margin:3% 1.35% 0;
padding:35% 0 0;
background-repeat: no-repeat; background-position:center center;background-size:cover;
}
.adjust {width:42.5%; margin:5% .5% 7% 3%;}
.linestmp2 {margin:5% 1% 7% 3%;}
#cts .topics span.upd{left:0; right:0; bottom:9%; font-size:2.8vw; font-weight:bold;}
.paraviorg{width:48%; height:0; background-size:cover; padding:42% 0 0;} 
.btnitem a,.paraviorg a{position: absolute; left:0;top:0;}

#cts ul.bnr{width:92%; margin:0 auto 3%; justify-content: start;}
#cts ul.bnr li{width:45%; height:auto; margin:3% 2.2% 0;}
#cts ul.bnr li a{height:0; padding:39% 0 0;}
#cts ul.bnr li a span.stream{line-height:170%; font-size:2.6vw;}

#snsarea{text-align:center; width:100%; padding:4em 0 0;}
.fallsaru{position:absolute; top:-6.5%; left:56%; width:33%; z-index:2;}
#snsarea .inner{width:100%;}
#snsarea h3{position:absolute; top:-16.5%; left:0; width:58%;}
#snsarea h3 img{max-width:100%;}
#twTL{margin:0 auto 3em; width:85%; height:300px; padding:5% 0;}
#twTL .tw-inner{margin:0 auto;}
#twTL .tline{margin:0 auto 0; width:90%;}
#twTL .tline{
height:calc(320vw / 5);
/*overflow-y: scroll;*/
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;}
#snsarea #sns a{width:90px; height:90px; margin:0 2% 0;}
#snsarea #sns a img{width:90%;}

#rect {margin:0 auto 3em; z-index:10;}
#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% 0;}

footer.dir2 .inner{width:100%; height:auto; text-align:center; background-size:25%}
footer p.copy{text-align:center;}
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:83px; height:90px;}

/*------------------　2nd　------------------ */
header#dir{padding:0; margin:0 auto 13%;}
header#dir #logo{width:100%; padding:.5% 0 0;}
header#dir #logo a {width:80%; height:auto; margin:0 auto 2.5%; padding:26.155484558% 0 0; background-size:cover;}

#container{
background-position:left 10%,right 50%;
background-size:40%,40%;}
#contents{width:95%; margin:6％ auto; padding:2em 0 2em; border:3px solid #fef900;
background-size:100%,80%,80%,100%;
border-radius:20px;
box-shadow:10px 20px 30px rgba(232,105,156,0.3);}
#contents h1{margin:0 0 8%;}

#contents .inner{width:98%;}
#contents .inner p {padding:.5em 0 1em; line-height:180%;}
#contents .inner p.f85,#contents .inner p.f80 {line-height:normal !important;}
.ph_cut {width:90%; height:0; padding:60% 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:90%; padding:.4em 0;}

/*about*/
#about #contents h1 span.ttl img{max-width:50%; height:auto; position:absolute;left:2%;top:-.8%; display:block;}
#about h2{font-size:4.3vw; padding:.5em 1em 0;}
#about #contents p,#story #contents p {padding:1em 1.5em .5em;}
#about h3{font-size:4vw; padding:.5em 1em;}
#highlight .comment{width:92%; margin:1em auto;}
#highlight .comment p{padding:.6em !important;}
#highlight .ph2{height:0; padding:30% 0 0 !important;}

/*news*/
#info #contents h1 span.ttl img{max-width:50%; height:auto; position:absolute;left:2%;top:-.3%; display:block;}
#info article{width:98%; margin:0 auto 8%;}
/*#info article:last-child{margin:1em auto 1em;}*/
#info article h2{line-height:140%; padding:.2em .2em 0; font-size:4.5vw;}
#info article h3{font-size:4vw; padding:0 0 0 .8em; margin:.5em 1em .4em .4em; line-height:140%;}
#info article h4{font-size:3.9vw; padding:0 0 0 .8em; line-height:140%;}
#info article p {padding:1em 1.5em .5em !important;}
#info p.bdr{width:92%; padding:1em 1.5em !important; font-size:95% !important; line-height:160% !important;}

/*story*/
#story #contents h1 span.ttl img{max-width:50%; height:auto; position:absolute;left:2%;top:-2%; display:block;}
#story h2{font-size:6vw; text-align:center; margin:2% 0 .5%;}
#story h2 span.num{font-size:180%;}
#story ul#movlist {width:100%; padding:0; margin:1em auto .5em;}
#story ul#movlist li{width:40%; margin:0 1%; font-size:3.5vw;}
#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{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
#story #bknm h3{margin:0 0 0 3%; font-size:7vw;}
#story #bknm li{width:43%; height:auto; margin:0 2% 5% 4%;}
#story #bknm li a{width:100%; height:0; padding:66% 0 0;}
#story #bknm li a img{position:absolute;left:0;top:0; width:100%; height:100%;}
#story #bknm li span.epn{font-size:3.5vw;}

/*gallery*/
#gallery{margin:1em auto 2em;}
#gallery ul#show{width:95%; }
#gallery ul#show li {margin:1.5%;
width:45%;
width: -webkit-calc(100% / 2 - 3%) ;
width: calc(100% / 2 - 3%);
}
#gallery ul#show li span a {width:100%; height:0; padding:66.5% 0 0;}

/*chart*/
#chart #contents h1 span.ttl img{max-width:43%; height:auto; position:absolute;left:2%;top:-3%; display:block;}
#chart .diagram{margin:0 auto .5em; overflow:hidden; width:92%; height:0; padding:126.026030369% 0 0; background-size: cover;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}

/*quiz*/
#quiz #contents{padding:4% 0 2em; margin:0 auto 6%;}
#quiz h1{width:100%; height:0; padding:46.759% 0 0; background-size: cover; margin:0 auto 4%;}
#quiz .inner{width:90%;}
#quiz h2{font-size:4vw;}
#quiz h3.que{font-size:4.5vw; padding:.5em 0 0; line-height:140%;}
#quiz span.epnum{width:30%; font-size:4vw; margin:-.8em auto .5em; padding:.4em;}
#quiz .qbox{margin:8% auto 3em;}
#quiz h4.answer{width:80%; margin:1em auto .5em; font-size:4vw; padding:2% 0;}
#quiz .qbox .ans{font-size:4.8vw;}
ul#pastq li{padding:2.5%; line-height:140%; font-size:105%;}
ul#pastq li span.asw{ line-height:110%; padding:.2em .3em; }
ul#pastq li span.vnm{width:15%;}
#quiz p.f90{line-height:160%;}

/*caststaff*/
#caststaff h1 span.ttl img{max-width:85%; height:auto; position:absolute;left:2%;top:-1%;}
#caststaff h2{font-size:7vw; margin:0 auto 1em;}
#caststaff h2:before{bottom:-25px; height:20px;}
#caststaff h2.staff{margin:0 auto 1.2em;}
#caststaff h3{margin:1.5em auto .5em; font-size:4vw; font-weight:bold;}
#caststaff table{width:100%;}
#caststaff table td{padding:.3.5em 0; font-weight:bold;}
#caststaff table td.cname{font-size:1.35rem; font-size:4vw; width:48%;}
#caststaff table td.chara{font-size:1.35rem; font-size:4vw; width:42%; }
#caststaff table td.naka{padding:0; font-size:1.5rem; font-size:3vw; vertical-align:middle;}
#caststaff .credit{width:95%; font-size:3.8vw; font-weight:bold;}

/*movie*/
#movie #contents h1 span.ttl img{max-width:50%; height:auto; position:absolute;left:2%;top:-2%; display:block;}
#movie h2{fmargin:1em 0 .5em; text-align:center; font-size:5vw; margin:11% 0 1%; line-height:140% !important;}
#movie ul#movlist{margin:2% auto 4%;}
#movie ul#movlist li{margin:2% 0 0 2%; padding:1.5%;}
#movie ul#movlist h3{font-size:2.8vw; padding:1%; margin:1% 0 0; line-height:140%;} 
#movie ul#movlist li span.ymd{ line-height:1;}

/*msg*/
#msg h1 span.ttl img{max-width:88%; height:auto; position:absolute;left:2%;top:-2%;}
#msg h2{font-size:4.1vw; padding:.5em 0; width:92%;}
#msg .inner ul#notice li{font-size:100%; text-indent: -1.4em;}
#prevnext ul li {font-size:100%; width:40px; height:40px; line-height:40px;}
#prevnext ul li a{width:40px; height:40px;}
#msg p.att{padding:0; font-size:125%; line-height:150% !important;}
#msg p.bdr{margin:0 auto 1em; padding:2% 0; border:none;}
#msg p.fmend{margin:12% auto .5em; line-height:150% !important;}

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{width:70%; margin:1.2em auto 1.5em; padding:5% 0; font-size:4.5vw;}

#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) {
body,p { font-size: 1.3rem;}
a.btn_ap {width:70%;}
/*.bn_rp span.upd {font-size:1.4rem; width:40px; height:30px; padding:12px 0 0;}*/
}
.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);}
}