/* Vertical bars share a zero baseline and the same amount scale. */
.cost-comparison { background:#fff8ee; text-align:center; }
.cost-comparison h2 { margin-inline:auto; max-width:850px; }
.cost-comparison h2>span { display:inline-block; }
.cost-intro { max-width:740px; margin:22px auto 0; font-size:14px; line-height:1.95; }
.cost-basis { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px 0 10px; }
.cost-basis span { background:#fff; border:1px solid var(--ink); border-radius:100px; padding:7px 14px; font-size:12px; }
.cost-basis b { font-weight:900; }
.cost-basis-note { font-size:11px; line-height:1.8; color:#5f5b54; margin:0 auto 24px; }
.cost-visual { width:100%; max-width:820px; margin-inline:auto; padding:20px 18px; background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:5px 6px 0 var(--ink); text-align:left; }
.cost-saving { display:flex; align-items:center; justify-content:center; gap:26px; padding:15px 18px; background:var(--accent); color:#fff; border-radius:9px; text-align:center; }
.cost-saving-amount p,.cost-saving-rate p { font-size:11px; font-weight:700; line-height:1.6; margin:0; }
.cost-saving-amount strong { display:block; font:900 clamp(40px,10vw,58px)/1.1 "Outfit",sans-serif; letter-spacing:-.03em; margin-top:3px; white-space:nowrap; }
.cost-saving-amount small { font:800 16px/1.4 "Noto Sans JP",sans-serif; margin-left:5px; }
.cost-saving-rate { padding-left:22px; border-left:1px solid #ffffff80; }
.cost-saving-rate strong { font:900 clamp(24px,6vw,34px)/1.1 "Outfit",sans-serif; letter-spacing:-.03em; white-space:nowrap; }
.cost-saving-rate strong>span { font:800 11px/1.4 "Noto Sans JP",sans-serif; margin-right:3px; }
.cost-saving-rate small { font-size:16px; margin-left:2px; }
.cost-saving-rate p { margin-top:5px; }
.cost-chart { --plot-height:150px; margin:20px auto 0; max-width:600px; min-width:0; position:relative; }
.cost-chart>figcaption { font-size:11px; font-weight:800; margin-bottom:8px; }
.cost-columns { display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); position:relative; gap:8px; }
.cost-columns:before { content:""; position:absolute; left:0; right:0; top:calc(var(--plot-height) + 34px); border-top:1px solid #aaa49b; }
.cost-column { text-align:center; min-width:0; }
.cost-bar-stage { position:relative; height:calc(var(--plot-height) + 34px); display:flex; align-items:flex-end; justify-content:center; }
.cost-bar { width:66%; max-width:110px; height:calc(var(--plot-height) * var(--cost-ratio)); background:var(--ink); border-radius:4px 4px 0 0; }
.cost-value { position:absolute; bottom:calc(var(--plot-height) * var(--cost-ratio) + 7px); font:800 clamp(23px,5.8vw,32px)/1.1 "Outfit",sans-serif; white-space:nowrap; letter-spacing:-.025em; }
.cost-value small { font:700 10px/1.4 "Noto Sans JP",sans-serif; margin-left:3px; }
.cost-internal .cost-bar { background:var(--accent); }
.cost-internal .cost-value { color:var(--accent); }
.cost-column h3 { margin:12px 0 0; font-size:12px; line-height:1.6; }
.cost-column h3>span { display:block; }
.cost-column>p { color:#65605a; font-size:10px; line-height:1.6; margin:4px 0 0; }
.cost-drop { align-self:start; position:relative; margin-top:34px; height:calc(var(--plot-height) * .632835821); display:flex; justify-content:center; color:var(--accent); }
.cost-drop span { position:absolute; top:13px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; background:#fff; padding:2px 3px; white-space:nowrap; z-index:1; }
.cost-drop i { display:block; height:100%; border-left:2px dashed var(--accent); position:relative; }
.cost-drop i:after { content:""; position:absolute; width:9px; height:9px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); bottom:1px; left:-5.5px; transform:rotate(45deg); }
.cost-zero { position:absolute; top:calc(var(--plot-height) + 34px); left:-10px; transform:translateY(-50%); margin:0; color:#706b62; font:500 10px/1 "Outfit",sans-serif; }
.cost-conditions { max-width:900px; margin:30px auto 0; text-align:left; }
.cost-conditions summary { cursor:pointer; font-weight:800; font-size:13px; padding:12px 0; border-bottom:1px solid #c9c2b8; }
.cost-formula { margin:14px 0; padding:16px; background:#fff; border:1px solid #dfd8cf; font-size:12px; line-height:1.9; }
.cost-formula p+p { margin-top:12px; }
.cost-notes { font-size:11px; line-height:1.9; color:#5f5b54; margin-top:22px; text-align:left; }
.cost-notes p+p { margin-top:8px; }
.cost-next { font-size:14px; font-weight:700; line-height:1.9; margin:26px auto 0; }
.cost-next a { display:inline-block; color:var(--accent); border-bottom:1px solid currentColor; margin-top:7px; }

@media(min-width:768px) {
 .cost-intro { font-size:16px; }
 .cost-visual { padding:24px 32px; }
 .cost-saving { gap:34px; padding:15px 24px; }
 .cost-saving-amount p { font-size:13px; }
 .cost-saving-amount small { font-size:21px; }
 .cost-saving-rate { padding-left:32px; }
 .cost-saving-rate strong { font-size:36px; }
 .cost-saving-rate p { font-size:12px; }
 .cost-chart { --plot-height:160px; }
 .cost-chart>figcaption { font-size:12px; }
 .cost-column h3 { font-size:14px; }
 .cost-column>p { font-size:11px; }
 .cost-basis span { font-size:14px; padding:9px 18px; }
 .cost-notes { max-width:900px; font-size:12px; margin-inline:auto; }
}
@media(max-width:359px) {
 .cost-visual { padding:18px 12px; }
 .cost-saving { padding:14px 10px; gap:12px; }
 .cost-saving-rate { padding-left:12px; }
 .cost-saving-amount small { font-size:14px; margin-left:3px; }
 .cost-columns { grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); gap:5px; }
 .cost-value { font-size:23px; }
 .cost-value small { font-size:9px; margin-left:2px; }
 .cost-column h3 { font-size:11px; }
 .cost-column>p { font-size:9px; }
 .cost-basis { gap:7px; }
 .cost-basis span { padding-inline:10px; font-size:11px; }
}
.advisor-case-label { margin:16px auto 0; color:#e7e5df; font-size:13px; line-height:1.8; text-align:center; }