@charset "utf-8";
/* =====================================================================
 * 川口お庭・外構工事 サイト固有テーマ
 *
 * 型の出どころ:
 *   主参考 = https://www.top-tecno.co.jp/
 *     （検索語「東京 外構工事」でポータル／一括見積サイトを除いた1位の業者サイト。
 *       実測は tools/serp_design/gaikou.md）
 *   補助参考 = あすなろ外構工事店 / ザ・シーズン / SOTORIE
 *
 * 主参考から採ったのは「型」だけで、画像・文章・ロゴ・イラスト・コードは一切使わない。
 *   1. 白 ⇔ 温かいベージュの帯を交互に敷く（実測 #f1f1ea / SOTORIE #f2ebe0）
 *   2. セクション見出しは中央寄せ・太字・字間を開ける。上に短い罫、下に小さな英字
 *   3. 本文は幅の狭い中央カラムに収める（1行が長くならない）
 *   4. 主CTAは塗りつぶし・角丸ごく小。副CTAは角丸ゼロの1px枠＋矢印
 *   5. セクション間の余白を大きく取る
 *   6. 締めはほぼ黒のフッター（実測 #0a0000）
 *
 * 配色は主参考の青（#337ab7）をそのまま使わない。姉妹サイトが
 * 伐採=深緑／草刈り=黄緑〜橙／葛飾ハウスクリーニング=青 で埋まっているため、
 * 外構は「チャコール＋銅（テラコッタ）＋砂ベージュ」に置き換える。
 * 帯・見出し・余白・ボタン形状という骨格の側で主参考に寄せている。
 *
 * 写真はイメージ写真だけを使う（自社撮影の施工写真はまだ無い）。出典は
 * public/img/CREDITS.md。施工事例・実績・ビフォーアフターには絶対に流用しない。
 * ファーストビューは、写真が無いとき用のCSSグラデーション＋目地パターンをそのまま
 * 暗幕として残し、その下に写真を敷く（.hero--photo）。写真が差し替わっても
 * 白文字のコントラストが崩れないように、暗幕の濃さの側で担保する。
 *
 * コントラスト実測（ud-check・WCAG 2.2 AA / 1.4.3）:
 *   #2f3539 on #ffffff 12.43:1 ／ #2f3539 on #f2ede4 10.66:1
 *   #9c5424 on #ffffff  5.66:1 ／ #9c5424 on #f2ede4  4.86:1
 *   #ffffff on #9c5424   5.66:1 ／ #ffffff on #2f3539 12.43:1
 *   #5b6165 on #ffffff   6.28:1 ／ #5b6165 on #f2ede4  5.39:1（既定の #6b7280 は
 *                                   ベージュ上で 4.15:1 と不足するため差し替える）
 *   #ffffff on #05803a   5.05:1（LINE緑 #06c755 は白文字で 2.26:1 と不足）
 *   #e0b98f on #2f3539   6.81:1 ／ #f3f4f6 on #1b1f22 15.08:1
 *
 * 上書きの書き方: 共通コンポーネントの scoped CSS は `.hero[data-astro-cid-…]`
 * ＝(0,2,0) の特異性を持つ。`html .hero` は (0,1,1) で負けるので、
 * このファイルではクラスを2度書いた `html .hero.hero` = (0,2,1) を使う。
 * ===================================================================== */

/* Astro は global.css を束ねた <link> をテーマCSSより後ろに置く。素の :root だと
   同特異性で後勝ちされて global.css の値に戻るので、html を1段足して勝たせる。
   --c-primary / --c-accent は site.config.ts の theme から Base.astro が入れるので
   ここでは定義しない */
html:root {
  --c-text: #22282b;
  --c-muted: #5b6165;
  --c-border: #e2dbcf;
  --c-bg: #ffffff;
  --c-bg-soft: #f2ede4;
  --c-footer-bg: #1b1f22;
  --c-footer-fg: #f3f4f6;
  --c-footer-muted: #a9b0b6;
  --w-container: 1120px;

  /* テーマ固有 */
  --c-ink: #2f3539;
  --c-ink-deep: #1b1f22;
  --c-accent-dark: #8a4a1f;
  --c-accent-soft: #e0b98f;
  --c-sand: #f2ede4;
  --c-sand-deep: #e7e0d3;
  --c-line: #05803a;
  --f-latin: Lato, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, system-ui,
    sans-serif;
  --w-text: 44em;
  --pad-section: clamp(3.25rem, 7.5vw, 5.75rem);
}

/* ------------------------------------------------------------ 土台 */

html body {
  font-family: var(--f-latin);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.9;
  letter-spacing: 0.015em;
  /* 追従CTAを 56px + セーフエリアに広げたぶん、本文の逃げも広げる */
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  html body {
    padding-bottom: 0;
  }
}

html a {
  color: var(--c-accent-dark);
}

html .container {
  max-width: var(--w-container);
  padding-inline: clamp(1rem, 4vw, 2rem);
}

html .section {
  padding-block: var(--pad-section);
}

html .section--soft {
  background: var(--c-bg-soft);
}

/* 帯が続くときだけ、境目に髪の毛一本ぶんの線を入れる */
html .section--soft + .section--soft {
  padding-top: 0;
}

/* ------------------------------------------------- 見出し（主参考の型） */

/* 下層ページのタイトル。ヒーローの h1（.hero__title）には罫を敷かない */
html main h1:not(.hero__title) {
  font-size: clamp(1.5rem, 4.2vw, 2.125rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.55;
  margin-block: 1.25rem 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

html main h2 {
  position: relative;
  text-align: center;
  font-size: clamp(1.3125rem, 2.7vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin: 0 0 1.875rem;
  padding-top: 2.5rem;
  color: var(--c-ink);
}

html main h2::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 36px;
  block-size: 2px;
  background: var(--c-accent);
}

/* 英字キャプションは index.astro が data-en で渡した見出しにだけ出る */
html main h2[data-en]::after {
  content: attr(data-en);
  display: block;
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--c-muted);
  line-height: 1;
}

html main h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

/* 本文は狭い中央カラムに収める（主参考と同じ読み幅） */
html main .container > p,
html main .outline > p {
  max-width: var(--w-text);
  margin-inline: auto;
}

html .lede.lede {
  max-width: var(--w-text);
  margin-inline: auto;
  margin-block: 0 1.75rem;
  color: var(--c-muted);
  text-align: center;
}

html .note.note {
  max-width: var(--w-text);
  margin-inline: auto;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--c-muted);
  border-inline-start: 3px solid var(--c-sand-deep);
  padding-inline-start: 1rem;
}

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

html .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 指で押す面。44px は WCAG 2.2 SC 2.5.8 の最小、余裕を見て 52px */
  min-block-size: 52px;
  padding: 0.875rem 2rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

html .btn:hover {
  filter: none;
  transform: translateY(-1px);
}

html .btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 2px 0 rgba(27, 31, 34, 0.16);
}

html .btn--primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
}

html .btn--primary::after {
  content: '→';
  font-weight: 400;
}

/* 副CTAは主参考の「一覧ページへ」と同じ、角丸ゼロの1px枠＋矢印 */
html .btn--ghost {
  border-radius: 0;
  border-width: 1px;
  border-color: currentColor;
  background: transparent;
  font-weight: 700;
}

html .btn--ghost::after {
  content: '→';
  font-weight: 400;
}

html .btn:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

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

html .site-header.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--c-border);
}

html .site-header.site-header .site-header__inner {
  max-width: var(--w-container);
  padding: 0.625rem clamp(1rem, 4vw, 2rem);
  gap: 1rem 1.75rem;
}

html .site-header.site-header .site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
}

/* ブランド名の前に、外構の平面図に見立てた小さな四角のマーク */
html .site-header.site-header .site-header__brand::before {
  content: '';
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  border: 2px solid var(--c-accent);
  border-radius: 2px;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) no-repeat 0 0 / 100% 6px,
    linear-gradient(var(--c-accent), var(--c-accent)) no-repeat 0 100% / 6px 100%;
}

html .site-header.site-header .site-header__nav {
  gap: 0.25rem 1.375rem;
  align-items: center;
}

html .site-header.site-header .site-header__nav a {
  color: var(--c-ink);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-block: 0.375rem;
}

html .site-header.site-header .site-header__nav a:hover {
  text-decoration: none;
  color: var(--c-accent-dark);
}

/* 主参考はヘッダー右端に問い合わせボタンを置いている。同じ位置に同じ役割で */
html .site-header.site-header .site-header__nav a[href='/contact/'] {
  background: var(--c-accent);
  color: #fff;
  border-radius: 3px;
  padding: 0.625rem 1.125rem;
  font-weight: 700;
}

html .site-header.site-header .site-header__nav a[href='/contact/']:hover {
  background: var(--c-accent-dark);
  color: #fff;
}

@media (max-width: 640px) {
  html .site-header.site-header .site-header__nav {
    gap: 0.25rem 1rem;
    font-size: 0.8125rem;
  }
  html .site-header.site-header .site-header__nav a[href='/contact/'] {
    padding: 0.5rem 0.875rem;
  }
}

/* ------------------------------------------------------ ファーストビュー */

html .hero.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  color: #fff;
  padding-block: clamp(3.5rem, 11vw, 6.5rem);
  background:
    radial-gradient(115% 85% at 82% 8%, rgba(156, 84, 36, 0.4) 0%, rgba(156, 84, 36, 0) 60%),
    linear-gradient(158deg, #3a4247 0%, #2f3539 44%, #1b1f22 100%);
}

/* 敷石の目地に見立てたグリッド。写真の代わりに面を作るためだけのもの */
html .hero.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 92px);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0) 68%);
  mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0) 68%);
}

html .hero.hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-soft) 42%, transparent 100%);
}

html .hero.hero .hero__inner {
  max-width: var(--w-container);
}

html .hero.hero .hero__title {
  max-width: 19em;
  font-size: clamp(1.625rem, 5.1vw, 2.625rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

html .hero.hero .hero__lead {
  max-width: 36em;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

html .hero.hero .hero__actions {
  margin-top: 2.25rem;
  gap: 0.875rem;
}

html .hero.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

html .hero.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

html .hero.hero .hero__note {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 480px) {
  html .hero.hero .hero__actions .btn {
    inline-size: 100%;
  }
}

/* 写真を入れたとき。暗幕は「写真が真っ白でも白文字が AA を満たす」濃さにしてある
   （最悪ケースの実効背景 #4a4f52 相当 ≒ 白文字 8.0:1／実測は tools/serp_design/gaikou.md）。
   目地パターン（::before）と裾の銅色の罫（::after）はそのまま重ねる */
html .hero.hero--photo {
  background:
    radial-gradient(115% 85% at 82% 8%, rgba(156, 84, 36, 0.32) 0%, rgba(156, 84, 36, 0) 62%),
    linear-gradient(158deg, rgba(47, 53, 57, 0.82) 0%, rgba(35, 40, 44, 0.8) 44%, rgba(20, 23, 26, 0.88) 100%),
    var(--hero-image) center / cover no-repeat;
  background-color: #2f3539;
}

/* 写真の上なので、影を一段強くして小さい文字も浮かせる */
html .hero.hero--photo .hero__title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

html .hero.hero--photo .hero__lead,
html .hero.hero--photo .hero__note {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------- イメージ写真であることの断り */

/* ヒーロー直下の帯。写真が実績ではないことを、スクロールする前に言う */
html .imgbar.imgbar {
  background: var(--c-sand);
  border-bottom: 1px solid var(--c-border);
  padding-block: 0.75rem;
}

html .imgbar.imgbar p {
  max-width: none;
  margin-inline: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--c-muted);
}

/* 本文中のイメージ写真。読み幅に合わせ、下に出典の断りを置く */
html .shot.shot {
  max-width: var(--w-text);
  margin: 2rem auto 2.25rem;
}

html .shot.shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--c-border);
}

html .shot.shot figcaption {
  margin-top: 0.75rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 3px solid var(--c-sand-deep);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--c-muted);
}

/* ---------------------------------------------------- 迷いやすいこと4項目 */

html .rules.rules {
  gap: 1.25rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

html .rules.rules .rules__item {
  background: var(--c-bg);
  border: 0;
  border-top: 3px solid var(--c-ink);
  border-radius: 0;
  padding: 1.5rem 1.375rem 1.625rem;
  box-shadow: 0 1px 3px rgba(27, 31, 34, 0.07);
}

html .rules.rules .rules__tag {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-accent);
  margin-bottom: 0.75rem;
}

html .rules.rules dt {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--c-ink);
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--c-border);
}

html .rules.rules dd {
  color: var(--c-muted);
  font-size: 0.9375rem;
  line-height: 1.9;
}

/* --------------------------------------------------------- 対応する工事 */

html .works.works {
  gap: 1.25rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

html .works.works .works__item {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0;
  padding: 1.5rem 1.375rem 1.625rem;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}

html .works.works .works__item:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

html .works.works .works__fig {
  position: relative;
  margin: -1.5rem -1.375rem 1.25rem;
}

html .works.works .works__fig img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
}

/* 「イメージ」の札。白文字が写真に負けないよう、下地は不透明に近くしてある */
html .works.works .works__fig figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0.25rem 0.625rem;
  background: rgba(27, 31, 34, 0.88);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

html .works.works .works__item h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border);
}

html .works.works .works__item h3 a {
  color: var(--c-ink);
  text-decoration: none;
}

html .works.works .works__item h3 a:hover {
  color: var(--c-accent-dark);
  text-decoration: underline;
}

html .works.works .works__item p {
  color: var(--c-muted);
  font-size: 0.9375rem;
}

html .works.works .works__from {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  background: var(--c-sand);
  color: var(--c-accent-dark);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- 流れ */

html .flow.flow {
  gap: 0;
  margin-top: 2rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-width: 46em;
  margin-inline: auto;
}

html .flow.flow .flow__step {
  background: transparent;
  padding: 0 0 1.75rem 3.75rem;
  border-inline-start: 2px solid var(--c-sand-deep);
  margin-inline-start: 1rem;
}

html .flow.flow .flow__step:last-child {
  border-inline-start-color: transparent;
  padding-bottom: 0;
}

html .flow.flow .flow__step::before {
  inset-inline-start: -1.0625rem;
  inset-block-start: 0;
  inline-size: 2rem;
  block-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

html .flow.flow .flow__step h3 {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  line-height: 2rem;
}

html .flow.flow .flow__step p {
  color: var(--c-muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------ 施工写真の空き枠 */

html .pending.pending {
  max-width: var(--w-text);
  margin-inline: auto;
  border: 1px dashed #b9ae9b;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  padding: 1.5rem;
  color: var(--c-muted);
}

/* ------------------------------------------------------------- 料金表 */

html .pricetable.pricetable {
  margin-block: 2rem;
}

html .pricetable.pricetable caption {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-ink);
  padding: 0 0 0.75rem 0.75rem;
  border-inline-start: 4px solid var(--c-accent);
  margin-bottom: 0.25rem;
}

html .pricetable.pricetable .pricetable__unit {
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

html .pricetable.pricetable table {
  font-size: 0.9375rem;
  border: 1px solid var(--c-border);
}

html .pricetable.pricetable thead th {
  background: var(--c-ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  border-color: var(--c-ink);
}

html .pricetable.pricetable th,
html .pricetable.pricetable td {
  border-color: var(--c-border);
  padding: 0.875rem 1rem;
  line-height: 1.75;
}

html .pricetable.pricetable tbody tr:nth-child(odd) th,
html .pricetable.pricetable tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.72);
}

html .pricetable.pricetable tbody tr:nth-child(even) th,
html .pricetable.pricetable tbody tr:nth-child(even) td {
  background: rgba(242, 237, 228, 0.55);
}

html .pricetable.pricetable tbody th {
  font-weight: 500;
  color: var(--c-text);
}

/* 金額の桁を縦にそろえる */
html .pricetable.pricetable tbody td:first-of-type {
  font-weight: 700;
  color: var(--c-accent-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html .pricetable.pricetable .pricetable__tbd {
  color: var(--c-muted);
  font-weight: 500;
}

/* --------------------------------------------------------- 診断CTA */

html .dg.dg {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-ink);
  border-radius: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.125rem, 3.5vw, 2rem) 2rem;
  margin-block: 0;
  box-shadow: 0 2px 14px rgba(27, 31, 34, 0.06);
}

html .section--soft .dg.dg {
  background: var(--c-bg);
}

html .dg.dg .dg__title {
  text-align: left;
  padding-top: 0;
  margin: 0 0 0.625rem;
  font-size: clamp(1.1875rem, 2.4vw, 1.4375rem);
  letter-spacing: 0.05em;
}

html .dg.dg .dg__title::before {
  content: none;
}

html .dg.dg .dg__lead {
  color: var(--c-muted);
  max-width: none;
  text-align: left;
  margin-bottom: 1.75rem;
}

html .dg.dg .dg__q {
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 1.25rem;
}

html .dg.dg .dg__q:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

html .dg.dg .dg__legend {
  color: var(--c-ink);
  letter-spacing: 0.03em;
}

html .dg.dg .dg__num {
  background: var(--c-accent);
  border-radius: 2px;
  font-weight: 700;
}

html .dg.dg .dg__opt {
  background: var(--c-sand);
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.8125rem 0.9375rem;
  min-block-size: 48px;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

html .dg.dg .dg__opt:hover {
  border-color: var(--c-accent);
  background: #fff;
}

html .dg.dg .dg__opt:has(input:checked) {
  background: #fff;
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}

html .dg.dg .dg__opt input {
  accent-color: var(--c-accent);
}

html .dg.dg .dg__result {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border-top: 0;
  background: var(--c-ink);
  border-radius: 2px;
}

html .dg.dg .dg__wait {
  color: rgba(255, 255, 255, 0.82);
}

html .dg.dg .dg__amount {
  color: var(--c-accent-soft);
  letter-spacing: 0.02em;
}

html .dg.dg .dg__disclaimer {
  color: var(--c-muted);
  border-inline-start: 3px solid var(--c-sand-deep);
  padding-inline-start: 0.875rem;
}

/* ---------------------------------------------------------- 対応エリア */

html .areas.areas {
  gap: 0.625rem;
  justify-content: center;
  margin-top: 1.75rem;
}

html .areas.areas li {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  color: var(--c-ink);
}

html .areas.areas li a {
  color: var(--c-accent-dark);
  text-decoration: none;
}

/* ------------------------------------------------------------- FAQ */

html .faq.faq {
  max-width: 46em;
  margin-inline: auto;
}

html .faq.faq .faq__item {
  border-bottom: 1px solid var(--c-border);
  padding: 1.25rem 0;
}

html .faq.faq .faq__item:first-child {
  border-top: 1px solid var(--c-border);
}

html .faq.faq dt {
  display: flex;
  gap: 0.75rem;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}

html .faq.faq dt::before {
  content: 'Q';
  flex: none;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: #fff;
  font-size: 0.8125rem;
  border-radius: 2px;
}

html .faq.faq dd {
  display: flex;
  gap: 0.75rem;
  color: var(--c-muted);
  font-size: 0.9375rem;
}

html .faq.faq dd::before {
  content: 'A';
  flex: none;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-accent);
  color: var(--c-accent-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 2px;
}

/* ------------------------------------------------- サービスカード（下層） */

html .cards.cards .card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0;
  padding: 1.25rem;
}

html .cards.cards .card a {
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0.03em;
}

html .cards.cards .card a:hover {
  color: var(--c-accent-dark);
  text-decoration: underline;
}

/* ---------------------------------------------------------- パンくず */

html .breadcrumb.breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

html .breadcrumb.breadcrumb a {
  color: var(--c-muted);
}

/* ----------------------------------------------------------- 帯CTA */

html .band.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 88% 0%, rgba(156, 84, 36, 0.38) 0%, rgba(156, 84, 36, 0) 62%),
    linear-gradient(150deg, #3a4247 0%, #2f3539 48%, #1b1f22 100%);
  padding-block: clamp(3rem, 7vw, 4.75rem);
  color: #fff;
}

html .band.band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 92px);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0) 66%);
  mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0) 66%);
}

html .band.band h2 {
  color: #fff;
  text-align: center;
}

html .band.band h2::before {
  background: var(--c-accent-soft);
}

html .band.band h2[data-en]::after {
  color: rgba(255, 255, 255, 0.72);
}

html .band.band p {
  max-width: 40em;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.9);
}

html .band.band .band__actions {
  justify-content: center;
  margin-top: 2rem;
}

html .band.band .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

html .band.band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
  html .band.band .band__actions .btn {
    inline-size: 100%;
  }
}

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

html .site-footer.site-footer {
  margin-top: 0;
  background: var(--c-footer-bg);
  color: var(--c-footer-fg);
  padding-block: 3rem 2.5rem;
  border-top: 4px solid var(--c-accent);
}

html .site-footer.site-footer .site-footer__inner {
  max-width: var(--w-container);
  padding-inline: clamp(1rem, 4vw, 2rem);
  gap: 1.75rem;
}

html .site-footer.site-footer .site-footer__brand {
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
}

html .site-footer.site-footer .site-footer__nav {
  gap: 0.625rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

html .site-footer.site-footer .site-footer__nav a {
  color: var(--c-footer-fg);
  text-decoration: none;
  letter-spacing: 0.03em;
}

html .site-footer.site-footer .site-footer__nav a:hover {
  text-decoration: underline;
}

html .site-footer.site-footer .site-footer__siblings-title,
html .site-footer.site-footer .site-footer__copy {
  color: var(--c-footer-muted);
}

html .site-footer.site-footer .site-footer__siblings a {
  color: var(--c-footer-fg);
}

/* ------------------------------------------------------- 追従CTA（スマホ） */

html .cta-bar.cta-bar {
  border-top: 0;
  background: var(--c-ink-deep);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html .cta-bar.cta-bar .cta-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px（WCAG 2.2 SC 2.5.8）を満たす高さ。実寸は56px */
  min-block-size: 56px;
  padding: 0.5rem 0.375rem;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-align: center;
}

html .cta-bar.cta-bar .cta-bar__item--tel {
  background: var(--c-ink);
}

/* LINE緑 #06c755 は白文字で 2.26:1 と足りないので、AAを満たす濃さに落とす */
html .cta-bar.cta-bar .cta-bar__item--line {
  background: var(--c-line);
}

html .cta-bar.cta-bar .cta-bar__item--form {
  background: var(--c-accent);
}

/* ------------------------------------------------------- 動きを抑える設定 */

@media (prefers-reduced-motion: reduce) {
  html .btn,
  html .works.works .works__item {
    transition: none;
  }
  html .btn:hover,
  html .works.works .works__item:hover {
    transform: none;
  }
}

/* ==========================================================================
   下層ページ用の土台（2026-08-25 追記）

   .rules / .works / .flow / .pending / .band の見た目は上のブロックが持っているが、
   display:grid や counter といった土台の指定は index.astro の scoped CSS 側にあった。
   下層ページには index.astro の scoped CSS が読み込まれないので、土台だけここに置く。

   セレクタは `html .x`（クラス1・要素1）にしてあり、上のテーマ本体 `html .x.x`（クラス2）
   より弱い。トップでは index.astro の scoped CSS（クラス2相当）が勝つので、
   このブロックを足してもトップの見た目は変わらない。
   ========================================================================== */

html .rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
}
html .rules .rules__item {
  background: var(--c-bg);
}
html .rules .rules__tag {
  display: block;
}
html .rules dt {
  font-weight: 700;
}
html .rules dd {
  margin: 0;
}

html .works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
html .works .works__item h3 {
  margin: 0 0 0.5rem;
}
html .works .works__item p {
  margin: 0;
}
html .works .works__from {
  display: block;
  margin-top: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html .flow {
  display: grid;
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
html .flow .flow__step {
  counter-increment: step;
  position: relative;
}
html .flow .flow__step::before {
  content: counter(step);
  position: absolute;
  font-weight: 700;
}
html .flow .flow__step h3 {
  margin: 0 0 0.25rem;
}
html .flow .flow__step p {
  margin: 0;
}

html .pending {
  font-size: 0.9375rem;
  margin-top: 1.5rem;
}

/* 定義リスト型の本文（プライバシーポリシー・運営者情報）。
   theme 本体に対応する装飾ブロックが無いので、ここで完結させる */
html .facts {
  max-width: var(--w-text);
  margin: 1.75rem auto 0;
  border-block-start: 1px solid var(--c-border);
}
html .facts > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-block-end: 1px solid var(--c-border);
}
html .facts dt {
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.04em;
}
html .facts dd {
  margin: 0;
  color: var(--c-muted);
}
@media (min-width: 640px) {
  html .facts > div {
    grid-template-columns: 12rem 1fr;
  }
}

/* 本文中の箇条書き。中央カラムに合わせる */
html main .container > ul:not([class]),
html main .container > ol:not([class]) {
  max-width: var(--w-text);
  margin-inline: auto;
  padding-inline-start: 1.4em;
  color: var(--c-muted);
}
html main .container > ul:not([class]) li,
html main .container > ol:not([class]) li {
  margin-block: 0.375rem;
}

/* 375px幅で「180,000円」が表の横スクロール域からはみ出したため（2026-08-25 jp-wrap --live 実測）
   狭い画面では余白と文字を詰めて3列を収める */
@media (max-width: 480px) {
  html .pricetable.pricetable th,
  html .pricetable.pricetable td {
    padding: 0.625rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
  }
}