/*
* サービス紹介の本文で、テーマの本文の組みを打ち消す調整。
*
* このファイルは手で書く。section.css は写し元から作り直す生成物なので、
* 手で足した調整はここへ置く。
*
* 🚨 **下の注釈が引く main.css の行番号は目印にすぎない。**main.css は 7 つの枠が
* 同時に触る共有ファイルで、前のほうに行が増えるたび、ここが指す行がまとめて
* 後ろへずれる（2026-09-03 に 16 か所で最大 1,834 行ずれていた）。**番号が合わない
* ときは、注釈が併記している選択子で探すこと。**規則そのものは動いていない。
*/
/*
* 🚨 ここから下はパソコン幅（750px 以上）だけの写しである。
*
* このファイルは全部の幅へ配られる（`inc/service-page-css.php` の
* PA_SERVICE_PAGE_CSS_MEDIA = 'all'）。幅で絞るのはこの `@media` の役目なので、
* この包みの外に規則を書くと、携帯幅でもパソコン幅の組みが当たってしまう。
*
* 携帯幅の直しは、このファイルの末尾に `@media (max-width: 749px)` を足して
* その中へ書く。移行元は携帯の名乗りに対して `/sp/service/` の別サイトを返す
* ため、中身はパソコン幅の写しではなくスマホ版に合わせる（裁定 46）。
*
* **中身の字下げは増やしていない。**包むためだけに全行を字下げし直すと差分が
* 読めなくなるためである。包み忘れは検査（tests-retired/pa-cms-service-page-css/）が
* 見張る。
*/
@media (min-width: 750px) {
/*
* テーマの本文の組み（記事のための層）を、サービス紹介の本文の中で打ち消す。
* 13px は移行元の dl の margin: 1em（13px 基準）の実体である。
*
* 【当てる範囲】Issue #2557（PR #2598）は横並びの器（`.sec_inner`）の中だけに
* 当てていた。区画の残りは手つかずで、テーマの層が写した本文に乗ったままだった。
* Issue #2599 で `.sec_inner` の限定を外し、区画の本文全体へ広げる。
*
* 【強さの設計】この 3 つは次の強さになる。`:where()` は強さに数えないので、
* `.page-content__body`（クラス 1 つ）+ 要素 1 つで **(0,1,1)** である。
*
* テーマの本文の組み（打ち消したいもの） (0,1,1) main.css の .page-content__body p 等
* この打ち消し (0,1,1) ← 同じ強さ。あとで読むので勝つ
* 移行元からの写し（負けたいもの） (0,3,1) 以上
*
* **わざと最小の強さにしている。**強くすると、テーマだけでなく移行元からの写しにも
* 勝ってしまい、移行元にある余白を消す事故につながる（Issue #2557 で実際に起きた型）。
* テーマに勝つのに必要なのは「同じ強さ + あとで読む」だけなので、それ以上は上げない。
*
* 【読む順番】`inc/service-page-css.php` が
* 区画共通の写し（section.css）→ **この打ち消し** → ページ別の写し → bridge.css
* の順で読ませる。テーマの main.css はさらに前なので、同じ強さならこちらが勝つ。
*
* 【写しの最小の強さ】写しは生成の段ですべて
* `body .pa-page--service .page-content__body` を前置されるため、6 本 154 件の
* どれも (0,3,1) 以上である（section の .conseptTitle01 等が最小）。この打ち消しが
* 写しに勝つことはない。
*/
/*
* 器が受け継がせる文字組みを移行元へ戻す。
*
* テーマは本文の器へ、編集画面で書かれる記事のための基準を当てている
* （main.css の `.page-content__body { font-size: var(--pa-article-font-size);
* line-height: var(--pa-line-height-text) }` = 16px / 1.5）。移行元の器
* （`#contents`）の基準は **13px / normal** で、写した本文はこちらを前提に
* 組まれている。自分の指定を持たない要素はこの基準をそのまま受け継ぐため、
* 器の値が違うと本文の広い範囲が一斉にずれる。
*
* 【実測（幅 1440px・7 ページ 2,232 項目の全数突合）】残っていた差 386 件のうち
* 行送りの差 120 件 … うち 103 件は移行元が `normal`
* 字の大きさの差 95 件 … うち 79 件は移行元 13px に対し dev 16px
* で、合わせて 182 件がこの 2 行に由来する。ただの入れ物である `.concept_list`
* や `.menu_concept` が 13px / normal ↔ 16px / 24px でずれていたのが典型である。
*
* 【強さ】`:where()` は数えないので (0,1,0)。テーマの同じ指定と同じ強さで、
* あとに読むので勝つ。字の大きさを自分で決めている写し（(0,3,1) 以上）には
* 一切勝たない（Issue #2599）.
*/
:where(.pa-page--service) .page-content__body {
font-size: 13px;
line-height: normal;
}
:where(.pa-page--service) .page-content__body :is(p, dt, dd) {
margin: 0;
}
:where(.pa-page--service) .page-content__body dl {
margin: 13px;
}
/*
* 段落・箇条書き・定義の並びの行送りを、親から受け継ぐ形へ戻す（Issue #3015）。
*
* 上の 2 行（器の `line-height: normal`）は詳細度 (0,1,0) で、テーマが段落と
* 箇条書きへ直接当てている規則には届かない。
*
* main.css 20288〜20292 行 `.page-content__body p { line-height: var(--pa-line-height-text) }` (0,1,1)
* main.css 20369〜20373 行 `.page-content__body li { line-height: var(--pa-line-height-text) }` (0,1,1)
*
* 変数の値は main.css 19777〜19785 行の
* `body:not(.pa-profile-new) .page-content__body { --pa-line-height-text: 1.5 }`
* で **1.5** になる（根の既定は 1.8）。**移行元には段落と箇条書きの行送りを
* 決める規則が無い**ので、この 1.5 がそのまま差になっていた。
*
* 【実測（幅 1440px・7 ページ全数突合）】行送りの差 163 件。
*
* 移行元 normal → dev 19.5px 76 件 19.5px = 13px（器の字）× 1.5
* 移行元 normal → dev 36px 70 件 36px = 24px（帯の字）× 1.5
* 移行元 32px → dev 24/27/33px 17 件 下の【百分率】を参照
*
* `1.5` は数値なので、受け継いだ先で「その要素自身の字の大きさ × 1.5」に
* 計算し直される。行送りの規則を持たない `a` と `img` も親から数値を受け継ぐため、
* 同じ 2 つの規則が原因である。
*
* 【`normal` ではなく `inherit` にする理由】移行元 public/service/experienced/css/style.css
* の 5〜12 行は `#experienced { font-size:16px; line-height:200% }` である。
* **百分率の行送りは宣言した要素で長さに確定し、子孫は自分の字の大きさに
* 関係なくその長さ（32px）をそのまま受け継ぐ。**写しも同じ値を持っており
* （experienced.css 19〜26 行）、器の 32px は dev でも出ている。負けているのは
* 段落と箇条書きだけである。ここで `normal` と書くと、移行元が 32px の 17 件を
* 逆に壊す。移行元が行送りを宣言していない以上、「親から受け継ぐ」が移行元と
* 同じ振る舞いである。
*
* main.css に同じ手の前例が 2 つある（35991 行の会社情報、38040 行の
* 入会案内。どちらも `:is(p, li, dt, dd) { line-height: inherit }`）。
*
* 【帯の段落を除く理由】来店予約・資料請求の帯は
* `support-band.css` 120〜126 行の `.box_support p { line-height: 2 }` で
* 行送り 48px を持つ。**あれは移行元・dev の両側で 48px が一致している。**
* しかも詳細度が (0,1,1) でこの規則と同じで、`article-reset.css` は
* `support-band.css` より後に読まれるため、除外しないと順で勝ってしまう。
* 実測（差し込んで測った）: 帯の高さ 668px → 662px、帯の段落 334px → 328px。
* 帯は投入した 5,488 記録のうち 4,849 件が持つ部品なので、巻き添えにできない。
*
* 除外を `:not(:where(...))` と書くのは、`:where()` の中身が強さに数えられず
* **(0,1,1) を保てる**ためである。`:not(.box_support p)` と書くと (0,2,2) に
* 上がり、移行元からの写しにまで勝ってしまう。
*
* **帯の箇条書きは除外しない。**帯の `li` は移行元も `normal` で、上の 36px
* 70 件はすべて帯の中にある（`#box-photo` の 4 件 ＋ ボタンの段の 6 件 × 7 ページ）。
* 実測で `#box-photo > ul > li` は 320px、ボタンの段の `li` は 69px と移行元に一致した。
*
* 【`dt` と `dd` を含める根拠】7 ページの `dt` / `dd` 26 件は、いま両側で
* 行送りが一致している。`inherit` を当てて測り直しても **26 件すべて変化 0** で、
* 壊れるものが無いことを確かめてから含めた（自分の値を持つ写し
* ―― `.reason dl dd` の 24px、パーソナル婚活プログラムの `dt` 13px /
* `dd` 25.2px ―― はいずれも (0,3,3) 以上で、この規則に負けない）。
* main.css の前例 2 つと同じ形にそろえる意味もある。
*
* 【Issue #3015 の前提を 2 点訂正した】
*
* 1. Issue は dev の 27px を「テーマの土台の値 1.8 が出ている（15px × 1.8）」と
* 見立てていたが、**実際は 18px × 1.5 である**。字は 18px
* （experienced.css 75〜79 行の `.text p { font-size:18px }`）で、
* 倍率は 1.5（上の変数）だった。**土台の 1.8 は本文の器に当たっておらず、
* この画面には出ていない。**
* 2. Issue は「移行元は `line-height: 32px` を本文へ当てている」と書き、
* 陰性対照に「この画面のページ専用 CSS の中だけで直す」を挙げていた。
* **移行元に本文の行送りの規則は無く、32px は器の `200%` が
* 長さに確定して受け継がれた値である。**そして同じ原因（テーマの段落と
* 箇条書きの規則）が **7 ページ 163 件**に出ているため、ページ専用の
* 写しでは直せない。区画共通の打ち消しであるこのファイルへ置く。
* 他の 6 ページも移行元へ近づくことを実測で確かめてある
* （行送りが動いたのは移行元と食い違っていた要素だけで、
* いま一致している `dt` / `dd` 26 件と帯は変化 0 件）。
*
* 【強さ】`:where()` と `:not(:where(...))` は数えないので **(0,1,1)**。
* テーマの同じ強さの規則に、あとに読むので勝つ。移行元からの写し
* （(0,3,1) 以上）には一切勝たない。
* 🚨 **ここを上げないこと。**上げると移行元の写しが持つ行送りまで消す。
*/
:where(.pa-page--service) .page-content__body :is(p, li, dt, dd):not(:where(.box_support p)) {
line-height: inherit;
}
/*
* 定義の並びの見出し（dt）の太さを、親から受け継ぐ形へ戻す（Issue #2778）。
*
* テーマは本文の器の中の `dt` を太字にしている。
*
* main.css 20430〜20433 行 `.page-content__body dt { font-weight: bold }` (0,1,1)
*
* **移行元に `dt` を太字にする規則は 1 つも無い。**探した範囲は次のとおりである。
*
* public/css/common.css 76〜79 行 全ブロック要素の margin と padding だけ（太さに触れない）
* public/css/common.css 95〜97 行 `h1〜h6 { font-size:100%; font-weight:normal }` … **dt は入っていない**
* public/css/common.css 71〜74 行 `address, caption, cite, code, dfn, em, th, strong, var` … dt は入っていない
* ページ別の写し元 4 本 `dt` の規則はあるが、どれも太さを宣言していない
* public/service/css/style.css 185 行 / public/service/promise/css/style.css 106・113・120・169 行 /
* public/service/point/css/style.css 36 行 / public/service/flow/css/style.css（dt の規則が 0 件）
*
* ブラウザ既定でも `dt` は太字にならない（UA スタイルシートが `dt` の太さを
* 宣言せず、親から受け継ぐ）。よって移行元は 400 である。
*
* 【実測（幅 1440px・7 ページ全数突合）】移行元 400 対 dev 700 が **12 個**。
*
* 5つの約束 `dt.serif.fadein` 6 個（字 20px / 23px）
* パーソナル婚活プログラム `.list dt`（`#cycle`） 4 個（字 13px）
* 入会から成婚までの流れ `.sections dt` 2 個（字 13px）
*
* **Issue #2778 の影響範囲を訂正した。**あちらは「`/service/promise/` の 6 個だけ・
* ほかの 6 ページには無い」と書いているが、実測では 3 ページ 12 個である。
*
* 【見出しの初期化へ相乗りしない理由】下の
* `:is(h1, h2, h3, h4, h5, h6)` の初期化へ `dt` を足す形は使えない。
*
* 1. **足しても直らない。**あの規則は margin / padding / border / color /
* font-size / line-height / letter-spacing を宣言しているが、
* **`font-weight` を宣言していない。**選択子に `dt` を足しても 700 のままである
* 2. **あの規則へ `font-weight` を足すと見出しを壊す。**7 ページの見出しの太さを
* 両側で測ると、いま全部一致している（クラス無しの `h2` 9 個・`h3` 5 個は 700、
* `h4.serif` と `h4.service_sub_title.serif` は 400）。このうちクラス無しの
* `h2` / `h3` は、dev では main.css 20297 行の (0,1,1) からしか 700 を得ていない
* （写しの側に太字を当てる規則が無いことを確認済み）。初期化へ
* `font-weight: inherit` を足すと、同じ強さで後に読むので 700 が消え、
* **いま一致している見出しを 400 へ壊す。**
*
* 【強さ】`:where()` は数えないので **(0,1,1)**。テーマの同じ強さの規則に、
* あとに読むので勝つ。自分で太さを決めている写し（experienced.css 119〜122 行の
* `.reason dl dt { font-weight:700 }` は (0,3,3)）には一切勝たない。
* 見出しの初期化と同じ強さなので、あちらを強くすることにはならない（Issue #2732 の型に触れない）。
*/
:where(.pa-page--service) .page-content__body dt {
font-weight: inherit;
}
/*
* 箇条書きの器（ul / ol）の下の外余白を 0 へ戻す（Issue #3015 / Issue #3017）。
*
* 移行元のサイト共通 CSS は、全ページの箇条書きの器を四方 0 にしている。
*
* public/css/common.css 266〜269 行
* `ol, ul { margin:0; text-align:left; }`
*
* テーマは縦のリズムを揃えるために下だけ余白を足している。
*
* main.css 20361〜20367 行
* `.page-content__body :is(ul, ol) { margin: 0 0 var(--pa-article-paragraph-gap); ... }` (0,1,1)
*
* 変数は main.css 19714 行の `--pa-article-paragraph-gap: 25px` である。
* **左右と上はテーマも 0 なので、下だけを戻す。**
*
* 【実測（幅 1440px）】7 ページの箇条書きの器を 1 つずつ両側で測り、
* 下余白が食い違うのは **2 件だけ**だった。
*
* 他社のご利用経験がある方へ `ul.serif` 移行元 0px → dev 25px 器の高さ 96px → 81px
* パーソナル婚活プログラム `ul.aside` 移行元 0px → dev 25px 器の高さ 140px → 137.5px
*
* **Issue #3015 と Issue #3017 は原因が同じで、この 1 つの規則で両方が直る。**
* ほかの箇条書き（`ul.menu_concept` / `ul.lo_nav` / `ul.category_menu02` /
* `.box_menu2` / `#box-photo > ul`）は下余白がもともと 0px で、
* この規則を足しても動かないことを実測で確かめた（巻き添え 0 件）。
*
* 【強さ】`:where()` は数えないので **(0,1,1)**。テーマの同じ強さの規則に、
* あとに読むので勝つ。
*/
:where(.pa-page--service) .page-content__body :is(ul, ol) {
margin-bottom: 0;
}
/*
* 節の囲み（.box）の上下の外余白を 0 へ戻す（Issue #3015）。
*
* **クラス名の衝突である。**婚活コラム（`/word/`）向けに写した規則が、
* 他社のご利用経験がある方への `#experienced03 .box` にも当たっている。
*
* main.css 20726〜20728 行 `:is(...) .box { margin-top: var(--pa-article-block-gap) }` (0,2,0) = 50px
* main.css 20735〜20737 行 `:is(...) .box:not(:has(~ .box)) { margin-bottom: var(--pa-space-md) }` (0,3,0) = 60px
*
* 変数は main.css 19711 行の `--pa-article-block-gap: 50px` と
* main.css 374 行の `--pa-space-md: 60px` である。
*
* **写しは上下の外余白を持っていない。**experienced.css 127〜131 行の
* `#experienced03 .box` は `width` / `float` / `margin-right` だけで、
* 詳細度は (1,3,1) と高いのに上下の宣言が無いため勝負にならない。
* 移行元 public/service/experienced/css/style.css も同じ 3 つだけで、
* 上下は common.css 76〜79 行の初期化で 0 になる。
*
* 【実測（幅 1440px）】囲みは `float: left` なので、上の 50px が段を押し下げる。
*
* `div.box` の上の外余白 移行元 0px → dev 50px（2 個とも）
* 2 つ目の `div.box` の下の外余白 移行元 0px → dev 60px
* `section#experienced03` の高さ 移行元 500px → dev 610px（+110px）
*
* **位置と幅は両側で一致しており、区画の高さだけが違う。**外余白だけを見ると
* 見落としやすい形である。
*
* 【2 本に分ける理由】`.box` の 1 本（(0,2,0)）では下の 60px に届かない。
* テーマの下余白は `.box:not(:has(~ .box))` で **(0,3,0)** だからである
* （`:not()` と `:has()` はどちらも引数の中の最大値を取るので、
* `:is(...)` + `.box` + `:not(:has(~ .box))` で (0,3,0) になる）。
* 同じ形で書き、同じ強さのまま読む順で勝つ。
*
* 【`margin-block` を使う理由】上下だけを狙い、写しの `margin-right: 80px`
* （囲みどうしの間隔）に触らないためである。
*
* 【強さ】上の 1 本が **(0,2,0)**、下の 1 本が **(0,3,0)**。どちらもテーマと
* 同じ強さで、あとに読むので勝つ。写しの (1,3,1) には一切勝たない。
*/
:where(.pa-page--service) .page-content__body .box {
margin-block: 0;
}
:where(.pa-page--service) .page-content__body .box:not(:has(~ .box)) {
margin-bottom: 0;
}
/*
* 画像を元の大きさのまま置く（Issue #2680）。
*
* テーマは全体へ `img { max-width: 100%; height: auto }` を当てている
* （main.css の 681〜684 行）。**移行元にこの規則は無い**（移行元の
* `css/common.css` が画像へ当てているのは `a img, img { border: 0 }` だけ）。
*
* この 1 行があると、横並び（flex）の中で画像が縮められる状態になる。すると
* 写真の器まで縮み、あふれた分が並んだ器へ分散する。移行元は画像が元の幅を
* 保つため、**あふれた分をすべて文章の器が引き受ける。**この違いが器の幅の
* 差として出ていた（実測・幅 1440px）。
*
* /service/flow/ 写真の器 .ph 移行元 369px → dev 351.63px
* 文章の器 .txt_area 移行元 531px → dev 548.38px
* /service/multi/ 画像の器 .flow_ico 移行元 62px → dev 26.19px
*
* 【対照実験で確かめた】移行元と同じ骨組み（幅 900px の flex ／ 中に幅 369px の
* 画像と `width: 573px` の文章の器）を作り、条件だけを変えて測った。
*
* 画像の縮み止めなし .ph 369 .txt_area 531 ← 移行元と一致
* `img { max-width: 100% }` を足す .ph 352.55 .txt_area 547.45 ← dev と一致
* `box-sizing: border-box` を足す .ph 369 .txt_area 531
*
* **`box-sizing` は無関係だった。**差を作っているのはこの 1 行だけである。
*
* 【全体指定は消さない】あちらは携帯幅で必要である（main.css の注釈に「幅
* 2000px 級の画像が 411 件あり、この 2 行が無いと 375px で横にはみ出す。
* 28 ページ中 15 ページが崩れ、その主因がこれだった」と実測が残っている）。
* ここで外すのは**サービス紹介の本文の中だけ**で、しかも区画の CSS は幅
* 1297px 以上にしか配られない（`inc/service-page-css.php` の
* `PA_SERVICE_PAGE_CSS_MEDIA`）。携帯幅へは届かない。
*
* 【縦の位置合わせ】テーマは本文の画像を `vertical-align: middle` にしている。
* 移行元は画像を行の中の箱のまま扱い、位置合わせを変えていないので既定の
* `baseline` へ戻す。
*/
:where(.pa-page--service) .page-content__body img {
max-width: none;
vertical-align: baseline;
}
/*
* 見出し（h1〜h6）の余白を、移行元の初期化に合わせて 0 へ戻す（Issue #2678）。
*
* 移行元のサイト共通 CSS（public/css/common.css の 76〜79 行）は、見出しを
* 含む全ブロック要素の margin と padding を 0 に初期化してから、ページごとの
* CSS で必要な分だけ足す作りになっている。
*
* blockquote, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, pre,
* span, td, th, ul { margin:0; padding:0; }
*
* テーマは逆に、本文の器（.page-content__body）の中の見出しへ
* `margin: 50px 0 20px`（main.css の .page-content__body :is(h2, h3, h4,
* h5, h6)）を足している。写した本文は移行元の初期化を前提に組まれ、
* 見出しの余白を自分では指定していないため、テーマの値がそのまま出ていた
* （実測: 上の外余白 移行元 0px → dev 50px、17 件）。
*
* 【罫線と字間も戻す】テーマは見出しへ飾りの罫線と字間も足している。
* どちらも移行元には無い。外部レビューの指摘（PR #2694）を受けて実測した
* （幅 1440px・2026-09-01）。
*
* .page-content__body h3 … border-left: 4px solid（金）
* .page-content__body h2 … border-bottom: 2px solid（金）
* .page-content__body :is(h2〜h6) … letter-spacing: 0.05em
*
* 節の題名（.sectionTitle01）を持つ 2 ページで、次の差が出ていた。
*
* /service/experienced/ h3 左罫線 移行元 0px → dev 4px
* 字間 移行元 normal → dev 1.1px
* /service/flow/index0706/ h2 下罫線 移行元 0px → dev 2px
* 字間 移行元 normal → dev 1.4px
*
* 字間は中の `span` へも受け継がれ、題名の幅を広げていた
* （移行元 312px → dev 326.31px。文字数ぶんの 1.1px が積み上がる）。
*
* **この 2 つは全数突合の道具では見つからない。**道具が採るのは寸法・揃え・
* 組み方・字の大きさ・行送り・余白・内余白だけで、罫線と字間を採っていない。
* 罫線は要素の外形の幅を変えないため、幅の比較にも表れなかった。
*
* 罫線を消しても移行元の飾りは失われない。移行元の題名の下線は見出しではなく
* 中の `span` が持っており（`page_company.css` の
* `#contents .sectionTitle01 span { border-bottom: 4px solid #aa8546 }`）、
* 写しの側でも同じく `span` に置いてある。区画の写し 6 本を調べても、
* 見出し要素そのものへ罫線を当てている規則は 1 つも無い。
*
* 【強さ】`:where()` は数えないので (0,1,1)。テーマの同じ強さの規則
* （.page-content__body :is(h2, h3, h4, h5, h6) も (0,1,1)）に、あとに
* 読むので勝つ。移行元からの写し（(0,2,0) 以上）には一切勝たない。
*/
/*
* 【字の大きさも戻す】（Issue #2680）
*
* 移行元の共通 CSS は、見出しの余白を 0 にするのと同じ節で、**字の大きさも
* 親から受け継ぐところまで戻している**（`css/common.css` 95〜96 行の
* `h1, h2, h3, h4, h5, h6 { font-size: 100% }`）。テーマは代わりに段ごとの
* 大きさ（`--pa-article-h2-size` 等）を当てているため、写した本文の見出しが
* 移行元より大きく出ていた。
*
* /service/experienced/ h3 移行元 16px → dev 22px
* /service/flow/index0706/ h2 移行元 13px → dev 28px
*
* これは見出しそのものだけの話ではない。**見出しの中の素の文字の幅が変わる。**
* `/service/flow/index0706/` のコース名は `…
* ……
` の形で、この 2 つの `span` は移行元
* にも写しにも寸法の指定が無く、幅が字の大きさだけで決まる。
*
* .tag 移行元 56.27px → dev 100.7px
* .emphasis 移行元 38.36px → dev 68.2px
*
* `font-size: 100%` は `inherit` と同じ意味なので、そのまま `inherit` と書く。
*
* 【色も戻す】（Issue #2732）
*
* **移行元の見出しは色の指定を持たず、地の黒を継ぐ。**テーマは見出しへ金
* （`main.css` の `.page-content__body h2` / `h3` の `color: var(--pa-color-heading)`）
* を当てているため、写した見出しが金で出ていた。
*
* h2.main_ttl.main_ttl02 6 ページ 移行元 rgb(0,0,0) → dev rgb(163,118,43)
* h3.conseptTitle01.serif 5 ページ 同上
* span.tag / span.emphasis 各 1 親の見出しの色を継ぐので連動していた
*
* 合わせて 13 件。**7 ページのうち 6 ページで題名の色が違っており、目に付く差
* だった。**
*
* **直値ではなく `inherit` にする。**移行元が色を宣言していない以上、「継ぐ」が
* 移行元と同じ振る舞いである。継ぐ先は本文の器の色で、サービス紹介は旧デザイン
* 扱い（`body` に `pa-profile-legacy-compat` が付き `pa-profile-new` は付かない）
* なので `main.css` の `body:not(.pa-profile-new) .page-content__body` が
* `--pa-palette-ink-legacy`（`#000`）を渡す。**移行元の実測 `rgb(0, 0, 0)` と
* 一致する。**
*
* 節の題名（`.sectionTitle01`）の金は消えない。あちらは移行元の
* `page_company.css` が自分で色を持っており、下の (0,3,0) の写しが通している。
*
* 【強さ】`:where()` は数えないので (0,1,1)。テーマの段ごとの規則
* （.page-content__body h3 等も (0,1,1)）に、あとに読むので勝つ。移行元からの
* 写しが自分で大きさや色を決めている見出し（(0,3,1) 以上）には一切勝たない。
* 🚨 **ここを上げないこと。**上げると移行元の写しが持つ色まで消す（Issue #2557
* の型）。
*/
:where(.pa-page--service) .page-content__body :is(h1, h2, h3, h4, h5, h6) {
margin: 0;
padding: 0;
border: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: normal;
}
/*
* 中身が画像 1 枚だけの見出しにも、同じ初期化を届かせる（Issue #2721）。
*
* テーマは婚活コラムのアイキャッチ画像のために、画像 1 枚だけの見出しを狙った
* 規則を置いている（`main.css` の
* `.page-content__body :is(h2〜h6):has(> img:only-child)`）。そこで当てている
* `margin: 0 0 var(--pa-article-paragraph-gap)` の変数は **25px** である。
*
* **上の初期化ではこれに届かない。**`:has()` の詳細度は引数の中の最大値を取る。
* `img:only-child` が要素 1 ＋ 擬似クラス 1 なので、テーマの規則は **(0,2,2)**
* になり、上の初期化 (0,1,1) が負ける。
*
* 実害（Issue #2678 の配備検収で判明）: /service/multi/ と /service/point/ の
* 画像だけの h4 6 個で、下の外余白が 移行元 0px → dev 25px になっていた。
*
* 【同じ形で 1 段強く書く】テーマにすでに前例がある（`main.css` の
* `.single-content--recruit ... .wrap_movie h2:has(> img:only-child)`。
* 採用情報の動画の見出しで、移行元の 60px を通すために同じ手を使っている）。
*
* 【強さ】`:where()` は数えないので、テーマと同じ **(0,2,2)** である。あとに
* 読むので勝つ。移行元からの写し（(0,3,1) 以上）には一切勝たない。
*
* 【題名の画像を巻き込まない】`.main_ttl02` も「画像 1 枚だけの見出し」だが、
* ここで戻すのは外余白だけである。あちらの内余白 30px は下の (0,3,0) の写しが
* 通しており、この規則は内余白に触れないので影響しない（移行元の
* `#contents .main_ttl02` も外余白を持たない）.
*/
:where(.pa-page--service) .page-content__body :is(h1, h2, h3, h4, h5, h6):has(> img:only-child) {
margin: 0;
}
/*
* 節の題名（.sectionTitle01）を、会社情報の CSS から写す（Issue #2678）。
*
* サービス紹介のページは移行元でも「会社情報」の CSS
* （public/css/page_company.css の 27〜39 行）を読み込んでおり、節の題名は
* そこで組まれている。区画ごとの写し（section.css）はページ本体の CSS だけを
* 対象に生成しているため、この規則は写しの対象から外れ、上の見出しの初期化
* だけが効いて余白と揃えが崩れていた（実測: 下の外余白 移行元 100px →
* dev 20px、揃え center → left）。
*
* 【`:where()` を使わない理由】この規則は打ち消しではなく移行元からの写し
* である。3 クラスで (0,3,0) となり、上の見出しの初期化（(0,1,1)）にも
* テーマの規則にも勝つ。
*/
.pa-page--service .page-content__body .sectionTitle01 {
margin-bottom: 100px;
text-align: center;
color: #aa8546;
}
.pa-page--service .page-content__body .sectionTitle01 span {
display: inline-block;
padding-bottom: 8px;
border-bottom: 4px solid #aa8546;
font-size: 24px;
font-weight: bold;
line-height: 1;
}
/*
* 題名の画像（.main_ttl02）の内余白を、テーマの別の規則との競合から救う
* （Issue #2678）。
*
* 移行元 public/css/style.css の 1317 行
* `#contents .main_ttl02 { padding: 30px 0; height: auto; line-height: 1 }`
* は main.css の `:is(.entry-content, .page-content__body) .main_ttl02`
* として既に写してある。しかし移行元の本文は
* `![]()
` で中身が画像 1 つだけの
* 見出しになっており、main.css の
* `.page-content__body :is(h2, h3, h4, h5, h6):has(> img:only-child)`
* （強さ (0,2,2)）が `padding: 0` を当てて 30px を消していた（写しの強さは
* 2 クラスで (0,2,0)、負けていた）。実測: 上の内余白 移行元 30px → dev 0px、
* 12 件。
*
* テーマの `:has(> img:only-child)` の規則そのものは、婚活コラムのアイキャッチ
* 画像（h4 見出し）向けに意図して置かれているため消さない。ここでは
* `.main_ttl02` だけを狙って上書きする。
*
* 【`:where()` を使わない理由】3 クラスで (0,3,0) となり、テーマの (0,2,2)
* に勝つ（クラス 3 個 > 2 個）。
*/
.pa-page--service .page-content__body .main_ttl02 {
padding: 30px 0;
}
/*
* コンセプトの主役の画像の中の文章を、移行元と同じゴシックへ戻す。
*
* **原因は詳細度の逆転である。**移行元では游ゴシックの規則が勝つのに、dev では
* 明朝の規則が勝つ。どちらの側も写し漏れではなく、**2 つの規則に別々の前置きを
* 足したことで力関係がひっくり返った。**
*
* 移行元 public/css/style.css 11〜13 行
* `#concept.gothic p, .gothic { font-family: YuGothic, ... }` (1,1,1)
* 移行元 public/service/css/style.css 52 行
* `#concept p { ... font-family: 游明朝, ... }` (1,0,1)
* → クラスが 1 個多い游ゴシック側が勝つ。**移行元はゴシックである。**
*
* dev main.css 37764〜37767 行
* `:is(.entry-content, .page-content__body) #concept.gothic p` (1,2,1)
* dev section.css 66〜70 行
* `body .pa-page--service .page-content__body #concept p` (1,2,2)
* → 要素が 1 個多い明朝側が勝つ。**dev は明朝になっていた。**
*
* 明朝側は生成の段で `body .pa-page--service .page-content__body`（要素 2 ＋
* クラス 2）を前置され、游ゴシック側は `:is(.entry-content, .page-content__body)`
* （クラス 1 だけ）を前置された。この前置きの差が、移行元にあった游ゴシック側の
* 1 クラス分の優位を打ち消している。
*
* 【実測（幅 1440px）】`#concept.gothic .mainVisual p`（y=521）1 件。
* 中の `img` も親から受け継ぐので連動していた。
*
* 移行元 YuGothic, "Yu Gothic", 游ゴシック, sans-serif
* dev 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", ..., serif
*
* `.gothic` 自体（`section#concept.gothic` と、そこから受け継ぐ `div.mainVisual`）は
* 両側ともゴシックで一致していた。**負けているのは中の段落だけである。**
*
* 【main.css を直さない理由】37764 行の選択子を 1 段上げても同じ結果になるが、
* `main.css` は 7 つの枠が同時に触る共有ファイルである（support-band.css
* 31〜36 行の記録）。この規則が狙う `#concept` はサービス紹介にしか無いので、
* 区画のファイル側で上書きする。
*
* 【`:where()` を使わない理由】これは打ち消しではなく移行元からの写しである。
* `.pa-page--service` ＋ `.page-content__body` ＋ `#concept` ＋ `.gothic` ＋ `p` で
* **(1,3,1)** となり、id は同数・クラスが 3 対 2 で section.css の (1,2,2) に勝つ。
* `.gothic` 単独へ当てる main.css の 2 つ目の選択子には触れないので、
* 器のゴシックはそのまま通る。
*/
.pa-page--service .page-content__body #concept.gothic p {
font-family: "YuGothic", "Yu Gothic", "游ゴシック", sans-serif;
}
/*
* 主役の画像の器の高さを、移行元と同じ数え方へ戻す（Issue #2765）。
*
* 写しは移行元と**同じ値**を持っており、写し漏れではない。
*
* .mainVisual { height: 526px; padding-bottom: 75px; }
*
* 違うのは箱の数え方だけである。
*
* 移行元 … `content-box`（既定）。外形 = 526 + 75 = 601px
* dev … `border-box`。 外形 = 526px
*
* このテーマは main.css の 466〜470 行で `box-sizing: border-box` を全体に
* 当てている。移行元は必要な箇所にだけ当てており、それ以外は既定のままである。
* **この違いは既知で、箇所ごとに手当てされてきた**（main.css の 881〜887 行に、
* カテゴリの帯での記録がある）。この要素はその手当てが漏れていた。
*
* 【外形の値を書き直さない理由】`height: 601px` と書いても同じ外形になるが、
* 移行元と見比べたときに「なぜ違う数字なのか」が読み取れなくなる。箱の数え方を
* 戻せば、写しの値をそのまま移行元と突き合わせられる。
*
* 【影響の範囲】箱の数え方は 166 要素でずれているが、**高さの差になるのは
* 「高さ（幅）を明示し、かつ内余白か罫線を持つ」要素だけ**である。サービス紹介
* 7 ページの全数では、この要素とその親の 2 件だけだった（実測 2026-09-02）。
*
* 実測: 高さ 移行元 601px → dev 526px、2 件（`.mainVisual` とその親 `.gothic`）。
*/
:where(.pa-page--service) .page-content__body .mainVisual {
box-sizing: content-box;
}
/*
* 「経験豊富」の理由の箱の幅を、移行元と同じ数え方へ戻す（Issue #2772）。
*
* 写しは移行元と**同じ値**を持っており、写し漏れではない。
*
* .reason dl { width: 710px; padding: 25px 32px; }
*
* 違うのは箱の数え方だけである。
*
* 移行元 … `content-box`（既定）。外形 = 710 + 32*2 = 774px
* dev … `border-box`。 外形 = 710px
*
* このテーマは main.css の 466〜470 行で `box-sizing: border-box` を全体に
* 当てている。移行元は必要な箇所にだけ当てており、それ以外は既定のままである。
* この違いは既知で、箇所ごとに手当てされてきた（上の `.mainVisual` の手当てを
* 参照）。この要素はその手当てが漏れていた。
*
* 【外形の値を書き直さない理由】`width: 774px` と書いても同じ外形になるが、
* 移行元と見比べたときに「なぜ違う数字なのか」が読み取れなくなる。箱の数え方を
* 戻せば、写しの値をそのまま移行元と突き合わせられる。
*
* 実測（幅 1440px・2026-09-02）: 幅 移行元 774px → dev 710px。幅が狭いぶん
* 文字が折り返し、高さも変わっていた。
*/
:where(.pa-page--service) .page-content__body .reason dl {
box-sizing: content-box;
}
}
/*
* 🚨 ここから下は携帯幅（749px 以下）だけの塊である（共通原因 4 / Task #3414）。
*
* このファイルは全部の幅へ配られる（`inc/service-page-css.php` の
* PA_SERVICE_PAGE_CSS_MEDIA = 'all'）。上のパソコン幅の塊と同じ理由で、
* 幅で絞るのはこの `@media` の役目である。
*/
@media (max-width: 749px) {
/*
* 他社サービスをご経験された方へ（`/service/experienced/`）の本文の基準を、
* 移行元のスマホ版と同じ **13px / normal** にする。
*
* 上のパソコン幅の塊が持つ 2 本と同じ内容だが、**当てるのは 1 ページだけ**である。
*
* 【なぜ 1 ページだけなのか】当初は「サービス配下の 7 ページ共通の原因」として
* 挙がっていた。実ページで測り直すと、**器の値は 6 ページとも違うのに、その値が
* 文字まで届いているのは このページだけ**だった。ほかの 5 ページはページ別に写した
* CSS が `p` へ直接当たっていて、受け継ぎに勝っている。
*
* 【7 ページへ当てると 4 ページで壊れる】規則を実ページへ注ぎ込んで前後を測った。
*
* /service/flow/ `p` ×8 14px の行送りが 25.2px → normal（移行元は 25.2px）
* /service/multi/ `p` ×5 同上
* /service/point/ `p` ×5・`li` ×4 同上
* 7 ページすべて 誘導帯の `span` ×2 32.2px → normal（移行元も 32.2px）
*
* 誘導帯（`.pa-conv-band`）は全画面で使う共通部品なので、ここを壊すと担当の外まで
* 波及する。**だから当たり先を体の類名で 1 ページに絞る。**
*
* 【実測（幅 375px・2026-09-05・dev の実ページへこの塊を差し込んで前後比較）】
* このページで 13 件が変わる。残り 6 ページは 0 件・高さの変化 0px。
* 幅 1440px では 7 ページとも 0 件・高さの変化 0px だった。
*
* `p` ×8 / `li` ×3 / `dd` ×1 15px/27px → 13px/normal
* `dt` ×1 20px/36px → 20px/normal（行送りだけ）
*
* 移行元のスマホ版は器（`#contents`）が 13px/normal で、`p` も `li` も `dd` も
* 13px/normal なので、直したあとの値と一致する。
*
* 🚨 **注釈 2 件（`p.s` 10.79px / `p.figure` 10.4px）はこの塊では変わらない。**
* 下のほうで行送り 15px を直接書いているので、`line-height: inherit` が届かない。
* 移行元も実機の実測が 15px なので、変わらないのが正しい。
*
* 🚨 **高さは移行元へ近づかない**（dev は 7170 → 6773）。字が小さくなるぶん
* 縮むためで、残る差は焼き込みの絵などが担う。合否は**要素ごとの字の大きさと
* 行送り**で見る（高さでは見ない）。
*/
.pa-service-page--experienced :where(.pa-page--service) .page-content__body {
font-size: 13px;
line-height: normal;
}
/*
* 🚨 **除外を 2 つ持つ。**
*
* `.box_support p` … `support-band.css` の `line-height: 2` を残す
* （パソコン幅の塊と同じ理由）
* `.pa-conv-band p` … 誘導帯は移行元も 32.2px である。外すと 7 ページ全部で
* 誘導帯の行送りが壊れる（実測）
*
* 【強さ】`:where()` と `:not(:where(...))` は数えないので **(0,2,1)**。
* 体の類名を 1 つ足したぶんだけパソコン幅の塊より強いが、移行元からの写し
* （(0,3,1) 以上）には一切勝たない。🚨 **ここを上げないこと。**
*/
.pa-service-page--experienced :where(.pa-page--service) .page-content__body
:is(p, li, dt, dd):not(:where(.box_support p, .pa-conv-band p)) {
line-height: inherit;
}
}