/* * サービス紹介の区画で、テーマと写しがぶつかる箇所だけの調整（Bug #2316）。 * * このファイルは手で書く。写し（section.css ほか）は道具で作り直すので、 * 手で足した調整はここへ置く。 */ /* * 🚨 ここから下はパソコン幅（750px 以上）だけの写しである。 * * このファイルは全部の幅へ配られる（`inc/service-page-css.php` の * PA_SERVICE_PAGE_CSS_MEDIA = 'all'）。幅で絞るのはこの `@media` の役目なので、 * この包みの外に規則を書くと、携帯幅でもパソコン幅の組みが当たってしまう。 * * 携帯幅の直しは、このファイルの末尾に `@media (max-width: 749px)` を足して * その中へ書く。移行元は携帯の名乗りに対して `/sp/service/` の別サイトを返す * ため、中身はパソコン幅の写しではなくスマホ版に合わせる（裁定 46）。 * * **中身の字下げは増やしていない。**包むためだけに全行を字下げし直すと差分が * 読めなくなるためである。包み忘れは検査（tests-retired/pa-cms-service-page-css/）が * 見張る。 */ @media (min-width: 750px) { /* * ------------------------------------------------------------------ * 本文の器の柱を外す * ------------------------------------------------------------------ * 移行元のサービス紹介は、区画の囲みを画面の全幅（1440px）に広げ、その中で * 1280px ／ 1268px の帯を中央に置いている。**テーマの本文の器は 1100px で * 固定されているため、写しただけでは帯が入りきらない。** * * マンガ（Bug #2313）と同じやり方で、この区画に限って器を画面の全幅へ広げる。 * * **その指定はここには無い。**5 区画で中身が 1 文字も違わなかったため、 * `assets/css/section-fullwidth.css` の 1 本へまとめた（Task #2454）。この区画は * `inc/service-page-css.php` が `PA_SERVICE_PAGE_CSS_PC_MEDIA`（750px 以上）で * その 1 本を配る。**その 1 本だけは配る側で幅を絞る。**実体を 8 区画が共有して * おり、中を `@media` で包むと他の 7 区画の境目まで動いてしまうためである。 */ /* * ================================================================== * 🔴 暫定: 移行元のサイト共通 CSS の写し（Bug #2316） * ================================================================== * **この節はいつか共通側へ写してまるごと消す。撤去は Bug #3327 が受け持つ。** * 区画に閉じた暫定であり、共通側が正しい置き場である。婚活川柳（Bug #2351）で * 同じ形の暫定を入れており、そちらと一緒に撤去の対象になる。 * * 🚨 **宛先を Issue #2363 と書いていたが、それは誤りだった（2026-09-09 に訂正）。** * #2363 は 2026-08-28 に「完了」として閉じられたが、**この 2 つの規則は共通側へ * 移っていない。**`assets/css/main.css` を調べても、サービス配下の `.main_ttl` を * 幅 1268px の帯にする規則も `.category_menu02` を帯にする規則も無い。 * **「#2363 が閉じているから移し終えたはずだ」と読んでこの節を消すと、パソコン幅の * 題名帯と区画メニューが器の全幅へ広がる。** * * 🚨 **共通側へ写すときは当たり先を必ず絞ること。**`main_ttl` はこのテーマの中で * 意味が 2 つある。もう 1 つはサイトマップの `li.main_ttl`（列の先頭に立つ項目・ * 9 件）で、`assets/css/main.css` が別の用途で当てている。当たり先を絞らずに * 共通側で幅 1268px を出すと、そちらが壊れる。 * * 当初は #2322 を宛先にしていたが、#2322 は「先頭へ戻る」だけに絞られ、 * 残りの共通 CSS は #2363 へ分けられた（2026-08-27）。その #2363 も上のとおり * 移さずに閉じたので、いまの宛先は Bug #3327 である。 * * ## なぜ要るか（2026-08-27・幅 1440px で実測） * * 大見出しと区画のメニューは、移行元では幅 1268px の帯として中央に置かれる。 * **この 2 つの規則は移行元の `css/style.css`（サイト共通）にあり、ページ専用 * CSS の側には無い。**写しただけでは器の全幅へ広がり、移行元と食い違う。 * * .main_ttl … 移行元 幅 1268px（x=86） → dev 幅 1440px（x=0） * .category_menu02 … 同上。中の項目も横並びにならず縦に積まれる * * 写し元では `#contents` で絞っているが、その器は移し先に無いので落とす * （区画の目印がその役を果たす）。 */ body .pa-page--service .page-content__body .main_ttl { margin: 0 auto; width: 1268px; height: 170px; } /* * 題名の画像の器の高さを、移行元と同じ関係へ戻す（Issue #2729）。 * * 移行元は同じ強さの規則を 2 本並べ、**あとに書いたほうで上書きする**作りである。 * * #contents .main_ttl { … height: 170px; } * #contents .main_ttl02 { … height: auto; } * * どちらも (1,1,0) で同じ強さである。本文の要素は 2 つの類名を両方持つので * （`

`）、**あとに書いてある `height: auto` が * 勝ち、高さは中身なりになる**（実測 96px）。 * * 写しはこの 2 本を別のファイルへ分けたため、その関係が崩れた。 * * .main_ttl { height: 170px } … このファイル。(0,3,1)・読む順は最後 * .main_ttl02 { height: auto } … main.css。 (0,2,0)・読む順は最初 * * 強さでも順番でも `.main_ttl` が勝つため、移行元では効かないはずの 170px が * 出ていた（サービス紹介の全 7 ページで 96px → 170px。差 74px）。 * * ここで `.main_ttl02` を同じ強さ (0,3,1) で、すぐあとに置く。移行元の 2 本の * 関係をそのまま再現した形になる。 * * 🚨 **上の `.main_ttl` の 170px は消さない。**`.main_ttl` だけを持つ要素 * （他区画の題名の画像）には 170px が正しく、移行元も消していない. */ body .pa-page--service .page-content__body .main_ttl02 { height: auto; } body .pa-page--service .page-content__body .category_menu02 { box-sizing: border-box; position: relative; top: -55px; padding: 0; padding-left: 300px; width: 1268px; height: auto; margin: 0 auto; font-size: 15px; background: none; } body .pa-page--service .page-content__body .category_menu02 li { float: left; border-left: 1px solid #000; line-height: 1; } body .pa-page--service .page-content__body .category_menu02 li:last-child { border-right: 1px solid #000; } body .pa-page--service .page-content__body .category_menu02 li a { padding: 0 20px; text-decoration: none; background: none; } /* * 回り込みの清算。移行元 `css/common.css` の 328 行目。**上の区画のメニューが * 回り込みで並ぶため、清算が無いと囲む器が潰れる。**婚活川柳（Bug #2351）で * 器の高さが 2144px → 416px に潰れ、はみ出した中身が脚注に重なった。 */ body .pa-page--service .page-content__body .clearfix::after { display: block; clear: both; height: 0; visibility: hidden; line-height: 0; content: "."; } /* * 概要の区画の器の柱を外す。移行元 `css/page_company.css` の 66 行目。 * **上の節と同じ暫定であり、共通側へ写すときに一緒に消すこと。撤去は Bug #3327 が * 受け持つ**（宛先を Issue #2363 と書いていたが、#2363 は移さずに閉じた。 * 2026-09-09 に訂正）。 * * 移行元では、区画専用の `service/css/style.css` が `#concept { width: 600px }` * を当てているが、**サイト共通の `page_company.css` にある * `#contents #concept { width: auto }` が勝つ。**先に読まれるにもかかわらず * 勝つのは、`id` を 2 つ持つぶん詳細度が高いためである（読む順ではなく * 詳細度で決まる）。結果として移行元の器は画面の全幅（1440px）になる。 * * **写しは移行元の CSS に忠実で 600px のままなので、これが無いと帯が * 画面幅いっぱいに広がらない。**移し先に `#contents` は無いため、区画の * 目印で同じ強さを作る。 * * 幅 1440px の実測（Bug #2551）: * * これが無い 器 600px（x=420）／ 主役の絵 600px（x=420） * これが有る 器 1440px（x=0）／ 主役の絵 1440px（x=0）← 移行元と一致 */ body .pa-page--service .page-content__body #concept { width: auto; } /* * ------------------------------------------------------------------ * 絵の高さを HTML の height 属性の値へ戻す（2 枚だけ） * ------------------------------------------------------------------ * テーマは `img { max-width: 100%; height: auto }` を全体へ当てている * （`assets/css/main.css` の `img { max-width: 100%; height: auto }`。行番号は * 動くので字面で引く）。**この `height: auto` が HTML の * `height` 属性を上書きする。**移行元にこの指定は無いので、移行元は属性の値 * どおりに描く。 * * ふつうは絵の実寸と属性が同じなので差は出ない。**サービス紹介では 2 枚だけ * 食い違っており、その 2 枚が移行元より低く描かれる。** * * 他社のご利用経験がある方へ `#experienced02` の「1年以内の交際率」の写真 * `img02.png` … 実寸 525x299 ／ 属性 height="300" → dev が 1px 低い * ご入会後のプロセス `#step5` の Step.5 の絵 * `flow05_step.png` … 実寸 81x23 ／ 属性 height="26" → dev が 3px 低い * * **テーマ全体の `height: auto` は消さない。**幅 2000px 級の絵が 411 件あり、 * 狭い画面での横のはみ出しを防いでいる意図の規則である。この 2 枚だけ戻す。 * * 当たり先が 1 か所ずつであることを確かめてある。`.experienced_box2` は 1 個。 * Step の絵は他の 7 枚（Step.0〜4・6・7）が実寸も 26px なので差が出ず、同じ * `flow.css` を読む「入会から成婚までの流れ」（`/service/flow/index0706/`）は * Step の絵を 1 枚も持たない。 * * 🚨 **この 2 つは写しではなく手書きの調整なので、生成物（`experienced.css` / * `flow.css`）には置かない。**置くと写しを作り直したときに消える。 */ body .pa-page--service .page-content__body .experienced_box2 p.photo img { height: 300px; } body .pa-page--service .page-content__body #step5 .step_ico img { height: 26px; } /* * ------------------------------------------------------------------ * 携帯幅で足した題名のテキストを隠す * ------------------------------------------------------------------ * `inc/service-sp-title-text.php` が、題名の `h2` の中へ移行元のスマホ版と同じ * 文言をテキストで足す。**パソコン幅の題名は移行元と同じ画像なので、テキストは * 出さない。**出すと題名が二重になる。 * * 🚨 **この規則が、足したテキストを隠す唯一の手段である。**`bridge.css` はいちばん * 外側が `@media (min-width: 750px)` と `@media (max-width: 749px)` の 2 つで、この * 2 つで全部の幅を覆う。**これが無いとパソコン幅に題名が二重に出る**（画像の題名と * テキストの題名が縦に並ぶ）。この塊の外へ動かしても同じことが起きる. */ body .pa-page--service .page-content__body .pa-service-sp-title { display: none; } /* * 節の題のテキスト（A-3a）も、パソコン幅では出さない。移行元のパソコン版と同じ * 画像がその場所の題そのものである。**これが無いとパソコン幅に題が二重に出る.** */ body .pa-page--service .page-content__body .pa-service-sp-section-title { display: none; } /* PDCA の見出しのテキスト（A-3b）も、パソコン幅では出さない. */ body .pa-page--service .page-content__body .pa-service-sp-list-title { display: none; } /* * 9 バリエーションの札の組み（Task #3426）も、パソコン幅では出さない。 * パソコン幅は 1 枚の絵（sec03_ph02.png）がそのまま区画の本体である. */ body .pa-page--service .page-content__body .pa-service-sp-variation { display: none; } /* * チームサポートの 3 つの塊（Task #3429）も、パソコン幅では出さない。 * パソコン幅は 1 枚の絵（sec03_ph.jpg）がそのまま区画の本体である. */ body .pa-page--service .page-content__body .pa-service-sp-team { display: none; } /* * リンクサポートの区分名のテキスト（Task #3298）も、パソコン幅では出さない。 * パソコン幅は縦組みの絵（sec02_flowNN_title.png・62x176）が区分名の本体である. */ body .pa-page--service .page-content__body .pa-service-sp-link-stage { display: none; } /* * コンセプトの導入文のテキスト（Bug #3881）も、パソコン幅では出さない。 * パソコン幅は主役の写真に重なる絵（concept_mv_txt.png・476x190）に同じ 77 文字が * 焼き込まれており、そちらが導入文の本体である. */ body .pa-page--service .page-content__body .pa-service-sp-concept-lead { display: none; } /* * ------------------------------------------------------------------ * 「他社のご利用経験がある方へ」の携帯幅で足した組み 3 種を隠す（Issue #3437） * ------------------------------------------------------------------ * `inc/service-experienced-sp.php` が、`/service/experienced/` の本文へ 3 種を足す。 * **どれも移行元スマホ版だけが持つ組みなので、パソコン幅では 1 つも出さない。** * * 1. 節の題のテキスト（移行元パソコン版はその場所の画像が題そのものである。 * 出すと題が二重になる） * 2. ページ内の目次（移行元パソコン版に目次は無い） * 3. 導入文の改行（移行元パソコン版は 2 行である。出すと 3 行になる） * * 🚨 **この規則が、足した組みを隠す唯一の手段である。**`bridge.css` はいちばん外側が * `@media (min-width: 750px)` と `@media (max-width: 749px)` の 2 つで、この 2 つで * 全部の幅を覆う。この塊の外へ動かすと、携帯幅でも隠れて 3 種とも出なくなる. * * 🚨 **`br` は `display: none` で改行そのものが消える。**`visibility: hidden` では * 幅が 0 になるだけで改行は残り、パソコン幅が 3 行のままになる. */ body .pa-page--service .page-content__body .pa-service-experienced-title, body .pa-page--service .page-content__body .pa-service-experienced-anchors, body .pa-page--service .page-content__body br.pa-service-experienced-break { display: none; } /* * 5つの約束の本文の欄が、幅 1280px で 50px 狭くなる（Bug #3878） * ------------------------------------------------------------------ * **原因は `box-sizing` の違いだけである。**移行元は全体の初期化に `box-sizing` を * 持たない（既定の `content-box`）が、このテーマは `main.css` の 617〜620 行で * `*`・`*::before`・`*::after` に `border-box` を当てている。 * * 差が出るのは、移行元と写しの両方が持つこの宣言である * （`service/css/promise.css` と移行元 `service/promise/css/style.css`）。 * * `@media (max-width: 1330px) { .sections .sec_inner dl div { padding: 0 50px 5px; max-width: 450px } }` * * `content-box` なら `max-width` は**中身**に効くので中身が 450px になる。 * `border-box` なら**外形**に効くので中身は 450 − 50 = 400px に縮む。 * 前書きの `.sec00` も同じ理由で 527 → 430 になる（`max-width: 530px` ＋ 内余白 50px）。 * * 🚨 **原因が `box-sizing` だけであることは実験で確かめた。**移行元の写しをそのまま開き、 * `* { box-sizing: border-box }` を**1 行足すだけ**で dev の実測値と小数まで一致した。 * 自分で HTML を組まないので、当たり先の食い違いも入れ子の違いも入らない。 * * 写しのまま … `dl` 627 / 500 / 500、`dt` 527 / 450 / 450（＝移行元の実測） * 1 行足す … `dl` 627 / 450 / 450、`dt` 430 / 400 / 400（＝dev の実測） * 直しを足す … 写しのままの値に戻る * * 台本は `pa-verify-assets/f3-service-0905/probe-3878-boxsizing.mjs` と * `probe-3878-fix.mjs`（リポジトリ外）。 * * 🚨 **`@media (max-width: 1330px)` の中だけに閉じる。**1330px より広いときは内余白が * `0 80px`（`.sec00` は `80px 0` で左右 0）で `max-width` が効かないため、`box-sizing` を * 変えても値は動かない。実験でも幅 1440px は 3 通りとも `dl` 707 / 630.41 / 656.17・ * `dt` 530 / 470.41 / 496.17 で 1 画素も動かなかった。 * **いま合っている 1440px を触らないために、範囲を広げないこと。** * * 🚨 **当たり先を 5つの約束に絞る。**同じ `.sec_inner dl div` の組みは他の画面にもあり、 * 広げると合っているものを動かす。 */ @media (max-width: 1330px) { body.pa-service-page--promise .page-content__body .sections .sec_inner dl div { box-sizing: content-box; } } /* * パーソナル婚活プログラムの節 3 のリードで、携帯幅だけの改行の目印を隠す（Bug #4187） * ------------------------------------------------------------------ * `inc/service-sp-point-lead-breaks.php` がこのリードの 12 字目へ * `
` を足す。移行元スマホ版がこのリードを絵に焼き込んでおり、 * 12 字 ＋ 13 字（「出会いの質を高める多様な」／「出会いのチャンスがあります」）で * 切っているためである。dev は自然な折り返しで 15 字 ＋ 10 字になっていた。 * * 🚨 **パソコン幅ではその目印を隠す。**パソコン幅は本文が持つ 9 字目の `
` が * そのまま効いて 9 字 ＋ 16 字であり、**移行元のパソコン版と一致している**。目印を * 出すと 3 行になって壊れる。実測で 1440px の高さ 90px が動かないことを確かめてある。 * * 🚨 **この規則と、下の携帯幅の `br:not(.pa-br-sp)` は組でしか成立しない。** * 片方だけだと、パソコン幅が 3 行になるか、携帯幅が 15 字 ＋ 10 字に戻るかのどちらかに * なる。`tests-retired/pa-cms-point-lead-break/` が両方そろっていることを見張る。 */ body.pa-service-page--point .page-content__body .sections.sec03 .txt_inner h5.service_sub_title .pa-br-sp { display: none; } /* * 入会から成婚までの流れの導入文へ足した、携帯幅だけの改行を隠す（Bug #4999）。 * * `inc/service-sp-flow-lead-breaks.php` がこの導入文の 24 字目へ * `
` を足す。移行元スマホ版がこの導入文を絵に焼き込んでおり * （`sp/service/flow/images/sec01_txt.png`）、**3 行**で組んでいるためである。 * * 🚨 **パソコン幅ではその目印を隠す。**パソコン幅は本文が持つ 14 字目の `
` が * そのまま効いて 2 行であり、**移行元のパソコン版と一致している**。目印を出すと * 3 行になって壊れる。 * * 🚨 **携帯幅では本文が持つ `
` を隠さない。**移行元スマホ版も読点の直後で * 切っており、2 つの改行が両方要る。**姉妹のパーソナル婚活プログラムとはここが違う** * （あちらは携帯幅で `br:not(.pa-br-sp)` を隠す）。 */ body.pa-service-page--flow .page-content__body #flow > h4.service_sub_title .pa-br-sp { display: none; } /* * 5つの約束で、上下 2 つのパンくずの地色を白にする（Bug #4605・パソコン幅） * ------------------------------------------------------------------ * このページは `.ttl_promise::before` が画面いっぱいの写真を `position: fixed` * ＋ `z-index: -1` で敷く（`assets/service/css/promise.css`）。地色を持たない * 要素はその写真の上に乗る。dev のパンくずは地色を持たないため、移行元では * 白い帯の中にあるパンくずが、dev では写真の上に出ていた。 * * 移行元はパンくず（`div.path`）を白い帯（`div.promise_bg`）の**中**に置く。 * 上は `div.path` ＋ 見出し ＋ 区分の並び、下は `box_support` ＋ `div.path` の順で * ある（`legacy/www.p-a.jp/public/service/promise/index.html` の 80〜85 行と * 284〜288 行）。dev のテーマはパンくずを本文の器（`.page-content`）の外に描く * ので、帯の高さは上が 111px（移行元 183px）、下が 932px（移行元 1004px）に * なる。**差の 72px はパンくずの高さそのものである。** * * 🚨 **要素は動かさない。地色だけを敷く。**上の帯の下端は移行元 304px に対して * dev 303px、下の帯の上端は移行元 7167.06px に対して dev 7166.06px で、 * **中身の位置は 1px 以内で既に合っている**（幅 1440px の実測）。パンくずを帯の * 中へ移すとテーマの雛形を触ることになり、同じ雛形を使う全ページへ波及する。 * 白い地色をパンくずまで敷けば、見えている白い面は移行元と同じ 183px / 1004px に * なる（司令塔の裁定・案 B）。 * * 🚨 **当たり先をこのページに絞る。**`body.pa-service-page--promise` を前置する。 * 画面いっぱいの写真を敷くのはこのページだけであり、外すとサービス配下の * 残り 6 ページのパンくずの地色まで動く。 * * 携帯幅は対象外である。`assets/css/main.css` の `@media (max-width: 749px)` が * `.pa-breadcrumb { display: none }` を当てており、パンくず自体を出さない。 */ body.pa-service-page--promise .pa-breadcrumb { background: #fff; } /* * 5つの約束の登場演出を、動きを控える設定のときは伏せない（Bug #3114・パソコン幅） * ------------------------------------------------------------------ * 伏せる指定はパソコン幅と携帯幅で別のファイル・別の当たり先に在る。ここは * パソコン幅の分で、`assets/service/css/promise.css` 201 行が置く * `opacity: 0.1` ＋ `translate(0, 50px)` ＋ `transition: all 600ms` を打ち消す。 * 携帯幅の分は、このファイルの携帯幅の塊の末尾に同じ形で置いている。 * * 🚨 **この囲みは幅の塊の中へ入れる。**幅の塊の外に置くと、区画別 CSS の検査 * （`tests-retired/pa-cms-service-page-css/`）が「いちばん外側に許していない条件がある」 * として落とす。あの検査は、幅で絞る包みの書き忘れを見張っている。 * * **打ち消す側の詳細度は考えなくてよい。**このファイルは区画の写し 6 本より * **あとに**配られる（`inc/service-page-css.php` の * `pa_service_page_css_enqueue_assets()` が `section` → `article-reset` → * ページ別の写し → `bridge` の順で並べる）。同じ詳細度なら後のこちらが勝つ。 * * 🚨 **伏せる指定と遷移の両方を打ち消す。**印（`.scrollin`）を付ける側だけを * 止めると、18 の段が `opacity: 0.1` のまま残って本文が読めない。遷移を残すと、 * JavaScript が印を付けた瞬間に 600ms の動きが走る。 * * 移行元自身はこの設定を見ない。テーマの他の登場演出（`assets/css/main.css` の * `.pa-reveal`）に揃える司令塔指示に沿った上乗せである（移行元との差ではない）。 * 対になる JavaScript 側の直しは `assets/service/js/promise-fadein.js` にある。 */ @media (prefers-reduced-motion: reduce) { body .pa-page--service .page-content__body .sections .fadein { opacity: 1; transform: none; transition: none; } } } /* * 🚨 ここから下は携帯幅（749px 以下）だけの直しである。 * * 移行元は携帯の名乗りに対して `/sp/service/` の別サイトを返す。上のパソコン幅 * の写しは、そのサイトとは骨組みも画像も別物なので、**携帯幅では 1 行も効かせて * いない**（上の `@media (min-width: 750px)` の中に閉じてある）。ここへ書くのは * 「移行元のスマホ版に寄せる直し」である（裁定 46）。 * * ページごとに値が違うので、`body` に付く目印で書き分ける（`pa-service-page--` * + `/service/` から下の経路。`inc/service-page-css.php`）。本文の器に付く * `pa-page--service` は URL の先頭階層だけなので、ページを区別できない。 * * 🚨 **「入会から成婚までの流れ」（`/service/flow/index0706/`）だけ、比べる相手が * 分かっていない。**移行元の写しに `sp/service/flow/index0706.html` は無く * （`sp/service/flow/` は `index.html` だけ）、携帯の名乗りをどこで転送している * かも写しからは特定できない。**この画面の携帯幅の合否は判定できない。**下の * 直しはこの画面にも当たるが、他の 6 画面と同じ扱いにしているだけである。 */ @media (max-width: 749px) { /* * ------------------------------------------------------------------ * 本文の左右の余白を、移行元のスマホ版と同じ「画面幅の 6.25%」にする * ------------------------------------------------------------------ * 移行元のスマホ版は、器の左右を**割合**で置いている。写し元の * `sp/css/common.css` と `sp/css/style.css` は `6.25%` を通しで使う。 * 画面幅 375px なら 23.4375px になり、実測の 23.44px と合う。 * * dev はテーマの共通の余白（`.page-content { padding: 0 var(--pa-inner-gutter) }`・ * `--pa-inner-gutter` は 15px）をそのまま使うので、幅 375px で 345px（左 15px）に * なる。**固定値なので画面幅が変わっても 15px のままで、移行元のように広がらない。** * * 割合を当てる先は `.page-content` である。この器は画面の全幅（375px）に広がり、 * その親も全幅なので、**百分率の基準がちょうど画面幅になる。**中の * `.page-content__body` へ当てると基準が 345px になり、23.44px ではなく 21.56px に * なってずれる。 * * **7 画面すべてに当てる。** * * 🚨 **画面 Issue #3109 の A-1 は「コンセプトだけ移行元も 345px / 左 15px」と書いて * いたが、これは誤りだった。**その 345px / 15px は本文ではなく、**下部の誘導帯の * 中の要素**（`div#other_contents` の中の 10 要素）を測った値である。器の代表値を * 「いちばん多い寸法」で取る作りだったため、本文の区画が少ないコンセプトでは帯の * ほうが多数派になっていた。 * * 採取データを要素ごとに数え直すと、**コンセプトの本文も他の 6 画面と同じ**である。 * * 移行元(SP) `div#contents` x=0 幅=375 （全幅の外枠） * 移行元(SP) `div.sp_wrap_body` x=23.44 幅=328.13 ← 本文。他の 6 画面と同じ * 移行元(SP) 誘導帯の中の要素 x=15 幅=345 ← A-1 が拾っていたのはこれ * * 幅 375px の実測（移行元 = 本番を 2026-09-03 22:0x JST に携帯の名乗りで取得）: * 移行元(SP) の本文は 7 画面とも x=23.44・幅 328.13、dev は 7 画面とも x=15・幅 345。 */ body.pa-service-page .page-content { padding-left: 6.25%; padding-right: 6.25%; } /* * ------------------------------------------------------------------ * 移行元が画面の全幅で出している要素だけ、その余白を打ち消す * ------------------------------------------------------------------ * 移行元のスマホ版は、**左右の 6.25% を本文の文章の塊に付けており、外側の器は * 全幅**である。そのため器の中にありながら画面の端まで広がる要素がある。すぐ上 * の規則は本文の器そのものへ余白を当てるので、**これらも 6.25% 内側に入って * しまう。**（余白を当てる前の左右 15px よりも移行元から遠くなる。） * * 幅 375px の実測（移行元 = 本番を 2026-09-03 22:0x JST に携帯の名乗りで取得）: * * `.mainVisual` コンセプト 移行元 x=0 幅=375 / dev x=15 幅=345 * `.concept_list` コンセプト・専任担当伴走・パーソナル婚活 同上 * `.main_copy` 他社のご利用経験がある方へ 同上 * * **打ち消す量は本文の器の幅に対する 1/14（約 7.142857%）である。**器の左右の * 余白は画面幅の 6.25%、器の中身の幅は画面幅の 87.5% なので * `0.0625 ÷ 0.875 = 1/14` になる。**画面幅によらず一定なので割合のまま書ける。** * 固定の px で書くと、狭い画面で打ち消しが足りず（または効きすぎて）はみ出す。 * * **dev の実ページで 3 つとも確かめた**（幅 375px・2026-09-04）。`/service/` で * `.mainVisual` と `.concept_list`、`/service/experienced/` で `.main_copy` が、 * どれも x=15 幅=345 → **x=0 幅=375** になり、横のはみ出しは前後とも 0px だった。 * * 🚨 **当たり先をこの 3 つより広げてはいけない。**移行元で全幅なのはこの 3 つ * だけで、他の要素は 6.25% の内側にある。広げると本文が画面の端に貼り付く。 * * 移行元で全幅だが**この直しに入れていないもの**は 2 通りある。 * * 1. **dev に相手の要素が無い**（他社のご利用経験がある方への `.anchor_menu`、 * 5つの約束の `.category_ttl02`）。どちらも移行元のスマホ版だけの骨組みで、 * 移行元のパソコン版の写しにも無いため 1 対 1 で対応しない * 2. **相手はあるが、そろえるのに骨組みか意匠の判断が要る**。判断を仰いでから * 扱う（#3164） * - 5つの約束の `.ttl_promise`（移行元パソコン版の `promise/index.html` * 91 行と dev の `promise.css` にある。**ただし移行元のスマホ版は縦の * 内余白 22vh と貼り付く背景を持つ別の意匠**なので、全幅にするだけでは * そろわない） * - 専任担当伴走サポートとパーソナル婚活プログラムの `.sections` の上罫線 * （移行元は本文の塊が section の内側にあるため罫線が全幅になる。dev で * 同じにするには器の入れ子を変える必要がある） */ body.pa-service-page .page-content__body :is(.mainVisual, .concept_list, .main_copy) { margin-left: -7.142857%; margin-right: -7.142857%; } /* * ------------------------------------------------------------------ * 全幅にした 2 つは、中身の位置も移行元にそろえる * ------------------------------------------------------------------ * 🚨 **器を全幅にするだけでは、中身が画面の端に貼り付いて第 1 弾より悪くなる。** * 移行元のスマホ版は、全幅の器の**内側**で中身を戻しているためである。dev の * 同じ指定は写しの中にあるが、写しはパソコン幅の包みの中なので携帯幅では * 1 行も効かない。 * * 幅 375px の実測（移行元 = 本番を 2026-09-03 22:0x JST に携帯の名乗りで取得）: * * 移行元 `.concept_list` x=0 幅=375・**内余白 23.625px**・地の色 rgb(245,245,245) * 　中の `ul.menu_concept` x=23.63 * 移行元 `.main_copy` x=0 幅=375・**中央寄せ** * dev（この直しの前） どちらも内余白 0・地の色なし・左寄せ * * **内余白は器の幅に対する 7.2% である。**移行元は画面幅の 6.3%（375px で * 23.625px）で、器の中身の幅は画面幅の 87.5% なので `0.063 ÷ 0.875 = 0.072`。 * 上の打ち消しと同じ考え方で、画面幅によらず一定になる。 * * 写し元は `sp/service/css/style.css` 80〜84 行（コンセプト）・ * `sp/service/multi/css/style.css` 77〜81 行・`sp/service/point/css/style.css` * 71〜75 行（`.concept_list`）と、`sp/service/experienced/css/style.css` * 10〜15 行（`.main_copy`）。 * * 🚨 **字の大きさは合わせていない**（移行元 13px / 16px 対 dev 15px）。区画ごとに * 例外があり見出しは向きが逆なので、区画を上から順に測ってから別の本で扱う。 */ body.pa-service-page .page-content__body .concept_list { background-color: #f5f5f5; padding: 7.2%; } /* * 関連ページの案内の中の、2 つのリンクの空き（Task #3708） * ------------------------------------------------------------------ * 上の規則で灰色の帯そのものは移行元とそろったが、**中のリンクの空きだけが * 落ちていた**。幅 375px の実測で、移行元スマホ版の帯 174.59px に対し dev は * 193.59〜193.97px（コンセプト・専任担当伴走サポート・パーソナル婚活プログラムの * 3 ページとも同じ差）。差の中身は 3 つある。 * * 1. 1 つ目のリンクの下の内余白 15px が無い * 2. 絵が行の中に置かれ、器が絵より 8.19px 高い * 3. リストの下に余分な外余白 18px がある * * 写し元は `sp/service/css/style.css` の 85 行 * `.concept_list ul.menu_concept li:first-child { padding: 0 0 15px }` と、 * 移行元スマホ版が全ページへ配る `img { display: block }`。 * * 🚨 **1 つ目のリンクだけに空きを置く。**移行元は `li:first-child` で絞っており、 * 2 つ目のリンクは空きを持たない（実測で移行元 71.17px 対 56.17px）。両方へ当てると * 帯が 15px 高くなる。 * * 🚨 **絵の `display: block` を消さないこと。**これが無いと絵が行の中に置かれ、 * 器が絵より 8.19px 高いままになる。空きを足すだけでは移行元と合わない。 * * 移行元は 3 ページとも同じ値だったので（帯 174.59・リスト 127.34・リンク 71.17 と * 56.17 が 3 ページで完全に一致）、当たり先はページを絞らず区画の目印で書く。 */ body.pa-service-page .page-content__body .concept_list ul.menu_concept { margin-bottom: 0; } body.pa-service-page .page-content__body .concept_list ul.menu_concept img { display: block; } body.pa-service-page .page-content__body .concept_list ul.menu_concept li:first-child { padding-bottom: 15px; } /* * 関連ページの案内の帯の、上下の空き（Bug #3877） * ------------------------------------------------------------------ * **コンセプトだけ、灰色の帯の上下に 50px の空きがある。**移行元スマホ版の * `sp/service/css/style.css` 80〜84 行がこう書いている。 * * `.concept_list { background: #f5f5f5; margin: 50px auto; padding: 6.3%; }` * * 幅 375px の実測（移行元 = 本番を 2026-09-05 17:5x に携帯の名乗りで取得。 * dev = 18:36:25・便 `b572f3bd1` の反映後）: * * 移行元 上の外余白 50 / 下の外余白 50 / 直前の区画の下端から帯の上端まで 50px * dev どちらも 0 / 直前の区画の下端から帯の上端まで 0px * * 帯そのものと中身は両側で一致している（帯の高さ 174.59・内余白 23.63・ * 中のリンク 71.17 と 56.17）。**落ちていたのは上下の空きだけである。** * * 🚨 **当たり先をコンセプトに絞る。**同じ帯を持つ他の 2 ページは移行元も * 外余白 0 である（`sp/service/multi/css/style.css` 77〜81 行と * `sp/service/point/css/style.css` 71〜75 行はどちらも `margin: 0 auto`）。 * `body.pa-service-page` へ広げると、この 2 ページが移行元から離れる。 * * 🚨 **`margin` の一括指定で書かないこと。**上の * `:is(.mainVisual, .concept_list, .main_copy)` が左右へ `-7.142857%` を当てて * 帯を全幅にしている。一括指定はこの打ち消しを消すので、帯が全幅でなくなる。 * 上下だけを書く。 * * 🚨 **帯の「下」の空きは、この規則だけでは移行元の 90px に届かない。**下の * 「来店予約・資料請求の帯までの空き」の規則で足している（Bug #3970・裁定 179）。 */ body.pa-service-page--top .page-content__body .concept_list { margin-top: 50px; margin-bottom: 50px; } /* * 灰色の帯の下端から、来店予約・資料請求の帯の上端までを 90px にする（Bug #3970・裁定 179） * ------------------------------------------------------------------ * 幅 375px の実測（2026-09-06 01:0x・両側の親子のたどりを 1 つずつ測った）。 * * 移行元スマホ版 帯の下端から次の帯の上端まで **90px** * dev（直す前） 同じところが **50px** * * 【移行元がどう 90px を作っているか】 * * div.concept_list 下の外余白 50px 下端 1601.97 * └ 親 div#sp_wrap 下の内余白 25px 下端 1676.97 ← 帯はこの器の最後の子 * 次の兄弟 div.conv-banner 上の外余白 15px 上端 1691.97 * * **50（帯の下の外余白）＋ 25（器の下の内余白）＋ 15（誘導帯の上の外余白）＝ 90。** * 器に内余白があるので、帯の下の外余白は器の外へすり抜けない。 * * 【dev がどう 50px になるか】 * * div.page-content__body * ├ div.concept_list 下の外余白 50px * └ div.pa-conv-band 上の外余白 15px ← 帯と同じ親の隣り合う兄弟 * * **隣り合う兄弟の外余白は大きい方に畳まれる**ので、間は 50px になる。移行元の * 器の下の内余白 25px に当たるものも dev には無い。 * * 🚨 **帯の下の外余白を 90px にしてはいけない。**Bug #3877 の受入基準が「帯の下の * 外余白 50px」を求めている。**畳まれたあとが 90px になるよう、誘導帯の側の上の * 外余白を 90px にする。**帯の下の外余白は 50px のまま残る。 * * 🚨 **当たり先をコンセプトの携帯幅に絞る。**`.pa-conv-band` は全ページが使う共通 * 部品である。**部品そのものの値は変えない。**他の 4 ページはこの空きに差が無い。 */ body.pa-service-page--top .page-content__body .pa-conv-band { margin-top: 90px; } /* * ------------------------------------------------------------------ * 5つの約束の誘導帯に、移行元と同じ内余白を戻す（Bug #5364） * ------------------------------------------------------------------ * 🚨 **移行元はこのページだけ、共通部品の `.conv-banner` を上書きしている。** * * sp/css/common.css .conv-banner { margin: 15px 0 30px; } ← 共通 * sp/service/promise/css/style.css * .conv-banner { margin: 0; background: #fff; * padding: 35px 2.5% 30px; } ← このページだけ * * 横の内余白 **2.5% × 375 = 9.375px** が左右に付くので、器の中が狭くなる。 * 丸い絵は `li { width: 23% }` で決まるため、**移行元だけ小さくなる。** * * 実測（幅 375px・2026-09-09）: * * | | 帯の内余白 | 内側の器 | 一覧 | 丸い絵（23%） | * |---|---|---:|---:|---:| * | 移行元（5つの約束） | **9.375px / 9.375px** | 356.25 | 326.25 | **75.03** | * | dev（直す前） | 0 / 0 | 375 | 345 | **79.34** | * * 帯の高さの差 **−60.69px** も、上の内余白 35px ＋ 下の内余白 30px − * 丸い絵の差 4.31px = 60.69 でぴったり合う。 * * 🚨 **ほかの 2 ページ（流れ・他社のご利用経験がある方へ）は直さない。**実測で * 丸い絵の幅（79.34px）も札の左端（18.5 / 104.72 / 190.94 / 277.16）も * **両側で完全に一致している。**Bug #5364 の本文は「3 ページとも」と書いていたが、 * 測り直すと差が出るのは 5つの約束だけだった。 * * 【当てる範囲】`body.pa-service-page--promise` を前置し、このページだけに当てる。 * `.pa-conv-band` は全ページが使う共通部品なので、**部品そのものの値は変えない。** * * 🚨 **`margin: 0` と書いてはいけない。**携帯幅の共通の規則が * `margin-inline: calc(50% - 50vw)` で帯を画面いっぱいに広げている * （`assets/css/support-band.css`）。一括で 0 にすると**その広げ方が消えて、 * 帯が本文の柱の幅（328.13px）へ縮む。**縦だけを `margin-block: 0` で消す。 * * 🚨 **横の内余白に `%` を使ってはいけない。**`%` は**親の幅**を基準にする。 * 移行元の親は画面幅（375px）だが、**dev の親は本文の柱（328.13px）**なので、 * 同じ `2.5%` でも 9.375px 対 8.20px になって合わない。**帯は `width: 100vw` で * 画面幅に広げてあるので、画面幅を基準にする `vw` で書く**（2.5vw = 9.375px）。 */ body.pa-service-page--promise .page-content__body .pa-conv-band { margin-block: 0; padding: 35px 2.5vw 30px; background: #fff; } body.pa-service-page .page-content__body .main_copy { text-align: center; } /* * ------------------------------------------------------------------ * 「ご入会後のプロセス」のページ内リンクの一覧を隠す * ------------------------------------------------------------------ * 移行元のスマホ版にこの一覧が無い。dev はパソコン版の本文をそのまま畳んで * 出しているため、**Step.0〜7 の 8 項目（各 68px・合計 544px）が余分に積まれる。** * この画面で dev が 955px 高い主因の 1 つである。 * * 🚨 **隠すのはこの 1 画面だけである。**同じ `ul.lo_nav` は専任担当伴走サポートと * パーソナル婚活プログラムにもあるが、**移行元のスマホ版にも有る**（両画面とも * 241px。dev は 204px）。そちらで隠すと移行元にある導線を消してしまう。 * 画面 Issue #3109 の A-5 は「dev だけにある」と書いていたが、採取データを * 数え直して 1 画面に絞った（同 Issue へ訂正を記録済み）。 * * 同じ `flow.css` を読む「入会から成婚までの流れ」はこの一覧を持たないので、 * そちらの目印は要らない。 */ body.pa-service-page--flow .page-content__body ul.lo_nav { display: none; } /* * ------------------------------------------------------------------ * 目次の並びの下の外余白を 0 にする（Bug #5056） * ------------------------------------------------------------------ * 目次の絵の下端から節の題の上端までが、移行元スマホ版より **16px 広い**。 * 2 ページとも同じ値である（幅 375px の実測・2026-09-09）。 * * 移行元スマホ版 50px（節の上の内余白 40px ＋ 項目の下の内余白 10px） * dev 66px * * 写し元（`sp/service/multi/css/style.css` の 30〜35 行）は `.lo_nav {}` が**空**で、 * `.lo_nav li { padding-bottom: 10px }` だけを持つ。**dev はそこへテーマの並びの * 既定 18px が乗っている。** * * 🚨 **当たり先を 2 ページに絞る。**同じ `ul.lo_nav` は入会から成婚までの流れにも * あるが、そちらは**上の規則がページごと隠して**おり状況が違う。絞らないと波及する。 * * 🚨 **パソコン幅は触らない。**`assets/service/css/section.css` の `.lo_nav` は * `@media (min-width: 750px)` の中にあり、幅 1100px の横並びとして組まれている。 * この規則は `@media (max-width: 749px)` の中に閉じてある。 */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body ul.lo_nav { margin-bottom: 0; } /* * ------------------------------------------------------------------ * 「5つの約束」だけ本文の器の下の内余白を 0 に戻す * ------------------------------------------------------------------ * テーマは携帯幅で `.page-content` に下の内余白 20px を置く（`main.css` の * `@media (max-width: 749px)` の中。行番号は動くので字面で引く）。写し元は * 移行元のスマホ版の共通 CSS * （`sp/css/style.css` の `#other_contents { padding: 0 0 20px }`）である。 * * **ところが 5つの約束だけ、移行元のスマホ版がその 20px を打ち消している** * （`sp/service/promise/css/style.css` 16〜18 行の `#other_contents { padding: 0 }`）。 * dev 20px 対 移行元 0px の差になる。 * * 共通側に 1 画面ぶんの例外を持たせない方針なので（`main.css` の同じ節の記録）、 * 区画の CSS で戻す。**詳細度は共通側（0,2,0）より高い (0,3,0) にしてある。** * 同じ詳細度で後ろに置くだけだと、将来 20px の側が下へ動いたときに黙って負ける。 */ body.pa-service-page--promise .page-content { padding-bottom: 0; } /* * ------------------------------------------------------------------ * 区画のメニューを隠す（移行元のスマホ版に無い） * ------------------------------------------------------------------ * `ul.category_menu02` は「コンセプト / パーソナル婚活プログラム / 専任担当伴走 * サポート / ご入会後のプロセス / 5つの約束」を並べる区画のメニューである。 * **移行元のパソコン版にはあるが、スマホ版には 1 ページも無い。**dev はパソコン版 * の本文を畳んで出しているので、携帯幅では 4〜5 項目が縦に積まれた一覧（高さ * 108px）が本文の先頭に出てしまう。 * * 実測（幅 375px・移行元 = 本番を 2026-09-04 04:0x JST に携帯の名乗りで取得）: * dev は 5 ページで高さ 108px、移行元(SP) は 6 ページとも無し。 * * 🚨 **区画のメニューと題名の画像を混同しない。**題名の画像（`h2.main_ttl`）は * 移行元のパソコン版と同じ要素で（`legacy/.../service/index.html` 60 行の 137x34 の * 画像）、**無条件に隠してはいけない**（隠すと携帯幅で題名が 1 つも無くなる）。 * いまは**文言のテキストを持つ題名だけ**を `:has(.pa-service-sp-title)` で選んで * 隠している（このファイルのずっと下・A-2 の節）。移行元のスマホ版が同じ位置に置く * 別の大きな画像は、そのテキストで置き換え済みである。 * **`/service/flow/index0706/` はテキストを持たないので、画像のまま残る.** * * 導線が 1 つ減る点は司令塔経由で報告済み（移行元のスマホ版に無いため）。 */ body.pa-service-page .page-content__body ul.category_menu02 { display: none; } /* * ------------------------------------------------------------------ * 節の器を全幅にして、上の罫線を画面の端まで伸ばす（2 画面） * ------------------------------------------------------------------ * 移行元のスマホ版は、節の器 `.sections` を全幅に置き、その中で本文を戻している。 * **上の罫線が画面の端から端まで伸びるのはそのためである。**dev は器ごと内側に * あるので、罫線も内側で切れる。 * * 写し元は `sp/service/multi/css/style.css` 40〜46 行と * `sp/service/point/css/style.css` 40〜46 行（同じ内容）。 * * .sections { padding-top: 50px; margin: 50px 0 0; * letter-spacing: 0.05em; font-size: 14px; * border-top: 1px solid #bebebe; } * * 実測（幅 375px）: 移行元(SP) は 3 件とも x=0・幅 375、dev は x=23.44・幅 328.13。 * * 🚨 **負の外余白と同じ量の内余白を対にする。**外余白だけだと中身まで画面の端に * 貼り付く（第 2 弾で実際に踏んだ）。外へ 1/14 広げて内へ 1/14 戻せば、**器は * 全幅・中身は元の位置**になる。 * * 🚨 **罫線を画面の端まで伸ばすのはこの 2 画面だけである。**ご入会後のプロセスの * `.sections` は移行元(SP) でも全幅ではない（採取データで x=23.44）。 * * 🚨 **5つの約束の `.sections` は移行元でも全幅である**（採取データ * `out/sp2/legacy-375-promise.json` で x=0・幅 375）。ただし**その節は罫線も * 地の色も持たず、中身を `padding: 0 6.25%` で戻しているだけ**なので * （`sp/service/promise/css/style.css` 24〜27 行）、器を全幅にしても見た目は * 1px も変わらない。だからこの規則の当たり先には入れない。**前の版はここを * 「全幅ではない」と書いていたが誤りだった**（セルフレビューの指摘・2026-09-04）。 */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .sections { margin-top: 50px; margin-left: -7.142857%; margin-right: -7.142857%; padding-top: 50px; padding-left: 7.142857%; padding-right: 7.142857%; border-top: 1px solid #bebebe; font-size: 14px; letter-spacing: 0.05em; } /* * 🚨 **先頭の節だけは罫線も上の外余白も持たない。**移行元は * `sp/service/multi/css/style.css` 47〜51 行と `sp/service/point/css/style.css` * 47〜51 行で `#sp_wrap .sections:first-of-type { padding-top: 40px; margin: 0 0 0; * border-top: none; }` と打ち消している。上の規則を 3 節すべてに当てたままにすると、 * **移行元に無い罫線が先頭に 1 本増える**（セルフレビューの指摘・2026-09-04）。 * * 実測（移行元 = 幅 375px の採取データ `out/sp2/legacy-375-multi.json` / * `legacy-375-point.json`）: 先頭の節は `border-top: 0px none` / 上の外余白 0 / * 上の内余白 40px、2・3 番目だけ `1px solid rgb(190,190,190)` / 50px / 50px。 * * 🚨 **`:first-of-type` は使えない。**移行元のスマホ版では `.sections` が * `
` の子で先頭の `section` になるが、**dev が投入したのは * 移行元のパソコン版の本文**で、そこでは `
` が * 前に並ぶ（`service/multi/index.html` / `service/point/index.html`）。**代わりに * 本文が持つ類名で指す。**dev の 3 節は両画面とも `sec01` / `sec02` / `sec03` を * 持つ（採取データ `out/sp2/dev-375-multi.json` / `dev-375-point.json` で確認）。 */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .sections.sec01 { margin-top: 0; padding-top: 40px; border-top: none; } /* * 関連ページの案内が「区画の中」に入っているぶんの、上下の空きのずれ（Bug #4389） * ------------------------------------------------------------------ * 🚨 **移行元は関連ページの案内（`div.concept_list`）を区画の「外」に置き、dev は * 区画の「中」の最後の子として持っている。**移行元スマホ版の * `sp/service/point/index.html` 112 行と `sp/service/multi/index.html` 111 行は * `
` の**あと**に置く。dev が投入したのは移行元のパソコン版の本文で、 * そこでは区画の中に入っている。**HTML の位置は CSS では動かせない**ので、 * 外余白の付け替えで見た目だけを移行元にそろえる（司令塔の裁定 430 = 案 B）。 * * 幅 375px の実測（移行元 = 本番を 2026-09-07 20:56 に携帯の名乗りで取得。 * dev = 同 20:57・`?cb=` 付き）: * * 見たもの 移行元 dev（直す前） * --------------------------------------------------- * パーソナル 案内の上の空き 50px 0px * パーソナル 案内の下の空き 40px 50px * 専任担当 案内の上の空き 0px 0px * 専任担当 案内の下の空き 40px 15px * * 【移行元がどう作っているか】 * * 上の空き … 最後の区画の下の外余白。**ページで値が違う。** * `sp/service/point/css/style.css` 52〜54 行が `50px 0 50px`、 * `sp/service/multi/css/style.css` の同じ行が `50px 0 0`。 * 案内そのものの外余白は両ページとも 0（`margin: 0 auto`）。 * 下の空き … 器 `div#sp_wrap` の下の内余白 **25px** ＋ 誘導帯 * `div.conv-banner` の上の外余白 **15px** ＝ 40px。 * **案内の外余白ではない。** * * 【dev がどうずれるか】 * * 案内が区画の中の最後の子なので、**区画の下の外余白が案内の「前」でなく * 「後ろ」に来る。**パーソナルはその 50px が誘導帯の上の外余白 15px と * 畳まれて下の空きが 50px になり、上の空きが 0px になる。専任担当は区画の * 下の外余白が 0 なので、下の空きが誘導帯の 15px だけになる。dev には * 移行元の器の下の内余白 25px に当たるものが無い。 * * 【直し方】 * * 1. パーソナルの最後の区画の下の外余白を **0** にし、その 50px を案内の * **上**の外余白へ移す（移行元と同じ位置に空きが出る） * 2. 案内の**下**の外余白を **40px** にする。案内は区画の最後の子で、区画の * 下の内余白は 0・下の罫線も無いので、この外余白は区画の外へすり抜けて * 誘導帯の上の外余白 15px と畳まれ、**40px** になる * * 🚨 **誘導帯（`.pa-conv-band`）そのものには触らない。**全ページが使う共通部品で * ある。コンセプトの前例（Bug #3970）はページを絞って帯の外余白を変えたが、 * ここでは案内の側だけで足りる。**帯の上の外余白が dev 15px・移行元 40px で * 違う件は 15 班が扱う**（司令塔の裁定 467）。**帯が将来 40px になっても、 * 畳まれた結果は 40px のまま変わらない。** * * 🚨 **専任担当には上の外余白を足さない。**移行元が 0 だからである（区画の下の * 外余白が `50px 0 0` で下は 0）。ページで値が違う点を写す。 * * 🚨 **当たり先を「案内を持つ区画」に絞る。**下の外余白 0 を `.sections` 全体へ * 広げると、先頭と 2 番目の区画の空きまで変わる。 */ body.pa-service-page--point .page-content__body .sections.sec03 { margin-bottom: 0; } body.pa-service-page--point .page-content__body .sections.sec03 > .concept_list { margin-top: 50px; } body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .sections.sec03 > .concept_list { margin-bottom: 40px; } /* * ------------------------------------------------------------------ * 本文の字を移行元にそろえる（2 画面） * ------------------------------------------------------------------ * **根拠が固まっているのはこの 2 画面だけである。**両側に同じ文言があり、1 対 1 で * 比べられる。**幅 375px の採取データ（`out/sp2/`）で `p` を数え直した値である** * （前の版は 5つの約束の件数を両側で取り違え、13px の 4 件を 14px に含めていた。 * セルフレビューの指摘・2026-09-04）: * * 画面 移行元(SP) の `p` dev の `p` * ご入会後のプロセス 13 件（14px×8 / 13px×4 / 15px×1） 10 件（15px×8 / 24px×1 / 13px×1） * 5つの約束 26 件（14px×21 / 13px×4 / 15px×1） 23 件（15px×21 / 24px×1 / 13px×1） * * **1 対 1 で比べられるのは本文の塊（プロセス 8 件・約束 21 件）である。**残りは * 両側で中身が違うので寄せる根拠にしない。 * * 写し元は `sp/service/flow/css/style.css` 28〜39 行と * `sp/service/promise/css/style.css` 85〜89 行。 * * 🔑 **行送りは指定しなくてよい。**テーマは携帯幅で比（1.8）を置いているので * （`main.css` の `@media (max-width: 749px)` の `--pa-line-height-text`）、字を * 14px にすれば 25.2px になり移行元と一致する。**5つの約束だけ移行元が 2.2 なので * そこだけ明示する。** * * 🚨 **段落を名指しで寄せるのはこの 2 画面だけである。**コンセプトは本文の要素が * ほぼ無く判定できない。 * * 🚨 **専任担当伴走サポートとパーソナル婚活プログラムは、すぐ上の節の器の写しに * 含まれる `font-size: 14px` が受け継がれて 14px になる**（実測で確認）。移行元も * 器の値は 14px なので方向は合っているが、**移行元はさらに一部の子を 13px に * 落としている**（本文の中身そのものが移行元と違うため、どの子が 13px かは 1 対 1 * で決められない）。**この 2 画面の字はまだ完全には一致していない。** */ body:is(.pa-service-page--flow, .pa-service-page--flow-index0706) .page-content__body .sections p { font-size: 14px; letter-spacing: 0.05em; } /* * 🚨 **注記の規則はいま当たる相手がいない。**写し元の * `sp/service/flow/css/style.css` 37 行にあるので写したが、`aside` という類名は * 移行元のパソコン版（`service/flow/index.html` と `index0706.html`）にも * スマホ版の HTML にも 1 件も無い（どちらも grep で 0 件）。dev はパソコン版の * 本文を投入しているので、この規則は当たらない。**消さずに残すのは写し元に * 忠実であるためで、将来スマホ版の骨組みを入れたときに効く** * （セルフレビューの指摘・2026-09-04）. */ body:is(.pa-service-page--flow, .pa-service-page--flow-index0706) .page-content__body .sections p.aside { font-size: 12px; } body.pa-service-page--promise .page-content__body .sections p { font-size: 14px; letter-spacing: 0.05em; line-height: 2.2; } /* * ------------------------------------------------------------------ * 5つの約束の見出しを、移行元のスマホ版の意匠へ組み直す * ------------------------------------------------------------------ * 移行元のスマホ版は、この見出しを**文言を焼き込んだ画像**（`txt_promise_00.png` * 〜`txt_promise_05.png`）で組んでいる。dev はパソコン版の本文を畳んでいるので、 * 同じ位置に**黒い 15px の文字が左寄せ**で出る。並べると別物に見える。 * * 全体原則（画像に焼き込まれた文言は「背景は画像または CSS + 文言はテキスト」で * 再現する）に沿って組み直す。**この 6 件は文字と罫線だけの画像なので、背景画像を * 使わず CSS だけで描ける。**dev 側の `dt` は既に本物のテキストを持っている。 * * ## 値の出どころ（画像の画素を走査して測った・表示幅 328.13px のとき） * * 帯 表示の上端 表示の高さ 左〜右 色 * 上の罫線 0.50px 6.00px 80.0〜246.6 rgb(166,129,70) * 「5つの約束」 21.51px 10.50px 137.1〜190.1 同上 * 下の罫線 47.52px 6.00px 80.0〜246.6 同上 * 数字 107.54px 17.01px 幅 7.5〜9.0 同上 * 題 179.07px 19.01px ほぼ全幅 同上 * * **5 枚とも同じ位置・同じ高さだった**（`txt_promise_01` / `02` / `05` で確認）。 * * 🚨 **字の大きさは目分量で決めていない。**同じ書体で 3 つの題を実際に描き、画像から * 測った幅に最も近い組みを探した（19.5px / 字間 0.05em のとき、3 つの差の合計が * 6.2px でいちばん小さい）。「はじめに」も同じやり方で 16px / 0.05em にした。 * * 数字の大きさは、字の当たり判定の高さ 17.01px を数字の背の高さ（およそ 0.66em）で * 割って 25.5px とした。 * * ## 組み方 * * `dt` を器の幅いっぱいに出し、題を下端へ置く（`dl` の外余白は Task #3653 で 0 にした）。 * 上の飾り（罫線 2 本 + 「5つの約束」）は `::before` で描く。 * * 🚨 **数字は CSS の通し番号で作らない。本文が既に持っている。**移行元の * パソコン版の `dt` は `
1期待に応えて、 * 予想を超える。
` の形で、番号を本物の文字として持つ（移行元 * `service/promise/index.html` 134・162・192・223・254 行）。dev はこの本文を * そのまま投入しているので、**`::after` で通し番号を足すと番号が 2 回出る** * （インラインの `1` と、その上の `::after` の「1」）。 * パソコン幅ではこの `span` を見出し風に組む写しがあるが（`promise.css` * 124〜137 行）、それは `@media (min-width: 1200px)` の中なので携帯幅には効かない。 * **だから携帯幅では、その `span` 自身を数字の置き場にする。**本物の文字が残るので * 読み上げも自然になる（セルフレビューの指摘・2026-09-04）。 * * 🚨 **「はじめに」（`.sec00`）には飾りも数字も付けない。**移行元も * `txt_promise_00.png` は文言だけで、高さ 16px しかない。`.sec00` の `dt` は * `span` を持たないので、数字の置き場の規則もそもそも当たらない。 */ body.pa-service-page--promise .page-content__body .sections dt { /* * 🚨 **0 でよい。**以前は dev の `dl` が左右 15px 内側にあったので `-15px` で * 打ち消していた。Task #3653 で `dl` の外余白そのものを 0 にした（移行元 * `sp/service/promise/css/style.css` の `.sections .sec_inner dl` は外余白を * 持たない）ので、打ち消しを残すと**見出しだけ器より 15px ずつ外へはみ出す**。 */ margin-left: 0; margin-right: 0; /* * 見出しと本文の間。移行元 `sp/service/promise/css/style.css` 112〜114 行の * `.sections .sec_inner dt { padding-bottom: 18vw; }` をそのまま写す（幅 375px で * 67.5px）。**画面幅に対する割合なので固定値へ直さない。**前の版はこれが無く、 * 見出しの直後に本文が来ていた（セルフレビューの指摘・2026-09-04）。 * 「はじめに」（`.sec00`）も同じ値である. */ padding-bottom: 18vw; text-align: center; color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.2667vw; font-weight: normal; letter-spacing: 0.05em; line-height: 1; } /* 番号の付く 5 件だけ。「はじめに」（.sec00）は素のままにする. */ body.pa-service-page--promise .page-content__body .sec_inner:not(.sec00) dt { position: relative; padding-top: 47.752vw; font-size: 5.2vw; } /* * 上の飾り = 罫線 2 本と、その間の「5つの約束」。 * * 🚨 **横線は縦の止めの「真ん中」を通り、止めとの間に 2.5px の隙間がある** * （｜ ——— ｜）。前の版は横線を箱の上端と下端の枠線で描き、止めを角から生やして * いたので、横線が 2.5px ずれて止めと接する「⊤」の形になっていた * （セルフレビューの指摘・2026-09-04）。 * * 画素の実測（`sp/service/promise/images/txt_promise_01.png` 656x396 を、 * `dt` の表示幅 328.125px へ換算。倍率 0.50019）: * * もの 表示 y 表示 x * 上の止め 0.50〜6.50 80.03〜81.03 と 246.11〜247.11（1px 幅・6px 高） * 上の横線 3.00〜4.00 83.53〜243.31（1px 高・160px 幅） * 「5つの約束」 22.0〜31.8 137.6〜190.1 * 下の横線 50.02〜51.02 上と同じ * 下の止め 47.52〜53.02 上と同じ * * 枠線をやめ、**6 本すべてを背景の帯で描く**（止め 4 本 + 横線 2 本）。箱の上端を * 表示 y=0.5 に置くので、箱の中の位置は上の表から 0.5 を引いた値になる. * * 🔑 **値はテーマにある同じ飾りの画像で検算した。**`assets/service/images/ * txt_promise_01@2x.png`（334x106 = 表示 167x53。パソコン版の写しが背景に使う * もの）を画素で走査すると、止めが x 0〜1 と 166〜167・y 0〜6 と 47〜53、横線が * x 3.5〜163.5・y 2.5〜3.5 と 49.5〜50.5 で、下の指定と 1px も違わない。 * * 🚨 **その画像を背景に使う案は採らない。**画像には「5つの約束」の文言が焼き * 込まれているので、下の `content` の文字と合わせて**文言が二重に出る**。文言を * テキストで持つ全体原則にも反する（セルフレビューの提案を検討して見送った）. */ body.pa-service-page--promise .page-content__body .sec_inner:not(.sec00) dt::before { content: "5つの約束"; position: absolute; top: 0.1333vw; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 44.5333vw; height: 14.1333vw; background-image: /* 縦の止め 4 本（左上・右上・左下・右下）. */ linear-gradient(#a68146, #a68146), linear-gradient(#a68146, #a68146), linear-gradient(#a68146, #a68146), linear-gradient(#a68146, #a68146), /* 横線 2 本（止めの真ん中の高さを通る）. */ linear-gradient(#a68146, #a68146), linear-gradient(#a68146, #a68146); background-repeat: no-repeat; background-size: 0.2667vw 1.6vw, 0.2667vw 1.6vw, 0.2667vw 1.6vw, 0.2667vw 1.6vw, 42.6667vw 0.2667vw, 42.6667vw 0.2667vw; background-position: left top, right top, left bottom, right bottom, left 0.9333vw top 0.6667vw, left 0.9333vw top 13.2vw; font-size: 2.8vw; line-height: 14.1333vw; } /* * 数字。移行元は 1〜5 を大きく置く。 * * **本文が持つ `1` をそのまま数字の置き場にする。**流れから外して * 絶対配置にするので、題の行は数字を含まない 1 行になり、題の字の大きさ 19.5px の * 当て込み（題だけの幅で測った値）もそのまま成り立つ。 */ body.pa-service-page--promise .page-content__body .sec_inner:not(.sec00) dt span { position: absolute; top: 28.6773vw; left: 0; right: 0; display: block; font-size: 6.8vw; line-height: 1; } /* * ------------------------------------------------------------------ * コンセプトの主役の写真を、移行元のスマホ版のものに差し替える * ------------------------------------------------------------------ * 🚨 **移行元はパソコン版とスマホ版で、同じ名前の別の写真を使っている。** * * パソコン版 `/service/images/mv.jpg` 1280x425 の横長。**文言は焼き込まれて * いない**（上に `concept_mv_txt.png` を重ねる） * スマホ版 `/sp/service/images/mv.jpg` 960x1200 の縦長。**文言が焼き込まれている** * * dev はパソコン版の写しなので、写真は `#concept .mainVisual` の背景として置かれて * いる（`section.css`）。その写しはパソコン幅の包みの中なので、**携帯幅では写真が * 1 枚も出ない。**白地に金の文字だけになり、移行元と大きく違って見える。 * * 実測（幅 375px）: 移行元(SP) は x=0 幅=375 **高さ 469px の写真**、dev は * x=0 幅=375 **高さ 158px の文字だけの画像**。 * * 🚨 **器は写真より 30px 高い。**移行元は `sp/service/css/style.css` 54〜56 行で * `#sp_wrap .mainVisual { padding-bottom: 30px; }` を置いており、採取データの * 移行元の器は 498.75px（写真 468.75 + 30）である。前の版は `padding-bottom: 0` に * していたので、次の区画との間隔が 30px 詰まっていた（セルフレビューの指摘・2026-09-04）。 * * 🚨 **`box-sizing: content-box` が要る。**テーマは全体を `border-box` にしている。 * そのままだと `aspect-ratio` が内余白を含んだ外形に効くので、**写真の場所が * 468.75px から 438.75px へ縮む**（下に 30px 空くのではなく、写真が痩せる）。 * 内容の箱を基準にすれば、写真 468.75px + 下の余白 30px = 498.75px になる。 * * スマホ版の写真を `mv-sp.jpg` としてテーマ資産へ置き、携帯幅の背景にする * （司令塔の裁定・2026-09-04。写真に文字が焼き込まれたものは写真として写す）。 * 高さは実寸の比（960:1200）で決めるので、画面幅が変わっても崩れない。 * * 🚨 **上に重なる文字の画像は画面から隠すが、要素は残す。**スマホ版の写真に同じ * 文言が焼き込まれているので、出すと二重に見える。**読み上げ向けに代替文言は * 残す**（テーマの他の 3 か所と同じ隠し方）。 */ body.pa-service-page--top .page-content__body #concept .mainVisual { background-image: url(../images/mv-sp.jpg?ver=eb1090a8107c); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; box-sizing: content-box; aspect-ratio: 960 / 1200; height: auto; padding-bottom: 30px; } body.pa-service-page--top .page-content__body #concept .mainVisual p { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* * ------------------------------------------------------------------ * コンセプトの導入文を、携帯幅で移行元スマホ版の姿にする（Bug #3881） * ------------------------------------------------------------------ * 移行元は**パソコン版とスマホ版で、導入文の持ち方が違う。** * * パソコン版 主役の写真に重ねる絵 `concept_mv_txt.png`（476x190）に焼き込む * スマホ版 写真には題目だけを焼き込み、**導入文 77 文字は `p.mb30` の本物の * テキスト**で置く * * dev はパソコン版の本文を取り込んでいる。すぐ上の 2 つの規則が、携帯幅で写真を * スマホ版へ差し替え、重なる絵を画面から隠している。**その結果、携帯幅にはこの * 導入文がどこにも出なくなる。**代わりに、そのすぐ下のパソコン版の見出し * `h4.serif`（66 文字）が導入文の位置に出ていた。 * * 実測（2026-09-05・幅 375px）。 * * 側 当たり先 文字数 寸法 字 行送り 太さ * 移行元スマホ版 div.sp_wrap_body > p.mb30 77 328.13 x 112.00 14 28px 400 * dev（直す前） section.concept > h4.serif 66 328.13 x 127.50 17 25.5px 700 * * 導入文のテキストは `inc/service-sp-concept-lead.php` が本文へ足す。ここでは * 移行元スマホ版と同じ字の大きさ・行送り・下の空きにそろえる。 * * 🚨 **字の色と太さは指定しない。**足した段落が入る `section#concept` は、すでに * 色 rgb(0, 0, 0)・太さ 400 で、移行元スマホ版の `p.mb30` と同じである。要らない * 指定を足すと、後から色を変えたときに 2 か所を直すことになる. */ body.pa-service-page--top .page-content__body .pa-service-sp-concept-lead { margin: 0 0 30px; font-size: 14px; line-height: 28px; } /* * 図の下の 1 文（66 文字）を、携帯幅でも画面に出す（Bug #5372） * ------------------------------------------------------------------ * 🚨 **前はここでこの 1 文を画面から隠していた。**当時は「同じ 66 文字が図 * `concept_seikon_img.png` に焼き込まれているので、字で出すと二重になる」という * 理由だった。**Task #3522 で携帯幅の図を文言を切り落とした写し * （`concept_seikon_img_trimmed.png`・850x830）へ差し替えたので、その理由は消えた。** * 図にも字にも出ない状態が残っていたため、ここで字の側を出す。 * * 移行元スマホ版が焼き込んでいるのは、この 1 文である。 * * 一人ひとりに合った婚活を進めるパーソナル婚活プログラムと、 * ゴールに向かってあなたを支え続ける専任担当伴走サポートで構成されています。 * * **図の `alt` とは重ならない**（`alt` は「成婚コンシェルジュ」の 9 文字）。 * * ## 姿は焼き込みの絵の画素から出した * * `legacy/www.p-a.jp/public/sp/service/images/concept_seikon_img.png`（850x1315）の * 下 485 行に 5 行の文言が焼かれている。絵は 850 幅を器の 328.125px へ縮めるので、 * **1 行 = 0.38603px** である。 * * 墨のある行 910〜951 ／ 1000〜1041 ／ 1090〜1131 ／ 1180〜1221 ／ 1272〜1310 * 行の送り 90 行 ＝ 34.74px * 墨の高さ 42 行 ＝ 16.21px（半分の行送りは (34.74 − 16.21) / 2 = 9.26px） * 色 #a68146（画素の実測。移行元パソコン版の `service/css/style.css` の * `#contents #concept .mainVisual + .concept h4` が持つ色と一致する） * 寄せ 左（5 行とも墨の左端が 3〜9 画素でそろう。中央寄せなら最後の * 短い行が右へ寄る） * * 🚨 **この寸法の組は、パーソナル婚活プログラムの焼き文字と完全に同一である** * （`4.55441vw` / `0.27613em` / `2.033898`）。**独立に測って行の送りが 1 行も * 違わなかった**ので、移行元が同じ意匠で作ったものと判断した。値を丸めない。 * * 1 字の送りは 4.55441vw × (1 + 0.27613) = 21.80px なので、器の 328.125px には * **15 字まで**入る（16 字なら 348.72px ではみ出す）。**焼き込みの折り返しも * 15 字・14 字・15 字・15 字・8 字**で、本文が持つ強制改行（`
`）の位置も * 2 行目の切れ目と一致する。 * * ## 上下の外余白 * * 上 = 絵の中の空き 80 行（30.88px）− 半分の行送り 9.26px = 21.62px = 5.7647vw * 下 = 塊ぜんたいを切り落とした 187.23px に合わせる負の値 = -2.16vw * * **塊ぜんたい（21.62 ＋ 34.74 × 5 − 8.10 = 187.20px）が、切り落とした図の高さ * 187.23px と一致する。**下の絵と関連ページの案内の位置が動かない。 * * ## 🚨 落とし穴 3 つ * * **(1) `padding: 0` を明示する。**パソコン版の `section.css` は * `#concept .mainVisual + .concept h4` へ `padding: 0 0 50px` を当てている。 * **いまはその規則が `@media (min-width: 750px)` の中に在るので携帯幅には * 届かない**（節の範囲を数えて確かめた）。それでも 0 を書くのは、前の隠す規則も * 0 を持っていたことと、**この 50px が節の外へ出た瞬間に塊の高さが 187.20px から * 237.20px へ跳ねる**ためである。打ち消しを残しておく。 * * **(2) 並べ替えが要る。**移行元スマホ版は「導入文 → 図 → この 1 文」だが、 * dev の本文は「導入文 → この 1 文 → 図」である。器を縦並びにして `order` で送る。 * * **(3) `vw` で書く。**焼き込みの絵は `img { width: 100% }` で画面幅に比例する。 * 固定 px で書くと、375px 以外の幅で字だけが取り残される（Task #4490 の逆の型）。 */ /* * 図を塊で置く（Bug #5372 の実測で見つけた 6px） * ------------------------------------------------------------------ * 移行元スマホ版は `sp/css/common.css` **11 行**で * `img { width: 100%; height: auto; display: block; }` を**全ページ**へ当てている。 * dev の絵は `inline` のままなので、**絵の下に基準線のすき間が 6px 出る。** * * 移行元 div.ph 507.63 ＝ 中の絵 507.63（差 0.00） * dev div.ph 326.39 対 中の絵 320.39（差 **6.00**） * * 🚨 **これは隠していた 1 文とは別の原因だが、同じ空きに積まれる。**起票の本文が * 「空きの差 −179.24 と図の高さの差 −187.24 の開き 8px は未特定」と書いていたのが * これで、実測では **6.00px** だった（起票時の 8 は、そのときの dev の別の状態を * 含んだ値）。1 文を出すだけでは 6px ぶん行き過ぎるので、ここで一緒に消す。 * * 🚨 **当たり先をこのページの図に絞る。**`img { display: block }` を広げると、 * 文中に混ぜて置く絵（`inline` で組んである箇所）の行が崩れる。 * ほかのページは同じことを `.sections :is(.ph, .ph_l) img { display: block }` で * すでに済ませてある（パーソナル婚活プログラム・専任担当伴走サポート）。 */ body.pa-service-page--top .page-content__body .concept .ph img { display: block; } body.pa-service-page--top .page-content__body .concept { display: flex; flex-direction: column; } body.pa-service-page--top .page-content__body .concept h4.serif { order: 1; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; border: 0; margin: 5.7647vw 0 -2.16vw; padding: 0; color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.55441vw; font-weight: normal; letter-spacing: 0.27613em; line-height: 2.033898; text-align: left; } /* * ------------------------------------------------------------------ * 各ページの題名を、移行元のスマホ版の意匠へ組み直す（6 画面） * ------------------------------------------------------------------ * 移行元のスマホ版は、題名を**文言を焼き込んだ画像**（`h2.category_ttl02` の中の * `main_ttl.png`）で組む。**器の幅は 6 ページとも画面幅の 85%**（幅 375px で * 318.75px。採取データで確認）だが、**その 85% の作り方はページで違う。** * 5 ページは区画共通の `sp/service/css/style.css` の `.category_ttl02 { width: 85% }` * で、**5つの約束だけはその共通 CSS を読み込まず**、ページ別の * `sp/service/promise/css/style.css` の `padding: 25px 7.5% 60px` の左右で結果として * 85% になる（セルフレビューの指摘・値は同じなので組みは変えない）。dev はパソコン版の * 本文を畳んでいるので、同じ位置に「サービス」とだけ書かれた 137x34 の小さな画像が * 出る。並べると別物に見える。 * * 文言のテキストは `inc/service-sp-title-text.php` が本文へ足す。ここはその見た目である。 * * ## 意匠は 2 つある * * 5 ページ（コンセプト・専任担当伴走サポート・パーソナル婚活プログラム・ * ご入会後のプロセス・5つの約束） * 欧文（黒・明朝・中央）→ 金の罫線 → 和文（黒・明朝・中央） * 他社のご利用経験がある方へ（`pa-service-sp-title--experienced`） * 和文 2 行（黒・明朝・中央）→ 赤い短い罫線。**欧文を持たない。** * 移行元でも別の要素（`h2.category_ttl`・幅は画面の 51.687%）で組まれている。 * * ## 値の出どころ * * 帯の上端・高さ・罫線の幅・字の大きさ・字間・改行位置は * `svc-0903/out/a2-title-metrics.txt` が正本である（移行元の画像の画素を走査し、 * 字の大きさと字間は同じ書体で描いて外接矩形を合わせた）。 * * 🚨 **文字の箱の上端と、塗りの上端は同じではない。**書体は箱の上に余白を持つので、 * 「測った上端 = 箱の上端」と読み替えて組むと**文字だけが下へずれる**（実ブラウザで * 測ると欧文が 1.93〜2.49px・和文が -0.07〜1.27px 低く出た）。下の `margin-top` は、 * **箱の上端 =（測った塗りの上端）-（その行の塗りが箱から下がる量）**として引き算した * 値である。引く量は行ごとに違う（いちばん背の高い字で決まる）ので、行ごとに測って * ある。罫線は塗りそのものなので引き算が要らない. * * 🚨 **いちばん上の行の `margin-top` は負になる。**塗りの上端を題名の器の上端に * そろえると、文字の箱はその少し上から始まるためである。**器に * `display: flow-root` が要る。**素の `display: block` だと、この負の値が器の * `margin-top` へ吸い上げられて（外余白の相殺）、器ごと上へ動いてしまう。 * * 🚨 **罫線の高さだけは正本に無い。**題名の画像を走査し、罫線の色そのままの行 * （芯）を数えて出した。表示幅 318.75px へ換算すると、金の 4 ページが 0.75〜1.12px、 * 5つの約束だけ 1.94px だったので、それぞれ 1px と 2px にしてある。 * * 🚨 **他社のご利用経験がある方へは正本に値が 1 つも無い。**同じやり方で * `sp/service/experienced/images/main_ttl.gif`（424x147・表示幅 193.81px）を走査した。 * 和文 2 行はどちらも 19.5px に収束し、罫線の色は rgb(241,0,0) だった。 * * ## 字間の打ち消し * * 🚨 **`letter-spacing` は最後の 1 字の後ろにも空きを足す。**その空きは行の幅に * 入るので、中央寄せの文字は**左へ字間の半分だけずれる**（幅 328px・22px・0.54em * で 5.94px ずれるのを実ブラウザで確認した）。**各要素の `margin-right` に字間と * 同じ量の負を置いて戻す。**外すと 6 ページとも題名が左へずれる。 * * ## 画像を隠す範囲 * * 🚨 **画像を隠すのは、テキストの題名を持つ `h2` だけである。** * `/service/flow/index0706/` は移行元のスマホ版に相手が無いので文言を足しておらず * （`inc/service-sp-title-text.php` の一覧に入れていない）、そこで画像まで隠すと * 携帯幅で題名が 1 つも無くなる。`:has()` で「テキストを持つ題名」に絞ってある。 */ body.pa-service-page .page-content__body .main_ttl:has(.pa-service-sp-title) img { display: none; } /* * 🚨🚨 **題名の器の飾りを消し直す。文言を足したことで、テーマが消していた飾りが * 戻ってしまうためである。** * * テーマは `main.css` の * `.page-content__body :is(h2..h6):has(> img:only-child)` で、**中身が画像 1 枚だけの * 見出しから飾り（金の下線・上下の内余白・上の外余白）を外している。**題名の `h2` は * この規則に当たって素の箱になっていた。 * * ところが**文言のテキストを画像の隣へ足すと `img:only-child` が偽になり、この規則が * 外れる。**パソコン幅は `article-reset.css` の見出しの初期化が守るが、あのファイルは * 全体が `@media (min-width: 750px)` の中なので**携帯幅には届かない。** * * 実測（テーマの CSS を実ファイルで読ませて計測。幅 375px と 749px）: * * 画像だけの `h2` 内余白 0 ／ 下の枠線 0 * 文言を足した `h2` **内余白 上下 30px ／ 下の枠線 2px の金** * * 題名の下に金の横線が引かれ、箱が 60px 太る。パソコン幅（750px / 1440px）は * 足す前と計算値が完全に一致しており無傷である（セルフレビューの指摘・2026-09-04）。 * * 🚨 **この退行は CSS を文字列で読む検査では取れない**（規則を 1 つも書き換えていない * のに、当たり先が外れるため）。同じ版で検査は 604 件すべて緑だった。**下の * `check_rule` に加えて、実ブラウザで箱を測る確認を必ず行うこと。** * * 🚨 **外余白（`margin`）には触れない。**戻すのは飾りの 3 つ（内余白・枠線・地）だけで * ある。携帯幅の題名の外余白はもともと 0 で、`margin` を書くと**この PR が意図しない * 余白の変化を持ち込む。**書かなければ、外余白は文言を足す前とまったく同じ規則で * 決まる。 * * 直したあとの実測（同じ計測。「画像だけ」と「画像 + テキスト」を比べた）: * * 幅 375px / 749px 両者とも 外余白 0 ／ 内余白 0 ／ 下の枠線 0 * 幅 750px / 1440px 両者とも 外余白 0 ／ 内余白 上下 30px ／ 下の枠線 0 * * **4 つの幅すべてで、文言を足す前と後がぴたりと一致する。** * * 移行元の器の余白（下の内余白 30px + 外余白 30px ほか）に合わせるのは A-2 の範囲外で、 * 画面 Issue の次の弾で扱う。詳細度は (0,4,1) でテーマの (0,2,2) に勝つ. */ body.pa-service-page .page-content__body .main_ttl:has(.pa-service-sp-title) { padding: 0; border: 0; background: none; } /* * ------------------------------------------------------------------ * 題名の器の余白を移行元のスマホ版にそろえる（Issue #3318・裁定 67） * ------------------------------------------------------------------ * すぐ上の A-2 は題名の**中身**を組み直し、器の余白は「範囲外」として残していた。 * ここがその続きである。dev は題名の下が移行元より約 40px 狭い。 * * 🚨 **縦の余白は固定 px で写す。**移行元の本番を 320 / 375 / 414 / 749px の 4 幅で * 測ると、下の内余白 30px・下の外余白 30px は**どの幅でも同値**だった（移行元 = * 本番 www.p-a.jp を 2026-09-04 13:09 JST に取得）。画面幅に比例して伸縮するのは * 左右の余白と器の幅だけで、そちらは百分率で置かれている。Issue #3318 の受入基準は * 「寸法が画面幅に比例して伸縮する」と書いていたが、実測が覆したので固定 px にする * （司令塔の承認済み。Issue にも実測表を残した）。**#3316 と同じ型である。** * * 実測（幅 375px。移行元 → dev の順）: * * ページ 移行元 dev（直す前） * コンセプト・ご入会後のプロセス 下の内余白 30px 内余白 0 * ・専任担当伴走サポート ＋ 下の外余白 30px ＋ 下の外余白 20px * ・パーソナル婚活プログラム * 5つの約束 上の内余白 25px 内余白 0 ／ 上の外余白 30px * ＋ 下の内余白 60px（外余白 0） ＋ 下の外余白 20px * 他社のご利用経験がある方へ 下の外余白 20px（内余白 0） 同じ（**直す必要が無い**） * * 写し元: * * 区画共通 `sp/service/css/style.css` .category_ttl02 { padding: 0 0 30px } * 共通 `sp/css/style.css` #contents .category_ttl02 { margin-bottom: 30px } * 5つの約束 `sp/service/promise/css/style.css` * #contents .category_ttl02 { padding: 25px 7.5% 60px; margin: 0 } * 他社経験 `sp/service/experienced/css/style.css` * .category_ttl { margin: 0 auto 20px } * * 🚨 **5つの約束だけ区画共通の CSS を読み込んでいない。**値もページ別 CSS の側に * ある。ほかの 4 ページと同じ値だと思って書くと、上下とも別物になる。 * * 🚨 **他社のご利用経験がある方へには規則を置かない。**移行元と dev がすでに一致して * いる（下の外余白 20px・内余白 0）。「6 ページそろえる」と読んで一律に書くと、 * 合っているものを動かして退行させる。 * * 🚨 **`/service/flow/index0706/` は対象外。**移行元のスマホ版に相手のページが無く * （本番で 404。同じ日に確認した）、題名の器そのものを持たない。すぐ上の A-2 も * 同じ理由で文言を足していない。 * * 詳細度は上の A-2 の規則と同じ (0,4,1) で、後ろに置くので勝つ. */ /* コンセプト・ご入会後のプロセス・専任担当伴走サポート・パーソナル婚活プログラム. */ body.pa-service-page--top .page-content__body .main_ttl:has(.pa-service-sp-title), body.pa-service-page--flow .page-content__body .main_ttl:has(.pa-service-sp-title), body.pa-service-page--multi .page-content__body .main_ttl:has(.pa-service-sp-title), body.pa-service-page--point .page-content__body .main_ttl:has(.pa-service-sp-title) { margin-bottom: 30px; padding-bottom: 30px; } /* 5つの約束だけは上下とも別の値で、外余白を持たない. */ body.pa-service-page--promise .page-content__body .main_ttl:has(.pa-service-sp-title) { margin-top: 0; margin-bottom: 0; padding-top: 25px; padding-bottom: 60px; } /* * ------------------------------------------------------------------ * 題名の上にページの器の余白 25px を置く（Bug #4140・裁定 342） * ------------------------------------------------------------------ * **ユーザーの目視の指摘（2026-09-07 01:0x）**: 「ページ上部の『CONCEPT』表記が * グローバルヘッダーと被っている」。裏取りしたところ指摘のとおりで、4 ページとも * 題名がヘッダーの下端より上に描かれていた。 * * 🚨 **移行元の 25px は題名ではなく「ページ全体の器」が持っている。** * サービス区画のスマホ版 `sp/service/css/style.css` の 3 行目が * `#sp_wrap { padding: 25px 0 }` を置いている。題名自身（`.category_ttl02`）は * `padding: 0 0 30px` で上の余白を持たない。ヘッダーの下端 61px ＋ この 25px ＝ * 題名の上端 86px で、移行元の実測と一致する（2026-09-07 01:26 に携帯の名乗りで取得）。 * * dev はこの 25px を移していなかったため、題名の器がヘッダーの下端 61px にぴたり * 接し、そこへ英字の負の外余白（字の上の余りの打ち消し・下の各ページの規則を見ること）が * 乗って 58.75px まで押し上げられていた。 * * 🚨 **当たり先は `.page-content__body` である。**移行元の `#sp_wrap` に当たる器で、 * 題名と本文をまとめて包む。**すぐ外側の `.page-content--service` を使ってはいけない。** * 名前に service と付いているが、はじめての方へ（`/visitor/`）でも同じ類が使われて * おり（2026-09-07 14:08 に実測）、そこへ余白を置くと他班の画面が動く。 * * 🚨 **5つの約束と他社のご利用経験がある方へは外す。** * - 5つの約束は区画共通の CSS を読み込まず、代わりに題名の器自身が 25px を持つ * （すぐ上の規則）。ここで器にも足すと 25px が二重になる * - 他社のご利用経験がある方へは 4 班の担当である（Bug #4140 の対象外） * * 上の 4 ページの目印は、すぐ上の A-3 の規則と同じ並びである。 * * 陰性対照（2026-09-07 14:08・幅 375px・dev の実測）。当たり先を 4 ページに絞るので、 * 次の 4 画面の「ヘッダーの下端 → 本文の先頭」の空きは 0px のまま動かない。 * * はじめての方へ `/visitor/` 0px ／ 入会案内 `/guide/` 0px * 支店紹介 `/branch/` 0px ／ 会社情報 `/company/` 0px * * 🚨 **下の 25px はこの Issue では置かない（裁定 342）。**移行元の `#sp_wrap` は * `padding: 25px 0` で下にも 25px を持つが、dev の下側が合っているかは未確認である。 * 測ってから別の Issue にする. */ body.pa-service-page--top .page-content__body, body.pa-service-page--flow .page-content__body, body.pa-service-page--multi .page-content__body, body.pa-service-page--point .page-content__body { padding-top: 25px; } /* * 🚨 `display: flow-root` を素の `display: block` に戻さないこと。いちばん上の行の * `margin-top` が負なので、素の `block` だとその負の値が器の `margin-top` へ * 吸い上げられ（外余白の相殺）、器ごと上へ動いてしまう（上の記録を見ること）. */ body.pa-service-page .page-content__body .pa-service-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 枚の画像なので折り返しが起きない. */ body.pa-service-page .page-content__body :is(.pa-service-sp-title__en, .pa-service-sp-title__ja) { display: block; white-space: nowrap; } /* * 罫線の骨格だけを持つ。**幅・高さ・色はページごとに置く。**同じ詳細度の規則を * 後ろに重ねて上書きする形にすると、並べ替えたときに黙って負けるためである. */ body.pa-service-page .page-content__body .pa-service-sp-title__rule { display: block; margin-left: auto; margin-right: auto; } /* --- コンセプト（/service/）--- */ /* 塗りの上端 欧文 0.00 → 箱 -2.26 ／ 罫線 42.17 ／ 和文 67.07 → 箱 65.80. */ body.pa-service-page--top .page-content__body .pa-service-sp-title__en { margin-top: -0.6027vw; margin-right: -0.54em; font-size: 5.8667vw; letter-spacing: 0.54em; } body.pa-service-page--top .page-content__body .pa-service-sp-title__rule { margin-top: 5.9813vw; width: 17.7093vw; height: 0.2667vw; background-color: #a68146; } body.pa-service-page--top .page-content__body .pa-service-sp-title__ja { margin-top: 6.0347vw; margin-right: -0.4em; font-size: 4.4vw; letter-spacing: 0.4em; } /* --- 専任担当伴走サポート（/service/multi/）。欧文が 2 行 --- */ /* 塗りの上端 欧文 0.75 / 30.75 ／ 罫線 63.00 ／ 和文 83.25. 欧文は 1.93 上げる. */ body.pa-service-page--multi .page-content__body .pa-service-sp-title__en { margin-top: -0.3147vw; margin-right: -0.34em; font-size: 4.6667vw; letter-spacing: 0.34em; } body.pa-service-page--multi .page-content__body .pa-service-sp-title__en + .pa-service-sp-title__en { margin-top: 3.3333vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-title__rule { margin-top: 4.448vw; width: 15.0987vw; height: 0.2667vw; background-color: #a68146; } body.pa-service-page--multi .page-content__body .pa-service-sp-title__ja { margin-top: 5.072vw; margin-right: -0.4em; font-size: 3.7333vw; letter-spacing: 0.4em; } /* --- パーソナル婚活プログラム（/service/point/）。欧文が 3 行 --- */ /* 塗りの上端 欧文 0.00 / 26.89 / 53.79 ／ 罫線 85.66 ／ 和文 103.59. */ body.pa-service-page--point .page-content__body .pa-service-sp-title__en { margin-top: -0.584vw; margin-right: -0.27em; font-size: 4.4vw; letter-spacing: 0.27em; } body.pa-service-page--point .page-content__body .pa-service-sp-title__en + .pa-service-sp-title__en { margin-top: 2.776vw; } body.pa-service-page--point .page-content__body .pa-service-sp-title__rule { margin-top: 4.6747vw; width: 13.28vw; height: 0.2667vw; background-color: #a68146; } body.pa-service-page--point .page-content__body .pa-service-sp-title__ja { margin-top: 4.5333vw; margin-right: -0.35em; font-size: 3.4667vw; letter-spacing: 0.35em; } /* --- ご入会後のプロセス（/service/flow/）--- */ /* 塗りの上端 欧文 0.00 ／ 罫線 36.00 ／ 和文 56.62. */ body.pa-service-page--flow .page-content__body .pa-service-sp-title__en { margin-top: -0.6427vw; margin-right: -0.54em; font-size: 5.2vw; letter-spacing: 0.54em; } body.pa-service-page--flow .page-content__body .pa-service-sp-title__rule { margin-top: 5.0427vw; width: 15.0987vw; height: 0.2667vw; background-color: #a68146; } body.pa-service-page--flow .page-content__body .pa-service-sp-title__ja { margin-top: 5.0933vw; margin-right: -0.35em; font-size: 3.8667vw; letter-spacing: 0.35em; } /* --- 5つの約束（/service/promise/）。罫線だけ色も高さも違う --- */ /* 塗りの上端 欧文 2.43 ／ 罫線 44.22（高さ 2px）／ 和文 67.05. */ body.pa-service-page--promise .page-content__body .pa-service-sp-title__en { margin-top: -0.016vw; margin-right: -0.41em; font-size: 6.1333vw; letter-spacing: 0.41em; } body.pa-service-page--promise .page-content__body .pa-service-sp-title__rule { margin-top: 5.6747vw; width: 17.6213vw; height: 0.5333vw; background-color: #aa8546; } body.pa-service-page--promise .page-content__body .pa-service-sp-title__ja { margin-top: 5.32vw; margin-right: -0.3em; font-size: 4.8vw; letter-spacing: 0.3em; } /* * --- 他社のご利用経験がある方へ（/service/experienced/）--- * * 🚨 **この 1 画面だけ意匠が別系統である。**欧文を持たず、和文 2 行の下に赤い短い * 罫線が付く。ページの目印ではなく意匠の類名（`--experienced`）で当てる。移行元でも * 別の要素（`h2.category_ttl`）・別の CSS で組まれており、器の幅の基準も違う * （画面の 51.687%。5 ページは 85%）. * * 🚨 **2 行で字間が違う。**1 行目は器の幅いっぱいまで開いており（0.11em）、 * 2 行目は詰まっている（0.03em）。両方とも 19.5px に収束した. */ /* 塗りの上端 和文 0.91 / 29.25 ／ 罫線 66.28. */ body.pa-service-page .page-content__body .pa-service-sp-title--experienced .pa-service-sp-title__ja { margin-top: 0.0053vw; margin-right: -0.11em; font-size: 5.2vw; letter-spacing: 0.11em; } body.pa-service-page .page-content__body .pa-service-sp-title--experienced .pa-service-sp-title__ja + .pa-service-sp-title__ja { margin-top: 2.304vw; margin-right: -0.03em; letter-spacing: 0.03em; } body.pa-service-page .page-content__body .pa-service-sp-title--experienced .pa-service-sp-title__rule { margin-top: 4.9653vw; width: 4.8747vw; height: 0.2667vw; background-color: #f10000; } /* * ------------------------------------------------------------------ * 節の題を、移行元のスマホ版の意匠へ組み直す（2 画面・6 件・Issue #3109 の A-3a） * ------------------------------------------------------------------ * 移行元のスマホ版は、専任担当伴走サポートとパーソナル婚活プログラムの節の題を * **絵記号と文言を焼き込んだ画像**（`secNN_title.png`）で組む。dev は移行元の * パソコン版の本文を畳んで出しているので、**パソコン版の別の画像が実寸のまま**出る * （実測: dev は 283x179、移行元スマホ版は器の幅いっぱいの 328.13x136.64）。 * * 全体原則（画像に焼き込まれた文言は「背景は画像または CSS + 文言はテキスト」で * 再現する）に沿い、**絵記号だけを組み画像から切り出してテーマ資産に置き、文言は * テキストで足す**（司令塔の裁定・2026-09-04）。切り出しの座標は * `pa-verify-assets/svc-0903/out/a3-pictogram-crops.txt` に記録した。 * * 6 件とも並びは同じである: **絵記号 → 文字 1 行目 → 金の罫線 → 文字 2 行目。** * * ## 値の出どころ * * 帯の位置は移行元スマホ版の画像の画素を走査して測った（器の幅 328.125px のとき。 * 🚨 **A-2 の題名は器が 318.75px で基準が違う。混ぜないこと**）。 * 字の大きさと字間は、游明朝で描いた文字の塗りの外接矩形を画像と突き合わせて * 当て込んだ（高さで大きさ → 幅で字間の 2 段階）。**12 行すべて 16.5px / 0.32em に * 収束した**ので、意匠は 1 つの大きさで組まれている。 * * 🚨 **「ＰＤＣＡサイクル」の欧字は全角である。**半角で組むと同じ設定で 13.2px * 足りない（実測 152 対 目標 165.22）。全角なら差 0.8px で合う。代替文言は半角だが * 画像は全角で描かれている。 * * ## 寸法は画面幅に比例させる * * 🚨 移行元は共通 CSS の `img { width: 100% }` で**画面幅に比例して伸縮する**（器に * 上限が無い）。固定 px にすると幅 375px のときだけ一致する。値はすべて 375px の * ときの表示 px を `値 ÷ 375 × 100` で `vw` へ直してある。字間（`em`）は字の * 大きさに対する割合なのでそのまま。 * * ## 専任担当伴走サポートだけ薄い * * 🚨 移行元の専任担当伴走サポートの 3 枚は、**素の色 `#a68146` を不透明度 60% * （153/255）で描いている**（パーソナル婚活は 100%）。白の地では `#cab390` に見える。 * 節の地の色は 6 件とも透明なので、`#cab390` を直に書かず**不透明度で写す**。 * * 🚨 **薄くするのは文字と罫線だけである。**切り出した絵記号の画像は**すでに 60% の * 透明度を含んでいる**（元画像から切り出したため）。器へ不透明度をかけると絵記号が * 二重に薄くなり 36% になる。 */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body h4:has(.pa-service-sp-section-title) img { display: none; } /* * 🚨🚨 **題の器の飾りを消し直す。文言を足したことで、テーマが消していた飾りが * 戻ってしまうためである。**A-2 の題名とまったく同じ型で、テーマの * `.page-content__body :is(h2..h6):has(> img:only-child)` が外れることによる。 * `article-reset.css` の見出しの初期化は全体が `@media (min-width: 750px)` の中 * なので携帯幅には届かない。 * * 🚨🚨 **`h4` では `margin` も書き戻す必要がある。A-2 の `h2` と違うので写し間違えない。** * テーマは `h4` に内余白も枠線も地の色も置いていない（置くのは `h2` と `h3`）。だから * 上の 3 つはこの `h4` では何も打ち消していない。**戻ってしまうのは外余白のほうである。** * * 実測（テーマの CSS を実ファイルで読ませ、**実ページと同じ入れ子** * `section.sections > div.sec_inner > h4` で計測）: * * 幅 375px / 749px 画像だけ 外余白 上 0 ／ 下 18px * 文言を足すと 外余白 **上 30px ／ 下 20px** * 幅 750px / 1440px どちらも同じ（無傷） * * 6 件すべての節の題の上に 30px の空きが新たに入っていた。`:has(> img:only-child)` の * `margin: 0 0 var(--pa-article-paragraph-gap)` が外れ、素の見出しの * `margin: var(--pa-article-block-gap) 0 20px` に戻るためである。 * * 🚨 **A-2 の `h2` で外余白が変わらなかったのは、`.main_ttl` の写しが外余白を持って * いたからで、`h4` には相当する規則が無い。**同じ型に見えても効き方が違う。 * * 🚨🚨 **この退行は、実ページと同じ入れ子で測らないと出ない。**最初に測ったときは * `h4` を本文の器の直下に置いた簡略な組みだったので差が 0 に見え、見逃した * （セルフレビューの指摘で判明）。**検証用の組みは実ページの入れ子と、配る CSS を * すべてそろえること.** * * 戻す値は、外れた規則とまったく同じものを置く（移行元の余白に合わせるのは * この弾の範囲外）. */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body h4:has(.pa-service-sp-section-title) { margin: 0 0 var(--pa-article-paragraph-gap); padding: 0; border: 0; background: none; } /* * 🚨 `display: flow-root` を素の `display: block` に戻さないこと。いちばん上の * 絵記号の `margin-top` が器の `margin-top` へ吸い上げられ（外余白の相殺）、 * 器ごと動いてしまう. */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .pa-service-sp-section-title { display: flow-root; color: #a68146; font-family: var(--pa-font-family-serif); font-weight: normal; line-height: 1; text-align: center; } body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .pa-service-sp-section-title__mark { display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-size: 100% 100%; } /* * 🚨 `letter-spacing` は最後の 1 字の後ろにも空きを足すので、中央寄せの文字は * **左へ**字間の半分ずれる。`margin-right` に同じ量の負を置いて戻す（A-2 で実証）. */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .pa-service-sp-section-title__line { display: block; font-size: 4.4vw; letter-spacing: 0.32em; margin-right: -0.32em; white-space: nowrap; } body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .pa-service-sp-section-title__rule { display: block; margin-left: auto; margin-right: auto; background-color: currentColor; } /* 専任担当伴走サポートだけ 60%。**絵記号には掛けない**（画像が既に 60% のため）. */ body.pa-service-page--multi .page-content__body :is(.pa-service-sp-section-title__line, .pa-service-sp-section-title__rule) { opacity: 0.6; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__mark { margin-top: 0.3093vw; width: 11.9413vw; height: 14.72vw; background-image: url(../images/sec-multi01-sp.png?ver=79c288adbab4); } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__mark + .pa-service-sp-section-title__line { margin-top: 7.2053vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__rule { margin-top: 2.3947vw; width: 57.2347vw; height: 0.6187vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__rule + .pa-service-sp-section-title__line { margin-top: 2.264vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__mark { margin-top: 0.5147vw; width: 14.72vw; height: 13.896vw; background-image: url(../images/sec-multi02-sp.png?ver=b33bb011ac64); } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__mark + .pa-service-sp-section-title__line { margin-top: 7.6187vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__rule { margin-top: 2.3947vw; width: 69.0747vw; height: 0.6187vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__rule + .pa-service-sp-section-title__line { margin-top: 2.16vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__mark { margin-top: 0.4107vw; width: 14.3093vw; height: 14.2053vw; background-image: url(../images/sec-multi03-sp.png?ver=e38770ca6838); } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__mark + .pa-service-sp-section-title__line { margin-top: 7.4133vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__rule { margin-top: 2.3947vw; width: 79.984vw; height: 0.6187vw; } body.pa-service-page--multi .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__rule + .pa-service-sp-section-title__line { margin-top: 2.4693vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__mark { margin-top: 0vw; width: 18.2213vw; height: 18.2213vw; background-image: url(../images/sec-point01-sp.png?ver=2e4bf7792846); } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__mark + .pa-service-sp-section-title__line { margin-top: 5.456vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__rule { margin-top: 2.2907vw; width: 50.648vw; height: 0.624vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec01 .pa-service-sp-section-title__rule + .pa-service-sp-section-title__line { margin-top: 2.3013vw; } /* * 🚨 **パーソナル婚活プログラムの 2 つ目の節だけ、移行元の画像が文字の下に空きを * 持つ。**元画像 850x386（表示 149.01px）の最後の塗りは 137.42px で終わり、 * 残り 11.6px は透明である。組み直した器はその空きを持たないので、**後ろの内容が * 11.34px 上へ動く**（実測。ほかの 5 件の差は 1.31px 以内）。 * * 移行元の器の高さに合わせて下へ空きを足す（11.34 ÷ 375 × 100 = 3.024vw）. */ body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec02 { padding-bottom: 3.024vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__mark { margin-top: 0vw; width: 13.28vw; height: 15.544vw; background-image: url(../images/sec-point02-sp.png?ver=70f237a3130c); } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__mark + .pa-service-sp-section-title__line { margin-top: 7vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__rule { margin-top: 2.3947vw; width: 51.368vw; height: 0.624vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec02 .pa-service-sp-section-title__rule + .pa-service-sp-section-title__line { margin-top: 2.36vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__mark { margin-top: 0.104vw; width: 15.0293vw; height: 14.9253vw; background-image: url(../images/sec-point03-sp.png?ver=68545f83f1a2); } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__mark + .pa-service-sp-section-title__line { margin-top: 7.104vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__rule { margin-top: 2.2907vw; width: 73.2933vw; height: 0.624vw; } body.pa-service-page--point .page-content__body .pa-service-sp-section-title--sec03 .pa-service-sp-section-title__rule + .pa-service-sp-section-title__line { margin-top: 2.2587vw; } /* * ------------------------------------------------------------------ * PDCA の見出し 4 件を、移行元のスマホ版の意匠へ組み直す（Issue #3109 の A-3b） * ------------------------------------------------------------------ * 移行元のスマホ版は、パーソナル婚活プログラムの PDCA の見出しを**文言を焼き込んだ * 画像**（`sec01_list_title01.png`〜`04.png`・840x130）で 2 行に組む。dev は移行元の * パソコン版の本文を畳んでいるので、**パソコン版の別の画像（474x23）が 1 行のまま** * 出る。同じ文言を別の割り付けで見せている。 * * ## 意匠（4 件とも共通・**左寄せ**） * * 1 行目 欧文 + 全角括弧の和文。**太いゴシック 20px / 700**。字間は件ごとに違う * 2 行目 和文。**明朝 16.5px / 400・字間 0.33em** * * 🚨 **節の題（A-3a）とは意匠が違う。**あちらは絵記号つきの中央寄せで、2 行とも * 明朝である。写し間違えないこと。 * * 🔑 2 行目の 16.5px / 0.33em は**節の題と同じ値に収束した**。移行元は明朝の見出しを * この 1 組で組んでいるとみてよい。 * * 🚨 **左寄せなので字間の打ち消し（`margin-right` に負の値）は要らない。**あれは * 中央寄せのとき、最後の 1 字の後ろの空きごと中央に置かれるのを戻すためのものである。 * * 🚨 1 行目の字間を件ごとに変えているのは、欧文の字幅の差を幅で吸収するためである。 * 閲覧者の端末の書体は一定でないので画素単位の一致は望めず、**幅を合わせる**ことを * 目的にしている。 * * 値の出どころ = `pa-verify-assets/svc-0903/out/a3b-pdca-metrics.txt`。 * 寸法はすべて画面幅に対する割合（移行元は `img { width: 100% }` で伸縮する）。 * * 🚨 **器の高さは移行元より最大 0.31px 低い**（移行元 50.78px）。1px を大きく下回る * ので下の空きは足していない。 */ /* * 🚨 **見出しの器を器の幅いっぱいへ戻す。**テーマは `dl` へ `margin: 1em` を置いて * おり、携帯幅の本文の字が 15px なので左右 15px 内側に入る。移行元は器の幅いっぱい * である（採取データ: 移行元 `DL x=23.44 w=328.13` 対 dev `x=38.44 w=298.13`）。 * **左寄せの見出しなので、これを直さないと文字の起点が 15px 右へずれる** * （セルフレビューの指摘）。 * * 打ち消しは `article-reset.css` にもあるが、あのファイルは全体が * `@media (min-width: 750px)` の中なので携帯幅には届かない. */ body.pa-service-page--point .page-content__body dl.list { margin-left: 0; margin-right: 0; } body.pa-service-page--point .page-content__body dt:has(.pa-service-sp-list-title) img { display: none; } /* * 🚨 **見出しの下の空き。**移行元は `sp/service/point/css/style.css` の * `.sections .list dt { padding: 0 0 17px }` を持つ（採取データの移行元の `dt` は * 高さ 67.78 = 画像 50.78 + 17）。dev は 0 だった（セルフレビューの指摘）。 * * 🚨 **`margin` は書かない。**テーマが見出しの飾りを外す規則は `h2`〜`h6` にしか * 当たらず `dt` は対象外なので、外余白は文言の有無で変わらない。ここへ `margin` を * 書くと、無かった余白を新しく作ることになる（一度実際に作ってしまった）. */ /* * 🚨🚨 **この 17px は固定の値である。比例値（vw）で書かない（Task #4490）。** * 初版は `padding-bottom: 4.5333vw` と書いていた。**375px では 17.0px になるので * 一致していたが、幅を変えると外れる**（749px で 33.95px・320px で 14.51px）。 * * 移行元の `sp/service/point/css/style.css` は `.sections .list dt { padding: 0 0 17px }` * で、**画面幅では動かない**。すぐ下の項目（`dd`）の節にも「この節の値は固定 px の * まま写す（型 5）」と書いてある。**同じ一覧の中で、見出しだけ比例値になっていた。** * * 幅 3 つの実測（2026-09-08 00:27・移行元は記録版の写し・dev は `?cb=` 付き）: * * 幅 移行元の見出し 直す前 直したあと * ----------------------------------------------------- * 749px 118.42 134.77（+16.35） **117.81**（−0.61） * 375px 67.78 67.44（−0.34） **67.45**（−0.33） * 320px 60.33 57.56（−2.77） **60.06**（−0.27） * * 一覧の器も 3 幅とも ±2px に入る（−1.19 / −0.68 / −0.54）。 * * 🚨 **移行元の見出しの中身（絵）は画面幅に比例して伸縮する**（`img { width: 100% }`）。 * **比例するのは中身だけで、下の空きは固定である。**中身が比例するからといって * 空きまで比例値で写さないこと。 */ body.pa-service-page--point .page-content__body dt:has(.pa-service-sp-list-title) { padding-bottom: 17px; } /* * 🚨🚨 **`dt` には「飾りを消し直す」規則を置かない。ここが A-2 と A-3a と違う。** * * テーマが見出しの飾りを外す規則 * （`.page-content__body :is(h2..h6):has(> img:only-child)`）は、**`h2` から `h6` に * しか当たらない。`dt` は対象外である。**だから文言を足しても `dt` の箱は何も * 変わらない。 * * 実測（実ページと同じ入れ子 `dl.list > dt` で、テーマの CSS を実ファイルで読ませて * 計測）: 幅 375 / 749 / 750 / 1440px のすべてで、文言の有無にかかわらず * **外余白 0 ／ 内余白 0 ／ 枠線 0**。 * * 🚨 **一度ここに `margin: 0 0 var(--pa-article-paragraph-gap)` を書いて、無かった * 18px の余白を新しく作ってしまった**（A-3a の `h4` の直しをそのまま写したため）。 * 同じ形の要素に見えても効き方が違う。**写す前に、その要素で実際に何が変わるかを * 実ページと同じ入れ子で測ること.** * * A-2 の `h2` 飾りが戻る → 内余白・枠線・地だけ消す（外余白は書かない） * A-3a の `h4` 外余白が戻る → 外余白を書き戻す * A-3b の `dt` 何も戻らない → **規則そのものを置かない** */ /* * 🚨 `display: flow-root` を素の `display: block` に戻さないこと。いちばん上の行の * `margin-top` が器へ吸い上げられる（外余白の相殺）. */ body.pa-service-page--point .page-content__body .pa-service-sp-list-title { display: flow-root; color: #a68146; font-weight: normal; line-height: 1; text-align: left; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title__en { display: block; /* * 🚨 ゴシックは `--pa-font-family-base` である（`--pa-font-family-sans` は存在 * しない）。**ただし「new プロファイル」のページでは先頭が Inter になる** * （`main.css` 433 行）。サービス配下は旧デザインなので游ゴシックが先頭に来る. */ font-family: var(--pa-font-family-base); font-weight: bold; font-size: 5.3333vw; white-space: nowrap; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title__ja { display: block; font-family: var(--pa-font-family-serif); font-size: 4.4vw; letter-spacing: 0.33em; white-space: nowrap; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--plan .pa-service-sp-list-title__en { margin-top: 0.104vw; letter-spacing: 0.07em; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--plan .pa-service-sp-list-title__ja { margin-top: 3.624vw; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--do .pa-service-sp-list-title__en { margin-top: 0; letter-spacing: 0.1em; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--do .pa-service-sp-list-title__ja { margin-top: 3.8907vw; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--check .pa-service-sp-list-title__en { margin-top: 0; letter-spacing: 0.12em; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--check .pa-service-sp-list-title__ja { margin-top: 3.728vw; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--act .pa-service-sp-list-title__en { margin-top: 0.104vw; letter-spacing: 0.04em; } body.pa-service-page--point .page-content__body .pa-service-sp-list-title--act .pa-service-sp-list-title__ja { margin-top: 3.624vw; } /* * ------------------------------------------------------------------ * ご入会後のプロセスの Step 8 件を、移行元のスマホ版の並びへそろえる（Issue #3109 の A-4） * ------------------------------------------------------------------ * 移行元のスマホ版は、各 Step を **1 枚の画像**（`secNN_ph.jpg`）にまとめている。 * 中身は上から「連結の矢印 → 丸い写真 → Step の札 → 和文」の縦積みで、すべて中央寄せ。 * * 🚨🚨 **文字は写真の画素に焼き込まれていない。**画像は「写真 → 白い余白 → 金の文字」の * 縦積みで、文字は写真の下の白地に置かれている。**前の裁定（写真として `` + 代替 * 文言で出す）は誤った前提の上にあったので取り下げられた**（司令塔・2026-09-04）。 * * 🚨 **dev はすでに必要なものを全部持っている。資産の追加も文言の注入も要らない。** * * 丸い写真 `flowNN_ph.jpg`（369x366）… 移行元スマホ版と**同じ写真（文字なし）** * Step の札 `flowNN_step.png`（82x26）… 移行元スマホ版と**同じ意匠の金の「Step.N」** * 和文 `h5.service_sub_title.serif` … **すでに本物のテキスト** * * つまりこの節は**並べ替えと寸法合わせだけ**である。 * * ## 実測（表示 px・器の幅 328.125 = 画面幅 375px。8 枚を画素で走査） * * もの 上端 高さ 備考 * 矢印 0.00 26.64 幅 29.72・赤の下向き三角。**Step.0 には無い** * （空き） 26.64 32.81 * 写真 59.45 324.65 丸い切り抜き・器の幅いっぱい * （空き） 384.10 35.51 Step.0 だけ 36.35 * Step の札 419.61 23.93 幅 71.4〜75.3 * （空き） 443.54 14.20 * 和文 457.70 16.00 * * 空きは 8 枚とも揃っている（写真→札 35.5〜36.4／札→和文 14.2）。 * * 🔑 **和文は 16.5px / 字間 0.31em に収束した。**節の題（A-3a）と PDCA の 2 行目 * （A-3b）と**同じ値**で、移行元が明朝の見出しをこの 1 組で組んでいることの 3 度目の * 裏づけになる。 * * 🚨 **`/service/flow/index0706/` には当てない。**移行元のスマホ版に相手のページが * 無く、その画面は Step の絵を 1 枚も持たない。 * * 実測の正本 = `pa-verify-assets/svc-0903/out/a4-steps-findings.txt`。 */ body.pa-service-page--flow .page-content__body .txt_inner { /* * 🚨🚨 **並べ替えが要る。奇数の Step は写真が本文の後ろにある。** * 移行元のパソコン版の本文は 1 つおきに写真と文章の順を入れ替えており * （`service/flow/index.html`: step0/2/4/6 は `.ph → .txt_area`、 * step1/3/5/7 は `.txt_area → .ph`）、そのまま縦に積むと**半分の Step で * 写真がいちばん下に落ちる**。移行元のスマホ版は 8 枚とも * 「矢印 → 写真 → 札 → 和文 → 本文」である。 * * 実測（移行元パソコン版の実 DOM をそのまま描いて計測）: 直す前の step1 の並びは * **「札 → 和文 → 本文 → 写真」**だった。 * * 🚨 `::before` の矢印も並びの一員になるので、いちばん上へ置く指定が要る. */ display: flex; flex-direction: column; text-align: center; } body.pa-service-page--flow .page-content__body .txt_inner .ph { order: -1; } body.pa-service-page--flow .page-content__body .txt_inner:not(#step0)::before { order: -2; } /* * 🚨🚨 **和文の上の外余白を消す。**テーマは `.page-content__body :is(h2..h6)` へ * `margin: var(--pa-article-block-gap) 0 20px` を当てており、携帯幅では上に 30px が * 付く。これは `.step_ico` の下の空き（14.2px）と**相殺されて 30px のほうが勝つ**ので、 * 札と和文の間が移行元の 14.2px でなく 30px になっていた。 * * 実測（実 DOM で計測）: 直す前は **30.00px**。移行元は 14.2px. */ body.pa-service-page--flow .page-content__body .txt_inner .service_sub_title { margin-top: 0; } /* * 🚨 **Step.0 の本文だけ金にする。**移行元のスマホ版は * `sp/service/flow/css/style.css` の `.sec01 p { color: #a68146 }` で 1 つ目の Step の * 本文を金にしている（採取データでも 1 件目だけ rgb(166,129,70)）。dev の写しにも * 同じ規則があるが（`flow.css` の `.txt_inner:first-child p`）、パソコン幅の塊の * 中なので携帯幅には届かない。 * * 🚨 **当たり先を `.sec01` にしない。**移行元のスマホ版は Step ごとに `section` を * 分けるので `.sec01` が 1 つ目の Step だけを指すが、**dev は 8 つの Step が * 1 つの `.sec_inner.sec01` の中に並ぶ**ので、`.sec01 p` では全部の Step が金になる. */ body.pa-service-page--flow .page-content__body #step0 p { color: #a68146; } /* * 🚨🚨 **この 2 つの空きだけは固定 px で写す。移行元が固定 px で持っているためである。** * * 移行元は**画像**を `img { width: 100% }` で伸縮させるので、絵や文字の律動は画面幅に * 比例する。**しかし CSS で置く余白は固定 px であり、画面幅が変わっても動かない。** * * `sp/service/flow/css/style.css` * `.sections h3 { padding-bottom: 30px }` … 和文と本文の間（h3 が組み画像を包む） * `.sections { padding-bottom: 40px }` … Step と Step の間 * * 実測（実 DOM で計測）: 直す前は **和文 → 本文 15px・Step 間 0px**。移行元は 30 / 40。 * * 🚨 **「移行元は画面幅に比例する」は画像の中身にだけ当てはまる。**CSS の余白まで * 割合へ換算すると、狭い画面で詰まりすぎ広い画面で開きすぎる。**どちらなのかは * 写し元の CSS を読んで決める**（セルフレビューの指摘で気づいた）。 * * 下の検査は、この節に固定 px が無いことを見張っている。**この 2 つは例外として * 名指しで許してある.** */ body.pa-service-page--flow .page-content__body .txt_inner .service_sub_title { margin-bottom: 30px; } body.pa-service-page--flow .page-content__body .txt_inner { margin-bottom: 40px; } /* * 最後の段（Step.7）の下に 40px を足す（Bug #4131） * ------------------------------------------------------------------ * 移行元のスマホ版は **Step ごとに `section.sections` を分け**、その器に * `sp/service/flow/css/style.css` の `.sections { padding-bottom: 40px }` を当てる。 * この 40px は **2 つの役目を兼ねる**。段どうしの隙間と、**最後の段のあとの空き**である。 * * dev は 8 つの段を **1 つの `section.sections` の中**に並べる（`.sec_inner.sec01` の * 直下に `#step0`〜`#step7`）。段どうしの隙間は上の `.txt_inner { margin-bottom: 40px }` * で写せているが、**最後の段のぶんが失われる**。`#step7` の下外余白 40px は器を * 突き抜けて（`.sections` も `section.service` も内余白・外余白が 0）、その下の帯 * （`.pa-conv-band`、上外余白 15px）との間で 1 つにまとまるためである。 * * 実測（幅 375px。Step.7 の最後の文字の下端 → 帯の上端。塗られている中身で測る）: * * 移行元スマホ版 86.19px ← 6.19（文字の下の余り）＋ 40（器の下内余白）＋ 40（帯まで） * dev（直す前） 46.19px ← 6.19 ＋ 40（1 つにまとまった空き） * * 🚨 **`.sections` に下内余白 40px を足すのは誤り。**器に内余白が付くと `#step7` の * 下外余白が中に閉じ込められ、帯の上外余白 15px が別に立つ。実ページで試すと * **+55px**（狙いは +40px）になった。最後の段に**内**余白で足すと、ちょうど * +40.00px になる（内余白はまとまらないため）。 */ body.pa-service-page--flow .page-content__body .txt_inner:last-child { padding-bottom: 40px; } /* * 🚨🚨 **本文の段落は左寄せのままにする。**移行元は Step の絵と札と和文を 1 枚の * 画像にまとめて中央へ置くが、**その下の本文の段落は左寄せである**（採取データの * 移行元 `P` は `text-align: start`）。上の中央寄せは器ごと当たるので、これが無いと * **本文まで中央になる**（実測で気づいた。自分で入れた退行）. */ body.pa-service-page--flow .page-content__body .txt_inner p { text-align: left; /* * 🚨🚨 **本文の下の外余白を 0 にする（Task #3400）。**テーマは携帯幅で * `.page-content__body p` へ `margin: 0 0 var(--pa-article-paragraph-gap)` を当てて * おり、`--pa-article-paragraph-gap` は携帯幅で 18px（`main.css` の * `@media (max-width: 749px)` の中）。移行元のスマホ版の `p` はこの外余白を * 持たない（採取データで実測。本文の下から次の矢印までの空きが * 65px → 48px へ縮む＝差の分だけ縮む）. */ margin-bottom: 0; } /* * 本文の段落の強制改行を、携帯幅でだけ効かなくする（Task #3400） * ------------------------------------------------------------------ * 移行元のスマホ版は本文に改行を入れず、幅 328.1px で自然に折り返す（8 段の * 行数は Step.0 から順に 5/3/4/4/5/4/4/4）。dev は移行元パソコン版の本文を * そのまま出しているため `
` が残っており、改行位置が固定されて 8 段とも * 1〜2 行長い（7/5/5/5/7/6/5/6 行、合計 +327.6px）。字 14px・行送り 25.2px は * 両側で一致しているので、改行の位置だけの問題である。 * * 前例は `promise.css` 142〜146 行（`@media (max-width: 1330px)` の中の * `... dd br { display: none }`）と同じ形。 * * 🚨 **当たり先を `.txt_inner p` の中の `br` だけに絞る。**ページの題や導入文の * `br` を巻き込むと、そちらの折り返しが変わる。 */ body.pa-service-page--flow .page-content__body .txt_inner p br { display: none; } /* * 連結の矢印。**移行元のパソコン版には無く、スマホ版が画像に焼き込んでいる。** * 🚨 **Step.0（`#step0`）には付けない**（移行元の 1 枚目に矢印が無い）. * * 🚨🚨 **色は 1 本目とそれ以外で違う（Task #3400・裁定 67）。**移行元のスマホ版を * 2026-09-04 14:34 JST に幅 375px で取得して画素を実測すると、Step.0 → Step.1 の * 1 本目だけ赤 `rgb(204, 31, 15)`（`#cc1f0f`）で、2〜7 本目は 6 本とも金 * `rgb(167, 128, 69)`（`#a78045`）だった。移行元スマホ版の素材そのものでも裏が * 取れている（記録版 `legacy/www.p-a.jp` の記録 `19f499fe` の * `public/sp/service/flow/images/sec02_ph.jpg` の上端は赤、`sec03_ph.jpg` から * `sec08_ph.jpg` の 6 枚は上端が金）。 * * 🚨 **この節に以前あった「赤い下向きの三角」という注釈は誤りだった。**7 本中 * 6 本が金であることを見落としていた。dev は 7 本とも赤 `#c81400` で描いており、 * 2〜7 本目の 6 本が違っていた. */ body.pa-service-page--flow .page-content__body .txt_inner:not(#step0)::before { content: ""; display: block; width: 0; height: 0; margin: 0 auto 8.7493vw; border-left: 3.9627vw solid transparent; border-right: 3.9627vw solid transparent; border-top: 7.104vw solid #a78045; } /* * 1 本目（Step.0 → Step.1）だけ赤にする（Task #3400）。 * * 🚨 **`.txt_inner` を選択子に残す。**打ち消す相手（上の規則）は `:not(#step0)` * の中の `#step0` ぶんクラス 3 つ + ID 1 つの詳細度（0,1,3,2）を持つ。`#step1` だけを * 足す形（クラス 2 つ + ID 1 つ）だと詳細度で負けて 1 度も効かない（実測で確認済み）。 * 詳細度をそろえたうえで、あとに書いた規則として勝たせる. */ body.pa-service-page--flow .page-content__body .txt_inner#step1::before { border-top-color: #cc1f0f; } /* 写真は器の幅いっぱい。dev の 325.45px に対し移行元 324.65px で 0.8px 差. */ body.pa-service-page--flow .page-content__body .txt_inner .ph { margin-bottom: 9.4693vw; } /* * 🚨🚨 **写真を `display: block` にする（Task #3400）。**`.ph` は img 1 枚だけを * 包む器で、img は既定で `display: inline`（このページは旧デザインなので * `.pa-profile-new img { vertical-align: bottom }` が当たらず、既定の * `baseline` のまま）。ベースライン合わせの inline 画像は、下に行の余り * （このページの字組みで実測 8.0px）を残す。移行元のスマホ版は共通 CSS * （`sp/css/common.css` の `img { display: block }`）で全画像をブロック化して * おり、この余りを持たない。**「写真の下 → 段番号の札の上」の空きが実測より * 広かった原因の主要な内訳である**（8.0px ぶん。残りは画像素材の寸法差）. */ body.pa-service-page--flow .page-content__body .txt_inner .ph img { display: block; } body.pa-service-page--flow .page-content__body #step0 .ph { margin-bottom: 9.6933vw; } /* * Step の札。dev の画像は 82x26 で、移行元の表示（71.4〜75.3）より少し大きい。 * 🚨 **高さは指定しない**（`height: auto` で比を保つ）. * * 🚨🚨 **`display: block` も要る（Task #3400）。**`.ph img` と同じ理由（既定の * baseline 揃えの inline 画像が下に行の余りを残す）で、札の下にも実測 8.0px の * 余りができていた。「札の下 → 和文の題の上」の空きが実測より広かった主因 * （移行元 14px・直す前の dev 24px。外余白 `.step_ico` の `margin-bottom` * （3.7867vw = 14.2px）は既に移行元と同じ値なので、直すのはこの余りだけでよい）。 * 水平方向の中央寄せは `margin: 0 auto` のまま `display: block` で機能する * （幅を指定した block 要素の auto マージンとして効く）. */ body.pa-service-page--flow .page-content__body .step_ico img { display: block; width: 19.6533vw; height: auto; margin: 0 auto; } /* * 🚨 **Step.5 の札だけ、絵の実寸と HTML の属性が食い違う（Bug #4166）。** * `flow05_step.png` は実寸 81x23 なのに属性は `height="26"` で、移行元は属性の値 * どおりに描く。ほかの 7 枚は実寸も 26px なので差が出ない。 * * パソコン幅は、このファイルの上のほうにある * `body .pa-page--service .page-content__body #step5 .step_ico img { height: 26px }` * が既に戻している。**携帯幅は上の `height: auto` がそれを打ち消す**ので、ここで * もう一度戻す。 * * 🚨 **固定 px では書かない。**携帯幅の札は `width: 19.6533vw` で画面幅に比例 * するので、高さも比例させる必要がある。**縦横の比を属性と同じ 81:26 に指定する**と、 * 幅が決まっているぶん高さがその比で決まる（`height: auto` のままでよい）。 * * 実測（幅 375px。段の文章の上端から次の段の文章の上端まで）: * * 直す前 段 4 → 5 が 667.29（移行元 670.75・**−3.46**） * 直した後 段 4 → 5 が 670.01（移行元 670.75・**−0.74**） * * ほかの 7 段の差は −0.24〜−1.02 なので、同じ範囲に収まる。 */ body.pa-service-page--flow .page-content__body #step5 .step_ico img { aspect-ratio: 81 / 26; } body.pa-service-page--flow .page-content__body .step_ico { margin-bottom: 3.7867vw; } /* * 和文。**すでに本物のテキストなので、大きさと字間をそろえるだけ。** * 🚨🚨 **字間の打ち消し（`margin-right` に負）は書かない。移行元も打ち消していない。** * 移行元の画像の和文の塗りの中心は、器の中心より **1.74〜2.32px 左**にある * （`sec01/02/05_ph.jpg` を画素で走査）。これは「最後の 1 字の後ろの空きごと中央へ * 置いた」形とちょうど合う（0.31em × 16.5 ÷ 2 = 2.56px）。**打ち消すと真の中央に * なり、移行元より 1.7〜2.3px 右へずれる。** * * 🚨 A-2 の題名では打ち消しを入れている。**中央寄せなら必ず打ち消す、ではない。** * 移行元がどちらの形で組んでいるかを画素で確かめてから決める. */ /* * ------------------------------------------------------------------ * 導入文の色・太さ・字間を、移行元スマホ版の焼き文字にそろえる（Bug #4999） * ------------------------------------------------------------------ * ユーザーの目視で「テキストカラーやフォントに相違がある」と出た（2026-09-09）。 * * 移行元スマホ版はこの導入文を絵に焼き込んでいる（`sp/service/flow/images/sec01_txt.png`）。 * 絵を画素で測り、墨のある画素の色を数えた。 * * 移行元の焼き文字 茶 rgb(166,129,70) = #a68146 ／ 細い明朝 ／ 字間 約 0.2em * 直す前の dev 黒 rgb(0,0,0) ／ 太さ 700 ／ 字間 0.05em * * 🚨 **導入文だけが網から漏れていた。**色を与える `assets/service/css/section.css` * の `.service_sub_title { color: #a68146; font-weight: normal; letter-spacing: 0.2em }` * は `@media (min-width: 750px)` の中にあり、携帯幅へ届かない。携帯幅の側は下の * `.txt_inner .service_sub_title` が持つが、**当たり先が `.txt_inner` の中に限られている**。 * **この導入文だけが `.txt_inner` の外**（`section#flow.service` の直下）にある。 * 各段の見出し 8 件は `.txt_inner` の中なので、もともと茶色が出ていた。 * * 🚨 **字の大きさは触らない。**17px で墨が 16.08px になり、移行元の焼き文字の * 墨（15.06〜16.60px。1 行目はかぎ括弧が高いので大きく出る）と合っている。 * * 🚨 **当たり先を `#flow >` で直下に絞る。**`.service_sub_title` だけで書くと * `.txt_inner` の中の 8 件にも当たり、そちらの字間（0.31em）を上書きしてしまう。 * * 🚨 **字間 0.28em は実測から決めた。**移行元パソコン版の宣言（0.2em）ではない。 * 絵に焼いた文字には字間の宣言が無いので、**両側の絵を同じやり方で測って合わせた**。 * dev の側は直した画面を撮り、移行元の側は `sec01_txt.png` を、どちらも * 「墨のある画素」を数えて画面上の px へ直している。 * * 0.2em のとき 墨の横幅が 3 行とも 12〜16px 狭い（−16.24 / −12.12 / −15.31px） * 0.28em のとき 3 行の残差が +1.44 / +0.12 / −3.07px（最小二乗で決めた） * * 墨の**高さ**は 0.2em のときすでに ±0.4px で合っていた（−0.27 / −0.39 / +0.17px）。 * **合っていなかったのは横だけなので、字の大きさではなく字間で詰めた。** * * 🚨 **中央へ寄せる。**移行元スマホ版は 3 行とも中央に置いている。絵の墨の * 左右の余りを測ると、1 行目 30.11 / 30.11、2 行目 60.22 / 59.45、3 行目 66.01 / 64.47 で * 左右がそろっている。dev は左寄せで、2 行目と 3 行目が 118〜131px も右へ余っていた。 * * 🚨 **パソコン幅では寄せない。**パソコン幅は移行元パソコン版と一致しており、 * そちらは左寄せである。この規則は `@media (max-width: 749px)` の中に閉じてある。 * * 🚨 **行送りも絵に合わせる（Bug #10104・事業部の管理表 No.15 スマホ）。**絵の墨のある行を数えると、 * 表示（幅 328）で 3 行の中心は 8.1・42.6・77.4px（行の間隔 約 34.6px）。dev は 25.5px で詰まっていた。 * * 🚨 **上の外余白は負の値でないと効かない。**行送りを 34.6px にすると 3 行とも 7.7px 下へずれる。 * この見出しの上の外余白は、上の要素の外余白（30px 以上）と相殺されて大きい方が残るので、 * 22.3px のような正の値にしても箱は動かない（下見の実測）。負の値は相殺の結果から引かれるので、 * -7.7px でちょうど 7.7px 上がる。**上の要素の外余白を 30px 未満へ変える直しが入ると、この位置は崩れる。** * 下の外余白 21px は、下の Step.0 の写真の上端を移行元の 333.7 に合わせる値である。 */ body.pa-service-page--flow .page-content__body #flow > h4.service_sub_title { margin-top: -7.7px; margin-bottom: 21px; color: #a68146; font-weight: normal; line-height: 34.6px; letter-spacing: 0.28em; text-align: center; } body.pa-service-page--flow .page-content__body .txt_inner .service_sub_title { font-family: var(--pa-font-family-serif); font-size: 4.4vw; font-weight: normal; letter-spacing: 0.31em; line-height: 1; color: #a68146; } /* * ------------------------------------------------------------------ * PDCA の一覧の説明に、移行元の金の罫線と字をそろえる（Issue #3316・裁定 67） * ------------------------------------------------------------------ * 移行元のスマホ版は、パーソナル婚活プログラムの PDCA の一覧で、**各項目の説明の下に * 1px の金の罫線**を引いている（最後の項目だけ無し）。dev には 1 本も無く、区切りが * 見えない。裁定 67（見た目に違いがあるものはすべて直す）の対象である。 * * 写し元は `sp/service/point/css/style.css` 91〜103 行: * * .sections .list dd { padding: 0 0 20px; margin: 0 0 25px; * border-bottom: 1px solid #a68146; * letter-spacing: 0.05em; line-height: 1.8; font-size: 14px; } * .sections .list dd:last-child { padding: 0 0 0; margin: 0 0 0; border-bottom: none; } * * 実測（幅 375px・採取データ `out/sp2/*-375-point.json`）: * * 側 下の枠線 字 内余白 / 外余白 * 移行元 1px solid rgb(166,129,70) 14px 20px / 25px * dev 0px none 15px 0 / 0 * * 🚨 **この節の値は固定 px のまま写す。**移行元も固定 px で持っており、画面幅では * 動かない（型 5。**「移行元は画面幅に比例する」は画像の中身にだけ当てはまる**）。 * 罫線の 1px も同じである。 * * 🚨 **見出しの `dt` には触らない。**そちらは Issue #3294（PR #3295）で組み直し済みで、 * `dt` はテーマの飾りの規則の対象外なので打ち消しを置いていない. */ /* * PDCA の一覧の器から、テーマの上下の外余白を落とす（Task #4448） * ------------------------------------------------------------------ * **テーマは `main.css` 33793 行で `.page-content__body dl { margin: 1em }` を置く。** * この区画の字は 14px なので（下の `.sections { font-size: 14px }`）、**四方に 14px** * 付く。移行元スマホ版は 0 である。 * * 🚨 **左右はすでに 0 になっている**（上の 1930 行あたりの規則。左寄せの見出しの * 起点がずれるため、Issue #3294 の直しで打ち消してある）。**ここで足すのは * 上下だけである。**四方の一括指定（`margin: 0`）で書くと、上の規則を影で * 上書きして「左右をなぜ 0 にしたか」の理由が読めなくなる。 * * 移行元が読む CSS を上から追った結果（`sp/service/point/index.html` 22〜25 行）: * * sp/css/basic.css 9〜20 行 `dl` を含む素の初期化で `margin: 0` * sp/css/style.css 1577 行 `dl { margin: 0; clear: both; border-top: 1px solid #888888 }` * sp/service/point/css/style.css 83 行 `.sections .list { border-top: none }` * * **外余白は 0 のまま、罫線だけページ側で消している。** * * 上下の 14px は、区画 1 の器の高さの差 **+27.26px** の実体である（14 ＋ 14 から、 * 隠れている注記（`.ph > p.aside`）の外余白と畳まれる 0.74px を引いた値）。 * * 🚨 **テーマの共通の規則そのものは誤りではない。**移行元の**パソコン版**の共通 CSS は * `dl { margin: 1em }` を持ち、はじめての方へ（`/visitor/`）ではこの 1em が * 移行元と一致している（`assets/visitor/css/article-reset.css` 90〜93 行に * 「`dl` の外余白を触らないこと」の注意書きがある）。**移行元が同じ部品の値を * パソコン版とスマホ版で変えている型なので、携帯幅とこのページに絞って打ち消す。** * * 🚨 **専任担当伴走サポートは対象外である。**移行元の区画 3 は `.list_area` を使い、 * dev は独自の部品（`div.pa-service-sp-team`）で組み直している。段落と定義リストの * 全数の測りで、専任担当に `dl` は 1 つも無かった。 * * 🚨 **項目（`dd`）には触らない。**下の Issue #3316 の規則が移行元の値 * （`margin: 0 0 25px` / `padding: 0 0 20px` / 金の罫線）へそろえ済みである。 */ body.pa-service-page--point .page-content__body dl.list { margin-top: 0; margin-bottom: 0; } body.pa-service-page--point .page-content__body dl.list dd { margin: 0 0 25px; padding: 0 0 20px; border-bottom: 1px solid #a68146; font-size: 14px; letter-spacing: 0.05em; line-height: 1.8; } /* 最後の項目だけ罫線も余白も持たない（移行元と同じ）. */ body.pa-service-page--point .page-content__body dl.list dd:last-child { margin: 0; padding: 0; border-bottom: none; } /* * ------------------------------------------------------------------ * dev だけに出る「区画の題」の見出しを隠す（Issue #3402・裁定 46 / 67） * ------------------------------------------------------------------ * 移行元スマホ版は、ページの題名のあとに区画の題の見出しを置かない。**dev は * 6 ページとも、題名のすぐ下に同じ文言をもう 1 度出している。**移行元パソコン版 * の本文をそのまま取り込んでいるためである。 * * 実測（2026-09-04 14:34 移行元 / 14:36 dev・幅 375px・裁定 41 / 42）。見え方は * 6 件とも同じで、19px・太さ 700・金 rgb(163,118,43)・左に 4px の金の縦棒である。 * * ページ 要素 文言 高さ * /service/ h3.conseptTitle01.serif コンセプト ＣＯＮＣＥＰＴ 28.5 * /service/flow/ h3.conseptTitle01.serif ご入会後のプロセス 57.0 * /service/multi/ h3.conseptTitle01.serif 専任担当伴走サポート 57.0 * /service/point/ h3.conseptTitle01.serif パーソナル婚活プログラム 85.5 * /service/promise/ h3.conseptTitle01.serif 5つの約束 28.5 * /service/experienced/ h3.sectionTitle01 他社のご利用経験がある方へ 28.5 * * 上下の外余白は 6 件とも 30px / 20px なので、隠すと 78.5〜135.5px 詰まる。 * * **移行元スマホ版は 6 ページとも、この見出しに当たる要素を 1 つも持たない** * （両側の描画の実測 pa-verify-assets/svc-0904-sp/walk/ の全要素を照合し、 * conseptTitle01 も sectionTitle01 も 0 件）。 * * 読み上げ用の題名は失われない。h1.page-content__title（幅 1px の読み上げ専用） * が同じ文言を別に持っている。 * * 🚨 /service/flow/index0706/ は対象から外す。このページは dev にだけ存在し、 * h2.sectionTitle01（高さ 45px）を持つ。移行元は携帯・パソコンどちらの名乗りでも * 404 を返し、転送先も無いので、比べる相手が無い。隠す根拠が無い。 * * 当たり先を h3 に限ってあるので index0706 の h2 には当たらないが、 * **将来この画面へ h3 が増えても巻き込まないよう**、体の類名でも明示的に除く。 * * 🚨 .sectionTitle01 を類名だけで隠さないこと。この類名は会社情報の区画でも * 使われており、あちらは移行元の page_company.css が自分で色を持つ正しい節の題 * である。当たり先の先頭を .pa-page--service に閉じてある。 */ body:not(.pa-service-page--flow-index0706) .pa-page--service .page-content__body h3.conseptTitle01, body:not(.pa-service-page--flow-index0706) .pa-page--service .page-content__body h3.sectionTitle01 { display: none; } /* * ------------------------------------------------------------------ * パーソナル婚活プログラムの 9 バリエーションを、9 枚の札に組み直す（Task #3426） * ------------------------------------------------------------------ * * 移行元のパソコン版は 9 枚の札を 3 行 3 列に詰めた 1 枚の絵（sec03_ph02.png・900x360）で * 出す。dev は本文にその絵を取り込んでいるので、携帯幅では器（画面幅の 87.5%）まで * 縮み、幅 375px では 0.386 倍になって札の文言が読めない。 * * 移行元のスマホ版は同じ場所を「見出し 1 行 + 札 9 枚」に分けて縦に積み、**札の文言を * テキストで持つ**。その組みを `inc/service-sp-variation-list.php` が本文へ足すので、 * ここで見た目を当てる。パソコン幅では上の塊が組みを隠す。 * * 🚨 **値はすべて移行元のスマホ版を実測して作った**（手元から配って幅 320 / 375 / 414 / * 749px の 4 幅で測定）。移行元の CSS に書いてある宣言はそのまま使っていない。 * * 器の上の空き 30px（4 幅とも固定） * 見出し → 札 1 20px（4 幅とも固定） * 札の絵 850 : 242 の比。器の幅いっぱい * 札の下の空き 10px（4 幅とも固定） * 札の文言 13px / 行送り 23.4px / 字間 0.7px / 札の左端から 20px（4 幅とも固定） * * 🚨 **字間 0.7px を `0.05em` と書き直さないこと。**移行元は親（14px）に `0.05em` を * 置いており、`em` の字間は**計算後の長さ**で受け継がれる。13px の札で `0.05em` と * 書くと 0.65px になり、0.05px 狭くなる. */ body.pa-service-page--point .page-content__body .sections.sec03 .ph_l { display: none; } body.pa-service-page--point .page-content__body .pa-service-sp-variation { padding-top: 30px; } /* * 見出し「9 MATCHING VARIATION」。移行元のスマホ版は絵（sec03_cach.png・850x55）だが、 * 中身は文言だけ（墨は金 #a68146 の 1 色）なので、全体原則に従いテキストで組む。 * * 絵の中で墨は横 841px・縦 55px を占める。テーマの既定の書体で組むと * **字の大きさ 70px・字間 0.0225em** のとき墨が 841x55 になり、絵と一致した。 * 器の幅は絵の幅 850px と同じなので、割合へ直すと 87.5vw * 70 / 850 = 7.2059vw. * * 🚨 `letter-spacing` は最後の 1 字の後ろにも空きを足すので、中央寄せの文字は**左へ** * 字間の半分ずれる。`margin-right` に同じ量の負を置いて戻す（A-2 で実証）。 * * 🚨 行の箱の上には、字の大きさの 0.1 倍の空きができる（実測。字の大きさ 70px で 7px）。 * 絵は墨が箱いっぱいなので、そのぶんを負の外余白で戻さないと墨の上端が下がる. * * 🚨 **選択子に `.sections p` を含める。**`main.css` の本文の段落 14px * （`body:is(.pa-service-page--point, .pa-service-page--multi) .page-content__body .sections p`・ * 詳細度 0,3,2）がこの `

` にも当たる。類名だけ（0,3,1）だと負けて 14px になっていた * （Bug #10328・2026-10-13 に dev で当たっている規則を読んだ）。 */ body.pa-service-page--point .page-content__body .sections p.pa-service-sp-variation__caption { margin: -0.7206vw -0.0225em 0 0; padding: 0; color: #a68146; font-size: 7.2059vw; font-weight: normal; letter-spacing: 0.0225em; line-height: 1; text-align: center; white-space: nowrap; } /* * 札の並び。移行元は**絵の下端**から 20px 下に 1 枚目が来る。上のテキストの箱は * 絵の箱より 0.8235vw ぶん下まで伸びる（字の大きさ 7.2059vw − 絵の高さ 5.6618vw − * 上で戻した 0.7206vw）ので、その分を引く. */ body.pa-service-page--point .page-content__body .pa-service-sp-variation__list { margin: calc(20px - 0.8235vw) 0 0; padding: 0; list-style: none; } /* * 札 1 枚。絵は金の角丸の枠と絵記号だけで、文言を持たない（9 枚とも確認済み）。 * 飾りなので背景で出す。高さは絵の比（850 : 242）から作り、下に 10px の空きを足す。 * 242 / 850 * 87.5vw = 24.9059vw. */ body.pa-service-page--point .page-content__body .pa-service-sp-variation__item { position: relative; box-sizing: border-box; margin: 0; padding: 0 0 10px; height: calc(24.9059vw + 10px); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } /* * 札の文言。移行元は絵の上に重ねて、札の高さの 45% の位置へ中心を置く。 * 左は札の左端から 20px（4 幅とも固定）. */ body.pa-service-page--point .page-content__body .pa-service-sp-variation__label { position: absolute; left: 20px; top: 45%; transform: translateY(-45%); color: #000000; font-size: 13px; letter-spacing: 0.7px; line-height: 1.8; } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--01 { background-image: url(../images/variation-point01-sp.png?ver=0e02766765ff); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--02 { background-image: url(../images/variation-point02-sp.png?ver=e99a1ec08b65); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--03 { background-image: url(../images/variation-point03-sp.png?ver=d3833e4c5865); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--04 { background-image: url(../images/variation-point04-sp.png?ver=b356d29b43d5); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--05 { background-image: url(../images/variation-point05-sp.png?ver=d629c6cc2962); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--06 { background-image: url(../images/variation-point06-sp.png?ver=4d604acad354); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--07 { background-image: url(../images/variation-point07-sp.png?ver=d462bb279fc2); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--08 { background-image: url(../images/variation-point08-sp.png?ver=69e80769804b); } body.pa-service-page--point .page-content__body .pa-service-sp-variation__item--09 { background-image: url(../images/variation-point09-sp.png?ver=a87e853e5259); } /* * ================================================================== * 他社のご利用経験がある方へ（/service/experienced/）を移行元スマホ版に * そろえる、CSS だけで直る 7 件（Issue #3401・裁定 41 / 42） * ================================================================== * 実測は移行元 = 本番を 2026-09-04 14:34 JST に携帯の名乗りで取得、 * dev = 同日 14:36 JST、幅 375px。写し元は * `legacy/www.p-a.jp/public/sp/service/experienced/css/style.css` * （記録版 19f499fe）。 * * dev の本文は移行元パソコン版をそのまま投入しているため、移行元スマホ版 * だけが持つ並び順・飾り・字の大きさが 7 件だけ欠けている。当たり先は * すべて `body.pa-service-page--experienced` で閉じ、このページの中に * 収める。 */ /* * ------------------------------------------------------------------ * (1) 特徴 2 件（#experienced03 の `.box` ×2）の並びを、 * 写真 → 見出し → 本文 の順にする * ------------------------------------------------------------------ * dev の組みは `h5.serif → p（本文）→ p（img photo02/03.jpg）` の順で、 * 写真がいちばん後ろに来る。`.box` を縦の flex にして、img を持つ `p` だけ * `order: -1` で先頭へ回す。`h5` と本文の `p` は既定の `order: 0` の * ままなので、両者の相対の順は変わらない。 * * 🚨 **`.box` は `/service/experienced/` 以外にも出る類名である。** * `#experienced03` まで絞って、他のページ・他の節へ波及しないようにする。 */ body.pa-service-page--experienced .page-content__body #experienced03 .box { display: flex; flex-direction: column; } body.pa-service-page--experienced .page-content__body #experienced03 .box p:has(img) { order: -1; } /* * ------------------------------------------------------------------ * (2) 2 つ目の図（`.experienced_box2`）の並びを、 * 写真 → 注釈 → 本文 の順にする * ------------------------------------------------------------------ * dev の組みは `p.subcopy → div.clearfix（p.photo と div.text）→ p.figure` * の順で、注釈（`p.figure`）がいちばん後ろに来る。移行元は * 図 → 注釈 → 本文の順である。 * * `div.clearfix` に `display: contents` を当てて、中の `p.photo` と * `div.text` を `.experienced_box2` の直接の flex 項目として扱わせ、 * `order` で並べ直す（`p.subcopy` は既定の `order: 0` のまま先頭）。 * * 🚨 **`div.clearfix` は余白も地色も持たない**ことを実測で確かめてから * `display: contents` を選んだ（付いていたら箱ごと消えて崩れる）。 * * 🚨 **`.clearfix::after` は、この画面のこの幅では現在は何も描かない。** * `bridge.css` の `.pa-page--service .page-content__body .clearfix::after` * （このファイルの `@media (min-width: 750px)` の節）はパソコン幅専用で、 * 携帯幅にはこの擬似要素へ `content` を与える規則が 1 本も無い * （実測: `getComputedStyle(要素, '::after').content` が `none`）。 * それでも `display: contents` は擬似要素そのものを消さないため、将来 * 携帯幅にも清算の規則が増えたときに 1 枠を占めて並びを崩す事故を防ぐ * 保険として、この器の中だけ明示的に隠しておく。 */ body.pa-service-page--experienced .page-content__body .experienced_box2 { display: flex; flex-direction: column; } body.pa-service-page--experienced .page-content__body .experienced_box2 > .clearfix { display: contents; } body.pa-service-page--experienced .page-content__body .experienced_box2 > .clearfix p.photo { order: 1; } body.pa-service-page--experienced .page-content__body .experienced_box2 > p.figure { order: 2; } body.pa-service-page--experienced .page-content__body .experienced_box2 > .clearfix .text { order: 3; } body.pa-service-page--experienced .page-content__body .experienced_box2 .clearfix::after { display: none; } /* * ------------------------------------------------------------------ * (3) 特徴 2 件の見出し（`#experienced03 .box h5`）の大きさと色 * ------------------------------------------------------------------ * 移行元の当たり先は `#anchor03 h4 { font-size:20px; font-weight:500; * color:#a3762b; margin:0 0 2% }`。**行送りは指定が無いので触らない。** * テーマの見出しの既定（`h1〜h6 { line-height: var(--pa-line-height-heading) }` * = 1.5）がそのまま効き、20px × 1.5 = 30px で 2 行ぶん 60px になる * （実測で確認・dev の今の 45px は 15px × 1.5 の 2 行ぶんだった）。 */ body.pa-service-page--experienced .page-content__body #experienced03 .box h5 { margin: 0 0 2%; font-size: 20px; font-weight: 500; color: rgb(163, 118, 43); /* * 🚨 **字送りを既定へ戻す**（Bug #3625）。移行元の当たり先 * `#anchor03 h4` は字送りを書いていない。テーマの 1px がそのまま残り、 * **差は「字数 × 1px」とちょうど一致した**（2 か所で +19.00 / +26.00px）。 */ letter-spacing: normal; } /* * ------------------------------------------------------------------ * (4) 「成婚実績の高さには理由があります。」の飾り枠（`.reason dl`） * ------------------------------------------------------------------ * 移行元は `#anchor02 dl dd` に地色と内余白を敷いている * （`background: url(bg_reason.gif) repeat 0 0; padding: 4% 5% 2%`）。 * **dev は入れ子が違い**、移行元の「地色を敷いた箱」に当たるのは * dev の `dl` そのものである（`dt` が見出し・`dd` が本文で、`dl` の外側に * 箱が無い）。 * * dev の `dl` はテーマの既定（`.page-content__body dl { margin: 1em }`）で * 左右に余白が付き、幅が器より狭くなっている（実測 x=38.44・幅=298.13）。 * `margin: 0` で戻し、`width: 100%` で器いっぱいにする * （`box-sizing: border-box` が全体に効いているので、内余白を足しても * 幅は 328.13px のまま伸びない）。 * * `dt` はテーマの既定（`.page-content__body dt { font-weight: bold }`）で * 太さ 700 になっているので、移行元と同じ 500 へ戻す。 * * 絵は `assets/service/images/bg_reason.gif`（移行元のパソコン版と * スマホ版で中身が同じことを md5 で確認済み）。相対パスは `bridge.css` から * 見て `../images/bg_reason.gif`。 * * 実測（幅 375px）: 内余白 上13.125px / 左右16.4062px / 下6.5625px、 * `dt` の下の外余白 2.95312px。legacy と同じ書き方（`%`）のまま写せば * 基準の幅が変わらないので一致する。 */ body.pa-service-page--experienced .page-content__body .reason dl { margin: 0; width: 100%; padding: 4% 5% 2%; background: url(../images/bg_reason.gif?ver=b9dd20574329) repeat 0 0; } body.pa-service-page--experienced .page-content__body .reason dl dt { margin: 0 0 1%; font-size: 20px; font-weight: 500; } /* * ------------------------------------------------------------------ * (5) 箇条書き（`.experienced_box1 ul.serif li`）の目印 * ------------------------------------------------------------------ * 移行元 `#anchor02 ul.list li { background: url(icon_dot.gif) no-repeat * 0px 43% / 2% auto; padding-left: 4% }` をそのまま写す。 * * 🚨 **`icon_dot.gif` はこの直しで新しくテーマへ足した**（移行元 * `sp/service/experienced/images/icon_dot.gif`・12×12 の赤い四角・文言は * 焼き込まれていない）。置き場所は `assets/service/images/icon_dot.gif`。 */ body.pa-service-page--experienced .page-content__body .experienced_box1 ul.serif li { background: url(../images/icon_dot.gif?ver=5bbf670f69a3) no-repeat 0px 43% / 2% auto; padding-left: 4%; } /* * ------------------------------------------------------------------ * (6) 注釈 2 件（`.experienced_box2 p.figure` と `#experienced01 .text * p.s`）の大きさと色 * ------------------------------------------------------------------ * 移行元は `.figure { font-size:0.8em; ... }` と `#anchor01 p.s { * font-size:0.83em; ... }` で、基準になる本文の字（13px）に対する割合で * 書いてある。**その 15px → 13px 化はこの直しの範囲外**（7 ページ共通の * 原因で 3 班が持つ）なので、`em` のまま写すと今はまだ 15px 基準で計算 * されて値が変わってしまう。あらかじめ計算した px（13px 基準）で直書き * する。 * * 🚨 **行送りは実測で固定 px にしてある。**移行元の宣言には行送りが無く、 * 受け継ぐ先にも 1 本も無い（`sp/css/basic.css` の初期化・`sp/css/common.css` * の `body`・このページの `css/style.css` のどこにも `line-height` が無い）。 * つまり移行元の行送りは `normal` で、**書体の metrics が決める値**である。 * 割合で写すと書体が違えば別の値になるので、実測した px をそのまま書く。 * そのままテーマの既定（`p` は `--pa-line-height-text` = 1.8）を受け継ぐと、 * 注釈は 45px ではなく 56px（10.4px×1.8×3 行）・15px ではなく 19.4px * （10.79px×1.8×1 行）になり、移行元の実測（45px・15px）に届かない。 * **実機で幅 375px を確かめると、両方とも `line-height: 15px` の固定値で * ちょうど一致する**（3 行×15px=45px・1 行×15px=15px）。 * * 字下げの `1em` / `-1em` は「その要素自身の字」が基準なので、`em` の * ままでよい（裁定の対象外）。 */ body.pa-service-page--experienced .page-content__body .experienced_box2 p.figure { font-size: 10.4px; line-height: 15px; color: rgb(163, 118, 43); text-indent: -1em; padding-left: 1em; } /* * 🚨 **注記の書体を明朝から本文の書体へ戻す**（Bug #3625）。 * * **移行元はパソコン版とスマホ版で類名が違う。**パソコン版は `

`、 * **スマホ版は `

`** で `serif` を持たない（記録版 `1fbfa9dda` の * `public/service/experienced/index.html` 80 行 対 * `public/sp/service/experienced/index.html` 79 行）。dev はパソコン版の本文を * 取り込むので、携帯幅にも明朝が残っていた。 * * 実測（幅 375px）: 字の大きさ・字送り・行の高さは両側とも一致していたが、 * **文字の並びだけが 173.78 対 167.25px（−6.53px）**だった。 * * 🚨 **本文の中の類名は変えない。**投入した本文に手を入れず、携帯幅の CSS で * 書体だけを戻す。パソコン幅は移行元パソコン版と一致しているので触らない。 */ body.pa-service-page--experienced .page-content__body #experienced01 .text p.s { font-size: 10.79px; line-height: 15px; text-indent: -1em; padding-left: 1em; font-family: var(--pa-font-family-base); } /* * 本文の残り 4 か所も、携帯幅ではゴシックへ戻す（Bug #5081）。 * * 上の注記と同じ原因である。**移行元はパソコン版だけが明朝の目印（`class="serif"`）を * 書き、スマホ版は書かない。**dev はパソコン版の本文を取り込むので明朝が残る。 * * 写しで全数を突き合わせた結果（`service/experienced/index.html` 対 * `sp/service/experienced/index.html`）: * * 成婚実績の説明（`#experienced01` の `.text`） `p.serif` 対 `p` * 注記「※2022年10月〜2023年3月の実績。」（同上） `p.s.serif` 対 `p.s`（上で解決済み） * 婚活設計の説明（`#experienced02` の box1 の `.text`） `p.serif` 対 `p` * 婚活設計の 3 項目の箇条書き（同上） `ul.serif` 対 `ul.list` * 伴走の説明（`#experienced02` の box2 の `.text`） `p.serif` 対 `p` * * 🚨 **見出しは両版とも明朝である。**移行元スマホ版の決まりは「見出しだけ明朝・ * 本文はゴシック」なので、`p.main_copy.serif` / `h3.title.serif` / `h4.serif` / * `h5.serif` は触らない。当たり先を **`.text` の中の `p` と `ul` だけ**に絞ることで * 見分けている。`p.main_copy.serif` は `.text` の外（`#experienced` の直下）にある. * * 🚨 **本文の中の類名は変えない。**投入した本文に手を入れず、携帯幅の CSS で書体 * だけを戻す。パソコン幅は移行元パソコン版と一致しているので触らない. */ body.pa-service-page--experienced .page-content__body :is( #experienced01, #experienced02 ) .text :is( p, ul ).serif { font-family: var(--pa-font-family-base); } /* * ------------------------------------------------------------------ * (14) 本文の段落の強制改行を、携帯幅でだけ効かなくする（Bug #4164） * ------------------------------------------------------------------ * 移行元は**パソコン版だけ**が本文の段落に `
` を持ち、**スマホ版は 1 つも * 持たない**（器の幅で自然に折り返す）。dev はパソコン版の本文を取り込んで * いるので、その `
` がそのまま効いている。 * * 記録版を数えた結果（`legacy/www.p-a.jp/public/`）: * * パソコン版 `service/experienced/index.html` `
` 9 つ * スマホ版 `sp/service/experienced/index.html` `
` 6 つ * * **減った 5 つは、本文の段落 3 つに入っていたものである。** * * `#anchor01` の `p.serif`（ご成婚退会される会員様の数は〜） 1 つ * `.experienced_box1` の `.text > p.serif`（実績データに基づく〜） 2 つ * `.experienced_box2` の `.text > p.serif`（コンシェルジュの伴走〜）2 つ * * 🚨 **移行元スマホ版が残している 6 つを消してはいけない。**導入文 * （`p.main_copy` の 2 つ）・節の題（`h3.title` の 1 つ）・飾り枠の本文 * （`dd` の 1 つ）・特徴の見出し（`h4` の 2 つ）である。当たり先を * **節の中の `div.text` の直下の段落**に絞れば、この 6 つには当たらない。 * * 実測（幅 375px。移行元は記録版を手元で描画、dev は CloudFront）: * * | 段落 | 移行元 | 直す前 | 直したあと | * |---|---:|---:|---:| * | ご成婚退会される会員様の数は〜 | 100.00 | 100.00 | 100.00 | * | 実績データに基づく明確な婚活設計〜 | 60.00 | 60.00 | 60.00 | * | コンシェルジュの伴走と主体的に〜 | 40.00 | **60.00** | **40.00** | * * **見た目に出ているのは 3 つ目だけである。**1 つ目と 2 つ目の `
` は、 * ちょうど自然に折り返す位置にあるので高さが変わらない。**それでも 3 つとも * 消すのが移行元と同じ姿である**（`/service/point/` の Bug #3882 と同じ考え方）。 * * 直したあとに効いている `
` を数えると、移行元 6 つ・dev 5 つになる。 * 差の 1 つは節の題で、dev は `
` ではなく `span.pa-service-experienced-title__line` * で行を分けているためである（同じ 2 行で出る）。 */ body.pa-service-page--experienced .page-content__body :is(#experienced01, #experienced02, #experienced03) .text > p br { display: none; } /* * ------------------------------------------------------------------ * (7) 導入文（`p.main_copy.serif`）の字と余白 * ------------------------------------------------------------------ * 移行元の当たり先は `.main_copy { margin-bottom:40px; font-size:16px; * line-height:130%; text-align:center }`。**寄せは触らない。**すでに * `body.pa-service-page .page-content__body .main_copy { text-align: * center }`（このファイルの上のほう）が全ページへ当てている。 * * 🚨 **行数はこの規則では合わせていない。**移行元スマホ版は改行を 2 つ持ち * 3 行になるが、dev の本文は移行元パソコン版から取り込んでいるので改行が * 1 つしか無い（2 行になる）。**足りない 1 つは Task #3437 が本文の側で足す** * （`inc/service-experienced-sp.php` が `br.pa-service-experienced-break` を * 差し込み、パソコン幅ではこのファイルの `@media (min-width: 750px)` の節が * `display: none` で消す）。 */ body.pa-service-page--experienced .page-content__body .main_copy { margin-bottom: 40px; font-size: 16px; line-height: 130%; } /* * ------------------------------------------------------------------ * チームサポートの区画を、時期ごとの 3 つの塊に組み直す（Task #3429） * ------------------------------------------------------------------ * * 移行元のパソコン版はチーム図を 1 枚の絵（sec03_ph.jpg・901x624）にまとめて出す。 * dev は本文にその絵を取り込んでいるので、携帯幅では器（画面幅の 87.5%）まで縮み、 * 幅 375px では 0.36 倍になって役割の名前も説明も読めない。 * * 移行元のスマホ版は同じ場所を「時期の文字 + 写真 + 役割の一覧」の 3 つの塊に分けて * 縦に積む。その組みを `inc/service-sp-team-support.php` が本文へ足すので、 * ここで見た目を当てる。パソコン幅では上の塊が組みを隠す。 * * 🚨 **値はすべて移行元のスマホ版を実測して作った**（手元から配って幅 320 / 375 / 414 / * 749px の 4 幅で測定）。移行元の CSS に書いてある宣言はそのまま使っていない。 * * 塊と塊の間 40px + 40px（4 幅とも固定・最後の塊は 0） * 写真 → 一覧 20px + 20px（4 幅とも固定） * 役割 1 件の下 10px、絵記号の下 20px、名前の下 10px（4 幅とも固定） * 絵記号の列 18%、文章の列 82%（内側へ 10px） * 説明 13px / 行送り 23.4px / 字間 0.7px（4 幅とも固定） * * 🚨 **字間 0.7px を `0.05em` と書き直さないこと。**移行元は親（14px）に `0.05em` を * 置いており、`em` の字間は**計算後の長さ**で受け継がれる。13px の説明で `0.05em` と * 書くと 0.65px になり、0.05px 狭くなる. * * 🚨 **`--pa-team-col` は「役割の文章の列の内側の幅」である。**移行元は名前を * 幅 684px の絵で持ち、その絵を列いっぱいに伸ばす。テキストで組み直すときの * 字の大きさは、この列の幅に比例させないと 4 幅で合わない. */ body.pa-service-page--multi .page-content__body .sections.sec03 .ph_l { display: none; } body.pa-service-page--multi .page-content__body .pa-service-sp-team { /* 器の幅 87.5vw の 82% から、内側の 10px を引いた幅。移行元の絵の 684px に当たる. */ --pa-team-col: calc(71.75vw - 10px); } /* * 塊の区切りの金の点線。移行元は `.sections .txt_inner` の背景で敷いており、 * 最後の塊だけ持たない（`:last-child`）. * * 🚨 **`txt_inner` の類名は使わない。**dev の本文は 1 つ目と 2 つ目の節に同じ類名の * 器を 4 つ持っており、金の点線の共通の直しがそこを狙う。同じ類名で足すと、 * 片方の直しがもう片方へ漏れる. */ body.pa-service-page--multi .page-content__body .pa-service-sp-team__group { margin: 0 0 40px; padding: 0 0 40px; background-image: url(../../sp/service/multi/images/team-rule-sp.png?ver=e62ec0d62290); background-repeat: no-repeat; background-position: 50% 100%; background-size: contain; } body.pa-service-page--multi .page-content__body .pa-service-sp-team__group:last-child { margin: 0; padding: 0; background-image: none; } /* * 時期の文字（入会前 / 活動中 / 成婚後）。移行元のスマホ版は写真 sec03_phNN.jpg * （850x972）の上端に焼き込んでいるが、中身は文言だけ（墨は金 #a68146 の 1 色）なので、 * 全体原則に従いテキストで組む。写真は上端 128px を落とした 850x844 を使う。 * * 絵の中で墨は縦 43px・横 154px を占める。テーマの明朝で組むと * **字の大きさ 45.714px・字間 0.2241em** のとき墨が一致した（3 枚とも幅・高さの差 1px 以内）。 * 器の幅は絵の幅 850px と同じなので、割合へ直すと 87.5vw * 45.714 / 850 = 4.70557vw. * * 🚨 **字間の打ち消し（`margin-right` の負）は入れない。**移行元の絵も中央寄せの * まま末尾の字間ぶん左へ寄っている（墨の中心 418.5・絵の中心 425）。打ち消すと * 移行元より 5px ぶん右へずれる. * * 器の高さ 128 / 850 = 15.0588% は、絵の上端から写真の円が始まるまでの高さである. * * 🚨 **選択子に `.sections p` を含める。**`main.css` の本文の段落 14px（`.sections p`・ * 詳細度 0,3,2）がこの `

` にも当たり、類名だけ（0,3,1）だと負けて 14px になっていた * （Bug #10328）。見出し「9 MATCHING VARIATION」と同じ直し方である. */ body.pa-service-page--multi .page-content__body .sections p.pa-service-sp-team__stage { margin: 0; padding: 0; height: 13.17647vw; color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.70557vw; font-weight: normal; letter-spacing: 0.2241em; line-height: 1; text-align: center; } /* * 写真。移行元の 850x972 から上端 128px を落とした 850x844 なので、 * 高さは 844 / 850 * 87.5vw = 86.88235vw. * * 🚨 **下の 20px は外余白でなく内余白で持つ。**下に続く一覧も上に 20px を持つので、 * 外余白どうしだと**重なって 40px が 20px になる**（手元の計測で見つけた。移行元は * `.ph` の内余白 20px + `.list_area` の内余白 20px で 40px である）. */ body.pa-service-page--multi .page-content__body .pa-service-sp-team__photo { box-sizing: content-box; display: block; margin: 0; padding: 0 0 20px; height: 86.88235vw; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } body.pa-service-page--multi .page-content__body .pa-service-sp-team__photo--01 { background-image: url(../../sp/service/multi/images/team-stage01-sp.jpg?ver=2aed4f20844e); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__photo--02 { background-image: url(../../sp/service/multi/images/team-stage02-sp.jpg?ver=a9fc82da5382); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__photo--03 { background-image: url(../../sp/service/multi/images/team-stage03-sp.jpg?ver=96f48e8e89c2); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__list { margin: 20px 0 0; padding: 0; list-style: none; } body.pa-service-page--multi .page-content__body .pa-service-sp-team__item { display: flex; justify-content: space-between; margin: 0; padding: 0 0 10px; } /* * 絵記号。移行元の sec03_icoNN.png をそのまま写した（文字を持たない飾りである）。 * どれも幅 140px で高さだけが違うので、縦横の比は札ごとに持つ. */ body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon { align-self: flex-start; width: 18%; margin: 0 0 20px; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--00 { aspect-ratio: 140 / 118; background-image: url(../../sp/service/multi/images/team-role00-sp.png?ver=003a594bd271); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--01 { aspect-ratio: 140 / 150; background-image: url(../../sp/service/multi/images/team-role01-sp.png?ver=4e1ff56670d7); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--02 { aspect-ratio: 140 / 120; background-image: url(../../sp/service/multi/images/team-role02-sp.png?ver=3075f8546108); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--03 { aspect-ratio: 140 / 124; background-image: url(../../sp/service/multi/images/team-role03-sp.png?ver=ccf97be7ba10); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--04 { aspect-ratio: 140 / 112; background-image: url(../../sp/service/multi/images/team-role04-sp.png?ver=386f5e6d0b4c); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--05 { aspect-ratio: 140 / 125; background-image: url(../../sp/service/multi/images/team-role05-sp.png?ver=9caa3642091d); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__icon--06 { aspect-ratio: 140 / 150; background-image: url(../../sp/service/multi/images/team-role06-sp.png?ver=5864bef2b215); } body.pa-service-page--multi .page-content__body .pa-service-sp-team__text { box-sizing: border-box; width: 82%; padding-left: 10px; } /* * 役割の名前。移行元のスマホ版は幅 684px の文字だけの絵（sec03_icoNN_txt.png）で * 持つ。全体原則に従い、**絵は写さずテキストで組む。** * * 墨の高さから字の大きさを、墨の幅から字間を、2 段で最小二乗で求めた * （**字の大きさ 44.619px・字間 0.2621em**。7 件とも幅の差 3px 以内・高さの差 1px 以内。 * 「コンタクト」だけ -5px）。絵は列いっぱいに伸びるので、割合は列の幅で持つ。 * 字の大きさ = 列の幅 * 44.619 / 684 = 列の幅 * 0.0652325 * * 🚨 **器の高さは絵ごとに違う。**移行元は絵の下端に墨を寄せて書き出しており、 * 上の余白で高さを調整している（58 / 50 / 60 / 110px）。器の高さが変わると * 下の説明の位置も変わるので、絵の canvas と 1 対 1 で写す。`padding-top` で * 墨を下端へ寄せると、墨の下端が器の下端から 2.3px（移行元は 1〜4px）に来る. * * 🚨 **折り返させない。**移行元は絵なので折り返らない。書体が入れ替わった端末で * 折り返すと器の高さから外れる. */ body.pa-service-page--multi .page-content__body .pa-service-sp-team__name { box-sizing: border-box; display: block; margin: 0 0 10px; color: #a68146; font-family: var(--pa-font-family-serif); font-size: calc(var(--pa-team-col) * 0.0652325); font-weight: normal; letter-spacing: 0.2621em; line-height: 1; white-space: nowrap; } /* 移行元の絵の canvas が 58px の 2 件（58 - 44.619 = 13.381 を上へ入れる）. */ body.pa-service-page--multi .page-content__body :is(.pa-service-sp-team__name--00, .pa-service-sp-team__name--01) { height: calc(var(--pa-team-col) * 0.0847953); padding-top: calc(var(--pa-team-col) * 0.0195629); } /* 移行元の絵の canvas が 50px の 2 件. */ body.pa-service-page--multi .page-content__body :is(.pa-service-sp-team__name--02, .pa-service-sp-team__name--04) { height: calc(var(--pa-team-col) * 0.0730994); padding-top: calc(var(--pa-team-col) * 0.0078669); } /* 移行元の絵の canvas が 60px の 2 件. */ body.pa-service-page--multi .page-content__body :is(.pa-service-sp-team__name--05, .pa-service-sp-team__name--06) { height: calc(var(--pa-team-col) * 0.0877193); padding-top: calc(var(--pa-team-col) * 0.0224868); } /* * 🚨 **2 行の 1 件だけ組み方が違う。**移行元の絵（110px）は行の送りを 65px で組み、 * 1 行目の墨を canvas の上端（y=1）から始めている。行の送りを合わせると器が 130px に * なるので、上へ 13.5px 引いて 1 行目の墨を y=1 に置き、器の高さを 123.5px にして * 下端を移行元の 110px にそろえる（1 行目の墨 y 1..37・2 行目 y 66..109。 * 移行元は 1..36 と 66..108）. */ body.pa-service-page--multi .page-content__body .pa-service-sp-team__name--03 { margin-top: calc(var(--pa-team-col) * -0.0197368); height: calc(var(--pa-team-col) * 0.1805556); padding-top: 0; line-height: 1.4568; } body.pa-service-page--multi .page-content__body .pa-service-sp-team__desc { display: block; margin: 0; padding: 0 0 10px; color: #000000; font-size: 13px; letter-spacing: 0.7px; line-height: 1.8; } /* * ================================================================== * 他社のご利用経験がある方へ（/service/experienced/）へ、本文の組みが要る * 3 件を足す（Issue #3437 の B1〜B3・裁定 79） * ================================================================== * 本文の組みは `inc/service-experienced-sp.php` が足す。ここはその見た目である。 * 実測は移行元 = 本番を 2026-09-04 14:34 JST に携帯の名乗りで取得、dev = 同日 * 14:36 JST、幅 375px。絵の寸法は記録版 19f499fe の * `public/sp/service/experienced/images/` を画素で測った（2026-09-04 18:2x）。 * * 🚨 **絵から取った寸法は、割合（`%` と `vw`）で書く。**移行元スマホ版はこの 3 件を * 幅の割合で組んでおり（器は画面幅の 87.5%・絵は器の幅いっぱい）、画面幅が変われば * 一緒に伸縮する。固定 px で書くと 375px 以外の幅で移行元とずれる（PR #3283 と同じ * 直しをあとから入れることになる）。 * * **1 生画素 = 0.15625vw である**（絵は 560 画素幅を器の 87.5vw いっぱいに描くので * 倍率は 0.5859375。375px なら 1 画素 = 0.5859px）。下の `vw` はこの換算で出した。 */ /* * ------------------------------------------------------------------ * (B1) 節の題 3 か所を、移行元スマホ版と同じ文字にする * ------------------------------------------------------------------ * 移行元スマホ版の当たり先は `h3.title { padding:15px 0; margin:0 0 18px; * color:#a3762b; font-size:20px; line-height:100%; border-bottom:2px solid #A3762B }` * である（`sp/service/experienced/css/style.css`）。**そのまま写す。** * * 高さの検算: 2 行 = 15 + 20×2 + 15 + 2 = 72px ／ 1 行 = 15 + 20 + 15 + 2 = 52px。 * Issue #3437 が測った移行元の高さ（72 / 52）と合う。 * * 🚨 **ここは固定 px のままにする。**移行元スマホ版のこの宣言だけは px で書かれて * おり（上の目次や絵と違って割合ではない）、画面幅を変えても大きさが動かない。 * * 🚨 **`clear: both` は写さない。**移行元は箱を `float` で並べるので要るが、dev の * この画面に `float` は 1 つも無い（並びは `flex` で組んである）。 * * 🚨 **画像は消さずに隠す。**パソコン幅ではその画像が節の題そのものである。 * 当たり先はテキストを持つ `h4` に限ってあるので、この画面の他の `h4`（将来 * 増えたもの）や他のページの `h4` の画像は隠れない。 */ body.pa-service-page--experienced .page-content__body h4:has(> .pa-service-experienced-title) > img, body.pa-service-page--experienced .page-content__body h4:has(> .pa-service-experienced-title) > picture { display: none; } body.pa-service-page--experienced .page-content__body h4:has(> .pa-service-experienced-title) { margin: 0 0 18px; padding: 0; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-title { display: block; margin: 0; padding: 15px 0; border-bottom: 2px solid rgb(163, 118, 43); color: rgb(163, 118, 43); font-family: var(--pa-font-family-serif); font-size: 20px; font-weight: 400; /* * 🚨 **字送りを既定へ戻す**（Bug #3625）。移行元スマホ版は `h3.title serif` に * 字送りを書いていないが、テーマは本文の見出しへ 0.85px を当てている * （`assets/css/main.css` の 17009〜17033 行）。**差は「字数 × 字間」と * ちょうど一致した**（3 か所で +13.61 / +8.50 / +11.91px）。 */ letter-spacing: normal; line-height: 100%; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-title__line { display: block; } /* * ------------------------------------------------------------------ * (B2) ページ内の目次 3 本を、移行元スマホ版と同じ姿で組む * ------------------------------------------------------------------ * 移行元スマホ版は 3 本とも**文言を焼き込んだ絵**（`anchor_menu01.gif` 560x122 と * `anchor_menu02` `anchor_menu03.gif` 274x123）で組む。全体原則に沿ってテキストで * 組み直す。**地色・赤い帯・矢印のどれも絵を必要としない。** * * 絵を画素で測った値（倍率 0.5859375 をかけた表示 px と、器に対する割合）: * * 部分 1 本目 2・3 本目 表示 px * 外形 560x122 274x123 328.13x71.48 / 160.55x72.07 * 黒い箱 行 0..119（120 行） 行 0..119（120 行） 70.31 * 赤い帯 行 116..121・x 0..109 行 117..122・x 0..109 3.52 高 / 64.45 幅 * 矢印 28x15・右から 16 画素 28x15・右から 16〜17 16.41x8.79 / 右 9.38 * 文字の行 1 行 2 行 / 3 行 送り 33〜34 画素 * * 🚨 **赤い帯は「外形の下端に接する」と書けば 3 本とも合う。**Issue #3437 は * 「黒い箱より 1.2px 下へはみ出す」と書くが、実測は 1 本目が 2 行（1.17px）・ * 2・3 本目が 3 行（1.76px）で違う。**下端で合わせれば、この差は外形と黒い箱の * 高さの違いから自動で出る。** * * 🚨 **字の大きさは 15.5px（4.1333vw）にそろえた。**絵から決められるのは * 「15.5px 前後」までである。**1 本目は 16 文字の ink 幅 246.09px が 15.5px×16 文字と * 端の余白でぴったり合う**ので、これを採った（16 文字あるので絵の中でいちばん * 精度が高い）。2・3 本目は絵ごと・行ごとに 24.7〜29.0 画素（14.5〜17.0px）と * ばらつくため、絵から 1 つの値を決められない。3 本とも同じ字にした。 * * 🚨 **矢印の右余白は 9.375px（2.5vw = 16 生画素）にそろえた。**3 枚のうち 2 枚が * 16 画素で、`anchor_menu02.gif` だけ 17 画素（9.96px）だった。0.6px の差である。 * * 縦の位置は「文字の塊を黒い箱（70.31px）の中央へ置く」で 3 枚とも 1px 以内に合う * （検算: 1 行 → ink 上端 46.7 対 実測 47 ／ 2 行 → 30.2 対 30 ／ 3 行 → 13.6 対 14）。 * * 外形の高さは `aspect-ratio` で絵の縦横比そのものを書く。**器の幅に連動するので、 * 縦のスクロールバーの幅で `vw` がずれる環境でも移行元と同じ比になる。** */ body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors { margin: 0 0 16px; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__link { position: relative; display: block; width: 100%; aspect-ratio: 274 / 123; text-decoration: none; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__link--wide { margin: 0 0 10px; aspect-ratio: 560 / 122; } /* 赤い帯。左下に置き、外形の下端に接する（幅 110 / 高さ 6 生画素）. */ body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40.146%; height: 4.878%; background-color: rgb(225, 32, 15); } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__link--wide::after { width: 19.6429%; height: 4.918%; } /* * 2 本目と 3 本目を横に 2 つ並べる。幅は移行元スマホ版の `.anchor_menu li` * （`width: 48.928%`）をそのまま写す。**間の空きは差の 7.02px になる** * （328.13 − 160.55×2）。移行元は `float: left` と `float: right` で同じ空きを * 作っているので、`space-between` で写す. */ body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__pair { display: flex; justify-content: space-between; margin: 0; padding: 0; width: 100%; list-style: none; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__item { margin: 0; padding: 0; width: 48.928%; background: none; list-style: none; } /* * 黒い箱。外形の上端から、外形より 2（1 本目）または 3（2・3 本目）生画素だけ * 短く敷く。内余白は左 0.4vw（1.5px）・右 2.5vw（9.375px）で、これが文字の左端と * 矢印の右端の位置になる. */ body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__box { position: absolute; inset: 0 0 2.439% 0; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5vw 0 0.4vw; background-color: #000; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__link--wide .pa-service-experienced-anchors__box { inset: 0 0 1.6393% 0; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__text { color: #fff; font-family: var(--pa-font-family-serif); font-size: 4.1333vw; line-height: 5.1733vw; } body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__line { display: block; } /* * 下向きの矢印。絵の中では**線で描いた ∨ 形**（28x15 生画素・線の太さ 2 生画素）で、 * 中央がいちばん下がる。`clip-path` で同じ形を切り出す。 * * 割合で書いた頂点: 外側は左上（0 0）→ 中央下（50% 100%）→ 右上（100% 0）、 * 内側は右（92.86% = 1 − 2/28）→ 中央（86.67% = 13/15）→ 左（7.14% = 2/28）。 * **生画素の比そのものなので、大きさを変えても線の太さの比が崩れない。** * * 🚨 **`transform: rotate()` で作った山形は使わない。**回した要素の外接矩形は * 要素ぜんたい（18.1x18.1px）になり、**見えている形（16.41x8.79px）と一致しない。** * 実寸を測る検収で毎回ずれた値が出る。 */ body.pa-service-page--experienced .page-content__body .pa-service-experienced-anchors__arrow { flex: 0 0 auto; width: 4.375vw; height: 2.34375vw; background-color: #fff; clip-path: polygon(0 0, 50% 100%, 100% 0, 92.86% 0, 50% 86.67%, 7.14% 0); } /* * ------------------------------------------------------------------ * (B3) 導入文を 3 行にする * ------------------------------------------------------------------ * 携帯幅では素の `
` として働かせるので、ここには何も書かない。パソコン幅で * 消すのは、このファイルの `@media (min-width: 750px)` の節である。 * * ------------------------------------------------------------------ * (B4) 図 3 点の見出しの文言を、絵の差し替え後も文字のまま残す * ------------------------------------------------------------------ * 絵の差し替えは `inc/sp-image-swap.php` の表が持つ（文言の帯を切り落とした写しへ * 差し替える）。**文言は `p.subcopy` のテキストのまま残す**（裁定 79）。 * * ここで直すのは 2 つだけである。 * * 1. **中央寄せにする。**移行元スマホ版は文言を絵の中で中央へ置く（絵を画素で * 測った。`img02.png` の文言の中心 277 / `img03.png` は 279 に対し、絵の中心は * 279.5）。dev は左寄せである * 2. **下の外余白を 0 にする。**移行元は文言のすぐ下（1 生画素）から飾りの括弧が * 始まる。飾りは切り取った絵の上端に残してあるので、文言と絵の間に 18px の * 余白があると 1 つの塊に見えない * * 🚨 **`img01.png` だけ、文言と飾りが絵の中心から右へ 14.5〜15.5 生画素ずれている。** * 移行元の絵がそうなっている。飾りは絵に残してあるのでずれもそのまま残るが、 * **`p.subcopy` の文言は中央へ置く**（絵のずれを文字で真似ると、3 件のうち 1 件だけ * 中央からずらすことになり、読み手には崩れとして見える）。 * * 3. **字を焼き文字と同じ大きさにする**（Bug #4998）。字の大きさを決める * `assets/service/css/experienced.css` の `p.subcopy { font-size: 22px }` は * **`@media (min-width: 750px)` の中**にあり、携帯幅へ届かない。携帯幅では本文の * 基準の 13px が出ており、**移行元の焼き文字より約 1.34 倍小さかった** * * 🚨 **字の大きさは「字送り」で決める。「墨の高さ」ではない**（Bug #3581）。 * 和文の全角字は**字送りがそのまま字の大きさになる**ので、絵の中の字の中心どうしの * 間隔を測れば、そのまま当てる値が出る。**墨の高さから推す方法は、墨と字の比が * 書体と文字で 0.907〜0.916 と揺れるぶんだけ誤差が乗る**（Bug #4998 の初版はこの * 方法で 4.64vw = 17.4px とし、正しい値より 0.18px 小さかった）。 * * 移行元の字送り 30 生画素 × (328.125 / 560) = **17.578px**（3 枚とも同じ） * 直す前の dev 13px * いまの dev 4.6875vw（= 30 / 560 × 87.5vw。幅 375px で 17.578px） * * 墨の高さでも矛盾しない（移行元 15.82px に対し、17.578px の字で 15.94px）。 * **墨は答え合わせに使い、値そのものは字送りから出す。** * * 🚨 **`vw` で書く。**焼き文字は絵の一部なので**器の幅に比例して伸び縮みする**。 * 固定 px で書くと、画面幅を変えたときに絵だけが動いて再びずれる。器は画面幅の * 87.5%（左右 6.25% ずつの内余白）なので、墨 27/560 は 4.21875vw に当たる。 * * 🚨 **行送りも `vw` で留める。**留めないと、字を大きくした分だけ行の箱が伸びて * 下の (R3) の埋め合わせが狂う。**5.3333vw は幅 375px で 20px** であり、 * **直す前の行の箱と同じ値**である。1 つ目と 2 つ目の絵は「反映後の実測で目標との差が * 1px 以内」に収まっているので、**行の箱を変えずに字だけを大きくする**。 */ body.pa-service-page--experienced .page-content__body p.subcopy { margin-bottom: 0; text-align: center; font-size: 4.6875vw; line-height: 5.3333vw; } /* * ------------------------------------------------------------------ * 専任担当伴走サポートのリンクサポートの節を、移行元スマホ版の組みにそろえる（Task #3298） * ------------------------------------------------------------------ * `/service/multi/` の 2 つ目の節（`section.sections.sec02`）である。dev は移行元の * パソコン版をそのまま取り込んでいるので、携帯幅では 3 つが移行元スマホ版と違う。 * * 1. **並び。**パソコン版は「縦組みの題 → 本文 → 写真」（1 つ目）と * 「写真 → 本文 → 縦組みの題」（2 つ目）で左右に振り分けてある。 * 移行元スマホ版はどちらも「区分名 → 写真 → 本文」の縦 1 列である * 2. **区分名。**パソコン版は縦組みの絵（62x176）、移行元スマホ版は写真の上端に * 焼き込んだ横組みの金の文字である * 3. **説明文の見た目。**dev はテーマの本文の組み（黒・ゴシック）、移行元スマホ版は * 金 `#a68146` の明朝で字間が広い * * 🚨 **絵の差し替えだけでは直らない。**写真そのものも切り取りが違う（パソコン版 * 171x174 に対し移行元スマホ版 850x970）。差し替えは `inc/sp-image-swap.php` の表が * 持ち、**文言の帯（上端 127px）を落とした 850x843** を配る。落とした文言は * `inc/service-sp-link-support.php` がテキストで足す（全体原則・裁定 79）。 * * ## 数字の出どころ * * 移行元スマホ版の絵（記録版 `fdb412698` の `sp/service/multi/images/`）を画素で測り、 * テーマの明朝で墨（文字の形）が一致する字の大きさと字間を最小二乗で求めた。 * * 説明文（`sec02_txt.png` / `sec02_txt01.png` / `sec02_txt02.png`） * 字 44.25px / 字間 12.219px / 行の送り 90px（絵の幅 850 での値） * 墨の差は 3 件とも 0〜1px * 区分名（`sec02_ph01.jpg` / `sec02_ph02.jpg` の上端） * Task #3429 の区分名（入会前 / 活動中 / 成婚後）と**同じ意匠で、同じ値で * 墨が 0〜1px で合う**ことを確かめたので、値を共有する * * 絵の幅 850 は器の幅（87.5vw）に当たるので、`vw` へ直すと画面幅に比例して伸縮する。 * * 字の大きさ 44.25 / 850 * 87.5 = 4.55441vw * 字間 12.219 / 44.25 = 0.27613em * 行の送り 90 / 44.25 = 2.033898 * * ## 余白は移行元スマホ版の CSS をそのまま写す * * `sp/service/multi/css/style.css` に書いてある固定 px である（割合ではない）。 * * `.sections h5 { padding-bottom: 30px }` … 移行元の h5 = dev の h6（説明の見出し） * `.sections h4 { padding-bottom: 40px }` … 移行元の h4 = dev の h5（リード） * `.sections .ph { padding-bottom: 20px }` * `.sections .txt_inner { padding-bottom: 40px; margin-bottom: 40px }` * `.sections .txt_inner:last-child { padding: 0; margin: 0 }` * `.sections .btn { padding: 30px 0 0 }` * * 🚨 **点線（`line.png`）は移行元スマホ版のものをそのまま写す。**移行元の CSS は * `.sections .txt_inner` へ `background: url(../images/line.png?ver=299e07e22c33) no-repeat bottom` と * `background-size: contain` を当てている。絵は 560x6 の**黒い点**で、器の幅 * （328.125px）へ縮むと 3.5px の高さになり、灰色の点線に見える（金ではない）。 * * 🚨 **1 つ目の節の分は Task #3666 で足した**（このすぐ下）。この注釈を書いた時点では * 担当の範囲の外だったので入れていなかった。 */ /* * 並びを縦 1 列にする。移行元スマホ版は「区分名 → 写真 → 本文」で、 * dev の 2 つの器は要素の順番が左右で逆になっている。**`order` で入れ替える。** * * 🚨 **`flex` はこの節の器にだけ当てる。**`txt_inner` はこのページに 4 つある。 * * 🚨 **この注釈はもともと「1 つ目の節（sec01）は並べ替えが要らない」と書いていたが、 * 誤りだった**（Bug #4153 で訂正）。移行元スマホ版の `sec01_ph01.jpg` は写真の下に * リードを焼き込んだ 850x1064 の縦長で、移行元の並びは「写真 → リード → 本文」である。 * 1 つ目の節の並べ替えは 3944 行あたりに置いた. */ body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner { display: flex; flex-direction: column; padding-bottom: 40px; margin-bottom: 40px; background-image: url(../../sp/service/multi/images/line.png?ver=e62ec0d62290); background-repeat: no-repeat; background-position: bottom; background-size: contain; } /* * 🚨 **最後の器だけ、下の空きを持たない。**移行元スマホ版は * `.sections .txt_inner:last-child { padding: 0; margin: 0 }` である。 * * dev では `:last-child` が当たらない。移行元スマホ版は押しボタンを 2 つ目の器の * **中**に持つが、dev は器の**外**（`.sec_inner` の直下）に持つので、 * 2 つ目の器は最後の子ではない。`:last-of-type` も使えない（押しボタンの器も `div`）。 * **隣り合わせ（`+`）で 2 つ目を指す。** * * 🚨 **器がちょうど 2 つであることは、検査では見張れない。**この骨組みは投入した * 本文が持つもので、リポジトリの中に数えられる元が無い（検査は CSS と PHP しか * 読まない）。**3 つ目の器が増えると、2 つ目にだけ点線が消えて 3 つ目に残る。** * 器の数が変わったときは、この規則も直すこと。いまが 2 つであることは実ページの * 実測で確かめてある。 */ body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner + .txt_inner { padding-bottom: 0; margin-bottom: 0; background-image: none; } /* * ------------------------------------------------------------------ * 1 つ目の節の区切りの点線（Task #3607 の M-1・Task #3666） * ------------------------------------------------------------------ * 移行元の規則（`sp/service/multi/css/style.css` 86〜96 行）は * `.sections .txt_inner` **すべて**に点線を敷き、`:last-child` だけ外す。 * 両側の器を全数で突き合わせた実測（幅 375px）: * * 器の数 点線が付く位置 * 移行元スマホ版 7 個 1・3・5・6 番目 * 直す前の dev .txt_inner 4 個 + 並び 3 個 3 番目と、並びの 1・2 番目 * * **欠けていたのは 1 つ目の節の 1 番目だけである。**3 つ目の節は Task #3298 で作った * 並びの部品（`.pa-service-sp-team__group`）が既に同じ形（線・線・なし）になっている。 * * 🚨 **`:last-child` は dev では当たらない。**移行元スマホ版は押しボタンを器の中に持つが、 * dev は器の外に持つので、2 番目の器は最後の子にならない。`:last-of-type` も使えない * （押しボタンの器も `div`）。**2 つ目の節と同じく、隣り合わせ（`+`）で 2 番目を指す。** * * 🚨 **器がちょうど 2 つであることは、検査では見張れない。**この骨組みは投入した * 本文が持つもので、リポジトリの中に数えられる元が無い（検査は CSS と PHP しか * 読まない）。**3 つ目の器が増えると、2 つ目にだけ点線が消えて 3 つ目に残る。** * 器の数が変わったときは、この規則も直すこと。いまが 2 つであることは実ページの * 実測で確かめてある。 * * 🚨 **見た目の裏取りは実ブラウザで行った**（差し込むと 1 番目が「点線あり・下の内余白 * 40px・下の外余白 40px」、2 番目は無しになり、移行元と同じ形になる。高さは * 422.78 → 462.78px。パソコン幅 1440px は変わらない）。 */ body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner { padding-bottom: 40px; margin-bottom: 40px; background-image: url(../../sp/service/multi/images/line.png?ver=e62ec0d62290); background-repeat: no-repeat; background-position: bottom; background-size: contain; } body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner + .txt_inner { padding-bottom: 0; margin-bottom: 0; background-image: none; } /* * 本文の下の外余白を落とす。移行元スマホ版の `p` は下の外余白を持たず、 * 器の内余白 40px がそのまま次の器との空きになる。テーマは `p` へ 18px を当てるので、 * 残すと空きが 80px ではなく 98px になる（実測）. */ body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner .txt_area p { margin-bottom: 0; } /* * 本文の段落の下の外余白を、残りの区画でも移行元にそろえる（Task #4447） * ------------------------------------------------------------------ * **上の規則（区画 2 だけ）と同じ話が、残りの区画にも当てはまっていた。**テーマは * 段落へ下の外余白 18px を当てるが、**移行元スマホ版の段落は 0 である**。 * * 幅 375px の段落の全数（移行元 = 記録版の写しを `file://` で開いた・2026-09-07 21:41）: * * 側 画面 道すじ 下の外余白 * ------------------------------------------------------------------------ * 移行元 専任担当 .sp_wrap_body > .txt_inner > p（4 件） 0px * 移行元 専任担当 .sp_wrap_body > p.mb30（区画 3） 30px * 移行元 パーソナル .sp_wrap_body > p（区画 1・3） 0px * dev 専任担当 .sec_inner > .txt_inner > .txt_area > p 18px ← 直す * dev 専任担当 .sec_inner > p（区画 3） 18px ← 直す * dev パーソナル .sec_inner > .txt_inner > .txt_area > p 18px ← 直す * * この 18px が、区画の高さの差のほとんどを作っていた（器の直下の子の足し算で * 0.01px まで閉じた）: * * 専任担当 区画 1 +35.45 = 節の題 −0.51 ＋ **18px が 2 か所** * パーソナル 区画 1 +46.44 のうち **18px が 1 か所**（残りは定義リストの外余白） * パーソナル 区画 3 +16.54 = 節の題 −1.30 ＋ **18px が 1 か所** ＋ 意匠 −0.13 * * 🚨 **区画 3（専任担当）だけ移行元が 30px を持つ。**移行元の段落は `mb30` の印を * 持っており（`sp/service/multi/index.html`）、dev が投入した本文はその印を * 持たない。**0 にすると 30px ぶん詰まる**ので、この 1 か所だけ 30px を書く。 * * 🚨 **当たり先を `.txt_area` の直下の段落に絞る。**段落の下の外余白 18px は * テーマの共通の値で、広げると他のページへ波及する。`>` で直下に限るのは、 * 写真の器の中の注記（`.ph > p.aside`）や、意匠の部品の中の段落 * （`.pa-service-sp-team__stage` など）を巻き込まないためである。 * * 🚨 **区画 3（専任担当）の −201.55px はこの Task の対象外である。**移行元スマホ版が * 誤って貼り込んだ段落を dev は入れない、というユーザー裁定（2026-09-04）で、 * `docs/pa-cms/design/意図的変更の台帳.md` の 123 行に記録されている。 * * 上の区画 2 の規則（`.sections.sec02 .txt_inner .txt_area p`）は、この規則に * 含まれるようになったが、**値が同じなので残しても害はない**。既存の検査が * その 1 本を見張っているため消さない。 */ body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .sections .txt_inner .txt_area > p { margin-bottom: 0; } body.pa-service-page--multi .page-content__body .sections.sec03 .sec_inner > p { margin-bottom: 30px; } body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner .flow_ico { order: 1; } body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner .ph { order: 2; padding-bottom: 20px; } body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner .txt_area { order: 3; } /* * 縦組みの題の絵（62x176）は隠す。移行元スマホ版はこの絵を持たない。 * 🚨 **隠すだけにしない。**同じ器の中へ足した区分名のテキストを下で出す。 * 隠すだけだと「ご紹介時」「交際中」が画面から消える. */ body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner .flow_ico img { display: none; } /* * 区分名（ご紹介時 / 交際中）。移行元スマホ版は写真 `sec02_phNN.jpg`（850x970）の * 上端へ焼き込んでいる。文字の墨は y=0..41、写真の始まりは y=127 なので、 * この器の高さは 127 / 850 * 87.5 = 13.07353vw になる。 * * 字の大きさと字間は Task #3429 の区分名と共有する（同じ意匠で、墨が 0〜1px で合う）. */ body.pa-service-page--multi .page-content__body .pa-service-sp-link-stage { display: block; margin: 0; padding: 0; height: 13.07353vw; color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.70557vw; font-weight: normal; letter-spacing: 0.2241em; line-height: 1; text-align: center; } /* * 写真。移行元スマホ版の 850x970 から上端 127px を落とした 850x843 へ差し替えるので、 * `` の幅と高さの札（171x174）ではなく、器いっぱいに伸ばして比を絵に任せる. */ body.pa-service-page--multi .page-content__body .sections.sec02 .txt_inner .ph img { display: block; width: 100%; height: auto; aspect-ratio: 850 / 843; } /* * リード（dev の `h5.service_sub_title`）と説明の見出し（dev の `h6.service_sub_title`）。 * 移行元スマホ版はどちらも金の明朝の絵で、字の大きさ・字間・行の送りは同じである。 * * 🚨 **リードだけ中央寄せ、見出し 2 件は左寄せである。**絵の最終行の墨の位置で * 見分けた（リードの 4 行目は絵の中心に、見出しの 2 行目は左端にある）. */ /* * 🚨 **行の余り（半分の行送り）を上下で打ち消す。**移行元は文字を絵で持つので、 * 絵の高さ＝墨の高さである。テキストで組むと行の箱が墨より上下に広く、 * そのぶん節が伸びて次の要素が下がる。 * * 4 行の箱 4 × 2.033898 × 4.55441vw = 37.0533vw（幅 375px で 138.95px） * 絵の高さ 312 / 850 × 87.5 = 32.1176vw（同 120.44px） * 余り 4.9357vw（同 18.51px） * * 余りは上に 2.408vw・下に 2.528vw で、**行数によらず同じ**（半分の行送りは * 1 行目の上と最終行の下にしか出ないため）。だから見出し 2 行のほうにも同じ値が効く. */ body.pa-service-page--multi .page-content__body .sections.sec02 :is(h5, h6).service_sub_title { margin: -2.408vw 0 -2.528vw; color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.55441vw; font-weight: normal; letter-spacing: 0.27613em; line-height: 2.033898; } body.pa-service-page--multi .page-content__body .sections.sec02 > .sec_inner > h5.service_sub_title { padding-bottom: 40px; text-align: center; } body.pa-service-page--multi .page-content__body .sections.sec02 .txt_area h6.service_sub_title { padding-bottom: 30px; text-align: left; } /* * 🚨 **リードの強制改行を落とす。**dev はパソコン版の 3 行の切り方 * （`
` 2 つ）を持つが、移行元スマホ版は器が狭いので 4 行へ自然に折り返す * （15 / 15 / 15 / 9 字）。`
` を残すと切れ目が移行元と揃わない. */ body.pa-service-page--multi .page-content__body .sections.sec02 > .sec_inner > h5.service_sub_title br { display: none; } /* * 押しボタンの上の空き。移行元スマホ版は `.sections .btn { padding: 30px 0 0 }`. */ /* * ------------------------------------------------------------------ * 押しボタンの上下の空き（Task #3607 の S-3・Task #3687） * ------------------------------------------------------------------ * 移行元は節を絞らずに当てている。写し元は 2 つある。 * * sp/service/multi/css/style.css 123 行 `.sections .btn { padding: 30px 0 0 }` * sp/service/point/css/style.css 122 行 `.sec02 .btn { padding: 30px 0 }`（上下とも） * * **Task #3298 は 2 つ目の節だけに入れていた**ので、1 つ目の節と * パーソナル婚活プログラムが落ちていた。ここで節を絞らない形へ置き換える。 * * 実測（幅 375px・絵を 1 枚ずつ読み込ませてから測った）: * * ページ・位置 移行元スマホ版 直す前の dev * 専任担当伴走サポート 1 つ目 86.25px・上 30 下 0 64.44px・上下 0 * 専任担当伴走サポート 2 つ目 86.25px・上 30 下 0 94.44px・上 30 下 0 * パーソナル婚活プログラム 116.25px・上下 30 64.44px・上下 0 * * 🚨 **絵を `display: block` にするのは、行の中に置かれる分の空きを消すためである。** * 移行元はスマホ版共通の `img { display: block }` で block になっている。dev は * `picture` の中の `img` が inline のままなので、**器が絵より 8.19px 高い**。 * 2 つ目の押しボタンが 94.44px（= 86.25 + 8.19）だったのもこれが理由である。 * * 🚨 **絵そのものは両側で一致している。**寸法は 328.13 x 56.25px（元 840 x 144）、 * 中身も写しが配信している 2 枚を取り寄せてハッシュで照合した（どちらも * 「成婚コンシェルジュのお話」）。**名前が同じでも中身が違う絵が移行元スマホ版の * 資産にはあるので、絵の中身は必ずハッシュで確かめること**（`inc/sp-image-swap.php` * の注釈を参照）。 */ body.pa-service-page--multi .page-content__body .sections .btn { padding-top: 30px; } body.pa-service-page--point .page-content__body .sections.sec02 .btn { padding-top: 30px; padding-bottom: 30px; } body:is(.pa-service-page--multi, .pa-service-page--point) .page-content__body .sections .btn img { display: block; } /* * ================================================================== * 携帯幅に残った 2 件（Issue #3515） * ================================================================== * 移行元スマホ版の写し元は * `legacy/www.p-a.jp/public/sp/service/experienced/css/style.css` * （記録版 fdb41269）。実測は幅 375px、器の幅は 328.125px（画面幅の 87.5%）。 */ /* * ------------------------------------------------------------------ * (R2) 囲み 3 か所の下の外余白を、移行元と同じ割合にする * ------------------------------------------------------------------ * 移行元の宣言はこの 2 本だけである。 * * #anchor02 .box { margin: 0 0 8% } … 器 328.125px に対して 26.25px * #anchor03 .box { margin: 0 0 10% } … 同じく 32.8125px * * 移行元の `#anchor0N` は dev の `#experienced0N` である（名前が違うだけで * 同じ節）。**割合のまま写す。**固定値で書くと画面幅が変わったときにずれる。 * * 🚨 **移行元 `#anchor02 .box` の相手は dev の `.box` ではない。** * `#experienced02` に `.box` は 1 つも無く、相手は `div.experienced_box1` と * `div.experienced_box2` である（その次に来るのが `div.reason`）。 * `#experienced03` の `.box` だけは `div.clearfix` の中にある。 * * 🚨 **`.box` はこのページ以外にも出る類名である。**`#experienced03` まで * 絞って、他のページ・他の節へ波及しないようにする。 * * 🚨 **`#experienced03` だけ上も 0 にする。**dev の `.box` は上に 30px を持つ * （`main.css` 26029〜26031 行の * `:is(.entry-content, .page-content__body) .box { margin-top: * var(--pa-article-block-gap) }`）。この 30px は節の題の下の 18px を上回って * 勝つため、**節の題から 1 つ目の囲みまでの空きが 30px になる**。 * * 実測（2026-09-05 02:1x JST・幅 375px。両側を実ページで測った）: * * 移行元スマホ版 #anchor01 18px / #anchor02 18px / #anchor03 18px * dev #experienced01 18px / #experienced02 18px / * #experienced03 **30px**（+12px） * * 移行元は `margin: 0 0 10%` で上を 0 にしており、題の下の 18px * （`h3.title { margin: 0 0 18px }`）がそのまま空きになる。同じ書き方をすれば * dev も 18px にそろう。囲みどうしの空きは変わらない（下の 32.8125px と * 次の囲みの上の 0 が相殺して 32.8125px のまま）。 * * 🚨 **左右を 0 にしても寸法は変わらない。**携帯幅で `.box` へ左右の外余白を * 与える規則は 1 本も無い（`main.css` の 2 本は上下だけ。写しの * `margin-right: 80px` は `experienced.css` の `@media (min-width: 750px)` の * 中にあり、パソコン幅専用である）。 * * 🚨 **`.experienced_box1` の今の 18px は、中の最後の段落の下の外余白が * 囲みの外へ抜けたものである**（囲み自身の外余白は上下とも 0px。携帯幅の * `--pa-article-paragraph-gap` が 18px）。外余白どうしは相殺して大きいほうが * 残るので、囲みへ 8%（26.25px）を書けば 18px は飲み込まれる。 * * 🚨 **`#experienced03` の相手だけ `.clearfix` まで書いてある。**上の (1) が * すでに `#experienced03 .box` の選択子で並びを直しており、検査が「同じ * 選択子の規則はちょうど 1 つ」を見張るためである。`.box` が * `div.clearfix` の中にあることは dev の実ページで確かめてある。 */ body.pa-service-page--experienced .page-content__body #experienced02 .experienced_box1 { margin-bottom: 8%; } body.pa-service-page--experienced .page-content__body #experienced02 .experienced_box2 { margin-bottom: 8%; } body.pa-service-page--experienced .page-content__body #experienced03 .clearfix .box { margin: 0 0 10%; } /* * ------------------------------------------------------------------ * (R3) 3 つ目の図（`1年以内の交際率`）の縦の空きを、移行元と同じにする * ------------------------------------------------------------------ * 移行元スマホ版は見出しの文言を絵に焼き込んで 1 枚で出す。dev は文言の帯を * 切り落とした写しへ差し替え、文言は `p.subcopy` のテキストで出す（裁定 79・ * Task #3437）。**その帯の高さと、テキストの行の箱の高さが違う。** * * 絵を画素で数えて出した値である（移行元 `sp/.../images/img03.png` は * 560x559、テーマの写し `assets/sp/.../img02_trimmed.png` は 560x518。 * 上端 41 行を切り落としてある）。器 328.125px に対する表示倍率は * 328.125 / 560 = 0.5859375 なので、 * * 移行元の全高 559 × 0.5859375 = 327.5390625px * 切り落とした帯 41 × 0.5859375 = 24.0234375px * dev の今の全高 20（`p.subcopy` の行の箱）+ 518 × 0.5859375 * = 323.515625px * 足りないぶん = 4.0234375px * * つまり **24.02px の帯を 20px の行の箱で置き換えている**のが差の正体である。 * 行の箱を帯の高さまで戻すぶんを、`padding-top` で足す。 * * 🚨 **式の中の 5.3333vw は「行の箱の高さ」である**（幅 375px で 20px）。 * この値は上の (B4) で `p.subcopy` に `line-height: 5.3333vw` として書いてある。 * **この 2 か所は必ず同じ値にする。**片方だけ変えると、3 つ目の絵の上の空きが * その差のぶんだけずれる。**行の箱を変えたくなったら、まず (B4) を直し、 * その値をここへ写す。**（Bug #4998 の前は両方 20px の固定値だった。字を * 大きくしたときに行の箱が伸びて式が狂うのを防ぐため、`vw` で留めてある。） * * 🚨 **割合で書く。**帯の高さは絵の幅に比例するので、器の幅に対する割合 * （41 / 560 = 7.32142857%）から、幅によらず一定の行の箱 20px を引く。 * 幅 375px では 24.0234375 − 20 = 4.0234375px になる。固定値で書くと画面幅が * 変わったときに絵だけが伸び縮みしてずれる。 * * 🚨 **足すのは文言の上である。**移行元の絵の帯は、上から 12 行が白・ * 行 12〜40 が文言の墨・行 41 から飾りの縦棒で、**白は文言の上にだけあり、 * 文言の下から飾りまでは 0 行**である（`legacy-img03.png` の行ごとの墨を * 数えた）。表示に直すと上の白は 7.03px。dev の 20px の行の箱は 17.4px の字の * 上下へ約 1.3px ずつ置くので、上へ足せば 1.3 + 4.02 = 5.32px で移行元に近く、 * 文言の下から飾りまでも 3.5px のまま近いままに保てる。下へ足すと 7.5px 開いて * 移行元から離れる。 * * 🚨 **字の大きさは (B4) が持つ**（4.6875vw = 幅 375px で 17.578px。焼き文字の * 字送り 30 生画素に合わせた。Bug #4998 でまず 4.64vw にし、Bug #3581 で字送りから * 出し直した。それ以前は 13px だった）。**ここでは触らない。** * **`p.subcopy` を画像へ戻さない**（裁定 79）。 * * 🚨 **3 つ目だけに当たる。**1 つ目は `#experienced01` の中、2 つ目は * `.experienced_box1` の中にあり、3 つ目だけが `.experienced_box2` の中に * ある。この 2 件は反映後の実測で目標との差が 1px 以内に収まっており、 * 動かしてはいけない。 */ body.pa-service-page--experienced .page-content__body .experienced_box2 p.subcopy { padding-top: calc(7.32142857% - 5.3333vw); } /* * ------------------------------------------------------------------ * (R4) 図の絵の下に残る「行の余り」6px を消す * ------------------------------------------------------------------ * 移行元スマホ版はサイト共通で `img { width: 100%; height: auto; display: * block }` を置く（`sp/css/common.css` の 11〜15 行）。絵が塊なので、絵の器の * 高さは絵の高さそのものになる。 * * dev の絵は行の中の要素のままである。テーマの既定は * `img { max-width: 100%; height: auto }`（`main.css` の 793〜796 行）だけで、 * 縦揃えを与えるのは `.pa-profile-new img { vertical-align: bottom }` * （同 819〜821 行）に限られ、**この画面は旧デザイン側なので当たらない**。 * つまり絵は初期値の `baseline` に載り、**絵の下にベースラインより下の * 下がり幅が残る**。 * * 実測（2026-09-05 02:0x〜02:1x JST・幅 375px）。**本文の絵 6 点すべてが * 「器 = 絵 + 6px」で、移行元の対応する 6 点はすべて 0px** である。 * * 図 1（`p.photo`） 器 360.48 / 絵 354.48 * 図 2（`p.photo`） 器 164.78 / 絵 158.78 * 図 3（`p.photo`） 器 309.52 / 絵 303.52 * 飾り枠の写真（`p.photo`） 器 181.78 / 絵 175.78 * 節 3 の写真 1（素の `p`） 器 181.78 / 絵 175.78 * 節 3 の写真 2（素の `p`） 器 181.78 / 絵 175.78 * * 🚨 **`picture` と `img` の両方を塊にする。**携帯専用の絵への差し替え * （`inc/sp-image-swap.php` の `pa_sp_image_swap_wrap()`）が `` を * `` で包むため、組みは `p > picture > img` である。 * `` も行の中に置ける要素なので、包みの側が行の中のままだと * 余りが戻る。 * * 🚨 **`width: 100%` は写さない。**絵はどれも生の幅 560px で、器の * 328.125px よりも広い。テーマの `max-width: 100%` がすでに器いっぱいまで * 縮めているので、幅を書いても寸法は変わらない。書かないぶん、器より狭い * 絵を引き伸ばす事故も起きない。 * * 🚨 **`

` の中に限る。**6 点は 4 点が `p.photo`・2 点が素の `p` の中に * ある。一方、節の題の絵は `h4 > img` で `

` の中に無い。あの絵は携帯幅で * 上の (B1) が `display: none` にしているので、巻き込むと題が二重に出る。 * * 🚨 **`#experienced` の中に限る（`p` だけでは広すぎる）。**この本文は * `section#experienced` のうしろに、来店予約の帯（`.box_support`）と * ページの先頭へ戻る押しボタン（`.page_topArea`）を持つ。**どちらも * `.page-content__body` の中にあり、`

` の中に絵を持つ。** * * `.box_support .txt_area > p > img` スタッフの写真（`staff.jpg`） * `.page_topArea > p.page_top > a > img` 先頭へ戻る押しボタン * * 前者は `support-band.css` の 140〜144 行が **`vertical-align: baseline` を * わざと残している**（注釈いわく、この 1 行で左の列の高さが 319px から移行元と * 同じ 334px になる）。塊にすると、その手当てを黙って壊す。 * `#experienced` まで絞れば、組みの上で 2 点とも外れる。 * * 🚨 **勝つ相手はいない。**読み込む 6 本を走査して、`#experienced` の中の * `

` の絵へ `display` を与える規則が 1 本も無いことを確かめた。この画面に * 当たる `display` の規則は、上の節の題の絵を隠す * `h4:has(> .pa-service-experienced-title) > img / > picture` だけである。 */ body.pa-service-page--experienced .page-content__body #experienced p :is(picture, img) { display: block; } /* * ================================================================== * 本文の余白を移行元スマホ版にそろえる（Bug #4131 の隣・Bug #4142） * ================================================================== * 2026-09-07 01:0x JST のユーザーの目視で「コンテンツ内の余白の長さが移行元と * 相違する点が多く見受けられる」と指摘された。場所の指定が無かったので、 * 本文の中身を上から順に全部測って洗い出した。 * * 写し元は `legacy/www.p-a.jp/public/sp/service/experienced/css/style.css` * （記録版）。実測は幅 375px、節の中の器の幅は 328.125px。 * * 移行元の宣言（この 3 本が効いている）: * * #experienced { padding: 25px 0 25px } … ページの器の上下 * .anchor_block { margin: 0 0 8% } … 節の下（375px に対して 30px） * p { margin: 0 0 4% } … 段落の下（器 328.125px に * 対して 13.125px。飾り枠の中は * 器 295.3125px なので 11.8125px） * * dev はテーマの既定（`--pa-article-paragraph-gap` = 携帯幅で 18px）を使って * おり、節の下の外余白は 0 だった。 * * 🚨 **節の下だけは割合で写せない。**移行元の `.anchor_block` は幅 375px の * 器（`#experienced`）の中に居るので 8% = 30px になるが、dev の * `#experienced0N` は幅 328.125px の器の中に居るため 8% = 26.25px になる。 * ここだけ 30px と書く。段落の下（4%）は両側とも同じ器の幅なので写せる。 * * 🚨🚨 **dev の `.box` は縦の flex なので、最後の中身の下外余白がまとまらない。** * 移行元の `.box` は素の塊なので、中の最後の段落の下外余白 13.125px は * 囲みの下外余白 32.8125px と 1 つにまとまって消える。dev は上の (1) で * 並べ替えのために `display: flex` にしてあり、flex の器では外余白が * まとまらないので **13.125px がそのまま足される**。まとまるはずのものを * 0 にして戻す。同じことが `.experienced_box2` の中の `div.text` * （flex 項目）にも起きる。 * * 実測（幅 375px。移行元は記録版を手元で描画、dev は CloudFront。 * 塗られている中身の位置で測る。文字はテキストノードの `Range`）: * * | 測ったもの | 移行元 | 直す前 | 直したあと | * |---|---:|---:|---:| * | ヘッダーの下 → 題名の上 | 25.00 | 0.00 | 25.00 | * | 「私たちはサービスと実績に〜」→「パートナーエージェントの特徴」 | 67.38 | 25.57 | 67.38 | * | 「パートナーエージェントの特徴」→「豊富な実績データを」 | 228.90 | 233.78 | 228.91 | * | 「成婚KPI〜」→「コーチングスキルを身につけた」 | 230.72 | 253.59 | 230.72 | * | 「「傾聴力」〜」→「あなたの婚活を、私たち成婚〜」 | 115.81 | 93.81 | 115.81 | * | 「※2022年10月〜」→「理由としての活動状況」 | 48.00 | 36.00 | 48.00 | * * 🚨 **題名は器の外にある。**移行元は `

` の中に題名 * （`h2.category_ttl`）を入れて、器の上内余白 25px で空きを作る。dev の題名 * （`h2.main_ttl`）は `#experienced` の外・`.page-content__body` の直下に * あるので、上の 25px は `.page-content__body` の上内余白で作る。器の中へ * 上内余白を足すと、題名と導入文の間が 20px から 45px へ広がってしまう。 * * 🚨 **下の 25px は帯までの空きに効く。**移行元は器の下内余白 25px が * あるため、節の下外余白（32.8125px）と帯の上外余白（15px）が 1 つに * まとまらない。dev は器に内余白が無いので 2 つがまとまり、**40px 足りなく * なる**（32.8125 + 25 + 15 = 72.8125 に対して 32.8125）。 */ body.pa-service-page--experienced .page-content__body { padding-top: 25px; } body.pa-service-page--experienced .page-content__body #experienced { padding-bottom: 25px; } body.pa-service-page--experienced .page-content__body :is(#experienced01, #experienced02, #experienced03) { margin-bottom: 30px; } body.pa-service-page--experienced .page-content__body :is(#experienced01, #experienced02, #experienced03) p { margin-bottom: 4%; } /* * 🚨 **下の 5 本は上の 4% より詳細度を高くしておく。**上の規則は `:is()` の * 中に目印（id）を持つので詳細度が高い。囲みごとの例外を類名だけで書くと * 負けて 1 度も効かない（実装中に実測で確認した）。節の目印から書き始める。 */ body.pa-service-page--experienced .page-content__body #experienced03 .box > p:not(:has(img)) { margin-bottom: 0; } /* * 図の見出しの下の外余白を、3 つとも打ち消す（Bug #5135）。 * * すぐ上の 4% が当たると、器の幅 328.13px に対して **13.125px** の空きが付く。 * 移行元スマホ版はこの見出しを絵に焼いており、**見出しの墨のすぐ下から次の中身が * 始まる**（墨の下端の直下から次の墨まで 0 行・0 行・1 行）。dev は絵の見出しの帯だけを * 切り落とした絵（`img00_trimmed.png` ほか）を使うので、空きが余分に見える。 * * 実測（幅 375px・見出しの墨の下端から次の絵の上端まで）: * * 61.4％が１年以内の成婚を実現！ 移行元 0.00px 直す前 15.66px 直した後 2.53px * 1年間の成婚数 移行元 0.00px 直す前 15.69px 直した後 2.57px * 1年以内の交際率 移行元 0.59px 直す前 2.45px 直した後 2.45px * * 🚨 **もとは 3 つ目（`experienced_box2`）だけを打ち消していた。**1 つ目と 2 つ目にも * 同じ打ち消しが要るので、当たり先を節の単位へ広げた。**`p.subcopy` に絞ってある**ので、 * 4% が当たるほかの段落は今までどおりである. * * 🚨 **残る約 2.5px は直さない。**これは行の箱の中で墨の下に付く余りである。移行元は * 絵なので余りがすべて墨の上に付く（墨の上 8 行・下 0 行）が、dev は本物の文字なので * 上下に分かれる。消すには負の外余白が要り、値が書体の寸法に依存して脆い。 * 3 つ目は既にこの状態で動いている. */ body.pa-service-page--experienced .page-content__body :is( #experienced01, #experienced02 ) p.subcopy { margin-bottom: 0; } body.pa-service-page--experienced .page-content__body #experienced02 .experienced_box2 > .clearfix .text > p:last-child { margin-bottom: 0; } /* * 🚨 **飾り枠の写真は帯に密着させる。**移行元は写真を飾り枠の `dl` の中 * （`dt`）に入れているので、写真と飾り枠の間に空きが無い。dev は写真を * `dl` の外（`p.photo`）に置くため、段落の下外余白がそのまま空きになる。 */ body.pa-service-page--experienced .page-content__body #experienced02 .reason .clearfix > p.photo { margin-bottom: 0; } /* * 🚨 **飾り枠の本文は `dd` そのものである。**移行元は `
…

…

` * で、`p` の下外余白 4%（器 295.3125px に対して 11.8125px）が `dd` の * 下内余白 6.5625px と足し算になる。dev の `dd` は本文を直に持つので、 * その `p` のぶんを `dd` の下外余白で足す。割合の基準（`dl` の中身の幅 * 295.3125px）は両側で同じなので、そのまま 4% と書ける。 */ body.pa-service-page--experienced .page-content__body #experienced02 .reason dl dd { margin-bottom: 4%; } /* * ------------------------------------------------------------------ * 5つの約束の「コンセプトパンフレット」の絵を、移行元スマホ版の大きさと位置へ * ------------------------------------------------------------------ * Task #3607 の差分調査で見つけた。**移行元と dev で同じ絵 * （`ttl_top_01.png`・元 272x54）を出しているのに、大きさも位置も違う。** * * 実測（幅 375px・2026-09-05 04:3x。移行元は本番・dev は CloudFront）: * * 移行元スマホ版 168.75 x 33.5px x = 103.13（画面の中心 187.5 にそろう） * dev 197 x 39.11px x = 23.44（**左に寄っている**） * * 🚨 **dev の大きさは CSS ではなく `` の属性で決まっていた。**ブラウザに * 当たっている規則を聞くと `img { max-width: 100%; height: auto }` しか無く、 * 属性の `width="197" height="39"` がそのまま出ていた（パソコン版の本文を * 畳んでいるため）。**CSS を grep しても見つからない型なので、当たっている規則は * ブラウザに聞くこと。** * * 移行元の写し元（`sp/service/promise/css/style.css` 55〜65 行）: * * .ttl_promise { text-align: center; margin: 0 -6.25% } * .ttl_promise img { max-width: 40%; margin: 0 auto } * * 器を左右へ 6.25% ずつ広げた 421.88px の 40% で 168.75px になる。 * **器の広げ方は写さない。**あの器が画面より広いことが、このページだけ横へ * 399px はみ出す正体だからである（移行元の側の作りで、dev の不具合ではない）。 * 結果の大きさだけを画面幅の割合で写す。168.75 ÷ 375 = 45%。 * * 🚨 **画面幅に比例させる。**移行元は器の百分率で効いているので、幅が変われば * 絵も伸縮する。固定 px にすると幅 375px のときだけ一致する. */ body.pa-service-page--promise .page-content__body .ttl_promise { text-align: center; } body.pa-service-page--promise .page-content__body .ttl_promise img { width: 45vw; height: auto; } /* * ------------------------------------------------------------------ * 5つの約束の導入の文を、移行元スマホ版の焼き込み文字と同じ見た目へ * ------------------------------------------------------------------ * Task #3607 の差分調査の 2 件目。移行元スマホ版はこの文を**画像** * （`sp/service/promise/images/txt_copy_01.png`・元 656x180）で持ち、dev は * 同じ文言を `h4.service_sub_title.serif` のテキストで持つ。全体原則 * 「画像に焼き込まれた文言はテキストで再現する」に沿って、**画像の中の字を * 画素で測り、その値をテキストの指定へ写す。** * * 🚨 **パソコン幅は移行元と 0.00px 差ですでに一致している。**移行元のページ専用 * CSS の写し（`assets/service/css/section.css`）が `@media (min-width: 750px)` の * 中で 23px / #a68146 / 字間 0.2em / 太さ 400 / 中央寄せを当てているためである。 * 携帯幅ではその写しが外れ、**テーマの記事見出しの既定（17px / 黒 / 太字 / * 左寄せ / 行送り 1.5 / 字間 0.05em）が素通りしていた。** * * 移行元の画像の中の字を画素で測った値（元画像 656x180 の座標）: * * 1 行目 「私たちパートナーエージェントは」 塗り x 29-624 y 1-34 * 2 行目 「5つの約束を掲げ」 塗り x 179-477 y 73-106 * 3 行目 「お客さまを成婚へと導きます。」 塗り x 54-580 y 145-178 * 塗りの色 #a68146（移行元パソコン版の `color` と同じ値） * * ここから読み取れる値が 3 つある。 * ① 行の送りは 72px（1 → 73 → 145）。字は 40px なので **1.8 倍** * ② 3 行とも中心が 328px（画像の中心）に乗る。**中央寄せ**である * ③ 1 行目の送り幅は 600px。15 字なので 1 字 40px = **字間 0** * （字間 0.05em なら 628px になり、実測と 28px 合わない） * * 🚨 **字の大きさは割合で書く。**移行元の絵は `img { width: 100% }` で画面幅の * 87.5% に伸縮する。**4 幅で実測して確かめた**（320 / 375 / 414 / 749px とも * 87.5%。焼き込みの字は 17.07 / 20.01 / 22.09 / 39.96px）。 * 40 ÷ 656 × 87.5vw = 5.335vw である。固定 px にすると 375px でしか合わない。 * * 🚨 **`max-width` は折り返しの位置を移行元へそろえるために要る。**移行元の * 1 行目は 15 字（600px）で切れているが、器は 656px あるので 16 字目の「5」 * （半角 20px）も入る。器のままだと dev は 16 字で折り返し、「…は5 / * つの約束を掲げ」と割れる。器を 81.3vw（375px で 304.9px）に絞ると、15 字 * （300px）は入り 16 字（310px）は入らないので、移行元と同じ「…は / * 5つの約束を掲げ」で折り返す。**余裕は下へ 4.9px・上へ 5.1px と対称に取った。** * 3 行目（14 字 280px）と 2 行目（7.5 字 150px）はどちらも収まる。 * * 🚨 **上の外余白を負にするのは、絵とテキストで「行の上の空き」が違うため。** * 移行元の絵は塗りのすぐ上で切り取られている。テキストは行送り 1.8 の半分 * （0.4em）を字の上に持つ。その分だけ引き上げると、1 行目の字の上端が移行元と * 同じ位置（上の見出しの下端）に乗る。**単位を em にしてあるので、字の大きさが * 画面幅で変わっても釣り合いが崩れない。**下の外余白 3.28em は、移行元の * `.txt_copy { padding-bottom: 20vw }`（375px で 75px）から、テキストが下に持つ * 空きを引いた値である。 * * 実測（幅 375px・dev の実ページへ差し込んで前後を 1 回の読み込みで測った）: * * 1 行目 2 行目 3 行目 行送り 1 行目の上端 * 移行元スマホ版 300px 150px 276px 36.0 見出しの下端 +0.50 * 直す前 310px 140px 277px 25.5 見出しの下端 +34.0 * 直した後 300px 150px 277px 36.0 見出しの下端 +0.60 */ body.pa-service-page--promise .page-content__body h4.service_sub_title { max-width: 81.3vw; margin: -0.4em auto 3.28em; font-size: 5.335vw; line-height: 1.8; letter-spacing: 0; color: #a68146; font-weight: normal; text-align: center; } /* * ------------------------------------------------------------------ * 5つの約束のパンフレットの「台」と、後ろに固定する写真 * ------------------------------------------------------------------ * Task #3607 の差分調査の 3 件目。**このページでいちばん大きい見た目の差である。** * 移行元スマホ版は画面 1 枚分の高さの帯を置き、その後ろに虹色の写真を画面へ固定して * 覗かせる。スクロールすると帯だけが動き、写真は止まって見える。 * * 実測（幅 375px・画面の高さ 800px）: * * 台の高さ 上下の内余白 台の幅 背景 * 移行元スマホ版 385.5px 176px ずつ 375px（全幅） 画面へ固定 * 直す前 47.11px 0 328.13px 無し * * 写しは `assets/service/css/promise.css` に `.ttl_promise` の内余白と `::before` を * 持っているが `@media (min-width: 750px)` の中にある。**パソコン幅では移行元どおりに * 出ており、携帯幅だけ丸ごと落ちていた。** * * 🚨 **移行元の仕組みをそのまま写すと、背景がページ全体に漏れる。**移行元は * `.sp_wrap_body` などすべての器へ `background: #fff` を塗り、`.ttl_promise` だけを * 塗らずに固定背景を覗かせる作りである。dev の本文は器が 5 つで、白を塗っていない * うえ器と器の間に隙間（-8 / 65.6 / 15 / 15px）がある。実際に差し込んで確かめると、 * 導入の文の周りにも「はじめに」の周りにも写真が透けた。 * * **そこで白で覆う代わりに、帯そのもので切り抜く。**`position: relative; z-index: 0` で * 重ね順の入れ物を作り、`clip-path: inset(0)` で固定の擬似要素を帯の外へ出さない。 * **見え方は移行元と同じで、器と器の隙間に左右されない。** * * 🚨 **移行元は本当に「画面へ固定」されている。実機の型を画素で確かめた。** * 移行元が使うのは `background-attachment: fixed`（iOS Safari で効かない型）ではなく * **`position: fixed` の擬似要素**である。同じ画面上の点（x 60 / y 450）の色を * スクロール 0 と 250 で拾うと、移行元は (141, 143, 181) のまま変わらない。 * 写しも同じ仕組みを使うので、機種による差は出ない。**`background-attachment` に * 書き換えないこと。** * * 🚨 **固定層の幅 106.25vw は移行元の切り取りに合わせるためである。**移行元の * `width: 100%` は **399px** に解決される。このページが横へ 23.44px（6.25%） * はみ出しているためである。375px で書くと `cover` の切り取りが 12px ずれ、同じ点の色が * (124, 138, 186) になって一致しない。106.25vw（= 398.44px）と書くと移行元と同じ * (141, 143, 181) になる。**固定した要素は横の巻き取りを広げないので、はみ出しは 0 のままである。** * * 🚨 **背景の絵はスマホ版専用のものである。**移行元スマホ版は 750x1334、写しが持つ * パソコン用 `bg_top_01@2x.jpg` は 2820x2976 で、縦横の比が違うので切り取りも別物になる。 * `bg_top_01-sp.jpg` として足した（移行元の中身とハッシュまで同じ）。 * * 🚨 **絵を `display: block` にするのは、行の中に置かれる分の空きを消すため。**移行元は * スマホ版共通の `img { display: block }` で block になっている。これが無いと台が * 393.5px（+8px）になる。中央寄せは移行元と同じ左右の `auto` で行う。 * * 🚨 **器の広げ方は写さない。**移行元の `margin: 0 -6.25%` は器を画面より広くし、 * このページだけ横へ 23.44px はみ出す正体になっている。写しは `calc(50% - 50vw)` で * 画面いっぱいに広げ、**はみ出しは 0 のままにする。** */ body.pa-service-page--promise .page-content__body .ttl_promise { position: relative; z-index: 0; clip-path: inset(0); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 22vh 0; } body.pa-service-page--promise .page-content__body .ttl_promise::before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 106.25vw; height: 100vh; background: no-repeat center/cover url(../images/bg_top_01-sp.jpg?ver=6de532d7f34b); } body.pa-service-page--promise .page-content__body .ttl_promise img { display: block; margin-left: auto; margin-right: auto; } /* * ------------------------------------------------------------------ * 5つの約束の区画を、移行元スマホ版の「重なりの組み」へ * ------------------------------------------------------------------ * Task #3607 の差分調査の R-3 と R-4。移行元スマホ版は * **「写真を左右へはみ出させ、その上に白い文の札を 150px 重ねる」**組みである。 * dev は写真と文を縦に並べているだけで、重なりも、はみ出しも、白い札も無い。 * * 実測（幅 375px・登場演出を出しきってから測った）: * * 見るところ 移行元スマホ版 直す前の dev * 区画どうしの間 155px（最初だけ 0） 0 * 文の札の地色 白 透明 * 文の札の上の内余白 75px（20vw） 0 * 文の札の重ね順 50 指定なし * 本文（dd）の幅 287.13px 298.13px * 写真（1 枚目） 369.13 x 373.05・左 2.94 328.13 x 339.63・左 23.44 * 写真（2 枚目以降） 349.45 x 434.83 328.13 x 416.28 * 写真の左（交互） 2.11 / 23.44px 23.44 で固定 * 札と写真の重なり 150px（最初だけ 0） 0 * * **写真 6 枚は移行元スマホ版とハッシュまで同じもの**を写しが持っている（照合済み）。 * **差は CSS だけである。**写し元は `sp/service/promise/css/style.css` 90〜147 行。 * * 🚨 **移行元の `2rem` を `2rem` のまま写さない。**移行元スマホ版は根の字が 13px なので * `2rem` は **26px** である。dev の根は 16px なので、そのまま書くと 32px になる。 * * 🚨 **段落の下の空きを「外余白」で書かない。**dev はいま `margin-bottom: 18px` を持つ。 * 外余白は文の札（`dl`）の外へ抜けるため、**写真の重なりが 150px ではなく 132px になる。** * 移行元と同じ**内余白**で書くと 150px ちょうどになる（実測で確認）。 * * 🚨 **見出しの打ち消しを同時に直す。**上の `.sections dt` は、dev の `dl` が左右 15px * 内側にあることを打ち消す `-15px` を持っていた。ここで `dl` の外余白を 0 にするので、 * **打ち消しを残すと見出しだけ器より 15px ずつ外へはみ出す。**同じ PR で 0 に直した。 * * 🚨 **写真の高さを測るときは、遅延読み込みの絵を 1 枚ずつ読み込ませてから測る。** * まとめて `scrollIntoView()` を呼ぶと最後の 1 枚しか読まれない。読めていない絵は * 属性の比で描かれ、高さが 434.83px ではなく 445〜492px になる（1 度誤読した）。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner { margin-top: 155px; } /* 「はじめに」だけは前に区画が無いので空けない。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner.sec00 { margin-top: 0; } /* * 文の札。写真より前に出し、上に 20vw の空きを取る。 * 地色は中の `div` が持つ（移行元も `.sec_inner dl div { background: #fff }`）。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner dl { position: relative; z-index: 50; margin: 0; padding-top: 20vw; } body.pa-service-page--promise .page-content__body .sections .sec_inner dl > div { background: #fff; } body.pa-service-page--promise .page-content__body .sections .sec_inner.sec00 dl > div { padding-bottom: 10vw; } body.pa-service-page--promise .page-content__body .sections .sec_inner dd { margin-left: 6.25%; margin-right: 6.25%; } /* 「はじめに」の本文だけは器の幅いっぱいに出る。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner.sec00 dd { margin-left: 0; margin-right: 0; } /* * 段落の下の空き。移行元は `padding-bottom: 2rem`（根の字 13px なので 26px）。 * **外余白ではなく内余白で書く**（上の 🚨 を参照）。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner dd p { margin-bottom: 0; padding-bottom: 26px; } /* * 写真。左右へはみ出させ、上へ 150px 引き上げて文の札の下へ潜らせる。 * `.txt_area_l` は右へ、`.txt_area_r` は左へはみ出す（交互に振れる）。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner .pic { position: relative; } /* 行の中に置かれる分の空き（8px）を消す。移行元はスマホ版共通の `img { display: block }`。 */ body.pa-service-page--promise .page-content__body .sections .sec_inner .pic img { display: block; } body.pa-service-page--promise .page-content__body .sections .sec_inner.sec00 .pic { margin: 0 -6.25%; } body.pa-service-page--promise .page-content__body .sections .sec_inner.txt_area_l .pic { margin: -150px -6.5% 0 auto; } body.pa-service-page--promise .page-content__body .sections .sec_inner.txt_area_r .pic { margin: -150px auto 0 -6.5%; } /* * 5つの約束の文の札で、パソコン版だけの強制改行を効かせない（Task #3711） * ------------------------------------------------------------------ * 移行元はパソコン版とスマホ版で**改行の位置だけ**を入れ直している。文言は同じで、 * 記録版 `1fbfa9dda` の 2 版を突き合わせると 6 枚の札の 21 段落すべてで、改行と空白を * 除いた文字列が完全に一致した。改行はパソコン版が 51 個、スマホ版が 16 個で、 * **スマホ版の 16 個はすべてパソコン版の位置に含まれる**（スマホ版だけの改行は 0 個）。 * * dev はパソコン版の本文を取り込んでいるので、携帯幅だけが 1〜4 行高くなっていた * （幅 375px の実測で 6 枚とも +30.79〜+123.19px）。 * * `inc/service-sp-promise-breaks.php` が、パソコン版だけの 35 個へ目印の類名を足す。 * ここで隠すのはその 35 個だけで、両版が同じ位置で改行する 16 個は残す。 * * 🚨 **`br` をまとめて隠してはいけない。**移行元スマホ版も 16 個の改行を持つので、 * 全部消すと今度は 6 枚とも 1〜3 行低くなる（実測ずみ）。当たり先は目印の類名に限る。 */ body.pa-service-page--promise .page-content__body .sections dd .pa-br-pc { display: none; } /* * 専任担当伴走サポートの節の題の下の空き（Task #3725） * ------------------------------------------------------------------ * 移行元スマホ版は `sp/service/multi/css/style.css` の `.sections h3 { padding-bottom: 30px }` * で、節の題の絵の下に 30px の空きを置く。dev の節の題はテキストへ組み直してあり、 * この空きを持っていなかった（幅 375px の実測で 3 節とも 30 / 8.98 / 18px）。 * * 🚨🚨 **空きは「箱」でなく「墨（実際に描かれた文字）」で測る（Task #4449）。** * この節の初版は、次に来るリード（`h5.service_sub_title`）が持つ**上の外余白 * −9.03px** を 0 に戻して、箱の空きを 30px にしていた。**それでは行き過ぎだった。** * * **移行元は節の題もリードも絵なので、箱の端がそのまま文字の端である。**dev はリードを * 文字で組み直しており、**箱の上端から文字まで半分の行送りぶんの余りがある。** * 箱で 30px にすると、**見える空きは 38.67〜50.00px** になる。 * * 幅 3 つで測り直した実測（2026-09-07 23:0x・帯を撮って画素で読んだ）: * * 幅 移行元 0 に戻した姿 負の外余白を残した姿 * --------------------------------------------------- * 749px 32.00 50.00 **32.00**（差 0.00） * 375px 31.00 38.67 **29.67**（差 −1.33） * 320px 31.00 39.00 **31.00**（差 0.00） * * 区画 2 の器の高さの差も **+16.15 / +8.19 / +7.00 → −1.88 / −0.83 / −0.70** へ入る。 * 陰性対照（区画 1 と 3）は 1px も動かない。 * * **そのため打ち消しの規則は置かない。**リードは上の * `.sections.sec02 :is(h5, h6).service_sub_title` の `margin: -2.408vw 0 -2.528vw` * を持ったままにする。**節の題の下の外余白 30px はそのまま残す**（移行元の * `padding-bottom: 30px` の写しで、この 30px と負の外余白 −9.03px の足し引きが * 移行元の文字の空きと一致する）。 * * 🚨 **この節に `h4 + h5.service_sub_title { margin-top: 0 }` を書き足さないこと。** * 書くと文字の空きが 3 幅とも 8〜18px 広がる。検査 * `tests-retired/pa-cms-service-article-reset/` が「その規則が無いこと」を見張っている。 */ body.pa-service-page--multi .page-content__body .sections > .sec_inner > h4 { margin-bottom: 30px; } /* * 1 つ目の節の写真の下の空き（Task #3725） * ------------------------------------------------------------------ * 移行元スマホ版は `.sections .ph { padding-bottom: 20px }` を節を絞らずに当てている。 * dev では 2 つ目の節ぶんだけが Task #3298 で入っており、1 つ目の節が落ちていた。 * * 🚨 **2 つ目の節へは広げない。**あちらは既にこの空きを持ち、器の高さも移行元と * 一致している（移行元の写真の器 394.44px は、dev では区分名のテキスト 49.02px と * 写真 345.42px に分かれる。合わせて 394.44px で同値）。 * * 🚨 **絵の `display: block` を消さないこと。**dev は `picture` の中の `img` が * inline のままなので、これが無いと器が絵より 8.19px 高くなる. */ body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner .ph { padding-bottom: 20px; } body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner .ph img { display: block; } /* * ------------------------------------------------------------------ * 1 つ目の節のリードと写真を、移行元スマホ版と同じ並び・同じ姿にする（Bug #4153） * ------------------------------------------------------------------ * 移行元スマホ版の `sec01_ph01.jpg` は **850x1064 の縦長**で、写真（行 0〜839）の下に * 金の明朝のリード（行 928〜1063）を焼き込んでいる。つまり移行元の並びは * **「写真 → リード → 本文」**である。 * * dev はリードを本物のテキストで持ち、順番は **「リード → 本文 → 写真」**だった。 * 3 つとも位置が違う（幅 375px・2026-09-07 01:51 に両側を実測）。 * * もの 移行元の上端 直す前の dev の上端 * 写真 692.20 878.31 * リード （絵の中） 677.06 * 本文 1122.94 759.56 * * 🚨 **すぐ上の Task #3298 の注釈は「1 つ目の節は並べ替えが要らない」と書いているが、 * これは誤りである。**焼き込みの絵の中身を見ずに、器の並び（`.txt_area` → `.ph`）だけを * 見て書かれたものとみられる。**絵の下半分にリードが入っている**ので、移行元では写真が * 先に来る。この規則で並べ替える。 * * ## 並べ替え方 * * 目指す並びは「写真 → リード → 本文」だが、リードと本文は同じ `div.txt_area` の中に * 入っている。器へ `order` を当てるだけでは、この 2 つを割って写真を差し込めない。 * **`.txt_area` を `display: contents` にして、中の 2 つを器の直接の子として扱う。** * * 🚨 **`.txt_area` は携帯幅で余白も背景も枠線も持たない**ので、`display: contents` で * 失うものが無い（`section.css` の `.txt_area_l { padding-right: 50px }` は丸ごと * `@media (min-width: 750px)` の中で、携帯幅には届かない）。 * * 🚨 **この節の器は 2 つある。**2 つ目は移行元・dev とも「写真 → 本文」で既に合って * いる。`order: -1` も `display: contents` も、既に先頭にある写真の位置を変えないので * 2 つ目には影響しない（実測で確認する）。 * * ## 絵は文言の帯を落とした写しへ差し替える * * `inc/sp-image-swap.php` が `sec01_ph01.jpg`（422x242 の横長）を * `sec01_ph01_trimmed.jpg`（850x840）へ差し替える。器いっぱいに伸ばして比を絵に任せる。 * 高さの札（242）ではなく `aspect-ratio` を使うのは、2 つ目の節（3305 行）と同じ理由である。 */ body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner { display: flex; flex-direction: column; } body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner > .txt_area { display: contents; } body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner > .ph { order: -1; } body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner .ph img { width: 100%; height: auto; aspect-ratio: 850 / 840; } /* * リードの姿。移行元の焼き込みを画素で測って出した（並べ撮り `pair-専任担当伴走サポト-01-移行元.png`・ * 端末の画素比 3。器の左端は画像で 70.3・右端 1054.7・中央 562.5）。 * * 1 行目「成婚というゴールに向かって走る」 左端 74 ・右端 1029 * 2 行目「あなたを支え続けます」 左端 79 ・右端 710 * （比較）本文の 1 行目 左端 75 ・右端 1033 * * 🚨 **寄せは左である。**中央寄せなら 2 行目の左端は 247 になるはずだが、実際は 79 で * 1 行目とも本文ともそろっている。**2 つ目の節のリードは中央寄せ**（3340 行）なので、 * まとめて当てると 1 つ目が移行元とずれる。節ごとに分けること。 * * 色は `rgb(164, 131, 72)` で、テーマの金 `#a68146` と同じとみてよい。大きさ・字間・ * 行の送りは 2 つ目の節と同じ組（44.25 / 850 * 87.5 = 4.55441vw、12.219 / 44.25 = 0.27613em、 * 90 / 44.25 = 2.033898）で、移行元が明朝の見出しをこの 1 組で組んでいることの裏づけになる。 * * ## 上下の空きは焼き込みの絵の画素から出す * * 🚨 **2 つ目の節の `padding-bottom: 40px` を写してはいけない。**あちらのリードは * 独立した絵（`sec02_txt.png`）で、移行元スマホ版の `.sections h4 { padding-bottom: 40px }` * が効く。**この節のリードは写真と同じ 1 枚の絵の中にあり、h4 が無い。**空きは絵の中の * 白い帯と、絵のあとの `.sections .ph { padding-bottom: 20px }` で決まる。 * * 絵は 850 幅を器の 328.125px へ縮めるので、1 行 = 0.38603px である。 * * 写真 行 0〜 839 324.27px * 白い帯 行 840〜 927 33.97px ← 写真とリードのあいだ * リード 1 行目 行 928〜 975 18.53px * 行のあいだ 行 976〜1015 15.44px * リード 2 行目 行 1016〜1063 18.53px * 絵のあと 20.00px ← .sections .ph の内余白 * 本文の上端 430.73px（写真の上端から） * * テキストで組むと、行の箱が墨より上下に広い（半分の行送り）。**墨 1 行の高さは 16.21px** * である（同じ組の焼き込みを持つ `point/images/sec01_ico.png` は透明度つきの PNG で、 * 墨の範囲を 1 画素の狂いなく数えられる。42 行 × 0.38603 = 16.21px。JPEG の絵で数えると * 圧縮の乱れが墨の縁に乗り、3 行ぶんほど大きく出る）。行の箱は 2.033898 × 4.55441vw = * 34.74px なので、**半分の行送りは (34.74 − 16.21) / 2 = 9.26px = 2.4696vw** である。 * * 🚨 **2 つ目の節の 2.408vw / 2.528vw をそのまま使わない。**あちらは別の絵（`sec02_txt.png`） * の墨の高さから出した値である。 * * 上の外余白は「白い帯 33.97px から、絵の内余白 20px と半分の行送り 9.26px を引いた残り」 * である。9.0588vw − 5.3333vw − 2.4696vw = 1.2559vw。 * * 下の内余白は「絵の中で 2 行目の墨が終わってから絵が終わるまでの 4 行（1.54px）＋ 絵の * あとの 20px」である。**`.ph` の内余白 20px は写真とリードのあいだへ移ってしまう**ので、 * リードの下は自分で持つ。1.54 + 20 = 21.54px = 5.744vw。 * * 下の外余白で半分の行送りを打ち消す。 * * 🚨 **裏取りは実ページで行った。**dev の `/service/multi/` を幅 375px で開き、この規則と * 差し替える写しを差し込んで測ると、写真の上端から本文の上端まで **430.71px**（移行元 * 430.74px・差 **0.03px**）になる。 */ body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner h5.service_sub_title { padding-bottom: 5.744vw; margin: 1.2559vw 0 -2.4696vw; color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.55441vw; font-weight: normal; letter-spacing: 0.27613em; line-height: 2.033898; text-align: left; } /* * 🚨 **リードの強制改行を落とす。**dev はパソコン版の 3 行の切り方（`
` 2 つ）を * 持つが、移行元スマホ版の焼き込みは 2 行（15 字 / 10 字）である。`
` を残すと * 切れ目が移行元と揃わない。落とせば 1 字ぶんの送りが 16.5 * (1 + 0.27613) = 21.06px、 * 15 字で 315.9px となり器の 328.13px に収まるので、移行元と同じ位置で折り返す。 * * 2 つ目の節ぶんは 3355 行が既に落としている。ここは 1 つ目の節に限る。 */ body.pa-service-page--multi .page-content__body .sections.sec01 .txt_inner h5.service_sub_title br { display: none; } /* * 本文の段落の強制改行を、携帯幅でだけ効かせない（Task #3725） * ------------------------------------------------------------------ * 移行元はパソコン版とスマホ版で改行の位置を入れ直している。文言は同じで、記録版 * `1fbfa9dda` の 2 版を突き合わせると、**本文 5 段落のうち差があるのは 1 つ目の節の * 1 段落目だけ**である。パソコン版は 28 文字目と 56 文字目で改行し、**スマホ版は * この本文の範囲に改行を 1 つも持たない**。残る 4 段落は両版とも改行が無く、高さも * 一致している（176.31 / 151.13 / 176.31 / 151.13px）。 * * スマホ版が 1 つも改行を持たないので、目印は要らず当たり先を絞るだけで足りる。 * 前例は 1817 行（ご入会後のプロセスの `.txt_inner p br`・Task #3400）と同じ形。 * * 🚨 **当たり先を `.txt_area` の中の段落に絞る。**このページの `
` は本文の 2 個の * ほかに、リード（`h5.service_sub_title`）に 4 個、チームサポートの担当者名に 1 個ある。 * リードの 2 個は 3133 行が 2 つ目の節ぶんだけを既に落としており、残る 2 個は焼き込みの * 絵の組み直し（裁定 79 の先送り）と一緒に扱う。担当者名の 1 個は Task #3429 が * 意図して入れたものなので触らない. */ body.pa-service-page--multi .page-content__body .sections .txt_area p br { display: none; } /* * 5つの約束の本文を、移行元スマホ版と同じ「下からせり上がる」登場にする（Task #3730） * ------------------------------------------------------------------ * 印を付ける処理（`assets/service/js/promise-fadein.js`）は幅を絞っていないので、 * `.scrollin` は携帯幅でも 18 件すべてに付く。**足りないのは CSS だけである。** * * 写しの `assets/service/css/promise.css`（201〜216 行）に同じ規則があるが、あの写しは * 丸ごと `@media (min-width: 750px)` に包まれているので携帯幅では 1 行も効かない。 * しかも写しは道具で作り直す生成物なので、手で足すとその作り直しで消える。だからここへ書く。 * * 🚨 **ずらす量は移行元の 2 版で違う。**記録版 `1fbfa9dda` の 2 版を突き合わせた。 * * public/service/promise/css/style.css … translate(0, 50px) ＋ 2 つ目に 200ms の遅れ * public/sp/service/promise/css/style.css … translate(0, 130px) ＋ 遅れは無し（153・161 行） * * 🚨 **2 つ目への遅れ（`transition-delay`）を足してはいけない。**移行元スマホ版の写しには * `transition-delay` も `nth-of-type` も 1 つも無い（ファイル全体で 0 件）。パソコン版の * 写しを見ながら足すと、移行元に無い間合いが携帯幅にだけ出る。 * * 当たり先は 5つの約束のページだけに閉じる（`pa-service-page--promise`）。`.fadein` は * 移行元の写しに由来する広い名前なので、区画の目印（`pa-page--service`）だけで書くと * ほかの 6 画面まで巻き込む。 */ body.pa-service-page--promise .page-content__body .sections .fadein { opacity: 0.1; transform: translate(0, 130px); transition: all 600ms; } body.pa-service-page--promise .page-content__body .sections .fadein.scrollin { opacity: 1; transform: translate(0, 0); } /* * パーソナル婚活プログラムの節の題の下の空き（Task #3707） * ------------------------------------------------------------------ * 移行元スマホ版は `sp/service/point/css/style.css` の 63 行 * `.sections h3 { padding-bottom: 30px }` で、節の題の下に 30px の空きを置く。 * * 🚨 **内余白で写してはいけない。**dev の題（`h4`）の指定は 3 節とも下外余白 18px だが、 * **実測の空きは 30 / 18 / 30px と節によって違う**（幅 375px・2026-09-05 実測）。 * 節 1 と節 3 は、次に来る器の 2 段下にあるリード（`h5.service_sub_title`）の上外余白 * 30px が、余白も枠線も持たない `div.txt_inner` と `div.txt_area` を突き抜けて * （外余白の相殺）題の 18px と相殺し、大きいほうの 30px になっている。節 2 は次が * 写真の器で、その中が並びの要素（`picture`）なので相殺する相手がいない。 * * **だから内余白で 30px を足すと、節 1 と節 3 が 30 + 30 = 60px に壊れる** * （内余白は相殺しない）。外余白で置けば、節 1 と節 3 は max(30, 30) = 30px のまま、 * 節 2 だけが 18 → 30px になる。直すのは実質、節 2 だけである。 * * 専任担当伴走サポート（3696 行）は同じ 30px を置くのに、次に来るリードの負の外余白を * 打ち消す規則を対にして持つ。**あちらのリードは題の隣にいて相殺の相手が違う**ので、 * この節では要らない。同じ差に見えても効き方が違う。 */ body.pa-service-page--point .page-content__body .sections > .sec_inner > h4 { margin-bottom: 30px; } /* * 写真の器の下の空きと、絵の並び（Task #3707） * ------------------------------------------------------------------ * 移行元スマホ版は `.sections .ph { padding-bottom: 20px }`（67 行）を節を絞らずに当て、 * サイト共通の `img { display: block }` で絵を行から出している。 * * dev は器の内余白が 0 で、絵が `display: inline` のままだった。並びの要素は行の中に * 置かれるため、**器が絵より 8.19px 高くなる**（幅 375px の実測。移行元は器と絵の差が * 内余白ぶんの 20px ちょうど）。空きを足すだけでは、この 8.19px が残って合わない。 * * 🚨 **絞らずに当ててよい。**この画面の写真の器は 5 つあるが、5 つ目（節 3 の * `.ph_l`）は携帯幅で `display: none` である。**描かれない器に内余白は空きを作らない** * ので、移行元に無い 20px が増えることはない（実測で確認）。 * * 1 つ目（節 1 の PDCA の図）と 4 つ目（節 3 の写真）の器の高さは、直しても移行元と * 一致しない。移行元スマホ版が**文言を焼き込んだ別の絵**を持つためで、裁定 79 の * 先送り 12 点に入っている（`inc/sp-image-swap.php` の注釈）。ここでは触らない。 */ body.pa-service-page--point .page-content__body .sections :is(.ph, .ph_l) img { display: block; } body.pa-service-page--point .page-content__body .sections :is(.ph, .ph_l) { padding-bottom: 20px; } /* * 節 1 の 2 枚目の写真の上の空き（Task #3707） * ------------------------------------------------------------------ * 移行元スマホ版はこの器にだけ `class="ph mt30"` を付け、共通の余白の道具 * （`.mt30 { margin-top: 30px }`）で 30px の空きを置く。dev の本文にその目印は無い。 * * 🚨 **当たり先は「器の中で写真が先に来るほう」で絞る。**節 1 には写真の器が 2 つあり、 * 1 つ目は `div.txt_area`（本文）のあとに来る 2 番目の子、2 つ目は器の先頭の子である。 * `:first-child` はこの 2 つ目だけに当たる。順番でなく**並びの意味**で絞るので、 * 本文と写真の前後が入れ替わったときも当たり先がずれない。 */ body.pa-service-page--point .page-content__body .sections.sec01 .txt_inner > .ph:first-child { margin-top: 30px; } /* * ------------------------------------------------------------------ * 節 1 と節 3 のリードと絵を、移行元スマホ版と同じ並び・同じ姿にする（Bug #4154） * ------------------------------------------------------------------ * 移行元スマホ版は、リードを絵の中に焼き込んでいる。**焼き込みの位置が節で逆**である。 * * 節 1 `sec01_ico.png`（850x913） … リードが**上**（行 0〜131）・ＰＤＣＡの図が下（行 222〜912） * 節 3 `sec03_ph01.jpg`（850x1064）… 写真が**上**（行 0〜840）・リードが下（行 928〜1063） * * したがって移行元の並びは、節 1 が「リード → 図 → 本文」、節 3 が「写真 → リード → 本文」である。 * dev はどちらも「リード → 本文 → 絵」だった（幅 375px・2026-09-07 01:52 に両側を実測）。 * * 節 1 移行元 図 714.92 → 本文 1087.36 dev 本文 762.20 → 図 956.52 * 節 3 移行元 写真 3925.64 → 本文 4356.38 dev 本文 3940.45 → 写真 4159.95 * * 絵も違った。dev は取り込んだ**パソコン版**の小さな絵（243x230・236x236）を**原寸のまま** * 出していた。器は 328.125px なので、右に 85px の空きが出ていた。 * * ## 並べ替え方 * * リードと本文は同じ `div.txt_area` の中にある。器へ `order` を当てるだけでは、この 2 つを * 割って絵を差し込めない。**`.txt_area` を `display: contents` にして、中の 2 つを器の * 直接の子として扱う。** * * 🚨 **`.txt_area` は携帯幅で余白も背景も枠線も持たない**ので、`display: contents` で * 失うものが無い（`section.css` の内余白は丸ごと `@media (min-width: 750px)` の中にある）。 * * 🚨 **節 1 の器は 2 つある。**2 つ目は「写真 → 説明の並び（`dl.list`）」で、移行元と既に * 合っている。2 つ目の `.txt_area` は `p` を持たず `dl.list` を持つので、`p` の `order` は * 当たらない。**当たり先を `.txt_area` の直下の `p` に絞る**ことで 2 つ目を巻き込まない。 */ body.pa-service-page--point .page-content__body .sections:is(.sec01, .sec03) .txt_inner { display: flex; flex-direction: column; } body.pa-service-page--point .page-content__body .sections:is(.sec01, .sec03) .txt_inner > .txt_area { display: contents; } /* * 節 1 は「リード → 図 → 本文」。DOM は リード → 本文 → 図 なので、**本文だけを後ろへ回す。** */ body.pa-service-page--point .page-content__body .sections.sec01 .txt_inner > .txt_area > p { order: 1; } /* * 節 3 は「写真 → リード → 本文」。**絵を先頭へ出す。** */ body.pa-service-page--point .page-content__body .sections.sec03 .txt_inner > .ph { order: -1; } /* * 絵は器いっぱいに伸ばし、比を絵に任せる。 * * 🚨 **節 1 の当たり先を `:not(:first-child)` で絞る。**節 1 には絵の器が 2 つあり、 * 2 つ目（`sec01_ph.jpg`・850x840）は既に器いっぱいで移行元と合っている。まとめて * `aspect-ratio: 850 / 691` を当てると、2 つ目の写真がつぶれる。すぐ上の Task #3707 の * 規則と同じく、**並びの意味（器の中で絵が先に来るほう）で絞る。** */ body.pa-service-page--point .page-content__body .sections.sec01 .txt_inner > .ph:not(:first-child) img { width: 100%; height: auto; aspect-ratio: 850 / 691; } body.pa-service-page--point .page-content__body .sections.sec03 .txt_inner > .ph img { width: 100%; height: auto; aspect-ratio: 850 / 841; } /* * リードの姿。移行元の焼き込みの**絵そのものの画素**を数えて出した（画面の写真ではなく * `legacy/www.p-a.jp` の記録版 `1fbfa9dda` のファイルを直接測った）。 * * 🚨 **寄せは左である。**絵の幅は 850・中央は 424.5 で、2 行の墨の左端がそろっている。 * * sec01_ico.png 1 行目 x 34〜798 ／ 2 行目 x 34〜636（中央寄せなら 2 行目は 123.5 から） * sec03_ph01.jpg 1 行目 x 8〜662 ／ 2 行目 x 8〜721 * * 🚨 **画面の写真で寄せを判定してはいけない。**画面の下に追従する帯が 2 行目を隠すため、 * 1 行目だけを見て「中央寄せ」と読み違える（2026-09-07 に実際に踏んだ）。 * * 大きさ・字間・行の送りは 2 つ目の節と同じ組（4.55441vw / 0.27613em / 2.033898）である。 */ body.pa-service-page--point .page-content__body .sections:is(.sec01, .sec03) .txt_inner h5.service_sub_title { color: #a68146; font-family: var(--pa-font-family-serif); font-size: 4.55441vw; font-weight: normal; letter-spacing: 0.27613em; line-height: 2.033898; text-align: left; } /* * 上下の空きは、焼き込みの絵の画素から出す。絵は 850 幅を器の 328.125px へ縮めるので、 * 1 行 = 0.38603px である。 * * 節 1 `sec01_ico.png` リード 1 行目 行 0〜 41 ／ 2 行目 行 90〜131 * リードの下の空き 行 132〜221 ＝ 90 行 ＝ 34.74px * 図 行 222〜912 * 節 3 `sec03_ph01.jpg` 写真 行 0〜840 * 写真の下の空き 行 841〜927 ＝ 87 行 ＝ 33.58px * リード 2 行 ＋ 絵の終わりまで 4 行 * * **墨 1 行の高さは 16.21px** である（`sec01_ico.png` は透明度つきの PNG なので、墨の * 範囲を 1 画素の狂いなく数えられる。42 行 × 0.38603 = 16.21px。JPEG で数えると圧縮の * 乱れが縁に乗り 3 行ぶんほど大きく出る）。行の箱は 2.033898 × 4.55441vw = 34.74px なので、 * **半分の行送りは (34.74 − 16.21) / 2 = 9.26px = 2.4696vw** である。 * * 節 1 は、リードが絵の先頭にある（行 0）。節の題の下の 30px は * `.sections > .sec_inner > h4 { margin-bottom: 30px }` が既に置いているので、上の外余白は * **半分の行送りの打ち消しだけ**でよい。 * * 🚨 **器を flex にすると外余白が相殺しなくなる。**いままで h5 の外余白は、余白を持たない * `div.txt_inner` と `div.txt_area` を突き抜けて題の 30px と相殺していた（Task #3707 の * 注釈）。flex の器は相殺を止めるので、30px と h5 の外余白は素直に足し算になる。 * * 節 3 は、リードが写真の下にある。上の外余白は「写真の下の空き 33.58px から、絵の内余白 * 20px と半分の行送りを引いた残り」= 8.9559vw − 5.3333vw − 2.4696vw = 1.153vw である。 * * 下の内余白は、節 1 が「リードの下の空き 34.74px」= 9.2647vw、節 3 が「2 行目の墨が * 終わってから絵が終わるまでの 4 行（1.54px）＋ 絵のあとの 20px」= 21.54px = 5.744vw である。 * 節 3 で `.ph` の内余白 20px を当てにできないのは、**それが写真とリードのあいだへ移って * しまう**ためである。 */ /* * 🚨 **節 1 のリードだけ、絵の左端から 34 画素（13.12px）内側から始まる。**節 3 は 8 画素 * （3.09px）で、ほかの画面の焼き込みも 4〜9 画素とほぼ 0 である。この画面の節 1 だけ、 * 意匠として字が右へ寄せてある。そのぶんの空きを写す（34 / 850 × 87.5 = 3.5vw）。 * * この内余白は**折り返しの位置も移行元にそろえる**。器の 328.125px から 13.12px を引いた * 315.01px に対し、1 字の送りは 4.55441vw × (1 + 0.27613) = 21.795px なので 14 字までが * 入る。移行元の焼き込みも 14 字 ＋ 11 字である。内余白が無いと 15 字が入ってしまう。 */ body.pa-service-page--point .page-content__body .sections.sec01 .txt_inner h5.service_sub_title { padding-bottom: 9.2647vw; padding-left: 3.5vw; margin: -2.4696vw 0; } body.pa-service-page--point .page-content__body .sections.sec03 .txt_inner h5.service_sub_title { padding-bottom: 5.744vw; margin: 1.153vw 0 -2.4696vw; } /* * 🚨 **節 3 のリードの強制改行を落とす。**dev はパソコン版の切り方（9 字 ＋ 16 字）で * `
` を 1 つ持つが、この姿のまま組むと 2 行目の 16 字が器に入らず **3 行**になる。 * 落とすと 15 字 ＋ 10 字の 2 行になり、行数は移行元（12 字 ＋ 13 字）とそろう。 * * 🚨 **切れ目の位置は CSS では動かせない。**移行元スマホ版は「出会いの質を高める多様な」で * 切る（12 字）が、これは意味の切れ目で入れた改行であって、器の幅による自然な折り返しでは * ない。dev の `
` は取り込んだ本文が持つものである。**Bug #4187 が * `inc/service-sp-point-lead-breaks.php` で 12 字目へ目印 * （`
`）を足し、切れ目を移行元にそろえた。** * * 🚨 **当たり先から目印を外す（`br:not(.pa-br-sp)`）。**まとめて隠すと、足した目印も * 消えて自然な折り返し（15 字 ＋ 10 字）に戻る。落とすのは本文が持つ 9 字目の `
` * だけである。 * * 節 1 の `
` は落とさない。dev の切り方（14 字 ＋ 11 字）が移行元の焼き込みと一致する。 */ body.pa-service-page--point .page-content__body .sections.sec03 .txt_inner h5.service_sub_title br:not(.pa-br-sp) { display: none; } /* * 節 1 のパソコン版だけの注記を、携帯幅で出さない（Task #3707） * ------------------------------------------------------------------ * 「※コースによっては一部サービスが含まれない場合があります。」の 1 段落は、移行元 * パソコン版の `div.ph` の中にある。**移行元スマホ版には無い**（記録版 `1fbfa9dda` の * `sp/service/point/` を実ブラウザで開き、`p.aside` が 0 件であることを確認した）。 * * dev はパソコン版の本文を取り込んでいるので、携帯幅にだけこの 50.38px が余分に出る。 * * 🚨 **`p.aside` をまとめて隠してはいけない。**この画面の注記には、移行元スマホ版が * 持つ節 2 のリスト（`ul.aside`）もある。当たり先は写真の器の中の段落に限る。 */ body.pa-service-page--point .page-content__body .sections.sec01 .ph > p.aside { display: none; } /* * 節 2 の注記のリスト（Task #3707） * ------------------------------------------------------------------ * 移行元スマホ版は `.sec02 .aside { margin-top: 10px }`（107 行）と * `.sec02 .aside li { padding-top: 15px }`（111 行）を持つ。dev は器が下に 18px の * 外余白を持ち、項目に空きが無かった。 * * 🚨 **字と行送りは `li` に当てる。**器（`ul`）に書くと、`li` に直接当たる既存の規則 * （行送り 1.8）に負けて 23.4px にしかならない（実測で 1 度踏んだ）。 * * 🚨 **移行元の CSS に書いてある 12px を期待値にしない。**移行元の * `.sections p.aside { font-size: 12px }`（59 行）は**当たり先が `p`** なので、 * この `ul` には一度も効いていない。実ブラウザで測った 13px / 26px が移行元の値である。 */ body.pa-service-page--point .page-content__body .sections ul.aside { margin: 10px 0 0; } body.pa-service-page--point .page-content__body .sections ul.aside li { padding-top: 15px; font-size: 13px; line-height: 26px; } /* * 本文の段落の強制改行を、携帯幅でだけ効かせない（Task #3707） * ------------------------------------------------------------------ * 移行元はパソコン版とスマホ版で改行の位置を入れ直している。dev はパソコン版の本文を * 取り込んでいるので、節 1 の 1 段落目だけが携帯幅で 1 行高い（幅 375px の実測で * 201.5px。移行元スマホ版は改行を 1 つも持たず、幅 328.13px で自然に折り返して * 176.31px になる）。 * * 🚨 **当たり先を `.txt_area` の中の段落に絞る。**専任担当伴走サポートの同じ直し * （3743 行）と同じ形である。写真の器の中の注記や、リードの中の改行を巻き込まない。 */ body.pa-service-page--point .page-content__body .sections .txt_area p br { display: none; } /* * 活動の 4 段階（PDCA）の説明文の強制改行を、携帯幅でだけ効かせない（Bug #3882） * ------------------------------------------------------------------ * 上の直し（Task #3707）は当たり先を `.txt_area` の中の**段落**に絞ったので、 * 同じ `.txt_area` の中にある `dl.list` の**説明文**（`dd`）には当たらない。 * * 移行元はパソコン版の `dd` 4 つのうち 3 つに `
` を持ち（`service/point/index.html` * 106・108・112 行）、**スマホ版は `dd` の中に `
` を 1 つも持たない** * （`sp/service/point/index.html` を全数検索して 0 件）。dev はパソコン版の本文を * 取り込んでいるので、その 3 つがそのまま効いている。 * * 幅 375px の実測（移行元 = 本番を 2026-09-05 17:5x に携帯の名乗りで取得。 * dev = 18:3x・4 つの説明文を上から順に）: * * 1 活動設計 49 字 移行元 96.56 / dev 96.56 差なし * 2 紹介 50 字 移行元 96.56 / dev 121.75 **+25.19px（1 行ぶん）** * 3 振り返り 51 字 移行元 96.56 / dev 96.56 差なし（両側とも `
` が無い） * 4 見直し 50 字 移行元 75.56 / dev 75.56 差なし * * **見た目に出ているのは 2 番目だけである。**1 と 4 の `
` は、ちょうど自然に * 折り返す位置にあるので高さが変わらない。2 番目だけが「お相手を探し、」の後ろで * 早く折り返し、1 行増える。 * * 🚨 **`br` をページ全体で隠さないこと。**移行元スマホ版は `
` を 7 つ残しており * （すべて `

` の中。実測で `dd` の中は 0 件）、全体に当てるとその 7 つまで消える。 * 当たり先を `.txt_area` の中の `dl.list` の `dd` に絞る。 * * 🚨 **2 番目だけに絞らない。**移行元スマホ版は 4 つとも `
` を持たないので、 * 4 つとも消すのが移行元と同じ姿である。1 と 4 は高さが変わらないので害は無い。 */ body.pa-service-page--point .page-content__body .sections .txt_area dl.list dd br { display: none; } /* * 5つの約束の登場演出を、動きを控える設定のときは伏せない（Bug #3114・携帯幅） * ------------------------------------------------------------------ * 携帯幅の伏せる指定は、この塊の中の `pa-service-page--promise` の `.fadein` * （`opacity: 0.1` ＋ `translate(0, 130px)` ＋ `transition: all 600ms`）である。 * それを打ち消す。パソコン幅の分はパソコン幅の塊の末尾に置いている。 * * 🚨 **当たり先をパソコン幅と同じ書き方にしない。**携帯幅の伏せる指定は * `body.pa-service-page--promise` で始まるので、パソコン幅の書き方 * （`body .pa-page--service`）だけでは詳細度が同じでも当たり先が違い、打ち消せない。 */ @media (prefers-reduced-motion: reduce) { body.pa-service-page--promise .page-content__body .sections .fadein { opacity: 1; transform: none; transition: none; } } }