ページトップボタンBack to top

「ページトップボタン（Back to top）」を実装してください。

## これは何か
ページの下の方まで進んだときに出てきて、押すと先頭まで戻るボタン。

## 使いどころ
- 1画面に収まらない長いページで、先頭のメニューへ戻りたいとき
- スマートフォンで、画面上端まで指を伸ばさずに戻したいとき

## 実装の要件
- position: fixed で右下に置く。出し入れは scroll イベントで位置を測らず、ページの上のほうに置いた目印の要素を IntersectionObserver で見て、画面から外れたら出す
- 押したあと先頭の要素へフォーカスを移す
- 最初から出しっぱなしにしない。少しスクロールしてから出す
- 本文やフッターのリンクに重ならないようにする。重なると押せなくなる
- ページ内リンクなので、飛んだあとのフォーカス位置に注意する。見た目だけ戻ってフォーカスが下に残ると、キーボード操作が噛み合わなくなる

## アクセシビリティの要件
- a href="#top" でも button でもよいが、どちらでも押したあとフォーカスを先頭へ移す
- aria-label で「ページの先頭へ戻る」と名前を付ける
- スムーススクロールは prefers-reduced-motion のときに切る

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

```html
<div class="x-pagetop">
  <span class="x-pagetop__stage" id="x-pagetop-top">
    <a class="x-pagetop__b" href="#x-pagetop-top" aria-label="ページの先頭へ戻る">
      <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
    </a>
  </span>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-pagetop,
.x-pagetop *:not([class*="fa-"]),
.x-pagetop *:not([class*="fa-"])::before,
.x-pagetop *: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-pagetop__stage {
  position: relative;
  display: block;
  width: 190px;
  height: 104px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-pagetop__b {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  text-decoration: none;
}
.x-pagetop__b:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}
```

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