締め切りカウントダウンつきのCTA

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

書き換える項目

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

[キャンペーン名]

例：初期費用0円キャンペーン

[締め切りの日時]

例：2025年7月31日 23:59（日本時間）

[ボタンの文言]

例：いますぐ申し込む

[使用技術]

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

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「締め切りカウントダウンつきのCTA」を実装してください。

## 表示内容
- 締め切りのラベル（例：7月31日まで）
- キャンペーン名：[キャンペーン名]
- 残り時間：日・時間・分・秒
- ボタン：[ボタンの文言]
- 締め切り：[締め切りの日時]

## レイアウト
- 最大幅 560px のカード、中央配置、中央揃え
- 上から ラベル → キャンペーン名 → 残り時間 → ボタン
- 残り時間は、4つの数字の箱を横に並べ、それぞれの下に単位を置く

## デザイン
- カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px
- ラベル：12px、font-weight 700、背景 #1463F0、文字 #FFFFFF、角丸 999px、padding 4px 14px
- キャンペーン名：22px、font-weight 700、色 #1B2A44
- 数字の箱：幅 64px、背景 #1B2A44、角丸 8px、文字 #FFFFFF・32px・font-weight 700・等幅の数字
- 単位：12px、色 #5F6D84
- ボタン：高さ 48px、左右padding 32px、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700

## 動作
- 締め切りの日時は、タイムゾーンつきで指定する（見る人の地域が違っても同じ瞬間に終わる）
- 1秒ごとに更新する。数字は常に2桁で表示する
- 締め切りを過ぎたら、残り時間とボタンを消し、「このキャンペーンは終了しました」と表示する

## 注意点
- 実際の締め切りだけを表示する。ページを開くたびに残り時間がリセットされるような、見せかけの期限は作らない

## アクセシビリティ
- 1秒ごとの変化は読み上げさせない（role="timer"、aria-live="off"）。かわりに「7月31日 23時59分まで」という文を読み上げ用に置く
- 数字の切り替えに動きを付ける場合は、prefers-reduced-motion で無効化

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