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

.spA{
  --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:#fff;padding:clamp(52px,6.5vw,96px) 24px;
}
.spA__in{max-width:1080px;margin:0 auto}
.spA__title{margin:0 0 clamp(30px,4vw,50px);font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);
  text-align:center;letter-spacing:-.01em}
.spA__flow{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.5vw,28px)}
.spA__flow li{position:relative;padding-top:8px}
.spA__flow li:not(:last-child)::after{
  content:"";position:absolute;right:calc(clamp(14px,2.5vw,28px) / -2 - 4px);top:26px;width:8px;height:8px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);transform:rotate(45deg);
}
.spA__n{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;
  font-size:15px;font-weight:800;box-shadow:0 4px 12px -4px rgba(99,91,255,.6);
}
.spA__flow h3{margin:18px 0 0;font-size:15.5px;font-weight:800;color:var(--ink)}
.spA__flow p{margin:9px 0 0;font-size:13px;line-height:1.85;color:var(--body)}
@media (max-width:820px){
  .spA__flow{grid-template-columns:1fr 1fr;gap:26px}
  .spA__flow li:not(:last-child)::after{display:none}
}
@media (max-width:520px){ .spA__flow{grid-template-columns:1fr} }