@charset "utf-8";

/* -------------------------------------------------- */
/* スライダー */
.auto_slider {

	/* height:500px; */

	position:relative;
	overflow:hidden;
	width:100%;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	opacity: 0;
	transition:0.5s;
}
/* 画像の選択を制限 */
.auto_slider img {
	pointer-events: none;
}
/* 画像リンクを除外 */
.auto_slider a img {
	transition:0.3s;
	pointer-events: auto;
}
.auto_slider a img:hover {
	opacity:0.9;
}
/* スライダー内フレーム */
.auto_slider_inner_frame {
	position:absolute;
	width:100%;
	height:auto;
	left:0px;
}
/* 要素 */
.auto_slid_box {
	width:100%;
	float:left;
	overflow: hidden;
	position: relative;
}

/* -------------------------------------------------- */
/* 前へボタン */
.prev {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	left:10px;
	padding:20px 0px;
	border:1px solid #666666;
	color:#666666;
	transition: 0.3s;
	cursor:pointer;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	width: 25px;
	text-align: center;
	font-size:12px;
	background-color: rgba(0,0,0,0.2);
}

/* 次へボタン */
.next {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	right:10px;
	padding:20px 0px;
	border:1px solid #666666;
	color:#666666;
	transition: 0.3s;
	cursor:pointer;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	width: 25px;
	text-align: center;
	font-size:12px;
	background-color: rgba(0,0,0,0.2);
}

.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.5);
	color:#ffffff;
}
