CTAボタンCall to action

「CTAボタン（Call to action）」を実装してください。

## これは何か
ページの目的（申し込み・購入・資料請求）へ連れていく、いちばん目立たせるボタン。

## 使いどころ
- そのページで達成してほしい行動が1つに決まっているとき
- 長いページで、読み終わりそうな節目に繰り返し置くとき

## 実装の要件
- 移動なら a 要素、処理なら button 要素
- ラベルは動詞で書き、押した先で得られるものを含める
- 幅は文字に合わせず、最小幅と余白で安定させる
- 「送信」ではなく「無料で見積もりをもらう」のように、押した先で何が得られるかを書く
- 同じ画面に強いCTAを2つ並べない。競合すると両方の反応が落ちる
- 色を強くするだけでなく、周囲に余白を取る。詰め込むと目立たない

## アクセシビリティの要件
- 文字と背景のコントラストを 4.5:1 以上にする。目立つ色ほど白文字が薄くなりやすい
- リンクとして移動するなら a、その場で処理が走るなら button を使い分ける
- 大きなボタンでも、文字サイズは 16px 以上にする

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

```html
<a class="x-cta" href="/estimate/">
  無料で見積もりをもらう
  <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</a>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-cta,
.x-cta *:not([class*="fa-"]),
.x-cta *:not([class*="fa-"])::before,
.x-cta *: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-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  background: #1d4ed8;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.x-cta:hover {
  background: #1b45bd;
}
.x-cta:focus-visible {
  outline: 2px solid #1b2028;
  outline-offset: 3px;
}
```

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