/* * PA テーマ 共通スタイル。 * * このファイルが持つのは 2 つだけである。 * 1. デザイントークン（配色・文字組み・余白・内側の幅・ブレークポイントの実値） * 2. ベーススタイル（reset に相当する最小限の土台） * ヘッダー・フッター・トップ等、個々のセクションの見た目は後続の Task が、 * ここのトークンを参照する形で実装する。 * * レスポンシブは PC/SP の二重テンプレートを作らず、単一テンプレート + CSS * ブレークポイントで実現する（テーマ方式 ADR に従う）。 * * 値の写し元（いずれも移行元サイトのリポジトリ legacy/www.p-a.jp 配下）: * 新デザイン public/assets/scss/_foundation/_variable.scss * public/assets/scss/_foundation/_layout.scss * public/assets/css/style.css（ビルド後。:root のカスタムプロパティ） * 旧デザイン public/css/common.css, public/css/style.css * * ------------------------------------------------------------------ * デザインプロファイルを 2 組に分ける理由 * ------------------------------------------------------------------ * 移行元サイトには 1 つのデザインではなく 2 世代が同居している。旧デザインが * 5,426 ページ、新デザイン（トップ・店舗 4 件・pa-zexy）が 6 ページである。 * どちらの見た目にも寄せられるよう、役割ごとの色と文字組みを 2 組持つ。 * * legacy-compat 金 #a3762b 系 / 游ゴシック / 基準 13px * … 既定。body にクラスが付かないときの値 * new 珊瑚 #f54851 系 / Inter / 基準 15px * … body.pa-profile-new のときの値 * * 既定を legacy-compat にしたのは、該当ページ数が 5,426 対 6 と旧デザインが * 圧倒的多数だからである。ページ 1 枚ずつにクラスを付けて回る手間を避けられる。 * * 【後続 Task への申し送り】body に付けるクラス名は次の 2 つで確定とする。 * これらを body_class フィルタで出力するのは後続 Task の担当で、本ファイルの * 担当範囲ではない。 * - pa-profile-new … 新デザインのページに付ける * - pa-profile-legacy-compat … 旧デザインのページに付ける。既定と同じ値の * ため本ファイルには上書きを置かない。出力して * おくと、後続の実装が「どちらの世代か」を * CSS 側で判別できる * * ------------------------------------------------------------------ * 移行元の rem 方式（html に font-size を置く）を採らない理由 * ------------------------------------------------------------------ * 移行元の新デザインは html に font-size を置き、全ての寸法を rem で書いて * いる。この方式は採らない。理由は 3 つある。 * 1. 既存のこのファイルが px で書かれている。混ぜると、読み手が行ごとに * 10 倍・0.1 倍の換算を強いられる * 2. html の基準を変えると、WordPress 本体のブロックスタイルや * プラグインの CSS が一緒に動く。これらは基準 16px を前提に書かれている。 * 移行元の 749px 以下の基準（2.5445292621vw）は、画面幅 約 629px を境に * 16px を上下する。**縮むだけでなく、広い側では意図せず拡大する** * （幅 375px で 9.54px・幅 749px で 19.06px） * 3. 閲覧者がブラウザで設定した既定の文字サイズを無視することになる * * 🔴 **トークンを px で持つのは 750px 以上だけである。**749px 以下は移行元が * 画面幅に比例させているため、px で持つと必ずずれる（次の節を読む）。 * * ------------------------------------------------------------------ * 🔴 移行元の 1rem は 1 つではない。帯で 2 つある（Issue #2606） * ------------------------------------------------------------------ * 移行元はこう書いている（生きている移行元の style.css で確認）。 * * @media screen and (min-width: 750px) { html { font-size: 10px } } * @media screen and (max-width: 749px) { html { font-size: 2.5445292621vw } } * * | 帯 | 1rem | 実測 | * | 750px 以上 | 10px（固定） | どの幅でも 10px | * | 749px 以下 | 画面幅の 2.5445292621% | 375px→9.542 / 320px→8.142px | * * したがって移行元の rem 値を px へ写せるのは 750px 以上だけである。 * * 750px 以上 … 「1rem = 10px」で px に換算して写す（例: 8rem → 80px） * 749px 以下 … px に写してはいけない。画面幅に比例する値で写す * * 749px 以下の書き方は、区画の中で 1 単位を変数に置き、移行元の rem 値を * 掛ける形にする。**移行元の rem 値がそのまま読み取れる**のが利点である。 * コース札とトップの大きい 3 区画は、この共通の変数を使う。 * * @media (max-width: 749px) { * .front-page { --pa-sp-rem: 2.5445292621vw; } * .front-plan__item { width: calc(32 * var(--pa-sp-rem)); } * } * * 🚨 **存在しない変数を使わないこと。**カスタムプロパティが解決できないと * 宣言ごと無効になり、まさにこの注釈が防ごうとしている崩れを招く。 * 新しい区画で使うときは、.front-page での共通変数の宣言を残してから使う。 * （全区画で使う共通の変数へ寄せる作業は Issue #2606 の後続で行う。） * * 🚨 749px 以下を「1rem = 10px」で写すと、固定値になるため * 画面が狭いほど差が広がる。実害が出た例が Issue #2553 / PR #2640 にある * （コース札を 32rem → 320px と写したため、幅 375px で丸い印が 22px 欠けた。 * 正しくは 81.42vw で、移行元の実測 305.3px と一致する）。 * * 🚨 媒体条件を持たない（両方の帯に効く）移行元の規則は、単一の px に * 写せない。どちらかの幅で必ずずれる。移行元の rem を使う宣言 482 件のうち * 74 件がこれに当たる（Issue #2606 の全数調査）。 * * 🚨 このファイルに既にある vw の直値を「移行元由来」と決めつけないこと。 * 15 種類のうち移行元の rem を写したとみられるのは 7 種類だけである。 * 6.25 / 15.625 / 21.875 / 46.875vw は幅 320px でちょうど * 20 / 50 / 70 / 150px になり、別の由来に見える。 */ /* ============================================================== * ウェブフォント Inter（Bug #1338） * * 書体が新デザインになる 6 ページ（`body.pa-legacy-new-font`）の * --pa-font-family-base は先頭に "Inter" を指定している（Task #3536 で * `body.pa-profile-new` から切り出した。対象が 1 ページ違うため）。 * 移行元サイトは woff2 を自前で /fonts/ に置いて配信していたが、このテーマには * 同梱していなかったため、閲覧者の端末に Inter が入っていない限り読み込みに * 失敗し、次候補の游ゴシックで描画されて字形が移行元とずれていた。 * 写し元は移行元サイトのリポジトリ legacy/www.p-a.jp の * public/fonts/Inter-Regular.woff2 と public/fonts/Inter-Bold.woff2 である。 * * 用意するのは 400（本文）と 700（太字）の 2 段だけである。移行元のビルド後 * CSS が使う font-weight もこの 2 つだけだからである。 * * font-display: swap にしてあるので、読み込みが終わるまでは次候補の書体で * すぐ本文を出し、届いた時点で Inter に差し替える（文字が消えて待つ状態を作らない）。 * * ほかのページへの影響は無い。@font-face は書体の名前を登録するだけで、どの要素に * 当てるかは font-family 側が決める。既定（`:root`）と成婚ストーリー * （`body.pa-legacy-story-font`）の --pa-font-family-base に "Inter" は入って * いないため、それらのページはこの woff2 を要求しない（ブラウザは実際に使われる * 書体しか取りに行かない）。 * * url() の相対パスは、この main.css 自身の位置（assets/css/）が基準になる。 * ../fonts/ で assets/fonts/ を指す。テーマのファイルはそのまま配信されるため、 * functions.php 側でフォントを登録する処理は要らない。 * ============================================================== */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2?ver=7c559ac1bfcb") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2?ver=2d131a11bc60") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* しあわせレポート一覧（/introduce/happyreport/）だけが使う欧文書体。移行元は このページに限って独自の 3 書体を読み込む（Issue #1628 の C3-17）。写し元は 移行元サイトの public/introduce/happyreport/index.html の style 要素（IBM Plex Sans と Rubik の登録）と、public/introduce/search.php の同じ組み（Spinnaker）で ある。woff2 の実体は移行元 public/fonts/ から写した。 IBM Plex Sans・Spinnaker・Rubik はいずれも SIL Open Font License 1.1 で配布 されている書体で、再配布に制限は無い。 どの要素に当てるかは、しあわせレポートの節（このファイルの末尾）で決める。 他のページはこの書体を font-family に持たないので、woff2 を取りに行かない. */ @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2?ver=bfac20219c69") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2?ver=844806d53840") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("../fonts/Rubik-SemiBold.woff2?ver=c41cb09c6384") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Spinnaker"; src: url("../fonts/Spinnaker-Regular.woff2?ver=9ee8be9fe3d9") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* 婚活予想図の入口（/introduce/）の欧文の副題だけが使う書体（Bug #3090）。 移行元はこの画面の 2 つの HTML（public/introduce/search.php の 32〜46 行目と public/introduce/result.php の 49〜63 行目）で Open Sans と Spinnaker の 2 書体を 登録している。**上の Spinnaker はその「同じ組み」から写したのに、Open Sans を 取りこぼしていた**（Issue #1628 の C3-17。上のコメントが写し元として public/introduce/search.php を挙げているのに、そちらだけを写した）。 取りこぼしの結果、画面専用 CSS が `font-family: 'Open Sans'` を持っているのに 書体ファイルが無く、欧文の副題「Sketch for Your Marriage」が次の候補で描かれて いた。実測（幅 1440px・2026-09-03）では移行元 311.11 × 24px に対し 333.34 × 18px で、字の大きさ 18px・太さ 700・字間 3.6px は一致しているのに 字形だけが違っていた。この 6px の高さの差が、初期化を写したあと（Bug #3070）に 残っていた「主見出しより下が 3px 下へずれる」の原因である。 🚨 **ライセンスは上の 3 書体と違う。** IBM Plex Sans・Spinnaker・Rubik は SIL Open Font License 1.1 だが、**Open Sans は Apache License 2.0** である （どちらも再配布に制限は無い）。上のコメントの「いずれも SIL OFL 1.1」に この書体を含めないこと。 woff2 の実体は移行元の**記録版**（`git ls-tree HEAD legacy/www.p-a.jp` が指す 19f499fe）の public/fonts/OpenSans-Bold.woff2 から写した（9,732 バイト）。 🚨 主リポジトリの作業ツリーは古い版で止まっていることがあるので、記録版を `git ls-tree` で取ってから `git show <版>:<パス>` で読むこと。 当てるのは婚活予想図の入口の画面専用 CSS （assets/introduce/css/style_introduce.css の 1586 行目と 2886 行目）だけである。 テーマの assets 全体で Open Sans を font-family に持つのはその 1 ファイルだけなので、 ほかのページはこの woff2 を取りに行かない（上の 3 書体と同じ建て付け）。 移行元が登録しているのは Bold（700）の 1 つだけで、Regular は登録していない. 当てている規則も `font-weight: 700` なので、ここも 700 だけを登録する. */ @font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Bold.woff2?ver=e524d763e06c") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* 携帯幅の画面下部の固定 CTA バーの文言だけが使う明朝（Task #3697）。 移行元はこのバーの文言を**絵に焼き込んで**おり（`sp/images/menu_footer0*.png`）、 写しは文字で組み直している。そのため「同じ大きさなのに文字が太い」差が出ていた。 🚨 **直す前は手元の書体に頼っていた。** 当てていたのは `游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif` の 太さ 700 で、**游明朝は macOS にしか無い**。Windows・Android では別の書体に落ちる ため、環境によって見た目が違っていた。同梱すればどの環境でも同じ姿になる。 両側を同じ物差しで測って選んだ（濃さ = 白い画素 ÷ 区画の全画素。dev ÷ 移行元の 比が 1.00 なら一致）。移行元は写しの記録版 1fbfa9dda の絵、dev は実ページを 幅 375px・2 倍で撮り、地色を塗っているリンク（a）で切り出した。 Noto Serif JP 200 … 資料請求 1.08 / 来店予約 0.93 ← これを採る Noto Serif JP 300 … 1.19 / 1.03 Noto Serif JP 400 … 1.27 / 1.12 Shippori Mincho 400 … 1.27 / 1.10 BIZ UDPMincho 400 … 1.54 / 1.27 游明朝 700（直す前）… 1.89 / 1.74 文字の大きさ（描かれた画素の外接矩形の割合）は直す前後で変わらない。 変わるのは濃さだけである。 🚨 **必要なのは「電話相談」「資料請求」「来店予約」の 12 字だけ**なので、その字だけの 部分書体（3,572 バイト）を同梱する。Google Fonts の文字指定の API （`css2?family=Noto+Serif+JP:wght@200&text=電話相談資料請求来店予約`）が返す woff2 をそのまま写した。テーマで作り直してはいない。 **ライセンスは SIL Open Font License 1.1**（IBM Plex Sans・Spinnaker・Rubik と同じ）。 当てるのは `.pa-mobile-fixed-cta--legacy .pa-mobile-fixed-cta__label` だけである。 テーマの assets 全体で "Noto Serif JP" を font-family に持つのはその 1 か所なので、 ほかのページはこの woff2 を取りに行かない（上の書体と同じ建て付け）。 `unicode-range` はその 12 字に絞ってあるので、万一ほかの文字へ当たっても この書体は使われない. */ @font-face { font-family: "Noto Serif JP"; src: url("../fonts/NotoSerifJP-ExtraLight-cta.woff2?ver=4ddf1025cba2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; unicode-range: U+4e88, U+5e97, U+6599, U+6765, U+6c42, U+76f8, U+7d04, U+8a71, U+8ac7, U+8acb, U+8cc7, U+96fb; } :root { /* ============================================================== * 1. 素の色（パレット） * 役割を割り当てる前の実値。役割への割り当ては第 2 節で行う。 * ============================================================== */ /* --- 新デザイン --- */ /* _variable.scss の $colorPink。押しボタンの塗りに使う */ --pa-palette-coral: #fd7b7d; /* ビルド後 style.css の --main-color。強調の文字と下線に使う。 実行時の参照が最も多い（var(--main-color) が 67 箇所） */ --pa-palette-red: #f54851; /* ビルド後 style.css の --sub-color */ --pa-palette-blue: #009bd3; /* ビルド後 style.css の --base-color。背景の下地に使う */ --pa-palette-cream: #fff6ec; /* _variable.scss の $colorGreen。差し色 */ --pa-palette-mint: #58d2d6; --pa-palette-mint-light: #eafafb; /* _variable.scss の $colorOrange。副の押しボタン */ --pa-palette-orange: #ffb660; --pa-palette-yellow: #fffa79; /* 移行元 public/assets/css/style.css の .compare-table td.feature の実値 （Bug #1478。#fff3f3 は誤り） */ --pa-palette-pink-light: #fff7f7; --pa-palette-navy: #141b25; --pa-palette-green-bg: #dee7e6; /* --- 旧デザイン --- */ /* 金は移行元に 4 種（#a3762b / #a18046 / #a08046 / #a2803b）あるので #a3762b の 1 つへ寄せた。今も読み込まれる public/css/style.css での 出現数が最多（#a3762b が 7 回、#a08046 が 3 回、#a2803b が 2 回）で、 総数では最多に見える #a18046 は読み込まれない旧版ファイルにしか 出てこないためである。 */ --pa-palette-gold: #a3762b; /* public/css/style.css の a:hover の色 */ --pa-palette-red-legacy: #e1200f; /* --- 両方の世代で使う --- */ /* 本文の黒は移行元に 3 種ある。以前はこれを #474747 の 1 つへ寄せていたが、 3 種は濃さの揺れではなく、使う場所が分かれている。1 つへ寄せると記事の 本文がまるごと移行元と違う色になるため、3 種とも残す（Issue #1622）。 どの色をどこへ割り当てるかは、次のとおり移行元の CSS が決めている。 #000 旧デザインの記事と一覧（成婚ストーリー / お客様の声 / ワード解説 / ニュース / 婚活あるある）が使う。移行元 public/css/common.css の body（28〜35 行）は色を書いていない ので、ブラウザ既定の黒がそのまま出る。本文のリンクも public/css/style.css の a（41〜44 行）で黒である。 #463d3c 体験談が使う。移行元 public/introduce/css/style_introduce_experience.css の .tab （479〜487 行）と .number-list__cont（1009〜1013 行）、および 詳細ページの public/introduce/css/style_experience_details.css。 #474747 新デザインの $colorBlack。移行元 public/assets/scss/_foundation/_variable.scss にあり、トップ ページと新デザインの店舗が使う。 白地に対するコントラスト比は #000 が 21:1、#463d3c が 12.4:1、#474747 が 9.3:1 で、3 種とも WCAG の AAA 基準（7:1）を満たす。 */ --pa-palette-ink: #474747; --pa-palette-ink-legacy: #000; --pa-palette-ink-experience: #463d3c; --pa-palette-white: #fff; /* _variable.scss の $colorGray。罫線に使う */ --pa-palette-gray: #d9d9d9; /* ============================================================== * 2. 役割の色（既定 = legacy-compat プロファイル） * セクションの実装からは、パレットではなくこちらを参照する。 * ============================================================== */ --pa-color-text: var(--pa-palette-ink); /* * `body` に当てる文字色だけを分けて持つ（Task #3609）。 * * 🚨 **`--pa-color-text` とは別にする。**あちらは罫線・飾り・アイコンでも使われて * おり、値を動かすと波及が読み切れない（司令塔の裁定 104 の条件）。 * * 移行元は世代で本文の色を分けている（本番で実測・2026-09-05）。 * * 旧デザインの下層 約 5,400 ページ … `html { color: #000 }` で **黒** * 新デザイン 6 ページ（トップ + 店舗 4 + /guide/course/） … `body { color: #474747 }` * 提携ページ /pa-zexy/ … `html > body { color: #333 }`（dev は未投入・別 Task） * * 🚨 **差が出るのは共通ヘッダーとフッターである。**投入した本文は * `body:not(.pa-profile-new) .entry-content` の塊がすでに黒へ戻しており、 * 実測でも本文の文字色は両側一致していた（成婚ストーリーの 3 画面で差 0 件）。 * 店舗一覧で `#474747` に描かれる文字は 10 要素あり、この直しで **9 要素**が黒に * なる（ヘッダーの案内の「＞」4 個・隠し見出し 1・フッターの見出し・注記・ * 著作権表示ほか 4。移行元はいずれも黒。反映前に dev の実ページで実測）。 * * 🚨 **残る 1 つは `.site-header__page-name` である。**あそこは * `.site-header__tagline, .site-header__page-name { color: var(--pa-color-text) }` * が直に当たっており、受け継ぎではないのでここでは変わらない。移行元は黒なので * 差は残る。**共通ヘッダーの持ち物なので、この Task では触らない**（司令塔へ報告済み）. */ --pa-color-body-text: var(--pa-palette-ink-legacy); --pa-color-bg: var(--pa-palette-white); --pa-color-border: var(--pa-palette-gray); --pa-color-heading: var(--pa-palette-gold); /* 主役の色。見出しの飾り・アイコン・枠線に使う */ --pa-color-accent: var(--pa-palette-gold); /* 強調の文字と下線。赤 2 種は役割が違うので 1 つに寄せずに分けたままにする。 塗り用は --pa-color-button-bg、文字用はこちらである。 */ --pa-color-accent-strong: var(--pa-palette-red-legacy); /* 素のリンクの色（Bug #2649）。既定は旧デザインの値なので、本文色（#474747）で はなく黒（#000）を指す。移行元の旧デザインが読み込む public/css/style.css は `a{color:#000000;…}` を持ち、これはページ全体に当たる。新デザインは下の body.pa-profile-new が本文色へ戻す。 */ --pa-color-link: var(--pa-palette-ink-legacy); --pa-color-link-hover: var(--pa-palette-red-legacy); --pa-color-button-bg: var(--pa-palette-gold); --pa-color-button-text: var(--pa-palette-white); /* 注意書きの囲みの下地 */ --pa-color-notice-bg: #fbf3e0; /* お問い合わせへの導線など、本文から一段浮かせる面の下地 */ --pa-color-surface-muted: #f2f4f7; /* ============================================================== * 3. 文字組み * ============================================================== */ /* 旧デザインの public/css/common.css から写した（Task #3536 で並びを直した）。 🚨 **`body` の 9 書体ではなく、`html>/**[空の注釈]/body` の 3 書体が正しい。** 共通 CSS は `body` に長い並びを書いたあと、「for IE8」と注釈した `html>` と `body` の間に空の注釈を挟むハックで短い並びを書き直している。 要素 2 つぶんの当て先なので `body` に勝ち、**長いほうは 1 度も効いていない** （移行元の本番で `getComputedStyle(document.body).fontFamily` を読んで確認。 `/company/` も `/pa-zexy/` も 3 書体だった）。 🚨 **`sans-serif` を足さない。**3 書体のどれも無い機械でブラウザの既定書体に 落ちるのが移行元の振る舞いであり、そこまで写す（司令塔の裁定 96）. */ --pa-font-family-base: "游ゴシック", YuGothic, "ＭＳ Ｐゴシック"; /* 🚨 **末尾の「ＭＳ 明朝」を落とさない**（Bug #7902）。移行元 `.serif` は 8 書体で、 ここは 7 書体だった。游明朝・ヒラギノ明朝・HG明朝E・ＭＳ Ｐ明朝のどれも無い Windows の機械で、移行元は「ＭＳ 明朝」で描き、dev はブラウザの既定書体に 落ちていた。macOS では先頭の游明朝が当たるので描画は変わらないが、 `getComputedStyle` が返す値が違うため幅 375 の機械の差が 0 にならない. */ --pa-font-family-serif: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* 移行元は明朝の指定を **2 通り** 持つ（Issue #3047）。 1 つは共通 CSS の `.serif`（public/css/common.css の 55 行）で、先頭が 「游明朝」である。これが上の --pa-font-family-serif に当たる。 もう 1 つは会員紹介のページ別 CSS の `.min`（例: introduce/story/css/style_introduce_story.css の 9〜11 行 `html > body .min`）で、 **先頭が「游明朝体」**であり、続きの並びも別物である。 幅 1440px で成婚ストーリーの入口を実測すると、本文の中で先頭が「游明朝体」の 要素が 10 件・「游明朝」の要素が 16 件あり、両方が同時に使われている。 `.serif` の指定でこちらを代用すると、その 10 件が別の書体で描かれる. */ --pa-font-family-serif-min: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; /* 🚨 **移行元の `body { font-size: 13px }` は 1 度も効いていない（Bug #3470）。** 移行元 `public/css/common.css` は `body` のすぐ後ろに IE8 向けの古い書き方を 置いている。 body … font-size: 13px html>[空の注釈]body … font-size: 75% ← IE8 向け `html>` と `body` の間に挟んだ空の注釈は読み飛ばされるので、いまのブラウザは これを `html > body` として読む。 **当たる選択子であり、強さは (0,0,2) で `body` の (0,0,1) に勝つ。**その結果、 移行元が実際に描いている大きさは **16px の 75% ＝ 12px** である （移行元 `/company/release.html` で当たっている規則をブラウザに聞いて確認）。 本文は影響を受けない。移行元は `public/css/style.css` の 1296 行で `#contents { font-size: 13px }` を置いて本文の器で戻しているからである。 **効くのは `#contents` の外側＝共通ヘッダーとフッター**である。 dev で目に見えて変わるのは共通ヘッダーのグローバルナビだけで、その位置は 移行元と小数点以下まで一致する（移行元の写しからヘッダーだけを手元で組んで 実測: 項目の左端 367.88 / 537.89 / 927.89。dev も 12px で同じ値になる）. */ --pa-font-size-base: 12px; /* 本文の柱の字（Bug #3470）。移行元は `public/css/style.css` の 1296 行で `#contents { font-size: 13px }` を置き、**本文の器で 13px に戻している**。 `body` を 12px にしただけだと本文まで縮むので、同じ形で戻す。 dev で `#contents` に当たるのは `main.site-main` である. */ --pa-content-font-size: 13px; /* 節の見出しの基準。移行元 public/assets/css/style.css の .heading-a （3.2rem = 32px）と .heading-a.lg（3.6rem = 36px）の実値である。移行元は html の文字を 10px に固定しているので、rem をそのまま px として読める。 この 2 つは「移行元が .heading-a を当てている見出し」だけの基準である。 移行元は節ごとに別の値を持っており（申し込み導線の帯は 25.2px、比較と選び方は 36px の左寄せ、活動実績は 32px の太さ 600 など）、そうした節の見出しはこの基準を 参照せず、各節の区画で移行元の値を直に持たせる（Issue #1624）。基準へ寄せると 節ごとの違いが消える。見出しを新しく足すときも、まず移行元の実値を調べてから 基準を使うかどうかを決めること。 SP の値は下のメディアクエリで上書きする。 */ --pa-font-size-heading: 32px; --pa-font-size-heading-lg: 36px; /* 新デザインの _reset.scss から。全体 1.5、段落だけ 1.8 である。 ここは新デザインのページ（トップ・新デザインの店舗）とヘッダー・フッターの 基準として 1.8 のまま残す。旧デザインから移行してきた記事の本文だけは、 移行元が PC で 1.5 なので下の「記事本文」の区画で 1.5 へ戻す（Issue #1622）。 */ --pa-line-height-base: 1.5; --pa-line-height-heading: 1.5; --pa-line-height-text: 1.8; /* ============================================================== * 4. 余白の段階 * 新デザインの $space-lg / $space-md / $space-sm（8rem / 6rem / 4rem）を * px に換算した。SP ではそれぞれ半分になる（下のメディアクエリで上書き）。 * ============================================================== */ --pa-space-lg: 80px; --pa-space-md: 60px; --pa-space-sm: 40px; /* ============================================================== * 5. 内側の幅 * 新デザインの _layout.scss の .l-inner-* から写した 4 段階である。 * いずれも 750px 以上では width: 90% + max-width、749px 以下では * 左右に --pa-inner-gutter の padding を置く、という使い方をする。 * 境界は移行元と同じく「750px ちょうどは PC 側」である。 * ============================================================== */ --pa-inner-md: 1528px; --pa-inner-ex: 1120px; --pa-inner-sm: 1000px; --pa-inner-xs: 800px; /* 750px 以上のときの幅の取り方 */ --pa-inner-ratio: 90%; /* 749px 以下のときの左右の余白（移行元の 1.5rem を px に換算） */ --pa-inner-gutter: 15px; /* ============================================================== * 6. ブレークポイント * 移行元の新デザインは min-width: 750px が 158 箇所、max-width: 749px が * 150 箇所で、実質 750px の 1 本である。このテーマもこの 1 本で通す。 * * 【注意】CSS のカスタムプロパティはメディアクエリの条件式では使えない。 * このファイル内のメディアクエリは 750px / 749px を直接書いている。 * 値を変えるときは、このトークンと下のメディアクエリの両方を直すこと。 * このトークンが値の正本である。 * ============================================================== */ --pa-breakpoint-sp: 750px; } /* -------------------------------------------------------------- * new プロファイル（新デザイン）の上書き * body.pa-profile-new のときだけ、役割の色と文字組みを差し替える。 * 余白・内側の幅・ブレークポイントは元々が新デザイン由来なので共通のままとする。 * -------------------------------------------------------------- */ body.pa-profile-new { --pa-color-heading: var(--pa-palette-ink); --pa-color-accent: var(--pa-palette-coral); --pa-color-accent-strong: var(--pa-palette-red); /* 素のリンクの色を本文色へ戻す（Bug #2649）。移行元の新デザインが読み込む public/assets/css/style.css は `a{text-decoration:none;color:inherit}` で、 リンクに固有の色を持たない。body の色（#474747）がそのまま出る。 ここを既定（旧デザインの黒）のままにすると、新デザインのリンクが黒くなって 移行元から離れる。 */ --pa-color-link: var(--pa-color-text); --pa-color-link-hover: var(--pa-palette-red); --pa-color-button-bg: var(--pa-palette-coral); --pa-color-notice-bg: var(--pa-palette-pink-light); --pa-color-surface-muted: var(--pa-palette-cream); /* 🚨 **書体の並びはここに置かない（Task #3536）。**新デザインの見た目を持つのは 7 ページだが、**書体が新デザインになるのは 6 ページ**である （`/pa-zexy/` は見た目が新デザインでも書体は旧デザインの 3 書体。移行元の 本番で実測）。並びは下の `body.pa-legacy-new-font` が持つ. 【申し送り】`/pa-zexy/` は移行元だと body が **12px** で、この塊の 15px とも 食い違う。字の大きさは Bug #3470 の範囲なので、この Task では触っていない. */ --pa-font-size-base: 15px; /* 新デザインは本文も 15px である。移行元の新デザインは旧デザインの `#contents` を持たないので、柱の字は基準と同じ値にする（Bug #3470）. */ --pa-content-font-size: 15px; } /* -------------------------------------------------------------- * 本文の書体の並び（Task #3536） * * 移行元は**画面によって 3 通り**を使い分けている。本番で * `getComputedStyle(document.body).fontFamily` を読んだ値である（2026-09-05）。 * * 一般の下層 5,411 ページ 游ゴシック, YuGothic, ＭＳ Ｐゴシック → :root（上） * トップ + 店舗 4 + guide/course Inter 先頭 → 下の 1 本目 * 成婚ストーリー 上に メイリオ と MS ゴシック が入る長い並び → 下の 2 本目 * * 🚨 **世代の印を兼用しない。**`pa-profile-new`（7 ページ）は `/pa-zexy/` を含むが * あそこの書体は旧デザインで、`pa_is_legacy_new_asset_page()`（5 ページ）は * `/guide/course/` が抜ける。**書体のための印を別に持つ**（inc/design-profile.php）。 * * 游ゴシックが入っている機械ではどの並びでも同じ書体が選ばれる。**差が出るのは * 游ゴシックが無い環境だけ**なので、見た目の比較では見つからない. * -------------------------------------------------------------- */ /* 新デザインの CSS が勝つ 6 ページ（トップ + 店舗 4 + /guide/course/）。 移行元 public/assets/css/style.css の body（`!important` 付き）から写した。 Inter の woff2 はこのファイル冒頭の @font-face で登録してある（Bug #1338）. */ body.pa-legacy-new-font { --pa-font-family-base: "Inter", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; /* * 本文の文字色も、この 6 ページだけ移行元の `#474747` にする（Task #3609）。 * 移行元は新デザインのまとめ CSS が `body { color: #474747 }` を持ち、 * 旧デザインの `html { color: #000 }` に勝つ。**書体と対象のページが同じ** * だったので、印を新しく作らずここへ相乗りさせている. */ --pa-color-body-text: var(--pa-palette-ink); } /* 成婚ストーリー（一覧・全件・分類別・詳細）。移行元は画面専用の introduce/story/css/style_introduce_story.css の 8 行目が `html > body` で 書き直しており、**この画面にだけ メイリオ と MS ゴシック が入る**。 共通 CSS の同じ強さの規則より**あとに読まれる**ので勝つ. */ body.pa-legacy-story-font { --pa-font-family-base: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif; } /* -------------------------------------------------------------- * SP（749px 以下 = 750px 未満）でのトークンの上書き。 * 後続 Task も SP 側のメディアクエリは max-width: 749px で統一すること * （max-width: 750px で書くと、幅 750px でトークンは PC 値・レイアウトは * SP という混在が起きる）。 * -------------------------------------------------------------- */ @media (max-width: 749px) { .front-page { /* 移行元は 749px 以下で html { font-size: 2.5445292621vw } を使う。 * 移行元の rem 指定を写すための 1 単位である。 */ --pa-sp-rem: 2.5445292621vw; } :root { /* 移行元の $space-*-sm。PC のそれぞれ半分である */ --pa-space-lg: 40px; --pa-space-md: 30px; --pa-space-sm: 20px; /* 移行元では 3.6rem も 3.2rem も、SP では揃って 2.2rem に落ちる */ --pa-font-size-heading: 22px; --pa-font-size-heading-lg: 22px; } } /* ============================================================== * ベーススタイル * ============================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--pa-color-bg); /* 世代で分けた文字色（Task #3609）。既定は旧デザインの黒で、新デザインの 6 ページだけが下の `body.pa-legacy-new-font` で `#474747` に戻る. */ color: var(--pa-color-body-text); font-family: var(--pa-font-family-base); font-size: var(--pa-font-size-base); line-height: var(--pa-line-height-base); } /* 🚨 **新資産の店舗 6 店だけ、ページ全体の地色が移行元と違う（Bug #4973）。** 移行元はこの 6 店で `body` に `#f3f7f9`（薄い青みの灰）を敷くが、**dev は白のまま** だった。パンくずの外側の帯は地色も罫線も持たないので（すぐ上の `.pa-breadcrumb__inner` の注釈）、**この白がパンくずの裏として見えていた**。 移行元の実測（本番の CSS の字を読んだ・2026-09-09 15:1x JST）: 全サイト共通の新デザインの CSS（`https://www.p-a.jp/assets/css/style.css`）が `body { background: #fff }`（124 行）を先に置き、**あとで `body { background: #f3f7f9 }` （501 行）で上書きしている**。どちらも当たり先に絞りが無いので、**この CSS を読む ページはすべて `#f3f7f9` になる**。 🚨 **この CSS を読むのは応答型の 8 ページである**（トップ・新資産の店舗 6 店・ `/guide/course/`）。5 ページの HTML を取って `href="/assets/css/style.css"` を 数え、いずれも 1 件だった。**つまりトップと `/guide/course/` も移行元では `#f3f7f9` である。**ただし [Bug #4973](https://github.com/mationinc/wp-platform/issues/4973) の受入基準は 6 店に絞られているので、 **ここでは 6 店だけに当てる**。残る 2 ページは司令塔へ報告して割り振りを待つ。 🚨 **このファイルには `#f3f7f9` が既に 5 か所あるが、どれも区画の面の色で `body` の地色ではない**（トップの店舗一覧の面 `--pa-front-store-bg`・割引の 見出し・体験談の帯）。**トップと `/guide/course/` の `body` は dev ではまだ白である。** 当たり先の絞り方は Bug #5265（携帯幅のヘッダーの罫線）と同じで、 `single-branch` と目印 `pa-legacy-common-css` の否定で新資産 6 店になる （旧デザインの 40 店には目印が付く）。詳細度は (0,2,1) で、すぐ上の `body`（0,0,1）に 勝つ。 🚨 **移行元は 2026-09-08 にパンくずの専用の帯（`div.bread`）そのものをやめた。** 09-03 の写しでは `.bread` が `rgb(246,246,246)` の帯を敷いていたが、いまは帯が HTML からも CSS からも消え、**ページ全体の地色の上にパンくずの字が直に乗る**。 **写しの側の値（246,246,246）へ寄せてはいけない**（9 班が両方を実測して確かめた）. */ body.single-branch:not(.pa-legacy-common-css) { background-color: #f3f7f9; } /* 🚨 **移行元のサイト共通の初期化（`css/common.css`）のうち、根の要素の 2 件を写す（Bug #4942）。** * * | 宣言 | 移行元の出どころ（写し 822eda470） | * |---|---| * | `html { background: #fff }` | パソコン版 `css/common.css` 21〜22 行。**携帯版は持たない**（`sp/css/basic.css` に無い）ので、750px 以上だけに当てる | * | `body { -webkit-text-size-adjust: 100% }` | パソコン版 `css/common.css` 31 行・携帯版 `sp/css/common.css` 1 行目 | * * 🚨 **見た目はほぼ変わらない。**`html` の背景が透明のときは `body` の背景（白）がキャンバスに広がるので、 * もともと白で塗られている。`main.css` を読むページで `body` の背景が白でないのは、`pa-legacy-common-css` の絞りで外れる新資産の店舗だけである * （app ページと広告 LP は `pa-main` を外しているので、この規則は当たらない）。 * ご紹介の入力画面の灰色の地（`form-frame.css` の `html:has(> body > main.pa-form-frame__wrapper--shoukai)`）は * 詳細度 (0,1,3) で、この規則 (0,1,2) に勝つ。 * * 🚨 **`pa-legacy-common-css` で絞る。**移行元で `css/common.css` を読まない 12 ページ * （トップ・新資産の店舗 10 件・コースと料金）は、新デザインの CSS（`/assets/css/style.css`）を読む。 * その初期化は `html` の背景を透明（`#0000`）にし、`body` の `#f3f7f9` がページ全体に広がる。 * 絞らずに `html` を白にすると、上の新資産の店舗で本文より下の空きが白になり、移行元から遠ざかる。 * * 🚨 **同じ初期化の `html { overflow-y: scroll }` は写さない**（統括の判断・2026-10-07・案 b）。 * 縦スクロールバーが場所を取る環境で、`100vw` の要素が約 15px はみ出すおそれがあるためである * （`100vw` を使う宣言は 106 本・`html` と `body` 全体の横の切り落としは無い）。写すかどうかは * ユーザーの判断を待つ。 */ @media (min-width: 750px) { html:has(> body.pa-legacy-common-css) { background-color: #fff; } } body.pa-legacy-common-css { -webkit-text-size-adjust: 100%; } /* 本文の柱の字（Bug #3470）。 * * 移行元は `body` を 12px にしたうえで `#contents { font-size: 13px }` で本文を * 戻す 2 段の作りである。`body` だけを 12px にすると、**共通ヘッダーとフッターの * ほかに本文まで縮む**（実測: 体験談の一覧で 1,121 要素が動いた。節の見出しが * 19.5 → 18px、「もっと見る」が 13 → 12px、先頭へ戻るの器が 70.39 → 69.59px）。 * 移行元と同じく、柱の側で戻す。 * * 🚨 **値をここに直書きしない。**新デザインのページは本文も 15px なので、 * 世代ごとのトークンから読む（直書きすると新デザインの 353 要素が動いた）. */ .site-main { font-size: var(--pa-content-font-size); } h1, h2, h3, h4, h5, h6 { line-height: var(--pa-line-height-heading); } p { line-height: var(--pa-line-height-text); } /* 一覧の点（黒丸・番号）の初期化。 🚨 **これがテーマに無かった。**移行元は共通 CSS でページ全体の一覧から点を 消し、**点を出したい箇所だけ後から `disc` などで戻している**。dev にはこの 初期化が無く、ブラウザの既定の点がそのまま出ていた。ユーザーの目視で 「コンテンツヘッダーメニューに『・』が入っている」と指摘された。 写し元は移行元の `public/css/common.css` の 3 行である。 ol, ul { list-style: none } ol li { list-style: none } ul li { list-style: none } `li` の 2 行は、型（`list-style-type`）が受け継がれるので本来は要らない。 **移行元と同じ形で写す**ため、そのまま 3 つ置く（移行元が後から `li` にだけ 点を戻している箇所があり、そこでの勝ち負けが変わらないようにする）。 🚨 **これまでは 99 か所で個別に消していた。**このファイルの `list-style: none` は、この初期化が無いために 1 か所ずつ足されたものである。 初期化が入れば要らなくなるが、**この PR では消さない**（消すと、初期化より 詳細度の高い規則に隠れていた差が一度に出る恐れがある）。片づけは リファクタリングの別 Issue で行う。 🚨 **点を出す箇所は戻す。**移行元が点を出しているのは 34 通りの選択子で、 そのうち dev のテーマが持つのは次の 2 つである。 - `.ul-list li`（ワード解説。このファイルの 20983 行付近が `list-style: disc inside` を持つので、そのままで戻る） - `.front-page .pa-compare-table ul`（トップの比較表。移行元 `.compare-table ul { list-style: disc }` を写したが、**ブラウザの既定に 頼って `list-style` を書いていなかった**ので、下で明示して戻す。 **`ul` だけでは点は出ない**ので、移行元と同じく `li` の側にも `list-style-type: disc` を置く） コースと料金の比較表は画面別の CSS（`assets/guide-course/css/base.css`）が `ul` と `ul li` の両方に `disc` を持つので、そのままで戻る。 🚨 **点を戻すときは `li` の側にも書く。**`li` は初期化の `ul li { list-style: none }` を自分の宣言として受ける。自分に当たった宣言は 親から受け継ぐ値よりつねに強いため、`ul` だけに `disc` を書いても点は出ない。 検査（`tests-retired/pa-cms-list-style-reset/`）がこの組を見張る. */ ol, ul { list-style: none; } ol li { list-style: none; } ul li { list-style: none; } a { color: var(--pa-color-link); } a:hover { text-decoration: none; } /* 指を乗せたときに色を変えるのは、旧デザインのページだけにする（Bug #2648）。 * * 移行元は新旧 2 世代でデザインが違い、読み込む CSS も別である。旧デザインの * ページが読み込む public/css/style.css は `a:hover{color:#e1200f;…}` を持つが、 * 新デザイン（トップ・店舗 4 件・pa-zexy の 6 ページだけが読み込む * public/assets/css/style.css）は **素の `a:hover` の規則をそもそも持たない**。 * 新デザインで色を変えるのは、部品ごとの `:hover` の指定だけである。 * * テーマは素の `a:hover` で色を変えていたため、部品側の指定を持たないリンクまで * 赤（--pa-palette-red = #f54851）へ変わっていた。新デザインのトップで 17 型 * 27 本・銀座店で 13 型 19 本が、移行元に無い色の変化を起こしていた * （2026-09-01 実測）。ヘッダーの電話番号のように通常時が金色のリンクまで * 赤へ変わるため、単に色を揃えるのではなく宣言そのものを外す必要がある。 * * 絞り込みに `:where()` を使うのは、詳細度を上げないためである。 * `body:not(.pa-profile-new) a:hover` と書くと詳細度が (0,1,1) から (0,2,1) へ * 上がり、パンくずのような (0,2,1) の部品側の `:hover` との勝ち負けが並び順で * 決まってしまう。`:where()` の中身は詳細度に数えないため、この規則は元の * `a:hover` と同じ (0,1,1) のままになり、部品側との関係が変わらない。 * （`:is()` は中身の最大値を取るので、ここでは使えない。） * * 下線を消す指定は上の素の `a:hover` に残す。旧デザインの移行元も持っており、 * 新デザインでは `body.pa-profile-new a`（(0,1,2)）が既に下線を消していて * 詳細度で勝つため、新デザインにとっては働かない宣言になる. */ :where(body:not(.pa-profile-new)) a:hover { color: var(--pa-color-link-hover); } /* 新デザインのページは素のリンクに下線を持たせない（Issue #2609）。 * * 移行元は新旧 2 世代でデザインが違い、読み込む CSS も別である。旧デザインの * ページが読み込む public/css/style.css は * `a{color:#000000;text-decoration:underline}` で下線を持ち、 * `a:hover{color:#e1200f;text-decoration:none}` で指を乗せると下線が消える。 * 新デザイン（トップ・店舗 4 件・pa-zexy の 6 ページだけが読み込む * public/assets/css/style.css）は `a{text-decoration:none;color:inherit}` で、 * そもそも下線を持たず `a:hover` の規則自体が無い。 * * dev はこの 2 世代を body の札（`body.pa-profile-legacy-compat` と * `body.pa-profile-new`）で出し分けているが、素の `a` はどちらの札にも * 属さない共通規則だった。上の a:hover に「指を乗せると下線が消える」を * 足しただけでは、新デザインのページが「通常時は下線あり・指を乗せると * 消える」という移行元のどちらの世代にも無い状態を新しく作ってしまう。 * 新デザインの素の `a` はそもそも下線を持たないため、ここで打ち消して * そろえる. */ body.pa-profile-new a { text-decoration: none; } /* リンクのホバー色変化を 0.5 秒でフェードさせる（Bug #2066）。 * * この 0.5 秒フェードは新デザイン（トップ・店舗 4 件・pa-zexy の 6 ページ * だけが読み込む public/assets/css/style.css 1171 文字目付近）が持つ * `a{text-decoration:none;color:inherit}@media screen and * (min-width:750px){a{transition:all .5s}}` に対応する。旧デザインのページが * 読み込む public/css/style.css はこの指定を持たない。 * * 当初は「移行元の共通 CSS」が全ページに効くと誤認し、対象を素の `a` にして * 全ページへ広げていた（Issue #2609）。ここでは移行元と同じく、新デザインの * ページ（`body.pa-profile-new`）だけに絞る。 * * 幅 749px 以下（スマートフォン幅）はホバー操作が無いため、移行元と同じく * 対象から外す. */ @media (min-width: 750px) { body.pa-profile-new a { transition: all 0.5s; } } /* ヘッダー内のリンクだけ 0 秒に打ち消す（Bug #2066）。 * * 新デザインの CSS（public/assets/css/style.css）は * `#fixHeader a,#fixHeader2 a{transition:all 0s}` を幅で絞らず持っており、 * 上の 0.5 秒フェードをヘッダー内のリンクだけ打ち消している。旧デザインの * ページが読み込む public/css/style.css はそもそも transition の指定を * 持たないため、この打ち消しも持たない。`#fixHeader`（スクロール追従用）と * `#fixHeader2`（通常表示用）は移行元が同じ内容を重複して持っていた 2 本の * マークアップで、dev はこのテーマの単一マークアップ方針（header.php の * docblock参照）により 1 つの `#site-header`（class `.site-header`）に * まとめている。そのため対応する選択子は `.site-header a` になる * （`#fixHeader` `#fixHeader2` という ID は dev に存在しない）。 * * この打ち消しを移植しない場合、新デザインのページのヘッダー内リンクだけ * 移行元は瞬時、dev は 0.5 秒フェードになってしまう。対象はグローバルナビ・ * CTA・補助リンク・引き出しメニュー内のリンクを含む `.site-header` 配下の * すべての `` である。引き出しメニューの開閉ボタン（`.site-header__toggle` * 等）はいずれも `