問い合わせ方法を選ぶカード

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[FAQのURL]

よくある質問ページのリンク先

[フォームのURL]

フォームのリンク先。同じページ内なら #form など

[電話番号]

例：03-0000-0000

[受付時間]

例：平日 10:00〜18:00

[返信の目安]

例：2営業日以内

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で、「問い合わせ方法を選ぶカード」を実装してください。

## 目的
- ユーザーが、自分の状況に合う問い合わせ方法をひと目で選べるようにする
- 先によくある質問を案内し、自分で解決できる人を増やす

## 表示内容（3枚のカード、この順番で並べる）
1. よくある質問
   - 説明：「まずはこちらをご確認ください」
   - リンク：「よくある質問を見る」→ [FAQのURL]
2. フォームで問い合わせる
   - 説明：「[返信の目安]にメールで返信します」
   - リンク：「フォームに進む」→ [フォームのURL]
3. お電話
   - 説明：「受付時間：[受付時間]」
   - リンク：[電話番号]（tel: リンク）

## レイアウト
- コンテンツ最大幅 960px、中央配置
- PC：3列、カード間 24px。768px未満：1列、カード間 12px
- カード内は中央揃えで、上から アイコン → 見出し → 説明 → リンク
- 3枚の高さを揃え、リンクの位置がカードの下端で揃うようにする

## デザイン
- カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px 24px
- アイコン：直径 56px の円（背景 #EBF2FF）の中に、24pxの線画アイコン（線の色 #1463F0、線幅 2px）
- 見出し：18px、font-weight 700、色 #1B2A44、アイコンの下 16px
- 説明：14px、line-height 1.7、色 #5F6D84、見出しの下 8px
- リンク：15px、font-weight 700、色 #1463F0、右に矢印「→」
- 電話番号は 22px、font-weight 700 で表示する
- ホバー時：枠線を #1463F0 にし、影 0 8px 24px rgba(27,42,68,.08)。変化は 150ms

## 実装方法
- アイコンはインラインSVGで描く（はてなマーク、封筒、受話器）
- カード全体をクリックできるようにする（リンクの疑似要素をカード全体に広げる）
- スマホでは電話番号をタップするとそのまま発信できるようにする

## アクセシビリティ
- カードのまとまりは ul / li でマークアップする
- 見出しは h2 または h3（置く場所の階層に合わせる）
- アイコンは装飾なので aria-hidden="true" を付ける
- キーボード操作時のフォーカスリングを、カード全体に分かりやすく表示する

## 出力形式
- [使用技術]のコードを1つ出力
- 窓口を増減するとき（チャットを足す、電話を外すなど）の変更箇所をコメントで説明