@charset "UTF-8";
/* ==========================================================================
   home-b.css — デザイン案B 専用スタイル

   案A（index.html）には一切影響させない。
   そのためクラス名はすべて .b-header__* のように「b-」で始める接頭辞を付け、
   案Aが使う .site-header / .header 系とは名前が重ならないようにしている。
   このファイルを読み込むのは index-b.html だけ。

   TODO: 案が確定したら、不採用側のファイル（このファイル または home.css）を削除する。
   ========================================================================== */

/* ==========================================================================
   B-0. 案B用のカラー

   デザインサンプル design_frame_b-01.jpg から採色した実測値。
   docs/03_design-rules.md の案B（ディープグリーン）とは方向性が変わっているため、
   確定するまでは theme-b.css を書き換えず、案B専用の変数としてここに閉じ込める。
   ========================================================================== */

.theme-b {
  /* ナビ・社名・キャッチの文字色（サンプル実測 rgb(18,102,146)） */
  --b-ink: #126692;
  /* ホバー・現在地。--b-ink を一段濃くした値 */
  --b-ink-strong: #0c4b6d;
  /* 「お問い合わせ」ボタンの塗り（サンプル実測 rgb(23,110,187)） */
  --b-cta: #176ebb;
  --b-cta-dark: #125692;
  /* ピルボタンの塗り。色はTOPのFV実績バッジ（.b-fv__badge-text）と同じ青系だが、
     **バッジの4段（明→暗→暗→明）はボタンには使わない。** あの反転が金属的な艶の正体で、
     2026-08-25 の指示「メタリック感が強すぎる／もっとナチュラルに」で素直な2色に変えた。
     方向も同指示で **斜め右上（45deg）**。0%＝左下が濃く、100%＝右上が明るい。
     バッジ側の「白い光が流れる帯」（.is-shine）はボタンには入れない（当初からの指示）。

     **明るい側を #4a9fd6（バッジの最明色）まで上げないこと。** 白文字とのコントラストが
     2.91:1 まで落ちて WCAG AA（4.5:1）を割る。#1c74b6 で 4.98:1、濃い側の #0a4f86 で 7.55:1。

     このファイルは全ページが読み込むので、service-b.css を読まないお知らせページにも届く。
     使う側は background-color（非対応時のフォールバック）の上に background-image で重ねること。 */
  --b-btn-grad: linear-gradient(45deg, #0a4f86 0%, #1c74b6 100%);
  /* ピルボタンの最小の高さ。**トップと下層で共有する。**
     2026-08-26 指示：モバイルでセクション内のボタンの縦幅を少し増やす。

     上下の padding が em 基準なので、文字が縮む幅（およそ471px以下）でボタンも一緒に縮み、
     390pxで「詳しく見る」40.5px・「View more」38.2px、375pxで 39.7px・36.8px まで落ちていた。
     `CLAUDE.md` Responsive Rules の「ボタンの高さ44px以上」に反する状態だった。

     値は下層ページのピルボタン（`service-b.css` の .b-svc-btn）が元から持っていた 48px にそろえた。
     新しい数字を増やさずに済み、トップと下層でボタンの厚みが一致する。

     **トップの3ルール（.b-service__btn ／ .b-price__btn ／ .b-news__more）では、
     1023px以下のメディアクエリの中でだけ指定すること。** 1024px以上は文字サイズが
     別のスケール（clamp(11px, 1.15vw, 17px)）で、そのまま当てるとノートPC幅
     （1024〜1200px前後）のボタンが厚くなり、見た目が変わってしまう。

     下層ページの .b-svc-btn は元から全幅で 48px を持っていたので、そのままこの変数に
     置き換えてある（値は同じなので見た目は変わらない）。**厚みを変えるときはここ1か所。** */
  --b-btn-minh: 48px;
  /* ヘッダー下の細い区切り線 */
  --b-hairline: rgba(18, 102, 146, 0.14);
  /* セクション見出し・タイトル・表ヘッダーの濃い青（サンプル実測 rgb(2,85,137)） */
  --b-title: #025589;
  /* ギザギザの上の線・番号・表ヘッダーの淡い青（サンプル実測 rgb(72,153,216)） */
  --b-accent-light: #4899d8;
  /* パネル・表の枠線 */
  --b-line: #afafaf;
  /* 白地と切り替えるセクションの背景。ブランドの青を薄く敷いた色。
     下端をさらに薄いほうへ送り、次の白いセクションへつなげる */
  --b-bg-tint: #e9f2fa;
  --b-bg-tint-light: #f6fafd;
  /* ヘッダーの高さ。ドロワー（メニュー）の上端をここに合わせるので変数にしてある。
     サンプル実測は 479/8000 = 5.99%（1440pxで86px）だったが、
     2026-08-25 の指示「展開前のメニューバー縦幅を狭く」で 4.6%（1440pxで66px）に下げた。
     ロゴ clamp(32px,3.4vw,54px) と社名の2行がこの高さに収まる下限が 46px。 */
  --b-header-h: clamp(46px, 4.6vw, 82px);
  /* フッターの角丸パネルの地色。フッターだけに使う。詳細は B-8。
     サンプル（design_frame_service.jpg）の実測は水色の rgb(0,185,239)＝#00b9ef だったが、
     2026-08-25 のクライアント指示「もう少し濃い青に」で #0077b6 へ変更した。
     水色→青の方向に色相を振りつつ一段暗くしてある。
     白文字とのコントラストが 2.29:1 → **4.87:1** になり、WCAG AA（4.5:1）も満たす */
  --b-footer-bg: #0077b6;

  /* フォントの指定はここには無い。2026-08-24 の指示（ログ153）で
     **theme-b.css に集約した**（タイトルとメニュー以外は Noto Sans JP）。
     もとはここで --ff-heading: var(--ff-body) として、theme-b.css の明朝を
     打ち消していたが、theme-b.css 側が Noto Sans JP になったので不要になった。
     切り分けを変えるときは theme-b.css の --ff-title のセレクタ一覧を直す。 */
}

/* ==========================================================================
   B-1. ヘッダー（デザインサンプル assets/image/sample/top/design_frame_b-01.jpg に準拠）

   サンプルは 8000×686px。1440px幅を基準に 0.18 倍して実寸に換算し、
   ビューポート幅に応じて clamp() で可変させている。

   1440px 換算の実測値（サンプル値 × 0.18）
   ┌──────────────────────┬────────┬────────┐
   │                      │ サンプル │ 1440px │
   ├──────────────────────┼────────┼────────┤
   │ ヘッダー全体の高さ    │  686   │ 123px  │
   │ 上下の余白（片側）    │  171   │  31px  │
   │ ロゴの高さ            │  344   │  62px  │
   │ ロゴ〜社名の間隔      │   39   │   7px  │
   │ 「カーペット〜」      │   65   │  12px  │
   │ 「ウォッシュマン」    │  119   │  21px  │
   │ ナビの文字            │  119   │  21px  │
   │ ナビの項目間隔        │  114   │  21px  │
   │ ナビ〜ボタンの間隔    │  145   │  26px  │
   │ ボタン                │ 904×245│ 163×44 │
   └──────────────────────┴────────┴────────┘

   左右の端はコンテンツ幅93%の位置（サンプルの x=225／x=7687 と一致）。
   ========================================================================== */

/* メニューを開くと main.js が body に overflow:hidden を付ける。そのとき
   スクロールバーが消えて中身の幅が数px広がり、ページ全体がわずかに拡大して見える。
   スクロールバーの居場所を常に確保しておけばズレない。
   このファイルは案Bの7ページしか読まないので、案Aには影響しない。 */
html {
  scrollbar-gutter: stable;
}

.b-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  border-bottom: 1px solid var(--b-hairline);
  /* 下スクロールで隠し、上スクロールで戻す（main.js が .is-hidden を付け外しする） */
  transition: transform var(--t-base);
  will-change: transform;
}

.b-header.is-hidden {
  transform: translateY(-100%);
}

.b-header__inner {
  /* 指定：コンテンツ両端は全体の93.5%の位置 */
  width: 93.5%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  padding-block: clamp(10px, 2.1vw, 34px);
}

/* --- 左：ロゴ＋社名 --- */

.b-header__brand {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 8px);
  flex-shrink: 0;
  /* 右のナビ・ボタンを右端へ寄せる */
  margin-right: auto;
}

/* ロゴは横長（400×341）。サンプルのロゴ枠と同じ高さにし、幅は縦横比で決まる */
.b-header__logo {
  flex-shrink: 0;
  display: block;
  height: clamp(32px, 3.4vw, 54px);
}

.b-header__logo img {
  width: auto;
  height: 100%;
}

.b-header__brand-text {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.7vw, 12px);
}

.b-header__brand-lead {
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: var(--fw-label);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--b-ink);
}

/* サンプルの字送りは 0。body の 0.02em を打ち消しておく */
.b-header__brand-name {
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--b-ink);
}

/* --- 右：グローバルナビ ---
   サンプルは1024px以上のPCレイアウトのみ。
   それ未満はハンバーガー（.header__toggle）＋ドロワーに切り替える。 */

.b-header__nav {
  display: none;
}

.b-header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .b-header__nav {
    display: block;
  }

  .b-header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.45vw, 23px);
  }

  .b-header__cta {
    display: inline-flex;
  }
}

.b-header__nav-link {
  position: relative;
  display: block;
  font-size: clamp(13px, 1.25vw, 20px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--b-ink);
  white-space: nowrap;
  transition: color var(--t-fast);
}

/* サンプルでは現在地（トップ）も他の項目と同じ見た目のため、
   現在地に印は付けない。ホバーのときだけ色を変えて下線を引く。
   現在地を示す必要が出たら、下の2つのセレクタに
   [aria-current="page"] を足すだけで復活する。 */
.b-header__nav-link:hover {
  color: var(--b-ink-strong);
}

/* ホバーの下線。位置がずれないよう擬似要素で描く */
.b-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}

.b-header__nav-link:hover::after {
  transform: scaleX(1);
}

/* --- 右端：お問い合わせボタン --- */

.b-header__cta {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: clamp(16px, 1.8vw, 29px);
  height: clamp(36px, 2.7vw, 43px);
  padding-inline: clamp(14px, 1.21vw, 20px);
  border-radius: 999px;
  background-color: var(--b-cta);
  font-size: clamp(13px, 1.25vw, 20px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  transition: background-color var(--t-fast), transform var(--t-fast);
}

.b-header__cta:hover {
  background-color: var(--b-cta-dark);
  transform: translateY(-2px);
}

/* --- ハンバーガー（.header__toggle は style.css の共通パーツを流用）---

   2026-08-25：**全幅でハンバーガーにした**（design_frame_fv_menu_FV.jpg）。
   style.css は 1024px以上でこれを display:none にしているので、案Bだけ打ち消す。
   PCのナビ列（.b-header__nav）と「お問い合わせ」ボタン（.b-header__cta）は
   マークアップごと外した。**この2つの指定はもう使っていない**（掃除は後回し）。

   サンプル実測（8000px幅基準／括弧内は1440pxでの実寸）：
   線の太さ 21(3.8px)／間隔 68(12px)／幅 237(43px)／色 #176ebb＝--b-cta。 */

.b-header .header__toggle {
  display: flex;
  width: clamp(30px, 2.96vw, 53px);
  height: auto;
  gap: clamp(7px, 0.85vw, 15px);
  padding: 0;
  margin-left: var(--space-3);
  margin-right: 0;
}

.b-header .header__toggle span {
  height: clamp(3px, 0.26vw, 5px);
  border-radius: 2px;
  background-color: var(--b-cta);
}

/* 開いたときの × 印。style.css の移動量（7px）は線2px・間隔5px用なので、
   太い線に合わせて「線の太さ＋間隔」ぶん動かし直す */
.b-header .header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(clamp(10px, 1.11vw, 20px)) rotate(45deg);
}

.b-header .header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(clamp(-20px, -1.11vw, -10px)) rotate(-45deg);
}

/* ヘッダーの高さをサンプルにそろえる（ドロワーの上端もこの値を使う） */
.theme-b .b-header__inner {
  min-height: var(--b-header-h);
  padding-block: 0;
}

/* ==========================================================================
   B-2. メニュー（ドロワー）
   デザインサンプル assets/image/sample/top/design_frame_fv_menu_menu.jpg に準拠

   2026-08-25：**PCのナビ列を廃止し、全幅でハンバーガー＋スライドメニューにした。**
   `.drawer` の枠組み（fixed・右からスライド・is-open）は style.css の共通パーツを流用し、
   中身（`.b-menu*`）を案B専用に作り直している。

   - **開く幅：PC（768px以上）は画面幅の 25.2%（＝おおよそ1/4）。SPは全幅。**
     ただし 25.2% が細くなりすぎる中間幅では 300px を下限にしている。
   - 背面は黒60%で覆う（`.drawer--b::before`）。**ヘッダーは覆わない**（サンプルどおり）。
   - 下層ページの行は**押すとセクション名が下に開く**（`.b-menu__sub`／main-b.js）。

   サンプル実測（8000px幅基準／括弧内は1440pxでの実寸）：

   | 項目 | サンプル | % | 1440px |
   |---|---|---|---|
   | パネル幅 | 2015 | 25.19% | 363px |
   | 覆い | 黒 0.60 | | |
   | パネル上端→ロゴ上端 | 204 | 2.55% | 37px |
   | 青ボタンの高さ | 365 | 4.56% | 66px |
   | 青ボタンの角丸 | 39 | 0.49% | 7px |
   | 行の高さ（区切り線の間隔） | 557 | 6.96% | 100px |
   | 行の文字 | 97/字 | 1.21% | 17.4px |
   | 行の右の丸アイコン | 126 | 1.57% | 23px |
   | SNSアイコン | 335 | 4.19% | 60px |

   パネル内の左右の余白は要素ごとに違う（サンプル実測）。パネル幅に対する％で持たせている：
   青ボタン 4.4%／区切り線 6.3%／文字 9.4%。
   ========================================================================== */

.drawer--b {
  /* style.css の inset:(header-h) 0 0 を上書きして右側の帯にする */
  inset: var(--b-header-h) 0 0 auto;
  /* 下層メニューを開くと中身が縦に伸びてスクロールバーが出て、その分だけ
     パネルの中身が狭くなる（2026-08-25 指摘）。スクロール自体は残して棒だけ隠す */
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  gap: 0;
  padding: 0;
  background-color: transparent;
}

/* **スライドさせるのは .drawer--b ではなく中身（.b-menu）のほう。**
   position:fixed の要素は transform を持つ祖先があると、その祖先が
   位置の基準になってしまう。ドロワー自体を translateX すると、下の覆いが
   画面全体ではなくパネルの中だけを覆うことになる。 */
.drawer--b,
.drawer--b.is-open {
  transform: none;
}

.b-menu {
  transform: translateX(100%);
  transition: transform var(--t-base);
}

.drawer--b.is-open .b-menu {
  transform: translateX(0);
}

/* 背面を暗くする覆い。ヘッダーの下からページの下端まで。
   閉じているときは .drawer--b ごと visibility:hidden になるので出ない。
   クリックで閉じられるように、当たり判定はドロワー本体（main-b.js が拾う） */
.drawer--b::before {
  content: "";
  position: fixed;
  inset: var(--b-header-h) 0 0 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--t-base);
}

.drawer--b.is-open::before {
  opacity: 1;
}

/* Chrome / Safari 用。::before（覆い）とは別の疑似要素なので競合しない */
.drawer--b::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (min-width: 768px) {
  .drawer--b {
    /* サンプルは 25.19%。細くなりすぎる中間幅だけ 300px で止める */
    width: max(300px, 25.2%);
  }
}

/* style.css は 1024px以上でドロワーを消しているので打ち消す */
@media (min-width: 1024px) {
  .drawer--b {
    display: flex;
  }

  .b-header .header__toggle {
    display: flex;
  }
}

/* --- パネルの中身 --- */

/* .drawer は column の flex（style.css）。**flex-grow でドロワーいっぱいに伸ばす。**
   min-height:100% だけだと、環境によってはパネルの下側が伸びずに
   白地が途切れ、SNSアイコンの背後に覆いが透けて見える（2026-08-25 指摘） */
.b-menu {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* 左右 4.4%＝青ボタンの位置。上 2.55vw はサンプルのロゴ上端まで */
  padding: clamp(18px, 2.55vw, 46px) 4.4% clamp(20px, 2.4vw, 44px);
}

/* --- ロゴ＋社名（ヘッダーと同じ組み・中央寄せ） --- */

.b-menu__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.5vw, 10px);
  margin-bottom: clamp(10px, 1.29vw, 23px);
}

.b-menu__logo {
  flex-shrink: 0;
  display: block;
  height: clamp(26px, 2.4vw, 42px);
}

.b-menu__logo img {
  width: auto;
  height: 100%;
}

.b-menu__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.b-menu__brand-lead {
  font-size: clamp(9px, 0.68vw, 12px);
  font-weight: var(--fw-label);
  line-height: 1.2;
  color: var(--b-ink);
}

.b-menu__brand-name {
  font-size: clamp(15px, 1.24vw, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--b-ink);
}

/* --- トップページ（青ベタのボタン。子を持たないので直リンク） --- */

.b-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* 画面が低いときに全体が収まるよう、vw だけでなく vh でも頭打ちにする */
  min-height: clamp(44px, min(4.56vw, 7vh), 82px);
  padding-inline: clamp(10px, 1.15vw, 21px);
  border-radius: clamp(5px, 0.49vw, 9px);
  background-color: var(--b-cta);
  color: #fff;
  transition: background-color var(--t-fast);
}

.b-menu__top:hover {
  background-color: var(--b-cta-dark);
}

.b-menu__top .b-menu__label {
  color: #fff;
}

.b-menu__arrow {
  flex-shrink: 0;
  width: clamp(16px, 1.4vw, 25px);
  height: auto;
}

/* --- 下層ページの行 --- */

.b-menu__list {
  /* 区切り線はサンプルで 6.3%（青ボタンより 1.9% 内側） */
  padding-inline: 1.9%;
}

.b-menu__item + .b-menu__item .b-menu__trigger,
.b-menu__list > .b-menu__item:first-child .b-menu__trigger {
  border-top: 1px solid transparent;
}

.b-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  /* 同上。1440×700 のような低い画面でも5行＋ボタン＋SNSが1画面に収まる */
  min-height: clamp(50px, min(6.96vw, 10.5vh), 125px);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--b-cta);
  background: none;
  text-align: left;
  cursor: pointer;
}

.b-menu__label {
  /* 文字はサンプルで 9.4%＝区切り線よりさらに 3.1% 内側 */
  padding-left: 3.1%;
  font-size: clamp(14px, 1.21vw, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--b-title);
}

.b-menu__mark {
  flex-shrink: 0;
  display: flex;
  color: var(--b-cta);
  transition: transform var(--t-fast);
}

.b-menu__mark svg {
  width: clamp(18px, 1.57vw, 28px);
  height: auto;
}

.b-menu__trigger[aria-expanded="true"] .b-menu__mark {
  transform: rotate(180deg);
}

/* --- 開いたときのセクション名 --- */

.b-menu__sub {
  padding: clamp(6px, 0.7vw, 12px) 0 clamp(10px, 1.1vw, 20px) 3.1%;
}

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

/* 頭に ▪ を置く（2026-08-25 指示。もとは左端の縦線1本だった）。
   文字と同じ大きさで拡縮するよう em で持たせ、1行目の中央にそろえている */
.b-menu__sub-link {
  position: relative;
  display: block;
  padding: clamp(7px, 0.62vw, 11px) 0 clamp(7px, 0.62vw, 11px) 1.4em;
  font-size: clamp(12px, 1vw, 18px);
  font-weight: var(--fw-label);
  line-height: 1.5;
  color: var(--b-ink);
  transition: color var(--t-fast);
}

.b-menu__sub-link::before {
  content: "";
  position: absolute;
  left: 0.15em;
  /* 上の padding ＋ 1行目の中央 － 印の半分 */
  top: calc(clamp(7px, 0.62vw, 11px) + 0.75em - 0.24em);
  width: 0.48em;
  height: 0.48em;
  background-color: var(--b-accent-light);
  transition: background-color var(--t-fast);
}

.b-menu__sub-link:hover {
  color: var(--b-cta);
  text-decoration: underline;
}

.b-menu__sub-link:hover::before {
  background-color: var(--b-cta);
}

/* --- 現在のページ --- */

.b-menu__top[aria-current="page"] {
  background-color: var(--b-cta-dark);
}

.b-menu__trigger[aria-current="page"] .b-menu__label {
  color: var(--b-cta);
}

/* --- SNS（Instagram／LINE／JNカンパニー総合サイト） --- */

.b-menu__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.93vw, 53px);
  /* サンプルは最後の行の直後（194px＝2.43%）にSNSが来る。margin-top:auto で
     パネルの一番下へ送ると、SPでは一覧との間が大きく空きすぎる */
  padding-top: clamp(20px, 2.43vw, 44px);
}

.b-menu__sns-link {
  display: block;
  width: clamp(40px, 4.19vw, 75px);
  transition: transform var(--t-fast);
}

.b-menu__sns-link:hover {
  transform: translateY(-2px);
}

/* 3枚とも角丸の枠まで画像側に描いてあるので、CSSでの装飾は要らない */
.b-menu__sns-link img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   B-3. ファーストビュー（デザインサンプル assets/image/sample/top/design_frame_b-02.jpg に準拠）

   サンプルは 8000×4591px（縦横比 1.743）。
   位置・大きさはすべてサンプルに対する％で置いているので、幅が変わっても崩れない。

   1440px 換算の実測値（サンプル値 ÷ 8000 × 1440）
   ┌────────────────────┬──────────────┬─────────┐
   │                    │ サンプル      │ 割合     │
   ├────────────────────┼──────────────┼─────────┤
   │ FV全体              │ 8000×4591    │ 比 1.743 │
   │ 写真の下端          │ y 3720       │ 81.0%    │
   │ 写真が消えきる位置   │ x 5400       │ 67.5%    │
   │ キャッチ1行目        │ y 504-711    │ 11.0%    │
   │ キャッチ2行目        │ y 997-1299   │ 21.7%    │
   │ リード文            │ y 1704-2037  │ 37.1%    │
   │ バッジ              │ y 2222-3111  │ 48.4%    │
   │ バッジ1枚の幅        │ 890          │ 11.1%    │
   │ 問い合わせバー       │ y 3260-4130  │ 71.0%    │
   │ バーの左右          │ x 635-7385   │ 7.9〜92.3%│
   │ 右カラムの左端       │ x 5000       │ 62.5%    │
   └────────────────────┴──────────────┴─────────┘
   ========================================================================== */

.b-fv {
  position: relative;
  overflow: hidden;
  /* サンプルではバーの下に 5.8%（FV幅比）の余白がある */
  padding-bottom: 5%;
  background-color: #fff;
}

/* --- 左のビジュアル（案AのFVアニメーションを流用・2026-08-24 指示） ---

   写真3枚のフェードから、案AのFVの「イソメトリック図＋作業員2人」に差し替えた。
   置き場所は写真のときと同じ左カラム（FV幅の58%・上端から）。

   高さは指定しない。舞台（.b-fv__scene）がイラストの比率で決めるので、
   写真のときの bottom: 19% は外してある（1440pxで下端 76% 相当に落ちる）。

   右端を白へ溶かすマスクは残している。イラスト自体は白地の中に描かれているが、
   FV幅の58%で断つと窓とオフィスの床が縦にすっぱり切れ、
   ちょうどそこ（1440pxで x=811〜835）に1つ目の実績バッジが重なって当たるため。

   溶かし始めを写真のときの 65.5% から 82% へ後ろにずらしてある。
   65.5%（＝1440pxで x=547 から）だとイラストの右3割にあたる
   窓と外の緑まで白く飛んでしまい、絵が痩せて見える。
   82% なら断ち切り線だけが消え、絵はほぼ元のまま残る。 */
.b-fv__media {
  position: absolute;
  inset: 0 auto auto 0;
  width: 58%;
  -webkit-mask-image: linear-gradient(to right, #000 0 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0 82%, transparent 100%);
}

/* 舞台。作業員は舞台に対する％配置なので、幅が変わっても位置関係は崩れない。
   .fv__scene ではなく別名にしている理由は index-b.html のコメントに書いてある。 */
.b-fv__scene {
  position: relative;
  aspect-ratio: 1448 / 1086;
}

/* 奥の作業員（エクストラクター）の 動画／静止画 出し分け。
   手前（ポリッシャー）の出し分けは home.css 側で完結しているので触らない。 */
.b-fv__worker-still {
  display: none;
}

@media (max-width: 767px) {
  .b-fv__scene video.fv__worker--vacuum {
    display: none;
  }

  /* 599px以下では home.css が .fv__worker--vacuum を display: none にしている
     （案Aはイラストを切り取って奥の作業員を枠の外に出すため）。
     案Bは切り取らないので、クラス2つぶんの詳細度で打ち消してから出す。 */
  .b-fv__scene .b-fv__worker-still {
    display: block;
  }
}

/* Safari(WebKit) は WebM の透過を黒く塗るため、幅に関係なく動画を止めて
   アニメWebP側に寄せる（2026-09-01）。理由と判定は index.html の head を参照。
   768px以上でアニメに差し替えるのは main.js の initFvWorkerSwitch()。 */
.no-webm-alpha .b-fv__scene video.fv__worker--vacuum {
  display: none;
}

.no-webm-alpha .b-fv__scene .b-fv__worker-still {
  display: block;
}

/* モーションを減らす設定のときは静止ポスターに戻す。
   手前の同じ指定は home.css 側にある。 */
@media (prefers-reduced-motion: reduce) {
  .b-fv__scene .b-fv__worker-still {
    content: url("../../image/home/washman-3-poster.webp");
  }
}

/* --- 右カラム（文字） --- */

/* サンプルではバッジ（x 56.2%〜93.1%）が文字（x 62.5%〜93%）より広い。
   広いほうの幅で枠を取り、文字だけ左に余白を足して位置を合わせている。 */
.b-fv__inner {
  position: relative;
  z-index: 1;
  width: 36.8%;
  margin-left: auto;
  margin-right: 6.9%;
  padding-top: 5.9%;
}

.b-fv__catch,
.b-fv__lead {
  /* バッジの左端 56.2% と 文字の左端 58.5% の差（36.9%のうちの6.2%） */
  padding-left: 6.2%;
}

.b-fv__catch {
  font-weight: var(--fw-title);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.b-fv__catch-sub {
  display: block;
  font-size: clamp(17px, 2.74vw, 40px);
}

.b-fv__catch-main {
  display: block;
  margin-top: 3vw;
  font-size: clamp(26px, 4.1vw, 59px);
}

/* 「足元から」は案Aのセクションタイトルと同じ市松配色（home.css の指定と同じ値）。
   地が薄いほう #489ad8、span を付けた文字が濃いほう #176ebc で1文字おきに交互。 */
.b-fv__catch-blue {
  font-style: normal;
  color: #489ad8;
}

.b-fv__catch-blue span {
  color: #176ebc;
}

.b-fv__lead {
  margin-top: 3.6vw;
  font-size: clamp(12px, 1.5vw, 22px);
  /* サンプルは細めだが、白地で細く見えるため1段上げている（400 → 500） */
  font-weight: var(--fw-label);
  line-height: 1.78;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

/* --- 実績バッジ --- */

.b-fv__badges {
  display: flex;
  justify-content: space-between;
  gap: 1.8%;
  margin-top: 1.4vw;
}

/* 月桂冠の画像を背景に敷き、その中央に文字を重ねる */
.b-fv__badge {
  position: relative;
  flex: 1 1 0;
  display: grid;
  place-items: center;
}

.b-fv__badge-wreath {
  width: 100%;
  height: auto;
}

/* 文字は金色。塗りをグラデーションにしたいので、背景を文字の形で切り抜いている
   （background-clip: text）。中の strong / small も color を持たないので
   透明を継いで、同じ金のグラデーションが通る。

   背景は2枚重ね。
     1枚目 … 流れる光（既定では文字の左外に待機させている）
     2枚目 … 金のグラデーション本体
   .is-shine が付いたあいだだけ1枚目が左から右へ流れる。
   付け外しは main-b.js がバッジごとにばらばらの間隔で行う。 */
.b-fv__badge-text {
  position: absolute;
  /* リボンのぶん、中心より少し上に置く */
  top: 42%;
  left: 50%;
  width: 88%;
  transform: translate(-50%, -50%);
  /* 1枚目＝白い光の帯（シャイン。下の is-shine で流す）／
     2枚目＝文字の地色。金→青に変更（2026-08-25 指示。光る演出は残す）。
     上下を明るい青、中央を濃い青にして金属的な艶を出している。 */
  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;
  /* 金文字は明朝体（Noto Serif JP）にする（2026-08-25 指示）。
     読み込みは index-b.html の Google Fonts（Noto Serif JP 600/700）。
     この要素はTOPのFVバッジだけに存在するので、ほかのページには影響しない。 */
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-size: clamp(8px, 0.96vw, 14px);
  font-weight: var(--fw-bold);
  line-height: 1.55;
  letter-spacing: 0;
  text-align: center;
}

/* 光を流す。1枚目の背景（白い帯）だけを左外から右外へ動かす */
.b-fv__badge-text.is-shine {
  animation: b-badge-shine 1.1s ease-in-out;
}

@keyframes b-badge-shine {
  from { background-position: -160% 0, 0 0; }
  to { background-position: 260% 0, 0 0; }
}

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

/* background-clip: text が効かない環境では文字が消えてしまうので、
   青のベタ塗りに戻す（2026-08-25 指示で金→青） */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .b-fv__badge-text {
    background-image: none;
    color: #1668ad;
  }
}

.b-fv__badge-text strong {
  font-weight: var(--fw-title);
}

.b-fv__badge-text small {
  display: block;
  margin-block: 0.1em;
  font-size: 0.55em;
  font-weight: var(--fw-body);
  line-height: 1.3;
}

.b-fv__badge-lg {
  display: block;
  font-size: 1.5em;
  line-height: 1.2;
}

/* --- 下部の問い合わせバー --- */

.b-fv__bar {
  position: relative;
  z-index: 1;
  width: 84.4%;
  margin: 1.2vw auto 0;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2%, 34px);
  padding: clamp(12px, 2.9%, 42px) clamp(14px, 1.8%, 30px);
  border-radius: clamp(14px, 2.2%, 36px);
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(32, 48, 43, 0.13);
}

.b-fv__tel {
  flex: 1 1 auto;
  /* サンプルでは電話とボタンの間に細い縦線が入る */
  border-right: 1px solid var(--c-border);
  padding-right: clamp(10px, 2%, 30px);
  /* 残りの空きを左右に振り分ける。左に寄せると縦線との間だけが空いて目立つ */
  text-align: center;
}

.b-fv__tel-note {
  font-size: clamp(9px, 1.05vw, 16px);
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: var(--c-ink);
}

.b-fv__tel-num {
  display: flex;
  align-items: center;
  gap: 0.35em;
  justify-content: center;
  margin-top: 0.15em;
  /* 白いバーは高さがボタン（両脇）で決まっていて、電話まわりには余りがある。
     その余りに収まる範囲で大きくしている（1440pxで枠83pxに対し79px）。
     1023px以下は下の指定で上書きするので、ここはPC用 */
  font-size: clamp(22px, 3.1vw, 45px);
  font-weight: var(--fw-title);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.b-fv__tel-num a {
  color: inherit;
}

/* 番号に対する比率で持たせているので、番号を変えれば一緒に大きくなる */
.b-fv__tel-icon {
  flex-shrink: 0;
  width: 0.8em;
  height: 0.8em;
}

/* PCでは番号に対しても少し大きめにする（SPは上の 0.8em のまま） */
@media (min-width: 1024px) {
  .b-fv__tel-icon {
    width: 0.92em;
    height: 0.92em;
  }
}

.b-fv__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* サンプルのアイコンと文字の間隔はバー幅の約3%（1440pxで35px相当） */
  gap: clamp(10px, 2.4vw, 35px);
  /* サンプルではボタンがバー幅の26%と29%を占め、電話エリアは35%ほど。
     ここを21.5%にしていたぶん、電話の右に大きな空きができていた */
  width: 26%;
  /* 文字を大きくしたぶん、ボタンの高さが変わらないよう上下の余白を詰めている
     （高さ＝上下の余白×2＋2行ぶんの行送り。合計は 5.75vw → 5.77vw でほぼ同じ） */
  padding-block: clamp(6px, 0.71vw, 11px);
  border-radius: clamp(8px, 1vw, 16px);
  font-size: clamp(11px, 1.45vw, 21px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: #fff;
  transition: filter var(--t-fast), transform var(--t-fast);
}

/* アイコンの位置。サンプルではボタン幅の8.3%（1440pxで25px相当）の位置から始まる。
   中央寄せのままだと文字を大きくするたびに動くので、左端からの位置で決めている。
   ％はボタンではなくバーの幅に対して効いてしまうため、長さで指定している。
   1023px以下はボタンが縦並びになるため、PCのときだけ適用する */
@media (min-width: 1024px) {
  .b-fv__cta {
    justify-content: flex-start;
    padding-inline: clamp(10px, 1.74vw, 25px);
  }
}

.b-fv__cta:hover {
  filter: brightness(0.93);
  transform: translateY(-2px);
}

.b-fv__cta--mail {
  background-color: var(--b-cta);
}

.b-fv__cta--line {
  /* サンプルでは文字が長いぶんメール側より広い */
  width: 29%;
  background-color: var(--c-brand-green);
}

.b-fv__cta-icon {
  flex-shrink: 0;
  width: 1.7em;
  height: 1.7em;
}

/* LINEのロゴ。メールのアイコンと見た目の大きさをそろえる */
.b-fv__cta-line {
  flex-shrink: 0;
  width: 1.9em;
  height: auto;
}

/* --------------------------------------------------------------------------
   FV：1023px以下（ヘッダーがハンバーガーに変わる幅に合わせている）

   サンプルはPCのみ。横に並べると1つずつが小さくなりすぎるので、
   ビジュアル → 文字 → バッジ → 問い合わせバー の縦積みに組み替える。
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .b-fv {
    padding-bottom: clamp(28px, 6vw, 48px);
  }

  /* 全幅に広げるだけ。高さは舞台がイラストの比率で決めるので、
     写真のときの aspect-ratio: 16/10 は外してある。

     右端を溶かすマスクも外す。この幅ではイラストを断ち切らずに丸ごと見せるうえ、
     床の左下が斜めに引けていて下に白地が残るので、
     文字を -8% ぶん食い込ませても当たらない（写真のときの下向きのぼかしも要らない）。 */
  .b-fv__media {
    position: relative;
    inset: auto;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .b-fv__inner {
    width: min(92%, 640px);
    margin-inline: auto;
    /* 写真の裾に少し重ねて、つながって見せる */
    margin-top: -8%;
    padding-top: 0;
  }

  .b-fv__catch,
  .b-fv__lead {
    padding-left: 0;
  }

  .b-fv__catch-sub {
    font-size: clamp(15px, 4.4vw, 30px);
  }

  .b-fv__catch-main {
    margin-top: 0.3em;
    font-size: clamp(24px, 7vw, 48px);
  }

  .b-fv__lead {
    margin-top: 1.4em;
    font-size: clamp(13px, 3.3vw, 18px);
    line-height: 1.9;
  }

  .b-fv__badges {
    gap: 2.5%;
    margin-top: clamp(16px, 5vw, 32px);
  }

  .b-fv__badge-text {
    font-size: clamp(8px, 2.15vw, 14px);
  }

  /* --- 問い合わせバー：電話を1段目、ボタン2つを2段目に --- */

  .b-fv__bar {
    width: min(92%, 640px);
    flex-wrap: wrap;
    gap: clamp(10px, 3vw, 18px);
    margin-top: clamp(20px, 6vw, 40px);
    padding: clamp(14px, 4vw, 24px);
    border-radius: clamp(14px, 3.5vw, 24px);
  }

  .b-fv__tel {
    flex: 1 0 100%;
    border-right: none;
    padding-right: 0;
    text-align: center;
  }

  .b-fv__tel-note {
    font-size: clamp(11px, 3vw, 14px);
  }

  .b-fv__tel-num {
    justify-content: center;
    font-size: clamp(26px, 8vw, 40px);
  }

  .b-fv__cta {
    flex: 1 1 0;
    width: auto;
    flex-direction: column;
    gap: clamp(4px, 1.2vw, 8px);
    padding-block: clamp(10px, 2.6vw, 16px);
    font-size: clamp(11px, 2.7vw, 15px);
    text-align: center;
  }

  .b-fv__cta-icon {
    width: 1.5em;
    height: 1.5em;
  }
}

/* ==========================================================================
   B-4. サービス（デザインサンプル assets/image/sample/top/design_frame_b-03.jpg に準拠）

   サンプルは 8000×9528px。以下の％はすべて「サンプル幅（8000px）に対する割合」。
   実装でも同じ割合になるよう、縦方向の余白も vw で置いている。

   ┌──────────────────┬────────────────┬──────────────┐
   │                  │ x              │ y            │
   ├──────────────────┼────────────────┼──────────────┤
   │ 見出し「サービス」 │ 中央           │ 3.62〜5.99%  │
   │ ギザギザ          │ 42.30〜57.69%  │ 6.80〜9.49%  │
   │ 行1 写真          │ 12.10〜50.00%  │ 15.47〜42.89%│
   │ 行1 文章          │ 52.20〜88.59%  │ 15.07〜42.39%│
   │ 行2 写真（右）     │ 50.30〜89.09%  │ 49.79〜77.19%│
   │ 行3 写真          │ 12.10〜50.00%  │ 84.09〜111.49%│
   └──────────────────┴────────────────┴──────────────┘

   写真の比率 37.91 ÷ 27.43 ＝ 1.38。行の間隔は 6.9%。
   色：見出し・タイトル #025589／ギザギザ上 #4899d8・下 #176ebb／本文 #353535
   ========================================================================== */

.b-service {
  position: relative;
  padding-block: 3.6vw 7.6vw;
  background-color: #fff;
  /* 波がセクションの外へはみ出さないように切る */
  overflow: hidden;
}

/* --- 背景の波 ---
   コンテンツの下に敷く（z-index: 0）。見出し・カードは 1 に上げてある。
   上辺・下辺そのものを変形させて波打たせる。形の生成と動きは main-b.js。
   JSが動かないときは、HTMLに書いてある静止状態のまま表示される。 */

.b-service__wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* reset.css が svg に max-width: 100% を掛けている。
     スマホでは幅を100%より広げるので、ここで外しておく
     （外さないと幅だけ丸められ、パスの右端の垂直線が画面内に出てしまう） */
  max-width: none;
  pointer-events: none;
}

/* 波より前に出す */
.b-service .b-sechead,
.b-service__list {
  position: relative;
  z-index: 1;
}

/* スマホは縦長のセクションに合わせて波が縦へ引き伸ばされ、
   傾きが急になる。横幅を少し広げて1周期あたりを長くし、
   PCと同じくらいのゆるやかさに戻す。 */
@media (max-width: 1023px) {
  .b-service__wave {
    left: -20%;
    width: 140%;
  }
}

/* --- 見出し --- */

.b-sechead {
  /* タイトルの文字サイズ。**波線の最小幅を「文字数」で書くために変数にしている**（2026-08-26）。
     波線（.b-sechead__zigzag）が同じ値を font-size に取ることで、
     min-width を em ＝ 全角1文字ぶんの単位で指定できる。
     1023px以下の値は下のメディアクエリで差し替える。**片方だけ変えないこと。** */
  --sechead-fs: clamp(20px, 2.4vw, 34px);

  display: grid;
  justify-items: center;
  /* 波線を見出しの文字幅にそろえるため、この箱自体を中身の幅にする（2026-08-26）。
     こうすると grid の列幅＝見出しの幅になり、波線に width: 100% を掛けるだけで
     文字の長さに追従する。中央ぞろえは margin-inline: auto が受け持つ。
     見出しが1行に収まらないときは max-width: 100% で親の幅に頭打ちになって折り返す。
     （service-b.css の .b-subhead と同じ手法） */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: 5.6vw;
}

/* 案Aのセクションタイトルと同じルールで、1文字おきに濃さの違う青にする。
   地が薄いほうで、em を付けた文字が濃いほう。 */
.b-sechead__title {
  font-size: var(--sechead-fs);
  font-weight: var(--fw-title);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #489ad8;
}

.b-sechead__title em {
  font-style: normal;
  color: #176ebc;
}

/* 見出し下のギザギザ。**1周期ぶんのSVGを背景として repeat-x で敷いている。**

   2026-08-26 の指示「文字数に合わせて長さが変わるように」でこの形にした。
   もとは viewBox 240 のインラインSVGを preserveAspectRatio="none" で固定幅に
   引き伸ばす作りで、幅を変えると波が横に伸び縮みして形が崩れるため追従できなかった。

   **形と密度は変えていない。** 1周期は viewBox 59×40（もとの 2〜61 と同じ間隔）で、
   background-size で --wave-h の 1.475倍（＝59/40）に敷くので、
   表示上の1周期は 1440px で約55px。もとの 222px÷4周期＝55.5px とほぼ同じ。

   **色は data URI の中に直書きしている**（背景画像なので CSS変数が使えない）。
   上が %234899d8＝--b-accent-light、下が %23176ebb＝--b-cta。
   変数を変えたときはここも直すこと。service-b.css の .b-subhead__wave も同じ事情。

   端は最大で1周期の途中で切れる（repeat-x のため）。既存の .b-subhead__wave と同じ挙動。
   「料金」のように短い見出しでは波が1.3周期ぶんしか出ない。 */
.b-sechead__zigzag {
  /* もとの「幅 clamp(150px,15.4vw,230px)・比 240:40」の高さと同じ値（幅÷6） */
  --wave-h: clamp(25px, 2.57vw, 38px);

  display: block;
  width: 100%;
  height: var(--wave-h);
  margin-top: 0.8vw;
  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-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='0,14 29.5,3 59,14' stroke='%234899d8'/%3E%3Cpolyline points='0,37 29.5,26 59,37' stroke='%23176ebb'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  /* **左右対称にするため、タイルの並びを中央から始める（2026-08-26 指示）。**

     left 起点だと、右端で波が中途半端に切れる。見出しの文字幅は文字数で決まり、
     タイル幅（波1周期）の整数倍になることはまずないため、
     **必ず左端＝波の始まり／右端＝途中、という左右非対称**になっていた
     （「サービス」で2.59周期、「料金」で1.3周期）。

     center にすると、余りが左右へ均等に振り分けられる。
     **タイルの絵そのものが左右対称（0,14 → 29.5,3 → 59,14 の山形）**なので、
     両端の切れ方も鏡写しになり、線全体が左右対称になる。
     **タイルの絵を非対称なものに差し替えるときは、この前提が崩れる。**
     （サービスページの .b-subhead__wave は絵が非対称なので、あちらは left のまま） */
  background-position: center center;
  /* 縦横を同じ倍率で拡縮させ、波の形をくずさない */
  background-size: calc(var(--wave-h) * 1.475) 100%;

  /* **2026-08-26 指示：「料金」の波線を4文字ぶんの長さにする。**

     波線の幅は見出しの文字幅に追従する（ログ215）ため、2文字の「料金」だけ
     波が1つぶんしか出ず、他のセクションと比べて短く見えていた。
     ここで**全角4文字ぶんの下限**を与える。

     全角1文字 ＝ 1em ＋ letter-spacing 0.04em なので 4文字 ＝ 4.16em。
     font-size をタイトルと同じ --sechead-fs にそろえてあるので、em が文字幅と一致する
     （この要素に中身は無いので、文字サイズ自体は見た目に出ない）。

     TOPの見出しで4文字に満たないのは「料金」だけ。
     **「サービス」がちょうど4文字で、その幅と一致する**（1440pxで142px）。
     .b-sechead は width: fit-content なので、箱ごと広がってタイトルは中央のままになる。 */
  font-size: var(--sechead-fs);
  min-width: 4.16em;
}

/* --- 3行 --- */

.b-service__list {
  display: grid;
  /* サンプルの行間は 6.9%（写真の下端から次の写真の上端まで） */
  gap: 6.9vw;
  width: 76.99%; /* 12.10% 〜 89.09% */
  margin-inline: auto;
}

.b-service__item {
  display: grid;
  /* 写真 37.91% ／ 間 2.2% ／ 文章 36.4%（コンテンツ幅 76.99% に対する比） */
  grid-template-columns: 49.2% 1fr;
  gap: 2.9%;
  align-items: center;
}

/* 登場時に下からふわっと出す。
   出す仕掛け（.reveal → .is-visible）は main.js の initReveal() を流用し、
   ここでは動きの量と速さだけ案B用に上書きしている。
   base.css の .reveal.is-visible と同じ詳細度だと、あとに書いたこちらが
   勝ってしまって戻らなくなるので、表示後の指定は詳細度を1つ上げている。 */
.b-service__item.reveal {
  opacity: 0;
  transform: translateY(clamp(24px, 3vw, 44px));
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.b-service__item.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .b-service__item.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 2番目だけ写真を右に。読み上げ順は写真→文章のままにしたいので、
   HTMLの順序は変えずに列の指定だけ入れ替えている */
.b-service__item--reverse .b-service__media {
  grid-column: 2;
  grid-row: 1;
}

.b-service__item--reverse .b-service__body {
  grid-column: 1;
  grid-row: 1;
}

/* --- 写真 --- */

.b-service__media {
  position: relative;
  aspect-ratio: 1.38;
  border-radius: clamp(16px, 2.1vw, 32px);
  /* サンプルは写真の右下に細い青の枠がずれて重なっている */
  box-shadow: 0.55vw 0.55vw 0 rgba(23, 110, 187, 0.55);
}

.b-service__media img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* --- 文章 --- */

/* サンプルでは文章の左端（54.0%）が、番号「01」の左端（52.2%）より内側にある。
   番号は絶対配置でこの余白へはみ出させている */
.b-service__body {
  padding-left: 1.8vw;
}

/* セクションタイトルと同じルールで、1文字おきに濃さの違う青にする。
   地が薄いほうで、em を付けた文字が濃いほう。改行をまたいでも交互のまま。 */
.b-service__name {
  position: relative;
  font-size: clamp(17px, 2.25vw, 32px);
  font-weight: var(--fw-title);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #489ad8;
}

.b-service__name em {
  font-style: normal;
  color: #176ebc;
}

/* 番号はタイトルの左上に重ねる。飾りなので読み上げからは外している。
   書体は Pattaya（Google Fonts）。1ウェイト（400）しかないため、
   親（タイトル）の 900 を継ぐと合成の太字になって形が崩れる。400 を明示する。
   斜体も書体そのものが持っているため font-style は指定しない。 */
.b-service__num {
  position: absolute;
  left: -0.15em;
  bottom: 100%;
  transform: translateY(48%);
  font-family: "Pattaya", var(--ff-body);
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1;
  letter-spacing: 0.02em;
  /* タイトルより一段引かせたいので、ギザギザの淡い青をさらに薄くしている */
  color: rgba(72, 153, 216, 0.22);
}

.b-service__text {
  margin-top: 1.9vw;
  font-size: clamp(11px, 1.15vw, 17px);
  /* 淡い波の上に載るので、本文（400）だと沈む。導入文・FVのリードと同じ500に揃えている */
  font-weight: var(--fw-label);
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: #353535;
}

/* サンプルのボタンは 幅14.6%・高さ4.3%・枠線のみのピル型 */
.b-service__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  min-width: 21.5%;
  margin-top: 2.6vw;
  padding: 0.95em 2em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  /* 2026-08-25 指示：白と青を入れ替えた（もとは 背景=透明／文字=青）。
     矢印（.b-service__arrow）は currentColor なので自動で追従する。
     **同じ入れ替えを .b-price__btn と .b-news__more にも当てている。3つセットで直すこと。**

     2026-08-25 追加指示：塗りを --b-btn-grad（FV実績バッジと同じ縦グラデ）へ。
     background-color はグラデ非対応時のフォールバックとして残している。
     **枠線は透明にする。** --b-title のままだと、グラデの上下（明るい青）より濃く
     中央（濃い青）より薄いため、上下だけ枠が浮き出る不均一な見た目になる。
     もともと枠色と塗りが同色で見えていなかったので、透明にしても見た目は変わらない。
     下層ページ側は service-b.css の .b-svc-btn。**あちらもセットで直すこと。** */
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* ホバーは白地＋青文字＋青枠（従来どおり）。
   **background-color を白にするだけでは、上に乗ったグラデーションが残って白くならない。**
   background-image を明示的に消すこと。枠線も基本形で透明にしたのでここで戻す。 */
.b-service__btn:hover {
  border-color: var(--b-title);
  background-color: #fff;
  background-image: none;
  color: var(--b-title);
}

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

.b-service__btn:hover .b-service__arrow {
  transform: translateX(0.25em);
}

/* --- 1023px以下：写真の下に文章を積む --- */

@media (max-width: 1023px) {
  .b-service {
    padding-block: clamp(40px, 9vw, 72px) clamp(48px, 11vw, 88px);
  }

  .b-sechead {
    margin-bottom: clamp(28px, 7vw, 48px);
  }

  .b-sechead {
    --sechead-fs: clamp(20px, 5.6vw, 30px);
  }

  .b-sechead__zigzag {
    /* もとの「幅 clamp(130px,34vw,200px)・比 240:40」の高さと同じ値（幅÷6） */
    --wave-h: clamp(22px, 5.67vw, 33px);
    margin-top: clamp(6px, 1.6vw, 12px);
  }

  .b-service__list {
    gap: clamp(40px, 10vw, 72px);
    width: min(92%, 640px);
  }

  .b-service__item,
  .b-service__item--reverse .b-service__media,
  .b-service__item--reverse .b-service__body {
    grid-column: auto;
    grid-row: auto;
  }

  .b-service__item {
    grid-template-columns: minmax(0, 1fr);
    /* 縦積みでは写真とタイトルが近すぎるので、間隔を広げる。
       タイトルの上に重なる番号（01/02/03）のぶんもここで確保している */
    gap: clamp(32px, 9vw, 48px);
  }

  /* 写真の左端に文字が張り付いて見えるので、少しだけ内側へ入れる。
     ボタンは margin-left: auto で右端に寄せているため、ここでは動かない */
  .b-service__body {
    padding-left: clamp(8px, 2.6vw, 14px);
  }

  .b-service__media {
    box-shadow: 6px 6px 0 rgba(23, 110, 187, 0.55);
  }

  .b-service__name {
    font-size: clamp(18px, 5vw, 26px);
  }

  .b-service__num {
    font-size: 1.4em;
  }

  .b-service__text {
    margin-top: clamp(12px, 3.5vw, 20px);
    font-size: clamp(13px, 3.4vw, 16px);
  }

  /* 右手で操作する人が多いので、ボタンは押しやすい右側に寄せる。
     inline-flex のままだと margin: auto が効かないので flex にしている */
  .b-service__btn {
    /* 2026-08-26 指示：指で押す幅ではボタンの縦幅を少し増やす。
       clamp の下限に張り付く幅（およそ471px以下）で 40.5px まで縮んでいたぶんを底上げする。
       クリーニング例の .b-cases__btn はこのクラスを重ねて使っているので一緒に効く。 */
    min-height: var(--b-btn-minh);
    display: flex;
    width: fit-content;
    margin-top: clamp(16px, 5vw, 28px);
    margin-left: auto;
    font-size: clamp(13px, 3.4vw, 16px);
  }
}

/* ==========================================================================
   B-4-2. クリーニング例（2026-08-24 指示）

   案A（home.css の .works）を流用し、見た目だけ案Bに寄せたもの。
   デザインサンプルには無いセクションなので、寸法は**両隣に合わせて**決めている。

     見出し　　　… 共通の .b-sechead（市松のタイトル＋ジグザグ）。他セクションと同形
     リード　　　… .b-price__lead と同じ体裁（中央寄せ・clamp(11px, 1.15vw, 17px)）
     幅　　　　　… 料金パネルと同じ 85.02%
     地色　　　　… 隣の .b-price と同じ白ベタ（.b-service のような波は入れていない）
     カードの枠　… 写真は .b-service__media と同じ角丸＋青いずれ影
     小見出し　　… .b-price__name と同じ ▪ 付き
     ボタン　　　… .b-service__btn をそのまま使い、幅と余白だけここで上書き

   **比較スライダー（.ba__）には触っていない。**
   見た目は style.css「11. 比較スライダー」、動きは main.js の initBeforeAfter()。
   このページは main.js を読んでいるので専用のJSは無い。
   枠（.ba__frame）の角丸と影だけ、案Bのカードにそろえて上書きしている。

   TODO: 本文2件とタグは案Aから引き継いだ仮テキスト。実際の施工内容を受領したら差し替える。
   ========================================================================== */

.b-cases {
  padding-block: 3.6vw 4.3vw;
  background-color: #fff;
}

/* 見出しとリードの間隔は料金と同じに詰める（サービスより狭い） */
.b-cases .b-sechead {
  margin-bottom: 2.4vw;
}

.b-cases__lead {
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.8;
  text-align: center;
  color: #353535;
}

/* 「〜ビフォーアフターを」で折り返すのはスマホだけ（600px以上は1行に収まる） */
.b-cases__lead-br {
  display: none;
}

@media (max-width: 599px) {
  .b-cases__lead-br {
    display: inline;
  }
}

/* --- 2件並び --- */

.b-cases__list {
  display: grid;
  gap: clamp(48px, 4.5vw, 72px);
  /* 料金パネルと同じ幅にそろえる */
  width: 85.02%;
  margin: 2.2vw auto 0;
}

/* 横並びは1024px以上だけ。案Aは768pxから2列にしているが、案Bはこの幅で
   本文の器が min(92%, 640px) に絞られるため、768pxで2列にすると1列あたり310pxしか
   残らず、見出しが2行に折れてタグも折り返す。ヘッダーやFVと同じ 1023/1024 の
   境目にそろえてある。 */
@media (min-width: 1024px) {
  .b-cases__list {
    grid-template-columns: 1fr 1fr;
    /* 横並びのときは料金パネルと同じ間隔 */
    gap: 3.68%;
  }
}

/* 写真の枠。角丸と青いずれ影はサービスのカード（.b-service__media）と同じ値。
   .ba__frame は共通パーツなので、ここで上書きする形にしている。
   aspect-ratio（16/10）は共通側の指定をそのまま使う。 */
.b-cases__item .ba__frame {
  border-radius: clamp(16px, 2.1vw, 32px);
  box-shadow: 0.55vw 0.55vw 0 rgba(23, 110, 187, 0.55);
}

@media (max-width: 767px) {
  /* 767px以下は vw だと影がほとんど消えるため固定6px。FVや写真の影と同じ切り替え */
  .b-cases__item .ba__frame {
    box-shadow: 6px 6px 0 rgba(23, 110, 187, 0.55);
  }
}

/* 影のぶん右下に余白が要る。スライダーの下の文字が影に食い込まないよう、
   タイトルの上余白を影の高さより大きく取っている */
.b-cases__name {
  margin-top: 1.8vw;
  font-size: clamp(15px, 1.6vw, 24px);
  font-weight: var(--fw-title);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--b-title);
}

/* 見出しの前の小さな四角。見た目は .b-price__name と同じだが、
   **あちらの flex ではなく inline-block で置いている。**
   料金の見出しは必ず1行に収まるので flex + align-items: center で問題ないが、
   ここは事例名が2行に折れることがあり、flex だと四角が2行ぶんの中央へ浮いてしまう。
   文字の流れに乗せておけば、何行になっても1行目の頭に付く。 */
.b-cases__name::before {
  content: "";
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin-right: 0.45em;
  /* 文字の中心あたりまで持ち上げる */
  vertical-align: 0.28em;
  background-color: currentColor;
}

.b-cases__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.7vw, 11px);
  margin-top: 1.1vw;
}

/* 案Aは濃紺の枠だが、案Bはギザギザ上段と同じ淡い青に寄せている */
.b-cases__tags li {
  padding: clamp(3px, 0.4vw, 6px) clamp(10px, 1.1vw, 16px);
  border: 1px solid var(--b-accent-light);
  border-radius: 999px;
  font-size: clamp(10px, 0.95vw, 14px);
  font-weight: var(--fw-label);
  line-height: 1.5;
  color: var(--b-title);
}

.b-cases__text {
  margin-top: 1.1vw;
  font-size: clamp(10px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.85;
  color: #353535;
}

/* --- 下の案内ボックス ---

   案Aは #e9eef4 を敷いた箱だが、案Bは料金パネルと同じ
   「白ベタ＋1pxの枠＋大きな角丸」にそろえている。 */

.b-cases__note {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  width: 85.02%;
  margin: clamp(40px, 4.5vw, 72px) auto 0;
  padding: clamp(16px, 2vw, 34px) clamp(16px, 2.2vw, 36px);
  border: 1px solid var(--b-line);
  border-radius: clamp(16px, 2.2vw, 34px);
  background-color: #fff;
}

.b-cases__note-icon {
  flex-shrink: 0;
  width: clamp(56px, 7vw, 104px);
  height: auto;
}

.b-cases__note-text {
  flex: 1;
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  color: #353535;
}

/* 原稿の改行はスマホ幅では切る。自動の折り返しと二重になり、
   短い行と行末が1文字だけの行が交互に出てしまうため */
@media (max-width: 599px) {
  .b-cases__note-br {
    display: none;
  }
}

/* ボタンは .b-service__btn をそのまま使っている。
   あちらは段落の下に置く前提で上余白（2.6vw）が付いているので、
   横並びのこの箱では打ち消し、縮まないよう幅も固定している。 */
.b-cases__btn {
  flex-shrink: 0;
  min-width: 0;
  margin-top: 0;
}

/* 狭い画面では縦に積む。案Aと同じくアイコンは場所を取るだけなので出さない
   （loading="lazy" なので通信も発生しない）。ボタンだけ中央に置く。 */
@media (max-width: 899px) {
  .b-cases__note {
    flex-direction: column;
    align-items: stretch;
  }

  .b-cases__note-icon {
    display: none;
  }

  .b-cases__btn {
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   クリーニング例：1023px以下

   他セクションと同じく、幅を広げて余白を詰める。
   vw で決めている余白は、この幅では小さくなりすぎるので px の下限に寄せる。
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .b-cases {
    padding-block: clamp(32px, 7vw, 56px);
  }

  .b-cases .b-sechead {
    margin-bottom: clamp(14px, 3.4vw, 26px);
  }

  .b-cases__list,
  .b-cases__note {
    width: min(92%, 640px);
  }

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

  .b-cases__name {
    margin-top: clamp(14px, 3.4vw, 22px);
    font-size: clamp(16px, 4.2vw, 24px);
  }

  .b-cases__tags {
    margin-top: clamp(8px, 2.2vw, 14px);
  }

  .b-cases__text {
    margin-top: clamp(8px, 2.2vw, 14px);
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .b-cases__lead,
  .b-cases__note-text {
    font-size: clamp(12px, 3.2vw, 16px);
  }
}

/* ==========================================================================
   B-5. 料金（デザインサンプル assets/image/sample/top/design_frame_b-05.jpg に準拠）

   サンプルは 8000×5376px（縦は幅の67.2%）。以下の％はサンプル幅に対する割合。

   ┌────────────────┬────────────────┬──────────────┐
   │                │ x              │ y            │
   ├────────────────┼────────────────┼──────────────┤
   │ 見出し「料金」   │ 中央           │ 3.21〜5.70%  │
   │ ギザギザ        │ 42.30〜57.69%  │ 6.50〜9.19%  │
   │ サブリード      │ 中央           │ 12.05〜13.20%│
   │ パネル2枚       │ 7.49〜92.51%   │ 16.09〜54.87%│
   │ 　左パネル      │ 7.49〜48.43%   │              │
   │ 　右パネル      │ 51.56〜92.44%  │              │
   │ 下部            │ 7.50〜92.89%   │ 57.00〜63.19%│
   └────────────────┴────────────────┴──────────────┘

   色：見出し・価格・表ヘッダー濃 #025589／表ヘッダー淡 #4899d8／パネル枠 #afafaf
   ========================================================================== */

/* 見出しとサブリードの間隔はサービスより狭い（サンプル実測）ので、
   共通の .b-sechead の下余白をここだけ詰めている */
.b-price .b-sechead {
  margin-bottom: 2.4vw;
}

/* このセクションの説明文・寸法・注記は 400 ではなく 500。
   金額（900）との差が開きすぎて、地の文が痩せて見えるため一段上げている。 */
.b-price {
  padding-block: 3.2vw 4.3vw;
  background-color: #fff;
}

.b-price__lead {
  margin-top: 0.5vw;
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.6;
  text-align: center;
  color: #353535;
}

/* --- パネル2枚 --- */

.b-price__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* サンプルの間隔は 3.13%（コンテンツ幅 85.02% に対して 3.68%） */
  gap: 3.68%;
  width: 85.02%;
  margin: 2.2vw auto 0;
  /* 高さは左右そろえる（grid の既定 stretch のまま。2026-08-25 指示／ログ159）。

     経緯：ログ157でいったん `align-items: start` にして「それぞれ中身なりの高さ」に
     していた。当時は左590px／右469pxで、揃えると右に 40/81px の空きが出たため。
     その後ログ158で左を2列にして424pxまで縮み、**左右の高低が入れ替わった**。
     いまは右478pxが背を決め、左に約54pxの空きが出るだけなので、揃えても目立たない。
     `.b-price__rows` の `margin-block: auto` が余りを吸収し、注記は下端に留まる。 */
}

.b-price__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2vw, 34px) clamp(16px, 2.2vw, 36px) clamp(12px, 1.3vw, 22px);
  border: 1px solid var(--b-line);
  border-radius: clamp(16px, 2.2vw, 34px);
  /* 右上の飾りを角で切る */
  overflow: hidden;
}

/* 登場時に下からふわっと出す。サービスのカードと同じ動き。
   出す仕掛け（.reveal → .is-visible）は main.js の initReveal() を流用し、
   ここでは動きの量と速さだけ案B用に上書きしている。
   base.css の .reveal.is-visible と同じ詳細度だと、あとに書いたこちらが
   勝ってしまって戻らなくなるので、表示後の指定は詳細度を1つ上げている。

   2枚は横並びで同時に画面へ入るため、右のカードだけ少し遅らせて出す。 */
.b-price__panel.reveal {
  opacity: 0;
  transform: translateY(clamp(24px, 3vw, 44px));
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.b-price__panel.reveal:nth-child(2) {
  transition-delay: 0.14s;
}

.b-price__panel.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .b-price__panel.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- 右上の飾り（生地見本） ---
   絶対配置なので、カードの高さ・幅には影響しない。
   カードの角丸で切りたいので、枠の内側いっぱいに広げて border-radius を継いでいる。
   2枚のうち --big のほうを少しだけ大きくし、どちらも上辺・右辺からはみ出させる。 */

.b-price__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

/* 4枚は縦横比がまちまちなので、幅ではなく高さで大きさを決める。
   こうすると、どの組み合わせでもカードから覗く帯の高さがそろう。
   はみ出しは translateY（自分の高さに対する割合）で出しているので、
   これも比率に左右されない。説明文の上端より下には出ない値にしてある。 */
.b-price__deco-img {
  position: absolute;
  top: 0;
  right: 14%;
  width: auto;
  height: clamp(70px, 9.6vw, 138px);
  transform: translateY(-52%);
}

.b-price__deco-img--big {
  right: -6%;
  height: clamp(84px, 11.6vw, 167px);
  transform: translateY(-46%);
}

/* 飾りより前に出す */
.b-price__panel > :not(.b-price__deco) {
  position: relative;
  z-index: 1;
}

/* 見出しの前の小さな四角 */
.b-price__name {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: clamp(17px, 2vw, 29px);
  font-weight: var(--fw-title);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--b-title);
}

.b-price__name::before {
  content: "";
  flex-shrink: 0;
  width: 0.22em;
  height: 0.22em;
  background-color: currentColor;
}

.b-price__desc {
  margin-top: 1.1vw;
  font-size: clamp(10px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.85;
  color: #353535;
}

/* --- 左：カーペットの料金 --- */

/* 2026-08-25：カードの縦を詰める指示で gap 1.2vw → 0.85vw、
   padding-block 1.4vw → 0.7vw に縮めた（ログ157）。
   金額の文字を下げるより先に、まずここで詰めている。 */
.b-price__rows {
  display: grid;
  gap: 0.85vw;
  /* 上下の余りをここで吸収し、注記は常にパネルの下端に置く */
  margin-block: auto;
  padding-block: 0.7vw;
}

/* --- 左（ウェット・6行）だけ2列に組む（2026-08-25 指示／ログ158） ---

   3行×2列になり、行の帯が 305px → 約155px、カードは 590px → 424px に縮む。
   読み順は左→右（HTMLの並びのまま）。

   **各行の「（税込）」を外したのはこの2列化のため。**
   1440pxで左カードの内寸は526px。2列だと1件あたり251pxしか取れないのに、
   「40〜50㎡ 38,500円（税込）」は**285px必要**だった（金額を26pxに下げても245pxで余白なし）。
   税込であることはカード下の注記に1行でまとめている。右カードも表記をそろえて外した。

   **点線（‥‥‥）も2列では出さない。** 残すと狭い枠で折り返し、
   縦幅がほとんど縮まなかった（実測581px＝ほぼ元のまま）。
   代わりに dt へ固定幅を与えて、**列ごとに金額の左端をそろえている。** */
/* **599px以下は2列にしない。** カードが狭くなり、1件あたり192pxしか取れず
   「40〜50㎡ 38,500円」が13pxはみ出す（実測）。
   この幅では指定を当てず、素の .b-price__rows（1列＋点線）のまま出す。 */
@media (min-width: 600px) {
  /* 列の間隔を 1.4vw → 1vw に詰めて、浮いたぶんを下の行内の gap に回している
     （2026-08-25／ログ159）。1件あたりの余裕はいちばん厳しい1024pxで6.4pxしか無く、
     行内を広げるには列間から借りるしかなかった。 */
  .b-price__rows--2col {
    grid-template-columns: 1fr 1fr;
    column-gap: 1vw;
  }

  /* 区分の文字と金額の間隔。0.6em（約9.6px）だと詰まって見えるため
     0.85em（約13.5px）に広げた（2026-08-25 指示）。
     **これ以上広げると1024pxで金額が枠から出る。** */
  .b-price__rows--2col .b-price__row {
    justify-content: flex-start;
    gap: 0.85em;
  }

  /* いちばん長い「50㎡以降 1㎡」の実測が dt の文字サイズの約6.0倍なので、
     わずかな余裕を足して 6.2em にしている。
     **ここを広げすぎると金額が枠から出る**（7.6em にしたとき1440pxで17pxはみ出した）。
     区分の文言を変えたら測り直すこと。 */
  .b-price__rows--2col .b-price__row dt {
    flex: 0 0 auto;
    min-width: 6.2em;
    text-align: right;
  }

  .b-price__rows--2col .b-price__row dt::after {
    content: "";
  }

  .b-price__rows--2col .b-price__row dd {
    min-width: 0;
  }
}

.b-price__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
}

/* 「20㎡未満 ‥‥」の点線。文字数が違っても金額の位置がそろう */
.b-price__row dt {
  flex: 1 1 auto;
  /* パネルの余白が目立つので、サンプルより一段大きくしている */
  font-size: clamp(12px, 1.3vw, 19px);
  font-weight: var(--fw-label);
  line-height: 1.4;
  color: #353535;
  text-align: right;
}

.b-price__row dt::after {
  content: " ‥‥‥";
  letter-spacing: 0.1em;
}

/* line-height を詰めているのは、行の高さの大半が行送りで占められていたため
   （2026-08-24／ログ155）。48px の金額が本文の行送り 1.85 を継いで
   **1行90px**になり、6行で 540px を使っていた。1.15 にすると同じ文字サイズでも
   58px まで下がる。**金額を小さくするより先に、ここを詰めるほうが効く。** */
.b-price__row dd {
  flex: 0 0 auto;
  min-width: 56%;
  font-size: clamp(13px, 1.45vw, 21px);
  font-weight: var(--fw-label);
  line-height: 1.15;
  color: var(--b-title);
}

/* 2026-08-24：ウェット方式が6行になり、左カードだけ背が高くなったため
   48px → 38px に落とした（ログ155）。上の line-height と合わせて 1行 90px → 約48px。
   2026-08-25：さらに縦を詰める指示で 38px → 32px（ログ157）、
   左カードの2列化に合わせて **32px → 27px**（ログ158）。
   **2列の左カードに収まる上限がこの値。** 27pxは実測で、
   これ以上大きいと「40〜50㎡ 38,500円」が1件251pxの枠に入らない。

   右カード（1列）は幅に余裕があるが、**2枚並べたときに金額の大きさが食い違うと
   見比べにくいので、あえて同じ値にそろえている。**
   **ここが料金の見せ場なので、これ以上は下げない。**
   まだ縮めたい場合は .b-price__rows の gap / padding-block 側で詰めること。 */
.b-price__row dd strong {
  font-size: clamp(17px, 1.85vw, 27px);
  font-weight: var(--fw-title);
  letter-spacing: 0.01em;
}

.b-price__row dd span {
  font-size: 0.85em;
  color: #353535;
}

/* --- 右：ラグ・絨毯の表 --- */

.b-price__table {
  width: 100%;
  margin-top: 1.1vw;
  border-collapse: collapse;
  table-layout: fixed;
}

.b-price__table th,
.b-price__table td {
  border: 1px solid var(--b-line);
  padding: 0.58em 0.2em;
  text-align: center;
}

.b-price__table th {
  border-color: transparent;
  background-color: var(--b-title);
  font-size: clamp(9px, 1vw, 15px);
  font-weight: var(--fw-label);
  letter-spacing: 0.02em;
  color: #fff;
}

/* サンプルは濃い青と淡い青が交互 */
.b-price__table th.is-light {
  background-color: var(--b-accent-light);
}

.b-price__table td {
  font-size: clamp(9px, 1vw, 15px);
  font-weight: var(--fw-label);
  color: #353535;
}

.b-price__table-price td {
  padding-block: 0.8em;
}

.b-price__table-price strong {
  font-size: clamp(12px, 1.45vw, 21px);
  font-weight: var(--fw-title);
  letter-spacing: 0.01em;
}

.b-price__table-price span {
  font-size: 0.72em;
}

/* 狭い画面では「（税込）」を必ず改行して6セルの見え方をそろえる。

   2026-08-24 に本文を Noto Sans JP にした（ログ153）ところ、Zen Kaku より字幅が広く、
   **390px で「8,000円（税込）」だけが1行に収まり、残り5つが折れる**という不揃いが出た。
   境目は実測で 390px と 430px のあいだ（430pxでは6つとも1行に収まる）。
   幅ちょうどの折り返しに任せると桁数で挙動が変わるので、
   セルが狭くなるところでは6つとも2行に固定している。

   ※同日中の料金差し替え（ログ154）で表そのものを使わなくなったため、
     この指定も現在は効いていない。上の .b-price__table 一式と同じ扱いで残置している。
     dl 側の「（税込）」（.b-price__row dd span）は375pxでも1行に収まるので対処不要。 */
@media (max-width: 429px) {
  .b-price__table-price span {
    display: block;
  }
}

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

/* 左パネルの注記は上に区切り線を引き、パネルの下端に寄せる */
.b-price__note {
  margin-top: auto;
  padding-top: 1.1vw;
  border-top: 1px solid var(--b-line);
  font-size: clamp(9px, 1vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  text-align: center;
  color: #353535;
}

/* 使用箇所0（2026-08-24／ログ154でラグ・絨毯のカードを外したため）。
   .b-ph と同じくクライアント確認まで残置している */
.b-price__note--plain {
  border-top: none;
  padding-top: 1.1vw;
}

/* 3行を超える長い注記。中央ぞろえだと行末がばらついて読みにくいので左ぞろえにする。
   セミドライ側の「※基本的にウェット方式での洗浄となります〜」で使っている（2026-08-24） */
.b-price__note--long {
  text-align: left;
}

/* 大口向けの案内（2026-08-27 クライアント指示「少し目立つ感じで」）。
   料金カードの下・.b-price__foot の上に置く帯。幅は .b-price__foot と同じ 85.39%。
   色は既存トークンだけで組む（直値を足さない・4-14）。 */
.b-price__highlight {
  width: 85.39%;
  margin: 2.6vw auto 0;
  padding: clamp(12px, 1.4vw, 22px) clamp(14px, 1.8vw, 28px);
  border-left: 4px solid var(--b-accent-light);
  border-radius: 8px;
  background-color: var(--b-bg-tint);
  font-size: clamp(12px, 1.35vw, 20px);
  font-weight: var(--fw-bold);
  line-height: 1.8;
  color: var(--b-title);
}

.b-price__highlight-icon {
  margin-right: 0.4em;
}

/* --- 下部 --- */

.b-price__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  width: 85.39%;
  margin: 3.3vw auto 0;
}

.b-price__message {
  font-size: clamp(13px, 1.6vw, 23px);
  font-weight: var(--fw-title);
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--b-title);
}

/* サービスのボタンと同じ形。あちらは幅が広いので、こちらは中身に合わせる */
.b-price__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  /* 縦幅はサービスの「詳しく見る」と揃える。
     上下 padding が em 基準なので、文字サイズも同じにすれば
     どの画面幅でも高さが一致する（左右の padding だけこちらは狭い） */
  padding: 0.95em 1.8em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  /* 2026-08-25 指示：白と青を入れ替え／塗りを --b-btn-grad へ（.b-service__btn と同じ。
     枠線を透明にする理由と、ホバーで background-image を消す理由もあちらのコメント参照） */
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

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

/* --- 1023px以下：パネルを縦に積む --- */

@media (max-width: 1023px) {
  .b-price {
    padding-block: clamp(40px, 9vw, 72px) clamp(40px, 9vw, 72px);
  }

  .b-price__lead {
    margin-top: clamp(14px, 4vw, 24px);
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .b-price__panels {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 6vw, 32px);
    width: min(92%, 640px);
    margin-top: clamp(24px, 7vw, 40px);
  }

  .b-price__panel {
    padding: clamp(20px, 6vw, 32px) clamp(16px, 5vw, 28px) clamp(16px, 4vw, 24px);
  }

  .b-price__name {
    font-size: clamp(18px, 5vw, 24px);
  }

  .b-price__desc {
    margin-top: clamp(8px, 2.5vw, 14px);
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .b-price__rows {
    gap: clamp(12px, 4vw, 20px);
    padding-block: clamp(18px, 6vw, 28px);
  }

  .b-price__row dt {
    font-size: clamp(11px, 3vw, 14px);
  }

  .b-price__row dd {
    min-width: 52%;
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .b-price__row dd strong {
    font-size: clamp(22px, 7vw, 32px);
  }

  .b-price__table {
    margin-top: clamp(12px, 4vw, 18px);
  }

  .b-price__table th,
  .b-price__table td {
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .b-price__table-price strong {
    font-size: clamp(14px, 4.2vw, 19px);
  }

  .b-price__note {
    padding-top: clamp(12px, 4vw, 18px);
    font-size: clamp(11px, 2.9vw, 13px);
  }

  .b-price__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 5vw, 24px);
    width: min(92%, 640px);
    margin-top: clamp(24px, 7vw, 40px);
  }

  .b-price__message {
    font-size: clamp(14px, 4vw, 19px);
  }

  .b-price__btn {
    /* 2026-08-26 指示：縦幅の底上げも「詳しく見る」と同じ値で（B-0 の --b-btn-minh） */
    min-height: var(--b-btn-minh);
    /* 1カラムのときはボタンを中央に（案Aと同じ扱い） */
    align-self: center;
    /* 縦幅をサービスの「詳しく見る」と揃えるため、文字サイズも同じにする */
    font-size: clamp(13px, 3.4vw, 16px);
  }
}

/* ==========================================================================
   B-6. お知らせ・お役立ち情報（デザインサンプル assets/image/sample/top/design_frame_b-04.jpg に準拠）

   サンプルは 8000×4727px（縦は幅の59.1%）。以下の％はサンプル幅に対する割合。

   ┌──────────────────┬────────────────┬──────────────┐
   │                  │ x              │ y            │
   ├──────────────────┼────────────────┼──────────────┤
   │ 見出し＋ギザギザ   │ 34.60〜65.08%  │ 4.46〜9.98%  │
   │ カルーセル全体     │ 4.41〜95.58%   │ 15.60〜41.16%│
   │ 中央カードの画像   │ 32.13〜67.67%  │ 15.60〜37.67%│
   │ 両脇カードの画像   │ 幅26.4%        │ 19.20〜34.08%│
   │ 矢印（円）        │ 4.41〜12.49%   │ 直径8.08%    │
   │ View more        │ 42.70〜57.29%  │ 51.30〜55.56%│
   └──────────────────┴────────────────┴──────────────┘

   真ん中のカードだけ大きくする。幅と画像の高さを変えるだけなので、
   どちらも transition が効き、送りに合わせてなめらかに伸縮する。
   位置合わせ（中央のカードを画面中央に置く）は main-b.js が計算する。

   サンプルの見出し・ギザギザは黒（このコマだけワイヤーフレーム段階のため）。
   サービス・料金と体裁をそろえたいので、実装は青（--b-title）にしている。
   ========================================================================== */

.b-news {
  padding-block: 4.5vw 6vw;
  background-color: #fff;
  overflow: hidden;
}

.b-news .b-sechead {
  margin-bottom: 4.9vw;
}

/* --- カルーセル --- */

.b-news__carousel {
  position: relative;
}

/* 位置を測るあいだだけトランジションを止める（main-b.js の measureShift）。
   止めないと、幅が変化している途中の値で測ってしまい中心がずれる */
.b-news__carousel.is-measuring .b-news__track,
.b-news__carousel.is-measuring .b-news__card,
.b-news__carousel.is-measuring .b-news__thumb {
  transition: none;
}

.b-news__viewport {
  overflow: hidden;
}

.b-news__track {
  display: flex;
  align-items: flex-start;
  /* 中央カードと脇のカードの間隔（サンプル実測 1.33%） */
  gap: 1.33vw;
  /* 位置は main-b.js が --shift に入れる */
  transform: translateX(var(--shift, 0px));
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
  will-change: transform;
}

/* 脇のカードの画像を、中央の画像と上下の中心でそろえる。
   下げ量は**画像の高さの差の半分**。画像は 4:3 なので高さはカード幅の 0.75 倍で、
     中央 32vw × 0.75 ＝ 24vw ／ 脇 22.5vw × 0.75 ＝ 16.875vw
     (24 - 16.875) ÷ 2 ＝ 3.5625 → 3.56vw
   **カード幅を変えたらこの値と .b-news__nav の top も計算し直すこと。**

   2026-08-26：カバー画像を 4:3 にする指示に合わせ、カード幅を詰めた
   （脇 26.4→22.5vw／中央 35.54→32vw。旧値は 16:9 前後のサンプル実測だった）。 */
.b-news__card {
  flex: 0 0 auto;
  width: 22.5vw;
  margin-top: 3.56vw;
  transition: width 0.6s cubic-bezier(0.22, 0.7, 0.3, 1),
              margin-top 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* 真ん中に来たカードだけ大きくする */
.b-news__card.is-active {
  width: 32vw;
  margin-top: 0;
}

.b-news__link {
  display: block;
  color: inherit;
}

/* 画像。カバー画像が無い記事はグレーのべた塗りのまま（home-news.js が img を入れない）。

   **2026-08-26：比率を 4:3 に固定した（指示）。**
   もとは幅ごとに height を4本（脇/中央 × PC/SP）書いていたが、
   aspect-ratio 1本にすると**高さがカード幅から自動で決まる**ので、
   どの画面幅でも 4:3 が保証され、幅を変えるたびに高さを直す必要がなくなる。
   カード幅のトランジションがそのまま高さの動きになるため、
   height のトランジションも要らなくなった（送るときの伸び縮みは従来どおり）。 */
.b-news__thumb {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: clamp(10px, 1.4vw, 22px);
  background-color: #d9d9d9;
}

/* home-news.js が差し込む実カバー画像。width/height属性の実寸のまま置くと
   カード幅を無視して溢れるので、枠いっぱいに敷き詰める（news-b.css の
   .b-article__thumb img と同じ考え方） */
.b-news__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.b-news__meta {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 1.1vw;
}

.b-news__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7em;
  padding: 0.35em 0.9em;
  border: 1px solid var(--b-title);
  border-radius: 999px;
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: var(--fw-label);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--b-title);
}

.b-news__date {
  font-size: clamp(8px, 0.82vw, 12px);
  font-weight: var(--fw-body);
  color: var(--b-title);
}

.b-news__title {
  display: block;
  margin-top: 0.7vw;
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--b-title);
  /* 2行で打ち切る。1行の記事でもカードの高さが変わらないよう下限も2行ぶん */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 3em;
  overflow: hidden;
}

/* 抜粋は真ん中のカードだけに出す（サンプルどおり） */
.b-news__excerpt {
  display: none;
}

.b-news__card.is-active .b-news__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: 0.6vw;
  font-size: clamp(9px, 0.95vw, 14px);
  font-weight: var(--fw-body);
  line-height: 1.7;
  color: #8a8a8a;
}

.b-news__link:hover .b-news__title {
  text-decoration: underline;
}

/* 記事が3件未満だと main-b.js のガードでカルーセルが組み上がらない
   （initBNewsCarousel は originals.length < 3 で何もしない）。
   その場合、矢印は押しても動かないただの飾りになり、中央拡大も起きないので
   浮いて見える。素のリストとして自然に見えるよう、矢印を隠しカードを中央に寄せる。 */
.b-news__carousel:not(:has(.b-news__card:nth-child(3))) .b-news__nav {
  display: none;
}

.b-news__carousel:not(:has(.b-news__card:nth-child(3))) .b-news__track {
  justify-content: center;
}

/* --- 前後の矢印 --- */

.b-news__nav {
  position: absolute;
  /* 脇のカードの画像の高さの中心。**カードの下げ量 ＋ 画像の高さ÷2**。
     3.56 + (22.5 × 0.75) ÷ 2 ＝ 3.56 + 8.4375 ＝ 11.9975 → 12vw
     カード幅を変えたら、.b-news__card の margin-top と一緒にここも直すこと。 */
  top: 12vw;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 8.08vw;
  max-width: 76px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #111;
  color: #fff;
  transform: translateY(-50%);
  transition: background-color var(--t-fast), transform var(--t-fast);
}

.b-news__nav:hover {
  background-color: var(--b-title);
  transform: translateY(-50%) scale(1.06);
}

.b-news__nav svg {
  width: 42%;
  height: 42%;
}

.b-news__nav--prev {
  left: 4.41%;
}

.b-news__nav--next {
  right: 4.41%;
}

/* --- View more --- */

.b-news__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  width: fit-content;
  min-width: 14.59vw;
  margin: 4.4vw auto 0;
  padding: 0.95em 1.8em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  /* 2026-08-25 指示：白と青を入れ替え／塗りを --b-btn-grad へ（.b-service__btn と同じ） */
  background-color: var(--b-title);
  background-image: var(--b-btn-grad);
  color: #fff;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

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

/* --- スケルトン（読み込み中） ---
   home-news.js が /news/feed.php の応答を待つあいだ表示する骨組み。
   .b-news__card をそのまま使うので、幅・画像枠の高さ・行間は実カードと同一
   （＝差し替わっても高さが変わらず、跳ね（レイアウトシフト）が起きない）。
   カテゴリ・日付・タイトルは中身を空のまま背景色だけ乗せてバーに見せる。 */

.b-news__card--skeleton .b-news__cat,
.b-news__card--skeleton .b-news__date,
.b-news__card--skeleton .b-news__title {
  border-color: transparent;
  background-color: #e4e4e4;
}

.b-news__card--skeleton .b-news__date {
  display: inline-block;
  width: 5em;
  height: 1em;
  border-radius: 4px;
}

.b-news__card--skeleton .b-news__title {
  border-radius: 6px;
}

.b-news__card--skeleton .b-news__thumb,
.b-news__card--skeleton .b-news__cat,
.b-news__card--skeleton .b-news__date,
.b-news__card--skeleton .b-news__title {
  animation: b-news-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes b-news-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .b-news__card--skeleton .b-news__thumb,
  .b-news__card--skeleton .b-news__cat,
  .b-news__card--skeleton .b-news__date,
  .b-news__card--skeleton .b-news__title {
    animation: none;
  }
}

/* --- 1023px以下 --- */

@media (max-width: 1023px) {
  .b-news {
    padding-block: clamp(40px, 9vw, 72px);
  }

  .b-news .b-sechead {
    margin-bottom: clamp(24px, 7vw, 40px);
  }

  /* 幅が狭いので、脇のカードは端が少し覗く程度にする */
  .b-news__track {
    gap: clamp(10px, 3vw, 18px);
  }

  /* **幅はこの幅では据え置く（2026-08-26）。**
     中央カードは390pxの画面で 66vw ＝ 257px しかなく、これ以上細くすると本文が読みにくい。
     縦は余裕があるので、4:3 になったぶんは高さで受ける（画像の高さは幅の 0.75 倍）。
       中央 66 × 0.75 ＝ 49.5vw ／ 脇 46 × 0.75 ＝ 34.5vw
       下げ量 (49.5 - 34.5) ÷ 2 ＝ 7.5vw */
  .b-news__card {
    width: 46vw;
    margin-top: 7.5vw;
  }

  .b-news__card.is-active {
    width: 66vw;
    margin-top: 0;
  }

  .b-news__meta {
    margin-top: clamp(8px, 2.5vw, 14px);
  }

  .b-news__cat,
  .b-news__date {
    font-size: clamp(9px, 2.4vw, 12px);
  }

  .b-news__title {
    margin-top: clamp(5px, 1.6vw, 10px);
    font-size: clamp(12px, 3.4vw, 16px);
  }

  .b-news__card.is-active .b-news__excerpt {
    margin-top: clamp(4px, 1.4vw, 8px);
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .b-news__nav {
    /* 7.5 + 34.5÷2 ＝ 24.75vw */
    top: 24.75vw;
    width: 12vw;
    max-width: 52px;
  }

  .b-news__more {
    /* 2026-08-26 指示：縦幅の底上げ。文字が一段小さいぶん、
       サイト内でここが一番薄かった（390pxで 38.2px／375pxで 36.8px）。 */
    min-height: var(--b-btn-minh);
    min-width: 0;
    margin-top: clamp(24px, 8vw, 44px);
    font-size: clamp(12px, 3.2vw, 15px);
  }
}

/* ==========================================================================
   B-7. よくあるご質問（デザインサンプル assets/image/sample/top/design_frame_b-06.jpg に準拠）

   サンプルは 8000×3306px（縦は幅の41.33%）。以下の％はサンプル幅に対する割合。

   ┌──────────────────┬────────────────┬──────────────┐
   │                  │ x              │ y            │
   ├──────────────────┼────────────────┼──────────────┤
   │ 見出し＋ギザギザ   │ 34.60〜65.09%  │ 3.51〜9.05%  │
   │ 1行目            │ 8.36〜91.63%   │ 14.63〜20.00%│
   │ 2行目            │ 同上           │ 23.14〜28.50%│
   │ 3行目            │ 同上           │ 31.64〜37.01%│
   └──────────────────┴────────────────┴──────────────┘

   2列（1枚 40%・間 3.27%）。1枚の高さ 5.37%、行の送り 8.51%。
   開閉は details / summary の標準機能なので、JSは使っていない。
   ========================================================================== */

.b-faq {
  padding-block: 3.5vw 3.9vw;
  background-color: #fff;
}

.b-faq .b-sechead {
  margin-bottom: 4.9vw;
}

/* 2列は grid の行で並べず、列そのものを分けている。
   grid だと行の高さがそろってしまい、片方を開いたときに
   同じ行のもう片方の下に空きができてしまうため。
   列を分ければ、開いた列だけが伸びる。 */
.b-faq__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.93%;
  align-items: start;
  width: 83.27%;
  margin-inline: auto;
}

.b-faq__col {
  display: grid;
  /* 行の間 3.14%（送り8.51 − 高さ5.37） */
  gap: 3.14vw;
  align-content: start;
}

.b-faq__item {
  border: 1px solid var(--b-line);
  /* 高さ 5.37% の角丸。ほぼピル型 */
  border-radius: 999px;
  background-color: #fff;
}

/* 開いているあいだは角丸を弱めて、答えが収まる形にする。
   ここをアニメーションさせると、高さが伸びるあいだ輪郭が
   ぐにゃぐにゃ動いて見えるので、切り替えは一瞬で行う */
.b-faq__item[open] {
  border-radius: clamp(16px, 2.4vw, 38px);
}

.b-faq__q {
  display: flex;
  align-items: center;
  gap: 0.8em;
  /* 1枚の高さ 5.37vw ぶんを確保する */
  min-height: 5.37vw;
  padding: 0.9em 1.2em 0.9em 1.9em;
  font-size: clamp(11px, 1.15vw, 17px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}

/* 標準の三角マークを消す */
.b-faq__q::-webkit-details-marker {
  display: none;
}

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

/* 質問の頭の「Q.」 */
.b-faq__q::before {
  content: "Q.";
  flex-shrink: 0;
  font-weight: var(--fw-title);
}

/* 右端の丸ボタン。開くと矢印が上を向く */
.b-faq__q::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 3.5vw;
  max-width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #111;
  /* 白い山形（chevron）を中央に置く */
  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='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
  transition: transform var(--t-base), background-color var(--t-fast);
}

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

.b-faq__q:hover::after {
  background-color: var(--b-title);
}

/* 開閉のアニメーション。
   details は開いた瞬間に中身が現れるので、そのままだと高さが跳ねて見える。
   高さ（height）を 0 ↔ 実寸で動かしてなめらかにしている。
   grid の行（0fr↔1fr）でも同じことはできるが、Safari が
   grid-template-rows をアニメーションしないため height にしている。
   開き始め・閉じ終わりの順番は main-b.js が制御する。 */
.b-faq__wrap {
  overflow: hidden;
  transition: height 0.35s ease;
}

.b-faq__a {
  padding: 0 1.9em 1.4em 1.9em;
  font-size: clamp(10px, 1.05vw, 15px);
  font-weight: var(--fw-body);
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: #353535;
}

@media (prefers-reduced-motion: reduce) {
  .b-faq__item,
  .b-faq__wrap,
  .b-faq__q::after {
    transition: none;
  }
}

/* --- 1023px以下：1列にする --- */

@media (max-width: 1023px) {
  .b-faq {
    padding-block: clamp(40px, 9vw, 72px);
  }

  .b-faq .b-sechead {
    margin-bottom: clamp(24px, 7vw, 40px);
  }

  .b-faq__list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 3vw, 16px);
    width: min(92%, 640px);
  }

  .b-faq__col {
    gap: clamp(10px, 3vw, 16px);
  }

  .b-faq__q {
    min-height: 0;
    padding: 0.95em 1em 0.95em 1.3em;
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .b-faq__q::after {
    width: 8vw;
    max-width: 36px;
  }

  .b-faq__a {
    padding: 0 1.3em 1.2em 1.3em;
    font-size: clamp(12px, 3.1vw, 14px);
  }
}

/* ==========================================================================
   B-8. お問い合わせ導線・フッター

   お問い合わせ導線（.contact-lead）は案Aと同じ見た目のまま。
   マークアップもスタイルも案Aのもの（style.css / home.css）をそのまま使う。
   使っている色はほぼ --c-brand-* 系でテーマに依存しないが、
   --c-text-sub だけはテーマごとに値が違う（案A #5a6b7c ／ theme-b #61736c）。
   案Aと同じ見え方にしたいので、このブロックの中だけ案Aの値に合わせる。

   ---------------------------------------------------------------------------
   フッターは 2026-08-25 にデザインサンプル
   assets/image/sample/top/design_frame_service.jpg へ合わせて作り直した。

   **白地・黒文字 → 水色の角丸パネル・白文字。** 左右に余白を空けて中央に置き、
   上2つの角だけ大きく丸め、下はページの下端まで伸ばす。
   中の問い合わせカード2枚（青／LINE緑・半透明の白タイル・白枠のピル）は
   もともとサンプルと一致していた（幅もカード角丸もピル高さも実測で一致）ので触っていない。

   サンプルは 8000px 幅＝画面幅100%。以下の％はサンプル幅に対する割合で、
   そのまま vw に読み替えている（1440px幅なら ×0.18 が実寸）。

   | 項目                    | サンプル      | 1440px時 |
   |-------------------------|---------------|----------|
   | パネル幅                | 87.59%        | 1261px   |
   | パネル上の角丸          | 5.99%         |   86px   |
   | パネル上端 → ロゴ上端   | 3.68%         |   53px   |
   | 中のコンテンツ幅        | パネルの85.3% | 1076px   |
   | ロゴ幅                  | 8.90%         |  128px   |
   | 会社情報の文字          | 1.305%        | 18.8px   |
   | 会社情報の行送り        | 1.815         |          |
   | カード幅                | 38.08%        |  548px   |

   **clamp の上限は「パネルが 1600px で頭打ちになる画面幅（約1826px）」の実寸に合わせてある。**
   ここを超えても vw で伸ばし続けると、パネルだけ止まって中身が膨らんで崩れる。

   **地色はサンプルの水色 #00b9ef ではなく #0077b6。**
   2026-08-25 のクライアント指示「もう少し濃い青に」で変更した（B-0 の `--b-footer-bg`）。
   白文字とのコントラストは 2.29:1 → **4.87:1** になり WCAG AA（4.5:1）を満たす。
   **地色を変えるときは `--b-footer-bg` の1か所だけでよい。**
   ただし青カード（#0149ba）との差は 1.62:1 まで縮んでいるので、
   **これ以上濃くするとメールカードが地に沈む。** 濃くしたい指示が来たら
   カード側にも手を入れる（枠線を足す・カードを一段濃くする等）前提で考えること。
   ========================================================================== */

.theme-b .contact-lead {
  --c-text-sub: #5a6b7c;
}

/* 電話に出られないときの案内（.tel-note・2026-09-07 クライアント指示）

   置く場所は2つあり、どちらもこの1か所で見た目が決まる。
     - .contact-lead の「受付時間 …」の下（トップ／サービス／料金／会社概要／
       特商法／プライバシー＋お知らせの7か所）
     - /contact/ の .b-contact-ways の下（横幅いっぱいにする指定だけ contact-b.css）

   どちらも中央ぞろえの中に入るので、箱は width: fit-content で文字の幅ぶんに縮め、
   margin-inline: auto で中央に置く。中の3行の br は支給原稿の改行位置。
   幅が足りない画面では max-width: 100% が効き、各行がさらに折り返す。

   地色と枠線は会社情報テーブルと同じ組み合わせ（--b-bg-tint ＋ --b-line）にしてある。 */
.theme-b .tel-note {
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(12px, 1.6vw, 20px);
  margin-inline: auto;
  padding: clamp(10px, 1.2vw, 16px) clamp(14px, 1.8vw, 22px);
  border: 1px solid var(--b-line);
  border-radius: var(--radius);
  background-color: var(--b-bg-tint);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  text-align: center;
  color: var(--c-ink);
}

/* 狭い画面での折り返し位置。SPでは1行が入りきらないので必ず折り返るが、
   素のままだと「…ございますが、」の途中（ござ｜いますが、）で切れて読みにくい。
   文節ごとに inline-block にしておくと、その境目で折り返る。
   PC幅では3行のまま変わらない（支給原稿の改行位置）。 */
.theme-b .tel-note__t {
  display: inline-block;
}

/* --- パネル本体 ---
   SPは左右の余白を 3% に詰める（6.2%のままだと住所の行が折り返す） */

.theme-b .footer {
  /* パネルの上の余白。style.css は `.contact-lead` の下余白を 0 にしていて
     （フッターが白地だったころは地続きだったため）、そのままだと
     「受付時間 …」の行がパネルの上辺に貼り付く。
     2026-08-25 の指示「距離を少し空ける」で足した。1440pxで文字の下端から52px。

     **`.contact-lead` の下余白ではなく、フッター側の margin で空けている。**
     理由は、この持たせ方なら `.contact-lead` が無い /contact/ /thanks/ にも
     同じだけ効いて、7ページで余白がそろうため。

     代わりに、地色つきのページ（/service/ /price/ /company/ の #f6fafd）では
     白ベタの `.contact-lead` が先に終わるので、**パネルの手前に地色の帯が52px入る。**
     白と地色の差は 9/5/2 しかないのでほぼ見えない（実測1.03:1）。
     「白をパネルの肩まで伸ばしたい」と言われたら `.contact-lead` の padding-bottom へ
     移すこと。その場合は /contact/ /thanks/ に別途 margin が要る
     （`main:not(:has(.contact-lead)) + .footer` で足せる）。 */
  margin-top: clamp(26px, 3.6vw, 56px);

  width: min(94%, 1600px);
  margin-inline: auto;
  border-radius: clamp(24px, 6vw, 108px) clamp(24px, 6vw, 108px) 0 0;
  background-color: var(--b-footer-bg);
  color: #fff;
  padding-block: clamp(24px, 3.7vw, 67px) clamp(20px, 2.4vw, 34px);
}

@media (min-width: 768px) {
  .theme-b .footer {
    width: min(87.6%, 1600px);
  }
}

/* --- パネルの中身の幅と2カラム ---

   左右のカラム比は、右のカードがサンプルどおり「コンテンツ幅の51%」になる値。

   **2カラムにするのは 1024px 以上。** style.css は768px以上で2カラムにしているが、
   パネルの左右に余白ができたぶん中の幅が狭くなり、768〜1023px では左カラムが292pxまで
   落ちて住所の最長行（「住所：東京都葛飾区青戸1-10-1 あわのすビル301」）が折り返す。

   1024px なら左カラム335px・住所の最長行303px で **32px（10.6%）の余裕**がある。
   この比率は全幅で一定（1440pxなら 472px 対 422px）で、サンプルの余裕と同じ。
   **会社情報の文字を大きくしたら、必ず全幅で測り直すこと。** */

.theme-b .footer__inner,
.theme-b .footer__bottom {
  width: 92%;
}

@media (min-width: 768px) {
  .theme-b .footer__inner,
  .theme-b .footer__bottom {
    width: 85.3%;
  }

  .theme-b .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .theme-b .footer__inner {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    gap: clamp(28px, 3.9vw, 71px);
  }
}

/* --- ロゴ＋社名。サンプルはロゴが一回り大きく、文字は白 --- */

.theme-b .footer__logo img {
  width: clamp(72px, 8.9vw, 162px);
}

.theme-b .footer__brand-lead {
  font-size: clamp(12px, 1.13vw, 20px);
  color: #fff;
}

.theme-b .footer__brand-name {
  color: #fff;
}

/* --- 会社情報。サンプルは7行とも太字で、いまより一段大きい --- */

.theme-b .footer__info {
  margin-top: clamp(20px, 3.9vw, 71px);
  font-size: clamp(13px, 1.3vw, 24px);
  font-weight: var(--fw-bold);
  line-height: 1.8;
}

/* 1行目（社名）は style.css で --fw-label(500) を持っている。
   本文が400だったころは「1行目だけ少し太い」だったが、7行とも太字になった今は
   逆に1行目だけ細くなってしまうので、他の行にそろえる */
.theme-b .footer__company {
  font-weight: var(--fw-bold);
}

/* 地が水色なので、ホバーで青にすると沈む。下線だけで示す */
.theme-b .footer__info a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- 問い合わせカード2枚 ---

   配色・角丸・白枠のピルは style.css のままでサンプルと一致している。
   合っていなかったのは「高さ」だけ。style.css は左の会社情報と同じ高さまで
   2枚を引き伸ばしていたが、サンプルは中身なりの高さで、**下辺だけ**が会社情報とそろう。
   align-self: end で伸びを止める（1fr×2 のままなので2枚の高さは互いにそろう）。

   サンプル実測：カード高 920（11.50%）＝ タイル 545（6.81%）＋ 上下の余白 187.5（2.34%）ずつ。
   横の余白は 102（1.28%）で、上下とは値が違う。 */

@media (min-width: 1024px) {
  .theme-b .footer__cta {
    align-self: end;
  }
}

.theme-b .contact-card {
  padding: clamp(14px, 2.34vw, 43px) clamp(12px, 1.28vw, 23px);
}

.theme-b .contact-card__icon {
  width: clamp(54px, 6.81vw, 124px);
  height: clamp(54px, 6.81vw, 124px);
}

/* --- 最下部（コピーライト／プライバシーポリシー） --- */

.theme-b .footer__bottom {
  margin-top: clamp(24px, 3.7vw, 68px);
  font-size: clamp(11px, 1.15vw, 21px);
  font-weight: var(--fw-bold);
  color: #fff;
}

.theme-b .footer__privacy:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   B-9. 導入メッセージ（デザインサンプル assets/image/sample/top/design_frame_b-08.jpg に準拠）

   サンプルは 8000×4356px（縦は幅の54.45%）。以下の％はサンプル幅に対する割合。

   ┌────────────────┬────────────────┬──────────────┐
   │                │ x              │ y            │
   ├────────────────┼────────────────┼──────────────┤
   │ 左列（ギャラリー）│ 1.96〜28.01%   │ 2.67〜47.26% │
   │ 右列（ギャラリー）│ 29.93〜55.80%  │ 7.86〜52.26% │
   │ 1枚のカード     │ 幅26.05%       │ 高21.17%（比1.23）│
   │ 見出し1行目     │ 60.22〜93.19%  │ 9.71〜13.59% │
   │ 見出し2行目     │ 60.27〜93.59%  │ 17.00〜21.09%│
   │ 本文（6行）     │ 60.3〜90.6%    │ 24.91〜41.99%│
   └────────────────┴────────────────┴──────────────┘

   右列は左列より 5.19% 下げて互い違いにしている。

   ループはCSSのアニメーションだけで作る。
   同じ並びを2組ずつ置き、半分だけ動かすと元の位置に戻るので継ぎ目が出ない。
   gap があるぶん「半分」は gap の半分だけ足りないので、その分を引いている。
   ========================================================================== */

.b-intro {
  --b-intro-gap: 2.26vw;

  padding-block: 2.7vw 2.2vw;
  /* 上は今までの色、下はさらに薄い水色。次のサービスセクション（白）へ自然につなぐ */
  background-color: var(--b-bg-tint);
  background-image: linear-gradient(to bottom, var(--b-bg-tint), var(--b-bg-tint-light));
  overflow: hidden;
}

.b-intro__inner {
  display: grid;
  /* ギャラリー 53.84% ／ 間 4.42% ／ 文章 33.37% */
  grid-template-columns: 58.75% 1fr;
  /* ギャラリーと文章の間 4.42%（内側幅 91.63% に対して 4.82%） */
  gap: 4.82%;
  align-items: center;
  /* サンプルの内容は x 1.96〜93.59%。左右で余白が違うので margin で置く */
  width: 91.63%;
  margin-left: 1.96%;
}

/* --- 左：ループギャラリー --- */

.b-intro__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 列の間 1.92%（ギャラリー幅 53.84% に対して 3.57%） */
  gap: 3.57%;
  /* 流れているところだけ見せる窓 */
  height: 49.6vw;
  overflow: hidden;
}

.b-intro__track {
  display: flex;
  flex-direction: column;
  gap: var(--b-intro-gap);
  animation: b-intro-loop 44s linear infinite;
  will-change: transform;
}

/* 右列は逆再生で下へ流す。開始位置も互い違いにずらす */
.b-intro__track--down {
  margin-top: -5.19vw;
  animation-direction: reverse;
}

.b-intro__item {
  display: block;
  flex-shrink: 0;
  /* サンプルのカードは 26.05% × 21.17% */
  aspect-ratio: 26.05 / 21.17;
  border-radius: clamp(10px, 1.5vw, 24px);
  /* 角丸で写真を切る。読み込み前の下地も兼ねて背景色は残している */
  overflow: hidden;
  background-color: #d9d9d9;
  /* 薄い水色の地から浮かせる。ぼかしを広げると左右がギャラリーの
     overflow: hidden で切られるので、影は下方向に寄せている */
  box-shadow:
    0 clamp(4px, 0.6vw, 9px) clamp(9px, 1.3vw, 20px) clamp(-7px, -0.5vw, -3px) rgba(12, 75, 109, 0.3),
    0 clamp(1px, 0.14vw, 2px) clamp(2px, 0.3vw, 5px) rgba(12, 75, 109, 0.1);
}

/* 写真は 4:3、枠は 26.05:21.17（≒1.23）なので、はみ出すぶんは cover で切る */
.b-intro__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes b-intro-loop {
  from { transform: translateY(0); }
  /* 2組のうち1組ぶん。gap の半分を引かないと継ぎ目がずれる */
  to { transform: translateY(calc(-50% - var(--b-intro-gap) / 2)); }
}

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

/* --- 右：見出しと本文 --- */

/* 色は案Aのセクションタイトルと同じルール（home.css の「市松」）。
   地が薄いほう #489ad8、em を付けた文字が濃いほう #176ebc で1文字おきに交互。
   案Aのファイルは触らず、同じ値をこちらでも定義している。 */
.b-intro__title {
  font-size: clamp(22px, 4.12vw, 59px);
  font-weight: var(--fw-title);
  line-height: 1.75;
  /* サンプルの字送りは 0。body の 0.02em のままだと1行に収まらず折り返す */
  letter-spacing: 0;
  color: #489ad8;
}

.b-intro__title em {
  font-style: normal;
  color: #176ebc;
}

/* 案AのFVキャッチ（.fv__copy）と同じ跳ね方。1文字ずつ順に跳ねる。
   文字の分割は main-b.js が行い、終わると .is-split が付く。
   JSが動かない環境では分割されず、文字は静止したまま表示される。

   keyframes は home.css の fv-copy-bounce と同じ内容だが、
   案Aのファイルに依存させたくないので、こちらにも持たせている。 */
.b-intro__title.is-split .b-intro__char {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: b-intro-bounce 5.42s linear infinite;
  /* 何文字目かは --i。ずらす量の計算だけCSS側に置いている */
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes b-intro-bounce {
  0%     { transform: translateY(0) scale(1);
           animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); }
  4.6%   { transform: translateY(-0.1em) scale(1.075);
           animation-timing-function: cubic-bezier(0.6, 0, 0.75, 1); }
  8.5%   { transform: translateY(0) scale(1);
           animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); }
  10%    { transform: translateY(-0.03em) scale(1.022); }
  11.45% { transform: translateY(0) scale(1); }
  100%   { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .b-intro__title.is-split .b-intro__char {
    animation: none;
  }
}

.b-intro__text {
  margin-top: 1.9vw;
  font-size: clamp(12px, 1.55vw, 22px);
  /* FVのリード文と同じく1段上げている（400 → 500） */
  font-weight: var(--fw-label);
  /* 行の送り 3.13% ÷ 文字 1.55% */
  line-height: 2.02;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

/* --- 1023px以下：ギャラリーを横へ流す2段にする --- */

@media (max-width: 1023px) {
  .b-intro {
    --b-intro-gap: clamp(10px, 3vw, 18px);

    padding-block: clamp(32px, 8vw, 56px);
  }

  .b-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 7vw, 40px);
    width: 100%;
    margin-left: 0;
  }

  /* 縦2列 → 横2段。1段目は左へ、2段目は右へ流す */
  .b-intro__gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-intro-gap);
    height: auto;
  }

  .b-intro__track {
    flex-direction: row;
    animation-name: b-intro-loop-x;
    animation-duration: 32s;
  }

  .b-intro__track--down {
    margin-top: 0;
  }

  .b-intro__item {
    /* 1画面に2枚ちょっと見える大きさ */
    width: 42vw;
  }

  @keyframes b-intro-loop-x {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - var(--b-intro-gap) / 2)); }
  }

  .b-intro__body {
    width: min(92%, 640px);
    margin-inline: auto;
  }

  /* 1カラムになるぶん横幅に余裕ができるので、PCより一段大きくして中央に置く */
  .b-intro__title {
    font-size: clamp(26px, 7.6vw, 40px);
    line-height: 1.6;
    text-align: center;
  }

  .b-intro__text {
    margin-top: clamp(12px, 4vw, 20px);
    font-size: clamp(14px, 3.9vw, 18px);
    line-height: 1.95;
    text-align: center;
  }
}