/* =========================================================
   県ページ共通スタイル（全6県で再利用）
   テーマ色は各ページの .prefecture-page で CSS変数を上書きする。
     --pref-main    : ベースの主役色（濃色）
     --pref-accent  : アクセント1
     --pref-accent2 : アクセント2
     --pref-light   : 明るい下地色
   ========================================================= */

.prefecture-page {
  --pref-main:   #0F3D2E;
  --pref-accent: #A61E2D;
  --pref-accent2:#F2A541;
  --pref-light:  #DCE8E0;
  --pref-blue:   #3B5F8A;
}

/* ---------- 上部ナビ ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(247,244,236,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-washi);
}
.topbar a.back { font-size: 0.85rem; color: var(--pref-main); text-decoration: none; }
.topbar a.back:hover { text-decoration: underline; }
.topbar .brand { font-family: "Noto Serif JP", serif; font-size: 0.9rem; color: var(--c-kiri); }

/* ---------- ヒーロー（フルブリード写真） ---------- */
.pref-hero {
  position: relative;
  min-height: 64vh;
  display: grid; align-items: end;
  padding: 4rem clamp(1.2rem, 5vw, 4rem) 3rem;
  color: #fff;
  overflow: hidden;
  background-size: cover; background-position: center;
  /* 暗幕の色味は --pref-shade（"R,G,B"）で県ごとに調整。既定は深い森緑。 */
  background-image:
    linear-gradient(180deg,
      rgba(var(--pref-shade, 15,38,30), 0.30) 0%,
      rgba(var(--pref-shade, 15,38,30), 0.42) 45%,
      rgba(var(--pref-shade, 15,38,30), 0.86) 100%),
    var(--pref-photo);
}
.pref-hero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; width: 100%; }
.pref-hero__eyebrow {
  font-size: 0.82rem; letter-spacing: 0.26em; margin: 0 0 1rem;
  color: #fff; opacity: 0.92;
}
.pref-hero__eyebrow .en { opacity: 0.7; margin-left: 0.6rem; }
.pref-hero__concept {
  font-family: "Noto Serif JP", serif; font-weight: 500;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.12em; margin: 0 0 0.6rem; color: var(--pref-accent2);
}
.pref-hero__title {
  font-family: "Noto Serif JP", serif; font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin: 0; line-height: 1.35;
  text-shadow: 0 3px 18px rgba(0,0,0,0.4);
}
.pref-hero__sub { margin: 1.1rem 0 0; font-size: clamp(0.95rem, 2.2vw, 1.08rem); opacity: 0.95; }
.pref-hero__credit { position: absolute; right: 12px; bottom: 10px; z-index: 1; font-size: 0.62rem; color: rgba(255,255,255,0.7); }

/* 県カラーの帯 */
.pref-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1;
  background: linear-gradient(90deg, var(--pref-main), var(--pref-accent) 50%, var(--pref-accent2));
}

/* ---------- サマリーバー ---------- */
.pref-summary {
  background: var(--pref-main);
  color: #fff;
}
.pref-summary .container {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.6rem; align-items: center; justify-content: center;
  padding: 1.4rem 0;
}
.pref-summary .item { text-align: center; }
.pref-summary .item b {
  font-family: "Noto Serif JP", serif; font-size: 1.6rem; display: block; line-height: 1.2;
}
.pref-summary .item span { font-size: 0.76rem; opacity: 0.85; }
.pref-summary .desc { font-size: 0.84rem; opacity: 0.9; max-width: 34ch; }

/* ---------- コントロール（フィルター） ---------- */
.controls {
  position: sticky; top: 49px; z-index: 40;
  background: var(--c-kinari);
  border-bottom: 1px solid var(--c-washi);
  padding: 1rem 0;
}
.controls .container { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: space-between; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1px solid var(--c-washi);
  background: #fff;
  color: var(--c-sumi);
  font-size: 0.82rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.chip:hover { border-color: var(--pref-main); }
.chip[aria-pressed="true"] {
  background: var(--pref-main); color: #fff; border-color: var(--pref-main);
}
.chip .n { opacity: 0.7; font-size: 0.74rem; margin-left: 0.25rem; }
/* ---------- スポット一覧 ---------- */
.spots { padding: 2.6rem 0 1rem; }
.result-meta { color: var(--c-kiri); font-size: 0.85rem; margin-bottom: 1.6rem; text-align: center; }

.spot {
  background: #fff;
  border: 1px solid var(--c-washi);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 4px 16px rgba(47,47,47,0.05);
}
.spot__head {
  display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-washi);
  padding-bottom: 0.9rem; margin-bottom: 1rem;
}
.spot__rank {
  font-family: "Noto Serif JP", serif; font-size: 0.9rem; color: var(--pref-accent);
}
.spot__name {
  font-family: "Noto Serif JP", serif; font-weight: 700;
  font-size: 1.3rem; margin: 0; flex: 1 1 auto; color: var(--c-sumi);
}
.spot__count {
  background: var(--pref-accent); color: #fff;
  font-size: 0.74rem; padding: 0.25rem 0.7rem; border-radius: 999px;
}
.spot__count b { font-family: "Noto Serif JP", serif; font-size: 0.95rem; margin: 0 0.1rem; }
.spot__cat {
  font-size: 0.72rem; color: var(--pref-main);
  background: var(--pref-light); padding: 0.25rem 0.6rem; border-radius: 6px;
}

/* コメント（推薦文） */
.comments { display: grid; gap: 0.9rem; }
.comment {
  position: relative;
  background: var(--c-kinari);
  border-radius: 10px;
  padding: 1rem 1.1rem 0.9rem 1.4rem;
}
.comment::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px;
  background: var(--pref-accent2);
}
.comment__text { margin: 0; font-size: 0.95rem; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.comment__text.empty { color: var(--c-kiri); font-style: italic; }
.comment__meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--c-kiri); }
.comment__poster { color: var(--c-sumi); font-weight: 500; }
.comment__poster::before { content: "👤 "; }
.comment__orig { color: var(--c-kiri); }
.comment__orig::before { content: "「"; }
.comment__orig::after { content: "」として推薦"; }

.empty-state { text-align: center; color: var(--c-kiri); padding: 3rem 0; }

@media (max-width: 640px) {
  .controls .container { justify-content: flex-start; }
  .pref-summary .desc { display: none; }
  /* スマホでは絞り込みをスクロール追従させない */
  .controls { position: static; top: auto; }
}