@charset "utf-8";
/* Zen Maru Gothic（SIL OFL 1.1）。CDNではなく assets/fonts/ の woff2 を読む */
@import url("./fonts.css");
/* みんなの公園検索 — 共通スタイル
   デザイン出典: /specification/TOP/*.png, /specification/UNDER/*.png */

/* ============ デザイントークン ============ */
:root {
  /* 緑：ロゴ・見出し・ボタン */
  --green-900: #14532d;   /* 塗りボタン */
  --green-800: #1b6b3a;
  --green-700: #237a41;   /* 見出し・リンク */
  --green-600: #2f9e44;   /* ロゴの「公園」 */
  --green-100: #dff0e0;
  --green-50:  #eef7ee;
  /* 黄：主要CTA・タグ */
  --yellow-500: #f4c53f;
  --yellow-400: #f7d977;
  --yellow-100: #fdf3d3;
  /* ベース */
  --cream:   #faf8f0;     /* ページ背景 */
  --cream-2: #f2f6ec;     /* 帯 */
  --footer-bg: #e4e9ca;   /* フッター地（2026-08-11 ユウキ指定） */
  --white:   #ffffff;
  --ink:     #333333;
  --ink-2:   #555c63;
  --muted:      #6b7278;   /* 補足文字。白地とのコントラスト4.9:1（旧 #8a9299 は3.16で本文には不足）*/
  --line:    #e3e6e2;
  --line-2:  #eef0ec;
  --star:    #f5b301;
  --alert:   #b45309;

  --radius-s: 8px;
  --radius:   12px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(24, 40, 24, .05), 0 6px 18px rgba(24, 40, 24, .05);
  --shadow-s: 0 1px 3px rgba(24, 40, 24, .07);

  --wrap: 1120px;
  /* 見出しは Zen Maru Gothic（やわらかい丸ゴシック）、本文は Noto Sans JP。
     丸ゴシックは長い文章だと読みづらいので役割で分ける（2026-08-11 ユウキ指定） */
  --font: "Noto Sans JP", "Hiragino Sans", "BIZ UDPGothic",
          "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", var(--font);
}

/* 見出し・ボタン・ロゴは丸ゴシック。読ませる文章は Noto Sans JP */
h1, h2, h3, h4,
.page-title, .section-title, .panel-title, .sp-head, .hero h1, .hero-badge,
.btn, .brand, .chip, .stars, .column-card h3, .doc h2, .doc h3, .pf-h {
  font-family: var(--font-head);
}

/* ============ ベース ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 文字の大きさの決まり（2026-08-11 ユウキ指定）
   本文は16px、いちばん小さくても14px。
   14pxは注記・補足だけに使い、読ませる文章には使わない。 */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
/* HTMLの hidden 属性を必ず効かせる。
   img に display:block を指定すると、ブラウザ標準の [hidden]{display:none} を
   作者スタイルが上書きしてしまい、hidden にした img が空の箱として見えてしまう
   （投稿フォームの写真枠に細長い線が出ていた原因。2026-08-13）。
   このサイトは hidden 属性で出し入れする作りが多いので、まとめて優先させる */
[hidden] { display: none !important; }
a { color: var(--green-700); }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { line-height: 1.4; margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============ ヘッダー ============ */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px; max-width: 1280px;
}
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand-logo { width: auto; height: 46px; }
@media (max-width: 860px) { .brand-logo { height: 38px; } }
@media (max-width: 420px) { .brand-logo { height: 32px; } }
/* TOP（top1.png）準拠：アイコンとラベルは横並び */
.gnav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.gnav a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.gnav a:hover { color: var(--green-700); }
.gnav svg { flex: none; }
.gnav .is-round {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--green-600); color: #fff;
  display: grid; place-items: center;
}
/* SPはロゴ・検索・ハンバーガーだけを出し、他はドロワーへ（カンプ「ロゴ 検索 ≡」） */
.site-header > .wrap > .nav-search, .nav-toggle { display: none; }
.nav-toggle {
  width: 44px; height: 44px; flex: none; margin-left: 4px;
  background: none; border: 0; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
.nav-toggle .bars { display: grid; gap: 5px; }
.nav-toggle .bars i {
  display: block; width: 24px; height: 2.5px; border-radius: 2px;
  background: var(--ink); transition: transform .2s, opacity .2s;
}
.nav-toggle.is-open .bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open .bars i:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-drawer { display: none; background: #fff; border-top: 1px solid var(--line); }
.nav-drawer ul { max-width: var(--wrap); margin: 0 auto; padding: 6px 16px 14px; }
.nav-drawer a {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  color: var(--ink); text-decoration: none; font-size: 16px;
  border-bottom: 1px dotted var(--line);
}
.nav-drawer a svg { color: var(--green-600); flex: none; }

@media (max-width: 860px) {
  .site-header .wrap { min-height: 60px; gap: 10px; }
  .gnav { display: none; }
  .site-header > .wrap > .nav-search { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); text-decoration: none; }
  /* ハンバーガーは右端に。以前は .nav-search が margin-left:auto を取っていたため
     ロゴのすぐ隣に並んで見えた（2026-09-06 ユウキ指摘） */
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-drawer:not([hidden]) { display: block; }
}
@media (max-width: 420px) {
  .site-header > .wrap > .nav-search > span:last-child { display: none; }
}

/* ============ パンくず ============ */
.breadcrumb { font-size: 16px; color: var(--muted); padding: 12px 0 4px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb li + li::before { content: "＞"; margin-right: 6px; color: var(--line); }
.breadcrumb a { color: var(--green-700); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ============ ボタン ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-pill);
  border: 1px solid transparent; text-decoration: none;
  font-weight: 700; cursor: pointer; transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn-primary { background: var(--green-900); color: #fff; }
.btn-cta { background: var(--yellow-500); color: var(--ink); font-size: 17px; padding: 14px 30px; }
.btn-ghost { background: #fff; color: var(--green-800); border-color: var(--green-600); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 14px; }

/* ============ カード / パネル ============ */
.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-s);
  padding: 20px;
}
.panel + .panel { margin-top: 16px; }
.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; color: var(--green-700); margin-bottom: 14px;
}

/* ============ 見出し ============ */
.page-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 24px; margin: 8px 0 18px;
}
.page-title .count { font-size: 15px; color: var(--ink-2); font-weight: normal; }
.section-title {
  display: flex; align-items: center; gap: 10px;
  line-height: 1.4;
  font-size: 20px; color: var(--green-700); margin-bottom: 16px;
}

/* 一覧の見出し行と並べ替え */
.result-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.result-head .page-title { flex: 1; margin-bottom: 0; min-width: 0; }
.sort-box { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); white-space: nowrap; }
.sort-box select { width: auto; padding: 8px 12px; border-radius: 10px; font-size: 16px; }
/* SPは横に並べると見出しが「京都府の\A公園」と折れて崩れる。縦に積む
   （2026-09-06 ユウキ指摘） */
@media (max-width: 700px) {
  .result-head { display: block; margin-bottom: 16px; }
  .result-head .page-title { margin-bottom: 10px; }
  .sort-box { width: 100%; }
  .sort-box select { flex: 1; min-width: 0; }
}

/* ============ バッジ・タグ ============ */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-s); padding: 3px 10px; font-size: 16px;
  /* ラベルが未登録のキー（multipurpose_toilet など）だと英字が長いまま出て
     横にはみ出していた。折り返せるようにしておく（2026-09-06） */
  max-width: 100%; overflow-wrap: anywhere;
}
.chip .fac-img { width: 15px; height: 15px; color: var(--green-600); }
.chip-strong { background: var(--green-50); border-color: var(--green-100); color: var(--green-800); }
.chip-alert  { background: #fff7ed; border-color: #fed7aa; color: var(--alert); }
.chip-star { font-weight: 700; }
.chip-star .stars { color: var(--star); letter-spacing: 1px; }

/* ============ フォーム ============ */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 16px; color: var(--ink-2); margin-bottom: 4px; }
input[type="text"], input[type="search"], input[type="email"], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fff; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #b6bcbf; }
.checklist { display: grid; gap: 8px; }
.checklist label {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; cursor: pointer;
}
.checklist input { accent-color: var(--green-600); width: 16px; height: 16px; flex: none; }
.checklist .fac-ico { display: inline-flex; flex: none; line-height: 0; color: var(--green-600); }
/* データが無い項目はアイコンも薄くして、選べないことを色でも示す */
.is-disabled .fac-ico { color: #c3c9c4; }
/* 検索パネルの行：アイコンを大きめに出し、行間と文字も上げる */
#facet-grid {
  gap: 0px 24px;
}
#facet-grid label { font-size: 15px; gap: 10px; min-height: 44px; }
#facet-grid .fac-ico { color: var(--green-700); }
/* Material Symbols（インラインSVG）。currentColor で色が変わる */
.fac-img { display: inline-flex; }
.fac-img svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.checklist label.is-disabled { color: var(--muted); cursor: not-allowed; }

/* ============ 一覧レイアウト ============ */
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; padding-bottom: 40px; }
.layout-right { grid-template-columns: 1fr 300px; }
@media (max-width: 900px) {
  .layout, .layout-right { grid-template-columns: 1fr; }
  /* 1列になったとき、サイドバーは本文の下へ。
     コラムのバナーが本文より先に来ると、探しに来た人の邪魔になる */
  .layout > aside { order: 2; }
  .layout > main { order: 1; }
}

.ad-slot {
  background: linear-gradient(180deg, var(--cream-2), #e8f0e2);
  border-radius: var(--radius); color: var(--green-800);
  display: grid; place-items: center; text-align: center;
  min-height: 150px; font-size: 14px; margin-top: 16px;
}

/* 公園カード（一覧） */
.park-card {
  display: grid; grid-template-columns: 200px 1fr; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 16px; box-shadow: var(--shadow-s); margin-bottom: 14px;
}
.park-card .thumb {
  border-radius: var(--radius); background: var(--cream-2);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  color: var(--muted); font-size: 14px; text-align: center; padding: 8px;
}
.park-card h2 { font-size: 19px; }
.park-card h2 a { color: var(--green-700); text-decoration: none; }
.park-card h2 a:hover { text-decoration: underline; }
.park-card .addr { font-size: 16px; color: var(--ink-2); margin: 2px 0 10px; }
.park-card .excerpt { font-size: 16px; color: var(--ink-2); margin-top: 10px; }
@media (max-width: 600px) { .park-card { grid-template-columns: 1fr; } }

/* 県の公園一覧（市町村・地域の五十音順） */
.area-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.area-nav a {
  border: 1px solid var(--green-100); background: var(--green-50); color: var(--green-800);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 16px; text-decoration: none;
}
.area-nav a:hover { background: var(--green-100); }
.area-sec { margin-bottom: 34px; scroll-margin-top: 80px; }
.area-sec .section-title a { text-decoration: none; }
.area-sec .count { font-size: 14px; color: var(--muted); font-weight: normal; }
.town-block { margin-bottom: 16px; }
.town-block h3 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 16px; color: var(--ink-2); margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px dotted var(--line);
}
.town-block h3 span { font-size: 14px; color: var(--muted); font-weight: normal; }
.park-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 16px; }
.park-links li { font-size: 16px; }
.park-links a { text-decoration: none; }
.park-links a:hover { text-decoration: underline; }

/* ============ 詳細ページ ============ */
.detail-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detail-head h1 { font-size: 27px; }
.detail-block { margin-top: 26px; }
.detail-block > h2 {
  font-size: 17px; color: var(--green-700);
  border-left: 4px solid var(--green-600); padding-left: 10px; margin-bottom: 12px;
}
.info-table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; }
.info-table th, .info-table td {
  border: 1px solid var(--line); padding: 10px 12px;
  text-align: left; vertical-align: top;
}
.info-table th { width: 26%; background: #fafbf9; color: var(--ink-2); font-weight: normal; white-space: nowrap; }
.info-table .todo { color: var(--alert); }

/* 設備・遊具アイコン列 */
.facility-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 10px;
}
.facility-cell {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 12px 6px; text-align: center; font-size: 14px;
}
.facility-cell .ico { display: grid; place-items: center; margin-bottom: 6px; color: var(--green-700); }
/* 静的HTMLの設備セル。アイコンは大きさを指定しないと元のSVGサイズで伸びてしまう */
.facility-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.facility-cell .fac-img { width: 26px; height: 26px; color: var(--green-700); flex: none; }
.facility-cell > span:last-child { line-height: 1.4; }
.popular-grid .fac-img { color: var(--green-600); }
.facility-cell.is-unknown { background: #fafafa; color: var(--muted); border-style: dashed; }

/* 写真ギャラリー（S-03 メイン写真＋サムネイル） */
.gallery-main { margin: 0; }
.gallery-main img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-l); background: var(--cream-2);
}
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.gallery-thumbs button {
  flex: none; padding: 0; border: 2px solid transparent; background: none;
  border-radius: var(--radius); cursor: pointer; line-height: 0;
}
.gallery-thumbs button:hover { border-color: var(--green-600); }
.gallery-thumbs img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }

.park-memo { white-space: pre-wrap; font-size: 16px; margin: 0; }

/* おすすめ度。★は文字なので、色だけで意味を伝えないよう注記を添える */
/* ★（stars-on）と☆（stars-off）は別の要素なので、gap を効かせると
   その境目だけ広く空いて不揃いに見えた。星の間は letter-spacing で揃え、
   注記との間だけ margin で空ける（2026-09-06 ユウキ指摘） */
.stars { margin: 10px 0; display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  font-size: 20px; letter-spacing: 2px; line-height: 1; }
.stars .stars-note { margin-left: 8px; }
.stars-on { color: #f2a71b; }
.stars-off { color: #d9ddd2; }
.stars-note { font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.stars-sm { font-size: 15px; margin: 6px 0 0; }

/* 能登など、震災で現況が変わっている地域に出す注記 */
.area-notice {
  margin: 14px 0; padding: 10px 14px; border-radius: var(--radius);
  background: #fff4e5; border: 1px solid #f0c9a0; color: #7a4a12;
  font-size: 16px; line-height: 1.7;
}
.park-card .area-notice { margin: 8px 0 0; padding: 6px 10px; font-size: 16px; }

/* 写真がない公園は、投稿を募る画像＋リンクにする */
.thumb-recruit { display: block; line-height: 0; height: 100%; padding: 3px; box-sizing: border-box; }
.thumb-recruit img { width: 100%; height: 100%; object-fit: contain; transition: filter .15s; }
.thumb-recruit:hover img { filter: brightness(1.04) saturate(1.1); }
.recruit-photo { display: block; border-radius: var(--radius-l); overflow: hidden; line-height: 0; }
.recruit-photo img { width: 100%; }

/* 一覧カードのサムネイル */
.park-card .thumb.has-photo { padding: 0; overflow: hidden; }
.park-card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 地図（地理院タイル） */
.park-map { height: 340px; width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
iframe.park-map { display: block; }
.park-map .leaflet-container { font: inherit; }
.map-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) { .park-map { height: 260px; } }

/* 出典ブロック */
.source-block { font-size: 14px; color: var(--ink-2); }
.source-block .info-table th { width: 20%; }

/* 空状態 */
.empty-note {
  background: var(--yellow-100); border: 1px dashed var(--yellow-500);
  border-radius: var(--radius); padding: 14px 16px; font-size: 14px;
}

/* ============ ページネーション ============ */
.pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 22px 0 6px; }
.pager button, .pager span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fff; color: var(--ink); cursor: pointer; font-size: 14px;
}
.pager button[disabled] { color: #ccd2d4; cursor: default; }
.pager .is-current { background: var(--green-900); border-color: var(--green-900); color: #fff; font-weight: 700; }
.pager-note { text-align: center; font-size: 14px; color: var(--muted); }

/* ============ フッター（top3.png 準拠） ============ */
/* design/IMG の素材を使う。フッター上に丘の帯、地はスカラップ縁つきの薄緑 */
.footer-hill {
  margin-top: 40px;
  margin-bottom: -4vw;
  line-height: 0;
  background: url("../img/brand/footer-hill.webp") bottom center/100% 100% no-repeat;
  height: 21vw;
}
.site-footer { position: relative; background: var(--footer-bg); padding: 0 0 18px; }
/* 上端のスカラップ（丸い縁）。素材の縁が細いのでCSSで大きめに描く */
.site-footer::before {
  content: ""; display: block; height: clamp(16px, 2vw, 26px);
  background: var(--footer-bg);
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 98%, transparent 100%)
                repeat-x 0 0 / clamp(32px, 4vw, 52px) 100%;
          mask: radial-gradient(circle at 50% 100%, #000 98%, transparent 100%)
                repeat-x 0 0 / clamp(32px, 4vw, 52px) 100%;
}
.site-footer > .wrap { padding-top: 26px; }
/* フッターは見出しでグループ分けせず、全項目を同じ階層で並べる */
.footer-body { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 28px 40px; }
@media (max-width: 800px) { .footer-body { grid-template-columns: 1fr; } }

.footer-nav ul {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 24px;
}
@media (max-width: 1000px) { .footer-nav ul { grid-template-columns: repeat(2, 1fr); } }
/* SPでも項目を省略せず、PCと同じリンクをすべて1カラムで表示する（仕様書 前提条件） */
@media (max-width: 560px) { .footer-nav ul { grid-template-columns: 1fr; } }

.footer-nav a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink); text-decoration: none;
  padding: 9px 2px; border-bottom: 1px dotted #d5ded1;
  min-height: 44px;                 /* 6-8: タップ領域 */
}
.footer-nav a:hover { color: var(--green-700); }
.footer-nav a svg { color: var(--green-600); flex: none; }
.footer-lead { font-size: 14px; color: var(--ink-2); margin: 12px 0 16px; }
.footer-brand .brand-logo { height: 52px; }
.sns-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.sns-list { display: flex; gap: 12px; }
.sns-list a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green-700); color: #fff;
  display: grid; place-items: center;
}
.sns-list a:hover { background: var(--green-600); }
.copyright { text-align: center; font-size: 14px; color: var(--ink-2); margin-top: 10px; }

/* ============ TOP ============ */
/* 写真を背景に敷き、左にクリーム色のブロブ枠を重ねる（カンプ top1.png） */
.hero { position: relative; background: linear-gradient(180deg, #eaf3fb, #dff0e0); overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
}
.hero-inner {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  min-height: 460px; display: flex; align-items: center; padding: 40px 16px;
}
/* ブロブ枠は周囲に木・鳥・音符の絵が入っているので、文字は内側の余白に収める。
   背景は 100% 100% で伸縮させ、文字量が変わっても枠からはみ出さないようにする。 */
/* 枠の幅を基準（cqw）に文字を組む。枠が伸縮しても比率が変わらず崩れない */
.hero-copy {
  position: relative;
  z-index: 1;
  width: min(598px, 100%);
  container-type: inline-size;
  padding: 5% 6% 5% 14%;
  /* 枠の画像は 1200×800（3:2）。箱を同じ比率にしておけば引き伸ばされない。
     min-height の % は「高さ」に対する割合なので使えない。aspect-ratio で持つ */
  aspect-ratio: 3 / 2;
  /* 縦中央に寄せる。align-items を指定しないとバッジやボタンが横いっぱいに伸びる */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: url("../img/brand/hero-frame.webp") center/100% 100% no-repeat;
  transform: translateX(-9%);
}
/* 1023px以下では白い枠の画像を敷かない。
   幅が狭くなると枠が間延びして、文字とのバランスが崩れるため */
@media (max-width: 1023px) {
  .hero-copy { background: none; }
}
.hero h1 {
  font-size: clamp(20px, 12cqw, 59px);
  margin: .15em 0;
  line-height: 1.4;
}
.hero-badge { font-size: clamp(11px, 3.9cqw, 17px); padding: .35em 1.3em; }
.hero p {
  font-size: clamp(11px, 3.7cqw, 16px);
  margin-bottom: 1.2em;
  line-height: 1.75;
  margin-top: 0;
}
.hero .btn-cta { font-size: clamp(12px, 4.4cqw, 19px); padding: .85em 1.9em; }
.hero .btn-cta svg { width: 1.15em; height: 1.15em; }
@media (max-width: 800px) {
  .hero-inner { min-height: 0; padding: 44px 10px 24px; justify-content: center; }
  .hero-copy { padding: 0% 13% 8%; }
  .hero-photo { object-position: 69% center; }
  /* 枠が無いぶん、説明文だけ白を薄く敷いて写真から浮かせる */
  .hero p { background: rgba(255,255,255,0.5); width: fit-content; padding: 10px; }
  /* 写真の上のベールは使わない。説明文の白背景だけで読ませる */
  .hero::after { display: none; }
}
.hero-badge {
  display: inline-block; background: var(--yellow-400); color: var(--ink);
  border-radius: var(--radius-pill); font-weight: 700; white-space: nowrap;
}
.hero h1 { letter-spacing: .09em; }
/* 「公園」は白抜きの箱ではなく、緑の文字を少し大きくして目立たせる */
.hero h1 .boxed {
  color: var(--green-600);
  border-radius: 0;
  padding: 0;
  font-size: 110%;
}
.hero p { color: var(--ink-2); }
.hero-art {
  background: var(--cream-2); border-radius: var(--radius-l);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  color: var(--green-800); text-align: center; padding: 20px; font-size: 14px;
}

/* ============ TOPの検索パネル（カンプ top2.png 準拠） ============ */
.search-panel {
  margin: -34px auto 0; position: relative;
  border-radius: 22px; padding: 8px 26px 22px; box-shadow: var(--shadow);
}
.sp-sec { border: 0; padding: 18px 0; margin: 0; }
.sp-sec + .sp-sec { border-top: 1px solid var(--line-2); }
.sp-head {
  display: flex; align-items: center; gap: 9px; padding: 0;
  font-size: 18px; font-weight: 700; color: var(--green-600); margin-bottom: 14px;
}
.sp-ico { display: inline-flex; color: var(--green-600); }
.sp-ico.is-star { color: var(--yellow-500); }
.sp-ico svg { width: 24px; height: 24px; }
.sp-note { font-size: 14px; color: var(--muted); margin: 12px 0 0; }

/* エリア行：セレクト2つ＋検索ボタンを1行に */
.area-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; }
@media (max-width: 780px) { .area-row { grid-template-columns: 1fr; } }
.sel-wrap { position: relative; }
.sel-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: 14px 42px 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); font-size: 15px; color: var(--ink); cursor: pointer;
}
.sel-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.btn-search {
  background: var(--green-800); color: #fff; border-radius: 12px;
  padding: 14px 34px; font-size: 16px; white-space: nowrap;
}
.btn-search svg { width: 19px; height: 19px; }

.facet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
@media (max-width: 760px) { .facet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .facet-grid { grid-template-columns: 1fr; } }

/* オススメ度 / オススメ年齢 は枠付きカード */
.sp-cards { margin-top: 4px; }
.sp-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0;
}
.sp-card .sp-head { font-size: 16px; margin-bottom: 10px; }
.rating-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rating-row label { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.rating-row .stars { color: var(--star); }
.age-grid { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (max-width: 520px) { .age-grid { grid-template-columns: 1fr; } }
.q-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
@media (max-width: 600px) { .q-row { grid-template-columns: 1fr; } }
.q-row input { padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .column-grid { grid-template-columns: 1fr; } }
.column-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); }
.column-card .ph { background: var(--cream-2); aspect-ratio: 16/9; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.column-card .body { padding: 14px 16px 18px; }
.column-card h3 { font-size: 16px; margin-bottom: 6px; }
/* p の既定マージンが本文パディングに足されて、画像の下が空きすぎていた */
.column-card .date { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
/* 画像を包む a が inline のままだと、行の高さぶん下に隙間ができる */
.column-card > a { display: block; line-height: 0; }

/* ============ 本文へスキップ（6-8 ランドマーク） ============ */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--green-900); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-s); text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ============ お気に入り（S-28） ============ */
.fav-btn {
  width: 44px; height: 44px; flex: none;   /* 6-8: タップ領域 最小44px */
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--muted);
}
.fav-btn:hover { color: #e26d7f; border-color: #f0c2ca; }
.fav-btn.is-on { color: #e26d7f; border-color: #e26d7f; background: #fff1f3; }
.fav-btn.is-on svg { fill: currentColor; }

/* ============ モーダル ============ */
.modal-back {
  position: fixed; inset: 0; z-index: 300; background: rgba(20, 32, 20, .45);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  background: #fff; border-radius: var(--radius-l); padding: 24px;
  max-width: 460px; width: 100%; box-shadow: var(--shadow);
}
.modal h2 { font-size: 18px; color: var(--green-700); margin-bottom: 10px; }
.modal p { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ 情報募集中（S-03d） ============ */
.recruit-box {
  border: 2px dashed var(--green-100); background: var(--green-50);
  border-radius: var(--radius-l); padding: 20px; text-align: center;
}
.recruit-box h2 { font-size: 17px; color: var(--green-800); margin-bottom: 6px; }
.recruit-box p { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.recruit-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--green-100); background: var(--green-50);
  border-radius: var(--radius); padding: 14px 18px; margin-top: 20px;
  font-size: 14px; color: var(--green-800); text-decoration: none;
}
.recruit-banner:hover { background: var(--green-100); }
.badge-data {
  display: inline-block; background: var(--yellow-100); color: var(--alert);
  border: 1px solid var(--yellow-500); border-radius: var(--radius-s);
  padding: 2px 10px; font-size: 14px; font-weight: 700;
}

/* 再確認待ちの注意（仕様メモ 9-3 情報の陳腐化 / 9-4 能登エリア） */
.recheck-box {
  border: 1px solid var(--yellow-500); background: var(--yellow-100);
  border-radius: var(--radius); padding: 14px 16px;
}
.recheck-box strong { display: block; color: var(--alert); font-size: 14.5px; margin-bottom: 4px; }
.recheck-box p { margin: 0; font-size: 14px; color: var(--ink-2); }
.chip-recheck { background: var(--yellow-100); border-color: var(--yellow-500); color: var(--alert); }
.chip-age { background: #eef4fd; border-color: #c9ddf7; color: #1c4e8a; }

/* 自動生成のデータ要約（人が書いた公園メモとは見た目で区別する） */
.data-summary { background: #fafbf9; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.data-summary dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 14px; }
.data-summary dt { color: var(--muted); }
.data-summary dd { margin: 0; }
.data-summary .unknown { color: var(--alert); }
.data-summary .gen-note { font-size: 14px; color: var(--muted); margin: 10px 0 0; }

/* 近くの施設（緯度経度から計算） */
.nearby-list li {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin-bottom: 6px;
}
.near-dist {
  flex: none; background: var(--green-50); color: var(--green-800);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: 14px; font-weight: 700;
}

/* 人気条件（S-29 注記6） */
.popular-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.popular-grid a {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 14px 8px; text-align: center; font-size: 14px;
  text-decoration: none; color: var(--ink); display: grid; gap: 6px; place-items: center;
}
.popular-grid a:hover { border-color: var(--green-600); color: var(--green-700); }
.popular-grid svg { color: var(--green-600); }

/* ============ SP固定タブメニュー ============ */
.sp-tabs { display: none; }
@media (max-width: 700px) {
  /* 項目数が変わっても等分になるようにする（5列固定だと右に寄っていた） */
  .sp-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--green-900); color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* アイコンと文字を**横に並べて**高さを詰める。
     縦積み60pxは画面を取りすぎていた（2026-09-06 ユウキ指摘） */
  .sp-tabs a {
    flex: 1 1 0; min-width: 0;
    min-height: 44px; display: flex; flex-direction: row;
    align-items: center; justify-content: center; gap: 5px;
    font-size: 13px; line-height: 1.2; color: #fff; text-decoration: none;
    /* 仕切りは白を薄く。地の緑に対して線が沈まないように */
    border-left: 1px solid rgba(255,255,255,.28);
    padding: 8px 6px;
  }
  /* 文字がはみ出す狭い端末では、ラベルを折らずに省略する */
  .sp-tabs a > :not(span) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sp-tabs a:first-child { border-left: 0; }
  .sp-tabs a:active { background: rgba(255,255,255,.14); }
  .sp-tabs a span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: none; line-height: 1; color: #fff;
  }
  .sp-tabs a span svg { width: 100%; height: 100%; display: block; }
  /* 白抜きなので、フォーカスの枠も白にする */
  .sp-tabs a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
  body { padding-bottom: 48px; }
}
@media (max-width: 380px) {
  /* これ以上狭いと横並びでも文字が入らない。アイコンだけにする */
  .sp-tabs a > :not(span) { display: none; }
  .sp-tabs a { gap: 0; }
}

.notice-strip {
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--radius); padding: 12px 16px; font-size: 14px; color: var(--ink-2);
}


/* ============================================================
   固定ページと投稿フォーム
   ============================================================ */
.doc { max-width: 780px; margin: 0 auto 60px; line-height: 1.9; }
/* ほかの固定ページはパンくず（padding 12px 0 4px）がヘッダーとの間を空けてくれるが、
   送信完了ページのようにパンくずが無いページは見出しがヘッダーに張り付いてしまう。
   .wrap の最初の子が本文のときだけ、その分の余白を足す */
.wrap > .doc:first-child { padding-top: 34px; }
@media (max-width: 600px) { .wrap > .doc:first-child { padding-top: 22px; } }
.doc h2 { font-size: 20px; margin: 34px 0 12px; padding-left: 12px;
  border-left: 5px solid var(--green-600, #237a41); }
.doc h3 { font-size: 16.5px; margin: 22px 0 8px; }
.doc p, .doc li { font-size: 15.5px; }
.doc ul { margin: 10px 0 10px 1.3em; }
.doc li { margin-bottom: 6px; }
.doc-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.doc-table th, .doc-table td { border: 1px solid var(--line, #e2e6dc);
  padding: 10px 14px; text-align: left; font-size: 16px; vertical-align: top; }
.doc-table th { background: var(--cream-2, #f6f8f1); width: 34%; white-space: nowrap; }
.doc-date { margin-top: 28px; font-size: 14px; color: var(--ink-2); }
mark.todo { background: #ffe9a8; color: #7a5a00; padding: 2px 8px; border-radius: 4px;
  font-size: 14px; font-weight: 700; }

/* フォーム */
.pf { margin-top: 8px; }
.pf-h { font-size: 19px; margin: 34px 0 10px; padding-left: 12px;
  border-left: 5px solid var(--green-600, #237a41); }
.pf-row { margin: 16px 0; }
.pf-row > label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.pf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .pf-2col { grid-template-columns: 1fr; } }
.pf input[type=text], .pf input[type=email], .pf input[type=month],
.pf input[type=date], .pf select, .pf textarea {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line, #e2e6dc); border-radius: 10px; background: #fff;
}
.pf textarea { resize: vertical; line-height: 1.8; }
/* 日付は横幅いっぱいだと間延びするので、カレンダーが出る幅にとどめる */
.pf-date { max-width: 260px; }
/* プルダウンであることが分かるように、右に山形を置く */
.pf select {
  appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23237a41' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.pf input:focus, .pf select:focus, .pf textarea:focus {
  outline: 3px solid #bcd9c4; outline-offset: 1px; border-color: var(--green-600, #237a41); }
.pf-help { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.7; }
.req { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 4px;
  background: #d9483f; color: #fff; font-size: 14px; font-weight: 700; vertical-align: middle; }
.pf-check label { display: block; font-weight: 400; font-size: 15px; cursor: pointer; }
.pf-check input { margin-right: 8px; transform: scale(1.25); }
.pf-warn { background: #fff4e5; border: 1px solid #f0c9a0; border-radius: 10px; padding: 14px; }

/* チェックのチップ */
.pf-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--line, #e2e6dc); border-radius: 999px;
  background: #fff; font-size: 14.5px; }
.pf-chip:has(input:checked) { background: #eaf5ec; border-color: var(--green-600, #237a41);
  font-weight: 700; }
.pf-chip input { margin: 0; }

/* 写真 */
.pf-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin: 10px 0; }
.pf-photo { position: relative; aspect-ratio: 4 / 3; }
.pf-photo-drop {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  border: 2px dashed var(--line, #cfd6c6); border-radius: 12px;
  background: var(--cream-2, #f6f8f1); overflow: hidden;
}
/* 素のファイル入力（「ファイルを選択」の枠）を絶対に見せない。
   枠いっぱいに広げて透明にし、これ自体を押す場所にする。
   clip-path で画面外に飛ばす書き方だと、端末によって枠が残ることがあった */
.pf-photo-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  opacity: 0; cursor: pointer; font-size: 0; color: transparent;
  z-index: 2;                     /* ラベルと写真より前に置いて、押す場所にする */
}
.pf-photo-input::-webkit-file-upload-button { display: none; }
.pf-photo-input::file-selector-button { display: none; }
.pf-photo-drop:hover { border-color: var(--green-600, #237a41); background: #eaf5ec; }
/* キーボードで選べることが分かるように、入力欄にフォーカスが来たら枠を光らせる */
.pf-photo-drop:has(.pf-photo-input:focus-visible) {
  outline: 3px solid #bcd9c4; outline-offset: 2px; border-color: var(--green-600, #237a41);
}
.pf-photo-label { font-size: 14px; color: var(--ink-2); pointer-events: none; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }
/* ×は枠の内側に置く。外に出すと隣の枠と重なる */
.pf-photo-del {
  /* 透明な入力欄より前に出す。でないと×が押せない */
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; z-index: 3;
  border-radius: 50%; border: none; background: rgba(40,40,40,.72); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.pf-photo-del:hover { background: #222; }
.pf-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 10px 20px; border: 2px solid var(--green-600, #237a41); border-radius: 999px;
  background: #fff; color: var(--green-600, #237a41); font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; }
.pf-add:hover { background: #eaf5ec; }
.pf-add:disabled { opacity: .4; cursor: not-allowed; }
.pf-count { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }

/* 自動投稿よけ。画面には出さないが、読み上げからも外す */
.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pf-submit { margin: 30px 0 10px; text-align: center; }
.pf-submit .btn { min-width: 220px; font-size: 17px; padding: 14px 30px; }
.pf-status { text-align: center; font-size: 14px; color: var(--ink-2); }


/* 記事ページ（便利グッズ特集など） */
.article h1 small { display: block; font-size: 17px; font-weight: 500; margin-top: 6px;
  color: var(--ink-2); }
.pr-note { background: var(--cream-2, #f6f8f1); border: 1px solid var(--line, #e2e6dc);
  border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--ink-2);
  line-height: 1.8; margin: 16px 0 24px; }
.toc { background: var(--cream-2, #f6f8f1); border-radius: 12px; padding: 18px 22px;
  margin: 24px 0; }
.toc-title { font-weight: 700; margin: 0 0 8px; font-size: 15px; }
.toc ol { margin: 0 0 0 1.2em; }
.toc li { margin-bottom: 4px; font-size: 16px; }
.tip { background: #eaf5ec; border-left: 4px solid var(--green-600, #237a41);
  padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 14.5px; margin: 14px 0; }
.aff-box { border: 1px solid var(--line, #e2e6dc); border-radius: 12px;
  padding: 14px 18px; margin: 16px 0; background: #fff; }
.aff-label { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; font-weight: 700; }
.aff-link { display: inline-block; margin: 0 10px 6px 0; padding: 9px 18px;
  border-radius: 999px; background: #bf0000; color: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 700; }
.aff-link:hover { background: #9c0000; }
.check-table th { white-space: nowrap; width: 22%; }


/* 見出しのアイコン。設備アイコン（.fac-img）も同じ大きさに揃える。
   行の高さ（1.7）のぶんアイコンが上にずれるので、箱の大きさを決めて中央に置く */
.sp-ico, .section-title > span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; line-height: 1;
}
.sp-ico svg, .section-title > span:first-child svg { width: 100%; height: 100%; display: block; }
.sp-ico .fac-img, .section-title > span:first-child .fac-img {
  width: 100%; height: 100%; display: block;
}
.section-title, .sp-head { line-height: 1.4; }

/* サイドバー下のコラムバナー */
.side-banner {
  display: block; margin-top: 18px; border-radius: var(--radius-l); overflow: hidden;
  line-height: 0; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .15s, box-shadow .15s;
}
.side-banner img { width: 100%; height: auto; display: block; }
.side-banner:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* TOPのコラムカード */
.column-card img { width: 100%; height: auto; display: block; }
.column-card h3 a { color: var(--green-700); text-decoration: none; }
.column-card h3 a:hover { text-decoration: underline; }


/* ============================================================
   追従フッターの「検索」で下からせり上がる絞り込み（SPのみ）
   サイドバーの #side-form をそのままここへ動かして使う。
   同じフォームを移動させるので、入力した条件が二重にならない。
   ============================================================ */
.search-sheet { position: fixed; inset: 0; z-index: 200; }
.search-sheet-back {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .25s ease;
}
.search-sheet-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream); border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.search-sheet.is-open .search-sheet-back { opacity: 1; }
.search-sheet.is-open .search-sheet-body { transform: translateY(0); }
/* つまみ */
.search-sheet-body::before {
  content: ""; display: block; width: 44px; height: 5px; margin: -6px auto 12px;
  border-radius: 3px; background: var(--line);
}
.search-sheet-close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
  border: none; border-radius: 50%; background: #fff; color: var(--ink-2);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.search-sheet-inner > .panel { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .search-sheet-body, .search-sheet-back { transition: none; }
}

@media (max-width: 700px) {
  /* SPではサイドバーの絞り込みを出さない。追従フッターの「検索」から開く。
     同じ内容が2か所にあると、どちらを触ったか分からなくなるため（2026-08-11 ユウキ指定） */
  .layout > aside > #side-form { display: none; }
}
@media (min-width: 701px) {
  /* PCでは追従フッター自体を出していないので、シートも使わない */
  .search-sheet { display: none; }
}


/* 楽天アフィリエイトの貼り付けコード。
   幅504px固定の table 組みなので、そのまま置くとSPで横にはみ出す。
   中身は触らず（規約上そのまま貼るため）、外側から上書きして収める */
.aff-card { margin: 20px 0; }
.aff-card > table,
.aff-card > table > tbody,
.aff-card > table > tbody > tr,
.aff-card > table > tbody > tr > td { display: block; width: 100%; }
.aff-card > table > tbody > tr > td > div {
  width: 100% !important; max-width: 504px; box-sizing: border-box; margin: 0 auto !important;
}
.aff-card table table { width: 100%; }
.aff-card table table td { vertical-align: top; }
/* 「楽天で購入」ボタンは float で組まれているので、親で回り込みを解除する */
.aff-card table table td > div { overflow: hidden; }
.aff-card img { display: inline-block; max-width: 100%; height: auto; }
.aff-card a { color: var(--green-700); }
@media (max-width: 560px) {
  /* 画像と説明を縦に積む */
  .aff-card table table,
  .aff-card table table tbody,
  .aff-card table table tr,
  .aff-card table table td { display: block; width: auto !important; }
  .aff-card table table td:first-child { text-align: center; }
}


/* 表はSPだと2列が窮屈になる（見出し列に幅を取られて本文が1行3〜4文字になる）。
   縦に積んで、見出しを帯、中身を全幅にする */
@media (max-width: 600px) {
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td {
    display: block; width: 100% !important;
  }
  .doc-table thead { display: none; }
  .doc-table tr + tr { margin-top: -1px; }
  .doc-table th {
    background: var(--cream-2); border-bottom: 0; padding: 8px 14px;
    font-size: 15px; white-space: normal;
  }
  .doc-table td { border-top: 0; padding: 12px 14px; }
}

/* 持ち物チェックリスト。「／」区切りだと折り返しが読みにくいので、
   区切りの前で行を分ける */
.check-table td { line-height: 2; }
.check-table td .item { display: inline-block; white-space: nowrap; }
.check-table td .sep { color: var(--muted); margin: 0 2px; }


/* 記事のアイキャッチ */
.article-eyecatch { margin: 0 0 22px; border-radius: var(--radius-l); overflow: hidden; }
.article-eyecatch img { width: 100%; height: auto; }


/* 記事の頭に置くPR表示。ステマ規制で「広告であることを明瞭に」示す必要があるため、
   詳しい説明は記事末尾に置きつつ、ここでラベルだけ先に出す */
/* ここは本文ではなく表示義務のラベルなので、14px下限の例外として12pxにする
   （2026-08-11 ユウキ指定）。目立たせすぎず、でも読める濃さに留める */
.pr-badge {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 16px; font-size: 12px; color: var(--muted);
}
.pr-badge span {
  flex: none; padding: 1px 8px; border-radius: 4px;
  background: #eceee9; color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: .06em;
}

/* 記事末尾の注記（アフィリエイトの表示・価格の但し書き） */
.article-note {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.9; color: var(--muted);
}

/* 元が小さい写真（神奈川県オープンデータの320x240など）。
   引き伸ばすと粗さが目立つので原寸のまま中央に置き、そうと分かる一言を添える
   （2026-08-23 ユウキ合意） */
.gallery-small .gallery-main { text-align: center; background: var(--bg-sub, #f4f4f4); padding: 12px 0; }
.gallery-small .gallery-main img { width: 320px; max-width: 100%; height: auto; }
.gallery-small .photo-note { margin-top: 6px; font-size: 13px; color: var(--muted, #666); }


/* TOPの「収録エリア」。市区町村が779もあって一列では探せないので、
   都道府県のリンクにした（2026-09-02 ユウキ指摘） */
.pref-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.pref-links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pref-links a,
.pref-links .noslug {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 14px;
  text-decoration: none;
  line-height: 1.2;
}
.pref-links a:hover,
.pref-links a:focus-visible {
  background: var(--green-100);
  border-color: var(--green-600);
}
.pref-links span {
  font-size: 12px;
  color: var(--muted);
}
.pref-links .noslug {
  opacity: .6;
}


/* 横スクロール防止の保険。どこか1要素が幅を超えても、ページ全体は横に伸びない */
html, body { overflow-x: hidden; }


/* よくある質問（公園ページ）。JSON-LD の FAQPage と同じ内容を出す */
.faq { margin: 0; }
.faq dt {
  font-weight: 600; color: var(--green-700);
  margin-top: 14px; line-height: 1.5;
}
.faq dt::before { content: 'Q. '; }
.faq dd { margin: 4px 0 0; padding-left: 1.6em; text-indent: -1.6em; line-height: 1.7; }
.faq dd::before { content: 'A. '; color: var(--ink-2); }