/* ==== service-areas.css (対応エリアページ専用) ==== */

/* Hero（共通の .hero がある場合はそのままでもOK。配色はサンプル準拠） */
.hero{
  background:
    radial-gradient(1200px 500px at 20% -50%, var(--hero-from), transparent 70%),
    radial-gradient(1200px 500px at 100% 0%, var(--hero-to), transparent 60%),
    #fff;
  border-top:1px solid var(--line);
}
.hero__wrap{display:grid;grid-template-columns:1fr;gap:24px;padding:64px 0}

/* Area cards */
.pref.card{padding:16px}
.pref .thumb{
  aspect-ratio:4/3;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(135deg,#e5efff,#eaf6ff);
  display:flex;align-items:center;justify-content:center;
  color:#1e3a8a;font-weight:800
}
.pref .list{margin-top:10px;font-size:14px;color:var(--muted)}

/* details / summary（開閉ボタン風） */
details{margin-top:12px}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.toggle{
  display:inline-block;
  border:1px solid var(--brand);
  color:var(--brand);
  background:#fff;
  padding:8px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer
}

/* 市区町村チップ群 */
.cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cities .chip{background:#eef2ff;border-color:#e5e7eb}

/* 下部CTA */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}

/* もしグリッドの定義が足りなければ（site.cssにある想定） */
/* .grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} */