@charset "UTF-8";

/*---------------*/
/* 画像カルーセル */
/*---------------*/

/* =========================================
	1. スライダー全体のコンテナ（レスポンシブ対応）
========================================= */
.cs-fade-slider-container {
		position: relative;
		width: 100%;
		.width: 370px;
		.height: 536px;
		/* ▼ 画像の比率を16:9に固定して自動伸縮させる ▼ */
		aspect-ratio: 2 / 3; 
		overflow: hidden;
		.border-radius: 12px;
		.box-shadow: 0 10px 30px rgba(0,0,0,0.08);
		.margin-bottom: 2em;
		margin-left: auto;
		margin-right: auto;
		background-color: #fffef8; /* 切り替え時の背景のチラつき防止 */
}

/* =========================================
	2. 各スライドの共通設定（重ね合わせ）
========================================= */
.cs-fade-slide-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0; /* 最初はすべて非表示 */
		
		/* ▼ 12秒かけて無限にアニメーションを繰り返す ▼ */
		animation: cs-fade-anime 18s infinite;
}

.cs-fade-slide-item img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* 枠線に合わせて画像を綺麗にトリミング */
		display: block;
}

/* =========================================
	3. アニメーションのディレイ（時間差）設定
========================================= */
/* 全体12秒 ÷ 3枚 ＝ 1枚あたり4秒ずつズラす */
.cs-fade-slide-item:nth-child(1) {
		animation-delay: 0s;
}
.cs-fade-slide-item:nth-child(2) {
		animation-delay: 6s;
}
.cs-fade-slide-item:nth-child(3) {
		animation-delay: 12s;
}

/* =========================================
	4. フェードアニメーションの定義（3枚用）
========================================= */
@keyframes cs-fade-anime {
		0% {
				opacity: 0;
				animation-timing-function: ease-in;
		}
		8% {
				opacity: 1; /* フワッと表示される（約1秒） */
				animation-timing-function: ease-out;
		}
		33% {
				opacity: 1; /* 表示を維持（約3秒） */
		}
		41% {
				opacity: 0; /* フワッと消える（約1秒） */
		}
		100% {
				opacity: 0;
		}
}