/** Shopify CDN: Minification failed

Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 17:39 Unexpected "("
Line 18:53 Expected identifier but found "%"
Line 20:4 Unexpected "{"
Line 20:5 Expected identifier but found "%"
Line 20:38 Unexpected "("
Line 24:121 Expected identifier but found "%"
Line 36:2 Unexpected "{"
Line 36:3 Expected identifier but found "%"
... and 561 more hidden warnings

**/
/* START_SECTION:cm-lp1-01-ideal (INDEX:16) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* ============================================================
     #01 IDEAL
     Figma canonical:
       PC 149:1417 (1100×774)  → viewport 1440, section 1100 fixed width
       SP 149:2021 (690×1765)  → viewport 390, scale 390/750 = 0.52
     ============================================================ */

  /* Figma実測 grid: 50×50 (light #e6e6e6 line on #fbfbfb) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }


  .cm-lp1-01 {
    color: #202020;
    /* canonical: banner bottom (1697) → #02 top (1736.5) = 40px の下余白がセクション内に存在 */
    padding: 0 0 40px;
    position: relative;
    overflow: hidden; /* IDEAL deco / #01 overhang を section 内にクリップ */
  }
  .cm-lp1-01__container {
    /* PC: fixed 1100 wide centered in 1440 viewport (side 170) */
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    /* canonical: inner "01" 開始 = section top から 79 (label 139 のうち 60 が overlap) */
    padding: 79px 0 0;
    position: relative;
  }

  /* -----------------------------------------
     #01 label — Figma canonical (149:1419)
     Helvetica Bold, ＃64.5px + 01 100px, tracking -8px, skew-x-5
     Position: x=6 y=0 within 1112 wide (essentially top-left of section)
     ----------------------------------------- */
  /* Figma canonical 実測 (root PNG): glyph bbox x=181-312, y=section top+26..+105 (h79)。
     従来の「unified viewport x=122 / 82px」は canonical と乖離 (глyph h56, x125) だったため
     canonical 値に戻す。フォントは Poppins italic を維持 (Helvetica skew -5° の近似)。 */
    {%- comment -%} forensic QA Phase 2 / 人間判断 (2026-08-15): section number は Poppins Italic の
        トリートメントを維持したまま、#01-#08 を単一 spec へ統一する。
        canonical (全 16 node 共通) の glyph は 143×79 units @ viewport x=181 (PC) / ×0.52 (SP)。
        Poppins Italic は halfwidth # のため canonical の高さと幅を同時には一致できない
        (実測比 高さ=1.19×font-size / 幅=1.608×font-size)。3 案を実測比較し、
        canonical との最大軸ずれが最小 (16%) かつレイアウト影響も最小の「面積一致」案を採用:
          PC font-size 76.8px (5.333vw@1440) → glyph 123.5×92 / SP 40px → glyph 64.3×48
        glyph 左端は全 section で PC 181 / SP 24.4 に揃える (container 形状が異なるため
        オフセット値は section ごとに違うが、結果の glyph x は同一)。 {%- endcomment -%}
  .cm-lp1-01__number {
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    color: #202020;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    position: absolute;
    top: 10px;
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15):
        canonical (Figma 149:1317) は PC 1440 / SP 750 の 2 面しか定義がなく、番号は
        「section content column の左端 + 光学オフセット」に置かれている
        (PC: 1100px column / gutter 170 / node x=+6.10、SP: 690/750 column / gutter 4% / node x=+6.35)。
        従来は #01=固定px / #02=1100container基準 / #03-#08=1300container の % と
        3 つの anchor model が併存し、750-1439 で位置が分裂していた (1440 は偶然の交差)。
        番号を section 固有 container の座標系から切り離し、LP 共通 rail に載せる。
        全 8 section の containing block は viewport 中央に対してセンタリングされている
        (CB_left + 50% * CB_width == clientWidth/2) ため、下式は #01〜#08 で必ず同一の
        viewport x を返す。out-of-flow は left、in-flow は padding-left に入れるだけで
        同じ方程式になる (position model / DOM / section 高さは不変)。
        端点: 390 -> 24.4 / 1440 -> 181 (いずれも従来値を厳密保存)。
        この 1 式が SP/PC 両方を担うため、SP media query 側の left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0;
    z-index: 3;
  }

  /* -----------------------------------------
     見出しゾーン + IDEAL 背景装飾
     Figma canonical (149:1418): IDEAL 151.448px Helvetica Bold #eee
       PC: x=322.5 y=154 (455×242 centered in 1100 section)
       SP: y=264 (centered in 690)
     見出し (149:1423-1428): YuGothic Bold 60px, tracking -4.8px
     Orange box (149:1426): bg #FF6030, px-10, "本当にできる" 60px white
     ----------------------------------------- */
  .cm-lp1-01__heading-wrap {
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 168px; /* PC title area */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cm-lp1-01__deco {
    /* canonical PC (149:1418): x=322.5 y=154.47 w=455 h=242 in 1100 section
       Figma frame は line-height 1.6 (242/151.448) を含む。browser は lh:1 なので
       同 top では glyph が上寄り → glyph 中央位置合わせのため top を +45 補正 */
    position: absolute;
    left: 322.5px;
    top: 199.5px;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 151.448px;
    line-height: 1;
    letter-spacing: 0;
    color: #eeeeee;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .cm-lp1-01__heading {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.4;
    letter-spacing: -0.08em;
    color: #202020;
  }
  .cm-lp1-01__heading-line {
    display: block;
  }
  .cm-lp1-01__heading-line--2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .cm-lp1-01__heading-text {
    display: inline;
  }
  .cm-lp1-01__heading-tail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .cm-lp1-01__heading-qmark {
    display: inline-block;
  }

  /* Orange box: canonical 149:1426 (356×84) bg #FF6030 px-10, text white 60px
     .mo-marker--fill 系は使わない (motion-off pipeline が background-size:42% を強制するため)
     独自 class として solid box を実装 */
  .cm-lp1-01__marker {
    display: inline-block;
    background: #FF6030;
    color: #fff;
    padding: 0 10px;
    line-height: 1.4;
    border-radius: 0;
  }

  /* -----------------------------------------
     イラスト行 — Figma canonical:
       PC (149:1429): x=296 y=240.5 in section, 544 wide × 135 tall
         image8 (149:1431) x=296 135×135 (女性 square crop)
         img.png (149:1430) x=659 181×135 (夫婦 wide)
         → 3-element row: [女性 135] + たとえば… + [夫婦 181]
       SP (149:2034): 610 wide × 135, x=40 y=309.5
     ----------------------------------------- */
  .cm-lp1-01__illustrations {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* canonical: title bottom → illust top = 72.5 gap, illust bottom → bubbles top = 0.5 */
    margin: 72px 0 0;
    color: #202020;
  }
  .cm-lp1-01__illust {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 135px;
  }
  .cm-lp1-01__illust--left img {
    display: block;
    width: auto;
    height: 135px;
  }
  .cm-lp1-01__illust--right {
    /* canonical couple 可視位置 x=844.6: +28 右へ。margin-right 相殺で flex 中央配置の再センタリングを防ぐ */
    margin-left: 28px;
    margin-right: -28px;
  }
  .cm-lp1-01__illust--right img {
    display: block;
    width: auto;
    height: 135px;
  }
  .cm-lp1-01__tatoeba {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: 0;
    line-height: 1.6;
    color: #202020;
    white-space: nowrap;
  }

  /* -----------------------------------------
     bubble list — Figma canonical:
       PC (Component 2 = 149:1437): 512×88, 2-layer offset border, YuGothic Medium 20px, w-466
         Back layer: bg #fff border 1px #202020, offset ~+4 right +2 down
         Front layer: bg #fff border 1px #202020, px-40 py-20 (visible inset)
       SP (Component 8 = 149:2041): 690×214 (multiline), border 1.5px, px-60 py-30, 30px

     grid: PC 2×2 (gap 32), SP 1-col stacked (gap 32)
     ----------------------------------------- */
  .cm-lp1-01__bubbles {
    list-style: none;
    padding: 0;
    /* canonical: bubbles bottom → banner top = 60 */
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 32px;
    width: 1056px;
    max-width: 100%;
    isolation: isolate;
  }
  .cm-lp1-01__bubble {
    position: relative;
    background: #fff;
    border: 1px solid #202020;
    /* canonical PC: all 4 bubbles 88 tall (2 lines). flex + text wrapper で vertical center。
       flex を bubble 直下に置くと text-node と <b> が flex-item 扱いで壊れるため、
       text 全体を <span> にラップして flex-item は 1 個だけにする。 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 88px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: -0.04em;
    color: #202020;
    box-sizing: border-box;
    box-shadow:
      4px 2px 0 0 #fff,
      4px 2px 0 1px #202020;
    margin-bottom: 2px;
    margin-right: 5px;
  }
  .cm-lp1-01__bubble-text {
    display: block;
    width: 100%;
    text-align: left;
  }
  .cm-lp1-01__bubble b {
    color: #FF6030;
    font-weight: 700;
  }
  /* SP-only bubble (canonical SP has 5 bubbles, PC has 4) */
  .cm-lp1-01__bubble--sp-only {
    display: none;
  }
  /* SP-only forced line break inside bubble text (bubble4 3行 wrap 保証) */
  .cm-lp1-01__brk-sp { display: none; }

  /* -----------------------------------------
     Black banner — Figma canonical:
       PC (149:1442/1443): bg #202020 radius 5 px-30, 1 行 YuGothic Bold 32px lime, 916×51
       SP (149:2045/2046): bg #202020 radius 5 px-30, 2 行 YuGothic Bold 36px lime, 690×116
     ----------------------------------------- */
  .cm-lp1-01__banner {
    background: #202020;
    color: #D4FE16;
    /* canonical Frame 89: 51 tall = 1 line (32px lh 1.4 ≈ 45) + ~3 padding each side */
    padding: 3px 30px;
    text-align: center;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: -0.02em; /* canonical 1 行に収めるため tighten (元 +0.02 → -0.02) */
    border-radius: 5px;
    margin: 0 auto;
    width: 916px;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
  }
  .cm-lp1-01__banner-break {
    display: none; /* PC 1 行 */
  }

  /* -----------------------------------------
     SP (749 以下) — Figma canonical (149:2021)
       viewport 390, scale 390/750 = 0.52
       section 690 wide inside 750 (30 padding each side) → 15.6 padding, 358.8 content
     ----------------------------------------- */
  @media (max-width: 749px) {
    .cm-lp1-01__container {
      width: 100%;
      /* canonical inner "01" 開始 = section top から 79 × 0.52 = 41.1 */
      padding: 41.1px 15.6px 0;
      box-sizing: border-box;
    }
    .cm-lp1-01__number {
      {%- comment -%} 統一 SP spec: font-size 52px。水平位置は共通 rail (--cm-lp1-num-x) が
          media query 無しで担うため、旧 left: 24.4px の上書きは廃止した
          (rail が 390 で 24.4 を返す)。縦位置 top のみ SP 固有。 {%- endcomment -%}
      font-size: 52px;  /* canonical digits 100u × 0.52 */
      top: 12px;
    }
    /* SP: canonical #01 slot 1829.5 native × 0.52 = 951 CSS に合わせる下余白 */
    .cm-lp1-01 { padding-bottom: 34px; }
    .cm-lp1-01__illust--right { margin-left: 0; margin-right: 0; }
    /* Heading: canonical 60px @ 750 → 31.2 @ 390 */
    .cm-lp1-01__heading-wrap {
      min-height: unset;
      padding: 8px 0 0;
    }
    .cm-lp1-01__deco {
      /* canonical SP (149:2022): x=118 y=264.47 w=455 h=242 in 690 section
         Figma frame は lh 1.6 → glyph 中央位置合わせで top を +24 補正 (browser lh:1)
         browser Helvetica glyph 幅が Figma frame より僅かに narrow で右余白が生まれる →
         image 上 canonical は "L" が couple 側に寄っている。+10px 右シフトで glyph 中心整合 */
      left: 71.36px;
      top: 161.5px;
      font-size: 78.75px;
    }
    .cm-lp1-01__heading {
      font-size: 31.2px;
      line-height: 1.35;
      letter-spacing: -0.08em;
    }
    .cm-lp1-01__heading-line--2 {
      display: block;
      width: auto;
    }
    .cm-lp1-01__heading-text {
      display: block;
      margin-bottom: 4px;
    }
    .cm-lp1-01__heading-tail {
      display: inline-flex;
      gap: 5px;
    }
    .cm-lp1-01__marker {
      padding: 0 5px;
    }
    /* Illustrations: canonical 135 @ 750 → 70 @ 390 */
    .cm-lp1-01__illustrations {
      gap: 10px;
      /* canonical SP: title bottom → illust top = 71.5 gap × 0.52 = 37.2, illust bottom → bubbles = 0 */
      margin: 37px 0 0;
    }
    .cm-lp1-01__illust {
      height: 70px;
    }
    .cm-lp1-01__illust--left img {
      height: 70px;
    }
    .cm-lp1-01__illust--right img {
      height: 70px;
    }
    .cm-lp1-01__tatoeba {
      font-size: 20.8px;
    }
    /* bubbles: canonical SP 30px @ 750 → 15.6 @ 390 */
    .cm-lp1-01__bubbles {
      grid-template-columns: 1fr;
      /* canonical gap 32 canvas × 0.52 = 16.6 */
      gap: 16.6px;
      width: 100%;
      max-width: 100%;
      /* canonical bubbles bottom → banner top = 60 canvas × 0.52 = 31.2 */
      margin: 0 auto 31.2px;
    }
    .cm-lp1-01__bubble {
      /* canonical: 2-line = 132×0.52 = 68.6, 3-line = 214×0.52 = 111.3 (fixed heights)
         flex + text wrapper で text は正しく flow、height は fixed → canonical と縦リズム一致
         margin-bottom を残すと 5 個累積して section total が 10px 過剰 → 0 に */
      padding: 0 20px;
      height: auto;
      font-size: 15.6px;
      line-height: 1.6;
      letter-spacing: -0.03em;
      border-width: 1.5px;
      box-shadow:
        3px 2px 0 0 #fff,
        3px 2px 0 1.5px #202020;
      margin-bottom: 0;
      margin-right: 4.5px;
    }
    .cm-lp1-01__bubble--short { height: 68.6px; }
    .cm-lp1-01__bubble--tall  { height: 111.3px; }
    .cm-lp1-01__bubble--sp-only {
      /* PC は display:none、SP でのみ表示。ここは default display の block ではなく
         .cm-lp1-01__bubble の flex を上書きしないよう flex に統一 */
      display: flex;
    }
    /* bubble4 の中央での強制改行 (canonical 3-line 化) */
    .cm-lp1-01__brk-sp { display: inline; }
    .cm-lp1-01__brk-sp::after { content: "\A"; white-space: pre; }
    /* Banner: canonical SP 36px 2 lines → 18.7 @ 390. target height 60.3 (116 × 0.52) */
    .cm-lp1-01__banner {
      font-size: 18.7px;
      width: 100%;
      padding: 5px 15.6px;
      line-height: 1.35;
      letter-spacing: -0.02em;
    }
    .cm-lp1-01__banner-break {
      display: block;
    }
  }
/* END_SECTION:cm-lp1-01-ideal */
/* START_SECTION:cm-lp1-02-reasons (INDEX:17) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* ============================================================
     #02 REASONS
     Figma canonical:
       PC 149:1444 (1100×787)  → viewport 1440, section content 1100
       SP 149:2047 (690×2997) → viewport 390, scale 390/750 = 0.52
     ============================================================ */

  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }


  .cm-lp1-02 {
    color: #202020;
    /* canonical: CTA border-bottom (2900) → #03 top (2981) = 81。上流 +11 drift を吸収して 70 */
    padding: 0 0 70px;
    position: relative;
    overflow: hidden;
  }
  /* SP: section は viewport full (canvas 750 相当)。cards の 15.6 viewport padding は
     container padding-x に移動 → CTA は section 幅一杯で描画可能。 */
  .cm-lp1-02__container {
    /* PC: 1100 fixed = Figma canonical section 幅完全一致、SBS crop も 1100 で canonical に一致 */
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    padding: 79px 0 60px;
    position: relative;
  }
  /* CTA wrap: section 幅一杯 (Figma canonical 149:1901 は canvas full-width 1440)
     .cm-lp1-inter-cta の白 outer は Hero.liquid の共通 CSS。#02 では canonical 準拠のため
     背景色を透過にして grid 背景が透けるようにする */
  .cm-lp1-02__cta-wrap {
    width: 100%;
    /* canonical: cards bottom (2523) → CTA border-top (2603) = 80。
       container padding-bottom 60 + margin 20 = 80 */
    margin: 20px 0 0;
    padding: 0;
    position: relative;
    z-index: 2;
  }
  /* canonical 149:1901: 白 outer + border-t/b #717171 + padding 40 (hero.liquid 共通 CSS と同一)。
     以前の transparent/borderless 上書きは canonical と乖離していたため削除。 */
  .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__panel {
    /* canonical panel h=218 = 40py + lead 25.6 + gap8 + btn 70 + gap8 + note 25.6 + 40py */
    padding: 40px 24px;
  }
  .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__lead {
    /* canonical 16px 1 行 (nowrap) */
    font-size: 16px;
  }
  .cm-lp1-02__lead-brk-sp { display: none; }
  .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__btn-label {
    padding: 10px 56px;
  }
  @media (max-width: 749px) {
    /* SP CTA — actual visible bbox in latest-review.png:
         canonical panel: 336×145 (user 実測)、button: 288×34
         browser: panel 336×160 (+15), button 306×33 (+18 幅)
       → panel height / button width を減らして canonical と一致させる。 */
    /* SP: cta-wrap margin-top override — PC 46px は SP に不要 (canonical gap 40 real 相当)。
       container padding-bottom 40 のみで gap 成立 */
    .cm-lp1-02__cta-wrap {
      margin-top: 0;
    }
    .cm-lp1-02 { padding-bottom: 20px; }
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta {
      /* SP は canonical 上 grid 背景に直接載る (白 outer/border なし) */
      background: transparent;
      border-top: 0;
      border-bottom: 0;
      padding: 0 15.6px 20px;
    }
    /* Panel height: canonical strict-solid 167 review-px / actual visible ~416 review-px、
       browser 78 review-px 過小 → padding-y 復元 + gap 増で canonical に合わせる。
       内訳: lead 2行 + gap + button 34.5 + gap + note + padding both */
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__panel {
      padding: 16px 16px;
      gap: 8px;
    }
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__lead {
      font-size: 15.6px;
      line-height: 1.4;
    }
    .cm-lp1-02__lead-brk-sp { display: inline; }
    .cm-lp1-02__lead-brk-sp::after { content: ""; }
    /* Button: hero.liquid SP override が btn{width:100%} label{flex:1} で 100% 伸長する
       ので #02 では btn=auto、label flex:none にして content-fit → canonical 相当の 288px 幅 */
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__btn {
      width: auto;
    }
    {%- comment -%} client feedback 2026-08-21 (SP CTA responsive): flex: none だと
        利用可能幅 < 文字幅+padding+arrow のときに label が縮まず、はみ出しが左右へ
        均等配分されて overflow: hidden に両端を切られる (矢印の右端が欠ける)。
        1 1 auto + min-width: 0 で label 側だけ縮ませ、arrow は不変にする。
        basis auto = content 幅のため btn { width: auto } の canonical 288px 幅は維持。 {%- endcomment -%}
    {%- comment -%} pre-ads responsive audit 2026-08-21: 横 padding 52px を elastic gutter へ移設。
        仕組みは hero.liquid の ELASTIC GUTTER コメント参照。#02 は 320 でも 1 行に収まるため
        実寸は全幅で不変だが、共通機構として揃えておく。 {%- endcomment -%}
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__btn-label {
      flex: 1 1 auto;
      min-width: 0;
      {%- comment -%} #02 のラベル「リノ研に相談してみる」は 320 でも余白 54px あり折返さないため、
          高さは canonical の 34.5px 固定のまま据え置く (min-height 化すると
          行内容 27.2 + padding 8 = 35.2px となり全幅で +0.69px 高くなってしまう)。 {%- endcomment -%}
      height: 34.5px;
      {%- comment -%} 共通 base (hero.liquid) の min-height: 56px を明示的に打ち消す。
          未指定のままだと base が勝って #02 CTA が全 SP 幅で 34.5 → 56px に膨らむ。 {%- endcomment -%}
      min-height: 34.5px;
      padding: 4px 0;
      font-size: 17px;
    }
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__btn-label::before,
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__btn-label::after { width: 52px; }
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__arrow {
      width: 34.5px;
      height: 34.5px;
      {%- comment -%} 同上 — base の min-height: 56px を打ち消す {%- endcomment -%}
      min-height: 34.5px;
    }
    .cm-lp1-02__cta-wrap .cm-lp1-inter-cta__arrow img {
      width: 34.5px;
      height: 34.5px;
    }
  }

  /* -----------------------------------------
     #02 label — 共通 section-number spec (Poppins italic)
     詳細は SESSION_HANDOVER の意図的 Figma deviation 節を参照
     ----------------------------------------- */
  .cm-lp1-02__number {
    /* Figma canonical 実測 (root PNG): glyph 高さ 79 / glyph left = viewport 181。
       #01 と同値に統一 (canonical は全 section 同一コンポーネント)。container-relative left = 181-170-3 = 8 */
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    color: #202020;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    position: absolute;
    top: 10px;
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 left: 11px は .cm-lp1-02__container (max-width 1100) の左端基準だったため、
        1300 基準の #03〜#08 とは 1440 以外で一致しなかった。共通 rail に載せ替える。
        containing block は container の padding box (viewport 中央にセンタリング) なので
        calc(50% - 50vw + …) は #01 や #03〜#08 と同一の viewport x を返す。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0;
    z-index: 3;
  }

  /* -----------------------------------------
     REASONS background decoration
     PC canonical (149:1322 = PC Design canvas-level, section frame 149:1444 の外側):
       x=1424 y=1766 w=242 h=750、rotate 90、font Helvetica Bold 151.448 #eee
       section 内実装のため section-relative 位置に変換:
         section canvas x=170 y=1736 → deco section-x = 1424-170 = 1254
         section-y = 1766-1736 = 30
     SP canonical (149:2049/2052): rotate 90, section-x=636 y=7.47 in 750-canvas, font 151.448 #eee */
  .cm-lp1-02__deco {
    /* PC canonical (149:1322 canvas-level): position section-x = canvas 1424 - section-left 170 = 1254
       Section is direct parent (position: relative). REASONS is at section right area (past container)
       writing-mode: vertical-rl で rotate-90 相当。section overflow:hidden で右端はみ出しをクリップ */
    display: block;
    position: absolute;
    /* canonical 実測 (root PNG): 列幅 242 (= 151.448 × lh1.6)、右端は frame 右端で clip、
       glyph 縦域 y1749-2602 (853) ← letter-spacing で伸びている */
    left: 1197px;
    top: 10px; /* canonical glyph top = section+12.5 */
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 151.448px;
    line-height: 1.6;
    letter-spacing: 0.11em;
    color: #eeeeee;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }

  /* -----------------------------------------
     Title heading — 「リノ研に相談する 3 つ の理由」
     PC canonical (149:1447): 1 行 flex, w-1100 text-center, tracking -4.8
       - リノ研に相談する: YuGothic Bold 60px, h-75
       - 3: YuGothic Bold #ff6030 90px
       - つ: YuGothic Bold #ff6030 60px
       - の理由: YuGothic Bold 60px
     ----------------------------------------- */
  section.cm-lp1-02 h2.cm-lp1-02__heading {
    /* base.css の h2 rule (font-size 24px, line-height 1.3) を上書きするため
       specificity を section > h2.class に上げる。!important は margin 干渉するので不使用 */
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 0 104px;
    padding: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.08em;
    color: #202020;
    white-space: nowrap;
  }
  .cm-lp1-02__heading-lead,
  .cm-lp1-02__heading-tail {
    font-size: 60px;
    line-height: 1.4;
  }
  {%- comment -%} client feedback 2026-08-14: オレンジ見出しは fill #F0552B + 黒縁取り (stroke = 1em/22) {%- endcomment -%}
  .cm-lp1-02__heading-num {
    font-size: 90px;
    line-height: 1;
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
    padding: 0 6px;
  }
  .cm-lp1-02__heading-cnt {
    font-size: 60px;
    line-height: 1;
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
    padding-right: 6px;
  }

  /* -----------------------------------------
     Cards — 3 個横並び (PC)
     PC (149:1451): 3 cards gap-16, each 356 wide (total 356*3 + 16*2 = 1100)
     ----------------------------------------- */
  .cm-lp1-02__cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    {%- comment -%} P0 修正 (2026-08-15): 旧 `repeat(3, 356px)` は 356×3 + gap16×2 = 1100px の固定幅で、
        親 .cm-lp1-02__container は width:1100px / max-width:100% のため 1100px 未満の viewport で
        container だけが縮み、grid は 1100px のままはみ出していた。section の overflow:hidden が
        それを切り落とすため、750〜1099px でカード 1 と 3 が左右に実切断されていた
        (実測: 800px で各側 150px = カード幅の 42%、900px で 100px、1024px で 38px。
         見出し・本文が文字単位で欠落し可読性を失う P0 欠損)。
        auto-fit + minmax(300px, 356px) にすると、track 数は max 側 (356px) を基準に自動決定され、
        カード幅は常に canonical の 356px を保ったまま 3 → 2 → 1 段へ折り返す。
          viewport >= 1100 : 3 列 × 356px (canonical と完全同一。実測 section 高さ 1244.2px も不変)
          760 〜 1099      : 2 列 × 356px
          750 〜 759       : 1 列 × 356px
        カードを縮めない方式にしたのは、356px は card-heading の letter-spacing 調整が
        「292px content 幅で 1 行」に合わせて作られており、幅を縮めると折返しが崩れるため。 {%- endcomment -%}
    grid-template-columns: repeat(auto-fit, minmax(300px, 356px));
    gap: 16px;
    justify-content: center;
    isolation: isolate;
  }
  {%- comment -%} 中間幅のみ、カードが viewport 端に密着しないよう gutter を確保する。
      __cards は width:auto のブロックなので padding は内側に効き、横スクロールは発生しない。
      1100px 以上では padding 0 のまま = PC canonical を 1px も動かさない。
      card-heading の height:130px は固定値のため、万一 3 行以上に折り返した場合に
      イラストへ被る。中間幅でのみ min-height へ緩めて保険をかける (PC/SP は未変更)。 {%- endcomment -%}
  @media (min-width: 750px) and (max-width: 1099px) {
    .cm-lp1-02__cards {
      padding-left: 16px;
      padding-right: 16px;
    }
    .cm-lp1-02__card-heading {
      height: auto;
      min-height: 130px;
    }
  }
  .cm-lp1-02__card {
    position: relative;
    background: #fff;
    border: 1px solid #202020;
    border-radius: 5px;
    padding: 32px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
  }

  /* Badge: absolute top-center, 51.6 × 53.535
     NOTE: transform:translateX(-50%) で center すると motion.js の "is-in{transform:none}"
     が上書きして center が破綻する。margin-left で center を実現し transform を motion 専用にする */
  .cm-lp1-02__badge {
    position: absolute;
    top: -28px;
    left: 50%;
    margin-left: -25.8px; /* = -width/2 */
    width: 51.6px;
    height: 53.535px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 2;
  }
  .cm-lp1-02__badge-point {
    height: 13.545px;
    background: #202020;
    color: #fff;
    border: 0.645px solid #000;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 10.32px;
    line-height: 1;
    letter-spacing: 0;
    box-sizing: border-box;
  }
  .cm-lp1-02__badge-num {
    height: 41.925px;
    background: #dbdbdb;
    color: #FF6030;
    border: 0.645px solid #000;
    border-radius: 0 0 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 25.8px;
    line-height: 1;
    letter-spacing: 0;
    box-sizing: border-box;
  }

  /* Card top area: heading + illustration + border-b */
  .cm-lp1-02__card-top {
    padding: 0 32px 15px;
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cm-lp1-02__card-heading {
    margin: 0;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 28px; /* Figma canonical 149:1457 exact */
    line-height: 1.4;
    /* Card 02 heading 11 chars "物件探しから工事まで、" が 292px content width 内で 1 行に収まるよう
       aggressive letter-spacing。Chromium fallback font (YuGothic 未 install 環境) の字幅補正 */
    letter-spacing: -0.08em;
    color: #202020;
  }
  .cm-lp1-02__card-heading-line {
    display: block;
  }
  .cm-lp1-02__card-heading b {
    color: #FF6030;
    font-weight: 700;
  }
  .cm-lp1-02__card-illust {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 148px;
  }
  .cm-lp1-02__card-illust img {
    display: block;
    width: 222px;
    height: 148px;
    max-width: 100%;
    object-fit: contain;
  }

  /* Card body text */
  .cm-lp1-02__card-body {
    margin: 0;
    padding: 0 32px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: #202020;
    text-align: justify;
  }

  /* -----------------------------------------
     SP (749 以下) — Figma canonical (149:2047)
     viewport 390, scale 390/750 = 0.52
     section 690 wide inside 750 (30 padding each side)
     ----------------------------------------- */
  @media (max-width: 749px) {
    .cm-lp1-02__container {
      /* SP: container = viewport full (390) but with viewport padding for cards area (15.6 each side)
         canvas 30 margin × 0.52 と cards 26 padding の合計 (41.6 各側)、cards content-box = 306.8
         padding-top: canonical では #02 label (h=139 canvas × 0.52 = 72.5) 直後に heading。
         label は absolute で flow に含まれないが、canonical では inner 開始 y=139.47 → 72.5 browser。
         container padding-top 72.5 で canonical と heading top 位置一致。 */
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 72.5px 41.6px 40px;
      box-sizing: border-box;
    }
    .cm-lp1-02__cards {
      /* container padding-x で card 幅は既に確定 → cards 自体は padding 不要 */
      padding: 0;
    }
    .cm-lp1-02__number {
      {%- comment -%} 統一 SP spec: font-size 52px。水平位置は共通 rail (--cm-lp1-num-x) が
          media query 無しで担うため、旧 left: 24.4px の上書きは廃止した
          (rail が 390 で 24.4 を返す)。縦位置 top のみ SP 固有。
          なお containing block は .cm-lp1-02__container の padding box (SP は viewport 全幅 /
          padding-left 41.6px は内側) なので、rail の 50% は clientWidth/2 に一致する。 {%- endcomment -%}
      font-size: 52px;  /* canonical digits 100u × 0.52 */
      top: 12px;
    }
    .cm-lp1-02__deco {
      /* SP canonical (149:2049/2052): REASONS 縦書き 右端に配置。
         font-size 100 は canonical より 33% 大 (browser 200 vs canonical 150 review-px per glyph)。
         canonical 相当に縮める: 100 × 0.75 = 75px。 */
      display: block;
      position: absolute;
      top: 5px;
      left: auto;
      right: 0;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      font-weight: 700;
      font-size: 75px;
      line-height: 1;
      letter-spacing: 0;
      color: #eeeeee;
      white-space: nowrap;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }

    /* Title:
       Figma SP (149:2055): flex-col items-center
         Line 1 リノ研に相談する: YuGothic Bold 60px lh 1.4 tracking -4.8 (=-0.08em)
         Line 2 (149:2058): flex gap-10 items-end
           3: YuGothic Bold 90px orange (leading-none = lh 1)
           つ: YuGothic Bold 60px orange (leading-none = lh 1)
           の理由: YuGothic Bold 60px (leading-none)
       SP scale: 60→31.2, 90→46.8, gap 10→5.2, tracking -4.8→-0.08em */
    section.cm-lp1-02 h2.cm-lp1-02__heading {
      /* SP heading canonical: 2 行、margin-bottom canonical 80 canvas × 0.52 = 41.6 */
      margin: 0 0 41.6px;
      display: block;
      font-size: 31.2px; /* line 1 の base font-size (spans が個別 override) */
      line-height: 1.4;
      letter-spacing: -0.08em;
    }
    .cm-lp1-02__heading-lead {
      font-size: 31.2px;
      display: block;
      line-height: 1.4;
    }
    .cm-lp1-02__heading-num {
      font-size: 46.8px;
      line-height: 1;
      padding: 0;
    }
    .cm-lp1-02__heading-cnt {
      font-size: 31.2px;
      line-height: 1;
      padding: 0 5.2px 0 0; /* canonical gap-10 → 5.2 browser between spans */
    }
    .cm-lp1-02__heading-tail {
      font-size: 31.2px;
      line-height: 1;
    }

    /* Cards (SP canonical 149:2063/2099/2136 all identical spec):
       - py-48 = 25 browser, gap-48 = 25 browser
       - Content wrapper (149:2069) gap-24 = 12.5 browser
       - Title area (149:2070) border-b 1.5, pb-22.5, px-48, gap-15
       - Heading fixed h-195 = 101.4 browser, font 42 = 21.84 browser, lh 1.4
       - Illust 333×222 = 173×115.4 browser
       - Body text font 30 = 15.6 browser, lh 1.6 */
    .cm-lp1-02__cards {
      grid-template-columns: 1fr;
      /* SP canonical: card 間 gap = 80 canvas × 0.52 = 41.6 browser */
      gap: 41.6px;
      max-width: 100%;
    }
    .cm-lp1-02__card {
      /* SP canonical: py-48 = 25、content gap-24 = 12.5 (canvas × 0.52) */
      padding: 25px 0;
      gap: 12.5px;
      border-radius: 4px;
      border-width: 1.5px;
    }
    .cm-lp1-02__badge {
      /* SP badge canonical: 77.4 × 80.3 canvas → 40.2 × 41.8 browser */
      width: 40.2px;
      height: 41.8px;
      top: -21px;
      margin-left: -20.1px; /* SP centering: -width/2 */
      border-radius: 4px;
    }
    .cm-lp1-02__badge-point {
      height: 10.6px;
      font-size: 8.05px;
    }
    .cm-lp1-02__badge-num {
      height: 32.7px;
      font-size: 20.1px;
      border-radius: 0 0 4px 4px;
    }
    .cm-lp1-02__card-top {
      padding: 0 25px 11.7px;
      gap: 7.8px;
      border-bottom-width: 1.5px;
    }
    .cm-lp1-02__card-heading {
      /* Canonical fixed h-195 → 101.4 browser, font 42 canvas → 21.84 browser */
      height: 101.4px;
      font-size: 21.84px;
      line-height: 1.4;
    }
    .cm-lp1-02__card-illust {
      height: 115.4px;
    }
    .cm-lp1-02__card-illust img {
      width: 173px;
      height: 115.4px;
    }
    .cm-lp1-02__card-body {
      padding: 0 25px;
      /* Canonical body font 30 canvas → 15.6 browser, lh 1.6 */
      font-size: 15.6px;
      line-height: 1.6;
    }
  }
/* END_SECTION:cm-lp1-02-reasons */
/* START_SECTION:cm-lp1-03-case (INDEX:18) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* Shared mid-CTA wrapper (used by #03, #04, #05, #07 to host the canvas-level mid-CTAs).
     Follows same pattern as #02 close-out: transparent outer, canonical-scale panel + button. */
  .cm-lp1-mid-cta-wrap {
    width: 100%;
    margin: 46px 0 0;
    padding: 0;
    position: relative;
    z-index: 2;
  }
  /* #03-scoped: canvas gap #03-end → CTA-start = 108px PC / 124px SP */
  .cm-lp1-03 + .cm-lp1-mid-cta-wrap,
  .cm-lp1-03 .cm-lp1-mid-cta-wrap,
  .cm-lp1-03__cta-wrap.cm-lp1-mid-cta-wrap {
    /* canonical 実測: RENOVATION band 下端 (5117) → CTA border-top (5119) ≈ 0 */
    margin-top: 0;
  }
  /* canonical (149:1901 系 CTA component): 白 outer 全幅 + border-t/b #717171 + padding 40、
     panel は 1072 上限で h218 (40py + lead + gap8 + btn70 + gap8 + note + 40py) */
  .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta {
    background: #fff;
    border-top: 1px solid #717171;
    border-bottom: 1px solid #717171;
    padding: 40px 30px;
    max-width: none;
    margin: 0 auto;
  }
  .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__panel {
    padding: 40px 24px;
    max-width: 1072px;
    margin: 0 auto;
  }
  .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label {
    padding: 12px 56px;
  }
  .cm-lp1-mid-cta-brk-sp { display: none; }
  @media (max-width: 749px) {
    .cm-lp1-mid-cta-wrap { margin-top: 0; }
    /* #03-scoped: SP canvas gap 124 × 0.52 = 65 */
    /* SP canvas gap #03-end → CTA-start = 124 × 0.52 = 65 */
    /* SP: RENOVATION 切り欠き → CTA の間延び防止 (65→32)。
       さらに #05→#06 と同じ細い区切り線システム (白帯 + #717171 上下 border) を適用し、
       「セクション終了 → CTA 帯 → 次セクション」として意図的に読めるようにする */
    .cm-lp1-03 + .cm-lp1-mid-cta-wrap,
    .cm-lp1-03 .cm-lp1-mid-cta-wrap,
    {%- comment -%} pre-ads responsive audit 2026-08-21 — client 指摘「RENOVATION の下に大きな空白」。
        root cause: RENOVATION 装飾は vw ベース (band 22.27vw / text 20vw) で幅に比例して縮むのに、
        その下の余白は **固定 px** だった。
          グリフ下端 → CTA パネル上端 = margin-top 32 + inter-cta padding-top 30 + border 1
          = 実測 63.5px で 320〜430 すべて同一。
        一方グリフ実測高は 320:40.5 / 360:45.5 / 375:47.5 / 390:50.0 / 430:56.0 と縮むため、
        余白/装飾比が 320 で 1.57 倍、430 で 1.13 倍となり、狭い端末ほど「穴」に見えていた。
        対策: この 2 値を装飾と同じ vw 基準にして連動させる。
        390px でちょうど従来値 (32 / 30) に一致する係数なので **390 以上は実寸不変**。
        320 実測見込み: 26.2 + 24.6 + 1 = 51.8px (グリフ縮小率 0.81 とほぼ一致)。 {%- endcomment -%}
    {%- comment -%} RENOVATION 罫線アライメント — client 目視 FB 2026-08-21 (4th)。
        論点は「赤文字 → CTA 黒パネル」ではなく **「赤文字 → 直下の黒い横罫線」** の距離。
        罫線の実体は下の .cm-lp1-inter-cta の border-top (#717171)。
        実測 (グリフ実ピクセル下端 → 罫線上端):
          PC 1440 = 0.5px (比 0.01)  ← 文字と罫線が一体の装飾として見える canonical
          SP  430 = 32.5 / 390 = 32.5 / 375 = 29.5 / 360 = 26.5 / 320 = 17.5px (比 0.43〜0.65)
        原因は PC 側が margin-top: 0 (canonical「band 下端 → CTA border-top ≈ 0」) なのに対し、
        SP だけ cta-wrap に margin-top が入っており、その分そのまま罫線が下へ落ちていたこと。
        グリフは全幅で band 下端ぴったりに切られている (ink→band 下端 0.2〜1.2px) ので、
        この margin がそのまま「文字が浮いて見える」白になっていた。
        対策: SP も PC と同じ margin-top: 0 にして罫線をグリフへ密着させ、
        取り除いた分を **同じ要素の padding-top へ移し替える**。
        これにより罫線だけが上がり、**CTA パネルの位置は全幅で 1px も動かない**。
          新 padding-top = 旧 margin-top + 旧 padding-top
            = (21.43vw − 51.6) + (20vw − 48) = 41.43vw − 99.6  … 390 以上は 32 + 30 = 62px
        CTA の幅・高さ・lead・button・arrow/divider・elastic gutter は一切触っていない。 {%- endcomment -%}
    .cm-lp1-03__cta-wrap.cm-lp1-mid-cta-wrap { margin-top: 0; }
    .cm-lp1-03__cta-wrap.cm-lp1-mid-cta-wrap .cm-lp1-inter-cta {
      background: #fff;
      border-top: 1px solid #717171;
      border-bottom: 1px solid #717171;
      padding: min(62px, calc(41.43vw - 99.6px)) 15px 30px;
    }
    /* SP CTA canonical (149:2551): panel 690×~200 with black bg, lime btn 640×80 相当
       0.52 scale: panel content full-width (358.8), btn 250-280 wide */
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta { padding: 0 0 24px; background: transparent; border-top: 0; border-bottom: 0; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__panel { padding: 24px 20px 20px; gap: 12px; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__lead { font-size: 16px; line-height: 1.5; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn { width: auto; }
    {%- comment -%} client feedback 2026-08-21 (SP CTA responsive) — #03/#04/#05/#07 共通。
        flex: none だと利用可能幅 < 文字幅+padding+arrow のとき label が縮まず、
        はみ出しが左右均等に配分されて overflow: hidden に両端を切られる
        (実測 #07 @390 で矢印チップ右端 10.5px 欠け)。
        1 1 auto + min-width: 0 で label の広い横 padding が先に潰れ、
        arrow 42px は全幅で不変 → divider は常に btn 右端 −42px。
        basis auto = content 幅なので btn { width: auto } のフィット幅は従来どおり。 {%- endcomment -%}
    {%- comment -%} pre-ads responsive audit 2026-08-21: 横 padding 40px を elastic gutter へ移設 +
        height → min-height。仕組みは hero.liquid の ELASTIC GUTTER コメント参照。
        #07 は 320 で text が 5.5px 刈られていたが、gutter が先に潰れて 2 行へ自然折返しする。 {%- endcomment -%}
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label { flex: 1 1 auto; min-width: 0; min-height: 42px; height: auto; padding: 6px 0; font-size: 15px; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label::before,
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label::after { width: 40px; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__arrow { width: 42px; min-height: 42px; height: auto; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__arrow img { width: 42px; height: 42px; }
    .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__note { font-size: 12px; }
    .cm-lp1-mid-cta-brk-sp { display: inline; }
    /* #03 SP CTA canonical (149:2553): lead 588×45 = SINGLE LINE. Suppress the SP break for this section only. */
    .cm-lp1-03__cta-wrap .cm-lp1-mid-cta-brk-sp { display: none; }
    /* #03 SP CTA: label が長く 15px+padding40 では arrow が押し出されて不可視になる。
       canonical (149:2551) 相当に縮めて lime arrow 42×42 を確実に表示する */
    .cm-lp1-03__cta-wrap .cm-lp1-inter-cta__lead { font-size: 14px; }
    /* lead 21 文字×14px=294 が panel 内幅に収まるよう横 padding を 20→14 (canonical は 1 行) */
    .cm-lp1-03__cta-wrap.cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__panel { padding: 24px 14px 20px; }
    {%- comment -%} pre-ads: 横 padding 16px は elastic gutter の basis へ (縦 padding のみ残す) {%- endcomment -%}
    .cm-lp1-03__cta-wrap .cm-lp1-inter-cta__btn-label { padding: 6px 0; font-size: 14px; }
    .cm-lp1-03__cta-wrap .cm-lp1-inter-cta__btn-label::before,
    .cm-lp1-03__cta-wrap .cm-lp1-inter-cta__btn-label::after { width: 16px; }
  }
  /* Figma実測: 50x50px のうっすらしたグラフ用紙グリッド背景 (bg #fbfbfb / line #e6e6e6, 50px間隔で実測確認済み) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }

  .cm-lp1-03 {
    color: #202020;
    /* canonical: number glyph = section top+26 */
    padding: 8px 16px 20px;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
  }
  /* Figma canonical PC (149:1555 base, 149:1556 back):
     back SVG は逆V字型 polygon: path M0 0 L717 205 L1440 0 V1147 H0 V0 Z
     → shape の 上端は (center, 205) で V-apex、その線より上は SVG 透明で GRID 通過
     → その線より下は WHITE fill で下面を隠す
     canonical intent: cards背面〜dots〜V apex までは GRID、V境界より下だけ WHITE plain
     実装: pseudo に clip-path polygon で inverted-V shape を切り出し、fill white。
     V apex 位置は canonical (center, 205px @ 1440 canvas) = 14.24vw を採用 → viewport 幅に比例して scale */
  .cm-lp1-03::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* canonical Rectangle 30 上端 y=785 canvas relative sec03 = 820 CSS 相当 (browser section 2538 / canvas 2437 補正).
       V apex at top+205px (14.24vw @ 1440) → cost lead 直前で GRID → WHITE 面転換。
       cards + dots はこの V-notch 三角 (透明) 領域内に visible → 背景 GRID のまま描画。
       SVG bg も同時 overlay: canonical grey #717171 seam を V-line に visible にする (Rectangle 30 の 1px top edge)。 */
    top: 820px;
    height: calc(100% - 820px + 40px);
    background-color: #ffffff;
    background-image: var(--cm-lp1-03-bg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    clip-path: polygon(0 0, 50% 14.24vw, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 50% 14.24vw, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
    pointer-events: none;
  }
  .cm-lp1-03__container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* #03 label */
  .cm-lp1-03__number {
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    color: #202020;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 padding-left: 8.54% は .cm-lp1-0X__container (max-width 1300) 幅に対する % で、
        1100 基準の #01/#02 とは 1440 以外で一致しなかった (750-1439 で 3 系統に分裂)。
        containing block は container の content box (viewport 中央にセンタリング) なので、
        padding-left に同じ式を入れれば #01/#02 と同一の viewport x になる。
        padding-left は box の右端を動かさないため、横スクロール / clip / section 高さへの
        影響はゼロ。SP media query 側の padding-left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    padding-left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0; /* canonical: number 直後に heading zone が続く */
  }

  /* Heading */
  .cm-lp1-03__heading-wrap {
    position: relative;
    text-align: center;
    padding: 20px 0 24px;
    margin-bottom: 32px;
  }
  /* CASE STUDY 巨大装飾テキスト
     Figma canonical PC (149:1564): x=62 y=185.6 (Frame89 内, canvas y≒265 相対) w=977 h=242
       font Helvetica Bold 151.448px, fill #EEEEEE, 1-line centered, cards area 背後に配置
     Figma canonical SP (149:2181): x=-30 y=-14 (section top を 14px overhang) w=750 h=244
       font Helvetica Bold 151.448px, fill #EEEEEE, 2-line stacked (CASE / STUDY)
     配置は section 直下 (absolute) — heading-wrap 内ではなく background 層として */
  .cm-lp1-03__deco {
    position: absolute;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    color: #EEEEEE;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0;
    margin: 0;
  }
  /* PC: canonical CASE STUDY at canvas y=265 within sec03, sitting behind top of cards row.
     Section padding-top 40 + #03 label (~82+24) + heading-wrap (~124) + chips (~72) = ~342px → cards area start.
     Position CASE STUDY overlapping top of cards for canonical visual anchor effect. */
  .cm-lp1-03__deco--pc {
    left: 50%;
    transform: translateX(-50%);
    top: 340px;
    width: 977px;
    max-width: 100%;
    font-size: clamp(90px, 10.5vw, 151.448px);
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
  }
  .cm-lp1-03__deco--sp { display: none; }
  @media (max-width: 749px) {
    .cm-lp1-03__deco--pc { display: none; }
    /* SP: canonical y=-14 (section top 14px overhang), w=750 全幅超え, 2-line stacked
       canonical 151.448 canvas @ 750 = 20.19vw ≒ 78 CSS px、Arial 補正で 22vw で canonical Helvetica visual weight 相当
       CASE line-height 1.6 (h ≒ 128px) + STUDY line-height 1.0 (h ≒ 78px) = 総 206px 背景支配 */
    .cm-lp1-03__deco--sp {
      display: block;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      max-width: none;
      font-size: 22vw;
      line-height: 1.05;
      text-align: center;
      color: #EEEEEE;
    }
    .cm-lp1-03__deco--sp span {
      display: block;
      letter-spacing: 0;
    }
    .cm-lp1-03__deco--sp span:first-child { line-height: 1.6; }
    .cm-lp1-03__deco--sp span:last-child  { line-height: 1; }
  }
  /* ===== Editorial kicker — Figma Component 7 (52:6800系, PC 277×59 / SP 208×44) =====
     .mo-tag (motion.css) の罫線+縦tickをベースに、canonical へ拡張。
     motion.css は section bundle より後に読まれるため、同一詳細度で負けないよう
     .mo-tag との複合セレクタで上書きする */
  .mo-tag.cm-lp1-kicker {
    background-color: #fff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 8px 20px;
    min-width: 277px;
    text-align: center;
  }
  .mo-tag.cm-lp1-kicker::before,
  .mo-tag.cm-lp1-kicker::after {
    top: -9px;
    bottom: -10px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): kicker の縦終端線の位置。
      canonical (Component 7 = 149:1785、PC #03-#08 の 6 箇所すべてで同一と実測確認済み) は
      縦線が横罫の端ではなく内側に立つ: 左 inset 2.89% (=8px) / 右 3.61% (=10px)。
      実装は両端フラッシュ (left:0 / right:0) で「閉じた長方形」に見えていたため bracket 形状へ戻す。
      横罫の太さ (canonical 2px / 実装 1px) は [data-mo="draw"] が background-size:100% 1px で
      描いており motion 仕様と不可分なので今回は変更しない。上下の突出 (-9/-10px) は canonical 一致済み。
      .mo-tag 基底は motion.css 側。ここでは section CSS でのみ上書きする。 {%- endcomment -%}
  .mo-tag.cm-lp1-kicker::before { left: 8px; }
  .mo-tag.cm-lp1-kicker::after  { right: 10px; }

  /* リノベーション施工事例 tag — canonical (149:1567 Component 7) */
  .cm-lp1-03__tag {
    position: relative;
    z-index: 1;
  }
  .cm-lp1-03__heading {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    {%- comment -%} forensic QA Phase 2: canonical は見出しも YuGothic Bold (149:1568 #03 / 149:1788 #06 / 149:1840 #07 で確認)。
        font-family 未宣言でテーマ既定の Noto Sans JP に落ちていた宣言漏れを解消 (実測でレイアウト影響 0)。
        client 指定の orange outline は別セレクタなので影響しない。 {%- endcomment -%}
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    {%- comment -%} canonical 149:1568 = YuGothic Bold 60px / leading 1.2。旧コメントの PC 72px は誤り {%- endcomment -%}
    font-size: clamp(28px, 4.167vw, 60px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
  }
  .cm-lp1-03__heading-l1,
  .cm-lp1-03__heading-l2 { display: inline; }
  {%- comment -%} client feedback 2026-08-14: オレンジ見出しは fill #F0552B + 黒縁取り (stroke = 1em/22)。
      「。」は黒のままなので orange span にだけ適用する {%- endcomment -%}
  .cm-lp1-03__heading-orange {
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
  }
  @media (max-width: 749px) {
    .cm-lp1-03__heading-l1,
    .cm-lp1-03__heading-l2 { display: block; }
  }

  /* Plan chips — Figma canonical (149:1574 PC / 149:2194 SP)
     Structure: each chip = colored header bar (label) + white body (note)
     Chip 1: lime #d4fe16, black text.  Chip 2: orange #ff6030, WHITE text.
     PC: 2 chips side-by-side (gap 10), each row = [label bar | white desc box]
     SP: 2 chips stacked, each column = [label bar h=60] / [white desc box] */
  .cm-lp1-03__chips {
    list-style: none;
    padding: 0;
    margin: 0 auto 32px;
    display: flex;
    gap: 10px;
    max-width: 950px;
    align-items: flex-start;
  }
  /* Figma canonical (149:2195 SP): chip = color header bg + white body bg, no outer border */
  .cm-lp1-03__chip {
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 0;
    border-radius: 0;
    overflow: hidden;
  }
  .cm-lp1-03__chip-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 40px;
  }
  .cm-lp1-03__chip--realistic .cm-lp1-03__chip-label { background: #D4FE16; color: #202020; }
  .cm-lp1-03__chip--premium .cm-lp1-03__chip-label { background: #FF6030; color: #ffffff; }
  .cm-lp1-03__chip-note {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    background: #ffffff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #202020;
    flex: 1 1 auto;
    text-align: left;
  }

  /* Carousel wrapper — Figma canonical Frame 100 (149:1586) 1440 wide.
     Cards Frame 98 at x=180. Arrows absolute at prev x=145, next x=1235.
     Visible viewport = 1440 → state 0 shows card1 (180-709) + card2 (733-1262) full + card3 partial (1286-1440 = 154px peek).
     Implementation: BREAK OUT of .cm-lp1-03__container (max 1300) to get full 1440 canvas viewport for carousel. */
  .cm-lp1-03__cards-wrap {
    position: relative;
    padding: 0;
    width: min(100vw, 1440px);
    left: 50%;
    transform: translateX(-50%);
    /* CSS var for canonical carousel step */
    --cm-lp1-03-card-w: 529px;
    --cm-lp1-03-gap: 24px;
    --cm-lp1-03-step: calc(var(--cm-lp1-03-card-w) + var(--cm-lp1-03-gap));
  }
  /* Case cards viewport: shows 2 full cards + partial 3rd, no scrollbar */
  .cm-lp1-03__cards-scroll {
    margin: 0 0 24px;
    overflow: hidden;
    padding: 30px 0 30px 180px; /* pl 180 = canonical Frame 98 offset */
  }
  /* PC Arrows — Figma canonical (149:1600 next / 149:1604 prev) w=62 h=62 circles.
     Positioned within Frame 100 (1440 wide) at prev l=145, next l=1235.
     Y=221 which is ~ centered on cards (504/2=252, top 40 padding = 262 mid). Use top 50% for responsive. */
  .cm-lp1-03__cards-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 62px;
    height: 62px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 3;
    transition: opacity 220ms ease;
  }
  .cm-lp1-03__cards-arrow svg { width: 100%; height: 100%; display: block; }
  .cm-lp1-03__cards-arrow--prev { left: 145px; }
  .cm-lp1-03__cards-arrow--next { left: 1235px; }
  /* canonical: 端 state でも arrow は黒+lime のまま (グレーアウトなし)。機能上の disabled は維持 */
  .cm-lp1-03__cards-arrow[disabled] { opacity: 1; cursor: default; }
  .cm-lp1-03__cards-arrow:hover:not([disabled]) { opacity: 0.85; }
  /* Fallback for narrower viewports (< 1440px page) — clamp arrows inside container */
  @media (max-width: 1439px) {
    .cm-lp1-03__cards-arrow--prev { left: 10px; }
    .cm-lp1-03__cards-arrow--next { left: auto; right: 10px; }
    .cm-lp1-03__cards-scroll { padding: 30px 0 30px 80px; }
  }
  /* PC Dots — Figma canonical (149:1595) w=1082 gap=14, 4 dots 19×19.
     Active (149:1596): solid #202020 (no border).
     Inactive (149:1597-1599): white bg + 4px solid #202020 border. */
  .cm-lp1-03__cards-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 12px 0 24px;
  }
  /* テーマ側 `#cm_adjust button { background-color: transparent }` (ID 詳細度) に
     dot の塗りが負けるため、#cm_adjust 前置きセレクタを併記して上書きする */
  .cm-lp1-03__cards-dots button,
  #cm_adjust .cm-lp1-03__cards-dots button {
    width: 19px;
    height: 19px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #202020;
    border-radius: 1px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 180ms ease;
  }
  .cm-lp1-03__cards-dots button[aria-selected="true"],
  #cm_adjust .cm-lp1-03__cards-dots button[aria-selected="true"] { background-color: #202020; border-color: #202020; }
  .cm-lp1-03__cards-dots button:hover:not([aria-selected="true"]),
  #cm_adjust .cm-lp1-03__cards-dots button:hover:not([aria-selected="true"]) { background-color: #f0f0f0; }
  .cm-lp1-03__cards {
    /* Figma canonical PC: Group 17-20 x=0/553/1106/1659/2212 w=529, gap 24. Track = 529×5 + 24×4 = 2741 wide.
       Carousel viewport = ~1080 wide (visible ~2 cards + partial 3rd), translateX steps by 553px per state. */
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .cm-lp1-03__cards > li {
    flex: 0 0 auto;
    width: 529px;
  }
  /* Card rebuilt v5 — Figma canonical (Group 17-20 PC 529×504, Group 21-25 SP 625×702)
     Structure: title chip (top-left overhang) + avatar circle (top-right overhang) +
                2-photo grid (before/after) + price+plan row (horizontal) + tags row + description
     Dark plate (drop-shadow effect): canonical PC 6px right + 7px bottom, SP 7px right + 9px bottom */
  .cm-lp1-03__card {
    background: #ffffff;
    border: 1px solid #202020;
    border-radius: 5px;
    padding: 40px 30px 30px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    /* canonical dark plate BEHIND card, visible on right+bottom only */
    box-shadow: 6px 7px 0 0 #202020;
    /* Ensure card wrapper hosts absolute children (title chip / avatar overhang) */
    margin-top: 24px; /* room for title chip overhang top -24 */
    margin-right: 6px; /* room for shadow */
    margin-bottom: 7px;
  }
  /* Title chip — Figma canonical: bg #202020, white text YuGothic Bold 16px, rounded 5, padding 10/20, top -24 left 29 */
  .cm-lp1-03__card-title {
    position: absolute;
    top: -24px;
    left: 29px;
    background: #202020;
    color: #ffffff;
    padding: 10px 20px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid #202020;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 2;
  }
  /* Avatar — Figma canonical PC: 72×72 at (400, 0) = top right overhang. SP: 103.68→~54 CSS px */
  .cm-lp1-03__card-avatar {
    position: absolute;
    top: -10px;
    right: 30px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #202020;
    z-index: 3;
  }
  .cm-lp1-03__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 2-photo grid — canonical PC: each 222×189 (aspect 222/189 = 1.175), gap 8 */
  .cm-lp1-03__card-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
  }
  .cm-lp1-03__card-photos img {
    width: 100%;
    height: auto;
    aspect-ratio: 222 / 189;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }
  /* Price+plan row — canonical: HORIZONTAL, Helvetica Bold 32px + 万円 16px + plan chip inline */
  .cm-lp1-03__card-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cm-lp1-03__card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #202020;
    line-height: 1;
  }
  .cm-lp1-03__card-price b {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    margin-right: 2px;
    color: #202020;
  }
  /* Plan chip — canonical: 4-corner square (no radius), Helvetica Bold 16px, padding 0/20 */
  .cm-lp1-03__card-plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 20px;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 0;
  }
  .cm-lp1-03__card-plan--realistic { background: #D4FE16; color: #202020; }
  .cm-lp1-03__card-plan--premium   { background: #FF6030; color: #ffffff; }
  /* Tags — canonical: WHITE bg + 1px BLACK border, YuGothic Medium 12px, padding 5/10, NO radius */
  .cm-lp1-03__card-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cm-lp1-03__card-tags li {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #ffffff;
    color: #202020;
    border: 1px solid #202020;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6;
    border-radius: 0;
  }
  /* Desc — canonical: YuGothic Medium 16px, line-height 1.6 */
  .cm-lp1-03__card-desc {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.7;
    color: #202020;
  }

  /* Cost lead paragraph — Figma canonical (149:1612): YuGothic Medium 24px lh1.6、bold は黒 (オレンジではない) */
  .cm-lp1-03__cost-lead {
    max-width: 1060px;
    margin: 20px auto 24px;
    font-size: clamp(15px, 1.67vw, 24px);
    line-height: 1.6;
    letter-spacing: 0.01em;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: 500;
    padding: 0 30px;
    color: #202020;
  }
  .cm-lp1-03__cost-lead b { font-weight: 700; color: #202020; }

  /* ===============================================================
     Cost Model — canonical rebuild (Figma 149:1608 PC / 149:2362 SP)
     Container: 1100 wide, padding 40, flex column gap 32
     ===============================================================*/
  .cm-lp1-03__cost {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 32px 0;
    max-width: 1100px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  /* 費用モデルケース pill — canonical (149:1613/1614): bg-white + border 1 black, padding 30/10, Helvetica Bold 24px */
  .cm-lp1-03__cost-pill-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .mo-tag.cm-lp1-03__cost-tag {
    background: #ffffff;
    color: #000000;
    border: 1px solid #202020;
    border-radius: 0;
    padding: 10px 30px;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* 世帯年収 subtitle — canonical (149:1618): border-top-bottom black, padding-y 10, YuGothic Bold 24 centered w-1048 */
  .cm-lp1-03__cost-subtitle-wrap {
    width: 100%;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 夫婦アバター (149:1710) の absolute 配置基準 */
    position: relative;
  }
  .cm-lp1-03__cost-subtitle {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.6;
    color: #202020;
    text-align: center;
    flex-wrap: nowrap;
  }
  .cm-lp1-03__cost-subtitle-text { display: inline-block; }
  /* canonical (149:1619): 1,000万円 も含め全て #202020 (オレンジではない) */
  .cm-lp1-03__cost-subtitle b { font-weight: 700; color: #202020; }
  /* Couple avatar — canonical (149:1710): 115×115、subtitle 帯の右側 (x=793/1100) に
     帯罫線をまたいで absolute 配置 (帯中央より 14px 上) */
  .cm-lp1-03__cost-subtitle-avatars {
    position: absolute;
    right: 17.5%;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -14px;
    display: block;
  }
  .cm-lp1-03__cost-couple { width: 115px; height: 115px; border-radius: 50%; display: block; object-fit: cover; background: #fff; border: 1px solid #202020; }

  /* ---- 2col plan (資金・希望 / 選んだ物件) ----
     canonical PC (149:1620): 2 cols each 545 wide, gap 10, padding pb 32 pt 24.
     Each col (149:1621): border-top-bottom DASHED black, pb 24, gap 24 (lime + rows) */
  .cm-lp1-03__cost-plan {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 24px 0 32px;
    align-items: start;
  }
  .cm-lp1-03__cost-col {
    background: transparent;
    padding: 0 0 24px;
    border-top: 1px dashed #000000;
    border-bottom: 1px dashed #000000;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  /* Lime bar — canonical (149:1622): bg #d4fe16 border 1 black rounded 5, YuGothic Bold 20 center full-width */
  .cm-lp1-03__cost-col-label {
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    background: #D4FE16;
    color: #202020;
    border: 1px solid #202020;
    border-radius: 5px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
  }
  /* Cell rows container — canonical (149:1624): flex gap 16 row (label col + value col) */
  .cm-lp1-03__cost-cells {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }
  /* Each row — label BOXED with 1px border, value plain text.
     canonical (149:1626): 自己資金 box は hug (テキスト+px10)。固定 84px だと
     border 込みで内容が入りきらず 2 行に折れるため max-content にする */
  .cm-lp1-03__cost-cell {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 16px;
    align-items: center;
  }
  .cm-lp1-03__cost-cell-label {
    border: 1px solid #202020;
    padding: 0 10px;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    min-width: 84px;
    white-space: nowrap;
  }
  .cm-lp1-03__cost-cell--bold .cm-lp1-03__cost-cell-label {
    font-weight: 700;
  }
  .cm-lp1-03__cost-cell-value {
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    padding: 0 10px;
  }
  .cm-lp1-03__cost-cell--bold .cm-lp1-03__cost-cell-value {
    font-weight: 700;
  }

  /* ---- Calc row (物件価格 + リノベーション費用 + 諸費用 = 総額) ----
     canonical PC (149:1653): items + `=` + total ONE ROW, gap 18, py 20
     Items sub (149:1654): fixed h=150 + dashed border-bottom, 3 columns 213/212/212 with plus svgs */
  .cm-lp1-03__cost-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px 0;
  }
  .cm-lp1-03__cost-calc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-bottom: 0;
    margin: 0;
    border-bottom: 1px dashed #000000;
    flex: 1 1 auto;
    height: 150px;
  }
  /* `=` SVG between calc and total — canonical size 17.5×9 */
  .cm-lp1-03__cost-eq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #202020;
    flex: 0 0 auto;
    padding: 0 4px;
  }
  /* Each item — canonical (149:1655): 213 wide, h=150, flex col gap 16 center
     label YuGothic Bold 16, value Helvetica Bold 40 + YuGothic Medium 24 */
  .cm-lp1-03__cost-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 8px;
    background: transparent;
    border-radius: 0;
    border-bottom: 0;
    min-width: 0;
    width: 213px;
    height: 150px;
    flex: 0 0 auto;
  }
  .cm-lp1-03__cost-item-label {
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #202020;
    line-height: 1;
    text-align: center;
  }
  .cm-lp1-03__cost-item-sub { font-size: 13px; margin-left: 0; font-weight: 700; display: block; margin-top: 2px; }
  .cm-lp1-03__cost-item-value {
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    color: #202020;
    line-height: 1;
    font-size: 24px;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
  }
  .cm-lp1-03__cost-item-value b {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    margin-right: 2px;
  }
  /* Plus SVG between items — canonical 17.5×17.5, flex-shrink 0 */
  .cm-lp1-03__cost-op {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    width: 17.5px;
    height: 17.5px;
  }
  .cm-lp1-03__cost-op svg { width: 17.5px; height: 17.5px; display: block; }

  /* ---- Total block — canonical PC (149:1667): white outer + border 1 black + rounded 5.
     Orange strip TOP h=31 only ("総額" white YuGothic Bold 16), below: 6350 (Helvetica 40) + 万円 (YuGothic 24),
     breakdown 2 rows (自己資金/350万円, ローン借入額/6,000万円) YuGothic Medium 16 + Helvetica Bold 20 + 16 */
  .cm-lp1-03__cost-total {
    background: #ffffff;
    color: #202020;
    border: 1px solid #202020;
    border-radius: 5px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 374px;
    height: 151px;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .cm-lp1-03__cost-total-strip {
    background: #FF6030;
    color: #ffffff;
    height: 31px;
    padding: 0 10px;
    text-align: center;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 31px;
  }
  .cm-lp1-03__cost-total-price {
    padding: 10px 20px 0;
    text-align: center;
    color: #202020;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
  }
  .cm-lp1-03__cost-total-price b {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    margin-right: 2px;
  }
  .cm-lp1-03__cost-total-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 26px 10px;
    align-items: stretch;
  }
  .cm-lp1-03__cost-breakdown-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #202020;
    width: 100%;
  }
  .cm-lp1-03__cost-breakdown-label {
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #202020;
  }
  /* canonical (149:1678): 数値と「万円」は密着 (unit separation を作らない) */
  .cm-lp1-03__cost-breakdown-value {
    color: #202020;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .cm-lp1-03__cost-breakdown-value b {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #202020;
    line-height: 1;
    margin-right: 1px;
  }

  /* ---- Loan Sim — canonical PC (149:1684): 4-cell ROW = title | 3 value cols | arrow | monthly
     title cell (149:1685): h=132, border 1 black rounded left-5, "住宅ローン/月々の返済/シミュレーション" 3-line YuGothic Bold 16
     value cols (149:1688-1699): each 160×132, border 1 black, black header h=42 YuGothic Bold 16 white, value h=90 Helv Bold 32 + 16
     arrow (149:1704): 14×13 SVG polygon
     monthly (149:1705): 373×132 border 1 black rounded 5, orange header h=42 YuGothic Bold 16 white "月々の返済額（ボーナス払いなし）",
       value 90 tall YuGothic Medium "約" 16 + Helvetica Bold 32 "16.9" + "万円" 16 */
  .cm-lp1-03__cost-sim {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 8px 0;
  }
  .cm-lp1-03__cost-sim-title {
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    color: #202020;
    text-align: center;
    margin: 0;
    /* 「シミュレーション」(8字×16px=128px) が折れないよう content 幅を確保 */
    padding: 0 26px;
    width: 188px;
    height: 132px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #202020;
    border-radius: 5px 0 0 5px;
    border-right: 0;
    background: #ffffff;
    flex: 0 0 auto;
  }
  .cm-lp1-03__cost-sim-title-sp { display: none; }
  @media (max-width: 749px) {
    .cm-lp1-03__cost-sim-title-pc { display: none; }
    .cm-lp1-03__cost-sim-title-sp { display: inline; }
  }
  .cm-lp1-03__cost-sim-table {
    display: flex;
    flex-direction: row;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    flex: 0 0 auto;
    width: 480px;
  }
  .cm-lp1-03__cost-sim-col {
    display: flex;
    flex-direction: column;
    border: 1px solid #202020;
    border-right: 0;
    width: 160px;
    height: 132px;
    background: #ffffff;
    box-sizing: border-box;
    flex: 0 0 160px;
  }
  .cm-lp1-03__cost-sim-col:last-child { border-right: 1px solid #202020; }
  .cm-lp1-03__cost-sim-head {
    background: #202020;
    color: #ffffff;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    padding: 0 4px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 42px;
  }
  .cm-lp1-03__cost-sim-value {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    color: #202020;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    position: relative;
    height: 90px;
    flex: 1 1 auto;
  }
  .cm-lp1-03__cost-sim-value b {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    margin-right: 2px;
    line-height: 1;
  }
  .cm-lp1-03__cost-sim-sub {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    color: #A3A3A3;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 12px;
  }
  /* Arrow polygon between table and monthly */
  .cm-lp1-03__cost-sim-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
  }
  .cm-lp1-03__cost-sim-arrow svg { width: 14px; height: 13px; display: block; }
  /* Monthly block — canonical (149:1705): 373×132, border 1 black rounded 5, orange header + value area */
  .cm-lp1-03__cost-sim-monthly {
    display: flex;
    flex-direction: column;
    border: 1px solid #202020;
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
    width: 373px;
    height: 132px;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .cm-lp1-03__cost-sim-monthly-head {
    background: #FF6030;
    color: #ffffff;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    padding: 0 4px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 42px;
  }
  .cm-lp1-03__cost-sim-monthly-value {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    color: #202020;
    font-family: 'YuGothic', 'Yu Gothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    height: 90px;
    flex: 1 1 auto;
  }
  .cm-lp1-03__cost-sim-monthly-value b {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    margin-right: 2px;
    line-height: 1;
  }

  /* RENOVATION 帯 — Figma canonical (149:1559/1561):
     band = 1440×84 (5.83vw)。text 150px (10.42vw) Helvetica Bold #FF6030 tracking 0、
     band 上端より 13px 上から始まり (=-0.9vw)、グリフ下部 ~30% が band 下端でクリップ。
     テキスト開始 x=367/1440 (25.5vw)。cost model 下端 → band 上端の canonical 縦 gap ≈ 293px */
  .cm-lp1-03__reno-deco {
    display: block;
    position: relative;
    z-index: 1;
    width: 100vw;
    /* MASTER SBS 実測: canonical sim 下端 → RENOVATION 出現まで 79 native (cost pb32 + 文字 overhang 13 を差引き margin 47) */
    margin: 47px 0 0 calc((100vw - 100%) / -2);
    height: 5.83vw;
    overflow: hidden;
  }
  .cm-lp1-03__reno-deco-text {
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 10.42vw;
    line-height: 1;
    letter-spacing: 0;
    color: #FF6030;
    white-space: nowrap;
    margin-top: -0.9vw;
    padding-left: 25.5vw;
    text-align: left;
  }

  /* SP */
  @media (max-width: 749px) {
    /* SP canonical section 750 canvas × 0.52 = 390 browser、section padding 30 canvas × 0.52 = 15.6
       content = 390 - 31.2 = 358.8 → Cost/PLAN/CTA が canonical editorial density で描画される
       Cards 625 canvas × 0.52 = 325 は自身の horizontal padding で 90% 相当に調整 */
    .cm-lp1-03 { padding: 20px 15.6px 36px; }
    /* SP canonical (149:2174 base frame): Cost model area 以下は plain white (grid 見えない).
       cards end 直下から section 末端まで white 塗り → grid をこの範囲で隠す。
       cards は section top 78 + CASE STUDY overhang + #03 label + heading + chips + cards ≒ 40% 位置以降 */
    .cm-lp1-03::before {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 41%; /* cards row 終端 → Cost lead 直前 (実測 cost y=5932, section h≒8500, 5932/8500 ≒ 70% だが top=41% とすると section top からの相対で ≒ cards 下部) */
      height: 60%;
      background: #ffffff;
      z-index: 0;
      pointer-events: none;
      /* SVG V-notch は SP 不要 (canonical 149:2174 は subtle top V のみ) */
      clip-path: none;
      -webkit-clip-path: none;
      background-image: none;
    }
    .cm-lp1-03__number { font-size: 52px; margin-bottom: 12px; position: relative; z-index: 1; }  {%- comment -%} 水平位置は共通 rail (--cm-lp1-num-x) が media query 無しで担うため、旧 padding-left: 8.81px の上書きは廃止 (rail が 390 で glyph x 24.4 を返す) {%- endcomment -%}
    .mo-tag.cm-lp1-kicker { font-size: 15px; padding: 5px 15px; min-width: 208px; }
    .mo-tag.cm-lp1-kicker::before,
    .mo-tag.cm-lp1-kicker::after { top: -6px; bottom: -7px; }
    {%- comment -%} SP canonical: 罫幅 418u に対し inset L13u / R15u。
        実装の罫幅 208px へ比例換算 → 6.5px / 7.5px {%- endcomment -%}
    .mo-tag.cm-lp1-kicker::before { left: 6.5px; }
    .mo-tag.cm-lp1-kicker::after  { right: 7.5px; }
    .cm-lp1-03__heading-wrap { padding: 12px 0 16px; margin-bottom: 20px; position: relative; z-index: 1; }
    /* SP 主要見出しスケールに合わせる (#04/#05/#07 = 30px, #01/#02 = 31.2px)。
       22px だけ他セクションより小さく、主要見出しに見えなかったため 30px に統一。 */
    .cm-lp1-03__heading { font-size: 30px; line-height: 1.35; }
    /* SP canonical (149:2194): chips stacked, canvas label 590×60 body 590×92, gap 15
       0.52 scale: label 590×31, body 590×48, gap 8。font: label 26 canvas ≒ 13.5 CSS, note 24 canvas ≒ 12.5 CSS */
    .cm-lp1-03__chips { flex-direction: column; gap: 8px; max-width: none; margin: 0 0 20px; }
    .cm-lp1-03__chip { flex-direction: column; flex: 0 0 auto; }
    .cm-lp1-03__chip-label {
      width: 100%;
      min-height: 28px;
      font-size: 14px;
      font-weight: 700;
      padding: 2px 16px;
      line-height: 1.6;
    }
    .cm-lp1-03__chip-note {
      width: 100%;
      padding: 6px 12px;
      text-align: center;
      font-size: 12px;
      line-height: 1.5;
      justify-content: center;
      min-height: 44px;
    }
    /* SP canonical (149:2205 etc): cards vertically stacked, canvas h=702 gap=56 → browser scale 344 h, 29 gap
       cards width 625 canvas × 0.52 = 325 → section content 358.8 - 32 (16px×2 wrap padding) = 326.8 相当 */
    .cm-lp1-03__cards-wrap { padding: 0 16px; left: auto; transform: none; width: auto; }
    .cm-lp1-03__cards-arrow,
    .cm-lp1-03__cards-dots { display: none; }
    .cm-lp1-03__cards-scroll { margin: 0 0 24px; padding: 20px 0 0; overflow: visible; }
    .cm-lp1-03__cards { display: grid; grid-template-columns: 1fr; gap: 20px; transform: none !important; transition: none; }
    .cm-lp1-03__cards > li { width: auto; }
    /* SP canonical (149:2209 box): white card with dark plate offset right 7 / bottom 9.
       Reduced padding to close SP #03 cumulative height +9.4% */
    .cm-lp1-03__card {
      scroll-snap-align: none;
      padding: 20px 16px 16px;
      gap: 8px;
      margin-top: 22px;
      margin-right: 7px;
      margin-bottom: 9px;
      box-shadow: 7px 9px 0 0 #202020;
      border-radius: 5px;
    }
    /* Title chip SP: canonical 282×66 padding 24/12, YuGothic Bold 42 canvas ≒ 22 CSS px, top -37.6 → -20 CSS */
    .cm-lp1-03__card-title { top: -14px; left: 18px; padding: 6px 14px; font-size: 14px; }
    /* Avatar SP: canonical 103.68 canvas × 0.52 ≒ 54 CSS px, top 0.13 canvas ≒ 0 CSS */
    .cm-lp1-03__card-avatar { top: -20px; right: 18px; width: 54px; height: 54px; }
    .cm-lp1-03__card-photos { gap: 5px; }
    .cm-lp1-03__card-price { font-size: 13px; }
    .cm-lp1-03__card-price b { font-size: 26px; }
    .cm-lp1-03__card-plan { padding: 3px 12px; font-size: 12px; }
    /* canonical SP: spec chips 5 個は 1 行 (折り返さない) */
    {%- comment -%} pre-ads responsive audit 2026-08-21 — P1 カード画面外はみ出し。
        flex-wrap: nowrap のため tag 行 (5 チップ = 273px) がカードの min-content 幅を
        306.9px に固定し、カードが grid トラックより広いまま縮まなくなっていた。
        結果 320 でカード右端が x=338.5 となり **viewport を 18.5px はみ出して切れて**いた
        (340 で -1.5、360 以上は余裕あり)。
        設計下限 360 を下回るときだけチップの折返しを許可してカードを可変にする。
        360 以上は nowrap のままなので現行の見た目は完全に不変。 {%- endcomment -%}
    .cm-lp1-03__card-tags { gap: 4px; flex-wrap: nowrap; }
    .cm-lp1-03__card-tags li { padding: 2px 5px; font-size: 10px; border-width: 1px; white-space: nowrap; letter-spacing: 0; }
    .cm-lp1-03__card-desc { font-size: 12.5px; line-height: 1.7; }
    /* ==== SP Cost Model canonical (149:2362) rebuild ==== */
    {%- comment -%} RENOVATION 余白 再調整 — client 目視 FB 2026-08-21 (3rd)。
        前回 vw 連動にしたのは装飾の「下」だけだったが、320 実測では
        cost モデル下端 → 装飾帯上端の 24px が **全幅で固定**のままで、
        帯内の余白 (6.57vw = 21px) と合わせて赤文字の上に約 77px の白が残り、
        グリフ (41.5px) が白の中に浮いて「穴」に見えていた。
        上側も 390 で従来値 24px に一致する係数で vw 連動させる (390 以上は実寸不変)。 {%- endcomment -%}
    .cm-lp1-03__cost { padding: 12px 0 20px; background: transparent; border: 0; border-radius: 0; gap: 20px; margin: 0 auto min(24px, calc(17.14vw - 42.9px)); }
    /* pill SP canonical: bg-white border 1 black, padding 30/10, Helvetica Bold 30 canvas × 0.52 = 15.6 CSS */
    .mo-tag.cm-lp1-03__cost-tag { padding: 6px 20px; font-size: 15.6px; }
    /* subtitle SP canonical: 左寄せテキスト + 右端 avatar (重ならないよう右に余白を確保) */
    .cm-lp1-03__cost-subtitle-wrap { padding: 8px 80px 8px 0; justify-content: flex-start; }
    /* SP subtitle: allow text wrap so canonical 2-line "世帯年収 / 1,000万円のご夫婦の場合" pattern可能 */
    .cm-lp1-03__cost-subtitle {
      font-size: 15px; gap: 10px; flex-wrap: nowrap; align-items: center;
    }
    .cm-lp1-03__cost-subtitle-text {
      display: inline-block; text-align: left; line-height: 1.5;
    }
    /* SP couple avatar: canonical 136 canvas × 0.52 = 71 CSS px、帯右端寄せ */
    .cm-lp1-03__cost-subtitle-avatars { right: 4px; margin-top: -10px; }
    .cm-lp1-03__cost-couple { width: 71px; height: 71px; }
    /* 2col plan SP canonical: STACKED (single col), each col SOLID border-top-bottom (not dashed like PC) */
    .cm-lp1-03__cost-plan { grid-template-columns: 1fr; gap: 16px; padding: 12px 0 16px; }
    .cm-lp1-03__cost-col { padding: 0 0 16px; gap: 14px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding-top: 14px; }
    .cm-lp1-03__cost-col-label { padding: 4px 10px; font-size: 15px; }
    /* cells SP: label boxed 1.68px border, YuGothic Medium 27 canvas × 0.52 ≒ 14 CSS */
    .cm-lp1-03__cost-cells { padding: 0 14px; gap: 8px; }
    .cm-lp1-03__cost-cell { grid-template-columns: max-content 1fr; gap: 12px; }
    .cm-lp1-03__cost-cell-label { min-height: 24px; font-size: 13px; padding: 0 8px; border-width: 1px; min-width: 74px; }
    .cm-lp1-03__cost-cell-value { font-size: 13px; padding: 0 4px; }
    /* SP calc: items STACKED, each row = label-left/value-right (canonical 149:2413/2415).
       Canonical row 80 canvas × 0.52 = 42 CSS; label 36 canvas → ~19 CSS; value 60 canvas → ~31 CSS.
       Plus 35×35 canvas → ~18 CSS. Gap from row-bottom to plus-top = 32 canvas → ~17 CSS. */
    .cm-lp1-03__cost-row { flex-direction: column; align-items: stretch; gap: 24px; padding: 12px 0 0; }
    .cm-lp1-03__cost-calc { flex-direction: column; align-items: stretch; gap: 32px; padding-bottom: 0; margin: 0; border-bottom: 0; height: auto; }
    /* each item row: flex row label+value with dashed border-bottom below */
    .cm-lp1-03__cost-item { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; padding: 0 4px 18px; min-width: 0; width: auto; height: auto; border-bottom: 1px dashed #000000; }
    .cm-lp1-03__cost-item-label { font-size: 18px; text-align: left; }
    .cm-lp1-03__cost-item-sub { font-size: 12px; margin-left: 2px; display: inline; margin-top: 0; }
    .cm-lp1-03__cost-item-value { font-size: 15px; }
    .cm-lp1-03__cost-item-value b { font-size: 32px; }
    /* Canonical (149:2418 Group 34): 35×35 canvas plus SVG. Prominent editorial equation "+".
       SP scale 0.52 → ~18-20 CSS but canonical looks bolder → 32×32 CSS + thicker stroke */
    .cm-lp1-03__cost-op { align-self: center; width: 32px; height: 32px; }
    .cm-lp1-03__cost-op svg { width: 32px; height: 32px; }
    .cm-lp1-03__cost-op svg line { stroke-width: 5; }
    .cm-lp1-03__cost-eq { display: none; }
    /* SP total: FULL ORANGE bg + WHITE inner box (総額 + 6350) + WHITE breakdown on orange
       canonical (149:2430): 690×250 canvas × 0.52 = 359×130 aspect 2.76:1 → compact block
       padding canvas 50/40 × 0.52 = 26/21, gap 20 canvas × 0.52 ≒ 10 CSS */
    .cm-lp1-03__cost-total {
      background: #FF6030; color: #ffffff; padding: 18px 20px; gap: 12px;
      width: 100%; height: auto; min-width: 0; max-width: none;
      border: 1px solid #202020; border-radius: 5px; overflow: visible;
      display: flex; flex-direction: column; align-items: stretch;
      box-sizing: border-box;
    }
    .cm-lp1-03__cost-total-strip { display: none; }
    .cm-lp1-03__cost-total-price {
      background: #ffffff; border: 1px solid #202020; border-radius: 5px;
      padding: 8px 16px; color: #202020; height: auto; flex: 0 0 auto;
      display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    }
    .cm-lp1-03__cost-total-price::before {
      content: '総額';
      font-family: 'YuGothic', 'Yu Gothic', sans-serif;
      font-weight: 700; font-size: 15.6px; color: #202020;
    }
    .cm-lp1-03__cost-total-price b { font-size: 30px; }
    .cm-lp1-03__cost-total-breakdown { padding: 0 4px; gap: 4px; }
    .cm-lp1-03__cost-breakdown-row { color: #ffffff; justify-content: space-between; }
    .cm-lp1-03__cost-breakdown-label { color: #ffffff; font-size: 12px; font-weight: 500; }
    .cm-lp1-03__cost-breakdown-value { color: #ffffff; }
    .cm-lp1-03__cost-breakdown-value b { color: #ffffff; font-size: 15px; }
    .cm-lp1-03__cost-lead { font-size: 13px; line-height: 1.7; max-width: none; margin: 0 auto 16px; padding: 0 14px; }
    /* SP Loan Sim canonical (149:2447): title on top + 3-col table + full-width orange monthly bar */
    .cm-lp1-03__cost-sim {
      flex-direction: column; align-items: stretch; padding: 12px 0; gap: 0;
    }
    .cm-lp1-03__cost-sim-title {
      width: 100%; height: auto; padding: 12px 0 16px; border: 0; background: transparent;
      border-radius: 0; font-size: 16px; line-height: 1.4; text-align: center;
    }
    .cm-lp1-03__cost-sim-table { display: flex; flex-direction: row; width: 100%; }
    .cm-lp1-03__cost-sim-col { width: auto; flex: 1 1 0; height: 100px; border-right: 0; border: 1px solid #202020; border-right-width: 0; }
    .cm-lp1-03__cost-sim-col:first-child { border-radius: 5px 0 0 0; }
    .cm-lp1-03__cost-sim-col:last-child { border-right-width: 1px; border-radius: 0 5px 0 0; }
    .cm-lp1-03__cost-sim-head { font-size: 13px; height: 32px; flex: 0 0 32px; padding: 0 4px; }
    .cm-lp1-03__cost-sim-value { padding: 0 4px; font-size: 13px; background: #ffffff; height: 68px; flex: 1 1 auto; }
    .cm-lp1-03__cost-sim-value b { font-size: 24px; }
    .cm-lp1-03__cost-sim-sub { font-size: 10px; bottom: 4px; }
    /* Arrow hidden on SP (canonical SP does not have this small arrow between table and monthly) */
    .cm-lp1-03__cost-sim-arrow { display: none; }
    .cm-lp1-03__cost-sim-monthly {
      width: 100%; height: auto; margin-top: 0;
      border-radius: 0 0 5px 5px; border-top: 0;
    }
    /* Canonical color hierarchy: ORANGE monthly LABEL band + WHITE monthly VALUE cell (16.9 in BLACK) */
    .cm-lp1-03__cost-sim-monthly-head { font-size: 12px; height: 40px; flex: 0 0 40px; padding: 0 4px; background: #FF6030; color: #ffffff; }
    .cm-lp1-03__cost-sim-monthly-value { padding: 0 4px; font-size: 15px; background: #ffffff; color: #202020; height: 84px; flex: 1 1 auto; }
    .cm-lp1-03__cost-sim-monthly-value b { font-size: 30px; color: #202020; font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; }
    /* SP canonical (149:2180): "RENOVATION" 150@750 = 20vw、x=-30 (=-4vw)、
       PC と同じ帯スライス表現 (band 高さ 84/750 = 11.2vw、グリフ下部クリップ) */
    /* SP canonical 実測 (149:2178 deco frame 750×167 / 149:2180 text x=50 w=979 h=150):
         - text 左位置 = キャンバス左 +80px → 80/750 = 10.67vw (R は左で切れない)
         - band 高さ  = 167/750 = 22.27vw、text 上端 = 49.27/750 = 6.57vw
           → グリフ下部 21% のみクリップ (従来の 11.2vw では 44% 刈られていた)
         - 右端のはみ出しクリップは canonical 通り (979px を 750px 幅で切る) */
    .cm-lp1-03__reno-deco {
      /* text 上端が 6.57vw 下がる分、帯の開始位置を上げて見た目の間隔を据え置く */
      margin: 0 0 0 -15.6px;
      width: calc(100% + 31.2px);
      height: 22.27vw;
    }
    .cm-lp1-03__reno-deco-text {
      font-size: 20vw;
      margin-top: 6.57vw;
      padding-left: 0;
      margin-left: 10.67vw;
    }
    .cm-lp1-03__reno-deco-extra { display: none; }
  }

  {%- comment -%} pre-ads responsive audit 2026-08-21 — 設計下限 (360) 未満のみ。
      チップ 5 個が 1 行に収まらない幅ではカードの min-content 幅が viewport を超えるため、
      ここだけ折返しを許可してカードを可変にする。360 以上には一切影響しない。 {%- endcomment -%}
  @media (max-width: 359px) {
    .cm-lp1-03__card-tags { flex-wrap: wrap; }
  }
/* END_SECTION:cm-lp1-03-case */
/* START_SECTION:cm-lp1-04-value (INDEX:19) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* Figma実測: 50x50px のうっすらしたグラフ用紙グリッド背景 (bg #fbfbfb / line #e6e6e6, 50px間隔で実測確認済み) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }

  .cm-lp1-04 {
    color: #202020;
    /* canonical (149:1716) section h=956; browser was +222 taller. Compressed padding to close vertical stretch */
    padding: 8px 16px 64px; /* canonical: number glyph = section top+26 */
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
  }
  .cm-lp1-04__container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .cm-lp1-04__number {
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    color: #202020;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 padding-left: 8.54% は .cm-lp1-0X__container (max-width 1300) 幅に対する % で、
        1100 基準の #01/#02 とは 1440 以外で一致しなかった (750-1439 で 3 系統に分裂)。
        containing block は container の content box (viewport 中央にセンタリング) なので、
        padding-left に同じ式を入れれば #01/#02 と同一の viewport x になる。
        padding-left は box の右端を動かさないため、横スクロール / clip / section 高さへの
        影響はゼロ。SP media query 側の padding-left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    padding-left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0 0 24px;
    position: relative;
    z-index: 2;
  }

  /* VALUE watermark — canonical (149:1717): Helvetica Bold 151.448px #EEEEEE (共通システム)、
     PC 左端 x=639/1100 (= container 中央+89px)、box top=14.6 (＃04 行に重なる) */
  .cm-lp1-04__deco {
    position: absolute;
    left: calc(50% + 89px);
    top: 15px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 10.52vw, 151.5px);
    line-height: 1.6;
    color: #EEEEEE;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    letter-spacing: 0;
    margin: 0;
  }

  /* ===== Editorial kicker — Figma Component 7 (52:6800系, PC 277×59 / SP 208×44) =====
     .mo-tag (motion.css) の罫線+縦tickをベースに canonical へ拡張。
     motion.css が後読みのため .mo-tag との複合セレクタで上書きする */
  .mo-tag.cm-lp1-kicker {
    background-color: #fff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 8px 20px;
    min-width: 277px;
    text-align: center;
  }
  .mo-tag.cm-lp1-kicker::before,
  .mo-tag.cm-lp1-kicker::after {
    top: -9px;
    bottom: -10px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): kicker の縦終端線の位置。
      canonical (Component 7 = 149:1785、PC #03-#08 の 6 箇所すべてで同一と実測確認済み) は
      縦線が横罫の端ではなく内側に立つ: 左 inset 2.89% (=8px) / 右 3.61% (=10px)。
      実装は両端フラッシュ (left:0 / right:0) で「閉じた長方形」に見えていたため bracket 形状へ戻す。
      横罫の太さ (canonical 2px / 実装 1px) は [data-mo="draw"] が background-size:100% 1px で
      描いており motion 仕様と不可分なので今回は変更しない。上下の突出 (-9/-10px) は canonical 一致済み。
      .mo-tag 基底は motion.css 側。ここでは section CSS でのみ上書きする。 {%- endcomment -%}
  .mo-tag.cm-lp1-kicker::before { left: 8px; }
  .mo-tag.cm-lp1-kicker::after  { right: 10px; }

  /* Header — canonical (149:1721): container 内 x=203 左アンカー。
     左列 550 (kicker+見出し 左揃え) + 右列 328 (イラスト+補足) */
  .cm-lp1-04__header {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 16px 0 20px clamp(0px, 14.1vw, 203px);
    display: grid;
    grid-template-columns: minmax(0, 550px) minmax(0, 328px);
    gap: 0 16px;
    align-items: start;
    z-index: 2;
  }
  .cm-lp1-04__title { text-align: left; }
  .cm-lp1-04__tag {
    position: relative;
    z-index: 1;
  }
  .cm-lp1-04__heading {
    position: relative;
    z-index: 1;
    /* canonical: kicker 下 10px、工務店だから、(60px lh1.6) / ここまで話せます。(60px) */
    margin: 10px 0 0;
    {%- comment -%} forensic QA Phase 2: canonical は見出しも YuGothic Bold (149:1568 #03 / 149:1788 #06 / 149:1840 #07 で確認)。
        font-family 未宣言でテーマ既定の Noto Sans JP に落ちていた宣言漏れを解消 (実測でレイアウト影響 0)。
        client 指定の orange outline は別セレクタなので影響しない。 {%- endcomment -%}
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    text-align: left;
    font-weight: 700;
    font-size: clamp(30px, 4.17vw, 60px);
    {%- comment -%} forensic QA (2026-08-15): canonical の line-height を Figma metadata で確定。
        149:1724「工務店だから、」= 7字×60px で幅 420 / 高さ 96 → 96 ÷ 60 = lh 1.6。
        149:1726「ここまで話せます」= 8字×60px で幅 480。font-size 60px は既に一致していたが
        lh だけ 1.5 のまま残っていた (Phase 2 時点では canonical 未取得だったため据え置かれた)。
        #03/#06/#07 は Phase 2 で canonical lh へ移行済みで、#04/#05 が最後の 2 件。
        SP は canonical 未取得のため SP override (30px / lh1.35) は変更しない。 {%- endcomment -%}
    line-height: 1.6;
    letter-spacing: 0.01em;
  }
  .cm-lp1-04__heading-line { display: block; }

  /* Figma canonical (149:1726): "ここまで話せます" は ORANGE TEXT (#FF6030) — marker/underline ではない。
     以前 mo-marker を使っていたが highlight bar に見えていた。text-only orange に戻す。 */
  {%- comment -%} client feedback 2026-08-14: オレンジ見出しは fill #F0552B + 黒縁取り (stroke = 1em/22) {%- endcomment -%}
  .cm-lp1-04__heading-orange {
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
  }

  /* 右列 — canonical: イラスト(88×131)は列内 x=92、title 上端より 22px 上に突き出し、
     その 22px 下に補足テキスト (16px lh1.6 左揃え、幅328) */
  .cm-lp1-04__aside {
    position: relative;
    z-index: 1;
    max-width: 328px;
    color: #202020;
  }
  .cm-lp1-04__figure {
    display: block;
    width: 88px;
    height: 131px;
    object-fit: contain;
    margin: -22px 0 22px 92px;
  }
  .cm-lp1-04__aside-text {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #202020;
    text-align: left;
  }

  /* Speech-bubble tail pointer + horizontal line above 3-card group (canonical 149:1730) */
  .cm-lp1-04__items-pointer {
    max-width: 1100px;
    height: 37px;
    margin: 0 auto;
    display: block;
  }
  .cm-lp1-04__items-pointer svg { display: block; width: 100%; height: 100%; }

  /* 3 photo items — canonical (149:1731): 枠付きパネル。
     border-l/r/b #202020 + rounded-bl/br 5、pt-32、h582、column 324 gap 32、bg なし (grid 透過)。
     上辺は __items-pointer (Vector1: notch 付き横線) が担う */
  .cm-lp1-04__items {
    list-style: none;
    padding: 32px 29px 40px;
    margin: 0 auto;
    max-width: 1100px;
    /* item の gap 圧縮に伴い PC フレームの縦幅を詰める (582 → 520)。SP は既に min-height:0 */
    min-height: 520px;
    box-sizing: border-box;
    border-left: 1px solid #202020;
    border-right: 1px solid #202020;
    border-bottom: 1px solid #202020;
    border-radius: 0 0 5px 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
  }
  .cm-lp1-04__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
  }
  /* 最後の item だけ枠下に余分な空きが出るのを防ぐ */
  .cm-lp1-04__item:last-child { margin-bottom: 0; }
  .cm-lp1-04__photo-wrap {
    position: relative;
  }
  .cm-lp1-04__photo {
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }
  .cm-lp1-04__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Label — canonical (Frame 117): 黒タブを写真左上に「左端フラッシュ」で載せ、
     写真上端に下半分がオーバーラップ (notch/タブ構造) */
  .cm-lp1-04__label {
    position: absolute;
    top: -16px;
    left: 0;
    background: #202020;
    color: #fff;
    padding: 5px 20px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.02em;
    z-index: 2;
  }
  /* Bold 質問 — canonical instance render 実測 ~18px YuGothic Bold */
  .cm-lp1-04__question {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.39vw, 20px); /* canonical 20px */
    line-height: 1.6;
    color: #202020;
  }
  /* Medium 本文 (Figma canonical 149:1732;1:247): 16px YuGothic Medium */
  .cm-lp1-04__body {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.15vw, 16px);
    line-height: 1.6;
    color: #202020;
  }

  /* Mid CTA #3 — canonical (149:1903/1904): 白帯 + 上下 border #717171 + 黒 panel (1072, rounded 5)。
     共通 wrapper (#03 側 CSS) が帯を透明化しているため、#04 スコープで canonical へ戻す */
  .cm-lp1-04 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta {
    background: #fff;
    border-top: 1px solid #717171;
    border-bottom: 1px solid #717171;
    padding: 40px 30px;
    max-width: none;
  }
  .cm-lp1-04 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__panel {
    max-width: 1072px;
    border-radius: 5px;
  }

  /* SP — canonical (149:2473): 見出し30px中央 / intro 左揃え14px + figure 44×65 /
     cards 586.8@750 (左右 inset 51.6) タブラベル構造 */
  @media (max-width: 749px) {
    .cm-lp1-04 { padding: 16px 15.6px 56px; }
    .cm-lp1-04__number { font-size: 52px; margin-bottom: 12px; }  {%- comment -%} 水平位置は共通 rail (--cm-lp1-num-x) が media query 無しで担うため、旧 padding-left: 8.81px の上書きは廃止 (rail が 390 で glyph x 24.4 を返す) {%- endcomment -%}

    .mo-tag.cm-lp1-kicker { font-size: 15px; padding: 5px 15px; min-width: 208px; }
    .mo-tag.cm-lp1-kicker::before,
    .mo-tag.cm-lp1-kicker::after { top: -6px; bottom: -7px; }
    {%- comment -%} SP canonical: 罫幅 418u に対し inset L13u / R15u。
        実装の罫幅 208px へ比例換算 → 6.5px / 7.5px {%- endcomment -%}
    .mo-tag.cm-lp1-kicker::before { left: 6.5px; }
    .mo-tag.cm-lp1-kicker::after  { right: 7.5px; }

    .cm-lp1-04__header {
      grid-template-columns: 1fr;
      padding: 12px 0 20px;
      margin-bottom: 22px;
      gap: 12px;
    }
    .cm-lp1-04__title { text-align: center; }
    .cm-lp1-04__heading { font-size: 30px; line-height: 1.35; text-align: center; margin-top: 16px; }
    .cm-lp1-04__aside { max-width: 295px; margin: 8px auto 0; }
    .cm-lp1-04__aside-text { text-align: left; font-size: 14px; line-height: 1.6; }
    {%- comment -%} client feedback 2026-08-14 (#04 SP バランス):
        先方 Figma reference 実測 (CSS px 正規化) との差は 2 点だった。
          1) イラスト高さ 68.7 に対し実装 64.5 (-6%)  → 46×68 へ
          2) VALUE 透かし上端が canonical では イラスト下端より 22.8px 上 (=女性が VALUE の前に立つ)
             実装は 0px (接するだけ) で、イラストが小さく孤立して見えていた → top を 20px 上げる
        いずれも SP のみ。deco は absolute のため flow に影響なし。section 高さ増は +3px (0.15%)。 {%- endcomment -%}
    .cm-lp1-04__figure { width: 46px; height: 68px; margin: 0 auto 11px; }
    .cm-lp1-04__deco {
      left: 50%;
      transform: translateX(-50%);
      top: 218px;
      font-size: 75.7px;
    }
    .cm-lp1-04__items {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 24px 26px 32px;
      margin-top: 0;
      min-height: 0;
    }
    .cm-lp1-04__label { top: -16px; left: 0; padding: 5px 18px; font-size: 14px; }
    .cm-lp1-04__question { font-size: 18px; line-height: 1.6; }
    .cm-lp1-04__body { font-size: 14px; line-height: 1.6; }
    .cm-lp1-04 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta { padding: 30px 15px; }
  }
/* END_SECTION:cm-lp1-04-value */
/* START_SECTION:cm-lp1-05-interview (INDEX:20) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* Figma実測: 50x50px のうっすらしたグラフ用紙グリッド背景 (bg #fbfbfb / line #e6e6e6, 50px間隔で実測確認済み) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }

  .cm-lp1-05 {
    color: #202020;
    /* canonical (149:1754) section h=1099; browser was +267 taller. Compressed padding to close stretch */
    padding: 8px 16px 104px; /* canonical: number top+26 / CTA 下端→section 末尾 gap 復元 */
    position: relative;
    /* SP watermark "VIEW" は右端でクリップ (canonical 149:2567 の mask 相当) */
    overflow-x: clip;
  }
  .cm-lp1-05__container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
  }
  .cm-lp1-05__number {
    position: relative;
    z-index: 1;
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 padding-left: 8.54% は .cm-lp1-0X__container (max-width 1300) 幅に対する % で、
        1100 基準の #01/#02 とは 1440 以外で一致しなかった (750-1439 で 3 系統に分裂)。
        containing block は container の content box (viewport 中央にセンタリング) なので、
        padding-left に同じ式を入れれば #01/#02 と同一の viewport x になる。
        padding-left は box の右端を動かさないため、横スクロール / clip / section 高さへの
        影響はゼロ。SP media query 側の padding-left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    padding-left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0 0 24px;
  }
  .cm-lp1-05__header {
    position: relative;
    text-align: center;
    padding: 12px 0 20px;
    margin-bottom: 24px;
  }
  /* Watermark — canonical (149:1756): Helvetica Bold 151.448px #EEEEEE、
     左端 x=91/1100 frame (= container 中央-459px)、box top -51px (＃05 の上に重なる) */
  .cm-lp1-05__deco {
    position: absolute;
    left: calc(50% - 459px);
    top: -51px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 10.52vw, 151.5px);
    line-height: 1.6;
    color: #EEEEEE;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  /* ===== Editorial kicker — Figma Component 7 (52:6800系, PC 277×59 / SP 208×44) =====
     .mo-tag (motion.css) の罫線+縦tickをベースに、canonical へ拡張:
     白チップbg / 20px Bold / tick を罫線の上下 ±9px へ延長 */
  .mo-tag.cm-lp1-kicker {
    background-color: #fff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 8px 20px;
    min-width: 277px;
    text-align: center;
  }
  .mo-tag.cm-lp1-kicker::before,
  .mo-tag.cm-lp1-kicker::after {
    top: -9px;
    bottom: -10px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): kicker の縦終端線の位置。
      canonical (Component 7 = 149:1785、PC #03-#08 の 6 箇所すべてで同一と実測確認済み) は
      縦線が横罫の端ではなく内側に立つ: 左 inset 2.89% (=8px) / 右 3.61% (=10px)。
      実装は両端フラッシュ (left:0 / right:0) で「閉じた長方形」に見えていたため bracket 形状へ戻す。
      横罫の太さ (canonical 2px / 実装 1px) は [data-mo="draw"] が background-size:100% 1px で
      描いており motion 仕様と不可分なので今回は変更しない。上下の突出 (-9/-10px) は canonical 一致済み。
      .mo-tag 基底は motion.css 側。ここでは section CSS でのみ上書きする。 {%- endcomment -%}
  .mo-tag.cm-lp1-kicker::before { left: 8px; }
  .mo-tag.cm-lp1-kicker::after  { right: 10px; }

  .cm-lp1-05__tag {
    position: relative;
    z-index: 1;
  }
  .cm-lp1-05__heading {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    {%- comment -%} forensic QA Phase 2: canonical は見出しも YuGothic Bold (149:1568 #03 / 149:1788 #06 / 149:1840 #07 で確認)。
        font-family 未宣言でテーマ既定の Noto Sans JP に落ちていた宣言漏れを解消 (実測でレイアウト影響 0)。
        client 指定の orange outline は別セレクタなので影響しない。 {%- endcomment -%}
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    /* Figma canonical (149:1763): 60px PC */
    font-size: clamp(28px, 4.2vw, 60px);
    {%- comment -%} forensic QA (2026-08-15): canonical の line-height を Figma metadata で確定。
        149:1763「現場を知る工務店」= 8字×60px で幅 480 / 高さ 96 → 96 ÷ 60 = lh 1.6。
        149:1765「住まいとお金の相談を変える。」= 14字×60px で幅 840 / 高さ 96 → 同じく lh 1.6。
        font-size 60px は既に一致。lh だけ 1.5 のまま残っていたものを canonical へ揃える。
        SP は canonical 未取得のため SP override (30px / lh1.3) は変更しない。 {%- endcomment -%}
    line-height: 1.6;
    text-align: center;
  }
  .cm-lp1-05__heading-l1 { display: block; }
  .cm-lp1-05__heading-l2 { display: block; }
  .cm-lp1-05__brk-sp { display: none; }
  /* Figma canonical (149:1763): orange text-only for "現場を知る工務店" */
  {%- comment -%} client feedback 2026-08-14: オレンジ見出しは fill #F0552B + 黒縁取り (stroke = 1em/22)。
      「が、」は黒のままなので orange span にだけ適用する {%- endcomment -%}
  .cm-lp1-05__heading-orange {
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
  }

  .cm-lp1-05__body {
    display: grid;
    grid-template-columns: minmax(0, 537px) minmax(0, 541px);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
    justify-content: center;
  }

  /* RINO KEN video capture (149:1768 canonical 536×306) */
  .cm-lp1-05__rinoken {
    width: 100%;
    aspect-ratio: 536 / 306;
    position: relative;
  }
  .cm-lp1-05__rinoken-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 再生トリガー。媒体ボックス全面が当たり判定＋キーボード操作を担う */
  .cm-lp1-05__rinoken-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 従来サムネイルに焼き込まれていた再生UIと同じ「白い円 + 黒三角」 */
  .cm-lp1-05__rinoken-play-icon {
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    position: relative;
    transition: transform 200ms var(--mo-ease, ease), background-color 200ms ease;
  }
  .cm-lp1-05__rinoken-play-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #202020;
  }
  .cm-lp1-05__rinoken-play:hover .cm-lp1-05__rinoken-play-icon,
  .cm-lp1-05__rinoken-play:focus-visible .cm-lp1-05__rinoken-play-icon {
    background: #ffffff;
    transform: scale(1.06);
  }
  @media (max-width: 749px) {
    .cm-lp1-05__rinoken-play-icon { width: 54px; height: 54px; }
    .cm-lp1-05__rinoken-play-icon::before { border-width: 9px 0 9px 15px; }
  }
  /* 差し替え後の iframe は既存の媒体ボックスをそのまま満たす (レイアウトシフト無し) */
  .cm-lp1-05__rinoken-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Representative profile (Figma canonical 149:1770): avatar 103 + role 16 + name 32 */
  .cm-lp1-05__profile {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    align-items: center;
  }
  .cm-lp1-05__profile-avatar {
    width: 103px;
    height: 103px;
    flex: 0 0 auto;
    display: block;
    border-radius: 50%;
    object-fit: cover;
  }
  .cm-lp1-05__profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cm-lp1-05__profile-role {
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #202020;
  }
  .cm-lp1-05__profile-name {
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.6;
    color: #202020;
  }
  .cm-lp1-05__profile-bio {
    margin: 12px 0 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #202020;
  }

  /* Interview panel with mo-shadow — Figma canonical (149:1776):
       bg-white, border 1px #000, w-541, padding 左右49 / 上32
       Title 24px Bold (y=32) → 24px gap → 本文 16px lh1.6 連続 (段落間の空行なし, 計 h≒260) */
  .cm-lp1-05__interview {
    background: #fff;
    border: 1px solid #000;
    padding: 32px 49px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cm-lp1-05__interview-heading {
    margin: 0 0 24px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.6;
    color: #202020;
  }
  .cm-lp1-05__interview p {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 1.15vw, 16px);
    line-height: 1.6;
    color: #202020;
  }
  /* canonical (Rectangle 40 149:1755): shadow plate は panel の「右上」+9/-9。
     motion.css の .mo-shadow.is-in (右下 9px 9px) を section スコープで canonical 方向へ上書き
     (motion.css 自体は不変更、影が後から差すモーションは維持) */
  .js-mo .cm-lp1-05__interview.mo-shadow.is-in {
    box-shadow: 9px -9px 0 var(--mo-ink);
  }

  /* Mid CTA #4 — canonical (149:1904): 白帯 + 上下 border #717171 + 黒 panel (1072, rounded 5)。
     共通 wrapper (#03 側 CSS) が帯を透明化しているため、#05 スコープで canonical へ戻す */
  .cm-lp1-05 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta {
    background: #fff;
    border-top: 1px solid #717171;
    border-bottom: 1px solid #717171;
    padding: 40px 30px;
    max-width: none;
  }
  .cm-lp1-05 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__panel {
    max-width: 1072px;
    border-radius: 5px;
  }

  /* SP */
  @media (max-width: 749px) {
    .cm-lp1-05 { padding: 12px 12px 32px; }
    .cm-lp1-05__number { font-size: 52px; margin-bottom: 12px; }  {%- comment -%} 水平位置は共通 rail (--cm-lp1-num-x) が media query 無しで担うため、旧 padding-left: 12.4px の上書きは廃止 (rail が 390 で glyph x 24.4 を返す) {%- endcomment -%}
    .cm-lp1-05__header { padding: 8px 0 12px; margin-bottom: 16px; }
    /* canonical SP (149:2567): "INTER"/"VIEW" 2段組。VIEW は右へオフセットし右端でクリップ */
    .cm-lp1-05__deco { left: 48px; top: -2px; font-size: 75.7px; line-height: 1; }
    .cm-lp1-05__deco-l1,
    .cm-lp1-05__deco-l2 { display: block; }
    .cm-lp1-05__deco-l2 { margin: 5px 0 0 130px; }

    .mo-tag.cm-lp1-kicker { font-size: 15px; padding: 5px 15px; min-width: 208px; }
    .mo-tag.cm-lp1-kicker::before,
    .mo-tag.cm-lp1-kicker::after { top: -6px; bottom: -7px; }
    {%- comment -%} SP canonical: 罫幅 418u に対し inset L13u / R15u。
        実装の罫幅 208px へ比例換算 → 6.5px / 7.5px {%- endcomment -%}
    .mo-tag.cm-lp1-kicker::before { left: 6.5px; }
    .mo-tag.cm-lp1-kicker::after  { right: 7.5px; }
    /* canonical SP (149:2575): 60px@750 = 30 CSS、3 行構成 */
    .cm-lp1-05__heading { font-size: 30px; line-height: 1.3; }
    .cm-lp1-05__brk-sp { display: inline; }
    /* Figma canonical SP (149:2563) 順序: rinoken → interview panel → profile → bio。
       browser 実装は grid で左列 (rinoken+profile+bio) + 右列 (interview) を並べているため、
       SP stack すると left → right = rinoken → profile → bio → interview になり canonical と逆順。
       SP でのみ order で再配置 (rinoken:1, interview:2, profile:3, bio:4)。 */
    .cm-lp1-05__body {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .cm-lp1-05__left {
      display: contents;
    }
    .cm-lp1-05__rinoken { order: 1; }
    .cm-lp1-05__interview { order: 2; padding: 20px 19px; }
    .cm-lp1-05__profile { order: 3; }
    .cm-lp1-05__profile-bio { order: 4; }
    .cm-lp1-05__panel-copy { font-size: 12px; max-width: 48%; }
    .cm-lp1-05__interview-heading { font-size: 16px; }
    .cm-lp1-05__interview p { font-size: 13.5px; line-height: 1.7; }
    /* Profile — canonical SP (149:2589-2594): avatar 185@750=92 / role 24@750=12 / name 40@750=20 / bio 26@750=13 */
    .cm-lp1-05__profile-avatar { width: 92px; height: 92px; }
    .cm-lp1-05__profile-role { font-size: 12px; }
    .cm-lp1-05__profile-name { font-size: 20px; }
    .cm-lp1-05__profile-bio { font-size: 13px; line-height: 1.5; }
    /* SP CTA: label padding 40px だと arrow が panel 右端で切れるため縮める (#03 と同根) */
    .cm-lp1-05 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta { padding: 30px 15px; }
    {%- comment -%} pre-ads: 横 padding 16px は elastic gutter の basis へ (縦 padding のみ残す) {%- endcomment -%}
    .cm-lp1-05 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label { padding: 6px 0; }
    .cm-lp1-05 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label::before,
    .cm-lp1-05 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__btn-label::after { width: 16px; }
  }
/* END_SECTION:cm-lp1-05-interview */
/* START_SECTION:cm-lp1-06-labo (INDEX:21) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* Figma実測: 50x50px のうっすらしたグラフ用紙グリッド背景 (bg #fbfbfb / line #e6e6e6, 50px間隔で実測確認済み) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }

  .cm-lp1-06 {
    color: #202020;
    padding: 8px 16px 30px; /* canonical: number glyph = section top+26 */
    position: relative;
    /* lime の viewport ブリード (calc(50% - 50vw)) がスクロールバー分はみ出さないように */
    overflow-x: clip;
  }
  .cm-lp1-06__container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
  }
  .cm-lp1-06__number {
    position: relative;
    z-index: 1;
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 padding-left: 8.54% は .cm-lp1-0X__container (max-width 1300) 幅に対する % で、
        1100 基準の #01/#02 とは 1440 以外で一致しなかった (750-1439 で 3 系統に分裂)。
        containing block は container の content box (viewport 中央にセンタリング) なので、
        padding-left に同じ式を入れれば #01/#02 と同一の viewport x になる。
        padding-left は box の右端を動かさないため、横スクロール / clip / section 高さへの
        影響はゼロ。SP media query 側の padding-left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    padding-left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0 0 24px;
  }

  /* LABO header */
  .cm-lp1-06__labo-header {
    position: relative;
    text-align: center;
    padding: 20px 0 32px;
    margin-bottom: 32px;
  }
  /* LABOLATORY リング watermark — canonical PC (149:1784): 円 343×343, 中心 (632, 212.5)/1100 frame。
     ink 実寸 540×549 (Figma export)。clip wrapper が canonical frame の上端クリップを再現 */
  .cm-lp1-06__ring-clip {
    position: absolute;
    /* canonical (149:1779 sec06) の階層は
         Frame119(28.5,79.47) > title(158.5,0) > LABOLATORY(273.5,-38.47 / 343×343)
       で、リング中心 = (632, 212.5)/1100。ink 540×549 を中心合わせすると上端は frame 上端の
       62px 上に出るが、Figma のフレームはクリップしないため canonical ではリングは欠けない。
       inset:0 + overflow:clip だと上端 62px が刈られ、A / B の頭が断ち切られて見えていたため、
       clip 枠を 62px 上へ広げてリング全体を見せる (リングの実位置は据え置き)。 */
    inset: -62px 0 0 0;
    overflow: clip;
    z-index: 0;
    pointer-events: none;
    /* export PNG が白背景のため、wrapper ごと multiply して白をグリッド背景に溶かす。
       (z-index が stacking context を作るので、blend は wrapper 側に置く必要がある) */
    mix-blend-mode: multiply;
  }
  .cm-lp1-06__ring {
    position: absolute;
    /* リング中心 = frame 632/1100 → container 中央 +82px。ink 540 幅 → left = 50% +82 -270 */
    left: calc(50% - 188px);
    /* clip 枠を 62px 上へ広げた分を相殺し、リングの絶対位置は canonical のまま据え置く */
    top: 0;
    width: 540px;
    height: 549px;
    max-width: none;
  }
  /* ===== Editorial kicker — Figma Component 7 (52:6800系, PC 277×59 / SP 208×44) =====
     .mo-tag (motion.css) の罫線+縦tickをベースに、canonical へ拡張:
     白チップbg / 20px Bold / tick を罫線の上下 ±9px へ延長 */
  .mo-tag.cm-lp1-kicker {
    background-color: #fff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 8px 20px;
    min-width: 277px;
    text-align: center;
  }
  .mo-tag.cm-lp1-kicker::before,
  .mo-tag.cm-lp1-kicker::after {
    top: -9px;
    bottom: -10px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): kicker の縦終端線の位置。
      canonical (Component 7 = 149:1785、PC #03-#08 の 6 箇所すべてで同一と実測確認済み) は
      縦線が横罫の端ではなく内側に立つ: 左 inset 2.89% (=8px) / 右 3.61% (=10px)。
      実装は両端フラッシュ (left:0 / right:0) で「閉じた長方形」に見えていたため bracket 形状へ戻す。
      横罫の太さ (canonical 2px / 実装 1px) は [data-mo="draw"] が background-size:100% 1px で
      描いており motion 仕様と不可分なので今回は変更しない。上下の突出 (-9/-10px) は canonical 一致済み。
      .mo-tag 基底は motion.css 側。ここでは section CSS でのみ上書きする。 {%- endcomment -%}
  .mo-tag.cm-lp1-kicker::before { left: 8px; }
  .mo-tag.cm-lp1-kicker::after  { right: 10px; }

  .cm-lp1-06__tag {
    position: relative;
    z-index: 1;
  }
  .cm-lp1-06__heading {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    {%- comment -%} forensic QA Phase 2: canonical は見出しも YuGothic Bold (149:1568 #03 / 149:1788 #06 / 149:1840 #07 で確認)。
        font-family 未宣言でテーマ既定の Noto Sans JP に落ちていた宣言漏れを解消 (実測でレイアウト影響 0)。
        client 指定の orange outline は別セレクタなので影響しない。 {%- endcomment -%}
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    {%- comment -%} canonical 149:1788 = 40px / leading 1.6 (PC)、149:2609 = 36u×0.52 = 18.72px (SP) {%- endcomment -%}
    font-size: clamp(22px, 2.778vw, 40px);
    line-height: 1.6;
  }
  .cm-lp1-06__heading-line { display: block; }
  {%- comment -%} client feedback 2026-08-14: オレンジ見出しは fill #F0552B + 黒縁取り (stroke = 1em/22)。
      stroke は継承するので emp-1/2/3 にも効く {%- endcomment -%}
  .cm-lp1-06__heading-emphasis {
    display: block;
    {%- comment -%} canonical 149:1789 = 60px (PC) / 149:2610 = 60u×0.52 = 31.2px (SP) {%- endcomment -%}
    font-size: clamp(28px, 4.167vw, 60px);
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.02em;
  }

  /* LABO body: 2-col layout — canonical (149:1780) photos col 660 + text col 400 approx */
  .cm-lp1-06__labo-body {
    /* canonical 実測: photo 597 (x200-792) + gap32 + text col 416 (x824-1240)、content 1100 内 */
    display: grid;
    grid-template-columns: 597px minmax(0, 416px);
    gap: 32px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .cm-lp1-06__photos-wrap { position: relative; width: 100%; min-width: 0; }
  /* LABO carousel arrows — canonical (149:1800) 62×62 overlay, LEFT edge of photo */
  .cm-lp1-06__arrow {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 62px;
    height: 62px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
  }
  .cm-lp1-06__arrow svg { display: block; width: 100%; height: 100%; }
  .cm-lp1-06__arrow--prev { left: 20px; }
  /* next arrow は PC でも表示する。canonical (149:1800) は prev のみだが、
     初期状態は scrollLeft:0 のため prev だけでは前進できずカルーセルが操作不能になる
     (production bug)。SP と同じ扱いで右端に配置し、前進操作を復帰させる。 */
  .cm-lp1-06__arrow--next { display: block; left: auto; right: 20px; }
  .cm-lp1-06__photos-scroll {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cm-lp1-06__photos-scroll::-webkit-scrollbar { display: none; }
  .cm-lp1-06__photos {
    /* Figma canonical (149:1779 LABO): SINGLE big photo (597×336, 1.78:1) visible per state.
       4 dots = 4 states。現在は写真 4 枚なので 1 dot = 1 枚。All photos in DOM for horizontal scroll. */
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0;
  }
  .cm-lp1-06__photo {
    scroll-snap-align: start;
    aspect-ratio: 597 / 336;
    overflow: hidden;
    position: relative;
    /* 1 photo = full width of scroll container per canonical */
    flex: 0 0 100%;
    width: 100%;
  }
  .cm-lp1-06__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Canonical (149:1793): 4 dots Rectangle 47-50 — 19×19 の角丸ほぼ無しスクエア、先頭 active は黒塗り */
  .cm-lp1-06__photos-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
  }
  .cm-lp1-06__photos-dots span {
    display: block;
    width: 19px;
    height: 19px;
    background: #fff;
    border: 1px solid #202020;
    border-radius: 1px;
  }
  .cm-lp1-06__photos-dots span.is-active { background: #202020; border-color: #202020; }

  .cm-lp1-06__labo-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .cm-lp1-06__labo-copy p {
    margin: 0;
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.85;
  }

  /* ===== ACCESS — Figma canonical 149:1807 (PC) / 149:2635内 (SP) =====
     canonical PC frame (1100幅 / h=791):
       title 0-165 / map row 205-613 (map 485×408 + gap40 + 住所列480 pt115)
       lime 305-729 (x=-172〜866) / 白ACCESS glyphs 633-729 (右端866で右8pxクリップ) */
  .cm-lp1-06__access {
    position: relative;
    max-width: 1100px;
    margin: 60px auto 0;
  }
  .cm-lp1-06__access-header {
    text-align: center;
  }
  .cm-lp1-06__tag--access { display: inline-block; }
  .cm-lp1-06__access-heading {
    margin: 14px 0 0;
    font-weight: 700;
    font-size: clamp(30px, 4.17vw, 60px);
    line-height: 1.6;
  }
  {%- comment -%} client feedback 2026-08-14: 同上。「中目黒・代官山から、」は黒のまま {%- endcomment -%}
  .cm-lp1-06__access-emphasis {
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
    font-weight: 700;
  }

  .cm-lp1-06__access-stage {
    position: relative;
    margin-top: 40px;
    /* row(408) + lime下延長116px + 下余白32px */
    padding-bottom: 148px;
  }
  .cm-lp1-06__access-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
  /* Canonical (149:1825): static map 485×408, border 1px #202020, 角丸なし */
  .cm-lp1-06__map {
    display: block;
    flex: 0 1 485px;
    max-width: 485px;
    min-width: 0;
    border: 1px solid #202020;
    background: #fff;
  }
  /* 埋め込み地図。従来の静的画像と同じ 485/408 の箱をそのまま満たす。
     既存テーマに `iframe[src*="www.google.com/maps/embed"] { aspect-ratio: 16/9 }` (0,1,1) が
     あるため、親クラスを重ねて (0,2,0) で勝たせる。 */
  .cm-lp1-06__map .cm-lp1-06__map-embed {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 485 / 408;
    border: 0;
  }

  /* 住所列 (149:1827): w480 pt115、パネル+下向きtailを縦積み */
  .cm-lp1-06__address {
    flex: 0 1 480px;
    min-width: 0;
    padding-top: 115px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .cm-lp1-06__balloon {
    background: #202020;
    color: #fff;
    padding: 30px 40px;
    white-space: nowrap;
  }
  .cm-lp1-06__balloon-title {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 2;
    color: #fff;
  }
  .cm-lp1-06__balloon-line {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
  }
  /* canonical: 2行目(住所)のみ lh2、3-4行目は lh1.6 */
  .cm-lp1-06__balloon-title + .cm-lp1-06__balloon-line { line-height: 2; }
  .cm-lp1-06__tail { display: block; }

  /* Lime block (149:1811): 左は viewport 端までブリード、右端は 866/1100 = 78.7% */
  .cm-lp1-06__lime-block {
    position: absolute;
    left: calc(50% - 50vw);
    right: 21.3%;
    top: 100px;
    bottom: 32px;
    background: #D4FE16;
    overflow: hidden;
    z-index: 0;
  }

  /* 白ACCESSタイポ (149:1815): Helvetica Bold 151.448px #F7F7F7、
     lime 内に右下アンカー（右8pxはみ出し=右端クリップ、baselineはlime下端の少し上） */
  .cm-lp1-06__deco--access {
    display: block;
    position: absolute;
    right: -8px;
    bottom: -31px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 10.52vw, 151.5px);
    line-height: 1;
    color: #F7F7F7;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  .cm-lp1-06__deco--access > span { display: block; }

  /* SP — canonical 149:2635 (ACCESS部, 750設計→CSS 1/2) */
  @media (max-width: 749px) {
    .cm-lp1-06 { padding: 8px 12px 0; } /* canonical SP: number = section top すぐ */
    .cm-lp1-06__number { font-size: 52px; margin-bottom: 12px; }  {%- comment -%} 水平位置は共通 rail (--cm-lp1-num-x) が media query 無しで担うため、旧 padding-left: 12.4px の上書きは廃止 (rail が 390 で glyph x 24.4 を返す) {%- endcomment -%}
    .cm-lp1-06__labo-header { padding: 12px 0 20px; margin-bottom: 20px; }
    /* canonical SP (149:2599): リング 343×343@750 → 270×274.5 CSS, 中心 (227.5, 94.75) */
    .cm-lp1-06__ring {
      left: 80px;
      /* clip 枠を 62px 上へ広げた分を相殺 (canonical SP の実位置 -43px を維持: -43 + 62 = 19) */
      top: 19px;
      width: 270px;
      height: 274.5px;
    }
    /* canonical SP (149:2595): 矢印は 62×62@750 = 32 CSS、next は写真右端に存在する */
    .cm-lp1-06__arrow { width: 32px; height: 32px; left: 10px; }
    .cm-lp1-06__arrow--next { display: block; left: auto; right: 10px; }
    .cm-lp1-06__photos-dots { gap: 7px; margin-top: 16px; }
    .cm-lp1-06__photos-dots span { width: 10px; height: 10px; }
    {%- comment -%} canonical SP 149:2609 = 36 units × 0.52 = 18.72px {%- endcomment -%}
    {%- comment -%} pre-ads responsive audit 2026-08-21 — P1。
        「お金をかけるところ、抑えるところ。」は 17 文字 × 18.72 = 318px 必要だが
        320 の内寸は 296px しかなく「ろ。」だけが 2 行目に孤立していた。
        設計下限 360 でちょうど canonical 18.72px になる係数で連続的に詰める
        (360 以上は完全に従来どおり)。 {%- endcomment -%}
    .cm-lp1-06__heading { font-size: min(18.72px, calc(4.8vw + 1.44px)); }
    /* canonical SP: 「話して、/触れて、」左 2 段 + 「決められる。」右寄せ縦中央の editorial stagger */
    .cm-lp1-06__heading-emphasis {
      {%- comment -%} canonical SP 149:2610 = 60 units × 0.52 = 31.2px、leading 1.2。
          pre-ads audit 2026-08-21 — P1: この見出しは 2 カラム stagger (canonical 通り) だが、
          col1「話して、/触れて、」4 文字 + gap 14 + col2「決められる。」6 文字 ≒ 326px 必要。
          320 の内寸 296px では col2 が「決められ / る。」に割れ、
          左右 2 段組みが崩れて読めない状態だった (340 も同様)。
          360 でちょうど 31.2px になる係数で連続的に詰める (360 以上は不変)。 {%- endcomment -%}
      font-size: min(31.2px, calc(10.5vw - 6.6px));
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      column-gap: 14px;
      line-height: 1.2;
      text-align: left;
    }
    .cm-lp1-06__emp-1 { grid-column: 1; grid-row: 1; }
    .cm-lp1-06__emp-2 { grid-column: 1; grid-row: 2; }
    .cm-lp1-06__emp-3 { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .cm-lp1-06__labo-body {
      grid-template-columns: 1fr;
      gap: 34px; /* canonical: dots → 本文 gap 37 */
    }
    /* canonical SP 本文: 15.5px 相当 (browser 12px は過小) */
    .cm-lp1-06__labo-copy p { font-size: 15.5px; line-height: 1.85; }

    .mo-tag.cm-lp1-kicker { font-size: 15px; padding: 5px 15px; min-width: 208px; }
    .mo-tag.cm-lp1-kicker::before,
    .mo-tag.cm-lp1-kicker::after { top: -6px; bottom: -7px; }
    {%- comment -%} SP canonical: 罫幅 418u に対し inset L13u / R15u。
        実装の罫幅 208px へ比例換算 → 6.5px / 7.5px {%- endcomment -%}
    .mo-tag.cm-lp1-kicker::before { left: 6.5px; }
    .mo-tag.cm-lp1-kicker::after  { right: 7.5px; }

    {%- comment -%} client feedback 2026-08-14: canonical 準拠の 5px では、kicker の縦終端線が
        ::before で 6px 上にはみ出すため本文最終行とほぼ接触し、余白不足と指摘された。
        ACCESS はラボ説明とは別の下位セクションなので、段落間 gap(14px) の約 3 倍にあたる 40px を確保する。
        PC の margin-top:60px はこの media query の外なので影響なし。section 高さ増は +35px。 {%- endcomment -%}
    .cm-lp1-06__access { margin-top: 40px; max-width: none; }
    /* canonical SP: 2行 (149:2646/2649)、2行目「歩いてすぐ。」はオレンジ */
    {%- comment -%} pre-ads audit 2026-08-21 — P1: 「中目黒・代官山から、」10 文字 × 30px = 300px が
        320 の内寸 296px に収まらず「ら、」が孤立して 3 行になっていた。
        360 でちょうど 30px になる係数で連続的に詰める (360 以上は不変)。 {%- endcomment -%}
    .cm-lp1-06__access-heading { font-size: min(30px, calc(3.75vw + 16.5px)); line-height: 1.35; }
    .cm-lp1-06__access-heading-main { display: block; }
    .cm-lp1-06__access-emphasis { display: block; }

    .cm-lp1-06__access-stage { margin-top: 20px; padding-bottom: 60px; }
    .cm-lp1-06__access-row {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }
    .cm-lp1-06__map { flex: none; max-width: none; border: 0; }
    /* 住所ブロック (149:2658): tail はパネルの上・上向き (scaleY(-1)) */
    .cm-lp1-06__address { flex: none; padding-top: 0; }
    .cm-lp1-06__tail { order: -1; width: 50px; height: 17px; transform: scaleY(-1); }
    .cm-lp1-06__balloon {
      width: 100%;
      background: #030303;
      padding: 15px 10px;
      display: flex;
      justify-content: center;
      white-space: normal;
    }
    .cm-lp1-06__balloon-title { font-size: 14px; line-height: 1.6; }
    .cm-lp1-06__balloon-line { font-size: 13px; line-height: 1.6; }
    .cm-lp1-06__balloon-title + .cm-lp1-06__balloon-line { line-height: 1.6; }

    /* Lime (149:2640): 全幅ブリード、map中腹〜セクション最下端 */
    .cm-lp1-06__lime-block {
      left: calc(50% - 50vw);
      right: calc(50% - 50vw);
      top: 30%;
      bottom: 0;
    }
    /* 白ACCESS (149:2643): 75.7px、中央+30px、下端でグリフ下部クリップ */
    .cm-lp1-06__deco--access {
      right: auto;
      left: calc(50% + 30px);
      transform: translateX(-50%);
      bottom: -27px;
      font-size: 75.7px;
    }
  }
/* END_SECTION:cm-lp1-06-labo */
/* START_SECTION:cm-lp1-07-voice (INDEX:22) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* Figma実測: 50x50px のうっすらしたグラフ用紙グリッド背景 (bg #fbfbfb / line #e6e6e6, 50px間隔で実測確認済み) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }

  .cm-lp1-07 {
    color: #202020;
    padding: 8px 16px 96px; /* canonical: number top+26 / CTA 下端→section 末尾 gap 復元 */
    position: relative;
    overflow: hidden;
  }
  /* 旧 section-level ::before の帯は削除 — 帯は .cm-lp1-07__band (wipe-x) に一本化 (canonical 149:1833) */
  .cm-lp1-07 > * { position: relative; z-index: 1; }
  .cm-lp1-07__container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
  }
  .cm-lp1-07__number {
    position: relative;
    z-index: 1;
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 padding-left: 8.54% は .cm-lp1-0X__container (max-width 1300) 幅に対する % で、
        1100 基準の #01/#02 とは 1440 以外で一致しなかった (750-1439 で 3 系統に分裂)。
        containing block は container の content box (viewport 中央にセンタリング) なので、
        padding-left に同じ式を入れれば #01/#02 と同一の viewport x になる。
        padding-left は box の右端を動かさないため、横スクロール / clip / section 高さへの
        影響はゼロ。SP media query 側の padding-left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    padding-left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0 0 24px;
  }
  .cm-lp1-07__header {
    position: relative;
    text-align: center;
    padding: 20px 0 28px;
    margin-bottom: 12px;
  }
  /* Watermark — canonical (149:1835): Helvetica Bold 151.448px #EEEEEE、x=639/1100・box top=108.5 */
  .cm-lp1-07__deco {
    position: absolute;
    left: calc(50% + 89px);
    top: 109px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 10.52vw, 151.5px);
    line-height: 1.6;
    color: #EEEEEE;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  /* ===== Editorial kicker — Figma Component 7 (52:6800系, PC 277×59 / SP 208×44) =====
     .mo-tag (motion.css) の罫線+縦tickをベースに canonical へ拡張。
     motion.css が後読みのため .mo-tag との複合セレクタで上書きする */
  .mo-tag.cm-lp1-kicker {
    background-color: #fff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 8px 20px;
    min-width: 277px;
    text-align: center;
  }
  .mo-tag.cm-lp1-kicker::before,
  .mo-tag.cm-lp1-kicker::after {
    top: -9px;
    bottom: -10px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): kicker の縦終端線の位置。
      canonical (Component 7 = 149:1785、PC #03-#08 の 6 箇所すべてで同一と実測確認済み) は
      縦線が横罫の端ではなく内側に立つ: 左 inset 2.89% (=8px) / 右 3.61% (=10px)。
      実装は両端フラッシュ (left:0 / right:0) で「閉じた長方形」に見えていたため bracket 形状へ戻す。
      横罫の太さ (canonical 2px / 実装 1px) は [data-mo="draw"] が background-size:100% 1px で
      描いており motion 仕様と不可分なので今回は変更しない。上下の突出 (-9/-10px) は canonical 一致済み。
      .mo-tag 基底は motion.css 側。ここでは section CSS でのみ上書きする。 {%- endcomment -%}
  .mo-tag.cm-lp1-kicker::before { left: 8px; }
  .mo-tag.cm-lp1-kicker::after  { right: 10px; }

  .cm-lp1-07__tag {
    position: relative;
    z-index: 1;
  }
  .cm-lp1-07__heading {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    {%- comment -%} forensic QA Phase 2: canonical は見出しも YuGothic Bold (149:1568 #03 / 149:1788 #06 / 149:1840 #07 で確認)。
        font-family 未宣言でテーマ既定の Noto Sans JP に落ちていた宣言漏れを解消 (実測でレイアウト影響 0)。
        client 指定の orange outline は別セレクタなので影響しない。 {%- endcomment -%}
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    {%- comment -%} canonical 149:1840 = YuGothic Bold 60px / leading 1.6 (PC)、149:2723 = leading 1.2 (SP) {%- endcomment -%}
    font-size: clamp(28px, 4.17vw, 60px);
    line-height: 1.6;
    text-align: center;
  }
  .cm-lp1-07__heading-l1,
  .cm-lp1-07__heading-l2 { display: block; }
  .cm-lp1-07__brk-sp { display: none; }
  {%- comment -%} client feedback 2026-08-14: オレンジ見出しは fill #F0552B + 黒縁取り (stroke = 1em/22)。
      「に、」「たどり着く。」は黒のままなので orange span にだけ適用する {%- endcomment -%}
  .cm-lp1-07__heading-orange {
    color: #F0552B;
    -webkit-text-stroke: calc(1em / 22) #202020;
    paint-order: stroke fill;
  }

  /* Orange band + 3 cards = 1つの composition — canonical (149:1833):
     band 1440×276 full-bleed。cards(高さ443.75)の下部160pxに重なり、cards下端から116px下まで延長 */
  .cm-lp1-07__band-wrap {
    position: relative;
    padding: 0;
    margin: 40px 0 0;
    isolation: isolate;
  }
  .cm-lp1-07__band {
    display: block;
    position: absolute;
    left: calc((100vw - 100%) / -2);
    right: calc((100vw - 100%) / -2);
    top: auto;
    height: 276px;
    bottom: -116px;
    background: #FF6030;
    z-index: 0;
    transform-origin: left center;
  }
  /* Dawn の div:empty {display:none} 対策: DOM に実子 span を持たせている (::before では :empty は外れない) */
  .cm-lp1-07__band > span { display: block; height: 100%; }

  /* SP carousel arrows (canonical 149:2748/2752) — PC では非表示 */
  .cm-lp1-07__arrow {
    display: none;
    position: absolute;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    top: 150px;
  }
  .cm-lp1-07__arrow svg { display: block; width: 100%; height: 100%; }
  .cm-lp1-07__arrow--prev { left: 56px; }
  .cm-lp1-07__arrow--next { right: 27px; }

  .cm-lp1-07__cards {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 350px));
    justify-content: center;
    gap: 16px;
    max-width: 1100px;
    margin-inline: auto;
  }
  /* Voice card (canonical 149:1845): bg-white radius 5、avatar → ▲ pointer → 引用ボックス */
  .cm-lp1-07__card {
    background: #fff;
    border-radius: 5px;
    padding: 26px 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .cm-lp1-07__card-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  /* canonical (Ellipse 7): avatar は黒細線の円形リング付き */
  .cm-lp1-07__card-avatar img {
    display: block;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1px solid #202020;
  }
  /* ▲ pointer — canonical (Union 39×23.6@750): 引用ボックス上端に載る上向き三角 */
  .cm-lp1-07__card-pointer {
    display: block;
    width: 20px;
    height: 12px;
    margin: 0 auto -1px;
    position: relative;
    z-index: 2;
  }
  .cm-lp1-07__card-pointer svg { display: block; width: 100%; height: 100%; }

  /* 引用ボックス — canonical: 本文 + attribution を 1 枠に内包、attr は下揃え。
     枠はカード下端まで伸び、attr の行が 3 カードで揃う */
  .cm-lp1-07__card-quote {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #202020;
    border-radius: 5px;
    padding: 24px 24px 14px;
  }
  .cm-lp1-07__card-body {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.8;
    color: #202020;
  }
  .cm-lp1-07__card-body b {
    color: #FF6030;
    font-weight: 700;
  }
  .cm-lp1-07__card-attr {
    margin: auto 0 0;
    padding-top: 12px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.6;
    color: #202020;
  }

  /* Mid CTA #5 — canonical (149:1905/1904): 白帯 + 上下 border #717171 + 黒 panel (1072, rounded 5)。
     band の下端延長(116px)が CTA 帯上端に接する canonical 関係を margin-top で再現 */
  .cm-lp1-07 .cm-lp1-mid-cta-wrap { margin-top: 116px; }
  .cm-lp1-07 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta {
    background: #fff;
    border-top: 1px solid #717171;
    border-bottom: 1px solid #717171;
    padding: 40px 30px;
    max-width: none;
  }
  .cm-lp1-07 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta__panel {
    max-width: 1072px;
    border-radius: 5px;
  }

  /* SP */
  @media (max-width: 749px) {
    .cm-lp1-07 { padding: 12px 12px 24px; }
    .cm-lp1-07__number { font-size: 52px; margin-bottom: 12px; }  {%- comment -%} 水平位置は共通 rail (--cm-lp1-num-x) が media query 無しで担うため、旧 padding-left: 12.4px の上書きは廃止 (rail が 390 で glyph x 24.4 を返す) {%- endcomment -%}
    .cm-lp1-07__header { padding: 12px 0 16px; }

    .mo-tag.cm-lp1-kicker { font-size: 15px; padding: 5px 15px; min-width: 208px; }
    .mo-tag.cm-lp1-kicker::before,
    .mo-tag.cm-lp1-kicker::after { top: -6px; bottom: -7px; }
    {%- comment -%} SP canonical: 罫幅 418u に対し inset L13u / R15u。
        実装の罫幅 208px へ比例換算 → 6.5px / 7.5px {%- endcomment -%}
    .mo-tag.cm-lp1-kicker::before { left: 6.5px; }
    .mo-tag.cm-lp1-kicker::after  { right: 7.5px; }

    /* canonical SP (149:2712): 75.7px、中央+73px、右端クリップ */
    .cm-lp1-07__deco {
      left: calc(50% + 73px);
      transform: translateX(-50%);
      top: 124px;
      font-size: 75.7px;
      line-height: 1;
    }
    /* canonical SP: 3 行見出し 30px */
    .cm-lp1-07__heading { font-size: 30px; line-height: 1.2; } {%- comment -%} canonical SP 149:2723 = leading 1.2 {%- endcomment -%}
    .cm-lp1-07__brk-sp { display: inline; }

    /* canonical SP (149:2733): card 525@750 = 70vw、gap 12、先頭 offset 52、右に次カードの peek */
    .cm-lp1-07__cards {
      display: flex;
      grid-template-columns: none;
      grid-auto-flow: unset;
      /* PC 用の justify-content:center が残ると overflow が左右均等に溢れ card1 が左側の
         到達不能領域へ消える → 必ず flex-start */
      justify-content: flex-start;
      gap: 12px;
      padding: 0 52px;
      overflow-x: auto;
      /* overflow-x:auto だけだと overflow-y の visible が auto に昇格し、track が
         縦スクロール可能になる。data-mo="fade-up" の初期状態 translateY(16px)
         (--mo-dist) が縦 16px の scroll 範囲を作り、横スワイプ時に中身が上下へ
         ずれて「ぐらぐら」して見えていた。縦だけスクロール不可にする。 */
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin: 0 -12px;  /* section padding を打ち消して viewport 端まで scroll 範囲を伸ばす */
      scroll-padding-left: 52px;
    }
    .cm-lp1-07__cards::-webkit-scrollbar { display: none; }
    .cm-lp1-07__card {
      flex: 0 0 70vw;
      scroll-snap-align: start;
      max-width: none;
      padding: 18px 24px 20px;
    }
    /* canonical SP band (149:2708): h=244@750=122、cards 下端 -64px まで延長 */
    .cm-lp1-07__band { height: 122px; bottom: -64px; }
    .cm-lp1-07 .cm-lp1-mid-cta-wrap { margin-top: 64px; }
    .cm-lp1-07 .cm-lp1-mid-cta-wrap .cm-lp1-inter-cta { padding: 30px 15px; }
    /* canonical SP (149:2748/2752): 62×62@750 = 32 CSS、カード外縁に配置 (本文に被せない) */
    .cm-lp1-07__arrow { display: block; width: 32px; height: 32px; }
    .cm-lp1-07__arrow--prev { left: 12px; }
    .cm-lp1-07__arrow--next { right: 12px; }
    .cm-lp1-07__card-quote { padding: 18px 18px 10px; }
    .cm-lp1-07__card-body { font-size: 15px; line-height: 1.8; }
    .cm-lp1-07__card-attr { font-size: 12px; }
    .cm-lp1-07__card-avatar img { width: 84px; height: 84px; }
  }
/* END_SECTION:cm-lp1-07-voice */
/* START_SECTION:cm-lp1-08-faq (INDEX:23) */
{%- comment -%} hash は canonical ＃ (ink 44×44) に一致させる。scaleX は幅のみで digits は歪めない。
      margin-right は scaleX のはみ出し相殺 {%- endcomment -%}
  .cm-lp1-num__hash {
    {%- comment -%} hash 最終調整 (2026-08-15): canonical の ＃ は「大きいが線が細い」(塗り率 39.7% / 縦ストローク 5.0px)。
        実装は同寸だが Bold のため 52.8% / 8.8px と 1.7 倍太く、視覚重量が過大だった。
        サイズを変えず weight のみ 700→400 にすると ink量 1017→778 (canonical 768 比 +1.3%)、
        塗り率 40.6% とほぼ一致する。hash を小さくする案 (0.61em/scaleX1.32 等) は塗り率 53% のままで
        「軽くなる」のではなく「小さくなる」ため不採用。digits は 700 のまま据え置き。 {%- endcomment -%}
    font-weight: 400;
    font-size: 0.63em;
    letter-spacing: -0.02em;
    position: relative;
    top: -0.5556em;
    display: inline-block;
    transform: scaleX(1.42);
    transform-origin: left center;
    margin-right: 0.29em;
  }

  {%- comment -%} digits 末尾 letter-spacing の払い戻し (2026-08-15):
      letter-spacing: -0.08em は最終文字の「後ろ」にも適用されるため、shrink-to-fit の
      box 右端が自然な advance より 0.08em 内側に来る。「2」のように右 side bearing が
      小さい字形では ink が box を約 0.058em はみ出し、motion.css の
      .js-mo [data-mo="line"]{ overflow: hidden } で実際に切り落とされていた
      (#02 実測: PC 6.5px / SP 3.4px)。末尾ぶんを margin で戻して paint 領域を確保する。
      glyph の x / font-size / weight / 字形は一切変えない。
      #03〜#08 は box 幅に 1000px 以上の余裕があるため無影響。 {%- endcomment -%}
  .cm-lp1-num__digits {
    margin-right: 0.08em;
  }

  /* Figma実測: 50x50px のうっすらしたグラフ用紙グリッド背景 (bg #fbfbfb / line #e6e6e6, 50px間隔で実測確認済み) */
  .cm-lp1-grid-bg {
    background-color: #fbfbfb;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): 背景グリッドの SP ピッチ。
      canonical は 50 Figma units。SP は 750u キャンバス → 390 CSS px なので 50 × (390/750) = 26px。
      PC は canonical 50u = 50 CSS px で既に一致しているため変更しない。
      線の色 (#e6e6e6) / 太さ (1px) / 背景色 (#fbfbfb) は既存維持。 {%- endcomment -%}
  @media (max-width: 749px) {
    .cm-lp1-grid-bg { background-size: 26px 26px; }
  }

  .cm-lp1-08 {
    color: #202020;
    padding: 40px 16px 80px; /* canonical: number = section top すぐ */
    position: relative;
  }
  /* canonical: FAQ list 以降の背景は白 (grid はヘッダ上部のみ)。
     PC = 1100 レール幅の白帯、SP = コンテンツ幅の白帯 (両サイドに grid が残る) */
  .cm-lp1-08::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 100%);
    top: 100px; /* canonical: 白パネルは kicker 背後から始まる */
    bottom: 0;
    background: #ffffff;
    z-index: 0;
    pointer-events: none;
  }
  .cm-lp1-08__container {
    /* was 1200 → 1300 で他 section (#02-#07) と揃える → __number x が textLeft=122 に統一。
       FAQ list は max-width:900 で centered、header 内要素も centered なので実質影響なし */
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .cm-lp1-08__site-footer { position: relative; z-index: 1; }
  .cm-lp1-08__number {
    position: relative;
    z-index: 1;
    {%- comment -%} Figma 構造準拠の再構成 (2026-08-15):
        canonical (149:2048 / 149:1781) は 1 テキストノード内で文字ごとに別 font-size:
          Helvetica Bold / not-italic / ＃ 64.5px + 数字 100px / tracking -8px (=-0.08em) / lh 1.4
        全角 ＃ は Helvetica に字形が無く Hiragino へフォールバックして縦位置が崩れる (CDP 実測) ため、
        半角 # を canonical ＃ のインク 44×44 に一致させる方式を採用。
        line-height は現状の box 高さを維持する値にし、section 高さを増やさない。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(59.9px, 6.944vw, 106.8px);  /* digits = canonical 100px @1440 */
    line-height: 0.8755;
    height: 0.8755em;  /* box 高さを font-size 非依存で固定 → inline-block の hash が行ボックスを伸ばしても section 高さは不変 */
    letter-spacing: -0.08em;
    white-space: nowrap;
    {%- comment -%} 視覚マス補正 (2026-08-15): canonical (Helvetica Bold + 全角 ＃) に対し実装は
        半角 # のぶん glyph 幅が -13.6% で、面積・黒量が軽く見えていた。
        font-size を上げると高さ (既に canonical +16.5%) がさらに悪化するため、横方向のみ scaleX で補正する。
        実測: 幅 -13.6% → -0.2% / インク量 78% → 87% / 高さは不変 / section 高さ Δ=0。
        transform-origin は glyph 左端 (= padding-left / left の位置) に合わせ、glyph x=181 を維持する。 {%- endcomment -%}
    {%- comment -%} LP 共通 number rail — Option A (2026-08-15)。定義と根拠は #01 と同一。
        旧 padding-left: 8.54% は .cm-lp1-0X__container (max-width 1300) 幅に対する % で、
        1100 基準の #01/#02 とは 1440 以外で一致しなかった (750-1439 で 3 系統に分裂)。
        containing block は container の content box (viewport 中央にセンタリング) なので、
        padding-left に同じ式を入れれば #01/#02 と同一の viewport x になる。
        padding-left は box の右端を動かさないため、横スクロール / clip / section 高さへの
        影響はゼロ。SP media query 側の padding-left 上書きは廃止した。 {%- endcomment -%}
    --cm-lp1-num-x: max(calc(4vw + 8.8px), calc(50vw - 539px));
    padding-left: calc(50% - 50vw + var(--cm-lp1-num-x));
    margin: 0 0 24px;
  }
  .cm-lp1-08__header {
    position: relative;
    text-align: center;
    padding: 20px 0 36px;
    margin-bottom: 32px;
  }
  /* Watermark — canonical (149:1900): Helvetica Bold 151.448px #EEEEEE、
     右寄り x=719/1100 (= container 中央+169px)、box top -97px。
     clip wrapper (inset:0) が canonical frame のグリフ上部クリップを再現する */
  .cm-lp1-08__deco-clip {
    position: absolute;
    /* canonical (149:1900) はフレーム上端でグリフをクリップする。
       この clip は .cm-lp1-08__container 基準なので、inset:0 だと section の
       padding-top(40px) 分だけ下から切れ、canonical より約26px 多く刈られていた
       (実測: 可視 90px / canonical 116px)。上辺を section 上端まで戻す。 */
    inset: -40px 0 0 0;
    overflow: clip;
    z-index: 0;
    pointer-events: none;
  }
  .cm-lp1-08__deco {
    position: absolute;
    left: calc(50% + 169px);
    /* clip 枠を上へ 40px 広げた分をここで相殺し、グリフの実位置は据え置く
       (canonical box top -97px 相当のまま。-97 + 40 = -57) */
    top: -57px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 10.52vw, 151.5px);
    line-height: 1.6;
    color: #EEEEEE;
    user-select: none;
    white-space: nowrap;
  }

  /* ===== Editorial kicker — Figma Component 7 (52:6800系, PC 277×59 / SP 208×44) =====
     .mo-tag (motion.css) の罫線+縦tickをベースに、canonical へ拡張:
     白チップbg / 20px Bold / tick を罫線の上下 ±9px へ延長 */
  .mo-tag.cm-lp1-kicker {
    background-color: #fff;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 8px 20px;
    min-width: 277px;
    text-align: center;
  }
  .mo-tag.cm-lp1-kicker::before,
  .mo-tag.cm-lp1-kicker::after {
    top: -9px;
    bottom: -10px;
  }

  {%- comment -%} forensic QA Phase 1 (2026-08-15): kicker の縦終端線の位置。
      canonical (Component 7 = 149:1785、PC #03-#08 の 6 箇所すべてで同一と実測確認済み) は
      縦線が横罫の端ではなく内側に立つ: 左 inset 2.89% (=8px) / 右 3.61% (=10px)。
      実装は両端フラッシュ (left:0 / right:0) で「閉じた長方形」に見えていたため bracket 形状へ戻す。
      横罫の太さ (canonical 2px / 実装 1px) は [data-mo="draw"] が background-size:100% 1px で
      描いており motion 仕様と不可分なので今回は変更しない。上下の突出 (-9/-10px) は canonical 一致済み。
      .mo-tag 基底は motion.css 側。ここでは section CSS でのみ上書きする。 {%- endcomment -%}
  .mo-tag.cm-lp1-kicker::before { left: 8px; }
  .mo-tag.cm-lp1-kicker::after  { right: 10px; }

  .cm-lp1-08__tag {
    position: relative;
    z-index: 1;
    display: inline-block;
  }
  .cm-lp1-08__heading {
    position: relative;
    z-index: 1;
    {%- comment -%} forensic QA (2026-08-15): canonical を get_design_context (149:1851 / 149:1853) で確定。
        canonical = YuGothic Bold 60px / line-height 1.6 / #202020 / center、
        kicker (Component 7) との gap は 10px。
        旧実装は 'Poppins' を先頭に宣言していたが、Poppins はこのテーマで一度も読み込まれていない
        (theme.liquid の Google Fonts は Noto Sans JP と Zen Kaku Gothic New のみ / @font-face なし)。
        CDP CSS.getPlatformFontsForNode の実測でも描画は 'Helvetica Neue [system]' で、
        Windows では system-ui = Segoe UI へ落ちるためプラットフォーム間で見た目が変わっていた。
        #01〜#07 は Phase 2 で全て YuGothic へ移行済みで、#08 だけが未移行だった。 {%- endcomment -%}
    margin: 10px 0 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(31.2px, 4.17vw, 60px);
    line-height: 1.6;
    letter-spacing: 0.02em;
  }

  /* Accordion list — canonical (149:1854): rows 1004、行間 65 (Frame153 y=381 → 154 y=564, h=118) */
  .cm-lp1-08__list {
    list-style: none;
    padding: 0;
    margin: 0 auto 110px;
    max-width: 1004px;
    display: flex;
    flex-direction: column;
    gap: 65px;
  }
  .cm-lp1-08__item .mo-acc {
    background: #fff;
    border: 1px solid #202020;
    border-radius: 5px;
    position: relative;
  }
  /* Canonical (149:2791 Group 49): 20×20 folded-corner tail bottom-right of Q box (speech bubble style) */
  .cm-lp1-08__item .mo-acc::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, transparent 50%, #202020 50%, #202020 calc(50% + 1px), #fbfbfb calc(50% + 1px));
    pointer-events: none;
  }
  /* .mo-acc__head has font:inherit — need to use higher specificity or explicit property */
  .cm-lp1-08 .cm-lp1-08__q,
  .cm-lp1-08 .cm-lp1-08__q.mo-acc__head {
    /* canonical (Frame 153): 閉行 h=118 = padding 30 + inner box 58 + 30。toggle 右余白 48 */
    padding: 30px 48px 30px 30px;
    gap: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.6;
  }
  /* Inner frame — canonical double-frame system (Frame 28/23): Q badge+text を細枠ボックスで囲む */
  .cm-lp1-08__q-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border: 1px solid #202020;
    background: #fff;
    box-sizing: border-box;
  }
  .cm-lp1-08__q-text { flex: 1; text-align: left; }

  /* Q / A badges */
  .cm-lp1-08__qa-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma canonical: 38×38 */
    width: 38px;
    height: 38px;
    border-radius: 3px;
    {%- comment -%} forensic QA (2026-08-15): canonical (149:1860) は Helvetica Bold 24px / lh1.6 / #fff。
        実描画も Helvetica Neue なので macOS では見た目不変。先頭の 'Poppins' は未ロードの
        幻フォントで、Windows でのみ system-ui (Segoe UI) へ落ちていた。宣言を実態へ揃える。 {%- endcomment -%}
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    flex: 0 0 auto;
  }
  .cm-lp1-08__qa-label--q { background: #FF6030; color: #fff; }
  .cm-lp1-08__qa-label--a { background: transparent; color: #FF6030; border: 1px solid #FF6030; }

  /* Toggle icon (motion.css handles ＋/−) — canonical (149:1863): 大きく太い記号 (~32px) */
  .cm-lp1-08 .mo-acc__toggle {
    font-size: 34px;
    font-weight: 700;
    margin-left: 18px;
    line-height: 1;
    align-self: center;
  }
  /* PC も SP と同じく開閉状態を記号で示す (closed=＋ / open=−)。
     以前は canonical (149:1848) に合わせて PC のみ "−" 固定に上書きしていたが、
     閉じている項目まで "−" に見えて状態が分からないため、その上書きを撤去し
     motion.css §12 の ＋/− をそのまま使う。SP は元から同挙動のため変更なし。 */

  /* Answer body
     motion.css の .mo-acc__body > div { overflow:hidden } は padding を切らないので、
     閉じた状態で padding 分の高さがリークするのを防ぐため、is-open のときだけ padding を付ける。
  */
  .cm-lp1-08__a-inner {
    padding: 0 32px;
    transition: padding 320ms var(--mo-ease);
    display: flex;
    flex-direction: column;
  }
  /* canonical open item (Frame 157): A badge row-rel x=38 / 本文 x=104 / 右端は inner box 右端(=66)に揃う */
  .mo-acc.is-open .cm-lp1-08__a-inner {
    padding: 16px 66px 30px 38px;
  }
  @media (min-width: 750px) {
    .mo-acc.is-open .cm-lp1-08__a-inner {
      padding: 16px 66px 30px 38px;
    }
  }
  /* canonical: A text 16px、本文幅 ~620 で折返し */
  .cm-lp1-08__a {
    margin: 0;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.85;
  }
  @media (min-width: 750px) {
    .cm-lp1-08__a { font-size: 16px; line-height: 1.75; gap: 28px; }
    .cm-lp1-08__a-text { max-width: 620px; }
  }
  .cm-lp1-08__a-text { flex: 1; }
  /* canonical (open item CTA): 黒 bg + lime 文字、角丸なし、inner box 右端に右寄せ */
  .cm-lp1-08__inline-cta {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #202020;
    color: #D4FE16;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 0;
    margin-left: auto;
    align-self: flex-end;
  }
  /* ::after arrow removed — HTML already has <span>›</span> */
  .cm-lp1-08__inline-cta > span { font-weight: 700; }
  @media (min-width: 750px) {
    .cm-lp1-08__inline-cta { margin-top: 20px; padding: 12px 24px; font-size: 14px; }
  }

  /* Final footer CTA — Figma canonical (149:1906):
       白帯は 1440 full-bleed + border #717171、黒 panel は 1072 (FAQ 1004 より広い階層) */
  /* 二重クラスで specificity 0-2-0 に固定:
     hero.liquid の共通 .cm-lp1-inter-cta { margin: 0 } が compile 順で後に来ると
     margin-left の full-bleed 補正が打ち消され width:100vw だけ残り +70px 右ズレするため */
  .cm-lp1-inter-cta.cm-lp1-08__footer-cta {
    width: 100vw;
    margin: 0 0 0 calc((100vw - 100%) / -2);
    border-top-color: #717171;
    border-bottom-color: #717171;
  }
  .cm-lp1-08__footer-cta-panel {
    max-width: 1072px;
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
  }
  .cm-lp1-08__footer-cta-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  .cm-lp1-08__footer-cta-lead {
    margin: 0;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.6;
    color: #fff;
  }
  .cm-lp1-08__footer-cta-sub {
    margin: 0;
    font-weight: 500;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.6;
    color: #fff;
  }
  /* canonical root render 実測: PC = 「無料相談を予約する｜1分で完了」、SP = 「リノ研に相談してみる｜1分で完了」 */
  .cm-lp1-08__footer-cta-pc { display: inline; }
  .cm-lp1-08__footer-cta-sp { display: none; }

  /* Site footer (149:1917): h=82, bg #202020, ©️ text lime 12px center */
  .cm-lp1-08__site-footer {
    background: #202020;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-top: 1px solid #717171;
  }
  .cm-lp1-08__site-footer-copy {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.6;
    color: #D4FE16;
    text-align: center;
  }
  @media (max-width: 749px) {
    .cm-lp1-08__site-footer { height: 60px; padding: 20px; }
    .cm-lp1-08__site-footer-copy { font-size: 11px; }
  }

  /* SP */
  @media (max-width: 749px) {
    .cm-lp1-08 { padding: 16px 12px 40px; }
    .cm-lp1-08__number { font-size: 52px; margin-bottom: 8px; }  {%- comment -%} 水平位置は共通 rail (--cm-lp1-num-x) が media query 無しで担うため、旧 padding-left: 12.4px の上書きは廃止 (rail が 390 で glyph x 24.4 を返す) {%- endcomment -%}
    .cm-lp1-08__header { padding: 8px 0 16px; }
    /* canonical SP (149:2756): watermark 無し */
    .cm-lp1-08__deco-clip { display: none; }
    {%- comment -%} SP canonical (149:2766): FAQ text box 122×96 units。96 ÷ 1.6 = 60 units → ×0.52 = 31.2 CSS。
        旧 36px / lh1 から canonical の 31.2px / lh1.6 (base 継承) へ。 {%- endcomment -%}
    .cm-lp1-08__heading { font-size: 31.2px; }

    .mo-tag.cm-lp1-kicker { font-size: 15px; padding: 5px 15px; min-width: 208px; }
    .mo-tag.cm-lp1-kicker::before,
    .mo-tag.cm-lp1-kicker::after { top: -6px; bottom: -7px; }
    {%- comment -%} SP canonical: 罫幅 418u に対し inset L13u / R15u。
        実装の罫幅 208px へ比例換算 → 6.5px / 7.5px {%- endcomment -%}
    .mo-tag.cm-lp1-kicker::before { left: 6.5px; }
    .mo-tag.cm-lp1-kicker::after  { right: 7.5px; }
    .cm-lp1-08__footer-cta-pc { display: none; }
    .cm-lp1-08__footer-cta-sp { display: inline; }
    /* canonical SP: 白帯はコンテンツ幅の中央カラム (両サイドに grid が残る)、上端は＃08直下 */
    .cm-lp1-08::before { width: auto; left: 12px; right: 12px; transform: none; top: 45px; }
    /* canonical SP: rows 590@750=295 (コンテンツから inset 28)、行間 20 */
    .cm-lp1-08__list { gap: 20px; margin-bottom: 40px; padding: 0 28px; }
    .cm-lp1-08 .cm-lp1-08__q,
    .cm-lp1-08 .cm-lp1-08__q.mo-acc__head { padding: 15px 13px 15px 11px; font-size: 14px; gap: 0; line-height: 1.5; }
    .cm-lp1-08__q-box { padding: 8px 12px; gap: 8px; }
    .cm-lp1-08 .mo-acc__toggle { font-size: 22px; margin-left: 8px; }
    .cm-lp1-08__qa-label { width: 19px; height: 19px; font-size: 12px; border-radius: 2px; }
    .cm-lp1-08__a-inner { padding: 0 13px; }
    .mo-acc.is-open .cm-lp1-08__a-inner { padding: 8px 13px 16px; }
    .cm-lp1-08__a { font-size: 13px; gap: 12px; line-height: 1.75; }
    .cm-lp1-08__a-text { max-width: none; }
    .cm-lp1-08__inline-cta { margin-left: auto; padding: 9px 14px; font-size: 11px; border-radius: 0; }
    .cm-lp1-08__footer-cta { padding: 28px 16px 32px; }
    .cm-lp1-08__footer-cta-sub { font-size: 12px; }
    {%- comment -%} client feedback 2026-08-21 (SP CTA responsive)。
        下 2 行 (.cm-lp1-08__footer-cta-label / -arrow-block) は 6d45b55 当時の class 名で、
        その後 markup が共通の .cm-lp1-inter-cta__btn-label / __arrow へ改名された際に
        取り残された死にルール。結果 SP のラベルは共通 base の 17px に戻っていた。
        canonical SP (149:2693) 実測: lime btn 590 device / 文字 ink 幅 453 device
        = 0.52 換算で btn 306.8 CSS / 文字 235.6 CSS → font ≈ 15.2px。
        実装は arrow を canonical 35.4 → 56 CSS へ拡大した承認済み逸脱があるため、
        17px のままだと 375 で文字が 2.9px 欠け、390 でも左右 4.6px しか残らない
        (= client 指摘の「ギリギリ」)。矢印は縮めない方針なので、
        本来の意図 (= 上の死にルール = canonical) どおり 15px へ戻す。
        specificity 0-2-0: hero.liquid 側 base (0-1-0) に compile 順に依らず勝つため。 {%- endcomment -%}
    .cm-lp1-08__footer-cta .cm-lp1-inter-cta__btn-label { font-size: 15px; }
    {%- comment -%} pre-ads: text wrapper は縮んで折り返せる 1 つの flex item として振る舞わせる {%- endcomment -%}
    .cm-lp1-08__footer-cta-txt { flex: 0 1 auto; min-width: 0; }
    {%- comment -%} 320 CTA line-break polish: keep-all でも「｜」の直後は改行機会が残り、
        「リノ研に相談してみる｜ / 1分で完了」と区切り記号が行末にぶら下がっていた。
        補足句をひとまとまりにして、改行を <wbr> の位置 (「｜」の直前) だけに限定する。
        320〜340 で 「リノ研に相談してみる」/「｜1分で完了」、350 以上は 1 行。 {%- endcomment -%}
    .cm-lp1-08__footer-cta-meta { white-space: nowrap; }
    {%- comment -%} pre-ads: lead 「まずは、無料相談から。」は 24px 固定だと 320 (内寸 256) で
        264px 必要になり「ら。」が孤立して 2 行になる。330px 未満だけ連続的に詰める
        (min 値のみ可変。340 以上は従来どおり 24px)。 {%- endcomment -%}
    .cm-lp1-08__footer-cta-lead { font-size: clamp(min(24px, calc(7.3vw - 0.1px)), 3vw, 40px); }
    .cm-lp1-08__footer-cta-label { padding: 14px 12px; font-size: 15px; }
    .cm-lp1-08__footer-cta-arrow-block { padding: 0 14px; }
    .cm-lp1-08 .mo-cta__arrow { font-size: 18px; }
  }
/* END_SECTION:cm-lp1-08-faq */
/* START_SECTION:cm-lp1-hero (INDEX:24) */
/* ============================================================
     LP1 FV セクション スタイル（Figma に忠実に寄せた第二版）
     ============================================================ */

  /* -------------------------------------------
     LP ページ以外への副作用抑制
     motion.css の body { padding-top: 46px } と既存テーマヘッダーを LP に限定
     ------------------------------------------- */
  body:not(:has(.cm-lp1-hero)) { padding-top: 0; }
  body:has(.cm-lp1-hero) .header-wrapper,
  body:has(.cm-lp1-hero) sticky-header { display: none !important; }
  /* canonical はテーマ footer (SNS/メニュー) を持たない — LP は独自 .cm-lp1-08__site-footer で終端 */
  body:has(.cm-lp1-hero) .shopify-section-group-footer-group { display: none !important; }

  /* -------------------------------------------
     SP 追従 CTA（Motion Spec §11）
     motion.css の .mo-sticky-cta が「pos:fixed / bottom:0 / SP のみ表示」
     を担当。ここでは中身のボタン意匠のみ定義する。
     ------------------------------------------- */
  .cm-lp1-sticky-cta__btn {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    {%- comment -%} pre-ads responsive audit 2026-08-21 — P1 追従 CTA 崩れ。
        横 padding 26px / gap 8px / max-width calc(100% - 24px) がすべて固定のため、
        320〜355 で「無料相談を予約する」「1分で完了・相談無料」が **どちらも 2 行**に折り返し、
        バー高さが 45 → 66px に膨らんで壊れて見えていた。
        3 値とも 375px でちょうど従来値に一致する係数で連続的に詰める
        (375 以上は実寸完全不変)。 {%- endcomment -%}
    gap: min(8px, calc(5.45vw - 12.4px));
    padding: 12px min(26px, calc(30.9vw - 89.9px));
    background: var(--mo-lime, #D4FE16);
    color: var(--mo-ink, #111);
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    max-width: calc(100% - min(24px, calc(29.1vw - 85.1px)));
  }
  .cm-lp1-sticky-cta__meta {
    font-size: 11px;
    font-weight: 500;
    opacity: .78;
    letter-spacing: 0.06em;
  }
  .cm-lp1-sticky-cta__arrow {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
  }

  /* -------------------------------------------
     LP mini header — Figma canonical (149:1363 / 149:1364 / 149:1376)
       - 外枠 1440 width, bg #fff, border-bottom 0.5px #202020
       - 内枠 (contents) 1340 width, height 60, items-center, py 28
       - Logo と btn 間は justify-between（gap 830px 相当）
     motion.css .mo-header の height 46px を LP スコープで 60px に上書き。
     body padding-top も 46→60px に合わせる。
     ------------------------------------------- */
  body:has(.cm-lp1-hero) { padding-top: 60px; }
  /* .mo-header + .cm-lp1-header の 2 クラスで specificity 0-2-0 → motion.css .mo-header (0-1-0) を上書き */
  /* スクロール後 (.is-stuck) の背景を白にする。motion.css の
     `.mo-header.is-stuck { background: rgba(244,243,239,.94) }` (0,2,0) が薄いベージュを出すため、
     LP スコープの (0,3,0) で background だけ上書きする。blur / shadow / 高さ等は据え置き。 */
  .mo-header.cm-lp1-header.is-stuck { background: #ffffff; }
  .mo-header.cm-lp1-header {
    background: #ffffff;
    color: var(--mo-ink);
    height: 60px;
    border-bottom: 0.5px solid #202020;
    padding: 0 clamp(20px, calc((100% - 1340px) / 2 + 50px), 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cm-lp1-header__logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
  }
  .cm-lp1-header__logo img {
    display: block;
    height: 22.91px;
    width: 214px;
    max-width: 214px;
  }
  .cm-lp1-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 40px; /* Figma canonical (149:1376): btn area gap-40 */
  }
  /*
     ヘッダー CTA — Figma canonical (149:1377 "btn_reserv"):
       - 幅 211px / 高さ 45px / bg #202020 / radius 5
       - ラベル: YuGothic Bold 16px, color #D4FE16, "かんたん来店予約"
       - 矢印: 21×21 SVG (lime bg + 黒 chevron), gap 10, padding 10
   */
  .cm-lp1-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #202020;
    color: #D4FE16;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    line-height: 1.6;
    white-space: nowrap;
    height: 45px;
    width: 211px;
    padding: 0 10px;
    transition: opacity 200ms var(--mo-ease);
  }
  .cm-lp1-header__cta:hover { opacity: .9; }
  .cm-lp1-header__cta-label {
    display: inline-flex;
    align-items: center;
  }
  .cm-lp1-header__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
  }
  .cm-lp1-header__cta-arrow img {
    display: block;
    width: 21px;
    height: 21px;
  }

  /* ハンバーガー: 3 行 × (dot + 30×3 bar) + MENU ラベル
     Figma canonical (149:1382 menu / 149:1986 SP menu):
       - 3 行, 行間 4.2px (SP 3.3px), dot-bar gap 4.2px (SP 3.3px)
       - 3 行の dot は canonical 画像上ではすべて同一の黒塗り小四角 (■×3)
         内部 node 分類 (outline / solid / chevron) は視覚に現れないため、
         source of truth = canonical 画像 に従い一律 solid dark で描画する
       - bar: PC 30×3 / SP 22.9×2.6
       - MENU label: Helvetica Bold 12.6px (SP 9.4px), letter-spacing 1.26 (SP .94)
   */
  .cm-lp1-header__hamburger {
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: inherit;
    cursor: default;
  }
  .cm-lp1-header__hamburger-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4.2px;
  }
  .cm-lp1-header__hamburger-row {
    display: inline-flex;
    align-items: center;
    gap: 4.2px;
  }
  /* 3 dots はすべて同一の黒塗り小四角 (canonical 画像基準)
     Frame 138 (5.25×5.25) を dot 自身の塗りで再現。border+inner bg は視覚差なしのため
     単一 background で表現する。SP 側は width/height のみ override。 */
  .cm-lp1-header__hamburger-dot {
    display: inline-block;
    width: 5.25px;
    height: 5.25px;
    background: #202020;
    flex-shrink: 0;
  }
  .cm-lp1-header__hamburger-bar {
    display: block;
    width: 30px;
    height: 3px;
    background: #000;
  }
  .cm-lp1-header__hamburger-label {
    display: block;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 12.6px;
    font-weight: 700;
    letter-spacing: 1.26px;
    line-height: 1.2;
    color: #000;
  }

  /* ---------- ハンバーガー ⇄ CLOSE (✕) 切り替え ---------- */
  .cm-lp1-header__close-icon {
    display: none;
    position: relative;
    width: 30px;
    height: 30px;
  }
  .cm-lp1-header__close-icon::before,
  .cm-lp1-header__close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 3px;
    background: #202020;
    border-radius: 1px;
  }
  .cm-lp1-header__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
  .cm-lp1-header__close-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }
  .cm-lp1-header__hamburger-label-close { display: none; }
  /* menu open: ☰ → ✕ / MENU → CLOSE */
  .cm-lp1-header__hamburger[aria-expanded="true"] .cm-lp1-header__hamburger-icon { display: none; }
  .cm-lp1-header__hamburger[aria-expanded="true"] .cm-lp1-header__close-icon { display: block; }
  .cm-lp1-header__hamburger[aria-expanded="true"] .cm-lp1-header__hamburger-label-open { display: none; }
  .cm-lp1-header__hamburger[aria-expanded="true"] .cm-lp1-header__hamburger-label-close { display: inline; }

  /* ---------- メニュー drawer / scrim ----------
     canonical: 修正0720 「menue」。幅は右からの drawer min(420px, 86%)。
     header (z-index 400) より背面に置き、✕/CLOSE を常に見せる。 */
  .cm-lp1-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 380;
    background: rgba(32, 32, 32, .45);
    opacity: 0;
    transition: opacity 380ms var(--mo-ease, cubic-bezier(.22, .61, .36, 1));
  }
  /* 既存テーマの base CSS に `div:empty { display: none }` (0,1,1) があり、
     意図的に空要素である scrim が消えてしまう。クラスを 2 回重ねて (0,2,0) で明示的に勝つ。
     ただし [hidden] のときは UA の display:none を残さないと、閉じている間も透明な scrim が
     全画面を覆ってページ全体のクリックを奪うため、:not([hidden]) で限定する。 */
  .cm-lp1-menu-scrim.cm-lp1-menu-scrim:not([hidden]) { display: block; }
  .cm-lp1-menu-scrim.is-open { opacity: 1; }
  .cm-lp1-menu {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    z-index: 390;
    width: min(420px, 86%);
    background: #ffffff;
    border-left: 1px solid #202020;
    padding: 40px 28px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 440ms var(--mo-ease, cubic-bezier(.22, .61, .36, 1));
  }
  .cm-lp1-menu.is-open { transform: translateX(0); }
  .cm-lp1-menu__title {
    margin: 0 0 28px;
    text-align: center;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #202020;
  }
  .cm-lp1-menu__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
  }
  /* item は OPEN 140ms 後から 45ms 間隔で右から追いかけて入る */
  .cm-lp1-menu__item,
  .cm-lp1-menu__cta {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 320ms var(--mo-ease, cubic-bezier(.22, .61, .36, 1)),
                transform 320ms var(--mo-ease, cubic-bezier(.22, .61, .36, 1));
  }
  .cm-lp1-menu.is-open .cm-lp1-menu__item,
  .cm-lp1-menu.is-open .cm-lp1-menu__cta {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(140ms + var(--i, 0) * 45ms);
  }
  .cm-lp1-menu__item + .cm-lp1-menu__item { margin-top: 4px; }
  .cm-lp1-menu__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #202020;
    text-decoration: none;
  }
  .cm-lp1-menu__chev { color: #202020; font-size: 15px; }
  .cm-lp1-menu__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #202020;
    color: #D4FE16;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .cm-lp1-menu__cta-sep { color: #D4FE16; opacity: .7; }
  .cm-lp1-menu__cta-sub { font-size: 14px; }
  .cm-lp1-menu__cta-arrow { display: inline-flex; width: 21px; height: 21px; flex: none; }
  .cm-lp1-menu__cta-arrow img { display: block; width: 100%; height: 100%; }
  /* 固定ヘッダー分だけアンカー位置を下げる (JS が各セクションに id を付与する) */
  [id^="cm-lp1-anchor-"] { scroll-margin-top: 60px; }
  @media (prefers-reduced-motion: reduce) {
    .cm-lp1-menu,
    .cm-lp1-menu-scrim,
    .cm-lp1-menu__item,
    .cm-lp1-menu__cta { transition: none !important; }
  }

  /* -------------------------------------------
     セクション全体: flex column で viewport にフィット
     ------------------------------------------- */
  .cm-lp1-hero {
    /* canonical hero+bar 領域 = FV(768) + dark bar(115) + light strip after bar (~42px) = 925 total canvas Y
       = 862 (after y=60 header offset).
       修正: Hero に padding-bottom 42px + bg #FBFBFB で bar 下の light strip を再現 */
    position: relative;
    color: var(--mo-ink);
    background: #FBFBFB;
    display: flex;
    flex-direction: column;
    padding-bottom: 40px; /* canonical light strip 883-922 = 40px */
  }
  .cm-lp1-hero__stage {
    /* Figma canonical FV frame 149:1323 = 1440×768. However visually the BG image ends around
       y=748 (bg h=688 + top offset 60), leaving white space y=748-768. Bar starts at y=780ish
       (在 canonical) with tags floating from y=~715-770. Stage height = 768 で bar 位置は正しい。 */
    aspect-ratio: 1440 / 768;
    min-height: 560px;
    max-height: 900px;
  }

  /* -------------------------------------------
     ステージ（背景写真 + 装飾テキスト + カード）
     ------------------------------------------- */
  .cm-lp1-hero__stage {
    position: relative;
    /* aspect-ratio / min-height / max-height は上のブロックで定義済（Figma canonical 149:1323 の 1440/768 に固定）。
       ここでは flex: 1 を外して aspect-ratio を尊重する。 */
    display: flex;
    /*
      Figma 実測: カードは stage の上端寄りに置く（下 1/3 は余白）。
      align-items:center だと card が縦センターに来て 100px 前後下ズレする。
     */
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    /* Figma canonical: 50x50 グラフ用紙グリッド (bg #fbfbfb / line #e6e6e6) */
    background-color: #FBFBFB;
    background-image:
      linear-gradient(to right, #e6e6e6 1px, transparent 1px),
      linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    background-size: 50px 50px;
  }

  /*
    Figma MCP実測 (node=149:1331 "ph.png"): left=465px, width=975px, FV全体幅=1440px。
    975/1440 = 67.708% が正確な値。以前の 55% はPNG目算による誤差だった
    (この誤差が原因で写真が細くなり、結果的に右側に余白ができ「FV全体が左に寄って見える」
    というユーザー指摘の原因になっていたと考えられる)。
   */
  .cm-lp1-hero__bg {
    /* Figma canonical (149:1331 "ph.png"): left=465, top=60, w=975, h=688.
       → left 32.29%, top 7.81%, w 67.71%, h 89.58%. 右端まで extend
       ---
       修正: 写真コンテナを stage 上端まで持ち上げ (top 7.81% → 0)。
       canonical crop (hero-with-bar.png) は写真上端を y=0 としてクロップされているため、
       Browser section screenshot も stage 上端に写真を配置しないと 60px の空白が上部に
       出て canonical と一致しなくなる。他の property (left/width/height) は canonical spec のまま。 */
    position: absolute;
    top: 0;
    left: 32.29%;
    width: 67.71%;
    height: 89.58%;
    z-index: 2;
    overflow: hidden;
  }
  .cm-lp1-hero__bg-img {
    /* Figma canonical image position (inside 975×688 container): w=111%, h=104.87%, left=-7.61%, top=-4.91%.
       canonical は object-fit なしの stretched image → browser も同じにして crop 挙動を canonical と一致させる */
    display: block;
    position: absolute;
    left: -7.61%;
    top: -4.91%;
    width: 111%;
    height: 104.87%;
    max-width: none;
  }

  /*
     NAKAMEGURO / RESIDENCE 大文字装飾（LEFT・静止）
     ---
     ※修正メモ: 従来 font-size clamp(48px,8vw,108px) だとカード（max-width 660px, 中央寄せ）
     に文字が突っ込んで NAKA / RESID の途中で見切れていた。
     カード左端手前で確実に止まるよう left/right でアンカーし、
     right は calc(50% + 350px) = カード左端より 20px 手前で終端。
     加えて font-size を縮め、overflow: hidden で万一の溢れは綺麗に切り落とす。
     PC 幅が狭い（<1280px）とスペース自体が足りないので隠す。
   */
  /* Figma MCP実測 (node=149:1324 "deco", FVフレーム実寸1440x768基準):
     - 3行とも Helvetica Bold, font-size 212.465px (=14.75% of 1440幅), line-height 0.8。
     - 右端アンカー (right-edge-x / 1440 の割合を CSS の right プロパティに変換):
       行1 NAKAMEGURO:      right-edge 1585.13px → right: -10.08%,  top:  6.38% (49/768),  color #f5f5f5
       行2 RENOVATION:      right-edge 1397.72px → right:   2.94%,  top: 40.49% (311/768), color #ffffff
       行3 RESEARCH CENTER: right-edge 2111px    → right: -46.60%, top: 74.61% (573/768), color #f5f5f5
     - 写真(.cm-lp1-hero__bg)より奥に配置（DOM順で先・z-indexも下）。
       文字はカードや写真の隙間(白背景部分)からわずかに覗く「奥の巨大文字」演出。
   */
  .cm-lp1-hero__deco {
    /* canonical: NAKAMEGURO/RENOVATION/RESEARCH CENTER が stage bg 上に薄く見える
       stage bg #FBFBFB の上、card z=2 の下に配置 (z-index: 1) */
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }
  .cm-lp1-hero__deco-line {
    position: absolute;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    /* Figma MCP実測 (node=149:1326 "Group 4"): Helvetica Bold, 212.465px, leading 0.8, text-right. */
    font-size: 212.465px;
    line-height: 0.8;
    white-space: nowrap;
    text-align: right;
    /* Figma spec 上 stroke は存在しない。ただし canonical PNG 実 pixel では文字エッジに
       227-234 (grid線色 #e6e6e6=230 相当) の濃い pixel 帯が確認され、通常 AA では説明できない。
       Chromium 側の visual compensation として、grid 線と同色 (#e6e6e6) の 1px stroke を
       付与して canonical のエッジ濃度に近づける。目的は「canonical に存在するごく薄い edge の再現」であり、
       アウトライン文字化ではない。 */
    -webkit-text-stroke: 1px #e6e6e6;
  }
  /* Figma MCP実測 (node=149:1327/1328/1329):
     NAKAMEGURO: left=14.13, top=49, color #f5f5f5
     RENOVATION: left=10.72, top=311, color #ffffff
     RESEARCH CENTER: left=-15, top=573, color #f5f5f5
     PROJECT_RULES に従い Figma canonical 正 → 3行目は "RESEARCH CENTER"。 */
  /* 3行共通で -54px vertical compensation (Figma 262px 間隔を維持):
     Figma spec top 49/311/573 → 実装 top -5/257/519。理由は canonical crop が photo top を
     基準にしているため実 glyph 位置が spec より 54px 上に見える。3行同時にオフセットして
     canonical と同じ縦重心を再現しつつ 262px 行間を保持。 */
  .cm-lp1-hero__deco-line--1 { left: 14px;  top: -5px;  color: #f5f5f5; }
  .cm-lp1-hero__deco-line--2 { left: 11px;  top: 257px; color: #ffffff; }
  .cm-lp1-hero__deco-line--3 { left: -15px; top: 519px; color: #f5f5f5; }
  /* PC では SP専用要素を無効化 */
  .cm-lp1-sp-break { display: none; }
  .cm-lp1-hero__tag-pc-only { display: inline; }
  .cm-lp1-hero__tag-line { display: inline; }
  .cm-lp1-hero__subcopy-part { display: inline; }
  /* sp-only must override tag-line inline rule → declare last + higher specificity. */
  .cm-lp1-hero .cm-lp1-hero__tag-sp-only { display: none; }

  /*
     白カード（Figma 実測に合わせて左寄せ）
     ---
     Figma: キャンバス幅 1459 に対し、カード左端 ~95px (6.5%)、右端 ~825px (56.5%)、
     つまりカード幅 ~730px、左オフセット 6.5%。中央揃えではなく左寄りアンカー。
   */
  .cm-lp1-hero__card-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Figma canonical (149:1333 "base"): left=81 top=123 in FV frame (1440×768).
       Padding-left: 81/1440 = 5.625% (min 12px).
       Padding-top: canonical crop starts at photo top (FV y=60), so card top in crop = 123-60=63.
       Browser section screenshot starts at section top (= FV top, since photo already fixed to y=0),
       so card padding-top must match canonical crop-y = 63 (not the raw FV y=123). */
    /* canonical card left = 81 (81/1440 = 5.625vw) */
    padding: clamp(30px, 4.375vw, 63px) 16px 0 clamp(14px, 5.625vw, 81px);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .cm-lp1-hero__card {
    position: relative;
    background: #ffffff;
    /* Figma canonical (149:1333): 728.4×528, rounded-5, shadow 0 0 5.6 rgba(183,180,180,.25)
       top padding = 188-123 = 65 (実測)
       bottom padding = 528 - (note bottom 585-123) = 528 - 462 = 66
       但し browser の note bottom は content 拡張分ズレるので padding-bottom で card height を絞る */
    /* bottom padding 66 = canonical card 528 - (note bottom 585 - card top 123) */
    padding: clamp(28px, 4.51vw, 65px) clamp(24px, 4.03vw, 58px) clamp(28px, 4.58vw, 66px);
    border-radius: 5px;
    box-shadow: 0 0 5.6px 0 rgba(183, 180, 180, 0.25);
    max-width: 728.4px;
    width: 100%;
    text-align: center;
  }

  /* + マーク（4隅） */
  .cm-lp1-hero__card-cross {
    position: absolute;
    color: var(--mo-ink);
    font-size: 20px; /* canonical 20.123px */
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    user-select: none;
  }
  /*
    Figma 実測 (design/PC-Design.png @ 1459 canvas):
    + マーク 4 点の座標 = (175.5, 188.8) / (745.5, 188.8) / (175.5, 584.8) / (745.5, 584.8)
    → 幅 570px × 高さ 396px の対称四角形。
    カード幅 730px に対し、左右のインセットは (730-570)/2 ≈ 80px。
    上下も同じく約 27px カード内側にインセット（カード高 ≈ 450px 目安）。
    以前の -10px カード外周オフセットは Figma と正反対だったため修正。
   */
  /* canonical (149:1354-1357): + at (150,173) (720,173) (150,569) (720,569) FV-relative.
     card at (81,123). + relative to card: (69,50) (639,50) (69,446) (639,446).
     Bottom + marks use `bottom` (not `top: 446`) for responsive stability: card height
     varies with content/viewport, so bottom + must anchor to card bottom, not card top.
     bottom = 528 - 446 = 82px (Figma card height 528). */
  .cm-lp1-hero__card-cross--tl { top: 50px;    left: 69px;  }
  .cm-lp1-hero__card-cross--tr { top: 50px;    right: 69px; }
  /* canonical bottom + glyph top 569 → glyph bottom ~597, card bottom 651 → bottom 62 (82 は glyph 高さ分の誤差) */
  .cm-lp1-hero__card-cross--bl { bottom: 62px; left: 69px;  }
  .cm-lp1-hero__card-cross--br { bottom: 62px; right: 69px; }

  .cm-lp1-hero__card-intro {
    /* Figma canonical (149:1362): マンションの「購入」「リノベ」 = 36.991px YuGothic Bold black */
    margin: 0;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-size: clamp(16px, 2.57vw, 37px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000;
  }

  .cm-lp1-hero__heading {
    /* canonical (149:1339): flex-col gap-10.211, py-10.211 で 2 行間隔を作る.
       font-family: Yu Gothic (Figma canonical) → Hiragino (Mac fallback) → Zen Kaku Gothic New
       (Google Fonts loaded via theme.liquid, YuGothic系形状) → Noto Sans JP. */
    /* canonical (149:1339): container py 10.211 → heading line1 glyph top = 256 (not 246) */
    margin: 26px 0 0;
    line-height: 1.0;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .cm-lp1-hero__heading-xl,
  .cm-lp1-hero__heading-lg,
  .cm-lp1-hero__heading-md,
  .cm-lp1-hero__heading-outline {
    line-height: 1.0;
    /* 親 .cm-lp1-hero__heading の font-size: 0 のせいで letter-spacing: -.02em が
       0em 相当になり効かなかった。各 span で明示指定して Figma tracking を再現。 */
    letter-spacing: -0.02em;
  }
  .cm-lp1-hero__heading-line { display: block; }
  /* canonical: flex-col gap 10.211px between the two heading lines */
  .cm-lp1-hero__heading-line + .cm-lp1-hero__heading-line { margin-top: 10px; }
  /* Figma spec: 100.943 / 82.163 / 78.55 / 96.665. letter-spacing -0.02em で幅縮小し spec 通りに配置可 */
  .cm-lp1-hero__heading-xl { font-size: clamp(34px, 7.01vw, 100.943px); }
  .cm-lp1-hero__heading-lg { font-size: clamp(28px, 5.71vw, 82.163px); }
  .cm-lp1-hero__heading-md { font-size: clamp(26px, 5.45vw, 78.55px); }
  .cm-lp1-hero__heading-outline { font-size: clamp(32px, 6.71vw, 96.665px); }

  /*
     「できる」アウトライン中抜き文字（Figma 忠実）。静止・アニメなし。
     ---
     ※修正メモ:
     - color: transparent だけでは cascade 経由で -webkit-text-fill-color が残るため
       -webkit-text-fill-color: transparent を明示。
     - specificity を 020 に上げる（.cm-lp1-hero prefix）。
     - stroke-width 2px は「き」「る」の内側曲線が自己交差して黒く潰れるため 1.5px に下げる。
       これで「き」の中央ループと「る」のループが視認できるようになる。
   */
  .cm-lp1-hero .cm-lp1-hero__heading-outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px var(--mo-ink);
    /* Canonical (149:1347): "できる" は 96.665px WHITE. Stroke 細めで sharp に */
  }

  .cm-lp1-hero__subcopy {
    /* Figma canonical (149:1350): black bar bg #202020, padding 9.268px, text 22.243px YuGothic Bold white */
    display: inline-block;
    background: #202020;
    color: #fff;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    padding: clamp(6px, 0.64vw, 9.268px) clamp(12px, 1.53vw, 22px);
    /* canonical subcopy top = 477 (heading line2 bottom 464.4 + 12.6) */
    margin: clamp(6px, 0.9vw, 13px) 0 clamp(15px, 1.74vw, 25px);
    font-size: clamp(14px, 1.545vw, 22.243px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -.02em;
  }
  .cm-lp1-hero__note {
    /* Figma canonical (149:1338): 18px YuGothic Bold #202020, leading 1.6, width 497 centered */
    margin: 0;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-size: clamp(12px, 1.25vw, 18px);
    color: #202020;
    font-weight: 700;
    line-height: 1.6;
  }

  /* -------------------------------------------
     .mo-marker--fill 色調整（黒文字＋角丸 chip 見た目に）
     motion.css の .mo-marker--fill はデフォルト白文字なので本セクション内でのみ黒に。
     ------------------------------------------- */
  .cm-lp1-hero .mo-marker--fill,
  .cm-lp1-hero .mo-marker--fill-lime {
    /* canonical (149:1360/1361): rects 77×55 / 112×55 behind 購入/リノベ.
       font 37 + 4 top + 4 bottom padding = ~46 approx → tune with line-height compact.
       Pipeline forces bg-size 100% 42% for motion-off; override to full rect. */
    color: var(--mo-ink);
    border-radius: 0;
    padding: 4px 8px !important;
    background-size: 100% 100% !important;
  }

  /* -------------------------------------------
     .mo-marker--fill-lime（本セクション追加、ライム塗り + 黒文字）
     motion.css の .mo-marker--fill と同じアニメーションパターンをライム版で複製。
     ------------------------------------------- */
  .mo-marker--fill-lime {
    padding: 2px 8px;
    color: var(--mo-ink);
    background-image: linear-gradient(var(--mo-lime), var(--mo-lime));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
  }
  .js-mo .mo-marker--fill-lime {
    background-size: 0% 100%;
    transition: background-size var(--mo-dur-m) var(--mo-ease-wipe);
    transition-delay: var(--mo-delay, 0ms);
  }
  .js-mo .mo-marker--fill-lime.is-in { background-size: 100% 100%; }
  .js-mo [data-mo="line"].is-in .mo-marker--fill-lime { background-size: 100% 100%; }

  /* FV「マンションの『購入』『リノベ』」の行マスク下端を広げる。
     motion.css の `.js-mo [data-mo="line"] { padding-bottom:.14em; margin-bottom:-.14em }` (0,2,0) では
     ライムマーカーの下端が overflow:hidden で刈られるため、この行だけ (0,3,0) で padding を増やす。
     margin-bottom で相殺し、FV 全体の高さは増やさない。
     他セクション / FV 見出し行 (.cm-lp1-hero__heading-line) には影響させない。 */
  .js-mo .cm-lp1-hero__card-intro[data-mo="line"] {
    padding-bottom: .8em;
    margin-bottom: -.8em;
  }

  /* -------------------------------------------
     下部黒帯: 吹き出しタグ + 大 CTA + 日付注記
     ------------------------------------------- */
  .cm-lp1-hero__bar {
    /* Figma canonical 実測: dark bar 115 tall. Compact padding で厚み削減。
       margin-top: canonical bar top matching は -75px (以前 -63 では bar が 12px 低かった)。 */
    background: #202020;
    color: #fff;
    padding: 10px 16px 8px;
    /* canonical band top = 762 (stage bottom 828 - 66) */
    margin-top: -66px;
    flex: none;
    position: relative;
    z-index: 2;
  }
  /* CTA を canonical 60px 高さにするため padding 縮小 */
  .cm-lp1-hero__cta { max-width: 548px; }

  .cm-lp1-hero__tags {
    list-style: none;
    padding: 0;
    /* 黒帯の内側上部に、タグ全体を負のマージンで上へ持ち上げて上端から突き出させる */
    margin: -60px 0 18px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  /*
     タグ（BRUTUS 掲載 / Googleレビュー★4.9 / 相談無料）
     Figma 忠実: シンプルな白い角丸長方形。下向きポインタは無し。
     配置は黒帯と写真の境界をまたぐ（負マージンで持ち上げ）を維持。
   */
  /* Figma MCP実測 (node=149:1406/1409/.. "tags"): border-[#202020] border-[1.2px] border-solid,
     角丸クラスなし（= border-radius: 0 が正確）。以前は枠線なし・角丸6pxで誤っていた。 */
  .cm-lp1-hero__tag {
    position: relative;
    background: #fff;
    border: 1.2px solid #202020;
    color: var(--mo-ink);
    padding: 8px 14px;
    border-radius: 0;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }
  /* 吹き出しのしっぽ: Figma実物はSVGポリゴン(黒枠付き)だが、CSSでは黒三角+白三角の
     二重重ねで黒枠付きの見た目を再現する。 */
  .cm-lp1-hero__tag::before {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -9.8px;
    width: 0;
    height: 0;
    border-left: 8.4px solid transparent;
    border-right: 8.4px solid transparent;
    border-top: 9.8px solid #202020;
  }
  .cm-lp1-hero__tag::after {
    content: '';
    position: absolute;
    left: 22px;
    /* 白三角の上辺を badge 内側へ 3px 食い込ませ、1.2px の下 border が
       tail 開口部を横断して「切れた吹き出し」に見える artifact を防ぐ */
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #fff;
  }
  .cm-lp1-hero__tag-star {
    color: #202020;
    margin: 0 2px;
    /* Force monochrome text glyph — bypass Chrome color-emoji rendering entirely.
       Use system-ui / Arial fallback which serve ★ (U+2605) as black text glyph. */
    font-family: 'Arial', 'Helvetica', 'Noto Sans JP', system-ui, sans-serif;
    font-variant-emoji: text;
  }
  /* Chrome emoji font fallback for ★ overridden via VS15 in markup + Arial-first stack.
     Some Chromium builds still color-render ★ — apply fill via ::before as safety net. */
  .cm-lp1-hero__tag-star { text-shadow: none; }
  .cm-lp1-hero__tag-sup {
    font-size: 8px;
    vertical-align: super;
    font-weight: 400;
    margin-left: 1px;
  }

  .cm-lp1-hero__cta-wrap {
    display: flex;
    justify-content: center;
  }
  /*
     大 CTA: 単色ライム + 矢印（区切り線のみ）
     ---
     design/PC-Design.png を実測ピクセルサンプリング（460,775)-(1013,835) した結果、
     #D4FE16（ライム）が 26143px、黒系（文字）が 4908px で、オリーブ色の別ブロックは
     検出されず。ボタン全体は単色ライムで、矢印は黒アイコンのみ。前回のオリーブ塗り分けは誤り。
     ---
     .mo-cta__arrow の矢印スライドアニメ（transform: translateX 6px）は arrow-block 内で
     完結するため、arrow-block に overflow: hidden は付けない（§2-2 D 準拠）。
   */
  .cm-lp1-hero__cta {
    /* canonical PNG 実測: CTA 4 corners すべて SHARP (square)。
       button 本体 (442-928) と arrow chip (930-997) の間に 2px の黒 gap がある分離構造。
       全体 = 486 + 2 + 70 = 558。 */
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: transparent;
    color: var(--mo-ink);
    text-decoration: none;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    padding: 0;
    border-radius: 0;
    width: 100%;
    max-width: 558px;
    margin: 0 auto;
  }
  .cm-lp1-hero__cta-label {
    /* canonical CTA (149:1367 area): button height ~60px, text ~32px, padding ~10px top/bot.
       line-height 1.2 (tight) for compact button. */
    flex: 1;
    text-align: center;
    background: var(--mo-lime);
    padding: clamp(10px, 1.04vw, 15px) clamp(12px, 1.5vw, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2.22vw, 32px);
    line-height: 1.2;
    white-space: nowrap;
  }
  .cm-lp1-hero__cta-arrow-block {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mo-lime);
    flex: 0 0 auto;
    width: clamp(40px, 4.86vw, 70px);
  }
  .cm-lp1-hero .mo-cta__arrow {
    display: inline-block;
    font-size: clamp(18px, 1.9vw, 28px);
    line-height: 1;
    color: var(--mo-ink);
  }

  .cm-lp1-hero__bar-note {
    margin: 8px 0 0;
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, .55);
  }

  /* -------------------------------------------
     PC レイアウト（750px 以上）
     ------------------------------------------- */
  @media (min-width: 750px) {
    /* stage は自身の aspect-ratio (1440/768) を保つため padding 追加しない (中央 flex に任せる) */
    /* card-wrap / card / intro / subcopy / note の PC サイズは main rule の clamp() に委譲。
       ここでは PC 特有の overrides (bar padding, tags margin など) だけ残す。 */

    .cm-lp1-hero__bar {
      /* canonical: band 762-882 (h120)。pad-top 18 → button top 780、pad-bottom 32 → band bottom 882 */
      padding: 18px 24px 32px;
    }
    .cm-lp1-hero__tags {
      /* canonical badges 721-761 (band top 762 に接して終わる)。gap 22 */
      margin: -59px 0 19px;
      gap: 22px;
    }
    .cm-lp1-hero__tag {
      /* canonical badge: h40 / text ~20px / badge1&3 = 177 幅 (相談無料 も同幅) */
      padding: 7px 22px;
      font-size: 20px;
      min-width: 177px;
      text-align: center;
    }
    /* canonical PC badges: speech-bubble tail あり (Human confirmed)。tail は badge 下端から
       黒帯に向かって突き出す。badge 下端が band 上端 (762) に接するため、tail は band 上に重なる */
    .cm-lp1-hero__tag::before {
      left: 24px;
      bottom: -11px;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 11px solid #202020;
    }
    .cm-lp1-hero__tag::after {
      left: 26.4px;
      /* 上辺を badge 内側へ 3px 食い込ませて下 border の横断線をマスク */
      bottom: -8px;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 11px solid #fff;
    }
    /* badge2 (Googleレビュー★4.9※): canonical w228 — Noto/YuGothic の ★ 幅差を padding で吸収 */
    .cm-lp1-hero__tag:nth-child(2) { padding-left: 9px; padding-right: 9px; }
    /* canonical button height 70 (780-849) */
    .cm-lp1-hero__cta { height: 70px; }
    /* canonical PC 注記は band の下 (light strip 上) に左寄せで置かれる:
       glyph y≈893-905, x≈296 (20.55%)、暗いグレー小文字 */
    .cm-lp1-hero__bar-note {
      position: absolute;
      top: calc(100% + 11px);
      left: 20.55%;
      margin: 0;
      width: auto;
      text-align: left;
      font-size: 11px;
      color: #6f6f6f;
    }
  }

  /* -------------------------------------------
     SP 微調整（749px 以下）
     ------------------------------------------- */
  @media (max-width: 749px) {
    .cm-lp1-hero {
      /* SP canonical: band 下に light strip 40 native (750 基準) = 21 CSS が #01 前に存在 */
      aspect-ratio: auto;
      min-height: 0;
      max-height: none;
      padding-bottom: 21px;
    }
    .cm-lp1-hero__stage {
      min-height: 520px;
    }
    /* Header (SP) — Figma canonical (149:1967 / 149:1968):
         750×96 outer, contents 690×96, py 28, justify-between, padding 30
         Logo 256.797×27.492 / btn area gap 32
         btn_reserv 302×60, gap 10, padding 0 10, label 26px, arrow 23.1×23.1
         Menu: 3 rows of (7.875 dot + 44×5 bar), row gap 6.3, MENU 18px letter 1.8
       Playwright viewport 390 → scale 390/750 = 0.52 で各値を個別に算出 (機械的な transform:scale は使わない). */
    body:has(.cm-lp1-hero) { padding-top: 50px; }
    .mo-header.cm-lp1-header {
      height: 50px;
      padding: 0 15.6px;
    }
    {%- comment -%} pre-ads responsive audit 2026-08-21 — P0 ヘッダー破綻。
        SP ヘッダーは logo 133.5 / CTA 157 / hamburger 31.4 がすべて固定幅で、
        最小必要幅 = 15.6 + 133.5 + 16.6 + 157 + 31.4 + 15.6 = 369.7px。
        そのため 370px 未満で右側があふれ、320 では **hamburger が 34.1px 画面外**
        (x 322.7 → 354.1 / viewport 320) となり主要ナビが操作不能だった。
        対策: logo 幅 / actions gap / CTA 幅・字送りを min() で連続的に縮める。
        いずれも 375px でちょうど従来値に一致する係数なので **375 以上は実寸完全不変**。
        320 実測: logo 111 + gap 10 + CTA 130 + ham 31.4 = 282.4 ≤ 288.8 (内寸)。 {%- endcomment -%}
    .cm-lp1-header__logo img {
      width: min(133.5px, calc(40.9vw - 19.9px));
      height: auto;
      max-width: 133.5px;
    }
    .cm-lp1-header__actions { gap: min(16.6px, calc(12vw - 28.4px)); }
    .cm-lp1-header__cta {
      height: 31.2px;
      width: min(157px, calc(49.1vw - 27.1px));
      font-size: min(13.5px, calc(2.73vw + 3.26px));
      gap: 5.2px;
      padding: 0 5.2px;
      border-radius: 2.6px;
    }
    .cm-lp1-header__cta-arrow { width: 12px; height: 12px; }
    .cm-lp1-header__cta-arrow img { width: 12px; height: 12px; }
    .cm-lp1-header__hamburger { gap: 4.7px; }
    .cm-lp1-header__hamburger-icon { gap: 3.3px; }
    .cm-lp1-header__hamburger-row { gap: 3.3px; }
    .cm-lp1-header__hamburger-dot { width: 4.1px; height: 4.1px; }
    .cm-lp1-header__hamburger-bar { width: 22.9px; height: 2.6px; }
    .cm-lp1-header__hamburger-label { font-size: 9.4px; letter-spacing: .94px; }
    /* SP: header 50px に合わせて drawer 上端とアンカーオフセットを調整 */
    .cm-lp1-header__close-icon { width: 22px; height: 22px; }
    .cm-lp1-header__close-icon::before,
    .cm-lp1-header__close-icon::after { width: 22px; height: 2.4px; }
    .cm-lp1-menu { top: 50px; padding: 30px 20px 28px; }
    .cm-lp1-menu__title { font-size: 24px; margin-bottom: 22px; }
    .cm-lp1-menu__link { font-size: 15px; padding: 11px 4px; }
    [id^="cm-lp1-anchor-"] { scroll-margin-top: 50px; }

    /* Card wrap: absolute centered at top:36 (Figma FV 70 × 0.52) */
    .cm-lp1-hero__card-wrap {
      position: absolute;
      top: 36px;
      left: 50%;
      transform: translateX(-50%);
      padding: 0;
      z-index: 2;
      display: block;
      width: auto;
    }
    /* SP Figma (149:1932): w=583, h=516, radius 4.35 → 0.52 scale = 303×268, radius 2.3.
       Content top at visual y=102.7 (32 CSS from card top). padding-top 32 で canonical 一致。
       bottom padding reduced 32→20 to trim card height from 281 → ~268 to match canonical. */
    .cm-lp1-hero__card { max-width: 303px; width: 303px; padding: 32px 14px 20px; min-height: 0; border-radius: 2.3px; }
    /* SP Figma実測 (149:1962/1963/1965/1966 + parent card 149:1932 at (84,70)):
       + width 20 Figma. Relative to card:
         TL (37, 28), TR (right=36 from card right, top 28)
         BL (37, 456.8), BR (right=36 from card right, bottom equivalent)
       0.52 scale for browser: TL/BL left=19, TR/BR right=19 (was 29 — 誤り),
       TL/TR top=15, BL/BR bottom=14 (was 30 — 誤り、Figma bottom=515.8-458.8+top-based=... simpler: 268-237.5-16.6=14 CSS from card bottom). */
    .cm-lp1-hero__card-cross--tl { top: 15px;    bottom: auto; left: 19px;  right: auto; font-size: 10px; }
    .cm-lp1-hero__card-cross--tr { top: 15px;    bottom: auto; left: auto;  right: 19px; font-size: 10px; }
    .cm-lp1-hero__card-cross--bl { top: auto;    bottom: 14px; left: 19px;  right: auto; font-size: 10px; }
    .cm-lp1-hero__card-cross--br { top: auto;    bottom: 14px; left: auto;  right: 19px; font-size: 10px; }
    {%- comment -%} SP marker (購入/リノベ) — client feedback 2026-08-17。
        canonical (149:1956 Rectangle 34 = 61.6×44 / 149:1957 Rectangle 35 = 89×44 device):
        marker 高さ = 44 device × 0.52 = 22.88 CSS。幅は text ぴったり (padding-x = 0) で既に一致。
        旧 padding-y 7px は inline 内容高 16px に対して上下 7px を足し、実測 30px = canonical +31% と
        マーカーが文字に対して厚くなりすぎ、下方向に伸びて見えていた (client 指摘の本体)。
        padding-y = (22.88 - 16) / 2 = 3.44px にして canonical 22.88 に戻す。
        これで失われる次行との間隔は下の __card-intro の margin-bottom (外側) で確保する。
        !important は同 media 内の後続ルール (padding: 2px 5px) に勝つために維持。 {%- endcomment -%}
    .cm-lp1-hero .mo-marker--fill-lime {
      padding: 3.44px 0 !important;
      background-size: 100% 100% !important;
    }
    {%- comment -%} 上の marker から抜いた縦方向の余白を、marker の描画領域ではなく
        「行の外側」に margin として持たせる (client 指定: margin-bottom: 0.4em)。
        グローバル側 (.js-mo .cm-lp1-hero__card-intro[data-mo="line"]) は
        padding-bottom .8em / margin-bottom -.8em で、
          ・.8em の padding は motion.css の overflow:hidden マスクを下へ広げるためのもの
          ・-.8em の負 margin が次の見出しを引き上げ、marker 下端と重なっていた (実測 -1.61px)
        SP のみ、マスクは marker のはみ出し (line box 下 2.04px) を覆う最小限 .25em (4px) に縮め、
        間隔は margin-bottom .4em (6.4px) で確保する。
        結果の marker 下端→見出し上端 = 12.4px。canonical SP は marker bottom 156 → main 178.4
        = 22.4 device × 0.52 = 11.65 CSS なのでほぼ一致。
        PC はグローバル側 (.8em / -.8em) のままで一切変更しない。 {%- endcomment -%}
    .js-mo .cm-lp1-hero__card-intro[data-mo="line"] {
      padding-bottom: .25em;
      margin-bottom: .4em;
    }
    /* SP: 黒帯 2 段独立矩形化. canonical 実測: 各 h=21 CSS w=212, gap=4 */
    .cm-lp1-hero__subcopy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: transparent;
      padding: 0;
      margin: 6px 0 6px;
    }
    .cm-lp1-hero__subcopy-part {
      display: block;
      background: #202020;
      color: #fff;
      padding: 0 14px;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: -0.02em;
      min-width: 212px;
      text-align: center;
    }
    /* SP: Tags 2 段構造 (BRUTUS/掲載, Googleレビュー/★4.9※)。相談無料 は 1 段。
       Higher-specificity to override PC pc-scoped .cm-lp1-hero .cm-lp1-hero__tag-sp-only rule. */
    .cm-lp1-hero .cm-lp1-hero__tag-line { display: block; text-align: center; line-height: 1.2; }
    .cm-lp1-hero .cm-lp1-hero__tag-pc-only { display: none; }
    .cm-lp1-hero .cm-lp1-hero__tag-sp-only { display: block; }
    /* Photo object-position: canonical 人物 crop に合わせ調整 */
    .cm-lp1-hero__bg-img { object-position: 40% 45%; }
    /* SP decorative text: 上端 NAK visible (PC display:none override 解除) */
    .cm-lp1-hero__deco { display: block; position: absolute; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; }
    .cm-lp1-hero__deco-line { font-family: 'Helvetica','Helvetica Neue',Arial,sans-serif; font-weight: 700; position: absolute; white-space: nowrap; letter-spacing: -0.02em; line-height: 0.8; }
    /* SP canonical Figma spec (149:1925 "Group 4" @ 750 wide, 0.52 scale to 390 browser):
       font: Helvetica Bold, size 136.415→71px, line-height 0.8, text-align left, letter-spacing -0.02em
       Deco frame at y=9 Figma (=4.7 CSS). Group 4 at y=28 in deco.
       Line 1 NAKAMEGURO: left=3.71 top=28 color #f5f5f5 → CSS left:2 top:34
       Line 2 RENOVATION: left=1.52 top=161.83 color #ffffff → CSS left:1 top:103
       Line 3 RESEARCH CENTER: left=-15 top=305.88 color #f5f5f5 → CSS left:-8 top:178 */
    /* canonical: subtle fill (not sharp outline) — grid に溶けた texture として存在。
       Chromium outline は edge が sharp すぎて「読める」ため、fill only + subtle 濃度 で
       canonical の texture 感を再現。Figma spec (#f5f5f5/#ffffff/#f5f5f5) を Chromium
       rendering で canonical と 同 visual にするため一段濃く (#ececec / #f0f0f0 / #ececec)。 */
    /* canonical: 巨大文字は「読ませない」texture 感。#ececec ではまだ browser で「読める」→
       さらに薄く。Line 1/3 は #f3f3f3, Line 2 は #f6f6f6 (Figma #ffffff より一段濃、しかし
       #ececec より 2 段薄) で grid に溶けさせる。 */
    /* Position/size FIX (前 session で canonical と glyph 上端 Y 一致確認済み)。
       canonical PNG 実測: 内部 fill gray 245 (#f5f5f5), edge min gray 198 (~#c6c6c6)。
       "薄い塗り + 薄い輪郭" 両方存在。中抜き化は誤り。
       → fill #f5f5f5 (保持) + 極細 stroke 0.4px #c6c6c6 で subtle outline を上乗せ。 */
    .cm-lp1-hero__deco-line--1 { font-size: 71px; left: 2px; top: 14px; color: #f5f5f5; -webkit-text-fill-color: #f5f5f5; -webkit-text-stroke: 0.2px #dedede; }
    .cm-lp1-hero__deco-line--2 { display: block; font-size: 71px; left: 1px; top: 83px; color: #ffffff; -webkit-text-fill-color: #ffffff; -webkit-text-stroke: 0.2px #dedede; }
    .cm-lp1-hero__deco-line--3 { display: block; font-size: 71px; left: -8px; top: 158px; color: #f5f5f5; -webkit-text-fill-color: #f5f5f5; -webkit-text-stroke: 0.2px #dedede; }
    /* 320 breakpoint 崩れ回避: card は viewport 幅を超えないよう max-width で clamp */
    .cm-lp1-hero__card { max-width: min(303px, calc(100vw - 24px)); }

    /* SP deco は下部で再定義 (display:block for canonical NAK 上端 visible) */

    /* SP canonical (pipeline crop 後):
       canonical 1136 native / 1.04 resize = 590 CSS total
       Card top 36 h 268 / Photo top 208 h 272 (bar overlay) / Bar top 490 h 80 */
    .cm-lp1-hero__stage {
      display: block;
      position: relative;
      height: 490px;
      background-color: #FBFBFB;
      /* canonical grid: subtle architectural texture, NOT prominent graph paper.
         Lighter color + smaller pitch → 建築図面-like subtle texture. */
      background-image:
        linear-gradient(to right, #ececec 1px, transparent 1px),
        linear-gradient(to bottom, #ececec 1px, transparent 1px);
      background-size: 26px 26px;
      min-height: 0;
      max-height: none;
      overflow: visible;
      aspect-ratio: auto;
    }
    /* SP canonical: photo starts at Figma y≈405 (browser CSS 0.52 = 211), extends into
       card back significantly. Card is at ~36-317, photo 211-490, overlap ~106 CSS.
       This is the canonical composition: photo goes deep behind card, not just below it. */
    .cm-lp1-hero__bg {
      position: absolute;
      top: 211px;
      left: 0;
      right: 0;
      width: 100%;
      height: 286px;
      z-index: 1;
    }
    /* +7px stage height so bar top moves from y=490 → 497 CSS, matching canonical
       bar y=497 (Figma y=956 × 0.52). */
    .cm-lp1-hero__stage { height: 497px; }
    /* Photo方式: Figma SP node 149:1930 の実測 transform を適用:
       width 150.14%, height 134.05%, left -50.13%, top 0.
       source を左 33% crop して tile 壁 / 神サイン area から表示。 */
    .cm-lp1-hero__bg-img {
      position: absolute;
      inset: auto;
      left: -50.13%;
      top: 0;
      width: 150.14%;
      height: 134.05%;
      object-fit: fill;
      object-position: initial;
      max-width: none;
    }

    /* SP canonical (149:1922) Figma spec scaled 390/750=0.52:
       intro 30→16, xl 80.755→42, lg 65.73→34, md 62.84→33, outline 77.332→40
       黒帯 26→14, note 24→13。SP 専用 <br> で 2段構造再現。 */
    /* SP Figma spec (149:1922) 0.52 scale for browser 390 CSS width:
       intro 30→16, heading xl 80.755→42 lg 65.73→34 md 62.84→33 outline 77.332→40
       subcopy 26→14, note 24→13. */
    /* SP typography 0.52 scale (Figma × 0.52 for browser 390 CSS): */
    .cm-lp1-hero__card-intro { font-size: 16px; margin: 0 0 6px; line-height: 1.15; }
    .cm-lp1-hero__heading-xl { font-size: 42px; }
    .cm-lp1-hero__heading-lg { font-size: 34px; }
    .cm-lp1-hero__heading-md { font-size: 33px; }
    /* SP canonical Figma spec (149:1946 "できる"): YuGothic Bold 77.332px, letter-spacing
       -6.1865px (main) + per-char -2.4/-3.2/-3.2px. 0.52 scale = font 40px, container LS -3.22px。
       現状 -0.02em (-0.8px) では tracking 不足で横に広い → -3.2px (-0.08em) で
       canonical と同じ tight 詰め感に。 */
    .cm-lp1-hero__heading-outline { font-size: 40px; letter-spacing: -3.2px; -webkit-text-stroke: 1px var(--mo-ink); }
    .cm-lp1-hero__heading { margin: 4px 0 0; }
    .cm-lp1-hero__subcopy { font-size: 14px; padding: 5px 14px; margin: 10px 0 8px; line-height: 1.6; }
    .cm-lp1-hero__note { font-size: 13px; line-height: 1.5; }
    .cm-lp1-sp-break { display: inline; }
    .cm-lp1-hero .mo-marker--fill-lime { padding: 2px 5px; }
    /* .cm-lp1-hero__bg height は overlap layout ブロックで定義済 (top:172 h:200) */

    /* SP bar canonical: 3タグとも box height ~40 CSS (canonical 80 device).
       2-line タグ (BRUTUS/掲載、Googleレビュー/★4.9※) と 1-line (相談無料) の
       BOX 高さは canonical 実測で同じ → align-items: stretch で高さ揃える。
       widths: canonical 91/110/91 CSS → padding + min-width で調整。 */
    .cm-lp1-hero__bar { padding: 8px 12px 8px; margin-top: 0; }
    .cm-lp1-hero__tags {
      margin: -50px 0 10px;
      gap: 8px;
      align-items: stretch;
    }
    .cm-lp1-hero__tag {
      font-size: 12px;
      padding: 4px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 91px;
    }
    .cm-lp1-hero__tag-line { line-height: 1.25; }
    /* CTA SP: canonical h=72 device = 36 CSS. font 17 + padding 9 top/bot ≈ 36 */
    .cm-lp1-hero__cta { max-width: 289px; }
    .cm-lp1-hero__cta-label { padding: 9px 12px; font-size: 17px; line-height: 1.2; }
    .cm-lp1-hero__cta-arrow-block { width: 36px; }
    .cm-lp1-hero .mo-cta__arrow { font-size: 16px; }
    /* SP canonical: 注記は band 内・button 左端に左揃え (button 289 中央配置基準) */
    .cm-lp1-hero__bar-note {
      font-size: 10px;
      margin: 4px 0 0 calc(50% - 144.5px);
      text-align: left;
    }
  }

  /* -------------------------------------------
     アクセシビリティ: prefers-reduced-motion は motion.css §13 で処理済み
     ------------------------------------------- */

  /* -------------------------------------------
     共有ユーティリティ: 全 LP セクションの横あふれを封じる。
     ---
     背景: 各セクションの装飾文字 (.cm-lp1-XX__deco) が font-size: 22vw〜26vw で
     white-space: nowrap のため、SP では viewport 幅より横に出て body 幅を
     押し広げていた (390 → 476px)。overflow-x: clip で切り落として封じる。
     clip は scroll snap や sticky を壊さないので hidden より安全。
     ------------------------------------------- */
  section[class*="cm-lp1-"] {
    overflow-x: clip;
  }

  /* -------------------------------------------
     共有ユーティリティ: インターセクション CTA
     Figma canonical (149:1901-1906 CTA blocks):
       - 外枠: bg #fff, border-t/border-b #717171 1px, padding 40px, w=1440
       - 内枠 (黒ボックス): bg #000, radius 5, w=1072, py 40, gap 8 flex-col items-center
       - lead: YuGothic Bold 16px, color #fff
       - button: bg #D4FE16 (h=70, px 40, py 10, rounded-l 5), text 32px #202020
       - button 右: arrow 70×70 SVG (lime bg + 黒 chevron)
       - note: YuGothic Medium 16px, color #fff
     §2-2 D: .mo-cta は使わない（矢印スライドループなし、静的）
     ------------------------------------------- */
  .cm-lp1-inter-cta {
    background: #ffffff;
    border-top: 1px solid #717171;
    border-bottom: 1px solid #717171;
    padding: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0;
  }
  .cm-lp1-inter-cta__panel {
    background: #000;
    color: #fff;
    border-radius: 5px;
    width: 100%;
    max-width: 1072px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .cm-lp1-inter-cta__lead {
    margin: 0;
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 700;
    line-height: 1.6;
  }
  .cm-lp1-inter-cta__btn {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    background: #D4FE16;
    color: #202020;
    text-decoration: none;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100%;
  }
  .cm-lp1-inter-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    height: 70px;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 32px);
    line-height: 1.6;
    color: #202020;
    white-space: nowrap;
  }
  .cm-lp1-inter-cta__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-left: 2px solid #202020;
  }
  .cm-lp1-inter-cta__arrow img,
  .cm-lp1-inter-cta__arrow svg {
    display: block;
    width: 70px;
    height: 70px;
  }
  .cm-lp1-inter-cta__note {
    margin: 0;
    font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
  }

  @media (max-width: 749px) {
    .cm-lp1-inter-cta { padding: 20px 15px; }
    .cm-lp1-inter-cta__panel { padding: 24px 16px; gap: 12px; }
    {%- comment -%} CTA lead の改行 — client 目視 FB 2026-08-21 (3rd)。
        CTA パネル内の白リード文は既定の日本語改行 (文字単位) のため、320 で
          「あなたの予算でも、きっとできるこ / とがある。」 (#03 — 「こと」を語中で分断)
        となり、さらに 360 / 375 でも 「…できることがあ / る。」 と 1 文字が孤立していた。
        CTA ボタンと同じ考え方で keep-all を当て、改行を句読点と <wbr> の位置だけに限定する。
        #03 は 「、」 が改行候補として残るため markup 変更不要で
        「あなたの予算でも、」/「きっとできることがある。」 に落ち着く。
        1 行に収まる幅 (390 以上) では何も起きないので実寸不変。 {%- endcomment -%}
    .cm-lp1-inter-cta__lead { font-size: 13px; word-break: keep-all; }
    .cm-lp1-inter-cta__btn { width: 100%; }
    {%- comment -%} SP CTA responsive — client feedback 2026-08-21。
        .cm-lp1-inter-cta__btn は justify-content: center + overflow: hidden。
        label / arrow のどちらも縮まないと、はみ出し量が左右に均等配分されたうえで
        両端が切り落とされる:
          overflow  = textW + padL + padR + arrowW − 利用可能幅
          左クリップ = 右クリップ = overflow / 2   ← 右側は「矢印チップの右端が欠ける」
        label が縮まなかった原因は flex-basis ではなく **min-width: auto**。
        white-space: nowrap のため min-content = テキスト全幅 + padding となり、
        flex-shrink が効いても min-width の床に阻まれて 1px も縮まなかった。
        min-width: 0 で床を外すと、余剰は label の広い横 padding に吸収され、
        arrow (flex-shrink: 0 / 固定幅) は一切圧迫されない。
        → divider 位置 = btn 右端 − arrow 幅 で全幅固定になる。
        flex は 1 1 auto。basis auto は content 幅なので btn width:auto (content-fit) の
        セクションでは従来どおりボタンが文字にフィットし、幅・高さ・意匠は不変。 {%- endcomment -%}
    .cm-lp1-inter-cta__btn-label {
      flex: 1 1 auto;
      min-width: 0;
      {%- comment -%} pre-ads responsive audit 2026-08-21: height → min-height。
          320 付近で 1 行に収まらない CTA は自然に 2 行へ折り返すため、
          高さを固定せず内容で伸びるようにする (375 以上は 1 行のままなので実寸不変)。 {%- endcomment -%}
      min-height: 56px;
      height: auto;
      {%- comment -%} 横 padding は下の ::before / ::after (elastic gutter) へ移設。 {%- endcomment -%}
      padding: 8px 0;
      font-size: 17px;
      white-space: normal;
      {%- comment -%} 320 CTA line-break polish — client 目視 FB 2026-08-21 (2nd)。
          既定の日本語は文字単位で改行できるため、320 で
            「この予算でできる？」を相 / 談する   (「相談」を語中で分断)
            「よかった」を確かめに行 / く         (1 文字だけ孤立)
            リノ研に相談してみる｜1分で / 完了     (「完了」を語中で分断)
          という不自然な折れ方になっていた (clip は 0 だが広告 CTA として不適)。
          keep-all で「文字単位の改行機会」を無効化し、意味の切れ目に置いた <wbr> だけを
          改行候補にする。text-wrap: balance も検証したが、行長の均等化を優先する結果
          「この予算ででき / る？」を相談する」「リノ研に相談し / てみる｜1分で完了」と
          **語中で割れて逆に悪化**したため不採用。keep-all は Safari 9+ / <wbr> は全ブラウザ対応で、
          万一未対応でも従来の (clip 0 の) 挙動に戻るだけなので退行しない。
          収まる幅では <wbr> は何もしないため 355 以上は 1 行のまま実寸完全不変。 {%- endcomment -%}
      word-break: keep-all;
    }
    {%- comment -%} ELASTIC GUTTER — pre-ads responsive audit 2026-08-21。
        従来: label の横 padding が固定 + white-space: nowrap のため、
        幅が足りなくなると text が label の content box をはみ出し、
        btn の overflow: hidden に両端を刈られていた (320 で #03 -17.3px / #08 -14.9px)。
        対策: 横 padding を「潰れる flex spacer」に置き換える。
          flex: 0 9999 <旧padding>  … 収縮係数を極端に大きくすることで、
          はみ出し分は必ず gutter が先に吸収し、text (匿名 flex item) は
          gutter が 0 になるまで一切縮まない。
        結果:
          ・余裕がある幅 (375/390/430) … gutter = 旧 padding のまま = 実寸不変
          ・やや狭い幅            … gutter だけが縮む = 従来の見た目と同じ
          ・物理的に無理な幅 (~355 未満) … gutter 0 の後に text が折り返す
        breakpoint を一切使わないので 320〜430 が連続的に成立する。 {%- endcomment -%}
    .cm-lp1-inter-cta__btn-label::before,
    .cm-lp1-inter-cta__btn-label::after {
      content: '';
      {%- comment -%} 幅は flex-basis ではなく width で与えること。
          flex-basis に直接 px を置くと、flex-shrink が極端に大きい item は
          flex container の max-content 寄与が 0 と評価され、
          btn { width: auto } のフィット幅が padding 分そのまま痩せてしまう
          (実測: #07 317 → 237px)。basis: auto + width なら寄与が正しく効き、
          375 / 390 / 430 の実寸は従来と完全一致する。 {%- endcomment -%}
      flex: 0 9999 auto;
      width: 12px;
      min-width: 0;
    }
    .cm-lp1-inter-cta__arrow {
      width: 56px;
      {%- comment -%} label が 2 行になった場合も lime chip と divider が全高で揃うように {%- endcomment -%}
      min-height: 56px;
      height: auto;
      align-self: stretch;
    }
    .cm-lp1-inter-cta__arrow img,
    .cm-lp1-inter-cta__arrow svg {
      width: 56px;
      height: 56px;
    }
    .cm-lp1-inter-cta__note { font-size: 12px; }
  }
/* END_SECTION:cm-lp1-hero */