リストList

「リスト（List）」を実装してください。

## これは何か
項目を縦に並べたもの。並び順に意味があるかどうかで、番号付きと点付きを使い分ける。

## 使いどころ
- 項目が同じ種類で、順に目を通してほしいとき
- 1件あたりの情報が少なく、表にするほどではないとき

## 実装の要件
- ul か ol。区切りは border-bottom で引く
- div を並べただけにしない。いくつあるかが読み上げで伝わらなくなる
- 手順には番号付き（ol）を使う。点付き（ul）では順序が伝わらない
- 1件ごとの高さを揃えないと、目で追いづらくなる

## アクセシビリティの要件
- ul / ol / li でマークアップする。項目数が読み上げられる
- 順序に意味があるなら ol を使う
- 各項目がリンクなら、リンク文言だけで行き先が分かるようにする

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

```html
<ul class="x-list">
  <li class="x-list__i"><span>請求書の発行</span><span class="x-list__m">9月20日</span></li>
  <li class="x-list__i"><span>入金の確認</span><span class="x-list__m">9月25日</span></li>
  <li class="x-list__i"><span>領収書の送付</span><span class="x-list__m">9月30日</span></li>
</ul>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-list,
.x-list *:not([class*="fa-"]),
.x-list *:not([class*="fa-"])::before,
.x-list *: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-list {
  width: 244px;
  margin: 0;
  padding: 0;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  list-style: none;
  overflow: hidden;
}
.x-list__i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  font-size: 12px;
}
.x-list__i + .x-list__i {
  border-top: 1px solid #e3e6ea;
}
.x-list__m {
  font-size: 11px;
  color: #606a7b;
  font-variant-numeric: tabular-nums;
}
```

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