/* ===== SP版 — Figma `4:2`（750 x 26835） =====
 *
 * 【最重要】750px枠 = 375 CSS px の2倍設計。**Figma実値は全て ÷2 で書く。**
 *   根拠: sp_image1.jpg が 750x1360 でMVノードと同値 / section7のフォント実値 52・60・24・32px
 *
 * 禁則（PROGRESS-SP.md ②）:
 *   - 共通部品クラスを新規に作らない。既存の scp1〜scp7 を上書きする
 *   - components.css / sections.css を編集しない。上書きは全てこのファイル
 *   - 全ルールを @media で囲む（PC幅に漏らさない）
 *   - display:flex を書いたら align-items を必ず併記する
 *   - **a.scp6 / article.scp3(section3b) / .h2-mark は PC と寸法が完全一致。ここに書かない**
 */

/* SP専用の改行。**このファイルで唯一 @media の外に置くルール。**
   既定を「隠す」にしておかないとPC幅に漏れるため、外に置くのが正しい。
   Figmaの折り返しはブラウザの自動折り返しと1文字ずれるので <br> で固定する
   （PCの S05 で確定した既知の現象）。 */
.sp-br,
.sp-only,
.sp-nav-btn,
.sp-nav {
  display: none;
}

/* ハンバーガーの開閉状態。**@media の外に置く**（PC幅でも `header` の
   flex 子として数えられないよう、常に絶対配置で流れから外す）。
   `display: none` にしないのはキーボード操作を殺さないため
   （label のクリックだけでなく Tab + Space でも開けるようにする）。 */
.sp-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 767px) {
  .sp-br,
  .sp-only {
    display: inline;
  }

  /* PC専用の改行。SP幅では消す */
  .pc-br {
    display: none;
  }

  /* base.css は PC専用ページ前提で body に min-width:1920px を持っている。
     SP幅ではこれを解除する（base.css 自体は書き換えない）。 */
  /* SPは375px幅で横スクロールしないのが仕様。
     section2 の集約図のように**意図的に枠外へ出る要素**があるので、ここで止める。
     `body` だけだとビューポートへ伝播するだけで scrollWidth は縮まないので、
     `html` にも掛ける（実測: body のみだと 1168 のままだった）。 */
  html {
    overflow-x: clip;
  }

  body {
    min-width: 0;
    overflow-x: clip;
  }

  /* 装飾レイヤー。**SPの装飾は `223:73` の1枚だけ**（PCは5枚）。
     PCの5枚がそのままSP幅に漏れると section2 の左に帯が出るので、まず全部消してから
     1枚目だけを置き直す（`bg_img001.png` はPCと同じアセット）。

     座標は PC で確定した規則 `画像の左上 = (x + 0.5, y - 364)`（Figma実値）をそのまま使う。
     **`.deco` の基準は main なので、Figma の絶対y から main の y(121) を引いてから**当てる:

       left = (543.625 + 0.5) / 2                    = 272.0625
       top  = (2088.625 - 121 - 364) / 2             = 801.8125
       size = 465.5 x 631 の半分                      = 232.75 x 315.5

     **2026-08-07 の積み上げ検証（`npm run stack -- --sp`）で main の位置が確定したので置けた。**
     `margin-left` は 375px より広いビューポートでの中央寄せ分（`.deco` は main 幅いっぱいの
     絶対配置なので、セクションの padding が効かない。section2 の子と同じ手当て）。 */
  .deco img {
    display: none;
  }

  .deco img:nth-child(1) {
    display: block;
    top: 801.8125px;
    left: 272.0625px;
    width: 232.75px;
    height: 315.5px;
    margin-left: max(0px, calc((100% - 375px) / 2));
  }

  /* ===== SP01 / header  `4:576`（750x120 → 375x60） =====
   *
   * 構成は **ロゴ + a.scp1 + ハンバーガー の3点だけ。**
   * PCのナビ（`a.scp0` ×3）と電話ブロックは SP に存在しない（`a.scp0` は SP全体で0件）。
   *
   * Figma実座標（device / ÷2 で CSS）:
   *   accent-bar `4:577`  0..6            → 0..3
   *   div        `4:578`  y=9 / 750x111   → y=4.5 / 375x55.5
   *   ロゴ group `4:581`  x=17.237 y=23.784(`4:578`相対) 289.763x54.180
   *                       → x=8.619 / ヘッダー上端から y=16.392 / 144.882x27.090
   *   a.scp1     `229:80` x=452 y=30.5 196x65     → x=226 y=15.25 98x32.5
   *   ハンバーガー `229:75` x=673 y=39 48x48        → x=336.5 y=19.5 24x24
   *   下ボーダー  参照実測 y118..119（2device）      → 1px `--c-border`（PCと同じ）
   *
   * **ロゴの箱（54.18device）に `logo.svg` を縦いっぱいで入れてはいけない。**
   * 参照のインクは 288x51 device で、箱より 3.2device 低い。
   * `logo.svg`(191x34) を幅で等倍に合わせると 144.882 x 25.85 CSS = 289.76x51.7 device となり、
   * 参照のインク高 51 とほぼ一致する。**箱の高さではなく参照のインクに合わせる。**
   */
  /* **`z-index` が要る。** header は `backdrop-filter: blur(4px)` でスタッキング
     コンテキストを作るが z-index は auto（＝0相当）なので、`#mv`（relative / z-index 1）
     に丸ごと覆われる。ドロワーの `z-index: 20` は header の内側でしか効かないため、
     開いても MV の裏に隠れて見えなかった（実測）。header 自体を上げるのが正しい */
  header {
    position: relative;
    z-index: 30;
    height: 60px;
  }

  /* **`flex-shrink: 0` が必須。** header は column flex で、内容box は
     60 − border-bottom 1 = 59px しかないのに accent 3 + 余白 1.5 + 中身 55.5 = 60 ある。
     指定しないと両方が縮み、accent が 2.953 になって**中身が丸ごと 0.047px 上がる**
     （ロゴ・ボタン・ハンバーガーが揃って1device上にずれていた）。
     はみ出す1pxは中身が何も描かれない下端なので実害が無い */
  header > .accent-bar {
    flex-shrink: 0;
  }

  /* `4:578` は accent-bar(0..3) の下に 1.5px あけて始まる */
  header > .accent-bar + div {
    flex-shrink: 0;
    gap: 0;
    align-items: flex-start;
    width: 375px;
    height: 55.5px;
    margin-top: 1.5px;
    padding-right: 14.5px;
    padding-left: 8.619px;
  }

  /* ロゴ。**箱ではなく参照のインクに合わせる。**
     Figma の group `4:581` は 289.763x54.180device だが、参照のインクは 288x51 で、
     箱より 1.8device 細く 3.2device 低い（＝箱に余白がある）。
     `logo.svg`(191x34) は箱いっぱいにインクを持つので、箱に合わせると縦に 6% 伸びる。
     幅 145.132 / 高さ 25.85（＝ほぼ等倍の 190.54:34）で参照のインクに最も寄る。
     margin-top は Figma実値 11.892 ではなく **12.392**（+1device）。
     いずれも掃引で決めた（1215px → 99px） */
  header > .accent-bar + div > a img {
    width: 145.132px;
    height: 25.85px;
    margin-top: 12.392px;
  }

  /* ナビ（`a.scp0` ×3）と電話ブロックは SP に無い */
  header > .accent-bar + div > div:first-of-type {
    display: none;
  }

  header > .accent-bar + div > div:last-child {
    gap: 0;
    align-items: flex-start;
    /* ロゴとの間は可変。右端 = 375 - 14.5(padding) - 24(ハンバーガー) - 12.5(gap) */
    order: 1;
    margin-top: 10.75px;
    margin-left: auto;
  }

  header > .accent-bar + div > div:last-child > a:first-child {
    display: none;
  }

  /* `a.scp1` 196x65 → 98x32.5。PCは 124x39 なので別値。
     文字 `229:81` は 144x29 → **72x14.5**。72 = 6文字 x 12px ちょうどで、
     参照のインク実測（140x21 device）とも一致する（12pxで 139x22）。
     **`padding: 0` にしたら `justify-content: center` が要る。**
     PCの `.scp1` は `padding: 11px 20px` で中身を中央に見せているだけなので、
     padding を消すと `inline-flex` の既定（flex-start）で左端に寄る（実測でそうなった）。
     line-height はFigmaのテキスト高 14.5px。`align-items: center` と合わせて
     (32.5 − 14.5) / 2 = 9px = Figma の y=18device ÷2 に乗る */
  header .scp1 {
    justify-content: center;
    width: 98px;
    height: 32.5px;
    padding: 0;
    font-size: 12px;
    line-height: 14.5px;
  }

  /* ハンバーガー `229:75`（48x48 → 24x24）。3本線は **黒ベタ 40x4 device
     = 20x2 CSS**、間隔 8device = 4CSS（参照から直接測った。ピッチ 6px）。
     枠の内側の余白は左右2px / 上下5px。
     ASSET-EXCEPTIONS.md のとおり**書き出し不要でCSSで描く**と判断済み */
  .sp-nav-btn {
    position: relative;
    display: block;
    order: 2;
    width: 24px;
    height: 24px;
    margin-top: 15px;
    margin-left: 12.5px;
    cursor: pointer;
  }

  .sp-nav-btn > span,
  .sp-nav-btn > span::before,
  .sp-nav-btn > span::after {
    position: absolute;
    left: 2px;
    width: 20px;
    height: 2px;
    background: var(--c-sp-icon);
  }

  /* **`top`/`left` では奇数デバイスpxに置けない。`transform` で 0.5px 送る。**
     枠は Figma どおり x=336.5 / y=19.5（＝半CSS px）に置けているが、
     絶対配置の子は**整数CSS pxの格子にスナップされる**。
     `top: 11px`（30.5 CSS = 61device）でも `10.5px`（30.0 = 60device）でも
     参照の 61device には乗らず、1device 上か下にしか行かない（実測: 60 / 62）。
     `transform` はレイアウトを丸めないので 0.5px 単位で送れる（SP02 の知見と同じ）。
     この1行でハンバーガーの赤画素が **237px → 0px** になる */
  .sp-nav-btn > span {
    top: 10.5px;
    left: 1.5px;
    transform: translate(0.5px, 0.5px);
  }

  .sp-nav-btn > span::before,
  .sp-nav-btn > span::after {
    left: 0;
    content: "";
  }

  .sp-nav-btn > span::before {
    top: -6px;
  }

  .sp-nav-btn > span::after {
    top: 6px;
  }

  /* ドロワー本体。**Figmaに参照が無いので視覚差分の対象外**（2026-08-07 決定 D1）。
     文言・遷移先は footer の `a.scp7` 4件と同じものを使う。
     header は position:static なので、基準はビューポート（fixed）にする */
  .sp-nav {
    position: fixed;
    top: 60px;
    right: 0;
    left: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    background: var(--c-navy);
  }

  .sp-nav-toggle:checked ~ .sp-nav {
    display: flex;
  }

  /* **セレクタを `header nav.sp-nav a` にすること。** `.sp-nav a`(0,1,1) では
     `sections.css` の `header nav a:not(.scp0)`(0,1,3) に負け、
     **濃紺の文字が濃紺の背景に乗って何も見えなくなる**（実測）。
     `header nav.sp-nav a` は同じ (0,1,3) で、sp.css が後に読まれるので勝つ */
  header nav.sp-nav a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: var(--c-white);
    border-bottom: 1px solid var(--c-hairline-on-navy);
  }

  header nav.sp-nav a:last-child {
    border-bottom: 0;
  }

  /* ===== SP02 / MV  `4:4`（750x1360 → 375x680） ===== */
  /* 背景は sp_image1.jpg（750x1360 の2倍書き出し）を**ちょうど半分**で敷く。
     Figma上の画像は y=-1（CSS -0.5px）だが、下地の濃紺と同色帯なので left top で置く。 */
  #mv {
    height: 680px;
    padding-top: 20px;
    background: var(--c-navy-900) url("../images/sp_image1.jpg") left top / 375px 680px
      no-repeat;
  }

  /* 内側コンテナ。Figma左端48 → CSS 24。654 → 327 で左右対称になる */
  #mv > div {
    width: 327px;
    margin-inline: auto;
  }

  /* 見出し。Figma実値 74px/110px・64px/100px・tracking 0.88px を ÷2。
     フォントは Noto Sans JP Black(900)（PCと同じ）。
     MVでしか出ない1回限りの値なので生pxで書く（CONVENTIONS.md の例外）。 */
  #mv h1 {
    /* **0.5px の送りは transform で行う。** padding だと丸められて2px動く。
       Figmaの参照はノード原点=整数で焼かれるので、要素側を格子に乗せる */
    transform: translateY(-0.5px);
    padding-top: 2.89px;
    font-size: 37px;
    line-height: 55px;
    letter-spacing: 0.44px;
  }

  /* PCは1行目の「AI」だけ48pxだが、**SPは1行目が全て同サイズ**（Figma実値 74px） */
  #mv h1 span:first-of-type {
    font-size: inherit;
  }

  /* 2行目「見つけてもらえる」。文字グラデ（--g-accent）は components/sections 側の
     指定がそのまま効くので、ここではサイズと行間だけ上書きする */
  #mv h1 span:nth-of-type(2) {
    font-size: 37px;
    line-height: 55px;
  }

  /* 3行目「公式ホームページを。」だけ 64px/100px → 32px/50px。
     ブロック（sections.css の #mv h1 .l3）なので親のストラットに縛られない */
  #mv h1 .l3 {
    transform: translateY(-1px);
    font-size: 32px;
    line-height: 50px;
  }

  /* リード文。Figma 34px/68px・Noto Sans JP Regular(400) → 17px/34px。
     PCは 18px/34px・700 なのでウェイトも戻す。
     **間隔は padding ではなく margin で入れる。** Figmaの `p` ノード(654x204)は
     テキストだけの箱で、padding にすると差分の固定クロップと高さが合わなくなる。 */
  #mv p {
    padding-top: 0;
    margin-top: 24.5px;
    font-size: 17px;
    font-weight: 400;
    line-height: 34px;
  }

  /* ボタン行。Figma gap28 → 14（PCと同値）。
     **幅は 336px。** Figmaのフレームは654(=327)だが、中身は 320+28+324=672(=336) あり
     右に9pxはみ出す。参照画像も672で返るので、はみ出したままが正しい。 */
  #mv > div > div {
    width: 336px;
    gap: 14px;
    padding-top: 0;
    margin-top: 24px;
    align-items: flex-start;
  }

  /* Figma 320x108 / px32 py15 / radius8 / 32px → ÷2 */
  #mv .scp1 {
    justify-content: center;
    width: 160px;
    height: 54px;
    padding: 0 16px;
    font-size: 16px;
    /* normal(約23.2px)だと中身が0.5px下に出る。行間で送る（flexの中央寄せ基準） */
    line-height: 24px;
    white-space: nowrap;
    border-radius: 4px;
  }

  /* Figma 324x108 / px66 / radius16 / border2 / 32px → ÷2（borderは1px）。
     **nowrap は必須。** 内容幅は 162 − 33×2 = 96px で、16px×6文字＝96px と
     ちょうど同値のため、無いと「お問い合わせ」が2行に折り返す（実測で確認） */
  #mv .scp2 {
    justify-content: center;
    width: 162px;
    height: 54px;
    padding: 0 33px;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    border-radius: 8px;
  }

  /* ボタンの枠・背景・角丸は参照と完全一致（枠の赤画素は0）。
     ボタン自体は動かせないので、中の span だけを送る */
  #mv .scp1 span,
  #mv .scp2 span {
    transform: translateY(-0.5px);
  }

  /* ===== SP03 / section1  `4:48`（750x1198 → 375x599） ===== */
  /* 背景はPCと同じ2枚重ね（白の縦フェード ＋ --g-tint）。
     白の終端だけ 15% → 13.741%（Figma実値）に変える */
  #section1 {
    height: 599px;
    padding-top: 0;
    background:
      linear-gradient(180deg, var(--c-white) 13.741%, transparent 100%),
      var(--g-tint);
  }

  /* Figma `4:49` div.is-in: flex column / gap40 / pt120 / pb144 / px48 → ÷2 */
  #section1 .is-in {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 327px;
    padding-top: 60px;
    padding-bottom: 72px;
  }

  /* 見出しブロック。PCは左寄せだが**SPは中央寄せ**。
     gap 20.8 = テキスト上端132.8 − ロゴ高91.2 の ÷2 */
  #section1 h2 {
    gap: 20.8px;
    align-items: center;
    width: 261.6px;
    font-size: 14.4px;
    /* Figmaのテキスト高35 → 17.5。normal(約20.9px)だと h2 全体が6.8px背高になる */
    line-height: 17.5px;
  }

  #section1 h2 img {
    width: 256px;
    height: 45.6px;
  }

  /* Figma `4:56`: 32px/67.2px 中央寄せ / pt15.79 / w573 → ÷2 */
  #section1 p {
    width: 286.5px;
    padding-top: 7.895px;
    padding-bottom: 0.695px;
    font-size: 16px;
    line-height: 33.6px;
    text-align: center;
  }

  /* **Figmaの本文は2つのテキストボックスに分かれている**（544 / 573）。
     前半だけ幅が狭く、中央寄せの基準が違うため15単位左にずれる。
     1つの箱として組むとこのズレが再現できない（実測で確認）。 */
  #section1 p .tb1 {
    display: block;
    width: 272px;
  }

  #section1 p .tb2 {
    display: block;
  }

  /* Figma `123:9748`: (49.4, 889) 655.2x231 → ÷2。
     PNGは 656x231 なので**ちょうど半分**の 328x115.5 で置く */
  /* **`margin-left` が必須。** この画像は `position: absolute`（PC側の指定）なので、
     基準は `position: relative` な #section2 と同じく**セクションのパディングボックス**＝
     border を除いた全幅になり、**セクションに入れた中央寄せの padding が効かない。**
     375px より広いビューポートで、ここだけ x=24.7 に貼り付いていた（オーナー指摘）。
     絶対配置要素の `margin-left` は `left` に加算されるので、そこへ同じ calc を入れる。 */
  #section1 picture img {
    top: 444.5px;
    left: 24.7px;
    width: 328px;
    height: 115.5px;
    margin-left: max(0px, calc((100% - 375px) / 2));
  }

  /* ===== SP04 / section2  `4:65`（750x6786 → 375x3393） =====
   *
   * FigmaのSPは `4:66`（flex column / gap20 / pt100 / pb140 / px48）の**普通のフロー**だが、
   * PC側は `#section2 > * { position: absolute }` で全ブロックを絶対配置している。
   * **SPもその絶対配置に乗せる。** フローに戻すとHTMLの入れ子をFigmaに合わせる必要が出て、
   * PCのセレクタ（`p:nth-of-type(3)` 等）が全部ずれる。座標は下記のとおり機械的に出せる。
   *
   *   Frame3(`166:34620`) 原点 = (7.644, 1084.788) / 子は Frame3 相対
   *   → 絶対Figma座標 ÷2 = ここに書くCSS値
   *
   * 検算（全て gap 30 = CSS15 で連続する）:
   *   01 1107.136+588.744 → 02 1725.880+541.288 → 03 2297.169+560.280
   *   → 出典 2887.449+29 → 集約図 2946.449+907.339 = 3853.788 = Frame3 の下端
   */
  #section2 {
    height: 3393px;
    /* PCの積み上げ補正(-2px)を打ち消す。SPは section1(1361+1198=2559) の直後に隙間なく続く */
    margin-top: 0;
    /* 集約図が左右に約45pxはみ出す（Figmaでも750枠の外に出て切れている） */
    overflow: hidden;
  }

  /* h2_mark は Figma 45.938x71.788 → ÷2 で 22.969x35.894。**PCと完全一致なので寸法は書かない** */
  #section2 > .h2-mark {
    top: 50px;
    left: 176.016px;
  }

  /* `4:71` 654x210 → 327x105。中身のテキスト箱(629)は箱の中央なので中心が一致する */
  #section2 > h2.is-in {
    top: 95.894px;
    left: 24px;
    width: 327px;
    font-size: 22px;
    line-height: 35px;
  }

  /* `4:73` 654x643。テキストは 629x600 が x=12.5 に置かれた**左寄せ**（PCは中央寄せ）。
     切り出し箱を654のまま保つため、寄せは padding で入れる */
  #section2 > h2.is-in + p.is-in {
    top: 210.894px;
    left: 24px;
    width: 327px;
    height: 321.5px;
    padding-right: 6.25px;
    padding-left: 6.25px;
    font-size: 15px;
    line-height: 30px;
    text-align: left;
    /* Figmaも whitespace-nowrap。内容幅314.5に対し2行目が315pxあり、
       nowrap が無いと「ま」だけ折り返す（実測） */
    white-space: nowrap;
  }

  /* **SPのリード文に青字・白マーカーは無い**（`4:74` は #333e4d 一色）。
     PCの `#section2 strong` を、このリード文でだけ打ち消す */
  #section2 > h2.is-in + p.is-in strong {
    font-weight: 400;
    color: inherit;
    background: none;
  }

  /* --- 01 / 02 / 03（PCは3カラム、SPは縦積み） ---
     区切り線は Figma `Rectangle 2` = **下辺2pxのみ**（PCは左右1px）。
     01 だけ枠(690)よりブロック(734.712)が広いので、線を ::after で別に置く */
  #section2 > div:first-of-type {
    top: 553.568px;
    left: 3.822px;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    width: 367.356px;
  }

  #section2 > div:first-of-type > div {
    position: relative;
    width: 345px;
    height: auto;
    text-align: center;
    border: 0;
  }

  #section2 > div:first-of-type > div + div {
    margin-left: 0;
  }

  #section2 > div:first-of-type > div::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 345px;
    height: 2px;
    content: "";
    background: var(--c-divider);
  }

  #section2 > div:first-of-type > div:nth-child(1) {
    width: 367.356px;
    height: 294.372px;
  }

  #section2 > div:first-of-type > div:nth-child(1)::after {
    left: 11px;
  }

  #section2 > div:first-of-type > div:nth-child(2) {
    height: 270.644px;
  }

  #section2 > div:first-of-type > div:nth-child(3) {
    height: 280.14px;
  }

  /* イラストは **SP専用の書き出しが無く、PCの top_img002〜004.png を流用する**
     （`ASSET-EXCEPTIONS.md` 2026-08-06 の判断）。SPは寄りが違うので、
     PNG内でのイラストの位置から逆算して「PNGの枠」を置く。
       01: PNG枠 = SPのクリップ枠と同寸(倍率2.783)だが (-0.356, +21.8) ずれている
       02: Illustration が PNG枠内 (46,17.64) 168x112.88 / SP 463.68x311.54 → 倍率 2.760
       03: Group が PNG枠内 (55,3.554) 153x176.07 / SP 414.00x476.42 → 倍率 2.706
     01 と 03 は Figma 側にクリップ枠があるので clip-path で再現する。
     **`base.css` の `img { max-width: 100% }` を必ず外すこと。**
     外さないと枠より広い画像が親幅に潰され、倍率ごと狂う（実測で b2 が 464→440） */
  #section2 > div:first-of-type img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    margin-top: 0;
    margin-inline: 0;
  }

  #section2 > div:first-of-type > div:nth-child(1) img {
    top: 10.9px;
    left: -0.178px;
    width: 367.356px;
    height: 189.244px;
    clip-path: inset(0 0 10.9px 0.178px);
  }

  #section2 > div:first-of-type > div:nth-child(2) img {
    top: -24.344px;
    left: -6.9px;
    width: 364.32px;
    height: 187.68px;
  }

  #section2 > div:first-of-type > div:nth-child(3) img {
    top: 6.1px;
    left: -5.59px;
    /* PCの `> div:last-child img { margin-top: 2px }` の方が詳細度が高い。ここで消す */
    margin-top: 0;
    width: 357.18px;
    height: 184px;
    clip-path: inset(0 75.59px 16.22px 74.59px);
  }

  /* 連番 01/02/03 — Montserrat Bold 32.2px/tracking3.22 → ÷2 */
  #section2 > div:first-of-type p:first-of-type {
    position: absolute;
    padding-top: 0;
    font-size: 16.1px;
    line-height: 19.5px;
    letter-spacing: 1.61px;
  }

  #section2 > div:first-of-type > div:nth-child(1) p:first-of-type {
    top: 186.62px;
    left: 163.49px;
    width: 19px;
    padding-top: 0;
  }

  #section2 > div:first-of-type > div:nth-child(2) p:first-of-type {
    top: 162.895px;
    left: 162.15px;
    width: 22px;
    padding-top: 0;
  }

  #section2 > div:first-of-type > div:nth-child(3) p:first-of-type {
    top: 182.39px;
    left: 162.15px;
    width: 22px;
    padding-top: 0;
  }

  /* 見出し — Noto Sans JP Medium 36.8px/55.2px → ÷2 */
  #section2 > div:first-of-type p + p {
    position: absolute;
    padding-top: 0;
    font-size: 18.4px;
    line-height: 27.6px;
  }

  #section2 > div:first-of-type > div:nth-child(1) p + p {
    top: 211.92px;
    left: 82.5px;
    width: 202.5px;
  }

  #section2 > div:first-of-type > div:nth-child(2) p + p {
    top: 188.195px;
    left: 89.7px;
    width: 166.5px;
  }

  #section2 > div:first-of-type > div:nth-child(3) p + p {
    top: 207.69px;
    left: 75.9px;
    width: 193.5px;
  }

  /* 出典 `173:34621` 565x29 → 282.5x14.5 */
  #section2 > p:nth-of-type(2) {
    top: 1443.724px;
    left: 46.25px;
    font-size: 12px;
    line-height: 14.5px;
  }

  /* 「散らばった情報を、ひとつに集約」の帯 `173:34775` 660.994x76.998 → ÷2 */
  #section2 > p:nth-of-type(3) {
    top: 1500.526px;
    left: 22.461px;
    /* 幅を実値で固定する。文字送りまかせだと 330.17 になり、右端の角丸が1px欠ける */
    width: 330.497px;
    transform: translateX(-0.5px);
    padding: 7.75px 23.25px;
    font-size: 19px;
    line-height: 23px;
  }

  /* 集約図。**SPは別アセット sp_top_img005.png（934x939）を半分で置く**。
     Figma `229:91` は器(690)より広く、左右とも750枠の外へ出て切れている */
  #section2 > picture {
    top: 1483.115px;
    left: -45.403px;
    width: 466.97px;
    height: 469.079px;
  }

  /* 図の下の見出し `173:34658` 648x120 → 324x60。図の矢印の上に重なる */
  #section2 > p:nth-of-type(4) {
    top: 1828.364px;
    left: 26.314px;
    width: 324px;
    font-size: 18px;
    line-height: 30px;
  }

  /* 「だからいま、」`173:34778` 550x215 → 275x107.5。
     Figmaのテキスト箱は205（3行 x leading70 = 210 ではない）ので、高さは箱の実値で固定する */
  #section2 > p.is-in:nth-of-type(5) {
    top: 1936.894px;
    left: 50px;
    width: 275px;
    height: 107.5px;
    font-size: 18px;
    /* **1行目だけ行間が 65（=32.5）**。Figmaのテキスト箱は 205 で、
       70x3=210 にならない。65+70+70=205 で辻褄が合う（サイズ混在時のFigmaの詰め）。
       2行目以降は span 側の 35px が効く */
    line-height: 32.5px;
  }

  /* **ブロックにする。** インラインのままだと親(18px)のストラットが足されて
     2行目・3行目の行ボックスが35pxではなく38.05pxになる（実測で行送りが77device）。
     そのため index.html 側の <br> を pc-br にして空行が出ないようにしてある */
  #section2 > p.is-in:nth-of-type(5) > span:first-of-type {
    display: block;
    font-size: 25px;
    line-height: 35px;
  }

  /* 最後の1文は SP では別ボックス `229:73`（646x140 / テキストは 694 幅で中央寄せ）。
     参照画像は 664x602 ではなく 664x140 で返るので、箱を 332x70 にして中心を合わせる */
  #section2 > p.is-in:nth-of-type(5) > span:last-of-type {
    position: absolute;
    top: 117.5px;
    left: -24px;
    width: 323px;
    font-size: 22px;
    line-height: 35px;
    white-space: nowrap;
  }

  /* --- 濃紺カード4枚 `173:35397` ---
     枠は Figma の inside stroke（2.421）+ padding（2.421）が**同じ場所に重なる**ので、
     CSS では border だけを 1.2105px 置く（padding は 0）。
     690 = 345 → 中身は 345 - 2.421 = 342.579 で Figma の 685.158 ÷2 に一致する */
  #section2 > div:last-of-type {
    top: 2134.394px;
    left: 15px;
    /* 0.5px の送り。`top` を 0.5px 削る形でも試したが 8.13% -> 6.09% で transform が良い
       （transform はテキストのAAが変わるので、必ず両方試して数字で決めること） */
    transform: translateY(-0.5px);
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    width: 345px;
  }

  /* **border-width は device px に丸められる。** 1.2105px(=2.421device) を書いても
     Chrome は 2device=1CSS で描くので、カード高が 0.4515px 足りなくなる（実測）。
     border は 1px にして、足りない分を padding で戻す。
     こうすると中身の幅も 345-2-0.421 = 342.579 で Figma実値にぴたり合う */
  #section2 > div:last-of-type > .is-in {
    width: 345px;
    padding: 0.2105px;
    border-width: 1px;
    border-radius: 14.5265px;
  }

  #section2 > div:last-of-type > .is-in > div:first-child {
    gap: 7.263px;
    padding: 20px 26.6315px;
  }

  #section2 > div:last-of-type > .is-in > div:first-child p:first-child {
    font-size: 15px;
    line-height: 18px;
  }

  /* 「求められるもの 01」だけ Figtree ExtraBold で、**02〜04 は Noto Sans JP Bold**（Figma実値） */
  #section2 > div:last-of-type > .is-in:nth-child(n + 2) > div:first-child p:first-child {
    font-family: var(--f-body);
    font-weight: 700;
  }

  #section2 > div:last-of-type > .is-in > div:first-child p + p {
    font-size: 20px;
    line-height: 28px;
  }

  #section2 > div:last-of-type > .is-in > div + div {
    /* PCの `flex: 1 0 0` は flex-basis:0 なので、SPで height を書いても効かない */
    flex: none;
    padding: 23.357px 0 24.2105px;
    font-size: 15px;
    line-height: 23px;
  }

  /* 白地の高さは Figma 側で個別指定（2: h181 / 3: h213 + 下寄せ / 4: pt が 0.012 違う） */
  #section2 > div:last-of-type > .is-in:nth-child(2) > div + div {
    height: 90.5px;
    padding: 0;
  }

  #section2 > div:last-of-type > .is-in:nth-child(3) > div + div {
    height: 106.5px;
    padding: 0 0 34.137px;
    align-items: flex-end;
  }

  #section2 > div:last-of-type > .is-in:nth-child(4) > div + div {
    padding-top: 23.363px;
  }

  /* 締めの5行 `4:175` 654x360 → 327x180 */
  #section2 > p.is-in:last-of-type {
    top: 3152.894px;
    left: 24px;
    width: 327px;
    font-size: 21px;
    line-height: 36px;
  }

  /* ===== SP05 / section3a  `4:340`（750x4580.62 → 375x2290.31） =====
   *
   * **縦のリズムはPCと完全に同じ**。h2_mark → h2 → リード → カード群 の
   * 間隔はいずれも 10px で、PC の sections.css がそのまま効く（margin-top は書かない）。
   * 変わるのは「見出しの上余白 / 2行化 / カードが3列グリッド → 1カラム / 各値のサイズ」だけ。
   *
   * カードの絶対位置（Figma → ÷2）:
   *   コンテナ `182:36357` y=247.843 / カード上端 263.315 → 差 15.47 が padding-top
   *   カード x=24.23（375枠に327を中央寄せすると24。誤差0.23は丸めの範囲）
   *   gap 20（card1底 576.07 → card2上端 596.07）
   */

  #section3 {
    /* h2_mark `182:35435` は y=110 → 55。PCは 73.948 */
    padding-top: 55px;
    /* `4:340` の高さ 2290.311 に対し、中身の積み上げは 2241.394
       （55 + h2mark 35.894 + 10 + h2 77 + 10 + lead 50 + 10 + カード群 2003.5）。
       その差が 3a の下余白で、ここが 3b（Frame4）の開始位置を決める */
    padding-bottom: 48.917px;
  }

  /* `4:345` / `4:347` はどちらも x=48 幅654 → 24 / 327。
     100% にすると .is-in が375幅になり、中央寄せの基準がずれる */
  #section3 > div {
    width: 327px;
  }

  /* `4:346` は 60px/76px Bold 白 中央の2行。÷2 で 30/38。
     font-size は PC と同値（--fs-h2 30px）なので行間まわりだけ上書きする。

     **line-height を Figma実値の38pxで書くと2行とも2〜3device下に出る**（実測）。
     グリフを上げる手段は「ハーフレディングを削る」＝ line-height を縮めることだけで、
     クロップが要素基準なので transform も position も効かない（要素ごと動いてしまう）。
     **実測した効き方は 1行目 = 4δ / 2行目 = 8δ device**（δ は line-height の変化量px。
     ハーフレディングの理論値 δ/2 px よりずっと大きく効くので、必ず測って決めること）。
     padding-top は両行に一律 -2p device 効く。lh 38 / pt 0.939 のとき +2/+3 だったので
     連立して δ=-0.25 / p=0.5 を得た。縮めたぶんは height で埋めて箱（154device）を保つ */
  #section3 h2.is-in {
    height: 77px;
    padding-top: 1.439px;
    line-height: 37.75px;
  }

  /* `4:348` は 30px/50px Regular 白 中央の2行。÷2 で 15/25。
     **PCも 15px なのでサイズは据え置き**、行間だけ 18 → 25 に変える。
     h2 と同じ理由で 25px だと +2/+1 device 下に出る。ただし PC 側の padding-top は
     すでに 0 で下げしろが無く、1行目と2行目を同時に0にはできない
     （1行目 4δ・2行目 8δ が逆向きになる）。二乗誤差最小の δ=-0.2 を採る */
  #section3 > div > p.is-in {
    height: 50px;
    line-height: 25px;
  }

  /* 3列グリッド → 1カラム。PCの grid-template-* を打ち消す必要があるので
     display から書き直す（gridのまま列を1にすると行高 373/346 が残る） */
  #section3 > div > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding-top: 15.5px;
  }

  /* Figma実値: 幅653.09（参照画像は654）/ border 1.719 / padding 46,50 /
     radius 20.624 → すべて ÷2。
     border は inside stroke で padding と同じ場所に重なるので、**CSSでは padding から
     border 分を引く**（SP04 の濃紺カードと同じ補正）。引かないと中身が 0.86px ずつ内側に
     入り、バー(::after)の位置が実測で1.7device下にずれた。
     内容幅の検算: 327 - 2*(22.14 + 0.86) = 281 で Figma の子ノード幅 280.545 と一致する。

     **gap は design_context の 17.187 ではなく metadata の実座標 15.98 を使う**
     （子のy: 50 → 127.89 → 392.56 → 478.06 から算出）。PC の section3a でも
     同じズレがあり sections.css に記録がある。card2 だけは実座標も 17.18。

     **高さは固定**。中身を積んだ余りが下padding になる構造で、h3 が1行ぶん高い
     card1 は下余白が 55.45、card3-6 は 65.45 と変わるのにカード高は同じ 625.51 */
  #section3 .scp3 {
    box-sizing: border-box;
    gap: 7.99px;
    width: 327px;
    height: 313px;
    padding: 24.14px 22.14px;
    border-width: 0.86px;
    border-radius: 10.312px;
  }

  #section3 .scp3:nth-child(2) {
    gap: 8.59px;
    height: 328px;
  }

  /* 連番 `182:36359` — Figtree ExtraBold 36px/tracking 2.0624 → 18px/1.031。
     ブロック高 61.91 → 30.955 = テキスト21.5 + gap 6.874 + バー 2.578 */
  #section3 .scp4 {
    gap: 6.874px;
    font-size: 18px;
    line-height: 21.5px;
    letter-spacing: 1.031px;
  }

  #section3 .scp4::after {
    width: 25.78px;
    height: 2.578px;
  }

  /* 画像枠 `182:36362` は 561.09x248.69 → 280.545x124.345。
     **PCのPNG(652x290)には水色背景と角丸が焼き込まれている**ので、
     SPでも同じPNGを縮小して置くだけでよい（倍率 0.86。等倍ではないので
     リサンプルの残差が出る）。card2 のみ枠が 562x247.486 と別値 */
  #section3 .scp3 > img {
    width: 280.545px;
    height: 124.345px;
  }

  #section3 .scp3:nth-child(2) > img {
    width: 281px;
    height: 123.743px;
  }

  /* h3 `182:37125` — 40px → 20px（PCの --fs-h2-sm と同値）。pt 10.312 → 5.156。
     テキスト高は箱ごとに違う: card1 34.755 / card2 29.155 / card3-6 29.755
     （pt を引くと 29.6 / 24.0 / 24.6）。card1 だけ Zen Kaku なのは PC と同じゆらぎ */
  #section3 .scp3 h3 {
    padding-top: 5.156px;
    line-height: 24.6px;
  }

  #section3 .scp3:first-child h3 {
    line-height: 29.6px;
  }

  #section3 .scp3:nth-child(2) h3 {
    padding-top: 5.156px;
    line-height: 24px;
  }

  /* 本文 `182:37127` — 26px/45.716px → 13px/22.858px。
     内容幅 280.545px に対しFigmaの折り返しは PC と3箇所ずれる（card3/4/6）ので
     index.html 側で sp-br / pc-br に割ってある */
  #section3 .scp3 > p:not(.scp4) {
    font-size: 13px;
    line-height: 22.858px;
  }

  /* ===== SP06 / section3b  `182:37282`（750x1255 → 375x627.5） =====
   *
   * **カードの中身は1行も書かない。** `article.scp3` は Figma実寸 570x566 で、÷2 すると
   * PC の 285x283 と1pxも違わない（PROGRESS-SP.md ②）。フォントサイズも全項目一致:
   *   バッジ18 / 初期費用12 / 金額30+15(lh22.1) / 対応言語12 / 言語12 / カバー率14
   * SPで変わるのは**並べ方だけ**。4枚が 2400px 幅の横一列で、Figmaでも750枠から
   * はみ出して切れている（参照画像がカード1で47px・カード4で1x1しか焼けない）。
   * → 横スクロール（scroll-snap）で実装する。初期表示はカード1が左端。
   */

  /* PCの積み上げ補正(-1.233px)を打ち消す。SPでは 3a の直後に隙間なく続く */
  #section3-lang {
    padding-bottom: 0;
    margin-top: 0;
  }

  /* Frame4 は 627.5px。h2_mark が y=0.25 から始まり、注記の下端 622 との差が 5.5 */
  #section3-lang > .is-in {
    max-width: 375px;
    padding: 0.25px 0 5.5px;
  }

  /* `182:37276` (0,46.145) 375x38.95。Noto Sans JP Bold 60px/76px → 30/38。
     font-size は PC と同値なので行間と箱の高さだけ書く */
  #section3-lang h2 {
    height: 38.95px;
    margin-top: 10px;
    line-height: 38px;
  }

  /* `182:37278` (0,95.09) 375x75。Regular 30px/50px → 15/25 の3行。
     PCは 15.5px/31px なのでサイズも変わる。PCの padding-top 5.1 は打ち消す */
  #section3-lang > .is-in > p:first-of-type {
    height: 75px;
    padding-top: 0;
    margin-top: 10px;
    font-size: 15px;
    line-height: 25px;
  }

  /* 3行とも Δ+1 device 均一（列範囲は参照と完全一致）。均一なズレは line-height では
     動かせない（1行目4δ・2行目8δ… と行ごとに効きが違うため）ので、
     中身を span でブロック化して送る。**要素自身を動かすとクロップも動いて効かない** */
  #section3-lang > .is-in > p:first-of-type > span {
    display: block;
    transform: translateY(-0.5px);
  }

  /* カード4枚 `182:37284` は 2400x566（=1200x283）の横一列。gap は 610-570=40 → 20 で
     **PCの --grid-gap と同値**。375枠に収まらないので横スクロールにする。
     `html { overflow-x: clip }` は子のスクロールを止めないので、ここで auto を持てる */
  #section3-lang > .is-in > div {
    display: flex;
    gap: var(--grid-gap);
    align-items: flex-start;
    margin-top: 25px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--pad-x);
    /* iOS でスクロールバーが版面を押し上げないように */
    scrollbar-width: none;
  }

  #section3-lang > .is-in > div::-webkit-scrollbar {
    display: none;
  }

  /* grid の子ではなくなるので、潰れないよう flex-basis を固定する。
     285x283 は PC と同値なので寸法そのものは書かない */
  #section3-lang .scp3 {
    flex: 0 0 285px;
    scroll-snap-align: start;
  }

  /* 注記 `182:37359` (14,522) 350.5x100。Regular 24px/40px 白 **左寄せ** → 12/20 の5行。
     カード下端 478.09 との差が 43.91。枠は375に対し左14・右10.5で非対称 */
  #section3-lang > .is-in > p:last-of-type {
    width: 350.5px;
    height: 100px;
    margin-top: 43.91px;
    margin-left: 14px;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    /* **Figmaは折り返さず枠からはみ出させている**（`whitespace-pre` で焼かれている）。
       2行目「 タイ語／…／マレー語／」は 350.5px の枠に対し約354px あり、
       nowrap が無いと「／」だけの6行目ができて5行目が箱からあふれる */
    white-space: nowrap;
  }

  /* ===== SP08 / #plans5  `4:238`（750x1691 → 375x845.5） =====
   *
   * **表は3列11行のままで、SPでは横スクロールにする。** Figma がそう描いている:
   *   - `table` は 1024（=512px）幅で、器の `div.is-in`（726=363px）から 169px はみ出す
   *   - 器は `overflow-clip` かつ **右の border と右の角丸だけが無い**
   *     （border-b/l/t 1.6px / rounded-bl・rounded-tl 25.6px のみ）
   *   → 「右に続いている」ことをデザイン側が明示している。3b のカルーセルと同じ判断
   *
   * PCとは寸法が1つも一致しない（列幅・行高・フォント全て別値）ので、
   * セル系はすべてここで上書きする。
   */
  #plans5 {
    padding-bottom: 50.69px;
  }

  #plans5 > div {
    width: 100%;
    /* アイコン枠 `4:240` の y=139.7 → 69.85。PCは 79.092 */
    padding-top: 69.85px;
  }

  /* **アイコンはPCの h2_mark ではない**（`4:241` 19.805角 + `4:242` 22.465角 の
     span 2枚で、バーの寸法も間隔もPCと違う）。書き出しが無いため暫定で h2_mark.svg を
     置いている。PROGRESS-SP.md「実装前に人間の判断が要ること」に報告済み。
     PC の `top: -13.781px`（枠の外へはみ出す配置）はSPでは要らないので戻す */
  #plans5 .h2-mark {
    top: 0;
  }

  /* `4:244` (0,183.74) 750x88.88 → 44.44。テキストは (225,1.88) 300x87 → 150x43.5。
     font-size は PC と同値（Zen Kaku 30px）。
     **アイコン枠の下端(100.965)より上(91.87)から始まる**ので margin は負になる
     （Figma でも `4:240` と `4:244` は重なっている） */
  #plans5 h2.is-in {
    padding-top: 1.94px;
    margin-top: -9.095px;
    line-height: 43.5px;
  }

  /* `4:246` (0,292.62) 750x100 → 50。Regular 30px/50px 中央の**2行**（PCは1行 15px/18px） */
  #plans5 h2.is-in + p.is-in {
    height: 50px;
    margin-top: 10px;
    line-height: 25px;
  }

  /* SP06b と同じ「2行とも Δ+1 device 均一」。span をブロック化して送る */
  #plans5 h2.is-in + p.is-in > span {
    display: block;
    transform: translateY(-0.5px);
  }

  /* 表を載せる白いカード `4:248`。**右の border と右の角丸は無い**（実値どおり）。
     Figma は overflow-clip だが、実装では横スクロールにするので auto にする */
  #plans5 div.is-in {
    width: 363px;
    height: 532.7px;
    padding: 31.2px 0 16.8px 20px;
    margin-top: 26.19px;
    overflow-x: auto;
    border-width: 0.8px 0 0.8px 0.8px;
    border-radius: 12.8px 0 0 12.8px;
    box-shadow: 0 14.4px 32px rgb(21 39 67 / 8%);
    scrollbar-width: none;
  }

  #plans5 div.is-in::-webkit-scrollbar {
    display: none;
  }

  /* `4:249` は min-w/w とも 1024 の固定幅。中央寄せしない（左端から始まる） */
  #plans5 table {
    width: 512px;
    margin: 0;
  }

  #plans5 thead th:nth-child(1) {
    width: 174.07px;
  }

  #plans5 thead th:nth-child(2) {
    width: 168.95px;
  }

  #plans5 thead th:nth-child(3) {
    width: 168.975px;
  }

  /* 見出し行 `4:250` 156.6 → 78.3。下線は 3.2 → 1.6px。
     PCと同じ理由で border ではなく inset shadow で内側に描く */
  /* 見出し行 `4:250` 156.6 → 78.3。下線は 3.2 → 1.6px。
     **th ごとに箱の高さが違う**（th1 156.6 / th2 155.6 / th3 155）ので、
     tbody と同じく擬似要素で個別に引く。inset shadow だと3本とも同じ位置になる */
  #plans5 thead th {
    position: relative;
    height: 78.3px;
    padding: 29.6px 0 0 12.8px;
    font-size: 12px;
    line-height: 17.5px;
    box-shadow: none;
  }

  #plans5 thead th::after {
    position: absolute;
    right: 0;
    bottom: 0.5px;
    left: 0;
    height: 1.6px;
    content: "";
    background: var(--c-navy);
  }

  #plans5 thead th:nth-child(2)::after {
    bottom: 1px;
  }

  #plans5 thead th:nth-child(3)::after {
    bottom: 1.3px;
    background: var(--c-blue);
  }

  #plans5 thead th:nth-child(2) {
    padding: 27.6px 0 0;
    font-size: 14.4px;
    line-height: 21px;
  }

  /* プレミアム列。塗りは #f2f7fe だが PC と同じく --c-tint を流用する
     （YIQ距離4.3で pixelmatch に検出されない）。下線だけ --c-blue */
  #plans5 thead th:nth-child(3) {
    padding: 18.4px 0 0;
    font-size: 14.4px;
    line-height: 21px;
    border-radius: 6.4px 6.4px 0 0;
  }

  /* 「おすすめ」バッジ `4:256` 103x34.6 → 51.5x17.3。中のテキストは (16,4.8) → (8,2.4)。
     **塗りは --c-blue（PCの --c-blue-text ではない）** */
  #plans5 thead th:nth-child(3) > span {
    padding: 2.4px 8px;
    margin: 0 auto 4.1px;
    font-size: 8.8px;
    line-height: 12.5px;
    background: var(--c-blue);
  }

  /* 本体の行。行高は 44 / 48 / 39.3（PCは 55 / 60 / 49） */
  #plans5 tbody tr:nth-child(1) > * {
    height: 44px;
  }

  #plans5 tbody tr:nth-child(2) > * {
    height: 48px;
  }

  #plans5 tbody tr:nth-child(n + 3) > * {
    height: 39.3px;
  }

  /* 罫線は 1.6 → 0.8px。**border ではなく内側に描く。**
     border-collapse ではセル境界をまたいで描かれ、Figma（枠の内側）より下にずれる
     （thead で PC が同じ手当てをしている理由と同じ。SPは全行で効いてくる。
     inset shadow に変えただけで table は 3.92% → 2.40% になった）。

     さらに **tr1 / tr2 は th の箱が td より 4.6device 低い**（`4:261` は 83.4 で
     tr は 88 / `4:270` は 91.4 で tr は 96）。参照をよく見ると罫線が2本あり、
     上が th・下が td のもの。tr3 以降は th と td が同じ 78.6 なので1本になる。
     table の行高は揃ってしまうので、th 側は擬似要素で 2.3px 上に引く */
  #plans5 tbody th,
  #plans5 tbody td {
    position: relative;
    border-bottom: 0;
    box-shadow: inset 0 -0.8px 0 var(--c-border);
  }

  #plans5 tbody tr:nth-child(1) th,
  #plans5 tbody tr:nth-child(2) th {
    box-shadow: none;
  }

  #plans5 tbody tr:nth-child(1) th::after,
  #plans5 tbody tr:nth-child(2) th::after {
    position: absolute;
    right: 0;
    /* 理論値は 2.3px（44 − 41.7）だが、実測で2device下に出るので1px足す */
    bottom: 3.3px;
    left: 0;
    height: 0.8px;
    content: "";
    background: var(--c-border);
  }

  #plans5 tbody th {
    padding: 13.2px 0 0 12.8px;
    font-size: 12px;
    line-height: 14.5px;
  }

  #plans5 tbody tr:nth-child(2) th {
    padding-top: 15.2px;
  }

  #plans5 tbody td {
    font-size: 12px;
  }

  /* 金額は Figtree Bold 32px → 16px / 38.4px → 19.2px。
     **色は --c-blue（PCの --c-blue-text #3c7ce3 ではない）**。単位は 19.2px → 9.6px */
  #plans5 tbody td > span {
    font-size: 16px;
    color: var(--c-blue);
  }

  #plans5 tbody tr:nth-child(2) td > span {
    font-size: 19.2px;
  }

  /* 単位（円 / 円/月）は 19.2px → 9.6px。
     **金額の行だけ Figma が中央より右に置いている**（td 337.9 に対しインクの左端が 145 で、
     中央寄せの 105.95 より 39device 右）。tr1/tr2 とも同じずれ量で、
     3行目以降の値（`4:282` は中央寄せで実測どおり）とは扱いが違う。
     中央寄せのまま padding-left でその半分ぶん中心をずらす */
  #plans5 tbody tr:nth-child(1) td,
  #plans5 tbody tr:nth-child(2) td {
    padding-left: 39px;
    font-size: 9.6px;
  }

  /* 3行目以降はテキスト top が 12（PCは padding 15px） */
  #plans5 tbody tr:nth-child(n + 3) th,
  #plans5 tbody tr:nth-child(n + 3) td {
    padding-top: 12px;
    padding-bottom: 0;
    font-size: 12px;
    line-height: 14.5px;
  }

  /* 注記 `4:334` (56,1543.62) 638x46 → (28,771.81) 319x23。テキストは y=16 → 8。
     **色が PC(--c-text) と違う**ので追加した --c-text-sub を使う */
  #plans5 > div > p:last-child {
    width: 319px;
    padding-top: 8px;
    margin: 16.61px 0 0 28px;
    font-size: 12.5px;
    line-height: 15px;
    color: var(--c-text-sub);
  }

  /* 行の中身が参照より1device下に出る。**thead に掛けると逆に悪化する**
     （単体で 0.45% → 1.00%）ので tbody だけ送る。table 全体では 1.98% → 0.85% */
  #plans5 tbody {
    transform: translateY(-0.5px);
  }

  /* ===== SP07 / section4  `4:177`（750x4508 → 375x2254） =====
   *
   * PCと構造は完全に同じ（ノード数17で一致）。**縦のリズムもPCと同値**で、
   * `4:178` の gap 21.8 / pt 145.876 / pb 160.02 は ÷2 すると PC の
   * 10.9 / 72.948 / 80 とほぼ一致する。変わるのは左右padding・カードの並び・
   * フォントサイズ・**ボタンの塗り**だけ。
   *
   * 検算（4:178 内の絶対y）:
   *   h2_mark 145.876+71.788 → +21.8 → h2 239.464+87 → +21.8 → p 348.264+250.2
   *   → +21.8 → cards 620.264+3662.019 → +21.8 → btn 4304.083+92 → pb160.02 = 4556.103
   */

  /* Figma `4:177` は section3 の下端(15304)より2px上(15302)から始まる。
     PCの補正(+1px)はSPでは逆向き。**積み上げ検証のパスで再確認すること** */
  #section4 {
    margin-top: -1px;
  }

  /* px48 → 24。max-width(--w-wide 1200) は375幅では効かないのでそのまま */
  #section4 > .is-in {
    padding: 72.938px 24px 80.01px;
  }

  /* Zen Kaku Bold 60px → 30px（PCと同値）。箱の高さは Figma 87 → 43.5。
     **行間は箱より2px大きい 45.5 にする。** 43.5 のままだとグリフのインクが
     参照より2device高く出る（実測: ref y19-74 に対し実装 y17-72。列は完全一致）。
     行間を増やすとハーフレディングが上下に0.5pxずつ増えて、インクだけが1px下がる。
     箱は height で 43.5 に固定するので後続の位置は動かない */
  #section4 h2 {
    height: 43.5px;
    line-height: 45.5px;
  }

  /* Noto Sans JP Regular 30px/60px → 15px/30px（PCは15.5/31）。
     **テキスト箱は600(=300)で、器の327より狭い。** padding で内容幅を300pxに
     絞らないと1行21文字入って折り返しがFigmaと変わる（15px×20文字＝300pxちょうど）。
     箱の幅は327のまま保ちたいので width ではなく padding で入れる。
     **寄せは左。** `get_design_context` の h2 には text-center が付くが
     このリード文には付かない（実測: 最終行「ます。」が参照では左端 x27 に出る。
     中央寄せの実装では x289 に出ていた） */
  #section4 > .is-in > p {
    padding: 5.1px 13.5px 0;
    font-size: 15px;
    line-height: 30px;
    text-align: left;
  }

  /* カード4枚。PCは4カラムのグリッド、SPは1カラム縦積み（gap 40 → 20）。
     検算: 432.205x4 + 20x3 + pt17.1 + pb25.09 = 1831.01 = 3662.019/2 */
  #section4 > .is-in > div {
    grid-template-columns: 325px;
    gap: 20px;
    padding-bottom: 25.09px;
  }

  /* Figma の inside stroke(2.257) と padding(2.257) は**同じ場所に重なる**ので、
     内側の div `276:32` は外枠から 2.257(=1.1285) の位置に来る。
     **border-width は device px に丸められる**（SP04 の濃紺カードと同じ）ため、
     border 1px + padding 0.1285px に割って合計 1.1285px にする */
  #section4 .scp3 {
    height: 432.205px;
    padding: 0.1285px;
    border-width: 1px;
    border-radius: 6.771px;
  }

  /* 内側 `276:32` は 650x859.896 → 325x429.948。器(320.486)より広いので右下がはみ出し、
     `.scp3` の overflow:hidden で切れる（PCの 288枠に287画像を入れる構造と同じ）。
     jirei0N.jpg は 574x762 の**PC用アセットの流用**（SP用の書き出しは無い）。
     574→650 の拡大になるので、残差はリサンプル由来で詰め切れない */
  #section4 .scp3 > img {
    width: 325px;
    height: 429.948px;
  }

  /* `4:236` 346x92 → 173x46。px68 py28 → 34/14、radius16 → 8。
     **SPのボタンはベタ塗り #5694ef（--c-blue）。PCのグラデ(--g-button)ではない**
     （PC参照画像の実測は rgb(42,126,246) でグラデ中央値。SPは実測どおり単色） */
  #section4 .scp1 {
    padding: 14px 34px;
    background: var(--c-blue);
    border-radius: var(--r-md);
  }

  /* ===== SP09 / section6  `4:456`（750x3872 → 375x1936） =====
   *
   * Figma では `4:457`（h2_mark + h2）と `191:37369`（ol）が **section6 直下の兄弟**だが、
   * PC の HTML は `section > div > (p.is-in, h2.is-in, ol)` で ol は div の中にある。
   * `4:457` の pb60(→30) は実体が「h2 と ol の隙間」なので ol の margin-top に振り替える。
   *
   * 検算（section6 上端からの絶対y ÷2）:
   *   1（`4:457` の y=2） + pt72.948 + mark枠31.113 + gap10.9 + h2 43.5 + 30 = 189.461 = ol上端
   *   ol = li 307.5 + 327 + 330.5 + 330.5 + 322.5 + gap20x4 = 1698
   *   下余白 = 1936 - (189.461 + 1698) = 48.539
   *
   * **h2_mark のラッパー（31.113角）とマーク（22.969x35.894）は PC と完全一致**なので
   * `#section6 > div > p.is-in:first-child` と `.h2-mark` の PC ルールをそのまま使う。
   */
  #section6 {
    /* margin-top は末尾の「ページ全体の積み上げ」ブロックに集約した */
    /* 背景は **ベタの #f2f7fe**（PCの --g-tint はグラデ）。参照画像の全域が
       242,247,254 で一定だった。既存の --c-tint(#edf7ff) との YIQ 距離は 6.5 で
       pixelmatch のしきい値(352)を大きく下回るため、トークンを増やさず流用する */
    background: var(--c-tint);
  }

  #section6 > div {
    /* `4:457` は section6 の y=2（→1）から始まるので pt に 1px 足す */
    padding-top: 73.948px;
    padding-bottom: 48.539px;
  }

  /* Figma の gap 21.8 → 10.9（PCの -8.192px は打ち消す）。
     テキスト高 87 → 43.5（PCは43px） */
  /* 幅は Figma の 654(→327) を明示する。PC は 1872 幅（＝器いっぱい）なので
     SPでそのままにすると 375 幅になり、**視覚差分の切り出し原点が 24px ずれる**
     （中央寄せの基準は 375 でも 24+327 でも同じ 187.5 なので見た目は変わらない） */
  #section6 h2.is-in {
    width: 327px;
    height: 43.5px;
    margin-top: 10.9px;
    /* **行間は箱より1px大きい 44.5 にする。** 43.5 のままだとインクが参照より2device高く出る
       （実測: ref y19-74 に対し実装 y17-72。列範囲は完全一致）。SP07 の section4 h2 と同じ手当てで、
       ハーフレディングが上下0.5pxずつ増えてグリフだけが1px下がる。
       箱は height で 43.5 に固定するので ol の位置は動かない */
    line-height: 44.5px;
  }

  /* PC は5枚を横並び、SPは縦積み。`191:37369` は px30(→15) の flex column / gap40(→20)。
     metadata が ol の幅を 690 と返すのは li と同値の誤りで、実体は 750 幅 + px30
     （li が x=30 に置かれていることと整合する。design_context の `size-full` が正） */
  #section6 ol {
    flex-direction: column;
    gap: var(--grid-gap);
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 0;
    padding-inline: 15px;
    margin-top: 30px;
  }

  /* カード。Figma 690x615 等 → 345x307.5。radius 49.286 → 24.643。
     **枠線は border ではなく inset shadow で描く。**
     Chrome は `border-width` を**整数CSS px に丸める**（実測: 1.5px / 0.86px とも
     computed が 1px。SP04 の「device px に丸める」より強い丸め）ため、
     Figma の 3.08device(=1.54px) が 2device になって1本ぶん細くなる。
     inset shadow は丸められないので実値どおり引ける（SP08 の罫線と同じ判断）。
     副作用として枠が箱の内側に入らないので、**中身の座標は Figma の値をそのまま使える**。
     高さは5枚とも別値で、中身を積んだ余りが下余白になる（SP05 のカードと同じ構造） */
  #section6 .scp5 {
    gap: 0;
    width: 345px;
    padding: 38.465px 0 0;
    border: 0;
    border-radius: 24.643px;
    box-shadow: inset 0 0 0 1.54px var(--c-border);
  }

  /* 画像枠の上端は5枚でわずかに揺れる（Figma実測 76.93 / 77.15 / 77.38 / 76.60 / 76.83）。
     カード1・2・4・5 は中身全体がその分だけ平行移動しているだけなので padding で吸収する
     （PC も `li:nth-child(2)` 等で同じ揺れを実値のまま置いている） */
  #section6 .scp5:nth-child(1) {
    height: 307.5px;
  }

  #section6 .scp5:nth-child(2) {
    height: 327px;
    padding-top: 38.577px;
  }

  #section6 .scp5:nth-child(3) {
    height: 330.5px;
    padding-top: 38.689px;
  }

  #section6 .scp5:nth-child(4) {
    height: 330.5px;
    padding-top: 38.301px;
  }

  #section6 .scp5:nth-child(5) {
    height: 322.5px;
    padding-top: 38.415px;
  }

  /* `Rectangle 4`(560x304.348 / radius 18.261) + イラストの合成が
     **書き出しPNG top_img012〜016 にそのまま焼かれている**（PCと同じ構造）。
     ただし PC は 368x200 の PNG を**ちょうど半分**の 184x100 で置くのに対し、
     SPは 280x152.174 なので **1.522倍の拡大**になる。
     絵柄・アスペクト（1.84）は PC と同一なので置くだけでよいが、
     拡大リサンプルの残差は詰め切れない（ASSET-EXCEPTIONS.md の解像度不足と同じ話） */
  #section6 .scp5 img {
    width: 280px;
    height: 152.174px;
    border-radius: 9.13px;
    /* **0.5px の送りで device 格子に乗せる。** 画像の上端は li 上端から 76.812device
       だが、li 自身が .156 CSS の小数位置に置かれる（切り出しは整数CSS px に丸められる）ため、
       Chrome はラスタを 78device にスナップする。参照の 76.83 に対して 1.2device 低い。
       -1device 送ると 76 にスナップし、誤差が 0.7device に減る。
       DOM の box は動かないので h3 の重なりにも影響しない */
    transform: translateY(-0.5px);
  }

  /* **カード2だけは送らない。** PNG 内のイラストの寄りがカードごとに違い、
     カード2は送らない状態で参照と最もよく合う（送ると 4429 → 7977px と倍近く悪化する）。
     他4枚は 1359〜7979px で、いずれも送った方が良い */
  #section6 .scp5:nth-child(2) img {
    transform: none;
  }

  /* h3 は画像に 27.679px 重なる（PCは21px）。
     高さ 76.786 = バッジ 56.987 − 重なり 7.701 + タイトル 27.5 */
  /* **`position: relative` は必須。** 直前の img に `transform` を掛けると
     img がスタッキングコンテキストを作り、**通常フローの h3 より後ろに描かれる**
     （描画順の第8段階に上がる）。バッジの白い丸ごと画像に覆われて "05" が消える。
     h3 を positioned にすると同じ第8段階で DOM 順に描かれ、元の重なりに戻る */
  #section6 .scp5 h3 {
    position: relative;
    margin-top: -27.679px;
    font-size: 23px;
    line-height: 27.5px;
  }

  /* **PC の `#section6 li:nth-child(2) h3`（-21.935px）と `li:nth-child(3) h3`（-20.551px）は
     詳細度 (1,1,2) で、上の `#section6 .scp5 h3`（1,1,1）に勝ってしまう。**
     カードごとの上書きを必ず書くこと（実測で card2 が 5.76px 下にずれていた）。
     カード3だけ画像との重なりが 5px 浅い（Figma実測 h3上端 336.37 / 他は 325.6〜326.1）。
     デザインの実態なので片方に寄せない（PC の nth-child(2)/(3) と同じ判断） */
  /* カード2の見出しはインクが1.5device低い（参照 y431-474 / 実装 y433-475）。
     箱は Figma と一致している（DOM 163.063 / Figma 326.14÷2）ので送りで合わせる */
  #section6 .scp5:nth-child(2) h3 {
    margin-top: -27.679px;
    transform: translateY(-0.5px);
  }

  #section6 .scp5:nth-child(3) h3 {
    margin-top: -22.678px;
    /* カード2と同じくインクが2device低い（参照 y441-485 / 実装 y443-485） */
    transform: translateY(-0.5px);
  }

  /* 連番バッジ `191:37394` 113.973角 → 56.987。padding 30.804 → 15.402、
     重なり -15.402 → -7.701。Montserrat Bold 43.125 → 21.5625px / tracking 4.3125 → 2.15625。
     行間は 56.987 − 15.402x2 = 26.183（テキスト実高 26.5 とほぼ同値） */
  /* **右padding だけ字送り1つぶん詰める。** CSSは最後の1文字の後ろにも letter-spacing を
     足すが Figma のテキスト幅（51 → 25.5）は含まないため、対称にすると箱が 1.8px 広くなり、
     中央寄せのバッジ全体が 0.9px 左へずれる（PC section7 の電話番号と同じ現象） */
  #section6 .scp5 h3 > span {
    height: 56.987px;
    padding: 15.402px 13.246px 15.402px 15.402px;
    margin-bottom: -7.701px;
    font-size: 21.5625px;
    line-height: 26.183px;
    letter-spacing: 2.15625px;
  }

  /* 説明文 `191:37397` 566.786x44 → 283.393x22。Regular 28 → 14px / leading 44 → 22。
     折り返しは PC と全カードで違う（SPの方が1行少ない）ので index.html 側で
     sp-br / pc-br に割ってある。カード2は Figma 側の行頭に半角スペースが残っているので
     `.sp-only` の `&nbsp;` で明示した（SP06 の注記と同じ扱い） */
  #section6 .scp5 p {
    width: 283.393px;
    margin-top: 12.32px;
    font-size: 14px;
    line-height: 22px;
    /* 箱は Figma と一致している（DOM実測 y252.016 / Figma 504.03÷2）が、
       インクだけ全行1device低く出る。SP06b と同じ「均一なズレ」なので
       line-height では消せない。要素の位置は動かさず transform で送る
       （p は各カードの最後の要素なので、後続に影響しない） */
    transform: translateY(-0.5px);
  }

  /* カード3だけは送らない。h3 と画像の重なりが5px浅いぶん p の小数位相が他と違い、
     インクが最初から参照と一致している（送ると 7881 → 8147px と悪化する） */
  #section6 .scp5:nth-child(3) p {
    transform: none;
  }

  /* ===== SP10 / section7  `4:505`（750x740 → 375x370） =====
   *
   * PCは「見出し | 電話+ボタン」の左右2カラム、SPは中央寄せの縦積み。
   * **`a.scp6` は 328x98 → 164x49 で PC と1pxも違わないので1行も書かない**
   * （padding 34/15・radius 8・16px/19px まで一致。PROGRESS-SP.md ②）。
   *
   * 検算: py50 + h2 125 + gap28 + 電話48 + gap20 + ボタン49 + py50 = 370
   */
  #section7 {
    /* margin-top は末尾の「ページ全体の積み上げ」ブロックに集約した */
    padding: 0;
    background: var(--g-navy-sp);
  }

  /* `4:512` は gap56(→28) / py100(→50) / px48(→24) の flex column・中央寄せ */
  #section7 .is-in {
    flex-direction: column;
    gap: 28px;
    align-items: center;
    justify-content: center;
    padding-block: 50px;
  }

  /* Zen Kaku Bold 52px → 26px / leading 83.2 → 41.6 の**3行**（PCは20px/36pxの2行）。
     3行ぶんは 124.8 なので、Figma の箱 250(→125) に合わせて height を明示する
     （書かないと 0.2px ぶん電話ブロックが上がる） */
  /* **左右に送らないこと。** h2 の箱は Figma で x=89device = **44.5 CSS px**（`4:513`）で、
     375 − 286(max-content) = 89 が奇数なので実装も必ず 44.5 に落ちる。これが正しい位置。
     以前ここに `left: 0.5px` を入れていたが、それは
     **切り出しが整数CSS pxに丸められる（round(44.5)=45）ぶんを実装側で埋める**もので、
     箱そのものを Figma より 1device 右へ動かしてしまっていた。
     セクション全体の対象（SP10-section7）ではその1deviceが 8215 → 6175px として出る。
     → 実装は Figma どおり 44.5 に置き、切り出し側を
        `visual.config.json` の `"cropSnap": "device"` でデバイス格子に丸める。
     縦の `top: 0.5px` も同じ理由で外した。Figma の y=100device に対し
     `padding-block: 50px` でちょうど 50 CSS px に乗るのが正しく、
     送ると 101device になっていた。**送りを両方外して、切り出しをデバイス格子にすると
     SP10a 2.64% → 1.68% / SP10-section7 1.48% → 1.11% と両方が同時に良くなる。**
     「片方の対象だけ良くなる送り」は座標が間違っているサインだと考えてよい */
  #section7 h2 {
    height: 125px;
    padding-top: 0;
    font-size: 26px;
    line-height: 41.6px;
    text-align: center;
  }

  #section7 .is-in > div {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
  }

  /* 電話ブロック `4:516`（515x96 → 257.5x48）は**箱の中に3つを絶対配置**した構造。
     2行の右端が揃っていない（番号は右8.5px / 営業時間は右0）ため、
     PCの flex column + align-items:flex-end では組めない */
  #section7 .is-in > div > a:first-child {
    position: relative;
    display: block;
    width: 257.5px;
    height: 48px;
    margin-top: 0;
  }

  /* `4:517` の枠は left130 right17（→65 / 8.5）だが、**中のテキストは枠より広く
     x=-13.5 から始まる**（`4:518` が 395x68 → 197.5x34）。
     枠のまま `text-align: right` にしても効かない: Chrome は nowrap で
     はみ出した行の行ボックスを内容幅まで広げてから右寄せするため、
     **インクが枠の左端から右へあふれる**（実測でインク右端が 262.14 = 参照より20device右）。
     → **枠をテキストの実体に合わせて left 51.5 にする。** 幅 197.5 でインクとほぼ同寸
     （実測 197.14）になり、右端が Figma どおり 249 に収まる。
     **フォントは Figtree ExtraBold（--f-num-alt）で、PCの Montserrat とは別系統。
     字送りも無い**ので PC の --ls-tel-lg を打ち消す（get_design_context で確認） */
  #section7 .is-in > div > a:first-child > span:first-child {
    position: absolute;
    top: -0.76px;
    right: 8.5px;
    left: 51.5px;
    display: block;
    margin: 0;
    font-family: var(--f-num-alt);
    font-size: 30px;
    line-height: 33.6px;
    /* インク幅は 197.5 で箱（184）より広い。nowrap が無いと2行に折り返す（実測） */
    white-space: nowrap;
    text-align: right;
    letter-spacing: normal;
  }

  /* フリーダイヤルマーク `223:65` は 72x45 → **36x22.5**（PCは28x18 で別寸）。
     Figma上は span の兄弟だが HTML では span の中にあるので、
     絶対配置された span を基準に置き直す（left 12.5-51.5 / top 4.5-(-0.76)）。
     `icon_freedial.png` は 56x36 なので**整数倍の縮小にならない**（PCで0px一致した
     「ちょうど半分」の条件を満たさない）。残差はここが下限 */
  #section7 .is-in > div > a:first-child > span:first-child img {
    position: absolute;
    top: 5.26px;
    left: -39px;
    width: 36px;
    height: 22.5px;
    margin-top: 0;
  }

  /* `4:519` left147 right0 top65.66 → ÷2。Regular 24 → 12px / leading 28.8 → 14.4。
     色 #bcd0ec(--c-on-navy-sub) は PC と同値 */
  #section7 .is-in > div > a:first-child > span:last-child {
    position: absolute;
    top: 32.83px;
    right: 0;
    left: 73.5px;
    font-size: 12px;
    line-height: 14.4px;
    text-align: right;
  }

  /* ===== SP11 / footer  `4:523`（750x601.14 → 375x300.57） =====
   *
   * **`4:556`（電話・フリーダイヤル・メール）は Figma で hidden。SPでは出さない。**
   * 残るのは ロゴ / ナビ4本 / 注記 / コピーライト の4つだけ。
   *
   * 検算: accent-bar 3 + `4:525` 177.5 + border 1 + `4:571` 119.07 = 300.57
   *   `4:525` = pt48 + ロゴ枠40 + gap32 + ナビ25.5 + pb32 = 177.5
   *   `4:571` = py18x2 + 注記56.06 + gap10.01 + コピーライト17 = 119.07
   */

  /* Figma `4:505` section7 の下端(26234)と footer の上端(26233.52)の差は0.48device。
     ÷2 で 0.24 なので補正なし（PCの -1px を打ち消す） */
  footer {
    margin-top: 0;
    /* **PCの --c-footer-bg #071a38 ではなく #152743（--c-navy）**。実測値 */
    background: var(--c-navy);
  }

  /* 上ブロック `4:525`。PCは横並び(space-between)だがSPは縦積み。
     PCの width:--w-content(1168) は375幅では効かないので 100% に戻す */
  footer .accent-bar + div {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 48px 24px 32px;
  }

  /* `4:526` 654x80 → 327x40。**高さはナビの位置を決めるので実値で固定する** */
  footer .accent-bar + div > div {
    width: 327px;
    height: 40px;
  }

  /* ロゴは 313.83x56 → 156.915x28 で**PCと完全に同値**。中央寄せだけが違う */
  footer .accent-bar + div > div > p:first-child a {
    margin-inline: auto;
  }

  /* 電話・営業時間・メール（`4:556`）は Figma で hidden="true" */
  footer .accent-bar + div > div > p:last-child {
    display: none;
  }

  /* ナビ `4:561` 654x51 → 327x25.5。リンクは y=11(→5.5) から高さ40(→20)。
     **gap が一定ではない**（Figma実測 x=0/206/358/502 → ÷2 で間隔 25/24/20）ので、
     PCの gap:22 を捨てて個別の margin で置く */
  footer nav {
    gap: 0;
    align-items: flex-start;
    width: 327px;
    height: 25.5px;
    /* リンク枠 `4:562` は nav の y=11（→5.5）から始まる。
       インクは参照より1device下に出るが、5 / 5.25 / 5.5 を掃引しても
       footer全体の差分は 1.88 / 1.88 / **1.84%** で Figma実値が最良だった */
    padding-top: 5.5px;
  }

  /* 4本の合計は 329px で器の327を2px超える。縮まないように固定する */
  footer nav .scp7 {
    flex: none;
    font-size: 13px;
    /* Figmaのテキスト高31 → 15.5（PCは13.5px/16px） */
    line-height: 15.5px;
  }

  footer nav .scp7:nth-child(2) {
    margin-left: 25px;
  }

  footer nav .scp7:nth-child(3) {
    margin-left: 24px;
  }

  footer nav .scp7:nth-child(4) {
    margin-left: 20px;
  }

  /* 下部バー `4:571`。注記のサイズ・行間・色（11px/18.7px/--c-footer-note）は
     **PCと完全に同値**なので触らない。並びだけ縦にする */
  footer > div:last-child > div {
    flex-direction: column;
    gap: 10.01px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
  }

  /* 注記 `4:572` の**テキスト箱は枠の外へ 1.619device はみ出している**
     （枠112.12 に対しテキスト113 が y=-1.619 に置かれている）。
     CSSの行ボックスは枠の上端から始まるので、その分だけ上へ送る。
     コピーライトの位置は動かしたくないので margin ではなく position で入れる
     （実測: 3行とも参照より2device下に出ていた） */
  footer > div:last-child p:first-child {
    position: relative;
    top: -0.81px;
  }

  /* `4:574` は 265x34(→132.5x17)、テキストは 265x29(→14.5)。
     **高さ17を明示しないと footer 全体が2.5px低くなる**（下端が切り出しに入る） */
  footer > div:last-child .co {
    height: 17px;
    line-height: 14.5px;
  }

  /* ===========================================================
     375px より広いビューポートでの中央寄せ

     **SPは375px固定設計だが、メディアクエリは767pxまで効く。**
     376〜767px では中身が左端に貼り付いていた（実測 / viewport 767px）:

     | 対象 | x | 右余白 |
     |---|---:|---:|
     | `#section2 h2.is-in` | 24 | **416** |
     | `#section6 .scp5`    | 15 | **407** |
     | `#section4 article.scp3` | 24 | **418** |
     | `footer nav`         | 24 | **416** |

     中央に乗っていたのは `#section1 .is-in` / `#section3 > div` / `#section7 .is-in` /
     header の内側だけで、**いずれも「幅を持つ器で囲って margin:auto している」もの**だった。
     囲む器が無いセクション（section2 は直下に11個の子が並ぶ）にも同じ効果を出すため、
     **セクション自身に左右均等の padding を入れて 375px の列を中央に置く。**

     - **375px ちょうどでは `max(0px, ...)` が 0 になるので、検証済みの値は1pxも動かない**
       （`npm run diff` の全ターゲットが変化しないことを確認済み）
     - 背景は padding の下にも描かれるので、**濃紺・グラデ・水色は全幅のまま**
     - `max(0px, ...)` は 375px 未満（320px 端末など）で負の padding になるのを防ぐため
     - `#mv` だけ背景画像が 375x680 の実寸配置なので、位置も中央に揃える
     =========================================================== */
  #mv,
  #section1,
  #section2,
  #section3,
  #section3-lang,
  #section4,
  #plans5,
  #section6,
  #section7,
  footer {
    padding-inline: max(0px, calc((100% - 375px) / 2));
  }

  /* **MVの背景は横に伸ばして全幅にする。** `sp_image1.jpg` は 375px 実寸のアセットなので、
     375px より広いビューポートでは左右に下地の濃紺（`--c-navy-900`）が帯で出てしまう
     （オーナー指摘。「黒い背景は出したくない、引き伸ばしてよい」）。
     **375px ちょうどでは `100%` = `375px` なので、検証済みの SP02 3対象は1pxも動かない。** */
  #mv {
    background-size: 100% 680px;
  }

  /* **section2 だけ padding が効かない。** 直下の子11個が全て `position: absolute`
     （PC側 `#section2 > * { position: absolute }` に乗せている）で、
     絶対配置の基準は `position: relative` な #section2 の**パディングボックス**＝
     border を除いた全幅なので、padding をいくら入れても `left: 24px` は動かない。
     border なら基準が動くが `border-width` は % を取れない。
     → **絶対配置要素の `margin-left` は `left` に加算される**ので、そこへ入れる。
        % は包含ブロック（＝パディングボックス）の幅を基準に解決されるので狙いどおりになる。
     直下11個は computed `margin-left: 0` で確認済み（既存の値を潰さない）。 */
  #section2 > * {
    margin-left: max(0px, calc((100% - 375px) / 2));
  }

  /* ===========================================================
     ページ全体の積み上げ（セクション間の隙間・重なり）— SP版
     `node tools/stack-check.js src/service-site --sp` で検証する。

     **`sections.css` 末尾のPC用補正は SP幅にもそのまま漏れる**（メディアクエリで
     囲まれていないため）。SPは750枠=375CSS pxの2倍設計なので値が全く合わず、
     実測で **#plans5 が 208device(104px) 上・section7 が 121device(60.5px) 下**にずれ、
     **footer の切り出しがページ下端で切れて「サイズ不一致」で落ちていた。**

     | 境界 / 原因 | Figma | 補正前のDOM | ズレ(device) | SPの補正 |
     |---|---:|---:|---:|---|
     | header → MV の隙間      | 1     | 0     | -1  | **入れない**（下記） |
     | MV → section1 の隙間    | 1     | 4     | +3  | **入れない**（下記） |
     | section2 → section3 の隙間 | 3  | 0     | -3  | **入れない**（下記） |
     | section3(3a+3b) の高さ  | 5956  | 5865.56 | -90.44 | `#section4` で吸収 |
     | section3 → section4     | -2    | -2    | 0   | `margin-top: 45px`（**このファイルの前半にある -1px を置換**。PCの1pxではない） |
     | section4 の高さ         | 4508  | 4557.94 | +49.94 | `#plans5` で吸収 |
     | section4 → #plans5      | -20   | -228  | -208 | `margin-top: -35px`（PCの -114px を置換） |
     | #plans5 → section6      | 20    | 20    | 0   | `margin-top: 9px`（SP実装時の10pxから-1） |
     | section6 → section7     | 0     | 121   | +121 | `margin-top: -0.5px`（SP実装時の60.5pxを置換） |
     | section7 → footer       | -0.48 | 0     | -0.48 | PCの -1px のまま |

     **補正は「そのセクション以降が動く量が整数CSS px」になるように選ぶ。**
     visual-diff の切り出しは整数CSS pxに丸められるので、半端に動かすと
     **切り出し位相が反転して差分が跳ねる。** 実測（半px動かしたとき）:
     SP04g 2.73% → 8.19% / SP04i 1.50% → 4.97% / SP05b 2.82% → 2.85% /
     SP08d 0.77% → 2.47% / SP10a 1.68% → 2.63%。
     採用した値の実際の移動量は section4 +46px / #plans5 +125px / section6 +124px /
     section7 +63px / footer +63px で**すべて整数**。

     **1〜3device の小さいズレはあえて残す。** 上の3件（header→MV / MV→section1 /
     section2→section3）を Figma どおりに詰めると section1〜3 が 0.5 CSS px の位置に
     落ち、SP03〜SP06 の21対象がまとめて悪化する。**得るものが1device、失うものが
     21対象**なので取らない。stack-check の相対ズレも 1.5px 以内に収まる。
     =========================================================== */
  #section4 {
    margin-top: 45px;
  }

  #plans5 {
    margin-top: -35px;
  }

  #section6 {
    margin-top: 9px;
  }

  #section7 {
    margin-top: -0.5px;
  }
}