無料トライアルの案内帯

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

書き換える項目

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

[無料期間]

例：14日間

[安心材料]

2〜3個。例：カード登録なし、自動で課金されません

[ボタン文言]

例：無料で試してみる

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「無料トライアルの案内帯」を実装してください。

## 表示内容
- 見出し：「すべてのプランを、[無料期間]無料で試せます」
- 安心材料：[安心材料]
- ボタン：[ボタン文言]

## レイアウト
- 横長の帯（最大幅 960px、中央配置）
- PC：左に見出しと安心材料、右にボタン。上下中央でそろえる
- 安心材料は横に並べ、それぞれチェックマークを付ける
- スマホ：縦に並べ、ボタンは全幅

## デザイン
- 帯：背景は #1463F0 の9%の淡い色、枠線 1px solid（#1463F0 の25%の淡い色）、角丸 16px、padding 24px 32px
- 左端に、プレゼントや時計などのアイコン（32px、#1463F0）を置く
- 見出し：22px（スマホ 18px）、font-weight 700、色 #1B2A44。「[無料期間]無料」の部分だけ #1463F0
- 安心材料：14px、色 #47566E、項目の間隔 20px
- ボタン：高さ 52px、左右padding 32px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700

## 表示の決まり
- 無料期間が終わったあとにどうなるかを、必ず書く（自動で課金されるのか、されないのか）
- 事実と違う安心材料は載せない

## アクセシビリティ
- 見出しは h2 または h3（ページの構成に合わせる）
- 安心材料は ul / li。チェックマークは aria-hidden="true"
- ボタンのタップ領域は 44×44px 以上

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