@charset "UTF-8";
/* ============================================================
   旧デザインから継続利用するコンポーネントのスタイル。
   旧 css/main.css から該当ブロックをそのまま抽出したもの。
   - FLOW（.flow__* アコーディオン）
   - CONTACT（.contact__* フォーム・結果バナー）
   - STORE（.stores* 店舗カルーセル）
   - サンクスページ（.thanks* / body.is-thanks）
   - 無料相談モーダル（.freemenu-modal*）
   style.css（新デザイン）の後に enqueue される（後勝ち）。
   ============================================================ */

/* ---- 旧トークン（継続ブロックが参照する分のみ。新デザインの列幅 37.5rem に再基準化） ---- */
:root {
	--color-dark: #1d1d1f;
	--color-white: #ffffff;
	--color-light: #f5f5f7;
	--color-silver: #c0c0c0;
	--color-gray: #6e6e73;
	--color-gray-2: #575757;
	--color-accent: #d2832f;
	--min-vh: 720px;
	/* 1vh 相当の「凍結」値。header.php のインライン script が実測 px で上書きする */
	--vh: 1vh;
	/* 列幅 = 新デザインの LP 幅（style.css .lp と同値） */
	--lp-max: 37.5rem;
	--col-w: min(100vw, var(--lp-max));
	/* モーダル CLOSE ボタン（画面下端固定）の位置・寸法 */
	--cta-bottom: clamp(24px, 17px + 1vh, 38px);
	--cta-pad-y: calc(var(--col-w) * 0.04);
	--cta-pad-x: calc(var(--col-w) * 0.05);
	--cta-font: calc(var(--col-w) * 0.035);
	--cta-min-w: calc(var(--col-w) * 0.35);
	--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);
	/* --header-h はここでは定義しない：style.css の 4.5rem（新ヘッダー高）を継続ブロックにも適用する */
}

/* cqw（コンテナクエリ単位）の基準。旧 main.css の Layout container 相当 */
.site-main,
.freemenu-modal {
	container-type: inline-size;
	container-name: lp;
}

#wpadminbar {
	display: none;
}

/* =============================================================
   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: left;
	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） */
}

/* =============================================================
   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);
	box-sizing: border-box;
	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;
	/* 1スワイプ＝1枚に固定。Android(Blink) はフリックの勢いで複数枚を飛び越すため
	   「感度が良すぎる」挙動になる。iOS(WebKit) は元から1枚ずつ止まるので変化なし。
	   これはプログラムのスクロールにも効くので、支店タブで離れたカードへ飛ぶときは
	   stores-carousel.js が移動中だけ snap を外している（手前のカードで止まるのを防ぐ）。 */
	scroll-snap-stop: always;
	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; }
}

/* =============================================================
   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 {
	/* モーダル下端が「いま見えている画面の下端」からはみ出している量（はみ出さなければ 0）。
	   下の height と同じ式から 100dvh（＝実際に見えている高さ）を引いて求める。
	   はみ出す原因は2つあり、この1本で両方を吸収する:
	     - URL バー／下部ツールバーの表示（凍結 --vh はツールバー非表示時の高さなので dvh より大きい）
	     - --min-vh(720px) の下限（画面が短い端末では実際の高さより大きく底上げされる）
	   この値を中身の中央寄せ（__inner の max-height）と CLOSE の位置の両方で使うことで、
	   両者が常に同じ「見えている範囲」を基準に配置され、重なりも見切れも起きない。
	   モーダル表示中は JS がスクロールをロックしているので dvh は動かない。 */
	--vh-gap: max(0px, calc(max(calc(var(--vh) * 100), var(--min-vh)) - 100dvh));
	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%;
	/* 画面外にはみ出した分を除いた「実際に見えている範囲」に収める。
	   これで justify-content:center の中央が見える範囲の中央になり、
	   中身が下へずれて CLOSE（同じ --vh-gap 分だけ持ち上がる）と重ならない。
	   ここを 100% のままにすると、中身は画面外を含む中央＝見た目では下寄りになる。 */
	max-height: calc(100% - var(--vh-gap));
	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 を生成する仕様）。
	   そのためモーダル下端が画面外へはみ出していると CLOSE も一緒に押し出される。
	   はみ出し量 --vh-gap を bottom に上乗せして、常に「見えている画面の下端」から
	   var(--cta-bottom) の位置に置く（はみ出しゼロなら floating-cta と完全に同じ位置）。
	   モーダル表示中は JS でスクロールロック中のため dvh は動かず shake は起きない。 */
	position: fixed;
	left: 50%;
	bottom: calc(var(--cta-bottom) + var(--vh-gap));
	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;
}


/* ============================================================
   新デザインとの競合調整
   （style.css の仮スタブ .flow / .contact / .store と旧ルートのすり合わせ）
   ============================================================ */

/* 余白は Figma の注記に統一：セクション上下 50px（5rem）／見出し→本文 25px（2.5rem）。
   旧ルートの cqw 指定（画面幅比）はこの3セクションでは上書きする。 */

/* FLOW: 上下 50px。左右の余白は旧のまま */
.flow {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* 見出し→リストは 25px。.flow__list の margin-top(6.4cqw) とマージン相殺するため、
   相殺後に 25px が残るよう list 側を 0 にする */
.flow .sec-head {
	margin-bottom: 2.5rem;
}

.flow .flow__list {
	margin-top: 0;
}

/* CONTACT: 上下 50px。フォーム本体は左寄せ（見出しは .sec-head 自身が中央寄せ） */
.contact {
	padding-top: 5rem;
	padding-bottom: 5rem;
	text-align: left;
}

.contact .sec-head {
	margin-bottom: 2.5rem;
}

.contact .contact__form {
	margin-top: 0;
}

/* STORE: 背景は新セクション（.store）の色に統一。旧 .stores の暗背景は透過に */
.store .stores {
	background: transparent;
	padding-top: 0;
}

.store .sec-head {
	margin-bottom: 2.5rem;
}

.store .stores-carousel {
	margin-top: 0;
}