/* コラムの図（scripts/lib/article-figures-html.mjs が出す HTML）。2026-10-17 嶋田さんが見本から選んだ2つの型
   a＝手引き型: 国税庁の手引き風。紺1色・四角い枠・答えは二重線（既定）
   b＝手書きメモ型: 方眼紙に手書きで説明する感じ。黄色マーカー・赤ペン（相続税・贈与税の記事）
   PC とスマホの切替は画面幅ではなく図の幅（container query）で行う。600px 以下＝スマホの形 */
.cf {
  --cf-navy: #013f73; --cf-tint: #edf2f8; --cf-ink: #1f2328; --cf-ink2: #4a5360; --cf-rule: #c4ccd6;
  --cf-hl: #fff07a; --cf-pen: #c8312b; --cf-grid: #e3ebf3; --cf-hand: #2b2b2b; --cf-hand2: #4a4a4a; --cf-pencil: #9a9a9a;
  container: cf / inline-size;
  margin: 2em 0;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
.cf-in { color: var(--cf-ink); font-size: 15px; line-height: 1.6; letter-spacing: 0; text-align: left; }
.cf-a .cf-in { font-family: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.cf-b .cf-in {
  font-family: "Klee One", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 16px; color: var(--cf-hand);
  background-color: #fff;
  background-image: linear-gradient(var(--cf-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cf-grid) 1px, transparent 1px);
  background-size: 22px 22px; border: 1px solid var(--cf-grid); padding: 20px 18px;
}
.cf-cap { margin-top: 12px; font-size: 13px; color: var(--cf-ink2); }
.cf-b .cf-cap { font-size: 14px; color: var(--cf-hand2); }
.cf-ttl { font-weight: 700; color: var(--cf-navy); margin-bottom: 10px; }
.cf-b .cf-ttl { font-weight: 600; color: var(--cf-hand); }
.cf-b .cf-hl { background: linear-gradient(transparent 55%, var(--cf-hl) 55%); }
.cf-lab { font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.cf-who { display: block; font-size: 12.5px; font-weight: 700; }

/* ---------- 判定（はい→右の答え／いいえ→下の質問。スマホでは左の幹から枝分かれ） ---------- */
.cf-dc { --qw: 50%; --line: var(--cf-navy); --lw: 2px; display: flex; flex-direction: column; }
.cf-b .cf-dc { --line: var(--cf-hand); }
.cf-dc-step { display: flex; align-items: center; }
.cf-dc-q { flex: 0 0 var(--qw); min-width: 0; font-weight: 700; }
.cf-dc-qn { margin-right: .45em; color: var(--cf-navy); }
.cf-dc-yes { flex: 1; min-width: 0; display: flex; align-items: center; }
.cf-dc-h { position: relative; flex: 0 0 72px; height: 30px; }
.cf-dc-h::before { content: ""; position: absolute; left: 0; right: 9px; top: 50%; height: var(--lw); margin-top: calc(var(--lw) / -2); background: var(--line); }
.cf-dc-h::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 10px solid var(--line); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.cf-dc-h .cf-lab { position: absolute; left: 0; right: 9px; bottom: 50%; margin-bottom: 4px; text-align: center; color: var(--line); }
.cf-dc-end { flex: 1; min-width: 0; font-weight: 700; }
.cf-dc-v { position: relative; width: var(--qw); height: 46px; }
.cf-dc-v::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 9px; width: var(--lw); margin-left: calc(var(--lw) / -2); background: var(--line); }
.cf-dc-v::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-top: 10px solid var(--line); border-left: 6px solid transparent; border-right: 6px solid transparent; }
.cf-dc-v .cf-lab { position: absolute; left: calc(50% + 10px); top: 50%; transform: translateY(-60%); color: var(--line); }
.cf-dc-final { width: var(--qw); flex: none; }
.cf-a .cf-dc-q { border: 1.5px solid var(--cf-navy); background: #fff; padding: 12px 14px; }
.cf-a .cf-dc-end { border: 4px double var(--cf-navy); background: var(--cf-tint); padding: 10px 12px; color: var(--cf-navy); }
.cf-b .cf-dc-q { border: 2px solid var(--cf-hand); border-radius: 16px 4px 18px 6px / 6px 18px 4px 16px; background: #fff; padding: 10px 14px; font-weight: 600; transform: rotate(-.5deg); }
.cf-b .cf-dc-step:nth-child(4n+3) .cf-dc-q { transform: rotate(.4deg); }
.cf-b .cf-dc-qn { color: var(--cf-hand); }
.cf-b .cf-dc-end { padding: 4px 6px; font-weight: 600; }
.cf-b .cf-dc-final { font-size: 17px; }
.cf-b .cf-lab { font-weight: 600; font-size: 14px; }
@container cf (max-width: 600px) {
  .cf-dc-step { flex-direction: column; align-items: stretch; }
  .cf-dc-q { flex: none; }
  .cf-dc-yes { margin-left: 22px; border-left: var(--lw) solid var(--line); padding: 14px 0; }
  .cf-dc-h { flex-basis: 52px; }
  .cf-dc-v { width: auto; margin-left: 22px; height: 44px; }
  .cf-dc-v::before { left: 0; margin-left: 0; }
  .cf-dc-v::after { left: calc(var(--lw) / 2); }
  .cf-dc-v .cf-lab { left: 12px; }
  .cf-dc-final { width: auto; }
}

/* ---------- 手順の流れ ---------- */
.cf-fl { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: auto 1fr; }
.cf-fl-s { grid-row: span 2; display: grid; grid-template-rows: subgrid; min-width: 0; position: relative; }
.cf-fl-t { font-weight: 700; }
.cf-ln { display: block; }
/* a: 矢羽根の見出し＋本文の枠 */
.cf-a .cf-fl { column-gap: 3px; }
.cf-a .cf-fl-no { display: none; }
.cf-a .cf-fl-h { background: var(--cf-navy); color: #fff; display: flex; align-items: center; min-height: 3.2em; padding: 6px 20px 6px 22px; font-size: 14px; line-height: 1.4; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.cf-a .cf-fl-s:first-child .cf-fl-h { padding-left: 12px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.cf-a .cf-fl-b { border: 1px solid var(--cf-rule); border-top: none; padding: 8px 10px 10px; margin-right: 9px; font-size: 13.5px; }
.cf-a .cf-fl-s:last-child .cf-fl-b { margin-right: 0; }
.cf-a .cf-who { color: var(--cf-navy); margin-bottom: 2px; }
.cf-a .cf-who::before { content: "【"; }
.cf-a .cf-who::after { content: "】"; }
.cf-b .cf-who::before { content: "（"; }
.cf-b .cf-who::after { content: "）"; }
.cf-a .cf-w-warn .cf-fl-b { background: var(--cf-tint); }
/* b: 手書きの番号＋マーカー、間に → */
.cf-b .cf-fl-s { padding-right: 30px; }
.cf-b .cf-fl-s:last-child { padding-right: 0; }
.cf-b .cf-fl-s:not(:last-child)::after { content: "→"; position: absolute; right: 3px; top: 36px; font-size: 26px; line-height: 1; color: var(--cf-hand); }
.cf-b .cf-fl-h { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cf-b .cf-fl-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--cf-hand); border-radius: 48% 54% 46% 52% / 54% 46% 52% 48%; font-weight: 600; font-size: 15px; line-height: 1; }
.cf-b .cf-fl-t { font-weight: 600; font-size: 17px; line-height: 1.45; }
.cf-b .cf-fl-b { font-size: 14.5px; color: var(--cf-hand2); margin-top: 4px; }
.cf-b .cf-who { color: var(--cf-hand2); font-weight: 600; font-size: 13.5px; }
.cf-b .cf-w-warn .cf-fl-t { display: inline-block; border: 2.5px solid var(--cf-pen); border-radius: 52% 46% 54% 44% / 60% 52% 48% 56%; padding: 2px 10px; margin-left: -10px; transform: rotate(-1.5deg); }
.cf-b .cf-w-warn .cf-who { color: var(--cf-pen); }
@container cf (max-width: 600px) {
  .cf-fl { display: flex; flex-direction: column; }
  .cf-fl-s { display: block; }
  .cf-a .cf-fl-s { border: 1.5px solid var(--cf-navy); }
  .cf-a .cf-fl-s:not(:last-child) { margin-bottom: 22px; }
  .cf-a .cf-fl-s:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); border-top: 10px solid var(--cf-navy); border-left: 9px solid transparent; border-right: 9px solid transparent; }
  .cf-a .cf-fl-h, .cf-a .cf-fl-s:first-child .cf-fl-h { clip-path: none; min-height: 0; padding: 8px 12px; font-size: 14.5px; }
  .cf-a .cf-fl-b { border: none; margin: 0; padding: 8px 12px 10px; font-size: 14px; }
  .cf-b .cf-fl-s { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 0 0 38px; }
  .cf-b .cf-fl-s:last-child { padding-bottom: 2px; }
  .cf-b .cf-fl-h { display: contents; }
  .cf-b .cf-fl-no { grid-column: 1; grid-row: 1 / span 2; }
  .cf-b .cf-fl-t { grid-column: 2; grid-row: 1; justify-self: start; }
  .cf-b .cf-fl-b { grid-column: 2; grid-row: 2; }
  .cf-b .cf-fl-s:not(:last-child)::after { content: "↓"; left: 6px; right: auto; top: auto; bottom: 6px; font-size: 24px; }
}

/* ---------- 期限・スケジュール（PC もスマホも縦に並べる） ---------- */
.cf-tl { max-width: 700px; }
.cf-tl-r { display: grid; grid-template-columns: 11em minmax(0, 1fr); position: relative; }
.cf-tl-w { font-weight: 700; }
.cf-a .cf-tl-r { border: 1.5px solid var(--cf-navy); }
.cf-a .cf-tl-r:not(:last-child) { margin-bottom: 20px; }
.cf-a .cf-tl-r:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); border-top: 9px solid var(--cf-navy); border-left: 8px solid transparent; border-right: 8px solid transparent; }
.cf-a .cf-tl-w { background: var(--cf-navy); color: #fff; padding: 9px 10px; display: flex; align-items: center; line-height: 1.4; }
.cf-a .cf-tl-x { padding: 9px 12px; }
.cf-b .cf-tl-r { padding: 9px 0; border-bottom: 1.5px dashed var(--cf-pencil); column-gap: 10px; }
.cf-b .cf-tl-r:last-child { border-bottom: none; }
.cf-b .cf-tl-w { font-weight: 600; }
@container cf (max-width: 600px) {
  .cf-tl-r { grid-template-columns: minmax(0, 1fr); }
  .cf-a .cf-tl-w { padding: 7px 12px; font-size: 14.5px; }
  .cf-a .cf-tl-x { padding: 8px 12px 10px; font-size: 14px; }
}

/* ---------- 横棒 ---------- */
.cf-bar-row { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 6px 0; }
.cf-bar-l { text-align: right; font-size: 14px; line-height: 1.4; }
.cf-bar-t { display: flex; align-items: center; gap: 8px; min-width: 0; align-self: stretch; }
.cf-bar { flex: none; height: 22px; }
.cf-bar-v { font-weight: 700; white-space: nowrap; font-size: 14px; }
.cf-a .cf-bar-t { border-left: 1.5px solid var(--cf-ink2); }
.cf-a .cf-bar { background: var(--cf-navy); }
.cf-a .cf-bar-v { color: var(--cf-navy); }
.cf-b .cf-bar { background: var(--cf-hl); border: 2px solid var(--cf-hand); border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px; height: 20px; }
.cf-b .cf-bar-v { font-weight: 600; }
@container cf (max-width: 600px) {
  .cf-bar-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 5px 0 8px; }
  .cf-bar-l { text-align: left; }
  .cf-a .cf-bar-t { border-left: none; }
}

/* ---------- 覚えてほしい数字 ---------- */
.cf-kv { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.cf-kv-c { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; }
.cf-kv-n { font-size: 32px; font-weight: 700; line-height: 1.25; }
.cf-kv-u { font-size: 15px; font-weight: 400; margin-left: 3px; }
.cf-kv-l { font-size: 13.5px; line-height: 1.5; }
.cf-a .cf-kv { border: 1.5px solid var(--cf-navy); }
.cf-a .cf-kv-c + .cf-kv-c { border-left: 1px solid var(--cf-rule); }
.cf-a .cf-kv-n { color: var(--cf-navy); }
.cf-b .cf-kv { column-gap: 12px; }
.cf-b .cf-kv-c { padding: 6px 4px; }
.cf-b .cf-kv-n { font-weight: 600; font-size: 34px; }
.cf-b .cf-kv-l { font-size: 14.5px; color: var(--cf-hand2); }
@container cf (max-width: 600px) {
  .cf-kv { grid-template-columns: minmax(0, 1fr); }
  .cf-kv-c { flex-direction: row; align-items: baseline; gap: 14px; padding: 10px 14px; }
  .cf-kv-n { flex: none; min-width: 4.2em; font-size: 26px; }
  .cf-a .cf-kv-c + .cf-kv-c { border-left: none; border-top: 1px solid var(--cf-rule); }
  .cf-b .cf-kv-c { padding: 6px 2px; }
  .cf-b .cf-kv-n { font-size: 28px; }
}

/* ---------- 2つの比較（行の高さは左右でそろえる） ---------- */
.cf-tc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.cf-tc-c { display: grid; grid-template-rows: subgrid; min-width: 0; align-content: start; }
.cf-tc-h { font-weight: 700; padding: 8px 12px; }
.cf-tc-i { padding: 8px 12px; font-size: 14.5px; }
.cf-a .cf-tc-c { border: 1.5px solid var(--cf-navy); }
.cf-a .cf-tc-h { background: var(--cf-navy); color: #fff; }
.cf-a .cf-tc-i + .cf-tc-i { border-top: 1px solid var(--cf-rule); }
.cf-b .cf-tc { column-gap: 22px; }
.cf-b .cf-tc-h { font-weight: 600; font-size: 17px; padding: 4px 4px 6px; border-bottom: 2px solid var(--cf-hand); }
.cf-b .cf-tc-i { padding: 8px 4px 8px 1.1em; text-indent: -.8em; border-bottom: 1.5px dashed var(--cf-pencil); font-size: 15.5px; }
.cf-b .cf-tc-i::before { content: "・"; }
@container cf (max-width: 600px) {
  .cf-tc { display: block; }
  .cf-tc-c { display: block; }
  .cf-tc-c + .cf-tc-c { margin-top: 16px; }
}