@charset "UTF-8";
/* ============================================================
   KV（ファーストビュー）— template-parts/catalog-lp/kv.php

   カンプ  PC 4027:1047（1440x860） / SP 8029:791（390x671）
   実測値の正は docs/spec/catalog-lp/kv-pc.json / kv-sp.json。
   このファイルの数値は**すべてその JSON から導出**している（下に導出過程を残す）。

   ------------------------------------------------------------
   1. コピー3点はアウトライン化されている。書体は逆算した
   ------------------------------------------------------------
   Figma 上でグリフごとの ink 幅・高さを実測し、Shippori Mincho の
   各ウェイトを 100px で描いたときの ink と突き合わせて逆算した。

     Regular  … 12字の font-size 推定が 43.6〜45.0px（ばらつき 3%）
     Medium   … 43.34〜43.57px（ばらつき 0.5%）  ← 一致
     SemiBold … 43.03〜43.27px

   決め手は「一」。横棒1本なので **ink の高さ＝線の太さ**になり、
   ウェイトの差がそのまま出る（Regular 0.1311em / Medium 0.14em /
   SemiBold 0.148em）。カンプの「一」は 38.6 x 6.1px で Medium だけが合う。

   → メインコピー・サブコピー・縦書きコピーはすべて **Medium (500)**。
     「700」だけ字形の縦横比（design 1.501 / SemiBold 1.497 / Medium 1.580）から
     **SemiBold (600)**。

   ⚠ **header-catalog.php の Google Fonts は wght@400;600 しか読んでいない。**
     500 が無いと font-weight:500 は 400 にフォールバックして**細くなる**。
     さらに local() の "Local Shippori Mincho" も 400/600 しか @font-face が無いため、
     URL に 500 を足すだけでは足りず、local の 500 フェースも要る。
     （担当外のファイルなので申し送り済み。直るまでは Regular で描かれる）

   ------------------------------------------------------------
   2. サイズ比（PC / SP で完全に一致したのでそのまま em にした）
   ------------------------------------------------------------
                          PC        SP       PC/SP
     メインコピー基準     43.47px   22.25px   1.954   → .__body の 1em
     「約」「万円」       51.10px   26.18px   1.952   → 1.176em
     「700」              85.65px   43.80px   1.955   → 1.176 x 1.676em
     「※」               15.68px    -        -       → .361em
     サブコピー           27.46px   14.07px   1.952   → .632em
     縦書きコピー         26.35px   18.83px   1.399   → 別 clamp（比率が違う）
     注釈                 12px       8px      1.5     → .276em / .36em（比率が違う）

   ------------------------------------------------------------
   3. letter-spacing（グリフの em 位置から最小二乗で出した）
   ------------------------------------------------------------
     メインコピー … 0.053em（PC 0.0534 / SP 0.0535）
     サブコピー   … 0.1em（PC/SP とも per-gap で 1.0976〜1.1027em）
     縦書きコピー … 0.1em（同 1.0961〜1.1037em）

   ⚠ メインコピーだけ **1字ごとの送りが不揃い**（0.97em〜1.12em）。
     カンプのアウトラインが手詰めされているため、単一の letter-spacing では
     再現できない。合計幅が一致する 0.053em を採用した（個々の字位置は最大
     ±3.5px ズレる。633px に対して 0.55%）。

   ------------------------------------------------------------
   4. 行送り・ベースラインは「箱」ではなく**ベースライン間**で合わせた
   ------------------------------------------------------------
   Chrome の実測で Shippori Mincho / Noto Sans JP は
   ascent 1.16em・descent 0.288em（content area 1.448em）。
   よって「行ボックス上端からベースラインまで」は L/2 + 0.436F。
   カンプのベースライン（グリフの ink 位置と字形メトリクスから復元）に
   この式を当てて box の位置・margin を決めている。

     メインコピー 1行目→2行目 … PC 94.97px / SP 48.58px ＝ 2.184em → line-height: 2.184
     2行目 baseline → サブコピー baseline … PC 67.84px → .__lead の margin-top .412em
     サブコピー箱 → 注釈箱 … PC 27px / SP 13.9px（注釈の font-size 比が違うので BP ごと）

   ------------------------------------------------------------
   5. 暗幕はここで重ねる（画像には入っていない）
   ------------------------------------------------------------
     黒 40%（KV1 6001:67 の SOLID fill）
     下部グラデ（8001:380 / 1440x433・透明→黒 100% を opacity .8 で）
       PC 427/860 = 49.6512% から / SP 354/671 = 52.7571% から
   ============================================================ */
/* サブコピー「約700万円」の背後の帯（8001:915 / #dd788b を opacity 50%）。
   KV でしか使わないので _variable.scss には足さずここで持つ。 */
.p-catalog-lp-kv {
  position: relative;
  /* SP は 390x671 のカンプ比。**高さは 671px で頭打ち**にする（max-height）。
     v.fluid-sp() が 390px で文字を止めるので、器だけ縦に伸ばすと
     「広い箱に小さい文字」になって構図が崩れる。
     幅方向の頭打ちは __inner の max-width: $tablet-cap(600px) が持つ。
     背景写真は全幅のまま（object-fit: cover が上下を詰める）。 */
  /* ⚠ **width: 100% を省かないこと。** aspect-ratio がある箱では
     max-height が比率を通って max-width に転写される（CSS Sizing 4 の
     transferred size suggestion）。width が auto のままだと
     max-height: 671px が max-width: 390px になり、**背景写真まで 390px に縮む**
     （実測：768px 幅で KV が 390x671 になった）。width を確定させると転写されない。 */
  width: 100%;
  aspect-ratio: 390/671;
  /* 2026-09-30：**開いた瞬間にテキストが画面に入るよう、画面の高さで頭打ちにする**
     （先方指示）。aspect-ratio は幅に比例するので、横長の画面ほど KV が縦に伸びて
     下のテキストが画面の外へ出ていた。実測（tmp-spec/catalog-lp/kv-fit.mjs）：
       1920x1080（表示 955px）… KV 1147px → 注記が 114px 隠れる
       1366x768 （表示 650px）… KV  816px → 注記が 136px 隠れる
       1280x720 （表示 600px）… KV  764px → 注記が 143px 隠れる
     ヘッダーは position:sticky で**通常フローに場所を取る**ので、その分を引く。

     ⚠ **__inner 側に min-height を足しても直らない。** __inner は
       position:absolute + inset:0 で高さが確定しており、min-height は bottom:0 を
       破って下へ伸びるだけ。中の要素は下端基準なので、KV の overflow:hidden で
       **切れて消える**（768x1024 で SCROLL が 188px 切れることを実測で確認）。
       直すなら**器である KV 自体**を縮める。

     ⚠ svh 非対応（Safari 15.3 以前）向けに vh 版を先に書いている。上書き順を変えない。
     ⚠ min() が効かない環境（Safari 11 未満）では宣言ごと無効になり、
       SP は頭打ちなし＝以前の 671px より伸びうるが、破綻はしない。 */
  max-height: min(671px, 100vh - var(--catalog-header-h));
  max-height: min(671px, 100svh - var(--catalog-header-h));
  /* 帯（__lead-band）と「約700万円」の背景は負マージンで左右にはみ出すので、
     ページに横スクロールを出さないよう KV で止める。 */
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv {
    aspect-ratio: 1440/860;
    /* PC は 671px の頭打ちを外し、画面の高さだけで決める
       （カンプの 860px は「表示領域 950px 以上」の画面でそのまま出る）。 */
    max-height: calc(100vh - var(--catalog-header-h));
    max-height: calc(100svh - var(--catalog-header-h));
  }
}

/* 背景写真。<img> に width/height 属性は書かず、親（この picture）が
   KV いっぱいに広がり img がそれに従う。 */
.p-catalog-lp-kv__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-catalog-lp-kv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* 暗幕2枚。上に書いたレイヤーが手前なので、
   1枚目＝下部グラデ（8001:380）／2枚目＝全面の黒40%（6001:67 の SOLID fill）の順。 */
.p-catalog-lp-kv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 52.7571%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv::after {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 49.6512%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  }
}

/* 中身の器。SP デザインを引き伸ばさず $tablet-cap(600px) で頭打ちにして中央に置く
   （背景は全幅のまま）。431〜1023px の扱いは LP 全体で $tablet-cap に統一してある。
   ここだけ以前は $sp-canvas(390px) だったが、他セクションとずれるので寄せた。
   ⚠ inset: 0 と margin: 0 auto の組み合わせで中央寄せが成立するので、
     left/right を片方だけ書き換えないこと。 */
.p-catalog-lp-kv__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv__inner {
    max-width: none;
  }
}

/* ------------------------------------------------------------
   縦書きコピー（Group 112）
   PC  ink 1264.5〜1334.5 / y 86.5〜。行送り（＝段の間隔）46.1px
   SP  2段の中心が 195px ＝ フレーム中央。段の間隔 32.9px
   どちらも 段間隔 / font-size = 1.75、字間 0.1em。
   段数はカンプどおり 2 段なので <br> で明示する（自動折り返しに任せない）。
   ------------------------------------------------------------ */
.p-catalog-lp-kv__vertical {
  position: absolute;
  top: 3.7556%; /* 25.2/671 */
  left: 50%;
  transform: translateX(-50%);
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  color: #fff;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 18.83px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(15.45px, 4.829vw, 18.83px);
  line-height: 1.75; /* 32.9/18.83（SP）・46.1/26.35（PC） */
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv__vertical {
    top: 10.0581%; /* 86.5/860 */
    right: 6.5451%; /* (1440-1345.75)/1440。1345.75 = 1段目の中心 1322.7 + 行送りの半分 */
    left: auto;
    transform: none;
    font-size: 26.35px;
    font-size: clamp(18.74px, 0.008px + 1.829vw, 26.35px); /* 1024px で 26.35x1024/1440 */
    /* 2026-09-30：**幅だけでなく器（KV）の高さにも連動させる**。
       KV を画面の高さで頭打ちにしたため、画面が低いと器が縮む。一方この縦書きは
       「13文字 × 文字サイズ」で高さが決まる**固定の柱**なので、器が縮むと
       下端が下がり、下端基準に置いた SCROLL と衝突する
       （実測：1280x600 で 9px 重なり／1366x650 で残り 6px しかない）。

       0.77 / 18 の根拠：この縦書きの実高さは実測で **約 18em**
       （1920px 幅で 467px ÷ 26.35px = 17.7em、1280px 幅で 425px ÷ 23.42px = 18.2em）。
       器の高さのうち縦書きに使えるのは、上の余白と下の SCROLL を除いた分。
       0.68 では文字が小さすぎてバランスが崩れたため、
       **下の max-height クエリで上下の余白を詰めて使える高さを広げ、係数を 0.80 に上げた**。
       両者から font-size の上限を出している。
       画面が高いときは min() の第1項（幅ベースのカンプ値）が勝つので、
       **カンプどおりの 26.35px から変わらない**。
       検証: node tmp-spec/catalog-lp/_kv-overlap.mjs */
    font-size: min(clamp(18.74px, 0.008px + 1.829vw, 26.35px), (100svh - var(--catalog-header-h)) * 0.8 / 18);
    /* 器が縮む画面（＝カンプの 860px を保てない高さ）では**上の余白を詰める**。
       10.06% のままだと、ただでさえ足りない縦方向をさらに削ってしまう。
       カンプどおりの高さが出る環境（表示領域 950px 以上）では発火しない。 */
  }
}
@media screen and (min-width: 1024px) and (max-height: 949px) {
  .p-catalog-lp-kv__vertical {
    top: 5%;
  }
}

/* ------------------------------------------------------------
   コピーブロック（Group 113）＝ 縦線 + メイン + サブ + 注釈
   位置は**下端**で固定する（文字が1行増えたときに上へ伸びる方が安全）。
     PC  箱の下端 734.1px → (860-734.1)/860 = 14.6523%
     SP  箱の下端 543.6px → (671-543.6)/671 = 18.9882%
   左端は縦線（Line 21）の位置。PC 147/1440 / SP 25/390。
   ------------------------------------------------------------ */
.p-catalog-lp-kv__body {
  position: absolute;
  left: 6.4103%; /* 25/390 */
  bottom: 18.9882%;
  color: #fff;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: 22.25px; /* clamp 非対応ブラウザ用フォールバック */
  font-size: clamp(18.256px, 5.706vw, 22.25px);
  /* 縦線 → 文字（em ボックス左端）の距離。PC 29.17/43.47 ・ SP 15.0/22.25 */
  padding-left: 0.672em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv__body {
    left: 10.2083%; /* 147/1440 */
    bottom: 14.6523%;
    font-size: 43.47px;
    font-size: clamp(30.91px, -0.007px + 3.019vw, 43.47px); /* 1024px で 43.47x1024/1440 */
  }
}
.p-catalog-lp-kv__body {
  /* 左の縦線（Line 21・白 1px）。カンプでは箱の上端より少し下から始まり、
     下端より少し下で終わる。 */
}
.p-catalog-lp-kv__body::before {
  content: "";
  position: absolute;
  top: 0.558em; /* PC 24.3/43.47 ・ SP 12.42/22.25 */
  left: 0;
  width: 1px;
  height: 6.03em; /* PC 262/43.47 ・ SP 134.2/22.25 */
  background-color: #fff;
}

/* メインコピー（h1）。このページ唯一の h1。 */
.p-catalog-lp-kv__title {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 2.184;
  letter-spacing: 0.053em;
  /* 改行位置はカンプどおり <br> で固定する（自動折り返しに任せない）。
     ⚠ nowrap が無いと **max-content ちょうどの幅でも折り返すことがある**。
       行末が「※。」「家。」のように禁則で分割できない塊になると、
       負マージン（__lead-punct）ぶんの端数で最終行が押し出される。
       実際 __lead-band が 0.1px 足りずに2行に割れ、帯の高さが 36.5→64px になった。
     幅の検算：320px で本文 18.256px → 2行目 276px。
       器 320 − 左 20.5 − padding 12.3 = 287 に収まる（余白 11px）。 */
  white-space: nowrap;
}

/* 「約700万円」…… 一段大きい帯つきの塊。
   帯（8001:915）は **background のグラデーション**で作る。
   インライン要素の背景は content area（＝ ascent+descent = 1.448em）を覆うので、
   ベースラインからの距離を % に直して停止位置を決めている。
     帯の上端  baseline - 3.71px → content 上端から 55.57px → 55.57/73.99 = 75.10%
     帯の下端  baseline + 12.89px → 72.17px → 97.55%
   左右は負マージン + 同値の padding で「レイアウトを動かさずに背景だけ伸ばす」。
     PC 左 5.4px(.106em) / 右 6.5px(.127em) */
.p-catalog-lp-kv__title-hl {
  font-size: 1.176em; /* 51.1/43.47 */
  /* この span 自身の行ボックスへの寄与をゼロにする。
     付けないと大きい文字が行の高さを押し広げ、2行目だけ下にずれる。 */
  line-height: 0;
  /* 左マージンは2つの値の合算：
       -0.106em … 帯を左にはみ出させる分（padding-left と相殺してレイアウトは動かさない）
       +0.120em … カンプの「で」→「約」だけ 6.1px 広く手詰めされている分
     合計 +0.014em。これを入れないと以降の「700万円の差※。」が一律 10px 左に寄り、
     帯の右端と2行目の右端がカンプより 6〜8px 内側に入る。 */
  margin: 0 -0.127em 0 0.014em;
  padding: 0 0.127em 0 0.106em;
  background-image: linear-gradient(to bottom, rgba(221, 120, 139, 0) 75.1%, rgba(221, 120, 139, 0.5) 75.1%, rgba(221, 120, 139, 0.5) 97.55%, rgba(221, 120, 139, 0) 97.55%);
}

/* 「700」。SemiBold で更に一段大きい。
   カンプでは数字だけベースラインが 0.025em（自身の font-size 比）下にある。
   vertical-align ではなく position で下げる（行の高さに影響させないため）。
   字間はカンプ実測がほぼ 0（親の .053em を引き継ぐと 15px 広がる）。 */
.p-catalog-lp-kv__title-num {
  position: relative;
  top: 0.025em;
  font-size: 1.676em; /* 85.65/51.1 */
  font-weight: 600;
  line-height: 0;
  letter-spacing: 0;
}

/* 「※」。カンプでは本文の 0.361 倍・ベースラインが 18.92px 上（＝自身の 1.207em）。 */
.p-catalog-lp-kv__title-mark {
  position: relative;
  top: -1.207em;
  font-size: 0.361em; /* 15.68/43.47 */
  line-height: 0;
}

/* サブコピー。白帯（8001:549）は inline-block の背景で作る。
   帯の高さはカンプで font-size の 1.329 倍。line-height:1 + 上下 padding で作る。
     上 .082em / 下 .247em → 1 + .082 + .247 = 1.329
   （line-height だけで 1.329 にすると、和文のインクは em ボックスの中で
     やや下寄りなので帯が 2px ほど上にずれる）
   左右 padding はカンプの帯の余白。右は letter-spacing の末尾ぶん(.1em)を差し引く。 */
.p-catalog-lp-kv__lead {
  margin-top: 0.412em; /* PC 11.34/27.46 ・ SP 5.80/14.07 */
  font-size: 0.632em; /* 27.46/43.47 */
  line-height: 1;
}

.p-catalog-lp-kv__lead-band {
  display: inline-block;
  padding: 0.082em 0.07em 0.247em 0.185em;
  background-color: #fff;
  color: #323232;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap; /* 理由は __title のコメント（禁則 + 負マージンの端数で折り返す） */
}

.p-catalog-lp-kv__lead-accent {
  color: #832f34;
}

/* 約物半角。カンプは「、」「。」が半角送り（実測 0.6em ＝ 0.5em + 字間 0.1em）。
   CSS の既定は全角送りなので、そのままだと帯が 4% 横に伸びる。 */
.p-catalog-lp-kv__lead-punct {
  margin-right: -0.5em;
}

/* 注釈（8001:576 / 8029:787）。ここだけ Noto Sans JP。
   PC 12px・SP 8px でメインコピーとの比が違うので BP ごとに持つ。
   margin-top も同じ理由で BP ごと（PC 27px / SP 13.9px）。 */
.p-catalog-lp-kv__note {
  margin-top: 1.735em; /* 13.9/8.01 */
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-size: 0.36em; /* 8/22.25 */
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv__note {
    margin-top: 2.25em; /* 27/12 */
    font-size: 0.276em; /* 12/43.47 */
  }
}

/* ------------------------------------------------------------
   SCROLL（6001:73 Group / 8029:681 Frame 208）
   「SCROLL」(Roboto Regular・字間 20%) の下に 37px の縦線。
   縦線・文字の間隔はカンプでも px 固定（幅に比例しない）なのでそのまま px。

   ■ アニメーション（ユーザー指示・2026-09-26）
     カンプに指定は無いが「スクロールを促すと分かるように」という依頼で追加した。
     二重構造にしてある：
       ::after  … 常時見えている**軌道**（白 30%）。カンプの縦線の位置・寸法そのまま
       ::before … その上を**下へ流れる白いバー**
     こうしているのは、線を丸ごと動かすとカンプに写っている 37px の縦線が
     消える瞬間ができてしまうため。軌道を残せば静止時の見た目はカンプと同じ。

     動きは「上から伸びて、上から消える」＝下方向へ掃く形にした。
     単純な上下往復にしなかったのは、上向きの動きが混ざると
     「下にスクロールしてほしい」という意図が弱まるため。
   ------------------------------------------------------------ */
@keyframes p-catalog-lp-kv-scroll {
  0%, 100% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  /* 45→55% は伸びきったまま保持。ここで origin を bottom に入れ替えることで、
     続く縮みが「下端を残して上から消える」動きになる（＝下へ抜けて見える）。 */
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  95% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
.p-catalog-lp-kv__scroll {
  position: absolute;
  bottom: 4.8882%; /* 32.8/671 */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 8px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv__scroll {
    bottom: 13.9535%; /* 120/860 */
    /* 器が縮む画面では下の余白も詰めて、縦書きコピーに使える高さを広げる。
       縦書きは「13文字 × 文字サイズ」で高さが決まる柱なので、ここを空けないと
       文字を小さくするしか収める手が無くなり、バランスが崩れる。
       カンプどおりの高さが出る環境（表示領域 950px 以上）では発火しない。 */
    /* 箱の中心を 1299.5px に置く。right で右端を決めてから幅の半分だけ戻す。 */
    right: 9.7569%; /* (1440-1299.5)/1440 */
    left: auto;
    transform: translateX(50%);
    font-size: 10px;
    /* カンプ比で縮めると 1024px で 7.1px になり SP(8px) より小さくなるので
       8px を下限にする（この要素はカンプでも縦線 37px が px 固定）。 */
    font-size: clamp(8px, 3.077px + 0.481vw, 10px);
  }
}
@media screen and (min-width: 1024px) and (max-height: 949px) {
  .p-catalog-lp-kv__scroll {
    bottom: 8%;
  }
}
.p-catalog-lp-kv__scroll {
  /* 軌道（カンプの縦線そのもの。位置・寸法は変えていない） */
}
.p-catalog-lp-kv__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 37px;
  margin: 8px auto 0;
  background-color: rgba(255, 255, 255, 0.3);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-kv__scroll::after {
    margin-top: 14px;
  }
}
.p-catalog-lp-kv__scroll {
  /* 軌道の上を流れる白いバー。
     親に transform が掛かっているので、親が containing block になる。
     ::after は親の内容ボックスの最下段なので bottom: 0 でぴたり重なる。
     中央寄せに translateX は使えない（transform をアニメーションが使うため）
     → margin-left: -0.5px で半分戻す。 */
}
.p-catalog-lp-kv__scroll::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -0.5px;
  width: 1px;
  height: 37px;
  background-color: #fff;
  animation: p-catalog-lp-kv-scroll 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.p-catalog-lp-kv__scroll {
  /* 「動きを減らす」設定のときは止めて、カンプどおりの静止した白線に戻す */
}
@media (prefers-reduced-motion: reduce) {
  .p-catalog-lp-kv__scroll::before {
    animation: none;
  }
  .p-catalog-lp-kv__scroll::after {
    background-color: #fff;
  }
}

/* ============================================================
   p-catalog-lp-cta — CTA セクション（3バリアント）
   template-parts/catalog-lp/cta.php

   計測値の正：docs/spec/catalog-lp/
     cta1-pc.json        8026:42    1440x600.1
     cta1-sp.json        8030:1422  390x817
     cta3-pc.json        8026:596   1440x1274.1（下に写真帯 1440x674）
     cta-variant-diff.json  CTA2 / CTA3-SP は CTA1 との差分だけを記録

   ■ 3バリアントの実測差分（＝ SCSS で分岐が要るのは 1 箇所だけ）
     CTA1 / CTA2 : 文言（タイトル）以外は 1 プロパティも違わない → SCSS 差分なし
     CTA3        : 文言に加えて
                     ・下に写真帯（--third の __band）
                     ・チャコールの下余白が PC 100px / SP 40px（CTA1/2 は PC 100 / SP 80）
                   → .p-catalog-lp-cta--third の padding-bottom: 0 と __band の margin-top で作る

   ■ DOM 順は SP の並び（タイトル → リード → 表紙ブロック → ボタン → 注記）
     PC は左カラム（タイトル/リード/ボタン/注記）＋右カラム（表紙ブロック）の 2 カラムで、
     SP では表紙ブロックがその 2 つの間に割り込む。
     そこで **SP は .__body を display: contents にして子を __inner の flex アイテムに昇格**させ、
     order で並べ替える。lg で .__body を通常の flex 列に戻すと、
     order 1/2/4/5 は元の DOM 順と同じ並びなのでそのままで正しい。
     （grid で 2 カラムにする案は、右カラム 400.1px > 左カラム 376px の差 24.1px が
       行トラックに分配されてしまい「左ブロックを上下中央に置く」カンプを再現できない）

   ■ 見出しは共通部品 .c-catalog-lp-heading を使わない
     あの部品は英字ラベル(Roboto) + 日本語見出し(Shippori) の 2 段構成だが、
     CTA には英字ラベルがカンプに存在しない。ラベル無しで流用すると部品側の
     label まわりの余白規則に依存するので、セクション固有の __title として持つ。

   ■ ボタンは共通部品 .c-catalog-lp-button（別ファイルで定義）。
     ここでは配置（order / margin）だけを持ち、見た目には一切触れない。
     部品側が既に width: 100% を持っているので幅指定も不要。
   ============================================================ */
/* ------------------------------------------------------------
   流動値ヘルパー（この partial 内だけの private 関数）

   catalog-lp.scss（エントリ）に同名の fluid() / fluid-sp() があるが、
   エントリで定義された関数は @use された partial からは参照できない。
   式は完全に同じものを写している。
   **本来は _catalog-lp-mq.scss に移して全 partial で共有すべき**（申し送り）。

     _fluid(24px, 40px)    1024px で 24px → 1440px で 40px（PC帯）
     _fluid-sp(22px)       320px で 22×320/390 → 390px 以上で 22px（SP帯）
   ------------------------------------------------------------ */
/* ============================================================
   セクション
   PC 1440x600.1（padding 100 / 180）・SP 390x817（padding 80 / 25）
   背景は画像ではなくベタ塗り #303337。
   ============================================================ */
.p-catalog-lp-cta {
  background-color: #303337;
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta {
    padding-top: clamp(80px, 30.769px + 4.808vw, 100px);
    padding-bottom: clamp(80px, 30.769px + 4.808vw, 100px);
  }
}

.p-catalog-lp-cta--third {
  padding-bottom: 0;
}

/* ------------------------------------------------------------
   inner
   PC：コンテンツ幅 1080px（1440 − 左右 180）。
       大きな横 padding ではなく max-width + margin: auto で作る。
   SP：コンテンツ幅 340px（390 − 左右 25）。
   タブレット帯（431〜1023px）は SP デザインを引き伸ばさず $tablet-cap(600px) で止めて
   中央に置く（LP 全体で統一した方針。根拠は sass/stay-lp.scss 冒頭の「案A」）。
   ※ 旧実装にもこのセクションだけ 600px という判断値があったが、
     今は LP 共通の $tablet-cap を参照している（同じ 600px になったのは偶然）。
     地色（.p-catalog-lp-cta の background-color）は全幅のまま。絞るのは中身だけ。
   ------------------------------------------------------------ */
.p-catalog-lp-cta__inner {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__inner {
    flex-direction: row;
    align-items: center;
    gap: 15.85%;
    max-width: 1120px;
    padding: 0 20px;
  }
}

.p-catalog-lp-cta__body {
  display: contents;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__body {
    display: flex;
    flex-direction: column;
    width: 44.9%;
    min-width: 0;
  }
}

/* ------------------------------------------------------------
   タイトル・リード・注記
   ------------------------------------------------------------ */
.p-catalog-lp-cta__title {
  order: 1;
  color: #fff;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(18.051px, 5.641vw, 22px);
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__title {
    font-size: clamp(22px, -2.615px + 2.404vw, 32px);
  }
}

.p-catalog-lp-cta__text {
  order: 2;
  margin-top: 24px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__text {
    margin-top: clamp(24px, -15.385px + 3.846vw, 40px);
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

.p-catalog-lp-cta__note {
  order: 5;
  margin-top: 16px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.16em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__note {
    margin-top: clamp(16px, -3.692px + 1.923vw, 24px);
  }
}

.p-catalog-lp-cta__button {
  order: 4;
  margin-top: 32px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__button {
    margin-top: clamp(32px, 12.308px + 1.923vw, 40px);
  }
}

/* ------------------------------------------------------------
   右カラム（枠 → 表紙5冊 → セット内容）
   PC 423.9x400.1 ／ SP 340x330
   ------------------------------------------------------------ */
.p-catalog-lp-cta__media {
  order: 3;
  margin-top: 32px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__media {
    width: 39.25%;
    min-width: 0;
    margin-top: 0;
  }
}

.p-catalog-lp-cta__badge {
  padding: 8px 15px;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__badge {
    font-size: clamp(15px, 12.538px + 0.24vw, 16px);
  }
}

/* ------------------------------------------------------------
   表紙5冊
   カンプは「奥に3冊の列」「手前に2冊の列」で、手前の列が奥の列に
   69.9px（PC）／52.8px（SP）食い込んでいる（_layoutFlags.overlaps）。

   ■ 影の再現方法
     DROP_SHADOW は **表紙1枚ずつではなく列のフレーム**に掛かっている。
     そこで img に box-shadow を付けず、列（__covers-row）に filter: drop-shadow を当てる。
     drop-shadow は要素の描画結果のアルファ形状に沿うので、
     Figma のフレーム影（＝3冊の合成シルエットの影）と同じ出方になる。
     列ごとに掛けることで「手前の列の影が奥の列の上に落ちる」重なりもそのまま再現される。
     影の実測値は PC 5.59px / SP 4.19px（＝PCの0.75倍）。PC は $lp-catalog-shadow と同値。

   ■ 幅の基準
     PC：表紙ブロック = 右カラム幅いっぱい（423.9 / 423.9 = 100%）
     SP：表紙ブロックだけ一回り小さい（320 / 340 = 94.12%）ので SP だけ絞る。
   ------------------------------------------------------------ */
.p-catalog-lp-cta__covers {
  width: 94.12%;
  margin: 24px auto 0;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__covers {
    width: 100%;
  }
}

.p-catalog-lp-cta__covers-row {
  display: flex;
  filter: drop-shadow(4.19px 4.19px 4.19px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__covers-row {
    filter: drop-shadow(5.59px 5.59px 5.59px rgba(0, 0, 0, 0.25));
  }
}

.p-catalog-lp-cta__covers-row--back {
  gap: 2.64%;
  aspect-ratio: 423.9/178;
}
.p-catalog-lp-cta__covers-row--back .p-catalog-lp-cta__cover {
  width: 29.7%;
}
.p-catalog-lp-cta__covers-row--back .p-catalog-lp-cta__cover:first-child {
  width: 35.32%;
}

.p-catalog-lp-cta__covers-row--front {
  gap: 4.26%;
  width: 62.02%;
  margin: -16.49% auto 0;
  aspect-ratio: 262.9/178;
}
.p-catalog-lp-cta__covers-row--front .p-catalog-lp-cta__cover {
  width: 47.87%;
}

.p-catalog-lp-cta__cover {
  min-width: 0;
}

.p-catalog-lp-cta__cover-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-catalog-lp-cta__contents {
  margin-top: 16px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   CTA3 の帯（--third のみ）
   PC 1440x674 ／ SP 390x182.5（アスペクト比は一致するので 1 つでまかなう）

   2026-09-30：静止画（cta3_bg.png）から**動画**に差し替え（先方指示）。
   ・動画は 16:9（1440x810）なので、この比率へ object-fit: cover で収める
     （上下が 68px ずつ切れて、静止画のときと同じ構図になる）
   ・読み込みと再生の制御は js/catalog-lp.js（KV の LCP を守るため遅延読み込み）
   ※ 旧コメントに「透過 PNG なので抜けた部分に地色が出る」とあったが、
     cta3_bg.png は pal8 で**アルファを持っていない**（確認済み）。
     帯の上端が地色に馴染んで見えるのは写真そのものが暗いため。
   ------------------------------------------------------------ */
.p-catalog-lp-cta__band {
  width: 100%;
  aspect-ratio: 1440/674;
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-cta__band {
    margin-top: clamp(40px, -107.692px + 14.423vw, 100px);
  }
}

.p-catalog-lp-cta__band-img,
.p-catalog-lp-cta__band-movie {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================================================
   p-catalog-lp-concept — concept セクション
   ------------------------------------------------------------
   カンプ実測（PC 8001:994 / 1440x1085 ／ SP 8030:1447 / 390x1470）
   数値の正は docs/spec/catalog-lp/concept-pc.json / concept-sp.json。

   ■ 背景の3層（すべて 1 要素の background で重ねる。DOM を増やさない）
       1. 写真   concept_bg-pc.jpg（1440x1085）/ concept_bg-sp.jpg（390x1471）
                 ※ ぼけているのは**元画像の状態**。filter: blur() は掛けない
       2. 暗幕   #000 50% 全面（書き出し時に画像から外してある）
       3. グラデ #000 0% → 80%（Figma: 8001:999 / 8030:1450）
                 PC は下から 491px、SP は下から 877px の帯。

   ■ 縦構造（Frame 211：padding 120 / gap 80 ・SP は padding 100 / gap 40）
       heading → 80/40 → body
       body(PC) = 左カラム 672px + gap 48px + 写真 355.6px（= 1080px）
       body(SP) = 縦積み（写真は本文の 24px 下）

   ■ 左カラム内（gap 24px・PC/SP 共通）
       award → 24 → 白 1px 罫線 → 24 → statement

   ■ フォントサイズは fluid()/fluid-sp() 相当の clamp() をベタ書きしている。
     ヘルパー関数はエントリ（sass/catalog-lp.scss）にあり、@use したパーシャルからは
     呼べないため。式は skills/_shared/measure-common.md「換算式」と同じ
     （SP 帯 320→390px ／ PC 帯 1024→1440px の2段）。
   ============================================================ */
.p-catalog-lp-concept {
  padding: 100px 0;
  color: #fff;
  background-color: #000;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/catalog-lp/concept_bg-sp.jpg");
  background-repeat: no-repeat;
  background-position: center bottom, center center, center center;
  background-size: 100% 877px, cover, cover;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept {
    padding: 120px 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/catalog-lp/concept_bg-pc.jpg");
    background-size: 100% 491px, cover, cover;
  }
}

.p-catalog-lp-concept__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__inner {
    max-width: 1130px;
  }
}

.p-catalog-lp-concept__heading {
  text-align: center;
}

/* ------------------------------------------------------------
   body（PC は 2 カラム）
   ------------------------------------------------------------ */
.p-catalog-lp-concept__body {
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__body {
    display: flex;
    align-items: flex-start;
    gap: 4.45%;
    margin-top: 80px;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__main {
    width: 62.22%;
  }
}

/* ------------------------------------------------------------
   受賞（4年連続No.1 ＋ 月桂冠3つ）
   「4年連続」28px / 「No.1」54px は PC・SP とも同値（実測）。
   ------------------------------------------------------------ */
.p-catalog-lp-concept__award-label {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(44.308px, 13.846vw, 54px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}

.p-catalog-lp-concept__award-years {
  font-size: 0.519em;
}

.p-catalog-lp-concept__award-media {
  width: 100%;
  max-width: 633px;
  aspect-ratio: 633/180;
  margin: 16px auto 0;
}

.p-catalog-lp-concept__award-img {
  width: 100%;
  height: 100%;
}

.p-catalog-lp-concept__award-note {
  margin-top: 16px;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.3;
  text-align: center;
}

/* ------------------------------------------------------------
   statement（白 1px 罫線 + 見出し + 本文）
   罫線の上下 24px は margin-top（上）と padding-top（下）で 1 回ずつ作る。
   ------------------------------------------------------------ */
.p-catalog-lp-concept__statement {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #fff;
}

.p-catalog-lp-concept__statement-title {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(14.769px, 4.616vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__statement-title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: clamp(18px, 3.231px + 1.442vw, 24px);
  }
}

.p-catalog-lp-concept__statement-text {
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__statement-text {
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

.p-catalog-lp-concept__statement-title + .p-catalog-lp-concept__statement-text {
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__statement-title + .p-catalog-lp-concept__statement-text {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------
   写真コラージュ（2列。右列だけ下にずれる）
   すべて列幅・コラージュ幅に対する % なので PC/SP で同じ値が使える。
     列幅  172.7/355.6 = 48.57%（SP 164.9/340 = 48.5%）
     列間  10.6/355.6  =  2.98%（SP  10.2/340 =  3.00%）
     段差  65.8/355.6  = 18.50%（SP  62.8/340 = 18.47%）※ flex アイテムの
           % margin はフレックスコンテナの inline size 基準
     行間  10.6/172.7  =  6.14%（SP  10.2/164.9 = 6.19%）※ 列幅基準
   ------------------------------------------------------------ */
.p-catalog-lp-concept__gallery {
  display: flex;
  gap: 3%;
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-concept__gallery {
    width: 32.93%;
    margin-top: 0;
  }
}

.p-catalog-lp-concept__gallery-col {
  width: 48.5%;
}

.p-catalog-lp-concept__gallery-col--lower {
  margin-top: 18.5%;
}

.p-catalog-lp-concept__gallery-item {
  width: 100%;
  aspect-ratio: 346/503;
}

.p-catalog-lp-concept__gallery-item + .p-catalog-lp-concept__gallery-item {
  margin-top: 6.15%;
}

.p-catalog-lp-concept__gallery-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================================================
   p-catalog-lp-survey — Owner's Survey セクション
   ------------------------------------------------------------
   カンプ実測（PC 8001:2149 / 1440x2067 ／ SP 8030:1253 / 390x1791）
   数値の正は docs/spec/catalog-lp/survey-pc.json / survey-sp.json。

   ■ 背景
     地色  $lp-bg-mist（#e5e2e1）をセクション全面。
     写真  **上部だけ**（PC 1440x431 / SP 390x373.5）。白幕（#E6E6E6 85%）は
           書き出し時に画像から外してあるので CSS で重ねる。
           → ::before に載せ、DO_NOT の 4 点セット
             （親 position:relative + isolation:isolate ／ 疑似 position:absolute + z-index:-1）
             を守る。aspect-ratio を使うので写真の高さは画面幅に比例して伸縮する。

   ■ 縦構造（Frame 211：padding 120/157・gap 80 ／ SP padding 100/68・gap 40）
       heading → panel（白パネル・枠 1px #cdc6b8）
       panel 内（gap PC 40 / SP 24）: stats → comment → banner

   ■ 下 padding がカンプで上下非対称（PC 157px / SP 68px）
     Frame 211 の padding は 120 / 100 だが、セクションフレームの高さ
     （2067 / 1791）との差がそれぞれ +37 / −32px ある。セクションの外形高さを
     カンプに合わせるため**実測どおり**に入れている。次セクション側で
     margin-top を足すと二重になるので注意。

   ■ フォントサイズは fluid()/fluid-sp() 相当の clamp() をベタ書き。
     ヘルパー関数はエントリ（sass/catalog-lp.scss）にあり @use したパーシャルからは
     呼べないため。式は 2 段（SP 帯 320→390px ／ PC 帯 1024→1440px）。
   ============================================================ */
.p-catalog-lp-survey {
  position: relative;
  isolation: isolate;
  padding: 100px 0 68px;
  background-color: #e5e2e1;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey {
    padding: 120px 0 157px;
  }
}

.p-catalog-lp-survey::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  aspect-ratio: 780/747;
  background-image: linear-gradient(rgba(230, 230, 230, 0.85), rgba(230, 230, 230, 0.85)), url("../img/catalog-lp/survey_bg-sp.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey::before {
    aspect-ratio: 2880/862;
    background-image: linear-gradient(rgba(230, 230, 230, 0.85), rgba(230, 230, 230, 0.85)), url("../img/catalog-lp/survey_bg-pc.jpg");
  }
}

.p-catalog-lp-survey__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__inner {
    max-width: 1130px;
  }
}

.p-catalog-lp-survey__heading {
  text-align: center;
}

/* ------------------------------------------------------------
   白パネル
   ------------------------------------------------------------ */
.p-catalog-lp-survey__panel {
  margin-top: 40px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__panel {
    margin-top: 80px;
    padding: 80px;
  }
}

/* ------------------------------------------------------------
   数字 2 本（97% / 4.8）
   PC：中央寄せの横並び。罫線は 2 本目の border-left で作る（空要素を置かない）。
     内側 918px に対して  380(本文) 57(罫線まで) | 57(罫線から) 380(本文)
       = 41.39% / 6.21%(gap) / 47.60%(= 380+57、うち padding-left 6.21%)
       合計 95.2% ＋ justify-content:center の余り 2.4% × 2 = 22px（カンプ一致）
   SP：縦積み。罫線は 2 本目の border-top。上下 24px ずつ。
   ------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6.21%;
  }
}

.p-catalog-lp-survey__stat {
  padding-left: 10px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 41.39%;
    min-height: 300px;
    padding-left: 0;
  }
}

.p-catalog-lp-survey__stat + .p-catalog-lp-survey__stat {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat + .p-catalog-lp-survey__stat {
    width: 47.6%;
    margin-top: 0;
    padding: 0 0 0 6.21%;
    border-top: 0;
    border-left: 1px solid #cdc6b8;
  }
}

.p-catalog-lp-survey__stat-figure {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(28.144px, 8.794vw, 34.3px);
  line-height: 1;
  color: #81734d;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat-figure {
    font-size: clamp(34.3px, 20.269px + 1.37vw, 40px);
  }
}

.p-catalog-lp-survey__stat-num {
  font-size: clamp(98.462px, 30.769vw, 120px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat-num {
    font-size: clamp(120px, 70.769px + 4.808vw, 140px);
  }
}

.p-catalog-lp-survey__stat-desc {
  margin-top: 16px;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(14.769px, 4.616vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat-desc {
    font-size: clamp(18px, 3.231px + 1.442vw, 24px);
  }
}

.p-catalog-lp-survey__stat-note {
  margin-top: 16px;
  font-size: clamp(8.205px, 2.564vw, 10px);
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat-note {
    font-size: clamp(10px, 5.077px + 0.481vw, 12px);
  }
}

.p-catalog-lp-survey__stat-stars {
  margin-top: 16px;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__stat-stars {
    font-size: clamp(12px, 2.154px + 0.962vw, 16px);
  }
}

/* ------------------------------------------------------------
   Owner's Comment
   ------------------------------------------------------------ */
.p-catalog-lp-survey__comment {
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__comment {
    margin-top: 40px;
  }
}

.p-catalog-lp-survey__comment-label {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 0 calc(52px - 0.16em) 0 52px;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(11.487px, 3.59vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.16em;
  color: #81734d;
}
.p-catalog-lp-survey__comment-label::before, .p-catalog-lp-survey__comment-label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 33px;
  height: 1px;
  background-color: #000;
}
.p-catalog-lp-survey__comment-label::before {
  left: 0;
}
.p-catalog-lp-survey__comment-label::after {
  right: 0;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__comment-label {
    font-size: clamp(14px, 4.154px + 0.962vw, 18px);
  }
}

.p-catalog-lp-survey__comment-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__comment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 1.74%;
         column-gap: 1.74%;
    row-gap: 16px;
  }
}

.p-catalog-lp-survey__comment-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background-color: #f9f8f4;
  border: 1px solid #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__comment-item {
    padding: 28px;
  }
}

.p-catalog-lp-survey__comment-avatar {
  flex: 0 0 auto;
  width: clamp(49.231px, 15.384vw, 60px);
  aspect-ratio: 88/90;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__comment-avatar {
    width: clamp(60px, -7.446px + 6.587vw, 87.4px);
  }
}

.p-catalog-lp-survey__comment-avatar-img {
  width: 100%;
  height: 100%;
}

.p-catalog-lp-survey__comment-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__comment-body {
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* ------------------------------------------------------------
   「おかげさまで3冠達成」バナー（PC / SP で別画像・別アスペクト）
   ------------------------------------------------------------ */
.p-catalog-lp-survey__banner {
  display: block;
  margin-top: 24px;
  aspect-ratio: 298/200;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-survey__banner {
    margin-top: 40px;
    aspect-ratio: 918/517;
  }
}

.p-catalog-lp-survey__banner-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/**********************

  _reason.scss — Why loved for 50 years（Reason 01 / 02 / 03）
  template-parts/catalog-lp/reason.php ＋ reason-01/02/03.php

  Figma PC: 8007:3432（1440x5961）／ SP: 8031:1930（390x8681）
  数値の正は docs/spec/catalog-lp/reason0{1,2,3}-pc.json ／ reason0{1,2,3}-sp-part*.json
  （このファイルのコメントに書いた寸法はすべてその JSON からの引用）

  ■ レイアウトの前提
    ・コンテンツ幅 PC 1081px（1440 のとき左右 179.5px）／ SP 340px（左右 25px）
    ・Reason 03 の保証エリアだけ背景が全幅（PC 1440 / SP 390）
    ・カンプは PC1440 と SP390 の2枚だけ。タブレット（431〜1023px）は
      **SP デザインを引き伸ばさず $tablet-cap(600px) で止めて中央に置く**
      （LP 全体で統一。根拠は sass/stay-lp.scss 冒頭の「案A」）。
      かつて入れていた md(768) の「1列→2列」は撤去したまま。
      器が 600px で止まる以上 1列あたりが狭く、カンプにも中間デザインが無い

  ■ 文字サイズは共通入口の v.fluid-sp() / v.fluid() を使う
      base           … v.fluid-sp(SP実測)   320→390 でスケールし 390 以上は SP 実測で固定
      @include mq(lg)… v.fluid(SP実測, PC実測) 1024→1440 で SP 実測から PC 実測へ

**********************/
/* ============================================================
   セクション
   PC: paddingTop 80 / paddingBottom 0（8007:3432）
   SP: paddingTop 100（8031:1930）。下端は Reason 03 の背景で埋まる
   ============================================================ */
.p-catalog-lp-reason {
  padding-top: 100px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason {
    padding-top: 80px;
  }
}

/* ---- セクション見出し（PC 8009:9555 / SP 8031:1931）---- */
.p-catalog-lp-reason__head {
  max-width: 600px;
  margin-inline: auto;
  padding-left: 25px;
  padding-right: 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__head {
    max-width: none;
    padding-left: max(25px, (100% - 1081px) / 2);
    padding-right: 0;
  }
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__head {
    display: flex;
    align-items: center;
    gap: 4.4%;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__heading {
    width: 46.1%;
  }
}

.p-catalog-lp-reason__heading .c-catalog-lp-heading__title {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% + 25px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__heading .c-catalog-lp-heading__title {
    width: auto;
    max-width: none;
  }
}

.p-catalog-lp-reason__heading-sub {
  margin-top: 24px;
  color: #323232;
  font-size: clamp(12.308px, 3.846vw, 15px);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__heading-sub {
    font-size: clamp(15px, 2.692px + 1.202vw, 20px);
  }
}

.p-catalog-lp-reason__photos {
  margin-top: 40px;
  margin-left: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__photos {
    width: 49.5%;
    margin-top: 0;
    margin-left: 0;
  }
}

.p-catalog-lp-reason__photo {
  width: 91.95%;
  overflow: hidden;
}

.p-catalog-lp-reason__photo--first {
  aspect-ratio: 571/181;
}

.p-catalog-lp-reason__photo--second {
  margin-top: 4.5px;
  margin-left: 8.05%;
  aspect-ratio: 571/180;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__photo--second {
    margin-top: 8px;
  }
}

.p-catalog-lp-reason__photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---- Reason 01 / 02 / 03 の並び ---- */
.p-catalog-lp-reason__body {
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__body {
    margin-top: 0;
  }
}

.p-catalog-lp-reason__item + .p-catalog-lp-reason__item {
  margin-top: 60px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason__item + .p-catalog-lp-reason__item {
    margin-top: 100px;
  }
}

.p-catalog-lp-reason01,
.p-catalog-lp-reason02 {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01,
  .p-catalog-lp-reason02 {
    max-width: 1131px;
  }
}

.p-catalog-lp-reason01 > * + *,
.p-catalog-lp-reason02 > * + * {
  margin-top: 40px;
}

/* ============================================================
   Reason NN の見出しブロック（3回使う）
   PC 8007:3623 ／ SP 8031:1942

   共通部品 .c-catalog-lp-heading とは別物として組んだ。理由：
     ・.c-catalog-lp-heading のラベルは Roboto 14px / letter-spacing 40%
       （8007:3438）だが、こちらは Shippori Mincho 14px / 18% の「Reason」＋
       120px の連番で、2行が -10px 重なる別構造（8007:6461 itemSpacing -10）
     ・見出しレベルも h2 と h3 で異なる
   ============================================================ */
.p-catalog-lp-reason-head__num {
  display: inline-block;
  color: #81734d;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  text-align: center;
}

.p-catalog-lp-reason-head__num-en {
  display: block;
  font-size: clamp(8.697px, 2.719vw, 10.6px);
  line-height: 1;
  letter-spacing: 0.18em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-head__num-en {
    font-size: clamp(10.6px, 2.231px + 0.817vw, 14px);
  }
}

.p-catalog-lp-reason-head__num-figure {
  display: block;
  margin-top: -0.083em;
  font-size: clamp(74.585px, 23.307vw, 90.9px);
  line-height: 1.067;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-head__num-figure {
    font-size: clamp(90.9px, 19.269px + 6.995vw, 120px);
  }
}

.p-catalog-lp-reason-head__label {
  margin-top: 16px;
  color: #81734d;
  font-size: clamp(11.487px, 3.59vw, 14px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-head__label {
    margin-top: 27px;
    font-size: clamp(14px, 6.615px + 0.721vw, 17px);
  }
}

.p-catalog-lp-reason-head__title {
  margin-top: 12px;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(19.692px, 6.154vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-head__title {
    font-size: clamp(24px, 4.308px + 1.923vw, 32px);
  }
}

.p-catalog-lp-reason-head__lead {
  margin-top: 16px;
  color: #323232;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-head__lead {
    margin-top: 27px;
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* ============================================================
   枠付きカード（Reason 01 / 02 の #f9f8f4・Reason 03 の白）
   PC 8007:3766 ほか
   ============================================================ */
.p-catalog-lp-reason-card {
  padding: 32px 24px;
  border: 1px solid #cdc6b8;
  background-color: #f9f8f4;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-card {
    padding: 40px;
  }
}

.p-catalog-lp-reason-card__title {
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(18.051px, 5.641vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-card__title {
    font-size: clamp(22px, 7.231px + 1.442vw, 28px);
    line-height: 1;
  }
}

.p-catalog-lp-reason-card__lead {
  margin-top: 16px;
  color: #323232;
  font-size: clamp(11.487px, 3.59vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-card__lead {
    font-size: clamp(14px, 6.615px + 0.721vw, 17px);
  }
}

/* ============================================================
   Reason 01 ／ 外壁タイル
   ============================================================ */
/* ---- 写真 ＋ グラフ（PC 8007:3934 / SP 8031:1950）---- */
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01 .p-catalog-lp-reason-head__lead {
    max-width: 55.6%;
  }
}

.p-catalog-lp-reason01__visual > * + * {
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01__visual {
    display: flex;
    align-items: center;
    gap: 5.49%;
  }
  .p-catalog-lp-reason01__visual > * + * {
    margin-top: 0;
  }
}

.p-catalog-lp-reason01__photo {
  aspect-ratio: 595/429;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01__photo {
    width: 55.04%;
  }
}

.p-catalog-lp-reason01__photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---- グラフ（8007:3977 / 8031:1952）--------------------------------
   PC 426.7x418.6 と SP 340x333.6 が完全な相似（比 0.7968）なので、
   箱を aspect-ratio で固定し中身をすべて % で置いている。
   こうすると斜線を rotate() の疑似要素で作っても角度がズレない。

   ※ lg 未満では箱を SP 実寸（340px）で頭打ちにしている。
      本文幅いっぱいに広げると、箱だけ 2.9 倍に伸びて中の文字
      （fluid-sp なので 390px 以上は固定）と比率が合わなくなるため。

   ※ カンプの文字はアウトライン化されていてフォントサイズが取得できない。
      ink の高さ ÷ 字面比（Shippori Mincho 数字 0.749 / Noto Sans JP 漢字 0.93。
      比率は同カンプの実テキスト 8007:7952 等の absoluteRenderBounds から実測）
      から起こした**推定値**。実機で必ず目視照合すること。
-------------------------------------------------------------------- */
.p-catalog-lp-reason-graph {
  position: relative;
  width: 100%;
  max-width: clamp(278.974px, 87.18vw, 340px);
  margin-inline: auto;
  aspect-ratio: 4267/4186;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph {
    width: 39.47%;
    max-width: none;
  }
}
.p-catalog-lp-reason-graph::before {
  content: "";
  position: absolute;
  top: 92.05%;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #636363;
}
.p-catalog-lp-reason-graph::after {
  content: "";
  position: absolute;
  top: 26.35%;
  left: 30.65%;
  width: 72.49%;
  height: 1.5px;
  background-image: repeating-linear-gradient(to right, #999 0 3px, transparent 3px 7px);
  transform-origin: 0 0;
  transform: rotate(60.42deg);
}

.p-catalog-lp-reason-graph__caption {
  position: absolute;
  top: 0;
  left: 7.78%;
  color: #636363;
  font-size: clamp(11.077px, 3.461vw, 13.5px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph__caption {
    font-size: clamp(13.5px, 4.885px + 0.841vw, 17px);
  }
}

.p-catalog-lp-reason-graph__data {
  position: absolute;
  inset: 0;
}

.p-catalog-lp-reason-graph__item {
  position: absolute;
  inset: 0;
}
.p-catalog-lp-reason-graph__item::before {
  content: "";
  position: absolute;
  bottom: 7.95%;
  background-color: #988155;
}

.p-catalog-lp-reason-graph__item--general::before {
  left: 14.55%;
  width: 16.1%;
  height: 65.7%;
}

.p-catalog-lp-reason-graph__item--own::before {
  left: 66.44%;
  width: 17.55%;
  height: 1.43%;
}

.p-catalog-lp-reason-graph__label {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  color: #636363;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph__label {
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

.p-catalog-lp-reason-graph__item--general .p-catalog-lp-reason-graph__label {
  left: 22.51%;
}

.p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__label {
  left: 74.65%;
}

.p-catalog-lp-reason-graph__value {
  position: absolute;
  margin: 0;
  color: #636363;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.p-catalog-lp-reason-graph__figure {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  line-height: 1;
}

.p-catalog-lp-reason-graph__item--general .p-catalog-lp-reason-graph__value {
  bottom: 74.8%;
  left: 7.22%;
  font-size: clamp(11.077px, 3.461vw, 13.5px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph__item--general .p-catalog-lp-reason-graph__value {
    font-size: clamp(13.5px, 4.885px + 0.841vw, 17px);
  }
}

.p-catalog-lp-reason-graph__item--general .p-catalog-lp-reason-graph__figure {
  font-size: clamp(35.938px, 11.231vw, 43.8px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph__item--general .p-catalog-lp-reason-graph__figure {
    font-size: clamp(43.8px, 16.231px + 2.692vw, 55px);
  }
}

.p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value {
  bottom: 12%;
  left: 66.51%;
  font-size: clamp(16.985px, 5.307vw, 20.7px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value {
    font-size: clamp(20.7px, 7.654px + 1.274vw, 26px);
  }
}

.p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__figure {
  font-size: clamp(67.364px, 21.051vw, 82.1px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__figure {
    font-size: clamp(82.1px, 30.654px + 5.024vw, 103px);
  }
}

/* ---- タイルの採用例4点（PC 8007:4023 / SP 8031:1997）---- */
.p-catalog-lp-reason01__examples {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01__examples {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -moz-column-gap: 3.2%;
         column-gap: 3.2%;
    margin-top: 24px;
  }
}

.p-catalog-lp-reason01__example {
  position: relative;
}
.p-catalog-lp-reason01__example::before {
  content: "";
  position: absolute;
  top: -16px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #cdc6b8;
}
.p-catalog-lp-reason01__example:first-child::before {
  content: none;
}
.p-catalog-lp-reason01__example::after {
  content: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01__example::before {
    content: none;
  }
  .p-catalog-lp-reason01__example:nth-child(n)::after {
    content: "";
    left: -7.08%;
  }
  .p-catalog-lp-reason01__example:nth-child(4n+1)::after {
    content: none;
  }
}

.p-catalog-lp-reason01__example-icon {
  max-width: 100%;
  margin-inline: auto;
}

.p-catalog-lp-reason01__example-icon--imperial {
  width: 176px;
  aspect-ratio: 176/90;
}

.p-catalog-lp-reason01__example-icon--tokyo {
  width: 190px;
  aspect-ratio: 190/90;
}

.p-catalog-lp-reason01__example-icon--tower {
  width: 143.8px;
  aspect-ratio: 1438/900;
}

.p-catalog-lp-reason01__example-icon--shuttle {
  width: 109.3px;
  aspect-ratio: 1093/900;
}

.p-catalog-lp-reason01__example-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-catalog-lp-reason01__example-title {
  margin-top: 16px;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(14.769px, 4.616vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}

.p-catalog-lp-reason01__example-text {
  margin-top: 8px;
  color: #323232;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason01__example-text {
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

/* ============================================================
   Reason 02 ／ プレミアム・ハイブリッド構法
   ============================================================ */
/* ---- 見出し ＋ 木造躯体の写真（PC 8010:10824 / SP 8031:2635）---- */
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__intro .p-catalog-lp-reason-head {
    width: 55.65%;
  }
}

.p-catalog-lp-reason02__photo {
  width: 54.47%;
  margin-top: 16px;
  aspect-ratio: 276/447;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__photo {
    width: 25.56%;
    margin-top: 0;
  }
}

.p-catalog-lp-reason02__photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---- 耐震実験の帯（PC 8007:7933 / SP 8031:2646）---- */
.p-catalog-lp-reason02__band {
  padding: 16px;
  background-color: #303337;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__band {
    display: flex;
    align-items: center;
    gap: 2.85%;
    padding: 27.5px 48px;
  }
}

.p-catalog-lp-reason02__band-label {
  display: inline-block;
  padding: 0.45em 1.55em 0.55em;
  background-color: #81734d;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(12.308px, 3.846vw, 15px);
  line-height: 1;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__band-label {
    flex: none;
    font-size: clamp(15px, 7.615px + 0.721vw, 18px);
  }
}

.p-catalog-lp-reason02__band-text {
  display: block;
  margin-top: 4px;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(14.769px, 4.616vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__band-text {
    margin-top: 0;
    font-size: clamp(18px, 3.231px + 1.442vw, 24px);
    line-height: 1;
  }
}

/* ---- 地図カラム ／ 全壊・半壊カラム（PC 8007:8600 / SP 8031:2652）---- */
.p-catalog-lp-reason02__columns {
  padding-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__columns {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
  }
}

.p-catalog-lp-reason02__column {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__column {
    width: 45.37%;
  }
}

.p-catalog-lp-reason02__column--record {
  margin-top: 48px;
}
.p-catalog-lp-reason02__column--record::before {
  content: "";
  position: absolute;
  top: -24px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__column--record {
    margin-top: 0;
  }
  .p-catalog-lp-reason02__column--record::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: -10.2%;
    width: 1px;
    height: auto;
  }
}

.p-catalog-lp-reason02__column-title {
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(16.41px, 5.129vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__column-title {
    font-size: clamp(20px, 10.154px + 0.962vw, 24px);
  }
}

.p-catalog-lp-reason02__map {
  width: 100%;
  margin-top: 32px;
  aspect-ratio: 490/464;
}

.p-catalog-lp-reason02__map-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-catalog-lp-reason02__record {
  text-align: center;
}

.p-catalog-lp-reason02__record-label {
  display: block;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(20.595px, 6.436vw, 25.1px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__record-label {
    font-size: clamp(25.1px, 8.115px + 1.659vw, 32px);
  }
}

.p-catalog-lp-reason02__record-figure {
  display: block;
  margin-top: 9.4px;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(102.974px, 32.18vw, 125.5px);
  line-height: 1;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__record-figure {
    margin-top: 12px;
    font-size: clamp(125.5px, 40.577px + 8.293vw, 160px);
  }
}

.p-catalog-lp-reason02__record-title {
  margin-top: 16px;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(16.41px, 5.129vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__record-title {
    margin-top: 40px;
    font-size: clamp(20px, 10.154px + 0.962vw, 24px);
  }
}

.p-catalog-lp-reason02__record-text {
  margin-top: 8px;
  color: #323232;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__record-text {
    margin-top: 16px;
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* ---- 構法カード（PC 8007:8602 / SP 8031:2866）---- */
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__card-head {
    display: flex;
    align-items: flex-start;
    gap: 2.4%;
  }
}

.p-catalog-lp-reason02__award {
  width: 196px;
  max-width: 100%;
  padding: 18px 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__award {
    flex: none;
    width: 19.6%;
  }
}

.p-catalog-lp-reason02__award-img {
  width: 100%;
  height: auto;
}

.p-catalog-lp-reason02__card-body {
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__card-body {
    width: 78%;
    margin-top: 0;
  }
}

.p-catalog-lp-reason02__card-title {
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(16.41px, 5.129vw, 20px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__card-title {
    font-size: clamp(20px, 10.154px + 0.962vw, 24px);
    letter-spacing: 0.04em;
  }
}

.p-catalog-lp-reason02__card-lead {
  margin-top: 16px;
  color: #323232;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__card-lead {
    font-size: clamp(12px, -0.308px + 1.202vw, 17px);
  }
}

.p-catalog-lp-reason02__methods {
  margin-top: 40px;
}

.p-catalog-lp-reason02__method {
  position: relative;
  padding-inline: 8px;
}
.p-catalog-lp-reason02__method + .p-catalog-lp-reason02__method {
  margin-top: 48px;
}
.p-catalog-lp-reason02__method + .p-catalog-lp-reason02__method::before {
  content: "";
  position: absolute;
  top: -24px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__method {
    display: flex;
    padding-inline: 0.8%;
    align-items: center;
  }
}

.p-catalog-lp-reason02__method-figure {
  aspect-ratio: 17/10;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__method-figure {
    flex: none;
    width: 34.62%;
    margin-right: 3.26%;
  }
}

.p-catalog-lp-reason02__method-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-catalog-lp-reason02__method-body {
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__method-body {
    width: 62.12%;
    margin-top: 0;
  }
}

.p-catalog-lp-reason02__method-title {
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(16.41px, 5.129vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__method-title {
    font-size: clamp(20px, 10.154px + 0.962vw, 24px);
  }
}

.p-catalog-lp-reason02__method-sub {
  margin-top: 8px;
  color: #81734d;
  font-size: clamp(12.308px, 3.846vw, 15px);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__method-sub {
    margin-top: 24px;
    font-size: clamp(15px, 7.615px + 0.721vw, 18px);
  }
}

.p-catalog-lp-reason02__method-text {
  margin-top: 8px;
  color: #323232;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason02__method-text {
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* ============================================================
   Reason 03 ／ 6つの長期保証体制
   ============================================================ */
/* ---- 見出し ＋ キッチンの写真（PC 8007:9380 / SP 8031:3022）---- */
.p-catalog-lp-reason03__intro {
  max-width: 600px;
  margin-inline: auto;
  padding-left: 25px;
  padding-right: 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__intro {
    max-width: none;
    padding-left: max(25px, (100% - 1081px) / 2);
    padding-right: 0;
  }
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__intro .p-catalog-lp-reason-head {
    width: 42.9%;
  }
}

.p-catalog-lp-reason03__photo {
  margin-top: 16px;
  aspect-ratio: 659/372;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__photo {
    width: 52.4%;
    margin-top: 0;
  }
}

.p-catalog-lp-reason03__photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---- 保証エリア（背景が全幅・PC 8007:9346 / SP 8031:3165）---- */
.p-catalog-lp-reason03__area {
  margin-top: 37px;
  padding: 42px 25px 91px;
  background-color: #f9f8f4;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__area {
    margin-top: 80px;
    padding: 48px 40px 120px;
  }
}

.p-catalog-lp-reason03__inner {
  max-width: 550px;
  margin-inline: auto;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__inner {
    max-width: 1080px;
  }
}

/* ---- 保証1〜6（PC 8007:9353 / SP 8031:2899）---- */
.p-catalog-lp-reason03__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 48px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    -moz-column-gap: 4.48%;
         column-gap: 4.48%;
  }
}

.p-catalog-lp-reason03__guarantee {
  position: relative;
}
.p-catalog-lp-reason03__guarantee::before {
  content: "";
  position: absolute;
  top: -24px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #cdc6b8;
}
.p-catalog-lp-reason03__guarantee:first-child::before {
  content: none;
}
.p-catalog-lp-reason03__guarantee::after {
  content: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__guarantee::before {
    content: none;
  }
  .p-catalog-lp-reason03__guarantee:nth-child(4)::before {
    content: "";
    left: 0;
    right: auto;
    width: 329.525483304%;
  }
  .p-catalog-lp-reason03__guarantee:nth-child(n)::after {
    content: "";
    left: -7.38%;
  }
  .p-catalog-lp-reason03__guarantee:nth-child(3n+1)::after {
    content: none;
  }
}

.p-catalog-lp-reason03__guarantee-no {
  display: inline-block;
  min-width: 90px;
  padding: 8px;
  background-color: #81734d;
  color: #fff;
  font-size: clamp(11.487px, 3.59vw, 14px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

.p-catalog-lp-reason03__guarantee-title {
  margin-top: 8px;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(16.41px, 5.129vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__guarantee-title {
    font-size: clamp(20px, 10.154px + 0.962vw, 24px);
  }
}

.p-catalog-lp-reason03__guarantee-text {
  margin-top: 8px;
  color: #323232;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__guarantee-text {
    margin-top: 16px;
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

/* ---- 保証比較チャートのカード（PC 8007:9451 / SP 8031:2943）---- */
.p-catalog-lp-reason03__card {
  margin-top: 24px;
  padding: 24px 16px;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__card {
    margin-top: 48px;
    padding: 40px;
  }
}

.p-catalog-lp-reason03__chart-title {
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(16.41px, 5.129vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__chart-title {
    font-size: clamp(20px, 10.154px + 0.962vw, 24px);
    line-height: 1;
  }
}

.p-catalog-lp-reason03__notes {
  margin-top: 16px;
}

.p-catalog-lp-reason03__note {
  color: #323232;
  font-size: clamp(8.205px, 2.564vw, 10px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason03__note {
    font-size: clamp(10px, 5.077px + 0.481vw, 12px);
  }
}

/* ============================================================
   保証比較チャート（8009:9686 / 8031:2947）

   ■ table を選んだ理由（section-coding Step 6 / examples/table-list）
     判定1「罫線で区切られた行が6回反復し、各行が『ラベル + 内容』の同じ構造」
     判定5「Excel に転記できるか」＝ できる（保証項目／当社／一般的な保証）。
     1カテゴリ = tbody（当社の行 + 一般の行）で、カテゴリ名は
     th[rowspan="2"][scope="rowgroup"]。PC では2行にまたがって縦中央、
     SP では display:block により自動でバーの上に積まれる＝カンプどおり。

   ■ display を切り替えるので HTML 側で role を全要素に明示している
     （DO_NOT.md の公認パターン。暗黙 ARIA ロールの復元）

   ■ バーの長さ（カンプ実測。バー幅 ÷ バー列の幅）
     ---------------------------------------------------------------
      年数表記            PC(÷885)          SP(÷307)
      5年 / 1〜2年        115   = 13%       35  = 11.4%
      10年 / 2回検査      238.8 = 27%       73  = 23.8%
      15年                425   = 48%       131 = 42.7%
      20年ー最長60年      646.3 = 73%       185 = 60.3%（187 = 60.9% の行もある）
      35年                805.6 = 91%       247 = 80.5%
     ---------------------------------------------------------------
     **年数には厳密比例していない**（5→10年で +14pt、10→15年で +21pt）。
     PC は 13 / 27 / 48 / 73 / 91 というキリのよい % で手置きされていて、
     SP はそれを一律 0.83〜0.89 倍に詰めてある（ラベルの文字数が入るため）。
     「年数 × 係数」では再現できないので PC・SP の実測 % を両方持つ。
   ============================================================ */
.p-catalog-lp-reason-chart {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding-block: 12.5px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart {
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 24px;
  }
}

.p-catalog-lp-reason-chart__group {
  display: block;
  padding-block: 13.8px;
  background-image: repeating-linear-gradient(to right, #63605b 0 1px, transparent 1px 4.4px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left top;
}
.p-catalog-lp-reason-chart__group:last-child {
  background-image: repeating-linear-gradient(to right, #63605b 0 1px, transparent 1px 4.4px), repeating-linear-gradient(to right, #63605b 0 1px, transparent 1px 4.4px);
  background-size: 100% 1px, 100% 1px;
  background-position: left top, left bottom;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__group {
    display: table-row-group;
    padding-block: 0;
  }
}

.p-catalog-lp-reason-chart__row {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__row {
    display: table-row;
  }
}

.p-catalog-lp-reason-chart__category {
  display: block;
  margin-bottom: 8px;
  color: #81734d;
  font-size: clamp(12.308px, 3.846vw, 15px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__category {
    display: table-cell;
    width: 11.5%;
    margin-bottom: 0;
    padding: 13.8px 1.5% 13.8px 0;
    vertical-align: middle;
  }
}

.p-catalog-lp-reason-chart__cell {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__cell {
    display: table-cell;
    vertical-align: middle;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__row:first-child .p-catalog-lp-reason-chart__cell {
    padding-top: 13.8px;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__row:last-child .p-catalog-lp-reason-chart__cell {
    padding-bottom: 13.8px;
  }
}

.p-catalog-lp-reason-chart__row + .p-catalog-lp-reason-chart__row .p-catalog-lp-reason-chart__track {
  margin-top: 5px;
}

.p-catalog-lp-reason-chart__track {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 21.3px;
  padding-left: calc(var(--catalog-chart-bar) + 10px);
  background-color: #e9e8e5;
  color: #323232;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.p-catalog-lp-reason-chart__track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--catalog-chart-bar);
}

.p-catalog-lp-reason-chart__track--own {
  font-size: clamp(9.846px, 3.077vw, 12px);
  font-weight: 700;
}
.p-catalog-lp-reason-chart__track--own::before {
  background-color: #988155;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--own {
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

.p-catalog-lp-reason-chart__track--general {
  font-size: clamp(8.205px, 2.564vw, 10px);
}
.p-catalog-lp-reason-chart__track--general::before {
  background-color: #959595;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--general {
    font-size: clamp(10px, 5.077px + 0.481vw, 12px);
  }
}

.p-catalog-lp-reason-chart__track--y05 {
  --catalog-chart-bar: 11.4%;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--y05 {
    --catalog-chart-bar: 13%;
  }
}

.p-catalog-lp-reason-chart__track--y10 {
  --catalog-chart-bar: 23.8%;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--y10 {
    --catalog-chart-bar: 27%;
  }
}

.p-catalog-lp-reason-chart__track--y15 {
  --catalog-chart-bar: 42.7%;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--y15 {
    --catalog-chart-bar: 48%;
  }
}

.p-catalog-lp-reason-chart__track--y2060 {
  --catalog-chart-bar: 60.6%;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--y2060 {
    --catalog-chart-bar: 73%;
  }
}

.p-catalog-lp-reason-chart__track--y35 {
  --catalog-chart-bar: 80.5%;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-reason-chart__track--y35 {
    --catalog-chart-bar: 91%;
  }
}

/* ============================================================
   p-catalog-lp-works — works セクション（施工事例 case01〜04）
   ------------------------------------------------------------
   カンプ実測（PC 8011:15851 / 1440x6225 ／ SP 8034:5944 / 390x6750）
   数値の正は docs/spec/catalog-lp/works-pc.json / works-sp.json。

   ■ 全体の縦構造
       帯（491 / SP 286）→ [SP のみ 40] → case × 4（間 120 / SP 80）
       → 下余白 141（SP は 0）
     case 内：写真+本文（564） → 57/40 → 白カード → 40 → ボタン行 → 40 → サムネ帯

   ■ case は左右が交互（--reverse が偶数件目）
     PC は「本文 427px ＋ 写真が画面端まで」の 4 トラックグリッドで組む。
       [端余白 = (100% - 1080px)/2][本文 427][間 43][写真 1fr]
     1080px はカード（白）の幅。端余白をこの式にすることで
     **本文の左端とカードの左端が どの幅でも揃う**（固定 px の寄せでは 1440 でしか合わない）。

   ■ サムネ帯＝常時スクロールのスライダー（CSS のみ・JS なし）
     ライブラリを入れない確定仕様（docs/catalog-lp-plan.md）。
     PHP がリストを 2 セット出しているので、幅の 50% だけ動かせば継ぎ目なくループする。
     1 アイテムの占有幅 = width + margin-right なので、10 個の 50% = 5 個分ちょうど。
     速度：1 周 50s。PC で 5×(323+16)=1695px → 約 34px/秒、SP で 1455px → 約 29px/秒。
     カンプに速度指定が無いので実装側で決めた。文字が無く読み取り負荷が低い帯なので、
     「止まって見えない」下限（約 25px/秒）と「視線を引きすぎない」上限の間を取った。
     prefers-reduced-motion: reduce では停止する（必須）。

   ■ 帯（上部 6 枚）の object-position は :nth-child が持つ
     case の写真と同じ元画像の別トリミングなので、書き出さず cover + position で再現する。
     **PHP 側の配列順を変えるとトリミングがずれる。**

   ■ フォントサイズ・可変値は共有ヘルパー v.fluid() / v.fluid-sp() を使う
     （実体は sass/_catalog-lp-mq.scss。SP帯 320→390px ／ PC帯 1024→1440px の2段）。
   ============================================================ */
.p-catalog-lp-works {
  background-color: #eeece4;
  overflow-wrap: anywhere;
  padding-bottom: clamp(82.051px, 25.641vw, 100px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works {
    padding-bottom: clamp(100px, -0.923px + 9.856vw, 141px);
  }
}

/* ------------------------------------------------------------
   上部の帯（写真 6 枚 + 黒 60% の暗幕 + 白 1px の内枠 + 見出し）
   写真・暗幕・見出しを同じグリッドセルに重ね、帯の高さは
   「写真の高さ」と「見出しの高さ」の大きいほうで決まるようにする
   （見出しを絶対配置にすると、狭い幅で見出しが帯からはみ出す）。
   ------------------------------------------------------------ */
.p-catalog-lp-works__band {
  position: relative;
  display: grid;
  isolation: isolate;
}
.p-catalog-lp-works__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}
.p-catalog-lp-works__band::after {
  content: "";
  position: absolute;
  inset: clamp(7.385px, 2.307vw, 9px);
  z-index: 2;
  border: 1px solid #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__band::after {
    inset: clamp(9px, -18.077px + 2.644vw, 20px);
  }
}

/*  ⚠ ここだけ md(768) の分岐を**残している**（LP 全体の「431〜1023px は $tablet-cap で
    中央寄せ」から外れる唯一の箇所。判断が割れたので理由を残す）。

      ・この帯は全幅の背景（写真＋暗幕＋内枠）であって「中身」ではない。
        方針どおり背景は全幅のままにするので、600px に絞る対象ではない。
      ・全幅のまま SP の 2 列を維持すると、1023px でタイル 1 枚が 511x375px・
        帯の高さが 750px まで膨らむ（PC 1024px の 349px の 2.1 倍）。
        まさに今回つぶしたい「SP デザインの引き伸ばし」そのものになる。
      ・3 列に切り替えると 768px で 262px・1023px で 349px となり、
        1024px（PC も 3 列）と連続する＝ 1023→1024 の段差も小さくなる。

    見出しの器（__band-body）は方針どおり $tablet-cap で止めてある。 */
.p-catalog-lp-works__band-list {
  grid-area: 1/1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
  .p-catalog-lp-works__band-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-catalog-lp-works__band-item {
  aspect-ratio: 195/143;
}
@media screen and (min-width: 768px) {
  .p-catalog-lp-works__band-item {
    aspect-ratio: 480/245.5;
  }
}

.p-catalog-lp-works__band-item--wide {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-catalog-lp-works__band-item--wide {
    display: block;
  }
}

.p-catalog-lp-works__band-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
@media screen and (min-width: 768px) {
  .p-catalog-lp-works__band-item:nth-child(1) .p-catalog-lp-works__band-img {
    -o-object-position: 50% 50.1%;
       object-position: 50% 50.1%;
  }
  .p-catalog-lp-works__band-item:nth-child(2) .p-catalog-lp-works__band-img {
    -o-object-position: 50% 20.3%;
       object-position: 50% 20.3%;
  }
  .p-catalog-lp-works__band-item:nth-child(3) .p-catalog-lp-works__band-img {
    -o-object-position: 50% 50.1%;
       object-position: 50% 50.1%;
  }
  .p-catalog-lp-works__band-item:nth-child(4) .p-catalog-lp-works__band-img {
    -o-object-position: 50% 100%;
       object-position: 50% 100%;
  }
  .p-catalog-lp-works__band-item:nth-child(5) .p-catalog-lp-works__band-img {
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
  }
  .p-catalog-lp-works__band-item:nth-child(6) .p-catalog-lp-works__band-img {
    -o-object-position: 50% 76.6%;
       object-position: 50% 76.6%;
  }
}

.p-catalog-lp-works__band-body {
  grid-area: 1/1;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 33px;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__band-body {
    max-width: 767px;
    margin: 0 auto;
    padding: 40px 20px;
  }
}

.p-catalog-lp-works__heading {
  text-align: center;
}

.p-catalog-lp-works__heading .c-catalog-lp-heading__title {
  margin-right: -0.04em;
}

.p-catalog-lp-works__band-lead {
  margin-top: clamp(19.692px, 6.154vw, 24px);
  color: #fff;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__band-lead {
    margin-top: clamp(24px, -15.385px + 3.846vw, 40px);
    font-weight: 400;
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* ------------------------------------------------------------
   case（4 件）
   ------------------------------------------------------------ */
.p-catalog-lp-works__case {
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case {
    margin-top: 0;
  }
}

.p-catalog-lp-works__case + .p-catalog-lp-works__case {
  margin-top: clamp(65.641px, 20.513vw, 80px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case + .p-catalog-lp-works__case {
    margin-top: clamp(80px, -18.462px + 9.615vw, 120px);
  }
}

/* --- 写真 + 本文の行 --- */
.p-catalog-lp-works__visual {
  display: grid;
  row-gap: 16px;
  max-width: 600px;
  margin-inline: auto;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__visual {
    max-width: none;
    grid-template-columns: minmax(20px, calc((100% - 1080px) / 2)) minmax(0, 427px) minmax(20px, 43px) minmax(0, 1fr);
    align-items: start;
    row-gap: 0;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case--reverse .p-catalog-lp-works__visual {
    grid-template-columns: minmax(0, 1fr) minmax(20px, 43px) minmax(0, 427px) minmax(20px, calc((100% - 1080px) / 2));
  }
}

.p-catalog-lp-works__body {
  padding: 0 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__body {
    grid-column: 2;
    grid-row: 1;
    padding: clamp(40px, -58.462px + 9.615vw, 80px) 0 0;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case--reverse .p-catalog-lp-works__body {
    grid-column: 3;
  }
}

.p-catalog-lp-works__photo {
  width: calc(100% - 25px);
  margin-left: 25px;
  aspect-ratio: 790/564;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__photo {
    grid-column: 4;
    grid-row: 1;
    width: 100%;
    margin-left: 0;
  }
}

.p-catalog-lp-works__case--reverse .p-catalog-lp-works__photo {
  margin-right: 25px;
  margin-left: 0;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case--reverse .p-catalog-lp-works__photo {
    grid-column: 1;
    margin-right: 0;
  }
}

.p-catalog-lp-works__photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* --- Case 01 / 04 --- */
.p-catalog-lp-works__no {
  color: #81734d;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(59.979px, 18.744vw, 73.1px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.p-catalog-lp-works__no-label,
.p-catalog-lp-works__no-total {
  font-size: 0.417em;
}

.p-catalog-lp-works__no-current {
  margin-left: 0.104em;
}

.p-catalog-lp-works__no-total {
  margin-left: 0.25em;
}

/* --- 【2階建て｜50坪〜｜三重県】のタグ --- */
.p-catalog-lp-works__spec {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 11px;
  padding: 4px 24px;
  background-color: #81734d;
  color: #fff;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(12.308px, 3.846vw, 15px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__spec {
    font-size: clamp(15px, 7.615px + 0.721vw, 18px);
  }
}

.p-catalog-lp-works__title {
  margin-top: clamp(13.128px, 4.103vw, 16px);
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(19.692px, 6.154vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__title {
    margin-top: clamp(16px, -43.077px + 5.769vw, 40px);
    font-size: clamp(24px, -5.538px + 2.885vw, 36px);
  }
}

.p-catalog-lp-works__lead {
  margin-top: clamp(6.564px, 2.051vw, 8px);
  color: #323232;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__lead {
    margin-top: clamp(8px, -31.385px + 3.846vw, 24px);
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* ------------------------------------------------------------
   白いコメントカード + ボタン行（1080px の内側）
   ------------------------------------------------------------ */
.p-catalog-lp-works__inner {
  max-width: 600px;
  margin: 0 auto;
  margin-top: clamp(32.821px, 10.256vw, 40px);
  padding: 0 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__inner {
    max-width: 1120px;
    margin-top: clamp(40px, -1.846px + 4.087vw, 57px);
    padding: 0 20px;
  }
}

.p-catalog-lp-works__card {
  display: grid;
  row-gap: 24px;
  padding: clamp(19.692px, 6.154vw, 24px);
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__card {
    grid-template-columns: minmax(0, 38.57%) minmax(0, 57.45%);
    -moz-column-gap: 3.98%;
         column-gap: 3.98%;
    row-gap: 0;
    align-items: center;
    padding: clamp(24px, -15.385px + 3.846vw, 40px);
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case--reverse .p-catalog-lp-works__card {
    grid-template-columns: minmax(0, 57.45%) minmax(0, 38.57%);
  }
}

.p-catalog-lp-works__card-photo {
  aspect-ratio: 388/248;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__card-photo {
    grid-column: 1;
    grid-row: 1;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case--reverse .p-catalog-lp-works__card-photo {
    grid-column: 2;
  }
}

.p-catalog-lp-works__card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__card-body {
    grid-column: 2;
    grid-row: 1;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__case--reverse .p-catalog-lp-works__card-body {
    grid-column: 1;
  }
}

/* --- Owner's Comment --- */
.p-catalog-lp-works__comment {
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 26px;
       column-gap: 26px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__comment {
    align-items: center;
  }
}

.p-catalog-lp-works__avatar {
  flex-shrink: 0;
  width: clamp(49.231px, 15.384vw, 60px);
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__avatar {
    width: clamp(60px, -7.446px + 6.587vw, 87.4px);
  }
}

.p-catalog-lp-works__comment-body {
  flex: 1;
  min-width: 0;
}

.p-catalog-lp-works__comment-label {
  color: #81734d;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(8.205px, 2.564vw, 10px);
  line-height: 1.6;
  letter-spacing: 0.16em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__comment-label {
    font-size: clamp(10px, 5.077px + 0.481vw, 12px);
  }
}

.p-catalog-lp-works__comment-text {
  margin-top: 9px;
  color: #000;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__comment-text {
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

/* --- チェック付きの特徴リスト --- */
.p-catalog-lp-works__features {
  margin-top: clamp(13.128px, 4.103vw, 16px);
  padding: 25px 8px 0;
  border-top: 1px solid #cdc6b8;
  display: grid;
  row-gap: 8px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__features {
    margin-top: clamp(16px, -8.615px + 2.404vw, 26px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    -moz-column-gap: 3.46%;
         column-gap: 3.46%;
    row-gap: 19px;
  }
}

.p-catalog-lp-works__feature {
  position: relative;
  padding-left: clamp(26.256px, 8.206vw, 32px);
  color: #000;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.p-catalog-lp-works__feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(16.41px, 5.129vw, 20px);
  height: clamp(16.41px, 5.129vw, 20px);
  background-image: url("../img/catalog-lp/works_check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__feature {
    padding-left: clamp(32px, 22.154px + 0.962vw, 36px);
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
  .p-catalog-lp-works__feature::before {
    width: clamp(20px, 10.154px + 0.962vw, 24px);
    height: clamp(20px, 10.154px + 0.962vw, 24px);
  }
}

/* --- ボタン + 注記 --- */
.p-catalog-lp-works__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__action {
    flex-direction: row;
    justify-content: center;
    -moz-column-gap: 26px;
         column-gap: 26px;
  }
}

/*  works のピルだけカンプが一回り大きい（PC / SP とも 320x67・文字 16px・影 0 4px 16px）。
    共通部品 .c-catalog-lp-pill はヘッダー実測（PC 240x58 / 14px ／ SP 130x40 / 10px）で
    組まれているので、**works スコープに閉じて**上書きする。
    padding は em 指定なので font-size を上げるだけで高さも 67px 付近になる。
    → 他セクションにも大きいピルが出てくるなら、ここではなく
      共通部品側に `--lg` modifier を足して移すこと（申し送り）。 */
.p-catalog-lp-works__action .c-catalog-lp-pill {
  min-width: min(320px, 100%);
  box-shadow: 0 4px 16px rgba(131, 47, 52, 0.5);
  font-size: clamp(13.128px, 4.103vw, 16px);
}

/*  SP だけ文字を 16px → 17px に上げる（先方修正・2026-10-02）
    「スマホで小さく感じる」との指摘。ヘッダーのピルと**同じ手口**で、
    ピル自身の font-size（= padding 1.38em/1.6em・gap 1.1em・矢印 1.169em の
    基準値）は 16px のまま据え置き、__text の font-size だけ上げる。
    これでボタンの外形（390px で 320x65 / 320px で 270x53）と
    矢印の位置・大きさは 1px も動かない。

    ・line-height を 1.2235（= 20.8px / 17px）に引き直して行ボックスを
      従来と同じ 20.8px に据える（高さ 65px の決定要因）。
    ・letter-spacing を再宣言するのは、em の字間が**宣言した要素の font-size で
      px に確定**してから継承されるため（ピル側の 0.08em は 1.28px のまま降りてきて
      17px の文字には 7.5% になる）。
    ・幅は min-width 320px 側で決まっていて、中身のハグ幅は 390px で 271px。
      文字を上げても 49px の余裕があるので、幅は動かない。
    ・PC はカンプどおり 16px なので lg で打ち消す（このピルは PC / SP とも
      カンプ 16px で、ベースの fluid(12,14) を上書きしている点に注意）。 */
.p-catalog-lp-works__action .c-catalog-lp-pill__text {
  font-size: 1.0625em;
  letter-spacing: 0.08em;
  line-height: 1.2235;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__action .c-catalog-lp-pill__text {
    font-size: 1em;
    line-height: 1.3;
  }
}

.p-catalog-lp-works__note {
  color: #000;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__note {
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

/* ------------------------------------------------------------
   サムネイル：常時スクロールのスライダー（CSS のみ）
   ------------------------------------------------------------ */
.p-catalog-lp-works__slider {
  margin-top: 40px;
  overflow: hidden;
}

.p-catalog-lp-works__slider-list {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  animation: p-catalog-lp-works-marquee 50s linear infinite;
  will-change: transform;
}

.p-catalog-lp-works__slider-item {
  flex: 0 0 auto;
  width: clamp(225.641px, 70.513vw, 275px);
  margin-right: 16px;
  aspect-ratio: 323/212;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-works__slider-item {
    width: clamp(275px, 156.846px + 11.538vw, 323px);
  }
}

.p-catalog-lp-works__slider-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@keyframes p-catalog-lp-works-marquee {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-catalog-lp-works__slider-list {
    animation-play-state: paused;
  }
}
/* ============================================================
   p-catalog-lp-philosophy — Our Philosophy（資料請求LP）
   ------------------------------------------------------------
   カンプ：PC 8011:16210（1440x1228）／ SP 8034:5984（390x2167）
   計測値の正：docs/spec/catalog-lp/philosophy-pc.json / philosophy-sp.json
   マークアップ：template-parts/catalog-lp/philosophy.php

   ■ カンプの骨格（PC1440）
     section 1440x1228・地色 #fff（暗幕・背景画像なし）
     Frame323  x=180 w=1080 / padding 120px 0 / VERTICAL gap 80
       ├ Frame324（見出し＋本文）w=552 h=496 / VERTICAL gap 80
       │   ├ タイトル h=156（ラベル14px + 16px + 見出し48px 2行）
       │   └ 本文 15px lh170% ls4% w=552 h=260
       ├ Frame318（カード3枚）y=696 w=1080 h=412
       └ Rectangle105（キッチン写真・ABSOLUTE）x=629(画面基準809) y=119.9 631x520
     ※ 写真の右端 809+631 = 1440 ＝ ビューポート右端に到達する（右へブリード）。

   ■ SP390
     section padding 100px 0 / VERTICAL gap 40
       ├ Frame357 gap 24：Frame324（左右 padding 25）→ Rectangle105 x=25 365x301
       └ Frame358 x=25 w=340：カード3枚を1列・カード間 16px

   ■ 幅の作り方（この2ブロックで別々に持っている理由）
     写真がビューポート右端まで抜けるため、上段だけは
     「左だけ inner の内側に合わせ、右は開けっぱなし」にする必要がある。
       __intro  padding-left: max(25px, calc(50% - 540px))  ← 左端だけ合わせる
       __inner  max-width: 1130px + margin auto + padding 0 25px
     どちらも 1440px で左端が 180px、768px で 25px になり**常に一致する**。
     100vw は使わない（スクロールバー幅ぶん overflow-x が出るため）。

   ■ font-size の clamp について
     catalog-lp.scss の fluid() / fluid-sp() は同ファイル内にしか無く
     partial からは参照できないため、同じ式で算出した値を直接書いている。
       fluid-sp(p)      = clamp(p*320/390, p/3.9 vw, p)          320→390px
       fluid(min,max)   = clamp(min, calc(b + a vw), max)        1024→1440px
                          a = (max-min)/416*100 / b = min - (max-min)/416*1024
     各行に「SP値 → PC値」を併記してある。
   ============================================================ */
.p-catalog-lp-philosophy {
  --philosophy-gutter: clamp(20px, 6.41vw, 25px);
  padding: 100px 0;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy {
    padding: 120px 0;
  }
}

/* ------------------------------------------------------------
   上段：見出し＋本文 ／ キッチン写真
   ------------------------------------------------------------ */
.p-catalog-lp-philosophy__intro {
  max-width: 600px;
  margin-inline: auto;
  padding: 0 var(--philosophy-gutter);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__intro {
    max-width: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 0;
    padding-left: max(var(--philosophy-gutter), 50% - 540px);
    gap: 6.11%;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__intro-body {
    width: 43.81%;
    min-width: 0;
    max-width: 552px;
  }
}

.p-catalog-lp-philosophy__lead {
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__lead {
    margin-top: 80px;
  }
}

.p-catalog-lp-philosophy__lead-text {
  color: #323232;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(9.846px, 3.077vw, 12px);
  letter-spacing: 0.04em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.p-catalog-lp-philosophy__lead-text + .p-catalog-lp-philosophy__lead-text {
  margin-top: 0;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__lead-text {
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

.p-catalog-lp-philosophy__photo {
  margin-top: 24px;
  margin-right: calc(var(--philosophy-gutter) * -1);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__photo {
    width: 50.08%;
    margin-top: 0;
    margin-right: 0;
  }
}

.p-catalog-lp-philosophy__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 631/520;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ------------------------------------------------------------
   下段：カード3枚
   ------------------------------------------------------------ */
.p-catalog-lp-philosophy__inner {
  margin-top: 40px;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 var(--philosophy-gutter);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__inner {
    max-width: calc(1080px + var(--philosophy-gutter) * 2);
    margin-top: 56px;
  }
}

.p-catalog-lp-philosophy__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__cards {
    -moz-column-gap: 2.78%;
         column-gap: 2.78%;
    row-gap: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-catalog-lp-philosophy__card {
  display: flex;
  flex-direction: column;
}

.p-catalog-lp-philosophy__card-figure {
  width: 100%;
  aspect-ratio: 340/232;
}

.p-catalog-lp-philosophy__card-figure--photo {
  border: 1px solid #cdc6b8;
}

.p-catalog-lp-philosophy__card-img {
  display: block;
  width: 100%;
  height: 100%;
}

.p-catalog-lp-philosophy__card-figure--photo .p-catalog-lp-philosophy__card-img {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-catalog-lp-philosophy__card-body {
  flex: 1;
  padding: 1.5em 2.5em;
  border: 1px solid #cdc6b8;
  border-top: 0;
  background-color: #f9f8f4;
  text-align: center;
}

.p-catalog-lp-philosophy__card-title {
  min-height: 54.5px;
  color: #323232;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__card-title {
    min-height: clamp(54.5px, 21.269px + 3.245vw, 68px);
  }
}

.p-catalog-lp-philosophy__card-title-main {
  display: block;
  font-size: clamp(26.585px, 8.308vw, 32.4px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__card-title-main {
    font-size: clamp(32.4px, 13.692px + 1.827vw, 40px);
  }
}

.p-catalog-lp-philosophy__card-title-sub {
  display: block;
  margin-top: 6.5px;
  font-size: clamp(13.292px, 4.154vw, 16.2px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__card-title-sub {
    margin-top: 8px;
    font-size: clamp(16.2px, 6.846px + 0.913vw, 20px);
  }
}

/* 「7拠点」だけ1行。サイズも他の2枚とは別値（PC 57 / 22.8・SP 46.1 / 18.4）。
   インラインのまま並べるのでベースラインは自動で揃う。 */
.p-catalog-lp-philosophy__card-title--inline .p-catalog-lp-philosophy__card-title-main {
  display: inline;
  font-size: clamp(37.826px, 11.821vw, 46.1px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__card-title--inline .p-catalog-lp-philosophy__card-title-main {
    font-size: clamp(46.1px, 19.269px + 2.62vw, 57px);
  }
}
.p-catalog-lp-philosophy__card-title--inline .p-catalog-lp-philosophy__card-title-sub {
  display: inline;
  margin-top: 0;
  font-size: clamp(15.097px, 4.718vw, 18.4px);
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__card-title--inline .p-catalog-lp-philosophy__card-title-sub {
    font-size: clamp(18.4px, 7.569px + 1.058vw, 22.8px);
  }
}

.p-catalog-lp-philosophy__card-note {
  margin-top: 16px;
  color: #81734d;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(9.846px, 3.077vw, 12px);
  letter-spacing: 0.04em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-philosophy__card-note {
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

/* ============================================================
   p-catalog-lp-request — ⑩ Catalog Request（CF7 カタログ請求フォーム）

   カンプ実測（**数値の正は docs/spec/catalog-lp/catalog-request-pc.json / -sp.json**）
     PC 8011:16365（1440x1472）／ SP 8041:2（390x1598）

   ------------------------------------------------------------
   ■ このセクションが CF7 のマークアップを前提にしている点（ここを読まずに触らないこと）

   1) **CF7 の CSS は catalog-lp.css より後に読まれる。**
      header-catalog.php は 87 行目で catalog-lp.css を <link> で直書きし、
      93 行目の wp_head() で CF7 の styles.css が入る。
      → **同じ詳細度では CF7 が勝つ。** CF7 の既定を上書きする箇所は
        意図的に詳細度を積んである（.p-catalog-lp-request .wpcf7 form … 等）。
        「なぜこんなに長いセレクタなのか」の答えはこれ。短くすると効かなくなる。

   2) 入力欄は必ず `<span class="wpcf7-form-control-wrap">` に包まれて出てくる。
      この span は **inline が既定**なので、ブロック化しないと width:100% が効かない。

   3) [acceptance] は
        span.wpcf7-form-control-wrap > span.wpcf7-acceptance > span.wpcf7-list-item
          > label > input + span.wpcf7-list-item-label
      という6重の入れ子で出る。CF7 の既定 `.wpcf7-list-item { display:inline-block;
      margin:0 0 0 1em }` と `.wpcf7-list-item-label::before/::after { content:" " }` が
      余白を作るので、両方打ち消している。

   4) エラー文言 `.wpcf7-not-valid-tip` は **wrap の中の input の後ろ**に挿入される。
      入力欄の下線の直下に出る前提でマージンを付けてある。

   5) `[submit]` は使っていない（= <input type="submit"> を出さない）。
      共通部品 .c-catalog-lp-submit が矢印を ::after で描く設計で、
      input は置換要素なので ::after が描画されないため、フォーム本文側で
      素の <button type="submit" class="wpcf7-submit c-catalog-lp-submit"> を書いている。
      → 経緯は scripts/wp-cf7-catalog-lp.php のコメントが正。

   ------------------------------------------------------------
   ■ 流動フォントサイズを clamp() のリテラルで書いている理由
     catalog-lp.scss の fluid() / fluid-sp() は **あのファイルのローカル**で、
     @use した partial からは見えない（_catalog-lp-mq.scss が @forward しているのは
     variable だけ）。同じ式で手計算した値を直接書き、導出元をコメントに残す。
       fluid(min,max)  … 1024px→1440px で min→max（slope=(max-min)/416）
       fluid-sp(px)    … 320px→390px で px*320/390→px（slope=px*70/390/70）
     ※ fluid() が _catalog-lp-mq.scss 側へ移ったら、ここは v.fluid(...) に置換してよい。

   ------------------------------------------------------------
   ■ カンプ側の不整合（実装は「正しい方」に寄せた）
     SP のフィールドは Figma 上で幅がバラバラ（お名前・メール・郵便番号・住所・
     ご要望が 260px、ご連絡先だけ 292px）。292px = カード内寸なので
     **260px 側がグループを縮め忘れた取り残し**と判断し、全フィールドを
     カード内寸いっぱい（100%）に揃えた。PC は全フィールド 760px で揃っている。
   ============================================================ */
/* ------------------------------------------------------------
   セクション外枠
   SP 8041:2   padding 100px 25px / bg #eeece4 / itemSpacing 48
   PC 8011:16365 padding 120px 0  / inner(Frame 184) w=1080 centered
   ------------------------------------------------------------ */
.p-catalog-lp-request {
  padding: 100px 25px;
  background-color: #eeece4;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request {
    padding: 120px 25px;
  }
}

.p-catalog-lp-request__inner {
  max-width: 550px;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__inner {
    max-width: 1080px;
  }
}

/* ------------------------------------------------------------
   見出しブロック
   共通部品 .c-catalog-lp-heading を使う（label + title--lg）。
   揃えはセクション側が決める取り決めなので、ここで center を書く。
   SP: Frame 64 itemSpacing 24 ／ PC: 40
   ------------------------------------------------------------ */
.p-catalog-lp-request__head {
  text-align: center;
}

.p-catalog-lp-request__lead {
  margin-top: 24px;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(12.308px, 3.846vw, 15px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: #323232;
  margin-right: -0.16em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__lead {
    margin-top: 40px;
    font-size: clamp(15px, 7.615px + 0.721vw, 18px);
  }
}

/* ------------------------------------------------------------
   白いカード（Frame 189）
   SP: w=340(=100%) padding 24 / PC: w=840 padding 40
   枠線 1px #cdc6b8。上の見出しブロックとの間隔は SP 24 / PC 48。
   ------------------------------------------------------------ */
.p-catalog-lp-request__panel {
  margin-top: 24px;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__panel {
    max-width: 840px;
    margin: 48px auto 0;
    padding: 40px;
  }
}

/* ------------------------------------------------------------
   入力欄のかたまり（Frame 330）
   縦の間隔は 40px（PC / SP 共通）。子は .p-catalog-lp-request__field と
   __row の2種類が混ざるので、隣接セレクタで「下の要素に margin-top」を付ける
   （CLAUDE.md: 縦方向のスペーシングだけに flex を使わない）。
   ------------------------------------------------------------ */
.p-catalog-lp-request__fields > * + * {
  margin-top: 40px;
}

/* ------------------------------------------------------------
   ラベル行（Frame 327）= ラベル文字 + 必須/任意バッジ
   SP: 12px / gap 8px  ／ PC: 14px / gap 16px
   色 #81734d、Noto Medium、lh170%、ls16%
   ※ gap は内在サイズの小部品（文字＋バッジ）の行なので em 起点で書く。
     CLAUDE.md の「横方向の gap は %」はカラムレイアウトの話。
   ------------------------------------------------------------ */
.p-catalog-lp-request__label {
  display: flex;
  align-items: center;
  gap: 0.667em;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: #81734d;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__label {
    gap: 1.143em;
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

/* バッジ（Frame 326）PC/SP 共通 38x21・文字 10px・padding 2px 8px
   右 padding だけ ls 1文字分（0.16em）引いてある：CSS は最後の文字の後ろにも
   letter-spacing を入れるため、引かないと右だけ 1.6px 広く見える。 */
.p-catalog-lp-request__badge {
  flex-shrink: 0;
  padding: 0.2em 0.64em 0.2em 0.8em;
  background-color: #81734d;
  color: #fff;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.16em;
}

.p-catalog-lp-request__badge--optional {
  background-color: #fff;
  border: 1px solid #81734d;
  color: #81734d;
}

/* ------------------------------------------------------------
   入力欄（Frame 187）
   下線のみ（枠線ではない）。padding 16px 8px、下線 1px #cdc6b8。
   文字 PC 16px / SP 15px、lh170%、ls16%。placeholder #ababab。

   ■ .wpcf7-form-control-wrap を block にしないと width:100% が効かない
     （CF7 は span で包む。span の既定は inline）。
   ------------------------------------------------------------ */
.p-catalog-lp-request__field .wpcf7-form-control-wrap {
  display: block;
}

.p-catalog-lp-request__input,
.p-catalog-lp-request__textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1.067em 0.533em;
  border: 0;
  border-bottom: 1px solid #cdc6b8;
  border-radius: 0;
  background-color: transparent;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(12.308px, 3.846vw, 15px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: #323232;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color 0.3s ease;
}
.p-catalog-lp-request__input::-webkit-input-placeholder, .p-catalog-lp-request__textarea::-webkit-input-placeholder {
  color: #ababab;
  opacity: 1;
}
.p-catalog-lp-request__input::-moz-placeholder, .p-catalog-lp-request__textarea::-moz-placeholder {
  color: #ababab;
  opacity: 1;
}
.p-catalog-lp-request__input::placeholder,
.p-catalog-lp-request__textarea::placeholder {
  color: #ababab;
  opacity: 1;
}
.p-catalog-lp-request__input:focus,
.p-catalog-lp-request__textarea:focus {
  outline: 2px solid #81734d;
  outline-offset: 2px;
  border-bottom-color: #81734d;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__input,
  .p-catalog-lp-request__textarea {
    padding: 1em 0.5em;
    font-size: clamp(15px, 12.538px + 0.24vw, 16px);
  }
}

.p-catalog-lp-request__input.wpcf7-not-valid,
.p-catalog-lp-request__textarea.wpcf7-not-valid {
  border-bottom-color: #dc3232;
}

.p-catalog-lp-request__field .wpcf7-not-valid-tip {
  margin-top: 0.5em;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.16em;
}

.p-catalog-lp-request__textarea {
  resize: vertical;
}

/* ------------------------------------------------------------
   2カラム行（メールアドレス / ご連絡先）
   SP 8041:20  … VERTICAL・間隔 40px（＝縦積み）
   PC 8011:16383 … HORIZONTAL・各 360px・gap 40px（合計 760px）
   ------------------------------------------------------------ */
.p-catalog-lp-request__row--pair > .p-catalog-lp-request__field + .p-catalog-lp-request__field {
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__row--pair {
    display: flex;
    gap: 5.263%;
  }
  .p-catalog-lp-request__row--pair > .p-catalog-lp-request__field {
    width: 47.368%;
  }
  .p-catalog-lp-request__row--pair > .p-catalog-lp-request__field + .p-catalog-lp-request__field {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   郵便番号の行（郵便番号欄 + 「住所を自動入力」ボタン）
   SP 8041:37  … VERTICAL・間隔 16px（ボタンは下・左寄せ）
   PC 8011:16400 … HORIZONTAL・郵便番号 464px + gap 16px + ボタン 144px = 624px
                   （Figma のフレームは 640px だが中身の右端は 624px。
                     余りの 16px は auto layout の余りなので幅に入れない）
                   ボタンは郵便番号欄の**下線と同じ高さ**に揃う（bottom 揃え）。
   ------------------------------------------------------------ */
.p-catalog-lp-request__row--zip .p-catalog-lp-request__zip-button {
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__row--zip {
    display: flex;
    align-items: flex-end;
    gap: 2.564%;
    width: 82.105%;
  }
  .p-catalog-lp-request__row--zip > .p-catalog-lp-request__field--zip {
    width: 74.359%;
  }
  .p-catalog-lp-request__row--zip .p-catalog-lp-request__zip-button {
    width: 23.077%;
    margin-top: 0;
  }
}

/* 「住所を自動入力」ボタン（Frame 8011:16410 / 8041:47）PC/SP 共通 144x48
   白地・枠線 #81734d・文字 14px #81734d（lh100% / ls16%）。
   ※ type="button"（フォーム本文側で指定）。省くと押した瞬間に送信される。 */
.p-catalog-lp-request__zip-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 144px;
  min-height: 48px;
  padding: 0.5em 0.84em 0.5em 1em;
  border: 1px solid #81734d;
  background-color: #fff;
  color: #81734d;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.16em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .p-catalog-lp-request__zip-button:hover {
    background-color: #81734d;
    color: #fff;
  }
}
.p-catalog-lp-request__zip-button:focus-visible {
  outline: 2px solid #81734d;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   フッター部（Frame 334）= 同意ボックス / 送信ボタン / 注記
   入力欄のかたまりとの間隔 40px、内部の間隔 24px（PC / SP 共通）
   ------------------------------------------------------------ */
.p-catalog-lp-request__foot {
  margin-top: 40px;
}

/* 同意ボックス（Frame 332）
   SP padding 16 / PC padding 30、bg #f9f8f4、枠線 1px #cdc6b8 */
.p-catalog-lp-request__consent {
  padding: 1.333em;
  background-color: #f9f8f4;
  border: 1px solid #cdc6b8;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: #323232;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__consent {
    padding: 2.5em;
  }
}
.p-catalog-lp-request__consent .wpcf7-list-item {
  display: block;
  margin: 0;
}
.p-catalog-lp-request__consent .wpcf7-list-item-label::before,
.p-catalog-lp-request__consent .wpcf7-list-item-label::after {
  content: none;
}
.p-catalog-lp-request__consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.917em;
  cursor: pointer;
}

/* チェックボックス（Rectangle 109）18x18・角丸2・白地・枠線 1px #b2b2b2
   チェック済みの見た目はカンプに無いので、セクションの金色で塗って白いチェックを置く。
   ■ チェックマークは ::after ではなく background-image（data URI）で描く。
     <input> は置換要素で、::before/::after の描画がブラウザ実装依存のため。 */
.p-catalog-lp-request__consent-check {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 0.25em 0 0;
  border: 1px solid #b2b2b2;
  border-radius: 2px;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.p-catalog-lp-request__consent-check:checked {
  background-color: #81734d;
  border-color: #81734d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.4 6.2 4.8 8.6 9.6 3.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.p-catalog-lp-request__consent-check:focus-visible {
  outline: 2px solid #81734d;
  outline-offset: 2px;
}

/* プライバシーポリシーへのリンク。
   カンプは本文と同じ #323232 のベタで、リンクだと分からない状態になっている。
   色だけに頼らない（WCAG 1.4.1）ため **下線だけ足した**。色はカンプどおり本文色を継承。 */
.p-catalog-lp-request__consent-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (hover: hover) {
  .p-catalog-lp-request__consent-link:hover {
    text-decoration: none;
  }
}
.p-catalog-lp-request__consent-link:focus-visible {
  outline: 2px solid #81734d;
  outline-offset: 2px;
}

/* 送信ボタン（共通部品 .c-catalog-lp-submit を使う。**定義はここではない**）
   SP 292x65（= カード内寸いっぱい）／ PC 550x80（760px の中央）*/
.p-catalog-lp-request__submit {
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__submit {
    width: 72.368%;
    margin: 24px auto 0;
  }
}

.p-catalog-lp-request .wpcf7-form[data-status=submitting] .c-catalog-lp-submit {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}
.p-catalog-lp-request .c-catalog-lp-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 注記（8011:16438 / 8041:75）12px・lh170%・ls16%
   PC は中央揃え、SP は左揃え（カンプ実測どおり。SP は4行に折り返す）。 */
.p-catalog-lp-request__note {
  margin-top: 24px;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: #323232;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-request__note {
    text-align: center;
    margin-right: -0.16em;
  }
}

/* ------------------------------------------------------------
   CF7 の送信結果メッセージ
   CF7 既定は `.wpcf7 form .wpcf7-response-output`（クラス2 + 要素1）で
   margin:2em .5em 1em / border:2px。**同じ詳細度では勝てない**ので1つ積む。
   ------------------------------------------------------------ */
.p-catalog-lp-request .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 1em;
  border-width: 1px;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: #323232;
}

/* ------------------------------------------------------------
   管理者にだけ出る診断表示（訪問者には出ない）
   デザインは無い。読めればよいので最小限。
   ------------------------------------------------------------ */
.p-catalog-lp-request__admin-notice {
  padding: 1em;
  border: 1px dashed #dc3232;
  background-color: #fff;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: #323232;
}
.p-catalog-lp-request__admin-notice a {
  text-decoration: underline;
}
.p-catalog-lp-request__admin-notice ul {
  margin-top: 0.5em;
  padding-left: 1.5em;
  list-style: disc;
}

.p-catalog-lp-request__admin-notice-title {
  font-weight: 700;
  color: #dc3232;
}

/* ============================================================
   Model House（来場予約をご希望の方）
   PC: 8011:16439（1440x1252） / SP: 8041:76（390x1955）
   マークアップ: template-parts/catalog-lp/model-house.php
   挙動:         js/catalog-lp.js（.is-active の付け外しだけ。位置と表示はここが持つ）

   ■ 座標の出どころ
     地図は 900x600（SP は 300x200）の座標系。ピンとカードの位置は PHP が
     その比率を CSS カスタムプロパティ（--pin-x / --card-x …）で渡してくる。
     ここでは「渡された比率をどう使うか」だけを書く。

   ■ 当たり判定
     lg では地図・ステージを pointer-events: none にしている。
     地図の <img> は透明な左側で店舗リンク（__head）の上に重なるため、
     none にしないとリンクが押せなくなる。ピンと表示中のカードだけ auto に戻す。
   ============================================================ */
.p-catalog-lp-model-house {
  position: relative;
  isolation: isolate;
  background-color: #303337;
}
.p-catalog-lp-model-house::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 380px;
  background-image: url("../img/catalog-lp/modelhouse_bg-sp.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.4;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house::before {
    height: 885px;
    background-image: url("../img/catalog-lp/modelhouse_bg-pc.webp");
  }
}

.p-catalog-lp-model-house__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 100px 25px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__inner {
    max-width: 1120px;
    padding: 120px 20px;
  }
}

/* ---- 白いパネル（Frame 227） ------------------------------- */
.p-catalog-lp-model-house__panel {
  position: relative;
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #cdc6b8;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__panel {
    margin-top: 80px;
    padding: 80px 0;
  }
}

/* ---- 左の見出し＋店舗リスト（Group 129） -------------------- */
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__head {
    position: absolute;
    top: 35px;
    left: 3.9%;
    width: 21%;
  }
}

.p-catalog-lp-model-house__head-title {
  color: #323232;
}

.p-catalog-lp-model-house__head-en {
  display: block;
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-size: clamp(25.436px, 7.949vw, 31px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.p-catalog-lp-model-house__head-ja {
  display: block;
  font-size: clamp(9.846px, 3.077vw, 12px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.p-catalog-lp-model-house__areas {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__areas {
    display: block;
    margin-top: 23px;
    color: #323232;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.04em;
  }
}

.p-catalog-lp-model-house__area-shop {
  white-space: nowrap;
}
.p-catalog-lp-model-house__area-shop a {
  color: #81734d;
}
.p-catalog-lp-model-house__area-shop a::before {
  content: "・";
  color: #323232;
}
@media (hover: hover) {
  .p-catalog-lp-model-house__area-shop a:hover {
    text-decoration: underline;
  }
}

/* ---- 地図＋カードの舞台 ------------------------------------ */
.p-catalog-lp-model-house__stage {
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__stage {
    position: relative;
    z-index: 1;
    width: 83.5%;
    margin-top: 0;
    margin-left: 14.4%;
    aspect-ratio: 900/600;
    pointer-events: none;
  }
}

.p-catalog-lp-model-house__map-img {
  width: 100%;
  height: 100%;
}

.p-catalog-lp-model-house__map--pc {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__map--pc {
    display: block;
    position: absolute;
    inset: 0;
  }
}

.p-catalog-lp-model-house__map--sp {
  position: relative;
  width: 100%;
  max-width: 461.5384615385px;
  margin-right: auto;
  margin-left: auto;
  aspect-ratio: 300/200;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__map--sp {
    display: none;
  }
}

/* ---- ピン ---------------------------------------------------
   --pin-x / --pin-y は「地図の左上を原点にしたピン左上の位置」（%）。
   PC は <button class="js-catalog-pin">、SP は同じ見た目の <span>（JS は反応しない）。
   ------------------------------------------------------------ */
.p-catalog-lp-model-house__pin {
  display: block;
  position: absolute;
  top: var(--pin-y);
  left: var(--pin-x);
  width: 3.334%;
  aspect-ratio: 23/31;
  z-index: 1;
  line-height: 0;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__pin {
    width: 2.478%;
    pointer-events: auto;
  }
  .p-catalog-lp-model-house__pin::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }
}

/* SP のピンは下のカード一覧へのページ内リンク（素のアンカー。JS 不使用）。
   ピン本体は 10x13.5px 程度しかないので、タップ領域を 44x44 まで広げる。
   ラベル（店名）も同じ <a> の中なので、文字をタップしても飛ぶ。 */
.p-catalog-lp-model-house__pin--link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.p-catalog-lp-model-house__pin--link:active .p-catalog-lp-model-house__pin-icon {
  opacity: 0.6;
}
.p-catalog-lp-model-house__pin--link:focus-visible {
  outline: 2px solid #832f34;
  outline-offset: 4px;
  border-radius: 2px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__pin--link::before {
    content: none;
  }
}

.p-catalog-lp-model-house__pin-icon {
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

.p-catalog-lp-model-house__pin-label {
  position: absolute;
  top: 13.5%;
  left: 114%;
  color: #323232;
  font-size: clamp(8.205px, 2.564vw, 10px);
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__pin-label {
    left: 150%;
    font-size: 16px;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff;
  }
}

/* ---- 店舗カード ---------------------------------------------
   SP: 7枚を縦積みで全件表示（カンプ通り。開閉なし）
   PC: ピンの上（各務原店だけ下）に絶対配置し、.is-active のときだけ見せる
   ------------------------------------------------------------ */
.p-catalog-lp-model-house__cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__cards {
    display: block;
    margin-top: 0;
  }
}

.p-catalog-lp-model-house__card {
  display: grid;
  grid-template-columns: 36.91% 57.72%;
  -moz-column-gap: 5.37%;
       column-gap: 5.37%;
  row-gap: 16px;
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card {
    position: absolute;
    bottom: var(--card-bottom);
    left: var(--card-x);
    transform: translateX(calc(-50% + var(--card-nudge, 0px)));
    z-index: 2;
    width: 53.444%;
    padding: 20px;
    border: 1px solid #81734d;
    background-color: #f9f8f4;
    grid-template-columns: 41.95% 54.42%;
    -moz-column-gap: 3.63%;
         column-gap: 3.63%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
  }
  .p-catalog-lp-model-house__card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(calc(-50% - var(--card-nudge, 0px)));
    border-width: 33px 14.3px 0;
    border-style: solid;
    border-color: #81734d transparent transparent;
  }
  .p-catalog-lp-model-house__card.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-catalog-lp-model-house__card {
    transition: none;
  }
}

@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card--below {
    top: var(--card-top);
    bottom: auto;
  }
  .p-catalog-lp-model-house__card--below::after {
    top: auto;
    bottom: 100%;
    border-width: 0 14.3px 33px;
    border-color: transparent transparent #81734d;
  }
}

.p-catalog-lp-model-house__card-thumb {
  width: 100%;
  aspect-ratio: 110/89;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card-thumb {
    grid-row: 1/3;
    align-self: start;
    aspect-ratio: 185/150;
  }
}
.p-catalog-lp-model-house__card-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-catalog-lp-model-house__card-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

.p-catalog-lp-model-house__card-name {
  color: #000;
  font-size: clamp(12.308px, 3.846vw, 15px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card-name {
    font-size: clamp(15px, 10.077px + 0.481vw, 17px);
    line-height: 1.2;
  }
}

.p-catalog-lp-model-house__card-address {
  margin-top: 8px;
  color: #000;
  font-size: clamp(9.846px, 3.077vw, 12px);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card-address {
    margin-top: 16px;
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

.p-catalog-lp-model-house__card-tel {
  margin-top: 4px;
  color: #000;
  font-size: clamp(9.846px, 3.077vw, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card-tel {
    margin-top: 8px;
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}

.p-catalog-lp-model-house__card-more {
  display: block;
  position: relative;
  grid-column: 1/-1;
  padding: 8px 11px;
  background-color: #832f34;
  color: #fff;
  font-size: clamp(9.846px, 3.077vw, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-align: center;
  text-indent: 0.16em;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card-more {
    grid-column: 2;
    align-self: start;
    padding: 8px 17px;
    font-size: clamp(12px, 4.615px + 0.721vw, 15px);
  }
}
@media (hover: hover) {
  .p-catalog-lp-model-house__card-more:hover {
    background-color: #9c3337;
  }
  .p-catalog-lp-model-house__card-more:hover .p-catalog-lp-model-house__card-more-arrow {
    transform: translate(4px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-catalog-lp-model-house__card-more {
    transition: none;
  }
  .p-catalog-lp-model-house__card-more .p-catalog-lp-model-house__card-more-arrow {
    transition: none;
  }
  .p-catalog-lp-model-house__card-more:hover .p-catalog-lp-model-house__card-more-arrow {
    transform: translateY(-50%);
  }
}

.p-catalog-lp-model-house__card-more-arrow {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 12.6px;
  height: auto;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
@media screen and (min-width: 1024px) {
  .p-catalog-lp-model-house__card-more-arrow {
    right: 17px;
    width: 14.7px;
  }
}

/**********************

  _thanks.scss — カタログ請求完了ページ（page-catalog-thanks.php）
  指示書: docs/spec/pptx/サンクスページ.txt ／ 同 サンクスページ/slide01.png

  ■ このページにはカンプが無い
    指示書は「既存 stay02-thanks のスクリーンショットに赤枠で3箇所を指し、
    差し替え文言を書いた」もの。寸法の指定は無いので、
    **構成は参考画像のとおり**（日本語見出し → 英字 → パンくず（右）→ 罫線 → 本文）、
    **配色・書体・サイズは LP 本体の共通部品に合わせて**組んでいる。
    ＝ここの数値は「カンプ実測」ではなく LP の既存値からの流用。勝手な創作ではないが、
    先方がカンプを出してきたら**そちらが正**。

  ■ 幅は LP の他セクションと同じ考え方
    SP〜タブレットは $tablet-cap(600px) で頭打ち、lg で 1080px。
    （LP 全体で統一した方針。根拠は sass/stay-lp.scss 冒頭の「案A」）

  ■ フッターを画面下に落とす
    中身が短いページなので、そのままだと**フッターの下に地の白が残る**。
    body を縦の flex にして main を伸ばす。
    ⚠ ヘッダー・フッターの高さを引き算する方法（min-height: calc(100svh - …)）は
      フッターの実高を定数で持つことになり、フッターを直すたびにズレる。
      flex なら高さを知らなくてよい。
    ⚠ body は LP 本体と共有しているので、**このページ限定のクラスに閉じる**
      （page-catalog-thanks.php が body_class に is-catalog-thanks を足している）。

**********************/
.is-catalog-thanks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.is-catalog-thanks .l-catalog-lp {
  flex: 1 0 auto;
}

.p-catalog-thanks {
  padding: 48px 25px 80px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks {
    padding: 80px 40px 140px;
  }
}

.p-catalog-thanks__inner {
  max-width: 600px;
  margin-inline: auto;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__inner {
    max-width: 1080px;
  }
}

/* ---- 見出し（参考画像：日本語が上・英字が下）---- */
.p-catalog-thanks__title {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(19.692px, 6.154vw, 24px);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #323232;
  margin-right: -0.04em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__title {
    font-size: clamp(24px, -15.385px + 3.846vw, 40px);
  }
}

.p-catalog-thanks__label {
  margin-top: 8px;
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.4em;
  line-height: 1.15;
  color: #81734d;
  margin-right: -0.4em;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__label {
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

/* ---- パンくず（参考画像：右寄せ、見出しの下）---- */
.p-catalog-thanks__breadcrumb {
  margin-top: 32px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__breadcrumb {
    margin-top: 48px;
  }
}

.p-catalog-thanks__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #323232;
}

.p-catalog-thanks__breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-catalog-thanks__breadcrumb-item + .p-catalog-thanks__breadcrumb-item::before {
  content: ">";
  color: #cdc6b8;
}

.p-catalog-thanks__breadcrumb-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .p-catalog-thanks__breadcrumb-link:hover {
    color: #81734d;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}
.p-catalog-thanks__breadcrumb-link:focus-visible {
  outline: 2px solid #81734d;
  outline-offset: 2px;
}

/* ---- 本文（参考画像：罫線を挟んで下）---- */
.p-catalog-thanks__body {
  margin-top: 16px;
  padding-top: 40px;
  border-top: 1px solid #cdc6b8;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__body {
    margin-top: 24px;
    padding-top: 64px;
  }
}

/* 中見出し。参考画像（既存サイト）はゴシック太字だが、
   このページの h1 と LP 全体の見出しが明朝なので**明朝**で揃えている。
   h1（最大 40px）と本文（最大 16px）の間に収まるサイズにする。 */
.p-catalog-thanks__subtitle {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(14.769px, 4.616vw, 18px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #323232;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__subtitle {
    font-size: clamp(18px, 3.231px + 1.442vw, 24px);
  }
}

.p-catalog-thanks__subtitle + .p-catalog-thanks__text {
  margin-top: 24px;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__subtitle + .p-catalog-thanks__text {
    margin-top: 32px;
  }
}

.p-catalog-thanks__text {
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #323232;
}
@media screen and (min-width: 1024px) {
  .p-catalog-thanks__text {
    font-size: clamp(15px, 12.538px + 0.24vw, 16px);
  }
}

/* ============================================================
   _motion.scss — スクロール連動の演出（2026-09-26 追加）

   ■ 一括で止める方法（気に入らなければここだけ触れば戻る）
     header-catalog.php の冒頭にある

         $catalog_lp_motion = true;

     を **false にするだけ**。<html> に .is-catalog-motion が付かなくなり、
     このファイルのスタイルは1つも当たらなくなる（＝全要素が最終状態のまま表示される）。
     完全に消したいときは、このファイルと
     catalog-lp.scss の `@use "catalog-lp/motion";` 1行、
     js/catalog-lp.js の「スクロール連動の演出」ブロックを消すだけでよい。
     **他のファイルには一切手を入れていない。**

   ■ なぜ全部 .is-catalog-motion の下に置くか
     初期状態（opacity: 0 など）を素で書くと、**JS が動かない環境で
     コンテンツが永久に見えなくなる**。スイッチ用のクラスは
     header-catalog.php の <head> 内インラインスクリプトが
     **描画前に**付けるので、チラつきも起きない。
     prefers-reduced-motion: reduce の判定もそこで行っているため、
     このファイル側に個別のガードは要らない。

   ■ 使っているプロパティは transform と opacity だけ
     height / width / top を動かすとレイアウト再計算が走り、
     22,000px 超のこのページでは目に見えて重くなる。

   ■ 発火は IntersectionObserver（scroll イベントは使わない）。
     一度出たら unobserve するので、行き来しても再生し直さない。
   ============================================================ */
.is-catalog-motion {
  /* ---- 1. セクションのフェードイン --------------------------
     要素1つずつではなく**セクション単位**で掛ける。
     works の4ケース×各20要素にスタッガーを掛けると、
     スクロールするほど待たされる感じになって逆効果。
     KV には掛けない（LCP 要素。表示が遅れると Core Web Vitals が落ちる）。
     ---------------------------------------------------------- */
}
.is-catalog-motion .js-catalog-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.is-catalog-motion .js-catalog-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.is-catalog-motion {
  /* ---- 2-a. Reason 01 のグラフの棒 --------------------------
     **向きを反転した（先方修正・2026-10-02）**

       旧：左「約700万円」の棒が 0 から伸び上がる／右「0円」は動かさない
       新：**左は固定**（最初から 700万円の高さで出す）。
           右「0円」の棒が**左と同じ 700万円の高さから下りてきて 0 になる**。

     ■ なぜこの向きなのか（先方指示の意図）
       言いたいことは「一般的な家で 700万円かかる費用が、タイルなら 0 になる」。
       左が伸びると「費用が増える」動きに見えるため、
       右が 700万円 → 0 へ**下がる**動きに変えて、話の向きと一致させる。

     ■ 実装：transform ではなく height を動かす（重要）
       出発は左と同じ 65.7%、到達は _reason.scss が持つ 1.43%。
       到達値はここに書かない（:not(.is-visible) で出発点だけ上書きする）。

       **当初は scaleY(45.94) で縮めていたが、不具合が出たので height に変えた
         （先方指摘・2026-10-02）。**
         右の棒の実高はわずか 4.77px。これを 45.94 倍に引き伸ばすと、
         要素の下端のピクセル丸め（デバイスピクセル単位のスナップ）まで
         45.94 倍されるため、**棒の足元が横軸からはみ出す／浮く**。
         実測：DPR 1 → 一致／DPR 2・幅640 → 少しはみ出す／DPR 3 → 大きくはみ出す。
         スマホ実機や DevTools の端末エミュレーション（DPR 2〜3）で必ず出る。
       → height を動かせば bottom: 7.95% が常に効くので、
         **足元は全フレーム・全 DPR で横軸にぴったり乗る**。
         レイアウトは走るが position: absolute の擬似要素 1 つに閉じている
         （このファイルの「transform と opacity だけ」の例外。2-c と同じ理由）。

     ■ 点線（棒どうしを結ぶ斜線）との関係
       点線の右端は x=66.43%、右の棒の左端は 66.44% で**水平に重ならない**ので、
       棒が高い間も点線は隠れない。棒が下りきると点線の終点とちょうど接する。

     ■ 既知のトレードオフ
       発火前（グラフが画面下 1/4 に入るまで）は、右の棒が
       **左と同じ高さのまま表示される**。旧実装の「左が 0 の状態で待つ」と
       同じ性質のものだが、向きが逆なので「タイルでも 700万円かかる」ように
       読めてしまう瞬間がある。気になる場合は js/catalog-lp.js の
       REVEAL_MARGIN を浅く（例 "0px 0px -10% 0px"）して発火を早めるか、
       グラフだけ別の rootMargin を持たせること。

     ■ 数字も一緒に 700 → 0 へ下がる（先方修正・2026-10-02 の追加指示）
       「グラフの下がりに伴って数字もついてきてほしい」。
       数える処理は js/catalog-lp.js の runGraphCountdown()。
       **棒（CSS transition）と数字（JS の rAF）を同時に走らせるので、
       長さ 1.1s とカーブを両方で揃えること。**
       JS 側は 1 - (1-t)^3 を使っている。$motion-ease
       （cubic-bezier(0.22, 0.61, 0.36, 1)）とは式が違うが、
       実測で t=0.19 → 0.485/0.473、t=0.44 → 0.824/0.820 と
       1% 程度しかずれないので、目では同期して見える。
       **1.1s を変えるときは JS の DURATION も必ず合わせる。**

     ■ 元に戻すとき
       --own を --general に、出発の height を 0 にすれば旧挙動（左が伸びる）。
       あわせて js/catalog-lp.js の countTargets に 700 の行を戻し、
       runGraphCountdown() の呼び出しを外す。
     ---------------------------------------------------------- */
}
.is-catalog-motion .p-catalog-lp-reason-graph__item--own::before {
  transition: height 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-catalog-motion .p-catalog-lp-reason-graph:not(.is-visible) .p-catalog-lp-reason-graph__item--own::before {
  height: 65.7%;
}
.is-catalog-motion {
  /* ---- 2-c. 右の数字（0円）---------------------------------
     **棒の上端に貼り付いて、棒と一緒に下りながら 700 → 0 へ数える**
     （先方修正・2026-10-02）。数える処理は js/catalog-lp.js の runGraphCountdown()。

     ■ 位置（bottom）
       出発 76.27% → 到達 12%。棒の上端との距離をカンプの 2.62% で一定に保つので、
       棒の下りにそのまま追従する。到達点の 12% は _reason.scss が持っている値なので
       ここには書かない（:not(.is-visible) で出発点だけ上書きし、
       .is-visible が付いた瞬間に **_reason.scss の値へ戻る**＝二重管理にならない）。

     ■ 大きさ（font-size）
       カンプの「0」は 82.1px（SP）/ 103px（PC）。この大きさのまま棒の上端まで
       持ち上げると、**グラフ上部のキャプション（50年間で…）に文字がぶつかる**
       （数字の上端が枠の上 -2.7px まで出る）。
       → 数えている間は**左の「約700万円」と同じ大きさ**（43.8px / 13.5px）で出し、
         下りきるのに合わせてカンプの大きさへ育てる。
         出発時は左右の数字が同じ高さ・同じ大きさで並ぶので、
         「同じ 700万円」から片方だけ 0 へ落ちる対比が出る。
       到達点の値はやはり _reason.scss 側のものが効く（同上）。

     ■ transition に bottom / font-size を使っている（このファイルの原則の例外）
       このファイルは transform と opacity しか使わない方針だが、ここだけ例外。
         ・bottom … transform の % は**自分の高さ基準**なので、親（グラフ枠）基準で
           動かせない。グラフ高は vw 一本では決まらない（実測で
           高さ/文字 比が 15.59〜18.24 とブレークポイントで変わる）ので em でも代用できない。
         ・font-size … transform: scale() だと中間フレームの文字がぼける。
           数字そのものを読ませたいので、字形が崩れないほうを採った。
       どちらも **position: absolute の 1 要素**（文字数 6 以下）に閉じていて、
       外のレイアウトは動かないため、長尺ページでも実測で引っかかりは出ていない。

     ■ 棒との同期
       棒（2-a）と同じ 1.1s / $motion-ease で、同じ .is-visible をきっかけに動く。
       **1.1s を変えるときは 2-a と JS の DURATION も一緒に変えること。**
     ---------------------------------------------------------- */
}
.is-catalog-motion .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value {
  transition: bottom 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), font-size 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-catalog-motion .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__figure {
  transition: font-size 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-catalog-motion .p-catalog-lp-reason-graph:not(.is-visible) .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value {
  bottom: 76.27%;
  font-size: clamp(11.077px, 3.461vw, 13.5px);
}
@media screen and (min-width: 1024px) {
  .is-catalog-motion .p-catalog-lp-reason-graph:not(.is-visible) .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value {
    font-size: clamp(13.5px, 4.885px + 0.841vw, 17px);
  }
}
.is-catalog-motion .p-catalog-lp-reason-graph:not(.is-visible) .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__figure {
  font-size: clamp(35.938px, 11.231vw, 43.8px);
}
@media screen and (min-width: 1024px) {
  .is-catalog-motion .p-catalog-lp-reason-graph:not(.is-visible) .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__figure {
    font-size: clamp(43.8px, 16.231px + 2.692vw, 55px);
  }
}
.is-catalog-motion {
  /* JS が数字を「700万円」に差し替えるまでは数字を出さない（先方指摘・2026-10-02）。
     catalog-lp.js は defer なので、**グラフが画面に入った状態でページを読み込んだ場合**
     （その位置でリロード／アンカーで直接飛んだ場合）、差し替え前の「0円」が
     一瞬だけ見えることがある。棒は 700万円 の高さで出ているので、
     「高い棒 ＋ 0円」というちぐはぐな絵になって目立つ。
     .is-counting は prepareGraphCountdown() が数字を入れるのと**同時に**付くので、
     この指定は「正しい数字が入ってから出す」という意味になる。
     ※ JS が無効なら <html> に .is-catalog-motion 自体が付かず、この指定は効かない
       （＝カンプどおり「0円」が普通に出る）。 */
}
.is-catalog-motion .p-catalog-lp-reason-graph:not(.is-visible) .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value:not(.is-counting) {
  visibility: hidden;
}
.is-catalog-motion {
  /* 読み上げ用の「0」。画面には 700万円 が出ているが、読み上げには最後まで
     本当の値（0円）を届けるために JS が挿す span（runGraphCountdown 参照）。
     数え終わると JS が取り除くので、最終状態の DOM には残らない。
     display: none / visibility: hidden は**読み上げからも消える**ので使わない。 */
}
.is-catalog-motion .p-catalog-lp-reason-graph__value-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.is-catalog-motion .p-catalog-lp-reason-graph__item--own .p-catalog-lp-reason-graph__value.is-counting {
  right: 14.4%;
  left: auto;
  font-variant-numeric: tabular-nums;
}
.is-catalog-motion {
  /* ---- 2-b. Reason 03 の保証比較チャート --------------------
     6行 × 2本のバーが左から伸びる。
     幅は SCSS の --catalog-chart-bar が持っているので、
     **width には触らず scaleX で伸ばす**（値を二重管理しない）。
     行ごとに 60ms ずらして、上から順に伸びるように見せる。
     ---------------------------------------------------------- */
}
.is-catalog-motion .p-catalog-lp-reason-chart__track::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible .p-catalog-lp-reason-chart__track::before {
  transform: scaleX(1);
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible tbody:nth-of-type(1) .p-catalog-lp-reason-chart__track::before {
  transition-delay: 0ms;
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible tbody:nth-of-type(2) .p-catalog-lp-reason-chart__track::before {
  transition-delay: 60ms;
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible tbody:nth-of-type(3) .p-catalog-lp-reason-chart__track::before {
  transition-delay: 120ms;
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible tbody:nth-of-type(4) .p-catalog-lp-reason-chart__track::before {
  transition-delay: 180ms;
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible tbody:nth-of-type(5) .p-catalog-lp-reason-chart__track::before {
  transition-delay: 240ms;
}
.is-catalog-motion .p-catalog-lp-reason-chart.is-visible tbody:nth-of-type(6) .p-catalog-lp-reason-chart__track::before {
  transition-delay: 300ms;
}
.is-catalog-motion {
  /* ---- 3. カウントアップ ------------------------------------
     対象は 97 / 4.8 の2つだけ（js/catalog-lp.js 側で指定）。
     ・Reason 01 の「約700万円」は**対象外**（先方修正・2026-10-02）。
       左は固定にして、右の棒を 700万円の高さから下ろす方式に変えた（上の 2-a）
     ・0円（当社のタイル外装）と 全壊・半壊 0 は**対象外**。
       0 に向かって数える動きは意味を持たない
     ・64回（地震の発生頻度）も**対象外**（ユーザー指示）
     ・KV の「700万円」も対象外。FV は即座に読めることが最優先

     数字は等幅で動かさないと桁が増減するたびに横揺れするので、
     カウント中だけ tabular-nums にする。
     ---------------------------------------------------------- */
}
.is-catalog-motion .js-catalog-count.is-counting {
  font-variant-numeric: tabular-nums;
}
.is-catalog-motion {
  /* ---- 4. KV の初回フェードイン（2026-09-30 追加）-----------
     先方指示「KV の文字をサイトを開いたときに浮かび上がるようにしたい」。
     間合いは参考として受け取った HTML に合わせた
     （docs/reference/reference-html.html の @keyframes fvUp ＝
      opacity 0 + 下から 24px、要素ごとに 0.14s 前後ずつ遅らせる）。

     ■ 1. のセクション fade（12px / 0.6s）と値を変えている理由
       あちらは「スクロール中に控えめに出す」ための値。KV は初回の印象を
       作る場所なので、参考 HTML の間合い（24px / 1.15s）をそのまま使う。

     ■ transform ではなく translate（独立変形プロパティ）で動かす
       __vertical は SP で translateX(-50%)、__scroll は PC/SP とも
       左右の中央寄せに **transform を位置決めとして使っている**。
       transform を上書きすると位置がずれるので、縦移動だけ translate に逃がす。
       translate 非対応（Safari 14.0 以前）ではフェードだけになる＝破綻はしない。

     ■ 背景写真（__bg）には掛けない
       **LCP 要素そのもの**。opacity:0 から始めると Chrome は LCP 候補から外し、
       可視になるまで LCP がずれる。動かすのは文字だけ。
       測り方: node tmp-spec/catalog-lp/kv-lcp.mjs（演出なしとの比較つき）

     ■ 発火は IntersectionObserver ではない
       KV は最初から画面内にあるので、読み込み直後に .is-kv-in を付けるだけ
       （js/catalog-lp.js）。
     ---------------------------------------------------------- */
}
.is-catalog-motion .p-catalog-lp-kv__vertical,
.is-catalog-motion .p-catalog-lp-kv__title,
.is-catalog-motion .p-catalog-lp-kv__lead,
.is-catalog-motion .p-catalog-lp-kv__note,
.is-catalog-motion .p-catalog-lp-kv__scroll {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 1.6s cubic-bezier(0.22, 0.7, 0.3, 1), translate 1.6s cubic-bezier(0.22, 0.7, 0.3, 1);
  will-change: opacity, translate;
}
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__vertical,
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__title,
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__lead,
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__note,
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__scroll {
  opacity: 1;
  translate: none;
  will-change: auto;
}
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__vertical {
  transition-delay: 0.195s;
}
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__title {
  transition-delay: 0.39s;
}
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__lead {
  transition-delay: 0.624s;
}
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__note {
  transition-delay: 0.806s;
}
.is-catalog-motion .p-catalog-lp-kv.is-kv-in .p-catalog-lp-kv__scroll {
  transition-delay: 1.014s;
}

/**********************

  catalog-lp.scss — 資料請求LP（page-catalog.php）のスタイル
  出力先 css/catalog-lp.css（`npm run css:watch` で自動コンパイル）

  ・このCSSは **LP でしか読まれない**（header-catalog.php からのみ）。
    style.css / style2.css は読まないので、ベースはここが自前で持つ。
  ・既存の style.scss / style2.scss / stay-lp.scss は変更しない。
  ・色・フォントは v.$lp-red などで参照する（_variable.scss）。
    パレットの出どころは docs/catalog-lp-assets.md。

**********************/
/* ============================================================
   ベース
   style.css を読まないので、style.scss の base 相当をここで持つ。
   reset.css（Meyer v2.0）は header-catalog.php で読んでいる。
   ============================================================ */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  background-color: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  color: #323232;
  font-size: 1.6rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:root {
  --catalog-header-h: 66px;
}
@media screen and (min-width: 1024px) {
  :root {
    --catalog-header-h: 90px;
  }
}

.admin-bar {
  --catalog-header-h: calc(66px + 46px);
}
@media screen and (min-width: 1024px) {
  .admin-bar {
    --catalog-header-h: calc(90px + 32px);
  }
}

:target {
  scroll-margin-top: calc(var(--catalog-header-h) + 24px);
}

/* ============================================================
   ブレークポイント・clamp ヘルパーは共有入口 _catalog-lp-mq.scss が持つ
   （セクション partial からも同じものを使うため。ここで再定義すると
     片方だけ変えたときに気づけない）。
     lp.$bp-md / lp.$bp-lg / lp.$sp-cap / lp.$tablet-cap / @include lp.mq(md|lg)
     lp.fluid() / lp.fluid-sp()
   ============================================================ */
/* ============================================================
   ユーティリティ
   ============================================================ */
.u-catalog-lp-pc-only {
  display: none;
}
@media screen and (min-width: 1024px) {
  .u-catalog-lp-pc-only {
    display: inline;
  }
}

@media screen and (min-width: 1024px) {
  .u-catalog-lp-sp-only {
    display: none;
  }
}

/* ============================================================
   以下、セクションごとのスタイルを追記していく
   ============================================================ */
/* ============================================================
   共通の下ごしらえ
   ------------------------------------------------------------
   流動フォントサイズの clamp ヘルパー lp.fluid() / lp.fluid-sp() は
   sass/_catalog-lp-mq.scss にある（セクション partial からも
   `@use "../catalog-lp-mq" as v;` で v.fluid() として使える）。

     lp.fluid(24px, 40px)   1024px で 24px → 1440px で 40px（PC帯）
     lp.fluid-sp(24px)      320px で 24×320/390 → 390px 以上で 24px（SP帯）
   ============================================================ */
/* ============================================================
   c-catalog-lp-pill — 赤いピルボタン
   ヘッダー2つ / CTA / works で使い回す。
   カンプ実測（PC 8001:36・8001:46 ／ SP 8029:687・8029:796）：
     PC 240x58 / radius 100 / padding 20px 30px / 文字 14px ls8%
        影 0 4px 16px rgba(#832f34,.5) / 矢印 16x9（arrow.svg のパス実寸）
     SP 130x40 / radius 68.97 / padding 13.8px 16px / 文字 10px ls8%
        影 0 2.8px 11px（PCより小さい。PCの値を流用しないこと）/ 矢印 11x6.2

   ■ padding-left の差（PC 30px ／「来場予約はこちら」だけ 52px）の扱い
     カンプは幅 240px 固定 + SPACE_BETWEEN で、文字が短い分を designer が
     padding-left で手で寄せている（SP も 25px / 40px で同様）。
     → ハードコードすると文言を1文字変えた瞬間に中心がずれるので採用しない。
     採用したのは「幅は min-width（下限）だけ与えて中身にハグさせ、
     文字を flex:1 + text-align:center で残り幅の中央に置く」方式。
       ・長い方（カタログ請求はこちら）: 30 + 151.2 + 12 + 17 + 30 = 240.2px
         → カンプ 240px とほぼ一致。文字の可視中心もカンプと 0.2px 差。
       ・短い方（来場予約はこちら）: ハグ幅 210px < min-width 240px なので 240px。
         文字はその中央に来る（カンプより 6px ほど右寄り＝designer の手寄せとの差）。
     gap を 16px ではなく 12px にしているのは、SPACE_BETWEEN で潰れていた
     カンプの実ギャップが 13px / 22px だったため。12px にするとハグ幅が
     カンプの 240px に一致する（16px のままだと 244px になり2つのボタンの幅が揃わない）。
   ============================================================ */
.c-catalog-lp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: clamp(120px, 33.333vw, 130px);
  gap: 1.1em;
  padding: 1.38em 1.6em;
  border-radius: 100px;
  background-color: #832f34;
  box-shadow: 0 2.8px 11px rgba(131, 47, 52, 0.5);
  color: #fff;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  transition: background-color 0.3s ease;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-pill {
    min-width: 240px;
    gap: 0.857em;
    padding: 1.4286em 2.143em;
    box-shadow: 0 4px 16px rgba(131, 47, 52, 0.5);
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}
@media (hover: hover) {
  .c-catalog-lp-pill:hover {
    background-color: #9c3337;
  }
}

.c-catalog-lp-pill__text {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.c-catalog-lp-pill__arrow {
  flex-shrink: 0;
  width: 1.169em;
  height: auto;
  transition: transform 0.3s ease;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-pill__arrow {
    width: 1.214em;
  }
}

/* ============================================================
   矢印のホバー移動（ユーザー指示・2026-09-26）
   ------------------------------------------------------------
   矢印が付いているボタン**すべて**で、ホバー時に矢印を少し右へ動かす。
   対象は4つ：
     .c-catalog-lp-pill__arrow                     ヘッダー / CTA / works（<img>）
     .c-catalog-lp-button::after                   CTA「まずはカタログを見る」（mask）
     .c-catalog-lp-submit::after                   「この内容で送信する」（mask）
     .p-catalog-lp-model-house__card-more-arrow    「詳細はこちら」（<img>・_model-house.scss 側）

   ■ 移動量を 4px に統一している理由
     ボタンごとに矢印の実寸が 11.7〜21.3px とばらつくので、em で揃えると
     小さいボタンだけ動きが小さく見える。**見た目の移動量を揃えるため px 固定**にした。
     いちばん余白が狭いのは「詳細はこちら」（右 11px）で、4px 動いても 7px 残る。

   ■ @media (hover: hover) で囲う理由
     タップ端末では :hover が押したあとも張り付き、矢印がずれたまま戻らない。

   ■ transform の合成に注意
     ::after 系は縦中央寄せに translateY(-50%) を使っているので、
     ホバー時は translate(4px, -50%) と**まとめて**書く（transform は上書き）。
   ============================================================ */
@media (hover: hover) {
  .c-catalog-lp-pill:hover .c-catalog-lp-pill__arrow {
    transform: translateX(4px);
  }
  .c-catalog-lp-button:hover::after,
  .c-catalog-lp-submit.is-ready:hover::after {
    transform: translate(4px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-catalog-lp-pill__arrow,
  .c-catalog-lp-button::after,
  .c-catalog-lp-submit::after {
    transition: none;
  }
  .c-catalog-lp-pill:hover .c-catalog-lp-pill__arrow {
    transform: none;
  }
  .c-catalog-lp-button:hover::after,
  .c-catalog-lp-submit.is-ready:hover::after {
    transform: translateY(-50%);
  }
}
/* ============================================================
   c-catalog-lp-button — 白い横長ボタン（CTA「まずはカタログを見る」）
   カンプ実測（PC 8055:1855 ／ SP 8030:1430）：
     PC 480x90 / 角丸なし / 白地 / 文字 20px Noto Medium ls8% #323232
        矢印パス 25.7x14（ストローク2）/ ボタン右端から 27.1px
     SP 340x65 / 文字 15px / 矢印パス 20x11 / 右端から 51.5px
     ホバー：背景 #ffe18f（$lp-yellow）。文字色・矢印色は変わらない。

   カンプでは文字ノードが固定幅（PC 344px）で、矢印はその後ろに置かれている
   ＝ padding ボックスをはみ出した状態。可視の事実だけ取ると
   「文字はボタンのほぼ中央」「矢印は右端から一定距離」なので、そう組む。
   矢印は装飾なので ::after + mask-image（arrow.svg を currentColor で塗る）。
   想定マークアップ： <a class="c-catalog-lp-button" href="#catalog-request">まずはカタログを見る</a>

   ■ SP の文字を 15px → 17px に上げた（先方修正・2026-10-02）
     「スマホで小さく感じる」との指摘。**文字だけ**大きくし、ボタンの外形
     （幅 100% / 高さ 65px）と矢印の位置・大きさはカンプのまま据え置く。

     ・余白と矢印を em から fluid-sp(px) に移した
       以前は padding(4.93em) と ::after(3.39em / 1.417em) が font-size 基準の
       em で、文字を上げると**余白も矢印も同率で膨らみ**、文字の置ける幅が
       増えないまま文字だけ太って**2行に折り返す**（高さ 65px も崩れる）。
       → 余白・矢印は文字サイズから切り離し、カンプ実測値を fluid-sp() で
         そのまま持たせる。出る px は従来と同じ（390px で 74 / 50.9 / 21.25、
         320px で 60.7 / 41.8 / 17.4。差は 0.05px 以下）。

     ・320px だけ下限を 13px に止めている（fluid-sp(17px) を使わない理由）
       fluid-sp(17px) は 320px で 13.95px になるが、そのときの文字幅
       10字 × 13.95 × 1.08 = 150.6px に対し、置ける幅は
       270 −(60.7×2) = 148.6px。**2px 足りず折り返す**。
       SP 帯の下限だけ 13px に寝かせて逃がしている（320px で文字幅 140.4px、
       余裕 8.2px。矢印の左端との間隔も 5.6px 空く）。
       ＝ この1本だけ fluid-sp() の比例スケールから外れている。
       390px では 17px・余裕 8.4px（制約は矢印ではなく padding 74px 側）。

     ⚠ **文言を変えるときは必ず幅を計算し直すこと。**
       置ける幅（390px で 192px ／ 320px で 148.6px）を超えた瞬間に 2行になり、
       min-height 65px を超えてボタンが縦に伸びる。
       1字 = font-size × 1.08（ls8%）で概算できる。
   ============================================================ */
.c-catalog-lp-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 65px;
  padding: 0.8em clamp(60.718px, 18.974vw, 74px);
  background-color: #fff;
  color: #323232;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, -5.286px + 5.714vw, 17px);
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-align: center;
  transition: background-color 0.3s ease;
}
.c-catalog-lp-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(41.764px, 13.051vw, 50.9px);
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  width: clamp(17.436px, 5.449vw, 21.25px);
  aspect-ratio: 17/10;
  background-color: currentColor;
  -webkit-mask-image: url("../img/catalog-lp/arrow.svg");
          mask-image: url("../img/catalog-lp/arrow.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-button {
    min-height: 90px;
    padding: 0.8em 2.8em;
    font-size: clamp(15px, 2.692px + 1.202vw, 20px);
    line-height: 1.2;
  }
  .c-catalog-lp-button::after {
    right: 1.315em;
    width: 1.365em;
  }
}
@media (hover: hover) {
  .c-catalog-lp-button:hover {
    background-color: #ffe18f;
  }
}

/* ============================================================
   c-catalog-lp-submit — 送信ボタン（Catalog Request）
   カンプ実測（PC 8055:1876 ／ SP 8041:71）：
     PC 550x80 / #303337 / 文字 18px Roboto Bold ls16% 白 / アイコン右端から 31.3px
     SP 292x65 / 文字 15px / アイコン右端から 40px
     ホバー：背景 #4e545c（$lp-bg-charcoal-hover）
   フォントは Roboto Bold 指定だが Roboto に和文が無いので実際は
   フォールバック（= Noto Sans JP）で描かれる。その並びをそのまま書く。

   ※ カンプのアイコンは arrow.svg（線の矢印）ではなく塗りの矢印（PC 18.9x18 /
     SP 17x16、Material の arrow_forward 系）で、書き出されていない。
     ここでは arrow.svg を mask で流用している。厳密に合わせるなら
     ノード 8055:1879 の書き出しが要る（報告済み・要確認）。
   想定マークアップ： <button type="submit" class="c-catalog-lp-submit">この内容で送信する</button>

   ■ 待機（必須が未入力）／送信可能 の出し分け（ユーザー指示・2026-09-26）
     必須がすべて埋まるまで、ボタンをグレーにしてホバーも効かせない。
     JS（js/catalog-lp.js）が .is-ready を付け外しするだけで、色は CSS が持つ。

     ・**disabled にはしていない。** 押せなくすると「何が足りないのか」を
       CF7 のバリデーションメッセージで知る手段が無くなる。
       押せば従来どおり各項目にエラーが出る。状態は色・カーソル・aria-disabled で伝える。
     ・待機色 #6f747a はカンプに無い実装側の判断値なので、
       カンプ由来のパレット（_variable.scss）には入れずここに置く。
       白文字とのコントラスト比 4.71:1（WCAG AA の 4.5:1 を満たす）。
       「押せない見た目」にしつつ、文字が読めなくならない濃さを選んだ。
   ============================================================ */
.c-catalog-lp-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 65px;
  padding: 0.8em 3.5em;
  background-color: #303337;
  color: #fff;
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(12.308px, 3.846vw, 15px);
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  cursor: not-allowed;
  background-color: #6f747a;
  transition: background-color 0.3s ease;
}
.c-catalog-lp-submit.is-ready {
  background-color: #303337;
  cursor: pointer;
}
.c-catalog-lp-submit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.67em;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  width: 1.2em;
  aspect-ratio: 17/10;
  background-color: currentColor;
  -webkit-mask-image: url("../img/catalog-lp/arrow.svg");
          mask-image: url("../img/catalog-lp/arrow.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-submit {
    min-height: 80px;
    padding: 0.8em 2.9em;
    font-size: clamp(15px, 7.615px + 0.721vw, 18px);
  }
  .c-catalog-lp-submit::after {
    right: 1.74em;
  }
}
@media (hover: hover) {
  .c-catalog-lp-submit.is-ready:hover {
    background-color: #4e545c;
  }
}

/* ============================================================
   c-catalog-lp-heading — セクション見出し（全10セクションで使用）
   ------------------------------------------------------------
   ■ 実測した10本（PC / SP をそれぞれ計測）
     CTA1 8026:46 / 8030:1426              Concept 6004:186 / 8030:1452
     Owner's Survey 8001:2154 / 8030:1258  Why loved 8007:3437 / 8031:1932
     CTA2 8009:9560 / 8031:1878            works 8011:16190 / 8033:5380
     CTA3 8026:600 / 8031:4990             Our Philosophy 8011:16215 / 8034:5989
     Catalog Request 8011:16368 / 8041:5   Model House 8011:16445 / 8041:82

   ■ 10本すべてで共通だったもの（＝ここを触ると全セクションに波及する）
     ・ラベル→見出しの間隔 16px（PC/SP とも例外なし）
     ・ラベル Roboto Regular / letter-spacing 40% / 箱の高さ = 文字サイズ×1.15
     ・見出し Shippori Mincho SemiBold / line-height 130%
     ・見出し letter-spacing 4%（CTA の3本だけ 0% → --cta modifier）

   ■ 差分は modifier に寄せた
     色      __label--light / __title--light   写真・黒地の上（白）。既定は金＋#323232
     大きさ  __title--lg   PC48 / SP32（Our Philosophy・Catalog Request）
             __title--cta  PC32 / SP22 + ls 0（CTA1/2/3。ラベルは無い）
             既定          PC40 / SP24（Concept・Survey・Why・works・Model House）
     揃え    セクション側が .c-catalog-lp-heading に text-align を書く。
             modifier にしていないのは、ラベルと見出しの2要素に別々のクラスを
             付ける方式だと片方の付け忘れで左右がバラける事故が起きるため。
             継承なら必ず同期する。左が既定、中央にしたいセクションだけ
             text-align: center を足す（Concept・Survey・works・Catalog Request）。

   ■ 任意要素 __lead（Why loved だけが持つ。見出しの 24px 下・Noto Regular）
   ============================================================ */
.c-catalog-lp-heading__label {
  font-family: "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.4em;
  line-height: 1.15;
  color: #81734d;
  margin-right: -0.4em;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-heading__label {
    font-size: clamp(12px, 7.077px + 0.481vw, 14px);
  }
}

.c-catalog-lp-heading__label--light {
  color: #fff;
}

.c-catalog-lp-heading__title {
  font-family: "Local Shippori Mincho", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(19.692px, 6.154vw, 24px);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #323232;
  margin-right: -0.04em;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-heading__title {
    font-size: clamp(24px, -15.385px + 3.846vw, 40px);
  }
}

.c-catalog-lp-heading__label + .c-catalog-lp-heading__title {
  margin-top: 16px;
}

.c-catalog-lp-heading__title--lg {
  font-size: clamp(26.256px, 8.206vw, 32px);
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-heading__title--lg {
    font-size: clamp(32px, -7.385px + 3.846vw, 48px);
  }
}

.c-catalog-lp-heading__title--cta {
  font-size: clamp(18.051px, 5.641vw, 22px);
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-heading__title--cta {
    font-size: clamp(22px, -2.615px + 2.404vw, 32px);
  }
}

.c-catalog-lp-heading__title--light {
  color: #fff;
}

.c-catalog-lp-heading__lead {
  margin-top: 24px;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #323232;
}
@media screen and (min-width: 1024px) {
  .c-catalog-lp-heading__lead {
    font-size: clamp(15px, 2.692px + 1.202vw, 20px);
  }
}

.c-catalog-lp-heading__lead--light {
  color: #fff;
}

/* ============================================================
   l-catalog-lp-header
   カンプ実測（PC 6001:41 ／ SP 6030:10）：
     PC 1440x90 / 塗り無し（透過。地色の白が出る）/ padding 15px 40px 13px 71px
        space-between / align center / ロゴ 200x33 / ピル2つ + gap 16px
     SP 390x66 / 背景 #ffffff / ロゴはマークのみ 20x20 / ピル2つ + gap 4px
        （padding は 22px だがフレーム高 66px が優先＝中身は上下中央）
   position は static。カンプの KV は y=90 から始まり重なっていないため、
   追従ヘッダーは作らない（page-catalog.php の取り決めどおり）。

   ロゴの PC/SP 出し分けは u-catalog-lp-*-only を使わずここで切り替える
   （あのユーティリティは inline 要素用）。ロゴだけ md(768) で全体ロゴに切り替える。
   タブレット帯に 20px のマークだけ置くのを避けるため。他は lg(1024) で切り替え。
   ============================================================ */
/* ページ先頭の着地点（#page-top）。header-catalog.php の冒頭にある空の span。
   sticky なヘッダーに id を付けると「今いる位置」が着地点になってしまい
   トップに戻らないので、sticky ではないこの要素を着地点にしている。
   scroll-margin-top はベースの :target（ヘッダー高 + 24px）を打ち消して 0 に戻す
   （ここは文書の先頭なので、ヘッダーぶん下げる必要がない）。 */
.l-catalog-lp-anchor-top {
  display: block;
  height: 0;
  scroll-margin-top: 0;
}

.l-catalog-lp-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 66px;
  padding: 8px 8px 8px 24px;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-header {
    min-height: 90px;
    padding: 15px 40px 13px 71px;
  }
}

.l-catalog-lp-header__inner {
  display: contents;
}

.l-catalog-lp-header__logo {
  flex-shrink: 0;
  line-height: 0;
}

.l-catalog-lp-header__logo-link {
  display: block;
  width: 20px;
  aspect-ratio: 20/20;
}
@media screen and (min-width: 768px) {
  .l-catalog-lp-header__logo-link {
    width: 200px;
    aspect-ratio: 200/33;
  }
}

.l-catalog-lp-header__logo-full {
  display: none;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .l-catalog-lp-header__logo-full {
    display: block;
  }
}

.l-catalog-lp-header__logo-mark {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .l-catalog-lp-header__logo-mark {
    display: none;
  }
}

.l-catalog-lp-header__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-header__list {
    gap: 16px;
  }
}

/* ============================================================
   ヘッダーのピルだけ SP の文字を大きくする（先方修正・2026-10-02）
   ------------------------------------------------------------
   指示は「SP ヘッダーのボタンの**文字だけ**大きく。ボタンのサイズは変えない」。

   ■ .c-catalog-lp-pill の font-size を上げてはいけない
     ピルは padding(1.38em 1.6em) / gap(1.1em) / 矢印幅(1.169em) が**すべて
     font-size 基準の em**。font-size を上げるとボタンごと等倍で大きくなる。
     → ピル自身の font-size（＝レイアウトの基準値 10px）は据え置き、
       __text の font-size だけ 1.2em（= 12px）に上げる。
       これで矢印（1.169em = 11.69px）は 1px も動かない。

   ■ 幅を 130px / 120px から動かさないための相殺
     ピルの幅は max(min-width, 中身のハグ幅)。文字が太るとハグ幅が増え、
     min-width を超えた時点で**長いラベルのボタンだけ太る**（2つの幅が不揃いになる）。
       ハグ幅 = padding左右 + gap + 矢印 + 文字
       文字「カタログ請求」6字 ls8%（末尾の字間も入る）
         10px → 6×10 + 6×0.8  = 64.8px
         12px → 6×12 + 6×0.96 = 77.76px（+12.96px）
     増えたぶんを padding-inline と gap から引く：
       padding 16px → 10px（×2 で -12px）／ gap 11px → 10px（-1px）
       ハグ幅 = 77.76 + 20 + 10 + 11.69 = 119.45px ≦ min-width の下限 120px
     320px（min-width 120px）でも収まるので 2つのボタンは常に同じ幅。
     ※ 320px は header の padding と合わせて**余白ゼロでちょうど収まる**幅
       （8 + 120 + 4 + 120 + 8 = 320）。ハグ幅を 120px 超にすると横に溢れる。
     ※ **カンプの内側余白 16px より狭い**のは承知のうえ（ユーザー判断・2026-10-02）。
       「ボタン寸法は据え置き」と「文字 12px」を両立させる唯一の逃げ場が
       padding だったため。文言を1文字でも増やすと 120px を超えて崩れるので、
       **ラベルを変えるときは必ずこの計算をやり直すこと**（余裕は 0.55px しかない）。
       padding を戻したいなら、文字を 11px（padding 14px / gap 9px）に下げるか、
       min-width の下限 120px 側を上げる判断が要る。

   ■ 高さ 40.6px を保つ
     高さ = padding上下(13.8×2) + 文字の行ボックス。
     line-height は数値指定なので font-size に比例して 13px → 15.6px に増える。
     __text 側で 1.083（= 13px / 12px）に戻して 13px に据える。
     （矢印の高さは 6.88px なので、高さを決めるのは文字側の行ボックス。）

   ■ letter-spacing を __text にも書く理由
     em の letter-spacing は**宣言した要素の font-size で px に確定**してから
     継承される。ピル側の 0.08em は 0.8px のまま降りてくるので、
     12px の文字に対しては 6.7% になってしまう。8% を保つため再宣言する。

   PC（lg 以上）はカンプどおりなので、ここで足した指定を打ち消す。
   SP 文言は「カタログ請求」「来場予約」（"はこちら" は lg 未満で非表示）。
   ============================================================ */
.l-catalog-lp-header .c-catalog-lp-pill {
  gap: 1em;
  padding: 1.38em 1em;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-header .c-catalog-lp-pill {
    gap: 0.857em;
    padding: 1.4286em 2.143em;
  }
}

.l-catalog-lp-header .c-catalog-lp-pill__text {
  font-size: 1.2em;
  letter-spacing: 0.08em;
  line-height: 1.083;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-header .c-catalog-lp-pill__text {
    font-size: 1em;
    line-height: 1.3;
  }
}

/* ============================================================
   l-catalog-lp-footer
   カンプ実測（PC 8011:16669 ／ SP 8041:312）：
     PC 1440x159.6 / #000 / padding 60px 0 / 中身は左右 80px / space-between
        ロゴ 244x39.6 / Copyright 12px Noto Medium ls16% lh100% 白
     SP 390x135.2 / padding 24px 0 / 縦積み中央 / gap 48px
        ロゴ 180x29.2 / Copyright 10px
   ※ logo_white.svg の intrinsic は 244x40（カンプ 244x39.6）。
     歪ませないため SVG 側の比率で組む（差 0.4px）。
   ============================================================ */
.l-catalog-lp-footer {
  padding: 24px 0;
  background-color: #000;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-footer {
    padding: 60px 0;
  }
}

.l-catalog-lp-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 0 20px;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 3.33%;
    padding: 0 80px;
  }
}

.l-catalog-lp-footer__logo {
  line-height: 0;
}

.l-catalog-lp-footer__logo-link {
  display: block;
  width: 180px;
  aspect-ratio: 244/40;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-footer__logo-link {
    width: 244px;
  }
}

.l-catalog-lp-footer__logo-img {
  width: 100%;
  height: 100%;
}

.l-catalog-lp-footer__copyright {
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .l-catalog-lp-footer__copyright {
    font-size: clamp(10px, 5.077px + 0.481vw, 12px);
  }
}
/*# sourceMappingURL=catalog-lp.css.map */