:root{
  --bg:#fff7ec;
  --card:#ffffff;
  --ink:#3a3230;
  --ink-soft:#7c726c;
  --line:#efe3d4;
  --accent:#ff8a3d;
  --accent-ink:#e7641a;
  --shadow:0 6px 20px rgba(120,80,40,.10);
  --radius:18px;
  --maxw:1080px;
  /* カテゴリ色 */
  --c-美術館:#8E44AD; --c-博物館:#6C3483; --c-科学館:#2980B9; --c-水族館:#17A2B8;
  --c-動物園:#E67E22; --c-公園:#27AE60; --c-運動公園:#16A085; --c-プール:#3498DB;
  --c-鉄道:#C0392B; --c-横断:#7F8C8D; --c-県外:#F39C12; --c-体験:#EC407A; --c-商業施設:#E84393;
  --c-自然体験:#0E7490; --c-ワークショップ:#6C5CE7; --c-市政だより:#34495E;
  --c-文化施設:#8D6E63; --c-ホール:#5B6C9E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"M PLUS Rounded 1c",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% -8%,#ffe9cf 0,transparent 38%),
                   radial-gradient(circle at 92% 0%,#ffe2e6 0,transparent 34%);
}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(14px,4vw,28px)}

/* ---- header ---- */
.site-header{padding:clamp(22px,5vw,40px) 0 10px; text-align:center}
.site-header h1{
  font-family:"Zen Maru Gothic",serif; font-weight:900;
  font-size:clamp(26px,6vw,44px); margin:.1em 0 .15em; letter-spacing:.01em;
  color:#3a3230; text-wrap:balance;
}
.site-title{margin:.1em 0 .25em; line-height:0}
.site-title img{width:min(480px,88vw); height:auto}
.tagline{margin:.2em auto .5em; color:var(--ink-soft); font-weight:500; max-width:30em}
.meta{font-size:.86rem; color:var(--ink-soft); font-weight:500}
.meta b{color:var(--accent-ink)}

/* ---- controls ---- */
.controls{
  position:sticky; top:0; z-index:20; margin-top:14px;
  background:transparent; backdrop-filter:blur(6px);
  padding:14px 0 12px; border-bottom:2px dashed var(--line);
}
/* スマホ用フィルタ開閉ボタン（PCでは非表示） */
.filter-toggle{display:none}
.search-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
#q{
  flex:1 1 260px; min-width:0; font:inherit; font-size:1rem;
  padding:12px 16px; border:2px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink); box-shadow:var(--shadow);
}
#q:focus{outline:none; border-color:var(--accent)}
.kid-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  padding:10px 16px; background:#fff; border:2px solid var(--line); border-radius:999px;
  font-weight:700; box-shadow:var(--shadow); white-space:nowrap;
}
.kid-toggle input{accent-color:var(--accent); width:18px; height:18px}
.kid-toggle:has(input:checked){border-color:var(--accent); background:#fff3e8; color:var(--accent-ink)}

.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{
  font:inherit; font-weight:700; font-size:.9rem; cursor:pointer;
  padding:7px 14px; border-radius:999px; border:2px solid var(--line);
  background:#fff; color:var(--ink-soft); transition:.15s;
}
.chip:hover{transform:translateY(-1px)}
.chip.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}
#catChips .chip.is-on{background:var(--cat,#555); border-color:var(--cat,#555); color:#fff}
.chip .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--cat,#bbb)}
.datepick{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.86rem; color:var(--ink-soft); background:#fff; border:2px solid var(--line); border-radius:999px; padding:4px 12px}
.datepick input[type=date]{font:inherit; border:none; background:transparent; color:var(--accent-ink); font-weight:700}
.datepick input[type=date]:focus{outline:none}

.result-count{font-weight:700; color:var(--ink-soft); margin:16px 2px 8px}

/* ---- 予約受付中ストリップ ---- */
.reserve-strip{
  margin:18px 0 4px; padding:14px 14px 6px;
  background:linear-gradient(180deg,#fff5ea,#fffdfb);
  border:2px solid #ffe0c2; border-radius:16px; box-shadow:var(--shadow);
}
.reserve-title{
  margin:0 2px 10px; font-size:1.04rem; font-weight:800; color:var(--accent-ink);
  font-family:"Zen Maru Gothic",serif;
}
.reserve-sub{font-size:.74rem; font-weight:700; color:var(--ink-soft); margin-left:6px}
.reserve-row{
  display:flex; gap:12px; overflow-x:auto; padding:2px 2px 12px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.reserve-row::-webkit-scrollbar{height:8px}
.reserve-row::-webkit-scrollbar-thumb{background:#f0d6bd; border-radius:999px}
.rcard{
  flex:0 0 210px; scroll-snap-align:start; display:flex; flex-direction:column; gap:7px;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--cat,#ccc);
  border-radius:12px; padding:11px 12px; box-shadow:var(--shadow);
}
.rcard .rtop{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.rcard .rdeadline{
  font-size:.76rem; font-weight:800; color:#b25b12;
  background:#fff1e2; padding:2px 9px; border-radius:999px;
}
.rcard .rdeadline.soon{color:#fff; background:#e7641a}
.rcard .rmethod{
  font-size:.7rem; font-weight:800; color:#6b5ad0; background:#efeaff;
  padding:2px 8px; border-radius:999px;
}
.rcard h3{
  margin:0; font-size:.9rem; font-weight:700; line-height:1.34;
  font-family:"Zen Maru Gothic",serif;
}
.rcard h3 a{color:inherit; text-decoration:none}
.rcard h3 a:hover{text-decoration:underline; text-decoration-color:var(--accent)}
.rcard .rdate{font-size:.78rem; font-weight:700; color:var(--ink-soft); margin-top:auto}

/* カード内の予約1行 */
.rline{font-size:.8rem; font-weight:800; border-radius:8px; padding:3px 9px; align-self:flex-start}
.rline.open{color:#b25b12; background:#fff1e2}
.rline.up{color:#2563a8; background:#e8f1fb}
.rline.closed{color:#8a8079; background:#f1ece5}
.rline.free{color:#2f8a54; background:#e9f6ee}

/* ---- grid / cards ---- */
.grid{
  display:grid; gap:16px; padding-bottom:30px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.card{
  position:relative; display:flex; flex-direction:column; gap:9px;
  background:var(--card); border-radius:var(--radius); padding:16px 16px 15px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  border-top:6px solid var(--cat,#ccc); transition:.16s;
}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(120,80,40,.16)}
.card .cat{
  align-self:flex-start; font-size:.74rem; font-weight:800; letter-spacing:.03em;
  color:#fff; background:var(--cat,#999); padding:3px 10px; border-radius:999px;
}
.card .date{font-weight:800; color:var(--accent-ink); font-size:.92rem}
.card .date .ico{margin-right:4px}
.card h3{
  margin:0; font-size:1.04rem; font-weight:700; line-height:1.4;
  font-family:"Zen Maru Gothic",serif;
}
.card h3 a{color:inherit; text-decoration:none}
.card h3 a:hover{text-decoration:underline; text-decoration-color:var(--accent)}
.card .src{font-size:.83rem; color:var(--ink-soft); font-weight:500; margin-top:auto}
.card .tags{display:flex; gap:6px; flex-wrap:wrap}
.card .tag{font-size:.72rem; font-weight:700; color:#7c726c; background:#f6efe6; padding:2px 8px; border-radius:6px}
.card .kid{position:absolute; top:12px; right:12px; font-size:.72rem; font-weight:800; color:#e7641a; background:#fff3e8; padding:2px 8px; border-radius:999px}

.empty{text-align:center; color:var(--ink-soft); font-weight:700; padding:46px 10px}

/* ---- footer / health ---- */
.site-footer{padding:18px 0 50px; color:var(--ink-soft)}
details#health{background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 16px; box-shadow:var(--shadow)}
details#health summary{cursor:pointer; font-weight:800; padding:8px 0}
.health-body{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px 16px; padding:8px 0 14px; font-size:.84rem}
.health-row{display:flex; justify-content:space-between; gap:8px; border-bottom:1px dotted var(--line); padding:3px 0}
.health-row .n{font-weight:800}
.health-row.zero .n{color:#b9a89a}
.health-row.fail .n{color:#C0392B}
.health-row.stale .n{color:#C9922B}  /* 前回データ表示中（取得は失敗したが直近データで代替）*/
.note{font-size:.8rem; margin-top:16px; text-align:center}

/* 情報源募集カード */
.submit-card{background:#fff; border:2px dashed var(--accent); border-radius:16px; padding:16px 18px; margin-top:14px; box-shadow:var(--shadow)}
.submit-card h2{font-family:"Zen Maru Gothic",serif; font-size:1.05rem; margin:.1em 0 .35em; color:var(--accent-ink)}
.submit-card > p{margin:.2em 0 .7em; font-size:.9rem; color:var(--ink)}
.submit-form{display:flex; flex-direction:column; gap:8px; margin-top:10px; max-width:520px}
.submit-form input,.submit-form select,.submit-form textarea{font:inherit; padding:9px 12px; border:2px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%}
.submit-form input:focus,.submit-form select:focus,.submit-form textarea:focus{outline:none; border-color:var(--accent)}
.submit-form .hp{display:none}
#sfSubmit{
  font:inherit; font-weight:800; cursor:pointer; align-self:flex-start;
  color:#fff; background:linear-gradient(135deg,#ffa052,#ff7a2e);
  border:none; border-radius:999px; padding:11px 28px;
  box-shadow:0 6px 16px rgba(231,100,26,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
#sfSubmit:hover{transform:translateY(-2px); box-shadow:0 11px 22px rgba(231,100,26,.36)}
#sfSubmit:active{transform:translateY(0)}
#sfSubmit:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none}
.submit-msg{font-weight:700; font-size:.88rem; margin:2px 0 0}
.submit-msg.ok{color:#27AE60}
.submit-msg.err{color:#C0392B}

/* スマホ: controls をトグルで開閉（PCとは別デザイン） */
@media (max-width:640px){
  /* 不透明にして開いたパネルが記事に透けないように（同色なので馴染む） */
  .controls{background:var(--bg); backdrop-filter:none}
  /* 開いたパネルはカテゴリが多くて画面より高くなるので、パネル内スクロールで全項目に届くようにする */
  .controls.open{
    box-shadow:0 14px 24px rgba(120,80,40,.16);
    border-bottom:none; border-radius:0 0 16px 16px;
    max-height:calc(100dvh - 12px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }
  .filter-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
    font:inherit; font-weight:800; cursor:pointer; color:var(--accent-ink);
    padding:11px 16px; border:2px solid var(--line); border-radius:999px;
    background:#fff; box-shadow:var(--shadow);
  }
  .filter-toggle .chev{transition:transform .2s}
  /* スクロール中もトグルを上に固定して開閉しやすく */
  .controls.open .filter-toggle{position:sticky; top:0; z-index:2; background:var(--bg)}
  .controls.open .filter-toggle .chev{transform:rotate(180deg)}
  .filter-body{display:none; margin-top:12px}
  .controls.open .filter-body{display:block}
  /* 検索窓は大きめ・全幅で */
  #q{flex:1 1 100%; font-size:1.02rem; padding:13px 16px}
  /* カテゴリは2列グリッドで整列（全幅ピルで押しやすく・見やすく） */
  #catChips{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  #catChips .chip{text-align:left; padding:10px 12px}
}

@media (max-width:480px){
  .grid{grid-template-columns:1fr 1fr; gap:11px}
  .card{padding:13px 12px}
  .card h3{font-size:.95rem}
  .kid-toggle{flex:1 1 100%; justify-content:center}
}