セクションSection

「セクション（Section）」を実装してください。

## これは何か
見出しと中身でひとまとまりにした、ページの一区切り。ページを読みやすい単位に割る。

## 使いどころ
- ページが長く、話題ごとに区切りたいとき
- 目次から飛ばせるようにしたいとき

## 実装の要件
- section > (h2 + 本文)。区切りは余白で作る
- 見出しの無い section を作らない。区切る意味が伝わらない
- 見出しのレベルを見た目の大きさで選ばない。階層で選ぶ
- 区切りを背景色で示すと、画面が縞になって落ち着かない。余白で区切るほうが軽い

## アクセシビリティの要件
- section には見出し（h2 など）を必ず持たせる
- 見出しのレベルを飛ばさない（h2 の次に h4 を置かない）
- 目次から飛ばすなら id を付け、scroll-margin-top を足す

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

```html
<section class="x-section" id="x-section-price">
  <h2 class="x-section__t">料金について</h2>
  <p class="x-section__p">初期費用はかかりません。月額のみでご利用いただけます。</p>
</section>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-section,
.x-section *:not([class*="fa-"]),
.x-section *:not([class*="fa-"])::before,
.x-section *: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-section {
  width: 250px;
  padding: 14px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  scroll-margin-top: 72px;
}
.x-section__t {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e6ea;
  font-size: 13px;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
.x-section__p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: #606a7b;
}
```

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