行政書士・ビザ（可愛い系）のWebデザイン見本

日本で働く・結婚する・会社をつくる外国の人と、その家族や雇う会社。役所の言葉がむずかしく、不安が大きい。かたい士業の顔をやめて、話しかけやすい窓口に見せる。本文はやさしい日本語（短い文・むずかしい漢字を減らす）。


業種	士業・コンサル（行政書士・ビザ）
系統	可愛い系（大きな角丸・太い線と色の影・吹き出し・桃色といちご色・弾むシール）
骨組み	K02 雑誌の格子：メインビジュアルの下は、全部を12列の格子に大小の枠（タイル）で組む。区切りの帯は無い。PC は `grid-template-areas` で配置（相談の悩み5＋7・できること4＋5＋3・写真と札・流れ・料金＋写真・声＋写真・質問・問い合わせ）。タブレットは6列、スマホは1列
形	ふつうの縦長
スライド	なし
メインビジュアル	画像1枚のLP風（大きなコピー）：相談室の写真を全面に、大きなコピーと「はじめての相談は無料」。「こんにちは」のシール
演出の型	A03（全画面の写真が余白のある角丸カードに縮む）。G04（色の幕で切り替え）は外した：幕の動きが2つ目の主役になるため。ページ内の移動はふつうのスムーズスクロール
動きの主役	A03 だけ（GSAP＋ScrollTrigger。clip-path を数字で渡す。縮むあいだシールが弾んで大きくなる）。ほかは動かさない（ボタンのホバーのみ）。「下からふわっと」は使っていない
架空の事務所	「ももとせ行政書士事務所」

色と書体（共通の変数名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（Zen Kaku Gothic New）--font-head（Kosugi Maru）--font-en（Fredoka＋日本語の書体）。枠の色は .t-white .t-pink .t-accent（いちご色の面・白文字）.t-ink（濃い茶赤）が同じ名前の変数を上書き。script.js に色は無い。手書き書体（Caveat）は共通の変数に入らないので使わない。

A03 の作り方・動かないとき

JS が付ける .is-motion のときだけ、ヒーローの高さを1.7倍にして写真の舞台を position: sticky で止め、そのあいだ写真の clip-path を inset(0%…round 0px)→inset(7% 5%…round 40px) に縮める。JS なし・GSAP なし・prefers-reduced-motion：写真は全面のまま、シールは最初から出ている。全部読める。