/* 地図と一覧の画面 (map.html)。build_app.py が site/main.css に写す。
   配色と寸法の決まりは静的なページ (style.css) と同じ (設計書 15 章):
   墨と白が基本。藍 (--brand) は押せるもの・選んでいるもの・「上回る」。朱は自宅の印だけ。影は地図の上に浮く部品だけ。
   文字の大きさは --fs-1〜6 の 6 段 (入力欄だけ 16px)、角丸は --r-s・--r-m・--r-l の 3 段と丸。 */
:root {
  /* 墨 (青みのない灰)。前の青灰 (#4a505a など) は、よくある既定の灰とほぼ同じ値だった */
  --ink: #22211e;
  --ink-2: #4c4a45;
  --ink-3: #66635d;
  --line: #e5e3de;          /* 飾りの区切り線 */
  --line-2: #d9d6d0;
  --edge: #8c8982;          /* 入力欄・ボタン・印の輪郭 (白地で 3.5:1) */
  --wash: #f5f4f1;          /* 紙。クリーム色に寄せすぎない */
  --bg: #ffffff;
  --brand: #27467f;         /* 藍 */
  --brand-2: #223a70;       /* 紺 (押したとき・フォーカス) */
  --brand-wash: #e0e9f6;
  --brand-on-dark: #a9c0ec;
  --home: #d4502b;          /* 朱。自宅の印だけ (文字には使わない) */
  --tie: #f8b500;           /* 山吹。「同じ」の印 (輪郭つき) */
  --tie-text: #8a6100;
  --warn: #8a3319;          /* 赤錆。注意の文字と印。朱と役割を分ける */
  /* 地図と一覧の印の色 (前回の最低指数との比較)。main.js が地図に描くときもここを読む */
  --st-ok: var(--brand);
  --st-tie: var(--tie);
  --st-ng-ring: var(--edge);
  --st-na: var(--edge);
  --st-full: #dcd9d3;
  --st-full-ring: var(--edge);
  --st-none: var(--ink);
  --route: var(--brand);
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 22px;
  --fs-6: 32px;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --panel: 400px;
  --top-h: 116px;
  --float: 0 1px 2px rgba(29, 33, 37, .06), 0 6px 20px rgba(29, 33, 37, .10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
  color-scheme: light;
}

/* 文字を大きく (メニューの「文字の大きさ」)。地図の画面は指での拡大を止めているので、その代わり */
html.t-large { --fs-1: 14px; --fs-2: 15px; --fs-3: 17px; --fs-4: 19px; --fs-5: 24px; --fs-6: 34px; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
/* 画面全体の拡大 (指 2 本・すばやい 2 回押し) を止める。iOS は maximum-scale を無視して拡大でき、拡大すると
   上の帯や一覧が画面の外にずれて戻しにくい。地図の拡大・縮小は MapLibre が自分で受ける (地図の上の touch-action は none)。
   body は動かない台にし、入力欄を押したときにページ全体がずれないようにする */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; }
body { position: fixed; inset: 0; width: 100%; touch-action: pan-x pan-y; }
body {
  font-family: var(--font);
  font-feature-settings: "palt";
  font-size: var(--fs-3);
  color: var(--ink);
  background: var(--wash);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: .01em;
  word-break: auto-phrase;     /* 日本語の文を、語の切れ目で折り返す */
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
a { color: var(--brand); }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { display: block; width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .tm b, .lh-o b, .hero b, .rk { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "palt"; }
.dot { margin: 0 6px; color: var(--line-2); }
.logo { width: 33px; height: 22px; flex: none; color: var(--brand); }

/* ---------- 地図 ---------- */
#map { position: fixed; inset: 0; background: #f1efea; }
.maplibregl-ctrl-group { border-radius: var(--r-m) !important; box-shadow: var(--float) !important; }
.maplibregl-ctrl-bottom-right { bottom: calc(var(--sheet-h, 0px) + 4px); }
.nomap #map { display: none; }
/* 地図の絵が出るまで、読み込み中であることを出す (回線が遅いと灰色のまま数秒かかる) */
.map-msg { display: none; }
.map-wait .map-msg {
  position: absolute; z-index: 1; left: 50%; top: calc(var(--top-h) + (100% - var(--top-h) - var(--sheet-h, 0px)) / 2);
  transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-m); background: rgba(255, 255, 255, .92); box-shadow: var(--float);
  font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.map-msg i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 番号のピンは地図の中 (main.js の pins レイヤー) に描く。名前の吹き出しだけここで整える */
.pin-pop .maplibregl-popup-content { padding: 6px 10px; border-radius: var(--r-s); background: var(--ink); color: #fff; font: 600 var(--fs-2)/1.35 var(--font); box-shadow: 0 4px 14px rgba(29, 33, 37, .25); }
.pin-pop .maplibregl-popup-tip { border-top-color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
.pin-pop { pointer-events: none; }
.placing #map .maplibregl-canvas { cursor: crosshair; }
.mk-me {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--home);
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(212, 80, 43, .18), 0 2px 8px rgba(29, 33, 37, .3);
  cursor: grab;
}
.mk-me:active { cursor: grabbing; }

/* 一覧や詳細で使う、地図と同じ形の印 (自宅・駅・職場) */
.mk { flex: none; display: inline-grid; place-items: center; font-style: normal; }
.mk.home { width: 12px; height: 12px; border-radius: 50%; background: var(--home); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(212, 80, 43, .25); }
.mk.eki, .mk.work { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-1); font-weight: 700; line-height: 1; }

/* ---------- 上の帯: 検索と条件 ---------- */
#top {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
  pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand, .menu-b { display: none; }
.sbox { position: relative; }
#search {
  display: flex; align-items: center;
  height: 48px; padding: 0 4px 0 14px;
  background: var(--bg); border-radius: var(--r-l);
  box-shadow: var(--float);
}
.s-ico { color: var(--ink-3); margin-right: 10px; display: none; }
.s-ico svg, .s-btn svg { width: 20px; height: 20px; }
#q {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: none; outline: none;
  font: 500 16px/1 var(--font); color: var(--ink); letter-spacing: .01em;
  -webkit-appearance: none; appearance: none;
}
#q::placeholder { color: var(--ink-3); font-weight: 400; }
#q::-webkit-search-cancel-button { display: none; }
.s-btn { position: relative; width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center; color: var(--ink-2); }
.s-btn:hover { background: var(--wash); }
.s-menu { margin-left: -8px; margin-right: 2px; }
.s-filter.on { color: var(--brand); }
.f-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font: 700 var(--fs-1)/18px var(--font); font-style: normal; text-align: center; }
.s-filter .f-count { position: absolute; top: 2px; right: 1px; }

#suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  max-height: min(60vh, 480px); overflow-y: auto;
  background: var(--bg); border-radius: var(--r-l); box-shadow: var(--float);
  padding: 6px 0;
}
.sg {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; text-align: left; min-height: 52px;
}
.sg[aria-selected="true"], .sg:hover { background: var(--wash); }
.sg-i { width: 32px; height: 32px; border-radius: 50%; background: var(--wash); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.sg[aria-selected="true"] .sg-i, .sg:hover .sg-i { background: #fff; }
.sg.station .sg-i { background: var(--ink); color: #fff; }
.sg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-t b { font-size: var(--fs-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-t small { font-size: var(--fs-1); color: var(--ink-3); }
.sg.chomes { cursor: default; align-items: flex-start; }
.sg.chomes .sg-i { margin-top: 2px; }
.cn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cn-b { min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--edge); font-size: var(--fs-3); font-weight: 600; }
.cn-b:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cn em { font-style: normal; font-size: var(--fs-2); color: var(--ink-3); margin-left: 2px; }
.sg-none { padding: 14px 16px; font-size: var(--fs-3); font-weight: 600; }
.sg-none small { display: block; margin-top: 4px; font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }

/* 条件のチップ: 年齢・指数・範囲 (スマホでは絞り込みは検索欄の右) */
.chips {
  display: flex; gap: 6px; margin: 8px -12px 0; padding: 0 12px 10px;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; position: relative;
  display: flex; align-items: center;
  height: 40px; border-radius: var(--r-m);
  background: var(--bg); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(29, 33, 37, .06), 0 2px 8px rgba(29, 33, 37, .10);
  font-size: var(--fs-2); font-weight: 600; white-space: nowrap;
}
.chip .dd-t, .chip select {
  -webkit-appearance: none; appearance: none;
  height: 100%; border: 0; border-radius: inherit; background: transparent;
  font: inherit; color: inherit; letter-spacing: inherit;
  padding: 0 22px 0 10px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%235f6670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 14px;
}
.chip .dd-t { display: flex; align-items: center; white-space: nowrap; text-align: left; }
.chip .dd-t:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.chip.on { background: var(--brand-wash); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent), 0 2px 8px rgba(29, 33, 37, .08); }
.chip.num { padding: 0 5px 0 10px; gap: 6px; cursor: text; }
.chip.num span { color: var(--ink-2); }
.chip.on.num span { color: var(--brand); }
.chip.num input {
  width: 50px; height: 34px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--ink); text-align: left;
  font: 700 16px/1 var(--font); outline: none;
}
.chip.num:focus-within { box-shadow: inset 0 0 0 2px var(--brand-2); }
.chip.num input::placeholder { color: var(--ink-3); font-weight: 400; font-size: var(--fs-2); }
.chip.num.bad { box-shadow: inset 0 0 0 2px var(--warn); }
.chip.fbtn { display: none; gap: 6px; padding: 0 14px 0 12px; }
.chip.fbtn svg { color: var(--ink-2); }
.chip.fbtn.on svg { color: var(--brand); }
.searching .chips, .searching .tip { visibility: hidden; }
/* 指数の欄の下の一言 */
.tip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: max-content; max-width: 100%;
  margin: -2px 0 8px; padding: 8px 12px; border-radius: var(--r-m);
  background: var(--bg); box-shadow: var(--float); font-size: var(--fs-2); color: var(--ink-2);
}
.tip a { font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; }
.tip.err { color: var(--warn); font-weight: 600; }

/* ---------- 下のシート (スマホ) ---------- */
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column;
  max-height: calc(100% - var(--top-h) - 8px);
  background: var(--bg);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -1px 0 rgba(29, 33, 37, .04), 0 -8px 28px rgba(29, 33, 37, .12);
  transition: height .32s cubic-bezier(.2, .8, .2, 1);
}
#sheet[data-size="start"] { height: 42%; height: 42dvh; }
#sheet[data-size="peek"] { height: 48%; height: 48dvh; }
#sheet[data-size="mid"] { height: 58%; height: 58dvh; }   /* 園の詳細: 時間・募集予定・最低指数・申込倍率・定員までが最初の画面に入る高さ (2026-11-15) */
#sheet[data-size="full"] { height: calc(100% - var(--top-h) - 8px); height: calc(100dvh - var(--top-h) - 8px); }
.searching #sheet { visibility: hidden; }
.searching.sg-empty #sheet { visibility: visible; }
.grab { flex: none; width: 100%; height: 32px; margin-bottom: -8px; display: grid; place-items: center; touch-action: none; }
.grab i { width: 36px; height: 5px; border-radius: 3px; background: var(--line-2); }
#body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + 16px); -webkit-overflow-scrolling: touch; }

/* ---------- 起点を選ぶ前: 駅の索引 ---------- */
.start { padding: 2px 20px 8px; }
.s-brand { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: -4px 0 8px; font-size: var(--fs-2); font-weight: 700; color: var(--ink); text-decoration: none; }
.here {
  width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-m); background: var(--bg); color: var(--brand); box-shadow: inset 0 0 0 1px var(--edge);
  font-size: var(--fs-3); font-weight: 600;
}
.here:hover { background: var(--brand-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.sec { font-size: var(--fs-2); font-weight: 700; color: var(--ink-2); letter-spacing: .04em; margin: 24px 0 0; }
.ln h3 { display: flex; align-items: center; gap: 6px; margin: 14px 0 2px; font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.ln-c { flex: none; width: 4px; height: 1.2em; border-radius: 2px; }   /* 路線の色の帯 (build_site.LINE_COLOR) */
.stns { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -8px; }
/* 駅の索引はトップ・駅の一覧と同じ形: 駅の名前と、徒歩 15 分以内の園の数。0 園の駅は薄く (押しても園が無いことが分かるように) */
.stns button {
  display: inline-flex; align-items: baseline; min-height: 44px; padding: 11px 8px; border-radius: var(--r-s);
  font-size: var(--fs-3); font-weight: 500; color: var(--ink); white-space: nowrap;
}
.stns button small { margin-left: 4px; font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.stns button.zero { color: var(--ink-3); font-weight: 400; }
.stns button:hover { background: var(--wash); color: var(--brand); }
.hint { display: flex; align-items: center; gap: 6px; margin: 20px 0 4px; font-size: var(--fs-2); color: var(--ink-3); }
.hint svg { width: 14px; height: 14px; }
.hint .t-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .hint .t-mouse { display: inline; } .hint .t-touch { display: none; } }

/* ---------- 一覧 ---------- */
.shared { display: flex; justify-content: space-between; gap: 12px; margin: 0 20px 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--brand-wash); font-size: var(--fs-2); font-weight: 600; color: var(--brand); }
.lhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 2px 20px; }
/* 見出しは「希望順位の」と「下書き」の間 (wbr) でだけ折り返す。前は「希望順位の下／書き」と切れた */
.lhead h2 { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.lh-o { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0 16px 6px 20px; font-size: var(--fs-2); color: var(--ink-2); white-space: normal; }
.lh-o > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
.lh-o .mk { margin-right: 0; }
.lh-o .mk.eki { width: 18px; height: 18px; font-size: 11px; }
.lh-o .n b { color: var(--ink); margin-right: 1px; }
.lh-o .link { min-height: 32px; margin-left: auto; font-size: var(--fs-1); }
.lhead h2 { font-size: var(--fs-4); font-weight: 700; line-height: 1.35; }
.lhead h2 .mk { display: inline-grid; margin-right: 6px; vertical-align: -1px; }
.lhead h2 .mk.eki { width: 20px; height: 20px; vertical-align: 1px; }
.lh-o .n { margin-left: 4px; white-space: nowrap; }
.via-row .fix { margin: 0; }
.fix { flex: none; min-height: 40px; margin: -10px 0 -10px 6px; padding: 0 4px; font-size: var(--fs-2); font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(43, 100, 71, .35); }
.fix:hover { text-decoration-color: currentColor; }
.tools { display: flex; align-items: center; gap: 6px; flex: none; }
.tbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border-radius: var(--r-m);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--edge);
  font-size: var(--fs-2); font-weight: 600; white-space: nowrap; color: var(--ink);
}
.tbtn:hover, .ibtn:hover { background: var(--wash); }
.tbtn i { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #fff; box-shadow: 0 0 0 2px var(--bg); font: 700 var(--fs-1)/18px var(--font); font-style: normal; text-align: center; }
.ibtn { width: 40px; height: 40px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--edge); display: grid; place-items: center; color: var(--ink-2); }
.via-row { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px 20px; }
.via { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.via span { flex: none; }
.via .dd { flex: 1; min-width: 0; display: flex; }
.via .dd-t {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 40px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 30px 0 12px;
  border: 0; border-radius: var(--r-m); background-color: var(--wash); font: 600 var(--fs-2)/1 var(--font); color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%235f6670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 0 20px 6px; font-size: var(--fs-2); color: var(--ink-2); }
.keys span { display: inline-flex; align-items: center; gap: 4px; }
.keys .keys-l { color: var(--ink-3); }
.keys b { color: var(--ink); font-weight: 700; }
.keys .link { min-height: 40px; padding: 0 2px; }

.rk {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font: 700 var(--fs-1)/1 var(--font); font-style: normal;
  background: var(--ink-2); color: #fff;      /* 指数を入れる前は濃い灰の丸 (下回るの白い丸と見分ける。地図のピンも同じ) */
}
.rk.ok { background: var(--st-ok); color: #fff; box-shadow: none; }
.rk.tie { background: var(--st-tie); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.rk.ng { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--st-ng-ring); }
.rk.na, .rk.full { background: var(--st-full); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--st-full-ring); }
.rk.rest { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.rk.empty { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line); }
.rk.mini { width: 10px; height: 10px; font-size: 0; }
.rk.mini.ng { box-shadow: inset 0 0 0 1.5px var(--st-ng-ring); }
.rk.lg { width: 30px; height: 30px; font-size: var(--fs-2); margin-right: 10px; vertical-align: 3px; }
.rk.sm { width: 24px; height: 24px; }

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 32px; column-gap: 12px; align-items: center;
  padding: 0 4px 0 18px; min-height: 64px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.row:hover { background: #fbfaf8; }
.rm { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 0; text-align: left; align-self: stretch; justify-content: center; }
.nm { font-size: var(--fs-3); font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-2); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.sb > * { flex: none; }
.sb .bs { color: var(--ink); }
.sb .kd { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
.mn { color: var(--ink); font-weight: 600; }
.mn i { font-style: normal; margin-left: 2px; }
.mn.ok { color: var(--brand); }
.mn.tie { color: var(--tie-text); }
.mn.ng { color: var(--ink-2); font-weight: 500; }
.mn.na, .mn.full { color: var(--ink-3); font-weight: 500; }
.tm { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.tm > span { display: flex; align-items: baseline; gap: 1px; }
.tm b { font-size: var(--fs-4); font-weight: 700; line-height: 1; }
.tm small { font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.tm small.md { font-size: var(--fs-1); text-align: right; line-height: 1.35; white-space: nowrap; }
.tm small.md { font-weight: 500; color: var(--ink-3); }
.flag { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-right: -4px; padding: 0 6px; height: 20px; border-radius: var(--r-s); background: var(--wash); font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); }
/* 並べ替えの ≡ はいつも見える濃さで出す (薄くすると見つからない) */
.grip { width: 32px; height: 44px; display: grid; place-items: center; color: var(--ink-3); cursor: grab; touch-action: none; }
.grip:hover { color: var(--ink); }
.row.hl { background: #f8f7f4; }
.row.shift { transition: transform .15s ease; }
.row.dragging { position: relative; z-index: 2; box-shadow: 0 8px 24px rgba(29, 33, 37, .16); background: #fff; }
.cut { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--wash); border-bottom: 1px solid var(--line); font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); letter-spacing: .04em; }
.cut::before { content: ""; width: 26px; border-top: 1.5px solid var(--ink); }
.cut.out-cut { background: var(--bg); color: var(--ink-3); letter-spacing: .02em; }
.cut.out-cut::before { border-top: 1.5px dashed var(--edge); }

.sub-h { display: flex; align-items: baseline; gap: 8px; margin: 26px 20px 8px; font-size: var(--fs-2); font-weight: 700; }
.sub-h small { font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.side { border-top: 1px solid var(--line); }
.side-row { grid-template-columns: 26px minmax(0, 1fr) auto 60px; }
.rk.out { width: 10px; height: 10px; margin-left: 8px; background: #b9b5ad; box-shadow: 0 0 0 2px #fff; }
.side-row .nm { color: var(--ink-2); }
.add { height: 40px; margin-right: 8px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--edge); font-size: var(--fs-2); font-weight: 600; color: var(--brand); }
.add:hover { background: var(--brand-wash); }
.no-hit-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.more { display: block; margin: 12px 20px 0; min-height: 44px; font-size: var(--fs-2); font-weight: 600; color: var(--brand); }
.no-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px 20px; font-size: var(--fs-3); }
.fine { margin: 18px 20px 0; font-size: var(--fs-1); line-height: 1.7; color: var(--ink-3); }
.link { color: var(--brand); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fine .link, .fine a { margin-left: 4px; }
.fine + .more { margin-top: 4px; }
.msg { padding: 20px; font-size: var(--fs-3); }

/* ---------- 園の詳細と見直し ---------- */
.detail { padding: 0 20px 4px; }
.d-top { display: flex; align-items: flex-start; gap: 6px; padding: 0 16px 0 12px; }
.detail .d-top { padding: 0; }
.back { flex: none; width: 40px; height: 40px; margin: -6px 0 0 -10px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.back:hover { background: var(--wash); }
.back svg { width: 18px; height: 18px; }
.d-top h2 { font-size: var(--fs-5); font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
.d-top h2.d-name { display: flex; align-items: flex-start; gap: 10px; }
.d-top h2.d-name .rk.lg { margin: 2px 0 0; vertical-align: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.tags span { height: 24px; padding: 0 8px; border-radius: var(--r-s); background: var(--wash); font-size: var(--fs-1); font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; }
.hero { display: flex; align-items: flex-end; gap: 16px; margin-top: 14px; }
.hero b { font-size: var(--fs-5); font-weight: 700; line-height: 1; }
.hero b small { font-size: var(--fs-3); font-weight: 600; margin-left: 1px; }
.track { flex: 1; display: flex; align-items: center; padding-bottom: 2px; min-width: 0; }
.track .mk.home { margin: 0 2px; }
.rk.out-lg { width: 14px; height: 14px; background: #b9b5ad; }
.track u { flex: 1; position: relative; text-decoration: none; text-align: center; line-height: 1; min-width: 44px; }
.track u::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 2px dotted #c8c4bc; }
.track u span { position: relative; background: var(--bg); padding: 0 6px; font-size: var(--fs-2); font-weight: 700; white-space: nowrap; }
.d-sub { margin-top: 12px; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-3); }
.d-sub .dot { margin: 0 4px; }
.route-key { display: inline-block; width: 16px; height: 4px; margin: 0 6px 2px 0; border-radius: 2px; background: var(--brand); vertical-align: middle; }
/* 園の詳細の数字 (2026-11-15): 枠で区切った 3 列をやめ、募集予定を 1 行、最低指数と申込倍率を年ごとに横に並べる。
   今年 (令和8年) の列だけ大きく太く。縦の線は引かず、行の間の細い線だけ */
.nums { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.boshu { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.boshu span { font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.boshu small { margin-left: 8px; font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.boshu b { font-size: var(--fs-5); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.yrs { width: 100%; margin-top: 8px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "palt"; }
.yrs thead th { padding: 0 0 2px; font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); text-align: left; }
.yrs thead th:first-of-type { color: var(--ink); }
.yrs thead td { width: 26%; }
.yrs tbody th { padding: 9px 0; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); text-align: left; }
.yrs td { padding: 9px 4px 9px 0; font-size: var(--fs-3); font-weight: 500; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.yrs td.now { font-size: var(--fs-4); font-weight: 700; color: var(--ink); }
.yrs td.w { font-size: var(--fs-2); }
.yrs td.now.w { font-size: var(--fs-3); }
.yrs tbody tr > * { border-top: 1px solid var(--line); }
.yrs td i { margin-left: 2px; font-style: normal; font-size: var(--fs-1); }
.yrs td.ok { color: var(--brand); }
.yrs td.tie { color: var(--tie-text); }
.yrs td.ng { color: var(--ink-3); }
.yrs-note { margin-top: 2px; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-3); }
.facts-l { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-1); color: var(--ink-3); }
.facts-l span { display: inline-flex; align-items: baseline; }
.facts-l b { margin: 0 2px 0 6px; font-size: var(--fs-3); font-weight: 700; color: var(--ink); }
.empty-c { margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-3); color: var(--ink-2); }
.acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.acts.one { display: grid; grid-template-columns: 1fr; border-top: 0; padding: 0; margin-top: 14px; }
.acts-l { font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.acts-l b { font-size: var(--fs-4); color: var(--ink); margin: 0 2px 0 8px; }
.updown { display: flex; padding: 2px; gap: 2px; border-radius: var(--r-m); background: var(--wash); }
.updown button { width: 44px; height: 40px; border-radius: var(--r-s); display: grid; place-items: center; color: var(--ink); }
.updown button:not(:disabled):hover { background: #fff; box-shadow: 0 1px 3px rgba(29, 33, 37, .12); }
.acts .txt { margin-left: auto; min-height: 40px; padding: 0 4px; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.acts .txt:hover { color: var(--warn); }
.acts.one button { height: 44px; border-radius: var(--r-m); background: var(--brand); color: #fff; font-size: var(--fs-3); font-weight: 600; }
.acts.one button:hover { background: var(--brand-2); }
.detail .more { margin: 6px 0 0; }
.detail .fine { margin: 12px 0 0; }
.info { margin-top: 14px; border-top: 1px solid var(--line); }
.info div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); line-height: 1.6; }
.info dt { color: var(--ink-3); font-weight: 600; }
.info dd { min-width: 0; overflow-wrap: anywhere; }
.info dd a { font-weight: 600; }
.info dd a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 40px; margin: -10px 0 -6px; }
.info .sub-a { display: flex; align-items: center; gap: 4px; width: max-content; min-height: 40px; }
.info dd a svg { width: 12px; height: 12px; }
.info dd small { display: block; font-size: var(--fs-1); color: var(--ink-3); }
.links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 10px 0 2px; }
.ext { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: var(--fs-2); font-weight: 600; color: var(--brand); text-decoration: none; }
.ext svg { width: 14px; height: 14px; }

[data-view="check"] .d-top { padding: 0 20px 14px 20px; align-items: center; }
[data-view="check"] .d-top h2 { font-size: var(--fs-4); }
.strip { display: flex; gap: 4px; padding: 0 20px 18px; }
.strip .rk { width: auto; flex: 1; height: 28px; border-radius: var(--r-s); }
/* 狭い画面では 13 マスを 2 段 (7 と 6) にして、1 マスを押せる大きさにする */
@media (max-width: 479px) {
  .strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .strip .rk { height: 40px; }
}
.notices { border-top: 1px solid var(--line); }
.notices > li { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.notices > li.warn > b::before { content: "注意"; display: inline-flex; align-items: center; height: 20px; margin-right: 8px; padding: 0 6px; border-radius: var(--r-s); background: var(--warn); color: #fff; font-size: var(--fs-1); vertical-align: 2px; }
.notices b { display: block; font-size: var(--fs-3); font-weight: 700; }
.notices p { margin-top: 6px; font-size: var(--fs-2); line-height: 1.7; color: var(--ink-2); }
.n-items { margin: 8px 0 0 -6px; }
.n-items button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: var(--r-s); text-align: left; }
.n-items button:hover { background: var(--wash); }
.n-items .rk { width: 22px; height: 22px; }
.n-items .nm { flex: 1; font-size: var(--fs-3); font-weight: 500; }
.n-items small { font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap; }
.n-act { margin-top: 10px; }

/* ---------- 知らせ ---------- */
#toast {
  position: fixed; z-index: 50; left: 50%; top: calc(var(--top-h) + 6px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100% - 24px);
  padding: 10px 16px; border-radius: var(--r-m);
  background: var(--ink); color: #fff;
  font-size: var(--fs-2); font-weight: 500; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(29, 33, 37, .24);
  animation: rise .2s ease;
}
#toast button { flex: none; min-height: 32px; color: var(--brand-on-dark); font-weight: 700; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -4px); } }

/* ---------- ダイアログ (絞り込み・メニュー) ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; }
.scrim { position: absolute; inset: 0; background: rgba(29, 33, 37, .36); }
.dialog {
  position: relative; width: 100%; max-height: 86%; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: var(--r-l) var(--r-l) 0 0;
  padding: 18px 20px calc(env(safe-area-inset-bottom) + 20px);
}
.dlg-head + * { border-top: 0 !important; }
.dlg-head { position: sticky; top: -18px; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: -18px -20px 12px; padding: 14px 20px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.dlg-head h2 { font-size: var(--fs-4); font-weight: 700; }
.icon-btn { width: 40px; height: 40px; margin-right: -10px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--wash); }
.icon-btn svg { width: 20px; height: 20px; }
.keys-help { display: grid; gap: 10px; padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
.keys-help div { display: flex; align-items: center; gap: 12px; font-size: var(--fs-2); line-height: 1.6; }
.keys-help dd { color: var(--ink-2); }
.keys-help .rk { width: 24px; height: 24px; }
.keys-help.words div { align-items: baseline; }
.keys-help.words dt { flex: none; width: 76px; font-weight: 700; color: var(--ink); }
.help-list { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.help-list li { position: relative; padding-left: 14px; font-size: var(--fs-2); line-height: 1.7; color: var(--ink-2); }
.help-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.help-links { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 12px 0 0; font-size: var(--fs-2); font-weight: 600; }
.help-links a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.dialog .fine { margin: 12px 0 0; }
.menu { display: flex; flex-direction: column; margin: -4px 0 8px; border-top: 1px solid var(--line); }
.menu a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--line); font-size: var(--fs-3); font-weight: 600; color: var(--ink); text-decoration: none; }
.menu a::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); margin-right: 4px; }
.menu a:hover { color: var(--brand); }
.m-sub { margin: 22px 0 10px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.f-sec { padding: 14px 0; border-top: 1px solid var(--line); }
.f-sec h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 10px; font-size: var(--fs-3); font-weight: 700; }
.f-sec h3 small { font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.f-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: var(--fs-2); color: var(--ink-2); }
.f-row .dd-t {
  -webkit-appearance: none; appearance: none; min-width: 150px; height: 44px; text-align: left; padding: 0 34px 0 14px;
  border: 0; border-radius: var(--r-m); background-color: var(--wash); font: 600 16px/1 var(--font); color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%235f6670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggles button { min-height: 40px; padding: 0 14px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--edge); font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.toggles button[aria-pressed="true"] { background: var(--brand-wash); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.toggles button[aria-pressed="true"]::before { content: "✓ "; }
.f-foot { position: sticky; bottom: -20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px -20px -20px; padding: 12px 20px calc(env(safe-area-inset-bottom) + 16px); background: var(--bg); border-top: 1px solid var(--line); }
.f-foot .txt { min-height: 44px; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.f-foot .pri { height: 44px; padding: 0 22px; border-radius: var(--r-m); background: var(--brand); color: #fff; font-size: var(--fs-3); font-weight: 600; }
.f-foot .pri:hover { background: var(--brand-2); }
.noscript { position: fixed; inset: auto 12px 12px; z-index: 70; padding: 12px; background: #fff; border-radius: var(--r-m); }

#print { display: none; }

/* スマホで園の詳細や見直しを開いているときは、条件のチップを隠して地図 (道順) を広く見せる */
body[data-view="detail"] #chips, body[data-view="detail"] .tip,
body[data-view="check"] #chips, body[data-view="check"] .tip { display: none; }
body[data-view="detail"] #top, body[data-view="check"] #top { padding-bottom: 10px; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  #sheet[data-size="peek"] .keys { display: none; }
}

/* ---------- 横に広い画面: 左に一覧、右に地図 ---------- */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  :root { --sheet-h: 0px; }
  body { background: var(--bg); }
  #map { left: var(--panel); }
  .map-wait .map-msg { top: 50%; }
  #top {
    right: auto; width: var(--panel);
    padding: 16px 20px 0;
    background: var(--bg);
    border-right: 1px solid var(--line);
  }
  body[data-view="detail"] #top, body[data-view="check"] #top { padding-bottom: 0; }
  body[data-view="detail"] #chips, body[data-view="check"] #chips { display: grid; }
  .brand { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
  .brand a { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--fs-2); font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .03em; }
  .menu-b { display: flex; }
  .s-menu, .s-filter { display: none; }
  .s-ico { display: grid; }
  .s-brand { display: none; }
  #search { height: 46px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--edge); border-radius: var(--r-m); }
  #search:focus-within { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--brand-2); }
  .s-btn:hover { background: var(--wash); }
  .menu-b { margin-left: auto; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r-m); align-items: center; gap: 4px; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
  .menu-b:hover { background: var(--wash); color: var(--ink); }
  .menu-b svg { width: 18px; height: 18px; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; padding: 0 0 14px; overflow: visible; border-bottom: 1px solid var(--line); }
  .chip { box-shadow: inset 0 0 0 1px var(--edge); }
  .chip.dd .dd-t { width: 100%; padding-left: 12px; }
  .chip.num { padding-left: 12px; justify-content: space-between; }
  .chip.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
  .chip.fbtn { display: flex; justify-content: center; }
  .chip.fbtn .f-count { margin-left: 2px; }
  .tip { box-shadow: inset 0 0 0 1px var(--line-2); margin: 0 0 12px; }
  #suggest { box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(29, 33, 37, .14); }
  #sheet {
    top: var(--top-h); left: 0; right: auto; width: var(--panel);
    height: auto !important; max-height: none !important;
    border-radius: 0; box-shadow: none; border-right: 1px solid var(--line);
    transition: none;
  }
  .grab { display: none; }
  #body { padding-top: 14px; }
  .start { padding-top: 4px; }
  #toast { top: auto; bottom: 28px; left: calc(var(--panel) + (100% - var(--panel)) / 2); }
  /* ダイアログは左の欄の上に重ねる (地図にまたがらない) */
  .modal { place-items: stretch start; }
  .dialog { display: flex; flex-direction: column; width: var(--panel); max-height: none; height: 100%; border-radius: 0; padding: 20px 24px 24px; box-shadow: 8px 0 32px rgba(29, 33, 37, .16); }
  .dialog > * { flex: none; }
  .f-foot { margin-top: auto !important; }
  /* 候補を選んでいるあいだは、地図の前の起点や番号を薄くする (新しい起点はまだ決まっていない) */
  .searching #map::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, .65); pointer-events: none; }
  .f-foot { margin: 6px -24px -24px; padding: 12px 24px 18px; bottom: -24px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --panel: 340px; }
  .brand { display: none; }
  .s-menu { display: grid; }
  .s-ico { display: none; }
  .chips { display: flex; flex-wrap: wrap; overflow: visible; scrollbar-width: none; margin: 8px 0 0; padding-bottom: 10px; gap: 6px; }
  .chip { flex: none; }

  .chip.fbtn { display: none; }
  .s-filter { display: grid; }
  #top { padding-top: 10px; }
  .hero b { font-size: var(--fs-5); }
}
@media (min-width: 1280px) {
  :root { --panel: 420px; }
}

/* ---------- 幅の狭い端末 ---------- */
@media (max-width: 359px) {
  .row { padding-left: 12px; column-gap: 8px; }
  .lhead, .lh-o { padding-left: 16px; }
  .tbtn { padding: 0 10px; }
  .sb { gap: 8px; }
}

/* ---------- 年パス (鍵の付いた所と、案内のダイアログ) ---------- */
.lk { display: inline-grid; place-items: center; color: var(--ink-3); }
.lk svg { width: 13px; height: 13px; }
body:not(.locked) .lk-s { display: none; }
.ibtn { position: relative; }
.ibtn .lk { position: absolute; right: 3px; bottom: 3px; padding: 1px; border-radius: 50%; background: var(--bg); }
.ibtn .lk svg { width: 11px; height: 11px; }
/* 一覧の下の年パスの箱: 裏に 14 位から先の行をぼかして置き、その上に見られる園の数とボタンを重ねる */
.lockbox { position: relative; overflow: hidden; }
.lk-ghost { filter: blur(3px); opacity: .7; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 85%); mask-image: linear-gradient(#000 40%, transparent 85%); }
.lockbox { padding-bottom: 4px; }
.lk-card { position: relative; margin: -150px 16px 0; padding: 16px 18px 14px; border-radius: var(--r-l); background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(29, 33, 37, .14); text-align: center; }
.lk-t { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-3); font-weight: 700; color: var(--ink); }
.lk-t svg { width: 15px; height: 15px; color: var(--ink-2); }
.lk-card ul { margin-top: 8px; text-align: left; }
.lk-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.lk-card li:last-child { border-bottom: 0; }
.lk-card li b { margin: 0 2px; font-size: var(--fs-5); line-height: 1; color: var(--brand); }
.lk-n { margin-top: 6px; font-size: var(--fs-2); color: var(--ink-2); }
.lk-f { margin-top: 8px; font-size: var(--fs-1); color: var(--ink-3); }
.lockbox .pri, .p-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 10px; border-radius: var(--r-m); background: var(--brand); color: #fff; font-size: var(--fs-3); font-weight: 700; text-decoration: none; }
.lockbox .pri:hover, .p-go:hover { background: var(--brand-2); }
.via-lock { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border-radius: var(--r-m); background: var(--wash); font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); text-align: left; }
.via-lock span { line-height: 1.4; }   /* 途中で切らずに折り返す */
.acts .lockt { display: inline-flex; align-items: center; gap: 6px; }
.p-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-4); font-weight: 700; }
.p-price b { font-size: var(--fs-6); font-weight: 700; line-height: 1.2; }
.p-price small { font-size: var(--fs-2); font-weight: 600; color: var(--ink-3); }
.p-list { margin-top: 12px; border-top: 1px solid var(--line); }
.p-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); line-height: 1.6; }
.p-list b { flex: none; width: 7.5em; color: var(--ink); }
.p-list span { color: var(--ink-2); }

/* ---------- 印刷: A4 1 枚の表 ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  body { position: static; overflow: visible; background: #fff; }
  body > * { display: none !important; }
  body > #print { display: block !important; color: #111; font-size: 12px; line-height: 1.6; }
  #print h1 { font-size: 22px; line-height: 1.3; }
  .p-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #111; margin-bottom: 12px; }
  .p-head span { font-size: 13px; font-weight: 700; }
  .p-lines { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
  #print table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.4; }
  #print th { padding: 7px 4px; font-size: 12px; line-height: 1.35; text-align: right; vertical-align: bottom; border-bottom: 1.5px solid #111; white-space: nowrap; }
  #print td { padding: 9px 4px; text-align: right; border-bottom: 1px solid #767676; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #print th.l, #print td.l { text-align: left; }
  #print td.n { font-size: 15px; font-weight: 700; }
  #print td.name { font-weight: 700; white-space: normal; width: 100%; }
  #print td small { display: block; font-size: 12px; font-weight: 400; }
  #print td.memo { min-width: 52px; }
  .p-foot { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #333; }
}

/* スマホでは拡大・縮小のボタンを出さない (指で操作する) */
@media not all and (min-width: 900px) {
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }
}

/* スマホで検索しているあいだは、候補だけの白い画面にする */
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  .searching #top { bottom: auto; height: var(--vvh, 100%); background: var(--bg); }
  .searching #search { box-shadow: inset 0 0 0 1.5px var(--brand-2); }
  .searching .chips { display: none; }
  .searching #suggest { position: static; margin: 8px -12px 0; padding: 4px 0; max-height: calc(100% - 64px); border-radius: 0; box-shadow: none; }
  .searching .sg { padding-left: 16px; padding-right: 16px; }
}

/* シートを指で動かしているあいだは、高さのなめらかな変化を止めて指に付ける */
#sheet.dragging { transition: none; }

/* 読み込み中の一覧 (灰色の帯) */
.skel { padding: 18px 20px; display: grid; gap: 14px; }
.skel i { display: block; height: 14px; border-radius: var(--r-s); background: var(--wash); animation: skel 1.2s ease-in-out infinite; }
.skel i:nth-child(1) { width: 40%; height: 24px; }
.skel i:nth-child(2) { width: 86%; }
.skel i:nth-child(3) { width: 64%; }
@keyframes skel { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skel i, .map-msg i { animation: none; } }

/* 園の詳細: 一覧の前後の園へ */
.d-nav { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 8px; }
.d-nav .back { width: auto; height: 40px; padding: 0 10px 0 4px; margin: 0 0 0 -8px; gap: 2px; display: inline-flex; align-items: center; border-radius: var(--r-m); font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.d-pos { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.d-pos b { color: var(--ink); font-weight: 700; }
.d-pos button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.d-pos button:not(:disabled):hover, .d-nav .back:hover { background: var(--wash); }
.d-pos .next svg { transform: rotate(180deg); }

/* 見直し: 13 マスは押すと詳細 */
.strip button.rk { cursor: pointer; }
.strip button.rk:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(29, 33, 37, .18); }

/* スマホの検索欄の「絞り込み」: 幅があれば文字も出す。検索の候補を出しているあいだは隠す */
.s-filter { width: auto; min-width: 40px; padding: 0 8px; grid-auto-flow: column; align-items: center; gap: 4px; }
.s-filter .s-l { font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
@media (max-width: 359px) { .s-filter .s-l { display: none; } }
.searching .s-filter { display: none; }
/* メニューの「文字の大きさ」 */
.t-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.t-size .seg { display: flex; padding: 3px; border-radius: var(--r-m); background: var(--wash); }
.t-size .seg button { min-height: 40px; padding: 0 14px; border-radius: var(--r-s); font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.t-size .seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(29, 33, 37, .14); }

/* 一覧の上の凡例 (指数との比較の内訳) は、見直しの画面と「見方」(メニュー) に任せ、一覧では出さない。
   見出しを短くして、最初の園を高い位置から始める (パソコンでもスマホのたたんだ一覧でも)。スマホで一覧を広げたときだけ出す */
#body[data-view="list"] .keys { display: none; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  #sheet[data-size="full"] #body[data-view="list"] .keys { display: flex; }
}

/* スマホ (指で操作する端末) のチップの select は 16px。iOS は 16px 未満の入力欄を押すと画面を拡大することがあるため。
   チップが画面に収まらないときは右端をぼかして、横に送れることを示す */
@media (pointer: coarse) {
  .chip .dd-t { font-size: max(16px, var(--fs-2)); padding-left: 9px; padding-right: 20px; background-position: right 5px center; }
  /* チップが 1 行に入りきらないとき (0 歳の長い選択肢、幅の狭い端末) は 2 段に折り返す。切れて見えないように */
  .chips { gap: 5px; flex-wrap: wrap; overflow: visible; }
  .chip.num { padding-left: 9px; gap: 5px; }
  .chip.num input { width: 46px; }
  .chips.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
}
/* 文字を大きくしたときは、園名を省略せず 2 行まで折り返す */
html.t-large .row .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 園の詳細: 「定員・園庭・年齢」(または募集・最低指数) のすぐ下に順位の行が来るときは、線を 1 本にする */
.facts-l + .acts, .empty-c + .acts { margin-top: 10px; }
@media (pointer: coarse) {
  /* 並べる順の select も 16px (iOS の拡大を防ぐ) */
  .via .dd-t { font-size: max(16px, var(--fs-2)); }
}
/* スマホの検索欄の「絞り込み」: 件数の札は文字の右に並べる (文字に重ねない)。アイコンだけのときは右上に */
.s-filter .s-l + .f-count { position: static; margin-left: 2px; }
@media (max-width: 359px) { .s-filter .s-l + .f-count { position: absolute; top: 2px; right: 1px; margin: 0; } }
/* スマホの一覧の見出し: 幅を空けるため、狭い画面では印刷のボタンを出さない (印刷はパソコンで) */
@media (max-width: 419px) {
  .tools [data-act="print"] { display: none; }
}

/* ---------- 比較表 (年パス) ---------- */
.cmp-wrap { margin: 4px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
.cmp { border-collapse: separate; border-spacing: 0; font-size: var(--fs-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.cmp thead th { font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); line-height: 1.35; vertical-align: bottom; }
.cmp thead small { display: block; font-size: var(--fs-1); font-weight: 400; }
.cmp .c-n { position: sticky; left: 0; z-index: 1; background: var(--bg); text-align: left; box-shadow: 1px 0 0 var(--line); }
.cmp tbody .c-n button { display: flex; align-items: center; gap: 8px; min-height: 40px; max-width: 11em; text-align: left; font-size: var(--fs-2); font-weight: 600; color: var(--ink); }
.cmp tbody .c-n span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cmp td b { font-size: var(--fs-3); }
.cmp td.mn i { font-style: normal; margin-left: 2px; }

/* 年パスが無いときの絞り込み: 条件の一覧は見せ、上に一言と年パスへのボタン */
.f-lock { display: none; }
body.locked .f-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--wash); font-size: var(--fs-2); color: var(--ink-2); }
body.locked #filter .toggles button, body.locked #f-other { opacity: .6; }
/* 年パスの案内の上の、押した機能の説明といまの一覧での中身 */
.pf { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--wash); font-size: var(--fs-2); line-height: 1.6; color: var(--ink-2); }
.pf-t { display: flex; align-items: center; gap: 6px; font-size: var(--fs-3); color: var(--ink); }
.pf-t svg { width: 14px; height: 14px; color: var(--ink-3); }
.pf-d { margin-top: 4px; }
.pf-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding: 0; }
.pf-strip .rk { width: 24px; height: 24px; }
.pf-n { margin-top: 8px; }
.pf-n b { margin: 0 2px; font-size: var(--fs-4); color: var(--ink); }
.m-fine { margin: 8px 0 0; }

/* 見方 (番号の色と言葉) を開いたときは、メニューのリンクと文字の大きさを出さず、凡例から始める */
.legend-only .menu, .legend-only .t-size { display: none; }
.legend-only #legend { margin-top: 4px; }
/* 年パスが無いときの絞り込みの「閉じる」は、目立たないボタン */
.f-foot .pri.quiet { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.f-foot .pri.quiet:hover { background: var(--wash); }
.lh-o .fix-l { margin-left: 8px; }
/* 「番号の色の見方」は行の右端の丸い「?」 */
.q-help { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -10px -10px -10px auto; font: 700 var(--fs-1)/1 var(--font); color: var(--brand); }
.q-help::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.q-help:hover::before { background: color-mix(in srgb, var(--brand) 10%, transparent); }


/* 園の詳細: もう一方の手段の時間 (上の大きな時間と同じ形を、小さく薄く) */
.hero.alt { margin-top: 8px; }
.hero.alt b { font-size: var(--fs-4); color: var(--ink-3); }
.hero.alt b small { font-size: var(--fs-2); }
.hero.alt .track u::before { border-top-style: dashed; border-color: var(--line-2); }
.hero.alt .track u span { font-weight: 600; color: var(--ink-3); }
.hero.alt .mk { opacity: .55; }
.end-dot { flex: none; width: 10px; height: 10px; margin: 0 7px; border-radius: 50%; background: var(--line-2); }
/* 年パスが無いときの自転車の行: 同じ形のまま時間を隠す (「–分」と鍵)。押すと年パスの案内 */
.hero.alt.hid { width: 100%; text-align: left; cursor: pointer; }
.hero.alt.hid .track u span { display: inline-flex; align-items: center; gap: 4px; }
.hero.alt.hid .track u svg { width: 13px; height: 13px; }
.hero.alt.hid:hover .track u span { color: var(--brand); }

/* 独自の選択メニュー (main.js の dd)。白い紙に、主の言葉を太く、補足を小さく。選んでいるものに藍のチェック。
   年パスの機能は薄い字と鍵の印 (押すと説明) */
.dd-menu { position: fixed; z-index: 90; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: var(--r-m); background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(29, 33, 37, .16); }
.dd-g { margin: 8px 10px 4px; font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.dd-g:first-child { margin-top: 4px; }
.dd-o { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: var(--r-s); text-align: left; color: var(--ink); }
.dd-o:hover, .dd-o:focus-visible { background: var(--wash); outline: none; }
.dd-o[aria-selected="true"] { background: var(--brand-wash); }
.dd-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dd-m b { font-size: var(--fs-3); font-weight: 600; line-height: 1.35; }
.dd-m small { font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); line-height: 1.4; }
.dd-o[aria-selected="true"] .dd-m b { color: var(--brand); font-weight: 700; }
.dd-o > svg { width: 16px; height: 16px; color: var(--brand); }
.dd-o.lockd .dd-m b { color: var(--ink-3); font-weight: 500; }
.dd-o.lockd > svg { width: 14px; height: 14px; color: var(--ink-3); }
.dd-o.lockd:hover { background: var(--wash); }
/* 年パスが無いときの、押せない形の行とボタン (薄い字と鍵の印) */
.via-row .via-lock { color: var(--ink-3); font-weight: 500; }
.via-lock svg { flex: none; width: 14px; height: 14px; margin-left: auto; }
.via-row .via-lock:hover { color: var(--ink-2); }
.acts .lockt { color: var(--ink-3); font-weight: 500; }
.acts .lockt svg { width: 13px; height: 13px; }