/* 1 年間の帯の図（templates/_nenrei_band.html）。成人式・享年の 2 面で共有。色・余白・字は bc の値（--bc-*）だけ。ds の部品（migration.json の state ds） */
.bc .nb-fig { margin: 0 0 var(--bc-space-3); }
.bc .nb-title { margin: 0 0 var(--bc-space-2); font-size: var(--bc-text-body); line-height: var(--bc-leading); font-weight: 700; color: var(--bc-text); }
.bc .nb-rows { display: flex; flex-direction: column; gap: var(--bc-space-3); padding: var(--bc-space-3); background: var(--bc-surface); border: var(--bc-line) solid var(--bc-border); border-radius: var(--bc-radius-card); }
.bc .nb-label { margin: 0 0 var(--bc-space-1); font-size: var(--bc-text-body); line-height: var(--bc-leading); color: var(--bc-text); overflow-wrap: anywhere; }
.bc .nb-label strong { display: block; }
.bc .nb-val { display: block; color: var(--bc-muted); }
.bc .nb-bar { display: block; width: 100%; height: 1.25rem; border-radius: var(--bc-radius-chip); }
.bc .nb-track { fill: var(--bc-bg); stroke: var(--bc-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bc .nb-seg--a { fill: var(--bc-brand); }
.bc .nb-seg--b { fill: var(--bc-brand-strong); }
.bc .nb-seg--c { fill: var(--bc-muted); }
.bc .nb-seg--mark { fill: var(--bc-sun); }
.bc .nb-axis { position: relative; height: 1.5em; font-size: var(--bc-text-body); line-height: var(--bc-leading-table); color: var(--bc-muted); }
.bc .nb-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.bc .nb-tick--start { transform: none; }
.bc .nb-tick--end { transform: translateX(-100%); }
.bc .nb-fig figcaption { margin-top: var(--bc-space-2); font-size: var(--bc-text-body); line-height: var(--bc-leading); color: var(--bc-muted); max-width: 43rem; }
/* 目盛りの位置（整数 %）。style 属性を使わず、クラスで置く。使う位置だけ: 0・100（両端）と 75（成人式の帯の1月1日。対象の生まれ範囲が全年で同じ長さのため常に 75） */
.bc .nb-x0 { left: 0%; }
.bc .nb-x75 { left: 75%; }
/* お歳暮の期間の帯（12月1日〜翌年2月4日の 66 日）の 12/20・1/1・1/15 の位置。年によらず同じ */
.bc .nb-x29 { left: 29%; }
.bc .nb-x47 { left: 47%; }
.bc .nb-x68 { left: 68%; }
.bc .nb-x100 { left: 100%; }
/* 幅 360px 未満では 75% の目盛り（1月1日）と右端の目盛りが重なるので、右端を 2 段目に下ろす */
@media (max-width: 359px) { .bc .nb-axis { height: 3em; } .bc .nb-tick--end { top: 1.5em; } }