/* ============================================================
   component: steps
   左に見出し、右に手順カード（アイコン + タイトル + 説明）を縦積み。
   左カラムを絞り、カードを詰めて余白の間延びを解消。
   ============================================================ */

.steps__inner {
  display: grid;
  /* 左カラムを約27%に絞る（旧: 1fr / 1.7fr ≒ 37%） */
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  /* 見出しはカード群の上端に揃える */
  align-items: start;
}

.steps__title {
  max-width: 10ch; /* 「Collaboration / starts here」の2行で収める */
}

/* base.css の `.section__title + *` を打ち消す（グリッドで揃えるため） */
.steps__inner > .steps__list { margin-top: 0; }

.steps__list { display: grid; gap: 10px; list-style: none; padding: 0; }

.step {
  background: var(--c-surface-alt);
  border-radius: var(--radius);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
}

/* 帯がグレーのときはカードを白に反転 */
.band--alt .step { background: var(--c-surface); }

.step__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.step__icon {
  font-size: 0.625rem;
  line-height: 1;
  color: var(--c-ink);
}

.step__title {
  font-family: var(--font-jp);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.step__body { color: var(--c-text); }

@media (max-width: 820px) {
  .steps__inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .steps__title { max-width: none; }
}