/* * 婚活川柳のページ群（/senryu/）の境目の調整。 * * 写した写し元の CSS（senryu.css）と、テーマ共通の CSS がぶつかる箇所だけを * ここに書く。写し元の規則そのものは senryu.css にあり、手で書かない。 * * ------------------------------------------------------------------ * 柱を外す理由 * ------------------------------------------------------------------ * テーマは固定ページの本文へ max-width: 1100px の柱を当てている。ところが * 移行元の婚活川柳は、外側の器（#contents）が画面いっぱいに広がり、その中の * .block だけが 1100px（投票のページは 980px）に収まる二段構えである。 * * この違いは実測で出ている（2026-08-27・幅 1440px・Bug #2314）。 * * .title / .main_copy / .text_menu / .senryu_list … 移行元 1440px → dev 1100px * .main_read … 移行元 1210px → dev 1100px * .block / .corner_ttl / .rank-list … 移行元 980px → dev 1100px * .senryu_body … 移行元 787px → dev 1100px * * 移行元で 1440px に広がる器は、CSS に幅の指定を持たない。親の全幅へ広がった * 結果である。つまり幅の規則を写すだけでは足りず、柱そのものを外す必要がある。 * * ------------------------------------------------------------------ * max-width: none だけでは足りない理由 * ------------------------------------------------------------------ * max-width を外しても、広がるのは親の幅までである。移行元は画面いっぱいなので、 * 画面幅そのものへ広げる書き方が要る。テーマは成婚ストーリーで同じ形を使う * （main.css の .entry-content .story_inner）。ここでは全幅なので 50vw で書く。 * * 横に飛び出したぶんは、body の側で隠す。これもテーマが会員の声で使う形に * そろえている。 * * **その指定はここには無い。**5 区画で中身が 1 文字も違わなかったため、 * `assets/css/section-fullwidth.css` の 1 本へまとめた（Task #2454）。この区画は * `inc/senryu.php` が `PA_SENRYU_MEDIA`（1117px 以上）でその 1 本を配る。 */ /* * ------------------------------------------------------------------ * 箱の数え方を移行元にそろえる * ------------------------------------------------------------------ * 移行元は幅の指定を「中身の幅」として数える（content-box）。このテーマは * 「余白と枠を含めた外形」として数える（border-box）。同じ width の値でも * 外形が変わるため、写した規則をそのまま当てても寸法が合わない。 * * 実測（2026-08-27・幅 1440px・#senryu の中の 234 要素）: * * 移行元 … content-box 234 件 / border-box 0 件 * dev … content-box 0 件 / border-box 234 件 * * 差の出かたも一致している。.senryu_body は移行元が width 687px ＋ 左右の * 余白 50px で外形 787px になるのに対し、dev は外形 687px になっていた * （差はちょうど余白 2 つぶんの 100px）。.note と .under_menu も同じ 100px * だった。 * * 写した規則が効く範囲の中だけで、移行元と同じ数え方へ戻す。 */ body .pa-page--senryu .page-content__body, body .pa-page--senryu .page-content__body * { box-sizing: content-box; } /* * ------------------------------------------------------------------ * 移行元のサイト共通 CSS（css/style.css）から写した 2 つ * ------------------------------------------------------------------ * この 2 つは、婚活川柳の専用 CSS（css/page_senryu.css）ではなく、移行元の * サイト共通 CSS（css/style.css）が決めている。テーマにはこの共通 CSS の写しが * 無いため、婚活川柳のページで差になっていた（2026-08-27 実測・Bug #2314）。 * * .page_topArea … 移行元 幅 1100px（x=170） → dev 幅 1440px（x=0） * .page_top … 移行元 幅 50px（x=1220） → dev 幅 1100px（x=170） * * .page_top は float: right だけを写す。テーマは移行元の float: right を * text-align: right へ置き換えて既に持っているが（main.css の 778〜783 行）、 * その置き換えでは箱の外形が行いっぱい（1100px）に広がる。移行元は float に * よって中身の画像ぶん（50px）まで縮む。**外して測ると 50px → 1100px に * 広がることを実測で確かめた**ので、float そのものを写す。 * * **同じ差は、この共通 CSS のクラスを使う他のカテゴリーにも出るはずである。** * 本来はテーマ共通の側で写すべきものだった。 * * ✅ **この 2 つは共通側へ移し終えている（Issue #2322）。この節に残っている規則は * 無い。**下の注釈のとおりで、消すものはもう無い。**この節の説明は、共通側の * 「本文の末尾に置かれた『ページの先頭へ戻る』」がどういう実測から来たかの * 覚え書きとして残してある。** * * 🚨 **前の版は「撤去の宛先は #2363」と書いていたが、二重に誤っていた * （2026-09-09 に訂正）。**①移したのは #2363 ではなく #2322 で、 * ②その移し替えは既に済んでいる。#2363 は 2026-08-28 に「完了」として閉じられたが、 * 別の規則（サービス紹介の題名帯）は移していない。そちらの撤去は Bug #3327 が * 受け持つ（このファイルではずっと下の「字の大きさの 3 つ」の節）。 */ /* * .page_topArea と .page_top の暫定はここから外した（Issue #2322）。 * テーマ共通の側（main.css の「本文の末尾に置かれた『ページの先頭へ戻る』」）へ * 写したためである。囲みの幅は width ではなく max-width で書いてある。 */ /* * ------------------------------------------------------------------ * 投入が落とすインライン style の代わり * ------------------------------------------------------------------ * 移行元の /senryu/ は、導入文へ `style="text-align: center;"` を直接書いて * 中央寄せしている。投入の許可属性は class / id / lang / dir / title だけで、 * style は落ちる（scripts/pa-cms/sanitize_html.py）。そのため dev では左寄せに * なっていた。 * * 落ちた指定と同じものを CSS で当て直す。**移行元の見た目を変えていない。** */ body .pa-page--senryu .page-content__body .main_read { text-align: center; } /* * ================================================================== * 移行元のサイト共通 CSS の写し（Bug #2351） * ================================================================== * **この節の `#side_menu` 一式は、テーマの共通側（main.css）へは写さない。 * ここが正しい置き場である。**かつては「共通側へ写したら、まるごと消す暫定」と * 書いてあったが、Task #2552 で実際に写してみて成り立たないと分かったため、 * 位置づけを改めた（2026-08-31）。 * * ## なぜ共通側へ写さないか（3 つ） * * 1. **このファイルは幅 1117px 以上でしか配られない**（読み込む条件は * inc/senryu.php の PA_SENRYU_MEDIA）。**main.css はどの幅でも配られる。** * 共通側へ写すと携帯幅にも当たり、273px の固定幅や「区画を閉じる」指定が * 狭い画面へそのまま乗って組みが壊れる。**実際に一度この穴を開けた** * （回の一覧の区画が狭い画面で全部閉じ、リンクへたどり着けなくなった） * 2. main.css へ `(min-width: 1117px)` を書き足す手も採らない。この 1117px は * 「器 1100px + スクロールバーの幅 17px」の導出を持ち、**正本は senryu.php の * 定数**である。数値を写すと、定数を変えたとき黙ってずれる * 3. **そもそも共通の部品ではない。**当たるのは婚活川柳だけで、しかも門の * 内側でしか意味を持たない * * これは Spike #2497 の「決めること 2（どこへ写すか）」の結論である。 * * ## 🔴 同じ部品の写しがもう 1 か所ある * * お客様の声（main.css の `.voice_list #side_menu`・Issue #1620）である。 * **片方だけ直すと見た目が食い違う。**どちらかを触るときは必ずもう一方も見ること。 * * 共通: dt ／ dt span の印 ／ dd の枠線 ／ .list_year 一式 ／ 開閉の JavaScript * 違う: 囲みの幅（あちらは 24.8% の割合・こちらは 273px の固定） * * 幅が違うので 1 つにまとめない（Spike #2497 の「決めること 3」の結論）。 * * なお `.text_menu` は事情が違い、**共通側（main.css）へ写し済みである** * （Task #2546・PR #2549）。あちらは婚活川柳のほかに QOM総研とニュース一覧にも * 出る、本当の共通部品だからである。**同じ「移行元のサイト共通 CSS の写し」でも、 * 出るページの広さで置き場が分かれる**と覚えておくとよい。 * * ## 何が起きていたか（2026-08-27・幅 1440px で実測） * * 移行元は左の目次と右の一覧を回り込みで横に並べる。dev では次の 3 つが * 効いておらず、**婚活川柳 87 ページで要素どうしが重なっていた。** * * #side_menu の回り込み … 移行元 float:left 幅 273px → dev float なし 幅 1100px * 回り込みの清算 … 囲む器の高さ 2144px → dev 416px（はみ出して脚注に重なる） * * **2 つとも移行元の `css/style.css`（40KB）と `css/common.css` にある。** * ページ専用 CSS（`css/page_senryu.css`）の写し漏れではない。 */ body .pa-page--senryu .page-content__body #side_menu { /* 🔴 開閉の JavaScript（assets/js/voice-nav.js）へ「**この囲みには畳む CSS が 届いている**」と伝える印。**この印はこのファイルの中でだけ立てること。** 印が伝えるのは「畳む CSS が届いているか」だけである。**どのページへ JavaScript を配るかは PHP が決める**（functions.php。回の一覧には配らない）。 2 つは別の判断なので、片方だけを見て配線を決めない。 このファイルは幅 1117px 以上でしか配られないので、印もその幅でだけ立つ。 畳む CSS（下の .pa-voice-nav の節）も同じファイルにあるため、**畳む CSS が 届く幅でだけ配線される**という対応が保てる。 共通側（main.css）へ移すと、畳む CSS が届かない狭い画面でも配線され、 見出しが押しボタンとして印付けされるのに何も開閉しない状態になる （支援技術には「閉じている」と伝わるのに実際は開いている）。理由の詳細は JavaScript 側の isWirable の注釈にある. **画面幅の数値をこのファイルや JavaScript へ書かない。**門の正本は inc/senryu.php の PA_SENRYU_MEDIA である. */ --pa-nav-accordion: 1; float: left; width: 273px; border-top: 1px solid #ccc; } body .pa-page--senryu .page-content__body #side_menu dl { margin: 0; clear: both; } body .pa-page--senryu .page-content__body #side_menu dt { padding: 0 10px; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; border-bottom: 1px solid #ccc; } body .pa-page--senryu .page-content__body #side_menu dt span { display: block; padding: 19px 0; background: url("../images/icon_close.png?ver=771f38aac83c") no-repeat right center; } body .pa-page--senryu .page-content__body #side_menu dt span.active { background-image: url("../images/icon_open.png?ver=ad200459b416"); } body .pa-page--senryu .page-content__body #side_menu dd { margin: 0; padding: 19px 0 4px; border-bottom: 1px solid #ccc; } /* 🔴 既定で閉じるのは「回の一覧」の並びだけにする。 * * 移行元は #side_menu dd を一律 display: none にし、開く区画は JavaScript が * 決めていた。そのまま写すと、**JavaScript が動かない環境で回の中身の区画が * すべて閉じたままになり、どのページへも行けなくなる。**テーマは同じ部品の * お客様の声側で、畳む指定を JS が付ける .pa-voice-nav に掛けて「動かなければ * 開いたまま」に倒している。こちらもその流儀にそろえる。 * * 回の一覧（dl の id が acMenu01〜acMenu07）は移行元でも JavaScript を読み込まず、 * ページ別 CSS が 1 個目だけを開く。こちらは土台で閉じる必要がある。 * 回の中身（id が acMenu）に当たらないよう、末尾に数字が付く並びだけを選ぶ. */ body .pa-page--senryu .page-content__body #side_menu dl[id^="acMenu0"] dd { display: none; } body .pa-page--senryu .page-content__body #side_menu .list_year { margin: 0; padding: 0; list-style: none; } body .pa-page--senryu .page-content__body #side_menu .list_year li { margin-bottom: 15px; padding: 0 0 0 20px; color: #e1200f; font-weight: 700; } body .pa-page--senryu .page-content__body #side_menu .list_year li a { color: #222; font-weight: normal; } body .pa-page--senryu .page-content__body #side_menu .list_year li a.activeMonth { color: #e1200f; font-weight: 700; text-decoration: none; } body .pa-page--senryu .page-content__body #side_menu .pa-voice-nav dd { display: none; } body .pa-page--senryu .page-content__body #side_menu .pa-voice-nav dd.is-open { display: block; } body .pa-page--senryu .page-content__body #side_menu .pa-voice-nav dt:focus-visible { outline: 2px solid var(--pa-color-accent-strong); outline-offset: -2px; } body .pa-page--senryu .page-content__body .clearfix::after { display: block; clear: both; height: 0; visibility: hidden; line-height: 0; content: "."; } /* * ------------------------------------------------------------------ * 移行元が指定していない、受け継ぐ値 2 つを戻す * ------------------------------------------------------------------ * **ページ専用 CSS を写すだけでは足りない。**その要素に効いている受け継ぐ値も * 確かめる必要がある（Bug #2332・2026-08-27 に実測）。 * * img の縦の揃え … 移行元 baseline（指定なし） → dev middle * .rank-list li の行 … 移行元 25.6px（文字 20px） → dev 30px * * **どちらも移行元は何も指定していない。**受け継ぐ値のままである。テーマが * 記事の文字組みのために当てている値が、写した本文にも効いていた。 * * 縦の揃えを baseline に戻すと、行の中の画像の下に文字の下ぶらがりぶんの * すき間が出る。**移行元がその見え方なので、そろえる。** * * 行の高さは、囲みから受け継ぐように戻す。**`revert` を使ってはいけない。** * 写し元が全要素への指定を持つ場合、`revert` の側が勝って写し元の指定を消す。 * * 写し元が明示している値（`#senryu .block` ／ `.main_read` ／ `.corner_ttl`）は * 影響を受けない。ご成婚報告（Bug #2315）とマンガ（Bug #2313）には同じ直しを * 実装済みで、婚活川柳だけ指摘より先にマージされたため残っていた。 */ body .pa-page--senryu .page-content__body img { vertical-align: baseline; } body .pa-page--senryu .page-content__body .rank-list li { line-height: inherit; } /* * ------------------------------------------------------------------ * 受け継ぐ文字の大きさを移行元にそろえる（Bug #2341） * ------------------------------------------------------------------ * **移行元は区画の中の文字を 13px で受け継がせている**（サイト共通 CSS が * `#contents` に 13px を置いており、区画も見出しもそれを受け継ぐ）。 * **dev は器が 16px、見出しが 22px になっていた。** * * 区画の中の要素を両側で全数比べたところ、**食い違うのは次の 3 つだけだった** * （2026-08-27・幅 1440px・共通 18 種のうち 3 種）。 * * section#senryu … 移行元 13px → dev 16px * h3.title … 移行元 13px → dev 22px * その中の img … 同上（親から受け継ぐ） * * **残り 15 種は写し元が大きさを明示しているので影響を受けない。** * * 見出しは受け継ぐ値へ戻す。テーマは記事の見出しのために 22px を当てており、 * 器を 13px にしただけでは勝てないためである。 * * ## なぜ見た目に出るか * * 題名は `h3` の中の画像 1 枚である。**Bug #2332 で画像の縦の揃えを移行元と * 同じ `baseline` へ戻したので、画像の下には文字の下ぶらがりぶんのすき間が * 出る。**このすき間は受け継ぐ文字が大きいほど広がる。 * * この 3 つも移行元のサイト共通 CSS 由来である。**共通側へ写すときに、上の暫定の * 節と一緒に消すこと。撤去は Bug #3327 が受け持つ**（宛先を Issue #2363 と * 書いていたが、#2363 は移さずに閉じた。2026-09-09 に訂正）。 */ body .pa-page--senryu .page-content__body #senryu { font-size: 13px; } body .pa-page--senryu .page-content__body #senryu .title { font-size: inherit; } /* * ------------------------------------------------------------------ * 段落と箇条書きの項目の行の高さを移行元へ戻す（Bug #2391） * ------------------------------------------------------------------ * 写しは行の高さを囲みへ置き、中の要素へ受け継がせている。写し元も同じ形で、 * **段落にも箇条書きの項目にも、素の状態では行の高さを当てていない。** * * 写し元: legacy/www.p-a.jp/public/css/page_senryu.css * 24 行目 `#senryu .main_copy` … font-size:24px / line-height:160% * 30 行目 `#senryu .main_read` … font-size:16px / line-height:160% * 42 行目 `#senryu .block` … font-size:16px / line-height:160% * 182 行目 `#senryu .senryu_list .list_inner` … font-size:16px / line-height:160% * * **ところがテーマは段落と箇条書きの項目へ直接当てている。**main.css の * 次の 3 つである。 * * 376 行目 `p` * 17002 行目 `.entry-content p, .page-content__body p` * 17070 行目 `.entry-content li, .page-content__body li` * * **受け継ぎは「その要素に指定が無いときだけ」使われるため、直接当たるテーマの * 値が必ず勝つ。**これは強さ（詳細度）の比較で負けているのではない。先祖の側を * どれだけ強くしても直らず、その要素そのものへ当てる指定が要る。 * * 実測（2026-08-27・幅 1440px・dev のテーマ版 0.11.157）: * * 16px の段落 ×3 … 移行元 25.6px → dev 24px（1.5 倍） * 13px の段落 ×2 … 移行元 25.6px → dev 19.5px（1.5 倍） * * **先祖の指定は消さない。**ここに挙げていない要素（`div` ／ `dd` 等）はいまも * 受け継ぎで正しく効いており、消すとそれらが崩れる。 * * ## なぜ 160% を書き写してはいけないか * * **割合で書いた行の高さは、指定した要素の文字の大きさで実寸に直され、その実寸が * 子へ受け継がれる。**囲み（16px）で 160% と書けば 25.6px になり、中の 13px の * 段落もその 25.6px を受け継ぐ。上の実測で 13px の段落が 25.6px なのはこれである。 * * ここで段落へ `160%` と書くと、段落自身の 13px を基準に 20.8px になってしまう。 * **囲みから受け継ぐ形（`inherit`）にすれば、囲みが 4 つのどれであっても移行元と * 同じ実寸になる。**器ごとに値を書き分ける必要も無い。 * * ## 影響を受けない要素 * * 写しが段落や箇条書きの項目へ直接当てている箇所は、下の規則より強いため値が * 変わらない。**全数を確かめてある**（`#senryu` の id を含むもの、またはクラス * 3 つ以上）。 * * `p.note` … 13px / 153% = 19.89px・senryu.css の 226〜229 行。 * `/senryu/index_01/` の実例で、移行元と一致している * `.sakuhin_list li` … 1.5em ／ `.howto li` … 1.5em * `.under_menu_list li` ／ `.list_archives li` ／ `.links li` … 100% * `.sakuhin_list li p` ／ `.box-maemuki p` ／ `.word-cta p` * * なお上の「受け継ぐ値 2 つを戻す」の節にある `.rank-list li` の `inherit` * （Bug #2332）は、下の規則に含まれるので**重なっている。**消しても動きは * 変わらないが、#2332 の説明と対になっているため残してある。#2332 の節を * 見直すときに一緒に片付けること。 * * テーマの共通の値（`--pa-line-height-text`）は触らない。サイト全体に波及する。 * `!important` も使わない。この区画の目印（`pa-page--senryu`）を含む * 「body ＋ クラス 2 つ ＋ タグ 1 つ」で、テーマの `.page-content__body p` ／ * `.page-content__body li`（クラス 2 つ ＋ タグ 1 つ）に勝てる。 * * しあわせレポート（Bug #2332）で段落への同じ直しを入れてある * （assets/report/css/bridge.css）。**テーマ自身も会社情報・採用の区画で同じ形を * 使っている**（main.css の 27439〜27443 行・「テーマの既定の打ち消し」の節。 * `:is(p, li, dt, dd)` へまとめて `inherit` を当てており、理由の説明も同じ）。 */ body .pa-page--senryu .page-content__body p, body .pa-page--senryu .page-content__body li { line-height: inherit; } /* * ------------------------------------------------------------------ * 年の見出しの上の外余白（Bug #6997） * ------------------------------------------------------------------ * * 過去の受賞作品（`/senryu/backnumber/`）の年の見出し（`h4.corner_ttl02`）に、 * **移行元に無い上の外余白 50px** が付いていた。テーマの記事見出しの共通値 * （`main.css` の `:is(.entry-content, .page-content__body) :is(h2, h3, h4, h5, h6)` の * `margin: var(--pa-article-block-gap) 0 20px`）である。 * * 移行元の `#senryu .corner_ttl02`（写し元 `public/css/page_senryu.css`）は * **下の外余白 30px しか持たない**。見出しの前の空きは、**前の段落の下の外余白**が * 作っている。写し（senryu.css）は下の 30px を写すが、上は書かれていないので * テーマの 50px がそのまま残る。 * * ## 実測（幅 1440px・2026-09-17 21:31 JST・記録は `pa-verify-assets/D3/0917-senryu-101px-2131/`） * * 区画（`#senryu`）の中の塊 33 個を上から並べて突き合わせたところ、**外余白が * 食い違うのはこの見出しの上だけ**だった（ほかの 32 個は上下とも 1px も違わない）。 * * | 要素 | 移行元 上 / 下 | dev 上 / 下 | * |---|---|---| * | `h4.corner_ttl02`（8 か所） | **0px** / 30px | **50px** / 30px | * | `p.mb80` `p.mb35` `p.box_grid` `p.link_log_list` | 0 / 80・35・45・50 | 同じ | * * 外余白は重なるので、**前の段落の下が 50px 以上ある 4 か所では差が出ない**。 * 50px より小さい 4 か所だけ dev の 50px が勝って開いていた。 * * | 見出し | 直前の要素 | 移行元の空き | dev の空き | 差 | * |---|---|---:|---:|---:| * | 2016（区画の先頭） | タブの帯（下 40px） | 40.0 | 50.0 | +9.5 | * | 2011 / 2009 | `p.mb35` | 35.0 | 50.0 | +15.0 | * | 2010 | `p.box_grid`（下 45px） | 44.99 | 49.99 | +5.0 | * * 合わせて 44.5px。区画の高さの差 101.09px のうちの内訳である（残る 57.59px は * 記事下の CTA の中身で、[Bug #7048] が扱う）。 * * 🚨 **`.corner_ttl`（02 の付かない方）には広げない。**同じ形の指定だが、そちらは * 婚活川柳の入口ほかのページで使われており、**入口の実測は区画の高さの差が 0.5px で * すでに合っている**（同じ走行）。測っていない当たり先を巻き込まない。 * `corner_ttl02` を使う移行元のページは `/senryu/backnumber/` の 1 本だけである。 * * 【強さ】この当たり先は id 1 つ ＋ class 3 つ ＋ 要素 1 つで (1, 3, 1)。テーマ共通の * `:is(.entry-content, .page-content__body) :is(h2, …)` は (0, 1, 1) なので勝つ。 * 写し（senryu.css）の `#senryu .corner_ttl02` は上の外余白を書いていないので争わない. */ body .pa-page--senryu .page-content__body #senryu .corner_ttl02 { margin-top: 0; } /* * ------------------------------------------------------------------ * 携帯幅のために足した 3 枚を、パソコン幅では隠す（Task #7044） * ------------------------------------------------------------------ * * 過去の受賞作品の金銀銅は、移行元スマホ版だけが別々の絵 3 枚で出す。 * `inc/senryu-award-sp.php` がその 3 枚を本文へ差し込むので、**パソコン幅では * 隠さないと移行元に無い絵が 24 枚増える**（携帯幅のため足した札はパソコン幅で * 隠す指定も要る、という型）。 * * このファイルは `PA_SENRYU_MEDIA`（750px 以上）で配られるので、携帯幅には * 届かない。携帯幅で出す指定は `assets/senryu/css/sp.css` が持つ. */ body .pa-page--senryu .page-content__body #senryu .pa-senryu-award-sp { display: none; } /* * ------------------------------------------------------------------ * 携帯幅のために足した選択箱を、パソコン幅では隠す（Task #7043） * ------------------------------------------------------------------ * * バックナンバーの範囲の選択は、移行元スマホ版だけが一段の選択箱で持つ。 * `inc/senryu-range-select.php` がその選択箱を本文へ差し込むので、**パソコン幅では * 隠さないと移行元に無い部品が出る**（携帯幅のため足した札はパソコン幅で隠す指定も * 要る、という型）。 * * このファイルは `PA_SENRYU_MEDIA`（750px 以上）で配られるので、携帯幅には届かない。 * 携帯幅で出す指定は `assets/senryu/css/sp.css` が持つ. */ body .pa-page--senryu .page-content__body #senryu .pa-senryu-range-select { display: none; } /* * ------------------------------------------------------------------ * 携帯幅のために足した「過去の応募作品」と「TOPへ戻る」を、パソコン幅では隠す（Bug #10025） * ------------------------------------------------------------------ * * 移行元の部品 `include/year2.shtml` のスマホ版の組みは、`inc/senryu-backnumber-past-sp.php` が * 本文へ差し込む。パソコン幅では本文のパソコン版の `div.under_menu` と `p.btn_top` を出すので、 * **差し込んだ組みは隠さないと 2 つ並ぶ**。携帯幅で出す指定は `assets/senryu/css/sp.css` が持つ. */ body .pa-page--senryu .page-content__body #senryu .pa-senryu-past-sp { display: none; } /* * ------------------------------------------------------------------ * 段落と箇条書きの下の余白を打ち消す（Bug #8286） * ------------------------------------------------------------------ * * バックナンバーの 83 ページが、パソコン幅で移行元より **74.5px 高い**。 * 全数の実測（88 ページ × 両幅・2026-09-20）で 83 ページがこの値で揃っていた。 * * 中を降りると、差は末尾の **3 か所の 25px** に分かれていた。 * * | 対象 | dev | 移行元 | 差 | * |---|---|---|---| * | `p.note` の下の外余白 | 25px | 0 | +25 | * | `div.under_menu` の高さ | 161.42 | 136.42 | +25 | * | `p.btn_top` の下の外余白 | 25px | 0 | +25 | * * 25 × 3 = 75 で、見出し `h3.title` の −0.5 を差し引くと器の差 74.5 に合う。 * 一覧の作品（`dl.clearfix` 20 件）は高さも上端も 1 つ残らず一致していた。 * * 両側の CSSOM を数えると（2026-09-21・`d3-8286規則-0921.mjs`）、**3 か所とも 1 つの根**だった。 * * dev `.page-content__body p { margin: 0 0 var(--pa-article-paragraph-gap) }` ← 25px * `.page-content__body :is(ul, ol) { margin: 0 0 var(--pa-article-paragraph-gap) }` * 移行元 当たる規則が無い（共通 CSS の `p, ul { margin: 0 }` のまま） * * `div.under_menu` の +25 は、中の `ul.under_menu_list` が受け取る 25px である * （箱そのものの内余白 30px/40px は両側で一致している）。 * * 🚨 **テーマの段落間隔は記事本文のためのもので、移行元のこの区画は持たない。** * 区画の中だけで打ち消す。`--pa-article-paragraph-gap` そのものは触らない。 * * 🚨 **QOM総研の同じ部品（Bug #8272）とは別に直す。**あちらは `li` が `float: left` で * **回り込みの解除が効かず並びの高さが 0 になる**のが主な症状で、余白はそのうちの 1 つだった。 * 婚活川柳は回り込みに問題が無く（`ul` の高さは両側 14 で一致）、**余白だけ**が違う。 * 当たり先の CSS ファイルも違う（あちらは `assets/research/css/theme-bridge.css`）。 * * 🚨 このファイルは `PA_SENRYU_MEDIA`（750px 以上）で配られるので、携帯幅には届かない。 * 幅 375 の差は別の Issue で扱う。 */ body .pa-page--senryu .page-content__body #senryu :is(.note, .btn_top), body .pa-page--senryu .page-content__body #senryu .under_menu_list { margin-bottom: 0; }