ボックスBox

「ボックス（Box）」を実装してください。

## これは何か
中身を枠で囲んだだけの箱。見出しを持たず、まとまりを示すためだけに置く。

## 使いどころ
- 本文の中で、一部だけを区別して見せたいとき
- 入力項目をグループにして、余白で区切るだけでは足りないとき

## 実装の要件
- div か section。角丸・枠線・余白の値はサイト全体で共通にする
- 意味のある区切りなら section にして見出しを付ける。意味の無い箱を増やさない
- 角丸と枠線と背景を全部変えると、種類が増えて統一感を失う。2種類までに絞る
- 入れ子の深さが3段を超えたら、構造を見直す

## アクセシビリティの要件
- ただの装飾なら div でよい。役割があるなら section / aside などに置き換える
- 枠線だけで意味を伝えない。重要な違いは文言でも示す

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

```html
<div class="x-box">
  <p class="x-box__p">受付時間は平日 10:00〜18:00 です。</p>
  <p class="x-box__p">年末年始は翌営業日の対応になります。</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-box,
.x-box *:not([class*="fa-"]),
.x-box *:not([class*="fa-"])::before,
.x-box *: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-box {
  width: 250px;
  padding: 14px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-box__p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.75;
}
.x-box__p:last-child {
  margin-bottom: 0;
}
```

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