テキストリンクText link

「テキストリンク（Text link）」を実装してください。

## これは何か
本文の中に置く、押すと別のページへ移動する文字。色と下線で「押せる」と伝える、Webでいちばん古い部品。

## 使いどころ
- 文章を読んでいる流れで、補足・出典・詳細ページへ寄り道してもらいたいとき
- 移動が目的のとき。その場で何かが起きるならボタンを使う

## 実装の要件
- 移動先があるので a 要素を使う。div に onclick を付けた「リンクもどき」にしない
- :hover と :focus-visible の両方に見た目の変化を付ける
- 「こちら」「詳しくはこちら」だけをリンクにしない。リンクだけを拾い読みしたときに行き先が分からない
- 色だけで区別しない。下線を消すと、色の違いが見えにくい人には本文と区別がつかない
- 開閉・送信・コピーのように移動しない操作に a 要素を使わない。button を使う

## アクセシビリティの要件
- a 要素には href を付ける。href の無い a はキーボードのタブ移動で到達できない
- リンク文言だけで行き先が分かるようにする。支援技術はリンクだけを一覧表示できる
- 本文中でも上下の余白を確保し、指で押せる大きさを残す

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

```html
<p>
  料金は<a class="x-textlink" href="/price/">プラン比較のページ</a>で確認できます。
</p>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-textlink,
.x-textlink *:not([class*="fa-"]),
.x-textlink *:not([class*="fa-"])::before,
.x-textlink *: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-textlink {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  border-radius: 3px;
}
.x-textlink:hover {
  text-decoration-thickness: 2px;
}
.x-textlink:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
```

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