2カラムTwo column layout

「2カラム（Two column layout）」を実装してください。

## これは何か
メニューと本文のように、画面を左右2つに分ける配置。辞典やマニュアルの基本形。

## 使いどころ
- 目次を常に見せながら、本文を読ませたいとき
- 絞り込み条件と結果を、並べて操作させたいとき

## 実装の要件
- display: grid + grid-template-columns: 268px minmax(0, 1fr)
- 本文側に minmax(0, 1fr) を使う。これが無いと中身が横に押し広げる
- 狭い画面でそのまま2列にすると、どちらも読めない。1列に畳む幅を決める
- 脇の列を広く取りすぎると、本文が細くなって読みにくい。250〜300px を目安にする
- 左右の境目が分からないと、どちらが主役か伝わらない。境界線か背景で区切る

## アクセシビリティの要件
- DOM の順序を、読ませたい順にする。CSS で左右を入れ替えない
- 脇の列が nav なら nav 要素にし、本文へのスキップリンクを置く
- 1列に畳んだとき、脇の列が本文の前に長く居座らないようにする

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

```html
<div class="x-two-column">
  <div class="x-two-column__side">脇</div>
  <div class="x-two-column__main">本文</div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-two-column,
.x-two-column *:not([class*="fa-"]),
.x-two-column *:not([class*="fa-"])::before,
.x-two-column *: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-two-column {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  width: 224px;
  height: 96px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  overflow: hidden;
}
.x-two-column__side {
  display: grid;
  place-items: center;
  border-right: 1px solid #e3e6ea;
  background: #fff;
  font-size: 11.5px;
  color: #606a7b;
}
.x-two-column__main {
  display: grid;
  place-items: center;
  background: #f4f5f7;
  font-size: 12px;
}
```

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