/*
* デートスポットの紹介ページ（/introduce/spot/spot01〜spot06/）を、テーマの土台に
* 載せるための手当て。
*
* **転記した CSS（spot-style.css）とこのファイルは役割が違う。**転記した CSS は移行元の CSS を
* scripts/pa-cms/transform-legacy-page-css.py で機械的に作り直したもので、手で書かない。
* このファイルは手で書く。移行元には無い指定だけを置く。
*
* 同じ作りが婚活アンケートのページ群（assets/introduce-survey/）にある。
*/
/* --------------------------------------------------------------
* 狭い画面で、本文が画面からはみ出さないようにする
*
* 移行元はこのページ群の区画 `#story` と `.wd_1100` を 1,100px で組み、上限を
* 置いていない。**移行元は幅の切り替えを持たない 1 枚ものの静的ページで、狭い画面では
* 携帯専用の別 URL（/sp/ 配下）へ転送していたため、上限が要らなかった。**
*
* CMS では 1 つのページが両方の幅に応える。上限を置かないと、携帯幅（375px）で本文が
* 画面の外へ出る。
*
* **移行元の見た目は変わらない。**この 6 ページは固定ページなので、親の
* `.page-content__body` の上限が 1,100px に上書きされている（`main.css` の
* 「本文の柱そのもの」の区画）。パソコン幅ではその 1,100px が先に効くため、
* `max-width: 100%` は何も変えず、`#story` は 1,100px のまま組まれる。
* 実測（幅 1440px）: 移行元 1,100px / 手当ての前 1,100px / 手当ての後 1,100px。
*
* **柱の上限そのものは外さない。**婚活アンケートの `theme-bridge.css` は
* `max-width: none` で外しているが、外すとテーマが揃えている左端 170px がずれ、
* 区画 `#story` も画面幅まで広がる（`#story` の上限をここで `max-width: 100%` に
* してあるため）。
*
* 🚨 **2026-09-08 に注記を 1 つ訂正した。**ここには「このページ群に 1,270px の要素は
* 無い」と書いてあったが、**誤りだった。**ページ上部の帯（`.main_ttl`）の画像は
* 移行元では 1,270 × 170px で、dev は 1,100 × 147.23px に押し込んでいた
* （縦横比 7.471 が両側で一致する）。**帯だけを負の外余白で柱の外へ出す形で直した**
* （このファイルの下の「ページ上部の帯を、移行元と同じ 1,270px で置く」の節。Bug #2875）。
*
* 中の器（`.story_inner` 等）には書かない。`#story` を抑えれば一緒に収まる
* （移行元でも中の器は自前の幅の指定を持たない）。
*
* 同じ手当てが婚活アンケートの theme-bridge.css にある（Issue #2196）。
* -------------------------------------------------------------- */
:is(.entry-content, .page-content__body) #story,
:is(.entry-content, .page-content__body) .wd_1100 {
max-width: 100%;
}
/* --------------------------------------------------------------
* 移行元のサイト共通のリセットを転記する
*
* **これが節の見出しの上余白と、段落の下余白の差の元である。**転記した CSS を作る
* 変換スクリプトは、根の要素（html / body / *）へ当たっていた指定を落とす。
* 落とさないとテーマのヘッダー・フッターへ波及して崩れるためで、設計としては
* 正しい。ただし**移行元がその初期化に頼っていた分が、テーマの既定値のまま残る。**
*
* 転記の元（移行元のミラー・Git サブモジュール `legacy/www.p-a.jp`）の該当箇所
* （`public/css/common.css`）:
* 76〜79 行 余白と内余白を 0 にする（p / div / dl / dt / dd / ol / ul / li / h1〜h6 ほか）
*
* 実測（2026-08-27・幅 1440px・`/introduce/spot/spot01/`）:
*
* | 測ったもの | 移行元 | dev いま | 転記だけ |
* |---|---|---|---|
* | 見出しの上余白 | 0px | 50px | 50px |
* | 見出しの下余白 | 25px | 20px | 25px |
* | 手前の段落の下余白 | 0px | 25px | 25px |
*
* **`div` と `span` は初期化しない。**テーマは素の `div` / `span` に何も当てていないので
* 打ち消す相手がおらず、書くとテーマのブロックひな形の内余白を消してしまう
* （同じ判断が `assets/introduce-survey/css/theme-bridge.css` にある）。
*
* 🔴 **初期化は区画 `#story` の中だけに限る。**`#story` の外には、移行元でも dev でも
* 共通部品が並ぶ（帯 `.box_support` / 見出しの画像 `.main_ttl` / 案内メニュー
* `.category_menu` / `.box_menu2` / 先頭へ戻る `.page_top`）。**移行元もこれらを
* `` の外で差し込んでいる**（`introduce/spot/spot01.html` の 111 行が
* `include/box_support.shtml` を `#story` の外で読む）。
*
* 絞らないと共通部品が壊れる。実測（幅 1440px・`/introduce/spot/spot01/`）:
*
* 帯の段落の行の高さ 48px（= 2.0 倍）→ normal に落ちる
* 帯の高さ 668px → 662px
*
* `.box_support p` は `assets/css/support-band.css` にあり、**詳細度が同じ**
* （どちらもクラス 1 + タグ 1）。`support-band.php` の方が `functions.php` で先に
* 登録されるため、絞らないとこちらが後から勝ってしまう（Bug #2279 の外部レビューの指摘）。
*
* `#story` の外にある要素の実測（3 ページで同じ）: 段落 2・見出し 1・箇条書き 3。
* 初期化したい対象（`.title_style05` 3 件・定義リスト 4 件）は**すべて `#story` の中**にある。
*
* 🔴 **絞るのに `#story` をそのまま書いてはいけない。**`#story` は id なので詳細度が
* 上がり、**転記した CSS（`spot-style.css`）の `.title_style05` の指定を打ち消してしまう**
* （実測: ベージュの帯が透明に落ち、下の外余白が 25px → 0px になった）。
* `:where(#story)` は詳細度を 0 で数えるため、**範囲だけを絞れる**.
* -------------------------------------------------------------- */
:is(.entry-content, .page-content__body) :where(#story) :is(h1, h2, h3, h4, h5, h6) {
margin: 0;
padding: 0;
border: 0;
background: none;
font-weight: bold;
letter-spacing: normal;
}
/*
* 段落。移行元は余白を持たず、行の高さも区画 `#story` の 1.7 を受け継ぐ。
* テーマは段落の下に 25px を置き、行の高さを 1.5 で上書きする.
*/
:is(.entry-content, .page-content__body) :where(#story) p {
margin: 0;
padding: 0;
line-height: inherit;
}
/*
* 箇条書き・定義リスト。移行元は行頭記号を消し、余白と内余白を 0 にする.
*/
:is(.entry-content, .page-content__body) :where(#story) :is(ol, ul) {
margin: 0;
padding-left: 0;
list-style: none;
text-align: left;
}
:is(.entry-content, .page-content__body) :where(#story) :is(dl, dt, dd) {
margin: 0;
padding: 0;
}
/* --------------------------------------------------------------
* 節の見出しの上余白を、移行元と同じ 0 に戻す
*
* テーマは本文の `h2`〜`h6` に上余白を置く（`main.css` の
* `.entry-content :is(h2, h3, h4, h5, h6)` が `margin: var(--pa-article-block-gap) 0 20px`）。
* 転記した CSS は `margin-bottom` だけを上書きするので、**上余白がテーマの値のまま残る。**
*
* 実測（2026-08-27・`/introduce/spot/spot01/`）:
*
* 移行元 上 0px / 下 25px
* dev いま 上 50px / 下 20px
* 転記だけ 上 50px / 下 25px ← 上が残る
*
* 移行元が 0 なのは、移行元の共通のスタイルが見出しの余白を初期化しており、見出しの
* 手前の間隔は前の要素の下余白が作っているためである。転記した CSS はその前の要素の指定も
* 一緒に持ってきているので、上余白を 0 に戻せば移行元と同じ間隔になる。
*
* **画面の幅で分けない。**テーマは狭い画面で 30px を置くが、移行元は幅による切り替えを
* 持たない（狭い画面では携帯専用の別 URL へ転送していた）。片方だけ残すと、
* 同じページが幅によって違う配置になる。
* -------------------------------------------------------------- */
:is(.entry-content, .page-content__body) :where(#story) :is(h2, h3, h4, h5, h6).title_style05 {
margin-top: 0;
}
/* --------------------------------------------------------------
* 本文が受け継ぐ文字の大きさを、移行元と同じ 13px に戻す（Bug #2875 の 2 番目）
*
* 移行元はサイト共通の CSS で本文の字を 13px に決めている（転記の元は移行元のミラーの
* `public/css/style.css` の `#contents`・1296〜1301 行と、`public/css/common.css`
* の 28〜34 行の `body`）。テーマは本文を 16px で組む。
*
* 実測（幅 1440px・`/introduce/spot/spot01/`）: 移行元 13px・行送り 22.1px に対し
* dev は 16px・行送り 27.2px（本文の柱では 16px / 24px）。**この 3px の差が、そのまま
* 文章の折り返しとページの高さの差になる。**
*
* **行送りは書かない。**区画 `#story` が移行元と同じ 1.7 を持っているので、字を 13px に
* 直せば 22.1px（13 × 1.7）になる。
*
* 🚨 **選択子の先頭に body を付ける。**テーマ側は
* `body:not(.pa-profile-new) .page-content__body`（タグ 1 ＋ クラス 2）で本文の色と
* 行送りを決めているため、`.page-content .page-content__body` だけでは**タグの数で負ける**。
* 同じ手当てが婚活アンケートの転記した CSS にある（あちらは実測で一度踏んだ誤りとして注記が残っている）.
* -------------------------------------------------------------- */
@media (min-width: 750px) {
body .page-content .page-content__body {
font-size: 13px;
}
}
/* --------------------------------------------------------------
* ページ上部の帯を、移行元と同じ 1,270px で置く（Bug #2875 の 1 番目）
*
* 移行元 `public/css/style.css` の `#contents .main_ttl`（1311〜1315 行）は
* `margin: 0 auto; width: 1268px; height: 170px` である。**帯の画像そのものは
* 1,270 × 170px** で、宣言された 1,268px より 2px 広い（婚活アンケートの転記した CSS の
* 注記と同じ）。画面に見えるのは画像の 1,270px なので、そちらに合わせる。
*
* 🚨 **このファイルの上の注記は「このページ群に 1,270px の要素は無い」と書いていたが、
* 誤りだった。**dev の帯の画像は 1,100 × 147.23px で、**縦横比 7.471 が移行元の
* 1,270 × 170px（7.471）と一致する**。つまり **1,270px の画像を 1,100px の柱に
* 押し込んでいた**（実測・2026-09-08）。
*
* 🚨 **柱の上限そのものは外さない。**婚活アンケートの転記した CSS は `.page-content` と
* `.page-content__body` の上限を `none` にしているが、**このページ群で同じことを
* すると区画 `#story` も画面幅まで広がる**（`#story` の上限はこのファイルで
* `max-width: 100%` にしてあるため）。帯だけを負の外余白で柱の外へ出す。
*
* 🚨 **幅 1,280px 以上に閉じる。**意図的変更の台帳 92 行（ユーザー判断・裁定 223 / 231）が
* 画面の幅を 3 つに区分し、**750〜1,279px は「移行元の横スクロールを写さず画面幅に
* 収める」**、**1,280px 以上は「移行元と同じ固定の姿を保つ」**と定めている。
* 1,270px の帯を柱の外へ出すには左右に 85px ずつ要るので、**柱の左右の余りが
* 90px になる幅 1,280px から効かせる**（実測: 幅 1,280px で柱の左端 90px）。
*
* 高さは書かない。**帯の画像は差し替えられる**ので、縦横比は画像に任せる。
* 代わりに画像を行の上端へそろえて、行の下がりぶんの隙間（実測 10px）を消す
* （同じ手当てが婚活アンケートの転記した CSS にある）.
* -------------------------------------------------------------- */
@media (min-width: 750px) {
.page-content .page-content__body .main_ttl img {
vertical-align: top;
}
}
@media (min-width: 1280px) {
.page-content .page-content__body .main_ttl {
width: 1268px;
max-width: none;
margin-inline: calc((100% - 1268px) / 2);
}
/* 画像の上限も外す。**移行元は器を 1,268px で宣言しながら、画像は 1,270 × 170px の
実寸で描き、左右へ 1px ずつあふれさせている**（実測・幅 1440px で器の左端 86px・
画像の左端 86px・画像の幅 1,270px）。器を 1,268px にして画像の上限を外すと、
器の左端も画像の寸法も移行元と 1px も違わなくなる. */
.page-content .page-content__body .main_ttl img {
max-width: none;
}
}
/* --------------------------------------------------------------
* アクセスの囲みの定義リストの外余白を、移行元と同じ 1em に戻す（Bug #2875 の 3 番目）
*
* このファイルの上の節は、移行元のサイト共通のリセット（`public/css/common.css` の
* 74〜78 行が `dl` / `dt` / `dd` の外余白を 0 にする）を転記して 0 にしている。
* **ところが移行元の実物は 4 方向とも 13px を持つ**（実測・幅 1440px・
* `https://www.p-a.jp/introduce/spot/spot01.html`・2026-09-08）。
*
* 移行元: 上 13px / 右 13px / 下 13px / 左 13px ・ 項目の左端 199px
* dev : 0 ・ 項目の左端 186px
*
* **13px は本文の字（13px）の 1em である。**字を 13px に戻す上の節と対になるので、
* 実測値の 13px ではなく `1em` で書く（字を変えたときに一緒に動く）。
*
* 🚨 **`dt` と `dd` は 0 のままにする。**移行元も `dd` の外余白は 0 で、項目と説明の
* 左端はどちらも 199px である（実測）。囲みの中身が左右 13px 内側へ入るのは
* `dl` の外余白だけで作られている。
*
* 🚨 **幅 750px 以上に閉じる。**この節の 3 つ（帯・本文の字・定義リストの外余白）は
* どれも**移行元のパソコン版を測った値**である。移行元は 749px 以下で携帯向けの別の
* ページ（`/sp/introduce/spot/`）を返し、そちらは別の値を持つ（例: 一覧の説明文は
* 10px・14px）。**囲まずに書くと携帯幅まで動く**（実測: 幅 375px で本文の字が
* 15px → 13px・帯の高さが 55.17 → 46.17px・項目の左端が 31 → 44px と動いた）。
* 携帯幅を直すなら、移行元の携帯版を測ってから別の Issue で行う.
* -------------------------------------------------------------- */
@media (min-width: 750px) {
:is(.entry-content, .page-content__body) :where(#story) dl {
margin: 1em;
}
}
/* --------------------------------------------------------------
* 狭い画面で、本文の絵の回り込みを外す（Bug #2874・ユーザー裁定 2026-09-02）。
*
* 幅 375px では、回り込む絵の横に文字が **5〜6 文字ぶん**しか残らず読めない
* （実測・横に残る行の幅の中央値 88〜90px・最小 60px・枠 3・2026-09-02）。
* 横へはみ出してはおらず、文字の入る幅が足りないだけである。
*
* 🚨 **移行元は狭い画面で別のページ（`/sp/introduce/spot/`）を返し、そちらは
* 回り込みを使わない。**dev はパソコン版の `float` をそのまま転記しているので、
* 狭い画面にも残ってしまう。移行元に合わせて外す。
*
* 🚨 **境目は 749px（テーマの標準）である。**Issue の本文は「749px 以下で外す」と
* 「700px は変えない」の 2 行を持ち、700px は 749px 以下なので同時には満たせない。
* **裁定の字面（749px）を採り、「700px は変えない」は「既存の 700px の境目の規則を
* 触らない」と読む**（司令塔の裁定・2026-09-11）。699px を新しく作ると、テーマの
* 境目と JS の条件（750px）から外れる。
*
* 🚨 **当たるのは詳細 6 ページだけである。**この 2 枚の CSS は入口と詳細にしか
* 配られず（`inc/introduce-spot.php` の `pa_introduce_spot_is_target()`）、
* **入口は回り込みの札を 1 つも持たない**。`.float_l` / `.float_r` は移行元の
* 685 ページが使う共用の印なので、テーマ全体の CSS には書かない.
* -------------------------------------------------------------- */
@media (max-width: 749px) {
:is(.entry-content, .page-content__body) :is(.float_l, .float_r) {
float: none;
margin-right: 0;
margin-left: 0;
}
}
/* --------------------------------------------------------------
* 最寄り駅の囲み（`.stations`）を、携帯幅で移行元スマホ版と同じ積み上げに戻す
* （Bug #5515）
*
* ## なぜ転記した CSS（`spot-style.css`）へ書かないか
*
* 転記した CSS は移行元の**パソコン版**の CSS（`introduce/spot/css/style.css`）から
* `transform-legacy-page-css.py` で作り直す生成物である（`inc/introduce-spot.php`
* 56〜71 行）。移行元の**スマホ版**は別ファイル（`sp/introduce/spot/css/style.css`）で
* 変換の対象ではないため、転記した CSS に `@media` が 1 つも無いのは正しい姿である。
* **手で書く指定はここへ置く。**転記した CSS へ書くと作り直した回に消える。
*
* ## 実測（2026-09-16 11:18・幅 375px・控えは `pa-verify-assets/d7-5515-0916/`）
*
* | 見るもの | 移行元スマホ版 | 直す前の dev |
* |---|---:|---:|
* | 囲みの高さ | 357.50 | 284.81 |
* | 囲みの左端 / 幅 | 23.44 / 328.13 | 15.00 / 345.00 |
* | `dl` の上の内余白 | 6.5px（0.5em） | 0 |
* | `dd` の `display` | block | **inline** |
* | `dd` の下の外余白 | 7.5px（0.5em） | **0** |
*
* 🚨 **`main.css` の携帯幅の塊は当たらない。**`main.css` は
* `@media (max-width: 749px)` の中で
* `.single-content--pa-article .pa-article .stations dd { display: block }` を持つが、
* このページの `body` は `pa-profile-legacy-compat pa-legacy-common-css` で、
* `single-content--pa-article` も `pa-article` も**持たない**（上の実測で確認）。
* よって当たるのは転記した CSS の `display: inline` だけである。
*
* ## 囲みの左右の外余白に `vw` を使う理由
*
* 移行元スマホ版は `#spot .stations { margin: 0 6.25% 30px }` を持ち、その百分率は
* **画面の幅**を基準に解かれる（実測: 幅 375px で 23.4375px = 6.25%）。
* dev の `.stations` は本文の器（左右に `--pa-inner-gutter` = 15px の内余白を持つ・
* 幅 345px）の中に在るので、**`6.25%` と書くと 21.5625px になって合わない**
* （同じ落とし穴は `introduce-happyreport/css/style.css` 1517 行にも記録がある）。
* あちらは器を全幅へ広げてから子へ `6.25%` を当てているが、`.stations` には
* 広げる相手の器が無い。**器の内余白を引いた値を直接書く。**
*
* calc(6.25vw - var(--pa-inner-gutter))
* → 幅 375px で 8.4375px。器の 15px と足して左端 23.4375px・幅 328.125px
*
* 🚨 **`vw` は縦スクロールバーの幅を含む。**携帯の実機には出ないが、この帯の幅
* （749px 以下）をパソコンの窓で開くと、スクロールバーのぶん（約 15px）の 6.25%
* ＝ 1px 未満だけ内側へ寄る。移行元も百分率なので同じ向きにずれる.
*
* ## 足していないもの
*
* 移行元スマホ版は `.stations dd a { display: block }` を持つが、**6 ページの
* `.stations` の中にリンクは 1 件も無い**（移行元のミラーの `sp/introduce/spot/spot01〜06.html`
* を数えた・2026-09-16）。当たり先の無い指定は足さない.
* -------------------------------------------------------------- */
@media (max-width: 749px) {
:is(.entry-content, .page-content__body) .stations {
margin-right: calc(6.25vw - var(--pa-inner-gutter));
margin-left: calc(6.25vw - var(--pa-inner-gutter));
}
/* --------------------------------------------------------------
* 一覧の並びの左右を、移行元スマホ版と同じ位置にする（Bug #8242）
* --------------------------------------------------------------
*
* 移行元スマホ版は `#spot .box { padding: 25px 6.25% 32px }` を持ち、その百分率は
* **画面の幅**を基準に解かれる（幅 375px で 23.4375px）。dev には `div.box` そのものが
* 無く、一覧の `ul.list_box` が本文の器（左右 `--pa-inner-gutter` = 15px の内余白を持つ・
* 幅 345px）の中に直に在るため、**左右に 8.44px ずつ外へ広がっていた。**
*
* 両側の入れ子を降りて数えた（2026-09-21・`d3-8242規則-0921.mjs`・幅 375）。
*
* | 要素 | 移行元 | dev（直す前） |
* |---|---|---|
* | `ul.list_box` | **328.13**（左 23.44） | **345**（左 15） |
* | `.list_detail` の左右の内余白 | 10.25px | 10.78px |
* | ラベル `span.num` | **307.63** | **323.44** |
*
* 🚨 **直すのはこの 1 か所でよい。**その下の `.list_detail` の内余白は両側とも
* `3.125%` で書かれており、**`%` は親の幅を基準に解かれる**ので、親が 328.13 になれば
* 自動で 10.25px になり、ラベルも 307.63 になる。
*
* 移行元 328.13 × 3.125% = 10.25px → ラベル 307.63
* dev（前） 345 × 3.125% = 10.78px → ラベル 323.44
* dev（後） 328.13 × 3.125% = 10.25px → ラベル 307.63
*
* 🚨 **上下の内余白（25px / 32px）はここでは写さない。**この節は左右の位置だけを扱う
* （婚活アンケートの手当てと同じ判断）。**上下は Bug #8870 がファイル末尾の節で写した。**
* 幅 375 の実測で、入口の題から一覧の見出しまでが 77px 足りなかったためである
* （「dev は別の形で持っている」と書いていたが、入口では持っていなかった）。
*
* 🚨 **`vw` は縦スクロールバーの幅を含む。**上の `.stations` と同じ落とし穴で、
* この幅をパソコンの窓で開くと 1px 未満だけ内側へ寄る（移行元も百分率なので同じ向き）。
*
* 🚨 **当て先を入口に絞る。**記事 6 本（`spot01`〜`spot06`）は `ul.list_box` を
* 1 つも持たない（移行元の写しを数えた）。それでも将来 持ったときに巻き込まないよう、
* 入口だけが持つ `#story` で囲む. */
:is(.entry-content, .page-content__body) #story .list_box {
margin-right: calc(6.25vw - var(--pa-inner-gutter));
margin-left: calc(6.25vw - var(--pa-inner-gutter));
}
:is(.entry-content, .page-content__body) .stations dl {
padding-top: 0.5em;
}
/* 🚨 **下の外余白は `0.5em` で書く。**移行元スマホ版の `#spot .stations dd` が
`margin-bottom: 0.5em` を持ち、その `em` は `dd` 自身の字（移行元は 15px）を
基準にするので 7.5px になる。**すぐ下で字を 15px にそろえたので、この指定は
書き換えずに 7.5px になる**（Bug #6540 で直した。直す前は dev が 13px で
6.5px だった）. */
:is(.entry-content, .page-content__body) .stations dd {
display: block;
margin-bottom: 0.5em;
}
/* --------------------------------------------------------------
* 説明の字と行送り（Bug #6540・親 Bug #6526）
*
* 移行元スマホ版は素の `dd` へ 15px を当てている。
*
* legacy/www.p-a.jp/public/sp/css/style.css 1615〜1618 行
* dd { padding: 10px 6.25%; font-size: 15px; }
*
* この区画だけが読む CSS なので、区画の class 名で囲む必要がない
* （`inc/introduce-spot.php` の `pa_introduce_spot_enqueue_assets()` が
* `is_singular() && pa_introduce_spot_is_target()` のときだけ読ませる）。
* ほかの 3 区画は `assets/css/main.css` の携帯幅の `@media` ブロックで当てた。
*
* 🚨🚨 **この区画だけは行送りも要る。**ほかの 3 区画は移行元も dev も `normal`
* で一致しているが、ここは違う。**`spot-style.css` 37 行の
* `:is(.entry-content, .page-content__body) #story { line-height: 1.7 }` が
* 幅の条件を持たないまま携帯幅にも効いている。**あれは移行元の**パソコン版**の
* 値を変換スクリプトがそのまま転記したものである。
*
* dev（直す前） 13px × 1.7 = 22.1px ← 2026-09-16 11:18 の実測
* 移行元スマホ版 15px・`normal` ＝ 約 17.25px
*
* 🚨 **移行元スマホ版には `#story` が無い。器の名前が違う。**あちらは
* `id="spot"` で、`sp/introduce/spot/css/style.css` 10 行が
* `#spot p { font-size: 14px; line-height: 166% }` を当てている。**ただし
* 当たり先は段落（`p`）で、`dd` には当たらない。**
*
* **`.stations dd` に効く `line-height` は、移行元スマホ版に 1 本も無い**
* （`sp/css/basic.css`・`common.css`・`style.css`・`sp/introduce/spot/css/style.css`
* の 4 本を全数で読み、`dd` とその祖先に当たる規則を数えた・2026-09-16 15:3x）。
* だから `normal` である。
*
* 🚨 **段落の字と行送りは別の話で、ここでは直さない。**移行元スマホ版の
* `#spot p` は 14px・166%（＝ 23.24px）、dev の `#story p` は 13px・1.7
* （＝ 22.1px）で、**字が 1px・行送りが 1.14px 違う**。#6583 は `dd` だけを
* 扱う。段落は別の Issue の持ち物である。
*
* 🚨 **`#story` そのものは直さない。**あの 1.7 は段落にも効いており、直すと
* この区画の文章すべてが動く。ここでは #6540 の対象である `dd` だけに当てる。
* **段落の行き先の Issue はまだ決まっていない**（Bug #5332 はスコープで行送りを
* 対象外にしており、その行送りを扱った Bug #5307 は閉じている・2026-09-16 15:3x）.
* -------------------------------------------------------------- */
:is(.entry-content, .page-content__body) .stations dd {
font-size: 15px;
line-height: normal;
}
/* --------------------------------------------------------------
* 段落の字と行送り（Bug #6595）
*
* 移行元スマホ版は区画の段落へ 14px・166% を当てている。
*
* legacy/www.p-a.jp/public/sp/introduce/spot/css/style.css 10 行
* #spot p { font-size: 14px; line-height: 166%; }
*
* dev は字も行送りも当たる規則を持たず、次の 2 つを受け継いでいた。
*
* 字 `.site-main` の `var(--pa-content-font-size)`（携帯幅で 13px）
* 行送り 転記した CSS（`spot-style.css` から）の
* `:is(.entry-content, .page-content__body) #story { line-height: 1.7 }`
*
* 差は字が 1px・行送りが 1.14px（13 × 1.7 = 22.1px 対 14 × 1.66 = 23.24px）。
* 根拠はユーザー裁定 46（携帯幅は移行元スマホ版に合わせる）。
*
* 🚨 **器の名前が版で違う。**移行元スマホ版は `id="spot"`、パソコン版は
* `id="story"` である。**dev の本文はパソコン版から作る**ので、当たり先は
* `#story` になる。移行元スマホ版の `#spot` は dev に 1 つも無い。
*
* 🚨 **`#story` そのものの `line-height` は変えない。**転記した CSS の 1.7 は段落以外にも
* 効いており、変えるとこの区画の文章すべてが動く。**当たり先を段落に絞る。**
*
* 🚨 **転記した CSS（`spot-style.css` から）は手で書かない。**
* `scripts/pa-cms/transform-legacy-page-css.py` の生成物で、作り直した回に
* 手書き分が消える（`inc/introduce-spot.php` の説明を参照）。手当てはここへ置く。
*
* 🚨 **`.main_copy` は外す。**移行元スマホ版は段落の規則とは別に
* `#spot .main_copy { font-size: 16px; line-height: 130% }` を当てており、
* **id を含むぶん `#spot p` より強い**ので、あちらでは 16px・130% になる。
* dev では共通の `css/main.css` の `@media (max-width: 749px)` が
* `#story .main_copy { font-size: 16px; line-height: 1.3 }` を当てており、
* **移行元スマホ版と同じ 16px・20.8px になる**（幅 375px で実測）。
* ここで `p` をまとめて当てると **`.main_copy` まで 14px・166% へ動き、
* そろっている値を壊す**。**Bug #6595 の対象は段落だけなので触らない。**
* `.corner_ttl` は 6 ページのどれにも無い（移行元の両版で 0 件）。
*
* 🚨 **`.read` も外す。移行元の 2 つの版で、この文の持ち方が違う。**
* 移行元のパソコン版（＝ dev の本文の出どころ）は導入の 1 文を
* `` で持つが、**移行元スマホ版にこの類名は無い。**
* スマホ版は**同じ文を `
` で持っている**
* （6 ページすべてで文が一致することを確かめた）。だからスマホ版でのこの文は
* `#spot .main_copy` の **16px・130%** で出る。**段落の 14px・166% ではない。**
* `p:not(.main_copy)` だけで止めると、`.read` の詳しさ (0,2,0) に
* こちらの (0,2,1) が勝ってしまい、**この 1 文だけ移行元スマホ版から遠ざかる**
* （16px・160% → 14px・166%。スマホ版は 16px・130%）。
* **`.read` をどの値にそろえるかは別の Issue で決める。ここでは触らない。**
*
* 詳細度はどちらも (0,1,1) で並ぶが、**上の `line-height: inherit` より後ろに
* 置いてあるので、こちらが勝つ**（同じ詳細度なら後に書いたほうが効く）.
* -------------------------------------------------------------- */
:is(.entry-content, .page-content__body) :where(#story) p:not(.main_copy, .read) {
font-size: 14px;
line-height: 166%;
}
/* --------------------------------------------------------------
* 導入の 2 文の字・行送り・字間・外余白（Bug #6641）
*
* 🚨 **移行元の 2 つの版で、この 2 文の持ち方が 1 つずれている。**
*
* 文「都心からわずか1時間。…」
* 移行元スマホ版
16px・130%・中央・上 15px
* 移行元パソコン版
← dev の本文はこちら
*
* 文「お出かけスポット成婚コンシェルジュ- 鎌倉 -」
* 移行元スマホ版
← 見出し
* 移行元パソコン版
← dev の本文はこちら
*
* **移行元スマホ版に `.read` という類名は 1 つも無い**（6 ページすべてで、
* 本文の文字列を突き合わせて確かめた）。**類名が同じでも別の文である。**
* 根拠はユーザー裁定 46（携帯幅は移行元スマホ版の表示に合わせる）。
*
* 幅 375px の実測（2026-09-16 17:5x・移行元 1 回・dev 1 回）:
*
* 題名の文 移行元 19.5px / normal / 外余白 0 dev 16px / 20.8px / 35px 0 10px 0
* 導入の文 移行元 16px / 20.8px / 字間 normal / 上 15px dev 16px / 25.6px / 1.6px / 下 35px
*
* 🚨 **`#story` を `:where()` で包まないこと。**包むと (0,2,0) になり、
* `css/main.css` と転記した CSS（`spot-style.css` から）の (1,2,0) に負けて
* **何も変わらない。**下の形は (1,2,0) で並び、`theme-bridge.css` が最後に
* 読み込まれるので勝つ（順は `inc/introduce-spot.php` が決めている）。
*
* 🚨 **本文（markup）は変えない。**段落を見出しへ変える案は採らない
* （ユーザー決定 D256 の線に触れる）。**CSS だけでそろえる。**
* -------------------------------------------------------------- */
/* 「都心から…」: 移行元スマホ版の `#spot .main_copy` へそろえる。
移行元の宣言は margin: 15px auto 0 / font-size: 16px / line-height: 130% / text-align: center。
🚨 letter-spacing: normal を明示する。転記した CSS の 0.1em は
一括指定では消えないため、書かないと残る。 */
:is(.entry-content, .page-content__body) #story .read {
margin: 15px auto 0;
font-size: 16px;
line-height: 130%;
letter-spacing: normal;
text-align: center;
}
/* 「お出かけ…」: 移行元スマホ版の `#spot h2.category_ttl` へそろえる。
移行元の宣言は font-size: 150% / text-align: center と、
sp/css/basic.css の全体リセット（margin: 0 / font-weight: normal / font-size: 13px）。
🚨 19.5px の出どころ: 親（#spot）が 13px で、そこへ 150% が掛かる。
幅 375px で実測して 19.5px を確かめた。**割合でなく実数で書く**
（dev 側の親の字が変わっても、移行元の見え方から離れないため）。
🚨 line-height: normal はブラウザ既定へ戻す指定である。移行元スマホ版の
この見出しの行送りは computed で normal だった（実測）。 */
:is(.entry-content, .page-content__body) #story .main_copy {
margin: 0;
font-size: 19.5px;
line-height: normal;
font-weight: normal;
text-align: center;
}
/* 題名の 2 つ目の `
` を効かなくする（Bug #6793）
移行元は同じ題名を版ごとに別の markup で持つ。
スマホ版
お出かけ…
- 鎌倉 -
パソコン版 お出かけ…
- 鎌倉 -
dev の本文はパソコン版から作るので、**`
` が 1 つ多く、空行が 1 行できる。**
実測（2026-09-17 12:22・幅 375px・6 ページとも同じ値）:
移行元スマホ版 高さ 58px（29px × 2 行）
dev 高さ 87px（29px × 3 行） ← 1 行ぶん多い
🚨 **本文（markup）は変えない**（ユーザー決定 D256）。`
` を消すのではなく
2 つ目だけを効かなくする。`display: none` の `
` は改行を作らない。
🚨 **携帯幅の節の中だけに置く。**パソコン幅は移行元のパソコン版と一致しており、
あちらは `
` 2 つが正しい姿である。
🚨 **`:where(#story)` で絞る。**`#story` をそのまま書くと詳細度が上がるが、
`br` へ `display` を当てる規則はほかに無いので、上げる必要が無い。 */
:is(.entry-content, .page-content__body) :where(#story) .main_copy br + br {
display: none;
}
/* 「周辺のおすすめスポット」の見出し帯を移行元スマホ版へそろえる（Bug #6795）
移行元は見出しの markup を版ごとに変えている。
スマホ版 … `#spot .content-area h3` が当たる
パソコン版 … `.title_style05`
移行元スマホ版の宣言（`sp/introduce/spot/css/style.css`）:
#spot .content-area h3 { background: #e3d6bf; margin-bottom: 20px; padding: 12px;
font-size: 1.5rem; font-weight: bold; line-height: 140%;
letter-spacing: 0.05em; clear: both; }
転記した CSS（`spot-style.css`）は移行元のパソコン版の値を持つ。
.title_style05 { background: #E3D6BF; margin-bottom: 25px; padding: 12px 16px;
font-size: 24px; line-height: 100%; letter-spacing: 0.05em; clear: both; }
🚨 **字（`font-size`）と太さ（`font-weight`）はここで触らない。**
移行元スマホ版の `1.5rem` は根の要素の字に対する割合で、移行元に根の字の宣言が
見つからない。既定の 16px なら 24px で dev と同じになるが、**実測していない。**
太さも、移行元は `bold` を宣言し dev は `h4` の既定に任せているので、
**computed が同じかは測らないと言えない。**Bug #6795 に実測待ちの節を残す。
🚨 **`padding` の一括指定は移行元と同じ形で書く。**移行元は 4 辺とも 12px である。
転記した CSS の `12px 16px` と、`paddingb10` の `padding-bottom: 10px` の
両方をここで上書きする。
🚨 **`:is(h2, h3, h4, h5, h6)` を付けて詳細度を (0,2,1) にする。**このファイルの
上の節（`margin-top: 0`）と同じ形である。転記した CSS の (0,2,0) と並ぶだけだと
読み込みの順に頼ることになる。 */
:is(.entry-content, .page-content__body) :where(#story) :is(h2, h3, h4, h5, h6).title_style05 {
margin-bottom: 20px;
padding: 12px;
/* 🚨 **19.5px は実測である**（2026-09-17 15:47・幅 375px・6 ページとも同じ）。
移行元スマホ版の宣言は `font-size: 1.5rem` で、**根の要素の字は 13px** だった。
1.5 × 13 = 19.5px。**Bug #6795 の本文は「根が既定の 16px なら 24px で dev と
同じ」と見込んでいたが、外れた。**測るまで書かなかったのが正しかった。
🚨 **割合ではなく実数で書く。**dev 側の根の字が変わっても、移行元の
見え方から離れないため（このファイルの `.main_copy` と同じ考え方）。
🚨 **太さは触らない。**実測は両側とも 700 で一致していた。 */
font-size: 19.5px;
line-height: 140%;
}
/* 区画の帯の絵を携帯幅で出さない（Bug #6851・ユーザー決定 D330）
移行元パソコン版は本文の先頭に
を置くが、**移行元スマホ版はこの帯を持たない**（ミラーの sp/introduce/spot/spot01.html に
main_ttl は 0 件）。スマホ版の本文は区画の題から始まる。携帯幅では落とす。
🚨 **この帯は区画 #story の外に在る。**移行元も の外で差し込んでいる
（このファイルの上の節の説明を参照）。**#story では絞れない。**
🚨 **絞りはこのファイルが読み込まれる範囲で足りる。**inc/introduce-spot.php の
pa_introduce_spot_enqueue_assets() が pa_introduce_spot_is_target() で判定し、
**デートスポット入口 6 ページのときだけ**この CSS を読み込む。
🚨 **パソコン幅は動かさない。**下の @media (min-width: 750px) と
@media (min-width: 1280px) が帯の幅と寸法を持っている。
同じ形の先例は Bug #4497（採用情報配下 18 ページの「会社情報」の帯）。 */
:is(.entry-content, .page-content__body) h2.main_ttl {
display: none;
}
}
/* ==============================================================
* お出かけスポットの入口（投稿タイプアーカイブ）の、本文より上の空きと器の幅（Bug #8090）
* ==============================================================
*
* **入口だけ本文が移行元より 30px 下から始まっていた。**本文の中の寸法と字は移行元と
* 1 画素も違わず、上に在る箱の空きと器の幅だけの差である。
*
* ## 何が違ったか（配信中の版を実ブラウザで測り、CSSOM から規則を引いた）
*
* | 当たり先 | 直す前の dev | 移行元 |
* |---|---|---|
* | `div.page-content`（器） | **1130**（左右の内余白 155px） | **1440**（内余白 0） |
* | `h2.main_ttl` | 外余白 `0 / -84px / **25px** / -84px` | `0 / 86px / **0** / 86px` |
* | `div.local_nav` | **1100**・上端 **387** | **1440**・上端 **362** |
* | `ul.category_menu` | 下外余白 **40px** | 下外余白 **0** |
* | `section#story` | 上端 **477** | 上端 **447** |
* | ページ全体 | 3,437 | 3,407 |
*
* ## 🚨 婚活アンケートの入口はすべて一致している
*
* 同じ投稿タイプ（`pa_introduce`）のアーカイブでも、婚活アンケート（`/introduce/survey/`）は
* 移行元と 1 画素も違わない。**あちらの `assets/introduce-survey/css/theme-bridge.css` が
* この 3 つを持っているから**である。
*
* .page-content { max-width: none; padding-left: 0; padding-right: 0 }
* .page-content .page-content__body { max-width: none }
* .page-content .page-content__body .category_menu { margin-bottom: 0 }
*
* このファイルには 1 つも無かった。**同じ 3 つを、書庫の画面だけに絞って足す。**
*
* ## 25px と 5px の出どころ
*
* - **25px** … `main.css` の `:is(.entry-content, .page-content__body) :is(h2, …):has(> :is(img, picture):only-child)`
* が `margin: 0 0 var(--pa-article-paragraph-gap)` を当てている。移行元は 0 なので打ち消す
* - **5px** … `main.css` の `:is(.entry-content, .page-content__body) .category_menu` が
* `margin: 0 auto var(--pa-space-sm)`（= 40px）を当てている。移行元は 0 で、代わりに
* **`#story` の最初の子 `p.main_copy` の上外余白 35px が外へはみ出して**（margin collapsing）
* 35px の空きを作る。dev は 40px のほうが大きいので勝ち、**5px 多くなっていた**
*
* ## 器の幅を戻すと、ほかは自動でそろう
*
* - `h2.main_ttl` … このファイルの `margin-inline: calc((100% - 1268px) / 2)` が、器 1440 なら **86px** を出す
* （器が 1100 のときは **−84px** になっていた）
* - `div.local_nav` … 規則を持たないので器の幅をそのまま受け、**1440** になる
* - `section#story` … `spot-style.css` の `#story { width: 1100px; margin: 0 auto }` が **1100・左 170** を出す
*
* ## 🚨 当たり先を書庫の画面だけに絞る
*
* このファイルは `inc/introduce-spot.php` の `pa_introduce_spot_is_target()` で判定され、
* **入口 1 ページと記事 6 ページ**へ配られる。記事は移行元と一致しているので触らない。
* 入口だけが投稿タイプアーカイブなので `body.post-type-archive-pa_introduce` で絞る。
* 実測でも、この 3 つを流し込んだとき記事 2 本（`spot01` / `spot02`）は 1 画素も動かなかった。
*
* ## 🚨 携帯幅（749px 以下）へは当てない（Bug #8175）
*
* この 4 つを幅の絞り無しで当てると、**携帯幅の入口まで動く**。実測（幅 375・
* `d3-8090-sp375-0920.mjs`）では器の左右の内余白が 15px から 0 になり、本文の幅が
* 345 から 375 へ広がって、ページ全体が 4,921 から 4,851 へ縮んだ。移行元の携帯版は
* 4,942 なので、差は −21 から −91 へ**開く**。
*
* 移行元の携帯版は markup が別で `#story` も `.page-content` も持たない。役割の同じ
* 要素が無いため、比べられるのはページ全体だけである。
*
* Bug #8090 が挙げた差はすべて幅 1440 の実測であり、携帯幅は対象ではない。
* そこで `@media (min-width: 750px)` の中へ入れて、携帯幅は 1 画素も動かさない。
* 🚨 `screen and` は付けない（門で落ちる）。
*
* 【検査】足さない（2026-09-18 のユーザー決定 D411 / D413）。
* ============================================================== */
@media (min-width: 750px) {
body.post-type-archive-pa_introduce .page-content {
max-width: none;
padding-right: 0;
padding-left: 0;
}
body.post-type-archive-pa_introduce .page-content .page-content__body {
max-width: none;
}
body.post-type-archive-pa_introduce .page-content .page-content__body .main_ttl {
margin-block: 0;
}
body.post-type-archive-pa_introduce .page-content .page-content__body .category_menu {
margin-bottom: 0;
}
}
/* --------------------------------------------------------------
* 巻数の札は携帯幅で地の絵も地色も持たない（Bug #8226）
*
* 移行元スマホ版 `public/sp/introduce/spot/css/style.css` は
*
* .list_box li .list_detail span { display: block }
* .list_box li .list_detail span.num { margin-bottom: 8px; color: #a3762b;
* font-size: 14px; line-height: 100% }
*
* で、**金の札ではなく金茶の文字**である。同じファイルで地の絵を持つのは `span.archive`
* だけ（`background-image: url(../images/bg_num.jpg)`）なので、そちらは動かさない。
*
* 一方 `assets/css/main.css` の
* `:is(.entry-content, .page-content__body) :is(.list_box, .list_box_new) li a .list_detail span.num`
* は `@media` の外にあるため携帯幅にも効き、パソコン版と同じ札（16px・白・内余白 6px 5px・
* `bg_num.gif`）を出していた。実測（幅 375・2026-09-20）では 44.81×28 で、移行元の
* 307.63×14 に対して 1 行ごとに 14px 高かった。入口の `num` は 6 個なので +84px。
*
* 🚨 **`background-color: transparent` では地の絵が消えない。**共通の側が
* `background: url(...) repeat` のまとめ書きで敷いているためである。**まとめ書きで消す。**
*
* 【当てる範囲】このファイルは `inc/introduce-spot.php` がお出かけスポットの入口と
* 記事 6 本にだけ読み込む。移行元の 7 ページを数えると `list_box` と `span.num` を持つのは
* 入口 1 ページだけで、記事 6 本は 0 件である。**当たるのは入口 1 ページ・札 6 個。**
*
* 【詳細度】共通の側はクラス 4 個 ＋ 要素 3 個。こちらはクラス 5 個 ＋ 要素 3 個で勝つ。
* 読み込み順も `pa-main` → `pa-introduce-spot` → このファイルで後になる。
*
* 【同じ形の直し】婚活アンケートは [Bug #8194](https://github.com/mationinc/wp-platform/issues/8194)
* で S2 が `assets/introduce-survey/css/theme-bridge.css` に 1 字も違わない規則を入れた。
* QOM総研だけは移行元スマホ版が札を残すので `assets/css/main.css` の携帯幅の節で別の値を当てる.
* -------------------------------------------------------------- */
@media (max-width: 749px) {
.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%;
}
}
/* --------------------------------------------------------------
* 入口（/introduce/spot/）の携帯幅の縦の余白と一覧の見出し（Bug #8870）
*
* 移行元スマホ版は、区画 `#spot` と、本文と一覧を包む 2 つの `.box` に上下の内余白を持つ。
*
* legacy/www.p-a.jp/public/sp/introduce/spot/css/style.css
* #spot { padding: 25px 0 30px }
* #spot .box { padding: 25px 6.25% 32px }
* #spot .corner_ttl { margin-bottom: 25px; font-size: 20px; line-height: 100%; color: #a3762b }
*
* dev の本文はパソコン版から作るので、`#spot` の代わりに `#story`、2 つの `.box` の代わりに
* `p.txt` と `.story_inner` が並ぶ。**どれも上の内余白を持たず、下は 30px か 0 だった。**
*
* 幅 375 の実測（2026-09-30 02:22・`pa-verify-assets/B/8870-読み2-0930/`）:
*
* | 区切り | 移行元スマホ版 | dev（直す前） |
* |---|---:|---:|
* | 区画の上端 → 題 | 25 | 0 |
* | 導入の文の下 → 本文 | 25 | 0 |
* | 本文の下の空き | 32 | 30 |
* | 一覧の器の上端 → 一覧の見出し | 25 | 0 |
* | 一覧の見出し（字 / 行 / 下の外余白） | 20 / 20 / 25 | 30 / 30 / 30 |
* | 一覧の下端 → 区画の下端 | 62（32 ＋ 30） | 48（18 ＋ 30） |
*
* 見出しまでの差 77px は 25 ＋ 25 ＋ 2 ＋ 25 で数え合う。
*
* - 一覧の下の 48px は、区画の下の内余白 30px と、一覧 `ul.list_box` の下の外余白 18px
* （`main.css` の `:is(.entry-content, .page-content__body) .list_box` の
* `var(--pa-article-paragraph-gap)`・携帯幅で 18px）でできている。`.story_inner` が
* 下の内余白を持たないので、18px が外へ抜けていた。`.story_inner` に 32px を足すと
* 抜けなくなり 18 ＋ 32 ＋ 30 になるので、**一覧の外余白は 0 にする**（移行元の一覧は
* 外余白を持たない）
* - 本文の `p.txt` は、転記した CSS の `.paddingb30 { padding-bottom: 30px !important }` を
* 持つ。**`!important` には `!important` でしか勝てない**ので、ここだけ付ける
* - 一覧の見出しの太さ: 移行元は `sp/css/basic.css` の全体リセットで normal、dev は
* 見出しの既定で 700 だった（実測）
*
* 🚨 **題と導入の文の見た目は触らない。**Bug #6641 がこのファイルの上の節で、
* `p.main_copy` を移行元の題 `h2.category_ttl` に、`p.read` を移行元の `p.main_copy` に
* そろえてある（入口にも当たっている。実測で字の大きさ・寄せ・色が一致した）。
* 本文（markup）も変えない（ユーザー決定 D256）。
*
* 🚨 **当て先は入口だけに絞る。**このファイルは記事 6 本（`spot01`〜`spot06`）にも
* 配られる。記事は `#story` も `p.txt` も持つので、絞らないと記事の余白まで動く。
* 入口だけが投稿タイプアーカイブなので `body.post-type-archive-pa_introduce` で絞る
* （上の Bug #8090 の節と同じ絞り方）。パソコン幅は移行元と一致しているので触らない.
*
* 【検査】足さない（2026-09-18 のユーザー決定 D411 / D413）。
* -------------------------------------------------------------- */
@media (max-width: 749px) {
body.post-type-archive-pa_introduce .page-content__body #story {
padding-top: 25px;
}
body.post-type-archive-pa_introduce .page-content__body #story > p.txt {
padding-top: 25px;
padding-bottom: 32px !important;
}
body.post-type-archive-pa_introduce .page-content__body #story > .story_inner {
padding-top: 25px;
padding-bottom: 32px;
}
body.post-type-archive-pa_introduce .page-content__body #story > .story_inner > .list_box {
margin-bottom: 0;
}
body.post-type-archive-pa_introduce .page-content__body #story > .story_inner > h4.archive_ttl {
margin-bottom: 25px;
font-size: 20px;
font-weight: normal;
line-height: 20px;
}
}