/* ========================================================== lp-mobile-v2.css — トップページ Mobile V2 (LOCKED) ルール: - 本ファイルは index.html(トップページ)のみが読み込む。 下層16ページは css/style.css のみを読み込むため影響を受けない。 - 全セレクタを `.lp-header` / `.lp-hero-v2` など index 固有のクラス配下に スコープする。共有クラス(.site-header / .header-cta / .site-logo / .logo-chan など)の定義そのものは書き換えない。 - 1320px 以上(Desktop V2)には一切影響させない。 Desktop の Header / Hero / Builder / Preview / Steps / Benefits / FAQ は LOCK 済みのため変更しない。 仕様の正: docs/design/MOBILE_V2_AUTHORITY_DEFINITION_LOCKED.md ビジュアル原本 (375px): reference/mobile/mobile-master-v2-upper-LOCKED.png reference/mobile/mobile-master-v2-builder-preview-LOCKED.png reference/mobile/mobile-master-v2-lower-LOCKED.png 実装メモ: 375px の現行実装を3枚の原本と行単位で突き合わせた結果、 Builder / Preview 原本(7150行)と Lower 原本(12803行)は差分 0 だった。 差分は Upper 原本の2箇所のみ: (1) Header … 原本は Desktop V2 と同じ「ダークなワードマーク + フラットな コーラルCTA + #fffdfc の地色」。現行はピンク斜体ロゴ + オレンジのグラデーションCTA(旧デザイン)のままだった。 (2) Hero … 原本は CTA と猫アートの間隔が現行より 20px 詰まっている。 本ファイルはこの2点のみを実装する。それ以外は原本と一致しているため触らない。 ========================================================== */ /* ========================================================== 1. Header (Mobile) — Upper 原本 y0-62 原本実測: ワードマーク ink x16-116 / 肉球 x126-140 (15x15) / CTA pill x186-355 (170 x 33) / 地色 #fffdfc / 下罫線 y62 ========================================================== */ @media (max-width: 1319px) { /* 地色: 半透明の白 → Desktop V2 と同じ暖色寄りの白 */ .lp-header { background: var(--lp-bg); } /* ワードマークは Desktop V2 と同じ「ダーク・直立」。 ピンクのグラデーション文字と斜体の chan は Mobile V2 では使わない。 */ .lp-header .lp-logo { gap: 6px; } .lp-header .lp-logo-text { color: var(--lp-text); font-family: var(--lp-font); font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: 0; } .lp-header .lp-logo-chan { color: inherit; font-style: normal; letter-spacing: 0; margin-left: 3px; } /* 原本ではワードマークの中心より肉球がわずかに上にある */ .lp-header .lp-paw-logo { width: 15px; height: 15px; margin-bottom: 5px; } /* CTA: オレンジのグラデーション → V2 のフラットなコーラル 原本実測: pill 170x33 / ラベル ink x216-314 / 肉球 x335-347 */ .lp-header .lp-cta { height: 33px; min-height: 0; padding: 0 8px 0 30px; margin-right: 3px; gap: 21px; justify-content: space-between; background: var(--lp-coral); color: #fff; font-family: var(--lp-font); font-size: 9px; font-weight: 700; box-shadow: 0 2px 4px rgba(224, 96, 90, 0.26); } .lp-header .lp-cta:hover { background: var(--lp-coral-strong); opacity: 1; } .lp-header .lp-paw-cta { width: 13px; height: 13px; } } /* ---------------------------------------------------------- 375px 未満の安全確保 (レイアウトモードは変えない) 320px ではヘッダーが 13px はみ出していた(本実装以前からの既存挙動。 mobile CSS を無効化しても scrollWidth=333 で同値)。 原本の権威幅は 375px なので、それ未満のときだけ CTA の余白と ヘッダー内の間隔を詰めて収める。375px 以上の構成には影響しない。 ---------------------------------------------------------- */ @media (max-width: 374px) { .lp-header .lp-header-inner { gap: 12px; } .lp-header .lp-cta { padding: 0 8px 0 12px; gap: 9px; margin-right: 0; } } /* ========================================================== 2. Hero (Mobile) — Upper 原本 y63-905 情報の並びは原本どおり H1 → 補足コピー → 特長カード4枚(2x2) → 主CTA → 猫アート。現行実装がすでにこの順序・寸法で一致しているため、 並びやカード枚数には手を入れない。 唯一の差分は主CTAと猫アートの間隔。 原本 = CTA下端 y608 → アート ink 天端 y622 (14px) 現行 = CTA下端 y608 → アート ink 天端 y643 (34px) hero-grid の gap を詰め、その分だけセクション下パディングで補う。 これにより Hero の総高(y63-905)と、以降のセクション位置は原本と一致したまま。 ========================================================== */ @media (max-width: 900px) { .lp-hero-v2 .hero-grid { gap: 4px; } /* Hero 全体の高さを変えないための補正(24px → 4px の差 20px を戻す) */ .hero.lp-hero-v2 { padding-bottom: 64px; } } /* ========================================================== 3. Preview — 表示幅に収まるように A4 を等比縮小する (2026-08-15 の判定 Q-1) css/style.css の `@media (max-width:640px)` は倍率を 0.44 に固定しており、 794px * 0.44 = 349.4px となる。これは 375px 端末の表示領域(端末幅 - 32px = 343px)より広いため、`.preview-scroll` が 6px 横スクロールし、 A4 の右端が見切れていた。414px でも「収まってはいるが余る」状態だった。 MOBILE_V2_AUTHORITY_DEFINITION_LOCKED.md §6 の 「A4 pages are scaled to fit width」「horizontal scrolling is avoided」および §5.1「no horizontal scroll」を満たすため、倍率を表示幅から決める。 - CSS は「長さ ÷ 長さ」で無単位比を作れないため、幅の帯ごとに倍率を与える。 各帯の倍率は「その帯の最小幅で必ず収まる」値にしてある。 - clip や overflow-x:hidden で隠す方法は取らない(内容が欠ける)。 - .resume-page の実寸(794 x 1123)・.r-* の中身・PDF/印刷の出力には触れない。 画面表示上の縮小率だけを変える。 - margin は transform で余る分の打ち消し。式は style.css と同形 (1 - 倍率 を掛ける)。 ========================================================== */ @media (max-width: 640px) { main.lp-v2-main .resume-page { /* 〜351px (320px で 285.8 <= 288) */ transform: scale(0.36); margin-bottom: calc(-1123px * 0.64 + 16px); margin-right: calc(-794px * 0.64); } } @media (min-width: 352px) and (max-width: 374px) { /* 352px で 317.6 <= 320 */ main.lp-v2-main .resume-page { transform: scale(0.40); margin-bottom: calc(-1123px * 0.60 + 16px); margin-right: calc(-794px * 0.60); } } @media (min-width: 375px) and (max-width: 389px) { /* 375px(主 authority) で 342.2 <= 343 */ main.lp-v2-main .resume-page { transform: scale(0.431); margin-bottom: calc(-1123px * 0.569 + 16px); margin-right: calc(-794px * 0.569); } } @media (min-width: 390px) and (max-width: 413px) { /* 390px で 357.3 <= 358 */ main.lp-v2-main .resume-page { transform: scale(0.45); margin-bottom: calc(-1123px * 0.55 + 16px); margin-right: calc(-794px * 0.55); } } @media (min-width: 414px) and (max-width: 479px) { /* 414px(検証幅) で 381.1 <= 382 */ main.lp-v2-main .resume-page { transform: scale(0.48); margin-bottom: calc(-1123px * 0.52 + 16px); margin-right: calc(-794px * 0.52); } } @media (min-width: 480px) and (max-width: 539px) { /* 480px で 444.6 <= 448 */ main.lp-v2-main .resume-page { transform: scale(0.56); margin-bottom: calc(-1123px * 0.44 + 16px); margin-right: calc(-794px * 0.44); } } /* 521px 以上は .container の左右 padding が 16px → 22px に変わるため、 表示領域は「端末幅 - 44px」になる。540px では 496px。 */ @media (min-width: 540px) and (max-width: 640px) { /* 540px で 492.3 <= 496 */ main.lp-v2-main .resume-page { transform: scale(0.62); margin-bottom: calc(-1123px * 0.38 + 16px); margin-right: calc(-794px * 0.38); } }