安心材料を並べたフッター

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

書き換える項目

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

[サービス名]

ロゴ部分とコピーライトに表示する名前

[リンクのカラム]

見出しとリンクを3カラムぶん

[安心材料]

3〜5個。例：通信を暗号化、各種カード対応、30日間返品可

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「安心材料を並べたフッター」を実装してください。

## 表示内容
- 上段：ロゴ（[サービス名]）と、リンクのカラム
[リンクのカラム]
- 中段：安心材料
[安心材料]
（各項目：アイコンと短い文言）
- 下段：コピーライト

## レイアウト
- 上段：左にロゴ、右にリンクのカラムを3つ
- 中段：安心材料を横に並べ、あいだを 1px の縦線で区切る。上下を 1px の線ではさむ
- スマホ：安心材料は2列に折り返す

## デザイン
- 背景 #F7F9FC、上端に 1px solid #E2E8F0
- リンク：14px、色 #5F6D84。カラムの見出しは 13px・font-weight 700・色 #1B2A44
- 安心材料のエリア：上下 padding 20px、線は 1px solid #E2E8F0
- 各項目：アイコン（線のアイコン 20px、色 #1463F0）の右に文言（13px、font-weight 700、色 #1B2A44）
- コピーライト：12px、色 #5F6D84

## 表示の決まり
- 事実である安心材料だけを載せる（取得していない認証や、対応していない支払い方法を載せない）
- カード会社や認証機関のロゴを使う場合は、それぞれの使用条件を確認する。ここでは汎用の線のアイコンで示す
- あいまいな表現（「安心・安全」）ではなく、具体的な内容（「通信はすべて暗号化」「30日以内の返品に対応」）を書く

## アクセシビリティ
- 安心材料は ul / li
- アイコンは aria-hidden="true"
- footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"）
- 小さな文字でも、コントラスト比 4.5:1 以上

## 出力形式
- [使用技術]のコードを1つ出力
- 安心材料を配列で渡して繰り返し表示する形にする