お問い合わせへ誘導するCTA帯

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

書き換える項目

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

[見出しテキスト]

例：まずはお気軽にご相談ください

[補足文]

例：ご相談・お見積りは無料です。

[フォームのURL]

お問い合わせページのリンク先

[電話番号]

例：03-0000-0000。載せない場合はこの行を削除

[受付時間]

例：平日 10:00〜18:00

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で、「お問い合わせへ誘導するCTA帯」を1つ実装してください。

## 目的
- ページを読み終えた人が、次に何をすればよいか迷わないようにする
- フォームと電話の2つの入り口を、同じ場所で選べるようにする

## 表示内容
- 見出し：[見出しテキスト]
- 補足文：[補足文]
- ボタン：「フォームで問い合わせる」→ [フォームのURL]
- 電話番号：[電話番号]
- 受付時間：[受付時間]

## レイアウト
- コンテンツ最大幅 960px、中央配置。帯の外側の上下の余白 80px（スマホ 48px）
- 帯の中は中央揃えで、上から 見出し → 補足文 → ボタンと電話番号
- PC：ボタンと電話番号を横並び（間隔 32px、縦位置は中央揃え）
- 640px未満：ボタン → 電話番号の順で縦並び（間隔 20px）。ボタンは幅100%

## デザイン
- 帯：背景 #1463F0、角丸 20px、padding 56px 32px（スマホ 40px 20px）
- 見出し：PC 28px / スマホ 22px、font-weight 700、line-height 1.4、色 #FFFFFF
- 補足文：15px、色 #FFFFFF（不透明度 90%）、見出しの下 8px
- ボタン：高さ 56px、左右の余白 32px、角丸 9999px、背景 #FFFFFF、文字 #1463F0・16px・font-weight 700。補足文の下 28px
- ボタンのホバー時：1px 上に動かし、影 0 8px 20px rgba(0,0,0,.18)。変化は 150ms
- 電話番号：26px、font-weight 700、色 #FFFFFF。その下に受付時間（13px、不透明度 90%）

## 実装方法
- 電話番号は tel: リンクにする。PCでは下線なし、ホバーで下線を出す
- 背景色が明るい場合に白文字が読みにくくならないよう、文字色をCSS変数で切り替えられるようにする

## アクセシビリティ
- セクションは section 要素にし、見出しは h2 でマークアップする
- 背景と文字のコントラスト比が 4.5:1 以上になっているかを確認する
- ボタンのタップ領域は 44×44px 以上にする
- キーボード操作時のフォーカスリングは、白の2px線で表示する

## 出力形式
- [使用技術]で、このセクション1つぶんのコードを出力
- 背景色・文字色・角丸・余白をCSS変数にまとめる