/* メインスライダー用CSS */

/* 画像枠の基本設定 */
.main-slider .img {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/* 画像レイヤーの共通スタイル */
.main-slider .img-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* current: 現在の画像の状態（枠の中にいる） */
.main-slider .img-layer.current {
	z-index: 2;
	transform: translateX(0);
}

/* next: 次の画像の待機状態（枠の右に隠れている） */
.main-slider .img-layer.next {
	z-index: 2;
	transform: translateX(100%);
}

/* move: スライドフェードのアニメーション */
.main-slider .img-layer.move {
	transition: transform 1s ease-in-out;
}

/* next + move: フェードイン（右から左へ移動） */
.main-slider .img-layer.next.move {
	transform: translateX(0);
}

/* current + move: フェードアウト（中央から左へ移動） */
.main-slider .img-layer.current.move {
	transform: translateX(-100%);
}

/* end: 枠の左側から右側に位置をリセット（瞬間移動） */
.main-slider .img-layer.end {
	transition: none;
	transform: translateX(100%);
}