/*/////////////////////////////////////////////////////////////////////////
default_CSS
/////////////////////////////////////////////////////////////////////////*/
body { font-family:Futura,"Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ丸ゴ 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;}
/*画像保護用*/
.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%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f90 { font-size:90%;}
.f85 { line-height:normal; font-size:85% !important}
.f80 { line-height:normal; font-size:80% !important}
.styel{color:#fff100;}
.stred{color:#ce4328;}
.stblu{color:#2eaeff;}
.stpnk{color:#ff63a2;}
.stpk2{color:#fc85b5;}
.stor{color:#fea634;}
.stbg{color:#51dac9;}
/*link*/
a { text-decoration:none; color:#1d1d1d;}
a:hover { text-decoration:none; color:#1d1d1d;}
#menu li a,#gotop a,header #logo a,#bknm li a,.bn_tw a,a.btn_prev,a.btn_ap,a.btn_s,a.btn_i,#btnBn a,#prevnext ul li a,.sns img,.update li a,#cts a,.bn_story a,#story #mov ul#movlist li a,.bn_pre a,#minfo 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 li a:hover,#gotop a:hover,header #logo a:hover,#form #agree a:hover,#msg #writeBtn a:hover,#bknm li a:hover,a.btn_ap:hover,a.btn_s:hover,a.btn_i:hover,#btnBn a:hover,#prevnext ul li a:hover,.sns img:hover,#cts a:hover,.bn_story a:hover,#story #mov ul#movlist li a:hover,.bn_pre a:hover,#minfo 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=90); -moz-opacity:0.90; opacity:0.90;}
.no-link2{ pointer-events: none; cursor: default; text-decoration:none; filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
.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);
}


/*media print*/
@media print {
#top h1,
.bn_story a,
#intro .main,
#chart .diagram{display:none !important;}
}


/*/////////////////////////////////////////////////////////////////////////
コンテンツ用CSS／オリジナル設定
/////////////////////////////////////////////////////////////////////////*/
html, body, div#con-body {background:#fffbc6 url(../img/bg.png); color:#3e2730; /*background-attachment: fixed;*/}
#con-body {background-color:transparent;}
#container { max-height: 100%;}
#top h1{width:980px; height:696px; background: url(../img/top/main.jpg?1) no-repeat 0 0; margin:0 auto;}

#mov{width:100%; background-color:rgba(255,245,106,0.6); text-align:center; padding:1em 0 2em;}

#update {width:980px; height:56px; margin:0 auto 1.2em; background:#fff url(../img/top/wn.png) no-repeat 0 0; box-shadow:4px 4px #fff100;}
#update span.ymd{margin:0 .5em 0 0; background-color:rgba(255,245,106,0.6);}
#update ul {height:56px; line-height: 56px; overflow: hidden; margin:0 0 0 150px; color:#ff63a9; text-align:left;}
#update li a{color:#ff63a9;}
#update li a:hover{text-decoration:underline;}

.bn_pre a{display: block; width:980px; height:125px; background:url(../img/top/pre2.png) no-repeat center center; margin:0 auto 1.2em; border:3px solid #fff100; border-radius:10px;}

.spot{width:560px; padding:10px 0; background:url(../img/bg_spot.png); display: inline-block;}
.spot #trailer {width:535px; margin:0 auto; height:295px; background-color:rgba(255,201,195,0.5); background-image:url(../img/top/spotend.png); background-repeat: no-repeat; background-position: center center;}
#spotR{width:395px; display: inline-block; margin:0 0 0 1.2em; vertical-align:top;}
.bn_story{width:395px; height:153px; margin:0 0 1.2em; }
.bn_story a{display: block; width:100%; height:100%; background:url(../img/top/story.png?7) no-repeat 0 0; background-size: cover;}
#top .sns{background: url(../img/bg_sns.png); border-radius:14px; padding:1em 0;}
#top .sns img{width:75px; height:75px; margin:0 .2em 0;}
#top .sns p{width:304px; height:24px; background:url(../img/top/ofsns.png) no-repeat center center; margin:0 auto .5em;}

/*cts*/
#cts{width:980px; margin:1.5em auto; text-align:center; vertical-align:top;}
.bn_itr,.bn_news,.bn_ch,.bn_itv3,.bn_hhw2,.bn_hhm{display:inline-block; width:300px; height:205px; margin:0 .5em .7em; }
.bn_itr a,.bn_news a,.bn_ch a,.bn_itv3 a,.bn_hhw2 a,.bn_hhm a{display: block; width:100%; height:205px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative;}
.bn_itr a{background-image: url(../img/top/intro.jpg);}
.bn_news a{background-image: url(../img/top/news.jpg);}
.bn_ch a{background-image: url(../img/top/chart.jpg?1);}
.bn_itv3 a{background-image: url(../img/top/itv8.jpg);}
.bn_hhw2 a{background-image: url(../img/top/hhw2.jpg);}
.bn_hhm a{background-image: url(../img/top/hhm.jpg);}
/*@media all and (-ms-high-contrast:none){
    .bn_music{margin:0 13px 0;}
}*/
#ctsL,#ctsR{width:640px; display:inline-block; text-align:left; vertical-align:top; margin:1em 0 0;}
#ctsR{width:300px;}
.bn_quiz a{width:625px; height:140px; margin:0 0 15px 0; background: url(../img/top/quiz.jpg) no-repeat 0 0; display:block;}
.bn_itv2,.bn_hhw{width:465px; height:140px; margin:15px 5px 5px 5px; display:inline-block;}
.bn_cast,.bn_comic,.bn_staff,.bn_bbs,.bn_music,.bn_ex2,.bn_gl{display:inline-block; width:300px; margin:0 0 .5em 0;}
.bn_cast a,.bn_comic a,.bn_staff a,.bn_bbs a,.bn_itv a,.bn_itv2 a,.bn_hhw a,.bn_music a,.bn_ex2 a,.bn_gl a{display: block; width:100%; height:102px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.bn_cast,.bn_staff,.bn_bbs{margin:0 20px 0 0;}
.bn_cast a{background-image: url(../img/top/cast.png);}
.bn_comic a{background-image: url(../img/top/cinfo.png); position:relative;}
.bn_comic img{position: absolute; top:-5px; right:30px;
	-webkit-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);}
.bn_itv2 a{height:140px; background-image: url(../img/top/itvs.jpg?1); background-size: contain;}
.bn_hhw a{height:140px; background-image: url(../img/top/hhw.jpg); background-size: contain;}
.bn_staff a{background-image: url(../img/top/staff.png);}
.bn_bbs a{background-image: url(../img/top/bbs.png);}
.bn_music a{background-image: url(../img/top/music.png);}
.bn_ex2 a{background-image: url(../img/top/extra2.png);}
.bn_gl a{background-image: url(../img/top/gl.png);}

.ctsbtm{margin:.8em auto 0;}
.bn_repo{width:300px; height:250px; margin:0 24px 0 0;}
.bn_repo a,.bn_rp a {display: block; width:100%; height:250px; position: relative; border-radius:14px; background: url(../img/top/repo.jpg?1) no-repeat 0 0; background-size: cover;}
.bn_repo span.upd,.bn_rp span.upd,.bn_news span.upd {color:#fff570; position: absolute; top: -12px; right:25px; padding:20px 0 0; display:block; width:70px; height:50px; text-align:center; line-height:1; font-size:120%; background: url(../img/icon1.png) no-repeat 0 0; background-size: 100%;}
.bn_news span.upd{top: -12px; left:25px;}

#twTL {width:300px; height:605px; border:3px solid #bb9e4c; border-radius:14px; background:url(../img/renga.png) repeat right center; box-shadow:0 0 50px rgba(132,94,48,0.6) inset; padding:1.3em 0 0; margin:0 auto .8em;}
#twTL .tline{width:92%; height:560px; margin:0 auto 0; box-shadow:1px 1px 8px rgba(171,152,124,0.7); background:#fff;  position:relative; padding:20px 0 0;}
#twTL h3{width:100%; height:41px; background:url(../img/top/twt.png) no-repeat center 0; margin:0 auto 0; position:absolute;left:0;top:-11px;}

#twTL_sp{display:none !important;}

.bn_dvd{width:300px; height:130px; margin:0 auto .3em; border:2px solid #fff100; border-radius:14px;}
.bn_dvd a {display: block; width:100%; height:100%; background: url(../img/top/ishop2.png); margin:0 auto; background-size:cover; border-radius:14px;}
.bn_ex a {display: block; width:296px; height:110px; background: url(../img/bg_sb.png); border:2px solid #fff100; border-radius:14px; margin:0 auto;}
.bn_ex p{display: block; width:100%; height:100%; background: url(../img/top/extra.png) no-repeat center center;}

#bn_ft{margin:1.5em auto 0; text-align:center;}
#bn_ft ul li{display:inline-block; width:300px; margin:0 .5em 0; border-radius:14px;}
#bn_ft ul li a{display: block; width:100%; height:130px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius:14px; border:2px solid #fff100;}
.bn_ishop a{background-image: url(../img/top/ishop.png); background-position: left -10px center !important;}
.bn_free a{background-image: url(../img/top/free.png);}
.bn_prv a{background-image: url(../img/top/paravi.png);}
.bn_ex3 a{background-image: url(../img/top/ex3.png);}


/* insta */
#insta {width:300px; height:252px; background: url(../img/top/insta.jpg) no-repeat 0 0;}
#insta h3{height:50px;}
div.insta {height:200px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	overflow:hidden;
}
div.insta ul{margin:10px 0 0 16px;}
div.insta ul li {float:left; margin:6px 0 0 6px;}
div.insta ul li a, div.insta ul li a img {
	display:block;
	background-position:center center;
	background-repeat:no-repeat;
	width:82px;
	height:82px;
}
div.insta ul li a {background-size:cover;}
div.insta ul li a:hover img {filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;}
div.insta ul li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
div.insta ul li a img.icon-video {background-image:url(/um/img/play.png);}

/*footer*/
footer {margin:1.5em auto 0; background:rgba(252,133,181,0.8);}
footer .inner {width:950px; margin:0 auto; position: relative; padding:2em 0 2em;}
#rect {width:300px; height: 250px; background:#fff;}
footer .sns{padding:0 0 1em;}
footer .sns img{width:70px; height:70px; margin:0 .2em 0 0;}
footer .sns span{font-size:70%; line-height:0; color:#fffbc6;}
footer .copy p {padding:.5em 0 0; font-size:80%; color:#fff;}
footer .copy a{color:#fff;}

/*------------------　2nd　------------------ */
header{background-image:url(../img/bg_y.png); box-shadow:0 3px 10px rgba(179,170,50,0.3);}
#top header {width:100%; margin:0 auto; position: relative; background:#fc85b5;}
header #logo{background-color:#fc85b5;}
header #logo a {width:650px; height:150px; margin:0 auto; background: url(../img/logo.png) no-repeat center center; display:block; padding:1.5em 0;}
.zigzag {
  position: relative;
}
.zigzag::after {
  height: 14px;
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}
.zigzag::after {
  bottom: -14px;
  background: linear-gradient(135deg, #fc85b5 7px, transparent 0), linear-gradient(225deg, #fc85b5 7px, transparent 0);
  background-size: 14px 14px;
}

#contents{width:960px; margin:3em auto; box-shadow:2px 4px rgba(255,241,0,0.7); padding:0 0 3em; border-radius:14px; border:3px solid #fff100;}
#contents .inner{z-index:0; width:94%; margin:1em auto 0; box-shadow:1px 2px 5px rgba(1,1,1,0.1); padding:1.5em 0; position: relative; z-index:1; background-color:rgba(255,255,255,0.8);}
#contents .inner::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    opacity: 0.6; 
    z-index: -1;
    background:rgba(255,255,255,0.8) url(../img/intro/room.jpg) no-repeat center top;;
    background-size:100%; 
}

#contents p {padding:1em 3em .5em; line-height:1.6;}
#contents h1{width:100%; height:221px; background-size:cover; margin:0 auto; background-repeat: no-repeat; background-position: left -18px top;
border-radius: 10px 10px 0 0 / 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;}
h1.intro{background-image:url(../img/intro/ttl.png);}
h1.cmnt{background-image:url(../img/intro/ttl_cm.png);}
h1.story{background-image:url(../img/story/ttl.png);}
h1.info{background-image:url(../img/news/ttl.png);}
h1.music{background-image:url(../img/news/ttl_music.png);}
h1.cast{background-image:url(../img/ttl_cast.png);}
h1.staff{background-image:url(../img/ttl_staff.png);}
h1.repo{background-image:url(../img/repo/ttl.png);}
h1.fmsg{background-image:url(../img/ttl_bbs.png);}
h1.quiz{background-image:url(../img/ttl_pre.png);}
h1.chart{background-image:url(../img/chart/ttl.png);}
h1.comic{background-image:url(../img/comic/ttl.png);}
h1.itv{background-image:url(../img/itv/ttl.png);}
h1.gallery{background-image:url(../img/gallery/ttl.png);}
h1.hhw{background-image:url(../img/hhw/ttl.jpg); background-position: center center !important; height:350px !important; border-radius:0 !important;}
h1.hhm{background-image:url(../img/hhm/ttl.jpg); background-position: 0 center !important; height:350px !important; margin:0 auto .8em !important;}

.ph_cut {width:600px; height:400px; box-shadow:1px 2px rgba(255,241,0,0.7); margin:1em auto; background-size: cover; background-repeat: no-repeat; background-position: center center; border:2px solid #fff100;}
.ph_cut_l {width:400px; height:600px; box-shadow:1px 2px rgba(255,241,0,0.7); margin:1em auto; background-size: cover; background-repeat: no-repeat; background-position: center top; border:2px solid #fff100;}
.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(255,245,106,0.8) 60%);}

/*intro*/
#intro #contents{background-image:url(../img/bg_sb.png);}
#intro h2{width:100%; height:312px; background: url(../img/intro/txt.png) no-repeat center center; margin:1em auto;}
#intro h3,#hhm h3 {color:#fff; margin:-1.5em 0 .7em .5em; width:180px; text-align:center; font-size:130%;
	position: relative;
	padding: .4em .7em;
	background-color: #fc85b5; border-radius: 30px;
}
#intro h3::after,#hhm h3::after {
	position: absolute;
	top: 100%;
	left: 45%;
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top: 12px solid #fc85b5;
}
#intro h3.blu{background-color: #7dd1fc;}
#intro h3.blu::after{border-top: 12px solid #7dd1fc;}
#intro h4{padding:0 0 .1em; color:#fea634; font-size:120%;}
#intro .main {width:500px; height:576px; background-image:url(../img/intro/main.jpg);}
#intro #contents p {line-height:1.9;}
.bdr{border:2px solid #fc85b5; padding:1em 1.5em; margin:1em auto 2em; width:90%; box-shadow:2px 2px #fc85b5; background-color:rgba(255,255,255,0.8); border-radius:18px;}
.bd_bl{border:2px solid #7dd1fc; box-shadow:2px 2px #7dd1fc;}
.bd_or{border:2px solid #fea634; box-shadow:2px 2px #fea634;}
.bdr p{padding:0 !important; font-size:95%;}

/*story*/
#story #contents{background-image:url(../img/bg_p.png);}
#story #contents .inner::before{background-image:none;}
#story #contents .inner{padding:0 0 1.5em;}
#story #mov{width:100%; background-color:rgba(255,245,106,0.6); text-align:center; padding:1em 0;}
#story #mov ul#movlist{ text-align:center; padding:1em 0 0;}
#story #mov ul#movlist li{display:inline-block; width:220px; margin:0 .2em; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center center; font-size:120%;}
#story #mov ul#movlist li a{background-color:rgba(252,133,181,0.7); display:block; width:100%; height:80px; color:#fff; line-height:80px; text-shadow:0px 0px 1px #de6998,0px 0px 10px #de6998,0px 0px 15px #b63f6f; border:1px dotted #fff;}
#story #trailer,.emb{width:600px; height:338px; margin:0 auto;}
#story #trailer {margin:.8em auto 0;}
#story h2{font-weight:bold; color:#fff; padding:0; text-align:center; color:#fc85b5;}
#story h2 span.num {font-size:120%;}
#story h2 span.epno {padding:0 .7em .2em; color:#fff; background-color:#fc85b5; display: inline-block;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);}
#story #contents p {line-height:1.7;}
#story #contents p a {color:#fc85b5;}
#story .ph_area{margin:1em auto; width:92%;}
#story .ph_s{width:49%; padding:32.6666% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; display:inline-block; margin:0 .3% 0; box-shadow:1px 2px rgba(255,241,0,0.7); border:2px solid #fff100;}
#story .ph_s img {position:absolute;left:0;top:0; width:100%; height:100%;}
#story #bknm,#itv #bknm,#gallery #bknm,#hhm #bknm{width:94%; margin:2em auto 0;}
#story #bknm li{display:inline-block; width:210px; margin:0 0 1em 9px; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center top; box-shadow:2px 4px 6px rgba(10,10,10,0.1); background-color:rgba(255,245,106,0.9); color:#fc85b5;}
#story #bknm li a {color:#fff; display:block; width:100%; height:130px; position:relative; background-size: cover;}
#story #bknm li span {padding:.2em 0; font-size:120%; display:inline-block; font-weight:bold;}
#story #bknm h4,#quiz #bknm h4,#gallery #bknm h3,#itv #bknm h4,#hhm #bknm h4{position:relative; padding:.5em 0; text-align:center; color:#fff100; letter-spacing:.2em; font-size: 150%; font-weight:bold; border-top:2px dashed #fff100; border-bottom:2px dashed #fff100; margin:0 auto 1em; text-shadow:3px 4px #f583af;}


/*news*/
#info #contents{background-image:url(../img/bg_o.png);}
#info #contents .inner::before{background-image:none; }
#info #contents .inner{background-color:rgba(255,255,255,0.9);}
#promo {width:92%; padding:0 0 .5em; margin:0 auto 1em;}
#promo h2{text-align:center; color:#c44a8f; border-top:1px dashed #fffb7e; margin:0 auto .8em; border-bottom:1px dashed #fffb7e; padding:.4em 0; color:#fffb7e; font-size:140%; background-color:rgba(250,159,42,0.7); text-shadow:none;}
#promo h3{font-size:110%; padding:.2em 0 0;}
#promo li {padding:0; border-bottom: solid 1px #fea634; margin:0 0 .5em;}
#promo p.txt{padding:0 0 .5em; font-size:95%; color:#fea634;}
#promo p.add {font-size:1.2rem !important;  border:none !important; padding:.8em .5em;}
#promo .pdate{ padding:.1em .5em; font-size:95%; background-color: rgba(255,245,106,0.9);}
#info span.date {color:#fff; padding:2px 3px; background:#fea634; display:inline-block; font-size:100%; margin:0 0 0 auto; text-align:right;}
#info article {padding:1em 0; margin:0 auto 2em; width:92%;}
#info article:last-child{margin:0 auto 1em;}
#info article h2{text-shadow:1px 1px 0 #fff; line-height: 1.4; border-bottom: dashed 2px #fea634; padding:.3em 0; margin:0; color:#fea634;}
#info article h2.song{text-align:center; background-color:#fea634; color:#fffb7e; text-shadow:none; position: relative;}
#info article h2.song::after {
	position: absolute;
	top: 100%;
	left: 50%;
	content: '';
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-top: 14px solid #fea634;
}
#minfo{text-align:center; margin:1em 0 1.5em;}
#minfo ul li{display:inline-block; width:340px; margin:0 1em 0;}
#minfo ul li a{display:block; height:170px; width:100%;}
#minfo ul li.tsong a{background:url(../img/news/tsong.png) no-repeat 0 0; background-size: cover;}
#minfo ul li.isong a{background:url(../img/news/isong.png) no-repeat 0 0; background-size: cover;}

#info article h3{font-size: 120%; line-height: 1.4;}
#info article h3.bd{text-align:center; color:#c44a8f; border-top:1px solid #c44a8f; margin:.5em auto .5em; border-bottom:1px solid #c44a8f; padding:.4em 0; width:600px;}
#info article p {padding:1em 0;}
#info .emb {margin:1.5em auto 1em;}

/*comic*/
#comic #contents{background-image:url(../img/bg_bg.png);}
#comic .comic1,#comic .comic2{display:inline-block; width:32%; height:0; padding:50% 0 0; margin:2em 1em 1.5em; background-size: contain; background-repeat: no-repeat; background-position: 0 0; position:relative;}
#comic .comic1 img,#comic .comic2 img{position:absolute;left:0;top:0; width:100%; height:100%;}
#comic .comic1{background-image:url(../img/comic/comic1.jpg);}
#comic .comic2{background-image:url(../img/comic/comic2.jpg);}
#comic p.serial{font-size:130%;}
#comic h2{text-align:center; font-size:180%; padding:.8em 0 0;}
#comic h3{text-align:center;padding:1em 2em 2em; font-size:150%;}
#comic .cpr{font-size:1.1rem; margin:0 0 0;padding:0; text-align:right;display:inline-block; width:100%;}

/*itv*/
#itv #contents{background-image:url(../img/bg_b.png);}
#itv #contents .inner{padding:0 0 1.5em;}
#itv #contents .inner::before,#quiz #contents .inner::before{background-image:none;}
#itv h2,#quiz h2{width:100%; height:400px; background-size: cover; background-repeat: no-repeat; background-position: 0 center; position:relative;}
#itv h3 {color:#c7af2c; margin:1em auto 0; width:94%; font-size:130%; position: relative; box-shadow:1px 2px 5px rgba(199,175,44,0.5);
	padding: .4em .7em;
	background-color:#fffbac;
}
/*#itv h3::after {
	position: absolute;
	top: 100%;
	left: 47%;
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top: 12px solid #fffbac;
}*/
#itv #bknm h4{text-shadow:3px 4px #96adf6;}
#itv #bknm ul{width:92%; margin:0 auto;}
#itv #bknm li{display:inline-block; margin:0 0 .5em 1em; text-align:center; position:relative;}
#itv #bknm li a {color:#fff; display:block; width:140px; height:140px; background-size: contain; background-repeat: no-repeat; background-position: center center;}
#itv #bknm ul li p {display: inline-block; text-align:center; color:#fff100; font-size:95%; width:100%; padding:0 !important;}
#itv #bknm ul li p span {padding:.15em .3em; font-weight:bold;
text-shadow: #96adf6 1px 1px 0, #96adf6 -1px -1px 0,
        #96adf6 -1px 1px 0, #96adf6 1px -1px 0,
        #96adf6 0px 1px 0, #96adf6  0-1px 0,
        #96adf6 -1px 0 0, #96adf6 1px 0 0;}

/*present*/
#quiz #contents{background-image:url(../img/bg_ex.png);}
#quiz #contents .inner{padding:0 0 1.5em; margin:1.7em auto 0;}
#quiz h2{background-image:url(../img/quiz.png); height:419px; background-position: left -8px center; margin:-20px 0 0; display:inline-block;}
#quiz .que,#quiz .ans{font-weight:bold; text-align:center; font-size:160%; padding:0;}
#quiz .que span{color:#ff8c84;}
#quiz p.que{margin:2.5em auto 0;}
#quiz h3 {background-color:#ff8c84; color:#fff; font-size:140%; position: relative; text-align:center; width:20%; border-radius:30px; padding:.3em 0; margin:-1em auto 1em;}
#quiz h3::after {
	position: absolute;
	top: 100%;
	left: 50%;
	content: '';
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top: 10px solid #ff8c84;
}
#quiz .ans{font-size:180%; padding:1em 0 .5em;}
#quiz .ans span.bgc{background-color:#ff8c84; color:#fff; padding:.1em .2em; margin:0 .3em 0 0;}
#quiz h4{background:#ff8c84; padding:.2em 0 .2em; font-weight:bold; color:#fff100; font-size:150%; position: relative; width:28%; text-align:center; margin:2.5em 0 .4em -15px; letter-spacing:.08em;}
ul#pastq{width:94%; margin:4em auto 1em; font-size:95%;}
ul#pastq li{border:1px solid rgba(255,140,132,0.6); padding:0 1em .8em; border-radius:10px; margin:1.2em 0 .5em;}
ul#pastq li span.vnm{display:block; color:#fff; padding:.1em 0; margin:-.6em 0 .3em 0; font-size:110%; background-color:#ff8c84; width:10%; text-align:center; }
ul#pastq li span.asw{display:inline-block; background-color:#ff8c84; color:#fff; padding:.1em .2em; margin:.2em .3em 0 0;}


/*hhw*/
#hhw #contents{background-color: #d4a925; border-radius:0;
background: -moz-linear-gradient(top, #d4a925 0%, #fff5a0 30%, #ffffdb 50%, #fff5a0 70%, #d4a925 100%);
background: -webkit-linear-gradient(top, #d4a925 0%,#fff5a0 30%,#ffffdb 50%,#fff5a0 70%,#d4a925 100%);
background: linear-gradient(to bottom, #d4a925 0%,#fff5a0 30%,#ffffdb 50%,#fff5a0 70%,#d4a925 100%); }
#hhw #contents .inner::before,#hhm #contents .inner::before,#gallery #contents .inner::before{background-image:none;}
#hhw #contents .inner{padding:0 0 .5em;}
#hhw h3 {color:#968212; margin:0 auto; width:100%; font-size:150%; padding: .4em .7em; background-color:rgba(255,255,255,0.55); text-align:center; box-shadow:1px 1px 10px rgba(216,191,99,0.8); font-weight:bold;}
/*#hhw h3 span{-webkit-box-reflect: below -15px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.8)));}*/
.volinfo{background-color: #ffffdb; color:#8e5a18; text-shadow:1px 1px #ffffdb; padding:1em 0;
background:url(../img/hhw/tttlbg.png) no-repeat 0 0; background-size:cover;}
#hhw h4{background-image: linear-gradient(to bottom, #ffffdb 0%,#fff5a0 100%); padding: .4em 1em; color:#8e5a18; margin:0 auto; width:94%; border-left:5px solid rgba(216,191,99,0.8); font-weight:bold;}
.desc{padding:.5em 1em .8em !important; border:1px solid rgba(216,191,99,0.8); margin:5px auto 3em; width:94%; border-radius:5px;}
#hhw .ph_cut{/*border:1px solid #c7af2b !important;*/ margin:1em auto .8em; box-shadow:0 0 10px rgba(216,191,99,0.5); background-color: #fff; border:5px solid #fff !important; box-shadow:0 0 5px rgba(216,191,99,1);}
#hhw .ph_cut_s {width:43%; height:0; padding:28% 0 0; box-shadow:none; margin:1em .8% .5em; border:3px double #c7af2b; position:relative; display:inline-block;}
#hhw .ph_cut_s img,#hhm .ph_cut img{position:absolute;left:0;top:0; width:100%; height:100%;}
#hhw #bknm{width:94%; margin:2em auto .8em;}
#hhw #bknm h4{color:#968212; margin:0 auto .7em; width:100%; font-size:150%; padding: .4em .7em; background-color:#fff; text-align:center; box-shadow:1px 1px 10px rgba(10,10,10,0.2); font-weight:bold; border:none; letter-spacing:.2em; }
#hhw #bknm h4 span {
  background: -webkit-linear-gradient(rgba(216,191,99,0.5), #968212);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#hhw #bknm li{display:inline-block; width:195px; margin:0 0 9px 9px; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center top; box-shadow:2px 4px 6px rgba(10,10,10,0.1); background-color:rgba(255,245,106,0.9);}
#hhw #bknm li a {display:block; width:100%; height:130px; position:relative; background-size: cover;}
#hhw #bknm li span {width:100%; padding:2.8em 0 .4em; font-size:92% !important; display:inline-block; position:absolute;left:0;bottom:0; color:#968212; text-shadow:1px 1px rgba(255,255,219,0.9);
background: linear-gradient(to top, rgba(255,245,160,1) 0%,rgba(255,255,219,0.85) 44%,rgba(255,255,219,0) 100%);}
#hhw #bknm li.bk1 a {background-image:url(../img/hhw/vol1_1.jpg);}
#hhw #bknm li.bk2 a {background-image:url(../img/hhw/vol2_1.jpg);}
#hhw #bknm li.bk3 a {background-image:url(../img/hhw/vol3_1.jpg);}
#hhw #bknm li.bk4 a {background-image:url(../img/hhw/vol4_1.jpg);}
#hhw #bknm li.bk5 a {background-image:url(../img/hhw/vol5_1.jpg);}
#hhw #bknm li.bk6 a {background-image:url(../img/hhw/vol6_1.jpg);}
#hhw #bknm li.bk7 a {background-image:url(../img/hhw/vol7_1.jpg);}

/*hhm*/
#hhm #contents{background-image:url(../img/bg_p.png);}
#hhm #contents .inner{padding:0 0 1.5em;}
.recipe{background-image:url(../img/hhm/bg.jpg); color:#8e5a18; box-shadow:1px 3px 10px rgba(1,1,1,0.1); padding:1em 2em 2em; margin:.5em 0 1.5em;}
#hhm .ph_cut{width:38%; height:0; padding:38% 0 0; border:5px solid #fff; box-shadow:1px 3px 10px rgba(1,1,1,0.1); margin:5% 1% 0 0; position:relative;}
#hhm #contents .inner p{padding:.5em 0;}
#hhm .rdesc{width:57%;}
#hhm h3{padding:.2em 0; font-size:150%; margin:.2em .5em; width:35%;}
#hhm h4{font-size:150%; font-weight:bold;}
#hhm .howto{background-color:rgba(255,251,198,0.4); font-size:92%; border-radius:14px; padding:.5em 1.5em 1em !important; margin:.6em 0 0;}
.hwttl{border-left:5px solid rgba(142,90,24,0.4); padding:0 0 0 .5em; line-height:2em;}
#hhm span.epnum{background-image:url(../img/hhm/epbg.jpg); color:#8e5a18; padding:.2em .8em;font-size:140%; box-shadow:1px 2px 5px rgba(1,1,1,0.1); display:inline-block; margin:-1em 0 .5em 1em;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);}

#hhm #bknm li{display:inline-block; width:150px; margin:0 0 1.5em 1.25em; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center center; color:#fc85b5; }
#hhm #bknm li a {color:#fff; display:block; width:100%; height:150px;  background-size: cover; border:4px solid #fff; box-shadow:2px 4px 6px rgba(10,10,10,0.1); position:relative;}
#hhm #bknm li span.epnum{font-size:100%; margin:0 auto; position:absolute;left:25%;bottom:-1.2em;}


/*gallery*/
#gallery #contents{background-image:url(../img/bg_g.png);}
#gallery h2{background:#fff100; padding:0 0 .2em; font-weight:bold; color:#80de51; font-size:180%; position: relative; width:130px; text-align:center; margin:0 0 .4em -15px;}
#gallery ul#show{font-size:0; width:910px; margin:0 auto; }
#gallery ul#show li{ display:inline-block; width:215px; border:2px solid #fff100; margin:5px 0 5px 10px; }
#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:100%; height:143px; display:block;
    -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;
}
#gallery ul#show li span a:hover{ background:rgba(255,241,0,0.5);}
#gallery .lbg-pics{background-color:none !important; box-shadow:none !important;}
#gallery #bknm h3{text-shadow:3px 4px #6cc108;}
#gallery #bknm ul {margin:1em auto 0;}
#gallery #bknm li{display:inline-block; width:18.5%; margin:0 .5% 1.5%; text-align:center; position:relative; box-shadow:1px 2px 10px rgba(10,10,10,0.1);}
#gallery #bknm li a {color:#fff; display:block; width:100%; height:0; padding:66.6666% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center top;}
/*#gallery #bknm li span {position:absolute;left:-2px;bottom:-2px; background-color:#fff100; padding:.1em .2em; color:#80de51;font-size:140%;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}*/
.triangle::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 3.5em solid transparent;
    border-right: 3.5em solid #fff100;
    position: absolute;
    z-index: 100;
}
.triangle::after {
    display: block;
    transform: rotate(45deg);
}
.triangle span.volnum{color: #80de51; position: absolute; right: 1px; top: 7px;  z-index: 101; transform: rotate(45deg); font-size:98%; font-weight:bold;}
#gallery #bknm li.bk1 a {background-image:url(../img/gallery/ep1/ep1_1.jpg);}
#gallery #bknm li.bk2 a {background-image:url(../img/gallery/ep2/ep2_2.jpg);}
#gallery #bknm li.bk3 a {background-image:url(../img/gallery/ep3/ep3_3.jpg);}
#gallery #bknm li.bk4 a {background-image:url(../img/gallery/ep4/ep4_1.jpg);}
#gallery #bknm li.bk5 a {background-image:url(../img/gallery/ep5/ep5_1.jpg);}
#gallery #bknm li.bk6 a {background-image:url(../img/gallery/ep6/ep6_1.jpg);}
#gallery #bknm li.bk7 a {background-image:url(../img/gallery/ep7/ep7_5.jpg);}
#gallery #bknm li.bk8 a {background-image:url(../img/gallery/ep8/ep8_1.jpg);}
#gallery #bknm li.bk9 a {background-image:url(../img/gallery/ep9/ep9_1.jpg);}
#gallery #bknm li.bk10 a {background-image:url(../img/gallery/ep10/ep10_1.jpg);}
#gallery #bknm li.bk11 a {background-image:url(../img/gallery/ep11/ep11_1.jpg);}

/*caststaff*/
#cast #contents{background-image:url(../img/bg_g.png);}
#cast #contents .inner::before,#staff #contents .inner::before{background-image:none;}
#staff #contents{background-image:url(../img/bg_pu.png);}
#staff h2{text-align:center; color:#c44a8f; border-top:1px dashed #fffb7e; margin:1.5em auto .5em; border-bottom:1px dashed #fffb7e; padding:.4em 0; color:#fffb7e; font-size:100%; background-color:rgba(192,113,233,0.6); text-shadow:none;}
#staff .credit{text-align:center; width:60%; margin:0 auto 2em; /*color:#fff; text-shadow:0px 0px 2px #a163aa,0px 0px 8px #a163aa,0px 0px 12px #a163aa;*/ font-size:140%;}

#cast table{width:80%; margin:2em auto 3em; font-size:150%; /*color:#fff;text-shadow:0px 0px 2px #59a434,0px 0px 8px #59a434,0px 0px 12px #59a434;*/}
#cast table td{text-align:center; padding:.4em 0;}
#cast table td.cname{text-align:left;width:45%; vertical-align:bottom;}
#cast table td.chara{text-align:right;width:45%; color:#fc85b5;}
#cast table td.chara2{text-align:right;width:45%; color:#5ec5fa;}
#cast table td.naka{padding:.5em .8em; font-size:80%; letter-spacing:0;}
#cast table td.maru{padding:0 !important;}

/*chart*/
#chart #contents{background-image:url(../img/bg_b.png);}
/*#chart .diagram{width:92%; height:0; padding:128.8409% 0 0; background:url(../img/chart/dia.png?3) no-repeat 0 0; background-size:cover; margin:1em auto 2em; position:relative;}*/
#chart .bdr{margin:1em auto;}
#chart h3{color:#fc85b5; font-size:120%; padding:0 0 .2em;}
#chart h3.blu{color: #7dd1fc;}
#chart .diagram{ position:relative; margin:1em auto 2em; background:url(../img/chart/dia.png?3) no-repeat 0 0; background-size: cover;}
#chart .diagram ul,#chart .diagram ul li {position: absolute;}
#chart .diagram ul li a{ display: block; background-color:rgba(241,114,163,0.4); text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap; border-radius:10px;}
#chart .diagram ul li a.blu{background-color:rgba(92,206,248,0.4);}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:195px; height:256px;}
#chart .diagram ul li.sz-m a img {width:163px; height:218px;}
#chart .diagram ul li.sz-s a img {width:149px; height:199px;}
#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.oto {left:95px; top:292px;}
#chart ul li.haruto {left:397px; top:292px;}
#chart ul li.tenma {left:215px; top:630px;}
#chart ul li.megumi {left:441px; top:667px;}
#chart ul li.kaito {left:649px; top:59px;}
#chart ul li.airi {left:649px; top:274px;}
#chart ul li.issa {left:649px; top:488px;}
#chart ul li.sugimaru {left:649px; top:703px;}
#chart ul li.jin {left:217px; top:906px;}
#chart ul li.yukie {left:211px; top:0;}
#chart ul li.makoto {left:0; top:0;}
#chart ul li.iwao {left:417px; top:0;}
#chart ul li.rie {left:441px; top:939px;}
#chart ul li.arisa {left:0; top:648px;}


/*report*/
#report #contents{background-image:url(../img/bg_bg.png);}
#report #contents .inner::before{background-image:none;}
#report .ph_cut,#report .ph_cut_l{margin:.5em auto;}
#report #entry{float:left; width:600px;}
#report #bknm{float:right; width:270px; margin:0 .8em;}
#report article {width:96%; margin:0 0 0 3%; background-color: rgba(255,255,255,0.5); padding:.5em 1.2em 1em; border-radius:10px; border:2px solid #fff100;}
#report article h2{border-bottom:2px dashed #fff100; color:#69e7bf;}
#report article p{padding:1em .1em; line-height:1.5; font-size:95%;}
#report article a {color:#69e7bf;}
#report article a:hover{background-color: rgba(255,245,106,0.6);}

#report #bknm ul{margin:.3em 0 0;}
#report #bknm li{width:100%; line-height: 1.4em; margin:.5em 0 .1em 0;  font-size:90%;}
#report #bknm li a {display:block; padding:.6em; background-color: rgba(255,245,106,0.8); border-radius:10px;}
#report span.date {padding:0 .2em; background:#69e7bf; display:inline-block; color:#fff; font-size:90%;}
#report #bknm h3{color: #69e7bf;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#prevnext { width:100%; 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(2,2,2,0.05); color:#fff; line-height:50px; text-align:center; border-radius:50%;}
#prevnext ul li a {color:#fff; background:#69e7bf; display:block; width:50px; height:50px; border-radius:50%;}
#prevnext ul li a:hover{color:#fff;}
#prevnext ul li.prev { float:left; }
#prevnext ul li.next { float:right; }


/*msg*/
#msg #contents{background-image:url(../img/bg_p.png);}
#msg #contents .inner::before{background-image:none;}
iframe#iframe {width:100%; border:none; padding:0; margin:0;}
#msg h2{color:#fc85b5; margin:.5em auto 1em; font-weight:bold; border-top:1px solid #fc85b5; border-bottom:1px solid #fc85b5; padding:.4em 0; width:90%;}
#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;}
#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: #fc85b5;}
#msg p.att{font-size:120%; padding:.5em 0 0;}
#msg p.pinfo{width:90%; background-color:rgba(255,251,198,0.8); margin:1em auto 1em; padding:1em; font-size:90%; line-height:1.5;}
#msg p.pinfo a{text-decoration:underline;}
#msg p.fmend{padding:.5em 2em 1.5em; text-align:center;}

/*btn*/
a.btn_prev {font-size:150%; color:#fff; display:block; font-weight:bold; box-shadow:0 0 10px rgba(1,1,1,0.2); text-align:center; width:50%; padding:.8em; margin:1em auto 1.5em; background-color:#fc85b5; border-radius:5px; border:1px solid #fff; text-shadow:0 0 8px rgba(157,47,109,0.8);
background-image:linear-gradient(to top,rgba(255,255,255,0.4),rgba(255,255,255,0));}
a.btn_df,a.btn_ap{font-size:150%; color:#fff; display:block; font-weight:bold; text-align:center; width:40%; padding:1em; margin:1.5em auto; border-radius:14px; position: relative; text-shadow:2px 2px 8px rgba(62,165,210,0.7); background-color:#62c3ed; letter-spacing:.2em; box-shadow:2px 2px 10px rgba(188,202,202,0.6);}
a.btn_ap{background-color:#fc85b5;  letter-spacing:.08em; text-shadow:2px 2px 8px rgba(213,84,136,0.5);}
#quiz a.btn_ap{background-color:#ff8c84;}
a.btn_df::after,a.btn_ap::after {
 position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
content: '';
border: 2px dashed #fff570;
border-radius:12px;
}
a.btn_s {background: rgba(196,74,143,0.1); padding:.1em .3em; display:inline-block; margin:.2em 0 0;} 
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)));}
#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;}
.checkm{
	position:relative;
}
.checkm:after, .checkm:before{
	content:''; 
	height:18px; 
	width:4px; 
	display:block; 
	background:#fc85b5; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}
.checkm:before{
	height:10px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg); 
	top:16px; 
	left:7px
}


/*//////pc//////*/
@media all and (min-width: 768px) {
#menu {margin:0 auto; padding:1.2em 0 .5em;}
#menu ul {text-align:center;}
#menu li { height:56px; display:inline-block; padding:0;}
#menu li a { height:56px; display: block; text-indent: 100%; white-space: nowrap; text-decoration:none; overflow: hidden; width:168px; background-repeat: no-repeat;}
#menu li.btn4 a,#menu li.btn5 a,#menu li.btn6 a {width:155px;}
#menu li.btn1 a{background-image:url(../img/menu1.png);}
#menu li.btn2 a{background-image:url(../img/menu2.png);}
#menu li.btn3 a{background-image:url(../img/menu3.png);}
#menu li.btn4 a{background-image:url(../img/menu4.png);}
#menu li.btn5 a{background-image:url(../img/menu5.png);}
#menu li.btn6 a{background-image:url(../img/menu6.png);}
#menu li.btn1 a,#menu li.btn3 a,#menu li.btn5 a{
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#menu li.btn2 a,#menu li.btn4 a,#menu li.btn6 a{
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}

#rect {position:absolute; right:0; top:-4em;}
footer{margin:7em auto 0;}
#top footer .inner {width:950px; margin:0 auto; position: relative; padding:4em 0 7em;}
#gotop {position: fixed; bottom: 20px; right: 10px; z-index:10;}
#gotop span { display:none;}
#gotop a {display:block; width:94px; height:94px; background:url(../img/gotop.png) no-repeat 0 0;}

#chart .diagram{ width:830px; height:1162px;}

#report .ph_cut{width:450px; height:300px;}
#report .ph_cut_l{width:300px; height:450px;}

#gallery h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 12px transparent;
border-right: solid 15px rgb(187,180,62,0.8);
}
/*#quiz h4::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 12px transparent;
border-right: solid 15px rgb(227,110,102,0.8);
}*/

.bn_rp,#bn_ft ul li.bn_ex3{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.4rem; }
.f90 { font-size: 1.2rem;}
.hidtxt{visibility: visible;}
.hid_sp{display:none;}
.inner  {width:90%;}
.ph_cut img,.ph_cut_l img,.ph_main img,#top header h1 img{position:absolute;left:0;top:0; width:100%; height:100%;}

#top header{width:100%;}
#top h1{width:100%; height:0; padding:71.0204% 0 0; background-size:cover;}
#mov{padding:0 0 1em; margin:0 0 1em;}
#update{width:100%; padding:0; margin:0 0 0; height:35px; background-size:auto 35px;}
#update ul {height:35px; line-height:35px; overflow: hidden; margin:0 0 0 90px; font-size:90%;}
#update ul li{text-overflow: ellipsis;white-space: nowrap;overflow: hidden; width:99%;}

.bn_pre a{width:98%; height:0; padding:15% 0 0; margin:1% auto; border:none; background-size:100%; border-radius:0;}

.spot{float:none; width:100%; margin:0 auto 3%; padding:.8% 0; display:none;}
.spot h2{height:0; padding:10.1939% 0 0; width:43%; background-size: contain; left:-5px; top:-5px; z-index:1;}
.spot h3{padding:0 1em 0 0; font-size:4vw;}
.spot #trailer {width:95%; /*position: relative; padding:53.4485% 0 0; height: 0; overflow: hidden;*/ margin:.3em auto .05em;
height:auto;}
#trailer iframe,.emb iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

#spotR{width:95%; margin:3% auto 0;}
.bn_story{width:100%; margin:0 auto 3%; height:auto;}
.bn_story a{height:0; padding:34.4287% 0 0; background:url(../img/top/story_sp.png?7) no-repeat 0 0; background-size: cover; background-color:none !important;}
#top .sns{padding:2% 0;}
#top .sns img{width:17%; height:auto; margin:0 .6% 0;}
#top .sns p{width:65%; height:0; padding:5.1315% 0 0; background-size:cover;}

#cts {width:95%; margin:0 auto;}
#ctsL,#ctsR {width:100%; margin:0 auto; text-align:center;}
#ctsL{margin:1% auto 0;}
.bn_quiz,.bn_repo{width:100%; margin:0 0 2%; height:auto;}
.bn_quiz a,.bn_repo a{width:100%; height:0; padding:22.4% 0 0; background-size:cover; margin:0;}
.bn_itr,.bn_news,.bn_cast,.bn_comic,.bn_staff,.bn_bbs,.bn_ch,.bn_rp,.bn_music,.bn_ex2,.bn_itv3,.bn_hhw2,.bn_hhm,.bn_gl{width:49%; margin:0 0 2%; height:auto; font-size:0;}
.bn_cast a,.bn_comic a,.bn_staff a,.bn_bbs a,.bn_music a,.bn_ex2 a,.bn_gl a{width:100%; height:0; padding:34% 0 0;}

.bn_itv2,.bn_hhw{width:100%; margin:0 0 2%; height:auto; font-size:0;}
.bn_itv2 a,.bn_hhw a{width:100%; height:0; padding:24% 0 0;}

.bn_itr a,.bn_news a,.bn_ch a,.bn_rp a,.bn_itv3 a,.bn_hhw2 a,.bn_hhm a{width:100%; height:0; padding:68.333% 0 0;}
.bn_comic img{width:22%; top:0; right:8%;}
.bn_rp{display:inline-block;}
.bn_rp a{background: url(../img/top/repo_sp.jpg) no-repeat 0 0; border-radius:10px;}
.bn_repo span.upd,.bn_rp span.upd,.bn_news span.upd {font-size:1.5rem;font-size:3vw; line-height:100%; /*width:45px; height:35px;*/ width:25%; height:auto; padding:7% 0; position: absolute; top: 8px; right:12px;}
.bn_repo span.upd{width:12%; padding:3.1% 0; top:18%;}
.bn_news span.upd{top:-6px; left:20px;}
.bn_repo{/*width:100%; margin:0 auto 2%; height:auto; font-size:0;*/ float:none;}
.bn_repo a{background: url(../img/top/bn_rp.png?1) no-repeat 0 0; background-size:cover;}
/*.bn_ch a{background-image: url(../img/top/chart_sp.jpg); background-size:100%;}*/
.ctsbtm{margin:0 auto 0;}
.bn_rp a{background: url(../img/top/repo_sp.jpg) no-repeat 0 0; background-size:cover;}
/*.bn_repo{display:none;}*/
.bn_ex{display:none;}
.bn_ex a{height:90px;}
.bn_ex p{background-size:68%;}
/*.bn_ishop a{height:105px; background-position: center center;}*/

#bn_ft{margin:1em auto 0;}
#bn_ft ul{font-size:0;}
#bn_ft ul li{width:47.5%; margin:0 1.1% 1.5%; border-radius:10px;}
#bn_ft ul li a{height:0; padding:43.3333% 0 0; border-radius:10px;}
#bn_ft ul li.bn_free{display:none;}

#insta{float:none; margin:1.5em auto 1em;}

footer {padding:0; text-align:center; background:none;}
footer .inner{width:100%; padding:0;}
footer p {font-size:85%;}
footer .copy {width:100%; padding:2em 0 4em; margin:1.5em 0 0; background-color:rgba(252,133,181,0.8);}
footer .sns{margin:1.5em 0 0;}
footer .sns span{font-size:70%; line-height:0; color:#fc85b5;}
#rect {margin:0 auto; border:none; width:300px; height:250px; clear:both;}
#gotop {position: fixed; bottom: 0; left:0; width:100%; text-align:center; letter-spacing:.4em; z-index:10;}
#gotop span{font-size:120%; padding:1% 0 0; vertical-align: middle; display:inline-block;}
#gotop a {width:100%; display:block; font-weight:bold; padding:.7em 0; color:#fc85b5;
background-color:rgba(255,245,106,0.9);}

/*------------------　2nd　------------------ */
header #logo a {width:100%; height:0; padding:26% 0 0; background-size: 85%;}
#menu{padding:1em 0 .2em; }
#menu ul {width:100%; text-align:center; font-size:0;}
#menu li {display:inline-block; /*border-right:1px solid #fff;*/ font-size: 13px; font-size:3.5vw; line-height:1.25; font-weight:bold;}
#menu li span.eng{display:block;color:#fc85b5; font-size:88%; letter-spacing: .1em; text-shadow:1px 0 0 #fff;
font-family: 'Avenir','Roboto',sans-serif; font-size:2vw;}
/*#menu li:last-child,#menu li.btn3{border:none;}
#menu li.btn1,#menu li.btn2,#menu li.btn3{border-bottom:1px solid #fff;}*/
#menu ul li {width : 33.33333%;
width: -webkit-calc(100% / 3) ;
width: calc(100% / 3) ;}
#menu li a {height:auto; display: block; width:96%; margin:.2em; padding:.8em 0; color:#72c7ea; background-color:rgba(255,255,255,0.6);
border-radius:6px;
/*background-image:linear-gradient(to top,rgba(255,255,255,0.5),rgba(255,255,255,0));
background:-webkit-gradient(linear,left bottom,left center,from(rgba(255,255,255,0.5)),to(rgba(255,255,255,0)));*/}
#menu li.btn2 a{color:#fea634;}
#menu li.btn3 a{color:#fc85b5;}
#menu li.btn4 a{color:#7e9aea;}
#menu li.btn5 a{color:#7fde47;}
#menu li.btn6 a{color:#c981ee;}
#menu li span.lss2 {letter-spacing: .2em;}

#contents{width:100%; margin:0em auto; padding:0 0 2em; border:none; border-radius:0;}
#contents h1{width:100%; height:0; padding:24% 0 0; background-position:right top; border-radius:0;}
#contents p {padding:.5em 1.5em 1em; line-height:1.5; font-size:96%;}
.ph_cut {width:96%; height:0; padding:64% 0 0; position: relative; margin:1em auto .5em;}
.ph_cut_l {width:60%; height:0; padding:90.225% 0 0; position: relative; margin:1em auto .5em;}

#bknm{width:100%; margin:2em auto 1em;}

/*intro*/
#intro h2{width:88%; height:0; padding:43.65% 0 0; margin:1% auto; background-size: cover;}
.bdr{margin:1em auto 1.8em; padding:1em; border-radius:14px;}
#intro #contents p {line-height:1.8;}
#intro .main{width:80%; height:0; padding:92.16% 0 0;}

/*story*/
#story .ph_cut {width:90%; height:0; padding:60% 0 0; margin:.5em auto 1em;}
#story #mov{padding:1em 0 0; margin:0 0 .5em;}
#story #mov ul#movlist{padding:1em 0;}
#story #mov ul#movlist li{width:45%; margin:0 .5%; font-size:110%; font-weight:bold;}
#story #mov ul#movlist li a{height:60px; line-height:60px;}
#story .ph_area{margin:.5em auto 0; width:94%;}
#story .ph_s{margin:0 .2% 0; border:1px solid #fff100;}
#story h2{font-size:4vw;}
#story #trailer {width:100%;/*position: relative; padding:56% 0 0; height: 0; overflow: hidden;*/height:auto;}
/*#story #trailer iframe,.emb iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}*/

#story #bknm li{width:46%; margin:0 .5% 2% 2%;}
#story #bknm li a{height:0; padding:58% 0 0; position: relative;}
#story #bknm li a img {position:absolute;left:0;top:0; width:100%; height:100%;}
#story #bknm li span{padding:.3em 0;}

/*news*/
#promo{width:90%;}
#promo li{font-size:95%;}
#promo p.add {font-size:1rem !important; padding:.2em 0 0;}
#promo .pdate{font-size:90%;}
#info article{padding:.8em 0; margin:0 auto 1em; width:90%;}
#info article:last-child{margin:0 auto .5em;}
#info article.theme{padding:1.2em 1.5em ;}
#promo h2,#info article h2{font-size:4vw;}
#info article h2.song{margin:0 0 .5em; font-size:4.5vw; font-weight:bold;}
#info article h2.song::after {left: 48%;}
#minfo{text-align:center; margin:0 0 1%;}
#minfo ul li{width:40%; margin:0 1.5% 0; font-size:0;}
#minfo ul li a{height:0; padding:50% 0 0;}
#info article h3{font-size:3.5vw;}
#info article h3.bd{width:100%;}
#info article p {padding:.5em 0; font-size:96%;}
#info .emb {margin:1em auto .5em;}
/*#info .emb {width:100%; position: relative; padding: 56.25% 0 0; height: 0; overflow: hidden; margin:0 auto 1em;}*/

/*comic*/
#comic .comic1,#comic .comic2{width:36%; padding:56.603% 0 0; margin:1em .4em .5em;}
#comic h2{text-align:center; font-size:4.6vw; padding:.6em 0 0;}
#comic h3{padding:.5em 1.5em 1em; font-size:3.7vw;}
#comic p.serial{font-size:3.4vw;}
#comic .cpr{font-size:1rem;font-size:10px;
-moz-transform: scale(0.9);
   -webkit-transform: scale(0.9);
   -o-transform: scale(0.9);
   -ms-transform: scale(0.9);
   transform: scale(0.9);}

/*itv*/
#itv h2{height:0; padding:44% 0 0; margin:0 auto 3.5%;}
#itv h3{font-size:3.5vw; margin:1.4% auto 1%; line-height:1.3; font-weight:bold;}
#itv #bknm ul{text-align:center; width:100%;}
#itv #bknm li{margin:0 2.5% 2%;}
#itv #bknm li a{width:120px; height:120px;}

/*present*/
#quiz #contents .inner{padding:0 0 1.5em; margin:1.7em auto .5em;}
#quiz .que,#quiz .ans{font-size:125%; padding:0 0 1em; font-size:3.8vw;}
#quiz h2{height:0; padding:45.5434% 0 0; background-position: center center; margin:-2.2% 0 0; font-size:0;}
#quiz h3{width:26%; margin:.3em auto .8em; font-size:4vw;}
#quiz h3::after{left:45%;}
#quiz .ans{font-size:5vw; padding:.5em 0 0;}
#quiz .ans span.f80{font-size:3.2vw !important;}
ul#pastq{width:92%; margin:3.5em auto .5em; font-size:90%;}
ul#pastq li span.vnm{width:20%;}
#quiz p.que{margin:2em auto 0; padding:0;}

/*hhw*/
h1.hhw,h1.hhm{width:100%; height:0 !important; padding:35.714% 0 0 !important; background-position:center center;}
#hhw #contents .inner{padding:0 0 1em;}
#hhw h3{font-size:140%; box-shadow:none;}
.volinfo{padding:1em 0 0;}
.desc{padding:.8em !important; margin:5px auto 2.5em;}
#hhw .ph_cut {width:75% !important; height:0; padding:50% 0 0; position: relative; margin:1em auto .5em; border:3px solid #fff !important; box-shadow:0 0 3px rgba(216,191,99,1);}
#hhw #bknm li{width:45%; margin:0 .4% 2% 2.3%;}
#hhw #bknm li a{height:0; padding:66% 0 0;}
#hhw #bknm li span{font-size:90% !important;}

/*hhm*/
.rdesc,.ph_cut{float:none;}
.recipe{padding:1.1em 0 1.5em; }
#hhm .rdesc{width:90%; margin:0 auto;}
#hhm .ph_cut{margin:0 auto .8em; width:50%; padding:50% 0 0;}
#hhm h3{font-size:130%; width:65%; margin:.2em auto;}
#hhm h4{font-size:130%; }
#hhm .howto{font-size:95%; padding:.5em 1.2em 1em !important;}
/*#hhm #bknm ul{text-align:center;}*/
#hhm #bknm li{width:28%; margin:0 1.8% 5%;}
#hhm #bknm li a{height:0; padding:100% 0 0; border:3px solid #fff; }


/*gallery*/
#gallery h2{font-size:140%; margin:.2em auto .7em; width:30%; border-radius:20px; }
#gallery h2::after {
	position: absolute;
	top: 100%;
	left: 45%;
	content: '';
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top: 10px solid #fff100;
}

#gallery ul#show{width:92%;}
#gallery ul#show li {border:1px solid #fff100; margin:2px 0 3px 5px;
width : 32%;
width: -webkit-calc(100% / 3 - 5px) ;
width: calc(100% / 3 - 5px);}
#gallery ul#show li span a {height:0; padding:66.5% 0 0;}

#gallery #bknm li{width: 30%; margin:0 .6% 1.5%;
/*width: -webkit-calc(100% / 4) ;
width: calc(100% / 4) ;*/}


/*caststaff*/
#cast h2{font-size:1.6rem; font-size:4vw;}
#cast table{width:100%; margin:.5em auto .5em;}
#cast table td{padding:.3em 0;}
#cast table td.cname{font-size:1.35rem; font-size:3.6vw; width:48%;}
#cast table td.chara,#cast table td.chara2{font-size:1.35rem; font-size:3.6vw; width:42%;}
#cast table td.naka{padding:.2em .6em; font-size:1.5rem; font-size:3vw;}

#staff .credit{width:85%; font-size:3.6vw;}
#chart .diagram{width:92%; height:0; padding:128.8409% 0 0; margin:.5em auto 1.5em; overflow:hidden;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}
#chart .diagram ul li a{border-radius:5%;}

#report #contents .inner,#report #contents .inner::before{background:none; box-shadow:none; padding:0;}
.ph_cut {width:90%; height:0; padding:60% 0 0;}
#report #entry{float:none; width:100%;}
#report #entry h2{font-size:1.65rem; font-size:4vw;}
#report article{background-color: rgba(255,255,255,0.9); box-shadow:none; padding:.5em 1em 1em; margin:0 auto;}
#report article p{padding:.6em 0;}
#report article p.cap span { font-size:1.2rem;}
#report #bknm{width:96%;background-color: rgba(255,245,106,0.9); border-radius:10px; border:2px solid #fff100; float:none; margin:1em auto 0;}
#report #bknm ul{margin:.8em 0 1em;}
#report #bknm li{width:96%; line-height: 1.4em; margin:0 auto .4em;}
#report #bknm h3{font-size:5vw; padding:0 .5em;}
#report #bknm li a{background-color: rgba(255,255,255,0.8);}


#msg #contents{position:relative;}
#msg h1 a{width:48%; height:0; margin:15% 0 0; padding:8.5% 0 0; background-size: 95%; position: absolute; right:0; top:0;}
#msg h2{font-size:125%; font-size:4vw;}
#msg .inner ul#notice li:before{margin:0;}
a.btn_prev,a.btn_ap {margin:.5em auto 1.5em; width:62%; font-size:1.5rem; font-size:4vw;}
a.btn_df{width:70%; margin:.8em auto 1.5em; font-size:130%;}
#msg p.fmend{padding:0 2em 1.5em; text-align:left;}

#prevnext ul li {font-size:2rem; width:40px; height:40px; line-height:40px;}
#prevnext ul li a{width:40px; height:40px;}
#msg p.att{font-size:105%; padding:0 0 .4em;}

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

@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;}
#gallery #bknm li{width : 22.5%;}
}
.md-inner {box-shadow:0 0 12px rgba(224,205,177,0.7) !important;}