/* * はじめての方へ（`/visitor/`）の携帯幅の見た目（Task #3243）。 * * この 1 本は幅の条件を付けずに配られる（`inc/visitor-page-css.php`）。区画の写し 6 本は * 750px 以上へ配られるので、そこへ混ぜると携帯幅で 1 度も配られない。 * * 移行元は携帯の名乗りに対して `https://www.p-a.jp/sp/visitor/...` へ転送し、**そこは * パソコン版とは別に書かれたページ**である。この 1 本は、そのスマホ版に姿を合わせる * 直しだけを持つ。対象のページは直しごとに違う（下の見出しに書く）。 * * 🚨 **他社経験（`/visitor/experienced/`）はこの写しの対象ではない。**ユーザー決定 D197 * （2026-09-14）で**このページを移行しない**と決まり、専用の第 18 節・画面内ナビ・ * 画像をまとめて外した（Task #6227）。**この写しが受け持つのは 4 ページである。** * * 🚨 **第 18 節は欠番である。**他社経験だけの節だったので外した。**番号は詰めない** * （ほかの節の説明や Issue が「第 N 節」で参照するため、詰めると指し先がずれる）. * * --- * * # 1. 入口の導入の囲み（`/visitor/` の 1 ページ） * * 塊そのものは `inc/visitor-sp-intro.php` が本文へ差し込む。ここはその見た目だけを持つ。 * * ## 写し元 * * 移行元スマホ版 `public/sp/visitor/css/style.css` の 30〜67 行と、共通の * `public/sp/css/style.css` の 19〜21 行。 * * .bg_gray { background: url(../images/bg_gray.jpg) repeat; padding: 20px 6.25% } * .bg_gray h3.main_read2 { margin-bottom: 20px; font-size: 19px; line-height: 140%; * text-align: center; font-weight: bold } * .list_visitor { margin-bottom: 20px } * .list_visitor li { margin-bottom: 10px } * .tac { text-align: center } * * ## 実測（幅 375px・移行元は本番を 2026-09-04 04:41 JST に取得） * * 囲み 375 x 452.92px 内余白 上下 20px / 左右 23.44px（= 6.25%） * 見出し 328.13 x 53.19px 字 19px 太さ 700 行送り 26.6px 下の外余白 20px * 問いかけの一文 328.13 x 26px 字 13px 太さ 400 行送り 26px 下の外余白 20px * 3 項目の器 328.13 x 68.66px * 3 項目の各行 328.13 x 15.64px 下の外余白 10px * 写真 328.13 x 205.08px * * 🚨 **左右の内余白は割合のまま写す。固定値へ丸めない**（320 / 375 / 414 / 749px の * 4 幅で確かめる型）。ただし**書き方は `%` ではなく `vw` にする**。移行元の `6.25%` の * 基準は親（`#sp_wrap` = 画面幅）だが、dev の親は携帯幅で 345px しかないためである * （理由の詳細は下の `.pa-visitor-sp-intro` の注釈）。上下の 20px は移行元も固定値である。 * * ## 3 項目は「印は絵・文字はテキスト」で組む * * 移行元スマホ版の `list_01〜03.png`（566 x 27〜29px）は**赤いチェックの印と黒い明朝の * 文字を 1 枚に焼き込んでいる**。大原則 3 に従って文字はテキストで出し、**印だけを * 切り出した `list_check.png`（23 x 18px）を背景**に置く。 * * `list_check.png` は移行元スマホ版の `sp/visitor/images/list_01.png` から、印の部分 * （左上 0,5 の 23 x 18px）を切り出したものである。切り出しの道具は * `_c1-top-gap-tools/w8-sec/crop-f7-mark.mjs`（git 管理外）。**元の 3 枚は文字を * テキストへ起こしたので使わず、テーマ資産へは持ち込んでいない。** * * 各行の高さ 15.64px は、移行元が 566px の絵を器の幅（328.13px）へ縮めた結果である * （328.13 / 566 = 0.58 倍。27px x 0.58 = 15.66px）。**テキストで組むと行の高さは字で * 決まる**ため、同じ 15.64px にはならない。ここは移行元の絵の縮小に合わせるのではなく、 * **読める大きさ（13px・移行元スマホ版の本文と同じ）**にする。絵のままだと 0.58 倍に * 縮んで読みにくいのが直す動機なので、縮小率をなぞる意味が無い。 * * ## パソコン幅は 1px も変えない * * 差し込んだ塊は 750px 以上で隠し、移行元パソコン版の 1 枚（`.image_box`）を出す。 * 携帯幅ではその逆にする。**この 1 本は幅の条件を自分で持つ**ので、 * `inc/visitor-page-css.php` の `(min-width: 750px)` では配れない（あちらはパソコン幅 * だけへ配る仕組みである）。読み込みは同ファイルが `media` を付けずに行う。 */ /* * ## 🚨 詳細度を上げてある理由 * * テーマは `main.css` の 21786〜21789 行で * `.page-content__body p { margin: 0 0 var(--pa-article-paragraph-gap); line-height: * var(--pa-line-height-text) }` を当てている。**これは (0,1,1) で、クラス 1 つだけの * 規則 (0,1,0) に勝つ。**最初にクラス 1 つで書いたところ、行送りが 19px x 1.4 = 26.6px の * つもりが **19px x 1.8 = 34.2px** になり、見出しが 2 行のはずが 4 行へ折り返した * （実測で気づいた。宣言を書いただけでは効かない型）。 * * そこで **`.page-content__body` を前置きして (0,2,0) 以上**にしてある。 * 移行元からの写し（(0,3,1) 以上）には勝たない。 */ /* 携帯幅だけに出す塊。既定では隠しておき、下の `@media` で出す。 **既定を「隠す」にしておくのは、幅の条件が効かない環境で パソコン版の 1 枚と二重に出ないようにするため**である. */ .pa-visitor-sp-intro { display: none; } @media (max-width: 749px) { /* * 移行元スマホ版の `.bg_gray`。灰色の地は 4x4px の絵を敷き詰める。 * * 🚨 **画面の幅いっぱいへ広げる。**移行元スマホ版はこの囲みを `#sp_wrap`（幅 375px）の * 直下に置くので、幅 375px で **375px** になる。dev の本文の器は携帯幅で 345px * （左右に 15px の余白がある）なので、そのままでは 30px 狭い。 * `assets/css/section-fullwidth.css` と同じ `calc(50% - 50vw)` の手で器の柱を外す。 * * 🚨 **内余白は `%` ではなく `vw` で書く。**移行元は `padding: 20px 6.25%` だが、 * **`padding` の百分率は「親の内容の幅」が基準**である。移行元の親（`#sp_wrap`）は * 375px なので 23.44px になるが、dev の親（`.page-content__body`）は携帯幅で 345px * なので 21.56px になり、**中身の幅が 3.75px 広くなる**（実測で気づいた。 * 移行元 328.13px 対 331.88px）。 * 移行元の親は画面の幅そのものなので、**`6.25vw` が移行元の 6.25% と同じ値**になる. */ .page-content__body .pa-visitor-sp-intro { display: block; width: 100vw; margin-inline: calc(50% - 50vw); padding: 20px 6.25vw; background: url(../../sp/visitor/images/bg_gray.jpg?ver=504d3ca66a70) repeat; } /* 移行元スマホ版の `h3.main_read2.serif`。見出しの役割だが、dev では本文の 見出しの階層を崩さないよう `p` で出している（テーマの見出しの既定を 受けないぶん、必要な値をここで全部書く）。 🚨 **当たり先に `.pa-visitor-sp-intro` と `p` を足してある。**この塊は `p` なので、 同じ携帯幅の `body:is(.pa-visitor--top, …) .page-content__body p { line-height: 2 }` （`assets/css/main.css`・移行元 `sp/visitor/css/style.css` 7 行の `#sp_wrap p` の写し） に当たる。**当たり先の強さは (0,2,2) 対 (0,2,0) であちらが勝つ**ので、 ここに `line-height: 140%` と書いてあっても **19px x 2 = 38px が効いていた** （高さ 53.19px のはずが 76px・Bug #6193）。`.pa-visitor-sp-intro p…` にすると (0,3,1) になって勝つ。**共通の側は弱めない**（裁定 222 と同じ扱い）. */ .page-content__body .pa-visitor-sp-intro p.pa-visitor-sp-intro__lead { margin: 0 0 20px; color: #000; font-family: var(--pa-font-family-serif); font-size: 19px; font-weight: bold; line-height: 140%; text-align: center; } /* 移行元スマホ版の `p.tac.serif.mb20`。 🚨 **ここも当たり先を上げてある。**上の冒頭の 1 行と同じ理由である。 この塊の行送り 26px は、共通の `line-height: 2` が 13px に掛かった値と **たまたま同じ 26px** になるので画面には差が出ていなかったが、 **当たり先としては負けていた**。共通の側の値が変われば黙って崩れるので、 冒頭の 1 行と揃えて勝つようにする. */ .page-content__body .pa-visitor-sp-intro p.pa-visitor-sp-intro__ask { margin: 0 0 20px; color: #000; font-family: var(--pa-font-family-serif); font-size: 13px; line-height: 26px; text-align: center; } /* 移行元スマホ版の `ul.list_visitor`. */ .page-content__body .pa-visitor-sp-intro__list { margin: 0 0 20px; padding: 0; list-style: none; } /* * 各行。印は絵、文字はテキスト。印は 23x18px を等倍で左に置き、文字がその右へ * 来るように左の内余白を取る。 * * 【字の大きさと行送りの決め方】移行元スマホ版のこの行は絵（566x27〜29px）なので、 * **CSS の字の大きさが存在しない**。そこで**絵に焼き込まれた文字を測って、表示される * 大きさを求めた**（3 枚とも同じ値に揃った）。 * * 絵 墨（文字）の幅 文字数 1 文字あたり（絵の中） 器 328.13px での表示 * list_01.png 528px 21 25.14px 14.58px * list_02.png 385px 15 25.67px 14.88px * list_03.png 449px 18 24.94px 14.46px * * 3 枚の平均は **14.64px** なので、幅 375px での字の大きさは **14.6px** に当たる。 * * 🚨 **13px にしてはいけない。**移行元スマホ版の本文が 13px なのでそこに合わせたく * なるが、この行は本文ではなく絵で、**実測すると 14.6px 相当**である。 * * 🚨 **画素で固定してはいけない（Bug #4521）。**移行元は絵なので、**高さも字も飾りも * 幅に比例して縮む**。375px で測った画素のまま置くと、幅 320px で**1 行目が折り返し、 * 器が 61.53px のはずが 98.28px へ跳ね上がる**（移行元は 320px で 375px より**低く** * なるので、差の向きまで逆になる）。そこで **高さは行ごとの縦横比**（`aspect-ratio`）で、 * **字・行送り・飾り・字下げは `vw`**（375px の画素 x 100/375）で書く。 * * 行 絵の高さ 縦横比 幅 375px の高さ 幅 320px の高さ * 1 行目 27px 566 / 27 15.65px 13.36px * 2 行目 29px 566 / 29 16.81px 14.35px * 3 行目 28px 566 / 28 16.23px 13.85px * * 🚨 **字と行送りだけを `vw` にしても足りない。**字下げ（21.45px）と印（13.33 x 10.43px）を * 画素で残すと、幅 320px で**文字の入る場所が足りず 2 行になる** * （器 280px − 字下げ 21.45px = 258.55px 対 必要な 261.63px）。**4 つとも `vw` にする。** */ /* * 【印の寸法と字下げも絵から測る】印と文字の位置関係は、絵の中の座標を器の幅へ * 縮めた値にする（縮小率 328.13 / 566 = 0.5797）。 * * 印（枠 + チェック） 絵の中 23 x 18px・左端 x=0 → 表示 13.33 x 10.43px * 文字の左端 絵の中 x=37 → 表示 21.45px * * 🚨 **字下げを目分量で 31px にすると 1 行目が折り返す。**この行は移行元でも * ぎりぎり 1 行に収まっており（墨の幅 306.1px + 字下げ 21.45px = 327.5px 対 * 器 328.13px）、字下げを 10px 広げると入らない（実測で 2 行になった）。 */ /* * 【字の太さ】移行元の絵の字は太い明朝である（Bug #10024・事業部の指摘「フォントが違う」）。 * 絵を表示の寸法（328.13px 幅）に縮めて、字の部分（印より右）の墨の量を数え、同じ字を * 14.6px で描いたものと比べた（2026-10-09・手元のブラウザ・3 行とも）。 * * 太さ 游明朝 ヒラギノ明朝 * 400 0.69〜0.72 0.69〜0.71 （絵を 1 とした墨の量） * 600 0.83〜0.86 0.98〜1.01 * 700 0.95〜1.00 0.98〜1.01 * * 700 が両方の書体で絵に合う。太字でも字の幅はほぼ変わらず、1 行目は幅 320・375・390・ * 430 のどれでも 1 行に収まる（字の幅 375 で 306.0px 対 器 306.7px）。記録は * `pa-verify-assets/A2/10024-はじめての方への3行の太さ-1009/`. */ .page-content__body .pa-visitor-sp-intro__list li { margin: 0 0 10px; padding: 0 0 0 5.72vw; background: url(../../sp/visitor/images/list_check.png?ver=c8ea5ae49b2a) no-repeat 0 50% / 3.5547vw 2.7813vw; color: #000; font-family: var(--pa-font-family-serif); font-size: 3.8933vw; font-weight: 700; line-height: 4.1733vw; text-align: left; } /* * 行の高さは絵の縦横比で決める。3 枚とも高さが違う（27 / 29 / 28px）ので、 * 行ごとに分けて書く。 * * 🚨 **`vw` の高さにはしない。**`aspect-ratio` なら、この先だれかが器の幅の上限を * 足しても縦横比が崩れない（よくあるご質問の画面内ナビで踏んだ・Bug #4522）。 * 🚨 **`aspect-ratio` は中身の最小の高さに負ける。**字が 2 行になると比率より高く * なるので、上の字下げと飾りの `vw` 化とセットでないと効かない。 */ .page-content__body .pa-visitor-sp-intro__list li:nth-child(1) { aspect-ratio: 566 / 27; } .page-content__body .pa-visitor-sp-intro__list li:nth-child(2) { aspect-ratio: 566 / 29; } .page-content__body .pa-visitor-sp-intro__list li:nth-child(3) { aspect-ratio: 566 / 28; } .page-content__body .pa-visitor-sp-intro__list li:last-child { margin-bottom: 0; } /* 囲みの最後の写真。移行元スマホ版は器の幅いっぱいに置く. */ .page-content__body .pa-visitor-sp-intro__photo { margin: 20px 0 0; } .page-content__body .pa-visitor-sp-intro__photo img { display: block; width: 100%; height: auto; } /* 移行元パソコン版の 1 枚（焼き込みの絵）は、携帯幅では出さない。 **消さずに隠す**のは、投入した本文へ手を入れない流儀に合わせるためである. */ :where(.pa-page--visitor) .page-content__body .image_box { display: none; } } /* -------------------------------------------------------------- # 2. 区画メニューを携帯幅で出さない（この区画の 4 ページ） ユーザーの目視の指摘（2026-09-04 12:0x） 「コンテンツヘッダーのナビゲーションは移行元スマホ版には無い」への直しである。 移行元スマホ版は、区画メニュー（`ul.category_menu`）を **1 ページも持たない** （移行元の写しの `public/sp/` 配下 = 0 本。本番も 2026-09-04 11:56〜12:1x JST に 携帯の名乗りで 4 ページを取得して確認した）。 🚨 **他社経験も持たない**（2026-09-07 に 5 ページ目として確認・Bug #4132）。この ページが持つのは同じページの中の見出しへ飛ぶ画面内ナビ（`p.anchor_menu` ＋ `ul.anchor_menu`）で、**区画メニューとは別物**である。以前は 2 つを同じものとして 数え、「移行元も区画メニューを描いている」と誤って書いていた。dev の側には画面内 ナビの要素が無いので、ここで隠しても消えるものは無い（差し込みは Bug #4150）。 ところが投入は本文にこのつまみを取り込むので、**dev は携帯幅でもパソコン版の絵の つまみを出してしまう**。つまみの絵はパソコン版の寸法（`menu01_off.gif` = 140×49px ほか）なので携帯幅の器（345px）に収まらず、**2 行に折り返す** （実測: `ul.category_menu` が 345×106px。入口・成婚率・Q&A の 3 ページで同じ）。 🚨 **当てる範囲を `:where(.pa-page--visitor)` で絞る。**本文の中の `.category_menu` は会員紹介・会社情報など他の区画にも出るため、広く当てるとそれらの携帯幅まで同時に 変わる（横断 Task #3343 は「区分ごとに担当班が自分の区画へ当てる」と決めている）。 `:where()` は詳細度を上げないので、この行の強さは `.pa-page--visitor .page-content__body ul.category_menu` と同じ (0,2,1) になる。 同じ形の直しは入会案内（Task #3346・`main.css` の末尾）と地域一覧（Task #3348）で 先に入っている。書き方をそろえてある。 **パソコン幅は 1px も変わらない**（この節は 749px 以下に閉じている。陰性対照を実測）。 -------------------------------------------------------------- */ @media (max-width: 749px) { :where(.pa-page--visitor) .page-content__body ul.category_menu { display: none; } } /* -------------------------------------------------------------- # 3. 題名の帯を移行元スマホ版の姿にする（この区画の 4 ページ） 移行元スマホ版は、ページごとに**別の絵**を**画面幅の割合**で中央に置く。 dev はパソコン版の 1 枚（1268x170）を器の幅いっぱいへ広げているので、 **文字がつぶれて読めない**（実測 345x55.17px）。 ## 絵の差し替えは CSS の `content` で行う（`` を使わない） はじめは共通の仕組み（`inc/sp-image-swap.php`）で `` を `` に包む形を 試した。**やめた理由は、包みを足すだけでパソコン幅が変わったからである。** 親御さまへの帯が **96px から 98px へ 2px 高くなった**（同じ道具で包む場合と包まない 場合を測って確定。`display: contents` / `line-height: 0` / `source { display: none }` のどれでも消えなかった。手元に同じ形を組んでも再現しないので、実ページ固有の 組み合わせで起きている）。 携帯幅の直しがパソコン幅を変えるのは受け入れられない（この 4 ページのパソコン幅は ユーザーの目視で合格済み・V04）。そこで **CSS の `content` で絵だけを差し替える**。 - 置き換えるのは絵の中身だけで、**要素も属性も HTML に触らない** - 規則はすべて `@media (max-width: 749px)` の中なので、**パソコン幅には 1 行も 効かない**（構造上そうなる。実測でも確かめる） - `alt` の文言がそのまま残るので、見出しの読み上げが消えない （絵を隠して背景画像にすると、この文言が失われる） この手はこのリポジトリで既に使われている（移行元の写しは差し替えの一部を CSS の `content` で行っている）。 ここは幅・余白・差し替える絵を持つ。 ## 移行元の指定（本番を 2026-09-04 11:56〜12:1x JST に取得して実測） | ページ | 移行元の指定 | 375px での幅 | 実測の幅 | 絵の実寸 | 実測の高さ | |------------|----------------------------|-------------|---------|---------|-----------| | 入口 | `width: 79.8%` | 299.25 | 299.25 | 512x81 | 47.33 | | 成婚率 | `width: 67%` | 251.25 | 251.25 | 440x86 | 49.09 | | Q&A | `width: 29.687%` | 111.33 | 111.31 | 161x89 | 61.53 | | 親御さまへ | `width: 29.687%` | 111.33 | 111.31 | 226x89 | 43.83 | 4 ページとも `margin: 0 auto 20px` で、**違うのは幅だけ**である （`sp/visitor/css/style.css` 12〜15 行ほか 3 本）。高さは絵の縦横比から決まる （移行元スマホ版は `img` に `width: 100%; height: auto` を全体でかけている）。 🚨 **縮小率がページごとに違うように見えるのは、絵の実寸が違うからである。** 0.49〜0.69 でばらつくが、規則は「幅は割合・高さは縦横比」の 1 つに収束する。 🚨 **`%` ではなく `vw` で書く。**移行元のこの割合は `#sp_wrap`（= 画面の幅 375px） が基準だが、dev の親（`.page-content__body`）は携帯幅で 345px しかない。 `79.8%` と書くと 275.31px になり **23.94px 狭くなる**。`vw` なら移行元と同じ値になる。 🚨 **下の余白 20px を一緒に写す。**dev は 18px で、区画メニューを隠したあとも 2px 狭いままだった（実測）。ここで移行元の値へそろえる。 幅は 4 ページで違うので、区画で共通の目印（`.pa-page--visitor`）では書き分けられない。 `inc/visitor-page-css.php` がページごとの目印（`.pa-visitor--<名前>`）を足す. -------------------------------------------------------------- */ @media (max-width: 749px) { /* * 🚨 **内余白と枠線も 0 にする。**dev の帯は `padding-bottom: 10px` と * 下の枠線 2px を持っており、絵より 12px 高くなっていた（実測）。移行元スマホ版の * 帯は内余白 0・枠線なしで、**高さは絵とぴったり同じ**である（本番で計算後の値を確認）。 */ /* * 🚨 **この節は `:where()` を使わない。**テーマは `main.css` に * `.page-content__body :is(h2,…):has(> img:only-child) { margin: 0 0 25px; padding: 0; * border: 0; background: none }` を持っており、**`:has()` の詳細度は中身の最大値** * なので (0,2,2) になる。`:where(.pa-page--visitor) … .main_ttl` は (0,2,1) で負け、 * **左右の `auto` が 0 に上書きされて中央寄せが外れていた**（実測 x=15・移行元 37.88）。 * * 🚨 この負けは**絵の差し替えを `` から `content` に変えた時点で現れた**。 * 包みがある間は `img:only-child` に一致しなかったため、同じ CSS で問題が出ていなかった。 * **当たっている規則はブラウザに聞く**（probe-f7-zones.mjs の `--why`）。 */ .pa-page--visitor .page-content__body .main_ttl { margin: 0 auto 20px; padding: 0; border: 0; } /* * 🚨 **絵を行の中から出す。**移行元スマホ版は `img` を `display: block` にしている * （本番で計算後の値を確認）。dev は行の中に置いたままなので、**行の箱が作る * 下の余りで帯が 21px 高くなる**（実測: 帯 68.33px 対 絵 47.33px。移行元は差 0px）。 * その 21px はこの下の全部を押し下げるので、宣言だけ見ていても気づけない。 * * `width: 100%` も置く。差し替える絵は実寸がページごとに違う（161〜512px）ので、 * 実寸のままだと帯の幅に収まらない・余るのどちらも起きる。移行元スマホ版も * `img` に `width: 100%; height: auto` を全体でかけている. */ .pa-page--visitor .page-content__body .main_ttl img { display: block; width: 100%; height: auto; } /* * ページごとの幅と、差し替える絵。 * * 🚨 **入口・成婚率・Q&A の 3 ページは、dev では同じパソコン版の絵 * （`/images/visitor/main_ttl.jpg`）を出している。**移行元スマホ版はこの 3 つに * 別々の絵を持つので、**絵のパスで対象を決める仕組みでは書き分けられない**。 * ページごとの目印で分ける必要があるのはこのためである。 * * 🚨 **親御さまへの絵（`/images/course/main_ttl.png`）はコースと料金のページと * 共有している。**絵のパスで一律に差し替えると、担当外の画面まで変わる. */ .pa-visitor--top .page-content__body .main_ttl { width: 79.8vw; } .pa-visitor--top .page-content__body .main_ttl img { content: url(../../sp/visitor/images/main_ttl.png?ver=23978c64cfef); } .pa-visitor--method .page-content__body .main_ttl { width: 67vw; } .pa-visitor--method .page-content__body .main_ttl img { content: url(../../sp/visitor/method/images/main_ttl.png?ver=21257bc25840); } /* * 🚨 **移行元の 45px のうち 20px は写さない（大原則 5・意図的変更の台帳）。** * 移行元の HTML は `
` の直後に**全角の空白（U+3000）を 1 文字**残して * おり、詰められない字なので行の箱が 1 つでき、**20.00px** 帯を押し下げている * （バイト列で確認: `0x0a 0x20 0x20 0x3000 0x3c`。同じ作りの親御さまへには無く、 * そちらは 25.00 でぴたり合う）。**移行元の書き間違いなので写さない。** * 先例は Bug #4724 / PR #4735（Quality Of Life の下の帯・17.59px）である。 * * 残る 25px は下の第 31 節で**器の上の内余白**として写す。ここには置かない。 */ .pa-visitor--questions .page-content__body .main_ttl { width: 29.687vw; } .pa-visitor--questions .page-content__body .main_ttl img { content: url(../../sp/visitor/questions/images/main_ttl.gif?ver=3879e1170943); } /* * 帯の幅だけをここで決める。**上の 25px はここに置かない**（下の注記）。 * * 🚨 **上の第 3 節の既定（`.pa-page--visitor … .main_ttl { margin: 0 auto 20px }`）は * はじめての方へ配下の全ページに当たる。**ページごとに値が違うので、 * **既定へ足さずページの印で絞る**. */ .pa-visitor--parents .page-content__body .main_ttl { width: 29.687vw; } .pa-visitor--parents .page-content__body .main_ttl img { content: url(../../sp/visitor/parents/images/main_ttl.gif?ver=7eb6106fdef7); } /* -------------------------------------------------------------- # 3b. 題名の帯の文言をテキストで出す（Task #5301・5 ページ） 移行元はパソコン版が 5 ページとも上位の区分の帯を流用し、**移行元スマホ版だけ ページごとに別の絵**を持つ。焼き込まれた文言も別である（5 枚とも絵を開いて 画素で読んだ・2026-09-09）。全体原則（画像に焼き込まれた文言は「背景を画像 または CSS で描き、文言はテキストで置く」）に沿ってテキストにする。 **この 5 枚は文字と赤い短い罫線だけなので、背景の絵を使わず CSS だけで描ける。** 文言を足すのは `inc/visitor-sp-title-text.php` である。 ## 値の出どころ **移行元スマホ版の絵を画素で測った**（道具は `pa-verify-assets/f8-visitor-5301/` の `measure-ink.py`。地は最頻色・墨は地から遠い画素・墨の在る行を続きの塊に分ける）。 字の大きさと字送りは、**dev の実ページで組んだ帯を写真に撮り、同じ道具で測って** 絵の墨に合わせ込んだ（`shoot-title.mjs` と `突き合わせる.py`）。 🚨 **両側を同じ道具で測る。**箱の座標や書体の指標から計算すると、行送りの半端の 扱いで両側の定義がずれる。 ## 🚨 絵は消さず、テキストを持つ題名だけ隠す `` は移行元パソコン版と同じ要素で、**パソコン幅ではその絵が題名そのもの**である。 隠す規則は `:has(.pa-visitor-sp-title)` で絞る。**テキストを持たない題名の絵は 隠れない**ので、この区画の他のページや、将来足された画面が黙って崩れない。 🚨 **`/visitor/method/index0613/` は dev に無い**（実測 2026-09-09。`/…/index0613/` は 404・移行元の `/…/index0613.html` は 301 で `/visitor/method/` へ。裁定 164 で 「実装せず転送する」と決まった）。文言を足す一覧にも鍵を置いていない （`inc/visitor-sp-title-text.php`）。 ## 🚨 帯の高さは絵の比で持つ 絵を隠すと高さが潰れ、**下に続く中身がまるごと上へ動く。**絵は `width: 100%; height: auto` で描かれていたので、`aspect-ratio` に原寸の比を 置いて同じ高さにする。`box-sizing: content-box` が要る（テーマは全体を `border-box` にしており、そのままだと内余白のぶん帯が痩せる）。 ## 罫線の色と位置 色は **`#f10000`**。🚨 **3px の帯の外側 1 行は地と混ざった中間色**なので、帯の 主な色をそのまま採ると薄い色（`#f99999` 等）を拾う。いちばん濃い 1 行から採った。 入口の絵（PNG）だけ `#f50000` と読めるが、赤の 4/255 の差で、GIF の 4 枚と同じ色を 別の形式で保存したものと見て `#f10000` にそろえた。 🚨 **罫線は中央ではない。**4 枚はほぼ中央（ずれ 1.5 原寸px 以内）だが、 **他社経験だけ右へ 11.5 原寸px（画面で 5.26px）ずれている。**絵の側の作りなので そのまま写す。だから 5 ページとも `margin-left` を実測値で置き、`auto` にしない。 **パソコン幅は 1px も変わらない**（この節はすべて 749px 以下に閉じている）。 -------------------------------------------------------------- */ /* * 4 ページ共通の土台。**幅・高さ・色・位置はページごとに置く**（同じ強さの規則を * 後ろに重ねて上書きする形にすると、並べ替えたときに黙って負ける）。 * * 🚨 **`display: flow-root` を素の `block` に戻さないこと。**いちばん上の行の * `margin-top` が負になり得るので、素の `block` だとその負の値が器の `margin-top` * へ吸い上げられ（外余白の相殺）、帯ごと上へ動く。 * * 🚨 **書体は明朝を名指しする。**題名の器（`h2.main_ttl`）が受け継ぐのは * テーマのゴシック（`游ゴシック, YuGothic, ＭＳ Ｐゴシック`）で、実測で確かめた。 * 名指ししないと絵と別の書体になる。 * * 🚨 **実際に描かれるのは `--pa-font-family-serif` の並びの 4 番目 * `Hiragino Mincho ProN` である。**1〜3 番目はどれも当たらない * （実測 2026-09-10・幅 1440px・dev の `/visitor/parents/`）。 * * 1 游明朝 送り幅 608px … 無い * 2 YuMincho 送り幅 608px … 無い * 3 ヒラギノ明朝 ProN W3 送り幅 608px … 無い * 4 Hiragino Mincho ProN 送り幅 604.48px … **在る** * 5 HG明朝E 送り幅 608px … 無い * 6 ＭＳ Ｐ明朝 送り幅 608px … 無い * （等幅の控えだけ） 送り幅 608px * * 608px は**等幅の控えだけのときと同じ値**である。つまりその候補は 1 文字も * 描いていない。**`ヒラギノ明朝 ProN W3` という和名混じりの名前では当たらない** * （当たるのは `Hiragino Mincho ProN`）。 * * 🚨 **この注釈は 2026-09-10 に訂正した。**もとは「2 番目の `YuMincho` が使われる * （当たらない書体名との差で見分けた）」と書いていたが、**その見分け方では 2 番目と * 4 番目を区別できない。**どちらの並びでも「当たらない名前だけ」より狭い送り幅に * なるので、**先頭が当たらないことしか分からない。** * * 🚨 **正しい見分け方: 候補を 1 つだけにし、等幅を控えに置いて送り幅を測る。** * 等幅だけのときと同じ値なら、その候補は無い。 * * const 札 = document.createElement('span'); * 札.style.cssText = 'position:absolute;left:-9999px;font-size:32px;white-space:nowrap;'; * 札.textContent = '友人のようにサポートするコンシェルジュ'; * document.body.appendChild(札); * const 測る = (並び) => { 札.style.fontFamily = 並び; return 札.getBoundingClientRect().width; }; * const 等幅だけ = 測る('monospace'); * 測る('"游明朝", monospace') === 等幅だけ; // true → 游明朝は無い * * 🚨 **`document.fonts.check()` では判らない。**候補 6 つすべてに `true` を返した * （「使えるか」を返すため、読み込んでいない書体でも `true` になる）。 */ .pa-page--visitor .page-content__body .main_ttl .pa-visitor-sp-title { display: flow-root; color: #000000; font-family: var(--pa-font-family-serif); font-weight: normal; font-style: normal; line-height: 1; text-align: center; } /* 行はどれも 1 行に収める。移行元は 1 枚の絵なので折り返しが起きない. */ .pa-page--visitor .page-content__body .main_ttl :is(.pa-visitor-sp-title__en, .pa-visitor-sp-title__ja) { display: block; white-space: nowrap; } /* * 🚨 **テキストを持つ題名の絵だけを隠す。**`:has()` で絞ることで、移行元スマホ版に * 相手が無い `/visitor/method/index0613/`（目印が成婚率と同じ）が動かない. */ .pa-page--visitor .page-content__body .main_ttl:has(.pa-visitor-sp-title) img { display: none; } /* 罫線の骨格だけを持つ。幅・高さ・位置はページごとに置く. */ .pa-page--visitor .page-content__body .main_ttl .pa-visitor-sp-title__rule { display: block; background-color: #f10000; } /* --- 入口（`/visitor/`）--- */ .pa-visitor--top .page-content__body .main_ttl:has(.pa-visitor-sp-title) { aspect-ratio: 512 / 81; height: auto; box-sizing: content-box; } .pa-visitor--top .page-content__body .main_ttl .pa-visitor-sp-title__ja { font-size: 7.0667vw; letter-spacing: -0.04em; margin-right: 0.04em; margin-top: 0.0vw; } .pa-visitor--top .page-content__body .main_ttl .pa-visitor-sp-title__small { font-size: 5.3333vw; letter-spacing: 0; font-feature-settings: "palt" 1; } .pa-visitor--top .page-content__body .main_ttl .pa-visitor-sp-title__rule { margin-top: 5.2453vw; margin-left: 36.6267vw; width: 6.2347vw; height: 0.312vw; } /* --- 成婚率（`/visitor/method/`）--- */ .pa-visitor--method .page-content__body .main_ttl:has(.pa-visitor-sp-title) { aspect-ratio: 440 / 86; height: auto; box-sizing: content-box; } .pa-visitor--method .page-content__body .main_ttl .pa-visitor-sp-title__ja { font-size: 6.6667vw; letter-spacing: 0.055em; margin-right: -0.055em; margin-top: 0.1893vw; padding-left: 1.0667vw; } .pa-visitor--method .page-content__body .main_ttl .pa-visitor-sp-title__rule { margin-top: 5.7813vw; margin-left: 30.1493vw; width: 6.0907vw; height: 0.5333vw; } /* --- 親御さま（`/visitor/parents/`）--- */ .pa-visitor--parents .page-content__body .main_ttl:has(.pa-visitor-sp-title) { aspect-ratio: 226 / 89; height: auto; box-sizing: content-box; } .pa-visitor--parents .page-content__body .main_ttl .pa-visitor-sp-title__ja { font-size: 6.2267vw; letter-spacing: -0.06em; margin-right: 0.06em; margin-top: 0.656vw; } .pa-visitor--parents .page-content__body .main_ttl .pa-visitor-sp-title__rule { margin-top: 4.5067vw; margin-left: 12.3493vw; width: 5.2533vw; height: 0.2667vw; } /* --- QA（`/visitor/questions/`）--- */ .pa-visitor--questions .page-content__body .main_ttl:has(.pa-visitor-sp-title) { aspect-ratio: 161 / 89; height: auto; box-sizing: content-box; } .pa-visitor--questions .page-content__body .main_ttl .pa-visitor-sp-title__en { font-size: 8.7467vw; letter-spacing: 0.075em; margin-right: -0.075em; margin-top: 0.9413vw; } .pa-visitor--questions .page-content__body .main_ttl .pa-visitor-sp-title__rule { margin-top: 6.4373vw; margin-left: 11.432vw; width: 7.376vw; height: 0.552vw; } } /* -------------------------------------------------------------- # 3c. パソコン幅では、3b で足したテキストの方を隠す（Bug #5378） 足した `` は本文（`the_content`）に入るので、 **幅に関わらず HTML に在る**。この `sp.css` は幅の条件を付けずに配られる （`inc/visitor-page-css.php`）ので、**パソコン幅でも読み込まれる**。ここで隠さないと、 題名の絵のうしろに明朝の黒い文字がそのまま出る（2026-09-09 に 5 ページとも出ていた）。 🚨 **この節だけは 749px の外に置く。**上の 3b はすべて `@media (max-width: 749px)` の 中に閉じているが、**パソコン幅で隠すことは携帯幅の規則では書けない。** 🚨 **3b の中へ入れてはいけない。**`@media (max-width: 749px)` の中に `@media (min-width: 750px)` を入れ子にすると、**どの幅でも当たらない**（両方を同時に 満たす幅が無い）。書いても何も起きないので、目で見ても気づけない。 境目の 750px は、この区画のページ別 CSS を配る条件（`inc/visitor-page-css.php` の `PA_VISITOR_PAGE_CSS_MEDIA`）と同じ値にそろえてある。 🚨 **`check-mobile-only.py` はこの型を見つけられない。**あの道具は「携帯幅の直しが パソコン幅へ漏れていないか」を見るので、**パソコン幅に必要な指定が無いこと**は 漏れ 0 件として通る。だから検査（`tests-retired/pa-cms-visitor-sp/run-visitor-sp.php`）の側で 「パソコン幅で隠れている」を見張る。 -------------------------------------------------------------- */ @media (min-width: 750px) { .pa-page--visitor .page-content__body .main_ttl .pa-visitor-sp-title { display: none; } } /* -------------------------------------------------------------- # 4. 本文の器を移行元スマホ版の 2 段構えにする（この区画の 4 ページ） ユーザーの目視の指摘「UI デザイン・レイアウトが移行元スマホ版と違う」 （2026-09-04 12:0x）の骨格の部分である。 ## 移行元スマホ版の器の作り（本番を 2026-09-04 13:0x JST に 4 ページ実測） 区画は**画面の幅いっぱい（375px）の帯**で、**中身は内側へ 6.25% 寄せて 328.13px** になる。この 2 段が全ページで一貫している。 | ページ | 幅いっぱいの帯 | 中身の幅（深さ 3） | |------------|---------------|-------------------| | 入口 | 導入・ご案内・入会資格 | 328.13px | | 成婚率 | 節ぜんたい | 328.13px | | Q&A | 見出し・飛び先・5 つの節 | 328.13px（27 件） | | 親御さまへ | 見出し・4 つの節 | 328.13px（10 件） | dev は一律 345px（画面幅から左右 15px を引いた値）で、**帯の地色や罫線が画面の端まで 届かず、中身は逆に 16.87px 広い**。 ## 直し方 本文の器の直下の区画を、**幅いっぱいの帯 + 内側 6.25vw の内余白**にする。 これで中身が 328.13px になり、移行元と同じ 2 段になる。 🚨 **`%` ではなく `vw` を使う。**内余白の百分率は「親の内容の幅」が基準なので、 親が 345px の dev では 21.56px になり、移行元の 23.44px と合わない （`padding` の百分率の基準を取り違える型）。 🚨 **除く区画がある。**次の 5 つは帯にしてはいけない。 - 題名の帯（`.main_ttl`）… 移行元は絵の実寸で中央寄せ（上の 3 を参照） - 導入の囲み（`.pa-visitor-sp-intro`）… 自分で幅いっぱいと内余白を持つ - 誘導帯（`.pa-conv-band`）… すでに移行元と一致している（375x399.72） - 先頭へ戻る（`.page_topArea`）… 移行元は器を持たない（下の 5 を参照） - 区画メニュー（`.category_menu`）… 携帯幅では隠している（上の 2 を参照） -------------------------------------------------------------- */ @media (max-width: 749px) { :where(.pa-page--visitor) .page-content__body > :not(.main_ttl, .pa-visitor-sp-intro, .pa-conv-band, .page_topArea, .category_menu) { box-sizing: border-box; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 6.25vw; } /* * 帯の中の定義リストの左右の外余白を外す。 * * テーマは `main.css` で `.page-content__body dl { margin: 1em }` を当てており、 * 携帯幅の字（15px）では**左右 15px**になる。上の帯で中身を 328.13px にしても、 * この 15px が両側から食って **298.13px** に縮んでいた（実測）。 * 移行元スマホ版の同じ位置（`section.point` 3 件）は 328.13px で左右の外余白は 0 である。 * * 🚨 **この 1 本だけ `:where()` を使わない。**テーマの規則が (0,1,1) で、 * `:where()` を付けると同じ強さになり**読み込む順だけで勝つ形**になる。 * 順序に頼らずに勝たせるため、区画の目印をそのまま書いて (0,2,1) にしている。 * * 上下の外余白（1em = 15px）はそのまま残す。移行元は 3 つの節を 20px ずつ空けており、 * dev は 1 つのリストで組んでいるので、上下は節の間隔として別に見る（下の 6 を参照）. */ .pa-page--visitor .page-content__body dl { margin-inline: 0; } } /* -------------------------------------------------------------- # 5. 先頭へ戻るの器を外す（この区画の 4 ページ） 移行元スマホ版は `p.page_top` を **44.53x50.39px** で置くだけで、器を持たない （4 ページとも同じ値。本番を 2026-09-04 13:0x JST に実測）。 dev は `div.page_topArea` **345x80.39px** で包んでおり、**器の幅が画面いっぱい近くまで 広がり、高さも 30px 多い**。中の `p.page_top` は 44.53x50.39px で移行元と一致している ので、直すのは器だけである。 -------------------------------------------------------------- */ @media (max-width: 749px) { /* * 🚨 **`width: auto` では消えない。**器は block なので親の幅いっぱい（345px）に * 広がったままだった（実測で気づいた）。`display: contents` で**箱そのものを * 作らせない**。中の `p.page_top` が本文の器の直接の子と同じ扱いになり、 * 移行元と同じ「器を持たない」姿になる. */ :where(.pa-page--visitor) .page-content__body .page_topArea { display: contents; } } /* -------------------------------------------------------------- # 6. 成婚率の灰色の囲みを幅いっぱいにする（`/visitor/method/` の 1 ページ） 移行元スマホ版はこの囲みを**画面の幅いっぱい（375px）**に置き、中身を内側へ 6.3% 寄せる （本番を 2026-09-04 13:0x JST に実測: `div.box_gray` 375x224.86px・中身 327.75px）。 dev は本文の中の柱（`div.sec_inner` の隣）に置いており **328.13px** で、 **灰色の地が画面の端まで届かない**。 🚨 **上の 4（器の 2 段構え）では直らない。**あの規則は本文の器の**直下**だけを帯にする。 この囲みは `section#visitor` の中にあり、1 段深いので当たらない （実測して気づいた。帯の規則を書いただけでは届かない型）。 内余白は 6.3vw にする。上の帯は 6.25vw だが、**移行元はこの囲みだけ 6.3% を使っている** （中身 327.75px = 375 - 23.625 x 2）。入会資格の囲みも同じ 6.3% だった。 移行元の値をそのまま写す。 -------------------------------------------------------------- */ @media (max-width: 749px) { /* * 🚨 **地色を一緒に書く。**移行元スマホ版の宣言は * `sp/visitor/method/css/style.css:65-69` の * `.box_gray { background:#f5f5f5; margin:0 auto; padding:6.3% }` である。 * dev で `#f5f5f5` を書いているのは `assets/visitor/css/method.css:88-94` だけで、 * その 1 本は `(min-width: 750px)` でしか配られない * （`inc/visitor-page-css.php` の `PA_VISITOR_PAGE_CSS_MEDIA`）。 * ここに書かないと**携帯幅で地色が透明のまま**になり、幅いっぱいへ広げたぶん * 白い帯が画面の端から端まで伸びる（実測: 移行元 `rgb(245, 245, 245)` 対 * dev `rgba(0, 0, 0, 0)`）。**外形だけを突き合わせると出ない差である。** * * 🚨 **内余白は四辺とも割合で書く。**移行元の宣言は `padding: 6.3%` の 1 本で、 * **`padding` の百分率は上下も「親の内容の幅」が基準**である。上下を 375px での * 実測値 23.63px に丸めると、ほかの幅でずれる（320px で囲みの高さが +6.94px、 * 414px で −4.9px）。移行元の親は画面の幅そのものなので `6.3vw` が同じ値になる。 * * 375px での中身は次の 3 段で、合計 224.86px になる。 * * 内余白 上 23.63 ＋ 段落 121.44（絵 101.44 ＋ 下の内余白 20） * ＋ 押しボタン 56.17 ＋ 内余白 下 23.63 = 224.87 */ :where(.pa-page--visitor) .page-content__body .box_gray { box-sizing: border-box; width: 100vw; margin-inline: calc(50% - 50vw); padding: 6.3vw; background: #f5f5f5; } /* * 囲みの中の文言。**移行元スマホ版はこれを絵に焼き込んでいる** * （`sp/visitor/method/images/concept_btn_txt.png` 840x260px を幅 327.75px で表示。 * 本番の絵と写しの絵は同一だった）。 * * 大原則 3 に従って**文言はテキストのまま**にし、絵から測った文字組みへ寄せる * （司令塔の裁定・2026-09-04）。 * * ## 絵の実測（`_c1-top-gap-tools/w8-sec/probe-f7-lines.mjs` で墨の帯を測った） * * 行数 4 行 * 行送り 74.67px（画素）→ 表示 **29.13px** * 行の高さ 33〜34px（画素）→ 表示 13.27px * 墨の幅 317.22 / 318 / 325.41 / 170.9px（表示） * 墨の左端 0〜1.95px（表示）→ 左寄せ * 墨の色 **#231815**（2,654 画素で最多。日本語の印刷で使う黒） * 字の大きさ **15px**（下の「どう決めたか」を読むこと） * * ## 🚨🚨 字の大きさは割り算では出せない（Bug #4341 で 14.9px から直した） * * もとの注記は、**絵の幅 840 画素を 1 行の字数で割って 1 字あたりの大きさを出し**、 * 表示 14.9px と書いていた。**その割り算は「1 行が 22 字」を前提にしているが、 * 上に書き起こした 1 行目は 21 字である。**前提が食い違っているので、割り算からは * 正しい値が出ない。 * * **折り返しの位置から決める。**絵と同じ 21 / 22 / 22 / 12 字になる値を探した。 * * 1 行目 2 行目 3 行目 4 行目 * 絵 21 字 22 字 22 字 12 字 * dev（14.9px） 22 字 22 字 22 字 11 字 ← 食い違う * dev（**15px**） 21 字 22 字 22 字 12 字 ← 一致 * * **21/22/22/12 になるのは 15px だけである。**14.9〜15.6px を 0.1px 刻みで振って * 実ページで数えた（`pa-verify-assets/f7-visitor-0907/probe-method-concept-size.mjs`）。 * * 14.9px 22/22/22/11 15.1〜15.2px 21/21/22/13 * **15px 21/22/22/12** 15.3〜15.6px 21/21/21/14 * * 🚨🚨 **墨の幅は絵と dev で同じ測り方をすること。**上の 21/22/22/12 は「字を * 数えた」もので、両側とも同じ数え方である。**画素で測った墨は、絵と dev の写真を * 同じやり方で比べる**（`compare-method-concept.py` と `perline-method-concept.py`）。 * 器の中の文字の範囲の幅（`Range.getBoundingClientRect()`）と、写真の中の墨の幅は * **別のものを測っている**ので、片方を絵の値と並べてはいけない。 * * 15px にしたときの画素の突き合わせ（絵 対 dev）: * * 墨の高さ全体 100px 対 100px（差 0） * 行のずれ 0 / 29 / 58 / 87 対 0 / 29 / 58 / 88（差は 4 行目の 1px だけ） * 行ごとの幅の差 -10 / +3 / -9 / -8px * 墨の左端 0 対 2px ／ 墨の右端 327 対 325px * * 🚨 **15px より大きい値（15.1〜15.6px）はすべて 21/21/2x/1x になり合わない。** * * 絵の中の文言（**目で見て書き起こした**。`alt` は当てにならないという記録があるが、 * この絵では一致していた）: * * 1 行目 私たちはどこよりも高い成婚結果を目指してき * 2 行目 ました。「理想の相手を見つけ出す」、そのため * 3 行目 に辿り着いた答えが、《想像を超える成婚コンシ * 4 行目 ェルジュサービス》です。 * * 🚨 **字間（`letter-spacing`）は入れない。**移行元の 3 行目は墨 325.41px で器 * 327.75px にほぼ埋まっており、正の字間を足すと折り返しが 1 行増える * （記録: 20 件中 20 → 17 件に悪化した実例がある）. */ /* * 🚨 **行の箱の余りを上下で打ち消す。** * * 絵は墨の高さ（101.44px）がそのまま箱の高さになるが、**テキストは行の箱で決まる** * ので 4 行 x 29.13px = 116.52px になる。差の 15.08px は「行の高さ 29.13 − 字の高さ * 13.27 = 15.86」が**1 行目の上と 4 行目の下に半分ずつ**付くぶんである。 * * これを打ち消さないと、**囲みが 15px 高くなり、文字も 8px 下がる**（絵と見比べると * ずれて見える）。上を 7.93px 詰め、下は移行元の段落の下の内余白 20px から同じだけ * 引いて 12.07px にする。 * * 🚨 **画素で固定してはいけない（Bug #4572）。**移行元は文章も絵なので、**器が縮むと * 高さも比例して縮む**。ここを 375px の画素のまま置くと、幅 320px で**折り返しが * 1 行増え、囲みが移行元より 43.21px 高くなる**（移行元 194.81 対 dev 238.02）。 * 字と行送りと「行の箱の余り」を `vw` にする（375px の画素 x 100/375）。 * * 字 15px → 4vw * 行送り 29.13px → 7.768vw * 余りの半分 7.54px → 2.0107vw * * 🚨 **余りの半分は 7.93px ではなく 7.54px である（この Bug で直した）。**もとの * 7.93px は「行送り 29.13 − 字の高さ 13.27 = 15.86」の半分だったが、**打ち消したい * 余りは「4 行の箱 116.52 − 絵の高さ 101.44 = 15.08」**で、その半分は 7.54px である。 * 0.39px の食い違いが、幅 375px で囲みを 0.80px 低くしていた（幅に比例するので * 749px では 1.58px になる）。**7.54px にすると 320 / 375px の両方で移行元と一致する。** * * 🚨🚨 **下の外余白をまるごと `vw` にしてはいけない。**この値は「**画素の 20px** * （移行元の `.box_gray p { padding: 0 0 20px }`）**から、幅に比例する余りの半分を * 引いた残り**」である。2 つの決まり方が混ざっているので `calc()` の引き算で書く。 * `3.2187vw` と書くと 320px で 10.30px になり、**9.7px 足りなくなる**。 * * 🚨 **折り返しは 21/22/22/12 字のまま保たれる**（字と器が同じ割合で縮むため）。 * 上の「15px だけが一致する」は**幅 375px での話**で、`vw` にすると比が固定される。 * 実測でも 320 / 360 / 375 / 414 / 749px すべてで 4 行だった. */ :where(.pa-page--visitor) .page-content__body .box_gray .serif { margin: -2.0107vw 0 calc(20px - 2.0107vw); color: #231815; font-size: 4vw; line-height: 7.768vw; text-align: left; } /* * 🚨 **パソコン版の改行を携帯幅では効かせない。** * * dev の本文は投入元（移行元パソコン版）の組みなので、1 文目の直後に `
` が * 入っている。**移行元スマホ版の絵にはその位置の改行が無く**、22 字ずつ流し込んで * 4 行になる。改行を残すと、字の大きさをそろえても行の切れ目が必ず食い違う。 * * 本文そのものは書き換えず、携帯幅だけ改行を効かせない形にする * （投入をやり直しても戻らない）. */ :where(.pa-page--visitor) .page-content__body .box_gray .serif br { display: none; } /* * 囲みの押しボタンの絵。 * * 🚨 **移行元は同じ相対パスに、パソコン版とスマホ版で別の絵を置いている** * （`visitor/method/images/sec01_btn.png` が **425x60**、 * `sp/visitor/method/images/sec01_btn.png` が **840x144**）。投入はパソコン版だけを * 取り込むので、dev は携帯幅でも縦横比の違う絵を出していた * （幅 327.75px での高さが 46.27px 対 移行元 56.16px）。Task #3284 の型である。 * * 差し替えは題名の帯と同じく CSS の `content` で行う（`` で包むと * パソコン幅の行の高さが変わる例があるため。#3284 のコメント参照）。 * * 絵を行の中から出す。移行元の `a` は 327.75x56.17px で、行の箱の余りを持たない. */ :where(.pa-page--visitor) .page-content__body .box_gray .btn :is(a, img) { display: block; } :where(.pa-page--visitor) .page-content__body .box_gray .btn img { width: 100%; height: auto; content: url(../../sp/visitor/method/images/sec01_btn.png?ver=788e320b3797); } } /* -------------------------------------------------------------- # 7. 題名が 2 回出るのを止める（この区画の 4 ページ） 🚨 **この差は数字の比較では出ず、並べ撮りを目で見て初めて分かった。** 区画の対応（`section#visitor` ↔ `section#parents`）は取れていたが、 **その中の子を 1 つずつ突き合わせていなかった**ためである。 ## 何が起きていたか 移行元スマホ版は題名を**帯だけ**で出す（`h2.category_ttl` の絵 `sp/visitor/method/images/main_ttl.png` = 「成婚率へのこだわり」＋赤い短線）。 本文の柱（`div.sp_wrap_body`）の中身は 4 つで、**題名の絵をもう 1 枚持たない**。 h3 328.13x365.84 絵 sec01_ph01.png（キャッチ＋棒グラフ） p 328.13x226.69 本文 div.ph.mt30 328.13x86.39 絵 sec01_ph02.png div.aside_area 328.13x242 注記 dev は移行元パソコン版の組みなので、この前に `h3.title`（絵 `title.gif` 354x75px・ 「成婚率へのこだわり」）を出す。**帯と合わせて題名が画面に 2 回出ていた。** ## なぜ「隠す」でよいのか（大原則 3 との関係） 大原則 3 は「移行元が画像に焼き込んだ文言は、背景＋テキストで再現する」である。 ここで隠すのは**移行元スマホ版が持たない dev 側だけの要素**であり、焼き込みの 置き換えではないので大原則 3 に触れない（司令塔の裁定・2026-09-04）。 同じ文言は帯の絵に残るので、画面から文言が消えることもない。 **パソコン幅ではこれが本来の題名なので、絶対に隠してはいけない。** 🚨 **キャッチ（`p.cach` の絵 `sec01_h4.png`）はこの PR では触らない。** 移行元スマホ版はキャッチを棒グラフの絵に焼き込んでいるので、こちらは 「テキスト化＋絵の切り出し」が要る（大原則 3）。**いまは携帯幅でキャッチが 2 回出るが、それは別 Task で解消する。** ## 4 ページとも同じ型である（当初は成婚率 1 ページしか直していなかった） 移行元スマホ版は 4 ページとも題名を帯の絵 1 枚だけで出し、本文の側に題名を 持たない（`legacy/.../public/sp/visitor/<ページ>/index.html` の 4 本を走査して確認。 🚨 CSS の注釈の中に `＊` と `/` を続けて書くと**そこで注釈が閉じる**ので、 ここは万能文字ではなく `<ページ>` と書く。実際に 1 度これで注釈を割った）。 dev は 4 ページとも移行元パソコン版の組みなので、帯とは別の題名が残る。 | ページ | dev に残る要素 | 実測（375px） | 隠してよい理由 | |---|---|---|---| | 入口 | `h3.title`（絵 `visitor/images/title.gif` 438x73） | 328.13x62.19 | 帯と同じ文言 | | 成婚率 | `h3.title`（絵 `visitor/method/images/title.gif` 354x75） | — | 帯と同じ文言 | | Q&A | `h3.title`（絵 `visitor/questions/images/title.gif` 93x72） | 328.13x79.5 | 帯と同じ文言 | | 親御さまへ | `h3.sectionTitle01`（`親御さまへ`） | 328.13x28.5 | 帯と同じ文言 | 🚨 **「帯と同じ文言か」は `alt` で判定してはいけない。**入口の絵の `alt` は 「はじめて（**結**活未経験）の方へ」だが、**絵の中身は「はじめて（婚活未経験）の 方へ」**で帯と一致する（4 枚とも絵を開いて目で確かめた）。`alt` を鍵にすると、 帯に無い文言を隠して画面から消す事故になる。 🚨 **親御さまへだけは要素が違う**（`h3.sectionTitle01`）。`h3.title` だけを 当て先にすると 1 ページ取りこぼす。 🚨 **`/visitor/method/index0613/` にこの規則が当たるのは正しい姿である。** このページは `pa-visitor--method` の目印を持つが、**移行元の本番は携帯の名乗りに 対して 302 で `/sp/visitor/method/` へ転送する**（2026-09-04 16:17 JST に実測）。 つまり移行元も携帯では成婚率の姿を返す。dev の `h3.title` が指す絵も `/visitor/method/` と同一ファイル（md5 一致）で中身は「成婚率へのこだわり」なので、 隠す相手と帯に出す相手の文言が一致する。 🚨 **この段落は過去の記録である。**そのページは裁定 164 で転送すると決まり、dev では 404 になった（Bug #3932）。当たる相手はもう居ないが、**当たっても壊れない**ことを 確かめた記録として残す。 -------------------------------------------------------------- */ @media (max-width: 749px) { :where(.pa-page--visitor) .page-content__body :is(h3.title, h3.sectionTitle01) { display: none; } } /* -------------------------------------------------------------- # 8. 入口の「サービスのご案内」に灰色のタイル地を戻す（`/visitor/` の 1 ページ） 移行元スマホ版はこの区画を `div.bg_gray` で組み、**4x4px の絵を敷き詰めた灰色の地** と上下 20px の内余白を持つ（宣言 `sp/visitor/css/style.css:30-32` → `.bg_gray { background:url(../images/bg_gray.jpg) repeat; padding:20px 6.25% }`。 実測 `out/g-top-legacy.json` の 2 つ目の `div.bg_gray` = 375x565.88・ `bgImg = .../sp/visitor/images/bg_gray.jpg`）。 dev の同じ内容は `div.concept_list`（見出し「パートナーエージェントのサービスの ご案内」＋ 4 つの導線）で、**地色も背景の絵も持たない**（実測 375x567.69・ `rgba(0, 0, 0, 0)`）。地色を書いているのは `assets/visitor/css/section.css:74-79` だけで、その 1 本は `(min-width: 750px)` でしか配られない。 節 4 の帯の規則がすでに幅 100vw と左右 6.25vw を与えているので、**ここで足すのは 背景の絵と上下の内余白 20px だけ**である。地の絵は導入の囲みと同じ 1 枚を使う。 -------------------------------------------------------------- */ @media (max-width: 749px) { :where(.pa-page--visitor) .page-content__body .concept_list { padding-block: 20px; background: url(../../sp/visitor/images/bg_gray.jpg?ver=504d3ca66a70) repeat; } } /* -------------------------------------------------------------- # 9. 親御さまへのコラムに飾りの地と内余白を戻す（`/visitor/parents/` の 1 ページ） 移行元スマホ版はコラムの節を飾りの地で囲み、中身を内側へ寄せる （宣言 `sp/visitor/parents/css/style.css:189-193` → `#anchor04 { background:url(../images/bg_column.gif) repeat; padding:5.35%; margin:0 6.25% }`）。 実測（`out/g-p-legacy.json` の `section#anchor04.anchor_block.column`）: 器 328.13px x=23.44 左右の外余白 23.4375px（= 6.25% の 375px） 内余白 四辺とも 20.06px（= 5.35% の 375px） 中身 288px dev の対応する節は `section#parents03`（文言「なぜ、いま婚活なのか？」で突き合わせた）。 親の `section#parents` が節 4 の帯になっているので**器の幅 328.13px はすでに一致**して おり、**地と内余白だけが無い**（実測: `rgba(0, 0, 0, 0)`・内余白 0・中身 328.13px）。 そのぶん中身が移行元より 40px 広い。 🚨 **`%` ではなく `vw` で書く。**移行元の `5.35%` の基準は親（`#parents` = 375px）だが、 dev の親（`section#parents` の内容の幅）は 328.13px なので、`5.35%` と書くと 17.55px に なり 2.5px 狭くなる。`5.35vw` が移行元と同じ 20.06px になる。 -------------------------------------------------------------- */ @media (max-width: 749px) { :where(.pa-visitor--parents) .page-content__body #parents03 { box-sizing: border-box; padding: 5.35vw; background: url(../../sp/visitor/parents/images/bg_column.gif?ver=b9dd20574329) repeat; } } /* -------------------------------------------------------------- # 10. 成婚率のキャッチ 3 行を、絵からテキストへ（`/visitor/method/` の 1 ページ） 移行元スマホ版は、キャッチ 3 行を棒グラフと同じ 1 枚に焼き込んでいる （`sp/visitor/method/images/sec01_ph01.png` 850x870）。dev はさらにパソコン版の キャッチの絵（`visitor/method/images/sec01_h4.png` 538x87）を `p.cach` で出すので、 **携帯幅で同じ文言が 2 回出ていた**。 大原則 3（焼き込み文言はテキストで出す）に従い、`inc/visitor-method-baked-text.php` が テキストの塊を差し込み、ここで文字組みを絵に合わせる。**棒グラフそのものも絵をやめ、 テキストと CSS で組み直した**（下の第 15 節。Task #3478）。 ## 絵の実測（原寸 850x870。墨 = 不透明で明るさ 200 未満の画素） 帯 上 下 左 右 ※1 0 23 506 547 1 行目 33 75 7 824 2 行目 124 162 89 746 ※2 180 203 518 565 3 行目 213 255 258 567 棒グラフ 330 868 5 805 金の色は #a68146（8,159 画素で最多）。 ## 字の大きさと字間の出し方 テーマの明朝（游明朝）で同じ文言を描いたときの墨を、字の大きさ 100px あたりで測った （`measureText` の `actualBoundingBox`）。 1 行目 墨の高さ 93.3 墨の幅 1467.7 2 行目 墨の高さ 84.4 墨の幅 1185.4 3 行目 墨の高さ 93.6 墨の幅 497.8 字の大きさは「絵の墨の高さ ÷ 上の比」で出す。3 行とも 46.1px 前後にそろった （43/0.933 = 46.09、39/0.844 = 46.21、43/0.936 = 45.94）。**絵の幅の 5.4218%** を採る。 字間は「絵の墨の幅 − 同じ大きさで描いた墨の幅」を字の間の数で割る。 1 行目 (818 - 676.4) / 14 = 10.11px → 1.1925% 2 行目 (658 - 546.3) / 11 = 10.15px → 1.1925% 3 行目 (310 - 229.4) / 6 = 13.43px → 1.5808% 🚨 **3 行目だけ字間が広い。**移行元は行ごとに詰め方を変えている。1 つの値で そろえると 3 行目が 8px 狭くなる。 🚨 **1 行目は器いっぱいに字が詰まっている**（15 字 x 21.875px = 328.13px = 器の幅）。 ここへ注記の印を流し込むと折り返しが 1 行増えるので、**※1 と ※2 は行の中に入れず、 別の要素として行の上に重ねる**（移行元の絵でも印は行の上に乗っている）。 ## なぜ `cqw`（器の幅を基準にする単位）なのか dev の本文の器は `画面の幅 − 30px` である（幅 375px で 345px、414px で 384px）。 長さと割合が混じるので `vw` では書けない（→ 落とし穴「字の大きさを vw で書けるかは 絵がどこまで伸びるかで決まる」）。`vw` は縦のスクロールバーの幅も含んでしまう。 そこで**差し込んだ塊自身を器として宣言し**（`container-type: inline-size`）、中身を `cqw` で書く。テーマの要素には `container-type` を付けないので、ほかの画面へ影響しない。 位置（`top` と `left`）は、実際に描いた墨の帯を測って合わせ込んだ値である。 幅 375px と 414px の両方で、移行元の帯との差が 1.5px 以内に収まることを確かめた。 -------------------------------------------------------------- */ /* 携帯幅だけに出す塊。既定では隠しておき、下の `@media` で出す （幅の条件が効かない環境で、パソコン版の絵と二重に出さないため）. */ .pa-cach { display: none; } /* * 🚨 **器を基準にする単位（`cqw`）を解さない閲覧環境では、この節ごと効かない。** * その環境では下の「絵を隠す」も効かないので、**移行元パソコン版の絵がそのまま出る** * （この直しを入れる前と同じ姿）。文字だけが位置を失って重なる、という壊れ方はしない。 * * テーマの `assets/css/main.css` も器の照会を `@supports` で囲む慣習なので、形をそろえた * （地図・横送り・研究所の 3 か所に先例がある。自動レビューの指摘）. */ @supports (container-type: inline-size) { @media (max-width: 749px) { :where(.pa-page--visitor) .page-content__body p.cach { margin: 0; } /* パソコン版のキャッチの絵。文言はテキストで出すので、携帯幅では出さない. */ :where(.pa-page--visitor) .page-content__body p.cach > img { display: none; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach { position: relative; display: block; aspect-ratio: 850 / 330; container-type: inline-size; color: #a68146; font-family: var(--pa-font-family-serif); } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__l, :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__n { position: absolute; display: block; margin: 0; line-height: 1; white-space: nowrap; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__l { right: 0; left: 0; font-size: 5.4218cqw; letter-spacing: 1.1925cqw; text-align: center; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__l1 { top: 3.7124cqw; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__l2 { top: 14.1682cqw; } /* * 3 行目だけ字間が広い（1・2 行目の 1.1925cqw に対し 1.5808cqw）。 * 中央寄せの並びでは**最後の字のうしろにも字間が付く**ので、見た目の中心が * 字間の分だけ右へずれる。右の内余白でその分を打ち消し、中身を半分だけ左へ戻す。 * * 値は移行元の絵の墨を画素で測って決めた（`sp/visitor/method/images/sec01_ph01.png` * の中で x 258〜568）。器の中の座標で比べると、直す前は次のとおりだった。 * * 幅 375px 移行元 左 99.60 / 右 219.26 dev 左 100.56 / 右 221.56 * 幅 414px 移行元 左 109.95 / 右 242.07 dev 左 111.12 / 右 244.12 * * 右へ約 1.6px 寄っているので、その 2 倍を内余白にする（1.08cqw = 375px で 3.54px）. * * 🚨 字間を減らして位置を合わせてはいけない。並びの幅が移行元と合わなくなる * （いまは 375px で 1.33px、414px で 0.89px しか違わない）. */ :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__l3 { top: 24.9088cqw; padding-right: 1.08cqw; letter-spacing: 1.5808cqw; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__n { font-size: 3.835cqw; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__n1 { top: -0.58cqw; left: 59.0364cqw; } :where(.pa-page--visitor) .page-content__body p.cach .pa-cach__n2 { top: 20.5965cqw; left: 60.4482cqw; } } } /* -------------------------------------------------------------- # 11. 「成婚率No.1」と赤い横線を、絵からテキストへ（`/visitor/method/` の 1 ページ） 移行元スマホ版は 2 枚目にも文言を焼き込んでいる （`sp/visitor/method/images/sec01_ph02.png` 850x172 = 「成婚率No.1」＋ 赤い横線）。 dev はパソコン版の絵（`visitor/method/images/sec01_ph02.png` 249x69）を実寸で出しており、 器 345px に対して小さく、中身も別物だった。 ここでも文言はテキストにし、飾り（赤い横線）は CSS で描く。**絵は差し替えない** （携帯幅ではパソコン版の絵を出さず、テキストの塊だけを見せる）。 ## 絵の実測（原寸 850x172） 帯 上 下 左 右 ※2 0 23 658 705 文字 43 128 134 707 赤い線 164 170 126 723 文字の色は #231815（7,484 画素で最多。囲みの中の文言と同じ）。線は #cb1f10。 字の大きさ 墨の高さ 86 ÷ 0.936 = 91.88px → 10.8094% 字間 (574 - 457.4) / 6 = 19.43px → 2.2882% 🚨 **「No.1」は半角の欧文である。**`alt` は「成婚率Ｎｏ．１」と全角で書いてあるが、 字の中心の間隔を測ると 105.5 / 106 / 105.5（漢字）に対して 84.5 / 52 / 64.5 で、 全角ならありえない。全角で書くと墨の幅が 141px になり、移行元の 119.67px を 21px 超える。**`alt` を見分けの鍵にしない**という記録どおりだった。 -------------------------------------------------------------- */ /* 携帯幅だけに出す塊。既定では隠しておく（上と同じ理由）. */ .pa-no1 { display: none; } /* * 🚨 **器を基準にする単位（`cqw`）を解さない閲覧環境では、この節ごと効かない。** * その環境では下の「絵を隠す」も効かないので、**移行元パソコン版の絵がそのまま出る** * （この直しを入れる前と同じ姿）。文字だけが位置を失って重なる、という壊れ方はしない。 * * テーマの `assets/css/main.css` も器の照会を `@supports` で囲む慣習なので、形をそろえた * （地図・横送り・研究所の 3 か所に先例がある。自動レビューの指摘）. */ @supports (container-type: inline-size) { @media (max-width: 749px) { /* * パソコン版の絵。文言はテキストで出すので、携帯幅では出さない。 * * 🚨 **ファイル名で当てない。**同じ器の中にテキストの塊があるかどうかで当てる。 * 投入のやり直しで URL の形が変わっても外れないためである. */ :where(.pa-page--visitor) .page-content__body .ph:has(> .pa-no1) > img { display: none; } :where(.pa-page--visitor) .page-content__body .ph .pa-no1 { position: relative; display: block; aspect-ratio: 850 / 172; container-type: inline-size; color: #231815; font-family: var(--pa-font-family-serif); } /* 赤い横線。飾りなので絵を切り出さず、位置と太さを実測どおりに描く. */ :where(.pa-page--visitor) .page-content__body .ph .pa-no1::after { position: absolute; top: 19.2941cqw; left: 14.8235cqw; width: 70.3529cqw; height: 0.8235cqw; background: #cb1f10; content: ""; } :where(.pa-page--visitor) .page-content__body .ph .pa-no1__t, :where(.pa-page--visitor) .page-content__body .ph .pa-no1__n { position: absolute; display: block; margin: 0; line-height: 1; white-space: nowrap; } /* * 左を 2.134cqw だけ空けているのは、移行元の文字が中央より 2px 右に寄っているため。 * 中央ぞろえの箱の左だけを詰めると、中身の中心が半分の 1.067cqw ぶん右へ動く. */ :where(.pa-page--visitor) .page-content__body .ph .pa-no1__t { top: 4.61cqw; right: 0; left: 2.134cqw; font-size: 10.8094cqw; letter-spacing: 2.2882cqw; text-align: center; } :where(.pa-page--visitor) .page-content__body .ph .pa-no1__n { top: -0.58cqw; left: 76.9188cqw; font-size: 3.835cqw; } } } /* -------------------------------------------------------------- # 12. 携帯幅の本文の字と行送りを移行元スマホ版へそろえる（Task #3492） 移行元は携帯の名乗りに `/sp/visitor/...` を返す（裁定 46 でこちらへそろえる）。 その本文は**字が小さく、行送りが広い**。dev はテーマの既定（字 15px・行送り 1.8 倍）の ままなので、段落の高さが合わない。 ## 実測（移行元スマホ版と dev を幅 375px で採って突き合わせた） 入口 3 つの要点の説明文 行送り 移行元 30px → dev 27px（高さ 150 → 135） 入口 入会資格の文 字 14px・行送り 25.2px・色 #9f8046 → dev 字 15px・行送り 27px・色 #000（高さ 126 → 135） 成婚率 本文の段落 字 14px・行送り 25.2px → dev 字 15px・行送り 27px（高さ 227 → 243） 成婚率 注記の並び 字 13px・行送り 26px → dev 字 15px・行送り 27px（高さ 242 → 207） **入会資格の文は色まで変わっている。**移行元は金色（#9f8046）で、dev は黒である。 行送りとは別の差で、目で見てすぐ分かる。 ## 🚨 Q&A と親御さまへの携帯幅は、この Task では扱わない 移行元スマホ版は**答えを畳んで出す**（開閉式）。dev は全部開いているので、同じ塊の高さが 移行元 80px 対 dev 189px のように 2〜3 倍違う。**畳み方をそろえないと行送りを比べられない** ので、開閉の Task（[#3246](https://github.com/mationinc/wp-platform/issues/3246)）のあとに測り直す。 ## 🚨 当たり先の注意 成婚率の本文の段落は `.sec_inner` の直下にあるが、**同じ直下にキャッチの器（`p.cach`）も ある**。`:not(.cach)` で外さないと、節 10 で組んだキャッチの文字組みを壊す。 -------------------------------------------------------------- */ @media (max-width: 749px) { /* * 入口の 3 つの要点の説明文。 * * 🚨 **字の大きさを直に書く。**移行元スマホ版は基準 13px に * `.point p { font-size: 15px }`（写し元 `sp/visitor/css/style.css` 76 行）を重ねて * 15px を出している。dev はこれまで**携帯幅の基準が 15px だったので受け継ぎで * 同じ値になっていた**が、Bug #5307 で基準が移行元どおり 13px へ変わると * **受け継ぎでは 13px になり 2px 縮む。**だからここへ直に書く。 * * 移行元の組みは `section.point > p`・dev は `dl.visitor_point > dd > p` で * 器が違う（dev は移行元のパソコン版の本文を引き継いでいる）。当たり先は * dev の組みで書く. */ :where(.pa-visitor--top) .page-content__body .visitor_point dd p { font-size: 15px; line-height: 30px; } /* * 入口の入会資格の文。字・行送り・色の 3 つとも移行元スマホ版へ戻す。 * * 🚨 **字間と外余白も、ここへ足す**（Bug #4134）。移行元は * `#contents .sec04 p { letter-spacing: 0.05em }`（14px の 0.7px）で、外余白は持たない。 * dev は字間なし・下の外余白 18px だった。**同じ要素の規則を別の節に増やさない**ため、 * 新しい節を作らずこの 1 本へまとめる. */ :where(.pa-visitor--top) .page-content__body .sec04 .txt_gold { margin: 0; color: #9f8046; font-size: 14px; letter-spacing: 0.05em; line-height: 25.2px; /* 寄せ。移行元スマホ版は `#contents .sec04 p { text-align: left }`（同 113 行）・Bug #6108. */ text-align: left; } /* * 成婚率の本文の段落。キャッチの器（p.cach）は外す。 * * 🚨 **下の外余白 30px は移行元の組みの `mt30` である（Bug #4520・下の第 27 節）。** * 移行元は 2 枚めの絵の器に `
` を付けており、dev はそこに * 何も持たなかった（テーマの既定の 18px だけ）。**同じ要素の規則を別の節に増やさない** * ため、新しい節を作らずこの 1 本へまとめる。値の由来は第 27 節の注釈に書いてある. */ :where(.pa-visitor--method) .page-content__body .sec_inner > p:not(.cach) { margin-bottom: 30px; font-size: 14px; line-height: 25.2px; } /* * 成婚率の注記の並び（※1〜※5）。 * * 🚨 **字間が要る（Task #3530）。**移行元スマホ版は節の器で * `.sections { letter-spacing: 0.05em }` を宣言し、注記まで受け継がせている * （`sp/visitor/method/css/style.css` の 27〜29 行）。器の字が 14px なので、 * 受け継いだ値は **0.7px** に確定してから下りてくる（`em` は宣言した要素で * px に確定する）。**13px の 0.05em（0.65px）ではない。** * * 🚨 **この 0.7px が ※1 の折り返しを決めている。**26 字なので、字間のぶんだけで * 約 18px 広がる。字間が無いと並びは 327.88px で器の 328.13px に**0.25px だけ * 収まってしまい**、移行元では 2 行の ※1 が dev では 1 行になる（高さ 52 対 26px）。 * **箱を測っても出ない差なので、文字の並びそのものを測って見つけた。** */ :where(.pa-visitor--method) .page-content__body .aside_area li { font-size: 13px; letter-spacing: 0.7px; line-height: 26px; } /* * 注記の器の上下の内余白（Task #3530）。移行元スマホ版は * `.aside_area { padding: 30px 0 30px 0 }` を持つ（同じ style.css の 61〜63 行）。 * 写しはこれを持たず 0 だった. */ :where(.pa-visitor--method) .page-content__body .aside_area { padding: 30px 0; } /* * 注記の器の中の並び（`ul`）の外余白（Task #3530）。移行元スマホ版はサイト共通の * 初期化（`sp/css/basic.css` の 7〜15 行）で `ul` の外余白を 0 にしている。 * dev は下へ 18px を持ち、2 つの並びの間がそのぶん開く. */ :where(.pa-visitor--method) .page-content__body .aside_area ul { margin: 0; } } /* -------------------------------------------------------------- # 13. 親御さまへの携帯幅の部品（Task #3519） 差し込む塊は `inc/visitor-parents-sp-parts.php` が作る。ここは見た目だけを持つ。 ## 何を出すのか 移行元スマホ版にしか無い組みが 2 つある。 1. コラムの見出しの前の「COLUMN」の金の札 2. 説明会の節の末尾の押しボタン 2 つ（資料請求・来店予約） どちらも移行元は絵に焼き込んでいる。大原則 3（焼き込み文言はテキストで出す）に従い、 文言はテキストで差し込み、地色と矢印を CSS で描く。 ## 実測（移行元スマホ版の絵を画素で測り、CSS から描かれる大きさを出した） 金の札 63.88 x 23.04px 地色 #a3762b ├ COLUMN 白抜き 51.84 x 7.85px └ 見出しの墨 153.43 x 14.66px（札の右端から 12.04px 空ける） 押しボタン 328.12 x 58.43px（1 つにつき下へ 26.25px） ├ 資料請求 地色 #a4762b ├ 来店予約 地色 #e1200f ├ 折れ線 8.99 x 17.08px（押しボタンの左端から 292.17px・上から 20.68px） └ 下の横線 8.99 x 0.90px （同じ左端・上から 45.85px） 幅 375px を基準に `vw` で書く（節 9 と同じ理由。移行元の百分率の基準は親の幅であり、 dev の親の幅とは違うため、百分率をそのまま写すと合わない）。 ## 🚨 テーマの本文の既定に勝つ必要がある テーマの `assets/css/main.css` は本文の並びへ直に当たる。 `.page-content__body :is(ul, ol)` (0,1,1) 外余白・内余白・行頭記号 `.page-content__body li` (0,1,1) 行送り ここの当たり先は `.page-content__body` ＋ クラス 1 個で (0,2,0) になり、上に勝つ。 **`:where()` は詳細度に数えない**ので、ページの目印を `:where()` で包んでも下がらない。 ## 🚨 パソコン幅は 1px も変えない 移行元のパソコン版は押しボタン 2 つを持たない。**差し込んだ塊は既定で隠し**、749px 以下でだけ出す。逆に、パソコン版の押しボタン 1 つ（`.txtBtn_black01`）は携帯幅で隠す。 🚨 **金の札については、この注釈が 1 度まちがっていた（2026-09-07 に訂正）。** 「パソコン版は `column.gif` を使っていない」という趣旨の記述があったが、 **パソコン版は CSS の背景の絵として使っている**（`visitor/parents/css/style.css` の 88 行）。dev のパソコン幅も同じく背景の絵で描いており（`assets/visitor/css/parents.css`）、 移行元と一致している。ここで札のテキストを既定で隠すのは、**パソコン幅では背景の絵が 同じ役目を果たしていて、テキストの札を重ねると二重になるから**である。 -------------------------------------------------------------- */ /* 既定は隠す。パソコン幅ではこの 2 つを 1px も描かない. */ .pa-column-badge, .pa-parents-cta { display: none; } @media (max-width: 749px) { /* * コラムの見出しの文字。**移行元スマホ版は見出しごと絵に焼き込んでいる**ので、 * その絵の墨（153.43 x 14.66px）に字の大きさを合わせる。dev の既定（17px・ * 字間 0.85px）では文字の並びが 196.36px になり、**43px 広い**。 * * 下の外余白も絵に合わせる（移行元は絵の下に 8.64px。dev の既定は 20px）. * * 🚨 **上の外余白も 0 にする（Bug #4514）。**テーマの見出しの一括指定 * （`main.css` の `.page-content__body :is(h2, h3, h4, h5, h6)` が * `margin: var(--pa-article-block-gap) 0 20px` を当てる）で上が 30px になる。 * 移行元スマホ版の見出しは上下の外余白が 0px である（実測 288 x 23.03px。 * 絵の下に見える 8.62px は、絵の外余白が見出しの箱から外へ抜けたもの）。 * * **この差は Bug #4293 の並べ替えの後に表に出た。** * 並べ替える前は見出しが写真の後ろに在り、30px が隣の箱の外余白とつぶれて * 見えなかった。先頭へ動かしたことで、区画の内余白のすぐ下に 30px が現れ、 * 区画そのものが移行元より 30.94px（375px）／ 31.14px（320px）高くなっていた。 */ :where(.pa-visitor--parents) .page-content__body #parents03 .text h4 { margin-top: 0; margin-bottom: 2.304vw; font-size: 3.8453vw; /* * 🚨 **見出しの高さは金の札（`.pa-column-badge`）が決めている。**札は * `display: inline-block` ＋ `line-height: 6.144vw` ＋ `vertical-align: middle` * で、札の箱は「基準線 ＋ 支柱の x 高さの半分」に中央をそろえる。**支柱 * （この見出しの行送り）が札より高いと、行の箱が札より高くなる。** * * 既定（`normal`）では 375px で 23.97px・320px で 20.8px になり、移行元 * （23.03 / 19.66px）より 0.94 / 1.14px 高かった。**支柱を札より低くすると * 札が行の箱を決め、移行元と 0.02px 以内でそろう**（実測: 行送り 1 / 1.1 / * 1.2 はいずれも 320px で 19.66px・375px で 23.05px。1.3 以上は合わない）. */ line-height: 1.2; letter-spacing: normal; } /* コラムの見出しの前に置く金の札。移行元 63.88 x 23.04px（375px 幅で）. */ :where(.pa-visitor--parents) .page-content__body #parents03 .text h4 .pa-column-badge { display: inline-block; box-sizing: border-box; margin-right: 3.2107vw; width: 17.0347vw; background: #a3762b; color: #fff; font-family: var(--pa-font-family-serif); font-size: 2.6053vw; letter-spacing: 0.2987vw; line-height: 6.144vw; text-align: center; vertical-align: middle; } /* 押しボタン 2 つ。移行元は絵 365x65 を器いっぱいに出す（328.12 x 58.43px）. */ :where(.pa-visitor--parents) .page-content__body .pa-parents-cta { display: block; margin: 0; padding: 0; list-style: none; } :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item { margin: 0 0 7vw; line-height: normal; } :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item:last-child { margin-bottom: 0; } :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item a { position: relative; display: block; box-sizing: border-box; padding: 4.54vw 0; color: #fff; font-family: var(--pa-font-family-serif); font-size: 9.0827vw; letter-spacing: 0.1813vw; line-height: 6.5vw; text-align: center; text-decoration: none; } /* * 右端の飾りは **2 つある**。折れ線（`>`）と、その下の短い横線である。 * 絵を画素で読んで初めて分かった（1 度は 2 つをまとめて 1 つの矢印だと読み違えた）。 * * 折れ線 8.99 x 17.08px 左端から 292.17px・上から 20.68px・太さ 1px * 下の横線 8.99 x 0.90px 左端から 292.17px・上から 45.85px * * 🚨 **回した正方形では作れない。**`border-top` と `border-right` を当てて 45 度 * 回すやり方は、外形の幅と高さが必ず等しくなる。ここは高さが幅の約 1.9 倍なので、 * `clip-path` で折れ線そのものを描く. */ /* * 🚨 **値は絵から測った実測をそのまま書く（Task #3612）。**ここは最初、丸めた値で * 書いてしまい、幅が 10.24px（実測 8.99px）になっていた。すぐ下の横線は実測どおり * だったので、同じ飾りの片方だけ書き方が違う形で残っていた。 * * 幅 8.99 / 375 = 2.3973vw （丸めた値は 2.73vw = 10.24px） * 高さ 17.08 / 375 = 4.5547vw（同 4.68vw = 17.55px） * 上 20.68 / 375 = 5.5147vw（同 5.35vw = 20.06px） * 左 292.17 / 375 = 77.912vw（同 77.76vw = 291.60px） */ :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item a::after { position: absolute; top: 5.5147vw; left: 77.912vw; display: block; width: 2.3973vw; height: 4.5547vw; background: #fff; clip-path: polygon(0 0, 15% 0, 100% 50%, 15% 100%, 0 100%, 85% 50%); content: ""; } /* 下の横線。左端は折れ線と同じである（292.17 / 375 = 77.912vw）. */ :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item a::before { position: absolute; top: 12.2267vw; left: 77.912vw; display: block; width: 2.3973vw; height: 0.24vw; background: #fff; content: ""; } :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item--request a { background: #a4762b; } :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item--reservation a { background: #e1200f; } /* * 🚨 **来店予約のパソコン版を伏せる（Bug #8848）。**押しボタンの塊を書き出す * `inc/visitor-parents-sp-parts.php` の来店予約の `a` は、本文の来店予約の * リンクを組み替える仕組みでパソコン版と携帯版の 2 本に割られる。携帯幅で * パソコン版を伏せる `main.css` の `body .pa-reg18-link--pc.pa-reg18-link--pc * { display: none }` は (0,2,1) で、上の `… .pa-parents-cta__item a { display: block }` * も `:where()` が強さ 0 なので (0,2,1) である。**同点で、後から読まれるこの CSS が * 勝ち、2 本とも出ていた。** * * 実測（2026-09-29・幅 375・移行元リポジトリの版 68e3190cb）: dev は「来店予約」が * `a.pa-reg18-link--pc`（上 1,352.28）と `--sp`（上 1,410.69）の 2 本。移行元スマホ版は * 絵の押しボタンが「資料請求」「来店予約」の 2 つだけ。この規則をその場で足すと 1 本に * なり、1440 と 375 の /visitor/ では箱が 1 つも動かなかった. */ :where(.pa-visitor--parents) .page-content__body .pa-parents-cta__item a.pa-reg18-link--pc { display: none; } /* * パソコン版の押しボタン 1 つ（「ご予約フォームへ」）は携帯幅で隠す。 * 移行元スマホ版はこの位置に絵の押しボタンを 2 つ置き、文字の押しボタンは持たない. */ :where(.pa-visitor--parents) .page-content__body .txtBtn_black01 { display: none; } } /* -------------------------------------------------------------- # 14. はじめての方への入口の「3 つの要点」（Task #3520） 差し込む文言は `inc/visitor-top-sp-points.php` が作る。ここは見た目だけを持つ。 ## 移行元スマホ版の組みと、写した値 移行元は**パソコン版とスマホ版でこの区画の組みが丸ごと違う**。スマホ版は見出しを テキストで持ち、挿絵も別の絵である（`public/sp/visitor/index.html` と同 `css/style.css`）。 | 何 | 移行元スマホ版 | dev（直す前） | |---|---|---| | 導入の見出し | `sub_ttl.png` 560x77（文言 ＋ 赤い三角） | `visitor_text01.gif` 303x60（同じ文言の別の絵） | | 要点の見出し 3 つ | **テキスト** | `point01〜03.gif` の絵 | | 挿絵 3 枚 | `pic_01〜03.png` 560x184 / 167 / 228（器いっぱい） | `visitor_img01〜03.gif` 123x105 / 105 / 140 | ## 移行元スマホ版の CSS（そのまま写す） ```css .sub_ttl { padding: 30px 0; } #sp_wrap p.gold { color: #a3762b; font-size: 16px; line-height: 1.4; } .point { margin-bottom: 20px; } .point p { font-size: 15px; } .point h4 { font-size: 17px; color: #f50000; line-height: 1.5; margin-bottom: 10px; } .point h4 span { color: #a3762b; font-size: 12px; text-decoration: underline; } ``` ## 導入の見出しの値（絵を画素で読んで出した） `sub_ttl.png`（原寸 560x77）を幅 375px で描くと 328.13px 幅になる（倍率 0.585946）。 | 何 | 絵の中（原寸） | 描かれる寸法 | vw（/375） | |---|---|---:|---| | 黒い文字の墨 | y 1〜25 / x 89〜472 | 高 14.65 / 幅 224.90 | — | | 字の送り（14 字） | (461 − 99) / 13 = 27.85 | **16.32px** | 4.352vw | | 赤い三角 | y 51〜75 / x 255〜304 | 29.30 x 14.65 | 7.8133 x 3.9067vw | | 三角の上端 | y 51 | 29.88px | 7.968vw | 🚨 **字の送りは 1 字ずつの墨の中心では出せない。**墨の中心は字ごとに偏るので、 **最初と最後の字の中心を結んで字数で割る**。1 字ずつの差は 25〜31px と揺れるが、 通しで測ると 27.85px に落ち着く。 -------------------------------------------------------------- */ /* * 差し込んだ塊は既定で隠す。**`sp.css` は幅の条件なしで配られる**ので、この 1 本を * 749px 以下の節の外に置かないと、パソコン幅でスマホ版の文言が二重に出る。 * * 🚨 **強さを 749px 以下の節の中の規則とそろえ、順番で勝たせる。**ここを * `.pa-visitor--top`（(0,3,0)）で書くと、節の中の `:where(.pa-visitor--top)`（(0,2,0)）に * 勝ってしまい、**携帯幅でも隠れたまま**になる。`:where()` で 0 に落とし、**この規則を * 節より前に置く**ことで、同じ強さなら後に読む節の中が勝つ. */ :where(.pa-visitor--top) .page-content__body :is(.pa-visitor-copy--sp, .pa-visitor-lead, .pa-visitor-point__head) { display: none; } @media (max-width: 749px) { /* --- 導入の見出し。絵を隠して文言をテキストで出す --- */ /* * 🚨 **上下の 30px は画素のままにする（Bug #4521）。**移行元スマホ版は * `.sub_ttl { padding: 30px 0 }`（`sp/visitor/css/style.css` 69 行）で、 * **幅が変わっても 30px のまま**である。ここを `8vw` で書くと 375px でだけ 30px に * なり、幅 320px で上下が 25.6px へ縮んで**移行元より 8.83px 低くなる**。 * * 中身の高さ（`12.0267vw`）は逆に**幅に比例させる**。移行元はこの見出しが絵 * （`sub_ttl.png` 560 x 77px）で、器の幅いっぱいに出るためである * （器 = 画面 x 0.875 なので 0.875 x 77 / 560 = 12.03% ≒ 12.0267vw）。 * * **同じ 1 つの規則の中で、画素のままにする値と `vw` にする値が同居する。** * 移行元での決まり方が違うので、まとめて片方へ寄せてはいけない。 */ :where(.pa-visitor--top) .page-content__body p.arrow { position: relative; margin: 0; padding: 30px 0; height: 12.0267vw; box-sizing: content-box; text-align: center; } :where(.pa-visitor--top) .page-content__body p.arrow > img { display: none; } :where(.pa-visitor--top) .page-content__body .pa-visitor-lead { display: block; color: #000; font-family: var(--pa-font-family-serif); font-size: 4.352vw; letter-spacing: normal; line-height: 1; white-space: nowrap; } /* * 赤い下向きの三角。絵の飾りなので CSS で描く。 * * 🚨 **上端は「画素の内余白 30px」と「絵の中の位置 7.968vw」の足し算になる（Bug #4521）。** * 上の規則の内余白を `8vw` から `30px` へ直したので、ここも `15.968vw`（= 8 + 7.968） * のままにできない。**足し算のうち幅に比例するのは絵の中の位置だけ**である * （絵の中の三角の上端 y=51 ÷ 絵の高さ 77 × 表示の高さ 12.0267vw = 7.968vw）。 */ :where(.pa-visitor--top) .page-content__body p.arrow::after { position: absolute; top: calc(30px + 7.968vw); left: 50%; display: block; width: 7.8133vw; height: 3.9067vw; margin-left: -3.9067vw; background: #f50000; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; } /* * --- 導入の一文 --- * * 移行元スマホ版は `#sp_wrap p.gold { color: #a3762b; font-size: 16px; line-height: 1.4 }`。 * 文言はすでにテキストで出ているので、字と色と行送りだけをそろえる. * * 🚨 **中央寄せも要る**（Bug #4134）。移行元スマホ版はこの段落に `.tac`（中央寄せ）を * 付けているのに、dev は左に寄っていた（字の左端 27.5 対 23.44）。上の値だけを写した * ときに取りこぼした 1 行である. */ :where(.pa-visitor--top) .page-content__body p.main_copy.serif { margin: 0 0 20px; color: #a3762b; font-size: 16px; letter-spacing: normal; line-height: 1.4; text-align: center; } /* * 🚨 **文言もスマホ版へ差し替える。**移行元はパソコン版とスマホ版で 1 字違う * （「専任**の**成婚…」対「専任成婚…」）。字を 16px にしただけでは、2 行目が * 21 字で 336px になり器の 328.13px を超えて**3 行に折り返す**（移行元は 2 行）。 * 塊は `inc/visitor-top-sp-points.php` が両方持たせる. */ :where(.pa-visitor--top) .page-content__body .pa-visitor-copy--pc { display: none; } :where(.pa-visitor--top) .page-content__body .pa-visitor-copy--sp { display: inline; } /* --- 要点の見出し。絵を隠して文言をテキストで出す --- */ :where(.pa-visitor--top) .page-content__body .visitor_point dt > img { display: none; } /* * 🚨 **太さを 400 に戻す**（Bug #4134）。この 2 つは差し込んだ `` で、dev では * 包む `dt` の太字（700）を受け継いでいた。移行元スマホ版は 400 である。 * * 移行元でなぜ 400 になるのかも書き残す。移行元は `.point h4` に太さを書いていないが、 * **基礎の CSS が要素の種類そのものに `font-weight: normal` を当てている** * （`sp/css/basic.css` の 14〜23 行。`h4` と `span` の両方が並んでいる）。 * 要素そのものへの指定は、親から受け継ぐ値に必ず勝つ。**移行元の見た目を * 「太字の指定が無いから 400」と読むと外す**ことがあるので、実測が正である. */ :where(.pa-visitor--top) .page-content__body .pa-visitor-point__head { display: block; margin: 0 0 10px; color: #f50000; font-family: var(--pa-font-family-serif); font-size: 17px; font-weight: 400; letter-spacing: normal; line-height: 1.5; text-align: left; } :where(.pa-visitor--top) .page-content__body .pa-visitor-point__no { color: #a3762b; font-size: 12px; font-weight: 400; text-decoration: underline; } /* --- 要点の間隔と、段落の外余白を移行元スマホ版へそろえる --- */ /* * 移行元スマホ版は `.point { margin-bottom: 20px }` で要点どうしを空け、段落の外余白は * サイト共通の初期化で 0 にしている。2 つ目の本文だけ `mb10`（10px）を持つ. */ :where(.pa-visitor--top) .page-content__body .visitor_point dd { margin: 0 0 20px; } :where(.pa-visitor--top) .page-content__body .visitor_point dd p { margin: 0; } :where(.pa-visitor--top) .page-content__body .visitor_point dd:nth-of-type(2) p:first-child { margin-bottom: 10px; } /* * 3 つの要点の塊 → 灰色の帯（`div.concept_list`）のすき間を 30px にする（Bug #4521）。 * * 移行元スマホ版は**最後の絵の段落に `.mb30`（30px）が付いている** * （`sp/visitor/index.html` 75 行の `

`）。その 30px が * `.point`（20px）と重なり合って**大きいほうの 30px が外へ抜ける**。 * dev はこの 1 本を持たないので、最後の `dd` の 20px だけが抜けて 20px になっていた。 * * 🚨 **当たり先は最後の `dd` ではなく塊のほうにする。**塊（`dl`）は下の内余白も * 境界線も持たないので、**この 30px は最後の `dd` の 20px と重なり合って * 大きいほうが残り**、そのまま外へ抜けてすき間になる。`dd` 側を 30px にすると、 * 要点どうしの間隔（20px）まで変わってしまう。 */ :where(.pa-visitor--top) .page-content__body dl.visitor_point { margin-bottom: 30px; } /* --- 挿絵。移行元スマホ版の絵へ差し替え、器いっぱいに出す --- */ /* * 🚨 **絵を塊にする。**行の中に置くと下に行の余りが残る（実測で 10px）。移行元スマホ版は * サイト共通で `img { display: block }` にしている（`sp/css/common.css` の 11〜15 行）。 * * 🚨 **当たり先を広げない。**来店予約の帯のスタッフの写真を巻き込むと、左の列の高さが * 334 → 319px に崩れる（4 班が /service/experienced/ で踏んだ）。ここは要点の組の中の * 段落の中の絵だけに当てている. */ :where(.pa-visitor--top) .page-content__body .visitor_point dd p img { display: block; width: 100%; height: auto; } :where(.pa-visitor--top) .page-content__body .visitor_point dd:nth-of-type(1) p img { content: url(../../sp/visitor/images/pic_01.png?ver=95365aff6f96); } :where(.pa-visitor--top) .page-content__body .visitor_point dd:nth-of-type(2) p img { content: url(../../sp/visitor/images/pic_02.png?ver=5545853a21fe); } :where(.pa-visitor--top) .page-content__body .visitor_point dd:nth-of-type(3) p img { content: url(../../sp/visitor/images/pic_03.png?ver=a8e89b7a13dd); } } /* -------------------------------------------------------------- # 15. 成婚率の棒グラフを、絵からテキストと飾りへ（`/visitor/method/` の 1 ページ） 移行元スマホ版は棒グラフを 1 枚の絵にしており、**文言を 9 か所も焼き込んでいる** （説明 3 行・数字 3 か所・注記の印 3 か所）。大原則 3 に従い、文言はテキストで出し、 棒 3 本と縦軸は CSS で描く。**絵そのものは持たない**（Task #3478）。 塊は `inc/visitor-method-graph.php` が絵の器（`div.ph`）の中へ差し込む。 ## 絵の実測（原寸 850x540。墨 = 不透明で明るさ 200 未満の画素） 飾りは 4 つとも、**画素の数と外接矩形の面積が完全に一致した**ので、角の丸みも影も無い ただの長方形である。 飾り 左 上 幅 高さ 色 縦軸 5 4 3 535 #000000 赤の棒 8 70 590 51 #c8161e 灰の棒 1 8 265 456 47 #878787 灰の棒 2 8 454 178 48 #878787 ## 字の大きさと字間の出し方 テーマの游ゴシックで同じ文言を描いたときの墨を、字の大きさ 100px あたりで測った （`measureText` の `actualBoundingBox`）。字の大きさは「絵の墨の高さ ÷ その比」、 字間は「絵の墨の幅 − 同じ大きさで描いた墨の幅」を字の間の数で割って出す。 説明 1 行目（太字） 35.68px / 字間 2.17px 説明 2 行目 36.03px / 字間 2.20px 説明 3 行目 36.03px / 字間 1.99px 🚨 **「２」は全角である。**半角の「2」で計算すると 2 行目の字間が 3.34px になり、 ほかの 2 行と合わない。全角にすると 2.20px になって 3 行がそろう。 🚨 **数字の書体はテーマの書体ではない。**絵は見出し用の角ゴシックで、細い「1」と 縦長の「%」を持つ。非「1」の数字の幅は游ゴシックとほぼ同じ（0.93〜1.01 倍）なので、 **差が出るのは「1」と「%」の 2 つだけ**である。 「1」 絵 20〜21px 対 游ゴシック 35.9〜39.2px（0.54 倍） 「%」 絵の比（幅 ÷ 高さ）0.575 対 游ゴシック太字 0.939（0.61 倍） どちらも器で包んで横に縮める。**「1」は並びの途中にあるので、縮めるだけでは並びが 短くならない**（箱の幅が変わらないため）。両側の外余白で場所も詰める。 🚨 **数字の字間は 3 つとも −2.5px でそろう。**「1」の分を外余白で先に詰めておくと、 残りの差が 3 行とも同じ値になる。 ## 合わせ込みの結果（幅 375px・絵の原寸に直して測った） 14 か所すべてで、左右上下の 4 辺とも移行元の絵との差が **2px 以内**である。 ## なぜ `cqw`（器の幅を基準にする単位）なのか 絵の器（`div.ph`）の幅は本文の器と同じで、`画面の幅 − 30px` である。長さと割合が 混じるので `vw` では書けない。塊自身を器として宣言し（`container-type: inline-size`）、 中身を `cqw` で書く（第 10 節と同じ考え方）。 -------------------------------------------------------------- */ /* 携帯幅だけに出す塊。既定では隠しておき、下の `@media` で出す （幅の条件が効かない環境で、パソコン版の絵と二重に出さないため）. */ .pa-mgraph { display: none; } /* * 🚨 **器を基準にする単位（`cqw`）を解さない閲覧環境では、この節ごと効かない。** * その環境では下の「絵を隠す」も効かないので、**移行元パソコン版の絵がそのまま出る** * （この直しを入れる前と同じ姿）。文字だけが位置を失って重なる、という壊れ方はしない. */ @supports (container-type: inline-size) { @media (max-width: 749px) { /* * パソコン版の絵。文言はテキストで出すので、携帯幅では出さない。 * * 🚨 **器を絞る。**このページは `div.ph` を **2 つ**持つ（棒グラフと * 「成婚率No.1」）。絞らずに `.ph > img` へ当てると、**もう一方の絵まで * 消える**（自動レビューの指摘・PR #3673）。第 11 節と同じく、**同じ器の中に * 差し込んだ塊があるかどうか**で当てる（ファイル名では当てない。投入の * やり直しで URL の形が変わっても外れないため）. */ :where(.pa-visitor--method) .page-content__body .ph:has(> .pa-mgraph) > img, :where(.pa-visitor--method) .page-content__body .ph:has(> .pa-mgraph) > picture { display: none; } :where(.pa-visitor--method) .page-content__body .ph .pa-mgraph { position: relative; display: block; width: 100%; aspect-ratio: 850 / 540; container-type: inline-size; } /* 飾り（縦軸と棒 3 本）。中身を持たない長方形. */ :where(.pa-visitor--method) .page-content__body .pa-mgraph__axis, :where(.pa-visitor--method) .page-content__body .pa-mgraph__bar { position: absolute; display: block; left: 0.9412cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__axis { top: 0.4706cqw; left: 0.5882cqw; width: 0.3529cqw; height: 62.9412cqw; background: #000; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__bar--1 { top: 8.2353cqw; width: 69.4118cqw; height: 6cqw; background: #c8161e; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__bar--2 { top: 31.1765cqw; width: 53.6471cqw; height: 5.5294cqw; background: #878787; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__bar--3 { top: 53.4118cqw; width: 20.9412cqw; height: 5.6471cqw; background: #878787; } /* 文言。位置は絵の墨の外接矩形に合わせ込んだ値である. */ :where(.pa-visitor--method) .page-content__body .pa-mgraph__lead, :where(.pa-visitor--method) .page-content__body .pa-mgraph__about, :where(.pa-visitor--method) .page-content__body .pa-mgraph__value, :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit, :where(.pa-visitor--method) .page-content__body .pa-mgraph__note { position: absolute; display: block; margin: 0; line-height: 1; white-space: nowrap; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__lead { color: #000; font-weight: 400; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__lead--1 { top: 0.1176cqw; left: 4.5882cqw; font-size: 4.1972cqw; font-weight: 700; letter-spacing: 0.2722cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__lead--2 { top: 21.6471cqw; left: 4.4706cqw; font-size: 4.2384cqw; letter-spacing: 0.2756cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__lead--3 { top: 44.1176cqw; left: 4.5882cqw; font-size: 4.2384cqw; letter-spacing: 0.2341cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__about, :where(.pa-visitor--method) .page-content__body .pa-mgraph__value, :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit { color: #231815; font-weight: 700; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__value--1, :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit--1 { color: #c8161e; } /* * 数字の並び。字間は 3 つとも同じ（「1」の分は下の器で先に詰めてある）. */ :where(.pa-visitor--method) .page-content__body .pa-mgraph__value { letter-spacing: -0.2941cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__value--1 { top: 4.8235cqw; left: 73.1765cqw; font-size: 10.9158cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__value--2 { top: 28cqw; left: 64.1176cqw; font-size: 9.9776cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__value--3 { top: 50.3529cqw; left: 32.7059cqw; font-size: 10.08cqw; } /* * 🚨 **「1」だけが絵の 0.54 倍しかない。**横に縮め、両側の外余白で場所も詰める。 * 縮めるだけでは箱の幅が変わらないので、並びの長さが移行元と合わない * （直す前は 21.7 の並びが 17px 長かった）. */ :where(.pa-visitor--method) .page-content__body .pa-mgraph__one { display: inline-block; margin-inline: -0.097em; transform: scaleX(0.535); } /* 「%」も絵のほうが細い（比 0.575 対 0.939）. */ :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit { transform-origin: left top; transform: scaleX(0.621); } :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit--1 { top: 9.0588cqw; left: 92cqw; font-size: 5.9565cqw; transform: scaleX(0.6122); } :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit--2 { top: 30.5882cqw; left: 82.5882cqw; font-size: 7.1482cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__unit--3 { top: 52.9412cqw; left: 47.0588cqw; font-size: 7.1482cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__about--2 { top: 31.8824cqw; left: 58cqw; font-size: 4.9706cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__about--3 { top: 54.7059cqw; left: 25.8824cqw; font-size: 4.9706cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__note { color: #231815; font-weight: 400; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__note--1 { top: 15.6471cqw; left: 90.9412cqw; font-size: 2.3271cqw; letter-spacing: 0.3918cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__note--2 { top: 38.4706cqw; left: 81.4118cqw; font-size: 2.7635cqw; letter-spacing: 0.56cqw; } :where(.pa-visitor--method) .page-content__body .pa-mgraph__note--3 { top: 60.5882cqw; left: 46cqw; font-size: 2.7635cqw; letter-spacing: 0.5529cqw; } } } /* -------------------------------------------------------------- # 16. Q&A と親御さまへを、質問ごとの開閉にする（2 ページ） 移行元スマホ版（`https://www.p-a.jp/sp/visitor/questions/`）は、**21 件の答えを すべて閉じた状態で出し、質問を押すと開く**。dev は移行元パソコン版を投入しているので 21 件が全部開いた「文字の壁」になっていた（ページの高さが移行元 6,522px に対し 9,432px。Task #3246）。 ## 移行元スマホ版の実測（幅 375px・2026-09-05） 写しは `sp/visitor/questions/css/style.css` の 92〜160 行である。 組 `dl` 下に 2px 実線 #ccc・下外余白 3% 質問 `dt` 字 18px / 行送り 24px / 游明朝 / 太さ 400 / 内余白 3% 12% / 下外余白 3% 　　　　　 背景 2 枚（右上に ± の印・左中央に Q の札。どちらも幅は器の 10%） 答え `dd` 背景 1 枚（左上に A の札・幅は器の 10%）・内余白 0 0 5% 12% 節 `section` 下外余白 3% 組の幅は移行元も dev も **328.13px で同じ**なので、割合の指定がそのまま使える。 🚨 **太さを書き忘れない。**dev の `dt` はテーマの規則で **700**（太字）になっており、 移行元スマホ版は **400**（並）である。字の大きさ・行送り・書体だけをそろえても、 画面を見ると太さが違う。**採取の道具は太さを記録しないので、数字の突き合わせでは 出てこない**（並べ撮りを目で見て気づいた）。 🚨 **見せる・隠すは JS が付ける目印（`pa-qa`）に掛ける。**JS が動かない閲覧環境では 目印が付かず、**答えは開いたまま**になる（読めなくなる壊れ方をしない）。テーマの `assets/js/ac-menu.js` と同じ倒し方である。 🚨 **Q の札は組ごとに違うので、変数で渡す。**`dl.qa01`〜`dl.qa24` に札の絵だけを 持たせ、± の印との重ね方は 1 本の規則で書く。移行元は 48 本の規則を並べているが、 同じ絵になる。 ## 親御さまへ（`/visitor/parents/`）にも同じ組みがある（Task #3692） 親御さまへは**よくある質問 3 件**を同じ `.qa_box` で組んでおり、移行元スマホ版では 同じく開閉する。写しは `sp/visitor/parents/css/style.css` の 92〜168 行で、 **Q&A の写しと 1 か所だけ違う**。 🚨 **± の印の縦位置が違う。**Q&A は `right 0`（上寄せ）、親御さまへは `right center` （中央）である。ほかの値（字・行送り・書体・太さ・内余白・組の下線・外余白・印の 大きさ 10%）は 2 ページで同じだった。**写しを 2 本とも読んで突き合わせて確かめた。** 違いは `--pa-qa-plus-y` で渡す。 🚨 **絵は 2 ページで同じ実体である。**移行元は `sp/visitor/parents/images/` にも 別に置いているが、`icon_plus.gif` `icon_minus.gif` `a.gif` `q01`〜`q03.gif` の **中身の指標（md5）が Q&A のものと一致した**ので、テーマの 1 組を使い回す。 🚨 **親御さまへには `#qa` の器が無い。**当たり先は `.qa_box` から始める。Q&A 側の 当たり先は `#qa` を含めたまま変えない（**カンマで並べた当たり先の強さは、実際に 当たった側で決まる**ので、Q&A の効き方は 1 ミリも変わらない）。 🚨 **親御さまへの写しにある `section { margin: 0 0 3% }` は写さない。**あちらは `#qa` が無いぶん**ページ中のすべての区画**に効いてしまい、この Task の対象外 （よくある質問 3 件）を超える。Q&A 側の `#qa section` はそのまま残す. -------------------------------------------------------------- */ @media (max-width: 749px) { :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl, :where(.pa-visitor--parents) .page-content__body .qa_box dl { margin: 0 0 3%; padding: 0; border-top: none; border-bottom: 2px solid #ccc; } :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl dt, :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl dd, :where(.pa-visitor--parents) .page-content__body .qa_box dl dt, :where(.pa-visitor--parents) .page-content__body .qa_box dl dd { margin: 0; padding: 0; background: none; text-align: left; } :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl dt, :where(.pa-visitor--parents) .page-content__body .qa_box dl dt { margin: 0 0 3%; padding: 3% 12%; background: url(../images/icon_plus.gif?ver=79307b03ec0d) no-repeat right var(--pa-qa-plus-y, 0) / 10% auto, var(--pa-qa-mark) no-repeat 0 center / 10% auto; font-family: var(--pa-font-family-serif); font-size: 18px; font-weight: normal; line-height: 24px; } /* 開いているときだけ、右上の印を「−」に差し替える。Q の札はそのまま. */ :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl.is-open dt, :where(.pa-visitor--parents) .page-content__body .qa_box dl.is-open dt { background: url(../images/icon_minus.gif?ver=40ed8b6190c2) no-repeat right var(--pa-qa-plus-y, 0) / 10% auto, var(--pa-qa-mark) no-repeat 0 center / 10% auto; } :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl dd, :where(.pa-visitor--parents) .page-content__body .qa_box dl dd { padding: 0 0 5% 12%; background: url(../images/a.gif?ver=7d4e4a705d49) no-repeat 0 0 / 10% auto; } /* * 🚨 **`pa-qa` は JS が付ける。**この目印が無いと答えは閉じない。JS が動かない * 閲覧環境では移行元パソコン版と同じ「全部開いた」姿になる. */ :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl.pa-qa:not(.is-open) dd, :where(.pa-visitor--parents) .page-content__body .qa_box dl.pa-qa:not(.is-open) dd { display: none; } :where(.pa-visitor--questions) .page-content__body #qa .qa_box dl.pa-qa dt, :where(.pa-visitor--parents) .page-content__body .qa_box dl.pa-qa dt { cursor: pointer; } /* * 節と節の間隔（Bug #4319・裁定 359）。 * * 移行元スマホ版は `#qa section { margin: 0 0 10% }` で、その `10%` の基準は * 親（`div#qa`）の中身の幅 = **375px = 画面の幅そのもの**なので 37.5px になる。 * * 🚨 **dev に `10%` と書くと 32.81px になる。**dev の親（`section#qa`）は左右に * 6.25vw（23.4375px）の内余白を持つので、中身の幅が 328.125px しかない。 * **`10vw` と書けばどの携帯幅でも移行元と同じ値になる**（第 3 節の `6.25vw`・ * 第 9 節の `5.35vw` と同じ考え方）。 * * 🚨 **`37.5px` と焼かない。**375px でだけ合い、320px や 414px でずれる. */ :where(.pa-visitor--questions) .page-content__body #qa section { margin: 0 0 10vw; } /* * 🚨 **親御さまへだけ ± の印が縦中央である**（移行元の写しが `right center`）。 * Q&A は `right 0`（上寄せ）なので、既定値のまま触らない. */ :where(.pa-visitor--parents) .page-content__body .qa_box dl { --pa-qa-plus-y: center; } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa01 { --pa-qa-mark: url(../images/q01.gif?ver=8f994cde9e37); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa02 { --pa-qa-mark: url(../images/q02.gif?ver=e9b96ef7c4b0); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa03 { --pa-qa-mark: url(../images/q03.gif?ver=7edc9f8a6c86); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa04 { --pa-qa-mark: url(../images/q04.gif?ver=d6292884f622); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa05 { --pa-qa-mark: url(../images/q05.gif?ver=a2ce25b6c08c); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa06 { --pa-qa-mark: url(../images/q06.gif?ver=dde8027faddc); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa07 { --pa-qa-mark: url(../images/q07.gif?ver=8976ae113500); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa08 { --pa-qa-mark: url(../images/q08.gif?ver=f87ade5edcf3); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa09 { --pa-qa-mark: url(../images/q09.gif?ver=ece6711c2787); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa10 { --pa-qa-mark: url(../images/q10.gif?ver=2aff25936a84); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa11 { --pa-qa-mark: url(../images/q11.gif?ver=ccbb078f91a1); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa12 { --pa-qa-mark: url(../images/q12.gif?ver=046d24218c0e); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa13 { --pa-qa-mark: url(../images/q13.gif?ver=4f7595a58758); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa14 { --pa-qa-mark: url(../images/q14.gif?ver=9c48986a65fe); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa15 { --pa-qa-mark: url(../images/q15.gif?ver=7baf8c350e16); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa16 { --pa-qa-mark: url(../images/q16.gif?ver=6156edb7758e); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa17 { --pa-qa-mark: url(../images/q17.gif?ver=692c3b4ef47f); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa18 { --pa-qa-mark: url(../images/q18.gif?ver=f18b22294354); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa19 { --pa-qa-mark: url(../images/q19.gif?ver=47eb67995a7f); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa20 { --pa-qa-mark: url(../images/q20.gif?ver=18a4062d2eaf); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa21 { --pa-qa-mark: url(../images/q21.gif?ver=05457920078a); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa22 { --pa-qa-mark: url(../images/q22.gif?ver=0dce56d61331); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa23 { --pa-qa-mark: url(../images/q23.gif?ver=c1cfe902ad36); } :where(.pa-visitor--questions, .pa-visitor--parents) .page-content__body .qa_box dl.qa24 { --pa-qa-mark: url(../images/q24.gif?ver=a771c92747b0); } } /* -------------------------------------------------------------- # 17. 節の題 5 つを、絵からテキストへ（`/visitor/questions/` の 1 ページ） 移行元は同じ 5 つの文言を、**パソコン版では絵・スマホ版ではテキスト**で出している。 dev は移行元パソコン版を投入しているので、携帯幅でも絵のまま出ていた。 大原則 3（焼き込み文言はテキストで出す）に従い、`inc/visitor-questions-section-titles.php` がテキストの塊を見出しの中へ差し込み、ここで絵を隠して文字組みをそろえる。 ## 移行元スマホ版の写し（`sp/visitor/questions/css/style.css` の 39〜47 行） h3.title { padding: 15px 0; margin: 0 0 18px; color: #a3762b; font-size: 20px; line-height: 100%; border-bottom: 2px solid #A3762B; clear: both; } 書体は同じ写しの `sp/css/common.css` の 7〜9 行（`.serif` = 游明朝の並び）。 ## 両側の実測（2026-09-05 14:23 JST・幅 375px・携帯の名乗り・本番から取得） 見たところ 移行元スマホ版 dev（直す前） 出し方 テキスト h3.title.serif 絵 ttl01.gif〜ttl05.gif 字 / 行送り 20px / 20px 17px / 25.5px 太さ / 書体 400 / 游明朝 700 / 游ゴシック 色 rgb(163, 118, 43) 黒 下線 2px solid rgb(163, 118, 43) 無し 内余白 15px 0 0 外余白 0 0 18px 0 0 18px 幅 / 高さ 328.13 / 52px 328.13 / 32.15px 🚨🚨 **この 1 行は誤りだった（Bug #4319 で訂正した）。**もとは「外余白は両側で同じ なので触らない。見出し（`h4`）の `margin: 0 0 18px` は dev がすでに持っている」と 書いてあったが、**実測は `30px 0 20px`** である。`main.css` のテーマ既定 （`.page-content__body :is(h2, h3, h4, h5, h6) { margin: var(--pa-article-block-gap) 0 20px }`） が当たっていた。**外余白は第 25 節（Bug #4319）で `0 0 18px` にそろえてある。** 内余白と下線は差し込んだ塊の側に置き、 高さ 52px（行送り 20 + 内余白 15 x 2 + 下線 2）を作る。 🚨 **行送りは `100%` で書く。**数値（`1`）で書くと子の字の大きさで計算し直される。 移行元の `100%` は親で長さに決まってから伝わる。 🚨 **`clear: both` は写さない。**移行元スマホ版はこの区画の前に浮かせた要素を置くが、 dev の本文は浮かせていない（節は `#anchor01`〜`#anchor05` が縦に並ぶだけ）。 効かない宣言を足すと「なぜ在るのか」が読めなくなるので落とした。 🚨 **書体はテーマの明朝（`--pa-font-family-serif`）を使う。**移行元の並びとは末尾の `"ＭＳ 明朝"` の 1 つだけ違うが、先に来る 游明朝 で解決するため見た目は変わらない （第 16 節の質問の字も同じ扱いで、実測が移行元と一致している）。 -------------------------------------------------------------- */ /* 携帯幅だけに出す塊。既定では隠しておき、下の `@media` で出す （幅の条件が効かない環境で、パソコン版の絵と二重に出さないため）. */ .pa-questions-ttl { display: none; } @media (max-width: 749px) { /* パソコン版の絵をやめる。読み上げは差し込んだテキストが担う. */ :where(.pa-visitor--questions) .page-content__body .qa_box > h4 img { display: none; } :where(.pa-visitor--questions) .page-content__body .qa_box > h4 .pa-questions-ttl { display: block; padding: 15px 0; border-bottom: 2px solid #a3762b; color: #a3762b; font-family: var(--pa-font-family-serif); font-size: 20px; font-weight: normal; line-height: 100%; } } /* -------------------------------------------------------------- # 19. 入口の「サービスのご案内」と「入会資格」（`/visitor/` の 1 ページ・Bug #4134） 第 14 節が入口の「3 つの要点」を扱い、第 8 節がこの区画の灰色の地を戻した。ここは **その下に続く 2 つの塊**を移行元スマホ版へそろえる。 ## なぜ携帯幅で崩れるのか この 2 つの見た目を書いているのは `assets/visitor/css/section.css` だが、その 1 本は **`(min-width: 750px)` でしか配られない**（配る側は `inc/visitor-page-css.php`）。 749px 以下では `assets/css/main.css` の全ページ共通の指定だけが残るので、区画に固有の 値（明朝の書体・金色・中央寄せ・下線）が全部落ちる。 ## 移行元スマホ版の宣言と実測（幅 375px・2026-09-07 00:5x に取得） | 何 | 移行元スマホ版 | dev（直す前） | |---|---|---| | 節の題 | 24px・黒・行送り 33.6px・字間なし・中央 | 20px・金茶・20px・2px・左 | | 4 つの導線の説明 | 15px・**明朝**・行送り 30px | 15px・**ゴシック**・27px | | 「入会資格」 | 17px・太さ 400・金色・中央・**下に金の線** | 17px・太さ 700・黒・左・線なし | | 入会資格の説明 | 14px・金色・字間 0.7px | 14px・金色・**字間なし** | 宣言の出どころ（`sp/visitor/css/style.css` と `sp/css/basic.css`）: .bg_gray h3 { margin-bottom:20px; font-size:24px; line-height:140%; text-align:center } .bg_gray dt { font-family:"游明朝",…; } #contents .sub_title { font-size:17px; color:#9f8046; letter-spacing:0.05em; text-align:center; line-height:1.5; font-weight:bold } #contents .sec04 .line::after { content:""; width:100%; bottom:-10px; left:0; border-bottom:2px solid #9f8046 } #contents .sec04 p { letter-spacing:0.05em; line-height:1.8; font-size:14px; color:#9f8046 } ## 🚨 4 つは棚卸しの道具が見ていない差である 幅 375px の全数の突き合わせ（`pa-verify-assets/f7-visitor-0907/compare-sp2.mjs`）が 2026-09-07 の棚卸しで比べたのは、字の大きさ・太さ・色・地の色・地の絵・行送り・字間・ 寄せ・字の変換・縦の寄せ・四辺の罫線だけである。**書体・内余白・外余白は採っているのに 比べておらず、擬似要素は採ってもいない。**そのため次の 4 つは Bug #4134 の本文の一覧に 出ていない。**実測で見つけたので直した**（道具の側も 3 列を足して直した）。 1. 4 つの導線の説明の書体（明朝 対 ゴシック） 2. 「入会資格」の下の金の線（移行元は `::after` で描く） 3. 節の題・導線の説明・絵の段落・並びの外余白（下の節を参照） 4. 節の題の行の切れる場所（移行元は `
` で分ける。差し込みは `inc/visitor-top-sp-points.php`） ## 🚨 外余白は測ってから触る 移行元と dev で外余白が違う（節の題 下 20px 対 28px・導線の説明 下 5px 対 18px・ 絵の段落 下 10px 対 18px・並び 下 0px 対 18px）。**測ってから直した。** 最初は「区画ぜんたいの高さが 565.88 対 567.69px で 1.81px しか違わないので、片方だけ 動かすと離れるおそれがある」と考えて触らなかった。ところが**押しボタンを高い解像度の 絵へ差し替えると、1 枚につき 6.25px 高くなる**ので、その釣り合いは崩れる。 差し替えたあとに測ると **565.88 対 727.88px（+162px）**だった。 内訳（1 つの導線あたり）: 移行元 題 30px ＋ 下 5px ＋ 絵 64.67px ＋ 下 10px = 109.67px dev 題 30px ＋ 下 18px ＋ 絵の段落 74.67px ＋ 下 18px = 140.67px 絵の段落が 74.67px なのは、**絵が行の中に置かれていて下に行の余り 10px が残る**ため である（移行元は `img { display: block }`）。 -------------------------------------------------------------- */ /* * 題の中の改行は既定で隠す。**この写しは幅の条件なしで配られる**ので、749px 以下の節の * 外に置かないと、パソコン幅で移行元に無い改行が入る。 * * 🚨 **強さを 749px 以下の節の中とそろえ、順番で勝たせる**（第 14 節と同じ型）. */ :where(.pa-visitor--top) .page-content__body .pa-visitor-ttl-break { display: none; } @media (max-width: 749px) { /* --- 節の題「パートナーエージェントのサービスのご案内」 --- */ /* * 🚨 **`.concept_list .list_inner` まで前置きする。**`.inner_ttl` はお客様の声の * 区画にも在り、`main.css` が全ページ共通で組んでいる。前置きを外すとそちらへ当たる. */ :where(.pa-visitor--top) .page-content__body .concept_list .list_inner .inner_ttl { margin: 0 0 20px; color: #000; font-size: 24px; letter-spacing: normal; line-height: 1.4; text-align: center; } /* * 題の中の改行。移行元スマホ版は「パートナーエージェントの」で行を分けるが、投入した * 移行元パソコン版は 1 行で書いてある。**字を 24px にすると 13 字目で折り返し、 * 「サ」と「ービス」の間で切れる**（実測: 描かれた字の塊が 288 対 312px）。差し込みは * `inc/visitor-top-sp-points.php` が行う. */ :where(.pa-visitor--top) .page-content__body .pa-visitor-ttl-break { display: inline; } /* --- 4 つの導線の並び --- */ /* 移行元スマホ版は `.bg_gray dl { border: none }` だけで、外余白を持たない. */ :where(.pa-visitor--top) .page-content__body .concept_list .list_inner ul.menu_concept { margin: 0; } /* --- 4 つの導線の説明 --- */ /* * 🚨 **書体も写す。**移行元は `.bg_gray dt` に明朝を当てているが、dev のこの段落は * テーマの既定のゴシックのままだった。棚卸しの道具が書体を比べないので、 * Bug #4134 の一覧には出ていない差である。 * * 🚨 **絵の段落を必ず除く。**投入の自動整形（wpautop）が絵を段落で包むので、`li p` と * 書くと**絵の段落にも当たる**。当たると絵の段落が明朝と行送り 30px を受け継ぎ、絵の * 入る行の高さが変わる（実測で書体の差として出た）。除き方は * `visitor/css/section.css` と同じ形にそろえ、**`` で包まれた形も拾う**. */ :where(.pa-visitor--top) .page-content__body .concept_list .list_inner ul.menu_concept li > p:not(:has(> a:only-child > :is(img, picture):only-child)) { margin: 0 0 5px; font-family: var(--pa-font-family-serif); font-size: 15px; line-height: 2; } /* --- 4 つの導線の絵 --- */ /* * 移行元スマホ版は絵を `dd` の直下に置き、`dd { padding: 0; margin-bottom: 10px }` を * 当てている。dev は絵が段落に包まれているので、その段落へ同じ外余白を写す. */ :where(.pa-visitor--top) .page-content__body .concept_list .list_inner ul.menu_concept li > p:has(> a:only-child > :is(img, picture):only-child) { margin: 0 0 10px; } /* * 🚨 **絵を塊にする。**行の中に置くと下に行の余りが残る（実測: 移行元の `dd` は * 64.67px なのに dev の段落は 74.67px だった）。移行元スマホ版はサイト共通で * `img { display: block }` にしている（`sp/css/common.css` の 11〜15 行）。 * * 🚨 **直下（`>`）で書くと `` で包まれた形に当たらない。**この PR で * **同じ型を 3 回踏んだ**（`section.css` の打ち消し・上の説明の当たり先・ここ）。 * 絵の差し替えは `` の中を ` > > ` に変えるので、 * `a > img` は 1 件も一致しない。**子孫（空白）で書き、包みと絵の両方を塊にする** * （包みが行の中のままだと、中の絵を塊にしても行の余りが残る）. */ :where(.pa-visitor--top) .page-content__body .concept_list .list_inner ul.menu_concept li > p > a :is(img, picture) { display: block; } /* --- 「入会資格」の見出し --- */ /* * 🚨 **上下の外余白も、ここへ足す**（Bug #6193）。移行元スマホ版の見出しは * `margin: 0 0 30px`（上 0・下 30px）だが、dev はテーマの共通の見出しの規則 * `.page-content__body :is(h2, h3, h4, h5, h6) { margin: var(--pa-article-block-gap) 0 20px }` * （`assets/css/main.css`）を受けて **上 30px・下 20px** になっていた。 * 上に 30px 増えて下が 10px 減るので、区画が **20px 高くなる**（228.69px 対 248.77px）。 * * 🚨 **左右には触れない。**この区画は全幅の組みで、左右の外余白を一括指定で * 書き換えると画面からはみ出す（Bug #6139 で実際に起きた）。`margin-block` で * 上下だけを書く。**同じ要素の規則を別の節に増やさない**ため、この 1 本へまとめる. */ :where(.pa-visitor--top) .page-content__body .sec04 .shikaku_area .sub_title { margin-block: 0 30px; color: #9f8046; text-align: center; } /* * 🚨 **太さは中の `` へ当てる。**移行元は見出しに太字を書いているのに、 * 実測は 400 だった。**基礎の CSS が `span` そのものに `font-weight: normal` を * 当てている**ためである（`sp/css/basic.css` の 14〜23 行）。要素そのものへの指定は、 * 親から受け継ぐ値に必ず勝つ。見出しの側を 400 にしても dev の `span` は * テーマの太字を受け継ぐので、**当てる先は `span` でなければならない**. */ :where(.pa-visitor--top) .page-content__body .sec04 .shikaku_area .sub_title span { position: relative; font-weight: 400; } /* * 下の金の線。移行元は `.line::after` で描く。dev の `` に `line` の目印は * 無いので `.sub_title` の中の `span` に当てる。**見出しの幅ではなく文字の塊の幅**に * そろえるため、線は `span` の側へ付ける. */ :where(.pa-visitor--top) .page-content__body .sec04 .shikaku_area .sub_title span::after { position: absolute; bottom: -10px; left: 0; width: 100%; border-bottom: 2px solid #9f8046; content: ""; } /* --- 「入会資格」の区画の余白と本文の寄せ・折り返し（Bug #6108） --- */ /* * 区画の内余白の**上下だけ**。移行元スマホ版は * `.sec04 .shikaku_area { padding: 6.3% !important }`（写し `sp/visitor/css/style.css` * 92 行）で、親が画面の幅そのもの（375px）なので **4 辺とも 23.625px** になる。 * * 🚨 **左右をここで足してはいけない（Bug #6132）。**dev は本文の器の直下の区画を * すべて「画面いっぱいの帯 ＋ 内側 6.25vw」にしており（上の第 4 節）、**移行元の * 左右ぶんはその帯がすでに受け持っている**。ここで 6.3% を足すと * 23.4375px ＋ 20.67px = 44.1px と二重に掛かり、**本文の幅が移行元より 40.97px * 狭くなって 2 行増える**（2026-09-14 04:0x に dev と移行元スマホ版を幅 375px で * 並べて実測。本文の幅 286.78px 対 327.75px・高さ 176.42px 対 125.94px）。 * * 🚨 **`%` ではなく `vw` で書く。**内余白の百分率は「親の内容の幅」が基準なので、 * 親が 328.13px の dev では 20.67px になり、移行元の 23.625px と合わない。上の * 第 4 節が `6.25vw` を使っているのと同じ理由である。 * * 🚨 **`section.css` の `padding: 0 75px 65px !important` は、この画面に当たらない。** * あちらの当たり先は `body .pa-page--visitor …` だが、この画面の body に付く印は * `pa-visitor--top` で `pa-page--visitor` は付かない（2026-09-14 02:0x に dev の * body の印を数えて確かめた）。**だから `!important` で張り合う必要は無い**. */ :where(.pa-visitor--top) .page-content__body .sec04 .shikaku_area { box-sizing: border-box; padding: 6.3vw 0; } /* * 区画の下の外余白。移行元スマホ版は `.sections.sec04 { margin: 0 auto 50px }` * （同 88 行）。 * * 🚨 **まとめ書きの `margin` を使ってはいけない（Bug #6132）。**上の第 4 節が * この区画へ `margin-inline: calc(50% - 50vw)` を当てて**画面いっぱいの帯**に * している。`margin: 0 auto 50px` と書くと左右まで `auto` で上書きしてしまい、 * 帯が器の幅（345px）へ戻る一方で `width: 100vw` は残るため、**区画が右へはみ出して * 横の巻き取り棒が出る**（2026-09-14 04:30 の実測で、入口 `/visitor/` の携帯幅で * 見た目の幅が 391px になった）。 * * 移行元の `auto` は「親の幅いっぱいなので左右の余りが 0」という意味で、dev では * 帯の `margin-inline` がその役を負う。**ここは上下だけを書く**. * * 🚨 **上の 25px は移行元の器の内余白の写しである（Bug #6398）。** * 移行元はこの区画を `#sp_wrap` の**外**に置いており（写し `sp/visitor/index.html` * で、ボタンの並びの直後に `

` があってから `
` が来る）、`sp/visitor/css/style.css` の * `#sp_wrap { padding: 25px 0 }` の**下側の 25px が区画と区画の間の空き**として出る。 * 実測（2026-09-15 13:18 / 13:27・幅 375px）: * * ボタンの並びの下端 移行元 2424.27 ／ dev 2424.27（一致） * この区画の上端 移行元 2449.27 ／ dev 2424.27（**−25.00**） * 入会資格の文の上端 移行元 2528.39 ／ dev 2503.39（**−25.00**） * * 上 2424.27 より上は両側 1px も違わない（題名の帯 86・導入 153.33・見出し 1878.39）。 * * 🚨 **dev には器の境目が無いので、同じ形では写せない。**`.page-content__body` は * `padding: 25px 0` を持つ（PR #6352）が、区画は全部その内側にあるため、その 25px は * **ページの最下部**に出る。ここへは出ない。**次に来る区画の上の外余白で写す**. */ :where(.pa-visitor--top) .page-content__body .sections.sec04 { margin-block: 25px 50px; } /* * パソコン幅の段幅で入れた 1 つめの改行を、携帯幅では効かせない。 * * 🚨 **本文の `
` は消さない。**dev の本文は移行元のパソコン版で、あの改行は * パソコン幅では正しい。投入した本文から外すとパソコン幅が壊れる。 * * 🚨 **全部を隠さない。**移行元スマホ版も `
` を 1 つ持つ（「ご入会できます。」の * 後ろ）。dev は 2 つ持ち、**余分なのは 1 つめだけ**である。まとめて隠すと 1 行減る. */ :where(.pa-visitor--top) .page-content__body .sec04 .txt_gold br:first-of-type { display: none; } } /* -------------------------------------------------------------- # 20. 親御さまへの携帯幅の字と余白（`/visitor/parents/` の 1 ページ・Bug #4135） 移行元スマホ版（`https://www.p-a.jp/sp/visitor/parents/`）の指定は 2 つの写しで 決まっている。 `sp/css/basic.css` の 14〜23 行 すべての要素の字を 13px・太さを normal にする （行送りの指定は無いので normal） `sp/visitor/parents/css/style.css` この画面だけの指定 dev はテーマの既定（字 15px・行送り 27px・下の外余白 18px）のままだった。 ## 実測（幅 375px。移行元スマホ版 対 dev） 導入の一文 16px / 20.8px / 中央 / 下 40px → 15px / 27px / 左 / 下 18px 本文の段落 3 本 13px / normal → 15px / 27px 写真 3 枚 block → inline 段落の下の外余白 13.125px / 30px / 11.5156px → すべて 18px ## 🚨 段落の下の外余白は段落ごとに違う。1 つの値でまとめると合わない 移行元は `p { margin: 0 0 4% }` と書いており、**百分率の基準は親の器の幅**である。 器 328.125px の節（`.anchor_block`） → 13.125px 器 288px の節（`#anchor04`） → 11.52px さらに説明会の節の本文だけ `class="mb30"` が付いており、30px で上書きされる （`sp/css/style.css` の 82〜84 行）。 **dev の器の幅も 328.13px と 288px で一致している**（実測）ので、`4%` と書けば 移行元と同じ値になる。**px で焼き込まない**（器の幅が変わったときに追随しない）。 ## 🚨 導入の一文は改行を差し込まないと折り返す場所が変わる 移行元は読点のあとで折り返す（HTML に `
` がある）。dev の本文に改行は無い。 字を 16px にすると 1 行に 20 字入るので、改行が無いと 「お子さまを想う気持ち、成婚コンシェルジュ」で折り返してしまう。 改行は `inc/visitor-parents-sp-parts.php` が差し込む（Bug #4134 と同じ形。目印も 同じ `pa-visitor-ttl-break` を使い回す。見せる・隠すは**ページごとに**この写しが 決めるので、入口の指定がこの画面へ漏れることはない）。 ## 🚨 改行の数が移行元スマホ版と違う段落が 2 つある 移行元は**パソコン版とスマホ版で改行の数が違う**。dev はパソコン版を写しているので、 携帯幅でもパソコン版の改行の数になる。 段落 パソコン版 スマホ版 dev 直し 導入の一文 0 1 0 差し込む（`inc/` の仕組み） 本文 1（結婚情報サービス） 3 2 3 3 つ目を携帯幅で隠す 本文 2（お子さまと一緒に） 2 2 2 そのまま 本文 3（現在、50 代男性） 0 0 0 そのまま 本文 1 の 3 つ目の改行は「ご結婚へと導きます。」のあとに在る。1 行ぶん（20px） 高くなる。**移行元スマホ版に無い改行は隠す。**導入の一文は逆に**移行元スマホ版に しか無い**ので差し込む。**向きが逆なので取り違えないこと。** ## 🚨 写真の当たり先を直下（`>`）で書いてはいけない この 3 枚はすでに `` で包まれている（Task #3519 で差し替えの表に入っている）。 `p.photo > img` と書くと**包みが挟まって当たらない**。`:is(img, picture)` で 包みと中の絵の両方に当てる（Bug #4134 で 3 回踏んだ型。詳細度は `:is()` の中の 最大値なので上がらない）。 ## 押しボタン 2 つは触らない（実測で一致を確かめた） 移行元は絵（`btn_reservation.png` / `btn_request.png`）、dev はテキストである。 dev の描画を実寸で撮り、絵と同じ描画寸法で白い墨の列を直に比べた （`pa-verify-assets/f7-visitor-0907/compare-btn-pixels.py`）。 山形（›）の位置 移行元 292.17〜301.16 対 dev 292.23〜301.20 差 0.06px 字の並びの全体の幅 移行元 134.85（資料請求）／136.65（来店予約） 対 dev 134.64 🚨 **移行元の絵 2 枚が互いに 1.8px 違う。**同じ字の大きさで作った 2 枚なので、 絵を作ったときの手詰めの差である。**「正しい 1 つの値」が無い**ため、片方に寄せると もう片方が同じだけ離れる。dev の 1 つの指定（節 13）が最も近い姿である。 ## 🚨 パソコン幅は 1px も変えない ここの規則はすべて `@media (max-width: 749px)` の中に置く。ただし**差し込んだ改行を 既定で隠す 1 本だけは外に置く**（区画別の写し `parents.css` は `(min-width: 750px)` でしか配られないため、パソコン幅で隠す指定はこちらに要る）。 -------------------------------------------------------------- */ /* * 差し込んだ改行は既定で隠す。**詳細度 0 の `:where()` で包む**ので、下の * `@media` の中の規則が並びの順で勝つ. * check-mobile-only: 意図してメディアクエリの外に置く（既定で隠す規則。塊の中の規則が並びの順で勝つ） */ :where(.pa-visitor--parents) :where(.page-content__body) :where(.pa-visitor-ttl-break) { display: none; } @media (max-width: 749px) { /* 携帯幅でだけ、移行元と同じ場所で折り返す. */ :where(.pa-visitor--parents) .page-content__body .pa-visitor-ttl-break { display: inline; } /* * 本文の段落と写真の器。移行元は要素の既定（`basic.css`）のまま 13px・行送りは * 指定なし。下の外余白は `p { margin: 0 0 4% }` で、器の幅に比例する. */ :where(.pa-visitor--parents) .page-content__body #parents p { margin: 0 0 4%; font-size: 13px; line-height: normal; } /* * 導入の一文（`.main_copy`）。移行元は 16px・行送り 130%（= 20.8px）・中央寄せ・ * 下の外余白 40px（`sp/visitor/parents/css/style.css` の 10〜15 行）。 * * 🚨 **左右の外余白を負にして、親の内余白を打ち消す（Bug #4523）。**移行元の * `div#parents` は `padding: 25px 0 25px` で**左右の内余白を持たない**ため、この * 一文の器は画面の幅いっぱいである（320px 画面で 320px）。dev の `section#parents` * は左右に内余白 `6.25vw` を持つので器が 280px しかなく、**字が両側とも 16px 固定 * なので dev だけ 1 行多く折り返していた**（320px で 62.39px = 3 行。移行元は * 41.59px = 2 行）。 * * 実測（配信中の dev へその場で当てて確かめた・`probe-4523.mjs`）: * * 幅 直す前の器 直す前の高さ 直した後の器 直した後の高さ 移行元 * 320 280 62.39 320 41.59 320 / 41.59 * 375 328.13 41.59 375 41.59 375 / 41.59 * * **375px の高さは動かない**（いま一致しているものを壊さない）. */ :where(.pa-visitor--parents) .page-content__body #parents p.main_copy { margin: 0 0 40px; margin-inline: -6.25vw; font-size: 16px; line-height: 1.3; text-align: center; } /* * 説明会の節の本文だけ、移行元が `class="mb30"` で 30px を当てている。 * dev の要素にこの目印は無いので、節と器で絞る. */ :where(.pa-visitor--parents) .page-content__body #parents01 .box01 > p.text { margin-bottom: 30px; } /* * 本文 1 の 3 つ目の改行を隠す。移行元スマホ版はここで改行しない * （パソコン版だけが「ご結婚へと導きます。」のあとで改行する）。 * * 🚨 **`:last-of-type` では書かない。**将来この段落に 4 つ目の改行が増えたとき、 * `:last-of-type` は増えたほうを隠してしまう。移行元パソコン版の改行は 3 つで確定 * しているので、**3 つ目を名指しする**（数が変わったら検査が落ちるようにしてある）. */ :where(.pa-visitor--parents) .page-content__body #parents .message p.text > br:nth-of-type(3) { display: none; } /* * 写真 3 枚。移行元はサイト共通で `img { display: block }` * （`sp/css/common.css` の 11〜15 行）。dev は行の中に置いているので、絵の下に * 行の余りが残る. * * 🚨 **幅も器いっぱいに伸ばす（Bug #8859）。**移行元の同じ規則は * `img { width: 100%; height: auto; display: block }` で、写真を器の幅まで伸ばす。 * dev の写真に当たるのは `main.css` の `img { max-width: 100% }` だけなので、 * **元の大きさ（photo01・02 は 560px・photo03 は 500px）で止まる。**器が元の幅より * 狭い 375 では両側とも縮んで同じ大きさになり、差は出ない. * * 実測（2026-09-29・移行元リポジトリの版 68e3190cb・携帯の UA）: * * 画面幅 photo01 の高さ 移行元 / dev 直す前 / 直した後 * 639 484.23 / 484.23 / 484.23（差が出ない最後の幅） * 641 485.75 / 485 / 485.75（差が出始める） * 749 567.59 / 485 / 567.59（3 枚でページが 174px 短かった） * * この規則をその場で足すと、375〜749 の 12 幅すべてで 3 枚の幅と高さが移行元と * ±0 になり、1440 では箱が 1 つも動かなかった. */ :where(.pa-visitor--parents) .page-content__body #parents p.photo :is(img, picture) { display: block; width: 100%; height: auto; } } /* -------------------------------------------------------------- # 21. よくあるご質問の携帯幅の字（`/visitor/questions/` の 1 ページ・Bug #4136） 移行元スマホ版（`https://www.p-a.jp/sp/visitor/questions/`）の指定は 2 つの写しで 決まっている。 `sp/css/basic.css` の 14〜23 行 すべての要素の字を 13px・太さを normal にする `sp/visitor/questions/css/style.css` この画面だけの指定（10〜21・39〜47 行） ## 実測（幅 375px。移行元スマホ版 対 dev） 「みなさまが気になるご質問」 16px / 20.8px / 中央 → 15px / 27px / 左 導入の一文 10px / 14px / 中央 / **ゴシック** → 15px / 27px / 左 / **明朝** 節の題 5 つ 字間 normal → 字間 0.85px ## 🚨 導入の一文は「書体が逆」で、しかも目印が違う 移行元パソコン版 `class="main_read serif"`（明朝） 改行 1 つ 移行元スマホ版 `class="main_read"`（**serif が無い**・ゴシック） 改行 3 つ dev（パソコン版を写した） `class="main_read serif"`（明朝） 改行 1 つ **dev の本文に `serif` が入っている**ので、携帯幅ではゴシックへ戻す指定が要る。 Issue の起票時に「第 17 節が節の題をテキストへ起こしたときに明朝を広く当てたため」と 推測していたが、**それは誤り**だった（原因は投入元のパソコン版の目印である）。 ## 🚨 足りない改行 2 つは `inc/` の仕組みで差し込む 移行元スマホ版は 4 行（22 / 21 / 12 / 19 字）で、dev は改行を 1 つしか持たない。 字を 10px にすると器（328.13px）に 32 字入るので、**改行が無いと切れ目の位置が 移行元と変わる**。`inc/visitor-questions-sp-lead-breaks.php` が 2 か所へ差し込み、 ここでパソコン幅では隠す（Bug #4134・#4135 と同じ目印 `pa-visitor-ttl-break`）。 ## 🚨 余白はこの節で触らない（裁定 359） この画面は**余白の作り方そのものが移行元と違う**（移行元は「節の下の外余白」で節と節の 間隔を作り、dev は「題の上の外余白」で作る）。値をそのまま写すと崩れるため、 **縦のリズムは Bug #4319 でまとめて直す**。 節と節の間隔 移行元 37.50px 対 dev 30.00px 節の題の外余白 0 0 18px 対 30px 0 20px 器（#qa）の内余白 上下 25px 対 0 最後の節と誘導帯 77.50px 対 15.00px 導入の一文の下の外余白 10px 対 18px **ここでは字の大きさ・行送り・寄せ・書体・字間だけを直す。** ✅ **上の 5 つは Bug #4319（第 25 節）で直した。**導入の一文の下の外余白だけは、 すでに在ったこの節の規則へ足してある（同じ宣言を 2 か所に持たないため）。 -------------------------------------------------------------- */ /* * 差し込んだ改行は既定で隠す。**詳細度 0 の `:where()` で包む**ので、下の * `@media` の中の規則が並びの順で勝つ（第 20 節と同じ型）. * check-mobile-only: 意図してメディアクエリの外に置く（既定で隠す規則。塊の中の規則が並びの順で勝つ） */ :where(.pa-visitor--questions) :where(.page-content__body) :where(.pa-visitor-ttl-break) { display: none; } @media (max-width: 749px) { /* 携帯幅でだけ、移行元と同じ場所で折り返す. */ :where(.pa-visitor--questions) .page-content__body .pa-visitor-ttl-break { display: inline; } /* * 「みなさまが気になるご質問」。移行元は 16px・行送り 130%（= 20.8px）・中央寄せ・ * 下の外余白 10px（`sp/visitor/questions/css/style.css` の 10〜15 行）。 * * 🚨 **下の外余白 10px は Bug #4319 で足した。**dev はテーマの段落の間隔 * （`--pa-article-paragraph-gap` = 18px）を相続していた. */ :where(.pa-visitor--questions) .page-content__body #qa p.main_copy { margin-bottom: 10px; font-size: 16px; line-height: 1.3; text-align: center; } /* * 導入の一文。移行元は 10px・行送り 140%（= 14px）・中央寄せ・**ゴシック** * （同じ写しの 16〜21 行。`.serif` を持たないので本文の既定のゴシックになる）。 * * 🚨 **書体を明示して戻す。**dev の本文は目印に `serif` を持っており、 * テーマの `.serif` が明朝を当てる。**目印を消すのは本文の書き換えになる**ので、 * ここで携帯幅だけゴシックへ戻す. */ :where(.pa-visitor--questions) .page-content__body #qa p.main_read { font-family: var(--pa-font-family-base); font-size: 10px; line-height: 1.4; text-align: center; } /* * 節の題 5 つの字間。移行元は `normal` で、dev はテーマの 0.85px が当たっている。 * * 🚨 **第 17 節の規則へ足す形にはしない。**あちらは「絵からテキストへ起こす」ための * 塊（字の大きさ・行送り・色・下の罫線・内余白）で、こちらは**移行元と違っていた * 1 項目だけの直し**である。出どころを分けておくと、どちらの Task の判断で入った * 値かが読める。 */ :where(.pa-visitor--questions) .page-content__body .qa_box > h4 .pa-questions-ttl { letter-spacing: normal; } } /* -------------------------------------------------------------- # 22. 婚活のすすめ方の携帯幅の字（`/visitor/method/` の 1 ページ・Bug #4137） 移行元スマホ版（`https://www.p-a.jp/sp/visitor/method/`）の指定は 2 つの写しで 決まっている。 `sp/css/basic.css` の 10〜23 行 すべての要素の字を 13px にする `sp/visitor/method/css/style.css` の 26〜34 行 `.sections` に字間 0.05em と 14px ## 実測（幅 375px。移行元スマホ版 対 dev） 導入の文「婚活支援サービスを…」 字間 0.7px → 字間なし（字の幅 324.83 → 322） 囲み `.box_gray` 13px / 26px / 0.7px → 15px / 27px / 字間なし ## 🚨 字間の出どころは「相続」である 移行元は `.sections` に **`letter-spacing: 0.05em`** を書いており、その要素の字が 14px なので **0.7px** に解決する。`letter-spacing` は**解決したあとの長さで相続する** ので、中の 13px の要素まで 0.7px になる（0.65px にはならない）。 🚨 **dev で `0.05em` と書き写してはいけない。**dev の `.sections` の字は 14px では ないので、同じ `em` でも別の px になる。**0.7px と書く。** ## 🚨 囲みの中の文章には字間を相続させない 囲みの中の文章（`p.serif`）は**字の大きさと行送りを自分で持つが、字間は持たない**。 器の 0.7px を相続すると**折り返しが 1 行増える**（第 6 節の 563 行の警告と同じ）。 `normal` で打ち消す。器の子孫は 5 つだけで、自分の字を持つのはこの 1 つだけである （実測）。 ## 🚨 導入の文の「下の外余白 18px」は触らない 移行元はこの位置に絵（`sec01_ph02.png`）を 1 枚挟むが、**dev はその絵をテキストと 飾りで組み直して別の場所へ移している**（Bug #4137 の対象外に明記）。つまり dev の 「段落 → 注記」の隙間には**移行元に対応する値が無い**。外余白を 0 にすると注記の塊が 18px 上がるが、それが移行元の姿だと言える根拠が無いので触らない。 ## 🚨 押しボタンの絵はすでに移行元スマホ版になっている `sec01_btn.png` は第 6 節（621 行）の `content` で移行元スマホ版の 840x144 へ 差し替え済みである。Bug #4137 の本文が書いた「dev の原寸 425x60」は**置き換えられる 前の値**であって、描かれている絵ではない（`currentSrc` と `naturalWidth` の罠）。 -------------------------------------------------------------- */ @media (max-width: 749px) { /* * 囲みの器の字。移行元は 13px / 行送り 26px / 字間 0.7px。 * * 器そのものは字を持たないが、**押しボタンの絵と包みへ相続する**ので、 * 棚卸しの突き合わせに 6 件の差として出る。 */ :where(.pa-visitor--method) .page-content__body .box_gray { font-size: 13px; letter-spacing: 0.7px; line-height: 26px; } /* * 🚨 囲みの中の文章は字間を相続させない（相続すると折り返しが 1 行増える）。 */ :where(.pa-visitor--method) .page-content__body .box_gray .serif { letter-spacing: normal; } /* * 導入の文の字間。移行元は `.sections` の 0.05em（= 14px の 0.7px）が相続する。 * * 🚨 **当たり先を `.sections` まで広げない。**dev の `.sections` の中には、 * 移行元の絵をテキストと飾りで組み直した区画（成婚率のキャッチ・棒グラフ・ * 注記 ※1〜5）が入っており、そこには移行元と対応しない字間が要る。 * **移行元と組になった要素だけに当てる。** */ :where(.pa-visitor--method) .page-content__body #visitor .sec_inner > p:not([class]) { letter-spacing: 0.7px; } } /* -------------------------------------------------------------- # 23. 親御さまへの見出し（`/visitor/parents/` の 1 ページ・Bug #4210・裁定 372） 移行元は**パソコン版とスマホ版で、この 3 つを絵と文字で入れ替えている**。 見出し 1「無料の説明会にぜひご参加ください。」 PC 絵 ttl01.gif / SP 文字（2 行） 見出し 2「親御さまからのよくある質問」 PC 絵 ttl02.gif / SP 文字（1 行） 見出し 4「友人のようにサポートする…」 PC 絵 copy.gif / SP **要素ごと無い** dev は移行元パソコン版を投入しているので、携帯幅でもパソコン版の絵が並ぶ。 **文言は dev の DOM に文字として 1 つも無く、`alt` の中だけ**である（実測）。 したがって CSS だけでは出せず、`inc/visitor-parents-sp-headings.php` が差し込む。 ## 移行元スマホ版の指定（`sp/visitor/parents/css/style.css` の 39〜47 行） h3.title { padding: 15px 0; margin: 0 0 18px; color: #a3762b; font-size: 20px; line-height: 100%; border-bottom: 2px solid #A3762B; } 箱の高さはこれで完全に説明できる（15 ＋ 行数 x 20 ＋ 15 ＋ 罫線 2 = 1 行なら 52・ 2 行なら 72）。実測と 1px も違わない。 ## 🚨 携帯幅では `parents.css` が 1 行も当たらない（当たり先は弱い形で足りる） `assets/visitor/css/parents.css` の 238〜242 行には、この 2 つの見出しへ当たる規則が 在る（`body .pa-page--visitor .page-content__body #parents > section > h4` = id 1 + クラス 2 + 要素 3 で `font-size: 16px; line-height: 32px`）。 強さだけを見ると `:where()` の形（id 1 + クラス 1 + 要素 1）は負ける。 **ところがあの写しは `(min-width: 750px)` で配られる** （`inc/visitor-page-css.php` の `PA_VISITOR_PAGE_CSS_MEDIA`）。**携帯幅では `` の条件が当たらないので、1 行も効かない。**実ページで測って確かめた （弱い形でも 20px / 20px / 罫線 2px / 箱 328.13x72 になった）。 🚨 **強さの計算だけで判断しない。**最初は「クラス 3 つで書かないと負ける」と 判断したが、それは**すべての写しを 1 つの `