/**
 * オーバースライダーFit
 * @version 1.0 2016.11.22
 * @summary
 * 		ブレイクポイントは1024、画像の縦幅は不問、スライド速度は1秒
 * 		ul/.prev/.nextを有するHTMLのラッパーにクラスを付すると動作
 * 		ラッパーに.reverse付するとUI色が黒矢印白背景に反転
 * 		JSにて.prev及び.nextにdata-posのインクリメント／デクリメントイベント実装が必要
 * 		li内は単体imgでも複合HTMLでも可(1つ目の要素をスライドするユニットの枠として計算)
 * 		10個までのビジュアルが使用出来、加筆すれば追加可能
 * @example
 * 		<div class="overslider-fit" data-pos="0">
 * 			<ul>
 * 				<li><img src="mvis01.png" /></li>
 * 			</ul>
 * 			<div class="prev"></div>
 * 			<div class="next"></div>
 * 		</div>
 * 		<div class="overslider reverse" data-pos="0">
 * 			<ul>
 * 				<li>
 * 					<div class="visual"><img src="visual01.png" /></div>
 * 					<div class="text"><img src="text01.png" /></div>
 * 				</li>
 * 			</ul>
 * 			<div class="prev"></div>
 * 			<div class="next"></div>
 * 		</div>
----------------------------------------------------------------------------------------------------*/
.overslider-fit > ul > li:nth-child(1){ left:  0%; }
.overslider-fit > ul > li:nth-child(2){ left:100%; }
.overslider-fit > ul > li:nth-child(3){ left:200%; }
.overslider-fit > ul > li:nth-child(4){ left:300%; }
.overslider-fit > ul > li:nth-child(5){ left:400%; }
.overslider-fit > ul > li:nth-child(6){ left:500%; }
.overslider-fit > ul > li:nth-child(7){ left:600%; }
.overslider-fit > ul > li:nth-child(8){ left:700%; }
.overslider-fit > ul > li:nth-child(9){ left:800%; }
.overslider-fit > ul > li:nth-child(10){ left:900%; }
.overslider-fit[data-pos="0"] > ul{ left:  -0%; }
.overslider-fit[data-pos="1"] > ul{ left:-100%; }
.overslider-fit[data-pos="2"] > ul{ left:-200%; }
.overslider-fit[data-pos="3"] > ul{ left:-300%; }
.overslider-fit[data-pos="4"] > ul{ left:-400%; }
.overslider-fit[data-pos="5"] > ul{ left:-500%; }
.overslider-fit[data-pos="6"] > ul{ left:-600%; }
.overslider-fit[data-pos="7"] > ul{ left:-700%; }
.overslider-fit[data-pos="8"] > ul{ left:-800%; }
.overslider-fit[data-pos="9"] > ul{ left:-900%; }
.overslider-fit,
.overslider-fit > ul > li > :first-child{
	position:relative;
	width:100%;
}
.overslider-fit{ overflow:hidden; }
.overslider-fit > ul{
	position:relative;
	transition:left .8s;
}
.overslider-fit > ul > li{
	position:absolute;
	overflow:hidden;
	width:100%;
	top:0;
}
.overslider-fit > ul > li:first-child{ position:relative; }
.overslider-fit > ul > li > :first-child{ max-width:none; }
.overslider-fit > .prev,
.overslider-fit > .next{
	width:30px;
	height:50px;
	background:rgba(0,0,0,.5) scroll no-repeat center center / 50%;
	transition:opacity .2s;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto 0;
}
.overslider-fit > .prev{ left:30px; }
.overslider-fit > .next{ right:30px; }
.overslider-fit.reverse > .prev,.overslider-fit.reverse > .next{ background-color:rgba(255,255,255,.5); }
.overslider-fit > .prev:hover,
.overslider-fit > .next:hover{ opacity:.8; }
.overslider-fit > menu{
	position:absolute;
	left:20px;
	right:20px;
	bottom:4px;
	text-align:center;
	margin:0;
}
.overslider-fit > menu > li{
	background:white;
	width:14px;
	height:14px;
	margin:0 4px;
	border-radius:50%;
	display:inline-block;
	transition:background .2s;
}
.overslider-fit > menu > li.hover,
.overslider-fit > menu > li.active{ background:teal; }
@media screen and (max-width: 1024px){
	.overslider-fit > .prev{ left:0; }
	.overslider-fit > .next{ right:0; }
}
.overslider-fit > .prev{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABkCAYAAADaIVPoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALlJREFUeNrs3LENgCAQQFHjBI7ixo7gCI7ASEhDR9TChrv3kxvgBaEytyySJOmPaq1bKmyb0ubIhO2dYU97gO2VcOgH7Gf0OtkDdbXZM97ZGvaThoWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFnecvHqcMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NPQk63m6tB3TcRWIDdKqtafEWh72g8ywClCRF6xZgACy201TpnW02AAAAAElFTkSuQmCC'); }
.overslider-fit > .next{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABkCAYAAADaIVPoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAL1JREFUeNrs3MEJwkAQQNElFViKHacES7CELWlcQQgkkAgimpn3YY57eMyepzVJks5bRFwqYecxPT36CRxzi6W86Be2x7Z86B3sadHTh++vY+6pNv3GlvN9b2hoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGho6J+ipyZfGhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW9v/RcxnsAbrUTa0yV9N6CewKXecIoCRJ3+0hwACTD9aRCH26tgAAAABJRU5ErkJggg=='); }
black
.overslider-fit.reverse > .prev{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABkCAYAAADaIVPoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALdJREFUeNrs3DENgDAQhtEGBUjBMRKQgIRKgg6wNIEwwMDd+5IT8EJZ/1IkSdJLjdmwtd2cCbsdt0T+2j32vBoRfYV9jB5+hl3bTRn/2S3yk4aFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFzY4dinI+aWhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaOiv0CG3ta7QoYfEenSq1bSQw2F36FRDgJKkUO0CDABQZqrwc3b+IgAAAABJRU5ErkJggg=='); }
.overslider-fit.reverse > .next{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABkCAYAAADaIVPoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKtJREFUeNrs3MEJgDAQRcFgBen/khIsJSVphBxEUA8iaHYe/AIG9rwpSZL063IkbGmrEdAbcG5b+oZG5w5cDhsSfYYdFn0HhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoZ+ip6SnDQsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLOz3K5GwV+hQP7XCfE2rUbB7dKgngJIkvdgqwAAFebLmYVypxAAAAABJRU5ErkJggg=='); }