/* Design system preview. All layout and type rules stay inside .ds. */
/* 余白は 4 段だけ（docs/design/DESIGN.md の spacing）。内側 < 外側 を崩さない: tight 8（ラベル→値・図→説明） < item 16（段落・見出し→中身・答え→操作） < group 32/SP24（部品のかたまり・手順の間・h3 の上） < section 64/SP48（h2 の節の間） */
.bc.ds{--ds-space-tight:.5rem;--ds-space-item:1rem;--ds-space-group:2rem;--ds-space-section:4rem;--ds-text-body:1.0625rem;--ds-text-small:.9375rem;--ds-text-note:.85rem;--ds-text-h1:1.75rem;--ds-text-h2:1.375rem;--ds-text-h3:1.125rem;--ds-text-answer:1.625rem;--ds-leading-body:1.85;--ds-leading-heading:1.45;--ds-leading-small:1.7;--ds-col-main:720px;--ds-col-side:280px;--ds-col-gap:40px;--ds-wrap:1040px;font-size:var(--ds-text-body);line-height:var(--ds-leading-body)}
/* 地は白だけ（DESIGN.md §2）。ダーク設定の端末でも殻の地を 1 色に決め、ブラウザの自動の黒反転（html・body が透明で main だけ白、の混ざり）を断つ。ds の殻の面だけ */
:root:has(main.bc.ds){color-scheme:only light;background:var(--bc-bg)}
body:has(main.bc.ds){background:var(--bc-bg);color:var(--bc-text)}
.bc.ds h1{font-size:var(--ds-text-h1);line-height:var(--ds-leading-heading)}
.bc.ds h2{font-size:var(--ds-text-h2);line-height:var(--ds-leading-heading)}
.bc.ds h3{font-size:var(--ds-text-h3);line-height:var(--ds-leading-heading)}
.bc.ds .ds-wrap{max-width:var(--ds-wrap);margin-inline:auto;padding-inline:var(--bc-space-4)}
.bc.ds .ds-layout{min-width:0}
.bc.ds .ds-layout--doc,.bc.ds .ds-layout--tool{display:grid;grid-template-columns:minmax(0,var(--ds-col-main)) minmax(0,var(--ds-col-side));column-gap:var(--ds-col-gap);align-items:start}
.bc.ds .ds-layout--table{max-width:var(--ds-wrap)}
.bc.ds .ds-layout--table .ds-prose{max-width:var(--ds-col-main)}
.bc.ds .ds-main,.bc.ds .ds-side{min-width:0}
/* 日本語の見出し・答えは文節で折り返す（「いつ／から」「1／か月」の泣き別れを防ぐ。対応しないブラウザは今の折り返しのまま） */
.bc.ds h1,.bc.ds h2,.bc.ds h3,.bc.ds .ds-answer__value,.bc.ds .ds-answer__label{word-break:auto-phrase}
.bc.ds .ds-main>*+*{margin-top:var(--ds-space-group)}
.bc.ds .ds-main>h1{margin-bottom:var(--ds-space-item)}
/* 答えとその直後の操作は 1 かたまり（間は item）。次の入力・注意は group 空けて別のかたまりに（④ 一粒万倍日 A3・小暑） */
.bc.ds .ds-main>.ds-answer+.ds-actions{margin-top:var(--ds-space-item)}
.bc.ds .ds-lead{color:var(--bc-text);font-size:var(--ds-text-body);margin:var(--ds-space-item) 0}
.bc.ds .ds-main>.ds-meta{margin-top:var(--ds-space-item)}
.bc.ds .ds-section{margin-top:var(--ds-space-section);scroll-margin-top:var(--bc-space-6)}
.bc.ds .ds-main>.ad-wrap{margin-top:var(--ds-space-section)}
.bc.ds .ds-section>h2{margin-bottom:var(--ds-space-item)}
.bc.ds .ds-section h3{margin:var(--ds-space-group) 0 var(--ds-space-item)}
.bc.ds .ds-section:not(.ds-steps)>*+*:not(h2):not(h3){margin-top:var(--ds-space-item)}
.bc.ds .ds-section p+p{margin-top:var(--ds-space-item)}
.bc.ds .ds-meta,.bc.ds .ds-side,.bc.ds .ds-table__howto,.bc.ds .ds-figure figcaption,.bc.ds .ds-answer__sub,.bc.ds .ds-next__desc{font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds .ds-answer{padding:var(--bc-space-5);border:var(--bc-line) solid var(--bc-border);border-left:4px solid var(--bc-brand);border-radius:var(--bc-radius-card);background:var(--bc-surface)}
.bc.ds .ds-answer__label{font-size:var(--ds-text-small);color:var(--bc-muted);margin:0 0 var(--bc-space-2)}
.bc.ds .ds-answer__value{font-size:var(--ds-text-answer);line-height:var(--ds-leading-heading);font-weight:700;color:var(--bc-text);margin:0}
.bc.ds .ds-answer__sub{margin:var(--bc-space-3) 0 0}
.bc.ds .ds-answer__facts{display:flex;flex-wrap:wrap;gap:var(--bc-space-3);padding-top:var(--bc-space-3);margin-top:var(--bc-space-3);border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-answer__facts div{display:flex;gap:var(--bc-space-2)}
.bc.ds .ds-answer__facts dt{color:var(--bc-muted);flex-shrink:0;white-space:nowrap}
.bc.ds .ds-answer__facts dd{margin:0;min-width:0;font-weight:700;color:var(--bc-text)}
.bc.ds .ds-source{display:block;margin:var(--ds-space-item) 0 0;font-size:var(--ds-text-note);line-height:var(--ds-leading-small);color:var(--bc-source-text)}
.bc.ds .ds-nowrap{white-space:nowrap}
/* 文中のリンクは文の一部。44px の押せる大きさは部品（ボタン・一覧・目次・カード）のリンクだけが持つ（WCAG 2.2 2.5.8 の inline の例外） */
.bc.ds p a,.bc.ds .ds-cite a,.bc.ds .ds-source a,.bc.ds dd a{display:inline;min-height:0}
/* 根拠の小さなリンクは、行の高さを変えずに押せる所を 44px に広げる（④ 一粒万倍日の目の門: 27×16px） */
.bc.ds .ds-source a{padding:14px 9px;margin:-14px -9px}
.bc.ds .ds-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-tight)}
.bc.ds .ds-actions .bc-btn{text-decoration:none}
.bc.ds .ds-side{display:grid;align-self:stretch;align-content:start;gap:var(--bc-space-5);padding-top:var(--bc-space-2)}
.bc.ds .ds-side__title,.bc.ds .ds-next__title{font-size:var(--ds-text-small);line-height:1.5;font-weight:700;color:var(--bc-text);margin:0 0 var(--bc-space-2)}
.bc.ds .ds-side nav,.bc.ds .ds-side section{border-top:var(--bc-line) solid var(--bc-border);padding-top:var(--bc-space-3)}
.bc.ds .ds-toc ul,.bc.ds .ds-related ul{list-style:none;padding:0;margin:0}
.bc.ds .ds-toc li,.bc.ds .ds-related li{border-bottom:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-toc a,.bc.ds .ds-related a{display:flex;align-items:center;min-height:var(--bc-target);text-decoration:none;line-height:1.5}
.bc.ds .ds-toc a:hover,.bc.ds .ds-related a:hover{text-decoration:underline}
/* 説明はリンクの外（リンクの割合を上げない・読み上げでリンク名が短い）。名前のリンクの直下に寄せる */
.bc.ds .ds-related__desc{margin:calc(-1 * var(--ds-space-tight)) 0 0;padding-bottom:var(--ds-space-tight);font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
/* 図（svg）の強調。style 属性の代わりに class で（DESIGN.md §8） */
.bc.ds .ds-figure .ds-fig-accent{fill:var(--bc-brand)}
.bc.ds .ds-figure .ds-fig-accent-line{stroke:var(--bc-brand)}
/* 控えめな塗り・線（背景の帯・補助の目盛り）。fill-opacity で代用しない（A10） */
.bc.ds .ds-figure .ds-fig-muted{fill:var(--bc-border)}
.bc.ds .ds-figure .ds-fig-muted-line{stroke:var(--bc-border)}
.bc.ds .ds-mycase{background:var(--bc-surface);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);padding:var(--bc-space-4)}
.bc.ds .ds-mycase p{margin:0}
.bc.ds .ds-next{margin-top:var(--ds-space-section)}
.bc.ds .ds-next ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--bc-space-3);list-style:none;margin:0;padding:0}
.bc.ds .ds-next li{min-width:0}
.bc.ds .ds-next a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--bc-space-1);width:100%;height:100%;min-height:var(--bc-target);padding:var(--bc-space-3) var(--bc-space-4);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);text-decoration:none}
.bc.ds .ds-next a:hover{border-color:var(--bc-brand);background:var(--bc-surface)}
.bc.ds .ds-next__name{font-weight:700}
.bc.ds .ds-main>.ds-related{margin-top:var(--ds-space-section)}
.bc.ds .ds-table__howto{margin:0 0 var(--bc-space-2)}
.bc.ds .ds-table .bc-table-wrap{margin:0;max-width:100%;overflow-x:auto}
/* 表のセルの中の箇条（限定品の名前など）。長い 1 文に詰めず、1 行 1 つで読ませる */
/* 表は本文の列（720px）に収める。文のセルは折り返し、数字だけ折り返さない（10/6 免許の見本の表が 941px で横に送られていた。G15） */
/* .bc の overflow-wrap:anywhere を表では break-word に戻す（行見出し「10」が 1 字幅に詰められ「1/0」に折れていた。10/6 ④ 早見表。G17） */
.bc.ds .ds-table .bc-table th,.bc.ds .ds-table .bc-table td{white-space:normal;overflow-wrap:break-word}
.bc.ds .ds-table .bc-table .bc-num{white-space:nowrap}
/* 詰めた行（ds.table の dense）。20 行以上で押す物を持たない参照表だけ（門 G32）。字の大きさは変えず、上下の余白だけ 6px */
.bc.ds .ds-table .bc-table--dense th,.bc.ds .ds-table .bc-table--dense td{padding-top:calc(var(--bc-space-3) / 2);padding-bottom:calc(var(--bc-space-3) / 2)}
.bc.ds .ds-table td ul{margin:var(--ds-space-tight) 0 0;padding-left:1.2em}
.bc.ds .ds-table td li{margin:0}
.bc.ds .ds-table .bc-sub--block{margin-top:var(--ds-space-tight)}
.bc.ds .ds-figure{margin:var(--ds-space-item) 0}
.bc.ds .ds-figure__media{width:100%;max-width:30rem;display:grid;place-items:center;background:var(--bc-surface);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);overflow:hidden}
.bc.ds .ds-figure--wide .ds-figure__media{max-width:100%}
.bc.ds .ds-figure svg,.bc.ds .ds-figure img{display:block;max-width:100%;height:auto}
.bc.ds .ds-figure figcaption{margin-top:var(--bc-space-2)}
.bc.ds .ds-tool{max-width:var(--ds-col-main);padding:var(--bc-space-5);background:var(--bc-surface);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
.bc.ds .ds-tool form{display:grid;gap:var(--bc-space-4)}
.bc.ds .ds-tool input,.bc.ds .ds-tool select{width:100%;max-width:none;min-height:var(--bc-target)}
.bc.ds .ds-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bc-space-4)}
.bc.ds .ds-tool-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--bc-space-2)}
.bc.ds .ds-tool .bc-dl__in{grid-template-columns:minmax(0,1fr);justify-items:start}
.bc.ds .ds-tool .bc-dl__in input{width:min(100%,16rem)}
.bc.ds .ds-tool-result{padding-top:var(--bc-space-4);border-top:var(--bc-line) solid var(--bc-border);font-size:var(--ds-text-answer);font-weight:700;line-height:var(--ds-leading-heading)}
.bc.ds .ds-cite{font-size:var(--ds-text-note);line-height:1.7;color:var(--bc-source-text)}
.bc.ds .ds-section>.ds-cite{margin-top:var(--ds-space-item)}
.bc.ds #ohm-table{display:grid;gap:var(--bc-space-2);margin:var(--ds-space-item) 0 0}
.bc.ds #ohm-table>div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--bc-space-2);align-items:start}
.bc.ds #ohm-table dt,.bc.ds #ohm-table dd{margin:0;text-align:left}
.bc.ds #ohm-table small{display:block;font-size:var(--ds-text-note);color:var(--bc-muted);line-height:1.7}
.bc.ds .ds-quick{margin-top:var(--ds-space-item)}
.bc.ds .ds-faq .bc-faq{margin:0}
.bc.ds .ohm-msg{display:none;color:var(--bc-caution-text)}
.bc.ds .ohm-msg.is-shown{display:block}
.bc.ds .ds-steps{list-style:none;counter-reset:step;margin:0;padding:0}
.bc.ds .ds-main>.ds-steps{margin-top:var(--ds-space-section)}
.bc.ds .ds-steps>li{counter-increment:step;padding:var(--bc-space-4) 0 0;border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-steps>li+li{margin-top:var(--ds-space-group)}
.bc.ds .ds-steps>li>h2:before,.bc.ds .ds-steps>li>h3:before{content:counter(step) ". ";color:var(--bc-brand)}
.bc.ds .ds-steps>li>h2,.bc.ds .ds-steps>li>h3{margin:0 0 var(--ds-space-tight)}
.bc.ds .ds-steps>li>*+*{margin-top:var(--ds-space-item)}
.bc.ds .ds-steps>li>h2+*,.bc.ds .ds-steps>li>h3+*{margin-top:var(--ds-space-tight)}
/* 期限の計算（_deadline_from_date.html を ds_page=true で読む時。本番の旧型の面はその部品の中の <style> のまま） */
.bc.ds .bc-dl{display:grid;gap:var(--ds-space-item)}
.bc.ds .bc-dl__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(10.5rem,12rem);align-items:center;gap:var(--ds-space-tight) var(--bc-space-3)}
.bc.ds .bc-dl__in label{font-weight:700;font-size:var(--ds-text-small);line-height:var(--ds-leading-heading)}
.bc.ds .bc-dl__in input{min-height:var(--bc-target);padding:var(--bc-space-1) var(--ds-space-tight);font-size:1rem;border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-input);min-width:0;width:100%;box-sizing:border-box}
.bc.ds .bc-dl__list{list-style:none;margin:0;padding:0;border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .bc-dl__row{display:grid;grid-template-columns:minmax(0,1fr);padding:var(--ds-space-tight) 0;border-bottom:var(--bc-line) solid var(--bc-border)}
.bc.ds .bc-dl__label{font-size:var(--ds-text-small);font-weight:700;color:var(--bc-muted)}
.bc.ds .bc-dl__date{font-size:var(--ds-text-h3);font-weight:700;line-height:var(--ds-leading-heading)}
.bc.ds .bc-dl__date .bc-sub{font-size:var(--ds-text-small);font-weight:400;margin-left:var(--bc-space-2);white-space:nowrap}
.bc.ds .bc-dl__why,.bc.ds .bc-dl__basis{margin:0;font-size:var(--ds-text-small);color:var(--bc-muted);line-height:var(--ds-leading-small)}
.bc.ds .bc-dl__add{width:100%;min-height:var(--bc-target)}
.bc.ds .bc-dl__aff{margin:0;font-size:var(--ds-text-small)}
@media (min-width:37.5rem){.bc.ds .bc-dl__row{grid-template-columns:11rem minmax(0,1fr);column-gap:var(--bc-space-3);align-items:baseline}.bc.ds .bc-dl__why{grid-column:2}.bc.ds .bc-dl__add{width:auto;min-width:16rem;justify-self:start}}
.bc.ds .ds-mobile-only{display:none}
@media (min-width:1100px){.bc.ds .ds-wrap{padding-inline:0}}
@media (min-width:1100px){.bc.ds .ds-side__ad{min-height:600px}}
@media (min-width:1100px){.ds-ad-narrow{display:none}}
@media (min-width:1100px) and (min-height:680px) and (hover:hover){.bc.ds .ds-side>.ds-sticky{position:sticky;top:16px}}
@media (max-width:1099px){.bc.ds .ds-layout--doc,.bc.ds .ds-layout--tool{grid-template-columns:minmax(0,1fr)}.bc.ds .ds-side{margin-top:var(--ds-space-section)}}
@media (max-width:600px){
 .bc.ds{--ds-space-group:1.5rem;--ds-space-section:3rem;--ds-text-h1:1.5rem;--ds-text-h2:1.25rem;--ds-text-answer:1.375rem}
 .bc.ds .ds-wrap{padding-inline:0}
 .bc.ds .ds-mobile-only{display:block}
 .bc.ds .ds-answer{padding:var(--bc-space-4)}
 .bc.ds .ds-toc ul{display:flex;flex-wrap:wrap;gap:var(--bc-space-2)}
 .bc.ds .ds-toc li{border:0}
 .bc.ds .ds-toc a{padding:var(--bc-space-2) var(--bc-space-3);min-height:var(--bc-target);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-chip);background:var(--bc-surface)}
 .bc.ds .ds-tool-grid:not(.ds-tool-grid--keep){grid-template-columns:minmax(0,1fr)}
 .bc.ds .ds-actions{flex-direction:column}
 .bc.ds .ds-actions .bc-btn{width:100%;box-sizing:border-box;text-align:center}
 .bc.ds .ds-figure__media{max-width:100%}
}
/* 計算の仕方・結果の読み方・計算例（ds.explain）。旧型の面に差し込むときは .ds-embed（本文の幅に収め、旧い見出しの飾りを消す） */
.bc.ds .ds-explain__formula{font-size:var(--ds-text-h3);font-weight:700;padding:var(--bc-space-3) var(--bc-space-4);background:var(--bc-surface);border-radius:var(--bc-radius-card)}
.bc.ds .ds-explain__steps{padding-left:1.2em}
/* ガイドの面の日付の帯図（ds.timeline）。色は class とトークンだけ（SVG に生の色を書かない） */
.bc.ds .ds-timeline svg{width:100%;height:auto}
.bc.ds .ds-timeline .ds-tl-axis{stroke:var(--bc-border);stroke-width:3;stroke-linecap:round}
.bc.ds .ds-timeline .ds-tl-stem{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-timeline .ds-tl-dot{fill:var(--bc-muted)}
.bc.ds .ds-timeline .ds-tl-label{font-size:14px;fill:var(--bc-text)}
.bc.ds .ds-timeline .ds-tl-date{font-size:14px;fill:var(--bc-muted)}
.bc.ds .ds-timeline .ds-tl-days{font-size:14px;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-timeline .ds-tl-dot.ds-tl-today{fill:var(--bc-brand)}
.bc.ds .ds-timeline .ds-tl-dot.ds-tl-next{fill:var(--bc-brand-strong)}
.bc.ds .ds-timeline .ds-tl-dot.ds-tl-deadline{fill:var(--bc-sun)}
.bc.ds .ds-timeline .ds-tl-label.ds-tl-today,.bc.ds .ds-timeline .ds-tl-label.ds-tl-next{font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-timeline .ds-tl-label.ds-tl-deadline{fill:var(--bc-sun)}
.bc.ds .ds-timeline .ds-tl-label.ds-tl-past{fill:var(--bc-muted)}
.bc.ds.ds-embed{max-width:var(--ds-col-main);color:var(--bc-text)}
.bc.ds.ds-embed h2{margin:0 0 var(--ds-space-item);padding:0;border:0;background:none;font-weight:700;color:var(--bc-text)}
.bc.ds.ds-embed h2::before,.bc.ds.ds-embed h2::after{content:none}
.bc.ds .ds-actions__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bc.ds .ds-daystrip{margin:var(--ds-space-item) 0;min-width:0;max-width:100%}
.bc.ds .ds-daystrip__caption{margin:var(--ds-space-tight) 0 0;font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds [hidden]{display:none!important}
.bc.ds .ds-tool-grid--keep{grid-template-columns:repeat(auto-fit,minmax(min(9.5rem,calc(50% - var(--bc-space-4) / 2)),1fr))}
/* 並んだ入力の上端をそろえる（ラベルの行数が違っても。ラベルの行が余りを取り、下に寄せる。④ 青色申告 A19: SP で 449 と 479） */
.bc.ds .ds-tool-grid>.bc-field{grid-template-rows:1fr;align-content:stretch}
.bc.ds .ds-tool-grid>.bc-field>:first-child{align-self:end}
/* 時刻の欄と、日付と時刻の 2 欄の組（ds.field の time・datetime）。組は格子の 1 行を占め、日付 3：時刻 2 で並べる。
   iOS は日付・時刻の値を中央に寄せるので左に揃える（ほかの欄と字の頭を合わせる） */
.bc.ds .ds-tool-grid>.ds-datetime{grid-column:1/-1}
.bc.ds .ds-datetime__pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--bc-space-2)}
.bc.ds .bc-field input[type=time]::-webkit-date-and-time-value,.bc.ds .ds-datetime input[type=date]::-webkit-date-and-time-value{text-align:left}
.bc.ds .ds-steps>li>*{margin-bottom:0}
.bc.ds .bc-band text,.bc.ds .bc-band__label{font-size:var(--ds-text-note);fill:var(--bc-text)}
.bc.ds .bc-band__win{fill:var(--bc-current-bg);stroke:var(--bc-brand)}
.bc.ds .bc-band__mark{stroke:var(--bc-brand);stroke-width:2}
.bc.ds .bc-band__mark+text,.bc.ds .bc-band text.bc-band__label--muted{fill:var(--bc-muted)}
.bc.ds .bc-band__d{font-weight:700}
.bc.ds .bc-band__step{stroke:var(--bc-muted);stroke-width:2;stroke-dasharray:4 3;fill:none}
.bc.ds .bc-band__today{fill:var(--bc-sun);stroke:var(--bc-sun)}
.bc.ds line.bc-band__today{stroke-width:3}
.bc.ds text.bc-band__today{stroke:none;font-weight:700}
/* 時間の線の図（page_generators/window_timeline.py・static/js/ds_timeline.js） */
.bc.ds .bc-tl text{fill:var(--bc-text)}
.bc.ds .bc-tl__label{font-size:14px;fill:var(--bc-muted)}
.bc.ds .bc-tl__d{font-size:14px;font-weight:700}
.bc.ds .bc-tl__axis{stroke:var(--bc-border);stroke-width:2}
.bc.ds .bc-tl__break{stroke:var(--bc-muted);stroke-width:2;fill:none}
.bc.ds .bc-tl__win{fill:var(--bc-current-bg);stroke:var(--bc-brand)}
.bc.ds .bc-tl__lead{stroke:var(--bc-muted);stroke-width:1}
.bc.ds .bc-tl__dot{fill:var(--bc-bg,#fff);stroke:var(--bc-brand);stroke-width:2}
.bc.ds .bc-tl__today .bc-tl__dot{fill:var(--bc-sun);stroke:var(--bc-sun)}
.bc.ds .bc-tl__today .bc-tl__lead{stroke:var(--bc-sun)}
.bc.ds .bc-tl__today text{fill:var(--bc-sun)}
/* 手続きの部品（10/6 ⑤ の見本 /tetsuzuki/shaken）: stepfacts・stepactions・checklist・more・本人の値の印・表の SP カード */
.bc.ds .ds-stepfacts{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--bc-space-3);row-gap:var(--ds-space-tight);margin:0;padding:0}
.bc.ds .ds-stepfacts>div{display:contents}
.bc.ds .ds-stepfacts dt{font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted);white-space:nowrap}
.bc.ds .ds-stepfacts dd{margin:0;min-width:0;font-weight:400;color:var(--bc-text)}
.bc.ds [data-my].is-mine{font-weight:700;background:var(--bc-current-bg);text-decoration:underline;text-decoration-color:var(--bc-brand);text-underline-offset:.2em}
.bc.ds .ds-stepactions{flex-direction:row;flex-wrap:wrap}
.bc.ds .ds-checklist{list-style:none;margin:0;padding:0}
.bc.ds .ds-checklist li{margin:0;padding:0}
.bc.ds .ds-checklist label{display:flex;align-items:center;gap:var(--ds-space-tight);min-height:var(--bc-target);cursor:pointer}
.bc.ds .ds-checklist input[type=checkbox]{flex:0 0 auto;width:1.25rem;height:1.25rem;margin:0}
.bc.ds .ds-checklist__note{display:block;margin:0 0 var(--ds-space-tight) calc(1.25rem + var(--ds-space-tight));font-size:var(--ds-text-note);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds .ds-more>summary{display:flex;align-items:center;gap:var(--ds-space-tight);min-height:var(--bc-target);cursor:pointer;font-weight:700;list-style:none}
.bc.ds .ds-more>summary::-webkit-details-marker{display:none}
.bc.ds .ds-more>summary::before{content:"\25B6";display:inline-block;font-size:.75em;color:var(--bc-muted);transition:transform .15s}
.bc.ds .ds-more[open]>summary::before{transform:rotate(90deg)}
.bc.ds .ds-more>summary+*{margin-top:var(--ds-space-tight)}
@media (max-width:600px){
 .bc.ds .ds-actions.ds-stepactions{flex-direction:row}
 .bc.ds .ds-actions.ds-stepactions .bc-btn{width:auto}
 .bc.ds .ds-table .ds-cards,.bc.ds .ds-table .ds-cards tbody,.bc.ds .ds-table .ds-cards tr,.bc.ds .ds-table .ds-cards th,.bc.ds .ds-table .ds-cards td{display:block;width:100%;box-sizing:border-box;min-width:0}
 .bc.ds .ds-table .ds-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .bc.ds .ds-table .ds-cards caption{display:block;width:100%}
 .bc.ds .ds-table .ds-cards tr{padding:var(--bc-space-3) var(--bc-space-4);margin-top:var(--ds-space-tight);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
 .bc.ds .ds-table .ds-cards th[scope=row]{padding:0 0 var(--bc-space-1);border:0;text-align:left;font-weight:700}
 .bc.ds .ds-table .ds-cards td{display:grid;grid-template-columns:5rem minmax(0,1fr);column-gap:var(--bc-space-2);padding:var(--bc-space-1) 0;border:0;text-align:left}
 .bc.ds .ds-table .ds-cards td::before{content:attr(data-label);color:var(--bc-muted);font-size:var(--ds-text-small)}
}
/* 本人の都市の選択（ds.mypick）・本人の行の印・意味を持つ絵の一覧（ds.picks）・畳んだ表の開閉・暦日の内訳の帯（ds.breakdown_bar）・面ごとの下の繋ぎ */
.bc.ds .ds-mypick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-tight) var(--bc-space-3)}
.bc.ds .ds-mypick label{font-weight:700;font-size:var(--ds-text-small)}
.bc.ds .ds-mypick select{min-height:var(--bc-target);min-width:0;max-width:100%;padding:var(--bc-space-1) var(--ds-space-tight);font-size:1rem;border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-input);background:var(--bc-bg);color:var(--bc-text)}
.bc.ds [data-my-row].is-mine{font-weight:700;background:var(--bc-current-bg)}
.bc.ds .ds-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr));gap:var(--bc-space-3);list-style:none;margin:var(--ds-space-item) 0 0;padding:0}
.bc.ds .ds-picks__item{min-width:0;padding:var(--bc-space-4);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
.bc.ds .ds-picks__fig{max-height:6rem;overflow:hidden;color:var(--bc-brand)}
.bc.ds .ds-picks__fig svg{display:block;height:6rem;max-width:100%;width:auto;margin-inline:auto}
.bc.ds .ds-picks__title{margin:var(--ds-space-tight) 0 0}
.bc.ds .ds-picks__title a{display:inline-flex;align-items:center;min-height:var(--bc-target)}
.bc.ds .ds-picks__text{margin:var(--bc-space-1) 0 0;font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
@media (min-width:37.5rem){.bc.ds .ds-picks--4col{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.bc.ds .ds-picks__item:has(> .ds-picks__fig){display:grid;grid-template-columns:4.5rem minmax(0,1fr);column-gap:var(--bc-space-3);align-items:start}.bc.ds .ds-picks__fig{grid-row:span 2;max-height:4.5rem}.bc.ds .ds-picks__fig svg{height:4.5rem}.bc.ds .ds-picks__title{margin:0}}
/* 表を開くボタン: 表の枠から離す（G25）。SP は横幅いっぱい、PC は本文の左に揃えて ds.more と同じ高さ。枠の中に置かれても枠に接しない */
.bc.ds .ds-table__unfold{display:flex;width:100%;margin-top:var(--ds-space-item)}
.bc.ds .bc-table-wrap>.ds-table__unfold{width:calc(100% - 2 * var(--ds-space-item));margin:var(--ds-space-item)}
@media (min-width:37.5rem){.bc.ds .ds-table__unfold,.bc.ds .bc-table-wrap>.ds-table__unfold{width:auto;min-width:16rem}}
.bc.ds .ds-breakdown{margin:var(--ds-space-item) 0;min-width:0}
.bc.ds .ds-breakdown__bar{display:block;width:100%;height:1.5rem;border-radius:var(--bc-radius-input)}
.bc.ds .ds-breakdown__seg{fill:var(--ds-bd);stroke:var(--bc-bg);stroke-width:1;vector-effect:non-scaling-stroke}
.bc.ds .ds-breakdown__legend{display:flex;flex-wrap:wrap;gap:var(--ds-space-tight) var(--bc-space-4);list-style:none;margin:var(--ds-space-tight) 0 0;padding:0;font-size:var(--ds-text-small);line-height:var(--ds-leading-small)}
.bc.ds .ds-breakdown__key{display:inline-flex;align-items:center;gap:var(--bc-space-2)}
.bc.ds .ds-breakdown__key::before{content:"";flex:0 0 auto;width:.75rem;height:.75rem;border-radius:2px;background:var(--ds-bd)}
.bc.ds .ds-breakdown figcaption{margin-top:var(--ds-space-tight);font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds .ds-breakdown__seg--work,.bc.ds .ds-breakdown__key--work{--ds-bd:var(--bc-border)}
.bc.ds .ds-breakdown__seg--sat,.bc.ds .ds-breakdown__key--sat{--ds-bd:var(--bc-sat)}
.bc.ds .ds-breakdown__seg--sun,.bc.ds .ds-breakdown__key--sun{--ds-bd:var(--bc-sun)}
.bc.ds .ds-breakdown__seg--holiday,.bc.ds .ds-breakdown__key--holiday{--ds-bd:var(--bc-caution-line)}
.bc.ds .ds-breakdown__seg--obon,.bc.ds .ds-breakdown__key--obon{--ds-bd:var(--bc-muted)}
.bc.ds .ds-breakdown__seg--nenmatsu,.bc.ds .ds-breakdown__key--nenmatsu{--ds-bd:var(--bc-good-text)}
/* 月の格子に期間を塗る図（ds.monthgrid）。サイトの月のカレンダーと同じ日曜始まり・土は sat・日祝は sun の色。2 か月は PC で横、SP で縦に積む（1 日の枠を 44px 以上に保つ） */
.bc.ds .ds-monthgrid{margin:var(--ds-space-item) 0;min-width:0}
.bc.ds .ds-monthgrid__months{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr));gap:var(--ds-space-item) var(--bc-space-5)}
.bc.ds .ds-monthgrid__month{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 2px;font-variant-numeric:tabular-nums}
.bc.ds .ds-monthgrid__month caption{margin-bottom:var(--ds-space-tight);font-weight:700;text-align:left}
.bc.ds .ds-monthgrid__month th{padding:0 0 var(--bc-space-1);font-size:var(--ds-text-small);font-weight:600;color:var(--bc-muted);text-align:center}
.bc.ds .ds-monthgrid__month td{position:relative;height:var(--bc-target);padding:0;text-align:center;vertical-align:middle}
.bc.ds .ds-monthgrid__month .is-sat{color:var(--bc-sat)}
.bc.ds .ds-monthgrid__month .is-sun,.bc.ds .ds-monthgrid__month .is-holiday{color:var(--bc-sun)}
.bc.ds .ds-monthgrid__month td.is-holiday .ds-monthgrid__d{text-decoration:underline;text-underline-offset:3px}
/* 期間は地の色に加えて下の帯（brand）でも示す（地だけでは白と 1.1:1 で見分けにくい。WCAG 1.4.11） */
.bc.ds .ds-monthgrid__month td.is-run{background:var(--bc-current-bg);box-shadow:inset 0 -3px 0 var(--bc-brand)}
.bc.ds .ds-monthgrid__month td.is-start,.bc.ds .ds-monthgrid__month td.is-end,.bc.ds .ds-monthgrid__month td.is-pick{background:var(--bc-brand);color:var(--bc-bg);font-weight:700}
.bc.ds .ds-monthgrid__month td.is-start{border-radius:var(--bc-radius-input) 0 0 var(--bc-radius-input)}
.bc.ds .ds-monthgrid__month td.is-end{border-radius:0 var(--bc-radius-input) var(--bc-radius-input) 0}
.bc.ds .ds-monthgrid__month td.is-start.is-end,.bc.ds .ds-monthgrid__month td.is-pick{border-radius:var(--bc-radius-input)}
.bc.ds .ds-monthgrid__month td.is-today{box-shadow:inset 0 0 0 2px var(--bc-text)}
.bc.ds .ds-monthgrid__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bc.ds .ds-monthgrid__legend{display:flex;flex-wrap:wrap;gap:var(--ds-space-tight) var(--bc-space-4);list-style:none;margin:var(--ds-space-tight) 0 0;padding:0;font-size:var(--ds-text-small);line-height:var(--ds-leading-small)}
.bc.ds .ds-monthgrid__key{display:inline-flex;align-items:center;gap:var(--bc-space-2)}
.bc.ds .ds-monthgrid__key::before{content:"";flex:0 0 auto;width:.75rem;height:.75rem;border-radius:2px;background:var(--ds-mg)}
.bc.ds .ds-monthgrid__key--run{--ds-mg:var(--bc-current-bg)}
.bc.ds .ds-monthgrid__key--end{--ds-mg:var(--bc-brand)}
.bc.ds .ds-monthgrid__key--off{--ds-mg:var(--bc-sun)}
.bc.ds .ds-monthgrid__key--sat{--ds-mg:var(--bc-sat)}
.bc.ds .ds-monthgrid__key--run::before{box-shadow:inset 0 -3px 0 var(--bc-brand)}
.bc.ds .ds-monthgrid__key--today{--ds-mg:var(--bc-bg)}
.bc.ds .ds-monthgrid__key--today::before{box-shadow:inset 0 0 0 2px var(--bc-text)}
/* 日の印（吉日は丸・凶日はばつ・主役は塗った丸）。色だけで分けず形でも分ける。日の数字の下に小さく並べ、重なる日は並べて出す */
.bc.ds .ds-monthgrid__month td.has-marks .ds-monthgrid__d{display:block;line-height:1.2}
.bc.ds .ds-monthgrid__month td.is-focus .ds-monthgrid__d{font-weight:700}
.bc.ds .ds-monthgrid__marks{display:flex;justify-content:center;gap:1px;height:.75rem;font-size:.75rem;line-height:1;overflow:hidden}
.bc.ds .ds-monthgrid__mark::before,.bc.ds .ds-monthgrid__key--mark::before{content:"\25CB" / "";color:var(--bc-good-text)}
.bc.ds .ds-monthgrid__mark.is-focus::before,.bc.ds .ds-monthgrid__key--mark.is-focus::before{content:"\25CF" / "";color:var(--bc-brand)}
.bc.ds .ds-monthgrid__mark--bad::before,.bc.ds .ds-monthgrid__key--bad::before,.bc.ds .ds-monthgrid__mark--bad.is-focus::before,.bc.ds .ds-monthgrid__key--mark.ds-monthgrid__key--bad.is-focus::before{content:"\00D7" / "";color:var(--bc-caution-text);font-weight:700}
.bc.ds .ds-monthgrid__month td.is-start .ds-monthgrid__mark::before,.bc.ds .ds-monthgrid__month td.is-end .ds-monthgrid__mark::before,.bc.ds .ds-monthgrid__month td.is-pick .ds-monthgrid__mark::before{color:var(--bc-bg)}
.bc.ds .ds-monthgrid__key--mark::before{width:auto;height:auto;border-radius:0;background:none;font-size:1rem;line-height:1}
.bc.ds .ds-monthgrid figcaption{margin-top:var(--ds-space-tight);font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds.ds-footer-links{margin-inline:auto;padding-inline:var(--bc-space-4);text-align:left}
/* 添え書きの値は箱の下にそろえる（見出しの行数が違っても、横に並ぶ値の高さがずれない。④ 青色申告の試し A17） */
.bc.ds .bc-facts>div{display:grid;grid-template-rows:auto 1fr}
.bc.ds .bc-facts>div>dd{align-self:end}
/* 値が 4 つの並び（bc-facts--2col・4 つの bc-facts）は 2 列か 4 列だけ。auto-fit のままだと本文 800px 前後で「3 つ＋1 つ」に崩れる（10/6 ④ 営業日計算。門 G24）。
   4 つが 9rem 以上で入る幅なら 4 列、足りなければ 2 列（clamp の真ん中が幅の境で ±∞ に振れ、25% か 50% のどちらかに決まる） */
@media (min-width:601px){.bc.ds .bc-facts--2col,.bc.ds .bc-facts:has(>div:nth-child(4):last-child){grid-template-columns:repeat(auto-fit,minmax(clamp(calc(25% - var(--bc-space-2)),calc((36rem + 3 * var(--bc-space-2) - 100%) * 999),calc(50% - var(--bc-space-2))),1fr))}}
/* その日の値の並び（bc-facts）は SP で 1 列にし、見出し（dt）を上・値（dd）を下に積む。旧型の .bc の外は変えない */
@media (max-width:600px){
 .bc.ds .bc-facts{grid-template-columns:minmax(0,1fr)}
 .bc.ds .bc-facts>div{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--bc-space-1)}
 /* 短い値が 4 つ並ぶときは SP でも 2 列（bc-facts--2col）。長い値は dd の中で折り返す */
 .bc.ds .bc-facts--2col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
 .bc.ds ins.adsbygoogle,.bc.ds .ds-side__ad,.bc.ds .pc-ad-after-tool,.bc.ds .sp-ad-after-tool,.bc.ds .doc-sc-ad,.bc.ds .ds-actions,.bc.ds .ds-toc,.bc.ds .ds-side{display:none!important}
 body:has(main.bc.ds) :is(.v2-sections,.v2-mobile-header,.v2-context){display:none!important}
 /* 枠だけにするのは意図どおり（紙に手でチェックを付ける） */
 .bc.ds .ds-checklist input[type=checkbox]{appearance:none;-webkit-appearance:none;border:1.5px solid currentColor;border-radius:2px;background:none}
}
/* 車検の面の本人の予定（#yotei・節の頭の 1 行）。値の強調は [data-my].is-mine（ds_shaken_my.js が付ける） */
.bc.ds .ds-mine{margin-top:var(--ds-space-section)}
.bc.ds .ds-mine-line{margin:0;padding:var(--bc-space-3) var(--bc-space-4);background:var(--bc-surface);border-radius:var(--bc-radius-card)}
.bc.ds .ds-mine-line__note{display:block;font-size:var(--ds-text-small);color:var(--bc-muted);line-height:var(--ds-leading-small)}
/* 節の中の小節（h3。content の sub: true）: 中身の間は節と同じ item */
.bc.ds .ds-sub>*+*:not(h3){margin-top:var(--ds-space-item)}
/* 押した節だけを印刷する（ds_actions.js が html[data-print-only] と .is-print-target を付ける） */
@media print{html[data-print-only] body *{visibility:hidden}html[data-print-only] .is-print-target,html[data-print-only] .is-print-target *{visibility:visible}html[data-print-only] .is-print-target{position:absolute;top:0;left:0;width:100%}html[data-print-only] .is-print-target .ds-actions{display:none}}
/* 手順の要点（ds.stepfacts）の後ろは詰める（要点と本文で 1 つの手順。手順と手順の間より狭く。G1） */
.bc.ds .ds-steps>li>.ds-stepfacts+*{margin-top:var(--ds-space-tight)}
/* 配布物を軸で選ぶ（ds.choose・ダウンロードの型）。軸はラジオのチップ（押せる 44px）。結果は見本の画像と主ボタン。SP は 2 値の軸を 2 列に並べて初画面に主ボタンを入れる */
.bc.ds .ds-choose{padding:var(--bc-space-4);border:var(--bc-line) solid var(--bc-border);border-left:4px solid var(--bc-brand);border-radius:var(--bc-radius-card);background:var(--bc-surface)}
.bc.ds .ds-choose__axes{display:grid;grid-template-columns:1fr 1fr;gap:var(--bc-space-3) var(--bc-space-4)}
.bc.ds .ds-choose__axis{margin:0;padding:0;border:0;min-width:0}
.bc.ds .ds-choose__axis--koyomi{grid-column:1/-1}
.bc.ds .ds-choose__axis legend{padding:0;margin:0 0 var(--bc-space-1);font-size:var(--ds-text-small);color:var(--bc-muted);line-height:var(--ds-leading-small)}
.bc.ds .ds-choose__opts{display:flex;flex-wrap:wrap;gap:var(--bc-space-2)}
.bc.ds .ds-choose__opt{position:relative;display:inline-flex}
.bc.ds .ds-choose__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bc.ds .ds-choose__opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--bc-space-3);border:var(--bc-line) solid var(--bc-border);border-radius:999px;background:var(--bc-bg);font-size:var(--ds-text-small);line-height:1.3;white-space:nowrap;cursor:pointer}
.bc.ds .ds-choose__opt input:checked+span{border-color:var(--bc-brand);background:var(--bc-brand);color:#fff;font-weight:700}
.bc.ds .ds-choose__opt input:focus-visible+span{outline:2px solid var(--bc-brand);outline-offset:2px}
.bc.ds .ds-choose__result{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--bc-space-4);align-items:start;margin-bottom:var(--bc-space-4);padding-bottom:var(--bc-space-4);border-bottom:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-choose__img{display:block;width:100%;height:auto;border:var(--bc-line) solid var(--bc-border);background:#fff}
.bc.ds .ds-choose__form{margin:0;font-weight:700;line-height:var(--ds-leading-heading)}
.bc.ds .ds-choose__spec{margin:var(--bc-space-1) 0 0;font-size:var(--ds-text-small);color:var(--bc-muted);line-height:var(--ds-leading-small)}
.bc.ds .ds-choose__big{grid-column:1/-1}
.bc.ds .ds-choose__bigimg{display:block;width:100%;max-width:40rem;height:auto;border:var(--bc-line) solid var(--bc-border);background:#fff}
.bc.ds .ds-choose__img{cursor:zoom-in}
.bc.ds .ds-choose__note{margin:var(--bc-space-1) 0 0;font-size:var(--ds-text-small);line-height:var(--ds-leading-small)}
.bc.ds .ds-choose__btns{display:flex;flex-wrap:wrap;gap:var(--bc-space-2);margin-top:var(--bc-space-3)}
.bc.ds .ds-choose__btns .bc-btn{text-decoration:none}
.bc.ds .ds-choose__btns [hidden]{display:none}
@media (min-width:37.5rem){.bc.ds .ds-choose__axes{grid-template-columns:1fr}.bc.ds .ds-choose__axis{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:center}.bc.ds .ds-choose__axis legend{float:left;margin:0}.bc.ds .ds-choose__result{grid-template-columns:16rem minmax(0,1fr)}}
/* 全種類の一覧（畳む）の中の、ファイルのリンクの並び */
.bc.ds .ds-filelist{list-style:none;margin:0;padding:0}.bc.ds .ds-filelist li{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--bc-space-3);padding:var(--bc-space-1) 0;border-bottom:var(--bc-line) solid var(--bc-border)}.bc.ds .ds-filelist__name{min-width:6rem;font-size:var(--ds-text-small)}
.bc.ds .ds-files{display:flex;flex-wrap:wrap;gap:0 var(--bc-space-3)}.bc.ds .ds-files a,.bc.ds .ds-filelist li>a{display:inline-flex;align-items:center;min-height:44px}