ステップ表示Step indicator

「ステップ表示（Step indicator）」を実装してください。

## これは何か
入力・確認・完了のように、手続きがいま何番目の段階にあるかを番号つきの丸と線で示す部品。申し込みや購入の画面で見かける。

## 使いどころ
- 申し込み・購入・会員登録など、3〜5画面に分かれた手続きで、あと何段階あるかを示したいとき
- 途中でやめられやすい長いフォームで、終わりが見えることを伝えたいとき

## 実装の要件
- ol[role="list"][aria-label] > li の構成にし、現在の li に aria-current="step" を付ける。list-style: none にすると Safari がリストとして読まなくなるので role="list" を明示する
- 段階どうしをつなぐ線は li の ::before で描き、完了した区間だけ色を変える
- 丸の中の番号は aria-hidden="true" にする。ol の順番として読み上げられるので、残すと二重になる
- 段階の名前が要らず、進み具合の割合だけ見せたいならプログレスバー（feedback/progress）を使う
- Material Design ではこの部品を「Stepper」と呼ぶが、日本語の「ステッパー」は数量を増減するボタン（form/stepper）を指すことが多い。人や AI に頼むときは「ステップ表示」「ウィザードの進捗」と言い分ける
- 段階を細かく分けすぎない。6段階を超えると、1段階ごとの進みが小さく見えて、かえって先が長く感じる
- まだ進んでいない段階をリンクにしない。入力が済んでいないので、押しても先へは進めない
- 完了した段階へ戻れるようにするなら、戻ったときに入力済みの内容を消さない
- スマートフォンで段階名が折り返すときは、名前を短くするか「2 / 4 確認」のような文字だけの表示に切り替える

## アクセシビリティの要件
- 順序があるので ol でマークアップし、aria-label で何の手順かを付ける
- 現在の段階に aria-current="step" を付ける
- 完了したことをチェックの絵や色だけで示さない。「（完了）」のような文字を、見た目では隠しても読み上げには渡す
- 段階が変わるたびに、ページの title にも「確認（2/4）」のように何段階目かを入れる。1枚のページの中で書き換える作りなら、新しい段階の見出しへフォーカスを移す

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<ol class="x-step-indicator" role="list" aria-label="お申し込みの手順">
  <li class="x-step-indicator__s x-step-indicator__s--done">
    <span class="x-step-indicator__n" aria-hidden="true"><i class="fa-solid fa-check"></i></span>
    <span class="x-step-indicator__t">入力<span class="x-step-indicator__vh">（完了）</span></span>
  </li>
  <li class="x-step-indicator__s x-step-indicator__s--now" aria-current="step">
    <span class="x-step-indicator__n" aria-hidden="true">2</span>
    <span class="x-step-indicator__t">確認</span>
  </li>
  <li class="x-step-indicator__s">
    <span class="x-step-indicator__n" aria-hidden="true">3</span>
    <span class="x-step-indicator__t">お支払い</span>
  </li>
  <li class="x-step-indicator__s">
    <span class="x-step-indicator__n" aria-hidden="true">4</span>
    <span class="x-step-indicator__t">完了</span>
  </li>
</ol>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-step-indicator,
.x-step-indicator *:not([class*="fa-"]),
.x-step-indicator *:not([class*="fa-"])::before,
.x-step-indicator *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-step-indicator {
  display: flex;
  width: 340px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-step-indicator__s {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #606a7b;
  font-size: 12px;
}
/* 手順どうしをつなぐ線。前の手順の丸の中心から、自分の丸の中心まで引く */
.x-step-indicator__s + .x-step-indicator__s::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -50%;
  right: 50%;
  height: 2px;
  background: #cfd4dc;
}
.x-step-indicator__s--done + .x-step-indicator__s::before {
  background: #1d4ed8;
}
.x-step-indicator__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #8a93a3;
  border-radius: 50%;
  background: #fff;
  color: #606a7b;
  font-size: 12px;
  font-weight: 700;
}
.x-step-indicator__s--done .x-step-indicator__n {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}
.x-step-indicator__s--done {
  color: #1b2028;
}
/* 現在の手順は、色に加えて太い輪と太字で示す */
.x-step-indicator__s--now {
  color: #1d4ed8;
  font-weight: 700;
}
.x-step-indicator__s--now .x-step-indicator__n {
  border-width: 3px;
  border-color: #1d4ed8;
  color: #1d4ed8;
}
/* 画面には出さず、読み上げにだけ渡す文字 */
.x-step-indicator__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。