> **実験での位置づけ**: この文書は「AI × CSS設計 比較実験」で **全 3 パターンに共通で渡した見た目の仕様**です。すべてのパターンがこの 1 枚だけを見た目の基準にしています（＝統制変数）。CSS の設計方法・ファイル構成・クラス命名・色の管理方法は一切指定していません。「見た目はほぼ同じ、設計はまったく違う」という結果は、この共通仕様があってはじめて言い切れます。
> **`prefers-reduced-motion`（視差効果を減らす設定）への対応もこの仕様に含まれています**（各パターンが対応しているかは実装依存）。

# デザイン仕様（design.md）

サンプルページの見た目の仕様。この仕様に従って HTML と CSS を実装する。CSS の設計方法・ファイル構成・クラス命名・色の管理方法は指定しない（実装者の判断に委ねる）。

## ページ構成と文言

- **ヘッダー**: 左にサイトロゴ（テキスト「SiteName」）、右に横並びナビゲーション 3 項目「ホーム / サービス / お問い合わせ」。**画面幅によらずナビは常時表示（ハンバーガーメニューは作らない）**。ヘッダーはスクロールに追従しない（固定しない）
- **メイン**: カード 3 枚のリスト。各カード = 画像 + タイトル「カードタイトル N」+ 説明文「ここにカードの説明文が入ります。サービスや製品の概要を簡潔に伝えるテキストです。」+ ボタン「詳しく見る」
- **フッター**: 「© 2026 SiteName」と SNS リンク 2 つ「X / GitHub」
- **リンク先はすべてプレースホルダ（`#`）**。SNS は架空サイトのダミー表記（実在アカウントを指さない）
- 画像: `https://placehold.co/600x338/e2e8f0/475569?text=Image+N`（N=1..3）、alt「カード画像N」

## HTML 基盤

- `lang="ja"` / `<title>` は「SiteName — サンプルページ」/ viewport meta（`width=device-width, initial-scale=1`）
- 最小対応幅 320px（横スクロールを出さない）

## 配色（ライトのみ。**ダークモード対応はしない**）

| 役割 | 値 |
|---|---|
| ページ背景 | oklch(0.982 0.002 0) ≈ #f9f9f9（ごく薄いグレー） |
| 面（ヘッダー・カード）の背景 | 白 #ffffff |
| 本文テキスト | oklch(0.321 0 0) ≈ #333333 |
| 補助テキスト（カード説明文） | oklch(0.510 0 0) ≈ #6b6b6b |
| アクセント（ボタン背景・リンク hover） | oklch(0.546 0.215 262.88) ≈ #3b82f6（青） |
| アクセント hover | oklch(0.488 0.217 264.38) ≈ #2563eb（濃い青） |
| ボタン文字 | 白 |
| フッター背景 | oklch(0.279 0.037 260.05) ≈ #1e293b（濃紺スレート） |
| フッター文字 | 白（補助テキストは白 70%） |
| 影（弱） | 0 1px 3px 黒 10% |
| 影（強・カード hover） | 0 4px 12px 黒 15% |

> 値は oklch / hex どちらの表記で実装してもよい（近似値、見た目が同等なら可）。

## タイポグラフィ

- フォント: `system-ui, sans-serif`
- 基本行送り 1.6 / カード説明文 1.7
- サイズ: ロゴ 20px 太字 / ナビ 14px / カードタイトル 18px セミボールド / 説明文 14px / ボタン 14px セミボールド / フッター 13px
- リンクに下線は付けない（ナビ・SNS・ボタンすべて）

## レイアウトと余白

- コンテンツ最大幅 1120px・中央寄せ・左右パディング 16px
- ヘッダー: 上下パディング 16px、白背景 + 影（弱）
- メイン: 上下パディング 40px
- カードリスト: モバイル 1 列 → **768px 以上で 3 列**（等幅、間隔 24px）。1 列時もカードは縦積みのまま（画像上・テキスト下）
- カード: 角丸 8px・白背景・影（弱）・内側パディング 20px。画像は最上部いっぱい（角丸に沿う）、比率 600:338 を保ち、はみ出す部分はトリミング
- カード内: タイトル下 8px / 説明文下 16px の間隔
- ボタン: 内側パディング上下 10px・左右 24px、角丸 6px、内容量サイズ（幅いっぱいにしない）
- フッター: 上下パディング 32px。モバイルは縦積み → **768px 以上で左右両端寄せ**（© 左・SNS 右、SNS 間隔 20px）
- レスポンシブはモバイルファースト、ブレイクポイントは 768px の 1 つ

## 状態変化（ホバーは hover が使えるデバイスのみで有効にする）

- **カード**: hover で影が弱 → 強へ（0.2s でなめらかに）
- **ボタン**: hover で背景がアクセント → アクセント hover へ（0.2s）
- **ナビリンク**: hover で文字色がアクセントへ（0.2s）
- **フッター SNS リンク**: hover で白 70% → 白 100%
- **キーボードフォーカスの表示はブラウザ既定のまま残す**（消さない。独自装飾は不要）

## アニメーション

- **ボタンの誘目パルス**: 「詳しく見る」ボタンは不透明度 1 → 0.7 → 1 を 2 秒周期（ease-in-out）で無限ループ
- OS の「視差効果を減らす」設定（prefers-reduced-motion）が有効な環境ではパルスを動かさない