@import url("topics.css");
@import url("sns.css");
@import url("wnew.css");

/*	.header
============================== */
/* kv */
div.header {
	position:relative;
}
div.header header {
	text-align:left;
}
div.header header > h1 span {
	display:block;
}
div.header header > h1 > span {
	position:relative;
	height:0;
	padding-top: -webkit-calc(764 / 1080 * 100%);
	padding-top: calc(764 / 1080 * 100%);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
div.header header > h1 > span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
div.header header > h1 > span > span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
@media all and (min-width: 768px) {
div.header {
	padding-top:40px;
	padding-bottom:24px;
}
div.header header {
	max-width:1080px;
	margin:0 auto 24px;
}
}
@media all and (max-width: 767px) {
div.header {
	padding-bottom:12px;
}
div.header header {
	padding-bottom:12px;
}
}

@media print {
div.header,
div.tbs-topics,
div.sns {
	display:none !important;
}
}


@media all and (min-width: 768px) {
div.header:before, div.header:after {
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	position:absolute;
	z-index:-1;
}
div.header:before {
	left:50%;
	top:252px;
	width:440px;
	height:600px;
	background-image:url(../img/top_header_rig.png);
	margin-left:300px;
}
div.header:after {
	right:50%;
	top:196px;
	width:440px;
	height:400px;
	background-image:url(../img/top_header_lef.png);
	margin-right:340px;
}
}


/*	next oa
============================== */
.idx div.story article header {
	background-image:url(../img/top_nextoa_h2.svg);
	background-repeat:no-repeat;
	background-position:center center;
}
.idx div.story article header h2 {
	text-shadow:3px 3px 0 #bbe4e6;
	margin-bottom:0.2em;
}
.idx div.story article header p {
	font-weight:bold;
	line-height:1.5;
	color:#0070e0;
	text-shadow:2px 2px 0 #bbe4e6;
}
.idx div.story div.btn-story {
	text-align:right;
}
.idx div.story div.btn-story a {
	text-decoration:none;
	color:#000;
}
.idx div.story div.btn-story a span {
	display:inline-block;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #fcf781), to(#fcf781));
	background-image: linear-gradient(transparent 50%, #fcf781 50%);
	padding:0 0.5em;
	-webkit-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
@media all and (min-width: 768px) {
div.story {
	margin-bottom:40px;
}
.idx div.story article header {
	background-size:540px 60px;
	margin-bottom:30px;
}
.idx div.story article header h2 {
	font-size:400%;
	line-height:60px;
}
.idx div.story article header p {
	font-size:150%;
}
.idx div.story div.btn-story a span {
	font-size:250%;
}
}
@media all and (max-width: 767px) {
div.story {
	margin-bottom:20px;
}
.idx div.story article header {
	background-size:70%;
	margin-bottom:15px;
}
.idx div.story article header h2 {
	font-size:8vw;
}
.idx div.story article header p {
	font-size:4vw;
}
.idx div.story div.btn-story a span {
	font-size:5vw;
}
}



/*	.bnr-header
============================== */
div.bnr-header {
	text-align:left;
}
div.bnr-header a, div.bnr-header span {
	display:block;
}
div.bnr-header span a {
	background-size:cover;
	position:relative;
	height:0;
	padding-top: -webkit-calc(200 / 1280 * 100%);
	padding-top: calc(200 / 1280 * 100%);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
div.bnr-header span a.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
div.bnr-header span a span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
@media all and (min-width: 768px) {
div.bnr-header span {
	padding-top:40px;
	max-width:800px;
	margin:0 auto;
}
}
@media all and (max-width: 767px) {
div.bnr-header span {
	padding:20px;
}
}


/*	.bnr
============================== */
div.bnr {
	text-align:left;
	border-top:5px dotted hsla(0,100%,100%,0.5);
}
div.bnr aside ul li a, div.bnr aside ul li a span {
	display:block;
}
div.bnr aside ul li a {
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
	height:0;
	padding-top: -webkit-calc(240 / 800 * 100%);
	padding-top: calc(240 / 800 * 100%);
}
div.bnr aside ul li a span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.bnr aside ul li a.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
@media all and (min-width: 768px) {
div.bnr {
	padding:60px 0;
}
div.bnr aside {
	max-width:1080px;
	margin:0 auto;
}
div.bnr aside ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div.bnr aside ul li {
	width:calc((100% - 30px)/2);
}
div.bnr aside ul li:nth-child(odd) {
	margin-right:30px;
}
}
@media all and (max-width: 767px) {
div.bnr {
	padding:30px 0;
}
div.bnr aside ul {
	width:82%;
	margin:0 auto;
}
div.bnr aside ul li:not(:last-child) {
	margin-bottom:20px;
}
}



/*	.stream-footer
============================== */
div.stream-footer {
	overflow:hidden;
	background-color:#ecf9fa;
	-webkit-box-shadow: rgba(32,76,150,0.5) 0px 2px 10px 0px;
	-moz-box-shadow: rgba(32,76,150,0.5) 0px 2px 10px 0px;
	-ms-box-shadow: rgba(32,76,150,0.5) 0px 2px 10px 0px;
	-o-box-shadow: rgba(32,76,150,0.5) 0px 2px 10px 0px;
	box-shadow: rgba(32,76,150,0.5) 0px 2px 10px 0px;
}
div.stream-footer aside {
	text-align:left;
	position:relative;
}
div.stream-footer aside:before, div.stream-footer aside:after {
	content:"";
	position:absolute;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover:
}
div.stream-footer aside:before {
	top:-10px;
	left:-130px;
	background-image:url(../img/stream_bg_lef.svg);
}
 div.stream-footer aside:after {
	right:-140px;
	bottom:-10px;
	background-image:url(../img/stream_bg_rig.svg);
}
div.stream-footer aside h2 {
	text-align:center;
	/**/
	display:flex;
	justify-content: center;
	align-items: center;
	/**/
}
div.stream-footer aside h2:before {
	content:"";
	display:inline-block;
	text-align:center;
	background-image:url(../img/stream_icon.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
div.stream-footer aside h2 span {
	color:#000;
	line-height:1;
}
@media all and (min-width: 768px) {
div.stream-footer {
	margin-bottom:40px;
}
div.stream-footer aside {
	padding:40px 0;
	max-width:1080px;
	margin:0 auto;
}
div.stream-footer aside:before, div.stream-footer aside:after {
	width:250px;
	height:170px;
}
div.stream-footer aside h2 {
	margin-bottom:20px;
}
div.stream-footer aside h2:before {
	width:74px;
	height:54px;
	margin-right:20px;
}
div.stream-footer aside h2 span {
	font-size:400%;
	text-shadow:3px 3px 0 #6cbbb5;
}
}
@media all and (max-width: 767px) {
div.stream-footer {
	margin-bottom:20px;
}
div.stream-footer aside {
	padding:20px 0;
}
div.stream-footer aside:before, div.stream-footer aside:after {
	width:206px;
	height:140px;
}
div.stream-footer aside h2 {
	margin-bottom:10px;
}
div.stream-footer aside h2 span {
	font-size:10vw;
	text-shadow:2px 2px 0 #6cbbb5;
}
div.stream-footer aside h2:before {
	width:60px;
	height:44px;
	margin-right:14px;
}
}