/* * はじめての方への本文で、テーマの記事本文向けの外余白を打ち消す調整（Bug #2973）。 * * このファイルは手で書く。区画共通の写し（section.css）とページ別の写しは * 写し元を scripts/pa-cms/transform-legacy-page-css.py に通して作り直す生成物 * なので、手で足した調整はこちらへ置く。 * * 【打ち消す対象と出どころ】テーマは本文の器（`.entry-content` / * `.page-content__body`）へ、編集画面で書かれる記事のための縦のリズムを当てて * いる。値は移行元の**記事ページ（婚活コラム・ワード解説）**から採ったもので、 * `assets/css/main.css` の 19205〜19209 行の注釈に出どころが書いてある。 * * --pa-article-block-gap: 50px 移行元 `.content-area .box` の margin-top * --pa-article-paragraph-gap: 25px 移行元 `.grid_box .detail_inner p` の margin-bottom * * この 2 つが、記事型でないこの区画の本文にも乗っている。 * * main.css 19645〜19649 行 `.page-content__body p` * … `margin: 0 0 var(--pa-article-paragraph-gap)` * main.css 19653〜19659 行 `.page-content__body :is(h2, h3, h4, h5, h6)` * … `margin: var(--pa-article-block-gap) 0 20px` * main.css 19718〜19724 行 `.page-content__body :is(ul, ol)` * … `margin: 0 0 var(--pa-article-paragraph-gap)` * * 【移行元は 0 へ戻している】移行元のサイト共通 CSS（記録版 19f499fe3 の * `public/css/common.css`）は、ブロック要素の外余白を初期化してから、ページごとの * CSS で必要な分だけ足す作りである。 * * 76 行 `blockquote, dd, div, dl, dt, h1〜h6, li, ol, p, pre, span, td, th, ul * { margin: 0; padding: 0 }` * 260 行 `h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0 }` * （見出しの初期化の塊は 2 つある。95 行は `font-size: 100%` / * `font-weight: normal` で、後ろのこちらが太字へ戻したうえで外余白を * もう一度 0 にする） * 266 行 `ol, ul { margin: 0; text-align: left }` * 271 行 `dl { margin: 1em }` * 283 行 `dl dd, ol li, ul li { margin-bottom: 0 }` * * 行番号は記録版 19f499fe3 の `public/css/common.css` を読んで確かめた * （2026-09-03）。main.css 19742〜19744 行の注釈と同じ番号である。 * * 【実測（幅 1440px・2026-09-02 にレーン 8 が両側を実ブラウザで採取）】 * * /visitor/ h4.inner_ttl 上の外余白 移行元 0px → dev 50px * h4.sub_title 上の外余白 移行元 0px → dev 50px * ul.menu_concept 下の外余白 移行元 0px → dev 25px * p.txt_gold 下の外余白 移行元 0px → dev 25px * /visitor/method/ p.cach 下の外余白 移行元 0px → dev 25px * .box_gray p 下の外余白 移行元 0px → dev 25px * * 積み上がると、`/visitor/` の本文層が 3,452px → 3,564px（+112px）になる。 * * 【強さの設計】この打ち消しは次の強さになる。`:where()` は強さに数えないので、 * `.page-content__body`（クラス 1 つ）+ 要素 1 つで **(0,1,1)** である。 * * テーマの本文の組み（打ち消したいもの） (0,1,1) main.css の上の 3 本 * この打ち消し (0,1,1) ← 同じ強さ。あとで読むので勝つ * 移行元からの写し（負けたいもの） (0,3,1) 以上 * * **わざと最小の強さにしている。**強くすると、テーマだけでなく移行元からの写しにも * 勝ってしまい、移行元にある余白を消す事故につながる（サービス紹介の Issue #2557 で * 実際に起きた型）。テーマに勝つのに必要なのは「同じ強さ + あとで読む」だけなので、 * それ以上は上げない。 * * 【写しの最小の強さ】写しは生成の段ですべて * `body .pa-page--visitor .page-content__body` を前置されるため、どれも (0,3,1) * 以上である。実際にこの打ち消しの上を通っている値の例を挙げる。 * * section.css 86〜93 行 `… .concept_list .list_inner .inner_ttl` * … `margin-bottom: 30px` が残る（移行元も 30px） * section.css 132〜139 行 `… .sub_title` … `margin-bottom: 30px` が残る（同） * section.css 40〜45 行 `… #visitor dl.visitor_point dd` * … `margin-bottom: 60px` が残る（同） * * 【読む順番】`inc/visitor-page-css.php` が * 区画共通の写し（section.css）→ **この打ち消し** → ページ別の写し → bridge.css * の順で読ませる。テーマの main.css はさらに前なので、同じ強さならこちらが勝つ。 * `/visitor/experienced/` は区画共通の写しを読まないが、**テーマの外余白は全ページに * 乗るのでこの打ち消しは配る**（並びの先頭に入る）。 * * 【`font-size` と `line-height` を書かない理由】サービス紹介の同じ打ち消し * （`assets/service/css/article-reset.css` の 56〜59 行）は、器の基準を移行元の * 13px / normal へ戻している。**この区画では書かない。**移行元のこの区画は本文の器 * （`#visitor` / `.list_inner` 等）へ 16px を自分で当てており、器の基準を 13px へ * 落とす必要が無い。さらに、器の字を 13px にすると `dl { margin: 1em }`（main.css * 19782〜19785 行・[PR #3021](https://github.com/mationinc/wp-platform/pull/3021)）の * 実体が 16px から 13px へ縮み、移行元と一致している「3 つの要点の枠の四方 16px」が * 壊れる。 * * 【`dl` の外余白を触らない理由】上と同じで、`dl` は main.css の 19782〜19785 行が * 移行元と同じ `margin: 1em` へそろえ済みである（PR #3021）。ここで `margin: 0` を * 当てると移行元の 16px を消す。**`:is()` の並びに `dl` を足さないこと。** */ :where(.pa-page--visitor) .page-content__body :is(p, ul, ol, dt, dd) { margin: 0; } :where(.pa-page--visitor) .page-content__body :is(h1, h2, h3, h4, h5, h6) { margin: 0; } /* * 定義の並びの見出し（`dt`）の太さを、移行元と同じ普通へ戻す。 * * 【打ち消す対象】テーマは `assets/css/main.css` の 21153〜21155 行で * `.entry-content dt, .page-content__body dt { font-weight: bold }` を当てている。 * 詳細度は **(0,1,1)** である。 * * 【移行元は普通の太さ】移行元のサイト共通 CSS（記録版 19f499fe3 の * `public/css/common.css`）は、太さを普通へ落とす一覧を 71〜74 行に持つが * （`address, caption, cite, code, dfn, em, th, strong, var`）、**`dt` はこの一覧に * 入っていない。**76〜79 行の初期化も外余白と内余白だけである。つまり移行元の `dt` * はブラウザ既定の普通の太さ（400）で出る。 * * 【移行元で太さを持つ `dt` は 1 か所だけだった】この区画のページ別 CSS 6 本を全数 * 走査したところ、`dt` の太さを書いていたのは * `public/visitor/experienced/css/style.css` の 93〜96 行 * （`.reason dl dt { font-size: 18px; font-weight: 700 }`）だけである。 * 🚨 **その写しは 2026-09-15 に消えた。**他社経験のページを移行しないと決まったため * である（ユーザー決定 D197・Task #6227）。**いまこの区画に、移行元で太い `dt` は * 1 か所も無い。**下の打ち消しは残る 4 ページのすべてに効く. * * （消える前の形の記録: 写しは `assets/visitor/css/experienced.css` の 101〜104 行に * 在り、`body .pa-page--visitor .page-content__body .reason dl dt` で **(0,3,3)** に * なるため、下の打ち消し (0,1,1) には負けなかった。） * * 【実測（幅 1440px・移行元は本番を 2026-09-04 に実ブラウザで採取）】 * 3 ページの 27 件すべてが同じ食い違いだった。 * * /visitor/questions/ #qa .qa_box dl dt 21 件 移行元 400 → dev 700 * /visitor/parents/ .qa_box dl dt 3 件 移行元 400 → dev 700 * /visitor/ #visitor dl.visitor_point dt 3 件 移行元 400 → dev 700 * * 【なぜ今まで見つからなかったか】共通の採取の道具（`exp-collect.mjs`）が記録する * 項目に `font-weight` が無いため、機械の突き合わせには出ない。ユーザーの目視の * 指摘（2026-09-04「Q&A の Q の字が太字だが、移行元は太字ではない」）で分かった。 * * 【強さ】`:where()` は数えないので `.page-content__body`（クラス 1）＋ `dt` * （要素 1）で **(0,1,1)** である。テーマと同じ強さで、`inc/visitor-page-css.php` * が main.css より後にこの 1 本を配るので勝つ。移行元からの写し（(0,3,1) 以上） * には一切勝たない。**ここを上げないこと。**上げると上の `.reason dl dt` の 700 まで * 消す（サービス紹介の Issue #2557 で実際に起きた型）. */ :where(.pa-page--visitor) .page-content__body dt { font-weight: normal; } /* * 中身が画像 1 枚だけの見出しは、1 段強い形でもう一度打ち消す。 * * テーマは婚活コラムのアイキャッチのために、画像 1 枚だけの見出しを狙った規則を * 別に置いている（`main.css` の 19698〜19699 行 * `.page-content__body :is(h2, h3, h4, h5, h6):has(> img:only-child)`）。そこで * 当てている `margin: 0 0 var(--pa-article-paragraph-gap)` の変数は **25px** である。 * * **上の初期化ではこれに届かない。**`:has()` の詳細度は引数の中の最大値を取る。 * `img:only-child` が要素 1 ＋ 擬似クラス 1 なので、テーマの規則は **(0,2,2)** に * なり、上の初期化 (0,1,1) が負ける。 * * 【実害】この 1 本が無いと、写しの規則を持たない画像見出し 10 か所で下の 25px が * 残る（レビューで見つけた。移行元は共通 CSS の `h1〜h6 { margin: 0 }` で 0）。 * * /visitor/method/ .iso_list li h6 ×3 移行元 下 0 * /visitor/method/index0613/ #parents > h3.title ×1 移行元 下 0 * /visitor/method/index0613/ h4.mb20 ×4 移行元 下 20px * /visitor/method/index0613/ h4.mb10 ×1 移行元 下 10px * /visitor/parents/ #parents01 > h4 ×1 移行元 下 0 * * 🚨 **上の表と下の【実害】に出てくる `/visitor/method/index0613/` は、いまは在らない。** * 裁定 164 で転送すると決まり、dev では 404 になった（Bug #3932）。**この規則そのものは * この区画の全ページに要るもの**なので、当時の実害の記録としてそのまま残す。 * * `.mb20` / `.mb10` の写し（`main.css` の 26479 行と 26487 行）は (0,2,0) なので、 * これも `:has()` の (0,2,2) に負けている。この 1 本を入れると写しが通る。 * * 【強さ】`:where()` は数えないので、テーマと同じ **(0,2,2)** である。あとに読む * ので勝つ。移行元からの写し（(0,3,1) 以上）には一切勝たない。 * * 【前例】サービス紹介の `assets/service/css/article-reset.css` が同じ形を持つ * （Issue #2678 の配備検収で実害が出てから足したもの）。テーマ自身にも * `main.css` の `.single-content--recruit … .wrap_movie h2:has(> img:only-child)` * という前例がある. */ :where(.pa-page--visitor) .page-content__body :is(h1, h2, h3, h4, h5, h6):has(> img:only-child) { margin: 0; } /* * 余白のユーティリティは、上の打ち消しに負けないよう 1 段強く戻す。 * * 上の `:has(> img:only-child)` の打ち消しは **(0,2,2)** である。テーマの余白の * ユーティリティ（`main.css` の 26475〜26539 行 `.mb5`〜`.mb85`）は * `:is(.entry-content, .page-content__body) .mbNN` で **(0,2,0)** なので、 * **打ち消しが勝ってしまう。**画像 1 枚だけの見出しがこのクラスを持つ場合、 * 移行元にある余白が消える。 * * 【移行元の値】移行元は `public/css/style.css` の 263〜265 行と 271〜273 行で * `.mb10 { margin-bottom: 10px }` と `.mb20 { margin-bottom: 20px }` を宣言して * いる。素のクラス **(0,1,0)** なので、共通 CSS の `h1〜h6 { margin: 0 }` * **(0,0,1)** に勝ち、見出しでも余白が残る。**dev もこの形にそろえる。** * * 【実害】`/visitor/method/index0613/` の `h4.mb20` ×4 と `h4.mb10` ×1。 * この 5 か所は**この PR より前から間違っていた**（テーマの `:has()` の 25px が * ユーティリティの (0,2,0) に勝っていたため、移行元の 20px / 10px に対して * 25px が出ていた）。上の打ち消しだけを足すと 0px になり、差がむしろ広がる。 * * 【強さ】`.page-content__body`（クラス 1）＋ `.mbNN`（クラス 1）＋ * `:only-child`（クラス 1）＋ `img`（要素 1）で **(0,3,1)** である。上の打ち消し * (0,2,2) に勝つ。写し（同じ (0,3,1) だが**あとに読まれる**）には負ける。 * * 【前例】テーマ自身が同じ手当てを持つ（`main.css` の 31285〜31307 行。本文の * `p` の基底を 0 にしたときにユーティリティが打ち負かされた分を、区画へ絞った * 1 段強い規則で戻している）。ここではその作法に倣い、**実際に画像見出しへ * 付いている 2 種だけ**を戻す（使われていないクラスまで戻すと、移行元に無い * 余白を作る危険がある。`main.css` の 31291〜31296 行が同じ判断をしている）. */ :where(.pa-page--visitor) .page-content__body .mb10:has(> img:only-child) { margin-bottom: 10px; } :where(.pa-page--visitor) .page-content__body .mb20:has(> img:only-child) { margin-bottom: 20px; } /* * 節の題名（`.sectionTitle01`）の下の空きを、移行元の 100px へ戻す。 * * **上の打ち消しが、この 1 か所だけ移行元から遠ざけてしまうため足す。** * * 【移行元】`/visitor/parents/` は共通 CSS のほかに `public/css/page_company.css` * を読み込み（記録版 19f499fe3 の `public/visitor/parents/index.html` で確認）、 * その 27〜31 行が `#contents .sectionTitle01 { margin-bottom: 100px; text-align: * center; color: #aa8546 }` を当てている。上は共通 CSS の初期化で 0 である。 * * 【この写しが無い】この宣言は**はじめての方への写し 6 本のどこにも入っていない** * （写しはページ本体の CSS だけを対象に生成されるため。`grep -c sectionTitle01` * が 6 本すべてで 0）。 * * 【上の打ち消しだけを入れると悪化する】実測（幅 1440px）: * * 打ち消し前 margin = 50px 0px 20px 0px （テーマの記事用の値） * 打ち消し後 margin = 0px 0px 0px 0px （移行元の 100px との差が広がる） * 移行元 上 0 / 下 100px * * 上の 50px が 0 になるのは移行元へ寄る方向だが、下は 20px → 0px で**差が * 80px から 100px へ広がる**。この 1 行でその分を戻す。 * * 【飾りは `bridge.css` にある】文字の寄せ・色・下線などの見た目は、Bug #3008 で * `assets/visitor/css/bridge.css` の「節の題名の飾り」の節へ入れた（移行元 * `public/css/page_company.css` の 27〜38 行の写し）。**ここで戻すのは外余白だけ**である。 * サービス紹介は外余白と飾りを 1 か所にまとめている * （`assets/service/css/article-reset.css` の 502〜516 行。Issue #2678）。 * * **この 1 行をここに残す理由**は、外余白がすぐ上の打ち消しの帳消しであり、 * 飾りの写しとは役割が違うからである。`bridge.css` 側は `margin-bottom` を書いて * いないので、値が 2 か所に散ることはない。 * * 【強さ】`.page-content__body`（クラス 1）＋ `.sectionTitle01`（クラス 1）＋ * 要素 0 で **(0,2,0)** である。上の初期化 (0,1,1) に勝つ。`bridge.css` の飾りの * 写し（(0,3,1)）には負けるが、あちらは `margin-bottom` を持たないので競合しない. */ :where(.pa-page--visitor) .page-content__body .sectionTitle01 { margin-bottom: 100px; }