/* 制度ページの図解(scripts/diagrams.py が作る)。中身が多いときは比率より下に伸ばす(切らない)。
   パソコンもスマホも横長 4:3。文字の大きさは図の幅(cqw)に合わせて伸び縮みする。
   .dg.og は、シェア用の画像(1200x630)を撮るときだけ付ける */
.dg-wrap { container-type:inline-size; margin:8px 0 28px; }
.dg, .dg * { box-sizing:border-box; }
.dg { --dg-ink:#1C1A17; --dg-soft:#4A453E; --dg-mute:#8A847A; --dg-rule:#E0D9CC; --dg-card:#FDFBF6;
  --dg-accent:#B44B1C; --dg-accent-bg:#FBF1E3; --dg-c0:#6B7A5A; --dg-c1:#B44B1C; --dg-c2:#C9A66B; --dg-c3:#7C6A9A;
  box-sizing:border-box; aspect-ratio:4/3; display:flex; flex-direction:column; margin:0;
  background:#F6F3ED; border:1px solid var(--dg-rule); border-radius:12px;
  padding:5cqw 5.5cqw 3cqw; font-family:'Zen Kaku Gothic New', system-ui, sans-serif; color:var(--dg-ink); }
.dg-top { display:flex; flex-wrap:wrap; gap:1cqw 1.2cqw; align-items:center; }
.dg-eyebrow { font-size:2.4cqw; font-weight:700; color:var(--dg-accent); margin-right:auto; }
.dg-chip { font-size:2.1cqw; font-weight:700; color:var(--dg-soft); background:var(--dg-card); border:1px solid var(--dg-rule);
  border-radius:999px; padding:.5cqw 1.8cqw; white-space:nowrap; }
.dg-chip.area { background:var(--dg-accent); border-color:var(--dg-accent); color:#fff; font-weight:900; }
.dg-head { font-family:'Zen Old Mincho', serif; font-weight:700; font-size:4.6cqw; line-height:1.35; margin:2cqw 0 0; }
.dg-body { flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; }
.dg-foot { display:flex; justify-content:space-between; gap:2cqw; align-items:baseline; border-top:1px solid var(--dg-rule);
  padding-top:1.6cqw; font-size:2cqw; font-weight:700; color:var(--dg-mute); }
.dg-site { font-family:'Zen Old Mincho', serif; color:var(--dg-ink); white-space:nowrap; font-size:2.3cqw; }
.dg-site small { color:var(--dg-mute); font-size:.85em; }
.dg-v { font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
.c0 { background:var(--dg-c0); } .c1 { background:var(--dg-c1); } .c2 { background:var(--dg-c2); } .c3 { background:var(--dg-c3); }
.t0 { color:var(--dg-c0); } .t1 { color:var(--dg-c1); } .t2 { color:var(--dg-c2); } .t3 { color:var(--dg-c3); }

/* 積み上げ */
.dg-stack-label { display:flex; justify-content:space-between; align-items:baseline; gap:2cqw; margin-bottom:1.2cqw; }
.dg-stack-label span { font-size:2.4cqw; font-weight:700; color:var(--dg-soft); }
.dg-stack-label strong { font-family:'Zen Old Mincho', serif; font-size:5cqw; color:var(--dg-accent); white-space:nowrap; }
.dg-stack { display:flex; border-radius:6px; overflow:hidden; gap:2px; flex-shrink:0; }
.dg-body > * { flex-shrink:0; }
.dg-stack > div { padding:3cqw 1cqw; text-align:center; min-width:0; }
.dg-stack .dg-k { display:block; font-size:2.6cqw; font-weight:700; color:#fff; }
.dg-stack .dg-v { display:block; font-size:4cqw; }
.dg-lines { margin:2.4cqw 0 0; padding:0; list-style:none; font-size:2.5cqw; color:var(--dg-soft); line-height:1.7; }

/* 年齢の帯 */
.dg-row { display:grid; grid-template-columns:14cqw 1fr; gap:1.6cqw; align-items:end; margin-bottom:2cqw; }
.dg-row-label { font-size:2.2cqw; font-weight:700; color:var(--dg-mute); line-height:1.35; padding-bottom:1cqw; }
.dg-axis-wrap { display:grid; grid-template-columns:14cqw 1fr; gap:1.6cqw; }
.dg-track { position:relative; height:8cqw; }
.dg-band { position:absolute; top:0; bottom:0; border-radius:5px; display:flex; align-items:center; justify-content:center; }
.dg-band .dg-v { font-size:3.6cqw; white-space:nowrap; }
.dg-vs { display:none; }
.dg-band.narrow .dg-v { position:absolute; left:2px; bottom:100%; margin-bottom:.6cqw; color:inherit; font-size:3cqw; }
.dg-row.has-narrow { margin-top:5cqw; }
.dg-axis { position:relative; height:5cqw; border-top:2px solid var(--dg-ink); margin-top:.6cqw; }
.dg-tick { position:absolute; top:0; font-size:2.2cqw; font-weight:700; color:var(--dg-soft); white-space:nowrap; padding-top:1.4cqw; transform:translateX(-50%); }
.dg-tick::before { content:""; position:absolute; top:-2px; left:50%; width:2px; height:1.2cqw; background:var(--dg-ink); }
.dg-tick.first { transform:none; } .dg-tick.first::before { left:0; }
.dg-tick.last { transform:translateX(-100%); } .dg-tick.last::before { left:auto; right:0; }

/* 上限と式 */
.dg-cap { display:grid; grid-template-columns:auto 1fr; gap:2cqw 2cqw; align-items:center; }
.dg-cap-label { font-size:2.6cqw; font-weight:700; color:var(--dg-soft); white-space:nowrap; }
.dg-cap-bar { border-radius:5px; padding:1.8cqw 2cqw; text-align:right; min-width:0; }
.dg-cap-bar .dg-v { font-size:3.4cqw; white-space:nowrap; }
.dg-formula { margin-top:3cqw; background:var(--dg-accent-bg); border:1.5px solid var(--dg-accent); border-radius:8px;
  padding:2cqw; text-align:center; font-size:3cqw; font-weight:700; }

/* 金額を大きく */
.dg-big { display:flex; flex-direction:column; align-items:flex-start; gap:.6cqw; }
.dg-big-label { font-size:2.6cqw; font-weight:700; color:var(--dg-soft); }
.dg-big-v { font-family:'Zen Old Mincho', serif; font-size:11cqw; line-height:1.1; color:var(--dg-accent); }
.dg-big-sub { font-size:2.6cqw; font-weight:700; color:var(--dg-soft); }

/* 手続きの流れ */
.dg-steps { display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:3.4cqw; list-style:none; margin:0; padding:0; counter-reset:dg; }
.dg-step { position:relative; background:var(--dg-card); border:1px solid var(--dg-rule); border-top:4px solid var(--dg-c0);
  border-radius:8px; padding:2cqw 1.6cqw; display:flex; flex-direction:column; gap:1cqw; }
.dg-step:last-child { border-top-color:var(--dg-accent); }
.dg-step + .dg-step::before { content:"→"; position:absolute; left:-2.9cqw; top:50%; transform:translateY(-50%);
  font-size:3cqw; font-weight:900; color:var(--dg-mute); }
.dg-step-when { font-size:2.2cqw; font-weight:700; color:var(--dg-accent); }
.dg-step-what { font-size:2.6cqw; font-weight:700; line-height:1.45; }

/* スマホも横長 4:3 のまま。幅が狭いぶん文字を少し大きくし、収まらないときは下に伸ばす */
@media (max-width: 639px) {
  .dg { padding:3.4cqw 4.2cqw 2cqw; }
  .dg-foot { padding-top:1.2cqw; }
  .dg-eyebrow { font-size:2.9cqw; } .dg-chip { font-size:2.6cqw; padding:.3cqw 1.8cqw; } .dg-top { gap:.8cqw 1cqw; }
  .dg-head { font-size:4.8cqw; margin-top:1cqw; line-height:1.28; }
  .dg-foot { font-size:2.7cqw; } .dg-site { font-size:3cqw; }
  .dg-stack-label span { font-size:3.1cqw; } .dg-stack-label strong { font-size:6cqw; }
  .dg-stack > div { padding:1.4cqw 1cqw; } .dg-stack-label { margin-bottom:.6cqw; } .dg-stack .dg-k { font-size:3.2cqw; } .dg-stack .dg-v { font-size:5cqw; }
  .dg-lines { font-size:2.7cqw; margin-top:1.2cqw; line-height:1.4; }
  .dg-row, .dg-axis-wrap { grid-template-columns:17cqw 1fr; } .dg-row-label { font-size:2.9cqw; }
  .dg-track { height:9cqw; } .dg-band .dg-v { font-size:4.4cqw; }
  .dg-band.narrow .dg-v { display:none; } .dg-band.narrow .dg-vs { display:inline; color:#fff; font-weight:900; font-size:3.4cqw; white-space:nowrap; }
  .dg-row.has-narrow { margin-top:0; }
  .dg-tick { font-size:2.9cqw; }
  .dg-cap { gap:1cqw 2cqw; } .dg-cap-label { font-size:3.1cqw; } .dg-cap-bar { padding:1.2cqw 2cqw; } .dg-cap-bar .dg-v { font-size:4.2cqw; }
  .dg-formula { font-size:3.1cqw; padding:1.1cqw; margin-top:1.4cqw; }
  .dg-big-label, .dg-big-sub { font-size:3.1cqw; } .dg-big-v { font-size:12cqw; }
  .dg-step-when { font-size:2.8cqw; } .dg-step-what { font-size:3.1cqw; } .dg-step { padding:1.6cqw 1.4cqw; }
}

/* シェア用の画像(1200x630)を撮るとき */
.dg-wrap.og { container-type:normal; margin:0; }
.dg.og { width:1200px; height:630px; aspect-ratio:auto; border:none; border-radius:0; padding:48px 64px 28px; }
.dg.og .dg-top { gap:10px 12px; }
.dg.og .dg-eyebrow { font-size:22px; } .dg.og .dg-chip { font-size:21px; padding:6px 18px; }
.dg.og .dg-head { font-size:46px; margin:14px 0 0; line-height:1.3; }
.dg.og .dg-foot { font-size:20px; padding-top:16px; } .dg.og .dg-site { font-size:22px; }
.dg.og .dg-stack-label { margin-bottom:12px; } .dg.og .dg-stack-label span { font-size:24px; } .dg.og .dg-stack-label strong { font-size:44px; }
.dg.og .dg-stack > div { padding:22px 8px; } .dg.og .dg-stack .dg-k { font-size:26px; } .dg.og .dg-stack .dg-v { font-size:36px; }
.dg.og .dg-lines { font-size:25px; margin-top:22px; }
.dg.og .dg-row, .dg.og .dg-axis-wrap { grid-template-columns:150px 1fr; gap:16px; } .dg.og .dg-row { margin-bottom:14px; }
.dg.og .dg-row-label { font-size:22px; padding-bottom:10px; } .dg.og .dg-track { height:78px; } .dg.og .dg-band .dg-v { font-size:34px; }
.dg.og .dg-band.narrow .dg-v { font-size:28px; margin-bottom:6px; } .dg.og .dg-row.has-narrow { margin-top:36px; }
.dg.og .dg-axis { height:50px; margin-top:6px; } .dg.og .dg-tick { font-size:22px; padding-top:14px; } .dg.og .dg-tick::before { height:12px; }
.dg.og .dg-cap { gap:22px 24px; } .dg.og .dg-cap-label { font-size:26px; } .dg.og .dg-cap-bar { padding:16px 20px; }
.dg.og .dg-cap-bar .dg-v { font-size:32px; }
.dg.og .dg-big-label, .dg.og .dg-big-sub { font-size:26px; } .dg.og .dg-big-v { font-size:120px; }
.dg.og .dg-steps { gap:40px; } .dg.og .dg-step { padding:22px 18px; gap:10px; } .dg.og .dg-step + .dg-step::before { left:-32px; font-size:30px; }
.dg.og .dg-step-when { font-size:22px; } .dg.og .dg-step-what { font-size:27px; } .dg.og .dg-formula { font-size:30px; padding:20px; margin-top:30px; }

/* 子育て.tokyo の制度ページ: 金額欄の文をそのまま中心に出す */
.dg-amount-label { font-size:2.4cqw; font-weight:700; color:var(--dg-soft); margin-bottom:1.2cqw; }
.dg-amount { font-family:'Zen Old Mincho', serif; font-weight:700; color:var(--dg-accent); line-height:1.3; }
.dg-amount.s { font-size:7.4cqw; } .dg-amount.m { font-size:5.4cqw; } .dg-amount.l { font-size:4cqw; } .dg-amount.xl { font-size:3.2cqw; }
.dg-parts { display:grid; grid-template-columns:repeat(auto-fit, minmax(28cqw, 1fr)); gap:1.6cqw; }
.dg-part { background:var(--dg-card); border:1px solid var(--dg-rule); border-left:4px solid var(--dg-accent); border-radius:8px;
  padding:1.6cqw 2cqw; font-size:2.8cqw; font-weight:700; line-height:1.4; }
.dg-parts.many .dg-part { font-size:2.3cqw; padding:1.2cqw 1.6cqw; }
@media (max-width: 639px) {
  .dg-amount-label { font-size:3cqw; }
  .dg-amount.s { font-size:8cqw; } .dg-amount.m { font-size:6cqw; } .dg-amount.l { font-size:4.6cqw; } .dg-amount.xl { font-size:3.6cqw; }
  .dg-part { font-size:3.2cqw; padding:1.2cqw 1.6cqw; } .dg-parts.many .dg-part { font-size:2.7cqw; }
}
.dg.og .dg-amount-label { font-size:26px; margin-bottom:14px; }
.dg.og .dg-amount.s { font-size:88px; } .dg.og .dg-amount.m { font-size:64px; } .dg.og .dg-amount.l { font-size:48px; } .dg.og .dg-amount.xl { font-size:38px; }
.dg.og .dg-parts { gap:18px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }
.dg.og .dg-part { font-size:30px; padding:18px 22px; } .dg.og .dg-parts.many .dg-part { font-size:25px; padding:12px 18px; }
.dg-more { margin-top:1.4cqw; font-size:2.2cqw; font-weight:700; color:var(--dg-mute); }
@media (max-width: 639px) { .dg-more { font-size:2.8cqw; } }
.dg.og .dg-more { font-size:22px; margin-top:14px; }
.dg-head.long { font-size:3.9cqw; }
@media (max-width: 639px) { .dg-head.long { font-size:4.2cqw; } }
.dg.og .dg-head.long { font-size:40px; }
.dg-top .dg-eyebrow { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 40%; }
/* 額の小さい棒・区分でも、金額の文字が入る幅は確保する(長さは額に合わせ、文字より短くはしない) */
.dg-cap-bar, .dg-stack > div { min-width:max-content; }
.dg-cap > div { min-width:0; }