最大幅コンテナContainer

「最大幅コンテナ（Container）」を実装してください。

## これは何か
本文の横幅に上限を付けて、中央に寄せるための箱。文章が横に伸びすぎるのを防ぐ。

## 使いどころ
- 大きな画面で、本文が横に長くなりすぎるとき
- サイト全体で、内容の左右の位置を揃えたいとき

## 実装の要件
- max-width + margin-inline: auto + padding-inline
- 本文の読みやすさを優先するなら max-width は 40〜45em 程度
- 最大幅をページごとに変えない。内容の左端が揺れると落ち着かない
- 左右の余白を0にすると、狭い画面で文字が画面の端に貼り付く。16px は確保する
- 文章の1行は全角40文字前後が読みやすい。幅を広げすぎない

## アクセシビリティの要件
- 幅の制限そのものは見た目の話なので、マークアップに影響させない
- 狭い画面での左右の余白（ガター）を必ず確保する

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

```html
<div class="x-container">
  <div class="x-container__in">最大幅のなかに本文が入る</div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-container,
.x-container *:not([class*="fa-"]),
.x-container *:not([class*="fa-"])::before,
.x-container *: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-container {
  width: 244px;
  padding: 10px;
  border: 1px dashed #cfd4dc;
  border-radius: 8px;
  background: #fff;
}
.x-container__in {
  max-width: 170px;
  margin-inline: auto;
  padding: 12px 10px;
  border-radius: 6px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 11.5px;
  text-align: center;
}
```

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