外部リンク表示External link indicator

「外部リンク表示（External link indicator）」を実装してください。

## これは何か
別のサイトや新しいタブへ移動することを、アイコンや注記であらかじめ伝える書き方。

## 使いどころ
- 自社サイトの外へ出るとき。戻ってこられるかを読み手が判断できる
- PDF やファイルのダウンロードが始まるリンクの手前

## 実装の要件
- a 要素に target="_blank" rel="noopener" を付ける
- アイコンは文字の直後に置き、折り返しで離れないようにする
- target="_blank" には rel="noopener" を付ける。いまのブラウザは省いても同じ扱いになるが、意図を明示するために書く
- 何も告げずに新しいタブで開くと、戻るボタンが効かず迷わせる
- すべての外部リンクを新しいタブにしない。タブが増え続ける

## アクセシビリティの要件
- アイコンだけでなく、リンク名の中に「新しいタブで開きます」と含める
- アイコンは aria-hidden="true" にし、意味は文字側で伝える
- 見た目を変えたくないときは、視覚的に隠したテキストで読み上げにだけ足す

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

```html
<p>
  詳しい条件は
  <a class="x-external-link" href="https://example.com/terms" target="_blank" rel="noopener">
    提供元のサイト<span class="x-external-link__note">（新しいタブで開きます）</span>
    <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
  </a>
  をご覧ください。
</p>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-external-link,
.x-external-link *:not([class*="fa-"]),
.x-external-link *:not([class*="fa-"])::before,
.x-external-link *: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-external-link {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.x-external-link__note {
  font-size: 0.85em;
  color: #606a7b;
}
.x-external-link i {
  font-size: 0.8em;
  margin-left: 0.25em;
  /* アイコンだけが行頭に落ちないよう、直前の文字とつなぐ */
  white-space: nowrap;
}
```

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