/* ===========================
   使い方ステップコンポーネント（HOW TO USE）
   01/02/03 の番号 + イラスト + キャプション
   =========================== */
.howto-steps {
  list-style: none;
  display: grid;
  /* minmax(0,1fr): 3列を厳密に等幅にする（min-content 未満にも縮められるので
     キャプションが列幅を広げない）。等幅 → 画像の高さが揃う → 各列の中央下に
     キャプションが揃う（Figma準拠） */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 90px;              /* Figma: 画像227px + 間隔93px */
  max-width: 868px;       /* Figma: 3枚の総幅 868px */
  margin: 0 auto;
}

.howto-step {
  text-align: center;
}

/* 番号(01/02/03)は公式イラスト画像に焼き込み済み。別テキスト要素は持たない */
.howto-step__img {
  aspect-ratio: 681 / 864;   /* 公式イラストの比率（番号込み） */
  overflow: hidden;
}

.howto-step__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 番号・全体を切らずに表示 */
  object-position: center;
}

.howto-step__caption {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #4c4c4c;
  letter-spacing: -0.02em;
  line-height: 1.5;
  margin: 18px 0 0;
  /* キャプションは各列幅で自然に折り返す（text-align:center で画像の中央下に揃う）。
     nowrap は列幅を超える文言（02/03）で列からはみ出すため使わない */
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  .howto-steps { gap: 56px; max-width: 720px; }
}

@media (max-width: 767px) {
  .howto-steps {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 300px;
  }

  .howto-step__caption { font-size: 17px; }
}