/*///////////////////////////////////////////////////////////////////////// default_CSS /////////////////////////////////////////////////////////////////////////*/ body { font-family: Roboto, 'Helvetica Neue' ,'Terminal', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%;} 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:#cebf00;} .stred{color:#ce4328;} .stblu{color:#4357a9;} .stpnk{color:#c44a8f;} .stpnk2{color:#cf5180;} .stnav{color:#1d2b53;} /*link*/ a { text-decoration:none; color:#1d1d1d;} a:hover { text-decoration:none; color:#1d1d1d;} #menu li a,#gotop a,header 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,#cts1L a,#cts1-2 a,#movlist ul li a img,a.btn_df,.preview a,.btnmenu a,.bn_pmov a,#msg h1 a,#bn_ft ul li a,#gallery ul#show 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 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,#cts1L a:hover,#cts1-2 a:hover,a.btn_df:hover,.preview a:hover,.btnmenu a:hover,.bn_pmov a:hover,#msg h1 a:hover,#bn_ft ul li a:hover,#gallery ul#show 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;} .fade { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .fade:hover { opacity: 0.5; filter: alpha(opacity=60); } /*///////////////////////////////////////////////////////////////////////// コンテンツ用CSS／オリジナル設定 /////////////////////////////////////////////////////////////////////////*/ html, body, div#con-body {background:#f9e9d2 url(../img/bg.png); color:#231815;} #con-body {background-color:transparent;} #container { max-height: 100%;} #top header {width:980px; margin:0 auto; box-shadow:0 0 20px rgba(1,1,1,0.2); position: relative;} #top h1{width:980px; height:680px; background: url(../img/top/main_pc.jpg?1) no-repeat 0 0;} #top header .sns{position:absolute; right:10px; bottom:90px; text-align:right;} #top header .sns img{width:70px; height:70px; margin:0 .12em 0;} #top header .sns span{color:#fff; font-size:70%; line-height:0;} /*.ic_line{filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;}*/ #mov,#cts1-1,#cts1-2,#cts1{margin:2.5em auto 0; width:970px; line-height: 1.5;} #cts1-1{margin:0 auto 1em;} #cts1-2{margin:0 auto 1em;} #cts1{margin:0 auto 1em;} .spot{width:590px; position: relative; padding:0 0 .5em; background-color: #ede6ba; background-image: linear-gradient(132deg, #ede6ba 0%, #d3c473 51%, #ede6ba 100%); box-shadow:0 0 12px rgba(224,205,177,0.7);} .spot h2{width:232px; height:55px; background:url(../img/top/spot.png) no-repeat 0 0; position:absolute; left:-8px; top:-9px;} .spot h3{text-shadow:1px 1px #fff; text-align:right; padding:.2em 1.2em 0 0;} .spot #trailer {width:540px; margin:0 auto;} .spot .ph_cut{width:476px; height:304px; margin:0 auto .3em; border:none;} .thum {background-image:url(../img/top/thum.jpg); background-repeat: no-repeat;} .latest{width:325px; background:url(../img/top/bg_wn.jpg); margin:0 0 1.5em; box-shadow:0 0 12px rgba(224,205,177,0.7); border-radius:6px; padding:0 0 1em; position: relative;} .holder{position:absolute; left:32%; top:-7px;} .clip{position:absolute; right:8%; top:7px;} .update{width:91%; margin:1em auto 0; padding:.8em 0 0; background-color:rgba(255,255,255,0.9); box-shadow:0 0 10px rgba(1,1,1,0.1); background-image:url(../img/top/mark.png); background-repeat: no-repeat; background-position: right 8px top 5px;} .update h2{width:192px; height:50px; background:url(../img/top/wn.png) no-repeat 0 0; margin:0 0 0 -.5em;} .update ul{width:92.5%; margin:0 auto; height:187px; overflow-y: auto;} .update li{border-bottom:1px solid #e1dddd; margin:0 0 .3em; padding:0 0 .3em; line-height: 1.4; font-size:85%;} .update li a:hover{color:#c34787;} .update li span.ymd{background-color:rgba(187,81,140,0.2); font-size:95%; padding:0 .3em;} .update ul::-webkit-scrollbar{width: 5px; background: none;} .update ul::-webkit-scrollbar-thumb{background:rgba(1,1,1,0.1);} /*cts*/ /*.btnmenu{width:970px; margin:0 auto 1.2em;}*/ .btnmenu{width:640px; margin:0 auto; text-align:right; vertical-align:top; font-size:0;} .bn_music,.bn_guest,.bn_story,.bn_gl{display:inline-block; width:308px; box-shadow:0 0 12px rgba(224,205,177,0.7); border:3px solid #fff;} .btnmenu a{display: block; width:100%; height:130px; background-repeat: no-repeat; background-position: center center; background-size: cover;} .bn_music a{background-image: url(../img/top/bn_music.jpg);} .bn_guest a{background-image: url(../img/top/bn_guest.jpg);} .bn_story a{background-image: url(../img/top/bn_story.jpg?2);} .bn_gl a{background-image: url(../img/top/bn_gl.jpg);} /*.bn_story{margin:0 16px 10px 0;} .bn_music{margin:0 16px 0 0;}*/ .bn_story{margin:0 12px 10px 0;} .bn_music{margin:0 12px 0 0;} #bn_ft{width:970px; margin:0 auto; text-align:center;} #bn_ft ul li{display:inline-block; width:308px; box-shadow:0 0 12px rgba(224,205,177,0.7); margin:0 .5em 0;} #bn_ft ul li a{display: block; width:100%; height:130px; background-repeat: no-repeat; background-position: center center; background-size: cover;} .bn_ishop a{background-image: url(../img/top/ishop2.jpg);} .bn_free a{background-image: url(../img/top/tbsfree.png);} .bn_odm a{background-image: url(../img/top/paravi.png);} /*@media all and (-ms-high-contrast:none){ .bn_music{margin:0 13px 0;} }*/ .bn_itv,.bn_quiz{box-shadow:0 0 12px rgba(224,205,177,0.7); border:3px solid #fff; width:476px;} .bn_itv a,.bn_quiz a {display: block; width:100%; height:130px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bn_itv a{background-image: url(../img/top/itv_pc.jpg);} .bn_quiz a{background-image: url(../img/top/quiz_pc.jpg);} .bn_ch a {display: block; width:635px; height:150px; background-repeat: no-repeat; background-position: center center; background-size: cover; box-shadow:0 0 12px rgba(224,205,177,0.7); margin:0 auto 20px;} .bn_spmov a {display: block; width:635px; height:150px; background-repeat: no-repeat; background-position: center center; background-size: cover; box-shadow:0 0 12px rgba(224,205,177,0.7); margin:0 auto 20px;} .bn_repo a,.bn_mov a,.bn_pmov a,.bn_pos a,.bn_lab a,.bn_cmg a {display: block; width:308px; height:250px; background-repeat: no-repeat; background-position: center center; background-size: cover; box-shadow:0 0 12px rgba(224,205,177,0.7); position: relative;} .bn_ch a{background-image: url(../img/top/chart.jpg);} .bn_spmov a{background-image: url(../img/top/spmov2.jpg);} .bn_repo a{background-image: url(../img/top/repo.jpg);} .bn_mov a{background-image: url(../img/top/spmov.jpg?1);} .bn_pmov a{background-image: url(../img/top/pointmov.jpg?1); height:282px; background-position: center top;} .bn_cmg a{background-image: url(../img/top/coming.png); box-shadow:none !important;} .bn_pos a{background-image: url(../img/top/poster.jpg);} .bn_lab a{background-image: url(../img/top/labo.jpg);} .bn_repo span.upd,.bn_mov span.upd,.bn_pmov span.upd,.bn_lab span.upd {color:#fff; position: absolute; top: -10px; left: 10px; padding:17px 0 3px; display:block; width:75px; height:55px; text-align:center; border-radius:50%; background-color:#dda1c6; font-family: 'Avenir Next Condensed','Robot',sans-serif; line-height:1; box-shadow:5px 5px 10px rgba(1,1,1,0.1); font-size:150%;} .bn_mov span.upd{background-color:#a3b0df;} .bn_pmov span.upd{background-color:#95d5d9;} .bn_lab span.upd{background-color:#1d2b53;} .preview a {background: url(../img/top/preview.jpg) no-repeat right 0; display: block; width:962px; height:130px; box-shadow:0 0 12px rgba(224,205,177,0.7); margin:1em auto .5em; border:3px solid #fff;} /*footer*/ .img_cut {width:308px; height: 258px; background:#fff url(../img/top/img_cut.jpg) no-repeat 0 0; border:4px solid #fff;} footer {margin:2em auto 0; background:rgba(224,205,177,0.3);} footer .inner {width:950px; margin:0 auto; position: relative; padding:2em 0 3em;} #rect {width:308px; height: 258px; background:#fff; border:4px solid #fff;} #rect2 {width:300px; height: 250px; background:#fff; position:absolute; right:0; top:-1em;} footer p {padding:15px 0; font-size:90%; font-family: 'Avenir Next Condensed','Robot','Trebuchet MS',sans-serif;} footer .sns img{width:70px; height:70px; margin:0 .2em 0 0;} footer .sns span{font-size:70%; line-height:0;} footer .copy { padding:1em 0 0;} /*------------------　2nd　------------------ */ header.hd2{background-color:rgba(227,225,217,0.3); box-shadow:0 0 20px rgba(1,1,1,0.2);} header #logo{background-image: linear-gradient(to top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); padding:1.5em 0;} header #logo a {width:980px; height:185px; margin:0 auto; background: url(../img/logo.svg) no-repeat center center; display:block; padding:0; background-size:80%;} #contents{width:960px; background: url(../img/cts_bg1.png); margin:3em auto; box-shadow:0 0 12px rgba(224,205,177,0.7); padding:0 0 4em;} #contents .inner{width:94%; background: url(../img/cts_bg2.png); margin:-3.3em auto 0; box-shadow:0 0 10px rgba(1,1,1,0.1); padding:1.5em 0 1em;} #contents p {padding:1em 3em .5em; line-height:1.6;} #contents h1{width:960px; height:300px; background-size: cover; margin:0 auto; background-repeat: no-repeat; background-position: 0 0;} h1.intro{background-image:url(../img/intro/ttl.jpg);} h1.story{background-image:url(../img/story/ttl.jpg);} h1.info{background-image:url(../img/news/ttl.jpg);} h1.music{background-image:url(../img/music.jpg); height:250px !important;} h1.guest{background-image:url(../img/guest/ttl.jpg); height:250px !important;} h1.poster{background-image:url(../img/poster/ttl.jpg); height:250px !important;} h1.caststaff{background-image:url(../img/staff.jpg);} h1.spmov{background-image:url(../img/mov_ttl.jpg);} h1.pointmov{background-image:url(../img/point.jpg);} h1.repo{background-image:url(../img/repo/ttl.jpg);} h1.fmsg{background-image:url(../img/fm.jpg);} h1.chart{background-image:url(../img/chart/ttl.jpg);} h1.labo{background-image:url(../img/labo/ttl.jpg);} h1.quiz{background-image:url(../img/quiz/ttl.jpg);} h1.gallery{background-image:url(../img/gallery/ttl.jpg); height:250px !important;} .ffmc{font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho ProN" , "HG明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;} .ph_cut {width:600px; height:400px; box-shadow:0 0 12px rgba(80,76,76,0.2); margin:1em auto; background-size: cover; background-repeat: no-repeat; background-position: center center; border:5px solid #fff;} .ph_cut_l {width:400px; height:600px; box-shadow:0 0 12px rgba(80,76,76,0.2); margin:1em auto; background-size: cover; background-repeat: no-repeat; background-position: center top; border:5px solid #fff;} .lazy {position:relative; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover;} .lazy img {position:absolute;left:0;top:0; width:100%; height:100%;} /*intro*/ #intro h2{padding:.5em 0 0; text-align:center; font-weight:bold; font-size:220%;} .line1 {background: linear-gradient(transparent 60%, rgba(196,74,143,0.2) 60%);} #intro h3{text-align:center; padding:1em 0 .5em; font-size:140%;} #intro h4{padding:1.5em 0 1.5em; font-size:160%;} #intro .main {background-image:url(../img/intro/main.jpg);} #intro #contents strong{font-size:110%;} #intro #contents p {line-height:1.9;} #intro .bdr p{padding:0;} #intro h2.comme{width:auto; height:auto; margin:-2em 0 0 .5em; background:#c44a8f; padding:0 1em 0; font-weight:bold; color:#fff; display:inline-block; box-shadow:1px 1px 0 #fff; font-size:170%; font-size:2.5vw; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #intro h3.name{color:#c44a8f; text-align:left; padding:.2em 0; border-bottom:1px dashed #c44a8f; margin:0 0 .5em; text-shadow:1px 1px 0 #fff; font-size:130%; font-size:1.7vw;} .bdr{border:1px solid #c44a8f; padding:1em 1.5em ; margin:1em auto 2em; width:90%; box-shadow:2px 4px 6px rgba(10,10,10,0.1); background-color:rgba(255,255,255,0.5);} .bdr:last-child{margin:1em auto 0;} .bdr2{border:1px solid #e1dddd; padding:.8em 1em !important; margin:.5em 0 .8em; font-size:95%;} /*story*/ #story #detail{padding:2em 0 0;} #story #trailer,.emb{width:600px; height:338px; margin:0 auto;} #story #trailer {margin:1em auto 1em;} #story h2{font-weight:bold; color:#c44a8f; padding:.5em 0 1em; /*-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)));*/} #story h2 span.num {font-size:150%; font-family: 'DIN Alternate','Avenir Next Condensed','Roboto Condensed',sans-serif;} #story h2 span.epno {color:#fff; background-color:#c44a8f; padding:1.2em .7em; margin:0 .2em 0 0;} #story h3.epttl{color:#c44a8f; padding:.2em .5em; border:1px solid #c44a8f; display:inline-block; margin:0 0 0 1em; box-shadow:4px 4px 0 #c44a8f; font-size: 135%;} #story #contents p a {color:#c44a8f;} #story #contents p.fl {padding:0 !important;} #story #contents p.fl:first-letter {font-size: 140%; font-weight:bold;} #story .ph_area{margin:1em auto 0; width:90%;} #story .ph_area:last-child{margin:1em auto 2em;} #story .ph_s,#guest .ph_s{width:49%; padding:32.6666% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;} #story .ph_s img,#guest .ph_s img {position:absolute;left:0;top:0; width:100%; height:100%;} .s1{float:right; margin:.8em 0 .2em 1em;} #story #bknm{width:94%; margin:2em auto 0;} #story #bknm li,#guest #bknm li{display:inline-block; width:210px; 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);} #guest #bknm li{margin:0 0 10px 5px;} #story #bknm li a,#guest #bknm li a {color:#fff; display:block; width:100%; height:140px; position:relative; background-size: cover; /*background-image: linear-gradient(147deg, rgba(196,74,143,0) 40%, rgba(196,74,143,0.5) 74%);*/} #story #bknm li span,#guest #bknm li span {position:absolute; bottom:0; left:0; width:100%; background-color:rgba(196,74,143,0.7); padding:.4em 0; font-size:90%;} #story #bknm h3,#guest #bknm h3,#quiz #bknm h3,#gallery #bknm h3,#itv #bknm h3{position:relative; padding:.5em 0; text-align:center; color:#c44a8f; font-family:'Times New Roman',sans-serif; letter-spacing:.2em; text-shadow:1px 1px 0 #fff; font-size: 150%; font-weight:bold; border-top:1px solid #c44a8f; border-bottom:1px solid #c44a8f; margin:0 0 1em;} #story #bknm h3:before,#guest #bknm h3:before,#gallery #bknm h3:before,#itv #bknm h3:before{ content:" "; position:absolute; top:100%; left:50%; width:0; height:0; border-width:10px; border-style:solid; border-color:transparent; border-top-color:#c44a8f; } #story #bknm li span:before{ content: ""; position: absolute; top: -20px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-bottom: 10px solid rgba(196,74,143,0.7); } /*mov*/ #movlist{padding:1em 0 1.5em;} #spmov h2.pttl{text-align:center; color:#80c1cb; margin:0 auto .5em; width:610px; border-top:1px solid #80c1cb; border-bottom:1px solid #80c1cb; padding:.3em 0;} #spmov h2.pttl span{color:#fff; background-color:#86c5d0; font-size:90%; padding:.2em;} #movlist h3{text-align:center; margin:0 auto 1em; border-top:1px solid rgba(226,211,0,0.8); border-bottom:1px solid rgba(226,211,0,0.8); text-shadow:1px 1px 0 #fff; padding:.3em 0; font-weight:bold; font-size:2.3rem;} #movlist ul {width:90%; margin:0 auto;} #movlist ul li {width:270px; margin:0 .4em 1em; background-size: contain; text-align:center; background-repeat: no-repeat; background-position: 0 0; position: relative; display: inline-block;} #movlist ul li a img {width:100%; height:auto;} #movlist ul li a:hover img {filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));} #movlist ul li span.new {position: absolute; top: 5px; left: 0; background:#a3b0df; padding:0 .3em; color:#fff; font-size:100%; font-family: 'DIN Alternate','Avenir Next Condensed','Roboto Condensed',sans-serif;} #movlist ul li span.ttl { display: inline-block; background:rgba(150,166,221,0.3); text-align:center; padding:.2em .5em;} #movlist ul li span.ttl2 { display: inline-block; background:#86c5d0; text-align:center; padding:.2em .5em; margin:-1em 0 0; color:#fff; box-shadow:1px 2px 5px rgba(10,10,10,0.1); -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg);} #spmov #movlist{padding:0; background-image:none;} #spmov #movlist h3{margin:1.5em auto 1em;} #spmov .emb{border:5px solid #fff; width:610px; height:348px; background-color:rgba(255,255,255,0.8); box-shadow:2px 4px 10px rgba(10,10,10,0.1); margin:0 auto 3em;} /*news*/ #promo {width:92%; padding:0 0 .5em; margin:.5em auto 3em; background-color:rgba(255,255,255,0.3); box-shadow:0 5px 10px rgba(80,76,76,0.1);} #promo h2{line-height:26px; position:relative; margin:0 22px 1em 10px; padding:.5em 0 0 .8em; color:#c44a8f; background:rgba(187,81,140,0.1); box-shadow: 12px 0 0 0 rgba(187,81,140,0.1), 0 12px 0 0 rgba(187,81,140,0.1), 1px 15px 4px -3px rgba(187,81,140,0); } #promo h2:before{ content:" "; position:absolute; top:100%; left:100%; width:0; height:0; border-width:12px 12px 0 0; border-style:solid; border-color:transparent; border-top-color:rgba(187,81,140,0.5); } #promo h3{font-size:110%; padding:.2em .5em 0;} #promo li {padding:0; border-bottom: dashed 1px #c44a8f; margin:0 1em .5em;} #promo p.txt{padding:0 .5em .5em; font-size:90%; color:#c44a8f;} #promo p.add {font-size:1.2rem !important; border:none !important; padding:.8em 2em;} #promo .pdate{/*background:rgba(187,81,140,0.1);*/ padding:.1em .5em; font-size:95%; margin:0 0 0 .5em; position: relative;} #promo .pdate::after { display: block; content: ''; position: absolute; top: .5em; left: -.5em; width: 8px; height: 3px; border-left: 2px solid #c44a8f; border-bottom: 2px solid #c44a8f; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #info span.date {color:#fff; padding:2px 3px; background:#c44a8f; display:inline-block; font-size:100%; margin:0 0 0 4%;} #info article {border:1px solid #c44a8f; padding:1em 1.5em; margin:0 auto 3em; width:92%; box-shadow:2px 4px 6px rgba(10,10,10,0.1); background-color:rgba(255,255,255,0.5);} #info article.theme {border:none; padding:1.8em; margin:0 auto; width:90%; box-shadow:2px 4px 10px rgba(10,10,10,0.1); background-color:rgba(255,255,255,0.4);} #info article h2{text-shadow:1px 1px 0 #fff; line-height: 1.4; border-left: solid 5px #c44a8f; border-bottom: dashed 1px #c44a8f; padding: 0.3em 0.5em; margin:0 0 .5em; color:#c44a8f;} #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:1em auto 1.5em;} /*guest*/ #itv #contents .inner,#guest #contents .inner,#poster #contents .inner,#quiz #contents .inner,#gallery #contents .inner{width:92%; background: none; margin:-2.5em auto; box-shadow:none; padding:0 0 1em;} #guest h2{font-weight:bold; font-size:3.5rem; color:#c44a8f; margin:0 0 .3em;} #guest h2 span.epnum{background-color:#c44a8f; color:#fff; margin:0 .3em 0 0; display:inline-block; font-family:'Times New Roman',sans-serif; padding:.25em .5em; font-style:oblique; border-radius:50%;} .num10{letter-spacing:-.1em !important; padding:.25em .35em .25em .2em !important;} #guest h3{text-align:right; font-weight:bold; font-size:160%; line-height:1.3;} #guest h4{font-size:170%; text-align:center; color:#c44a8f; margin:1em auto; border-bottom:1px solid #c44a8f; padding:.4em 0;} #guest h5{color:#c44a8f; font-size:120%; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #guest h5:first-letter {font-size: 150%; font-family:'Times New Roman',sans-serif;} .memo{width:48.5%; background-color:rgba(255,255,255,0.8); box-shadow:2px 4px 8px rgba(10,10,10,0.1); padding:.4em .5em 1.2em; margin:0 0 2em;} .w100{width:100%;} .memo p{font-size:95%; padding:.5em 1.5em 0 !important;} .w100 p{padding:1em 1.5em 0 !important;} .ph_main{width:100%; height:400px; background-repeat: no-repeat; background-position: 0 0; position:relative;} .ver2txt{position: absolute; bottom: 2.8%; right: 2%; padding:.5em 0 0 !important;} #guest .ver2txt h3{text-align:left; font-size:110%; padding:.4em 0 0;} #guest .chara{margin:0; width:48%; background-color:rgba(255,255,255,0.8); box-shadow:2px 4px 10px rgba(10,10,10,0.1); padding:1em; position: absolute; bottom: 10%; right: 0;} #guest .chara p{padding:.5em 0 0 !important;} #guest .ntxt{margin:1em 0; width:100%; background-color:rgba(255,255,255,0.8); box-shadow:2px 4px 10px rgba(10,10,10,0.1); padding:1em;} /*interview*/ #itv #contents .inner{margin:1.5em auto 0; box-shadow:none; padding:0;} #itv h2{font-size:130%; color:#c44a8f; margin:1em auto 0; border-bottom:1px solid #c44a8f; padding:.4em 0;} #itv h2:first-letter {font-size: 150%; font-family:'Times New Roman',sans-serif;} #itv #contents p {padding:1em 1em .5em;} #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; border-radius:50%; box-shadow:2px 4px 6px rgba(10,10,10,0.1); background-size: cover; background-repeat: no-repeat; background-position: center center;} #itv #bknm ul li p { position:absolute; bottom:0; left:0; display: inline-block; text-align:center; color:#fff; font-size:90%; width:100%; padding:0 !important;} #itv #bknm ul li p span {background-color:rgba(150,166,221,1); padding:.15em .3em;} #itv #bknm ul li p span.pnk{background-color:#cf5180;} /*labo*/ #labo #contents .inner{margin:-2.3em auto; padding:1.5em 0 2em; position: relative;} #labo h2{width:40%; border:1px solid #1d2b53; padding:0; color:#1d2b53; font-weight:bold; background-color:#fff; box-shadow:1px 2px 5px rgba(10,10,10,0.1); line-height:1.8; margin:0 0 .5em .8em;} #labo h2.ltxt{width:65%;} #labo h2 span.glass{background-color:#1d2b53; display:inline-block; padding:0 2%; width:30px; margin:0 9px 0 0;} #labo h2 span.glass img{width:90%; vertical-align:text-top;} #labo h3{width:80%;background-color:#fff;color:#1d2b53; -webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px 15px 15px 0; margin:1em 0 .5em;} #labo h3 span{font-family:'Times New Roman',sans-serif; padding:.25em .5em; font-style:oblique; color:#fff; background-color:#1d2b53;} .triangle::before { content: ""; top: 0; right: 0; border-bottom: 6em solid transparent; border-right: 6em solid #1d2b53; position: absolute; z-index: 100; } .triangle::after { display: block; transform: rotate(45deg); } .triangle span.volnum{color: #fff; position: absolute; right: 0; top: 20px; z-index: 101; transform: rotate(45deg); font-weight:bold; font-family:'Times New Roman',sans-serif; font-size:160%;} #labo h3.uniform{font-size:160%; color:#1d2b53; background:none; box-shadow:none; padding:0; margin:1.2em 0 -.2em; font-weight:bold;} #labo h3.uniform span{padding:.2em .5em;} .idea{width:90%; margin:1em auto .5em; background-color:rgba(250,250,250,0.5); box-shadow:0 2px 10px rgba(10,10,10,0.1);} #labo .idea h4{margin:-1.5em 0 0 -.8em; background-color:rgba(226,208,195,0.4); display:inline-block; padding:.2em .5em; color:#c54f87; box-shadow:1px 2px 5px rgba(10,10,10,0.1); border-left: solid 5px #c54f87; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #labo h3.itvq{font-size:120%; color:#1d2b53; background:none; box-shadow:none; padding:0; margin:1.2em 0 -.5em 2em; font-weight:bold; padding:0;} .line2 {background: linear-gradient(transparent 70%, rgba(196,74,143,0.1) 70%);} #labo .idea p{padding:.8em 1em 1.2em;} #labo #bknm{width:92%; margin:2em auto 1em;} #labo #bknm h3{position:relative; padding:.5em 0; text-align:center; color:#1d2b53; font-family:'Times New Roman',sans-serif; letter-spacing:.2em; text-shadow:1px 1px 0 #fff; font-size: 150%; font-weight:bold; border-top:1px solid #1d2b53; border-bottom:1px solid #1d2b53; margin:0 0 .5em; box-shadow:none; width:100%; background:none;} #labo #bknm ul li{display:inline-block;font-family:'Times New Roman',sans-serif;font-style:oblique; background-color:#1d2b53; padding:.25em; margin:0 .5px 0; text-align:center;} #labo #bknm ul li span {border:1px solid #fff; padding:.5em; display:block; font-size:140%;} #labo #bknm ul li a{display:block; color:#fff;} /*quiz*/ #quiz #contents .inner{margin:-3em auto; box-shadow:none; padding:0;} /* flowplayer用 */ #mov-fp {background-color:#efefef; width:600px; height:338px; margin:2em auto 0; box-shadow:2px 4px 10px rgba(10,10,10,0.1); position: relative;} #quiz h2{font-weight:bold; padding:0 0 .2em;} #quiz h3.person{width:600px; color:#fff; background-color:#c44a8f; text-align:center; font-size:140%; margin:0 auto 1em; box-shadow:2px 4px 10px rgba(10,10,10,0.1); padding:.2em 0;} #quiz h3.que{font-weight:bold; text-align:center; font-size:140%;} #quiz h3.que:first-letter {color:#c44a8f; font-size: 150%; font-family:'Times New Roman',sans-serif;} ul#ans{text-align:center;} ul#ans li{display: inline-block; width:36%; font-size: 150%; padding:1em 0; border:1px solid #c44a8f; margin:1em 1em; color:#c44a8f; box-shadow:2px 4px #c44a8f; background-color:rgba(255,255,255,0.8);} ul#ans li span{border-radius:50%; padding:.5% 2.5%; color:#fff; background-color:#c44a8f; margin:0 .3em 0 0; font-family:'Times New Roman',sans-serif; background-color: #c44a8f; background-image: linear-gradient(147deg, #d763a5 0%, #c44a8f 74%);} #quiz #bknm{margin:2.5em auto; background-color:rgba(255,255,255,0.4); box-shadow:2px 4px 10px rgba(10,10,10,0.1);} #quiz #bknm h4{color:#fff; background-color:#c44a8f;text-align:center; font-size:120%; padding:.15em 0;} #quiz #bknm h5{font-size:105%; margin:0 0 .2em; padding:.2em .5em;} #quiz #bknm h5:first-letter {color:#c44a8f; font-size:150%; font-family:'Times New Roman',sans-serif;} #quiz #bknm ul{width:95%; margin:0 auto; padding:0 0 2.5em;} #quiz #bknm ul li {width:45%; display:inline-block; margin:0 2% 4%; border:1px solid #c44a8f; padding:0 0 1em; background-color:#fff; font-size:95%; vertical-align: top;} #quiz #bknm ul li a{width:100%; height:0; padding:55% 0 0; display:block; position:relative; background-size: cover; background-repeat: no-repeat; background-position: center center;} #quiz #bknm ul li.quiz1 a{background-image:url(../img/quiz/quiz1.jpg);} #quiz #bknm ul li.quiz2 a{background-image:url(../img/quiz/quiz2.jpg);} #quiz #bknm ul li.quiz3 a{background-image:url(../img/quiz/quiz3.jpg);} #quiz #bknm ul li.quiz4 a{background-image:url(../img/quiz/quiz4.jpg);} #quiz #bknm ul li.quiz5 a{background-image:url(../img/quiz/quiz5.jpg);} #quiz #bknm ul li.quiz6 a{background-image:url(../img/quiz/quiz6.jpg);} #quiz #bknm ul li.quiz7 a{background-image:url(../img/quiz/quiz7.jpg);} #quiz #bknm ul li.quiz8 a{background-image:url(../img/quiz/quiz8.jpg);} #quiz #bknm ul li.quiz9 a{background-image:url(../img/quiz/quiz9.jpg);} #quiz #bknm ul li.quiz10 a{background-image:url(../img/quiz/quiz10.jpg);} #quiz #bknm ul li img{width:100%; height:100%; position: absolute; left:0; top:0;} #quiz #bknm ul li span.answer{color:#fff; padding:.1em .2em; margin:0 .2em 0 .8em; background-color:#c44a8f; background-image: linear-gradient(147deg, #d763a5 0%, #c44a8f 74%);} /*poster*/ #poster h2,#poster h3{font-weight:bold; text-align:center;} #poster h4{font-weight:bold; margin:1em 0 0;} #poster #contents p {padding:1em 1em .5em; line-height:1.6;} #poster .pos_ph1 {background-image:url(../img/poster/ph1.jpg); width:800px; height:376px; margin:1em auto 0;} #poster .pos_ph2 {background-image:url(../img/poster/ph2.jpg); margin:1em auto 0;} #poster .pos_ph3 {background-image:url(../img/poster/map.png); width:700px; height:435px; margin:1em auto 0;} #poster p.cap1,#poster p.cap2,#poster p.cap3 { width:96%; margin:-10px 0 .5em; display: inline-block; padding:0;} #poster p.cap2 { width:85%;} #poster p.cap3 { width:90%;} /*gallery*/ #gallery #contents .inner{margin:-4em auto 0; padding:0;} #gallery h2{margin:0 0 .5em; background:#c44a8f; padding:0 1.2em .2em; font-weight:bold; color:#fff; display:inline-block; font-size:170%; font-family:'Times New Roman',sans-serif; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #gallery ul#show{font-size:0;} #gallery ul#show li{ display:inline-block; width:215px; border:2px solid #fff; margin:2px 0 2px 4px; box-shadow:1px 2px 10px rgba(10,10,10,0.1);} #gallery ul#show li span {background-size: cover; background-repeat: no-repeat; background-position: center center;} #gallery ul#show li span.lazy {position:relative; display:block;} #gallery ul#show li span a {width:100%; height:143px; display:block; /*background:rgba(196,74,143,0.3);*/} #gallery ul#show li span a:hover{ background:rgba(196,74,143,0.3);} #gallery .lbg-pics{background-color:none !important; box-shadow:none !important;} #bknm{margin:3em auto 0;} #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:#c44a8f; padding:.1em .2em; color:#fff; font-family:'Times New Roman',sans-serif; font-size:140%; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #gallery #bknm li.bk10 a {background-image:url(../img/gallery/ep10/ep10_1.jpg);} #gallery #bknm li.bk9 a {background-image:url(../img/gallery/ep9/ep9_1.jpg);} #gallery #bknm li.bk8 a {background-image:url(../img/gallery/ep8/ep8_1.jpg);} #gallery #bknm li.bk7 a {background-image:url(../img/gallery/ep7/ep7_1.jpg);} #gallery #bknm li.bk6 a {background-image:url(../img/gallery/ep6/ep6_1.jpg);} #gallery #bknm li.bk5 a {background-image:url(../img/gallery/ep5/ep5_1.jpg);} #gallery #bknm li.bk4 a {background-image:url(../img/gallery/ep4/ep4_1.jpg);} #gallery #bknm li.bk3 a {background-image:url(../img/gallery/ep3/ep3_1.jpg);} #gallery #bknm li.bk2 a {background-image:url(../img/gallery/ep2/ep2_1.jpg);} #gallery #bknm li.bk1 a {background-image:url(../img/gallery/ep1/ep1_1.jpg);} /*caststaff*/ #cast h2{text-align:center; color:#c44a8f; border-top:1px solid #c44a8f; margin:.5em auto 1em; border-bottom:1px solid #c44a8f; padding:.4em 0; font-weight:bold;} #staff{margin:.8em 0 2em 30%; font-size:110%; line-height:1.6; width:55%; } #staff h3{margin:1.5em 0 0; color:#c44a8f; text-shadow:1px 1px 0 #fff;} #staff h3:first-of-type{margin:0;} #staff span.work{display:block; margin:-.1em 0 0;} #cast table{width:80%; margin:0 auto 3em;} #cast table td{text-align:center; padding:.2em 0;} #cast table td.cname{text-align:left; font-size:125%; width:45%;} #cast table td.chara{text-align:right; font-size:125%; width:45%; color:#c44a8f;} #cast table td.naka{padding:0.05em 0; font-weight:bold; font-size:2rem;} /*report*/ #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:97%; margin:0 0 0 2%; background-color: rgba(255,255,255,0.5); padding:.5em 1.2em 1em; box-shadow:0 0 8px rgba(1,1,1,0.1);} #report article p{padding:1em .1em; line-height:1.5; font-size:95%;} #report article a {text-decoration: underline;} #report article a:hover {color:#cebf00;} /*#report article p:first-of-type{padding:2em 0 0;}*/ #report article p.cap { width:100%; text-align:center; margin:0 0 1em; display: inline-block; padding:0;} #report article p.cap span {font-size:1.5rem; background:rgba(226,211,0,0.3); padding:.1em; } #report #bknm ul{margin:.3em 0 0;} #report #bknm li{width:100%; line-height: 1.4em; margin:.5em 0 .1em 0; font-size:90%; border-bottom:1px dashed #c44a8f;} #report #bknm li a {display:block; padding:.6em 0; background-color: rgba(255,255,255,0.5);} /*#report #bknm li span.epi {width:11%; height:100%; line-height: 70px; text-align:center !important; font-size:150%; font-weight:bold; display: block; float:left; margin:0 .5em 0 0; background:#967a96; background:-webkit-gradient(linear,left bottom,left top,from(rgba(89,86,98,0.3)),to(rgba(89,86,98,0)));}*/ #report span.date {padding:0 .2em; background:#c44a8f; display:inline-block; color:#fff; font-size:90%;} #push{ cursor:pointer; } #report #prevnext {width:96%; margin:2em 0 1em 2%;} #report #bknm h3{ font-family: 'DIN Alternate','Avenir Next Condensed','Roboto Condensed',sans-serif; position: relative; margin:.2em .2em 0 0; background: #f3eee9; box-shadow: 0px 0px 0px 5px #f3eee9; border: dashed 1px white; padding: 0.2em 0.5em; color: #c44a8f; } #report #bknm h3:after{ position: absolute; content: ''; left: -7px; top: -7px; border-width: 0 0 15px 15px; border-style: solid; border-color: #fff #fff #e7dfd5; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); } /*msg*/ iframe#iframe {width:100%; border:none; padding:0; margin:0;} #msg h1 a{background:rgba(255,255,255,0.4) url(../img/fm_tw.png) no-repeat center center; display:block; width:443px; height:70px; margin:110px 0 0 auto; padding:0;} #msg h2{color:#c44a8f; margin:.5em auto 1em; text-shadow:1px 1px 0 #fff; font-weight:bold; border-top:1px solid #c44a8f; border-bottom:1px solid #c44a8f; 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: #c44a8f;} #msg p.att{font-size:120%; padding:.5em 0 0;} #msg p.pinfo{width:90%; background-color:rgba(187,81,140,0.1); margin:1em auto 1em; padding:1em; font-size:90%; line-height:1.5;} #msg p.pinfo a{text-decoration:underline;} #msg p.postend{padding:1em 0 1.5em !important; margin:-1em 0 0; text-align:center;} #prevnext { padding:0; margin:0 0 1em; text-align:center;} #prevnext ul li {width:50px; height:50px; font-size:2.5rem; font-weight:bold; font-family:arial black,Verdana; background:#eee; color:#fff; line-height:50px; text-align:center;} #prevnext ul li a {color:#fff; background:#c44a8f; display:block; width:50px; height:50px;} #prevnext ul li a:hover{color:#fff;} #prevnext ul li.prev { float:left; } #prevnext ul li.next { float:right; } /*chart*/ #chart .diagram{ position:relative; margin:-.1em auto 0; background: url(../img/chart/dia2.jpg) no-repeat 0 0;} #chart .diagram ul,#chart .diagram ul li {position: absolute;} #chart .diagram ul li a{ display: block; background-color:rgba(214,95,161,0.4); text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap;} #chart .diagram ul li a.blu{background-color:rgba(142,159,224,0.4);} #chart .diagram ul li a img {display:block;} #chart .diagram ul li.sz-l a img {width:182px; height:241px;} #chart .diagram ul li.sz-m a img {width:155px; height:210px;} #chart .diagram ul li.sz-s a img {width:135px; height:185px;} #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.mikoto {left:463px; top:76px;} #chart ul li.nakado {left:224px; top:76px;} #chart ul li.kube {left:478px; top:397px;} #chart ul li.shoji {left:283px; top:397px;} #chart ul li.kibayashi {left:24px; top:133px;} #chart ul li.akihiko {left:713px; top:377px;} #chart ul li.sakamoto {left:89px; top:406px;} #chart ul li.shishido {left:713px; top:729px;} #chart ul li.mori {left:55px; top:729px;} #chart ul li.mukojima {left:65px; top:970px;} #chart ul li.sekiya {left:718px; top:609px;} #chart ul li.natsuyo {left:688px; top:76px;} #chart ul li.suetsugu {left:503px; top:728px;} #chart ul li.kamikura {left:282px; top:681px;}*/ #chart ul li.mikoto {left:456px; top:76px;} #chart ul li.nakado {left:217px; top:76px;} #chart ul li.kube {left:471px; top:385px;} #chart ul li.shoji {left:276px; top:385px;} #chart ul li.kibayashi {left:39px; top:644px;} #chart ul li.akihiko {left:706px; top:376px;} #chart ul li.sakamoto {left:27px; top:106px;} #chart ul li.yukiko {left:90px; top:380px;} #chart ul li.shishido {left:706px; top:718px;} #chart ul li.mori {left:39px; top:936px;} #chart ul li.mukojima {left:239px; top:959px;} #chart ul li.sekiya {left:718px; top:609px;} #chart ul li.natsuyo {left:681px; top:76px;} #chart ul li.suetsugu {left:496px; top:718px;} #chart ul li.kamikura {left:275px; top:666px;} /*btn*/ a.btn_prev,a.btn_ap {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:#c44a8f; 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{font-size:150%; color:#c44a8f; display:block; font-weight:bold; text-align:center; width:50%; padding:.8em; margin:1.5em auto 1.5em; border:1px solid #c44a8f;} 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 1em; 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; padding-left:1.3em; font-size: 110%; line-height: 38px; } .checkm:after, .checkm:before{ content:''; height:18px; width:4px; display:block; background:#c44a8f; 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 {height:82px; background:url(../img/menu.jpg) repeat-x 0 0;} #menu ul {width:980px; margin:0 auto; font-size:0;} #menu li { height:82px; display:inline-block; padding:0; margin:0; border-right:1px solid rgba(250,238,178,0.5);} #menu li:last-child{border:none;} #menu li a { height:82px; display: block; padding:0; margin:0; text-indent: 100%; white-space: nowrap; text-decoration:none; overflow: hidden; width:159px;} /*#menu li.btn4 a { width:150px; filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; background:rgba(165,133,67,0.5);} #menu li.btn5 a,#menu li.btn6 a { width:177px;}*/ #menu li.btn6 a { width:180px;} #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);} .sdw{box-shadow: -5px 0 10px -5px rgba(1,1,1,0.2), 5px 0 10px -5px rgba(1,1,1,0.2);} #cts1L{width:635px; float:left;} #cts1L div {margin:0 0 10px 0;} /*#cts1L div:nth-child(odd){margin:0 20px 20px 0;} #bn_ft ul li.bn_free{margin:0 22px 0;}*/ #twTL {width:310px; height:420px; background-color:#fff; box-shadow:0 0 12px rgba(224,205,177,0.7); overflow:hidden;} #twTL h3{width:107px; height:28px; background:url(../img/top/twt.png) no-repeat 0 0; margin:.5em auto;} #twTL_sp{display:none !important;} #top #rect2 {position:absolute; right:0; top:-4em;} #top footer{margin:7em auto 0;} #top footer .inner {width:960px; margin:0 auto; position: relative; padding:3.5em 0;} #gotop {position: fixed; bottom: 20px; right: 10px;} #gotop span { display:none;} #gotop a {display:block; width:92px; height:90px; background:url(../img/gotop.png) no-repeat 0 0;} #btnBn div{margin:15px 20px 0 0;} #btnBn div:nth-child(3n) {margin:15px 0 0 0;} #btnBn .bn_line{display:none;} /*#chart .diagram{ width:888px; height:1173px;}*/ #chart .diagram{ width:881px; height:1163px;} #report .ph_cut{width:450px; height:300px;} #report .ph_cut_l{width:300px; height:450px;} } /*//////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{position:absolute;left:0;top:0; width:100%; height:100%;} #top header{width:100%;} #top header h1 img.cover{position:absolute;left:0;top:0; width:100%; height:0;} #top h1{width:100%; height:0; padding:74.53125% 0 0; background: url(../img/top/main_sp.jpg?1) no-repeat 0 0; background-size:cover;} #top header .sns{position:absolute; right:1.8%; top:0; text-align:right; padding:55% 0 0;} #top header .sns img{width:14%; height:auto; margin:0 0 0 0.3%;} #top header .sns span{padding:.8em .8em 0 0; display: block; font-size: 9px; transform: scale(0.75); transform-origin: right top; } #menu ul {width:100%; text-align:center; font-size:0; background:url(../img/menu_sp.png) repeat-x 0 0; background-size:contain;} #menu li {display:inline-block; padding:0; margin:0; border-right:1px solid #faeeb2; font-size: 13px; text-shadow:1px 0 0 #fff; font-size:3.2vw; line-height:1.25; font-weight:bold;} #menu li span.eng{display:block;color:#fff; font-size:88%; font-size:2.2vw; font-family: 'Avenir Next Condensed','Roboto Condensed',sans-serif; text-shadow:0 0 5px rgba(77,46,45,0.3); letter-spacing: .1em;} #menu li:first-letter {font-size: 120%; color:#c44a77;} #menu li:last-child,#menu li.btn3{border:none;} #menu li.btn1,#menu li.btn2,#menu li.btn3{border-bottom:1px solid #faeeb2;} /*#menu li.btn4 a { filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; }*/ #menu ul li {width : 33.33333%; width: -webkit-calc(100% / 3) ; width: calc(100% / 3) ;} #menu li a {height:auto; display: block; width:100%; margin:0; padding:.5em 0 .6em; background-image:linear-gradient(to top,rgba(206,161,40,0.8),rgba(206,161,40,0)); background:-webkit-gradient(linear,left bottom,left center,from(rgba(206,161,40,0.8)),to(rgba(206,161,40,0)));} #menu li span.lss {letter-spacing: -1px; font-size: 98%;} #menu li span.lss2 {letter-spacing: .2em;} #mov,#cts1-1,#cts1,#cts1,#bn_ft {width:98%; margin:0 auto; float:none;} #mov{margin:1em auto 0;} .latest{width:98%; padding:3% 0 .8em; margin:0 auto 2%; float:none;} .holder{position:absolute; left:38%; top:-7px; width:25%;} .clip{right:8%; top:0; padding:1% 0 0;} .update{width:94%; margin:0 auto; padding:.8em 0 0; background-size: 14%;} .update h2{height:0; padding:8.75% 0 0; width:40%; background-size: contain;} .update ul{height:70px; margin:.5em auto 0;} .spot{float:none; width:98%; margin:1em auto;} .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:94%; position: relative; padding: 52.875% 0 0; height: 0; overflow: hidden; margin:.3em auto .3em;} #trailer iframe,.emb iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} .spot .ph_cut{width:94%; padding:60.0336% 0 0; height: 0;} .bn_pmov{float:none; width:98%; margin:0 auto 2%;} .bn_pmov a{width:100%; height:0; padding:27.03125% 0 0; background-image: url(../img/top/pointmov_sp.jpg?1);} .btnmenu{width:98%; margin:0 auto; float:none;} /*.bn_story,.bn_gl{display:none !important;}*/ .bn_ch,.bn_spmov{width:98%; margin:0 auto 3%; float:none;} .bn_itv{width:100%; margin:0 auto; float:none; clear:both;} .bn_itv{border:2px solid #fff; margin:0 auto 2%;} .bn_music,.bn_guest,.bn_gl,.bn_story{width:49%; margin:0 0 2%; border:2px solid #fff;} .bn_guest,.bn_gl{margin:0 0 2% 2%;} .btnmenu a{width:100%; height:0; padding:40% 0 0;} #cts1-2 {width:96%; margin:0 auto;} .bn_itv,.bn_quiz{width:49%; border:2px solid #fff; display:inline-block; font-size:0;} .bn_itv a{background-image: url(../img/top/itv_sp.jpg);} .bn_quiz a{background-image: url(../img/top/quiz_sp.jpg);} .bn_itv a,.bn_quiz a{height:0; padding:48.7012% 0 0;} .bn_ch a,.bn_spmov a{width:100%; height:0; padding:23.622% 0 0; margin:0;} /*.bn_itv a{background-image: url(../img/top/itv_pc.jpg); width:100%; height:0; padding:23.622% 0 0;}*/ .bn_repo,.bn_mov,.bn_lab,.bn_pos,.bn_cmg{width:48%; margin:0 1% 2%;} .bn_repo a,.bn_mov a,.bn_lab a,.bn_pos a,.bn_cmg a{width:100%; height:0; padding:81.1688% 0 0;} .bn_repo span.upd,.bn_mov span.upd,.bn_pmov span.upd,.bn_lab span.upd {top: -8px; left: 5px; padding:15px 0 0; width:55px; height:40px; text-align:center; font-size:130%; line-height:85%;} /*.bn_ishop a{width:300px; height:130px; background-size:contain;}*/ #bn_ft ul{font-size:0;} #bn_ft ul li{width:48%; margin:0 1% 2%;} #bn_ft ul li a{height:0; padding:42.2077% 0 0;} .preview{width:94%; margin:1% auto;} .preview a {width:100%; height:0; border:2px solid #fff; padding:14% 0 0; background-size:cover;} #cts1R{float:none; margin:0 auto 1.5em;} #twTL {width:310px; margin:1.5em auto 0; height:350px; background-color:#fff; box-shadow:0 0 12px rgba(224,205,177,0.7); overflow:hidden;} #twTL h3{width:107px; height:28px; background:url(../img/top/twt.png) no-repeat 0 0; margin:.5em auto;} .img_cut{display:none;} 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(224,205,177,0.3);} #rect {margin:0 auto; float:none; border:none; width:300px; height:250px; clear:both; background:#eee;} #rect2{position:static; margin:0 auto 2em;} #gotop {position: fixed; bottom: 0; left:0; width:100%; text-align:center; letter-spacing:.4em; font-family: 'Avenir Next Condensed','Roboto Condensed',sans-serif;} #gotop span{font-size:180%; padding:2% 0 0; vertical-align: middle; display:inline-block; background-image:linear-gradient(to top,#cba225,#dcc462); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #gotop span img{width:8%; margin:0 10px 0 0;} #gotop a {width:100%; display:block; font-weight:bold; padding:.7em 0; background-color:rgba(255,255,255,0.5); background-image:linear-gradient(to top,rgba(255,255,255,0.5),rgba(224,205,177,0)); background: linear-gradient(to top, rgba(255,255,255,1) 20%,rgba(255,255,255,0.6) 60%,rgba(224,205,177,0) 100%);} /*------------------　2nd　------------------ */ header.hd2{box-shadow:0 0 10px rgba(1,1,1,0.2);} header #logo{padding:0;} header #logo a {width:82%; height:0; padding:26% 0 0; background-size:contain;} #contents{width:100%; margin:1em auto; padding:0 0 2em;} #contents h1{width:100%; height:0; padding:31.25% 0 0;} #contents h1.music,#contents h1.guest,#contents h1.poster,#contents h1.gallery{height:0 !important; padding:26.0416% 0 0;} #contents .inner{width:94%; margin:-5% auto 0; padding:1.2em 0 .5em;} #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; border:4px solid #fff;} .ph_cut_l {width:60%; height:0; padding:90.225% 0 0; position: relative; margin:1em auto .5em; border:4px solid #fff;} #btnBn{width:95%; margin:1em auto 0;} #btnBn div{margin:2% 0 0 0;} #btnBn div:nth-child(odd){margin:2% 2% 0 0;} #bknm{width:100%; margin:2em auto 1em;} .bdr{padding:.5em 1.2em 1em; margin:1em auto 1.5em;} .bdr p{font-size:95%;} /*intro*/ #intro h2{padding:0; font-size:170%; font-size:5vw;} #intro h3{font-size:120%; font-size:3.4vw; padding:.5em 0 0; font-weight:bold;} #intro h4{padding:.5em 0 1em; font-size:120%; font-size:3.7vw; font-weight:bold;} #intro h2.comme{font-size:120%; font-size:3.5vw;} #intro h3.name{font-size:115%;} #intro #contents p {line-height:1.8;} /*story*/ #story #contents .inner {padding:.5em 0 1em;} #story .ph_cut {width:90%; height:0; padding:60% 0 0; margin:.5em auto 1em;} #story h3.epttl{width:90%; width: calc(90% - 4px); text-align:center; font-size: 125%; margin:0 auto; font-size:4vw; display:block;} .s1,#story #contents p.fl{float:none;} #story #contents p.fl{width:100%;} .s1{margin:1.2em auto .2em; width:90% !important; padding:60% 0 0 !important;} #story .ph_area{margin:1em auto .5em;} #story .ph_area:last-child{margin:.5em auto 1.5em;} #story h2{padding:3% 0 3%; } #story h2 span.num {font-size:130%; font-size:6vw;} #story h2 span.epno {padding:3% 2%;} #story #trailer,.emb {width:90%; position: relative; padding: 50.7% 0 0; height: 0; overflow: hidden; margin:.5em auto 1em;} #story #trailer iframe,.emb iframe,#spmov .emb iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} #story #bknm li,#guest #bknm li{width:46%; margin:0 .5% 2% 2%;} #story #bknm li a,#guest #bknm li a{height:0; padding:60% 0 0;} #story #bknm li span,#guest #bknm li span{padding:.3em 0;} /*mov*/ #spmov h2.pttl{margin:0 auto .5em; width:90%; font-size:150%; font-size:4.8vw;} #spmov h2.pttl span{font-size:82%; padding:.2em;} #movlist{padding:0;} #movlist h3{font-size:1.8rem;} #movlist ul {margin:0 auto 1em;} #movlist ul li {width:48%; height:auto; margin:0 2.5% 2% 0;} #movlist ul li img{position: absolute; top: 0; left: 0;} #movlist ul li a{display:block; width:100%; padding:56.25% 0 0;} #movlist ul li:nth-child(even) {margin:0;} #movlist ul li span.ttl { padding:.1em .5em; font-size:90%; margin:.2em 0 0;} #movlist ul li span.new{z-index:1;} #spmov #movlist h3{font-size:1.6rem; text-align:left; padding:.3em 1em; line-height:1.4;} #spmov #movlist h3:first-of-type{margin:.8em auto 1em;} #spmov #movlist ul li span { text-align:left; font-size:85%; line-height:1.3;} #spmov .emb {width:90%; position: relative; padding: 50.7% 0 0; height: 0; overflow: hidden; margin:.5em auto 2em; border:none;} /*news*/ #promo{margin:.5em auto 2em;} #promo h2{line-height:18px; font-size: 140%; margin:0 16px 1em 5px; padding:.6em 0 0 .4em; color:#c44a8f; box-shadow: 12px 0 0 0 rgba(187,81,140,0.1), 0 12px 0 0 rgba(187,81,140,0.1), 1px 15px 4px -3px rgba(187,81,140,0); } #promo h3{font-size:100%; line-height:1.4;} #promo li{margin:0 .5em .5em;} #promo p.add {font-size:1rem !important; padding:.5em 1.5em;} #promo .pdate{font-size:90%; margin:0 0 0 .8em;} #promo .pdate::after { top: .4em; left: -.6em;} #info article{padding:.8em 1em; margin:0 auto 2em;} #info article.theme{padding:1.2em 1.5em ;} #info article h2{border-left: solid 3px #c44a8f; font-size: 1.6rem; } #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;} .checkm{ position:relative; padding-left:1.3em; font-size: 100%; line-height: normal; } /*guest*/ #guest #contents .inner{margin:-.5em auto 0; padding:0;} #guest h2{font-size:160%; font-size:5vw;} #guest h2 span.epnum{padding:.35em .5em .2em;} .num10{padding:.35em .36em .25em .15em !important;} #guest h2 span.f80{ display:inline-block; margin:0 0 0 0; font-size:4.4vw !important; /*background:#eee;*/ float:right; width:85%;} #guest h3{text-align:left; font-size:150%;} #guest h4{font-size:155%; padding:.4em 0 .2em; margin:.5em auto .5em;} #guest h5{font-size:110%;} .ph_main{width:100%; height:auto; padding:66.666% 0 0; background-size:100%;} #guest .chara,.ver2txt{margin:0; width:100%; position: static; box-shadow:none; padding:.5em 1em 1em;} #guest .chara p{padding:.5em 0 0 !important;} .memo{float:none; width:100%; margin:0 0 1.5em;} .memo p{padding:.5em 1em 0 !important;} #guest .ph_s{float:none; width:100%; height:0; padding:66% 0 0;} /*interview*/ #itv #contents .inner{margin:0 auto;} #itv h2{font-size:115%; margin:.5em auto 0;} #itv h2:first-letter {font-size: 140%; font-family:'Times New Roman',sans-serif;} #itv #contents p {padding:1em .5em .5em;} #itv #bknm ul{text-align:center; width:98%; } #itv #bknm li{margin:0 3% 2%;} /*labo*/ #labo #contents .inner{margin:-1em auto;} #labo h2{width:75%; border:1px solid #1d2b53; padding:0; color:#1d2b53; font-weight:bold; background-color:#fff; box-shadow:1px 2px 5px rgba(10,10,10,0.1); margin:0 0 .5em .8em; font-size:140%; font-size:4vw;} /*#labo h2.ltxt{width:80%; line-height:1.4; background:none; border:none; box-shadow:none;}*/ #labo h2.ltxt{width:82.5%; font-size:3.4vw;} #labo h2 span.glass{width:8%;} #labo h2.ltxt span.glass{width:5.5%; margin:0 5px 0 0; padding:0 1.5%; /*display:none;*/} #labo h3{width:94%; box-shadow:none; padding:5px; background:none; margin:5px auto; font-size:110%; background-color:#fff; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1);} #labo h3 span{display:block; margin:0 0 2px;} .triangle::before { border-bottom: 5em solid transparent; border-right: 5em solid #1d2b53; } #labo h3.uniform{font-size:140%;margin:1em auto 0; font-weight:bold; width:90%; text-align:center;} #labo h3.itvq{font-size:110%; padding:0; margin:.5em 0 0 1em;} .triangle span.volnum{top: 10px;} #labo .ph_cut {width:90%; height:0; padding:60% 0 0; margin:0 auto .5em;} #labo #bknm ul li{width:18.5%; padding:.2em; margin:0 0 1.5% .5%;} #labo #bknm ul li span {padding:.4em; font-size:140%;} /*quiz*/ #quiz #contents .inner{margin:-1em auto 0;} #mov-fp{ width:100%; height:auto; padding:56.25% 0 0; margin:1em auto 0;} #mov-fp .tbs-player {width:100%; height: 100%; position: absolute; left: 0; top: 0;} #quiz h2,#quiz h3{font-size:115%; font-size:3.6vw;} #quiz h3.person{width:100%; margin:0 auto .5em;} #quiz h3.que{font-size:125%; font-size:4.15vw;} ul#ans li{width:43%; /*width:47%;*/ font-size:135%; font-size:4.5vw; padding:3% 0; border:1px solid #c44a8f; margin:.8em 1.6%; /*margin:.8em .8%;*/} ul#ans li span{padding:1.65% 4%;} #quiz #bknm{margin:1.5em auto 0;} #quiz #bknm h4{font-size:94%;} #quiz #bknm h5{line-height:1.3; font-size:95%;} #quiz #bknm ul{padding:0 0 1.8em;} #quiz #bknm ul li {width:47%; margin:0 1% 3.5%; padding:0 0 .6em; } /*poster*/ #poster h2,#poster h3{font-size:130%; text-align:left; font-size:3.8vw;} #poster h4{font-size:125%;} #poster #contents p {padding:.5em .5em .5em; line-height:1.6;} #poster .pos_ph1{width:100%; border:none; height:0; padding:47% 0 0; margin:1.5em auto 0; box-shadow:none;} #poster .pos_ph3{width:100%; height:0; padding:62.1428% 0 0; margin:.4em auto 0; box-shadow:none;} #poster p.cap1,#poster p.cap2,#poster p.cap3 { width:100%; margin:-5px 0 0; display: inline-block; padding:0;} #poster p.cap2 { width:98%;} /*gallery*/ #gallery #contents .inner{margin:-3em auto 0; padding:0;} #gallery h2{font-size:150%;} #gallery ul#show li {border:1px solid #fff; 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 : 23%; margin:0 .6% 1.5%; /*width: -webkit-calc(100% / 4) ; width: calc(100% / 4) ;*/} #gallery #bknm li span{font-size:130%;} /*caststaff*/ #cast h2{font-size:1.6rem; font-size:4vw;} #cast table{width:100%; margin:.5em auto 2.5em; font-size:80%;} #cast table td.cname{text-align:left; font-size:1.35rem; font-size:3.4vw;} #cast table td.chara{text-align:right; font-size:1.35rem; font-size:3.4vw; vertical-align:top;} #cast table td.naka{padding:.1em 0; font-size:1.5rem; font-size:3.5vw;} #staff{margin:0 auto 2em; font-size:105%; font-size:3.2vw; width:85%;} #staff h3{margin:1.2em 0 0; font-size:120%; font-size:3.8vw; font-weight:bold;} #chart .diagram { width:92%; background-size: cover; height:0; padding:121.4483% 0 0; overflow:hidden;} #chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;} #report #entry{float:none; width:100%;} #report #entry h2{font-size:1.65rem; font-size:4vw;} #report #bknm{float:none; width:92%; margin:2.5em auto 1em;} #report article{background:none; box-shadow:none; padding:0 1em 1em;} #report article p{padding:.6em 0;} #report article p.cap span { font-size:1.2rem;} #report #bknm ul{margin:.5em 0 1.5em;} #report #bknm li{width:100%; line-height: 1.4em; margin:0 0 .1em;} #report #bknm h3{font-size:1.65rem; font-size:4.5vw; margin:0;} #report #prevnext {width:94%; margin:0 auto 0;} #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:75%; font-size:1.5rem; font-size:4vw;} a.btn_df{width:70%; margin:.8em auto 1.5em; font-size:130%;} #prevnext { padding:0; margin:0;} #prevnext ul li { font-size:2rem;} #msg p.att{font-size:105%; padding:0 0 .4em;} #msg p.postend{padding:.8em 1em 1em !important; font-size:86%; text-align:left;} a.btn_i {margin:.5em 0 .2em; padding:.5em 2em;} } @media all and (max-width: 320px) { body,p { font-size: 1.3rem;} .f90 { font-size: 1rem;} .bn_repo span.upd,.bn_mov span.upd {top: -5px; left: 5px; padding:10px 0 0; width:40px; height:30px; text-align:center; font-size:110%; line-height:85%;} #menu li span.lss {letter-spacing: -1px; font-size: 95%;} #form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {width:85%; font-size:1.7rem;} #cast table td.cname,#cast table td.chara{font-size:1.2rem;} #labo #bknm ul li{width:23%; padding:.2em; margin:0 0 1.5% .5%;} #gallery #bknm li{width : 22.5%;} .md-inner { box-shadow:0 0 12px rgba(224,205,177,0.7) !important; }