﻿/*	story
============================== */
main > article > div.outer > div.inner {
	padding:0 2em 3em;
}

p.lines{font-size:110%; color:#666464; font-weight: 500;}
h2.h2-story,section.story-bn h3 {
text-align:center;
font-family: "kaisei-opti", sans-serif;
font-weight: 700;
font-style: normal;
font-size:200%;
padding:1em 0 .4em;
line-height:150%;
}
h2.h2-story > span {
	text-align:center;
}
h2.h2-story > span.ep, h2.h2-story > span.title {
	font-weight:700;
}
h2.h2-story > span.ep {
	color:#666464;
	text-shadow:2px 3px 3px hsla(0,0%,100%,0.3);
	font-size:150%;
}
h2.h2-story > span.ep > span {
	font-weight:bold;
	display:inline-block;
	padding:0 .02em;
}

h2.h2-story > span.title {
	margin-bottom:0.2em;
}
h2.h2-story > span.title > span {
	background-image: -webkit-gradient(linear, center left, center right, from(#00667b), color-stop(0.5, #0897aa), to(#00667b));
	background-image: linear-gradient(to right, #00667b, #0897aa 50%, #00667b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing:0.1em;
	text-indent:0.1em;
}
h2.h2-story > span.oa {
	color:#666464;
	padding:0 0.5em;
}
@media all and (max-width: 767px) {
main > article > div.outer > div.inner {
	padding:0 5% 8%;
}
p.lines{font-size:95%;}

h2.h2-story {
	 font-size:5.2vw;
}
h2.h2-story > span.ep {
	font-size:140%;
}
}

section.story-bn h3{padding:.2em 0 0; color:#f19ec2; font-size:260%; line-height:120%;}
section.story-bn ul li {
	width:33.333333333333333%;
	float:left;
}
section.story-bn ul li a, section.story-bn ul li span {
	display:block;
}
section.story-bn ul li span a {
	position:relative;
	height:0;
	padding-top:65.7142857142857%;
	background-size:cover;
}
section.story-bn ul li span a.lazy-done {
	-webkit-animation: fadeInUp 800ms;
	animation: fadeInUp 800ms;
}
section.story-bn ul li span a.lazy-done:before {
	position:absolute;
	right:0;
	bottom:0;
	font-weight:500;
	background-color:#f19ec2;
	color:#fff;
	display:inline-block;
	border-radius:20px 0 0 0;
}
section.story-bn ul li.ep8 span a.lazy-done:before {
	content:"#8";
}
section.story-bn ul li.ep7 span a.lazy-done:before {
	content:"#7";
}
section.story-bn ul li.ep6 span a.lazy-done:before {
	content:"#6";
}
section.story-bn ul li.ep5 span a.lazy-done:before {
	content:"#5";
}
section.story-bn ul li.ep4 span a.lazy-done:before {
	content:"#4";
}
section.story-bn ul li.ep3 span a.lazy-done:before {
	content:"#3";
}
section.story-bn ul li.ep2 span a.lazy-done:before {
	content:"#2";
}
section.story-bn ul li.ep1 span a.lazy-done:before {
	content:"#1";
}
section.story-bn ul li span a span {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
section.story-bn ul li:nth-child(3n-2) {
	clear:both;
}
section.story-bn ul li:nth-child(3n-2) > span {
	clear:both;
}
@media all and (min-width: 768px) {
section.story-bn ul li {
	margin-bottom:18px;
}
section.story-bn ul li:nth-child(3n-2) > span {
	margin-right:12px;
}
section.story-bn ul li:nth-child(3n-1) > span {
	margin-left:6px;
	margin-right:6px;
}
section.story-bn ul li:nth-child(3n) > span {
	margin-left:12px;
}
section.story-bn ul li span a.lazy-done:before {
	font-size:200%;
	padding:0.1em 0.25em;
}
}
@media all and (max-width: 767px) {
section.story-bn{margin:7% auto 0 !important;}
section.story-bn h3{font-size:8vw;}
section.story-bn ul li {
	margin-bottom:12px;
}
section.story-bn ul li:nth-child(3n-2) > span {
	margin-right:8px;
}
section.story-bn ul li:nth-child(3n-1) > span {
	margin-left:4px;
	margin-right:4px;
}
section.story-bn ul li:nth-child(3n) > span {
	margin-left:8px;
}
section.story-bn ul li span a.lazy-done:before {
	font-size:100%;
	padding:0.1em 0.2em;
	border-radius:3vw 0 0 0;	
}
}
@media print {
section.story-bn {
	display:none;
}
}


/*	YouTube
============================== */
@media all and (min-width: 768px) {
div.mov-outer {
	margin:0 auto 1.5em;
	width:85%;
}
}
@media all and (max-width: 767px) {
div.mov-outer {
	width:96%;
	margin:0 auto 2%;
}
}


ul#show{width:100%; margin:1.2em auto 0; display:flex; flex-flow: row wrap; align-items: flex-start;}
ul#show li span.cap{font-size:80%;}

@media all and (min-width: 768px) {
ul#show{justify-content: center;}
ul#show li:nth-child(2){margin:0 20px;}
ul#show.ver4 li {width:48%; height:auto;}
ul#show.ver4 li{margin:0 1% 2% 1%;}
}
@media all and (max-width: 767px) {
ul#show{width:96%; margin:3% auto 0;}
ul#show li {width:100%; margin:0 0 3%;}
ul#show li:last-child{margin:0 !important;}
ul#show li span.cap{font-size:3vw; display:inline-block; padding:.2em 0 0;}
}


/*lazyload*/
.lazyload, .lazyloading { opacity: 0;}
.lazyloaded { opacity: 1; transition: all 1000ms;}
.nocontxt { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none; text-align:center;}
.nocontxt img { pointer-events: none;}
.prgimg100 { max-width: 100%;}
