/* ========================================
   hero テーマ（自治体の既存サイトに寄せた案内ページ）
   config.json の theme.layout === "hero" のときだけ有効化される。
   色・画像・文言はすべて config から CSS 変数・style 属性で注入されるため、
   このファイルは市町村ごとに複製しない。
   ======================================== */

:root {
  --th-color: #05751f;
  --th-accent: #ff6c01;
  --th-text: #606060;
  --th-max: 1000px;
}

body.th {
  margin: 0;
  background: #fff;
  color: var(--th-text);
  font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Yu Gothic', sans-serif;
  line-height: 1.7;
}

/* ロゴ帯（上下に太い色ボーダー） */
.th-bar {
  border-top: 3px solid var(--th-color);
  border-bottom: 3px solid var(--th-color);
  background: #fff;
}
.th-w { max-width: var(--th-max); margin: 0 auto; padding: 0 20px; }
.th-bar .th-w { padding-top: 20px; padding-bottom: 20px; }
.th-bar img { max-height: 56px; width: auto; display: block; }
.th-bar a { display: inline-block; }

/* ヒーロー（背景写真＋白抜き文字） */
.th-hero {
  background: var(--th-color) center center / cover no-repeat;
  padding: 120px 20px;
  margin-bottom: 40px;
}
.th-hero p {
  max-width: var(--th-max);
  margin: 0 auto;
  color: #fff;
  font-size: var(--fs-subhead);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.85);
}

/* 見出し */
.th-title {
  color: var(--th-color);
  font-size: var(--fs-hero);
  margin: 0 0 10px;
  line-height: 1.3;
}
.th-title span { display: block; font-size: 0.6em; font-weight: 400; }
.th-lead { margin: 0 0 40px; }

/* カード。gis-categories.js が生成するマークアップを、CSS だけで旧サイト風に見せる
   （JS を分岐させないため、ここでの上書きは body.th の詳細度で勝たせる） */
body.th .gis-cat-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
body.th .gis-cat-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--th-color);
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-radius: 10px;
  box-shadow: none;
}
body.th .gis-cat-card:hover,
body.th .gis-cat-card:focus-visible {
  border-color: var(--th-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
body.th .gis-cat-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* 64px の枠に収める。案内ページ専用だが rem の基準に依存させない */
  font-size: 27px;
}
body.th .gis-cat-body { align-items: center; }
body.th .gis-cat-name { color: var(--th-accent); font-size: var(--fs-title); }
body.th .gis-cat-desc { color: var(--th-text); font-size: var(--fs-body); }
body.th .gis-cat-meta { justify-content: center; }

/* 固定カード（地図をそのまま開く／アンケート）の並び */
body.th .th-fixed { margin-bottom: 40px; }

/* 著作権バー */
.th-copy {
  background: var(--th-color);
  color: #fff;
  text-align: center;
  font-size: var(--fs-caption);
  padding: 12px;
}

@media (max-width: 767px) {
  .th-hero { padding: 80px 16px; }
  .th-hero p { font-size: var(--fs-body); letter-spacing: 0.1em; }
  .th-title { font-size: var(--fs-title); }
  /* 狭い画面でも説明文を残す（旧サイトはカードに説明文があった） */
  body.th .gis-cat-desc { display: block; }
}