﻿/*	stream
============================== */
div.stream-aft aside {
	text-align:center;
}
div.stream-aft aside > p{
	text-align:center;
	line-height:1.5;
}
div.stream-aft aside > div a {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:stretch;
	text-decoration:none;
	margin: 0 auto;
}
div.stream-aft aside > div b, div.stream-aft aside > div span {
	display:block;
}
div.stream-aft aside > div > a > b > span {
	position:relative;
	height:0;
	background-image:url(/um/img/bnr_stream.png);
	background-size:300% 300%;
	background-position:left center;
	padding-top: -webkit-calc(140 / 418 * 100%);
	padding-top: calc(140 / 418 * 100%);
	background-color:#fff;
}
div.stream-aft aside > div a b span span {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.stream-aft aside > div > a > span {
	font-weight:bold;
	letter-spacing:0.5em;
	text-indent:0.5em;
	line-height:1.5;
	background-color:#000;
	padding:0 1.25em;
	color:#fff;
/*	display:flex;
	align-items:center; */
}
@media all and (min-width: 768px) {
div.stream-aft {
	margin-bottom:20px;
}
div.stream-aft aside > div {
	margin-bottom:12px;
}
div.stream-aft aside > div > a {
	width:320px;
}
div.stream-aft aside > div > a > span {
	font-size:150%;
}
div.stream-aft aside > p{
	font-size:87.5%;
}
}
@media all and (min-width: 980px) {
}
@media all and (min-width: 768px) and (max-width: 979px) {
}
@media all and (max-width: 767px) {
div.stream-aft {
	margin-bottom:10px;
}
div.stream-aft aside > div {
	margin-bottom:6px;
}
div.stream-aft aside > p {
	font-size:75%;
}
div.stream-aft aside > div > a > span {
	font-size:3.75vw;
}
div.stream-aft aside > div > a {
	width:40vw;
}
}



/*	bnr
============================== */
div.bnr {
	background-color:hsla(0,0%,100%, 0.1);
}
div.bnr aside h2 {
	line-height:1.5;
	margin-bottom:0.25em;
}
div.bnr aside ul li span,
div.bnr aside ul li a {
	display:block;
}
div.bnr aside ul li span a {
	position:relative;
	height:0;
	padding-top:30%;
	background-size:cover;
}
div.bnr aside ul li span a.lazy-done {
	-webkit-animation: zoomIn 800ms;
	animation: zoomIn 800ms;
}
div.bnr aside ul li span 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 span a span b {
	position: absolute;
	left:50%;
	top:50%;
	width:100%;
	transform:translate(-50%, -50%);
	text-align:center;
	font-size:3vw;
}
@media all and (min-width: 768px) {
div.bnr {
	padding:40px 0 10px;
}
div.bnr aside {
	max-width:1080px;
	margin:0 auto;
}
div.bnr aside h2 {
	font-size:3vw;
}
div.bnr aside ul li {
	width:50%;
	float:left;
	margin-bottom:30px;
}
div.bnr aside ul li:nth-child(odd) > span {
	margin-right:15px;
}
div.bnr aside ul li:nth-child(even) > span {
	margin-left:15px;
}
div.bnr aside ul li:last-child {
	margin-left:25%;
	margin-right:0;
}
}
@media all and (max-width: 767px) {
div.bnr {
	padding:25px 0;
}
div.bnr aside h2 {
	font-size:4vw;
}
div.bnr aside ul {
	width:80%;
	margin:0 auto;
}
div.bnr aside ul li:not(:last-child) {
	margin-bottom:10px;
}
div.bnr aside ul li span a span b {
	font-size:4.5vw;
}
}
