ルビRuby text

「ルビ（Ruby text）」を実装してください。

## これは何か
漢字の上に読みを小さく添える表示。印刷で使われた5.5ポイント活字の呼び名「ruby」が由来。

## 使いどころ
- 固有名詞や難読語に読みを添えるとき
- 子ども向け、学習向けの内容

## 実装の要件
- ruby > 漢字 + rp「(」+ rt 読み + rp「)」の構成
- line-height に余裕を持たせる
- 全部の漢字に振らない。読みにくいものだけに絞る
- 行間を確保しないと、ルビが上の行と重なる
- ルビ非対応の環境では括弧で囲んで出る。rp 要素で括弧を用意しておく

## アクセシビリティの要件
- ruby / rt / rp を使う。読み上げソフトのルビの扱いは環境差が大きいので、読みが本文の意味に要るなら本文側にも書く
- rp 要素に括弧を入れておくと、非対応の環境でも読みが伝わる
- 読み上げソフトによってはルビも読むため、二重に聞こえることがある。長文には振らない

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

```html
<p class="x-ruby">
  <ruby>竣工<rp>（</rp><rt>しゅんこう</rt><rp>）</rp></ruby>した
  <ruby>数寄屋<rp>（</rp><rt>すきや</rt><rp>）</rp></ruby>造りの写真です。
</p>
```

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

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