/* セクション固有のスタイル。各ワーカーが自分の担当分だけを追記する。
 * 共通部品は components.css、値は tokens.css。生の hex を書かないこと。
 */

/* =========================================================
 * S01-header（node 250:179 / 1920x84）
 * ========================================================= */
/* **器で組む（service-site 方式 / オーナー指示 2026-08-25）。**
 * 1920px の実座標で絶対配置すると、幅が足りない帯で中身が画面外へ出て消える
 * （実測: 900px でヘッダーのCTAが丸ごと見えなくなった）。
 * 左右のパディングを `max(gutter, (100% - コンテンツ幅)/2)` で作れば、
 *   広い幅 … パディングが伸びてコンテンツは原寸のまま中央に留まる
 *   狭い幅 … パディングが gutter で頭打ちになり、器のほうが縮む
 * となり「余白がなくなってから、コンテンツが縮む」挙動になる。
 *
 * **1920px では元の実座標と完全に一致する。** デザインの余白は
 * 左 364px / 右 356px と非対称なので、中心から 4px ずらして再現している
 * （364 = (1920-1200)/2 + 4、356 = (1920-1200)/2 - 4）。 */
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: 84px;
  padding-left: max(var(--gutter), calc((100% - var(--w-wide)) / 2 + 4px));
  padding-right: max(var(--gutter), calc((100% - var(--w-wide)) / 2 - 4px));
  background: var(--bg-header);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--c-border);
}

/* logo（node 350:2 / 303x52）。器の左端に置く。中のロゴ画像は .logo 基準の絶対配置のまま */
header .logo {
  position: relative;
  flex: 0 0 auto;
  width: 303px;
  height: 52px;
}

/* ロゴ画像（枠は node 350:2 / 画像は node 354:105 を含む全体）。image/logo.svg
 * logo.svg は Wマーク＋文字（"ホームページ契約 相談窓口" /
 * "Website Contract Consultation Desk"）が一体の全体ロゴ（303x52）。
 * **2026-08-27 オーナー指示で、文字をHTMLテキストで組むのをやめて画像へ一本化した。**
 * 以前は clip-path でWマークだけを見せ、文字は .logo__title / .logo__sub で別に
 * 組んでいた（両方出すと二重描画になるため）。一本化した今は clip-path が不要で、
 * 枠(303x52)と画像の原寸が一致するので等倍で置く。 */
header .logo__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 303px;
  height: 52px;
  max-width: none;
}

/* a.scp1（node 250:186 相当 / .scp1 .scp1--sm は components.css）。
 * left は元から "50% + Npx" で中央基準の自己センタリングなので、
 * 中央基準トリミングの margin-left 補正は不要（幅が変わっても式自体が追従する）。
 * font-weight は design context 実測(bold)が components.css の .scp1--sm(medium) と
 * 異なるため、セクション側で上書きする。 */
header .scp1 {
  /* 器の右端に置く（flex の space-between）。実座標の絶対配置をやめたので
   * 狭い帯でも画面外へ出ない。1920px では右端が 1564px で design と一致する。
   * **縦は align-items:center に任せない。** design の top は 16.3px で、
   * 中央寄せ（(83-47)/2 = 18px）とは 1.7px ずれる（実測）。 */
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 16.3px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16px;
  /* **これが無いと 1280〜1399px でボタンが潰れてラベルが折り返す。**
   * 絶対配置のシュリンク・トゥ・フィット幅は `left` から包含ブロックの右端までで
   * 頭打ちになり、`translateX(-50%)` で戻す前の位置で計算される。
   * 1280px では left=1151.45px なので残りが 128.55px しかなく、
   * 本来 185.13x47 のボタンが 128.56x80（3行）に潰れていた（実測 2026-08-25）。
   * nowrap にすると最小幅＝最大幅＝185.13px になり頭打ちを受けない。
   * 戻したあとの右端は 1244px なので 1280px でもはみ出さない。
   * **check-responsive も visual-diff も 1920px しか見ないのでこれを検出しない。** */
  white-space: nowrap;
}

/* =========================================================
 * S02-mv（node 250:4 / 1920x780）
 * ========================================================= */
/* **器で組む（service-site方式）。** 本文3ブロックは実座標の絶対配置をやめて
 * 通常フローに置く。理由は2つ:
 *   1. 絶対配置のままだと狭い帯で `left:360px` が画面外へ出て左が切れる
 *   2. 器を狭めると文字が折り返して背が伸びるが、絶対配置だと次のブロックに重なる
 * `display: flow-root` は先頭子の margin-top を外へ漏らさないため（マージン相殺の回避）。
 * `height` → `min-height` は、狭い帯で中身が伸びたときに切らないため。
 * **1920px では min()/max() が実座標側を返すので幾何は1pxも動かない。** */
#mv {
  display: flow-root;
  min-height: 780px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--c-border);
}

/* 本文ブロック共通の器。design の左端 360px = 中心から 600px 左。
 * 広い幅では実座標どおり、狭い幅では --gutter で頭打ちになり器が縮む。 */
#mv .mv__catch,
#mv .mv__heading,
#mv .mv__list {
  position: relative;
  z-index: var(--z-body);
  margin-left: max(var(--gutter), calc(50% - 600px));
}

/* imageA（node 268:36 / 1920x780）。.deco .deco-full は base.css の共通ユーティリティ */
#mv .mv__bg {
  top: 0;
  left: 0;
  width: var(--w-page);
  height: 780px;
}

#mv .mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* キャッチコピー（node 250:6） */
/* design: top 92.5px + translateY(-50%) → 実上端 56.85px（実測） */
#mv .mv__catch {
  margin-top: 56.85px;
  width: min(1063px, 100% - var(--gutter) * 2);
}

#mv .mv__catch p {
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lead);
  line-height: 71.3px;
  color: var(--c-ink);
  letter-spacing: 0.46px;
}

/* 見出し（node 250:7） */
/* design: top 211.65px + translateY(-50%) → 実上端 143.14px。
 * 直前 .mv__catch の底 128.15px からの差 14.99px を margin-top に置く（実測） */
#mv .mv__heading {
  margin-top: 14.99px;
  width: min(928.48px, 100% - var(--gutter) * 2);
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  letter-spacing: 1px;
}

#mv .mv__heading-brand {
  color: var(--c-brand);
  font-size: var(--fs-3xl);
  line-height: 66px;
}

#mv .mv__heading-y {
  font-size: var(--fs-2xl);
  line-height: 66px;
}

#mv .mv__heading-sub {
  font-size: var(--fs-lg);
  line-height: 70px;
}

/* 不安リスト（node 309:245）。共通部品 .check-list を使用。
 * 通常の check-list はゴシック体だが、MV内は明朝・専用の文字色トークン(--c-ink-mv)。 */
/* design: top 329px。直前 .mv__heading の底 280.14px からの差 48.86px（実測） */
#mv .mv__list {
  margin-top: 48.88px;
  width: min(563px, 100% - var(--gutter) * 2);
  border-top: 1px solid var(--c-border-2);
  border-bottom: 1px solid var(--c-border-2);
  /* metadata の node 309:245 は y=329 / height=215。li は y=2,48,95,141 に置かれる。
   * ul の内容(330)から li1(331) までが 1px、最終 li の底(470.5+46.5=517)から
   * 下罫線(543)までが 26px。1 + 46.5x4 + 26 = 213 で内容高と一致する。 */
  padding-top: 1px;
  padding-bottom: 26px;
}

/* .check-list（components.css）の min-height:72px / padding-block:25px は
 * このMVの実描画と合わない。**metadata(node 309:245〜309:265)の実測が正**:
 *   li は 562x72/73 だが y=2,48,95,141 に置かれる = **間隔46.5pxで互いに重なっている**。
 *   つまりFigmaのliの箱の高さ(72)は送り(46.5)ではない。CSSのliは「送り」の器として
 *   height:46.5px 固定にし、はみ出しは overflow visible のまま許す（Figmaと同じ状態）。
 *   li内部は icon が y=+25、テキスト箱が y=+20（高さ32）。両方 +0 にすると
 *   テキストだけ6px下がる（実測 2026-08-25: 参照のインク行 360/406/453 に対し
 *   実装 366/413/459）。padding-top:20px でテキスト箱を +20 に置き、
 *   アイコンは margin-top:5px で +25 に落とす。
 * 部品側の 72px のままだと 25+32.3+25=82.3px になり、送りが約1.8倍に開いて
 * 最終項目が S03-lead の文字に重なっていた（visual-diff 実測 1.59%）。
 * `.check-list` はこのMVでしか使っていないが、SP版で本当に72pxの実例が
 * 出る可能性を残して**部品は変えず、セクション側で上書きする**
 * （header .scp1 と同じ扱い）。 */
#mv .mv__list > li {
  /* min-height の上書きを忘れないこと。部品側の min-height:72px は height:46.5px より
   * 優先されるため、これが無いと送りが72pxのままになる（実測で踏んだ） */
  min-height: 0;
  height: 46.5px;
  padding: 20px 23px 0;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-17);
  line-height: 32.3px;
  color: var(--c-ink-mv);
  letter-spacing: 0.16px;
}

/* アイコンは Figma で li の y=+25、テキスト箱は y=+20。li の padding-top(20px) で
 * テキスト側を合わせているので、アイコンだけ 5px 落とす（node 309:247 等） */
#mv .mv__list .check {
  margin-top: 5px;
}

/* node 309:255 のテキストは1行想定（Figma上のテキスト幅557pxがli幅562pxを超える）。
 * 折り返さないよう明示する。参照PNGでもインク右端は x=999 まで伸びており、
 * li(563px)を突き抜けるのが正しい（実測 2026-08-25）。 */
#mv .mv__list > li:nth-child(2) p {
  white-space: nowrap;
}

/* ---------------------------------------------------------
 * B案（index-b.html / Figma PC_B 309:270 / D17）の MV 差分。
 * このクラス群は index-b.html にしか出ないので index.html には一切効かない。
 * キャッチ(.mv__catch)と ul は A と同一スタイル（PC_B の表示中 ul 351:7 は
 * A の 309:245 と座標・文言とも完全一致を確認済み）。
 * --------------------------------------------------------- */
/* 見出し1行目（node 309:278 / x=324 y=169.5中心 979x65 / 54px / --c-brand / lh66 / tracking1） */
#mv .mv__heading--b1 {
  /* 実上端 169.5 - 66/2 = 136.5。直前 .mv__catch の底 128.15 からの差 */
  margin-top: 8.35px;
  margin-left: max(var(--gutter), calc(50% - 636px)); /* = x:324 */
  width: min(979px, 100% - var(--gutter) * 2);
  font-size: var(--fs-3xl);
  line-height: 66px;
  color: var(--c-brand);
}

/* 見出し2行目（node 309:676 / x=362 y=249.5中心 928x65 / 50px / --c-ink / lh66 / tracking1） */
#mv .mv__heading--b2 {
  /* 実上端 249.5 - 33 = 216.5。直前 b1 の底 202.5 からの差 */
  margin-top: 14px;
  margin-left: max(var(--gutter), calc(50% - 598px)); /* = x:362 */
  width: min(928px, 100% - var(--gutter) * 2);
  font-size: var(--fs-2xl);
  line-height: 66px;
}

/* B案の ul は見出し構成が変わったぶん margin-top を付け替える（design y=329 は A と同じ。
 * b2 の底 282.5 からの差 46.5px） */
#mv .mv__list--b {
  margin-top: 46.5px;
}

/* =========================================================
 * S03-lead（node 250:21 / x=360 y=667 716x80、frameではなくtext直置き）
 * **中央揃えではない。** metadata の x=360 はページの本文左端で、参照PNGでも
 * 2行が同じ左端から始まっている（実測 2026-08-25）。text-align:center だと
 * 2行目「一度、確かめてみませんか。」だけ内側に寄って別物になる。
 * ========================================================= */
/* Figmaの main(#mv, 84〜864) はフレーム下端に空白があり、lead(y=667)はその空白に
 * 197px 食い込む（積み上げ実測。#mv側は書き換えない）。整数pxで補正する。 */
#lead {
  position: relative;
  z-index: var(--z-body); /* #mv の背景写真(z-deco)より前に出す */
  /* 器（service-site方式）。広い幅では x:360 の実座標どおり、
   * 狭い幅では --gutter で頭打ちになり器が縮む。1920px では実座標を返す */
  width: min(716px, 100% - var(--gutter) * 2);
  margin-top: -197px;
  margin-left: max(var(--gutter), calc(50% - 600px)); /* = x:360 */
  display: flow-root; /* pのマイナスmarginが親と相殺されない（マージン相殺の回避）ようにする */
  text-align: left;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lead);
  color: var(--c-brand);
  letter-spacing: 2px;
}

/* line-height 50px(行間) はそのまま、上下の半行送り(10px = (50-30)/2)だけ
 * トリムしてFigmaの実測高さ80px(=2行分100pxからの差分)に合わせる */
#lead p {
  margin: 0;
  line-height: 50px;
}

#lead p:first-child {
  margin-top: -10px;
}

#lead p:last-child {
  margin-bottom: -10px;
}

/* =========================================================
 * S04-cta1（node 250:376 / x=361 y=808 650x116）。共通部品 .cta を使う。
 * #lead(y=667,h=80) → cta1(y=808) の設計上の隙間 = 61px
 *
 * **中央寄せ(margin:auto)ではない。** metadata の x=361 が正で、lead(x=360)と
 * ほぼ同じ左端に揃う。auto だと約280px右にずれる（実測 2026-08-25）。
 *
 * **z-index が要る。** cta1(y=808) は #mv(84〜864) の内側に入り込むが、
 * #mv の背景写真は z-deco で絶対配置されているため、位置指定の無い #cta1 は
 * 写真の下に潜って上半分が隠れていた。z-body で前に出す。
 * ========================================================= */
#cta1 {
  position: relative;
  z-index: var(--z-body);
  /* 器（service-site方式）。狭い幅では縮む。1920px では x:361 の実座標を返す */
  width: min(650px, 100% - var(--gutter) * 2);
  margin-top: 61px;
  margin-left: max(var(--gutter), calc(50% - 599px)); /* = x:361 */
}

.cta__title {
  flex: none;
  width: 227px;
  height: 24px;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: 30px;
  letter-spacing: 2px;
  text-align: center;
}

.cta__note {
  flex: none;
  margin: 0;
  white-space: nowrap;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: 16px;
  letter-spacing: 0.16px;
}

/* 矢印装飾（node 351:87 / 箱は 60x0）。画像は image/ に未着荷だが、実体は
 * 「1px の白線 + 右端に45°のシェブロン」だけなので CSS で再現する
 * （section4__line / #section1 の Frame 2 と同じ判断。2026-08-26 オーナー指示）。
 * 形状は Figma 単体レンダー(351:87)の画素実測:
 *   軸   … 全長60px / 太さ1px / 白（レンダーの列被覆が全列 1.00）
 *   矢じり … 右端から水平3px・垂直3px の腕2本（傾き45°。腕の長さ 3√2 = 4.243px）
 * レンダー実寸が 60.5x7.36 と箱より大きいのは stroke 1px とマイターの膨らみで、
 * **箱は 60x0 のまま**（.cta は本文24px + padding40x2 で高さが決まるので配置は不変）。 */
/* 線は border ではなく height + background で引く。**border-width は Chrome が
 * 1px 未満を 1px に切り上げる**ため（実測: 0.5px 指定の computed が 1px）、
 * SP の 0.5px（=2倍端末の 1 device px）を border では表現できない。
 * height なら 0.5px がそのまま通る（実測: 箱の高さ 0.5px）。
 * 親に border が無いので絶対配置の基準（padding box）が箱の上端と一致し、
 * 腕の付け根が軸の中心線にそのまま乗る。 */
.cta__arrow {
  position: relative;
  flex: none;
  width: 60px;
  height: 1px;
  background: var(--c-on-dark);
}

/* 矢じりの2本の腕。軸の右端（transform-origin: right center = 60px, 中心線）を
 * 支点にして ±45° に倒す。腕の長さ 4.243px が水平3px・垂直3px に分解される。 */
.cta__arrow::before,
.cta__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 4.243px; /* 3 x √2 */
  height: 1px; /* 軸と同じ太さ */
  background: var(--c-on-dark);
  transform-origin: right center;
}

.cta__arrow::before {
  transform: rotate(45deg); /* 上の腕（CSSの正回転は時計回り＝左端が上へ） */
}

.cta__arrow::after {
  transform: rotate(-45deg); /* 下の腕 */
}

/* =========================================================
 * S05-section1（node 250:25 / 1920x692）
 * 背景装飾(Frame 2 / 268:37, 1920x663, 上へ-319はみ出す)は image/ に未着荷のため未実装。
 * PROGRESS.md に報告済み。3つのテキストブロックは Figma実測どおり絶対配置で、
 * left:50% + transform(-50%) の自己センタリングなので中央基準トリミングの補正は不要
 * （header .scp1 と同じ扱い）。
 * ========================================================= */
/* cta1(y=808,h=116→底924) → section1(y=1183) の設計上の隙間 = 259px */
/* 器で組む（service-site方式）。本文3ブロックは中央寄せなので `margin-inline: auto`
 * で足りる。幅だけ min() にして狭い帯で縮ませる。
 * `display: flow-root` は先頭子の負マージンを外へ漏らさないため。 */
#section1 {
  display: flow-root;
  margin-top: 259px;
  min-height: 692px;
}

#section1 .section1__title,
#section1 .section1__lead,
#section1 .section1__heading {
  position: relative;
  z-index: var(--z-body);
  margin-inline: auto;
}

/* 背景装飾（node 268:37 "Frame 2" / 1920x663、section1の上端から -318.94px はみ出す）。
 * .deco が position:absolute / z-deco / pointer-events:none を与える。
 * 実座標絶対配置なので中央基準トリミングの補正を入れる。 */
#section1 .section1__bg {
  left: 0;
  top: -318.94px;
  width: var(--w-page);
  height: 663px;
  margin-left: calc((100% - var(--w-page)) / 2);
}

/* 上の帯（node 268:39 "Rectangle 4" / 1920x433 @y=0） */
#section1 .section1__bg-block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 433px;
  background: var(--g-s1-block);
}

/* 下向きの三角（node 268:38 "Rectangle 2" / 1920x250 @y=433）。
 * 上辺が全幅、下端が中央の1点に収束する二等辺三角形。 */
#section1 .section1__bg-wedge {
  position: absolute;
  left: 0;
  top: 433px;
  width: 100%;
  height: 250px;
  background: var(--g-s1-wedge);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 中央の縦線（node 268:46 "Line 2" / x=960 y=88 高さ80）。色は --c-border-2 と実測一致 */
#section1 .section1__bg-line {
  position: absolute;
  left: 960px;
  top: 88px;
  width: 1px;
  height: 80px;
  background: var(--c-border-2);
}

/* 見出し（node 250:26 / 935x103, top -78.44px＝section外へはみ出す） */
#section1 .section1__title {
  /* design 実上端 -143.19px（top -78.44 + translateY(-50%)）。実測ベース */
  margin-top: -143.19px;
  width: min(935px, 100% - var(--gutter) * 2);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-34); /* 先頭行(p:first-child)と同じ値。コンテナ自体にも指定しておく必要がある
    （check-attrsは複数行の全文が一致する最も外側の要素で computed style を見るため） */
  color: var(--c-ink);
  letter-spacing: 2px;
}

#section1 .section1__title p:first-child {
  font-size: var(--fs-34);
  line-height: 59.5px;
}

#section1 .section1__title p:last-child {
  font-size: var(--fs-40);
  line-height: 70px;
}

/* リード文（node 250:27 / 1200x208, top 132.06px） */
#section1 .section1__lead {
  /* 直前 .section1__title の底からの差 41.21px（実測） */
  margin-top: 41.21px;
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  text-align: center;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 34.85px;
  color: var(--c-ink-2);
  letter-spacing: 0.16px;
}

#section1 .section1__lead strong {
  font-weight: var(--fw-bold);
  color: var(--c-brand);
}

/* 見出し2（node 250:30 / 1200x188, top 513.06px） */
#section1 .section1__heading {
  /* 直前 .section1__lead の底からの差 181.72px（実測） */
  margin-top: 181.72px;
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-36); /* 先頭行(p:nth-child(1))と同じ値。理由は section1__title と同じ */
  color: var(--c-ink);
  letter-spacing: 1px;
}

#section1 .section1__heading p:nth-child(1) {
  font-size: var(--fs-36);
  line-height: 63px;
}

#section1 .section1__heading p:nth-child(2) {
  font-size: var(--fs-lead);
  line-height: 60px;
}

#section1 .section1__heading-accent {
  font-size: var(--fs-38);
  line-height: 66.5px;
  color: var(--c-brand);
}

/* =========================================================
 * S06-section2（node 250:31 / 1920x1094）
 * SECTIONS.md「ページ横断レイヤー」の対象セクション（背景が上へ-351はみ出す実測）。
 * 背景は絶対配置にして高さに算入しない。中身(見出し/リード/カード列)は全て絶対配置。
 * ========================================================= */
/* section1(y=1183,h=692→底1875) → section2(y=1875) の設計上の隙間 = 0px */
/* 器で組む（service-site方式）。本文3ブロックは絶対配置をやめて通常フローに置く。
 * `display: flow-root` は先頭子の margin-top を外へ漏らさないため（マージン相殺の回避）。
 * `height` → `min-height` は、狭い帯で中身が伸びたときに切らないため。
 * **1920px では min()/max() が実座標側を返すので幾何は1pxも動かない。** */
#section2 {
  position: relative;
  display: flow-root;
  margin-top: 0;
  min-height: 1094px;
}

/* 背景(top_bg001.jpg 1920x450)。node 270:69/270:72 の詳細は index.html のコメント参照。
 * left:0 の実座標絶対配置なので中央基準トリミングを適用。暗幕は ::after で重ねる */
#section2 .section2__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 450px;
  margin-left: calc((100% - 1920px) / 2);
  z-index: var(--z-deco);
  pointer-events: none;
}

#section2 .section2__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#section2 .section2__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-scrim);
}

/* 見出し（node 250:32 / 650x60）。left は "50% - 325px"（=中心-半幅）の自己センタリング。
 * design: top 134.44px + translateY(-50%) → 実上端 104.44px（実測） */
#section2 .section2__heading {
  position: relative;
  margin: 0;
  margin-top: 104.44px;
  margin-inline: auto;
  width: min(650px, 100% - var(--gutter) * 2);
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: 60px;
  color: var(--c-on-dark);
  letter-spacing: 0.16px;
  z-index: var(--z-body);
}

/* リード文（node 250:33 / 715.65x59.85）。
 * design は left:calc(50% - 0.17px)+translate(-50%,-50%) → 実座標 x=602.01 top=2068.06（実測）。
 * 0.17px だけ中心からずれているので margin-inline:auto ではなく実座標基準の margin-left */
#section2 .section2__lead {
  position: relative;
  margin: 0;
  margin-top: 28.63px;
  margin-left: max(var(--gutter), calc(50% - 357.99px)); /* = x:602.01 */
  width: min(715.65px, 100% - var(--gutter) * 2);
  text-align: center;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-17);
  line-height: 34.85px;
  color: var(--c-on-dark);
  letter-spacing: 0.16px;
  z-index: var(--z-body);
}

/* カード列（node 250:34 / 1200x317 相当、暗幕上のガラス面）。
 * .is-in で中央基準トリミングに乗せ、left:0/right:0 の絶対配置で中央寄せにする
 * （section7__cards と同じ型）。4枚(280x317)はコード内訳 justify-between で等間隔に開く */
#section2 .section2__cards {
  position: relative;
  /* 直前 .section2__lead の底(2137.75)からの差 87.69px（実測）。幅と中央寄せは .is-in が持つ */
  margin-top: 87.69px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--bg-glass);
  z-index: var(--z-body);
}

/* カード本体は components.css の .card(280x317) をそのまま使う */
#section2 .section2__card-icon-box {
  width: 220px;
  height: 90px;
  flex: none;
  background: var(--bg-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

#section2 .section2__card-icon {
  width: 72px;
  height: 72px;
  flex: none;
}

/* **display:flex にしてはいけない。**
 * この <p> は地の文と <span class="...-accent"> が混在するインライン構造で、
 * flex にすると span と地の文が別々のフレックスアイテムに分解され、
 * それぞれが独立に折り返す。実測（2026-08-25）では
 *   参照: 「更新対応は自分たちでや / る必要がある。」
 *   実装: 「更新　は自分たちでやる必 / 対応　要がある。」
 * と、文が読めない形に崩れていた（4枚のカード全部）。grid も同じく
 * アイテム化するので不可。縦中央寄せはブロックのまま align-content で行う
 * （min-height が効く1行時のみ意味を持つ。実コンテンツは全て2行なので
 *  未対応ブラウザでも見た目は変わらない）。 */
/* 箱の高さは **48px 固定**（node 250:36 の実測）。min-height にすると
 * 2行分の行ボックス(28.8x2=57.6px)で箱が伸び、カードが 317→326.6px に膨らんで
 * 本文(250:37)が9.6px下がる。Figma は48pxの箱に57.6pxの本文を上下へはみ出させて
 * 中央に置いているので、height 固定 + align-content:center で同じ状態を作る
 * （参照PNG実測 2026-08-25: 1行目のインク上端 ref=489 / 実装(min-height時)=493）。
 * カード内訳: 30 + アイコン90 + 16 + 見出し48 + 16 + 本文87 + 30 = 317 */
#section2 .section2__card-title {
  display: block;
  align-content: center;
  height: 48px;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--c-ink);
  letter-spacing: 1px;
}

#section2 .section2__card-title-accent {
  color: var(--c-brand);
}

#section2 .section2__card-body {
  display: flex;
  align-items: center;
  min-height: 87px;
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-ink-2);
  letter-spacing: 1px;
}

/* =========================================================
 * S08-section4（node 250:54 / 1920x838）
 * SECTIONS.md「ページ横断レイヤー」の対象セクション。中身の実範囲は3680x1102。
 * 右+1760は写真(300:102/300:104)。html{overflow-x:clip}(base.css)で処理する。
 * 装飾(背景グラデーション/罫線/写真)は絶対配置でz-deco、本文はz-bodyを明示して
 * DOM順に関わらず装飾が本文の下に敷かれるようにする（section2と同じ扱い）。
 * section3(y=2626,h=847) → section4(y=3895) の設計上の隙間 = 422px
 * ========================================================= */
#section4 {
  position: relative;
  /* Figma宣言の隙間422pxは #section3(S07) の宣言高さ(847.16px)基準。
   * #section3 は中身がフレーム高に追従せず実測1230.59pxまで伸びる（L9と同型）ため、
   * 実測の隙間 = 3895 - (2626 + 1230.59) = 38.41px に補正する（stack-check実測 2026-08-24）。 */
  margin-top: 38px;
  /* 器で組む（service-site方式）。本文4ブロックは絶対配置をやめて通常フロー。
   * 1920px では min()/max() が実座標側を返すので幾何は動かない */
  display: flow-root;
  min-height: 838px;
  border-top: 1px solid var(--c-border-on-dark);
}

/* 背景グラデーション（node 282:90 / 1920x838）。--g-cta と同一値 */
#section4 .section4__bg {
  left: 0;
  top: -1px;
  width: var(--w-page);
  height: 838px;
  background: var(--g-cta);
}

/* 装飾線（node 284:94 / 639x0）。実座標絶対配置なので中央基準トリミングを適用。
 * 色は白（2026-08-26 オーナー指示でアルファ0.1を外した） */
#section4 .section4__line {
  left: 648px;
  top: 156px;
  width: 639px;
  height: 0;
  border-top: 1px solid var(--c-on-dark);
  margin-left: calc((100% - var(--w-page)) / 2);
}

/* 見出し（node 250:55 / 1200x57）。
 * design: top 117.5px + translate(-50%,-50%) → 実上端 = セクション上端 + 90px（実測）。
 * #section4 は border-top:1px があり、フローは border の内側から始まるので 1px 引く
 * （絶対配置時代の「padding box 起点で1px下に出る」と同じ事情の裏返し） */
#section4 .section4__heading {
  position: relative;
  z-index: var(--z-body);
  margin: 0;
  margin-top: 89px;
  margin-inline: auto;
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: 57px;
  color: var(--c-on-dark);
  letter-spacing: 0.16px;
}

/* 本文1（node 250:56 / 459x113）・本文2（node 250:57 / 459x127）。
 * left+right の実座標なので width に換算し中央基準トリミングを適用 */
#section4 .section4__text {
  position: relative;
  z-index: var(--z-body);
  margin: 0;
  width: min(459px, 100% - var(--gutter) * 2);
  margin-left: max(var(--gutter), calc(50% - 500px)); /* = x:460 */
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--c-on-dark);
  letter-spacing: 2px;
}

#section4 .section4__text--1 {
  /* design: top 309.5px + translateY(-50%) → 実上端 4149.09。直前 heading の底からの差（実測） */
  margin-top: 107.5px;
}

#section4 .section4__text--1 strong {
  font-weight: var(--fw-bold);
}

/* check-attrs は複数<p>をまとめて1テキスト単位とし、コンテナ自身のcomputed
 * font-weightを先頭行(node 250:57内の1行目=Bold)の期待値と比較する。
 * そのため既定をBoldにし、後半2行だけRegularへ上書きする（描画結果は同じ） */
#section4 .section4__text--2 {
  /* 直前 .section4__text--1 の底からの差 40px（実測） */
  margin-top: 40px;
  font-weight: var(--fw-bold);
}

/* 後半2行(node 250:57 内)だけ Regular */
#section4 .section4__text--2 p:nth-child(n + 3) {
  font-weight: var(--fw-regular);
}

/* CTAカード（node 250:58 / 1000x約127）。
 * design: top 620px。直前 .section4__text--2 の底からの差 102.5px（実測） */
#section4 .section4__cta {
  position: relative;
  z-index: var(--z-body);
  margin-top: 102.5px;
  margin-inline: auto;
  width: min(1000px, 100% - var(--gutter) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 60px;
  background: var(--bg-page);
}

#section4 .section4__cta-text {
  width: 533px;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 32.4px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

/* 共通部品 .scp1--lg(components.css) は fs-20/letter-spacing無指定がデフォルトだが、
 * このインスタンス(node 250:60/250:61)の実測は18px・letter-spacing 1px。
 * header .scp1 と同じ理由でセクション側から上書きする（部品自体は変更しない） */
#section4 .section4__cta-btn {
  font-size: var(--fs-body);
  letter-spacing: 1px;
}

/* 写真（node 350:5 "top_image007"）。Figma実測は630x370（書き出しファイルは945x555で
 * 1.5倍・retina用の高解像度書き出し）。表示サイズはFigma実測に合わせ、ファイルは縮小して使う
 * （実測 2026-08-25: get_screenshotのoriginal_widthで確認、参照画像crop突合せ済み）。
 * 実座標絶対配置なので中央基準トリミングを適用 */
#section4 .section4__photo {
  left: 930px;
  top: 215px;
  width: 630px;
  height: 370px;
  margin-left: calc((100% - var(--w-page)) / 2);
}

/* =========================================================
 * S11-section7（node 250:87 / 1920x850）
 * SECTIONS.md「ページ横断レイヤー」の対象セクション。
 * 中身の実範囲は1096pxまで伸びる（top_bg003が下+72、note(250:100)が下+59）。
 * note だけが通常フローで、それ以外(heading/lead/cards)は絶対配置。
 * S10-section6(y=5826,h=597→底6423) → section7(y=6532) の設計上の隙間 = 109px
 * ========================================================= */
#section7 {
  position: relative;
  margin-top: 109px;
  background: var(--bg-page);
}

/* top_bg003（node 293:33 / 1920x912）。書き出し済み画像をそのまま使う
 * （マスク+グラデーションは書き出し画像に焼き込み済み。実測でファイル寸法が一致）。
 * left:0 の実座標絶対配置なので中央基準トリミングを適用 */
#section7 .section7__bg {
  position: absolute;
  left: 0;
  top: 9.44px;
  width: 1920px;
  height: 912px;
  margin-left: calc((100% - 1920px) / 2);
  z-index: var(--z-deco);
  pointer-events: none;
}

#section7 .section7__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 前景まとめ。z-index で背景装飾より確実に上に出す（SECTIONS.md 処理方針4）。
 * 器で組む（service-site方式）: heading/lead/cards を絶対配置から通常フローに移したので
 * padding-top(779.44px) は不要になった。flow-root は先頭子の margin-top を
 * 外へ漏らさないため（相殺すると #section7 ごと下がる） */
#section7 .section7__body {
  position: relative;
  z-index: var(--z-body);
  display: flow-root;
}

/* 見出し（node 250:88）。design は中心+0.5px の自己センタリング
 * → 実座標 x=517 top=6665.63（実測）。0.5px ずれているので margin-left 基準で置く */
#section7 .section7__heading {
  margin: 0;
  margin-top: 134.04px;
  margin-left: max(var(--gutter), calc(50% - 443px)); /* = x:517 */
  width: min(887px, 100% - var(--gutter) * 2);
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: 55.8px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

/* リード文（node 250:89）。直前 heading の底からの差 27.04px（実測） */
#section7 .section7__lead {
  margin: 0;
  margin-top: 27.04px;
  margin-left: max(var(--gutter), calc(50% - 332px)); /* = x:628 */
  width: min(665px, 100% - var(--gutter) * 2);
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-17);
  line-height: 34.85px;
  color: var(--c-ink-2);
  letter-spacing: 0.16px;
}

/* カード列（node 293:40 / 293:41 / 293:45）。380x379 が3枚、gap30 で --w-wide 1200px にちょうど収まる。
 * .is-in で中央基準トリミングに乗せ、left:0/right:0 で絶対配置の中央寄せにする */
#section7 .section7__cards {
  /* 直前 .section7__lead の底からの差 67.72px（実測）。幅と中央寄せは .is-in が持つ */
  margin-top: 67.72px;
  display: flex;
  gap: 30px;
}

/* 380x379 のカードは section7 内に3回しか出現しない section固有の反復要素のため、
 * components.css には追加せず、ここに section 固有クラスとして定義する。 */
#section7 .section7__card {
  position: relative;
  width: 380px;
  height: 379px;
  flex: none;
  background: var(--bg-page);
  box-shadow: var(--shadow-card-lg);
}

#section7 .section7__card-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  height: 182px;
  background: var(--bg-tint);
}

#section7 .section7__card-icon {
  position: absolute;
  display: block;
  width: 130px;
  height: 100px;
}

/* カードごとにアイコンの実測位置が異なる（top_image009/010/011） */
#section7 .section7__card:nth-child(1) .section7__card-icon {
  left: 121px;
  top: 43px;
}

#section7 .section7__card:nth-child(2) .section7__card-icon {
  left: 50%;
  top: 45px;
  transform: translateX(-50%);
}

#section7 .section7__card:nth-child(3) .section7__card-icon {
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
}

#section7 .section7__card-num {
  position: absolute;
  left: 50%;
  top: 168px;
  transform: translateX(-50%);
  width: 262px;
  height: 27px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-30);
  line-height: 32.3px;
  color: var(--c-brand-dark);
  letter-spacing: 0.16px;
  text-align: center;
}

#section7 .section7__card-title {
  position: absolute;
  left: 59px;
  top: 219px;
  width: 262px;
  height: 27px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: 32.3px;
  color: var(--c-brand-dark);
  letter-spacing: 0.16px;
  text-align: center;
  white-space: nowrap; /* Figmaは1行。幅262pxは字送り込みでほぼ限界幅のため折り返し禁止 */
}

#section7 .section7__card-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 262px;
  bottom: 35px;
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: 1.75;
  color: var(--c-ink-2);
  letter-spacing: 1px;
  text-align: center;
}

/* まとめ文（node 250:100）。SECTIONS.md処理方針5: これは装飾ではなくテキストのはみ出しなので
 * 通常フローに置き、section の高さはこの中身で決まる（下+59の根拠）。
 * inset実測(left534/right608)は非対称でテキスト自動幅の副産物のため、中央基準の均等幅で近似する。 */
#section7 .section7__note {
  margin: 0 auto;
  /* 直前 .section7__cards の底からの差 81px（実測） */
  margin-top: 81px;
  max-width: 778px;
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-22);
  line-height: 44px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

/* =========================================================
 * S07-section3（node 250:48 / 1920x847）
 * SECTIONS.md「ページ横断レイヤー」の対象セクション。中身の実範囲は1920x1231/右2449。
 * 処理方針5: 250:53(まとめ文)とchevrons-downはフレーム高が中身に追従していないだけで
 * 装飾ではないため通常フローに置き、section の高さはこの中身(note+arrow)で決まる。
 * section2(y=1875,h=1094→底2969) → section3(y=2626) の設計上の隙間 = -343px
 * （Figma上で前セクションの余白部分と重なる。section2のカードは底2542.44までなので実害なし）
 * ========================================================= */
#section3 {
  position: relative;
  margin-top: -343px;
  display: flow-root; /* 子のマイナスmarginが親と相殺されない（マージン相殺の回避）ようにする。#lead と同じ対処 */
}

/* 装飾。z-deco で本文より下に敷く。実座標絶対配置なので中央基準トリミングを適用 */
#section3 .section3__deco {
  position: absolute;
  z-index: var(--z-deco);
  pointer-events: none;
  margin-left: calc((100% - var(--w-page)) / 2);
}

/* グラデーション矩形（node 278:74 / 960x480）。--g-cta と同一値 */
#section3 .section3__deco--gradient {
  left: 960px;
  top: 0;
  width: 960px;
  height: 480px;
  background: var(--g-cta);
}

/* 写真（node 281:81 "top_image005"）。Figma実測は640x360（書き出しファイルは
 * 960x540で1.5倍・retina用の高解像度書き出し）。表示サイズはFigma実測に合わせ、
 * ファイルは縮小して使う（実測 2026-08-25: get_screenshotのoriginal_widthで確認）。
 * 縮小・クリップせず、右・下へのはみ出しを許容する */
#section3 .section3__deco--photo1 {
  left: 874px;
  top: 60px;
  width: 640px;
  height: 360px;
}

/* 写真（node 350:4 "top_image006" / 実座標621x424）。書き出し画像932x636は
 * photo1 と同じ1.5倍・retina用の高解像度書き出し（932/621=636/424=1.5）。
 * 枠に合わせて縮小して全体を見せる（クリップすると右下のカード写真が切れる） */
#section3 .section3__deco--photo2 {
  left: 360px;
  top: 553px;
  width: 621px;
  height: 424px;
  overflow: hidden;
}

#section3 .section3__deco--photo2 img {
  display: block;
  width: 621px;
  height: 424px;
  max-width: none;
}

/* 本文まとめ。z-body で装飾より上に出す。
 * 器で組む（service-site方式）: 子(見出し/本文)を通常フローに移したので
 * 中央基準トリミングの margin-left 補正は外した（各子の margin-left: max() が担う）。
 * flow-root は先頭子の margin-top を外へ漏らさないため */
#section3 .section3__body {
  position: relative;
  z-index: var(--z-body);
  display: flow-root;
}

/* 見出し（node 250:49 / 1242x97）。
 * design: top 129.5px + translateY(-50%) → 実上端 78.3px（実測） */
#section3 .section3__heading {
  margin: 0;
  margin-top: 78.3px;
  margin-left: max(var(--gutter), calc(50% - 600px)); /* = x:360 */
  width: min(1242px, 100% - var(--gutter) * 2);
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: 51.2px;
  color: var(--c-brand-dark);
  letter-spacing: 0.16px;
}

#section3 .section3__heading p {
  margin: 0;
}

/* 本文1（node 250:50 / 466x196）。直前 heading の底からの差 29.3px（実測） */
#section3 .section3__text--1 {
  margin-top: 29.3px;
  margin-left: max(var(--gutter), calc(50% - 600px)); /* = x:360 */
  width: min(466px, 100% - var(--gutter) * 2);
}

/* 本文2（node 250:51 / 467x161）。右カラム(x:1050)。直前 text--1 の底からの差 225px（実測）。
 * 右カラムは狭い帯で右端からはみ出すので、min() で「右端 - gutter」に頭打ちする
 * （1920px では min() が実座標側 50%+90px を返すので幾何は不変） */
#section3 .section3__text--2 {
  margin-top: 225px;
  margin-left: max(var(--gutter), min(calc(50% + 90px), calc(100% - var(--gutter) - 467px))); /* = x:1050 */
  width: min(467px, 100% - var(--gutter) * 2);
}

/* 本文3（node 250:52 / 466x124、縦中央揃え）。
 * design: top 826px + translateY(-50%) → 直前 text--2 の底からの差 27px（実測） */
#section3 .section3__text--3 {
  margin-top: 27px;
  margin-left: max(var(--gutter), min(calc(50% + 90px), calc(100% - var(--gutter) - 466px))); /* = x:1050 */
  width: min(466px, 100% - var(--gutter) * 2);
}

/* margin は個別ルール（上）で指定するのでここでは触らない
 * （このルールのほうが後にあるため、margin:0 を書くと個別の margin-top が消える） */
#section3 .section3__text--1,
#section3 .section3__text--2,
#section3 .section3__text--3 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--c-ink-2);
  letter-spacing: 1px;
}

#section3 .section3__text--1 p,
#section3 .section3__text--2 p,
#section3 .section3__text--3 p {
  margin: 0;
}

/* まとめ文（node 250:53 / 768.43x70.59）。テキストのはみ出し(SECTIONS.md処理方針5)のため
 * 通常フローに置く。margin-top はデザイン上の中心top(1103.29)から算出した上端(≈1068px)。
 * font-size は先頭行(p:first-child)と同じ値をコンテナ自体にも指定する
 * （check-attrsは複数行の全文が一致する最も外側の要素で computed style を見るため。section1__title等と同じ扱い） */
#section3 .section3__note {
  /* .section3__body が高さを持つようになった（旧: 絶対配置の子だけで h=0）ので、
   * 1068px（セクション上端基準）→ 186px（body の底 = text--3 の底基準）に付け替えた（実測） */
  margin: 186px auto 0;
  max-width: 900px;
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-30);
  letter-spacing: 0.16px;
}

#section3 .section3__note p {
  margin: 0;
  line-height: 1.6;
}

#section3 .section3__note p:first-child {
  font-size: var(--fs-30);
  color: var(--c-ink);
}

#section3 .section3__note p:last-child {
  font-size: var(--fs-36);
  color: var(--c-brand);
}

/* 下向きシェブロン装飾（node 284:91 / 120x50）。image/arrow_down.svg
 * まとめ文と同じくフレーム高に追従していない中身なので通常フローに置く */
#section3 .section3__arrow {
  display: block;
  margin: 7px auto 0;
  width: 120px;
  height: 50px;
}

/* =========================================================
 * S09-section5（node 250:62 / 1920x1027）
 * 中身が全て絶対配置（通常フローの要素なし）のため height を明示する。
 * 装飾(pixta_107605320_M 1 / 289:25)は生ボックス1603x1069にmask-position(22,157)+
 * mask-size(1560x550)を適用した最終可視範囲。書き出し済み image/top_bg002.jpg(1560x550)は
 * その可視範囲と実寸一致するので、そのまま絶対配置で使う。
 * SECTIONS.mdの「中身の実範囲…下+612右+381」はマスク前の生ボックスの数値で、
 * マスク後の可視範囲はsection内(top363.52〜913.52)に収まるため、height超過の手当ては不要。
 * S08-section4(y=3895,h=838→底4733) → section5(y=4736) の設計上の隙間 = 3px
 * ========================================================= */
/* 器で組む（service-site方式）。本文4ブロックを通常フローに置く。
 * flow-root は先頭子の margin-top を外へ漏らさないため。
 * 1920px では min()/max() が実座標側を返すので幾何は動かない */
#section5 {
  position: relative;
  display: flow-root;
  margin-top: 3px;
  min-height: 1027px;
}

/* 見出し（node 250:63 / 640x54）。
 * design: top 130.52px + translateY(-50%) → 実上端 103.52px（実測） */
#section5 .section5__heading {
  position: relative;
  z-index: var(--z-body);
  margin: 0;
  margin-top: 103.52px;
  margin-left: max(var(--gutter), calc(50% - 598px)); /* = x:362 */
  width: min(640px, 100% - var(--gutter) * 2);
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: 54px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

#section5 .section5__heading p {
  margin: 0;
}

/* リード文（node 250:64 / 755x139） */
/* font-weight はコンテナ自体に先頭行(bold)の値を指定する
 * （check-attrsは複数<p>の全文が一致する最も外側の要素で computed style を見るため。
 * #section1__title 等と同じ扱い）。2〜4行目は個別に regular へ戻す。 */
#section5 .section5__lead {
  position: relative;
  z-index: var(--z-body);
  margin: 0;
  /* 直前 heading の底からの差 38.5px（実測） */
  margin-top: 38.5px;
  margin-left: max(var(--gutter), calc(50% - 598px)); /* = x:362 */
  width: min(755px, 100% - var(--gutter) * 2);
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--c-ink-2);
  letter-spacing: 2px;
}

#section5 .section5__lead p {
  margin: 0;
  line-height: 1.75;
}

#section5 .section5__lead p:not(:first-child) {
  font-weight: var(--fw-regular);
}

/* 装飾（node 289:25 "pixta_107605320_M 1"）。実座標絶対配置なので中央基準トリミングを適用。
 * design context の blur-[10px] を反映する（書き出し画像自体はマスク切り出しのみでぼかし無し） */
#section5 .section5__deco {
  position: absolute;
  left: 360px;
  top: 363.52px;
  width: 1560px;
  max-width: none;
  height: 550px;
  margin-left: calc((100% - var(--w-page)) / 2);
  filter: blur(10px);
  z-index: var(--z-deco);
  pointer-events: none;
}

/* カード列（node 289:19 / 1080x373）。2x2グリッド、gap30。
 * .check-card(components.css, 525x172 が4回=このセクション由来)を使用。
 * 装飾(deco)と領域が重なるため z-body で上に出す。 */
#section5 .section5__cards {
  position: relative;
  /* 直前 .section5__lead の底からの差 130.5px（実測）。x=420 は (1920-1080)/2 = 真中央 */
  margin-top: 130.5px;
  margin-inline: auto;
  width: min(1080px, 100% - var(--gutter) * 2);
  height: 373px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
  z-index: var(--z-body);
}

/* .check-card の中身(check/title/body)はFigma実測どおり絶対配置のため position:relative を追加する */
#section5 .check-card {
  position: relative;
}

#section5 .section5__card-check {
  position: absolute;
  left: 29px;
}

#section5 .check-card:nth-child(1) .section5__card-check {
  top: 41px;
}

#section5 .check-card:nth-child(2) .section5__card-check {
  top: 39px;
}

#section5 .check-card:nth-child(3) .section5__card-check {
  top: 38px;
}

#section5 .check-card:nth-child(4) .section5__card-check {
  top: 39px;
}

#section5 .section5__card-title {
  position: absolute;
  left: 57.19px;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-19);
  line-height: 30.4px;
  color: var(--c-ink);
  letter-spacing: 1px;
}

#section5 .check-card:nth-child(1) .section5__card-title {
  top: 51.5px;
  transform: translateY(-50%);
  width: 264.78px;
}

#section5 .check-card:nth-child(2) .section5__card-title {
  left: 57px;
  top: 33px;
  width: 434px;
}

#section5 .check-card:nth-child(3) .section5__card-title {
  top: 48.39px;
  transform: translateY(-50%);
  width: 264.78px;
}

#section5 .check-card:nth-child(4) .section5__card-title {
  top: 48.39px;
  transform: translateY(-50%);
  width: 245.6px;
}

#section5 .section5__card-body {
  position: absolute;
  left: 30px;
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--c-ink-2);
  letter-spacing: 1px;
}

#section5 .section5__card-body p {
  margin: 0;
}

/* **white-space: nowrap を付けてはいけない。**
 * Figma側の <p> が1個なので改行位置チェックが「1行のはず」と誤検出するが、
 * テキストの必要幅は width(463.89px) を大きく超えるため、実際は2行に折り返すのが正。
 * nowrap を付けると1行に固定されてカード(525px)の右端を突き抜けていた
 * （参照PNG実測 2026-08-25: 参照は「…初期費 / 用と保守費、…」の2行）。
 * 誤検出側は tools/lib/line-wrap.js の wrapsNaturallyByWidth で対策済み。 */
#section5 .check-card:nth-child(1) .section5__card-body {
  top: 83px;
  width: 463.89px;
}

#section5 .check-card:nth-child(2) .section5__card-body {
  top: 83px;
  width: 462.93px;
}

#section5 .check-card:nth-child(3) .section5__card-body {
  top: 110.78px;
  transform: translateY(-50%);
  width: 462.93px;
}

/* nth-child(1) と同じ理由で nowrap を外す（実測 2026-08-25） */
#section5 .check-card:nth-child(4) .section5__card-body {
  top: 83.19px;
  transform: translateY(-50%);
  width: 462.76px;
}

/* まとめ文（node 250:81 / 1046x59） */
#section5 .section5__note {
  position: relative;
  z-index: var(--z-body);
  margin: 0;
  /* design: top 961.02px + translateY(-50%)。直前 cards の底からの差 118.5px（実測） */
  margin-top: 118.5px;
  margin-left: max(var(--gutter), calc(50% - 598px)); /* = x:362 */
  width: min(1046px, 100% - var(--gutter) * 2);
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 34px;
  color: var(--c-ink);
  letter-spacing: 1px;
}

/* =========================================================
 * S10-section6（node 250:82 / 1920x597）
 * 反転背景（node 289:26 / 1200x480, #101c33）の上に白文字を載せる。
 * 装飾(pixta_136545663_M 1 / 293:28)はマスク後の実寸(470x470)が書き出し済み
 * image/top_image008.png と一致するため、そのまま絶対配置で使う。
 * 実座標: 293:28 の left(1009.34)+mask-position-x(130.66)=1140、
 * top(120.3)+mask-position-y(4.7)=125（= wrapper 293:30 の left/top と一致。
 * マスク後の最終可視位置として妥当）。
 * SECTIONS.md の実測「右+987 下+123」は再帰合算の重複計上によるもので、
 * 実際はセクション内（右端1610 / 下端595）に収まるため height の手当ては不要。
 * S09-section5(y=4736,h=1027→底5763) → section6(y=5826) の設計上の隙間 = 63px
 * ========================================================= */
/* 器で組む（service-site方式）。見出し/本文2ブロックを通常フローに置く。
 * flow-root は先頭子の（負の）margin-top を外へ漏らさないため */
#section6 {
  position: relative;
  display: flow-root;
  margin-top: 63px;
  min-height: 597px;
}

/* 反転背景（node 289:26 / 1200x480）。実座標絶対配置なので中央基準トリミングを適用 */
#section6 .section6__bg {
  position: absolute;
  left: 360px;
  top: 65px;
  width: 1200px;
  height: 480px;
  margin-left: calc((100% - var(--w-page)) / 2);
  background: var(--bg-deep);
  z-index: var(--z-deco);
}

/* 見出し（node 250:83 / 652x128）。design context 実測で先頭行(p:first-child)だけ
 * 色が反転背景と同じ --c-ink-deep になっている（Figma側のデータをそのまま反映）。
 * 2行目は無指定で親の text-white を継承するため --c-on-dark になる。
 * コンテナ自体の color は先頭行の値に合わせる
 * （tools/check-attrs.js は複数<p>をまとめた「テキスト単位」の代表値として
 * 先頭行の attrs を使い、実際に computed style を読むのは全文を含む最も外側の
 * 要素＝このコンテナ自身のため。#section1__title 等と同じ扱い） */
#section6 .section6__heading {
  position: relative;
  margin: 0;
  /* design: top 66px + translateY(-50%) → 実上端はセクション上端の 10.8px 上（実測）。
   * セクションの上へはみ出すぶんは負の margin-top で置く */
  margin-top: -10.8px;
  margin-left: max(var(--gutter), calc(50% - 540px)); /* = x:420 */
  width: min(652px, 100% - var(--gutter) * 2);
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  color: var(--c-ink-deep);
  letter-spacing: 0.16px;
  z-index: var(--z-body);
}

#section6 .section6__heading p {
  margin: 0;
  line-height: 1.6;
}

#section6 .section6__heading p:last-child {
  color: var(--c-on-dark);
}

/* 本文1（node 250:84 / 642x180）。直前 heading の底からの差 45.2px（実測） */
#section6 .section6__text--1 {
  margin-top: 45.2px;
}

/* 本文2（node 250:86 / 642x60、縦中央揃え）。
 * design: top 425px + translateY(-50%) → 直前 text--1 の底からの差 27px（実測） */
#section6 .section6__text--2 {
  margin-top: 27px;
}

/* line-height はコンテナ自体にも指定する（子<p>だけだと check-attrs が
 * コンテナの computed style を読んだときに line-height:normal を拾って
 * 改行位置チェックの偽陽性対策(wrapsNaturally)がNaN扱いで壊れるため） */
/* margin-top は個別ルール（上）で指定。ここに margin:0 を書くと後勝ちで消える */
#section6 .section6__text--1,
#section6 .section6__text--2 {
  position: relative;
  margin-left: max(var(--gutter), calc(50% - 539px)); /* = x:421 */
  width: min(642px, 100% - var(--gutter) * 2);
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: 2;
  color: var(--c-on-dark);
  letter-spacing: 1px;
  z-index: var(--z-body);
}

#section6 .section6__text--1 p,
#section6 .section6__text--2 p {
  margin: 0;
  line-height: 2;
}

/* 装飾（node 293:28 "pixta_136545663_M 1"）。実座標絶対配置なので中央基準トリミングを適用 */
#section6 .section6__deco {
  position: absolute;
  left: 1140px;
  top: 125px;
  width: 470px;
  height: 470px;
  margin-left: calc((100% - var(--w-page)) / 2);
  z-index: var(--z-body);
  pointer-events: none;
}

/* =========================================================
 * S12-flow（node 250:101 / 1920x922）「ご相談の流れ」
 * SECTIONS.md に横断はみ出しの記載なし。宣言どおり height:922 で足りる。
 * カード3枚(250:103 / 293:51 / 293:57)は左360・右360のページ座標絶対配置で
 * 1920幅ちょうど中央対称（= --w-wide 1200px）なので、中央基準トリミングは
 * left:50%+translateX(-50%) で自然に満たされる（margin-left calc の手当ては不要）。
 * S11-section7(y=6532,h=850→底7382) → flow(y=7541) の設計上の隙間 = 159px。
 * ただし#section7の実測高さは公称850pxではなく911px前後（積み上げ実測でズレ+61.44px検出）。
 * #section7側は担当外のため書き換えず、#lead(197px食い込みの例)と同じ手法で
 * こちら側のmargin-topを整数px補正する。159-61=98px。 */
/* 器で組む（service-site方式）。見出し/カード3枚/まとめ文を通常フローに置く */
#flow {
  position: relative;
  display: flow-root;
  margin-top: 98px;
  min-height: 922px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--c-border);
}

/* 見出し（node 250:102） */
/* 見出し（node 250:102 / x=835 y=101 251x51）。
 * **text-align は left。** Figma側は auto-width のテキストで、width=251 は文字送りの
 * 実幅そのもの。center にすると Chrome の実描画幅(約240px)との差分だけ右へ寄り、
 * 参照PNGに対しインクが4px右にずれる（実測 2026-08-25: ref 842..1075 / 実装 846..1079、
 * インク幅は234pxで一致）。 */
#flow .flow__heading {
  /* design: top 125.5px + translate(-50%,-50%) → 実上端 101px（実測）。
   * border-top:1px のぶんフローの起点が1px下がるので 1px 引く（#section4 と同じ） */
  margin: 0;
  margin-top: 100px;
  margin-inline: auto;
  width: min(251px, 100% - var(--gutter) * 2);
  text-align: left;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: 51px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

/* カード（node 250:103 / 293:51 / 293:57）。padding40 の白箱。高さは中身に追従させる */
#flow .flow__card {
  margin: 0;
  margin-inline: auto;
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  padding: 40px;
  background: var(--bg-page);
  border: 1px solid var(--c-border);
}

/* design top: 207 / 387 / 567px。フロー化後は直前要素の底からの差（実測） */
#flow .flow__card:nth-of-type(1) { margin-top: 56px; }
#flow .flow__card:nth-of-type(2) { margin-top: 18px; }
#flow .flow__card:nth-of-type(3) { margin-top: 14px; }

/* STEPラベル（node 250:104 ほか）。h-[16px] justify-center を flex で再現 */
#flow .flow-step__num {
  height: 16px;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-11);
  line-height: 20.9px;
  color: var(--c-brand-dark);
  letter-spacing: 2.2px;
}

/* タイトル（node 250:105 / 293:55 / 293:61）。h-[64px] justify-center を flex で再現。
 * <p>単独（STEP1/3・1行）と<div>2行split（STEP2）の両方をこの1クラスで受ける */
#flow .flow-step__title {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  width: 100%;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  letter-spacing: 0.16px;
  font-size: var(--fs-22);
  line-height: 33.6px;
}

/* STEP2タイトル（node 293:55）は「相談」22px＋「（その場で現状を整理）」16pxの2行。
 * leading は Figma実測どおり相対値(1.6)を使う（STEP1/3の絶対値33.6pxとは別値） */
#flow .flow-step__title--split p {
  margin: 0;
  line-height: 1.6;
}

#flow .flow-step__title--split p:first-child {
  font-size: var(--fs-22);
}

#flow .flow-step__title--split p:last-child {
  font-size: var(--fs-16);
}

/* 本文（node 250:106 / 293:56 / 293:62）。共通部分のみここに置き、
 * 幅・letter-spacing・line-height はカードごとの実測値でカード単位に上書きする */
#flow .flow-step__body {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  color: var(--c-ink-2);
}

#flow .flow-step__body p {
  margin: 0;
}

/* STEP1本文（node 250:106 / 729x56）。段落2つで明示改行、tracking1px + leading1.75(相対) */
#flow .flow__card:nth-of-type(1) .flow-step__body {
  width: 729px;
  letter-spacing: 1px;
  line-height: 1.75;
}

/* STEP2本文（node 293:56 / 792px、高さ指定なし＝自然折り返し）。tracking1px + leading1.75(相対)
 * check-attrsが「Figma 1行/実装3行」と誤検出するが、これはPROGRESS.md「オーナー判断待ち」項目5と
 * 同じtools/lib/line-wrap.jsの偽陽性（親要素にh-[]クラスが無いauto-heightだと判定不能→false扱い）。
 * 自然折り返しの実装が正しいため変更しない */
#flow .flow__card:nth-of-type(2) .flow-step__body {
  width: 792px;
  letter-spacing: 1px;
  line-height: 1.75;
}

/* STEP3本文（node 293:62 / 766x56）。tracking0.16px + leading32px(絶対) ← 他2件と異なる実測値 */
#flow .flow__card:nth-of-type(3) .flow-step__body {
  width: 766px;
  letter-spacing: 0.16px;
  line-height: 32px;
}

/* まとめ文（node 250:115） */
/* まとめ文（node 250:115 / x=635 y=777 713x33）。
 * **ページ中央(left:50%)ではない。** metadata の実座標は x=635 で、箱の中心は 991.5 と
 * ページ中央 960 から 31.5px 右にずれている。`left:50%` だと参照PNGに対し
 * 文字列の中心が 29px ずれていた（実測 2026-08-25）。
 * Figma側は auto-width のテキスト（width=713 は文字列の実幅）なので左揃えで置く。
 * 実座標絶対配置になるため中央基準トリミングの補正を入れる。 */
#flow .flow__note {
  margin: 0;
  /* design: top 793.5px + translateY(-50%) → 直前カード3の底からの差 48.35px（実測）。
   * 箱の中心はページ中央より 31.5px 右なので、狭い帯では右端 - gutter に頭打ちする */
  margin-top: 48.35px;
  margin-left: max(var(--gutter), min(calc(50% - 325px), calc(100% - var(--gutter) - 713px))); /* = x:635 */
  width: min(713px, 100% - var(--gutter) * 2);
  text-align: left;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-22);
  line-height: 32.3px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

/* =========================================================
 * S13-faq（node 250:116 / 1920x1288）。「よくあるご質問」。
 * div(1196x140) x7 の反復は components.css の .faq-item を使う。
 * 見出し・箱ともFigma上は絶対配置+translateで中央寄せ相当のため、
 * 通常フロー+text-align/centerで再現する（.is-inは section7__cards / section2__cards と同型）。
 *
 * 2026-08-24: S12-flow実装(実測終端8463.03)に伴い margin-top を 1048px → 29px に
 * 再計算した（8492 - 8463.03 = 28.97）。旧値はS12未実装前提の暫定補正だった。
 */
#faq {
  position: relative;
  margin-top: 29px;
  padding: 100px 0;
  background: var(--bg-page);
}

/* 見出し（node 250:117 / x=813 y=100 295x51）。
 * flow__heading と同じ理由で **実座標に置いて左揃え**にする。
 * 全幅+text-align:center だと参照PNGに対しインクが6px右にずれていた
 * （実測 2026-08-25: ref 820..1091 / 実装 826..1098、インク幅は272pxで一致）。
 * 50% - 147px = 813px。 */
#faq .faq__heading {
  /* 器で組む（service-site方式）: 1920px では max() が実座標側(50%-147px)を返す */
  width: min(295px, 100% - var(--gutter) * 2);
  margin: 0 0 48px;
  margin-left: max(var(--gutter), calc(50% - 147px));
  text-align: left;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: 51px;
  color: var(--c-ink);
  letter-spacing: 0.16px;
}

/* 箱（node 250:118）。border-top/bottomはbg-faqと同色で、各faq-itemの白背景に隠れ
 * 最初と最後にだけ区切り線として見える */
/* **汎用の .is-in（1200px中央 = x360）ではない。**
 * metadata の node 250:118 は x=364 / width=1196 で、ページ中央(x=362)より2px右にある。
 * .is-in のままだと箱が4px左・4px広くなり、中のQ&A全行が4pxずれる
 * （タイル走査で FAQ 全38タイルが dx=-4 と出た。実測 2026-08-25）。
 * 50% - 596px = 364px（中央 50%-598px に対し +2px）。 */
#faq .faq__list {
  /* 器で組む（service-site方式）: 1244px 以上では min()/max() が実座標側を返す */
  width: min(1196px, 100% - var(--gutter) * 2);
  margin-left: max(var(--gutter), calc(50% - 596px));
  margin-right: 0;
  border-block: 1px solid var(--bg-faq);
  background: var(--bg-faq);
}

#faq .faq__q {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  width: 100%;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16px;
}

/* Figma実測: 7件中6件（293:66/71/76/81/86/91）はQ.のline-heightが18px。
 * 1件目（250:120）だけ30.6pxだが、これはFigma側の反復ズレで、
 * check-attrsは同一テキスト「Q.」を常に最初のDOM要素で照合するため
 * 全件を同じ値にできない。多数側の18pxに合わせ、250:120はATTRS-EXCEPTIONSに記録する。 */
#faq .faq__q-label {
  font-family: var(--ff-serif);
  color: var(--c-link-faq);
  line-height: 18px;
}

#faq .faq__q-text {
  font-family: var(--ff-sans);
  color: var(--c-ink);
  line-height: 30.6px;
}

#faq .faq__a {
  height: 50px;
  display: flex;
  align-items: center;
  margin: 0;
  width: 100%;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: 32px;
  color: var(--c-ink-2);
  letter-spacing: 0.16px;
}

/* =========================================================
 * S14-form（node 250:154 / 1920x1250）「無料相談フォーム」
 * 紺色の器と見出し・本文・注記だけを実装する。
 * **白い箱(node 250:158 / 800x721)の中身は HubSpot が描画する**ので作らない
 * （オーナー判断。PROGRESS.md「オーナー判断待ち」#3）。枠だけ実寸で確保してある。
 * 見出し(250:155)・本文(250:156)・注記(250:157)はいずれも Figma 上で
 * left/right 対称＝1200px(または362.5px)の箱をページ中央に置いた中央揃えなので、
 * lead/cta1 と違って中央寄せで正しい。
 * S13-faq(y=8492,h=1288→底9780) → form(y=9780) の設計上の隙間 = 0px
 * ========================================================= */
/* **高さは Figma の 1250px 固定にできない。**
 * HubSpot の実フォームはモック(4項目)と中身が違い、11項目・実測1184pxある。
 * 白い箱(Figma 721px)に収まらないので、箱と器を中身に追従させる。
 * 下の 126px は Figma の「箱の底(1124) → セクション底(1250)」の余白をそのまま残したもの。
 * flow-root は .form__embed の margin-top(403px) が #form の外へ抜けない（マージン相殺の
 * 回避）ようにするため。#lead / #section3 と同じ対処。 */
#form {
  position: relative;
  display: flow-root;
  min-height: 1250px;
  padding-bottom: 126px;
  background: var(--bg-form);
}

/* 見出し（node 250:155 / left:360 right:360 h=102 @top=116、上下中央寄せ） */
#form .form__heading {
  /* design: top 116px + translate(-50%,-50%) → 実上端 65px（実測）。器で組む（service-site方式） */
  margin-top: 65px;
  margin-inline: auto;
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-34);
  line-height: 40px;
  color: var(--c-on-dark);
  letter-spacing: 0.16px;
}

/* 本文（node 250:156 / left:360 right:360 h=130 @top=171） */
#form .form__lead {
  /* 直前 heading の底からの差 4px（実測） */
  margin-top: 4px;
  margin-inline: auto;
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  height: 130px;
  text-align: center;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  color: var(--c-border-2);
  letter-spacing: 0.16px;
}

#form .form__lead p {
  margin: 0;
  line-height: 32px;
}

/* 注記（node 250:157 / x=779 362.541x28.5 @top=334.94、上下中央寄せ）。
 * left は calc(50% - 181px) で、幅362.541pxの箱をページ中央に置いたのと同じ */
#form .form__note {
  margin: 0;
  /* design: top 334.94px + translateY(-50%) → 直前 lead の底からの差 19.69px（実測） */
  margin-top: 19.69px;
  margin-left: max(var(--gutter), calc(50% - 181px)); /* = x:779 */
  width: min(362.541px, 100% - var(--gutter) * 2);
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: 28.5px;
  color: var(--c-muted-2);
  letter-spacing: 0.16px;
}

/* =========================================================
 * HubSpotフォームの見た目合わせ（node 250:158 / 800x721 @top=403、ページ中央）
 *
 * **HubSpot は iframe で描画するので、フォーム内部（ラベル・input・ボタン）の
 * 見た目はこのCSSからは一切変えられない。** 枠線の色などを直すには
 * HubSpot 側のフォーム設定で行う必要がある（PROGRESS.md に申し送り済み）。
 * ここで面倒を見るのは「白い箱の位置・幅・余白」と、箱の上の見出しだけ。
 *
 * 高さは固定しない。min-height に Figma の 721px を残してあるので、
 * HubSpot が読み込めない環境でも箱は崩れない。
 * 左右パディングは入れない（HubSpot 側が約41pxの内側余白を持っており、
 * 二重に入れるとフォームが細くなるため）。 */
#form .form__embed {
  width: min(800px, 100% - var(--gutter) * 2);
  min-height: 721px;
  /* 見出し/本文/注記がフローに乗ったので、403px（セクション上端基準）→
   * 53.81px（注記の底基準）に付け替えた（実測） */
  margin: 53.81px auto 0;
  padding: 35px 0 32px;
  background: var(--bg-page);
}

/* 「無料相談フォーム」（node 250:159 / 13px, tracking 1.82px, x=32 @top=47.5）。
 * HubSpot 側は見出しを描画しない（実測でheadingは0件）ので、こちらで出す。 */
#form .form__embed-title {
  margin: 0 0 10px;
  padding-inline: 32px;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: 24.7px;
  letter-spacing: 1.82px;
  color: var(--c-muted);
}

/* =========================================================
 * S15-footer（node 250:177 / 1920x77）
 * 左テキスト(250:178)は content幅左端(x=360=--pad-x)、
 * 右テキスト(293:94)は content幅右端(x=1560)にちょうど揃う実測のため、
 * 絶対座標ではなく .is-in を使った space-between で組む
 *
 * margin-top: 2026-08-25 に S14-form(1250px)を実装したので、それまでの
 * 暫定補正 1250px は不要になった（S14 の実高さがそのまま隙間を埋める）。
 * S14(y=9780,h=1250→底11030) → footer(y=11030) の設計上の隙間 = 0px
 * ========================================================= */
footer {
  background: var(--bg-footer);
}

footer .footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 77px;
}

/* 2026-08-27 追加: フッターの「運営会社 / プライバシーポリシー」を下層ページへのリンクにした。
 * **既定の下線は消す。** 出すと S15-footer の参照描画（visual-diff）と変わってしまう。
 * ホバーでだけ下線を出し、色は継承（--c-muted）のままにする。 */
footer .footer__text a {
  color: inherit;
  text-decoration: none;
}

footer .footer__text a:hover {
  text-decoration: underline;
}

footer .footer__text {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  line-height: 22.8px;
  letter-spacing: 0.72px;
  color: var(--c-muted);
  white-space: nowrap;
}

/* =========================================================
 * S16-ctabar（node 250:184 / 1920x75）。footer直下の末尾ブロック。
 * stack-check は getBoundingClientRect+scrollY（＝ドキュメント座標）でFigma yと
 * 突き合わせる。position:fixed は viewport 相対座標になり、ページ高が
 * viewport高より大きい限り原理的に一致しない（前回実装で実測: 期待DOM y約10230
 * に対し固定表示は1005で固定＝ズレ約9225px）ため通常フローに戻した。
 * オーナー判断待ち: 「追従」の名の通りスクロール追従を求めるなら、この節の
 * static配置とは別に、stack-checkの対象からfixed要素を除外する仕組みが要る
 * （PROGRESS.md「オーナー判断待ち」参照）。
 * design context は top-1/2 + translate(-50%) の自己センタリングなので、
 * 中央基準トリミングの補正は不要（幅100%の内側で完結する）。
 * ========================================================= */
#cta-bar {
  position: relative;
  width: 100%;
  height: 75px;
  background: var(--bg-deep);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-ctabar);
}

/* 中心基準の絶対配置なので器化は不要（実座標を持たない）。狭い帯で左に切れないよう
 * left だけ --gutter で頭打ちにする。1920px では max() が実座標側(50%-301px)を返す */
#cta-bar .ctabar__lead {
  position: absolute;
  left: max(var(--gutter), calc(50% - 301px));
  top: 50%;
  transform: translateY(-50%);
  width: 279px;
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: 24.7px;
  letter-spacing: 0.16px;
  color: var(--c-on-dark);
}

#cta-bar .ctabar__cta {
  position: absolute;
  left: calc(50% + 132.7px);
  top: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.16px;
}