@charset "utf-8";

/* ---------------------------------------------------------------------------
 * 会員の声（/introduce/voice/ の 100 ページ）のページ専用の見た目。Bug #2276.
 *
 * ## どこから写したか
 *
 * 移行元の `public/css/page_introduce.css` の 108〜142 行（`#voice .box_reason`
 * から `#voice .box_reason .reason_copy` まで）と、`public/css/common.css` の
 * 328〜337 行（`.clearfix`）、`page_introduce.css` の 660〜664 行
 * （`a:hover img.imgover`）である。
 *
 * ## なぜその範囲だけなのか（丸ごと写していない理由）
 *
 * 写し元の `page_introduce.css` は、移行元の 1,031 ページが読み込む区画共通の
 * CSS である。クラスは 65 個あり、**そのうち 44 個はテーマ共通（main.css）が
 * すでに写している。**丸ごと写すと、このページ群だけテーマ共通より強い指定が
 * 二重に載り、以後テーマ共通を直してもこのページ群に届かなくなる。
 *
 * そこで着手時に 2 段で数え直し、**テーマ共通に無い分だけ**を写した
 * （2026-08-27 実測）。
 *
 *   1. 写し元の 65 クラスのうち、main.css に規則として無いものは 21 個
 *      （説明文のコメントは除いて数えた）
 *   2. その 21 個のうち、会員の声の 100 ページが実際に使うのは
 *      `box_reason`（100 ページ）・`reason_img`（100 ページ）・
 *      `imgover`（一覧 1 ページ）の 3 個だけである
 *
 * さらに**クラス名の有無だけでは足りない**ことが 2 か所で分かった。
 *
 *   - `.reason_text` は main.css にあるが、書いてあるのは文字の大きさ・行間・
 *     左寄せだけで、**2 列組みを作る `float: right` と幅 746px と上下の罫線が
 *     無い。**ここではその足りない値だけを足す
 *   - `.clearfix` は main.css にあるが、適用範囲が
 *     `.pa-branch__content` ・ `.single-content--pa-article .pa-article` ・
 *     `:is(.pa-page--sentence, .pa-page--column)` の 3 つに限られており、
 *     **会員の声のページには届かない。**移行元の本文は 100 ページすべてで
 *     `class="box_reason clearfix"` と書いているので、ここで写す
 *
 * `.reason_copy` は main.css が全部の値を持っているため写していない。
 *
 * ## 器の目印をそのまま使う理由
 *
 * 移行元の規則は `#voice` という器の目印で切り分けられており、dev の本文にも
 * この目印が残っている（Issue #2276 の実測）。写し元のセレクタをそのまま使えば、
 * 会員の声のページの中だけに閉じ込められる。
 * ------------------------------------------------------------------------- */

/*
 * 画像と文章を左右に並べる器。
 *
 * 移行元は幅 1,100px を固定している。
 *
 * ## 本文の柱（800px）の外へ広げる理由
 *
 * **`max-width: 100%` だけでは 2 列に戻らない。**テーマの本文は
 * `.entry-content` に `max-width: var(--pa-inner-xs)`（**800px**）が掛かって
 * おり、この器はその中に入る。中身は画像 278px と文章 746px（内余白の外側で
 * 数える組み方）に左右 20px の内余白が付いて約 786px なので、**合わせて
 * 1,064px** になる。800px に収まらず、文章が画像の下へ落ちる。
 *
 * そこで、テーマが `.story_inner` に使っているのと同じ形で柱の外へ広げる
 * （main.css の `.entry-content .story_inner`）。画面が狭いときは画面幅まで
 * 縮むので、あふれない。
 *
 * **横に飛び出したぶんを隠す指定は足さない。**テーマが
 * `body:has(.entry-content .voice_list) { overflow-x: clip }` を既に持って
 * おり、会員の声の本文は必ず `.voice_list` を含む（移行元の実測: 100 ページ
 * すべて）。
 */
#voice .box_reason {
	clear: both;
	width: min(1100px, 100vw);
	margin-block: 0 60px;
	margin-inline: calc(50% - min(550px, 50vw));
}

/*
 * 移行元の本文は `class="box_reason clearfix"` と書いており、中の 2 つの
 * 浮き（float）はこの `clearfix` が閉じている。テーマの `.clearfix` は
 * このページ群に届かないため、ここで写す。
 *
 * これが無いと、器の高さが 0 になって、後ろの要素が画像に重なる。
 *
 * **`#voice .clearfix` とは書かない。**会員の声の本文には一覧の器
 * （`.list_inner`）にも同じ目印が付いており、テーマはそちらを別の組み方
 * （main.css の `.voice_list .list_inner::after`）で作り直している。目印だけで
 * まとめて当てると、作り直した器に空の子を足してしまう。浮きを使うのは
 * この器だけなので、器の名前で名指しする。
 */
#voice .box_reason::after {
	display: block;
	clear: both;
	content: "";
}

/*
 * 左の画像。移行元は幅 278px を固定している。
 *
 * CMS で大きい画像に差し替えられても器からあふれないように、上限を足した。
 * 中の img はテーマ共通が `max-width: 100%` を持つので、枠に収まる。
 */
#voice .box_reason .reason_img {
	float: left;
	width: 278px;
	max-width: 100%;
}

/*
 * 右の文章。**文字の大きさ・行間・左寄せは main.css がすでに持っているので、
 * ここでは書かない。**足りないのは 2 列組みを作る値と上下の罫線だけである。
 *
 * `box-sizing: content-box` を書く理由: 移行元は箱の寸法の数え方を既定
 * （content-box）のままにしており、幅 746px は内余白 20px の**内側**の値である。
 * いまのテーマは `*` に border-box を当てているため、そのままだと文章の柱が
 * 706px に縮む。移行元と同じ見え方にするため、この要素だけ数え方を戻す。
 *
 * 幅の上限（max-width）は、CMS で本文が広がったときに横スクロールが出ないための
 * 手当てである。
 */
#voice .box_reason .reason_text {
	float: right;
	box-sizing: content-box;
	padding: 24px 20px;
	width: 746px;
	max-width: 100%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/*
 * 画像に重ねたリンクの色を薄くしない。テーマ共通は `a:hover img` を
 * 半透明（0.5）にするが、移行元はこの目印が付いた画像だけ元の濃さに戻す。
 */
#voice a:hover img.imgover {
	opacity: 1;
}

/*
 * 狭い画面（携帯幅）での手当て。
 *
 * 移行元は狭い画面に別の URL（/sp/ 配下）を配っており、この写し元には画面幅の
 * 条件が 1 つも無い。手当てが無いと、278px と 746px の 2 列が 375px の画面から
 * あふれる。ここでは 2 列をやめて縦に積み、読めるようにする。
 * 移行元との数値一致は求めない（Issue #2276 の受け入れ条件）。
 */
/*
 * 2 列に必要な幅を下回ったら縦へ積む。
 *
 * 左右に要るのは画像 278px と文章 786px（746px に左右 20px の内余白）で、
 * 合わせて **1,064px** である。器は画面幅までしか広がらないので、画面が
 * これより狭いと文章が画像の下へ落ち、750〜785px では文章そのものが器より
 * 広くなる。
 *
 * **テーマの狭い画面の境目（749px）では足りない。**タブレットの縦向き
 * （768px や 834px）がちょうどこの間に入る。移行元は携帯版を別 URL で配って
 * おり、この幅で合わせる相手が無いので、**「あふれない・重ならない・読める」**
 * を満たす側に寄せる。
 */
@media (max-width: 1063px) {

	#voice .box_reason .reason_img,
	#voice .box_reason .reason_text {
		float: none;
		width: auto;
		max-width: 100%;
	}
}

/*
 * 携帯幅は移行元の携帯版（`sp/introduce/voice/css/style.css` の 86〜101 行）を写す。
 * パソコン版の写し（上の規則）は 2 列組みのための値なので、携帯幅では当たらない。
 *
 * ## 直す前の実測（Bug #6231・幅 375px・2026-09-14 17:22 JST・両側 200）
 *
 * | 見るもの | 移行元 | dev | 差 |
 * |---|---:|---:|---:|
 * | 器の高さ | 377.50 | 609.00 | **+231.50** |
 * | 器の左端 / 幅 | 23.44 / 328.13 | 0 / 375 | 全幅へ広がっていた |
 * | 絵の囲みの幅 | 162.88 | 375 | 幅の指定が未移植 |
 * | 絵の高さ | 162.88 | 278 | 上と同じ原因 |
 *
 * 231.5px の主因は**絵の囲みの幅（器の 49.642%）が写されていなかった**ことである。
 * 幅が無いと絵が素の 278px まで伸び、その差がそのまま高さになる。
 *
 * 🚨 **パソコン幅の全幅化（上の `width: min(1100px, 100vw)` と割合の外余白）は
 * 携帯幅では戻す。**移行元の携帯版は器を本文の柱（左右 6.25%）の中に置いており、
 * 画面いっぱいへは広げない。
 */

@media (max-width: 749px) {

	#voice .box_reason {
		margin-block: 0;
		margin-inline: 0;
		width: auto;

		/* 移行元 sp/introduce/voice/css/style.css 86〜90 行. */
		padding: 25px 0 0;
		font-size: 12px;
		line-height: 137%;
	}

	/* 移行元 sp/introduce/voice/css/style.css 98〜101 行.
	 * 中央そろえは `margin: 0 auto` が作る（移行元は text-align を書かない）. */
	#voice .box_reason .reason_img {
		margin: 0 auto 17px;
		width: 49.642%;
	}

	/* 移行元の携帯版は `.reason_text` に規則を 1 つも持たない。
	 * パソコン版の写しが足している内余白と上下の罫線を、ここで外す. */
	#voice .box_reason .reason_text {
		padding: 0;
		border-top: 0;
		border-bottom: 0;
	}

	/*
	 * 🚨 **移行元は中身の並びをパソコン版と携帯版で変えている**（Bug #6277）。
	 *
	 * | | 組み |
	 * |---|---|
	 * | 移行元 パソコン版 | 絵 → 文章の囲み（中に見出しと本文） |
	 * | 移行元 携帯版 | **見出し → 絵 → 本文**（文章の囲みが無い） |
	 * | dev | パソコン版と同じ（投入した本文がパソコン版の markup） |
	 *
	 * 実測（幅 375px・2026-09-14 20:21 JST・両側 200・当たり件数 1 件）:
	 * 移行元は見出しの上端が器の +25・絵が +99、dev は絵が +25・見出しが +208 で、
	 * 器の高さが 377.50 対 489.31（**+111.81**）だった。
	 *
	 * **型紙は動かさない。**投入した本文はパソコン幅でもそのまま使うので、
	 * 並べ替えはこの幅の中だけで行う（Bug #6221 と同じ手当て）。
	 */
	#voice .box_reason {
		display: flex;

		/* 🚨 **交差軸を stretch にする。**縦並びの flex は、既定のままだと
		 * **中身の幅まで縮む**（Bug #6221 の Greptile の指摘と同じ穴）. */
		align-items: stretch;
		flex-direction: column;
	}

	/* 文章の囲みを透かして、中の見出しと本文を器の並びへ載せる. */
	#voice .box_reason .reason_text {
		display: contents;
	}

	/*
	 * 本文の段落の字と行送りを移行元のスマートフォン版へそろえる（Bug #6425）。
	 *
	 * 実測（幅 375×667・携帯の名乗り・iPhone SE のエミュレーション・
	 * 2026-09-15 16:51:13〜16:51:20 JST・3 面とも応答 200・控えは
	 * `pa-verify-assets/d3-6342-reason/出力-jst2026-09-15-16-51.json`・
	 * 台本の sha `bdee60d55c17`）:
	 *
	 * | 段落の computed | 移行元 | 直す前の dev |
	 * |---|---|---|
	 * | 字の大きさ | **13px** | 16px |
	 * | 行送り     | **16.44px** | normal（＝24px） |
	 *
	 * この 2 つで囲みの高さが **470.88 → 393.94**（−76.94px）になる。移行元は
	 * 377.50 なので、残る 16.44px は段落が 2 つに分かれていることで出る 1 行ぶんで、
	 * CSS では閉じられない（意図的変更の台帳へ記録する）。
	 *
	 * 🚨 **見出しの段落（`.reason_copy`）は除く。**移行元の見出しは 18px / 150%
	 * （`sp/introduce/voice/css/style.css`）で、本文とは別の値である。
	 *
	 * 🚨 **13px の出どころは移行元の reset である。**移行元スマホ版の `basic.css` が
	 * `p` を含む一覧へ直に `font-size: 13px` を置いており、**器（`.box_reason`）の
	 * 12px を受け継がない**（要素に直に当たる規則は継承に勝つ）。dev 側も同じ理由で、
	 * テーマの土台の `p { line-height: var(--pa-line-height-text) }` が
	 * `.reason_text` の 1.6 に勝っていた。だから段落そのものへ書く.
	 *
	 * 🚨 **16.44px は `.box_reason` の 12px × 137% を長さに直した値である**
	 * （この節の `#voice .box_reason` を参照）。移行元では 137% が器で長さになり、
	 * 段落へは**長さのまま**受け継がれる。**この対応は検査
	 * `pa-cms-voice-reason-body-sp` が計算して見張る**ので、12px か 137% を変えたら
	 * この値も直すことになる. */
	#voice .box_reason .reason_text > p:not(.reason_copy) {
		font-size: 13px;
		line-height: 16.44px;
	}

	/* 🚨 **浮きを閉じる空の子は、並びに入ると順番を持ってしまう。**
	 * flex では浮き自体が効かないので、この幅では出さない. */
	#voice .box_reason::after {
		display: none;
	}

	/*
	 * 🚨 **見出しを `.reason_copy` の名前で呼ばない。**この写しの CSS が
	 * `.reason_copy` を当たり先にすると、テーマ共通（main.css）が持つ字の値を
	 * 奪う形になるため、検査 `pa-cms-introduce-voice-story` が
	 * 「除外の括弧を外しても `.reason_copy` を当たり先にしていない」で止める
	 * （Bug #4631 の決めごと）。**並び順は位置で指せば足りる。**
	 * 文章の囲みの最初の子が見出し、それ以外が本文である.
	 */
	#voice .box_reason .reason_text > p:first-child {
		order: 1;
	}

	#voice .box_reason .reason_img {
		order: 2;
	}

	/*
	 * 🚨 **移行元は本文の段落の切り方をパソコン版と携帯版で変えている**（Bug #6342）。
	 *
	 * | | 本文の組み |
	 * |---|---|
	 * | 移行元 パソコン版 | **2 段落**（`p.mb15` ＋ `p`）。どちらも `<br>` で改行位置を決める |
	 * | 移行元 携帯版 | **1 段落**。`<br>` を持たず、幅にまかせて流す |
	 * | dev | パソコン版と同じ（投入した本文がパソコン版の markup） |
	 *
	 * **文言は 3 者とも同一である。**切り方だけが違う。
	 *
	 * 実測（幅 375px・2026-09-15 03:24 JST・両側 200・`compare-3axes`）:
	 *
	 *   囲みの高さ        移行元 377.50 → dev 503.88（**+126.38**）
	 *   本文 1 つめ       移行元 98.63（1 段落ぶん）→ dev 72
	 *   本文 2 つめ       移行元 **0 件** → dev 1 件（+153。段落の外余白を含む）
	 *   見出し・絵        54 と 162.88 で**両側一致**
	 *
	 * **型紙も投入した本文も動かさない。**段落の下の外余白を 0 にし、パソコン版の
	 * `<br>` をこの幅では効かせないことで、2 段落を続けて流す（Bug #6221・#6277 と
	 * 同じ手当ての形）。
	 *
	 * 🚨 **見出しの `<br>` は残す。**移行元の携帯版も見出しだけは `<br>` で
	 * 2 行に割っている（`私たちが、さまざまなご意見を<br>公開する理由について`）。
	 * ここが当たり先を `p:first-child ~ p` に絞る理由である.
	 */
	#voice .box_reason .reason_text > p:first-child ~ p {
		order: 3;
		margin-bottom: 0;
	}

	#voice .box_reason .reason_text > p:first-child ~ p br {
		display: none;
	}

	/* 🚨 **絵の囲みが 3.43px 高いのは、画像が行の中に置かれるためである**
	 * （移行元 162.88 対 dev 166.31・画像そのものは両側 162.88 で一致）。
	 * 移行元は画像を塊として置くので、行の下の余白が出ない. */
	#voice .box_reason .reason_img img {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * 画面内のナビの帯の地模様（Bug #2842）
 *
 * 移行元は題の帯の下に、横へ繰り返す地模様を 2 枚重ねて敷いている。dev は地色だけ
 * だった。**画像はどちらもテーマに取り込み済みで、指定が写されていなかっただけ**
 * である（体験談の Bug #2827 は画像そのものが無い別の型なので、混ぜないこと）。
 *
 * ## 写し元と実測（2026-09-02・移行元の稼働サイト・幅 1440px）
 *
 * | 対象 | 移行元の規則 | 移行元の実測 | 直す前の dev |
 * |---|---|---|---|
 * | `.local_nav` | `introduce/css/style.css` 398〜401 行 `background: url(../images/bg_l_nav.jpg?ver=09041d377afa) repeat-x` | 1270 × 50・地模様あり | 1270 × **49**・地模様**なし** |
 * | `ul.category_menu` | `css/style.css` 1324〜1330 行 `#contents .category_menu { background: url(../images/company/bg_category_menu.gif) repeat-x; padding: 1px 0 0 82px; height: 49px }` | 1268 × 50・地模様あり | 1268 × **49**・地模様**なし** |
 *
 * ## 高さの 1px の差の出どころ
 *
 * 移行元は `height: 49px` に `padding-top: 1px` を足した `content-box` なので、外形が
 * 50px になる。このテーマは `border-box` なので、**同じ 1px の内余白を足すだけで外形が
 * 50px になる**（高さは中身の 49px の画像が決める）。高さを数値で書かないのは、狭い
 * 画面でタブが折り返したときに切り取られないようにするためである。移行元は 1,268px の
 * 固定で組まれており、折り返す組みを持たない。
 *
 * ## なぜこのページ専用の CSS に置くか
 *
 * `.local_nav` の地模様は、移行元では会員紹介の区画の CSS（`introduce/css/style.css`）が
 * 持つ。区画ごとの指定なので、テーマでも区画ごとの CSS に置く（しあわせレポートの
 * `assets/introduce-happyreport/css/style.css` 104 行・動画の
 * `assets/introduce-movie/css/style.css` 39 行と同じ形）。
 *
 * `.category_menu` の地模様は、移行元では全ページ共通の CSS が持つ。テーマ共通
 * （`assets/css/main.css` の `:is(.entry-content, .page-content__body) .category_menu`）へ
 * 足すのが本筋だが、**そこは採用ページなど別の画面にも当たり、寸法をまだ測っていない**
 * （同ファイルの説明に「測ってから別途直す」と記録がある）。この Bug の範囲は
 * お客様の声の 100 ページなので、ここでは帯の中に閉じ込めて当てる。
 *
 * ## 画像の置き場所
 *
 * 移行元は画像を区画ごとの置き場所からの相対で指しているが、**このテーマは写すときに
 * ファイル名だけを取り出して、そのページ群の `images/` へ寄せる**（この決まりは
 * `tests-retired/pa-cms-introduce-voice-story/` が機械で見張っている）。そこで 2 枚とも
 * `assets/introduce-voice-story/images/` へ置き、`../images/` で指す。
 *
 * どちらの中身も移行元の稼働サイトから落としたものと SHA-256 が一致する
 * （`/introduce/images/bg_l_nav.jpg` と `/images/company/bg_category_menu.gif`・
 * 2026-09-02 に照合）。`bg_l_nav.jpg` はしあわせレポートと動画がすでに持つ 1 枚と、
 * `bg_category_menu.gif` はテーマ共通の置き場のものと、それぞれ中身が同じである。
 * ------------------------------------------------------------------------- */

.entry-content .local_nav {
	background: url("../images/bg_l_nav.jpg?ver=09041d377afa") repeat-x;
}

.entry-content .local_nav .category_menu {
	padding-top: 1px;
	background: url("../images/bg_category_menu.gif?ver=a1247559d2f8") repeat-x;
}

/*
 * --------------------------------------------------------------
 * パソコン幅の縦の寸法を移行元へそろえる（Bug #4631）
 * --------------------------------------------------------------
 * 幅 1440px で測った差は 5 か所で、合計は冒頭の帯が **+24.72px**、本文が
 * **−140px** だった（代表 2 ページとも同じ値。実測 2026-09-08）。内訳と原因は
 * 次のとおりである。**移行元は手元に配った写しで測り、本番の値と一致することを
 * 確かめてある。**
 *
 *   ① 冒頭の帯の下         移行元 0px   / dev 25px  → 帯が 220 → 244.72px
 *   ② 帯と本文の間         移行元 60px  / dev 40px  → 20px 詰まる
 *   ③ 本文の上の内余白     移行元 65px  / dev 0px   → 65px 詰まる
 *   ④ 本文の下の内余白     移行元 30px  / dev 0px   → 90px 詰まる（下記）
 *   ⑤ 本文の題の行の箱     移行元 80px  / dev 83px  → 3px 伸びる
 *   ⑥ 公開理由の文章       移行元 277.38 / dev 296px → 12px 伸びる（下記）
 *
 * 🚨 **④ は 30px の指定で 90px 動く。**区画の最後に来る公開理由の囲みは下の
 * 外余白 60px を持つ。区画に下の内余白が無いと**その 60px が区画の外へ抜ける**
 * （外余白の相殺）ため、30px を戻すと 60 + 30 = 90px が中に入る。
 *
 * すべて幅 750px 以上に閉じる。移行元は 749px 以下で別のページ
 * （`/sp/introduce/voice/`）を返すので、携帯幅の正解はそちらである（裁定 46）。
 */
@media (min-width: 750px) {

	/*
	 * ① 冒頭の帯の絵の下の外余白。移行元は 0 で、区画メニューが帯にぴったり付く
	 * （移行元 `public/css/page_introduce.css` の `#introduce_top h2.main_ttl` に
	 * 下の外余白は無い。実測でも 170 + 50 = 220px）。テーマの見出しの既定が 25px を
	 * 与えていた。
	 *
	 * 🚨 **当たり先を会員の声のページに絞る。**`#introduce_top` は成婚ストーリーの
	 * ページにも出るが、この写しは両方へ配られる（`inc/introduce-voice-story.php`）。
	 * 会員の声の本文は必ず `#voice` を含む（移行元の実測: 100 ページすべて）ので、
	 * それを条件にする。
	 */
	.entry-content:has(#voice) #introduce_top h2.main_ttl {
		margin-bottom: 0;
	}

	/*
	 * ② 冒頭の帯と本文の間。移行元は区画そのものの下の外余白 60px で作る。
	 * dev はこれを持たず、代わりに区画メニュー（`.category_menu`）の下の外余白
	 * 40px が抜けて 40px になっていた。**移行元の区画メニューは下の外余白を
	 * 持たない**（`public/css/style.css` の `#contents .category_menu` は
	 * `margin: 0 auto`）。両方を移行元へそろえる。
	 */
	.entry-content:has(#voice) #introduce_top {
		margin-bottom: 60px;
	}

	.entry-content:has(#voice) #introduce_top .category_menu {
		margin-bottom: 0;
	}

	/*
	 * ③④ 本文の区画の内余白。移行元は `#voice { padding: 65px 0 30px }` である
	 * （実測）。
	 */
	#voice {
		padding-top: 65px;
		padding-bottom: 30px;
	}

	/*
	 * ⑤ 本文の題の行の箱。中身は絵 1 枚（189 × 74px）だけで、箱の高さは行の高さで
	 * 決まる。移行元は字 13px・行送り normal で **80px**、dev はテーマの見出しの
	 * 既定（字 22px・行送り 33px）で **83px** だった。字と行送りを移行元へそろえる
	 * （絵の寸法は両側とも同じなので、行の箱だけが違う）。
	 */
	#voice h3.title {
		font-size: 13px;
		line-height: normal;
	}

	/*
	 * ⑥ 公開理由の文章。内訳は 2 つある（実測）。
	 *
	 *   ・段落の行送り  移行元 25.6px（器の 1.6 を受け継ぐ）/ dev 24px
	 *                   → 段落 2 つで −6.38px
	 *   ・最後の段落の下の外余白  移行元 0px / dev 25px  → +25px
	 *
	 * 🚨 **行送りは受け継ぎに戻す。**移行元は器（`.reason_text`）に 1.6 を置くだけで
	 * 段落には置かない。テーマは要素そのものへ置く（`main.css` の
	 * `p { line-height: var(--pa-line-height-text) }`）ため、**受け継ぎが負ける**。
	 * 同じ形の打ち消しをテーマ自身も持っている（`:is(p, li, dt, dd) { line-height: inherit }`）。
	 *
	 * 🚨 **見出しの段落（`.reason_copy`）は除く。**`line-height: inherit` は
	 * **長さではなく倍率を受け継ぐ**（親の指定が `1.6` なら、子は自分の字の大きさに
	 * 1.6 を掛ける）。除かずに書くと、字 30px の見出しが 1.5 × 30 = 45px から
	 * 1.6 × 30 = **48px** に変わり、囲みが 3px 高くなる（手元の紙で実測して気づいた。
	 * テーマの `.reason_copy` は移行元と同じ 1.5 を既に持っているので、触らないのが正しい）。
	 */
	#voice .box_reason .reason_text > p:not(.reason_copy) {
		line-height: inherit;
	}

	/*
	 * 最後の段落の下の外余白。テーマは本文の段落へ一律 25px を与えるが、移行元の
	 * この囲みは最後の段落に下の外余白を持たない（囲みの内余白 24px で下端を作る）。
	 */
	#voice .box_reason .reason_text > p:last-child {
		margin-bottom: 0;
	}
}

/*
 * --------------------------------------------------------------
 * 画面が 1,280px より狭いときだけ、冒頭の帯を画面に収める（Bug #5064）
 * --------------------------------------------------------------
 * 直す理由は裁定 497（2026-09-07 夜のユーザー判断）である。**750〜1,279px は画面幅に
 * 収める。1,280px 以上は移行元と同じ固定にする。**移行元も固定幅で組んでいるので、
 * これは「移行元の再現」ではなく裁定 497 が移行元より優先される場面である。共通の
 * パンくず（Bug #5043）・来店予約の帯（`assets/css/support-band.css`）と同じ筋である。
 *
 * 実測（2026-09-09 11:47 JST・幅 1,200px・`window.scrollTo(9999, 0)` の後の
 * `window.scrollX`）: 来店予約の帯を直しても **70px** 残っていた。内訳は次のとおり。
 *
 *   section#introduce_top   1,270px（左端 0・右端 1,270）
 *   div.local_nav           1,270px
 *   h2.main_ttl             1,268px（左端 1・右端 1,269）
 *   ul.category_menu        1,268px
 *
 * 冒頭の帯の幅は `assets/css/main.css` の
 * `.single-content--story .entry-content > #introduce_top { width: 1270px }` が決める。
 * **会員の声のページもこの類名を持つ**（本文の器が `single-content single-content--story`）。
 *
 * 🚨 **中の 3 つは上限（`max-width`）だけでは直らない。**あの 3 つは
 * `margin-inline: calc((100% - 1268px) / 2)` で中央に寄せる作りで、器が 1,200px に
 * 縮むとこの式が **−34px** になる。上限を足しても負の外余白が残るので、右へ 34px
 * 出たままになる。**外余白も一緒に戻す。**
 *
 * 🚨 **成婚ストーリーへは波及しない。**この写しは会員の声にだけ配られる
 * （`inc/introduce-voice-story.php` が `_pa_source_url_path` の頭で `voice.css` と
 * `story.css` を配り分ける）。念のため当たり先も `:has(#voice)` で絞ってある。
 */
@media (max-width: 1279px) {

	.entry-content:has(#voice) #introduce_top {
		width: auto;
	}

	.entry-content:has(#voice) #introduce_top :is(.main_ttl, .local_nav, .category_menu) {
		max-width: 100%;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 携帯幅の題名を、移行元スマホ版と同じ文言のテキストで組み直す（Bug #5302）。
 *
 * ## 何が違っていたか
 *
 * 移行元は、パソコン版とスマホ版で**中身の違う絵**を題名に使う。**絵に焼き込まれた
 * 文言そのものが違う。**
 *
 *   パソコン版      /visitor/images/main_ttl.jpg          1270 x 170  alt「はじめての方へ」
 *   移行元スマホ版  /sp/introduce/voice/images/main_ttl.jpg  230 x 84  alt「お客様の声」
 *
 * 移行元のパソコン版のお客様の声は、上位の区分（はじめての方へ）の帯を流用している。
 * 投入はパソコン版だけを取り込むので、dev は携帯幅でもその横長の絵を柱の幅まで
 * 伸ばして出していた。
 *
 * Bug #5249 は絵を**移行元スマホ版の絵へ差し替えて**大きさをそろえた。ここはその
 * 続きで、**文言をテキストへ置き換える**（ユーザー決定 D40・Task #5283）。
 *
 * ## 🚨 絵のままでは読み上げの文言を直せない
 *
 * `alt` は幅で切り替えられない属性である。CSS でも HTML でも切り替えられない。
 * `<picture>` ＋ `<source media>` でも解けない（`alt` は包まれた 1 つの `<img>` に
 * 1 個しか持てない）。幅で `<img>` を 2 つ出し分ける形も採らない（多くのブラウザは
 * `display: none` の `<img>` でも `src` を取りに行き、絵が 2 枚とも取得される）。
 *
 * ## 🚨 移行元スマホ版の絵は写真も枠も持たない
 *
 * 純白 `#ffffff` の地に、明朝の黒 `#000000` の文字 5 字と、赤い短い罫線 1 本だけ
 * である（絵の画素を 1 つずつ判定して確かめた）。**だから携帯幅は絵を 1 枚も
 * 使わずに CSS だけで描ける。**#5249 で取り込んだ
 * `assets/introduce-voice-story/images/voice_main_ttl_sp.jpg` は不要になるので消した。
 *
 * 赤は実測 `rgb(240,0,0)` だが、移行元の CSS に出る赤は `#f10000` である
 * （`sp/css/style.css` ほか）。**JPEG の丸めで 1 減っただけ**と判断して `#f10000` を書く。
 *
 * ## 目標値（幅 375px・移行元スマホ版の絵の画素から出した）
 *
 *   器の幅              134.76   calc(87.5vw * 0.41071)
 *   墨ぜんたいの幅      134.18   35.7813vw
 *   墨ぜんたいの高さ     49.22   13.1253vw
 *   文言の墨 上端         0.00   器の上端と同じ
 *   文言の墨 高さ        25.78    6.8747vw
 *   罫線 上端            48.05   12.8133vw
 *   罫線 幅              22.85    6.0933vw
 *   罫線 高さ             1.17    0.3120vw
 *
 * 🚨 **Issue #5302 が記録した 134.75 x 49.20 は `<img>` の「箱」である。**絵は箱いっぱいに
 * 描かれるので箱 = 134.76 x 49.22 になる。**箱の中の墨は左右に 1 画素ずつの白を持つので
 * 134.18 x 49.22 である。**テキストで組み直すときに合わせるのは後者である。高さは墨が
 * 絵の上端と下端に接しているので箱と同値になる。控えは
 * `pa-verify-assets/f11-voice-5302/題名の目標値.md`。
 *
 * 🚨 **罫線は器の中心から 0.87px 左に描かれている**（絵の中で 1.5 画素）。移行元の CSS に
 * 中心をずらす指定は無く、絵の描き手の癖である。**追わずに中央寄せで組む。**
 *
 * ## パソコン幅は 1px も動かさない
 *
 * `<img alt="はじめての方へ">` は移行元のパソコン版と同じ要素である。パソコン幅では
 * その絵が題名そのものなので、**要素は残したまま、携帯幅でだけ隠す。**この塊は
 * 749px 以下に閉じてある。
 *
 * ## 🚨 body の類名では絞れない
 *
 * **お客様の声は投稿型が `story` で、器が `.single-content--story` である**
 * （実測した body の類名は `single single-story postid-3780`）。成婚ストーリーと
 * 同じ類名なので、器の名前だけでは分けられない。この写しは
 * `inc/introduce-voice-story.php` が会員の声にだけ配るが、**念のため当たり先も
 * この写しの流儀どおり `:has(#voice)` で絞ってある。**
 * ------------------------------------------------------------------------- */
@media (max-width: 749px) {

	/* 器の幅と中央寄せ。`main.css` の
	   `.single-content--story .entry-content .main_ttl { width: min(1268px, 100%) }`
	   （当たり先の数 0-3-0）より強い（`:has(#voice)` が id ぶんを持つので 1-2-0）。

	   🚨 **幅は `vw` で書く。**移行元スマホ版は器 `#voice { padding: 25px 6.25% }` の中で
	   `.category_ttl { width: 41.071% }` と書く。つまり画面幅の 87.5% の 41.071% で、
	   **375px なら 134.76px** になる。百分率で写すと合わない（百分率は包む器の幅で
	   解かれるが、dev の柱は 345px・移行元の器は 328.125px で違う）。式のまま書いて、
	   移行元の 2 つの値が読み取れるようにしてある（Bug #4830 と同じ理由）. */
	/*
	 * 上の区画の積み上げを移行元へそろえる（Bug #6210）。
	 *
	 * 実測（幅 375px・携帯の名乗り・iPhone SE のエミュレーション・2026-09-15 03:46 JST・
	 * 両側 200・控えは `pa-verify-assets/d3-6210-0915/出力-0915/お客様の声-上の区画-6210.tsv`）で、
	 * **要素の高さと幅はすべて一致し、縦の位置だけが 3 段でずれていた**。
	 *
	 * | 区画 | 移行元の上端 | 直す前の dev | 差 |
	 * |---|---|---|---|
	 * | 本文の中身（`#voice`） | 61 | 130.2 | +69.2 |
	 * | 大きい字（`.main_copy`） | 155.2 | 246.7 | +91.5 |
	 * | 小見出し（`.inner_ttl`） | 308.8 | 425.3 | +116.5 |
	 * | 月を選ぶ選択欄（`#voicenavi`） | 356.8 | 473.3 | +116.5 |
	 *
	 * 🚨 **dev は題名を 2 つ描いていた。**
	 *
	 * | 題名 | 移行元 | 直す前の dev |
	 * |---|---|---|
	 * | 携帯用（`.category_ttl` ↔ `.main_ttl`） | 上端 86・高さ 49.2・幅 134.75 | 上端 **61**・高さ 49.2・幅 134.75（**寸法は一致**） |
	 * | パソコン版（`#voice h3.title`） | **無い** | 上端 130.2・**高さ 81.5** |
	 *
	 * 移行元のスマートフォン版は題名を 1 つだけ持ち、器（`#voice`）の内余白 25px の中に置く。
	 */
	.entry-content:has(#voice) .main_ttl {
		width: calc(87.5vw * 0.41071);

		/* 🚨 上の 25px が「器の内余白の中に題名がある」状態を作る。移行元は
		 * `#voice { padding: 25px 6.25% }` の中に題名を置くが、dev の携帯用の題名は
		 * `#voice` の**外**に在るため、同じ見え方を外余白で作る. */
		margin: 25px auto 20px;
	}

	/*
	 * パソコン版の題名をこの幅で出さない。
	 *
	 * 🚨 **描かないのではなく隠す。**この `h3.title` は**投入した本文**（移行元の
	 * パソコン版 markup）の中に在り、テーマの型紙が出しているものではない。
	 * 型紙を触っても消えないので、CSS で隠す以外に手が無い（本文そのものを変えるのは
	 * 投入の担当の領域である）。移行元のスマートフォン版に `h3.title` は 1 つも無い.
	 */
	#voice h3.title {
		display: none;
	}

	/*
	 * 🚨 **一覧の囲みの上の内余白はここには書けない（Bug #6210）。**
	 *
	 * `.voice_list` に当たる規則の中でいちばん詳しいのは main.css の
	 * `.single-content--story:has(#voice) :is(.entry-content, .page-content__body) .voice_list`
	 * （詳細度 (1,3,0)）で、そこが一括指定の `padding` を持つ。ここへ
	 * `#voice .voice_list { padding-top: 0 }` と書いても **(1,1,0) で負けて効かない**
	 * （PR #6377 のセルフレビューで見つけた）。直しは main.css のその規則へ
	 * 入れてある（`padding: 0 0 25px`）.
	 */

	/* パソコン版の絵を隠す。

	   🚨 **隠すのは文言のテキストを持つ題名だけである**（`:has()` で絞る）。
	   `inc/voice-sp-title-text.php` が文言を足せなかった画面でここまで隠すと、
	   携帯幅で題名が 1 つも無くなる（サービス紹介の前例
	   `assets/service/css/bridge.css` が同じ絞りを持つ理由と同じ）。

	   🚨 隠す側は `display: none` なので**読み上げの木から外れる。**足したテキストだけが
	   読まれ、文言が二重に読まれることはない. */
	.entry-content:has(#voice) .main_ttl:has(.pa-voice-sp-title) img {
		display: none;
	}

	/*
	 * 🚨🚨 **題名の器の飾りを消し直す。文言を足したことで、テーマが消していた飾りが
	 * 戻ってしまうためである。**
	 *
	 * テーマは `main.css` の
	 * `:is(.entry-content, .page-content__body) :is(h2〜h6):has(> img:only-child)` で、
	 * **中身が絵 1 枚だけの見出しから飾り（金の下線・上下の内余白・地）を外している。**
	 * 題名の `h2` はこの規則に当たって素の箱になっていた。
	 *
	 * ところが**文言のテキストを絵の隣へ足すと `img:only-child` が偽になり、この規則が
	 * 外れる。**サービス紹介の前例では、これで携帯幅に内余白 上下 30px と下の金の枠線
	 * 2px が生えた（`assets/service/css/bridge.css`・Issue #3109 の A-2）。
	 *
	 * 🚨 **この退行は CSS を文字列で読む検査では取れない**（規則を 1 つも書き換えて
	 * いないのに当たり先が外れるため）。実ブラウザで箱を測る確認が要る。
	 *
	 * 🚨 **外余白（`margin`）には触れない。**戻すのは飾りの 3 つだけである。書くと
	 * この直しが意図しない余白の変化を持ち込む.
	 */
	.entry-content:has(#voice) .main_ttl:has(.pa-voice-sp-title) {
		padding: 0;
		border: 0;
		background: none;
	}

	/*
	 * 文言の器。
	 *
	 * 🚨 `display: flow-root` を素の `display: block` に戻さないこと。いちばん上の行の
	 * `margin-top` が負なので、素の `block` だとその負の値が器の `margin-top` へ
	 * 吸い上げられ（外余白の相殺）、器ごと上へ動く（前例の記録）.
	 */
	.entry-content:has(#voice) .pa-voice-sp-title {
		display: flow-root;
		color: #000000;
		font-family: var(--pa-font-family-serif);
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		text-align: center;
	}

	/*
	 * 文言の行。移行元は 1 枚の絵なので折り返しが起きない。
	 *
	 * 🚨 **字送りを付けた中央寄せは左へ字送りの半分ずれる**（最後の字のうしろにも字送りが
	 * 入るため）。同じ量の負の `margin-right` で戻す。外すと題名が左へずれる.
	 */
	.entry-content:has(#voice) .pa-voice-sp-title__ja {
		display: block;
		white-space: nowrap;
		margin-top: 0;
		margin-right: -0.02596em;
		font-size: 7.0119vw;
		letter-spacing: 0.02596em;
	}

	/* 赤い短い罫線。中身を持たない飾りなので読み上げの木に文字を出さない. */
	.entry-content:has(#voice) .pa-voice-sp-title__rule {
		display: block;
		margin-top: 5.8vw;
		margin-left: auto;
		margin-right: auto;
		width: 6.0933vw;
		height: 0.312vw;
		background-color: #f10000;
	}
}

/* ---------------------------------------------------------------------------
 * 750px 以上で、足したテキストを隠し、題名の上の外余白を 0 へ置き直す（Bug #5302）。
 *
 * 🚨🚨 **この塊が無いと 2 つの退行が出る。**どちらも実ブラウザで測って見つけた
 * （幅 1440 / 1200 / 750px。控えは `pa-verify-assets/f11-voice-5302/`）。
 *
 * 1. **750px で足したテキストがそのまま出て、題名が 42px 高くなる**
 *    （106.38px → 148.38px）。上の塊は 749px 以下に閉じているので、
 *    **ここの `display: none` が足したテキストを隠す唯一の手段である。**
 * 2. **パソコン幅で題名の上の外余白が 0px → 50px に戻る**（3 幅すべて）。
 *    テーマは `main.css` の
 *    `:is(.entry-content, .page-content__body) :is(h2〜h6):has(> img:only-child)` で
 *    中身が絵 1 枚だけの見出しから飾り（上の外余白ほか）を外しているが、
 *    **文言を絵の隣へ足すと `img:only-child` が偽になり、この規則が外れる。**
 *
 * 🚨 **`margin` の一括指定は書かない。**幅 1440px では左右に 1px が入っており
 * （実測 `margin: 0px 1px`）、一括で書くとそれを消す。**戻すのは上だけである。**
 *
 * 🚨 **内余白と枠線と地はここでは書かない。**パソコン幅では
 * `article-reset.css`（全体が `@media (min-width: 750px)`）が守っており、文言を
 * 足す前と後で 0px のまま動かないことを 3 幅で確かめた。**動いていないものを
 * 書き足すと、この直しが意図しない変化を持ち込む。**
 *
 * 🚨 **この 2 つの退行は CSS を字として読む検査では取れない**（規則を 1 つも
 * 書き換えていないのに当たり先が外れるため）。実ブラウザで箱を測る確認が要る。
 *
 * check-mobile-only: 意図してメディアクエリの外に置く
 *   携帯幅の帯（749px 以下）の外に出すのが目的の塊である。**足したテキストを隠す
 *   手段はここにしかなく**、上の外余白の置き直しもパソコン幅で起きる退行への手当て
 *   である。どちらもパソコン幅を**移行元と同じ姿へ戻す**ための宣言で、移行元の
 *   パソコン版の値を変えるものではない（3 幅で「文言を足す前と 1px も違わない」
 *   ことを実測して確かめた）。
 * ------------------------------------------------------------------------- */
@media (min-width: 750px) {

	.entry-content:has(#voice) .pa-voice-sp-title {
		display: none;
	}

	.entry-content:has(#voice) .main_ttl:has(.pa-voice-sp-title) {
		margin-top: 0;
	}
}