/**
 * オーバースライダー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=='); }
/**
 * Modern UI Library v1.0
----------------------------------------------------------------------------------------------------
 * Use wrap class
 * - [select] .select > select
 * - [input file] .file > input[type="file]
 * 
 * Unimplemented
 * - input file disabled style
 * 
 * Extended Class
 * - [Button List] .buttonlist
 * - [Block Button List] .blockbuttonlist
 * - [Drop Down Button] .dropdown
----------------------------------------------------------------------------------------------------
 * Settings
----------------------------------------------------------------------------------------------------*/
/* Setting Margin */
fieldset,input,button,textarea,.select,.file{ margin:4px; }

/* Setting Text Color */
button,
[type="button"],
[type="reset"],
[type="submit"],
.select > select,
.file{
	color:white;
}

/* Setting Main Color */
button,
[type="button"],
[type="reset"],
[type="submit"],
.select,
.file,
[type="radio"]:checked + *::after{
	background-color:#337ab7;
}

/* Setting Hover Color */
button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover,
.select:hover,
.file:hover{
	background-color:#286090;
}

/* Setting Active Color */
button:active,
[type="button"]:active,
[type="reset"]:active,
[type="submit"]:active,
.file:active{
	background-color:#204d70;
}

/* Setting Effective Color */
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):hover,
textarea:hover{
	border-color:#66afe9;
}
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
[type="checkbox"]:not(:disabled):hover + *::before,
[type="radio"]:not(:disabled):hover + *::before{
	border-color:#66afe9;
	box-shadow:0 0 8px #66afe9;
}

/* Setting Border Color */
fieldset{
	border:1px solid #ccc;
}
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
textarea{
	background-color:white;
	border:1px solid #ccc;
}
[type="checkbox"] + *::before,
[type="radio"] + *::before{
	background-color:white;
	border:2px solid #ccc;
}

/**
 * Standard Interfaces
----------------------------------------------------------------------------------------------------*/
/* common */
input,button,textarea,select,option{
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	box-sizing:border-box;
}

/* fieldset */
fieldset{
	margin-left:0;
	margin-right:0;
	padding:6px 12px;
	border-radius:4px;
}

/* text */
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
textarea{
	vertical-align:middle;
	border-radius:4px;
	padding:6px 12px;
	transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input:disabled:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
textarea:disabled{
	cursor:not-allowed;
	opacity:0.5;
}
textarea{
	display:block;
	width:100%;
	min-height:10em;
}

/* button */
button,
[type="button"],
[type="reset"],
[type="submit"],
.file{
	cursor:pointer;
	vertical-align:middle;
	border:none;
	border-radius:4px;
	padding:6px 12px;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled{
	cursor:not-allowed;
	opacity:0.5;
}

/* file only */
.file{
	position:relative;
	display:inline-block;
}
.file > [type="file"]{
	opacity:0;
	position:absolute;
	right:0;
	top:0;
	margin:0;
	font-size:0;
}

/* image */
[type="image"]{ vertical-align:middle; }
[type="image"]:disabled{
	opacity:.5;
	cursor:not-allowed;
}

/* checkbox radio */
[type="checkbox"],
[type="radio"]{
	opacity:0;
	padding:6px 12px;
	vertical-align:middle;
}
[type="checkbox"] + *,
[type="radio"] + *{
	vertical-align:middle;
	padding:6px 12px;
	position:relative;
}
[type="checkbox"] + *::before,
[type="checkbox"] + *::after,
[type="radio"] + *::before,
[type="radio"] + *::after{
	content:'';
	displayt:block;
	position:absolute;
	top:50%;
	left:0;
}
[type="checkbox"] + *::before,
[type="radio"] + *::before{
	width:12px;
	height:12px;
	margin-top:-8px;
	margin-left:-8px;
	transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="radio"] + *::before{ border-radius:50%; }
[type="checkbox"] + *::after{
	height:24px;
	width:24px;
	margin-top:-16px;
	margin-left:-8px;
}
[type="radio"] + *::after{
	width:8px;
	height:8px;
	margin-top:-4px;
	margin-left:-4px;
	border-radius:50%;
}
[type="checkbox"]:checked + *::after{
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMJJREFUeNpiYBgFwwoYV22fD8LIYkzUNBxIJYAwkN1PVQuQDIeBi1SzAGh4AprhiWfbPBfAOIxUMHw+LsMpsoAYw8m2AGi4AZDaD8QC+AwnywJSDCc5krEYXojPcJJ8ADQcZOh5IFaACi0AGp5ISB8LmutAkTYR3VVQw/eTaji2IAIZMB+aQtANNyDVcBQLgJougMIUykW2ZD65hmONA7T0/YCcYCEYyVjKFrIMx5uKkCwh23CUVIQFFKLRo4A2ACDAAKYDWd9b3WhVAAAAAElFTkSuQmCC'); /* 24x24 checked icon */
	background-repeat:no-repeat;
	background-position:left center;
}
[type="checkbox"]:disabled + *,
[type="radio"]:disabled + *{
	opacity:.5;
	cursor:not-allowed;
}

/* select */
.select{
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGZJREFUeNpiYqAxYBq1YNSCUQvwW/D////z/wmD82TbDtQsAMTv8RgOkhMg2weMjIwfgJQjEH/AIg2Wg6qhDABdmYDF9QlUjSyggQ1IhjfQJEUADZ4PwgyDCYzm5FELRi1gYAAIMADZw36V9Rv1AAAAAABJRU5ErkJggg=='); /* 24x24 white arrow */
	background-repeat:no-repeat;
	background-position:right center;
	overflow: hidden;
	display:inline-block;
	vertical-align:middle;
	border-radius:4px;
	padding-right:24px;
}
.select > select{
	cursor:pointer;
	vertical-align:middle;
	background:transparent;
	border:none;
	padding:6px 12px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
@-moz-document url-prefix(){
	.select{ padding-right:0; } /* icon size */
	.select > select{ padding:0 12px; } /* Firefox padding bug */
}
.select > select > option{
	padding:6px 12px;
	display:block;
}
.select > select:disabled{
	cursor:not-allowed;
	opacity:0.5;
}
/* if IE(not support CSS3 appearance)
.select > select{
	width:150%\9;
	height:100%\9;
}
.select > select > option{ width:66.6%\9; }
*/

/**
 * Extended Interfaces
----------------------------------------------------------------------------------------------------*/
/* Horizontal UI List */
.huilist{
	display:-moz-box;
	display:-webkit-box;
	display:box;
	margin:4px;
	padding:0;
	border:0;
}
.huilist > *{
	margin:0;
	border-radius:0;
	position:relative;
}
.huilist > *:hover{ z-index:1; }
.huilist > *:first-child{ border-radius:4px 0 0 4px; }
.huilist > *:last-child{ border-radius:0 4px 4px 0; }
.huilist > *:not(:first-child){ border-left:1px solid #ccc; }
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + *{
	border-left-width:0;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-right-width:0;
	border-left-width:0;
	border-radius:0;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):first-child{
	border-left-width:1px;
	border-radius:4px 0 0 4px;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-left-width:1px;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):last-child{
	border-right-width:1px;
	border-radius:0 4px 4px 0;
}

/* Vertical UI List */
.vuilist{
	display:block;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	margin:4px;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	padding:0;
	border:0;
}
.vuilist > *{
	margin:0;
	border-radius:0;
	position:relative;
}
.vuilist > *:hover{ z-index:1; }
.vuilist > *:first-child{ border-radius:4px 4px 0 0; }
.vuilist > *:last-child{ border-radius:0 0 4px 4px; }
.vuilist > *:not(:first-child){ border-top:1px solid #ccc; }
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + *{
	border-top-width:0;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-bottom-width:0;
	border-top-width:0;
	border-radius:0;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):first-child{
	border-top-width:1px;
	border-radius:4px 4px 0 0;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-top-width:1px;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):last-child{
	border-bottom-width:1px;
	border-radius:0 0 4px 4px;
}

/**
 * フォーム
----------------------------------------------------------------------------------------------------*/
fieldset{
	border:none;
}
legend{
	font-size:20px;
	font-weight:bold;
	line-height:30px;
}

.required::before{
	content:'*';
	color:crimson;
}