@charset "utf-8";

/* =========================================================
   正直屋 総合サイト ページセクションのスタイル
   ページ本体を構成するセクション単位のブロック（mv / カード類 / CTA など）を置く。
   給湯器ページから始めるが他のページでも同じブロックを使うので、
   ファイル名にページ名は入れない。
   「renewal」のような時点を表す名前も使わない（数年後に意味を失うため）。

   Figma: 総合給湯器_リニューアル_2
   ・PC  = node 4074:7767（1920 × 524）
   ・SP  = node 4042:4466（402 × 426）

   ■ 寸法の書き方
   セクションのルートで `--u`（デザイン1pxぶんの長さ）を定義し、
   すべての寸法を `calc(var(--u) * <Figmaの数値>)` で書く。
   CSSにFigmaの生の数値がそのまま並ぶので照合しやすい。

   em は使わない。font-size と寸法を同じ要素に em で書くと em が
   「その要素自身のfont-size」基準になり、親基準で計算したつもりの値が
   全部ずれる（保証サークルが left 1385 のはずが 2078 になった）。

   ■ 絶対配置の基準
   保証サークル・マスコット・商品画像は .mv__copy を基準にしている。
   Figmaの座標はフレーム基準なので、.mv__copy の位置ぶんを引いた値を書く。
   PC: copy は left 230 / top 40 → Figma値 −230 / −40
   SP: copy は left 10 / top 10（padding 10）→ Figma値 −10 / −10
   ========================================================= */

:root {
  /* 共通トークン。header.css は当面自前のコピーを持っているので、いずれこちらへ寄せる */
  --c-navy: #182e78;        /* 正直屋の紺 */
  --c-red: #b90000;         /* 訴求の赤（%OFF・リボン） */
  --c-pale-blue: #ebf4fe;   /* 薄色青バック */
  --c-badge-border: #4da1ff;
  --c-cream: #fff1e5;        /* 暖色背景（Figmaの「暖色背景」） */
  --c-why-bg: #e9f1fc;       /* 寒色背景。名前は Why Us 由来だが全セクションで使う */
}

/* セクションの地色は、暖色（--c-cream）と寒色（--c-why-bg）を上から交互に置く。
   並びを変えたり間にセクションを足したときは、ここを見て組み直すこと。

     mv       … FV（地色なし）
     reco     … 暖
     voice    … 寒
     why      … 暖
     works    … 寒
     process  … 暖
     wty      … 紺のグラデーション（この配色には入らない）
     apply    … 寒
     tips     … 暖

   mv と wty は独自の背景を持つので交互の対象外。ただし枠は消費しない
   （wty の前後が「暖 → 紺 → 寒」と続くのはそのため）。 */

/* ---------------------------------------------------------
   メインビジュアル
   --------------------------------------------------------- */

.mv {
  /* コンテナはここ。バナーも .mv の子なので同じ --u が使える。
     cqw を使うのは、vw だと縦スクロールバーの幅ぶんズレるため。 */
  container-type: inline-size;

  /* 構図全体の拡大率。Figmaの1920キャンバスをそのまま縮小すると
     左右の余白（230 / 207）も同じ比率で残って中身が細く見えるので、
     一様に拡大して余白を詰める。1つの数値だけで調整できるようにしてある。 */
  --mv-zoom: 1.05;

  /* デザイン1pxぶんの長さ。拡大率を掛けてある */
  --u: calc(100cqw / 1920 * var(--mv-zoom));

  /* FVの高さ（デザインpx）。商品名が2行になるページでは増やす。
     例: 「ビルトイン／ガスコンロ」のように見出しが1行増えると
     見出し1行ぶん(約52)が必要になるので `.mv { --mv-h: 580 }` とする。 */
  --mv-h: 524;

  /* 商品名（「給湯器」の部分）の文字サイズ。ページごとに変える前提の値。
     ここの既定はFigmaの値＝どの商品名でも収まる安全側。
     「給湯器」のように短い名前のページは大きくできるが、
     「ビルトインガスコンロ」のような長い名前では折り返して崩れるので、
     標準値としては上げない。各ページ側で上書きする。
     例: <section class="mv" style="--mv-name-sp: 50"> */
  --mv-name-pc: 60;
  --mv-name-sp: 32;

  /* 拡大したぶん横にはみ出すので、その半分だけ左へ寄せて中央に合わせる */
  --mv-shift: calc(100cqw * (1 - var(--mv-zoom)) / 2);

  position: relative;       /* PCのバナーの基準 */
  overflow: hidden;
}

:where(.mv, .mv *) { box-sizing: border-box; }
.mv :where(h1, h2, p, ul, li) { margin: 0; padding: 0; list-style: none; font-size: inherit; }

/* サイト共通の common.css に、float時代のclearfixが全 ul / dl に効いている:
     dl:after, ul:after, .fix:after { content: "."; display:block; height:0; clear:both; … }
   見た目には出ないが、flex/grid の中では「3つ目のアイテム」として数えられ、
   gap が1つ余分に入る（SPのバッジで実測10.26px）。このセクション配下では無効にする。
   セクションを増やすときはここのセレクタにも追加すること。 */
.mv :where(ul, dl)::after { content: none; }

/* 背景の図形（水色の斜め帯＋右上の紺三角）はSVG1枚に入っている。
   中身と同じ倍率で拡大し、横は中央基準で切り落とす（上端は揃える）。 */
/* background-size は cover。寸法を直接指定するとSVGの縦横比が崩れて
   斜めの帯や三角の角度が変わってしまう（SPで実際に横方向へ8%潰れていた）。
   cover なら比率を保ったまま覆い、はみ出しぶんは左右が均等に切られるので、
   中身の --mv-shift（中央寄せ）とも位置が揃う。 */
.mv__stage {
  position: relative;
  block-size: calc(var(--u) * var(--mv-h));
  background: url("/img/waterheater/mv/bg_mv.svg") no-repeat center top / cover;
}

/* SPだけで改行させる箇所 */
.mv__sp-br { display: none; }

/* --- 左のコピー群（Figma: left 230 / top 40 / width 730 / gap 14） --- */
.mv__copy {
  position: absolute;
  inset-block-start: calc(var(--u) * 40);
  inset-inline-start: calc(var(--u) * 230);
  inline-size: calc(var(--u) * 730);
  translate: var(--mv-shift) 0;   /* 拡大ぶんを中央に戻す */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 14);
  /* サイト側の既存CSSから text-align: center が継承されてくるので打ち消す。
     中央寄せが要る箇所（リボン・バッジ・保証サークル）は個別に center を指定する。 */
  text-align: start;
}

/* 重ね順は上から リボン > 最大83%OFF > マスコット > 保証サークル。
   SPでこれらが重なるため明示しておく */
.mv__ribbon   { position: relative; z-index: 3; }
.mv__off      { position: relative; z-index: 2; }
.mv__mascot   { z-index: 1; }
.mv__guarantee{ z-index: 0; }

/* 赤いリボン（Figma: padding 4.698 / 9.395、文字 30.064） */
.mv__ribbon {
  inline-size: 100%;
  padding: calc(var(--u) * 4.698) calc(var(--u) * 9.395);
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--u) * 30.064);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* 見出し。「給湯器の交換が」と「最大83%OFF」をまとめて <h1> にしている
   （現行ページの h1 は空タグで背景画像だけだったため、実テキストに置き換えた）。
   copy 直下の gap と同じ間隔で2行を並べる。 */
.mv__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap は持たせない。見出しと「最大83%OFF」の間隔は、
     見出し側（.mv__lead）に確保した高さで決まる。 */
}

/* 「給湯器の交換が」（Figma: 給湯器 50.85 / の交換が 45）
   商品名が「ビルトイン／ガスコンロ」のように2行になるページもあるので、
   1行前提にせず折り返しても読める行間にしてある（Figmaは leading-none）。
   行が増えて縦が足りなくなる場合は .mv の --mv-h を増やす。 */
.mv__lead {
  display: block;
  font-weight: 900;
  font-size: calc(var(--u) * 45);
  line-height: 1.15;
  /* 商品名が2行になるページでも「最大83%OFF」の位置が動かないよう高さを確保する。
     .mv__head に gap を持たせない代わりにここで間隔も兼ねている。 */
  min-block-size: calc(var(--u) * 73);
  color: #000;
}
.mv__lead-em { font-size: calc(var(--u) * var(--mv-name-pc)); }

/* 「最大 83 %OFF」
   Figmaは「最大→83」に13.037、「83→%OFF」に14.954の隙間を持たせているが、
   詰めた見た目を採用して隙間は入れない。文字同士のアキだけで並べる。
   横幅は 730 を超えるが、Figmaでも shrink-0 + nowrap で溢れているので同じ。 */
.mv__off {
  display: flex;
  align-items: flex-end;
  color: var(--c-red);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.mv__off-max {
  display: flex;
  flex-direction: column;
  font-size: calc(var(--u) * 78.221);
  line-height: 1;
}
.mv__off-num {
  font-size: calc(var(--u) * 198.322);
  line-height: 0.85;
}
.mv__off-unit {
  font-size: calc(var(--u) * 145.877);
  line-height: 1;
}

/* --- バッジと商品画像の行 ---
   SPではFigmaどおり横並びの行。PCでは display:contents で行をほどき、
   バッジを通常フローの1項目、商品画像を絶対配置にする。 */
.mv__row { display: contents; }

/* --- 2つのバッジ（Figma: gap 24.427 / 高さ 129.492 / 枠 2.34） --- */
.mv__badges {
  display: flex;
  gap: calc(var(--u) * 24.427);
  inline-size: 100%;
}
.mv__badge {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3.9);
  block-size: calc(var(--u) * 129.492);
  background: var(--c-pale-blue);
  border: calc(var(--u) * 2.34) solid var(--c-badge-border);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}
.mv__badge-sub  { font-size: calc(var(--u) * 27); font-weight: 700; color: #000; line-height: 1.2; }
.mv__badge-main { font-size: calc(var(--u) * 45); color: var(--c-navy); line-height: 1.2; }

/* --- 商品画像3枚 ---
   重なり順は Figma の描画順（後に書いたものが手前）に合わせる。
   PCは .mv__copy 基準なので Figma値から 230 / 40 を引いてある。 */
.mv__products { position: absolute; inset: 0; pointer-events: none; }
.mv__product { position: absolute; object-fit: contain; }

/* 右奥のパロマ（Figma: left 1200.85 / top 113.7 / 196.148×262.035） */
.mv__product--rear {
  inset-block-start: calc(var(--u) * 73.7);
  inset-inline-start: calc(var(--u) * 970.85);
  inline-size: calc(var(--u) * 196.148);
  block-size: calc(var(--u) * 262.035);
}
/* 左のパロマ（Figma: left 986 / top 31 / 同寸） */
.mv__product--mid {
  inset-block-start: calc(var(--u) * -9);
  inset-inline-start: calc(var(--u) * 756);
  inline-size: calc(var(--u) * 196.148);
  block-size: calc(var(--u) * 262.035);
}
/* 手前のノーリツ（Figma: left 1020.86 / top 230.45 / 218.198×242.628） */
.mv__product--front {
  inset-block-start: calc(var(--u) * 190.45);
  inset-inline-start: calc(var(--u) * 790.86);
  inline-size: calc(var(--u) * 218.198);
  block-size: calc(var(--u) * 242.628);
}

/* --- 右上の保証サークル（Figma: left 1385 / top 7 / 199 / 文字 24） --- */
.mv__guarantee {
  position: absolute;
  inset-block-start: calc(var(--u) * -33);
  inset-inline-start: calc(var(--u) * 1155);
  inline-size: calc(var(--u) * 199);
  block-size: calc(var(--u) * 199);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-pale-blue);
  color: var(--c-navy);
  font-weight: 900;
  font-size: calc(var(--u) * 24);
  line-height: 1.35;
  text-align: center;
}

/* --- マスコット（Figma: left 1522 / top 53 / 191×187） --- */
.mv__mascot {
  position: absolute;
  inset-block-start: calc(var(--u) * 13);
  inset-inline-start: calc(var(--u) * 1292);
  inline-size: calc(var(--u) * 191);
  block-size: calc(var(--u) * 187);
  object-fit: contain;
}

/* --- バナー ---
   PCはFV右下（Figma: left 1296 / top 228 / 417×240 / 角丸20）。
   SPはFVの直下に通常フローで置く（本人指示）。
   .mv を基準にしているので、SPでは position を static に戻すだけで下へ回る。 */
.mv__banner {
  position: absolute;
  inset-block-start: calc(var(--u) * 228);
  inset-inline-start: calc(var(--u) * 1296);
  inline-size: calc(var(--u) * 417);
  translate: var(--mv-shift) 0;   /* 中身と同じだけ中央に戻す */
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  display: block;
  line-height: 0;
  transition: opacity .2s;
}
.mv__banner:hover { opacity: .85; }
.mv__banner img { inline-size: 100%; block-size: auto; }

/* =========================================================
   SP（1024px以下）
   Figmaの基準幅は402px。それ以上には広げず中央に置く。
   ========================================================= */
@media (max-width: 767px) {
  /* SPは基準幅402pxの構図を画面幅いっぱいまで比例追従させる。
     402pxで打ち止めにすると、それより広い画面で左右に隙間ができてしまう。
     切替点はヘッダー(1024px)より下げて768pxにしてある。768〜1024pxは
     PCの構図のままのほうが横幅を活かせるため。 */
  .mv {
    --mv-zoom: 1;                       /* SPは拡大しない（元から幅いっぱい） */
    --u: calc(100cqw / 402);
    --mv-shift: 0px;

    /* Figmaの高さは426だが、リボンが2行・見出しも2行になるぶん中身が入り切らない。
       商品名（--mv-name-sp）を大きくするとさらに縦が伸びるので、
       名前を大きくしたページはこの値も一緒に増やす。 */
    --mv-h: 459;
  }
  .mv__stage {
    background-image: url("/img/waterheater/mv/bg_mv_sp.svg");
  }

  .mv__sp-br { display: inline; }

  /* コピー群。背景（.mv__stage）は上端にぴったり付いたままで、
     リボンの上だけ余白を空ける。背景とコピーは別要素なので分けられる。 */
  .mv__copy {
    position: absolute;
    inset-block-start: calc(var(--u) * 12);
    inset-inline-start: calc(var(--u) * 10);
    inline-size: calc(var(--u) * 382);
    gap: calc(var(--u) * 10);
  }

  /* リボンは2行（Figma: 20px・中央揃え）。
     2行になるぶん、下の文字の足が詰まらないよう行間を広げる（Figmaは leading-normal） */
  .mv__ribbon {
    font-size: calc(var(--u) * 20);
    line-height: 1.4;
    white-space: normal;
  }

  /* 見出しは「給湯器の交換が」でPCと統一（Figmaは「ガス給湯器」だが揃える） */
  /* 商品名が2行になるページでも「最大83%OFF」の位置が動かないよう、
     見出しの高さをあらかじめ確保しておく（117px相当）。
     商品名の大きさ（--mv-name-sp）を変えてもここで吸収される。 */
  .mv__lead {
    font-size: calc(var(--u) * 27);
    line-height: 1.15;
    min-block-size: calc(var(--u) * 90);
  }
  .mv__lead-em { font-size: calc(var(--u) * var(--mv-name-sp)); }

  .mv__off-max  { font-size: calc(var(--u) * 42.125); }
  .mv__off-num  { font-size: calc(var(--u) * 106.804); }
  .mv__off-unit { font-size: calc(var(--u) * 78.56); }

  /* バッジと商品画像を横並びに戻す（Figma: gap 14 / items-start） */
  .mv__row {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 14);
    inline-size: 100%;
  }

  /* バッジは縦積み（Figma: 幅171 / 高さ70.799 / gap 11 / 枠1.279） */
  .mv__badges {
    flex-direction: column;
    gap: calc(var(--u) * 11);
    inline-size: calc(var(--u) * 171);
    flex: none;
  }
  .mv__badge {
    flex: none;
    inline-size: 100%;
    block-size: calc(var(--u) * 70.799);
    border-width: calc(var(--u) * 1.279);
    gap: calc(var(--u) * 2.132);
  }
  .mv__badge-sub  { font-size: calc(var(--u) * 16); }
  .mv__badge-main { font-size: calc(var(--u) * 24.603); }

  /* 商品画像はバッジの右の残り幅に重ねて置く。
     Figmaは1マスのgridに3枚を ml/mt の％とpxで重ねている。 */
  .mv__products {
    position: relative;
    inset: auto;
    flex: 1;
    min-inline-size: 0;
    block-size: calc(var(--u) * 146.6);   /* mt 35.6 + h 111 が最も低い */
  }
  .mv__product--rear {
    inset-block-start: calc(var(--u) * 14.4);
    inset-inline-start: 55.33%;
    inline-size: 44.67%;
    block-size: calc(var(--u) * 118);
  }
  .mv__product--mid {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 41.12%;
    block-size: calc(var(--u) * 109);
  }
  .mv__product--front {
    inset-block-start: calc(var(--u) * 35.6);
    inset-inline-start: 15.23%;
    inline-size: 51.27%;
    block-size: calc(var(--u) * 111);
  }

  /* 保証サークル。copy が 12 下がっているぶんを引いて位置を保つ */
  .mv__guarantee {
    inset-block-start: calc(var(--u) * 58);
    inset-inline-start: calc(var(--u) * 175);
    inline-size: calc(var(--u) * 123);
    block-size: calc(var(--u) * 123);
    font-size: calc(var(--u) * 16);
  }

  /* マスコット。Figmaの 78×76 では小さいので拡大（縦横比は保つ）。
     ・上は赤リボンの下端(約66)より下げる
     ・左は保証サークルの右端(295)より右にする（文字に被るため） */
  .mv__mascot {
    /* リボンの下端は copy 基準で約65。重ならないよう下げる */
    inset-block-start: calc(var(--u) * 73);
    inset-inline-start: calc(var(--u) * 289);
    inline-size: calc(var(--u) * 111);
    block-size: calc(var(--u) * 109);
  }

  /* バナーはFVの直下へ。左右に余白を空ける（FVのpadding 10 と揃える）。
     下も空けないと、次のセクションの背景に貼り付いて見える */
  .mv__banner {
    position: static;
    inline-size: auto;
    max-inline-size: calc(100% - var(--u) * 20);
    margin: calc(var(--u) * 12) auto;
    translate: none;
    border-radius: calc(var(--u) * 10);
  }
}


/* =========================================================
   正直屋 おすすめ給湯器
   Figma: node 4001:3481（1920 × 1981.56 / 暖色背景）

   パンくず → 赤いリード → 見出し → 商品カード3列×2行 →
   「コミコミ価格に含まれるもの」の白カード、までがひとつのセクション。
   コミコミの内訳は独立したセクションではなく、このセクションの中身。

   ■ 寸法の基準
   Figmaは1920幅だが、中身（カードのグリッド）は1050幅なので --u は1050基準。
   Figmaの座標から読んだ生値をそのまま `calc(var(--u) * n)` で書ける。

   中身の幅は min(1050px, 90cqw)。1920では1050で頭打ち、
   狭い画面では画面に対する割合を保ったまま縮む。
   ただし読ませる文字があるので clamp() で下限600を持たせ、
   だいたい670px以下では縮小を止める。
   ========================================================= */

.reco {
  container-type: inline-size;
  container-name: reco;
  --reco-w: min(1050px, 90cqw);
  --u: calc(clamp(600px, var(--reco-w), 1050px) / 1050);
  padding-block: calc(var(--u) * 24) calc(var(--u) * 80);
  background: var(--c-cream);
}

:where(.reco, .reco *) { box-sizing: border-box; }
.reco :where(h2, p, ul, li) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
/* common.css の float時代 clearfix（ul::after）が grid の余分なアイテムになるのを防ぐ */
.reco :where(ul, dl)::after { content: none; }

.reco__inner {
  inline-size: var(--reco-w);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: center;
}

/* パンくず。既存の #pan（.sitewrap = 幅1000px固定）をこの中へ移してある。
   背景を暖色にするために、セクションの外に置いたままにできなかった。 */
/* .sitewrap（幅1000px固定・768px以下では padding 0 1.5em）を打ち消す。
   同じ詳細度では勝てないので ID で指定する */
.reco #pan {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  margin-block-end: calc(var(--u) * 34);
  text-align: start;
}
/* 既存の #pan ul { margin: 20px 0 40px } を打ち消す。
   セクション先頭のリセット（.reco :where(ul)）は詳細度で負ける */
.reco #pan ul { margin: 0; }

.reco__sp-br { display: none; }
.reco__lead {
  color: var(--c-red);
  font-size: calc(var(--u) * 27);
  font-weight: 700;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 10);
}
.reco__title {
  color: var(--c-navy);
  font-size: calc(var(--u) * 54);
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 45);
}

/* --- 商品カード ---
   中身は「値段つきの商品画像」1枚。商品一覧ページができたら
   画像ではなくカードのマークアップに置き換わる前提なので、
   1枚ぶんを <li> で独立させてある。 */
.reco__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 35) calc(var(--u) * 37);
  /* Figmaのカードは 325×570（縦横比1.75）だが、いま入れている「値段つきの商品画像」は
     485×1082（同2.23）と縦に長い。1050幅のまま3列にするとカードが725まで伸びて大きすぎる。
     グリッドだけ940に絞ってカードの高さを抑えている（Figmaの570に対して644）。
     商品一覧ページができて本来のカードに差し替えたら 1050 に戻すこと。 */
  inline-size: calc(var(--u) * 940);
  margin-inline: auto;
}

/* --- 石油給湯器 ---
   おすすめ給湯器の下にぶら下がる小見出し。
   .reco__title（54）より一段小さくして、区切りとして線を敷く。 */
.reco__sub {
  inline-size: calc(var(--u) * 940);
  margin: calc(var(--u) * 70) auto calc(var(--u) * 30);
  padding-block-end: calc(var(--u) * 14);
  border-block-end: max(2px, calc(var(--u) * 3)) solid var(--c-navy);
  color: var(--c-navy);
  font-size: max(20px, calc(var(--u) * 36));
  font-weight: 900;
  line-height: 1.3;
}
/* 3枚しか無いので、列が伸びないように3列で固定する */
.reco__grid--oil { grid-template-columns: repeat(3, 1fr); }
/* 枠と角丸は --u（セクション基準）ではなく「カード自身の幅」に紐づける。
   SPはカードが全幅（PCの325より大きい）になるのに --u は下限で止まるので、
   --u で書くと SPだけ枠が細く・角丸が小さく見えてしまう。
   li をコンテナにして cqw で書けば、PC・SPどちらもカードに対する比率が一定になる。
   Figmaの生値: カード325 に対して 枠2 / 角丸10 */
.reco__grid li { container-type: inline-size; container-name: card; }
.reco__grid img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: max(1px, 0.6154cqw) solid var(--c-navy);   /* 2 / 325 */
  border-radius: 3.0769cqw;                          /* 10 / 325 */
}

/* ---------------------------------------------------------
   コミコミ価格に含まれるもの（おすすめ給湯器セクション内の白カード）
   --------------------------------------------------------- */

.kmk {
  inline-size: calc(var(--u) * 760);
  margin: calc(var(--u) * 45) auto 0;
  padding: calc(var(--u) * 50) calc(var(--u) * 35) calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
  background: #fff;
}

.kmk__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  color: var(--c-navy);
  /* 読ませる文字は縮めない。--u をそのまま掛けるとSPで小さくなりすぎる */
  font-size: max(22px, calc(var(--u) * 34));
  font-weight: 900;
  line-height: 1.2;
  margin-block-end: calc(var(--u) * 26);
}
/* 「コミコミ価格」は赤いピル。<mark> の既定の黄色背景は打ち消す */
.kmk__title mark {
  padding: calc(var(--u) * 8) calc(var(--u) * 11);
  border-radius: 0.3em;
  background: var(--c-red);
  color: #fff;
  font-weight: inherit;
}

.kmk__box {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: calc(var(--u) * 65);
  border: calc(var(--u) * 2) solid var(--c-navy);
  border-radius: calc(var(--u) * 8);
  color: var(--c-navy);
  font-size: max(20px, calc(var(--u) * 30));
  font-weight: 900;
  line-height: 1.2;
}

/* ＋ は文字（U+FF0B）だと font-weight を上げても線が細いままなので、
   グラデーション2本で十字を描く。意味は見出しの「含まれるもの」が持っているため
   マークアップ側は空要素＋aria-hidden にしてある。 */
.kmk__plus {
  inline-size: calc(var(--u) * 28);
  block-size: calc(var(--u) * 28);
  margin: calc(var(--u) * 15) auto;
  background:
    linear-gradient(var(--c-navy), var(--c-navy)) center / 100% calc(var(--u) * 5) no-repeat,
    linear-gradient(var(--c-navy), var(--c-navy)) center / calc(var(--u) * 5) 100% no-repeat;
}

.kmk__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 20) calc(var(--u) * 18);
}
.kmk__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  block-size: calc(var(--u) * 55);
  border: calc(var(--u) * 2) solid var(--c-navy);
  border-radius: calc(var(--u) * 8);
  color: var(--c-navy);
  font-size: max(16px, calc(var(--u) * 22));
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.kmk__item img { inline-size: max(20px, calc(var(--u) * 34)); block-size: auto; }

.kmk__note {
  margin-block-start: calc(var(--u) * 20);
  color: var(--c-navy);
  font-size: max(16px, calc(var(--u) * 14));
  line-height: 1.5;
  text-align: end;
}

/* 切替は @media ではなく @container。
   --u が cqw 基準（スクロールバー幅を含まない）なので、
   ビューポート基準の @media だとスクロールバーのぶんだけ判定がずれる。
   .reco は画面幅いっぱいなので、実質の切替点は同じ。 */
@container reco (max-width: 767px) {
  /* 見出しは幅に完全比例させる。--u は狭い画面で下限に張り付くため、
     320px級の端末でも文字だけ大きいままになってしまう。
     cqw で比例させ、上限はPCの値（それ以上大きくしない）。 */
  /* 見出しは幅に完全比例させる（.reco__title と同じ考え方）。
     幅は下のグリッドと同じ 85.6% にそろえる。
     PCの 940 のままだと --u が下限に張り付くぶん、はみ出してしまう。 */
  .reco__sub {
    inline-size: 85.6%;
    font-size: min(5.5cqw, 36px);
    margin-block-start: calc(var(--u) * 50);
  }
  .reco__title { font-size: min(8.23cqw, 54px); }
  /* リード・カード見出しも幅に完全比例させる（見出しと同じ考え方） */
  /* ここは読ませる一文なので16pxを下回らせない（他のリードは英字ラベル） */
  .reco__lead { font-size: clamp(16px, 4.11cqw, 27px); }
  .reco__sp-br { display: inline; }
  .kmk__title { font-size: min(5.87cqw, 34px); }

  /* SPは1列（Figmaのスマホ版どおり）。
     幅は差し替え前の .product-items のカードに合わせた。
     旧カードは中身幅に対して 85.6%（375pxで289 / 767pxで591 と実測、どちらも同じ比率）。
     全幅にすると縦長の画像（485×1082）が伸びて大きくなりすぎる。 */
  .reco__grid { grid-template-columns: 1fr; inline-size: 85.6%; }
  /* 左右の余白を35→24に詰める。見出しが1行に収まらず
     「コミコミ価格」と「に含まれるもの」で改行してしまうため */
  .kmk { inline-size: 100%; padding-inline: calc(var(--u) * 24); }
  /* 文字を16px以上に保つと3列では収まらないので2列にする */
  .kmk__list { grid-template-columns: repeat(2, 1fr); }
  /* 注記は2行になるので左揃え。右揃えのままだと2行目の「す。」だけが
     右端に取り残されて読みにくい（PCは1行なのでFigmaどおり右揃えのまま） */
  .kmk__note { text-align: start; }
  .kmk__title { flex-wrap: wrap; }
}

/* =========================================================
   Voice お客様の声

   ■ 寸法の基準
   中身（カード3列）が1200幅なので --u は1200基準。
   下限は .reco（0.571）より高い 0.75 にしてある。
   本文が16pxと小さいので、0.571まで下げると9pxになって読めない。
   ========================================================= */

.voice {
  container-type: inline-size;
  container-name: voice;
  --voice-w: min(1200px, 90cqw);
  --u: calc(clamp(900px, var(--voice-w), 1200px) / 1200);

  padding-block: calc(var(--u) * 60) calc(var(--u) * 55);
  background: var(--c-why-bg);
}

:where(.voice, .voice *) { box-sizing: border-box; }
.voice :where(h2, p, ul, li) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
/* common.css の float時代 clearfix（ul::after）が grid の余分なアイテムになるのを防ぐ */
.voice :where(ul, dl)::after { content: none; }
/* 既存の a:hover { text-decoration: underline } を打ち消す（詳細度が要る）。
   color は指定しない。ここで inherit を当てると詳細度(0,2,1)が
   .voice__more(0,1,0) に勝ってしまい、ボタンの文字色が既存の #282828 になる。 */
.voice :is(a, a:hover, a:focus, a:visited) { text-decoration: none; }

.voice__inner {
  inline-size: var(--voice-w);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: center;
}

.voice__lead {
  color: var(--c-red);
  font-size: calc(var(--u) * 28);
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 6);
}
.voice__title {
  color: var(--c-navy);
  font-size: calc(var(--u) * 54);
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 40);
}

.voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 34);
}
.voice__card {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 24);
  border: 1px solid #ececec;
  border-radius: calc(var(--u) * 12);
  background: #fff;
  text-align: start;
}

.voice__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  margin-block-end: calc(var(--u) * 16);
}
/* 口コミONEの投稿者アイコン。持っていない口コミではグレーの丸のまま出す */
.voice__avatar {
  flex: none;
  inline-size: calc(var(--u) * 40);
  block-size: calc(var(--u) * 40);
  border-radius: 50%;
  background: #d9d9d9;
}
img.voice__avatar { object-fit: cover; }
/* 読ませる文字は縮めない。Figmaの生値を下限にして、それ以上でだけ大きくする。
   （--u をそのまま掛けるとSPで本文が12pxになり読めなかった） */
.voice__name {
  font-size: max(20px, calc(var(--u) * 20));
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
}
/* 敬称は少し小さく、少し離す。名前と地続きだと
   どこまでが名前なのか読み取りにくいため */
.voice__hono {
  margin-inline-start: 0.15em;
  font-size: 0.78em;
  font-weight: 700;
}
/* 口コミの長さはまちまちなので、カードに収まる行数で切る。
   ここで切れたものにだけ sections.js が「続きを読む」を足し、
   押すと .voice-modal で全文が出る。「長い」の基準＝この行数。 */
.voice__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.75;
  color: #333;
}
/* 本文が切れたカードにだけ出る */
.voice__readmore {
  align-self: flex-start;
  margin-block-start: calc(var(--u) * 10);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: max(16px, calc(var(--u) * 16));
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.voice__readmore:is(:hover, :focus-visible) { text-decoration-thickness: max(2px, calc(var(--u) * 2)); }
/* 星・投稿からの経過・取得元はカードの右下に固定する。本文の長さが違っても
   3枚で高さが揃い、位置も揃う（grid の既定 align-items:stretch ＋ margin-block-start:auto）。
   .voice__card > .voice__stars は取得できなかったときの固定3件（フッタが無い）用 */
.voice__foot,
.voice__card > .voice__stars {
  margin-block-start: auto;
  padding-block-start: calc(var(--u) * 14);
}
.voice__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 10);
}
.voice__card > .voice__stars { align-self: flex-end; }

.voice__stars {
  font-size: max(22px, calc(var(--u) * 22));
  line-height: 1;
  color: #f5b301;
  letter-spacing: calc(var(--u) * 1);
}
/* 5段階のうち付いていないぶんは灰色で残す（★4と★5が見分けられる） */
.voice__stars-off { color: #dcdcdc; }

.voice__date {
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1;
  color: #767676;
  white-space: nowrap;
}
/* どこの口コミか分かるようにロゴを添える（口コミONEのウィジェットと同じ） */
.voice__source {
  flex: none;
  inline-size: max(20px, calc(var(--u) * 20));
  block-size: auto;
}

.voice__more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* SPでも押しやすい大きさを保つ（--u をそのまま掛けると195×39まで縮む） */
  inline-size: max(240px, calc(var(--u) * 260));
  block-size: max(50px, calc(var(--u) * 52));
  margin: calc(var(--u) * 36) auto 0;
  border: max(2px, calc(var(--u) * 2)) solid var(--c-navy);
  border-radius: 999px;
  background: #fff;
  font-size: max(20px, calc(var(--u) * 24));
  font-weight: 900;
  line-height: 1;
  /* ぼかしは使わない。ベタ塗りの影でボタンの厚みを出す。
     沈み込む量と同じ値なので --btn-depth にまとめてある */
  --btn-depth: max(4px, calc(var(--u) * 5));
  box-shadow: 0 var(--btn-depth) 0 var(--c-navy);
  transition: background-color .12s, color .12s, box-shadow .12s, translate .12s;
}
/* アローは文字の隣ではなく右端に固定する（Figmaどおり）。
   文字はボタンの中央に置いたままにしたいので absolute で抜く。 */
.voice__more svg {
  position: absolute;
  inset-inline-end: calc(var(--u) * 16);
  inline-size: max(9px, calc(var(--u) * 10));
  block-size: auto;
}
/* 既存の a / a:hover の色指定に勝てるよう :is() で詳細度を足す */
.voice__more:is(:link, :visited) { color: var(--c-navy); }

/* 厚みのぶんだけ沈めて影を消す＝実際に押し込まれたように見せる */
.voice__more:is(:hover, :focus-visible) {
  background: var(--c-navy);
  color: #fff;
  translate: 0 var(--btn-depth);
  box-shadow: 0 0 0 var(--c-navy);
}

@media (prefers-reduced-motion: reduce) {
  .voice__more { transition: none; }
}

@container voice (max-width: 767px) {
  /* SPは1列（Figmaのスマホ版どおり） */
  .voice__list { grid-template-columns: 1fr; }
  /* 見出しは幅に完全比例させる。--u は狭い画面で下限に張り付くため、
     320px級の端末でも文字だけ大きいままになってしまう。
     cqw で比例させ、上限はPCの値（それ以上大きくしない）。 */
  .voice__title { font-size: min(8.8cqw, 54px); }
  /* リード・カード見出しも幅に完全比例させる（見出しと同じ考え方） */
  .voice__lead { font-size: min(5.6cqw, 28px); }
}

/* ---------------------------------------------------------
   口コミの全文（dialog）

   body 直下に出すので .voice のコンテナ問い合わせは効かない。
   代わりに --u: 1px を置いて、中で使い回す .voice__head / .voice__foot が
   Figmaの生値どおりの大きさで出るようにしている。
   --------------------------------------------------------- */
.voice-modal {
  /* 既存の common.css に * { margin: 0 } があり、dialog を中央に置く
     ブラウザ既定の margin: auto が消される。ここで戻す */
  margin: auto;
  --u: 1px;
  inline-size: min(680px, calc(100vw - 2rem));
  max-block-size: min(calc(100dvh - 3rem), 42rem);
  padding: 0;
  border: max(2px, 0.12em) solid var(--c-navy);
  border-radius: 12px;
  background: #fff;
  color: #333;
  /* body 直下に置くので、既存CSSの中央揃えを継承してしまう */
  text-align: start;
  overflow: visible;
}
:where(.voice-modal, .voice-modal *) { box-sizing: border-box; }
.voice-modal :where(p, div) { margin: 0; padding: 0; }

.voice-modal__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-block-size: inherit;
  padding: 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.voice-modal__text {
  font-size: 16px;
  line-height: 1.9;
  /* 口コミは段落を空行で分けてくることがあるので、そのまま見せる */
  white-space: pre-line;
}
/* 間隔は .voice-modal__inner の gap で付けるので、カード用の余白は消す */
.voice-modal__head .voice__head { margin-block-end: 0; }
/* カードから持ってきた星・日付・ロゴ。カードと同じで右に寄せる */
.voice-modal__foot .voice__foot {
  margin-block-start: 0;
  padding-block-start: 0;
}

.voice-modal__close {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: max(2px, 0.12em) solid var(--c-navy);
  border-radius: 50%;
  background: #fff;
  color: var(--c-navy);
  cursor: pointer;
}
.voice-modal__close svg { inline-size: 14px; block-size: 14px; }
.voice-modal__close:is(:hover, :focus-visible) {
  background: var(--c-navy);
  color: #fff;
}

/* 開くときだけ、後ろのページが動かないようにする */
html.is-voice-modal { overflow: hidden; }

/* 出入りをつける。display / overlay も allow-discrete で繋がないと
   閉じるときに待たずに消えてしまう */
.voice-modal {
  opacity: 0;
  translate: 0 8px;
  transition: opacity .18s, translate .18s, overlay .18s allow-discrete, display .18s allow-discrete;
}
.voice-modal[open] { opacity: 1; translate: 0 0; }
@starting-style { .voice-modal[open] { opacity: 0; translate: 0 8px; } }

.voice-modal::backdrop {
  background: rgb(11 22 56 / 0);
  transition: background .18s, overlay .18s allow-discrete, display .18s allow-discrete;
}
.voice-modal[open]::backdrop { background: rgb(11 22 56 / .55); }
@starting-style { .voice-modal[open]::backdrop { background: rgb(11 22 56 / 0); } }

@media (prefers-reduced-motion: reduce) {
  .voice-modal, .voice-modal::backdrop { transition: none; }
}

@media (max-width: 767px) {
  .voice-modal__inner { gap: 16px; padding: 24px 20px; }
  .voice-modal__close { inset-block-start: -12px; inset-inline-end: -12px; inline-size: 36px; block-size: 36px; }
}

/* =========================================================
   Why Us だから選ばれる3つの正直

   ■ 寸法の基準
   中身（カード3列）が1346幅なので --u は1346基準。
   本文16pxが基準なので下限は .voice と同じ考え方（1000/1346 ≒ 0.74）。
   読ませる文字には max() で下限を入れる（[[text-size-floor]]）。
   ========================================================= */

.why {
  container-type: inline-size;
  container-name: why;
  --why-w: min(1346px, 90cqw);
  --u: calc(clamp(1000px, var(--why-w), 1346px) / 1346);
  --c-why-fig: #ebf4fe;         /* 図版の地色。支給SVGの背景 rect と同じ値 */
  --c-why-rule: #e3e3e3;        /* 見出しと本文を分ける線 */
  --c-why-line: #cddcf5;        /* カードの枠 */

  padding-block: calc(var(--u) * 30) calc(var(--u) * 55);
  background: var(--c-cream);
}

:where(.why, .why *) { box-sizing: border-box; }
.why :where(h2, h3, p, ul, li) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
/* common.css の float時代 clearfix（ul::after）が grid の余分なアイテムになるのを防ぐ */
.why :where(ul, dl)::after { content: none; }

.why__inner {
  inline-size: var(--why-w);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: center;
}

.why__lead {
  color: var(--c-red);
  font-size: max(18px, calc(var(--u) * 26));
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 4);
}
.why__title {
  color: var(--c-navy);
  font-size: max(26px, calc(var(--u) * 46));
  font-weight: 900;
  line-height: 1.25;
  margin-block-end: calc(var(--u) * 30);
}
/* 「3」と「正直」だけ大きくする */
.why__title em { font-style: normal; font-size: max(32px, calc(var(--u) * 58)); }

.why__sp-br { display: none; }

.why__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 40);
}
.why__card {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 16);
  border: max(1px, calc(var(--u) * 2)) solid var(--c-why-line);
  border-radius: calc(var(--u) * 12);
  background: #fff;
}

/* 図版は3枚とも同じ高さに揃える。支給画像の縦横比が微妙に違う（324×195 / 486×290）ので
   aspect-ratio で箱を固定し、中身は contain で収める。地色は画像の背景と同じ */
.why__fig {
  aspect-ratio: 324 / 195;
  background: var(--c-why-fig);
  border-radius: calc(var(--u) * 4);
  overflow: hidden;
}
.why__fig img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.why__card-title {
  margin-block: calc(var(--u) * 12) calc(var(--u) * 8);
  color: var(--c-navy);
  font-size: max(17px, calc(var(--u) * 25));
  font-weight: 900;
  line-height: 1.5;
}
.why__card-title em { font-style: normal; color: var(--c-red); }

.why__card-text {
  /* 見出しとの間に区切り線を引く */
  padding-block-start: calc(var(--u) * 8);
  border-block-start: 1px solid var(--c-why-rule);
  color: #333;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.7;
  text-align: start;
}

@container why (max-width: 767px) {
  /* 見出しは幅に完全比例させる。--u は狭い画面で下限に張り付くため、
     320px級の端末でも文字だけ大きいままになってしまう。
     cqw で比例させ、上限はPCの値（それ以上大きくしない）。 */
  .why__title { font-size: min(9.11cqw, 46px); }
  .why__title em { font-size: min(11.48cqw, 58px); }
  /* リード・カード見出しも幅に完全比例させる（見出しと同じ考え方） */
  .why__lead { font-size: min(5.15cqw, 26px); }
  .why__card-title { font-size: min(5.35cqw, 25px); }

  /* SPは1列（Figmaのスマホ版どおり）。見出しは2行に折る */
  .why__list { grid-template-columns: 1fr; gap: calc(var(--u) * 30); }
  .why__sp-br { display: inline; }
}

/* =========================================================
   Works 全国で多数の施工実績

   カードの中身は公開API（/api/v1/examples）から取り、sections.js が描画する。
   カルーセルはライブラリを使わず scroll-snap で作ってある。

   ■ 寸法の基準
   中身（カード3列）が1260幅なので --u は1260基準。
   ========================================================= */

.works {
  container-type: inline-size;
  container-name: works;
  --works-w: min(1260px, 90cqw);
  --u: calc(clamp(940px, var(--works-w), 1260px) / 1260);
  --c-works-body: #f2f6fd;      /* カード下部の淡い地 */
  --c-works-before: #8c8c8c;    /* 施工前ラベル */
  --c-works-after: #2d73d5;     /* 施工後ラベル */

  padding-block: calc(var(--u) * 60) calc(var(--u) * 60);
  background: var(--c-why-bg);
}

:where(.works, .works *) { box-sizing: border-box; }
.works :where(h2, p, ul, li, figure, figcaption) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
/* common.css の float時代 clearfix（ul::after）が flex の余分なアイテムになるのを防ぐ */
.works :where(ul, dl)::after { content: none; }
/* 既存の a:hover { text-decoration: underline } を打ち消す（詳細度が要る）。
   color はここで指定しない（[[button-style]] の注意点） */
.works :is(a, a:hover, a:focus, a:visited) { text-decoration: none; }

.works__inner {
  inline-size: var(--works-w);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: center;
}

.works__lead {
  color: var(--c-red);
  font-size: max(18px, calc(var(--u) * 28));
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 6);
}
.works__sp-br { display: none; }
.works__title {
  color: var(--c-navy);
  font-size: max(28px, calc(var(--u) * 54));
  font-weight: 900;
  line-height: 1.25;
  margin-block-end: calc(var(--u) * 36);
}

/* --- カルーセル本体 ---
   Splide のようなライブラリは使わず、横スクロール＋スクロールスナップで作る。
   矢印とドットは scrollTo するだけなので、JSが失敗しても指で流せる。 */
.works__track {
  display: flex;
  gap: calc(var(--u) * 32);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* スクロールバーは出さない（矢印とドットで操作させる） */
  scrollbar-width: none;
  /* 影が上下で切れないよう余白を持たせる */
  padding-block: calc(var(--u) * 4);
}
.works__track::-webkit-scrollbar { display: none; }

/* マウスで掴んで動かせる。ドラッグ中はスナップを切らないと指定位置に留まれない */
.works__track { cursor: grab; }
.works__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* 画像・リンク・文字を掴むと、こちらのドラッグではなく
   ブラウザ標準のドラッグや範囲選択が始まってしまう */
.works__track { user-select: none; }
.works__track :is(img, a) { -webkit-user-drag: none; }

.works__card {
  flex: 0 0 calc((100% - var(--u) * 64) / 3);
  scroll-snap-align: start;
}
.works__link {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border: max(2px, calc(var(--u) * 2)) solid var(--c-navy);
  border-radius: calc(var(--u) * 12);
  background: #fff;
  overflow: hidden;
  transition: translate .15s, box-shadow .15s;
}
/* ぼかしは使わずベタ塗りの影。ホバーで沈む（[[button-style]]） */
.works__link {
  --card-depth: max(3px, calc(var(--u) * 4));
  box-shadow: 0 var(--card-depth) 0 var(--c-navy);
}
.works__link:is(:hover, :focus-visible) {
  translate: 0 var(--card-depth);
  box-shadow: 0 0 0 var(--c-navy);
}

/* 工事種別の帯 */
.works__cat {
  padding-block: calc(var(--u) * 12);
  background: var(--c-navy);
  color: #fff;
  font-size: max(16px, calc(var(--u) * 22));
  font-weight: 900;
  line-height: 1.3;
}

/* --- 施工前 / 施工後 --- */
/* 本文の長さでカードの高さが変わっても写真が潰れないようにする */
.works__shots { display: flex; flex: none; }
.works__shot {
  flex: 1 1 50%;
  min-inline-size: 0;
}
.works__shot img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* ラベルは写真に重ねず、下に帯として置く */
.works__tag {
  padding-block: calc(var(--u) * 5);
  color: #fff;
  font-size: max(16px, calc(var(--u) * 17));
  font-weight: 700;
  line-height: 1.4;
}
.works__tag--before { background: var(--c-works-before); }
.works__tag--after  { background: var(--c-works-after); }

/* --- カード下部 --- */
.works__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 12) calc(var(--u) * 20) calc(var(--u) * 18);
  background: var(--c-works-body);
}
.works__date {
  color: #7a7a7a;
  font-size: max(13px, calc(var(--u) * 15));
  line-height: 1.4;
  margin-block-end: calc(var(--u) * 8);
}
.works__product {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 6);
  background: #fff;
  color: var(--c-navy);
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 12);
}
.works__maker { font-size: max(16px, calc(var(--u) * 16)); }
.works__model { font-size: max(16px, calc(var(--u) * 19)); }

.works__place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  /* 住所が長いときは下に折る */
  flex-wrap: wrap;
  margin-block-start: auto;
  color: #333;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.4;
}
.works__place-label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  color: var(--c-red);
  font-weight: 700;
}
.works__place-label img { inline-size: max(10px, calc(var(--u) * 12)); block-size: auto; }

/* --- 矢印とドット --- */
.works__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 20);
  margin-block-start: calc(var(--u) * 26);
}
.works__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: max(40px, calc(var(--u) * 52));
  block-size: max(40px, calc(var(--u) * 52));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  cursor: pointer;
  transition: opacity .15s;
}
.works__arrow svg { inline-size: max(9px, calc(var(--u) * 12)); block-size: auto; }
.works__arrow--prev svg { rotate: 180deg; }
.works__arrow:disabled { opacity: .3; cursor: default; }

.works__dots {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}
.works__dot {
  inline-size: max(9px, calc(var(--u) * 11));
  block-size: max(9px, calc(var(--u) * 11));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d3d3d3;
  cursor: pointer;
  /* 現在位置は色だけでなく少し大きくする。scale なら並びがずれない */
  transition: background-color .15s, scale .15s;
}
.works__dot[aria-current="true"] { background: var(--c-navy); scale: 1.35; }

/* --- もっと見る（Voiceと同じ作り） --- */
.works__more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: max(240px, calc(var(--u) * 260));
  block-size: max(50px, calc(var(--u) * 52));
  margin: calc(var(--u) * 30) auto 0;
  border: max(2px, calc(var(--u) * 2)) solid var(--c-navy);
  border-radius: 999px;
  background: #fff;
  font-size: max(20px, calc(var(--u) * 24));
  font-weight: 900;
  line-height: 1;
  --btn-depth: max(4px, calc(var(--u) * 5));
  box-shadow: 0 var(--btn-depth) 0 var(--c-navy);
  transition: background-color .12s, color .12s, box-shadow .12s, translate .12s;
}
.works__more:is(:link, :visited) { color: var(--c-navy); }
.works__more svg {
  position: absolute;
  inset-inline-end: calc(var(--u) * 16);
  inline-size: max(9px, calc(var(--u) * 10));
  block-size: auto;
}
.works__more:is(:hover, :focus-visible) {
  background: var(--c-navy);
  color: #fff;
  translate: 0 var(--btn-depth);
  box-shadow: 0 0 0 var(--c-navy);
}

@media (prefers-reduced-motion: reduce) {
  .works__track { scroll-behavior: auto; }
  .works__link, .works__more, .works__arrow, .works__dot { transition: none; }
}

@container works (max-width: 767px) {
  /* 見出しは幅に完全比例させる。--u は狭い画面で下限に張り付くため、
     320px級の端末でも文字だけ大きいままになってしまう。
     cqw で比例させ、上限はPCの値（それ以上大きくしない）。 */
  .works__title { font-size: min(9.95cqw, 54px); }
  /* リード・カード見出しも幅に完全比例させる（見出しと同じ考え方） */
  .works__lead { font-size: min(5.57cqw, 28px); }
  .works__cat { font-size: min(4.38cqw, 22px); }

  /* SPは1枚見せ。左右に前後のカードをのぞかせる（Figmaのスマホ版どおり）。
     .works__inner（90cqw）の中に収めるとカードが画面の半分程度まで細くなるので、
     カルーセルだけ画面幅いっぱいに広げてから内側にのぞかせぶんの余白を取る。
     scroll-padding も合わせないとスナップ位置がずれる。 */
  .works__track {
    inline-size: 100cqw;
    margin-inline: calc((100cqw - 100%) / -2);
    gap: calc(var(--u) * 16);
    padding-inline: 11cqw;
    scroll-padding-inline-start: 11cqw;
  }
  .works__card { flex: 0 0 78cqw; }

  .works__nav { gap: max(20px, calc(var(--u) * 14)); }
  .works__dots { gap: max(12px, calc(var(--u) * 12)); }
  .works__sp-br { display: inline; }
  /* 「施工地域」と地名が1行に収まるよう間隔を詰める（長い地名は折り返す） */
  .works__place { gap: calc(var(--u) * 6); }
}

/* =========================================================
   Process 交換工事の流れ

   左に見出し、右にカルーセル。カルーセルは画面の右端まで流して
   次のカードをのぞかせる（Figmaどおり）。矢印とドットはPCでは上、SPでは下。
   中身は /flow/（給湯器の交換工事の流れ）の7ステップ。

   ■ 寸法の基準
   Figmaのフレーム（1920）そのままが基準。左165 / 見出し欄420 / 間75 の位置関係を保つ。
   ========================================================= */

.process {
  container-type: inline-size;
  container-name: process;
  --u: calc(clamp(1100px, 100cqw, 1920px) / 1920);

  padding-block: calc(var(--u) * 60);
  background: var(--c-cream);
}

:where(.process, .process *) { box-sizing: border-box; }
.process :where(h2, h3, p, ul, li, figure) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
/* common.css の float時代 clearfix（ul::after）が flex の余分なアイテムになるのを防ぐ */
.process :where(ul, dl)::after { content: none; }

.process__inner {
  display: grid;
  grid-template-columns: calc(var(--u) * 420) 1fr;
  column-gap: calc(var(--u) * 75);
  align-items: center;
  /* 右のカルーセルは画面の右端まで使うので、左だけ余白を取る */
  padding-inline-start: calc(var(--u) * 165);
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: start;
}

/* --- 左の見出し欄 --- */
.process__lead {
  color: var(--c-red);
  font-size: max(18px, calc(var(--u) * 28));
  font-weight: 900;
  line-height: 1.3;
}
.process__title {
  color: var(--c-navy);
  font-size: max(28px, calc(var(--u) * 54));
  font-weight: 900;
  line-height: 1.25;
  margin-block-end: calc(var(--u) * 24);
}
.process__note {
  color: #333;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.8;
  margin-block-end: calc(var(--u) * 22);
}

/* 所要時間の箱 */
.process__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 6);
  background: var(--c-navy);
  color: #fff;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}
.process__time-label { font-size: max(16px, calc(var(--u) * 18)); }
.process__time-value { font-size: max(16px, calc(var(--u) * 20)); }
.process__time-value em { font-style: normal; font-size: max(20px, calc(var(--u) * 26)); }

/* --- 右のカルーセル --- */
.process__carousel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  /* トラックがはみ出しても親の幅を押し広げないようにする */
  min-inline-size: 0;
}
/* PCは矢印2つを左に並べ、その右にドットを置く（見本どおり）。
   マークアップは 前へ → ドット → 次へ の順のままにして、
   PCではドットだけ order で後ろへ回す。SPは並び替えずに 前へ ドット 次へ にする。 */
.process__nav {
  order: -1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
}
.process__dots { order: 1; margin-inline-start: calc(var(--u) * 8); }

.process__track {
  display: flex;
  gap: calc(var(--u) * 20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* ベタ影が下で切れないよう少しだけ余白を持たせる */
  padding-block-end: calc(var(--u) * 6);
  cursor: grab;
  user-select: none;
}
.process__track::-webkit-scrollbar { display: none; }
.process__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.process__track :is(img, a) { -webkit-user-drag: none; }

.process__card {
  /* Figmaは1920で380。--u をそのまま掛けると1200px級で238まで細くなり
     見出しが折り返すので、300pxを下限にする（枚数が減るだけで済む） */
  flex: 0 0 max(300px, calc(var(--u) * 380));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: max(2px, calc(var(--u) * 2)) solid var(--c-navy);
  border-radius: calc(var(--u) * 10);
  background: #fff;
  overflow: hidden;
}

/* 番号と見出しの帯 */
.process__bar {
  /* 番号の正方形は「帯の高さ」を幅にも使う。
     aspect-ratio は flex で引き伸ばされた高さから幅を出せない場合があり
     （iOS Safari で長方形になった）、高さと幅を同じ式から計算する。
     帯の高さ ＝ 見出しの行の高さ ＋ 上下パディング。 */
  --step-fs: max(18px, calc(var(--u) * 21));
  --no-size: calc(var(--step-fs) * 1.35 + var(--u) * 24);

  display: flex;
  align-items: stretch;
  text-align: start;
  background: var(--c-navy);
  color: #fff;
}
/* 番号だけ地色を白に抜く。帯の高さに合わせた正方形にする
   （align-items: stretch で高さが決まるので、aspect-ratio で幅が出る） */
.process__no {
  align-self: center;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--no-size);
  block-size: var(--no-size);
  background: #fff;
  color: var(--c-navy);
  font-size: max(24px, calc(var(--u) * 24));
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.process__step {
  flex: 1;
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  font-size: var(--step-fs);
  font-weight: 700;
  line-height: 1.35;
}

/* 写真。全ステップ1枚ずつで、素材の縦横比（1366×887）に合わせて箱を固定する。
   支給の2枚（03・05）は2コマを1枚に合成したもので、比率もほぼ同じ */
.process__figs {
  /* カードは高さが揃うので、本文が長いカードでは図版がflexに潰される。
     flex: none で縦横比のぶんの高さを必ず確保する */
  flex: none;
  aspect-ratio: 1366 / 887;
  overflow: hidden;
}
.process__figs img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.process__text {
  padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 20);
  color: #333;
  font-size: max(16px, calc(var(--u) * 15));
  line-height: 1.8;
  /* SPは .process__inner を中央寄せにしているので、本文は明示的に左揃えへ戻す */
  text-align: left;
}

/* --- 矢印とドット（施工実績と同じ見た目） --- */
.process__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: max(40px, calc(var(--u) * 52));
  block-size: max(40px, calc(var(--u) * 52));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  cursor: pointer;
}
.process__arrow svg { inline-size: max(9px, calc(var(--u) * 12)); block-size: auto; }
.process__arrow--prev svg { rotate: 180deg; }

.process__dots {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}
.process__dot {
  inline-size: max(9px, calc(var(--u) * 11));
  block-size: max(9px, calc(var(--u) * 11));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c3cee4;
  cursor: pointer;
  /* 現在位置は色だけでなく少し大きくする。scale なら並びがずれない */
  transition: background-color .15s, scale .15s;
}
.process__dot[aria-current="true"] { background: var(--c-navy); scale: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .process__track { scroll-behavior: auto; }
  .process__dot { transition: none; }
}

/* --- タブレット以下 ---
   2列（左見出し・右カルーセル）のままだと、--u が下限(0.573)に張り付くぶん
   カードが218px程度まで細くなり、見出しが折り返して窮屈になる。
   1列に積み替えて、カルーセルは画面幅いっぱいを使う。 */
@container process (max-width: 1100px) {
  /* 見出し類は幅に完全比例させる（狭い画面で文字だけ大きいまま残らないように） */
  .process__title { font-size: min(8.25cqw, 54px); margin-block-end: calc(var(--u) * 16); }
  .process__lead { font-size: min(4.8cqw, 28px); }
  .process__bar { --step-fs: min(4.8cqw, 21px); }

  .process__inner {
    grid-template-columns: 1fr;
    row-gap: calc(var(--u) * 24);
    padding-inline: 5cqw;
    text-align: center;
  }
  /* 塊は中央に置きつつ、折り返した文字は左揃えにする */
  .process__note {
    display: table;
    margin-inline: auto;
    margin-block-end: calc(var(--u) * 18);
    text-align: left;
  }

  /* .process__inner に収めるとカードが細いままなので、カルーセルだけ画面幅いっぱいへ。
     scroll-padding も合わせないとスナップ位置がずれる */
  .process__track {
    inline-size: 100cqw;
    margin-inline: calc((100cqw - 100%) / -2);
    padding-inline: 8cqw;
    scroll-padding-inline-start: 8cqw;
    gap: max(20px, calc(var(--u) * 16));
  }
  /* タブレットは2枚見せ */
  .process__card { flex: 0 0 40cqw; border-radius: max(14px, calc(var(--u) * 10)); }

  /* 矢印とドットは下・中央。ドットは矢印の間に戻す */
  .process__nav { order: 0; justify-content: center; gap: max(20px, calc(var(--u) * 14)); }
  .process__dots { order: 0; margin-inline-start: 0; gap: max(12px, calc(var(--u) * 12)); }
}

/* --- スマホ ---
   1枚見せ。左右に前後のカードをのぞかせる（Figmaのスマホ版どおり） */
@container process (max-width: 767px) {
  .process__track {
    padding-inline: 11cqw;
    scroll-padding-inline-start: 11cqw;
  }
  .process__card { flex: 0 0 78cqw; }
}

/* =========================================================
   Warranty 正直屋独自の安心保証で工事後も安心！

   青いグラデーションの帯。左に見出し、右に保証メダル2枚、
   その下にボタンを中央配置（Figmaどおり）。

   ■ 寸法の基準
   Figmaのフレーム（1920）そのままが基準。中身は 415〜1500 の 1085 幅。
   ========================================================= */

.wty {
  container-type: inline-size;
  container-name: wty;
  /* --u は画面幅ではなく「中身の幅」を基準にする。
     画面幅基準だと、左右に余白があるのに中身だけ縮む。
     生値はFigmaの中身幅1085を基準に書いてある。 */
  --wty-w: min(1085px, 90cqw);
  --u: calc(var(--wty-w) / 1085);
  /* 金文字のグラデーションと影（Figmaの実値。斜め・中央だけ明るい3ストップ） */
  --c-gold-1: #ffbf47;
  --c-gold-2: #fff8a6;
  --c-gold-3: #ffbf47;
  --c-gold-shadow: #16307d;
  /* ボタンのベタ影（青地でも沈んで見えるよう紺より暗く） */
  --c-btn-shadow: #0d1c4d;

  padding-block: max(32px, calc(var(--u) * 60));
  background: linear-gradient(105deg, #4a6bec 0%, #3554e4 40%, #2138cc 100%);
}

:where(.wty, .wty *) { box-sizing: border-box; }
.wty :where(h2, p, ul, li) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
.wty :where(ul, dl)::after { content: none; }
/* 既存の a:hover { text-decoration: underline } を打ち消す（詳細度が要る）。
   color はここで指定しない（ボタン側の指定に勝ってしまうため） */
.wty :is(a, a:hover, a:focus, a:visited) { text-decoration: none; }

.wty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 26);
  inline-size: var(--wty-w);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: start;
}
/* テキストとメダルの行。内容ぶんの幅で並べて中央に寄せる
   （列を伸ばすとテキストとメダルの間にぽっかり空く） */
.wty__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 40);
}

.wty__lead {
  color: #fff;
  font-size: max(18px, calc(var(--u) * 28));
  font-weight: 900;
  line-height: 1.3;
  margin-block-end: calc(var(--u) * 4);
}

/* 金文字。背景のグラデーションを文字型に切り抜いて塗り、
   影はぼかし無しのベタ影を右下に1つだけ落とす（縁取りではない）。

   縁取りに -webkit-text-stroke は使えない。background-clip: text の背景は
   縁取りより下に描かれるため、縁取りが金色を覆って文字が紺に潰れる
   （paint-order を付けても直らない）。影は filter で付ける。
   filter は描画結果の外側に掛かるのでグラデーションを隠さない。 */
.wty__title {
  --shadow: max(3px, calc(var(--u) * 4));
  font-size: max(26px, calc(var(--u) * 46));
  font-weight: 900;
  /* 2行の見出しなので行間は詰める（1.45だと行の間が空きすぎる） */
  line-height: 1.2;
  background: linear-gradient(135deg,
    var(--c-gold-1) 0%, var(--c-gold-2) 49%, var(--c-gold-3) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(var(--shadow) var(--shadow) 0 var(--c-gold-shadow));
  margin-block-end: calc(var(--u) * 8);
}

.wty__note {
  /* 見出しの1行目「正直屋独自の安心保証」（10文字 × 46）と同じ幅で折り返させる。
     指定しないと親の幅いっぱいまで伸びて、見出しより長い行になる。 */
  /* min(100%, …) にすると百分率が不定になり、親（.wty__body）の
     max-content 算出時に効かず、テキスト列が折り返さない幅まで広がる。
     実寸だけで指定する。 */
  max-inline-size: calc(var(--u) * 465);
  color: #fff;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.6;
}

/* --- メダル2枚 --- */
.wty__medals {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
}
.wty__medals img {
  display: block;
  inline-size: calc(var(--u) * 265);
  block-size: auto;
}

/* --- ボタン --- */
.wty__btn {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: max(260px, calc(var(--u) * 300));
  block-size: max(52px, calc(var(--u) * 56));
  border: max(2px, calc(var(--u) * 3)) solid #fff;
  border-radius: 999px;
  background: var(--c-navy);
  font-size: max(20px, calc(var(--u) * 26));
  font-weight: 900;
  line-height: 1;
  /* ぼかし無しのベタ影で厚みを出す（[[button-style]]） */
  --btn-depth: max(4px, calc(var(--u) * 5));
  box-shadow: 0 var(--btn-depth) 0 var(--c-btn-shadow);
  transition: background-color .12s, color .12s, box-shadow .12s, translate .12s;
}
.wty__btn:is(:link, :visited) { color: #fff; }
.wty__btn svg {
  position: absolute;
  inset-inline-end: calc(var(--u) * 22);
  inline-size: max(9px, calc(var(--u) * 11));
  block-size: auto;
}
/* 厚みのぶんだけ沈めて影を消す＝実際に押し込まれたように見せる */
.wty__btn:is(:hover, :focus-visible) {
  background: #fff;
  color: var(--c-navy);
  translate: 0 var(--btn-depth);
  box-shadow: 0 0 0 var(--c-btn-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .wty__btn { transition: none; }
}

@container wty (max-width: 767px) {
  /* 見出しは幅に完全比例させる。--u は狭い画面で下限に張り付くため、
     320px級の端末でも文字だけ大きいままになってしまう。
     cqw で比例させ、上限はPCの値（それ以上大きくしない）。 */
  .wty__title { font-size: min(7.64cqw, 46px); }
  /* リード・カード見出しも幅に完全比例させる（見出しと同じ考え方） */
  .wty__lead { font-size: min(4.8cqw, 28px); }

  /* SPは縦に積んで中央寄せ */
  .wty__inner {
    gap: calc(var(--u) * 20);
    text-align: center;
  }
  /* SPは縦積み */
  .wty__row { flex-direction: column; gap: calc(var(--u) * 20); }
  .wty__title { line-height: 1.4; }
  /* 塊は中央に置きつつ、折り返した文字は左揃えにする */
  .wty__note {
    display: table;
    margin-inline: auto;
    text-align: left;
  }
  .wty__medals { gap: 4cqw; }
  /* SPは --u が小さくなるので画面幅基準にする */
  .wty__medals img { inline-size: 42cqw; }
  .wty__note { max-inline-size: 100%; }
}

/* =========================================================
   Column お申込の流れ

   01〜06のステップカードを縦に並べ、間に▼を置く。
   最後に「お問い合わせ前に、3つだけご確認ください」の枠。

   ■ 寸法の基準
   Figmaのフレーム（1920）が基準。カードの幅は900。
   見出し・リードは幅に完全比例（[[text-size-floor]] の見出しの扱い）。
   ========================================================= */

.apply {
  container-type: inline-size;
  container-name: apply;
  /* このセクションは中身の幅を700pxで頭打ちにしているので、
     --u も画面幅ではなく「中身の幅」を基準にする。
     画面幅基準のままだと、箱は700pxで止まっているのに文字だけ1920基準で
     大きくなり続け、見出しや注記が折り返してしまう。
     生値はデザインの中身幅900を基準に書いてある。 */
  --apply-w: min(700px, 90cqw);
  --u: calc(var(--apply-w) / 900);
  --c-apply-box: #eaf2fd;       /* チェック項目の淡い青 */
  --c-apply-note: #f2919b;      /* 最後のピンクの帯 */
  --c-apply-line: #192e77;      /* カードの枠（影の代わり） */

  padding-block: calc(var(--u) * 60);
  background: var(--c-why-bg);
}

:where(.apply, .apply *) { box-sizing: border-box; }
.apply :where(h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
.apply :where(ul, dl, ol)::after { content: none; }
.apply :is(a, a:hover, a:focus, a:visited) { text-decoration: none; }

.apply__inner {
  inline-size: var(--apply-w);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: center;
}

/* リード・見出し・サブの間隔は margin ではなく gap で持たせる */
.apply__heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  margin-block-end: calc(var(--u) * 30);
}
.apply__lead {
  color: var(--c-red);
  font-size: min(4.8cqw, 28px);
  font-weight: 900;
  line-height: 1.3;
}
.apply__title {
  color: var(--c-navy);
  font-size: min(8.25cqw, 54px);
  font-weight: 900;
  line-height: 1.25;
}
.apply__sub {
  color: #4a4a4a;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.6;
}

/* --- ステップ --- */
.apply__steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
}
/* ▼はカードの一部にせず、カードと並ぶ独立した要素として置く。
   こうすると .apply__steps と .apply__step の gap で▼の上下に等しく余白が入る。 */
.apply__step {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
/* カードとカードの間の▼。最後のカードの後には出さない */
.apply__step:not(:last-child)::after {
  content: "";
  inline-size: max(22px, calc(var(--u) * 34));
  block-size: max(14px, calc(var(--u) * 21));
  margin-inline: auto;
  background: var(--c-navy);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.apply__card {
  position: relative;
  padding: calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 30);
  border: 0.15em solid var(--c-apply-line);
  border-radius: calc(var(--u) * 16);
  background: #fff;
  text-align: start;
}
/* 番号はカードの左上に食い込ませる。位置は割合で置き、
   自分の中心を基準にずらす（大きさが変わっても食い込み方が変わらない） */
.apply__no {
  position: absolute;
  left: 2%;
  top: 0.5em;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 番号は見出しと同じ扱い。下限を持たせず幅に比例させる */
  inline-size: min(11.7cqw, 55px);
  block-size: min(11.7cqw, 55px);
  border-radius: 50%;
  background: var(--c-red);
  color: #fff;
  font-size: min(4.8cqw, 30px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

.apply__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}
.apply__step-title {
  color: var(--c-navy);
  font-size: min(8cqw, 35px);
  font-weight: 900;
  line-height: 1.3;
}
.apply__tag {
  padding: calc(var(--u) * 4) calc(var(--u) * 14);
  border-radius: 999px;
  background: var(--c-red);
  color: #fff;
  font-size: max(16px, calc(var(--u) * 18));
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* アイコンは本文の左に置く。カードの高さが変わっても位置が動かないよう絶対配置 */
/* アイコンと本文はflexの1行。
   絶対配置＋アイコン幅ぶんのpaddingで揃える手もあるが、
   数値を手で合わせる必要があって崩れやすいので使わない。
   align-items: center なら本文の行数が変わってもアイコンは縦中央のまま。 */
.apply__body {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}
.apply__icon {
  flex: none;
  inline-size: max(52px, calc(var(--u) * 120));
  block-size: auto;
}
.apply__main {
  flex: 1;
  min-inline-size: 0;
  /* 見出しと本文の間隔は margin ではなく gap で持たせる */
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}
.apply__text {
  color: #333;
  font-size: max(16px, calc(var(--u) * 15));
  text-align: left;
}
.apply__text em { font-style: normal; color: var(--c-red); }
.apply__text a { color: var(--c-navy); text-decoration: underline; }

/* --- お問い合わせ前の確認 --- */
.apply__check {
  margin-block-start: calc(var(--u) * 40);
  border: 0.15em solid var(--c-apply-line);
  border-radius: calc(var(--u) * 12);
  background: #fff;
  overflow: hidden;
}
.apply__br { display: none; }
.apply__check-head {
  /* ! の大きさを行数から出すため、見出しの文字サイズを変数に持たせる */
  --head-fs: max(18px, calc(var(--u) * 38));
  --bang-lines: 1.2;
  display: flex;
  align-items: center;
  /* 塊は中央に置き、文字は左揃え。折り返しても2行目が中央に寄らない */
  justify-content: center;
  text-align: left;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 14);
  background: var(--c-navy);
  color: #fff;
  font-size: var(--head-fs);
  font-weight: 700;
  line-height: 1.2;
}
/* 「3」だけ少し大きく */
.apply__three { font-style: normal; font-size: 1.25em; }
/* ! のアイコン。大きさは「見出しの文字サイズ × 行数ぶん」で出す */
.apply__bang {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: calc(var(--head-fs) * var(--bang-lines));
  block-size: calc(var(--head-fs) * var(--bang-lines));
  border-radius: 50%;
  background: #ffd24a;
  color: var(--c-navy);
  /* 円の大きさに合わせる。--head-fs だけを見ていると円だけ大きくなって中身が小さいままになる */
  font-size: calc(var(--head-fs) * var(--bang-lines) * 0.62);
  line-height: 1;
}

.apply__check-body { padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 30); }
.apply__check-intro {
  color: #333;
  font-size: max(16px, calc(var(--u) * 15));
  line-height: 1.8;
  margin-block-end: calc(var(--u) * 16);
  text-align: left;
}

.apply__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 16);
  margin-block-end: calc(var(--u) * 22);
}
.apply__point {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 8);
  background: var(--c-apply-box);
  text-align: left;
}
.apply__point-title {
  color: var(--c-red);
  font-size: max(20px, calc(var(--u) * 22));
  font-weight: 700;
  line-height: 1.4;
  margin-block-end: calc(var(--u) * 4);
}
.apply__point-text {
  color: #333;
  font-size: max(16px, calc(var(--u) * 15));
  line-height: 1.7;
}

/* 図は「どの項目の説明か」が分かるよう、見出しを付けて項目番号と結びつける。
   ただ並べるだけだと、写真が❶❷❸のどれを指しているのか伝わらない。 */
.apply__figs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  margin-block-end: calc(var(--u) * 22);
}
.apply__fig-label {
  margin-block-end: calc(var(--u) * 10);
  color: #333;
  font-size: max(16px, calc(var(--u) * 22));
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
.apply__fig-label em { font-style: normal; color: var(--c-red); }

.apply__types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 16);
}
/* 見出しの帯と写真をひとまとめに角丸にする */
.apply__type {
  border-radius: max(8px, calc(var(--u) * 10));
  overflow: hidden;
}
.apply__type-name {
  display: block;
  padding: calc(var(--u) * 6);
  background: var(--c-navy);
  color: #fff;
  font-size: max(16px, calc(var(--u) * 18));
  font-weight: 700;
  line-height: 1.4;
}
.apply__type img { display: block; inline-size: 100%; block-size: auto; }
.apply__label {
  inline-size: min(100%, calc(var(--u) * 520));
  margin-inline: auto;
}
.apply__label img { display: block; inline-size: 100%; block-size: auto; }

.apply__note {
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 6);
  background: var(--c-apply-note);
  color: #fff;
  font-size: max(18px, calc(var(--u) * 18));
  font-weight: 700;
  line-height: 1.6;
}
/* 帯は全幅のまま、中の文字だけ塊ごと中央に置いて左揃えにする */
.apply__note span {
  display: table;
  margin-inline: auto;
  text-align: left;
}

@container apply (max-width: 767px) {
  .apply__card { padding: 1.5em; }

  /* SPは1列で余白が広いので、番号・アイコン・見出しを一回り大きくする。
     いずれも幅に比例（下限は持たせない） */
  .apply__no {
    /* SPは番号が大きいぶん、はみ出しすぎないよう内側へ寄せる */
    left: 7%;
    inline-size: min(16.5cqw, 70px);
    block-size: min(16.5cqw, 70px);
    font-size: min(6.9cqw, 29px);
  }
  .apply__icon { inline-size: min(21.3cqw, 96px); }

  /* アイコンは見出しの左ではなく上へ。中央に置く */
  .apply__body {
    flex-direction: column;
    gap: calc(var(--u) * 8);
  }
  .apply__main { inline-size: 100%; }
  /* SPは横に並べず縦積み。タグを見出しの上に出す
     （マークアップは 見出し→タグ の順なので column-reverse で入れ替える） */
  /* SPは見出しと本文の間を広めに取る */
  .apply__main { gap: calc(var(--u) * 30); }
  .apply__head {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 8);
    text-align: center;
  }

  /* 見出しは2行に折って左揃え。! は2行ぶんの大きさにして左に置く */
  .apply__br { display: inline; }
  .apply__check-head {
    /* line-height 1.2 × 2行 */
    --bang-lines: 2.4;
  }

  /* チェック項目は縦積み、写真は3枚横並びのまま */
  .apply__points { grid-template-columns: 1fr; }
  .apply__types { gap: calc(var(--u) * 12); }
}

/* =========================================================
   Column お役立ちコラム

   microCMSの記事3件へのカード。既存CSSに .column / .column-wrap があるため、
   クラス名は .tips にしてある（.column だと衝突する）。

   ■ 寸法の基準
   Figmaのフレーム（1920）が基準。中身（カード3列）は1222幅。
   ========================================================= */

.tips {
  container-type: inline-size;
  container-name: tips;
  --u: calc(clamp(1100px, 100cqw, 1920px) / 1920);
  --c-tips-shadow: #c9d7ee;     /* 淡い青の背景に載るカードのベタ影 */

  padding-block: calc(var(--u) * 60);
  background: var(--c-cream);
}

:where(.tips, .tips *) { box-sizing: border-box; }
.tips :where(h2, h3, p, ul, li, figure) { margin: 0; padding: 0; list-style: none; border: 0; background: none; }
.tips :where(ul, dl)::after { content: none; }
/* 既存の a:hover { text-decoration: underline } を打ち消す（詳細度が要る）。
   color はここで指定しない（ボタン側の指定に勝ってしまうため） */
.tips :is(a, a:hover, a:focus, a:visited) { text-decoration: none; }

.tips__inner {
  /* 幅は --u ではなく実寸で頭打ちにする（--u 基準だと余白があるのに縮む） */
  inline-size: min(1222px, 90cqw);
  margin-inline: auto;
  /* 既存CSSからの text-align 継承に左右されないよう明示する */
  text-align: center;
}

/* リード・見出し・サブの間隔は margin ではなく gap で持たせる */
.tips__heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  margin-block-end: calc(var(--u) * 34);
}
.tips__lead {
  color: var(--c-red);
  font-size: min(4.8cqw, 28px);
  font-weight: 900;
  line-height: 1.3;
}
.tips__title {
  color: var(--c-navy);
  font-size: min(8.25cqw, 54px);
  font-weight: 900;
  line-height: 1.25;
}
.tips__sub {
  color: #4a4a4a;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.6;
}

/* --- 記事カード --- */
.tips__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 38);
}
.tips__card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 14);
  background: #fff;
  /* ぼかしは使わない。ベタ塗りの影で厚みを出す */
  --card-depth: max(4px, calc(var(--u) * 5));
  box-shadow: 0 var(--card-depth) 0 var(--c-tips-shadow);
  text-align: start;
  transition: translate .12s, box-shadow .12s;
}
/* 厚みのぶんだけ沈めて影を消す＝押し込まれたように見せる */
.tips__card:is(:hover, :focus-visible) {
  translate: 0 var(--card-depth);
  box-shadow: 0 0 0 var(--c-tips-shadow);
}

/* サムネイルはmicroCMSの1200×630。切り抜かずそのまま出す（3枚とも同じ比率） */
.tips__thumb {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: calc(var(--u) * 8);
}

.tips__date {
  margin-block: calc(var(--u) * 12) calc(var(--u) * 6);
  padding-inline: calc(var(--u) * 8);
  color: #9aa2ad;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.4;
}
.tips__text {
  padding: 0 calc(var(--u) * 8) calc(var(--u) * 12);
  color: #333;
  font-size: max(16px, calc(var(--u) * 16));
  line-height: 1.6;
}

/* --- もっと見る（お客様の声・施工実績と同じ作り） --- */
.tips__more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: max(240px, calc(var(--u) * 260));
  block-size: max(50px, calc(var(--u) * 52));
  margin: calc(var(--u) * 34) auto 0;
  border: max(2px, calc(var(--u) * 2)) solid var(--c-navy);
  border-radius: 999px;
  background: #fff;
  font-size: max(20px, calc(var(--u) * 24));
  font-weight: 900;
  line-height: 1;
  --btn-depth: max(4px, calc(var(--u) * 5));
  box-shadow: 0 var(--btn-depth) 0 var(--c-navy);
  transition: background-color .12s, color .12s, box-shadow .12s, translate .12s;
}
.tips__more:is(:link, :visited) { color: var(--c-navy); }
.tips__more svg {
  position: absolute;
  inset-inline-end: calc(var(--u) * 16);
  inline-size: max(9px, calc(var(--u) * 10));
  block-size: auto;
}
.tips__more:is(:hover, :focus-visible) {
  background: var(--c-navy);
  color: #fff;
  translate: 0 var(--btn-depth);
  box-shadow: 0 0 0 var(--c-navy);
}

@media (prefers-reduced-motion: reduce) {
  .tips__card, .tips__more { transition: none; }
}

@container tips (max-width: 767px) {
  /* SPは1列。見出し類は幅に完全比例させる */
  .tips__list { grid-template-columns: 1fr; gap: calc(var(--u) * 30); }
  .tips__card { padding: max(8px, calc(var(--u) * 8)); border-radius: max(12px, calc(var(--u) * 14)); }
}

/* =========================================================
   共通の問い合わせブロック（includes/inquire.blade.php）

   base.min.css の .pref_page .article_body .contact_wrap に
   margin-bottom: 3em が付いている。あいだに何か続くページでは
   その余白でよいが、**ページの最後に来ると**フッターとのあいだに
   白い帯として出てしまう（給湯器ページは旧セクションを消して
   これが最後になった）。最後のときだけ余白を消す。

   sections.css は base.min.css より後に読まれるので、
   同じ詳細度（0,3,0）で勝てる。
   ========================================================= */
.article_body > .contact_wrap:last-child { margin-block-end: 0; }

/* 上側も同じ。リニューアルしたセクション（暖色や寒色の地色）の直後に来ると、
   3em の余白が「白い帯」として見えてしまう。
   本番で tips（暖色）と問い合わせ（紺）のあいだに48pxの白帯が出た。
   後ろに続きがあるページ（＝最後ではない）では従来どおり余白を残す。 */
.article_body > .contact_wrap:last-child { margin-block-start: 0; }

/* =========================================================
   トップの「お取り扱い商品」

   base.min.css は4列（width: calc((100% - 9em) / 4)）。
   商品が9つになり 4+4+1 で最後の1枚だけ取り残されるため、
   PCは5列にして 5+4 に収める。カードは少し小さくなる。

   ・SP（768px以下）の2列はそのまま。sections.css は base.min.css より
     後に読まれるので、範囲を769px以上に限らないと2列指定を潰してしまう。
   ・gap を 3em → 2em に詰めて、5列でもカード幅を確保する。
   ========================================================= */
@media screen and (min-width: 769px) {
  .lineup .lineup_items { gap: 2em; }
  .lineup .lineup_item { width: calc((100% - 8em) / 5); }
  /* 5列だと1枚あたりが狭くなるので、商品名を少しだけ小さくする */
  .lineup_item_text p { font-size: 1.45em; }
}