送信に失敗したときの表示

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

書き換える項目

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

[別の連絡方法]

例：メール support@example.com、電話 03-0000-0000

[使用技術]

例：HTML/CSS + JavaScript、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「送信に失敗したときの表示」を実装してください。

## 表示内容
- 見出し：「送信できませんでした」
- 説明：「通信の状態をご確認のうえ、もう一度お試しください。入力した内容はそのまま残っています。」
- ボタン：「もう一度送信する」
- 別の連絡方法：「うまくいかない場合は、こちらからご連絡ください。」と、[別の連絡方法]

## レイアウト
- フォームの上部（送信ボタンの上ではなく、フォームのいちばん上）に、枠で囲んで表示する
- 左に警告のアイコン、右に見出し・説明・ボタン

## デザイン
- 枠：背景 #FDF2F2、左に 4px solid #C9343A、角丸 0 8px 8px 0、padding 16px 20px
- アイコン：丸のなかに「！」、22px、色 #C9343A
- 見出し：16px、font-weight 700、色 #C9343A
- 説明：14px、line-height 1.8、色 #1B2A44
- 「もう一度送信する」ボタン：高さ 40px、左右padding 20px、角丸 999px、背景 #C9343A、文字 #FFFFFF・14px・font-weight 700
- 別の連絡方法：13px、色 #5F6D84、上に 12px の余白

## 動作
- 送信に失敗したら、この表示を出して、その位置までスクロールする
- 「もう一度送信する」を押すと、同じ内容でもう一度送信する。送信中はボタンを「送信中…」にする
- 3回続けて失敗したら、「時間をおいてお試しいただくか、別の方法でご連絡ください」に文言を変える
- 入力内容は、ページを再読み込みしても消えないよう、sessionStorage に一時保存する（送信に成功したら消す）
- エラーの種類（通信できない／サーバーのエラー／入力内容の問題）で、説明の文言を分ける

## アクセシビリティ
- 枠には role="alert" を付け、表示されたらすぐ読み上げられるようにする
- 表示されたら、フォーカスを見出しに移す
- 色だけでなく、アイコンと文言でエラーを伝える

## 出力形式
- [使用技術]のコードを1つ出力（送信処理そのものは含めない）