/* ================================= sicks_specsaga lower CSS
================================= */

@media all and (min-width: 768px) {
.cmn .sns-timeline { width: 290px; margin-bottom: 0; padding: 0 5px 10px 5px; background-color:#55aecc;}
.cmn .twtfb { margin-bottom: 0;}
}

/*	header
============================== */
#header { width: 100%; max-width: 980px; position:relative; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-position:center top; background-image: url(../img/cmn_bg_header.png); padding:10px 0 5px 0; margin: 0 auto;}
#header #logo_space { width: 69%; max-width: 268px; margin: 0 auto 5px auto;}
#header #logo { width: 100%; height: 0; padding-top: 59.701492537313433%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/cmn_header.png); position: relative;}
#header #logo a { width: 100%; height: 0; padding-top: 59.701492537313433%; display: block; position: absolute; top: 0; left: 0;}
#header #head_paravi_space { width: 69%; max-width: 268px; margin: 0 auto;}
#header #head_paravi { width: 100%; height: 0; padding-top: 26.119402985074627%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/head_paravi.png); position: relative;}
#header #head_paravi a { width: 100%; height: 0; padding-top: 26.119402985074627%; display: block; position: absolute; top: 0; left: 0;}
#header #head_paravi a:hover { background: rgba(0, 0, 0, .1); border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
@media all and (min-width: 768px) {
#header { position: relative; min-height: 320px; overflow: hidden;}
#header #head_paravi_space { position: absolute; top: 108px; right: -25px;}
}

/* ================================= 
TBS Slider Menu
================================= */
.menu { background-color:hsla(196, 84%, 59%, 0.5); padding:5px 0;}
.menu > nav { position:relative;}
.menu > nav .outer { overflow:hidden; background-image: -webkit-gradient(linear, left top, right top, from(hsla(223,61%,17%,0.5)), color-stop(0.2, hsla(223,61%,17%,0)), color-stop(0.8, hsla(223,61%,17%,0)), to(hsla(223,61%,17%,0.5))); background-image: -webkit-linear-gradient(left, hsla(223,61%,17%,0.5), hsla(223,61%,17%,0) 20%, hsla(223,61%,17%,0) 80%, hsla(223,61%,17%,0.5)); background-image: linear-gradient(to right, hsla(223,61%,17%,0.5), hsla(223,61%,17%,0) 20%, hsla(223,61%,17%,0) 80%, hsla(223,61%,17%,0.5)); margin:0 26px;}
.menu > nav .outer ul { display:block; -webkit-transform: translateZ(0);}
.menu > nav ul { list-style-type:none;}
.menu > nav .outer ul li { background-repeat:no-repeat; float:left;}
.menu > nav .outer ul li:not(:last-child) { background-image:url(../img/cmn_menu_icon.png); background-position:right center; padding-right:40px; background-size:40px 27px;}
.menu > nav ul li a, .menu > nav ul li a span { display:block;}
.menu > nav ul li a { text-decoration:none;}
.menu > nav .outer ul li a { text-align:center; line-height:1.25; padding:0.25em 1.5em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.cmn .menu > nav .outer ul li a:before { display:block; color: rgba(255, 255, 255, 1); font-family: 'IM Fell DW Pica', 'serif'; text-shadow:1px 2px 3px rgba(0, 0, 0, 1); font-size:112.5%;}
.cmn .menu > nav .outer ul li a span { color:#ecc280; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; font-weight:bold; font-size:62.5%;}
.menu > nav .outer ul li a:hover, .news .menu > nav .outer ul li.mnews a, .intro .menu > nav .outer ul .mintroduction a, .cast .menu > nav .outer ul li.mcast a, .episode .menu > nav .outer ul li.mepisode a, .bbs .menu > nav .outer ul li.mbbs a, .character .menu > nav .outer ul li.mchara a, .chart .menu > nav .outer ul li.mchart a { background-image: -webkit-gradient(linear, left top, right top, from(hsla(0,100%,40%,0)), color-stop(0.3, hsla(0,100%,40%,0.5)), color-stop(0.7, hsla(0,100%,40%,0.5)), to(hsla(0,100%,40%,0))); background-image: -webkit-linear-gradient(left, hsla(0,100%,40%,0), hsla(0,100%,40%,0.5) 30%, hsla(0,100%,40%,0.5) 70%, hsla(0,100%,40%,0)); background-image: linear-gradient(to right, hsla(0,100%,40%,0), hsla(0,100%,40%,0.5) 30%, hsla(0,100%,40%,0.5) 70%, hsla(0,100%,40%,0));}
.cmn .menu > nav .outer ul li.mhome a:before {content:"TOP";}
.cmn .menu > nav .outer ul li.mnews a:before {content:"News";}
.cmn .menu > nav .outer ul li.mintroduction a:before {content:"Introduction";}
.cmn .menu > nav .outer ul li.mcast a:before {content:"Cast & Staff";}
.cmn .menu > nav .outer ul li.mbbs a:before {content:"BBS";}
.cmn .menu > nav .outer ul li.mepisode a:before {content:"Episode";}
.cmn .menu > nav .outer ul li.mcharacter a:before {content:"Character";}
.cmn .menu > nav .outer ul li.mchart a:before {content:"Chart";}

@media all and (min-width: 768px) {
.menu { margin-top: -155px;}
.menu > nav { width:980px; margin:0 auto;}
.menu > nav .outer { margin:0 30px;}
.menu > nav .outer ul li:not(:last-child) { padding-right:53px; background-size: 53px 36px;}
.cmn .menu > nav .outer ul li a:before { font-size:162.5%;}
.cmn .menu > nav .outer ul li a span { font-size:75%;}
}
/* ctrl */
.menu > nav ul.ctrl li { position:absolute; top:50%; margin-top:-17px;}
.menu > nav ul.ctrl li a { width:24px; height:34px; background-image:url(../img/cmn_menu_ctrl.svg); background-repeat:no-repeat; text-indent:110%;white-space:nowrap;overflow:hidden; background-color: rgba(234, 178, 102, 1);}
.menu > nav ul.ctrl li.ctrl-lef { left:0;}
.menu > nav ul.ctrl li.ctrl-rig { right:0;}
.menu > nav ul.ctrl li.ctrl-lef a { background-position:-1px -95px;}
.menu > nav ul.ctrl li.ctrl-rig a { background-position:0 5px;}
.menu > nav ul.ctrl li a.hidebtn { opacity:0.25; cursor:default;}
@media all and (min-width: 768px) {
.menu > nav ul.ctrl li.ctrl-lef a { background-position:0 -95px;}
.menu > nav ul.ctrl li.ctrl-rig a { background-position:-1px 5px;}
}

/*	column
============================== */
.wrap { text-align:left;}
.wrap:before, .wrap:after { content: ""; display: table;}
.wrap:after { clear: both;}
.col-lef { padding:8px;}
.col-lef main { background-color:hsla(0,0%,0%,0.3); background-image:url(../img/cmn_bg_logo.png); background-position:left bottom; background-repeat:no-repeat; padding:8px; border:1px solid rgba(217, 234, 252, 1);}
@media all and (min-width: 768px) {
.wrap { padding-top:30px; width:980px; margin:0 auto;}
.col-lef { width:656px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; float:left; padding:0;}
.col-lef main { padding:30px 26px 30px 5px; border: 0;}
.col-rig { width:300px; float:right;}
}

/*	main
============================== */
main h1, main h2, main h3, main h4 { font-weight: 800;}
main:before, main:after { content: ""; display: table;}
main:after { clear: both;}
.main-inner { border-top:2px solid  rgba(255, 255, 255, 1); padding-top:20px;}
.main-inner::after { padding-top:1em; display:block; font-family: 'IM Fell DW Pica', 'serif'; color: rgba(217, 55, 50, 1); line-height:1.25;}
.news .main-inner::after {content:"News";}
.intro .main-inner::after {content:"Introduction";}
.episode .main-inner::after {content:"Episode";}
.cast .main-inner::after {content:"Cast & Staff";}
.bbs .main-inner::after {content:"BBS - Fan Message";}
.episode .main-inner::after {content:"Episode";}
.character .main-inner::after {content:"Character";}
.chart .main-inner::after {content:"Character";}
main h1 > span { display:block; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; font-size:125%; line-height:1.5; margin-bottom:0.25em;}
.main-inner::after { font-size:87.5%; text-align:right;}
@media all and (min-width: 768px) {
main h1 { width:60px; float:left; position:relative;}
main h1 > span { position:absolute; left:50%; top:0; font-size:200%; line-height:1; text-align:center; width:1em; margin-left:-0.5em; margin-bottom:0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space:nowrap;}
.main-inner { float:right; width:560px; border-top: 0; border-left:2px solid  rgba(255, 255, 255, 1); padding-top:0; padding-left:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.main-inner::after { font-size:125%; text-align:left;}
}

/*	figure (main)
============================== */
.cmn-pic-main { box-sizing: border-box; width: 100%; margin: 0 auto;}
.cmn-pic-main > p { border: 1px solid rgba(217, 234, 252, 1); background-color:  rgba(255, 255, 255, 1); background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(217, 234, 252, 1)), color-stop(0.5,  rgba(255, 255, 255, 1)), to(rgba(217, 234, 252, 1))); background-image: linear-gradient(rgba(217, 234, 252, 1),  rgba(255, 255, 255, 1) 50%, rgba(217, 234, 252, 1)); padding: 4px;}
.cmn-pic-main > p, .cmn-pic-main > p span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cmn-pic-main > p, .cmn-pic-main > p a:hover { opacity: .95;}
.cmn-pic-main > p span, .cmn-pic-main > p span img { display: block;}
.cmn-pic-main > p span { position: relative; height: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; padding-top: 64.39393939%;}
#present .cmn-pic-main > p span { position:relative; height:0; background-size:cover; background-repeat:no-repeat; background-position:center center; padding-top: 56.25%;}
.cmn-pic-main > p span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.cmn-pic-main > p .lazy-done { -webkit-animation: fadeIn 500ms; animation: fadeIn 500ms;}
.main-inner .cmn-pic-main:not(:last-child) { margin-bottom:20px;}
@media all and (min-width: 768px) {
.main-inner .cmn-pic-main:not(:last-child) { margin-bottom:30px;}
}
/*	figure (sub)
============================== */
.cmn-pic-sub { width: 100%; margin: 10px auto;}
.cmn-pic-sub:before, .cmn-pic-sub:after { content: ""; display: table;}
.cmn-pic-sub:after { clear: both;}
.cmn-pic-sub p { box-sizing: border-box; width: 49%; margin: 0; padding: 4px; border: 1px solid rgba(217, 234, 252, 1); background-color:  rgba(255, 255, 255, 1); background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(217, 234, 252, 1)), color-stop(0.5,  rgba(255, 255, 255, 1)), to(rgba(217, 234, 252, 1))); background-image: linear-gradient(rgba(217, 234, 252, 1),  rgba(255, 255, 255, 1) 50%, rgba(217, 234, 252, 1));}
.cmn-pic-sub .subpic-lef { float:left;}
.cmn-pic-sub .subpic-rig { float:right;}
.cmn-pic-sub p span { box-sizing: border-box; display: block; width: 100%; height: 0; padding-top: 64.393939393939394%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative;}
.cmn-pic-sub p img { box-sizing: border-box; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.cmn-pic-sub p .lazy-done { -webkit-animation: fadeIn 500ms; animation: fadeIn 500ms;}

/*	figure (sub2)
============================== */
.cmn-pic-sub2 { box-sizing: border-box; width: 80%; max-width: 600px; margin: 0 auto 10px auto;}
.cmn-pic-sub2 > p, .cmn-pic-sub2 > p span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cmn-pic-sub2 > p, .cmn-pic-sub2 > p a:hover { opacity: .95;}
.cmn-pic-sub2 > p span, .cmn-pic-sub2 > p span img { display: block;}
.cmn-pic-sub2 > p span { position: relative; height: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; padding-top: 64.39393939%;}
#present .cmn-pic-sub2 > p span { position:relative; height:0; background-size:cover; background-repeat:no-repeat; background-position:center center; padding-top: 56.25%;}
.cmn-pic-sub2 > p span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.cmn-pic-sub2 > p .lazy-done { -webkit-animation: fadeIn 500ms; animation: fadeIn 500ms;}

/*	button
============================== */
.btn { position:relative; overflow:hidden;}
.btn a { display:block; color: rgba(0, 0, 0, 1); background-color: rgba(229, 179, 109, 1); font-weight:bold; text-align:center; text-decoration:none;}
.btn a:before { content:""; display:block; position:absolute; top:50%; background-image:url(../img/arrow40.svg); background-repeat:no-repeat; background-color: rgba(255, 255, 255, 1);}
.btn { border-radius:16px;}
.btn:not(:last-child) { margin-bottom:15px;}
.btn a { font-size:87.5%; height:32px; line-height:32px;}
.btn a:before { left:4px; background-position:-33px -3px; background-size:120px 30px; border-radius:12px; width:24px; height:24px; margin-top:-12px;}
.btn a:hover { background-color: rgba(222, 160, 72, 1); background-image:none;}
@media all and (min-width: 768px) {
.btn { border-radius:22px; margin:0 120px;}
.btn:not(:last-child) { margin-bottom:30px;}
.btn a { font-size:100%; height:44px; line-height:44px;}
.btn a:before { left:6px; background-position:-44px -4px; background-size:160px 40px; border-radius:16px; width:32px; height:32px; margin-top:-16px;}
}

/*	small button
============================== */
.btn-s { position:relative; overflow:hidden;}
.btn-s a { display:block; color: rgba(0, 0, 0, 1); background-color: rgba(229, 179, 109, 1); font-weight:bold; text-align:center; text-decoration:none; font-size:87.5%; height:32px; line-height:32px;}
.btn-s a:before { content:""; display:block; position:absolute; top:50%; left:6px; background-position:-20px 0; background-size:80px 20px; width:20px; height:20px; margin-top:-10px; background-image:url(../img/arrow40.svg); background-repeat:no-repeat; background-color: rgba(255, 255, 255, 1);}
.btn-s:not(:last-child) { margin-bottom:15px;}
.btn-s a:hover { background-color: rgba(222, 160, 72, 1); background-image:none;}
@media all and (min-width: 768px) {
.btn-s { margin:0 120px;}
.btn-s:not(:last-child) { margin-bottom:30px;}
.btn-s a { font-size: 100%;}
}
.btn-s2 { width: 45%; position:relative; overflow:hidden; float: left; margin: 10px 0 20px 3%;}
.btn-s2 a { display:block; color: rgba(0, 0, 0, 1); background-color: rgba(229, 179, 109, 1); font-weight:bold; text-align:center; text-decoration:none; font-size:87.5%; height:32px; line-height:32px; padding-left: 5px;}
.btn-s2 a:before { content:""; display:block; position:absolute; top:50%; left:6px; background-position:-20px 0; background-size:80px 20px; width:20px; height:20px; margin-top:-10px; background-image:url(../img/arrow40.svg); background-repeat:no-repeat; background-color: rgba(255, 255, 255, 1);}
.btn-s:not(:last-child) { margin-bottom:15px;}
.btn-s2 a:hover { background-color: rgba(222, 160, 72, 1); background-image:none;}
.btn-s2none a { color: rgba(0, 0, 0, .5); background-color: rgba(229, 179, 109, .5); cursor: default; pointer-events: none;}
.btn-s2none a:before { opacity: .5;}
@media all and (min-width: 768px) {
.btn-s:not(:last-child) { margin-bottom:30px;}
.btn-s2 a { font-size: 100%;}
}

/*	submenu
============================== */
.submenu { margin-bottom:20px;}
.submenu ul li { position: relative; background-color: rgba(229, 179, 109, 1); margin-bottom: 2px;}
.submenu ul li:before { content:""; display:block; background-image:url(../img/cmn_arrow.svg); background-repeat:no-repeat; background-size:16px 100px; background-position:0 -59px; width:16px; height:18px; float:left; margin-right:6px; position:absolute; left:4px; top:50%; margin-top:-9px;}
.submenu ul li a { display:block; color:rgba(0, 0, 0, 1); background-color:hsla(0,0%,100%,0.5); line-height:18px; height:18px; padding:0.5em; margin-left:24px; text-decoration:none; font-size:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media all and (min-width: 768px) {
.submenu ul:before, .submenu ul:after { content: ""; display: table;}
.submenu ul:after { clear: both;}
.submenu ul li { width: 49%; line-height:18px; background-color: rgba(229, 179, 109, 0); margin-bottom:0.1em; float: left; padding-right: 0.9%;}
.submenu ul li:before { background-color: rgba(229, 179, 109, 1); margin-right: 10px; position:relative; margin-top: 0;}
.submenu { margin-bottom:20px;}
.submenu ul li a { display:block; color:rgba(229, 179, 109, 1); background-color:hsla(0,0%,100%,0); line-height:18px; height:18px; padding:0.5em; padding-top:0; margin-left:24px; font-size:87.5%; letter-spacing: .1em;}
.submenu ul li a:hover { text-decoration:underline;}
}

/*	kome
============================== */
main .kome li, main .kome2 li { color: rgba(94, 94, 94, 1); line-height:1.4; margin-bottom:0.25em; font-size: 80%;}
main .nuri .kome li { color:rgba(0, 0, 0, 1);}
main article#books .kome li { color: rgba(204, 0, 0, 1);}
main .kome li:before, main .kome2 li:before { display:block; float:left; font-family:serif;}
main .kome li:before { content:"※";}
main .kome2 li:nth-child(1):before { content:"※1";}
main .kome2 li:nth-child(2):before { content:"※2";}
main .kome li span, main .kome2 li span { display:block;}
main .kome li span { padding-left:1.5em;}
main .kome2 li span { padding-left:2.5em;}
main .unit-inner .kome:not(:last-child) { margin-bottom:1.5em;}
@media all and (min-width: 768px) {
main .kome li, main .kome2 li { font-size:84%;}
}

main .dotted { list-style-type:disc; margin-left:1.25em; font-size:80%;}
main .dotted li { line-height:1.5; margin-bottom:0.25em;}
main .unit-inner .dotted:not(:last-child) { margin-bottom:1.5em;}
@media all and (min-width: 768px) {
main .dotted { font-size:84%;}
}

/*	contents
============================== */
#contents { width: 100%;}
#contents p { font-size: 115%;}
#contents .contents_title .contents_title-txt { padding-bottom: 3px; margin-bottom: 3px; width: 100%; display: block; border-bottom: 0; border-width: 0 0 2px; border-image: linear-gradient( 90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.7) 20%, hsla(0, 0%, 100%, 0.7) 80%, hsla(0, 0%, 100%, 0) 100%) 0 0 100%; border-style: solid; margin: 0; text-align: center;}
#contents .contents_txt .shu { font-size: 120%;}
#contents .contents_txt .subcast { margin: 20px auto;}
#contents .contents_txt dt { text-align: center; font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; line-height: 1.6; color: rgba(178, 230, 240, 1);}
#contents .contents_txt dt::after { content: ""; display: block; height: 2px; background-image: -webkit-gradient(linear, left top, right top, from(hsla(0,0%,100%,0)), color-stop(0.25, hsla(0,0%,100%,1)), color-stop(0.75, hsla(0,0%,100%,1)), to(hsla(0,0%,100%,0))); background-image: -webkit-linear-gradient(left, hsla(0,0%,100%,0), hsla(0,0%,100%,1) 25%, hsla(0,0%,100%,1) 75%, hsla(0,0%,100%,0)); background-image: linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,1) 50%, hsla(0,0%,100%,1) 75%, hsla(0,0%,100%,0)); margin-bottom: .1em;}
#contents .contents_txt dt span { display: block; padding-bottom: 0.25em;}
#contents .contents_txt dd { font-size: 105%;}

@media all and (min-width: 768px) {
#contents .contents_txt .shu { font-size: 160%;}
#contents .contents_txt { box-sizing: border-box; width: 100%; padding: 10px; margin: 0 auto;}
}