注釈Note

「注釈（Note）」を実装してください。

## これは何か
本文の内容に条件や例外を添える小さな文字。「※」で始めることが多い。

## 使いどころ
- 料金の条件や、対象外のケースを示すとき
- 本文を短く保ったまま、正確さを足したいとき

## 実装の要件
- p 要素に小さめの文字。記号ではなく「注:」のように文字で示す方法も検討する
- 本文で言うべきことを注釈に逃がさない。読まれない前提の場所に重要な条件を置かない
- 小さくしすぎない。12px を下限の目安にする
- 「※」を記号として読み上げさせない。意味は文字で書く

## アクセシビリティの要件
- 文字サイズを小さくしても、コントラストは 4.5:1 以上にする
- 本文との関係が分かる位置に置く。離れた場所に集めない
- 脚注にするなら、本文から aria-describedby か id リンクで結ぶ

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

```html
<div class="x-note">
  <p class="x-note__p">月額 1,980円でご利用いただけます。</p>
  <p class="x-note__n"><span aria-hidden="true">※ </span>表示はすべて税込みです。初月は日割りで計算します。</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-note,
.x-note *:not([class*="fa-"]),
.x-note *:not([class*="fa-"])::before,
.x-note *: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-note {
  width: 236px;
}
.x-note__p {
  margin: 0 0 7px;
  font-size: 12.5px;
}
.x-note__n {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #4a5464;
}
```

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