/* 154（2026-10-08）お支払いの流れ（棒）と記事数（線）。影なし・本文16px以上（600px以下14px以上） */
.cf154 .section-head h2{line-height:1.5}
.cf154-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin:0 0 18px;font-size:16px;font-weight:700;color:#102650}
.cf154-legend span{display:inline-flex;align-items:center;gap:8px}
.cf154-lg-bar::before{content:'';width:18px;height:18px;border-radius:8px;background:linear-gradient(180deg,#7f95ff,#2448d8)}
.cf154-lg-line::before{content:'';width:26px;height:4px;border-radius:8px;background:#2448d8;box-shadow:none}
.cf154-chart{max-width:1080px;margin:0 auto;padding:28px 28px 12px;background:#fff;border:1px solid #dfe6f2;border-radius:20px}
.cf154-plot{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;height:300px;padding-bottom:34px}
.cf154-line{position:absolute;left:0;right:0;top:0;bottom:34px;width:100%;height:calc(100% - 34px);overflow:visible;z-index:2;pointer-events:none}
.cf154-col{position:relative;height:100%}
.cf154-bar{position:absolute;left:14%;right:14%;bottom:34px;height:calc(var(--c) * (100% - 34px));min-height:6px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#a9b6ff,#2448d8);transform-origin:bottom;animation:cf154 1s cubic-bezier(.2,.7,.2,1) both}
.cf154-col.is-first .cf154-bar{background:linear-gradient(180deg,#5a74f5,#102650)}
.cf154-dot{position:absolute;left:50%;bottom:calc(34px + var(--a) * (100% - 34px));width:14px;height:14px;margin:0 0 -7px -7px;border-radius:50%;background:#fff;border:3px solid #2448d8;z-index:3}
.cf154-val{position:absolute;left:50%;bottom:calc(34px + var(--c) * (100% - 34px) + 8px);transform:translateX(-50%);white-space:nowrap;font-size:16px;font-weight:700;color:#102650}
.cf154-col.is-first .cf154-val{color:#102650}
.cf154-col:nth-child(3) .cf154-val{color:#2448d8}
.cf154-art{position:absolute;left:50%;bottom:calc(34px + var(--a) * (100% - 34px) + 14px);transform:translateX(-50%);white-space:nowrap;padding:2px 10px;border-radius:999px;background:#2448d8;color:#fff;font-size:16px;font-weight:700;z-index:4}
.cf154-m{position:absolute;left:0;right:0;bottom:0;height:28px;display:grid;place-items:center;border-top:1px solid #dfe6f2;font-size:16px;font-weight:700;color:#4b5375}
.cf154-axis{margin:4px 0 0;text-align:right;font-size:16px;color:#4b5375}
.cf154-col:nth-child(2) .cf154-bar{animation-delay:.05s}.cf154-col:nth-child(n+3) .cf154-bar{animation-delay:.1s}
@keyframes cf154{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.cf154-bar{animation:none}}
.cf154-sum{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:12px;max-width:1080px;margin:28px auto 0}
.cf154-sum-item{display:grid;align-content:start;gap:4px;padding:20px 22px;border-radius:20px;background:#102650;color:#fff}
.cf154-sum-item span{font-size:16px;font-weight:700;opacity:.85}
.cf154-sum-item b{font:700 34px/1.2 'Noto Sans JP',sans-serif;letter-spacing:-.01em}
.cf154-sum-item b small{font-size:16px;margin-left:2px}
.cf154-sum-item em{font-style:normal;font-size:16px;line-height:1.7;opacity:.9}
.cf154-sum-item.is-low{background:#fff;color:#102650;border:1px solid #dfe6f2}
.cf154-sum-item.is-low b{color:#2448d8}
.cf154-sum-item.is-grow{background:#f4f7fc;color:#102650;border:1px solid #dfe6f2}
.cf154-sum-item.is-grow b{color:#2448d8}
.cf154-sum-arrow{display:grid;place-items:center;font-size:24px;font-weight:700;color:#2448d8}
html body #grow.cf154 .grow152-note{margin-top:24px}
@media(max-width:800px){
  .cf154-chart{padding:20px 10px 8px}
  .cf154-plot{gap:4px;height:240px;padding-bottom:30px}
  .cf154-line{bottom:30px;height:calc(100% - 30px)}
  .cf154-bar{left:8%;right:8%;bottom:30px;height:calc(var(--c) * (100% - 30px))}
  .cf154-dot{bottom:calc(30px + var(--a) * (100% - 30px));width:10px;height:10px;margin:0 0 -5px -5px;border-width:2px}
  .cf154-val{bottom:calc(30px + var(--c) * (100% - 30px) + 6px);font-size:14px}
  .cf154-col:nth-child(2) .cf154-val{left:110%}
  .cf154-art{bottom:calc(30px + var(--a) * (100% - 30px) + 10px);font-size:14px;padding:1px 7px}
  .cf154-col:last-child .cf154-art{left:auto;right:0;transform:none}
  .cf154-col:first-child .cf154-art{left:0;transform:none}
  .cf154-m{height:24px;font-size:14px}
  .cf154-sum{grid-template-columns:1fr;gap:8px}
  .cf154-sum-arrow{transform:rotate(90deg);height:24px}
  .cf154-legend{font-size:14px}
}

.cf154-chart{padding-top:64px!important}
@media(max-width:800px){.cf154-chart{padding-top:48px!important}}
/* 154b：線と点の位置を合わせる（下の余白を二重に数えない）／スマホは重なるラベルを省く */
.cf154-plot{padding-bottom:0!important}
@media(max-width:800px){.cf154-col:first-child .cf154-art,.cf154-col:nth-child(2) .cf154-val{display:none}}
/* 154c：1列目の前にSVGがあるので、列の番号は1つずれる */
@media(max-width:800px){.cf154-col.is-first .cf154-val{display:block!important;left:0!important;transform:none!important}.cf154-col.is-first .cf154-art{display:none!important}.cf154-col:nth-child(3) .cf154-val{display:none!important}.cf154-col:last-child .cf154-art{left:auto!important;right:0!important;transform:none!important}}
/* 154d：2か月目以降の金額は、線から離れた右下に帯で */
.cf154-flat{position:absolute;left:calc(100% / 12 * 3);right:0;bottom:calc(34px + (15000 / 120000) * (100% - 34px) + 14px);margin:0;display:flex;align-items:center;justify-content:center;gap:10px;padding-top:8px;border-top:2px dashed #dfe6f2;font-size:16px;font-weight:700;color:#2448d8;z-index:1}
.cf154-flat b{font-size:22px}
@media(max-width:800px){.cf154-flat{bottom:calc(30px + (15000 / 120000) * (100% - 30px) + 8px);left:calc(100% / 12 * 4);gap:6px;font-size:14px;padding-top:4px}.cf154-flat b{font-size:16px}}
.cf154-flat{left:calc(100% / 12 * 6)!important;white-space:nowrap}
@media(max-width:800px){.cf154-flat{display:none!important}}
@media(min-width:601px) and (max-width:800px){.cf154-legend,.cf154-val,.cf154-m,.cf154-art{font-size:16px!important}}