/* =========================================================
   SUITE ページ専用 — CABIN TYPE（客室タイプ）
   2列×2段グリッド。画像＋英タイトル＋日本語タイプ名/面積＋説明。
   ホバーで画像ズーム＋タイトル下線（左→右）。
========================================================= */
.cabin-type {
	padding: 6.4rem var(--s-page-x) var(--s-section-y); /* v3.124: 上128→64px。INTRO(下64px)と合わせ INTRO↔CABIN TYPE 間隔を256→128pxに */
}

/* v3.124: SUITE の INTRO カルーセル下余白を 128→64px（CABIN TYPE 上64pxと対）。
   suite.css は SUITE限定enqueueのため ABOUT 等の intro-carousel には影響しない。 */
.section.section--intro-carousel {
	padding-bottom: 6.4rem;
}
.cabin-type__inner {
	max-width: 144rem; /* 1440px — intro-carousel と揃える */
	margin: 0 auto;
}

.cabin-type__grid {
	list-style: none;
	margin: 5.6rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4rem;
	row-gap: 6.4rem;
}
.cabin-type__card { min-width: 0; cursor: pointer; }

/* --- 画像 --- */
.cabin-type__media {
	position: relative;
	margin: 0 0 2.4rem;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.cabin-type__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; /* v3.181: hover opacity 0.9（ease）を追加 */
}
.cabin-type__img--placeholder { background-color: var(--c-bg-alt); }
.cabin-type__card:hover .cabin-type__img,
.cabin-type__card:focus-within .cabin-type__img { transform: scale(1.04); opacity: 0.9; } /* v3.181: hover/focusで opacity 0.9 */

/* --- タイトル行 --- */
.cabin-type__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.6rem;
}
.cabin-type__title {
	margin: 0;
	font-family: var(--f-en);
	font-size: 2.8rem; /* v3.186: 2.2→2.8rem */
	font-weight: 300; /* v3.181: 400→300 */
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--c-ink);
	transition: opacity 0.3s ease; /* v3.182: hover色替えフェード（overlay/footer に統一） */
}
.cabin-type__title span {
	display: inline-block;
}
/* v3.182: hover アンダーバー（span::after）を廃止し、overlay/footer 同様の色替え（同色のまま opacity 沈め）に変更 */
.cabin-type__card:hover .cabin-type__title,
.cabin-type__card:focus-within .cabin-type__title { opacity: 0.5; }

.cabin-type__bf {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--c-ink-mute);
}
.cabin-type__bf svg { display: block; width: 2rem; height: 2rem; }

/* --- テキスト --- */
.cabin-type__meta {
	margin: 1.6rem 0 0;
	font-family: var(--f-jp);
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--c-ink);
}
.cabin-type__area { color: var(--c-ink-mute); }

.cabin-type__desc {
	margin-top: 1.2rem;
	font-family: var(--f-jp);
	font-weight: 300; /* v3.101: 継承400→300（本文統一） */
	font-size: 1.4rem; /* v3.181: 1.3→1.4rem */
	line-height: 2.2; /* v3.181: 1.95→2.2（本文標準に統一） */
	color: var(--c-ink-mute);
}
.cabin-type__desc p { margin: 0; }
.cabin-type__desc p + p { margin-top: 1em; }

/* --- SP --- */
@media (max-width: 768px) {
	.cabin-type {
		padding-top: 0; /* v3.177: SP は su-intro→cabin-type を 6.4rem に（intro 下 padding のみで確保）。About の intro→profile(6.4rem)に倣う。PC の 128px は維持 */
	}
	.cabin-type__grid {
		grid-template-columns: 1fr;
		row-gap: 4.8rem;
	}
	.cabin-type__title { font-size: min(5.2vw, 2.8rem); } /* v3.186: 他ページ見出しと同じ PC/SP 関係（上限=PC 2.8rem・狭幅は 5.2vw 追従） */
	.cabin-type__meta { letter-spacing: 0; } /* v3.181: SP本文 letter-spacing 0 統一 */
}


/* =====================================================================
   SUITE スライドイン（CABIN TYPE → Suite 紹介パネル）
   パネルは明るい（白基調）テーマ。サイト本体のダーク配色とは別系統。
   ===================================================================== */

/* アクセシビリティ: 視覚的に隠すユーティリティ */
.u-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* --- クリック可能なキャビンカード --- */
.cabin-type__card { position: relative; }
.cabin-type__open {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.cabin-type__open:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 4px;
}

/* --- 背景オーバーレイ（左の覗き部分はネイビーグラデ） --- */
.suite-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: linear-gradient(90deg, rgba(8, 17, 30, 0.92) 0%, rgba(8, 17, 30, 0.62) 60%, rgba(8, 17, 30, 0.5) 100%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.85s ease, visibility 0s linear 0.85s;
}
.suite-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.85s ease, visibility 0s;
}

/* --- パネル本体 --- */
.suite-panel {
	--sp-ink:      #16243d; /* 見出しネイビー */
	--sp-body:     #3a4456; /* v3.186: 白背景でしっかり読める濃さに（旧 #5b6373）。--sp-ink と調和する暗いスレートネイビー */
	--sp-mute:     #9aa0ab; /* 補助テキスト */
	--sp-rule:     #e7e4dc; /* 罫線（ウォームグレー） */
	--sp-gap-left:    9rem;  /* 白背景の左端 → コンテンツ までの余白 90px */
	--sp-content-max: 80rem; /* コンテンツ幅 800px（① カルーセル基準） */
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	/* 800pxコンテンツが画面中央に来る幅: 50vw + (左余白90 + 800/2 = 490px) */
	width: min(50vw + 49rem, 100vw);
	height: 100vh;
	height: 100dvh;
	background: #ffffff;
	color: var(--sp-body);
	box-shadow: -3rem 0 6rem rgba(8, 17, 30, 0.28);
	transform: translateX(7rem);
	opacity: 0;
	transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
	will-change: transform, opacity;
}
.suite-panel.is-open { transform: translateX(0); opacity: 1; }

/* バー（eyebrow + CLOSE） */
.suite-panel__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.8rem 4rem 2.8rem var(--sp-gap-left);
	border-bottom: 1px solid var(--sp-rule);
}
.suite-panel__eyebrow {
	margin: 0;
	font-family: var(--f-en);
	font-size: 1.2rem;
	letter-spacing: 0.18em;
	color: var(--sp-mute);
}
.suite-panel__close {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.6rem 0.4rem;
	border: 0;
	background: transparent;
	color: var(--sp-ink);
	font-family: var(--f-en);
	font-size: 1.2rem;
	letter-spacing: 0.18em;
	cursor: pointer;
}
.suite-panel__close-x {
	position: relative;
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
}
.suite-panel__close-x::before,
.suite-panel__close-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: center;
}
.suite-panel__close-x::before { transform: rotate(45deg); }
.suite-panel__close-x::after  { transform: rotate(-45deg); }
.suite-panel__close-label { line-height: 1; }
.suite-panel__close:hover { opacity: 0.6; }
.suite-panel__close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* スクロール領域 */
.suite-panel__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 5.6rem 4rem 8rem 0;
}

/* コンテンツは左端から --sp-gap-left、幅は --sp-content-max（=800px）で左寄せ。
   パネル幅を 50vw+490px にしてあるため、この800pxが画面の左右中央に乗る。 */
.suite-panel__head,
.suite-list,
.suite-panel__empty {
	max-width: var(--sp-content-max);
	margin-left: var(--sp-gap-left);
}

/* 開く所作（v3.184/186）: パネル表示後、overlay メニューのテキストリンクと同じ「右→左」フェードイン。
   v3.186: このパネルに限り translateY(下→上) を translateX(右→左) に変更し、距離・easing も overlay と同一に
   （translateX(2rem)→0 ／ opacity 0.5s ease ＋ transform 0.65s cubic-bezier(0.16,1,0.3,1)）。見出し内はスタッガー。 */
.suite-panel__head > *,
.suite-panel__empty {
	opacity: 0;
	transform: translateX(2rem);
	transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.suite-panel.is-open .suite-panel__head > *,
.suite-panel.is-open .suite-panel__empty { opacity: 1; transform: translateX(0); }
/* 見出しブロック内をスタッガー（base 0.18s / 増分 0.08s）。クラス指定なので欠落要素があっても破綻しない */
.suite-panel.is-open .suite-panel__title { transition-delay: 0.18s; }
.suite-panel.is-open .suite-panel__sub   { transition-delay: 0.26s; }
.suite-panel.is-open .suite-panel__desc  { transition-delay: 0.34s; }
.suite-panel.is-open .suite-panel__empty { transition-delay: 0.26s; }

/* v3.148/184/186: suite-item をモーダル内スクロールに連れて個別リビール（1件ずつ出現）。
   PC=2カラムのため行内の2件は同位置で同時に交差し「2件ずつ」出る／SP=1カラムで1件ずつ。
   suite.js が .suite-panel__scroll を root に各 .suite-item を監視し .is-revealed を付与。
   v3.186: 見出しと同じ overlay 風「右→左」スライド（translateX(2rem)）に統一。 */
.suite-item {
	opacity: 0;
	transform: translateX(2rem);
	transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.suite-item.is-revealed { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
	.suite-panel__head > *,
	.suite-panel__empty,
	.suite-item { opacity: 1; transform: none; transition: none; }
}

/* パネル見出し */
.suite-panel__head {
	margin-bottom: 6rem;                       /* v3.185: 4→6rem（罫線↔一覧） */
	padding-bottom: 4rem;                       /* v3.185: desc↔罫線 4rem */
	border-bottom: 1px solid var(--sp-rule);    /* v3.185: 見出しブロック下に区切り罫線（添付カンプ） */
}
.suite-panel__title {
	margin: 0;
	font-family: var(--f-en);
	font-weight: 400;
	font-size: clamp(3.2rem, 4vw, 4.8rem); /* v3.185: 上限 5→4.8rem（min/preferred は維持＝SP下限3.2rem保持） */
	line-height: 1.08;
	letter-spacing: 0.04em;
	color: var(--sp-ink);
}
.suite-panel__sub {
	margin: 1.2rem 0 0;
	font-family: var(--f-jp);
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: var(--sp-mute);
}
/* v3.183: cabin-type__desc と同じ本文をパネル見出し下に表示（sub の下 3rem ／ パネル明色テーマの本文色） */
.suite-panel__desc {
	margin: 3rem 0 0;
	font-family: var(--f-jp);
	font-weight: 300;
	font-size: 1.4rem;
	line-height: 2.2;
	color: var(--sp-body);
}
.suite-panel__desc p { margin: 0; }
.suite-panel__desc p + p { margin-top: 1em; }
.suite-panel__empty {
	margin: 0;
	font-family: var(--f-jp);
	font-size: 1.4rem;
	color: var(--sp-mute);
}

/* --- Suite 一覧（2カラムグリッド） --- */
.suite-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 5.6rem;
	row-gap: 0;
}
.suite-item {
	grid-column: 1 / -1;            /* p1/p2/p3 は全幅 */
	border-top: 1px solid var(--sp-rule);
	padding: 5.2rem 0;
}
.suite-item--p4 { grid-column: span 1; } /* p4 は半幅（2件で1行） */
.suite-list > .suite-item:first-child { border-top: 0; padding-top: 0; }
/* v3.183: 最後の suite-item にも下罫線（アンダーバー）。非last間の罫線（次itemのborder-top）と同じく content から padding-bottom 5.2rem 下に来る。罫線下の余白はスクロール下 padding 8rem で確保 */
.suite-list > .suite-item:last-child { border-bottom: 1px solid var(--sp-rule); }

/* 見出し */
.suite-item__head { margin: 0; } /* v3.185: margin-bottom 2rem を撤去（head↔body の余白は body の margin-top へ移管） */
.suite-item__title {
	margin: 0;
	font-family: var(--f-en);
	font-weight: 400;
	font-size: clamp(2.2rem, 2.4vw, 3rem);
	line-height: 1.15;
	letter-spacing: 0.03em;
	color: var(--sp-ink);
}
.suite-item__sub {
	margin: 1rem 0 0;
	font-family: var(--f-jp);
	font-size: 1.3rem;
	letter-spacing: 0.08em;
	color: var(--sp-mute);
}
.suite-item__name { color: var(--sp-ink); }
.suite-item__spec { color: var(--sp-mute); }
/* 名称→スペックの間に半角相当（全角の半分=0.5em）の余白。v3.93（旧v3.91の全角スペースを置換） */
.suite-item__name + .suite-item__spec { margin-left: 0.5em; }

/* 本文 */
.suite-item__body {
	margin-top: 2rem; /* v3.185: head↔body の余白を body 側で制御（head margin 0 と対） */
	max-width: 64rem;
	font-family: var(--f-jp);
	font-weight: 300; /* v3.101: 継承400→300（本文統一） */
	font-size: 1.4rem;
	line-height: 2;
	color: var(--sp-body);
}
.suite-item__body p { margin: 0; }
.suite-item__body p + p { margin-top: 1em; }
.suite-item--p4 .suite-item__body { max-width: none; }

/* パターン2: テキスト + 中画像 */
.suite-item__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 38rem;
	align-items: start;
	gap: 4.8rem;
}
.suite-item__media { margin: 0; }
.suite-item__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.suite-item__img--placeholder {
	background: repeating-linear-gradient(45deg, #efece5, #efece5 10px, #e7e3da 10px, #e7e3da 20px);
}

/* パターン1: 大カルーセル + サムネ */
.suite-carousel { margin-top: 3.2rem; }
.suite-carousel__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f0ece4;
}
.suite-carousel__track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.suite-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.suite-carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.suite-carousel__img,
.suite-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.suite-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 3.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.suite-carousel__arrow svg { width: 100%; height: 100%; fill: #fff; }
.suite-carousel__arrow--prev { left: 2.4rem; }
.suite-carousel__arrow--prev svg { transform: scaleX(-1); }
.suite-carousel__arrow--next { right: 2.4rem; }
.suite-carousel__stage:hover .suite-carousel__arrow { opacity: 0.7; }
.suite-carousel__stage:hover .suite-carousel__arrow:hover { opacity: 1; }
.suite-carousel__arrow:focus-visible { opacity: 1; outline: 2px solid var(--c-accent); outline-offset: 2px; }

.suite-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: 2.4rem;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.suite-carousel__dot {
	display: block;
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	opacity: 0.6;
	flex-shrink: 0;
	cursor: pointer;
	transition: width 0.4s ease, border-radius 0.4s ease, opacity 0.4s ease;
}
.suite-carousel__dot.is-active { width: 2.8rem; border-radius: 0.5rem; opacity: 1; }
.suite-carousel__dot:hover:not(.is-active) { opacity: 1; }
.suite-carousel__dot:focus-visible { opacity: 1; outline: 2px solid var(--c-accent); outline-offset: 2px; }

.suite-carousel__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}
.suite-carousel__thumb {
	display: block;
	width: 9rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.suite-carousel__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.suite-carousel__thumb:hover { opacity: 0.85; }
.suite-carousel__thumb.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--c-accent);
}
.suite-carousel__thumb:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* 背景スクロールロック */
html.suite-lock, html.suite-lock body { overflow: hidden; }

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	.suite-panel { transition: opacity 0.2s linear; transform: none; }
	.suite-panel__head,
	.suite-list,
	.suite-panel__empty { transition: none; }
	.suite-overlay { transition: opacity 0.2s linear; }
	.suite-carousel__slide { transition: none; }
}

/* --- SP --- */
@media (max-width: 768px) {
	.suite-panel { --sp-gap-left: 2rem; --sp-content-max: none; width: 100%; }
	.suite-panel__bar { padding: 1.8rem 2rem; }
	.suite-panel__scroll { padding: 3.6rem 2rem 6rem 0; }
	.suite-panel__head { margin-bottom: 3.6rem; }
	.suite-list { column-gap: 0; }
	.suite-item--p4 { grid-column: 1 / -1; } /* SPは全幅 */
	.suite-item { padding: 3.6rem 0; }
	.suite-item__cols { grid-template-columns: 1fr; gap: 2.4rem; }
	.suite-carousel__thumb { width: 7rem; }
	.suite-carousel__arrow { width: 1.6rem; height: 3rem; opacity: 0.7; }
	.suite-carousel__arrow--prev { left: 1.6rem; }
	.suite-carousel__arrow--next { right: 1.6rem; }
	.suite-carousel__dots { bottom: 1.6rem; }
}