@charset "UTF-8";
/* ==========================================================================
   service-b.css — サービスページ（/service/index-b.html）専用スタイル

   デザインサンプル：assets/image/sample/service/design_frame_service-01〜09.jpg
   サンプルは幅8000px。以下のコメントの％はサンプル幅に対する割合で、
   1440px幅に換算するときは 0.18 倍している。

   案Bの共通パーツ（.b-header / .drawer--b / .b-sechead__zigzag / .b-faq）と
   案B用のカラー変数は home-b.css 側にある。このファイルはそれを前提に、
   サービスページ固有の指定だけを持つ。

   命名は案Bの他ファイルにそろえて b- 接頭辞を付けている。
   Mobile first（基準＝SP、min-width で広い画面を上書き）。
   ========================================================================== */

/* ==========================================================================
   S-0. このページで使う値
   ========================================================================== */

.theme-b {
  /* 追従ヘッダーの実高さのおおよそ。
     アンカーで飛んだときに見出しがヘッダーの下に隠れないよう、
     scroll-margin-top と追従目次の top に使う */
  --b-hd: clamp(72px, 8.4vw, 124px);

  /* 本文カラムの内側で使う基本の行送り */
  --b-svc-gap: clamp(24px, 3.2vw, 48px);
  /* セクション同士の間隔。
     2026-08-26 指示「PC・モバイルともにセクション同士の距離が近い」で
     clamp(56px, 8vw, 120px) → **約1.33倍**に広げた（1440pxで 115px → 154px、390pxで 56px → 75px）。

     **この変数は5ページで共有している。** /service/ /price/（この下の
     .b-svc__body > .b-svc-sec + .b-svc-sec）と、/company/（company-b.css）、
     /tokushoho/ /privacy/（legal-b.css）。**同じ設計のページなので、まとめて広がるのが正しい。**

     ⚠️ FVと本文のあいだ（.b-svc__layout の padding）はこれとは別に決めてある。
     もともと「セクション間の約1.4倍」だったが、この変更で差が縮んで
     ほぼ同じ量（1440pxで 168px 対 154px）になっている。 */
  --b-svc-sec-gap: clamp(75px, 10.7vw, 154px);

  /* セクションタイトルの2色。トップの .b-sechead__title に直値で入っているものと同じ値。
     home-b.css の --b-accent-light(#4899d8) / --b-cta(#176ebb) とは1桁ずれているが、
     「トップと同じ見え方にする」のが目的なので、あちらの直値に合わせている。 */
  --b-title-light: #489ad8;
  --b-title-dark: #176ebc;

  /* フォントの指定はここには無い。2026-08-24 にトップへも広げる指示があり、
     **theme-b.css へ引き上げた**（ログ153）。
     もとはこのファイルで --ff-body / --ff-heading / --ff-title を定義し、
     /service/ だけに効かせていた（ログ140）。
     切り分けを変えるときは theme-b.css の --ff-title のセレクタ一覧を直す。 */

  /* --- 写真の右下にずらして敷く青い影 ---

     元はトップの 01〜03 カード（home-b.css の .b-service__media）。
     同じ値を使う場所が5か所（法人向け／ご家庭向け／Pettomo／ラグ・絨毯例／洗浄手順）に
     増えたので変数にまとめた（2026-08-24）。

     767px以下は vw だと影がほとんど消えるため固定6px。
     この切り替えもトップと同じ。**数値を変えるときはトップ側も合わせること。** */
  --b-img-shadow: 6px 6px 0 rgba(23, 110, 187, 0.55);
}

@media (min-width: 768px) {
  .theme-b {
    --b-img-shadow: 0.55vw 0.55vw 0 rgba(23, 110, 187, 0.55);
  }
}

/* Zen Kaku Gothic New を残すセレクタの一覧は theme-b.css へ移した（2026-08-24／ログ153）。
   全ページ共通のヘッダー・ドロワーを含むため、テーマ側に置くほうが食い違わない。
   このページ固有の .b-svc-hero__catch だけは、下の S-1 に自前の指定がある。 */


/* ==========================================================================
   S-0-2. ページの地色（2026-08-24 指示）

   薄い水色にする。2026-08-24 に2回「もう少し薄く」の指示があり、
     --b-bg-tint(#e9f2fa) → #f2f7fc → **--b-bg-tint-light(#f6fafd)**
   と2段階で薄くした。最終値は案Bの既存トークンなので直値ではなく変数で参照している。

   **白い面（まとめ枠・メリットのパネル・FV・実績カード）との差は残り 9/5/2 しかない。**
   これ以上薄くすると白ベタのカードが地と同化するので、次に薄くしたいと言われたら
   「カード側に薄い影を足す」など別の手を提案する。
   濃さを変えるときは --b-bg-page の1か所だけ触ればよい。

   このファイルは /service/ でしか読み込まないため、ここに書けば
   トップ（案A・案B）には影響しない。全ページに広げるときは theme-b.css 側へ移すこと。

   地色が付いたぶん、白い面（カード・ヘッダー・フッター）が浮き上がる。
   もともと薄い水色だった枠（追従目次のSP表示・メリットのパネル）は、
   地色と同化しないよう白に変えてある。

   **FV（.b-svc-hero）だけは白**（2026-08-24 指示）。ヘッダーが白なので上から
   つながって見え、薄い水色はFVの下から始まる。→ S-2 参照
   ========================================================================== */

.theme-b {
  --b-bg-page: var(--b-bg-tint-light);
}

body.theme-b {
  background-color: var(--b-bg-page);
}

/* ==========================================================================
   S-1. 画像プレースホルダー

   サンプルと同じ「角丸の枠＋対角線」を描く。写真を受領したら
   <span class="b-ph"> を <img> に差し替える。
   対角線は SVG の背景。preserveAspectRatio="none" で枠いっぱいに引き伸ばし、
   vector-effect="non-scaling-stroke" で線の太さだけ一定に保っている。
   ========================================================================== */

.b-ph {
  display: block;
  width: 100%;
  aspect-ratio: var(--ph-ar, 16 / 9);
  border: 1px solid var(--b-line);
  border-radius: var(--ph-r, clamp(10px, 1.4vw, 20px));
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 100 M100 0 L0 100' stroke='%23afafaf' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 正方形に近いタイル */
.b-ph--tile {
  --ph-ar: 1 / 1;
}

/* ロゴ枠。角丸の横長ボックスだけを見せる（対角線は引かない）。
   TODO: 実ロゴが入ったら、縦横比はロゴごとの実寸に置き換わる */
.b-ph--logo {
  --ph-ar: 250 / 105;
  background-image: none;
}

/* 丸。対角線は引かない */
.b-ph--circle {
  --ph-ar: 1 / 1;
  width: clamp(56px, 7vw, 104px);
  border-radius: 50%;
  background-image: none;
  flex-shrink: 0;
}

/* ==========================================================================
   S-2. ページヘッダー（design_frame_service-01.jpg）

   サンプルの実測（サンプル幅に対する％）
   ┌──────────────────┬───────────────┬───────────────┐
   │                  │ x             │ y             │
   ├──────────────────┼───────────────┼───────────────┤
   │ パンくず          │  8.0%〜       │  6.4%〜 8.0%  │
   │ 見出し（大）      │  8.0%〜       │ 17.0%〜24.5%  │
   │ サブ見出し        │  8.0%〜       │ 32.5%〜48.0%  │
   │ 本文              │  8.0%〜48.0%  │ 55.0%〜84.0%  │
   │ メインビジュアル  │ 50.0%〜92.0%  │ 29.8%〜93.0%  │
   └──────────────────┴───────────────┴───────────────┘
   ========================================================================== */

.b-svc-hero {
  padding-block: clamp(16px, 2vw, 32px) clamp(40px, 6vw, 88px);
  /* ページの地色（薄い水色）はFVの下から始める（2026-08-24 指示）。
     白いヘッダーからそのままつながる。画面幅いっぱいの帯になる */
  background-color: #fff;
}

.b-svc-hero__inner {
  width: min(94%, 1600px);
  margin-inline: auto;
}

/* パンくずは style.css の共通指定を使い、余白だけ調整する */
.b-svc-hero .breadcrumb {
  margin-bottom: clamp(20px, 3.4vw, 52px);
}

.b-svc-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: clamp(8px, 1vw, 16px);
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--c-text-sub);
}

/* 見出しの前の縦棒（サンプルの黒い小さな矩形） */
.b-svc-hero__eyebrow::before {
  content: "";
  width: 4px;
  height: 1.15em;
  background-color: var(--c-ink);
}

.b-svc-hero__title {
  /* 「カーペットクリーニング」（11文字）が2カラム時の左カラムに1行で収まる上限。
     これより大きくすると 1024〜1440px で2行に折れる */
  font-size: clamp(28px, 3.85vw, 54px);
  font-weight: var(--fw-title);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

/* h1 を .visually-hidden で隠したときは、h1 ぶんの上余白を詰めて
   アイキャッチが CARPET CLEANING SERVICE の直下に来るようにする */
.b-svc-hero__title.visually-hidden + .b-svc-hero__catch {
  margin-top: 0;
}

/* セクションタイトルと同じく、1文字おきに濃さの違う青にする（2026-08-23 指示）。
   1文字ずつの span 分けは service-b.js が行う。

   2026-08-24 にいったんグラデーション（background-clip: text）にしたが、
   同日中に「文字色を元に戻す」指示があり、この形に戻している。 */
.b-svc-hero__catch {
  /* <p> だが見た目はページのタイトルなので、タイトル側のフォントにそろえる（2026-08-24） */
  font-family: var(--ff-title);
  margin-top: clamp(18px, 2.6vw, 40px);
  font-size: clamp(20px, 3.2vw, 46px);
  font-weight: var(--fw-title);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--b-title-light);
}

.b-svc-hero__char.is-dark {
  color: var(--b-title-dark);
}

.b-svc-hero__text {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 2;
}

.b-svc-hero__media {
  position: relative;
  margin-top: clamp(24px, 3.4vw, 48px);
}

/* --- メインビジュアル（design_frame_service.jpg 準拠／2026-08-24 指示） ---

   トップ（案A）のFVの「オフィスのイソメトリック図＋作業員2人」を、
   右カラムの大きさに縮めて流用している。素材は共有（新規の変換なし）。

   位置と大きさは home.css の .fv__worker--polisher / --vacuum と同じ％。
   図（fv-bg.webp・1448×1086）を基準にした割合なので、縮めてもズレない。

   home.css はこのページで読み込んでいないため、指定はここに持っている。
   **トップ側の位置を変えたときは、ここも合わせること。**

   ■ 767px以下を静止画にしている理由
   iOS Safari は WebM のアルファに対応しておらず、透過部分が黒く塗りつぶされる。
   トップは手前の作業員だけアニメーションWebP（900KB）に差し替えているが、
   このページはFVの重さを抑えるため、2人とも静止画（透過WebP・各21KB）にした。
   奥の作業員（washman-3）にはそもそもアニメーションWebPの素材が無い。 */

.b-hero-scene {
  position: relative;
}

.b-hero-scene__bg {
  display: block;
  width: 100%;
  height: auto;
}

.b-hero-scene__worker {
  position: absolute;
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

/* 手前左：ポリッシャー */
.b-hero-scene__worker--polisher {
  left: 4.6%;
  top: 46.1%;
  width: 27.4%;
}

/* 奥右：エクストラクター（手前より遠いぶん小さい） */
.b-hero-scene__worker--vacuum {
  left: 45.1%;
  top: 17.9%;
  width: 21.4%;
}

/* --- 動画 と 静止画 の出し分け --- */

.b-hero-scene__worker--still {
  display: none;
}

@media (max-width: 767px) {
  video.b-hero-scene__worker--video {
    display: none;
  }

  .b-hero-scene__worker--still {
    display: block;
  }
}

/* --- 768px以上：文章とビジュアルを左右に置く --- */

@media (min-width: 768px) {
  .b-svc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4%;
    /* 文章とビジュアルの「下辺」をそろえる（2026-08-23 指示）。
       ビジュアルは1〜2行目にまたがっているので、end にすると
       またぎ先の下端＝本文の下端と同じ位置に落ちる。
       どちらが高くても下辺は必ず一致する。 */
    align-items: end;
  }

  .b-svc-hero .breadcrumb,
  .b-svc-hero__body {
    grid-column: 1;
  }

  .b-svc-hero__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* ==========================================================================
   S-3. 2カラムのレイアウトと追従目次（CONTENTS）

   サンプル（design_frame_service-02.jpg）の実測
   ┌──────────────┬───────────────┐
   │ 目次          │  2.9%〜22.0%  │
   │ 本文カラム    │ 25.0%〜95.7%  │
   └──────────────┴───────────────┘

   SP（1023px以下）は本文の先頭に開閉式の目次として置く。
   PC（1024px以上）は左に固定して追従させる。
   ========================================================================== */

/* FVと本文が詰まって見えるので、上に余白を足す（2026-08-24 指示）。

   #business だけに margin-top を付けると、1024px以上では左の目次（CONTENTS）が
   同じ行の先頭に残って見出しと段差ができる。**両カラムごと下げたいので layout 側に置く。**

   量は「FVの下パディング ＋ ここ」で決まる。
   はじめはセクション間の余白（--b-svc-sec-gap）と同じにしたが、
   まだ詰まって見えるとの指示で**その約1.4倍**まで広げてある（2026-08-24）。
     FVの下：clamp(40px, 6vw, 88px)／ここ：clamp(40px, 5vw, 80px)
     合計　：clamp(80px, 11vw, 168px)（--b-svc-sec-gap は clamp(56px, 8vw, 120px)）

   下（よくあるご質問のあと）にも**同じ縦幅**を空ける（2026-08-24 指示）。
   こちらは分割が無いので合計値をそのまま padding-bottom に書いている。
   **上を変えたら下も合わせること。** */
.b-svc__layout {
  width: min(94%, 1600px);
  margin-inline: auto;
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(80px, 11vw, 168px);
}

/* --- 目次 --- */

.b-toc {
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* 地色が薄い水色になったので、ここは白にして浮かせる（2026-08-24） */
.b-toc__box {
  border: 1px solid var(--b-line);
  border-radius: clamp(10px, 1.4vw, 16px);
  background-color: #fff;
}

.b-toc__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.1em;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}

.b-toc__label::-webkit-details-marker {
  display: none;
}

.b-toc__label::marker {
  content: "";
}

/* 右端の開閉マーク（SPだけ出す） */
.b-toc__label::after {
  content: "";
  margin-left: auto;
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23176ebb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--t-base);
}

.b-toc__box[open] .b-toc__label::after {
  transform: rotate(180deg);
}

.b-toc__list {
  display: grid;
  gap: 0.85em;
  padding: 0 1.1em 1.2em;
}

.b-toc__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6em;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.6;
  color: var(--c-ink);
  transition: color var(--t-fast);
}

/* 項目の頭のギザギザ（サンプルの水色の波線） */
.b-toc__link::before {
  content: "";
  width: 1.5em;
  height: 0.5em;
  margin-top: 0.55em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='none'%3E%3Cpolyline points='1,2 7,6.5 13,2 19,6.5 23,3.5' fill='none' stroke='%234899d8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.b-toc__link:hover,
.b-toc__link.is-current {
  color: var(--b-cta);
}

.b-toc__link.is-current {
  font-weight: var(--fw-bold);
}

/* --- 1024px以上：左に追従させる --- */

@media (min-width: 1024px) {
  .b-svc__layout {
    display: grid;
    grid-template-columns: minmax(0, 19%) minmax(0, 1fr);
    column-gap: 4%;
    align-items: start;
  }

  .b-toc {
    position: sticky;
    top: calc(var(--b-hd) + 16px);
    margin-bottom: 0;
  }

  /* PCでは枠を外して素の一覧にする（サンプルどおり） */
  .b-toc__box {
    border: none;
    border-radius: 0;
    background-color: transparent;
  }

  .b-toc__label {
    padding: 0 0 1.6em;
  }

  .b-toc__label::after {
    display: none;
  }

  .b-toc__list {
    gap: 1.35em;
    padding: 0;
  }

  /* --- 表示中のセクションを少し大きく見せる ---

     色だけでなく大きさでも「いまどこを読んでいるか」が分かるようにする。
     transform なのでレイアウトは動かない（他の項目の位置はずれない）。
     左端をそろえたまま右へ伸びるよう、拡大の基点を左に置いている。

     1024px以上（左に固定される追従目次）だけに掛けている。
     1023px以下では目次が本文の上に全幅で載るため、拡大すると画面からはみ出して
     横スクロールが出てしまう（768px で実測14px）。 */

  .b-toc__link {
    transform-origin: left center;
    transition: color var(--t-fast), transform var(--t-base);
  }

  /* 倍率を上げすぎると、いちばん長い「オフィス・店舗向けクリーニング」が
     目次の欄からはみ出して本文にかぶる。1.08 なら1024pxでも24px余る */
  .b-toc__link.is-current {
    transform: scale(1.08);
  }
}

/* --- 1023px以下：指で押せる大きさ（高さ44px以上）にする --- */

@media (max-width: 1023px) {
  .b-toc__list {
    gap: 0;
  }

  .b-toc__link {
    min-height: 44px;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-toc__link,
  .b-toc__label::after {
    transition: none;
  }
}

/* ==========================================================================
   S-4. セクション共通のパーツ

   サンプルの各セクションは、
   「大見出し → 縦棒付きのリード → 本体 → 注記 → 丸枠のまとめ → ボタン」
   という同じ骨格を繰り返している。ここでまとめて定義する。
   ========================================================================== */

.b-svc__body > .b-svc-sec + .b-svc-sec {
  margin-top: var(--b-svc-sec-gap);
}

.b-svc-sec {
  /* アンカーで飛んだとき、追従ヘッダーの下に見出しが隠れないようにする */
  scroll-margin-top: calc(var(--b-hd) + 16px);
}

/* トップのセクションタイトル（.b-sechead__title）と同じく、1文字おきに濃さの違う青にする。
   地が薄いほうで、is-dark を付けた文字が濃いほう。改行をまたいでも交互のまま。

   1文字ずつの span 分けは service-b.js が行う（原稿が差し替わっても付け直しが要らないため）。
   対象は service-b.js の TWO_TONE_TARGETS にまとめてある。
   JSが動かない場合は薄いほうの青一色になるだけで、読めなくなることはない。 */
.b-svc-sec__title {
  font-size: clamp(22px, 3.1vw, 44px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--b-title-light);
}

.b-svc-sec__char.is-dark {
  color: var(--b-title-dark);
}

/* 「法人、事業者様向け」のように大見出しの上に付く行 */
.b-svc-sec__title-sub {
  display: block;
}

/* --- 縦棒付きのリード ---

   デザインサンプルでは黒い縦棒だったが、セクションタイトルを交互の青にしたのに合わせて
   縦棒も青にしている（2026-08-23 指示）。色はタイトルの濃いほうと同じ。 */

.b-svc-lead {
  display: flow-root;
  margin-top: clamp(16px, 2.2vw, 32px);
  padding-left: clamp(12px, 1.1vw, 18px);
  border-left: clamp(6px, 0.7vw, 10px) solid var(--b-title-dark);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 1.85;
}

/* --- セクション直下の大きなビジュアル --- */

.b-svc-sec__media {
  margin-top: clamp(20px, 2.6vw, 36px);
}

/* セクション頭の大きい写真（2026-08-24 受領）。#business と #home で共用。

   プレースホルダーは 1600/790（≒2:1）／1600/870 だったが、元データが4:3・3:2で、
   2:1 に切ると #business の作業員の頭とノズルの先が落ちる。16:9 まで戻して収まりを取っている
   （洗浄手順の工程写真と同じ比率にそろう）。
   #home（home.webp）も同じ 16:9 にそろえ、切り出しは sharp の attention 任せで顔を中央に置いた。 */
.b-svc-sec__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(14px, 2vw, 28px);
  /* 写真の右下に青い枠がずれて重なって見えるタイプの影（2026-08-24 指示）。
     一度 #fff にしたが、同日の指示で青に戻している。値は S-0 の --b-img-shadow 参照 */
  box-shadow: var(--b-img-shadow);
}

/* 写真を半分の幅にして、右に文章を置く（2026-08-24 指示）。現在 #business と #home の2か所。
   幅が半分＝面積は元の1/4になる。767px以下は縦に積む。

   画像は1240px幅のまま据え置き。半分になっても
   768px以下では画面幅いっぱいになる（767pxで721px）ので、小さくすると足りなくなる。 */
.b-svc-sec__media--split {
  display: grid;
  gap: clamp(16px, 2.4vw, 32px);
}

/* 写真の横の文章。他の本文（clamp(12px, 1.05vw, 15px)）より一段大きい（2026-08-24 指示）。
   写真と並ぶぶん文字が小さく見えるため。SPの下限14pxは CLAUDE.md の本文サイズの決まりに合わせている */
.b-svc-sec__mediatext {
  display: grid;
  gap: 1em;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: var(--fw-label);
  line-height: 1.95;
}

@media (min-width: 768px) {
  .b-svc-sec__media--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(24px, 3.4vw, 48px);
  }
}

/* --- 見出しの背景に置く筆記体の飾り（2026-08-24 指示・design_frame_2.jpg 準拠） ---

   支給された手書きの画像を使う。現在2か所。

     #business … to_business.png（2500×817） → to-business.webp（1040×340・50.2KB）
     #home     … to_customer.png（2500×734） → to-customer.webp（1040×305・51.2KB）

   増やすときは .b-svc-sec__head で h2 を囲い、img.b-svc-sec__script を足すだけでよい。

   **傾きは絵そのものに含まれている**ので、CSS では回転させていない。
   はじめは Google Fonts の Sacramento で組んでいたが、画像の支給を受けて差し替えた
   （フォントの読み込みも外してある）。

   大きさはサンプルの実測から。飾りの幅はサンプルでページ幅の30.9%、
   本文カラムはページ幅の72.4%にあたるので、**カラム幅の43%**にしている。

   **h2 の外に置いている。** 中に入れると見出しのテキストが
   「オフィス・店舗のカーペットクリーニング to business」になってしまうため。
   読み上げからも外す（HTML側で aria-hidden="true"）。

   767px以下は出さない。見出しが2〜3行に折り返し、飾りと重なって読みにくくなるため。 */

.b-svc-sec__head {
  position: relative;
}

/* 見出しを中央に置く修飾子（2026-08-26 指示「お客様の声 を中央表示」）。
   このセクションは実績エンブレム（justify-items: center）もキャッチ（text-align: center）も
   中央ぞろえで、**見出しだけが左に残っていた。**

   **margin-inline: auto が要る。** 768px以上では下の :has(.b-svc-sec__script--over) が
   この箱を width: fit-content にしているので、text-align だけでは箱が動かない。
   箱ごと中央に寄るので、語末に重ねている飾りも一緒に付いてくる。 */
.b-svc-sec__head--center {
  margin-inline: auto;
  text-align: center;
}

/* 飾りより前に出して、見出しが欠けないようにする */
.b-svc-sec__head .b-svc-sec__title {
  position: relative;
  z-index: 1;
}

.b-svc-sec__script {
  display: none;
}

@media (min-width: 768px) {
  .b-svc-sec__script {
    display: block;
    position: absolute;
    right: 0;
    bottom: -4%;
    z-index: 0;
    width: 43%;
    height: auto;
    /* 見出しの邪魔をしないよう薄くする（2026-08-24 指示） */
    opacity: 0.3;
    pointer-events: none;
  }

  /* --over：セクションタイトルの語末に被せる配置（2026-08-25 指示・後から追加した6枚）。
     to-business／to-customer（右下）とは別扱い。
     「語末の2文字くらいに飾りの左端が重なる」ように、
     見出しの箱をタイトルの文字幅にそろえ（下の :has）、飾りの左端を
     タイトルの右端から約2文字（2em）手前に置く。飾りはそこから右へ伸びる。
     タイトルは z-index:1 で前面にあるので、薄い飾りの上でも読める。 */
  .b-svc-sec__head:has(.b-svc-sec__script--over) {
    width: fit-content;
    max-width: 100%;
  }

  /* **中央ぞろえの見出し（.b-svc-sec__head--center）では、飾りも見出しの中央に重ねる。**
     既定の「語末に重ねる」置き方のままだと、見出しが中央へ寄ったぶん飾りも右へ動き、
     画面の右端に貼り付く（1440pxで残り10px。はみ出しはしないが収まりが悪い）。
     中央ぞろえの見出しは飾りも左右対称に置くほうが素直。
     **動きのほうの transform は S-14-2 で書き直している**（-50% を含めて書くこと）。 */
  .b-svc-sec__head--center .b-svc-sec__script--over {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .b-svc-sec__script--over {
    right: auto;
    bottom: auto;
    /* 100% ＝ タイトルの幅（上で fit-content）。2em ＝ タイトル文字2つぶん
       （下で font-size をタイトルにそろえているので em が文字幅になる）。 */
    left: calc(100% - 2em);
    top: 50%;
    transform: translateY(-50%);
    /* reset の img{max-width:100%} が fit-content の見出し幅に縛るので打ち消す。
       これが無いと飾りが見出し幅まで縮む（2026-08-25）。 */
    max-width: none;
    /* サイズは調整前（旧 --over の 52%）と同じ実寸に戻す。
       旧52%は本文カラム（.b-svc__body）基準。TOCの無い 768〜1023px では
       本文がほぼ全幅なので約49vw、TOCのある 1024px以上では狭くなるので下の上書きで約37.5vw。 */
    width: 49vw;
    /* em を「タイトルの1文字」に一致させるため、タイトルと同じ font-size にする */
    font-size: clamp(22px, 3.1vw, 44px);
  }
}

/* 1024px以上は追従目次（CONTENTS）で本文カラムが狭くなるぶん、飾りの幅も合わせる。
   旧52%の実寸に一致：1440px=540px／1600px以上=602pxで頭打ち。 */
@media (min-width: 1024px) {
  .b-svc-sec__script--over {
    width: min(37.5vw, 602px);
  }
}

/* --- 小見出し（対応可能な施設例／施工実績例／お客様の声） --- */

.b-subhead {
  display: grid;
  justify-items: start;
  /* 波線を見出しの文字幅にそろえるため、この箱自体を中身の幅にする。
     こうすると grid の列幅＝見出しの幅になり、
     波線に width: 100% を掛けるだけで文字の長さに追従する。
     見出しが1行に収まらないときは、親の幅で頭打ちになって折り返す。 */
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(40px, 5.5vw, 84px);
  margin-bottom: clamp(20px, 2.8vw, 40px);
}

.b-subhead--center {
  justify-items: center;
  margin-inline: auto;
}

.b-subhead__title {
  font-size: clamp(16px, 1.85vw, 26px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  color: var(--c-ink);
}

/* --- 見出しの下の波線 ---

   トップの `.b-sechead__zigzag`（インラインSVGを1枚引き伸ばす方式）とは作りを変えている。
   あちらは幅が固定なので引き伸ばしで足りるが、こちらは
   「対応可能な施設例」「施工実績例」「対応可能なラグ・絨毯例」のように
   見出しの長さがまちまちで、1枚を引き伸ばすと文字数によって波の粗さが変わってしまう。

   そこで波1周期ぶんをタイルにして background で横に繰り返す。
   これで **長さは文字幅に追従し、波の高さと間隔はどの見出しでも一定**になる。

   タイルは 59 × 40。トップの viewBox 240×40 に描かれた波の1周期ぶん（山と谷の間隔59）を切り出したもので、
   波の高さ・間隔はトップの見出しと同じ見え方になる。
   両端を斜面の途中（山と谷の中間）で切ってあるので、繰り返しても継ぎ目が出ない。
   高さを決めれば横幅（＝周期）は 59/40 = 1.475 倍で決まる。

   色は --b-accent-light(#4899d8) / --b-cta(#176ebb) と同じ値。
   data URI 内では CSS変数が使えないため直値で持っている。
   **配色を変えるときはここも直すこと。** */

.b-subhead__wave {
  --wave-h: clamp(14px, 1.85vw, 26px);

  display: block;
  width: 100%;
  height: var(--wave-h);
  margin-top: 0.3em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='3.4' stroke-linejoin='round'%3E%3Cpolyline points='0,8.5 14.75,3 44.25,14 59,8.5' stroke='%234899d8'/%3E%3Cpolyline points='0,31.5 14.75,26 44.25,37 59,31.5' stroke='%23176ebb'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  /* 縦横を同じ倍率で拡縮させ、波の形をくずさない */
  background-size: calc(var(--wave-h) * 1.475) 100%;
}

/* --- 注記 --- */

.b-svc-note {
  margin-top: clamp(14px, 1.8vw, 24px);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.9;
  color: var(--c-text-sub);
}

.b-svc-note--right {
  text-align: right;
}

.b-svc-note strong {
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.b-svc-note a {
  color: var(--b-cta);
  text-decoration: underline;
}

/* --- 丸枠のまとめ（円アイコン＋文章） --- */

.b-notebox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  margin-top: clamp(28px, 4vw, 56px);
  padding: clamp(18px, 2.4vw, 36px) clamp(18px, 2.6vw, 40px);
  border: 1px solid var(--b-line);
  border-radius: clamp(16px, 2.2vw, 32px);
  /* ページ背景（薄い水色）から浮かせるため白ベタにする（2026-08-24 指示）。
     .b-merit / .b-toc__box と同じ考え方 */
  background-color: #fff;
}

/* 丸いアイコン画像。大きさはプレースホルダー（.b-ph--circle）と同じにそろえてある。
   画像自体が円形イラストなので枠は付けない。 */
.b-notebox__icon {
  width: clamp(56px, 7vw, 104px);
  height: auto;
}

.b-notebox__text {
  font-size: clamp(12px, 1.05vw, 15px);
  /* 本文（--fw-label: 500）より一段上げて枠の中身を目立たせる（2026-08-24 指示） */
  font-weight: var(--fw-bold);
  line-height: 1.95;
}

/* --- ボタン --- */

.b-svc-sec__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 2.6vw, 36px);
}

.b-svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6em;
  /* 2026-08-26：値は 48px のままだが、home-b.css の .theme-b（B-0）に移した変数を参照する。
     トップのピルボタンも同じ幅でこの高さに底上げしたので、**厚みの出どころを1か所にまとめた。**
     この変数を書き換えると、トップの3ルールと下層のこのボタンが一緒に動く。

     **第2引数の 48px は保険。** var() が解決できないと宣言ごと捨てられ、
     このボタンだけ 31px まで潰れる。ここは全幅で効いている既存の指定なので、
     変数が届かない事故が起きても元の高さに落ちるようにしてある。 */
  min-height: var(--b-btn-minh, 48px);
  padding: 0.7em 1.6em;
  border-radius: 999px;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-bold);
  /* 2026-08-25 指示：トップのピルボタンと同じ配色にそろえた（塗り＝青／文字＝白）。
     もとは「白地＋黒枠＋黒文字、ホバーで --b-cta に塗り変わる」形だった。
     ホバーで白地＋青文字に反転するのもトップと同じ。
     **トップ側は home-b.css の .b-service__btn ／ .b-price__btn ／ .b-news__more の
     3ルール。配色を変えるときは、あちら3つとこちらをセットで直すこと。**

     2026-08-25 追加指示：塗りを単色 --b-title から --b-btn-grad（FV実績バッジと同じ
     縦グラデ）へ。--b-btn-grad は home-b.css の .theme-b で定義していて、
     このページも home-b.css を読むので届く。background-color は非対応時のフォールバック。
     **枠線は透明にする**（--b-title のままだとグラデの上下だけ枠が浮き出るため）。
     ホバーでは background-image を明示的に消さないと白くならない。 */
  border: 1px solid transparent;
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.b-svc-btn:hover {
  border-color: var(--b-title);
  background-color: #fff;
  background-image: none;
  color: var(--b-title);
}

.b-svc-btn__arrow {
  transition: transform var(--t-fast);
}

.b-svc-btn:hover .b-svc-btn__arrow {
  transform: translateX(4px);
}

/* Pettomo の「Amazonで購入する」だけに付けていた塗りの修飾子。
   2026-08-25 に基本形そのものが塗りになったため、**いまは基本形と同じ見た目**になる。
   `--b-cta`(#176ebb) のままだと基本形の `--b-title`(#025589) と1段違う青になり、
   ボタンが1つだけ浮くので値をそろえた。
   HTMLからクラスは外していない。強調を戻したいときはここに別の色を入れる。 */
.b-svc-btn--fill {
  border-color: transparent;
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
}

/* 2026-08-25：ホバーを基本形と同じ「白地＋青文字＋青枠」に統一した。
   もとは --b-cta-dark のベタ塗りに変えていたが、文字色は基本形のホバー
   （.b-svc-btn:hover の color: var(--b-title)）を継いだままだったため、
   **濃い青の地に濃い青の文字＝ほぼ読めない状態**になっていた（コントラスト約1.3:1）。
   このクラス自体が上のコメントどおり「いまは基本形と同じ見た目」なので、
   ホバーも基本形にそろえるのが素直。強調を戻すなら地と文字を対で指定すること。 */
.b-svc-btn--fill:hover {
  border-color: var(--b-title);
  background-color: #fff;
  background-image: none;
}

.b-svc-btn--sm {
  min-height: 44px;
  padding: 0.6em 1.2em;
  gap: 1em;
}

@media (prefers-reduced-motion: reduce) {
  .b-svc-btn,
  .b-svc-btn__arrow {
    transition: none;
  }
}

/* ==========================================================================
   S-5. オフィス・店舗向け（design_frame_service-02.jpg）
   ========================================================================== */

/* --- 対応可能な施設例：SP2列 → 768px以上4列 --- */

/* すき間は clamp(12px, 1.8vw, 26px) から詰めている（2026-08-24 指示）。
   横は枠線どうしが近づくぶん、縦はラベルの下に文字ぶんの余白が付くので、
   横より縦を少し広く取って見た目の間隔をそろえている。 */
.b-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(8px, 1.1vw, 16px);
  row-gap: clamp(12px, 1.5vw, 22px);
}

.b-tile {
  display: grid;
  gap: 0.6em;
}

/* アイコンを囲む青い角丸枠。
   枠の大きさ（正方形）と角丸は、プレースホルダーだったときの .b-ph--tile と同じにしてある。
   中の画像は横長（およそ1.44:1）なので contain で収める。
   枠は正方形なので、横は枠線まで届き、縦は上下に余白が残る形になる。 */
.b-tile__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  /* 画像を枠線ぎりぎりまで見せたいので内側の余白は取らない（2026-08-23 指示） */
  padding: 0;
  /* 1px → 2px → 3px と2回上げている（2026-08-23 指示）。
     可変にしても Chrome が整数pxへ丸めるので固定値にしてある */
  border: 3px solid var(--b-title-dark);
  border-radius: clamp(10px, 1.4vw, 20px);
  background-color: #fff;
  /* 余白ゼロで画像を角まで寄せるため、角丸からはみ出さないように切る */
  overflow: hidden;
}

.b-tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.b-tile__label {
  font-size: clamp(11px, 1vw, 14px);
  font-weight: var(--fw-label);
  line-height: 1.5;
  text-align: center;
  color: var(--c-ink);
}

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

/* --- 施工実績例：ロゴ（2段の無限ループ） ---

   上段6枚を左へ、下段6枚を右へ流す。ループはCSSのアニメーションだけで作る。

   【送り量】
   1組ぶん（枚数×（1枚の幅＋すき間））だけ動かすと元の位置に戻るので継ぎ目が出ない。
   トップの .b-intro__track は「％で半分」だが、こちらは上下で枚数が違うため
   ％では書けない。1枚の幅も間隔も固定値なので、**実寸で計算**している。

   【なぜ3組も置くのか】
   2組だと、1組ぶんの幅が枠より狭いときに末尾が空く。
   6枚＝1140px（1440px時）に対して枠が1042pxあるので2組でもぎりぎり足りるが、
   画面幅によっては逆転するため3組で余裕を持たせている。
   3組置けば、どの画面幅でも「1組ぶん送っても残り2組で枠を埋められる」状態になる。

   【上下の速さをそろえる】
   枚数が違うので、同じ秒数だと下段のほうが速くなる。
   --logo-speed を「1枚あたりの秒数」として持ち、枚数を掛けて duration にしている。

   TODO: 実ロゴ受領後は3組とも同じものに差し替える */

.b-logos {
  /* 1枚の幅。高さは画像の縦横比（500:300）で決まる */
  --logo-w: clamp(90px, 11vw, 158px);
  --logo-gap: clamp(16px, 2.2vw, 32px);
  /* ロゴ1枚が流れきるのにかける時間。大きくするとゆっくりになる */
  --logo-speed: 4.2s;

  overflow: hidden;
}

.b-logos__track {
  /* 1組ぶんの送り量。--logo-count は段ごとに指定する */
  --logo-set: calc(var(--logo-count) * (var(--logo-w) + var(--logo-gap)));

  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  /* 3組ぶんを1行に収める。折り返させない */
  width: max-content;
  animation: b-logos-scroll calc(var(--logo-count) * var(--logo-speed)) linear infinite;
  will-change: transform;
}

.b-logos__track + .b-logos__track {
  margin-top: var(--logo-gap);
}

/* 上段：6枚・左へ流す */
.b-logos__track--top {
  --logo-count: 6;
}

/* 下段：6枚・右へ流す（逆再生） */
.b-logos__track--bottom {
  --logo-count: 6;

  animation-direction: reverse;
}

.b-logos__item {
  flex-shrink: 0;
  width: var(--logo-w);
}

.b-logos__item img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes b-logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--logo-set) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .b-logos__track {
    animation: none;
  }
}

/* --- 施工実績例：実績リスト --- */

.b-records {
  display: grid;
  /* 1件ずつ白いカードにしたので、行を離す（もとは gap:0 の罫線区切りだった／2026-08-24 指示） */
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(24px, 3.4vw, 48px);
}

/* 地色から浮かせる白いカード（2026-08-24 指示）。**囲い線は無し**（同日の指示）で、
   白ベタ＋角丸だけで見せている。
   もとは下罫線だけの一覧だったので border-bottom を外し、左右の余白を足した。
   左の padding が大きいのは、行頭の「・」を外へ吊るすぶん 1.1em 足しているため */
.b-records__item {
  display: grid;
  gap: 0.2em;
  padding: clamp(12px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px);
  padding-left: calc(clamp(14px, 1.8vw, 24px) + 1.1em);
  border-radius: clamp(10px, 1.2vw, 16px);
  background-color: #fff;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.7;
}

/* 行頭の「・」。padding-left ぶんだけ左へはみ出させて、
   2行目（作業内容）の頭とそろえている */
.b-records__name::before {
  content: "・";
  margin-left: -1.1em;
}

.b-records__name {
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

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

@media (min-width: 768px) {
  .b-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 64px);
  }
}

/* ==========================================================================
   S-6. ご自宅向け（design_frame_service-03.jpg）

   写真と文章を左右交互に置く。2件目だけ左右を入れ替える。
   読み上げ順は「写真 → 文章」のままにしたいので、
   マークアップは変えずに grid の列指定だけで入れ替えている。
   ========================================================================== */

.b-alt {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}

.b-alt__item {
  display: grid;
  gap: clamp(16px, 2.4vw, 36px);
}

.b-alt__media .b-ph {
  --ph-r: clamp(14px, 2vw, 28px);
}

/* 写真（2026-08-23 受領）。プレースホルダー（.b-ph--tile）と同じ正方形・同じ角丸。
   元は assets/image/sample/service/ChatGPT Image 2026年8月23日 18_43_31・18_46_14.png */
.b-alt__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: clamp(14px, 2vw, 28px);
  /* 他の写真と同じ青いずれ影（2026-08-24 指示）。S-0 の --b-img-shadow 参照 */
  box-shadow: var(--b-img-shadow);
}

.b-alt__title {
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  color: var(--c-ink);
}

.b-alt__text {
  margin-top: 0.9em;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 2;
}

@media (min-width: 768px) {
  .b-alt__item {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
  }

  /* 写真を右に置くときは、列の幅も入れ替える。
     placement だけ入れ替えると、写真が 1fr 側（広いほう）に入って
     写真と文章の大きさが逆転してしまう */
  .b-alt__item--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  }

  .b-alt__item--reverse .b-alt__media {
    grid-column: 2;
    grid-row: 1;
  }

  .b-alt__item--reverse .b-alt__body {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ==========================================================================
   S-7. Pettomo（design_frame_service-04.jpg）
   ========================================================================== */

.b-pettomo__head {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

/* 商品写真。角丸はプレースホルダーだったときと同じ値にそろえてある */
.b-pettomo__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(10px, 1.4vw, 20px);
  /* セクション頭の写真と同じ青いずれ影（2026-08-24 指示）。S-0 の --b-img-shadow 参照 */
  box-shadow: var(--b-img-shadow);
}

.b-pettomo__lead {
  margin-top: clamp(14px, 1.8vw, 26px);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.95;
}

@media (min-width: 768px) {
  .b-pettomo__head {
    grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
    column-gap: clamp(24px, 3.4vw, 52px);
  }
}

/* --- 購入導線 --- */

.b-pettomo__foot {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 52px);
}

.b-pettomo__cta-text {
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.9;
}

@media (min-width: 768px) {
  .b-pettomo__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(24px, 3vw, 48px);
  }
}

/* ==========================================================================
   S-8. ウォッシュマンが選ばれる理由（design_frame_service-05.jpg 上半分）
   ========================================================================== */

.b-reasons {
  display: grid;
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(24px, 3.4vw, 48px);
}

/* align-content: start は、カードの高さをそろえたときに中身が
   引き伸ばされず上に寄るようにするため（下の grid-auto-rows: 1fr とセット／2026-08-24 指示） */
.b-reason {
  display: grid;
  align-content: start;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(16px, 2vw, 28px);
  border: 1px solid var(--b-line);
  border-radius: clamp(14px, 2vw, 28px);
  background-color: #fff;
}

/* カードの写真（2026-08-23 受領）。3枚とも正方形に切り出してあるので
   object-fit は保険。角丸はプレースホルダー（.b-ph）と同じ値にそろえてある。

   元データは assets/image/service-b/ に置いた最適化版とは別の場所にある。
     01 … assets/image/works/work_scene/IMG_6765.jpeg（EXIFの向きを焼き込んで変換）
     02 … assets/image/sample/service/80b946_〜mv2.avif
     03 … assets/image/sample/service/ChatGPT Image 2026年8月23日 10_47_27.png
   sample/ は検討用の置き場なので、本番からは直接参照しない（08_handoff.md 4-3）。 */
.b-reason__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: clamp(10px, 1.4vw, 20px);
}

.b-reason__title {
  /* 3カラム時、1行の最長「カーペットクリーニング専門」（13文字）が
     カードの内寸に収まる上限 */
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: var(--fw-title);
  line-height: 1.55;
  color: var(--b-title);
}

.b-reason__text {
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.95;
}

@media (min-width: 768px) {
  /* 3枚とも同じ縦幅にする（2026-08-24 指示。お客様の声のカードと同じ考え方）。
     align-items: start だと本文の長さぶんだけ高さがバラつく。
     767px以下は1列なので、そろえると空きが大きくなりすぎる。ここだけの指定にとどめる */
  .b-reasons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
}

/* ==========================================================================
   S-9. お客様の声（design_frame_service-05.jpg 下半分）
   ========================================================================== */

/* --- 実績エンブレム（月桂冠）3つ ---

   サンプルでは中身の無い丸が3つ並んでいるだけだったところに、
   月桂冠のイラスト（assets/image/icon/557556.webp）を入れ、
   中央の空きに実績のテキストを重ねる（2026-08-23 指示）。

   ■ 文字の大きさを cqi（コンテナ幅の1%）で決めている理由

   このページの他の指定と同じ clamp(px, vw, px) にすると、文字は「画面幅」に
   比例して大きくなる。ところがエンブレムの幅は「グリッド1列ぶん」で決まり、
   画面幅に対する比率が幅ごとに変わる（768px時 約30% → 1440px時 約21%）。
   そのため vw だと、広い画面ほど文字だけが相対的に大きくなって枠からはみ出す。
   cqi ならエンブレム自身の幅が基準になるので、どの幅でも同じ見え方になる。
   コンテナは .b-award__emblem。トップのFV（home.css）でも同じ手を使っている。

   ■ テキストを置ける範囲（月桂冠の内側の空き。画像の実測値）

     y 20%     … 幅 48%
     y 28〜56% … 幅 55〜62%（いちばん広い）
     y 60%〜   … 幅 41% → 35%（下のリボンに向かって狭くなる）

   下にリボンがあるぶん、空きの中心は上寄り。テキストは幅 58%・中心 y42% に置き、
   いちばん長い「大手集客サイト」（7文字）が上端でもぶつからない大きさにしてある。
   文字を大きくしたいときは、この幅と実測値を見ながら決めること。 */

.b-awards {
  display: grid;
  justify-items: center;
  gap: clamp(24px, 4vw, 32px);
  margin-top: clamp(24px, 3.4vw, 48px);
}

/* 767px以下は1列。3列のままだと1つあたり114px（390px時）まで縮み、
   中の文字が10px程度になって読めなくなる */
.b-award {
  width: 100%;
  max-width: clamp(200px, 58vw, 260px);
}

.b-award__emblem {
  position: relative;
  container-type: inline-size;
}

.b-award__wreath {
  display: block;
  width: 100%;
  height: auto;
}

/* 月桂冠の内側に重ねるテキスト。font-size がラベルの大きさで、
   数値（.b-award__figure）はその em 倍で決めている */
.b-award__body {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 0.3em;
  width: 58%;
  font-size: 6.5cqi;
  line-height: 1.4;
  text-align: center;
  /* TOPのFVバッジ（home-b.css の .b-fv__badge-text）と同じ仕様に統一（2026-08-25 指示）：
     明朝体（Noto Serif JP）＋青グラデ＋background-clip:text＋シャイン。
     ラベル・数値の色指定は外し、この地色（青グラデ）を透かして見せる。
     シャインの @keyframes b-badge-shine は home-b.css で定義済み（サービスも読み込む）。
     Noto Serif JP は service/index-b.html で追加読み込み。 */
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  background-image:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0.92) 55%, transparent 100%),
    linear-gradient(180deg, #4a9fd6 0%, #1668ad 42%, #0a4f86 58%, #3d92cf 100%);
  background-size: 55% 100%, 100% 100%;
  background-position: -160% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 光を流す（TOPと同じ。トリガは service-b.js の initAwardShine） */
.b-award__body.is-shine {
  animation: b-badge-shine 1.1s ease-in-out;
}

/* background-clip: text が効かない環境では青のベタ塗りに戻す */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .b-award__body {
    background-image: none;
    color: #1668ad;
  }
}

.b-award__label {
  font-weight: var(--fw-bold);
}

/* 数値。2行に折り返す前提で <br> をHTML側に入れてある。
   cqi 基準なのでどの幅でも同じ位置で折り返す */
.b-award__figure {
  font-size: 1.9em;
  font-weight: var(--fw-title);
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .b-award__body.is-shine {
    animation: none;
  }
}

/* 出典の注記。円の中には入れず、外（下）に小さく置く */
.b-award__note {
  margin-top: clamp(8px, 1vw, 14px);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.7;
  text-align: center;
  color: var(--c-text-sub);
}

.b-voice__catch {
  margin-top: clamp(20px, 2.6vw, 36px);
  font-size: clamp(13px, 1.4vw, 21px);
  font-weight: var(--fw-title);
  line-height: 1.8;
  text-align: center;
  color: var(--c-ink);
}

.b-voices {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(24px, 3.4vw, 48px);
}

/* 地色から浮かせるため白ベタにする（2026-08-24 指示）。
   align-content: start は、カードの高さをそろえたときに中身が
   引き伸ばされず上に寄るようにするため（下の grid-auto-rows: 1fr とセット） */
.b-voice {
  display: grid;
  align-content: start;
  gap: 0.5em;
  padding: clamp(16px, 2vw, 28px) clamp(18px, 2.2vw, 32px);
  border: 1px solid var(--b-line);
  border-radius: clamp(14px, 2vw, 26px);
  background-color: #fff;
}

.b-voice__meta {
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: var(--fw-bold);
  color: var(--b-cta);
}

.b-voice__text {
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.95;
}

@media (min-width: 768px) {
  .b-awards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 32px);
  }

  .b-award {
    max-width: 300px;
  }


  /* 6枚すべて同じ縦幅にする（2026-08-24 指示）。
     align-items: start だと本文の長さぶんだけ高さがバラつく。
     stretch（既定）に戻すと**同じ行の中だけ**そろうので、
     行の高さも 1fr でそろえて全6枚を同一にしている。
     767px以下は1列なので、そろえると空きが大きくなりすぎる。ここだけの指定にとどめる */
  .b-voices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
}

/* ==========================================================================
   S-10. 施工まで（ご注文）の流れ（design_frame_service-06.jpg）

   【重要】/contact/ にも同一内容で置く共通パーツ。
   ここを直したら /contact/ 側にも必ず反映する。
   ========================================================================== */

.b-steps {
  display: grid;
  gap: clamp(16px, 2.2vw, 30px);
  margin-top: clamp(24px, 3.4vw, 48px);
  counter-reset: none;
}

.b-step {
  position: relative;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  align-content: start;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid var(--b-line);
  border-radius: clamp(14px, 2vw, 28px);
  background-color: #fff;
}

/* 各ステップのイラスト（2026-08-23 受領）。

   **比率は元データのまま 4:3。** プレースホルダーは正方形（.b-ph--tile）だったが、
   正方形に切るとイソメトリックの絵の左右が落ちて、描かれているものが欠ける。
   4カラムのカードは幅が狭いので、横長のほうが縦も詰まって収まりがよい。

   alt="" にしているのは、隣の見出し・本文が同じ内容を言っているため
   （読み上げたときに「お問い合わせ」が二重にならないようにする）。

   元データは assets/image/sample/service/ChatGPT Image 2026年8月23日 19_11_53〜19_12_16.png の4枚。
   sample/ は検討用の置き場なので、本番からは直接参照しない（08_handoff.md 4-3）。
   なお絵の地色（#f5f8fc 前後）は --b-bg-tint-light(#f6fafd) とほぼ同じで、案Bの配色になじむ。 */
.b-step__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: clamp(10px, 1.4vw, 20px);
}

.b-step__num {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: var(--fw-title);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--b-accent-light);
}

.b-step__title {
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  color: var(--c-ink);
}

.b-step__text {
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.9;
}

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

/* 流れの下の丸枠は、文章とボタンが横に並ぶ */
@media (min-width: 768px) {
  .b-notebox--wide {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* ==========================================================================
   S-11. カーペット洗浄の手順（design_frame_service-07.jpg）
   ========================================================================== */

.b-method {
  display: grid;
  /* 2026-08-26 指示「カード同士のマージンをもう少し開ける」で
     clamp(28px, 4vw, 64px) → 約1.5倍（1440pxで 58px → 86px、390pxで 28px → 44px）。
     1枚ずつ順に出てくるアニメーションが付いているので、
     カードの切れ目がはっきりするぶん動きも読み取りやすくなる。 */
  gap: clamp(44px, 6vw, 96px);
  margin-top: clamp(28px, 4vw, 56px);
}

.b-method__item {
  display: grid;
  gap: clamp(14px, 2vw, 32px);
}

/* 工程写真（2026-08-23 受領）。
   プレースホルダーは 760/375（≒2:1）だったが、元データが 4:3 と 3:2 で、
   2:1 に切ると人物の頭や足元が落ちる。16:9 まで戻して収まりを取っている。
   見出しと本文が同じ内容を言っているので alt="" にしてある（#flow と同じ扱い）。
   元は assets/image/sample/service/ChatGPT Image 2026年8月23日 19_21_45〜19_38_10.png の5枚。 */
.b-method__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(14px, 2vw, 28px);
  /* 他の写真と同じ青いずれ影（2026-08-24 指示）。S-0 の --b-img-shadow 参照 */
  box-shadow: var(--b-img-shadow);
}

.b-method__title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6em;
  font-size: clamp(17px, 1.9vw, 28px);
  font-weight: var(--fw-title);
  line-height: 1.45;
  color: var(--c-ink);
}

.b-method__num {
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: var(--b-accent-light);
}

.b-method__text {
  margin-top: 0.9em;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 2;
}

@media (min-width: 768px) {
  .b-method__item {
    grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(24px, 3.4vw, 52px);
  }
}

/* ==========================================================================
   S-12. クリーニング事例（design_frame_service-08.jpg）

   左：事例の切り替えボタン＋事例1件  ／  右：メリットのパネル

   2026-08-23、カテゴリでの絞り込みから「事例①②③…を1件ずつ切り替える」形に変更した。
   サンプルも1件だけを大きく見せる構成になっている。
   ========================================================================== */

.b-works {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
  margin-top: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

/* --- 事例の切り替えボタン --- */

.b-works__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.9vw, 12px);
  margin-bottom: clamp(16px, 2.2vw, 30px);
}

.b-works__tab {
  min-height: 34px;
  padding: 0.35em 1.1em;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: var(--fw-label);
  color: var(--c-ink);
  background-color: #fff;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.b-works__tab:hover {
  border-color: var(--b-cta);
  color: var(--b-cta);
}

.b-works__tab.is-active {
  border-color: var(--b-cta);
  background-color: var(--b-cta);
  color: #fff;
}

/* --- 事例（1件ずつ表示。切り替えはJS） --- */

.b-works__list {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
}

/* --- ビフォーアフターの比較スライダー（2026-08-23 指示） ---

   トップ（案A）で作った比較スライダーをそのまま流用している。
   見た目は style.css「11. 比較スライダー」、動きは main.js の initBeforeAfter()。
   service/index-b.html は main.js を読んでいるので、**このページ用のJSは要らない。**
   つまみのドラッグ・クリック・キーボード（←→）で境界が動く。

   ここで上書きしているのは枠の形だけ。

   ■ 4:3 にそろえた理由
   受領した写真は縦位置（3:4）と横位置（4:3）が混ざっている。
   縦位置のまま出すと枠が 674×899（1600px幅）と画面より高くなり、事例を切り替えるたびに
   枠の高さも変わってしまう。**中央で 4:3 に切って全件そろえた**（シミはすべて枠内に残っている）。
   画像側も 800×600 で書き出してあるので、表示のためだけの余分な画素は持っていない。

   ■ 幅に上限を置いている理由
   1023px以下は本文が1カラムになるため、枠が 961px まで広がる（1023px幅のとき）。
   画像は800pxなので、上限を置かないと拡大表示になってぼやける。 */

.b-work .ba__frame {
  /* width が無いと、margin-inline: auto でグリッド項目が中身の幅（＝0）に縮む */
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

/* パネルにフォーカスが当たったときの枠。キーボードで読み進める人向け */
.b-work:focus-visible {
  outline: 2px solid var(--b-cta);
  outline-offset: 4px;
  border-radius: clamp(14px, 2vw, 24px);
}

.b-work {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
}

.b-work[hidden] {
  display: none;
}

.b-work .b-ph {
  --ph-r: clamp(14px, 2vw, 24px);
}

.b-work__title {
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  color: var(--c-ink);
}

.b-work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.b-tag {
  padding: 0.25em 0.9em;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  font-size: clamp(10px, 0.9vw, 12px);
  color: var(--c-text-sub);
}

.b-work__text {
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.95;
}

/* --- メリットのパネル --- */

/* 【重要】縦1画面に収める（2026-08-23 指示）。
   事例が1件ずつの表示になって左カラムが短くなったため、
   右のパネルだけが長く伸びると釣り合わない。
   下の 1024px以上のブロックで max-height を掛けているほか、
   ここの文字と余白も、行数が減るように詰めてある。 */
.b-merit {
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--b-line);
  border-radius: clamp(16px, 2.2vw, 32px);
  /* 地色が薄い水色になったので白にして浮かせる（2026-08-24） */
  background-color: #fff;
}

.b-merit__title {
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  text-align: center;
  color: var(--c-ink);
}

.b-merit__list {
  display: grid;
  gap: clamp(10px, 1.1vw, 15px);
  margin-top: clamp(12px, 1.4vw, 18px);
}

.b-merit__term {
  position: relative;
  padding-left: 1.1em;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-title);
  line-height: 1.55;
  color: var(--b-title);
}

.b-merit__term::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: var(--b-accent-light);
}

.b-merit__desc {
  margin-top: 0.25em;
  padding-left: 1.1em;
  font-size: clamp(11px, 0.95vw, 13px);
  line-height: 1.72;
}

.b-merit .b-svc-btn {
  margin-top: clamp(12px, 1.4vw, 18px);
  width: 100%;
}

@media (min-width: 1024px) {
  .b-works {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    column-gap: clamp(24px, 3vw, 44px);
  }

  /* 事例を切り替えるあいだ、メリットが見えている状態にする。

     **高さは1画面ぶんを超えない**（2026-08-23 指示）。
     追従ヘッダーの下に付くので、使える高さは「画面の高さ − ヘッダー − 上下の余白」。
     100vh ではなく 100svh を使っているのは、スマホのアドレスバーの伸縮で
     高さが跳ねないようにするため（トップの FV と同じ考え方）。

     文字と余白を詰めてあるので、縦900px以上の画面なら中の送りは出ない。
     それより縦が短い画面では、はみ出したぶんだけパネルの中が送れる。 */
  .b-merit {
    position: sticky;
    top: calc(var(--b-hd) + 16px);
    max-height: calc(100svh - var(--b-hd) - 32px);

    /* 送るのは真ん中の一覧だけ。見出しと「料金を見る」は常に見えている状態にする。
       パネルごと overflow: auto にすると、縦の短い画面でボタンが隠れてしまう */
    display: flex;
    flex-direction: column;
  }

  .b-merit__title,
  .b-merit .b-svc-btn {
    flex-shrink: 0;
  }

  /* min-height: 0 が無いと、flex の子は中身より小さくならず送りが出ない */
  .b-merit__list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* 1023px以下は指で押すので、タブも高さ44px以上にする */
@media (max-width: 1023px) {
  .b-works__tab {
    min-height: 44px;
  }
}

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

/* ==========================================================================
   S-13. よくあるご質問（design_frame_service-09.jpg）

   .b-faq は home-b.css の指定をそのまま使う。
   トップは中央寄せの .b-sechead を前に置くが、こちらは左寄せの
   .b-svc-sec__title ＋ リードなので、上の余白だけ調整する。
   ========================================================================== */

.b-svc-sec--faq .b-faq__list {
  width: 100%;
  margin-top: clamp(24px, 3.4vw, 48px);
}

/* 本文カラムの中に入るぶん、トップより1枚の幅が狭い。
   質問文が2行になっても収まるよう、ピル型をやめて角丸にしている */
.b-svc-sec--faq .b-faq__item {
  border-radius: clamp(16px, 2.4vw, 32px);
}

.b-svc-sec--faq .b-faq__q {
  min-height: 0;
  padding: 1em 1.2em 1em 1.4em;
  font-size: clamp(12px, 1.05vw, 15px);
}

.b-svc-sec--faq .b-faq__q::after {
  width: clamp(26px, 2.6vw, 36px);
}

.b-svc-sec--faq .b-faq__a {
  padding: 0 1.4em 1.2em 1.4em;
  font-size: clamp(11px, 1vw, 14px);
}

@media (max-width: 767px) {
  .b-svc-sec--faq .b-faq__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   S-14. 出現アニメーション（2026-08-26 指示）

   スクロールで画面に入ったとき、セクションの中身を順に出す。
   合図（[data-rv] → .is-in）は service-b.js の initSvcReveal()。
   **動きの中身はすべてここにある。**

   **2つのクラスで二重に閉じ込めている。**

   1. `.rv-ready` … service-b.js が「動かせる」と判断したときだけ <html> に付く鍵。
      JSが落ちた場合・IntersectionObserver が無い場合・「動きを減らす」設定のときは
      付かないので、**中身が見えなくなる事故が起きない。**
      （逆に言うと、この鍵を外して書くと事故る。必ず .rv-ready から書き始めること）
   2. `.b-rv-page` … **このアニメーションを使うページの <main> に付けるクラス。**
      2026-08-26 現在、付いているのは `/service/` と `/price/` の2ページ。
      **会社概要（3箇所）も .b-svc-sec__title を使い、しかも service-b.js を読んでいる。**
      これが無いとあちらの見出しまで動き出す。
      （もとは .b-rv-page という名前だったが、料金ページにも付けることになり、
        「サービスページ用」と読める名前が実態と合わなくなったので改名した）

      ⚠️ このコメントの中で、強調のアスタリスク2つの直後にスラッシュを続けないこと。
      その並びはコメントの終端記号そのものになり、**そこでコメントが閉じてしまう。**
      2026-08-26 に実際にこれで壊した。パス名を強調して書いた1行が原因で、
      直後の .b-rv-page ルールがパーサに捨てられ、--rv-ease が未定義になり、
      それを使う transition 宣言が丸ごと無効化。イージングも時間も効かず、
      遅延の時点で各要素が瞬間表示される「カクカクした」動きになっていた。
      パス名を書くときはバッククォートで囲むか、日本語の名前で書くこと。

   1つずつずらすものは、JSが子に --i（0,1,2…）を振り、
   ここで transition-delay: calc(var(--i) * ○ms) に使っている。

   **⚠️ transition は「隠す側」ではなく「出す側（.is-in）」に書くこと。**
   CSSトランジションは *変化後* のスタイルが持つ transition を見る。つまり、

     ・.rv-ready が付く（隠れる）瞬間 … 出す側にしか transition が無い＝一瞬で隠れる
     ・.is-in が付く（出てくる）瞬間 … transition が効く＝これまでどおり動く

   隠す側に書くと、**読み込み直後に画面内の中身がフェードアウトして見える。**
   2026-08-26 に実際に起きた：1440pxで #business の見出しが画面の89%の位置にあり、
   発火線（80%）に届かないまま opacity 1→0 でゆっくり消えていた（ログ207）。
   発火線を下げるほど、この「見えているのに発火しない帯」は広がる。
   ========================================================================== */

.b-rv-page {
  /* **動きのカーブ。ここを変えると全部の動きの印象が変わる。**

     2026-08-26（1回目）：もとの cubic-bezier(0.22, 0.61, 0.36, 1)／0.42〜0.6s は
     短すぎて、動きの大半が最初の 150ms に集中し「カクッ」と止まって見えていた。
     いったん easeOutExpo 相当（0.16, 1, 0.3, 1）にした。

     2026-08-26（2回目）：**その expo は出だしが強すぎた。**
     開始直後の速度が最終速度の約6倍あり、時間の1割ちょっとで6割まで進んでしまう。
     結果「パッと出て、あとは動いているのか分からない」形になり、
     指示にあった「開始から速度が落ちていき、所定の位置に落ち着く」感じにならなかった。

     **いまは easeOutCubic 相当。** 出だしの速度は expo の約半分で、
     減速していく過程そのものが目で追える。これが「ふわっと落ち着く」の中身。
     さらに強く減速させたいなら 0.25,1,0.5,1（Quart）、
     もっと素直に等速寄りにするなら 0.5,1,0.89,1（Quad）へ。 */
  --rv-ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* 動きの長さ。**opacity をわざと短く、transform を長く残している。**
     先に色が乗り、そのあと位置だけがゆっくり落ち着くので「ふわっと」になる。
     2つを同じ長さにすると、色と位置が同時に止まって固い印象になる。
     2026-08-26 の指示で 2段階に伸ばした：1s / 0.72s → 1.35s / 1s → いまの 1.6s / 1.15s。 */
  --rv-move: 1.6s;
  --rv-fade: 1.15s;
}

/* --- S-14-1. セクションタイトル：下からふわっと上がってくる ---

   **2026-08-26 に「1文字ずつ左上から降ってくる」形から作り直した。**
   1文字ずつは動きが賑やかで、ゆっくりにするほど間延びして見えた。
   いまは**見出しをひとかたまりで**、下から静かに上げている。

   そのため .b-svc-sec__char（1文字ずつの span）には**もう何もしていない。**
   あの span は交互配色のために service-b.js が作っているもので、そちらは今も生きている。
   1文字ずつに戻したくなったら、char に opacity/transform と
   transition-delay: calc(var(--i) * ○ms) を書けばよい（--i を振る処理も戻すこと）。

   Pettomo の見出しだけは .b-svc-sec__head の外（.b-pettomo__intro の中）にあるので、
   ここでは当たらない。**あちらは親の .b-pettomo__intro といっしょに動く**（S-14-3）。 */

/* 見出しの入れ物は2通りある。
     サービスページ … <div class="b-svc-sec__head" data-rv> の中に <h2>（飾りとセットのため）
     料金ページ ……… 素の <h2 class="b-svc-sec__title" data-rv>（飾りが無いので入れ物も無い）
   どちらでも同じ動きになるよう、両方を書いてある。 */

.rv-ready .b-rv-page [data-rv].b-svc-sec__head .b-svc-sec__title,
.rv-ready .b-rv-page .b-svc-sec__title[data-rv] {
  opacity: 0;
  transform: translateY(30px);
}

.rv-ready .b-rv-page [data-rv].b-svc-sec__head.is-in .b-svc-sec__title,
.rv-ready .b-rv-page .b-svc-sec__title[data-rv].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--rv-fade) var(--rv-ease), transform var(--rv-move) var(--rv-ease);
}

/* --- S-14-2. 黄色い手書きの飾り：左からフェード ---

   **2026-08-26 指示でモバイルにも同じ動きを付けた。**
   もとは飾り自体が 767px以下で display:none だったため、この節ごと
   @media (min-width: 768px) の中に入れていた。S-16 で飾りを出すようにしたので、
   **基本の2ルールはメディアクエリの外に出してある。**

   下の --over の2ルールだけは 768px以上のまま。
   あちらは translateY(-50%) で縦中央に置く前提だが、
   **モバイルでは S-16 が「見出しの右下」に置いていて縦中央ではない。**
   -50% を持ち込むと飾りが上へずれる。

   モバイルの落ち着き先の薄さ（0.22）は S-16 で上書きしている。 */

.rv-ready .b-rv-page [data-rv] .b-svc-sec__script {
  opacity: 0;
  transform: translateX(-5%);
}

.rv-ready .b-rv-page [data-rv].is-in .b-svc-sec__script {
  /* S-4 の既定の薄さに戻す */
  opacity: 0.3;
  transform: none;
  transition: opacity 1.05s var(--rv-ease), transform 1.45s var(--rv-ease);
  /* **タイトルが読めるようになってから動き始める**（2026-08-26 指示）。

     はじめは var(--rv-fade) と同じ 1.15s 待たせていたが、同日「もう少し手前に」の
     指示で **--rv-fade の 6割**にした。タイトルの opacity はこの時点で約9割まで
     上がっているので、「タイトルが出てから」は保ったまま、待ちだけ短くなる。

     **固定値ではなく比率で書いている。** --rv-fade で全体の速さを変えたとき、
     ここだけ取り残されて関係が崩れるのを防ぐため。
     動き自体（左からのフェード）は変えていない。 */
  transition-delay: calc(var(--rv-fade) * 0.6);
}

@media (min-width: 768px) {
  /* **--over の6枚は translateY(-50%) で縦中央に置いている（S-4）。**
     transform をそのまま上書きすると中央寄せが消えて飾りが下へずれる。
     必ず -50% を含めて書くこと。 */
  .rv-ready .b-rv-page [data-rv] .b-svc-sec__script--over {
    transform: translate(-5%, -50%);
  }

  .rv-ready .b-rv-page [data-rv].is-in .b-svc-sec__script--over {
    transform: translateY(-50%);
  }

  /* 中央ぞろえの見出し（S-4）は translate(-50%, -50%) で置いている。
     左からのずれ（-5%）は、その -50% に足して書く。
     **-50% を落とすと飾りが右へ半分ずれる。**

     **⚠️ .b-svc-sec__head--center は [data-rv] と同じ要素に付く。**
     あいだに空白を入れて書くと「子孫」の意味になり、**一致しない**（2026-08-26 に踏んだ）。
     .is-in と続けて書くこと。 */
  .rv-ready .b-rv-page [data-rv].b-svc-sec__head--center .b-svc-sec__script--over {
    transform: translate(-55%, -50%);
  }

  .rv-ready .b-rv-page [data-rv].is-in.b-svc-sec__head--center .b-svc-sec__script--over {
    transform: translate(-50%, -50%);
  }
}

/* --- S-14-3. 写真と文章：下から上がりながらフェード ---

   #business / #home の「写真＋文章」と、Pettomo の「商品写真＋リード」。
   文章のほうを少し遅らせて、写真→文章の順に見えるようにしている。 */

.rv-ready .b-rv-page [data-rv] .b-svc-sec__img,
.rv-ready .b-rv-page [data-rv] .b-svc-sec__mediatext,
.rv-ready .b-rv-page [data-rv] .b-pettomo__media,
.rv-ready .b-rv-page [data-rv] .b-pettomo__intro,
.rv-ready .b-rv-page [data-rv] .b-biz__img,
.rv-ready .b-rv-page [data-rv] .b-biz__body {
  opacity: 0;
  transform: translateY(26px);
}

.rv-ready .b-rv-page [data-rv].is-in .b-svc-sec__img,
.rv-ready .b-rv-page [data-rv].is-in .b-svc-sec__mediatext,
.rv-ready .b-rv-page [data-rv].is-in .b-pettomo__media,
.rv-ready .b-rv-page [data-rv].is-in .b-pettomo__intro,
.rv-ready .b-rv-page [data-rv].is-in .b-biz__img,
.rv-ready .b-rv-page [data-rv].is-in .b-biz__body {
  opacity: 1;
  transform: none;
  transition: opacity var(--rv-fade) var(--rv-ease), transform var(--rv-move) var(--rv-ease);
}

/* 文章は写真より少し遅らせる。**上の .is-in より後に書くこと**（詳細度が同じため） */
.rv-ready .b-rv-page [data-rv].is-in .b-svc-sec__mediatext,
.rv-ready .b-rv-page [data-rv].is-in .b-pettomo__intro,
.rv-ready .b-rv-page [data-rv].is-in .b-biz__body {
  transition-delay: 260ms;
}

/* --- S-14-4. カードを1つずつ出す ---

   [data-rv="stagger"] の直下の子に、JSが --i を振っている。
   DOM順に振るので、グリッドでは自然に「左上から右下へ」の順になる。
   下の「向き」の指定は、あとに書いてあるぶん基本形より優先される
   （どちらも詳細度は同じ）。 */

.rv-ready .b-rv-page [data-rv="stagger"] > * {
  opacity: 0;
}

.rv-ready .b-rv-page [data-rv="stagger"].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--rv-fade) var(--rv-ease), transform var(--rv-move) var(--rv-ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}

/* **カードはすべて「下から」に統一した（2026-08-26 指示）。**
   対応可能な施設例は、もとは左下からの斜めだったが、他と同じ真上向きにそろえた。
   **「左上から右下の順」は向きではなく順番のこと**で、それは --i（DOM順）が担っている。
   グリッドの並び順がそのまま DOM順なので、指定を足さなくても左上→右下に出る。 */
.rv-ready .b-rv-page .b-tiles > *,
.rv-ready .b-rv-page .b-records > *,
.rv-ready .b-rv-page .b-voices > *,
.rv-ready .b-rv-page .b-reasons > *,
.rv-ready .b-rv-page .b-faq__col > *,
/* ここから料金ページ（2026-08-26）。方式カード2枚／シミュレーター／お支払い方法6枚 */
.rv-ready .b-rv-page .b-price-cols > *,
.rv-ready .b-rv-page .b-sim > *,
.rv-ready .b-rv-page .b-pay > * {
  transform: translateY(24px);
}

/* ご注文の流れ：ここだけ左側から（2026-08-26 指示）。
   横に動くぶん、間隔も他より広く取っている（同日「もっとゆっくり」の指示で 130→180ms）。 */
.rv-ready .b-rv-page .b-steps > * {
  transform: translateX(-34px);
}

/* 間隔は出す側に。**上の [data-rv="stagger"].is-in > * より後に書くこと**（詳細度が同じため） */
.rv-ready .b-rv-page .b-steps.is-in > * {
  transition-delay: calc(var(--i, 0) * 180ms);
}

/* --- S-14-5. 洗浄の手順：カードごとに、写真と文章が「一緒に」下から ---

   [data-rv] は .b-method__item の1枚ずつに付いている。
   まとめてではなく**カードが画面に入るたび**に、そのカードが下から上がってくる。

   **2026-08-26 の指示で、写真と文章のずらし（220ms）をやめて同時にした。**
   1枚のカードの中で写真と文章が別々に動くと、カードが分解して見えていた。 */

.rv-ready .b-rv-page [data-rv] .b-method__media,
.rv-ready .b-rv-page [data-rv] .b-method__body {
  opacity: 0;
  transform: translateY(26px);
}

.rv-ready .b-rv-page [data-rv].is-in .b-method__media,
.rv-ready .b-rv-page [data-rv].is-in .b-method__body {
  opacity: 1;
  transform: none;
  transition: opacity var(--rv-fade) var(--rv-ease), transform var(--rv-move) var(--rv-ease);
}

/* --- S-14-6. クリーニング事例：ブロックごと1回だけ下からフェード ---

   **中の .b-work はタブで1件ずつ切り替えるパネル**（service-b.js の initServiceWorks）。
   1枚ずつの出現を入れるとタブ操作とぶつかるので、外側の箱だけを動かす。

   **ここだけ transform を使わず、フェードだけにしている（2026-08-26）。**
   この箱は画面よりずっと大きく、しかも中の .b-merit が position: sticky（1024px以上）。
   大きな箱を動かすと sticky の位置を毎フレーム計算し直すことになり、
   **ページ内でいちばんカクつきやすい場所**だった。フェードだけなら合成で済む。 */

.rv-ready .b-rv-page [data-rv="block"] {
  opacity: 0;
}

.rv-ready .b-rv-page [data-rv="block"].is-in {
  opacity: 1;
  transition: opacity 1.5s var(--rv-ease);
}

/* --- S-14-7. まとまりごと下から1回（2026-08-26／会社概要ページで追加） ---

   block との違いは **transform を使うかどうか**だけ。
   block は「中に position: sticky があって動かせない大きな箱」のための例外で、
   フェードしかしない。そういう事情が無いものは、こちらの up を使う。

   1つずつずらす stagger も合わない場面のための形。たとえば
     ・ご挨拶の文章 … 段落ごとに出すと読み物としてうるさい
     ・会社情報の表 … 13行を stagger すると 3.4秒かかって間延びする
   こういう「1つのまとまり」を、素直に下から1回だけ出す。 */

.rv-ready .b-rv-page [data-rv="up"] {
  opacity: 0;
  transform: translateY(26px);
}

.rv-ready .b-rv-page [data-rv="up"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--rv-fade) var(--rv-ease), transform var(--rv-move) var(--rv-ease);
}

/* ==========================================================================
   S-15. ご注文の流れの数字（2026-08-26 指示）

   TOPの事業カードの飾り数字（home-b.css の .b-service__num）と同じ書体にそろえる。
   **大きさと色は変えていない。** TOPは背景に沈ませた飾りだが、
   こちらは工程番号として読ませる必要があるため。

   Pattaya は1ウェイト（400）しか無いので、太字の合成を避けて 400 を明示している。
   **service/index-b.html の Google Fonts に family=Pattaya を足してある**
   （もとは「このページでは使わない」として読み込んでいなかった）。
   洗浄の手順（.b-method__num）は見出しの行内に小さく入るため、変更していない。

   **囲いは .b-steps（ご注文の流れ）にしてある。** ページのクラスで囲っていたが、
   2026-08-26 に料金ページも同じアニメーションを使うようになり、
   ページのクラスが「アニメーションを使うページ」の意味に変わったため、
   セクションそのもので囲い直した。.b-steps はサービスページにしか存在しない。
   ========================================================================== */

.b-steps .b-step__num {
  font-family: "Pattaya", var(--ff-body);
  font-weight: 400;
}

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

   この日の指示は「サービスページのモバイル修正」。**まとめてここに置いている。**
   各コンポーネントの近くに散らすと、モバイルだけの調整なのか元の設計なのかが
   あとから見分けられなくなるため。**戻すときはこのブロックごと消せばよい。**

   中身はすべて max-width: 767px の中にあるので、**768px以上には一切影響しない。**
   最後にある「カードを1枚ずつ出す」だけは幅に関係なく効かせる（理由はそこに書いた）。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 1. FVのイラストと作業員を出さない ---
     指示「FVの部屋画像とアニメーションを非表示」。
     .b-svc-hero__media の中に イソメトリック図（fv-bg）と作業員2人が入っているので、
     入れ物ごと消せば両方消える。**画像そのものは残してある**ので、
     この指定を消せば元どおり出る。768px以上は従来どおり右カラムに出る。

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

  /* --- 2. 見出しの改行の出し分け ---
     モバイルだけ改行の位置を変える。HTML側は
       .br-pc ………………… PCでだけ改行したい <br>（モバイルでは消す）
       .b-svc-sec__title-line … モバイルでだけ行を分けたいまとまり
     の2つ。**display:none にした <br> は改行そのものが起きない。** */
  .br-pc {
    display: none;
  }

  .b-svc-sec__title-line {
    display: block;
  }

  /* --- 3. 小見出しを中央に ---
     指示「対応可能な施設例／施工実績例 を中央表示に」。
     .b-subhead は「波線を文字幅にそろえる」ために width: fit-content なので、
     中央に置くには margin-inline: auto が要る（justify-items だけでは動かない）。
     既存の .b-subhead--center と同じ指定。
     **同じ部品の3つ目（ご自宅セクションの「対応可能なラグ・絨毯例」）にも当てている。**
     2つだけ中央にすると、同じ見た目の小見出しで揃わなくなるため。 */
  .b-subhead {
    justify-items: center;
    margin-inline: auto;
  }

  /* --- 4. 注記ボックスのアイコンを出さない ---
     指示「オフィスだけに限らず〜／ウォッシュマンでは、一般の〜／お見積り時に〜 のアイコンを非表示」。
     3か所とも同じ .b-notebox なので1指定で足りる。
     **列の指定も1列に戻すこと。** アイコンを消しただけだと、
     空になった1列目ぶんの gap が本文の左に残る。 */
  .b-notebox {
    grid-template-columns: minmax(0, 1fr);
  }

  .b-notebox__icon {
    display: none;
  }

  /* **アイコンを消した副作用の後始末。**
     .b-notebox--wide（「お見積り時に〜」）だけ3つ目の子にボタンが入っている。
     もとは2列だったので、このボタンはアイコンの下（＝狭い1列目）に落ちて縮んでいた。
     1列にしたことで全幅に伸びたため、他のピルボタンと同じ「中身の幅・中央」にそろえる。
     inline-flex のままでは margin: auto が効かないので display: flex にする。 */
  .b-notebox .b-svc-btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  /* --- 5. 「Amazonで購入する」を他のボタンと同じ形に ---
     .b-pettomo__foot は1列のグリッドで、既定の stretch でボタンが全幅に伸びていた。
     全幅だと .b-svc-btn の justify-content: space-between が効いて
     「文字は左端・矢印は右端」に離れ、他のピルボタンと違う見た目になっていた。
     中身の幅に戻して中央に置く。 */
  .b-pettomo__foot .b-svc-btn {
    justify-self: center;
  }

  /* --- 6. メリットの「料金を見る」を他のボタンと同じ設定に ---
     指示「カード内料金を見るボタンを他のボタンと同じサイズ設定に」。
     この1つだけ .b-svc-btn--sm（44px・padding 0.6em/1.2em）で、
     さらに .b-merit .b-svc-btn の width: 100% で全幅に伸びていた。
     基本形（.b-svc-btn）と同じ寸法に戻して中央に置く。
     高さは home-b.css の --b-btn-minh（48px）＝他のボタンと同じ値。 */
  .b-merit .b-svc-btn {
    /* **inline-flex のままだと margin: auto が効かない**（トップの .b-service__btn と同じ罠）。
       ブロックの flex にしてから中央に置く。カードの見出しが中央なので、
       ボタンも中央にそろえている。 */
    display: flex;
    width: fit-content;
    margin-inline: auto;
    min-height: var(--b-btn-minh, 48px);
    padding: 0.7em 1.6em;
    gap: 1.6em;
  }

  /* --- 7. 実績エンブレムを三角形に ---
     指示「上1枚／下2枚横並びの2段に、それぞれサイズを縮小し三角形の位置関係に」。

     2列のグリッドにして、1枚目だけ2列ぶんをまたいで中央に置く。
     **3枚を同じ幅にするため、1枚目の幅は「1列ぶん」を計算して与えている**
     （2列ぶんをまたぐと既定では全幅になってしまう）。
     こうすると上1・下2の正三角形に近い並びになる。

     幅が 226px → 170px（390px時）に縮むぶん、月桂冠の中の文字も cqi 基準で一緒に縮む。
     小さくなりすぎるので、文字だけ 6.5cqi → 7.2cqi に上げて実寸を戻している。

     **文字を大きくしたら、入れ物（.b-award__body の width）も同じ比率で広げること。**
     文字だけ上げると「大手集客サイト」が月桂冠からはみ出し、「平均評価」が
     2行に割れる。58% × 7.2/6.5 ＝ 64%。 */
  .b-awards {
    --aw-gap: clamp(10px, 3vw, 20px);

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aw-gap);
  }

  .b-award {
    width: 100%;
    max-width: none;
  }

  .b-award:first-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--aw-gap)) / 2);
  }

  .b-award__body {
    width: 64%;
    font-size: 7.2cqi;
  }

  /* --- 8. 見出しの黄色い飾りを出す ---
     指示「各セクションのタイトルで、黄色薄文字が設定されている箇所は表示」。

     **768px以上とは置き方を変えている。** あちらの --over は
     :has() で見出しの箱を文字幅に縮め、タイトルの語末に飾りの左端を重ねる作りだが、
     モバイルは見出しが2〜3行に折り返すので、その基準では位置が定まらない。
     ここでは種類を問わず「見出しの右下に薄く敷く」1つの置き方にそろえている。

     タイトルは z-index: 1 で前面にある（S-7 の .b-svc-sec__head .b-svc-sec__title）ので、
     飾りに重なっても文字は読める。**それでも重なりが気になるぶん、
     768px以上の 0.3 より薄い 0.22 にしてある。** */
  .b-svc-sec__script {
    display: block;
    position: absolute;
    right: 0;
    bottom: -4%;
    z-index: 0;
    width: 62%;
    height: auto;
    max-width: none;
    opacity: 0.22;
    pointer-events: none;
  }

  /* 出現アニメーションの落ち着き先。S-14-2 は 768px以上の薄さ（0.3）で止まるので、
     モバイルの 0.22 に上書きする。**S-14-2 より後に書くこと**（詳細度が同じため）。
     アニメーションそのもの（左からフェード）は S-14-2 と共通。 */
  .rv-ready .b-rv-page [data-rv].is-in .b-svc-sec__script {
    opacity: 0.22;
  }
}

/* --- 9. カードを1枚ずつ出す（幅に関係なく効かせる） ---

   指示「対応可能な施設例のカード／理由カードに出現時アニメーション」。

   もともと .b-tiles と .b-reasons には [data-rv="stagger"] が付いていて、
   **箱が画面に入った瞬間に中のカードを順に出す**作りだった。
   ところがモバイルでは箱そのものが画面より背が高くなるため、
   **下のほうのカードは画面の外にいるあいだに出終わってしまい、
   スクロールして見えたときには動きが終わっている。**

   そこで service-b.js が、モバイルのときだけ箱ではなく**カード1枚ずつ**を監視し、
   そのカードに .is-in を付ける。この指定はそれを受ける側。

   **メディアクエリの外に置いている。** 中に入れると、
   モバイル幅で読み込んだあとに画面を広げたとき、この指定だけ効かなくなり
   （箱には .is-in が付いていないので）出ていたカードが消える。

   間隔（transition-delay）は 0 にする。1枚ずつ出すときは順番待ちが要らない。
   詳細度は上の [data-rv="stagger"].is-in > * と同じなので、**必ずあとに書くこと。** */

.rv-ready .b-rv-page [data-rv="stagger"] > .is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--rv-fade) var(--rv-ease), transform var(--rv-move) var(--rv-ease);
  transition-delay: 0s;
}

/* ==========================================================================
   S-17. 対応エリア（2026-08-26 指示）

   **新しい見た目は作っていない。** 並べ方と、流用した部品の打ち消しだけを書く。
     見出し・リード・注記・ボタン … 他セクションと同じ部品
     都県のプルダウン ………………… よくあるご質問と同じ .b-faq__item / .b-faq__q / .b-faq__wrap
     市区町村 …………………………… クリーニング事例と同じ .b-tag

   **プルダウンにFAQの部品を使っているのは、開閉のアニメーションを共有するため。**
   main-b.js の initBFaq() は .b-faq__item を探すので、このクラス名でないと
   高さのアニメーションが効かず、開いた瞬間に中身が飛び出す。

   市区町村は110件ある。**テキストで書く**こと（CLAUDE.md「対応エリアを画像で表現しない」）。
   ========================================================================== */

.b-area {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(24px, 3vw, 40px);
}

/* FAQの見出しは頭に「Q.」が付く（home-b.css の .b-faq__q::before）。
   都県名には要らないので、ここだけ消す。**右端の丸い矢印はそのまま使う。** */
.b-area__q::before {
  content: none;
}

/* 都県名の右に件数を小さく添える。矢印（::after）は margin-left: auto で
   右端に寄るので、この span は都県名のすぐ隣に並ぶ。 */
.b-area__count {
  font-size: 0.85em;
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
}

.b-area__count::before {
  content: "（";
}

.b-area__count::after {
  content: "件）";
}

/* 中身の間隔はグリッドの gap に一本化する（.b-faq__a の padding はそのまま活かす） */
.b-area__item .b-faq__a {
  display: grid;
  gap: clamp(8px, 1vw, 12px);
}

/* 「23区」「市部」のような、都県の中の区分け。東京都だけで使っている */
.b-area__label {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  color: var(--c-text-sub);
}

.b-area__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.8vw, 10px);
}

/* .b-tag は事例で <span> として使っている。ここでは <li> に付けるので、
   箱の性質だけそろえる（見た目の指定は S-12 のものがそのまま効く）。 */
.b-area__list .b-tag {
  display: inline-flex;
  align-items: center;
}