カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 医療・クリニック（矯正歯科） |
| 系統 | 綺麗系（白とグレーと黒だけ・髪の毛のように細い線・明朝の縦書き） |
| 骨組み | K05：PC（1080px以上）は縦スクロールで7枚の面が横に進む（GSAP の pin＋横移動）。治療の月数のパノラマは幅280vwの長い面。ヘッダーに「MONTH 00→24」の物差し。右下に「01 / 07」。スマホ・JSなし・reduce は縦並び（パノラマは縦の年表） |
| 形 | ページ全体が横に動く |
| スライド | CSSだけ（scroll-snap）：装置の種類4枚。矢印は scrollBy だけ。横に進む面の中ではカード4枚が収まるので、送る必要はない |
| メインビジュアル | 分割（3枚）：縦に並んだ写真3枚（二色刷り）の間に、縦書きの句の帯 |
| 演出の型 | A07（写真3枚が時間差で6秒かけて 1.00→1.08 に拡大。CSS のみ・1回）／C04（月数のパノラマ＋物差しが進む）／F05（数字の穴に二色刷りの写真。mix-blend-mode: screen で白地に黒い数字を重ねる） |
| 動きの主役 | 横に進むこと。物差しの月数は同じ onUpdate で進める。A07 は読み込み時の小さな拡大 |
| 外した型 | なし |
| 架空の医院 | 「透 矯正歯科」 |
色と書体（共通の変数名13個だけ）
--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent --c-accent-text --c-on-accent --c-2 --c-3 --font-ja --font-head（Shippori Mincho B1）--font-en（Josefin Sans＋日本語の書体）。
区切りの色は data-tone（p-paper／p-grey／p-ink）が全部上書きする。色相は使わない。写真は CSS の grayscale で二色刷りにし、青い壁や赤い歯ぐきを消している。
動かないとき
JS なし・スマホ・reduce：7面が縦に並び、写真は止まったまま。物差しは出ない。
スライドの作り方
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline。矢印は scrollBy。
写真の出どころ
新しく作る：aligner（顔の1枚・マウスピース）。写真庫から（画像を開いて確かめた）：reception（021 の大理石の受付）・model（018 の歯の模型）・sterile（018 の滅菌器具）。使わなかった：counsel（青い椅子と青い壁で、白黒の見本に合わない）。
下層ページを作るときの決まり
- 見出しは Shippori Mincho B1（トップの句は縦書き）、英字は Josefin Sans 300。色相を足さない。写真は二色刷り
- 下層は縦の普通のページ。演出は F05 の数字だけ
- 費用・期間・症例は見本の値（〇〇）。会員が本物に替える。医療広告の決まり（費用・期間・リスク）を一緒に書く
