歯科医院（信頼感・誠実／シンプル）

だれに向けたページか

歯医者が少し苦手な大人と、子どもの歯医者を探している親。「痛くないか」「何をされるのか」が不安な人。 治療の前に、何をするのかが全部見えるページにする。安心は、説明の多さで作る。

色

文字

• 見出し・本文：Zen Kaku Gothic New（本文 400・見出し 700）16px・行の高さ 1.95
• 英字・数字：Outfit

ページの構成と演出

1. メインビジュアル（演出① D03）：うしろに、うすい青・水色・紫の3つの雲がぼけたまま、ゆっくり形と位置を変える（CSS の @keyframes。1周 20秒以上）。その上に「説明してから、治療する。」と診療時間の札、右に診療室の写真
2. 大切にしていること：3つの約束（説明・痛みへの配慮・滅菌）
3. 見え方のちがい（演出② G02）：歯の模型の写真の中央に縦線。つまみを左右に動かすと、左「クリーニング前（イメージ）」と右「クリーニング後（イメージ）」が切り替わる。キーボードの矢印でも動く（input type="range"）
4. 治療の流れ（演出③ B06）：5つの手順が、スクロールすると付箋のタブのように少しずつずれて積み重なる。タブには番号と手順名。CSS の sticky だけで動く
5. 診療案内：一般歯科・小児歯科・予防・矯正相談
6. 診療時間・アクセス：表と地図の場所
7. フッター

動きの決まり

• JSや GSAP が無いとき：雲は CSS だけで動く（reduced-motion では止まる）。ビフォー・アフターは境目が真ん中で止まり、左半分＝前・右半分＝後として読める（ラベルは最初から出ている）。治療の流れは sticky で積み重なる。全部読める
• prefers-reduced-motion のときは、雲は止まり、見出しの出方も止まる
• 雲の色は不透明度を低く、文字の後ろでも本文が読めること（本文は白い板の上に置く）

⚠️医療広告の決まり（会員に必ず伝える）

• ビフォー・アフターの写真は、治療の内容・費用・期間・主なリスクや副作用を同じ所に書かないと載せられない（医療広告ガイドライン）。見本の写真は模型と CSS の色づけによるイメージで、本物の症例ではない
• 会員が自院の症例に替えるときは、上の4つを写真のすぐ下に書く。書けないなら、この区切りは「マイクロスコープの見え方」など症例でない比べ方にする
• 「痛くない」「絶対」などの言い切り、ほかの医院との比較は書かない
• 診療時間・料金・医師の経歴は見本の値（〇〇）。会員が本物に替える

写真（codex）

診療室・歯の模型・相談の席・器具を持つ手・待合室・滅菌パック、の6枚。顔は写さない。

下層ページを作るときの決まり

• 見出しは Zen Kaku Gothic New 700、上に Outfit の小さな英字
• 雲は1ページに1か所（一番上）だけ
• 紺の面は1ページに1回まで。青い文字は --c-accent-text