/* メディア型レイアウト（registry layout: 'media'）。商陣の既存サイトの型：細い枠線・角を丸めない・色は印とボタンだけ */
:root {
  --accent: #2f4a6e; --accent-bg: #e8edf4; --ink: #1f2933; --body: #2b3640; --sub: #5d6878; --weak: #8a94a3;
  --line: #d9dde3; --frame: #cfd5dd; --paper: #ffffff; --ground: #f5f6f8; --tint: #f0f2f5;
  --slate: var(--accent); --slate-soft: var(--accent-bg); --bill: #b07a2a; --bill-soft: #f8efdd; --reed: #4f7a7a; --reed-soft: #e4efef; --link: #2a5a9a;
  --f-ink: #34507a; --f-soft: #e7ecf3; --f-bird: #8fa3be; --f-bill: #eab53d; --f-warn: #c8402f; --marker: #fff2a8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --marker: #5a4d12; --ink: #e7ebf1; --body: #d5dbe3; --sub: #a6b0bf; --weak: #7f8a99; --line: #2e3846; --frame: #3a4556; --paper: #1b222c; --ground: #121820; --tint: #1f2731; --accent-bg: #243042; --link: #9dc0ee; --f-ink: #c9d7ec; --f-soft: #263244; }
}
:root[data-theme="dark"] { --marker: #5a4d12; --ink: #e7ebf1; --body: #d5dbe3; --sub: #a6b0bf; --weak: #7f8a99; --line: #2e3846; --frame: #3a4556; --paper: #1b222c; --ground: #121820; --tint: #1f2731; --accent-bg: #243042; --link: #9dc0ee; --f-ink: #c9d7ec; --f-soft: #263244; }
/* registry の colors（slate 系）をメディア型の名前に写す */
:root { --accent: var(--slate); --accent-bg: var(--slate-soft); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-size: 16px; line-height: 1.9; letter-spacing: .02em;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", Meiryo, system-ui, sans-serif; overflow-x: hidden; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.in { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.masc { display: inline-block; }

/* ボタン：四角。塗りは accent、副は枠だけ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; background: var(--accent); color: #fff; border: 2px solid var(--accent); font-weight: 700; font-size: 14px; letter-spacing: .06em; border-radius: 0; }
.btn:hover { background: var(--paper); color: var(--accent); text-decoration: none; }
.btn-g { background: var(--paper); color: var(--ink); border: 1.5px solid var(--frame); }
.btn-g:hover { border-color: var(--accent); color: var(--accent); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-bg); padding: 2px 8px; letter-spacing: .04em; }
.card-id { font-size: 12px; color: var(--weak); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: 13px; color: var(--body); background: var(--paper); border: 1.5px solid var(--frame); padding: 3px 10px; margin: 0 8px 8px 0; }

/* ヘッダー */
.hd { background: var(--paper); border-bottom: 1.5px solid var(--frame); position: sticky; top: 0; z-index: 10; }
.hd-in { height: 64px; display: flex; align-items: center; gap: 26px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); min-height: 44px; }
.logo:hover { text-decoration: none; }
.logo-m { width: 36px; height: 36px; border: 1.5px solid var(--frame); background: var(--tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-n { display: block; font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; }
.logo-p { display: block; font-size: 11px; color: var(--weak); letter-spacing: .14em; line-height: 1.3; }
.nav { display: flex; gap: 18px; font-size: 14px; }
.nav a { color: var(--body); display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.nav a:hover { color: var(--accent); text-decoration: none; }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.langs { display: flex; gap: 2px; border: 1.5px solid var(--frame); }
.langs a { font-size: 12px; padding: 4px 10px; color: var(--sub); }
.langs a[aria-current] { background: var(--ink); color: var(--paper); }
.langs a:hover { text-decoration: none; }

/* トップ */
.hero { background: var(--paper); border-bottom: 1.5px solid var(--frame); padding: 44px 0 36px; }
.eyebrow { font-size: 13px; color: var(--weak); letter-spacing: .08em; margin: 0 0 10px; }
.hero h1 { font-size: 34px; line-height: 1.4; margin: 0 0 14px; letter-spacing: .02em; }
.hero-lead { font-size: 16px; color: var(--body); max-width: 720px; margin: 0 0 16px; }
.pills { margin: 0 0 18px; }
.go-row { display: flex; flex-wrap: wrap; gap: 12px; }
.home-intro { padding: 28px 0 0; max-width: 760px; color: var(--body); }
.home-intro h2 { font-size: 20px; margin: 0 0 8px; }
.sec { padding: 36px 0 8px; }
.sh { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; }
.sh-n { font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; padding-top: 4px; }
.sh-en { display: block; font-size: 11px; color: var(--weak); letter-spacing: .16em; }
.sh h2 { font-size: 22px; margin: 2px 0 0; line-height: 1.3; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 1.5px solid var(--frame); padding: 16px 18px; color: var(--ink); min-height: 150px; }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card b { font-size: 16px; line-height: 1.5; }
.card-desc { font-size: 13px; color: var(--sub); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 本文の枠 */
.wrap { max-width: 1160px; margin: 0 auto; padding: 24px 20px 48px; }
.wrap.with-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.wrap > main, .article, .body { min-width: 0; } /* 表やツールが入っても横にはみ出さない（グリッドの子は min-width:auto で膨らむ） */
.logo-n { white-space: nowrap; }
.langs a { white-space: nowrap; }
.home .in { padding: 0; }
.article { background: var(--paper); border: 1.5px solid var(--frame); padding: 28px 36px 36px; }
.crumbs { font-size: 13px; color: var(--weak); margin: 0 0 14px; }
.crumbs a { color: var(--weak); }
.badges { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.article h1 { font-size: 30px; line-height: 1.45; margin: 0 0 10px; letter-spacing: .01em; }
.meta { font-size: 13px; color: var(--weak); margin: 0 0 18px; }
.editor { display: flex; gap: 12px; align-items: center; background: var(--tint); border: 1.5px solid var(--frame); padding: 10px 14px; margin: 0 0 18px; font-size: 13px; }
.editor b { display: block; font-size: 14px; }
.editor span { color: var(--sub); }
.lead { font-size: 17px; color: var(--body); margin: 0 0 18px; }
.photo { margin: 18px 0; }
.photo img { width: 100%; border: 1.5px solid var(--frame); }
.photo figcaption { font-size: 13px; color: var(--sub); margin-top: 6px; }
.credit { display: block; font-size: 12px; color: var(--weak); }
.cta-box { display: flex; align-items: center; gap: 14px; background: var(--accent-bg); border: 1.5px solid var(--accent); padding: 14px 18px; margin: 18px 0; }
.cta-box div { flex: 1; min-width: 0; }
.cta-box b { display: block; font-size: 15px; }
.cta-box span { font-size: 13px; color: var(--body); }
.toc { border: 1.5px solid var(--frame); background: var(--tint); padding: 12px 18px; margin: 18px 0 26px; }
.toc summary { font-weight: 700; cursor: pointer; font-size: 15px; }
.toc-list { margin: 10px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.8; }
.toc-list a { color: var(--body); }

/* 見出し：h2 は左に帯＋下線、h3 は細い帯 */
.body h2 { font-size: 22px; line-height: 1.4; margin: 40px 0 16px; padding: 8px 0 8px 14px; border-left: 5px solid var(--accent); border-bottom: 1.5px solid var(--frame); }
.body h3 { font-size: 17px; margin: 28px 0 10px; padding-left: 10px; border-left: 3px solid var(--accent); }
.body p { margin: 0 0 16px; color: var(--body); }
.body ul, .body ol { padding-left: 24px; margin: 0 0 16px; color: var(--body); }
.body li { margin: 4px 0; }
.body strong { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, var(--marker) 62%); padding: 0 2px; }
.note { background: var(--bill-soft); border-left: 4px solid var(--bill); padding: 10px 14px; margin: 16px 0; }
.note p { margin: 4px 0; }
.note .masc { display: none; }

/* 表：枠線1px・見出し行は薄い塗り */
.table-wrap { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.7; background: var(--paper); }
th, td { border: 1px solid var(--frame); padding: 8px 10px; text-align: left; vertical-align: top; }
thead th { background: var(--tint); font-weight: 700; white-space: nowrap; }
.data-table table caption { caption-side: top; text-align: left; font-weight: 700; padding: 6px 2px; }
.data-table th[scope="row"] { background: var(--tint); white-space: nowrap; font-weight: 700; }
.data-table.spec table { max-width: 560px; }
.data-table.spec th[scope="row"] { width: 38%; }
.data-source { font-size: 12px; color: var(--weak); margin: -8px 0 16px; }
details.data-source summary { cursor: pointer; display: inline-block; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
details.data-source ul { margin: 6px 0 0; padding-left: 1.2em; }
details.data-source li { margin: 2px 0; overflow-wrap: anywhere; }

/* 図・ツール */
.fig { margin: 20px 0; background: var(--paper); border: 1.5px solid var(--frame); padding: 12px; }
.figsvg { width: 100%; height: auto; display: block; font-family: inherit; }
.fig figcaption { font-size: 13px; color: var(--sub); margin-top: 6px; }
.f-label { font-size: 13px; fill: var(--ink); } .f-small { font-size: 11px; fill: var(--sub); } .f-strong { font-weight: 700; } .f-big { font-size: 28px; font-weight: 700; fill: var(--accent); }
.f-land { fill: var(--tint); stroke: var(--frame); stroke-width: 1.5; } .f-node { fill: var(--paper); stroke: var(--frame); stroke-width: 1.5; } .f-nodeS { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.5; }
.f-dash { stroke: var(--weak); stroke-width: 1; stroke-dasharray: 4 3; } .f-axis { stroke: var(--frame); } .f-track { stroke: var(--frame); stroke-width: 3; }
.f-leaf { fill: #7fae86; stroke: #4f7a5a; stroke-width: 1.2; } .f-yellow { fill: #e9d36a; stroke: #b9a13a; stroke-width: 1.2; } .f-stem { stroke: #5a7f63; stroke-width: 4; stroke-linecap: round; }
.f-pot { fill: #c9a27a; stroke: #8f6b48; stroke-width: 1.5; } .f-soil { fill: #6f5540; } .f-soil-dry { fill: #a88a6a; } .f-finger { fill: #f1cfb6; stroke: #b98f73; stroke-width: 1.5; } .f-hole { fill: var(--paper); stroke: #8f6b48; }
.f-window { fill: #cfe6f7; stroke: #7fa6c4; stroke-width: 1.5; } .f-sun { stroke: #e3b23c; stroke-width: 2; stroke-linecap: round; }
.tool { background: var(--paper); border: 1.5px solid var(--accent); padding: 14px 18px; margin: 16px 0; }
.tool h3 { margin: 14px 0 6px; font-size: 15px; padding-left: 0; border-left: 0; color: var(--accent); }
.tool h3:first-child { margin-top: 0; }
.tool label { display: block; font-size: 13px; color: var(--sub); margin: 8px 0 4px; }
.tool input, .tool select { font: inherit; padding: 8px 10px; border: 1.5px solid var(--frame); border-radius: 0; background: var(--paper); color: var(--ink); max-width: 100%; }
.tool .tool-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.tool .tool-out { margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--ink); }
.tool .tool-out small { font-weight: 400; color: var(--sub); font-size: 13px; display: block; }

/* 関連・末尾・サイドバー */
.related { margin-top: 40px; }
.related h2, .tail h2, .side-box h2 { font-size: 15px; letter-spacing: .06em; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1.5px solid var(--frame); }
.tail { display: none; }
.side { display: flex; flex-direction: column; gap: 16px; }
.side-box { background: var(--paper); border: 1.5px solid var(--frame); padding: 14px 16px; }
.side-box.sticky { position: sticky; top: 80px; }
.side-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.side-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.side-list li:last-child { border-bottom: 0; }
.side-list a { color: var(--body); }
.kws { display: flex; flex-wrap: wrap; gap: 6px; }
.kw { font-size: 12px; border: 1.5px solid var(--frame); padding: 3px 8px; color: var(--body); }
.kw:hover { border-color: var(--accent); text-decoration: none; }
.side .toc-list { padding-left: 20px; }
.nf { text-align: center; padding: 60px 20px; }

/* フッター */
.ft { border-top: 1.5px solid var(--frame); background: var(--paper); padding: 28px 0 36px; margin-top: 24px; font-size: 13px; color: var(--sub); }
.ft-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 8px; }
.ft-en { font-size: 11px; color: var(--weak); letter-spacing: .14em; }
.ft-text { max-width: 720px; margin: 0 0 8px; }
.ft-links a { color: var(--sub); }
/* フッターのサイトマップ。スマホは2列、PCは4〜5列 */
.ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ft-top > div { flex: 1 1 280px; min-width: 0; }
.ft-brand > span { display: flex; flex-direction: column; line-height: 1.3; }
.ft-langs { display: flex; gap: 6px; }
.ft-langs a { border: 1px solid var(--line); padding: 4px 10px; color: var(--sub); text-decoration: none; font-size: 12px; }
.ft-langs a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ft-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding: 20px 0; }
@media (min-width: 760px) { .ft-cols { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.ft-col { min-width: 0; }
.ft-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); padding-bottom: 6px; border-bottom: 2px solid var(--accent, var(--ink)); }
.ft-h a { color: inherit; text-decoration: none; }
.ft-col ul { list-style: none; margin: 0; padding: 0; }
.ft-col li { margin: 0; padding: 0; background: none; border: 0; }
.ft-col li a { display: block; padding: 6px 0; color: var(--sub); text-decoration: none; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ft-col li a:hover { color: var(--ink); text-decoration: underline; }
.ft-col li a[aria-current] { color: var(--ink); font-weight: 700; }
.ft-more a { color: var(--link, var(--ink)) !important; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.ft-up { color: var(--sub); text-decoration: none; font-size: 12px; }

/* 広告の枠 */
.ad { margin: 18px 0; min-height: 90px; }

@media (max-width: 900px) {
  .wrap.with-side { grid-template-columns: 1fr; }
  .side { display: none; }
  .tail { display: block; background: var(--paper); border: 1.5px solid var(--frame); padding: 16px 18px; margin-top: 20px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .hero h1 { font-size: 28px; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .article { padding: 18px 14px 28px; }
  .article h1 { font-size: 22px; line-height: 1.5; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .meta { font-size: 12px; }
  .editor { padding: 8px 10px; font-size: 12px; gap: 8px; }
  .editor b { font-size: 13px; }
  .editor .masc { width: 32px; height: 32px; }
  .lead { font-size: 16px; }
  .body p { margin: 0 0 14px; }
  .body h2 { font-size: 18px; margin: 32px 0 12px; padding: 6px 0 6px 12px; }
  .body h3 { font-size: 16px; margin: 22px 0 8px; }
  table { font-size: 13px; }
  th, td { padding: 6px 8px; }
  .data-table th[scope="row"] { white-space: normal; }
  .cta-box { padding: 12px 14px; }
  .cta-box .masc { display: none; }
  .toc { padding: 10px 14px; }
  .toc-list { font-size: 13px; }
  .hero { padding: 28px 0 24px; }
  .hero h1 { font-size: 24px; }
  .hd-in { gap: 4px 10px; height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; } /* サイト名が長い言語（es の Calendario Bonsái など）で言語の切り替えが右にはみ出すので、収まらないときは2段に折り返す */
  .logo-p { display: none; }
  .logo-n { font-size: 15px; }
  .logo-m { width: 30px; height: 30px; }
  .langs a { padding: 3px 7px; font-size: 11px; }
  .hd-r { gap: 8px; }
  .hd-r .btn { display: none; } /* スマホではヘッダーのボタンを出さない（本文の CTA 箱とトップのボタンで足りる） */
  .hd { position: static; }
  .body h2 { font-size: 19px; }
  .cta-box { flex-wrap: wrap; }
  .cta-box .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 目次：H2 を開くと H3（details）。要点の ✓ 一覧 */
.toc-list { list-style: none; padding-left: 0; counter-reset: toc; }
.toc-h2 { counter-increment: toc; padding: 6px 0; border-bottom: 1px solid var(--line); }
.toc-h2:last-child { border-bottom: 0; }
.toc-h2 > a::before, .toc-h2 summary .toc-t::before { content: counter(toc, decimal-leading-zero) " "; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.toc-h2 details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.toc-h2 details > summary::-webkit-details-marker { display: none; }
.toc-h2 details > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(45deg); margin-left: auto; margin-right: 6px; transition: transform .15s; flex-shrink: 0; }
.toc-h2 details[open] > summary::after { transform: rotate(-135deg); }
.toc-h2 summary .toc-t { flex: 1; min-width: 0; }
.toc-go a { color: var(--accent); font-size: 12px; }
.toc-n { font-size: 11px; color: var(--paper); background: var(--sub); border-radius: 10px; padding: 0 7px; line-height: 18px; flex-shrink: 0; }
.toc-h3 { list-style: none; padding: 6px 0 2px 22px; margin: 0; font-size: 13px; }
.toc-h3 li { padding: 4px 0; color: var(--sub); }
.toc-h3 li::before { content: "– "; color: var(--weak); }
.toc-h3 a { color: var(--body); }
.side .toc-h3 { font-size: 12px; }

/* Q&A の印：見出しに Q、直後の答えに A */
.body.qa h2, .body.qa h3 { position: relative; }
.body.qa h2 { padding-left: 46px; }
.body.qa h3 { padding-left: 38px; }
.body.qa h2::before, .body.qa h3::before { content: "Q"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); }
.body.qa h3::before { left: 8px; width: 20px; height: 20px; line-height: 20px; font-size: 12px; }
.body.qa p.a { position: relative; padding-left: 34px; font-weight: 700; color: var(--ink); }
.body.qa p.a::before { content: "A"; position: absolute; left: 0; top: 3px; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent); border: 2px solid var(--accent); background: var(--paper); }
@media (max-width: 600px) { .body.qa h2 { padding-left: 40px; } .body.qa h2::before { left: 10px; width: 22px; height: 22px; line-height: 22px; } }

/* 広告の枠（発行者IDと adSlots があるときだけ出る）。本文の文字と区別がつくよう、上下に余白と薄い線 */
.ad { margin: 20px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.ad-side { margin: 0; padding: 0; border: 0; }
.ad-tail { display: none; }
@media (max-width: 900px) { .ad-tail { display: block; } }

/* ===== 読みやすさ・やわらかさ（参考：AND PLANTS のマガジン。2026-10-23 本人の指定） =====
   本文は灰色・行間2.0・字間ゆったり、見出しはサイトの色、太字は黄色の細いマーカー、番号の一覧は灰色の箱、目次は細い枠 */
:root { --text: #515151; --marker: #ffe600; --box: #f4f4f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text: #cfd5dc; --marker: #7a6a00; --box: #222a33; } }
:root[data-theme="dark"] { --text: #cfd5dc; --marker: #7a6a00; --box: #222a33; }
body.media { letter-spacing: .05em; }
.body p, .body li, .lead { color: var(--text); font-size: 15px; line-height: 2; letter-spacing: .06em; }
.body p { margin: 0 0 18px; }
.article h1 { color: var(--accent); letter-spacing: .08em; line-height: 1.6; }
.body h2 { color: var(--accent); border-left: 4px solid var(--accent); border-bottom: 2px solid var(--accent); padding-top: 14px; padding-bottom: 12px; margin: 48px 0 16px; letter-spacing: .06em; }
.body h3 { color: var(--accent); border-left: 4px solid var(--accent); letter-spacing: .05em; margin-top: 30px; }
/* 太字：黄色の細いマーカー（文字の下 70〜90%） */
.body strong { color: var(--text); background: linear-gradient(transparent 70%, var(--marker) 70%, var(--marker) 90%, transparent 90%); padding: 0 1px; }
/* 答え（A）の段落はサイトの色で */
.body.qa p.a { color: var(--accent); }
/* Q／A の印は丸く */
.body.qa h2::before, .body.qa h3::before, .body.qa p.a::before { border-radius: 50%; }
/* 番号の一覧は灰色の箱、番号はサイトの色 */
.body ol { background: var(--box); padding: 18px 22px 18px 44px; margin: 0 0 20px; }
.body ol li::marker { color: var(--accent); font-weight: 700; }
.body ul li::marker { color: var(--accent); }
/* 目次：細い灰色の枠、見出しを中央に */
.toc { background: var(--paper); border: 1px solid #aaa; padding: 16px 20px; }
.toc > summary { text-align: center; color: var(--accent); letter-spacing: .1em; }
.toc-h2 a, .toc-h2 .toc-t { color: var(--accent); }
/* 注意の枠・編集部欄・CTA をやわらかく */
.note { background: var(--box); border-left: 4px solid var(--bill); }
.editor { background: var(--box); border-color: transparent; }
.cta-box { border-width: 1px; }
.body table { color: var(--text); }
thead th { color: var(--accent); }
@media (max-width: 600px) {
  .body p, .body li, .lead { font-size: 14.5px; }
  .body h2 { font-size: 18px; padding-top: 12px; padding-bottom: 10px; margin-top: 40px; }
  .body ol { padding: 14px 16px 14px 36px; }
}
/* 箇条書きも灰色の箱に（AND PLANTS と同じ） */
.body ul:not(.checks) { background: var(--box); padding: 16px 22px 16px 40px; margin: 0 0 20px; }
@media (max-width: 600px) { .body ul:not(.checks) { padding: 12px 14px 12px 32px; } }
/* 図の部品（観葉植物の図4枚） */
.f-root-ok { fill: none; stroke: #d8c7a3; stroke-width: 3; stroke-linecap: round; }
.f-root-bad { fill: none; stroke: #5b4636; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 3; }
.f-stone { fill: #b9b4ab; stroke: #8f8a80; } .f-space { fill: #e8f2f8; }
.f-num { fill: var(--accent); } .f-num-t { fill: #fff; font-size: 14px; font-weight: 700; }
.f-arrow { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; }
.f-water { stroke: #5aa6d6; stroke-width: 3; fill: none; stroke-linecap: round; }
.f-room { fill: var(--box); stroke: var(--frame); stroke-width: 1.5; } .f-floor { stroke: #a88a6a; stroke-width: 4; }
.f-heater { fill: #fff; stroke: var(--sub); stroke-width: 1.5; } .f-wind { stroke: #e39a5a; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.f-ok { fill: var(--accent); } .f-ng { fill: #c8402f; } .f-mark { fill: #fff; font-size: 15px; font-weight: 700; }

/* ハシビロコウの吹き出し（本文の「> 」の枠）。マスコットが左、ことばは吹き出しの中 */
.media .note { display: flex; gap: 12px; align-items: flex-start; background: transparent; border: 0; padding: 0; margin: 22px 0; }
.media .note .masc { display: block; flex: 0 0 auto; width: 56px; height: 56px; }
.media .note .note-b { position: relative; flex: 1; min-width: 0; background: var(--box); border-radius: 14px; padding: 12px 16px; }
.media .note .note-b::before { content: ""; position: absolute; left: -9px; top: 18px; border: 9px solid transparent; border-left: 0; border-right-color: var(--box); }
.media .note .note-b p { margin: 4px 0; font-size: 14.5px; line-height: 1.9; color: var(--text); }
/* 図はスマホ基準（横360で描く）。PC でも大きくなりすぎないよう最大 560px で中央に */
.fig .figsvg { max-width: 560px; margin: 0 auto; }
.f-label { font-size: 14px; } .f-small { font-size: 12.5px; fill: var(--sub); }
.f-hole { fill: var(--paper); stroke: #8f6b48; } .f-soil-dry { fill: #a88a6a; } .f-finger { fill: #f1cfb6; stroke: #b98f73; stroke-width: 1.5; }

/* 混泳の相性：早見表（[[matrix:]]）と相手の一覧（[[pairs:]]）。○は水草の緑、△は琥珀、×は赤 */
.matrix table { width: auto; border-collapse: collapse; }
.matrix th, .matrix td { padding: 6px 8px; text-align: center; border: 1px solid var(--line); font-size: 14px; }
.matrix thead th { background: var(--tint); font-weight: 700; min-width: 32px; }
.matrix tbody th { text-align: left; white-space: nowrap; background: var(--tint); font-weight: 700; font-size: 13px; }
.mx-n { display: inline-block; min-width: 1.6em; color: var(--sub); font-weight: 400; }
.mx-ok { color: #2e7d4f; font-weight: 700; }
.mx-care { color: #b26a00; font-weight: 700; }
.mx-ng { color: #c0392b; font-weight: 700; }
td.mx-ok { background: #eaf6ee; } td.mx-care { background: #fdf3e2; } td.mx-ng { background: #fbe9e7; }
.mx-self { color: var(--weak); }
.mx-legend { font-size: 13px; color: var(--sub); margin: 6px 0 0; }
.pairs { display: grid; gap: 12px; margin: 14px 0 6px; }
.pairs-g { border: 1px solid var(--line); padding: 10px 14px; background: var(--paper); }
.pairs-ok { border-left: 4px solid #2e7d4f; } .pairs-care { border-left: 4px solid #b26a00; } .pairs-ng { border-left: 4px solid #c0392b; }
.pairs-h { margin: 0 0 6px; font-weight: 700; }
.media .pairs ul { list-style: none; margin: 0; padding: 0; background: none; border: 0; }
.media .pairs li { padding: 6px 0; border-top: 1px dashed var(--line); margin: 0; background: none; }
.media .pairs li:first-child { border-top: 0; }
.pairs li b { display: block; }
.pairs li span { display: block; font-size: 13px; color: var(--sub); line-height: 1.6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) td.mx-ok { background: #1d3326; } :root:not([data-theme="light"]) td.mx-care { background: #3a2e1f; } :root:not([data-theme="light"]) td.mx-ng { background: #3a2020; } }
/* 相性チェックの結果一覧 */
.media .tool .tm-list { list-style: none; margin: 8px 0 0; padding: 0; background: none; border: 0; font-size: 15px; font-weight: 400; }
.media .tool .tm-list li { padding: 8px 0; border-top: 1px dashed var(--line); margin: 0; background: none; }
.tool .tm-list li small { margin-top: 2px; }
.tool .tool-note { font-size: 12px; color: var(--weak); margin: 10px 0 0; }
.tool .tool-row label { flex: 1 1 140px; min-width: 0; }
.tool .tool-row select { width: 100%; }
/* 熱帯魚の図 */
.f-tank { fill: #eef7fa; stroke: var(--frame); stroke-width: 1.5; } .f-surface { stroke: #7fbcd2; stroke-width: 2; }
.f-gravel { fill: #e7dcc4; } .f-pill { fill: var(--accent); } .f-pill-t { fill: #fff; }
.f-fish { fill: #f2a65a; stroke: #b86d22; stroke-width: 1; } .f-fish-big { fill: #9fc5d4; stroke: #4c8aa3; stroke-width: 1.5; }
.f-eye { fill: #1f2933; } .f-mouth { stroke: #4c8aa3; stroke-width: 2; fill: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .f-tank { fill: #1b2b31; } :root:not([data-theme="light"]) .f-gravel { fill: #3a3326; } }
/* 早見表をスマホ幅（本文約305px）に6種まで収める：名前は折り返し、マスは詰める */
.matrix th, .matrix td { padding: 6px 4px; }
.matrix thead th { min-width: 28px; }
.matrix tbody th { white-space: normal; min-width: 6.2em; font-size: 12.5px; line-height: 1.35; }
.tool .tool-row label { flex: 1 1 116px; }
.matrix tbody th { word-break: keep-all; }
/* ツールの中の見出しは質問ではないので Q 印を付けない（相性チェック・計算ツール） */
.body.qa .tool h3 { padding-left: 10px; }
.body.qa .tool h3::before { content: none; }

/* 案内役「コウくん」（mascot: 'kou' のサイト） */
/* トップの帯（2026-10-23 作り直し）：.home .in の padding: 0 が帯の中まで効いて文字が左端に付いていたので、帯の中だけ余白を戻す */
.home .hero .in { padding: 0 20px; }
.hero .in.has-guide { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px 48px; align-items: center; }
.hero-main { min-width: 0; }
.hero-guide { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 18px 18px 6px; background: var(--tint); border: 1.5px solid var(--frame); }
.hero-guide .hg-m { width: 150px; height: 150px; flex: none; display: block; }
.hg-b { position: relative; margin: 0; width: 100%; padding: 12px 14px; background: var(--paper); border: 1.5px solid var(--frame); border-radius: 14px; font-size: 14px; line-height: 1.7; color: var(--body); }
.hg-b::before { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--frame); border-bottom: 0; }
.hg-b b { display: block; font-size: 12px; color: var(--accent); }
@media (max-width: 860px) {
  .hero .in.has-guide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-guide { flex-direction: row; align-items: flex-end; gap: 10px; padding: 12px 14px 0; }
  .hero-guide .hg-m { width: 76px; height: 76px; order: -1; }
  .hg-b { flex: 1; min-width: 0; margin-bottom: 12px; }
  .hg-b::before { left: -9px; bottom: 14px; transform: none; border: 8px solid transparent; border-right-color: var(--frame); border-left: 0; }
}
.editor.guide b { color: var(--accent); }
.editor .ed-bio { display: block; color: var(--body); margin: 2px 0 1px; } /* 執筆者紹介（案内役の紹介文。2026-10-23） */
.lead-guide { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; }
.lead-guide .lg-m { width: 64px; height: 64px; flex: none; }
.lg-b { position: relative; flex: 1; min-width: 0; padding: 10px 14px; background: var(--tint); border-radius: 14px; }
.lg-b::before { content: ""; position: absolute; left: -8px; top: 22px; border: 8px solid transparent; border-right-color: var(--tint); border-left: 0; }
.lg-n, .note-n { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.lead-guide .lead { margin: 0; }
@media (max-width: 600px) { .hero-guide .hg-m { width: 76px; height: 76px; } .lead-guide .lg-m { width: 52px; height: 52px; } }
/* 記事カードの写真（記事の冒頭の写真。2026-10-22） */
.card-img { display: block; width: calc(100% + 36px); max-width: none; margin: -16px -18px 6px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tint); border-bottom: 1.5px solid var(--frame); }

/* 盆栽の年間カレンダー（[[calendar:]] 1種の月×作業、[[months:]] 作業1つの樹種×12か月） */
.calendar table, .months table { border-collapse: collapse; width: auto; }
.calendar th, .calendar td { border: 1px solid var(--line); padding: 5px 8px; text-align: center; font-size: 13px; }
.calendar thead th { background: var(--tint); font-size: 12px; }
.calendar tbody th { background: var(--tint); white-space: nowrap; }
.cal-on { color: var(--accent); font-weight: 700; }
.cal-repot { background: #f4ebdf; } .cal-prune { background: #e8efe4; } .cal-pinch { background: #e9f1e0; } .cal-fertilize { background: #fbf3dc; } .cal-wire { background: #eef1f5; }
.months th, .months td { border: 1px solid var(--line); padding: 4px 0; text-align: center; font-size: 12px; min-width: 18px; }
.months thead th { background: var(--tint); font-weight: 700; }
.months tbody th { background: var(--tint); text-align: left; padding: 4px 6px; white-space: normal; min-width: 5.5em; font-size: 12px; line-height: 1.35; }
.mo-on { background: var(--accent); }
.mo-off { background: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal-repot, :root:not([data-theme="light"]) .cal-prune, :root:not([data-theme="light"]) .cal-pinch, :root:not([data-theme="light"]) .cal-fertilize, :root:not([data-theme="light"]) .cal-wire { background: var(--tint); } }
/* 盆栽の今月やること */
.tool .bz-h { margin: 10px 0 4px; font-size: 13px; color: var(--sub); }
.tool .bz-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tool .bz-chk { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; color: var(--ink); }
.tool .bz-next { color: var(--weak); }