送信完了（サンクス）ページ

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

書き換える項目

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

[返信の目安]

例：2営業日以内

[戻り先のリンク]

例：トップページのURL

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で、お問い合わせフォームの「送信完了ページ」を実装してください。

## 目的
- 送信が完了したことを、ひと目で分かるように伝える
- このあと何が起きるかを伝え、待っている間の不安を減らす

## 表示内容
- チェックマークのアイコン
- 見出し：「お問い合わせを受け付けました」
- 本文：「[返信の目安]に、担当者よりメールでご返信します。ご入力いただいたメールアドレスに、確認メールをお送りしました。」
- 補足（枠で囲む）：「確認メールが届かない場合」
  - 迷惑メールフォルダをご確認ください
  - メールアドレスの入力に誤りがあった可能性があります。お手数ですが、もう一度お送りください
- ボタン：「トップページへ戻る」→ [戻り先のリンク]

## レイアウト
- コンテンツ最大幅 560px、中央配置、すべて中央揃え（補足の箇条書きだけ左揃え）
- 上下の余白 96px（スマホ 56px）

## デザイン
- アイコン：直径 72px の円（背景 #EBF2FF）の中に、32pxのチェックマーク（線の色 #1463F0、線幅 3px）
- 見出し：PC 28px / スマホ 22px、font-weight 700、色 #1B2A44、アイコンの下 24px
- 本文：15px、line-height 1.9、色 #5F6D84、見出しの下 16px
- 補足の枠：背景 #F7F9FC、角丸 12px、padding 20px 24px、本文の下 32px。見出し 14px・font-weight 700、箇条書き 13px・line-height 1.8・色 #5F6D84
- ボタン：高さ 48px、左右の余白 28px、角丸 9999px、枠線 1.5px solid #1463F0、文字 #1463F0・15px・font-weight 700、補足の下 32px
- アイコンは表示時に一度だけ、200ms かけて少し拡大しながら現れる

## 実装方法
- 送信完了は独立したページ（別URL）として作る。計測ツールで完了数を数えやすくするため
- ブラウザの「戻る」や再読み込みで、フォームが二重送信されないようにする方法をコメントで補足する
- 検索結果に出ないよう、noindex を指定する

## アクセシビリティ
- 見出しは h1 にし、ページを開いたときに見出しへフォーカスを移す
- アイコンは装飾なので aria-hidden="true" を付ける
- prefers-reduced-motion: reduce のときはアニメーションを無効にする

## 出力形式
- [使用技術]で、このページ1つぶんのコードを出力
- 返信の目安や補足の文言を、あとから書き換えやすい位置にまとめる