/*
 * 川口伐採サービス サイト固有テーマ
 *
 * 型の出所は tools/serp_design/bassai.md。
 * 主参考は「東京 伐採」でポータルを除いた検索1位 https://bassai.co.jp/ の実測。
 * 採ったのは「型」だけで、画像・文章・ロゴ・イラスト・コードは1バイトも持ち込んでいない。
 *
 * 1位から採った型:
 *   - 地を白にせず淡いミント(#ECF7EA)にして、白をカードとして浮かせる
 *   - 緑を明・中・濃の3段で帯にして、セクションの切り替えを色でやる
 *   - CTAだけ色相を外す（緑の連続の中で、押す場所だけ橙）
 *   - 濃い面に黄色い数字を載せる
 *   - 英字キッカー + 日本語の中央見出し
 *   - 本文の合間にCTAを3回（診断2 + 末尾の帯1）
 *   - スマホは色地の追従バーを横いっぱいに割る
 * 1位から採らなかったもの:
 *   - 画像の見出し（CSSの ::before で英字キッカーを出す）
 *   - ネイビーのCTA面（外構サイトの紺と衝突するので濃緑に置換）
 *   - #F45900 の橙（白文字で3.6:1しかなくAA不足。方向を保ったまま #C2410C へ）
 *
 * 写真の扱い（2026-08-25 に方針変更）:
 *   当初は写真ゼロ（自社撮影が1枚も無く、ストック写真は施工写真に見えるため）で、
 *   写真帯を濃緑グラデ + CSSの等高線パターンで代替していた。
 *   現在は Pexels のストック写真を「イメージ写真」として入れている。
 *   施工事例・作業実績・ビフォーアフターには一切使わず、ヒーロー背景・作業カード・
 *   セクション装飾に限る。ページ側に「写真はイメージです」を明記する（index.astro）。
 *   写真が無いときの見た目（濃緑グラデ + 等高線）は残してあり、
 *   Hero に image を渡さなければそのまま戻る。
 *
 * 色はすべて WCAG 2.2 AA（本文4.5:1 / 大文字3:1）を実測して確定した。
 * マークアップは packages/shared のまま。
 *
 * セレクタが `html body.t-bassai:not(#never) …` と長いのには理由がある。
 * Astro の scoped CSS はビルド後 `.hero[data-astro-cid-xxxx]` の形になり、
 * クラス相当の重みが2つある。さらにそのバンドルは <head> で theme.css より
 * 後ろに入る。README にある `html .x`（クラス1・要素1）では届かず、
 * `.band[cid] h2[cid]`（クラス相当4）まで出てくるので、
 * `:not(#never)` で ID 相当を1つ足して確実に上回らせている。
 * `#never` に一致する要素は無いので、当たる要素は変わらない。
 */

html:root:not(#never) {
  /* Base.astro が site.config から流し込む値と同じものを、テーマ側でも確定させる */
  --c-primary: #1f6b3a;   /* 白上 6.52:1 / ミント上 5.91:1 */
  --c-accent: #c2410c;    /* 白文字 5.18:1 */
  --c-text: #1f2a22;      /* 白上 14.87:1 / ミント上 13.49:1 */
  --c-muted: #4f6157;     /* 白上 6.60:1 */
  --c-border: #cfe3d3;
  --c-bg: #ffffff;
  --c-bg-soft: #ffffff;
  --c-footer-bg: #14472c;
  --c-footer-fg: #eef7f0;
  --c-footer-muted: #a8d5b0; /* 濃緑上 6.51:1 */
  --w-container: 1100px;    /* 1位の実測コンテナ幅と同じ */

  /* テーマ固有トークン */
  --t-ground: #ecf7ea;      /* ページの地（淡ミント） */
  --t-ground-2: #dcefe0;    /* 一段濃い淡緑 */
  --t-deep: #14472c;        /* 濃緑の帯 */
  --t-deep-2: #1c5c39;
  --t-mid: #1f6b3a;
  --t-gold: #ffe430;        /* 濃緑上 8.33:1。大きい数字だけに使う */
  --t-line: #06c755;
  --t-radius: 12px;
  --t-shadow: 0 1px 2px rgba(20, 71, 44, 0.06), 0 8px 24px -12px rgba(20, 71, 44, 0.28);
  --t-shadow-lift: 0 2px 4px rgba(20, 71, 44, 0.08), 0 18px 40px -18px rgba(20, 71, 44, 0.42);
  --t-pad-section: clamp(2.75rem, 6vw, 4.5rem);
}

/* ------------------------------------------------------------------ 地 */

html body.t-bassai:not(#never) {
  background-color: var(--t-ground);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
    system-ui, sans-serif;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.015em;
  line-height: 1.85;
  padding-bottom: 4.75rem; /* 追従CTA(56px)の下に本文を隠さない */
}

@media (min-width: 768px) {
  html body.t-bassai:not(#never) {
    padding-bottom: 0;
  }
}

html body.t-bassai:not(#never) h1,
html body.t-bassai:not(#never) h2,
html body.t-bassai:not(#never) h3 {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
    Meiryo, system-ui, sans-serif;
  letter-spacing: 0.02em;
}

html body.t-bassai:not(#never) a {
  color: var(--t-mid);
  text-underline-offset: 0.2em;
}

html body.t-bassai:not(#never) :focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- ヘッダー */

html body.t-bassai:not(#never) .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--c-border), 0 6px 20px -18px rgba(20, 71, 44, 0.6);
}

/* 1位のヘッダーは高さ80px。同じ密度に合わせる */
html body.t-bassai:not(#never) .site-header__inner {
  padding-block: 0.875rem;
  gap: 1rem 1.5rem;
}

html body.t-bassai:not(#never) .site-header__brand {
  color: var(--t-deep);
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.1875rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ロゴは自作。幹＋枝を線で組んだだけの図形で、他社の意匠は入れていない */
html body.t-bassai:not(#never) .site-header__brand::before {
  content: '';
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  border-radius: 8px;
  background:
    linear-gradient(160deg, var(--t-mid), var(--t-deep));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M12 13 6 7'/%3E%3Cpath d='m12 11 6-6'/%3E%3Cpath d='M12 17l-4-4'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M12 13 6 7'/%3E%3Cpath d='m12 11 6-6'/%3E%3Cpath d='M12 17l-4-4'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
}

html body.t-bassai:not(#never) .site-header__nav a {
  color: var(--c-text);
  font-weight: 500;
  padding: 0.375rem 0.125rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

html body.t-bassai:not(#never) .site-header__nav a:hover {
  text-decoration: none;
  color: var(--t-mid);
  border-bottom-color: var(--c-accent);
}

/* 番号が取れたら効く。1位は電話番号を数字として大きく見せている */
html body.t-bassai:not(#never) .site-header__tel {
  background: var(--t-deep);
  color: #fff;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  min-block-size: 48px;
  justify-content: center;
}
html body.t-bassai:not(#never) .site-header__tel-num {
  color: var(--t-gold);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
html body.t-bassai:not(#never) .site-header__tel-hours {
  color: #d9f0dc;
}

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

/* 1位のCTAは55px高の矩形。角丸だけ少し足してタップ面を56pxに揃える */
html body.t-bassai:not(#never) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 56px;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

html body.t-bassai:not(#never) .btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  box-shadow: 0 2px 0 #8f300a, var(--t-shadow);
}

html body.t-bassai:not(#never) .btn--primary:hover {
  filter: none;
  background: #a8380b;
  transform: translateY(1px);
  box-shadow: 0 1px 0 #8f300a, var(--t-shadow);
}

html body.t-bassai:not(#never) .btn--ghost {
  background: #fff;
  color: var(--t-deep);
  border-color: var(--t-deep);
}

html body.t-bassai:not(#never) .btn--ghost:hover {
  filter: none;
  background: var(--t-ground-2);
}

/* ------------------------------------------------------------- ヒーロー */

html body.t-bassai:not(#never) .hero {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  color: #fff;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(78, 193, 144, 0.34), transparent 62%),
    linear-gradient(155deg, #1c5c39 0%, #14472c 55%, #0f3722 100%);
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3.5rem, 9vw, 6rem);
  overflow: hidden;
}

/* 背景写真を入れたとき（Hero.astro が .hero--photo と --hero-image を付ける）。
 *
 * 暗幕の濃さは hero.webp の実ピクセルから決めた。素の写真は輝度 mean 0.341 /
 * p95 0.605 / max 1.000（おがくずの白飛び）で、そのままでは白文字が乗らない。
 * 最悪ケースの max=1.0 のピクセルに #0c2c1b を α で重ねたときの相対輝度を計算し、
 * 文字色ごとに必要な α を出している（sRGB 値の線形混合 → WCAG 2.2 の相対輝度）。
 *
 *   #ffffff  本文4.5:1 に必要な背景輝度 ≤0.183 / 大文字3:1 は ≤0.30
 *   #ffe430  （キッカー12px・4.5:1 が要る）        ≤0.132
 *   #dbeee0  （lead 16px）                          ≤0.142
 *
 * 横位置で必要な濃さが変わる。lead は max-width 38em なのでコンテナの 54% までしか
 * 伸びず、そこから右は 44px の h1（＝大文字扱い3:1）しか乗らない。だから左を濃く、
 * 右を薄くして写真を見せる。0% で α.90 / 46% で α.80 / 78% で α.58 / 100% で α.42。
 *
 * 確定値は計算ではなく実測。ビルドしたページを Chromium で開き、文字を transparent に
 * したスクショと通常のスクショの差分で「文字が実際に描かれた画素」を出し、その2px外周まで
 * 含めた範囲の背景輝度から比を取った（bbox 全体で測ると文字の無い右半分の明るい写真まで
 * 拾ってしまう）。最悪画素での実測値:
 *
 *   1440px  h1 4.83〜5.68:1 ／ lead 6.2〜6.4:1 ／ キッカー 7.6〜7.8:1
 *    390px  h1 6.85:1 ／ lead 6.28:1 ／ キッカー 5.09:1
 *
 * （h1 は行の折り返し位置が描画のたびに1px単位で動くので幅で書いている。
 *   測り直しは tools/serp_design/bassai.md の手順ではなく、上の差分マスク法で行う）
 *
 * いずれも本文基準の 4.5:1 を上回っている（h1 は大文字扱いで 3:1 が要件）。
 * ヒーロー背景そのものの平均輝度は 1440px で左20% 0.044 → 右20% 0.168 で、
 * 文字が乗らない右側には写真が残る。暗幕を濃くしすぎて写真が消えるのを避けた線。
 *
 * 濃緑グラデ（写真なしの既定）から色相は動かしていないので、写真の有無で
 * サイトの印象が変わらない。
 */
html body.t-bassai:not(#never) .hero--photo {
  background-color: #0c2c1b;
  background-image:
    linear-gradient(
      to right,
      rgba(12, 44, 27, 0.9) 0%,
      rgba(12, 44, 27, 0.8) 46%,
      rgba(15, 55, 34, 0.58) 78%,
      rgba(15, 55, 34, 0.42) 100%
    ),
    var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 狭い画面は文字が横いっぱいに回り込むので、方向グラデをやめて全面を同じ濃さにする。
   α.82 なら白飛きピクセル上でも #cfe6d6（受付時間・いちばん暗い文字色）で 5.9:1 */
@media (max-width: 700px) {
  html body.t-bassai:not(#never) .hero--photo {
    background-image:
      linear-gradient(180deg, rgba(12, 44, 27, 0.78) 0%, rgba(12, 44, 27, 0.86) 100%),
      var(--hero-image);
  }
}

/* 写真の代わりに敷く等高線パターン。自作の図形だけで作っている。
   写真が入ったときは競合するので出さない */
html body.t-bassai:not(#never) .hero--photo::before {
  content: none;
}

html body.t-bassai:not(#never) .hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  inline-size: min(720px, 82vw);
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.075) 0 2px,
    transparent 2px 26px
  );
  opacity: 0.9;
}

html body.t-bassai:not(#never) .hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  block-size: 6px;
  background: linear-gradient(90deg, #4ec190 0%, var(--t-mid) 42%, var(--c-accent) 42%, #e0632a 100%);
}

html body.t-bassai:not(#never) .hero__inner {
  position: relative;
}

/* 1位の「英字キッカー + 日本語」を、画像ではなくCSSで出す */
html body.t-bassai:not(#never) .hero__inner::before {
  content: 'KAWAGUCHI / TREE FELLING';
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--t-gold);
  margin-bottom: 0.875rem;
}

html body.t-bassai:not(#never) .hero__title {
  font-size: clamp(1.625rem, 5.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1.4;
  color: #fff;
  max-width: 22em;
}

html body.t-bassai:not(#never) .hero__lead {
  color: #dbeee0; /* 濃緑上 8.0:1 */
  max-width: 38em;
  margin-top: 1.25rem;
  font-size: 1rem;
}

html body.t-bassai:not(#never) .hero__actions {
  margin-top: 2rem;
  gap: 0.875rem;
}

html body.t-bassai:not(#never) .hero .btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

html body.t-bassai:not(#never) .hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

html body.t-bassai:not(#never) .hero__note {
  color: #cfe6d6;
}

/* --------------------------------------------------- セクションのリズム */

/* 1位は「色帯 → 写真帯 → 白 → 色帯」で同じ地を続けない。
   写真が使えないぶん、地は ミント / 白 / 濃緑 の3種で切り替える */
html body.t-bassai:not(#never) .section {
  padding-block: var(--t-pad-section);
  background: transparent; /* body のミントが出る */
}

html body.t-bassai:not(#never) .section--soft {
  background: #fff;
}

/* 濃緑の帯。1位の写真背景セクションに当たる位置に置く */
html body.t-bassai:not(#never) .s-dark {
  position: relative;
  isolation: isolate;
  color: #eef7f0;
  background:
    radial-gradient(90% 120% at 10% 0%, rgba(78, 193, 144, 0.22), transparent 60%),
    linear-gradient(180deg, #1c5c39, #14472c);
}

html body.t-bassai:not(#never) .s-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    -50deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 18px
  );
}

html body.t-bassai:not(#never) .s-dark h2 {
  color: #fff;
}

html body.t-bassai:not(#never) main .s-dark h2[data-en]::before {
  color: var(--t-gold);
}

html body.t-bassai:not(#never) main .s-dark h2::after {
  background: var(--t-gold);
}

html body.t-bassai:not(#never) .s-dark p {
  color: #d5ebdb; /* 濃緑上 7.6:1 */
  max-width: 44em;
}

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

html body.t-bassai:not(#never) main h2 {
  margin-top: 0;
  font-size: clamp(1.375rem, 3.6vw, 1.875rem);
  font-weight: 900;
  color: var(--t-deep);
  text-align: center;
  line-height: 1.45;
}

/* 英字キッカーは data-en から。日本語の本文は一切足していない */
html body.t-bassai:not(#never) main h2[data-en]::before {
  content: attr(data-en);
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--t-mid);
  margin-bottom: 0.625rem;
}

html body.t-bassai:not(#never) main h2::after {
  content: '';
  display: block;
  inline-size: 3rem;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-accent);
  margin: 0.875rem auto 0;
}

html body.t-bassai:not(#never) main .container > .lede {
  text-align: center;
  max-width: 44em;
  margin-inline: auto;
  margin-top: 1.25rem;
  color: var(--c-muted);
  font-size: 1rem;
}

html body.t-bassai:not(#never) main .container > .note {
  max-width: 48em;
  margin-inline: auto;
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  border-inline-start: 3px solid var(--c-border);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 8px 8px 0;
}

html body.t-bassai:not(#never) .section--soft .container > .note {
  background: var(--t-ground);
}

/* --------------------------------------------------- 処分の4項目 (.rules) */

/* 1位の「選ばれる5つの理由」は 48px/900 の大きい見出しで数字を主張していた。
   ここでは連番タグを大きい数字として立てる */
html body.t-bassai:not(#never) .rules {
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  html body.t-bassai:not(#never) .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html body.t-bassai:not(#never) .rules__item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--t-radius);
  padding: 1.5rem 1.5rem 1.375rem;
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .rules__item::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--t-mid), #4ec190);
}

html body.t-bassai:not(#never) .rules__tag {
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--t-mid);
  margin-bottom: 0.625rem;
}

html body.t-bassai:not(#never) .rules dt {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--t-deep);
  line-height: 1.6;
  margin-bottom: 0.625rem;
}

html body.t-bassai:not(#never) .rules dd {
  color: var(--c-muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------- 無料の範囲 (.cols) */

html body.t-bassai:not(#never) .cols {
  gap: 1.25rem;
  margin-top: 2.5rem;
}

html body.t-bassai:not(#never) .cols__item {
  background: var(--t-ground);
  border: 1px solid var(--c-border);
  border-radius: var(--t-radius);
  padding: 1.5rem 1.375rem;
  text-align: center;
}

/* 1位は「無料」を実績数より前に出していた。チェック印で無料の3点を目に入れる */
html body.t-bassai:not(#never) .cols__item::before {
  content: '';
  display: block;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin: 0 auto 0.875rem;
  border-radius: 50%;
  background: var(--t-mid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

html body.t-bassai:not(#never) .cols__item b {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--t-deep);
  margin-bottom: 0.5rem;
}

html body.t-bassai:not(#never) .cols__item p {
  color: var(--c-muted);
  font-size: 0.9375rem;
  text-align: start;
}

/* ------------------------------------------------ 対応している作業 (.works) */

html body.t-bassai:not(#never) .works {
  gap: 1.25rem;
  margin-top: 2.5rem;
}

html body.t-bassai:not(#never) .works__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--t-radius);
  /* 上の padding は 0。イメージ写真をカードの上端いっぱいに出すため */
  padding: 0 1.5rem 1.375rem;
  overflow: hidden;
  box-shadow: var(--t-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* 写真を左右の padding のぶんだけ外に張り出させて、カード幅いっぱいに使う。
   角は .works__item の overflow: hidden が切る */
html body.t-bassai:not(#never) .works__fig {
  margin: 0 -1.5rem 1.25rem;
  border-radius: 0;
}

html body.t-bassai:not(#never) .works__fig img {
  aspect-ratio: 5 / 3;
}

html body.t-bassai:not(#never) .works__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--t-shadow-lift);
}

html body.t-bassai:not(#never) .works__item h3 {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--t-deep);
  margin-bottom: 0.75rem;
}

html body.t-bassai:not(#never) .works__item h3 a {
  color: inherit;
  text-decoration: none;
}

html body.t-bassai:not(#never) .works__item h3 a:hover {
  text-decoration: underline;
}

html body.t-bassai:not(#never) .works__item p {
  color: var(--c-muted);
  font-size: 0.9375rem;
  flex: 1;
}

/* 金額のチップ。1位が価格を大きく主張していた位置 */
html body.t-bassai:not(#never) .works__from {
  align-self: flex-start;
  margin-top: 1.125rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--t-ground-2);
  color: var(--t-deep);
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 900;
}

/* --------------------------------------------------------- 流れ (.flow) */

html body.t-bassai:not(#never) .flow {
  gap: 0.875rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-top: 2.5rem;
}

html body.t-bassai:not(#never) .flow__step {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--t-radius);
  padding: 1.375rem 1.5rem 1.375rem 4.5rem;
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .flow__step::before {
  inset-inline-start: 1.375rem;
  inset-block-start: 1.375rem;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--t-deep);
  color: var(--t-gold);
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

html body.t-bassai:not(#never) .flow__step h3 {
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--t-deep);
  margin-bottom: 0.375rem;
}

html body.t-bassai:not(#never) .flow__step p {
  color: var(--c-muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------ 対応エリア (.areas) */

/* 1位のエリアは白地・1px枠・角丸4pxのチップだった */
html body.t-bassai:not(#never) .areas {
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

html body.t-bassai:not(#never) .areas li {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.625rem 1.125rem;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--t-deep);
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .section--soft .areas li,
html body.t-bassai:not(#never) .section--soft .rules__item,
html body.t-bassai:not(#never) .section--soft .faq__item,
html body.t-bassai:not(#never) .section--soft .works__item,
html body.t-bassai:not(#never) .section--soft .flow__step,
html body.t-bassai:not(#never) .section--soft .pricetable {
  background: var(--t-ground);
}

html body.t-bassai:not(#never) .section--soft .dg__opt {
  background: #fff;
}

html body.t-bassai:not(#never) .areas li a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------- 料金表 (.pricetable) */

html body.t-bassai:not(#never) .pricetable {
  margin: 2rem 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--t-radius);
  padding: 1.375rem 1.375rem 1.125rem;
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .pricetable caption {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--t-deep);
  padding-bottom: 0.875rem;
}

html body.t-bassai:not(#never) .pricetable table {
  font-size: 0.9375rem;
}

html body.t-bassai:not(#never) .pricetable thead th {
  background: var(--t-deep);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  border-color: var(--t-deep);
}

html body.t-bassai:not(#never) .pricetable th,
html body.t-bassai:not(#never) .pricetable td {
  border-color: var(--c-border);
  padding: 0.75rem 0.875rem;
}

html body.t-bassai:not(#never) .pricetable tbody tr:nth-child(even) th,
html body.t-bassai:not(#never) .pricetable tbody tr:nth-child(even) td {
  background: #f6fbf6;
}

html body.t-bassai:not(#never) .pricetable tbody th {
  font-weight: 700;
  color: var(--t-deep);
}

/* 金額は等幅数字で、桁がそろって見えるようにする */
html body.t-bassai:not(#never) .pricetable tbody td:first-of-type {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.0625rem;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html body.t-bassai:not(#never) .pricetable__tbd {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--c-muted);
}

html body.t-bassai:not(#never) .pricetable__unit {
  color: var(--c-muted);
}

/* ------------------------------------------------------------ 診断CTA (.dg) */

/* 1位は本文の合間に角丸20px・影つきのCTAカードを3回挟んでいた。
   当サイトではこの診断ブロックがその役をする（新しい文言は足していない） */
html body.t-bassai:not(#never) .dg {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: var(--t-shadow-lift);
  padding: 0;
  overflow: hidden;
  margin: 0;
}

html body.t-bassai:not(#never) .s-shindan {
  padding-block: 0 var(--t-pad-section);
}

/* ヒーローの上に半分せり出させて、診断を最初の目的地にする */
html body.t-bassai:not(#never) .s-shindan .dg {
  margin-top: clamp(-3.5rem, -6vw, -2rem);
  position: relative;
  z-index: 2;
}

html body.t-bassai:not(#never) .dg__title {
  background: linear-gradient(160deg, var(--t-deep-2), var(--t-deep));
  color: #fff;
  font-size: clamp(1.1875rem, 3.4vw, 1.5rem);
  font-weight: 900;
  text-align: start;
  margin: 0;
  padding: 1.375rem 1.5rem 1.25rem;
}

html body.t-bassai:not(#never) .dg__title::before {
  content: 'FREE ESTIMATE';
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--t-gold);
  margin-bottom: 0.5rem;
}

html body.t-bassai:not(#never) .dg__title::after {
  display: none;
}

html body.t-bassai:not(#never) .dg__lead {
  margin: 0;
  padding: 1.25rem 1.5rem 0;
  color: var(--c-muted);
}

html body.t-bassai:not(#never) .dg__form {
  padding: 1.25rem 1.5rem 0;
  gap: 1.5rem;
}

html body.t-bassai:not(#never) .dg__legend {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  color: var(--t-deep);
  font-size: 1.0625rem;
}

html body.t-bassai:not(#never) .dg__num {
  background: var(--c-accent);
  font-weight: 900;
  inline-size: 1.625rem;
  block-size: 1.625rem;
}

html body.t-bassai:not(#never) .dg__opt {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 0.8125rem 0.9375rem;
  min-block-size: 48px;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

html body.t-bassai:not(#never) .dg__opt:hover {
  border-color: var(--t-mid);
  background: #f6fbf6;
}

html body.t-bassai:not(#never) .dg__opt:has(input:checked) {
  border-color: var(--t-mid);
  background: var(--t-ground);
  box-shadow: inset 0 0 0 1.5px var(--t-mid);
}

html body.t-bassai:not(#never) .dg__opt-label {
  font-weight: 700;
  color: var(--t-deep);
}

html body.t-bassai:not(#never) .dg__result {
  margin: 1.5rem 0 0;
  padding: 1.375rem 1.5rem;
  border-top: 0;
  background: linear-gradient(160deg, var(--t-deep-2), var(--t-deep));
}

html body.t-bassai:not(#never) .dg__wait {
  color: #cfe6d6; /* 濃緑上 7.2:1 */
  margin-bottom: 1rem;
}

/* 濃い面に黄色い数字。1位が電話番号でやっていた見せ方をここに移した */
html body.t-bassai:not(#never) .dg__amount {
  color: var(--t-gold);
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
}

html body.t-bassai:not(#never) .dg__amount[data-dg-quote-only='true'] {
  color: #eef7f0;
}

html body.t-bassai:not(#never) .dg__disclaimer {
  margin: 0;
  padding: 1.125rem 1.5rem 1.375rem;
  background: #f6fbf6;
  color: var(--c-muted);
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------- FAQ (.faq) */

/* 1位のFAQは白カードを積み上げ、上下端だけ角丸にして1つの帯に見せていた */
html body.t-bassai:not(#never) .faq {
  margin: 2.5rem auto 0;
  max-width: 52rem;
  border-radius: var(--t-radius);
  overflow: hidden;
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .faq__item {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  padding: 1.375rem 1.5rem;
}

html body.t-bassai:not(#never) .faq__item:first-child {
  border-top: 0;
}

html body.t-bassai:not(#never) .faq__item:last-child {
  border-bottom: 0;
}

html body.t-bassai:not(#never) .faq dt {
  display: flex;
  gap: 0.625rem;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  color: var(--t-deep);
  font-size: 1.0625rem;
  line-height: 1.6;
}

html body.t-bassai:not(#never) .faq dt::before {
  content: 'Q';
  flex: none;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--t-mid);
  color: #fff;
  font-size: 0.875rem;
}

html body.t-bassai:not(#never) .faq dd {
  display: flex;
  gap: 0.625rem;
  color: var(--c-muted);
  font-size: 0.9375rem;
}

html body.t-bassai:not(#never) .faq dd::before {
  content: 'A';
  flex: none;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--t-ground-2);
  color: var(--t-deep);
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
}

/* --------------------------------------------------- イメージ写真 (.fig) */

/* public/img/ の写真はすべてストック写真で、自社の施工写真ではない。
   施工事例に見えないよう、必ず figcaption で「イメージ写真」と断る。
   詳細は public/img/CREDITS.md。 */

/* 写真の実サイズ（横900px）より広い枠に置くと拡大されてぼやける。
   1440px でコンテナは 1068px あるので、本文と同じ幅に絞って等倍で見せる */
html body.t-bassai:not(#never) .fig {
  max-width: 900px;
  margin-top: 2rem;
  margin-inline: auto;
}

html body.t-bassai:not(#never) .fig img {
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .fig figcaption {
  max-width: 48em;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-muted);
}

/* 濃緑の帯の中。ミント寄りの明色にして 濃緑上 8.0:1 を確保する */
html body.t-bassai:not(#never) .s-dark .fig figcaption {
  color: #dbeee0;
}

/* ヒーロー直下の但し書き。写真を見た直後に目に入る位置に置く */
html body.t-bassai:not(#never) .imgnote {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-muted);
}

/* ------------------------------------------- 施工写真がまだ無いことの枠 */

html body.t-bassai:not(#never) .pending {
  max-width: 48rem;
  margin: 2.5rem auto 0;
  border: 2px dashed var(--c-border);
  border-radius: var(--t-radius);
  background: rgba(255, 255, 255, 0.55);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

/* ------------------------------------------------------ 末尾の帯 (.band) */

html body.t-bassai:not(#never) .band {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(100% 130% at 85% 0%, rgba(78, 193, 144, 0.26), transparent 60%),
    linear-gradient(150deg, #1c5c39, #14472c 60%, #0f3722);
  padding-block: clamp(2.75rem, 6vw, 4rem);
  text-align: center;
}

html body.t-bassai:not(#never) .band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    -50deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 18px
  );
}

html body.t-bassai:not(#never) .band h2 {
  color: #fff;
}

html body.t-bassai:not(#never) main .band h2[data-en]::before {
  color: var(--t-gold);
}

html body.t-bassai:not(#never) main .band h2::after {
  background: var(--t-gold);
}

html body.t-bassai:not(#never) .band p {
  color: #d5ebdb;
  max-width: 40em;
  margin-inline: auto;
}

html body.t-bassai:not(#never) .band__actions {
  justify-content: center;
  margin-top: 2rem;
}

html body.t-bassai:not(#never) .band .btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

html body.t-bassai:not(#never) .band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------- フッター */

html body.t-bassai:not(#never) .site-footer {
  margin-top: 0;
  background: var(--t-deep);
  padding-block: 3rem 2.5rem;
}

html body.t-bassai:not(#never) .site-footer__brand {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}

html body.t-bassai:not(#never) .site-footer__nav {
  padding-block: 1.25rem;
  border-block: 1px solid rgba(255, 255, 255, 0.16);
  gap: 0.75rem 1.5rem;
}

html body.t-bassai:not(#never) .site-footer__nav a {
  color: #d9f0dc; /* 濃緑上 8.87:1 */
  text-decoration: none;
}

html body.t-bassai:not(#never) .site-footer__nav a:hover {
  text-decoration: underline;
}

html body.t-bassai:not(#never) .site-footer__tel a {
  color: var(--t-gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- スマホ追従CTA (.cta-bar) */

/* 1位の追従バーは色地・高さ60px・押せる面を横いっぱいに割る作り。
   高さは56px以上にしてタップ面（WCAG 2.2 SC 2.5.8 の44px）を確保する */
html body.t-bassai:not(#never) .cta-bar {
  border-top: 0;
  background: var(--t-deep);
  box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, 0.5);
  padding: 0.375rem;
  gap: 0.375rem;
}

html body.t-bassai:not(#never) .cta-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-block-size: 56px;
  padding: 0.5rem;
  border-radius: 8px;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.9375rem;
  line-height: 1.3;
}

html body.t-bassai:not(#never) .cta-bar__item--tel {
  background: #fff;
  color: var(--t-deep);
}

/* LINEの緑(#06C755)に白文字だと2.26:1でAA不足。濃色の文字にして6.58:1にする */
html body.t-bassai:not(#never) .cta-bar__item--line {
  background: var(--t-line);
  color: #1f2a22;
}

html body.t-bassai:not(#never) .cta-bar__item--form {
  background: var(--c-accent);
  color: #fff;
}

/* ------------------------------------------------ 他ページで使う共通部品 */

html body.t-bassai:not(#never) .breadcrumb {
  padding-block: 1rem 0;
}

html body.t-bassai:not(#never) .breadcrumb a {
  color: var(--c-muted);
}

html body.t-bassai:not(#never) .cards {
  gap: 1.25rem;
  margin-top: 1.5rem;
}

html body.t-bassai:not(#never) .card {
  border: 1px solid var(--c-border);
  border-radius: var(--t-radius);
  padding: 1.375rem;
  box-shadow: var(--t-shadow);
}

html body.t-bassai:not(#never) .card a {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  color: var(--t-deep);
}

html body.t-bassai:not(#never) main h3 {
  color: var(--t-deep);
}

/* 下層ページは h2 が本文の途中に何度も出るので、中央揃えを解除して左に戻す */
html body.t-bassai:not(#never) main .container > h2 {
  text-align: start;
}

html body.t-bassai:not(#never) main .container > h2::after {
  margin-inline: 0;
}

html body.t-bassai:not(#never) main .container > h2[data-en] {
  text-align: center;
}

html body.t-bassai:not(#never) main .container > h2[data-en]::after {
  margin-inline: auto;
}

/* ------------------------------------------------------------- 動きの抑制 */

@media (prefers-reduced-motion: reduce) {
  html body.t-bassai:not(#never) * {
    transition: none !important;
    animation: none !important;
  }
}

/* -------------------------------------------------------------- 狭い画面 */

@media (max-width: 640px) {
  html body.t-bassai:not(#never) .site-header__inner {
    padding-block: 0.625rem;
  }

  html body.t-bassai:not(#never) .site-header__brand {
    font-size: 1.0625rem;
  }

  html body.t-bassai:not(#never) .site-header__nav {
    gap: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-border);
    margin-top: 0.5rem;
  }

  html body.t-bassai:not(#never) .site-header__nav a {
    font-size: 0.8125rem;
  }

  html body.t-bassai:not(#never) .rules__item,
  html body.t-bassai:not(#never) .cols__item {
    padding: 1.25rem 1.125rem;
  }

  /* works だけ上の padding を持たない（イメージ写真をカード上端に出すため）。
     写真の張り出し量も、この幅の padding に合わせる */
  html body.t-bassai:not(#never) .works__item {
    padding: 0 1.125rem 1.25rem;
  }

  html body.t-bassai:not(#never) .works__fig {
    margin-inline: -1.125rem;
  }

  html body.t-bassai:not(#never) .dg__title,
  html body.t-bassai:not(#never) .dg__lead,
  html body.t-bassai:not(#never) .dg__form,
  html body.t-bassai:not(#never) .dg__result,
  html body.t-bassai:not(#never) .dg__disclaimer {
    padding-inline: 1.125rem;
  }

  html body.t-bassai:not(#never) .flow__step {
    padding: 1.25rem 1.125rem 1.25rem 3.75rem;
  }

  html body.t-bassai:not(#never) .flow__step::before {
    inset-inline-start: 1rem;
  }

  html body.t-bassai:not(#never) .pricetable {
    padding: 1.125rem 1rem 0.875rem;
  }

  html body.t-bassai:not(#never) .faq__item {
    padding: 1.125rem 1.125rem;
  }
}