相談予約へ誘導するセクション

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

書き換える項目

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

[見出し]

例：まずは30分、オンラインでお話ししませんか。

[相談でできること]

2〜3個

[担当者]

名前と一言

[ボタン文言]

例：空いている日時を見る

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「相談予約へ誘導するセクション」を実装してください。

## 表示内容
- 「無料相談」のラベル
- 見出し：[見出し]
- 相談でできること：[相談でできること]
- 担当者：[担当者]（丸い顔写真、名前、一言）
- 直近の空き日時の例（3つ。例：5/24（金）14:00）
- ボタン：[ボタン文言]
- ボタンの下に「所要時間 30分・オンライン・無理な勧誘はしません」

## レイアウト
- 1枚の大きなカード（最大幅 880px）。PCは左に見出しとできること、右に担当者と空き日時
- スマホ：縦に並べ、ボタンは全幅

## デザイン
- カード：背景は #1463F0 の9%の淡い色、角丸 20px、padding 48px（スマホ 28px）
- ラベル：12px、font-weight 700、背景 #1463F0、文字 #FFFFFF、角丸 999px
- 見出し：24px（スマホ 20px）、font-weight 700、line-height 1.5、色 #1B2A44
- できること：15px、行頭に #1463F0 のチェックマーク
- 担当者のエリア：背景 #FFFFFF、角丸 12px、padding 20px。顔写真は直径 56px
- 空き日時：チップの形（高さ 36px、枠線 1px solid #DCE4F0、角丸 999px、14px）で横に並べる
- ボタン：高さ 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700
- ボタンの下の文言：12px、色 #5F6D84

## 表示の決まり
- 空き日時は、実際の予約システムの情報を表示する。固定の日時を書く場合は「例」と明記する
- 「無料」「勧誘なし」などは、事実である場合だけ載せる

## アクセシビリティ
- 見出しは h2、担当者の名前は強調表示にする
- 顔写真の alt は担当者の名前
- 空き日時のチップがボタンの場合は button 要素、表示だけの場合は ul / li にする

## 出力形式
- [使用技術]のコードを1つ出力