@charset "utf-8";

/*
 * 体験談の詳細ページへ足した 4 区画を、狭い画面でも壊れずに出すための調整。
 * Issue #2676（PR #2792 のレビュー指摘への対応）。
 *
 * ## なぜ要るか
 *
 * 写した CSS（`introduce-sections.css`）は、はじめ `(min-width: 1117px)` の条件つきで
 * 配っていた。**狭い画面では 1 行も届かず、4 区画が素の組みのまま出る。**
 *
 * しかし**移行元は携帯向けのページにも同じ 4 区画を持っている**（記録版の
 * `public/sp/introduce/experience/detail.php` に `introduce_nav` `special-contents`
 * `contact` `branch-list` の 4 つがある）。狭い画面で配らないのは移行元と違う。
 *
 * そこで条件を外して全幅で配り、そのままでは横へはみ出す固定幅だけをここで抑える。
 *
 * ## なぜ閾値を決め打ちしないか
 *
 * はじめの実装は「必要な幅 1100px + スクロールバー 17px = 1117px 以上でだけ配る」と
 * していたが、**この区画でいちばん広いのは案内の帯の 1280px** なので、1117px でも
 * 足りていなかった。閾値を当てにすると、写し元の値が変わるたびに合わなくなる。
 * ここでは「親より広くならない」だけを無条件に足す。パソコンの幅では値が変わらない。
 *
 * ## 飾りの画像を狭い画面で消す理由
 *
 * `.ornament-img` は絶対配置で器の右端の外へ置く飾りである。画面が狭いと器の外側に
 * 置く余地が無く、20px ほど横へはみ出して横スクロールを生む。中身ではなく飾りなので、
 * 器の幅が足りない画面では出さない。移行元の携帯向けのページも、この飾りを持たない。
 *
 * ## 測った結果（診断ページの同じ部品を型紙と同じ位置へ移して実測。2026-09-02）
 *
 * | 幅 | 写しなし | 写しのみ | 写し + この調整 |
 * |---|---|---|---|
 * | 1440px | 横スクロールなし | なし | **なし** |
 * | 1280px | なし | なし | **なし** |
 * | 700px | あり（722） | あり | **なし（700）** |
 * | 375px | あり（397） | あり（1280） | **なし（375）** |
 *
 * ## 🚨 これは携帯向けの見た目の再現ではない
 *
 * 移行元の携帯向けのページは専用の CSS を別に持つ（`sp_style_experience_details.css`
 * ほか）。ここで受け持つのは「狭い画面で内容が欠けたり横へ流れたりしないこと」までで、
 * 携帯向けの意匠をそろえる作業は別に要る。
 */

/* ==================================================================
 * パソコン幅の見出しを太字へ戻す（Task #3622）
 * ==================================================================
 *
 * 移行元のパソコン版は、共通 CSS（`/css/common.css`）で見出しを 2 段階に初期化する。
 * 95〜98 行で `h1〜h6 { font-size: 100%; font-weight: normal }` と細字へ落とし、
 * **260 行の同じ選択子 `h1〜h6 { font-weight: bold }` で太字へ戻す。**
 * 写しの生成物（`introduce-sections.css` の 64 行）は前半だけを取り込んでおり、
 * **後半の戻しが落ちている。**そのため dev の 4 区画の見出しが細字のままだった。
 *
 * 幅 1440px の実測（移行元 = 本番 www.p-a.jp を 2026-09-05 10:25 JST に取得、
 * dev = 10:26〜10:27 JST に取得。体験談の 7 ページすべてで同じ）:
 *
 *   | 見出し                | 移行元 | dev（直す前） | 直したあと |
 *   | h2.heading-lead__ttl  | 700    | 400           | 700        |
 *   | h2.title_area（2 個） | 700    | 400           | 700        |
 *   | h3.title_txt          | 700    | 700           | 700（変化なし） |
 *
 * `h3.title_txt` は写しの中に専用の規則（詳細度が上）を持つため、この 1 本の影響を
 * 受けない。移行元でも 700 なので、直す前から一致している。
 *
 * 🚨 **見た目が変わるのは `h2.heading-lead__ttl` の 7 件だけである。**`h2.title_area` は
 * 絵 1 枚（`top_contact_ttl01.png` と `top_branch-list_ttl01.png`）だけを入れた見出しで、
 * 文字を 1 つも描かない（文字の並びの幅が両側とも 0px。直接持つ文字ノードも無い）。
 * 太さをそろえても画面は動かないが、移行元と同じ指定になる。
 *
 * 当たり先が `:is(h1, h2, h3, h4, h5, h6)` と広いのは、移行元の初期化がそのままの形だから
 * である。**器の中の見出しは 4 件しか無いことを、2 つのやり方で数えて確かめた**
 * （採取した全要素から数える方法と、`document.querySelectorAll` でページ全体へ問い合わせる
 * 方法。7 ページとも `heading-lead__ttl` 1 件・`title_area` 2 件・`title_txt` 1 件で、
 * 器も見出しも `#site-main` の外には 1 つも無い）。
 *
 * 🚨 **携帯幅（749px 以下）へは広げない。**移行元はパソコン版とスマホ版で初期化の
 * 向きが逆である。スマホ版の共通 CSS は見出しを細字にしたまま戻さず、
 * `heading-lead__ttl` だけを太字にしている。幅 375px の実測（移行元のスマホ版を
 * 2026-09-05 10:38 JST に携帯の名乗りで取得。転送先は `/sp/introduce/experience/`）:
 *
 *   | 見出し                | 移行元スマホ版 | dev 375px |
 *   | h2.heading-lead__ttl  | 700            | 400       |
 *   | h2.title_area（2 個） | 400            | 400       |
 *
 * つまり携帯幅で同じ 1 本を当てると、`title_area` が移行元より太くなって新しい差を
 * 作る。携帯幅の `heading-lead__ttl` の差は別に扱う（Task #3622 の対象外。
 * Issue の AC が「携帯幅の姿を変えない」と定めている）。
 *
 * 🚨 **写しの生成物（`introduce-sections.css`）を手で直さない。**あちらの冒頭に
 * 「この生成物を手で編集しない」と書いてある。この手書きの 1 本は生成物より後に
 * 読まれ、選択子の形も同じなので、後に書いたこちらが勝つ（下の飾りの位置の
 * 組み替えと同じ作法である）. */
@media (min-width: 750px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections :is(h1, h2, h3, h4, h5, h6) {
		font-weight: bold;
	}
}

/* ==================================================================
 * 携帯幅の前置きの見出しだけを太字へ戻す（Task #3695）
 * ==================================================================
 *
 * 🚨 **移行元はパソコン版とスマホ版で見出しの初期化の向きが逆である。**上のパソコン幅の
 * 塊は、移行元の共通 CSS が細字にしてから同じ選択子で太字へ戻す形をそのまま写している。
 * **スマホ版は戻さない。**細字にしたまま残し、`heading-lead__ttl` だけを太字にする
 * （写しの記録版 1fbfa9dda の `public/sp/introduce/css/sp_style_experience.css` の
 * 786〜787 行 `#special-contents .heading .heading-lead__ttl { font-weight: bold }`）。
 *
 * 幅 375px の実測（移行元 = 本番を携帯の名乗りで取得し `/sp/introduce/experience/` へ
 * 転送された先。dev = 移行先）:
 *
 *   | 見出し                | 移行元スマホ版 | dev（直す前） | 直したあと |
 *   | h2.heading-lead__ttl  | 700            | 400           | 700        |
 *   | h2.title_area（2 個） | 400            | 400           | 400（変えない） |
 *
 * 🚨 **当たり先を `heading-lead__ttl` に絞ること。**上のパソコン幅と同じ
 * `:is(h1, h2, h3, h4, h5, h6)` を携帯幅へ広げると、`title_area` が移行元より太くなって
 * 新しい差を作る（移行元スマホ版の `title_area` は 400 である）。この分け方は
 * `tests-retired/pa-cms-experience-heading-color/` が両方向で見張っている。
 *
 * 🚨 **箱の大きさは変わらない。**移行元と dev の箱は直す前から 255 × 43.19px で一致して
 * おり、変わるのは太さだけである.
 * ================================================================== */
@media (max-width: 749px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .heading-lead__ttl {
		font-weight: bold;
	}
}

/* ==================================================================
 * 携帯幅で節の題の絵を塊にする（Bug #3774）
 * ==================================================================
 *
 * 節の題 `h2.title_area` は**絵 1 枚だけ**の見出しで、文字を 1 つも描かない。
 * 移行元スマホ版はこの絵を `display: block` にしているが、dev は既定の `inline` の
 * ままである。行の中に置かれた絵はベースラインに乗るので、**その下に文字の下端
 * ぶんの空きが 6px できる**。器に地の色も枠線も無いので器そのものは見えないが、
 * **題の絵と次の文のあいだの空きが 6px 広くなるのが画面に出る**。
 *
 * 幅 375px の実測（移行元 = 本番を携帯の名乗りで取得し `/sp/introduce/experience/` へ
 * 転送された先を 2026-09-07 01:31 JST に 1 回。dev = 移行先を同 01:31 JST）:
 *
 *   |                      | 移行元スマホ版 | dev（直す前） |
 *   | 絵の display         | block          | inline        |
 *   | 絵の表示寸法（2 個） | 103.5 × 26.47 / 119 × 33.19 | 同じ |
 *   | 絵の下の空き         | 0px            | **6px**       |
 *   | 器の高さ（2 個）     | 26.47 / 33.19  | 32.47 / 39.19 |
 *   | 次の文までの空き     | 0px            | **6px**       |
 *
 * 🚨 **パソコン幅は直さない。**移行元も dev も `inline` で、器の高さの差 6px が
 * 両側で一致している（dev の実測は 2026-09-07 01:32 JST・器 61 / 71px）。ここを
 * 幅で囲わずに当てると、パソコン幅で移行元に無い詰まり方を作ってしまう。
 *
 * 🚨 **当たり先を体験談へ絞ること。**`.title_area` の絵は共有部品（`contact-us` と
 * `branch-list`）にもあり、7 つの型紙が読む。このファイルは冒頭で
 * `body:is(.single-experience, .post-type-archive-experience)` に絞っているので、
 * その絞りの中へ置く。絞りを外すと他の 6 ページの題の下の空きまで詰まる.
 * ================================================================== */
@media (max-width: 749px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .title_area img {
		display: block;
	}
}

/* ==================================================================
 * 携帯幅で飾りと特集の題の絵を塊にする（Bug #4149）
 * ==================================================================
 *
 * 節の題（Bug #3774）と同じ話が、共有部品の**飾り 3 枚と特集の題 1 枚**にも
 * 残っていた。行の中（既定の `inline`）に置かれた絵はベースラインに乗るので、
 * **その下に文字の下端ぶんの空きが 6px できる**。器に地の色も枠線も無いので器
 * そのものは見えないが、**絵と次の要素のあいだの空きが 6px 広くなるのが画面に
 * 出る**。
 *
 * 幅 375px の実測（移行元 = 本番を携帯の名乗りで取得し `/sp/introduce/experience/`
 * へ着地した先を 2026-09-07 12:55:19 JST に 1 回。dev = 移行先を同 12:5x JST）:
 *
 *   | 器                        | 絵の寸法       | 移行元の器 | dev の器（直す前） | dev の空き |
 *   | .title__area              | 127.83 × 29.17 | 29.17px    | 35.17px            | 6px        |
 *   | .ornament-img_branch-list01 | 95 × 77.42   | 77.42px    | 83.42px            | 6px        |
 *   | .ornament-img_contact02   | 89 × 123.06    | 123.06px   | 129.06px           | 6px        |
 *   | .ornament-img_contact03   | 89 × 111.95    | 111.95px   | 117.95px           | 6px        |
 *
 * 移行元は**見える絵 60 枚のうち行の中が 0 枚**（塊 56 枚・`inline-block` 4 枚）で
 * ある。絵の表示寸法は 4 枚とも両側で完全に一致しており、**器の高さだけが 6px
 * 違っていた**。
 *
 * 🚨 **当たり先は `:is(img, picture)` にする。**問い合わせの飾り 2 枚は、携帯幅で
 * 移行元スマホ版の絵へ差し替えるために `div > picture > img` の入れ子になっている
 * （Task #3682）。**包み（`picture`）自体も行の中に置かれる**ので、`img` だけを
 * 塊にしても包みがベースラインに残り、空きが消えない。実ページで測って確かめた。
 *
 * 🚨 **問い合わせの飾りは、器の番号が両側でずれている。**移行元はパソコン版が
 * 3 枚（バラ・鳥・手）、スマホ版が 2 枚（鳥・手）で、dev は器を 01〜03 の 3 つ持つ。
 * **dev の 02 が移行元スマホ版の 01（鳥）、dev の 03 が同 02（手）に当たる**
 * （テーマの資産と移行元の写しをハッシュで突き合わせて確かめた。絵の寸法
 * 123.06px と 111.95px の並びも一致する）。**dev の 01（バラ）は携帯幅で消える**ので
 * ここには入れない。
 *
 * 🚨 **パソコン幅は直さない。**移行元も dev も行の中に置いており、器の高さの差が
 * 両側で一致している（Bug #3774 で実測済み）。幅で囲わずに当てると、パソコン幅で
 * 移行元に無い詰まり方を作ってしまう。
 *
 * 🚨 **当たり先を体験談へ絞ること。**飾りと特集の題は共有部品で、婚活予想図の
 * 診断のページも読む。そちらは Task #3680 が先に塊へ直しており、実測でも空きは
 * 0px である。このファイルは冒頭で
 * `body:is(.single-experience, .post-type-archive-experience)` に絞っているので、
 * その絞りの中へ置く。絞りを外すと二重に当たる。
 *
 * 【対象外】足元の認証の絵 3 枚（`icon_privercy` / `icon_jmic` / `icon_cms`）は
 * 6px ずつ空くが、**移行元が `inline-block` で `block` ではない**。しかも足元は
 * 全ページ共通の部品なので、体験談だけ変えると他の画面とそろわない
 * （Task #3680 も同じ理由で対象外にしている）.
 * ================================================================== */
@media (max-width: 749px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .title__area :is(img, picture),
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_branch-list01 :is(img, picture),
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact02 :is(img, picture),
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact03 :is(img, picture) {
		display: block;
	}
}

/* 固定幅の器が親より広くならないようにする。 */
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .introduce_nav,
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .introduce_nav--experience,
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .contents-wrapper,
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .box,
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-container,
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .nav_menu {
	max-width: 100%;
}

/*
 * 🚨 **スペシャルコンテンツの帯の器（`.contents-wrapper`）へ内側の余りを当てない
 * （Bug #5128）。**移行元は 4 辺とも 0 である。
 *
 * ここには一度 `padding: 15px 10px` が入っていた（[PR #4894](Bug #4819)）。**移行元の
 * 写しを配る道具（`pa-verify-assets/tools/serve-legacy.py`・受け口 8931）が PHP を
 * 実行しないため、移行元の姿を見誤ったことが原因である。**同じ誤りを繰り返さないよう、
 * 仕組みを残しておく。
 *
 * `/sp/introduce/experience/index.php` は `<?php if($pg == 1) : ?><div class="select-area">
 * <?php else: ?><div class="select-area select-area-top"><?php endif; ?>` を持つ。PHP を
 * 実行しないと **`if` と `else` の両方が出て `div.select-area` が 2 個**になり、閉じ札が
 * 1 つ足りない。そのため後ろの中身が丸ごとその中へ入り、この帯も `.select-area` の
 * 子孫になって、移行元 CSS の
 * `.select-area .contents-wrapper { padding: 15px 10px; background: #f1f7e8 }`
 * （`sp/introduce/css/sp_style_experience.css` 318〜321 行）が当たってしまう。
 *
 * 🚨 **`.contents-wrapper` へ `padding: 15px 10px` を当てる規則は、移行元スマホ版の
 * CSS 全体でこの 1 つだけ**であり、`.select-area` の子孫のときにしか当たらない。
 *
 * **移行元の本番の実測**（`https://www.p-a.jp/sp/introduce/experience/`・
 * 2026-09-09 11:05:26 JST・幅 375px・携帯の名乗り・1 回）:
 *
 *   器の内側の余り  0（4 辺とも）      器の高さ  733.73px
 *   札の束          275.39 × 611.38   左端      39.61px
 *   小さな題        幅 255px          左端      60px
 *
 * `.php` のページの「移行元の値」は **`php -S` で配って測る**こと。
 *
 *   cd legacy/www.p-a.jp/public && php -S 127.0.0.1:8951 -t .
 */

/* 🚨 **スペシャルコンテンツの札の並び（`.Sccont`）だけは 100% で抑えてはいけない
 * （2026-09-03・Issue #3086 の D23）。**
 *
 * 移行元はこの器に `margin-left: -4.1%` を当てて、**わざと親より 4.1% 広く**している
 * （器 1100px に対して 1145.09px。写しの `introduce-sections.css` にも同じ指定がある）。
 * 4 枚の札はその幅を 4 等分するので、`max-width: 100%` で 1100px に抑えると
 * **札と写真が約 4% 小さくなる**。移行元を本番 www.p-a.jp から 2026-09-03 15:38 JST に
 * 取得して測った値と、dev の実測は次のとおりだった。
 *
 *   札の並び  移行元 1145.09px  対 dev 1100px
 *   札 1 枚   移行元 251.27px   対 dev 240px
 *   写真      移行元 130 × 210 / 126 × 212 / 160 × 220 / 90 × 201px
 *             対 dev 121 × 195 / 117 × 196 / 151 × 207 / 81 × 180px
 *
 * 上限は「移行元が意図した幅」に合わせて 104.1% にする。これなら移行元どおりの幅に
 * なり、狭い画面でも横へは流れない（負の外余白のぶん左へ寄るので、右端は親と同じ
 * 位置に収まる）。**この節の冒頭にある「パソコンの幅では値が変わらない」という
 * 見立ては、この 1 件については誤りだった。**
 */
body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .Sccont {
	max-width: 104.1%;
}

body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img {
	max-width: 100%;
}

/* 飾りを隠すのは**タブレット幅（750〜1296px）だけ**にする。境目の上側は、この区画で
 * いちばん広い器（案内の帯 1280px）にスクロールバーの幅 17px を足した 1297px の 1 つ下。
 *
 * 🚨 **以前は 1296px 以下で全部隠しており、その理由に「移行元の携帯向けのページも、
 * この飾りを持たない」と書いていた。これは誤りだった（Issue #3086）。**移行元を本番
 * www.p-a.jp から 2026-09-03 18:29 JST に携帯の名乗りで取得して測ると、スマホ版は
 * 飾りを 3 枚出している（お問い合わせ 2 枚・店舗一覧 1 枚。詳細ページはスペシャル
 * コンテンツの 1 枚を足して 4 枚）。裁定 46 で携帯幅は移行元のスマホ版に合わせる
 * 決まりなので、749px 以下では出す（下の節）。
 *
 * 750〜1296px は引き続き隠す。この幅で移行元が配るのはパソコン版で、飾りを器の外へ
 * 置く余地が無く横へはみ出すためである. */
@media (min-width: 750px) and (max-width: 1296px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img {
		display: none;
	}
}

/* ==================================================================
 * 携帯幅（749px 以下）の飾り 3 枚（Issue #3086）
 * ==================================================================
 *
 * 移行元のスマホ版は、お問い合わせに 2 枚（鳥・手）と店舗一覧に 1 枚（指輪）を出す。
 * 値の写し元は `legacy/www.p-a.jp/public/sp/introduce/css/sp_style.css` の 438〜456 行。
 *
 * 🚨🚨 **絵と座標の対応が 1 つずれているのを、ここで直す。**移行元は**パソコン版と
 * スマホ版で飾りの番号が 1 つずれている**。
 *
 *   パソコン版  1 = バラ（140 × 94）  2 = 鳥（222 × 307）  3 = 手（217 × 273）
 *   スマホ版    1 = 鳥                2 = 手               （バラは出さない）
 *
 * dev の型紙は**パソコン版の番号**で 3 枚を出す（`ornament-img_contact01` = バラ）。
 * いっぽう写した CSS（`introduce-sections.css` の 842〜884 行）は**スマホ版の番号**の
 * ままなので、そのままでは「バラが鳥の位置へ」「鳥が手の位置へ」「手は座標なし」と
 * 1 つずれる。写した CSS は直さない決まりなので、この手書きの 1 本で対応を組み替える。
 *
 * この区画は写した CSS より後ろに読み込まれ、選択子の形も同じなので、後に書いた
 * こちらが勝つ. */

@media (max-width: 749px) {
	/* パソコン版の 1 枚目（バラ）は、移行元のスマホ版に無い. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact01 {
		display: none;
	}

	/* パソコン版の 2 枚目（鳥）＝ スマホ版の 1 枚目の位置へ. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact02 {
		top: -40px;
		right: -20px;
		left: auto;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact02 img {
		width: 89px;
		height: auto;
	}

	/* パソコン版の 3 枚目（手）＝ スマホ版の 2 枚目の位置へ。写した CSS はこの番号に
	   携帯幅の指定を持たないので、`right` と `bottom` を明示して打ち消す. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact03 {
		top: 300px;
		right: auto;
		bottom: auto;
		left: -25px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_contact03 img {
		width: 89px;
		height: auto;
	}

	/* 店舗一覧の 1 枚（指輪）は番号がずれない. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_branch-list01 {
		top: 120px;
		right: -22px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .ornament-img_branch-list01 img {
		width: 95px;
		height: auto;
	}
}

/* ==================================================================
 * 携帯幅の「スペシャルコンテンツ」の小さな題（Bug #4340 → Bug #4780）
 * ==================================================================
 *
 * 🚨 **この塊は生成物（`introduce-sections.css`）から移した**（Bug #4780・2026-09-08）。
 * 生成物は `scripts/pa-cms/extract-introduce-sections-css.py` が作り直すので、手で
 * 足した規則は**作り直したときに消える**。消えると小さな題が浮いた姿（移行元パソコン版
 * の姿）へ戻り、飾りと重なって節の高さも合わなくなる。**手書きと決まっているこの 1 本へ
 * 置けば、作り直しても残る**（PR #4818 で Greptile が指摘。P1）。
 *
 * 読む順は生成物のあとなので、同じ当たり先でもこちらが後から当たる.
 * ================================================================== */

/* 🚨 **携帯幅では「スペシャルコンテンツ」の小さな題を流れの中へ戻す（Bug #4340・
   2026-09-07）。**

   この CSS は上の 2 か所で `#special-contents` の小さな題を `position: absolute` に
   しているが、**それは移行元のパソコン版の姿である**。移行元スマホ版は同じ題を
   流れの中に置く。写し元は `sp/introduce/css/sp_style_experience.css` の 775〜782 行で、
   そのままの字面は次のとおりである。

     #special-contents .heading .sub-ttl {
       margin-top: 10px;
       position: static;
       font-size: 1.2rem;
       font-weight: bold;
       top: auto;
       left: auto;
       text-align: center; }

   浮かせたままだと**題が高さを 1px も占めず、飾りの絵と重なる**。移行元スマホ版を
   幅 375px・携帯の名乗りで 2026-09-07 18:02:47 JST に取得して測ると、題の囲みの高さは
   **120.36px**（絵 29.17 ＋ 上の外余白 10 ＋ 題 18.00 ＋ 大きい題の上 20 ＋ 大きい題
   43.19）だが、dev は **92.36px** で、**28.00px 低かった**（題の 10 ＋ 18 が抜けている）。
   dev の題は上端 24.92px で、絵の下端 29.17px より上に重なっていた。

   🚨 **字の大きさも違っていた。**移行元スマホ版は 1.2rem（= 12px）で、行送り 1.5 の
   もとで高さ 18.00px になる。dev は 1.4rem（= 14px）で 21.00px だった。

   🚨 **当たり先を詳細ページへも広げた（Bug #4780・2026-09-08）。**この塊を足したとき
   （裁定 445）は「詳細ページの携帯幅はまだ実測していない。同じ差が出るかは反映後に
   測り、出るなら別の Bug として扱う」としていた。**実測したら同じ差が出た**ので、
   その Bug としてここへ足す。

   | 幅 375px の見出し | 移行元スマホ版 | dev（広げる前） |
   |---|---|---|
   | 幅 × 高さ | 255 × 18 | 140 × 21 |
   | 左端 / 右端 | 60 / 315 | 126.3 / 266.3 |
   | 字の大きさ | 12px | 14px |
   | 字揃え | center | start |

   🚨 **パソコン幅は移行元と一致しているので触らない**（実測: 移行元パソコン版も dev も
   見出し 140 × 21・左端 643・字 14px・字揃え start。節の高さも両側 608px）.  */
@media screen and (max-width: 749px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .heading .sub-ttl,
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .sub-ttl {
		position: static;
		top: auto;
		left: auto;
		margin-top: 10px;
		font-size: calc(1.2 * var(--pa-introduce-rem));
		text-align: center;
	}
}

/* ==================================================================
 * 携帯幅の 4 枚めの飾り = スペシャルコンテンツの花（Bug #4780）
 * ==================================================================
 *
 * すぐ上の節（Issue #3086）は「詳細ページはスペシャルコンテンツの 1 枚を足して 4 枚」
 * と書いていた。その 1 枚をここで出す。**要素そのものが dev に無かった**ので、
 * 型紙（`template-parts/introduce/special-contents.php`）で足した。出すのは
 * **体験談の詳細だけ**である。
 *
 * | 移行元スマホ版 | 花の飾り | 根拠 |
 * |---|---|---|
 * | 体験談の詳細（`/sp/introduce/experience/detail.php`） | **在る** | 550〜553 行 |
 * | 体験談の一覧（`/sp/introduce/experience/index.php`） | 無い | 字面 0 件 |
 * | 移行元パソコン版（詳細・一覧とも） | 無い | 字面 0 件 |
 *
 * 【移行元スマホ版の実測（詳細・幅 375px と 320px。2026-09-08）】
 * 絵 56 × 37.59px・左端 −10px・**絵の下端が節の下端から 160px 上**・重なり −1
 * （本文の後ろ）。節（`#special-contents`）は両側とも `position: relative` である。
 *
 * 🚨 **なぜこの手書きの 1 本へ書くのか。**置き場所の指定は移行元スマホ版の写しとして
 * 婚活予想図の画面別 CSS（`assets/introduce/css/style_introduce.css` の 2878〜2880 行と
 * 3038〜3044 行）に既にあるが、**配るのは婚活予想図だけ**である
 * （`inc/introduce-diagnosis.php`）。その 1 本を体験談へ丸ごと配ると当たり先が広く、
 * 他の差を巻き込む。写す先を生成物（`introduce-sections.css`）にすると
 * **生成し直したときに消える**ので、手書きと決まっているこの 1 本へ書く。
 *
 * 🚨 **絵を塊にする（`display: block`）。**移行元は絵を塊で描いており、器の高さが絵の
 * 高さと一致する（実測 37.59px）。行内のままだと器の下に行の余り 6px が付き、器の
 * 高さが 43.59px になる。置き場所は器の**下端**を基準にする（`bottom: 160px`）ので、
 * 余りのぶん**絵が 6px 上へずれる**。
 *
 * 🚨 **パソコン幅では隠す指定が要る。**すぐ上の節の隠す指定は
 * `(min-width: 750px) and (max-width: 1296px)` の幅だけで、**1297px 以上には届かない**
 * （その幅で他の 3 枚は移行元パソコン版にも在るため出す）。花はパソコン版に無いので、
 * 750px 以上で隠す。**「749px 以下だけに置き場所を書く」では足りない**（要素は残るので、
 * 囲いの外では絵が本来の大きさ 140 × 94px で本文の流れに入り、帯の先頭に出てしまう。
 * 幅 1440px で実測して 1 度踏んだ）.
 * ================================================================== */

@media screen and (max-width: 749px) {
	body.single-experience .pa-introduce-sections #special-contents .ornament-img_special-contents01 {
		position: absolute;
		z-index: -1;
		top: auto;
		bottom: 160px;
		left: -10px;
	}

	body.single-experience .pa-introduce-sections #special-contents .ornament-img_special-contents01 img {
		display: block;
		width: 56px;
		height: auto;
	}

	/* 🚨 **小さな題の下の隙は、詳細だけ 10px である。**移行元スマホ版の実測（幅 375px）:
	 *
	 * | 画面 | 導き（`.heading-lead`）の上外余白 |
	 * |---|---|
	 * | 移行元スマホ版・体験談の詳細 | **10px** |
	 * | 移行元スマホ版・体験談の一覧 | 20px |
	 * | dev（詳細・一覧とも） | 20px |
	 *
	 * dev の 20px は生成物（`introduce-sections.css` の 749px 以下の節）が持つ
	 * `margin: 20px auto 0` である。写し元は婚活予想図の画面別 CSS で、移行元スマホ版の
	 * **一覧と同じ値**であった。
	 *
	 * 小さな題が流れの外（`position: absolute`）だったあいだは、この隙が画面に出て
	 * いなかった。題を流れの中へ戻す（Bug #4340・裁定 445）と出るので、**詳細だけ
	 * 10px にそろえる**。一覧は移行元も 20px なので触らない。
	 *
	 * これを入れると節の高さが移行元と一致する（幅 375px で 723.73px・幅 320px で
	 * 670.03px。入れないと 10px 高い）. */
	body.single-experience .pa-introduce-sections #special-contents .heading .heading-lead {
		margin-top: 10px;
	}
}

@media screen and (min-width: 750px) {
	body.single-experience .pa-introduce-sections #special-contents .ornament-img_special-contents01 {
		display: none;
	}
}

/* 飾りは器の右端・左端の外へ 20〜25px 出るので、そのままだとページに横スクロールが
   出る（移行元のスマホ版も器の外へ出す組みである）。一覧の「よく読まれている体験談」
   と同じ抑え方で、この区画を持つ本文の層だけを切る。`clip` はスクロールの器を作らない
   ので、中の追従（`position: sticky`）は生きたままである. */
.site-main:has(.pa-introduce-sections) {
	overflow-x: clip;
}

/* ==================================================================
 * 携帯幅の「会員紹介MENU」の開閉（区画切り替えの帯）
 * ==================================================================
 *
 * 移行元は携帯向けのページで、会員紹介の 5 項目を「会員紹介MENU」という見出しに
 * まとめ、押すと 200ms かけて開閉する
 * （記録版の public/sp/introduce/experience/index.php の 127〜139 行と
 * public/sp/introduce/js/function.js の 89〜96 行）。
 *
 * dev は開閉の見出しを**常に隠していた**ので、5 項目が開いたまま縦に並んでいた。
 * 隠していたのは生成物（introduce-sections.css）の次の 1 行である。
 *
 *     body:is(...) .pa-introduce-sections .accordion-container .article-title
 *       { display: none; }
 *
 * この 1 行は、写し元（style_introduce.css の 61〜62 行）の「パソコン幅では隠す」を
 * そのまま持ってきたものである。写し元は続けて 749px 以下の節で見た目を与えて出し直す
 * が、**その節は生成物に入らない。**生成は「移行元のパソコン版のページで当たるか」で
 * 選ぶ仕組みで、開閉の見出し（`.article-title`）と一覧の別名（`.accordion-content`）は
 * 移行元のパソコン版に存在しないためである（extract-introduce-sections-css.py の
 * 389〜408 行に同じ説明がある）。
 *
 * そこで 749px 以下の節を、この手書きの 1 本へ写す。写し元はテーマが持つ
 * assets/introduce/css/style_introduce.css の 2215〜2354 行（婚活予想図の診断ページが
 * 実際に配っている 1 本で、移行元の sp/introduce/css/sp_style.css の 66〜172 行の写し）。
 * **`rem` は px に直す**（移行元は html に font-size: 62.5% を置くので 1rem = 10px。
 * このテーマは 1rem = 16px）。
 *
 * 開閉そのものを動かすのは assets/introduce/js/function.js の 63〜97 行で、体験談の
 * ページへ配る指定は functions.php の pa_enqueue_assets() が持つ。**片方だけでは
 * 直らない。**CSS だけだと見出しが出ても押せず、JavaScript だけだと見出しが隠れたまま
 * である.
 * ================================================================== */

@media screen and (max-width: 749px) {
	/* 🚨 **帯の器の左右 15px（2026-09-03・セルフレビューの指摘を実測で確認）。**
	 * 移行元は器へ `padding: 0 15px` を当てており、帯は画面端から 15px 内側に入る
	 * （写し元は移行元の `sp/introduce/css/sp_style.css` の 69〜70 行
	 * `.introduce_nav .box { padding: 0 15px }`。テーマの写しでは
	 * `assets/introduce/css/style_introduce.css` の 2190〜2191 行）。
	 *
	 * **この規則は生成物にも手書きの側にも無かった。**生成は「移行元のパソコン版で
	 * 当たるか」で選ぶ仕組みで、この規則は携帯版の節にしかないためである（開閉の
	 * 見出しが落ちるのと同じ理由）。写す範囲を 2215〜2354 行と読んだときに、直前の
	 * 2190〜2191 行を取りこぼしていた。
	 *
	 * 移行元を携帯の名乗りで測った姿は、器 375px・帯 345px（左端 15px）である。
	 * 足さないと帯が画面いっぱい（375px）になる. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .introduce_nav .box {
		padding: 0 15px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-container {
		position: relative;
		border: 2px solid #463d3c;
		outline: 0;
		color: #fff;
		text-align: center;
	}

	/* 開閉の見出し。生成物の `display: none` をここで打ち消す（同じ強さの選択子で、
	   後から読む 1 本なので勝つ）。

	   🚨 **`appearance` と `border` の初期化を足している。**移行元は共通の
	   `button { background-color: transparent; border: none; outline: none; padding: 0;
	   appearance: none }`（style_introduce.css の 42〜50 行）を先に読んでいるが、
	   その規則は生成物に入らない（移行元のパソコン版のページに当たる `button` が
	   無いため）。足さないと、ブラウザ既定の枠と地が見えてしまう。移行元の携帯版は
	   この見出しを `h4` で組んでいるので、`button` で組んだことに伴って要る指定である. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-container .article-title {
		display: block;
		position: relative;
		width: 100%;
		margin: 0;
		padding: 15px;
		border: none;
		appearance: none;
		background: #463d3c;
		color: #fff;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
	}

	/* キーボードで焦点を当てたときだけ輪郭を出す（Bug #1707 と同じ扱い）。
	   畳んでいる間は白地に茶の文字、開くと茶地に白の文字なので、輪郭も入れ替える. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-container .article-title:focus-visible {
		outline: 2px solid #463d3c;
		outline-offset: -5px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-container .article-title.open:focus-visible {
		outline-color: #fff;
	}

	/* 畳んだ状態。`is-collapsible` は JavaScript が付ける印で、JavaScript が動かない
	   ときは 5 項目が開いたまま残る（function.js の 54〜57 行の説明と同じ）. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-container.is-collapsible .accordion-content {
		display: none;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .accordion-content {
		background: #f7f7f7;
	}

	/* 開閉で入れ替わる 2 色と、右端の矢印。移行元も `!important` で、パソコン用の
	   指定を打ち消している. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .article-title {
		position: relative;
		background: #fff !important;
		color: #463d3c !important;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .article-title.open {
		background: #463d3c !important;
		color: #fff !important;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .article-title span {
		position: relative;

		/* 🚨 **札の字と太さは、押しボタンから受け継いではいけない。**移行元の
		   スマートフォン版はサイト共通の初期化（`sp/css/basic.css` の 3〜23 行）が
		   `span` を含む主要な要素へ `font-size: 13px` と `font-weight: normal` を
		   与えており、押しボタン（`.article-title` の 12px・太字）を受け継がない。
		   移行元の `.article-title span`（`sp/introduce/css/sp_style.css` の 152 行）
		   は `position: relative` だけを持ち、字には触らない（移行元の
		   スマートフォン版の CSS を全数で数え上げて確かめた）。**この 2 行が
		   写されておらず、dev は押しボタンの 12px・太字を受け継いでいた。**

		   幅 375px の実測（移行元 = 本番 https://www.p-a.jp を携帯の名乗りで開き、
		   転送先の https://www.p-a.jp/sp/introduce/experience/ を 2026-09-04
		   00:1x JST に取得。dev = https://d1u1dshxgcylna.cloudfront.net/introduce/experience/
		   を同じ台本・同じ時刻帯に取得）:

		     | 項目             | 移行元 | dev（直す前） |
		     | 札の字           | 13px   | 12px          |
		     | 札の太さ         | 400    | 700           |
		     | 押しボタンの高さ | 50px   | 48px          |
		     | 枠つきの器の高さ | 54px   | 52px          |

		   押しボタンと器の 2px の差は、この 1px の字の差だけで説明できる
		   （内余白 15px と枠線 2px は両側で同じ値だった）。

		   🚨 **共通部品（`.pa-collapsible-nav__label`）の側には書かない。**あちらは
		   すでに 13px を持つが太さを宣言しておらず、成婚ストーリーが同じ札を
		   明朝の 16.25px・太字で使っている（押しボタンから太字を受け継ぐ形）。
		   共通の側に太さを足すと、宣言していない成婚ストーリーが太字を失う。
		   共通部品を使う画面の札の太さは、移行元をまだ実測していないので触らない. */
		font-size: 13px;
		font-weight: normal;
	}

	/* 帯の上の空き 13px。

	   🚨 **会員紹介の他の画面へ広げてはいけない。**移行元では、この 13px は
	   体験談だけが読む 1 本（`sp/introduce/css/sp_style_experience.css` の
	   135〜137 行 `.introduce_nav { margin: 0 auto; padding-top: 13px }`）にある。
	   会員紹介に共通の 1 本（`sp/introduce/css/sp_style.css` の 8〜9 行）は
	   `margin: 0 auto` だけで、上の空きを持たない。**読む CSS を画面ごとに
	   数え上げて確かめた**（各ページの `link[href]` を全数で読んだ）。

	     | 画面                     | 読む CSS                             | 上の空き |
	     | 体験談の一覧             | sp_style_experience.css              | 13px     |
	     | 体験談の詳細 503 件      | 同上 + ..._details.css（margin だけ）| 13px     |
	     | 成婚ストーリー一覧の導入 | sp_style.css                         | 0px      |
	     | 婚活予想図Ⅲの結果・入力  | sp_style.css                         | 0px      |

	   体験談の詳細も同じ 1 本を読み、あとから読む詳細用の 1 本は `margin` しか
	   書かないので 13px は残る。だからこのファイル（体験談の一覧と詳細の両方が
	   読む）が正しい置き場所である。

	   幅 375px の実測（取得は上と同じ）:

	     | 項目                           | 移行元 | dev（直す前） |
	     | 帯 `.introduce_nav` の上内余白 | 13px   | 0px           |
	     | 帯 `.introduce_nav` の高さ     | 67px   | 52px          |

	   高さの差 15px の内訳は「札の字による 2px + この上の空き 13px」である。

	   🚨 **道筋を 3 段にするのは詳細度のためである。**この区画は移行元の
	   「素の見た目に戻す」規則を写した
	   `… .pa-introduce-sections :is(blockquote, dd, div, …) { margin: 0; padding: 0 }`
	   （`introduce-sections.css` の 59〜62 行）を受けており、クラス 2 つ + 型 2 つの
	   重みを持つ。クラス 2 つだけの選択子では負けて内余白が 0 に戻る（型紙で
	   実際に 0 になることを確かめた）. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .introduce_nav--experience {
		padding-top: 13px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .article-title span:after {
		content: "";
		position: absolute;
		top: 20%;
		right: -30px;
		display: block;
		width: 6px;
		height: 6px;
		border-top: solid 1px #463d3c;
		border-right: solid 1px #463d3c;
		transform: rotate(135deg);
		transition: all 0.2s ease-in-out;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .article-title.open span:after {
		content: "";
		top: 40%;
		border-top: solid 1px #fff;
		border-right: solid 1px #fff;
		transform: rotate(-45deg);
	}
}

/* ==================================================================
 * 携帯幅のスペシャルコンテンツ（#3086 の D23 / L11・2026-09-03）
 *
 * 🚨 **これは「崩れ」の直しである。**dev は幅 375px で 4 枚の札を横 1 列に詰め、
 * 札が 132.72px しか取れない。そこへパソコン幅の写真の内余白（左右 60px）が
 * 残るため、**写真が 0 × 0px に潰れて画面から消える**（本番の dev を
 * 2026-09-03 15:39 JST に取得して実測）。
 *
 * 移行元は携帯幅で **2 列 × 2 行**に組み替える。写し元は
 * legacy/www.p-a.jp/public/sp/introduce/css/sp_style.css の 1520〜1660 行である
 * （移行元は html に `font-size: 62.5%` を置くので 1rem = 10px）。
 *
 *   #special-contents .contents-wrapper  width auto / margin 0 60px
 *   #special-contents .Sccont            padding 0 / margin -38px 0 0 -8%
 *   #special-contents .Sccont .Sc-list   width 50% / padding-top 38px
 *   #special-contents .Sccont .Sc-img    width 100% / height auto /
 *                                        margin-top 30px / padding 0
 *   #special-contents .Sccont .Sc-img img  width 100% / height auto
 *   .ttl--sub 10px / .ttl--main 12px / .Sc-ttl の下余白 0
 *   #special-contents .Sc-btn            margin-top 10px / width 71% / 10px
 *
 * 移行元を本番 www.p-a.jp から 2026-09-03 16:34 JST に携帯の名乗りで取得して測った
 * 姿は、器 255px・札の並び 275.39px・札 1 枚 137.69px・写真 126.41 × 151.69px である
 * （上の値どおりに組むとこの寸法になる）。
 * ================================================================== */

@media (max-width: 749px) {
	/* 器は左右 60px を空ける（移行元 同 CSS の 1520〜1522 行）. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .contents-wrapper {
		width: auto;
		margin: 0 60px;
	}

	/* 🚨 上の「親より広くならないようにする」抑えを、ここでは外す。移行元は
	   `margin-left: -8%` でわざと親より 8% 広くしており、104.1% では足りない。
	   幅を自動にして負の外余白で広げる形は、右端が親と同じ位置に収まるので
	   横へは流れない（375px と 700px で実測して確かめた）. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont {
		max-width: none;
		padding: 0;
		margin: -38px 0 0 -8%;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list {
		width: 50%;
		padding-top: 38px;
	}

	/* 🚨 **写真の内余白は札ごとの指定まで消す。**移行元も携帯幅で 4 枚ぶんを
	   まとめて `padding: 0` へ戻している（同 CSS の 1637〜1644 行）。1 枚目は
	   パソコン幅の指定が `!important` 付き（`.Sc-img_ex` の左右 60px）なので、
	   ここも `!important` で打ち消すしかない. */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-img,
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list:first-child .Sc-img,
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list:nth-child(2) .Sc-img,
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list:nth-child(3) .Sc-img,
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list:last-child .Sc-img,
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list .Sc-img_ex {
		width: 100%;
		height: auto;
		margin-top: 30px;
		padding: 0 !important;
	}

	/*
	 * 写真を器の幅いっぱいへ広げる（Bug #4897）。
	 *
	 * 🚨 **`img` だけに `width: 100%` を書いても届かない。**移行元は `.Sc-img`
	 * （横並びの器）の直下に `img` を置くので、100% は器の幅に対して解かれる。
	 * **移行してきた本文は `img` を `<picture>` で包む**ので、100% は `picture` の
	 * 幅に対して解かれ、その `picture` は幅の指定を持たないため**絵の元の幅
	 * （210px）に縮む**。横並びの項目は伸びない（`flex-grow: 0`）ので、器が
	 * 210px より広い幅でだけ写真が小さいまま残る。
	 *
	 * | 幅 | 器 | 移行元の写真 | 直す前の dev の写真 |
	 * |---|---:|---:|---:|
	 * | 375px | 116.5 | 116.5 × 139.80 | 116.5 × 139.80（一致） |
	 * | 749px | 301.91 | **301.91 × 362.28** | **210 × 252** |
	 *
	 * 幅 375px で差が出ないのは、器が絵の元の幅より狭く、横並びの縮み
	 * （`flex-shrink: 1`）で器に収まるからである。**器が絵より広い幅だけで出る差**
	 * なので、1 つの幅だけ測ると見落とす.
	 */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-img :is(picture, img) {
		width: 100%;
		height: auto;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-ttl {
		margin-bottom: 0;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list .ttl--sub {
		font-size: 10px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sccont .Sc-list .ttl--main {
		font-size: 12px;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #special-contents .Sc-btn {
		width: 71%;
		margin-top: 10px;
		font-size: 10px;
	}
}

/* ==================================================================
 * 携帯幅（749px 以下）で「会員紹介MENU」の帯もメインビジュアルの緑にする
 * （Issue #3086 の目視 ④）
 * ==================================================================
 *
 * 移行元のスマホ版は、帯（`div.introduce_nav`）を**メインビジュアルの器
 * （`div.mv-area`）の中**へ入れている（記録版の
 * `public/sp/introduce/experience/index.php` の 125〜142 行）。だから
 * 「会員紹介MENU」の押しボタンの周りまで薄い緑になる。
 *
 * 🚨 **下の値を測ったページ（URL）が記録されていない**（Bug #4946）。
 * この節の規則は `body.post-type-archive-experience`（**体験談の一覧**）に絞って
 * あるので一覧で取った値と読むのが自然だが、**確かめられていない。**
 * **帯の高さは一覧と詳細で違う**（この注釈の下のほうの表を見てほしい）。
 * **次に測る人は、値のそばに必ず URL を書くこと。**
 *
 * 取得の条件: 本番 www.p-a.jp ／ 2026-09-03 23:18 JST ／ 幅 375px ／ 携帯の名乗り
 * ／ **ページの URL は記録が無い（おそらく体験談の一覧）**
 *
 *   移行元 div.mv-area          縦位置 61 / 高さ 234.45 / 地色 rgb(241, 247, 232)
 *     └ div.introduce_nav      縦位置 61 / 高さ 67（内余白 上 13px + 中の箱 54px）
 *     └ div.contents-wrapper   縦位置 128 / 高さ 167.45（題名と絵）
 *
 *   dev（この直しの前）         div.pa-experience-mv 縦位置 138 / 高さ 167.45 だけが緑
 *     └ 帯は緑の外（縦位置 86 / 高さ 52）で、上に 25px の白い空きが残っていた
 *
 * 直しは 2 つである。
 *
 *   1. 帯の器（`.pa-introduce-sections--mv-band`）へ移行元と同じ地色を当てる。印は
 *      archive-experience.php が**メインビジュアルを出すときだけ**付ける（移行元の
 *      絞り込みの結果ページ `result.php` は緑の器を持たない）
 *   2. 帯の上の外余白を 0 にして、緑がヘッダーの帯のすぐ下から始まるようにする。
 *      移行元のスマホ版は `.introduce_nav { margin: 0 auto }` である（本番から同時刻に
 *      取得した `/sp/introduce/css/sp_style_experience.css` の 135〜137 行）
 *
 * 🚨 **`!important` が要る。**写しの生成物（`introduce-sections.css` の 1346〜1351 行）が
 * `margin-top: 25px !important` を持っており、素の指定では勝てない。生成物のほうは
 * `scripts/pa-cms/extract-introduce-sections-css.py` が作り直すので手で直せない。
 * **この打ち消しは体験談の画面に閉じた話なのでここに置く**（生成物の選択子も
 * `body:is(.single-experience, .post-type-archive-experience)` で体験談に閉じている）。
 *
 * ------------------------------------------------------------------
 * 🚨 帯そのものの中身は直さないと決まった（司令塔の裁定・2026-09-09）
 * ------------------------------------------------------------------
 *
 * **帯の高さと、帯の上の空きは、どちらも直さない。**意図的変更の台帳に記録した。
 *
 * **理由は「見た目の差が無い」ことである。**移行元は 25px を**帯の内側**
 * （`div.box` の上の内余白）に持ち、dev は同じ 25px を**帯の外側**
 * （`.introduce_nav` の上の外余白）に持つ。**位置が違うだけである。**
 * そのため折りたたみの上端・押しボタン・**帯の下端**はすべて両側で一致する。
 *
 * 🚨 **帯そのものには背景も罫線も無い**（テーマの CSS 117 本を走査し、
 * `.introduce_nav` とその直下に `background` と `border` を書く規則が 0 件）。
 * **帯の箱は描かれず、見えるのは中の押しボタンだけである。**
 * **つまり境目を直しても画面は 1px も変わらない。**
 * **しかも片方だけ直すと、いま一致している下端が 25px ずれて壊れる。**
 *
 * 実測の条件: 本番 www.p-a.jp の**体験談の詳細**
 * （`/sp/introduce/experience/detail.php?id=511`）／ 2026-09-09 00:29:33 JST（幅 375px）
 * と 00:29:39 JST（幅 320px）／ 携帯の名乗り ／ 視野の高さ 700 ／ **両幅で同じ値**
 * ／ 測ったのは 5 班（司令塔の承認つき）
 *
 *   深さ  当たり先                                   移行元      dev
 *   帯    div.introduce_nav の上の内余白             13px        13px
 *   帯    同 上の外余白                              0px         25px
 *   帯    同 高さ                                    92          67
 *   1     div.box の上の内余白                       25px        0px
 *   1     同 字 / 太さ                               13px / 400  13px / 400
 *   2     div.accordion-container の上端             99          99
 *   3     押しボタン（h4/button.article-title.min）  50          50
 *   3     同 上下の内余白                            15px / 15px 15px / 15px
 *   3     同 字 / 太さ                               12px / 700  12px / 700
 *   帯    下端                                       153         153
 *
 * 🚨 **この表は「詳細」の値である。「一覧」では未確認である。**
 * 🚨 **深さ 4（押しボタンの中の札の `span`）は測っていない。**値を書かない。
 * 🚨 **以前この注釈が書いていた「押しボタンの札の字 13px・太さ 400」は、根拠にできない。**
 * ただし**誤りだと断定もできない**（Bug #4946）。**札そのもの（深さ 4）を誰も測って
 * いないためである。**分かっているのは次の 2 つだけである。
 *   ・深さ 1（`div.box`）は**両側とも 13px / 400**
 *   ・深さ 3（押しボタン `h4` / `button`）は**両側とも 12px / 700**
 * **どちらの深さでも、移行元と dev は既に一致している。**だから「移行元が持ち dev が
 * 持たないので直す」という当時の筋立ては、**測れた深さでは成り立たない。**
 * 🚨 **札を 13px / 400 へ変える直しに入らないこと。**入る前に**深さ 4 を両側で測る**。
 *
 * 🚨 **以前この注釈が持っていた申し送りは取り下げた。**
 * 「移行元が持つ帯の上の内余白 13px・押しボタンの高さ 50px を共通部品の担当が別の PR で
 * 直す」「直せば移行元の 67px との差は押しボタンの 2px だけになる」と書いていたが、
 * **詳細では 13px も 50px も両側で既に一致しており、移行元の帯は 92px なので
 * 差は 2px にならない**（上の表）。**一覧では未確認である。**
 *
 * 🚨 **移行元の `padding-top: 13px` は `/sp/introduce/css/sp_style_experience.css`
 * （体験談だけが読む 1 本）に書かれている。**会員紹介の他の 4 画面へ一律に当てると、
 * 移行元と違う画面が出るおそれがある（当時の申し送りのうち、この 1 点は有効である）.
 */
@media (max-width: 749px) {
	body.post-type-archive-experience .pa-introduce-sections--mv-band {
		/* 移行元 .mv-area の background #f1f7e8. */
		background-color: #f1f7e8;
	}

	/* 🚨 **外余白の打ち消しは印（`--mv-band`）の外へ出す（2026-09-04 に訂正）。**
	   移行元のスマホ版の `.introduce_nav { margin: 0 auto }` は**絞り込みの結果ページ
	   （`result.php`）でも同じ 1 本から効く**。印は緑の器を出すときだけ付くので、
	   打ち消しを印の下に置くと `?tab=1` 等の結果ページで写しの生成物の
	   `margin-top: 25px !important` が残り、帯の上に 25px の空きが出ていた
	   （セルフレビューの指摘）。緑の地色は結果ページに無いので印の下のままにする.

	   🚨 **詳細にも当てる（Bug #8684）。**はじめは一覧（`post-type-archive-experience`）
	   だけに絞っていたので、体験談の詳細では生成物の `margin-top: 25px !important`
	   （`introduce-sections.css` 1385 行・写し元はパソコン版 `style_introduce_experience.css`
	   278 行）が残っていた。外側の `.pa-introduce-sections` と `main#site-main` は上の内余白が
	   0 なので、この 25px が main の外へ抜け、帯から下の全部が移行元より 25px 下にあった
	   （幅 375 の実測 `pa-verify-assets/B/札の上の位置3-0928/`・帯の上端 移行元 61 対 dev 86）。
	   移行元の携帯版の詳細は帯に `introduce_nav--experience` の類名を付けないので、
	   移行元ではこの規則が当たらない。詳細度は `:is()` のいちばん強い引数で決まるので、
	   一覧への当たり方は変わらない.  */
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections .introduce_nav--experience {
		/* 移行元のスマホ版 .introduce_nav の margin: 0 auto. */
		margin-top: 0 !important;
	}
}

/*
 * 携帯幅だけの改行を、パソコン幅で隠す（Bug #4501）。
 *
 * `<br class="pa-introduce-br-sp">` はテーマが型紙へ足した「携帯幅だけの改行」で、
 * 隠す指定は `assets/introduce/css/style_introduce.css` の 344 行にある。
 *
 * 🚨 **その 1 本は体験談の一覧・詳細では読まれない。**この 2 画面が読むのは移行元の
 * CSS から 4 区画ぶんだけを抜き出した写し（`introduce-sections.css`）で、**抜き出しの
 * 元が移行元の CSS なので、テーマが独自に足した規則は写しに入らない。**そのため
 * パソコン幅でも改行が出て、前置きの文が 1 行ぶん（32px）増えていた。
 *
 * 実測（幅 1440px・2026-09-07。左が移行元）::
 *
 *   お問い合わせの区画      498.80  対  530.80
 *   　└ 前置きの文           64.00（2 行）  対  96.00（3 行）
 *   支店一覧の区画          427.80  対  459.80
 *   　└ 前置きの文           32.00（1 行）  対  64.00（2 行）
 *
 * 🚨 **携帯幅では出すこと。**移行元スマホ版はこの改行を持つ。下の囲みで戻している。
 * 境目 749px は `style_introduce.css` の携帯幅の囲み（2335 行）と同じ値である。
 *
 * 🚨 **当たり先を素の `.pa-introduce-br-sp` に広げないこと。**この写しは体験談の
 * 2 画面だけへ配られるので、器（`.pa-introduce-sections`）の中に絞る.
 */
.pa-introduce-sections .pa-introduce-br-sp {
	display: none;
}

@media (max-width: 749px) {
	.pa-introduce-sections .pa-introduce-br-sp {
		display: inline;
	}
}

/*
 * 上のパンくずの下端から画面内ナビまでの空き（Bug #4532）。
 *
 * 移行元は囲いの `<section id="introduce_experience">` に上の内余白 10px を持ち、
 * ナビ自身の上の外余白 25px と足して **35px** の空きになる。dev の囲い
 * （`.pa-introduce-sections`）は 0 なので、**ナビの外余白が囲いの外へ抜けて
 * 相殺され、25px しか空かない**（ナビは囲いの最初の描かれる子で、手前に兄弟が無い）。
 *
 * 実測（左が移行元・右が dev の直す前。2026-09-08）::
 *
 *   幅 1440  一覧 35.00 対 25.00 ／ 詳細 35.00 対 25.00
 *
 * 🚨 **一覧だけに絞らない。**移行元は**詳細ページも**同じ囲いに 10px を持つ
 * （`introduce/experience/detail.php` の 103 行が `<section id="introduce_experience">`
 * で、35 行で `style_introduce_experience.css` を読む。詳細側の CSS に
 * `#introduce_experience` の上書きは 1 件も無い）。dev の当たり先
 * `.pa-introduce-sections` は一覧と詳細の両方に当たる（一覧だけに `--mv-band` が
 * 付くので、そちらで絞ると詳細が漏れる）。
 *
 * 🚨 **携帯幅へは足さない。移行元スマホ版はこの囲いを持たない**
 * （`sp/introduce/experience/index.php` に `introduce_experience` は
 * 読み込みの 1 行しか無く、区画そのものが無い）。**足すと携帯幅が 10px 下がる。**
 * 境目 750px は本サイトの携帯幅の境目と同じ値である。
 *
 * 🚨 **写しの生成物（`introduce-sections.css`）には書けない。**移行元の当たり先は
 * id（`#introduce_experience`）で、dev の器の名前は違うため、抽出の台本は運べない。
 * だからこの手書きの写しに置く。
 *
 * 🚨 **当たり先を素の `.pa-introduce-sections` にしてはいけない。**この器は
 * **1 ページに 2 つある**。上のナビを包むものと、**下の 3 区画（スペシャル
 * コンテンツ・お問い合わせ・店舗一覧）を包むもの**である（一覧は
 * `archive-experience.php` の 89 行と 504 行、詳細は `single-experience.php` の
 * 67 行と 816 行）。素で当てると**下の区画が 100px 下がる**（幅 1440px の実測で
 * スペシャルコンテンツの上端が 4666.77 → 4766.77）。**下の器の最初の区画は上の
 * 外余白 100px を持ち、内余白を足すとその外余白が器の外へ抜けられなくなる**ため。
 * そこで**ナビを直の子に持つ器だけ**に絞る.
 */
@media (min-width: 750px) {
	.pa-introduce-sections:has(> .introduce_nav--experience) {
		padding-top: 10px;
	}
}

/*
 * お問い合わせの柱の幅を、携帯幅で移行元にそろえる（Task #5088・親 Bug #2850）。
 *
 * ## 移行元がこの幅を出す仕組み
 *
 * 移行元の携帯版は、柱の器に名前を 2 つ同時に付けている
 * （`sp/introduce/experience/detail.php` の 606 行）::
 *
 *   <div class="contents-wrapper bg--White experience">
 *
 * **同じ 1 つの要素に 2 本が当たる**。`#contact-us .contents-wrapper` が内余白
 * 17px 15px 50px 15px を置き（`sp/introduce/css/sp_style.css`）、
 * `#contact-us .experience` が **`width: 93% !important`** を置く
 * （`sp/introduce/css/sp_style_experience_details.css` の 262〜263 行）。
 *
 * 🚨 **移行元の `box-sizing` は既定の `content-box` である。**携帯版で
 * `border-box` を書いているのは `.footer_text_cbox` などの個別の当たり先だけで、
 * `*` にも `.contents-wrapper` にも掛かっていない。**このテーマは逆に
 * `*, *::before, *::after { box-sizing: border-box }` を全体へ効かせている**ので、
 * `width: 93%` だけを足すと中身が 93% − 内余白 30px = 318.75px になり、移行元と
 * 合わない。**この規則の中だけ `content-box` へ戻す**（`assets/css/main.css` の
 * 7988 行・8077 行に同じ形の先例がある）。
 *
 * ## 実測
 *
 * 2026-09-09 04:23:59 JST・幅 375px・携帯（iPhone 12）の名乗り。移行元の本番への
 * 取得は 1 回だけ（司令塔の承認つき）。左が移行元・右が dev の直す前::
 *
 *   柱の中身の幅   348.75 対 345.00   （375 × 0.93 = 348.75 ／ 375 − 内余白 30 = 345）
 *   柱の中身の左    15.00 対  15.00   （どちらも内余白の 15px。ここは一致していた）
 *   題の絵の左     137.06 対 135.75
 *   押しボタンの器  幅 308・左 35.38 対 幅 308・左 33.50
 *   押しボタン     105 × 28・左 136.88 対 105 × 28・左 135.00
 *
 * **中身が中央寄せなので、柱の 3.75px の差が横のずれ約 1.9px として出る。**
 * 押しボタンの器の幅は写しが 308px で固定しているので変わらない。左位置は
 * (348.75 − 308) / 2 + 15 = **35.375** となり、移行元の実測 35.38 と一致する。
 *
 * ## 写しに無い宣言はこの 1 件だけである
 *
 * 移行元の携帯版が読む CSS 3 本と、写し（`introduce-sections.css`）の携帯幅ブロックを
 * **宣言（当たり先 + 性質 + 値）の単位で**突き合わせた。お問い合わせで写しに無いのは
 * 2 件だけで、**実測の差に効くのはこの `width` だけ**である（もう 1 件は
 * `#contact-us .ornament-area` の `z-index: 1` で、飾りは携帯幅で出さない）。
 *
 * 🚨 **「写しの生成元はパソコン版 3 本だけなので携帯版が丸ごと欠けている」は誤り
 * だった。**移行元のパソコン版 `style_introduce.css` の中に
 * `@media screen and (max-width: 749px)` のブロックが 6 つあり、写しはその携帯幅の
 * 規則も取り込んでいる（当たり先で 74 件）。**当たり先の数で数えず、宣言の単位で
 * 突き合わせること。**
 *
 * ## 当たり先を広げてはいけない理由
 *
 * 🚨 **`#contact-us` の中に絞る。**`.contents-wrapper` という名前は店舗一覧も使う
 * （あちらも `div.contents-wrapper` で幅 345px である）。**店舗一覧の移行元はまだ
 * 測っていない**（Task #5090）ので、同じ値だと決めつけて一緒に動かさない。
 *
 * 🚨 **パソコン幅へは足さない。**移行元のパソコン版に `width: 93%` は無く、写しは
 * `width: auto` を置いている。境目 750px は本サイトの携帯幅の境目と同じ値である。
 *
 * 🚨 **写しの生成物（`introduce-sections.css`）には書けない。**あちらは生成物なので
 * 手で編集しない（生成し直すと消える）。写し元と生成の台本を直す道もあるが、それは
 * 4 区画すべてに波及するので別に立てる（司令塔の同意あり）.
 *
 * 🚨 **当たり先は写しと同じ形で書く。**はじめ `.pa-introduce-sections #contact-us
 * .contents-wrapper` と短く書いたところ、**写しの `width: auto`（詳細度 1-3-1）へ
 * 詳細度 1-2-0 で負けて効かなかった**。実測では `box-sizing` だけが `content-box`
 * へ変わり、幅の指定は 345px のままだった。**メディアクエリは詳細度を上げない。**
 * このファイルの他の 55 か所と同じく `body:is(…)` から書く.
 */
@media (max-width: 749px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #contact-us .contents-wrapper {
		box-sizing: content-box;
		width: 93%;
	}
}

/* ==================================================================
 * 体験談の詳細だけ、案内の帯の内余白を移行元の携帯版にそろえる（Bug #6201）
 * ==================================================================
 *
 * 移行元の携帯版は、この帯の内余白を**画面ごとに変えている**。
 *
 *   | 写し元                                                  | 値                        | 読むページ |
 *   |---------------------------------------------------------|---------------------------|-----------:|
 *   | `sp/introduce/css/sp_style.css` 61 行                   | `padding: 0 15px`         |        158 |
 *   | `sp/introduce/css/sp_style_experience_details.css` 5 行 | `padding: 25px 6.25% 0px` |          1 |
 *
 * 共通のほう（158 ページ）が、このファイルの 160 行の `padding: 0 15px` である。
 * **体験談の詳細 1 画面だけが違う**ので、体の印で絞って上書きする。
 *
 * 実測（幅 375px・携帯の名乗り・iPhone SE のエミュレーション・2026-09-14 JST）:
 *
 *   | 見るもの       | 移行元 | 直す前の dev | 差     |
 *   | 帯の高さ       |  92.00 |        67.00 | −25.00 |
 *   | 帯の中身の左右 |  23.44 |        15.00 |  −8.44 |
 *
 * 高さの内訳は 13（帯自身の上）＋ **25**（この内余白）＋ 54（中身）＝ 92 で合う。
 *
 * 🚨 **一覧と絞り込みの結果ページは 15px のままが正しい。**このファイルは冒頭で
 * `body:is(.single-experience, .post-type-archive-experience)` に絞っているが、
 * **それだけでは一覧にも当たる**。`body.single-experience` を前置して詳細だけにする。
 *
 * 🚨 **`style_introduce.css` へ書いても届かない。**体験談のページはあの 1 本を
 * 配らない（functions.php の 954 行以降。器の無い規則がページ全体を壊すため）。
 * 配るのは生成物の `introduce-sections.css` と、手書きのこのファイルである。
 * 最初この直しをあちらへ書き、検査もあちらを読んでいたため**通ってしまった**
 * （PR #6228 の Greptile の指摘）。**検査は配信される側のファイルを読むこと。**
 *
 * 🚨 **パソコン幅は触らない。**1440px では上端・下端・高さが両側で完全に一致して
 * いる（202 / 282.19 / 80.19）。携帯幅だけの差である.
 * ================================================================== */
@media (max-width: 749px) {
	body.single-experience .pa-introduce-sections .introduce_nav .box {
		padding: 25px 6.25% 0;
	}
}

/* ==================================================================
 * 携帯幅の来店予約の帯で、飾りを灰色の地の上に描く（Bug #8438）
 * ==================================================================
 *
 * 直し方と理由は、診断ページ側の同じ直し（`assets/introduce/css/style_introduce.css` の
 * 「携帯幅の来店予約の帯で、飾りを灰色の地の上に描く」）に書いた。移行元スマホ版は
 * 飾りを灰色の地の**中**に置き、dev の型紙はパソコン版に合わせて地の**外**に置くので、
 * 携帯幅だけ灰色と重なりの文脈を地から帯（`section#contact-us`）へ移す。
 *
 * 🚨 **`style_introduce.css` へ書いても体験談のページには届かない。**体験談のページは
 * あの 1 本を配らず、生成物の `introduce-sections.css` とこのファイルを配る
 * （上の Bug #6201 の節と同じ事情）。そこで同じ直しをここにも書く。
 *
 * 🚨 **当たり先は写しと同じ形で書く。**地の灰色と `z-index` は写しの
 * `body:is(…) .pa-introduce-sections #contact-us .contents-wrapper`（詳細度 1-3-1）が
 * 置いている。同じ詳細度で、写しより後に読まれるこのファイルが勝つ.
 * ================================================================== */
@media (max-width: 749px) {
	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #contact-us {
		isolation: isolate;
		background-color: #f7f7f5;
	}

	body:is(.single-experience, .post-type-archive-experience) .pa-introduce-sections #contact-us .contents-wrapper {
		z-index: auto;
		background-color: transparent;
	}
}