タイムラインTimeline

「タイムライン（Timeline）」を実装してください。

## これは何か
出来事を時間の順に、縦の線に沿って並べる表示。配送状況や更新履歴に使う。

## 使いどころ
- 進み具合を段階で見せたいとき（受付→発送→配達）
- 更新の履歴を、いつ何があったか順に見せたいとき

## 実装の要件
- ol > li。線は ::before で引き、丸は ::after で置く
- 線だけで段階を示さない。済んだものと、これからのものを文字でも区別する
- 項目が増え続けるものは折りたたむ。全部出すと本文が埋まる
- 日時の書式をそろえる。相対表記（3日前）と絶対表記を混ぜない

## アクセシビリティの要件
- 順序があるので ol でマークアップする
- 線と丸は擬似要素で描く。擬似要素に aria-hidden は付けられないので、content は空（""）にしておく
- 「完了」「進行中」を色だけで示さない。文字かアイコンを添える
- 日時は time 要素にして datetime 属性を付ける

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

```html
<ol class="x-timeline">
  <li class="x-timeline__i x-timeline__i--done">
    <span class="x-timeline__t">発送しました</span>
    <time class="x-timeline__d" datetime="2026-09-19">9月19日</time>
  </li>
  <li class="x-timeline__i">
    <span class="x-timeline__t">配達中</span>
    <time class="x-timeline__d" datetime="2026-09-21">9月21日</time>
  </li>
</ol>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-timeline,
.x-timeline *:not([class*="fa-"]),
.x-timeline *:not([class*="fa-"])::before,
.x-timeline *: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-timeline {
  width: 236px;
  margin: 0;
  padding: 12px 14px 12px 28px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  list-style: none;
}
.x-timeline__i {
  position: relative;
  padding-bottom: 14px;
}
.x-timeline__i:last-child {
  padding-bottom: 0;
}
.x-timeline__i::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -16px;
  width: 9px;
  height: 9px;
  border: 2px solid #cfd4dc;
  border-radius: 50%;
  background: #fff;
}
.x-timeline__i--done::before {
  border-color: #1d4ed8;
  background: #1d4ed8;
}
.x-timeline__i:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -12px;
  width: 1px;
  height: calc(100% - 14px);
  background: #e3e6ea;
}
.x-timeline__t {
  display: block;
  font-size: 12px;
}
.x-timeline__d {
  font-size: 11px;
  color: #606a7b;
}
```

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