html,body{margin:0;background:#fff}

.stC{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#f6f9fc;padding:clamp(52px,6.5vw,96px) 24px;
}
.stC__in{max-width:840px;margin:0 auto}
.stC__head h2{margin:0;font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.stC__head p{margin:12px 0 0;font-size:13.5px;color:var(--body)}
.stC__list{margin:clamp(28px,3.5vw,44px) 0 0;padding:0;list-style:none;display:grid;gap:18px}
.stC__list li{display:grid;grid-template-columns:150px 1fr 68px;align-items:center;gap:16px}
.stC__k{font-size:13px;font-weight:700;color:var(--body)}
.stC__bar{
  height:12px;border-radius:99px;background:#e3e9f0;position:relative;overflow:hidden;
}
.stC__bar::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:99px;
  background:linear-gradient(90deg,var(--acc),#8f8bff);
  animation:stC-grow 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.stC__bar--down::after{background:linear-gradient(90deg,#0e7c5a,#3ec99a)}
@keyframes stC-grow{ from{width:0} }
.stC__list b{font-size:15px;font-weight:800;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .stC__list li{grid-template-columns:1fr auto;gap:6px 12px}
  .stC__bar{grid-column:1/-1;order:3}
}
@media (prefers-reduced-motion:reduce){ .stC__bar::after{animation:none} }