/* ============================================================
   地域単独ページ /area/{地域}/  (2026-09-02)

   前提: このページは tdc.css → tdc-treatment-top.css → tdc-ds.css →
         tdc-area.css の順に読み込まれる。
   tdc-treatment-top.css の .tdc-area-grid は市区町村ナビ向けの
   簡素版（灰色ボックス＋赤文字）なので、TOP と同水準の質感へ
   このファイルで上書きする。トークンは tdc-ds.css の :root を使う。
   ============================================================ */

.tdc-area-page__body {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── ページ上部の帯（テーマの空 page_title を地の色に馴染ませる） ── */
.tdc-area-page .main-fv.page_title {
  background: linear-gradient(180deg, #fdf8f5 0%, #faf6f1 100%) !important;
  border-bottom: 1px solid var(--tdc-line, #ece6e0);
  padding: 0 !important;
}

/* ── セクションのリズム ── */
.tdc-area-page .tdc-section { margin: 44px 0; }
.tdc-area-page .tdc-section:first-of-type { margin-top: 32px; }
.tdc-area-page .tdc-sec-head { margin-bottom: 16px; }

/* ── タイル（施術ナビ / 子地域ナビ共通） ──
   簡素版を打ち消すため、同じ詳細度の指定はページスコープで上書きする */
.tdc-area-page .tdc-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.tdc-area-page .tdc-area-grid__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--tdc-card, #fff);
  border: 1px solid var(--tdc-line, #ece6e0);
  border-radius: 12px;
  color: var(--tdc-text, #3a3a3a);
  text-decoration: none !important;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.tdc-area-page .tdc-area-grid__item::after {
  content: '→';
  position: absolute;
  right: 14px;
  color: var(--tdc-pink, #c9a8a4);
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.tdc-area-page .tdc-area-grid__item:hover {
  background: linear-gradient(135deg, #fdf6f4 0%, #fff 100%);
  border-color: var(--tdc-pink, #c9a8a4);
  box-shadow: 0 8px 20px -8px rgba(201, 168, 164, .3);
  transform: translateY(-1px);
}
.tdc-area-page .tdc-area-grid__item:hover::after {
  opacity: 1;
  transform: translateX(4px);
}
.tdc-area-page .tdc-area-grid__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}
/* 院数はバッジ化。簡素版の赤文字 (--color-main) を打ち消す */
.tdc-area-page .tdc-area-grid__count {
  flex: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tdc-rose, #a8847f);
  background: var(--tdc-chip-bg, #f8efeb);
  border-radius: 999px;
  padding: 3px 10px;
  transition: opacity .2s;
}
.tdc-area-page .tdc-area-grid__item:hover .tdc-area-grid__count { opacity: 0; }

/* ── 施術ナビは件数の多い順に並ぶ。上位3件だけ質感を上げて視線の入口を作る ── */
.tdc-area-page .tdc-area-sec--treatment .tdc-area-grid__item:nth-child(-n+3) {
  background: linear-gradient(135deg, #fdf6f4 0%, #fff 62%);
  border-color: #f0e2dc;
}

/* ── 一覧の件数行 ── */
.tdc-area-page .tdc-p-countrow {
  margin: 6px 2px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tdc-line-soft, #f3eeea);
}

/* ── 補足文（地域ページの締め） ── */
.tdc-area-page__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--tdc-sub, #8a8581);
}

@media (max-width: 600px) {
  .tdc-area-page__body { padding: 0 12px; }
  .tdc-area-page .tdc-section { margin: 30px 0; }
  .tdc-area-page .tdc-area-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tdc-area-page .tdc-area-grid__item { padding: 13px 12px; border-radius: 10px; }
  .tdc-area-page .tdc-area-grid__name { font-size: 12.5px; }
  .tdc-area-page .tdc-area-grid__count { font-size: 10.5px; padding: 2px 8px; }
  /* SP はホバーが無いので矢印は出さず、件数バッジを残す */
  .tdc-area-page .tdc-area-grid__item::after { display: none; }
  .tdc-area-page .tdc-area-grid__item:hover .tdc-area-grid__count { opacity: 1; }
}

/* ───────────────────────────────────────────
 * SP 調整 (2026-09-02 追補)
 * 統計帯は tdc-treatment-top.css 側が flex + white-space:nowrap + border-left
 * で3項目を横一列に置く。360px 級だと「掲載 1,146院 / 施術 16種類 /
 * データ更新 2026年9月」が収まらず横に溢れる。ここで折り返し可にする。
 * ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .tdc-area-page .tdc-page-head__stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 0 !important;
  }
  .tdc-area-page .tdc-page-head__stat { padding: 0 12px; }
  /* グリッドでは「左端の項目」が2つあるので、各行の先頭の縦罫を消す */
  .tdc-area-page .tdc-page-head__stat:nth-child(odd) { border-left: 0; padding-left: 2px; }
  .tdc-area-page .tdc-page-head__stat-val { white-space: normal; }

  /* リード文は SP で行長が伸びすぎるので詰める */
  .tdc-area-page .tdc-page-head__lead { font-size: 12.5px; line-height: 1.85; }

  /* 何かが溢れてもページ全体が横スクロールしないようにする保険。
     はみ出す要素があれば内側で吸収させる */
  .tdc-area-page__body { overflow-x: hidden; }
}

/* 狭い端末 (320px 級) では統計帯を1列に落とす */
@media (max-width: 360px) {
  .tdc-area-page .tdc-page-head__stats { grid-template-columns: 1fr; }
  .tdc-area-page .tdc-page-head__stat { border-left: 0; padding-left: 2px; }
  .tdc-area-page .tdc-area-grid { grid-template-columns: 1fr; }
}