@charset "UTF-8";
/* ============================================================
   SEFU — TOP Page Specific CSS
   front-page.php でのみ読み込まれる。
   骨格段階では Newsletter フォームのみ。
   アニメーション/演出は次フェーズで追加予定。
   ============================================================ */


/* ----- Newsletter --------------------------------------- */

.newsletter__form {
	max-width: 600px;
	margin: 3rem auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6rem; /* v3.119: Input ↔ Register をしっかり離す（旧3rem） */
}

/* フローティングラベル方式: プレースホルダー「Mail Address メールアドレス」を枠内に重ねる */
.newsletter__field {
	position: relative;
	width: 100%;
}

.newsletter__input[type="email"] {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--c-rule);
	border-radius: 0; /* iOS reset */
	padding: 2.6rem 1rem 0.6rem;
	font: 300 2rem/1 var(--f-en); /* SP 20px */
	letter-spacing: 0.05em;
	color: var(--c-ink);
	outline: none;
	caret-color: transparent; /* v3.122: 既定は非表示（blur後の残像防止）。フォーカス時のみ下の :focus で表示 */
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease;
}

.newsletter__input[type="email"]:focus {
	border-bottom-color: var(--c-accent);
	caret-color: var(--c-ink); /* v3.122: フォーカス中はキャレット表示（blurで base の transparent に戻る） */
}

/* ネイティブplaceholderは不可視（ラベルで代用） */
.newsletter__input::placeholder { color: transparent; }

/* 擬似プレースホルダー（重ねるラベル） */
.newsletter__ph {
	position: absolute;
	top: 3.1rem;
	left: 0.7rem;
	pointer-events: none;
	color: var(--c-ink-mute);
	font: 300 2rem/1 var(--f-en); /* SP 20px（入力と同サイズ） */
	letter-spacing: 0.05em;
	transition: opacity .25s ease, transform .25s ease;
}

.newsletter__ph .ph-ja {
	margin-left: 0.4rem;
	font: 300 1.3rem/1 var(--f-jp); /* SP 13px */
	letter-spacing: 0.1em;
}

/* 入力中/入力済みでラベルを消す（CSSのみ） */
.newsletter__input:focus + .newsletter__ph,
.newsletter__input:not(:placeholder-shown) + .newsletter__ph {
	opacity: 0;
	transform: translateX(-6px);
}

/* バリデーションエラー（透明→入力不正で表示） */
.newsletter__error {
	position: absolute;
	left: 0;
	bottom: -2.3rem; /* ティザー準拠 ≈-23px */
	width: 100%;
	text-align: center; /* v3.119: 左右中央 */
	margin: 0;
	font-family: var(--f-jp);
	font-size: 1.1rem; /* ティザー準拠 */
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #B52424;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.newsletter__error.is-active { opacity: 1; }

/* エラー時はフォーカス中でも赤（:focus のゴールド下線 var(--c-accent) に詳細度で勝たせる） */
.newsletter__input.is-error,
.newsletter__input.is-error:focus {
	color: #B52424;
	-webkit-text-fill-color: #B52424;
	border-bottom-color: #B52424;
}

/* autofill時の背景色を打ち消す（テキスト色を維持） */
.newsletter__input:-webkit-autofill,
.newsletter__input:-webkit-autofill:hover,
.newsletter__input:-webkit-autofill:focus {
	transition: background-color 9999s ease-in-out 0s;
	-webkit-text-fill-color: var(--c-ink) !important;
	caret-color: var(--c-ink); /* v3.122: autofill+focus 時はキャレット表示 */
}

/* ハニーポット（画面外に隠す） */
.newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.newsletter__input[type="email"] {
		font-size: 3.2rem; /* PC 32px */
	}
	.newsletter__ph {
		font-size: 3.2rem; /* PC 32px */
		top: 3rem;
		left: 0.6rem;
	}
	.newsletter__ph .ph-ja {
		font-size: 1.6rem; /* PC 16px */
	}
	.newsletter__error {
		font-size: 1.4rem;
		font-weight: 500; /* ティザー準拠 */
		bottom: -3.2rem; /* ≈-32px */
	}
}


/* ----- TOP News list ------------------------------------ */

.news__list {
	max-width: var(--s-text-max);
	margin: 0 auto;
}

.news__item {
	display: flex;
	gap: 1rem; /* v3.98 */
	padding: 2.2rem; /* v3.98 */
	border-bottom: 1px solid var(--c-rule);
	font-size: 1.4rem; /* v3.98: 14px */
}

.news__date {
	font-family: var(--f-en);
	font-weight: 300; /* v3.99: 継承400(Regular)→300(Arizona Light)。日付が太く見えるのを軽く */
	color: var(--c-ink-mute);
	white-space: nowrap;
	flex: 0 0 6em; /* v3.98: 日付固定幅カラム 7em→6em（タイトル左端を統一） */
}


/* ----- Carousel: ドット（intro/split と同仕様に統一） --------
   ※ .carousel の基底スタイルは style.css 側（共通コンポーネント）。
      汎用 .carousel は現状 front-page.php（top-split）でのみ使用のため、
      見た目はここ（TOP専用CSS）で他カルーセルと同じ「白ドット→角丸バー」に揃える。
   carousel.js（front-page限定 enqueue）が .is-active を付け外しする。
   -------------------------------------------------------- */

.carousel__pagination-dot {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	width: 1rem;   /* 10px */
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	opacity: 0.6;
	flex-shrink: 0;
	transition: width 0.4s ease, border-radius 0.4s ease, opacity 0.4s ease;
}

.carousel__pagination-dot.is-active {
	width: 2.8rem; /* アクティブは角丸長方形（28px） */
	border-radius: 0.5rem;
	background: #fff;
	opacity: 1;
}

.carousel__pagination-dot:hover:not(.is-active) {
	opacity: 1;
}

/* JS無効時のフォールバック */
.no-js .carousel__pagination-dot {
	cursor: default;
}


/* ----- READ MORE ボタン ホバー演出 ----------------------
   ヘッダーナビと同じ「左→右」のモーション言語を踏襲。
   枠線は白のまま、内側を白で満たし、テキストを地色(濃紺)へ反転。
   -------------------------------------------------------- */

.btn--more {
	position: relative;
	overflow: hidden;
	z-index: 0;
	border-color: var(--c-ink);
	transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--more::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-ink);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.btn--more:hover,
.btn--more:focus-visible {
	color: var(--c-bg);
	border-color: var(--c-ink);
}

.btn--more:hover::before,
.btn--more:focus-visible::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.btn--more,
	.btn--more::before {
		transition: none;
	}
}


/* ----- 次フェーズ予定（カンプ／方針確認後に着手） --------- */

/*
	未実装（要カンプ or 方針確認）:
	- ヒーロー動画のフェードイン（loadingアニメと連動）
	- セクション境界でのパララックス
	- スクロール連動リビールアニメ → 実装済（global.js: hero以外の<section>を IntersectionObserver でフェードイン・全ページ共通）。スクラブ/ピン等の高度な連動は後フェーズGSAP予定
	- 各セクション固有レイアウト（余白・背景トーンの抑揚）
	- カルーセル自動進行のON可否（carousel.js は data-autoplay 対応済・既定OFF）
*/

/* ============================================================
   TOP 原型A: top-feature（フルブリード/半画像 + 右テキスト）
   front-page.php: YACHT STYLE / DINING / SUITE / WELLNESS / ABOUT SEFU
   ※ 数値はカンプ準拠の初回値。WPで実物と突き合わせて調整する。
   ============================================================ */

.top-feature {
	position: relative;
	color: var(--c-ink);
}

/* 画像（共通）: 未配置でもフォールバック地色で箱を可視化 */
.top-feature__media {
	position: relative;
	overflow: hidden;
	background-color: var(--c-bg-alt);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ----- 背景フェードカルーセル（画像2枚以上） ----------- */
.top-feature__bg-carousel {
	position: absolute;
	inset: 0;
}

.top-feature__slide {
	position: absolute;
	inset: 0;
	background-color: var(--c-bg-alt);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.top-feature__slide.is-active {
	opacity: 1;
}

/* スライド画像（<img> + cover）。背景画像ではなく実imgでsrcset配信＝PageSpeed最適化 */
.top-feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* インジケーター（サイト共通の見た目: 白ドット → アクティブは角丸バー） */
.top-feature__dots {
	position: absolute;
	bottom: 3.2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.top-feature__dot {
	display: block;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	opacity: 0.6;
	border: none;
	padding: 0;
	flex-shrink: 0;
	cursor: pointer;
	transition: width 0.4s ease, border-radius 0.4s ease, opacity 0.4s ease;
}

.top-feature__dot.is-active {
	width: 2.8rem; /* アクティブは角丸長方形（28px） */
	border-radius: 0.5rem;
	opacity: 1;
}

.top-feature__dot:hover:not(.is-active) {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.top-feature__slide {
		transition: none;
	}
}

/* テキストブロック共通 */
.top-feature__text {
	width: 40rem;     /* 400px 固定 */
	max-width: 100%;  /* 親（右50vw）が狭い場合の保険 */
}

/* TOP見出し h2（feature / split 共通・統一） */
.top-feature__heading,
.top-split__heading {
	font-family: var(--f-jp);
	font-weight: 300; /* Light */
	font-size: 2.8rem; /* v3.69: 3.2→2.8rem */
	color: #ffffff;
	letter-spacing: 0.1em;
	line-height: 2em; /* v3.69: 1→2em（上品な行間） */
	margin-bottom: 2.6rem; /* v3.69: 35px→2.6rem（h2→body） */
}

/* v3.111: TOP split 見出し全ての全角約物（、。）を詰め組み（4 split 見出し共通）。web版Noto Serif JPは
   palt非対応のため、top-split.php で約物を <span class="jp-punct"> でラップし負マージンでアキを詰める。 */
.top-split__heading .jp-punct {
	margin-left: -0.05em;  /* 前アキ（節→、）微調整 */
	margin-right: -0.2em;  /* 後アキ（、→土）を詰める。0=詰めなし／マイナス強→詰まる */
}

.top-feature__body {
	font-family: var(--f-jp);
	font-weight: 300; /* v3.101: 400→300（本文統一）。ABOUTは元々300、他に出番無しだが基底も揃える */
	font-size: 1.4rem; /* 14px */
	color: #ffffff;
	letter-spacing: 0.05em; /* v3.137: .section__body と同値に復元（top-split 本文＝.section__body 継承と一致） */
	line-height: 2.2;       /* v3.137: 同上。v3.136 で誤って 1.8 化したのを復元 */
}

/* 段落（空行区切りで wpautop が <p> 化）間のアキ。単純改行(<br>)は line-height で制御。 */
.top-feature__body p {
	margin: 0 0 5px;
}
.top-feature__body p:last-child {
	margin-bottom: 0;
}

.top-feature__more {
	margin: 40px 0 0; /* body→button（btn--more の auto中央寄せを左寄せに上書き） */
}

/* ----- full: 背景フルブリード + 右オーバーレイ ----------- */
.top-feature--full .top-feature__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* 右テキストの可読性スクリム（控えめ） */
.top-feature--full .top-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, rgba(10, 21, 37, 0.5), rgba(10, 21, 37, 0) 55%);
}

.top-feature--full .top-feature__content {
	position: relative;
	z-index: 1;
	min-height: 100vh;       /* PC: 1画面 */
	width: 50vw;             /* 右半分 */
	margin-left: auto;       /* 画面右側に寄せる */
	display: flex;
	align-items: center;     /* 上下中央 */
	justify-content: center; /* 右50vwの中で左右中央 */
	pointer-events: none;    /* オーバーレイの空白部はクリック透過（下のドットへ） */
}

/* テキストブロック（見出し・READ MORE等）はクリック可能に戻す */
.top-feature--full .top-feature__text {
	pointer-events: auto;
}

/* ----- half: 画像左半分 + 右テキスト（濃紺パネル） ------- */
.top-feature--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh; /* PC: 1画面 */
	background: var(--c-bg);
}

.top-feature--half .top-feature__media {
	min-height: 100vh;
}

.top-feature--half .top-feature__content {
	display: flex;
	align-items: center;     /* 上下中央 */
	justify-content: center; /* 右カラム（=右50vw）の中で左右中央 */
}

/* ----- v3.66: 非outside（full/half）= 下層 hero--fullscreen 準拠の全画面タイトルカード -----
   画像フルブリード＋見出し(英)を上下左右中央、本文なし。full/half ともこの見た目に統一。
   見出しは hero__title-en と同一スタイル（--f-en / clamp / letter-spacing 0.1em / 白）。 */
.top-feature:not(.top-feature--outside) {
	display: block;       /* half の grid を解除 */
	min-height: 100vh;
	background: var(--c-bg);
}
.top-feature:not(.top-feature--outside) .top-feature__media {
	position: absolute;   /* フルブリード（full/half とも） */
	inset: 0;
	z-index: 0;
	min-height: 0;
}
/* 中央タイトルの可読性オーバーレイ（下層 hero と同値：#031024 20% 全面） */
.top-feature:not(.top-feature--outside) .top-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(3, 16, 36, 0.2);
}
.top-feature:not(.top-feature--outside) .top-feature__content {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	width: auto;             /* full の右50vw を解除 */
	margin: 0;
	padding: 0 var(--s-page-x);
	display: flex;
	align-items: center;     /* 上下中央 */
	justify-content: center; /* 左右中央 */
	pointer-events: none;
}
.top-feature:not(.top-feature--outside) .top-feature__text {
	width: auto;
	max-width: 100%;
	text-align: center;
	pointer-events: auto;
}
/* 見出し = hero__title-en と同一（サイズ・フォント） */
.top-feature:not(.top-feature--outside) .top-feature__heading {
	font-family: var(--f-en);
	font-weight: 300;
	font-size: clamp(3.2rem, 2.5vw, 4.8rem); /* 1920基準48px / 最小32px */
	letter-spacing: 0.1em;
	color: #ffffff;
	line-height: 1;
	margin: 0;
}

/* ----- outside（text-only）: 画像なし＝テキストのみを中央配置（ABOUT の split相当ブロック） -----
   v3.71: ABOUT は「タイトルカード(100vh/full/top-pin) ＋ その下に本ブロック」の2ピース構成。
   下層 feature-section__content（max-width:52rem / 中央）に準拠。文字色は濃紺地のため白を継承。 */
.top-feature--text-only {
	padding: 6.4rem 0 var(--s-section-y); /* v3.95: 上=画像→見出し64px（feature-section__visual margin-bottomと統一）/ 下=セクション余白 */
}

.top-feature--outside .top-feature__content {
	max-width: 54rem;       /* v3.96: 52→54rem（540px）。下層 feature-section__content と統一 */
	margin: 0 auto;         /* 中央 */
	padding: 0;             /* v3.95: 内側paddingを除き52rem全幅に（YACHT feature-section__contentと統一） */
	text-align: center;
}

.top-feature--outside .top-feature__text {
	width: auto;            /* 40rem 固定を解除し 52rem 内で中央に */
	max-width: 100%;
}

.top-feature--outside .top-feature__more {
	margin: 5rem auto 0;    /* v3.137: body→ボタン上を top-split__more(PC 5rem) に統一。中央寄せ(auto)は text-only レイアウトのため維持 */
}

/* v3.136: ABOUT SEFU（text-only）の見出し・本文を TOP の他Feature（top-split）に統一。
   旧 v3.95 の feature-section 寄せ特例（見出し f-jp-display/500/32px・段落 0/0.5em）を撤去し、
   base の .top-split__heading（f-jp/300/2.8rem）と base 段落（0 0 5px）に委ねる。 */

/* ----- v3.126: SP — full/half タイトルカードを「画像→見出し」の縦積みに ----------
   PCは画像フルブリード＋見出し中央オーバーレイ。SPは hero のような全面オーバーレイをやめ、
   MARINA(feature-section)準拠で 画像(通常ブロック・上) → その下に見出し(濃紺地・中央)。
   後続の top-split（text→carousel）へ自然に流れる。 */
@media (max-width: 768px) {
	/* 対象＝SUITE / DINING(full)=top-pin内、DINING(half)=--half、YACHT STYLE=top-intro。
	   v3.128: SP は全タイトルカードでピンを廃し「画像→見出し」の通常積みに統一（YACHT STYLEも含める）。 */
	.top-pin__stage .top-feature:not(.top-feature--outside),
	.top-intro__stage .top-feature:not(.top-feature--outside),
	.top-feature--half:not(.top-feature--outside) {
		min-height: 0;
	}
	/* 画像：absオーバーレイを解除し通常ブロック化（上に配置）。height は調整可 */
	.top-pin__stage .top-feature:not(.top-feature--outside) .top-feature__media,
	.top-intro__stage .top-feature:not(.top-feature--outside) .top-feature__media,
	.top-feature--half:not(.top-feature--outside) .top-feature__media {
		position: relative;
		inset: auto;
		height: auto;          /* 既存759ブロックの height/min-height:36rem を打ち消す */
		min-height: 0;
		aspect-ratio: 4 / 3;   /* v3.130: スライド(画像)を横長4:3に */
	}
	/* 見出しが画像外になるので可読性スクリムは不要 */
	.top-pin__stage .top-feature:not(.top-feature--outside) .top-feature__media::after,
	.top-intro__stage .top-feature:not(.top-feature--outside) .top-feature__media::after,
	.top-feature--half:not(.top-feature--outside) .top-feature__media::after {
		display: none;
	}
	/* 見出しブロック：オーバーレイ(100vh/flex中央/右50vw)を解除し画像の下へ。画像→見出し 48px */
	.top-pin__stage .top-feature:not(.top-feature--outside) .top-feature__content,
	.top-intro__stage .top-feature:not(.top-feature--outside) .top-feature__content,
	.top-feature--half:not(.top-feature--outside) .top-feature__content {
		position: relative;
		min-height: 0;
		width: auto;
		margin: 0;
		display: block;
		padding: 4.8rem var(--s-page-x) 0;
	}
}


/* ============================================================
   TOP 原型B: top-split（左テキスト + 右カルーセル右端はみ出し）
   front-page.php: DESTINATION / SEFU SELECTION / CABIN TYPE / RELAXATION
   カルーセルは共通 .carousel（carousel.js駆動）を内包し、ここで配置を上書き。
   ============================================================ */

/* PC: 左50vw=テキスト / 右50vw=カルーセル。上下240px固定、左右paddingなし */
.top-split.section {
	padding: 24rem 0; /* 上下240px */
	overflow: hidden; /* カルーセルのはみ出しを右半分内でクリップ */
}

.top-split__inner {
	display: grid;
	grid-template-columns: 50% 50%; /* 左テキスト / 右カルーセル */
	align-items: center;            /* 上下中央 */
}

/* 左50vwの中で、幅480pxのテキストブロックを上下左右中央 */
.top-split__text {
	width: 48rem;          /* 480px 固定 */
	max-width: 100%;
	justify-self: center;  /* 左50vwの中で左右中央 */
}

/* .top-split__heading は .top-feature__heading と統一（上記の共通ルールで定義） */

/* section__body の中央寄せ・justify を左寄せに上書き＋フォントを feature body と統一 */
.top-split__body.section__body {
	max-width: none;
	margin: 0;
	text-align: left;
	text-justify: auto;
	font-weight: 300; /* v3.101: 400→300 本文を全サイト300/300に統一 */
	font-size: 1.4rem; /* 14px：feature body と統一 */
	color: #ffffff;
}
/* 段落間アキを feature と同じ 5px に統一（.section__body p+p の 0.5em を打ち消す） */
.top-split__body.section__body p {
	margin: 0 0 5px;
}
.top-split__body.section__body p:last-child {
	margin-bottom: 0;
}

/* v3.65: 対の top-feature から移設した READ MORE。本文と同じ左寄せ（btn--more の auto中央寄せを上書き） */
.top-split__more {
	margin: 5rem 0 0; /* v3.69: 40px→50px・本文と同じ左寄せ */
}

/* ----- 内包カルーセルの配置上書き（基底 .carousel を流用） --- */
.top-split .carousel {
	max-width: none;
	margin: 0;
}

/* 高さは viewport に持たせ、ドット(pagination)は自然に下へ流す */
.top-split .carousel__viewport {
	height: 50rem; /* 500px（画像高さ） */
}

.top-split .carousel__track {
	height: 100%;
}

/* スライド画像は 400×500px 固定。
   右50vwの viewport は overflow:hidden なので、ブラウザ幅を広げると
   50vwが広がり、隠れていた固定幅スライドが順に見えてくる（右端は次の画像の peek）。 */
/* スライドは 400×500px 固定の箱。中の <img> を object-fit:cover で敷く。
   右50vwの viewport は overflow:hidden なので、ブラウザ幅を広げると
   隠れていた固定幅スライドが順に見えてくる（右端は次画像の peek）。 */
.top-split .carousel__slide {
	flex: 0 0 40rem;        /* 400px 固定幅 */
	height: 100%;           /* = viewport 500px */
	background-color: var(--c-bg-alt); /* 画像読み込み前のフォールバック地色 */
	overflow: hidden;
	aspect-ratio: auto;     /* 基底 .carousel__image 由来の比率指定を無効化 */
	scroll-snap-align: start; /* 左基点（JSのスクロール制御と整合） */
}

.top-split .carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ドットはカルーセル下・中央（他カルーセルと統一） */
.top-split .carousel__pagination {
	justify-content: center;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

/* 左右アロー: 下層ページ split-carousel と同デザイン（SVGシェブロン・白・hover表示） */
.top-split .carousel__nav {
	background: transparent;
	border: none;
	padding: 0;
	width: 2rem;    /* 20px（下層と同じ） */
	height: 3.6rem; /* 36px */
	top: 25rem;     /* 画像(viewport 50rem)の上下中央。ドット分を含めない */
	z-index: 3;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.top-split .carousel__nav svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--c-ink); /* = #fff（下層と同じ） */
}

.top-split .carousel__nav--prev { left: 2.4rem; right: auto; }
.top-split .carousel__nav--prev svg { transform: scaleX(-1); } /* 右向きSVGを反転 */
.top-split .carousel__nav--next { right: 2.4rem; left: auto; }

.top-split .carousel:hover .carousel__nav { opacity: 0.6; }
.top-split .carousel__nav:hover { opacity: 1; }

/* ===== マーキー（連続横スクロール）: DESTINATION / SEFU SELECTION / CABIN TYPE =====
   YACHT STYLE 最下部の marquee-gallery と同じ要領。画像2回配置 → translateX -50% で無限ループ。
   keyframes marquee-scroll は style.css 側に定義済み（グローバル）。 */
.top-split__media {
	overflow: hidden;
}
.top-split__marquee {
	display: flex;
	gap: 2rem;               /* 画像間20px */
	width: max-content;
	height: 50rem;           /* 500px（PCカルーセルと同じ画像高さ） */
	animation-name: marquee-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.top-split__marquee-item {
	flex: 0 0 40rem;         /* 400px 固定（縦長 400×500） */
	height: 100%;
	overflow: hidden;
	background-color: var(--c-bg-alt);
}
.top-split__marquee-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
@media (prefers-reduced-motion: reduce) {
	.top-split__marquee { animation: none; }
}


/* ============================================================
   TOP: NEWS / Newsletter（中央寄せ・カンプ準拠の微調整）
   ※ リスト/フォームの基本スタイルは上部の既存ルールを使用
   ============================================================ */

.news__item:first-child {
	border-top: 1px solid var(--c-rule);
}

.news__title a {
	color: var(--c-ink);
	font-weight: 300; /* v3.100: 日付に合わせ Light化。ラテン=Arizona Light / 日本語=Noto Serif JP Light（共に300読込済） */
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease;
}

.news__title a:hover {
	border-bottom-color: var(--c-ink);
}


/* ============================================================
   TOP: レスポンシブ（SP: 縦積み）
   ※ 構造確認用の最低限。詳細はカンプSPと突き合わせて調整。
   ============================================================ */

@media (max-width: 768px) {

	/* 原型A（top-feature--full）SP: 画像（上）／テキスト（下・濃紺）に分離。
	   PCの背景フルブリード＋右オーバーレイを解除し、画像の上に文字を載せない。 */
	.top-feature--full {
		background: var(--c-bg); /* テキスト側の地色（濃紺） */
	}

	.top-feature--full .top-feature__media {
		position: relative; /* absolute(inset:0) を解除 → 画像をブロックとして最上部に */
		inset: auto;
		height: 36rem;      /* SP画像高さ（top-feature--half SPと統一・要調整可） */
	}

	.top-feature--full .top-feature__media::after {
		display: none; /* テキストが画像に乗らないため可読性スクリム不要 */
	}

	.top-feature--full .top-feature__content {
		position: relative;
		width: auto;
		margin-left: 0;
		min-height: 0;
		padding: 6.4rem var(--s-page-x); /* 画像下の濃紺地に上下余白 */
		justify-content: center;
	}

	.top-feature--half {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.top-feature--half .top-feature__media {
		min-height: 36rem; /* SP画像高さ */
	}

	.top-feature--half .top-feature__content {
		padding: 6.4rem var(--s-page-x);
	}

	/* outside（ABOUT text-only）SP: テキスト帯の左右パディング */
	.top-feature--outside .top-feature__content {
		padding: 0 var(--s-page-x);
	}

	.top-feature__text {
		width: auto;
		max-width: none;
	}

	/* TOP見出し h2（SP）: v3.69 PC(2.8rem/2em/2.6rem)に合わせて縮小。行間は折返し考慮で少し詰める */
	.top-feature__heading,
	.top-split__heading {
		font-size: min(5.2vw, 2.8rem); /* v3.130: vw管理（768px境界で40px化を防ぐため上限2.8rem=PC見出し）。※英字タイトル(SUITES等)は別ルールが優先のため top-split 日本語見出しに作用 */
		line-height: 1.8em; /* v3.69: 1.15→1.8em（PCの2emをSPは気持ち詰める） */
		margin-bottom: 2rem; /* v3.69: 20px→2rem */
	}

	/* v3.136: ABOUT(SP)見出しの feature-section 寄せ特例を撤去。base の SP 見出し（clamp）に統一。 */
	.top-feature--text-only {
		padding-top: 2.7rem; /* v3.139: top-split.section の上padding(2.7rem)と統一。タイトルカード→テキストの上アキを揃える */
	}

	/* v3.137: ABOUT(SP)の READ MORE 上マージンも top-split__more(SP 3.6rem) に統一 */
	.top-feature--outside .top-feature__more {
		margin: 3.6rem auto 0;
	}

	/* SP: 移設ボタン上マージンも気持ち詰める＋中央寄せ（btn--more の display:block を auto で中央に） */
	.top-split__more {
		margin: 3.6rem auto 0; /* v3.128: 0→auto 中央寄せ。上 PC5rem→SP3.6rem */
	}

	/* 原型B: テキスト → カルーセル（縦積み）、カルーセルは全幅。PCの50/50・480px固定を解除 */
	.top-split.section {
		padding: 2.7rem 0 0 0; /* v3.135: 上2.5→2.7rem。下paddingは __media の margin-bottom が担うため0 */
	}

	.top-split__inner {
		grid-template-columns: 1fr;
		gap: 0; /* v3.133: text→media の間隔は __media の margin-top で管理（二重カウント防止） */
	}

	/* v3.133: メディア（カルーセル/マーキー）の上下に余裕を持たせる。上下対称（gap=0・section下padding=0と統合） */
	.top-split__media {
		margin: var(--s-section-y) 0; /* 上下 6.4rem(64px) */
	}

	.top-split__text {
		width: auto;
		max-width: none;
		justify-self: stretch;
		padding: 0 var(--s-page-x);
		text-align: center; /* v3.128: SP は見出し・本文・ボタンを中央寄せ */
	}

	/* SP: 本文も中央（PCの text-align:left を上書き） */
	.top-split__body.section__body {
		text-align: center;
	}

	.top-split .carousel__viewport {
		height: 32rem;
	}

	.top-split .carousel__nav {
		top: 16rem; /* SP viewport(32rem)の中央 */
	}

	.top-split .carousel__slide {
		flex-basis: 80%;
	}

	.top-split .carousel__pagination {
		justify-content: center;
		padding: 0 var(--s-page-x);
	}

	/* マーキー（SP）: 画像を小さくして同時に見える枚数を増やす（4:5比率維持） */
	.top-split__marquee {
		height: 24rem;        /* v3.132: 320→240px */
	}
	.top-split__marquee-item {
		flex-basis: 19.2rem;  /* v3.132: 256→192px（240×400/500=192で4:5維持）。2枚目がしっかり・3枚目が覗く */
	}

	/* v3.134: お知らせ（SP）。日付を上・タイトルを下に縦積み、タイトルは幅いっぱい。 */
	.news__item {
		flex-direction: column;
		gap: 0.4rem;        /* 日付→タイトルの間隔 */
		padding: 1.8rem 0;  /* 左右0（横インセットはセクション側）／上下1.8rem */
	}
	.news__date {
		flex: none;         /* 縦積みでは 6em 固定カラムを解除（高さ化を防ぐ） */
		font-size: 1.2rem;  /* 14→12px（約2pt小さく） */
	}
}

/* ============================================================
   TOP セクション進捗インジケーター（右端・スライドマーカー式）
   薄い縦線1本の上を、現在セクションぶんの濃いマーカーがスライド。
   Heroでは非表示→YACHT STYLE以降でフェードイン。色は --c-ink-mute。
   ============================================================ */
.scroll-nav {
	position: fixed;
	right: 2.4rem;
	top: 50%;
	transform: translateY(-50%);
	height: 24rem;           /* 縦線の長さ240px */
	width: 1rem;
	z-index: 40;
	opacity: 0;              /* 初期は非表示（Hero中） */
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.scroll-nav.is-visible {
	opacity: 1;              /* YACHT STYLE以降でフェードイン */
}

/* 全体の薄い縦線 */
.scroll-nav__track {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	border-left: 1px solid var(--c-ink-mute);
	opacity: 0.3;
	transform: translateX(-50%);
}

/* 現在セクションぶんの濃いマーカー（JSが height と translateY を制御） */
.scroll-nav__marker {
	position: absolute;
	left: 50%;
	top: 0;
	width: 0;
	border-left: 1px solid var(--c-ink-mute);
	transform: translateX(-50%) translateY(0);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* セクション切替でスライド */
}

@media (prefers-reduced-motion: reduce) {
	.scroll-nav__marker { transition: none; }
}

/* SP（タブレット以下）は非表示 */
@media (max-width: 768px) {
	.scroll-nav { display: none; }
}