ページネーションPagination

「ページネーション（Pagination）」を実装してください。

## これは何か
一覧を何ページかに分けて、番号や「次へ」で行き来できるようにする部品。

## 使いどころ
- 件数が多く、1ページに全部載せると重くなるとき
- 「何ページ目にあったか」で覚えてもらいたいとき（無限スクロールでは戻れない）

## 実装の要件
- nav > ul > li。現在のページはリンクにせず、span に aria-current="page" を付ける
- 検索エンジンに載せる一覧では、各ページに ?page=2 のような固有の URL を持たせ、canonical は各ページ自身の URL にする（2ページ目以降の canonical を1ページ目に向けない）。ページ番号を # の後ろに入れない（Google は # 以降を無視する）
- 現在のページを押せるままにしない。押しても動かないリンクになる
- 番号だけを並べると指で押しづらい。1つあたりの領域を 24px 以上（指で押す画面は 44px を目安）確保する
- ページ数が多いときは先頭・末尾・現在地の周辺だけを出し、間は省略記号にする。「もっと見る」で継ぎ足す形（Load more）は別の手法で、何ページ目にいたかを覚えられない

## アクセシビリティの要件
- nav 要素に aria-label="ページ送り" を付ける
- 現在のページに aria-current="page" を付ける
- 「次へ」だけでなく「次のページへ」のように、行き先が分かる名前にする

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

```html
<nav class="x-pagination" aria-label="ページ送り">
  <ul>
    <li><a href="?page=1">1</a></li>
    <li><span class="x-pagination__cur" aria-current="page">2</span></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=3" class="x-pagination__next">次のページへ</a></li>
  </ul>
</nav>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-pagination,
.x-pagination *:not([class*="fa-"]),
.x-pagination *:not([class*="fa-"])::before,
.x-pagination *: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-pagination ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-pagination a,
.x-pagination__cur {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cfd4dc;
  border-radius: 7px;
  background: #fff;
  color: #1b2028;
  font-size: 12px;
  text-decoration: none;
}
.x-pagination a:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}
.x-pagination__cur {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
}
```

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