/* * 移行元のページ専用のスタイルの写し（はじめての方へ 成婚率へのこだわり /visitor/method/）。 * * 写し元: legacy/www.p-a.jp/public/visitor/method/css/style.css * このファイルは手で書かない。写し元を * scripts/pa-cms/transform-legacy-page-css.py に通して作り直す。 * * 写し元をそのまま置けない理由が 2 つある。 * * 1. 写し元は 1 枚で完結した静的ページ用で、根の要素（html / body / *）へ * 余白の初期化と文字の指定を当てている。テーマのヘッダー・フッターへ * その初期化が波及すると崩れるため、すべてのセレクタの前に * `body .pa-page--visitor .page-content__body` を足して本文の中へ閉じ込めている。 * 2. 写し元は根の文字（`html { font-size }`）を触らない。移行元でも * ブラウザ既定の 16px で読まれており、このテーマの根の文字も 16px * 固定である。**両側の基準が同じなので、rem は換算せずそのまま * 書き出している。**換算すると、移行元より寸法が小さくなる。 */ body .pa-page--visitor .page-content__body #visitor { width:100%; } body .pa-page--visitor .page-content__body .service_sub_title { font-size: 23px; color: #a68146; padding: 0 0 20px; letter-spacing: 0.2em; line-height: 2.2; text-align: center; font-weight: normal; } body .pa-page--visitor .page-content__body .sections { padding-bottom: 75px; } body .pa-page--visitor .page-content__body .sections p { letter-spacing: 0.05em !important; line-height: 2.4 !important; font-size: 14px; text-align: left; } body .pa-page--visitor .page-content__body .sections p.aside { padding-top: 10px; font-size: 12px; line-height: 1.8 !important; } body .pa-page--visitor .page-content__body .sections .txt_inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } body .pa-page--visitor .page-content__body .sections .txt_inner .txt_area_l { padding-right: 50px; } body .pa-page--visitor .page-content__body .sections .txt_inner .txt_area_r { padding-left: 50px; } body .pa-page--visitor .page-content__body .sections .sec_inner { width: 900px; margin: 0 auto; } body .pa-page--visitor .page-content__body .sections .sec_inner h3 { padding: 0 0 35px; } body .pa-page--visitor .page-content__body .sections .sec_inner h3, body .pa-page--visitor .page-content__body .sections .sec_inner p.cach { text-align: center; } body .pa-page--visitor .page-content__body .sections .sec_inner .ph { padding: 40px 0; text-align: center; } body .pa-page--visitor .page-content__body .sections .aside_area, body .pa-page--visitor .page-content__body .sections .iso_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; font-size: 12px; padding: 40px 0 0 0; } body .pa-page--visitor .page-content__body .sections .aside_area li { line-height: 2.0; } body .pa-page--visitor .page-content__body .box_gray { background: #f5f5f5; padding: 75px 0; width: 1280px; margin: 0 auto; text-align: center; } body .pa-page--visitor .page-content__body .box_gray p { letter-spacing: 0.2em !important; padding: 0 0 30px; text-align: center; } body .pa-page--visitor .page-content__body .sections h5 { padding: 50px 0 0; text-align: center; } body .pa-page--visitor .page-content__body .sections .iso_list li { position: relative; border:3px solid #a68146; padding: 23px; box-sizing: border-box; width: 288px; margin-top: 42px; border-radius: 20px; } body .pa-page--visitor .page-content__body .sections .iso_list li p { padding: 10px 0 0 0; line-height: 1.8 !important; letter-spacing: 0 !important; font-size: 13.5px; } body .pa-page--visitor .page-content__body .sections .iso_list li .ico { position:absolute; left: 20px; top:-42px; } /* -------------------------------------------------------------- 結婚相談所の選び方（/visitor/method/index0613.html）の直しは取り除いた（Bug #3932） ここには、このページだけに当たる規則が 2 本あった（節の器 `section.clearfix` で絞り、 移行元の字 13px・行送り字なりへ戻すもの。Task #3602）。**取り除いた。** このページは**移行元のどこからも辿り着けない**。ユーザーの判断（裁定 164・ 2026-09-05）で「リプレイス版に実装せず 301 で転送する」と決まり、移行元の URL `/visitor/method/index0613.html` は `/visitor/method/` へ転送される。dev の道すじ `/visitor/method/index0613/` も **404** を返す（2026-09-07 に確認）。**当たる先が 1 つも無くなったので、残しておくと「なぜ在るのか」が読めない規則になる。** 🚨 **`section.clearfix` へ字の規則を書き足さないこと。**この写しは成婚率へのこだわり （`/visitor/method/`）にも配られる。あちらの節の器は `section.sections` なので、 `section.clearfix` に書いても当たらない。検査（33 節）が見張っている. -------------------------------------------------------------- */ /* -------------------------------------------------------------- 成婚率の図を実寸のまま置く（Bug #2979） 移行元は**幅 900px の器へ幅 920px の絵を実寸のまま置き、右へ 20px はみ出させて いる**。dev はテーマの共通指定（`assets/css/main.css` の `img { max-width: 100%; height: auto }`）が当たって器の幅へ縮み、棒グラフと数字がわずかに小さくなっていた。 🚨 **縮めている規則は 1 本だけ**である（読み込まれている全規則をこの `` へ 当て直してブラウザに聞いた。CSS を grep すると「効いていない規則」を犯人にする）。 ## 実測（幅 1440px・2026-09-05 15:51 JST・移行元は本番） | 見たところ | 移行元 | dev（直す前） | |---|---|---| | 図の描画 | **920 x 192** | 899.97 x 187.82 | | 図の実寸 | 920 x 192 | 920 x 192（同じファイル） | | 幅の上限 | **`none`** | `100%` | | 写真の器（`.ph`） | 900 x **282** | 900 x 277.82 | | 器からの右へのはみ出し | **20px** | −0.02px | ## 当たり先を `.ph img` にする理由 このページの `.ph` は 2 つで、もう 1 枚（`sec01_ph02.png`）は **249 x 69** と器より 小さいため、幅の上限を外しても**両側とも実寸のまま変わらない**（実測で確認）。 同じ写しを配るもう 1 ページ（`/visitor/method/index0613/`）は `.ph` を 1 つも 持たない（記録版で確認）。**この記述は過去の記録である。**そのページは裁定 164 で 転送すると決まり、dev では 404 になった（Bug #3932）。 🚨 **携帯幅では図そのものが出ない。**Task #3478 で棒グラフをテキストと飾りへ 組み直したため、幅 749px 以下では `display: none` である（幅 700px と 375px で 実測）。だからこの直しは狭い画面に影響しない. -------------------------------------------------------------- */ body.pa-visitor--method .page-content__body .ph img { max-width: none; } /* -------------------------------------------------------------- 成婚率へのこだわりの区画の見出しの行の高さ（Bug #3808） ## 何を直すのか 見出し（`h3.title`）の箱が移行元より **2px 低い**。中身は絵 1 枚だけで、絵の描画は 両側とも 354x75 で一致しているのに、箱だけが 118px 対 120px になる。 🚨 **中身が絵だけでも、箱の高さは行の「字の大きさ」と「行送り」で決まる。**絵は行の 中に置かれ、下に文字の下がり分の空きができるためである。 ## 移行元は「継承」でこの値になっている 移行元には、この見出しの字の大きさ・行送りを決める規則が **1 本も当たっていない** （読み込まれている全規則を照合して 0 件）。器から受け継いでいる。 記録版 1fbfa9dda の public/visitor/css/style.css 5〜12 行 #visitor { font-size: 16px; line-height: 200%; } → 32px に決まってから伝わる dev 側にも同じ器の規則が `assets/visitor/css/section.css` に入っているが、テーマが 見出しを**直に指す**ので継承が負ける。当たっているのは次の 2 本である（ブラウザに 聞いて確かめた。CSS を grep すると効いていない規則を犯人にする）。 assets/css/main.css .page-content__body :is(h2…h6) { line-height: var(--pa-line-height-heading) } assets/css/main.css .page-content__body h3 { font-size: var(--pa-article-h3-size) } ## 実測（幅 1440px・2026-09-05 17:40 JST・移行元は本番） | 見るところ | 移行元 | dev | |---|---|---| | 見出しの箱 | **900 x 120** | 900 x 118 | | 字の大きさ | **16px** | 22px | | 行送り | **32px** | 33px | | 字間 | **normal** | 1.1px | | 色 | **rgb(0, 0, 0)** | rgb(163, 118, 43) | | 中の絵の描画 | 354 x 75 | 354 x 75（一致） | | 下の内余白 / 外余白 | 35px / 40px | 35px / 40px（一致） | 2px は箱の中で吸収されず、**下の要素がまるごと 2px 上へずれる**（次の段落 `p.cach` の下がりが 160px 対 158px、写真の器 `div.ph` が 260.4px 対 258.4px）。 ## 🚨 当たり先を器まで絞る理由 結婚相談所の選び方（`/visitor/method/index0613.html`）は、このページと**同じ CSS を 読み、本体の目印も同じ `pa-visitor--method`** だった。しかもあちらの見出しは両側とも 字 13px・行送り normal で**すでに一致していた**。`body.pa-visitor--method … h3.title` と広く書くと、合っているページを 13px から 16px へ壊す。あちらの見出しは `section#parents.clearfix` の直下にあり `.sections .sec_inner` を持たないので、器まで 含めれば当たらない。 **この記述は過去の記録である。**そのページは裁定 164 で転送すると決まり、dev では 404 になった（Bug #3932）。**それでも器まで絞る書き方は変えない。**広く書き直すと、 同じ写しを読む画面が将来増えたときに同じ壊し方をする。 ## 字間と色も移行元へそろえる 絵だけの見出しでは、字間と色は箱の寸法を変えない（当てた場合と当てない場合の両方で 測り、どちらも 120px だった）。それでも**移行元にそろえる原則**に従って書く。同じ形の 直しが `questions.css` の 206 行と `experienced.css` の 198 行に先例としてある. -------------------------------------------------------------- */ body.pa-visitor--method .page-content__body .sections .sec_inner h3.title { color: #000; font-size: 16px; letter-spacing: normal; line-height: 32px; } /* * 幅 750〜1,279px で、灰色の囲みを本文の柱の中へ収める（Bug #4094・裁定 223）。 * * ## なぜ変えるか * * ユーザーの判断（2026-09-06・裁定 223）で「**1,280px を本サイトの基本対応幅とし、 * 750〜1,279px は移行元の横スクロールを写さず画面幅に収める**」と決まった。 * 意図的変更の台帳の「本サイトの対応幅の区分」の行に書いてある。 * * [Task #4067](https://github.com/mationinc/wp-platform/issues/4067) が * はじめての方への 6 画面で本文の部品を柱へ収めたが、**この画面だけ 3 部品が残った**。 * その 3 部品がこの囲みと、その中の 2 つである。 * * ## 直すのは 1 か所（中の 2 つは幅を受け継ぐだけ） * * 柱（1,100px）より広い部品を数えると 3 件出るが、**幅を決めているのは囲みだけ**である。 * `p.serif` と `div.btn` は囲みの中の段の要素なので、囲みの幅をそのまま受け継ぐ。 * * div.box_gray 1,280px すぐ上の素の規則の `width: 1280px`（ここが原因） * p.serif 1,280px 囲みの子として受け継ぐ * div.btn 1,280px 囲みの子として受け継ぐ * * ## 実測（2026-09-06 23:2x・配信中の写しの中身を差し替えて採取） * * 🚨 **`bridge.css` も [Task #4067](https://github.com/mationinc/wp-platform/issues/4067) * の姿へ差し替えて測った。**あちらは main に入ったが配信の便がまだなので、土台を * そろえないと #4067 の分の変化まで「この直しで動いた」と読んでしまう。 * * 幅 柱より広い部品 ページの広がり 横に送れる量 * 750 3 → 0 1280 → 1200 530 → 450 * 1050 3 → 0 1280 → 1200 230 → 150 * 1279 3 → 0 1280 → 1279 1 → 0 * 1280 / 1440 0 → 0 変わらない 0 → 0 * * **幅 1,279px では横に送れる量が 0 になる**（柱が 1,279px まで広がるため）。 * 750 / 1,050px で 1,200px が残るのは共通ヘッダーの上段の床で、15 班の別 Task が扱う。 * * ## 高さ・内余白・地の色・寄せは動かない（実測で確かめた） * * 幅の直しが高さを道連れにする型を * [Task #4067](https://github.com/mationinc/wp-platform/issues/4067) で 2 件踏んだので、 * ここでは 4 つの幅で全部測った。**どれも直す前と同じ**である。 * * 高さ 326.78px ／ 内余白 75px 0px ／ 地の色 rgb(245, 245, 245) ／ 寄せ center * * 中の段落の高さも 106.78px で変わらない（幅が縮んでも文字の折り返しが増えない）。 * * ## 書き方 * * `min(1280px, 100%)` は、柱が 1,280px より広いときは移行元と同じ 1,280px を保ち、 * 狭いときだけ柱に合わせる。**幅の境目をもう 1 つ増やさずに 2 通りの姿を出せる。** * * 🚨 **`box-sizing` は触らない。**素の内余白は `75px 0` で左右が 0 なので、外形と * 中身の幅は一致する。`border-box` へ変える必要が無いうえ、変えると上下の内余白 * 150px が高さに取り込まれて器が縮む（画面内ナビで同じ型を実際に踏んだ）。 * * 🚨 **携帯幅には掛からない。**この写しは `inc/visitor-page-css.php` が * `(min-width: 750px)` で配るので 749px 以下では読まれないが、**読み手が範囲を * 取り違えないよう `min-width: 750px` を明示して書く**。実測でも 375px は * 2 画面 × 8 項目で差 0 件だった。 */ @media (min-width: 750px) and (max-width: 1279px) { body .pa-page--visitor .page-content__body .box_gray { width: min(1280px, 100%); } }