/* =========================================================
   トップページ：無料体験の簡単3ステップ
   各カードは components/step.css（.step）
   画像は1枚のスプライト（step-illust.png）から切り出し
   ========================================================= */
.steps {
  background: var(--bg-2);
  padding: var(--section-pt) var(--gutter);
  scroll-margin-top: var(--header-h);
}
.steps .section-inner { display: flex; flex-direction: column; gap: clamp(44px, 5.2vw, 75px); }
.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 39px;
}

.step__img--1 { width: 233px; max-width: 100%; aspect-ratio: 233 / 215; }
.step__img--1 > img { width: 315.05%; height: 482.83%; left: 0; top: -206.87%; }
.step__img--2 { width: 226px; max-width: 100%; aspect-ratio: 226 / 215; }
.step__img--2 > img { width: 324.69%; height: 482.83%; left: -108.64%; top: -209.16%; }
.step__img--3 { width: 238px; max-width: 100%; aspect-ratio: 238 / 201; }
.step__img--3 > img { width: 288.22%; height: 482.83%; left: -188.22%; top: -206.87%; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .steps__list { grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin-inline: auto; }
}