/* ==========================================================================
   price-b.css — 料金ページ（/price/index-b.html）専用のスタイル

   このファイルは **price/index-b.html からのみ読み込む。**
   ほかのページ（トップ・サービス・案A）には影響しない。

   下層ページの土台（トークン／地色／FV／2カラム＋追従目次／セクション共通パーツ）は
   service-b.css の S-0〜S-4 が持っている（引き継ぎメモ4-18）。
   ここには **料金ページ固有のもの＝料金表** だけを書く。

   使っているトークン（すべてカスケード上で定義済み）：
     --b-title(#025589) / --b-title-dark(#176ebc) / --b-title-light(#489ad8)
     --b-line(#afafaf) / --b-bg-tint(#e9f2fa) / --c-text-sub / --c-ink
     --fw-title / --fw-bold / --fw-label / --radius / --t-fast

   命名は案Bの接頭辞ルールに合わせて b- を付ける（`.b-price-table`）。
   **トップの料金カードは `.b-price*`（home-b.css）。名前が近いので混同しないこと。**
   あちらは <dl> のカード、こちらは <table>。別物。
   ========================================================================== */

/* ==========================================================================
   P-1. 面積別の料金表

   「料金・スペックは画像化しない」がこの案件の中核（CLAUDE.md 1章）。
   金額は必ずHTMLテキストの <table> で持つ。金額はトップ（index-b.html の
   .b-price）と同じ値で、原典は docs/04_content.md 3章。
   ========================================================================== */

/* 表そのもの。白ベタで薄い水色の地から浮かせる（S-4 の白カードと同じ考え方）。
   角丸のはみ出しを border-collapse と両立させるため overflow:hidden を掛ける。 */
.b-price-table {
  width: 100%;
  max-width: 640px;
  margin-top: clamp(20px, 2.8vw, 36px);
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid var(--b-line);
  border-radius: var(--radius);
  overflow: hidden;
  /* セル内で数字が縦にそろうように、本文フォントの等幅数字を使う */
  font-variant-numeric: tabular-nums;
}

/* 見出し行（面積／料金）。濃い青の帯に白文字。 */
.b-price-table thead th {
  padding: clamp(10px, 1.3vw, 16px) clamp(14px, 1.8vw, 24px);
  background-color: var(--b-title-dark);
  color: #fff;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-align: left;
}

.b-price-table thead th:last-child {
  text-align: right;
}

/* 本体の各行 */
.b-price-table tbody th,
.b-price-table tbody td {
  padding: clamp(11px, 1.4vw, 17px) clamp(14px, 1.8vw, 24px);
  border-top: 1px solid var(--b-line);
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.5;
}

/* 面積（行見出し）。左に置く。太字にしすぎない。 */
.b-price-table tbody th {
  font-weight: var(--fw-label);
  color: var(--c-ink);
  text-align: left;
  white-space: nowrap;
}

/* 料金。右ぞろえ。金額の数字だけ大きく・濃い青にする。 */
.b-price-table tbody td {
  text-align: right;
  color: var(--c-text-sub);
  white-space: nowrap;
}

.b-price-table tbody td strong {
  margin-right: 0.15em;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: var(--fw-title);
  color: var(--b-title-dark);
  letter-spacing: 0.01em;
}

/* 1行おきに薄い水色を敷いて、面積と金額の対応を追いやすくする */
.b-price-table tbody tr:nth-child(even) th,
.b-price-table tbody tr:nth-child(even) td {
  background-color: var(--b-bg-tint);
}

/* 単価の行（50㎡以降 1㎡あたり）だけ、区分に補足を添える。
   HTMLで <span class="b-price-table__unit"> を入れた場合に効く。 */
.b-price-table__unit {
  display: block;
  margin-top: 0.2em;
  font-size: 0.8em;
  font-weight: var(--fw-body);
  color: var(--c-text-sub);
  white-space: normal;
}

/* 375px でも横スクロールを出さないための保険。
   区分が長い行（50㎡以降 1㎡あたり）で効いてくる。 */
@media (max-width: 429px) {
  .b-price-table tbody th,
  .b-price-table tbody td {
    padding-inline: clamp(10px, 3vw, 14px);
  }
  .b-price-table tbody th {
    white-space: normal;
  }
}

/* ==========================================================================
   P-2. 2つの料金表を横並びにする（2026-08-25 指示）

   もとは #wet / #semidry の2セクションに分かれていたが、クライアント指示で
   1セクションに統合し、ウェット方式／セミドライ方式の表を横並びにした。

   767px以下：縦積み（本文カラムが狭く、2列にすると1表あたり160px台まで潰れるため）
   768px以上：2カラム。各カラムは name / desc / table / note の4段。
   ========================================================================== */

.b-price-cols {
  display: grid;
  gap: clamp(28px, 3.4vw, 48px);
  margin-top: clamp(24px, 3vw, 40px);
}

/* アンカー（#wet / #semidry）は各カラムに付いている。
   飛んだときに見出しがヘッダーの下に隠れないよう、ここにも scroll-margin を持たせる。 */
.b-price-col {
  scroll-margin-top: calc(var(--b-hd) + 16px);
}

/* 方式名（h3）。セクションタイトル（h2・交互の青）とは分け、濃い青の一色にする。
   h2 の1文字おきの色分け（service-b.js）は .b-svc-sec__title だけが対象なので、
   ここには掛からない。 */
.b-price-col__name {
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  color: var(--b-title-dark);
}

/* 方式の説明文。本文サイズ。 */
.b-price-col__desc {
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.9;
}

/* 横並びのときは表をカラム幅いっぱいに広げる（1枚のときの 640px 上限は外す） */
.b-price-cols .b-price-table {
  max-width: none;
}

@media (min-width: 768px) {
  .b-price-cols {
    grid-template-columns: 1fr 1fr;
    /* 2カラムの高さをそろえる（stretch）。ウェット（6行）が背を決め、
       セミドライ（3行）はそれに合わせて伸びる。伸びたぶんの下端に、
       絶対配置のお問い合わせ導線（.b-price-cta）を固定する（P-3）。 */
    align-items: stretch;
  }

  /* 2つの表の上端（thead）を左右でそろえる。
     カラムを flex 縦並びにして、説明文（.b-price-col__desc）に
     min-height を与える。方式名は1行で左右そろうので、
     説明文の高さをそろえれば表の開始位置がそろう。
     文章量が変わったら、この min-height を見直すこと。

     カラムを flex 縦並びにしておくことで、末尾のCTA（.b-price-cta）が
     flex-grow で残りの空きを埋め、ウェット列と下辺がそろう（P-3）。 */
  .b-price-col {
    display: flex;
    flex-direction: column;
  }
  .b-price-col__desc {
    min-height: calc(1.9em * 4);
  }
}

/* ==========================================================================
   P-3. お問い合わせ導線（2026-08-25 指示。ログ169で組み方を作り直した）

   ウェット（6行）とセミドライ（3行）の高さの差で右下にできる空きに置く。
   セミドライ列の末尾（.b-price-col#semidry の中）にある。

   **下辺そろえの作り（ログ169）**
   当初はCTAの中身を多く積んでいたため、実ブラウザ（実フォント）ではCTAが空きより高くなり、
   右列が左列より下にはみ出した（ヘッドレスでは揃って見えていた）。対処は2点：
     1. **CTAをコンパクトにした**（説明文を1行に／電話と受付時間を1行に／余白を圧縮）。
        中身の高さがウェット6行とセミドライ3行の差（＝空き）にほぼ収まるようにする。
     2. P-2 で列を stretch（ウェット列が背を決める）にし、768px以上で CTA に flex-grow を与える。
        CTAは残りの空きを埋め、**下辺がウェット列とそろう**。中身は上下中央。
   これで空きの大きさが多少ぶれても、はみ出さず・注記と重ならずに下辺がそろう。
   767px以下：縦積み。flex-grow は効かず、注記のあとに自然に続く1枚のCTAになる。
   ========================================================================== */

.b-price-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 2026-08-25 指示「CTAの縦幅を減らして左カラムの注記の下辺とそろえる」。
     余白・行間・ボタンをまとめて詰めて、intrinsic な高さを 217→約150px（1440px時）にした。
     下の flex:1 で残りの空きを埋めるので、intrinsic が空きより小さければ下辺がそろう。 */
  gap: clamp(3px, 0.42vw, 6px);
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: clamp(8px, 0.85vw, 13px) clamp(16px, 2vw, 28px);
  border-radius: var(--radius-lg);
  /* 白い表・薄い水色の地から立ち上がるよう、濃い青にする。

     **2026-08-26 指示：塗りを共通ボタンと同じグラデーション（--b-btn-grad）にした。**
     「詳しく見る」などのピルボタンと同じ、左下が濃く右上が明るい2色の斜めグラデ。
     定義は home-b.css の .theme-b（このページも読み込む）。
     background-color は非対応時のフォールバックとして残している。

     **中の白ボタンは影響を受けない**（下の .b-price-cta .b-svc-btn で
     background-image: none を明示済み）。
     白文字とのコントラストは、明るい側の #1c74b6 で 4.97:1（WCAG AA 4.5:1 を満たす）。 */
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
  text-align: center;
}

/* 横並び（768px以上）のとき、CTAを flex で伸ばして残りの空きを埋め、
   下辺をウェット列にそろえる。CTAはコンパクトなので、空きより小さければ
   中身を上下中央にして埋め、はみ出さない。縦積みでは自然な高さで流す。 */
@media (min-width: 768px) {
  .b-price-cta {
    flex: 1 1 auto;
    /* 注記との間隔。ここを詰めたぶんCTAが使える高さが増え、下辺がそろいやすくなる */
    margin-top: clamp(8px, 0.95vw, 15px);
  }
}

.b-price-cta__lead {
  font-family: var(--ff-title);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-title);
  line-height: 1.2;
}

.b-price-cta__text {
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: var(--fw-label);
  line-height: 1.4;
  /* 白地に対して少しだけ落ち着かせる */
  color: rgba(255, 255, 255, 0.9);
}

/* 濃い青の箱の上なので、共通ボタン（塗り＝青／文字＝白）のままだと沈む。
   ここだけ白ボタン＋青文字に反転し、ホバーで枠線だけの白抜きにする。 */
.b-price-cta .b-svc-btn {
  margin-top: clamp(1px, 0.3vw, 4px);
  /* 押しやすさの下限44pxは守りつつ、共通ボタンより上下を詰める */
  min-height: 44px;
  padding-block: 0;
  border-color: #fff;
  background-color: #fff;
  /* 2026-08-25：共通ボタンの塗りがグラデーション（--b-btn-grad）になったため、
     **地を白にするだけではグラデが上に残る。** 明示的に消すこと。 */
  background-image: none;
  color: var(--b-title);
}

.b-price-cta .b-svc-btn:hover {
  border-color: #fff;
  background-color: transparent;
  background-image: none;
  color: #fff;
}

/* 電話番号と受付時間は1行に収める（高さを抑えて、上の注記と重ならないように）。
   767px以下で入りきらないときだけ受付時間を次の行へ折り返す。 */
.b-price-cta__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em 0.6em;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-label);
  line-height: 1.5;
}

.b-price-cta__tel a {
  font-weight: var(--fw-bold);
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}

.b-price-cta__hours {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* ==========================================================================
   P-4. 法人のお客様へ：セールス文（左）＋画像プレースホルダー（右）
   （2026-08-25 指示）

   767px以下：縦積み（文章 → 画像枠）。
   768px以上：左に文章、右に画像枠を置く。
   ========================================================================== */

.b-biz {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(18px, 2.4vw, 32px);
}

@media (min-width: 768px) {
  .b-biz {
    /* 文章を広め、画像枠をやや小さめに */
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    align-items: start;
    gap: clamp(28px, 3.4vw, 52px);
  }
}

.b-biz__lead {
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: var(--fw-bold);
  line-height: 1.9;
  color: var(--c-ink);
}

.b-biz__text {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 1.95;
}

/* 箇条書き。頭に青いチェックを付ける */
.b-biz__points {
  margin-top: clamp(14px, 1.8vw, 24px);
  display: grid;
  gap: clamp(8px, 1vw, 13px);
}

.b-biz__points li {
  position: relative;
  padding-left: 1.7em;
  font-size: clamp(13px, 1.05vw, 15px);
  /* 2026-08-26 指示「チェックマークの後のテキストを太字に」で
     --fw-label（500）→ --fw-bold（700）。 */
  font-weight: var(--fw-bold);
  line-height: 1.7;
}

.b-biz__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15em;
  height: 1.15em;
  background-color: var(--b-title-dark);
  /* 白いチェックマークを中央に抜く */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat;
  border-radius: 4px;
}

/* **行そのものが 700 になったので、強調はさらに1段上げる（2026-08-26）。**
   もとは「本文 500・強調 700」で差が付いていたが、上の指示で行が 700 になり、
   このままでは太さの差が消えて色（--c-ink）だけの違いになる。
   Noto Sans JP は 400/500/700/900 を読み込んでいるので 900 が使える。 */
.b-biz__points strong {
  font-weight: var(--fw-title);
  color: var(--c-ink);
}

/* 画像プレースホルダー（白ベタ＋黒枠）。写真受領後に <img> へ差し替える。 */
.b-biz__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--c-ink);
  border-radius: var(--radius);
  background-color: #fff;
}

.b-biz__figure-note {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}

/* 差し替え用：写真が入ったら .b-biz__figure を <img class="b-biz__img"> に置き換える。
   縦横比は写真に合わせる。念のため枠と角丸だけ引き継ぐ指定を用意しておく。 */
.b-biz__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

/* ==========================================================================
   P-5. 法人セクション下部のお問い合わせ導線（2026-08-25 指示）

   TOPのクリーニング例の案内ボックス（home-b.css の .b-cases__note）と同じ見た目。
   あちらは全幅セクション用に width:85% 等が入っているので流用せず、
   料金ページの本文カラム幅に合わせてここで作り直す。
   アイコン左・テキスト中・ボタン右。768px未満は縦積み（アイコンは隠す）。
   ========================================================================== */

.b-biz-cta {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  margin-top: clamp(32px, 4vw, 60px);
  padding: clamp(16px, 2vw, 32px) clamp(18px, 2.2vw, 36px);
  border: 1px solid var(--b-line);
  border-radius: clamp(16px, 2.2vw, 32px);
  background-color: #fff;
}

.b-biz-cta__icon {
  flex-shrink: 0;
  width: clamp(64px, 7vw, 104px);
  height: auto;
}

.b-biz-cta__text {
  flex: 1;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  color: #353535;
}

.b-biz-cta .b-svc-btn {
  flex-shrink: 0;
  margin-top: 0;
}

/* 767px以下：縦に積む。アイコンは場所を取るだけなので隠す（TOPと同じ扱い）。
   案内文の <br> も切って自動の折り返しに任せる。 */
@media (max-width: 767px) {
  .b-biz-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .b-biz-cta__icon {
    display: none;
  }
  .b-biz-cta__br {
    display: none;
  }
  .b-biz-cta .b-svc-btn {
    align-self: center;
  }
}

/* ==========================================================================
   P-6. 他社との比較表（2026-08-25 データ受領）

   5列（比較項目／ウォッシュマン／大手清掃サービス／専門業者／比較サイト掲載業者）。
   狭い画面では枠内だけ横スクロール（.b-compare__scroll）。ページ全体には横スクロールを出さない。
   左端の「比較項目」列は sticky で固定し、横スクロール中も見えるようにする。
   ウォッシュマン列（.is-own）は青系の地＋太字で強調する。
   ========================================================================== */

.b-compare__scroll {
  margin-top: clamp(20px, 2.8vw, 36px);
  overflow-x: auto;
  /* iOS で慣性スクロールを効かせる */
  -webkit-overflow-scrolling: touch;
  /* スクロールバーのぶんで角が欠けないよう、わずかに下余白 */
  padding-bottom: 2px;
}

.b-compare-table {
  width: 100%;
  /* これより狭い枠では横スクロールになる（5列が潰れない下限） */
  min-width: 660px;
  border-collapse: collapse;
  background-color: #fff;
  font-size: clamp(12px, 1vw, 15px);
}

.b-compare-table th,
.b-compare-table td {
  padding: clamp(9px, 1.1vw, 14px) clamp(10px, 1.2vw, 18px);
  border: 1px solid var(--b-line);
  text-align: center;
  line-height: 1.5;
  vertical-align: middle;
}

/* 見出し行（各社名） */
.b-compare-table thead th {
  background-color: var(--b-title-dark);
  color: #fff;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* 左端列（比較項目） */
.b-compare-table tbody th {
  text-align: left;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  white-space: nowrap;
  /* sticky で content が透けないよう不透明にする */
  background-color: var(--c-bg-alt);
}

/* 左端列を sticky にして、横スクロール中も見えるようにする。
   border-collapse: collapse では sticky セルの境界線が消えることがあるので、
   右側の区切りは box-shadow で補う。 */
.b-compare-table th[scope="row"],
.b-compare-table thead .b-compare-table__corner {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--b-line);
}

.b-compare-table thead .b-compare-table__corner {
  /* ヘッダーの角は本文セルより前面に */
  z-index: 2;
  background-color: var(--b-title-dark);
}

/* ウォッシュマン列（自社）の強調 */
.b-compare-table thead th.is-own {
  /* 他社ヘッダー（--b-title-dark）より濃い自社色で差をつける */
  background-color: var(--b-title);
}

.b-compare-table td.is-own {
  background-color: var(--b-bg-tint);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* 他社セルの本文は少し落ち着かせる */
.b-compare-table tbody td {
  color: var(--c-text-sub);
}

/* ==========================================================================
   P-7. 料金シミュレーター（2026-08-25）

   方式切り替え（ボタン）＋ 入力（縦×横cm・複数枚追加）＋ 結果（概算・お問い合わせ導線）。
   768px以上：入力と結果を左右に。767px以下：縦積み。
   動きは price-b.js。
   ========================================================================== */

.b-sim {
  margin-top: clamp(20px, 2.8vw, 36px);
}

/* --- 方式の切り替えボタン --- */
.b-sim__methods {
  display: flex;
  gap: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(16px, 2vw, 26px);
}

.b-sim__method {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0.6em 1em;
  border: 1px solid var(--b-title);
  border-radius: 999px;
  background-color: #fff;
  color: var(--b-title);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}

/* 2026-08-26 指示：選択中の塗りを共通ボタンと同じグラデーション（--b-btn-grad）に。
   **選択が外れると .is-active ごと消えるので、background-image を戻す指定は要らない**
   （基本形の .b-sim__method は background-image を持たない）。
   グラデーションは transition で補間されないため、切り替えは一瞬で入れ替わる。 */
.b-sim__method.is-active {
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
}

.b-sim__method:not(.is-active):hover {
  background-color: var(--b-bg-tint);
}

/* --- 入力・結果の2枚 --- */
.b-sim__grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 768px) {
  .b-sim__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.b-sim__panel {
  padding: clamp(18px, 2.2vw, 32px);
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

/* --- 入力 --- */
.b-sim__fields {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 14px);
}

.b-sim__field {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
}

.b-sim__num {
  width: clamp(72px, 8vw, 104px);
  padding: 0.45em 0.6em;
  border: 1px solid var(--b-line);
  border-radius: var(--radius);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  text-align: right;
  /* スピナーは残す（増減しやすい）。iOS Safari で拡大しないよう16px以上を確保 */
}

.b-sim__num:focus-visible {
  outline: 2px solid var(--b-title);
  outline-offset: 1px;
}

.b-sim__times {
  align-self: center;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: var(--fw-bold);
  color: var(--c-text-sub);
}

.b-sim__unit {
  color: var(--c-text-sub);
}

.b-sim__formula {
  margin-top: clamp(12px, 1.6vw, 20px);
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--c-text-sub);
}

.b-sim__formula strong {
  font-size: 1.15em;
  font-weight: var(--fw-title);
  color: var(--b-title-dark);
}

.b-sim__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(14px, 1.8vw, 22px);
}

.b-sim__add {
  min-height: 44px;
  padding: 0.55em 1.4em;
  border: 1px solid var(--b-title);
  border-radius: 999px;
  background-color: var(--b-title);
  color: #fff;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.b-sim__add:not(:disabled):hover {
  background-color: #fff;
  color: var(--b-title);
}

.b-sim__add:disabled {
  border-color: var(--b-line);
  background-color: var(--b-line);
  color: #fff;
  cursor: not-allowed;
}

.b-sim__clear {
  min-height: 44px;
  padding: 0.55em 1.2em;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  background-color: #fff;
  color: var(--c-text-sub);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.b-sim__clear:hover {
  border-color: var(--c-text-sub);
  color: var(--c-ink);
}

.b-sim__added {
  margin-top: clamp(10px, 1.2vw, 14px);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: var(--fw-label);
  color: var(--b-title-dark);
}

/* --- 結果 --- */
.b-sim__result {
  display: flex;
  flex-direction: column;
  /* 地色から少し立たせて「結果」を目立たせる */
  background-color: var(--b-bg-tint);
  border-color: var(--b-title-light);
}

.b-sim__result-head {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  color: var(--b-title-dark);
}

.b-sim__area {
  margin-top: clamp(6px, 0.8vw, 10px);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
}

.b-sim__area strong {
  font-size: 1.3em;
  font-weight: var(--fw-title);
  color: var(--c-ink);
}

.b-sim__price {
  margin-top: clamp(4px, 0.6vw, 8px);
  line-height: 1.1;
  color: var(--b-title-dark);
}

.b-sim__price strong {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: var(--fw-title);
  letter-spacing: 0.01em;
}

/* お見積り表示のときは文字を少し小さく（「お見積り」は長いため） */
.b-sim.is-quote .b-sim__price strong {
  font-size: clamp(24px, 3.2vw, 38px);
}

.b-sim__yen {
  margin-left: 0.15em;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: var(--fw-bold);
}

.b-sim.is-quote .b-sim__yen,
.b-sim.is-quote .b-sim__tax {
  display: none;
}

.b-sim__tax {
  margin-left: 0.3em;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
}

.b-sim__tier {
  margin-top: clamp(6px, 0.8vw, 10px);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.b-sim__breakdown {
  margin-top: clamp(4px, 0.6vw, 8px);
  font-size: clamp(11px, 0.95vw, 13px);
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* お問い合わせボタンは結果パネルの下端に寄せる */
.b-sim__contact {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
}

@media (min-width: 768px) {
  .b-sim__contact {
    margin-top: clamp(16px, 2vw, 24px);
  }
}

/* ==========================================================================
   P-8. お支払い方法（2026-08-25）

   現金／銀行振込／請求書払い（法人）の3枚。
   768px以上：3カラム。767px以下：縦積み。
   請求書払い（--biz）は法人向けの主役なので少し強調する。
   ========================================================================== */

.b-pay {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(20px, 2.8vw, 36px);
}

/* 6枚。560〜767pxは2列、768px以上は3列（2段）、それ未満は1列。 */
@media (min-width: 560px) {
  .b-pay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    /* 2026-08-25 指示「カード高さをすべて合わせる」。
       既定の auto だと段ごとに高さが決まり、1段目と2段目で差が出る（162/243px）。
       1fr にすると全段が一番高い中身にそろう。 */
    grid-auto-rows: 1fr;
  }
}

@media (min-width: 768px) {
  .b-pay {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.b-pay__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

/* 請求書払い（法人向け）は主役。青枠＋薄い水色地で立たせる。 */
.b-pay__item--biz {
  border-color: var(--b-title-light);
  background-color: var(--b-bg-tint);
}

.b-pay__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
  border-radius: 50%;
  background-color: var(--b-title-dark);
  color: #fff;
}

.b-pay__icon svg {
  width: 56%;
  height: 56%;
}

.b-pay__body {
  display: block;
}

.b-pay__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: var(--fw-title);
  color: var(--c-ink);
}

/* 「法人様向け」バッジ */
.b-pay__badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background-color: var(--b-title);
  color: #fff;
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.b-pay__desc {
  display: block;
  margin-top: clamp(6px, 0.8vw, 10px);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* ==========================================================================
   P-9. モバイル（767px以下）の作り込み（2026-08-26 指示）

   サービスページの S-16（`service-b.css`）と同じ考え方で、
   **モバイルだけの調整をここに集約している。** 各コンポーネントの近くに散らすと、
   モバイル向けの調整なのか元の設計なのかが後から見分けられなくなるため。
   **戻すときはこのブロックごと消せばよい。**

   色・太さ・改行位置の変更は幅に関係ないので、ここではなく各コンポーネントの
   定義側に直接書いてある（P-3 の塗り／P-4 のチェック項目／P-7 の方式ボタン）。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 1. FVのイラストと作業員を出さない ---
     指示「FVの部屋画像、アニメーションを非表示」。サービスページと同じ扱い。

     **⚠️ 必ず .b-price-page から書くこと。**
     同じ .b-svc-hero__media が /service/ /company/ /contact/ /tokushoho/ /privacy/ にもあり、
     それらも service-b.css を読む。囲いを外すと他ページのFVまで消える
     （サービスページ側は .b-service-page で同じ囲いをしている）。 */
  .b-price-page .b-svc-hero__media {
    display: none;
  }

  /* --- 2. ウェット方式とセミドライ方式のあいだを広げる ---
     指示「ウェット方式とセミドライ方式の間のマージンを少し増やす」。
     767px以下は2つの方式が縦に積まれるので、この gap が方式同士の距離になる。
     28px → 44px（390px時）。

     **768px以上には当てていない。** あちらは横並びで、この gap は
     左右の間隔になる（縦に詰まって見える問題は起きていない）。 */
  .b-price-cols {
    gap: clamp(44px, 6.5vw, 52px);
  }

  /* --- 3. お見積り無料カードと「法人のお客様へ」のあいだを広げる ---
     指示「お見積り無料カードと法人のお客様へセクションのマージンを少し増やす」。

     この2つの距離は、セクション同士の間隔（--b-svc-sec-gap＝390pxで75px）そのもの。
     **ここだけ足したいので、方式のセクションに margin-bottom を足している。**
     変数のほうを触ると5ページ全部が動く（08_handoff.md 10-2b）。

     セクションの指定は :has() で「CTAカードを含むセクション」として書いている。
     このページに .b-price-cta は1つだけ。id を増やさずに済む。

     **⚠️ margin-bottom ではなく padding-bottom にすること。**
     margin だと隣り合うセクションの margin-top（--b-svc-sec-gap＝75px）と
     **相殺されて大きいほうだけが残り、足しても1pxも増えない。**
     2026-08-26 に margin で書いて実際に効かず、数値を測って気づいた。 */
  .b-svc-sec:has(.b-price-cta) {
    padding-bottom: clamp(28px, 7vw, 44px);
  }

  /* --- 4. 他社との比較表のセルを折り返させない ---
     指示「他社との比較表内の文字が2行にならないよう修正」。

     390pxで2行になっていたのは **「累計20,000件以上」と「約22,000〜33,000円＋税など」の2つだけ**
     （768px以上はどのセルも1行に収まっている）。

     **この表はもともと枠内だけ横スクロールする作り**（.b-compare__scroll）なので、
     折り返しを止めて横に伸ばすほうが素直。**文字を小さくする手は取らない**
     （すでに12pxで、これ以上は読めなくなる）。
     左端の「比較項目」列は sticky のまま残るので、横に送っても何の行かは分かる。 */
  .b-compare-table th,
  .b-compare-table td {
    white-space: nowrap;
  }

  /* --- 5. 支払方法の注記を「限ります。」で折る ---
     指示どおりの位置で改行する。768px以上は1行に収まるので、
     span は inline のまま（何も起きない）。
     もとは「適格請求書発行事業者番 ／ 号：T2010401177509」と
     番号の途中で折り返していた。 */
  .b-pay__note-line {
    display: block;
  }
}