/*///////////////////////////////////////////////////////////////////////// default_CSS /////////////////////////////////////////////////////////////////////////*/ body { font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; -webkit-text-size-adjust: 100%; line-height: 1;} body, h1, h2, h3, h4, h5, div, p, dl, dt, dd, ol, ul, li, form, table, caption, tbody, tfoot, thead, tr, th, td, article { margin:0; padding:0; font-weight: normal; font-size:100%; box-sizing: border-box;} img,iframe { border:none;} ol,ul { list-style:none; list-style-type: none;} .alt{ position:absolute; top:-5000px; left:-9999px;} .relative { position: relative;} .hid{visibility: hidden;} .bold { font-weight:bold;} .normal { font-weight:normal;} /*画像保護用*/ .cover {width:100%; height:100%;} /*float*/ .floatL { float:left;} .floatR { float:right;} .clearfloat { height:1px; font-size:1%; clear:both; display:block; background: transparent;} .clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;} .clearfix { min-height:1px;} * html .clearfix {height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ } /*font*/ .tCenter { text-align:center !important} .tRight { text-align:right !important} .tLeft { text-align:left !important} /*font-size*/ html { font-size: 62.5%;} /* = 10px */ body { font-size: 1.6rem; } /* = 16px */ h1 { font-size: 3.2rem; } h2 { font-size: 2.1rem; } h3 { font-size: 2.0rem; } h4 { font-size: 1.8rem; } p { font-size: 1.65rem; } .f160 { font-size:160%;} .f140 { font-size:140%;} .f130 { font-size:130%;} .f120 { font-size:120%;} .f110 { font-size:110%;} .f90 { font-size:90%;} .f85 { font-size:85% !important} .f80 { font-size:80% !important} .fcyel{color:#f7ff34;} .fcpnk{color:#ff2586;} .fcpk{color:#ff1ffe;} .fcbul{color:#25feff;} .fcgr{color:#3aff55;} .fcor{color:#ff6300;} /*link*/ a { text-decoration:none; color:#fff;} a:hover { text-decoration:underline; color:#fff;} #menu li a,#gotop a,#cts1 a,#cts1-2 a,#cts1-3 a,#cts3 a,#cts4 a,#prevnext ul li a,#uptxt a,#chartnavi ul li a,#bknm li a,#show ul li span a,#spcts a,.ishop a,a.btn_i,#cts1 .spot .thum a img,#msg #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap,header#logo,footer .icon img,.bn_line a,#gallery ul#show li span,.bn_ishop 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; } #gotop a:hover,#prevnext ul li a:hover,#chartnavi ul li a:hover,.bn_th a:hover,#cts3 a:hover,.lines a:hover,.odm a:hover,.glr a:hover,#spcts a:hover,.ishop a:hover,a.btn_i:hover,header#logo:hover,footer .icon img:hover,#gallery ul#show li span:hover{text-decoration:none; filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;} .no-link{ pointer-events: none; cursor: default; text-decoration:none;} /*///////////////////////////////////////////////////////////////////////// コンテンツ用CSS／オリジナル設定 /////////////////////////////////////////////////////////////////////////*/ html, body, div#con-body {background: url(../img/bg.jpg) ; color:#fff; letter-spacing: 1px;} #con-body {background-color:transparent;} #top #container { max-height: 100%;} #top header h1 { width:980px; height:680px; margin:0 auto; padding:0; position: relative; background-repeat: no-repeat; background-position: center center; background-image:url(../img/top/main.jpg);} /*#top header h1 { background: url(../img/top/pre.jpg) no-repeat 0 0; width:980px; height:552px; margin:0 auto; padding:0; position: relative;}*/ #update {width:980px; height:53px; margin:0 auto; background: url(../img/top/update.png) no-repeat 0 0;} #update h2 a{display:block; width:140px; height:53px; /*background:rgba(207,45,147,0.6);*/} #update span.ymd{color:#f7ff34; display: inline-block; margin:0 .5em 0 0;} #update ul {height:53px; line-height: 53px; overflow: hidden; margin:0 0 0 9em;} #update li a{color:#fff;} #update li a:hover{text-decoration:underline;} #top header h1 img,#show ul li img {position:absolute;left:0;top:0; width:100%; height:100%;} #top #contents {width:935px; margin:2em auto; text-align:left; /*background:rgba(255,255,255,0.6);*/} #cts1 .spot{width:300px; height:297px; border:3px solid #f7ff34; border-radius:10px; background:url(../img/top/bg_spot.png) no-repeat center 0;} #cts1 .spot h2{width:262px; height:45px; background:url(../img/top/story.png) no-repeat 0 0; margin:.75em auto;} #cts1 .spot .thum {width:265px; height:149px; margin:0 auto; background-size: cover; display:block; border:1px solid #f7ff34;} #cts1 .spot .thum a:hover img,#cts1 .spd .thum a:hover img {-webkit-filter: saturate(300%);filter: saturate(300%);} #cts1 .epno{display:block; margin:-.8em auto .5em; width:30%; background:#f9ff5e; text-align:center; color:#d83281; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #cts1 p.next{color:#f9ff5e; padding:.8em 0; text-align:center;} #cts1 p.next span{font-size:2.5rem; font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; letter-spacing: .12em;} #cts1 .ctsbtn{width:300px;} #cts1 .ctsbtn{width:630px;} .ctsbtn{width:630px; /*background:rgba(249,255,94,0.6);*/} #cts1 .spd{width:300px; height:297px; border:3px solid #b7fb00; border-radius:10px; background:url(../img/top/bg_spd.png) no-repeat center 0; margin:0 15px 0 0;} #cts1 .spd h2{width:271px; height:62px; background:url(../img/top/spd2.png) no-repeat 0 0; margin:.3em auto;} #cts1 .spd .thum {width:265px; height:149px; margin:0 auto; background-size: cover; display:block; border:1px solid #b7fb00;} #cts1 .spd p{color:#b7fb00; padding:.8em 0; text-align:center; font-size:2rem;} .bn_itr a,.bn_news a,.bn_cs a,.bn_comic a,.bn_ch a,.bn_msg a,.bn_oa a,.bn_int a,.bn_line a,.bn_free a,.bn_odm a,.bn_gl2 a,.bn_chara2 a,.bn_ishop a {width:294px; height:135px; border-style: solid; border-width: 3px; border-radius:10px; display:block; background-size: cover; background-repeat: no-repeat; background-position: center center;} .bn_itr a {background-image:url(../img/top/intro.jpg); border-color: #ff1ffe;} .bn_news a {background-image:url(../img/top/news.jpg); border-color: #ff6300;} .bn_cs a {background-image:url(../img/top/caststaff.jpg); border-color: #3aff55;} .bn_comic a {background-image:url(../img/top/comic.jpg); border-color: #25feff;} .bn_ch a {background-image:url(../img/top/chart.jpg); border-color: #b043ff;} .bn_msg a {background-image:url(../img/top/msg.jpg); border-color: #3082ff;} .bn_oa a {background-image:url(../img/top/onair.jpg); border-color: #ff2586;} .bn_int a {background-image:url(../img/top/int.jpg); border-color: #ffa31f;} .bn_line a {background-image:url(../img/top/bn_line.jpg); border-color: #00b900;} .bn_free a {background-color:rgba(255,255,255,0.6); background-image:url(../img/top/free.png); border-color: #fff; background-size: 85%;} .bn_odm a {background-image:url(../img/top/odm.jpg); border-color: #fff;} .bn_gl2 a {background-image:url(../img/top/gl2.jpg); border-color: #87c2ff;} .bn_chara2 a {background-image:url(../img/top/chara2.jpg); border-color: #ff222a;} .bn_ishop a {background-image:url(../img/top/ishop.jpg); border-color: #ff0198;} #cts1-3{margin:0 0 1.5em;} #cts2,#cts3{margin:.5em 0 0;} .bn_gl a,.bn_chara a {width:452px; height:135px; border-style: solid; border-width: 3px; border-radius:10px; display:block; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image:url(../img/top/gl.jpg); border-color: #87c2ff;} .bn_chara a {background-image:url(../img/top/chara.png); border-color: #ff222a; margin:0 0 0 15px;} .bn_itr a:hover,.bn_news a:hover,.bn_cs a:hover,.bn_comic a:hover,.bn_ch a:hover,.bn_msg a:hover,.bn_oa a:hover,.bn_int a:hover,.bn_line a:hover,.bn_gl a:hover,.bn_gl2 a:hover,.bn_chara a:hover,.bn_chara2 a:hover,.bn_ishop a:hover{ filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;} .wani{display:block; border-radius:10px; margin:0; width:300px; height:250px; background-size: cover; background-repeat: no-repeat; background-position: center center;} .wani {background-image:url(../img/top/wani.jpg);} #insta {width:300px; height:250px; border-radius:10px; background-image:url(../img/insta.jpg);} #insta h3{height:50px; display: block;} #cts2R {width:300px; margin:.8em 0 .5em;} #twTL {width:300px; height:/*658*/502px; border:3px solid #00e3aa; border-radius:10px; margin:0 0 15px; background:url(../img/top/tw.png) no-repeat right 0;} #twTL h3{height:53px; display: block;} /*footer*/ footer {margin:2em auto 0; padding:0 0 20px; width:960px; text-align:left;} #top footer{width:930px;} footer .sns { padding:1.5em 0 0;} footer .icon { padding:0 0 1em;} footer .icon img {width:55px; margin:0 .1em 0 0;} .outg{font-size:1rem;} footer p {padding:20px 0; line-height:1.5; font-size:90%;} #rect {width:300px; height: 250px;} /* insta */ div.insta {height:250px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; overflow:hidden; } div.insta ul{margin:0 0 0 10px;} div.insta ul li {float:left; margin:8px 8px 0 0;} div.insta ul li a, div.insta ul li a img { display:block; background-position:center center; background-repeat:no-repeat; width:88px; height:88px; } div.insta ul li a {background-size:cover;} div.insta ul li a:hover img {background-color:rgba(207,45,147,0.6);} div.insta ul li a img { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:1px solid #fff; } div.insta ul li a img.icon-video {background-image:url(/um/img/play.png);} /*------------------　2nd　------------------ */ header#logo {width:955px; height:245px; margin:0 auto; display:block; background-repeat: no-repeat; background-position: center center; background-image:url(../img/hd1.png);} #wrap{width:960px; margin:2.5em auto 4em; text-align:left;} #main{width:630px; padding:1.5em 1.5em 3em; border-style: solid; border-width: 3px; border-radius:10px; background: url(../img/bg_ct.png) no-repeat center 0;} #side{width:300px;} #main h1{width:513px; height:58px; background-size: contain; margin:0 0 .5em; background-repeat: no-repeat; background-position: 0 0;} #main p{font-size: 1.5rem; line-height:1.4;} .ph_cut {width:500px; height:333px; margin:1em auto; background-size: cover; background-repeat: no-repeat; background-position: center center; border:1px solid #00ead2;} .ph_cut_l {width:333px; height:500px; margin:1em auto; background-size: cover; background-repeat: no-repeat; background-position: center top;} /*intro*/ #intro #main h1{background-image:url(../img/intro/ttl.png);} #intro #main{border-color: #ff1ffe; box-shadow:0 0 10px #ff1ffe;} #intro h2{width:552px; height:332px; margin:1em auto; background: url(../img/intro/h2.png) no-repeat 0 0;} #intro #main h3 {color:#ff1ffe; margin:2em 0 1em; padding:.3em 0; border-top:1px solid #ff1ffe; border-bottom:1px solid #ff1ffe; text-align:center; line-height:1.5;} .bdr{border:1px solid rgba(255,255,255,0.3); padding:1em !important; margin:1em 0; font-size:95% !important;} .maincut{background-image:url(../img/intro/main.jpg); width:550px; height:310px;} .prof{background-image:url(../img/intro/prof.png); width:580px; height:246px; border:none;} .bdb{border-bottom:1px dotted rgba(255,255,255,0.5); display:inline-block; margin:0 0 .5em;} /*comic*/ #comic #main h1{background-image:url(../img/comic/ttl.png);} #comic #main{border-color: #25feff; box-shadow:0 0 10px #25feff;} #comic .prof{background-image:url(../img/comic/prof.png);} .wani1{width:300px; height:425px; margin:2em auto 0; background-image: url(../img/comic/comic.jpg);} .copyr{width:300px; text-align:right; display:block; margin:.2em auto .7em; font-size:90%;} .comicopy{width:478px; height:400px; margin:2em auto 1.5em; background-image: url(../img/comic/copy.png);} #comic #main h2{text-align:center; line-height:1.4;} #comic #main h3 {color:#25feff; margin:2em 0 1em; padding:.3em 0; border-top:1px solid #25feff; border-bottom:1px solid #25feff; text-align:center; line-height:1.5;} /*itv*/ #itv #main h1{background-image:url(../img/itv/ttl.png);} #itv #main{border-color: #ffa31f; box-shadow:0 0 10px #ffa31f;} #itv #main h2 {color:#ffa31f; margin:1.5em 0 1em; padding:.3em 0; border-top:1px solid #ffa31f; border-bottom:1px solid #ffa31f; text-align:center; line-height:1.5;} #itv #main h3 {color:#ffa31f; margin:1em 0; padding:.3em 0; border-bottom:1px dotted #ffa31f; line-height:1.5;} #itv #main h3:first-letter {font-size:130%; line-height:1; font-family: "Futura", "sans serif";} #itv #main p{padding:0 0 .7em; font-size:95%;} #itv .ph1{background-image:url(../img/itv/ph1.jpg);} #itv .ph2{background-image:url(../img/itv/ph2.jpg);} #itv .ph3{background-image:url(../img/itv/ph3.jpg);} #itv .ph4{background-image:url(../img/itv/ph4.jpg);} #itv .ph5{background-image:url(../img/itv/ph5.jpg);} /*story*/ #story #main{border-color: #f7ff34; box-shadow:0 0 10px #f7ff34;} #story #main h1{background-image:url(../img/story/ttl.png);} #story #main h2{background:#f7ff34; display:inline-block; padding:.1em .2em; color:#012e5a;} #story #main h3 {color:#f7ff34; margin:1.5em auto 0; padding:.3em 0; border-top:1px solid #f7ff34; border-bottom:1px solid #f7ff34; text-align:center; line-height:1.5; width:500px;} #story h2,#gallery h2{font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";} .trailer{width:500px; height:281px; margin:.5em auto 1.8em;} #story .ph_area{margin:1.5em auto 0; width:100%;} #story .ph_s{width:49%; padding:32.634% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;} #story .ph_s img {position:absolute;left:0;top:0; width:100%; height:100%;} p.soon{text-align:center; padding:2em 0; font-size:140% !important;} #bknm h3 {color:#87c2ff; margin:2em 0 1em; padding:.3em 0; border-top:1px dotted #87c2ff; border-bottom:1px dotted #87c2ff; text-align:center; line-height:1.5; font-family: "Futura", "sans serif"; letter-spacing:.2em;} #story #main #bknm h3{color:#f7ff34; margin:2em 0 1em; padding:.3em 0; border-top:1px dotted #f7ff34; border-bottom:1px dotted #f7ff34; text-align:center; line-height:1.5; font-family: "Futura", "sans serif"; letter-spacing:.2em; width:100%;} #bknm ul {margin:1em auto 0; width:100%;} #story #bknm li,#gallery #bknm li{display:inline-block; margin:1% 0.5% 1%; text-align:center; width : 23%; width: -webkit-calc(100% / 4 - 2%) ; width: calc(100% / 4 - 2%) ;} #story #bknm li a,#gallery #bknm li a {display:block; background-color:rgba(135,194,255,0.9); width:100%; height:0; border:2px solid #87c2ff; padding:66.5% 0 0; border-radius:10px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center top;} #story #bknm li a{border:2px solid #f7ff34;} #story #bknm li a:hover,#gallery #bknm li a:hover{filter: saturate(250%); text-decoration:none;} #story #bknm li span.epi,#gallery #bknm li span.epi {background-color:rgba(135,194,255,0.9); padding:.2em; margin:0 0 0 .5em; color:#fff; font-size:95%; position: absolute; bottom: 1px; left: 0; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #story #bknm li span.epi{background-color:rgba(247,255,52,0.9); color:#022b4d;} #story #bknm li span.date {font-size:1.3rem; color:#f7ff34; padding:.4em 0 0; display:inline-block;} /*gallery*/ #gallery #main h1{background-image:url(../img/gallery/ttl.png);} #gallery #main{border-color: #87c2ff; box-shadow:0 0 10px #87c2ff;} #gallery #main h2{background:#87c2ff; color:#012e5a; margin:0 0 1em; display:inline-block; padding:.1em .2em; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #gallery #bknm h3 {color:#87c2ff; margin:2em 0 1em; padding:.3em 0; border-top:1px dotted #87c2ff; border-bottom:1px dotted #87c2ff; text-align:center; line-height:1.5; font-family: "Futura", "sans serif"; letter-spacing:.2em;} #gallery ul#show{width:100%; font-size:0;} #gallery ul#show li{ display:inline-block; margin:0;} #gallery ul#show li {width : 32.5%; margin:2px; width: -webkit-calc(100% / 3 - 6px) ; width: calc(100% / 3 - 6px) ; } #gallery ul#show li span {background-size: cover; background-repeat: no-repeat; background-position: center center; border:1px solid #87c2ff;} #gallery ul#show li span.lazy {position:relative; display:block;} #gallery ul#show li span.lazy {width:100%; height:0; padding:66.5% 0 0;} #gallery ul#show li span a {width:100%; height:100%; display:block;} #gallery ul#show li span a:hover{ background:rgba(226,211,0,0.3);} #gallery ul#show li img,#extra ul#show li span.lazy img {position:absolute;left:0;top:0; width:100%; height:100%;} #gallery .lbg-pics,#extra .lbg-pics{background-color:none !important; box-shadow:none !important;} #gallery #bknm li.ep1 a{background-image:url(../img/gallery/ep1/ep1_1.jpg);} #gallery #bknm li.ep2 a{background-image:url(../img/gallery/ep2/ep2_1.jpg);} #gallery #bknm li.ep3 a{background-image:url(../img/gallery/ep3/ep3_1.jpg);} #gallery #bknm li.ep4 a{background-image:url(../img/gallery/ep4/ep4_1.jpg);} #gallery #bknm li.ep5 a{background-image:url(../img/gallery/ep5/ep5_1.jpg);} #gallery #bknm li.ep6 a{background-image:url(../img/gallery/ep6/ep6_1.jpg);} #gallery #bknm li.ep7 a{background-image:url(../img/gallery/ep7/ep7_1.jpg);} #gallery #bknm li.ep8 a{background-image:url(../img/gallery/ep8/ep8_1.jpg);} #gallery #bknm li.ep9 a{background-image:url(../img/gallery/ep9/ep9_1.jpg);} #gallery #bknm li.ep10 a{background-image:url(../img/gallery/ep10/ep10_1.jpg);} /*news*/ #news #main h1{background-image:url(../img/news/ttl.png);} #news #main{border-color: #ff6300; box-shadow:0 0 10px #ff6300;} #promo {padding:1em 0 .5em; margin:1em auto;} #promo h2 {color:#ff6300; text-align:center; letter-spacing:.3em; padding:.4em 0; margin:0 0 .8em; border:1px dotted #ff6300;} #promo h3 {font-size:1.8rem; padding:.5em 0 .2em; color:#ff6300;} #promo li {padding:0; border-bottom:1px dotted rgba(255,255,255,0.5); margin:0 .3em .5em; line-height:1.4;} #promo p.txt{padding:0 .5em .5em; font-size:95%;} #promo p.add {font-size:1.2rem !important; border:none !important; padding:.8em .5em;} #promo .pdate{padding:.1em; font-size:90%; background: linear-gradient(transparent 70%, rgba(255,99,0,0.5) 10%);} #news article{margin:1.8em 0 0;} #news span.date {background:rgba(255,99,0,0.8); display:inline-block; padding:.1em .2em; color:#012e5a;} #news article h2 {color:#ff6300; margin:.2em 0 1em; padding: .3em 0; border-bottom:1px solid #ff6300; line-height:1.5;} #news article h3 {color:#ff6300; padding:.5em 0 .3em .5em; border-left:3px solid #ff6300; font-size:105%;} #news article p{padding:0 0 1em;} #news article a{color:#ff6300;} /*caststaff*/ #caststaff #main{border-color: #3aff55; box-shadow:0 0 10px #3aff55;} #caststaff #main h1{background-image:url(../img/caststaff.png);} #caststaff #main h2 {color:#3aff55; margin:2em 0 1em; padding:.3em 0; border-top:1px solid #3aff55; border-bottom:1px solid #3aff55; text-align:center; line-height:1.5;} #caststaff .cast table{width:100%; margin:.5 auto 1.5em;} #caststaff .cast table td{text-align:center; padding:.3em 0;} #caststaff .cast table td.cname{text-align:left; font-size:2rem; width:48%;} #caststaff .cast table td.chara{text-align:right; font-size:2rem; width:48%;} #caststaff .cast table td.naka{padding:1em 0; font-size:1.5rem; font-family: sans-serif;} #caststaff .staff{margin:3em 0 0; text-align:center; font-size: 1.8rem; line-height:1.5;} #caststaff .staff h3{color: #3aff55; padding:1.5em 0 0;} #caststaff .staff h3:first-of-type{padding:.5em 0 0;} #caststaff .staff .label{margin:0 0 .5em; display:block;} #caststaff .staff ul li{line-height:1.4;} #caststaff .label{font-size:1.4rem;} #caststaff .cast table td.mgn{line-height:3;} /*chart*/ #chart #main h1{background-image:url(../img/chart/ttl.png); margin:0 0 .5em .8em;} #chart #main{border-color: #b043ff; box-shadow:0 0 10px #b043ff; padding:1.5em 0 2em;} #chart .diagram { background: url(../img/chart/chart.png) no-repeat 0 0; position:relative; background-size: cover; margin:1.5em auto 0;} #chart .diagram ul,#chart .diagram ul li {position: absolute;} #chart .diagram ul li a { display: block; background:rgba(176,67,255,0.4); text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap;} #chart .diagram ul li a img {display:block;} #chart .diagram ul li.sz-l a img {width:132px; height:184px; } #chart .diagram ul li.sz-m a img {width:112px; height:160px; } #chart .diagram ul li.sz-s a img {width:94px; height:130px; } #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.tomioka { left:161px; top:241px;} #chart ul li.hada { left: 323px; top:241px;} #chart ul li.hanabayashi { left: 22px; top:69px;} #chart ul li.amekawa { left: 22px; top:243px;} #chart ul li.yoshioka { left: 16px; top:460px;} #chart ul li.tougane { left: 16px; top:655px;} #chart ul li.shimada { left: 482px; top:236px;} #chart ul li.kawakami { left: 482px; top:381px;} #chart ul li.hotta { left: 482px; top:528px;} #chart ul li.uehara { left: 177px; top:13px;} #chart ul li.oyaji { left: 341px; top:13px;} #chart ul li.yoshikun { left: 151px; top:550px;} #chart ul li.kishida { left: 253px; top:550px;} #chart ul li.tsuchiya { left: 356px; top:550px;} /*oa*/ #onair h1{width:307px; height:58px; background:url(../img/ttl_oa.png) no-repeat 0 0; margin:2em auto .8em; } #onair table {text-align:center; border: #fff 1px solid; margin:0 0 1em; border-collapse: collapse; width: 100%; vertical-align: middle; } #onair table th.t_top,#onair table td.t_line01 {border: #fff 1px solid; padding: .5em;} #onair .t_top{background-color:rgba(255,255,255,0.2); color:#f7ff34;} /*msg*/ #msg #main{border-color: #3082ff; box-shadow:0 0 10px #3082ff;} #msg #main h1{background-image:url(../img/msg.png);} #msg #main h2 {color:#fff; margin:1.5em 0 1em; padding:.3em 0; border-top:1px solid #fff; border-bottom:1px solid #fff; text-align:center; line-height:1.5;} iframe#iframe {width:100%; border:none; padding:0; margin:.5em 0 0;} #msg #main ul#notes {width:100%; margin:0 auto 1.5em; line-height:1.5;} #msg #main ul#notes li{margin:0 0 .7em 1em; font-size:90%; text-indent: -1em;} #msg #main ul#notes li:before { content: ''; display: inline-block; width: 0; height: 0; margin-right: 4px; margin-left: 4px; border: transparent solid 5px; border-left-color: #3082ff;} #msg p.pinfo{background-color:rgba(255,255,255,0.1); margin:0 0 2em; padding:1em; font-size:90%; line-height:1.5;} #msg p.pinfo a{color:#f7ff34;} #form #close { margin:40px auto 0; text-align:center;} #form #close a{ font-size:120%; border:1px solid #fff; padding:12px 60px; text-decoration:none; color:#fff;} #prevnext { padding:0; margin:0; text-align:center;} #prevnext ul li {width:50px; height:50px; font-size:2.5rem; font-weight:bold; font-family:arial black,Verdana; color:rgba(48,130,255,0.5); line-height:50px; text-align:center; border-radius:50%; border:1px solid rgba(48,130,255,0.5);} #prevnext ul li a {color:#3082ff; display:block; width:50px; height:50px; border-radius:50%; opacity:1; border:1px solid #3082ff;} #prevnext ul li.prev { float:left; } #prevnext ul li.next { float:right; } #msg .notice{padding:0 0 1.5em; font-size:95%; text-align:center;} /*btn*/ #msg #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {font-size:135%; color:#fff; display:block; text-align:center; width:70%; padding:1em .5em; margin:1em auto; border:2px solid #fff; border-radius:10px;} #msg #writeBtn a{width:55%; margin:1.5em auto;} #msg #agree a:hover,#msg #writeBtn a:hover{color:#3082ff; border-color: #3082ff;} a.btn_ap {width:50%;} a.btn_i {color:#fff !important; padding:1em; border:2px solid #fff; border-radius: 5px; margin:.5em 0; display:inline-block;} /*//////pc//////*/ @media all and (min-width: 768px) { #menu { width:100%; background:rgba(0,15,30,0.5) url(../img/bg_menu.png) no-repeat center center; height:68px;} #menu ul {width:980px; height:68px; margin:0 auto; background:url(../img/menu.png) no-repeat center center;} #menu li { height:68px; float:left; padding:0;} #menu li a { height:68px; display: block; text-indent: 100%; white-space: nowrap; text-decoration:none; overflow: hidden; margin:0 1px 0 0; /*background: rgba(37,254,255,0.05);*/} #menu li a:hover{ background-image:linear-gradient(to top,rgba(247,255,52,0.5),rgba(247,255,52,0)); background:-webkit-gradient(linear,left bottom,left center,from(rgba(247,255,52,0.5)),to(rgba(247,255,52,0)));} #menu li.btn1 a { width:140px;} #menu li.btn2 a { width:140px;} #menu li.btn3 a { width:140px;} #menu li.btn4 a { width:227px;} #menu li.btn5 a { width:120px;} #menu li.btn6 a { width:207px; margin:0;} #cts1 .ctsbtn div{margin:0 0 15px 15px;} /*#cts1 .ctsbtn div:nth-child(1){margin:0 0 15px 15px;} #cts1 .ctsbtn div:nth-child(2){margin:0 0 15px 15px;} #cts1 .ctsbtn div:nth-child(3){margin:0 0 0 15px;}*/ #cts1-2 div,#cts3 div{margin:0 0 15px;} #cts1-2 div:nth-child(2),#cts1-2 div:nth-child(5){margin:0 15px 15px;} #cts3 div:nth-child(2){margin:0 15px 15px;} /*#cts2{margin:5px 0 0;} #cts2 .ctsbtn div{margin:0 0 15px 0;} #cts2 .ctsbtn div:nth-child(odd){margin:0 15px 15px 0;}*/ .wani{margin:0 15px 0 0;} #gotop {position: fixed; bottom: 20px; right: 20px;} #gotop span { display:none;} #gotop a {display:block; width:106px; height:103px; background:url(../img/gotop.png) no-repeat 0 0;} #side #insta{margin:1em 0 0;} #side .bn_line{margin:.6em 0 0;} #side #twTL{margin:1em 0 0; height:500px;} #story h2,#gallery h2{display:inline-block; padding:.1em .2em; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #chart .diagram{ width:600px; height:814px;} } /*//////smp//////*/ @media all and (max-width: 767px) { body,p { font-size: 1.3rem;} h1 { font-size: 2.4rem; } h2 { font-size: 1.7rem; line-height:1.5em;} h3 { font-size: 1.6rem; } h4 { font-size: 1.45rem; } .f90 { font-size: 1.2rem;} #top header h1 { background-size: cover; width:100%; height:0; padding:69.3877% 0 0; margin:0;} /*#top header h1 { background-size: cover; width:100%; height:0; padding:56.3265% 0 0; margin:0;}*/ #top header h1 img,header a img,.ph_cut img,.ph_cut_l img,.diagram img,#cts1 .spot .thum img,#cts1 .spd .thum img {position:absolute;left:0;top:0; width:100%; height:100%;} #top #contents {width:95%; margin:1em auto 0;} #update{width:100%; padding:0; margin:0 0 1em; height:35px; background-size: cover;} #update h2{width:90px;} #update h2 a {width:100%; height:35px;} #update ul {height:35px; line-height:35px; overflow: hidden; margin:0; font-size:90%;} .ctsbtn,#insta,#twTL,.wani,#side,#cts2R{float:none; margin:0 auto;} #cts1 .spot {border:2px solid #f7ff34; width:90%; margin:0 auto 1.2em; height:auto; padding:0 0 0; float:none; background-size: cover;} #cts1 .spot h2{width:60%; height:0; padding:10.3053% 0 0; margin:.5em auto; background-size: cover;} #cts1 .spot .thum,#cts1 .spd .thum{width:80%; height:0; padding:45% 0 0; position: relative;} #cts1 p.next{font-size:1.6rem;} #cts1 p.next span{font-size:2.2rem; font-family: Impact, "Futura", "sans serif"; letter-spacing: 1px;} #cts1 .spd {border:2px solid #b7fb00; width:90%; margin:0 auto 1em; height:auto; padding:0 0 0; float:none; background-size: cover;} #cts1 .spd h2{width:75%; height:0; padding:17.1586% 0 0; margin:1.5% auto .2em; background-size: cover;} #cts1 .spd p{padding:.6em 0; font-size:1.7rem;} #cts1 .ctsbtn,.ctsbtn {width:100%;} #cts2,#cts3{margin:0;} .bn_line,.bn_free,.bn_odm,.bn_ishop{width:296px; float:none; margin:0 auto;} .bn_free,.bn_odm,.bn_odm,.bn_ishop{margin:0 auto 2.5%;} .bn_line a,.bn_free a,.bn_odm a,.bn_ishop a{width:100%; height:0; padding:30% 0 0; background-size: cover; border-width:2px;} .bn_free a{background-size: 65%;} .bn_itr,.bn_news,.bn_cs,.bn_comic,.bn_ch,.bn_msg,.bn_oa,.bn_int,#side .bn_line,.bn_gl2,.bn_chara2{width:48%;} .bn_itr a,.bn_news a,.bn_cs a,.bn_comic a,.bn_ch a,.bn_msg a,.bn_oa a,.bn_int a,#side .bn_line a,.bn_gl2 a,.bn_chara2 a{width:100%; height:0; padding:45% 0 0; background-size: cover; border-width:2px;} #cts1 .ctsbtn div,#cts2 .ctsbtn div{margin:0 0 2.5%;} #cts1 .ctsbtn div:nth-child(odd),#cts1-2 div:nth-child(odd),#cts2 .ctsbtn div:nth-child(odd){margin:0 3% 2.5% 0;} #cts1-3{width:99%;} /*.bn_chara,.bn_chara2{display:none;}*/ .bn_gl,.bn_chara{width:99%; float:none;} .bn_gl,.bn_chara{clear:both;} .bn_gl a{background-image:url(../img/top/gl.jpg);} .bn_chara a{background-image:url(../img/top/chara.png);} .bn_gl a,.bn_chara a{width:100%; height:0; padding:27% 0 0; background-size: cover; border-width:2px;} .bn_chara a{margin:2.5% 0 5%;} .wani{clear:both; width:100%; height:0; padding:32.3275% 0 0; background-image:url(../img/top/wani_sp.jpg); background-size: cover;} #insta{margin:1em auto !important;} #twTL {border:2px solid #00e3aa; height:300px; overflow: hidden !important; margin:0 auto 15px;} footer,#top footer{width:95%; text-align:center; padding:0 0 50px;} footer p {font-size:80%;} footer .sns { padding:2em 0 0;} footer .icon { padding:0 0 1.5em;} footer .icon img {width:50px; margin:0 .2em .2em 0;} #gotop {position: fixed; bottom: 0; left:0; width:100%; text-align:center; font-size:1.8rem; letter-spacing:.5em;} #gotop a {width:100%; height: 45px; display:block; line-height:45px; font-weight:bold; background:rgba(247,255,52,0.8);} #gotop a,#gotop a:hover,#gotop a:visited,#gotop a:active {color:#ff2586; font-family: Impact, "Futura", "sans serif";} #rect {margin:3em auto 0; float:none; background:#eee;} #side{width:100%;} #side .bn_oa{float:left;} #side .bn_line{float:right; margin:0 1% 0 0;} #side .sidebtn{margin:0 0 2em;} /*#side .bn_oa{width:296px; margin:0 0 1em;} #side .bn_oa a{width:100%; height:110px; padding:0;}*/ /*------------------　2nd　------------------*/ header#logo {width:100%; height:0; padding:25.6544% 0 0; margin:0 auto; position:relative; background-size: cover;} #menu ul {width:100%; text-align:center; font-size:0; background:rgba(0,15,30,0.5) url(../img/bg_menu.png) no-repeat center center; /*background-size:cover;*/} #menu ul li {font-size: 1.25rem; /*border-top:1px solid rgba(37,254,255,0.3);*/ float:left;} #menu li.btn2,#menu li.btn5{/*border-left:1px solid rgba(37,254,255,0.3); border-right:1px solid rgba(37,254,255,0.3);*/ margin:0 4px 0;} #menu ul li {width: 33.33333%; width: -webkit-calc(100% / 3 - 4px) ; width: calc(100% / 3 - 4px) ;} #menu li a {height:auto; color:#f7ff34; display: block; width:100%; margin:0; padding:0.9em 0; border-radius:4px; border-style: solid; border-width: 1px;} #menu li.btn1 a { color:#ff1ffe; margin:0 0 1px;} #menu li.btn2 a { color:#ff6300; margin:0 0 1px;} #menu li.btn3 a { color:#f7ff34; margin:0 0 1px;} #menu li.btn4 a { color:#3aff55;} #menu li.btn5 a { color:#b043ff;/*rgba(176,67,255,1)*/;} #menu li.btn6 a { color:#3082ff;} #menu li span.lss {letter-spacing: -1px; font-size: 98%;} #menu li a:hover{ background-image:linear-gradient(to top,rgba(247,255,52,0.5),rgba(247,255,52,0)); background:-webkit-gradient(linear,left bottom,left center,from(rgba(247,255,52,0.5)),to(rgba(247,255,52,0)));} #wrap{width:95%; margin:1.5em auto 0;} #main{float:none; width:100%; padding:1.5em 1em 2.5em; border-width: 2px; background-size: 100%; margin:0 auto 2em;} #main h1{width:100%; height:0; padding:11.3060% 0 0; margin:0 0 .5em;} #main p{font-size: 1.3rem; line-height:1.4;} .ph_cut {width:95%; height:0; padding:63.2181% 0 0; position: relative;} .ph_cut_l {width:60%; height:0; padding:90.225% 0 0; position: relative;} #intro h2{width:95%; height:0; padding:57.1376% 0 0; margin:1em auto; background-size: cover;} .maincut{height:0; padding:53.5454% 0 0;} .prof{width:100%; height:0; padding:42.4137% 0 0;} .wani1{width:60%; height:0; padding:85% 0 0;} .copyr{width:60%;} .comicopy{width:90%; height:0; padding:75.3138% 0 0;} #promo {padding:0; margin:1.5em auto 1em;} #promo h2 {padding:.1em 0; margin:0 0 .5em;} #promo h3 { font-size: 1.35rem; line-height:1.5em; padding:.5em 0 0;} #promo p.add {font-size:1rem !important; padding:.5em;} #news article h3 {padding:.3em 0 .3em .5em; margin:0 0 .5em;} #info span.date,#info span.pdate,#report span.date {font-size: 1.2rem;} #story #main h2{width:100%; text-align:center; margin:0 auto 1em; display:block; font-family: Impact, "Futura", "sans serif";} #story #main h3 {width:90%; font-size:105%; margin:0 auto .5em;} .trailer {width:90%; position: relative; padding: 50.7% 0 0; height: 0; overflow: hidden; margin:0 auto 1.5em;} /*#story #trailer {width:100%; position: relative; padding: 56.25% 0 0; height: 0; overflow: hidden; margin:0 auto 1.5em;}*/ .trailer iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} #story .ph_area{width:99%;} #story #bknm li,#gallery #bknm li{margin:0 0.4% 1.2%; width: -webkit-calc(100% / 4 - 2.4%) ; width: calc(100% / 4 - 2.4%) ;} #story #bknm li a{border:1px solid #f7ff34;} #story #bknm li span.date {font-size:1rem;} #gallery #bknm li a{border:1px solid #87c2ff;} #story #bknm li span.epi,#gallery #bknm li span.epi{padding:.2em .2em 0; font-size:1.1rem; margin:0 0 .2em .2em;} #gallery #main h2{margin:0 0 .5em; font-size:1.5rem; font-family: Impact, "Futura", "sans serif";} #mov_fp{width:90%; height:auto; margin:.5em auto 1em;} .tbs-player{background-size: cover !important;} #spmov ul {margin:2em auto 1em;} #spmov ul li {width:49%; height:auto; margin:0 2% 2% 0; float:left;} #spmov ul li img{position: absolute; top: 0; left: 0;} #spmov ul li a{display:block; width:100%; padding:56.25% 0 0;} #spmov ul li:nth-child(even) {margin:0 0 0 0;} #caststaff #main h2{margin:1em 0 1em} #caststaff .staff h3{padding:1em 0 0;} #caststaff ul li{font-size: 1.4rem;} #caststaff .staff{margin:2em 0 0; text-align:center; font-size: 1.5rem;} #caststaff .label{font-size:1rem;} #caststaff .cast table{margin:.5em auto;} #caststaff .cast table td{vertical-align:top;} #caststaff .cast table td.cname{font-size:1.4rem;} #caststaff .cast table td.chara{font-size:1.4rem;} #caststaff .cast table td.naka{padding:.5em 0; font-size:1.2rem;} #caststaff .cast table td.cln{padding:.4em 0 0;} #caststaff .cast .label{margin:.3em 0 .3em; display:block;} #caststaff .cast table td.mgn{line-height:1; padding:.7em 0 .1em;} #caststaff .cast table td.hyp{padding:.6em 0 .1em;} #chart #main h1{margin:0 0 .5em .5em;} #chart .diagram { width:95%; height:0; padding:128.8335% 0 0; overflow:hidden;} #chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;} #onair h1{width:55%; height:0; padding:10.3908% 0 0; margin:1.2em auto .5em; background-size: cover;} #onair table {font-size:1rem; line-height:1.5em; border:none;} #onair table th.t_top {font-size:1.2rem;} #onair table th.local {width:35%;} #onair table td.t_line01{padding:0.8em .5em;} #onair p.f85{font-size:1rem !important;} #form h2{ font-size: 1.7rem;} #msg p.notice { text-align:left !important; margin:0 0 5px; font-size:80%;} #msg #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {width:80%; font-size:1.6rem;} #msg #writeBtn a{width:60%; margin:1.5em auto .8em;} #prevnext { padding:0; margin:0;} #prevnext ul li { font-size:2rem;} #spcts{width:90%; margin:0 auto;} #spcts ul li{float:left;} #spcts ul li:nth-child(even){margin:0 0 1em 4%;} #spcts .bn_cos{margin:0 0 1em 0 !important;} #spcts .bn_repo{margin:0 0 1em 4% !important;} #spcts .glr a{border:2px solid #f9ff5e; box-shadow:2px 3px #f9ff5e;} a.btn_i {border:1px solid #fff;} } @media all and (max-width: 320px) { body,p { font-size: 1.3rem;} #form #agree a,#msg #writeBtn a,a.btn_prev,a.btn_ap {width:85%; font-size:1.7rem;} #caststaff ul li{font-size: 1.4rem; line-height:1.5;} #caststaff div.staff ul li{font-size: 1.3rem;} #oatable table,#oatable table th.t_top {font-size:1rem;} #report #bknm li a {width:55px; height:55px; line-height:55px;} .announce{font-size:100%;} }