/* 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--tool-wide,.bc.ds .ds-layout--tool-wide .ds-main{display:block;width:100%;max-width:var(--ds-wrap)}
.bc.ds .ds-layout--tool-wide .ds-tool{width:100%;max-width:none}
.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)}
/* 人物の一覧（people_list）の箱の 2 人目から: 名前の塊を途中で割らない。横に入らなければ名前ごと次の行へ（親 10/12「ブルックナ／ー」） */
.bc.ds .ds-answer__facts div:has(> dd > .ds-answer__name){flex-wrap:wrap;row-gap:0}
.bc.ds .ds-answer__facts dd:has(> .ds-answer__name){min-width:fit-content}
/* 同じ行のラベル（職業・年）が長いときは折り返す（「落語家 ※戸籍上の誕生日。…」で SP 375 が横にはみ出していた。10/12） */
.bc.ds .ds-answer__facts div:has(> dd > .ds-answer__name) > dt{flex-shrink:1;min-width:0;white-space:normal}
.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)}
/* 旧型の「ほかの道具」「関連ページ」（_koyomi_tool_frame.html の kt-related）を ds の面に置いたとき。リンクが区切りなしで続いて読めた（10/21 ユーザー差し戻し）ので、1 本ずつ枠のあるリンクにして折り返す */
.bc.ds .kt-related{margin:var(--ds-space-section) 0 0}
.bc.ds .kt-related>h2{margin:0 0 var(--bc-space-3)}
.bc.ds .kt-related .kt-related-links{display:flex;flex-wrap:wrap;gap:var(--bc-space-2)}
.bc.ds .kt-related .kt-related-links a{display:inline-flex;align-items:center;min-height:var(--bc-target);padding:0 var(--bc-space-3);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-input,8px);text-decoration:none;line-height:1.4}
.bc.ds .kt-related .kt-related-links a:hover{background:var(--bc-surface);text-decoration:underline}
/* 図（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-mycase .ds-side__title+p{margin-top:0}/* 節の中の p+p の間（16px）が、見出し直後の p にまで効いて 24px になる逆転を止める（G1） */
.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-todo{margin-top:var(--ds-space-item);padding:var(--bc-space-4);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);background:var(--bc-bg)}
.bc.ds .ds-todo__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-todo__list{list-style:none;margin:0;padding:0}
.bc.ds .ds-suru{list-style:none;margin:0 0 var(--ds-space-item);padding:0}.bc.ds .ds-suru__row{padding:var(--bc-space-2) 0;border-bottom:var(--bc-line) solid var(--bc-border)}.bc.ds .ds-suru__row>p{margin:0 0 var(--ds-space-tight)}
.bc.ds .ds-todo__row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;column-gap:var(--bc-space-3);align-items:baseline;padding:var(--bc-space-2) 0;border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-todo__row:first-child{border-top:0}
.bc.ds .ds-todo__date{font-weight:700;white-space:nowrap}
.bc.ds .ds-todo__what{min-width:0;overflow-wrap:anywhere}
.bc.ds .ds-todo__state{font-weight:700;color:var(--bc-brand);white-space:nowrap}
.bc.ds .ds-when{margin-top:var(--ds-space-group);padding:var(--bc-space-4);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
.bc.ds .ds-when h2{margin:0 0 var(--ds-space-item)}
.bc.ds .ds-when__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-space-item)}
.bc.ds .ds-when__row{display:flex;flex-wrap:wrap;column-gap:var(--ds-space-item);row-gap:var(--ds-space-tight);align-items:baseline;font-size:var(--ds-text-body)}.bc.ds .ds-when__date{font-weight:700;flex:0 1 auto}.bc.ds .ds-when__what{flex:1 1 100%;min-width:0}.bc.ds .ds-when__days{margin-left:auto;white-space:nowrap}.bc.ds .ds-when__action{flex-basis:100%}.bc.ds .ds-when .ds-more{margin-top:var(--ds-space-item)}@media (max-width:600px){.bc.ds .ds-when{padding:var(--bc-space-3)}}
@media (max-width:600px){.bc.ds .ds-todo{padding:var(--bc-space-3)}.bc.ds .ds-todo__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date state" "what what";row-gap:0}.bc.ds .ds-todo__date{grid-area:date}.bc.ds .ds-todo__state{grid-area:state}.bc.ds .ds-todo__what{grid-area:what}}
.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}
/* 10/17 ユーザー: PC の狭い列が「あ/な/た」と 1 字ずつ折り返した（年収の壁）。PC の列は 5em を下限にする（DESIGN_ops §9.1 末尾「表」） */
@media (min-width:601px){.bc.ds .ds-table .bc-table th,.bc.ds .ds-table .bc-table td{min-width:5em}}
.bc.ds .ds-table .bc-table .bc-num{white-space:nowrap}
/* 10/17 O-29 畳み: 見せる最後の行の次の 1 行を半分だけ見せ、背景へ消える帯とボタンを重ねる（ds_actions.js の foldPreview）。JS の前は今までどおり畳んだまま（defer で全行を出してから畳むと大きくずれる） */
.bc.ds .ds-table--folded .bc-table-wrap{position:relative;overflow-y:hidden}
.bc.ds .ds-table--folded tr.ds-fold-peek[hidden]{display:table-row!important}
.bc.ds .ds-table--folded .bc-table-wrap::after{content:"";position:sticky;display:block;bottom:0;height:var(--ds-fold-half,2rem);margin-top:calc(-1 * var(--ds-fold-half,2rem));background:linear-gradient(to bottom,transparent,var(--bc-bg));pointer-events:none}
.bc.ds .ds-table--folded .ds-table__unfold{position:relative;z-index:1;margin:calc(-1 * var(--bc-target) / 2) auto 0}
.bc.ds .ds-table:not(.ds-table--folded) .ds-table__unfold{margin-left:auto;margin-right:auto}
.bc.ds .ds-table .ds-nowrap{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)}
@media (min-width:601px){.bc.ds .ds-table .bc-table--tight th,.bc.ds .ds-table .bc-table--tight td{padding-left:var(--bc-space-1);padding-right:var(--bc-space-1)}}
.bc.ds .ds-table caption.ds-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.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-color-bands{box-sizing:border-box;width:min(100%,342px);margin:var(--bc-space-3) 0 0;padding:var(--bc-space-4);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);background:var(--bc-surface)}
.bc.ds .ds-color-bands__heading{margin:0 0 var(--bc-space-2);font-size:18px;line-height:1.45;font-weight:700;color:var(--bc-text)}
.bc.ds .ds-color-bands__drawing{width:100%;max-width:300px}
.bc.ds .ds-color-bands__svg{width:100%;height:auto}
.bc.ds .ds-color-bands__lead{fill:none;stroke:var(--bc-muted);stroke-width:4}
.bc.ds .ds-color-bands__body{fill:#e6d3b0;stroke:var(--bc-muted);stroke-width:1}
.bc.ds .ds-color-bands__direction{fill:none;stroke:var(--bc-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bc.ds .ds-color-bands__band{stroke:#514634;stroke-width:1}
.bc.ds .ds-color-bands__band.is-black{fill:#111111}
.bc.ds .ds-color-bands__band.is-brown{fill:#8b4a1f}
.bc.ds .ds-color-bands__band.is-red{fill:#e53935}
.bc.ds .ds-color-bands__band.is-orange{fill:#fb8c00}
.bc.ds .ds-color-bands__band.is-yellow{fill:#fdd835}
.bc.ds .ds-color-bands__band.is-green{fill:#43a047}
.bc.ds .ds-color-bands__band.is-blue{fill:#1e88e5}
.bc.ds .ds-color-bands__band.is-violet{fill:#8e24aa}
.bc.ds .ds-color-bands__band.is-grey{fill:#9e9e9e}
.bc.ds .ds-color-bands__band.is-white{fill:#ffffff}
.bc.ds .ds-color-bands__band.is-gold{fill:#d4af37}
.bc.ds .ds-color-bands__band.is-silver{fill:#c0c0c0}
.bc.ds .ds-color-bands__band.is-none{fill:transparent;stroke-dasharray:3 2}
.bc.ds .ds-color-bands__labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;font-size:16px;line-height:1.3;color:var(--bc-text);text-align:center}
.bc.ds .ds-color-bands__label{min-width:0;display:flex;flex-direction:column;align-items:center}
.bc.ds .ds-color-bands__label:last-child{grid-column:5}
.bc.ds .ds-color-bands__label strong{font-weight:700}
@media(min-width:601px){.bc.ds .ds-color-bands{width:100%}.bc.ds .ds-color-bands__drawing,.bc.ds .ds-color-bands__labels{max-width:520px;margin-left:auto;margin-right:auto}.bc.ds .ds-color-bands__heading{text-align:center}}
/* 年末年始の 10 日間。日付と 2 行の窓口を同じ 10 列にそろえる。 */
.bc.ds .ds-year-end-band{max-width:40rem;min-width:0}
.bc.ds .ds-year-end-band__callout{margin:0 0 var(--bc-space-2);font-weight:700;color:var(--bc-brand-strong)}
.bc.ds .ds-year-end-band__days{white-space:nowrap}
.bc.ds .ds-year-end-band__grid{min-width:0}
.bc.ds .ds-year-end-band__dates,.bc.ds .ds-year-end-band__cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:1px}
.bc.ds .ds-year-end-band__date{min-width:0;padding:var(--bc-space-1) 0;text-align:center;font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.bc.ds .ds-year-end-band__date b,.bc.ds .ds-year-end-band__date small{display:block;font-size:inherit}
.bc.ds .ds-year-end-band__date-split{display:none}
.bc.ds .ds-year-end-band__date small{color:var(--bc-muted)}
.bc.ds .ds-year-end-band__date.is-different{background:var(--bc-caution-bg);border-radius:var(--bc-radius-input)}
.bc.ds .ds-year-end-band__pointer{display:block;height:1rem;font-style:normal}
.bc.ds .ds-year-end-band__date.is-selected .ds-year-end-band__pointer::before{content:"▼";color:var(--bc-brand-strong)}
.bc.ds .ds-year-end-band__row{margin-top:var(--bc-space-2)}
.bc.ds .ds-year-end-band__row-name{font-weight:700;margin-bottom:var(--bc-space-1)}
.bc.ds .ds-year-end-band__row-name span{font-size:var(--ds-text-small);font-weight:400;color:var(--bc-muted)}
.bc.ds .ds-year-end-band__cell{display:grid;place-items:center;min-width:0;min-height:2.5rem;border-radius:var(--bc-radius-input);background:var(--bc-surface);border:var(--bc-line) solid var(--bc-border);font-size:14px;font-weight:700;color:var(--bc-text)}
.bc.ds .ds-year-end-band__cell.is-closed{background:var(--bc-brand);color:var(--bc-bg);border-color:var(--bc-brand)}
.bc.ds .ds-year-end-band__cell.is-different:not(.is-closed){background:var(--bc-caution-bg);border-color:var(--bc-caution-text)}
.bc.ds .ds-year-end-band__cell.is-selected{outline:3px solid var(--bc-text);outline-offset:1px}
@media(max-width:699px){.bc.ds .ds-year-end-band__date{font-size:13px}.bc.ds .ds-year-end-band__date-full{display:none}.bc.ds .ds-year-end-band__date-split,.bc.ds .ds-year-end-band__date-split small,.bc.ds .ds-year-end-band__date-split strong{display:block}.bc.ds .ds-year-end-band__date-split strong{font-size:14px}}
.bc.ds .ds-eyecatch{float:right;width:var(--ds-col-side);margin:0 0 var(--ds-space-item) var(--ds-space-item)}
.bc.ds .ds-eyecatch img{display:block;width:100%;height:auto;border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
.bc.ds .ds-eyecatch~:not(p){clear:both}
@media (max-width:600px){.bc.ds .ds-eyecatch{float:none;width:100%;margin:0}}
.bc.ds .ds-hero{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:var(--ds-space-item);align-items:start}
.bc.ds .ds-hero .ds-answer{grid-column:1;grid-row:1}
.bc.ds .ds-hero .ds-eyecatch{grid-column:2;grid-row:1;float:none;width:100%;margin:0}
.bc.ds .ds-hero .ds-actions{grid-column:1/-1;grid-row:2}
.bc.ds .ds-hero .ds-hero__note{display:none}
@media (max-width:600px){.bc.ds .ds-hero .ds-answer__facts .is-founder{display:none}.bc.ds .ds-hero .ds-hero__note{display:block;margin:0;color:var(--bc-muted)}.bc.ds .ds-hero{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;margin-bottom:1.5rem}.bc.ds .ds-hero .ds-eyecatch{order:-1;width:100%}.bc.ds .ds-hero .ds-eyecatch img{height:10rem;object-fit:cover;object-position:center 76%}}
@media (max-width:600px){.bc.ds .ds-hero .ds-eyecatch--tall{order:1}}
.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:where(:not([type=radio],[type=checkbox])),.bc.ds .ds-tool select{width:100%;max-width:none;min-height:var(--bc-target)}
/* ラジオ・チェックボックスは字の高さに合わせた小さな印。押せる大きさ（44px）は包む label で持つ（10/17 夜 お宮参りで印が 44px・字が 1 字ずつ折れた） */
.bc.ds .ds-tool input:where([type=radio],[type=checkbox]){width:1.25rem;height:1.25rem;min-height:0;flex:0 0 auto;margin:0;accent-color:var(--bc-brand)}
.bc.ds .ds-tool .bc-field__choice input{flex:0 0 var(--bc-target);width:var(--bc-target);height:var(--bc-target)}  /* 選択肢の部品は 44px の箱に印を描く（bc-ui.css）。20px に縮めると印が 12px はみ出して字に重なる（10/18 ストップウォッチ・タイマー・日付計算・サマータイム） */
.bc.ds .ds-tool label:has(>input:where([type=radio],[type=checkbox])){display:inline-flex;flex-direction:row;align-items:center;gap:var(--bc-space-2);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-tool-result~.bc-facts{margin-top:var(--bc-space-2);padding-top:var(--bc-space-4);border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-tool form:has(.ds-tool-result)>.ds-table{margin-top:var(--bc-space-4);padding-top:var(--bc-space-4);border-top:var(--bc-line) solid var(--bc-border)}
.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-tool-grid>.bc-field:has(>.ds-datetime__pair){grid-column:1/-1}
 .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}
.bc.ds .ds-explain__steps li+li{margin-top:var(--ds-space-item)}
/* ガイドの面の日付の帯図（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)}
/* 期間の帯と日の印。字は SVG の見かけの幅で 14px 以上を保つ */
.bc.ds .ds-band-marks .ds-figure__media{max-width:100%;border:0;background:transparent}
.bc.ds .ds-band-marks svg{width:100%;height:auto}
.bc.ds .ds-band-marks__band{fill:var(--bc-border)}
.bc.ds .ds-band-marks__segment{fill:var(--bc-current-bg)}
.bc.ds .ds-band-marks__segment.is-main,.bc.ds .ds-band-marks__segment.is-mine{fill:var(--bc-brand)}
.bc.ds .ds-band-marks__segment.is-night,.bc.ds .ds-band-marks__segment.is-night-on{height:4px;transform:translateY(16px);fill:var(--bc-border)}
.bc.ds .ds-band-marks__segment.is-night-on{fill:var(--bc-text)}
.bc.ds .ds-band-marks__mark line{stroke:var(--bc-muted);stroke-width:2}
.bc.ds .ds-band-marks__mark text,.bc.ds .ds-band-marks__end{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-band-marks__mark.is-sub text{fill:var(--bc-muted)}
.bc.ds .ds-band-marks__mark.is-main line,.bc.ds .ds-band-marks__mark.is-mine line{stroke:var(--bc-brand-strong);stroke-width:4}
.bc.ds .ds-band-marks__mark.is-main text,.bc.ds .ds-band-marks__mark.is-mine text{fill:var(--bc-brand-strong);font-weight:700}
.bc.ds .ds-band-marks__mark.is-now line{stroke:var(--bc-text);stroke-dasharray:3 3}
.bc.ds .ds-band-marks__mark.is-now text{font-weight:700}
.bc.ds .ds-band-marks--labels .ds-band-marks__segment-label{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-band-marks figcaption{font-size:var(--ds-text-small);color:var(--bc-muted)}
@media(max-width:699px){.bc.ds .ds-band-marks__mark text,.bc.ds .ds-band-marks__end,.bc.ds .ds-band-marks--labels .ds-band-marks__segment-label{font-size:14px}}
/* 値がとりうる幅と年ごとの点、または基準と本人の値。 */
.bc.ds .ds-range-band .ds-figure__media{max-width:100%;border:0;background:transparent}
.bc.ds .ds-range-band svg{width:100%;height:auto}
.bc.ds .ds-range-band__band{fill:var(--bc-border)}
.bc.ds .ds-range-band__zone rect{fill:var(--bc-current-bg)}
.bc.ds .ds-range-band__zone.is-main rect,.bc.ds .ds-range-band__zone.is-mine rect{fill:var(--bc-brand)}
.bc.ds .ds-range-band__zone text,.bc.ds .ds-range-band__tick text,.bc.ds .ds-range-band__mark text{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-range-band__mark text.is-year{font-size:12px;font-weight:400}.bc.ds .ds-range-band__tick line{stroke:var(--bc-muted);stroke-width:2}
.bc.ds .ds-range-band__mark circle{fill:var(--bc-muted)}
.bc.ds .ds-range-band__mark line{stroke:var(--bc-muted);stroke-width:3}
.bc.ds .ds-range-band__mark.is-main circle,.bc.ds .ds-range-band__mark.is-mine circle{fill:var(--bc-brand-strong)}
.bc.ds .ds-range-band__mark.is-main line,.bc.ds .ds-range-band__mark.is-mine line{stroke:var(--bc-brand-strong);stroke-width:4}
.bc .ds-range-band--kyukei .ds-range-band__mark line.ds-range-band__lead,.bc .ds-range-band--kyukei line.ds-range-band__lead{stroke:var(--bc-brand-strong);stroke-width:1.5}
.bc.ds .ds-range-band__mark.is-now circle{fill:var(--bc-text)}
.bc.ds .ds-range-band__mark.is-now line{stroke:var(--bc-text);stroke-dasharray:3 3}
.bc.ds .ds-range-band__mark.is-ref line{stroke:var(--bc-muted);stroke-dasharray:4 3}
.bc.ds .ds-range-band__mark.is-main text,.bc.ds .ds-range-band__mark.is-now text,.bc.ds .ds-range-band__mark.is-mine text{font-weight:700}
.bc.ds .ds-range-band__tick.is-faint text{fill:var(--bc-muted)}
.bc.ds .ds-range-band__vline line{stroke:var(--bc-brand-strong);stroke-width:2;stroke-dasharray:5 4}.bc.ds .ds-range-band__vline text{font-size:16px;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-range-band__mark line.ds-range-band__leader{stroke:var(--bc-muted);stroke-width:1;stroke-dasharray:none}
/* 年を積む図: 名前の付く点に白い縁を付け、隣の列の点と離して見せる（10/17 初めて見る目） */
.bc.ds .ds-range-band svg.is-year-stack .ds-range-band__mark.is-main circle,.bc.ds .ds-range-band svg.is-year-stack .ds-range-band__mark.is-now circle{stroke:var(--bc-surface);stroke-width:2.5;paint-order:stroke}
.bc.ds .ds-range-band__legend{display:flex;flex-wrap:wrap;align-items:center;gap:0 .75rem;font-size:.875rem;line-height:1.4;color:var(--bc-muted)}
.bc.ds .ds-range-band__legend .is-main{color:var(--bc-brand-strong)}
.bc.ds .ds-range-band__legend .is-now{color:var(--bc-text)}
.bc.ds .ds-range-band figcaption{font-size:var(--ds-text-small);color:var(--bc-muted)}
/* 休憩時間の計算: 分に比例する三つの区間。既存の range_band は変えない。 */
.bc .ds-range-band--kyukei{box-sizing:border-box;width:100%;margin:var(--bc-space-3) 0 0;padding:var(--bc-space-3);border:1px solid var(--bc-border);border-radius:var(--bc-radius-card);background:var(--bc-bg)}
.bc .ds-range-band--kyukei [role=heading]{margin:0 0 var(--bc-space-2);font-size:var(--bc-text-h2);font-weight:700;line-height:1.45}
.bc .ds-range-band--kyukei .ds-figure__media{width:100%;max-width:none;border:0;background:transparent}
.bc .ds-range-band--kyukei svg{display:block;width:100%;height:auto;overflow:visible}
.bc .ds-range-band--kyukei svg text{font-size:12px;fill:var(--bc-text)}
@media(max-width:600px){.bc .ds-range-band--kyukei svg text{font-size:16px}}
.bc .ds-range-band--kyukei .ds-range-band__boundary text{font-weight:700}
.bc .ds-range-band--kyukei .ds-range-band__work-bar text{font-weight:700;fill:var(--bc-text)}
.bc .ds-range-band--kyukei .ds-range-band__work-bar #kk-band-break-name{fill:var(--bc-brand-strong)}
.bc .ds-range-band--kyukei .ds-range-band__zone.is-none{fill:var(--bc-surface)}
.bc .ds-range-band--kyukei .ds-range-band__zone.is-middle{fill:var(--bc-current-bg)}
.bc .ds-range-band--kyukei .ds-range-band__zone.is-high{fill:var(--bc-border)}
.bc .ds-range-band--kyukei .ds-range-band__zone-label{font-weight:700}
.bc .ds-range-band--kyukei .ds-range-band__edge,.bc .ds-range-band--kyukei .ds-range-band__boundary line{stroke:var(--bc-text);stroke-width:3}
.bc .ds-range-band--kyukei .ds-range-band__next line{stroke:var(--bc-brand-strong);stroke-width:2}
.bc .ds-range-band--kyukei .ds-range-band__next path{fill:var(--bc-brand-strong)}
.bc .ds-range-band--kyukei .ds-range-band__next text,.bc .ds-range-band--kyukei .ds-range-band__exact{fill:var(--bc-brand-strong);font-weight:700}
.bc .ds-range-band--kyukei .ds-range-band__tick line,.bc .ds-range-band--kyukei .ds-range-band__axis-end line{stroke:var(--bc-muted)}
.bc .ds-range-band--kyukei .ds-range-band__work-bar .is-work{fill:var(--bc-current-bg)}
.bc .ds-range-band--kyukei .ds-range-band__work-bar .is-break{fill:var(--bc-brand)}
.bc .ds-range-band--kyukei [hidden]{display:none}
.bc .ds-range-band--kyukei .ds-range-band__mark line{stroke:var(--bc-brand-strong);stroke-width:3}
.bc .ds-range-band--kyukei .ds-range-band__mark path{fill:var(--bc-brand-strong)}
.bc .ds-range-band--kyukei .ds-range-band__mark text{fill:var(--bc-brand-strong);font-weight:700}
/* 入力で動く一般の帯にも、休憩時間の見本と同じ線・矢印・札の意味色を付ける。 */
.bc .ds-range-band--mine .ds-range-band__boundary line{stroke:var(--bc-text);stroke-width:2}
.bc .ds-range-band--mine .ds-range-band__boundary text{fill:var(--bc-text);font-weight:700}
.bc .ds-range-band--mine .ds-range-band__lead{stroke:var(--bc-brand-strong);stroke-width:1.5}
.bc .ds-range-band--mine .ds-range-band__next line{stroke:var(--bc-brand-strong);stroke-width:2}
.bc .ds-range-band--mine .ds-range-band__next path,.bc .ds-range-band--mine .ds-range-band__mark path{fill:var(--bc-brand-strong)}
.bc .ds-range-band--mine .ds-range-band__next text,.bc .ds-range-band--mine .ds-range-band__mark.is-mine text{fill:var(--bc-brand-strong);font-weight:700}
.bc.ds .ds-range-band--mine .ds-range-band__zone text.is-small{font-size:14px}
.bc.ds .ds-range-band--mine .ds-range-band__cut{font-size:16px;fill:var(--bc-text)}
/* 行ごとの帯（mode=rows。同じ軸の上に、世帯などの種類ごとに区切りの違う帯を並べる）。字は 14px。色は既存の値。 */
.bc.ds .ds-range-band--rows .ds-figure__media{max-width:100%}
.bc.ds .ds-range-band--rows svg{display:block;width:100%;height:auto}
.bc.ds .ds-range-band--rows svg text{font-size:14px;fill:var(--bc-text)}
.bc.ds .ds-range-band--rows .ds-range-band__row-name,.bc.ds .ds-range-band--rows .ds-range-band__zone-out,.bc.ds .ds-range-band--rows .ds-range-band__zone text,.bc.ds .ds-range-band--rows .ds-range-band__boundary text{font-weight:700}
.bc.ds .ds-range-band--rows .ds-range-band__tick text{font-weight:400;fill:var(--bc-muted)}
.bc.ds .ds-range-band--rows .ds-range-band__zone rect{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-range-band--rows .ds-range-band__zone.is-one rect{fill:var(--bc-surface)}
.bc.ds .ds-range-band--rows .ds-range-band__zone.is-two rect{fill:var(--bc-current-bg)}
.bc.ds .ds-range-band--rows .ds-range-band__zone.is-three rect{fill:var(--bc-brand)}
.bc.ds .ds-range-band--rows .ds-range-band__zone.is-three text{fill:var(--bc-surface)}
.bc.ds .ds-range-band--rows .ds-range-band__boundary line{stroke:var(--bc-text);stroke-width:2}
.bc.ds .ds-range-band--rows .ds-range-band__axis,.bc.ds .ds-range-band--rows .ds-range-band__tick line{stroke:var(--bc-muted);stroke-width:1.5}
.bc.ds .ds-range-band--rows .ds-range-band__mark.is-mine circle{fill:var(--bc-brand-strong);stroke:var(--bc-surface);stroke-width:2.5;paint-order:stroke}
.bc.ds .ds-range-band--rows .ds-range-band__mark.is-mine line{stroke:var(--bc-brand-strong);stroke-width:2}
.bc.ds .ds-range-band--rows .ds-range-band__mark.is-mine text{fill:var(--bc-brand-strong);font-weight:700}
/* 年間の曲線・階段。線の形と凡例でも系列を区別する。 */
.bc.ds .ds-year-curve .ds-figure__media{max-width:100%;border:0;background:transparent}
.bc.ds .ds-year-curve svg{display:block;width:100%;height:auto}
.bc.ds .ds-year-curve h2{text-spacing-trim:space-all}/* 全角かっこの前後を詰める Chrome の既定で、行が枠より 6px 長く測られていた（10/21 退職金・SP 390px）。詰めを切り、ほかのブラウザと同じ幅にする */
.bc.ds .ds-year-curve__axis,.bc.ds .ds-year-curve__x-tick line{stroke:var(--bc-muted);stroke-width:1.5}
.bc.ds .ds-year-curve__y-tick line{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-year-curve__x-tick text,.bc.ds .ds-year-curve__y-tick text,.bc.ds .ds-year-curve__ref text,.bc.ds .ds-year-curve__mark text{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-year-curve__ref line{stroke:var(--bc-muted);stroke-width:1.5;stroke-dasharray:5 4}
.bc.ds .ds-year-curve__fill{fill:var(--bc-current-bg)}
.bc.ds .ds-year-curve__line{fill:none;stroke:var(--bc-brand-strong);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bc.ds .ds-year-curve__line.is-sub{stroke:var(--bc-muted);stroke-dasharray:6 4}
.bc.ds .ds-year-curve__line.is-mine{stroke:var(--bc-text);stroke-dasharray:2 4}
.bc.ds .ds-year-curve__line.is-now{stroke:var(--bc-text);stroke-dasharray:8 3 2 3}
.bc.ds .ds-year-curve__leader{stroke:var(--bc-muted);stroke-width:1}
.bc.ds .ds-year-curve__mark circle{fill:var(--bc-brand-strong)}
.bc.ds .ds-year-curve__mark.is-sub circle{fill:var(--bc-muted)}
.bc.ds .ds-year-curve__mark circle.is-ring{fill:none;stroke:var(--bc-muted);stroke-width:2}/* SP で近い 2 点: 参考の点は輪にして、札を相手の線へ並べる（10/21） */
.bc.ds .ds-year-curve__mark.is-mine circle,.bc.ds .ds-year-curve__mark.is-now circle{fill:var(--bc-text)}
.bc.ds .ds-year-curve__mark.is-main text{font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-year-curve__mark.is-mine text,.bc.ds .ds-year-curve__mark.is-now text{font-weight:700}
.bc.ds .ds-year-curve__next line{stroke:var(--bc-brand-strong);stroke-width:2}
.bc.ds .ds-year-curve__next path{fill:var(--bc-brand-strong)}
.bc.ds .ds-year-curve__next line.is-drop{stroke-width:1.5;stroke-dasharray:2 3}
.bc.ds .ds-year-curve__next circle{fill:var(--bc-brand-strong)}
.bc.ds .ds-year-curve__next text{font-size:16px;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-year-curve__legend{display:flex;flex-wrap:wrap;gap:var(--bc-space-2);font-size:var(--ds-text-small)}
.bc.ds .ds-year-curve__key{display:inline-flex;align-items:center;gap:var(--bc-space-1)}
.bc.ds .ds-year-curve__key::before{content:"";display:inline-block;width:1.5rem;border-top:3px solid var(--bc-brand-strong)}
.bc.ds .ds-year-curve__key.is-sub::before{border-top-color:var(--bc-muted);border-top-style:dashed}
.bc.ds .ds-year-curve__key.is-mine::before,.bc.ds .ds-year-curve__key.is-now::before{border-top-color:var(--bc-text);border-top-style:dashed}
.bc.ds .ds-year-curve figcaption{font-size:var(--ds-text-small);color:var(--bc-muted)}
.bc.ds.ds-embed.ds-embed--finance{max-width:none;width:100%}
.bc.ds .ds-year-curve--finance{box-sizing:border-box;width:100%;padding:20px;margin:var(--bc-space-4) 0 0;border:1px solid var(--bc-border);background:var(--bc-surface)}
.bc.ds .ds-year-curve--finance h2{font-size:var(--ds-text-h3);line-height:1.45;margin:0 0 var(--bc-space-3);overflow-wrap:anywhere}
.bc.ds .ds-year-curve--finance .ds-figure__media{width:100%;max-width:none}
.bc.ds .ds-year-curve--finance svg{width:100%;height:auto;overflow:visible}
.bc.ds .ds-year-curve--finance svg text{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-finance-unit{font-weight:600}
.bc.ds .ds-finance-grid{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-finance-axis,.bc.ds .ds-finance-leader{fill:none;stroke:var(--bc-muted);stroke-width:1.5}
.bc.ds .ds-finance-fill{fill:var(--bc-current-bg)}
.bc.ds .ds-finance-key{stroke:var(--bc-brand-strong);stroke-width:1}
.bc.ds .ds-finance-principal,.bc.ds .ds-finance-balance{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bc.ds .ds-finance-principal{stroke:var(--bc-muted);stroke-dasharray:7 5}
.bc.ds .ds-finance-balance{stroke:var(--bc-brand-strong)}
.bc.ds .ds-finance-name{font-weight:700}
.bc.ds .ds-finance-name.is-balance,.bc.ds .ds-finance-name.is-gain{fill:var(--bc-brand-strong)}
.bc.ds .ds-finance-gap{font-weight:600;fill:var(--bc-brand-strong)}
.bc.ds .ds-year-curve--finance .ds-finance-value{white-space:nowrap}
@media(max-width:499px){.bc.ds .ds-year-curve--finance .ds-finance-name.is-gain,.bc.ds .ds-year-curve--finance .ds-finance-value.is-gain{paint-order:stroke;stroke:var(--bc-current-bg);stroke-width:4;stroke-linejoin:round}}
@media(max-width:390px){.bc.ds .ds-year-curve--finance{padding:16px}}
.bc.ds .ds-timeline .ds-tl-label.ds-tl-past{fill:var(--bc-muted)}
.bc.ds{--ds-tl-bg:var(--bc-bg);--ds-tl-surface:var(--bc-surface);--ds-tl-line:var(--bc-border);--ds-tl-ink:var(--bc-text);--ds-tl-muted:var(--bc-muted);--ds-tl-accent:var(--bc-brand-strong);--ds-tl-soft:var(--bc-brand)}
.bc.ds .ds-timeline--ex{max-width:none}
.bc.ds #gakureki-timeline .ds-timeline--ex:not(.ds-timeline--ex-sp):not(.ds-timeline--ex-mid) .ds-figure__media{padding:8px}
.bc.ds #gakureki-timeline .ds-timeline--ex:not(.ds-timeline--ex-sp):not(.ds-timeline--ex-mid) .ds-tl-action-head{font-size:20px;letter-spacing:-1.5px}
.bc.ds .ds-timeline--ex .ds-figure__media{max-width:none;box-sizing:border-box;padding:20px;place-items:start;background:var(--ds-tl-bg)}
.bc.ds .ds-timeline--ex .ds-tl-axis{stroke:var(--ds-tl-line);stroke-width:2}
.bc.ds .ds-timeline--ex .ds-tl-stem{stroke:var(--ds-tl-accent);stroke-width:2}
.bc.ds .ds-timeline--ex .ds-tl-period--active{fill:var(--ds-tl-accent)}
.bc.ds .ds-timeline--ex .ds-tl-period--quiet{fill:var(--ds-tl-line)}
.bc.ds .ds-timeline--ex .ds-tl-period-name{fill:var(--ds-tl-ink);font-size:20px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-period-name--active{fill:var(--ds-tl-bg)}
.bc.ds .ds-timeline--ex .ds-tl-ring{fill:var(--ds-tl-bg);stroke:var(--ds-tl-accent);stroke-width:3}
.bc.ds .ds-timeline--ex .ds-tl-ring--next{stroke-width:4}
.bc.ds .ds-timeline--ex .ds-tl-ring--past{fill:var(--ds-tl-bg);stroke:var(--bc-muted)}
.bc.ds .ds-timeline--ex .ds-tl-ring--deadline{stroke:var(--bc-sun)}
.bc.ds .ds-timeline--ex .ds-tl-card{fill:var(--ds-tl-surface);stroke:var(--ds-tl-line)}
.bc.ds .ds-timeline--ex .ds-tl-card-date{fill:var(--ds-tl-ink);font-size:24px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-card-date--past{fill:var(--bc-muted)}
.bc.ds .ds-timeline--ex .ds-tl-chip{fill:var(--ds-tl-surface);stroke:var(--ds-tl-line)}
.bc.ds .ds-timeline--ex .ds-tl-chip-text{fill:var(--ds-tl-accent);font-size:20px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-card-title{fill:var(--ds-tl-ink);font-size:22px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-card-title--next{font-size:27px;fill:var(--ds-tl-accent)}
.bc.ds .ds-timeline--ex .ds-tl-card-title--past{fill:var(--bc-muted)}
.bc.ds .ds-timeline--ex .ds-tl-card-title--deadline{fill:var(--bc-sun)}
.bc.ds .ds-timeline--ex .ds-tl-card-detail,.bc.ds .ds-timeline--ex .ds-tl-card-note{fill:var(--ds-tl-muted);font-size:20px}
.bc.ds .ds-timeline--ex .ds-tl-countdown{fill:var(--ds-tl-accent);font-size:28px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-action{fill:var(--ds-tl-bg)}
.bc.ds .ds-timeline--ex .ds-tl-action-bar{fill:var(--ds-tl-accent)}
.bc.ds .ds-timeline--ex .ds-tl-action-head{fill:var(--ds-tl-muted);font-size:17px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-action-text{fill:var(--ds-tl-ink);font-size:20px;font-weight:700}
.bc.ds .ds-timeline--ex .ds-tl-span{fill:none;stroke:var(--ds-tl-accent);stroke-width:2}
.bc.ds .ds-timeline--ex-sp .ds-tl-period-name{font-size:18px}
.bc.ds .ds-timeline--ex-mid .ds-tl-period-name{font-size:18px}
.bc.ds .ds-timeline--ex-mid .ds-tl-card-date{font-size:20px}
.bc.ds .ds-timeline--ex-mid .ds-tl-card-title{font-size:19px}
.bc.ds .ds-timeline--ex-mid .ds-tl-card-title--next{font-size:22px}
.bc.ds .ds-timeline--ex-mid .ds-tl-card-detail{font-size:17px}
.bc.ds .ds-timeline--ex-mid .ds-tl-countdown{font-size:23px}
.bc.ds .ds-timeline--ex-mid .ds-tl-action-text{font-size:17px}
.bc.ds .ds-timeline--ex-sp .ds-tl-card-date{font-size:19px}
.bc.ds .ds-timeline--ex-sp .ds-tl-chip-text{font-size:14px}
.bc.ds .ds-timeline--ex-sp .ds-tl-card-title{font-size:19px}
.bc.ds .ds-timeline--ex-sp .ds-tl-card-title--next{font-size:22px}
.bc.ds .ds-timeline--ex-sp .ds-tl-card-detail{font-size:18.5px}
.bc.ds .ds-timeline--ex-sp .ds-tl-countdown{font-size:21px}
.bc.ds .ds-timeline--ex-sp .ds-tl-action-text{font-size:16.5px}
.bc.ds .ds-timeline--ex-sp .ds-tl-action-head{font-size:16.5px}
.bc.ds .ds-timeline--credit .ds-figure__media{max-width:none;background:var(--bc-bg)}
.bc.ds .ds-timeline--credit .ds-tl-axis{stroke:var(--bc-border);stroke-width:4}
.bc.ds .ds-timeline--credit .ds-tl-credit-dot{fill:var(--bc-bg);stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-timeline--credit .ds-tl-credit-dot.is-answer{fill:var(--bc-brand-strong);stroke-width:4}
.bc.ds .ds-timeline--credit .ds-tl-credit-dot.is-original{stroke:var(--bc-muted);stroke-width:2}
.bc.ds .ds-timeline--credit .ds-tl-credit-name{font-size:18px;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-timeline--credit .ds-tl-credit-name.is-answer{font-size:21px;fill:var(--bc-brand-strong)}
.bc.ds .ds-timeline--credit .ds-tl-credit-date{font-size:17px;fill:var(--bc-text)}
.bc.ds .ds-timeline--credit .ds-tl-credit-date.is-answer{font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-timeline--credit .ds-tl-credit-date.is-original{fill:var(--bc-muted)}
.bc.ds .ds-timeline--credit .ds-tl-credit-days{font-size:18px;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-timeline--credit .ds-tl-credit-shift{font-size:17px;fill:var(--bc-muted)}
.bc.ds .ds-timeline--credit figcaption{font-size:1rem;word-break:keep-all}
@media(max-width:600px){.bc.ds .ds-timeline--credit .ds-tl-credit-name,.bc.ds .ds-timeline--credit .ds-tl-credit-date,.bc.ds .ds-timeline--credit .ds-tl-credit-days,.bc.ds .ds-timeline--credit .ds-tl-credit-shift{font-size:19px}}
/* 比べの棒と積み上げの内訳。色の意味は図の補足にも書く。 */
.bc.ds .ds-compare-bars .ds-figure__media{border:0;background:transparent}
.bc.ds .ds-compare-bars{max-width:none}
.bc.ds .ds-compare-bars svg{overflow:visible}
.bc.ds .ds-compare-bars__legend{display:flex;align-items:center;gap:var(--bc-space-3);margin:0 0 var(--bc-space-2);padding:0;list-style:none;flex-wrap:wrap;font-size:var(--ds-text-small)}
.bc.ds .ds-compare-bars__legend li{display:inline-flex;align-items:center;gap:var(--bc-space-1)}
.bc.ds .ds-compare-bars__swatch{display:inline-block;flex:none;width:.75rem;height:.75rem}
.bc.ds .ds-compare-bars__swatch.is-main{background:var(--bc-brand)}
.bc.ds .ds-compare-bars__swatch.is-sub{background:var(--bc-border)}
.bc.ds .ds-compare-bars__swatch.is-tax{background:var(--bc-sun)}
.bc.ds .ds-compare-bars__swatch.is-mine{background:var(--bc-brand-strong)}
.bc.ds .ds-compare-bars svg{width:100%;height:auto;overflow:visible}
.bc.ds .ds-compare-bars__label,.bc.ds .ds-compare-bars__total,.bc.ds .ds-compare-bars__inside{font-size:14px;fill:var(--bc-text)}
.bc.ds .ds-compare-bars__row.is-mine .ds-compare-bars__label,.bc.ds .ds-compare-bars__row.is-mine .ds-compare-bars__total{font-weight:700}
.bc.ds .ds-compare-bars__part.is-main{fill:var(--bc-brand)}
.bc.ds .ds-compare-bars__part.is-sub{fill:var(--bc-border);stroke:var(--bc-muted);stroke-width:1}
.bc.ds .ds-compare-bars__part.is-tax{fill:var(--bc-sun)}
.bc.ds .ds-compare-bars__part.is-mine{fill:var(--bc-brand-strong)}
.bc.ds .ds-compare-bars__inside.is-main,.bc.ds .ds-compare-bars__inside.is-mine,.bc.ds .ds-compare-bars__inside.is-tax{fill:var(--bc-bg)}
.bc.ds .ds-compare-bars__zero{stroke:var(--bc-text);stroke-width:2}
.bc.ds .ds-compare-bars figcaption{font-size:var(--ds-text-small);line-height:var(--ds-leading-small);overflow-wrap:normal}
.bc.ds .ds-compare-bars figcaption .ds-nowrap{white-space:nowrap}
.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}
/* 説明文のある欄が混じる格子は、欄を ラベル・入力・説明文 の 3 行に分けて格子の行に合わせる（subgrid）。
   10/17 住民税: 説明文のある欄の隣で入力が 61px 下がった。財布の使い始め: チェックだけの欄が 52px ずれた。
   欄の中の間は字の余白で取る。説明文の無い格子は上のまま（行が増えると格子の間が 8px 足される） */
.bc.ds .ds-tool-grid:has(>.bc-field>.bc-field__help)>.bc-field{grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:normal}
.bc.ds .ds-tool-grid:has(>.bc-field>.bc-field__help)>.bc-field>:first-child{margin-bottom:var(--bc-space-2)}
.bc.ds .ds-tool-grid:has(>.bc-field>.bc-field__help)>.bc-field>:nth-child(n+3){margin-top:var(--bc-space-2)}
.bc.ds .ds-tool-grid:has(>.bc-field>.bc-field__help)>.bc-field>.bc-field__choice:only-child{grid-row:2;align-self:start;margin-bottom:0}
/* 時刻の欄と、日付と時刻の 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 thead th{width:max-content;max-width:none}
 .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 th[scope=row],.bc.ds .ds-table .ds-cards td::before{white-space:normal;overflow-wrap:anywhere}
 /* 値に字のかたまり（数を折らない span・リンク）が混じっても升に割れないよう、grid でなく左に浮かせたラベル＋字下げで組む（10/17 夜 ⑥ 偏差値の計算例「10.6%」がラベルの列へ。SP 29 面 370 セル） */
 .bc.ds .ds-table .ds-cards td{display:flow-root;padding:var(--bc-space-1) 0 var(--bc-space-1) calc(6rem + var(--bc-space-2));border:0;text-align:left;overflow-wrap:anywhere}
 .bc.ds .ds-table .ds-cards td::before{content:attr(data-label);float:left;width:6rem;margin-left:calc(-6rem - var(--bc-space-2));color:var(--bc-muted);font-size:var(--ds-text-small)}
 .bc.ds .ds-table .ds-cards td:empty{display:none}
 /* 10/17 ユーザー: カードの枠と外の枠が二重に見えた。SP のカードは枠 1 重（カードの枠だけ）にし、外の枠を外す */
 .bc.ds .ds-table .bc-table-wrap:has(>.ds-cards){border:0;border-radius:0;overflow:visible}
}
/* 本人の都市の選択（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 .ds-mypick--nav label{flex-basis:100%}
.bc.ds [data-my-row].is-mine{font-weight:700;background:var(--bc-current-bg)}
.bc.ds .ds-table tr[aria-current]{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)}
/* 労災の休業日数と1日分の割合。既存の暦日用 breakdown_bar には作用しない。 */
.bc.ds .ds-rosai-breakdown{box-sizing:border-box;margin:var(--ds-space-item) 0;padding:1.25rem;border:1px solid var(--bc-border);border-radius:var(--bc-radius-card);background:var(--bc-bg);min-width:0}
.bc.ds .ds-rosai-breakdown .ds-rosai-breakdown__answer{margin:0 0 var(--ds-space-group);font-size:1.125rem;line-height:1.5;font-weight:700;color:var(--bc-text);word-break:keep-all}
.bc.ds .ds-rosai-breakdown__days{margin:0}
.bc.ds .ds-rosai-breakdown__amount{margin-top:var(--ds-space-group)}
.bc.ds .ds-rosai-breakdown__axis{margin:0 0 var(--ds-space-tight);font-size:1rem;line-height:1.5;font-weight:700}
.bc.ds .ds-rosai-breakdown .ds-rosai-breakdown__bar{display:block;width:100%;height:2rem;border-radius:var(--bc-radius-input);overflow:hidden;background:var(--bc-surface)}
.bc.ds .ds-rosai-breakdown__wait{fill:var(--bc-muted)}
.bc.ds .ds-rosai-breakdown__paid,.bc.ds .ds-rosai-breakdown__comp{fill:var(--bc-brand)}
.bc.ds .ds-rosai-breakdown__special{fill:var(--bc-good-text)}
.bc.ds .ds-rosai-breakdown__unpaid{fill:var(--bc-border)}
.bc.ds .ds-rosai-breakdown__day-labels{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--ds-space-item);margin-top:var(--ds-space-tight);font-size:1rem;line-height:1.5}
.bc.ds .ds-rosai-breakdown__day-labels span{white-space:nowrap}
.bc.ds .ds-rosai-breakdown__day-labels span:last-child{margin-left:auto;text-align:right}
.bc.ds .ds-rosai-breakdown__amount-labels{display:grid;grid-template-columns:3fr 1fr 1fr;margin-top:var(--ds-space-tight);font-size:1rem;line-height:1.5}
.bc.ds .ds-rosai-breakdown__amount-labels span{min-width:0;overflow-wrap:anywhere}
.bc.ds .ds-rosai-breakdown__amount-labels span:nth-child(2),.bc.ds .ds-rosai-breakdown__amount-labels span:nth-child(3){padding-left:var(--ds-space-tight);border-left:1px solid var(--bc-border)}
@media(max-width:600px){.bc.ds .ds-rosai-breakdown__amount-labels{grid-template-columns:1fr 1fr;row-gap:var(--ds-space-item)}.bc.ds .ds-rosai-breakdown__amount-labels span:first-child{grid-column:1/-1}.bc.ds .ds-rosai-breakdown__amount-labels span:nth-child(3){padding-left:var(--ds-space-tight)}}
@media(max-width:400px){.bc.ds .ds-rosai-breakdown__amount-labels{grid-template-columns:1fr}.bc.ds .ds-rosai-breakdown__amount-labels span{white-space:nowrap}.bc.ds .ds-rosai-breakdown__amount-labels span:first-child{padding-left:var(--ds-space-tight);border-left:1px solid var(--bc-border)}}
/* 二つの単位を同じ位置に置く換算の目盛り。SVG の字は viewBox 上で 14px。 */
.bc.ds .ds-scale-pair .ds-figure__media{max-width:45rem;border:0;background:transparent}
.bc.ds .ds-mah-scale .ds-figure__media{max-width:40rem}
.bc.ds .ds-mah-scale__svg{width:100%;height:auto}
.bc.ds .ds-mah-scale .ds-mah-scale__svg--sp{display:none}
.bc.ds .ds-mah-scale__band--first{fill:var(--bc-good-bg)}
.bc.ds .ds-mah-scale__band--middle{fill:var(--bc-current-bg)}
.bc.ds .ds-mah-scale__band--last{fill:var(--bc-caution-bg)}
.bc.ds .ds-mah-scale__axis{stroke:var(--bc-text);stroke-width:3}
.bc.ds .ds-mah-scale__boundary{stroke:var(--bc-text);stroke-width:2}
.bc.ds .ds-mah-scale__mine-line{stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-mah-scale__mine-dot{fill:var(--bc-brand-strong);stroke:var(--bc-surface);stroke-width:2}
.bc.ds .ds-mah-scale__arrow{stroke:var(--bc-brand-strong);stroke-width:2}
.bc.ds .ds-mah-scale__svg--pc .ds-mah-scale__arrow{marker-end:url(#ds-mah-arrow-pc)}
.bc.ds .ds-mah-scale__svg--sp .ds-mah-scale__arrow{marker-end:url(#ds-mah-arrow-sp)}
.bc.ds .ds-mah-scale__heading,.bc.ds .ds-mah-scale__tick{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-mah-scale__band-name,.bc.ds .ds-mah-scale__mine-value,.bc.ds .ds-mah-scale__arrow-label{font-size:16px;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-mah-scale__mine-value{fill:var(--bc-brand-strong)}
.bc.ds .ds-mah-scale__band-range{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-mah-scale .ds-mah-scale__band-name--last{fill:var(--bc-caution-text)}
.bc.ds .ds-scale-pair svg{width:100%;height:auto}
.bc.ds .ds-scale-pair .ds-scale-pair__svg--sp{display:none}
.bc.ds .ds-scale-pair__axis{stroke:var(--bc-text);stroke-width:2}
.bc.ds .ds-scale-pair__tick-line{stroke:var(--bc-muted);stroke-width:1}
.bc.ds .ds-scale-pair__zone{fill:var(--bc-current-bg)}
.bc.ds .ds-scale-pair__zone--good{fill:var(--bc-good-bg)}
.bc.ds .ds-scale-pair__zone-label{font-size:16px;fill:var(--bc-text);font-weight:700}
.bc.ds .ds-scale-pair__leader{stroke:var(--bc-muted);stroke-width:1;stroke-dasharray:2 2}
.bc.ds .ds-scale-pair__tick,.bc.ds .ds-scale-pair__mark-a,.bc.ds .ds-scale-pair__mark-b{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-scale-pair__tick{fill:var(--bc-muted)}
.bc.ds .ds-scale-pair__mark-line{stroke:var(--bc-brand);stroke-width:2}
.bc.ds .ds-scale-pair__mark.is-mine .ds-scale-pair__mark-line{stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-scale-pair__mark.is-mine text{font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-scale-pair__reftag-text{font-size:16px;font-weight:700;fill:var(--bc-brand)}
.bc.ds .ds-scale-pair__reftag-leader{stroke:var(--bc-brand);stroke-width:1;stroke-dasharray:2 2}
.bc.ds .ds-scale-pair--tagged .ds-scale-pair__mark.is-mine text{paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
@media(max-width:699px){.bc.ds .ds-scale-pair .ds-figure__media{max-width:none}.bc.ds .ds-scale-pair .ds-scale-pair__svg--pc{display:none}.bc.ds .ds-scale-pair .ds-scale-pair__svg--sp{display:block}.bc.ds .ds-scale-pair__tick,.bc.ds .ds-scale-pair__mark-a,.bc.ds .ds-scale-pair__mark-b{font-size:16px}.bc.ds .ds-scale-pair__zone-label[data-font-size="13"]{font-size:13px}}
@media(max-width:699px){.bc.ds .ds-mah-scale .ds-figure__media{max-width:none}.bc.ds .ds-mah-scale .ds-mah-scale__svg--pc{display:none}.bc.ds .ds-mah-scale .ds-mah-scale__svg--sp{display:block}}
/* 月の格子に期間を塗る図（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)}
/* narrow（10/17 排卵日・PC で 1 か月が本文の幅いっぱいに広がり見づらい）: PC は 1 か月 20rem まで。2 か月は横に並ぶ。SP は今のまま */
@media (min-width:601px){.bc.ds .ds-monthgrid--narrow .ds-monthgrid__months{grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),20rem))}}
.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}
/* 足もとの広告と押せる所の間を 24px 以上に（10/14 親・⑥ 実測: SP で下の広告の上 1px・本文の後ろの広告の下 20px。誤クリックの型。ads.md）。広告の数・順・枠の設定は変えず、ds の面の余白だけ足す */
.content-wrap:has(>main.bc.ds)>.ad-slot-middle{margin-bottom:var(--bc-space-5)}
.bc.ds.ds-footer-links+.bottom-ad{margin-top:var(--bc-space-5)}
/* 添え書きの値は箱の下にそろえる（見出しの行数が違っても、横に並ぶ値の高さがずれない。④ 青色申告の試し 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 .ds-table .bc-table-wrap{max-height:none!important;overflow:visible}
 .bc.ds .ds-table tr[data-fold][hidden]{display:table-row!important}
 .bc.ds .ds-table .ds-table__unfold{display:none!important}
 /* 干支早見表の年表（#eto-table）は印刷で畳んだ行を開く（1926〜2080 の全行を紙に出す） */
 .bc.ds #eto-table tr[data-fold][hidden]{display:table-row!important}
 .bc.ds .ds-table:has(#eto-table) .ds-table__unfold{display:none!important}
 .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}
/* タイマーの道具（templates/ds_tools_timer.html・static/js/ds_tools_timer.js）。色はトークンだけ。円盤は道具の中の描画（赤い扇が減る） */
.bc.ds .ds-timer{display:grid;gap:var(--bc-space-3);justify-items:center;text-align:center}
.bc.ds .ds-stopwatch{display:grid;justify-items:center;gap:var(--bc-space-3);text-align:center}
.bc.ds .ds-stopwatch__display{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:clamp(2.25rem,9vw,5rem);font-weight:700;line-height:1.1;white-space:nowrap}
.bc.ds .ds-stopwatch__display small{font-size:.6em}
.bc.ds .ds-stopwatch__status{margin:0;color:var(--bc-muted)}
.bc.ds .ds-stopwatch__status:empty{display:none}
.bc.ds .ds-stopwatch__main,.bc.ds .ds-stopwatch__sub{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--bc-space-2);width:100%}
.bc.ds .ds-stopwatch__main .bc-btn{flex:1 1 0;min-width:max-content;min-height:3.25rem}
.bc.ds .ds-stopwatch__main .bc-btn--primary{flex:1.5 1 0;font-size:1.25rem}
@media(max-width:699px){.bc.ds .ds-stopwatch__main{flex-wrap:nowrap}.bc.ds .ds-stopwatch__main .bc-btn{min-width:0;padding-inline:var(--bc-space-2)}}  /* SP375 で「リセット」だけ 2 行目に落ちた（10/18）。3 つを 1 行に */
.bc.ds .ds-stopwatch>div[data-role=laps]{width:100%;text-align:left}
.bc.ds .ds-stopwatch .bc-field__choice{display:inline-flex;align-items:center;width:max-content;min-height:var(--bc-target);white-space:nowrap}
.bc.ds .ds-stopwatch .ds-table__unfold[hidden]{display:none}
.bc.ds .ds-stopwatch .tt-best{background:var(--bc-good-bg);color:var(--bc-good-text)}
.bc.ds .ds-stopwatch .tt-worst{background:var(--bc-caution-bg);color:var(--bc-caution-text)}
.bc.ds .ds-stopwatch:fullscreen,.bc.ds .ds-stopwatch.tt-pseudo-fs{align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
.bc.ds .ds-stopwatch.tt-pseudo-fs{position:fixed;inset:0;z-index:2147483000}
.bc.ds .ds-timer__disc{display:block;width:min(60vw,260px);height:auto}
.bc.ds .ds-timer__bg{fill:var(--bc-bg);stroke:var(--bc-border);stroke-width:2}
.bc.ds .ds-timer__fill{fill:var(--bc-sun)}
.bc.ds .ds-timer__tick{stroke:var(--bc-text);stroke-width:1.2}
.bc.ds .ds-timer__tick.is-big{stroke-width:3}
.bc.ds .ds-timer__num{font:600 13px var(--bc-font);fill:var(--bc-text);text-anchor:middle}
.bc.ds .ds-timer__knob{fill:var(--bc-text)}
.bc.ds .ds-timer__scale{margin:0;min-height:1.5em;font-size:var(--ds-text-small);line-height:1.5;color:var(--bc-muted)}
.bc.ds .ds-timer__display{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(3rem,16vw,5rem);line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.bc.ds .ds-timer.is-disc .ds-timer__display{font-size:clamp(2.25rem,10vw,3rem)}
.bc.ds .ds-timer__bar{width:100%;max-width:26rem;height:.375rem;background:var(--bc-border);border-radius:var(--bc-radius-chip);overflow:hidden}
.bc.ds .ds-timer__bar span{display:block;height:100%;width:0;background:var(--bc-brand);transition:width .2s linear}
.bc.ds .ds-timer.is-disc .ds-timer__bar,.bc.ds .ds-timer:not(.is-disc) .ds-timer__disc,.bc.ds .ds-timer:not(.is-disc) .ds-timer__scale{display:none}
.bc.ds .ds-timer__status{margin:0;font-weight:700;color:var(--bc-caution-text)}
.bc.ds .ds-timer__status:empty{display:none}
.bc.ds .ds-timer__presets,.bc.ds .ds-timer__main,.bc.ds .ds-timer__sub{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--bc-space-2);width:100%}
.bc.ds .ds-timer__presets .bc-btn{flex:1 1 0;min-width:0;padding-inline:var(--bc-space-1)}
.bc.ds .ds-timer__presets .bc-btn.is-on{background:var(--bc-current-bg);color:var(--bc-current-text);border-color:var(--bc-brand);border-width:var(--bc-focus)}
.bc.ds .ds-timer__main .bc-btn{flex:1 1 0;min-width:max-content;min-height:3.25rem;padding-inline:var(--bc-space-2);white-space:nowrap}
.bc.ds .ds-timer__main .bc-btn[hidden]{display:none}
.bc.ds .ds-timer__main .bc-btn--primary{flex:1.5 1 0;font-size:1.25rem}
.bc.ds .ds-timer__main .bc-btn--primary.is-pause{background:var(--bc-caution-bg);color:var(--bc-caution-text);border-color:var(--bc-caution-line)}
.bc.ds .ds-timer__main .bc-btn--primary.is-stop{background:var(--bc-sun);color:var(--bc-bg);border-color:var(--bc-sun)}
.bc.ds .ds-timer__view{justify-self:center}
.bc.ds .ds-timer__more{width:100%;margin:var(--bc-space-2) 0 0;font-size:var(--ds-text-h3);font-weight:700;padding-top:var(--bc-space-4);border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-timer__set,.bc.ds .ds-timer__opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bc-space-3);width:100%;text-align:left}
.bc.ds .ds-timer__opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.bc.ds .ds-timer__sub .bc-btn{min-width:0}
.bc.ds .ds-timer.tt-done .ds-timer__display{color:var(--bc-sun);animation:ds-timer-flash 1s steps(2,start) infinite}
@keyframes ds-timer-flash{to{visibility:hidden}}
.bc.ds .ds-timer:fullscreen{align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
.bc.ds .ds-timer:-webkit-full-screen{align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
.bc.ds .ds-timer.tt-pseudo-fs{position:fixed;inset:0;z-index:2147483000;align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
/* 全画面（本物の全画面も、使えない端末の代わりの tt-pseudo-fs も同じ）。画面に出すのは円盤（またはただの数字）・よく使う時間・主ボタンの行だけ。
   「細かく決める」から下と「円盤で表示」の切り替えは隠す（全画面を抜ければ元どおり）。
   円盤の幅 --tt-d は「画面の高さ − ボタンの行など 13rem」を 1.2 で割った値（下に置く数字の行 0.2 の分を空ける）と幅の 7 割の小さいほう。
   数字は円盤の下に置き（円盤の中に重ねると中心の点と針が「:」に重なる）、大きさは --tt-d に比例させる。vw と vh を別々に効かせない */
.bc.ds .ds-timer:fullscreen,.bc.ds .ds-timer.tt-pseudo-fs{--tt-d:max(8rem,min(70vw,calc((100vh - 13rem) / 1.2)))}
.bc.ds .ds-timer:-webkit-full-screen{--tt-d:max(8rem,min(70vw,calc((100vh - 13rem) / 1.2)))}
@supports (height:100dvh){.bc.ds .ds-timer:fullscreen,.bc.ds .ds-timer.tt-pseudo-fs{--tt-d:max(8rem,min(70vw,calc((100dvh - 13rem) / 1.2)))}}
@supports (height:100dvh){.bc.ds .ds-timer:-webkit-full-screen{--tt-d:max(8rem,min(70vw,calc((100dvh - 13rem) / 1.2)))}}
.bc.ds .ds-timer:fullscreen .ds-timer__scale,.bc.ds .ds-timer:fullscreen .ds-timer__view,.bc.ds .ds-timer:fullscreen .ds-timer__more,.bc.ds .ds-timer:fullscreen .ds-timer__more~*,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__scale,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__view,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__more,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__more~*{display:none}
.bc.ds .ds-timer:-webkit-full-screen .ds-timer__scale,.bc.ds .ds-timer:-webkit-full-screen .ds-timer__view,.bc.ds .ds-timer:-webkit-full-screen .ds-timer__more,.bc.ds .ds-timer:-webkit-full-screen .ds-timer__more~*{display:none}
.bc.ds .ds-timer:fullscreen .ds-timer__display,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__display{font-size:max(3rem,min(24vw,40vh,calc(100vh - 14rem)))}
.bc.ds .ds-timer:-webkit-full-screen .ds-timer__display{font-size:max(3rem,min(24vw,40vh,calc(100vh - 14rem)))}
@supports (height:100dvh){.bc.ds .ds-timer:fullscreen .ds-timer__display,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__display{font-size:max(3rem,min(24vw,40dvh,calc(100dvh - 14rem)))}}
@supports (height:100dvh){.bc.ds .ds-timer:-webkit-full-screen .ds-timer__display{font-size:max(3rem,min(24vw,40dvh,calc(100dvh - 14rem)))}}
.bc.ds .ds-timer.is-disc:fullscreen .ds-timer__disc,.bc.ds .ds-timer.is-disc.tt-pseudo-fs .ds-timer__disc{width:var(--tt-d)}
.bc.ds .ds-timer.is-disc:-webkit-full-screen .ds-timer__disc{width:var(--tt-d)}
.bc.ds .ds-timer.is-disc:fullscreen .ds-timer__display,.bc.ds .ds-timer.is-disc.tt-pseudo-fs .ds-timer__display{font-size:calc(var(--tt-d) * .15)}
.bc.ds .ds-timer.is-disc:-webkit-full-screen .ds-timer__display{font-size:calc(var(--tt-d) * .15)}
@media (max-width:600px){.bc.ds .ds-timer{gap:var(--bc-space-2)}.bc.ds .ds-timer__disc{width:min(52vw,220px)}}
/* /tools/alarm・interval-timer・pomodoro（道具が主役 tool-wide）。ds-timer の部品に、区間の名前・ラウンド・時刻入力・4 つの欄・折り返す組み合わせ行だけ足す（10/18） */
.bc.ds .ds-timer__phase{margin:0;font-size:var(--ds-text-h2);font-weight:800;line-height:1.3;min-height:1.3em}
.bc.ds .ds-timer__phase[data-kind=work]{color:var(--bc-good-text)}
.bc.ds .ds-timer__phase[data-kind=rest],.bc.ds .ds-timer__phase[data-kind=short],.bc.ds .ds-timer__phase[data-kind=long]{color:var(--bc-brand)}
.bc.ds .ds-timer__phase[data-kind=prep]{color:var(--bc-caution-text)}
.bc.ds .ds-timer__round,.bc.ds .ds-timer__total,.bc.ds .ds-timer__when{margin:0;min-height:1.5em;color:var(--bc-muted)}
.bc.ds .ds-timer__when{color:var(--bc-text);font-weight:700}
.bc.ds .ds-timer__at{display:flex;justify-content:center;width:100%}
.bc.ds .ds-tool .ds-timer__at input[type=time]{width:auto;font-size:var(--ds-text-h2);font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.bc.ds .ds-timer__set--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bc.ds .ds-timer__presets--wrap .bc-btn{flex:1 1 9rem}
.bc.ds .ds-timer__sub .bc-btn{flex:1 1 0}
.bc.ds .ds-timer:fullscreen .ds-timer__presets--wrap,.bc.ds .ds-timer:fullscreen .ds-timer__set--4,.bc.ds .ds-timer:fullscreen .ds-timer__opts,.bc.ds .ds-timer:fullscreen .ds-timer__at{display:none}
.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__presets--wrap,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__set--4,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__opts,.bc.ds .ds-timer.tt-pseudo-fs .ds-timer__at{display:none}
.bc.ds .ds-timer:-webkit-full-screen .ds-timer__presets--wrap,.bc.ds .ds-timer:-webkit-full-screen .ds-timer__set--4,.bc.ds .ds-timer:-webkit-full-screen .ds-timer__opts,.bc.ds .ds-timer:-webkit-full-screen .ds-timer__at{display:none}
@media(max-width:699px){.bc.ds .ds-timer__set--4{grid-template-columns:repeat(2,minmax(0,1fr))}.bc.ds .ds-timer__presets--wrap .bc-btn{flex:1 1 40%}}
/* /tools/jikan-keisan（時間計算）の小さな道具 3 つ（時刻に足す・引く／足し算／換算）の行と結果。入力は部品の bc-field・bc-btn のまま */
.bc.ds .ds-jk__line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bc-space-2) var(--bc-space-3)}
.bc.ds .ds-tool .ds-jk__line input[type=number]{width:5.5em;text-align:center}
.bc.ds .ds-tool .ds-jk__line input[type=time]{width:auto}
.bc.ds .ds-tool .ds-jk__line select{width:auto;max-width:100%}
.bc.ds .ds-jk__list{display:grid;gap:var(--bc-space-3)}
.bc.ds .ds-jk__out{margin:var(--bc-space-3) 0 0;min-height:1.5em;font-weight:700;font-size:var(--ds-text-h3)}
.bc.ds .ds-jk__rows th[scope=row]{white-space:nowrap}
/* 時候の挨拶の読み方・結びは文なので、見出しのすぐ下から読む（短い値を下にそろえる共通の決まりを、この面だけ外す。⑥ P2・10/11） */
.bc.ds .ds-jk__facts>div>dd{align-self:start}
.bc.ds .ds-jk__ketsugo{display:block;text-align:right}
.bc.ds .ds-jk__ketsugo[hidden]{display:none}
/* /tools/jojun-chujun-gejun（上旬・中旬・下旬）の 3 つの範囲（1 行 3 列）と月の帯。帯は 1 日 1 マスの CSS grid で、旬の名前と境の日を文字で載せる（色だけで区別しない） */
.bc.ds .ds-jun__more{margin:0}
.bc.ds .ds-jun__more .bc-btn{padding-inline:0}
.bc.ds .ds-jun__table caption{padding:0 0 var(--bc-space-1);font-size:var(--ds-text-small)}
.bc.ds .ds-table .ds-jun__table th,.bc.ds .ds-table .ds-jun__table td{padding:var(--bc-space-1) var(--bc-space-2);font-size:var(--ds-text-small);white-space:nowrap}
.bc.ds .ds-jun__fig{margin:0}
.bc.ds .ds-figure .ds-fig-jo{fill:var(--bc-info-bg)}
.bc.ds .ds-figure .ds-fig-chu{fill:var(--bc-good-bg)}
.bc.ds .ds-figure .ds-fig-ge{fill:var(--bc-caution-bg)}
.bc.ds .ds-figure .ds-fig-hanjun{fill:var(--bc-surface);stroke:var(--bc-border)}
.bc.ds .ds-jun__band{display:grid;grid-template-rows:auto .75rem;column-gap:0;row-gap:var(--bc-space-1)}
.bc.ds .ds-jun__band--n28{grid-template-columns:repeat(28,minmax(0,1fr))}
.bc.ds .ds-jun__band--n29{grid-template-columns:repeat(29,minmax(0,1fr))}
.bc.ds .ds-jun__band--n30{grid-template-columns:repeat(30,minmax(0,1fr))}
.bc.ds .ds-jun__band--n31{grid-template-columns:repeat(31,minmax(0,1fr))}
.bc.ds .ds-jun__seg{grid-row:1;padding:0 var(--bc-space-1);font-size:var(--ds-text-small);font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;color:var(--bc-text);border-radius:var(--bc-radius-input) var(--bc-radius-input) 0 0}
.bc.ds .ds-jun__seg.is-jo{grid-column:1/11}
.bc.ds .ds-jun__seg.is-chu{grid-column:11/21}
.bc.ds .ds-jun__seg.is-ge{grid-column:21/-1}
.bc.ds .ds-jun__band>span:not(.ds-jun__seg){grid-row:2;border-left:var(--bc-line) solid var(--bc-bg)}
.bc.ds .ds-jun__band .is-jo{background:var(--bc-info-bg)}
.bc.ds .ds-jun__band .is-chu{background:var(--bc-good-bg)}
.bc.ds .ds-jun__band .is-ge{background:var(--bc-caution-bg)}
.bc.ds .ds-jun__band>span.is-pick{background:var(--bc-brand)}
/* /tools/kinzoku（勤続年数計算）の基準日の早押し（今日・年度末・年末。1 行に収める）。入力は部品の bc-field・bc-btn のまま */
.bc.ds .ds-kz__presets{display:flex;flex-wrap:wrap;gap:var(--bc-space-2);margin:var(--bc-space-4) 0}
/* 結果の 4 枚の箱は高さが揃うので、値を下に寄せると上に空きが出る。見出しのすぐ下から読む（時候の挨拶 ds-jk__facts と同じ。⑥ P2・10/11） */
.bc.ds .ds-kz__facts>div>dd{align-self:start}
.bc.ds .ds-kz__presets .bc-btn{flex:1 1 0;min-width:0;padding-inline:var(--bc-space-1);white-space:nowrap}
@media (max-width:360px){.bc.ds .ds-kz__presets .bc-btn{white-space:normal}}
/* /tools/nissu（日数計算）の早押し（今日→年末・7日後 ほか。折り返す）と結果の 4 枚の箱（値を見出しのすぐ下から読む） */
.bc.ds .ds-ns__presets{display:flex;flex-wrap:wrap;gap:var(--bc-space-2);margin:var(--bc-space-4) 0}
.bc.ds .ds-ns__facts>div>dd{align-self:start}
.bc.ds .ds-ns__presets .bc-btn{flex:1 1 0;min-width:0;padding-inline:var(--bc-space-1)}
.bc.ds .ds-ns__deadlines{margin:0;padding-left:1.2em}
/* カウントダウンの道具（templates/ds_tools_countdown.html・static/js/ds_tools_countdown.js）。色はトークンだけ。数字の枠は JS が描くまで hidden */
.bc.ds .ds-cd{display:grid;gap:var(--bc-space-3);justify-items:center;text-align:center;scroll-margin-top:var(--bc-space-7)}
.bc.ds .ds-cd .ds-tool-result{width:100%;border-top:0;padding-top:0}
.bc.ds .ds-cd .ds-answer__label{margin:0 0 var(--bc-space-1);font-size:var(--ds-text-body);color:var(--bc-text);font-weight:700}
.bc.ds .ds-cd .ds-answer__value{font-size:clamp(2rem,9vw,2.75rem)}
.bc.ds .ds-cd .ds-answer__sub{font-weight:400;max-width:32rem;margin-inline:auto}
.bc.ds .ds-cd [hidden]{display:none}
.bc.ds .ds-cd .is-wait{visibility:hidden}
.bc.ds .ds-cd__total:empty::before{content:'0'}
.bc.ds .ds-cd__num:empty::before{content:'0';visibility:hidden}
.bc.ds .ds-cd__grid{display:flex;justify-content:center;gap:clamp(.5rem,3vw,1.75rem);width:100%}
.bc.ds .ds-cd__cell{min-width:3.2em;text-align:center}
.bc.ds .ds-cd__num{display:block;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(2rem,10vw,3.5rem);line-height:1.1}
.bc.ds .ds-cd__unit{display:block;font-size:var(--ds-text-small);color:var(--bc-muted)}
.bc.ds .ds-cd__total,.bc.ds .ds-cd__at,.bc.ds .ds-cd__skew{margin:0;font-size:var(--ds-text-small);color:var(--bc-muted)}
.bc.ds .ds-cd__total{font-weight:700;color:var(--bc-text)}
.bc.ds .ds-cd__skew:empty,.bc.ds .ds-cd__status:empty{display:none}
.bc.ds .ds-cd__status{margin:0;font-weight:700;color:var(--bc-caution-text)}
.bc.ds .ds-cd__targets,.bc.ds .ds-cd__main,.bc.ds .ds-cd__sub{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--bc-space-2);width:100%}
.bc.ds .ds-cd__targets .bc-btn{flex:1 1 0;min-width:max-content;padding-inline:var(--bc-space-2)}
.bc.ds .ds-cd__targets .bc-btn.is-on{background:var(--bc-current-bg);color:var(--bc-current-text);border-color:var(--bc-brand);border-width:var(--bc-focus)}
.bc.ds .ds-cd__main .bc-btn{flex:1 1 0;min-height:3.25rem;font-size:1.25rem;white-space:nowrap}
.bc.ds .ds-cd__more{width:100%;margin:var(--bc-space-2) 0 0;font-size:var(--ds-text-h3);font-weight:700;padding-top:var(--bc-space-4);border-top:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-cd__set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bc-space-3);width:100%;text-align:left}
.bc.ds .ds-cd__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bc-space-3);width:100%;text-align:left}
.bc.ds .ds-cd__name{grid-column:1/-1}
.bc.ds .ds-cd__fig{margin:var(--bc-space-3) 0}
.bc.ds .ds-cd__fig figcaption{font-weight:700}
.bc.ds progress.ds-cd__bar{display:block;width:100%;max-width:26rem;height:.75rem;margin:0;border:0;border-radius:var(--bc-radius-chip);background:var(--bc-border);color:var(--bc-brand);overflow:hidden;appearance:none;-webkit-appearance:none}
.bc.ds progress.ds-cd__bar::-webkit-progress-bar{background:var(--bc-border)}
.bc.ds progress.ds-cd__bar::-webkit-progress-value{background:var(--bc-brand)}
.bc.ds progress.ds-cd__bar::-moz-progress-bar{background:var(--bc-brand)}
.bc.ds .ds-cd.tt-done .ds-cd__num{color:var(--bc-sun);animation:ds-cd-flash 1s steps(2,start) infinite}
@keyframes ds-cd-flash{to{visibility:hidden}}
.bc.ds .ds-cd:fullscreen{align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
.bc.ds .ds-cd:-webkit-full-screen{align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
.bc.ds .ds-cd.tt-pseudo-fs{position:fixed;inset:0;z-index:2147483000;align-content:center;padding:var(--bc-space-5);background:var(--bc-bg);overflow:auto}
.bc.ds .ds-cd:fullscreen .ds-cd__num,.bc.ds .ds-cd.tt-pseudo-fs .ds-cd__num{font-size:clamp(3rem,15vw,11rem)}
.bc.ds .ds-cd:fullscreen .ds-cd__total,.bc.ds .ds-cd.tt-pseudo-fs .ds-cd__total{font-size:var(--ds-text-answer)}
.bc.ds .ds-cd:fullscreen :is(.ds-cd__targets,.ds-cd__more,.ds-cd__set,.ds-cd__opts,.ds-cd__sub),.bc.ds .ds-cd.tt-pseudo-fs :is(.ds-cd__targets,.ds-cd__more,.ds-cd__set,.ds-cd__opts,.ds-cd__sub){display:none}
@media (max-width:600px){.bc.ds .ds-cd{gap:var(--bc-space-2)}.bc.ds .ds-cd__cell{min-width:2.6em}.bc.ds .ds-cd__targets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.bc.ds .ds-cd__targets .bc-btn{min-width:0;padding-inline:var(--bc-space-1);font-size:.9375rem;white-space:normal;line-height:1.2}.bc.ds .ds-cd__targets .bc-btn[data-action=today]{grid-column:span 2}}

/* /dates/birthday の「ほかの誕生日を調べる」（月・日の select + 見る。GET の form）。主ボタンは 1 つ */
.bc.ds .ds-datepick{margin-top:var(--ds-space-group)}
.bc.ds .ds-datepick fieldset{margin:0;padding:0;border:0;min-width:0}
.bc.ds .ds-datepick__label{float:left;width:100%;padding:0;margin:0 0 var(--ds-space-tight);font-size:14px;color:var(--bc-text-sub,inherit)}
.bc.ds .ds-datepick__row{clear:both;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--ds-space-tight);align-items:stretch;max-width:420px}
.bc.ds .ds-datepick .bc-btn{min-height:var(--bc-target)}
.bc.ds .ds-datepick 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)}

/* /tools/nenkan-kyujitsu の月ごとの表。祝日名は月の下に 1 つずつの塊で置く（途中で割れない・列を増やさない） */
.bc.ds .ds-nk-months__hol{font-weight:400;font-size:var(--bc-font-sm,.875rem)}
.bc.ds .ds-nk-months__hol span{display:block}

/* /tools/hinode の月の表・図・フォーム。今日の行の強調は bc-ui の .is-today、ここは土日の色（SP の列の出し分けはサーバーで行う） */
.bc.ds .ds-hn-table tr.is-sat>*{color:var(--bc-sat)}
.bc.ds .ds-hn-table tr.is-sun>*{color:var(--bc-sun)}
.bc.ds .ds-hn-table tr.is-today>*{color:var(--bc-current-text);font-weight:700}
.bc.ds .ds-hn-form .ds-tool-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.bc.ds .ds-hn-table th[scope=row]{white-space:nowrap}
.bc.ds .ds-hn-nav{display:flex;gap:var(--bc-space-2);margin:var(--bc-space-2) 0}
.bc.ds .ds-hn-form .bc-btn{margin-top:var(--bc-space-2)}
.bc.ds .ds-figure .ds-hn-rise{stroke:var(--bc-sat)}
.bc.ds .ds-figure .ds-hn-rise-dot{fill:var(--bc-sat)}
@media (max-width:30rem){.bc.ds .ds-hn-table th,.bc.ds .ds-hn-table td,.bc.ds #suii .bc-table th,.bc.ds #suii .bc-table td,.bc.ds #prefectures .bc-table th,.bc.ds #prefectures .bc-table td{padding-left:var(--bc-space-2);padding-right:var(--bc-space-2)}}

/* /koyomi/christmas/santa-letter（ds 版）の手紙の道具。旧型の static/css/saiji_letters.css の .sl を、本文の列の中の 1 つの塊に収める（.sl の外側の余白・幅は外す）。
   印刷は saiji_letters.css の規則（手紙の紙だけを残す）に任せ、ds の殻の中でも紙以外を畳む。広告は出さない面。 */
.ds-santa__tool.sl{max-width:none;margin:0;padding:0;font-family:inherit;line-height:inherit}
.ds-santa__tool .sl-toggle{min-height:44px}
.ds-santa__tool .sl-workspace{display:block}
.ds-santa__tool .sl-preview{position:static;margin:0 0 24px}
@media print{
 .content-wrap>main.ds:has(.ds-santa__tool){display:block!important}
 main.ds:has(.ds-santa__tool) .ds-wrap,main.ds:has(.ds-santa__tool) .ds-layout,main.ds:has(.ds-santa__tool) .ds-main{display:block!important;position:static!important;margin:0!important;padding:0!important;max-width:none!important;width:auto!important}
 main.ds:has(.ds-santa__tool) .ds-main>:not(.ds-santa-tool),main.ds:has(.ds-santa__tool) .ds-side,.ds-santa-tool>h2,.ds-santa__tool .sl-privacy,.ds-santa__tool noscript{display:none!important}
 .ds-santa-tool{margin:0!important;padding:0!important}
 .ds-santa__tool .sl-controls{display:block!important}
 .ds-santa__tool .sl-controls>fieldset{display:none!important}
}

/* /koyomi/christmas/events（ds 版）の一覧の表と期間の帯。字の色・線は変数から。棒は色だけで分けず、濃い=開催中・枠だけ=これから・薄い=終わった（会場名の頭も字で添える） */
.bc.ds .ds-ev-table th[scope="row"]{font-weight:700}
.bc.ds .ds-ev-table th[scope="row"] a{font-weight:700}
.bc.ds .ds-ev-sub,.bc.ds .ds-ev-note{display:block;font-weight:400;font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds .ds-ev-note{font-size:var(--bc-text-note)}
.bc.ds .ds-ev-state--ongoing{font-weight:700;color:var(--bc-good-text)}
.bc.ds .ds-ev-state--ended{color:var(--bc-muted)}
@media (max-width:767px){.bc.ds .ds-ev-table th,.bc.ds .ds-ev-table td{padding:var(--ds-space-tight)}}
.bc.ds .ds-figure .ds-ev-grid{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-figure .ds-ev-month{font-size:16px;fill:var(--bc-muted)}
.bc.ds .ds-figure .ds-ev-today{stroke:var(--bc-sun);stroke-width:2}
.bc.ds .ds-figure .ds-ev-todaytext{font-size:16px;font-weight:700;fill:var(--bc-sun)}
.bc.ds .ds-figure .ds-ev-label{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-figure .ds-ev-bar{fill:var(--bc-brand);stroke:var(--bc-brand);stroke-width:1.5}
.bc.ds .ds-figure .ds-ev-row--upcoming .ds-ev-bar{fill:var(--bc-bg)}
.bc.ds .ds-figure .ds-ev-row--ended .ds-ev-bar{fill:var(--bc-border);stroke:var(--bc-border)}
.bc.ds .ds-figure .ds-ev-row--ended .ds-ev-label{fill:var(--bc-muted)}

/* /tools/summer-time（ds 版）の次の件の一覧・表・年の選択。字の色・線は変数から。区切りの行（制度）は太字の帯、あと何日は太字で添える */
.bc.ds .ds-sw-left{font-weight:700;margin-left:var(--bc-space-2);white-space:nowrap}
.bc.ds .ds-sw-list{list-style:none;margin:0;padding:0}
.bc.ds .ds-sw-list{margin-top:var(--bc-space-2)}
.bc.ds .ds-sw-list li{padding:var(--bc-space-1) 0;border-top:var(--bc-line) solid var(--bc-border);font-size:var(--ds-text-small);line-height:var(--ds-leading-small)}
.bc.ds .ds-sw-list li[hidden]{display:none}
.bc.ds .ds-sw-years{margin:0 0 var(--bc-space-3)}
.bc.ds .ds-sw-years[hidden],.bc.ds .ds-sw-table tbody[hidden]{display:none}
.bc.ds .ds-sw-table .ds-sw-sys th{background:var(--bc-surface);font-weight:700;text-align:left}
.bc.ds .ds-sw-cell span{display:block;white-space:nowrap}
.bc.ds .ds-sw-cell span+span{font-size:var(--ds-text-small);line-height:var(--ds-leading-small);color:var(--bc-muted)}
.bc.ds .ds-sw-ics{border:0;padding:0;margin:0}
.bc.ds .ds-sw-ics legend{font-weight:700;padding:0}
/* 初画面の絵が SVG のとき（ds.hero_figure）。季節の色はトークンだけ。画像（img）の規則と同じ見た目の枠 */
.bc.ds .ds-eyecatch--svg svg{display:block;width:100%;height:auto;background:var(--bc-surface);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
/* 10/17 月の格子は 20rem まで（箱根の PC で本文の幅いっぱいに広がった）。図の箱も格子に合わせて縮める */
.bc.ds .ds-cover-dates--grid{display:block;width:100%;max-width:20rem}
.bc.ds .ds-figure__media:has(>.ds-cover-dates--grid){max-width:20rem}
/* 2 か月以上の格子は横に並べ、PC の冒頭では答えの下に置く（右の列に積むと答えの下が空く・10/17 advent） */
.bc.ds .ds-cover-dates--multi{max-width:40rem}
.bc.ds .ds-figure__media:has(>.ds-cover-dates--multi){max-width:40rem}
@media (min-width:601px){.bc.ds .ds-hero:has(.ds-cover-dates--multi){grid-template-columns:minmax(0,1fr)}.bc.ds .ds-hero:has(.ds-cover-dates--multi) .ds-eyecatch{grid-column:1;grid-row:2;max-width:40rem}.bc.ds .ds-hero:has(.ds-cover-dates--multi) .ds-actions{grid-row:3}}
.bc.ds .ds-cover-dates text{font-family:inherit;font-size:13px;fill:var(--bc-text)}
.bc.ds .ds-cover-dates .ds-cover-dates__title{font-weight:700;fill:var(--bc-brand)}
.bc.ds .ds-cover-dates .ds-cover-dates__weekday{fill:var(--bc-muted)}
.bc.ds .ds-cover-dates .ds-cover-dates__mark{fill:var(--bc-brand)}
.bc.ds .ds-cover-dates .ds-cover-dates__marked-day{fill:var(--bc-bg);font-weight:700}
.bc.ds .ds-cover-dates .ds-cover-dates__chip{fill:var(--bc-good-bg);stroke:var(--bc-border)}
.bc.ds .ds-cover-dates .ds-cover-dates__footer{font-size:13px}
.bc.ds .ds-eyecatch--svg .ds-fig-haru{fill:var(--bc-good-bg)}
.bc.ds .ds-eyecatch--svg .ds-fig-natsu{fill:var(--bc-caution-bg)}
.bc.ds .ds-eyecatch--svg .ds-fig-aki{fill:var(--bc-border)}
.bc.ds .ds-eyecatch--svg .ds-fig-fuyu{fill:var(--bc-info-bg)}
.bc.ds .ds-eyecatch--svg .ds-fig-accent{fill:var(--bc-brand)}
.bc.ds .ds-eyecatch--svg .ds-fig-chip{fill:var(--bc-surface)}
.bc.ds .ds-eyecatch--svg .ds-fig-onaccent{fill:var(--bc-bg)}
/* カレンダー印刷: 日付と六曜を主役にし、PDFを表の直後に置く。 */
.bc.ds .ds-cm__tabs{margin-top:var(--ds-space-item)}
.bc.ds .ds-cm__tabs ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--bc-space-2);list-style:none;margin:0;padding:0}
.bc.ds .ds-cm__tabs li{min-width:0}
.bc.ds .ds-cm__tabs a,.bc.ds .ds-cm__tabs span{display:flex;align-items:center;justify-content:center;min-height:var(--bc-target);padding:var(--bc-space-2);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-input);text-align:center;text-decoration:none;font-weight:700;line-height:1.3}
.bc.ds .ds-cm__tabs span{color:var(--bc-bg);background:var(--bc-brand);border-color:var(--bc-brand)}
.bc.ds .ds-cm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);column-gap:var(--bc-space-4);align-items:start;margin-top:var(--ds-space-item)}
.bc.ds .ds-cm__next-year{grid-column:1/-1;justify-self:start;margin-bottom:var(--bc-space-2)}
.bc.ds .ds-cm__calendar{min-width:0;grid-column:1}
.bc.ds .ds-cm__heading{margin:0 0 var(--bc-space-2);font-size:var(--ds-text-h2);font-weight:700}
.bc.ds .ds-cm__grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);overflow:hidden;background:var(--bc-bg)}
.bc.ds .ds-cm__grid caption.ds-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bc.ds .ds-cm__grid th{padding:var(--bc-space-1);background:var(--bc-surface);text-align:center;font-size:var(--ds-text-small);line-height:1.2}
.bc.ds .ds-cm__grid td{height:5rem;padding:var(--bc-space-1) var(--bc-space-2);border-top:var(--bc-line) solid var(--bc-border);border-right:var(--bc-line) solid var(--bc-border);vertical-align:top;overflow:hidden;line-height:1.25}
.bc.ds .ds-cm__grid td:last-child{border-right:0}
.bc.ds .ds-cm__grid td.is-today{box-shadow:inset var(--bc-space-1) 0 var(--bc-brand)}
.bc.ds .ds-cm__grid td.is-holiday .ds-cm__day,.bc.ds .ds-cm__grid td.is-sun .ds-cm__day{color:var(--bc-sun)}
.bc.ds .ds-cm__grid td.is-sat:not(.is-holiday) .ds-cm__day{color:var(--bc-sat)}
.bc.ds .ds-cm__day{display:block;font-size:var(--ds-text-h3);font-weight:700}
.bc.ds .ds-cm__holiday,.bc.ds .ds-cm__detail{display:block;font-size:var(--ds-text-note);overflow-wrap:anywhere}
.bc.ds .ds-cm__holiday{color:var(--bc-sun)}
.bc.ds .ds-cm__detail.is-good{color:var(--bc-brand);font-weight:700}
.bc.ds .ds-cm__outside{grid-column:1}
.bc.ds .ds-cm__downloads{grid-column:1;display:flex;flex-wrap:wrap;gap:var(--bc-space-2);margin-top:var(--bc-space-3)}
.bc.ds .ds-cm__pdf{min-height:var(--bc-target);font-size:var(--ds-text-body);font-weight:700}
.bc.ds .ds-cm__select{grid-column:1;margin-top:var(--ds-space-group);padding:var(--bc-space-4);background:var(--bc-surface);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card)}
.bc.ds .ds-cm__basic,.bc.ds .ds-cm__more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bc-space-3)}
.bc.ds .ds-cm__select .bc-field{min-width:0}
.bc.ds .ds-cm__select label{display:block;font-weight:700;font-size:var(--ds-text-small)}
.bc.ds .ds-cm__select select{width:100%;min-height:var(--bc-target);padding:var(--bc-space-2);background:var(--bc-bg);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-input)}
.bc.ds .ds-cm__select .ds-more{margin-top:var(--bc-space-3)}
.bc.ds .ds-cm__more{padding-top:var(--bc-space-3)}
.bc.ds .ds-cm__paper{grid-column:2;grid-row:1/span 3;margin:0;padding:var(--bc-space-2);border:var(--bc-line) solid var(--bc-border);border-radius:var(--bc-radius-card);background:var(--bc-surface)}
.bc.ds .ds-cm__next-year~.ds-cm__paper{grid-row:2/span 3}
.bc.ds .ds-cm__paper img{display:block;width:100%;height:auto;background:var(--bc-bg)}
.bc.ds .ds-cm__paper figcaption{margin-top:var(--bc-space-1);text-align:center;font-size:var(--ds-text-small)}
.bc.ds .ds-cm__links{grid-column:1/-1;margin-top:var(--bc-space-3);font-size:var(--ds-text-small)}
.bc.ds .ds-cm__business{max-width:var(--ds-col-main);padding:var(--bc-space-4);border:var(--bc-line) solid var(--bc-caution-line);border-radius:var(--bc-radius-card);background:var(--bc-caution-bg)}
.bc.ds .ds-cm__business a{display:block;text-decoration:none;color:var(--bc-caution-text);font-weight:700}
.bc.ds .ds-cm__business small{display:block;font-weight:400}
@media(max-width:600px){
 .bc.ds .ds-cm__tabs ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bc-space-1)}
 .bc.ds .ds-cm__tabs a,.bc.ds .ds-cm__tabs span{font-size:var(--ds-text-note);padding:var(--bc-space-1)}
 .bc.ds .ds-cm{display:block}
 .bc.ds .ds-cm__heading{font-size:var(--ds-text-h3)}
 .bc.ds .ds-cm__grid td{height:3.4rem;padding:var(--bc-space-1);text-align:center}
 .bc.ds .ds-cm__day{font-size:var(--ds-text-body)}
 .bc.ds .ds-cm__holiday,.bc.ds .ds-cm__detail{font-size:.68rem;line-height:1.1}
 .bc.ds .ds-cm__downloads{margin-top:var(--bc-space-2)}
 .bc.ds .ds-cm__pdf{width:100%;justify-content:center;text-align:center}
 .bc.ds .ds-cm__png{width:100%;justify-content:center}
 .bc.ds .ds-cm__basic,.bc.ds .ds-cm__more{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bc.ds .ds-cm__paper{margin-top:var(--ds-space-group)}
}
.bc.ds p.ds-lead.ds-answer{padding:0;border:0;background:transparent;font-size:var(--ds-text-body);font-weight:400;line-height:var(--ds-leading-body)}
.bc.ds .ds-cm.ds-tool{max-width:none;padding:0;border:0;background:transparent;border-radius:0}
.bc.ds .ds-cm__calendar.ds-monthgrid{margin:0}
.bc.ds .ds-cm__grid.ds-monthgrid__month{width:100%;margin:0}
.bc.ds .ds-cm__select{margin-top:var(--bc-space-2)}
.bc.ds .ds-cm__paper.ds-figure{margin:0}
.bc.ds .ds-cm__links{margin-top:var(--bc-space-2)}
@media(max-width:600px){.bc.ds .ds-cm__paper.ds-figure{margin-top:var(--bc-space-2)}}
.bc.ds .ds-cm__cycle{max-width:var(--ds-col-main)}
.bc.ds .ds-cm__cycle svg{display:block;width:100%;height:auto}
.bc.ds .ds-cm__cycle .ds-fig-muted-line{stroke-width:2}
.bc.ds .ds-cm__cycle-label{fill:var(--bc-brand);font-size:1rem;font-weight:700;text-anchor:middle}
@media(max-width:600px){
 .bc.ds .ds-cm__tabs a,.bc.ds .ds-cm__tabs span{min-height:2rem}
 .bc.ds .ds-cm__grid td{height:2.4rem;padding:0 var(--bc-space-1)}
 .bc.ds .ds-cm__grid th{padding:0}
 .bc.ds .ds-cm__heading{margin-bottom:0}
 .bc.ds .ds-cm__downloads{margin-top:var(--bc-space-1)}
 .bc.ds .ds-cm__pdf{min-height:var(--bc-target)}
}
.bc.ds .ds-cm__grid b{display:block;font-size:var(--ds-text-h3);font-weight:700}
.bc.ds .ds-cm__grid td:has(>.ds-cm__flags.is-sun) b,.bc.ds .ds-cm__grid td:has(>.ds-cm__flags.is-holiday) b{color:var(--bc-sun)}
.bc.ds .ds-cm__grid td:has(>.ds-cm__flags.is-sat):not(:has(>.ds-cm__flags.is-holiday)) b{color:var(--bc-sat)}
.bc.ds .ds-cm__grid td:has(>.ds-cm__flags.is-today){box-shadow:inset var(--bc-space-1) 0 var(--bc-brand)}
@media(max-width:600px){.bc.ds .ds-cm__grid b{font-size:var(--ds-text-body)}}
.bc.ds .ds-main>h1+.ds-lead{margin-top:var(--bc-space-2)}
.bc.ds .ds-main>.ds-lead+.ds-cm__tabs{margin-top:var(--bc-space-2)}
.bc.ds .ds-main>.ds-cm__tabs+.ds-cm{margin-top:var(--bc-space-2)}
.bc.ds .ds-cm__calendar figcaption.ds-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bc.ds .ds-main>.ds-cm__tabs+.ds-cm{margin-top:var(--ds-space-item)}
@media(max-width:600px){
 .bc.ds .ds-main:has(>.ds-cm)>h1{margin-bottom:0}
 .bc.ds .ds-main>.ds-lead:has(+.ds-cm__tabs){margin-bottom:var(--bc-space-2)}
 .bc.ds .ds-cm__tabs a,.bc.ds .ds-cm__tabs span{min-height:1.875rem}
}
@media(max-width:600px){.bc.ds .ds-main>.ds-lead:has(+.ds-cm__tabs){line-height:1.6}}
/* General dated milestones and two-unit axis; existing modes keep their styles. */
.bc.ds .ds-band-marks--line .ds-figure__media{max-width:100%;border:0;background:transparent}
.bc.ds .ds-band-marks--line svg{width:100%;height:auto}
.bc.ds .ds-scale-pair--axis .ds-scale-pair__axis-svg{width:100%;height:auto}
.bc.ds .ds-scale-pair--axis .ds-scale-pair__axis-svg--sp{display:none}
.bc.ds .ds-scale-pair__axis-zone.is-good{fill:var(--bc-good-bg)}
.bc.ds .ds-scale-pair__axis-zone.is-current{fill:var(--bc-current-bg)}
.bc.ds .ds-scale-pair__axis-zone.is-caution{fill:var(--bc-caution-bg)}
.bc.ds .ds-scale-pair__axis-line,.bc.ds .ds-scale-pair__axis-boundary{stroke:var(--bc-text);stroke-width:2}
.bc.ds .ds-scale-pair__axis-mine,.bc.ds .ds-scale-pair__axis-arrow{stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-scale-pair__axis-link{stroke:var(--bc-brand-strong);stroke-width:2;fill:none}
.bc.ds .ds-scale-pair__axis-dot{fill:var(--bc-brand-strong)}
.bc.ds .ds-scale-pair__axis-zone-name,.bc.ds .ds-scale-pair__axis-tick,.bc.ds .ds-scale-pair__axis-value,.bc.ds .ds-scale-pair__axis-arrow-label{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-scale-pair__axis-value,.bc.ds .ds-scale-pair__axis-arrow-label{font-weight:700;fill:var(--bc-brand-strong)}
/* 区切りの名の札（boundary_labels）と図の中の「あと N」の太字の札（next_badge）。どちらも消費者が渡したときだけ出る */
.bc.ds .ds-scale-pair__axis-boundary-name{font-size:16px;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-scale-pair__axis-boundary-name-bg{fill:#fff;stroke:var(--bc-text);stroke-width:1.5;rx:6px;ry:6px}
.bc.ds .ds-scale-pair__axis-boundary-leader{stroke:var(--bc-muted);stroke-width:1.5;stroke-dasharray:3 3}
.bc.ds .ds-scale-pair__axis-badge{fill:var(--bc-brand-strong);rx:14px;ry:14px}
.bc.ds .ds-scale-pair__axis-badge-text{fill:#fff}
@media(max-width:699px){.bc.ds .ds-scale-pair--axis .ds-scale-pair__axis-svg--pc{display:none}.bc.ds .ds-scale-pair--axis .ds-scale-pair__axis-svg--sp{display:block}}
.bc.ds .ds-band-marks--line .ds-tl-axis{stroke:var(--bc-border);stroke-width:4}
.bc.ds .ds-band-marks--line .ds-tl-axis-span.is-main{stroke:var(--bc-brand-strong);stroke-width:6}
.bc.ds .ds-band-marks--line .ds-tl-axis-span.is-muted{stroke:var(--bc-border);stroke-width:2;opacity:.55}
.bc.ds .ds-band-marks--line .ds-tl-brace{stroke:var(--bc-muted);stroke-width:1.5}
.bc.ds .ds-band-marks--line .ds-tl-brace-label{font-size:16px;fill:var(--bc-muted)}
.bc.ds .ds-band-marks--line .ds-tl-span-leader{stroke:var(--bc-muted);stroke-width:1}
.bc.ds .ds-band-marks--line .ds-tl-stem{stroke:var(--bc-muted);stroke-width:1}
.bc.ds .ds-band-marks--line .ds-tl-credit-dot{fill:var(--bc-bg);stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-band-marks--line .ds-tl-credit-dot.is-answer{fill:var(--bc-brand-strong);stroke-width:4}
.bc.ds .ds-band-marks--line .ds-tl-credit-dot.is-original{stroke:var(--bc-muted);stroke-width:2}
.bc.ds .ds-band-marks--line .ds-tl-credit-name{font-size:16px;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-band-marks--line .ds-tl-credit-name.is-answer{font-size:18px;fill:var(--bc-brand-strong)}
.bc.ds .ds-band-marks--line .ds-tl-credit-date{font-size:16px;fill:var(--bc-text)}
.bc.ds .ds-band-marks--line .ds-tl-credit-days{font-size:16px;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-band-marks--line .ds-tl-credit-days.is-main{fill:var(--bc-brand-strong);font-weight:700}
.bc.ds .ds-band-marks--line .ds-tl-credit-days.is-muted{fill:var(--bc-muted);font-weight:400}
.bc.ds .ds-band-marks--line .ds-tl-credit-days.is-secondary{fill:var(--bc-muted);font-weight:400}
.bc.ds .ds-band-marks--line .ds-tl-credit-shift{font-size:16px;fill:var(--bc-muted)}
.bc.ds .ds-band-marks--line .ds-tl-credit-original{font-size:16px;fill:var(--bc-muted)}
.bc.ds .ds-band-marks--line .ds-tl-credit-arrow{stroke:var(--bc-brand-strong);stroke-width:2;fill:none}
.bc.ds .ds-band-marks--line .ds-tl-credit-arrowhead{fill:var(--bc-brand-strong);stroke:none}

/* 住民税の払い方で替わる納付書・給与明細・年金通知 */
.bc.ds .ds-jz{margin:var(--ds-space-group) 0;width:100%}
.bc.ds .ds-jz__heading{font-weight:700;margin:0 0 var(--bc-space-2)}
.bc.ds .ds-jz__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bc-space-2);align-items:start}
.bc.ds .ds-jz[data-kind="kyuyo"] .ds-jz__cards,.bc.ds .ds-jz[data-kind="nenkin"] .ds-jz__cards{grid-template-columns:repeat(6,minmax(0,1fr))}
.bc.ds .ds-jz[data-kind="nenkin1"] .ds-jz__cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.bc.ds .ds-jz__card{width:100%;height:auto;overflow:visible;display:block;color:var(--bc-text)}
.bc.ds .ds-jz__paper{fill:var(--bc-bg);stroke:var(--bc-border);stroke-width:2}
.bc.ds .ds-jz__card.is-next .ds-jz__paper{stroke:var(--bc-brand);stroke-width:3}
.bc.ds .ds-jz__card.is-past{opacity:.72}
.bc.ds .ds-jz__type,.bc.ds .ds-jz__label{font-size:16px;fill:var(--bc-muted)}
.bc.ds .ds-jz__title{font-size:20px;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-jz__value,.bc.ds .ds-jz__amount{font-size:18px;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-jz[data-kind="futsu"] .ds-jz__value{font-size:16px}
.bc.ds .ds-jz__amount{font-variant-numeric:tabular-nums}
.bc.ds .ds-jz__tear{stroke:var(--bc-border);stroke-width:1.5;stroke-dasharray:4 3}
.bc.ds .ds-jz__card.is-next .ds-jz__type,.bc.ds .ds-jz__card.is-next .ds-jz__title{fill:var(--bc-brand-strong)}
.bc.ds .ds-jz figcaption{margin-top:var(--bc-space-2)}
.bc.ds .ds-jz__spoken{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:699px){.bc.ds .ds-jz__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.bc.ds .ds-jz[data-kind="kyuyo"] .ds-jz__cards,.bc.ds .ds-jz[data-kind="nenkin"] .ds-jz__cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){.bc.ds .ds-jz[data-kind="nenkin1"] .ds-jz__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bc.ds .ds-jz__overview{display:grid;margin-top:var(--bc-space-2);border-top:var(--bc-line) solid var(--bc-border)}
/* 払い方 3 つ × 6 月〜翌年 5 月の格子（10/18 ユーザー「●の意味がよくわからない」）。升は字の札、今日の月の列は淡く塗る */
.bc.ds .ds-jz__grow{display:grid;grid-template-columns:13.5rem repeat(12,minmax(0,1fr));align-items:stretch;border-bottom:var(--bc-line) solid var(--bc-border)}
.bc.ds .ds-jz__glabel{align-self:center;padding:var(--bc-space-2);font-size:var(--ds-text-small);white-space:nowrap}
.bc.ds .ds-jz__gcell{display:grid;place-items:center;min-width:0;min-height:2.75rem;padding:var(--bc-space-1) 0;font-size:var(--ds-text-small)}
.bc.ds .ds-jz__ghead .ds-jz__gcell{min-height:0;font-weight:700;color:var(--bc-muted)}
.bc.ds .ds-jz__gcell.is-today{background:var(--bc-surface)}.bc.ds .ds-jz__grow[data-way] .ds-jz__gcell.is-today:not(:empty){box-shadow:inset 0 0 0 1px var(--bc-brand);border-radius:var(--bc-radius-input)}  /* 10/18 親: 選んでいる行（地が同じ色）でも今月の組が見えるよう 1px の枠 */.bc.ds .ds-jz__ghead .ds-jz__gcell.is-today{color:var(--bc-brand-strong)}
.bc.ds .ds-jz__gcell b{display:grid;place-items:center;width:1.75rem;height:1.75rem;border:var(--bc-line) solid var(--bc-brand);border-radius:var(--bc-radius-input);background:var(--bc-bg);font-size:var(--ds-text-small);line-height:1;color:var(--bc-brand-strong)}
.bc.ds .ds-jz[data-kind="futsu"] .ds-jz__overview [data-way="futsu"],.bc.ds .ds-jz[data-kind="kyuyo"] .ds-jz__overview [data-way="kyuyo"],.bc.ds .ds-jz[data-kind="nenkin1"] .ds-jz__overview [data-way="nenkin1"],.bc.ds .ds-jz[data-kind="nenkin"] .ds-jz__overview [data-way="nenkin1"]{background:var(--bc-surface);box-shadow:inset 4px 0 0 var(--bc-brand)}
.bc.ds .ds-jz__year{display:flex;justify-content:space-between;gap:var(--bc-space-2);margin:var(--bc-space-3) 0 0;font-size:var(--ds-text-small)}
.bc.ds .ds-jz__today{font-weight:700;color:var(--bc-brand-strong)}
.bc.ds .ds-jz__selected{font-weight:700;margin:var(--bc-space-2) 0}
.bc.ds .ds-jz__stub{font-size:13px;fill:var(--bc-muted)}
.bc.ds .ds-jz__rule{stroke:var(--bc-border);stroke-width:1.5}
.bc.ds .ds-jz__paid{font-size:25px;font-weight:700;fill:var(--bc-brand);opacity:.85}
.bc.ds .ds-jz__next{font-size:17px;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-jz__card.is-next{position:relative;z-index:1;transform:translateY(-.35rem)}
.bc.ds .ds-jz__gmon,.bc.ds .ds-jz__gall{display:none}
@media(max-width:767px){.bc.ds .ds-jz__grow.ds-jz__ghead{display:none}.bc.ds .ds-jz__grow{display:flex;flex-wrap:wrap;gap:var(--bc-space-1) var(--bc-space-2);padding:0 var(--bc-space-1) var(--bc-space-2)}.bc.ds .ds-jz__glabel{flex:0 0 100%;padding:var(--bc-space-2) 0 0;font-weight:700}.bc.ds .ds-jz__gcell{display:inline-flex;align-items:center;gap:var(--bc-space-1);min-height:0;padding:var(--bc-space-1) var(--bc-space-2);border-radius:var(--bc-radius-input)}.bc.ds .ds-jz__gcell:empty,.bc.ds .ds-jz__grow.is-all .ds-jz__gcell{display:none}.bc.ds .ds-jz__gmon{display:inline}.bc.ds .ds-jz__grow.is-all .ds-jz__gall{display:inline-flex;align-items:center;gap:var(--bc-space-1);padding:var(--bc-space-1) 0;font-size:var(--ds-text-small)}.bc.ds .ds-jz__gall b{display:grid;place-items:center;width:1.75rem;height:1.75rem;border:var(--bc-line) solid var(--bc-brand);border-radius:var(--bc-radius-input);background:var(--bc-bg);line-height:1;color:var(--bc-brand-strong)}.bc.ds .ds-jz__year{display:block}.bc.ds .ds-jz__today{display:block}}  /* SP は払い方ごとに「6月 納」と月と札を組にして並べる（10/18 親: 2 段の格子は月を目で数えないと読めない） */
.bc.ds:has(#jz-figure) #ans-rows>div>dd{align-self:start;overflow-wrap:normal}
.bc.ds:has(#jz-figure) #ans-rows>.ds-jz__fact-note{grid-column:1/-1;display:block;padding:0;border:0;background:transparent}
.bc.ds:has(#jz-figure) #ans-rows>.ds-jz__fact-note dt,.bc.ds:has(#jz-figure) #ans-rows>.ds-jz__fact-note dd{display:inline;font-size:var(--ds-text-body);font-weight:400}
.bc.ds:has(#jz-figure) #ans-rows>.ds-jz__fact-note dt::after{content:"："}
@media(min-width:601px){.bc.ds #futsu .ds-table .bc-table th:last-child{min-width:12em;white-space:nowrap}.bc.ds #futsu .ds-table .bc-table td:nth-child(2){min-width:13em;white-space:nowrap}}
.bc.ds:has(#jz-figure) #ans-sub{max-width:100%;width:auto}
/* 等分の輪。線と文字の意味は縁の太さでも伝える。 */
.bc.ds .ds-cycle-ring .ds-figure__media{max-width:100%;border:0;background:transparent}
.bc.ds .ds-cycle-ring__svg{display:block;max-width:100%;height:auto;margin-inline:auto;overflow:visible}
.bc.ds .ds-cycle-ring__rim{fill:none;stroke:var(--bc-border);stroke-width:2}
.bc.ds .ds-cycle-ring__tick{stroke:var(--bc-border);stroke-width:1.5}
.bc.ds .ds-cycle-ring__chord{stroke:var(--bc-brand-strong);stroke-width:2}
.bc.ds .ds-cycle-ring__chord-label,.bc.ds .ds-cycle-ring__label.is-chord{font-size:.9375rem;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-cycle-ring__node{fill:var(--bc-surface);stroke:var(--bc-border);stroke-width:1.5}
.bc.ds .ds-cycle-ring__node.is-main{fill:var(--bc-current-bg);stroke:var(--bc-brand-strong)}
.bc.ds .ds-cycle-ring__node.is-sub{stroke:var(--bc-brand)}
.bc.ds .ds-cycle-ring__name{font-size:1rem;fill:var(--bc-text)}
.bc.ds .ds-cycle-ring__node.is-main+.ds-cycle-ring__name{font-weight:700}
.bc.ds .ds-cycle-ring__ring{fill:none;stroke:var(--bc-brand)}
.bc.ds .ds-cycle-ring__ring.is-main{stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-cycle-ring__ring.is-sub{stroke-width:1.5}
.bc.ds circle.ds-cycle-ring__ring.is-main{fill:var(--bc-current-bg)}
.bc.ds .ds-cycle-ring__dot{fill:var(--bc-brand-strong);stroke:var(--bc-bg);stroke-width:1.5}
.bc.ds .ds-cycle-ring__sector{stroke:none}
.bc.ds .ds-cycle-ring__sector.is-even{fill:var(--bc-surface)}
.bc.ds .ds-cycle-ring__sector.is-odd{fill:var(--bc-current-bg)}
.bc.ds .ds-cycle-ring__sector.is-main{stroke:var(--bc-brand-strong);stroke-width:3}
.bc.ds .ds-cycle-ring__sector.is-sub{stroke:var(--bc-brand);stroke-width:1.5}
.bc.ds .ds-cycle-ring__sep{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-cycle-ring__orbit{fill:none;stroke:var(--bc-brand);stroke-width:1}
.bc.ds .ds-cycle-ring__tick.is-spoke{stroke:var(--bc-muted);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round}
.bc.ds .ds-cycle-ring__name.is-band{font-size:.9375rem}
.bc.ds .ds-cycle-ring__name.is-main{font-weight:700}
.bc.ds .ds-cycle-ring__sep.is-ext{stroke:var(--bc-border);stroke-width:1}
.bc.ds .ds-cycle-ring__wedge{stroke:none;fill-opacity:.5}
.bc.ds .ds-cycle-ring__wedge.is-even{fill:var(--bc-surface)}
.bc.ds .ds-cycle-ring__wedge.is-odd{fill:var(--bc-current-bg)}
.bc.ds .ds-cycle-ring__leader{stroke:var(--bc-text);stroke-width:1}
.bc.ds .ds-cycle-ring__label,.bc.ds .ds-cycle-ring__rail,.bc.ds .ds-cycle-ring__group{font-size:.9375rem;fill:var(--bc-text)}
.bc.ds .ds-cycle-ring__label.is-main,.bc.ds .ds-cycle-ring__label.is-num{font-weight:700}
.bc.ds .ds-cycle-ring__svg.is-lg .ds-cycle-ring__name.is-band,.bc.ds .ds-cycle-ring__svg.is-lg .ds-cycle-ring__label,.bc.ds .ds-cycle-ring__svg.is-lg .ds-cycle-ring__rail,.bc.ds .ds-cycle-ring__svg.is-lg .ds-cycle-ring__group,.bc.ds .ds-cycle-ring__svg.is-lg .ds-cycle-ring__chord-label{font-size:1rem}
.bc.ds .ds-cycle-ring__house{font-size:.75rem;font-weight:700;fill:var(--bc-text)}
.bc.ds .ds-cycle-ring__svg.is-lg .ds-cycle-ring__house{font-size:.875rem}
.bc.ds .ds-cycle-ring__svg.is-sp-300 .ds-cycle-ring__house{font-size:13px}
.bc.ds .ds-cycle-ring__svg.is-sp-375 .ds-cycle-ring__house{font-size:16px}
.bc.ds .ds-cycle-ring__asc{fill:var(--bc-brand-strong)}
.bc.ds .ds-cycle-ring__asc-label{font-size:.75rem;font-weight:700;fill:var(--bc-brand-strong)}
.bc.ds .ds-cycle-ring__svg.has-aspects .ds-cycle-ring__house,.bc.ds .ds-cycle-ring__svg.has-aspects .ds-cycle-ring__label{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.bc.ds .ds-cycle-ring__aspect{stroke:var(--bc-brand-strong);stroke-width:1.75;stroke-opacity:.5}
.bc.ds .ds-cycle-ring__aspect.is-square,.bc.ds .ds-cycle-ring__aspect.is-opposition{stroke-dasharray:4 4;stroke-opacity:.8}
/* 旧型の面に差し込む入れ物（explain_block だけが付ける .ds-embed--legacy）。幅は旧型の列いっぱい・節の間と見出しはその面の旧型に揃える。
   手紙の面・ds 版の面の .ds-embed には効かない（.ds-embed の値は上で変えない）。見出しの値は _koyomi_tool_css.html の .kt-section h2（--kt）・bc-ui.css の .bc h2（--stack）と同じ */
.bc.ds.ds-embed--legacy{max-width:none}
.bc.ds.ds-embed--legacy .ds-section{margin-top:0}
.bc.ds.ds-embed--kt{margin:0 0 22px}
.bc.ds.ds-embed--kt .ds-section+.ds-section{margin-top:22px}
.bc.ds.ds-embed--kt h2{font-size:1.15rem;line-height:inherit;letter-spacing:normal;color:#333;margin:0 0 6px;padding:6px 10px;border-left:4px solid #176B87;background:#f7fbfc}
.bc.ds.ds-embed--stack{margin:0}
.bc.ds.ds-embed--stack .ds-section+.ds-section{margin-top:var(--bc-section-gap,var(--bc-space-4))}  /* 10/17 O-29: 旧型の main が持つ節の段（64/48px） */
.bc.ds.ds-embed--stack h2{font-size:var(--bc-text-h2);line-height:var(--bc-leading-heading);letter-spacing:.025rem}
.bc.ds.ds-embed--legacy .ds-more>summary{font-size:var(--ds-text-body)}

/* 時間の道具の板（tool-wide の道具。10/20 ユーザー「本番の今の見た目のほうが良い」）。旧型 .tt-panel（templates/_time_tool_css.html）の濃い板・白い大きな等幅の数字・緑のスタート・縁取りのボタンを、型の側で 1 回だけ写す。
   _ds.html の tool_shell(label, board=true) が .ds-tool--board を付ける。板の中は色の変数を差し替え、既存の部品（bc-btn・bc-field・bc-table）がそのまま濃い板の色になる */
.bc.ds{--ds-board-bg:#0f2f3a;--ds-board-ink:#fff;--ds-board-sub:#dfeff4;--ds-board-line:rgba(255,255,255,.6);--ds-board-soft:rgba(255,255,255,.06);--ds-board-start:#00796b;--ds-board-pause:#f9a825;--ds-board-stop:#c62828;--ds-board-note:#ffe082;--ds-board-accent:#7fd3e8;--ds-board-best:#a5d6a7;--ds-board-worst:#ef9a9a;--ds-board-mono:"SF Mono","Roboto Mono",Menlo,Consolas,monospace}
.bc.ds .ds-tool--board{--bc-bg:var(--ds-board-bg);--bc-surface:rgba(255,255,255,.07);--bc-border:rgba(255,255,255,.2);--bc-text:var(--ds-board-ink);--bc-muted:var(--ds-board-sub);--bc-faint:rgba(255,255,255,.55);--bc-brand:var(--ds-board-accent);--bc-brand-strong:var(--ds-board-accent);--bc-caution-text:var(--ds-board-note);--bc-good-text:var(--ds-board-best);--bc-current-bg:var(--ds-board-accent);--bc-current-text:var(--ds-board-bg);--bc-info-bg:rgba(255,255,255,.16);--bc-source-text:var(--ds-board-sub);
  padding:20px 16px 16px;border:0;border-radius:16px;background:var(--ds-board-bg);color:var(--ds-board-ink);box-shadow:0 6px 18px rgba(15,47,58,.22);text-align:center}
.bc.ds .ds-tool--board :where(p,li,span,label,legend,summary,caption,th,td){color:inherit}
.bc.ds .ds-tool--board .bc-field__help,.bc.ds .ds-tool--board .ds-timer__when{color:var(--ds-board-sub)}
.bc.ds .ds-tool--board .bc-btn{min-height:44px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:var(--ds-board-soft);color:var(--ds-board-ink);font-weight:600}
.bc.ds .ds-tool--board .bc-btn:hover,.bc.ds .ds-tool--board .bc-btn:active{background:rgba(255,255,255,.16);color:var(--ds-board-ink);text-decoration:none}
.bc.ds .ds-tool--board .bc-btn:disabled{opacity:.45;cursor:default}
.bc.ds .ds-tool--board .bc-btn--primary,.bc.ds .ds-tool--board .bc-btn--primary:hover{border-color:var(--ds-board-start);background:var(--ds-board-start);color:var(--ds-board-ink)}
.bc.ds .ds-tool--board :focus-visible{outline:3px solid #ffd54f;outline-offset:2px}
.bc.ds .ds-tool--board .bc-btn.is-on{border-color:var(--ds-board-accent);background:var(--ds-board-accent);color:var(--ds-board-bg);font-weight:700}
.bc.ds .ds-tool--board .ds-stopwatch__display,.bc.ds .ds-tool--board .ds-timer__display{margin:4px 0 10px;font-family:var(--ds-board-mono);font-size:clamp(3.4rem,17vw,7.5rem);line-height:1.05;letter-spacing:.02em;color:var(--ds-board-ink)}
.bc.ds .ds-tool--board .ds-stopwatch__display small,.bc.ds .ds-tool--board .ds-timer__display small{font-size:.45em;opacity:.8}
.bc.ds .ds-tool--board .ds-stopwatch__status,.bc.ds .ds-tool--board .ds-timer__status,.bc.ds .ds-tool--board .ds-timer__phase{margin:0;font-size:1rem;font-weight:700;color:var(--ds-board-note)}
.bc.ds .ds-tool--board .ds-timer__bar{height:6px;max-width:520px;margin:0 auto 10px;background:rgba(255,255,255,.18)}
.bc.ds .ds-tool--board .ds-timer__bar span{background:var(--ds-board-accent)}
.bc.ds .ds-tool--board .ds-stopwatch__main,.bc.ds .ds-tool--board .ds-timer__main{gap:14px;margin:4px 0 14px}
.bc.ds .ds-tool--board .ds-stopwatch__main .bc-btn,.bc.ds .ds-tool--board .ds-timer__main .bc-btn{flex:0 1 13rem;min-width:0;min-height:64px;padding:12px 28px;border:2px solid var(--ds-board-line);border-radius:14px;background:transparent;font-size:1.35rem;font-weight:700;letter-spacing:.04em}
.bc.ds .ds-tool--board .ds-stopwatch__main .bc-btn--primary,.bc.ds .ds-tool--board .ds-timer__main .bc-btn--primary{flex:0 1 13rem;border-color:var(--ds-board-start);background:var(--ds-board-start);font-size:1.35rem}
.bc.ds .ds-tool--board .ds-timer__main .bc-btn--primary.is-pause{border-color:var(--ds-board-pause);background:var(--ds-board-pause);color:#1a1a1a}
.bc.ds .ds-tool--board .ds-stopwatch__main .bc-btn--primary.tt-stop,.bc.ds .ds-tool--board .ds-timer__main .bc-btn--primary.is-stop{border-color:var(--ds-board-stop);background:var(--ds-board-stop);color:var(--ds-board-ink)}
.bc.ds .ds-tool--board .ds-stopwatch__sub,.bc.ds .ds-tool--board .ds-timer__sub{gap:10px}
.bc.ds .ds-tool--board .ds-stopwatch__sub .bc-btn,.bc.ds .ds-tool--board .ds-timer__sub .bc-btn{flex:0 1 auto;min-width:96px;padding:8px 16px}
.bc.ds .ds-tool--board .ds-timer__presets .bc-btn{min-height:44px;border-radius:22px;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);font-size:1rem}
.bc.ds .ds-tool--board .ds-timer__presets .bc-btn.is-on{border-color:var(--ds-board-accent);background:var(--ds-board-accent)}
.bc.ds .ds-tool--board .ds-timer__phase{min-height:1.3em;font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.04em}
.bc.ds .ds-tool--board #tt-pm .ds-timer__phase[data-kind=work]{color:#ffab91}
.bc.ds .ds-tool--board #tt-pm .ds-timer__phase[data-kind=short]{color:var(--ds-board-best)}
.bc.ds .ds-tool--board #tt-pm .ds-timer__phase[data-kind=long],.bc.ds .ds-tool--board #tt-iv .ds-timer__phase[data-kind=rest]{color:#90caf9}
.bc.ds .ds-tool--board #tt-iv .ds-timer__phase[data-kind=work]{color:var(--ds-board-best)}
.bc.ds .ds-tool--board .ds-timer__phase[data-kind=done]{color:#ffcdd2}
.bc.ds .ds-tool--board .ds-timer__when{margin:0;font-size:1.1rem;font-weight:700;color:var(--ds-board-note)}
.bc.ds .ds-tool--board .ds-timer__round,.bc.ds .ds-tool--board .ds-timer__total{font-size:1.05rem;color:var(--ds-board-sub)}
.bc.ds .ds-tool--board .ds-tool .ds-timer__at input[type=time],.bc.ds .ds-tool--board .ds-timer__at input[type=time]{min-height:56px;padding:4px 10px;border:2px solid #99cccc;border-radius:10px;font-size:clamp(1.8rem,7vw,2.6rem);font-weight:700;font-variant-numeric:tabular-nums;color:#111}
.bc.ds .ds-tool--board .bc-field label,.bc.ds .ds-tool--board .bc-field__choice{color:var(--ds-board-sub)}
.bc.ds .ds-tool--board .bc-field input:not([type=checkbox]):not([type=radio]):not([type=range]),.bc.ds .ds-tool--board .bc-field select{border:1px solid #99cccc;border-radius:6px;background:#fff;color:#222}
.bc.ds .ds-tool--board .ds-stopwatch .tt-best,.bc.ds .ds-tool--board .ds-stopwatch .tt-best td{background:transparent;color:var(--ds-board-best)}
.bc.ds .ds-tool--board .ds-stopwatch .tt-worst,.bc.ds .ds-tool--board .ds-stopwatch .tt-worst td{background:transparent;color:var(--ds-board-worst)}
.bc.ds .ds-tool--board .ds-table .bc-table{color:#eaf6f9;font-variant-numeric:tabular-nums}
.bc.ds .ds-tool--board .ds-table .bc-table th,.bc.ds .ds-tool--board .ds-table .bc-table td{border-color:rgba(255,255,255,.15);background:transparent;color:inherit}
.bc.ds .ds-tool--board .ds-table .bc-table-wrap{border-color:rgba(255,255,255,.2)}
.bc.ds .ds-tool--board .ds-table .bc-table caption{color:var(--ds-board-sub)}
.bc.ds .ds-tool--board .ds-stopwatch>div[data-role=laps]{max-width:520px;margin:6px auto 0}
/* 世界時計: 日本の時刻を大きく、いつもの都市を旧型どおりの札（4 列）に */
.bc.ds .ds-tool--board #tt-wc .ds-stopwatch__display[data-role=jst]{margin:0;font-size:clamp(2.8rem,12vw,5rem)}
.bc.ds .ds-tool--board #tt-wc [data-role=jstdate]{margin:0;font-size:1rem}
.bc.ds .ds-tool--board #tt-wc .ds-world-clock__favs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;width:100%;margin:0 0 10px;padding:0;text-align:left}
.bc.ds .ds-tool--board #tt-wc .ds-world-clock__card{position:relative;padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.07)}
.bc.ds .ds-tool--board #tt-wc .ds-picks__title{margin:0 44px 2px 0;font-size:1.05rem;font-weight:700;color:var(--ds-board-ink)}
.bc.ds .ds-tool--board #tt-wc .ds-world-clock__card .ds-stopwatch__display{margin:0;font-size:2.1rem;line-height:1.15;letter-spacing:0;text-align:left}
.bc.ds .ds-tool--board #tt-wc .ds-world-clock__card [data-role=meta]{margin:2px 0 0;font-size:1rem;color:var(--ds-board-sub)}
.bc.ds .ds-tool--board #tt-wc .ds-world-clock__card .bc-btn{position:absolute;top:4px;right:4px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ds-board-sub);font-size:1.2rem}
.bc.ds .ds-tool--board #tt-wc [data-role=note],.bc.ds .ds-tool--board #tt-wc [data-role=skew],.bc.ds .ds-tool--board #tt-wc [data-role=empty]{margin:4px 0 0;font-size:1rem;color:var(--ds-board-sub)}
.bc.ds .ds-tool--board #tt-wc .ds-stopwatch__main{gap:10px;margin:0}
.bc.ds .ds-tool--board #tt-wc .ds-stopwatch__main .bc-btn{flex:0 1 auto;min-width:96px;min-height:44px;padding:8px 16px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:var(--ds-board-soft);font-size:1rem;font-weight:600;letter-spacing:0}
.bc.ds .ds-tool--board .ds-wadokei__now{font-family:serif;font-size:clamp(2rem,8vw,3.3rem);letter-spacing:.08em;color:var(--ds-board-note)}
@media(max-width:600px){
 .bc.ds .ds-tool--board #tt-wc .ds-world-clock__favs{grid-template-columns:1fr 1fr;gap:8px}
 .bc.ds .ds-tool--board #tt-wc .ds-world-clock__card{padding:8px 10px}
 .bc.ds .ds-tool--board #tt-wc .ds-world-clock__card .ds-stopwatch__display{font-size:1.6rem}
 .bc.ds .ds-tool--board #tt-wc .ds-picks__title{font-size:1rem}
}
@media(max-width:600px){
 .bc.ds .ds-tool--board{padding:12px 12px 14px;border-radius:14px}
 .bc.ds .ds-tool--board .ds-stopwatch__display,.bc.ds .ds-tool--board .ds-timer__display{font-size:clamp(3rem,16vw,6rem);margin:0 0 8px}
 .bc.ds .ds-tool--board #tt-sw .ds-stopwatch__display{font-size:clamp(2.6rem,14vw,5.5rem)}
 .bc.ds .ds-tool--board .ds-stopwatch__main,.bc.ds .ds-tool--board .ds-timer__main{gap:10px}
 .bc.ds .ds-tool--board .ds-stopwatch__main .bc-btn,.bc.ds .ds-tool--board .ds-timer__main .bc-btn{flex:1 1 0;min-height:56px;padding:12px 8px;border-radius:12px;font-size:1.15rem}
 .bc.ds .ds-tool--board .ds-stopwatch__main .bc-btn--primary,.bc.ds .ds-tool--board .ds-timer__main .bc-btn--primary{flex:1.5 1 0;font-size:1.15rem}
 .bc.ds .ds-tool--board .ds-stopwatch__sub,.bc.ds .ds-tool--board .ds-timer__sub{gap:8px}
 .bc.ds .ds-tool--board .ds-stopwatch__sub .bc-btn,.bc.ds .ds-tool--board .ds-timer__sub .bc-btn{flex:1 1 auto;min-width:0;padding:8px 10px;white-space:nowrap}
}