/* ===== メディリンクス 数字の図：共通スタイル（.ml-number-* で完全スコープ） ===== */
/* 図の外枠：白地・ターコイズの細い縁。前後に余白を確保 */
.ml-number-figure{box-sizing:border-box;display:block;width:100%;max-width:960px;margin:2.5em auto;padding:20px 16px;background:#fff;border:2px solid #d9f1f1;border-radius:16px;color:#173b41;font-family:inherit;line-height:1.5;text-align:left}
.ml-number-figure *,.ml-number-figure *::before,.ml-number-figure *::after{box-sizing:border-box}
.ml-number-figure p,.ml-number-figure ol,.ml-number-figure li{margin:0;padding:0}
/* キャプション：必ず幅100%のブロック（table系は使わない） */
.ml-number-figure .ml-number-caption{display:block;width:100%;margin:0 0 16px;padding:0;text-align:left;caption-side:initial}
.ml-number-figure .ml-number-badge{display:inline-block;margin:0 8px 4px 0;padding:2px 10px;background:#e8f8f8;border:1px solid #35baba;border-radius:999px;color:#173b41;font-size:.85rem;font-weight:700}
.ml-number-figure .ml-number-title{display:inline-block;color:#173b41;font-size:1.15rem;font-weight:800;line-height:1.4}
/* 行の見出し（控えめな黒文字＋ターコイズの縦線） */
.ml-number-figure .ml-number-rowlabel{margin:18px 0 14px;padding-left:8px;border-left:4px solid #35baba;color:#173b41;font-size:1rem;font-weight:700}
.ml-number-figure .ml-number-rowlabel:first-of-type{margin-top:0}
/* 条件チップ */
.ml-number-figure .ml-number-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.ml-number-figure .ml-number-chip{display:inline-block;padding:2px 10px;background:#f4fbfb;border:1px solid #cfe9e9;border-radius:999px;font-size:.85rem;font-weight:700}
/* 計算の流れ：スマホは読み順で縦1列。演算子は各カードの上に装飾で表示 */
.ml-number-figure .ml-number-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;list-style:none}
.ml-number-figure .ml-number-step{position:relative;min-width:0;padding:12px 14px;background:#fff;border:2px solid #cfe9e9;border-radius:12px;list-style:none;overflow-wrap:anywhere}
.ml-number-figure .ml-number-step[data-op]::before{content:attr(data-op);position:absolute;left:50%;top:-27px;width:32px;height:24px;margin-left:-16px;color:#35baba;font-size:1.4rem;font-weight:800;line-height:24px;text-align:center}
/* 控除・費用は淡い黄色 */
.ml-number-figure .ml-number-step--cost{background:#fff6dd;border-color:#ecd48f}
/* 結果はターコイズの太枠（文字は暗色で可読性を確保） */
.ml-number-figure .ml-number-step--result{background:#e8f8f8;border:3px solid #35baba}
/* 何の数字か：数値の直上に太字 */
.ml-number-figure .ml-number-label{display:block;color:#173b41;font-size:.95rem;font-weight:800;line-height:1.35}
/* 数値は大きく、単位は小さく */
.ml-number-figure .ml-number-value{margin:2px 0 0;line-height:1.1;color:#173b41}
.ml-number-figure .ml-number-big{font-size:2.4rem;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}
.ml-number-figure .ml-number-unit{margin-left:3px;font-size:.9rem;font-weight:700}
.ml-number-figure .ml-number-sub{display:block;margin-top:4px;font-size:.85rem;line-height:1.4}
/* フロー／一時費などの種別タグ */
.ml-number-figure .ml-number-tag{display:inline-block;margin-bottom:4px;padding:0 8px;background:#fff;border:1px solid #173b41;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1.6}
/* 文字の算式（選択・コピー可能な実テキスト） */
.ml-number-figure .ml-number-formula{margin:16px 0 0;padding:10px 12px;background:#f4fbfb;border-radius:10px;font-size:1rem;font-weight:700;line-height:1.9}
.ml-number-figure .ml-number-term{display:inline-block;white-space:nowrap}
.ml-number-figure .ml-number-term--cost{padding:0 6px;background:#fff6dd;border-radius:6px}
.ml-number-figure .ml-number-op{display:inline-block;margin:0 4px;color:#35baba}
/* 注意書き：図の下に短く */
.ml-number-figure .ml-number-note{margin:12px 0 0;font-size:.9rem;line-height:1.6}
/* ===== PC：2〜4列で横に並べる ===== */
@media (min-width:760px){
.ml-number-figure{padding:28px}
.ml-number-figure .ml-number-flow{gap:40px}
.ml-number-figure .ml-number-flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ml-number-figure .ml-number-flow--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ml-number-figure .ml-number-step{padding:14px 16px}
.ml-number-figure .ml-number-step[data-op]::before{left:-34px;top:50%;width:28px;margin:-12px 0 0}
.ml-number-figure .ml-number-big{font-size:2.6rem}
}
/* 小さな画面では計算を2段で見せ、長い縦列を避ける。 */
.ml-number-figure{container-type:inline-size;border-radius:8px;margin:28px 0;padding:20px 16px;scroll-margin-top:100px}
.ml-number-figure .ml-number-badge,.ml-number-figure .ml-number-chip,.ml-number-figure .ml-number-tag{border-radius:4px}
.ml-number-figure .ml-number-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
.ml-number-figure .ml-number-step{border-radius:6px;padding:12px 10px;min-height:110px}
.ml-number-figure .ml-number-label{font-size:14px;line-height:1.5}
.ml-number-figure .ml-number-big{font-size:34px}
.ml-number-figure .ml-number-unit{display:block;margin:3px 0 0;font-size:13px;line-height:1.3}
.ml-number-figure .ml-number-step[data-op]::before{left:-24px;top:50%;width:24px;margin:-12px 0 0}
.ml-number-figure .ml-number-step:nth-child(3)[data-op]::before{left:50%;top:-27px;width:32px;margin:0 0 0 -16px}
.ml-number-figure .ml-number-flow--3 .ml-number-step:last-child{grid-column:1/-1}
.ml-number-figure .ml-number-term--wrap{white-space:normal}
.ml-number-figure .ml-number-formula{border-radius:5px;font-size:15px}
.ml-number-figure .ml-number-note{font-size:14px;line-height:1.8}
.ml-number-figure .ml-number-note small{font-size:inherit}
@container(min-width:680px){
 .ml-number-figure .ml-number-flow--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
 .ml-number-figure .ml-number-flow--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
 .ml-number-figure .ml-number-flow--3 .ml-number-step:last-child{grid-column:auto}
 .ml-number-figure .ml-number-step:nth-child(3)[data-op]::before{left:-28px;top:50%;width:28px;margin:-12px 0 0}
}
@container(max-width:270px){
 .ml-number-figure .ml-number-flow{grid-template-columns:minmax(0,1fr)}
 .ml-number-figure .ml-number-flow--3 .ml-number-step:last-child{grid-column:auto}
 .ml-number-figure .ml-number-step[data-op]::before{left:50%;top:-27px;width:32px;margin:0 0 0 -16px}
}

/* 演算子を途中で折り返さない。 */
.ml-number-figure .ml-number-step[data-op]::before{white-space:nowrap;font-size:20px}