/*
 * デザイントークン。色・書体・文字・余白・寸法・角丸・重なり・時間の値はここ以外に書かない。
 * 値は XD（20260924 版）の実測（reference/xd_layers/）。:root が SP（375 基準）、768px 以上で PC（1920 / 1400 基準）の値に差し替える。
 * 部品ごとの実測値（ヘッダー・メニュー・フッター・問い合わせボタン等）もここに集め、部品の CSS は var() だけで書く。
 */
/* plugins: プラグインの CSS（Instagram フィード。inc/assets.php が @import … layer(plugins) で読む）。base の既定には勝ち、layout 以降のテーマの規則には負ける位置に置く */
@layer tokens, base, plugins, layout, components, pages, utilities;

@layer tokens {
	:root {
		/* ---------- 色（トークン名に color / background を含めない） ---------- */
		--c-primary: #1e6d4e;
		--c-primary-hover: color-mix(in srgb, var(--c-primary) 85%, black);
		--c-primary-deep: #003109;
		--c-primary-pale: #e5f5e6;     /* XD: 非住宅の「引き渡し後も、ずっとそばに」の枠（段 C） */
		--c-ink: #000000;
		--c-text: #707070;
		--c-text-menu: #5a5a5a;
		--c-text-sub: #5d5d5d;
		--c-heading: #988c86;
		--c-white: #ffffff;
		--c-bg: #fbfbfb;
		--c-paper: #f7f3ee; /* 紙色の参照値: XD の #ece1d1 30% を #fbfbfb に重ねた色。空のサムネの下地（--c-thumb-empty）に使う。紙の背景そのものは --paper-img を --op-paper で重ねる */
		--c-map-base: #e2dcdc;
		--c-accent: #ef8100;
		--c-accent-yellow: #ffd800;
		--c-line: #06c755;
		--c-line-badge: #00b900;
		--c-overlay-green: rgb(30 109 78 / .8);
		--c-overlay-dark: rgb(0 0 0 / .5);
		--c-rule-white: rgb(255 255 255 / .5);
		--c-focus: var(--c-primary);   /* フォーカスリング。緑の面の上（フッター等）では白に上書きする */
		/* お問い合わせのエラーの文字と枠（設計書 §14-5・新しい色はこれ 1 つ）。--c-accent は白地 2.7:1 で足りないので暗くする（白地 約 5.7:1・--c-bg 地 約 5.5:1）。--c-primary-hover と同じ作り＝生の色値は増やさない */
		--c-error: color-mix(in srgb, var(--c-accent) 65%, black);
		/* 赤（2026-09-28 先方修正指示・新しい色はこれ 1 つ）。現行サイト an-home.jp の実測 rgb(237 28 36)（想いの 7つのこだわりのキャッチ・家づくりのポイントの赤の強調）。41-sub.css の .p-sub-em--red */
		--c-red: #ed1c24;

		/* ---------- 不透明度 ---------- */
		--op-paper: .3; /* XD: 紙テクスチャは 30% で重ねる（書き出した画像は 100%） */
		--op-hand: .1;                 /* XD: 手書き英字 不透明度 0.1 */
		--op-sub-en: .4;               /* 設計書 §3-3: 下層の英字 40% */
		--op-feature-en: .3;           /* 設計書 §3-3: 特集の英字 30% */
		--op-cat-en: .35;              /* 設計書 §3-3: Categorys 35% */

		/* ---------- 紙テクスチャ（Concept・Instagram・エリア枠・メガメニュー。PC は 1920 版に差し替える） ---------- */
		--paper-img: url(../img/common/texture-paper-960.webp);
		--paper-size: cover;           /* 画像は上下の縁が欠けた 1 枚もので繰り返せない（継ぎ目の線が出る）ので、枠いっぱいに 1 枚を広げる。1920×1078 前後の PC の枠では縮尺 1 のまま */

		/* ---------- 書体 ---------- */
		--font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
		--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "BIZ UDPMincho", serif;
		--font-en: "century-old-style-std", "Century Old Style Std", Georgia, "Times New Roman", serif; /* Adobe Fonts（キット igu2tqp）。未読込の間はフォールバック */
		--font-display: "Bebas Neue", "Bebas", Impact, sans-serif;
		--font-viewmore: "fot-tsukuaoldmin-pr6n", var(--font-serif); /* FOT-筑紫Aオールド明朝 Pr6N L（Adobe Fonts・weight 300）。未読込の間は明朝で代替 */

		/* ---------- 文字サイズ（XD の px ÷ 16）SP ---------- */
		--fs-hero: 2.1875rem;          /* 35 */
		--fs-hero-sub: 1.1875rem;      /* 19 */
		--fs-h2: 2rem;                 /* 32 */
		--fs-h2-insta: 1.8125rem;      /* 29 */
		--fs-hand: 5rem;               /* 80（手書き英字 SVG の 1em） */
		--fs-lead: 1rem;               /* 16 */
		--fs-body: 1rem;               /* 16 */
		--fs-card-title: .9375rem;     /* 15（Blog） */
		--fs-card-works-title: .875rem; /* 14（Works） */
		--fs-card-date: .75rem;        /* 12 */
		--fs-tag: .75rem;              /* 12 */
		--fs-view-more: 1rem;          /* 16 */
		--fs-en-label: 1.75rem;        /* 28 */
		--fs-en-label-sub: 1rem;       /* 16 */
		--fs-menu: 1rem;               /* 16 */
		--fs-concept-title: 1.125rem;  /* 18 */
		--fs-concept-text: .875rem;    /* 14 */
		--fs-about-label: .75rem;      /* 12 */
		--fs-area-title: 1.25rem;      /* 20 */
		--fs-area-text: .9375rem;      /* 15 */
		--fs-cta-chip: .875rem;        /* 14 */
		--fs-tel: 2rem;                /* 32 */
		--fs-cta-mail: 1.375rem;       /* 22 */
		--fs-hours: .625rem;           /* XD 8 → 10（可読性・設計書 §0-13） */
		--fs-news-label: 1.125rem;     /* 18 */
		--fs-news-title: .875rem;      /* 14 */
		--fs-copyright: .625rem;       /* 10 */
		--fs-sub-title: 2rem;          /* 32 */
		--fs-sub-en: 1rem;             /* 16 */
		--fs-crumb: .625rem;           /* 10 */
		--fs-sub-h2: 1.25rem;          /* 20 */
		--fs-sub-lead: 1rem;           /* 16 */
		--fs-num: 2.375rem;            /* 38 */
		--fs-feature-en: 2.8125rem;    /* 45 */
		--fs-feature-h3: 1.75rem;      /* 28 */
		--fs-feature-sub: 1.125rem;    /* 18 */
		--fs-band-small: .625rem;      /* 10 */
		--fs-band-title: 1.3125rem;    /* 21 */
		--fs-band-btn: .875rem;        /* 14 */
		--fs-blog-h2: 1.5rem;          /* 24 */
		--fs-sub-tag: .75rem;          /* 12 */
		--fs-sub-card-title: 1rem;     /* 16 */
		--fs-more: .875rem;            /* 14 */
		--fs-cat-en: 1rem;             /* 16 */
		--fs-cat-group: .875rem;       /* 14 */
		--fs-cat-item: .9375rem;       /* 15 */

		/* ---------- 行送り（XD の行送り ÷ 文字サイズ）SP ---------- */
		--lh-none: 1;
		--lh-tight: 1.2;               /* XD の文字枠（文字サイズ × 1.2）と同じ高さ。1 行の小さな文字 */
		--lh-heading: 1.3;             /* XD で行送り指定の無い見出し・英字ラベル */
		--lh-lead: 1.75;               /* 16 / 28 */
		--lh-body: 1.875;              /* 16 / 30 */
		--lh-card-title: calc(23 / 15);
		--lh-concept-text: 1.5;        /* 14 / 21 */
		--lh-area-text: calc(28 / 15);
		--lh-sub-h2: 1.5;
		--lh-sub-lead: 2;              /* 16 / 32 */
		--lh-feature-sub: 1.5;
		--lh-sub-card-title: 1.75;     /* 16 / 28 */
		--lh-menu: calc(31 / 16);      /* XD: SP メニューの項目の間隔 31 */
		--lh-menu-child: calc(28 / 16); /* XD: 注文住宅 → スマートハウス 28 */

		/* ---------- 字間 ---------- */
		--ls-none: 0;
		--ls-base: .05em;
		--ls-wide: .15em;

		/* ---------- 余白スケール（4px 基準） ---------- */
		--sp-1: 4px;
		--sp-2: 8px;
		--sp-3: 12px;
		--sp-4: 16px;
		--sp-5: 20px;
		--sp-6: 24px;
		--sp-8: 32px;
		--sp-10: 40px;
		--sp-12: 48px;
		--sp-15: 60px;
		--sp-20: 80px;
		--sp-25: 100px;
		--sp-30: 120px;
		--sp-40: 160px;

		/* ---------- 幅 ---------- */
		--w-content: 1200px;           /* TOP コンテナ */
		--w-sub: 1000px;               /* 下層コンテナ */
		--w-main: 710px;               /* 下層本文 */
		--w-side: 250px;
		--gap-side: 40px;
		--gutter-sp: 20px;
		--gutter-pc: 40px;
		--gutter: var(--gutter-sp);

		/* ---------- 角丸 ---------- */
		--r-xs: 3px;
		--r-sm: 5px;
		--r-md: 10px;
		--r-lg: 20px;
		--r-xl: 30px;
		--r-feature: 50px;
		--r-pill: 999px;
		--r-card-img: var(--r-sm);     /* TOP のカード画像（SP 5 / PC 10） */

		/* ---------- 罫線・重なり・動き ---------- */
		--bw: 1px;
		--bw-icon: 2px;
		--underline-offset: .2em;      /* ホバー下線の位置（XD に指定なし。サイトマップ・カード・パンくずで共通） */
		--z-behind: -1;
		--z-raise: 1;
		--z-header: 100;
		--z-menu: 200;
		--ease: cubic-bezier(.22, .61, .36, 1);
		--dur: .4s;
		--dur-fast: .2s;
		--dur-fade: 1s;                /* ヒーローのクロスフェード */

		/* ---------- ヘッダー（XD: SP ロゴ y=10〜46・三本線 x=323〜355 / y=14・28・43） ---------- */
		--h-header: 60px;              /* 設計書 §0-4: SP 60（XD: 下層ヒーローが y=60 から） */
		--header-actions-gap: 39px;    /* XD: LINE の右端 1792 → 三本線 1831 */
		--logo-w: 246px;               /* 設計書 §7-1: SP ロゴ 246×36 */
		--hamburger-w: 32px;           /* XD: 三本線 x=323〜355 */
		--hamburger-h: 31px;           /* 線 2px × 3・中心の間隔 14.5 */
		--close-size: 23px;            /* XD: × の外枠 23×23（線の長さ ≒ 三本線の幅） */
		--sns-instagram: 63px;         /* XD: Instagram の画像枠 63×63（PC x=1673〜1736・SP y=906〜969）。押せる範囲 */
		--sns-instagram-glyph: 40px;   /* XD: グリフ 40.28（LINE と同じ大きさ）。枠 63 の中央に置く */
		--sns-line: 40px;              /* 設計書 §7-1: LINE 40（PC x=1752〜1792） */
		/* 問い合わせ（メール）のタイル。Instagram の左・PC だけ（2026-09-28 先方修正指示・XD に無い）。LINE のアイコンと同じ角丸の正方形 */
		--sns-mail: var(--sns-line);
		--sns-mail-glyph: calc(var(--sns-mail) * .6); /* 封筒（icon-mail 39×31）の幅はタイルの 6 割 */
		--sns-mail-radius: calc(var(--sns-mail) * 9.08 / 40.28); /* LINE のアイコン（icon-line.svg）の角丸 9.08 ÷ 辺 40.28 と同じ比 */

		/*
		 * ---------- グローバルメニュー（PC のヘッダー行。2026-09-28 先方修正指示・XD に無い）----------
		 * 見た目はメガメニューのリンク列に合わせる（serif 500・--c-text-menu・先頭の「-」・子項目の字下げ・行送り --lh-menu / --lh-menu-child）。
		 * 出す幅は 1200 以上（30-header.css の @media に直書き。CSS の変数はメディアクエリに使えない）。
		 * 根拠（staging の実測 2026-09-28）: 1 行に収まる最小幅 ＝ 左右の余白 40 × 2 ＋ ロゴ 320 ＋ 間 16 ＋ メニュー 437 ＋ 間 16 ＋ 右のアイコン群 263 ＝ 1132。1200 ではロゴ → メニュー・メニュー → アイコンがそれぞれ 50 空く（1199 以下は三本線だけ）
		 */
		--gnav-gap: var(--sp-10);      /* 40: ボタンの間（先方の図の 3 つの枠の間 ≒ 40） */
		--gnav-icon-gap: var(--sp-2);  /* 8: 文字 → 山形 */
		--gnav-chevron: 5px;           /* 山形（icon-chevron 4×8）を 5×10 にして下向きに置く */
		--gnav-panel-px: var(--sp-6);  /* 24: 開いたリストの左右 */
		--gnav-panel-py: var(--sp-4);  /* 16: 開いたリストの上下 */
		--gnav-shadow: 0 var(--sp-1) var(--sp-4) color-mix(in srgb, var(--c-ink) 12%, transparent); /* 開いたリストの薄い影 1 つ（白い面を写真・白地から浮かせる） */
		--gnav-glow: var(--sub-feature-title-shadow); /* TOP（写真の上）だけ、ボタンの文字に白いにじみ。XD の下層「こだわり」h3 の白 X0 Y0 B4 と同じ作り（30-header.css で 3 つ重ねる） */
		--fs-gnav: 1rem;               /* 16: ボタン */
		--fs-gnav-link: .9375rem;      /* 15: 開いたリストのリンク */

		/* ---------- メガメニュー・フッターのリンク列（XD: mega menu-SP / top – 2 のフッター） ---------- */
		--menu-pt: 42px;               /* ヘッダー行の下端 60 → LINE UP の行 102 */
		--menu-pb: 45px;               /* 電話ボタンの下端 1166 → 1211 */
		--menu-sns-gap: 28px;          /* XD: 会社概要の行の下端 878 → Instagram 906（SNS の行は SP だけ） */
		--menu-cta-gap: var(--sp-3);   /* XD: Instagram の下端 969 → メールのボタン 982（PC は会社概要 → ボタン） */
		--menu-group-gap: var(--sp-8); /* 群の最後の項目 → 次の英字ラベル（XD 34） */
		--sitemap-head-gap: var(--sp-4); /* 英字ラベルの行 → 最初の項目の行（XD 15） */
		--sitemap-parent-w: 100%;      /* 「新築 ＋」の行の幅（＋ を右端に置く） */
		--menu-item-gap: 0px;
		--menu-child-margin: 2px;      /* XD: 新築 → 注文住宅 31・スマートハウス → リノベーション 31 */
		--menu-indent: 25px;           /* XD: 子項目 x=45 − 親 x=20 */
		--plus-w: 9px;                 /* XD: ＋ 9×10 */
		--sitemap-dash-w: 1.05em;      /* XD の描画で実測: 「-」の左端 380 → 文字 398〜399（18px の約 1.05 字・SP も同じ比率）。折り返した行の字下げにも使う */

		/* ---------- フッター（XD: top – 2 の y=6105〜） ---------- */
		--footer-pt: 43px;             /* 設計書 §7-3: フッター上端（XD y=6105）→ 縦ロゴ 43 */
		--footer-logo-w: 113px;        /* 設計書 §7-3: 縦ロゴ 113×133 */
		--footer-logo-gap: 49px;       /* ロゴの下端 6281 → LINE UP の行 6330 */
		--footer-copy-gap: 49px;       /* 会社概要の行の下端 7106 → Copyright の行 7155 */

		/* ---------- 問い合わせボタン（XD: SP 335×86・PC 573×145） ---------- */
		--cta-h: 86px;
		--cta-gap: var(--sp-3);        /* XD: SP 縦の間 12 */
		--cta-chip-w: 119px;           /* XD: チップ 119×19（mega menu-SP 長方形 76）。文字サイズ設定が大きいときは広がる（最小値として使う） */
		--cta-chip-h: 19px;            /* 同上 */
		--cta-chip-top: var(--sp-2);   /* XD: 8〜9 */
		--cta-icon-gap: var(--sp-2);   /* XD: アイコン → 文字 8 */
		--cta-tel-icon-w: 33px;        /* フリーダイヤル 33×21 */
		--cta-mail-icon-w: 28px;       /* 封筒 28×22 */

		/* ---------- 部品（設計書 §7-5） ---------- */
		--btn-w: 176px;                /* VIEW MORE 176×50 */
		--btn-h: 50px;
		--tag-h: 21px;                 /* XD: SP Blog のタグ 102×21 */
		--tag-min-w: 71px;             /* XD: SP Works のタグ 71×24 */
		--tag-px: var(--sp-2);         /* 段 A の値。XD: SP Blog「リノベーション」102×21 は枠の外端から文字まで 7 だが、palt で仮名が詰まり文字が XD（87）より約 9 狭いので、7 − 枠線 1 にすると 92 まで縮む。8 で 96 */
		--pill-h: 27px;                /* 設計書 §7-5: 下層ピル SP 高さ 27 */
		--c-thumb-empty: var(--c-paper); /* アイキャッチの無い記事の空の枠・画像の読み込み中の下地（カード 3 種共通） */
		/* 画像の縦横比（aspect-ratio と、カルーセルの矢印の高さの計算で共用） */
		--card-blog-img-w: 371;        /* XD: Blog の画像 371×261（SP 180×127） */
		--card-blog-img-h: 261;
		/* 手書き英字の文字枠の上端 → h2 の行の上端。XD: PC 1105 → 1226 = 121（文字 150 に対して）。SP は 80 × 121 / 150 = 64.5 ≒ XD 64（726 → 790）。
		   --fs-hand（rem）に連動させ、PC / SP と利用者の文字サイズ設定のどれでも手書き英字との重なりを保つ */
		--head-title-offset: calc(var(--fs-hand) * 121 / 150);
		--head-title-sub: .625em;      /* h2 の後ろに小さく続ける語（施工事例の「・お客様の声」・2026-09-28 先方修正指示）。先方の図で「施工事例」の約 0.64 倍 → PC 48 → 30・SP 32 → 20 */
		--head-lead-gap: 20px;         /* h2 → 説明文（縦に置くとき）。XD SP の実測 17.5〜22.5（Blog・Works 22.5 / Concept 19.5 / About・Contact 17.5）の中間（段 B）。768〜1199 は PC ブロックで上書き */
		--card-date-gap: 10px;          /* XD SP: 画像の下端 1079 → 日付 1089（段 B で 8 → 10。タイトルが XD より 4.4 上がるため） */
		--card-tag-gap: var(--sp-1);
		--card-works-title-gap: 0px;
		--card-works-tag-gap: var(--sp-1);
		--arrow-sm: 24px;              /* XD: SP Blog のカルーセル矢印 楕円形 24×24 */
		--arrow-lg: 38px;              /* 設計書 §8: SP Concept の矢印 丸 38（PC 77） */
		--chevron-sm: 4px;             /* XD: 山形 4×8（VIEW MORE・SP Blog の矢印） */
		--chevron-lg: 7px;             /* XD: 山形 7×14（SP Concept の矢印・PC 14×29） */
		--chevron-stroke: 1.5px;       /* XD: SP Blog の山形 4×9・線 1.5 */
		--chevron-stroke-lg: 2.5px;    /* XD: SP Concept の山形 7×14・線 2.5 */

		/*
		 * ---------- TOP（段 B・設計書 §8）----------
		 * XD: SP は top – 2（375）、PC は top（1920）の実測。y は XD の座標。縦の余白はセクションごとに違う（均一にしない）。
		 * 「見出しの下端」は c-section-head の箱の下端（SP: 手書き英字の上端 + 64.5 + h2 の行 41.6 + 説明文との間 + 説明文の行数 × 28 / PC: + 199）。
		 */
		--c-line-hover: color-mix(in srgb, var(--c-line) 85%, black); /* LINE ボタンの hover（--c-primary-hover と同じ作り） */

		/* セクション見出しの h2 → 説明文（縦に置くとき）は --head-lead-gap。Instagram だけ詰める */
		--top-insta-lead-gap: var(--sp-2); /* XD SP: Instagram の h2 の行の下端 4837 → 説明文の行 4845（手書き英字の無い見出しは詰まっている） */
		/* 説明文の左端（1200 以上だけ使う。コンテナ左端 360 からの距離＝XD の x − 360）。Blog は段 A の既定 475 */
		--top-works-lead-x: 472px;     /* XD: 832 */
		--top-concept-lead-x: 513px;   /* XD: 873 */
		--top-about-lead-x: 479px;     /* XD: 839 */
		--top-insta-lead-x: 356px;     /* XD: 716 */
		--top-contact-lead-x: 412px;   /* XD: 772 */

		/* ヒーロー（XD SP: 見出し 35px 2 行の枠 y=281〜365・副題の枠 y=388〜411） */
		--top-hero-pt: 39px;           /* 文字の塊の中心 346 − 画面の中心 326.5 = 19.5。中央寄せの箱を「上の余白 = ずらす量の 2 倍」で下げる */
		--top-hero-sub-gap: 23px;      /* 見出しの枠の下端 365 → 副題 388 */
		--top-hero-shadow: 0 3px 5px var(--c-ink);   /* XD の文字のドロップシャドウ（SP: X0 Y3 B5・黒 100%）。2026-09-27 追加（抽出ツールが文字の効果を落としていた） */
		/*
		 * 1 行に収める縮小式の分母（em 数）。hero.php / line-banner.php の文言と連動する（文言を変えたらここも直す）。
		 * 1.15 = 1 字 + 字間 --ls-wide（.15em）。+ .15 = 見た目の中心を揃えるために左に足した字間（40-top.css の padding-inline-start）
		 */
		--top-hero-title-em: calc(8 * 1.15 + .15);  /* 「価値が残る家を、」8 字 */
		--top-hero-sub-em: calc(14 * 1.15 + .15);   /* 「本物の素材と技術で価値を守る」14 字 */
		--top-line-title-em: 12;                    /* 「住宅購入で損しないために」12 字（字間 0） */

		/* News バー（XD SP: 帯 y=653〜700・News x=20・記事名 x=75） */
		--top-news-h: 47px;
		--top-news-title-x: 55px;      /* 記事名の左端 75 − 左余白 20 */
		--top-news-title-dy: 0px;      /* 記事名を帯の中央から下げる量。XD SP: ベースライン 681（中央揃えのままで 682.4） */
		--top-news-more-gap: 14px;     /* PC だけ: VIEW MORE の右端 1839 → 矢印 1853 */
		--top-news-arrow-w: 27px;      /* PC だけ: 長い矢印 27×5 */

		/* Blog（XD SP: 手書き y=726・カード y=952 180×127 間 13・VIEW MORE y=1187〜1237） */
		--top-blog-pt: 26px;           /* News の下端 700 → 手書き 726 */
		--top-blog-list-gap: 44px;     /* 見出しの下端 908 → カード 952 */
		--top-blog-card-w: 180px;      /* カルーセルのカード幅 */
		--top-blog-card-gap: 13px;     /* カードの間（PC は列の間） */
		--top-blog-more-gap: 36px;     /* タグの下端 1151 → VIEW MORE 1187 */
		--top-blog-pb: 37px;           /* VIEW MORE の下端 1237 → Works の手書き 1311 の 74 を Blog の下 37 / Works の上 37 に分ける */

		/* Works（XD SP: 手書き y=1311・2 列 161×106 間 13・行の間隔 178・VIEW MORE y=1910〜1960） */
		--top-works-pt: 37px;
		--top-works-list-gap: 30px;    /* 見出しの下端 1493 → カード 1523 */
		--top-works-col-gap: 13px;
		--top-works-row-gap: 20px;     /* 1 行目のタグの下端 1681 → 2 行目 1701 */
		--top-works-tag-h: 24px;       /* SP の Works のタグだけ 71×24（段 A の c-tag は SP 21） */
		--top-works-more-gap: 51px;    /* タグの下端 1859 → VIEW MORE 1910 */
		--top-works-pb: 81px;          /* VIEW MORE の下端 1960 → LINE バナー 2041 */

		/* LINE バナー（XD SP: 画像 375×198 y=2041 → 緑 375×181 y=2239〜2420。中は中央揃え・文字の枠＝文字サイズ × 1.2） */
		--top-line-pt: 0px;
		--top-line-pb: 0px;            /* 緑の下端 2420 = Concept の紙の上端 */
		--top-line-body-pt: 14px;      /* 緑の上端 2239 → ピル 2253 */
		--top-line-body-pb: 7px;       /* 注記の下端 2413 → 緑の下端 2420 */
		--top-line-pill-w: 177px;      /* ピル 177×22 r30 */
		--top-line-pill-h: 22px;
		--top-line-title-gap: 10px;    /* ピルの下端 2275 → 見出し 2285 */
		--top-line-lead-gap: 4px;      /* 見出しの下端 2316 → 黄の文 2320 */
		--top-line-sub-gap: 7px;       /* 黄の文の下端 2339 → ＼アニメ動画…／ 2346 */
		--top-line-btn-gap: 3px;       /* ＼…／ の下端 2358 → ボタン 2361 */
		--top-line-btn-w: 273px;       /* ボタン 273×35 r30 */
		--top-line-btn-h: 35px;
		--top-line-arrow-w: 12px;      /* ボタンの右矢印 12×7 */
		--top-line-arrow-gap: 8px;     /* ボタンの文字 → 矢印 */
		--top-line-note-gap: 5px;      /* ボタンの下端 2396 → 友達追加… 2401 */
		--fs-line-pill: .875rem;       /* 14 */
		--fs-line-title: 1.625rem;     /* 26 */
		--fs-line-lead: 1rem;          /* 16 */
		--fs-line-sub: .625rem;        /* 10 */
		--fs-line-button: .875rem;     /* 14 */
		--fs-line-note: .625rem;       /* 10 */
		--top-line-body-w: 100cqi;     /* 緑の面の幅（SP は画面幅いっぱい。cqi の基準は .p-top-line__banner） */

		/* Concept（XD SP: 紙 y=2420〜3128・手書き 2476・カード 239×312 間 20 y=2735・中央のカード x=68〜307） */
		--top-concept-pt: 56px;        /* 紙の上端 2420 → 手書き 2476 */
		--top-concept-list-gap: 49px;  /* 見出しの下端 2686（説明文 3 行）→ カード 2735 */
		--top-concept-card-w: 239px;
		--top-concept-gap: 20px;
		--top-concept-img-w: 435;      /* XD: Concept の画像 435×335（SP 239×184）。aspect-ratio と矢印の高さで共用 */
		--top-concept-img-h: 335;
		--top-concept-title-gap: 24px; /* 画像の下端 2919 → 見出しの行 2943（行送り 24） */
		--top-concept-text-gap: 15px;  /* 見出しの行の下端 2967 → 文の行 2982（行送り 21） */
		--top-concept-card-pb: 23px;   /* 文の行の下端 3024 → カードの下端 3047 */
		--top-concept-pb: 81px;        /* カードの下端 3047 → 紙の下端 3128 */
		--lh-concept-title: calc(24 / 18);

		/* About（XD SP: 手書き y=3166・2 列 162×162 間 11・行の間隔 200・地図 205×224 右にはみ出す） */
		--top-about-pt: 38px;          /* 紙の下端 3128 → 手書き 3166 */
		--top-about-list-gap: 24px;    /* 見出しの下端 3376（説明文 3 行）→ 写真 3400 */
		--top-about-col-gap: 11px;
		--top-about-row-gap: 15px;     /* ラベルの行の下端 3585 → 次の写真 3600 */
		--top-about-label-gap: 8px;    /* 写真の下端 3562 → ラベルの行 3570 */
		--top-about-pb: 0px;           /* 施工対応エリアとの間は --top-area-pt で取る */
		--lh-about-label: calc(15 / 12);
		--top-about-map-w: 205px;      /* 福岡地図 205×224（x=189〜394） */
		--top-about-map-x: -39px;      /* 地図の右端 394 − コンテナの右端 355（画面の右端を 19 越える） */
		--top-about-map-y: -9px;       /* 4 行目のラベルの下端 4185 + 行の間 15 → 地図の上端 4191 */
		--top-about-map-bleed: 320px;  /* PC だけ: 地図の右端 1880 − コンテナの右端 1560 */
		--fs-map-label: .625rem;       /* Fukuoka 10 */

		/* 施工対応エリア（XD SP: 紙の枠 335×336 y=4353〜4689・見出し 20・本文 15 行送り 28 幅 297） */
		--top-area-pt: 153px;          /* 地図の行の上端 4200 → 枠 4353 */
		--top-area-pb: 69px;           /* 枠の下端 4689 → Instagram の紙 4758 */
		--top-area-box-pt: 25px;       /* 枠の上端 4353 → 見出しの行 4378（行送り 40） */
		--top-area-box-pb: 35px;       /* 本文 8 行の下端 4654 → 枠の下端 4689 */
		--top-area-title-gap: 12px;    /* 見出しの行の下端 4418 → 本文の行 4430 */
		--top-area-text-w: none;       /* PC は 981 */
		--lh-area-title: 2;            /* 20 / 40 */

		/* Instagram（XD SP: 紙 y=4758〜5582・h2 29・フィード y=4998・VIEW MORE y=5483） */
		--top-insta-pt: 42px;          /* 紙の上端 4758 → h2 の行 4800 */
		--top-insta-list-gap: 41px;    /* 説明文 4 行の下端 4957 → フィード 4998 */
		--top-insta-col-gap: 2px;      /* XD SP: フィードのスクリーンショット（335×445）のマスの隙間 1〜2 */
		--top-insta-ratio: 3 / 4;      /* XD SP: 1 マス 約 111×148（3 列 × 3 行） */
		--top-insta-radius: 0px;       /* XD SP: 角丸なし */
		--top-insta-more-gap: 40px;    /* フィードの下端 5443 → VIEW MORE 5483 */
		--top-insta-pb: 49px;          /* VIEW MORE の下端 5533 → 紙の下端 5582 */

		/* Contact（XD SP: 手書き y=5620・ボタン y=5826〜6010・フッター 6105） */
		--top-contact-pt: 38px;        /* 紙の下端 5582 → 手書き 5620 */
		--top-contact-list-gap: 24px;  /* 見出しの下端 5802 → メールのボタン 5826 */
		--top-contact-pb: 95px;        /* 電話のボタンの下端 6010 → フッター 6105 */

		/*
		 * ---------- 下層 7 ページ（段 C・設計書 §9）----------
		 * XD: SP は sp（注文住宅 375）、PC は各ページ（1400）の実測。他の 6 ページの SP は注文住宅の SP と同じ値で組む（SP の XD が無い）。
		 * 縦の余白は XD の「前の文字のベースライン → 次の文字のベースライン」から、CSS の行の箱のベースラインの上下の余り
		 * （Noto Sans JP: 行送り / 2 ± .436em・Bebas Neue: 行送り / 2 ± .3em。フォントの ascent / descent 1.16 / .288、.9 / .3 から）を引いた値。
		 */
		--lh-feature-en: calc(90 / 96); /* XD PC: 2 行の英字（Earthquake / resistance）の行送り 90（文字 96） */
		--lh-sub-point: 1.5;           /* XD: 3 点の説明 16 / 24 */
		--lh-sub-caption: 1.5;         /* XD: 非住宅の事例の説明 16 / 24 */

		/* ページヒーロー（XD SP: 写真 y=60〜210・ページ名 32 のベースライン 136・英字 169） */
		--sub-hero-h: 150px;
		--sub-hero-pt: 43px;           /* 写真の上端 → ページ名のベースライン 76 − 行の箱の上の余り 33 */
		--sub-hero-en-gap: 13px;       /* ページ名 → 英字のベースライン 33 − 5 − 14 */
		--sub-crumbs-mt: 13px;         /* 写真の下端 210 → パンくずのベースライン 233（設計書 §9: 下 13） */
		--sub-main-pt: 41px;           /* パンくず 233 → リード見出しのベースライン 299 */
		--sub-pb: 126px;               /* カテゴリボックスの下端 4340 → フッター 4466（PC は XD 無し・同じ値） */

		/* リード（XD SP: 見出し 20 行送り 30・2 行目 329 → 本文 16 行送り 32 の 374・8 行目 598 → 特集の写真 656） */
		--sub-lead-gap: 16px;
		--sub-lead-mb: 49px;

		/* 特集（XD SP: 写真 335×160 r50・番号 38・英字 45・h3 28・副題 18・本文 16 行送り 30） */
		--sub-feature-ratio: 335 / 160;
		--sub-feature-num-y: 1px;      /* 写真の上端 → 番号のベースライン 30〜32 − 30 */
		--sub-feature-en-y: 25px;      /* 写真の下端 → 英字のベースライン 23〜27 */
		--sub-feature-title-mt: 39px;  /* 写真の下端 → h3 のベースライン 67〜71（英字 25 + 44）− 30 */
		--sub-feature-title-mt-plain: 16px; /* 英字の無い特集（スマートハウス）。SP の XD 無し */
		--sub-feature-title-shadow: 0 0 4px var(--c-white); /* XD: h3 の白い縁取り（X0 Y0 B4・白 100%・PC/SP 同じ）。h3 が薄い英字に重なる部分を読ませる。2026-09-27 追加 */
		--sub-feature-sub-gap: 4px;    /* h3 → 副題のベースライン 29〜34 − 6 − 23 */
		--sub-feature-body-gap: 10px;  /* 副題 → 本文のベースライン 39 − 7 − 22 */
		--sub-feature-rule-mt: 20px;   /* 副題と本文の組を区切る罫線（SP の XD 無し） */
		--sub-feature-rule-pt: 16px;
		--sub-feature-gap: 58px;       /* 本文の最終行 → 次の写真 63〜70 − 8 */
		--sub-feature-icon: 28px;      /* スマートハウスの丸いアイコン（PC 36。SP の XD 無し・h3 28 に揃える） */
		--sub-feature-icon-gap: 12px;

		/* 3 点の写真と説明（スマートハウス・リフォーム。SP の XD 無し。3 列） */
		--sub-points-mt: 24px;
		--sub-points-gap: 11px;
		--sub-points-caption-gap: 8px;
		--fs-sub-point: .75rem;        /* 12（PC 16。SP の列幅 104 に 8 字が入る大きさ） */

		/* 不動産への帯（XD SP: 335×97 y=2470・小 10 のベースライン 2493・大 21 の 2519・ピル 134×24 y=2532） */
		--sub-band-mt: 51px;           /* 本文の最終行 2411 → 帯 2470 − 8 */
		--sub-band-pt: 13px;           /* 帯の上端 → 小のベースライン 23 − 10 */
		--sub-band-pb: 11px;           /* ピルの下端 2556 → 帯の下端 2567 */
		--sub-band-pl: 16px;           /* 大の文字が 335 の帯に 1 行で入る余白（XD: 大 x=38〜337） */
		--sub-band-pr: 16px;
		--sub-band-title-gap: 3px;     /* 小 → 大のベースライン 26 − 2 − 22 */
		--sub-band-btn-gap: 10px;      /* 大の行の下端 2522 → ピル 2532 */
		--sub-band-small-em: 23;       /* 「＼ 土地探しから売却まで、建築と一緒に伴走します／」を palt で組んだ幅（実測 22.7em・端数で折れないよう 23）。同じ縮小式の分母 */
		--sub-band-title-em: 13.8;     /* 「不動産のこともお任せください！」15 字を palt で組んだ幅（実測 13.6em・端数で折れないよう 13.8）。狭い帯で 1 行に収める縮小式の分母 */
		--sub-band-btn-w: 134px;
		--sub-band-btn-h: 24px;
		--sub-band-btn-pl: 16px;       /* ピル 121 → 文字 137 */
		--sub-band-btn-pr: 6px;        /* 山形の右端 249 → ピルの右端 255 */
		--sub-band-btn-icon-gap: 10px; /* 文字の右端 235 → 山形 245 */
		--sub-band-chevron: 3.5px;     /* XD: 山形 3.5×7・線 1.5 */
		--sub-band-chevron-stroke: 1.5px;

		/* 木まじめブログ（XD SP: 見出し 24 のベースライン 2663・罫線 y=2650・カード 207×155 間 9・もっと見る y=2991） */
		--sub-blog-mt: 71px;           /* 帯の下端 2567 → 見出しのベースライン 2663 − 25 */
		--sub-blog-list-gap: 35px;     /* 見出し → カードの写真 39 − 4 */
		--sub-blog-more-gap: 29px;     /* タイトルの最終行 2955 → もっと見る 2991 − 7 */
		--sub-blog-card-w: 207px;
		--sub-blog-card-gap: 9px;
		--sub-heading-rule-gap: 20px;  /* 罫線 x=200（XD の見出しは palt 無しで 20〜188。palt で約 8 短くなる分を足す） */
		--sub-more-gap: 25px;          /* 「もっと見る」の右端 → ピル（XD SP 281 → 306・PC 1126 → 1151） */
		--sub-more-w: 49px;            /* XD: ピル 49×28 r16・中に矢印 13×7 */
		--sub-more-h: 28px;
		--sub-more-arrow-w: 13px;

		/* カテゴリボックス（XD SP: 335×1233 y=3107 r30・ロゴ 96×113 y=3144・Categorys 3306・ピル 300×30・項目 48＋罫線 1・LINE バッジ 220×60） */
		--sub-category-mt: 88px;       /* もっと見るの下端 3019 → ボックス 3107。本文の下に置く 1024 未満（768〜1023 を含む）はこの値、左サイドバーの 1024 以上は 0（下の 1024 のブロック） */
		--sub-category-pt: 37px;
		--sub-category-pb: 55px;       /* バッジの下端 4285 → ボックスの下端 4340 */
		--sub-category-px: 15px;       /* ボックス x=20 → ピル 35 */
		--sub-category-logo-w: 96px;   /* 縦ロゴの白（XD: x=139〜236・y=3144〜3257） */
		--sub-category-en-gap: 35px;   /* ロゴの下端 3257 → Categorys のベースライン 3306 − 14 */
		--sub-category-group-gap: 15px; /* Categorys → ピル 3326 */
		--sub-category-pill-h: 30px;
		--sub-category-list-gap: 12px; /* ピルの下端 3356 → 1 行目の上端（ベースライン 3398・罫線 3416 から逆算） */
		--sub-category-row-h: 48px;    /* 罫線の間隔 48〜50（罫線 1 を足して 49） */
		--sub-category-row-pl: 10px;   /* ピル 35 → 文字 45 */
		--sub-category-child-pl: 15px; /* ピル 35 → 「- 注文住宅」50 */
		--sub-category-chevron: 3.4px; /* XD: 山形 3.4×6.7・線 1。右端は罫線の右端の 9 手前 */
		--sub-category-chevron-r: 9px;
		--sub-category-section-gap: 51px; /* 群の最後の罫線 3708 → 次のピル 3759 */
		--sub-category-badge-gap: 30px;   /* 最後の罫線 4196 → バッジ 4225 */

		/* 新築の 2 サービス（XD PC: 写真 320×320 r20＋間 26＋文 364。SP の XD 無し・縦に積む） */
		--sub-service-gap: 48px;
		--sub-service-stack-gap: 16px;  /* 縦に積むとき（本文の列が 600 未満）の写真 → 見出し */
		--sub-service-col-gap: 26px;   /* 写真の右端 810 → 文 836（横並びのとき） */
		--sub-service-title-mt: 2px;   /* 写真の上端 527 → 見出し 32 のベースライン 564 = 37 − 35（横並びのとき） */
		--sub-service-sub-gap: 4px;
		--sub-service-more-mt: 16px;

		/* 非住宅: 鉄骨 2 種・引き渡し後の枠・施工事例 6 枚（SP の XD 無し） */
		--sub-structure-mt: 24px;
		--sub-structure-w: 256px;
		--sub-structure-gap: 20px;
		--sub-structure-title-gap: 8px;
		--sub-structure-text-gap: 4px;
		--sub-care-mt: 40px;
		--sub-care-pt: 20px;
		--sub-care-pb: 20px;
		--sub-care-pl: 20px;
		--sub-care-pr: 20px;
		--sub-care-icon: 22px;         /* XD: 丸 20・線 2（外径 22） */
		--sub-care-icon-gap: 10px;     /* XD: アイコンの右端 542 → 文字 552 */
		--sub-care-body-gap: 12px;
		--sub-works-mt: 60px;
		--sub-works-col-gap: 15px;
		--sub-works-row-gap: 16px;
		--sub-works-caption-gap: 8px;
		--fs-sub-caption: .875rem;     /* 14（PC 16） */

		/* 強調（41-sub.css の .p-sub-em・2026-09-28 先方修正指示）: 本文より大きい強調の段落（家づくりのポイント）。色は --c-primary / --c-red */
		--fs-sub-em-md: 1.0625rem;     /* 17（POINT 3 の緑の太字。現行サイトの実測 SP 16.875・PC 18） */
		--fs-sub-em-lg: 1.125rem;      /* 18（POINT 1 の金利の赤。先方指示「もう少し大きく」＝本文 16 より一段大きく・PC 20） */

		/*
		 * ---------- 一覧・詳細（段 D・設計書 §13-10）----------
		 * XD に無いページ。余白は余白スケール（--sp-*）と下層 7 ページ（段 C）の既存トークンの別名だけ（新しい実測値は無い）。
		 * そのほかは設計書 §13-4・§13-7a の決めた値（ページ送りの丸 40・左右寄せの画像 50%）と、下層のカードの画像の縦横比（XD 実測）。
		 */
		--post-filter-mt: var(--sp-5);            /* 見出し → 絞り込み（§13-3） */
		--post-row-gap: var(--sp-6);              /* 格子・場所ごとの紹介の行の間（ピルの行が増えた分、XD 非住宅の 16 / 20 より広く TOP Works の 20 / 50 の間） */
		--post-grid-gap: var(--sub-works-col-gap); /* ブログの格子の列の間（SP 15 = 施工事例の列の間） */
		--post-pager-mt: var(--sp-10);            /* 格子・行 → ページ送り */
		--post-pager-size: 40px;                  /* 設計書 §13-4: ページ送りの丸の最小の幅と高さ（WCAG 2.5.8 の 24 以上・親指で押せる大きさ） */
		--post-news-py: var(--sp-4);              /* お知らせの行の上下 */
		--post-head-gap: var(--sp-3);             /* 記事の頭の中（日付・ピルの行 → h1 → コンセプト） */
		--post-block-gap: var(--sp-8);            /* 記事の頭 → 写真・アイキャッチ・本文 */
		--post-back-mt: var(--sp-8);              /* 前後の記事 → 一覧へ */
		--post-section-mt: var(--sub-works-mt);   /* 詳細の節の間（非住宅の「施工事例」の節と同じ 60 / 75） */
		/* 記事本文の組版（§13-7a） */
		--post-flow: calc(var(--fs-body) * var(--lh-body)); /* 段落の間＝本文 1 行分（16 × 1.875 = 30） */
		--post-h2-mt: var(--sp-12);               /* h2 の上・hr の上下 */
		--post-h3-mt: var(--sp-8);                /* h3 の上 */
		--post-heading-gap: var(--sp-4);          /* 見出し → 次の要素 */
		--post-list-indent: var(--sp-6);          /* 箇条書きの字下げ */
		--post-align-w: 50%;                      /* 左右寄せの画像の最大幅（本文の列が 600 以上のとき） */
		/* カードの画像の縦横比（aspect-ratio） */
		--card-works-sub-ratio: 340 / 240;        /* XD: 非住宅の施工事例 340×240 */
		--card-blog-sub-ratio: 222 / 167;         /* XD: 下層ブログ PC 222×167・SP 207×155 */

		/*
		 * ---------- 段 F の本文の追加（2026-09-28 先方修正指示）----------
		 * 値は現行サイト an-home.jp の実測（2026-09-28・reference/fix_0928/B/current/current.json）。色は既存のトークンだけ（新しい色は --c-red 1 つ）。
		 * 家づくりのポイントの見出しの帯（42-post.css の .p-post-visit）は画面ではなく帯の幅（100cqi・列 600 が境）で SP / PC の組み方を切り替えるので、両方の値を :root に置く（-wide が列 600 以上）
		 */
		--post-rule-gap: 30px;                    /* 区切り線の上下（想いの 7つのこだわり。現行: 各こだわりの下に線・線の上下 30） */
		--post-map-ratio: 4 / 3;                  /* 会社概要の地図の縦横比（現行 SP 338×250。PC は 750×450 ＝ 5 / 3） */
		--post-visit-py: var(--sp-4);             /* 16: 白い面の上下（現行 SP 帯の幅の 5% ＝ 16.9） */
		--post-visit-py-wide: 30px;               /* 同・列 600 以上（現行 PC 30） */
		--post-visit-panel-w: 500px;              /* 列 600 以上の白い面の幅（現行 PC 500） */
		--post-visit-panel-mx: 10%;               /* 列 600 未満の白い面の左右（現行 SP 帯の幅の 10%） */
		--post-visit-panel-p: 10px;               /* 白い面の内側（現行 PC・SP 10） */
		--post-visit-panel: color-mix(in srgb, var(--c-white) 83%, transparent); /* 白い面（現行 #ffffffd4）。--c-primary-hover と同じ作り＝生の色値は増やさない */
		--post-visit-person-w: min(100px, 100cqi * 68 / 338); /* 男女のイラストの幅（現行 PC 100・SP は帯 338 に 68） */
		--post-visit-person-x: 5%;                /* イラストの左右（現行 SP 帯の幅の 5%） */
		--post-visit-person-x-wide: 30px;         /* 同・列 600 以上（現行 PC 30） */
		--post-visit-person-overflow: 20px;       /* イラストが帯の下にはみ出す量（現行 PC・SP 20） */
		--lh-post-visit: 1.8;                     /* 帯の中の行送り（現行 1.8em） */
		--fs-post-visit-lead: .75rem;             /* 12: 前置きの 2 文（現行 SP 9 は 10 未満になるので 12・設計書 §0-13。緑の帯の中） */
		--fs-post-visit-lead-wide: .8125rem;      /* 13: 同・列 600 以上（現行 PC 13。白い面の中） */
		--fs-post-visit-big: min(2.9375rem, 100cqi * 30 / 338); /* 「構造見学会」（現行 PC 47・SP は帯 338 に 30） */
		--fs-post-visit-sub: min(1.875rem, 100cqi * 15 / 338);  /* 「に行きませんか？」（現行 PC 30・SP は帯 338 に 15） */

		/*
		 * ---------- お問い合わせ（段 E・設計書 §14-5）----------
		 * XD に無い画面。余白は余白スケール（--sp-*）と既存トークンの別名だけ（新しい実測値は無い）。本文の列は PC 710 / SP 335。
		 * ラベル列の幅と横並びの間は、本文の列が 600 以上（@container）のときだけ使う。SP の画面でも列が 600 を超える幅（640〜767）があるので PC と同じ値を :root に置く
		 */
		--form-label-w: calc(var(--sp-40) + var(--sp-10)); /* 200: 最長のラベル「プライバシーポリシー」＋間 8 ＋必須バッジが約 199（実測）で 1 行に入る */
		--form-col-gap: var(--sp-6);              /* ラベル → 入力欄（横並び） */
		--form-label-gap: var(--sp-2);            /* ラベル → 入力欄（縦） */
		--form-row-py: var(--sp-4);               /* 行の上下（--post-news-py と同じ値） */
		--form-input-h: var(--sp-12);             /* 48: 入力欄・チェックの行・ラベルの最小の高さ（押せる 44 以上） */
		--form-input-px: var(--sp-3);             /* 入力欄の余白（記事のパスワード欄と同じ） */
		--form-input-py: var(--sp-3);
		--form-border: var(--c-text);             /* 入力欄の枠（白地 4.9:1） */
		--form-placeholder: var(--c-text);        /* placeholder（入力した文字の --c-ink と見分ける灰） */
		--form-textarea-rows: 6;                  /* お問い合わせ内容の行数（PC 8） */
		--form-textarea-h: calc(var(--fs-body) * var(--lh-lead) * var(--form-textarea-rows) + var(--form-input-py) * 2 + var(--bw) * 2);
		--form-check-size: var(--sp-5);           /* 20: 同意のチェックボックス */
		--form-note-gap: var(--sp-2);             /* 注記・エラー・入力欄の間 */
		--form-block-gap: var(--sp-8);            /* 手順 → 見出し（--post-block-gap と同じ値） */
		--form-actions-mt: var(--sp-10);          /* 行の一覧 → ボタン（Turnstile があるときはその上） */
		--form-actions-gap: var(--sp-6);          /* ボタン同士（確認画面の「この内容で送信する」と「入力画面に戻る」） */
		--form-button-w: 100%;                    /* 和文ボタンの幅（PC 280） */
		--form-button-w-row: calc(var(--sp-40) + var(--sp-30)); /* 280: ボタンを横に並べるとき（本文の列 600 以上） */
		--form-step-w: var(--sp-15);              /* 手順のピルの最小の幅（SP 60 × 3 ＋（線 12 ＋間 16）× 2 ＝ 236 ≤ 列 280） */
		--form-step-line: var(--sp-3);            /* 手順のピルをつなぐ線の長さ */
		--form-section-mt: var(--post-section-mt); /* 完了画面の電話の節（詳細の節の間と同じ 60 / 75） */
	}

	@media (min-width: 768px) {
		:root {
			/* 文字サイズ PC */
			--fs-hero: 4.6875rem;          /* 75 */
			--fs-hero-sub: 2.375rem;       /* 38 */
			--fs-h2: 3rem;                 /* 48（先方修正 2026-09-27: XD 60 → 48） */
			--fs-h2-insta: 3rem;           /* 48（先方修正 2026-09-27: XD 60 → 48。他のセクション見出しと揃える） */
			--fs-hand: 9.375rem;           /* 150 */
			--fs-lead: 1.25rem;            /* 20 */
			--fs-card-title: 1.25rem;      /* 20 */
			--fs-card-works-title: 1.25rem; /* 20 */
			--fs-card-date: 1rem;          /* 16 */
			--fs-tag: .9375rem;            /* 15 */
			--fs-view-more: 1.125rem;      /* 18 */
			--fs-en-label: 2.5rem;         /* 40 */
			--fs-en-label-sub: 1.25rem;    /* 20 */
			--fs-menu: 1.125rem;           /* 18 */
			--fs-concept-title: clamp(1.125rem, var(--top-concept-card-w) * 31 / 435, 1.9375rem); /* 31。カード幅に比例・下限は SP の 18（先方修正 2026-09-27・下の Concept） */
			--fs-concept-text: clamp(.875rem, var(--top-concept-card-w) * 22 / 435, 1.375rem);    /* 22。同上・下限は SP の 14 */
			--fs-about-label: 1.5rem;      /* 24 */
			--fs-area-title: 1.75rem;      /* 28 */
			--fs-area-text: 1.25rem;       /* 20 */
			--fs-cta-chip: 1.25rem;        /* 20 */
			--fs-tel: clamp(2rem, 48 / 1200 * 100vw, 3rem); /* 48。1200 未満は画面幅に比例して縮める（768 でボタンからはみ出すため）。下限は SP の 32 */
			--fs-cta-mail: clamp(1.375rem, 32 / 1200 * 100vw, 2rem); /* 32。同上。下限は SP の 22 */
			--fs-hours: .875rem;           /* 14 */
			--fs-news-label: 2.375rem;     /* 38 */
			--fs-news-title: 1.25rem;      /* 20 */
			--fs-copyright: .75rem;        /* 12 */
			--fs-sub-title: 2.8125rem;     /* 45 */
			--fs-crumb: .875rem;           /* 14 */
			--fs-sub-h2: 2rem;             /* 32 */
			--fs-sub-lead: 1.25rem;        /* 20 */
			--fs-num: 4.375rem;            /* 70 */
			--fs-feature-en: 6rem;         /* 96 */
			--fs-feature-h3: 2.375rem;     /* 38 */
			--fs-feature-sub: 1.25rem;     /* 20 */
			--fs-band-small: 1.125rem;     /* 18 */
			--fs-band-title: 2.25rem;      /* 36 */
			--fs-band-btn: .9375rem;       /* 15 */
			--fs-blog-h2: 2rem;            /* 32 */
			--fs-sub-tag: .875rem;         /* 14 */
			--fs-sub-card-title: 1.125rem; /* 18 */

			/* 行送り PC */
			--lh-card-title: 1.75;         /* 20 / 35 */
			--lh-concept-text: calc(39 / 22);
			--lh-area-text: 1.75;          /* 20 / 35 */
			--lh-sub-lead: 2.5;            /* 20 / 50 */
			--lh-sub-card-title: calc(28 / 18);
			--lh-menu: calc(40 / 18);      /* XD: 行送り 40 */
			--lh-menu-child: 2;            /* XD: 注文住宅 → スマートハウス 36 */

			--gutter: var(--gutter-pc);
			--paper-img: url(../img/common/texture-paper-1920.webp);
			--r-feature: 100px;
			--r-card-img: var(--r-md);

			/* ヘッダー PC（XD: ロゴ 320×47・三本線 x=1831〜1880 / 線の間隔 18.5。高さと縦の位置は下の先方修正の値） */
			--h-header: 80px;              /* 先方修正 2026-09-28: 96 → 80・中身を縦の中央（中心 y=40）に。ベンチマーク wb-minagawa.jp/smart2030/ の実測（高さ 80・ロゴとメニューの中心 y=40）。XD は 96 で中身の中心 y=58 */
			--logo-w: 320px;               /* 設計書 §7-1: ロゴ 320×47 */
			--hamburger-w: 49px;           /* XD: 三本線 x=1831〜1880 */
			--hamburger-h: 39px;           /* 線 2px × 3・中心の間隔 18.5 */
			--close-size: 35px;            /* 線の長さを三本線の幅 49 に揃えた × の外枠（49 ÷ √2） */

			/* メガメニュー・フッター PC（XD: mega menu / top のフッター） */
			/*
			 * 上の余白は XD の 125（ヘッダー行の下端 → LINE UP の行。XD は 96 → 221。ヘッダー行を 80 にした 2026-09-28 以降も間は 125 のまま）。画面の高さが足りないときは最小 40 まで詰めて、問い合わせボタンの下端を画面内に入れる（先方修正 2026-09-27: 1 画面に収める）。
			 * 詰めた値 = 100svh −（ヘッダー行 ＋ サイトマップ ＋ サイトマップ → ボタン ＋ ボタン ＋ ボタン → 画面の下端）。40 まで詰めても足りない高さ（1366×657 等）はボタンが下にはみ出す（メニューは縦にスクロールできる）
			 */
			--menu-pt: clamp(var(--sp-10), 100svh - (var(--h-header) + var(--menu-sitemap-h) + var(--menu-cta-gap) + var(--menu-cta-h) + var(--menu-fit-mb)), 125px);
			--menu-sitemap-h: 622px;       /* サイトマップの高さ（2026-09-27 の実測 469＝LINE UP の行 221 → 会社概要の行の下端 690。2026-10-12 に ABOUT US へ 3 項目を足して 3 × (行送り 40 ＋ 項目の間 11) ＝ 153 増）。項目を増減したら測り直す */
			--menu-fit-mb: var(--sp-6);    /* 24: 詰めるときに残すボタンの下端 → 画面の下端（先方修正 2026-09-27 の部長レビュー: 0 だと 1440×789 で下端が画面の下端に付いて窮屈） */
			--menu-pb: clamp(var(--menu-fit-mb), 100svh - (var(--h-header) + var(--menu-pt) + var(--menu-sitemap-h) + var(--menu-cta-gap) + var(--menu-cta-h)), 136px); /* XD: ボタンの下端 944 → 1080 ＝ 136。2026-10-12 に ABOUT US の 3 項目でボタンが 19 下がり 1920×1080 で 19px はみ出すようになったので、上の余白と同じく画面の高さに合わせて 24〜136 で詰める（1080 で 117 ＝ ちょうど収まる） */
			--menu-cta-gap: var(--sp-10);  /* 40（先方修正 2026-09-27: XD 108 → 40）会社概要の行の下端 → ボタン */
			--sitemap-head-gap: var(--sp-5); /* XD 21 */
			--sitemap-parent-w: 336px;     /* XD: ＋ の右端 716 − 列の左端 380 */
			--menu-item-gap: 11px;         /* XD: 項目の間隔 51 − 行送り 40 */
			--menu-child-margin: var(--sp-2); /* XD: 新築 → 注文住宅 46・スマートハウス → リノベーション 57 */
			--plus-w: 13px;                /* XD: ＋ 13×14 */
			--footer-pt: 67px;             /* 設計書 §7-3: フッター上端（XD y=9131）→ 縦ロゴ 67 */
			--footer-logo-w: 160px;        /* 160（先方修正 2026-09-27: XD 199 → 160＝約 8 割・見出しの 60 → 48 と同じ比）。高さは縦横比のまま */
			--footer-logo-gap: 94px;       /* ロゴの下端 9432 → LINE UP の行 9526 */
			--footer-copy-gap: 113px;      /* 会社概要の行の下端 9996 → Copyright の行 10109 */

			/* 問い合わせボタン PC */
			--cta-h: 145px;
			--cta-gap: 54px;               /* XD: 573 + 54 + 573 = 1200 */
			--cta-chip-w: 168px;           /* XD: チップ 168×27（mega menu 長方形 74） */
			--cta-chip-h: 27px;            /* 同上 */
			--cta-chip-top: var(--sp-4);   /* XD 17 */
			--cta-icon-gap: var(--sp-4);   /* XD: 電話 18・メール 13 */
			--cta-tel-icon-w: 55px;        /* フリーダイヤル 55×36 */
			--cta-mail-icon-w: 39px;       /* 封筒 39×31 */

			/*
			 * メガメニューの問い合わせボタン PC（先方修正 2026-09-27: 少し小さく・1 画面に収める。先方の赤枠は 1 個 約 362×97・間 約 45・会社概要の行の下 約 40）。
			 * 30-header.css の .c-mega-menu__cta が部品のトークン（--cta-*・--fs-cta-chip・--fs-tel・--fs-cta-mail・--fs-hours）をこの値に差し替える（他の場所のボタンは上の XD の値のまま）。
			 * 中身は SP の XD 値（SP のボタン 335×86 が同じ中身を組んでいる）
			 */
			--menu-cta-item-w: 360px;      /* 先方の赤枠 約 362×97 */
			--menu-cta-h: 96px;            /* 同上 */
			--menu-cta-col-gap: var(--sp-12); /* 48: ボタンの間 */
			--menu-cta-w: calc(var(--menu-cta-item-w) * 2 + var(--menu-cta-col-gap)); /* 768: 並びの最大幅（中央に置く） */
			--menu-cta-chip-w: 119px;      /* XD SP: チップ 119×19 */
			--menu-cta-chip-h: 19px;       /* 同上 */
			--menu-cta-chip-top: var(--sp-2); /* XD SP: 8 */
			--menu-cta-icon-gap: var(--sp-2); /* XD SP: アイコン → 文字 8 */
			--menu-cta-tel-icon-w: 33px;   /* XD SP: フリーダイヤル 33×21 */
			--menu-cta-mail-icon-w: 28px;  /* XD SP: 封筒 28×22 */
			--fs-menu-cta-chip: .875rem;   /* 14（XD SP） */
			--fs-menu-cta-tel: 2rem;       /* 32（XD SP） */
			--fs-menu-cta-mail: 1.375rem;  /* 22（XD SP） */
			--fs-menu-cta-hours: .75rem;   /* 12（XD SP 8。SP の 10 は PC では小さすぎるため 12） */

			/* 部品 PC */
			--btn-w: 210px;                /* VIEW MORE 210×60 */
			--btn-h: 60px;
			--tag-h: 31px;                 /* XD: タグ 98×31 */
			--tag-min-w: 98px;             /* XD: 「新築」98×31 */
			--tag-px: 17px;                /* XD: 「規格住宅」枠 x=980・文字 x=998 → 枠の外端から文字まで 18 − 枠線 1（98 = 文字 62 + 18 × 2） */
			--pill-h: 29px;                /* 設計書 §7-5: 下層ピル PC 高さ 29 */
			/* 説明文の左端（コンテナ左端からの距離・1200 以上で使う）。既定は Blog（XD: 説明文 x=835 − コンテナ左 360）。
			   セクションごとに XD の x が違うので、段 B が各セクションで上書きする（例 .p-top-works { --head-lead-x: 472px; } = XD 832 − 360） */
			--head-lead-x: 475px;
			--head-lead-gap: var(--sp-6);  /* 768〜1199（XD に無い幅）は段 A の既定。1200 以上は説明文を h2 の横に置くので使わない */
			--card-date-gap: var(--sp-4);
			--card-tag-gap: var(--sp-2);
			--card-works-title-gap: var(--sp-2);
			--card-works-tag-gap: var(--sp-4);
			--arrow-lg: 77px;              /* XD: Concept の矢印 丸 77 */
			--chevron-lg: 14px;            /* XD: Concept の山形 14×29 */
			--chevron-stroke-lg: 3px;      /* XD: PC Concept の山形 14×29・線 3 */

			/* ---------- TOP PC（XD: top 1920。「見出しの下端」は XD の手書き英字の上端 + 199＝121 + h2 60 の行 78。h2 を 48 にした（先方修正 2026-09-27）後も、見出し → 次の要素の間は XD の値のまま） ---------- */
			--top-insta-lead-gap: var(--sp-6);

			/* ヒーロー（XD: 見出し 75px の枠 y=464〜554・副題の枠 y=572〜618） */
			--top-hero-pt: 82px;           /* 文字の塊の中心 541 − 画面の中心 500 = 41 の 2 倍 */
			--top-hero-sub-gap: 18px;      /* 見出しの下端 554 → 副題 572 */
			--top-hero-shadow: 0 3px 7.5px var(--c-ink); /* XD PC: X0 Y3 B7.5・黒 100% */

			/* News バー（XD: 帯 y=1000〜1080・News x=40・記事名 x=212・矢印の右端 1880） */
			--top-news-h: 80px;
			--top-news-title-x: 172px;     /* 記事名の左端 212 − 左余白 40 */
			--top-news-title-dy: 2px;      /* XD: 記事名のベースライン 1050（layer y 1032.4 + 0.88 × 20）。帯の中央揃えのままだと 1048 */

			/* Blog（XD: 手書き y=1105・カード 371×261 間 44 y=1342・VIEW MORE y=1758〜1818） */
			--top-blog-pt: 25px;           /* News の下端 1080 → 手書き 1105 */
			--top-blog-list-gap: 38px;     /* 見出しの下端 1304 → カード 1342 */
			--top-blog-card-gap: 44px;     /* XD: x=360 / 775 / 1190 */
			--top-blog-more-gap: 46px;     /* タグの下端 1712（段 A のカードの縦の積み）→ VIEW MORE 1758 */
			--top-blog-pb: 47px;           /* VIEW MORE の下端 1818 → 1865（設計書 §8 のセクション境界） */

			/* Works（XD: 手書き y=1920・2 列 580×380 間 40 y=2183 / 2703・VIEW MORE y=3231〜3291） */
			--top-works-pt: 55px;          /* 1865 → 手書き 1920 */
			--top-works-list-gap: 64px;    /* 見出しの下端 2119 → カード 2183 */
			--top-works-col-gap: 40px;
			--top-works-row-gap: 50px;     /* 1 行目のタグの下端 2653 → 2 行目 2703 */
			--top-works-tag-h: var(--tag-h); /* PC は段 A の c-tag と同じ 31 */
			--top-works-more-gap: 58px;    /* タグの下端 3173 → VIEW MORE 3231 */
			--top-works-pb: 34px;          /* VIEW MORE の下端 3291 → 3325（設計書 §8 のセクション境界） */

			/* LINE バナー（XD: 1200×303 y=3425〜3728・画像 572＋緑 628・中は中央揃え） */
			--top-line-pt: 100px;          /* 3325 → バナー 3425 */
			--top-line-pb: 137px;          /* バナーの下端 3728 → Concept の紙 3865 */
			--top-line-body-pt: 24px;      /* 緑の上端 3425 → ピル 3449 */
			--top-line-body-pb: 15px;      /* 注記の下端 3713 → 緑の下端 3728 */
			/* XD: バナー 1200 のうち緑 628。1200 未満は緑の幅に比例して中身を縮める（§2-1 の問い合わせボタンと同じ方式・下限は SP の値）。1200 以上は XD の値そのもの */
			--top-line-body-w: calc(100cqi * 628 / 1200);
			--top-line-pill-w: clamp(177px, var(--top-line-body-w) * 298 / 628, 298px); /* ピル 298×35 r30 */
			--top-line-pill-h: clamp(22px, var(--top-line-body-w) * 35 / 628, 35px);
			--top-line-title-gap: 18px;    /* ピルの下端 3484 → 見出し 3502 */
			--top-line-lead-gap: 2px;      /* 見出しの下端 3557 → 黄の文 3559 */
			--top-line-sub-gap: 9px;       /* 黄の文の下端 3593 → ＼アニメ動画…／ 3602 */
			--top-line-btn-gap: 5px;       /* ＼…／ の下端 3624 → ボタン 3629 */
			--top-line-btn-w: clamp(273px, var(--top-line-body-w) * 456 / 628, 456px); /* ボタン 456×58 r30 */
			--top-line-btn-h: clamp(35px, var(--top-line-body-w) * 58 / 628, 58px);
			--top-line-arrow-w: 20px;      /* ボタンの右矢印 20×12（x=1431〜1451） */
			--top-line-arrow-gap: 14px;    /* ボタンの文字 → 矢印（XD の描画で約 14） */
			--top-line-note-gap: 9px;      /* ボタンの下端 3687 → 友達追加… 3696 */
			--fs-line-pill: clamp(.875rem, var(--top-line-body-w) * 24 / 628, 1.5rem);     /* 24 */
			--fs-line-title: 2.875rem;     /* 46。1200 未満の縮小は 40-top.css の min()（12 字が緑の面に収まる大きさ）に任せる */
			--fs-line-lead: clamp(1rem, var(--top-line-body-w) * 28 / 628, 1.75rem);       /* 28 */
			--fs-line-sub: clamp(.625rem, var(--top-line-body-w) * 18 / 628, 1.125rem);    /* 18 */
			--fs-line-button: clamp(.875rem, var(--top-line-body-w) * 26 / 628, 1.625rem); /* 26 */
			--fs-line-note: clamp(.625rem, var(--top-line-body-w) * 14 / 628, .875rem);    /* 14 */

			/*
			 * Concept（XD: 紙 y=3865〜4943・手書き 3909・カード 435×569 間 62 y=4218・x=-7 / 490 / 988 / 1485）。
			 * 768 以上は XD（1920）の構図を画面幅に比例させ、どの幅でもカードを 4 枚見せる（先方修正 2026-09-27: デスクトップは画面幅にかかわらず常に 4 枚）。
			 * 100cqi は .p-top-concept の幅（スクロールバーを含まない画面幅。40-top.css で container にする）。カードの中身はカード幅に比例させ、下限は SP・上限は PC の XD 値
			 */
			--top-concept-pt: 44px;        /* 紙の上端 3865 → 手書き 3909 */
			--top-concept-list-gap: 110px; /* 見出しの下端 4108 → カード 4218 */
			--top-concept-card-w: calc(100cqi * 435 / 1920); /* XD: カード 435 */
			--top-concept-gap: calc(100cqi * 62 / 1920);     /* XD: 間 62 */
			--top-concept-x2: calc(100cqi * 490 / 1920);     /* XD: 2 枚目のカードの x 490＝基準位置（1 枚目は左で 7/1920 切れ、4 枚目の右端が画面の右端） */
			--top-concept-prev-cx: calc(100cqi * 480.5 / 1920); /* XD: 前への丸の中心（丸 77 の左端 442 + 38.5）。画面の左端から */
			--top-concept-next-cx: calc(100cqi * 489.5 / 1920); /* XD: 次への丸の中心（丸 77 の右端 1469 − 38.5 = 1430.5）。画面の右端から */
			--top-concept-arrow: clamp(38px, var(--top-concept-card-w) * 77 / 435, 77px);            /* 丸 77（SP 38） */
			--top-concept-chevron: clamp(7px, var(--top-concept-card-w) * 14 / 435, 14px);           /* 山形 14×29（SP 7×14）。丸と同じ比で縮める */
			--top-concept-chevron-stroke: clamp(2.5px, var(--top-concept-card-w) * 3 / 435, 3px);    /* 山形の線 3（SP 2.5） */
			--top-concept-title-gap: clamp(24px, var(--top-concept-card-w) * 44 / 435, 44px);        /* 画像の下端 4553 → 見出しの行 4597（行送り 44。SP 24） */
			--top-concept-text-gap: clamp(15px, var(--top-concept-card-w) * 29 / 435, 29px);         /* 見出しの行の下端 4641 → 文の行 4671（行送り 39。SP 15） */
			--top-concept-card-pb: clamp(23px, var(--top-concept-card-w) * 38 / 435, 38px);          /* 文の行の下端 4749 → カードの下端 4787（SP 23） */
			--top-concept-pb: 157px;       /* カードの下端 4786 → 紙の下端 4943 */
			--lh-concept-title: calc(44 / 31);

			/* About（XD: 手書き y=5080・3 列 380×380 間 30・行 5335 / 5830 / 6325・地図 559×611 x=1321 y=6420） */
			--top-about-pt: 137px;         /* Concept の紙の下端 4943 → 手書き 5080 */
			--top-about-list-gap: 56px;    /* 見出しの下端 5279 → 写真 5335 */
			--top-about-col-gap: 30px;
			--top-about-row-gap: 54px;     /* ラベルの行の下端 5776 → 次の写真 5830 */
			--top-about-label-gap: 21px;   /* 写真の下端 5715 → ラベルの行 5736（行送り 40） */
			--lh-about-label: calc(40 / 24);
			--top-about-map-w: 559px;
			--top-about-map-y: 25%;        /* 3 行目の写真の上端 6325 → 地図 6420 = 95 = 列幅 380 の 25%（margin の % は幅が基準） */
			--fs-map-label: 2rem;          /* Fukuoka 32（地図が縮む幅では地図に比例して縮める） */

			/* 施工対応エリア（XD: 紙の枠 1200×291 y=6962〜7253・見出し 28 中央・本文 20 行送り 35 幅 981） */
			--top-area-pt: 196px;          /* About の 3 行目のラベルの行の下端 6766 → 枠 6962 */
			--top-area-pb: 169px;          /* 枠の下端 7253 → Instagram の紙 7422 */
			--top-area-box-pt: 47px;       /* 枠の上端 6962 → 見出しの行 7009（行送り 40） */
			--top-area-box-pb: 66px;       /* 本文 3 行の下端 7187 → 枠の下端 7253 */
			--top-area-title-gap: 33px;    /* 見出しの行の下端 7049 → 本文の行 7082 */
			--top-area-text-w: 981px;
			--lh-area-title: calc(40 / 28);

			/* Instagram（XD: 紙 y=7422〜8375・h2 y=7542・3 列 390×487 間 15 y=7667・VIEW MORE y=8234） */
			--top-insta-pt: 117px;         /* 紙の上端 7422 → h2 の行 7539 */
			--top-insta-list-gap: 50px;    /* h2 の行の下端 7617 → 写真 7667 */
			--top-insta-col-gap: 15px;
			--top-insta-ratio: 390 / 487;  /* XD: 390×487 */
			--top-insta-radius: var(--r-md); /* XD: 角丸 10 */
			/* 複数画像（カルーセル）の印。XD: 21×21 の白の四角 2 つを 4 ずらした外形 25×25（1 枚目 x=704〜729・y=7686〜7711。写真は x=360〜750・y=7667）。SP は XD がスクリーンショットで寸法が無いのでプラグインの既定のまま */
			--top-insta-multi: 25px;
			--top-insta-multi-y: 19px;     /* 写真の上端 7667 → 7686 */
			--top-insta-multi-x: 21px;     /* 印の右端 729 → 写真の右端 750 */
			--top-insta-more-gap: 80px;    /* 写真の下端 8154 → VIEW MORE 8234 */
			--top-insta-pb: 81px;          /* VIEW MORE の下端 8294 → 紙の下端 8375 */

			/* Contact（XD: 手書き y=8476・ボタン y=8734〜8879・フッター 9131） */
			--top-contact-pt: 101px;       /* 紙の下端 8375 → 手書き 8476 */
			--top-contact-list-gap: 59px;  /* 見出しの下端 8675 → ボタン 8734 */
			--top-contact-pb: 252px;       /* ボタンの下端 8879 → フッター 9131 */

			/*
			 * ---------- 下層 PC（XD: 各ページ 1400。y は XD の座標・ヘッダーは XD 92 → 実装 80（2026-09-28 先方修正指示））----------
			 * 既定はリフォーム・リノベーション・非住宅・不動産の多数派の値。ページごとに XD の値が違うところは下の「ページごとの差」で上書きする。
			 */
			--sub-hero-h: 350px;
			--sub-hero-pt: 134px;          /* 写真の上端 92 → ページ名のベースライン 273 = 181 − 47 */
			--sub-hero-en-gap: 16px;       /* ページ名 273 → 英字 311 = 38 − 7 − 14 */
			--sub-crumbs-mt: 17px;         /* 写真の下端 442 → パンくずのベースライン 473 = 31 − 14（設計書 §9: 下 17） */
			--sub-main-pt: 68px;           /* パンくず 473 → リード見出し 581 = 108 − 2 − 38 */
			--sub-lead-gap: 41px;          /* 見出し → 本文のベースライン 82〜88 − 10 − 34 */
			--sub-lead-mb: 80px;           /* 本文の最終行 → 最初の特集の写真 96〜97 − 16 */

			--sub-feature-ratio: 710 / 300;
			--sub-feature-num-y: 10px;     /* 写真の上端 → 番号 70 のベースライン 66 − 56 */
			--sub-feature-en-y: 41px;      /* 写真の下端 → 英字（2 行なら下の行）のベースライン 41〜42 */
			--sub-feature-title-mt: 58px;  /* 写真の下端 → h3 38 のベースライン 99（全ページ共通）− 41 */
			--sub-feature-title-mt-plain: 28px; /* スマートハウス: 写真の下端 → h3 のベースライン 69 − 41 */
			--sub-feature-sub-gap: 27px;   /* h3 → 副題 20 のベースライン 58〜61 − 8 − 24 */
			--sub-feature-body-gap: 16px;  /* 副題 → 本文 16 のベースライン 45 − 6 − 22（実測で 1 詰める） */
			--sub-feature-rule-mt: 28px;   /* 本文の最終行 → 罫線 36 − 8 */
			--sub-feature-rule-pt: 30px;   /* 罫線 → 次の副題のベースライン 54 − 24 */
			--sub-feature-gap: 81px;       /* 前の特集の最後の行 → 次の写真 88〜93 − 8（実測で 1 詰める） */
			--sub-feature-icon: 36px;      /* XD: 丸 36（スマートハウス） */
			--sub-feature-icon-gap: 16px;  /* 丸の右端 526 → h3 542 */

			--sub-points-mt: 37px;         /* 本文の最終行 → 写真（スマートハウス 45）− 8 */
			--sub-points-gap: 25px;        /* XD: 220×188 x=490 / 735 / 980 */
			--sub-points-caption-gap: 15px; /* 写真の下端 → 説明のベースライン 34 − 19 */
			--fs-sub-point: 1rem;          /* 16 */

			--sub-band-mt: 61px;           /* 本文の最終行 2931 → 帯 3000 − 8 */
			--sub-band-pt: 19px;           /* 帯の上端 3000 → 小 18 のベースライン 3038 − 19 */
			--sub-band-pb: 14px;           /* 大の行の下端 3091 → 帯の下端 3105 */
			--sub-band-pl: 25px;           /* 帯 490 → 大の文字 515 */
			--sub-band-pr: 16px;           /* ピルの右端 1184 → 帯の右端 1200 */
			--sub-band-title-gap: 7px;     /* 小 → 大 36 のベースライン 47 − 3 − 37 */
			--sub-band-btn-gap: 12px;      /* 縦に積むとき（本文の列が 700 未満）だけ使う。XD 無し */
			--sub-band-btn-w: 155px;
			--sub-band-btn-h: 32px;
			--sub-band-btn-pl: 18px;       /* ピル 1029 → 文字 1047 */
			--sub-band-btn-pr: 15px;       /* 山形の右端 1169 → ピルの右端 1184 */
			--sub-band-btn-icon-gap: 11px; /* 文字の右端 1152 → 山形 1163 */
			--sub-band-chevron: 6px;       /* XD: 山形 6×12・線 2 */
			--sub-band-chevron-stroke: 2px;

			--sub-blog-mt: 109px;          /* 前の段の最後の行 → 見出し 32 のベースライン（リフォーム 150 − 8 − 33） */
			--sub-blog-list-gap: 34px;     /* 見出し → カードの写真 39 − 5 */
			--sub-blog-more-gap: 61px;     /* タイトルの最終行 → もっと見る 67 − 6 */
			--sub-blog-card-gap: 20px;     /* XD: x=490 / 732 / 974 */
			--sub-heading-rule-gap: 28px;  /* 罫線 x=735（木まじめブログ）/ 646（施工事例）。木まじめブログは palt で XD より約 10 短い */

			--sub-service-gap: 85px;       /* 1 つ目の写真の下端 847 → 2 つ目 932 */
			--sub-service-sub-gap: 11px;   /* 見出し → 副題のベースライン 42 − 7 − 24 */
			--sub-service-more-mt: 16px;   /* 詳しく見るは写真の下端に揃える（本文が長いときの最小の間） */

			--sub-structure-mt: 21px;      /* 本文の最終行 1849 → 写真 1878 − 8 */
			--sub-structure-gap: 60px;     /* XD: 256×256 x=558 / 874 */
			--sub-structure-title-gap: 9px; /* 写真の下端 → 名前 20 のベースライン 33 − 24 */
			--sub-structure-text-gap: 11px; /* 名前 → 説明のベースライン 39 − 6 − 22 */
			--sub-care-mt: 56px;           /* 説明の最終行 2266 → 枠 2330 − 8 */
			--sub-care-pt: 31px;           /* 枠 2330 → 見出しのベースライン 2385 = 55 − 24 */
			--sub-care-pb: 26px;           /* 本文の最終行 2546 → 枠の下端 2580 = 34 − 8 */
			--sub-care-pl: 30px;           /* 枠 490 → アイコンの外径 520（本文 521） */
			--sub-care-pr: 29px;           /* 本文の幅 650 */
			--sub-care-body-gap: 13px;     /* 見出し → 本文のベースライン 41 − 6 − 22 */
			--sub-works-mt: 75px;          /* 枠の下端 2580 → 見出しのベースライン 2688 = 108 − 33 */
			--sub-works-col-gap: 30px;     /* XD: 340×240 x=490 / 860 */
			--sub-works-row-gap: 20px;     /* 説明の最終行 → 次の写真 25 − 5 */
			--sub-works-caption-gap: 15px; /* 写真の下端 → 説明のベースライン 34 − 19 */
			--fs-sub-caption: 1rem;        /* 16 */
			--fs-sub-em-md: 1.125rem;      /* 18（現行サイトの実測） */
			--fs-sub-em-lg: 1.25rem;       /* 20（先方指示「もう少し大きく」） */

			/* ページごとの差（XD のページ間の不揃い。41-sub.css のページの修飾 .p-sub--{スラッグ} が上の値を差し替える） */
			--sub-custom-feature-en-y: 49px;     /* 注文住宅: 写真の下端 → 英字 49（h3 は他と同じ 99） */
			--sub-custom-feature-sub-gap: 17px;  /* 注文住宅: h3 → 副題 49 */
			--sub-custom-feature-gap: 88px;      /* 注文住宅: 本文の最終行 → 次の写真 96 */
			--sub-custom-blog-mt: 66px;          /* 注文住宅: 帯の下端 3105 → 見出し 3204 = 99 − 33 */
			--sub-newc-main-pt: 52px;            /* 新築: パンくず 473 → 写真 527 = 54 − 2 */
			--sub-newc-blog-mt: 99px;            /* 新築: 写真の下端 1252 → 見出し 1384 = 132 − 33 */
			--sub-newc-blog-list-gap: 43px;      /* 新築・スマートハウス: 見出し → カード 48 */
			--sub-newc-blog-more-gap: 41px;      /* 新築: タイトルの最終行 → もっと見る 47 */
			--sub-smart-feature-sub-gap: 17px;   /* スマートハウス: h3 → 副題 49 */
			--sub-smart-feature2-sub-gap: 35px;  /* スマートハウス 2 つ目: h3 → 副題のベースライン 67 − 8 − 24（XD の文字枠 2147 → 2224 = 77。1 つ目 1245 → 1304 = 59 より 18 広い） */
			--sub-reno-lead-mb: 73px;            /* リノベーション: 本文の最終行 → 写真 89 */
			--sub-reno-blog-mt: 132px;           /* リノベーション: 本文の最終行 3328 → 見出し 3501 = 173 − 8 − 33 */
			--sub-remo-lead-gap: 28px;           /* リフォーム: 見出し 2 行目 → 本文 72 */
			--sub-remo-feature-gap: 88px;        /* リフォーム: 3 点の説明の最終行 → 次の写真 93 − 5 */
			--sub-remo-points-mt: 47px;          /* リフォーム: 本文の最終行 → 3 点の写真 55 − 8 */
			--sub-nonres-lead-mb: 87px;          /* 非住宅: 本文の最終行 → 写真 103 */
			--sub-nonres-blog-mt: 118px;         /* 非住宅: 事例の説明の最終行 3671 → 見出し 3827 = 156 − 5 − 33 */
			--sub-real-feature-gap: 72px;        /* 不動産: 本文の最終行 → 次の写真 80 */
			--sub-real-blog-mt: 146px;           /* 不動産: 本文の最終行 3523 → 見出し 3710 = 187 − 8 − 33 */

			/* ---------- 一覧・詳細 PC（段 D・設計書 §13-10。--post-section-mt は --sub-works-mt の PC 75 が効く） ---------- */
			--post-filter-mt: var(--sp-6);
			--post-row-gap: var(--sp-10);
			--post-grid-gap: var(--sub-blog-card-gap); /* 20（XD の下層ブログ x=490 / 732 / 974） */
			--post-pager-mt: var(--sp-15);
			--post-news-py: var(--sp-5);
			--post-head-gap: var(--sp-4);
			--post-block-gap: var(--sp-10);
			--post-back-mt: var(--sp-10);
			--post-h2-mt: var(--sp-15);
			--post-h3-mt: var(--sp-10);
			--post-map-ratio: 5 / 3;       /* 現行 PC 750×450（段 F の本文の追加・2026-09-28） */

			/* ---------- お問い合わせ PC（段 E・設計書 §14-5。--form-section-mt は --post-section-mt の PC 75 が効く） ---------- */
			--form-row-py: var(--sp-5);
			--form-textarea-rows: 8;
			--form-block-gap: var(--sp-10);
			--form-actions-mt: var(--sp-12);
			--form-actions-gap: var(--sp-10);
			--form-button-w: calc(var(--sp-40) + var(--sp-30)); /* 280 */
			--form-step-w: var(--sp-25);          /* 100 × 3 ＋（線 24 ＋間 16）× 2 ＝ 380 ≤ 列 654（PC の寸法で列が最も狭い 1024。768〜1023 は画面 − 80 で 688 以上） */
			--form-step-line: var(--sp-6);
		}
	}

	/* 下層の左サイドバー（1024 以上・20-layout.css の .l-sub と同じ閾値）。1024 未満はカテゴリボックスを本文の下に置くので SP の間を使う（判断待ち 17） */
	@media (min-width: 1024px) {
		:root {
			--sub-category-mt: 0px;
		}
	}

	/* 動きを減らす設定では時間を 0 にする（全部の transition が var(--dur*) を使う） */
	@media (prefers-reduced-motion: reduce) {
		:root {
			--dur: 0s;
			--dur-fast: 0s;
			--dur-fade: 0s;
		}
	}
}