`）は、移行元
* public/css/page_introduce.css の `#story .story_inner .archive_ttl`
* （233〜239 行）で下に 30px を持つ。テーマの写し（main.css の `.archive_ttl`）も
* 30px を持つが、§3 の `margin: 0` と同じ「クラス 1 個 + タグ 1 個」ではなく
* 「クラス 1 個」なので、そのままだと §3 に負けて 0 になる.
* -------------------------------------------------------------- */
.page-content .page-content__body .archive_ttl {
margin-bottom: 30px;
}
/* --------------------------------------------------------------
* 5. WordPress が出すページの題名を出さない
*
* 移行元は題名をその位置に持たない。ページ上部の帯（``）と
* 区画の見出し（`
婚活アンケート Vol.1
`）が * 題名の役をしている。そのままだと題名が二重に出る（Issue #2196 の * 「ページの題名が二重に出る」）. * -------------------------------------------------------------- */ .page-content__header { display: none; } /* -------------------------------------------------------------- * 6. ページ上部の帯 * * 移行元 public/css/style.css の `#contents .main_ttl`（1311〜1315 行）は * `margin: 0 auto; width: 1268px; height: 170px` である。**帯の画像そのものは * 1,270 × 170px で、宣言された 1,268px より 2px 広い**（本文の書き出しも * `width="1270"` と書いている）。画面に見えるのは画像の 1,270px なので、 * 上限をそちらに合わせる。 * * 高さは書かない。**移行元は 170px を固定しているが、CMS では帯の画像を * 差し替えられる。**高さを固定すると、縦横比の違う画像に替えたときに切れるか * 隙間が空く。上限の幅だけを決め、高さは画像の比に任せる（テーマの土台が * `img { max-width: 100%; height: auto }` を持つ）。 * * 下の外余白を 0 にするのは、テーマが「中身が画像 1 枚だけの見出し」に 25px を * 置くためである。移行元の帯はすぐ下の案内メニューに接する. * -------------------------------------------------------------- */ .page-content .page-content__body .main_ttl { max-width: 1270px; margin: 0 auto; } /* * 帯の画像を行の上端にそろえる。 * * §3 で画像の並びを移行元と同じ baseline に戻したため、文字の下がりぶんの隙間 * （約 3px）が帯の下に付く。移行元はその隙間を、高さを 170px に固定して外へ * 追い出していた。**高さを固定せずに同じ結果を得るため、画像を行の上端へそろえる。** * これで帯の高さは画像の高さそのものになる（移行元の 170px と同じ）。 * * 移行元も、同じ会員紹介の別ページで同種の手当てを持っている * （public/css/page_introduce.css の `#introduce_top h2 { line-height: 0 }`）. */ .page-content .page-content__body .main_ttl img { vertical-align: top; } /* -------------------------------------------------------------- * 7. 中身が変わっても崩れないための歯止め * * 移行元と同じ見た目にするだけでは足りない。CMS では設問の数・回答の文章の * 長さ・円グラフの有無が変わる。写し元は固定値で組んでいるので、変動に耐える * 手当てを置く。 * * なお移行元の詳細 10 本は、いずれも設問 1 問・円グラフ 1 枚である（実測で * 数え上げた）。設問を増やした形は移行元に無いので、**写し元の値を変えずに * 「増やしても積み上がる」ことだけを保証する。** * -------------------------------------------------------------- */ /* * 器の固定幅を、画面が狭いときの上限で抑える。 * * 写し元は `#story` と `.wd_1100` を 1,100px の固定値で書いている。§1 で本文の柱の * 制限を外したので、そのままだと画面が 1,100px より狭いときに横スクロールが出る。 * **上限を足すだけなので、1,100px 以上の画面では移行元と同じ 1,100px のままである。** * * 一覧のカードの器（`.story_inner`）には書かない。移行元では 1,100px の指定を * 持つが、その器は `#story` の中に入る幅の指定を持たない区画なので、`#story` を * 抑えれば一緒に収まる. */ .page-content .page-content__body #story, .page-content .page-content__body .wd_1100 { max-width: 100%; } /* * 画面内ナビの帯の下の外余白を、移行元と同じ 0 に戻す（Bug #4581）。 * * 【移行元の値】共通 CSS の `#contents .category_menu`（`public/css/style.css` * 1324〜1330 行）は `margin: 0 auto` で、**下の外余白を持たない**。 * * 【テーマの値】一般の規則（`main.css` の * `:is(.entry-content, .page-content__body) .category_menu`）が * `margin: 0 auto var(--pa-space-sm)` を当てる。幅 750px 以上でこの値は **40px** である。 * * 【なぜ 5px だけずれるか】帯のすぐ下に来る区画 `#story` の 1 つ目の子 * （`p.main_copy`）が上の外余白 **35px** を持ち、`#story` は内余白も枠も持たない * ので**その 35px は `#story` を通り抜けて外へ出る**（外余白の相殺）。 * 相殺した外余白は隣り合うものの最大値になるため、 * * 移行元: max(0, 35) = 35px → `#story` の上端 447px * dev : max(40, 35) = 40px → `#story` の上端 452px（＋5px） * * となり、**節の見出しの帯より下のすべてが 5px 下がっていた**（実測: 幅 1440px・ * 移行元 1102.75 / 1338.31 / 1529.69 に対し dev は 1107.75 / 1343.31 / 1534.69）。 * * 🚨 **一般の規則そのものは直さない。**`.category_menu` は移行元由来の共通クラスで、 * 会社情報のタブ 22 ページ・会員紹介・リリース・採用配下にも出る。それらは移行元の * 値をまだ測っていない（`main.css` の同趣旨の注記が、入会案内だけに絞った理由として * 同じことを書いている）。**このファイルは婚活アンケートの 11 ページにしか配られない** * ので、ここで絞る。 * * 🚨 **幅 750px 以上に閉じる。**749px 以下ではこの帯を出しておらず（実測: 幅 375px と * 320px に `.category_menu` は 1 つも無い）当たり先が無いため、いま足しても効かない。 * それでも囲むのは、**将来この帯を携帯幅で出すことになったときに、パソコン版の値が * そのまま当たるのを防ぐ**ためである（移行元は 749px 以下で別のページ * `/sp/introduce/survey/` を返し、そちらの値は測れない）。テーマの一般の規則も * 749px 以下では 20px（`--pa-space-sm`）に切り替えている。 * * 【台帳の確認】`docs/pa-cms/design/意図的変更の台帳.md` を数字（`1200` `1280` * `1279` `1296`）と「はみ出」「対応幅」で引いた。関わる行は 2 つあるが、どちらも * この直しを止めない。**134 行**は同じ帯を扱うが「残るのは**帯の幅**だけ」と明記して * おり、下の外余白は対象外である。**93 行**（裁定 346）は幅 1,200px の 80px の * はみ出しを承認したもので、こちらは高さの話である. */ @media (min-width: 750px) { .page-content .page-content__body .category_menu { margin-bottom: 0; } } /* * 【追加の指定を置かない箇所とその理由】 * * 設問の升目（`.survey_table`）には、ここで何も足さない。写し元は升目 * （display: table）で組み、円グラフの側（`.survey_g`）に 200px を与えている。 * 升目の割り付けは中身の最小幅を下回れないので、次の 3 つはそのままで成り立つ。 * * 設問を増やす … 升目が縦へ積み上がるだけである（写し元の * `margin: 40px 0 0 0` が升目どうしの間隔を作る） * 回答の文章が長い … 設問の側（`.survey_q`）に幅の指定が無く、残り幅を取る * 円グラフが無い … 空の升目は 200px の列として残り、設問の側の幅は変わらない * * 🚨 **円グラフの画像だけは、幅 750px 以上でテーマの土台の上限を外している** * （下の「円グラフを実寸で描く」の節。Bug #2867）。差し替えた画像が升目より * 広いときは、升目の側が画像に合わせて広がる（移行元と同じ振る舞いである）。 * 幅 749px 以下では上限を外していないので、狭い画面のはみ出しは今も防がれる。 * * **このファイルと写し（style.css）には、固定の高さ（height）を 1 つも書かない。** * 高さを固定すると、中身が増えたときに文字が枠から出る. */ /* * 狭い画面の手当て。 * * **写し元にはメディアクエリが 1 つも無い。**移行元は狭い画面向けに別のミラー * （/sp/introduce/survey/）を配っており、パソコン版の CSS は幅を固定値で書いて * いた。そのミラーは分類の正本で「他ページへ統合」＝移行後に存在しないため、 * **狭い画面で数値を合わせる相手が無い**（Issue #2196 の受け入れ条件も、携帯幅は * 移行元との数値一致を求めていない）。したがって「あふれない・重ならない・ * 読める」を満たす手当てだけを置く。 * * 境目の 749px は、テーマが本文の文字の大きさを切り替える境目と同じである * （main.css の @media (max-width: 749px)）. */ @media (max-width: 749px) { /* 設問と円グラフの 2 列を、縦に積む。 */ .page-content .page-content__body .survey_table, .page-content .page-content__body .survey_q, .page-content .page-content__body .survey_g { display: block; width: auto; } /* 縦に積んだ円グラフは中央へ置く（移行元の 2 列組みでは右端に来る）。 */ .page-content .page-content__body .survey_g { margin-top: 20px; text-align: center; } /* * 設問の見出しは 22px のままだと 2 行で窮屈になるため、1 段落とす。 * * 🚨 **値は移行元スマホ版の実測へそろえてある（19.5px・Bug #6326）。**もとは 19px * だったが、移行元スマホ版を幅 375px で測ると 19.5px で、0.5px 小さかった * （2026-09-09 18:07 の実測・控えは `pa-verify-assets/f15-body-5307/after3-5307.tsv` * の `introduce/survey/survey010` の行。当たり先は両側とも `dl.listAnswer > dt` で * 一致し、`dd` は 14px で差 0）。 * * 🚨 **この節の冒頭にある「携帯幅は移行元との数値一致を求めていない」は、 * 組み方（2 列を縦に積む）についての話である。**字の大きさは Bug #5332 以降、 * 移行元スマホ版の実測へそろえる方針に変わった（同じ親から #6323 ほか）。 * * 🚨 **移行元の宣言そのものは特定できていない。**写しの * `sp/introduce/survey/css/style.css` は `font-size: 1.5rem` と書いているが、 * このページが読む 4 本のどれにも `html` への `font-size` が無く、根が既定の 16px * なら 24px になって実測の 19.5px と合わない（19.5px は 13px × 1.5）。 * **写しが本番より古い公算が高い。**本番の CSS との照合は後日行う. */ .page-content .page-content__body .survey_table .listAnswer dt { font-size: 19.5px; } /* 節の見出しの帯も同じ理由で 1 段落とす（写し元は 24px）。 */ .page-content .page-content__body .title_style05 { font-size: 19px; } /* 定義リストの外余白 1em は、狭い画面では左右が効きすぎる。 */ .page-content .page-content__body dl { margin-left: 0; margin-right: 0; } /* 回答の一覧の字を、移行元スマホ版と同じ 13px にする（Bug #5332）。 移行元は `sp/introduce/survey/css/style.css` の 141 行で `dd` を 14px と宣言するが、 **一覧の項目は `li` で、`sp/css/basic.css` の 3〜23 行の初期化が `li` へ直に 13px を 宣言する。**親の `dd` が 14px でも `li` には受け継がれないので、画面に出るのは 13px。 dev は `dd` の 14px を `li` が受け継いで 14px で描いていた（差 +1px）。 🚨 器（`dd`）どうしを比べると両側 14px で「差なし」に見える。字が出る `li` で測る。 10 巻すべてで同じ（`survey001`〜`survey010` は読む CSS 4 本が完全に同一で、値を 決める規則もこの 1 本だけ。巻ごとに絞る印は要らない）。 */ .page-content .page-content__body .survey_table .listAnswer dd li { font-size: 13px; } /* 設問の見出しと説明の内余白・太さ・字送りを、移行元スマホ版へそろえる（Bug #6350）。 このファイルの 171・179 行が `.page-content__body` の `dt` / `dd` を `padding: 0; font-weight: normal` で初期化している。**その注釈は移行元の パソコン版だけを読んで書かれており**、移行元スマホ版は次の 4 本を持つ。 sp/css/style.css 1587 行 dt { padding: 10px 6.25%; font-size: 15px } sp/css/style.css 1616 行 dd { padding: 10px 6.25% } sp/introduce/survey/css/style.css .survey_table .listAnswer dt { font-weight: bold } 同上 .survey_table .listAnswer dd { padding-top: 0 } 🚨 **`dd` の上は 0 である。**`padding: 10px 6.25%` をそのまま写すと、移行元に無い 上の余白 10px を足すことになる。効いている最後の値は上 0 / 右 6.25% / 下 10px / 左 6.25% で、`dt` とは違う。 🚨 **字送りは `style.css`（ページ専用の写し）が全幅へ効かせている。**あちらは 移行元パソコン版の `letter-spacing: 0.1em` を写したもので、`@media` を 1 つも持たない。 移行元スマホ版の `.survey_table .listAnswer dt` は字送りを宣言しないので、ここで `normal` へ戻す。詳細度は同じ (0,4,1) だが、このファイルが後に読まれるので勝つ （`inc/introduce-survey.php` の依存は pa-main → pa-introduce-survey → pa-introduce-survey-bridge）。 実測（2026-09-15 23:38:56〜23:39:04・幅 375px・両側 200・控えは `pa-verify-assets/d7-6327-0915/`）: 見出しの左右の内余白 移行元 23.4375px / dev 0 （= 6.25% × 375） 見出しの上下の内余白 移行元 10px / dev 0 見出しの高さ 移行元 76.5 / dev 56.5 （上下の 10px × 2） 見出しの太さ 移行元 700 / dev 400 見出しの字送り 移行元 normal / dev 1.95px （= 0.1em × 19.5px） 番号の札の左端 移行元 23.44 / dev 0 説明の中の項目の左端 移行元 23.44 / dev 0 🚨 **器（`dd`）どうしを比べても差は出ない。**左右の内余白を落としても親の幅いっぱい （両側 375px）のままで、動くのは中の字だけである。字が出る `li` と `em` で測ること。 */ .page-content .page-content__body .survey_table .listAnswer dt { padding: 10px 6.25%; font-weight: bold; letter-spacing: normal; } .page-content .page-content__body .survey_table .listAnswer dd { padding: 0 6.25% 10px; } /* 設問の番号の札を、移行元スマホ版と同じ細字にする（Bug #5334）。 移行元スマホ版は `sp/css/basic.css` の 3〜23 行で、`em` を含む全要素へ `font-weight: normal` を**直に**宣言する。**携帯版には太字へ戻す規則が無い**ので、 親の `.listAnswer dt` が `font-weight: bold` でも `em` は 400 で描かれる。 dev は `em` の太さをどこにも宣言していないため親から受け継ぎ、700 になっていた。 パソコン幅は移行元も 700 である（`css/common.css` 287 行の `em, strong { bold }` が 全体を太字へ戻す）。実測でも 1440px は両側 700 で一致していたので、帯の中だけで直す。 🚨 **幅だけで分けた共通部品にしてはいけない。**「携帯幅の `em` は 400」は移行元の `/sp/` の下にある携帯版だけの話である。ご入会の流れ（`/guidance/sp/step2.html`）は `guidance/sp/common/css/` の 3 本しか読まず `sp/css/basic.css` を読まないので、 移行元も dev も両方の幅で 700 のまま一致している（実測・2026-09-10）。 素で `em { font-weight: 400 }` を当てると、そちらが 400 に落ちて新しい差になる。 🚨 **`strong` は写さない。**移行元の規則は `em, strong` の組だが、パソコン幅で `strong` を太字にするのは閲覧環境の既定と同じで何もしないのと同じであり、携帯幅で 400 に落とすと写しの携帯版の `` 708 個・75 ページが動く（1 か所も測っていない）。 */ .page-content .page-content__body .survey_table .listAnswer dt em { font-weight: 400; } /* 🚨 **巻数の札は移行元スマホ版では地の絵も地色も持たない金茶の文字である。** 写し元は移行元リポジトリ www.p-a.jp（`main`・固定コミット 1fbfa9dda）の `public/sp/introduce/survey/css/style.css`: .list_box li .list_detail span.num { margin-bottom: 8px; color: #a3762b; font-size: 14px; line-height: 100% } .list_box li .list_detail span { display: block } 同じファイルで地の絵を持つのは `span.archive` だけである （`background-image: url(../images/bg_num.jpg)`）。パソコン版だけが白抜きの金の バッジで、`main.css` の共通指定（`:is(.entry-content, .page-content__body) :is(.list_box, .list_box_new) li a .list_detail span.num`）がそれを当てている。 🚨 **その共通指定は `@media` の外にあるため携帯幅にも効く。**実測（幅 375px）では 札が 28px（行送り 16px ＋ 上下の内余白 6px）・下の外余白 10px になり、移行元の 14px・下 8px に対して 1 行ごとに 16px 高くなっていた。一覧は 10 行なので +160px。 🚨 **`background-color: transparent` では地の絵が消えない。**共通の側が `background: url(...) repeat` のまとめ書きで敷いているためである（Bug #5020 の型。 `main.css` の同じ経緯の注釈も参照）。**`background` のまとめ書きで消す。** 【同じ型の直しの 4 か所目】`main.css` 55804 行（成婚ストーリーの詳細の関連記事）・ 77898 行（QOM総研の関連記事）・57266 行（成婚ストーリーの一覧）が既に同じ形を 採っている。いずれも `@media (max-width: 749px)` の中で地の絵を消し、金茶・14px （55804 行は 13px）にそろえている。 【当てる範囲】このファイルは `inc/introduce-survey.php` が投入時のメタ `_pa_source_url_path` で婚活アンケートの 11 ページにだけ読み込む。さらに移行元の 11 ページを数えると `list_box` と `span.num` を持つのは入口 1 ページだけで、詳細 10 ページは 0 件である（PC 版・携帯版の両方で確認）。**当たるのは入口 1 ページ。** 【詳細度】共通の側はクラス 4 個 ＋ 要素 3 個。こちらはクラス 5 個 ＋ 要素 3 個で 勝つ。読み込み順も `pa-main` → `pa-introduce-survey` → このファイルで後になる. */ .page-content .page-content__body .list_box li a .list_detail span.num { display: block; margin-bottom: 8px; padding: 0; background: none; color: #a3762b; font-size: 14px; line-height: 100%; } /* 🚨 **一覧の箱は左右 6.25% ぶん内側へ寄る。**写し元は同じファイルの `#survey .box { padding: 25px 6.25% 32px }` の左右だけである（上下の 25px と 32px は dev 側が別の形で持っているため写さない）。375px × 6.25% = 23.4375px で、移行元の 実測の左端 23.44px と一致する。 🚨 **親（`div.story_inner`）の内余白で寄せてはいけない。**実測（幅 375px）では 見出し `h4.archive_ttl` の幅も 375 から 328.13 へ狭まり、行送り 30px の見出しが 1 行から 2 行（30 → 60）に折り返した。移行元の見出しは 20px の 1 行なので、 ページ全体の差が +1 で収まらず +31 に増えた。**一覧の箱そのものへ外余白を置く。** 一覧の幅が移行元と同じ 328.13px になると、10 行目の題 「お相手から見られている意外なマナー…」が移行元と同じ 2 行に折り返す （dev は幅 375px だと 1 行で 26.09px 低かった）. */ .page-content .page-content__body #story .story_inner .list_box { margin-right: 6.25%; margin-left: 6.25%; } } /* -------------------------------------------------------------- * 円グラフを実寸で描く（Bug #2867） * * 移行元は円グラフの画像を**実寸 260px** で描き、**升目の側がそれに合わせて * 260px へ広がる**（表組みの升は中身より狭くなれない）。写し元は円グラフの列に * `width: 200px` を与えているが、これは下限の目安として働く。 * * dev は 200px に縮んでいた。**テーマの土台が `img { max-width: 100%; height: auto }` * を持つため、画像が升の 200px に押し込まれる**（移行元の `img` に上限は無い）。 * そこでこの画面の円グラフに限って上限を外す。**土台は外さない**（全ページの * 画像が親の幅を超えて崩れる）。 * * 移行元の実測（幅 1440px・詳細 Vol.1）: 円グラフ 260 × 297・円グラフの升 * 260 × 304.1・設問の升 840 × 304.1・升目ぜんたい 1100 × 344.1。 * dev（直す前）: 200 × 228.5 / 200 × 235.5 / 900 × 235.5 / 1100 × 275.5。 * * 🚨 **幅 750px 以上に閉じる。**幅 749px 以下は上の節が升目を縦積みにして * `width: auto` にするため、**すでに実寸 260px で描かれている**（700px と 375px の * 両方で実測）。上限を外す必要が無く、外すと差し替えた画像で狭い画面がはみ出す。 * * 🚨 **高さは書かない。**画像ごとに 236〜317px と違い、縦横比は画像に任せる * （このファイルと写しには固定の高さを 1 つも書かない決まり）. * -------------------------------------------------------------- */ @media (min-width: 750px) { .page-content .page-content__body .survey_g img { max-width: none; } }