`（dev だけにある。投入の自動整形が足す）。 ⚠ **器の `.list_detail` へ `line-height: normal` と書いても、この `
` には 届かない。**テーマの本文既定（`.entry-content p`）が `
` へ**直に**行送りを
当てており、受け継ぐ値より直に当たる規則が勝つためである（正本は memory の
`reference_inherited_declaration_loses_to_direct_rule`）。ここで名指しで戻す。
戻さないと分類の札の行の高さが 19.5px になり、移行元の 20px と 0.5px ずれる. */
#story .story_inner .list_box li a .list_detail > p {
line-height: normal;
}
#story .story_inner .list_box li a > :is(p, span) img {
aspect-ratio: 352 / 218;
height: auto;
}
/* 一覧の下の空き。移行元の項目（`li`）は下の外余白を持たず、行と行の間は
`` の下の 22px だけで決まる（幅 1440px の実測で移行元 0px 対 dev 20px）。
テーマは Bug #1938 で浮きを伸び縮みへ組み替えたとき、行の間隔を作るために
`li` へ 20px を足した。**この一覧は札 3 枚の 1 行だけ**なので、その 20px は
行の間ではなく一覧の下にそのまま残り、区画が 20px 伸びていた。
⚠ ほかの 3 種のページ（ワード解説・婚活スポット・アンケート）は札が何行にも
なるので、あちらの 20px は行の間隔として要る。**このファイルは成婚ストーリーの
ページにしか配られない**ので、あちらは変わらない. */
#story .story_inner .list_box > li {
margin-bottom: 0;
}
}
/* Task #3604 の検算で見つけた 2 つめ: 一覧の見出しの中の副題
（` ` を
* `` へ書き換える**（`scripts/pa-cms/import-payload.php` の
* `pa_cms_import_flatten_nested_p_in_a()`）。dev の配信 HTML を数えると `` 直下の
* ` ` は **0 個**、`` が 3 個である。`main.css` の Bug #2756 の注記にも同じ
* ことが書いてある。
*
* **書き換わった `` は行の中に流れる要素なので、テーマの段落の外余白
* （下へ 25px）はそもそも当たらない。**投入後のマークアップで測ると写真の帯は
* 移行元 224px / dev 224px で差が無い。よって当てる指定は要らない.
*
* 🚨 **両側を手元から配る道具は、移行元のマークアップを dev の CSS へ通す。**
* 移行元は ` ` なので、この規則は「効いているように見えていた」。**投入で形が
* 変わる区画では、道具の値をそのまま信じてはいけない**（dev の配信 HTML で数える）.
*/
/* 札の写真と「すべての記事を見る」の押しボタンの縦揃え。移行元は指定を持たず
既定の `baseline` なので、画像の下に行の下がり幅ぶんの 6px が残る（移行元の
押しボタンの器は 54px = 画像 48 + 6）。
🚨 **いまこの 2 宣言は空振りである。**この PR を書いた時点のテーマは本文の画像を
`vertical-align: middle` にしており（Issue #2616 の判断）、`middle` のままだと札が
6px 低くなっていた。その後 [PR #3036](https://github.com/mationinc/wp-platform/pull/3036)
が `main.css` の `.entry-content img` を `baseline` へ直したため、**打ち消す相手が
いなくなった**（幅 1440px で実測。直す前も後も両方とも `baseline`・押しボタンの器は
54px）。
**それでも宣言は残す。**#3036 自身も同じ理由の打ち消し 11 か所を「値が変わらない
ので動かない」として残しており、その前例に沿う。この画面が共通の既定に左右されず
移行元と同じ縦揃えを保つ、という意図を明示する意味もある.
🚨 **札の写真の側は当てない。**上の注記のとおり、投入で器が `` へ変わるため
`li a > p img` は dev に 1 つも当たらない（取り込みで `.img-cover` が付いた札には
`main.css` の `.story_inner .list_box li a .img-cover img` が別に入っている）. */
#story .story_inner .btn_all_story img {
vertical-align: baseline;
}
@media (max-width: 749px) {
/*
* 記事の器の格子を、携帯幅では出さない（Bug #3969）。**移行元スマホ版はこの
* 格子をどこにも敷いていない**（本番の第87話を幅 375px で開き、本文の器から
* `html` まで遡って計算後の `background-image` を読み、すべて `none` だった）。
*
* 🚨 **携帯幅は「本文の器を白で塗る」やり方では直せない。**`main.css` の
* `@media (max-width: 749px)` が `.grid_box > .detail_body` を
* `display: contents` にしており（写真と共有の並びを器をまたいで並べ替えるため。
* Bug #3441 の直し）、`display: contents` の要素は地を塗らない。だから
* **敷くのをやめる**ほうを選ぶ。移行元スマホ版と同じ姿になる。
*
* 🚨 **当たり先は詳細ページに絞る**（パソコン幅と同じ理由）。入口のページも
* `#story .grid_box` を持つが、移行元スマホ版の入口はこの器も格子も持たない
* 別の組みなので、この Task では触らない.
*/
#story .grid_box:has(.storyTxt01) {
background-image: none;
}
/* 🚨 **移行元スマホ版の実測に合わせる（Task #3317）。**写し元は
`public/sp/introduce/story/css/style.css`
`#story .article_box .box_concierge { margin-bottom: 23px; padding: 15px 5.357% 0 }`。
移行元の写しを手元から配信して測り直した（幅 375px・2026-09-04 13:0x JST）。
器は 328.13 × 432.95 で、内余白は上 15px・左右 17.5625px（= 328.13 × 5.357%）・
下 0、下外余白は 23px だった。**Task #3317 が記録した移行元の高さ 433.0 と一致する。**
🚨 **この指定は `main.css` 側からは上書きできない。**`#story` は id なので詳細度が
(1,1,0) になり、`main.css` の `.single-content--story .entry-content:has(.storyTxt01)
.box_concierge`（(0,4,0)）では**クラスをいくつ重ねても勝てない**（実ページで
ブラウザに当たっている規則を聞いて確認・2026-09-04 12:13 JST）。**画面別のこの
ファイルに書くのが正しい置き場所である.** */
#story .box_concierge {
margin-bottom: 23px;
padding: 15px 5.357% 0;
font-size: 12px;
letter-spacing: 0.1em;
/*
* 🚨 **単位なしの `1.4` では子が計算し直す（Bug #3371）。**単位なしの行送りは
* **数のまま**子へ伝わるので、13px の子は 18.2px になる。移行元は器の親
* （`.article_box`）が百分率で持ち、**12px のところで 16.8px に解かれた長さ**が
* そのまま子へ伝わる（実測: 13px の `.concierge_img` も 16.8px だった）。
* ここも百分率で書き、子が計算し直さないようにする.
*/
line-height: 140%;
}
/*
* 🚨 **器の 12px は、中の要素へは届かない（Bug #3371）。**移行元スマホ版の
* サイト共通の初期化（`sp/css/basic.css`）は `html, body, div, span, …, p, …, a, …`
* をまとめて `font-size: 13px` にしており、**`div` と `p` へ直接当たるので器の 12px を
* 受け継がない**。Task #3317 で器だけを 12px にしたところ、中の要素がすべて 12px を
* 受け継いで移行元から離れた。
*
* **実測（幅 375px・第 1 話）**: 見出し 55px・導入 42px・本文 251.95px・開閉部 20px。
* dev は 40 / 33.59 / 235.16 / 37 だった。**縮んだ 40.2px と膨らんだ 17px が
* 相殺して、器の外形の差は +4.8px しか出なかった**（432.95 対 437.75）。
* **器の外形が近いことを、中身が合っている証拠にしてはいけない。**
*/
#story .box_concierge :is(p, div) {
font-size: 13px;
}
/*
* 移行元 `#story .article_box .box_concierge .concierge_ttl`（字 20px・行 100%）。
*
* 🚨 **字間は器から受け継ぐ 1.2px にする。**器の `letter-spacing: 0.1em` は 12px の
* ところで 1.2px に解かれ、**計算後の長さとして子へ伝わる**（20px の子で 2px に
* なり直すことはない）。dev はテーマが h2〜h6 へ与える `0.05em` が当たって
* **20px × 0.05 = 1px** になっていた。`inherit` と書けば器の値をそのまま使う.
*/
#story .box_concierge .concierge_ttl {
padding: 0;
font-size: 20px;
letter-spacing: inherit;
line-height: 100%;
}
/*
* 副題は**改行して次の行**に置く（Bug #3391）。移行元スマホ版の規則は
* `#story .article_box .box_concierge .concierge_ttl span
* { display: block; padding: 7px 0; font-size: 12px }` である
* （ブラウザに聞いて確認・2026-09-04 14:47 JST）。
*
* 🚨 **パソコン幅とは組みが違う。**あちらは `inline-block` で同じ行に置き、
* 左に 22px 空ける。**dev は両方とも `inline` で見出しに密着していた.**
*/
#story .box_concierge .concierge_ttl span {
display: block;
padding: 7px 0;
font-size: 12px;
}
/* 移行元 `#story .article_box .box_concierge .concierge_copy`（字 14px・行 150%）. */
#story .box_concierge .concierge_copy {
font-size: 14px;
line-height: 150%;
}
/*
* 🚨 **上の内余白は移行元に無い（Bug #3371）。**移行元の `.concierge_detail` は
* 内余白 0 で高さ 20px、dev は上 10px が付いて 37px だった.
*/
#story .concierge_detail {
padding: 0;
}
/*
* 🚨 **移行元は携帯幅でも相談員の 2 列を崩さない（Bug #3371）。**dev は
* `.concierge_img` と `.concierge_prof` を縦積み（`float: none; width: auto`）に
* していたが、**移行元スマホ版は浮きのまま割合で並べている**。
*
* #story .article_box .box_concierge .concierge_img { float: left; width: 21.414% }
* #story .article_box .box_concierge .concierge_prof { float: right; width: 74.747%;
* line-height: 120% }
*
* 実測（幅 375px）も 61.88px（= 289 × 21.414%）と 216.02px（= 289 × 74.747%）で
* 一致した。**この 2 つは上の縦積みの一覧から外す.**
*/
#story .box_concierge .concierge_img {
float: left;
width: 21.414%;
}
#story .box_concierge .concierge_prof {
float: right;
width: 74.747%;
padding: 0;
font-size: 13px;
line-height: 120%;
}
/* 紹介文が空のページの下の空き（Bug #3510）。移行元スマホ版の空の段落の
下の外余白は 20px である（パソコン幅の 25px と値が違う）。考え方は
パソコン幅と同じで、上のファイル冒頭の注釈を参照. */
#story .box_concierge .concierge_prof:not(:has(p)) {
padding-bottom: 20px;
}
/* 移行元 `#story .article_box .box_concierge .concierge_detail p`（字 12px）. */
#story .box_concierge .concierge_detail p {
font-size: 12px;
}
/*
* 役職の札と名前の 2 行（Bug #3996）。移行元スマホ版はこの 2 つだけ、
* 器から受け継ぐ 13px / 15.6px でなく**自分の大きさと行送り**を持つ。
*
* public/sp/css/style.css
* #story .article_box .box_concierge p.concierge_prof_post
* { margin-bottom: 5px; color: #a3762b; font-size: 11px; line-height: 100% }
* #story .article_box .box_concierge p.concierge_prof_name
* { margin-bottom: 10px; font-size: 14px; line-height: 100% }
*
* 🚨 **当て先に要素の種類（`p.`）を足す。**`main.css` は携帯幅でも
* `:is(.entry-content, .page-content__body) .concierge_prof_post
* { font-size: 11px }` を持っているが（(0,2,0)）、**すぐ上の
* `#story .box_concierge .concierge_detail p`（(1,2,1)）に負けて 1px も
* 効いていなかった**。行送りのほうは `main.css` の
* `.single-content--story .entry-content:has(.storyTxt01) .box_concierge p
* { line-height: inherit }`（(0,4,1)）が `line-height: 1`（(0,2,0)）に勝ち、
* 器の 15.6px を受け継いでいた。**両方に勝つには id と要素の種類の両方が要る**
* （この規則は (1,3,1)）。
*
* 🚨 **色と外余白はここで書かない。**`main.css` の
* `:is(.entry-content, .page-content__body) .concierge_prof_post` が
* 見出しの色と外余白 5px を、`.concierge_prof_name` が外余白 10px を
* すでに与えており、実測で移行元と一致している（0px / 5px と 0px / 10px）。
*
* 実測（幅 375px・第3話と第87話で同じ）: 役職の札 12px / 15.6px →
* 11px / 11px、名前 12px / 15.6px → 14px / 14px、
* `.concierge_prof` 128.56 → 122.38px。
*/
#story .box_concierge p.concierge_prof_post {
font-size: 11px;
line-height: 100%;
}
#story .box_concierge p.concierge_prof_name {
font-size: 14px;
line-height: 100%;
}
/* 🚨 **相談員の 2 列（`.concierge_img` / `.concierge_prof`）はこの一覧に入れない
（Bug #3371）。**移行元スマホ版は浮きのまま割合で並べており、縦積みにすると
移行元から離れる。上で移行元と同じ浮きと割合を書いてある. */
#story .story_text,
#story .story_text.right,
#story .story_img,
#story .story_img.left,
#story .box_point,
#story .box_point_inner,
#story .box_point_inner dl {
float: none;
width: auto;
max-width: 100%;
}
/* 🚨 **下外余白 12px は移行元に無い（Bug #3371）。**移行元スマホ版の
`.concierge_img` は外余白 0・高さ 0 で、浮きの中に絵だけが入る。縦積みに
していたときの間隔なので、2 列へ戻すのと同時に外す. */
#story .box_point {
margin: 0 0 22px;
}
#story .box_point_inner {
box-sizing: border-box;
background-image: none;
}
/*
* 🚨 **移行元スマホ版の挿絵は全幅である（Bug #3397）。**移行元は
* サイト共通の初期化が `img { width: 100%; display: block }` を全体へかけており、
* 器も絵も本文の柱いっぱい（341.25px）になる。dev は器の幅がパソコン幅の 150px の
* ままで、絵が **260 × 310.27** に縮み、**左右に 65px ずつ白い余白**が出ていた
* （携帯 390px の実測・2026-09-04 14:1x JST）。
*
* 浮きと幅は上の一覧（`float: none; width: auto`）が既に戻している。**足りなかったのは
* 中の `img` を全幅にすることと、下の外余白 20px（dev は 16px）と、中央寄せを
* やめること**である（全幅なら寄せようがない）。
*/
#story .story_img,
#story .story_img.left {
margin-bottom: 20px;
}
#story .story_img img,
#story .story_img.left img {
width: 100%;
display: block;
}
}
/* ==============================================================
* 「成婚のポイントで選ぶ」の札 5 枚の高さをそろえる（Bug #2996）
*
* 移行元は札の高さを **JavaScript でそろえている**。写しの
* `introduce/story/index.html` の 38 行で `js/heightLine.js` を読み、同じページの
* 121 / 132 / 143 / 154 / 165 行にある `dd.heightLine-gp03` 5 個の高さを実測して、
* いちばん高いものへ全部を合わせる（配信後の `dd` に `style="height: 84px;"` が
* 書き込まれる）。結果、札（`.box_point`）は 5 枚とも **168px** になる。
*
* dev は `heightLine.js` を配っていないので、説明文の行数のぶんだけ札の高さが
* ばらつく。幅 1440px の実測（写しの静的 HTML と、同じ組みへこのテーマの CSS を
* 読ませた dev を、同じ関数で測った値。道具 = _c1-top-gap-tools/w3-2996-both.mjs）:
*
* 札 #0 #1 #2 #3 #4
* 移行元 .box_point 168 168 168 168 168
* 直す前の dev 147 168 147 168 147
*
* 内訳（1 枚ぶん）… .box_point ＝ .box_point_inner（内余白 20px）→ dl → dt（34px）
* ＋ dd。dd は 1 行 21px で、移行元は 5 枚とも 84px（4 行ぶん）、dev は 63px（3 行）
* と 84px（4 行）が混ざっていた。
*
* **JavaScript は増やさず、CSS の格子（grid）で同じ結果にする。**
* `grid-auto-rows: 1fr` は「行の高さを、いちばん高い行にそろえる」指定である。器の
* 高さが決まっていないときの `1fr` は、すべての行を最も背の高い行の高さへ引き上げる
* ため、**移行元の JS と同じ「全部をいちばん高いものへそろえる」結果になる**。
*
* 🚨 **行の間の 22px を `row-gap` で作らない。**この 22px はいまも札 1 枚ずつの
* `margin-bottom` が作っている。`row-gap` に置き換えると、見出し（`.archive_ttl`）と
* 1 行目の札の間にも 22px が増えてしまい、Bug #2997 で整えた余白が狂う。**横方向の
* `column-gap` だけを使い、縦は札の `margin-bottom` を残す。**
*
* 🚨 **見出しの行だけは `1fr` の対象から外す。**`grid-template-rows: auto` で 1 行目を
* 明示しておかないと、見出しの行まで札の行と同じ高さ（190px）へ引き伸ばされる。
*
* 🚨 **伸ばすのは `.box_point` だけでは足りない。**移行元は `dd` が伸びて
* `dl` → `.box_point_inner` → `.box_point` の順に高くなる。器だけ伸ばすと
* `.box_point_inner` は 107px のままで、その中心に置く `arrow.png`（`right center`）が
* 移行元より約 10px 上へずれる。`a` → `.box_point_inner` → `dl` と順に格子にして、
* `dd` まで高さを伝える。
*
* 🚨 **列は `repeat(3, 352px)` と決め打ちにしない。**器の幅は `min(1100px, 100vw)` で、
* 幅 750〜1100px の画面では 3 列ぶん（1100px）が入らない。いまの浮き（float）は
* その幅で 2 列に折り返すので、`repeat(auto-fill, 352px)` にして同じ折り返しを保つ。
*
* 🚨 **`heightLine-gp01` / `heightLine-gp02` はこの規則の対象外である。**この画面には
* 一覧の札の題名（gp01）と説明文（gp02）が 3 個ずつあり、移行元は同じ JS でそちらも
* そろえている。そちらの直し方は **Bug #2865** が決める。方式が決まったときに合わせ
* られるよう、ここは `gp03` を持つ札（`.box_point`）だけに閉じておく。
*
* 携帯幅（749px 以下）は縦 1 列に積む組みなので、この節は `min-width: 750px` の中に
* 閉じ込めて届かせない。
* ============================================================== */
@media (min-width: 750px) {
/* 札を並べる器を格子にする。`grid-template-rows: auto` は見出しの 1 行目、
`grid-auto-rows: 1fr` はそれ以降（札の行）に当たる. */
#story .detail_body:has(> .box_point) {
display: grid;
grid-template-columns: repeat(auto-fill, 352px);
grid-template-rows: auto;
grid-auto-rows: 1fr;
column-gap: 22px;
}
/* 見出し「成婚のポイントで選ぶ」は横いっぱいに置く. */
#story .detail_body:has(> .box_point) > .archive_ttl {
grid-column: 1 / -1;
}
/* 浮きを閉じるための `::after` は、格子では枡を 1 つ食って空の列を作るので止める.
浮き自体をやめるため、閉じる役目も要らなくなる. */
#story .detail_body:has(> .box_point)::after {
display: none;
}
/* 札は浮きをやめる。横の間隔は `column-gap` が作るので右の外余白は 0 にし、
行の間隔を作る下の 22px だけを残す。
🚨 `#story .box_point:nth-child(3n+1) { margin: 0 0 22px 0 }` を打ち消している。
あれは浮きのときに行の右端の余白を消すための規則で、格子では要らない。
打ち消さないと 3 枚目だけ右の外余白が違う値のまま残る. */
#story .detail_body:has(> .box_point) > .box_point {
display: grid;
float: none;
margin: 0 0 22px;
}
/* 伸びた札の高さを中身へ伝える。各段を格子にすると、ただ 1 つの子が既定の
`stretch` で親いっぱいに伸びる。`.box_point_inner`（幅 312px）と `dl`（幅 267px）は
横幅を自分で持っているため、伸びるのは縦だけである. */
#story .detail_body:has(> .box_point) > .box_point > a,
#story .detail_body:has(> .box_point) .box_point_inner {
display: grid;
}
/* いちばん内側。題名（dt）は中身なりの高さ、説明文（dd）が残りを埋める。
これが移行元の JS が `dd` へ書き込む `height: 84px` に当たる. */
#story .detail_body:has(> .box_point) .box_point_inner dl {
display: grid;
grid-template-rows: auto 1fr;
}
}
/* ==============================================================
* 灰色のリンク帯（本文の下の 3 本）の並び（Issue #3095 の A-5）
*
* 移行元 `css/style.css` の 97〜105 行は `.txtBtn_gray01` を `display: flex` にし、
* その直接の子である `a` を並べる。flex の子は塊（block）に変わるので、`a` の箱は
* 行の高さ 30px ぶんの高さになる。
*
* dev では**自動整形（wpautop）が `a` 3 本を ` ` で包む**ため、flex の子が ` `
* 1 つだけになり、`a` は素の `inline` のまま ` ` の中に並ぶ。その結果:
*
* 幅 1440px の実測（移行元 www.p-a.jp を 2026-09-03 に取得）
* 移行元 a.serif display: block 高さ 30px 左端 289.88 / 557.69 / 811.19
* dev a.serif display: inline 高さ 23px 左端 287.59 / 555.41 / 813.47
*
* 高さが 7px 低く、左端も ±2.28px ずれる。帯そのものの高さも 30 → 49px に伸びる。
* **包みの箱を消して、`a` を flex の子へ戻す。**`display: contents` は「この要素の
* 箱を作らず、子を親の子として扱う」指定なので、移行元と同じ「`.txtBtn_gray01` の
* 直接の子が `a` 3 本」という関係に戻せる。` ` の外余白も一緒に消えるため、
* 帯の高さも移行元の 30px に戻る。
*
* 🚨 **本文を書き換えて ` ` を外す直し方は採らない。**投入した本文へ手を入れると
* 元の HTML と食い違い、次の投入で戻る。見た目の側で合わせる。
*
* 🚨 **範囲を `#story` の中に閉じる。**`.txtBtn_gray01` は移行元のサイト共通の
* クラスで、他の区画にも出る。そちらは実測していないので触らない.
* ============================================================== */
#story .txtBtn_gray01 > p {
display: contents;
}
/* ==============================================================
* 先頭へ戻るボタンの器（Issue #3095 の A-8）
*
* 移行元 `css/page_introduce.css` の 565〜572 行（宣言は 6 つある）:
*
* #story .page_top {
* float: none; margin: 0 auto; width: 1100px;
* padding: 40px 0 0; text-align: right; clear: both;
* }
*
* 🚨 **`text-align: right` を落とすと絵が左端へ飛ぶ。**浮きをやめて幅 1100px の
* 塊にすると、中の絵（50×63）は既定で左に寄る。移行元は右寄せの 1 行で右端へ
* 置いている。CSS の寸法の回帰テスト `spec-story-page-top.json` を先に書いたことでこの抜けを
* 捕まえた（絵の左端が 1220 のはずが 170 になって落ちた）。**宣言は組で写す。**
*
* **`float: none` が肝である。**移行元はサイト共通 CSS で `.page_top` を浮かせて
* いるが、成婚ストーリーの区画ではこの 1 行で浮きを打ち消し、幅 1100px の塊に
* している。塊なので、**次に来る区画を自分の高さ（109px）ぶん押し下げる。**
*
* この 3 行が写されていないため、dev のボタンは浮いたまま幅 50px（中身なり）に
* なり、次の区画を押し下げない。結果、**灰色の帯にボタンが重なる。**
*
* 幅 1440px の実測（移行元は本番 www.p-a.jp を 2026-09-03 に取得）
* 移行元 ボタン x170 / 幅 1100 / y 1658.98〜1767.98 灰色の区画の上端 1767.98（外）
* dev ボタン x1220 / 幅 50 / y 1708.06〜1817.06 灰色の区画の上端 1708.06（中）
*
* 下側のボタンも同じで、移行元は本文下のパンくずとの間が 30px 空くのに対し、
* dev はパンくずがボタンの中へ 19px 食い込む（ボタン 2384.56〜2493.56 に対し
* パンくず 2474.56）。
*
* 🚨 **上内余白 40px は写さない。**両側とも既に 40px で一致している（実測）。
*
* 当たり先は念のため `.story_inner` の直接の子に絞っておく。成婚ストーリーの
* **詳細**ページは組みが違い、`div.page_topArea`（幅 1100・浮きを閉じる）の中に
* `p.page_top`（幅 50）が入る形で、**両側とも一致している**（移行元・dev とも
* x170 幅 1100 の器 ＋ x1220 幅 50 の中身。移行元 story_01.html で実測）。
*
* 🚨 **ただし「絞らないと詳細を壊す」わけではない。**詳細ページの
* `div.page_topArea` は **`#story` の外**にある（移行元 `story_01.html` の 271 行で
* `#story` の `` が閉じ、272 行の `include/box_support.shtml` が節の外で
* この器を出す。dev も `main.css` の選択子が
* `.single-content--story .entry-content > .page_topArea` で `#story` の兄弟）。
* つまり `#story .page_top` と広く書いても詳細には当たらない。**この PR の初版は
* 「広く書くと詳細 104 ページを壊す」と書いていたが、それは誤りである**
* （セルフレビューの指摘で訂正）。絞りは入口の組みだけを名指しする意図で残す.
* ============================================================== */
#story .story_inner > .page_top {
float: none;
clear: both;
width: min(1100px, 100%);
margin-inline: auto;
text-align: right;
}
/* ==============================================================
* 先頭へ戻るボタンの携帯幅（Issue #3095・裁定 46）
*
* 🚨 **すぐ上の規則にメディアクエリを付けなかったため、携帯幅で絵が右端へ
* 飛んでいた。**上の規則は移行元の**パソコン版**（`css/page_introduce.css`
* 565〜572 行）を写したもので、幅 1100px と右寄せを与える。携帯幅では
* `min(1100px, 100%)` が画面いっぱい（375px）になり、そこへ右寄せが効く。
*
* 移行元は携帯の端末情報で `/sp/` の別サイトへ転送しており、**そちらは
* まったく違う値**を持つ。写し元は `sp/css/style.css` の 1859〜1862 行:
*
* .page_top { margin: 0 auto 30px; width: 11.875%; }
*
* 幅は画面幅の 11.875%（375px 幅で 44.53px）で、`margin: 0 auto` により
* **中央**に置かれる。上の内余白は持たない。
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 に取得）:
*
* 移行元スマホ版 器 x=165.23 / 幅 44.53 / 高さ 50.39 ＝ 画面の中央
* 直す前の dev 器 x=0 / 幅 375 / 高さ 109 絵は x=325（右端）
*
* 🚨 **絵も別のファイルである。**移行元スマホ版は `/sp/images/page_top.gif`
* （76 × 86）を使い、パソコン版の `pagetop_off.png`（50 × 63）ではない。
* このテーマは同じ絵を `assets/images/pagetop_sp.gif` として既に持っており
* （移行元の写しと中身が 1 バイトも違わないことを照合済み）、**新しく資産を
* 足す必要はない**。差し替えは移行元の JavaScript（`js/rollover.js`）を
* 持ち込まず、テーマが会社情報のナビと店舗の先頭へ戻るで既に使っている
* `content: url(...)` の書き方に揃える（`main.css` 1051 行ほか）。
*
* 絵の寸法は器から決まる。テーマの `img { height: auto }` と、写し元と同じ
* `max-width: 100%` により、76 × 86 の縦横比が 44.53 × 50.39 になる
* （＝移行元スマホ版の実測値と一致する）。
*
* 🚨 **指を乗せたときの差し替え（`_ov`）をこの幅へ持ち込まないこと。**
* 携帯用の絵に効かせると、寸法が 76 × 86 から 50 × 63 へ化けて組みが動く
* （テーマが Bug #2817 で実際に踏んだ型。`main.css` 1149 行の注釈）。
*
* **ボタンの個数もここで直す（司令塔の裁定 2026-09-03）。**移行元スマホ版は本文の
* 末尾に 1 か所だけ置くが、dev は一覧の下と本文の末尾の 2 か所に出る。投入した
* 本文の組みは変えず、**携帯幅でだけ上側を隠す**（下の `:not(:last-of-type)` の
* 規則）。パソコン幅は 2 か所のまま変えない。
*
* 実 DOM で当て先を確かめた（dev の /introduce/story/ を幅 375px・携帯の名乗りで
* 開いて実測。2026-09-03）。`#story` の直下は `div` が 4 つで、並びは
* `.heading` → `.story_inner`（先頭へ戻るを持つ）→ `.grid_box` →
* `.story_inner`（先頭へ戻るを持つ）である。**最後の `div` が 2 つ目の
* `.story_inner` なので、`:last-of-type` はその 1 つだけに当たる**。
* ============================================================== */
@media (max-width: 749px) {
/* 🚨 **移行元のスマホ版はボタンを 1 個しか置かない。**ページの末尾だけである
（移行元 `sp/introduce/story/index.html` の 351 行。実測でも 1 個）。dev は
移行元のパソコン版と同じ組みなので 2 個ある（一覧の下 y=2732.39 と
末尾 y=4038.97）。司令塔の裁定（2026-09-03）に従い、携帯幅では上側を隠す。
当て先の決め方: `#story` の中の `.story_inner` は 2 つあり、それぞれが
`.page_top` を 1 個ずつ持つ（実測の並びは 題名の区画 → `.story_inner`（一覧）
→ `.grid_box`（成婚のポイント）→ `.story_inner`（下部のリンク帯））。
**末尾の 1 つだけを残す**ので、`:last-of-type` でない側を隠す。
🚨 **この規則は並び順を前提にしている。**投入した本文の組みが変わると、
隠す側が入れ替わる。CSS の寸法の回帰テスト `spec-story-page-top-sp.json` が「携帯幅で見える
ボタンは 1 個で、それは末尾の側である」ことを見張る. */
.single-content--story .entry-content #story .story_inner:not(:last-of-type) > .page_top {
display: none;
}
/* 🚨 **百分率でなく `vw` で書く。**写し元は `width: 11.875%` だが、百分率は
「包む器の中身の幅」を基準に解かれる。移行元では包む器が画面幅（375px）
なので 44.53px になるが、**この同じファイルで一覧の器へ左右の内余白
6.25vw を足したあと**は、包む器の中身が 328.13px になり 38.95px にしか
ならなかった（型紙が実際に落ちた）。
**同じ落とし穴に別の場所で二度はまった。**器に内余白を足したら、その中の
百分率がすべて基準を変える。`11.875vw` は画面幅を基準にするので、
移行元と同じ 44.53px になる. */
#story .story_inner > .page_top {
width: 11.875vw;
margin: 0 auto 30px;
padding: 0;
}
#story .story_inner > .page_top img.imgover {
content: url("../../images/pagetop_sp.gif?ver=bb8683872ea0");
max-width: 100%;
}
}
/* ==============================================================
* 一覧の字を携帯幅で移行元のスマホ版へそろえる（Issue #3095・裁定 46）
*
* 🚨 **いまの値は「別の画面」から写されている。**テーマ共通の
* `main.css` 32219〜32227 行（`@media (max-width: 749px)` の中）が
*
* :is(.entry-content, .page-content__body) .list_box .ttl { font-size: 18px }
* :is(.entry-content, .page-content__body) .list_box .text { font-size: 14px }
*
* を当てており、注釈にも「ワード解説と成婚ストーリーの一覧」と書いてある。
* 写し元は**ワード解説のスマホ版** `sp/word/css/style.css` の 85〜95 行で、
* そこは確かに 18px / 14px である。
*
* **しかし成婚ストーリーのスマホ版は別の値を持つ。**写し元
* `sp/introduce/story/css/style.css` の 76〜95 行は次のとおりである。
*
* span.num { margin-bottom: 8px; color: #a3762b; font-size: 14px; line-height: 100% }
* span.ttl { margin-bottom: 10px; font-size: 14px; font-weight: 700; line-height: 145% }
* span.text { margin-bottom: 10px; font-size: 12px; line-height: 166% }
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 に取得）:
*
* | 部品 | 移行元スマホ版 | 直す前の dev |
* |--------------|-------------------------|-------------------------|
* | 一覧の見出し | 20px / 400 / 黒 | 30px / 700 / 金 |
* | Vol. 番号 | 14px / 金 / 塊 / 地なし | 16px / 白 / 行内 / 地あり |
* | 題名 | 14px / 行送り 20.30px | 18px / 26.10px |
* | 説明文 | 12px / 行送り 19.92px | 14px / 23.24px |
* | 分類の札 | 高さ 23px / inline-block| 高さ 17px / inline |
*
* 🚨 **共通の規則を絞り直すのではなく、成婚ストーリー用に足す。**
* `.list_box` は移行元で 6 区分が使っている（QOM 総研 174 ページ・成婚
* ストーリー 117・ワード解説 9・婚活アンケート・お出かけスポット・あい婚活）。
* 共通の規則から成婚ストーリーを外すと、**残りの 5 区分の値が正しいかを
* 確かめないまま据え置くことになる**（それぞれ担当の班が別にいる）。ここでは
* 成婚ストーリーだけに当たる選択子で上書きし、他の区分に触れない。
*
* 当て先の絞り方: `.single-content--story`（投稿型 story）と `#story
* .story_inner` の組で名指しする。
* - ワード解説は投稿型 `post` で `.single-content--story` を持たない
* - **お客様の声としあわせレポートは同じ投稿型 story だが `.list_box` を
* 持たない**（移行元の `introduce/voice/index.html` と
* `introduce/happyreport/index.html` を写しで数えて 0 件と確認）
* したがってこの絞りは成婚ストーリーの一覧 117 ページだけに当たる。
*
* 🚨 **行送りも組で写す。**字の大きさだけ写すと、共通の規則の行送り
* （26.10px / 23.24px）が残って箱の高さがずれ、その下の内容全体が動く。
*
* 🚨 **色と地の絵は実測で確かめたものだけを直す。**分類の札は字・色・地色・
* 地の絵・揃えが**両側で一致していた**（11px / 白 / rgb(162,128,59) / 中央）
* ので触らない。組み方（`inline` 対 `inline-block`）だけが差である。
* ============================================================== */
@media (max-width: 749px) {
/* 一覧の見出し。写し元 `sp/introduce/story/css/style.css` 41〜45 行
`#story .corner_ttl { margin-bottom: 25px; font-size: 20px; line-height: 100% }`。
太さと色は移行元スマホ版が指定を持たず、初期化の 400 と黒のままである
（`sp/css/basic.css` 21 行）。dev はパソコン版の 700 と金を使っている. */
/* 🚨 **成婚のポイントの見出しにも同じ値を当てる（Task #3144）。**この規則が
一覧の中だけに当たっていたため、成婚のポイントの見出しが dev で 33px 高・
下の隙間 30px のままだった（移行元は 20px 高・隙間 25px）。**その差 13px と
5px の合計 18px が、そのまま区画の高さの差になっていた**
（移行元 575.97 対 dev 593.97。2026-09-03 22:5x JST に両側を実測）. */
.single-content--story .entry-content #story .story_inner > .archive_ttl,
.single-content--story .entry-content #story .detail_body > .archive_ttl {
margin-bottom: 25px;
font-size: 20px;
font-weight: 400;
line-height: 1;
color: #000;
}
/* Vol. 番号。移行元スマホ版は塊で、地の絵も白抜きも持たない。
写し元 `sp/introduce/story/css/style.css` 79〜84 行. */
.single-content--story .entry-content #story .story_inner :is(.list_box, .list_box_new) .num {
display: block;
margin-bottom: 8px;
padding: 0;
background-image: none;
color: #a3762b;
font-size: 14px;
line-height: 1;
}
/* カードの題名。写し元 `sp/introduce/story/css/style.css` 85〜90 行. */
.single-content--story .entry-content #story .story_inner :is(.list_box, .list_box_new) .ttl {
margin-bottom: 10px;
font-size: 14px;
font-weight: 700;
line-height: 1.45;
}
/* カードの説明文。写し元 `sp/introduce/story/css/style.css` 91〜95 行. */
.single-content--story .entry-content #story .story_inner :is(.list_box, .list_box_new) .text {
margin-bottom: 10px;
font-size: 12px;
line-height: 1.66;
}
/* 分類の札。**色と地の絵は両側で一致している**ので、組み方と行送りだけを直す。
写し元 `sp/introduce/story/css/style.css` 424〜435 行の `display: inline-block`
と `padding: 3px 6px`・`margin: 0 5px 5px 0`。
🚨 **行送りも組で写す。**組み方だけを `inline-block` に直したところ、
高さが 25.8px になって移行元の 23px と 2.8px ずれた。テーマ共通の行送り
19.8px（字 11px × 1.8）が残っていたためである。移行元スマホ版はこの札に
行送りの指定を持たず `normal`（11px の書体で 17px）なので
3 + 17 + 3 = 23px になる。**字の大きさが合っていても、行送りが違うと
箱の高さがずれる。** */
.single-content--story .entry-content #story .story_inner :is(.list_box, .list_box_new) .tag_label {
display: inline-block;
margin: 0 5px 5px 0;
padding: 3px 6px;
line-height: normal;
}
}
/* ==============================================================
* 分類別ページ 6 件の札の残り 3 か所を携帯幅で移行元スマホ版へそろえる
* （Bug #3835・ユーザー裁定 46）
*
* 上の 4 つ（Vol. 番号・題名・説明文・分類の札）は入口の一覧（`.list_box`）向けに
* 書いたものを **`.list_box_new` へ広げた**。分類別の 5 ページと「すべての記事」は
* 移行元のパソコン版と同じ組みで投入されており、札の入れ物が `.list_box_new` に
* なっているためである（移行元は入口が `ul.list_box`・分類別が `ul.list_box_new` と
* 入れ物を使い分けている。Bug #2994 で判明）。
*
* ⚠ **当て先は分類別の 6 ページだけに当たる。**同じ投稿型 story のお客様の声
* （99 本）としあわせレポート（12 本）は `.list_box` も `.list_box_new` も持たない
* （2026-09-05 に dev の一覧を取得して 0 件と確認）。入口は `.list_box` だけを持つ。
*
* ここで足すのは、入口には無い残りの 3 か所である。幅 375px の実測
* （移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/category01.html を 2026-09-05 17:39 に取得）:
*
* | 部品 | 移行元スマホ版 | 直す前の dev |
* |------------------|-----------------------|-----------------------|
* | 札の中の内余白 | 15px / 3.125%（10.25px） | 20px |
* | 札の下の空き | 18px | 22px |
* | 見出しの中の副題 | 17px / 行送り 20px / 左の空き 0 | 18px / 30px / 20px |
*
* 写し元は `sp/introduce/story/css/style.css` の 66〜75 行
* （`.list_box li { margin: 0 0 18px 0 }` と `.list_box li .list_detail { padding: 15px 3.125% }`）と
* 52〜55 行（`#story .corner_ttl2 span { color: #000000; font-size: 17px }`）である。
*
* 🚨 **左右の内余白は百分率のまま写してよい。**この 3.125% は
* **札（`li`）の幅**を基準に解かれ、`li` は両側とも 328.13px なので 10.25px になる
* （器の `.story_inner` の内余白を `6.25vw` で書き直したときとは事情が違う。
* あちらは包む器が移行元 375px 対 dev 345px で食い違っていた）。
*
* 🚨 **副題の行送りは長さで書く。**移行元スマホ版は見出しへ `line-height: 100%`
* （= 20px）と書いており、長さに決まってから子へ伝わる。数値で書くと子の字
* （17px）で計算し直され、箱の高さが移行元の 22px からずれる（Task #3604 で
* パソコン幅で同じ型を踏んでいる）。
* ============================================================== */
@media (max-width: 749px) {
.single-content--story .entry-content #story .story_inner .list_box_new li {
margin: 0 0 18px;
}
.single-content--story .entry-content #story .story_inner .list_box_new li a .list_detail {
padding: 15px 3.125%;
/* 🚨 **器の字も写す。**中の 4 つ（番号・題・紹介文・分類の札）はどれも
自分で大きさを決めるので、この 13px は文字としては画面に出ない。**出るのは
分類の札が並ぶ行の高さ**である。あの札は行の中に流れる塊なので、行の高さに
器の書体の下がり幅が足される。移行元スマホ版の 13px では行が 28px、dev の
15px では 29px になり、**札 1 枚が 0.96px 高くなっていた**（幅 375px の実測。
移行元スマホ版は器が 180.06px・直す前の dev は 181.02px）。
パソコン幅の 13px は `main.css` が `@media (min-width: 750px)` で当てており、
そこには触らない（Task #3604）. */
font-size: 13px;
}
/* 札の写真。移行元スマホ版は絵を塊にするので、絵の下に行の余りが出ない
（写し元 `sp/introduce/story/css/common.css` 11〜15 行の
`img { width: 100%; height: auto; display: block }`）。
dev は行の中に流れる絵のままで、`vertical-align: baseline`（`main.css`）の
下がり幅ぶん **6px** が絵の下に残っていた（幅 375px で写真の器が
移行元 203.2px 対 dev 209.2px）。
🚨 **パソコン幅では絵を塊にしない。**移行元のパソコン版はこの 6px を
持っており、dev も一致している（`main.css` が名指しで `baseline` を当てている）。
ここは携帯幅だけの打ち消しである. */
.single-content--story .entry-content #story .story_inner .list_box_new li a > :is(p, span) img {
display: block;
}
/* 見出しの中の副題（` ` を `` へ書き換えたもの（`pa_cms_import_flatten_nested_p_in_a()`）、
* 4〜6 枚目は `inc/story-list-sp-extra.php` が組む ` ` だった。**どちらにも
* 当たるように両方を名指ししている**（`a > p` だけでは 1〜3 枚目に当たらない）。
*
* 🚨 **4〜6 枚目を組んでいた実装は [Task #7299](https://github.com/mationinc/wp-platform/issues/7299) で外した。**
* 名指しは残すが、いま当たるのは 1〜3 枚目の `` だけである.
*/
.single-content--story .entry-content #story .story_inner .list_box li a > :is(p, span) > img {
display: block;
}
/*
* 差 B: 札の器の行送りを素へ戻す。
*
* 移行元スマホ版は器（`p.list_detail`）に行送りの指定を持たず `normal` である
* （`public/sp/css/basic.css` にも `public/sp/css/common.css` にも `body` の
* 行送りが無い）。dev はテーマ共通の 1.8 が効いて 27px になっており、
* **分類の札が乗る行の高さが 23px から 27px へ上がって、札の列が 3.0px 下がる**。
*
* 字の大きさも移行元へそろえる。移行元スマホ版のサイト共通の初期化
* （`public/sp/css/basic.css` の 6〜10 行）は `div` と `p` を含む要素をまとめて
* 13px にしており、dev はテーマの 15px が残っていた。**行送りを素にしただけでは
* 1.0px 残る**（15px の素の行送りは 13px のそれより背が高いため）。
*
* 番号・題名・説明文はそれぞれ自分の字の大きさと行送りを持つので、この 2 つの
* 指定では動かない。動くのは、どちらも持たない分類の札の行だけである。
*
* 🚨 **1〜3 枚目は器が ` ` の中にある。**
* 4〜6 枚目は器そのものが ` ` だった。**両方を名指ししている。**
*
* 🚨 **4〜6 枚目を組んでいた実装は [Task #7299](https://github.com/mationinc/wp-platform/issues/7299) で外した。**
* 2 つ目の名指し（`.list_detail > p`）は 1〜3 枚目の内側の ` ` に当たるので残す.
*/
.single-content--story .entry-content #story .story_inner .list_box li a .list_detail,
.single-content--story .entry-content #story .story_inner .list_box li a .list_detail > p {
font-size: 13px;
line-height: normal;
}
/*
* 差 C: 4〜6 枚目の写真の器の外余白を落とす。
*
* `inc/story-list-sp-extra.php` が組む ` ` に、テーマの段落の既定（下へ 18px）が
* 当たっていた。移行元スマホ版の ` ` は外余白 0 である
* （`public/sp/css/basic.css` の 6〜10 行が `p` を含めて余白を 0 に初期化する）。
*
* 1〜3 枚目の器は `` なので段落の外余白は元から当たらない。
*
* 🚨 **この ` ` を組んでいた実装は [Task #7299](https://github.com/mationinc/wp-platform/issues/7299) で外した。**
* 規則は残す。**投入した本文に ` ` が残っている札が在るかを数えていない**ので、
* 消すと見た目が変わりうる。数えてから消すこと.
*/
.single-content--story .entry-content #story .story_inner .list_box li a > p {
margin: 0;
}
/*
* 差 D: 一覧の器の下外余白を落とす。
*
* 移行元スマホ版の `.list_box` は外余白を持たない（`public/sp/introduce/story/
* css/style.css` の 64〜65 行は空の規則で、間隔は札 1 枚ずつの下外余白 18px が
* 作る）。dev はテーマの箇条書きの既定 18px が残っていた。
*
* 🚨 このファイルの `@media (min-width: 750px)` の中に同じ趣旨の規則があるが、
* **あちらは幅 750px 以上に閉じてあるので携帯幅には届かない.**
*/
.single-content--story .entry-content #story .story_inner .list_box {
margin-bottom: 0;
}
/*
* 差 E-1: 区画の上の内余白。移行元スマホ版は `#story { padding: 25px 0 30px }`
* （`public/sp/introduce/story/css/style.css` の 6〜8 行）である。dev は 0 で、
* **題の絵の帯が 25px 高い位置から始まっていた**。
*
* 🚨 **一覧のページだけに当てる。**移行元のこの規則は詳細のページにも当たるが、
* 詳細のページ（`#story` に `.story_inner` を持たない）は別の班が別の Issue で
* 組みを整えている最中なので、この PR では触らない。詳細にも同じ内余白が要るか
* どうかは未確認である（司令塔へ報告済み）。
*
* 下の 30px は写さない。dev はこの位置の空きを、先頭へ戻るの上外余白 30px
* （このファイルの `.story_inner:has(> .txtBtn_gray01) > .page_top`）で作っている.
*/
.single-content--story .entry-content #story:has(.story_inner) {
padding-top: 25px;
}
/*
* 差 E-2: 題の器の下外余白。移行元スマホ版は `.heading { margin-bottom: 12% }`
* （同じ写し元の 436〜438 行）で、幅 390px のとき 46.7969px になる。
*
* 🚨 **`12%` とだけ書くと 43.2px にしかならない。**百分率の基準は包む器
* （`#story`）の中身の幅で、dev のそれは画面幅から本文の左右の余白 15px を
* 2 つ引いた 360px だからである。移行元の `#story` は画面幅そのもの（390px）
* なので、**基準の差ぶんを足し戻す**: 12% × 画面幅 = 12% × 器 + 0.24 × 余白。
*
* 🚨 **`12vw` とは書かない。**このファイルには `vw` で書いた前例（1164 行の
* `11.875vw`）もあるが、あちらは「包む器の内余白が百分率の基準を変えてしまう」
* ための逃げ道である。ここは器の幅と画面幅の差が本文の左右の余白 2 つぶんだと
* **式で分かっている**ので、司令塔の裁定どおり器の百分率で書き、差ぶんだけを
* 本文の余白の変数で足す。こう書くと、本文の余白の値を変えたときも自動で追従する。
*
* 🚨 **題の器は成婚ストーリーの全 117 ページに付いている。**移行元のこの規則は
* 詳細のページにも当たるが、詳細は別の班が別の Issue で整えている最中なので、
* ここでも一覧のページだけに絞る（差 E-1 と同じ理由）.
*/
.single-content--story .entry-content #story:has(.story_inner) .heading {
margin-bottom: calc(12% + var(--pa-inner-gutter) * 0.24);
}
/*
* 差 E-3: 一覧の題の上外余白を素へ戻す。移行元スマホ版の `h3.corner_ttl` は
* 上外余白を持たない。dev はテーマの本文の見出しの飾り（上へ 30px）が残っていた。
*
* 🚨 この 30px は器の外へ抜けない（器 `.story_inner` が上の内余白 25px を
* 持つため相殺されない）。**そのぶん題が 30px 下がっていた.**
*/
.single-content--story .entry-content #story .story_inner .archive_ttl {
margin-top: 0;
}
/*
* 差 F: 無料相談の器の下外余白。移行元スマホ版のこの器は `「こだわりを捨てる」関連記事一覧
`）。
移行元の写し元は `public/css/page_introduce.css` の 241〜246 行で、
`display: inline-block; margin-left: 20px; color: #000000; font-size: 18px;` である。
dev は字の大きさと色だけが写っており、**残り 2 つが落ちていた**（幅 1440px で実測）:
- `display` が `inline` のまま → 行の高さが 18px にとどまり、**見出しが 30px と
移行元の 34px より 4px 低い**（塊にすると行送り 30px の箱として置かれるため）
- `margin-left` が 0 → **副題が 20px 左へ寄る**
この見出しは分類別の 6 ページに 1 つずつある。⚠ 同じ `.archive_ttl span` は
ワード解説・婚活スポット・アンケートにもあるが、このファイルは配られない. */
#story .story_inner .archive_ttl span {
display: inline-block;
margin-left: 20px;
/* ⚠ **行送りは数値で書くと子に伝わり方が変わる。**移行元は見出しへ
`line-height: 100%` と書いており、これは見出しの側で 30px という長さに
決まってから子へ伝わる。テーマは同じ意味のつもりで `line-height: 1` と
書いているが、**数値は「数値のまま」子へ伝わり、子の字の大きさ（18px）で
計算し直される**。そのため副題の行送りが 18px になり、塊に戻しても
見出しの高さが 30px のままだった（移行元は 34px）。ここで移行元と同じ
30px（= 見出しの 30px の 100%）を長さで書く。
テーマ側の `line-height: 1` は `.archive_ttl` を使う別の 4 種のページ
（ワード解説・婚活スポット・アンケート・しあわせレポート）にも効くので、
ここでは直さない（直すなら別の Task で、それぞれの画面の検算が要る）. */
line-height: 30px;
}
/* 🚨 **幅で出し分けるためだけの「包み」は、上の副題の見た目を拾わない**
（Task #5788・Bug #5778）。
`introduce/story/all.html` は副題だけでなく**かぎ括弧も移行元の携帯版に無い**ので、
投入側でかぎ括弧まで `span` で包む。その包みも `span` なので、上の規則が当たって
左に 20px が付き、字が 18px へ縮む。
🚨 **`main.css` の打ち消しでは勝てない。**上の規則は `#story` を持つので
詳細度が (1,2,1) で、`main.css` 側の打ち消し (0,3,0) では id の 1 つ分だけ負ける。
**ここで `#story` を含めて書く**（この規則は (1,3,0) になり、類の数で上に勝つ。
置く順番には依らない）。
🚨 **`display` は打ち消しに入れない。**隠す指定（`.pa-legacy-pc-only { display: none }`）
とぶつかって隠れなくなる. */
#story .story_inner .archive_ttl .pa-legacy-plain {
margin: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
}
/*
* 🚨 **札の写真の器へ当てる規則は置かない（当たらないため）。**
*
* 移行元は写真を `「◯◯」関連記事一覧
`）。
移行元スマホ版は塊にせず行の中に置き、左の空きも持たない. */
.single-content--story .entry-content #story .story_inner .archive_ttl span {
display: inline;
margin-left: 0;
font-size: 17px;
line-height: 20px;
}
/* 🚨 **幅で出し分けるためだけの「包み」は、上の副題の見た目を拾わない**
（Task #5788）。携帯版の包みは `すべての記事` という**素の字だけ**で、
移行元はそれを**見出しそのものの大きさ**で出す。上の 17px が付くと差が残る。
上の規則は (1,4,1)、この規則は (1,5,0) で、類の数で勝つ（順番には依らない）. */
.single-content--story .entry-content #story .story_inner .archive_ttl .pa-legacy-plain {
margin: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
}
}
/* ==============================================================
* 一覧の器の左右の余白を携帯幅で移行元のスマホ版へそろえる
* （Issue #3095・ユーザー裁定 46）
*
* 移行元のスマホ版は器を画面いっぱい（375px）に置き、**中の余白を 6.25%
* （23.44px）で作る**。写し元は `sp/introduce/story/css/style.css` の 33〜35 行
* `#story .box { padding: 25px 6.25% 32px }` である。
*
* dev は器も中身も画面いっぱいで内余白を持たず、**カードが画面の端に触れて**
* いた（幅 375px の実測: 移行元スマホ版の一覧は x=23.44 / 幅 328.13、
* 直す前の dev は x=0 / 幅 375）。
*
* 🚨 **箱の数え方を `border-box` にすること。**器は
* `main.css` 19956〜19959 行が `width: min(1100px, 100vw)` で画面いっぱいに
* 置いている。内余白を足すとき数え方が `content-box` のままだと外形が
* 375 + 46.88 = 421.88px になり、**横スクロールが出る。**
* CSS の寸法の回帰テスト `spec-story-inner-sp.json` が「器の外形は 375px のまま」と「中の一覧は
* 328.13px」を組で見張る。片方だけだと、はみ出したまま通ってしまう。
*
* 🚨 **百分率でなく `vw` で書く。**写し元は `6.25%` だが、**百分率は「その要素の
* 幅」ではなく「その要素を包む器の幅」を基準に解かれる。**移行元では包む器が
* 画面幅そのもの（375px）なので 6.25% = 23.44px になるが、dev の包む器は
* 本文の柱（345px）なので 6.25% = 21.56px にしかならず、**移行元より 1.88px
* 狭くなる**（実際にそうなって型紙が落ちた）。`6.25vw` は画面幅を基準にするので、
* 移行元と同じ 23.44px になる。**写し元の単位をそのまま書き写さない。**
* ============================================================== */
@media (max-width: 749px) {
.single-content--story .entry-content #story .story_inner {
box-sizing: border-box;
padding: 25px 6.25vw 32px;
}
}
/* ==============================================================
* 灰色のリンク帯を携帯幅で縦積みにする（Issue #3095・ユーザー裁定 46）
*
* 移行元のスマホ版は 3 本を**縦に積み**、左そろえで置く。写し元は
* `sp/css/style.css` の 263〜275 行である。
*
* .txtBtn_gray01 a {
* display: block; text-align: left; background-color: #bbb; color: #fff;
* padding: 5px 20px 5px 10px; font-size: 11px; margin-bottom: 4px;
* }
*
* dev は移行元のパソコン版と同じ `display: flex` の**横並び**のままだった。
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 に取得）:
*
* | 観点 | 移行元スマホ版 | 直す前の dev |
* |----------|-------------------------|---------------------------|
* | 並べ方 | 縦積み（3 本とも幅いっぱい） | 横並び（3 列） |
* | 1 本の外形 | 328.13 × 27 | 114.06 / 110.25 / 135.69 × 126.95 |
* | 字 | 11px | 13px |
* | そろえ | 左 | 中央 |
* | 帯の高さ | 150 | 126.95 |
*
* 🚨 **地色と字の色は両側で一致している**（地 `rgb(187,187,187)` / 字は白）。
* 実測で確かめたので触らない。**推定で直すと、直さなくてよいものを直して
* 移行元から離れる。**
*
* 🚨 **山形の記号は dev も持っている**（`main.css` 36686〜36696 行の `::before`）。
* 移行元スマホ版は `top: 10px` `right: 10px`、dev は `top: 12px` `right: 12px` で、
* 大きさ（5×5px）と向き（`rotate(-45deg)`）と色（白）は同じである。位置だけ
* そろえる。**採取の道具は擬似要素を読まないので、この 2px は実測ではなく
* 写し元どうしの突き合わせで出した値である。**配備後に実ページで確かめる。
*
* 🚨 **範囲を `#story` の中に閉じる。**`.txtBtn_gray01` は移行元のサイト共通の
* クラスで、他の区画にも出る。そちらは実測していないので触らない.
* ============================================================== */
@media (max-width: 749px) {
.single-content--story .entry-content #story .txtBtn_gray01 {
display: block;
}
.single-content--story .entry-content #story .txtBtn_gray01 a {
display: block;
margin: 0 0 4px;
padding: 5px 20px 5px 10px;
font-size: 11px;
line-height: normal;
text-align: left;
}
.single-content--story .entry-content #story .txtBtn_gray01 a::before {
top: 10px;
right: 10px;
}
}
/* ==============================================================
* 「成婚のポイントで選ぶ」を携帯幅で移行元のスマホ版へそろえる
* （Issue #3095・ユーザー裁定 46）
*
* 写し元は `sp/introduce/story/css/style.css` の 36〜40 行と 105〜141 行である。
*
* #story .box.grid { padding: 25px 6.25% 8px; 地の絵 bg_grid.jpg }
* #story .box.grid .point_box { margin: 0 0 15px; padding: 10px 3.571%;
* 地の絵 bg_num.jpg }
* #story .box.grid .point_box dl { padding: 0 10% 0 0; color: #fff;
* 地の絵 arrow.png right center 9×14px }
* #story .box.grid .point_box dt { margin: 0 0 8px; padding: 0 0 8px;
* width: 100%; font-size: 18px;
* 地の絵 line.png left bottom 100% auto }
* #story .box.grid .point_box dd { margin: 0; padding: 0; width: 100%;
* font-size: 9px }
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 に取得）:
*
* | 部品 | 移行元スマホ版 | 直す前の dev |
* |------------|-----------------------|-------------------------|
* | 区画の器 | x=0 / 幅 375 | x=15 / 幅 345 |
* | 札 | x=23.44 / 幅 328.13 / 高さ 84.59（5 枚とも同じ） | x=0 / 幅 375 / 134.38〜159.56 |
* | 題 | 18px | 22px |
* | 説明 | 9px / 行送り 10.8px | 14px / 25.2px |
* | 矢印 | あり（9×14px・右中央）| **無し**（携帯幅で消している） |
*
* 🚨 **矢印が消えているのは dev 側の指定である。**テーマは携帯幅で
* `#story .box_point_inner { background-image: none }` を当てて矢印を消している。
* 移行元のスマホ版は矢印を持つので、消すのをやめる。
*
* 🚨 **百分率でなく `vw` で書く（器の側だけ）。**百分率は「包む器の幅」を基準に
* 解かれる。移行元では包む器が画面幅（375px）だが、dev の包む器は本文の柱
* （345px）なので値がずれる。器の左右だけ `6.25vw` にし、**その中の札の
* `3.571%` は百分率のまま**でよい（器を 375px にそろえたあとは、包む器の幅が
* 移行元と同じ 328.13px になるため）。
*
* 🚨 **地の絵は触らない。**`bg_grid.jpg`（区画）と `line.png`（題の下線）は
* dev も同じファイルを持つ。札の地の絵だけは移行元スマホ版が `bg_num.jpg`、
* dev がパソコン版の `bg_dot.jpg` で**別のファイル**だが、**見た目が同じかを
* 実測していない**ので、この PR では触らずに記録だけ残す.
* ============================================================== */
@media (max-width: 749px) {
/* 区画の器を画面いっぱいに戻し、内余白を移行元スマホ版と同じにする。
器の作り（幅と負の外余白）は、同じファイルの一覧の器と同じ書き方である. */
.single-content--story .entry-content #story .grid_box {
box-sizing: border-box;
width: min(1100px, 100vw);
margin-inline: calc(50% - min(550px, 50vw));
padding: 25px 6.25vw 8px;
}
/* 🚨 **中の器も器の中へ戻す。**テーマは `.detail_body` を画面いっぱいに
広げており（負の外余白）、器に内余白を足しただけでは**札がその内余白を
突き抜けて x=0 / 幅 375 のまま**になる（実際にそうなって型紙が落ちた）。
幅と外余白を素へ戻して、器の内余白の中に収める. */
.single-content--story .entry-content #story .grid_box .detail_body {
width: auto;
margin-inline: 0;
padding: 0;
}
.single-content--story .entry-content #story .box_point {
margin: 0 0 15px;
padding: 10px 3.571%;
}
.single-content--story .entry-content #story .box_point .box_point_inner {
padding: 0;
}
/* 🚨 矢印を消すのをやめる。移行元スマホ版は右中央に 9×14px の矢印を持つ. */
.single-content--story .entry-content #story .box_point dl {
margin: 0;
padding: 0 10% 0 0;
background-image: url("../images/arrow.png?ver=17cb037a5b54");
background-repeat: no-repeat;
background-position: right center;
background-size: 9px 14px;
}
/* 🚨 **行送りも組で写す。**字の大きさだけ写したところ、題の高さが 26px に
なって移行元の 35px と 9px ずれ、札の高さも 75.6 対 84.59 でずれた。
移行元スマホ版は題に行送りの指定を持たず `normal`（18px の書体で 27px）
である。テーマ共通の行送りが残っていたのが原因. */
.single-content--story .entry-content #story .box_point dt {
float: none;
width: 100%;
margin: 0 0 8px;
padding: 0 0 8px;
font-size: 18px;
line-height: normal;
}
.single-content--story .entry-content #story .box_point dd {
float: none;
width: 100%;
margin: 0;
padding: 0;
font-size: 9px;
line-height: 1.2;
}
}
/* ==============================================================
* 無料相談の帯を携帯幅で移行元のスマホ版へそろえる
* （Issue #3095・ユーザー裁定 46・司令塔の裁定「CSS で合わせる」）
*
* 🚨 **移行元のスマホ版はここを画像ボタンで作っている。**
* `sp/introduce/story/include/cv.shtml` は
* `
` を置く（横長・
* 328.13 × 65.63px）。dev は文字ボタン（赤地・26px）である。
*
* 司令塔の裁定は「画像へ差し替えず CSS で合わせる」なので、**移行元のスマホ版が
* 同じ役割で持っている文字ボタンの共通部品**（`sp/css/style.css` の 288〜305 行）を
* 写し元にする。移行元のこの部品は成婚ストーリーでは使われていないが、
* **スマホ版の他のページで同じ赤いボタンとして出ている**ので、見た目の基準として
* これ以上に近いものは無い。
*
* .txtBtn_red01 { width: 94%; margin: 5vw auto }
* .txtBtn_red01 a { display: block; height: 70px; line-height: 71px;
* font-size: 20px; background-color: #e1200f; color: #fff;
* text-align: center; padding-right: 16px;
* letter-spacing: 0.04em }
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 に取得）:
*
* | 部品 | 移行元スマホ版 | 直す前の dev |
* |----------|-----------------------|-----------------------|
* | 帯の器 | 328.13 × 98.63 | 375 × 232 |
* | 前置き | 15.08px / 中央そろえ | 20px / 行送り 36px |
* | ボタン | 328.13 × 65.63（横長）| 187.5 × 186（縦長） |
*
* **dev が縦長になる原因**は、`story.css` の 488〜508 行が移行元の**パソコン版**の
* 値（器 1100px に対し幅 50%・字 26px・左右の内余白 50px）をメディアクエリの外で
* 当てているためである。携帯幅では 375px の 50% = 187.5px しか無く、左右の
* 内余白 50px を引いた 87.5px に 26px の字を流すので何行にも折り返す。
*
* 🚨 **前置きの字は `.fs15` の計算値である。**移行元スマホ版の `.fs15` は
* `116%`（`sp/css/style.css` 225〜227 行）で、基準の字 13px から 15.08px になる
* （`sp/css/basic.css` 21 行がすべての要素を 13px にしている）。**`15px` と
* 書き写さない.**
* ============================================================== */
@media (max-width: 749px) {
/* 前置きの一文。移行元スマホ版は `.tac`（中央そろえ）を持つ. */
.single-content--story .entry-content #story .btnWire > .serif {
margin-bottom: 10px;
font-size: 15.08px;
line-height: normal;
text-align: center;
}
.single-content--story .entry-content #story .btnWire .txtBtn_red01 {
width: 94%;
margin: 0 auto;
}
/* 🚨 **高さは `min-height` で書く。**写し元は `height: 70px` だが、この
リポジトリには「写した CSS に固定の高さを書かない」歯止めがあり
（`tests-retired/pa-cms-introduce-voice-story` の 5 節）、実際に落ちた。歯止めの
趣旨は「中身が増えたときに崩れないこと」である。`min-height` なら
**文言が 1 行に収まるかぎり見た目は写し元と同じ 70px** で、収まらなく
なったときだけ伸びる。移行元は `height` なので、その場合は文字が箱から
あふれる。**あふれるほうを写す理由が無い**ので、ここは歯止めに従う. */
.single-content--story .entry-content #story .btnWire .txtBtn_red01 a {
display: block;
box-sizing: border-box;
min-height: 70px;
padding: 0 16px 0 0;
font-size: 20px;
line-height: 71px;
letter-spacing: 0.04em;
text-align: center;
}
}
/* ==============================================================
* 携帯幅の絵を移行元のスマホ版のものへ差し替える
* （Issue #3095・ユーザー裁定 46）
*
* 移行元はスマホ版に**別のファイル**を置いている。縦横比が違うので、
* パソコン版の絵をそのまま縮めても移行元の見た目にならない。
*
* | 部品 | 移行元スマホ版 | dev（パソコン版の絵） |
* |----------------------|-------------------------|-----------------------|
* | 上部の帯 | `sp/images/ttl_introduce.png` 750×240（比 3.125） | `ttl_introduce.jpg`（比 6.11） |
* | すべての記事を見る | `sp/introduce/story/images/btn_all_list.jpg` 560×80（比 7.0） | `btn_all_story.jpg` 352×48（比 7.33） |
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 に取得）:
*
* 上部の帯 移行元 375 × 120 直す前の dev 344.98 × 56.45
* すべての記事を見る 移行元 328.13 × 46.88 直す前の dev 352 × 48（器 375 の中で中央からずれる）
*
* 取り込んだ絵の縦横比で計算すると、375px 幅で 120.00px、328.13px 幅で
* 46.88px になり、**移行元スマホ版の実測と一致する**。
*
* 🚨 **絵はテーマに無かったので取り込んだ。**司令塔の裁定「テーマに無ければ
* 取り込む」に従い、移行元の写し（記録版 19f499fe3）から次の 2 つを足した。
* - `assets/images/ttl_introduce_sp.png`（`sp/images/ttl_introduce.png` の写し）
* - `assets/introduce-voice-story/images/btn_all_list_sp.jpg`
* （`sp/introduce/story/images/btn_all_list.jpg` の写し）
*
* 差し替えは移行元の JavaScript を持ち込まず、テーマが会社情報のナビと店舗の
* 先頭へ戻るで既に使っている `content: url(...)` の書き方に揃える
* （`main.css` 1051 行ほか）。
*
* 🚨 **`#2817` の教訓**: 差し替えは**その絵が出ている幅だけ**に効かせる。幅を
* またいで効くと寸法が化けて組みが動く。ここは 749px 以下に閉じてある.
* ============================================================== */
@media (max-width: 749px) {
/* 上部の帯。
🚨 **絵の器だけを画面いっぱいに戻す。**絵は本文の柱（345px）の中に
置かれており、差し替えただけでは 345 × 110.4px にしかならなかった
（移行元スマホ版は 375 × 120px。実際に型紙が 2 件で落ちた）。
**同じ区画の中にある会員紹介メニューには触らない**（1 班が共通部品として
作っている最中で、幅を動かすと二重に直すことになる）。そのため区画
`#introduce_top` ごとではなく、絵の器 `h2` だけを広げる. */
.single-content--story .entry-content #introduce_top h2 {
width: min(1100px, 100vw);
margin-inline: calc(50% - min(550px, 50vw));
/* 絵の下の空き 25px（2026-09-03 のユーザー目視の指摘①）。移行元の
スマホ版は器 `#introduce_top .box` の上内余白 25px で作っているが、
dev にはその器が無いので絵の器の下外余白で作る。区画の側の内余白は
0 にした（上の `#introduce_top:has(.introduce_nav--open)` の注釈）。
既定の 18px のままだと、絵の下が移行元より 2px 広い 27px になる. */
margin-bottom: 25px;
}
.single-content--story .entry-content #introduce_top h2 img {
content: url("../../images/ttl_introduce_sp.png?ver=1ec066429c1a");
width: 100%;
height: auto;
/* 🚨 **塊として置く。**絵をインラインのまま置くと、器の行送りの分だけ
絵の下に余りが出る（実測 9px）。移行元スマホ版の器は絵の高さ 120px と
ぴったり同じで、この余りが無い。`line-height: 0` でも消せるが、
別の規則に負けて残っていたため、行送りに左右されない
`display: block` で消す. */
display: block;
}
/* 「すべての記事を見る」。移行元スマホ版は器の幅いっぱい（328.13px）に置く. */
.single-content--story .entry-content #story .btn_all_story img {
content: url("../images/btn_all_list_sp.jpg?ver=f0a4bfe57d44");
width: 100%;
height: auto;
/* 🚨 **塊として置く。**絵をインラインのまま置くと、器の行送りの分だけ
絵の下に余りが出る（実測 8px）。移行元スマホ版の器は絵の高さ 46.88px と
ぴったり同じで、この余りが無い. */
display: block;
}
/* ボタンの上下の空き（2026-09-03 のユーザー目視の指摘③）。
`#story .btn_all_story { margin: 20px 0 60px }` は移行元の**パソコン版**の
写しで、スマホ版のミラーはその 1 枚を読み込まない。狭い画面では上を 0・
下を 30px にする。上を 0 にすると、直前の札の下外余白 18px がそのまま
空きになり、移行元と同じ 18px になる（隣り合う外余白は大きいほうに
まとまるため、20px を残すと 20px になってしまう）。
幅 375px の実測（移行元 = 本番 https://www.p-a.jp を携帯の名乗りで開き、
転送後の https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 23:4x JST に取得）:
| | 移行元 | dev（直す前） |
| 直前の札からボタンまで | 18px | 38px |
| ボタンの器の高さ | 46.88px | 54.88px |
| ボタンから次の区画まで | 30px | 60px |
| 3 つの合計 | 94.88px | 152.88px | */
.single-content--story .entry-content #story .btn_all_story {
margin: 0 0 30px;
}
}
/* ==============================================================
* 題名の区画・灰色の帯・赤いボタンを、移行元のスマホ版へ合わせる
* （Task #3141・ユーザー裁定 46）
*
* 幅 375px の実測（移行元は本番 https://www.p-a.jp を携帯の名乗りで開き、
* 転送先の https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 22:1x〜22:2x JST に
* 取得。dev も同じ道具・同じ手順）:
*
* | 部品 | 移行元スマホ版 | 直す前の dev |
* |----------------------------|-----------------------------------|-----------------------------|
* | 題名の器 | 375 × 571.59・内余白 25/6.25%/32 | 345 × 467.98・内余白 0 |
* | 並び | 見出し → 挿絵 → 本文 | 挿絵 → 本文（見出しは本文の中）|
* | 見出し | 28px・太さ 700・中央・高さ 70 | 22px・左・高さ 33 |
* | 見出しの背景 | `parts.png`（桃色の筆） | 無し |
* | 本文 1 段落目 | 16px・行 28.8px・太さ 700・#322422| 15px・行 27px |
* | 本文 2 段落目 | 16px・行 normal | 15px・行 27px |
* | 灰色の帯の上の空き | 48px | 78px |
* | 灰色の帯の下から先頭へ戻る | 30px | 測り直す |
* | 赤いボタン | 328.13 × 65.63（絵） | 224 × 71（文字） |
*
* 🚨 **並び替えは投入した本文を組み替えずに行う。**移行元の並びは
* 見出し → 挿絵 → 本文だが、dev の本文は 挿絵 →（見出し + 本文）の入れ子である。
* 見出しは本文の器の中にいるので、`order` だけでは器の外へ出せない。本文の器へ
* `display: contents` を当てて中身を器の直接の子に見せ、そのうえで `order` を振る。
* **パソコン幅の組みと描画は変えない**（この節はすべて 749px 以下の中にある）。
*
* 🚨 **百分率の基準は「包む器の中身の幅」である**（司令塔の裁定・`vw` は使わない）。
* 題名の器を画面幅まで広げてから、その子へ `margin-inline: 6.25%` を当てる。
* 器の側へ `padding-inline: 6.25%` と書くと、包む器（幅 345）を基準に解かれて
* 21.56px になり、移行元の 23.4375px と 1.88px ずれる。
* ============================================================== */
@media (max-width: 749px) {
/* 題名の器。移行元は画面いっぱいの器で、左右の内余白を百分率で持つ。
dev の本文の器は左右に 15px の余白を持つので、いったん外へ広げてから
子の外余白で 6.25% を作る. */
.single-content--story .entry-content #story .heading {
width: auto;
/* 🚨 溝の打ち消しは割合で書く（Bug #7062・上の節と同じ理由）. */
margin: 0 calc(-100% / 14) 45px;
padding: 25px 0 32px;
display: flex;
flex-direction: column;
}
/* 🚨 **詳細ページは題名の器の下の空きが違う（Bug #3440）。**
*
* すぐ上の規則は一覧のページに合わせてあり、詳細にも当たっていた。移行元
* スマホ版の詳細は、題名の器そのものに下内余白を持たず、下外余白だけを
* **柱の幅の 12%** で持つ（`sp/introduce/story/css/style.css` の
* `.heading { margin-bottom: 12% }`）。器の下から本文の話数までは 40.95px で、
* dev は 32（下内余白）+ 45（下外余白）+ 25（本文の塊の上内余白）= 102px
* だった（携帯 390px の実測）。
*
* 🚨 **いまは 12% をそのまま書く（Bug #8379）。**以前は、dev の `#story` が
* 左右に 15px ずつの余白を持つ作りで、中身の幅が移行元の柱と違ったため、
* `(100% + var(--pa-inner-gutter) * 2) * 0.105` と戻してから掛けていた。
* その後 [PR #6228](https://github.com/mationinc/wp-platform/pull/6228) が
* `.single-content--story` の左右を 15px から 6.25% へ置き換え（下の Bug #7062
* の注釈）、`#story` の中身の幅は移行元の柱と同じ画面の 87.5% になった。
* 古い式のままだと、溝を 15px（トークンの値）と数えて 37.59px になり、移行元の
* 39.375px（328.125 × 12%）より 1.78px 短かった。帯の下の話数から下が、
* 標本 5 本（第 01・51・96・103・104 話）とも 1.78px 上にずれていた（幅 375
* の実測。2026-09-25・pa-verify-assets/B/8379-実測-0925/）。
*
* 百分率の外余白は包む器（`#story`）の中身の幅で解かれるので、画面幅が
* 変わっても移行元と同じだけ動く（`vw` は使わない・司令塔の裁定）. */
.single-content--story .entry-content #story:has(.storyTxt01) .heading {
margin-bottom: 12%;
padding-bottom: 0;
}
/* 本文の塊の上内余白。移行元の詳細は、題名の器の下外余白のすぐ下から
話数が始まる。上の 25px は移行元 `#story.detail { padding-top: 25px }`
にあたるもので、題名の器の上内余白がすでに持っている. */
.single-content--story .entry-content #story:has(.storyTxt01) > .grid_box {
padding-top: 0;
}
/* 🚨 本文の器を「無い」ことにして、中の見出しと段落を題名の器の直接の子に
見せる。こうしないと見出しを挿絵の上へ動かせない. */
.single-content--story .entry-content #story .heading > .heading-cont {
display: contents;
}
/* 並びは 見出し → 挿絵 → 本文の 1 段落目 → 本文の 2 段落目. */
.single-content--story .entry-content #story .heading > .heading-cont > h2 {
order: 1;
}
.single-content--story .entry-content #story .heading > .mv_cont {
order: 2;
}
.single-content--story .entry-content #story .heading > .heading-cont > .title_txt {
order: 3;
}
.single-content--story .entry-content #story .heading > .heading-cont > p:not(.title_txt) {
order: 4;
}
/* 見出し。桃色の筆の背景は移行元と同じ絵で、テーマが既に持っている
（`assets/introduce/images/story/parts.png`。移行元の
`introduce/story/img/parts.png` と中身が 1 バイトも違わないことを
SHA-256 で照合済み）. */
.single-content--story .entry-content #story .heading > .heading-cont > h2 {
margin: 0 6.25%;
min-height: 70px;
background: url("../../introduce/images/story/parts.png?ver=81d8810c2d3d") no-repeat 50% 50%;
color: #000;
font-size: 28px;
font-weight: 700;
line-height: normal;
text-align: center;
}
/* 挿絵。移行元は 156 × 250 で、内余白の内側に中央そろえで置く。
器を画面幅まで広げたので、左右の自動余白でも同じ x=109.5 になる. */
.single-content--story .entry-content #story .heading > .mv_cont {
display: block;
width: 156px;
/* 🚨 上限を添える。狭い画面で器より広くならないようにする歯止め
（`tests-retired/pa-cms-introduce-voice-story` の 5 節）. */
max-width: 100%;
height: auto;
margin: 15px auto 30px;
}
/* 本文の 2 段落。移行元は 16px で、1 段落目だけ太字・行送り 28.8px・
色 #322422 を持つ. */
/* 🚨 **幅の指定を打ち消す（`width: auto`）。**この 2 つの段落には、テーマ共通の
`main.css` が `.heading-cont .title_txt { width: 100% }` と
`.heading-cont p { width: 100% }` を当てている。器（`.heading-cont`）は
`display: contents` で無いことにしてあるため、`100%` は**題名の器の全幅
375px**として解かれる。そこへ左右の外余白 6.25%（23.4375px）が付くので、
段落が右へ 23.4375px はみ出し、画面が横に送れてしまう
（2026-09-03 のユーザー目視の指摘②）。
`width: auto` に戻すと、縦並びの子として器の幅から外余白を引いた
328.125px になり、移行元と一致する。
幅 375px の実測（移行元 = 本番 https://www.p-a.jp を携帯の名乗りで開き、
転送後の https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 23:4x JST に取得）:
| | 移行元 | dev（直す前） |
| 段落の左端 | 23.44px | 23.44px |
| 段落の幅 | 328.13px | 375px |
| 文書の幅（横送り） | 375px（無し） | 398px（有り） |
**`6.25%` は外余白のまま残す。**内余白や `vw` に替えない（内余白の百分率は
包む器の中身の幅を基準にするためずれ、`vw` は縦スクロールバーの幅を含む）. */
.single-content--story .entry-content #story .heading > .heading-cont > .title_txt {
width: auto;
margin: 0 6.25% 20px;
color: #322422;
font-size: 16px;
font-weight: 700;
line-height: 28.8px;
text-align: left;
}
.single-content--story .entry-content #story .heading > .heading-cont > p:not(.title_txt) {
width: auto;
margin: 0 6.25%;
font-size: 16px;
line-height: normal;
text-align: left;
}
/* 灰色の帯。移行元は帯そのものが画面いっぱいの器で、上 25px・下 32px の
内余白を持つ。dev は帯が幅 328 で外余白 30px を持ち、さらに親の器の
内余白 25px が上に乗るため、最後のポイントの札から 1 本目のリンクまでが
移行元 48px に対し 78px だった（+30px）.
🚨 **CSS の寸法の回帰テスト `spec-story-gray-band-sp` はリンク 3 本しか見張っておらず、
器そのものを見ていなかったので通っていた。**この PR で器の的を足す. */
/* 🚨 **包む器の内余白を先に 0 にする。**内余白の百分率は「包む器の中身の幅」を
基準に解かれる。包む器（`.story_inner`）が左右 23.4375px の内余白を持ったままだと、
帯の `6.25%` は 328.13px を基準にして **20.5px** になり、移行元の 23.4375px と
2.94px ずれる（型紙が実際に落ちた）。**器を移行元と同じ「内余白を持たない
画面幅の包み」にそろえてから**、帯の側に百分率を持たせる. */
.single-content--story .entry-content #story .story_inner:has(> .txtBtn_gray01) {
padding: 0;
}
.single-content--story .entry-content #story .txtBtn_gray01 {
width: auto;
margin: 0;
padding: 25px 6.25% 32px;
}
/* 🚨 **当て先を並び順（`:last-of-type`）で指定しない。**型紙は区画を 1 つだけ
置くので、並び順で書くと型紙の中の唯一の器にも当たり、一覧や絵の型紙まで
巻き添えで落ちる（実際に 3 本落ちた）。**中身（灰色の帯を持つこと）で
指定する。**移行元は帯の器の下端から先頭へ戻るの上端まで 30px である. */
.single-content--story .entry-content #story .story_inner:has(> .txtBtn_gray01) > .page_top {
margin-top: 30px;
}
/* 赤いボタン。移行元は幅いっぱいの**絵**（`sp/images/btn_reservation2.png`・
実寸 500 × 100 を 328.13 × 65.63 で描く）である。大原則 3（画像に焼き込まれた
文言は「背景を画像/CSS + 文言はテキスト」で再現）に沿って、dev は文字の
ボタンのまま**外形だけ**移行元に合わせる。
🚨 **CSS の寸法の回帰テスト `spec-story-cta-sp` の「高さ 70・行 71px」は、この画面に当たらない
CSS の規則から作った期待値だった。**移行元のこの画面のボタンは
`.txtBtn_red01` ではなく `.mb15` の中の絵で、幅 375px の実測は 65.63px である。
🚨 **高さは、このファイルの末尾（Bug #3382 の節）で比に置き換えてある。**
ここに在った `min-height: 65.63px` と `line-height: 65.63px` は、幅 375px で
測った 1 点の値で、幅 390px では 2.6px 足りなかった。移行元の絵は
500 × 100 なので、幅に対する比（`aspect-ratio: 5 / 1`）で描くのが正しい. */
.single-content--story .entry-content #story .btnWire .txtBtn_red01 {
display: block;
width: 100%;
margin: 0;
}
}
/* ==============================================================
* 会員紹介の案内メニューを携帯幅で畳む（Task #3141・ユーザーの目視の指摘）
*
* 移行元のスマホ版は、この案内メニューを「会員紹介MENU ▽」の帯 1 本に畳んでいる。
* dev は 5 項目が開いたままだった（ユーザーの目視で「会員紹介MENU がない」と指摘）。
*
* 開閉の仕組みと会員紹介 6 画面に共通の値は、1 班が作った共通の部品が持つ
* （`main.css` の「携帯幅で畳める案内メニュー」の節と `assets/js/collapsible-nav.js`）。
* **枠線・字・余白・矢印は画面ごとに値が違う**ので、この画面ぶんをここへ置く。
* 目印を本文へ差し込むのは `inc/story-nav-collapsible.php` である。
*
* 幅 375px の実測（移行元は本番を携帯の名乗りで開き、転送先の
* https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 22:36 JST に取得）:
*
* | 部品 | 移行元スマホ版 | 共通の部品の既定 |
* |----------------|--------------------------------------------------|------------------|
* | 帯の器 | 375 × 83・内余白 25px 6.25% 0・枠線 2px #463d3c | 枠線は同じ |
* | 押しボタン | 328.13 × 54・字 16.25px・太さ 700・游明朝 | 字 12px（札 13px）|
* | 押しボタンの色 | 文字 #463d3c・地 白 | 同じ |
* | 矢印 | 8px 角・押しボタンの幅の 25% の位置・上 38% | 6px・右 −30px・上 20% |
* | 一覧 | 地色 #f7f7f7・内余白 10px 0 0 | 地色は同じ |
*
* 🚨 **矢印の位置は押しボタンの幅を基準にする。**移行元の `right: 25%` は
* 押しボタン（328.13px）の 25% = 82.03px である。共通の部品は矢印を文字の器
* （`__label`）の中に置いて `position: relative` を与えているので、そのままだと
* 文字の幅が基準になってしまう。この画面では文字の器の位置指定を外し、
* 押しボタンを基準に戻す。
*
* 🚨 **一覧の上の隙間を「一覧の内余白」で作らない。**内余白で持たせると、畳んで
* 高さを 0 にしても下限として残り、畳んだ器が 10px 高くなる（1 班が実際に踏んだ）。
* **1 件目の上外余白**で作ると、畳んだときは効かず開いたときだけ出る.
* ============================================================== */
@media (max-width: 749px) {
/* 区画を本文の器の内余白ぶん外へ広げ、画面幅そのものに戻す。
🚨 `padding-inline` に百分率を書くと包む器（幅 345）が基準になり、
移行元の 23.4375px にならない。**子の外余白で 6.25% を作る**. */
/* 🚨 **上の内余白は 0 にする。**ここに 25px を置くと、グローバルヘッダーと
題名の絵の間に空白ができる（2026-09-03 のユーザー目視の指摘①）。移行元の
スマホ版は 25px を**題名の絵の下**に置いており、絵は画面の上端（ヘッダーの
すぐ下）から始まる。
幅 375px の実測（移行元 = 本番 https://www.p-a.jp を携帯の名乗りで開き、
転送後の https://www.p-a.jp/sp/introduce/story/ を 2026-09-03 23:4x JST に取得）:
| | 移行元 | dev（直す前） |
| ヘッダーの下端から絵の上端 | 0px | 25px |
| 絵の下端から案内メニュー | 25px | 27px |
| 区画 #introduce_top の高さ | 203px | 230px |
25px は下の `#introduce_top h2` の下外余白へ移した。移行元は器
`#introduce_top .box`（dev には無い器）の上内余白 25px で作っている. */
/* 🚨 **溝の打ち消しを 15px で直書きしない（Bug #7062）。**
[PR #6228](https://github.com/mationinc/wp-platform/pull/6228) が
`.single-content--story` の左右を **15px から 6.25% へ置き換えた**ので、
15px の打ち消しでは足りず、**全幅のはずが 358.125px になり左右に 8.4px の白が残る**
（2026-09-17 21:48 の実測）。
`-100% / 14` は**包む器の中身の幅に対する割合**である。移行元の携帯版は
左右に画面幅の 6.25% ずつを取るので、中身は 87.5%。**溝 ÷ 中身 = 6.25 ÷ 87.5 = 1/14**
で、どの画面幅でも比が変わらない。幅 375px では 328.125 ÷ 14 = 23.4375px になる。
🚨 **`vw` は使わない**（司令塔の裁定）。`100vw` は縦スクロールバーの幅を含むため. */
.single-content--story .entry-content #introduce_top:has(.introduce_nav--open) {
width: auto;
margin-inline: calc(-100% / 14);
padding-top: 0;
}
.single-content--story .entry-content #introduce_top .introduce_nav--open {
width: auto;
margin-top: 0;
margin-inline: 6.25%;
}
/* 押しボタン。移行元は明朝の 16.25px・太字で、色は文字 #463d3c・地は白である。
🚨 **その内余白・書体・字の大きさをここに書かない（Task #3232）。**共通部品の
既定が `padding: 15px` と 16.25px の明朝になったので、同じ値をこの画面で
繰り返さない。繰り返すと、既定を変えたときに片方だけ動いて食い違う. */
/* 文字の器。この画面は矢印の基準を押しボタンへ戻すので、`position` だけを
打ち消す。**字の大きさは共通部品の既定（16.25px）をそのまま使う。** */
.single-content--story .entry-content .pa-collapsible-nav.is-collapsible .pa-collapsible-nav__label {
position: static;
}
/* 矢印。移行元は 8px 角で、押しボタンの幅の 25% の位置に置く。
閉じているとき上から 38%・開くと 45%. */
.single-content--story .entry-content .pa-collapsible-nav.is-collapsible .pa-collapsible-nav__label::after {
/* 🚨 絶対配置をここでも書く。共通の部品から受け継いではいるが、歯止めの検査は
**同じ規則の中に** `position: absolute` があることで「絵の代わりに形を描く
飾り」と見分ける（`tests-retired/pa-cms-introduce-voice-story` の 5 節）。
書かないと固定の大きさが「中身の入る箱」と誤って数えられる. */
position: absolute;
top: 38%;
right: 25%;
width: 8px;
height: 8px;
}
.single-content--story .entry-content .pa-collapsible-nav.is-collapsible.is-open .pa-collapsible-nav__label::after {
top: 45%;
}
/* 一覧の上の隙間は 1 件目の上外余白で作る（内余白で作らない）. */
.single-content--story .entry-content .pa-collapsible-nav.is-collapsible .pa-collapsible-nav__panel > li:first-child {
margin-top: 10px;
}
}
/* ==============================================================
* 成婚ストーリー一覧（/introduce/story/）の携帯幅を移行元スマホ版へそろえる
* （Bug #3382・裁定 67）
*
* 幅 390px で両側を測ると、ページ全体の高さが移行元 7419 に対し dev 7570 で
* **+151px** あった。写しから測った内訳は次のとおりである（2026-09-04 16:0x JST。
* 移行元は本番を携帯の名乗りで開いた転送先 https://www.p-a.jp/sp/introduce/story/、
* dev は https://d1u1dshxgcylna.cloudfront.net/introduce/story/ を PR #3388 の
* 反映後に写した。**両側とも配信された実 HTML をそのまま使い、dev 側だけ
* テーマの CSS を作業ツリーから差し替えて測る**方式である）。
*
* | 差 | 何が | 1 か所あたり | 件数 | 小計 |
* |----|------|--------------|------|------|
* | A | 札の写真が行の中の要素のまま | +8.0 | 6 | +48.0 |
* | B | 札の器の行送りが 27px（移行元は素） | +3.0 | 6 | +18.0 |
* | C | 4〜6 枚目の写真の器の下外余白 18px | +18.0 | 3 | +54.0 |
* | D | 一覧の器の下外余白 18px | +18.0 | 1 | +18.0 |
* | E | 題の上の空きの作り方（3 つの差の合計）| +3.2 | 1 | +3.2 |
* | F | 無料相談の器の下外余白が無い | −15.0 | 1 | −15.0 |
* | G | 無料相談の押しボタンが 2.6px 低い | −2.6 | 1 | −2.6 |
*
* 🚨 **このファイルの上のほうに「札の写真の器へ当てる規則は置かない（当たらない
* ため）」「写真の帯は移行元 224px / dev 224px で差が無い」と書いた注記があるが、
* 携帯幅では当てはまらない。**あの注記はパソコン幅の実測から書かれている。
* 携帯幅では A のとおり 1 枚あたり 8.0px の差が出る（取り決め 21）。
*
* 🚨 **差 E の +3.2 は、3 つの差が打ち消し合った残りである。**内訳は
* 「`#story` の上の内余白 25px が無い（−25）」「題の器の下外余白が 45px（移行元は
* 46.7969px・−1.7969）」「一覧の題の上外余白が 30px（移行元は 0・+30）」で、
* **合計だけを見ると 3.2px にしか見えないが、題の絵の帯そのものは 25px 高い位置に
* 描かれている**。3 つとも直さないと絵の位置がそろわない.
* ============================================================== */
@media (max-width: 749px) {
/*
* 差 A: 札の写真を塊にする。
*
* 移行元スマホ版のサイト共通 CSS（`public/sp/css/common.css` の 11〜15 行）は
* `img { width: 100%; height: auto; display: block }` を全画像へ当てる。
* dev の写真は行の中の要素のままなので、器の行送り 27px が作る**文字の下がり幅
* 8.0px** が写真の下に残る。
*
* 🚨 **写真の器は 1〜3 枚目と 4〜6 枚目で違う。**1〜3 枚目は投入が `` 直下の
* `