/* ================================= sicks_specsaga TOP CSS
================================= */

/*	header
============================== */
#header0 { width: 100%;}
#header { width: 100%; max-width: 924px; margin: 0 auto; overflow: hidden; position:relative;}
#header .header_space { width: 100%; height: 0; padding-top: 68.181818181818182%; position:relative;}
#header .poster { width: 100%; height: 0; padding-top: 68.181818181818182%; position:absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
#header .lazy-done { -webkit-animation: jackInTheBox 700ms; animation: jackInTheBox 700ms;}
#header .lazy-done .kyu_space { width: 6%; position:absolute; top: 59.5%; left: 33%;}
#header .lazy-done .kyu { width: 100%; height: 0; padding: 114.285714285714286%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image:url(../img/kyu.png); -webkit-animation: hafadeIn 900ms; animation: hafadeIn 900ms;}
@-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; } 50% { -webkit-transform: rotate(-8deg); } 70% { -webkit-transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-8deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } }
@-webkit-keyframes hafadeIn { from { opacity: 0; transform: scale(0); } 40% { opacity: 0; transform: scale(0); } 80% { opacity: 1; transform: scale(4); } to { opacity: 1; transform: scale(1); } }
@keyframes hafadeIn { from { opacity: 0; transform: scale(0); } 40% { opacity: 0; transform: scale(0); } 80% { opacity: 1; transform: scale(4); } to { opacity: 1; transform: scale(1); }}

@media all and (min-width: 768px) {
#header0 { padding-top: 30px; background: url(../img/head_bg.jpg) repeat-x top center;}
}

/*	jo_dvd
============================== */
#jo_dvd { width: 98%; max-width: 700px; margin: 5px auto 10px auto; text-align: center;}
#jo_dvd #jo_dvd-imgsp { width: 100%; height: 0; padding-top: 21.645021645021645%; position:relative;}
#jo_dvd #jo_dvd-img { width: 100%; height: 0; padding-top: 21.645021645021645%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; opacity: 0;}
#jo_dvd #jo_dvd-img.lazyloaded { opacity: 1; transition: all 2500ms;}
#jo_dvd #jo_dvd-img a { width: 100%; height: 0; padding-top: 21.645021645021645%; position:absolute; top: 0; left: 0; display: block;}
#jo_dvd #jo_dvd-img a:hover { background: rgba(0, 0, 0, .1);}

@media all and (min-width: 768px) {
#jo_dvd { margin: -5px auto 25px auto;}
#jo_dvd #jo_dvd-imgsp, #jo_dvd #jo_dvd-img, #jo_dvd #jo_dvd-img a { padding-top: 15.714285714285714%;}
}

/*	link_set
============================== */
#link_set { box-sizing: border-box; width: 98%; max-width: 700px; margin:-20px auto 0 auto; padding: 5px 0;}
#link_set:before, #link_set:after { content: ""; display: table;}
#link_set:after { clear: both;}
.link_space { width: 49%; max-width: 337px;}
#link_jo { float: left;}
#link_ha { float: right;}
.link_space .link_img-space { width: 100%; height: 0; padding-top: 29.970326409495549%; position: relative;}
.link_space .link_img { width: 100%; height: 0; padding-top: 29.970326409495549%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
.link_space .link_img a { width: 100%; height: 0; padding-top: 29.970326409495549%; position: absolute; top: 0; left: 0; display: block;}
.link_space a:hover { background: rgba(0, 0, 0, .1);}

@media all and (min-width: 768px) {
#link_set { margin-top: -40px; padding-bottom: 20px;}
#link_set { margin-top: -55px; padding-bottom: 20px;}
}

/*	ticker
============================== */
.ticker { background-color: hsla(0,0%,0%,0.5); padding:0.75em;}
.ticker .tck-outer { width:100%; overflow:hidden; position:relative; height:1.25em;}
.ticker .tck-outer .tck-inner, .ticker .tck-inner li, .ticker .tck-inner li div { display:inline; white-space:nowrap;}
.ticker .tck-outer .tck-inner { position:absolute; line-height:1.25;}
.ticker .tck-outer .tck-inner li { position:relative; padding-right:3em;}
.ticker .tck-outer .tck-inner li:before { content:""; width:20px; height:20px; display:inline-block; background-image:url(../img/top_ticker_icon.jpg); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-position: center center; position:absolute; top:50%; margin-top:-10px; border-radius:10px; background-color:#000;}
.ticker .tck-inner li div { text-decoration:none; padding-left:26px; color:#d6f4ff; font-size:87.5%;}
.ticker .tck-inner li div dl, .ticker .tck-inner li div dl dt, .ticker .tck-inner li div dl dd { display:inline-block; white-space:nowrap;}
.ticker .tck-inner li div dl dt { padding-right:1em;}
@media all and (min-width: 768px) {
.ticker .tck-inner li div { font-size:100%;}
}

/*	menu_twitter
============================== */
.menu_twitter { width: 100%; background-color: rgba(33, 125, 192, .95); background-image: url(../img/mn_bg.jpg); background-repeat: repeat; -webkit-background-size: auto; background-size: auto; background-position: top center;}
.menu_twitter0 { width: 100%; max-width: 924px; margin: 0 auto;}

@media all and (min-width: 768px) {
.menu_twitter0 { height: 380px; position: relative;}
}

/*	menu
============================== */
#menu { padding:12px;}
#menu ul:before, #menu ul:after { content: ""; display: table; }
#menu ul:after { clear: both; }
#menu ul li a, #menu ul li span { display:block;}
#menu ul li a { padding:0.25em 0; background-image: -webkit-gradient(linear, left top, right top, from(hsla(0,0%,0%,0)), color-stop(0.3, hsla(0,0%,0%,0.25)), color-stop(0.7, hsla(0,0%,0%,0.25)), to(hsla(0,0%,0%,0))); background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,0%,0.25) 30%, hsla(0,0%,0%,0.25) 70%, hsla(0,0%,0%,0)); background-image: linear-gradient(to right, hsla(0,0%,0%,0), hsla(0,0%,0%,0.25) 30%, hsla(0,0%,0%,0.25) 70%, hsla(0,0%,0%,0)); text-shadow:1px 2px 3px #000; text-decoration:none;}
#menu ul li a::after { line-height:1.25; display:block; font-family: 'IM Fell DW Pica', 'serif'; font-size:83%; color:#ecc280;}
#menu ul li.mnews a::after {content:"News";}
#menu ul li.mintroduction a::after {content:"Introduction";}
#menu ul li.mepisode a::after {content:"Episode";}
#menu ul li.mcast a::after {content:"Cast & Staff";}
#menu ul li.mbbs a::after {content:"BBS";}
#menu ul li:not(:last-child)::after { content:""; height:19px; display:block; background-image:url(../img/cmn_menu_icon.png); background-size:28px 19px; background-position:center top; background-repeat:no-repeat; margin:4px auto;}
#menu ul li a span { color:#fff; font-size:112.5%; font-weight:bold; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; line-height:1.25;}
#menu ul li a:hover { -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9;}

@media all and (min-width: 768px) {
#menu { padding: 0; width: 580px; height: 240px; position: absolute; top: 80px; left: 0;}
#menu ul li a { padding: 0; background-image: -webkit-gradient(linear, left top, right top, from(hsla(0,0%,0%,0)), color-stop(0.3, hsla(0,0%,0%,0)), color-stop(0.7, hsla(0,0%,0%,0)), to(hsla(0,0%,0%,0))); background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,0%,0) 30%, hsla(0,0%,0%,0) 70%, hsla(0,0%,0%,0)); background-image: linear-gradient(to right, hsla(0,0%,0%,0), hsla(0,0%,0%,0) 30%, hsla(0,0%,0%,0) 70%, hsla(0,0%,0%,0)); text-shadow:1px 2px 3px rgba(0, 0, 0, 0); text-decoration:none;}
#menu ul li a::after, #menu ul li:not(:last-child)::after, #menu ul li a span { display: none;}
#menu ul li a:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1;}
#menu ul li a { width: 184px; height: 100px; background: url(../img/mn_idx.jpg?2) no-repeat; position: absolute;}
#menu ul .mnews a { background-position: 0 0; top: 5px; left: 5px;}
#menu ul .mintroduction a { background-position: -184px 0; top: 5px; left: 195px;}
#menu ul .mcast a { background-position: -368px 0; top: 110px; left: 195px;}
#menu ul .mbbs a { background-position: -552px 0; top: 110px; left: 385px;}
#menu ul .mnews a:hover { background-position: 0 -100px;}
#menu ul .mintroduction a:hover { background-position: -184px -100px;}
#menu ul .mcast a:hover { background-position: -368px -100px;}
#menu ul .mbbs a:hover { background-position: -552px -100px;}

}

/*	menu_twitter + spot
============================== */
.menu_twitter-spot { width: 100%; background-color: rgba(33, 125, 192, .95); background-image: url(../img/mn_bg.jpg); background-repeat: repeat; -webkit-background-size: auto; background-size: auto; background-position: top center;}
.menu_twitter-spot0 { width: 100%; max-width: 924px; margin: 0 auto;}
.menu_twitter-spot0 #menu { padding:12px;}
.menu_twitter-spot0 #menu ul li a, .menu_twitter-spot0 #menu ul li span { display:block;}
.menu_twitter-spot0 #menu ul li a { padding:0.25em 0; background-image: -webkit-gradient(linear, left top, right top, from(hsla(0,0%,0%,0)), color-stop(0.3, hsla(0,0%,0%,0.25)), color-stop(0.7, hsla(0,0%,0%,0.25)), to(hsla(0,0%,0%,0))); background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,0%,0.25) 30%, hsla(0,0%,0%,0.25) 70%, hsla(0,0%,0%,0)); background-image: linear-gradient(to right, hsla(0,0%,0%,0), hsla(0,0%,0%,0.25) 30%, hsla(0,0%,0%,0.25) 70%, hsla(0,0%,0%,0)); text-shadow:1px 2px 3px #000; text-decoration:none;}
.menu_twitter-spot0 #menu ul li a::after { line-height:1.25; display:block; font-family: 'IM Fell DW Pica', 'serif'; font-size:83%; color:#ecc280;}
.menu_twitter-spot0 #menu ul li.mnews a::after {content:"News";}
.menu_twitter-spot0 #menu ul li.mintroduction a::after {content:"Introduction";}
.menu_twitter-spot0 #menu ul li.mepisode a::after {content:"Episode";}
.menu_twitter-spot0 #menu ul li.mcast a::after {content:"Cast & Staff";}
.menu_twitter-spot0 #menu ul li.mbbs a::after {content:"BBS";}
.menu_twitter-spot0 #menu ul li:not(:last-child)::after { content:""; height:19px; display:block; background-image:url(../img/cmn_menu_icon.png); background-size:28px 19px; background-position:center top; background-repeat:no-repeat; margin:4px auto;}
.menu_twitter-spot0 #menu ul li a span { color:#fff; font-size:112.5%; font-weight:bold; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; line-height:1.25;}
.menu_twitter-spot0 #menu ul li a:hover { -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9;}

@media all and (min-width: 768px) {
.menu_twitter-spot0 { height: 520px; position: relative;}
.menu_twitter-spot0 #menu { padding: 0; width: 100%; height: 120px; position: absolute; top: 10px; left: 0;}
.menu_twitter-spot0 #menu ul li a { padding: 0; background-image: -webkit-gradient(linear, left top, right top, from(hsla(0,0%,0%,0)), color-stop(0.3, hsla(0,0%,0%,0)), color-stop(0.7, hsla(0,0%,0%,0)), to(hsla(0,0%,0%,0))); background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,0%,0) 30%, hsla(0,0%,0%,0) 70%, hsla(0,0%,0%,0)); background-image: linear-gradient(to right, hsla(0,0%,0%,0), hsla(0,0%,0%,0) 30%, hsla(0,0%,0%,0) 70%, hsla(0,0%,0%,0)); text-shadow:1px 2px 3px rgba(0, 0, 0, 0); text-decoration:none;}
.menu_twitter-spot0 #menu ul li a::after, .menu_twitter-spot0 #menu ul li:not(:last-child)::after, .menu_twitter-spot0 #menu ul li a span { display: none;}
.menu_twitter-spot0 #menu ul li a:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1;}
.menu_twitter-spot0 #menu ul li a { width: 184px; height: 100px; background: url(../img/mn_idx-long0.jpg) no-repeat; position: absolute;}
.menu_twitter-spot0 #menu ul .mnews a { background-position: 0 0; top: 5px; left: 0;}
.menu_twitter-spot0 #menu ul .mintroduction a { background-position: -184px 0; top: 5px; left: 185px;}
.menu_twitter-spot0 #menu ul .mepisode a { background-position: -736px 0; top: 5px; left: 370px;}
.menu_twitter-spot0 #menu ul .mcast a { background-position: -368px 0; top: 5px; left: 555px;}
.menu_twitter-spot0 #menu ul .mchart a { background-position: -552px 0; top: 5px; left: 740px;}
.menu_twitter-spot0 #menu ul .mnews a:hover { background-position: 0 -100px;}
.menu_twitter-spot0 #menu ul .mintroduction a:hover { background-position: -184px -100px;}
.menu_twitter-spot0 #menu ul .mcast a:hover { background-position: -368px -100px;}
.menu_twitter-spot0 #menu ul .mchart a:hover { background-position: -552px -100px;}
.menu_twitter-spot0 #menu ul .mepisode a:hover { background-position: -736px -100px;}
/* +spot_only */
.menu_twitter-spot0 #menu #menu_pre .mnews a { background-position: 0 0; top: 5px; left: 80px;}
.menu_twitter-spot0 #menu #menu_pre .mintroduction a { background-position: -184px 0; top: 5px; left: 273px;}
.menu_twitter-spot0 #menu #menu_pre .mcast a { background-position: -368px 0; top: 5px; left: 467px;}
.menu_twitter-spot0 #menu #menu_pre .mbbs a { background-position: -552px 0; top: 5px; left: 660px;}
.menu_twitter-spot0 #menu #menu_pre .mnews a:hover { background-position: 0 -100px;}
.menu_twitter-spot0 #menu #menu_pre .mintroduction a:hover { background-position: -184px -100px;}
.menu_twitter-spot0 #menu #menu_pre .mcast a:hover { background-position: -368px -100px;}
.menu_twitter-spot0 #menu #menu_pre .mchart a:hover { background-position: -552px -100px;}
.menu_twitter-spot0 #menu #menu_pre .mepisode a:hover { background-position: -736px -100px;}
}

/*	spot
============================== */
#spot { box-sizing: border-box; width: 100%; max-width: 604px; margin: 0 auto; padding: 15px 2%; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: top center; background-image: url(../img/spot_bg.jpg);}
#spot h3 { width:100%; display:block;}
#spot h3 span { display:block; position:absolute; line-height:1.5; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; padding: 10px 0 2px 0;}
#spot h3 .txt_space { width:100%; display:block; position:relative;}
#spot h3 .nm { box-sizing: border-box; width:100%; text-align:left; top: 0; left: 0; text-shadow:0 2px 2px hsla(0, 0%, 0%, .75); padding:0 6px; letter-spacing: 0.1em;}
#spot .ico-new { right: 0; top: 0; background-color:#c00; padding:0 6px; font-family: 'IM Fell DW Pica', 'serif'; font-weight:normal;}
#spot .update { right: 0; top: 0; color:#c00; padding:0; font-family: 'IM Fell DW Pica', 'serif'; font-weight:normal; font-size: 90%;}
#spot .pv-modal { margin-top: -0.5em;}
#spot .pv-modal a span { background-size:cover; position:relative; height:0; padding-top:56.25%; display: block;}
#spot .pv-modal a span img { position: absolute; left:0; top:0; width:100%; height:100%; display: block;}
#spot .pv-modal a .lazy-done { -webkit-animation: fadeIn 500ms; animation: fadeIn 500ms; display: block;}
#spot .pv-modal a .lazy-done img { background-image:url(/um/img/play.png); background-repeat:no-repeat; background-position:center center; display: block;}
@media all and (min-width: 768px) {
#spot { margin: 0; position: absolute; top: 130px; left: 0; padding: 7px 1%;}
#spot h3 { height: 40px; font-size: 110%;}
#spot h3 .nm { text-align: center;}
}

/*	contents
============================== */
/*#contents .contents_title { padding-bottom: 10px; text-align: left;}
#contents .contents_title-txt { padding-bottom: 3px; margin-bottom: 3px; width: 100%; display: block; border-bottom: 1px solid rgba(255, 255, 255, 1);}
#contents .contents_title::after { display: block; width: 100%; text-align: right; font-size: 75%; color: rgba(218, 57, 50, 1); letter-spacing: .05em; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}*/
#introduction, #cast_staff, #newsflash { padding: 10px 10px 30px 10px; background-color: rgba(0, 0, 0, .3); background-repeat: no-repeat; -webkit-background-size: 80%; background-size: 80%; background-position: left bottom; background-image: url(../img/cmn_bg_logo.png); margin-bottom: 10px;}
#introduction, #newsflash { padding-bottom: 70px;}
#cast { padding-bottom: 30px; background-repeat: no-repeat; -webkit-background-size: 80%; background-size: 80%; background-position: right bottom; background-image: url(../img/cmn_bg_logo0.png); margin-bottom: 10px; border-bottom: 1px dashed rgba(255, 255, 255, .2);}
#contents #introduction .contents_title::after {content:"Introduction";}
/*#contents #newsflash .contents_title::after {content:"News Flash";}*/
#contents #cast .contents_title::after {content:"Cast";}
#contents #staff .contents_title::after {content:"Staff";}
#contents .contents_txt .shu { max-width: 320px;}
#contents .contents_txt .shu .yaku { font-size: 110%; padding-left: 0;}
#contents .contents_txt .shu .name { font-size: 120%; padding-left: 0;}
#newsflash .beetle { width: 100%; margin: 0 auto;}
#newsflash .beetle ul:before, #newsflash .beetle ul:after { content: ""; display: table;}
#newsflash .beetle ul:after { clear: both;}
#newsflash .beetle li { width: 100%; max-width: 320px; margin: 10px auto 0 auto; position: relative;}
#newsflash .beetle .box_space { width: 100%; height: 0; padding-top: 100%; position: relative;}
#newsflash .beetle .box { width: 100%; height: 0; padding-top: 100%; position: absolute; left:0; top:0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; opacity: 0;}
#newsflash .beetle .box.lazyloaded { opacity: 1; transition: all 1500ms;}
#newsflash .beetle .box_space a { width: 100%; height: 100%; display: block; position: absolute; left:0; top:0;}
#newsflash .beetle .box_space a:hover { -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9;}
#newsflash .beetle_name { width: 28.75%; position: absolute; bottom: 5%; left: 35%;}
#newsflash .beetle_n { width: 100%; height: 0; padding-top: 43.478260869565217%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
#newsflash .tape { width: 100%; height: 0; padding-top: 100%; position: absolute; left:0; top:0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
#newsflash .close_box .box { filter: brightness(.5);}
#newsflash .yokoku_date { width: 80%; text-align: right; font-size: 160%; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); color: rgba(255, 255, 255, 1); position: absolute; top: 40%; right: 5%; filter: brightness(1);}
#newsflash .num { width: 33%; position: absolute; top: 1%; left: 52%; transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg);}
#newsflash .num_img { width: 100%; height: 0; padding-top: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
#newsflash .flashtitle_img { display: block; width: 100%; height: 0; padding-top: 29.978354978354978%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}


@media all and (min-width: 640px) {
#newsflash .beetle li { width: 49.9%; margin: 0; float: left;}
}

@media all and (min-width: 768px) {
#introduction, #cast, #staff, #newsflash { position: relative;}
#introduction { padding-bottom: 0;}
#newsflash { padding-bottom: 80px;}
#cast { margin-bottom: 20px;}
#cast_staff { padding-bottom: 20px;}
/*#contents .contents_title::after { font-size: 85%; letter-spacing: .1em; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space:nowrap; position: absolute; bottom: 0; left: 25px;}
#contents .contents_title { width: 40px; position: absolute; top: 5px; left: 5px; height: 90%; border-right: 1px solid rgba(255, 255, 255, 1);}
#contents .contents_title-txt { font-size: 120%; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space:nowrap; border: 0;}
#introduction .contents_title { width: 40px; position: absolute; top: 15px; left: 15px; height: 90%; border-right: 1px solid rgba(255, 255, 255, 1);}*/
#cast { margin-bottom: 10px; padding-bottom: 50px;}
#cast .shu { font-size: 120%;}
#cast .shu td { padding-left: 20px;}
#cast .contents_title::after { bottom: 10px;}
#staff .contents_txt p:last-child { padding-bottom: 40px;}
#introduction .contents_txt p { font-size: 140%;}
#introduction .contents_txt dd:last-child { padding-bottom: 80px;}
#newsflash .beetle ul { width: 700px; margin: 10px auto;}
#newsflash .beetle li { width: 47%; margin: 0 0 0 2.9%; float: left;}
#newsflash .beetle li { width: 48%; margin: 0 1.9% 10px 0; float: left;}
#newsflash .flashtitle_img { display: block; width: 100%; height: 0; padding-top: 15.151515151515152%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
}

/*	affiliate
============================== */
.bn-long { box-sizing: border-box; width: 100%; background-color:rgba(182, 46, 15, .7); padding:5px;}
.bn-long .bnimg { width: 100%; max-width: 924px; margin: 0 auto;}
.bn-long a, .bn-long a span { display:block;}
.bn-long a { position:relative; width: 100%; height:0; padding-top:16.2337662%; text-align:left;}
.bn-long a span { text-indent:110%;white-space:nowrap;overflow:hidden; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: absolute; left:0; top:0; width:100%; height:100%;}
.bn-long a .lazy-done { -webkit-animation: fadeIn 500ms; animation: fadeIn 500ms;}
.bn-long a:hover { -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9;}

@media all and (min-width: 768px) {
.bn-long { padding: 20px 0;}
}

/*	slider
============================== */
#chara { padding:12px;}
#videos { background-color:hsla(0,0%,0%,.5); padding:12px;}
#chara header, #videos header { margin-bottom:10px;}
#chara header:before, #chara header:after, #videos header:before, #videos header:after { content: ""; display: table;}
#chara header:after, #videos header:after { clear: both;}
#chara h2 { width: 100%;}
#chara h2::before { content:"Character"; color:#5ed6fc; font-size:125%; text-align: left;}
#videos h2::before { content:"VIDEO"; color:#5ed6fc; font-size:125%;}
#chara h2::before, #chara p, #videos h2::before, #videos p { line-height:1.25; font-family: 'IM Fell DW Pica', 'serif'; font-weight:normal;}

.slider { position: relative; max-width: 980px; margin: 0 auto;}
.slider .outer { overflow: hidden; margin: 0 29px;}
.slider .outer .inner { overflow: hidden; list-style-type: none; font-family: sans-serif;}
.slider .outer .inner:before, .slider .outer .inner:after { content: ""; display: table;}
.slider .outer .inner:after { clear: both;}
.slider .outer .inner li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline;}
#chara .slider .outer .inner li { width: 94px; height: 94px; float: left;}
#videos .slider .outer .inner li { width: 164px; height: 94px; float: left;}
.slider .outer .inner li:not(:last-child) { margin-right: 5px;}
.slider .outer .inner li a { display: block; color: #333; background-color: #000; text-decoration: none; border: 2px solid transparent;}
.slider .inner li.nolnk a { cursor: default;}
.slider .outer .inner li a .thumb, .slider .outer .inner li a .thumb img, .slider .outer .inner li a .txt { display: block;}
#chara .slider .outer .inner li a .thumb, #chara .slider .outer .inner li a .thumb img { width: 90px; height: 90px;}
#videos .slider .outer .inner li a .thumb, #videos .slider .outer .inner li a .thumb img { width: 160px; height: 90px;}
.slider .outer .inner li a .thumb { background-repeat: no-repeat; background-size: cover; background-position: center top;}
#videos .slider .outer .inner li:not(.nolnk) .lazy-done img { background-image:url(/um/img/play.png); background-repeat: no-repeat; background-position: center center;}
.slider .outer .inner li:not(.nolnk) a:hover { background-color: #dea048;}
.slider .outer .inner li.nolnk .lazy-done img { background-color: hsla(0,0%,0%,0.5);}
.slider .outer .inner li a .slazy { position:relative;}
.slider .outer .inner li a .lazy-done { -webkit-animation: fadeIn 500ms; animation: fadeIn 500ms;}
.slider .ctrl li { position: absolute; top: 50%;}
.slider .ctrl .ctrl-lef { left: 0;}
.slider .ctrl .ctrl-rig { right: 0;}
.slider .ctrl li a { display: block; background-image: url(../img/arrow40.svg); background-repeat: no-repeat; background-size: 104px 26px; width: 26px; height: 26px; margin-top: -13px; background-color: #eaeab8;}
.slider .ctrl li .hidebtn { opacity: 0.25; cursor: default;}
.slider .ctrl .ctrl-lef a, .slider .ctrl .ctrl-lef .hidebtn:hover { background-position: left top; background-color: #eab266;}
.slider .ctrl .ctrl-rig a, .slider .ctrl .ctrl-rig .hidebtn:hover { background-position: -26px 0; background-color: #eab266;}
.slider .ctrl .ctrl-lef a:hover, .slider .ctrl .ctrl-rig a:hover { background-color: #dea048;}
.slider .ctrl .ctrl-lef a:hover { background-position: -52px 0;}
.slider .ctrl .ctrl-rig a:hover { background-position: -78px 0;}

@media all and (min-width: 768px) {
#chara, #videos { padding:30px 0;}
#chara article, #videos article { text-align:left; width:980px; margin:0 auto;}
#chara header, #videos header { position:relative;}
#chara h2::before, #videos h2::before { font-size:237.5%; margin-left:43px; float:left;}
#chara p, #videos p { position:absolute; right:43px; bottom:8px; color:#edf4c2;}
.slider .outer { margin: 0 43px;}
#chara .slider .outer .inner li { width:140px; height:140px;}
#videos .slider .outer .inner li { width:260px; height:148px;}
.slider .outer .inner li:not(:last-child) { margin-right: 6px;}
.slider .outer .inner li:not(.nolnk) a:hover { background-color:#dea048;}
#chara .slider .outer .inner li a .thumb, #chara .slider .outer .inner li a .thumb img { width: 136px; height: 136px;}
#videos .slider .outer .inner li a .thumb, #videos .slider .outer .inner li a .thumb img { width: 256px; height: 144px;}
.slider ul.ctrl li a { background-size: 160px 40px; width: 40px; height: 40px; margin-top: -20px;}
.slider .ctrl .ctrl-rig a, .slider .ctrl .ctrl-rig .hidebtn:hover { background-position: -40px 0;}
.slider .ctrl .ctrl-lef a:hover { background-position: -80px 0;}
.slider .ctrl .ctrl-rig a:hover { background-position: -120px 0;}
#chara { padding: 15px 0 30px 0;}
}


/*	paravi_plus
============================== */
#paravi_plus { width: 98%; max-width: 700px; margin: 5px auto 10px auto; text-align: center;}
#paravi_plus #paravi_plus-imgsp { width: 100%; height: 0; padding-top: 15%; position:relative;}
#paravi_plus #paravi_plus-img { width: 100%; height: 0; padding-top: 15%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; opacity: 0;}
#paravi_plus #paravi_plus-img.lazyloaded { opacity: 1; transition: all 2500ms;}
#paravi_plus #paravi_plus-img a { width: 100%; height: 0; padding-top: 15%; position:absolute; top: 0; left: 0; display: block;}
#paravi_plus #paravi_plus-img a:hover { background: rgba(0, 0, 0, .1);}

@media all and (min-width: 768px) {
#paravi_plus { margin: -5px auto 25px auto;}
}
