固定表示Sticky

「固定表示（Sticky）」を実装してください。

## これは何か
スクロールしても特定の位置に貼り付いたままにする表示。ヘッダーや表の見出しに使う。

## 使いどころ
- 長い表で、列の見出しを見えたままにしたいとき
- ヘッダーの検索やメニューを、どこからでも使えるようにしたいとき

## 実装の要件
- position: sticky + top の値。貼り付かせたい範囲より内側の祖先に overflow を付けない
- html に scroll-padding-top を指定して、アンカーの着地位置をずらす
- 固定した要素の高さぶん、本文が隠れる。アンカーで飛んだ先に scroll-margin-top を足す
- スマートフォンでは画面が狭い。固定するものを増やすと本文が読めない
- 祖先に overflow: hidden / auto / scroll が付いていると、その要素の中でしか貼り付かない（overflow: clip は影響しない）。top などの位置指定も必須。詰まったらここを疑う

## アクセシビリティの要件
- 固定したメニューを飛ばして本文へ行けるよう、スキップリンクを置く
- 固定要素がフォーカスした要素を隠さないようにする（scroll-padding-top を指定する）

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

```html
<div class="x-sticky">
  <div class="x-sticky__head">固定される見出し</div>
  <div class="x-sticky__body">
    <p>1行目</p><p>2行目</p><p>3行目</p><p>4行目</p><p>5行目</p>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-sticky,
.x-sticky *:not([class*="fa-"]),
.x-sticky *:not([class*="fa-"])::before,
.x-sticky *: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-sticky {
  width: 214px;
  height: 112px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  overflow-y: auto;
}
.x-sticky__head {
  position: sticky;
  top: 0;
  padding: 8px 12px;
  border-bottom: 1px solid #e3e6ea;
  background: #f1f3f6;
  font-size: 11.5px;
  font-weight: 700;
}
.x-sticky__body {
  padding: 4px 12px 10px;
}
.x-sticky__body p {
  margin: 0;
  padding: 5px 0;
  font-size: 11.5px;
  color: #606a7b;
}
```

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