/*/////////////////////////////////////////////////////////////////////////
default_CSS
/////////////////////////////////////////////////////////////////////////*/
body { font-family: Garamond , "Times New Roman" , "游ゴシック 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 { 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.4rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 2.0rem; }
p { font-size: 1.6rem; }
.f140 { font-size:140%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f90 { font-size:90%;}
.f85 { line-height:normal; font-size:85% !important}
.stpnk{color:#e4007f;}
/*link*/
a { text-decoration:none; color:#1d1d1d;}
a:hover { text-decoration:none; color:#e4007f;}
#menu a,#gotop a,header a,#form #agree a,#msg #writeBtn a,#bknm li a,.bn_tw a,.bn_free a,.bn_odm a,a.btn_prev,.spcts a,#mov .spot a,a.btn_s,a.btn_i,#story .ph_s,#btnBn a,#promo a,#itvmov a,#cts2nd a,#prevnext ul li a {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 a:hover,#gotop a:hover,header a:hover,#form #agree a:hover,#msg #writeBtn a:hover,#bknm li a:hover,.bn_free a:hover,.bn_odm a:hover,.spcts a:hover,#mov .spot a:hover,a.btn_s:hover,a.btn_i:hover,#story .ph_s:hover,#btnBn a:hover,#promo a:hover,#itvmov a:hover,#cts2nd a:hover,#prevnext ul li a: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=60); -moz-opacity:0.6; opacity:0.6;}
.fade {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.fade:hover {
    opacity: 0.5;
    filter: alpha(opacity=60);
}

/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {background: url(../img/bg.jpg) ; color:#1d1d1d; letter-spacing: 1px;}
#con-body {background-color:transparent;}
#container { max-height: 100%;}
/*#top header {width:100%; height:510px; background: url(../img/top/bk_main.jpg) no-repeat 0 0; background-size: cover;}
#top h1{width:980px; height:510px; background: url(../img/top/logo.png) no-repeat center center; margin:0 auto;}*/
#top header {width:100%; height:600px; background: url(../img/top/bk_main.jpg) no-repeat 0 0; background-size: cover;}
#top h1{width:980px; height:600px; background: url(../img/top/main.jpg) no-repeat 0 center; margin:0 auto;}

#mov,#contents {width:940px; margin:2em auto; line-height:1.8; text-align:left;}
#update h2 span,#mov .spot h2 span,#mov h3 span {display:none;}

#mov .spot h2{width:156px; height:35px; background:url(../img/top/ttl_story.png) no-repeat 0 0; margin:.5em auto;}
#mov .thum {width:276px; height:156px; background:url(../img/top/spot.jpg) no-repeat 0 0; margin:0 auto; background-size: contain; display:block;}
#mov p.next{color:#e4007f; padding:.4em 0; font-size:1.7rem;}

#pastmov h4{font-size:2.2rem; font-weight:bold; text-align:center; display: inline-block; width:100%;
text-shadow:0px 0px 1px #a90807,0px 0px 10px #a90807,0px 0px 15px #a90807; height:45px;}

/*cts*/
.spcts {width:620px;}
.bn_itr a,.bn_ch a,.bn_cs a,.bn_com a,.bn_ifm a,.bn_msg a,.bn_tm a,.bn_tw a,.bn_news a,.bn_repo_s a,.bn_mov_s a,.bn_serif a,.bn_line a,.bn_free a,.bn_odm a,.bn_hmln_s a,.bn_quiz_s a,.bn_ubkt a,.bn_cos a {display: block; width:300px; height:135px; box-shadow:0 0 10px rgba(80,76,76,0.3);}
.bn_itr a{background: url(../img/top/intro.jpg) no-repeat center center;}
.bn_ch a{background: url(../img/top/chart.jpg) no-repeat center center;}
.bn_cs a{background: url(../img/top/caststaff.jpg) no-repeat center center;}
.bn_com a{background: url(../img/top/bn_itv.jpg) no-repeat center center;}
.bn_ifm a{background: url(../img/top/info.jpg) no-repeat center center; position: relative;}
.bn_msg a{background: url(../img/top/msg.jpg) no-repeat center center;}
.bn_tm a{background: url(../img/top/theme.jpg) no-repeat center center;}
.bn_tw a{background: url(../img/top/bn_tw.jpg) no-repeat center center;}
.bn_news a{background: url(../img/top/news.jpg) no-repeat center center; position: relative;}
.bn_repo_s a{background: url(../img/top/bn_topics.jpg) no-repeat center center; position: relative;}
.bn_mov_s a{background: url(../img/top/bn_mv.jpg) no-repeat center center;}
.bn_serif a{background: url(../img/top/bn_serif.jpg) no-repeat center center;}
.bn_line a{background: url(../img/top/bn_line.png) no-repeat center center;}
.bn_free a{background: url(../img/top/bn_free.png) no-repeat center center;}
.bn_odm a{background: url(../img/top/bn_odm.png) no-repeat center center;}
.bn_hmln_s a{background: url(../img/top/bn_hmln.png) no-repeat center center;}
.bn_quiz_s a{background: url(../img/top/bn_quiz.png) no-repeat center center;}
.bn_ubkt a{background: url(../img/top/bn_ubukata.jpg) no-repeat center center;}
.bn_cos a{background: url(../img/top/bn_ishop.jpg) no-repeat center center;}

.bn_ifm span,.bn_news span {color:#fff; padding:.3em; background: rgba(215,125,175,0.7); position: absolute; top: 0; left: 0; font-size:95%; line-height:1;}
.bn_repo a{background: url(../img/top/repo.jpg) no-repeat 0 0; display: block; width:302px; height:227px; position: relative; margin:.6em 0 0;}
.bn_repo span {color:#e4007f; position: absolute; bottom: 0; right: 0; padding:0 1em 1em;}
.bn_repo_s span {color:#e4007f; position: absolute; bottom: .8em; left: 0; padding:0 0 .6em; display:inline-block; width:100%; text-align:center;}
.bn_conte a,.bn_hmln a,.bn_quiz a,.bn_hayato a{display: block; width:300px; height:210px; position: relative; box-shadow:0 0 10px rgba(80,76,76,0.3);}
.bn_conte a{background: url(../img/top/conte.jpg) no-repeat 0 0;}
.bn_hmln a{background: url(../img/top/hameln.png) no-repeat 0 0;}
.bn_hayato a{background: url(../img/top/hayato.jpg) no-repeat 0 0;}
.bn_quiz a{background: url(../img/top/quiz.jpg) no-repeat 0 0;}
.bn_serif a{background: url(../img/top/bn_serif.jpg) no-repeat 0 0;}

.bn_mov{width:302px; height:213px; margin:1.3em 0 0; background: url(../img/bk_cts_s2.jpg); height:auto; border-top:1px solid rgba(255,255,255,1); box-shadow:0 1px 3px rgba(80,76,76,0.4);}
.bn_mov span.thum a {width:276px; height:155px; background:url(../img/top/thum.jpg) no-repeat 0 0; margin:0.8em auto 0; background-size: contain; display:block;}

#twTL,#twTL_sp {width:300px; height:435px; height:584px; background:url(../img/bk_paper.jpg); box-shadow:0 0 10px rgba(80,76,76,0.4);}

/*footer*/
footer {margin:5em auto 0; position: relative;}
footer .inner {width:945px; margin:0 auto;}
footer p {padding:15px 0; font-size:1.5rem;}
footer a {color:#fff;}
footer .sns { padding:60px 0 0;}
#rect {width:300px; height: 250px; background:#111; margin:-2em 0 0;}


/*------------------　2nd　------------------ */
header {width:100%; height:288px; background: url(../img/head.jpg) no-repeat center center; background-size: cover;}
header a.logo {margin:0 auto; background: url(../img/logo.png) no-repeat center center; display:block;}

#detail{width:960px; background: url(../img/bk_cts.jpg); box-shadow:0 0 10px rgba(80,76,76,0.4); margin:3em auto; padding:2em 0 3em;}
#detail p {padding:1em 3.5em; line-height:1.4;}
#detail h1{width:960px; height:230px; background-size: contain; margin:0 auto 1em; background-repeat: no-repeat; background-position: 0 0;}
h1.news{background-image:url(../img/news/ttl.png);}
h1.intro{background-image:url(../img/intro/ttl.png);}
h1.theme{background-image:url(../img/theme/ttl.png);}
h1.comment{background-image:url(../img/comment/ttl.png);}
h1.chart{background-image:url(../img/chart/ttl.png);}
h1.msg{background-image:url(../img/msg.png);}
h1.story{background-image:url(../img/story/ttl.png);}
h1.caststaff{background-image:url(../img/caststaff.png);}
h1.info{background-image:url(../img/info/ttl.png);}
h1.chart{background-image:url(../img/chart/ttl.png);}
h1.repo{background-image:url(../img/report/ttl.png);}
#btnBn{margin:1em auto 0; width:940px;}

#bknm{width:960px; margin:3em auto;}
#bknm h3{font-size:3rem; border-bottom:1px solid rgba(89,86,98,0.2); padding:0 0 .1em;}
#bknm h3:first-letter {font-size: 130%; line-height: 1; color:#e4007f;}
.ph_cut {width:600px; height:399px; box-shadow:0 0 10px rgba(80,76,76,0.4); margin:1.5em auto; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.ph_cut_l {width:399px; height:600px; box-shadow:0 0 10px rgba(80,76,76,0.4); margin:1.5em auto; background-size: contain; background-repeat: no-repeat; background-position: center top;}

/*intro*/
#intro h2{width:544px; height:115px; background: url(../img/intro/h2.png) no-repeat 0 0; margin:0 auto;}
#intro h3{width:624px; height:355px; background: url(../img/intro/h3.png) no-repeat 0 0; margin:2em auto;}
#intro h4{padding:2em 0; text-align:center; line-height:1.5;
font-family: "游明朝" , "Yu Mincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho ProN" , "HG明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}
#intro .mainph {background-image:url(../img/intro/ph_intro.jpg);}

/*theme*/
#theme .mainph {background-image:url(../img/theme/main.jpg);}
#theme .comme {width:90%; margin:1em auto; border:1px solid rgba(89,86,98,0.2); background:-webkit-gradient(linear,left bottom,left top,from(rgba(89,86,98,0.1)),to(rgba(89,86,98,0))); padding:1.5em;}
#theme h2{text-align:center; line-height:1.4;}
#theme h3{color:#e4007f; padding:0 0 .3em; border-bottom:1px solid rgba(89,86,98,0.2); margin:0 0 .8em;}
#theme .comme p {padding:0 0 0;}

/*story*/
#story #detail{padding:2em 0 0;}
#story #trailer,#commov,#mov_fp{width:600px; height:338px; box-shadow:0 0 10px rgba(80,76,76,0.4); margin:0 auto;}
#story #trailer,#mov_fp {margin:.5em auto 3em;}
#story h2,#story h3{text-align:center; text-shadow:1px 1px 0 #fff;}
#story h2 span {color:#e4007f; font-size:3rem;}
#sentence {width:90%; margin:0 auto;}
#sentence p,#form p{padding:0 0 1em;}
#sentence p span {font-size:105%;}
#sentence a {color:#e4007f;}
#story #mov{width:100%; padding:1em 0; background:rgba(89,86,98,0.1); margin:2em 0 0;}
#story .ph_area{margin:1.5em auto 3em; width:100%;}
#story .ph_s{width:49%; padding:32.585% 0 0; background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative;}
#story .ph_s img {position:absolute;left:0;top:0; width:100%; height:100%;}
#story #bknm ul {margin:1em auto; width:940px; padding:0 0 1em;}
#story #bknm h3{border-top:1px solid rgba(89,86,98,0.2); padding:.1em 0 .2em;}
#story #bknm li{display:inline-block; width:224px; margin:0 0 .7em .35em; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center top;}
#story #bknm li a {color:#1d1d1d; display:block; background:rgba(214,181,200,0.7); width:100%; height:149px; }
#story #bknm li a:hover{-webkit-filter: blur(5px);}
#story #bknm li span,#gallery #bknm li span {line-height: 149px;}
#story #bknm li span.epi {background:rgba(228,0,127,0.8);  padding:.2em; margin:0 .5em 0 0; color:#fff;}
#story #bknm li span.date {padding:.2em; }

/*itv*/
#cmt article p{padding:.5em 0 1.5em;}
#cmt h3 {border-bottom:1px solid rgba(89,86,98,0.2); padding:0 0 .5em;}
#cmt h3.pd {margin:0 0 .5em;}
#cmt h3:first-letter {font-size: 130%; line-height: 1; color:#e4007f; font-weight:bold;}
#cmt h4 {padding:0 0 .2em;}
#cmt h4:not(:first-child){margin:.5em 0 0;}
#cmt h4:first-letter {font-size: 145%; line-height: 1; color:#e4007f;}
#cmt article{padding:0 0; margin:0 auto 3.5em; width:90%; /*border-bottom:1px dashed rgba(215,125,175,0.5);*/}
#cmt article:last-child{margin:0 auto 0;}
#cmt article h2{width:250px; height:310px; background:url(../img/comment/ph_1.jpg) no-repeat 0 0; box-shadow:0 0 10px rgba(80,76,76,0.4); background-size: cover; margin:0 0 1em;}
#cmt article h2#cast2{background:url(../img/comment/ph_2.jpg) no-repeat 0 0; background-size: cover;}
#cmt article h2#cast3{background:url(../img/comment/ph_3.jpg) no-repeat 0 0; background-size: cover;}
#cmt h5 {color:#e4007f; padding:1em 0 .5em; text-align:center; font-size: 120%;}
#commov {margin:0 auto 5em;}

/*news*/
#promo,#info article {width:90%; margin:0 auto 3em;}
#promo {padding:1em 1em .5em; margin:0 auto 3em; /*background:rgba(89,86,98,0.1); border-radius: 8px;*/
background: -webkit-gradient(linear,left top,left bottom,from(rgba(89,86,98,0.1)),to(rgba(89,86,98,0)));}
#promo h2 {color:#e4007f; text-align:center; letter-spacing:.3em; padding:.4em 0; margin:0 0 1em; text-shadow:1px 2px 0 #fff; font-weight:bold; border:3px double rgba(89,86,98,0.2); background: rgba(255,255,255,0.3);}
#promo h3 {font-size:2rem; padding:.5em 0 .8em;}
#promo h3 a {color:#e4007f;}
#promo p {padding:0 0 1em; border-bottom:1px solid #fff; margin:0 .5em 1em;}
#promo p:last-child {border:none;}
#promo p.add {font-size:1.2rem !important;  border:none !important;}

#info h4{margin:0 0 10px;}
#info span.date {padding:2px 3px; color:#fff; background: rgba(215,125,175,0.9); }
#info article {border-bottom:1px solid rgba(215,125,175,0.5); padding:0 0 2em;}
#info article:last-child{border:0; padding:0;}
#info article h2{text-shadow:1px 1px 0 #fff; padding:.5em 0 0; line-height: 1.4; font-size:2.2rem;}
#info article h2:first-letter {font-size: 130%; line-height: 1; color:#e4007f; font-weight:bold;}
#info article p {padding:1em 0; line-height:1.4;}
.bdr{border:1px solid rgba(215,125,175,0.5); padding:1em 1em !important; margin:1em 0 2em; line-height:1.5 !important;}
#info .novel1{width:300px; height:453px; background-image:url(../img/info/novel1.jpg);}
#info .ishop{width:600px; height:424px; background-image:url(../img/info/ishop.jpg);}
#info .ishop2{width:450px; height:637px; background-image:url(../img/info/ishop2.jpg);}
#info .ishop3{width:500px; height:435px; background-image:url(../img/info/ishop3.jpg);}
#info .pre1{width:400px; height:400px; background-image:url(../img/info/pre1.jpg);}
#info .line1{width:700px; height:530px; background-image:url(../img/info/line1.jpg);}
#info .ost{width:400px; height:400px; background-image:url(../img/info/ost.jpg);}
#info .lalaport{width:500px; height:692px; background-image:url(../img/info/lalaport.jpg);}
#info .dvd{width:500px; height:391px; background-image:url(../img/info/dvd.jpg); box-shadow:none;}
#info .pre2{width:600px; height:433px; background-image:url(../img/info/novel.jpg); box-shadow:none;}

/*conte*/
#conte h1{width:960px; height:440px; background:url(../img/conte.jpg) no-repeat 0 0; margin:0 auto .5em;}
#itvmov {margin:1em 0 3em; padding:1em 0;
background: -webkit-gradient(linear,left bottom,left top,from(rgba(170,151,130,0.2)),to(rgba(170,151,130,0.1)));}
#conte h2{text-align:center; padding:.5em 0; color:#e4007f;}
#conte h3{border-bottom:1px solid rgba(89,86,98,0.2); padding:0 0 .5em; margin:1em 2em 0;}
#conte h3:first-letter {color:#e4007f;}
#itvmov ul {width:90%; margin:0 auto 3em;}
#itvmov ul li {margin:0 0 3em;}
#itvmov ul li p {padding:0;}
#itvmov ul li p strong {color:#fff; font-size:1.5em; background:#e4007f; display:inline-block; padding:.15em; margin:0 .2em 0 0; line-height: 1;}
#itvmov ul li span { display: block; float:left; width:250px; height:141px; margin:0 1em 0 0;
background-size: cover; background-repeat: no-repeat; position: relative;
box-shadow:0 0 10px rgba(80,76,76,0.3);}

/*hameln*/
#hameln h1{width:960px; height:440px; background:url(../img/hameln/ttl.jpg) no-repeat 0 0; margin:0 auto .5em;}
#hameln h2{text-align:center; padding:.5em 0; color:#762a27; border-bottom:1px solid rgba(156,145,117,0.6); border-top:1px solid rgba(156,145,117,0.6);}
#hameln h3{text-align:center; padding:.5em 0; color:#762a27; margin:1em 0 0; background:rgba(156,145,117,0.1);}
#hameln #detail {padding:0 0 0;}
#hameln article {width:80%; margin:0 auto;}
#hameln article p,#interview article p {padding:1em 0; line-height:1.5;}
#hameln #imgcut {background:url(../img/hameln/cut.jpg) no-repeat center bottom; width:960px; height:210px; margin:3em 0 0;}
#hameln .summary {background:rgba(156,145,117,0.1); margin:2em 0 1.5em; padding:1em 2em;}
#hameln .outline {padding:1em 2em 5em; background:url(../img/hameln/cn.png) no-repeat right 1em bottom; border:4px double rgba(156,145,117,0.3); box-shadow:0 0 10px rgba(80,76,76,0.3); }
.strtc{color:#762a27;}
#hameln #bknm{width:80%; margin:2em auto 0;}
#hameln #bknm h4{text-align:center; font-size:1.7em; letter-spacing:.2em; text-shadow:1px 1px 0 #fff; padding:0 0 .5em;}
#hameln #bknm h4:first-letter {color:#762a27; font-size: 120%; line-height: 1;}
#hameln #bknm ul li {float:left; text-align:center; border-bottom:5px solid rgba(156,145,117,0.5);}
#hameln #bknm ul li {width:19%; margin:0 1% 1% 0;}
#hameln #bknm ul li a {width:100%; display:block; background:rgba(156,145,117,0.2); padding:1.5em 0; color:#762a27;}

/*ubukata*/
#ubukata h1{width:960px; height:440px; background:url(../img/ubukata/ttl.jpg) no-repeat 0 0; margin:0 auto .5em;}
#ubukata #detail {padding:0 0 2em; font-family: "游明朝" , "Yu Mincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho ProN" , "HG明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1.5;}
#ubukata #detail p{line-height: 1.7;}
#ubukata .scene {width:625px; height:438px; margin:2.5em auto 1em; background-size: contain; background-repeat: no-repeat; background-position: center center;}
#ubukata .ep1,#ubukata #bknm li.vol1 a {background-image:url(../img/ubukata/ep1.jpg);}
#ubukata .ep2,#ubukata #bknm li.vol2 a {background-image:url(../img/ubukata/ep2.jpg);}
#ubukata .ep3,#ubukata #bknm li.vol3 a {background-image:url(../img/ubukata/ep3.jpg);}
#ubukata .ep4,#ubukata #bknm li.vol4 a {background-image:url(../img/ubukata/ep4.jpg);}
#ubukata .ep5,#ubukata #bknm li.vol5 a {background-image:url(../img/ubukata/ep5.jpg);}
#ubukata .ep6,#ubukata #bknm li.vol6 a {background-image:url(../img/ubukata/ep6.jpg);}
#ubukata .ep7,#ubukata #bknm li.vol7 a {background-image:url(../img/ubukata/ep7.jpg);}
#ubukata .ep8,#ubukata #bknm li.vol8 a {background-image:url(../img/ubukata/ep8.jpg);}
#ubukata .ep9,#ubukata #bknm li.vol9 a {background-image:url(../img/ubukata/ep9.jpg);}
#ubukata .ep3-2 {background-image:url(../img/ubukata/ep3-2.jpg);}
#ubukata #bknm {width:90%; margin:3em auto 0;}
#ubukata #bknm ul {margin:1em 0 0;}
#ubukata #bknm ul li {margin:0 16px 20px 0; float:left;}
#ubukata #bknm ul li a {display: block; background-size: contain; background-repeat: no-repeat; background-position: center center; width:200px; height:140px; overflow:hidden !important;}
.fc1{color:#d854b1;}
.fc2{color:#4f99be;}
.fc3{color:#984ed7;}
.fc4{color:#f88000;}
.fc5{color:#6ebe4f;}

/*hayato*/
#hayato h1{width:960px; height:300px; background:url(../img/hayato.jpg) no-repeat 0 0; margin:0 auto 1.5em;}
#hayato h2{font-size:2.6rem; font-weight:bold; text-align:center; display: inline-block; width:100%; letter-spacing:.2em; color:#467adb;}
#mainmov {width:620px; height:358px; margin:.5em auto 3em; background:rgba(184,230,225,0.3); padding:10px;}
#spmov ul {width:90%; margin:3.5em auto 3em;}
#spmov ul li {width:270px; height:152px; margin:0 5px 50px; background-size: contain; text-align:center; background-repeat: no-repeat; background-position: 0 0; position: relative; display: inline-block;}
#spmov ul li a img {width:100%; height:auto;}
#spmov ul li a:hover img {-webkit-filter: saturate(300%);filter: saturate(300%);}
#spmov ul li span { display: inline-block; background:rgba(184,230,225,0.3); text-align:center; padding:.3em .8em;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}


/*present*/
#present h1{width:960px; height:300px; background:url(../img/present/ttl.jpg) no-repeat 0 0; margin:0 auto 1em;}
#present h2,#serif h3{text-align:center; padding:.5em 0; color:#e4007f; line-height:1.5;}
#present h3 {color:#e4007f; overflow: hidden; text-align: center; margin:.5em 0;}
#present h3 span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1.5em;
	text-align: left;
}
#present h3 span::before,
#present h3 span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 400%;
	height: 1px;
	background-color: rgba(215,125,175,0.5);
}
#present h3 span::before {right: 100%;}
#present h3 span::after {left: 100%;}
#present .ph_pre{width:754px; height:341px; background:url(../img/present/present1.png) no-repeat 0 0; margin:0 auto 3em;}
#present .ph_pre2{width:850px; height:310px; background:url(../img/present/pre4.jpg) no-repeat 0 0; margin:0 auto 3em;}
#present .que{width:80%; border:4px double rgba(215,125,175,0.5); margin:3em auto 3em; padding:1em 1em;}
#present .ans{width:90%; margin:0 auto;}
#present .ans p{padding:0 1em .5em;}
#present .ans span.ep{color:#fff; background: rgba(215,125,175,0.9); padding:.2em;}
#present .ans ul li{padding:1em 0 .5em; border-bottom:1px solid rgba(215,125,175,0.5);}
#present .ans ul li:last-child{border:none;}

/*interview*/
#interview h1{width:960px; height:300px; background:url(../img/itv/ttl1.jpg) no-repeat 0 0; margin:0 auto 1.5em;}
#interview h1.vol2 {background-image:url(../img/itv/ttl2.jpg);}
#interview h2{color:#e4007f; font-size:2rem; margin:2em 0 0; border-left:4px solid #e4007f; padding:.1em 0 .1em .5em;}
/*#interview h2:first-letter {font-size: 130%; line-height: 1;}*/
#interview .ph_s{width:40%; padding:26% 0 0; background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; border:4px solid #fff; box-shadow:0 0 8px rgba(80,76,76,0.2);}
#interview .ph_s2{width:30%; padding:41% 0 0; background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; border:4px solid #fff;}
#interview article {width:90%; margin:0 auto;}
#interview article img {position:absolute;left:0;top:0; width:100%; height:100%;}
#interview article .floatL{margin:1em 1.5em 1em 0;}
#interview article .floatR{margin:1em 0 1em 1em;}
#interview #bknm{width:100%; margin:3em auto 0;}
#interview #bknm ul {margin:1em auto 0; width:940px;}
#interview #bknm h3{border-top:1px solid rgba(89,86,98,0.2); padding:.1em 0 .2em; text-align:center;}
#interview #bknm li{display:inline-block; width:224px; margin:0 0 .7em .35em; text-align:center; position: relative;}
#interview #bknm li a {display:block; width:100%; height:149px; background-size: cover; background-repeat: no-repeat; background-position: right top;}
#interview #bknm li span {position:absolute;left:0;bottom:0; color:#fff; display:inline-block; width:100%; background: rgba(228,0,127,0.7); padding:.2em 0;}
#interview #bknm li.vol1 a {background-image:url(../img/itv/ttl1.jpg);}
#interview #bknm li.vol2 a {background-image:url(../img/itv/ttl2.jpg);}
#interview .ph1_1 {background-image:url(../img/itv/ph1_1.jpg);}
#interview .ph1_2 {background-image:url(../img/itv/ph1_2.jpg);}
#interview .ph1_3 {background-image:url(../img/itv/ph1_3.jpg);}
#interview .ph2_1 {background-image:url(../img/itv/ph2_1.jpg);}
#interview .ph2_2 {background-image:url(../img/itv/ph2_2.jpg);}
#interview .ph2_3 {background-image:url(../img/itv/ph2_3.jpg);}

/*serif*/
#serif h1{width:960px; height:300px; background:url(../img/serif/ttl.png) no-repeat 0 0; margin:0 auto 1em;}
#serif h2 {font-weight:bold; color:#fff; background:#eb73bd; display:block; width:276px; height:276px; margin:-4em auto 0; background:url(../img/serif/ph1.png) no-repeat 0 0;}
#serif h2.vol2 {background-image:url(../img/serif/ph2.png);}
#serif h2.vol3 {background-image:url(../img/serif/ph3.png);}
#serif h2.vol4 {background-image:url(../img/serif/ph4.png);}
#serif h3 {padding:1em; font-size:2.3rem;}
#serif .odai {text-align:center; border:4px double rgba(215,125,175,0.5); width:70%; margin:8em auto 3em;}
#serif .odai p{padding:0 0 2em;}
#serif #bknm {width:90%; margin:0 auto;}
#serif #bknm ul li {margin:0 10px 20px; float:left;}
#serif #bknm ul li a {display: block; background-size: contain; background-repeat: no-repeat; background-position: center center; width:150px; height:150px; overflow:hidden !important;}
#serif #bknm ul li.vol1 a{background-image:url(../img/serif/ph1.png);}
#serif #bknm ul li.vol2 a{background-image:url(../img/serif/ph2.png);}
#serif #bknm ul li.vol3 a{background-image:url(../img/serif/ph3.png);}
#serif #bknm ul li.vol4 a{background-image:url(../img/serif/ph4.png);}

/*chart*/
#chart .diagram { background: url(../img/chart/chart.jpg) no-repeat 0 0; position:relative;}
#chart .diagram ul {position: absolute;}
#chart .diagram ul li {position: absolute;}
#chart .diagram ul li a { display: block; background:rgba(228,0,127,0.2); text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap;}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:220px; height:285px; }
#chart .diagram ul li.sz-m a img {width:160px; height:207px; }
#chart .diagram ul li a {
filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;}
#chart .diagram ul li a:hover { filter: alpha(opacity=100); -moz-opacity:100; opacity:100;}
#chart ul li.aki { left: 321px; top:224px;}
#chart ul li.yumiko { left: 44px; top:19px;}
#chart ul li.kohei { left: 618px; top:131px;}
#chart ul li.kenichi { left: 44px; top:344px;}
#chart ul li.kazuki { left: 473px; top:634px;}
#chart ul li.sora { left: 651px; top:634px;}
#chart ul li.hiroko { left: 45px; top:715px;}
#chart ul li.takefumi { left: 240px; top:715px;}
#chart ul li.rino { left: 45px; top:959px;}
#chart ul li.narumi { left: 240px; top:959px;}
#chart ul li.shiori { left: 45px; top:1203px;}
#chart ul li.atsuko { left: 240px; top:1203px;}
#chart ul li.aki { left: 321px; top:224px;}
#chart ul li.ayaka { left: 45px; top:1465px;}
#chart ul li.inose { left: 473px; top:920px;}
#chart ul li.kumiko { left: 651px; top:920px;}
#chart ul li.aramata { left: 473px; top:1211px;}
#chart ul li.tsukui { left: 651px; top:1211px;}


/*caststaff*/
/*#cast{width:398px; height:883px; background:url(../img/cast.png) no-repeat center 0; margin:1em 0 3em 35%; }*/
#cast,#staff{ line-height:1.5em; width:98%; text-align:center; font-size:2.2rem; margin:0 auto 3em; /*font-family: "游明朝" , "Yu Mincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho ProN" , "HG明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;*/}
#caststaff h2 {padding:.5em 0; color:#e4007f; font-weight:bold; margin:0 0 .5em; font-size:2.8rem; text-shadow:1px 1px 0 #fff;
font-family: "游明朝" , "Yu Mincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho ProN" , "HG明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
text-align:center;}
#staff ul li.pic,#cast ul li.pic{text-align:right; vertical-align: top; width:48%;}
#staff ul li.name,#cast ul li.name{text-align:left; width:48%;}
#staff ul li,#cast ul li {display:inline-block; padding:.5em .2em;}
.spn{padding:1.35em .2em !important;}
.subcap {font-size:1.6rem;}
/*#staff > h2+h3{margin:0;}*/

/*report*/
/*#report h1{width:960px; height:300px; background:url(../img/report/ttl.jpg) no-repeat 0 0; margin:0 auto 1em;}
#report #detail,*/#conte #detail,#present #detail,#serif #detail,#interview #detail,#hayato #detail {padding:0 0 3em;}
#report .ph_cut,#report .ph_cut_l{margin:1.5em auto 0;}
#report article {width:90%; margin:2em auto 0;}
#report h2 {color:#e4007f; padding:0 0 .5em; border-bottom:1px solid rgba(89,86,98,0.2); margin:0 0 .5em;}
#report article p{padding:2em 0 1em; line-height:1.5;}
#report article a {color:#e4007f;}
#report article a:hover {text-decoration: underline;}
/*#report article p:first-of-type{padding:2em 0 0;}*/
#report article span.date {color:#e4007f;}
#report article p.cap { width:100%; text-align:center; margin:.5em 0 0; display: inline-block; padding:0;}
#report article p.cap span {font-size:1.5rem; color:#fff; background: rgba(215,125,175,0.9); padding:0; }

#report #bknm ul {margin:1em 0 0;}
#report #bknm li{display:inline-block; width:48%; line-height: 1.4em; margin:0 2% .1em 0;}
#report #bknm li a {color:#fff; display:block; /*box-shadow:0 0 10px rgba(80,76,76,0.4);*/ width:100%; height:70px;
background:#cebfc7;
background:-webkit-gradient(linear,left bottom,left top,from(rgba(153,124,141,0.8)),to(rgba(89,86,98,0.1)));}
#report #bknm li span.epi {width:11%; height:100%; line-height: 70px; text-align:center !important; font-size:150%; font-weight:bold; display: block; float:left; margin:0 .5em 0 0;
background:#967a96;
background:-webkit-gradient(linear,left bottom,left top,from(rgba(89,86,98,0.3)),to(rgba(89,86,98,0)));}
#report #bknm li span.date {background:none; margin:.8em 0 0; display: inline-block; padding:.1em .2em; line-height: 1em; color:#a04e7b; text-shadow:1px 1px 0 rgba(255,255,255,0.5);}
#push{ cursor:pointer; }
#report #prevnext {margin:2em 0 0;}

/*msg*/
iframe#iframe {width:100%; border:none; padding:0; margin:0;}
#msg #detail .inner,#serif #detail .inner {width:90%; margin:2em auto 0;}
#form .inner{ margin:2em auto 0; padding:2em 3em; text-align:left; background: url(../img/bk_cts.jpg); box-shadow:0 0 10px rgba(80,76,76,0.4); width:80%;}
#form h1{width:401px; height:74px; background-size: contain; margin:0 auto .5em; background-repeat: no-repeat; background-position: 0 0; background-image:url(../img/ttl_msg.png);}
#form h2{color:#e4007f; margin:1em 0 .5em; text-shadow:1px 1px 0 #fff;}
#form .inner p { line-height:1.7; text-align:left; padding:10px;}
#form #close { margin:40px auto 0; text-align:center;}
#form #close a{ font-size:120%; border:1px solid #1d1d1d; padding:12px 60px; text-decoration:none; color:#1d1d1d;}
#prevnext { padding:0; margin:0 0 1em; text-align:center;}
#prevnext ul li {width:50px; height:50px; font-size:2.5rem; font-weight:bold; font-family:arial black,Verdana; background:#eee; color:#fff; line-height:50px; text-align:center;}
#prevnext ul li a {color:#fff; background:#e4007f; display:block; width:50px; height:50px;
background:rgba(230,77,159,0.9);}
#prevnext ul li.prev { float:left; }
#prevnext ul li.next { float:right; }

#msg label {
	position: relative;
	display: block;
	width: 35%; margin:10px 0 10px 0;
	border: 1px solid #967a96;
	background: #fff;
}
#msg label:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	width: 0;
	height: 0;
	margin: -2px 0 0 0;
	border: 5px solid transparent;
	border-top: 7px solid #967a96;
}
#msg select#backnum {
	font-size:110%;
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 98%;
	padding: 0.5em 1em;
	color: #967a96;
	border: none;
	border-radius: 5px;
	background: transparent;
	text-indent: .01px;
	text-overflow: "";
}
::-ms-expand {
	display: none;
}


/*btn*/
#form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap,#push {font-size:150%; color:#fff; display:block; font-weight:bold; box-shadow:0 0 10px rgba(80,76,76,0.4); text-align:center; width:70%; padding:.8em; margin:.5em auto 1.5em; text-shadow:1px 1px 0 #8e8793;
background:#967a96;
background:-webkit-gradient(linear,left bottom,left top,from(rgba(153,124,141,0.9)),to(rgba(89,86,98,0.6)));}
#serif a.btn_ap,#present a.btn_ap {background:#e4007f;
background:-webkit-gradient(linear,left bottom,left top,from(rgba(230,77,159,0.9)),to(rgba(119,99,138,0.6)));}
a.btn_ap {width:50%;}
a.btn_s {color:#fff; background: rgba(215,125,175,0.9); padding:.2em;} 
a.btn_i {color:#c6478d; padding:1em; border:1px solid #da88b5; border-radius: 5px; margin:.5em 0; display:inline-block;
text-shadow:1px 1px 0 rgba(255,255,255,0.8); box-shadow:0 0 5px rgba(80,76,76,0.2);
background:-webkit-gradient(linear,left bottom,left center,from(rgba(215,125,175,0.2)),to(rgba(215,125,175,0)));}
#msg #writeBtn a {width:45%; padding:1em 0; margin:.5em auto 1em;}
#form #agree a:hover,#msg #writeBtn a:hover,#intro #commeBtn a:hover {color:#fff;}


/*//////pc//////*/
@media all and (min-width: 768px) {
.hidtxt{visibility: hidden;}
#update span.more,.fp-causion,.relay,#twTL_sp { display:none;}

header a.logo {width:980px; height:207px;}
#menu { width:100%; text-align:center; border-top:1px solid rgba(255,255,255,0.3); box-shadow:0 0 10px rgba(80,76,76,0.7); margin:10px 0 0;
background:-webkit-gradient(linear,left bottom,left top,from(rgba(45,45,62,0.5)),to(rgba(45,45,62,0)));}
#menu ul {width:980px; height:70px; margin:0 auto;}
#menu li { height:70px; display:inline-block; padding:0; margin:-3px; }
#menu li a { height:70px; display: block; padding:0; margin:0; text-indent: 100%; white-space: nowrap; text-decoration:none; overflow: hidden;}
#menu li.btn1 a { width:155px; background:url(../img/menu1.png) no-repeat center center;}
#menu li.btn2 a { width:155px; background:url(../img/menu2.png) no-repeat center center;}
#menu li.btn3 a { width:150px; background:url(../img/menu3.png) no-repeat center center;}
#menu li.btn4 a { width:260px; background:url(../img/menu4.png) no-repeat center center;}
#menu li.btn6 a { width:260px; background:url(../img/menu5.png) no-repeat center center;}
#menu li.btn5 {display:none;}

#mov .spot {background:url(../img/bk_cts_s.jpg) ; width:300px; text-align:center; height:285px; box-shadow:0 0 10px rgba(80,76,76,0.4);}
.bn_mov p{width:188px; height:22px; display:block; background: url(../img/top/ttl_cm.png) no-repeat 0 0; margin:.5em auto;}
.bn_mov p span,#twTL p span{display:none;}
.bn_cs,#top .bn_com/*,.bn_tm,.bn_news,#top .bn_repo_s,.bn_serif,.bn_msg,.bn_msg,#top .bn_quiz_s,.bn_cos*/ {margin:15px 0 0;}
#cts1st div {margin:0 0 15px 0;}
#top .bn_ifm,#top .bn_hmln_s,#top .bn_cos {margin:0 20px 0;}
#top .bn_repo_s span {padding:0 0 .3em;}
#cts2nd div {margin:10px 20px 5px 0;}
#cts2nd div:nth-child(3n) {margin:10px 0 5px 0;}
#cts2nd .bn_tw{display:none;}
.bn_conte a,.bn_hmln a,.bn_quiz a,.bn_hayato a {margin:20px 0 0;}
.bn_subs{display: block; width:300px; height:135px; background:url(../img/top/subs.png) no-repeat center center;}
#twTL p{width:117px; height:25px; background:url(../img/top/ttl_tw.png) no-repeat 0 0; margin:.5em auto; display: block;}

footer {background: url(../img/bk_ft.png) repeat-x 0 0; height: 250px;}
#gotop {position: fixed; bottom: 20px; right: 20px;}
#gotop span { display:none;}
#gotop a {display:block; width:84px; height: 84px; background:url(../img/gotop.png) no-repeat 0 0;}
#contents .relative {overflow:visible;}

#btnBn div{margin:15px 20px 0 0;}
#btnBn div:nth-child(3n) {margin:15px 0 0 0;}
#btnBn .bn_line{display:none;}

#cmt article .text {width:590px; max-height: 999999px;}
#chart .diagram{ width:845px; height:1692px; margin:0 auto 0;}

#report #bknm li:nth-child(even){margin:0 0 0 0;}
#push {width:900px;}

.belong{font-size:1.5rem; display:block; margin:-.5em 0 0; text-indent:-.5em;}
}

/*//////smp//////*/
@media all and (max-width: 767px) {
body,p { font-size: 1.35rem;}
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;}
.inner  {width:90%;}

#top header {height:auto; /*padding:2em 0;*/}
/*#top h1{width:100%; height:0; padding:35% 0 0; background-size: contain;}*/
#top h1{width:100%; height:0; padding:61.2244% 0 0; background-size: contain;}
#top header h1 img,header a img,.ph_cut img,.ph_cut2 img,.ph_cut_l img,.bn_mov img,#ubukata .scene img {position:absolute;left:0;top:0; width:100%; height:100%;}

header {height:auto;}
header a.logo {width:93%; height:0; padding:20% 0 0; background-size: contain; position: relative;}

#menu ul {width:100%; text-align:center; font-size:0;}
#menu li {font-size: 14px; float:left; border-top:1px solid rgba(255,255,255,0.2);
background: -webkit-gradient(linear,left bottom,left top,from(rgba(89,86,98,0.5)),to(rgba(173,123,151,0.2)));}
/*#menu li:first-letter {font-size: 130%; line-height: 1; color:#e4007f;}
#menu li.btn1{width:35%;}
#menu li.btn2{width:35%;}
#menu li.btn3{width:30%;}
#menu li.btn4{width:40%;}
#menu li.btn5{width:30%;}
#menu li.btn6{width:30%;}*/
/*#menu li.btn1,#menu li.btn2,#menu li.btn3{border-bottom:1px solid rgba(255,255,255,0.2);}*/
#menu li.btn2,#menu li.btn5{border-left:1px solid rgba(255,255,255,0.2); border-right:1px solid rgba(255,255,255,0.2);}
#menu ul li {width : 33.33333%;
width: -webkit-calc(100% / 3) ;
width: calc(100% / 3) ;}
#menu li a {height:auto; color:#fff; display: block; width:100%; margin:0; background:none; padding:0.9em 0;}
#menu li span.lss {letter-spacing: -1px; font-size: 98%;}

#mov,#contents,footer .inner,.spcts,#cts2nd,#cts1st {width:95%; margin:0 auto;}
#mov .spot {width:100%; float:none; margin:1em 0; height:auto; padding:.8em 0 0; text-align:center; background:-webkit-gradient(linear,left bottom,left top,from(rgba(89,86,98,0.1)),to(rgba(89,86,98,0)));}
#mov .spot h2{width:104px; height:39px; margin:0 auto .1em; background-size: contain;}
#mov p.next{font-size:1.6rem;}

.spcts,#twTL{float:none;}
.bn_repo,.bn_ch,.bn_itr,.bn_cs,.bn_com,.bn_ifm,.bn_odm,.bn_msg,.bn_mov,.bn_conte,.bn_tm,.bn_news,.bn_tw,.bn_repo_s,.bn_mov_s,.bn_serif,.bn_hmln,.bn_free,.bn_odm,.bn_line,.bn_quiz,.bn_hmln_s,.bn_quiz_s,.bn_ubkt,.bn_hayato,.bn_cos{width:49%;}
.bn_ch a,.bn_itr a,.bn_cs a,.bn_com a,.bn_ifm a,.bn_odm a,.bn_msg a,.bn_tm a,.bn_news a,.bn_tw a,.bn_repo_s a,.bn_mov_s a,.bn_serif a,.bn_free a,.bn_odm a,.bn_line a,.bn_quiz a,.bn_hmln_s a,.bn_quiz_s a,.bn_ubkt a,.bn_hmln a,.bn_cos a{width:100%; height:0; padding:45% 0 0; background-size: cover;}
.bn_cs,.bn_com/*,.bn_ubkt,.bn_ifm,.bn_serif,.bn_msg,.bn_quiz_s,.bn_tm,.bn_repo_s,.bn_cos*/ {margin:2% 0 0;}
.bn_repo a{width:100%; height:0; padding:74.5033% 0 0; background-size: contain; }
.bn_conte a,.bn_hayato a{width:100%; height:0; padding:70% 0 0; background-size: cover; }
.bn_conte,.bn_hayato{display:none; }
#cts2nd div,#cts1st div{margin:2% 0 0;}
#cts1st div:nth-child(odd){margin:2% 2% 0 0;}
#cts2nd div:nth-child(odd){margin:2% 2% 0 0;}
.bn_quiz a{background-image: url(../img/top/bn_quiz.png);}
.bn_hmln a{background-image: url(../img/top/bn_hmln.png);}
#cts2nd .bn_subs,.bn_odm{display:none;}
.bn_mov{margin:1em 0 0; height:auto;}
.bn_repo span{line-height:1; padding:0 6% 6%; font-size:1.2rem;}
.bn_ifm span,.bn_news span{line-height:1; padding:.2em; font-size:1rem;}
.bn_repo_s span{line-height:1; padding:0 0 3%; font-size:1.1rem;}
.bn_mov span.thum a {width:80%; height:0; padding:44.9275% 0 0; background-size: contain; position:relative;}
.bn_mov p{text-align:center; padding:.2em 0;}

#twTL{display:none;}
#twTL_sp {width:300px; margin:3em auto 0; height:300px; padding:0; overflow:hidden; box-shadow:0 0 10px rgba(80,76,76,0.4);}
#twTL_sp p{text-align:center; font-size:2.2rem; text-shadow:1px 1px 0 #fff; letter-spacing: 2px; padding:.2em 0;}
#twTL_sp p:first-letter {color:#e4007f;}

footer {background: url(../img/bk_ft.png) repeat-x 0 bottom; padding:0 0 2em; margin:3em auto 0;}
footer p {font-size:1.3rem;}
footer .sns { padding:2em 0 0; text-align:center;}
#rect {margin:0 auto; float:none;}
#gotop {position: fixed; bottom: 0; left:0; width:100%; text-align:center; font-size:1.5rem; letter-spacing:.5em;}
#gotop a {width:100%; height: 60px; display:block; line-height:60px; font-weight:bold;
background: -moz-linear-gradient(bottom,#fff,rgba(225,255,255,0.1));
background: -webkit-gradient(linear,left bottom,left top,from(#fff),to(rgba(225,255,255,0.1)));}
#gotop a:hover,#gotop a:visited,#gotop a:active {color:#e4007f;}

/*------------------　2nd　------------------ */
#detail{width:100%; box-shadow:0 0 10px rgba(80,76,76,0.4); margin:2em auto; padding:1em 0 3em;}
#detail h1{width:100%; height:0; padding:23.9583% 0 0;}
#detail p {padding:1em 2em; line-height:1.4;}
.ph_cut {width:90%; height:0; padding:59.85% 0 0; position: relative;}
.ph_cut_l {width:60%; height:0; padding:90.225% 0 0; position: relative;}
#btnBn{width:95%; margin:1em auto 0;}
#btnBn div{margin:2% 0 0 0;}
#btnBn div:nth-child(odd){margin:2% 2% 0 0;}

#bknm{width:100%; margin:2em auto;}
#bknm h3{font-size:2.2rem; padding:0 .3em .1em;}

/*intro*/
#intro h2{width:80%; height:0; padding:16.9117% 0 0; background-size: contain; margin:0 auto;}
#intro h3{width:85%; height:0; padding:48.3573% 0 0; background-size: contain; margin:1em auto;}
#intro h4{padding:2em 2em 0; text-align:left; }

#theme h2{ font-size: 1.8rem; padding:0 1em;}

#promo h2 {padding:.3em 0;}
#promo{padding:0 0 .5em; background:none;}
#promo p{font-size:1.3rem; line-height:1.5em; padding:0 0 .8em;}
#promo p.add {font-size:1rem !important;}
#promo h3,#info article h2 { font-size: 1.65rem; line-height:1.5em; padding:.5em 0 0;}
#promo h3 { font-size: 1.4rem;}

#info article:first-child {margin:0 0 3.5em;}
#info article p{font-size:1.25rem; line-height:1.5em; padding:1em 0;}
#info .novel1{width:220px; height:332px; padding:0;}
#info .ishop{width:250px; height:177px; padding:0; margin:0 auto 2em;}
#info .ishop2{width:250px; height:354px; padding:0;}
#info .ishop3{width:250px; height:218px; padding:0;}
#info .pre1,#info .ost{width:250px; height:250px; padding:0;}
#info .line1{width:250px; height:189px; padding:0;}
#info .lalaport{width:250px; height:346px; padding:0;}
#info .dvd{width:250px; height:196px; padding:0;}
#info .pre2{width:250px; height:180px; padding:0;}

#story h2 span{font-size:2.3rem;}
#story h3{font-size:2rem;}
#story .ph_cut {width:100%; height:0; padding:66.5% 0 0; position: relative;}
#story .ph_area{margin:.5em auto 2em;}
#story p.fp-causion{text-align:center; font-size:70%; line-height:1.5; padding:0 0 10px 1em !important; text-indent: -1em;}
#sentence p {padding:0 0 1em;}
#mov_fp{width:90%; height:auto; box-shadow:none; margin:.5em auto 1em;}
.tbs-player{background-size: cover !important;}
#story #mov{width:100%; padding:.5em 0 .5em; margin:1em 0 0;}
#story #trailer,#commov {width:90%; position: relative; padding: 50.7% 0 0; height: 0; overflow: hidden; margin:.5em auto 1em;}
#story #trailer iframe,#commov iframe,#mainmov iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
#story #bknm ul {margin:1em auto; width:90%; padding:0 0 1em;}
#story #bknm li{float:left; width:48%; margin:0 4% 4% 0;}
#story #bknm li:nth-child(even) {margin:0 0 4% 0;}
#story #bknm li a {height:80px; }
#story #bknm li span {line-height: 80px; font-size:1.25rem;}

#cmt article h2{width:200px; height:248px; margin:0 auto 1em; float:none;}
#cmt h3{font-size:1.7rem; margin:0 0 .8em;}
#cmt h4{font-size:1.5rem;}
#cmt article {margin:0 auto 2.5em; padding:0 1.5em; width:95%; border-bottom:1px solid rgba(255,255,255,0.9);
background:-webkit-gradient(linear,left bottom,left center,from(rgba(89,86,98,0.1)),to(rgba(89,86,98,0)));}
#commov {margin:.5em auto 2em;}

#conte h1,#hameln h1,#ubukata h1,#yumiko h1{width:100%; height:0; padding:45.8333% 0 0; background-size: contain; margin:.5em 0;}
#conte h2{font-size:1.5rem; padding:0;}
#conte h2,#conte #commov {display:none;}
#conte h3{margin:1em 2em 0 1.5em;}
#conte article p {font-size:95%;}
#itvmov ul {margin:2em auto 0;}
#itvmov ul li {border-bottom:1px solid rgba(89,86,98,0.3); padding:0 0 2em;}
#itvmov ul li:last-child{border:0; padding:0; margin:0 0 1.5em;}
#itvmov ul li span { float:none; width:250px; height:141px; margin:0 auto 1em;}

#hameln article,#hameln #bknm {width:85%;}
#hameln h2 {padding:.25em 0;}
#hameln .outline {padding:1em 1.5em 5em; background:url(../img/hameln/cn.png) no-repeat right 1em bottom; background-size: 20%;}
#hameln #imgcut {width:100%; height:0; padding:21.875% 0 0; background-size: contain; margin:2em 0 0;}

#ubukata .scene{width:90%; height:0; padding:63.072% 0 0; background-size: contain; position: relative; margin:2.5em auto .5em;}
#ubukata #detail .f140{line-height: 1.5; display:inline-block; padding:0 0 .3em; font-size:1.6rem;}
#ubukata #bknm ul li {margin:0 4% 4% 0; width:48%; }
#ubukata #bknm li:nth-child(even) {margin:0 0 4% 0;}
#ubukata #bknm ul li a {width:100%; height:0; padding:70.08% 0 0;}

#yumiko #detail{padding:0 0 3em;}
#yumiko #detail ul{margin:2em auto 0;}
#yumiko #detail ul li p{padding:2em 1.5em 1.5em; font-size:1.1rem;}
#yumiko #detail ul li span{width:40px; height:40px; line-height: 40px; font-size: 2.2rem;}

#hayato h2{padding:0; font-size:1.8rem;}
#mainmov{width:90%; position: relative; padding: 50.7% 0 0; height: 0; overflow: hidden; margin:.5em auto 1em;}
#spmov ul {margin:3em auto 1em;}
#spmov ul li {width:49%; height:auto; margin:0 2% 2% 0; float:left;}
#spmov ul li img{position: absolute; top: 0; left: 0;}
#spmov ul li a{display:block; width:100%; padding:56.25% 0 0;}
#spmov ul li:nth-child(even) {margin:0 0 0 0;}

#present h2{padding:0 1em; font-size:1.5rem;}
#present .ph_pre{width:85%; height:0; padding:38.4416% 0 0; background-size: contain;}
#present .ph_pre2{width:90%; height:0; padding:32.8235% 0 0; background-size: contain; margin:0 auto 2em;}
#present .que{margin:2em auto;}
#present .que p {padding:.5em;}
#present .que p.f120 {font-size:1.4rem;}
#present .ans p{font-size:1.25rem;}

#interview h2{font-size:1.45rem; margin:2em 0 0; padding:.1em 0 .1em .5em;}
#interview .ph_s,#interview .ph_s2{float:none;}
#interview .ph_s{width:80%; padding:52% 0 0;}
#interview .ph_s2{width:55%; padding:76% 0 0;}
#interview article .floatL,#interview article .floatR{margin:1em auto 0;}
#interview article p{font-size:1.3rem;}
#interview #bknm ul {margin:1.5em auto; width:90%; padding:0 0 1em;}
#interview #bknm li{float:left; width:48%; margin:0 4% 4% 0; padding:30.1255% 0 0; background-size: cover; background-repeat: no-repeat; background-position: right top;}
#interview #bknm li:nth-child(even) {margin:0 0 4% 0;}
#interview #bknm li a {height:100%}
#interview #bknm li span {font-size:1.25rem;}
#interview #bknm li.vol1 {background-image:url(../img/itv/ttl1.jpg);}
#interview #bknm li.vol2 {background-image:url(../img/itv/ttl2.jpg);}

#serif h2 {width:160px; height:160px; margin:-3em auto 0; background-size: contain;}
#serif h3 {padding:1em 1em .5em; font-size:1.8rem; line-height:1.4em;}
#serif .odai {margin:6em auto 0; width:80%; padding:0 .5em}
#serif .odai p{padding:0 .5em .5em;}
#serif #bknm {width:90%; margin:1.5em auto 0;}
#serif #bknm ul li {margin:0 6px 0 0; width:75px; height:75px;}
#serif #bknm ul li a {width:100%; height:100%;}

/*#cast{width:85%; height:0; padding:150% 0 0; margin:.5em auto 2.5em; background:url(../img/cast.png) no-repeat right 0; background-size: contain;}*/
#cast,#staff{width:98%; line-height:1.4em; font-size:1.35rem;}
#caststaff h2{font-size:1.8rem; margin:0; padding:0 0 .5em;}
#caststaff h3{font-size:1.35rem;}
#staff ul,#cast ul {padding:.5em .1em;}
#staff ul li,#cast ul li {padding:.5em .1em;}
#cast ul li.pic{width:48%;}
#cast ul li.name{width:50%;}
#staff ul li.pic{width:41%;}
#staff ul li.name{width:57%;}
.belong{letter-spacing:0; font-size:10px; margin:-.15em 0 0;
-webkit-margin-start: -1.5em;
-webkit-transform:scale(0.9);
display:block;}
.subcap {font-size:1rem;}

#chart .diagram { width:90%; background-size: cover; height:0; padding:180.213% 0 0; overflow:hidden; margin:0 auto;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}

/*#report h1,*/#present h1,#serif h1,#interview h1,#hayato h1{width:100%; height:0; padding:31.25% 0 0; background-size: contain; margin:.5em 0 1em;}
#report h2,#form h2{font-size:1.65rem; }
#report article p.cap span { font-size:1.2rem;}
#report #bknm ul {width:98%; margin:0 auto;}
#report #bknm li{width:100%; line-height: 1.4em; margin:0 0 .1em;}
#report #bknm li a{height:55px;}
#report #bknm li span.epi{width:15%;line-height: 55px;}
#report #prevnext {margin:1em 0 0;}

#form h1{width:241px; height:44px; margin:1em auto 0;}
#form .inner{ margin:0 auto 0; padding:1em 0 0; background: none; box-shadow:none; width:90%;}
#msg p.notice { text-align:left !important; margin:0 0 5px; font-size:80%;}
#form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {width:80%; font-size:1.8rem;}
#prevnext { padding:0; margin:0;}
#prevnext ul li { font-size:2rem;}
#msg label {width: 98%; margin:10px auto;}
#msg select#backnum{font-size:90%;}

a.btn_i {margin:0 0 .5em;}
}

@media all and (max-width: 320px) {
body,p { font-size: 1.3rem;}
#menu li { font-size: 12px;}
.bn_mov p{text-align:center; padding:.1em 0;}
.belong{font-size:1rem;}
#staff,#staff h3{font-size:1.2rem;}
#serif #bknm ul li {margin:0 5px 0 0; width:65px; height:65px;}
#guest .glist{padding:0 1.2em;}
#report #bknm li{font-size:1.2rem;}
#itvmov ul li span,#story #bknm ul li span {font-size:1rem;}
#form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {width:85%; font-size:1.7rem;}
#form h2{font-size:1.5rem;}
}