/* CSS Document */
#simple-content-region {
	#fv {
		width: 100%;
		aspect-ratio: 2880 / 1466;
		position: relative;
	}
	
	.fv-slider {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.fv-slider img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		animation: fvFadeAnimation 30s infinite;
	}
	.fv-slider img:nth-child(1) { animation-delay: 0s; }
	.fv-slider img:nth-child(2) { animation-delay: -25s; }
	.fv-slider img:nth-child(3) { animation-delay: -20s; }
	.fv-slider img:nth-child(4) { animation-delay: -15s; }
	.fv-slider img:nth-child(5) { animation-delay: -10s; }
	.fv-slider img:nth-child(6) { animation-delay: -5s; }
}

@keyframes fvFadeAnimation {
	0% { opacity: 0; }
	4% { opacity: 1; }       /* ★約1.2秒かけて、優雅にふわっと出現 */
	16.66% { opacity: 1; }   /* ぴったり5秒の時点まで、100%の濃さをキープ */
	20.66% { opacity: 0; }   /* ★次の画像と重なりながら、約1.2秒かけてじわ〜っと消える */
	100% { opacity: 0; }
}


#simple-content-region {
	.breakfast-banner{
		max-width:1130px;
		width:80%;
		margin: 5% auto;
	}
	.stay-plans{
		width:20%;
		margin: 0 auto 5%;
		display: block;
	}
	.plan-flex{
		width:80%;
		margin: 0 auto 2%;
		display: flex;
		justify-content: space-between;
	}
	.plan-flex-chi{
		width:31%;
		margin: auto;
	}
	.top-dai2,.top-dai3,.top-dai4,.top-dai5,.top-dai6{
		position:relative;
	}
	.dai2-syousai1,.dai2-syousai2,.dai3-syousai,.dai4-syousai,.dai5-syousai,.dai6-syousai{
		position: absolute;
		transform: translate(-50%, -50%);
        width: 12%;
	}
	.dai2-syousai1{
        top: 33%;
        left: 59.5%;
	}
	.dai2-syousai2{
        top: 82%;
        left: 21.3%;
	}
	.dai3-syousai{
        top: 60%;
        left: 20.5%;
	}
	.dai4-syousai{
        top: 57.5%;
        right: 25.8%;
	}
	.dai5-syousai{
        top: 79.5%;
        left: 20.5%;
	}
	.dai6-syousai{
        top: 64%;
        right: 21.5%;
	}
	.top-dai6 iframe{
        aspect-ratio: 582 / 388;
        width: 40%;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 35%;
        left: 35%;
	}
	.dai3-slider{top:8%;}
	.dai4-slider{top:8%;}
	.dai5-slider{top:11%;}
	/* ==========================================
	   ▼ スライダー1 専用設定（7枚構成）
	============================================= */
	/* ★初期位置を 11.25% に、移動量を 77.5% に変更 */
	#s1-1:checked ~ .s1-main { transform: translateX(11.25%); }
	#s1-2:checked ~ .s1-main { transform: translateX(calc(11.25% - 77.5% * 1)); }
	#s1-3:checked ~ .s1-main { transform: translateX(calc(11.25% - 77.5% * 2)); }
	#s1-4:checked ~ .s1-main { transform: translateX(calc(11.25% - 77.5% * 3)); }
	#s1-5:checked ~ .s1-main { transform: translateX(calc(11.25% - 77.5% * 4)); }
	#s1-6:checked ~ .s1-main { transform: translateX(calc(11.25% - 77.5% * 5)); }
	#s1-7:checked ~ .s1-main { transform: translateX(calc(11.25% - 77.5% * 6)); }

	/* アクティブなページの矢印だけを表示 */
	#s1-1:checked ~ .s1-a1, #s1-2:checked ~ .s1-a2, #s1-3:checked ~ .s1-a3,
	#s1-4:checked ~ .s1-a4, #s1-5:checked ~ .s1-a5, #s1-6:checked ~ .s1-a6, #s1-7:checked ~ .s1-a7 { display: flex; }

	/* アクティブなドットの色変更 */
	#s1-1:checked ~ .rk-dot-box .s1-d1, #s1-2:checked ~ .rk-dot-box .s1-d2, #s1-3:checked ~ .rk-dot-box .s1-d3,
	#s1-4:checked ~ .rk-dot-box .s1-d4, #s1-5:checked ~ .rk-dot-box .s1-d5, #s1-6:checked ~ .rk-dot-box .s1-d6,
	#s1-7:checked ~ .rk-dot-box .s1-d7 { background: #0c5a6c; transform: scale(1.2); }

	/* ==========================================
	   ▼ スライダー2 専用設定（3枚構成）
	============================================= */
	#s2-1:checked ~ .s2-main { transform: translateX(11.25%); }
	#s2-2:checked ~ .s2-main { transform: translateX(calc(11.25% - 77.5% * 1)); }
	#s2-3:checked ~ .s2-main { transform: translateX(calc(11.25% - 77.5% * 2)); }

	#s2-1:checked ~ .s2-a1, #s2-2:checked ~ .s2-a2, #s2-3:checked ~ .s2-a3 { display: flex; }

	#s2-1:checked ~ .rk-dot-box .s2-d1, #s2-2:checked ~ .rk-dot-box .s2-d2, #s2-3:checked ~ .rk-dot-box .s2-d3 { background: #0c5a6c; transform: scale(1.2); }

	/* ==========================================
	   ▼ スライダー3 専用設定（3枚構成）
	============================================= */
	#s3-1:checked ~ .s3-main { transform: translateX(11.25%); }
	#s3-2:checked ~ .s3-main { transform: translateX(calc(11.25% - 77.5% * 1)); }
	#s3-3:checked ~ .s3-main { transform: translateX(calc(11.25% - 77.5% * 2)); }

	#s3-1:checked ~ .s3-a1, #s3-2:checked ~ .s3-a2, #s3-3:checked ~ .s3-a3 { display: flex; }

	#s3-1:checked ~ .rk-dot-box .s3-d1, #s3-2:checked ~ .rk-dot-box .s3-d2, #s3-3:checked ~ .rk-dot-box .s3-d3 { background: #0c5a6c; transform: scale(1.2); }




	/* --- ① 個別クラス：ご希望の 12%（可変）のままでOK！ --- */
	.dai2-syousai1, .dai2-syousai2, .dai3-syousai, .dai4-syousai, .dai5-syousai, .dai6-syousai {
		position: absolute;
		transform: translate(-50%, -50%);
		width: 12% !important;        /* ★ 12%（可変）のままで大丈夫です！ */
		aspect-ratio: 229 / 60;       /* ★ これを入れることで、横幅に合わせて高さも自動で「黄金比」に縮みます */
		padding: 0 !important;
	}

	/* --- ② SVGボタンの共通アニメーション設定 --- */
	a.btn-svg {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		background-color: transparent;
	}

	a.btn-svg svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	a.btn-svg svg rect {
		-webkit-transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);

		stroke: #334561;
		stroke-width: 2;

		stroke-dasharray: 47 3;
		stroke-dashoffset: 14;
	}

	a.btn-svg:hover svg rect {
	stroke-dashoffset: 64; 
}

	/* 中の画像（syousai.png）のサイズ調整 */
	a.btn-svg img {
		position: relative;
		z-index: 2;
		display: block;
		width: 90%; 
		height: auto;
		pointer-events: none;
	}
}