/* 庭じまい案内 スタイル（スマホ優先） */
:root {
  /* 基調色。庭じまいは緑。家じまいはサイト設定の「配色」で上書きする（オレンジ） */
  --main: #2f6b3a;
  --main-dark: #224f2b;
  --main-light: #eaf3ec;
  --brown: #6b4f2f;
  --ink: #222;
  --muted: #666;
  --line: #ddd;
  --bg: #fffdf8;
  --line-green: #06c755;
  --accent: #c67c2c;
  /* 姉妹サイトのバナーの色。相手サイト（墓じまい案内）の青に合わせて、庭の緑と見分けられるようにする */
  --sister: #1e6fae;
  --sister-dark: #145a8f;
  --sister-bg: #f2f8fd;
  --sister-line: #c9e2f2;
  --max: 960px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.8; font-size: 16px; }
a { color: var(--main-dark); }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.5rem; line-height: 1.4; margin: 16px 0 12px; }
h2 { font-size: 1.2rem; margin: 32px 0 12px; padding-left: 10px; border-left: 5px solid var(--main); }
h3 { font-size: 1.05rem; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
.lead { font-size: 1rem; color: #333; }
.note { color: var(--muted); font-size: .9rem; }
.more { text-align: right; }

/* ヘッダー（パソコン：題字＋横並びのリンク。スマホは末尾の「スマホのメニューと下の固定バー」の区画で右上の「メニュー」に変わる） */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.site-logo { font-weight: 700; font-size: 1.15rem; color: var(--main-dark); text-decoration: none; }
.site-nav { font-size: .9rem; }
.nav-pc { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.site-nav a { text-decoration: none; }
.site-nav__cta { background: var(--line-green); color: #fff !important; padding: 6px 12px; border-radius: 6px; font-weight: 700; }
.nav-toggle, .nav-sp, .bottom-bar { display: none; }   /* スマホだけ（末尾の区画） */

/* パンくず */
.breadcrumb ol { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .85rem; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin: 0 4px; }

/* ヒーロー */
.hero { padding: 24px 0 8px; }
.hero h1 { font-size: 1.6rem; }
.hero__lead { font-size: 1rem; }
.hero__stats { color: var(--muted); font-size: .9rem; }

/* CTA */
.cta { background: var(--main-light); border: 1px solid #cfe3d3; border-radius: 12px; padding: 20px 16px; margin: 24px 0; }
.cta__title { margin: 0 0 8px; border: 0; padding: 0; font-size: 1.15rem; color: var(--main-dark); }
.cta__lead { margin-bottom: 14px; }
.cta__buttons { display: flex; flex-direction: column; gap: 10px; }
.btn { display: inline-block; text-align: center; padding: 14px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.btn--line { background: var(--line-green); color: #fff; }
.btn--form { background: #fff; color: var(--main-dark); border-color: var(--main); }
.btn--sm { padding: 9px 12px; font-size: .9rem; border-radius: 6px; }
.cta__tel { margin: 14px 0 4px; font-weight: 700; }
.cta__tel a { font-size: 1.25rem; }
.cta__hours { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); }
.cta__note { font-size: .85rem; color: var(--muted); margin: 0; }

/* 一覧 */
.section { margin-top: 8px; }
.pref-list, .city-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.pref-list li a, .city-list li a { display: inline-block; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-size: .95rem; }
.region__name, .area__name { color: var(--brown); font-size: 1rem; margin-top: 16px; }
.quick-links { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quick-links a { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid var(--main); border-radius: 999px; text-decoration: none; font-size: .9rem; }
/* 相談先の一覧（家じまい：市区町村・政令市ページの上部に置く大きなボタン） */
.cat-nav { margin: 16px 0 4px; }
.cat-nav h2 { margin-bottom: 10px; }
/* ボタンは件数の有無にかかわらず同じ高さ（2行ぶん）にそろえる（2026-09-15 佐藤さんの指示「横がデコボコ」）。
   最小幅を 140px にして、パソコン幅では家じまいの6種類が1行に並ぶ */
.cat-nav__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cat-nav__list li { display: flex; }
.cat-nav__list a { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 68px; box-sizing: border-box; text-align: center; padding: 12px 8px; word-break: keep-all; background: var(--main); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.3; border-radius: 10px; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.cat-nav__list a:hover { background: var(--main-dark); }
.cat-nav__list a.is-current { background: var(--main-dark); box-shadow: inset 0 0 0 3px var(--main-light); }
.cat-nav__list a small { display: block; font-weight: 400; font-size: .8rem; opacity: .92; margin-top: 3px; }
/* 売却の取次先（宅建業者）の枠。不動産売却の相談ページ（家じまい案内 /{都道府県}/baikyaku/）だけで使う */
.torisugi { background: var(--main-light); border: 1px solid var(--line); border-left: 6px solid var(--main); border-radius: 10px; padding: 16px 18px; }
.torisugi h2 { margin-top: 0; }
.torisugi__name { font-size: 1.1rem; margin: 0 0 6px; }
.guide-links { padding-left: 1.2em; }
.guide-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide-cards a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-decoration: none; }
.guide-cards strong { display: block; margin-bottom: 4px; }
.guide-cards span { color: var(--muted); font-size: .9rem; }

/* カード */
.cards { display: grid; gap: 12px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.card--partner { border-color: var(--main); box-shadow: 0 0 0 2px var(--main-light); }
.card__name { margin: 0 0 8px; font-size: 1.05rem; }
.badge { display: inline-block; background: var(--main); color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.card__meta { margin: 0 0 10px; font-size: .9rem; }
.card__meta div { display: flex; gap: 8px; }
.card__meta dt { color: var(--muted); min-width: 4.5em; }
.card__meta dd { margin: 0; }
.card__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* 表 */
.table-wrap { overflow-x: auto; }
table.price { border-collapse: collapse; width: 100%; background: #fff; font-size: .92rem; }
table.price th, table.price td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
table.price th { background: var(--main-light); }
.price__range { white-space: nowrap; font-weight: 700; }
table.price caption { text-align: left; font-weight: 700; margin-bottom: 6px; }

/* 手順など */
.steps { padding-left: 1.4em; }
.steps li { margin-bottom: 6px; }
.cols3 { display: grid; gap: 12px; }
.col { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.col h3 { margin-top: 0; }
/* トップ「4つの選択肢」：押せるカード（家じまい） */
.choices { display: grid; gap: 12px; }
.choice { display: block; background: #fff; border: 2px solid var(--main); border-radius: 12px; padding: 16px 16px 14px; text-decoration: none; color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.choice:hover { background: var(--main-light); }
.choice h3 { margin: 0 0 8px; color: var(--main-dark); font-size: 1.15rem; }
.choice p { margin: 0; font-size: .95rem; }
.choice__more { display: inline-block; margin-top: 12px; padding: 8px 14px; background: var(--main); color: #fff; font-weight: 700; font-size: .9rem; border-radius: 999px; }
.choice:hover .choice__more { background: var(--main-dark); }
.info div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.info dt { min-width: 6em; color: var(--muted); }
.info dd { margin: 0; }
.guide__date { color: var(--muted); font-size: .85rem; }
.guide__body h2 { margin-top: 28px; }
.guide__body table { border-collapse: collapse; width: 100%; background: #fff; font-size: .92rem; }
.guide__body th, .guide__body td { border: 1px solid var(--line); padding: 8px 10px; }
.nav-back { margin: 24px 0; font-size: .9rem; }

/* フォーム */
.form { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.form__row { margin-bottom: 14px; }
.form__row label { display: block; font-weight: 700; margin-bottom: 4px; }
.form__row fieldset label { display: block; font-weight: 400; }
.form input[type=text], .form input[type=tel], .form input[type=email], .form select, .form textarea { width: 100%; padding: 10px; border: 1px solid #bbb; border-radius: 6px; font-size: 1rem; }
.form fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.form legend { font-weight: 700; }
.form button { width: 100%; cursor: pointer; font-size: 1rem; }

/* フッター */
.site-footer { margin-top: 48px; padding: 24px 0 32px; background: var(--main-dark); color: #dfe9e1; font-size: .85rem; }
.site-footer a { color: #fff; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 日本地図から探す（都道府県のブロック・2層） ----------
   まちほめたい（machihometai.jp）から移植。墓じまい案内も同じものを使っている。
   座標は データ/日本地図.json（1254×1254 の採寸を%に直したもの）。
   パソコン＝県ごとに押せる層／スマホ＝地方ごとに押せる層。切り替えはCSSだけ（JSは使わない）。
   地方の <a> 自体は押せず、中の県ブロックだけ押せる＝どの県を押しても地方へ。 */
.map-note { text-align: center; font-size: .84rem; color: var(--muted); margin: 4px 0 0; }
.jpwrap {
  position: relative; width: 100%; max-width: 560px;
  margin: 14px auto 0; aspect-ratio: 1254 / 1254;
}
.map-pf-layer, .map-rg-layer { position: absolute; inset: 0; }
.pf {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; text-decoration: none; overflow: hidden;
  padding: 1px; font-weight: 700; line-height: 1.15; text-align: center;
  font-size: clamp(9px, 1.45vw, 12px);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .12s ease;
}
.pf .v { writing-mode: vertical-rl; }
a.pf:hover { filter: brightness(1.12); }
a.pf:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.rg { position: absolute; inset: 0; pointer-events: none; text-decoration: none; display: block; }
.rg .pf { pointer-events: auto; cursor: pointer; }
.rg:hover .pf { filter: brightness(1.1); }
.rg:active .pf { filter: brightness(.86); }
.rg:focus-visible { outline: none; }
.rg:focus-visible .pf { outline: 2px solid var(--ink); outline-offset: 1px; }
/* 既定（パソコン）は県ごと。スマホは地方ごとに差し替える */
.map-rg-layer { display: none; }
@media (prefers-reduced-motion: reduce) { .pf { transition: none; } }

/* 凡例。地図の左上の海の余白に重ねる。押すとその地方の都道府県一覧へ */
.maplegend {
  position: absolute; left: 2.5%; top: 2%;
  display: flex; flex-direction: column; gap: .15em;
  font-size: clamp(10px, 2.4vw, 13px); z-index: 1;
}
.lg {
  display: flex; align-items: center; gap: .55em; min-height: 2.15em;
  color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3;
  white-space: nowrap; padding: .3em; border-radius: .4em;
}
.lg i {
  flex: none; width: 1.45em; height: 1.2em; border-radius: .25em; background: var(--c);
  box-shadow: inset 0 -.2em 0 rgba(0, 0, 0, .17), inset 0 .08em 0 rgba(255, 255, 255, .22);
}
.lg:hover { background: rgba(255, 255, 255, .75); }
.lg:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.map-hint { text-align: center; font-size: .84rem; color: var(--muted); margin: 14px auto 0; max-width: 560px; }
.sp-only { display: none; }

/* 地方の見出し（地図と凡例の行き先）。固定ヘッダーに隠れないよう余白をとる
   （ヘッダーはパソコンで56px、スマホはメニューが折り返して84px） */
.region__name { scroll-margin-top: 72px; display: flex; align-items: center; gap: .5em; }
.region__dot {
  flex: none; width: 1.1em; height: .95em; border-radius: .22em;
  box-shadow: inset 0 -.2em 0 rgba(0, 0, 0, .17), inset 0 .08em 0 rgba(255, 255, 255, .22);
}

@media (max-width: 640px) {
  /* スマホ：同じ地図のまま、押す相手を地方に切り替える（小さい県を指で狙わなくて済む） */
  .map-pf-layer { display: none; }
  .map-rg-layer { display: block; }
  .pf { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .22); }
  .pf.tight { font-size: 8px; }
  .pc-only { display: none; }
  .sp-only { display: inline; }
  /* 凡例は地図左上の空き（幅およそ半分）に2列4行。1行を34px以上にして押しやすくし、「地方」は省く */
  .maplegend { display: grid; grid-template-columns: 1fr 1fr; column-gap: .3em; row-gap: .3em; max-width: 49%; }
  .lg { min-height: 34px; flex-wrap: wrap; gap: 0 .4em; padding: .2em .3em; align-content: center; }
  .lg i { width: 1.2em; height: 1.05em; }
  .lg-sfx { display: none; }
  .region__name { scroll-margin-top: 72px; }   /* スマホもヘッダーは1段（右上に「メニュー」） */
}

/* 姉妹サイトのバナー（フッターの上） */
.sister { margin-top: 40px; }
.sister__card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--sister-bg); border: 1px solid var(--sister-line);
  border-left: 6px solid var(--sister); border-radius: 10px;
}
.sister__card:hover { background: #e7f2fb; }
.sister__card + .sister__card { margin-top: 10px; }
/* 家じまい案内のカードは家の色（茶）。墓じまい案内（青）と並んだとき見分けがつくように */
.sister__card--ie { --sister: #8a6420; --sister-bg: #fbf6ea; --sister-line: #e7d9b8; }
.sister__card--ie:hover { background: #f5ecd6; }
/* 庭じまい案内のカードは庭の色（緑）。家じまい案内のページで墓じまい案内（青）と並んだとき用 */
.sister__card--niwa { --sister: #2f6b3a; --sister-bg: #f1f7f2; --sister-line: #cfe2d2; }
.sister__card--niwa:hover { background: #e8f2ea; }
/* 終身サポート案内のカードは藤色（2026-09-21 追加。サイト設定の 配色.main と同じ #6b4c9a で、白文字とのコントラスト 6.7:1） */
.sister__card--shushin { --sister: #6b4c9a; --sister-bg: #f7f3fb; --sister-line: #ded1ee; }
.sister__card--shushin:hover { background: #f0e9f8; }
.sister__icon { flex: 0 0 auto; line-height: 0; }
.sister__body { flex: 1 1 auto; }
.sister__label {
  display: inline-block; font-size: .72rem; font-weight: 700; line-height: 1.6;
  color: #fff; background: var(--sister); border-radius: 4px; padding: 0 8px; margin-bottom: 2px;
}
.sister__title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.5; }
.sister__text { display: block; font-size: .88rem; color: var(--muted); line-height: 1.7; }
.sister__btn {
  flex: 0 0 auto; background: var(--sister); color: #fff; font-weight: 700; font-size: .9rem;
  border-radius: 6px; padding: 9px 14px; white-space: nowrap;
}
.sister__arrow { margin-left: 6px; }
.sister__note { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 719px) {
  .sister__card { flex-wrap: wrap; }
  .sister__btn { width: 100%; text-align: center; }
}

/* 問い合わせ枠（全ページの下部・姉妹サイトのバナーの直前。base.html が parts.consult_box で置く）。
   墓じまい案内の同じ位置の枠と同じ並び：LINE の大きなボタン → ひとこと → フォームのボタンと電話（2026-09-14 佐藤さんの指示。
   「写真を送るだけ・無料」の帯は付けない）。帯の地と白いカードの色は墓じまい案内と同じ（クリーム地に金色の光）。
   ボタンと電話番号の色はサイトの基調色（--main 系）なので、庭は緑・家はオレンジになる。 */
.consult {
  margin-top: 48px; padding: 36px 16px; text-align: center;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 214, 120, .35), rgba(255, 214, 120, 0) 45%),
    linear-gradient(135deg, #fdf6e3, #fefaf3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.consult + .sister { margin-top: 32px; }
.consult__card {
  max-width: 640px; margin: 0 auto; background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 32px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.consult__line {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--line-green); color: #fff; font-weight: 700; font-size: 1.22rem;
  padding: 18px 40px; border-radius: 999px; text-decoration: none; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(6, 199, 85, .32); transition: .2s;
}
.consult__line:hover { background: #05b34c; transform: translateY(-1px); }
.consult__line .ic-line { width: 1.15em; height: 1.15em; flex: none; }
.consult__lead { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.consult__sub { margin-top: 14px; display: flex; gap: 8px 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.consult__form {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--main-dark); font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1px solid var(--main); border-radius: 999px; padding: 9px 22px; background: #fff; transition: .2s;
}
.consult__form:hover { background: var(--main); color: #fff; }
.consult__tel { font-size: .86rem; color: var(--muted); }
.consult__tel a {
  font-weight: 700; font-size: 1.2rem; color: var(--main-dark); text-decoration: none;
  margin-left: 4px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .consult { padding: 28px 12px; }
  .consult__card { padding: 22px 16px; }
  .consult__line { width: 100%; font-size: 1.08rem; padding: 17px 14px; white-space: nowrap; }
  .consult__sub { flex-direction: column; gap: 10px; }
  .consult__form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .consult__line, .consult__form { transition: none; } }

/* 狭い画面では相場表を1行ずつのカードにする（3列だと項目名が細切れになるため） */
@media (max-width: 719px) {
  table.price, table.price tbody, table.price tr, table.price td { display: block; width: 100%; }
  table.price thead { display: none; }
  table.price tr { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
  table.price td { border: 0; padding: 4px 12px; }
  table.price td:nth-child(1) { background: var(--main-light); font-weight: 700; padding-top: 8px; }
  table.price td.price__range { white-space: normal; font-size: 1.05rem; color: var(--main-dark); }
  table.price td:nth-child(3) { color: var(--muted); font-size: .85rem; padding-bottom: 8px; }
  table.price td:nth-child(3):not(:empty)::before { content: "条件："; }
}

@media (min-width: 720px) {
  h1 { font-size: 1.8rem; }
  .cta__buttons { flex-direction: row; }
  .cta__buttons .btn { flex: 1; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cols3 { grid-template-columns: 1fr 1fr 1fr; }
  .choices { grid-template-columns: 1fr 1fr; }
  .guide-cards { grid-template-columns: 1fr 1fr; }
}

/* フォーム：取り次ぎ同意・ボット対策の隠し欄・送信完了 */
.form__row--agree label { display: block; font-size: 0.95rem; line-height: 1.7; }
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sent { background: #f1f8f2; border: 1px solid #bfe0c4; border-radius: 10px; padding: 20px 24px; margin: 0 0 24px; }
.sent h2 { margin: 0 0 8px; font-size: 1.15rem; }


/* ---------- テーマ niwa（庭じまい案内）：墓じまい案内と同じタッチ（2026-09-13 佐藤さんの指示） ----------
   サイト設定に「テーマ: niwa」と書くと base.html が body に class="theme-niwa" を付け、Google Fonts
   （見出し Shippori Mincho・本文 Zen Kaku Gothic New＝墓じまい案内と同じ）と、庭園のイラスト
   （静的/garden.svg → --garden。base.html が版番号つきで定義する）を読み込む。
   ここから下は body に themed（テーマ付きのサイト）が付いたときだけ効く。テーマ niwa（庭）と ie（家）で共通。色はテーマごとの区画で決める。
   雲の絵（--cloud 系）は墓じまい案内の style.css と同じもの（姉妹サイトで同じ雲が流れる）。 */
.hero-garden__inner { max-width: var(--max); margin: 0 auto; padding: 0 16px; }   /* テーマ無しでも崩れないよう共通 */
/* テーマ共通（body に themed が付いたサイト）：書体・雲・空と帯の色の既定。色はテーマごとの区画で上書きする */
.themed {
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 150'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='0.72' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23d7eaf8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter='url(%23b)' fill='url(%23g)'%3E%3Cellipse cx='75' cy='102' rx='62' ry='30'/%3E%3Cellipse cx='135' cy='76' rx='56' ry='40'/%3E%3Cellipse cx='205' cy='62' rx='62' ry='44'/%3E%3Cellipse cx='268' cy='88' rx='56' ry='34'/%3E%3Cellipse cx='312' cy='108' rx='46' ry='26'/%3E%3Cellipse cx='185' cy='110' rx='125' ry='32'/%3E%3C/g%3E%3C/svg%3E");
  --cloud-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 150'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' fill='%23ffffff' opacity='0.55'%3E%3Cellipse cx='75' cy='102' rx='62' ry='30'/%3E%3Cellipse cx='135' cy='76' rx='56' ry='40'/%3E%3Cellipse cx='205' cy='62' rx='62' ry='44'/%3E%3Cellipse cx='268' cy='88' rx='56' ry='34'/%3E%3Cellipse cx='312' cy='108' rx='46' ry='26'/%3E%3Cellipse cx='185' cy='110' rx='125' ry='32'/%3E%3C/g%3E%3C/svg%3E");
  --cloud-wisp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 90'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' fill='%23ffffff' opacity='0.4'%3E%3Cellipse cx='110' cy='55' rx='95' ry='18'/%3E%3Cellipse cx='230' cy='42' rx='110' ry='15'/%3E%3Cellipse cx='330' cy='58' rx='80' ry='14'/%3E%3C/g%3E%3C/svg%3E");
  font-family: var(--sans);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  --hero-sky: #cfe6f4;                 /* ヒーローの絵の下地 */
  --band-a: rgba(238, 245, 234, .30);  /* 下層ページの帯を地の色へ溶かすグラデーション */
  --band-b: rgba(238, 245, 234, .62);
  --band-c: rgb(238, 245, 234);
}
/* テーマ niwa（庭じまい案内）の色 */
.theme-niwa {
  --bg: #eef5ea;
  --paper: #ffffff;
  --ink: #26332a;
  --muted: #5a6a5e;
  --line: #d3e3d2;
  --garden-ink: #1f4a2c;
  --garden-ink-soft: #35603f;
  --shadow: 0 6px 22px rgba(31, 74, 44, .12);
  --shadow-sm: 0 3px 12px rgba(31, 74, 44, .08);
}
/* テーマ ie（家じまい案内・2026-09-13 佐藤さんの指示）：同じタッチで、温かみのあるオレンジ（配色の --main）と家のイラスト（静的/house.svg） */
.theme-ie {
  --bg: #fbf4ea;
  --paper: #ffffff;
  --ink: #33291f;
  --muted: #6b5c50;
  --line: #e8d8c4;
  --garden-ink: #5a3517;
  --garden-ink-soft: #7a4a26;
  --shadow: 0 6px 22px rgba(90, 53, 23, .13);
  --shadow-sm: 0 3px 12px rgba(90, 53, 23, .09);
  --hero-sky: #f7e4cf;
  --band-a: rgba(251, 244, 234, .30);
  --band-b: rgba(251, 244, 234, .62);
  --band-c: rgb(251, 244, 234);
}
.theme-ie .hero-garden h1 { text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.95), 0 0 32px rgba(255,255,255,.8); }
.theme-ie .hero-garden .hero__lead, .theme-ie .hero-garden .hero__stats { text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.95), 0 0 24px rgba(255,255,255,.85); }
.themed h1, .themed h2, .themed h3, .themed .site-logo, .themed .cta__title, .themed .sister__title { font-family: var(--serif); letter-spacing: .03em; }
.themed h1 { font-weight: 600; color: var(--garden-ink); }
.themed h2 { font-weight: 600; color: var(--garden-ink); border-left: 0; padding-left: 0; }
.themed h2:not(.cta__title)::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--main); margin-top: 6px; }
.themed h3 { font-weight: 600; }

/* ヘッダー */
.themed .site-header { background: rgba(255, 255, 255, .95); border-bottom-color: var(--line); }
.themed .site-logo { font-size: 1.3rem; color: var(--garden-ink); }
.themed .nav-pc a { color: var(--garden-ink-soft); }
.themed .site-nav__cta { border-radius: 999px; padding: 7px 14px; }

/* トップのヒーロー：庭園のイラストを背景に、見出し → 庭の絵 → 白い相談カード（テンプレート/top.html の prelude ブロック）。
   カードはヒーローの下端に 120px またがる（margin-bottom: -120px）ので、絵が隠れずに見える。その分 main に padding-top を足す。
   overflow: hidden にするとまたがったカードが切れるので、横だけ overflow-x: clip で切る（縦は visible のまま。
   雲の層は左右 30px はみ出して描いているため。clip-path は描画しか切らず scrollWidth が伸びたままになるので使わない）。 */
.themed .hero-garden {
  /* 下の余白 491px は、上部の問い合わせカード（margin 240px＋カード高さ）を外した分の補い。絵（--garden）の縦横比を元と同じに保つ（2026-09-13 佐藤さんの指示：絵は変えない） */
  position: relative; text-align: center; padding: 64px 0 491px;
  overflow-x: clip;
  background-color: var(--hero-sky);
  background-image: var(--garden);
  background-repeat: no-repeat; background-size: 100% 100%; background-position: 50% 100%;
  color: var(--garden-ink);
}
.themed .hero-garden::before, .themed .hero-garden::after {
  content: ""; position: absolute; left: -30px; right: -30px; top: 0; height: 55%;
  pointer-events: none; background-repeat: no-repeat;
}
.themed .hero-garden::before {
  background-image: var(--cloud), var(--cloud-soft), var(--cloud-wisp);
  background-position: 3% 72%, 27% 4%, 50% 92%;
  background-size: 420px auto, 220px auto, 500px auto;
  animation: niwaDriftRight 52s ease-in-out infinite alternate;
}
.themed .hero-garden::after {
  background-image: var(--cloud), var(--cloud-soft);
  background-position: 86% 24%, 98% 66%;
  background-size: 300px auto, 170px auto;
  animation: niwaDriftLeft 52s ease-in-out infinite alternate;
}
.themed .hero-garden > * { position: relative; z-index: 1; }
@keyframes niwaDriftRight { from { transform: translate3d(-14px, 0, 0); } to { transform: translate3d(14px, 0, 0); } }
@keyframes niwaDriftLeft { from { transform: translate3d(12px, 0, 0); } to { transform: translate3d(-12px, 0, 0); } }
.themed .hero-garden h1 { font-size: 2.05rem; line-height: 1.6; margin: 0 auto; max-width: 22em; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.themed .hero-garden .hero__lead { margin: 16px auto 0; max-width: 660px; color: var(--garden-ink-soft); }
.themed .hero-garden .hero__stats { color: var(--garden-ink-soft); margin: 6px 0 0; }
.themed .hero-garden .cta {
  margin: 240px auto -120px; max-width: 760px; text-align: center;
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 32px; box-shadow: var(--shadow);
}
.themed .hero-garden .cta__title { font-size: 1.25rem; }
.themed.page-top main.wrap { padding-top: 32px; }   /* 上部の問い合わせカードを外したので通常の余白（2026-09-13） */

/* 下層ページ：見出しの後ろに同じ庭園を薄く敷いた帯（base.html が main の前に置く高さ0の .page-band。トップには無い）。
   全幅の要素の ::before なので 100vw を使わず、横のはみ出しが出ない。 */
.themed .page-band { position: relative; height: 0; }
.themed .page-band::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 320px;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, var(--band-a) 0%, var(--band-b) 50%, var(--band-c) 100%),
    var(--cloud-soft), var(--garden);
  background-repeat: no-repeat;
  background-size: auto, 240px auto, cover;
  background-position: 0 0, 12% 10%, 50% 38%;
}

/* カード・ボタン：白い角丸と柔らかな影 */
.themed .cta { background: var(--paper); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.themed .cta__title { color: var(--garden-ink); }
.themed .btn { border-radius: 999px; }
.themed .btn--line { box-shadow: 0 4px 14px rgba(6, 199, 85, .26); }
.themed .card, .themed .col, .themed .guide-cards a, .themed .choice, .themed .form, .themed .sent { border-radius: 14px; box-shadow: var(--shadow-sm); }
.themed .card, .themed .col, .themed .guide-cards a, .themed .form { border-color: var(--line); }
.themed .card--partner { border-color: var(--main); }
.themed .pref-list li a, .themed .city-list li a { border-radius: 999px; border-color: var(--line); padding: 8px 14px; box-shadow: 0 1px 3px rgba(31, 74, 44, .06); }
.themed .pref-list li a:hover, .themed .city-list li a:hover { background: var(--main-light); border-color: var(--main); }
.themed .cat-nav__list a { border-radius: 12px; }
.themed .sister__card { border-radius: 14px; box-shadow: var(--shadow-sm); }
.themed .consult__card { box-shadow: var(--shadow); }
.themed .consult__tel a { font-family: var(--serif); letter-spacing: .03em; }
.themed .site-footer { background: var(--garden-ink); }

@media (max-width: 640px) {
  .themed .hero-garden { padding: 40px 0 599px; }   /* スマホも同様に、外したカード分の高さを補う */
  /* 見出しは設定の改行位置で2行にする。1行目16文字が画面幅（320〜414px）に収まる大きさ */
  .themed .hero-garden h1 { font-size: clamp(1.15rem, 5.4vw, 1.5rem); letter-spacing: .01em; max-width: none; }
  .themed .hero-garden .cta { margin-top: 200px; padding: 18px 16px; border-radius: 14px; }
  /* 家じまいの見出しは2行目が17文字なので、少し小さくして2行に収める */
  .theme-ie .hero-garden h1 { font-size: clamp(1.05rem, 4.9vw, 1.45rem); }
  .themed .page-band::before { height: 260px; background-position: 0 0, 10% 8%, 50% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .themed .hero-garden::before, .themed .hero-garden::after { animation: none; }
}

/* ---------- スマホのメニューと下の固定バー（2026-09-14 佐藤さんの指示・墓じまい案内と同じ作り） ----------
   719px 以下：ヘッダーは「題字＋右上の『メニュー』ボタン」の1段。押すと白い全画面のメニュー（.site-nav.open → .nav-sp）。
   画面下に LINE・フォーム・電話の固定バー（.bottom-bar）。本文はバーの分だけ下に余白（body の padding-bottom）。
   パソコン（720px 以上）は何も変わらない。開閉は 静的/script.js（開くとき履歴を1段積み、本体の「戻る」でも閉じる）。 */
.nav-toggle {
  align-items: center; gap: 6px; height: 40px; padding: 0 12px; flex: none;
  background: #fff; border: 1px solid var(--main); border-radius: 999px;
  color: var(--main-dark); font-weight: 700; font-size: .86rem; cursor: pointer; font-family: inherit;
}
.nav-toggle .bars { display: inline-block; width: 18px; height: 12px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars i {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor;
}
.nav-toggle .bars::before { top: 0; } .nav-toggle .bars i { top: 5px; } .nav-toggle .bars::after { bottom: 0; }
.nav-toggle.is-open { background: var(--main); color: #fff; border-color: var(--main); }
.nav-toggle.is-open .bars { display: none; }
.nav-toggle:focus-visible, .nav-close:focus-visible { outline: 2px solid var(--main-dark); outline-offset: 2px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
@media (max-width: 719px) {
  .site-header__inner { flex-wrap: nowrap; gap: 8px; min-height: 56px; }
  .site-logo { font-size: 1.05rem; line-height: 1.2; }
  .themed .site-logo { font-size: 1.15rem; }
  .nav-toggle { display: inline-flex; }
  .nav-pc { display: none; }
  /* 開いたメニュー：ヘッダーの下から画面全体を覆う白い一枚（後ろのページは動かない） */
  .site-nav { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 49; background: var(--paper, #fff); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .site-nav.open { display: block; }
  body.menu-open { overflow: hidden; }
  .nav-sp { display: block; padding: 4px 18px 48px; max-width: 520px; margin: 0 auto; }
  .nav-sp ul { list-style: none; padding: 0; margin: 0; }
  .nav-sp li { border-bottom: 1px solid var(--line); }
  .nav-sp a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 6px; min-height: 56px; font-size: 1.05rem; line-height: 1.4; color: var(--ink); text-decoration: none; }
  .nav-sp a::after { content: "›"; color: var(--main); font-size: 1.25rem; line-height: 1; flex: none; }
  .nav-head { font-size: .82rem; font-weight: 700; color: var(--main-dark); letter-spacing: .08em; margin: 14px 0 2px; padding-bottom: 4px; border-bottom: 2px solid var(--main); }
  .nav-sp .nav-cta { border-bottom: 0; margin-top: 8px; }
  .nav-sp .nav-cta a { justify-content: center; gap: 8px; min-height: 54px; background: var(--line-green); color: #fff; font-weight: 700; border-radius: 999px; box-shadow: 0 4px 14px rgba(6, 199, 85, .26); }
  .nav-sp .nav-cta a::after { content: none; }
  .nav-sp .nav-cta .ic-line { width: 1.15em; height: 1.15em; flex: none; }
  .nav-close-wrap { text-align: center; padding-top: 16px; margin: 0; }
  .nav-close { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 32px; background: #fff; border: 1px solid var(--main); border-radius: 999px; color: var(--main-dark); font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; }
  /* 画面下に固定する問い合わせの入口 */
  .bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .10); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 60px; padding: 6px 4px; text-decoration: none; color: var(--main-dark);
    font-weight: 700; font-size: .8rem; line-height: 1.2; border-right: 1px solid var(--line);
  }
  .bottom-bar a:last-child { border-right: 0; }
  .bottom-bar .ic, .bottom-bar .ic-line { width: 22px; height: 22px; }
  .bottom-bar .bb-line { background: var(--line-green); color: #fff; }
  .bottom-bar small { display: block; font-size: .66rem; font-weight: 700; line-height: 1.1; opacity: .95; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.menu-open .bottom-bar { display: none; }
}