/* 園えらびのじじつ ─ 一覧・検索ページの様式
 *
 * 配色・書体・角丸・余白は site/templates/v2.3-reference.html（園ページの正本）から
 * そのまま持ってきている。**ここで新しい色や書体を作らない。**
 * 園ページと一覧が同じ世界に見えることが、このサイトの信頼の一部になっている。
 *
 * 【言葉の絶対規律】人を測る語彙を使わない。測るのは環境・条件・園の行動であって、人ではない。
 * 【並びの規律】募集の長い順に並べない（ランキングにしない）。既定は五十音順。
 */

/* ── 設計トークン（v2.3 正本からの引き写し。値を変えない） ───────────── */
:root{
  --paper:oklch(97.5% 0.008 40); --paper-2:oklch(95.3% 0.013 40); --card:oklch(99.3% 0.004 40);
  --ink:oklch(27% 0.015 40); --ink-2:oklch(46% 0.02 40); --ink-3:oklch(62% 0.015 40);
  --rule-strong:oklch(30% 0.015 40); --rule:oklch(88% 0.012 40);
  --accent:oklch(52% 0.17 20); --accent-soft:oklch(94.5% 0.03 20);
  --leaf:oklch(93% 0.03 140);
  --focus:oklch(52% 0.17 20);
  --font-display:"Hiragino Maru Gothic ProN","Zen Maru Gothic","Yu Gothic",sans-serif;
  --font-body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --font-data:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:40px; --sp-2xl:64px;
  --radius:16px; --radius-sm:10px; --ease-out:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:oklch(21% 0.012 40); --paper-2:oklch(24% 0.014 40); --card:oklch(25.5% 0.014 40);
    --ink:oklch(93% 0.008 40); --ink-2:oklch(72% 0.014 40); --ink-3:oklch(56% 0.014 40);
    --rule-strong:oklch(88% 0.01 40); --rule:oklch(34% 0.014 40);
    --accent:oklch(72% 0.13 20); --accent-soft:oklch(31% 0.045 20); --leaf:oklch(32% 0.04 140); --focus:oklch(72% 0.13 20);
  }
}
:root[data-theme="dark"]{
  --paper:oklch(21% 0.012 40); --paper-2:oklch(24% 0.014 40); --card:oklch(25.5% 0.014 40);
  --ink:oklch(93% 0.008 40); --ink-2:oklch(72% 0.014 40); --ink-3:oklch(56% 0.014 40);
  --rule-strong:oklch(88% 0.01 40); --rule:oklch(34% 0.014 40);
  --accent:oklch(72% 0.13 20); --accent-soft:oklch(31% 0.045 20); --leaf:oklch(32% 0.04 140); --focus:oklch(72% 0.13 20);
}
:root[data-theme="light"]{
  --paper:oklch(97.5% 0.008 40); --paper-2:oklch(95.3% 0.013 40); --card:oklch(99.3% 0.004 40);
  --ink:oklch(27% 0.015 40); --ink-2:oklch(46% 0.02 40); --ink-3:oklch(62% 0.015 40);
  --rule-strong:oklch(30% 0.015 40); --rule:oklch(88% 0.012 40);
  --accent:oklch(52% 0.17 20); --accent-soft:oklch(94.5% 0.03 20); --leaf:oklch(93% 0.03 140); --focus:oklch(52% 0.17 20);
}

/* ── 土台（園ページと同じ） ───────────────────────────────── */
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:14.5px; line-height:1.95; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); font-style:normal; line-height:1.45; text-wrap:balance; margin:0}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.tnum{font-family:var(--font-data); font-variant-numeric:tabular-nums}
.wrap{max-width:680px; margin:0 auto; padding:0 var(--sp-lg)}
.src{font-size:11px; color:var(--ink-3)}
.src a{color:var(--ink-3)}
.crumbs{font-size:11.5px; color:var(--ink-3); margin:0 0 var(--sp-sm)}
.crumbs a{color:var(--ink-3)}

nav{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); max-width:680px; margin:0 auto; padding:var(--sp-md) var(--sp-lg)}
.mark{font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); text-decoration:none}
.mark b{color:var(--accent)}
.back{font-size:13px; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.back:hover{color:var(--ink)}

.ch{display:flex; align-items:baseline; gap:11px; padding-bottom:9px; border-bottom:2.5px solid var(--rule-strong)}
.ch .no{font-family:var(--font-data); font-size:11px; color:var(--accent); font-weight:700; letter-spacing:.1em}
.ch h2{font-size:19px; font-weight:800}
.ch-lead{color:var(--ink-2); font-size:12.5px; margin:10px 0 0; max-width:36em}

footer{border-top:2.5px solid var(--rule-strong); margin-top:var(--sp-xl); padding:var(--sp-xl) 0 var(--sp-2xl); background:var(--paper-2)}
footer p{color:var(--ink-2); font-size:12.5px; max-width:42em; margin:0 0 6px}
footer .fine{color:var(--ink-3); font-size:11px}

/* ── 見出し ─────────────────────────────────────────── */
.ix-hero{padding:var(--sp-lg) 0 var(--sp-lg)}
.ix-hero h1{font-size:24px; font-weight:800; word-break:auto-phrase}
.ix-hero .meta{color:var(--ink-2); font-size:13px; margin:4px 0 0}
.ix-hero .lead{color:var(--ink-2); font-size:13.5px; margin:var(--sp-md) 0 0; max-width:38em}

/* 件数の要約タイル（園ページの .keyfacts と同じ様式） */
.ix-counts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:var(--sp-md)}
.ix-counts .kf{background:var(--card); border:1.5px solid var(--rule); border-radius:var(--radius-sm); padding:10px 12px; color:var(--ink)}
.ix-counts .k{display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em}
.ix-counts .v{display:block; font-family:var(--font-display); font-weight:800; font-size:15px; line-height:1.4; margin-top:1px}
.ix-counts .v .tnum{font-size:16px}
.ix-counts .n{display:block; font-size:10.5px; color:var(--ink-3); font-weight:400; margin-top:1px}
@media (max-width:414px){ .ix-counts{grid-template-columns:repeat(2,1fr)} }

/* ── 地域・市区町村のリンク群 ───────────────────────────── */
.region{margin-top:var(--sp-lg)}
.region h3{font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:8px}
.linkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:8px}
.linkgrid a{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  background:var(--card); border:1.5px solid var(--rule); border-radius:var(--radius-sm);
  padding:9px 13px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:13.5px}
.linkgrid a:hover{border-color:var(--accent)}
.linkgrid a .c{font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:400; font-size:11.5px; color:var(--ink-3)}

/* ── 読みかた（ものさしと、あてはまらない場合） ─────────────── */
.howto{margin-top:var(--sp-md); background:var(--accent-soft); border-radius:var(--radius-sm); padding:14px 16px}
.howto p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.85}
.howto p + p{margin-top:6px}
.howto b{font-family:var(--font-display); color:var(--ink)}
.howto details{margin-top:8px}
.howto summary{cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--accent)}
.howto .why{margin:6px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.85}

/* ── 絞り込み ───────────────────────────────────────── */
/* 画面に貼り付けない。条件のかたまりは700px近くあり、固定すると
   スマホの表示領域をほぼ占領して**下端が永久に見えなくなる**
   （2026-08-06、実測715px対 実効約650-700px。「スクロールが二重で最後まで読めない」）。
   絞り込みは一覧の先頭にあるので、貼り付けなくても迷わない。 */
.filters{margin-top:var(--sp-md); padding:12px 0 10px;
  background:var(--paper); border-bottom:1px solid var(--rule)}
.filters .fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:8px}
.filters label{display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; margin-bottom:2px}
.filters select,.filters input[type="search"]{
  width:100%; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  background:var(--card); border:1.5px solid var(--rule); border-radius:var(--radius-sm);
  padding:8px 11px; -webkit-appearance:none; appearance:none}
.filters select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:28px}
/* ならびかえ。既定は園名のよみの五十音順で、開いた直後は必ずその並び。
   選んだときの説明（末尾にまとまる園の数・全国のものさし）は、
   件数の脇ではなく、選ぶこの場所に置く。 */
.filters .fsort{margin-top:8px}
.filters .fsort select{max-width:340px}
.filters .snote{margin:6px 0 0; font-size:11px; color:var(--ink-2); line-height:1.7}
.filters .snote[hidden]{display:none}
.filters .fbar{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px; font-size:12px; color:var(--ink-2)}
.filters .fbar .n{font-family:var(--font-data); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:700}
.filters .reset{background:none; border:0; padding:0; font:inherit; font-size:12px; color:var(--accent); cursor:pointer; text-decoration:underline}
.filters .reset[hidden]{display:none}

/* 条件の絞り込み（チェックボックス）。**「記載のない園は出ません」を、
   件数の脇ではなく、条件を選ぶこの場所に置く**（docs/search-design.md）。 */
.ffacets{margin-top:16px; background:var(--card); border:1.5px solid var(--rule);
  border-radius:var(--radius-sm); padding:13px 15px}
.ffacets .fttl{margin:0 0 4px; font-family:var(--font-display); font-weight:800;
  font-size:13px; color:var(--ink)}
.ffacets .fnote{margin:0 0 10px; font-size:11px; color:var(--ink-2); line-height:1.7}
/* 園の種類と開所時間は別の軸。見出しで分ける（一列に混ぜない）。 */
.ffacets .fgrp + .fgrp{margin-top:12px; padding-top:12px; border-top:1px solid var(--rule)}
.ffacets .fgh{margin:0 0 7px; font-family:var(--font-display); font-weight:800;
  font-size:11.5px; color:var(--ink); letter-spacing:.04em}
.ffacets .fgh span{margin-left:8px; font-family:var(--font-body); font-weight:400;
  font-size:11px; color:var(--ink-3); letter-spacing:0}
/* 見た目は園ページの .chips（ピル・未選択は破線）にそろえる。
   四角いチェックボックスを並べると申請書の顔になり、このサイトの言語から外れる。 */
.ffacets .fchk{display:inline-flex; align-items:center; gap:6px; margin:0 6px 6px 0;
  background:var(--card); border:1.5px dashed var(--rule); border-radius:999px;
  padding:5px 13px; font-size:12.5px; color:var(--ink-2); cursor:pointer;
  transition:border-color .12s var(--ease-out), background .12s var(--ease-out)}
/* チェックボックスは残す（キーボード・支援技術のため）が、目には出さない */
.ffacets .fchk input{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.ffacets .fchk .c{font-family:var(--font-data); font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--ink-3)}
.ffacets .fchk:hover{border-color:var(--ink-3)}
.ffacets .fchk:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.ffacets .fchk:has(input:checked){border-style:solid; border-color:var(--accent);
  background:var(--accent-soft); color:var(--ink); font-weight:700}
.ffacets .fchk:has(input:checked) .c{color:var(--accent)}
.filters .share{margin:6px 0 0; font-size:12px}
.filters .share[hidden]{display:none}

/* 条件ページの前置き（母数と、記載のない園が出ないこと） */
.caveat{margin-top:var(--sp-md); background:var(--accent-soft); border-radius:var(--radius-sm); padding:14px 16px}
.caveat p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.85}
.caveat b{font-family:var(--font-display); color:var(--ink)}
.caveat .why{margin-top:6px; font-size:12.5px; color:var(--ink-2)}

/* ── 検索フォーム（地方 → 都道府県 → 市区町村） ───────────── */
.sf{margin-top:var(--sp-md); background:var(--card); border:1.5px solid var(--rule);
  border-radius:var(--radius); padding:14px 16px}
.sf .sf-h{margin:0 0 8px; font-family:var(--font-display); font-weight:800; font-size:12.5px; color:var(--ink)}
.sf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:8px}
.sf label{display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; margin-bottom:2px}
.sf select,.sf input[type="search"]{width:100%; min-width:0; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--radius-sm);
  padding:8px 11px; -webkit-appearance:none; appearance:none}
.sf select{padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.sf .sf-q{margin-top:8px}
.sf .sf-more{margin-top:10px}
.sf .sf-more summary{cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--accent)}
.sf .sf-note{margin:8px 0 0; font-size:11px; color:var(--ink-2); line-height:1.7}
.sf .sf-note b{color:var(--ink)}
.sf-facets{margin-top:8px}
.sf .sf-f{display:inline-flex; align-items:center; gap:5px; margin:0 6px 6px 0;
  background:var(--paper); border:1.5px solid var(--rule); border-radius:999px;
  padding:5px 11px 5px 9px; font-size:12.5px; color:var(--ink); cursor:pointer}
.sf .sf-f input{margin:0; accent-color:var(--accent)}
.sf .sf-f span{display:inline}
.sf .sf-f:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.sf-bar{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap}
.sf .sf-go{flex:0 0 auto; font-family:var(--font-display); font-weight:800; font-size:13.5px; color:var(--card);
  background:var(--accent); border:1.5px solid var(--accent); border-radius:var(--radius-sm); padding:9px 20px; cursor:pointer}
.sf .sf-go:hover{opacity:.9}
.sf .sf-reset{background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--accent); cursor:pointer; text-decoration:underline}
.sf .sf-hint{margin:8px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.75}
.sf .sf-hint a{color:var(--ink-2)}
@media (max-width:414px){
  .sf{padding:12px 14px}
  .sf-grid{grid-template-columns:1fr}
}

/* ── 園のリスト ─────────────────────────────────────── */
/* 1施設＝1枚のカード。ひとつの箱に行を詰めると、施設の境目の線と、
   施設の中の線が同じ太さで並び、**どこで切れているのか分からなくなる**
   （2026-08-07 ユーザー指摘）。pickleballnavi の施設カード仕様と同じく、
   余白で切り、カード全体をリンクにする。 */
.list{list-style:none; margin:var(--sp-md) 0 0; padding:0; display:grid; gap:10px;
  background:none; border:0}
.list li{background:var(--card); border:1.5px solid var(--rule);
  border-radius:var(--radius-sm); overflow:hidden}
.list li:hover{border-color:var(--accent)}
.row{display:block; padding:13px 16px; text-decoration:none; color:var(--ink)}
.row:hover{background:var(--paper-2)}
/* カードの様式は pickleballnavi の施設カード仕様に合わせる（28b-facility-card-spec.md）。
   要点: 名前がカード内で最大 / 種別はチップ1つ / 事実はラベル付きの2カラムで
   改行の暴れを止める / overflow-wrap:anywhere は使わず ellipsis で切る。 */
.row .nm{display:block; font-family:var(--font-display); font-weight:800; font-size:16.5px;
  line-height:1.45; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.row .mt .chip{display:inline-block; font-size:11px; font-weight:700; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:999px;
  padding:1px 9px; margin-right:7px; white-space:nowrap}
.row .fg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 14px; margin-top:7px}
.row .fg-i{display:flex; align-items:baseline; gap:7px; min-width:0; font-size:12px}
.row .fg-i b{flex:0 0 3.2em; font-weight:400; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em}
.row .fg-i > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-data); font-variant-numeric:tabular-nums; color:var(--ink-2)}
.row .mt{display:block; font-size:11.5px; color:var(--ink-2); margin-top:4px}
.row .mt i{font-style:normal; color:var(--ink-3)}
.row .hire{border-top:1px dashed var(--rule); padding-top:7px}
/* 募集の状態。園ページの近隣カード（.nb .s）と同じ見た目にそろえる */
.row .hire{display:block; font-size:12px; color:var(--ink-2); margin-top:7px}
.row .hire i{font-style:normal; display:inline-block; vertical-align:middle; width:56px; height:4px; border-radius:2px; background:var(--paper-2); position:relative; margin:0 7px 0 0}
.row .hire i em{position:absolute; top:50%; width:8px; height:8px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%)}
.row .hire i u{position:absolute; top:-3px; bottom:-3px; width:1.5px; background:var(--ink-3); text-decoration:none}
.row .hire b{color:var(--ink)}
.row .hire .say{display:block; font-size:11px; color:var(--ink-3); margin-top:1px}
.row .facts{display:block; font-size:11.5px; color:var(--ink-3); margin-top:5px}
.row .facts span + span::before{content:"・"; color:var(--rule)}

.more{display:block; width:100%; margin-top:var(--sp-md); padding:11px 0;
  background:var(--card); border:1.5px solid var(--rule); border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); cursor:pointer}
.more:hover{border-color:var(--accent)}
.more[hidden]{display:none}
.empty{margin:var(--sp-md) 0 0; padding:18px 16px; background:var(--card);
  border:1.5px dashed var(--rule); border-radius:var(--radius-sm); font-size:13px; color:var(--ink-2)}
.empty[hidden]{display:none}
.list-foot{margin-top:10px}

.section{padding:var(--sp-xl) 0 0}
.section-tight{padding:var(--sp-lg) 0 0}

@media (max-width:414px){
  .row{padding:12px 14px}
  .row .nm{font-size:14.5px}
}