/* せたがや しせつ図鑑
   色と形の約束
   - 紙の色の地に、黒い線（2.5px）とベタぬり。角は丸く。
   - 総合評価の色: S 黄 / A 緑 / B 青 / C 灰。色だけに頼らず、かならず文字を添える。
   - 分類の色（8色）は「どの種類の施設か」を示すためだけに使う。 */
:root {
  --paper: #f3eee3;
  --paper-2: #fffdf8;
  --paper-3: #e9e2d3;
  --ink: #1d1b19;
  --ink-2: #4b463f;
  --muted: #7d766b;
  --rule: #1d1b19;
  --hair: #d8cfbd;
  --yellow: #f6c544;
  --red: #e8553e;
  --green: #2e9e5b;
  --blue: #2b6fb5;
  --sky: #cfe6f2;
  --ground: #e4dcc9;
  --skin: #fbe3c8;
  --c-hall: #e8553e;
  --c-center: #f6c544;
  --c-culture: #9a6cc4;
  --c-sports: #3a97dd;
  --c-health: #ec7ba6;
  --c-welfare: #37a866;
  --c-library: #d4883a;
  --c-town: #45a3a3;
  --c-welfare-soft: #cfeedd;
  --g-s: #f6c544;
  --g-a: #37a866;
  --g-b: #3a97dd;
  --g-c: #a39c90;
  --shadow: 4px 4px 0 var(--ink);
  --radius: 18px;
  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Zen Maru Gothic", sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1a17;
    --paper-2: #27241f;
    --paper-3: #322e28;
    --ink: #f4efe4;
    --ink-2: #d2cbbd;
    --muted: #a39b8d;
    --rule: #f4efe4;
    --hair: #4a453c;
    --sky: #23384a;
    --ground: #332f28;
    --skin: #e9c9a6;
    --c-welfare-soft: #24493a;
    --shadow: 4px 4px 0 #000;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h, 68px) + 14px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.8;
  -webkit-text-size-adjust: 100%; font-feature-settings: "palt";
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}
h1, h2, h3, h4 { font-family: var(--font-round); line-height: 1.35; margin: 0; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.f-yellow { fill: var(--yellow); } .f-red { fill: var(--red); } .f-paper { fill: var(--paper-2); }
.s-ink { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.num { font-family: var(--font-num); font-weight: 700; letter-spacing: .01em; font-feature-settings: "tnum"; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.nowrap { white-space: nowrap; }

/* ---------- 左の縦の帯（図鑑の背表紙） */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 54px; border-right: 2.5px solid var(--rule);
  background: var(--sky); display: none; flex-direction: column; align-items: center; gap: 18px; padding: 92px 0 20px; z-index: 5;
}
.rail-small { font-family: var(--font-num); font-weight: 700; font-size: .78rem; letter-spacing: .2em; writing-mode: vertical-rl; }
.rail-title { writing-mode: vertical-rl; font-family: var(--font-round); font-weight: 900; font-size: 1.05rem; letter-spacing: .28em; }
.rail-year { writing-mode: vertical-rl; font-family: var(--font-round); font-weight: 700; font-size: .8rem; margin-top: auto; background: var(--paper-2); border: 2px solid var(--rule); border-radius: 99px; padding: 10px 4px; }
@media (min-width: 1180px) { .rail { display: flex; } body { padding-left: 54px; } }

/* ---------- ヘッダー */
.site-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px clamp(14px, 3vw, 32px); background: var(--paper); border-bottom: 2.5px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-round); }
.brand-small { font-size: .7rem; font-weight: 700; letter-spacing: .2em; }
.brand-main { font-size: 1.25rem; font-weight: 900; letter-spacing: .06em; }
.year-switch { display: flex; gap: 0; margin-left: auto; border: 2.5px solid var(--rule); border-radius: 99px; overflow: hidden; background: var(--paper-2); }
.year-switch a { padding: 4px 12px; text-decoration: none; font-family: var(--font-round); font-weight: 700; font-size: .84rem; white-space: nowrap; }
.year-switch a + a { border-left: 2px solid var(--rule); }
.year-switch a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-family: var(--font-round); font-weight: 700; font-size: .95rem; padding: 6px 12px; border-radius: 99px; border: 2px solid transparent; }
.site-nav a:hover { border-color: var(--rule); }
.site-nav a[aria-current="page"] { background: var(--yellow); border-color: var(--rule); color: #1d1b19; }
.nav-toggle { display: none; font: inherit; font-family: var(--font-round); font-weight: 700; border: 2.5px solid var(--rule); background: var(--paper-2); color: inherit; border-radius: 99px; padding: 5px 14px; cursor: pointer; }
@media (max-width: 860px) {
  .site-header { gap: 8px; padding: 8px 12px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-main { font-size: 1.05rem; }
  .brand-small { font-size: .6rem; }
  .nav-toggle { display: inline-block; padding: 4px 12px; font-size: .86rem; }
  .site-nav { display: none; width: 100%; flex-direction: column; }
  .site-nav.open { display: flex; }
  .year-switch a { padding: 4px 9px; font-size: .8rem; }
  .year-switch .yl { display: none; }
}
@media (max-width: 380px) { .brand-small { display: none; } }

main { display: block; min-height: 60vh; }
main:focus { outline: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 36px); }
.loading { padding: 80px 20px; text-align: center; font-family: var(--font-round); font-weight: 700; }
.error { padding: 60px 20px; text-align: center; }

/* ---------- 見出し（小さな英字＋丸い吹き出しの絵＋大きな見出し） */
.sec { padding: clamp(40px, 6vw, 72px) 0; }
.sec + .sec { border-top: 2.5px solid var(--rule); }
.sec.alt { background: var(--paper-2); }
.sec-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.sec-eyebrow { display: block; font-family: var(--font-num); font-weight: 700; letter-spacing: .16em; font-size: .92rem; color: var(--ink-2); text-transform: uppercase; }
.sec-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; letter-spacing: .03em; }
.sec-lead { max-width: 46em; color: var(--ink-2); margin: -10px 0 26px; }
.badge-no { font-family: var(--font-num); font-weight: 700; font-size: 1rem; letter-spacing: .06em; }
.badge-no b { font-size: 1.6em; font-weight: 700; }

/* ---------- ボタン・ピル */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-family: var(--font-round); font-weight: 700;
  background: var(--ink); color: var(--paper); border: 2.5px solid var(--ink); border-radius: 99px; padding: 8px 20px;
  text-decoration: none; cursor: pointer; transition: transform .12s;
}
.btn::before { content: "▸"; font-size: .8em; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--yellow); }
.btn.ghost { background: var(--paper-2); color: var(--ink); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-round); font-weight: 700; font-size: .84rem;
  border: 2px solid var(--rule); border-radius: 99px; padding: 2px 12px; background: var(--paper-2); text-decoration: none; white-space: nowrap; color: inherit;
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--ink)); border: 1.5px solid var(--rule); }
button.pill { cursor: pointer; font-size: .9rem; padding: 4px 14px; }
button.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; font-family: var(--font-round); border: 1.5px solid var(--rule); border-radius: 6px; padding: 0 7px; background: var(--paper-2); white-space: nowrap; }

/* ---------- トップ */
.hero { background: var(--sky); border-bottom: 2.5px solid var(--rule); overflow: hidden; }
.hero-in { max-width: 1200px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 3.4vw, 36px) 0; }
.hero-kicker { font-family: var(--font-num); font-weight: 700; letter-spacing: .2em; font-size: 1rem; }
.hero h1 { font-size: clamp(2rem, 6.2vw, 4.2rem); font-weight: 900; letter-spacing: .02em; line-height: 1.22; margin: 6px 0 14px; }
.hero h1 .mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.hero-lead { max-width: 40em; font-size: 1.02rem; margin-bottom: 20px; }
.search { position: relative; max-width: 640px; }
.search input {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 14px 20px 14px 50px; border: 2.5px solid var(--rule); border-radius: 99px;
  background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow);
}
.search > svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; pointer-events: none; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); z-index: 15; overflow: hidden; }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; border-top: 1.5px solid var(--hair); }
.suggest a:first-child { border-top: 0; }
.suggest a:hover, .suggest a.on { background: var(--yellow); color: #1d1b19; }
.suggest .cat-icon { width: 34px; height: 34px; flex: none; }
.suggest b { font-family: var(--font-round); }
.suggest span { font-size: .8rem; color: var(--ink-2); }
.suggest a:hover span, .suggest a.on span { color: #1d1b19; }
.hero-art { display: block; width: 100%; height: auto; margin-top: 18px; }
.hero-art .bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.hero-try { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; font-size: .9rem; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 16px; }
.cat-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; text-decoration: none;
  background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 12px 16px 12px 12px; transition: transform .12s, box-shadow .12s;
}
.cat-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cat-card .cat-icon { width: 76px; height: 76px; }
.cat-card h3 { font-size: 1.02rem; font-weight: 900; white-space: nowrap; }
.cat-card p { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.5; }
.cat-card .n { font-family: var(--font-num); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.cat-card .n small { font-family: var(--font-round); font-size: .7rem; margin-left: 2px; }

.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tiles .tile { grid-column: span 2; }
.tiles .tile.w { grid-column: span 3; }
@media (max-width: 900px) { .tiles .tile, .tiles .tile.w { grid-column: span 3; } }
@media (max-width: 560px) { .tiles .tile, .tiles .tile.w { grid-column: span 6; } }
.tile { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; position: relative; }
.tile-q { font-family: var(--font-round); font-weight: 900; font-size: 1.05rem; }
.tile-n { font-family: var(--font-num); font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1; margin: 8px 0 4px; }
.tile-n small { font-family: var(--font-round); font-size: .32em; margin-left: 4px; }
.tile-note { font-size: .82rem; color: var(--ink-2); margin: 0; line-height: 1.6; }
.tile.y { background: var(--yellow); color: #1d1b19; } .tile.y .tile-note { color: #3b3528; }

/* 総合評価のしるし */
.stamp {
  --g: var(--g-a); display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--g); border: 2.5px solid var(--rule); font-family: var(--font-num); font-weight: 700; font-size: 2.2rem; line-height: 1; color: #1d1b19; flex: none;
}
.stamp.S { --g: var(--g-s); } .stamp.A { --g: var(--g-a); } .stamp.B { --g: var(--g-b); } .stamp.C { --g: var(--g-c); }
.stamp.sm { width: 40px; height: 40px; font-size: 1.4rem; border-width: 2px; }
.stamp.lg { width: 96px; height: 96px; font-size: 3.4rem; box-shadow: var(--shadow); }
.stamp.none { background: var(--paper-3); font-size: 1rem; }
.gbar { display: flex; height: 34px; border: 2.5px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper-3); }
.gbar span { display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; color: #1d1b19; min-width: 0; overflow: hidden; }
.gbar span + span { border-left: 2px solid var(--rule); }
.gbar .S { background: var(--g-s); } .gbar .A { background: var(--g-a); } .gbar .B { background: var(--g-b); } .gbar .C { background: var(--g-c); }
.gbar-row { display: grid; grid-template-columns: 5.6em 1fr; gap: 10px; align-items: center; margin-bottom: 8px; font-family: var(--font-round); font-weight: 700; font-size: .92rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--rule); vertical-align: -1px; margin-right: 5px; }

/* 図鑑カード */
.zgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.zcard {
  position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--paper-2);
  border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 12px 34px 14px 16px; transition: transform .12s, box-shadow .12s; min-height: 100%;
}
.zcard:hover { transform: translate(-2px, -3px); box-shadow: var(--shadow); }
.zcard::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: var(--cc, var(--yellow)); border-left: 2.5px solid var(--rule); border-radius: 0 15px 15px 0; }
.zcard .side { position: absolute; right: 0; top: 12px; width: 24px; z-index: 1; writing-mode: vertical-rl; font-family: var(--font-round); font-weight: 900; font-size: .72rem; letter-spacing: .12em; color: #1d1b19; display: flex; align-items: center; }
.zcard .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.zcard .cat-icon { width: 84px; height: 84px; margin: 2px auto 2px; display: block; }
.zcard h3 { font-size: 1.12rem; font-weight: 900; line-height: 1.35; }
.zcard .formal { font-size: .76rem; color: var(--muted); margin: 0; line-height: 1.4; }
.zcard .op { font-size: .82rem; margin: 8px 0 0; line-height: 1.5; color: var(--ink-2); }
.zcard .op b { display: block; color: var(--ink); font-family: var(--font-round); }
.zcard .foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; }
.zcard .score { flex: 1; min-width: 0; }
.zcard .score .num { font-size: 1.25rem; line-height: 1; }
.zcard .score small { font-size: .72rem; color: var(--muted); }
.meter { height: 9px; border: 1.5px solid var(--rule); border-radius: 99px; background: var(--paper-3); overflow: hidden; margin-top: 3px; }
.meter i { display: block; height: 100%; background: var(--g, var(--g-a)); border-right: 1.5px solid var(--rule); }
.zcard.off { opacity: .55; }
.zcard .area { position: absolute; left: 14px; top: 44px; }

/* さがすページ */
.fq-row input { width: 100%; font: inherit; font-size: 1.02rem; padding: 11px 18px; border: 2.5px solid var(--rule); border-radius: 99px; background: var(--paper-2); color: var(--ink); margin-bottom: 12px; }
.filters { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); margin-bottom: 14px; }
.filters > summary { cursor: pointer; list-style: none; padding: 9px 16px; font-family: var(--font-round); font-weight: 900; display: flex; align-items: center; gap: 10px; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::before { content: "＋"; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--rule); border-radius: 50%; font-size: .9rem; background: var(--yellow); color: #1d1b19; flex: none; }
.filters[open] > summary::before { content: "−"; }
.filters-in { padding: 4px 16px 14px; display: grid; gap: 10px; border-top: 2px solid var(--hair); }
.filters .row { display: grid; grid-template-columns: 5em 1fr; gap: 10px; align-items: start; padding-top: 8px; }
.filters .row > span { font-family: var(--font-round); font-weight: 900; font-size: .9rem; padding-top: 4px; }
.active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; min-height: 0; }
.active:empty { display: none; }
.active-h { font-family: var(--font-round); font-weight: 900; font-size: .84rem; }
.chip-x { font: inherit; font-family: var(--font-round); font-weight: 700; font-size: .88rem; display: inline-flex; gap: 8px; align-items: center; border: 2px solid var(--rule); border-radius: 99px; padding: 2px 6px 2px 12px; background: var(--yellow); color: #1d1b19; cursor: pointer; }
.chip-x span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1d1b19; color: var(--yellow); font-size: .8rem; line-height: 1; }
.btn.sm { padding: 3px 14px; font-size: .86rem; }
.empty { grid-column: 1 / -1; border: 2.5px dashed var(--rule); border-radius: var(--radius); padding: 22px; text-align: center; background: var(--paper-2); }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--font-round); font-weight: 700; }
.result-head select { font: inherit; padding: 4px 10px; border: 2px solid var(--rule); border-radius: 99px; background: var(--paper-2); color: var(--ink); max-width: 100%; }
.zcard .scope { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.zcard .fee { margin: 8px 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.4; border-top: 1.5px dashed var(--hair); padding-top: 6px; }
.zcard .fee b { display: block; font-size: 1.35rem; color: var(--ink); }
.zcard .fee small { display: block; }
@media (max-width: 560px) { .filters .row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 施設のページ */
.f-hero { background: var(--sky); border-bottom: 2.5px solid var(--rule); }
.f-hero-in { max-width: 1120px; margin: 0 auto; padding: 22px clamp(16px, 3.4vw, 36px) 26px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.crumbs { font-size: .82rem; margin-bottom: 8px; }
.crumbs a { text-decoration: underline; }
.f-hero h1 { font-size: clamp(1.7rem, 4.6vw, 3rem); font-weight: 900; letter-spacing: .02em; }
.f-hero .formal { font-family: var(--font-round); font-weight: 700; color: var(--ink-2); margin: 2px 0 10px; }
.f-hero .cat-icon { width: clamp(96px, 16vw, 160px); height: auto; }
.f-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yeartabs { display: inline-flex; border: 2.5px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper-2); margin-top: 14px; }
.yeartabs a { padding: 6px 14px; font-family: var(--font-round); font-weight: 700; text-decoration: none; font-size: .9rem; }
.yeartabs a + a { border-left: 2px solid var(--rule); }
.yeartabs a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.yeartabs a.na { color: var(--muted); text-decoration: line-through; pointer-events: none; }
@media (max-width: 640px) { .f-hero-in { grid-template-columns: 1fr; } .f-hero .cat-icon { display: none; } }

.f-layout { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.f-nav { display: none; }
@media (min-width: 1000px) {
  .f-layout { grid-template-columns: minmax(0, 1fr) 176px; }
  .f-nav { display: block; position: sticky; top: 86px; align-self: start; margin-top: 30px; border: 2.5px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; }
  .f-nav a { display: flex; gap: 8px; align-items: center; padding: 7px 12px; text-decoration: none; font-family: var(--font-round); font-weight: 700; font-size: .86rem; border-top: 1.5px solid var(--hair); }
  .f-nav a:first-child { border-top: 0; }
  .f-nav a:hover, .f-nav a.on { background: var(--yellow); color: #1d1b19; }
  .f-nav a .num { font-size: .8rem; width: 1.4em; }
}
.f-sec { padding: 34px 0 30px; border-top: 2.5px solid var(--rule); }
.f-sec:first-child { border-top: 0; }
.f-sec > .sec-head { margin-bottom: 16px; }
.f-sec > .sec-head h2 { font-size: clamp(1.3rem, 2.8vw, 1.7rem); }
.src { font-size: .8rem; color: var(--muted); margin: 0 0 14px; }
.src a { text-decoration: underline; }

.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 26px 0 6px; }
@media (max-width: 620px) { .glance { grid-template-columns: 1fr; } }
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
@media (max-width: 760px) { .pairs { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kv > div { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: 14px; padding: 10px 14px; font-size: .92rem; }
.kv b { display: block; font-family: var(--font-round); font-size: .8rem; color: var(--ink-2); }
.gl { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; }
.gl h3 { font-size: .92rem; font-weight: 900; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.gl h3::before { content: ""; width: 10px; height: 10px; background: var(--yellow); border: 2px solid var(--rule); border-radius: 50%; }
.gl .big { font-family: var(--font-round); font-weight: 900; font-size: 1.12rem; line-height: 1.4; }
.gl p { margin: 4px 0 0; font-size: .84rem; color: var(--ink-2); line-height: 1.6; }
.gl .row { display: flex; align-items: center; gap: 12px; }
.gl .more { margin-top: auto; padding-top: 8px; font-size: .82rem; font-weight: 700; font-family: var(--font-round); }

/* 指定期間の帯 */
.term { margin-top: 10px; }
.term-bar { display: flex; gap: 3px; }
.term-bar i { flex: 1; height: 16px; border: 2px solid var(--rule); background: var(--paper-3); border-radius: 4px; position: relative; }
.term-bar i.done { background: var(--ink-2); }
.term-bar i.now { background: var(--yellow); }
.term-cap { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-2); margin-top: 3px; font-family: var(--font-round); font-weight: 700; }

/* 評価 */
.eval-top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.eval-top .total { font-family: var(--font-num); font-weight: 700; font-size: 2.4rem; line-height: 1; }
.eval-top .total small { font-size: .5em; }
.eval-top p { margin: 4px 0 0; }
.cat-rows { margin-top: 18px; display: grid; gap: 0; border-top: 2.5px solid var(--rule); }
.cat-row { border-bottom: 2.5px solid var(--rule); padding: 12px 0; display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 6px 18px; }
.cat-row h4 { font-size: 1rem; font-weight: 900; }
.cat-row .sc { font-family: var(--font-num); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.cat-row .sc small { font-size: .7em; color: var(--muted); }
.cat-row .cm { margin: 0; font-size: .92rem; }
.cat-row .cm::before { content: "所管課の説明"; display: block; font-size: .7rem; font-weight: 700; color: var(--muted); font-family: var(--font-round); }
.items { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; margin-top: 4px; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; border-bottom: 1px dashed var(--hair); padding: 2px 0; }
.dots { display: inline-flex; gap: 3px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--rule); background: transparent; }
.dots i.on { background: var(--ink); }
.item.top .dots i.on { background: var(--g-s); }
.item.low .dots i.on { background: var(--g-b); }
.item.top span:first-child::after { content: "優"; margin-left: 5px; font-size: .68rem; font-weight: 700; background: var(--g-s); color: #1d1b19; border: 1.5px solid var(--rule); border-radius: 4px; padding: 0 3px; }
.item.low span:first-child::after { content: "課題"; margin-left: 5px; font-size: .68rem; font-weight: 700; background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: 4px; padding: 0 3px; }
.item .na { font-size: .74rem; color: var(--muted); }
@media (max-width: 640px) { .cat-row { grid-template-columns: 1fr; } .eval-top { grid-template-columns: 1fr; } }
.quote { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 16px 20px 6px; position: relative; margin-top: 18px; }
.quote h3 { font-size: 1rem; font-weight: 900; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.quote .face { width: 40px; height: 40px; flex: none; }
.quote p { margin: 0 0 .7em; }
.note-check { font-size: .8rem; border: 2px dashed var(--rule); border-radius: 12px; padding: 8px 12px; margin-top: 12px; background: var(--paper-2); }

/* 宿題リレー */
.relay { display: grid; gap: 0; }
.relay-step { display: grid; grid-template-columns: 76px 1fr; gap: 0 14px; position: relative; padding-bottom: 18px; }
.relay-step::before { content: ""; position: absolute; left: 37px; top: 30px; bottom: 0; border-left: 3px dotted var(--rule); }
.relay-step:last-child::before { display: none; }
.relay-year { font-family: var(--font-round); font-weight: 900; font-size: .8rem; text-align: center; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 3px 4px; height: fit-content; position: relative; z-index: 1; line-height: 1.3; }
.relay-card { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: 16px; padding: 12px 16px 4px; }
.relay-card.task { background: var(--yellow); color: #1d1b19; }
.relay-card h4 { font-size: .9rem; font-weight: 900; margin-bottom: 6px; }
.relay-card p { margin: 0 0 .6em; font-size: .94rem; }
.relay-card.wait { border-style: dashed; color: var(--ink-2); }

/* 声とこたえ */
.vcount { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vc { border: 2.5px solid var(--rule); border-radius: 14px; background: var(--paper-2); padding: 6px 14px; text-align: center; min-width: 92px; }
.vc b { display: block; font-family: var(--font-num); font-size: 1.9rem; line-height: 1; }
.vc b small { font-family: var(--font-round); font-size: .45em; }
.vc span { font-family: var(--font-round); font-weight: 700; font-size: .84rem; }
.talk { display: grid; gap: 8px; margin-bottom: 18px; }
.say { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; max-width: 720px; }
.say .face { width: 44px; height: 44px; }
.say .bub { position: relative; background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: 18px; padding: 10px 16px; }
.say .bub::before { content: ""; position: absolute; left: -10px; top: 14px; width: 16px; height: 16px; background: inherit; border-left: 2.5px solid var(--rule); border-bottom: 2.5px solid var(--rule); transform: rotate(45deg); }
.say .who { display: block; font-family: var(--font-round); font-weight: 900; font-size: .74rem; color: var(--ink-2); }
.say.ans { grid-template-columns: 1fr 44px; margin-left: auto; }
.say.ans .face { grid-column: 2; grid-row: 1; }
.say.ans .bub { grid-column: 1; grid-row: 1; background: var(--c-welfare-soft); }
.say.ans .bub::before { left: auto; right: -10px; border: 0; border-right: 2.5px solid var(--rule); border-top: 2.5px solid var(--rule); }
.say p { margin: 0; }
.vkind { font-family: var(--font-round); font-weight: 900; margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.vkind::after { content: ""; flex: 1; border-top: 2.5px solid var(--rule); }

/* お金 */
.mbar { margin: 6px 0 14px; }
.mbar-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-round); font-weight: 900; }
.mbar-head .num { font-size: 1.5rem; }
.mbar-track { display: flex; height: 38px; border: 2.5px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper-3); }
.mbar-track span { min-width: 2px; border-left: 2px solid var(--rule); position: relative; }
.mbar-track span:first-child { border-left: 0; }
.mkeys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; margin-top: 6px; }
.mkeys i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--rule); border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.m0 { background: var(--yellow); } .m1 { background: var(--c-sports); } .m2 { background: var(--c-welfare); } .m3 { background: var(--c-health); } .m4 { background: var(--c-culture); } .m5 { background: var(--c-library); } .m6 { background: var(--c-town); } .m7 { background: var(--paper-2); }
.balance { display: inline-flex; gap: 10px; align-items: baseline; border: 2.5px solid var(--rule); border-radius: 14px; padding: 6px 16px; background: var(--paper-2); font-family: var(--font-round); font-weight: 900; }
.balance .num { font-size: 1.5rem; }
table.mt { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .92rem; margin-top: 10px; }
table.mt.pa { min-width: 640px; }
table.mt td:first-child { min-width: 9em; }
table.mt th, table.mt td { border-bottom: 1.5px solid var(--hair); padding: 6px 8px; text-align: left; vertical-align: top; }
table.mt td.a { text-align: right; font-family: var(--font-num); font-weight: 600; font-size: 1.06rem; white-space: nowrap; }
table.mt tr.tot td { font-weight: 700; border-top: 2.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-round); }
table.mt tr.lv2 td:first-child { padding-left: 26px; color: var(--ink-2); }
table.mt tr.lv1 td:first-child { padding-left: 14px; }
table.mt td.n { font-size: .82rem; color: var(--ink-2); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* 本文（原本の見出し・段落・表） */
.blk-h { font-family: var(--font-round); font-weight: 900; margin: 18px 0 6px; }
.blk-h.lv2 { font-size: 1.04rem; padding-left: 10px; border-left: 6px solid var(--yellow); }
.blk-h.lv3 { font-size: .96rem; }
.blk-p { margin: 0 0 .7em; }
/* 表。外側（.tbl）が枠、内側（.tbl-scroll）が横スクロール。せまい画面でも右の列まで見られる */
.tbl { border: 2px solid var(--rule); border-radius: 12px; margin: 8px 0 14px; background: var(--paper-2); position: relative; max-width: 100%; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.tbl table { border-collapse: collapse; width: 100%; font-size: .86rem; line-height: 1.55; }
.tbl td, .tbl th { padding: 5px 9px; vertical-align: top; text-align: left; border: 1px solid var(--hair); overflow-wrap: anywhere; font-weight: 400; }
.tbl tr:first-child > * { border-top: 0; } .tbl tr:last-child > * { border-bottom: 0; }
.tbl tr > *:first-child { border-left: 0; } .tbl tr > *:last-child { border-right: 0; }
.tbl th { background: var(--paper-3); font-family: var(--font-round); font-weight: 700; white-space: nowrap; }
.tbl td.nw, .tbl th.nw { white-space: nowrap; overflow-wrap: normal; font-feature-settings: "tnum"; text-align: right; }
.tbl.loose table { table-layout: fixed; font-size: .84rem; }
.tbl.loose td { border: 0; padding: 2px 8px; }
.tbl.loose tr.g td { border-top: 1.5px solid var(--hair); padding-top: 5px; }
.tbl.loose.has-head tr:first-child td { font-weight: 700; background: var(--paper-3); }
.tbl.scrolls::after { content: "横にスクロール →"; position: absolute; right: 8px; top: -11px; font-size: .68rem; font-family: var(--font-round); font-weight: 700; background: var(--yellow); color: #1d1b19; border: 1.5px solid var(--rule); border-radius: 99px; padding: 0 8px; }
.fold { border: 2.5px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); margin: 10px 0; }
.fold > summary { cursor: pointer; padding: 10px 16px; font-family: var(--font-round); font-weight: 900; list-style: none; display: flex; align-items: center; gap: 10px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "＋"; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--rule); border-radius: 50%; font-size: .9rem; background: var(--yellow); color: #1d1b19; flex: none; }
.fold[open] > summary::before { content: "−"; }
.fold > .fold-in { padding: 0 16px 12px; border-top: 2px solid var(--hair); }
.clip { position: relative; max-height: 22em; overflow: hidden; }
.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em; background: linear-gradient(transparent, var(--paper)); }
.quote .clip::after, .alt .clip::after { background: linear-gradient(transparent, var(--paper-2)); }
.clip.open { max-height: none; } .clip.open::after { display: none; }
.clip-btn { margin-top: 8px; }

/* 3年のうつりかわり */
.trend { width: 100%; border-collapse: collapse; }
.trend th, .trend td { border-bottom: 2px solid var(--hair); padding: 8px 10px; text-align: left; vertical-align: middle; font-size: .92rem; }
.trend thead th { font-family: var(--font-round); border-bottom: 2.5px solid var(--rule); }
.trend th[scope="row"] { font-family: var(--font-round); font-weight: 900; white-space: nowrap; width: 8.5em; }
.trend td.cur { background: var(--paper-2); }
.delta { font-size: .78rem; font-weight: 700; font-family: var(--font-round); margin-left: 6px; white-space: nowrap; }

/* 運営者 */
.op-list { display: grid; gap: 12px; }
.op-row { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 6px 18px; background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; align-items: start; }
.op-row h3 { font-size: 1.02rem; font-weight: 900; }
.op-row .n { font-family: var(--font-num); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.op-fac { display: flex; flex-wrap: wrap; gap: 6px; }
.op-fac a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: 2px solid var(--rule); border-radius: 99px; padding: 1px 10px 1px 4px; font-size: .84rem; font-weight: 700; font-family: var(--font-round); background: var(--paper); }
.op-fac a { color: var(--ink); }
.op-fac a:hover { background: var(--yellow); color: #1d1b19; }
.op-row[hidden] { display: none; }
/* 施設ページから来たときの強調。行は黄色の地に黒い字、なかの施設リンクは白い地に黒い字（ダークでも同じ） */
.op-row.hit { background: var(--yellow); color: #1d1b19; box-shadow: var(--shadow); border-color: #1d1b19; }
.op-row.hit .tag { background: #fffdf6; color: #1d1b19; border-color: #1d1b19; }
.op-row.hit .op-fac a { background: #fffdf6; color: #1d1b19; border-color: #1d1b19; }
.op-row.hit .op-fac a:hover { background: #1d1b19; color: #fffdf6; }
.filters.open-always { margin-bottom: 14px; }
.filters input[type="search"] { font: inherit; width: 100%; max-width: 460px; padding: 6px 14px; border: 2px solid var(--rule); border-radius: 99px; background: var(--paper); color: var(--ink); }
.op-fac .stamp { width: 24px; height: 24px; font-size: .9rem; border-width: 1.5px; }
@media (max-width: 640px) { .op-row { grid-template-columns: 1fr; } }

/* 全体 */
/* 点・目盛り・境界線は、どれも .strip の中に left:% で置く（同じものさし）。左右の余白は外側の .strip-box で取る */
.strip-box { padding: 0 24px; border: 2.5px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.strip { --dot: 20px; position: relative; height: 64px; margin: 14px 0 34px; border-bottom: 2.5px solid var(--rule); }
.strip a { position: absolute; bottom: 2px; width: var(--dot); height: var(--dot); margin-left: calc(var(--dot) / -2); border-radius: 50%; border: 2px solid var(--rule); background: var(--cc, var(--yellow)); transition: transform .1s; z-index: 1; }
.strip a.part { border-style: dashed; }
.strip a:hover, .strip a:focus-visible, .strip a.on { transform: scale(1.3); z-index: 3; box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 5.5px var(--ink); }
.strip a[hidden] { display: none; }
.strip .tick { position: absolute; top: 0; bottom: 0; width: 0; }
.strip .tick::before { content: ""; position: absolute; left: -1px; bottom: -8px; height: 8px; border-left: 2px solid var(--rule); }
.strip .tick.line::after { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; border-left: 2px dashed var(--rule); opacity: .55; }
.strip .tick b { position: absolute; top: -2px; left: 6px; font-family: var(--font-num); font-weight: 700; font-size: 1.15rem; line-height: 1; opacity: .8; }
.strip .tick em { position: absolute; top: calc(100% + 10px); left: 0; transform: translateX(-50%); font-style: normal; font-family: var(--font-num); font-size: .92rem; color: var(--ink-2); white-space: nowrap; }
.strip-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.seg { display: inline-flex; border: 2.5px solid var(--rule); border-radius: 99px; overflow: hidden; background: var(--paper-2); }
.seg button { font: inherit; font-family: var(--font-round); font-weight: 700; font-size: .88rem; padding: 5px 14px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 2px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.strip-read { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 56px; margin-top: 10px; padding: 8px 14px; border: 2px dashed var(--rule); border-radius: var(--radius); background: var(--paper); font-family: var(--font-round); }
.strip-read .btn { margin-left: auto; }
.dot-sample { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px dashed var(--rule); vertical-align: -2px; }
.score-list { list-style: none; margin: 0; padding: 0; border: 2.5px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; }
.score-list li + li { border-top: 1.5px solid var(--hair); }
.score-list li[hidden] { display: none; }
.score-list a { display: grid; grid-template-columns: 30px minmax(0, 1.1fr) minmax(90px, 1fr) 3.4em 5.2em; gap: 10px; align-items: center; padding: 7px 14px; text-decoration: none; }
.score-list a:hover { background: var(--paper); }
.score-list .stamp { width: 28px; height: 28px; font-size: 1rem; border-width: 2px; }
.sl-name { font-family: var(--font-round); font-weight: 700; font-size: .92rem; }
.sl-bar { position: relative; height: 14px; border-bottom: 2px solid var(--rule); }
.sl-bar i { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--hair); }
.sl-bar b { position: absolute; bottom: -1px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--rule); background: var(--cc, var(--yellow)); }
.sl-p { text-align: right; font-size: 1.15rem; } .sl-p small { font-size: .7em; }
.sl-s { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  /* スマホでは点を大きくし、そのぶん図を横に広げて、横スクロールで見る（縦に長くなりすぎないように） */
  .strip { --dot: 26px; min-width: 720px; }
  .strip-box { padding: 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .score-list a { grid-template-columns: 28px minmax(0, 1fr) 3.2em; gap: 4px 10px; }
  .sl-bar { grid-column: 2 / 3; grid-row: 2; }
  .sl-s { grid-column: 3; grid-row: 2; font-size: .72rem; }
}
/* 数え方の説明 */
.scope-panel { margin-bottom: 24px; }
.scope-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.scope-cols > div { border: 2px solid var(--rule); border-radius: 12px; padding: 8px 14px; background: var(--paper); }
.scope-cols p { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; }
.num.big { font-size: 2.2rem; line-height: 1; }
details.more > summary { cursor: pointer; font-family: var(--font-round); font-weight: 700; }
ul.plain { margin: 10px 0; padding-left: 1.2em; font-size: .92rem; }
ul.plain li { margin-bottom: 3px; }
.fee-scope { margin-bottom: 24px; }
.fee-scope .tbl { margin: 0; }
.hbar { display: grid; grid-template-columns: minmax(120px, 250px) 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; font-size: .88rem; }
.hbar a { text-decoration: none; font-family: var(--font-round); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar a:hover { text-decoration: underline; }
.hbar .bar { height: 18px; border: 2px solid var(--rule); border-radius: 6px; background: var(--cc, var(--yellow)); min-width: 3px; }
.hbar .num { font-size: 1.05rem; }
@media (max-width: 560px) { .hbar { grid-template-columns: 1fr auto; } .hbar .bar { grid-column: 1 / -1; grid-row: 2; } }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.panel { background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.panel h3 { font-size: 1.1rem; font-weight: 900; margin-bottom: 10px; }
.termline { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 14px; align-items: start; padding: 10px 0; border-bottom: 2px solid var(--hair); }
.termline b { font-family: var(--font-round); font-weight: 900; }

/* しくみの図 */
.cycle-art { width: 100%; height: auto; max-width: 820px; display: block; }
.cycle-art text { font-family: var(--font-round); text-anchor: middle; fill: var(--ink); }
.cycle-art text.on-y { fill: #1d1b19; }
.cycle-art .cy-t { font-weight: 900; font-size: 22px; } .cycle-art .cy-m { font-weight: 900; font-size: 17px; }
.cycle-art .cy-s { font-size: 13px; font-weight: 500; } .cycle-art .cy-a { font-size: 12px; font-weight: 700; }
/* スマホでは縦長の図に切りかえる（横長のまま縮めると字が6pxほどになるため） */
.cycle-art.tall { display: none; max-width: 400px; margin: 0 auto; }
.cycle-art.tall .cy-t { font-size: 23px; } .cycle-art.tall .cy-m { font-size: 19px; }
.cycle-art.tall .cy-s { font-size: 15.5px; font-weight: 700; } .cycle-art.tall .cy-a { font-size: 14.5px; }
@media (max-width: 760px) { .cycle-art.wide { display: none; } .cycle-art.tall { display: block; } }
.scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.scale > div { display: flex; gap: 12px; align-items: center; background: var(--paper-2); border: 2.5px solid var(--rule); border-radius: 14px; padding: 10px 14px; font-size: .88rem; line-height: 1.5; }

/* このサイトについて */
.prose { max-width: 46em; }
.prose h2 { font-size: 1.4rem; font-weight: 900; margin: 40px 0 12px; padding-left: 12px; border-left: 8px solid var(--yellow); }
.prose h3 { font-size: 1.08rem; font-weight: 900; margin: 22px 0 6px; }
.prose ul { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .3em; }
.prose table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 8px 0 18px; }
.prose th, .prose td { border: 2px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--paper-3); font-family: var(--font-round); }
.prose code { background: var(--paper-3); border-radius: 4px; padding: 0 4px; font-size: .9em; }

.site-footer { border-top: 2.5px solid var(--rule); background: var(--ink); color: var(--paper); margin-top: 60px; }
.footer-in { max-width: 1120px; margin: 0 auto; padding: 28px clamp(16px, 3.4vw, 36px) 36px; font-size: .88rem; }
.footer-lead { font-family: var(--font-round); font-weight: 700; font-size: 1rem; }
.site-footer a { color: var(--yellow); }

.tip { position: fixed; z-index: 50; background: var(--ink); color: var(--paper); font-size: .8rem; padding: 4px 10px; border-radius: 8px; pointer-events: none; max-width: 260px; line-height: 1.5; font-family: var(--font-round); font-weight: 700; }
.reveal { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.grow { animation: grow .7s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 追加（レビュー対応） */
.tag.warn { background: var(--yellow); color: #1d1b19; }
.scope-note { margin: 8px 0 0; font-size: .86rem; font-family: var(--font-round); font-weight: 700; background: var(--yellow); color: #1d1b19; border: 2px solid var(--rule); border-radius: 10px; padding: 4px 12px; display: inline-block; }
.gap-note { font-size: .8rem; line-height: 1.55; border: 2px dashed var(--rule); border-radius: 10px; padding: 5px 10px; margin: 8px 0 0; background: var(--paper); color: var(--ink); }
dl.mini { margin: 0; display: grid; gap: 2px; }
dl.mini > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
dl.mini dt { font-family: var(--font-round); font-weight: 900; }
dl.mini dd { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
dl.mini .sub { padding-left: 12px; border-left: 4px solid var(--yellow); margin: 0 0 4px 2px; }
dl.mini .sub dt { font-weight: 500; font-size: .84rem; font-family: var(--font-body); color: var(--ink-2); }
dl.mini .sub dd { font-size: 1.02rem; }
.vsub { border-left: 4px solid var(--hair); padding: 2px 0 2px 14px; margin: 0 0 14px; }
.vsub h4 { font-size: .98rem; font-weight: 900; margin: 0 0 6px; }
.vsub h4 .num { font-size: 1.3rem; margin-left: 10px; }
/* せまい画面の、章の近道 */
.f-chips { position: sticky; top: var(--head-h, 52px); z-index: 12; background: var(--paper); border-bottom: 2.5px solid var(--rule); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.f-chips::-webkit-scrollbar { display: none; }
.f-chips-in { display: flex; gap: 6px; padding: 7px 12px; width: max-content; }
.f-chips a { font-family: var(--font-round); font-weight: 700; font-size: .84rem; text-decoration: none; white-space: nowrap; border: 2px solid var(--rule); border-radius: 99px; padding: 2px 12px; background: var(--paper-2); }
.f-chips a.on, .f-chips a:hover { background: var(--yellow); color: #1d1b19; }
@media (min-width: 1000px) { .f-chips { display: none; } }
@media (max-width: 999px) { .f-sec { scroll-margin-top: 48px; } }
.tbl.scrolls.moved::after { display: none; }
.strip-hint { margin: 6px 0 0; font-size: .78rem; font-family: var(--font-round); font-weight: 700; color: var(--ink-2); }
.strip-hint[hidden] { display: none; }
/* 2列に並ぶパネルの中は幅がせまいので、棒は名前と金額の下の段に置く */
.two .hbar { grid-template-columns: 1fr auto; }
.two .hbar .bar { grid-column: 1 / -1; grid-row: 2; }
/* せまいパネルでも、見出しと数字は1文字ずつ折り返さない（はみ出すぶんは横スクロール） */
.panel .trend thead th, .panel .trend td.num { white-space: nowrap; }
.panel .trend th[scope="row"] { width: auto; }
@media (max-width: 560px) { .panel .trend th, .panel .trend td { padding: 8px 3px; font-size: .86rem; } }