カルーセルCarousel

「カルーセル（Carousel）」を実装してください。

## これは何か
複数の画像を同じ場所で順に切り替えて見せる部品。回転木馬（carousel）が名前の由来。

## 使いどころ
- 同じ重みの候補が数枚あり、順に見てもらってよいとき
- 横に並べる幅が無く、スワイプで見せたいとき

## 実装の要件
- 自動再生するなら停止ボタンを置く。prefers-reduced-motion では自動再生しない
- 現在位置のインジケーターと、前後のボタンを付ける
- 自動で動くと、読んでいる途中で切り替わる。止める手段を必ず置く
- 2枚目以降はほとんど見られない。大事なものは1枚目に置くか、並べて出す
- 点（インジケーター）が小さいと現在地が分からない。押せる大きさにする

## アクセシビリティの要件
- 自動再生は「止める」ボタンを添える。5秒を超えて動くものには必須
- 前へ／次へのボタンに aria-label を付ける
- 切り替えた内容の変化は aria-live="polite" で伝える（自動再生中は off）
- キーボードの左右キーでも移動できるようにする

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

```html
<div class="x-carousel">
  <img class="x-carousel__view" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Crect width='16' height='9' fill='%23dbe3f7'/%3E%3C/svg%3E" alt="1枚目: 春の川辺" width="214" height="84">
  <div class="x-carousel__bar">
    <button class="x-carousel__nav" type="button" aria-label="前の画像へ"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button>
    <span class="x-carousel__dots" aria-hidden="true"><b class="x-carousel__on"></b><b></b><b></b></span>
    <button class="x-carousel__nav" type="button" aria-label="次の画像へ"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-carousel,
.x-carousel *:not([class*="fa-"]),
.x-carousel *:not([class*="fa-"])::before,
.x-carousel *: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-carousel {
  width: 214px;
}
.x-carousel__view {
  display: block;
  width: 100%;
  height: 84px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  object-fit: cover;
}
.x-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.x-carousel__nav {
  width: 30px;
  height: 30px;
  border: 1px solid #cfd4dc;
  border-radius: 7px;
  background: #fff;
  color: #1b2028;
  font-size: 11px;
  cursor: pointer;
}
.x-carousel__dots {
  display: inline-flex;
  gap: 6px;
}
.x-carousel__dots b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cfd4dc;
}
.x-carousel__on {
  background: #1d4ed8;
}
```

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