ドロワーメニューDrawer

「ドロワーメニュー（Drawer）」を実装してください。

## これは何か
画面の端から引き出しのように滑り出してくるメニュー。ハンバーガーボタンと組で使うことが多い。

## 使いどころ
- スマートフォンで、メニューの項目が画面に収まらないとき
- 絞り込み条件など、必要なときだけ出したい操作群をまとめたいとき

## 実装の要件
- position: fixed + transform: translateX() で出し入れする
- 背景には半透明の暗幕（オーバーレイ）を敷き、押すと閉じる
- 背後の本文がスクロールしてしまうと、閉じたときに読んでいた場所を見失う。開いている間は背景のスクロールを止める
- 開く方向を画面ごとに変えない。左から出たり右から出たりすると覚えられない
- 幅を画面いっぱいにするとモーダルとの区別が付かなくなる。端を少し残す

## アクセシビリティの要件
- 開いたらドロワーの中へフォーカスを移し、閉じたら開いたボタンへ戻す
- 開いている間、背後の本文を inert にしてタブ移動が裏へ抜けないようにする
- Esc キーで閉じられるようにする
- prefers-reduced-motion が指定されていたらスライドの動きを止める

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

```html
<div class="x-drawer">
  <div class="x-drawer__stage">
    <div class="x-drawer__panel">
      <p class="x-drawer__t" id="x-drawer-t">メニュー</p>
      <ul aria-labelledby="x-drawer-t">
        <li><a href="/about/">特徴</a></li>
        <li><a href="/price/">料金</a></li>
        <li><a href="/faq/">よくある質問</a></li>
      </ul>
    </div>
    <div class="x-drawer__scrim"></div>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-drawer,
.x-drawer *:not([class*="fa-"]),
.x-drawer *:not([class*="fa-"])::before,
.x-drawer *: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-drawer__stage {
  position: relative;
  width: 260px;
  height: 128px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.x-drawer__scrim {
  position: absolute;
  inset: 0 0 0 128px;
  background: rgba(20, 24, 31, 0.42);
}
.x-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 128px;
  padding: 10px 12px;
  border-right: 1px solid #e3e6ea;
  background: #fff;
}
.x-drawer__t {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #606a7b;
}
.x-drawer__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-drawer__panel a {
  display: block;
  padding: 4px 0;
  font-size: 12px;
  color: #1b2028;
  text-decoration: none;
}
```

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