@charset "utf-8";

/* -------------------------------------------------- */
/* スライダー */
.auto_slider {
	height:115vh; /* 要素の高さを固定 (未設定時は要素の最大高になる) */

	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;
}

/* 画像用のフレーム */
.auto_slid_image_frame {
	position: relative;
	height:calc(100% - 50px);
	width: 100%;
	overflow: hidden;
}
/* 画像下部の枠 */
.auto_slid_text_frame {
	height:40px;
	width:80%;
	background-color: #eeefe7;
	text-align: center;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	border: 1px solid #c7ba9a;
	border-radius: 10px;
}

.auto_slid_image_frame img {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	transform: translate(-50%, -50%);
	object-fit: contain;
	border-radius:10px;
	border:1px solid #cccccc;
}

/* タブレット */
@media only screen and (max-width:1024px) {

	/* スライダー */
	.auto_slider {
		height:700px; /* 要素の高さを固定 (未設定時は要素の最大高になる) */
	}

}

/* スマホ */
@media only screen and (max-width:599px) {

	/* スライダー */
	.auto_slider {
		height:500px; /* 要素の高さを固定 (未設定時は要素の最大高になる) */
	}

}

/* 画像の選択を制限 */
.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: 100%;
	left:0px;
}
/* 要素 */
.auto_slid_box {
	width:100%;
	height: 100%;
	float:left;
	overflow: hidden;
	position: relative;
}

/* -------------------------------------------------- */
/* 要素内の画像サイズを収まるようにする */
.auto_slid_box img {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	object-fit: contain;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

/* 前へ */
.prev,.next {
	/* 高さを幅に合わせる */
	width: 50px;
	height: 50px;
	position:absolute;
	top:50%;
	transform: translateY(calc(-50% - 25px));
	-webkit-transform: translateY(calc(-50% - 25px));
	z-index: 1;
	text-align:center;
	transition:0.3s;
	cursor:pointer;
}
/* 前へ */
.prev {
	left:0px;
}
/* 次へ */
.next {
	right:0px;
}
/* 前へ,次へ */
.prev:hover, .next:hover {
	opacity: 0.8;
}

/* スマホ */
@media only screen and (max-width:599px) {
	/* 前へ,次へ */
	.prev, .next {
		width:40px;
		height:40px;
	transform: translateY(calc(-50% - 20px));
	-webkit-transform: translateY(calc(-50% - 20px));
	}
}

/* -------------------------------------------------- */
/* 隙間用の専用フレームを追加 */
.auto_slider_dedicated_frame {
	padding-left:25px;
	padding-right:25px;
	position:relative;
}