/* 暮らしトク 害虫駆除ガイド
   紙の図鑑・標本ラベルの組版を下敷きにしたスタイル。
   地色＋墨＋朱（危険・最盛期）＋藍（リンク）。箱や影は使わず、罫線と文字の大小で構成する。 */

:root {
  --paper: #f6f5f0;
  --ink: #18181a;
  --sub: #595852;
  --hair: #cdcbc2;
  --hair-d: #8f8d85;
  --shu: #b5311c;
  --ai: #1c3f6e;
  --tint: #ecebe4;
  --min: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --got: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --lat: "EB Garamond", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --measure: 40rem;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--got); font-size: 1rem; line-height: 1.9; letter-spacing: .02em;
  line-break: strict; overflow-wrap: anywhere; font-kerning: normal;
}
h1, h2, h3, h4 { font-family: var(--min); font-weight: 700; line-height: 1.4; margin: 0; letter-spacing: .03em; font-feature-settings: "palt"; text-wrap: balance; word-break: auto-phrase; }
p { margin: 0 0 1em; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
th { text-align: left; font-weight: 600; }
a { color: var(--ai); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--shu); }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; }
:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.la { font-family: var(--lat); font-size: 1.12em; letter-spacing: .01em; }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.vh, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; }

/* ---------- 題字・奥付 ---------- */
.masthead { border-top: 5px solid var(--ink); }
.masthead-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; flex-wrap: wrap; padding-block: 1.1rem .9rem; }
.masthead-in::after { content: ""; flex-basis: 100%; border-bottom: 1px solid var(--ink); margin-top: -.1rem; order: 3; }
.logo { display: inline-flex; flex-direction: column; color: var(--ink); text-decoration: none; line-height: 1.25; }
.logo:hover { color: var(--ink); }
.logo-sub { font-size: .6875rem; letter-spacing: .32em; color: var(--sub); }
.logo-main { font-family: var(--min); font-weight: 700; font-size: 1.375rem; letter-spacing: .08em; }
.gnav { display: flex; flex-wrap: wrap; gap: .1rem 1.7rem; font-size: .8125rem; }
.gnav a { color: var(--ink); text-decoration: none; padding: .35rem 0 .25rem; border-bottom: 2px solid transparent; }
.gnav a:hover { border-bottom-color: var(--hair-d); }
.gnav a[aria-current] { border-bottom-color: var(--shu); font-weight: 600; }

.crumbs { font-size: .75rem; color: var(--sub); padding-top: .9rem; }
.crumbs a { color: var(--sub); }
.crumbs .sep { margin-inline: .5em; color: var(--hair-d); }

.colophon { margin-top: 7rem; }
.colophon-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem 4rem; padding-block: 2rem 1.4rem; border-top: 1px solid var(--ink); border-bottom: 5px solid var(--ink); font-size: .8125rem; position: relative; }
.colophon-in::before { content: ""; position: absolute; }
.colophon-name { font-family: var(--min); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; margin-bottom: .6rem; }
.colophon-note { color: var(--sub); max-width: 30em; line-height: 1.8; margin: 0; }
.colophon-nav { columns: 2; column-gap: 2.5rem; }
.colophon-nav a { display: block; color: var(--ink); text-decoration: none; padding: .42rem 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.colophon-nav a:hover { color: var(--shu); }
.copyright { grid-column: 1 / -1; margin: 0; font-size: .75rem; color: var(--sub); letter-spacing: .1em; }

/* ---------- 危険度・発生月（共通の図表） ---------- */
.dg { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: .5em; line-height: 1.3; }
.dg-n { font-family: var(--lat); font-weight: 500; font-size: 1.5em; font-variant-numeric: lining-nums; line-height: 1; min-width: .55em; }
.dg-of { display: none; }
.dg-bar { display: inline-flex; gap: 2px; align-self: center; }
.dg-bar i { width: 7px; height: 11px; border: 1px solid var(--ink); }
.dg-bar i.on { background: var(--ink); }
.d4 .dg-bar i.on, .d5 .dg-bar i.on { background: var(--shu); border-color: var(--shu); }
.d5 .dg-n, .d4 .dg-n { color: var(--shu); }
.dg-w { font-size: .75rem; letter-spacing: .04em; }

.ms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 18px; width: 100%; border-bottom: 1px solid var(--ink); }
.ms i { position: relative; border-left: 1px solid var(--hair); font-style: normal; }
.ms i:first-child { border-left: 0; }
.ms i::before { content: ""; position: absolute; left: -1px; right: 0; bottom: 0; }
.ms i:first-child::before { left: 0; }
.ms i.on::before { height: 6px; background: var(--ink); }
.ms i.pk::before { height: 100%; background: var(--shu); }
.ms.labeled { height: 30px; margin-bottom: 1.5rem; }
.ms.labeled i.on::before { height: 9px; }
.ms.labeled i span { position: absolute; top: calc(100% + 3px); left: 0; right: 0; text-align: center; font-family: var(--lat); font-size: .875rem; line-height: 1.2; font-variant-numeric: lining-nums; color: var(--sub); }
.ms.labeled i.on span, .ms.labeled i.pk span { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: .2rem 1.8rem; font-size: .75rem; color: var(--sub); margin: .9rem 0 0; }
.lg { display: inline-flex; align-items: flex-end; gap: .5em; }
.lg i { display: inline-block; width: 12px; margin-bottom: .45em; }
.lg i.on { height: 6px; background: var(--ink); }
.lg i.pk { height: 15px; background: var(--shu); }

/* ---------- トップ：扉と索引 ---------- */
.tobira { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4rem; align-items: end; padding-block: 4.2rem 0; }
.tobira h1 { font-size: clamp(2rem, 5.4vw, 3.75rem); line-height: 1.34; letter-spacing: .04em; margin-bottom: -.12em; }
.tobira-lead { font-size: .9375rem; margin-bottom: 1.6rem; }
.lookup { max-width: 33rem; }
.lookup label { display: block; font-size: .75rem; letter-spacing: .14em; color: var(--sub); }
.lookup-in { display: flex; align-items: stretch; border-bottom: 2px solid var(--ink); }
.lookup input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .55rem 0; font-size: 1.0625rem; }
.lookup input::placeholder, .fld input::placeholder { color: #6f6d66; }
.lookup input:focus-visible { outline-offset: 0; }
.lookup button { border: 0; background: var(--ink); color: var(--paper); padding: 0 1.2rem; font-size: .8125rem; letter-spacing: .1em; cursor: pointer; margin-bottom: 5px; white-space: nowrap; }
.lookup button:hover { background: var(--shu); }

.tally-table { grid-column: 1 / -1; width: 100%; table-layout: fixed; border-top: 1px solid var(--ink); margin-top: 1rem; }
.tally-table th { font-weight: 400; font-size: .6875rem; letter-spacing: .14em; color: var(--sub); padding: .7rem 0 0; }
.tally-table td { font-size: .75rem; padding: 0 0 1rem; vertical-align: baseline; }
.tally-table td b { font-family: var(--lat); font-weight: 400; font-size: 2.25rem; line-height: 1.2; font-variant-numeric: lining-nums; margin-right: .12em; letter-spacing: 0; }
.tally-table th:last-child, .tally-table td.date { text-align: right; width: 24%; }
.tally-table td.date { font-family: var(--lat); font-size: 1.125rem; letter-spacing: .02em; }

.ix { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); border-top: 1px solid var(--ink); padding-block: 2.2rem 4rem; }
.ix:first-child { border-top-width: 2px; }
.ix-label { writing-mode: vertical-rl; font-size: 1.25rem; letter-spacing: .32em; line-height: 1.2; align-self: start; justify-self: start; position: sticky; top: 1.5rem; font-feature-settings: normal; }
.ix-note { font-size: .875rem; color: var(--sub); margin-bottom: 1.2rem; }
.ix-more { margin: 1.8rem 0 0; font-size: .875rem; }
.ix-more a::after, .go a::after { content: " →"; font-family: var(--lat); }

.general { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem 3rem; }
.ix-chu { grid-row: span 2; }
.ix-cat h3 { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.125rem; letter-spacing: .2em; border-bottom: 2px solid var(--ink); padding-bottom: .35rem; }
.ix-cat h3 span { font-family: var(--got); font-weight: 400; font-size: .75rem; letter-spacing: .06em; color: var(--sub); }
.ix-cols { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--sub); margin: .35rem 0 0; letter-spacing: .08em; }
.ix-chu ol { columns: 2; column-gap: 3rem; }
.ix-cat li { display: flex; align-items: baseline; gap: .7em; padding: .5rem 0 .4rem; break-inside: avoid; }
.ie-no { font-family: var(--lat); font-size: .9375rem; color: var(--sub); font-variant-numeric: lining-nums; min-width: 1.4em; }
.ix-cat li a { white-space: nowrap; font-family: var(--min); font-weight: 500; font-size: 1.25rem; line-height: 1.4; color: var(--ink); text-decoration: none; letter-spacing: .04em; }
.ix-cat li a:hover { color: var(--shu); text-decoration: underline; text-decoration-thickness: 1px; }
.ie-th { align-self: center; flex: none; width: 2rem; height: 2rem; object-fit: cover; border: 1px solid var(--hair-d); background: var(--tint); }
.ie-th.none { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hair) 5px 6px); }
.ie-kana { font-size: .6875rem; color: var(--sub); letter-spacing: .08em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: clip; }
.ie-dots { flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--hair-d); transform: translateY(-.3em); }
.ie-dg { font-family: var(--lat); font-size: 1.25rem; line-height: 1; font-variant-numeric: lining-nums; }
.ie-dg.d5, .ie-dg.d4 { color: var(--shu); }
.ie-dg.d5 { font-weight: 500; }

.tag-index { width: 100%; border-top: 2px solid var(--ink); }
.tag-index thead th { font-size: .6875rem; font-weight: 400; color: var(--sub); letter-spacing: .08em; padding: .3rem 0; border-bottom: 1px solid var(--ink); }
.tag-index td, .tag-index tbody th { padding: .7rem 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.tag-index tbody th { width: 9.5rem; font-family: var(--min); font-size: 1.0625rem; white-space: nowrap; }
.tag-index tbody th a { color: var(--ink); }
.tag-index tbody th a:hover { color: var(--shu); }
.tag-index .num { width: 3.5rem; text-align: right; padding-right: 1.6rem; font-family: var(--lat); font-size: 1.25rem; line-height: 1; font-variant-numeric: lining-nums; }
.tag-index thead .num { font-family: var(--got); font-size: .6875rem; }
.tag-index td:last-child { font-size: .875rem; line-height: 1.8; }
.tag-index td:last-child a { color: var(--ink); text-decoration-color: var(--hair-d); }
.tag-index td:last-child a:hover { color: var(--shu); }

.alerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alert { padding-right: 3rem; }
.alert + .alert { border-left: 1px solid var(--hair-d); padding-left: 3rem; padding-right: 0; }
.alert-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ink); margin-bottom: 1.1rem; }
.alert-no { font-family: var(--lat); font-size: 1rem; color: var(--sub); margin: 0; }
.alert-no span { font-family: var(--got); font-size: .75rem; margin-left: 1em; }
.alert h3 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.25; margin-bottom: .5rem; }
.alert h3 a { color: var(--ink); text-decoration: none; }
.alert h3 a:hover { color: var(--shu); }
.alert-dg { margin-bottom: .9rem; }
.alert-why { font-size: .9375rem; margin: 0; max-width: 30em; }
.alert-next { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .9375rem; }
.alert-next-l { font-size: .75rem; color: var(--sub); letter-spacing: .06em; padding-top: .25em; }
.alert-next a { font-family: var(--min); font-size: 1.0625rem; color: var(--ink); text-decoration-color: var(--hair-d); }
.alert-next a:hover { color: var(--shu); }

.contents { counter-reset: c; border-top: 2px solid var(--ink); }
.contents li { counter-increment: c; display: grid; grid-template-columns: 2.6rem 13rem minmax(0, 1fr); align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--hair); }
.contents li::before { content: counter(c, decimal-leading-zero); font-family: var(--lat); color: var(--sub); font-variant-numeric: lining-nums; }
.contents a { font-family: var(--min); font-weight: 700; font-size: 1.1875rem; color: var(--ink); text-decoration: none; letter-spacing: .06em; }
.contents a:hover { color: var(--shu); text-decoration: underline; text-decoration-thickness: 1px; }
.contents p { margin: 0; font-size: .875rem; color: var(--sub); line-height: 1.8; }

/* ---------- 下層ページの見出し ---------- */
.page-head { padding-block: 2.6rem 2.4rem; }
.page-head h1 { font-size: clamp(1.75rem, 4.6vw, 2.875rem); line-height: 1.35; letter-spacing: .05em; }
.page-lead { margin: 1.2rem 0 0; max-width: 39em; }
.k-ledger .page-head, .k-calendar .page-head, .k-vendors .page-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 3rem; align-items: end; border-bottom: 1px solid var(--ink); }
.k-ledger .page-lead, .k-calendar .page-lead, .k-vendors .page-lead { margin: 0; font-size: .875rem; line-height: 1.85; }

/* ---------- 図鑑：目録 ---------- */
.finder { padding-block: 1.6rem .4rem; }
.finder-fields { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 12.5rem; gap: 1rem 2.5rem; margin-bottom: 1.5rem; }
.fld { display: block; }
.fld > span, .finder-l { display: block; font-size: .6875rem; letter-spacing: .14em; color: var(--sub); }
.fld input, .fld select { width: 100%; border: 0; border-bottom: 1.5px solid var(--ink); background-color: transparent; padding: .45rem 0; font-size: 1rem; min-height: 2.6rem; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 1.4rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-size: 5px 5px, 5px 5px; background-position: right 7px center, right 2px center; background-repeat: no-repeat; }
.fld input:focus-visible, .fld select:focus-visible { outline-offset: 2px; }
.finder-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; margin-bottom: .7rem; }
.opts { display: flex; flex-wrap: wrap; padding: 0 1px 1px 0; }
.opt { margin: 0 -1px -1px 0; border: 1px solid var(--hair-d); background: transparent; padding: .34rem .85rem; font-size: .8125rem; line-height: 1.5; cursor: pointer; position: relative; }
.opt:hover { background: var(--tint); }
.opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); z-index: 1; }
.opt:focus-visible { z-index: 2; }
.tally { display: flex; align-items: baseline; gap: .4em; margin: 1.4rem 0 .5rem; font-size: .8125rem; }
.tally b { font-family: var(--lat); font-weight: 500; font-size: 1.75rem; line-height: 1; font-variant-numeric: lining-nums; }
.linklike { border: 0; background: none; color: var(--ai); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer; padding: .2rem 0; margin-left: 1.4em; font-size: .8125rem; }
.linklike:hover { color: var(--shu); }

.ledger-head, .row { display: grid; grid-template-columns: 2.2rem 3.5rem minmax(11rem, 1.5fr) 2.6rem minmax(5.5rem, .9fr) minmax(8rem, 1.25fr) 6.6rem 11.5rem; column-gap: 1.25rem; }
.ledger-head { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: .6875rem; color: var(--sub); letter-spacing: .08em; padding: .35rem 0; align-items: end; }
.lh-ms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); position: relative; font-family: var(--lat); font-size: .8125rem; letter-spacing: 0; line-height: 1.3; font-variant-numeric: lining-nums; }
.lh-ms i { font-style: normal; text-align: center; }
.lh-ms b { position: absolute; left: 100%; bottom: 0; margin-left: 2px; font: 400 .625rem var(--got); }
.row { position: relative; align-items: baseline; padding: .95rem 0 .85rem; border-bottom: 1px solid var(--hair); }
.row[hidden] { display: none; }
.row:hover { background: var(--tint); }
.r-no { font-family: var(--lat); font-size: 1rem; color: var(--sub); font-variant-numeric: lining-nums; }
.r-name a { font-family: var(--min); font-weight: 700; font-size: 1.25rem; line-height: 1.4; letter-spacing: .05em; color: var(--ink); text-decoration: none; }
.r-name a::after { content: ""; position: absolute; inset: 0; }
.row:hover .r-name a { color: var(--shu); }
.r-kana { font-size: .6875rem; color: var(--sub); margin-left: .9em; letter-spacing: .1em; white-space: nowrap; }
.r-sci { display: block; font-size: .75rem; color: var(--sub); line-height: 1.5; margin-top: .1rem; }
.r-cat, .r-grp, .r-tags { font-size: .8125rem; line-height: 1.6; }
.r-tags { color: var(--sub); }
.r-dg { font-size: .875rem; }
.r-dg .dg-w { flex-basis: 100%; margin-top: .15rem; }
.r-ms { align-self: center; }
.r-th { align-self: center; line-height: 0; }
.th { display: block; width: 3.5rem; height: 3.5rem; object-fit: cover; border: 1px solid var(--hair-d); background: var(--tint); }
.th.none { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hair) 5px 6px); }
.empty { padding: 2.5rem 0; border-bottom: 1px solid var(--hair); }
.ledger.compact { border-top: 2px solid var(--ink); }

/* ---------- 図鑑：標本ラベルと本文 ---------- */
.species { padding-top: 1.4rem; }
.label { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; margin: 4px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.label-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: .45rem 1.5rem; border-bottom: 1px solid var(--ink); font-size: .75rem; letter-spacing: .3em; }
.label-no { font-family: var(--lat); font-size: 1rem; letter-spacing: .06em; }
.label-no b { font-weight: 500; font-size: 1.5rem; font-variant-numeric: lining-nums; }
.label-name { padding: 2.2rem 1.5rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.label-kana { font-size: .8125rem; letter-spacing: .5em; color: var(--sub); margin: 0 0 .2rem; }
.label h1 { font-size: clamp(2.5rem, 7.4vw, 4.5rem); line-height: 1.15; letter-spacing: .04em; }
.label-sci { font-size: 1rem; margin: .9rem 0 0; line-height: 1.6; }
.label-sci .la { font-size: 1.3em; }
.label-data { border-left: 1px solid var(--ink); display: flex; flex-direction: column; }
.label-data > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; padding: .7rem 1.5rem; border-bottom: 1px solid var(--hair); flex: 1; align-content: center; }
.label-data > div:last-child { border-bottom: 0; }
.label-data dt { font-size: .6875rem; letter-spacing: .14em; color: var(--sub); }
.label-data dd { font-size: .875rem; }
.ld-sep { margin-inline: .35em; color: var(--hair-d); }
.ld-danger .dg-n { font-size: 2rem; }
.ld-season dd { padding-top: .2rem; }
.ld-season .ms.labeled { margin-bottom: 1.2rem; }
.ld-tags a { color: var(--ink); text-decoration-color: var(--hair-d); }
.ld-tags a:hover { color: var(--shu); }

/* 図版。写真は切り抜かず元の縦横比で見せ、説明と撮影者を必ず添える */
.fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--ink); background: var(--tint); }
.fig figcaption { font-size: .8125rem; line-height: 1.7; margin-top: .55rem; }
.fig-n { font-family: var(--min); font-weight: 700; letter-spacing: .1em; margin-right: .9em; white-space: nowrap; }
.credit { display: block; font-size: .6875rem; color: var(--sub); line-height: 1.6; margin-top: .25rem; }
.credit a { color: var(--sub); }
.credit a:hover { color: var(--shu); }
/* 写真つきの札：左に図1、右に名前とデータ。スマホでは No. の直下に写真が来る */
.label.has-photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "top top" "photo name" "photo data"; }
.has-photo .label-top { grid-area: top; }
.has-photo .label-name { grid-area: name; padding-bottom: 1.6rem; border-left: 1px solid var(--ink); }
.has-photo .label-data { grid-area: data; border-top: 1px solid var(--ink); }
.label-photo { grid-area: photo; padding: 1.5rem; display: flex; align-items: center; justify-content: center; }
.label-photo .fig { margin: 0; }
.label-photo .fig img { width: auto; max-height: 30rem; margin-inline: auto; }
.label-photo .fig figcaption { font-size: .75rem; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; align-items: start; }
.sec-body:has(.figs) { max-width: 46rem; }
.fig-no { white-space: nowrap; }
.credits td, .credits tbody th { font-size: .8125rem; }
.credits { min-width: 52rem; }
.credits td:nth-child(6) { white-space: nowrap; }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem 4rem; padding-block: 3rem 2.6rem; align-items: start; }
.lead { font-family: var(--min); font-weight: 500; font-size: 1.1875rem; line-height: 2.05; letter-spacing: .04em; max-width: 35em; margin: 0; }
.reason { border-top: 1px solid var(--ink); padding-top: .7rem; }
.reason h2 { font-family: var(--got); font-size: .75rem; font-weight: 600; letter-spacing: .1em; margin-bottom: .5rem; font-feature-settings: normal; }
.reason p { font-size: .8125rem; line-height: 1.85; margin: 0; }

.toc { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: .8rem 0; display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; font-size: .8125rem; }
.toc-h { margin: 0; font-size: .6875rem; letter-spacing: .3em; color: var(--sub); }
.toc ol { counter-reset: t; display: flex; flex-wrap: wrap; gap: .15rem 1.6rem; }
.toc li { counter-increment: t; }
.toc li::before { content: counter(t, decimal-leading-zero); font-family: var(--lat); color: var(--sub); margin-right: .45em; font-variant-numeric: lining-nums; }
.toc a { color: var(--ink); text-decoration: none; display: inline-block; padding: .15rem 0; }
.toc a:hover { color: var(--shu); text-decoration: underline; text-decoration-thickness: 1px; }

.article { counter-reset: sec; }
.sec { border-top: 1px solid var(--ink); padding-block: 1.5rem 3.2rem; }
.sec > h2 { font-size: 1.5rem; margin-bottom: 1.3rem; }
.sec-body { max-width: var(--measure); }
.sec-body > :last-child { margin-bottom: 0; }
.numbered { margin-top: 3.2rem; }
.numbered .sec { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: 3rem; padding-block: 1.6rem 3.6rem; }
.numbered .sec > h2 { counter-increment: sec; font-size: 1.375rem; align-self: start; position: sticky; top: 1.2rem; margin: 0; }
.numbered .sec > h2::before { content: counter(sec, decimal-leading-zero); display: block; font-family: var(--lat); font-weight: 400; font-size: 1rem; color: var(--sub); line-height: 1.2; margin-bottom: .3rem; font-variant-numeric: lining-nums; letter-spacing: .06em; }

.sec-body h3 { font-size: 1.0625rem; margin: 2rem 0 .5rem; }
.sec-body > h3:first-child { margin-top: 0; }
sup.cite { font-family: var(--lat); font-size: .75em; line-height: 0; vertical-align: super; margin-left: .1em; letter-spacing: 0; font-variant-numeric: lining-nums; }
sup.cite a { text-decoration: none; padding: .3em .05em; }
sup.cite a::after { content: ")"; }
sup.cite a:hover { text-decoration: underline; }

.facts { width: 100%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.facts th, .facts td { padding: .85rem 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { width: 7rem; font-size: .8125rem; letter-spacing: .08em; padding-right: 1rem; }
.facts td { font-size: .9375rem; }
.prices th { width: auto; font-weight: 400; letter-spacing: .02em; }
.prices th { width: 55%; }
.prices td { text-align: right; font-variant-numeric: tabular-nums; padding-left: 1rem; }

.season { margin-bottom: 1.6rem; }
.season .ms.labeled { height: 44px; }
.season .ms.labeled i.on::before { height: 12px; }
.season .ms.labeled i span { font-size: 1rem; }

.kinds { border-top: 1px solid var(--ink); }
.kind { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--hair); }
.kind dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1em; }
.kind-name { font-family: var(--min); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; }
.kind-sci { font-size: .875rem; color: var(--sub); }
.kind-size { font-size: .8125rem; margin-top: .2rem; }
.kind-l { font-size: .6875rem; letter-spacing: .14em; color: var(--sub); margin-right: 1em; }
.kind-body { font-size: .9375rem; margin-top: .45rem; }

.tl-item { margin-bottom: 1.8rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-item h3 { margin: 0 0 .4rem; }
.tl-item p { margin: 0; }
.steps { counter-reset: st; }
.steps-item { counter-increment: st; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--hair); }
.steps-item:first-child { border-top: 0; padding-top: 0; }
.steps-item::before { content: counter(st); grid-row: span 2; font-family: var(--lat); font-size: 1.875rem; line-height: 1.1; font-variant-numeric: lining-nums; }
.steps-item h3 { margin: 0 0 .35rem; }
.steps-item p { margin: 0; grid-column: 2; }

.ul li { position: relative; padding: .5rem 0 .5rem 1.7rem; border-bottom: 1px solid var(--hair); }
.ul li:first-child { padding-top: 0; }
.ul li:last-child { border-bottom: 0; }
.ul li::before { content: ""; position: absolute; left: 0; top: 1.42rem; width: .8rem; border-top: 1px solid var(--ink); }
.ul li:first-child::before { top: .92rem; }
.ul.check li::before { top: 1.08rem; width: .72rem; height: .72rem; border: 1.5px solid var(--ink); }
.ul.check li:first-child::before { top: .58rem; }
.ul.ng li::before { content: "×"; border: 0; top: .5rem; width: auto; font-family: var(--min); font-weight: 700; font-size: 1.125rem; line-height: 1.7; color: var(--shu); }
.ul.ng li:first-child::before { top: 0; }

.go { display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .9375rem; }
.law { border-left: 1px solid var(--ink); padding-left: 1.4rem; }
.law p { margin: 0; }

.faq { border-bottom: 1px solid var(--hair); }
.faq:first-of-type { border-top: 1px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) 1.2rem; align-items: baseline; padding: .9rem 0; font-family: var(--min); font-weight: 700; font-size: 1.0625rem; line-height: 1.6; letter-spacing: .03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--lat); font-weight: 400; font-size: 1.25rem; color: var(--shu); }
.faq summary::after { content: "+"; font-family: var(--lat); font-weight: 400; font-size: 1.25rem; text-align: right; }
.faq[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--shu); }
.faq p { margin: 0; padding: 0 1.2rem 1.2rem 1.9rem; font-size: .9375rem; }

.sources ol { font-size: .8125rem; line-height: 1.7; }
.sources li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding: .55rem 0; border-bottom: 1px solid var(--hair); }
.sources li::before { content: attr(value) ")"; grid-row: span 3; font-family: var(--lat); font-size: 1rem; line-height: 1.45; font-variant-numeric: lining-nums; }
.sources li > * { grid-column: 2; }
.sources li:target { background: var(--tint); box-shadow: -8px 0 0 var(--tint), 8px 0 0 var(--tint); }
.src-pub { font-weight: 600; }
.src-note { color: var(--sub); }

.related { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.related h2 { font-size: 1.125rem; letter-spacing: .1em; margin-bottom: 1rem; }

/* ---------- 表（共通） ---------- */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tscroll:focus-visible { outline-offset: 1px; }
.grid-table { width: 100%; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: .875rem; line-height: 1.75; }
.grid-table thead th { font-size: .6875rem; font-weight: 400; letter-spacing: .1em; color: var(--sub); padding: .35rem 1.2rem .35rem 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.grid-table tbody th, .grid-table td { padding: .85rem 1.2rem .85rem 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.grid-table tbody tr:last-child > * { border-bottom: 0; }
.grid-table tr > :last-child { padding-right: 0; }
.grid-table tbody th { min-width: 8em; }
.grid-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid-table td.num { font-family: var(--lat); font-size: 1.1875rem; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.scale { max-width: 26rem; margin-bottom: 1.4rem; }
.scale tbody th { min-width: 0; width: 8rem; }
.ext::after { content: "\2197\FE0E"; font-family: var(--lat); margin-left: .2em; display: inline-block; text-decoration: none; }

/* ---------- 発生カレンダー ---------- */
.k-calendar .legend { margin: 1.2rem 0 .4rem; }
.cal { width: 100%; min-width: 46rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cal thead th:nth-child(2) { width: 10.5rem; }
.cal thead th { font-size: .625rem; font-weight: 400; color: var(--sub); text-align: center; padding: 1rem 0 .3rem; border-bottom: 1px solid var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.cal thead th b { font-family: var(--lat); font-weight: 400; font-size: 1.125rem; color: var(--ink); font-variant-numeric: lining-nums; margin-right: 1px; }
.cal thead th:nth-child(-n+2) { text-align: left; font-size: .6875rem; letter-spacing: .08em; }
.cal .cal-no { width: 2.4rem; font-family: var(--lat); font-size: .9375rem; color: var(--sub); font-variant-numeric: lining-nums; border-bottom: 1px solid var(--hair); }
.cal thead .cal-no { font-family: var(--got); font-size: .6875rem; border-bottom-color: var(--ink); }
.cal tbody th[scope="row"] { width: 10.5rem; font-weight: 400; padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.cal tbody th a { font-family: var(--min); font-weight: 500; font-size: 1.0625rem; color: var(--ink); text-decoration: none; letter-spacing: .04em; }
.cal tbody th a:hover { color: var(--shu); text-decoration: underline; text-decoration-thickness: 1px; }
.cal tbody td:not(.cal-no) { position: relative; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.cal tbody td:nth-child(3n+3):not(.cal-no) { border-left-color: var(--hair-d); }
.cal tbody td.on::before, .cal tbody td.pk::before { content: ""; position: absolute; left: -1px; right: 0; bottom: 0; }
.cal tbody td.on::before { height: 7px; background: var(--ink); }
.cal tbody td.pk::before { height: 68%; background: var(--shu); }
.cal tbody tr:not(.cal-cat):hover > * { background-color: var(--tint); }
.cal-cat th { font-family: var(--min); font-weight: 700; font-size: 1.125rem; letter-spacing: .2em; padding: 2rem 0 .35rem; border-bottom: 2px solid var(--ink); }
.cal-cat th span { font-family: var(--got); font-weight: 400; font-size: .75rem; letter-spacing: .06em; color: var(--sub); margin-left: 1.2em; }
.cal tbody:first-of-type .cal-cat th { padding-top: 1.2rem; }

/* ---------- 駆除業者・相談窓口 ---------- */
.block { margin-top: 3.5rem; }
.block > h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.vtable { min-width: 62rem; }
.vtable tbody th { font-family: var(--min); font-size: 1rem; min-width: 11em; }
.vtable tbody th a { color: var(--ink); }
.vtable tbody th a:hover { color: var(--shu); }
.vtable td { min-width: 9em; }
.vendor { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: 3rem; border-top: 1px solid var(--ink); padding-block: 1.6rem 3rem; }
.vendor-head { align-self: start; position: sticky; top: 1.2rem; }
.vendor-no { font-family: var(--lat); font-size: 1rem; color: var(--sub); margin: 0 0 .2rem; line-height: 1.2; font-variant-numeric: lining-nums; }
.vendor h3 { font-size: 1.5rem; line-height: 1.45; }
.vendor-site { margin: .9rem 0 0; font-size: .875rem; }
.vendor-body { max-width: 44rem; }
.spec { border-top: 1px solid var(--hair); }
.vendor .spec { border-top: 0; }
.spec > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.vendor .spec > div:first-child { padding-top: .2rem; }
.spec dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; }
.spec dd { font-size: .9375rem; }
.vendor h4 { font-family: var(--got); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; margin: 1.8rem 0 .5rem; font-feature-settings: normal; }
.main-link { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1rem; margin: 1.6rem 0 0; font-size: .9375rem; }
.main-link span { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; }
.vsrc { margin-top: .9rem; font-size: .8125rem; }
.vsrc summary { cursor: pointer; color: var(--sub); padding: .2rem 0; }
.vsrc summary:hover { color: var(--shu); }
.vsrc ul { padding: .4rem 0 0 1.1rem; }
.vsrc li { padding: .2rem 0; word-break: break-all; line-height: 1.6; }
.before { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.before p { max-width: var(--measure); }
.k-vendors .article { margin-top: 3rem; }
.k-vendors .sources .sec-body { max-width: 52rem; }

.directory .sec-body { max-width: none; }
.directory .sec-body > p { max-width: var(--measure); }
.contact { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 17rem minmax(0, 44rem); column-gap: 3rem; padding: 1.5rem 0 1.8rem; border-top: 1px solid var(--hair-d); }
.contact:first-child { border-top: 0; padding-top: .4rem; }
.contact h3 { margin: 0; font-size: 1.25rem; line-height: 1.5; }
.contact .spec { grid-column: 2; grid-row: 1 / span 2; border-top: 0; }
.contact .spec > div:first-child { padding-top: .2rem; }
.contact .spec > div:last-child { border-bottom: 0; }
.contact-link { grid-column: 1; margin: .6rem 0 0; font-size: .875rem; align-self: start; }
.muni { min-width: 44rem; }
.muni td:nth-child(2) { min-width: 10em; }
.muni td:last-child { white-space: nowrap; }
.directory .sources .sec-body { max-width: 52rem; }

/* ---------- 読み物ページ ---------- */
.reading .page-head { border-bottom: 1px solid var(--ink); padding-bottom: 2.6rem; }
.reading-cols { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: 3rem; }
.reading-cols .toc { display: block; align-self: start; position: sticky; top: 1.2rem; border: 0; padding: 1.6rem 0 0; }
.reading-cols .toc-h { margin-bottom: .6rem; }
.reading-cols .toc ol { display: block; }
.reading-cols .toc li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); padding: .3rem 0; border-bottom: 1px solid var(--hair); line-height: 1.6; }
.reading-cols .toc li::before { margin: 0; }
.reading .article > .sec:first-child { border-top: 0; }
.reading-cols .sec-body:has(.grid-table) { max-width: none; }
.reading-cols .sec-body:has(.grid-table) > p { max-width: var(--measure); }
.reading > .article:not(.directory) { margin-left: 17rem; }
.wide-mid td:nth-child(2) { min-width: 20em; }
.wide-last td:last-child { min-width: 20em; }
.k-reading .go { border-top: 0; }

/* ---------- 画面幅ごとの調整 ---------- */
@media (max-width: 1020px) {
  .ledger-head, .row { grid-template-columns: 2rem 3.5rem minmax(10rem, 1.4fr) 2.6rem minmax(5rem, .9fr) 6.6rem 10.5rem; }
  .ledger-head span:nth-child(6), .r-tags { display: none; }
  .intro { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2rem 2.5rem; }
  .numbered .sec, .reading-cols { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 2rem; }
  .vendor, .contact { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 2rem; }
  .reading > .article:not(.directory) { margin-left: 13rem; }
}

@media (max-width: 800px) {
  body { line-height: 1.85; }
  .masthead-in { padding-block: .9rem .7rem; gap: .5rem 1.5rem; }
  .gnav { gap: 0 1.15rem; font-size: .78rem; }
  .colophon { margin-top: 4.5rem; }
  .colophon-in { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

  .tobira { grid-template-columns: minmax(0, 1fr); padding-block: 2.2rem 0; gap: 1.6rem; }
  .tobira h1 { margin-bottom: 0; }
  .tally-table { margin-top: .6rem; }
  .tally-table th { letter-spacing: 0; font-size: .625rem; }
  .tally-table td b { font-size: 1.625rem; }
  .tally-table th:last-child, .tally-table td.date { width: 31%; }
  .tally-table td.date { font-size: .9375rem; }
  .ix { display: block; padding-block: 1.5rem 3rem; }
  .ix-label { writing-mode: horizontal-tb; position: static; letter-spacing: .2em; font-size: 1.375rem; margin-bottom: 1.4rem; }
  .general { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .ix-chu ol { columns: 1; }
  .tag-index, .tag-index tbody { display: block; }
  .tag-index thead { display: none; }
  .tag-index tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
  .tag-index td, .tag-index tbody th { border: 0; padding: 0; width: auto; }
  .tag-index .num { padding: 0; width: auto; }
  .tag-index .num::after { content: "種"; font-family: var(--got); font-size: .6875rem; color: var(--sub); margin-left: .2em; }
  .tag-index td:last-child { grid-column: 1 / -1; margin-top: .25rem; }
  .alerts { grid-template-columns: minmax(0, 1fr); }
  .alert { padding: 0 0 1.8rem; }
  .alert + .alert { border-left: 0; border-top: 1px solid var(--hair-d); padding: 1.6rem 0 0; }
  .contents li { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .contents p { grid-column: 2; }

  .page-head { padding-block: 1.8rem 1.8rem; }
  .k-ledger .page-head, .k-calendar .page-head, .k-vendors .page-head { grid-template-columns: minmax(0, 1fr); }
  .finder-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; }
  .fld-q { grid-column: 1 / -1; }
  .finder-row { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; margin-bottom: 1rem; }
  .opt { padding: .5rem .8rem; }
  .ledger-head { display: none; }
  .ledger { border-top: 2px solid var(--ink); }
  .row { grid-template-columns: 3.5rem auto minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .2rem; padding: 1rem 0 1.1rem; }
  .r-th { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: .3rem; }
  .r-no { grid-column: 1; grid-row: 4; align-self: center; }
  .r-name { grid-column: 2 / 4; grid-row: 1; }
  .r-dg { grid-column: 4; grid-row: 1 / span 2; text-align: right; }
  .r-dg .dg { justify-content: flex-end; }
  .r-dg .dg-bar { display: none; }
  .r-cat { grid-column: 2; grid-row: 2; }
  .r-grp { grid-column: 3; grid-row: 2; }
  .r-tags { display: block; grid-column: 2 / -1; grid-row: 3; font-size: .75rem; }
  .r-ms { grid-column: 2 / -1; grid-row: 4; margin-top: .35rem; }

  .label { grid-template-columns: minmax(0, 1fr); }
  .label.has-photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "photo" "name" "data"; }
  .label-photo { padding: 1rem 1rem 0; }
  .label-photo .fig img { max-height: 68vw; }
  .has-photo .label-name { padding-top: 1.1rem; border-left: 0; }
  .figs { gap: 1.6rem 1rem; }
  .label-top { padding-inline: 1rem; letter-spacing: .2em; }
  .label-name { padding: 1.6rem 1rem 1.5rem; }
  .label-data { border-left: 0; border-top: 1px solid var(--ink); }
  .label-data > div { padding: .7rem 1rem; grid-template-columns: 5.2rem minmax(0, 1fr); }
  .intro { grid-template-columns: minmax(0, 1fr); padding-block: 2.2rem 2rem; }
  .lead { font-size: 1.0625rem; line-height: 2; }
  .toc { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; }
  .toc ol { gap: .1rem 1.3rem; }
  .toc a { padding: .3rem 0; }
  .numbered { margin-top: 2.4rem; }
  .numbered .sec { display: block; padding-block: 1.3rem 2.6rem; }
  .numbered .sec > h2 { position: static; margin-bottom: 1.2rem; display: flex; align-items: baseline; gap: .7em; }
  .numbered .sec > h2::before { display: inline; margin: 0; }
  .sec > h2 { font-size: 1.375rem; }
  .facts th { width: 5.6rem; }
  .faq p { padding-right: 0; }

  .cal { min-width: 0; table-layout: fixed; }
  .cal .cal-no, .cal thead .cal-no { width: 0; padding: 0; font-size: 0; overflow: hidden; border-bottom-width: 1px; }
  .cal tbody th[scope="row"] { width: 6.6rem; padding-right: .3rem; white-space: normal; line-height: 1.4; }
  .cal thead th:nth-child(2) { width: 6.6rem; }
  .cal tbody th a { font-size: .8125rem; letter-spacing: 0; }
  .cal thead th span { display: none; }
  .cal thead th b { font-size: .9375rem; }

  .vendor, .contact { grid-template-columns: minmax(0, 1fr); }
  .vendor-head { position: static; margin-bottom: 1.2rem; }
  .contact .spec { grid-column: 1; grid-row: auto; margin-top: .6rem; }
  .contact-link { margin-top: .8rem; }
  .spec > div, .main-link { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .reading-cols { grid-template-columns: minmax(0, 1fr); }
  .reading-cols .toc { position: static; padding: 1.2rem 0 1.6rem; }
  .reading > .article:not(.directory) { margin-left: 0; }
  .reading .article > .sec:first-child { border-top: 0; }
  .reading-cols .article > .sec:first-child { border-top: 1px solid var(--ink); }
}

@media print {
  .masthead .gnav, .finder, .skip { display: none; }
  body { background: #fff; }
}