/* ============================================================
   支店ページ（固定ページ store の子・7 拠点共通 / page-store.php）
   カンプ: PC 612:99（1920x27672・青森支店ベース）/ SP 670:239（375 幅）
   設計メモ: docs/figma-store-page-v2.md（旧カンプ 534:628 は docs/figma-store-page.md）
   新カンプで改修済みのセクション: FV〜不安提示（S1）・選ばれる理由・SERVICE（S2）・見える安心・DX（S3）・
   PLANS〜WORKS（S4）・REVIEWS〜FAQ（S5）・AREA〜COLUMN（S6）。
   数値・色はすべて Figma の実測値（コメントの node-id が出典）。
   style.css の共通トークンはここで再定義しない。カンプに無い新規色は
   セクションを実装するたびに :root へトークンとして足してから使う。
   ============================================================ */
:root {
	/* --- FV（612:761 / SP 638:72-94） ---
	   ここは保険の既定値。実際の値は下の PC（--st-vu）/ SP（--st-su）の比例ブロックが持つ */
	--st-fv-height: var(--fv-height);
	--st-fv-eyebrow: clamp(13px, 10.33px + 0.712vw, 24px); /* 13 → 24 (535:833) */
	--st-fv-eyebrow-ls: clamp(2px, 1.757px + 0.0647vw, 3px); /* 2 → 3 */
	--st-fv-title: clamp(64px, 43.126px + 5.5663vw, 150px); /* 64 → 150 (534:650) */
	--st-fv-title-ls: clamp(-3px, -1.514px + -0.0647vw, -2px); /* -2 → -3 */
	--st-fv-lead: clamp(18px, 13.631px + 1.165vw, 36px); /* 18 → 36 (534:831) */
	--st-fv-logo-width: clamp(160px, 129.611px + 8.1036vw, 285.2px); /* 160 → 285.2 (535:951) */
	--st-fv-badge-height: clamp(28px, 24.602px + 0.9061vw, 42px); /* 28 → 42 (535:834) */
	--st-fv-badge-pad: clamp(10px, 7.67px + 0.6214vw, 19.6px); /* 10 → 19.6 */
	--st-fv-badge-gap: clamp(8px, 6.421px + 0.4212vw, 14.5px); /* 8 → 14.5 : コピーとバッジの間 */
	--st-fv-badge-radius: 3px; /* 535:834 */
	--st-fv-title-gap: clamp(8px, 6.457px + 0.4113vw, 14.35px); /* 8 → 14.35 : コピー下端 → 見出し */
	--st-fv-lead-gap: clamp(12px, 11.386px + 0.1638vw, 14.55px); /* 12 → 14.55 : 見出し下端 → リード */
	--st-fv-logo-gap: clamp(24px, 18.325px + 1.5133vw, 47.4px); /* 24 → 47.4 : リード下端 → ロゴ */
	--st-fv-lead-ls: var(--st-fv-eyebrow-ls);
	--st-fv-copy-top: 0px;
	--st-fv-copy-left: 0px;
	--st-fv-fade-height: clamp(80px, 57.87px + 5.9013vw, 171.2px); /* 80 → 171.2 (535:852) */
	--st-fv-band-radius: clamp(3px, 2.514px + 0.1294vw, 5px); /* 3 → 5 */
	--st-fv-band-gap: clamp(10px, 6.359px + 0.9709vw, 25px); /* 10 → 25 */
	--st-fv-photo-radius: var(--st-fv-band-radius); /* FV 下の写真 4 枚の角丸 */
	--st-fv-band-overlap: 0px; /* 写真 4 枚が FV に食い込む高さ */
	--st-fv-band-pad: var(--gutter); /* 写真 4 枚の列の左右余白 */
	--st-fv-band-item-width: auto; /* SP のみ。横スクロールの 1 枚の幅 */

	/* --- 導入コピー（535:853 / 535:855） --- */
	--st-intro-heading: clamp(18px, 13.631px + 1.165vw, 36px); /* 18 → 36 */
	--st-intro-lead: clamp(13px, 11.301px + 0.4531vw, 20px); /* 13 → 20 */

	/* --- 実績数字（Group 316 / 535:911） --- */
	--st-stats-number: clamp(32px, 25.204px + 1.8123vw, 60px); /* 32 → 60 */
	--st-stats-unit: clamp(13px, 10.33px + 0.712vw, 24px); /* 13 → 24 */
	--st-stats-label: clamp(12px, 10.058px + 0.5178vw, 20px); /* 12 → 20 */

	/* --- 不安提示（535:917 / 535:919 / 535:922） --- */
	--st-concern-heading: clamp(16px, 11.146px + 1.2945vw, 36px); /* 16 → 36 */
	--st-concern-worry: clamp(14px, 11.573px + 0.6472vw, 24px); /* 14 → 24 */
	--st-concern-note: clamp(11px, 9.786px + 0.3236vw, 16px); /* 11 → 16 */

	/* --- 選ばれる理由（Group 355 / Group 354） --- */
	--st-reasons-copy: clamp(20px, 15.146px + 1.2945vw, 40px); /* 20 → 40 (535:1009) */
	--st-reasons-copy-lead: clamp(12px, 10.058px + 0.5178vw, 20px); /* 12 → 20 (535:1000) */
	--st-reasons-title: clamp(24px, 18.175px + 1.5534vw, 48px); /* 24 → 48 (535:1010) */
	--st-reasons-title-lead: clamp(11px, 9.301px + 0.4531vw, 18px); /* 11 → 18 (535:1001) */
	--st-reasons-eng: clamp(48px, 30.524px + 4.6602vw, 120px); /* 48 → 120 (535:1056) */
	--st-reasons-eng-sub: clamp(18px, 12.175px + 1.5534vw, 42px); /* 18 → 42 (535:1023) */
	--st-reasons-item-lead: clamp(12px, 8.602px + 0.9061vw, 26px); /* 12 → 26 */
	--st-reasons-item-label: clamp(14px, 9.631px + 1.165vw, 32px); /* 14 → 32 */
	--st-reasons-item-word: 10px; /* SP だけの 1 語ラベル（641:30〜641:35） */

	/* --- SERVICE（572:456 / 691:1009） --- */
	--st-service-card-eng: clamp(40px, 28.835px + 2.9773vw, 86px); /* 40 → 86 (691:1013) */
	--st-service-card-label: clamp(16px, 13.087px + 0.7767vw, 28px); /* 16 → 28 (691:1012) */
	--st-service-banner: clamp(15px, 10.874px + 1.1003vw, 32px); /* 15 → 32 (572:451) */
	--st-service-lead: clamp(12px, 10.786px + 0.3236vw, 17px); /* 12 → 17 (572:450) */
	--st-service-row-eng: clamp(28px, 19.262px + 2.3301vw, 64px); /* 28 → 64 */
	--st-service-row-label: clamp(14px, 11.087px + 0.7767vw, 26px); /* 14 → 26 */
	--st-service-photo-label: clamp(11px, 8.816px + 0.5825vw, 20px); /* 11 → 20 */

	/* --- 見える安心（PC 612:786 上部 / SP 641:175〜641:208） --- */
	--st-visible-sketch-opacity: 0.3; /* 612:255 / 641:175（guide 617:35「薄め」） */
	/* 線画（images/top/line_animation.svg）の置き場所。コピーの枠（PC 1233.7x653.9 /
	   SP 276x147）に対する比率で、カンプの線画 PNG の家・床・植栽に重なるように合わせた */
	--st-visible-sketch-left: -3%;
	--st-visible-sketch-top: 3%;
	--st-visible-sketch-width: 104%;
	/* 線 1 本の破線の長さ（pathLength="1" 基準）。線幅を画面上で一定に保つ vector-effect
	   のもとでは、Chrome は破線を画面上の長さで測るため、SVG を等倍（viewBox 737 幅）より
	   大きく出すと 1 では線の途中までしか描かれない。PC は最大 1.741 倍なので 1.75 にする */
	--st-visible-sketch-dash: 1;
	--st-visible-eyebrow: clamp(16px, 13.087px + 0.7767vw, 32px); /* 16 → 32 (572:282) */
	--st-visible-heading: clamp(20px, 13.204px + 1.8123vw, 48px); /* 20 → 48 (572:280) */
	--st-visible-card-eng: clamp(20px, 13.204px + 1.8123vw, 48px); /* 20 → 48 */
	--st-visible-card-label: clamp(13px, 10.33px + 0.712vw, 24px); /* 13 → 24 */
	--st-visible-lead: clamp(12px, 10.058px + 0.5178vw, 20px); /* 12 → 20 (572:617) */

	/* --- DX EXPERIENCE（Group 331 / 572:619） --- */

	/* --- PLANS（Group 362 / Group 363 / Group 338 / Group 374） --- */
	--st-plans-label: clamp(13px, 11.301px + 0.4531vw, 20px); /* 13 → 20 (599:23) */
	--st-plans-eng: clamp(34px, 23.806px + 2.7184vw, 76px); /* 34 → 76 (599:21) */
	--st-plans-eng-ls: -0.026em; /* 76px で -2px（決定事項: PACKAGE / HIGH-END は -2px） */
	--st-plans-copy: clamp(12px, 10.544px + 0.3883vw, 18px); /* 12 → 18 (599:22) */
	--st-plans-feature: clamp(12px, 10.058px + 0.5178vw, 20px); /* 12 → 20 */

	/* WORKS（Group 380 / Group 382 / Group 379）は DX ページと共通の部品に
	   なったため、トークンごと css/works.css へ移した（--cw-*）。 */

	/* --- REVIEWS（612:460 / SP 641:400） --- */
	--st-reviews-score: clamp(14px, 11.573px + 0.6472vw, 24px); /* 14 → 24 */
	--st-reviews-name: clamp(10px, 9.029px + 0.2589vw, 14px); /* 10 → 14（本文の下の名前。カンプに無い） */
	--st-reviews-text: clamp(10px, 8.544px + 0.3883vw, 16px); /* 10 → 16 */

	/* --- FLOW（612:376 / 612:416 / SP 641:470〜641:508） --- */
	--st-flow-chevron: clamp(12px, 11.029px + 0.2589vw, 16px); /* 12 → 16（矢羽根は PC のみ） */
	--st-flow-number: clamp(36px, 29.204px + 1.8123vw, 64px); /* 36 → 64 */
	--st-flow-row-title: clamp(16px, 14.058px + 0.5178vw, 24px); /* 16 → 24 */
	--st-flow-row-desc: clamp(10px, 8.544px + 0.3883vw, 16px); /* 10 → 16 */

	/* --- Quality（612:499 / 612:498 / 612:500 / 612:584。SP 641:1257〜641:1261） --- */
	--st-quality-eng: clamp(16px, 12.117px + 1.0356vw, 32px); /* 16 → 32 */
	--st-quality-heading: clamp(14px, 5.748px + 2.2006vw, 48px); /* 14 → 48 */
	--st-quality-lead: clamp(12px, 10.058px + 0.5178vw, 20px); /* 12 → 20 */
	--st-quality-badge: clamp(20px, 16.117px + 1.0356vw, 36px); /* 20 → 36 */
	--st-quality-badge-num: clamp(20px, 15.631px + 1.165vw, 38px); /* 20 → 38 : PC は「5」だけ 2px 大きい */
	--st-quality-image-position: center; /* 写真の横位置。SP は 641:1255 の切り抜き */

	/* --- FAQ（612:536 / 641:1462。SP 641:1274 / 666:32） --- */
	--st-faq-mark: clamp(20px, 9.32px + 2.8479vw, 64px); /* 20 → 64 :「Q」 */
	--st-faq-q: clamp(12px, 9.087px + 0.7767vw, 24px); /* 12 → 24 */
	--st-faq-a: clamp(10px, 9.029px + 0.2589vw, 14px); /* 10 → 14 : 回答（641:1314 / 641:1309） */

	/* --- AREA（628:338 / 628:329 / 628:310 / 1126:37 / 1148:45 / 1148:28 /
	       1148:29 / 1148:80 / 1148:62） --- */
	--st-area-banner: clamp(15px, 10.874px + 1.1003vw, 32px); /* 15 → 32 */
	--st-area-lead: clamp(12px, 11.029px + 0.2589vw, 16px); /* 12 → 16 */
	--st-area-table: clamp(12px, 11.029px + 0.2589vw, 16px); /* 12 → 16 */
	--st-area-branch: clamp(13px, 11.786px + 0.3236vw, 18px); /* 13 → 18 */
	--st-area-local-eng: clamp(18px, 14.602px + 0.9061vw, 32px); /* 18 → 32 */
	--st-area-local-heading: clamp(20px, 15.146px + 1.2945vw, 40px); /* 20 → 40 */
	--st-area-local-lead: clamp(12px, 11.029px + 0.2589vw, 16px); /* 12 → 16 */
	--st-area-card-number: clamp(32px, 24.233px + 2.0712vw, 64px); /* 32 → 64 */
	--st-area-card-label: clamp(14px, 11.573px + 0.6472vw, 24px); /* 14 → 24 */

	/* --- AREA の店内写真のアーチ状ロール（612:661 / 641:1464。SP 641:1376〜641:1378） ---
	   PC は円筒の上に写真を 30° おきに 12 枚立て、少し上から見下ろした形（612:661 を
	   円筒として読み取った値）。単位の無い数値はカンプ 1920（SP は 375）の px / 度 */
	--st-arch-loop-time: 60s; /* 写真 1 組（青森は 4 枚）ぶん流れる時間（決定 A「1 巡 約 60 秒」） */
	--st-arch-comp-width: 1920; /* SP の速さの基準にする PC の画面幅 */
	--st-arch-radius: 941.6; /* 円筒の半径（612:661 の幅 1883.3 の半分） */
	--st-arch-tilt: 19.6; /* 見下ろす角度（度）。正面と 60° の写真の高さの差から */
	--st-arch-center-y: 404; /* 円筒の中心の高さ（612:661 の上端から） */
	--st-arch-width: 470; /* 正面の写真の幅（612:661 の中央の写真） */
	--st-arch-height: 340; /* 同・高さ（見下ろした分だけ低く見えるので 320 / cos） */
	--st-arch-hide: 110; /* この角度（±度）を越えた奥側の写真は白パネルの背面に回す。90〜110° は円筒の奥側でパネルの外（612:661 の左上・右上の細い写真）。
	                        110° でちょうどパネルの端（x = 中心 ± (R·sin110° − w·|cos110°| / 2) ≒ ±800 = パネル半幅）に達するので、
	                        以降はパネルに隠れて消える（薄くして消さない。2026-10-10 の指示） */
	--st-arch-strips: 10; /* 写真 1 枚を縦に分ける短冊の数。平らな板だと軌道が正 12 角形に見えるため、短冊ごとに角度を変えて円筒に沿わせる（2026-10-07） */
	--st-arch-span: calc(var(--st-arch-width) / var(--st-arch-radius) * 57.2958); /* 写真 1 枚が円筒上で占める角度（度）= 幅 / 半径（rad） */
	--st-arch-sp-left: 9; /* SP の列の 1 枚目の左端（641:1377） */
	--st-arch-sp-width: 142; /* SP の写真 142x85・間隔 8（641:1376〜641:1378） */
	--st-arch-sp-height: 85;
	--st-arch-sp-pitch: 150;

	/* --- お問い合わせ CTA（639:366 / 639:364 / 639:406 / 639:403） --- */
	--st-cta-eng: clamp(16px, 12.117px + 1.0356vw, 32px); /* 16 → 32 */
	--st-cta-heading: clamp(20px, 15.146px + 1.2945vw, 40px); /* 20 → 40 */
	--st-cta-lead: clamp(12px, 10.058px + 0.5178vw, 20px); /* 12 → 20 */
	--st-cta-button: clamp(15px, 10.874px + 1.1003vw, 32px); /* 15 → 32 */
	--st-cta-button-ls: clamp(1px, 0.515px + 0.1294vw, 3px); /* 1 → 3 */

	/* COLUMN（--st-column-title）・角丸（--st-card-radius）・--st-bg-light・--st-shadow・
	   見出し 3 点セット（--st-heading-*）は css/column.css へ移した（名前・値とも据え置き） */

	/* --- 施工イメージ帯（612:569 / 638:134-136） --- */
	--st-strip-screen-time: 40s; /* 画面幅 1 つ分を流れる時間（PLANS の img list と同じ。決定 B） */
	--st-strip-gap: 22.55; /* 5 枚の間隔（カンプ 1920 での値。5 枚 + 4 つで 1920） */
	--st-plans-strip-gap: 35.1; /* PACKAGE 下の帯（612:803）の間隔。PC のみ（SP は施工イメージ帯と同じ） */
	--st-strip-align: auto; /* 静止時の列の寄せ。PC は中央、SP はカンプどおり左端から */

	/* --- 色（このページ固有。共通トークンに無いもののみ） --- */
	--st-white: #ffffff; /* 535:917 見出し文字 / 572:493 白パネル / 535:852 FV の白グラデ */
	--st-bg-light-0: rgba(243, 243, 244, 0); /* 上の透明側（グラデの端で灰色が濁らないように） */
	--st-black2-0: rgba(26, 26, 26, 0); /* --color-black2 の透明側（561:75） */
	--st-black-0: rgba(0, 0, 0, 0); /* 黒の透明側（691:1016） */
	--st-card-shade: rgba(0, 0, 0, 0.4); /* SERVICE カード下端の暗幕（RENOVATION 612:633） */
	--st-card-shade-strong: rgba(0, 0, 0, 0.8); /* 同・NEW BUILD 612:632 / SP は 2 枚とも（641:73 / 641:87） */
	/* 選ばれる理由の暗幕（SP / 中間幅で 561:80 の PNG の代わりに使う） */
	--st-visible-eng: #666666; /* 見える安心の英字（572:292） */
	/* 新カンプで罫線・区切り線は gray 2 に統一（旧 #c8c8c8 / #c4c4c4 / #b1b1b1 / #d8d8d8） */
	--st-line: var(--color-gray2);
	--st-line-plans: #c8c8c8; /* PLANS の縦線（612:354）。新カンプでもこの色のまま（例外） */
	--st-line-feature: var(--st-line); /* 特長 4 列の区切り線（612:305） */
	--st-line-feature-dark: #515151; /* 同・ダーク版（602:102） */
	--st-ring-light: var(--color-white3); /* 実績数字の外リング（612:205。SP も同じ色にそろえる: 決定 B-2 Q3） */
	--st-photo-shade: rgba(0, 0, 0, 0.3); /* 写真に重ねる黒（535:881 実績数字 / 669:257 Quality） */
	--st-number: #b4bbc3; /* FLOW の番号・FAQ の「Q」（669:961 / 669:963） */
	--st-area-bg: #ececec; /* AREA の背景（612:100）。SP は #f3f3f4（641:1318） */
	--st-area-bg-position: 50% 71%; /* 612:115 の切り抜き（h138.54% top -27.35%）。SP は上端（641:1315） */
	--st-cta-image-position: 50% 100%; /* 612:112 の切り抜き（h146.56% top -46.56%）。SP は 641:1429 */
	--st-area-number: var(--color-black1); /* AREA カードの番号（612:855 内。旧 #6b6b6b） */
	--st-cta-line: #06c755; /* LINE ボタン（639:401） */
	/* 639:407。左から 1270.8 幅（その 85.6% までが黒 50%）を 1920 に対する比率で持つ */
	--st-cta-overlay: linear-gradient(
		90deg,
		rgba(13, 0, 0, 0.5) 0%,
		rgba(13, 0, 0, 0.5) 56.66%,
		rgba(13, 0, 0, 0) 66.19%
	);
	/* SP / 中間幅は中央寄せの文字が暗幕からはみ出すので全面に敷く */
	/* 641:1430。左から 308 / 375 幅（その 85.577% までが黒 50%） */
	--st-cta-overlay-sp: linear-gradient(
		90deg,
		rgba(13, 0, 0, 0.5) 0%,
		rgba(13, 0, 0, 0.5) 70.28%,
		rgba(13, 0, 0, 0) 82.13%
	);
	/* 影の基本 --st-shadow は css/column.css */
	/* 同じ影を filter: drop-shadow() で付けるときの値（形を切り抜いた FLOW の 07 行） */
	--st-shadow-drop: 0 12px 16px rgba(0, 0, 0, 0.12);
	--st-shadow-card: 0 4px 8px 1px rgba(0, 0, 0, 0.05); /* 例外: AREA の店内写真（641:1464） */
	--st-shadow-photo: 0 4px 4px 1px rgba(0, 0, 0, 0.05); /* 例外: SERVICE のカテゴリ写真 */
	/* FLOW の矢羽根 7 段（Group 371 / 661:92-122） */
	--st-flow-step1: #4f5964;
	--st-flow-step2: #5a6671;
	--st-flow-step3: #65737e;
	--st-flow-step4: #70808b;
	--st-flow-step5: #7b8d98;
	--st-flow-step6: #869aa5;
	--st-flow-step7: #91a7b2;
	--st-reasons-word: #dddddd; /* 選ばれる理由の SP の 1 語ラベル（641:30〜641:35） */
	--st-line-service: var(--st-line); /* SERVICE のカテゴリ区切り線（612:592） */
	/* 暗い背景・写真の上の文字（white 2）。新カンプで #f5f5f5 / #eeeeee / #fff から統一 */
	--st-on-dark: var(--color-white2);
	--st-fv-text: var(--color-gray2); /* FV サブコピー・バッジ枠（612:172 / 612:168） */
	--st-fv-badge-color: var(--st-fv-text); /* 612:173 支店名。SP は white 2（638:86） */
	--st-fv-lead-color: #eeeeee; /* 612:171「理想の暮らしを、カタチに」。SP は white 2（638:89） */
	--st-badge-bg: rgba(0, 0, 0, 0.2); /* FV のバッジ（612:168）・保証バッジ */
	/* 612:177 / 638:81 FV 下端の溶かし。終端は次の背景色（決定 B-2 Q2） */
	--st-fv-fade-to: var(--st-bg-light);
	--st-fv-fade-from: var(--st-bg-light-0);
	/* 612:155 / 638:73。上 29.327% までが黒 40%、下端で透明 */
	--st-fv-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.4) 29.327%,
		rgba(0, 0, 0, 0) 100%
	);
	/* 612:156 / 638:74。左→右の暗幕（幅は --st-fv-shade-left-size） */
	--st-fv-overlay-left: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.4) 29.327%,
		rgba(0, 0, 0, 0) 100%
	);
	--st-fv-shade-left-size: 51.066%; /* PC 980.47 / 1920。SP は 286 / 375 */
	--st-fv-image-position: left center; /* PC は左寄せ（612:154）。SP は 638:72 の切り抜き */
}

/* セクション見出し 3 点セット（.c-store-title / .c-store-jp / .c-store-lead）は css/column.css */

/* ============================================================
   FV（535:838 / 534:647 / 561:3 / 561:46 / 535:852）
   背景写真の上に、左寄せのコピー塊と中央のサムネイル行。
   下端をまたぐ写真 4 枚（__band）はセクションの外に置き、
   負のマージンで引き上げる。
   ============================================================ */
.p-sfv {
	position: relative;
	height: var(--st-fv-height);
	overflow: hidden;
	color: var(--st-on-dark);
}

.p-sfv__bg {
	position: absolute;
	inset: 0;
}

/* 612:154。幅 114.5%・左寄せのトリミング（cover と同じ結果になる） */
.p-sfv__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--st-fv-image-position);
}

/* 612:155 上からの黒幕 + 612:156 左からの黒幕 / 612:177 下端を背景色に溶かす帯。
   z-index が auto のままだと、DOM 順で後ろにある __bg（同じく absolute）に
   ::before が隠れて黒幕が効かない。写真より上に載せる。 */
.p-sfv::before,
.p-sfv::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.p-sfv::before {
	top: 0;
	bottom: 0;
	background:
		var(--st-fv-overlay-left) left top / var(--st-fv-shade-left-size) 100% no-repeat,
		var(--st-fv-overlay);
}

.p-sfv::after {
	bottom: 0;
	height: var(--st-fv-fade-height);
	background: linear-gradient(180deg, var(--st-fv-fade-from) 0%, var(--st-fv-fade-to) 100%);
}

/* コピー塊は FV の中で絶対配置（PC 612:166 / SP 638:82 の左上を --st-fv-copy-* で） */
.p-sfv__body {
	position: absolute;
	inset: 0;
	z-index: 2; /* 黒幕・グラデ（z-index:1）より上。文字を必ず読める側に置く */
	/* FV 全面に広がる透明な層なので、指やポインタは素通しにする。下端に食い込む写真 4 枚
	   （.p-sfv__band。SP は指で横スクロール）がこの層に遮られて動かなかったため（2026-10-10） */
	pointer-events: none;
}

.p-sfv__copy {
	position: absolute;
	top: var(--st-fv-copy-top);
	left: var(--st-fv-copy-left);
	pointer-events: auto; /* 文字の選択だけはできるように */
}

/* --- コピー塊（561:3） --- */
.p-sfv__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-fv-badge-gap);
	margin: 0;
	font-size: var(--st-fv-eyebrow);
	font-weight: var(--fw-medium);
	line-height: 1.8;
	letter-spacing: var(--st-fv-eyebrow-ls);
	color: var(--st-fv-text);
}

.p-sfv__badge {
	display: inline-flex;
	align-items: center;
	height: var(--st-fv-badge-height);
	padding-inline: var(--st-fv-badge-pad);
	border: 1px solid var(--st-fv-text);
	border-radius: var(--st-fv-badge-radius);
	background: var(--st-badge-bg);
	color: var(--st-fv-badge-color);
	white-space: nowrap;
}

.p-sfv__title {
	display: flex;
	flex-direction: column;
	margin: var(--st-fv-title-gap) 0 0;
	font-size: var(--st-fv-title);
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	letter-spacing: var(--st-fv-title-ls);
	color: var(--st-on-dark);
}

.p-sfv__lead {
	margin: var(--st-fv-lead-gap) 0 0;
	font-size: var(--st-fv-lead);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: var(--st-fv-lead-ls);
	color: var(--st-fv-lead-color);
}

.p-sfv__logo {
	margin: var(--st-fv-logo-gap) 0 0;
	line-height: 0;
}

.p-sfv__logo img {
	width: var(--st-fv-logo-width);
	height: auto;
}

/* 「動きを減らす」設定ではクロスフェードしない（自動送りも js 側で止める） */
@media (prefers-reduced-motion: reduce) {
}

/* --- FV 下端をまたぐ写真 4 枚（612:760 / SP 638:91） ---
   FV に食い込む上側は透明、FV より下は導入の背景色を敷く */
.p-sfv__band {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--st-fv-band-overlap));
	background: linear-gradient(
		180deg,
		transparent 0,
		transparent var(--st-fv-band-overlap),
		var(--st-bg-light) var(--st-fv-band-overlap)
	);
}

.p-sfv__band-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--st-fv-band-gap);
	margin: 0;
	padding: 0 var(--st-fv-band-pad);
	list-style: none;
}

.p-sfv__band-item {
	display: block;
	width: 100%;
	aspect-ratio: 429.3 / 224.7;
	border-radius: var(--st-fv-photo-radius);
	object-fit: cover;
}

/* ============================================================
   導入コピー（535:842 / 535:966 / 535:853 / 535:855）
   ------------------------------------------------------------
   このセクション以降、余白・寸法はすべて下の比例ブロック
  （PC: --st-vu / SP: --st-su）が持つ。ここでは構造と書体だけを決める。
   ============================================================ */
.p-sintro {
	background: var(--st-bg-light); /* 612:152（新カンプは導入〜不安提示まで同じ背景） */
	text-align: center;
}

.p-sintro__icon {
	margin: 0;
	line-height: 0;
}

/* 画像はグローバルリセットで display:block。中央寄せは margin で行う */
.p-sintro__icon img {
	width: var(--st-intro-icon-w);
	height: auto;
	margin-inline: auto;
}

.p-sintro__heading {
	font-size: var(--st-intro-heading);
	font-weight: var(--fw-bold);
	line-height: 1.8;
	letter-spacing: var(--ls-wide);
	color: var(--color-black2);
}

.p-sintro__lead {
	font-size: var(--st-intro-lead);
	font-weight: var(--fw-regular);
	line-height: 2;
	letter-spacing: var(--ls-wide);
	color: var(--color-black1);
}

/* PC だけ改行する（SP は 2 行目と 3 行目を 1 段落につなぐ。638:96） */
.p-sintro__br-pc {
	display: block;
}

/* ============================================================
   施工イメージ帯（535:860 / 669:916 / 535:861 / 669:920 / 535:871）
   ------------------------------------------------------------
   下端が次セクション（#f3f3f4）に食い込み、535:869 のグラデで
   画像の足元をその色に溶かす。
   ============================================================ */
.p-sstrip {
	position: relative;
	z-index: 1;
}

.p-sstrip__list {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 1 枚ずつ幅が違う（--strip-w はカンプ 1920 での幅） */
.p-sstrip__item {
	width: calc(var(--strip-w) * var(--st-strip-unit));
}

.p-sstrip__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* 612:570（04）は PLANS の img list 04 と同じ画像を枠で切り抜く（幅 % / 左 % / 上 %） */
.p-sstrip__item--crop {
	position: relative;
	height: calc(var(--strip-h) * var(--st-strip-unit));
	overflow: hidden;
}

.p-sstrip__item--crop img {
	position: absolute;
	top: var(--crop-y);
	left: var(--crop-x);
	width: var(--crop-w);
	max-width: none;
	height: auto;
}

/* 535:869 画像の足元を次セクションの色に溶かす */
.p-sstrip::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--st-strip-fade-height);
	background: linear-gradient(180deg, var(--st-bg-light-0) 0%, var(--st-bg-light) 100%);
	pointer-events: none;
}

/* --- 流れる帯（.p-sstrip--roll。612:569 / 638:134-136、guide 617:18） ---
   PLANS の img list と同じ動き（js/plans-imglist.js が [data-plp-imglist] の列を
   複製し、.is-running で 1 巡ぶん左へ流す）。間隔はカンプの不揃い（10.6〜31.2）を
   PLANS と同じく揃えて、5 枚 + 間隔 4 つでちょうど 1920 にする。
   流さないとき（動きを減らす設定・JS 無効）はカンプの並びで静止する */
.p-sstrip--roll {
	--plp-imglist-screen-time: var(--st-strip-screen-time);

	overflow: hidden;
	background: var(--st-bg-light);
}

.p-sstrip--roll .p-sstrip__list {
	justify-content: flex-start;
	gap: calc(var(--st-strip-gap) * var(--st-strip-unit));
	width: max-content;
	margin-inline: var(--st-strip-align);
}

/* 612:570 だけ下角が丸い（複製しても 5 枚ごとの 4 枚目に当たる。枠で切り抜くので枠に付ける） */
.p-sstrip--roll .p-sstrip__item:nth-child(5n + 4) {
	border-end-start-radius: calc(10 * var(--st-strip-unit));
	border-end-end-radius: calc(10 * var(--st-strip-unit));
}

@keyframes st-strip-flow {
	to {
		transform: translateX(calc(-1 * var(--plp-imglist-shift, 0px)));
	}
}

.p-sstrip--roll .p-sstrip__list.is-running {
	animation: st-strip-flow var(--plp-imglist-duration, var(--st-strip-screen-time)) linear infinite;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.p-sstrip--roll .p-sstrip__list.is-running {
		animation: none;
	}
}

/* ============================================================
   実績数字（Group 316 / 535:911）
   ============================================================ */
.p-sstats {
	background: var(--st-bg-light);
}

.p-sstats__list {
	display: grid;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sstats__item {
	text-align: center;
}

/* 535:895 外リング（230）の内側に 200 の円形写真 */
.p-sstats__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--st-stats-ring-size);
	height: var(--st-stats-ring-size);
	margin-inline: auto;
	border: var(--st-stats-ring-width) solid var(--st-ring-light);
	border-radius: 50%;
}

.p-sstats__photo {
	position: absolute;
	width: var(--st-stats-photo-size);
	height: var(--st-stats-photo-size);
	border-radius: 50%;
	object-fit: cover;
}

/* 535:881 写真を暗くして数字を読ませる */
.p-sstats__ring::after {
	content: "";
	position: absolute;
	width: var(--st-stats-photo-size);
	height: var(--st-stats-photo-size);
	border-radius: 50%;
	background: var(--st-photo-shade);
}

/* 黒 30%（__ring::after）より上に出す。数字が暗幕に沈まないように */
.p-sstats__value {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--st-on-dark); /* 決定 B-2 Q3 */
}

.p-sstats__number {
	display: block;
	font-family: var(--font-display);
	font-size: var(--st-stats-number);
	font-weight: var(--fw-regular);
	line-height: 0.95;
	letter-spacing: normal;
}

.p-sstats__unit {
	display: block;
	font-size: var(--st-stats-unit);
	font-weight: var(--fw-medium);
	line-height: 2.375; /* 行ボックス 57px（カンプの数字と同じ送り） */
	letter-spacing: var(--ls-base);
}

.p-sstats__label {
	font-size: var(--st-stats-label);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-wide);
	color: var(--color-black2);
}

/* ============================================================
   不安提示（535:932 / 535:917 / 535:919 / 535:922 / 535:933）
   ------------------------------------------------------------
   スケッチはカンプの見た目どおり右側に置く（左右反転で配置されている）。
   文字より下のレイヤーに敷き、可読性を落とさない。
   ============================================================ */
.p-sconcern {
	position: relative;
	overflow: hidden;
	background: var(--st-bg-light);
}

.p-sconcern__sketch {
	display: block;
	object-fit: cover;
	transform: scaleX(-1); /* カンプは左右反転で配置（612:153 / 638:150） */
}

.p-sconcern__body {
	position: relative;
	z-index: 1;
}

/* 535:932 黒帯の中に白文字（535:917） */
.p-sconcern__heading {
	margin: 0;
	border-radius: var(--st-fv-band-radius);
	background: var(--color-black2);
	color: var(--st-on-dark);
	font-size: var(--st-concern-heading);
	font-weight: var(--fw-bold);
	line-height: 1.8;
	letter-spacing: var(--ls-wide);
}

.p-sconcern__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sconcern__item {
	/* 折り返しても閉じ括弧が行頭に落ちないようにする */
	line-break: strict;
	font-size: var(--st-concern-worry);
	font-weight: var(--fw-medium);
	line-height: 1.8;
	letter-spacing: var(--ls-wide);
	color: var(--color-black2);
}

.p-sconcern__note {
	font-size: var(--st-concern-note);
	font-weight: var(--fw-medium);
	line-height: 2;
	letter-spacing: var(--ls-base);
	color: var(--color-black1);
}

/* ============================================================
   選ばれる理由（535:997 / 572:326 / Group 355 / Group 354）
   ============================================================ */
.p-sreasons {
	position: relative;
	overflow: hidden;
	background: var(--color-black2);
}

.p-sreasons picture {
	display: contents;
}

.p-sreasons__bg {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

.p-sreasons__bg-photo {
	display: block;
	width: 100%;
	height: var(--st-reasons-photo-height);
	object-fit: cover;
}

/* 561:75 写真の下端を黒に溶かす */
.p-sreasons__bg::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--st-reasons-fade-height);
	background: linear-gradient(180deg, var(--st-black2-0) 0%, var(--color-black2) 100%);
}

/* 561:80 写真の上部を暗くする（カンプの PNG をそのまま使う） */
.p-sreasons__bg-shade {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: var(--st-reasons-shade-height);
}

.p-sreasons__copy {
	position: relative;
	text-align: center;
}

.p-sreasons__copy-heading {
	margin: 0;
	font-size: var(--st-reasons-copy);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: var(--ls-copy);
	color: var(--st-on-dark);
}

.p-sreasons__copy-lead {
	font-size: var(--st-reasons-copy-lead);
	font-weight: var(--fw-regular);
	line-height: 2.5;
	letter-spacing: var(--ls-base);
	color: var(--color-gray2);
}

.p-sreasons__diagram {
	position: relative;
	container-type: inline-size; /* 浮遊の振れ幅 --diagram-float（1.7cqw）を TOP と同じ比率にする */
}

/* 612:332 / SP 641:40 アイコンの位置で途切れる円 */
.p-sreasons__ring {
	position: absolute;
	top: 0;
	display: block;
}

.p-sreasons__center {
	position: relative;
	text-align: center;
}

.p-sreasons__logo {
	margin: 0;
	line-height: 0;
}

.p-sreasons__logo img {
	width: var(--st-reasons-logo-width);
	height: auto;
	margin-inline: auto;
}

.p-sreasons__title {
	font-size: var(--st-reasons-title);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-copy);
	color: var(--st-on-dark);
}

.p-sreasons__title-lead {
	font-size: var(--st-reasons-title-lead);
	font-weight: var(--fw-medium);
	line-height: 2;
	letter-spacing: var(--ls-base);
	color: var(--color-gray2);
}

.p-sreasons__house {
	display: block;
	width: var(--st-reasons-house-width);
	height: auto;
	margin-inline: auto;
	opacity: 0.8; /* 989:98 */
}

.p-sreasons__eng {
	font-size: var(--st-reasons-eng);
	line-height: 1.2;
	letter-spacing: -0.025em; /* 120px で -3px */
	color: var(--st-on-dark);
}

.p-sreasons__eng-sub {
	font-size: var(--st-reasons-eng-sub);
	line-height: 1.2;
	letter-spacing: -0.0238em; /* 42px で -1px */
	color: var(--st-on-dark); /* 612:330（旧 #d9d9d9） */
}

/* SP だけ「DESIGN, MADE VISIBLE.」（641:39） */
.p-sreasons__eng-sub--sp {
	display: none;
}

.p-sreasons__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sreasons__item {
	text-align: center;
}

/* 6 項目の浮遊（guide 617:23）。TOP 理念の円環図（style.css .p-diagram__icon--N）と同じ
   keyframes・片道時間・向きの交互。図が画面外の間は止めておく（js/diagram-float.js）。
   paused の初期位置は keyframes の 0%（静止位置）なので、JS が無くても位置はずれない */
.p-sreasons__item {
	animation: var(--diagram-float-name) calc(var(--diagram-float-duration) * 2) var(--diagram-float-ease) infinite;
	animation-play-state: paused;
}

[data-diagram-float].is-floating .p-sreasons__item {
	animation-play-state: running;
	will-change: transform;
}

.p-sreasons__item:nth-child(1) {
	--diagram-float-duration: var(--diagram-float-duration-1);
	--diagram-float-name: p-diagram-float;
}

.p-sreasons__item:nth-child(2) {
	--diagram-float-duration: var(--diagram-float-duration-2);
	--diagram-float-name: p-diagram-float-rev;
}

.p-sreasons__item:nth-child(3) {
	--diagram-float-duration: var(--diagram-float-duration-3);
	--diagram-float-name: p-diagram-float;
}

.p-sreasons__item:nth-child(4) {
	--diagram-float-duration: var(--diagram-float-duration-4);
	--diagram-float-name: p-diagram-float-rev;
}

.p-sreasons__item:nth-child(5) {
	--diagram-float-duration: var(--diagram-float-duration-5);
	--diagram-float-name: p-diagram-float;
}

.p-sreasons__item:nth-child(6) {
	--diagram-float-duration: var(--diagram-float-duration-6);
	--diagram-float-name: p-diagram-float-rev;
}

@media (prefers-reduced-motion: reduce) {
	.p-sreasons__item,
	[data-diagram-float].is-floating .p-sreasons__item {
		animation: none;
	}
}

/* カンプのアイコン枠（--icon-w x --icon-h）で固定する。線画の縦横比は
   枠と最大 14% ずれるので contain で収め、下のラベルの位置を項目間でそろえる */
.p-sreasons__icon {
	display: block;
	width: calc(var(--icon-w) * var(--st-reasons-icon-unit));
	height: calc(var(--icon-h) * var(--st-reasons-icon-unit));
	object-fit: contain;
	margin-inline: auto;
}

.p-sreasons__item-lead {
	font-size: var(--st-reasons-item-lead);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-gray2);
}

.p-sreasons__item-label {
	font-size: var(--st-reasons-item-label);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--st-on-dark);
}

/* SP だけの 1 語ラベル。カンプは「長期保証」だけ Bold だが、不統一なので Medium にそろえる */
.p-sreasons__item-word {
	display: none;
	margin: 0;
	font-size: var(--st-reasons-item-word);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	white-space: nowrap;
	color: var(--st-reasons-word);
}

/* ============================================================
   SERVICE（572:448 / 572:456 / 691:1036 / 689:1001 / Group 377）
   ============================================================ */
.p-sservice {
	background: var(--st-bg-light);
}

.p-sservice__cards {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sservice__card-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--st-card-radius);
	box-shadow: var(--st-shadow); /* 612:104（NEW BUILD 612:102 は書き出しが影込み） */
}

.p-sservice__card-media img {
	display: block;
	width: 100%;
	height: var(--st-service-card-height);
	object-fit: cover;
}

/* 691:1016 写真の下端を暗くして英字を読ませる */
.p-sservice__card-media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--st-service-card-shade);
	background: linear-gradient(180deg, var(--st-black-0) 0%, var(--st-service-card-shade-color, var(--st-card-shade)) 100%);
}

/* 612:632 NEW BUILD だけ暗幕が濃い */
.p-sservice__card:first-child {
	--st-service-card-shade-color: var(--st-card-shade-strong);
}

.p-sservice__card-eng {
	position: absolute;
	right: 0;
	bottom: var(--st-service-card-eng-bottom);
	left: 0;
	z-index: 1;
	margin: 0;
	font-size: var(--st-service-card-eng);
	line-height: 1.2;
	letter-spacing: -0.035em; /* 86px で -3px */
	text-align: center;
	color: var(--st-on-dark);
}

.p-sservice__card-label {
	font-size: var(--st-service-card-label);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--color-black2);
}

.p-sservice__panel {
	position: relative;
	background: var(--st-white);
}

/* 572:495 パネルの上端にかぶる黒帯 */
.p-sservice__banner {
	position: absolute;
	top: var(--st-service-banner-top);
	left: 50%;
	display: grid;
	place-items: center;
	width: var(--st-service-banner-width);
	height: var(--st-service-banner-height);
	margin: 0;
	border-radius: var(--st-fv-band-radius);
	background: var(--color-black2);
	font-size: var(--st-service-banner);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--st-on-dark);
	transform: translateX(-50%);
}

/* 帯見出しの改行は SP だけ（641:98） */
.p-sservice__banner br {
	display: none;
}

.p-sservice__lead {
	font-size: var(--st-service-lead);
	font-weight: var(--fw-regular);
	line-height: 2;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--color-black1);
}

.p-sservice__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sservice__row {
	position: relative;
}

/* 572:452 カテゴリの区切り線（写真の下をくぐる） */
.p-sservice__row::before {
	content: "";
	position: absolute;
	top: var(--st-service-line-top);
	right: 0;
	left: 0;
	border-top: 1px solid var(--st-line-service);
}

.p-sservice__row-eng {
	margin: 0;
	font-size: var(--st-service-row-eng);
	line-height: 1.6;
	letter-spacing: -0.031em; /* 64px で -2px */
	color: var(--color-gray2);
}

.p-sservice__row-label {
	font-size: var(--st-service-row-label);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-black2);
}

.p-sservice__photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sservice__photo {
	text-align: center;
}

.p-sservice__photo img {
	display: block;
	width: 100%;
	height: var(--st-service-photo-height);
	border-radius: var(--st-fv-band-radius);
	object-fit: cover;
	box-shadow: var(--st-shadow-photo);
}

.p-sservice__photo-label {
	display: block;
	font-size: var(--st-service-photo-label);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-black2);
}

/* SP だけ短い写真名（641:131「デッキ」/ 641:167「ライティング」） */
.p-sservice__photo-label-sp {
	display: none;
}

/* JS 無効時: [data-reveal] は JS が合図を出すまで透明なので、最初から最終状態にする
  （支店ページ全体。<noscript> 側は functions.php の exterior_exone_store_noscript_style()） */
@media (scripting: none) {
	.is-store-page [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   見える安心（PC 612:786 上部 / SP 641:175〜641:208）
   ------------------------------------------------------------
   続く DX EXPERIENCE（TOP の .p-dx）と地続きの黒背景。PC の写真 4 枚は
   SERVICE と同じ作りで、英字だけは写真の外（カードの上）に置き、下端にかぶせる。
   SP は写真と文字の左右交互 4 段。
   ============================================================ */
.p-svisible {
	background: var(--color-black2);
	/* 直後の DX（同じ #1a1a1a）との境目が半端な画素に来ると、後ろの明るい地が 1px の線で覗く
	   （375・1280 幅）。同じ色を 1px 下へ伸ばして塞ぐ（S3 検証の差し戻し 2026-10-01） */
	box-shadow: 0 1px 0 0 var(--color-black2);
}

.p-svisible__head {
	position: relative;
}

/* 612:255 / 641:175 コピーの背景に敷く線画（インライン SVG。opacity .3）。
   線描画そのものは style.css の svg[data-line-draw] と js/line-draw.js（TOP 理念と同じ） */
.p-svisible__sketch {
	--line-draw-color: var(--st-on-dark);

	position: absolute;
	top: var(--st-visible-sketch-top);
	left: var(--st-visible-sketch-left);
	display: block;
	width: var(--st-visible-sketch-width);
	max-width: none;
	height: auto;
	opacity: var(--st-visible-sketch-opacity);
	pointer-events: none;
}

svg.p-svisible__sketch[data-line-draw] :is(path, line, polyline, polygon, rect, circle, ellipse) {
	stroke-dasharray: var(--st-visible-sketch-dash);
	stroke-dashoffset: var(--st-visible-sketch-dash);
}

.p-svisible__copy {
	position: relative;
	text-align: center;
}

.p-svisible__eyebrow {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--st-visible-eyebrow);
	font-weight: var(--fw-medium);
	line-height: 1.12;
	letter-spacing: var(--ls-base);
	color: var(--color-gray2);
}

.p-svisible__heading {
	margin: 0;
	font-size: var(--st-visible-heading);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-title);
	color: var(--st-on-dark);
}

.p-svisible__cards {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-svisible__card {
	position: relative;
}

.p-svisible__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--st-fv-band-radius);
}

.p-svisible__media img {
	display: block;
	width: 100%;
	height: var(--st-visible-card-height);
	object-fit: cover;
}

/* 572:569 写真の下端を背景の黒に溶かす */
.p-svisible__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--st-visible-card-shade);
	background: linear-gradient(180deg, var(--st-black2-0) 0%, var(--color-black2) 100%);
}

/* 写真の下端にかぶり、少し下にはみ出す */
.p-svisible__card-eng {
	position: absolute;
	top: var(--st-visible-card-eng-top);
	right: 0;
	left: 0;
	margin: 0;
	font-size: var(--st-visible-card-eng);
	line-height: 1.6;
	letter-spacing: normal;
	text-align: center;
	color: var(--st-visible-eng);
}

.p-svisible__card-label {
	font-size: var(--st-visible-card-label);
	font-weight: var(--fw-bold);
	line-height: 2;
	letter-spacing: var(--ls-wide);
	text-align: center;
	color: var(--st-on-dark);
}

.p-svisible__lead {
	font-size: var(--st-visible-lead);
	font-weight: var(--fw-regular);
	line-height: 2.5;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--color-gray2);
}

/* PC は 5 行（612:283）、SP は 4 段落（641:208） */
.p-svisible__lead--sp {
	display: none;
}

/* 動きを減らす設定 / JS 無効時: 線画は描き終えた状態で見せる（線は JS が合図を出すまで
   dashoffset で隠れている）。JS 無効の <noscript> 側は functions.php の exterior_exone_store_noscript_style() */
@media (prefers-reduced-motion: reduce) {
	svg.p-svisible__sketch[data-line-draw] :is(path, line, polyline, polygon, rect, circle, ellipse) {
		stroke-dashoffset: 0;
	}
}

@media (scripting: none) {
	svg.p-svisible__sketch[data-line-draw] :is(path, line, polyline, polygon, rect, circle, ellipse) {
		stroke-dashoffset: 0;
	}
}

/* DX EXPERIENCE は TOP の .p-dx（style.css）をそのまま使う。ここで書くのは JS 無効時だけ:
   SP は 1 ステップずつ JS で入れ替えるため、JS が無いと 02・03 が読めない。
   支店ページに限り、ピン留めをやめて 3 ステップを縦に並べる（TOP は変えない） */
@media (scripting: none) and (max-width: 1024px) {
	.is-store-page .p-dx {
		height: auto;
	}

	.is-store-page .p-dx__inner {
		position: static;
		height: auto;
		padding-block: calc(20 * var(--dx-su)) calc(80 * var(--dx-su));
	}

	.is-store-page .p-dx__list {
		row-gap: var(--dx-sp-steps-gap);
	}

	.is-store-page .p-dx__step {
		grid-area: auto;
		opacity: 1;
		transform: none;
	}

	.is-store-page .p-dx__steps {
		padding-left: 0;
	}

	.is-store-page .p-dx__dots {
		display: none;
	}
}

/* ============================================================
   PLANS（612:804 PACKAGE / 612:807 HIGH-END。SP 641:274〜641:360）
   ------------------------------------------------------------
   PACKAGE は #f3f3f4 一色（旧カンプの灰 → 白の切り替えは無くなった）、
   ハイエンドの塊だけが黒。PACKAGE 下の住宅パース帯は p-sstrip--plans を
   施工イメージ帯と同じエンドレスロールで流す（guide 617:41）。
   ============================================================ */
.p-splans {
	background: var(--st-bg-light); /* 612:116 */
}

/* 641:279 SP だけ 2 行に折る */
.p-splans__jp-pc {
	display: inline;
}

.p-splans__jp-sp {
	display: none;
}

/* 620:286 本文とパッケージプランをつなぐ飾り線 */
.p-splans__divider {
	display: block;
	width: 0;
	height: var(--st-plans-divider-height);
	margin-inline: auto;
	border-left: var(--border-thin) solid var(--st-line-plans);
}

.p-splans__text {
	text-align: center;
}

.p-splans__label {
	margin: 0;
	font-size: var(--st-plans-label);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-wide);
	color: var(--color-black2); /* 612:312（旧 #4d4d4d） */
}

.p-splans__eng {
	margin: 0;
	font-size: var(--st-plans-eng);
	letter-spacing: var(--st-plans-eng-ls);
	color: var(--color-black2);
}

.p-splans__copy {
	font-size: var(--st-plans-copy);
	font-weight: var(--fw-regular);
	line-height: 2;
	letter-spacing: var(--ls-base);
	color: var(--color-black1);
}

.p-splans__media {
	position: relative;
}

/* 書き出し画像の比率はカンプのノード枠と違うので、枠の比率に合わせる
   （アイコン・線画と同じ方針。高さが伸びて次の要素に食い込むのを防ぐ） */
.p-splans__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* 612:308 / 641:284。カンプは住宅パース（3:2 の透過 PNG）を枠より大きく置いて切り抜いている
   （w121.75% / h160.32% / left -11.1% / top -30.64%）。同じ切り抜きにして、家を枠いっぱいに見せる
   （S4 検証の差し戻し 2026-10-01。以前は全体を縮めて収めていて、家が小さく下に台が見えていた） */
.p-splans__block--package .p-splans__media {
	aspect-ratio: 857 / 433.9;
	overflow: hidden;
}

.p-splans__block--package .p-splans__media img {
	position: absolute;
	top: -30.64%;
	left: -11.1%;
	width: 121.75%;
	max-width: none;
	height: 160.32%;
	object-fit: fill;
}

/* 612:343 は写真なので枠に合わせて切る */
.p-splans__block--highend .p-splans__media img {
	aspect-ratio: 1022.6 / 567.6;
}

/* 612:582 / 641:293 パースの下端を背景色に溶かす（終端は背景色。決定 B-2 Q2） */
.p-splans__block--package .p-splans__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--st-plans-fade);
	background: linear-gradient(180deg, var(--st-bg-light-0) 0%, var(--st-bg-light) 100%);
}

.p-splans__highend {
	background: var(--color-black2);
}

.p-splans__block--highend .p-splans__label,
.p-splans__block--highend .p-splans__eng {
	color: var(--st-on-dark);
}

.p-splans__block--highend .p-splans__copy {
	line-height: 2.22; /* 18px で 40px */
	color: var(--color-gray2);
}

.p-splans__features {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-splans__feature {
	display: grid;
	grid-template-rows: var(--st-plans-icon-row) auto;
	text-align: center;
}

/* 602:90 / 602:102 列の区切り線 */
.p-splans__feature + .p-splans__feature {
	border-left: var(--border-thin) solid var(--st-line-feature);
}

.p-splans__features--dark .p-splans__feature + .p-splans__feature {
	border-left-color: var(--st-line-feature-dark);
}

.p-splans__icon {
	align-self: end;
	width: calc(var(--icon-w) * var(--st-plans-icon-unit));
	height: calc(var(--icon-h) * var(--st-plans-icon-unit));
	margin-inline: auto;
	object-fit: contain;
}

.p-splans__feature-label {
	font-size: var(--st-plans-feature);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-black2); /* 612:305 付近（旧 #4d4d4d） */
}

.p-splans__features--dark .p-splans__feature-label {
	font-weight: var(--fw-medium);
	color: var(--st-on-dark); /* 612:355（旧 #d9d9d9） */
}

/* WORKS（612:813）は DX ページと同じ部品・同じモード（.p-cworks--dx・gallery）。
   template-parts/store/section-works.php / css/works.css。
   ここでは新カンプの影・見積の罫線と、要望・提案の本文の大きさ（PC は 18 にそろえる。
   旧決定・決定 B「カンプの不備」）だけを支店側で上書きする
  （store.css は支店ページでしか読まれないので DX ページには効かない）。 */
.is-store-page .p-cworks {
	--cw-rule: var(--st-line); /* 612:815（旧 #c8c8c8） */
	--cw-box-text2: var(--cw-box-text); /* 612:717 は 16 だが 612:712 の 18 にそろえる */
}

.is-store-page .p-cworks__main,
.is-store-page .p-cworks__sub img,
.is-store-page .p-cworks__render {
	box-shadow: var(--st-shadow);
}

/* ============================================================
   REVIEWS（620:289 / Group 369 / 669:223）
   ------------------------------------------------------------
   白背景にカード 3 枚。写真はユーザー支給の 3 枚（2026-10-10）。
   本文は省略せず全文を出し、カードの高さは一番長い文章にそろえる。
   カンプの「タイトル」行は使わず、本文の下に名前を右寄せで出す（2026-10-10 の決定）。
   ============================================================ */
.p-sreviews {
	background: var(--st-white);
}

.p-sreviews__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sreviews__card {
	overflow: hidden;
	border-radius: var(--st-card-radius);
	box-shadow: var(--st-shadow); /* 612:460（旧は枠線 #d9d9d9） */
	background: var(--st-white);
}

.p-sreviews__thumb {
	display: block;
	width: 100%;
	background: var(--color-gray2); /* 写真が無いときの灰色（カンプのプレースホルダ） */
	object-fit: cover;
}

.p-sreviews__rating {
	display: flex;
	align-items: center;
	margin: 0;
}

.p-sreviews__stars {
	display: block;
	flex: none;
}

.p-sreviews__score {
	font-family: var(--font-ui);
	font-size: var(--st-reviews-score);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-black1);
}

.p-sreviews__text {
	margin: 0;
	font-size: var(--st-reviews-text);
	font-weight: var(--fw-regular);
	line-height: 1.8;
	letter-spacing: var(--ls-wide);
	color: var(--color-black1);
}

/* 本文の下の名前（地域 / 年代）。カンプに無いので本文と同じ色で小さく右寄せ */
.p-sreviews__name {
	margin: 0;
	font-size: var(--st-reviews-name);
	font-weight: var(--fw-regular);
	line-height: 1.8;
	letter-spacing: var(--ls-wide);
	color: var(--color-black1);
	text-align: right;
}

/* ============================================================
   FLOW（612:824 / 612:376 矢羽根 / 612:416 行 / 612:417 V 字。SP 641:466〜641:514）
   ------------------------------------------------------------
   矢羽根の形は clip-path、段階色は --st-flow-step1〜7。
   7 行目だけ下辺中央が V 字に尖って次セクション（Quality）の写真に
   食い込むので、はみ出し分を最後の行の負マージンで作る。
   SP は矢羽根なしの縦カード + 縦矢印（SP ブロック）。
   ============================================================ */
.p-sflow {
	position: relative;
	z-index: 1; /* はみ出した 7 行目を Quality の写真より前に出す */
	background: var(--st-bg-light);
}

.p-sflow__chevrons {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sflow__chevron {
	display: grid;
	flex: 1 1 0;
	place-items: center;
	height: var(--st-flow-chevron-height);
	clip-path: polygon(
		0 0,
		calc(100% - var(--st-flow-notch)) 0,
		100% 50%,
		calc(100% - var(--st-flow-notch)) 100%,
		0 100%,
		var(--st-flow-notch) 50%
	);
	font-size: var(--st-flow-chevron);
	font-weight: var(--fw-bold);
	line-height: 2.2;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--st-on-dark);
}

/* 先頭は左辺、最後は右辺が直線 */
.p-sflow__chevron:first-child {
	clip-path: polygon(
		0 0,
		calc(100% - var(--st-flow-notch)) 0,
		100% 50%,
		calc(100% - var(--st-flow-notch)) 100%,
		0 100%
	);
}

.p-sflow__chevron:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--st-flow-notch) 50%);
}

.p-sflow__chevron:nth-child(1) {
	background: var(--st-flow-step1);
}

.p-sflow__chevron:nth-child(2) {
	background: var(--st-flow-step2);
}

.p-sflow__chevron:nth-child(3) {
	background: var(--st-flow-step3);
}

.p-sflow__chevron:nth-child(4) {
	background: var(--st-flow-step4);
}

.p-sflow__chevron:nth-child(5) {
	background: var(--st-flow-step5);
}

.p-sflow__chevron:nth-child(6) {
	background: var(--st-flow-step6);
}

.p-sflow__chevron:nth-child(7) {
	background: var(--st-flow-step7);
}

.p-sflow__rows {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sflow__row {
	display: grid;
	align-items: center;
	background: var(--st-white);
	box-shadow: var(--st-shadow); /* 612:416 */
}

.p-sflow__number {
	font-family: var(--font-ui);
	font-size: var(--st-flow-number);
	font-weight: var(--fw-bold);
	line-height: 2.2;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--st-number);
}

.p-sflow__row-title {
	margin: 0;
	font-size: var(--st-flow-row-title);
	font-weight: var(--fw-bold);
	line-height: 2.2;
	letter-spacing: var(--ls-base);
	color: var(--color-black2);
}

.p-sflow__row-desc {
	margin: 0;
	font-size: var(--st-flow-row-desc);
	font-weight: var(--fw-regular);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-black1);
}

/* 612:417 / 641:508 7 行目: 下辺中央が --st-flow-curve-depth だけ下に尖る。
   clip-path は box-shadow まで切ってしまうので、白い形は ::before で切り抜き、
   影は形に沿う drop-shadow を行に付ける（--st-shadow と同じ見え方の値） */
.p-sflow__row:last-child {
	position: relative;
	margin-bottom: calc(-1 * var(--st-flow-bleed));
	padding-bottom: var(--st-flow-curve-depth);
	background: none;
	box-shadow: none;
	filter: drop-shadow(var(--st-shadow-drop));
}

.p-sflow__row:last-child::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--st-white);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--st-flow-curve-depth)),
		50% 100%,
		0 calc(100% - var(--st-flow-curve-depth))
	);
}

/* ============================================================
   Quality（612:839 / 612:106 / 612:107 / 612:499 / 612:498 / 612:500 /
   612:583。SP 641:1251〜641:1261）
   ------------------------------------------------------------
   写真 1 枚 + 黒 30%（PC・SP とも）の上にテキスト。上端には FLOW の
   7 行目が食い込む。旧カンプの保証注記は無くなった（決定 A）。
   ============================================================ */
.p-squality {
	position: relative;
	overflow: hidden;
	background: var(--color-black2);
}

.p-squality__bg {
	position: absolute;
	inset: 0;
}

.p-squality__bg-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--st-quality-image-position) center;
}

/* 669:257 写真の上に重ねる黒 */
.p-squality__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--st-photo-shade);
}

.p-squality__inner {
	position: relative;
	text-align: center;
}

.p-squality__eng {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--st-quality-eng);
	font-weight: var(--fw-medium);
	line-height: 1.12;
	letter-spacing: var(--ls-base);
	color: var(--st-on-dark);
}

.p-squality__heading {
	margin: 0;
	font-size: var(--st-quality-heading);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-title);
	color: var(--st-on-dark);
}

.p-squality__lead {
	font-size: var(--st-quality-lead);
	font-weight: var(--fw-medium);
	line-height: 2;
	letter-spacing: var(--ls-base);
	color: var(--color-gray2);
}

/* 669:969 + 669:967 */
.p-squality__badge {
	display: grid;
	place-items: center;
	border: var(--border-thin) solid var(--st-on-dark); /* 612:583（旧 #eeeeee） */
	background: var(--st-badge-bg);
	font-size: var(--st-quality-badge);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	letter-spacing: var(--ls-title);
	color: var(--st-on-dark);
}

/* 「施工保証 5年」は 1 行。「5」だけ 2px 大きい */
.p-squality__badge-text {
	white-space: nowrap;
}

.p-squality__badge-number {
	font-size: var(--st-quality-badge-num);
}

/* ============================================================
   FAQ（612:843 / 612:536 / 612:538。開いた状態 641:1462。SP 641:1264〜 / 666:32）
   ------------------------------------------------------------
   質問行は button。回答は hidden 属性で出し入れし、開くときだけ
   フェード + スライドで現れる（js/store-faq.js）。開くのは 1 つだけ。
   開閉の演出はカンプに無いので、速さは共通の --transition-base に合わせる。
   JS が動かないときは回答を最初から出す（下の @media (scripting: none)）。
   ============================================================ */
.p-sfaq {
	background: var(--st-bg-light);
}

/* 669:873 だけ行送りが 2.2 */
.p-sfaq__lead {
	line-height: 2.2;
}

.p-sfaq__list {
	display: grid;
}

.p-sfaq__item {
	overflow: hidden;
	border-radius: var(--st-card-radius);
	background: var(--st-white);
	box-shadow: var(--st-shadow); /* 612:536 */
}

.p-sfaq__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.p-sfaq__q {
	display: grid;
	align-items: center;
	width: 100%;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.p-sfaq__mark {
	font-family: var(--font-ui);
	font-size: var(--st-faq-mark);
	font-weight: var(--fw-bold);
	line-height: 2.2;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--st-number);
}

.p-sfaq__q-text {
	font-size: var(--st-faq-q);
	font-weight: var(--fw-bold);
	line-height: 2.2;
	letter-spacing: var(--ls-wide);
	color: var(--color-black2);
}

/* 612:538 / 641:1311。閉じているときは右向き、開くと下向き（画像は下向きが元） */
.p-sfaq__arrow {
	display: block;
	width: var(--st-faq-arrow-width);
	height: var(--st-faq-arrow-height);
	justify-self: center;
	transform: rotate(-90deg);
	transition: transform var(--transition-base);
}

.p-sfaq__q.is-open .p-sfaq__arrow {
	transform: rotate(0deg);
}

.p-sfaq__answer {
	animation: st-faq-open var(--transition-base) both;
}

/* 641:1314 Regular 14 / 2 / 2px #1a1a1a（SP 641:1309 は 10 / 2 / 1px） */
.p-sfaq__answer-text {
	margin: 0;
	font-size: var(--st-faq-a);
	font-weight: var(--fw-regular);
	line-height: 2;
	letter-spacing: var(--ls-wide);
	color: var(--color-black2);
}

@keyframes st-faq-open {
	from {
		opacity: 0;
		transform: translateY(-0.5em);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-sfaq__answer {
		animation: none;
	}

	.p-sfaq__arrow {
		transition: none;
	}
}

/* JS 無効時: 質問を押しても開けないので、回答を最初から出す（山形も下向き）。
   functions.php の exterior_exone_store_noscript_style() と併用 */
@media (scripting: none) {
	.is-store-page .p-sfaq__answer[hidden] {
		display: block;
		animation: none;
	}

	.is-store-page .p-sfaq__arrow {
		transform: none;
	}
}

/* ============================================================
   AREA（620:292 / 628:302 / Group 472 / 628:337 / 628:329 /
   628:307 / 628:306 / 1126:34 / 1148:48 / 1148:43 / 1151:93-101）
   ------------------------------------------------------------
   上端の店舗写真には見出しだけが乗り、その下に白パネル（リード文・
   店舗情報テーブル・外観写真）。弧状ギャラリー（1126:34）は内側が透明な
   合成 1 枚なので、PC ではパネルに重ねて置き、空いた中心にロゴと支店名を出す。
   ============================================================ */
.p-sarea {
	position: relative;
	/* 円筒の端の写真が画面の外へはみ出しても横スクロールを出さない */
	overflow-x: clip;
	/* アーチの写真の z-index（最大 200）をこのセクションの中に閉じ込める。
	   これが無いとページ全体の重なりに参加して、追従するヘッダー（--z-header: 100）の上に出てしまう（2026-10-10） */
	isolation: isolate;
	background: var(--st-area-bg);
}

.p-sarea__bg {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--st-area-bg-height);
}

.p-sarea__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--st-area-bg-position);
}

/* PC は支店ごとの切り抜き位置（inc/store-data.php の bg_position → インラインの --st-area-bg-position-branch）。
   SP は従来どおり上端（--st-area-bg-position: 50% 0%）に揃える */
@media (min-width: 1025px) {
	.p-sarea__bg img {
		object-position: var(--st-area-bg-position-branch, var(--st-area-bg-position));
	}
}

/* 628:302。このページで唯一白抜きの見出し */
.p-sarea__title {
	position: relative;
	color: var(--st-white);
}

/* 黒帯の負のマージン（パネル上端より上に出す）がパネルの外へ相殺されないように flow-root */
.p-sarea__panel {
	display: flow-root;
	position: relative;
	background: var(--st-white);
	box-shadow: var(--st-shadow); /* 612:638 */
}

/* 628:337。パネルの上端にかぶる黒帯 */
.p-sarea__banner {
	display: grid;
	place-items: center;
	margin: 0 auto;
	background: var(--color-black2);
	font-size: var(--st-area-banner);
	font-weight: var(--fw-bold);
	line-height: 2.5;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--st-on-dark);
}

.p-sarea__lead {
	font-size: var(--st-area-lead);
	line-height: 2;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--color-black1);
}

/* 628:307 の区切り線は行と行の間だけ（最終行の下には無い） */
.p-sarea__table {
	margin: 0;
}

.p-sarea__row {
	display: grid;
}

.p-sarea__row + .p-sarea__row {
	border-top: var(--border-thin) solid var(--st-line); /* 612:641 */
}

.p-sarea__row-label,
.p-sarea__row-value {
	margin: 0;
	font-size: var(--st-area-table);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
}

.p-sarea__row-label {
	color: var(--color-black2);
}

.p-sarea__row-value {
	color: var(--color-black1);
}

.p-sarea__photo {
	display: block;
	width: 100%;
	aspect-ratio: 515.4 / 343.1;
	border-radius: var(--st-card-radius);
	object-fit: cover;
}

/* --- 店内写真のアーチ状ロール（612:661 / 641:1464）。位置は js/store-arch.js が
   --st-arch-a（PC: 円筒上の角度）/ --st-arch-s（SP: 列の何枚目か）で動かす --- */
.p-sarea__arch-list {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sarea__arch-item {
	position: absolute;
	overflow: hidden;
	box-shadow: var(--st-shadow-card); /* 641:1464 */
}

/* 短冊（PC で js/store-arch.js が作る）。SP は直線の列なので使わない */
.p-sarea__arch-strips {
	display: none;
}

.p-sarea__arch-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-sarea__logo {
	margin: 0;
	line-height: 0;
	text-align: center;
}

.p-sarea__logo img {
	width: var(--st-area-logo-width);
	height: auto;
	/* 共通リセットで img は display: block のため、親の text-align では中央に寄らない */
	margin-inline: auto;
}

.p-sarea__branch {
	margin: 0;
	font-size: var(--st-area-branch);
	font-weight: var(--fw-medium);
	line-height: 2;
	letter-spacing: var(--ls-base);
	text-align: center;
	color: var(--color-black1);
}

/* --- Local Expertise（1148:48 / 1148:43 / 1148:45 / 1148:28 / 1148:29） --- */
.p-sarea__local {
	position: relative;
}

/* 写真（1148:43）はこのパネルの下に潜る */
.p-sarea__local-body {
	position: relative;
	z-index: 1;
	background: var(--st-white);
	box-shadow: var(--st-shadow); /* 612:667 */
}

.p-sarea__local-eng {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--st-area-local-eng);
	font-weight: var(--fw-medium);
	line-height: 1.12;
	letter-spacing: var(--ls-base);
	color: var(--color-black2);
}

.p-sarea__local-heading {
	font-size: var(--st-area-local-heading);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-title);
	color: var(--color-black2);
}

.p-sarea__local-lead {
	margin: 0;
	font-size: var(--st-area-local-lead);
	line-height: 2;
	letter-spacing: var(--ls-base);
	color: var(--color-black1); /* 612:671（旧 #454545） */
}

.p-sarea__local-photo {
	display: block;
	width: 100%;
	object-fit: cover;
	box-shadow: var(--st-shadow);
}

/* --- カード 4 枚（1151:93-101） --- */
.p-sarea__cards {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-sarea__card {
	text-align: center;
}

/* 1148:80 はグループの最前面。円形写真の上端に数字が重なる */
.p-sarea__card-number {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--st-area-card-number);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--st-area-number);
}

.p-sarea__card-photo {
	display: block;
	width: var(--st-area-card-photo);
	height: var(--st-area-card-photo);
	margin-inline: auto;
	border-radius: 50%;
	object-fit: cover;
}

.p-sarea__card-label-sp {
	display: none;
}

.p-sarea__card-label {
	font-size: var(--st-area-card-label);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-base);
	color: var(--color-black2); /* 旧 #4d4d4d */
}

/* ============================================================
   お問い合わせ CTA（Group 373 / 639:366 / 639:364 / 639:406 / Group 340）
   ------------------------------------------------------------
   TOP の RECRUIT と骨格は同じだが、文字サイズとボタン 2 個が別物なので
   共通部品にはしない。暗幕は PC だけカンプどおり左からのグラデ。
   ============================================================ */
.p-scta {
	position: relative;
	overflow: hidden;
	background: var(--color-black2);
	color: var(--color-white3);
	text-align: center;
}

.p-scta__bg {
	position: absolute;
	inset: 0;
}

.p-scta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--st-cta-image-position);
}

/* 639:407 */
.p-scta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--st-cta-overlay);
}

.p-scta__inner {
	position: relative;
}

.p-scta__eng {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--st-cta-eng);
	font-weight: var(--fw-medium);
	line-height: 1.12;
	letter-spacing: var(--ls-base);
	color: var(--color-white3);
}

.p-scta__heading {
	margin: 0;
	font-size: var(--st-cta-heading);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ls-title);
	color: var(--color-white3);
}

.p-scta__lead {
	font-size: var(--st-cta-lead);
	font-weight: var(--fw-medium);
	line-height: 2;
	letter-spacing: var(--ls-base);
	color: var(--color-gray2);
}

.p-scta__buttons {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-scta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--st-cta-button);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: var(--st-cta-button-ls);
	color: var(--st-white);
}

/* 639:401 / 639:413 */
.p-scta__button--line {
	background: var(--st-cta-line);
}

.p-scta__button--tel {
	background: var(--color-orange1);
}

.p-scta__button-icon {
	display: block;
}

/* COLUMN（.p-scolumn）は共通部品 css/column.css */

/* ============================================================
   支店一覧（親ページ /store/・デザイン未定の暫定表示）
   ============================================================ */
.p-store-index {
	margin: var(--st-heading-gap) 0 0;
	padding: 0;
	list-style: none;
}

.p-store-index__item + .p-store-index__item {
	margin-top: 0.75em;
}

.p-store-index__link {
	font-size: var(--fs-copy-md);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
}

/* ============================================================
   PC（1025px 以上）: カンプ 612:99 の配置（S3 以降の対象セクションは旧 534:628）
   ------------------------------------------------------------
   FV のコピー塊（x141.6 y280.4）は FV の中で絶対配置する（基本ルール側）。
   FV 以降のセクションは、長さをすべて --st-vu（下の比例ブロックで定義）
   に載せてここに書く。数値はカンプ 1920 の実測値そのまま。
   ============================================================ */
@media (min-width: 1025px) {
	.p-sfv__logo {
		margin-left: var(--st-fv-logo-indent); /* x146.4 − x141.6 */
	}

	/* --- 導入コピー（y1237.5〜1826.9） --- */
	.p-sintro {
		--st-intro-icon-w: calc(171.2 * var(--st-vu));

		/* 上: 写真 4 枚の下端 1349.8 → アイコン 1431.3 / 下: 本文下端 1739.3 → 帯 1826.9 */
		padding: calc(81.5 * var(--st-vu)) 0 calc(87.6 * var(--st-vu));
	}

	.p-sintro__heading {
		margin: calc(17.2 * var(--st-vu)) 0 0;
	}

	.p-sintro__lead {
		margin: calc(16.1 * var(--st-vu)) 0 0;
	}

	/* --- 施工イメージ帯（y1826.9〜2035.9） --- */
	.p-sstrip {
		--st-strip-unit: var(--st-vu);
		--st-strip-fade-height: calc(28 * var(--st-vu)); /* 612:575 */

		background: var(--st-bg-light);
		/* 下端 27.3 を次セクションに食い込ませる */
		margin-bottom: calc(-27.3 * var(--st-vu));
	}

	/* --- 実績数字（y2115.9〜2411.9） --- */
	.p-sstats {
		--st-stats-ring-size: calc(230 * var(--st-vu));
		--st-stats-ring-width: calc(3 * var(--st-vu));
		--st-stats-photo-size: calc(200 * var(--st-vu));

		padding: calc(107.3 * var(--st-vu)) 0 calc(130.2 * var(--st-vu));
	}

	.p-sstats__list {
		grid-template-columns: repeat(4, auto);
		column-gap: calc(60 * var(--st-vu)); /* ピッチ 290 − 230 */
	}

	.p-sstats__label {
		margin: calc(34 * var(--st-vu)) 0 0;
	}

	/* --- 不安提示（y2542.1〜2924.6） --- */
	.p-sconcern {
		padding: 0 0 calc(149.2 * var(--st-vu));
	}

	/* 1920 を超える幅では、内容（1920 幅ぶん）を画面中央に置く（背景は画面幅いっぱい）。
	   1920 以下では 100vw と同じ幅なので見た目は変わらない */
	.p-sconcern__body {
		width: calc(1920 * var(--st-vu));
		margin-inline: auto;
	}

	/* 612:153。メタデータ上は x1771.8 だが、カンプの見た目は左右反転で x876.5〜1771.8。
	   本文（.p-sconcern__body）の中にあるので、文字より下（z-index: -1）に敷く */
	.p-sconcern__sketch {
		position: absolute;
		top: 0;
		left: calc(876.5 * var(--st-vu));
		z-index: -1;
		width: calc(895.3 * var(--st-vu));
		height: calc(455 * var(--st-vu));
	}

	/* 612:222 黒帯 894x91 / 612:223 見出し x212.2 */
	.p-sconcern__heading {
		display: flex;
		align-items: center;
		width: calc(894 * var(--st-vu));
		height: calc(91 * var(--st-vu));
		margin-left: calc(178 * var(--st-vu));
		padding-left: calc(34.2 * var(--st-vu));
	}

	.p-sconcern__list {
		margin: calc(41.2 * var(--st-vu)) 0 0 calc(177.6 * var(--st-vu));
	}

	.p-sconcern__note {
		margin: calc(40.7 * var(--st-vu)) 0 0 calc(188 * var(--st-vu));
	}

	/* --- 選ばれる理由（y3073.8〜5704.5） --- */
	.p-sreasons {
		--st-reasons-photo-height: calc(1532 * var(--st-vu));
		--st-reasons-shade-height: calc(656.6 * var(--st-vu));
		--st-reasons-fade-height: calc(365.9 * var(--st-vu));
		--st-reasons-logo-width: calc(179.9 * var(--st-vu));
		--st-reasons-house-width: calc(854.7 * var(--st-vu));
		--st-reasons-icon-unit: var(--st-vu);

		padding: calc(163 * var(--st-vu)) 0 calc(160 * var(--st-vu));
	}

	.p-sreasons__copy-lead {
		margin: calc(23.5 * var(--st-vu)) 0 0;
	}

	/* Group 354（x192.1 y4344.5 1536.5x1200）。中身は円の上に絶対配置する */
	.p-sreasons__diagram {
		width: calc(1536.5 * var(--st-vu));
		height: calc(1200 * var(--st-vu));
		margin: calc(814.2 * var(--st-vu)) auto 0;
	}

	.p-sreasons__ring {
		left: calc(168.3 * var(--st-vu));
		width: calc(1200 * var(--st-vu));
		height: calc(1200 * var(--st-vu));
	}

	.p-sreasons__center {
		position: absolute;
		top: calc(117.5 * var(--st-vu));
		right: 0;
		left: 0;
	}

	.p-sreasons__title {
		margin: calc(6.4 * var(--st-vu)) 0 0;
	}

	.p-sreasons__title-lead {
		margin: calc(25.8 * var(--st-vu)) 0 0;
	}

	/* 住宅 CG と英字はカンプ上でわずかに前の行に食い込む */
	.p-sreasons__house {
		margin-top: calc(-17.3 * var(--st-vu));
	}

	.p-sreasons__eng {
		margin: calc(-14.8 * var(--st-vu)) 0 0;
	}

	.p-sreasons__eng-sub {
		margin: calc(11 * var(--st-vu)) 0 0;
	}

	.p-sreasons__items {
		position: absolute;
		inset: 0;
	}

	/* 円周上の 6 項目（--item-x はラベルの中心 x、--icon-y はアイコン上端。
	   いずれも Group 354 の左上からの距離） */
	.p-sreasons__item {
		position: absolute;
		top: calc(var(--icon-y) * var(--st-vu));
		left: calc(var(--item-x) * var(--st-vu));
		width: max-content;
		translate: -50% 0; /* transform は浮遊が使うので中央寄せは translate で行う */
	}

	.p-sreasons__item:nth-child(1) {
		--item-x: 316.3;
		--icon-y: 115.8;
	}

	.p-sreasons__item:nth-child(2) {
		--item-x: 1240.5;
		--icon-y: 119;
	}

	.p-sreasons__item:nth-child(3) {
		--item-x: 188.5;
		--icon-y: 452.1;
	}

	.p-sreasons__item:nth-child(4) {
		--item-x: 1388.5;
		--icon-y: 452;
	}

	.p-sreasons__item:nth-child(5) {
		--item-x: 316.3;
		--icon-y: 826.7;
	}

	.p-sreasons__item:nth-child(6) {
		--item-x: 1240.5;
		--icon-y: 828.7;
	}

	.p-sreasons__item-lead {
		margin: calc(24.6 * var(--st-vu)) 0 0;
	}

	.p-sreasons__item-label {
		margin: 0;
	}

	/* --- SERVICE（y5704.5〜8413.9） --- */
	.p-sservice {
		--st-service-card-height: calc(519.6 * var(--st-vu));
		--st-service-card-shade: calc(246.4 * var(--st-vu));
		--st-service-card-eng-bottom: calc(31.8 * var(--st-vu));
		--st-service-banner-top: calc(-45.4 * var(--st-vu));
		--st-service-banner-width: calc(919 * var(--st-vu));
		--st-service-banner-height: calc(90.6 * var(--st-vu));
		--st-service-line-top: calc(158.8 * var(--st-vu));
		--st-service-photo-height: calc(206.2 * var(--st-vu));

		padding: calc(162.2 * var(--st-vu)) 0 calc(159.9 * var(--st-vu));
	}

	.p-sservice__cards {
		grid-template-columns: repeat(2, calc(779.4 * var(--st-vu)));
		justify-content: center;
		column-gap: calc(48.4 * var(--st-vu));
		margin-top: calc(75.5 * var(--st-vu));
	}

	.p-sservice__card-label {
		margin: calc(24 * var(--st-vu)) 0 0;
	}

	.p-sservice__panel {
		width: calc(1600 * var(--st-vu));
		margin: calc(118.6 * var(--st-vu)) auto 0;
		padding: calc(105.2 * var(--st-vu)) calc(85.1 * var(--st-vu)) calc(80.3 * var(--st-vu));
	}

	.p-sservice__lead {
		margin: 0;
	}

	.p-sservice__rows {
		margin-top: calc(80 * var(--st-vu));
	}

	/* 1 行 = 左のテキスト列 + 右の写真 3 枚。区切り線は写真の下をくぐる */
	.p-sservice__row {
		height: calc(253.4 * var(--st-vu));
	}

	.p-sservice__row + .p-sservice__row {
		margin-top: calc(74.9 * var(--st-vu)); /* 行ピッチ 328.3 − 253.4 */
	}

	.p-sservice__row-head {
		position: absolute;
		top: calc(59.7 * var(--st-vu));
		left: 0;
	}

	.p-sservice__row-label {
		margin: calc(4.1 * var(--st-vu)) 0 0;
	}

	.p-sservice__photos {
		position: absolute;
		top: 0;
		left: calc(308.6 * var(--st-vu)); /* 写真 1 枚目 x553.7 − 行の左端 245.1 */
		grid-template-columns: repeat(3, calc(341.35 * var(--st-vu)));
		column-gap: calc(30.6 * var(--st-vu));
	}

	.p-sservice__photo-label {
		margin-top: calc(15.2 * var(--st-vu));
	}

	/* --- 見える安心（612:786 上部。y8414〜9757.5） --- */
	.p-svisible {
		--st-visible-sketch-dash: 1.75; /* 線画の表示幅 1283 / viewBox 737 = 最大 1.741 倍 */
		--st-visible-eyebrow: calc(32 * var(--st-vu)); /* 612:257 */
		--st-visible-heading: calc(48 * var(--st-vu)); /* 612:256 */
		--st-visible-card-eng: calc(48 * var(--st-vu));
		--st-visible-card-label: calc(24 * var(--st-vu));
		--st-visible-lead: calc(20 * var(--st-vu)); /* 612:283 */
		--st-visible-card-height: calc(224.7 * var(--st-vu));
		--st-visible-card-shade: calc(93 * var(--st-vu));
		--st-visible-card-eng-top: calc(178 * var(--st-vu)); /* 英字 y9302.5 − 写真上端 y9124.5 */

		/* 本文の下端（+1343.5）→ DX 見出しの上端（637:57 の +1547.4）= 204。
		   続く TOP の DX は中身（カンプ 863.8 + 下の詰め物 8.6）を画面の縦中央に置くので、
		   その上の空き（ピン留め前のセクション上端 → 見出し）を差し引いた分だけ下を空ける。
		   --dx-u は style.css の .p-dx と同じ式（DX 側の縮尺） */
		padding: calc(85.7 * var(--st-vu)) 0 max(calc(100.2 * var(--st-vu)), calc(204 * var(--st-vu) - (100vh - 872.4 * min(100vw / 1920, 100vh / 1080)) / 2));
		/* 下限の 100.2 は 1920x1080 での値（204 − 103.8）。縦長の画面（iPad の縦など）では DX の空きが
		   大きくなって 0 まで減り、黒い DX の縁に本文が接してしまうため、基準の幅の余白を下限にする（2026-10-10） */
	}

	/* Group 360。線画の上にコピーが重なる */
	.p-svisible__head {
		width: calc(1233.7 * var(--st-vu));
		height: calc(653.9 * var(--st-vu));
		margin-inline: auto;
	}

	.p-svisible__copy {
		padding-top: calc(270.5 * var(--st-vu)); /* 8770.1 − 8499.6 */
	}

	/* 写真 4 枚（y9124.5）は線画の下端に少しかぶる */
	.p-svisible__cards {
		grid-template-columns: repeat(4, calc(429.3 * var(--st-vu)));
		justify-content: center;
		column-gap: calc(25.2 * var(--st-vu));
		margin-top: calc(-29 * var(--st-vu));
	}

	.p-svisible__card-label {
		margin: calc(30.3 * var(--st-vu)) 0 0; /* 和文 y9379.5 − 写真下端 y9349.2 */
	}

	.p-svisible__lead {
		width: calc(1600 * var(--st-vu));
		margin: calc(80 * var(--st-vu)) auto 0;
	}

	/* --- PLANS（612:804 y10946〜12760 / 612:807 〜13912.3） --- */
	.p-splans {
		--st-plans-divider-height: calc(104.9 * var(--st-vu));
		--st-plans-fade: calc(38.9 * var(--st-vu)); /* 612:582 */
		--st-plans-icon-row: calc(128.2 * var(--st-vu)); /* アイコン下端 y12540.1 − 枠上端 y12411.9 */
		--st-plans-icon-unit: var(--st-vu);

		/* 直前は TOP の DX（.p-dx）。カンプは DX の中身の下端（VIEW MORE の下端 y10824.6）→
		  「PLANS」y11107.9 で 283.3。DX は中身を画面の縦中央に置くので、中身の下端から
		   セクション下端までの空き（画面の高さ − 851.2 単位）/ 2 を差し引く（851.2 は
		   1920x1080 の実測。空き 114.4）。見える安心の padding-bottom（S3）と同じ考え方 */
		padding-top: max(calc(168.9 * var(--st-vu)), calc(283.3 * var(--st-vu) - (100vh - 851.2 * min(100vw / 1920, 100vh / 1080)) / 2));
		/* 下限の 168.9 は 1920x1080 での値（283.3 − 114.4）。縦長の画面では DX の空き（黒）が大きくなって
		   0 まで減り、「PLANS」が黒い縁に接してしまうため、基準の幅の余白を下限にする（2026-10-10） */
	}

	.p-splans__lead {
		width: calc(782.8 * var(--st-vu));
		margin-inline: auto;
	}

	.p-splans__divider {
		margin-top: calc(46.8 * var(--st-vu)); /* 本文（3 行）の下端 11376.9 → 線 11423.7（612:354） */
	}

	/* 612:805。テキスト左（中心 x511.4）・パース右（612:308 y11609） */
	.p-splans__block--package {
		position: relative;
		width: calc(1465.2 * var(--st-vu));
		height: calc(433.9 * var(--st-vu));
		margin: calc(80.4 * var(--st-vu)) auto 0; /* 飾り線の下端 11528.6 → パース 11609 */
	}

	.p-splans__block--package .p-splans__text {
		position: absolute;
		top: calc(34.9 * var(--st-vu));
		left: 0;
		width: calc(568 * var(--st-vu));
	}

	.p-splans__block--package .p-splans__media {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(857 * var(--st-vu));
	}

	/* 英字は和文の行ボックスに少しかぶる */
	.p-splans__eng {
		margin-top: calc(-8 * var(--st-vu));
	}

	/* 左右の負マージンは、最後の 1 文字の後ろに付く字間ぶんの逃がし。
	   これが無いとカンプで 1 行に収まる行が 1px あふれて折り返す */
	.p-splans__copy {
		margin: calc(26 * var(--st-vu)) calc(-1 * var(--ls-base)) 0;
	}

	.p-splans__btn {
		margin-top: calc(80 * var(--st-vu));
	}

	/* 612:803。次セクションへ食い込ませない。間隔はカンプ（31.8〜45）を揃えた 35.1
	   （01 の左端 x33.2 から並べると 05 の左端がカンプの x1625.8 に来る値） */
	.p-sstrip--plans {
		--st-strip-fade-height: calc(27.9 * var(--st-vu)); /* 612:581 */
		--st-strip-gap: var(--st-plans-strip-gap);

		margin-top: calc(76 * var(--st-vu));
		margin-bottom: 0;
		background: none;
	}

	/* 静止時（動きを減らす設定・JS 無効）はカンプどおり x33.2 から並べ、05 は右端で切る。
	   流れているときは継ぎ目が出ないよう左端から */
	.p-sstrip--plans .p-sstrip__list {
		margin-inline: calc(33.2 * var(--st-vu)) 0;
	}

	.p-sstrip--plans .p-sstrip__list.is-running {
		margin-inline: 0;
	}

	.p-splans__features {
		grid-template-columns: repeat(4, 1fr);
		width: calc(1599.5 * var(--st-vu));
		margin: calc(79.9 * var(--st-vu)) auto 0;
	}

	.p-splans__feature-label {
		margin: calc(32.9 * var(--st-vu)) 0 0;
	}

	.p-splans__highend {
		margin-top: calc(120 * var(--st-vu));
		padding-bottom: calc(160 * var(--st-vu));
	}

	/* 612:807。写真左（枠いっぱい）・テキスト右 */
	.p-splans__block--highend {
		position: relative;
		height: calc(687.6 * var(--st-vu));
	}

	.p-splans__block--highend .p-splans__media {
		position: absolute;
		top: calc(120 * var(--st-vu));
		left: 0;
		width: calc(1022.6 * var(--st-vu));
	}

	.p-splans__block--highend .p-splans__text {
		position: absolute;
		top: calc(217.8 * var(--st-vu));
		left: calc(1096.5 * var(--st-vu));
		width: calc(663 * var(--st-vu));
	}

	.p-splans__features--dark {
		margin-top: calc(79.6 * var(--st-vu));
	}

	/* --- REVIEWS（612:819 y16409〜17563.7） --- */
	.p-sreviews {
		padding: calc(162.2 * var(--st-vu)) 0 calc(160 * var(--st-vu));
	}

	.p-sreviews__list {
		grid-template-columns: repeat(3, calc(498.1 * var(--st-vu)));
		justify-content: center;
		column-gap: calc(36.25 * var(--st-vu));
		margin: calc(80 * var(--st-vu)) 0 0;
	}

	/* 高さはカンプの 515.5 を下限にして、本文が長ければ伸びる（3 枚は grid で同じ高さ） */
	.p-sreviews__card {
		min-height: calc(515.5 * var(--st-vu));
	}

	.p-sreviews__thumb {
		height: calc(245.6 * var(--st-vu));
	}

	.p-sreviews__body {
		padding: 0 calc(41.4 * var(--st-vu)) calc(40 * var(--st-vu));
	}

	/* 本文はカンプの「タイトル」の文字があった高さ（星の行の 15 下）から始める */
	.p-sreviews__text {
		margin-top: calc(15 * var(--st-vu));
	}

	.p-sreviews__name {
		margin-top: calc(8 * var(--st-vu));
	}

	/* 星と「5.0」は中心をそろえる（星 y17168.9 / 5.0 y17163.2） */
	.p-sreviews__rating {
		gap: calc(10.9 * var(--st-vu));
		margin-top: calc(23.45 * var(--st-vu));
	}

	.p-sreviews__stars {
		width: calc(154.6 * var(--st-vu));
		height: calc(26.7 * var(--st-vu));
	}

	/* --- FLOW（612:824 y17563.7〜19302.1） --- */
	.p-sflow {
		--st-flow-chevron-height: calc(55.1 * var(--st-vu));
		--st-flow-notch: calc(12.2764 * var(--st-vu)); /* 矢羽根の食い込み */
		--st-flow-row-height: calc(149.297 * var(--st-vu));
		--st-flow-curve-depth: calc(25 * var(--st-vu)); /* 612:417 の V 字の深さ */
		--st-flow-bleed: calc(80.6 * var(--st-vu)); /* 7 行目が Quality にはみ出す高さ */

		padding: calc(162.2 * var(--st-vu)) 0 0;
	}

	.p-sflow__chevrons {
		width: calc(1600 * var(--st-vu));
		margin: calc(112 * var(--st-vu)) auto 0;
	}

	/* ピッチ 229.4 に対して幅 235.7（6.3 の重なり） */
	.p-sflow__chevron + .p-sflow__chevron {
		margin-left: calc(-6.315 * var(--st-vu));
	}

	.p-sflow__rows {
		width: calc(1200 * var(--st-vu));
		margin: calc(62.6 * var(--st-vu)) auto 0;
		row-gap: calc(20 * var(--st-vu));
	}

	/* 番号中心 +88 / タイトル +179.4 / 説明 +518.6 */
	.p-sflow__row {
		grid-template-columns: calc(179.4 * var(--st-vu)) calc(339.2 * var(--st-vu)) 1fr;
		height: var(--st-flow-row-height);
	}

	/* 612:417 7 行目は V 字のぶん高い（形は基本ルール側） */
	.p-sflow__row:last-child {
		height: calc(var(--st-flow-row-height) + var(--st-flow-curve-depth));
	}

	/* --- Quality（612:839 y19302.1〜20262.1）。本文・バッジの中心はカンプでは x935.1
	   （25 左にずれている）だが、ページ中央にそろえる --- */
	.p-squality {
		min-height: calc(960 * var(--st-vu));
	}

	.p-squality__inner {
		padding: calc(307.4 * var(--st-vu)) calc(28 * var(--st-vu)) calc(80 * var(--st-vu));
	}

	.p-squality__lead {
		max-width: calc(1600 * var(--st-vu));
		margin: calc(30.2 * var(--st-vu)) auto 0;
	}

	.p-squality__badge {
		width: calc(315.1 * var(--st-vu));
		height: calc(81.6 * var(--st-vu));
		margin: calc(46.2 * var(--st-vu)) auto 0;
		border-radius: calc(5 * var(--st-vu));
	}

	/* --- FAQ（612:843 y20262.1〜22241.7） --- */
	.p-sfaq {
		--st-faq-arrow-width: calc(35.75 * var(--st-vu)); /* 回転前の書き出しサイズ */
		--st-faq-arrow-height: calc(17.79 * var(--st-vu));

		padding: calc(162.2 * var(--st-vu)) 0 calc(160 * var(--st-vu));
	}

	.p-sfaq__list {
		width: calc(1200 * var(--st-vu));
		margin: calc(79.6 * var(--st-vu)) auto 0;
		row-gap: calc(20 * var(--st-vu));
	}

	/* 「Q」中心 +72 / 質問 +143.8 / 山形の中心は右から 78 */
	.p-sfaq__q {
		grid-template-columns: calc(143.8 * var(--st-vu)) 1fr calc(156.1 * var(--st-vu));
		min-height: calc(149.297 * var(--st-vu));
		padding: 0;
	}

	/* 641:1462 開いた状態: 行 264 高。回答 641:1314 は行の上端 +131（閉じた行の下端
	   149.3 より 18.3 上）・895 幅・下 77 */
	.p-sfaq__answer {
		margin-top: calc(-18.3 * var(--st-vu));
		padding: 0 calc(161.2 * var(--st-vu)) calc(77 * var(--st-vu)) calc(143.8 * var(--st-vu));
	}

	/* --- AREA（612:855 y22241.7〜25601） --- */
	.p-sarea {
		--st-area-bg-height: calc(933.8 * var(--st-vu)); /* 620:292 */
		--st-area-card-photo: calc(364.4 * var(--st-vu)); /* 1148:52 */
		--st-area-logo-width: calc(288.5 * var(--st-vu)); /* 1131:38 */

		/* 上: 見出し y160 / 下: カード 4 枚のラベル下端 y3172.6 → セクション下端 3359.3 */
		padding: calc(160 * var(--st-vu)) 0 calc(167.7 * var(--st-vu));
	}

	/* 628:303。見出し下端 y193 → パネル上端 y613.9 */
	.p-sarea__panel {
		/* アーチの写真（z-index: 200 − |角度|）のうち、奥へ回った --st-arch-hide 超の写真だけを背面にする。
		   正面側の写真はパネルの下端にかぶる（612:661）ので、パネルを一律に前へ出すことはできない */
		z-index: calc(200 - var(--st-arch-hide));
		width: calc(1600 * var(--st-vu));
		min-height: calc(987.6 * var(--st-vu));
		margin: calc(420.9 * var(--st-vu)) auto 0;
	}

	/* PC の帯見出しは 1 行（SP の改行位置は使わない） */
	.p-sarea__banner br {
		display: none;
	}

	.p-sarea__banner {
		width: calc(919.1 * var(--st-vu));
		height: calc(90.6 * var(--st-vu));
		margin-top: calc(-48.3 * var(--st-vu)); /* パネル上端より 48.3 上から始まる */
		border-radius: calc(5 * var(--st-vu));
	}

	.p-sarea__lead {
		margin: calc(74.7 * var(--st-vu)) 0 0; /* 黒帯の下端 42.3 → リード 117 */
	}

	/* 表は x192.5（パネル基準）、外観写真は x879.4 */
	.p-sarea__info {
		display: grid;
		grid-template-columns: calc(609.7 * var(--st-vu)) calc(515.4 * var(--st-vu));
		column-gap: calc(77.2 * var(--st-vu));
		margin-top: calc(112 * var(--st-vu));
		padding-left: calc(192.5 * var(--st-vu));
	}

	/* 行ピッチ 50.4（文字 25.6 + 区切り線の上下） */
	.p-sarea__row {
		grid-template-columns: calc(158.2 * var(--st-vu)) 1fr;
		padding: calc(17.2 * var(--st-vu)) 0 calc(7.2 * var(--st-vu));
	}

	.p-sarea__row:first-child {
		padding-top: 0;
	}

	.p-sarea__row:last-child {
		padding-bottom: 0;
	}

	/* 612:661。パネルと背景にまたがる箱（x18.5 y+919.9 1883.3x1000.2）の中に円筒を置く。
	   写真は円筒の中心から半径ぶん手前に出して回し、少し上から見下ろす（遠近なしの投影）。
	   正面ほど下・大きく、端ほど上・細く・弧に沿って傾く。奥（90° 超）はパネルの横に細く見え、
	   --st-arch-hide を越えてパネルに重なった時点で背面に回って隠れる（薄くはしない） */
	.p-sarea__arch {
		position: absolute;
		top: calc(919.9 * var(--st-vu));
		left: calc(50% - 941.65 * var(--st-vu)); /* x18.5（1920 より広い画面でも中央） */
		width: calc(1883.3 * var(--st-vu));
		height: calc(1000.2 * var(--st-vu));
	}

	.p-sarea__arch-item {
		--st-arch-abs: max(var(--st-arch-a), -1 * var(--st-arch-a));

		top: calc((var(--st-arch-center-y) - var(--st-arch-height) / 2) * var(--st-vu));
		left: calc(50% - var(--st-arch-width) / 2 * var(--st-vu));
		z-index: calc(200 - var(--st-arch-abs)); /* 正面に近いほど手前。--st-arch-hide 超は白パネル（.p-sarea__panel）より奥 */
		width: calc(var(--st-arch-width) * var(--st-vu));
		height: calc(var(--st-arch-height) * var(--st-vu));
		border-radius: calc(5 * var(--st-vu));
		transform:
			rotateX(calc(var(--st-arch-tilt) * -1deg))
			rotateY(calc(var(--st-arch-a) * 1deg))
			translateZ(calc(var(--st-arch-radius) * var(--st-vu)));
	}

	/* 写真を縦の短冊に分けて円筒に沿わせる（1 枚を平らな板にすると軌道が正 12 角形に見えるため。
	   ユーザー指示 2026-10-07）。短冊は js/store-arch.js が作り、無いとき（JS 無効）は平らな板のまま。
	   短冊はすべて写真の中央に置き、自分の角度（写真の角度 + 短冊ぶんのずれ）で回してから
	   半径ぶん手前に出す。影は短冊ごとに重なって縞になるので付けない */
	.p-sarea__arch-item.has-strips {
		overflow: visible;
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}

	.p-sarea__arch-item.has-strips > .p-sarea__arch-image {
		display: none;
	}

	.p-sarea__arch-item.has-strips .p-sarea__arch-strips {
		position: absolute;
		inset: 0;
		display: block;
	}

	.p-sarea__arch-strip {
		--st-arch-strip-w: calc(var(--st-arch-width) / var(--st-arch-strips) * var(--st-vu));

		position: absolute;
		top: 0;
		left: calc(50% - var(--st-arch-strip-w) / 2);
		width: calc(var(--st-arch-strip-w) + 1px); /* 隣と 1px 重ねて継ぎ目の隙間を消す */
		height: 100%;
		overflow: hidden;
		transform:
			rotateX(calc(var(--st-arch-tilt) * -1deg))
			rotateY(calc((var(--st-arch-a) + (var(--st-arch-strip-i) - (var(--st-arch-strips) - 1) / 2) * var(--st-arch-span) / var(--st-arch-strips)) * 1deg))
			translateZ(calc(var(--st-arch-radius) * var(--st-vu)));
		/* 毎フレーム角度が変わるので GPU のレイヤーに乗せ、描き直しを避ける */
		will-change: transform;
	}

	.p-sarea__arch-strip:first-child {
		border-radius: calc(5 * var(--st-vu)) 0 0 calc(5 * var(--st-vu));
	}

	.p-sarea__arch-strip:last-child {
		border-radius: 0 calc(5 * var(--st-vu)) calc(5 * var(--st-vu)) 0;
	}

	/* 短冊の中身は写真 1 枚ぶんの幅で、短冊の番号ぶん左へずらして該当の列だけ見せる */
	.p-sarea__arch-slice {
		position: absolute;
		top: 0;
		left: calc(-1 * var(--st-arch-strip-i) * var(--st-arch-strip-w));
		width: calc(var(--st-arch-width) * var(--st-vu));
		height: 100%;
	}

	.p-sarea__arch-slice img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ロゴと支店名は弧の内側（パネル上端から 746.9 / 801.4） */
	.p-sarea__logo {
		position: absolute;
		top: calc(746.9 * var(--st-vu));
		right: 0;
		left: 0;
	}

	.p-sarea__branch {
		position: absolute;
		top: calc(801.4 * var(--st-vu));
		right: 0;
		left: 0;
	}

	/* --- Local Expertise（612:853 y+1950.5〜） --- */
	/* 1920 より広い画面では 1920 の枠ごと中央に置く */
	.p-sarea__local {
		width: calc(1920 * var(--st-vu));
		min-height: calc(660 * var(--st-vu)); /* 写真の下端 +82 + 578 */
		margin-inline: auto;
		margin-top: calc(348.9 * var(--st-vu)); /* パネル下端 +1601.6 → +1950.5 */
	}

	/* 612:667 x110 918x571。文字は x297（612:672 / 612:670 / 612:671） */
	.p-sarea__local-body {
		width: calc(918 * var(--st-vu));
		min-height: calc(571 * var(--st-vu));
		margin-left: calc(110 * var(--st-vu));
		padding: calc(131.6 * var(--st-vu)) 0 calc(60 * var(--st-vu)) calc(187 * var(--st-vu));
		border-radius: 0 calc(10 * var(--st-vu)) calc(10 * var(--st-vu)) 0;
	}

	.p-sarea__local-heading {
		margin: calc(24 * var(--st-vu)) 0 0;
	}

	.p-sarea__local-lead {
		width: calc(544.1 * var(--st-vu));
		margin-top: calc(23.8 * var(--st-vu));
	}

	/* 612:666 x962 +82 848x578。パネルの下に潜る */
	.p-sarea__local-photo {
		position: absolute;
		top: calc(82 * var(--st-vu));
		left: calc(962 * var(--st-vu));
		z-index: 0;
		width: calc(848 * var(--st-vu));
		height: calc(578 * var(--st-vu));
		border-radius: calc(10 * var(--st-vu)) 0 0 calc(10 * var(--st-vu));
	}

	/* --- カード 4 枚（y24914〜25420・400 幅・ピッチ 411.2） --- */
	.p-sarea__cards {
		grid-template-columns: repeat(4, calc(400 * var(--st-vu)));
		column-gap: calc(11.2 * var(--st-vu));
		justify-content: center;
		margin-top: calc(56 * var(--st-vu));
	}

	/* 番号の行ボックス 102.4 に対して写真は 50.8 の位置から始まる */
	.p-sarea__card-photo {
		margin-top: calc(-51.6 * var(--st-vu));
	}

	.p-sarea__card-label {
		margin: calc(33.1 * var(--st-vu)) 0 0;
	}

	/* --- お問い合わせ CTA（y25606.8〜26590.4） --- */
	.p-scta {
		min-height: calc(983.5 * var(--st-vu));
	}

	.p-scta__inner {
		padding: calc(338.8 * var(--st-vu)) var(--gutter) calc(227 * var(--st-vu));
	}

	/* PC の見出しは 1 行（SP の改行位置は使わない） */
	.p-scta__heading br {
		display: none;
	}

	.p-scta__lead {
		margin: calc(30.6 * var(--st-vu)) 0 0;
	}

	.p-scta__buttons {
		column-gap: calc(33.5 * var(--st-vu));
		margin-top: calc(76.6 * var(--st-vu));
	}

	.p-scta__button {
		width: calc(431.6 * var(--st-vu));
		height: calc(90.5 * var(--st-vu));
		border-radius: calc(8 * var(--st-vu));
	}

	.p-scta__button--line {
		column-gap: calc(11 * var(--st-vu));
	}

	.p-scta__button--line .p-scta__button-icon {
		width: calc(81.8 * var(--st-vu));
		height: calc(81.8 * var(--st-vu));
	}

	.p-scta__button--tel {
		column-gap: calc(26.4 * var(--st-vu));
	}

	.p-scta__button--tel .p-scta__button-icon {
		width: calc(60.7 * var(--st-vu));
		height: calc(60.7 * var(--st-vu));
	}
}

/* ============================================================
   SP（1024px 以下）
   ------------------------------------------------------------
   全セクション SP カンプ 670:239（375 幅）どおり。
   ============================================================ */
@media (max-width: 1024px) {
	/* SP-1（638:72）。FV は画面上端から始まり、45 の黒帯ヘッダーが上に重なる */
	.p-sfv {
		margin-top: calc(-1 * var(--header-height));
	}

	/* 638:91 写真の列は指で横にスクロールする（自動では動かさない。決定 B） */
	.p-sfv__band-list {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.p-sfv__band-list::-webkit-scrollbar {
		display: none;
	}

	.p-sfv__band-cell {
		flex: 0 0 var(--st-fv-band-item-width);
	}

	/* カンプの改行位置は 1920 幅のもの。SP で長い段落をそのまま折ると
	   行末がひどく揃わないので、幅の広い本文だけ改行を無効にして自然に流す
	  （SERVICE のリードは SP も「…対応しています。」で段落が改まるので残す。641:106） */
	.p-sreasons__copy-lead br,
	.p-sarea__lead br,
	.p-sarea__local-lead br,
	.p-scta__lead br {
		display: none;
	}

	/* --- 導入コピー（SP-2 638:95。帯の下端 745 → アイコン 825 / 本文下端 1052 → 帯 1087） --- */
	.p-sintro {
		--st-intro-icon-w: calc(85.06 * var(--st-su));

		padding: calc(80 * var(--st-su)) calc(24 * var(--st-su)) calc(35 * var(--st-su));
	}

	/* 638:97 2 行（左揃え）の塊を中央に置く */
	.p-sintro__heading {
		display: table;
		margin: calc(19.4 * var(--st-su)) auto 0;
		letter-spacing: var(--ls-base);
		text-align: left;
	}

	.p-sintro__heading-line {
		display: block;
	}

	/* 638:96 左揃え。2 行目と 3 行目は 1 段落につなぐ */
	.p-sintro__lead {
		margin: calc(9.4 * var(--st-su)) 0 0;
		letter-spacing: var(--ls-base);
		text-align: left;
	}

	.p-sintro__br-pc {
		display: none;
	}

	/* --- 施工イメージ帯（旧: 帯ごと画面幅に比例縮小。PACKAGE 下の p-sstrip--plans が使う） --- */
	.p-sstrip {
		--st-strip-unit: calc(var(--st-su) * 0.1953);
		--st-strip-fade-height: calc(24 * var(--st-su));

		background: var(--color-white2);
	}

	/* 638:134-136 流れる帯。PC の帯の 94 / 209 倍（PLANS の img list と同じ）、グラデ無し */
	.p-sstrip--roll {
		--st-strip-unit: calc(var(--st-su) * 94 / 209);
		--st-strip-fade-height: 0px;
		--st-strip-align: 0;

		background: var(--st-bg-light);
	}

	/* --- 実績数字: 2 列 2 段（638:102〜638:133。リング上端 1213 / 1399） --- */
	.p-sstats {
		--st-stats-ring-size: calc(140 * var(--st-su));
		--st-stats-ring-width: calc(3 * var(--st-su));
		--st-stats-photo-size: calc(121 * var(--st-su));

		padding: calc(32 * var(--st-su)) var(--gutter) calc(46.6 * var(--st-su));
	}

	.p-sstats__list {
		grid-template-columns: repeat(2, auto);
		column-gap: calc(19 * var(--st-su));
		row-gap: calc(16.6 * var(--st-su));
	}

	.p-sstats__number {
		line-height: 1.2;
	}

	.p-sstats__unit {
		line-height: 1.5;
	}

	.p-sstats__label {
		margin: calc(7 * var(--st-su)) 0 0;
		letter-spacing: var(--ls-base);
	}

	/* --- 不安提示（638:142）: 黒帯 → 悩み 3 行 → スケッチ → 本文 の縦積み --- */
	.p-sconcern {
		padding: 0 0 calc(89 * var(--st-su));
	}

	.p-sconcern__body {
		padding: 0 calc(23 * var(--st-su)) 0 calc(26 * var(--st-su)); /* 638:147 x26〜352 */
	}

	/* 638:147 326x78 の帯に 2 行（638:148）を中央揃え */
	.p-sconcern__heading {
		padding: calc(14 * var(--st-su)) 0;
		border-radius: calc(5 * var(--st-su));
		letter-spacing: var(--ls-base);
		text-align: center;
	}

	.p-sconcern__heading-line {
		display: block;
	}

	.p-sconcern__list {
		margin: calc(23 * var(--st-su)) 0 0;
	}

	/* 638:150 326x166（y1758〜1924）。カンプどおり、上端を悩みの最後の行に 29 重ねて文字の
	   背面に敷く（重なるのは線画の薄い上部。S1 検証後に変更 2026-10-01） */
	.p-sconcern__sketch {
		position: relative;
		z-index: -1;
		width: 100%;
		height: calc(166 * var(--st-su));
		margin-top: calc(-29 * var(--st-su));
		object-position: center 59%; /* カンプの切り抜き（top -18.4%）相当 */
	}

	/* 638:144 y1919（スケッチの下端 1924 に 5 掛かる） */
	.p-sconcern__note {
		margin: calc(-5 * var(--st-su)) 0 0;
		padding-left: calc(2 * var(--st-su)); /* 638:144 x28 */
	}

	/* --- 選ばれる理由（SP-3 641:22〜641:52。y2088〜2971）:
	       縦長の写真 → コピー + 左揃えのリード → 281φ のミニ円の周りに 1 語ラベル 6 個 --- */
	.p-sreasons {
		--st-reasons-photo-height: calc(559 * var(--st-su)); /* 641:22 */

		padding: calc(80 * var(--st-su)) 0 calc(79 * var(--st-su));
	}

	/* 641:22 は写真自体の下端が背景の黒に落ちている。暗幕・溶かしのノードは無い（決定 B-2 Q9） */
	.p-sreasons__bg::after,
	.p-sreasons__bg-shade {
		display: none;
	}

	/* 中間幅で写真が縦に切られても、黒に落ちる下端を残す */
	.p-sreasons__bg-photo {
		object-position: center bottom;
	}

	/* 641:24 / 641:181（リード 326 幅・x25） */
	.p-sreasons__copy {
		width: calc(326 * var(--st-su));
		margin-inline: auto;
	}

	.p-sreasons__copy-heading {
		letter-spacing: var(--ls-base);
	}

	.p-sreasons__copy-lead {
		margin: calc(23 * var(--st-su)) 0 0; /* コピー下端 122 → 145 */
		line-height: 2;
		text-align: left;
	}

	/* 641:181 は段落の改行を残した 6 行（上の「改行を無効」より後ろで戻す） */
	.p-sreasons__copy-lead br {
		display: inline;
	}

	/* 641:28（346x281。リード下端 289 → 523） */
	.p-sreasons__diagram {
		width: calc(346 * var(--st-su));
		height: calc(281 * var(--st-su));
		margin: calc(234 * var(--st-su)) auto 0;
	}

	/* 641:40。中心を図の中心にそろえる（カンプは 3 左。1〜10px のずれは揃える） */
	.p-sreasons__ring {
		left: calc(50% - 140.5 * var(--st-su));
		width: calc(281 * var(--st-su));
		height: calc(281 * var(--st-su));
	}

	.p-sreasons__center {
		position: absolute;
		inset: 0;
	}

	/* 641:37（93x14、図の上端から 44） */
	.p-sreasons__logo {
		position: absolute;
		top: calc(44 * var(--st-su));
		left: 50%;
		translate: -50% 0;
	}

	.p-sreasons__logo img {
		width: calc(93 * var(--st-su));
	}

	/* SP には見出し「選ばれる理由」と円内リードが無い */
	.p-sreasons__title,
	.p-sreasons__title-lead {
		display: none;
	}

	/* 641:183（213x142、上端から 59） */
	.p-sreasons__house {
		position: absolute;
		top: calc(59 * var(--st-su));
		left: 50%;
		width: calc(213 * var(--st-su));
		height: calc(142 * var(--st-su));
		margin: 0;
		object-fit: cover;
		translate: -50% 0;
	}

	/* 641:52 EXTERIOR（上端から 194）/ 641:39（236） */
	.p-sreasons__eng,
	.p-sreasons__eng-sub--sp {
		position: absolute;
		right: 0;
		left: 0;
		margin: 0;
		letter-spacing: calc(-1 * var(--st-su));
	}

	.p-sreasons__eng {
		top: calc(194 * var(--st-su));
		line-height: 1.53; /* 49 / 32 */
		color: var(--color-white3); /* 641:52 #f5f5f5 */
	}

	.p-sreasons__eng-sub--pc {
		display: none;
	}

	.p-sreasons__eng-sub--sp {
		top: calc(236 * var(--st-su));
		display: block;
		line-height: 1.29; /* 18 / 14 */
		color: var(--color-gray2); /* 641:39 */
	}

	.p-sreasons__items {
		position: absolute;
		inset: 0;
		margin: 0;
	}

	/* 6 項目はラベルの中心（図の中心からの --word-dx）と上端（--word-y）で置き、
	   アイコンはラベルの上に載せる（カンプはアイコン下端 → ラベル上端が 5〜6） */
	.p-sreasons__item {
		position: absolute;
		top: calc(var(--word-y) * var(--st-su));
		left: calc(50% + var(--word-dx) * var(--st-su));
		translate: -50% 0;
	}

	.p-sreasons__icon {
		position: absolute;
		bottom: calc(100% + 5.5 * var(--st-su));
		left: 50%;
		width: calc(var(--sp-icon-w) * var(--st-su));
		height: calc(var(--sp-icon-h) * var(--st-su));
		margin: 0;
		translate: -50% 0;
	}

	.p-sreasons__item-lead,
	.p-sreasons__item-label {
		display: none;
	}

	.p-sreasons__item-word {
		display: block;
	}

	/* 641:30 デザイン / 641:36 */
	.p-sreasons__item:nth-child(1) {
		--word-dx: -108;
		--word-y: 58;
		--sp-icon-w: 40;
		--sp-icon-h: 21;
	}

	/* 641:31 ビジュアル提案 / 641:48 */
	.p-sreasons__item:nth-child(2) {
		--word-dx: 108;
		--word-y: 58;
		--sp-icon-w: 34;
		--sp-icon-h: 21;
	}

	/* 641:34 住環境適応 / 641:50 */
	.p-sreasons__item:nth-child(3) {
		--word-dx: -140.5;
		--word-y: 143;
		--sp-icon-w: 31;
		--sp-icon-h: 28;
	}

	/* 641:32 見積もり / 641:47 */
	.p-sreasons__item:nth-child(4) {
		--word-dx: 140.5;
		--word-y: 143;
		--sp-icon-w: 27;
		--sp-icon-h: 23;
	}

	/* 641:35 長期保証 / 641:49（カンプ 227 と 224 の差はそろえる） */
	.p-sreasons__item:nth-child(5) {
		--word-dx: -108;
		--word-y: 226;
		--sp-icon-w: 21;
		--sp-icon-h: 24;
	}

	/* 641:33 施工・品質管理 / 641:29 */
	.p-sreasons__item:nth-child(6) {
		--word-dx: 108;
		--word-y: 226;
		--sp-icon-w: 22;
		--sp-icon-h: 24;
	}

	/* --- SERVICE（SP-4 641:59〜641:169。y2971〜4242）:
	       カード横 2 枚 → 帯見出し 2 行 → 白パネル（リード + カテゴリ 4 行） --- */
	.p-sservice {
		--st-service-card-height: calc(114 * var(--st-su)); /* 641:72 / 641:83 */
		--st-service-card-shade: calc(42 * var(--st-su)); /* 641:73 / 641:87 */
		--st-service-card-eng-bottom: calc(7 * var(--st-su));
		--st-service-banner-top: calc(-35 * var(--st-su)); /* 641:97 はパネルに 40 かぶる */
		--st-service-banner-width: calc(253 * var(--st-su));
		--st-service-banner-height: auto;
		--st-service-line-top: calc(45 * var(--st-su)); /* 英字上端 3545 → 線 3590 */
		--st-service-photo-height: calc(55 * var(--st-su));

		padding: calc(81 * var(--st-su)) 0 calc(80 * var(--st-su));
	}

	/* SP は 2 枚とも暗幕 80%（641:73 / 641:87） */
	.p-sservice__card {
		--st-service-card-shade-color: var(--st-card-shade-strong);
	}

	.p-sservice__cards {
		grid-template-columns: repeat(2, calc(170 * var(--st-su)));
		justify-content: center;
		column-gap: calc(9 * var(--st-su));
		margin-top: calc(40 * var(--st-su)); /* 見出し下端 100 → カード 140 */
	}

	.p-sservice__card-media {
		border-radius: calc(2 * var(--st-su));
	}

	.p-sservice__card-label {
		margin: calc(7 * var(--st-su)) 0 0;
	}

	/* 641:95（349 幅・角丸なし。帯 → カード下端 3254 → 3324） */
	.p-sservice__panel {
		width: calc(349 * var(--st-su));
		margin: calc(70 * var(--st-su)) auto 0;
		padding: calc(57 * var(--st-su)) calc(29 * var(--st-su)) calc(40 * var(--st-su));
	}

	/* 641:97 / 641:98。2 行（44）を 75 の帯の中に置く */
	.p-sservice__banner {
		display: block;
		padding: calc(15.5 * var(--st-su)) 0;
		line-height: 1.6;
	}

	.p-sservice__banner br {
		display: inline;
	}

	.p-sservice__lead {
		margin: 0;
		text-align: left;
	}

	.p-sservice__rows {
		margin-top: calc(20 * var(--st-su)); /* リード下端 3525 → 英字 3545 */
	}

	/* 行ピッチ 148（英字 42 + 13 + 写真 55 + 7 + 写真名 16 = 133、行間 15） */
	.p-sservice__row + .p-sservice__row {
		margin-top: calc(15 * var(--st-su));
	}

	/* 英字は左、和文は右揃え（641:104 / 641:103） */
	.p-sservice__row-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.p-sservice__row-label {
		margin: 0 0 calc(4 * var(--st-su));
		color: var(--color-gray2); /* SP は #d9d9d9（PC は #1a1a1a） */
	}

	.p-sservice__photos {
		grid-template-columns: repeat(3, calc(92 * var(--st-su)));
		column-gap: calc(7 * var(--st-su));
		margin-top: calc(13 * var(--st-su));
	}

	.p-sservice__photo img {
		border-radius: calc(2 * var(--st-su));
	}

	.p-sservice__photo-label {
		margin-top: calc(7 * var(--st-su));
	}

	.p-sservice__photo-label-pc {
		display: none;
	}

	.p-sservice__photo-label-sp {
		display: inline;
	}

	/* --- 見える安心（SP-5 前半 641:175〜641:208。y4242〜5135）:
	       線画 + コピー → 写真と文字の左右交互 4 段（162x85・行ピッチ 100）→ 本文 4 段落 --- */
	.p-svisible {
		--st-visible-eyebrow: calc(12 * var(--st-su)); /* 641:178 */
		--st-visible-heading: calc(16 * var(--st-su)); /* 641:177 */
		--st-visible-card-eng: calc(26 * var(--st-su)); /* 641:190 ほか */
		--st-visible-card-label: calc(14 * var(--st-su)); /* 641:189 ほか */
		--st-visible-lead: calc(12 * var(--st-su)); /* 641:208 */
		--st-visible-card-height: calc(85 * var(--st-su));

		/* 本文の下端（+893）→ DX 見出しの上端（641:254 の +947）= 54。
		   PC と同じく、TOP の DX が中身を縦中央に置くぶんの空きを差し引く。
		   中身の高さ（SP は 1 ステップずつ。下の詰め物 8.6 を含む）は --dx-su（style.css :root）の
		   約 613 単位（375x667 の実測） */
		padding: calc(76 * var(--st-su)) 0 max(0px, calc(54 * var(--st-su) - (var(--dx-pin-height) - 613 * var(--dx-su)) / 2));
	}

	/* 641:175 の枠（276x147 at x50）。線画はこの枠に対する比率で置く（PC と同じ） */
	.p-svisible__head {
		width: calc(276 * var(--st-su));
		height: calc(147 * var(--st-su));
		margin-inline: auto;
	}

	.p-svisible__copy {
		padding-top: calc(51 * var(--st-su)); /* 英字 y4369 − 枠 y4318 */
	}

	.p-svisible__eyebrow {
		letter-spacing: calc(1 * var(--st-su));
	}

	.p-svisible__heading {
		margin-top: calc(5.6 * var(--st-su)); /* 見出し y4388 − 英字の下端 4382.4 */
		letter-spacing: calc(1 * var(--st-su));
	}

	/* 4 段。1・3 段目は写真左・文字左揃え、2・4 段目は写真右・文字右揃え */
	.p-svisible__cards {
		row-gap: calc(15 * var(--st-su)); /* 行ピッチ 100 − 写真 85 */
		width: calc(324 * var(--st-su)); /* 写真の左端 26 〜 右端 350 */
		margin: calc(31 * var(--st-su)) auto 0; /* 枠の下端 4465 → 写真 4496 */
	}

	.p-svisible__card {
		display: grid;
		grid-template-columns: calc(162 * var(--st-su)) 1fr;
		/* 写真（85）が 2 行ぶんの高さを決める。余りは 2 行目に回し、英字の位置を動かさない */
		grid-template-rows: auto 1fr;
		column-gap: calc(12 * var(--st-su)); /* 写真の右端 188 → 英字 200 */
		align-items: start;
	}

	.p-svisible__card:nth-child(even) {
		grid-template-columns: 1fr calc(162 * var(--st-su));
		text-align: right;
	}

	.p-svisible__media {
		grid-row: 1 / 3;
		grid-column: 1;
	}

	.p-svisible__card:nth-child(even) .p-svisible__media {
		grid-column: 2;
	}

	/* SP は写真下のグラデが無い */
	.p-svisible__media::after {
		content: none;
	}

	.p-svisible__card-eng {
		position: static;
		grid-row: 1;
		margin-top: calc(12 * var(--st-su)); /* 英字 y4508 − 写真 y4496 */
		letter-spacing: calc(-1 * var(--st-su));
		text-align: inherit;
	}

	.p-svisible__card-label {
		grid-row: 2;
		margin: calc(-7.6 * var(--st-su)) 0 0; /* 和文 y4542 − 英字の下端（4508 + 41.6） */
		letter-spacing: calc(2 * var(--st-su));
		text-align: inherit;
	}

	.p-svisible__card:nth-child(even) :is(.p-svisible__card-eng, .p-svisible__card-label) {
		grid-column: 1;
	}

	.p-svisible__lead {
		width: calc(324 * var(--st-su));
		margin: calc(38 * var(--st-su)) auto 0; /* 4 段目の写真下端 4881 → 本文 4919 */
		line-height: 2;
		letter-spacing: calc(1 * var(--st-su));
		text-align: left;
	}

	.p-svisible__lead--pc {
		display: none;
	}

	.p-svisible__lead--sp {
		display: block;
	}

	/* --- PLANS（SP-6 641:274 y5866〜7046 / SP-7 641:310 〜7947） ---
	   カンプの並び: 見出し → 説明 → パース → パッケージプラン → 帯 → 特長 2×2 → VIEW MORE。
	   DOM は PC の順のまま、ブロックとテキストの箱を display: contents で外して
	   .p-splans / .p-splans__highend の縦並びの中で order で並べ替える */
	.p-splans {
		--st-plans-fade: calc(16 * var(--st-su)); /* 641:293 */
		--st-plans-icon-row: calc(63 * var(--st-su)); /* 641:300 doc の高さ */
		--st-plans-icon-gap: calc(15 * var(--st-su)); /* アイコン下端 → ラベル（14〜17 を揃えた） */
		--st-plans-row-gap: calc(38 * var(--st-su));

		display: flex;
		flex-direction: column;
		/* 直前は TOP の DX（.p-dx）。カンプは DX の中身の下端（タグの下端 y5785.6）→「PLANS」
		   y5939 で 153。DX は中身を画面の縦中央に置くので、中身の下端からセクション下端までの
		   空き（ピン留めの高さ − 595 単位）/ 2 を差し引く（595 は 375x667 の実測。空き 28.5）。
		   見える安心の padding-bottom（S3）と同じ考え方 */
		padding: max(0px, calc(153 * var(--st-su) - (var(--dx-pin-height) - 595 * var(--dx-su)) / 2)) 0 0;
	}

	.p-splans__jp-pc {
		display: none;
	}

	.p-splans__jp-sp {
		display: inline;
	}

	/* 641:279 Bold 14 / 1.8 の 2 行（他セクションの和文見出しと違う） */
	.p-splans__jp {
		margin-top: calc(40 * var(--st-su)); /* 「PLANS」下端 → 6132 */
		font-size: calc(14 * var(--st-su));
		font-weight: var(--fw-bold);
		line-height: 1.8;
	}

	/* 641:282 左揃え 320 幅 5 行。右の余白は行末の字間ぶん詰める
	  （これが無いとカンプで 1 行に収まる 23 文字の行が 1 文字あふれる） */
	.p-splans__lead {
		margin-top: calc(21.6 * var(--st-su));
		padding-inline: var(--gutter) calc(var(--gutter) - var(--ls-wide));
		text-align: left;
	}

	.p-splans__divider,
	.p-splans__block--package .p-splans__copy {
		display: none;
	}

	.p-splans__block--package,
	.p-splans__block--package .p-splans__text,
	.p-splans__block--highend,
	.p-splans__block--highend .p-splans__text {
		display: contents;
	}

	/* 641:284 320x162 */
	.p-splans__block--package .p-splans__media {
		order: 1;
		align-self: center;
		width: calc(320 * var(--st-su));
		margin-top: calc(30 * var(--st-su));
	}

	.p-splans__label {
		order: 2;
		margin-top: calc(19 * var(--st-su)); /* パース下端 6382 → 6401 */
	}

	.p-splans__eng {
		order: 3;
		margin-top: calc(-5.2 * var(--st-su)); /* 和文の行ボックスに少しかぶる（6401 + 19.2 → 6415） */
	}

	/* 641:289〜641:291。施工イメージ帯と同じ大きさ・間隔で流れ、下端だけ 16 溶かす（641:296） */
	.p-sstrip--plans {
		--st-strip-fade-height: calc(16 * var(--st-su));

		order: 4;
		margin-top: calc(26 * var(--st-su)); /* 英字下端 6462 → 6488 */
		background: none;
	}

	/* 641:308 2×2（列の中心 x103 / x274）。区切り線は無い */
	.p-splans__features {
		order: 5;
		grid-template-columns: repeat(2, calc(130 * var(--st-su)));
		justify-content: center;
		column-gap: calc(41.5 * var(--st-su));
		row-gap: var(--st-plans-row-gap);
		margin-top: calc(46 * var(--st-su)); /* 帯下端 6582 → 6628 */
	}

	.p-splans__feature + .p-splans__feature {
		border-left: 0;
	}

	.p-splans__icon {
		width: calc(var(--icon-sp-w) * var(--st-su));
		height: calc(var(--icon-sp-h) * var(--st-su));
	}

	.p-splans__feature-label {
		margin: var(--st-plans-icon-gap) 0 0;
	}

	.p-splans__features--dark .p-splans__feature-label {
		font-weight: var(--fw-bold); /* SP は Bold（PC は Medium） */
	}

	/* 641:354 136x33。PACKAGE は文字も #4d4d4d */
	.p-splans .p-splans__btn {
		--btn-width: calc(136 * var(--st-su));
		--btn-height: calc(32.85 * var(--st-su));
		--fs-button: calc(12 * var(--st-su));
		--ls-button: var(--ls-base);
		--radius-pill: calc(32 * var(--st-su));

		order: 6;
		align-self: center;
		margin-top: calc(46 * var(--st-su)); /* 特長下端 6887 → 6933 */
	}

	.p-splans__block--package .p-splans__btn {
		color: var(--color-black1);
	}

	/* 641:359 / 641:360 白線・白文字 */
	.p-splans__block--highend .p-splans__btn {
		border-color: var(--st-white);
		color: var(--st-white);
	}

	/* SP-7。写真 → 見出し → 説明 → 特長 2×2 → VIEW MORE */
	.p-splans__highend {
		--st-plans-icon-row: calc(60 * var(--st-su)); /* 641:332 tablet の高さ */
		--st-plans-icon-gap: calc(17 * var(--st-su));
		--st-plans-row-gap: calc(41 * var(--st-su));

		order: 7;
		display: flex;
		flex-direction: column;
		margin-top: calc(80 * var(--st-su)); /* VIEW MORE 下端 6966 → 7046 */
		padding: calc(80 * var(--st-su)) 0;
	}

	/* 641:312 322x179（角丸・フェード無し） */
	.p-splans__block--highend .p-splans__media {
		order: 1;
		align-self: center;
		width: calc(322 * var(--st-su));
	}

	.p-splans__block--highend .p-splans__label {
		margin-top: calc(24 * var(--st-su)); /* 写真下端 7305 → 7329 */
	}

	/* 641:317 左揃え 322 幅 3 行 */
	.p-splans__block--highend .p-splans__copy {
		order: 4;
		align-self: center;
		width: calc(322 * var(--st-su));
		margin: calc(24 * var(--st-su)) 0 0; /* 英字下端 7390 → 7414 */
		line-height: 2;
		text-align: left;
	}

	.p-splans__features--dark {
		margin-top: calc(43 * var(--st-su)); /* 説明下端 7486 → 7529 */
	}

	/* --- WORKS のリード（SP-8 641:391）: 支店だけカンプどおり左揃え・337 幅・字間 2・5 行
	  （DX ページは中央 314 幅・6 行のまま）。行末の字間 1 つぶん広げる。リードが 1 行減るぶん
	   写真の上の間隔を 1 行ぶん広げ、写真以降の位置は変えない（DX の 30 + 24） --- */
	.is-store-page .p-cworks--dx .p-cworks__lead {
		width: calc(339 * var(--st-su));
		letter-spacing: calc(2 * var(--st-su));
		text-align: left;
	}

	.is-store-page .p-cworks--dx .p-cworks__grid {
		margin-top: calc(54 * var(--st-su));
	}

	/* --- 見出し 3 点セット（REVIEWS 641:397-398 / FLOW 641:467-469 / FAQ 641:1265-1267）---
	   英字 +80 → 和文 Medium 14 / 1.5 / 1px +139 → 本文 Regular 12 / 2 / 1px 左揃え 337 幅 +171 */
	.p-sreviews,
	.p-sflow,
	.p-sfaq {
		--st-heading-gap: calc(40 * var(--st-su));
		--st-heading-jp: calc(14 * var(--st-su));
		--st-heading-lead: calc(12 * var(--st-su));

		padding: calc(80 * var(--st-su)) 0 calc(80 * var(--st-su));
	}

	:is(.p-sreviews, .p-sflow, .p-sfaq) .c-store-jp {
		line-height: 1.5;
		letter-spacing: var(--ls-base);
	}

	/* 337 幅の箱を中央に置く（375 で左右 19。中間幅も同じ比率で中央）。行末の字間 1 ぶん広げる
	  （Figma は行末の字間を幅に数えないので、これが無いと 26 文字の行が 1 文字あふれる） */
	:is(.p-sreviews, .p-sflow, .p-sfaq) .c-store-lead {
		width: calc(337 * var(--st-su) + var(--ls-base));
		margin: calc(11 * var(--st-su)) auto 0;
		letter-spacing: var(--ls-base);
		text-align: left;
	}

	/* REVIEWS・FLOW の本文は SP では 1 段落（FAQ は 2 段落のまま） */
	:is(.p-sreviews, .p-sflow) .c-store-lead br {
		display: none;
	}

	/* --- REVIEWS（SP-9 641:396 y9036〜9728）: 280 幅のカードを指で横にスクロールする列。
	   2 枚目が右端で見切れる（自動では流さない。決定 B）。影（下 44・上 20）が列の枠で
	   切れないよう、列の上下に余白を足して同じだけ負のマージンで戻す --- */
	.p-sreviews {
		--st-reviews-shadow-top: calc(20 * var(--st-su));
		--st-reviews-shadow-bottom: calc(48 * var(--st-su)); /* 影 44 + フェードインのずれの余り */
	}

	.p-sreviews__list {
		display: flex;
		column-gap: calc(20 * var(--st-su));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		margin: calc(40 * var(--st-su) - var(--st-reviews-shadow-top)) 0 calc(-1 * var(--st-reviews-shadow-bottom));
		/* 左右の余白は見出し・本文の 337 幅の箱にそろえる（375 で 19） */
		padding: var(--st-reviews-shadow-top) max(calc(19 * var(--st-su)), calc((100% - 337 * var(--st-su)) / 2)) var(--st-reviews-shadow-bottom);
		scrollbar-width: none;
	}

	.p-sreviews__list::-webkit-scrollbar {
		display: none;
	}

	/* 641:400 280x329 radius 10 */
	.p-sreviews__card {
		flex: 0 0 calc(280 * var(--st-su));
		min-height: calc(329 * var(--st-su)); /* 本文が長ければ伸びる（列の 3 枚は同じ高さ） */
		border-radius: calc(10 * var(--st-su));
	}

	.p-sreviews__thumb {
		height: calc(138 * var(--st-su));
	}

	.p-sreviews__body {
		padding: 0 calc(20 * var(--st-su)) calc(20 * var(--st-su)) calc(21 * var(--st-su));
	}

	/* 星 641:405（86.95x15）と「5.0」641:404 は中心をそろえる（行 +151） */
	.p-sreviews__rating {
		gap: calc(5.6 * var(--st-su));
		margin-top: calc(13 * var(--st-su));
	}

	.p-sreviews__stars {
		width: calc(87 * var(--st-su));
		height: calc(15 * var(--st-su));
	}

	/* 641:401 Regular 10 / 1.8 / 2px。タイトルを使わないので、その文字があった高さ（星の行の 10 下）から */
	.p-sreviews__text {
		margin-top: calc(10 * var(--st-su));
	}

	.p-sreviews__name {
		margin-top: calc(6 * var(--st-su));
	}

	/* --- FLOW（SP-10 641:466 y9728〜11051）: 矢羽根なし。白の縦カード 7 枚（336 幅・角丸なし・
	   間隔 10）とカード間の縦矢印 6 本（641:509〜641:514 #d9d9d9）。07 は下辺中央が 15 下に尖り、
	   Quality の写真に 60 食い込む（PC と同じ作り）。カードの高さは中身で決まり、
	   番号 +16 / タイトル +24 / 説明 +63 / 下 28 にそろえた（カンプは行ごとに数 px 不揃い） --- */
	.p-sflow {
		--st-flow-curve-depth: calc(15 * var(--st-su)); /* 641:507 */
		--st-flow-bleed: calc(60 * var(--st-su)); /* 07 の下端 11111 − セクション下端 11051 */
		--st-flow-arrow-x: calc(49 * var(--st-su)); /* 641:509 x68 − カード左 19 */
		--st-flow-arrow-top: calc(63 * var(--st-su)); /* 番号の下（641:509 y10074 − カード上端 10011） */
		--st-flow-arrow-end: calc(16 * var(--st-su)); /* 次のカードの番号の上端 */
		--st-flow-arrow-head: calc(10 * var(--st-su)); /* 矢じり 14.7 幅（45° の 2 辺） */
		--st-flow-arrow-width: calc(2 * var(--st-su));
		--st-flow-row-gap: calc(10 * var(--st-su));

		padding-bottom: 0;
	}

	.p-sflow__chevrons {
		display: none;
	}

	.p-sflow__rows {
		width: calc(336 * var(--st-su));
		margin: calc(40 * var(--st-su)) auto 0;
		row-gap: var(--st-flow-row-gap);
	}

	.p-sflow__row {
		position: relative;
		display: block;
		padding: calc(24 * var(--st-su)) 0 calc(28 * var(--st-su)) calc(84 * var(--st-su));
	}

	/* 番号の中心はカード左 +48.3（641:474 ほか。x43〜46 の不揃いをそろえた） */
	.p-sflow__number {
		position: absolute;
		top: calc(16 * var(--st-su));
		left: 0;
		width: calc(96.6 * var(--st-su));
		line-height: 1.2;
	}

	.p-sflow__row-title {
		line-height: 2.2;
	}

	/* 641:472 Regular 10 / 1.6 / 1px 223 幅 */
	.p-sflow__row-desc {
		width: calc(223 * var(--st-su));
		margin-top: calc(3.8 * var(--st-su));
	}

	.p-sflow__row-desc--sp-join br {
		display: none;
	}

	/* 縦矢印（641:509〜641:514）: 番号の下から次のカードの番号の上端まで。次のカードの上に重ねる */
	.p-sflow__row:not(:last-child)::before,
	.p-sflow__row:not(:last-child)::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;
	}

	.p-sflow__row:not(:last-child)::before {
		top: var(--st-flow-arrow-top);
		left: calc(var(--st-flow-arrow-x) - var(--st-flow-arrow-width) / 2);
		width: var(--st-flow-arrow-width);
		height: calc(100% - var(--st-flow-arrow-top) + var(--st-flow-row-gap) + var(--st-flow-arrow-end) - var(--st-flow-arrow-width));
		background: var(--st-line);
	}

	/* 矢じり: 右と下の辺だけ線を引いた正方形を 45° 回す。先端が矢の終点に来る */
	.p-sflow__row:not(:last-child)::after {
		top: calc(100% + var(--st-flow-row-gap) + var(--st-flow-arrow-end) - var(--st-flow-arrow-head) / 2 - var(--st-flow-arrow-head) * 0.7071);
		left: calc(var(--st-flow-arrow-x) - var(--st-flow-arrow-head) / 2);
		width: var(--st-flow-arrow-head);
		height: var(--st-flow-arrow-head);
		border-right: var(--st-flow-arrow-width) solid var(--st-line);
		border-bottom: var(--st-flow-arrow-width) solid var(--st-line);
		box-sizing: border-box;
		transform: rotate(45deg);
	}

	/* 07 は下の余白 28 に V 字のぶんを足す */
	.p-sflow__row:last-child {
		padding-bottom: calc(28 * var(--st-su) + var(--st-flow-curve-depth));
	}

	/* --- Quality（SP-11 641:1251〜641:1261 y11051〜11560。509 高）
	   暗幕は PC と同じ 30%（決定 B。旧決定の 55% を上書き）。英字はカンプの「FLOW」を誤記とみなし、
	   SP カンプの書体（Semibold 16 / 2px）のまま文言を PC の「Quality You Can Trust」にする（B-2 Q7） --- */
	.p-squality {
		min-height: calc(509 * var(--st-su));
	}

	.p-squality__inner {
		padding: calc(114 * var(--st-su)) 0 calc(80 * var(--st-su));
	}

	.p-squality__eng {
		font-weight: var(--fw-semibold);
		line-height: 1.18;
		letter-spacing: var(--ls-title);
	}

	/* 641:1258 Medium 14 / 1.5 / 1px */
	.p-squality__heading {
		margin-top: calc(40 * var(--st-su));
		font-weight: var(--fw-medium);
		line-height: 1.5;
		letter-spacing: var(--ls-base);
	}

	/* 641:1257 Regular 12 / 2 / 1px 左揃え 337 幅 6 行（3 段落） */
	.p-squality__lead {
		width: calc(337 * var(--st-su) + var(--ls-base)); /* 行末の字間ぶん（見出し 3 点セットの本文と同じ） */
		max-width: none;
		margin: calc(11 * var(--st-su)) auto 0;
		font-weight: var(--fw-regular);
		text-align: left;
	}

	/* 641:1260 205x53 / 641:1261 Medium 20 / 1.6 / 2px（「5」の大きさの差なし） */
	.p-squality__badge {
		width: calc(205 * var(--st-su));
		height: calc(53 * var(--st-su));
		margin: calc(27 * var(--st-su)) auto 0;
		border-radius: calc(5 * var(--st-su));
	}

	/* --- FAQ（SP-12 641:1264 y11560〜12354）: 背景白・行 337x43 radius 5・間隔 9。
	   開いた状態（666:32 337x194）: 質問が Bold、山形が下向き、回答 Regular 10 / 2 / 1px #1a1a1a。
	   「Q」・質問・山形は 1 行目にそろえる（PC の文言の質問 2・8 は 2 行に折り返す） --- */
	.p-sfaq {
		--st-faq-arrow-width: calc(9.16 * var(--st-su)); /* 641:1306（下向きの書き出しサイズ） */
		--st-faq-arrow-height: calc(4.78 * var(--st-su));

		background: var(--st-white);
	}

	.p-sfaq__lead {
		line-height: 2;
	}

	.p-sfaq__list {
		width: calc(337 * var(--st-su));
		margin: calc(40 * var(--st-su)) auto 0;
		row-gap: calc(9 * var(--st-su));
	}

	.p-sfaq__item {
		border-radius: calc(5 * var(--st-su));
	}

	/* 「Q」中心 +22 / 質問 +41 / 山形の中心 +323.7（641:1272 / 641:1271 / 641:1306） */
	.p-sfaq__q {
		grid-template-columns: calc(41 * var(--st-su)) 1fr calc(26.6 * var(--st-su));
		align-items: start;
		min-height: calc(43 * var(--st-su));
		padding: calc(7 * var(--st-su)) 0 calc(9.6 * var(--st-su));
	}

	.p-sfaq__mark {
		width: calc(16 * var(--st-su));
		margin: calc(2 * var(--st-su)) 0 0 calc(14 * var(--st-su));
		line-height: 1.2;
	}

	/* 折り返すときは文節の切れ目（データ側の <wbr>）でだけ折る。収まらない文節は任意の位置で折る */
	.p-sfaq__q-text {
		font-weight: var(--fw-medium);
		line-height: 2.2;
		letter-spacing: var(--ls-base);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.p-sfaq__q.is-open .p-sfaq__q-text {
		font-weight: var(--fw-bold);
	}

	/* 1 行目の中心（+20.2）に山形の中心を合わせる */
	.p-sfaq__arrow {
		margin-top: calc(13.2 * var(--st-su) - var(--st-faq-arrow-height) / 2);
	}

	/* 641:1309 +40（質問の行の下端 43 より 3 上）・270 幅・下 34 */
	.p-sfaq__answer {
		margin-top: calc(-3 * var(--st-su));
		padding: 0 calc(26 * var(--st-su)) calc(34 * var(--st-su)) calc(41 * var(--st-su));
	}

	.p-sfaq__answer-text {
		letter-spacing: var(--ls-base);
	}

	/* --- AREA（SP-13 641:1315〜641:1427 y12354〜14389。以下 +n はセクション上端から）---
	   写真 202 高の上に「AREA」、全幅の黒帯（75 高）の下に 337 幅の白パネル（820 高）。
	   店内写真の列はパネルの下端に 43 かぶる。Local Expertise は 337 幅の白パネルにカード 2×2 も入る */
	.p-sarea {
		--st-area-bg-height: calc(202 * var(--st-su)); /* 641:1315 */
		--st-area-bg-position: 50% 0%;
		--st-area-logo-width: calc(125 * var(--st-su)); /* 641:1368 */
		--st-area-card-photo: calc(120.4 * var(--st-su)); /* 641:1398 */

		padding: calc(78 * var(--st-su)) 0 calc(80 * var(--st-su)); /* 641:1317 / パネル下端 +1955 → +2035 */
		background: var(--st-bg-light); /* 641:1318 */
	}

	/* 641:1323 x19 +167 337x820。黒帯（641:1319）はパネルの上端に重なる */
	.p-sarea__panel {
		width: calc(337 * var(--st-su));
		min-height: calc(820 * var(--st-su));
		margin: calc(70.1 * var(--st-su)) auto 0; /* 見出し下端 +96.9 → +167 */
		padding-bottom: calc(60 * var(--st-su));
	}

	/* 641:1319 全幅 375x75・角丸なし。641:1320 Bold 14 / 1.6 / 1px の 2 行 */
	.p-sarea__banner {
		width: 100vw;
		height: calc(75 * var(--st-su));
		margin: 0 0 0 calc(50% - 50vw);
		line-height: 1.6;
	}

	/* 641:1324 x43 289 幅（パネルの左右 24） */
	.p-sarea__lead {
		margin: calc(19 * var(--st-su)) 0 0; /* 黒帯の下端 +242 → +261 */
		padding-inline: calc(24 * var(--st-su));
		text-align: left;
	}

	/* 2 段落のまま（641:1324） */
	.p-sarea__lead br {
		display: inline;
	}

	/* 外観写真（641:1325）→ 店舗情報（641:1327）の順 */
	.p-sarea__info {
		display: flex;
		flex-direction: column;
		row-gap: calc(25 * var(--st-su));
		margin-top: calc(25 * var(--st-su));
		padding-inline: calc(24 * var(--st-su));
	}

	.p-sarea__photo {
		order: -1;
		height: calc(192 * var(--st-su));
		aspect-ratio: auto;
		border-radius: calc(5 * var(--st-su));
	}

	/* ラベル x43 / 値 x130。行の高さ 19.2 + 区切り線の上下 8 / 8.4（行ピッチ 35.6） */
	.p-sarea__row {
		grid-template-columns: calc(87 * var(--st-su)) 1fr;
		padding: calc(8 * var(--st-su)) 0 calc(8.4 * var(--st-su));
	}

	.p-sarea__row:first-child {
		padding-top: 0;
	}

	.p-sarea__row:last-child {
		padding-bottom: 0;
	}

	/* 所在地は郵便番号のあとで改行（641:1327） */
	.p-sarea__row-part {
		display: block;
	}

	/* 641:1368 +884（店舗情報の下端 +834 → 50）/ 641:1367 +903 */
	.p-sarea__logo {
		margin-top: calc(49.6 * var(--st-su));
	}

	/* 641:1367 Medium 12 / 2 / 1px */
	.p-sarea__branch {
		margin-top: 0;
	}

	/* 641:1376〜641:1378 142x85・間隔 8・x9 から。パネル下端（+987）に 43 かぶる。
	   中間幅も画面の左端から並べる（中央に寄せると左端の 1 枚が画面の中で入れ替わって見えるため） */
	.p-sarea__arch {
		position: relative;
		z-index: 1;
		height: calc(var(--st-arch-sp-height) * var(--st-su));
		margin-top: calc(-43 * var(--st-su));
	}

	.p-sarea__arch-item {
		top: 0;
		left: calc((var(--st-arch-sp-left) + var(--st-arch-s) * var(--st-arch-sp-pitch)) * var(--st-su));
		width: calc(var(--st-arch-sp-width) * var(--st-su));
		height: calc(var(--st-arch-sp-height) * var(--st-su));
		border-radius: calc(5 * var(--st-su));
		/* 左端の 1 つ手前（-1 枚目）は右端が 1px だけ画面に残るので、出きる直前に消す */
		opacity: clamp(0, (var(--st-arch-s) + 0.99) * 100, 1);
	}

	/* --- Local Expertise（641:1379 x19 +1061 337x894。角丸なし）: 英字 → 見出し → 雪道写真 → 本文 → カード 2×2 --- */
	.p-sarea__expertise {
		width: calc(337 * var(--st-su));
		margin: calc(32 * var(--st-su)) auto 0; /* 写真の列の下端 +1029 → +1061 */
		padding: calc(47 * var(--st-su)) calc(37 * var(--st-su)) calc(53 * var(--st-su));
		background: var(--st-white);
		box-shadow: var(--st-shadow);
	}

	.p-sarea__local {
		display: flex;
		flex-direction: column;
	}

	.p-sarea__local-body {
		display: contents;
	}

	/* 641:1383 SF Medium 12 / 1.12 / 1px */
	.p-sarea__local-eng {
		order: 1;
	}

	/* 641:1382 Bold 14 / 1.6 / 1px（英字の下端 +1121.4 → +1129） */
	.p-sarea__local-heading {
		order: 2;
		margin: calc(7.6 * var(--st-su)) 0 0;
		letter-spacing: var(--ls-base);
	}

	/* 641:1385 x54 267x182（カンプは上下反転して描かれているが正位置で出す: 決定 B） */
	.p-sarea__local-photo {
		order: 3;
		width: calc(267 * var(--st-su));
		max-width: none;
		height: calc(182 * var(--st-su));
		margin: calc(14.2 * var(--st-su)) 0 0 calc(-2 * var(--st-su));
		box-shadow: none;
	}

	/* 641:1381 263 幅 Regular 12 / 2 / 1px（行末の字間 1 ぶん広げる） */
	.p-sarea__local-lead {
		order: 4;
		width: calc(263 * var(--st-su) + var(--ls-base));
		margin-top: calc(15 * var(--st-su));
	}

	/* 641:1389〜641:1427。円 120.4 の中心 x116.2 / 259.2（ピッチ 143）、番号は円の上端に 16 重なる */
	.p-sarea__cards {
		grid-template-columns: repeat(2, calc(143 * var(--st-su)));
		justify-content: center;
		row-gap: calc(4 * var(--st-su));
		margin: calc(3 * var(--st-su)) calc(-37 * var(--st-su)) 0;
	}

	.p-sarea__card-photo {
		margin-top: calc(-16.2 * var(--st-su));
	}

	/* Bold 10 / 1.6 / 1px（円の下端 +7.6） */
	.p-sarea__card-label {
		margin: calc(7.6 * var(--st-su)) 0 0;
	}

	.p-sarea__card-label-pc {
		display: none;
	}

	.p-sarea__card-label-sp {
		display: inline;
	}

	/* --- お問い合わせ CTA（SP-14 641:1428 y14389〜14938・549 高） --- */
	.p-scta {
		--st-cta-image-position: 66.8% 100%; /* 641:1429 w285.35% l-123.83% / h146.56% t-46.56% */
	}

	/* 641:1430 左から 308 幅（その 85.577% までが 50%） */
	.p-scta__bg::after {
		background: var(--st-cta-overlay-sp);
	}

	.p-scta__inner {
		padding: calc(80 * var(--st-su)) 0 calc(80 * var(--st-su));
	}

	/* 641:1434 SF Semibold 12 / normal / 1px */
	.p-scta__eng {
		font-weight: var(--fw-semibold);
		line-height: normal;
		color: var(--st-on-dark);
	}

	/* 641:1433 Bold 16 / 1.5 / 1px の 2 行（英字の下端 → +109） */
	.p-scta__heading {
		margin-top: calc(14.7 * var(--st-su));
		line-height: 1.5;
		letter-spacing: var(--ls-base);
		color: var(--st-on-dark);
	}

	/* 641:1432 337 幅・左揃え・3 段落 6 行（段落の改行を残す） */
	.p-scta__lead {
		width: calc(337 * var(--st-su) + var(--ls-base));
		margin: calc(25 * var(--st-su)) auto 0;
		font-weight: var(--fw-regular);
		text-align: left;
	}

	.p-scta__lead br {
		display: inline;
	}

	/* 641:1437 / 641:1442 305x50 radius 5・間隔 12（本文の下端 +326 → +357） */
	.p-scta__buttons {
		flex-direction: column;
		align-items: center;
		row-gap: calc(12 * var(--st-su));
		margin-top: calc(31 * var(--st-su));
	}

	.p-scta__button {
		width: calc(305 * var(--st-su));
		height: calc(50 * var(--st-su));
		border-radius: calc(5 * var(--st-su));
	}

	.p-scta__button--line {
		column-gap: calc(4 * var(--st-su));
	}

	.p-scta__button--line .p-scta__button-icon {
		width: calc(44.6 * var(--st-su)); /* 641:1439 */
		height: calc(44.6 * var(--st-su));
	}

	.p-scta__button--tel {
		column-gap: calc(10 * var(--st-su));
	}

	.p-scta__button--tel .p-scta__button-icon {
		width: calc(33.9 * var(--st-su)); /* 641:1445 */
		height: calc(33.9 * var(--st-su));
	}
}

/* ============================================================
   PC（1025px 以上）: 1920px カンプの縮小拡大コピー化
   ------------------------------------------------------------
   1 単位 --st-vu は「カンプ 1920 の 1px の実寸」。1920px 以上では 1px で
   固定され、それ以下では画面幅に比例して縮む。文字・余白・角丸を
   この単位に載せることで、どの幅でも 1920px と同じ改行位置・比率を保つ。
   ============================================================ */
@media (min-width: 1025px) {
	:root {
		/* --st-vu 自体は css/column.css が定義する */

		/* clamp（375→1920 の補間）だった FV のトークンを 1920 比例に置き換える */
		--st-fv-height: calc(1237.5 * var(--st-vu));
		--st-fv-eyebrow: calc(24 * var(--st-vu));
		--st-fv-eyebrow-ls: calc(3 * var(--st-vu));
		--st-fv-title: calc(150 * var(--st-vu));
		--st-fv-title-ls: calc(-3 * var(--st-vu));
		--st-fv-lead: calc(36 * var(--st-vu));
		--st-fv-lead-ls: calc(3 * var(--st-vu));
		--st-fv-logo-width: calc(285.2 * var(--st-vu));
		--st-fv-logo-indent: calc(4.8 * var(--st-vu));
		--st-fv-badge-height: calc(42 * var(--st-vu));
		--st-fv-badge-pad: calc(19.6 * var(--st-vu));
		--st-fv-badge-gap: calc(14.5 * var(--st-vu));
		--st-fv-badge-radius: calc(3 * var(--st-vu));
		--st-fv-title-gap: calc(14.35 * var(--st-vu));
		--st-fv-lead-gap: calc(14.55 * var(--st-vu));
		--st-fv-logo-gap: calc(47.4 * var(--st-vu));
		--st-fv-fade-height: calc(171 * var(--st-vu)); /* 612:177（y1067〜1238） */
		--st-fv-band-radius: calc(5 * var(--st-vu));
		--st-fv-photo-radius: calc(5 * var(--st-vu));
		--st-fv-band-gap: calc(25 * var(--st-vu)); /* ピッチ 454.3 − 429.3 */
		--st-fv-band-pad: calc(63.2 * var(--st-vu)); /* 612:178 の x63.15 */
		--st-fv-copy-top: calc(280.4 * var(--st-vu));
		--st-fv-copy-left: calc(141.6 * var(--st-vu));
		/* FV 下端 y1237.5 − 写真の上端 y1125.1 */
		--st-fv-band-overlap: calc(112.4 * var(--st-vu));

		/* 導入コピー以降の文字サイズ（カンプ 1920 の実測値） */
		--st-intro-heading: calc(36 * var(--st-vu));
		--st-intro-lead: calc(20 * var(--st-vu));
		--st-stats-number: calc(60 * var(--st-vu));
		--st-stats-unit: calc(24 * var(--st-vu));
		--st-stats-label: calc(20 * var(--st-vu));
		--st-concern-heading: calc(36 * var(--st-vu));
		--st-concern-worry: calc(24 * var(--st-vu));
		--st-concern-note: calc(16 * var(--st-vu));
		--st-reasons-copy: calc(40 * var(--st-vu));
		--st-reasons-copy-lead: calc(20 * var(--st-vu));
		--st-reasons-title: calc(48 * var(--st-vu));
		--st-reasons-title-lead: calc(18 * var(--st-vu));
		--st-reasons-eng: calc(120 * var(--st-vu));
		--st-reasons-eng-sub: calc(42 * var(--st-vu));
		--st-reasons-item-lead: calc(26 * var(--st-vu));
		--st-reasons-item-label: calc(32 * var(--st-vu));
		--st-service-card-eng: calc(86 * var(--st-vu));
		--st-service-card-label: calc(28 * var(--st-vu));
		--st-service-banner: calc(32 * var(--st-vu));
		--st-service-lead: calc(17 * var(--st-vu));
		--st-service-row-eng: calc(64 * var(--st-vu));
		--st-service-row-label: calc(26 * var(--st-vu));
		--st-service-photo-label: calc(20 * var(--st-vu));
		--st-visible-eyebrow: calc(32 * var(--st-vu));
		--st-visible-heading: calc(48 * var(--st-vu));
		--st-visible-card-eng: calc(48 * var(--st-vu));
		--st-visible-card-label: calc(24 * var(--st-vu));
		--st-visible-lead: calc(20 * var(--st-vu));
		--st-plans-label: calc(20 * var(--st-vu));
		--st-plans-eng: calc(76 * var(--st-vu));
		--st-plans-copy: calc(18 * var(--st-vu));
		--st-plans-feature: calc(20 * var(--st-vu));
		--st-reviews-score: calc(24 * var(--st-vu));
		--st-reviews-name: calc(14 * var(--st-vu)); /* 本文の下の名前（カンプに無い） */
		--st-reviews-text: calc(16 * var(--st-vu));
		--st-flow-chevron: calc(16 * var(--st-vu));
		--st-flow-number: calc(64 * var(--st-vu));
		--st-flow-row-title: calc(24 * var(--st-vu));
		--st-flow-row-desc: calc(16 * var(--st-vu));
		--st-quality-eng: calc(32 * var(--st-vu));
		--st-quality-heading: calc(48 * var(--st-vu));
		--st-quality-lead: calc(20 * var(--st-vu));
		--st-quality-badge: calc(36 * var(--st-vu));
		--st-quality-badge-num: calc(38 * var(--st-vu));
		--st-faq-mark: calc(64 * var(--st-vu));
		--st-faq-q: calc(24 * var(--st-vu));
		--st-faq-a: calc(14 * var(--st-vu));
		--st-area-banner: calc(32 * var(--st-vu));
		--st-area-lead: calc(16 * var(--st-vu));
		--st-area-table: calc(16 * var(--st-vu));
		--st-area-branch: calc(18 * var(--st-vu));
		--st-area-local-eng: calc(32 * var(--st-vu));
		--st-area-local-heading: calc(40 * var(--st-vu));
		--st-area-local-lead: calc(16 * var(--st-vu));
		--st-area-card-number: calc(64 * var(--st-vu));
		--st-area-card-label: calc(24 * var(--st-vu));
		--st-cta-eng: calc(32 * var(--st-vu));
		--st-cta-heading: calc(40 * var(--st-vu));
		--st-cta-lead: calc(20 * var(--st-vu));
		--st-cta-button: calc(32 * var(--st-vu));
		--st-cta-button-ls: calc(3 * var(--st-vu));
		--st-fv-band-radius: calc(5 * var(--st-vu));
	}

	/* 固定 px のグローバル字間トークンは、縮小すると文字サイズ比で相対的に
	   広がって改行位置を変えてしまう。支店ページのセクション内だけ比例にする
	   （ヘッダー・フッターには影響させない） */
	.p-sfv,
	.p-sfv__band,
	.p-sintro,
	.p-sstrip,
	.p-sstats,
	.p-sconcern,
	.p-sreasons,
	.p-sservice,
	.p-svisible,
	.p-splans,
	.p-sreviews,
	.p-sflow,
	.p-squality,
	.p-sfaq,
	.p-sarea,
	.p-scta {
		--ls-wide: calc(2 * var(--st-vu));
		--ls-base: calc(1 * var(--st-vu));
		--ls-title: calc(5 * var(--st-vu));
	}

	/* ボタン（265x64・文字 20px）も 1920 比例にする */
	.p-splans {
		--btn-width: calc(265 * var(--st-vu));
		--btn-height: calc(64 * var(--st-vu));
		--fs-button: calc(20 * var(--st-vu));
		--ls-button: calc(2 * var(--st-vu));
		--radius-pill: calc(32 * var(--st-vu));
	}
}

/* ============================================================
   SP（1024px 以下）: 375px 基準の縮小拡大コピー化
   ------------------------------------------------------------
   1 単位 --st-su は「375px 幅での 1px の実寸」。PC の --st-vu と同じ考え方で、
   どの幅でも 375px と同じ比率を保つ（上限は style.css の --sp-scale-max）。
   FV〜不安提示は SP カンプ 670:239 の実測値。それ以降は SP カンプが無い時期の
   補間値（TOP / 企業情報の SP ルールから）のまま。
   ============================================================ */
@media (max-width: 1024px) {
	:root {
		/* --st-su 自体は css/column.css が定義する */

		/* FV（SP-1 638:72〜638:94。y0〜723、ヘッダーは上に重なる） */
		--st-fv-height: calc(723 * var(--st-su));
		--st-fv-copy-top: calc(224 * var(--st-su)); /* 638:82 */
		--st-fv-copy-left: calc(40 * var(--st-su));
		--st-fv-eyebrow: calc(12 * var(--st-su)); /* 638:83 */
		--st-fv-eyebrow-ls: calc(1 * var(--st-su));
		--st-fv-title: calc(79 * var(--st-su)); /* 638:88 */
		--st-fv-title-ls: calc(-3 * var(--st-su));
		--st-fv-lead: calc(19 * var(--st-su)); /* 638:89 */
		--st-fv-lead-ls: calc(1 * var(--st-su));
		--st-fv-lead-color: var(--st-on-dark);
		--st-fv-logo-width: calc(147 * var(--st-su)); /* 638:90 */
		--st-fv-badge-height: calc(22 * var(--st-su)); /* 638:85 68x22 */
		--st-fv-badge-pad: calc(8.5 * var(--st-su));
		--st-fv-badge-gap: calc(8 * var(--st-su));
		--st-fv-badge-radius: calc(3 * var(--st-su));
		--st-fv-badge-color: var(--st-on-dark); /* 638:86 */
		--st-fv-title-gap: 0px; /* 英字 y246 = コピー下端 */
		--st-fv-lead-gap: calc(10 * var(--st-su)); /* 英字下端 422 → 432 */
		--st-fv-logo-gap: calc(16.5 * var(--st-su)); /* 432 + 28.5 → 477 */
		--st-fv-fade-height: calc(71 * var(--st-su)); /* 638:81（y652〜723） */
		--st-fv-shade-left-size: 76.267%; /* 638:74 の幅 286 / 375 */
		--st-fv-image-position: 61.7% center; /* 638:72 の切り抜き（left -149.6%） */
		--st-fv-band-radius: calc(3 * var(--st-su));
		--st-fv-photo-radius: calc(5 * var(--st-su)); /* 638:94 */
		--st-fv-band-gap: calc(9.33 * var(--st-su));
		--st-fv-band-pad: calc(16 * var(--st-su)); /* 638:94 の x16 */
		--st-fv-band-overlap: calc(62 * var(--st-su)); /* FV 下端 723 − 写真の上端 661 */
		--st-fv-band-item-width: calc(161.07 * var(--st-su));

		/* 導入コピー以降の文字サイズ（SERVICE までは SP カンプ、それ以降は補間値） */
		--st-intro-heading: calc(16 * var(--st-su)); /* 638:97 */
		--st-intro-lead: calc(12 * var(--st-su)); /* 638:96 */
		--st-stats-number: calc(40 * var(--st-su)); /* 638:133 ほか */
		--st-stats-unit: calc(14 * var(--st-su));
		--st-stats-label: calc(14 * var(--st-su));
		--st-concern-heading: calc(14 * var(--st-su)); /* 638:148 */
		--st-concern-worry: calc(13 * var(--st-su)); /* 638:145 */
		--st-concern-note: calc(12 * var(--st-su)); /* 638:144 */
		--st-reasons-copy: calc(14 * var(--st-su)); /* 641:24 */
		--st-reasons-copy-lead: calc(12 * var(--st-su));
		--st-reasons-title: calc(24 * var(--st-su));
		--st-reasons-title-lead: calc(11 * var(--st-su));
		--st-reasons-eng: calc(32 * var(--st-su)); /* 641:52 */
		--st-reasons-eng-sub: calc(14 * var(--st-su)); /* 641:39 */
		--st-reasons-item-word: calc(10 * var(--st-su)); /* 641:30〜641:35 */
		--st-reasons-item-lead: calc(11 * var(--st-su));
		--st-reasons-item-label: calc(14 * var(--st-su));
		--st-service-card-eng: calc(26 * var(--st-su)); /* 641:74 */
		--st-service-card-label: calc(14 * var(--st-su)); /* 641:71 */
		--st-service-banner: calc(14 * var(--st-su)); /* 641:98 */
		--st-service-lead: calc(12 * var(--st-su)); /* 641:106 */
		--st-service-row-eng: calc(26 * var(--st-su)); /* 641:104 */
		--st-service-row-label: calc(12 * var(--st-su)); /* 641:103 */
		--st-service-photo-label: calc(10 * var(--st-su)); /* 641:116 ほか */
		--st-visible-eyebrow: calc(16 * var(--st-su));
		--st-visible-heading: calc(20 * var(--st-su));
		--st-visible-card-eng: calc(20 * var(--st-su));
		--st-visible-card-label: calc(13 * var(--st-su));
		--st-visible-lead: calc(12 * var(--st-su));
		--st-plans-label: calc(12 * var(--st-su)); /* 641:287 / 641:315 */
		--st-plans-eng: calc(36 * var(--st-su)); /* 641:286 / 641:314 */
		--st-plans-copy: calc(12 * var(--st-su)); /* 641:317 */
		--st-plans-feature: calc(10 * var(--st-su)); /* 641:299 ほか */
		--st-reviews-score: calc(14 * var(--st-su)); /* 641:404 */
		--st-reviews-name: calc(10 * var(--st-su)); /* 本文の下の名前（カンプに無い） */
		--st-reviews-text: calc(10 * var(--st-su)); /* 641:401 */
		--st-flow-number: calc(36 * var(--st-su)); /* 641:474 */
		--st-flow-row-title: calc(16 * var(--st-su)); /* 641:473 */
		--st-flow-row-desc: calc(10 * var(--st-su)); /* 641:472 */
		--st-quality-eng: calc(16 * var(--st-su)); /* 641:1259 */
		--st-quality-heading: calc(14 * var(--st-su)); /* 641:1258 */
		--st-quality-lead: calc(12 * var(--st-su)); /* 641:1257 */
		--st-quality-badge: calc(20 * var(--st-su)); /* 641:1261 */
		--st-quality-badge-num: calc(20 * var(--st-su));
		--st-quality-image-position: 70.67%; /* 641:1255 はみ出し 643 のうち左を 454.4 切る */
		--st-faq-mark: calc(20 * var(--st-su)); /* 641:1272 */
		--st-faq-q: calc(12 * var(--st-su)); /* 641:1271 */
		--st-faq-a: calc(10 * var(--st-su)); /* 641:1309 */
		--st-area-banner: calc(14 * var(--st-su)); /* 641:1320 */
		--st-area-lead: calc(12 * var(--st-su)); /* 641:1324 */
		--st-area-table: calc(12 * var(--st-su)); /* 641:1327 */
		--st-area-branch: calc(12 * var(--st-su)); /* 641:1367 */
		--st-area-local-eng: calc(12 * var(--st-su)); /* 641:1383 */
		--st-area-local-heading: calc(14 * var(--st-su)); /* 641:1382 */
		--st-area-local-lead: calc(12 * var(--st-su)); /* 641:1381 */
		--st-area-card-number: calc(32 * var(--st-su)); /* 641:1400 */
		--st-area-card-label: calc(10 * var(--st-su)); /* 641:1423 */
		--st-cta-eng: calc(12 * var(--st-su)); /* 641:1434 */
		--st-cta-heading: calc(16 * var(--st-su)); /* 641:1433 */
		--st-cta-lead: calc(12 * var(--st-su)); /* 641:1432 */
		--st-cta-button: calc(20 * var(--st-su)); /* 641:1438 */
		--st-cta-button-ls: calc(1 * var(--st-su));
		--st-fv-band-radius: calc(3 * var(--st-su));
	}

	/* ガターと字間はグローバルの clamp / 固定 px のままだと比例にならないため、
	   支店ページのセクション内だけ 375 比例にする */
	.p-sfv,
	.p-sfv__band,
	.p-sintro,
	.p-sstrip,
	.p-sstats,
	.p-sconcern,
	.p-sreasons,
	.p-sservice,
	.p-svisible,
	.p-splans,
	.p-sreviews,
	.p-sflow,
	.p-squality,
	.p-sfaq,
	.p-sarea,
	.p-scta {
		--gutter: calc(27.5 * var(--st-su));
		--ls-wide: calc(2 * var(--st-su));
		--ls-base: calc(1 * var(--st-su));
		--ls-title: calc(2 * var(--st-su));
	}

	/* ボタンも 375 比例にする */
	.p-splans {
		--btn-width: calc(180 * var(--st-su));
		--btn-height: calc(44 * var(--st-su));
		--fs-button: calc(13 * var(--st-su));
		--ls-button: calc(1 * var(--st-su));
		--radius-pill: calc(22 * var(--st-su));
	}
}