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

.spD{
  --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;
}
.spD__in{max-width:1100px;margin:0 auto}
.spD__head{max-width:600px}
.spD__head h2{margin:0;font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.spD__head p{margin:14px 0 0;font-size:14px;line-height:1.9;color:var(--body)}
.spD__grid{margin:clamp(30px,4vw,46px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.spD__grid article{
  background:#fff;border-radius:12px;padding:24px 20px 22px;box-shadow:0 0 0 1px var(--line);
  display:flex;flex-direction:column;
}
.spD__step{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--acc)}
.spD__grid h3{margin:12px 0 0;font-size:16px;font-weight:800;color:var(--ink)}
.spD__t{margin:10px 0 0;font-size:13px;line-height:1.85;color:var(--body);flex:1}
.spD__grid ul{margin:18px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid var(--line);display:grid;gap:7px}
.spD__grid li{font-size:11.5px;color:var(--sub)}
@media (max-width:900px){ .spD__grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .spD__grid{grid-template-columns:1fr} }