/*/////////////////////////////////////////////////////////////////////////
default_CSS
/////////////////////////////////////////////////////////////////////////*/
body { text-align:center; font-size:100%; font-family:"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif; -webkit-text-size-adjust: 100%;}
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;}
.bold { font-weight:bold;}
.normal { font-weight:normal;}
/*画像保護用*/
.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.7rem; }
.f160 { font-size:160%;}
.f140 { font-size:140%;}
.f130 { font-size:130%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f90 { font-size:90%;}
.f85 { line-height:normal; font-size:85% !important}
.fcyel{color:#f9ff5e;}
.fcpnk{color:#ffaff5;}
.fcbul{color:#82dafa;}
/*link*/
a { text-decoration:none; color:#fff;}
a:hover { text-decoration:underline; color:#fff;}
#menu a,#gotop a,#cts1 a,#cts3 a,#cts4 a,#prevnext ul li a,#uptxt a,#chartnavi ul li a,#bknm li a,#show ul li span a,#spcts a,.ishop a,a.btn_i {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;
}
#gotop a:hover,#prevnext ul li a:hover,#chartnavi ul li a:hover,.bn_th a:hover,#cts3 a:hover,.lines a:hover,.odm a:hover,.glr a:hover,#spcts a:hover,.ishop a:hover,a.btn_i: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;}

/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {background: #d83281; color:#fff; letter-spacing: 1px;}
#con-body {background-color:transparent;}
#top #container { max-height: 100%;}
#top header h1 { background: url(../img/top/main.jpg) no-repeat 0 0; width:980px; height:710px; margin:1em auto 0; padding:0; position: relative;}
/*#main {width:980px; height:660px; margin:0 auto; background: url(../img/main.jpg) no-repeat center center; position: relative;}*/
#top header h1 img,#main img,#highlight img,#show ul li img {position:absolute;left:0;top:0; width:100%; height:100%;}

#contents {width:970px; margin:3em auto 2em; text-align:left;}
#trailer{width:600px; height:338px; margin:3em auto 1.5em; box-shadow:3px 4px #f9ff5e;}

#cts1{width:632px; /*background:url(../img/top/box.png) no-repeat right bottom;*/}
#contents h2{width:155px; height:42px; background:url(../img/top/update.png) no-repeat 0 0;}
#update {border:2px solid #f9ff5e; border-radius:10px; box-shadow:3px 4px #f9ff5e; padding:1em; margin:0 0 3em;}
#update dl{width: 100%; height: 120px; overflow-y: auto;}
#update dt{color:#f9ff5e; float: left; clear: left; width: 100px;padding:.5em 0; font-family:Avenir,"Open Sans","Helvetica Neue";}
#update dd{padding:.45em 0 .5em 105px;border-bottom:1px dashed #f9ff5e; margin:0 8px 0 0;}
#update dd:last-child{border:none;}
#uptxt a{background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #f9ff5e 50%);
	background-position: 0 0;
	background-size: 200% auto;}
#uptxt a:hover{background-position: -100% 0;color: #d83281;}
#update dl::-webkit-scrollbar{width: 5px; background: none;}
#update dl::-webkit-scrollbar-thumb{background: #f9ff5e; border-radius:10px;}

#cts1 .spot{width:300px; border:2px solid #f9ff5e; border-radius:10px; box-shadow:3px 4px #f9ff5e;}
#cts1 .spot h2{width:156px; height:35px; background:url(../img/top/story.png) no-repeat 0 0; margin:.8em auto .8em;}
#cts1 .thum {width:265px; height:149px; background:url(../img/top/spot.jpg) no-repeat 0 0; margin:0 auto; background-size: contain; display:block;}
#cts1 .epno{display:block; margin:-.8em auto .5em; width:30%; background:#f9ff5e; text-align:center; color:#d83281;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#cts1 p.next{color:#f9ff5e; padding:0; font-size:2rem; text-align:center; /*font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;*/}
#cts2{margin:1.5em 0 0;}
#cts3{margin:0 auto 1.5em;}

.bn_ch a,.bn_com a,.bn_th a,.bn_oa a,.bn_kiyo a,.bn_cos a,.bn_repo a,.bn_st a {width:300px; height:138px; border:2px solid #f9ff5e; border-radius:10px; box-shadow:3px 4px #f9ff5e; display:block; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image:url(../img/top/chart.png);}
.bn_com a {background-image:url(../img/top/comment.png);}
.bn_th a {background-image:url(../img/top/theme.jpg);}
.bn_oa a {background-image:url(../img/top/onair.png);}
.bn_st a {background-image:url(../img/top/bn_story.png);}
.bn_kiyo a {background-image:url(../img/top/kiyohara.jpg); height:160px;}
.bn_cos a {background-image:url(../img/top/cos.jpg); height:160px;}
.bn_repo a {background-image:url(../img/top/repo.jpg); height:160px;}

#twTL,#twTL_sp {width:305px; height:468px; border:2px solid #111; border-radius:10px; margin:0 7px 2em 0; box-shadow:3px 4px #111;}
#twTL h3,#twTL_sp h3{width:162px; height:37px; background:url(../img/top/tw.png) no-repeat 0 0; margin:.5em auto; display: block;}

#insta a,.lines a,.ytb a,.glr a,.free a,.odm a,.ishop a{border:2px solid #111; display:block; border-radius:10px;  margin:0 ; box-shadow:3px 4px #111; width:300px; height:140px; background-size: cover; background-repeat: no-repeat; background-position: center center;}
#insta a{background-image:url(../img/insta.png); background-size:90%;}
.lines a{background-image:url(../img/top/line.jpg);}
.ytb a{background-image:url(../img/top/ytb.png);}
.glr a{background-image:url(../img/top/gl.jpg);}
.free a{background-image:url(../img/top/tbsfree.png);}
.odm a{background-image:url(../img/top/odm.png);}
.ishop a{background-image:url(../img/top/ishop.jpg);}
#insta a:hover,.bn_intro a:hover,.bn_com a:hover,.bn_ch a:hover,.bn_oa a:hover,.ytb a:hover,.bn_st a:hover,.free a:hover{-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);}

/*footer*/
footer {margin:0 auto; padding:0 0 20px; width:960px; text-align:left;}
footer .sns { padding:2em 0 0;}
footer p {padding:20px 0; line-height:1.5; font-size:90%;}
#rect {width:300px; height: 250px;}

.announce{color:#f9ff5e; font-weight:bold; font-size:130%; padding:0 0 1em;}


/*------------------　2nd　------------------ */
header a.logo {margin:0 auto; background: url(../img/logo.png) no-repeat center center; display:block;}
#detail{width:960px; margin:3em auto 0; padding:2em 0 3em; text-align:left;}
.ph_cut {width:600px; height:399px; margin:1.5em auto; background-size: contain; background-repeat: no-repeat; background-position: center center; box-shadow:3px 4px #f9ff5e;}
.ph_cut_l {width:399px; height:600px; margin:1.5em auto; background-size: contain; background-repeat: no-repeat; background-position: center top; box-shadow:3px 4px #f9ff5e;}

/*intro*/
#intro h1,#story h1,#info h1,#caststaff h1,#comment h1,#chart h1,#oatable h1,#theme h1,#gallery h1{width:249px; height:55px; background-size: contain; margin:0 auto .5em; background-repeat: no-repeat; background-position: 0 0; background-image:url(../img/ttl_intro.png);}
#highlight h2{width:719px; height:235px; margin:1em auto; background: url(../img/h2.png) no-repeat 0 0;}
#highlight{padding:2em 0 0;}
#highlight h3{text-align:center; padding:3em 0 1em;}
#highlight #ph1,#highlight #ph2,#highlight #ph3{position: relative; box-shadow:3px 4px #f9ff5e;}
#highlight #ph1{width:560px; height:389px; margin:0 auto 1.5em; background: url(../img/ph1.jpg) no-repeat 0 0;}
#highlight #ph2{width:230px; height:340px; margin:2em auto 1.5em; background: url(../img/ph2.jpg) no-repeat 0 0;}
#highlight #ph3{width:787px; height:264px; margin:1.5em auto 5em; background: url(../img/ph3.jpg) no-repeat 0 0;}

/*story*/
#story h1{background-image:url(../img/ttl_story.png); margin:0 auto 1.5em;}
#story h2{background:#d83281; display:inline-block; padding:.1em .2em;}
#story h2,#bknm h3{font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;}
#story #trailer{width:600px; height:338px; margin:1em auto 2.5em; box-shadow:3px 4px #f9ff5e;}
#story .episode{background: #fff; padding:3em 2em; box-shadow:0 5px #f9ff5e;}
#story .episode p {color:#111; padding:0 .5em 1em;}
#story .episode a { text-decoration:none; color:#d83281;}
#story .episode a:hover { text-decoration:underline; color:#d83281;}
.jagged-border {background: #fff; position: relative; width: 100%;}
.jagged-border:before {
  content: "";
  display: block; position: absolute; top: -10px; width: 100%; height: 10px;
background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
background-size: 20px 40px;
}
#story .ph_area{margin:1.5em auto 3em; width:100%;}
#story .ph_s{width:49%; padding:32.585% 0 0; background-size: cover; 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{margin:4em auto 0;}
#story #bknm ul {margin:1em auto 0; width:100%; padding:0 0 1em;}
#story #bknm h3{width:100%; background:#fff;color:#d83281; border:1px solid #d83281; text-align:center;
box-shadow:3px 4px #d83281; padding:.5em; margin:2em 0 1em;}
#story #bknm li,#gallery #bknm li{display:inline-block; width:210px; margin:0 0 .7em .4em; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center top;}
#story #bknm li a,#gallery #bknm li a {color:#d83281; display:block; background:rgba(249,255,94,0.6); width:100%; height:120px; border:1px solid #d83281; box-shadow:3px 3px #d83281;}
#story #bknm li a:hover{background:rgba(249,255,94,0); color:#f9ff5e; /*filter: saturate(250%);*/ text-decoration:none;}
#story #bknm li span,#gallery #bknm li span {line-height: 120px;}
#story #bknm li span.epi,#gallery #bknm li span.epi {background:rgba(228,0,127,0.8);  padding:.2em; margin:0 .3em 0 0; color:#fff;}
#story #bknm li span.date {padding:.2em; }

/*info*/
#promo {padding:1em 1em .5em; margin:2em auto;}
#promo h2 {color:#fff; text-align:center; letter-spacing:.3em; padding:.4em 0; margin:0 0 1em; font-weight:bold; border:2px dotted #fff;}
#promo h3 {font-size:2rem; padding:.5em 0 .8em; color:#f9ff5e;}
#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.35rem !important;  border:none !important;}

#info h1{background-image:url(../img/ttl_info.png);}
#info span.pdate {padding:2px 3px; color:#d83281; background: #f9ff5e; display:inline-block;}
#info span.date {padding:2px 3px; color:#fff; font-size: 110%; background: #111; display:inline-block;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#info article h2,#show h2 {color:#d83281; margin:.2em 0 1em;
	position: relative;
	padding: .3em .7em;
	background-color: #f9ff5e; border-radius: 20px;
}
#info article h2::after,#show h2::after {
	position: absolute;
	top: 100%;
	left: 5%;
	content: '';
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-top: 12px solid #f9ff5e;
}
#info article,#report article{padding:2em 0;}
#info article p{padding:0 0 1em;}
#info article a{color:#f9ff5e;}
#info .aricon{width:120px; height:120px; background-image:url(../img/info/aricon.png); margin:1.5em 0 .5em; box-shadow:none;}
#info .eva{background-image:url(../img/info/eva.jpg); }
#info .ts1,#theme .ts1{background-image:url(../img/info/ts1.jpg); }
#info .ts2{background-image:url(../img/info/ts2.jpg); }
#info .stamp1{width:372px; height:850px; background-image:url(../img/info/stamp.jpg); box-shadow:none;}
/*#info .stamp1{width:640px; height:132px; background-image:url(../img/info/stamp1.jpg); box-shadow:none;}*/
#info .stamp2{width:773px; height:130px; background-image:url(../img/info/stamp2.jpg); box-shadow:none;}
#info .ivan{background-image:url(../img/info/ivan.jpg);}
#info .mario1{background-image:url(../img/info/mario1.jpg);}
#info .mario2{background-image:url(../img/info/mario2.jpg);}
#info .wakab{background-image:url(../img/info/wakab.jpg);}
#info .ost{width:400px; height:400px; background-image:url(../img/info/ost.jpg);}
#info .dvd{width:550px; height:449px; background-image:url(../img/info/dvd.jpg); box-shadow:none;}

/*kiyohara*/
#mov_fp{width:600px; height:338px; margin:0 auto;}
#kiyohara h1{width:980px; height:340px; background:url(../img/kiyohara/head.jpg) no-repeat 0 0; margin:2em auto 0;}
#kiyohara h2{font-size:2.6rem; font-weight:bold; text-align:center; display: inline-block; letter-spacing:.2em; color:#fff; margin:0 auto; width:100%;}
#kiyohara h2 span{background:#46aaf2; padding:.3em .5em; display: inline-block;}
#kiyohara #detail{margin:1.5em auto 0;}
#mainmov {width:610px; height:348px; margin:.5em auto 3em; border:5px solid #46aaf2;}
#spmov ul {width:100%; margin:3.5em auto 3em; /*text-align:center;*/}
#spmov ul li {width:270px; height:152px; margin:0 .5em 50px; background-size: contain; background-repeat: no-repeat; background-position: 0 0; position: relative; display: inline-block; text-align:center; }
#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:#46aaf2; text-align:center; padding:.3em .8em; margin:-.5em auto 0;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

/*report*/
#report h1{width:980px; height:340px; background:url(../img/repo/head.jpg) no-repeat 0 0; margin:0 auto .5em;}
#report h2{color:#409c64; padding:.5em; border: 2px solid #409c64; border-radius: .5em; width:92%; margin:0 auto .5em; text-align:center;}
#report #detail,#costume #detail{width:980px; margin:3em auto; padding:0 0 3em; text-align:left; background:#fff;}
#report #detail p {padding:0 2.5em 1em; color:#111;}
#report span.date {padding:2px 3px; color:#fff; font-size: 110%; background: #409c64; display:inline-block; margin:0 0 1.5em 2em;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#report #bknm,#costume #bknm{margin:0 auto; width:90%;}
#report #bknm ul {margin:1em auto 0; width:100%; padding:0 0 1em; }
#report #bknm h3{width:100%; background:#fff;color:#409c64; border:1px solid #409c64; text-align:center;
box-shadow:3px 4px #409c64; padding:.5em; margin:2em 0 1em;}
#report #bknm li{display:inline-block; margin:0 0 .7em .4em; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center top;}
#report #bknm li a {color:#409c64; display:block; border:1px solid #409c64; width:90px; height:90px; border-radius:50%; line-height:90px;}
#report #bknm li a:hover{color:#fff; background: #409c64;}

/*costume*/
#costume h1{width:980px; height:340px; background:url(../img/cos/head.jpg) no-repeat 0 0; margin:0 auto 1em;}
#costume h2{color:#fff; border-radius: 50%; width:90px; height:90px; margin:1em auto .0; text-align:center; line-height:90px; background: #fc2ca9;}
#costume article h3{color:#fc2ca9; text-align:center; background:rgba(252,44,169,0.1); width:90%; margin:-2em auto 2em; padding:2.5em 0 1em;}
#costume #bknm h3{width:100%; background:#fff;color:#fc2ca9; border:1px solid #fc2ca9;
box-shadow:3px 4px #fc2ca9; padding:.5em; margin:3em 0 1em;}
#costume #bknm li{display:inline-block; margin:0 0 .7em .4em; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center top; width:90px; height:90px; border-radius:50%; line-height:90px;}
#costume #bknm li a {color:#fff; display:block; background:rgba(252,44,169,0.6); width:90px; height:90px; border-radius:50%;}
#costume #bknm li a:hover{background:rgba(252,44,169,0);}

/*gallery*/
#gallery h1{width:291px; background-image:url(../img/gallery/ttl.png); margin:0 auto 2em;}
#show {margin:0 0 5em;}
#show h2{text-align:center; padding: .3em 0;}
#show h2::after{left:49%;}
#show ul {font-size:0; width:100%;}
#show ul li { display:inline-block; margin:0 0 -1px -1px;}
#show ul li span {background-size: 100%; background-repeat: no-repeat; background-position: center center;}
#show ul li span.lazy {position:relative; display:block;}
#show ul li span a {width:240px; height:160px; display:block;}
#show ul li span a:hover{ background:rgba(249,255,94,0.5);}
#gallery #bknm ul {margin:1em auto 0; width:100%; padding:0 0 1em;}
#gallery #bknm h3{width:100%; color:#fff; border:1px solid #fff; padding:.5em; margin:2em 0 1em; text-align:center;}
#gallery #bknm li a {border:none; background:rgba(249,255,94,0);}
#gallery #bknm li a:hover{ background:rgba(249,255,94,0.5);}
#gallery #bknm li span.epi {padding:0 .5em; margin:0; font-size:2rem; display:inline-block; transform: skew(-20deg);}
#gallery .lbg-pics{background-color:#d83281; box-shadow:none !important;}
#gallery .ep1 {background-image:url(../img/gallery/ep1/ep1_1.jpg);}
#gallery .ep2 {background-image:url(../img/gallery/ep2/ep2_1.jpg);}
#gallery .ep3 {background-image:url(../img/gallery/ep3/ep3_1.jpg);}
#gallery .ep4 {background-image:url(../img/gallery/ep4/ep4_1.jpg);}
#gallery .ep5 {background-image:url(../img/gallery/ep5/ep5_1.jpg);}
#gallery .ep6 {background-image:url(../img/gallery/ep6/ep6_1.jpg);}
#gallery .ep7 {background-image:url(../img/gallery/ep7/ep7_1.jpg);}
#gallery .ep8 {background-image:url(../img/gallery/ep8/ep8_1.jpg);}
#gallery .ep9 {background-image:url(../img/gallery/ep9/ep9_1.jpg);}
#gallery .ep10 {background-image:url(../img/gallery/ep10/ep10_1.jpg);}

/*caststaff*/
#caststaff h1{width:225px; height:54px; background-image:url(../img/ttl_cast.png); margin:0 auto 1em;}
#caststaff h1.staff{width:229px; height:52px; background-image:url(../img/ttl_staff.png);}
#caststaff ul{display:table; width:100%; margin:0 auto 1em;}
#caststaff ul li{display:table-cell; width:50%; text-align:left; vertical-align:top; font-size: 2.2rem; line-height:1.7;}
#caststaff ul li.pos{text-align:right; }
#caststaff div.staff{margin:5em 0 0;}
#caststaff .label{font-size:1.4rem;}

/*comment*/
#comment h1{background-image:url(../img/ttl_cm.png); margin:0 auto 1em;}
.note {color:#111;background:rgba(255,255,255,0.9); border:2px solid #111; padding:1em; box-shadow:4px 5px #111; margin:0 0 1em;}
.note p{font-size:100%; padding:0 .5em .5em;}
.note h4{color:#111; padding:0 0 .3em; margin:0 0 .8em; border-bottom:1px dashed #111;}

/*chart*/
#chart h1{width:193px; height:54px; background-image:url(../img/ttl_ch.png); margin:0 auto 2em;}
#charea {background: #fff; padding:3em 0;}
#chart .diagram { background: url(../img/chart/chart.jpg) no-repeat 0 0; position:relative; background-size: cover; box-shadow:4px 5px #f9ff5e;}
#chart .diagram ul,#chart .diagram ul li {position: absolute;}
#chart .diagram ul li a { display: block; background:rgba(50,175,219,0.2); text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap; border-radius:50%;}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:222px; height:260px; }
#chart .diagram ul li.sz-m a img {width:212px; height:246px; }
#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.remi { left: 306px; top:311px;}
#chart ul li.kosuke { left: 83px; top:510px;}
#chart ul li.sumire { left: 539px; top:510px;}
#chart ul li.hayato { left: 312px; top:670px;}
#chart ul li.yuu { left: 316px; top:31px;}
#chart ul li.miki { left: 539px; top:825px;}
#chart ul li.akemi { left: 582px; top:31px;}
#chart ul li.sho { left: 83px; top:825px;}
#chart ul li.takami { left: 50px; top:31px;}

/*oa*/
#oatable h1{width:295px; height:55px; background-image:url(../img/ttl_oa.png); margin:0 auto 2em;}
#oatable{padding:2em 0 3em;}
#oatable table {text-align:center; border: #fff 1px solid; margin:0 0 1em;
	border-collapse: collapse;
	width: 100%;
	vertical-align: middle;
}
#oatable table th.t_top,#oatable table td.t_line01 {
	border: #fff 1px solid;
	padding: .5em;
}
#oatable .t_top{background-color: #f9ff5e; font-weight:bold; color:#d83281;}

/*theme*/
#theme h1{width:295px; height:55px; background-image:url(../img/ttl_th.png); margin:0 auto 2em;}
#theme h2{color:#f9ff5e;}
#theme h3{width:50%;background:#f9ff5e;color:#d83281;
box-shadow:1px 1px 0 1px #f9ff5e,10px 10px 0 -5px #d83281,10px 10px 0 -4px #f9ff5e;
padding:.5em; margin:2em 0 1em;}
#theme h4{margin:1.5em 0 .5em; color:#f9ff5e; font-size:2.3rem;}
#theme article p{padding:0 0 1em;}
.th_cmt {border: #f9ff5e 2px solid; padding:1em 1.5em !important; border-radius:10px; margin:0 0 1em;}
.th_cmt:first-letter {font-size: 145%; line-height: 1; color:#f9ff5e;}
#theme .jk1{background-image:url(../img/info/jk1.jpg); width:350px; height:344px; margin:1em 0; box-shadow:none;}
#theme .jk2{background-image:url(../img/info/jk2.jpg); width:350px; height:344px; margin:1em 0; box-shadow:none;}

/*msg*/
iframe#iframe {width:100%; border:none; padding:0; margin:1em 0 0;}
#msg #detail .inner{width:90%; margin:2em auto 0;}
#form .inner{ margin:2em auto 0; padding:2em 3em; text-align:left; width:80%;}
#msg h1,#form h1{width:452px; height:53px; 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:#fff; margin:1em 0 .5em;}
#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 #fff; padding:12px 60px; text-decoration:none; color:#fff;}
#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:#CE2C79; color:rgba(255,255,255,0.5); line-height:50px; text-align:center; border-radius:50%;}
#prevnext ul li a {color:#d83281; background:#f9ff5e; display:block; width:50px; height:50px; border-radius:50%; opacity:1;}
#prevnext ul li.prev { float:left; }
#prevnext ul li.next { float:right; }
#msg .notice{padding:0 0 1.5em; font-size:95%; text-align:center;}

/*btn*/
#form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap,#push {font-size:150%; color:#fff; display:block; font-weight:bold; text-align:center; width:70%; padding:.8em; margin:.5em auto 1.5em; border:2px solid #fff; border-radius:10px;}
#form #agree a:hover,#msg #writeBtn a:hover{text-decoration:none}
a.btn_ap {width:50%;}
a.btn_i {color:#fff !important; padding:1em; border:2px solid #fff; border-radius: 5px; margin:.5em 0; display:inline-block;}
#msg #writeBtn a {width:45%; padding:1em 0; margin:.5em auto .5em;}
#form #agree a:hover,#msg #writeBtn a:hover,#intro #commeBtn a:hover {color:#fff;}

/*//////pc//////*/
@media all and (min-width: 768px) {
header a.logo {width:972px; height:110px; margin:3em auto;}
#menu { width:100%; background:#f9ff5e; height:80px;}
#menu ul {width:977px; height:80px; margin:0 auto; background:url(../img/menu.png) no-repeat center center;}
/*#menu ul {width:977px; margin:0 auto; background:url(../img/menu2.png) no-repeat center bottom;}*/
#menu li { height:90px; float:left; padding:0;}
#menu li a { height:80px; display: block; text-indent: 100%; white-space: nowrap; text-decoration:none; overflow: hidden; margin:0 25px 0 0; /*background: rgba(215,125,175,0.5);*/}
#menu li.btn1 a { width:153px;}
#menu li.btn2 a { width:154px;}
#menu li.btn3 a { width:308px;}
#menu li.btn4 a { width:287px; margin:0;}

#cts1 .spot{height:300px;}
.bn_ch a{margin:0 0 1em;}
#cts4{margin:0 0 1.5em;}
.lines a,.free a,.odm a,#insta a{margin:0 0 1.5em 25px;}
#cts3 div{margin:0 25px 0 0;}
#cts3 div:last-child{margin:0;}
#twTL_sp{display:none;}

#gotop {position: fixed; bottom: 0; right: 20px;}
#gotop span { display:none;}
#gotop a {display:block; width:95px; height: 92px; background:url(../img/gotop.png) no-repeat 0 0;}

#story h2{background:#d83281; display:inline-block; padding:.1em .2em;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#chart .diagram{ width:846px; height:1102px; margin:1em auto 3em;}

#spcts {margin:0 0 4em; overflow: hidden; padding:0 0 1em;}
#spcts ul {font-size:0; width:960px; margin:0 auto; text-align:center;}
#spcts ul li { float:left; width:300px; height:160px; margin:0 10px 0; transition: .8s;}
.list-mv{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mvc{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
#spcts .glr{display:none;}
}

/*//////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.45rem; }
.f90 { font-size: 1.2rem;}
#top header h1 { background-size: contain; width:100%; height:0; padding:72.4489% 0 0; margin:.5em auto 0;}
#main {width:95%; height:0; padding:63.9795% 0 0; background-size: contain; margin:.5em auto 2em;}
header a.logo {width:93%; height:0; padding:20% 0 0; background-size: contain; position: relative;}
#top header h1 img,header a img,.ph_cut img,.ph_cut_l img,.diagram img {position:absolute;left:0;top:0; width:100%; height:100%;}
#menu ul {width:100%; text-align:center; font-size:0;}
#menu li {font-size: 14px; width:50%; float:left; margin:0 0 2px;}
#menu li:nth-child(odd){border-right:2px solid #d83281;}
#menu li a {height:auto; color:#d83281; display: block; width:100%; margin:0; padding:0.8em 0; background:#f9ff5e;}
#menu li span.lss {letter-spacing: 0; font-size: 10px; display:block; line-height:0.8;}
footer{width:95%; text-align:center; padding:0 0 50px;}
footer p {font-size:80%;}
#gotop {position: fixed; bottom: 0; left:0; width:100%; text-align:center; font-size:1.5rem; letter-spacing:.5em;}
#gotop a {width:100%; height: 50px; display:block; line-height:50px; font-weight:bold; background:#f9ff5e;}
#gotop a,#gotop a:hover,#gotop a:visited,#gotop a:active {color:#d83281;}
#rect {margin:3em auto 0; float:none;}

#contents {width:90%; margin:2em auto 0;}
#contents h3.story{width:223px; height:66px; background-size: contain;}
#contents h3.comment{width:188px; height:58px; background-size: contain;}
#trailer,#mainmov {width:90%; position: relative; padding: 50.7% 0 0; height: 0; overflow: hidden; margin:1em auto;}
#trailer iframe,#story #trailer iframe,#mainmov iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

#cts1{float:none;width:100%; background:none;margin:0 auto; padding:0 0 1em;}
#contents h2{width:111px; height:30px; background-size: contain;}
#update{width:100%; padding:0; box-shadow:2px 3px #f9ff5e; margin:0 0 1.5em;}
#update dl{width: 95%; margin:.5em auto; height: 100px;}
#update dt{width: 80px;padding:.5em 0; }
#update dd{padding:.5em 0 .5em 82px; font-size:95%; margin:0 5px 0 0;}

#cts1 .spot {width:95%; margin:1em auto 1.5em; height:auto; padding:.8em 0 0; float:none; box-shadow:2px 3px #f9ff5e;}
#cts1 .spot h2{width:125px; height:28px; margin:.2em auto .5em; background-size: contain;}
#cts1 p.next{font-size:1.6rem; padding:0 0 .8em;}

.ctsbtn {width:100%; clear:both;}
#cts2{margin:1em 0 0;}
.bn_ch,.bn_com,.bn_th,.bn_st,.bn_oa,.bn_kiyo,.bn_cos,.bn_repo,#insta,.lines,.ytb,.glr,.free,.odm,.ishop{width:48%;}
.bn_ch{float:left;}
.bn_com{float:right;}
.bn_ch a,.bn_com a,.bn_th a,.bn_oa a,.bn_st a{width:100%; height:0; padding:45% 0 0; background-size: cover; box-shadow:2px 3px #f9ff5e;}
#insta a,.lines a,.ytb a,.glr a,.free a,.odm a,.ishop a{width:100%; height:0; padding:45% 0 0; box-shadow:2px 3px #111;}
.bn_kiyo a,.bn_cos a,.bn_repo a{width:100%; height:0; padding:53.333% 0 0; background-size: cover; box-shadow:2px 3px #f9ff5e;}
/*#cts3 div:nth-child(even){margin:0 0 1em 4%;}*/
#cts4 div:nth-child(even){margin:0 0 1em 4%;}
.bn_kiyo{display:none;}
#top .bn_repo{margin:0 0 1em 4%;}

#twTL{display:none;}
#twTL_sp{width:300px; margin:3em auto 1.5em; height:300px; padding:0; overflow:hidden;}
#twTL_sp h3{width:130px; height:30px; background-size: contain;}

.announce{font-size:110%; padding:0 0 1em;}
/*------------------　2nd　------------------ */
#detail{width:90%; margin:2em auto 0; padding:1em 0 3em;}

.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;}
#intro h1,#story h1,#info h1,#caststaff h1,#comment h1{width:158px; height:35px;}

#highlight h2{width:98%; height:0; padding:32.03% 0 0; background-size: contain; margin:0 auto 1em;}
#highlight #ph1{width:90%; height:0; padding:62.517% 0 0; background-size: contain;}
#highlight #ph2{width:40%; height:0; padding:59.130% 0 0; background-size: contain;}
#highlight #ph3{width:100%; height:0; padding:33.5451% 0 0; background-size: contain;}
#intro #detail{padding:1em 0 0;}

#promo {padding:0; margin:2em auto;}
#promo h2 {padding:.3em 0;}
#promo p{font-size:1.3rem; line-height:1.5em; padding:0 0 1em;}
#promo p.add {font-size:1rem !important;}
#promo h3 { font-size: 1.4rem; line-height:1.5em; padding:.5em 0;}
#info article h2 {padding:.5em; border-radius: 10px; font-size: 1.6rem; line-height:1.3;}
#info span.date,#info span.pdate,#report span.date {font-size: 1.2rem;}
#info article,#report article{padding:1.5em 0;}
#info .aricon{width:90px; height:90px; padding:0;}
#info .stamp1{width:50%; height:0; padding:114.2473% 0 0;}
#info .stamp2{width:297px; height:50px; padding:0;}
#info .ost{width:60%; height:0; padding:60% 0 0;}
#info .dvd{width:80%; height:0; padding:65.3090% 0 0;}

#story h2{width:100%; text-align:center; margin:0 0 0;}
#story #trailer,#kiyohara #mainmov {width:100%; position: relative; padding: 56.25% 0 0; height: 0; overflow: hidden; margin:0 auto 1.5em; box-shadow:none;}
#story .episode{padding:2em;}
#story .episode p {color:#111; padding:0 0 1em;}
#story .ph_area{margin:1em auto 0;}
.jagged-border:before{background-size: 10px 20px;}
#story #bknm{margin:2em auto 0;}
#story #bknm h3{}
#story #bknm li,#gallery #bknm li{float:left; width:47%; margin:0 5% 4% 0;}
#story #bknm li:nth-child(even) {margin:0 0 4% 0;}
#gallery #bknm li:nth-child(even) {margin:0 0 4% 0;}
#story #bknm li a,#gallery #bknm li a {height:80px; }
#story #bknm li span.epi,#gallery #bknm li span.epi {margin:0 .2em 0 0;}
#story #bknm li span {line-height: 80px; font-size:1.1rem;}

#kiyohara h1{width:95%; height:0; padding:32.9591% 0 0; background-size: contain; margin:1em auto 0;}
#mov_fp{width:90%; height:auto; margin:.5em auto 1em;}
.tbs-player{background-size: cover !important;}
#kiyohara h2{padding:0; font-size:1.8rem;}
#kiyohara #detail{margin:1em auto 0;}
#kiyohara #mainmov{margin:.5em auto 2em; border:none;}
#spmov ul {margin:2em 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;}

#report h1,#costume h1{width:100%; height:0; padding:34.6938% 0 0; background-size: cover; margin:1em auto 0;}
#report h2 {width:90%; padding:.3em; font-size: 1.7rem;}
#report #detail,#costume #detail{width:95%; margin:3em auto; padding:0 0 2em; text-align:left; background:#fff;}
#report article{padding:2em 0 0;}
#report #detail p {padding:0 2em 1em;}
#report .ph_cut {width:85%; height:0; padding:56.525% 0 0; position: relative; margin:.5em auto 1.5em;}
/*#report #bknm li:nth-child(even) {margin:0 0 .5em 0;}*/
#report #bknm li a {width:60px; height:60px; line-height:60px;}

#costume h2{width:65px; height:65px; line-height:65px; font-size: 1.7rem;}
#costume h3{margin:-2em auto 1.5em; padding:2.5em 0 1em;}
#costume #bknm li,#costume #bknm li a{width:70px; height:70px; line-height:70px;}
/*#costume #bknm ul {text-align:center;}*/

#gallery h1{width:185px; height:35px; margin:0 auto 1em;}
#show h2 {padding:.35em 0; font-size: 1.8rem; line-height:1.3;}
#show {margin:0 0 3em;}
#show ul li {width : 33.33333%;
width: -webkit-calc(100% / 3) ;
width: calc(100% / 3) ;}
#show ul li span.lazy {width:100%; height:0; padding:66.5625% 0 0;}
#show ul li span a {width:100%; height:100%;}
#gallery #bknm li span.epi {line-height: 80px; font-size:1.6rem;}

.note p{font-size:90%; padding:0 .5em .5em;}
#caststaff ul li{font-size: 1.5rem;}
#caststaff div.staff ul li{font-size: 1.4rem; line-height:1.5;}
#caststaff h1{width:146px; height:35px;}
#caststaff h1.staff{width:154px; height:35px;}
#caststaff .label{font-size:1rem;}

#chart h1{width:125px; height:35px; margin:0 auto 1em;}
#charea {padding:1.5em 0 2em;}
#chart .diagram { width:90%; height:0; margin:0 auto 1em; box-shadow:3px 4px #f9ff5e; padding:117.303% 0 0; overflow:hidden;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}

#oatable h1,#theme h1{width:188px; height:35px; margin:0 auto 1em;}
#oatable{padding:0;}
#oatable table {font-size:1.1rem; line-height:1.5em; border:none;}
#oatable table th.t_top {font-size:1.25rem;}
#oatable table th.local {width:35%;}
#oatable table td.t_line01{padding:0.8em .5em;}
#oatable p.f90{font-size:1rem;}

#theme h2{font-size:1.8rem;}
#theme h3{width:100%;}
#theme h4{margin:1em 0 .5em; color:#f9ff5e; font-size:1.6rem;}
#theme .jk1,#theme .jk2{width:75%; height:0; padding:73.8% 0 0; margin:1em auto;}

#msg #detail{width:100%; margin:0 auto 2em; padding:1em 0 3em;}
#msg h1,#form h1{width:280px; height:33px; margin:1em auto 0;}
#form h2{ font-size: 1.7rem;}
#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:0 auto 10px;}
#msg select#backnum{font-size:90%;}

#spcts{width:90%; margin:0 auto;}
#spcts ul li{float:left;}
#spcts ul li:nth-child(even){margin:0 0 1em 4%;}
#spcts .bn_cos{margin:0 0 1em 0 !important;}
#spcts .bn_repo{margin:0 0 1em 4% !important;}
#spcts .glr a{border:2px solid #f9ff5e; box-shadow:2px 3px #f9ff5e;}

a.btn_i {border:1px solid #fff;}
}
@media all and (max-width: 320px) {
body,p { font-size: 1.3rem;}
#form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {width:85%; font-size:1.7rem;}
#caststaff ul li{font-size: 1.4rem; line-height:1.5;}
#caststaff div.staff ul li{font-size: 1.3rem;}
#oatable table,#oatable table th.t_top {font-size:1rem;}
#report #bknm li a {width:55px; height:55px; line-height:55px;}
.announce{font-size:100%;}
}