/* =============================================================
   EXone First LP — main stylesheet (mobile-first)
   ============================================================= */

/* ---- Design tokens ---- */
:root {
	--color-dark: #1d1d1f;
	--color-white: #ffffff;
	--color-light: #f5f5f7;
	--color-card-dark: #4c4c4d;
	--color-silver: #c0c0c0;
	--color-gray: #6e6e73;
	--color-gray-2: #575757;
	--color-accent: #d2832f;
	--color-ring: #d69148;

	/* モバイル縦持ちの縦横比（幅:高さ）を保つための目安値。
	   PC など横長 viewport では .lp 幅が 100vh × --lp-aspect で頭打ちになり、
	   高さに見合った縦長の表示領域（≒ モバイルを少し拡大した形）に収まる。 */
	--lp-aspect: 0.5;
	/* ビューポート高さの下限。これ未満ではレイアウトを縮小させず、
	   720px 相当で固定して縦スクロールバーを出す（高さ依存値を max() で下げ止まり）。 */
	--min-vh: 720px;
	/* 1vh 相当の「凍結」値。既定は native の 1vh（JS 無効時は現状と同じ）。
	   header.php のインライン script が読み込み時のビューポート高さを px で固定して上書きする。
	   LINE 等のアプリ内ブラウザはスクロール中にツールバー伸縮で vh/dvh が変動し、それに連動して
	   hero/aiparse 等の高さが「伸び縮み」してページ全体が脈打つ。全ての viewport 連動の高さを
	   この固定値で計算することで、スクロール中に高さが変わらず伸び縮みを止める（見た目・演出は不変）。 */
	--vh: 1vh;
	/* ヘッダーの高さ。Figma 比率(101/800)で列幅に比例（--col-w 基準）。
	   ハンバーガーメニュー／モーダルの上端・高さ・本文のヘッダー回避余白もこの値基準。 */
	--header-h: calc(var(--col-w) * 0.12625);
	/* フッターの実高。列幅に比例（--col-w 基準）。コピーを上下中央に置くため、
	   この高さに応じた上下余白がフッターに確保される（若干広めに 0.13）。
	   最終画面で「ヘッダー＋店舗セクション＋フッター＝ちょうど 1 画面」に収めるための基準。
	   .stores の min-height がこの値を差し引いて残り高さを埋めるので、
	   この値を増減しても header＋stores＋footer＝100dvh の 1 画面仕様は維持される。 */
	--footer-h: calc(var(--col-w) * 0.15);
	/* .lp の最大幅。base は 800px のみ（モバイルでは左右余白を作らない）。
	   430px 超では下の @media で 100vh × --lp-aspect キャップを加える。 */
	--lp-max: 800px;
	--gutter: 5%;

	/* 列（.lp / .site-main）の実描画幅。モバイル=100vw、PC=--lp-max。
	   :root・.lp 外（footer 未コンテナ化部・floating-cta）など cqw が使えない箇所の
	   比例計算に使う（calc(var(--col-w) * design_px / 800) = design_px/8 cqw 相当）。 */
	--col-w: min(100vw, var(--lp-max));

	/* 画面下端固定の CTA 群（無料相談 / モーダル CLOSE）の viewport 下端からの距離。
	   両者で共有して位置を完全一致させる。 */
	--cta-bottom: clamp(24px, 17px + 1vh, 38px);

	/* 無料相談 CTA（.floating-cta）と モーダル CLOSE（.freemenu-modal__close）の
	   寸法。両ボタンでこの変数群を共有し、全デバイスで完全に重なるサイズにする。
	   .lp 外でも効くよう cqw ではなく --col-w 基準（calc(--col-w * design_px/800)）。 */
	--cta-pad-y: calc(var(--col-w) * 0.04); /* 16/800 */
	--cta-pad-x: calc(var(--col-w) * 0.05); /* 40/800 */
	--cta-font: calc(var(--col-w) * 0.035); /* 28/800 */
	--cta-min-w: calc(var(--col-w) * 0.35); /* 280/800 */

	/* フォント方針:
	   - 英数字: SF Pro（Apple system）。Apple 系は -apple-system/BlinkMacSystemFont で
	     SF Pro が自動採用される。他 OS では Segoe UI などのシステム sans にフォールバック。
	   - 日本語: Noto Sans JP（Google Fonts で読み込み済）。SF Pro 系には日本語グリフが
	     ないため、自動的に Noto Sans JP が拾われる。
	   - WORKS の英字（カテゴリ大見出し）: Manuka Condensed。
	     ライセンス上同梱できないため、未読込環境では Oswald にフォールバック。 */
	--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	--font-serif: var(--font-sans);
	--font-cond: "Manuka Condensed", "Oswald", "Arial Narrow", sans-serif;
}

@media (min-width: 431px) {
	:root {
		--lp-max: min(800px, max(100vh, var(--min-vh)) * var(--lp-aspect));
	}
}

/* ---- Reset / base ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	overscroll-behavior-x: none;
}

body {
	margin: 0;
	background: var(--color-dark);
	color: var(--color-dark);
	font-family: var(--font-sans);
	font-weight: 400;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: var(--min-vh);
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: none;
}

p {
	margin: 0;
}

#wpadminbar {
	display: none;
}

/* ---- Layout container ---- */
.lp {
	max-width: var(--lp-max);
	margin: 0 auto;
	background: var(--color-white);
	overflow-x: clip;
	position: relative;
}

.site-main,
.site-header,
.nav-menu,
.freemenu-modal {
	container-type: inline-size;
	container-name: lp;
}

/* グラデーション罫線（左右が透明にフェード）— 明背景用（シルバー） */
.divider {
	height: 1px;
	border: 0;
	margin: 0 auto;
	background: var(--color-accent);
}

/* 暗背景用（白） */
.divider--light {
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		var(--color-white) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

/* セクション共通の見出しブロック（英字 + 罫線 + 和文 + サブ） */
.section-head {
	text-align: center;
}

.section-head__sub {
	font-family: var(--font-sans);
	/* Figma: Noto Sans JP DemiLight (350) / 30px / tracking 1px / color #1d1d1f / leading 1.6 */
	font-weight: 350;
	font-size: 3.75cqw; /* 30/800 */
	letter-spacing: 0.033em;
	line-height: 1.6;
	color: var(--color-dark);
	margin: 6cqw 0; /* 48/800 */
	text-align: center;
}

/* =============================================================
   1. Header
   ============================================================= */
.site-header {
	/* 画面上部に固定（追従）。LP は最大幅 800px 中央寄せなのでヘッダーも同様に中央寄せ。 */
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 100%;
	max-width: var(--lp-max);
	display: flex;
	align-items: center;
	gap: calc(var(--col-w) * 0.019); /* ロゴ↔店名 15/800 */
	height: var(--header-h);
	/* chrome は .lp 外でない子だが、自身がコンテナで祖先コンテナが無いため
	   cqw が viewport に解決してしまう。列基準の --col-w で比例させる。 */
	padding: 0 calc(var(--col-w) * 0.05375) 0 calc(var(--col-w) * 0.04125); /* ロゴ左33・ハンバーガー右43 @800 */
	background: #000000;
}

.site-header__logo {
	display: block;
	flex: 0 0 auto;
}

.site-header__logo img {
	width: calc(var(--col-w) * 0.2685); /* 214.8/800 */
	height: auto;
}

.site-header__name {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: calc(var(--col-w) * 0.025); /* 20/800 */
	color: var(--color-white);
	white-space: nowrap;
	transform: translateY(0.3em);
}

.site-header__menu {
	margin-left: auto;
	width: calc(var(--col-w) * 0.08);
	height: calc(var(--col-w) * 0.04);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 auto;
	position: relative;
}

.site-header__menu span {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--color-white);
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

/* メニュー or 無料相談モーダル開時：ハンバーガー → ×（バツ）。
   上下バーをボタン中央に絶対配置で重ね、±45° 回転させて左右上下対称の × にする。
   （flex 位置のまま translateY のピクセル固定値で寄せると、実際の中央とズレて交点が
   上下にずれ X が歪む。top:50% + translateY(-50%) なら寸法に依存せず必ず中央で交差する。） */
html.nav-open .site-header__menu span:nth-child(1),
html.nav-open .site-header__menu span:nth-child(3),
html.freemenu-open .site-header__menu span:nth-child(1),
html.freemenu-open .site-header__menu span:nth-child(3) {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
}
html.nav-open .site-header__menu span:nth-child(1),
html.freemenu-open .site-header__menu span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
html.nav-open .site-header__menu span:nth-child(2),
html.freemenu-open .site-header__menu span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
	transition: opacity 0.1s ease, transform 0.1s ease;
}
html.nav-open .site-header__menu span:nth-child(3),
html.freemenu-open .site-header__menu span:nth-child(3) { transform: translateY(-50%) rotate(-45deg); }

/* ハンバーガーメニュー（ヘッダー下の暗ぼかしオーバーレイ）。
   スクロール無しで全項目＋電話/LINEアイコンが収まるよう、内部を縦 flex で分配する。
   余白・文字サイズは viewport-height ベースの clamp で高さに追従させる。 */
.nav-menu {
	position: fixed;
	top: var(--header-h);
	left: 50%;
	transform: translateX(-50%);
	z-index: 90; /* ヘッダー(100)より下＝ロゴと×は常に最前面 */
	width: 100%;
	max-width: var(--lp-max);
	height: calc(max(100svh, var(--min-vh)) - var(--header-h));
	padding: clamp(0.6rem, 0.3rem + 1.1vh, 1.6rem) clamp(1.5rem, 15.25%, calc(var(--lp-max) * 0.1525)) clamp(1rem, 0.5rem + 1.75vh, 2.6rem);
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	display: flex;
	flex-direction: column;
	overflow: hidden; /* 内部を高さに収めるためスクロールを止める */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	justify-content: center;
}

html.nav-open .nav-menu {
	opacity: 1;
	visibility: visible;
}

/* 背面スクロール抑止は JS（背景の wheel/touchmove を抑止）で行う。
   html に overflow:hidden を掛けると hero/aiparse の position:sticky ピンが外れ、
   ピン留め中の背景シーン（夜など）が上方向に jump して消えるため、CSS では止めない。
   .lp は lp-max で頭打ちのため、iPad/PC ではメニュー両脇に body の色（--color-dark）が
   露出する。リファレンスの「全面 #000」を実現するため、開閉中だけ body も #000 に揃える。 */
html.nav-open body {
	background: #000000;
}

.nav-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
}

.nav-menu__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.nav-menu__link {
	display: block;
	/* 高さに追従して詰まりすぎない。最低 0.4rem 程度の上下余白を確保。 */
	padding: clamp(0.3rem, 0.15rem + 0.7vh, 1.2rem) 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: 500;
	/* 横幅と高さの両方を見て、画面に対し相対的に大きくしすぎない。 */
	font-size: clamp(0.95rem, calc(0.475rem + min(2.3cqw, 1.4vh)), 2.25rem);
	letter-spacing: 0.08em;
	line-height: 1.3;
}

.nav-menu__actions {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	gap: clamp(40px, 7cqw, 56px);
	margin-top: clamp(40px, 5cqw, 40px);
}

.nav-menu__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 2cqw, 16px); /* 16px @800 */
	color: var(--color-white);
	text-decoration: none;
}

.nav-menu__action-icon {
	display: block;
	width: clamp(80px, 20cqw, 180px);
	height: auto;
	border-radius: 20px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}

.nav-menu__action-label {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(14px, 3.5cqw, 28px); /* 28px @800 */
	letter-spacing: 0.06em;
}

/* =============================================================
   2. First view (hero) — 昼→夕→夜のスクロール演出＋CONCEPT 表示
   ・基本（JS なし／アニメ抑制）= 各シーンを縦に積んで順に表示
   ・html.js-hero = ピン留め（sticky）してスクロール量でクロスフェード
   ============================================================= */
.hero {
	position: relative;
	background: var(--color-dark);
	color: var(--color-white);
}

.hero__pin {
	position: static;
}

.hero__scene {
	position: relative;
	min-height: max(calc(var(--vh) * 92), calc(var(--min-vh) * 0.92));
	background-position: center;
	/* 100% 100%：枠いっぱいに充填し、左右の見切れも上下の余白も出さない
	   （画像は画面比に合わせて多少伸びる）。 */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* 写真シーンの可読性スクリム（上＝見出し／下＝フッター） */
.hero__scene--day::after,
.hero__scene--night::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.34) 0%,
		rgba(0, 0, 0, 0) 26%,
		rgba(0, 0, 0, 0) 58%,
		rgba(0, 0, 0, 0.5) 100%
	);
}

.hero__copy {
	position: relative;
	z-index: 2;
	/* 固定ヘッダー分を確保してから見出しを配置（短い画面でも被らない）。
	   縦の追加余白は全高シーン用に vh 併用のまま。 */
	padding: 30cqw 11.25%;
}

.hero__title {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 7.5cqw;
	line-height: 1.46;
	letter-spacing: 0.09em;
	margin: 0;
}

.hero__hr {
	height: 0.5px;
	border: 0;
	margin: 4.8cqw 0 2.8cqw; /* 38.4/800, 22.4/800 */
	width: 47.6%; /* 381/800 */
	background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero__en {
	font-family: var(--font-sans);
	font-weight: 200;
	font-size: 5cqw; /* 40/800 */
	letter-spacing: 0.01em;
	margin: 0;
}

/* 夜シーンのフッターコピー位置。
   Figma 800×1543 で、コピーブロックは y=1167–1302 → bottom 距離 241/1543 ≈ 15.6%。 */
.hero__footer {
	position: absolute;
	left: 11.25%;
	right: 11.25%;
	bottom: 15.5%;
	z-index: 2;
}

/* Figma 準拠: ロゴは右下に重ねて配置し、コピーは行幅をフルに取る。
   flex で横並びにするとコピー領域がロゴ分だけ狭まり、「毎日の動線。光。植栽。景色。」が
   句読点で自動折り返してしまうため。 */
.hero__footer-row {
	position: relative;
	/* コピー font-size を変数化し、ロゴの bottom オフセット計算にも使う */
	--copy-fs: 3.4cqw; /* 27.2/800 */
}

.hero__footer-copy {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: var(--copy-fs);
	line-height: 1.7;
	margin: 0;
	/* ロゴは行末より右側に絶対配置され、コピーの各行は最大でも行末まで広がる前に終わるため、
	   padding-right を入れずにフル幅を許可する（1行目の自動折り返しを防ぐ）。 */
}

.hero__footer-logo {
	position: absolute;
	right: 0;
	/* line-height: 1.7 によって最終行の視覚的下端は行ボックス下端より約 0.17em
	   上にあるため、ロゴを 0.18em 持ち上げて「暮らしを変えていく。」の下端と揃える。 */
	bottom: calc(var(--copy-fs) * 0.18);
	width: 18.75cqw; /* 150/800 */
	height: auto;
}

/* 「無料相談」フローティングCTA。
   Insight セクション以降〜#contact 到達までの間、画面下部中央に表示する。
   LP は中央寄せなので left:50%（viewport center）= LP center に揃う。
   ※ このボタンは .lp の DOM 外で cqw が効かないため、--cta-w =
   min(100vw, --lp-max) を基準として Close ボタン（cqw 基準）と
   同じ拡大特性に揃える（Figma 800px キャンバス基準）。 */
.floating-cta {
	position: fixed;
	z-index: 80; /* ヘッダー(100)・ハンバーガー(90)より下、本文より上 */
	bottom: var(--cta-bottom);
	left: 50%;
	/* サイズは :root の --cta-* を CLOSE ボタンと共有 → 全デバイスで完全に重なる。 */
	padding: var(--cta-pad-y) var(--cta-pad-x);
	background: var(--color-accent);
	color: var(--color-white);
	border-radius: 999px; /* ピル（CLOSE ボタンと統一） */
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--cta-font);
	letter-spacing: 0.16em;
	line-height: 1;
	min-width: var(--cta-min-w);
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	/* 中央寄せ(-50%) ＋ フェードイン用ズレ(12px) */
	transform: translate(-50%, 12px);
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.floating-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

/* ハンバーガーメニュー展開中は邪魔にならないように隠す。 */
html.nav-open .floating-cta {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* CONCEPT シーン：夜の背景をぼかして表示 */
.hero__scene--concept {
	background: #0c1622;
	display: flex;
	align-items: center;
}

.hero__scene--concept::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--concept-bg);
	background-position: center;
	background-size: 100% 100%;
}

.hero__scene--concept::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
	-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.hero__concept-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 11.25%;
}

.hero__concept-en {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 5cqw;
	letter-spacing: 0.05em;
	margin: 0;
}

.hero__concept-hr {
	width: 100%;
	margin: 0 0 4.8cqw; /* 38.4/800 */
	background: var(--color-white);
}

.hero__concept-body p {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 4cqw; /* 32/800 */
	line-height: 1.9;
	letter-spacing: 0.03em;
	margin: 0 0 1.6em;
}

.hero__concept-body p:last-child {
	margin-bottom: 0;
}

/* スクロール誘導（演出有効時のみ表示） */
.hero__scroll {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 18%;
	transform: translateX(-50%);
	z-index: 3;
	flex-direction: column;
	align-items: center;
	gap: 1.8cqw; /* 14.4/800 */
	color: var(--color-white);
	pointer-events: none;
}

.hero__scroll-label {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 3.2cqw;
	letter-spacing: 0.18em;
	text-indent: 0.18em;
}

.hero__scroll-line {
	width: 1px;
	height: 10cqw;
	background: rgba(255, 255, 255, 0.7);
	overflow: hidden;
	position: relative;
}

.hero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: -60%;
	width: 100%;
	height: 60%;
	background: var(--color-white);
	animation: hero-scroll-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-scroll-pulse {
	0% { transform: translateY(0); }
	100% { transform: translateY(280%); }
}

/* ---- 演出有効時（JS＋アニメ許可）：ピン留めしてクロスフェード ---- */
html.js-hero .hero {
	height: max(calc(var(--vh) * 380), calc(var(--min-vh) * 3.8));
}

html.js-hero .hero__pin {
	position: sticky;
	top: 0;
	height: max(calc(var(--vh) * 100), var(--min-vh));
	overflow: hidden;
}

html.js-hero .hero__scene {
	position: absolute;
	inset: 0;
	min-height: 0;
	height: 100%;
	will-change: opacity;
}

html.js-hero .hero__scene--day {
	opacity: 1;
}

html.js-hero .hero__scene--sunset,
html.js-hero .hero__scene--night,
html.js-hero .hero__scene--concept {
	opacity: 0;
}

html.js-hero .hero__copy--main,
html.js-hero .hero__footer {
	opacity: 0;
}

html.js-hero .hero__scroll {
	display: flex;
}

/* =============================================================
   3. Insight (VISUALIZATION) — light background
   見出し＋フルワイド外観画像＋テキスト付きカードカルーセル（丸サムネナビ）
   ============================================================= */
.insight {
	--gutter: 6.375%; /* 51/800（カードのインセット） */
	background: var(--color-light);
	padding: 25cqw 0;
	overflow: hidden;
}

.insight__head {
	padding: 0 8.75%; /* 70/800 */
}

.insight__en {
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--color-gray);
	letter-spacing: 0.1em;
	font-size: 4.5cqw; /* 36/800（Figma 実測） */
	margin: 0;
}

.insight__hr {
	height: 1px;
	border: 0;
	margin: 1cqw 0; /* 5/800 */
	width: 51.25%; /* 410/800 */
	background: var(--color-silver);
}

.insight__title {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-dark);
	font-size: 7.2cqw;
	line-height: 1.38;
	letter-spacing: 0.03em;
	margin: 0;
}

.insight__sub {
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--color-gray);
	font-size: 3.5cqw; /* 28/800 */
	line-height: 1.6;
	margin: 3.2cqw 0 0; /* 25.6/800 */
}

/* フルワイド外観画像（画面端まで） */
.insight__hero {
	margin: 5.2cqw 0 6.8cqw; /* 41.6/800, 54.4/800 */
	aspect-ratio: 800 / 564;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- カードカルーセル --- */
.insight-cards__viewport {
	/* 全幅（.insight は左右パディング0）。先頭カードの左インセットは margin ではなく padding で持たせ、
	   スクロールすると消えるようにする＝最右端まで来たときカードが画面左端まで届き、左の余白が無くなる。 */
	padding-left: var(--gutter);
	scroll-padding-left: var(--gutter); /* スナップ位置も先頭カードを gutter 分インセットして揃える */
	/* ネイティブ横スクロール（スワイプ）で切替。スナップで各カード左端に吸着。
	   スクロールで切り替わったカードに JS が動画/リングを連動させる。 */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.insight-cards__viewport::-webkit-scrollbar {
	display: none;
}

.insight-cards__track {
	--insight-gap: 2.8cqw; /* 22.4/800 */
	display: flex;
	gap: var(--insight-gap);
}

.insight-cards__track::after {
	content: "";
	flex: 0 0 var(--gutter);
	margin-left: calc(-1 * var(--insight-gap));
}

.insight-card {
	flex: 0 0 86%;
	scroll-snap-align: start;
	background: var(--color-white);
	border-radius: 1.25cqw; /* 10/800 */
	overflow: hidden;
	text-align: left;
	color: var(--color-dark);
}

.insight-card__media {
	position: relative; /* __video の絶対配置基準 */
	width: 100%;
	aspect-ratio: 660 / 540;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* カード内の自動再生動画。poster を下の静止画（背景画像／デバイス合成背景）と同じ絵に
   揃えてあるため、再生前後で絵が入れ替わらず「同じ絵がそのまま動き出す」＝チラつかない。
   非アクティブ時は透明にして静止画レイヤーに任せ、再生フレームが出たら（JS が is-playing を付与）
   穏やかにフェードして poster→再生フレームへ繋ぐ。
   z-index は デバイス合成のスマホ枠(z4)より上。再生バイトは JS が
   アクティブ時のみ読み込む（preload=none + data-src）。 */
.insight-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.9s ease-in-out;
}

.insight-card__video.is-playing {
	opacity: 1;
}

/* デバイス閲覧カード：カタログ背景＋白の半透明オーバーレイ＋スマホ画面＋スマホ枠を重ね合わせ。 */
.insight-card__media--device {
	position: relative;
	background-color: var(--color-white);
	background-position: top center;
	overflow: hidden;
}

/* 背景カタログに暗いオーバーレイをかけてスマホを際立たせる（Figma: rgba(0,0,0,0.6) 相当）。
   bg-image より前面に確実に重ねる。 */
.insight-card__media--device::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	z-index: 1;
}

/* スマホ枠（黒いベゼル）。カード内に収まる高さ。 */
.insight-card__phone {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 90%;
	width: auto;
	max-width: none;
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.25));
	z-index: 4;
	pointer-events: none;
}

/* スマホ画面コンテンツ。枠 JPG の画面部分（白）を覆い隠すため、枠より前面に重ねる。
   枠 94% に対しベゼル分内側（≒枠の約 87%）の高さ。 */
.insight-card__screen {
	position: absolute;
	left: 50.5%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 91%;
	width: auto;
	max-width: none;
	z-index: 3;
	pointer-events: none;
}

.insight-card__body {
	padding: 4cqw 4.4cqw 5.2cqw; /* 32/35.2/41.6 @800 */
}

.insight-card__title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 4.25cqw; /* 34/800 */
	line-height: 1.5;
	letter-spacing: 0.02em;
	margin: 0 0 0.7em;
}

.insight-card__text {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 3cqw; /* 24/800 */
	line-height: 1.7;
	color: var(--color-dark);
	text-align: justify;
}

/* 丸サムネナビ */
.insight-cards__nav {
	margin: 5.2cqw var(--gutter) 0; /* 41.6/800 */
	display: flex;
	justify-content: center;
	gap: 2cqw; /* 16/800 */
}

.insight-cards__dot {
	position: relative;
	width: 10cqw; /* 80/800 */
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 0;
	flex: 0 0 auto;
	border: none;
	background: transparent;
	opacity: 0.55;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.insight-cards__thumb {
	position: absolute;
	inset: 0.375cqw; /* 3/800 */
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* 4枚目（デバイス閲覧）サムネはメインカードと同じ合成：
   カタログ背景＋暗オーバーレイ＋スマホ画面＋スマホ枠。 */
.insight-cards__thumb--device {
	background-position: top center;
}

.insight-cards__thumb--device::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
	z-index: 1;
}

.insight-cards__thumb-phone {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 90%;
	width: auto;
	max-width: none;
	z-index: 2;
	pointer-events: none;
}

.insight-cards__thumb-screen {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 78%;
	width: auto;
	max-width: none;
	z-index: 3;
	pointer-events: none;
}

.insight-cards__dot.is-active {
	opacity: 1;
	transform: scale(1.06);
}

/* リング表現：常時表示のグレートラック(__ring-track)の上を、アクティブ時のみ
   オレンジの進捗ライン(__ring-prog)が同位置でなぞって自動再生時間を可視化する。
   ストローク幅はドットサイズに依らず常に 2px（vector-effect で非スケール）。 */
.insight-cards__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
	overflow: visible;
}

.insight-cards__ring-track,
.insight-cards__ring-prog {
	fill: none;
	stroke-width: 5;
}

.insight-cards__ring-track {
	stroke: var(--color-silver);
}

/* アクティブな目印：選択中カードのドットはリングをオレンジの全周表示にする
   （時間で満ちる「ローディング進捗」ではなく「いま表示中」の状態マーカー）。 */
.insight-cards__dot.is-active .insight-cards__ring-track {
	stroke: var(--color-ring);
}

.insight-cards__ring-prog {
	/* 進捗（ローディング）アークは非表示。要素とアニメーションは残し、
	   タイマー式カードの自動送り（animationend）と動画進捗計測の動作だけ維持する。 */
	stroke: transparent;
	stroke-linecap: round;
	stroke-dasharray: 295.3;
	stroke-dashoffset: 295.3;
}

.insight-cards__dot.is-active .insight-cards__ring-prog {
	animation: insightRing var(--insight-duration, 4500ms) linear forwards;
}

@keyframes insightRing {
	from { stroke-dashoffset: 295.3; }
	to { stroke-dashoffset: 0; }
}

/* =============================================================
   5. Works (施工事例) — light background
   ============================================================= */
.works {
	background: var(--color-white);
	padding: 25cqw var(--gutter); /* 96/800, 80/800 */
}

/* WORKS / VOICE / CONTACT 見出しは Figma 準拠で順序とサイズを反転：
   日本語（施工事例 / お客様の声 / お問い合わせ）= 上の小ラベル、
   英語（WORKS / VOICE / CONTACT）= 下の大見出し。
   Figma: jp = Noto Sans JP Light 26px tracking 5px / en = SF Pro Regular 53px tracking 5px。 */

.flow__label-jp,
.works .section-head__jp,
.voice .section-head__jp,
.contact .section-head__jp {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 3.5cqw; /* 26/800 */
	letter-spacing: 0.1em;
	text-indent: 0.19em;
	line-height: 1.6;
}

.works .section-head__en,
.voice .section-head__en,
.flow .section-head__en,
.contact .section-head__en {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 6.8cqw; /* 53/800 */
	letter-spacing: 0.06em;
	text-indent: 0.094em;
	line-height: 1.6;
	margin: 0;
}

.works .section-head__divider,
.flow .section-head__divider,
.voice .section-head__divider,
.contact .section-head__divider {
	width: 25%; /* ≈202/800 */
	margin: 0.625cqw auto; /* 5/800 */
}

/* --- 施工事例スイッチャー（タブ切替＋液体ピル・自動再生） --- */
.works-switch {
	margin: 7cqw 0 0; /* 56/800 */
}

.works-switch__stage {
	position: relative;
	color: var(--color-white);
	/* トラックをセクションの左右パディング(var(--gutter))の外＝セクション端（モバイルでは画面端）まで
	   全幅展開する。マージンの % は内側コンテンツ幅基準のため、セクションのパディング実px と一致させるに
	   は /0.9 する（0.9 = 1 − 左右 gutter 5%×2）。これで左右とも端ぴったりに揃い、右端の白い隙間が出ない。
	   先頭パネルの左／最終パネルの右の余白は .works-switch__track の padding で持たせる。 */
	margin-left: calc(-1 * var(--gutter) / 0.9);
	margin-right: calc(-1 * var(--gutter) / 0.9);
}

/* お客様の声と同様、ネイティブ横スクロール（スワイプ）で切替。次パネルが少しのぞく。
   タブ／矢印クリックでも該当パネルへスクロールする（works-switch.js で同期）。 */
.works-switch__track {
	position: relative;
	display: flex;
	gap: 2.8cqw; /* 22.4/800 */
	/* 全幅トラックの両端に var(--gutter) のインセット。
	   先頭パネルは左に gutter、最終パネルは右に gutter の余白を持つ（左右対称）。
	   スクロール中はパネルが画面端まで届き、最右端では「右余白＝gutter／左の白余白なし」になる。
	   トラック幅＝セクション幅のため、この padding(5%) はセクションの gutter 実px と一致する。 */
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	scroll-padding-left: var(--gutter); /* スナップ時も先頭パネルを gutter 分インセットして揃える */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.works-switch__track::-webkit-scrollbar {
	display: none;
}

.works-switch__panel {
	flex: 0 0 95%;
	scroll-snap-align: start;
	position: relative;
	/* 英字大見出し＋キャプション＋上部の暗がりは画像（works_image*.webp 1320×1736）に
	   焼き込み済み。比率を画像と一致させ（660:868）、cover で焼き込み文字が切れないようにする。 */
	aspect-ratio: 660 / 868;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 2cqw; /* 10/800 */
	overflow: hidden;
	background-color: var(--color-dark);
}

/* 施工事例ナビ（Figma「サムネイルナビ」：ピルバー＋スクロール＋左右矢印） */
.works-nav {
	position: relative;
	margin: 4.4cqw 0 0; /* 35.2/800 */
	height: 9.125cqw; /* 73/800 */
	border-radius: 999px;
	background: var(--color-light);
	overflow: hidden;
}

.works-nav__scroll {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.works-nav__scroll::-webkit-scrollbar {
	display: none;
}

.works-nav__pill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	z-index: 0;
	border-radius: 999px;
	background: var(--color-dark);
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.works-nav__tab {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	height: 100%;
	padding: 0 5cqw;
	white-space: nowrap;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 3.25cqw; /* 26/800 */
	line-height: 1.6;
	color: var(--color-gray);
	transition: color 0.3s ease;
}

.works-nav__tab.is-active {
	color: var(--color-white);
	font-weight: 700;
}

.works-nav__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16.5%; /* 132/800 */
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.works-nav__fade--left {
	left: 0;
	border-radius: 999px 0 0 999px;
	background: linear-gradient(to right, var(--color-light) 35%, rgba(245, 245, 247, 0));
}

.works-nav__fade--right {
	right: 0;
	border-radius: 0 999px 999px 0;
	background: linear-gradient(to right, rgba(245, 245, 247, 0) 0%, var(--color-light) 60%);
}

.works-nav.has-prev .works-nav__fade--left,
.works-nav.has-next .works-nav__fade--right {
	opacity: 1;
}

.works-nav__arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	width: 4.75cqw; /* 38/800 */
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.works-nav__arrow::before {
	content: "";
	width: 1.625cqw; /* 13/800 */
	height: 3.25cqw; /* 26/800 */
	background-color: var(--color-gray);
	-webkit-mask: url(../images/works-arrow.svg) center / contain no-repeat;
	mask: url(../images/works-arrow.svg) center / contain no-repeat;
}

.works-nav__arrow--prev {
	left: 0.5cqw; /* 4/800 */
}

.works-nav__arrow--prev::before {
	transform: scaleX(-1);
}

.works-nav__arrow--next {
	right: 0.5cqw; /* 4/800 */
}

.works-nav.has-prev .works-nav__arrow--prev,
.works-nav.has-next .works-nav__arrow--next {
	display: flex;
}

/* （旧 .tabs 共通タブは works=.works-nav / stores=.stores-tabs へ移行したため撤去） */

.works-switch__descs {
	position: relative;
	margin: 4.8cqw 0 0; /* 38.4/800 */
}

.works-switch__desc {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 3.125cqw; /* 25/800 */
	line-height: 1.6;
	margin: 0;
	display: none;
	text-align: justify;
}

.works-switch__desc.is-active {
	display: block;
	animation: worksFade 0.6s ease;
}

@keyframes worksFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.works__makers {
	margin: 7.2cqw 0 0;
}

.works__makers-label {
	display: flex;
	align-items: center;
	gap: 2.5cqw; /* 20/800 */
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 2.25cqw; /* 18/800 */
	letter-spacing: 0.06em;
	color: var(--color-gray);
	white-space: nowrap;
}

.works__makers-label::before {
	content: "";
	flex: 1;
	height: 0.3px;
	background: var(--color-gray);
}

.marquee {
	margin: 4.8cqw 0 0;
	display: flex;
	flex-direction: column;
	gap: 7cqw;
}

.marquee__row {
	overflow: hidden;
}

.marquee__inner {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.marquee__inner img {
	flex: 0 0 auto;
	height: 6cqw;
	width: auto;
	margin-right: 7cqw;
	object-fit: contain;
}

/* duration は PHP がロゴ枚数 × 一定秒（5.5s/枚）で算出した --marquee-duration を使い、
   行間で「1 ロゴ通過時間」=px/秒 を揃える。 */
.marquee__row--rtl .marquee__inner {
	animation: marquee-rtl var(--marquee-duration, 38s) linear infinite;
}

.marquee__row--ltr .marquee__inner {
	animation: marquee-ltr var(--marquee-duration, 44s) linear infinite;
}

@keyframes marquee-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes marquee-ltr {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.works-switch__panel { transition: none; }
	.works-nav__pill { transition: none; }
	.works-nav__scroll { scroll-behavior: auto; }
	.works-switch__desc.is-active { animation: none; }
	/* メーカーロゴのマーキーは reduce-motion でも流し続ける（サイト方針：演出は常時有効）。 */
}

/* =============================================================
   6. Before / After — 比較スライダー
   背景：ダークグレー。中央の白い丸ハンドルをドラッグで左右に動かし、
   左（施工前）/ 右（施工後）の見える幅を変える。全体の枠サイズは固定。
   ============================================================= */
.ba {
	background: #5d5d5d;
	color: var(--color-white);
	padding: 25cqw 3.375%; /* 96/800, 左右 27/800, 72/800 */
}

.ba__head {
	text-align: center;
	margin-bottom: 7cqw; /* 56/800 */
}

.ba__en {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 4.5cqw; /* 36/800 */
	letter-spacing: 0.05em;
	margin: 0;
	color: var(--color-white);
}

.ba__title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 6.25cqw; /* 50/800 */
	letter-spacing: 0.05em;
	line-height: 1.55;
	margin: 2.4cqw 0 0; /* 19.2/800 */
	padding-left: 0.62em;
	color: var(--color-white);
}

/* 比較フレーム本体 */
.ba__compare {
	--ba-pos: 50%; /* JS が 0〜100% を書き換える */
	position: relative;
	width: 100%;
	/* ソース画像と完全一致のアスペクト比（1492 × 2110）。
	   両画像がこの比率に揃っているので object-fit でクロップが起きず、建物の縦位置が完全一致する。 */
	aspect-ratio: 1492 / 2110;
	max-height: max(calc(var(--vh) * 80), calc(var(--min-vh) * 0.8));
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y; /* 横スワイプは要素が拾うため、縦のページスクロールは許可 */
	background: #000;
}

.ba__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 万一 max-height によってフレームがソース比率より横長に潰れた場合でも、
	   両画像とも上端揃いでクロップされるので建物の頭（=ソース上部）が一致する。 */
	object-position: top center;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* 後ろ：施工後を常に全面で見せる */
.ba__img--after {
	z-index: 1;
}

/* 前：施工前を clip-path で左側だけ見せる。--ba-pos が分割位置（0..100%）。 */
.ba__img--before {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

/* 中央の白い縦線 */
.ba__divider-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	width: 2px;
	transform: translateX(-50%);
	background: var(--color-white);
	z-index: 3;
	pointer-events: none;
}

/* 中央の丸ハンドル（⇔アイコン） */
.ba__handle {
	position: absolute;
	top: 50%;
	left: var(--ba-pos);
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 12.5cqw; /* 100/800 */
	height: 12.5cqw; /* 100/800 */
	border-radius: 50%;
	background: var(--color-white);
	border: 0;
	padding: 0;
	cursor: ew-resize;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none; /* ハンドル上ではスクロールせずドラッグだけ拾う */
}

.ba__handle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.ba__handle-icon {
	width: 65%;
	height: 65%;
	pointer-events: none;
}

/* 上部のピルラベル「施工前 ⇔ 施工後」 */
.ba__label {
	position: absolute;
	top: 4cqw; /* 28.8/800 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	background: var(--color-white);
	color: var(--color-dark);
	border-radius: 0.625cqw; /* 5/800 */
	padding: 0.4cqw 2cqw; /* 3.2/800, 16/800 */
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 4cqw; /* 24/800 */
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}

.ba__label-arrow {
	font-weight: 400;
	margin: 0 0.2em;
	letter-spacing: 0;
}

/* キャプション */
.ba__hint {
	margin: 3.2cqw 0 0; /* 25.6/800 */
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 2.875cqw; /* 23/800 */
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.85);
}

/* =============================================================
   7. Voice (REVIEW) — light gray background
   ============================================================= */
.voice {
	background: var(--color-light);
	padding: 25cqw var(--gutter); /* 96/800 */
}

/* 横スクロール（スワイプ）で切替。次カードが少しのぞく。自動再生なし。 */
.voice__scroller {
	margin: 6.8cqw calc(-1 * var(--gutter)) 0; /* 54.4/800 */
	padding: 2cqw var(--gutter) 5.6cqw; /* 16/800, 44.8/800 */
	display: flex;
	gap: 2.8cqw; /* 22.4/800 */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.voice__scroller::-webkit-scrollbar {
	display: none; /* Chrome / Safari */
}

.voice__card {
	flex: 0 0 95%;
	scroll-snap-align: start;
	background: var(--color-white);
	border-radius: 3cqw;
	box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.03);
	padding: 6.4cqw 6cqw;
}

.voice__text {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 3.5cqw; /* 22/800 */
	line-height: 1.8;
	color: var(--color-gray);
	text-align: justify;
}

.voice__text + .voice__text {
	margin-top: 1.3em;
}

.voice__name {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 3.5cqw; /* 21/800 */
	color: var(--color-gray);
	text-align: right;
	margin: 3.2cqw 0 0; /* 25.6/800 */
}

/* =============================================================
   7.5 Flow (施工の流れ / FLOW) — light gray background
   ============================================================= */
.flow {
	--gutter: 8%; /* 69/800 */
	background: var(--color-light);
	padding: 0 var(--gutter) 25cqw; /* 88/800, 96/800 */
}

.flow__head {
	text-align: center;
}

.flow__hr {
	height: 1px;
	border: 0;
	width: 19.25%; /* 154/800 */
	margin: 2.8cqw auto; /* 22.4/800 */
	/* Figma 準拠：アクセントカラーのフェード罫線。 */
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--color-accent) 50%,
		transparent 100%
	);
}

.flow__list {
	list-style: none;
	margin: 6.4cqw 0 0; /* 51.2/800 */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2cqw; /* 11.2/800 */
}

/* カード（ヘッダー＋詳細パネルを内包）
   --flow-step-pad / --flow-num-w / --flow-step-gap / --flow-indent でヘッダーと詳細の左位置を共有し、
   詳細（アンサー）の段落開始位置がタイトル開始位置と揃うようにする（Figma 準拠）。
   --flow-num-w は .flow__num の `1.2em` を rem に展開したもの（num の font-size clamp ×1.2）。 */
.flow__item {
	--flow-step-pad: 4cqw; /* 16/800 */
	--flow-num-w: 6.5cqw; /* 1.2em of num(48px) = 57.6/800 */
	--flow-step-gap: 0.6cqw; /* 4.8/800 */
	--flow-indent: calc(var(--flow-step-pad) + var(--flow-num-w) + var(--flow-step-gap));
	background: var(--color-white);
	border-radius: 1.875cqw; /* 15/800（Figma） */
	box-shadow: 4px 4px 28px rgba(68, 68, 68, 0.07);
	overflow: hidden;
}

/* ヘッダー（クリックで開閉） */
.flow__step {
	display: flex;
	align-items: center;
	gap: var(--flow-step-gap);
	width: 100%;
	text-align: left;
	padding: var(--flow-step-pad);
}

.flow__num {
	flex: 0 0 auto;
	min-width: var(--flow-num-w);
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 6cqw; /* 48/800 */
	line-height: 1;
	color: var(--color-accent);
}

.flow__label {
	flex: 1;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 3.5cqw; /* 30/800 */
	color: var(--color-dark);
}

.flow__chev {
	flex: 0 0 auto;
	width: 2cqw;
	height: 2cqw;
	border-right: 1px solid var(--color-gray);
	border-top: 1px solid var(--color-gray);
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

/* 詳細パネル（既定は開＝JS無効でも読める。JS有効時に折りたたみ） */
.flow__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.35s ease;
}

.flow__panel-inner {
	overflow: hidden;
}

.flow__detail {
	padding: 0 4cqw 4cqw var(--flow-indent); /* 32/800 */
}

.flow__detail p {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 3.1cqw;
	line-height: 1.8;
	letter-spacing: 0.03em;
	color: var(--color-dark);
	margin: 0;
	text-align: justify;
}

.flow__detail .flow__note {
	margin-top: 0.7em;
	text-align: right;
	color: var(--color-gray);
	font-size: 2.5cqw; /* 20/800 */
}

/* JS 有効時：折りたたみ＋クリックトグル（開いたら開きっぱなし。他は閉じない） */
.flow--enhanced .flow__step {
	cursor: pointer;
}

.flow--enhanced .flow__panel {
	grid-template-rows: 0fr;
}

.flow--enhanced .flow__item.is-open .flow__panel {
	grid-template-rows: 1fr;
}

.flow--enhanced .flow__item.is-open .flow__chev {
	transform: rotate(135deg); /* 開＝下向き（v） */
}

/* =============================================================
   8. CTA
   ============================================================= */
.cta {
	--gutter: 8%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-white);
	padding: 11cqw var(--gutter); /* 88/800 */
	background-color: var(--color-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio: 800/620;
}

/* 可読性のための暗オーバーレイ */
.cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.52);
	pointer-events: none;
	-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.cta__body {
	position: relative;
	z-index: 1;
	width: 100%;
}

.cta__logo {
	width: 30.625cqw;
	height: auto;
	margin: 0 auto 5cqw;
}

.cta__sub {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 4.25cqw; /* 34/800 */
	line-height: 1.6;
	margin: 0;
}

.cta__main {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 7.125cqw; /* 57/800 */
	line-height: 1.4;
	letter-spacing: 0.04em;
	margin: 1cqw 0 0; /* 8/800 */
}

.cta__line {
	display: block;
	width: 1px;
	height: 11.5cqw; /* 92/800 */
	margin: 4.8cqw auto 0; /* 38.4/800 */
	background: rgba(255, 255, 255, 0.7);
	/* ファーストビューの SCROLL ライン（.hero__scroll-line）と同じ流下アニメ。
	   keyframes hero-scroll-pulse を共用。 */
	overflow: hidden;
	position: relative;
}

.cta__line::after {
	content: "";
	position: absolute;
	left: 0;
	top: -60%;
	width: 100%;
	height: 60%;
	background: var(--color-white);
	animation: hero-scroll-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* =============================================================
   9. Contact
   ============================================================= */
.contact {
	background: var(--color-white);
	padding: 25cqw 8.625%; /* 96/800, 左右 69/800 */
}

.contact__logo {
	width: 26.125cqw; /* 209/800 */
	height: auto;
	margin: 0 auto;
	/* logo.svg は白版のため、白背景の本セクションでは黒に加工して表示。
	   オレンジのアクセントを残したい場合はダーク版ロゴ画像を差し替え推奨。 */
	filter: brightness(0);
}

.contact__area {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 2.625cqw; /* 21/800 */
	color: var(--color-gray-2);
	text-align: center;
	margin: 0.8em 0 0;
}

.contact__form {
	margin: 6.4cqw 0 0;
	display: flex;
	flex-direction: column;
	gap: 5cqw;
}

.contact__item {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.contact__label {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 4cqw;
	color: var(--color-gray-2);
}

/* 補助テキスト（例：「ハイフンなし／入力で住所自動入力」） */
.contact__hint {
	margin-left: 0.5em;
	font-size: 0.78em;
	color: var(--color-gray);
	font-weight: 400;
}

/* ご連絡方法（電話/メール）のラジオグループ */
.contact__radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 4cqw;
}

.contact__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	font-size: 4cqw;
	color: var(--color-dark);
}

.contact__radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	border: 1px solid #888;
	border-radius: 50%;
	background: var(--color-white);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
}

.contact__radio input[type="radio"]::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--color-white);
	transform: scale(0);
}

.contact__radio input[type="radio"]:checked {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.contact__radio input[type="radio"]:checked::before {
	transform: scale(1);
}

.contact__radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* JS で表示制御する条件付き項目。hidden 属性で初期非表示。 */
.contact__item--conditional[hidden] {
	display: none !important;
}

.contact__field {
	width: 100%;
	font: inherit;
	/* iOS Safari はフォーカス時、入力欄の文字が 16px 未満だと自動ズームする。
	   それを防ぐため 16px を下限に（広い列幅では従来どおり 2.4cqw で比例）。 */
	font-size: max(16px, 2.4cqw);
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid #ccc;
	border-radius: 1.25cqw; /* 10/800 */
	padding: 0 2.2cqw; /* 17.6/800 */
	height: 9.875cqw; /* 79/800 */
	box-shadow: 0 0 28px rgba(68, 68, 68, 0.01);
}

textarea.contact__field {
	height: auto;
	min-height: 30.25cqw; /* 242/800 */
	padding: 2cqw 2.2cqw; /* 16/800, 17.6/800 */
	resize: vertical;
	line-height: 1.7;
}

.contact__field:focus {
	outline: none;
	border-color: var(--color-accent);
}

.contact__submit {
	margin: 3.2cqw 0 0; /* 25.6/800 */
	width: 100%;
	height: 9.875cqw; /* 79/800 */
	border-radius: 1.25cqw; /* 10/800 */
	background: var(--color-accent);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 3.75cqw; /* 30/800 */
	transition: filter 0.2s ease;
}

.contact__submit:hover {
	filter: brightness(1.07);
}

/* 送信結果メッセージ */
.contact__notice {
	margin: 0 0 2.8cqw; /* 22.4/800 */
	padding: 1.8cqw 2.4cqw; /* 14.4/800, 19.2/800 */
	border-radius: 1.25cqw; /* 10/800 */
	font-family: var(--font-sans);
	font-size: 2.1cqw; /* 16.8/800 */
	line-height: 1.6;
}

.contact__notice--ok {
	background: #eef7ee;
	color: #1f6b2e;
	border: 1px solid #bcdcc0;
}

.contact__notice--err {
	background: #fdeeee;
	color: #9b2c2c;
	border: 1px solid #e6c2c2;
}

/* 必須バッジ */
.contact__req {
	margin-left: 0.6em;
	font-size: 0.7em;
	font-weight: 700;
	color: var(--color-accent);
}

/* ハニーポット（視覚的に隠す） */
.contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* インラインバリデーション（項目ごとの赤字） */
.contact__field.is-invalid {
	border-color: #d9534f;
	background: #fff8f8;
}

.contact__error {
	margin: 0.45em 0 0;
	color: #c0392b;
	font-family: var(--font-sans);
	font-size: 1.9cqw; /* 15.2/800 */
	line-height: 1.5;
}

/* 送信完了表示（フォームと差し替え） */
.contact__done {
	text-align: center;
	padding: 8cqw 0; /* 64/800 */
	animation: worksFade 0.5s ease;
}

.contact__done-title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 4.2cqw; /* 33.6/800 */
	margin: 0 0 0.7em;
}

.contact__done-text {
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--color-gray);
	font-size: 2.4cqw; /* 19.2/800 */
	line-height: 1.8;
}

/* =============================================================
   10. Stores — dark background
   ============================================================= */
.stores {
	--gutter: 6.5%; /* 52/800 */
	background: var(--color-dark);
	color: var(--color-white);
	/* 最終画面（一番下までスクロールした状態）で
	   「ヘッダー＋店舗セクション＋フッター」がどの端末でもちょうど 1 画面に収まるよう、
	   店舗セクションが画面の残り高さ（= 1 画面 − ヘッダー高 − フッター高）を埋める。
	   ヘッダー高を差し引くことで店舗セクションは固定ヘッダーの直下から始まり、
	   ヘッダー回避用の上パディングは不要（= ヘッダーと余白が重ならない）。
	   高い端末では中央寄せで余白を均等配分、低い端末では safe center で上端にはみ出させない。 */
	box-sizing: border-box;
	/* 末尾に +2px して店舗セクションを 2px だけ高くし、上端を固定ヘッダーの裏へ潜り込ませる。
	   最下部までスクロールした状態ではレイアウトが下端（フッター）基準で決まるため、
	   セクションを高くすると上端が押し上がってヘッダー裏に入る。これにより、ヘッダー高(2.9rem)と
	   セクション高のサブピクセル丸め差で直上の白い .contact セクション下端がヘッダー下に
	   ~0.5px 覗いて「白い線」に見える現象を防ぐ。ヘッダーは z-index 100 で最前面のため重なりは不可視。 */
	min-height: calc(calc(var(--vh) * 100) - var(--header-h) - var(--footer-h) + 2px);
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	padding: 2cqw var(--gutter); /* 16/800 */
	text-align: center;
}

.stores__logo {
	width: 32.75cqw; /* 262/800 */
	height: auto;
	margin: 0 auto;
}

.stores__label {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 3.625cqw; /* 29/800 */
	margin: 0.9em 0 0;
}

/* 支店カードカルーセル（お客様の声＝.voice__scroller と同様のネイティブ横スクロール／スワイプ） */
.stores-carousel {
	/* 上マージンは画面高に追従（vh）させ、低い端末では詰めて 1 画面に収める。
	   左右マージンはセクションのパディング(var(--gutter))の外＝セクション端（画面端）まで全幅展開。
	   マージン % は内側コンテンツ幅基準のため /0.9（=1−左右5%×2）でパディング実px と一致させる。
	   先頭／最終カードの左右インセットは __track の padding で持たせる（最右端で左の余白が消える）。 */
	margin: 6.4cqw calc(-1 * var(--gutter) / 0.9) 0 calc(-1 * var(--gutter) / 0.9); /* 51.2/800 */
}

/* お客様の声と同様、ネイティブ横スクロール（スワイプ）で切替。次カードが少しのぞく。
   タブ押下でも該当カードへスクロールする（stores-carousel.js で同期）。 */
.stores-carousel__track {
	position: relative;
	display: flex;
	gap: 2.8cqw; /* 22.4/800 */
	/* 全幅トラックの両端に var(--gutter) のインセット（先頭=左、最終=右）。
	   スクロール中はカードが画面端まで届き、最右端では左の白余白が無くなる。 */
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	scroll-padding-left: var(--gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.stores-carousel__track::-webkit-scrollbar {
	display: none;
}

.stores-card {
	flex: 0 0 95%;
	scroll-snap-align: start;
	background: var(--color-white);
	border-radius: 3cqw; /* 25/800（Figma） */
	overflow: hidden;
	text-align: left;
	color: var(--color-dark);
}

.stores-card__photo {
	width: 100%;
	aspect-ratio: 660 / 551;
	object-fit: cover;
	display: block;
}

.stores-card__body {
	padding: 4.5cqw;
}

.stores-card__name {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 4cqw;
	margin: 0 0 1cqw;
}

.stores-card__list {	
	display: grid;
	grid-template-columns: max-content 1fr;
	row-gap: 0;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 2.5cqw;
	line-height: 1.9;
	color: var(--color-dark);
	overflow-wrap: anywhere;
}

.stores-card__list-label {
	white-space: nowrap;
}

.stores-card__list-value {
	margin: 0;
	min-width: 0; /* grid セルでの長文折り返しを許可（auto だと幅が広がりすぎる） */
}

/* iOS の Data Detectors が電話番号/住所/メールを自動リンク化（下線/点線）しても、
   見た目はリンクにせず通常テキストとして見せる（メタタグの保険）。 */
.stores-card__list-value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
	pointer-events: none;
}

/* 住所だけは意図的に Google マップへのリンクにする（見た目は通常テキストのまま、
   タップだけ有効化）。iOS 自動リンク無効化の pointer-events:none を打ち消す。 */
.stores-card__list-value a.stores-card__map-link {
	pointer-events: auto;
	cursor: pointer;
}

/* 支店タブ（8項目・4列×2行。暗背景：選択中＝白太字／他＝グレー） */
.stores-tabs {
	margin: 5.6cqw 0 0; /* 44.8/800（旧 vh 追従→比率に統一） */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1cqw; /* 8/800 */
}

.stores-tabs__tab {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 3.25cqw;
	color: var(--color-gray);
	text-align: left;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.stores-tabs__tab.is-active {
	color: var(--color-white);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.stores-carousel__track { scroll-behavior: auto; }
}

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
	background: var(--color-dark);
	/* 高さを --footer-h で固定し、コピーを上下中央に置く（＝上下余白を確定）。
	   .stores の min-height 計算と一致させ、店舗＋フッターが正確に 1 画面になるようにする。 */
	box-sizing: border-box;
	height: var(--footer-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--col-w) * 0.03); /* 24/800 */
	text-align: center;
}

.site-footer__copy {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: calc(var(--col-w) * 0.02625); /* 21/800（Figma） */
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}

/* =============================================================
   Thanks page — お問い合わせ送信完了
   ============================================================= */
/* サンクスページは Figma 準拠で 1 viewport に収める。
   ボタンは house 画像の上部（雲のあたり）に被さる絶対配置、
   house も section 下端へ絶対配置。inner（ロゴ〜本文）は自然なフローで上から積む。 */
/* =============================================================
   サンクスページ（Figma node 549:45 / 800×1445 を忠実に再現）
   - 画面全体を覆い、どのデバイスでもスクロールさせない（1画面完結）。
   - 内側 .thanks__inner を 800:1445 の固定比フレーム（白いデザイン面）とし、高さ＝画面高で拡縮。
     フレーム幅は比率から導出 → 縦長端末（スマホ）では左右がはみ出してクリップ、
     横長・PC では左右にダーク背景（var(--color-dark)）。比率はどの端末でも Figma と完全に同一。
   - 各要素はフレームに対する Figma 座標の % で絶対配置。
     フォント／角丸は cqw でフレーム幅に追従（= Figma 800px 基準で等倍スケール）。
   - is-thanks 時は .lp の幅制約を外して全画面化（body のスクロールも止める）。
   ============================================================= */
.thanks {
	position: relative;
	height: calc(var(--vh) * 100);
	background: var(--color-dark); /* PC など横長画面でフレーム周囲に出る背景はダーク */
	color: var(--color-dark);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 800×1445 の固定比フレーム（白いデザイン面）。高さを画面高に合わせ、幅は aspect-ratio から導出。
   家画像など内部のはみ出しはフレーム端でクリップする。 */
.thanks__inner {
	position: relative;
	height: 100%;
	aspect-ratio: 800 / 1445;
	flex: 0 0 auto;
	container-type: inline-size;
	background: var(--color-white);
	overflow: hidden;
}

/* --- 以降、各要素は Figma 800×1445 上の座標を % 換算して絶対配置 --- */
.thanks__logo {
	position: absolute;
	top: 5.12%;   /* 74/1445 */
	left: 50%;
	transform: translateX(-50%);
	width: 35.75%; /* 286/800 */
	height: auto;
}

.thanks__check {
	position: absolute;
	top: 16.26%;  /* 235/1445 */
	left: 50%;
	transform: translateX(-50%);
	width: 18.25%; /* 146/800 */
	height: auto;
}

.thanks__check svg {
	display: block;
	width: 100%;
	height: auto;
}

.thanks__title {
	position: absolute;
	top: 30.59%;  /* 442/1445 */
	left: 50%;
	transform: translateX(-50%);
	width: 68.5%; /* 548/800 */
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 5.75cqw; /* 46/800 */
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: center;
}

.thanks__text {
	position: absolute;
	top: 42.01%;  /* 607/1445 */
	left: 50%;
	transform: translateX(-50%);
	width: 68.5%; /* 548/800 */
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 350;
	font-size: 3.5cqw; /* 28/800 */
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-align: center;
}

/* ボタンは house 画像の上に重なる。Figma の box 中心 (913+990)/2 に合わせて配置。 */
.thanks__btn {
	position: absolute;
	top: 65.85%; /* 951.5/1445（box 中心） */
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.2em;
	box-sizing: border-box;
	min-width: 43%;       /* 344/800 */
	padding: 2.8cqw 3cqw; /* 縦パディングで box 高 ≒ 77/1445 */
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: 4.7cqw; /* 37.5/800 */
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 4cqw; /* 32/800 */
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
}

.thanks__btn-arrow {
	font-weight: 400;
}

.thanks__house {
	position: absolute;
	bottom: 0; 
	width: 100%; 
	max-width: none;
	height: auto;
	z-index: 1;
}

/* is-thanks ページは .lp の幅制約を外して全画面、スクロールも止める。
   高さ 720px 未満の端末（SE / 横向き等）でも 1 画面に収めるため、
   body の最小高さ floor（--min-vh）は解除する。 */
body.is-thanks {
	overflow: hidden;
	min-height: 0;
}

body.is-thanks .lp {
	max-width: none;
}

/* サンクスページではサイトのヘッダー・フッター・追従CTAを非表示にする（Figma準拠） */
body.is-thanks .site-header,
body.is-thanks .nav-menu,
body.is-thanks .site-footer,
body.is-thanks .floating-cta {
	display: none !important;
}

/* =============================================================
   無料相談モーダル（施工対応エリア + 電話/LINE相談 + CLOSE）
   - ヘッダー下（top:70px）に固定オーバーレイ、暗ぼかし背景
   - 縦 flex で項目を分配し、スクロール無しで全体が収まる
   ============================================================= */
.freemenu-modal {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	margin-inline: auto;
	z-index: 110;
	width: 100%;
	max-width: var(--lp-max);
	height: calc(max(calc(var(--vh) * 100), var(--min-vh)) - var(--header-h));
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	color: var(--color-white);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

html.freemenu-open .freemenu-modal {
	opacity: 1;
	visibility: visible;
}

html.freemenu-open .freemenu-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

/* モーダル表示中の背面スクロール抑止は JS で行う。
   html に overflow:hidden を掛けると hero/aiparse の position:sticky ピンが外れて
   背景シーンが消えるため、ここでは止めない（freemenu-modal.js で wheel/touchmove を抑止）。 */

/* Figma 800px フレーム準拠。全項目を「実寸 / 800 = K%」のスケールで cqw 記述し、
   MIN/MAX も同じ比率（×0.5）で揃える → どの幅でもモーダル全体の比率が一致する。
   中身は justify-content: center で縦中央寄せ。CLOSE は viewport 下端に fixed で
   floating-cta と同じ位置に置き、中身と重ならないよう padding-bottom を確保。
   縦が極端に短いデバイス向けに overflow-y: auto でスクロール退避。 */
.freemenu-modal__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	padding: clamp(40px, 6cqw, 48px) clamp(40px, 7cqw, 56px) clamp(96px, 18cqw, 144px);
	overflow-y: auto;
	overscroll-behavior: contain; /* 内部スクロールが背面ページへ連鎖しないように */
	text-align: start;
}

.freemenu-modal__title {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2cqw, 16px);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(22px, 5.5cqw, 44px); /* 44px @800 */
	letter-spacing: 0.07em;
}

.freemenu-modal__icon {
	width: auto;
	height: 1.15em;
	display: block;
	/* freemenu_icon.svg は黒地想定の場合があるので白で表示するため反転 */
	filter: brightness(0) invert(1);
}

.freemenu-modal__divider {
	height: 1px;
	border: 0;
	margin: clamp(18px, 4.5cqw, 36px) 0 0; /* 36px @800 */
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		var(--color-silver) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

.freemenu-modal__area {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(11px, 2.75cqw, 22px); /* 22px @800 */
	margin-top: clamp(20px, 5cqw, 40px); /* 40px @800 */
}

.freemenu-modal__pref {
	display: inline-block;
	background: var(--color-white);
	color: var(--color-dark);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(12px, 3cqw, 24px); /* 24px @800 */
	padding: 0.3em 1.8em;
	border-radius: 4px;
	letter-spacing: 0.04em;
}

.freemenu-modal__cities {
	font-family: var(--font-sans);
	font-weight: 350;
	font-size: clamp(12px, 3cqw, 24px); /* 24px @800 */
	letter-spacing: 0.02em;
	line-height: 1.7;
	margin: 0;
	text-align: start;
}

.freemenu-modal__notice {
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 350;
	font-size: clamp(11px, 2.75cqw, 22px); /* 22px @800 */
	letter-spacing: 0.04em;
	line-height: 1.7;
	margin: clamp(18px, 4.5cqw, 36px) 0 0; /* 36px @800 */
}

.freemenu-modal__actions {
	display: flex;
	justify-content: center;
	gap: clamp(40px, 7cqw, 56px); /* 56px @800 */
	margin-top: clamp(30px, 5cqw, 40px); /* 40px @800 */
}

.freemenu-modal__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 2cqw, 16px); /* 16px @800 */
	color: var(--color-white);
	text-decoration: none;
}

.freemenu-modal__action-icon {
	display: block;
	width: clamp(80px, 20cqw, 180px);
	height: auto;
	border-radius: 20px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}

.freemenu-modal__action-label {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(14px, 3.5cqw, 28px); /* 28px @800 */
	letter-spacing: 0.06em;
}

.freemenu-modal__close {
	/* CLOSE の containing block は viewport ではなくモーダル本体になる
	   （.freemenu-modal の backdrop-filter が fixed の containing block を生成する仕様）。
	   モーダル高さは凍結 --vh（=lvh）基準なので、URL バー表示中はモーダル下端が
	   画面の見える範囲より (100lvh - 100svh) ぶん下にはみ出す。
	   その分を bottom に上乗せして URL バー表示時の見切れを回避しつつ、
	   URL バー非表示時は floating-cta と完全に同じ位置（var(--cta-bottom)）に揃える。
	   - URL バー表示中:  100lvh - 100dvh = URL バー高さ → 持ち上げて URL バー上に出す
	   - URL バー非表示時: 100lvh - 100dvh = 0           → floating-cta と一致
	   モーダル表示中は JS でスクロールロック中のため dvh は動かず shake は起きない。 */
	position: fixed;
	left: 50%;
	bottom: calc(var(--cta-bottom) + (100lvh - 100dvh));
	transform: translateX(-50%);
	z-index: 111; /* freemenu-modal(110) より上 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	padding: var(--cta-pad-y) var(--cta-pad-x);
	background: var(--color-dark);
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--cta-font);
	letter-spacing: 0.16em;
	line-height: 1;
	min-width: var(--cta-min-w);
	cursor: pointer;
}

.freemenu-modal__close-x {
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1;
}

/* サンクスページではモーダルも隠す（前述 is-thanks ルールに合わせる） */
body.is-thanks .freemenu-modal {
	display: none !important;
}

/* =============================================================
   AI Parse — AIパース → 実写へクロスフェードするセクション
   - 基本（JS なし）= 昼／夜の 2 シーンを縦に積んで順に表示
   - html.js-aiparse = ピン留め（sticky）してスクロール量でクロスフェード
   ============================================================= */
.aiparse {
	position: relative;
	color: var(--color-dark);
}

.aiparse__pin {
	position: static;
}

.aiparse__scene {
	position: relative;
	min-height: max(calc(var(--vh) * 92), calc(var(--min-vh) * 0.92));
	overflow: hidden;
}

/* 昼：方眼背景（設計図シート風グリッド）＋ image1（AIパース）。
   オレンジの方眼グリッドは下地として残す。image1 は夜(image2)と同寸・同比率なので、
   表示は夜と統一して object-fit: cover（基底ルール）。グリッドは画像にも描き込まれている。 */
.aiparse__scene--day {
	background-color: var(--color-white);
}

/* 夜：image2 の上空色（#112741）を下地に置く。 */
.aiparse__scene--night {
	background-color: #112741;
}

/* シーン内の画像。建物の地面が下端に来るよう object-position: center bottom。
   画像は上部に「続きの空」（昼=方眼／夜=夜空）を足して縦横比を画面(≒0.462)に合わせて
   あるため、cover で全画面を埋めても左右はほぼ見切れず、白い余白も出ない。
   昼夜は同寸・同位置で重なりクロスフェードする（images/aiparse_image*.orig.webp が元画像）。 */
.aiparse__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	pointer-events: none;
	display: block;
	z-index: 0;
}

/* シーン上部のコピー領域。
   レイアウトはヒーローと同じ：左寄せ＋左右 11.25% パディング、固定ヘッダー分の余白を上に確保。 */
.aiparse__copy {
	position: relative;
	z-index: 2;
	padding: 30cqw 11.25% 0;
	text-align: left;
}

.aiparse__title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 7.5cqw; /* FVと同じ */
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin: 0;
}

.aiparse__hr {
	height: 1px;
	border: 0;
	margin: 4cqw 0 2.8cqw; /* 32/800, 22.4/800 */
	width: 67.875%; /* 543/800 */
}

.aiparse__en {
	font-family: var(--font-sans);
	font-weight: 200;
	font-size: 5cqw; /* FVと同じ */
	letter-spacing: 0.02em;
	margin: 0;
}

.aiparse__copy--day .aiparse__title {
	color: var(--color-dark);
	font-weight: 700;
}

.aiparse__copy--day .aiparse__en {
	color: var(--color-dark);
}

.aiparse__copy--day .aiparse__hr {
	background: linear-gradient(
		to right,
		var(--color-dark) 0%,
		rgba(29, 29, 31, 0) 100%
	);
}

/* 夜コピー：白 + Medium */
.aiparse__copy--night .aiparse__title {
	color: var(--color-white);
	font-weight: 500;
}

.aiparse__copy--night .aiparse__en {
	color: var(--color-white);
	letter-spacing: 0.01em; /* Figma 夜: 0.4/40 = 0.01em */
}

.aiparse__copy--night .aiparse__hr {
	background: linear-gradient(
		to right,
		var(--color-white) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

/* ---- 演出有効時（JS）：ピン留めしてクロスフェード ---- */
html.js-aiparse .aiparse {
	height: max(calc(var(--vh) * 220), calc(var(--min-vh) * 2.2));
}

html.js-aiparse .aiparse__pin {
	position: sticky;
	top: 0;
	height: max(calc(var(--vh) * 100), var(--min-vh));
	overflow: hidden;
}

html.js-aiparse .aiparse__scene {
	position: absolute;
	inset: 0;
	min-height: 0;
	height: 100%;
	will-change: opacity;
}

html.js-aiparse .aiparse__scene--day {
	opacity: 1;
}

html.js-aiparse .aiparse__scene--night,
html.js-aiparse .aiparse__copy--night {
	opacity: 0;
}