/* ============================================================
   about.css — ABOUT SEFU ページ専用スタイル
   （is_page_template('page-about.php') でのみ enqueue）
   現在含む: SHIP DATA セクション
   今後: DECK PLAN セクション（タブ切替）を追加予定
   ※ 配色/フォント/余白はサイト共通トークン（style.css :root）を使用
   ============================================================ */

/* ===== SHIP DATA ========================================
   テキスト+画像の横並び。左=見出し+本文+スペック表 / 右=船舶外観写真 */
.ship-data{
	padding: var(--s-section-y) 0 8rem; /* 下80px：DECK PLAN上80pxと合わせて間隔160px */
}

.ship-data__inner{
	width: 128rem; /* 1280px固定。section-profile と同じグリッド基準で中央寄せ */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 40rem 78rem; /* 左400px / 右780px。右カラム左端=DESIGNER左カラム右端(500px)、左カラム左端=0で揃う */
	column-gap: 10rem; /* 左右カラム間 100px */
	align-items: center;
}

/* --- 左カラム: テキスト --- */
.ship-data__body{
	margin-top: 2.4rem;
	max-width: 48rem;
	color: var(--c-ink);
	font-size: 1.5rem;
	line-height: 2.2; /* v3.175: 他ページ本文（.section__body）と統一（2.1→2.2） */
}

.ship-data__body p + p{
	margin-top: 0.5em; /* v3.175: 段落間 0.5em（.section__body と統一。旧 1.6rem を置換） */
}

/* --- スペック表（2カラムの定義リスト） --- */
.ship-data__specs{
	margin-top: 4rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4rem;
}

/* グループ（基本データ / 要目） */
.ship-data__spec-group{
	min-width: 0;
}

.ship-data__spec-list{
	margin: 0;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	padding: 0.8rem 0;
}

/* 1項目：ラベル …… 値（点線リーダーで連結、値は右端で揃う） */
.ship-data__spec{
	display: flex;
	align-items: baseline;
	padding: 1rem 0.4rem;
}

.ship-data__spec-label{
	display: flex;
	align-items: baseline;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--c-ink-mute);
}

.ship-data__spec-label::after{
	content: '';
	flex: 1 1 auto;
	margin: 0 0.8rem;
	border-bottom: 1px dotted var(--c-ink-mute);
	transform: translateY(-0.25em);
	opacity: 0.6;
}

.ship-data__spec-value{
	flex: 0 0 auto;
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: 0.04em;
	color: var(--c-ink);
	white-space: nowrap;
}

/* v3.362: 日本語以外は1カラム化（PCでも）。
   左カラム400px を2分割すると1欄180px しかなく、英語ラベル（Gross tonnage / Shipyard 等）が
   値と重なってしまうため。SPの2グループ連結処理と同じ見せ方にして、罫線の継ぎ目を消す。 */
.ship-data__specs--stacked{
	grid-template-columns: 1fr;
	column-gap: 0;
	row-gap: 0;
}

.ship-data__specs--stacked .ship-data__spec-group:first-child:not(:last-child) .ship-data__spec-list{
	border-bottom: none;
	padding-bottom: 0;
}

.ship-data__specs--stacked .ship-data__spec-group:last-child:not(:first-child) .ship-data__spec-list{
	border-top: none;
	padding-top: 0;
}

/* --- 右カラム: 画像 --- */
.ship-data__media{
	position: relative;
}

.ship-data__img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ship-data__img--placeholder{
	aspect-ratio: 4 / 3;
	background-color: var(--c-bg-alt);
}

/* ===== レスポンシブ（SP: 縦積み） ======================== */
@media (max-width: 768px) {
	/* v3.174/v3.175: SP のセクション間余白を統一。profile→ship-data（PC接続マージン3.2rem）を SP で 0 に戻し、
	   ship-data 下 padding(8rem) を撤去、deck-plan 上 padding を 8rem→var(--s-section-y) に下げる。
	   これで profile→ship-data と ship-data→deck-plan が同じ 6.4rem（= var(--s-section-y)）に揃う。 */
	.section-profile + .ship-data{
		margin-top: 0; /* v3.175: PC の 160px 接続マージンを SP で解除 */
	}
	.ship-data{
		padding-bottom: 0; /* 下 8rem は SP 不要。間隔は次セクションの上 padding に一本化 */
	}
	.deck-plan{
		padding-top: var(--s-section-y); /* 8rem→6.4rem（SP）。ship-data 上と同間隔に */
	}

	.ship-data__inner{
		width: 100%;
		padding: 0 var(--s-page-x);
		grid-template-columns: 1fr;
		gap: 0; /* v3.166: 均一 gap を廃し、各要素の margin で間隔を個別制御 */
	}

	/* v3.164: SP の表示順を 見出し → 画像 → 本文 → スペック に。
	   heading/body/specs は __text 内、media は別要素なので、__text を display:contents で
	   解体して __inner(grid 1fr) 直下に出し、order で並べ替える。 */
	.ship-data__text{
		display: contents;
	}
	.ship-data .section-heading{
		order: 1;
		margin-bottom: 0; /* v3.166: 見出し↔画像 を詰める（全 .section-heading ではなく ship-data 限定） */
	}
	.ship-data__media{ order: 2; }
	.ship-data__body{ order: 3; }
	.ship-data__specs{ order: 4; }

	.ship-data__body{
		max-width: none;
		font-size: 1.4rem;
		margin-top: 1.2rem; /* v3.166: 画像↔本文 を 2.4rem→1.2rem に詰める（gap:0 化に伴い margin で制御） */
		/* v3.175: line-height:2 を撤去し base の 2.2 を継承（他ページ本文と統一） */
	}

	.ship-data__specs{
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 0; /* v3.164: 2グループを隙間なく連結 */
		margin-top: 3.2rem;
	}

	/* v3.164: SP は2グループが縦積み。1つ目の下罫線と2つ目の上罫線を消し、隙間も無くして
	   2つで1つの spec-group に見せる（グループが2つある時のみ適用） */
	.ship-data__spec-group:first-child:not(:last-child) .ship-data__spec-list{
		border-bottom: none;
		padding-bottom: 0; /* v3.165: margin は元から0。連結部の余白源は padding なのでこれを0に（項目間2remと揃い継ぎ目が消える） */
	}
	.ship-data__spec-group:last-child:not(:first-child) .ship-data__spec-list{
		border-top: none;
		padding-top: 0; /* v3.165 */
	}
}

/* ===== DECK PLAN ========================================
   タブ切替。左=デッキ図(+ホットスポット) / 右=縦カルーセル写真。
   引き出し線(SVG)・クリックで中央表示(スロットマシン)は about.js。
   写真は 380×214 固定。1〜3枚=静止（プランに対し上下中央）/ 4枚以上=縦ループ。 */
.deck-plan{
	padding: 8rem var(--s-page-x) var(--s-section-y); /* 上80px：SHIP DATA下80pxと合わせて間隔160px */
}
.deck-plan__inner{
	max-width: var(--s-content-max);
	margin: 0 auto;
}

/* --- タブ --- */
.deck-plan__tabs{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 2.8rem;
	margin: 4rem 0 0;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--c-rule);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.deck-plan__tabs::-webkit-scrollbar{ display: none; }

.deck-plan__tab{
	flex: 0 0 auto;
	position: relative;
	padding: 0.4rem 0.2rem;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--f-en);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	color: var(--c-ink-mute);
	white-space: nowrap;
	transition: color 0.3s ease;
}
.deck-plan__tab::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -1.7rem;
	width: 100%;
	height: 1px;
	background: var(--c-accent);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.deck-plan__tab:hover{ color: var(--c-ink); }
.deck-plan__tab.is-active{ color: var(--c-ink); }
.deck-plan__tab.is-active::after{ opacity: 1; }

/* --- パネル --- */
.deck-plan__panel{
	position: relative;
	margin-top: 3rem; /* v3.190: 5.6→3rem（見出し/タブ↔パネルを詰める） */
	opacity: 1;
	transition: opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1); /* 表示=ゆっくりふわっと */
}
.deck-plan__panel[hidden]{ display: none; }
.deck-plan__panel.is-entering{ opacity: 0; transition: none; }  /* 開始状態（瞬間にゼロ） */
.deck-plan__panel.is-leaving{
	opacity: 0;
	transition: opacity 0.43s cubic-bezier(0.45, 0, 0.55, 1);     /* 退場=やわらかく */
}
@media (prefers-reduced-motion: reduce) {
	.deck-plan__panel, .deck-plan__panel.is-leaving{ transition: none; }
}

/* v3.236: 凡例を全タブ共通の固定左カラムに。右(.deck-plan__panels)だけタブ切替＝910px以内 */
.deck-plan__body{
	display: flex;
	gap: 0; /* v3.238: 3rem→0（凡例と右カラムを密着） */
	align-items: flex-start;
	justify-content: center;
}
.deck-plan__legend-col{
	flex: 0 0 auto;
	width: 24rem;
	margin-top: 3rem; /* パネルの margin-top と上端を揃える */
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}
.deck-plan__panels{ flex: 1 1 auto; max-width: 910px; min-width: 0; }

/* 地図(左) / カルーセル(右) の2カラム。SVGはこのグリッドの外側に重ねる */
.deck-plan__grid{
	display: grid;
	grid-template-columns: minmax(0, 34rem) 38rem; /* v3.236: 左を34remに（v3.235のマップ34remに合わせ図とカルーセルの余白を解消）／v3.188: 1fr廃止 */
	justify-content: center;                       /* v3.188: 図＋カルーセルを1つのまとまりとして左右中央へ */
	align-items: center;
	gap: 4rem;                                     /* v3.188: 5.6→4rem（図とカルーセルを少し近づける） */
	width: fit-content;                            /* v3.238: 図＋カルーセルを実寸に縮め… */
	max-width: 100%;
	margin-left: auto;                             /* v3.239: 910px内で右寄せ（margin-rightを小さくするほど右／0で右端／約8.5remで中央） */
	margin-right: 4rem;
}
/* v3.189: 写真画像が0枚のデッキはマップ単独・左右中央（空カルーセル枠を出さない） */
.deck-plan__grid--map-only{ grid-template-columns: minmax(0, 34rem); margin-right: auto; } /* v3.236: 34rem ／ v3.245: 写真なしデッキはMAP単独を左右中央へ（v3.239の右寄せmargin-right:4remをautoで上書き、margin-left:autoは継承） */
.deck-plan__grid--map-only .deck-plan__viewport{ display: none; }

/* --- Yacht view（左=詳細テキスト / 右=全デッキプラン画像） --- */
.deck-plan__yacht{
	display: grid;
	grid-template-columns: 24rem minmax(0, 1fr);
	gap: 4.8rem;
	align-items: start;
	margin-top: 5.6rem;
}

.deck-plan__legend-title{
	font-family: var(--f-en);
	font-size: 1.3rem;
	letter-spacing: 0.16em;
	color: var(--c-accent);
	font-weight: 300; /* v3.103 */
	margin-bottom: 1.2rem;
}




.deck-plan__legend-list, .deck-plan__symbols{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.deck-plan__symbols{ gap: 0.5rem; } /* v3.306: 記号リストのみ 0.7→0.5rem（客室タイプは0.7rem維持） */
.deck-plan__legend-item{ display: flex; align-items: center; gap: 1rem; font-size: 1.2rem; color: var(--c-ink-mute); }
.deck-plan__swatch{ flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.2); }
.deck-plan__symbols li{ display: flex; align-items: center; gap: 1rem; font-size: 1.2rem; color: var(--c-ink-mute); letter-spacing: 0.02em; } /* v3.238: アイコン＋ラベルの横並び */
.deck-plan__symbol-icon{ /* v3.238: SVGをマスクにしてラベルと同色（グレー）で塗る。紺地でも視認可 */
	flex: 0 0 auto;
	width: 1.6rem; height: 1.6rem;
	background-color: currentColor;
	-webkit-mask: var(--sym-icon) no-repeat center / contain;
	mask: var(--sym-icon) no-repeat center / contain;
}
.deck-plan__yacht-plan{ min-width: 0; position: relative; } /* v3.270: ルーペlens配置の基準 */
.deck-plan__yacht-img{ display: block; width: 100%; height: auto; border-radius: 0.4rem; } /* v3.190: 白地ラインアートを紺地に置くため軽い角丸 */
.deck-plan__yacht-img--placeholder{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 7;
	background-color: var(--c-bg-alt);
	color: var(--c-ink-mute);
	font-size: 1.3rem;
	text-align: center;
	line-height: 1.9;
}

/* --- 引き出し線（SVGオーバーレイ・パネル全体に重なる） --- */
/* --- 引き出し線（デッキ図に固定。viewBox 0 0 100 で%座標） --- */
.deck-plan__lines{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}
.deck-plan__line{
	stroke: var(--c-ink-mute); /* v3.222: ゴールド→サイトのグレー系で統一 */
	stroke-width: 1;
	opacity: 0.5;
	vector-effect: non-scaling-stroke;
	transition: stroke 0.3s ease, opacity 0.3s ease; /* v3.237: active連動の色替えを滑らかに */
}
.deck-plan__line.is-active{ stroke: var(--c-accent); opacity: 1; } /* v3.237: ラベル(.is-active)と同色のゴールドに */

/* v3.304: 写真クリックで図中の該当地点に灯る「レーダーマーカー」。
   本体=半透明ゴールドの丸（中心）／::before・::after=外へ広がって消えるパルスリング（sonar）。
   デフォルト非表示（opacity:0）→ .is-active で点灯＋アニメ。point_x/y に絶対配置。 */
.deck-plan__marker{
	position: absolute;
	z-index: 4; /* line(1)/hotspot(3) より前面・loupe(6) より背面 */
	width: 1.35rem; /* v3.317: 少し大きく（1.1→1.35rem） */
	height: 1.35rem;
	transform: translate(-50%, -50%); /* 位置決めのみ（scaleは擬似要素側＝リング波紋に干渉させない） */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}
/* v3.317: 中心ドット＝鼓動（beat）。色はCF7バリデーションエラーと同じ #B52424（視認性向上） */
.deck-plan__marker::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(181, 36, 36, 0.9); /* v3.318→v3.319: 中心の塗りを少し透過（0.82→0.9） */
	box-shadow: 0 0 0.7rem rgba(181, 36, 36, 0.65);
}
/* v3.317: 外へ広がるリング＝波紋（radar） */
.deck-plan__marker::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid #B52424;
	opacity: 0;
}
.deck-plan__marker.is-active{ opacity: 0.95; }
.deck-plan__marker.is-active::before{ animation: deck-marker-beat 2.6s ease-in-out infinite; }  /* 中心の鼓動 */
.deck-plan__marker.is-active::after{ animation: deck-marker-radar 2.6s ease-out infinite; }    /* 波紋 */

@keyframes deck-marker-radar {
	0%{ opacity: 0.5;  transform: scale(1); }
	70%{ opacity: 0; }
	100%{ opacity: 0;    transform: scale(4.4); }
}
/* v3.317: 中心ドットの鼓動（ゆっくり脈打つ） */
@keyframes deck-marker-beat {
	0%, 100%{ transform: scale(0.85); }  /* v3.319: スタートを一回り小さく（最大1.18は維持＝振幅拡大でより鼓動らしく） */
	50%{ transform: scale(1.18); }
}
/* 動きを抑える設定では拡散を止め、静的な丸のみで位置を示す */
@media (prefers-reduced-motion: reduce) {
	.deck-plan__marker.is-active::before, .deck-plan__marker.is-active::after, .deck-plan__loupe-marker.is-shown::before, .deck-plan__loupe-marker.is-shown::after{ animation: none; }
}

/* --- 左: デッキ図 + ホットスポット --- */
.deck-plan__map{ position: relative; }
.deck-plan__map-inner{ position: relative; max-width: 30rem; margin: 0 auto; } /* v3.246: 32→30rem／v3.239: 34→32／v3.235: 38→34／v3.188: 34→38 */
.deck-plan__map-img{ display: block; width: 100%; height: auto; } /* v3.344: 高さ基準(v3.336)→幅基準に復帰。デッキ図は全て共通キャンバス（941×2135相当・図を中央配置し左右は透明余白）で書き出す運用に確定したため、幅を揃えれば全デッキで部屋スケールが一致する。※新規デッキ図も必ず同一キャンバスサイズで書き出すこと（余白なしの実寸で書き出すと、そのデッキだけ拡大されて表示される） */
.deck-plan__map-img--placeholder{ aspect-ratio: 3 / 4; background-color: var(--c-bg-alt); }

/* v3.270: デッキ図ズーム＝ルーペ（虫眼鏡）。全デッキ＋Yacht View に適用。モーダル方式は廃止。 */
/* --- ルーペ（虫眼鏡） --- */
.deck-plan__map-inner--loupe .deck-plan__map-img, .deck-plan__yacht-plan--loupe .deck-plan__yacht-img{ cursor: crosshair; }
.deck-plan__loupe{
	position: absolute; left: 0; top: 0; z-index: 6;
	width: 22rem; height: 22rem; border-radius: 50%; /* v3.274: 20→22rem（サークル拡大） */
	border: 1px solid var(--c-rule);
	box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.4);
	background-color: var(--c-bg);
	background-repeat: no-repeat;
	pointer-events: none;                 /* ホットスポット等を妨げない */
	transform: translate(-50%, -50%);     /* カーソル中心 */
	opacity: 0; transition: opacity 0.16s ease;
	overflow: hidden; /* v3.305: 円内に重ねる印を円形にクリップ（box-shadowは外側なので不変） */
}
.deck-plan__loupe.is-on{ opacity: 1; }

/* v3.305: ルーペ円の中に映す印（deck-zoom.js がアクティブ印の座標を拡大率に合わせて更新）。見た目は通常マーカーと同一。 */
.deck-plan__loupe-marker{
	position: absolute;
	width: 1.35rem; /* v3.317: 通常マーカーと同寸 */
	height: 1.35rem;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
}
.deck-plan__loupe-marker::before{ /* v3.317: 中心ドット＝鼓動・#B52424 */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(181, 36, 36, 0.9); /* v3.318→v3.319: 中心の塗りを少し透過（0.82→0.9） */
	box-shadow: 0 0 0.7rem rgba(181, 36, 36, 0.65);
}
.deck-plan__loupe-marker::after{ /* v3.317: 波紋 */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid #B52424;
	opacity: 0;
}
.deck-plan__loupe-marker.is-shown{ opacity: 0.95; }
.deck-plan__loupe-marker.is-shown::before{ animation: deck-marker-beat 2.6s ease-in-out infinite; }
.deck-plan__loupe-marker.is-shown::after{ animation: deck-marker-radar 2.6s ease-out infinite; }

/* v3.281: SP（≤768px）はルーペ円を約2/3に（22rem→14.5rem）。倍率(ZOOM=1.5x)は据え置き。 */
@media (max-width: 768px) {
	.deck-plan__loupe{ width: 14.5rem; height: 14.5rem; }
}

.deck-plan__hotspot{
	position: absolute;
	transform: translate(-100%, -50%); /* v3.224: 中央(-50%)→右端(-100%)基準。同じXでラベル右端が揃う／引き出し線は右端から出る */
	z-index: 3;
	padding: 0.5rem 1.2rem;
	background: var(--c-ink-mute); /* v3.222: ゴールド→サイトのグレー系で統一（線と揃える） */
	color: var(--c-bg);
	border: 0;
	cursor: pointer;
	font-family: var(--f-en);
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.deck-plan__hotspot:hover{ transform: translate(-100%, -50%) scale(1.04); }
/* v3.227: アクティブ（選択中）＝ゴールド塗り。画像側の枠（--c-accent）と色を統一し「対」と分かるように */
.deck-plan__hotspot.is-active{
	background: var(--c-accent);
	color: var(--c-bg);
	box-shadow: 0 0 0 0.4rem rgba(201, 184, 137, 0.30); /* ゴールドの淡いグロー */
}
/* v3.187/227: 画像なし photo のタグ＝MAPPING のみ（カルーセル非連動・クリック不可）。
   塗り（＝クリック可）と区別するため、透明地＋ハーフラインの「ゴースト」表示に */
.deck-plan__hotspot--static{
	cursor: default;
	background: transparent;
	color: var(--c-ink-mute);
	box-shadow: inset 0 0 0 1px var(--c-ink-mute);
}
.deck-plan__hotspot--static:hover{ transform: translate(-100%, -50%); }

/* --- 右: 縦カルーセル --- */
.deck-plan__viewport{
	position: relative;
	z-index: 2;
	width: 36rem;                                  /* v3.246: 38→36rem（写真を少しサイズダウン。photo/photo-imgと連動） */
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
/* is-looping 時は about.js が height（3スロット分）を設定。縦送りはCSSトランジション */
.deck-plan__viewport.is-looping .deck-plan__track{
	transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); /* v3.255: 0.8s→1.2s・ease-in-out化（ゆったり） */
}
/* 手動操作（マウスドラッグ／ホイール）可能なことを示すカーソル */
.deck-plan__viewport.is-looping{ cursor: default; } /* v3.285: 手動スクロール廃止につき grab→default */

 /* ドラッグ中は指に追従 */

/* v3.285: 縦カルーセルUI（既存 suite-carousel を踏襲：ホバーで出る上下アングル＋アクティブが伸びるドット）。
   ホイール/ドラッグは廃止（ページ縦スクロールとの干渉回避）、ボタン/ドット操作に一本化。 */
.deck-plan__carousel{ position: relative; }

/* インジケーター：PC=画像の右に縦並び（is-active で縦バーに伸びる＝suiteの横バーを縦転用）。
   v3.286: サイズダウン＋画像から離す。上下アングルは廃止＝クリック/インジケーター操作のみ。 */
.deck-plan__cdots{
	position: absolute;
	top: 50%; right: -3.6rem;
	transform: translateY(-50%);
	z-index: 3;
	display: flex; flex-direction: column; align-items: center;
	gap: 0.7rem;
}
.deck-plan__cdot{
	display: block;
	width: 0.7rem; height: 0.7rem;
	padding: 0; border: 0; border-radius: 50%;
	background: #fff; opacity: 0.55; flex-shrink: 0; cursor: pointer;
	transition: height 0.4s ease, width 0.4s ease, border-radius 0.4s ease, opacity 0.4s ease;
}
.deck-plan__cdot.is-active{ height: 2rem; border-radius: 0.35rem; opacity: 1; }
.deck-plan__cdot:hover:not(.is-active){ opacity: 1; }
.deck-plan__cdot:focus-visible{ opacity: 1; outline: 2px solid var(--c-accent); outline-offset: 2px; }
.deck-plan__track{
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}

.deck-plan__photo{
	flex: 0 0 auto;
	width: 36rem;                                  /* v3.246: 38→36rem */
	max-width: 100%;
	cursor: pointer; /* v3.227: 画像クリックで対応ボタンをactiveに（双方向） */
}
.deck-plan__photo-fig{ margin: 0; transition: opacity 0.4s ease; }
.deck-plan__photo-img{
	display: block;
	width: 36rem;                                  /* v3.246: 38→36rem */
	max-width: 100%;
	height: 20.3rem;                               /* v3.246: 21.4→20.3rem（36remに合わせ約16:9を維持） */
	object-fit: cover;
}

.deck-plan__photo-cap{
	margin-top: 1rem;
	text-align: right;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--c-ink-mute);
}
.deck-plan__photo.is-focus .deck-plan__photo-img{
	outline: 2px solid var(--c-ink-mute); /* v3.320: 選択枠をゴールド→#b0b9bf（グレー）に。図中マーカー(赤)と役割分け */
	outline-offset: -2px;
}
/* v3.227: 選択中(has-focus)のみ、非選択の写真を減光＝active/非activeを区別（選択前は全て通常表示） */
.deck-plan__track.has-focus .deck-plan__photo:not(.is-focus) .deck-plan__photo-fig{ opacity: 0.4; }

/* ===== レスポンシブ（SP: マップ縮小＋写真は横スクロール／連動はabout.js維持） === */
@media (max-width: 768px) {
	/* v3.230: タブ列だけ全幅(100vw)に出し、右端を画面端で見切れさせてスクロール可能と示す。
	   親パディングを margin で相殺して画面左端まで広げ、padding-left で1枚目(YACHT VIEW)の
	   開始位置は現行どおりコンテンツ左(=var(--s-page-x))に維持。padding-bottom はベース継承。 */
	.deck-plan__tabs{
		justify-content: flex-start;
		gap: 1.3rem;
		width: 100vw;
		margin: 0 0 0 calc(-1 * var(--s-page-x));
		padding-left: var(--s-page-x);
		padding-right: var(--s-page-x);
		scroll-padding-left: var(--s-page-x);
		padding-bottom: 1.2rem; /* v3.254: SP 1.6→1.2rem */
		/* v3.252: 横スクロール可能を示す両端フェード。左端フェード幅=ページ余白(var(--s-page-x))に収まるので1枚目の文字は欠けない。右端は見切れタブが背景へ溶け「まだ続く→」を示す */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--s-page-x), #000 calc(100% - 2.4rem), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--s-page-x), #000 calc(100% - 2.4rem), transparent 100%);
	}
	.deck-plan__tab{ font-size: 1.3rem; } /* v3.252: SP 1.5→1.3rem */
	.deck-plan__panel{ margin-top: 2rem; } /* v3.254: 3.2→2rem */
	/* v3.286: SP — インジケーターは画像下に横並び（is-active は横バー・サイズダウン）。上下アングルは廃止 */
	.deck-plan__cdots{
		position: static; top: auto; right: auto; transform: none;
		flex-direction: row; justify-content: center;
		margin-top: 1.6rem;
	}
	.deck-plan__cdot.is-active{ height: 0.7rem; width: 2rem; }
	.deck-plan__grid{
		grid-template-columns: 1fr;
		gap: 2rem;          /* v3.253: 3.2→2rem（図↔カルーセルの間隔） */
		width: 100%;        /* v3.249: SPはfit-content（desktop継承）を解除し全幅に */
		max-width: 100%;
		margin: 0;          /* v3.249: desktopの右寄せ(margin-left:auto/margin-right:4rem)を解除＝図が左に寄る原因を除去。map-innerのmargin:0 autoが効いて中央化 */
	}
	/* v3.236: SPは縦積み。凡例(.deck-plan__legend-col)は右の画像の下へ。 */
	.deck-plan__body{ flex-direction: column; gap: 2rem; } /* v3.253: 4→2rem（パネル↔凡例） */
	/* v3.248: SP凡例 ― 客室タイプ(2カラム)｜記号(1カラム)＝横に計3カラムを1段で収める。
	   フォント・スウォッチ・余白を縮小し iPhone標準幅で横並びが維持されるよう調整（収まらない端末はflex-wrapで記号が下段へ）。 */
	.deck-plan__legend-col{
		width: 100%; margin-top: 0; order: 2;
		flex-direction: row; flex-wrap: wrap;
		gap: 2rem 1.6rem; justify-content: center; align-items: flex-start;
	}
	.deck-plan__legend-list{ display: grid; grid-template-columns: auto auto; column-gap: 0.8rem; row-gap: 0.6rem; } /* 客室タイプ=2カラム */
	.deck-plan__legend-col .deck-plan__legend-item, .deck-plan__legend-col .deck-plan__symbols li{ font-size: 0.8rem; gap: 0.6rem; }                 /* v3.248: 横3カラムで収めるため縮小。記号(.deck-plan__symbols)は1カラム維持 */
	.deck-plan__legend-col .deck-plan__swatch, .deck-plan__legend-col .deck-plan__symbol-icon{ width: 1.1rem; height: 1.1rem; }                  /* スウォッチ/記号アイコンも縮小 */
	.deck-plan__panels{ max-width: 100%; order: 1; }
	/* v3.247: SPはMAPを左右中央（旧v3.231の右寄せ14%を解除）。左に出るラベルの逃げ場が減るため、長いラベルがはみ出す場合はmax-widthを下げる。 */
	.deck-plan__map-inner{ max-width: 46%; margin: 0 auto; }
	.deck-plan__hotspot{
		font-size: 0.8rem;       /* v3.231: 0.9→0.8（重なり・はみ出し回避） */
		padding: 0.3rem 0.6rem;  /* v3.231: 0.35rem 0.7rem→縮小 */
		letter-spacing: 0.03em;
	}
	.deck-plan__hotspot:hover{ transform: translate(-100%, -50%); } /* SPはhover拡大なし */

	/* v3.229: 写真カルーセルを縦→横スクロール（ネイティブ・スナップ）。連動はabout.jsが維持 */
	/* v3.249: カルーセルを全幅(100vw)フルブリードに（タブと同じ手法。左右パディングを越えて画面端まで） */
	.deck-plan__viewport{
		width: 100vw;
		max-width: none;
		margin-left: calc(-1 * var(--s-page-x));
		margin-right: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.deck-plan__viewport::-webkit-scrollbar{ display: none; }
	.deck-plan__track{
		flex-direction: row;
		gap: 1.6rem;
	}
	.deck-plan__photo{
		flex: 0 0 60%;
		width: 60%;
		scroll-snap-align: center;
	}
	/* v3.250: 画像1枚のみ＝中央固定（スクロールなし・少し大きめに） */
	/* v3.251: 画像1枚＝中央固定。全幅(100vw)を解除しコンテンツ幅に戻す＝確実に中央。サイズも縮小（86%→70%、カルーセル中央とほぼ同寸） */
	.deck-plan__viewport.is-single{
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		overflow-x: hidden;
		scroll-snap-type: none;
	}
	.deck-plan__viewport.is-single .deck-plan__track{ justify-content: center; }
	.deck-plan__viewport.is-single .deck-plan__photo{
		flex: 0 0 70%;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.deck-plan__photo-img{ width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.deck-plan__photo-cap{ text-align: center; }
}
/* ============================================================
   ABOUT Intro: SHIP NAME ラベル + SEFU ロゴ
   （section-intro-carousel の section__inner 先頭。ABOUT専用）
   ============================================================ */
.section__shipname-label{
	text-align: center;  /* SHIP NAME センタリング */
	font-size: 1.4rem;
	letter-spacing: 0.25em;
	color: var(--c-ink-mute);
	margin: 0 0 2.4rem;  /* SHIP NAME → SEFU */
}

.section__shipname-logo{
	width: 20rem;        /* 200px。23rem→20remにサイズダウン（v3.61） */
	margin: 0 auto 5rem; /* SEFU → 見出しの余白 */
	color: var(--c-ink); /* SVGは currentColor＝白 */
	line-height: 0;
}

.section__shipname-logo-svg{
	width: 100%;
	height: auto;
	display: block;
}

/* ABOUT のみ Intro 本文をセンタリング（他ページは左寄せのまま） */
.section--intro-carousel .section__body{
	text-align: center;
}

/* 見出し → 本文 の余白をカンプ寄せに（ABOUT Intro限定） */
.section--intro-carousel .section__heading{
	margin-bottom: 5rem;
}

/* ============================================================
   ABOUT 画像ギャラリー（feature-section__gallery を流用）
   6枚＝3カラム×2行。4枚目以降（2行目）の上マージンを row-gap で確保。
   ============================================================ */
.feature-section__gallery{
	margin: 10rem auto 0; /* 本文→ギャラリーの上余白 80→100px（ABOUT限定） */
	row-gap: 4rem;        /* 上3つ↔下3つ。5rem から10px縮小 */
}

/* Intro（ギャラリー含む） → DESIGNER のセクション間余白をカンプ寄せに */
.section--intro-carousel + .section-profile{ margin-top: 6.4rem; }

@media (max-width: 768px) {
	/* v3.167: SP は intro-carousel → section-profile の余白を 0 に（PC は 6.4rem 維持） */
	.section--intro-carousel + .section-profile{ margin-top: 0; }
	.section__shipname-logo{ width: 18rem; margin-bottom: 3.6rem; }
	.feature-section__gallery{ margin-top: 5.6rem; row-gap: 3.2rem; } /* SPは上余白56px・既定gap */
}

/* ============================================================
   SHIP DATA / DECK PLAN の見出しを DESIGNER（section-profile）と同フォントに
   英: 24→36px(SP32px) / 日: 1.4rem。weight・字間も label-en/ja に合わせる。
   ============================================================ */
.ship-data .section-heading--a .section-heading__en, .deck-plan .section-heading--a .section-heading__en{
	font-size: 3.6rem;       /* 36px = DESIGNER label-en */
	font-weight: 300;
	letter-spacing: 0.1em;
	margin-bottom: 0.8rem;
}
.ship-data .section-heading--a .section-heading__ja, .deck-plan .section-heading--a .section-heading__ja{
	font-size: 1.4rem;       /* デザイナー/総料理長と同じ */
	letter-spacing: 0.1em;
}

@media (max-width: 768px) {
	.ship-data .section-heading--a .section-heading__en, .deck-plan .section-heading--a .section-heading__en{
		font-size: 3.2rem;   /* 32px = DESIGNER label-en の SP値 */
	}
}

/* SHIP DATA の見出しは左寄せ（section-heading のデフォルト中央を上書き。DECK PLANは中央のまま） */
.ship-data .section-heading{
	text-align: left;
}

/* v3.162: SP では SHIP DATA 見出しを中央寄せ（PC は左のまま）。
   base の text-align:left（同詳細度）より後ろに置いて SP で後勝ちにする。 */
@media (max-width: 768px) {
	.ship-data .section-heading{
		text-align: center;
	}
}