/* 解説サイト（害獣・訳あり不動産）の共通スタイル。
   視覚言語の正本は biz/_build/DESIGN.md と biz/_build/v3/overlay.css。
   2026-09-22までこの2区画は独立したトークン（墨 #16243C／紺のfocus既定／素テキストの帯）を
   持っていて、同じブランド名で別のCSSが動いていた。役割の名前を v3 とそろえ、
   ブランド帯は正本のSVGを読む。領域を増やすときはこのファイルを共有する。 */

:root{
  --paper:#FCFCFA;
  --surface:#F0F3F1;
  --ink:#17201D;
  --body-ink:#37413D;
  --mute:#5D6762;
  --rule:#D7DDDA;
  --border:#7D8984;
  --action:#006B70;
  --action-deep:#004F53;
  --action-text:#006B70;
  --action-soft:#DCEBEC;
  --warn:#B3382A;
  --warn-soft:#F8E9E6;
  --r:4px;
  --read:46rem;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium",Meiryo,sans-serif;
  --display:"Helvetica Neue","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  /* 既存の規則が読む別名 */
  --ink-weak:var(--mute);
  --line:var(--rule);
  --accent:var(--action);
  --accent-weak:var(--action-soft);
  --bg:var(--paper);
  --radius:var(--r);
  --measure:var(--read);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--body-ink);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.8;
  /* 和文の禁則。行頭に小書きのかな・長音（「グル／ープ」「シ／ート」「つく／って」）を置かない（9/24。375pxで4ページ6か所に出ていた）。
     長い URL の折り返し（overflow-wrap:anywhere）は、出典の一覧など URL が出うる所だけに付ける（表の列の最小幅を変えないため） */
  line-break:strict;
}

/* キーボードのフォーカス。3px の操作色＋地色オフセット2px（DESIGN.md「操作」） */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--action); outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--action);color:#fff;padding:8px 16px;z-index:30}
.skip:focus{left:0}

a{color:var(--action-text)}

/* サイト内のヘッダ・フッタ。ブランド帯（.brandbar）はこの上に正本のSVGで入る */
header.site,footer.site{
  border-bottom:1px solid var(--rule);
  padding:12px 16px;
  display:flex;
  gap:16px;
  align-items:baseline;
  flex-wrap:wrap;
}
header.site{background:var(--paper)}
footer.site{
  border-bottom:0;
  border-top:1px solid var(--rule);
  background:var(--surface);
  margin-top:48px;
  padding:28px 16px 40px;
  color:var(--mute);
  font-size:14px;
  line-height:1.8;
}
.brand{font-family:var(--display);font-weight:700;color:var(--ink);text-decoration:none;font-size:15px}
.sitecrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:13px;color:var(--mute)}
.sitecrumb a{color:var(--action-text)}
header.site a,footer.site a{display:inline-flex;align-items:center;min-height:44px}

main{max-width:var(--read);margin:0 auto;padding:24px 16px 0}

h1{
  font-family:var(--display);
  font-size:clamp(30px,3vw,42px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--ink);
  margin:8px 0 16px;
}
h2{
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  line-height:1.42;
  letter-spacing:.01em;
  color:var(--ink);
  margin:40px 0 8px;
  padding-top:20px;
  border-top:1px solid var(--rule);
}
h3{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);margin:24px 0 4px}
@media(max-width:760px){
  h1{font-size:30px}
  h2{font-size:22px}
}

p{margin:0 0 16px}

/* 調査主体と最終確認日。本文と同じ級数だとメタ情報として読めない（2026-09-22の監査） */
.byline{font-size:13px;line-height:1.6;color:var(--mute);margin:0 0 16px}
.byline .sep{color:var(--rule)}

.answer{
  background:var(--surface);
  border-radius:var(--r);
  padding:18px 20px;
  margin-bottom:8px;
  color:var(--body-ink);
}

.quote{
  margin:16px 0;
  padding:12px 16px;
  border:1px solid var(--rule);
  background:var(--surface);
  border-radius:var(--r);
}
.quote blockquote{margin:0 0 8px}
.quote figcaption{font-size:14px;color:var(--mute);line-height:1.7}

.decision dl{margin:0}
.decision dt{
  font-weight:700;
  color:var(--ink);
  margin-top:20px;
  padding:8px 12px;
  background:var(--surface);
  border-radius:var(--r) var(--r) 0 0;
}
.decision dd{
  margin:0;
  padding:12px;
  border:1px solid var(--rule);
  border-top:0;
  border-radius:0 0 var(--r) var(--r);
}

.related ul,.refs ul,.cards{list-style:none;padding:0;margin:0}
.related li{margin:8px 0}
.related a,.refs a{display:inline-block;padding-block:4px}

.refs{font-size:15px;color:var(--mute)}
.refs li{margin:6px 0;padding-left:1em;text-indent:-1em}
.refs b{color:var(--ink)}

.cards li{margin:12px 0}
.cards a{
  display:block;
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:16px;
  text-decoration:none;
  color:var(--body-ink);
}
.cards a:hover{border-color:var(--border)}
.cards a b{display:block;font-family:var(--display);color:var(--ink);font-size:17px;margin-bottom:4px}
.cards a span{font-size:15px;color:var(--mute)}

.note{font-size:14px;color:var(--mute)}
.disclosure{font-size:13px;color:var(--mute)}


.brandbar{position:relative;z-index:20;background:rgba(252,252,250,.96);border-bottom:1px solid var(--rule,#D7DDDA)}
.brandbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:76rem;height:50px;padding:0 32px}
.brandbar-home{display:inline-flex;align-items:center;gap:7px;align-self:stretch;
  text-decoration:none;color:var(--ink,#1B2A41);font-size:13px;font-weight:700;
  font-feature-settings:"palt";letter-spacing:.01em}
.brandbar-home svg{flex:none}
.brandbar-home .bb-logo{display:block;width:auto;height:32px}
@media(max-width:480px){.brandbar-home .bb-logo{height:28px}}
.brandbar-home:hover span{text-decoration:underline}
.brandbar-tag{font-size:12px;color:var(--mute,#55636A);margin-right:auto}
@media(max-width:480px){.brandbar-tag{display:none}}
.brandbar-list{display:inline-flex;align-items:center;align-self:stretch;
  font-size:13px;color:var(--action-text,#006B70);text-decoration:underline;
  text-underline-offset:2px}
.brandbar a:focus-visible{outline:3px solid var(--action,#006B70);outline-offset:-3px}
@media(max-width:760px){.brandbar .wrap{padding-inline:16px}}

/* 害獣・シロアリ区画だけの上書き。共通は _build/guide/style.css。
   形式は kujo-1（biz/gaijyu/FORMAT.md）、見た目は biz/gaijyu/DESIGN.md。ここに置くのは、この区画だけが使う部品
   （写真・見出しの帯・囲み・表・図・自分でできることと業者の作業・関連カード・畳んだ出典・作者とライセンスの一覧）。
   色と角丸は共通のトークン（--rule・--surface・--r・--action・--warn）から取り、新しい値を作らない。
   SP は760px以下（表だけ600px以下）、PC は761px以上（DESIGN.md「寸法」） */

/* 題と本文。H1 は SP 24px/1.4・PC 30px/1.35（上位19件の題の中央値23px）。段落は2文までなので間を少し詰める */
.kujo h1{font-size:30px;line-height:1.35;margin:8px 0 12px}
/* 題と帯の見出しは句の切れ目で折り、行の長さをそろえる（375px で「場／合」のように1字だけ落ちるのを減らす。
   auto-phrase を読まないブラウザは従来の折り方。長い句ははみ出さずに折る） */
.kujo h1,.kujo .block>h2,.kujo .self-limit>h2,.kujo .related>h2{word-break:auto-phrase;overflow-wrap:anywhere;text-wrap:balance}
.kujo p{margin:0 0 12px}
/* 広告を含むの1行（_build/asp.mjs の prLineHtml）は題の直下で、次の署名行と1組に見せる（間4px） */
.kujo .pr-line{margin-bottom:4px}
.kujo .answer{margin-bottom:16px}
.kujo h3{font-size:17px;line-height:1.5}
@media(max-width:760px){.kujo h1{font-size:24px;line-height:1.4}}

/* パンくずは1行。はみ出すページの題は省略記号で切る（DESIGN.md「寸法」） */
header.site .sitecrumb{flex:0 1 auto;flex-wrap:nowrap;min-width:0;max-width:100%}
.sitecrumb>a,.sitecrumb>span[aria-hidden]{flex:none;white-space:nowrap}
.sitecrumb>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 見出し。案内ページの節・境目・次に読むの h2 は淡い青緑の帯と下の2pxの線（DESIGN.md「見出し」。
   字の --ink は帯に対して13.59:1、線は帯に対して5.14:1。帯は紙に対して1.19:1なので縁は線で見せる）。
   区画トップの h2 と広告の枠の見出しは帯にしない（広告を本文の節と見分けるため） */
.kujo h2{margin:32px 0 8px;padding-top:16px}
.kujo .block>h2,.kujo .self-limit>h2,.kujo .related>h2{
  margin:40px 0 16px;padding:12px 16px;border-top:0;border-bottom:2px solid var(--action);
  border-radius:var(--r) var(--r) 0 0;background:var(--action-soft);color:var(--ink);font-size:24px;line-height:1.42}
@media(max-width:760px){
  .kujo h2{font-size:20px}
  .kujo .block>h2,.kujo .self-limit>h2,.kujo .related>h2{margin-top:32px;padding:10px 12px;font-size:20px;line-height:1.45}
}

/* 写真（DESIGN.md「写真」）。本文の幅で SP は3:2、PC は16:9に切る。切り抜きの位置は台帳の frame（img の --sp・--pc）。
   縦長の写真は contain で切らずに収める。題の文字を写真に重ねない */
.ph{margin:0 0 16px}
.ph-eye{margin:4px 0 16px}
.ph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:var(--sp,50% 50%);border-radius:var(--r);background:var(--surface)}
@media(max-width:760px){.ph.sp-contain img{object-fit:contain}}
@media(min-width:761px){
  .ph img{aspect-ratio:16/9;object-position:var(--pc,50% 50%)}
  .ph.pc-contain img{object-fit:contain}
}
/* 見るところの1文（13px）と出典の1行（12px）。どちらも --mute（紙に対して5.71:1） */
.ph figcaption{margin:6px 0 0}
.ph .ph-cap{display:block;font-size:13px;line-height:1.6;color:var(--mute)}
.ph .ph-credit{display:block;margin-top:2px;font-size:12px;line-height:1.6;color:var(--mute);overflow-wrap:anywhere}
.ph .ph-credit a{color:var(--mute);text-underline-offset:.15em}
.ph .ph-credit .ph-src{white-space:nowrap}

/* 囲みは6種類だけ（answer・要点・注意・引用・境目・PR枠。DESIGN.md「囲み」）。種類は色でなく語のラベルで示す */
.box-label{margin:0 0 4px;font-size:13px;font-weight:700;line-height:1.6;color:var(--ink)}
.kujo .point{margin:16px 0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--paper)}
.kujo .point ul{margin:0;padding-left:1.2em}
.kujo .point li{margin:4px 0}
.kujo .caution{margin:16px 0;padding:12px 14px;border-radius:var(--r);background:var(--warn-soft);color:var(--body-ink)}
.kujo .caution .box-label{color:var(--warn)}
.kujo .caution p{margin:0}
.kujo .quote .box-label{color:var(--mute)}

/* 表。caption には何の表かだけ（日付は畳んだ出典の中。FORMAT §3）。セルは15px・8px 10px */
.tbl{margin:16px 0 20px}
.tbl figcaption{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--ink)}
.tbl .tbl-cap{font-weight:700}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--r)}
.tbl-scroll:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.tbl table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.tbl thead th{background:var(--surface);color:var(--ink);font-weight:700}
.tbl tbody th{color:var(--ink);font-weight:700;min-width:6.5em}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl .note{margin:8px 0 0}
/* 区市の表（FORMAT §4）。都府県ごとに畳む。見出しは44px・出典の1行は13px */
.tbl-lead{margin:0 0 8px;font-size:15px;line-height:1.7;color:var(--body-ink)}
.muni-group{border-top:1px solid var(--rule)}
.muni-group:last-of-type{border-bottom:1px solid var(--rule)}
.muni-group>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:16px;font-weight:700;color:var(--action-text);list-style:none}
.muni-group>summary::-webkit-details-marker{display:none}
.muni-group>summary::before{content:"";flex:none;width:0;height:0;margin-right:8px;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s ease-out}
.muni-group[open]>summary::before{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.muni-group>summary::before{transition:none}}
.muni-group>summary:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.muni-group>.tbl-scroll{margin:4px 0 0}
.muni-src{margin:6px 0 12px;font-size:13px;line-height:1.6;color:var(--mute)}
.tbl-muni>.note{margin:12px 0 0}
.kujo .nw{white-space:nowrap}
.tbl-hint{display:none;margin:0 0 4px;font-size:13px;color:var(--mute)}
@media(max-width:760px){.tbl tbody th{min-width:0;width:30%}}
/* 601px以上で3〜4列をそのまま出す表は、短い語（世田谷区・記載なし・害獣駆除110番）を1〜2字で折らない（9/24 の2束目の査読）。
   auto-phrase を読まない端末は従来の折り方のまま */
@media(min-width:601px){.tbl th,.tbl td{word-break:auto-phrase}}
@media(min-width:761px){.tbl tbody th{min-width:8em}}
/* 600px以下は2列まで（DESIGN.md「表」）。畳み方は描画が決める（core.mjs の tableMobileOf）:
   3列は2列に書き直す（tbl-stack）: 行見出しを左、ほかの列を右に「列見出し：値」で積む（ハブの表と同じ考え方）。
   4列は行ごとのカード（tbl-cards）: 行見出しをカードの題にし、各列を「列見出し：値」の行にする。
   どちらも thead は読み上げのために見えない形で残し、role は描画が付け直している。
   列見出しの語は代替テキスト "" で読ませない（読み上げは列見出しを表の対応から読む） */
@media(max-width:600px){
  .tbl-stack thead,.tbl-cards thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .tbl-stack td::before,.tbl-cards td::before{content:attr(data-label) "：";content:attr(data-label) "：" / "";font-size:13px;font-weight:700;color:var(--mute)}
  .tbl-stack table{display:block}
  /* 行見出しの列は、その表でいちばん長い行見出しの幅にし、上限を35%にする（9/24。34%の固定では行見出しの短い表でも
     値の列が約200pxに押されていた）。どの行も同じ幅にそろえるため、tbody を格子にして各行（tr）は列だけを受け継ぐ（subgrid）。
     subgrid を読まないブラウザは2つ目の grid-template-columns を捨て、従来の34%のまま */
  .tbl-stack tbody{display:grid;grid-template-columns:fit-content(35%) minmax(0,1fr);column-gap:12px}
  .tbl-stack tbody tr{display:grid;grid-column:1 / -1;grid-template-columns:minmax(6em,34%) minmax(0,1fr);grid-template-columns:subgrid;column-gap:12px;padding:8px 10px;border-bottom:1px solid var(--rule)}
  /* 上限の幅で行見出しが折れるときは句の切れ目で折る（auto-phrase を読まない端末は従来の折り方） */
  .tbl-stack tbody th{word-break:auto-phrase}
  .tbl-stack tbody tr:last-child{border-bottom:0}
  .tbl-stack tbody th,.tbl-stack tbody td{display:block;padding:0;border:0;min-width:0;width:auto}
  .tbl-stack tbody th{grid-row:1 / span 2}
  .tbl-stack tbody td{grid-column:2}
  .tbl-stack tbody td+td{margin-top:4px}
  .tbl-cards .tbl-scroll{overflow:visible;border:0;border-radius:0}
  .tbl-cards table,.tbl-cards tbody,.tbl-cards tr,.tbl-cards th,.tbl-cards td{display:block;width:auto}
  .tbl-cards tbody tr{margin:0 0 8px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper)}
  .tbl-cards tbody tr:last-child{margin-bottom:0}
  .tbl-cards tbody th,.tbl-cards tbody td{padding:0;border:0;min-width:0;width:auto}
  .tbl-cards tbody th{margin:0 0 2px;font-size:16px}
  .tbl-cards tbody td{margin:4px 0 0}
  /* 原稿が mobile:"scroll" を宣言した4列以上の見比べる表だけ、枠の中で横に送る。案内の1行を出し、1列目を固定する */
  .tbl-wide .tbl-hint{display:block}
  .tbl-wide table{min-width:34rem}
  .tbl-wide tbody th{position:sticky;left:0;z-index:1;background:var(--paper);width:auto;min-width:5.5em}
  .tbl-wide thead th:first-child{position:sticky;left:0;z-index:2;background:var(--surface)}
  .tbl-wide thead th:first-child,.tbl-wide tbody th{box-shadow:inset -1px 0 0 var(--rule)}
}

/* 図（diagram-svg）。375px で viewBox 320 がほぼ等倍になる内側の幅にしてある。PC は figures.mjs の max-width まで */
.kfig{margin:16px 0 20px;padding:10px;border:1px solid var(--rule);border-radius:var(--r);background:#fff}
.kfig svg{display:block;width:100%;height:auto;margin:0 auto}
.kfig .fig-sum{margin:8px 2px 0;font-size:15px;line-height:1.7;color:var(--body-ink)}
.kfig text{font-family:var(--gothic)}
.f-t{font-size:14px;font-weight:700;fill:var(--ink)}
.f-s{font-size:13px;fill:var(--body-ink)}
.f-z{font-size:13px;fill:var(--mute)}
.f-mark-n{font-size:18px;font-weight:700;fill:var(--action)}
.f-mark-k{font-size:15px;font-weight:700;fill:var(--action)}
.f-halo{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.f-warn-t{fill:#9A2F23}
.f-line{fill:none;stroke:var(--ink);stroke-width:1.4}
.f-roof{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.f-thin{fill:none;stroke:var(--mute);stroke-width:1}
.f-sep{stroke:var(--rule);stroke-width:1}
.f-bar{stroke:var(--ink);stroke-width:2.4}
.f-tick{stroke:var(--ink);stroke-width:1.4}
.f-dim{stroke:var(--mute);stroke-width:1}
.f-lead{fill:none;stroke:var(--mute);stroke-width:.9}
.f-dot{fill:var(--mute)}
.f-open{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.f-solid{fill:var(--border);stroke:var(--ink);stroke-width:1}
.f-vent{fill:#fff;stroke:var(--ink);stroke-width:1}
.f-soil{fill:#EFEBE4;stroke:none}
.f-hatch{stroke:#9A9384;stroke-width:.8}
.f-wood{fill:#F3EBDD;stroke:var(--ink);stroke-width:1.2}
.f-tube{fill:none;stroke:#9A2F23;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.f-hi{fill:var(--action-soft);stroke:none}
.f-body{fill:var(--ink);stroke:none}
.f-bead{fill:var(--ink)}
.f-leg{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.f-wing{fill:rgba(0,107,112,.08);stroke:var(--action);stroke-width:1.2}
.f-band{fill:var(--action);stroke:none}
.f-track{stroke:var(--rule);stroke-width:1}
.f-nest{fill:none;stroke:#7A6A52;stroke-width:3;stroke-linecap:round}
.f-twig{stroke:#7A6A52;stroke-width:1.4}
.f-egg{fill:#fff;stroke:var(--ink);stroke-width:1.4}

/* 本文の出典番号 [N]。畳んだ出典の N 番へ飛ぶ。字寸は12px（DESIGN の下限） */
.cite{font-size:12px;line-height:0;vertical-align:super;margin-left:1px}
.cite a{text-decoration:none;color:var(--action-text)}

/* 自分でできることと業者の作業（2列の短い一覧。広告ではないので広告と同じ地色にしない） */
.self-limit .sl-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.self-limit .sl-col{border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px}
.self-limit .sl-pro{background:var(--surface)}
.self-limit h3{margin:0 0 6px;font-size:17px}
.self-limit ul{margin:0;padding-left:1.1em}
/* 手順の節だけに置く番号つきの手順（FORMAT「手順」・core.mjs の STEPS_HEADING_RE） */
.kujo ol.steps{margin:0 0 16px;padding-left:1.6em}
.kujo ol.steps li{margin:6px 0;padding-left:.2em}
.self-limit li{margin:0 0 4px;font-size:15px;line-height:1.7}
.self-limit li:last-child{margin-bottom:0}
@media(max-width:600px){.self-limit .sl-cols{grid-template-columns:1fr;gap:8px}}

/* 送客1枠（境目の直後）。部品は _build/asp.mjs */
.kujo .ad h2{font-size:18px;border-top:0;padding-top:0;margin-top:20px}
.kujo .ad .asp{margin-top:8px}

/* 関連カード（題＝行き先の H1 ＋ 1行＝行き先が答える問い）。広告に似せない（枠線は区切りの色） */
.rel-cards{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rel-cards li{margin:0}
/* 共有の .related a（inline-block）より強くして、カードを列の幅いっぱいにする */
.related .rel-card,.idx .rel-card{display:flex;flex-direction:column;gap:2px;height:100%;min-height:44px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--paper);text-decoration:none}
.rel-card:hover{border-color:var(--action);background:var(--action-soft)}
.rel-card:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.rel-card b{font-size:16px;line-height:1.5;color:var(--action-text)}
.rel-card span{font-size:14px;line-height:1.6;color:var(--mute)}
.rel-card b,.rel-card span{word-break:auto-phrase;text-wrap:balance}
@media(max-width:600px){.rel-cards{grid-template-columns:1fr}}

/* 監修の1行（本文の後ろ・出典の前） */
.kujo .supervise{margin:24px 0 0;font-size:14px;color:var(--mute)}

/* 出典は畳む。確認日・表の収集日・広告を確かめた日はこの中だけに書き、先頭の1行にまとめる（FORMAT §3） */
.refs{margin:24px 0 8px;font-size:14px;line-height:1.7;color:var(--mute);border-top:1px solid var(--rule);padding-top:8px}
.refs summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--action-text)}
.refs summary::-webkit-details-marker{display:none}
.refs summary::before{content:"";flex:none;width:0;height:0;margin-right:8px;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s ease-out}
.refs[open]>summary::before{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.refs summary::before{transition:none}}
.refs summary:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.refs:not([open])>:not(summary){display:none}
.refs ol,.refs ul{margin:4px 0 8px;padding-left:1.4em}
/* 出典が10件を超えると「10.」の番号の頭が欠ける。2桁の番号が入る幅にする（9/24） */
.refs ol{padding-left:2.2em}
.refs li{margin:4px 0;padding-left:0;text-indent:0}
/* 共有の .refs a は inline-block で、li の text-indent:-1em を受け継いで直前の「「」に重なっていた（9/24 の2束目の査読）。区画では行内に戻す */
.refs ol a,.refs ul a{display:inline;padding-block:0}
/* 出典の題・発行者・原文を数えた値の ID には、区切りの無い長い英数字（URL やファイル名）が入りうる。375pxではみ出さないよう、ここだけ任意の位置で折る */
.refs li{overflow-wrap:anywhere}
.refs a{color:var(--mute)}
.refs .refs-sub{margin:8px 0 0;font-weight:700;color:var(--ink)}
.refs .refs-date{margin:4px 0 0}
.refs b{color:var(--ink)}

/* 作者とライセンスの一覧（/gaijyu/credits/）。写真の「写真の出典」から飛んだ行を淡い地で示す */
.cr-note{font-size:14px;color:var(--mute)}
.cr-list{list-style:none;margin:8px 0 0;padding:0}
.cr-list li{padding:12px 8px;border-bottom:1px solid var(--rule);scroll-margin-top:16px}
.cr-list li:target{background:var(--action-soft)}
.cr-cap{display:block;color:var(--ink)}
.cr-line{display:block;font-size:14px;line-height:1.7;color:var(--mute);overflow-wrap:anywhere}

/* 区画トップのまとまり */
.idx h2{font-size:20px}
.f-hole{fill:var(--action-soft);stroke:var(--ink);stroke-width:1.4}
.f-break{fill:none;stroke:var(--ink);stroke-width:1.2}
.f-twig-in{fill:none;stroke:#A8977A;stroke-width:1.2}


/* 成果報酬の広告枠（_build/asp.mjs）。景表法のステマ規制で読者に見える表示が要る。 */
/* 本文の先頭の「広告を含む」の1行（prLineHtml）。注記と同じ13pxで、色は本文と同じ #37413D（ルートの v3.css は --body、
   区画の guide/style.css は --body-ink）。署名行の --mute より薄くしない（運用基準 第３の1⑵カ・キ）。枠・地の色・リンクは付けない */
.pr-line{margin:0;font-size:13px;line-height:1.6;color:var(--body,var(--body-ink,#37413D))}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.btn{display:inline-block;padding:12px 20px;border:1px solid var(--action,#006B70);border-radius:var(--r,4px);background:var(--action,#006B70);color:#fff;font-weight:700;text-decoration:none;line-height:1.4}
.btn:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
/* 送客ボタンの色は --action から取る。overlay.css:365 の
   .cta-official .btn,.btn-primary,.btn-go{background:var(--action)} が
   塗り直すので、overlay を読む市場では --cv はボタンに届かない。
   部品側だけ --cv を見ると市場ごとに出所が変わるので1か所に揃える
   （2026-09-20に別セッションが本番を測って判明）。 */
.btn-go{background:var(--action,#006B70);border-color:var(--action,#006B70);color:#fff}
.btn-go:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
/* 枠ごと広告と読ませる（2026-09-22の監査 3-4）。区別はボタン単体の色ではなく、
   1pxの操作枠色の囲みと、枠の左上に固定したPRチップの帯で作る。 */
.asp{margin:24px 0;padding:20px;background:var(--surface,#F7F7F7);border:1px solid var(--border,#7D8984);border-radius:var(--r,4px)}
.asp-head{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--rule,#DDD);font-size:13px;color:var(--mute,#55636A);display:flex;align-items:center;gap:8px}
/* 広告ラベルは13px以上（FORMAT §9-3）。小さくすると景表法のステマ規制で求める「読者に見える表示」を満たさない */
.asp-pr{display:inline-block;padding:2px 8px;background:var(--ink,#1B2A41);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
.asp-name{margin:0 0 8px;font-size:18px;line-height:1.5;font-weight:700}
.asp-lead{margin:0 0 8px}
.asp-spec{margin:0 0 8px;font-size:14px;line-height:1.5}
.asp-spec>div{display:grid;grid-template-columns:7em 1fr;gap:8px;padding:2px 0}
.asp-spec dt{color:var(--mute,#55636A)}
.asp-spec dd{margin:0}
.asp-note{margin:0;font-size:14px;color:var(--mute,#55636A)}
/* 押せる面は .asp-act 1つ。上段に自分の言葉（何を頼めるか）、下段に素材の文言（A8 は文言の変更を禁じる）。
   素材の a を ::after で面全体に広げ、どこを押しても同じ1本のリンクになる（2026-09-25。上位の送客枠は
   「動詞＋無料」の面が主で、社名だけのボタンは行き先が読めない）。高さは指で押せる56px以上 */
.asp-act{position:relative;display:block;margin:12px 0 0;padding:12px 48px 12px 16px;min-height:56px;box-sizing:border-box;border:1px solid var(--action,#006B70);border-radius:var(--r,4px);background:var(--action,#006B70);color:#fff}
.asp-act:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53)}
.asp-act:has(a:focus-visible){outline:3px solid var(--action,#006B70);outline-offset:2px}
.asp-act::before{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-6px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.asp-do{display:block;font-size:17px;font-weight:700;line-height:1.5}
.asp-link{display:block;margin:2px 0 0;font-size:13px;line-height:1.5}
.asp-link>a{color:#fff;font-weight:400;text-decoration:none;overflow-wrap:anywhere}
.asp-link>a:focus-visible{outline:none}
.asp-link>a::after{content:"";position:absolute;inset:0;border-radius:var(--r,4px)}
/* 計測の1px画像は行の外へ出す（2026-09-23 の ui-review） */
.asp-link>img{position:absolute;visibility:hidden}
/* ラベルの無い枠は素材の文言を主の文字にする */
.asp-act>.asp-link:first-child{margin:0;font-size:17px}
.asp-act>.asp-link:first-child>a{font-weight:700}
/* 末尾の再掲。本文を読み終えた人向けに PR・社名・押せる面だけを置く */
.asp.asp-compact{margin:16px 0;padding:8px 12px}
/* 見出しに「広告」がある区画（head 空）は PR チップと社名を1行にする */
.asp-head>.asp-name{margin:0;color:var(--ink,#1B2A41)}
.asp-compact .asp-head{margin:0;padding:0;border:0}
.asp-compact .asp-name{font-size:16px}
.asp-compact .asp-act{margin:8px 0 0;padding-top:8px;padding-bottom:8px}
.asp-list .asp+.asp{margin-top:16px}
@media(max-width:760px){.asp{padding:16px}}