アンカーリンクAnchor link

「アンカーリンク（Anchor link）」を実装してください。

## これは何か
同じページの中の特定の見出しへ飛ぶリンク。長いページの冒頭に目次として置くことが多い。

## 使いどころ
- 1ページが長く、読みたい場所へ直接行かせたいとき
- FAQ のように、質問の一覧から答えへ飛ばしたいとき

## 実装の要件
- a href="#id" と、飛び先の要素の id を対にする
- 飛び先に scroll-margin-top: (ヘッダーの高さ) を指定する
- 固定ヘッダーがあると、飛んだ先の見出しが帯の下に隠れる。飛び先に scroll-margin-top を付ける
- id を日本語や記号にするとURLが読みづらくなる。英数字とハイフンにする
- ページ内リンクだけで長いページを正当化しない。分けたほうがよい場合が多い

## アクセシビリティの要件
- 飛び先の見出しにも id を付け、リンクの文言と見出しの文言を揃える
- 目次は nav 要素にして aria-label を付ける
- スムーススクロールは prefers-reduced-motion のときに切る

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

```html
<nav class="x-anchor-link" aria-label="このページの目次">
  <p class="x-anchor-link__t">目次</p>
  <ul>
    <li><a href="#x-anchor-price">料金について</a></li>
    <li><a href="#x-anchor-support">サポートについて</a></li>
  </ul>
</nav>
<h2 class="x-anchor-link__h" id="x-anchor-price">料金について</h2>
<h2 class="x-anchor-link__h" id="x-anchor-support">サポートについて</h2>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-anchor-link,
.x-anchor-link *:not([class*="fa-"]),
.x-anchor-link *:not([class*="fa-"])::before,
.x-anchor-link *: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-anchor-link {
  width: 232px;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
}
.x-anchor-link__t {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
}
.x-anchor-link ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 12px;
  line-height: 1.9;
}
.x-anchor-link a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.x-anchor-link__h {
  /* 固定ヘッダーの下に隠れないよう、飛び先に余白を確保する */
  scroll-margin-top: 72px;
  width: 232px;
  margin: 10px 0 0;
  font-size: 12px;
  color: #606a7b;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
```

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