@charset "utf-8";

/* ---------------------------------------------------------------------------
 * しあわせレポート（HAPPY REPORT）の詳細 11 ページのページ専用の見た目。
 * Bug #2625 / #2808.
 *
 * ## どこから写したか
 *
 * 移行元の詳細ページが読む専用 CSS **3 本**である（2026-09-02 に現行サイトから取得）。
 *
 *   - `introduce/happyreport/css/style.css`（1,172 行）
 *   - `introduce/happyreport/css/style_happyreport.css`（181 行）
 *   - `css/page_event_top.css`（242 行）… **Bug #2852 で足した 3 本目**
 *
 * **前の 2 本はテーマへ 1 行も写されていなかった。**そのため本文の器が
 * 1440px から 800px に縮み、背景の地模様・上の罫線・内外の余白がすべて消え、
 * 巻ごとの写真配置も丸ごと出ていなかった。
 *
 * 🚨 **3 本目は最初の棚卸しから漏れていた**（Bug #2852）。下の「全 238 規則の棚卸し」は
 * 前の 2 本だけを数えたものである。3 本目の 42 規則はすべて `#event_top` の下にあり、
 * 詳細 11 ページのうちこの区画を持つのは `report_01_191127` の 1 ページだけなので、
 * **ページに効くのは 2 規則**（器の幅 1,100px と中央寄せ・題名の下余白 30px）である。
 * 残る 40 規則は移行元でも当たり先が無い。写しはこのファイルの末尾にある。
 *
 * ## 何を写し、何を写さなかったか（前の 2 本・全 238 規則の棚卸し）
 *
 * 規則ごとに宣言を描画中のページへ差し込み、差し込む前後で計算後の値が動くかを
 * 見て割った。動かなければテーマが同じ結果を既に出している（＝写す必要が無い）。
 *
 *   写す                        187 …… テーマに無い（うち巻ごとの写真配置 131）
 *   書き直して写す                6 …… そのまま写すと別の要素に当たる（後述）
 *   要目視                        1 …… 指を乗せた状態の規則
 *   既にある                      5 …… テーマの計算後の値が移行元と同じ
 *   テーマの既存の写しが受け持つ   16 …… 案内タブ（.introduce_nav）は Issue #1881 が写し済み
 *   不要                         22 …… 移行元でも当たり先が無い
 *   写さない                      1 …… `html { font-size: 62.5% }`（後述）
 *
 * 全件の一覧は `_c1-top-gap-tools/w6-hr-inventory-final.tsv` にある。
 *
 * ## 案内タブ（.introduce_nav）を写さなかった理由
 *
 * テーマは Issue #1881 でこのタブを既に写している。移行元の 16 規則をまとめて
 * 当てて確かめたところ、動くのは `.nav_menu` の `position: relative` だけで、
 * 下線は `li`（こちらは既に相対配置）を基準に置かれるため見た目は変わらない。
 *
 * **1 本ずつ当てて数えると誤る。**移行元は基の規則を後の規則が上書きする作りで、
 * `.introduce_nav` の幅 1280px は `.introduce_nav--open` の 1095px に、
 * 下線 1px は同じく 2px に上書きされる。1 本ずつ見ると、上書きされて実際には
 * 効かない基の規則まで「テーマに無い」と数えてしまう。
 *
 * ## rem の基準を写さない理由
 *
 * 移行元は `html { font-size: 62.5% }` で rem の基準を 10px に落としている。この
 * 1 行はページ全体の rem を動かすので写せない。かわりに、写す規則の中の rem を
 * 10 倍して px にした（`1.2rem` を `12px` に）。
 *
 * ## 狭い画面の扱い
 *
 * 写し元には `@media` が 1 つも無い。移行元は**携帯向けにまったく別のページ**を
 * 持っており（`/sp/introduce/happyreport/` に詳細 10 ページと専用 CSS 4 本）、
 * この CSS はパソコン専用だからである。移行先は 1 枚で全部の幅を受けるため、
 * 固定の幅と左右の内余白は `min()` で頭打ちにし、狭い画面では画面比で縮める。
 * テーマの他の固定値と同じ判断である。
 *
 * ## 写し元の並び順を保っている
 *
 * この下の規則は写し元の並び順のままである。移行元は後の規則が前の規則を
 * 上書きする作りなので、並べ替えると結果が変わる。
 *
 * ## 書き出し方
 *
 * 下地は `_c1-top-gap-tools/w6-hr-build-css.mjs` が棚卸し表から生成した。
 * 生成でできるのは「囲みを前に付ける・画像の道筋を書き換える・rem を px にする」
 * までで、狭い画面の扱いと、書き直しが要る 6 規則は人手で入れてある。
 * ------------------------------------------------------------------------- */

/* ===== 写し元: introduce/happyreport/css/style.css ===== */

/* 🚨 この節に「テーマが既に同じ結果を出している」と一度は判定した規則が 5 本ある
 * （`a img.imgover` / `.local_nav ul li a img` / `.list_mv li.last` /
 * `#hrep02 .p02txt` / `html > body .min`）。**判定を取り消して写した。**
 *
 * 判定を取り消した理由: あの判定は**写しを 1 行も当てていない状態**で測ったもので、
 * 「この写しが入って初めて必要になる規則」を見分けられない。実例として
 * `.list_mv li.last { margin-right: 0 }` は、写す前は `.list_mv li` の右余白が 0 なので
 * 差が出ず「既にある」と判定されたが、`.list_mv li { margin-right: 22px }` を写した
 * 途端に必要になる（写さないと札の 3 枚目の右に 22px が残る。実測で捕まえた）。
 * 同じ型の取りこぼしを避けるため、この 5 本はすべて写した。 */

/* 浮かせた子を親の高さに含める（Bug #3588）。

   移行元は共通 CSS に古い書き方の清算を持ち、サイト全体に効かせている。

     .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

   **テーマはこれを支店紹介（`.pa-branch__content .clearfix::after`）とコラム記事
   （`.single-content--pa-article .pa-article .clearfix::after`）にしか持たない。**
   しあわせレポートには無いため、札 3 枚を並べる `ul.list_mv` の高さが 0 になり、
   その下余白 40px が札の**上端から**効いていた。続く「すべての記事を見る」の器が
   札の高さ 310px を抱え込み、**押しボタンが札の直下に貼り付いていた**
   （移行元は札の底から 40px 空く。ユーザーの目視の指摘 2026-09-05・S04 の 1 番）。

   実測（幅 1440px・巻 10）。

     器                     移行元    dev（直す前）
     ul.list_mv             310px     0px
     p.btn_all               54px     354px
     札の底からボタンまで      40px     0px

   このファイルはしあわせレポートの詳細でだけ読み込まれる
   （`inc/introduce-happyreport.php` が `is_singular( 'story' )` と詳細の判定を
   通ったときだけ enqueue する）。それでも当たり先を `.entry-content` から始めて、
   ヘッダー・フッターへ届かないようにする（このファイルの他の規則と同じ流儀）。

   🚨 **この規則は帯（@media）の外に置く。**移行元の清算はパソコン幅にも効いており、
   直すのもパソコン幅の崩れだからである。携帯幅では札が 1 列に積むので浮きが無く、
   この規則があっても描画は変わらない（反映後に両幅で実測して確かめる）。

   🚨 移行元は `content: "."` と `visibility: hidden` を使うが、ここでは
   `content: ""` にする。読み上げに余計な「.」を渡さないためで、テーマの既存の
   2 本（支店紹介・コラム記事）と同じ書き方にそろえた。清算の働きは同じである. */
.entry-content .clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.entry-content a img.imgover {
	opacity: 1;
}

/* 帯画像の器。移行元は 1,270px 固定で、移行先の本文の柱（800px）より広いので
 * 全幅へ出し直す。
 *
 * `margin: 0 auto` だけでは足りない。柱よりも広い箱に `auto` を与えると、左右に
 * 割り振られずに左端へ寄り、右へはみ出す（幅 375px で右端が 390px になった）。
 * 左右の外余白を負の値で自分から計算して、画面の真ん中に置き直す。
 * 狭い画面では画面の幅で頭打ちにする。 */
.entry-content .introduce_top {
	width: min(1270px, 100vw);
	margin-inline: calc(50% - min(635px, 50vw));
	margin-bottom: 60px;
}

.entry-content .introduce_top img {
	vertical-align: bottom;
}

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

.entry-content .local_nav ul {
	margin: auto;
	width: min(1100px, 100%);
}

.entry-content .local_nav ul li {
	float: left;
}

.entry-content .local_nav ul li a img {
	opacity: 1;
}

/* 本文の柱。移行元は 1,100px 固定で、移行先の本文の柱（800px）より広い。
 *
 * 🚨 `width: min(1100px, 100%)` では足りない。`100%` は**親（本文の柱 800px）**を
 * 基準に解けるので、幅 1440px でも 800px にしかならない。その結果「他のご夫婦の
 * 成功例」の札 3 枚が 1 行に収まらず、移行元の 1 行に対して **2 枚 + 1 枚の 2 行**に
 * 折り返していた（移行元は 352px × 3 + 右の外余白 22px × 2 = ちょうど 1,100px）。
 *
 * 器（`.wrap_movie`）と同じく、左右の外余白を負の値で自分から計算して柱の外へ出す。
 * 画面が 1,100px より狭いときは画面の幅で頭打ちにする。 */
.entry-content .wd_1100 {
	width: min(1100px, 100vw);
	margin-inline: calc(50% - min(550px, 50vw));
	padding: 0 0 30px;
}

/* 器（.wrap_movie）。
 *
 * 移行元ではこの器の親がすでに全幅なので、移行元の CSS に全幅化の指定は無い。
 * 移行先の本文の柱は 800px なので、ここで全幅へ出し直す。書き方は main.css の
 * 社員紹介の写しにそろえた（`width: 100vw` と左右の負の外余白の 2 つ組）。
 *
 * 横方向のはみ出しは本文の外枠（.site-main）の `overflow-x: clip` で抑える
 * （すぐ下の規則）。縦スクロールバーのぶんだけ右へ出るのを防ぐためである。 */
.entry-content .wrap_movie {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-bottom: 70px;
	padding: 50px 0;
	background: url("../images/bg_mv_body.jpg?ver=fa66178aa8c6") repeat;
	border-top: 1px solid #cccccc;
}

.site-main:has(.entry-content .wrap_movie) {
	overflow-x: clip;
}

.entry-content .wrap_movie h2 {
	text-align: center;
	margin-bottom: 60px;
}

.entry-content .inner_wrap_v {
	margin: auto;
	width: min(1100px, 100%);
}

/* 白い囲み。移行元の左右の内余白 150px をそのまま携帯の幅へ写すと、幅 375px では
 * 中身の柱が 375 − 300 = 75px しか残らない。移行元はパソコン専用で携帯幅の受入値を
 * 持たないため、テーマの他の固定値と同じ判断（min() で頭打ちにしつつ狭い画面では
 * 画面比で縮める）にする。
 *
 * % はこの要素の親（.inner_wrap_v・width: min(1100px, 100%)）の幅を基準に解ける。
 * 親は 1,100px で頭打ちになるため、150 ÷ 1100 の比（calc(150% / 11) = 13.6364%）に
 * しておけば、親が 1,100px に達する画面幅ちょうどで 150px に一致し、それより狭い
 * 画面では親の縮みにそのまま追従する（幅 375px では 51px）。 */
.entry-content .bg_white {
	padding: 60px min(150px, calc(150% / 11));
	background: #fff;
}

/* 白い囲みの中の文字組み。写し元 `.bg_white p, .bg_white`。
 *
 * 当たり先の数は 移行元 80 に対して dev 118 で食い違う。投入時に段落の切れ目が
 * 増えたためである。ただし**与える宣言は囲み自身と段落で同じ**（文字の大きさと
 * 行間だけ）なので、段落の数が違っても結果は変わらない。そのまま写す。 */
.entry-content .bg_white p,
.entry-content .bg_white {
	font-size: 16px;
	line-height: 220%;
}

.entry-content .mv_nav {
	margin-top: 30px;
	text-align: center;
	font-size: 15px;
}

/* 🚨 **「一覧ページにもどる」の写し（Task #3373）。**移行元スマホ版だけ並びが
   「他のご夫婦 → 一覧へもどる」なので、`inc/introduce-happyreport.php` が
   `div.mv_nav` を写して `section.others` の直後へ置く。入れ子の段が違って `order` が
   届かないためである（移行元のパソコン版の並びは dev と同じなので要素は動かせない）。

   **パソコン幅では写した側を出さない。**どの幅でも描かれるのは片方だけである. */
.entry-content .pa-hrep-nav-sp {
	display: none;
}

/* 🚨 **上の 2 区画は携帯幅だけに出す（Bug #6937）。**移行元のスマートフォン版は
   本文の頭に「帯の絵 → 会員紹介MENU → HAPPY REPORT の題字の塊」を置くが、
   **移行元のパソコン版にはこの 2 つが無い**（実測: 2026-09-17 19:00・本番を
   幅 1440px で開き、帯の絵・題字・説明文のいずれも無いことを確かめた。
   携帯幅 375px では 3 つとも出る）。事業部の報告はスマートフォン幅の見え方である。

   差し込むのは `inc/introduce-happyreport.php` の
   `pa_introduce_happyreport_head_insert()`。**ここで既定を「出さない」にして、
   下の `@media (max-width: 749px)` が出す。**

   🚨 **この既定の規則を `@media` の節より後ろへ動かさないこと。**後ろに置くと
   携帯幅でも後勝ちして、2 区画が永久に出なくなる. */
.entry-content .pa-hrep-head-sp {
	display: none;
}

.entry-content .mv_nav .next {
	float: right;
}

.entry-content .mv_nav .pre {
	float: left;
}

.entry-content .list_mv {
	margin-bottom: 40px;
}

.entry-content .list_mv li {
	float: left;
	margin-right: 22px;
}

/* 並びの最後の札だけ右の余白を落とす。すぐ上の 22px を打ち消す対になる規則で、
 * 写さないと 3 枚目の右に 22px が残る。 */
.entry-content .list_mv li.last {
	margin-right: 0;
}

.entry-content .btn_all {
	text-align: center;
	margin-bottom: 50px;
}

.entry-content .others .ttl {
	margin-bottom: 30px;
	color: #a3762b;
	font-size: 28px;
	line-height: 100%;
	font-weight: normal;
	letter-spacing: 0.1em;
}

.entry-content .others .list_mv li a {
	display: block;
	background-color: #f9f9f9;
	text-decoration: none;
	font-weight: bold;
}

/* 「他のご夫婦の成功例」の札 3 枚。ここだけ**要素名で狙うと外れる**。
 *
 * 投入時に `<a>` 直下の `<p>` が `<span>` へ変わっている（Issue #1496 の恒久対応。
 * Issue #1479 の空リンクを直すためのもので、移行元の作りへ戻す道は無い）。
 *
 *   移行元 <li><a><p><img></p><p><span class="serif">vol.10</span><br>名前<span>の成功例</span></p></a></li>
 *   dev    <li><a><span><img></span><span><span class="serif">vol.10</span><br>名前<span>の成功例</span></span></a></li>
 *
 * そのため移行元の `li span:first-of-type`（「vol.10」の茶色い札）は、dev では
 * **外側の写真の入れ物**に当たる（当たり先が 33 から 66 へ倍増する）。
 * そのまま写すと写真の枠が茶色に塗られる。
 *
 * そこで要素名ではなく**役割**で狙う。下の 3 つはどちらの組み立てでも同じものを指す。
 *
 *   説明文の入れ物 …… `a` の最後の直下の子（移行元は 2 つ目の p、dev は 2 つ目の span）
 *   「vol.○○」の札 …… `.serif`（クラスは両側に同じものが付いている）
 *   「の成功例」   …… 説明文の入れ物の中の最後の span */
/* 札の中の 2 つの入れ物（写真・説明文）を塊にする。
 *
 * 移行元はどちらも `<p>`（塊）だが、dev では `<span>`（並び）へ変わっている。
 * 塊に戻さないと札の幅が中身の最大の幅まで広がり、移行元の 352px に対して
 * 436px になる（実測）。 */
.entry-content .others .list_mv li a > * {
	display: block;
}

.entry-content .others .list_mv li a > *:last-child {
	padding: 12px 20px 20px;
	font-size: 16px;
	letter-spacing: 0;
}

.entry-content .others .list_mv li a .serif {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 8px 1px;
	background-color: #9e743a;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.1em;
}

.entry-content .others .list_mv li a > *:last-child > span:last-child {
	font-size: 14px;
	font-weight: normal;
}

/* 状態つき。描画して目で確かめる。 */
.entry-content .others .list_mv li a:hover {
	color: #999;
}

/* 指を乗せたときの札の色。上と同じ理由で `.serif` で狙う（要素名では外れる）。 */
.entry-content .others .list_mv li a:hover .serif {
	background-color: #c2af95;
}

.entry-content .hrepCpl {
	text-align: center;
	font-size: 28px;
	font-weight: normal;
}

.entry-content .hrepCpl span {
	font-size:16px;
}

.entry-content .hrepCpl span:last-of-type {
	font-size:22px;
	padding-left: 3px;
}

.entry-content .hrepCpl .vol {
	color: #9e743a;
	font-size:26px;
	display: block;
}

.entry-content #hrep01 .p01 {
	background: url("../images/title_01_bg01.jpg?ver=c76ae5bd7397") no-repeat right top;
	padding: 0 150px 0 0;
}

.entry-content #hrep01 .p02 {
	background: url("../images/title_01_bg02.jpg?ver=bc9424cd5cd1") no-repeat left top;
	padding: 0 0 0 185px;
}

.entry-content #hrep01 .p03 {
	background: url("../images/title_01_bg03.jpg?ver=1c77a84c3d6d") no-repeat right top;
	min-height: 200px;
	padding: 30px 0 0 80px;
}

.entry-content #hrep01 .p04 {
	background: url("../images/title_01_bg04.jpg?ver=d4c2932efd5b") no-repeat left top;
	min-height: 290px;
	padding: 30px 0 0 350px;
}

.entry-content #hrep01 .p05 {
	background: url("../images/title_01_bg05.jpg?ver=ea8841f48eb6") no-repeat 100px top;
	padding: 0 0 0 232px;
}

.entry-content #hrep01 .p06 {
	background: url("../images/title_01_bg06.jpg?ver=f723ac486246") no-repeat right top;
	padding: 0 200px 0 0;
}

.entry-content #hrep01 .p07 {
	background: url("../images/title_01_bg07.jpg?ver=6fddc0e738f6") no-repeat left top;
	padding: 0 0 0 230px;
	min-height: 130px;
}

.entry-content #hrep01 .p08 {
	background: url("../images/title_01_bg08.jpg?ver=fffd0074011b") no-repeat right top;
	min-height: 260px;
	padding: 0 280px 0 0;
}

.entry-content .marriage_vol1_name {
	line-height: 1.3;
	padding: 0 0 0 120px;
}

.entry-content .marriage_vol1_name p {
	font-size: 85%;
}

.entry-content .marriage_vol1_name p.name {
	font-weight: bold;
}

.entry-content #hrep02 .mt-30 {
	margin-top: -30px;
}

.entry-content #hrep02 .p01 {
	background: url("../images/title_02_bg01.jpg?ver=94c3e51cc122") no-repeat right top;
	padding: 0 230px 0 0;
}

.entry-content #hrep02 .p02 {
	background: url("../images/title_02_bg02.jpg?ver=1305fd7cd428") no-repeat right top;
	min-height: 180px;
	padding: 30px 0 0 310px;
}

.entry-content #hrep02 .p02txt {
	padding: 0;
}

.entry-content #hrep02 .p03 {
	background: url("../images/title_02_bg03.jpg?ver=364c1d3f8f4c") no-repeat left bottom;
	padding: 30px 0 0 280px;
}

.entry-content #hrep02 .p04 {
	background: url("../images/title_02_bg04.jpg?ver=d8dfa009567f") no-repeat right top;
	padding: 30px 260px 0 0;
}

.entry-content #hrep02 .p04txt {
	padding: 0px 30px 0 0;
}

.entry-content #hrep02 .p05 {
	background: url("../images/title_02_bg05.jpg?ver=235afa7092f5") no-repeat left top;
	padding: 0px 20px 0 280px;
}

.entry-content #hrep02 .p05txt {
	padding: 0px 0 0 120px;
}

.entry-content #hrep02 .p06 {
	background: url("../images/title_02_bg06.jpg?ver=b0c4e854c817") no-repeat left top;
	padding: 0px 0 0 230px;
	min-height: 161px;
}

.entry-content #hrep02 .p07 {
	background: url("../images/title_02_bg07.jpg?ver=2df1f7bfa996") no-repeat right bottom;
	min-height: 256px;
	padding: 0 280px 0 0;
}

.entry-content .marriage_vol2_name {
	line-height: 1.3;
}

.entry-content .marriage_vol2_name p {
	font-size: 85%;
}

.entry-content .marriage_vol2_name p.name {
	font-weight: bold;
}

.entry-content #hrep03 .p01 {
	background: url("../images/title_03_bg01.jpg?ver=3f67d9f8f1b7") no-repeat left bottom;
	padding: 0 0 0 220px;
}

.entry-content #hrep03 .p02 {
	background: url("../images/title_03_bg02.jpg?ver=1782ccc9f15f") no-repeat right 30px;
	padding: 30px 290px 0 0;
}

.entry-content #hrep03 .p02-2 {
	background: url("../images/title_03_bg03.jpg?ver=5c0ba5494f51") no-repeat right 30px;
	padding: 30px 290px 0 0;
}

.entry-content #hrep03 .p02txt {
	padding: 0px 40px 30px 0;
}

.entry-content #hrep03 .p03 {
	background: url("../images/title_03_bg04.jpg?ver=ef46dd3417d5") no-repeat left top;
	height: 130px;
	padding: 0px 0 0 280px;
}

.entry-content #hrep03 .p04 {
	background: url("../images/title_03_bg05.jpg?ver=2a21b08c96c6") no-repeat right bottom;
	padding: 20px 230px 0 0;
}

.entry-content #hrep03 .p04txt {
	padding: 0 30px 0 0;
}

.entry-content .marriage_vol3_prof {
	min-height: 262px;
	background: url("../images/title_03_bg07.jpg?ver=abffb6a804fa") no-repeat right top;
	padding: 0 0px 10px 0;
}

.entry-content .marriage_vol3_name {
	line-height: 1.3;
	background: url("../images/title_03_bg06.jpg?ver=aaf7f99b04d9") no-repeat;
	padding: 100px 300px 0 0;
}

.entry-content .marriage_vol3_name p {
	font-size: 85%;
}

.entry-content .marriage_vol3_name p.name {
	font-weight: bold;
}

.entry-content #hrep04 .p01 {
	background: url("../images/title_04_bg01.jpg?ver=468443575b2e") no-repeat scroll right top;
	padding: 0 189px 0 0;
}

.entry-content #hrep04 .p01txt {
	padding: 30px 83px 0 80px;
}

.entry-content #hrep04 .p02 {
	background: url("../images/title_04_bg02.jpg?ver=a9377fa7ae65") no-repeat left top;
	padding: 0 0 0 316px;
	margin-top: 30px;
	min-height: 214px;
}

.entry-content #hrep04 .p02txt {
	padding: 40px 83px 0 80px;
}

.entry-content #hrep04 .p03txt {
	padding: 19px 77px 0 80px;
}

.entry-content #hrep04 .p03 {
	background: url("../images/title_04_bg03.jpg?ver=b5ade9a237b7") no-repeat right top;
	padding: 0 280px 0 0;
	margin-top: 50px;
}

.entry-content #hrep04 .p04 {
	background: url("../images/title_04_bg04.jpg?ver=37b1766741c4") no-repeat left top;
	padding: 13px 0 20px 240px;
	margin-top: 30px;
	min-height: 128px;
}

.entry-content #hrep04 .p04txt {
	padding: 25px 72px 0 72px;
}

.entry-content #hrep04 .p05 {
	background: url("../images/title_04_bg05.jpg?ver=1f1e3b650669") no-repeat right top;
	padding: 13px 280px 14px 0;
	margin-top: 40px;
	min-height: 250px;
}

.entry-content #hrep04 .p05txt {
	padding: 25px 0 0;
}

.entry-content .marriage_vol4_name {
	line-height: 1.3;
	margin: 30px 0 0 206px;
}

.entry-content .marriage_vol4_name p {
	font-size: 85%;
}

.entry-content .marriage_vol4_name p.name {
	font-weight: bold;
}

.entry-content #hrep05 .p01 {
	background: url("../images/title_05_bg01.jpg?ver=c4f4879ab190") no-repeat scroll left top;
	padding: 0 0 0 176px;
	margin-top: 40px;
}

.entry-content #hrep05 .p01txt {
	padding: 30px 83px 0 48px;
}

.entry-content #hrep05 .p02 {
	background: url("../images/title_05_bg02.jpg?ver=2140bd043f48") no-repeat right top;
	padding: 0 202px 0 0;
	margin-top: 30px;
}

.entry-content #hrep05 .p03 {
	background: url("../images/title_05_bg03.jpg?ver=fe808a0b02c2") no-repeat left top;
	padding: 0 0 16px 290px;
	margin-top: 30px;
}

.entry-content #hrep05 .p03txt {
	padding: 30px 83px 0 0;
}

.entry-content #hrep05 .p04 {
	background: url("../images/title_05_bg04.jpg?ver=f0c0e2863c34") no-repeat right top;
	padding: 15px 202px 15px 0;
	margin-top: 10px;
}

.entry-content #hrep05 .p05 {
	background: url("../images/title_05_bg05.jpg?ver=80e11479cceb") no-repeat left top;
	padding: 0 0 16px 275px;
	margin-top: 30px;
}

.entry-content #hrep05 .p05txt {
	padding: 20px 83px 0 0;
}

.entry-content #hrep05 .p06txt {
	padding: 30px 0 0 0;
}

.entry-content #hrep05 .p06 {
	background: url("../images/title_05_bg06.jpg?ver=2ef1a03a929d") no-repeat right 23px;
	padding: 13px 260px 14px 0;
	margin-top: 30px;
}

/* 写し元は幅 537px の固定。左の外余白 48px と合わせて 585px を要求するため、
 * 柱がそれより狭い画面ではみ出す（幅 600px で右端が 667px になった）。
 * 写し元の値は保ったまま、柱より広くならない頭打ちだけを足す。
 * これは写し元に無い 1 行だが、移行元はパソコン専用で狭い画面の値を持たない。 */
.entry-content .marriage_vol5_name {
	line-height: 1.3;
	margin: 40px 0 0 48px;
	width: 537px;
	max-width: 100%;
}

.entry-content .marriage_vol5_name p {
	font-size: 85%;
}

.entry-content .marriage_vol5_name p.name {
	font-weight: bold;
}

.entry-content #hrep06 .p01 {
	background: url("../images/title_06_bg01.jpg?ver=ecfcc401b7a9") no-repeat scroll right bottom;
	padding: 0 250px 0 0;
	margin-top: 40px;
}

.entry-content #hrep06 .p01txt {
	padding: 30px 130px 0 0;
}

.entry-content #hrep06 .p02 {
	background: url("../images/title_06_bg02.jpg?ver=5315d1be72c2") no-repeat left top;
	padding: 0 0 0 250px;
	margin-top: 30px;
	min-height: 166px;
}

.entry-content #hrep06 .p02txt {
	padding: 30px 60px 0 0;
}

.entry-content #hrep06 .p03 {
	background: url("../images/title_06_bg03.jpg?ver=a3250df267f7") no-repeat left top;
	padding: 0 0 0 250px;
	margin-top: 30px;
	min-height: 167px;
}

.entry-content #hrep06 .p03txt {
	padding: 30px 100px 0 0;
}

.entry-content #hrep06 .p04 {
	background: url("../images/title_06_bg04.jpg?ver=681030c9db3b") no-repeat left top;
	padding: 0 0 0 180px;
	margin-top: 50px;
}

.entry-content #hrep06 .p05 {
	background: url("../images/title_06_bg05.jpg?ver=f5abbee39ba3") no-repeat scroll right top;
	padding: 0 320px 0 0;
	margin-top: 30px;
	min-height: 240px;
}

.entry-content #hrep06 .p05txt {
	text-align: center;
	margin-top: 40px;
}

.entry-content #hrep06 .p06 {
	background: url("../images/title_06_bg06.jpg?ver=cba55db54623") no-repeat left top;
	padding: 0 0 0 280px;
	margin-top: 40px;
	min-height: 183px;
}

.entry-content #hrep06 .p06txt {
	padding: 30px 0 0 0;
}

.entry-content #hrep06 .p07 {
	background: url("../images/title_06_bg07.jpg?ver=40d6d46af6d1") no-repeat right 46px;
	padding: 0 60px 0 0;
	margin-top: 30px;
}

.entry-content #hrep06 .p07-1txt {
	padding: 0 130px 0 0;
}

.entry-content #hrep06 .p07-2txt {
	padding: 30px 40px 0 40px;
}

.entry-content #hrep06 .p08 {
	background: url("../images/title_06_bg08.jpg?ver=7c62b2973857") no-repeat left top;
	padding: 0 0 0 270px;
	margin-top: 30px;
	min-height: 172px;
}

.entry-content #hrep06 .p08txt {
	padding: 30px 120px 0 0;
}

.entry-content #hrep06 .p09 {
	background: url("../images/title_06_bg09.jpg?ver=66909bfb019e") no-repeat right 23px;
	padding: 13px 260px 14px 0;
	margin-top: 30px;
	min-height: 235px;
}

.entry-content .marriage_vol6_name {
	line-height: 1.3;
	padding: 30px 0 0 255px;
}

.entry-content .marriage_vol6_name p {
	font-size: 85%;
}

.entry-content .marriage_vol6_name p.name {
	font-weight: bold;
}

.entry-content #hrep07 .p01 {
	background: url("../images/title_07_bg01.jpg?ver=35cbc7e32b53") no-repeat scroll left top;
	padding: 0 0 0 306px;
	margin-top: 40px;
	min-height: 197px;
}

.entry-content #hrep07 .p01txt {
	padding: 30px 0 0 0;
}

.entry-content #hrep07 .p02 {
	background: url("../images/title_07_bg02.jpg?ver=4af98389af09") no-repeat right top;
	padding: 0 223px 0 0;
	margin-top: 30px;
	min-height: 180px;
}

.entry-content #hrep07 .p02txt {
	padding: 30px 130px 0 0;
}

.entry-content #hrep07 .p03 {
	background: url("../images/title_07_bg03.jpg?ver=91ac1ae805f3") no-repeat left top;
	padding: 0 0 0 266px;
	margin-top: 30px;
	min-height: 199px;
}

.entry-content #hrep07 .p03txt {
	padding: 30px 0 30px 140px;
}

.entry-content #hrep07 .p04txt {
	margin-top: 30px;
}

.entry-content #hrep07 .p04 {
	background: url("../images/title_07_bg04.jpg?ver=79de8e704097") no-repeat right top;
	padding: 0 276px 0 0;
	margin-top: 30px;
	min-height: 254px;
}

.entry-content #hrep07 .p05txt {
	padding: 40px 0 0 262px;
}

.entry-content #hrep07 .p06txt {
	padding: 30px 300px 0 0;
}

.entry-content #hrep07 .p06 {
	background: url("../images/title_07_bg05.jpg?ver=0dd874198cba") no-repeat left top;
	padding: 0 0 0 262px;
	margin-top: 40px;
	min-height: 160px;
}

.entry-content #hrep07 .p07 {
	background: url("../images/title_07_bg06.jpg?ver=e8cc46c89440") no-repeat right top;
	padding: 0 306px 0 0;
	margin-top: 30px;
	min-height: 266px;
}

.entry-content #hrep07 .p08 {
	background: url("../images/title_07_bg07.jpg?ver=7305b7640db2") no-repeat left top;
	padding: 0 0 0 270px;
	margin-top: 30px;
	min-height: 238px;
}

.entry-content .marriage_vol7_name {
	line-height: 1.3;
	padding: 30px 255px 0 0;
}

.entry-content .marriage_vol7_name p {
	font-size: 85%;
}

.entry-content .marriage_vol7_name p.name {
	font-weight: bold;
}

.entry-content #hrep08 .p01 {
	background: url("../images/title_08_bg01.jpg?ver=3c35b3386794") no-repeat scroll right 10px;
	padding: 0 321px 0 0;
	margin-top: 40px;
	min-height: 197px;
}

.entry-content #hrep08 .p01txt {
	padding: 50px 0 0 0;
}

.entry-content #hrep08 .p02 {
	background: url("../images/title_08_bg02.jpg?ver=9ebc69b4418d") no-repeat left 10px;
	padding: 0 0 0 257px;
	margin-top: 75px;
	min-height: 180px;
}

.entry-content #hrep08 .p02txt {
	padding: 75px 0 0 0;
}

.entry-content #hrep08 .p03txt {
	margin-top: 75px;
	padding: 0 75px;
}

.entry-content #hrep08 .p03txt-02 {
	margin-top: 75px;
	padding: 0;
}

.entry-content #hrep08 .p04txt {
	margin-top: 75px;
	padding: 0 75px;
}

.entry-content #hrep08 .p04 {
	background: url("../images/title_08_bg03.jpg?ver=5f03dab6ca8f") no-repeat left 10px;
	padding: 0 0 0 250px;
	margin-top: 50px;
	min-height: 254px;
}

.entry-content #hrep08 .p05 {
	background: url("../images/title_08_bg04.jpg?ver=b3ccbc35bb6a") no-repeat left 10px;
	margin-top: 75px;
	padding: 0 0 0 288px;
	min-height: 254px;
}

.entry-content #hrep08 .p05txt {
	margin-top: 95px;
	padding: 0 75px;
}

.entry-content #hrep08 .p06txt {
	margin-top: 60px;
}

.entry-content #hrep08 .p06txt-02 {
	padding: 30px 0 0 0;
}

.entry-content #hrep08 .p06 {
	background: url("../images/title_08_bg05.jpg?ver=388966f77f0b") no-repeat right 10px;
	padding: 0 302px 70px 0;
	margin-top: 60px;
	min-height: 160px;
}

.entry-content #hrep08 .p07 {
	background: url("../images/title_08_bg06.jpg?ver=074ff509d629") no-repeat left 10px;
	padding: 0 0 0 334px;
	margin-top: 60px;
	min-height: 266px;
}

.entry-content #hrep08 .p08 {
	background: url("../images/title_08_bg07.jpg?ver=357ce1cf649a") no-repeat right 10px;
	padding: 0 287px 0 0;
	margin-top: 40px;
	min-height: 155px;
}

.entry-content #hrep08 .p08txt {
	margin-top: 86px;
}

.entry-content .marriage_vol8_name {
	line-height: 1.3;
	margin-top: 40px;
	padding: 0 255px 102px 0;
	background: url("../images/title_08_bg08.jpg?ver=0abeb718c165") no-repeat right top;
}

.entry-content .marriage_vol8_name p {
	font-size: 85%;
}

.entry-content .marriage_vol8_name p.name {
	font-weight: bold;
	font-size: 18px;
}

.entry-content #hrep09 .p01 {
	background: url("../images/title_09_bg01.jpg?ver=8f7aba4c2901") no-repeat scroll right 10px;
	padding: 0 300px 0 0;
	margin-top: 50px;
	min-height: 182px;
}

.entry-content #hrep09 .p02 {
	background: url("../images/title_09_bg02.jpg?ver=6db9ec1fc3d1") no-repeat left center;
	padding: 20px 0 0 260px;
	margin-top: 50px;
	min-height: 130px;
}

.entry-content #hrep09 .p02txt {
	padding: 67px 0 0 0;
}

.entry-content #hrep09 .p02txt-02 {
	padding: 67px 190px 0 0;
}

.entry-content #hrep09 .p02txt-03 {
	padding: 50px 0 0 0;
}

.entry-content #hrep09 .p03 {
	background: url("../images/title_09_bg03.jpg?ver=36df2663c6cd") no-repeat right top;
	padding: 0 190px 0 0;
	margin-top: 50px;
	min-height: 133px;
}

.entry-content #hrep09 .p04 {
	background: url("../images/title_09_bg04.jpg?ver=4c3484e735e7") no-repeat left top;
	padding: 35px 0 0 300px;
	margin-top: 50px;
	min-height: 228px;
}

.entry-content #hrep09 .p04 span {
	display: block;
	text-align: right;
}

.entry-content #hrep09 .p04txt {
	margin-top: 25px;
	padding: 0;
}

.entry-content #hrep09 .p05 {
	background: url("../images/title_09_bg05.jpg?ver=10544dc1c48a") no-repeat right 10px;
	margin-top: 40px;
	padding: 0 168px 0 0;
	min-height: 228px;
}

.entry-content #hrep09 .p05txt {
	margin-top: 20px;
}

.entry-content #hrep09 .p06 {
	background: url("../images/title_09_bg06.jpg?ver=f12b08da2b51") no-repeat left 10px;
	padding: 0 0 0 315px;
	margin-top: 60px;
	min-height: 165px;
}

.entry-content #hrep09 .p06txt {
	margin-top: 50px;
	text-align: right;
}

.entry-content #hrep09 .p07 {
	background: url("../images/title_09_bg07.jpg?ver=1ee66e4c6373") no-repeat right 10px;
	padding: 0 210px 0 0;
	margin-top: 50px;
	min-height: 170px;
}

.entry-content #hrep09 .p07txt {
	margin-top: 60px;
	padding: 0 210px 0 0;
}

.entry-content #hrep09 .p07txt-02 {
	margin-top: 40px;
	padding: 0 0 0 350px;
}

.entry-content #hrep09 .p08 {
	background: url("../images/title_09_bg08.jpg?ver=252bc5342273") no-repeat right 10px;
	padding: 0 350px 0 0;
	margin-top: 70px;
	min-height: 260px;
}

.entry-content #hrep09 .p08txt {
	margin-top: 70px;
}

.entry-content #hrep09 .p09 {
	background: url("../images/title_09_bg09.jpg?ver=cd8a9d919a86") no-repeat right 0;
	padding: 30px 226px 0 0;
	margin-top: 10px;
	min-height: 170px;
}

.entry-content #hrep09 .p10 {
	background: url("../images/title_09_bg10.jpg?ver=2d4a848ff554") no-repeat left 10px;
	padding: 30px 0 0 425px;
	margin-top: 30px;
	min-height: 165px;
}

.entry-content #hrep09 .p10txt {
	margin-top: 30px;
}

.entry-content .marriage_vol9_name {
	line-height: 1.3;
	margin-top: 40px;
	padding: 50px 255px 50px 0;
	background: url("../images/title_09_bg11.jpg?ver=8b27d3b5f6b1") no-repeat right center;
}

.entry-content .marriage_vol9_name p {
	font-size: 85%;
}

.entry-content .marriage_vol9_name p.name {
	font-weight: bold;
	font-size: 18px;
}

.entry-content #hrep10 .p01 {
	background: url("../images/title_10_bg01.jpg?ver=0e3b10800f2a") no-repeat scroll right 10px;
	padding: 0 280px 0 0;
	margin-top: 50px;
	min-height: 230px;
}

.entry-content #hrep10 .p02 {
	background: url("../images/title_10_bg02.jpg?ver=f4e5f404b0ea") no-repeat left center;
	padding: 0 0 0 270px;
	margin-top: 50px;
	min-height: 130px;
}

.entry-content #hrep10 .p03 {
	background: url("../images/title_10_bg03.jpg?ver=cee1182c6e86") no-repeat center top;
	padding: 295px 0 0 0;
	margin-top: 80px;
	min-height: 80px;
}

.entry-content #hrep10 .p03txt {
	margin-top: 30px;
	padding: 0 280px 0 0;
}

.entry-content #hrep10 .p04 {
	background: url("../images/title_10_bg04.jpg?ver=ba8a8c86e65b") no-repeat left top;
	padding: 0 0 0 353px;
	margin-top: 60px;
	min-height: 230px;
}

.entry-content #hrep10 .p04txt span,
.entry-content #hrep10 .p04 span {
	display: block;
	text-align: right;
}

.entry-content #hrep10 .p04txt {
	margin-top: 25px;
	padding: 0 0 0 114px;
}

.entry-content #hrep10 .p04txt-02 {
	margin-top: 50px;
	padding: 0;
}

.entry-content #hrep10 .p05 {
	background: url("../images/title_10_bg05.jpg?ver=918c2681187a") no-repeat right top;
	margin-top: 10px;
	padding: 70px 250px 0 0;
	min-height: 170px;
}

.entry-content #hrep10 .p05txt {
	margin-top: 30px;
	padding: 0 267px 0 0;
}

.entry-content #hrep10 .p06 {
	background: url("../images/title_10_bg06.jpg?ver=65b621fa3908") no-repeat left 10px;
	padding: 0 0 0 328px;
	margin-top: 50px;
	min-height: 158px;
}

.entry-content #hrep10 .p06txt {
	margin-top: 40px;
	padding: 0 300px 0 0;
}

.entry-content #hrep10 .p07 {
	background: url("../images/title_10_bg07.jpg?ver=3bbf1e9ad6a5") no-repeat center 10px;
	padding: 0 0 0 0;
	margin-top: 50px;
	min-height: 540px;
	text-align: right;
}

.entry-content #hrep10 .p07txt {
	margin-top: -90px;
	padding: 0 320px 0 0;
}

.entry-content #hrep10 .p08 {
	background: url("../images/title_10_bg08.jpg?ver=401f59defca8") no-repeat left 10px;
	padding: 0 0 0 350px;
	margin-top: 50px;
	min-height: 180px;
}

.entry-content #hrep10 .p09 {
	background: url("../images/title_10_bg09.jpg?ver=62be005d7ff5") no-repeat right bottom;
	padding: 0;
	margin-top: 50px;
	min-height: 280px;
}

.entry-content #hrep10 .p09txt {
	margin-top: 10px;
	padding: 0 280px 0 0;
}

.entry-content #hrep10 .p10 {
	background: url("../images/title_10_bg10.jpg?ver=d40cc09b6d90") no-repeat left 10px;
	padding: 15px 0 0 320px;
	margin-top: 40px;
	min-height: 160px;
}

.entry-content #hrep10 .p10txt {
	margin-top: 10px;
	padding: 0 100px 0 0;
}

.entry-content .marriage_vol10_name {
	line-height: 1.3;
	margin-top: 40px;
	padding: 50px 290px 50px 0;
	background: url("../images/title_10_bg11.jpg?ver=4fab8110ac3d") no-repeat right center;
}

.entry-content .marriage_vol10_name p {
	font-size: 85%;
}

.entry-content .marriage_vol10_name p.name {
	font-weight: bold;
	font-size: 18px;
}

.entry-content a.seo {
	text-decoration: none;
}

/* ===== 写し元: introduce/happyreport/css/style_happyreport.css ===== */

/* 明朝で組む部分（`.min`）。写し元は `html > body .min`。
 * 器を本文の中へ閉じるため `html > body` は落とし、`.entry-content` を前に付けた。 */
.entry-content .min {
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight: 600;
}

/* 本文のリンクから下線を外す。写し元 `a { text-decoration: none }`。
 *
 * テーマは旧デザインのページの素のリンクに下線を引く（Issue #2609。移行元の
 * サイト共通 CSS が `a { text-decoration: underline }` を持つのを写したもの）。
 * しあわせレポートはその上に専用 CSS でこの 1 行を重ねて下線を消しており、
 * **現行サイトでは下線が出ていない。**移行元の再現としては下線なしが正しい。
 *
 * 1 ページあたり 111 本のリンクに効くが、この CSS は詳細 11 ページでしか
 * 読み込まないので、他のページには届かない。囲みを `.entry-content` にして
 * ヘッダー・フッターにも届かないようにしてある。 */
.entry-content a {
	text-decoration: none;
}

/* 写さなかった規則: `#contents .path`（パンくずの高さと内余白）。
 *
 * 当たり先は 移行元 22 に対して **dev は 0** である。移行元のパンくずは本文の器
 * （`#contents`）の中にあるが、移行先はテーマが自前のパンくずを本文の外に持つ。
 * 写しても当たる相手がおらず、無理に当てるとテーマ共通のパンくずを
 * このページだけ別扱いすることになるので、写さない。 */

.entry-content #introduce_top {
	width: min(1100px, 100%);
	margin: 0 auto;
	padding-top: 20px;
}

/* ===== 狭い画面の受け皿（移行元に対応する規則が無い分） ===== */

/* 巻ごとの写真配置は、パソコンの幅を前提にした値である。写真は背景として置かれ、
 * 文章はその横へ 300〜350px の内余白で逃がしてある（例: `#hrep01 .p04` は
 * 左に 350px）。白い囲みの中の柱がその内余白より狭くなると、文章の入る幅が
 * 0 になり、囲みからはみ出して切れる（幅 375px で 6 ページに出た）。
 *
 * 移行元はこの問題を持たない。**携帯向けにまったく別のページを用意している**
 * （`/sp/introduce/happyreport/` に詳細 10 ページと専用 CSS 4 本）。移行先は 1 枚で
 * 全部の幅を受けるので、ここで受け皿を決める必要がある。
 *
 * ここでは**写真も文章も失わない**ことを優先し、パソコンの組みをそのまま保って、
 * 白い囲みの中だけ横に送れるようにする。写真を消す案（背景を none にする）も
 * 検討したが、この写真は飾りではなく記事の中身なので採らなかった。
 * 縮小して詰め込む案（transform で 34% に縮める）も、幅 375px では文字が
 * 読めなくなるため採らなかった。
 *
 * 800px は移行元のパソコンでの柱の幅である（囲み 1,100px − 左右の内余白 150px × 2）。
 * この幅を確保できる画面では横送りは出ない。 */
/* 🚨 **この横送りは 2026-09-04 のユーザー裁定（案 B）で廃止した。**
 * 「横送りをやめて縦積みにし、大きな内余白を落とす」と決まったので、写真を上・
 * 文章を下に積み替える形へ変えた。積み替えの規則はこのファイルの末尾にある
 * 生成物の節（`hr-photo-stack-build.py`）にまとめてある。
 *
 * 併せて境目の食い違いも解消した。**この横送りは 599px 以下にしか置かれておらず、
 * サイト全体の携帯幅の決まり（749px）と 150px ずれていた**ため、幅 600〜749px には
 * 受け皿が無かった。生成物の節は 749px 以下に置いてある。
 *
 * ここにあった 2 つの指定（`.bg_white { overflow-x: auto }` と
 * `.bg_white > * { min-width: 800px }`）は**残さずに消した**。残すと積み替えた
 * あとも横に送れる状態が残り、**縦積みにした意味が無くなる**. */

/* ===== 写し元に「規則が無い」ことを写す分 ===== */

/* 段落の下の余白を 0 にする。
 *
 * これは写した規則ではなく、**移行元に規則が無いことを写した**ものである。
 * 移行元のサイト共通 CSS は `p { margin-bottom: 1em }` をコメントアウトしており、
 * 段落どうしの間隔は道具クラス（`.mb15` `.mb30` `.mb40` `.mb70`）だけで作る。
 * 移行先の本文は段落へ一律 25px を与えるため、そのままでは移行元に無い間隔が入る
 * （Bug #2625。11 ページ合計 50 か所）。
 *
 * 道具クラスは打ち消さない。テーマの道具クラスは
 * `:is(.entry-content, .page-content__body) .mb40`（詳細度 0,2,0）で、
 * ここの `.entry-content p`（0,1,1）より強いため、そのまま勝ち残る。
 * 実測でも移行元と同じ値が出ている（`.mb40` は両側 40px・`.tac.mb15` は両側 15px）。
 *
 * 当てる範囲を本文全体にしているのは、移行元の段落の下余白が**器の中も外も 0px**
 * だからである（両側 11 ページで実測）。 */
.entry-content p {
	margin-bottom: 0;
}

/* 見出しを素へ戻す。
 *
 * これも写した規則ではなく、**移行元に規則が無いことを写した**ものである。
 * 移行元はサイト共通 CSS（`/css/common.css` の 76〜79 行目と 259〜263 行目）で
 * 見出しと塊要素の余白を 0 に戻し、字の大きさと太さも素へ戻してから飾りを重ねる。
 * 移行先の本文は見出しへ飾り（茶色・行間 42px・上の外余白 50px・下の内余白 10px）を
 * 与えるため、初期化を写さないと移行元と違う見出しが出る。
 *
 * 🚨 **この 1 本を Bug #2625 / #2808 の写し（PR #2838）で入れ忘れた。**受入の判定が
 * 見出しについて下の外余白と揃えの 2 つしか見ておらず、色・行間・上の外余白・
 * 下の内余白の差が判定をすり抜けた。判定の側にもこの 4 つを足してある。
 *
 * 🚨 **さらに 3 つの性質が残っていた**（#2852 の二巡目。両側の全見出しをひととおり
 * 測って見つけた。差は 14 種類あった）。
 *
 *   罫線   … テーマは `.entry-content h2` に下線 2px、`.entry-content h3` に左の
 *            縦棒 4px を与える。内余白を 0 にするだけでは解けず、**文字に密着した
 *            金色の下線が 11 ページに残っていた**（Codex の指摘）
 *   字間   … テーマの 0.05em が残っていた（28px の見出しで 1.4px）
 *   字の大きさ … 移行元は `h1〜h6 { font-size: 100% }` で受け継ぎに戻す。写さないと
 *            テーマの h2 の 28px が、写した飾りを持たない見出し（`#event_top .title`）
 *            にそのまま載る
 *
 * 🚨 **太さ（font-weight）は素へ戻してはいけない。**移行元の共通 CSS には初期化の塊が
 * **2 つ**あり、76〜79 行目が `font-weight: normal` にしたあと、259〜263 行目の
 * 「HEADLINE」が `font-weight: bold` に戻している。**後ろが勝つので移行元の素は太字**
 * である（実測: `#event_top .title` は移行元 700）。`normal` を書くと逆に差が生まれる。
 *
 * 色は `inherit` にする。値を決め打ちすると、移行元が飾りで色を与えている見出し
 * （`.others .ttl` の金茶）まで塗り替えてしまう。受け継ぎに戻せば、飾りのある
 * 見出しは飾りの色、飾りの無い見出しは本文の色になり、移行元と同じ振る舞いになる。
 * 行間も同じ理由で `normal`（移行元の素の値）に戻す。
 *
 * 打ち消しの強さは `.entry-content :is(h1〜h6)`（0,1,1）に留める。写した飾り
 * （`.entry-content .wrap_movie h2` は 0,2,1・`.entry-content .others .ttl` は 0,3,0・
 * `.entry-content #event_top .title` は 1,2,0）がすべてこれより強いので、飾りは残る。 */
.entry-content :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: 100%;
	line-height: normal;
	letter-spacing: normal;
}

/* 題名の画像を載せる区画（#event_top）。
 *
 * 🚨 **写し元の棚卸しが 1 本足りなかった。**Bug #2625 / #2808 の写し（PR #2838）は
 * 移行元の詳細ページが読む CSS を 2 本（`introduce/happyreport/css/style.css` と
 * `style_happyreport.css`）と数えたが、実際は **3 本**読んでいる。詳細 11 ページは
 * どれも `css/page_event_top.css`（242 行）も読む。
 *
 * この 3 本目の中身は 42 規則すべてが `#event_top` の下にあり、詳細 11 ページのうち
 * この区画を持つのは `report_01_191127`（`/introduce/story/introduce-happyreport-report_01_191127/`）
 * 🚨 **この 1 本の投稿名はユーザー決定 D513（Task #8038）でも変えない。**移行元の
 * 目次に載っていない複製で、投稿名を直す一覧
 * （`docs/pa-cms/investigation/classification/post-name-restore/post-name-targets.tsv`）に
 * 行を持たない。だから前置きが付いたままである
 * の 1 ページだけである。よってページに効くのは下の 2 規則だけになる
 * （残る 40 規則は当たり先が無い＝移行元でも出ていない）。
 *
 * 写さなかったため、題名の画像が移行元の「1,100px の器の中央」から
 * 「本文の柱 800px の左端」へずれていた（左端 170px 対 320px）。
 *
 * 器は本文の柱（800px）より広いので、`.wd_1100` と同じ 2 つ組で柱の外へ出す。
 * `width: min(1100px, 100%)` では足りない（`100%` は親の 800px を基準に解ける）。 */
.entry-content #event_top {
	width: min(1100px, 100vw);
	margin-inline: calc(50% - min(550px, 50vw));
	padding: 0 0 30px;
	text-align: center;
}

.entry-content #event_top .title {
	margin-bottom: 30px;
}

/* 題名の画像の縦の位置合わせを文字の下端（baseline）へ戻す。
 *
 * テーマは本文の画像へ `vertical-align: middle` を当てている（main.css の
 * `.entry-content img`）。移行元は行の中の箱のまま扱うので、画像の下に文字の
 * 下がり分（6px）が残り、区画の高さが 137px になる。dev は位置合わせが真ん中の
 * ため 131px しかなく、題名の下の間が 6px 詰まっていた。
 *
 * 同じ戻し方の先例が社員紹介の写しに 2 か所ある（main.css の
 * `.pa-branch__content .coming .flow-list li img` と `.security .img-security img`）。 */
.entry-content #event_top .title img {
	vertical-align: baseline;
}

/* 成功例の札の写真も、縦の位置合わせを文字の下端（baseline）へ戻す。
 *
 * 上の題名の画像と同じ理由である。移行元は写真を行の中の箱のまま扱うので、
 * 写真の下に文字の下がり分（6px）が残り、写真を包む塊の高さが 224px、札全体が
 * 310px になる。dev は位置合わせが真ん中のため 218px / 304px しかなく、札が
 * 6px 低かった（11 ページ × 3 枚すべて）。戻すと 224px / 310px で移行元と一致する
 * （2026-09-02 に両側を測って確認）。
 *
 * 🚨 この差は、受入の項目に**札の外形の高さ**を入れて初めて見つかった。位置（左端
 * 170 / 544 / 918px）・幅・回り込み・右の外余白は 4 つとも両側で一致していた。 */
.entry-content .others .list_mv li a img {
	vertical-align: baseline;
}

/* ==============================================================
 * 携帯幅の「先頭へ戻る」を移行元のスマートフォン版へそろえる
 * ==============================================================
 *
 * 詳細 11 ページの「先頭へ戻る」は、投入した本文の中にある `p.page_top` である。
 * テーマが型紙として出す `.pa-page-top`（`inc/page-top.php` が携帯幅の絵の差し替えを
 * 受け持つ）とは**クラス名が違うので、あちらの直しは届かない**。そのため
 * 749px 以下の上書きが 1 つも無く、パソコン版の姿がそのまま出ていた。
 *
 * 両側とも本番を実測した値（幅 375px。移行元 = https://www.p-a.jp/introduce/
 * happyreport/report_01.html を携帯の名乗りで開き、転送先 /sp/introduce/
 * happyreport/report_01.html を 2026-09-04 00:32 JST に測った。dev は同 00:33）:
 *
 *   段落 `p.page_top` … 移行元 44.5313 × 50.3906px・左端 165.2344px（中央寄せ）
 *                        dev     50 × 109px・左端 310px（右寄せ・上の内余白 40px）
 *   絵                 … 移行元 44.5313 × 50.3906px・/sp/images/page_top.gif（実寸 76 × 86）
 *                        dev     50 × 63px・pagetop_off.png（パソコン用）
 *   下の外余白         … 移行元 30px / dev 0px
 *
 * 🚨 **下の外余白は一覧と詳細で違う。**一覧は 28.626px で、ページ専用の CSS が共通の
 * 30px を上書きしている。**詳細は上書きが無いので 30px のまま**である（実測で確認）。
 * 一覧の値をそのまま持ち込まない。
 *
 * 🚨 **幅は百分率でなく `vw` で書く。**移行元の写しは `width: 11.875%` だが、百分率は
 * 「包む器の中身の幅」を基準に解かれる。移行元では包む器が画面幅（375px）なので
 * 44.53px になるが、**dev の本文の器 `.entry-content` は幅 345px**（左右 15px の
 * 内余白）なので、百分率だと 345 × 11.875% = 40.97px にしかならない。`11.875vw` は
 * 画面幅を基準にするので移行元と同じ 44.5313px になる。一覧の直し（`main.css` の
 * `.pa-page-top--happyreport`）でも同じ判断をしている。
 *
 * `margin: 0 auto` で中央へ寄せると、器の左端 15px + (345 − 44.5313) ÷ 2 = 165.2344px
 * となり、移行元の左端と一致する。
 *
 * 🚨 **絵に幅を書かない。**移行元のスマートフォン版が絵に当てているのは共通の 1 枚
 * （写しの `public/sp/css/basic.css` の 98〜100 行）の `img { max-width: 100% }` だけ
 * で、`width: 100%` は書いていない。器が絵の実寸（76 × 86）より広い幅では伸ばさない。
 * `width: 100%` にすると器に合わせて引き伸ばす（一覧で実際に踏んで直した）。
 *
 * 素の指定は `main.css` の `:is(.entry-content, .page-content__body) .page_top`
 * （`float: right; margin: 0; padding: 40px 0 0`）である。この 1 枚は `pa-main` の
 * あとに読まれるので、同じ詳しさの指定で後ろから上書きできる。
 *
 * この 1 枚が配られるのはしあわせレポートの詳細 11 ページだけなので
 * （`inc/introduce-happyreport.php` の `pa_introduce_happyreport_enqueue_assets()`）、
 * 同じ `p.page_top` を持つ他の 5,000 ページ超には届かない. */
@media (max-width: 749px) {
	:is(.entry-content, .page-content__body) .page_top {
		float: none;
		width: 11.875vw;
		margin: 0 auto 30px;
		padding: 0;
	}

	:is(.entry-content, .page-content__body) .page_top img {
		content: url("../../images/pagetop_sp.gif?ver=bb8683872ea0");
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	/* 帯の器を移行元と同じ「画面の全幅 + 子を 6.25% 内側」にする。
	   移行元の実測（2026-09-04 01:15 JST・幅 375px）:

	     区画 `.box`                  … 375 × 83px・左端 0・内余白 上 25px / 左右 23.4375px
	     枠つきの器 `.accordion-container` … 332.125 × 58px・左端 23.4375px・枠線 2px 四方

	   区画の 83px は **25 ＋ 58** である。

	   🚨 **6.25% を子へ当てるには、先に器を画面の全幅にしないと合わない。**百分率は
	   包む器の内容の幅を基準に解かれる。dev の `#introduce_top` は本文の器の中
	   （幅 345px）なので、そのまま 6.25% を当てると 21.5625px になり、器の幅が
	   301.875px（移行元 332.125px）になる。全幅（375px）にしてから当てると
	   23.4375px になり移行元と一致する。一覧の側も同じ組み方をしている
	   （`main.css` の `.pa-happyreport-list-band .introduce_nav--open` の節）.

	   🚨 **上の 25px は「区画の内余白」で作り、帯の外余白では作らない。**素の指定
	   （`main.css` の `.introduce_nav--open { margin: 25px auto 0 }`）の 25px を
	   そのまま残すと、区画の内余白 20px と足されて区画が 103px になる（実測）。
	   移行元は区画の内余白 25px だけを持つので、帯の側の外余白は 0 にする。

	   🚨 **選択子は `#introduce_top:has(.introduce_nav--open)` の形で書く。**
	   はじめ `.entry-content #introduce_top` と書いたが、**`main.css` の
	   `:is(.entry-content, .page-content__body) #introduce_top:has(.introduce_nav--open)`
	   のほうが詳しく、こちらが黙って負けていた**（読み込み順では後なのに効かない）。
	   ブラウザで当たる規則を全部列挙して気づいた。**「後に読むから勝つ」を当てに
	   しない。詳しさで並べる。**一覧の側は同じ形の上書きを既に持っている
	   （`main.css` の `.pa-happyreport-list-band#introduce_top:has(...)`）ので、
	   全幅の作り方（`margin-inline: -15px` で本文の器の左右の内余白 15px を打ち消す）
	   もそちらにそろえた. */
	:is(.entry-content, .page-content__body) #introduce_top:has(.introduce_nav--open) {
		width: auto;
		margin-inline: -15px;
		padding-top: 25px;
	}

	:is(.entry-content, .page-content__body) .introduce_nav--open {
		width: auto;
		margin-top: 0;
		margin-inline: 6.25%;
	}

	/* 本文の柱を移行元と同じ「画面の 87.5%（左右 6.25%）」にする。
	   移行元の実測（本番 /sp/introduce/happyreport/report_09.html を
	   2026-09-04 02:30 JST に幅 375px で取得）:

	     移行元 `.report_body` の子 … 左端 23.4375px・幅 **328.125px**（画面の 87.5%）
	     直す前の dev `.bg_white` の子 … 左端 51.125px・幅 **272.8px**

	   白い囲みの左右の内余白が 51.125px（`min(150px, calc(150% / 11))`）だったため、
	   柱が 55.3px 狭く、**同じ文が余分に行を作っていた**。ユーザー目視で
	   「レイアウトが不完全」と差し戻された差の 1 つである（2026-09-04 02:5x JST）。

	   🚨 **縦の内余白（60px）は変えない。**ここで直すのは横方向だけである。 */
	.entry-content .wrap_movie .bg_white {
		padding-right: 6.25%;
		padding-left: 6.25%;
	}

	/* 本文の文字組みを移行元スマホ版と同じ「13px・行送りの指定なし」にする。
	   移行元の実測（本番 /sp/introduce/happyreport/report_09.html を携帯の名乗り・
	   幅 375px で **2026-09-04 02:59 JST** に取得。記録は
	   `pa-verify-assets/3127/sections/typo-legacy-09-375.json`）:

	     字の大きさ … **13px**
	     行送りの指定 … **無し（`line-height: normal`）**。移行元の CSS には
	                    `line-height` の指定が 1 つも無い
	     描画された 1 行の送り … **20.00px ちょうど**（26 段落すべてで
	                             「行数 × 20 ＝ 段落の高さ」になる）

	   13px の出どころは移行元の初期化 `sp/css/basic.css` の 3〜23 行である。
	   ほぼ全要素へ 13px を与えるので、本文の段落もこの値になる。
	   直す前の dev はパソコン幅の写し（16px / 220% ＝ 35.2px）が携帯幅にも
	   そのまま届いていた。

	   🚨 **`line-height: 20px` ではなく `normal` と書く。**理由は 2 つある。
	   ①移行元が指定を持たない（`normal`）ので、そのまま写すのが忠実である。
	   ②report_08 / 09 / 10 には `.marriage_volN_name p.name { font-size: 18px }`
	   があり、これは詳しさで勝つので 13px に上書きされない。ここで `20px` を
	   継ぎ足すと 18px の文字に対して行送りが詰まる。`normal` なら 27px になる
	   （手元の検算で 3 本とも段落の高さが 7px 違うことを確かめた）。

	   🚨 **置き場所が効く。**同じファイルの 377 行などにある
	   `.entry-content .marriage_volN_name p { font-size: 85% }` は詳しさが同じ
	   （0,3,0）なので、**後ろに書いたほうが勝つ**。移行元スマホ版は名前の段落も
	   13px なので、勝つのが正しい姿である。「読み込み順が後だから勝つ」を
	   当てにせず、実測で確かめている。

	   🚨 **パソコン幅（750px 以上）は変えない。**191〜196 行の写し
	   （`font-size: 16px; line-height: 220%`）が移行元パソコン版どおりであり、
	   この節は携帯幅の中だけで上書きする. */
	.entry-content .bg_white p,
	.entry-content .bg_white {
		font-size: 13px;
		line-height: normal;
	}
}

/* ==============================================================
 * 携帯幅の「会員紹介MENU」の押しボタンの字を移行元へそろえる
 * ==============================================================
 *
 * 帯を畳む組みは `inc/introduce-happyreport.php` が差し込む（共通部品
 * `.pa-collapsible-nav` の形にそろえてある）。**共通部品の既定の字は 12px / 13px
 * で、移行元の詳細と合っていない。**
 *
 * 移行元の実測（本番 www.p-a.jp を携帯の名乗りで開いた転送先
 * /sp/introduce/happyreport/report_01.html を 2026-09-04 01:15 JST に幅 375px で
 * 測った。キャンペーンの重ね窓は開かなかった）:
 *
 *   押しボタン `h4.article-title` … 328.125 × 54px・内余白 15px 四方・中央そろえ
 *                                   字 **16.25px**・太さ **700**・書体 **游明朝, serif**
 *                                   色 rgb(70, 61, 60)
 *   枠つきの器 `.accordion-container` … 332.125 × 58px・枠線 2px 四方・左端 23.4375px
 *   器 `.box`                        … 375 × 83px・内余白 上 25px / 左右 23.4375px（6.25%）
 *
 * 区画の 83px は **25（器の上の空き）＋ 58（枠線 2 × 2 ＋ 押しボタン 54）** で
 * 説明できる。押しボタンの 54px は **内余白 15 × 2 ＋ 行の高さ（16.25 × 1.5 =
 * 24.375）** である。
 *
 * 🚨 **押しボタンの中に `span` は無い（実測）。**移行元は文言を `h4` へ直接
 * 置いているので、**見える字は 16.25px のまま**である。会員のホンネ体験談は同じ
 * 組みでも `h4` の中に `span` があり、移行元のサイト共通の初期化
 * （`sp/css/basic.css`）が `span` を 13px・太さ normal へ戻すため**見える字が
 * 13px** になる。**この 2 画面は見た目が違う。**
 *
 * 🚨 **押しボタンの高さでは見分けられない。**高さは `h4` の 16.25px が作る行の
 * 高さで決まるので、中の `span` が 13px でも 54.375px のままである。**中の字を
 * 直接測って確かめること**（5 班からの申し送り。体験談で実際に踏んだ型）。
 *
 * 🚨 **読むファイル名で「当たらない」と判断してはいけない。**移行元の詳細は一覧
 * 専用の `introduce/happyreport/assets/css/happyreport.css` を読まないが、
 * **詳細専用の `sp/introduce/happyreport/css/sp_style.css` が同じ `1.25em`
 * （親が 13px なので 16.25px）と `font-family: 游明朝, serif` を与えている**。
 * `main.css` に残っていたこの取り違えの注釈は Task #3232 で直した。
 *
 * 🚨 **書体と字の大きさはここに書かない（Task #3232）。**共通部品の既定が
 * 16.25px の明朝になったので、同じ値をこの画面で繰り返さない。以前はここで
 * 上書きしていたが、**その既定をそのまま使う画面が 1 つも無かった**ので、
 * 実際に使われている値を既定へ寄せて上書きを 3 か所とも外した. */

/* ==============================================================
 * 携帯幅は移行元スマホ版と同じ「素の記事」にする（Bug #3083 の 2 本目）
 * ==============================================================
 *
 * ユーザーの再目視（2026-09-04 04:1x JST）で携帯幅が差し戻された。指摘の原文は
 * 「移行元のレイアウトにもっと近づけた方がよい。スマホでは非表示にする画像が
 * 出ていたり」である。移行元のスマホ版（`/sp/introduce/happyreport/report_09.html`）
 * を **2026-09-04 04:10 JST に幅 375px で取得**して測ると、パソコン版にある部品の
 * いくつかがそもそも無く、記事の本体も**白い囲みを持たない素の器**だった。
 *
 * 移行元スマホ版の実測（記録は `pa-verify-assets/3127/sections/` の
 * `typo-legacy-09-375.json`（本文の器・86 要素）と
 * `fullpage-legacy-sp-09-375.json`（画面全体・441 要素））:
 *
 *   記事の本体 `div.report_body` … 幅 328.13px（画面の 87.5%）・左端 23.4375px
 *                                  内余白 0・地色なし・枠線なし・上外余白 30px
 *   本文の器  `#other_contents`  … 下の内余白 20px
 *   段落                          … 下外余白 20px（23 個）/ 25px（7 個）/ 50px（4 個）
 *   ご夫婦のひとこと `div.box_gold` … 枠線 1px solid rgb(163, 118, 43)・内余白 20px
 *                                    上下の外余白 40px・幅 328.13px
 *   他のご夫婦の見出し `h4 > img`   … 高さ 36.84px・下外余白 0（札の `ul.mb20` が 20px）
 *   一覧ページにもどる `p.tac.fs_b` … 高さ 29px・上外余白 0（前の `ul` の 20px だけ）
 *   結婚活動のコツ `div.txtBtn_gray01.box.mt35` … 上外余白 35px・高さ 27px
 *                                                （`a` の内余白は上下 5px でなく
 *                                                  上下 5px / 左右 20px・10px、字 11px）
 *   来店予約の帯 `div.conv-banner` … 高さ 399.72px・上外余白 15px・下外余白 30px
 *   ページトップへ `p.page_top`    … 高さ 50.39px・下外余白 30px
 *
 * **移行元スマホ版に無い部品**（採った 441 要素の中に 1 つも無い）:
 *
 *   「すべての記事を見る」の押しボタン（dev の `.others p.btn_all`）
 *   前後の巻へのリンク `< vol.8` / `vol.10 >`（dev の `.mv_nav` の中の `.pre` / `.next`）
 *   白い囲み `div.bg_white` と、その外側の地色の帯 `section.wrap_movie`
 *
 * 「一覧ページにもどる」は移行元スマホ版にも在るので**残す**。
 *
 * 🚨 **上の 3 つは 2026-09-07 にいったん「出す」へ変えたが、2026-09-19 の
 * ユーザー決定 D489 で「隠す」へ戻した**（Bug #7745）。覆された決定は
 * [Bug #4225]（前後の巻への送りと並び）と [Bug #4226]（「すべての記事を見る」）
 * である。白い囲みと地色の帯は初めから隠したままで、D489 の対象外。
 *
 * 🚨 **来店予約の帯（`div.box_support`）はこの節の対象外。**帯の中の写真の箱
 * `#box-photo` も移行元スマホ版に無いが、帯を移行元どおりに作り直す直しは
 * 5 班が全ページ共通の Task #3189（PR #3227・マージ済み）で入れる。1 班が
 * ここで隠したり余白を変えたりすると、その直しと衝突する。
 *
 * 🚨 **「すべての記事を見る」を隠すと崩れる。**この押しボタンは浮かせた札 3 枚
 * （`.list_mv li` の `float: left`）を含む器がどこにも無いため、**自分の行が札の
 * 下へ押し出される形で浮きを終わらせていた**。隠すだけだと次の「結婚活動のコツ」
 * が同じ役をして高さが 33.39px から 173.73px へ膨らみ、札へ食い込む（実測。記録は
 * `pa-verify-assets/3127/data/detail-hide-probe.json` の `hideBtnAllP`）。
 * そこで **札の一覧 `ul.list_mv` 自身に浮きを閉じさせる**（`display: flow-root`）。
 *
 * 🚨 **本文の段落は「上の外余白」を 20px でそろえる。**移行元は下外余白 20 / 25 /
 * 50px の 3 通り、dev はパソコン版の写しで**上外余白が 10〜70px の 16 通り**
 * （負の値 −30px / −90px を含む。パソコンでは写真の横へ文章を逃がすための値で、
 * 縦に積む携帯幅では意味を持たない）。段落の切れ目が両側で違う（移行元 26・dev 20）
 * ので 1 対 1 では写せない。**移行元でいちばん多い 20px（34 か所中 23 か所）**に
 * そろえ、下外余白は 0 にして二重に空かないようにする。
 *
 * 🚨 **`#hrepNN` の id を選択子に入れる。**段落の上外余白は
 * `.entry-content #hrep09 .p10txt` の形（詳しさ 1,2,0）で書かれている。
 * クラスだけの選択子（0,3,0）では **id を持つ側に負けて黙って効かない**。
 * 前任が `.entry-content #introduce_top` で同じ型の事故を起こしている。
 * ここでは `:is(#hrep01, …, #hrep10)` を挟んで詳しさを 1,2,0 以上へ上げ、
 * 読み込み順でも後ろに置いて二重に勝たせる。
 *
 * 🚨 **`.others` の左右の空きは `vw` で書く。**内余白の百分率は**親の内容の幅**
 * を基準に解ける。`.others`（= `.wd_1100`）の親は本文の器（幅 345px）なので
 * `6.25%` と書くと 21.5625px になり、移行元の 23.4375px と 1.875px ずれる。
 * 画面の幅を基準にする `6.25vw` なら幅 375px でちょうど 23.4375px になる。
 * 白い囲みの側が `6.25%` のままでよいのは、その親（`.inner_wrap_v`）が
 * 画面の全幅（`.wrap_movie` の `100vw`）に等しいためである。
 *
 * 【この PR で扱わないもの】文言を焼き込んだ画像を文字へ起こす直しは 3 本目の
 * PR で扱う（題名 `ttl_09.png` / ふきだし `catch_09.png` / 他のご夫婦の札
 * `thumb_06〜08.png` / 来店予約の帯の中身）。ここでは**隠す・囲みを外す・余白を
 * 寄せる**だけに絞る。
 *
 * 【パソコン幅は 1px も変えない】すべてこの `@media` の中に閉じてある. */

@media (max-width: 749px) {

	/* 🚨 **前後の巻へのリンクは携帯幅で隠す（ユーザー決定 D489・2026-09-19）。**

	   2026-09-07 の [Bug #4225] は「移行元のパソコン版の姿を携帯幅へ持ち込む」と
	   決め、隠す規則を外していた。**2026-09-19 のユーザーの目視でこれが覆り、
	   移行元の携帯版どおりに戻すことになった**（D489）。移行元の携帯版は
	   `mv_nav` そのものを持たない（`sp/introduce/happyreport/report_NN.html` を
	   数えて 0 件・パソコン版は 1 件）。

	   「一覧ページにもどる」は移行元の携帯版にも在るので残す。ただし置き場所は
	   「他のご夫婦の成功例」の**後ろ**なので、下の `pa-hrep-nav-sp` の節で
	   写した側を出す。

	   🚨 **この規則は写した側（`.pa-hrep-nav-sp`）にも当たる。**あちらも
	   `div.mv_nav` の写しなので、前後の巻へのリンクを内側に持っている. */
	.entry-content .mv_nav .pre,
	.entry-content .mv_nav .next {
		display: none;
	}

	/* 札 3 枚の浮きを、押しボタンではなく一覧自身に閉じさせる。
	   これを先に入れないと、次の規則で押しボタンを隠した瞬間に崩れる. */
	.entry-content .others .list_mv {
		display: flow-root;
		margin-bottom: 20px;
	}

	/* 札の右の空き 22px を落とす。左右に 6.25vw の空きを作ると、浮いた札の幅が
	   「使える幅 − 22px」に縮み、右端の札（`.last`）だけ 22px 広くなるため. */
	.entry-content .others .list_mv li {
		margin-right: 0;
	}

	/* 🚨 **「すべての記事を見る」は携帯幅で隠す（ユーザー決定 D489・2026-09-19）。**

	   2026-09-07 の [Bug #4226] は「移行元のパソコン版の姿を携帯幅へ持ち込む」と
	   決め、`display: none` を外していた。**2026-09-19 のユーザーの目視でこれが
	   覆り、移行元の携帯版どおりに戻すことになった**（D489）。移行元の携帯版に
	   この押しボタンは無い（この節の頭の「移行元スマホ版に無い部品」の一覧）。

	   🚨 **すぐ上の `display: flow-root` は残す。**もとは「押しボタンを隠すと
	   札 3 枚の浮きが閉じなくなる」ための対だった。押しボタンを隠す今は
	   その対が要る。

	   隠すと、札の一覧の下外余白 20px と「結婚活動のコツ」の上外余白 35px が
	   重なって（相殺されて）**35px** になる。これが #4226 より前の姿である。

	   🚨 **下に残っている #4226 の説明文（上下 35px の釣り合いと絵の大きさ）は
	   隠している間は効かない。**戻す判断が出たときの手がかりとして残してある.

	   ---- 以下は #4226 のときの説明（D489 で効かなくなった）----
	   もとは「押しボタンを隠すと
	   札 3 枚の浮きが閉じなくなる」ための対だったが、押しボタンを出したいまも
	   一覧自身に浮きを閉じさせておくほうが安全である（押しボタンの高さに
	   札の並びが左右されない）。実測でも札の一覧の高さは 305.81px で、
	   押しボタンを出す前と 1px も変わらない。

	   ## 上下の空きを 35px でそろえた理由（実測・幅 375px・巻 09）

	   隠していたときは、札の一覧の下外余白 20px と「結婚活動のコツ」の
	   上外余白 35px が重なって（相殺されて）**35px** になっていた。押しボタンを
	   出すと重なりが切れ、上が 20px・下が 50px（パソコン幅の値）になって
	   釣り合わない。そこで**上下とも 35px** にそろえる。35px は移行元スマホ版が
	   この区画で使っている値（`div.txtBtn_gray01.box.mt35`）である。

	     上 … `margin-top: 35px`（一覧の 20px と重なって 35px になる）
	     下 … `margin-bottom: 0`（次の「結婚活動のコツ」の 35px がそのまま出る）

	   ## 絵の大きさ

	   押しボタンは文字を焼き込んだ絵（`btn_all_off.jpg`・素の大きさ 352 x 48）で、
	   幅 375px の柱 328.13px に入りきらない。テーマの初期化が持つ
	   `img { max-width: 100% }` で 328.05 x 44.73 に収まる（実測・横のはみ出し 0）。
	   **柱いっぱいに引き伸ばさない**（`width: 100%` と書くと幅 749px で 655px まで
	   拡大され、素の 352px を超えてぼやける）。

	   🚨 **絵の当たり先は子孫（空白）で書く。**絵の差し替えは `<a>` の中を
	   `<a> > <picture> > <img>` に変えるので、`> img` の直下指定は包みが入ると
	   静かに空振りする（2026-09-07 に 7 班が 3 回踏んだ）. */
	/* 🚨 **この 35px は柱の比へ直さない（Bug #5331 で見直した結果）。**
	   移行元パソコン版の札の一覧の下は 40px なので、柱の比で写すと 11.93px になる。
	   しかしこの値は**次の「結婚活動のコツ」の上外余白 35px と釣り合わせるため**に
	   選んだものである（下の検査に理由が書いてある）。柱の比へ直すと、押しボタンの
	   上が 11.93px・下が 35px になって釣り合いが崩れる。**釣り合いのほうを採る. */
	.entry-content .others p.btn_all {
		display: none;
	}

	/* 記事の器から地色の帯を外す。移行元スマホ版は素の器で、地模様も上の罫線も
	   下の余白も持たない。上の内余白 30px は移行元 `div.report_body` の
	   上外余白 30px に合わせた値である. */
	.entry-content .wrap_movie {
		margin-bottom: 0;
		padding-top: 30px;
		padding-bottom: 0;
		border-top: 0;
		background: none;
	}

	/* 白い囲みを外す。移行元スマホ版に白い囲みは無い。
	   左右の内余白 6.25%（柱 87.5%）は前の PR で入れた値なので残す.

	   🚨 **`display: flow-root` を付ける。**上下の内余白を 0 にすると、いちばん下の
	   「ご夫婦のひとこと」の下外余白 40px が囲みの外へ抜け出し、「一覧ページに
	   もどる」の上外余白 2px を飲み込んで 40px にしてしまう（外余白の相殺）。
	   囲みを独立した箱にして、中の外余白を中に留める. */
	.entry-content .wrap_movie .bg_white {
		display: flow-root;
		padding-top: 0;
		padding-bottom: 0;
		background: none;
	}

	/* 本文の段落の間隔を移行元でいちばん多い 20px にそろえる。
	   下外余白を 0 にするのは、上下が足されて二重に空くのを防ぐためである. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .bg_white > *,
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .bg_white > .clearfix > * {
		margin-top: 20px;
		margin-bottom: 0;
	}

	/* いちばん上の要素だけは上を空けない。移行元も記事の本体の先頭に空きが無い. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .bg_white > *:first-child {
		margin-top: 0;
	}

	/* ご夫婦のひとことを移行元の金の囲み（`div.box_gold`）へ寄せる。
	   枠線・左右と上の内余白 20px・上下の外余白 40px は移行元の実測値である.

	   🚨 **下の内余白は書かない。**ここには写真を敷く指定（この下の生成物の節が
	   `padding-bottom: calc(…)` で場所を作る）が入っており、書くと写真が潰れる。
	   この選択子（詳しさ 1,3,0）は生成物（0,2,0）より詳しいので、書けば必ず勝つ。

	   🚨 **写真を上に敷いていたころは「上の内余白を書かない」が決まりだった。**
	   ユーザー裁定 D08（2026-09-04）で写真を文章の下へ移したので、書いてはいけない
	   側が上下で入れ替わっている。生成器の向きを変えたら、ここも必ず入れ替える. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) [class^="marriage_vol"][class$="_name"] {
		margin-top: 40px;
		margin-bottom: 40px;
		padding-top: 20px;
		padding-right: 20px;
		padding-left: 20px;
		border: 1px solid #a3762b;
	}

	/* 「一覧ページにもどる」を記事のすぐ下に置く。移行元は前の要素の下外余白だけで
	   上に空きを持たない（実測 29px = 文字 27px + 行の余り 2px）. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .mv_nav {
		margin-top: 2px;
	}

	/* 「他のご夫婦の成功例」の区画を移行元と同じ柱（画面の 87.5%）に収める。
	   下の内余白 30px は移行元に無いので落とす（下の「結婚活動のコツ」の
	   下外余白で移行元の 35px を作る）. */
	.entry-content .others {
		padding-right: 6.25vw;
		padding-bottom: 0;
		padding-left: 6.25vw;
	}

	/* 見出しと札の間。移行元は見出しの画像 36.84px の直後に札が来る。dev の
	   見出しは文字 28px なので、差の 8.84px を下外余白で埋める. */
	.entry-content .others .ttl {
		margin-bottom: 8.84px;
	}

	/* 「結婚活動のコツ」。移行元の携帯版の実測は次のとおり。

	     囲み `div.txtBtn_gray01.box.mt35` … 塊で出す・上外余白 35px・高さ 27px
	     押しボタン `a.serif`              … **塊で出す・幅 328.13px**・高さ 27px
	                                         内余白 5px 20px 5px 10px・字 11px
	                                         左そろえ・下外余白 4px
	     本文の器の下の内余白              … 20px（`#other_contents`）
	     帯の上外余白                      … 15px（`div.conv-banner`）

	   押しボタンの下から帯の上までは 4 ＋ 20 ＋ 15 = **39px** である。dev は帯を
	   本文の器の中に持つので、この 39px を囲みの下外余白で作る（押しボタンの
	   下外余白 4px は囲みの下外余白と重なるので、大きいほうの 39px が残る）。

	   🚨 **横並びを解く（Bug #7741）。**共通の規則
	   `:is(.entry-content, .page-content__body) .txtBtn_gray01`（`main.css` 72,729 行）は
	   `display: flex` ＋ `justify-content: center` で、押しボタンを中身の幅まで
	   縮める。移行元のパソコン版はそれで正しいが、**移行元の携帯版は塊で出して
	   柱いっぱいに広げる**。共通の規則に携帯幅の変種が無いため、この画面では
	   幅 154.64px のまま残っていた（移行元は 328.13px・差 173.49px。
	   2026-09-19 19:21 の実測・10 巻とも同じ）。

	   🚨 **共通の規則は書き換えない。**あちらは SEO 関連リンクの灰色の押しボタン
	   13 投稿が使う。この画面の囲み（`.others` の中）に限って上書きする。

	   写す値は成婚ストーリーの入口の同じ押しボタン
	   （`main.css` の `.pa-story-archive__related-link` の携帯幅の節）と同じである。
	   あちらも移行元 `sp/css/style.css` の `.txtBtn_gray01 a` から写している。

	   🚨 **字間と行の高さを素へ戻す。**テーマ共通の `letter-spacing: 0.04em` が
	   当たると同じ文言が横に広がり、行の高さが当たると 27px の箱が伸びる. */
	.entry-content .others .txtBtn_gray01 {
		display: block;
		margin-top: 35px;
		margin-bottom: 39px;
		text-align: left;
	}

	.entry-content .others .txtBtn_gray01 a {
		display: block;
		margin: 0 0 4px;
		padding: 5px 20px 5px 10px;
		font-size: 11px;
		letter-spacing: normal;
		line-height: normal;
		text-align: left;
	}

	/* 矢印の位置。移行元の携帯版は上 10px・右 10px（パソコン幅は上 12px・右 12px）. */
	.entry-content .others .txtBtn_gray01 a::before {
		top: 10px;
		right: 10px;
	}

	/* 🚨 **来店予約の帯（`div.box_support`）には触らない。**移行元スマホ版の帯
	   （`div.conv-banner`・399.72px・地色 rgb(254, 243, 224)・丸い絵 4 枚・
	   「来店予約」「資料請求」の押しボタン）へ寄せる直しは、5 班が全ページ共通の
	   Task #3189（PR #3227・マージ済み）で入れる。ここで余白や中身に触ると
	   その直しと衝突する。dev 独自の入れ替え式の写真 3 枚（`#box-photo`）も
	   同じ理由でこの節では隠さない. */

	/* 本文の器の下の内余白。移行元 `#other_contents` の
	   `padding: 0 0 20px`（`sp/css/style1227.css`）に合わせる. */
	.entry-content {
		padding-bottom: 20px;
	}
}


/* ==============================================================
 * 携帯幅の 3 か所を移行元スマホ版の意匠にそろえる（Bug #3083 の 5 本目・目視 V05）
 * ==============================================================
 *
 * ユーザーの目視（2026-09-04 12:0x JST・幅は携帯）の指摘は 3 点である。
 *
 *   ① コンテンツヘッダー「vol.◯ 〇〇さん・〇〇さんご夫婦の成功例」の意匠が違う
 *   ② ページ下部の「〇〇さん・〇〇さんご夫婦」の囲みの意匠が違う
 *   ③ 「一覧ページにもどる」「他のご夫婦の成功例」の意匠が違う
 *
 * ## 原因
 *
 * dev のこの 3 か所の組み立ては**移行元のパソコン版そのまま**である
 * （`h2.hrepCpl` / `marriage_volN_name` / `mv_nav` / `list_mv` は移行元 PC 版にも同じ形で
 * ある）。携帯幅でスマホ版の姿になっていないことが、指摘の実体である。
 *
 * ## 字の大きさをどう決めたか
 *
 * 🚨 **移行元スマホ版はこの 3 か所をすべて画像 1 枚で組んでいる。**だから「字の大きさの
 * 指定値」が存在しない。そこで次の 2 つを突き合わせて決めた。
 *
 *   1. 移行元の画像の中で、その文字の**墨（インク）が占める外形**を Pillow で測る
 *   2. dev の同じ文言を、同じ書体・太さ・字間で描いたときの墨の外形を
 *      canvas の `measureText` の `actualBoundingBox*` で測る
 *
 * 字の大きさを 0.5px 刻みで掃引し、幅と高さが移行元と合う値を選んだ。全実測は
 * `pa-verify-assets/3127/v05-typo-fit.md` にある。
 *
 * 🚨 **`Range.getClientRects()` では決められない。**あれが返すのは行の箱で、上下に
 * 書体固有の余白が付く。画像の墨とは測っているものが違う。
 *
 * ## なぜ `vw` で書くか
 *
 * 移行元スマホ版は画像を器の幅（画面の 87.5%）まで**伸縮させる**ので、焼き込まれた
 * 文字の大きさは**画面幅に比例する**。固定 px で書くと幅 375px でしか一致しない。
 * 値は幅 375px を基準に `px / 375 * 100` で直してある。
 *
 * 🚨 **「一覧ページにもどる」だけは固定 19.5px。**ここは移行元もテキストで組んでおり
 * （`p.fs_b a { font-size: 150% }` = 本文 13px の 1.5 倍）、画像ではないので伸縮しない。
 *
 * ## 字の詰め方（`font-feature-settings: "palt"` と `letter-spacing`）
 *
 * 🚨 **1 字ずつの大きさを合わせても、行の長さは合わない。**移行元の画像は**仮名を
 * 詰めて**組んである。1 字ごとの墨の幅は dev と合うのに、字と字の間隔が仮名で
 * 1 字あたり 2〜3px 狭い（漢字はほぼ同じ）。これは和文の字幅を字ごとに詰める
 * 指定（`palt`）の効き方と一致する。
 *
 * そこで **`palt` を入れて詰め、行の長さが合うところまで `letter-spacing` で
 * 戻す**（`palt` だけでは詰まりすぎる）。並べ撮りから墨の外形を Pillow で測って
 * 合わせた（幅 375px・巻 09）:
 *
 *   ① 題名の 2 行目   移行元 300.5px  素の dev 319.0  palt のみ 289.0  → 0.18vw を戻して 301.0
 *   ② 囲みの見出し     移行元 270.5px  素の dev 280.0  palt のみ 257.0  → 0.058em を戻して 270.5
 *
 * 🚨 **③ の 2 か所には入れない。**「他のご夫婦の成功例」の見出しは素の状態で
 * 移行元 184.5px に対し 182.5px と合っており、入れると外れる。
 *
 * ## 🚨 ② 囲みの見出しだけは `vw` では足りない
 *
 * ほかの 3 か所の絵は**本文の柱**（画面の 87.5%）まで伸びるので、焼き込まれた字は
 * 画面幅にそのまま比例する。ところが囲みの見出しの絵（`ttl_box_NN.png` 455x40）は
 * **囲みの中身の幅**まで伸びる。囲みは枠線 1px と内余白 20px を**固定値**で持つので、
 * 中身の幅は `画面の 87.5% − 42px` であり、画面幅には比例しない。
 *
 *   幅 375px  中身 286.13px → 移行元の字は 18.00px（`vw` で書いても合う）
 *   幅 749px  中身 613.38px → 移行元の字は 38.59px。`4.8vw` だと 35.95px で **7% 小さい**
 *
 * そこで中身の幅から直に計算する（`calc((87.5vw - 42px) * 18 / 286.13)`）。18px は
 * 幅 375px で移行元の墨に合わせた値である. */

@media (max-width: 749px) {

	/* ---------------------------------------------------------------
	 * ① コンテンツヘッダー `h2.hrepCpl`
	 * ---------------------------------------------------------------
	 *
	 * 移行元（`h3.hp_ttl > img ttl_09.png`・幅 375px）は器 x 23.44 / 幅 328.13 /
	 * 高さ 43.36 の **2 行**で、下の外余白は 16.41px（器の幅の 5%）である。
	 * dev は器が画面いっぱいで高さ 123 の **3 行**になっていた。字が 4 種とも
	 * 6〜8px 大きく、そのせいで「の成功例」が 3 行目へあふれる.
	 *
	 * 🚨 **器の高さが合っても、中の組みは合っていなかった（Bug #5325）。**
	 * 2026-09-09 に幅 375px で墨の広がりを測ると、**器の高さは移行元 43.36 対
	 * dev 43.98 でほぼ一致するのに、行と行の間が空いていなかった。**
	 *
	 *   | 測るもの（墨） | 移行元 | 直す前の dev | 直した後の dev |
	 *   |---|---:|---:|---:|
	 *   | `vol.N` の墨の高さ | 12.89 | 14.31 | 12.90 |
	 *   | **行間の空き** | **9.96** | **4.60** | **9.96** |
	 *   | 名前の墨の高さ | 19.92 | 19.79 | 19.80 |
	 *
	 * **名前の字はもともと合っていた**（19.79 対 19.92）。直すのは `vol.N` の字
	 * （1.42px 大きい）と、**行間の空き（5.36px 足りない）**の 2 つだけである。
	 *
	 * 🚨 **字の大小は `Range.getClientRects()` の高さで判定してはならない。**
	 * あの矩形は「字の箱」で、上下に行送りの余りを含む。箱で測ると名前の字が
	 * 22.00 対 19.92 と 2px 大きく見え、**合っている字まで小さくしてしまう**
	 * （2026-09-09 に実際にそう直しかけた）。dev 側は canvas の
	 * `actualBoundingBoxAscent` ＋ `actualBoundingBoxDescent` で墨を採る。
	 * 道具は `pa-verify-assets/f13-w21/title-ink.mjs`。
	 *
	 * 移行元の値は絵の中の墨を画素で測って出した（`ttl_<巻>.png`・560x74・
	 * 10 巻とも 2 行。行間は 15〜17px で、巻ごとの 2〜3px の違いは字形の違い）。
	 * 画面上の px へ直すには **器の幅 ÷ 絵の幅（328.13 ÷ 560）** を掛ける。
	 * 道具は `pa-verify-assets/f13-astra/ink-bands.py`。
	 * 🚨 **色型 3（パレット）の PNG は画素が色ではなく索引**なので、PLTE と tRNS を
	 * 読んで色へ直さないと墨の帯を取り違える（実際に踏んだ）。
	 *
	 * 選択子は `.wrap_movie` を足して詳しさを 1 段上げてある（素の
	 * `.entry-content .hrepCpl` は 0,2,0 なので、同じ詳しさでは打ち消せない）. */
	.entry-content .wrap_movie .hrepCpl {
		margin-right: 6.25vw;
		margin-bottom: 4.375vw;
		margin-left: 6.25vw;
		font-feature-settings: "palt" 1;
		font-size: 5.733vw;
		letter-spacing: 0.18vw;
		line-height: 1.1;
	}

	/* 🚨 **巻 02 だけ字送りを絞って 2 行に収める（Bug #5376・ユーザー決定 D47）。**
	   移行元は題名を 1 枚の絵（`ttl_<巻>.png`・560x74）で組むので 10 巻とも 2 行だが、
	   dev は実テキストで組むため**夫婦名の長い巻 02 だけ「の成功例」が 3 行目へ落ちた**
	   （器の高さ 71.00px 対 ほかの 9 巻 47.36px）。

	   ## 字ではなく字送りを絞る理由

	   Bug #5325 で 1 行目の墨 12.89・行間 9.96・2 行目の墨 19.92 を移行元の絵の画素に
	   合わせたばかりである。**字を小さくすると墨がずれる。**字送りなら glyph の
	   大きさが変わらないので、**墨の高さを保ったまま行の長さだけを詰められる。**

	   ## 幅 375px の実測（`pa-verify-assets/f13-w21/fit-vol2-title.mjs`）

	     字送り 0.18vw（いま）… 器 71.00 … 🚨 3 行
	     字送り 0.09vw        … 器 47.36 … 2 行（**境目**）
	     **字送り 0.05vw（採用）… 器 47.36 … 2 行**
	     字送り 0vw 以下      … 器 47.36 … 2 行

	   墨の高さは 6 通りとも 12.88 / 19.79 で動かない。**陰性対照の巻 01（名前 8 字）と
	   巻 09（7 字）は 6 通りとも 47.36 のまま**で、2 行から動かない。

	   0.09vw が境目なので、丸めの差で戻る余地を避けて **0.05vw** を採る
	   （2 行目の墨の幅が 265.70 → 263.28 で 2.4px ぶん余裕が増える）。

	   🚨 **「墨が器に収まっているから折り返さない」とは言えない。**折り返さずに置いた
	   ときの墨の幅は **271.11px** で、使える幅 **328px** より小さいのに折り返していた。
	   折り返しは**送り幅**（字ごとの送り＋字送りの足し上げ）で決まり、墨の幅には
	   字の左右の余白と末尾の字送りが入らないためである。**判定は器の高さで見る。**

	   🚨 **`.wrap_movie #hrep02` と書くと不発になる。**この 2 つは**同じ要素**に付いて
	   いる（`<section class="wrap_movie" id="hrep02">`）ので、子孫の書き方では当たらない。
	   実ページの組みを取って確かめた（2026-09-09 19:5x・幅 375px）。
	   ここでは巻だけで絞る（`#hrep02` は 1 ページに 1 つ）。詳しさは (1,2,0) で、
	   上の `.entry-content .wrap_movie .hrepCpl`（0,3,0）に id の分だけ勝つ. */
	.entry-content #hrep02 .hrepCpl {
		letter-spacing: 0.05vw;
	}

	/* `vol.N` の色は移行元が rgb(163,118,43)。dev は rgb(158,116,58) で 3 つとも違う.

	   詳しさは 0,4,0 で、下の「さん」の規則（0,3,1）より 1 段上にある。クラスの数が
	   多いほうが勝つので、`.vol` までいっしょに小さくなることは無い.

	   🚨 **下の外余白は「行の箱の余り」を引いた残りである（Bug #5325）。**
	   移行元の絵は `vol.N` の墨の下端から名前の墨の上端までを **17px**（絵の中）
	   空けている。画面上では器の幅 ÷ 絵の幅を掛けて 9.96px になる。
	   行の箱には行送りの余りが入るので、**空き = 余白 + 上下の箱の余り** である。
	   余白 0 のときの空きが 4.60px だったので、残りの 5.36px を外余白として書く
	   （5.36 ÷ 375 × 100 = 1.429vw。字を 4.443vw へ小さくすると箱の余りも減るので、
	   幅 375px で測り直して **1.444vw** に落ち着いた）。

	   字は移行元の墨 12.89px に合わせて **4.443vw**（幅 375px で 16.66px）とした。
	   直す前の 4.933vw は墨が 14.31px で 1.42px 大きい. */
	.entry-content .wrap_movie .hrepCpl .vol {
		margin-bottom: 1.444vw;
		color: #a3762b;
		font-size: 4.443vw;
	}

	/* 「さん」（2 か所）。移行元は名前より小さい. */
	.entry-content .wrap_movie .hrepCpl span {
		font-size: 3.333vw;
	}

	/* 「の成功例」。移行元は「さん」よりわずかに大きい. */
	.entry-content .wrap_movie .hrepCpl span:last-of-type {
		font-size: 3.6vw;
	}

	/* ---------------------------------------------------------------
	 * ② ご夫婦の囲み `[class^="marriage_vol"][class$="_name"]`
	 * ---------------------------------------------------------------
	 *
	 * 移行元（`div.box_gold`）の中身の並びは **見出し → 写真 → 本文** である。
	 * dev はパソコン版の作りを受け継いで写真を**器の背景**に敷いており、
	 * PR #3351 で下へ移したあとは **見出し → 本文 → 写真** になっていた.
	 *
	 * 🚨 **背景の写真はパソコン版の絵**（`title_N_bgMM.jpg`）で、移行元スマホ版が
	 * 使う絵（`sp/.../pic_N_MM.jpg`・180x180 の正方形）とは**別のファイル**である。
	 * そこで携帯幅では背景を消し、本文の `p` の `::before` にスマホ版の絵を敷く。
	 * スマホ版の絵はテーマ資産（`assets/sp/introduce/happyreport/images/`）に置いた
	 * （投入は本文の `<img>` が指す絵しか取り込まないので、投入には任せられない）.
	 *
	 * 🚨 **写真を背景に敷く生成物の指定は、生成器の側で対象から外してある**
	 * （`hr-photo-stack-build.py`。囲みの 4 規則＝巻 3 / 8 / 9 / 10 が対象外）。
	 * ここで二重に出さないための対である. */

	/* 上下の外余白・内余白・枠線は前の PR で移行元に合わせてある。ここで足すのは 4 つ.

	   🚨 **`padding-bottom` を書いてよくなった。**以前は写真を敷く生成物が
	   `padding-bottom: calc(…)` で場所を作っていたので「書いてはいけない」側だった。
	   生成物から囲みを外したので、移行元の 20px をそのまま書く.

	   🚨 **`margin-left` と `width` を戻す。**巻 4 は `margin: 30px 0 0 206px`、
	   巻 5 は `margin: 40px 0 0 48px` と `width: 537px` をパソコン版から受け継いでおり、
	   携帯幅の既存の規則は上下の外余白しか書いていなかった。そのため幅 375px で
	   器が 122.13px（巻 4）と 280.13px（巻 5）に細っていた. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) [class^="marriage_vol"][class$="_name"] {
		width: auto;
		margin-left: 0;
		padding-bottom: 20px;
		background-image: none;
	}

	/* 見出し。移行元は行頭に**ハート 2 つ**を置き、下に**金の細い罫線**を 1 本引く
	   （`ttl_box_NN.png` の意匠。10 巻とも同じ絵であることをバイト比較で確認した）。
	   dev はどちらも持っていなかった.

	   寸法は見出しの字（移行元の墨から 18px と確定）を基準に `em` で書く。こうすると
	   字を `vw` で伸縮させたとき、ハートと文字の始まりの位置がいっしょに動く。
	   移行元の幅 375px での値: ハート 23.9 x 15.7px・文字の始まりは左端から 28.3px. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) [class^="marriage_vol"][class$="_name"] p.name {
		position: relative;
		padding-bottom: 0.361em;
		padding-left: 1.572em;
		border-bottom: 1px solid #a3762b;
		font-feature-settings: "palt" 1;
		font-size: calc((87.5vw - 42px) * 18 / 286.13);
		font-weight: 400;
		letter-spacing: 0.058em;
		line-height: 1;
	}

	/* 🚨 **巻 2 だけ字間を詰める。**移行元の 10 枚の絵は文字の墨の高さが 28px でそろって
	   いて、**巻ごとに字を小さくしてはいない**。名前が長い巻 2（16 字）は、455px の画布に
	   ちょうど収まる形で組まれている（文字の墨 409px = 画布の 89.9%）。

	   dev は同じ文言が 268.63px になり、柱 257.8px に収まらず 2 行になる（囲みが 18px
	   高くなり、金の罫線の位置もずれる）。字間を 0.058em → 0.01em にすると 1 行に収まり、
	   移行元の目標 257.20px との差はほかの 9 巻（−1.67〜+9.00px）と同じ幅に収まる。

	   🚨 **当たり先の書き方を上の規則からそのまま写している。**上は属性を 2 個持つので
	   `.marriage_vol2_name p.name` だけでは詳細度で負け、字間が 1 度も効かない
	   （実際に 2 回書き直した）。写真を巻ごとに当てる下の 10 本は、上の規則が
	   `background-image` を書いていないため競わず、短い書き方で当たる. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) [class^="marriage_vol"][class$="_name"].marriage_vol2_name p.name {
		letter-spacing: 0em;
	}

	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) [class^="marriage_vol"][class$="_name"] p.name::before {
		content: "";
		position: absolute;
		top: 0.22em;
		left: 0;
		width: 1.328em;
		height: 0.872em;
		background-image: url("../../sp/introduce/happyreport/images/ttl_box_heart.png?ver=89e70d8dc16e");
		background-repeat: no-repeat;
		background-position: left top;
		background-size: contain;
	}

	/* 写真。移行元は `p.pic_s { width: 40%; margin: 20px auto }` で、正方形の絵を
	   器の 40% の幅で中央に置く。dev は要素として持たないので、本文の `p` の
	   `::before` を写真の場所にする。**見出しの次・本文の前**に出るので、
	   移行元と同じ「見出し → 写真 → 本文」の並びになる.

	   絵そのものは巻ごとに違うので、下の巻別の規則で指す. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) [class^="marriage_vol"][class$="_name"] p.name + p::before {
		content: "";
		display: block;
		width: 40%;
		margin: 20px auto;
		aspect-ratio: 1;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	/* 巻ごとの写真。移行元スマホ版の `div.box_gold` の中の `p.pic_s > img` が指す絵で、
	   10 枚とも 180x180 の正方形である。**巻ごとに番号が違う**（`pic_N_11.jpg` で
	   そろってはいない）。`report_01_191127` は `marriage_vol1_name` を使うので、
	   巻 1 の指定がそのまま効く（11 ページを 10 規則でまかなえる）. */
	.entry-content .marriage_vol1_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_1_05.jpg?ver=82c150d657a2");
	}

	.entry-content .marriage_vol2_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_2_06.jpg?ver=1197397308a6");
	}

	.entry-content .marriage_vol3_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_3_06.jpg?ver=03374af77c61");
	}

	.entry-content .marriage_vol4_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_4_05.jpg?ver=23f431f68dd5");
	}

	.entry-content .marriage_vol5_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_5_06.jpg?ver=d0e42ca71b6e");
	}

	.entry-content .marriage_vol6_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_6_07.jpg?ver=e8c2ea24d89d");
	}

	.entry-content .marriage_vol7_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_7_07.jpg?ver=585509374103");
	}

	.entry-content .marriage_vol8_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_8_08.jpg?ver=29bd9bf11ac0");
	}

	.entry-content .marriage_vol9_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_9_11.jpg?ver=be22da4e2225");
	}

	.entry-content .marriage_vol10_name p.name + p::before {
		background-image: url("../../sp/introduce/happyreport/images/pic_10_14.jpg?ver=2f23257b6c6c");
	}

	/* ---------------------------------------------------------------
	 * ③-1 「一覧ページにもどる」 `div.mv_nav`
	 * ---------------------------------------------------------------
	 *
	 * 移行元は `p.tac.fs_b > a` の 1 本だけで、器 x 23.44 / 幅 328.13 / 高さ 29、
	 * 字は 19.5px（本文 13px の 150%）である。dev は器が画面いっぱいで字が 15px
	 * だった。前後の巻へのリンクを隠すのは前の PR で入れてある. */
	/* 🚨 **字は「画面の 4.8% と 18px の小さいほう」（Bug #4225 で 19.5px から下げた）。**
	   移行元スマホ版は「一覧ページにもどる」1 つだけなので 19.5px で収まっていたが、
	   前後の巻へのリンクを足すと 3 つ並ぶ。**幅 375px で 3 つ並べたときに残る隙間を
	   実測して決めた**（巻 09 が最も狭い。次が 2 桁の `vol.10` になるため）。

	     19.0px … 左右の隙間 0.61px（収まるが余裕が無い）
	     18.5px … 左右の隙間 4.92px
	     **18.0px … 左右の隙間 9.22px（採用）**
	     17.5px … 左右の隙間 13.53px

	   巻 01 は前が無く・巻 10 は次が無いので、巻 09 が収まれば全 10 巻が収まる。

	   🚨 **375px より狭い画面では固定 18px だと折り返す。**左右の空きは `6.25vw`
	   なので柱は画面に比例して縮むのに、固定 px の字は縮まない。幅 320px では柱が
	   47px 狭くなる一方、375px で残る隙間は 9.22px しかないため足りない。実測でも
	   **10 巻のうち 8 巻（3 つ並ぶ巻すべて）が 2 行になった**（2026-09-07）。
	   そこで `min(4.8vw, 18px)` にする。

	     幅 375px … 4.8vw = 18px なので、これまでと同じ 18px
	     幅 375px 未満 … 柱と同じ割合で字も縮むので、隙間の割合が変わらない
	     幅 375px 超 … 18px で頭打ち。柱だけが広がるので隙間が増える

	   **`4.8vw` だけにしない。**幅 749px で 35.95px まで拡大され、移行元より
	   大きくなる。道具は `pa-verify-assets/f13-recheck/hrep-sp-nav-size.mjs` と
	   `hrep-sp-nav-check.mjs`. */
	/* 🚨 **字と空きの基準を移行元パソコン版へ移した（Bug #5331・ユーザー指摘）。**
	   上の `min(4.8vw, 18px)` は「3 つ並べて幅 375px に収まる大きさ」だけを根拠に
	   していた。移行元スマホ版に前後の巻へのリンクが無いので、3 つ並べる形そのものが
	   移行元に存在せず、**意匠の裏付けが無かった。**ユーザーの目視で
	   「ページャーテキスト大きすぎる」「他のご夫婦の成功例とのスペースがない」と
	   指摘された（2026-09-09 17:3x）。

	   ## 統合したページの携帯幅の決め方（司令塔の裁定・2026-09-09）

	   移行元スマホ版に相手が無い区画は、**移行元パソコン版の本文を 375px の柱へ
	   組み直す。**そのとき比率の取り方を 2 つに分ける。

	     **字は本文の字に比例させる**（柱の比で縮めない）
	     **寸法は柱の幅に比例させる**

	   🚨 **字を柱の比で縮めると読めない。**移行元パソコン版の柱 1100px 対
	   dev の柱 328.13px は 0.2983 倍なので、15px の字が 4.47px になる。
	   逆に**空きを本文の比で写すと下が 120px** になり、携帯幅では画面の高さの
	   3 分の 1 近くを占める。

	   ## 移行元パソコン版の値（`introduce/happyreport/css/style.css`）

	     `.mv_nav`        margin-top: 30px / font-size: 15px
	     `.bg_white`      font-size: 16px（本文の器）
	     `.inner_wrap_v`  width: 1100px（柱）
	     `.wrap_movie`    padding: 50px 0 / margin-bottom: 70px（巻の器）

	   **巻の送りから「他のご夫婦の成功例」までの空きは 120px** である
	   （巻の器の下の内余白 50 ＋ 下の外余白 70）。上は 30px。

	   ## 写した値

	     字   15 ÷ 本文 16 = **0.9375** → `calc(var(--pa-article-font-size) * 0.9375)`
	     上   30 ÷ 1100 × 328.13 = 8.95px → 375px の **2.387vw**
	     下   120 ÷ 1100 × 328.13 = 35.79px → 375px の **9.544vw**

	   🚨 **字は px で直書きしない。**本文の字の基準は携帯幅で 15px だが、
	   15 班の Task #5322 で 13px へ変わる。変数から計算すれば追従する。

	   ## 🚨 移行元スマホ版の 19.5px は 3 つ並びでは使えない（2026-09-09 に実測）

	   移行元スマホ版にも「一覧ページにもどる」は在り、字は 19.5px（本文 13px の
	   150%）である。しかし**そこは 1 本しか無い。**dev はパソコン版の並びなので
	   3 つ並ぶ。幅 375px で字だけ 19.5px にすると、**中央と右が 46.63px 重なる。**

	     19.5px … 中央と右が **−46.63px**（重なる）
	     16.0px … 隣どうしの隙間 26.42px
	     15.0px … 隣どうしの隙間 35.03px
	     **14.0625px（採用）… 隣どうしの隙間 43.11px**

	   ## 狭い画面でも 1 行に収まる（2026-09-09 に実測）

	   固定 18px は幅 320px で 2 行になっていた。14.0625px なら収まる。

	     幅 320px … 1 行・隙間 19.04px    幅 375px … 1 行・隙間 43.11px
	     幅 360px … 1 行・隙間 36.54px    幅 749px … 1 行・隙間 206.73px

	   道具は `pa-verify-assets/f13-w21/dev-tail-variants.mjs` と `narrow-nav.mjs`。

	   🚨 **15 班の Task #5322 で本文が 13px になると、この字は 12.19px になる。**
	   そのときも 1 行に収まる（14.0625px で幅 320px の隙間が 19.04px あり、字が
	   小さくなれば隙間は広がるだけである）。**ユーザーの再目視で「小さい」と出たら、
	   この値を上げて戻せる。**戻すときの目安は上の実測表を使うこと. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .mv_nav {
		margin-top: 2.387vw;
		margin-right: 6.25vw;
		margin-bottom: 9.544vw;
		margin-left: 6.25vw;
		font-size: calc(var(--pa-article-font-size) * 0.9375);
		line-height: normal;
	}

	/* 🚨 **下線を戻す。**移行元スマホ版の素の指定は `a { text-decoration: underline }`
	   （`sp/css/style.css` の 4〜7 行）で、この行き先を打ち消す規則は無い。dev は
	   テーマの初期化で下線を外しているので、ここだけ戻す. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .mv_nav a {
		text-decoration: underline;
	}

	/* 🚨 **並びを移行元パソコン版にそろえる（Bug #4225・2026-09-07）。**
	   送りは「他のご夫婦の成功例」の**前**に出す。

	   ## もとの姿と、なぜ変えたか

	   Task #3373 は**移行元スマホ版**の並び（他のご夫婦 → 一覧へもどる）に
	   合わせるため、`inc/introduce-happyreport.php` が `div.mv_nav` を写して
	   `section.others` の直後へ置き（`div.mv_nav.pa-hrep-nav-sp`）、携帯幅では
	   **元の側を隠して写した側を出して**いた。入れ子の段が違って `order` が
	   届かないためである。

	   **ユーザーの指示で、移行元パソコン版の姿を携帯幅へ持ち込むことになった**
	   （裁定 254 と同じ扱い）。そこで**出し分けを逆向きにする**。元の側は
	   `section#hrepNN` の中、つまり「他のご夫婦の成功例」より前にあるので、
	   これを出せば並びがパソコン版と同じになる。

	   🚨 **写す仕組み自体は残す。**`inc/introduce-happyreport.php` を触らずに
	   CSS だけで閉じるほうが影響が小さい（司令塔の承認・2026-09-07）。
	   写した側はどの幅でも出さない。

	   ## 🚨 2026-09-19 のユーザー決定 D489 で、また移行元の携帯版へ戻した

	   ユーザーの目視（2026-09-19 19:0x）で「一覧ページにもどる」の置き場所が
	   移行元の携帯版と違うと指摘され、**#4225 の判断が覆った**（D489・19:4x）。
	   そこで出し分けを Task #3373 の向きへ戻す。元の側（`section#hrepNN` の中）を
	   隠し、写した側（`section.others` の直後）を出す。

	   写した側は `section#hrepNN` の**外**にあるので、上の `:is(#hrepNN)` 付きの
	   2 本が当たらない。値をここへ書き出す。

	   字の 19.5px は移行元の携帯版の実測である（この節の頭の一覧の
	   `p.tac.fs_b`）。#4225 の間は 3 つ並べる必要があって 14.0625px まで下げていたが、
	   **D489 で並ぶのは「一覧ページにもどる」1 つだけに戻った**ので、移行元の値を
	   そのまま使える。

	   🚨 **字は px で直書きしない。**移行元の 19.5px は本文 13px の 150% なので、
	   本文の字の変数から計算する（15 班の Task #5322 で本文が変わっても追従する）. */
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .mv_nav {
		display: none;
	}

	.entry-content .pa-hrep-nav-sp {
		display: block;
		margin-top: 2px;
		margin-right: 6.25vw;
		margin-left: 6.25vw;
		font-size: calc(var(--pa-article-font-size) * 1.5);
		line-height: normal;
		text-align: center;
	}

	/* 🚨 **札の文字を移行元スマホ版と同じ位置で折り返す（Task #3373）。**
	   `inc/introduce-happyreport.php` が「・」の直後へ入れた改行を、携帯幅だけ出す。
	   10 巻とも位置が同じなので巻ごとの対応表は要らない. */
	.entry-content .others .list_mv li a .pa-hrep-card__brsp {
		display: block;
	}

	/* ---------------------------------------------------------------
	 * ③-2 「他のご夫婦の成功例」の見出し `h2.ttl`
	 * ---------------------------------------------------------------
	 *
	 * 移行元（`ttl_other.png`）は高さ 36.84 で、**文字の下に金の横罫線が 1 本**、
	 * 器の幅いっぱいに入る（幅 375px で太さ 2.34px）。dev はこの罫線を
	 * 丸ごと持っていなかった（`::before` も `::after` も無い）.
	 *
	 * 🚨 **字間 0.1em を外す。**移行元の画像に字間の詰めは無く、字間を残したままだと
	 * 幅を合わせるのに字が 19px まで小さくなり、高さが 5% ずれる（実測）. */
	.entry-content .others .ttl {
		margin-bottom: 0;
		padding-bottom: 3.733vw;
		border-bottom: 0.625vw solid #a3762b;
		font-size: 5.467vw;
		letter-spacing: normal;
	}

	/* ---------------------------------------------------------------
	 * ③-3 他のご夫婦の札 `ul.list_mv > li > a`
	 * ---------------------------------------------------------------
	 *
	 * 移行元（`thumb_NN.png`）は **横組み**の 1 枚絵である（左に写真・右に文字 3 行・
	 * 右端に「>」・地色なし）。1 枚 101.95px で 3 枚が隙間なく縦に並ぶ。
	 * dev は **縦組み**（上に写真・下に文字）で 1 枚 306.19px、地色 rgb(249,249,249)
	 * が付き、3 枚で 918.56px あった（移行元より 612.7px 高い。V05 で最大の差）.
	 *
	 * 幅 375px での移行元の位置（器 328.13px に対する割合）:
	 *
	 *   写真          x 0..106.1（幅 32.34%）・上下の空き 18.75px（5.71%）
	 *   文字の左端    121.9（37.15%）＝ 写真の右に 4.81% の空き
	 *   右端の「>」   右端から 1.2px（0.37%）・4.7 x 8.2px
	 *
	 * 🚨 **要素名で狙うと外れる。**投入で `<a>` 直下の `<p>` が `<span>` へ変わって
	 * いるので（Issue #1496）、上の既存の規則と同じく**役割**で狙う. */
	.entry-content .others .list_mv li {
		float: none;
		width: auto;
	}

	/* 🚨 **上下の空きは移行元の 5.71% でなく 4.28% にする。**移行元の札の文字は画像に
	   焼き込まれていて、絵は墨（グリフの外形）で切り取られている。dev の文字は行の箱で
	   積まれるので、1 行目の上と 3 行目の下に行間の半分（約 4.7px）が余分に付く。
	   同じ 5.71% を当てると札が 103.41px（移行元 101.95px）になる。差の 4.7px を空きから
	   引くと、札の高さも墨の位置も移行元にそろう（幅 375px で 101.97px）. */
	.entry-content .others .list_mv li a {
		display: flex;
		position: relative;
		align-items: center;
		padding: 4.28% 0;
		background-color: transparent;
		font-size: 4.267vw;
		line-height: 1.54;
	}

	/* 写真の入れ物。移行元の写真は 106.1 x 65.1px（縦横比 1.63）で、dev の
	   `mv_thumb_NN.jpg` は 352x218（1.615）とほぼ同じ形である。

	   🚨 **「だから切り取り直しは要らない」と書いていたが、それは vol.9 だけを見た
	   過度な一般化だった**（Task #3373 で 10 巻を測って判明）。縦横比は 10 巻とも近いが、
	   **vol.8 だけは移行元スマホ版が寄った別の切り取り**を使っている。差し替えは
	   `inc/sp-image-swap.php` の対応表で 1 枚だけ行う. */
	.entry-content .others .list_mv li a > *:first-child {
		flex: 0 0 32.34%;
		width: 32.34%;
	}

	/* 🚨 **写真を塊にする。**素の指定は `vertical-align: baseline` で、パソコン幅の
	   札の高さを移行元に合わせるための値である（Bug #2852）。並びのままだと文字の
	   下がり分（約 5px）が絵の下に付き、札が移行元より 5px 高くなる。

	   🚨 **`width: 100%` は器より小さい絵のために要る。**vol.8 の差し替え先は
	   197px 幅の切り出しなので、幅 749px では器 211.94px に足りない。テーマの素の指定は
	   `max-width: 100%` だけで、**足りない絵を伸ばさない**（実測で 197.00px のまま止まり、
	   右に隙間が空いた）。移行元は 560px の絵を 655.38px まで伸ばすので、伸ばす側が正しい。

	     いまの dev            幅 375px 106.08x65.70   幅 749px 211.92x131.25
	     切り出しを当てただけ  幅 375px 106.09x65.17   幅 749px 197.00x121.00（伸びない）
	     `width: 100%` を足す  幅 375px 106.11x65.17   幅 749px 211.94x130.17
	     移行元スマホ版        幅 375px 106.06x65.04   幅 749px 211.8x129.9

	   包み（`<picture>`）には何も要らない。差し替えの仕組みは `<img>` を `<picture>` で
	   包むが、**包んでも札の高さも写真の寸法も 1px も変わらない**ことを実測で確かめた. */
	.entry-content .others .list_mv li a > *:first-child img {
		display: block;
		width: 100%;
	}

	/* 説明文の入れ物。右の空きは「>」の場所である。

	   🚨 **右の空きは 8% ではなく 2%（Task #3373）。**8% にしていたので柱が 180.0px
	   しかなく、移行元と同じ位置で折り返させると 3 行目（「〇〇さんご夫婦の成功例」）が
	   入りきらず 4 行になった。

	   値は**移行元の絵そのもの**から取った。`sp/introduce/happyreport/images/thumb_NN.png`
	   は札 1 枚を丸ごと焼き込んだ 560px 幅の絵で、10 枚とも次の形にそろっている
	   （不透明な画素の範囲を Pillow で測った値・札の幅に対する割合）。

	     写真          0 〜 31.79〜32.32%
	     文字の左端    37.14%（`vol.N` の墨が 10 枚とも 210〜211px = 37.50%）
	     3 行目の右端  最大 97.50%（巻 2「きょうこさんご夫婦の成功例」= 13 字）
	     「>」の左端   98.39%（551px。10 枚とも同じ位置）

	   つまり移行元の柱は「文字の左端 37.14% 〜 矢印の左端 98.39%」の **61.25%** で、
	   折り返しの限界は矢印である。右の空きを 2% にすると柱は 60.85%（幅 375px で
	   199.66px）になり、巻 2 の 13 字の送り 198.80px がちょうど収まる。

	   🚨 **前の版は「移行元の右端は 95.54%」と書いていたが誤りである。**並べ撮りの
	   画像から測った値で、絵そのものより 2px 内側に出ていた。**焼き込みの絵がある
	   ときは、撮った画面ではなく絵を測る。**

	   🚨 **折り返しは「墨」ではなく「送り」で決まる。**巻 2 の 3 行目は墨では
	   197.2px（移行元 196.88px・差 +0.3px）だが、送りは 198.80px ある。墨で柱を
	   決めると 1 字だけあふれる。

	   「>」は `right: 0.37%` に幅 1.6vw で置いてあるので x 320.9〜326.9（97.79〜99.63%）
	   に居る。柱の右端 98.0% は移行元の文字の最大 97.50% と矢印の 98.39% の間に入る. */
	.entry-content .others .list_mv li a > *:last-child {
		flex: 1 1 auto;
		padding: 0 2% 0 4.81%;
		font-size: inherit;
	}

	/* `vol.N`。移行元は**金茶の文字**で、地色の札にはなっていない。
	   dev は白抜きの字に `#9e743a` の地色を敷いていた. */
	.entry-content .others .list_mv li a .serif {
		margin-bottom: 0;
		padding: 0;
		background-color: transparent;
		color: #a3762b;
		font-size: 4vw;
		letter-spacing: normal;
	}

	/* 🚨 **「の成功例」も画面幅に比例させる（Task #3373）。**素の指定は `14px` の固定値
	   （302 行）で、画面幅が変わっても大きさが変わらない。移行元は札全体を 1 枚の絵で
	   組んでいるので、この 4 文字も画面幅に比例する。

	   固定値のままだと幅 320px で本文（13.65px）より大きくなり、3 行目が入りきらずに
	   「〇〇さんご夫婦」と「の成功例」で 2 行に割れた（11 巻のうち 8 巻）。

	   3.653vw は幅 375px で 13.7px。移行元の墨 52.15px に合わせた値である
	   （10 枚の絵で 52.15 x 11.72 にそろっていた）. */
	.entry-content .others .list_mv li a > *:last-child > span:last-child {
		font-size: 3.653vw;
	}

	/* 指を乗せたときも地色を出さない（上の `:hover` の規則の対）. */
	.entry-content .others .list_mv li a:hover .serif {
		background-color: transparent;
	}

	/* 右端の「>」。移行元は細い線の山かっこで、dev には無かった。
	   正方形の右上の 2 辺だけを引いて 45 度まわすと山かっこになる。
	   一辺 1.6vw（幅 375px で 6px）をまわすと 4.24 x 8.49px になり、移行元の
	   4.7 x 8.2px にほぼ重なる. */
	.entry-content .others .list_mv li a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0.37%;
		width: 1.6vw;
		height: 1.6vw;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		transform: translateY(-50%) rotate(45deg);
	}
}

/* ===== ここから下は build-sp-photo-css.py の生成物
 * ==============================================================
 * 携帯幅は移行元スマホ版の本文の写真を出す（Bug #3589・ユーザーの目視の指摘 S05）
 * ==============================================================
 *
 * 移行元はパソコン版とスマホ版で**本文の写真そのものが違う**。パソコン版は器の背景に
 * 大きな絵を敷いて文章をその横へ 100〜350px の内余白で逃がすが、スマホ版は文章の
 * 合間に小さな写真（`p.sub_pic > img`・柱の 53%）を 1 枚ずつ置く。dev はパソコン版の
 * 本文だけを取り込んでいるので、携帯幅でもパソコン版の絵が出ていた。
 *
 * 🚨 **「完全移植は見送り」の裁定（2026-09-04 03:1x）は撤回されている。**見送りの
 * 理由は「スマホ版の絵が dev に 1 枚も投入されていない」ことだった。2026-09-05 の
 * ユーザーの目視の指摘を受けて主役の絵 3 枚を投入し（#3597）、本文の写真 75 枚も
 * `assets/sp/introduce/happyreport/images/` へ入れた。前提が変わったので、
 * 携帯幅はスマホ版の写真を出す。
 *
 * 組み方
 *
 *   節 A … パソコン幅で背景を持つ器 74 個から、背景と横の内余白と最低の高さを落とす。
 *           携帯幅ではこの絵を 1 枚も使わない
 *   節 B … 移行元スマホ版の写真 65 枚を、器か段落の疑似要素として出す。移行元の
 *           `.report_body .sub_pic { margin: 0 auto 20px; width: 53% }` に合わせて
 *           柱の 53% で中央に置く。上下の空きも移行元スマホ版の実測で、
 *           下は 65 枚とも 20px、上は 20px が 52 枚・25px が 8 枚・50px が 5 枚
 *
 * 当たり先の決め方（詳しくは `tests-retired/pa-cms-happyreport-sp-photos/photo-placement.json`）
 *
 *   1. 移行元スマホ版の `p.sub_pic` の直前にある文章（末尾 16 字）を取る
 *   2. dev の同じ巻で、その文章を含むいちばん内側の要素を探す
 *   3. その要素の中身を**文書順**に並べ、文章が終わるノードの直後へ当てる
 *
 * 🚨 **「器の末尾」だけで済ませない。**パソコン版は複数の段落を 1 つの器にまとめる
 * ことがあり、そこで器の末尾に置くと写真が数段落ぶん下へずれる。
 *
 * 🚨 **地のテキストと子要素の前後を、`xpath("./text()")` のようなまとめ読みで
 * 決めない。**巻 10 の `.p04` は `<span>…</span><br> 地のテキスト` の順で、地の
 * テキストが先だと思い込むと写真が段落の前へ出る（実際に 1 度そう出した）。
 *
 * 🚨 **写真の対応は文言だけでは決まらない。**絵そのものを見比べて決めてある。
 * 文言だけで組んだ第 1 版は巻 1 で誤っていた。
 *
 * 🚨 **この節は生成物である。**手で直すと次の生成で消える。値を変えるときは
 * `tests-retired/pa-cms-happyreport-sp-photos/build-sp-photo-css.py` と、その表を直す。
 *
 * 生成した規則の数: 節 A 1 本（当たり先 74 個）／`.pa-hrep-pic` 2 本／節 B 65 本 + 共通 1 本 */

@media (max-width: 749px) {
	/* 節 A: パソコン版の背景を落とす。
	   `min-height` と左右の内余白は、絵を横に置くために付いていた値なので一緒に落とす。
	   下の内余白も落とす（写真は下の節が疑似要素で作る）. */
	.entry-content #hrep01 .p01,
	.entry-content #hrep01 .p02,
	.entry-content #hrep01 .p03,
	.entry-content #hrep01 .p04,
	.entry-content #hrep01 .p05,
	.entry-content #hrep01 .p06,
	.entry-content #hrep01 .p07,
	.entry-content #hrep01 .p08,
	.entry-content #hrep02 .p01,
	.entry-content #hrep02 .p02,
	.entry-content #hrep02 .p03,
	.entry-content #hrep02 .p04,
	.entry-content #hrep02 .p05,
	.entry-content #hrep02 .p06,
	.entry-content #hrep02 .p07,
	.entry-content #hrep03 .p01,
	.entry-content #hrep03 .p02,
	.entry-content #hrep03 .p02-2,
	.entry-content #hrep03 .p03,
	.entry-content #hrep03 .p04,
	.entry-content #hrep04 .p01,
	.entry-content #hrep04 .p02,
	.entry-content #hrep04 .p03,
	.entry-content #hrep04 .p04,
	.entry-content #hrep04 .p05,
	.entry-content #hrep05 .p01,
	.entry-content #hrep05 .p02,
	.entry-content #hrep05 .p03,
	.entry-content #hrep05 .p04,
	.entry-content #hrep05 .p05,
	.entry-content #hrep05 .p06,
	.entry-content #hrep06 .p01,
	.entry-content #hrep06 .p02,
	.entry-content #hrep06 .p03,
	.entry-content #hrep06 .p04,
	.entry-content #hrep06 .p05,
	.entry-content #hrep06 .p06,
	.entry-content #hrep06 .p07,
	.entry-content #hrep06 .p08,
	.entry-content #hrep06 .p09,
	.entry-content #hrep07 .p01,
	.entry-content #hrep07 .p02,
	.entry-content #hrep07 .p03,
	.entry-content #hrep07 .p04,
	.entry-content #hrep07 .p06,
	.entry-content #hrep07 .p07,
	.entry-content #hrep07 .p08,
	.entry-content #hrep08 .p01,
	.entry-content #hrep08 .p02,
	.entry-content #hrep08 .p04,
	.entry-content #hrep08 .p05,
	.entry-content #hrep08 .p06,
	.entry-content #hrep08 .p07,
	.entry-content #hrep08 .p08,
	.entry-content #hrep09 .p01,
	.entry-content #hrep09 .p02,
	.entry-content #hrep09 .p03,
	.entry-content #hrep09 .p04,
	.entry-content #hrep09 .p05,
	.entry-content #hrep09 .p06,
	.entry-content #hrep09 .p07,
	.entry-content #hrep09 .p08,
	.entry-content #hrep09 .p09,
	.entry-content #hrep09 .p10,
	.entry-content #hrep10 .p01,
	.entry-content #hrep10 .p02,
	.entry-content #hrep10 .p03,
	.entry-content #hrep10 .p04,
	.entry-content #hrep10 .p05,
	.entry-content #hrep10 .p06,
	.entry-content #hrep10 .p07,
	.entry-content #hrep10 .p08,
	.entry-content #hrep10 .p09,
	.entry-content #hrep10 .p10 {
		min-height: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		background-image: none;
	}

	/* 🚨 **移行元スマホ版だけが本文の途中に置く写真 2 枚の居場所**（Bug #4054）。

	   移行元はパソコン版とスマホ版で同じ文章を別の組みにしている。スマホ版は段落を
	   `<p>` で分けて**段落と段落の間**に写真を置くが、投入したパソコン版は段落を
	   `<br><br>` でつないで 1 つの `div` に入れる。だから `#hrep06 .p01` と
	   `#hrep07 .p03` には `<p>` の子が無く、`> p:nth-of-type(1)::after` が当たらない。
	   `.pXX::after` へ付け替えると器のいちばん後ろに付くので、**絵が 1 段落ぶん
	   下へずれる**。

	   そこで `inc/introduce-happyreport.php` の
	   `pa_introduce_happyreport_sp_photo_insert()` が、絵を置くべき `<br><br>` を
	   この印で包む。**`<br><br>` は捨てないので、パソコン幅の描き方は変わらない**
	   （素の `<span>` は字の流れに何も足さない）。携帯幅だけ、ここで塊にして
	   中の `<br>` を消し、下の共通の宣言が `::after` で絵を出す. */
	.entry-content .pa-hrep-pic {
		display: block;
	}

	.entry-content .pa-hrep-pic br {
		display: none;
	}

	/* 節 B の共通。移行元スマホ版の写真は柱の 53% で中央に置き、上下に空きを取る。
	   `aspect-ratio` と絵と上の空きは、次の巻別の規則で指す.

	   🚨 **`clear: both` を必ず書く。**巻 1 の `.p06` と `.p07` は `clearfix` を
	   併せ持ち、浮きの解除を `.entry-content .clearfix::after`（Bug #3588）に
	   任せている。ここの当たり先（詳しさ 1,2,0）はそれ（0,2,0）より詳しいので、
	   同じ `::after` を上書きして浮きの解除を消してしまう. */
	.entry-content #hrep01 .p02::after,
	.entry-content #hrep01 .p04 > p:nth-of-type(1)::after,
	.entry-content #hrep01 .p06::after,
	.entry-content #hrep01 .p07::after,
	.entry-content #hrep02 .p01::after,
	.entry-content #hrep02 .p03 > p:nth-of-type(1)::after,
	.entry-content #hrep02 .p04txt::after,
	.entry-content #hrep02 .p05::after,
	.entry-content #hrep02 .p06::after,
	.entry-content #hrep03 .p01 > p:nth-of-type(1)::after,
	.entry-content #hrep03 .p02 > p:nth-of-type(1)::after,
	.entry-content #hrep03 .p02txt::after,
	.entry-content #hrep03 .p03::after,
	.entry-content #hrep03 .p04::after,
	.entry-content #hrep04 .p01txt::after,
	.entry-content #hrep04 .p02txt::after,
	.entry-content #hrep04 .p03::after,
	.entry-content #hrep04 .p04txt::after,
	.entry-content #hrep05 .p01::after,
	.entry-content #hrep05 .p02::after,
	.entry-content #hrep05 .p03::after,
	.entry-content #hrep05 .p04::after,
	.entry-content #hrep05 .p05::after,
	.entry-content .pa-hrep-pic[data-pa-hrep-pic="6-01"]::after,
	.entry-content #hrep06 .p02::after,
	.entry-content #hrep06 .p03::after,
	.entry-content #hrep06 .p05::after,
	.entry-content #hrep06 .p06::after,
	.entry-content #hrep06 .p08::after,
	.entry-content #hrep07 .p01txt:not(.p01txt ~ .p01txt)::after,
	.entry-content #hrep07 .p02::after,
	.entry-content .pa-hrep-pic[data-pa-hrep-pic="7-03"]::after,
	.entry-content #hrep07 .p06txt::after,
	.entry-content #hrep07 .p01txt + .p01txt::after,
	.entry-content #hrep07 .p07::after,
	.entry-content #hrep08 .p01::after,
	.entry-content #hrep08 .p02txt::after,
	.entry-content #hrep08 .p03txt-02::after,
	.entry-content #hrep08 .p04txt::after,
	.entry-content #hrep08 .p06::after,
	.entry-content #hrep08 .p06txt-02::after,
	.entry-content #hrep08 .p07txt::after,
	.entry-content #hrep09 .p01::after,
	.entry-content #hrep09 .p02::after,
	.entry-content #hrep09 .p03::after,
	.entry-content #hrep09 .p04::after,
	.entry-content #hrep09 .p05::after,
	.entry-content #hrep09 .p06::after,
	.entry-content #hrep09 .p07::after,
	.entry-content #hrep09 .p08::after,
	.entry-content #hrep09 .p09::after,
	.entry-content #hrep09 .p10::after,
	.entry-content #hrep10 .p01::after,
	.entry-content #hrep10 .p02::after,
	.entry-content #hrep10 .p03::after,
	.entry-content #hrep10 .p03txt::after,
	.entry-content #hrep10 .p04::after,
	.entry-content #hrep10 .p04txt-02::after,
	.entry-content #hrep10 .p05::after,
	.entry-content #hrep10 .p05txt::after,
	.entry-content #hrep10 .p06::after,
	.entry-content #hrep10 .p07::after,
	.entry-content #hrep10 .p07txt::after,
	.entry-content #hrep10 .p08::after,
	.entry-content #hrep10 .p10::after {
		content: "";
		display: block;
		clear: both;
		width: 53%;
		margin: 20px auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	/* 巻 1 */
	/* pic_1_01.jpg … 直前は「するか決めました」（さちかさん）」 */
	.entry-content #hrep01 .p02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_1_01.jpg?ver=843138b22729");
	}
	/* pic_1_02.jpg … 直前は「してくれたので迷いませんでした」」 */
	.entry-content #hrep01 .p04 > p:nth-of-type(1)::after {
		aspect-ratio: 296 / 184;
		background-image: url("../../sp/introduce/happyreport/images/pic_1_02.jpg?ver=48c3dd54a445");
	}
	/* pic_1_03.jpg … 直前は「せなんでしょうね」（さちかさん）」 */
	.entry-content #hrep01 .p06::after {
		aspect-ratio: 302 / 187;
		background-image: url("../../sp/introduce/happyreport/images/pic_1_03.jpg?ver=3e6ba04894b9");
	}
	/* pic_1_04.jpg … 直前は「相性が良いからだと思っています」」 */
	.entry-content #hrep01 .p07::after {
		aspect-ratio: 281 / 174;
		background-image: url("../../sp/introduce/happyreport/images/pic_1_04.jpg?ver=c86c73a6568b");
	}

	/* 巻 2 */
	/* pic_2_01.jpg … 直前は「タイプなんです」（きょうこさん）」 */
	.entry-content #hrep02 .p01::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_2_01.jpg?ver=592fb6127dde");
	}
	/* pic_2_02.jpg … 直前は「実感しています」（きょうこさん）」 */
	.entry-content #hrep02 .p03 > p:nth-of-type(1)::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_2_02.jpg?ver=40cd396aea28");
	}
	/* pic_2_03.jpg … 直前は「ると感じました」（えいせいさん）」 */
	.entry-content #hrep02 .p04txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_2_03.jpg?ver=aedcb53d541b");
	}
	/* pic_2_04.jpg … 直前は「きる今につながっているようです。」 */
	.entry-content #hrep02 .p05::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_2_04.jpg?ver=73901f41d470");
	}
	/* pic_2_05.jpg … 直前は「せを実感します」（きょうこさん）」 */
	.entry-content #hrep02 .p06::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_2_05.jpg?ver=b8af64273c5e");
	}

	/* 巻 3 */
	/* pic_3_01.jpg … 直前は「コートすることにしたといいます。」 */
	.entry-content #hrep03 .p01 > p:nth-of-type(1)::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_3_01.jpg?ver=b2b9a1178179");
	}
	/* pic_3_02.jpg … 直前は「持ちが芽生えたのだといいます。”」 */
	.entry-content #hrep03 .p02 > p:nth-of-type(1)::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_3_02.jpg?ver=410685f8ec25");
	}
	/* pic_3_03.jpg … 直前は「指輪が二重にはめられていました。」 */
	.entry-content #hrep03 .p02txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_3_03.jpg?ver=275b8c454747");
	}
	/* pic_3_04.jpg … 直前は「びに幸せを感じます」（ゆきさん）」 */
	.entry-content #hrep03 .p03::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_3_04.jpg?ver=c52d94cf4af3");
	}
	/* pic_3_05.jpg … 直前は「、予想外でしたね」（ひろしさん）」 */
	.entry-content #hrep03 .p04::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_3_05.jpg?ver=4e900a66618c");
	}

	/* 巻 4 */
	/* pic_4_01.jpg … 直前は「ほしいという想いだったそうです。」 */
	.entry-content #hrep04 .p01txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_4_01.jpg?ver=0845aae6825d");
	}
	/* pic_4_02.jpg … 直前は「かと思っています」（かずまさん）」 */
	.entry-content #hrep04 .p02txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_4_02.jpg?ver=53fffac87e18");
	}
	/* pic_4_03.jpg … 直前は「た土鍋の出番です」（かずまさん）」 */
	.entry-content #hrep04 .p03::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_4_03.jpg?ver=1d8a50b9adaf");
	}

	/* 🚨 移行元スマホ版はここで `pic_4_05.jpg` を指しているが、**あの絵は 180x180 の
	   正方形で、囲みの写真（`p.pic_s`）の寸法である。**本文の写真の器は柱の 53% の
	   横長（296x183）なので、正方形を入れると寸法が合わない。いっぽう `pic_4_04.jpg` は
	   **まさに 296x183** で、**移行元のどこからも参照されないまま余っている**
	   （`legacy/www.p-a.jp/public` の全数走査で 0 件。HTML・CSS・`sp/` を含む。
	   2026-09-09 に確認）。よって移行元の書き間違いと判断し、寸法の合う絵を出す
	   （ユーザー裁定 106・2026-09-05）.

	   🚨 **以前ここには「パソコン版の同じ場所の背景は `pic_4_04.jpg` と同じ 1 枚」と
	   書いてあったが、裏が取れなかった。**パソコン版の `report_04.html` は
	   `pic_4_04.jpg` も `pic_4_05.jpg` も参照していない（どちらも 0 件）。
	   裁定はユーザーの判断として有効なので変えず、理由づけだけを事実へ直した
	   （Bug #5305 の調査・2026-09-09）. */
	/* pic_4_04.jpg … 直前は「」と嬉しそうな様子のかずまさん。」 */
	.entry-content #hrep04 .p04txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_4_04.jpg?ver=129e3e0501e5");
	}

	/* 巻 5 */
	/* pic_5_01.jpg … 直前は「きっと素敵な思い出ができますね。」 */
	.entry-content #hrep05 .p01::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_5_01.jpg?ver=fa4b1cb69b67");
	}
	/* pic_5_02.jpg … 直前は「導いてくれました」（すみえさん）」 */
	.entry-content #hrep05 .p02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_5_02.jpg?ver=3482200f70a5");
	}
	/* pic_5_03.jpg … 直前は「感を覚えました」（しょうごさん）」 */
	.entry-content #hrep05 .p03::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_5_03.jpg?ver=8f74278f87db");
	}
	/* pic_5_04.jpg … 直前は「のになりました」（しょうごさん）」 */
	.entry-content #hrep05 .p04::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_5_04.jpg?ver=21b123865847");
	}
	/* pic_5_05.jpg … 直前は「ポートタウンのデートなのだとか。」 */
	.entry-content #hrep05 .p05::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_5_05.jpg?ver=3556a7ef8841");
	}

	/* 巻 6 */
	/* pic_6_01.jpg … 直前は「に、活動をスタートしたそうです。」 */
	.entry-content .pa-hrep-pic[data-pa-hrep-pic="6-01"]::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_6_01.jpg?ver=9f99732911ad");
	}
	/* pic_6_02.jpg … 直前は「を勧めない姿勢が信頼できました」」 */
	.entry-content #hrep06 .p02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_6_02.jpg?ver=14cbf7adfbaa");
	}
	/* pic_6_03.jpg … 直前は「けをもらったり、心強かったです」」 */
	.entry-content #hrep06 .p03::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_6_03.jpg?ver=f3988e702837");
	}
	/* pic_6_04.jpg … 直前は「ことに集中できるのがいいですね」」 */
	.entry-content #hrep06 .p05::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_6_04.jpg?ver=347ab53a19b7");
	}
	/* pic_6_05.jpg … 直前は「しかも500円のマットですよ？」」 */
	.entry-content #hrep06 .p06::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_6_05.jpg?ver=f7c20a1520b5");
	}
	/* pic_6_06.jpg … 直前は「手にできた幸せなのだといいます。」 */
	.entry-content #hrep06 .p08::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_6_06.jpg?ver=c282ca54bf45");
	}

	/* 巻 7 */
	/* pic_7_01.jpg … 直前は「ンシェルジュに託したといいます。」 */
	.entry-content #hrep07 .p01txt:not(.p01txt ~ .p01txt)::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_7_01.jpg?ver=b8c764c1175a");
	}
	/* pic_7_02.jpg … 直前は「ートしてくれるのかと驚きました」」 */
	.entry-content #hrep07 .p02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_7_02.jpg?ver=1d97f475ce8b");
	}
	/* pic_7_03.jpg … 直前は「介を受けていないのだといいます。」 */
	.entry-content .pa-hrep-pic[data-pa-hrep-pic="7-03"]::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_7_03.jpg?ver=3e7e3d070695");
	}
	/* pic_7_04.jpg … 直前は「食べたか記憶にないんです（笑）」」 */
	.entry-content #hrep07 .p06txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_7_04.jpg?ver=2f889b7d8971");
	}
	/* pic_7_05.jpg … 直前は「気持ちを持続させたいと思います」」 */
	.entry-content #hrep07 .p01txt + .p01txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_7_05.jpg?ver=ec8d7276aa8a");
	}
	/* pic_7_06.jpg … 直前は「いていきたいと話されていました。」 */
	.entry-content #hrep07 .p07::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_7_06.jpg?ver=52e1c19a6d6f");
	}

	/* 巻 8 */
	/* pic_8_01.jpg … 直前は「ーマンサポートだったといいます。」 */
	.entry-content #hrep08 .p01::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_01.jpg?ver=562e9a18e5c1");
	}
	/* pic_8_02.jpg … 直前は「う考え方が、合致していたのです。」 */
	.entry-content #hrep08 .p02txt::after {
		margin-top: 50px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_02.jpg?ver=1414e56fb2b8");
	}
	/* pic_8_03.jpg … 直前は「と笑ってくださったのが嬉しくて」」 */
	.entry-content #hrep08 .p03txt-02::after {
		margin-top: 50px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_03.jpg?ver=d138c5e2beec");
	}
	/* pic_8_04.jpg … 直前は「ーを感じてしまったというのです。」 */
	.entry-content #hrep08 .p04txt::after {
		margin-top: 50px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_04.jpg?ver=3d72ef25fd05");
	}
	/* pic_8_05.jpg … 直前は「う抑えることができませんでした」」 */
	.entry-content #hrep08 .p06::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_05.jpg?ver=729636ac98b1");
	}
	/* pic_8_06.jpg … 直前は「遊ばせてもらっている感じですね」」 */
	.entry-content #hrep08 .p06txt-02::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_06.jpg?ver=6a8b4941a8d9");
	}
	/* pic_8_07.jpg … 直前は「姿勢が、ありがたいなと感じます」」 */
	.entry-content #hrep08 .p07txt::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_8_07.jpg?ver=9d37838d85bc");
	}

	/* 巻 9 */
	/* pic_9_01.jpg … 直前は「ントに活動の場を移したそうです。」 */
	.entry-content #hrep09 .p01::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_01.jpg?ver=9da062312884");
	}
	/* pic_9_02.jpg … 直前は「ントへの入会を決めたといいます。」 */
	.entry-content #hrep09 .p02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_02.jpg?ver=7fe78a8aa33a");
	}
	/* pic_9_03.jpg … 直前は「間違っていなかったと感じました」」 */
	.entry-content #hrep09 .p03::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_03.jpg?ver=c3813451a67a");
	}
	/* pic_9_04.jpg … 直前は「からリラックスできる相手でした」」 */
	.entry-content #hrep09 .p04::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_04.jpg?ver=1e26eafa9c9a");
	}
	/* pic_9_05.jpg … 直前は「にいて居心地が良いと感じました」」 */
	.entry-content #hrep09 .p05::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_05.jpg?ver=6c0b0fb9d20f");
	}
	/* pic_9_06.jpg … 直前は「』って優しく返してくれたんです」」 */
	.entry-content #hrep09 .p06::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_06.jpg?ver=f63343d27e1f");
	}
	/* pic_9_07.jpg … 直前は「ような言葉をかけてくれるんです」」 */
	.entry-content #hrep09 .p07::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_07.jpg?ver=2878f8906719");
	}
	/* pic_9_08.jpg … 直前は「ー！？どうして答えられないの？」」 */
	.entry-content #hrep09 .p08::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_08.jpg?ver=cae4be7f0435");
	}
	/* pic_9_09.jpg … 直前は「行ったんですが、寂しくて（笑）」」 */
	.entry-content #hrep09 .p09::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_09.jpg?ver=5e06fb592ada");
	}
	/* pic_9_10.jpg … 直前は「きおさん「うん、滝に打たれたい」」 */
	.entry-content #hrep09 .p10::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_9_10.jpg?ver=b967ef48b68b");
	}

	/* 巻 10 */
	/* pic_10_01.jpg … 直前は「きる印象を持ったからといいます。」 */
	.entry-content #hrep10 .p01::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_01.jpg?ver=2368d22b64fc");
	}
	/* pic_10_02.jpg … 直前は「ントでの活動をスタートしました。」 */
	.entry-content #hrep10 .p02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_02.jpg?ver=c5e4c1300c69");
	}
	/* pic_10_03.jpg … 直前は「。決め手はなんだったのでしょう。」 */
	.entry-content #hrep10 .p03::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_03.jpg?ver=b0bbae1ce0df");
	}
	/* pic_10_04.jpg … 直前は「向けた交際を切り出していました」」 */
	.entry-content #hrep10 .p03txt::after {
		margin-top: 50px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_04.jpg?ver=d8b498e63b1d");
	}
	/* pic_10_05.jpg … 直前は「な？という気持ちがあったんです」」 */
	.entry-content #hrep10 .p04::after {
		margin-top: 50px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_05.jpg?ver=e73fa96e46da");
	}
	/* pic_10_06.jpg … 直前は「いを感じる部分がなかったんです」」 */
	.entry-content #hrep10 .p04txt-02::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_06.jpg?ver=b920333504ba");
	}
	/* pic_10_09.jpg … 直前は「ない時間を過ごしているそうです。」 */
	.entry-content #hrep10 .p05::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_09.jpg?ver=463180037be5");
	}
	/* pic_10_07.jpg … 直前は「一緒につくる時間も楽しいですね」」 */
	.entry-content #hrep10 .p05txt::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_07.jpg?ver=0f91fe240460");
	}
	/* pic_10_08.jpg … 直前は「んです。結婚の幸せを実感します」」 */
	.entry-content #hrep10 .p06::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_08.jpg?ver=13e2f0e54608");
	}
	/* pic_10_10.jpg … 直前は「、ちゃんと伝わっているようです。」 */
	.entry-content #hrep10 .p07::after {
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_10.jpg?ver=bdbc9ae854ce");
	}
	/* pic_10_11.jpg … 直前は「とも一緒に楽しめるといいですね」」 */
	.entry-content #hrep10 .p07txt::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_11.jpg?ver=1e445dcef76c");
	}
	/* pic_10_12.jpg … 直前は「れあえたらいいなと思っています」」 */
	.entry-content #hrep10 .p08::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_12.jpg?ver=71f2d4bf14c1");
	}
	/* pic_10_13.jpg … 直前は「と、幸せな気持ちに包まれました」」 */
	.entry-content #hrep10 .p10::after {
		margin-top: 25px;
		aspect-ratio: 296 / 183;
		background-image: url("../../sp/introduce/happyreport/images/pic_10_13.jpg?ver=726b1f455b07");
	}
}

/* ===== 背景を持たない「文章の箱」の受け皿 =====
 *
 * 🚨 写真つきの規則を直しただけでは足りない。写真を親に置き、**その横へ文章を
 * 逃がす内余白は子の `*txt` 側が持っている**組みがある。report_09 では
 * `.p07txt-02` が `width: 350px` と `padding-left: 350px` を持ち、幅 375px で
 * 白い囲みから 42px はみ出していた（**全 11 本を測って見つけた**。report_01 の
 * 1 本だけを見ていたときは気づけなかった）。
 *
 * 横方向に 100px 以上の内余白か、200px 以上の固定幅を持つ規則を対象にする。
 * 白い囲み自身（`.bg_white`）は飾りの枠なので外す。
 *
 * 生成した規則の数: 23 */

@media (max-width: 749px) {
	.entry-content .marriage_vol1_name {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep02 .p05txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content .marriage_vol5_name {
		width: auto;
	}

	.entry-content #hrep06 .p01txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep06 .p03txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep06 .p07-1txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep06 .p08txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content .marriage_vol6_name {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep07 .p02txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep07 .p03txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep07 .p05txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep07 .p06txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content .marriage_vol7_name {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep09 .p02txt-02 {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep09 .p07txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep09 .p07txt-02 {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p03txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p04txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p05txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p06txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p07txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p09txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.entry-content #hrep10 .p10txt {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

}

/* ==============================================================
 * ふきだしの引用を、画像からテキストへ置き換える（Bug #3083 の 3 本目）
 * ==============================================================
 *
 * 移行元はご夫婦の言葉を**文言ごと画像に焼き込んで**いる（パソコン版
 * `title_NN_txt01.png` / `title_NN_txt02.png` の 20 枚）。全体の決まり
 * （2026-08-31 のユーザー裁定）は「文言まで画像に焼き込まれている場合は、画像を
 * 背景として加工するか CSS で表現を再現し、文言はテキストにして配置する」である。
 * 文言と行の割り方は `inc/introduce-happyreport.php` の対応表が持つ。ここは見た目を
 * 受け持つ。
 *
 * ## 数値の出どころ（すべて画像からの実測）
 *
 * 移行元のパソコン版は、ふきだしの画像を包む `<p>` に位置の指定を持たない。画像は
 * 白い囲み `.bg_white` の内側（幅 **800px**）の**左端**に置かれる。つまり
 * **画像の中の x 座標が、そのまま器の左端からの距離になる**。そこで 20 枚を
 * Pillow で読み、透明でない画素のうち明るさ 170 未満を「墨」と数えて、行ごとの
 * 外形（上端・左端・右端）と、名前の左の罫線の幅・すき間を採った。
 *
 * 字の大きさは**描いて合わせた**。テーマの明朝（`--pa-font-family-serif`）で
 * 同じ文言を 100px で描いて墨の幅を測り、移行元の墨の幅との比から巻ごとの
 * 大きさを最小二乗で求めた（残差は各巻の注釈に %で書いてある。20 枚中 16 枚が
 * ±1% 以内、最大は vol.6 の 1 枚目の −4.9%）。縦は「行の箱の上端から墨の上端まで」が
 * 明朝で `行の高さ ÷ 2 − 0.48 × 字の大きさ`、角ゴシックで `÷ 2 − 0.45 ×` になることを
 * 実測して、行の高さ・上の内余白・名前の外余白を逆算した。
 *
 * 記録は `pa-verify-assets/3127/pr3-quote-text.md`。
 *
 * ## 🚨 `<span>` を並べる作りである
 *
 * vol.10 の 1 枚目だけ、ふきだしの画像が題名の写真と**同じ `<p>` に入っている**。
 * 段落ごと置き換えられないので画像 1 枚だけを置き換え、`<span>` を `display: block`
 * にして段落の中でも成り立つ形にした。飾り（名前の左の罫線・携帯幅のダッシュ）だけを
 * 擬似要素に置き、**文言は 1 字も擬似要素へ入れていない**（読み上げソフトのため）。
 *
 * ## 🚨 幅 1440px でだけ移行元と一致する
 *
 * 移行元のパソコン版は器が 1,100px 固定（`#header` に `min-width: 1200px`）で縮まない。
 * dev の器は画面幅に追従するので、**器が 800px になる幅 1440px でだけ**上の実測値が
 * そのまま合う。それより狭いパソコン幅では、左右の位置が器の縮みぶんずれる。
 */

/* 🚨 **絵の下に付いていた 12.2px を、下の内余白に含める。**移行元はふきだしを
   `<p>` の中の `<img>`（行の中に置く形）で出しており、白い囲みの段落の行の高さ
   （16px の 220% = 35.2px）のぶん、**絵の下に 12.2px の余りが付いていた**。11 本すべてで
   `<p>` の高さが絵の高さ + 12.2px ちょうどだった（直す前の実測）。塊（`display: block`）へ
   置き換えるとこの余りが消え、本文が 1 ページあたり 24.4px 縮む。
   🚨 **外余白で足し戻してはいけない。**塊の下外余白は包む `<p>` の下外余白と相殺するので、
   `mb40` を持つ段落では消えてしまい、2 か所のうち 1 か所しか戻らなかった（実測）。
   巻ごとの `--pa-hrep-quote-pad-bottom` にこの 12.2px を含めてある. */
.entry-content .pa-hrep-quote {
	display: block;
	padding-top: var(--pa-hrep-quote-pad-top);
	padding-bottom: var(--pa-hrep-quote-pad-bottom);
	color: var(--pa-hrep-quote-color);
	font-family: var(--pa-font-family-serif);
	font-size: var(--pa-hrep-quote-size);
	font-weight: var(--pa-hrep-quote-weight, 400);
	line-height: var(--pa-hrep-quote-line);
	text-align: left;
}

.entry-content .pa-hrep-quote__text {
	display: block;
}

/* 1 行が 1 つの箱。字下げは移行元の墨の左端から、書体ごとの食い込み
   （「 は 0.63em ぶん内側から墨が始まる）を引いた値である。負の値は、
   移行元が鉤括弧を器の外へぶら下げていることを表す。
   🚨 **字間は行ごとに違う。**移行元は 1 行ずつ字を詰めたり空けたりして幅を
   合わせてあり、1 つの字の大きさでは両方の行に合わない（vol.6 の 1 枚目は
   1 行目が 1 字あたり 25.5px・2 行目が 23.6px だった）。行ごとの字間で
   その差を埋める。値は「移行元の墨の幅 − 描いた墨の幅 ÷ 字の間の数」である. */
.entry-content .pa-hrep-quote__line {
	display: block;
	letter-spacing: var(--pa-hrep-quote-track-1);
	text-indent: var(--pa-hrep-quote-indent-1);
}

.entry-content .pa-hrep-quote__line + .pa-hrep-quote__line {
	letter-spacing: var(--pa-hrep-quote-track-2);
	text-indent: var(--pa-hrep-quote-indent-2);
}

.entry-content .pa-hrep-quote__name {
	display: block;
	margin-top: var(--pa-hrep-quote-name-top);
	padding-right: var(--pa-hrep-quote-name-right);
	color: var(--pa-hrep-quote-name-color);
	font-family: var(--pa-font-family-base);
	font-size: var(--pa-hrep-quote-name-size);
	font-weight: 700;
	line-height: var(--pa-hrep-quote-name-line);
	text-align: right;
}

/* 名前の左の細い横罫線。移行元では 20 枚すべてに在る飾りである. */
.entry-content .pa-hrep-quote__name::before {
	content: "";
	display: inline-block;
	width: var(--pa-hrep-quote-rule);
	margin-right: var(--pa-hrep-quote-rule-gap);
	border-top: 1px solid currentColor;
	vertical-align: 0.28em;
}

/* 携帯幅だけに在る字（vol.6 の「の」・vol.8 の句点）はパソコン幅で隠す. */
.entry-content .pa-hrep-quote__sp {
	display: none;
}

/* 携帯幅だけの改行。パソコン幅では折り返しの位置が違うので隠す。
   移行元スマホ版のふきだしは画像で、折り返しが焼き込まれている（vol.1 は
   「…ものと思って／いましたが…」と語の途中で折れる）。パソコン幅の折り返しは
   1 行ずつの塊（`.pa-hrep-quote__line`）が作る. */
.entry-content .pa-hrep-quote__brsp {
	display: none;
}

/* 🚨 **札の文字の携帯幅だけの改行（Task #3373）。**パソコン幅では折り返しの位置が
   違うので隠す。移行元スマホ版の札は絵で、10 巻とも「・」の直後で折れている
   （「ゆうきさん・／ゆかりさんご夫婦の成功例」）。ふきだしと違って**巻ごとの
   対応表は要らない**（10 枚すべて読み取って位置が同じことを確かめた）. */
.entry-content .pa-hrep-card__brsp {
	display: none;
}

/* vol.1 の 1 枚目。移行元の段落の高さ 114.2px
   （絵 102px + 行の余り 12.2px）。組んだ後 114.2px（差 0px）。
   字は下へ 8.7px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v01-1 {
	--pa-hrep-quote-size: 24.5px;
	--pa-hrep-quote-line: 43px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 4.8px;
	--pa-hrep-quote-indent-1: -13.4px;
	--pa-hrep-quote-indent-2: 12.5px;
	--pa-hrep-quote-track-1: 0.91px;
	--pa-hrep-quote-track-2: -0.555px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: 3.1px;
	--pa-hrep-quote-name-right: 176px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 14px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.1 の 2 枚目。移行元の段落の高さ 100.2px
   （絵 88px + 行の余り 12.2px）。組んだ後 100.2px（差 0px）。
   字は下へ 2px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v01-2 {
	--pa-hrep-quote-size: 26px;
	--pa-hrep-quote-line: 43px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 31.5px;
	--pa-hrep-quote-indent-1: 62.6px;
	--pa-hrep-quote-indent-2: 88.5px;
	--pa-hrep-quote-track-1: -0.104px;
	--pa-hrep-quote-track-2: -0.085px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: -37.6px;
	--pa-hrep-quote-name-right: 130px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 21px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.2 の 1 枚目。移行元の段落の高さ 122.2px
   （絵 110px + 行の余り 12.2px）。組んだ後 122.2px（差 0px）。
   字は下へ 7.5px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v02-1 {
	--pa-hrep-quote-size: 25px;
	--pa-hrep-quote-line: 43px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 11px;
	--pa-hrep-quote-indent-1: 95.2px;
	--pa-hrep-quote-indent-2: 120.2px;
	--pa-hrep-quote-track-1: -0.011px;
	--pa-hrep-quote-track-2: 0.028px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: 4.9px;
	--pa-hrep-quote-name-right: 122px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 15px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.2 の 2 枚目。移行元の段落の高さ 100.2px
   （絵 88px + 行の余り 12.2px）。組んだ後 100.2px（差 0px）。
   字は下へ 3.5px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v02-2 {
	--pa-hrep-quote-size: 25px;
	--pa-hrep-quote-line: 43px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 52.6px;
	--pa-hrep-quote-indent-1: -13.8px;
	--pa-hrep-quote-indent-2: 11.5px;
	--pa-hrep-quote-track-1: 0.355px;
	--pa-hrep-quote-track-2: -0.176px;
	--pa-hrep-quote-name-size: 14px;
	--pa-hrep-quote-name-line: 19.6px;
	--pa-hrep-quote-name-top: -58px;
	--pa-hrep-quote-name-right: 166px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 14px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.3 の 1 枚目。移行元の段落の高さ 93.2px
   （絵 81px + 行の余り 12.2px）。組んだ後 93.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v03-1 {
	--pa-hrep-quote-size: 25px;
	--pa-hrep-quote-line: 40px;
	--pa-hrep-quote-pad-top: 15px;
	--pa-hrep-quote-pad-bottom: 11.5px;
	--pa-hrep-quote-indent-1: 94.2px;
	--pa-hrep-quote-indent-2: 94.2px;
	--pa-hrep-quote-track-1: -0.167px;
	--pa-hrep-quote-track-2: -0.167px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: 6.4px;
	--pa-hrep-quote-name-right: 174px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 15px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.3 の 2 枚目。移行元の段落の高さ 91.2px
   （絵 79px + 行の余り 12.2px）。組んだ後 91.2px（差 0px）。
   字は下へ 8.5px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v03-2 {
	--pa-hrep-quote-size: 25px;
	--pa-hrep-quote-line: 43px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 22px;
	--pa-hrep-quote-indent-1: -13.8px;
	--pa-hrep-quote-indent-2: 9.8px;
	--pa-hrep-quote-track-1: 0.125px;
	--pa-hrep-quote-track-2: 0.2px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: -37.1px;
	--pa-hrep-quote-name-right: 399px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 13px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.4 の 1 枚目。移行元の段落の高さ 93.2px
   （絵 81px + 行の余り 12.2px）。組んだ後 93.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v04-1 {
	--pa-hrep-quote-size: 25.5px;
	--pa-hrep-quote-line: 36.5px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 24.5px;
	--pa-hrep-quote-indent-1: -14.1px;
	--pa-hrep-quote-indent-2: -14.1px;
	--pa-hrep-quote-track-1: 0.006px;
	--pa-hrep-quote-track-2: 0.006px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: 11.9px;
	--pa-hrep-quote-name-right: 143px;
	--pa-hrep-quote-rule: 77px;
	--pa-hrep-quote-rule-gap: 15px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.4 の 2 枚目。移行元の段落の高さ 91.2px
   （絵 79px + 行の余り 12.2px）。組んだ後 91.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v04-2 {
	--pa-hrep-quote-size: 25.5px;
	--pa-hrep-quote-line: 40.8px;
	--pa-hrep-quote-pad-top: 2.8px;
	--pa-hrep-quote-pad-bottom: 18.5px;
	--pa-hrep-quote-indent-1: -14.1px;
	--pa-hrep-quote-indent-2: -14.1px;
	--pa-hrep-quote-track-1: 0.031px;
	--pa-hrep-quote-track-2: 0.031px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: 8.7px;
	--pa-hrep-quote-name-right: 180px;
	--pa-hrep-quote-rule: 76px;
	--pa-hrep-quote-rule-gap: 14px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.5 の 1 枚目。移行元の段落の高さ 93.2px
   （絵 81px + 行の余り 12.2px）。組んだ後 93.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v05-1 {
	--pa-hrep-quote-size: 26px;
	--pa-hrep-quote-line: 41.6px;
	--pa-hrep-quote-pad-top: 6.7px;
	--pa-hrep-quote-pad-bottom: 16px;
	--pa-hrep-quote-indent-1: -14.4px;
	--pa-hrep-quote-indent-2: -14.4px;
	--pa-hrep-quote-track-1: -0.054px;
	--pa-hrep-quote-track-2: -0.054px;
	--pa-hrep-quote-name-size: 15px;
	--pa-hrep-quote-name-line: 21px;
	--pa-hrep-quote-name-top: 8px;
	--pa-hrep-quote-name-right: 138.9px;
	--pa-hrep-quote-rule: 77px;
	--pa-hrep-quote-rule-gap: 17px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.5 の 2 枚目。移行元の段落の高さ 91.2px
   （絵 79px + 行の余り 12.2px）。組んだ後 91.2px（差 0px）。
   字は下へ 3px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v05-2 {
	--pa-hrep-quote-size: 26px;
	--pa-hrep-quote-line: 43px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 22.5px;
	--pa-hrep-quote-indent-1: -14.4px;
	--pa-hrep-quote-indent-2: -1.6px;
	--pa-hrep-quote-track-1: 0.006px;
	--pa-hrep-quote-track-2: 0.095px;
	--pa-hrep-quote-name-size: 14.5px;
	--pa-hrep-quote-name-line: 20.3px;
	--pa-hrep-quote-name-top: -37.6px;
	--pa-hrep-quote-name-right: 163px;
	--pa-hrep-quote-rule: 77px;
	--pa-hrep-quote-rule-gap: 13px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.6 の 1 枚目。移行元の段落の高さ 122.2px
   （絵 110px + 行の余り 12.2px）。組んだ後 122.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   🚨 **vol.6 の 2 枚だけ、移行元の字が明らかに太い。**同じ行の墨の量を数えると
   移行元 1,907 に対しこちらは 1,499（0.79 倍）だった。ほかの巻は 0.95〜0.97 倍で
   ほぼ同じなので、この 2 枚だけ太さを 600 にする（0.92 倍まで寄る。幅は 314 → 315px
   でほぼ変わらない）。
   */
.entry-content .pa-hrep-quote--v06-1 {
	--pa-hrep-quote-size: 24.5px;
	--pa-hrep-quote-line: 46px;
	--pa-hrep-quote-weight: 600;
	--pa-hrep-quote-pad-top: 2.8px;
	--pa-hrep-quote-pad-bottom: 45px;
	--pa-hrep-quote-indent-1: 23.6px;
	--pa-hrep-quote-indent-2: 37px;
	--pa-hrep-quote-track-1: 1.279px;
	--pa-hrep-quote-track-2: -0.598px;
	--pa-hrep-quote-name-size: 15px;
	--pa-hrep-quote-name-line: 21px;
	--pa-hrep-quote-name-top: -38.5px;
	--pa-hrep-quote-name-right: 134.9px;
	--pa-hrep-quote-rule: 55px;
	--pa-hrep-quote-rule-gap: 24px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.6 の 2 枚目。移行元の段落の高さ 146.2px
   （絵 134px + 行の余り 12.2px）。組んだ後 146.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   🚨 **vol.6 の 2 枚だけ、移行元の字が明らかに太い。**同じ行の墨の量を数えると
   移行元 1,907 に対しこちらは 1,499（0.79 倍）だった。ほかの巻は 0.95〜0.97 倍で
   ほぼ同じなので、この 2 枚だけ太さを 600 にする（0.92 倍まで寄る。幅は 314 → 315px
   でほぼ変わらない）。
   */
.entry-content .pa-hrep-quote--v06-2 {
	--pa-hrep-quote-size: 26px;
	--pa-hrep-quote-line: 44px;
	--pa-hrep-quote-weight: 600;
	--pa-hrep-quote-pad-top: 7.5px;
	--pa-hrep-quote-pad-bottom: 22.4px;
	--pa-hrep-quote-indent-1: 155.6px;
	--pa-hrep-quote-indent-2: 169.7px;
	--pa-hrep-quote-track-1: -0.617px;
	--pa-hrep-quote-track-2: 0.438px;
	--pa-hrep-quote-name-size: 15.5px;
	--pa-hrep-quote-name-line: 21.7px;
	--pa-hrep-quote-name-top: 6.6px;
	--pa-hrep-quote-name-right: 130.9px;
	--pa-hrep-quote-rule: 56px;
	--pa-hrep-quote-rule-gap: 22px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.7 の 1 枚目。移行元の段落の高さ 72.2px
   （絵 60px + 行の余り 12.2px）。組んだ後 72.2px（差 0px）。
   字は下へ 1.5px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v07-1 {
	--pa-hrep-quote-size: 26.5px;
	--pa-hrep-quote-line: 30.5px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 6.4px;
	--pa-hrep-quote-indent-1: -16.7px;
	--pa-hrep-quote-indent-2: -16.7px;
	--pa-hrep-quote-track-1: 0.008px;
	--pa-hrep-quote-track-2: 0.008px;
	--pa-hrep-quote-name-size: 15px;
	--pa-hrep-quote-name-line: 21px;
	--pa-hrep-quote-name-top: 14.3px;
	--pa-hrep-quote-name-right: 134.9px;
	--pa-hrep-quote-rule: 79px;
	--pa-hrep-quote-rule-gap: 17px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.7 の 2 枚目。移行元の段落の高さ 78.2px
   （絵 66px + 行の余り 12.2px）。組んだ後 78.2px（差 0px）。
   字は下へ 1.5px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v07-2 {
	--pa-hrep-quote-size: 26px;
	--pa-hrep-quote-line: 29.9px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 6.5px;
	--pa-hrep-quote-indent-1: -16.4px;
	--pa-hrep-quote-indent-2: -16.4px;
	--pa-hrep-quote-track-1: -0.093px;
	--pa-hrep-quote-track-2: -0.093px;
	--pa-hrep-quote-name-size: 15px;
	--pa-hrep-quote-name-line: 21px;
	--pa-hrep-quote-name-top: 20.8px;
	--pa-hrep-quote-name-right: 143.9px;
	--pa-hrep-quote-rule: 79px;
	--pa-hrep-quote-rule-gap: 14px;
	--pa-hrep-quote-color: #231815;
	--pa-hrep-quote-name-color: #231815;
}

/* vol.8 の 1 枚目。移行元の段落の高さ 119.2px
   （絵 107px + 行の余り 12.2px）。組んだ後 119.2px（差 0px）。
   字は下へ 7.7px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v08-1 {
	--pa-hrep-quote-size: 24.5px;
	--pa-hrep-quote-line: 39px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 3.8px;
	--pa-hrep-quote-indent-1: -15.4px;
	--pa-hrep-quote-indent-2: 303px;
	--pa-hrep-quote-track-1: 0.074px;
	--pa-hrep-quote-track-2: -0.194px;
	--pa-hrep-quote-name-size: 18px;
	--pa-hrep-quote-name-line: 25.2px;
	--pa-hrep-quote-name-top: 12.2px;
	--pa-hrep-quote-name-right: 0.7px;
	--pa-hrep-quote-rule: 72px;
	--pa-hrep-quote-rule-gap: 11px;
	--pa-hrep-quote-color: #000000;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.8 の 2 枚目。移行元の段落の高さ 119.2px
   （絵 107px + 行の余り 12.2px）。組んだ後 119.2px（差 0px）。
   字は下へ 5.2px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v08-2 {
	--pa-hrep-quote-size: 24.5px;
	--pa-hrep-quote-line: 40px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 5.7px;
	--pa-hrep-quote-indent-1: 214.6px;
	--pa-hrep-quote-indent-2: 324px;
	--pa-hrep-quote-track-1: 0.158px;
	--pa-hrep-quote-track-2: -0.039px;
	--pa-hrep-quote-name-size: 18.5px;
	--pa-hrep-quote-name-line: 25.9px;
	--pa-hrep-quote-name-top: 7.6px;
	--pa-hrep-quote-name-right: 0px;
	--pa-hrep-quote-rule: 72px;
	--pa-hrep-quote-rule-gap: 12px;
	--pa-hrep-quote-color: #000000;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.9 の 1 枚目。移行元の段落の高さ 128.2px
   （絵 116px + 行の余り 12.2px）。組んだ後 128.2px（差 0px）。
   字は下へ 1.9px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v09-1 {
	--pa-hrep-quote-size: 21px;
	--pa-hrep-quote-line: 34px;
	--pa-hrep-quote-pad-top: 0px;
	--pa-hrep-quote-pad-bottom: 27.9px;
	--pa-hrep-quote-indent-1: -11.2px;
	--pa-hrep-quote-indent-2: 243.7px;
	--pa-hrep-quote-track-1: 0.089px;
	--pa-hrep-quote-track-2: 0.545px;
	--pa-hrep-quote-name-size: 16px;
	--pa-hrep-quote-name-line: 22.4px;
	--pa-hrep-quote-name-top: 9.9px;
	--pa-hrep-quote-name-right: 257.9px;
	--pa-hrep-quote-rule: 62px;
	--pa-hrep-quote-rule-gap: 10px;
	--pa-hrep-quote-color: #000000;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.9 の 2 枚目。移行元の段落の高さ 128.2px
   （絵 116px + 行の余り 12.2px）。組んだ後 128.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v09-2 {
	--pa-hrep-quote-size: 21px;
	--pa-hrep-quote-line: 34px;
	--pa-hrep-quote-pad-top: 16.1px;
	--pa-hrep-quote-pad-bottom: 14.8px;
	--pa-hrep-quote-indent-1: 163.8px;
	--pa-hrep-quote-indent-2: 440.3px;
	--pa-hrep-quote-track-1: -0.022px;
	--pa-hrep-quote-track-2: 0.261px;
	--pa-hrep-quote-name-size: 16px;
	--pa-hrep-quote-name-line: 22.4px;
	--pa-hrep-quote-name-top: 6.9px;
	--pa-hrep-quote-name-right: 0.9px;
	--pa-hrep-quote-rule: 61px;
	--pa-hrep-quote-rule-gap: 10px;
	--pa-hrep-quote-color: #000000;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.10 の 1 枚目。移行元の段落の高さ 200.2px
   （絵 188px + 行の余り 12.2px）。組んだ後 200.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v10-1 {
	--pa-hrep-quote-size: 21.5px;
	--pa-hrep-quote-line: 34px;
	--pa-hrep-quote-pad-top: 75.3px;
	--pa-hrep-quote-pad-bottom: 25.4px;
	--pa-hrep-quote-indent-1: -8.5px;
	--pa-hrep-quote-indent-2: 61.5px;
	--pa-hrep-quote-track-1: 0.441px;
	--pa-hrep-quote-track-2: -0.136px;
	--pa-hrep-quote-name-size: 15.5px;
	--pa-hrep-quote-name-line: 21.7px;
	--pa-hrep-quote-name-top: 9.8px;
	--pa-hrep-quote-name-right: 256.9px;
	--pa-hrep-quote-rule: 62px;
	--pa-hrep-quote-rule-gap: 10px;
	--pa-hrep-quote-color: #000000;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.10 の 2 枚目。移行元の段落の高さ 95.2px
   （絵 83px + 行の余り 12.2px）。組んだ後 95.2px（差 0px）。
   字は下へ 0px ずれる（行の箱の空きが移行元の余白より広いため）。
   */
.entry-content .pa-hrep-quote--v10-2 {
	--pa-hrep-quote-size: 21px;
	--pa-hrep-quote-line: 33.6px;
	--pa-hrep-quote-pad-top: 19.3px;
	--pa-hrep-quote-pad-bottom: 10.4px;
	--pa-hrep-quote-indent-1: 146.8px;
	--pa-hrep-quote-indent-2: 146.8px;
	--pa-hrep-quote-track-1: 0.095px;
	--pa-hrep-quote-track-2: 0.095px;
	--pa-hrep-quote-name-size: 15.5px;
	--pa-hrep-quote-name-line: 21.7px;
	--pa-hrep-quote-name-top: 10.2px;
	--pa-hrep-quote-name-right: 7.9px;
	--pa-hrep-quote-rule: 62px;
	--pa-hrep-quote-rule-gap: 9px;
	--pa-hrep-quote-color: #000000;
	--pa-hrep-quote-name-color: #000000;
}

/* vol.10 の 1 枚目だけ、文字と同じ画像に**赤い勲章の飾り**が焼き込まれている
 * （月桂樹風の縄とリボン・中に `HAPPY REPORT / VOL.10`・右側に縦書きの赤い日本語）。
 * 文言はテキストにし、飾りだけを切り出して背景に置く。
 *
 * 切り出し元 … 移行元の写しの記録版 70284449d の
 *              `public/introduce/happyreport/images/title_10_txt01.png`（800 × 188）
 * 切り出した範囲 … 左 560 / 上 0 / 右 800 / 下 120（240 × 120px）
 * 置き場所     … `assets/introduce-happyreport/images/title_10_txt01_medal.png`
 *
 * ## 🚨 勲章は 2 枚の画像にまたがっている（訂正・2026-09-04 12:2x JST）
 *
 * はじめは「移行元の画像自身が上端で切れているので、切れたまま再現するのが正しい」と
 * 書いていた。**誤りだった。**ユーザーの目視で「勲章がまだ切れている」と差し戻された。
 *
 * 勲章の**上半分は主役の写真 `title_10.jpg`（800 × 376）の右下**に焼き込まれ、
 * **下半分がこのふきだしの画像の右上**に焼き込まれている。移行元は 2 枚を**隙間なく
 * 縦に並べる**（`vertical-align: bottom` で行の余りも消す）ので、継ぎ目で絵がつながり、
 * 勲章は**完全な姿**で見える（輪の中の `HAPPY REPORT / VOL.10` も、右の縦書き
 * `パートナーエージェントで出会いご結婚されたご夫妻をご紹介します。` も全部読める）。
 *
 * 2 枚を重ねて確かめた。切り出しの範囲を広げるのでは直らない（上半分は写真の中に
 * あり、dev もその写真をそのまま出すので、広げると勲章が二重になる）。
 * **継ぎ目の空きを 0 にして絵をつなぐ**のが正しい直しである。
 *
 * ## 🚨 大きさは画面幅に比例させる
 *
 * はじめは `240px 120px` の固定値だった。移行元は画像そのものが器の幅に合わせて
 * 縮むので、勲章も比例する。固定値だと**幅 1440px でだけ正しく（器 800px の 30%）、
 * 携帯幅では大きすぎた**（幅 375px で器 328.13px に対し 240px ＝ 73%・実測）。
 * 切り出しは元画像 800px のうち 240px なので **30%** が正しい。高さは絵の比のまま.
 *
 * 🚨 この 1 枚は**背景が不透明の白**である（ほかの 19 枚は透明）。白い囲みの上に
 * 置くので見た目には出ないが、携帯幅では白い囲みを外しているので背景ごと隠す.
 */
.entry-content .pa-hrep-quote--v10-1 {
	background-image: url("../images/title_10_txt01_medal.png?ver=8e557c0628e5");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 30% auto;
}

/* 主役の写真の行の余り（Bug #4128）。
 *
 * 絵は行の中に置かれるので、既定のままだと**絵の下に行の余りが残る**。dev の実測では
 * 幅 375 / 749px で 6px・1440px で 12.2px ある。vol.10 はこの空きがあると
 * **勲章が継ぎ目で切れる**（勲章の上半分は主役の写真の右下に、下半分はふきだしの
 * 右上に焼き込まれていて、隙間なく縦に並んで初めて 1 つの絵になる）。
 *
 * 🚨🚨 **ここには誤りが 2 つ重なっていた（2026-09-07 に訂正）。**
 *
 * **誤り 1: 「移行元は 11 本すべてに `style="vertical-align: bottom;"` を付けている」は
 * 事実でない。**移行元 11 本の HTML を全数で数えると、この inline style を持つのは
 * `report_10.html` の 1 か所だけで、しかも `p.tac` にある**2 枚のうち 1 枚目**にしか
 * 付いていない。**巻 01〜09 の移行元は、行の余りを持ったままが正しい姿である。**
 *
 * **誤り 2: 打ち消しが、直したかった巻 10 に 1 度も当たっていなかった。**携帯幅で絵を
 * 差し替えるため、巻 08・09・10 の主役の写真は `<picture>` で包まれている。
 * `> .tac > img` と `> p > img` は **`img` が段落の直下にあること**を求めるので、
 * この 3 本には届かない。
 *
 * 幅 1440px の実測は、2 つの誤りがそのまま出ていた。
 *
 *   巻 01〜07（素の `<img>`）… 打ち消しが当たる  → 移行元より **−12.20px**
 *   巻 08・09（`<picture>`） … 当たらない        → 移行元と一致（差 0）
 *   巻 10   （`<picture>`） … 当たらない        → 移行元より **+12.19px**（勲章が切れる）
 *
 * ## 直し方
 *
 * パソコン幅（750px 以上）では、移行元と同じく**巻 10 の 1 枚目だけ**に当てる。
 * `<picture>` で包まれているので `picture > img` まで書く。**2 枚目は当て先に
 * 入れない**（移行元も付けていない。dev では 2 枚目が文言 `span.pa-hrep-quote` に
 * 置き換わっているので、絵としては存在しない）。
 *
 * 携帯幅（749px 以下）も、移行元スマホ版との突き合わせ（Bug #4054）とは別に、
 * **絵の下の空きを消す指定だけは当てる**。値は変えず当て先だけを広げる。
 *
 * 🚨 **包み越しの当て先を足した（Bug #4297・2026-09-07）。**携帯幅で絵を差し替える
 * 仕組み（`inc/sp-image-swap.php`）は、対応表に載っている絵を `<picture>` で包む。
 * 包みが入ると `> img` は当たらないので、**巻 08・09・10 の題の写真だけが空振りし、
 * 絵の下に 6px の空きが残っていた**（巻 01〜07 は包まれないので 0px）。
 *
 * 実測（幅 375px・移行元の写しの実ファイルを読み込んで測った・2026-09-07 17:5x）:
 *
 *   直す前  巻 01 の絵の下の空き **0px** ／ 巻 08 **6px**
 *   直した後 巻 01 **0px**（変わらない）／ 巻 08 **0px**
 *   幅 1440px は 4 通りの当て先すべてで 12.20px（この節は当たらないので動かない）
 *
 * 🚨 **包み（`picture`）に当てても直らない。**包みに `vertical-align: bottom` を
 * 与えても、中の絵は行の中で下端にそろわず空きが 6px 残る（実測）。**中の絵まで
 * 名指しする形だけが効く。**すぐ上のパソコン幅の節と同じ書き方である。
 *
 * 🚨 **`> :is(img, picture > img)` とは書けない。**`:is()` の中の子の記号は同じ
 * 要素を起点に解かれるため、「`.tac` の子であり、かつ `picture` の子」という
 * ありえない条件になり、**1 つも当たらないまま静かに素通りする**（実測で確認）.
 */
@media (max-width: 749px) {
	.entry-content .wrap_movie .bg_white > .tac > img,
	.entry-content .wrap_movie .bg_white > .tac > picture > img,
	.entry-content .wrap_movie .bg_white > p > img,
	.entry-content .wrap_movie .bg_white > p > picture > img {
		vertical-align: bottom;
	}
}

@media (min-width: 750px) {
	.entry-content #hrep10 .bg_white > .tac > img:first-child,
	.entry-content #hrep10 .bg_white > .tac > picture:first-child > img {
		vertical-align: bottom;
	}
}

/* ==============================================================
 * 携帯幅（749px 以下）は移行元スマホ版のふきだしに合わせる
 * ==============================================================
 *
 * 移行元スマホ版は、夫と妻の言葉を **1 枚にまとめた画像**（`catch_NN.png`・
 * 561 × 220〜320px）を出す。パソコン版との違いは 4 つある。
 *
 *   鉤括弧「」が無い
 *   2 つの言葉をまとめて、上端と下端に薄い灰色 `#cccccc` の細い横罫線が 1 本ずつ入る
 *   名前は金茶で、前にダッシュが付く（罫線は無い）
 *   2 行とも左そろえで、左の余白が無い
 *
 * 🚨 **鉤括弧以外にも字が違う。**vol.1 の妻は読点、vol.6 は「を」と「の」、vol.8 は
 * 文末の句点が違う。文言の出し分けは対応表の小片（segment）が受け持ち、ここは
 * 「パソコン幅だけの字を隠し、携帯幅だけの字を出す」役だけを持つ。
 *
 * ## 大きさを画面幅に追わせる理由
 *
 * 移行元スマホ版は**画像**なので、`img { max-width: 100% }` で画面幅に合わせて
 * 字まで拡大縮小される。器は画面幅の 87.5%、画像の実寸は 561px なので、
 * **画像の 1px = min(0.15597vw, 1px)** になる（0.875 ÷ 561 × 100 = 0.15597）。
 * 画面幅が 641px を超えると画像は実寸で止まるので、上限を 1px で止める。
 * 以下の値は**移行元スマホ版の画像の中の px** をそのまま書いてある。
 *
 * 実測（`catch_01`〜`catch_10` の 10 枚すべて。値は画像の中の px）:
 *
 *   本文の字 25.3 / 行の送り 36〜42（中央値 38）/ 名前の字 21
 *   上の罫線から 1 行目の墨まで 24〜26（中央値 25）
 *   最後の行の墨から名前の墨まで 40〜47（中央値 45）
 *   名前の墨から次の引用の 1 行目の墨まで 54〜67（中央値 65.5）
 *   最後の名前の墨から下の罫線まで 44〜51（中央値 50）
 *
 * 🚨 **本文の字を 27px と読むと折り返しが増える。**行の墨の幅を字数で割ると 25〜27px の
 * 幅が出るが（移行元は行ごとに字を詰めてある）、**1 行に最も多い 22 字が 561px の中に
 * 収まっている**以上、字は 561 ÷ 22 = 25.5px より大きくなりえない。27px で組んだところ、
 * 11 本中 6 本で行が 1 本ずつ増え、引用の区画が 13〜31px 高くなった（実測）。最後の字の墨が
 * 送り幅より狭いことを見込んで割り直すと、9 行の中央値が 25.3px だったのでこの値を採る。
 *
 * 🚨 **引用が 1 行ずつの巻（vol.3〜5）は余白が 2〜4px ずつ狭い。**中央値でそろえると
 * 携帯幅で 8〜10px 高くなるが、巻ごとに変えるほどの差ではないので中央値でそろえる。
 */

@media (max-width: 749px) {

	.entry-content .pa-hrep-quote {
		--pa-hrep-quote-sp-unit: min(0.15597vw, 1px);

		padding-top: 0;
		padding-bottom: 0;
		color: #20201f;
		font-size: calc(25.3 * var(--pa-hrep-quote-sp-unit));
		line-height: calc(38 * var(--pa-hrep-quote-sp-unit));
		text-align: left;
	}

	/* 2 つの引用をひとまとまりに見せる上下の罫線。移行元スマホ版は 1 枚の画像の
	   上端と下端に入っているので、1 枚目に上の線・2 枚目に下の線を置く。
	   間には線を引かない. */
	.entry-content .pa-hrep-quote[data-pa-hrep-quote="1"] {
		padding-top: calc(18.1 * var(--pa-hrep-quote-sp-unit));
		border-top: 1px solid #cccccc;
	}

	.entry-content .pa-hrep-quote[data-pa-hrep-quote="2"] {
		padding-bottom: calc(25.9 * var(--pa-hrep-quote-sp-unit));
		border-bottom: 1px solid #cccccc;
	}

	/* 行の区切りを外して、画面幅で自然に折り返させる。
	   移行元スマホ版のふきだしは画像で、折り返しが焼き込まれている。パソコン版の
	   折り返しとは位置が違う巻がある（移行元スマホ版は画像の幅で折り返しただけで、
	   vol.1 は「…ものと思って／いましたが…」と語の途中で折れている）。

	   **2 通りを 10 巻 × 4 幅で実測して選んだ**（記録は
	   `pa-verify-assets/3127/data/quote-sp-lines-both.json`）。

	     行を残す … 折り返しが移行元と完全一致 12/20。ただし **3 件で行が増えて溢れ**、
	                「んです」「で、」のような 1 行だけの余りが出る
	     行を外す … 完全一致 7/20。**行の溢れは 0 件**

	   見た目の不具合になるのは「行の溢れ」のほうなので、外す側を採る。折り返しを
	   移行元と完全に合わせるには、**移行元スマホ版の折り返し位置を別に持って
	   携帯幅だけで改行を入れる**必要がある（司令塔へ別案として上げた）。

	   🚨 **パソコン幅の 2 行目の指定を打ち消す選択子を必ず並べる。**
	   `.pa-hrep-quote__line + .pa-hrep-quote__line`（詳しさ 0,3,0）は、この節の
	   `.pa-hrep-quote__line`（0,2,0）より**詳しいので勝つ**。並べないと、パソコン幅で
	   行の幅を合わせるために入れた字間（0.545px / 0.261px）と字下げ（243.7px /
	   440.3px）が携帯幅に残る（実測で確認）。字下げは行を外すと効かないので
	   気づけないが、**字間は効いていて行が横に伸びていた**。
	   **「後に書くから勝つ」を当てにしない。** */
	.entry-content .pa-hrep-quote__line,
	.entry-content .pa-hrep-quote__line + .pa-hrep-quote__line {
		display: inline;
		letter-spacing: var(--pa-hrep-quote-sp-track, normal);
		text-indent: 0;
	}

	.entry-content .pa-hrep-quote__mark,
	.entry-content .pa-hrep-quote__pc {
		display: none;
	}

	.entry-content .pa-hrep-quote__sp {
		display: inline;
	}

	/* 携帯幅だけの改行を出す。移行元スマホ版の画像と同じ位置で折る。
	   折る位置は対応表の `sp_breaks`（携帯幅で読める字の何文字目の後ろか）で、
	   移行元スマホ版の画像 10 枚の書き起こしから機械的に求めた値である. */
	.entry-content .pa-hrep-quote__brsp {
		display: block;
	}

	/* 🚨 **字の大きさは 19.4（21 ではない）。**移行元の絵と dev を**どちらも画素の墨**で
	   測ると、21 では名前が中央で 8.4% 広かった（16 か所・+2.1〜+12.9%）。1 / 1.084 =
	   0.923 を掛けて 19.4 にした。

	   🚨 **字送りの幅で測ってはいけない。**移行元は絵しか無いので墨でしか測れない。
	   dev だけ `Range` の幅（＝字送り）で測ると、両端の余白のぶん広く出て、
	   「dev のほうが狭い」という逆の結論になる（実際に 1 度そう報告しかけた）. */
	.entry-content .pa-hrep-quote__name {
		margin-top: calc(8.6 * var(--pa-hrep-quote-sp-unit));
		padding-right: 0;
		color: var(--pa-palette-gold);
		font-family: var(--pa-font-family-serif);
		font-size: calc(19.4 * var(--pa-hrep-quote-sp-unit));
		font-weight: 400;
		line-height: calc(29.4 * var(--pa-hrep-quote-sp-unit));
		text-align: left;
	}

	/* 罫線をやめてダッシュにする。ダッシュは飾りなので擬似要素のままでよい。

	   🚨 **ダッシュだけ字を小さくする。**移行元の横棒は**10 巻すべてで 9.36px** の
	   同じ長さである。全角ダッシュ（`—`）を名前と同じ大きさで描くと 11.5px になり、
	   1 本だけ 23% 長い棒になる（直す前は名前が大きかったので 12.5px・+34%）。
	   0.84em にすると墨が 9.35px になる。

	   間の空きも移行元に合わせる（10 巻の平均 4.3px）。🚨 **外余白をそのまま
	   4.3px にしてはいけない。**全角ダッシュは字面が `em` より狭く、墨の右に
	   2.1px の空白が残る。外余白はその差を引いた 2.2px（＝ 0.23em）にする. */
	.entry-content .pa-hrep-quote__name::before {
		content: "—";
		display: inline;
		width: auto;
		margin-right: 0.23em;
		border-top: 0;
		font-size: 0.84em;
		vertical-align: baseline;
	}

	/* 🚨 **携帯幅でも勲章を出す**（訂正・2026-09-04 12:3x JST）。
	   はじめは「移行元スマホ版に焼き込まれていない」として隠していた。**誤りだった。**

	   移行元スマホ版は主役の写真が専用の別ファイル（680 × 370）で、**勲章を丸ごと
	   含んでいる**（赤い画素の下端が y=362 で、画像の下端 369 に接しない＝切れていない）。
	   dev はユーザー裁定でパソコン版の写真（800 × 376・勲章が下端で切れる）を使うので、
	   **続きのこの半分を出さないと勲章が切れて見える**。ユーザーの目視で
	   「PC・スマホどちらも切れている」と差し戻された.

	   絵は白地を透明へ抜いてあるので、白い囲みを外した携帯幅でも地色を汚さない. */


	/* 巻ごとの字間（携帯幅）。移行元スマホ版は**巻ごとに字の詰め方が違う**。
	   1 字あたりの墨は画像の画素で 22.70〜25.80 の幅があり、1 つの値では合わない
	   （vol.2 は 23.96・vol.8 は 22.75 と詰まっていて、揃えないと 1 行目が器から
	   溢れて 3 行になる。幅 320 / 375 / 414px で実測）。

	   値は「移行元の 1 字あたりの墨 − dev の 1 字あたりの墨」で、**両側とも同じ
	   測り方（暗い画素の左端から右端まで）で測った**。単位は移行元の画像の 1 画素
	   （`--pa-hrep-quote-sp-unit`）である。

	   🚨 vol.2 だけは 1 行目が溢れて墨を測れないので、他 9 巻の平均（24.56）を
	   dev 側の値として使った. */
	.entry-content .pa-hrep-quote--v01 {
		--pa-hrep-quote-sp-track: calc(0.17 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v02 {
		--pa-hrep-quote-sp-track: calc(-0.93 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v03 {
		--pa-hrep-quote-sp-track: calc(0.41 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v04 {
		--pa-hrep-quote-sp-track: calc(0.17 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v05 {
		--pa-hrep-quote-sp-track: calc(0.17 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v06 {
		--pa-hrep-quote-sp-track: calc(0.23 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v07 {
		--pa-hrep-quote-sp-track: calc(0.91 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v08 {
		--pa-hrep-quote-sp-track: calc(-1.73 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v09 {
		--pa-hrep-quote-sp-track: calc(0.17 * var(--pa-hrep-quote-sp-unit));
	}

	.entry-content .pa-hrep-quote--v10 {
		--pa-hrep-quote-sp-track: calc(0.62 * var(--pa-hrep-quote-sp-unit));
	}
}

/* ==============================================================
 * 本文の器の高さ ─ `min-height` の箱の数え方（Bug #4081 の原因 ③）
 * ==============================================================
 *
 * 移行元はこの画面で全称の `box-sizing` を持たない。読み込む CSS は
 * `css/import.css`（→ `common.css` ＋ `css/style.css`）と
 * `introduce/happyreport/css/style.css` と同 `style_happyreport.css` で、
 * この 4 本に `* { box-sizing: … }` は 1 本も無い（`.circleTitle` のような
 * 個別の規則だけ）。つまり器はブラウザ既定の **content-box** で数えられ、
 * `min-height` は**内余白を含まない**値になる。器の高さは
 * 「min-height ＋ 上下の内余白」である。
 *
 * テーマは `main.css` の初期化で `*, *::before, *::after { box-sizing: border-box }`
 * を全体に効かせるので、**同じ宣言が「内余白を含む値」に変わる**。上下の内余白を
 * 持つ器だけが、その内余白のぶん低くなっていた。
 *
 * 🚨 **宣言は移行元と 1 文字も違わない。**上に写した 50 個の `min-height` は
 * 移行元の値そのままである（移行元だけ 0 個・写しだけ 0 個・値の食い違い 0 個を
 * 機械で確認した）。**同じ文字が書いてあることを、直った証拠にしてはいけない。**
 *
 * `min-height` の数字を「移行元の値 ＋ 上下の内余白」に書き換える手もあるが、
 * 箱の数え方を戻すほうを選ぶ。後から内余白を触っても値がずれず、移行元の CSS と
 * 見比べたときにも食い違って見えないためである。
 *
 * **幅は変わらない。**これらの器は幅を指定しておらず、幅が `auto` の塊は
 * 「外余白 ＋ 罫線 ＋ 内余白 ＋ 中身」で親の幅を埋めるので、箱の数え方を変えても
 * 使われる幅は同じである。
 *
 * 当て先は「`min-height` と上下の内余白の**両方**を持つ器」だけの 14 個。上下の
 * 内余白が 0 の器（36 個）は、どちらの数え方でも高さが同じなので触らない。
 *
 * 移行元の実測との突き合わせ（幅 1440px・2026-09-06 11:30〜11:32 取得）:
 * 14 個のうち **12 個**で「min-height ＋ 上下の内余白」が実測と 0.5px 未満で
 * 一致した。残る 2 個（`#hrep06 .p09` は予測 262 対 実測 308.63、`#hrep08 .p06` は
 * 予測 230 対 実測 281.22）は**中身が `min-height` を超える**ので、この直しでは
 * 高さが動かない。**動いたら当て先を広げすぎている。**
 *
 *   #hrep01 .p03   min-height 200 ＋ 内余白 30  ＝ 230
 *   #hrep01 .p04   min-height 290 ＋ 内余白 30  ＝ 320
 *   #hrep02 .p02   min-height 180 ＋ 内余白 30  ＝ 210
 *   #hrep04 .p04   min-height 128 ＋ 内余白 33  ＝ 161
 *   #hrep04 .p05   min-height 250 ＋ 内余白 27  ＝ 277
 *   #hrep06 .p09   min-height 235 ＋ 内余白 27  ＝ 262（中身が超えるため動かない）
 *   #hrep08 .p06   min-height 160 ＋ 内余白 70  ＝ 230（中身が超えるため動かない）
 *   #hrep09 .p02   min-height 130 ＋ 内余白 20  ＝ 150
 *   #hrep09 .p04   min-height 228 ＋ 内余白 35  ＝ 263
 *   #hrep09 .p09   min-height 170 ＋ 内余白 30  ＝ 200
 *   #hrep09 .p10   min-height 165 ＋ 内余白 30  ＝ 195
 *   #hrep10 .p03   min-height 80  ＋ 内余白 295 ＝ 375
 *   #hrep10 .p05   min-height 170 ＋ 内余白 70  ＝ 240
 *   #hrep10 .p10   min-height 160 ＋ 内余白 15  ＝ 175
 *
 * **携帯幅（749px 以下）では何も起きないので、幅で囲わない。**このファイルの
 * 「携帯幅は移行元スマホ版の本文の写真を出す」節（`@media (max-width: 749px)`）が、
 * ここに並べた 14 個を**すべて含む形で `min-height: 0` を当てている**（機械で全数
 * 照合した）。`min-height` が 0 なら箱の数え方は高さに影響しないので、この規則は
 * 携帯幅では効き目を持たない。携帯幅の差は Bug #4054 が別に扱う。
 * ============================================================== */
.entry-content #hrep01 .p03,
.entry-content #hrep01 .p04,
.entry-content #hrep02 .p02,
.entry-content #hrep04 .p04,
.entry-content #hrep04 .p05,
.entry-content #hrep06 .p09,
.entry-content #hrep08 .p06,
.entry-content #hrep09 .p02,
.entry-content #hrep09 .p04,
.entry-content #hrep09 .p09,
.entry-content #hrep09 .p10,
.entry-content #hrep10 .p03,
.entry-content #hrep10 .p05,
.entry-content #hrep10 .p10 {
	box-sizing: content-box;
}

/* ==============================================================
 * ご夫婦のプロフィールの囲みも、箱の数え方を移行元にそろえる（Bug #4206）
 * ==============================================================
 * 上の 14 個と**まったく同じ型**である。移行元の指定は
 * `min-height: 262px; padding: 0 0 10px 0` で、移行元は箱の数え方が content-box
 * なので **262 ＋ 10 = 272**、テーマは border-box なので**内余白を含めて 262** に
 * なる。幅 1440px の実測は 移行元 272.00 対 dev 262.00 だった。
 *
 * 🚨 **上の節の当て先の洗い出しから漏れていた 1 本である**（Bug #4123）。
 * 洗い出しが移行元の CSS のうち `#hrepNN .pXX` の形の規則しか見ていなかった。
 * 移行元の CSS を全数で数え直すと、`min-height` と上下の内余白を両方持つ規則は
 * **15 本**あり、14 本がその形・**残り 1 本がこれ**である。取りこぼしはこれだけ。
 *
 * 🚨 **上の節と違い、幅で囲う必要がある。**上の 14 個は携帯幅の節が
 * `min-height: 0` を当てているので箱の数え方が効かないが、**この囲みには
 * その打ち消しが無い**。囲わないと携帯幅でも 10px 高くなる（携帯幅は
 * Bug #4054 の持ち場なので、この Task では 1px も動かさない）。
 * ============================================================== */
@media (min-width: 750px) {
	.entry-content #hrep03 .marriage_vol3_prof {
		box-sizing: content-box;
	}
}

/* ==============================================================
 * 携帯幅で、本文の塊が持つ「内側の空き」を落とす（Bug #4227）
 * ==============================================================
 *
 * ## 何が起きていたか
 *
 * ユーザーから「携帯幅の段落の空きが移行元スマホ版より広い」と指摘があった
 * （2026-09-07・巻 09）。原因を 2 つに切り分けて調べた。
 *
 *   1. 段落の空きの表（`paragraph-gaps.json`）の値が違う → **違わない**
 *   2. 表は正しいが、別のところが空きを作っている → **こちらだった**
 *
 * 移行元スマホ版と dev を幅 375px で 10 巻とも実測し、文末 16 字で段落を突き合わせた
 * ところ、**一致した 134 段落のうち 133 段落は上下の外余白がぴたりと同じ**だった
 * （残り 1 件は巻 09 の `span` で、別の話）。
 *
 * 空きを作っていたのは**塊の内側の空き（`padding`）**である。移行元パソコン版は
 * 横へ回り込ませた写真を避けるために `padding-top` を積んでおり、その値が携帯幅にも
 * そのまま届いていた。**携帯幅では写真が縦に積まれるので、この空きは何も避けていない
 * ただの空白になる**（実測でも、空きを持つ塊 68 個の中に写真は 1 つも入っていない）。
 *
 *   移行元スマホ版 … 1 ページあたり 50px（巻 10 だけ 107px）・持つ塊は 2〜3 個
 *   dev（直す前）  … 1 ページあたり 132〜452px・持つ塊は 6〜12 個
 *
 * 巻 06 の `.p03` は `padding-top: 295px` を持っていた。
 *
 * ## 残す例外
 *
 * 🚨 **ご夫婦の囲み（`marriage_volN_name` / `marriage_vol3_prof`）と、冒頭の引用
 * （`pa-hrep-quote…`）の内側の空きは残す。**どちらも移行元の実測で別の実装が値を
 * 決めているので、ここで 0 にするとその実装が 1 度も効かなくなる（段落の空きの表も
 * 同じ理由でこの 2 つを対象から外している）。囲みの中の `p.name` も巻き込まないよう、
 * **子孫まで**除外する。
 *
 * 🚨 **左右の空きは触らない。**柱の幅を作っているのは左右の空きなので、上下だけを
 * 落とす。
 *
 * 🚨 **除外は `:not()` の中にまとめる。**この規則の宣言は上下の空きだけなので、
 * 除外がほかの宣言へ巻き添えで掛かる心配はない.
 * ============================================================== */
@media (max-width: 749px) {
	.entry-content :is(#hrep01, #hrep02, #hrep03, #hrep04, #hrep05, #hrep06, #hrep07, #hrep08, #hrep09, #hrep10) .bg_white *:not(
		[class*="marriage_vol"],
		[class*="marriage_vol"] *,
		[class*="pa-hrep-quote"],
		[class*="pa-hrep-quote"] *
	) {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ===== ここから下は build-paragraph-gap-css.py の生成物
 * ==============================================================
 * 携帯幅の段落の間隔を移行元スマホ版にそろえる（Bug #3652）
 * ==============================================================
 *
 * 移行元スマホ版は段落ごとに下の外余白を作り分けている（`p.mb20` / `p.mb25` /
 * `p.mb50` / 目印なし）。dev はこれまで**いちばん多い 20px を全段落に配って**いた。
 * 移行元の 181 段落を幅 375px で実測した内訳は次のとおりで、56 段落がずれていた。
 *
 *   20px … 145 段落      25px … 17 段落
 *   50px … 16 段落        0px … 23 段落（目印なし・`p.tac.fs_b`）
 *
 * 🚨 **移行元は上の外余白を 1 つも持たない**（181 段落すべて 0px）。間隔は前の段落の
 * 下の外余白だけで決まる。dev は逆に上だけで作っていたので、値を写すだけでは
 * 区画の先頭と末尾がずれる。上を 0 にして、下で作る形へ置き換える。
 *
 * 当たり先の決め方（詳しくは `tests-retired/pa-cms-happyreport-paragraph-gaps/paragraph-gaps.json`）
 *
 *   1. 移行元スマホ版 `.report_body` の段落を上から順に読む（写真の段落は飛ばす）
 *   2. その段落の文章の末尾 16 字で、dev のいちばん内側の塊を探す
 *   3. 同じ塊に 2 つの段落が当たったら、**後の段落の余白**をその塊へ与える
 *      （181 段落のうち、これに当たるのは 3 件だけである）
 *
 * 🚨 **ご夫婦の囲みと「一覧ページにもどる」は対象から外してある。**どちらも移行元の
 * 実測で別の実装が余白を決めており（囲みは上下 40px・ナビは上 2px）、ここで上書き
 * するとその実装が 1 度も効かなくなる。
 *
 * 🚨 **囲みの前の空きが 40px になるのは正しい。**本文の最後の段落の下 20px は、
 * 囲みの上 40px と相殺して 40px になる。移行元スマホ版も同じ 40px である
 * （巻 1 / 5 / 8 / 9 を本番で実測）。
 *
 * 🚨 **当たり先へ `.bg_white` を挟む（詳しさのため）。**上の節に
 * `.entry-content :is(#hrep01, …) .bg_white > *` と `… .bg_white > .clearfix > *` を
 * カンマで並べた規則がある。**カンマで並べた当たり先の強さは、実際に当たった側で
 * 決まる。**本文の塊は `.clearfix` の中にあるので後者（1,3,0）が当たり、
 * `.entry-content #hrepNN .p01`（1,2,0）では後に書いても負ける（CDP で勝っている
 * 規則を読んで分かった）。`.bg_white` を挟んで (1,3,0) にし、後に書いて勝たせている。
 *
 * 🚨 **入れ子の段落が最後の子のときは、子の「上」で空きを与える。**下の外余白は
 * 親を突き抜けて相殺されるので（親 50・子 20 なら大きいほうの 50 が出る）、親の下では
 * 移行元と同じ空きにならない。表の「上の空き」の欄がその組で、**下の空きの規則より
 * 後ろに置いて勝たせている**（同じ詳しさなので読み込み順で決まる）。
 *
 * 🚨 **この節は生成物である。**手で直すと次の生成で消える。値を変えるときは
 * `tests-retired/pa-cms-happyreport-paragraph-gaps/build-paragraph-gap-css.py` と、その表を直す。
 *
 * 生成した規則の数: 5 本（当たり先 157 件・うち上で与えるもの 1 件）*/

@media (max-width: 749px) {
	/* 下の空き 0px（3 件）*/
	.entry-content #hrep08 .bg_white .p08txt,
	.entry-content #hrep09 .bg_white .p10txt,
	.entry-content #hrep10 .bg_white .p10txt {
		margin-top: 0;
		margin-bottom: 0px;
	}

	/* 下の空き 20px（122 件）*/
	.entry-content #hrep01 .bg_white .p01,
	.entry-content #hrep01 .bg_white .p02,
	.entry-content #hrep01 .bg_white .p03txt,
	.entry-content #hrep01 .bg_white .p04 > p:nth-of-type(1),
	.entry-content #hrep01 .bg_white .p05,
	.entry-content #hrep01 .bg_white .p06,
	.entry-content #hrep01 .bg_white .p07,
	.entry-content #hrep01 .bg_white .p08,
	.entry-content #hrep02 .bg_white .p01,
	.entry-content #hrep02 .bg_white .p02 > p:nth-of-type(1),
	.entry-content #hrep02 .bg_white .p02txt,
	.entry-content #hrep02 .bg_white .p03 > p:nth-of-type(1),
	.entry-content #hrep02 .bg_white .p03 > p:nth-of-type(2),
	.entry-content #hrep02 .bg_white .p04txt,
	.entry-content #hrep02 .bg_white .p05,
	.entry-content #hrep02 .bg_white .p05txt,
	.entry-content #hrep02 .bg_white .p06,
	.entry-content #hrep02 .bg_white .p07 > p:nth-of-type(1),
	.entry-content #hrep03 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep03 .bg_white .p02 > p:nth-of-type(1),
	.entry-content #hrep03 .bg_white .p02-2 > p:nth-of-type(1),
	.entry-content #hrep03 .bg_white .mb30 + .mb30,
	.entry-content #hrep03 .bg_white .p02txt,
	.entry-content #hrep03 .bg_white .p03,
	.entry-content #hrep03 .bg_white .p04,
	.entry-content #hrep03 .bg_white .p04txt,
	.entry-content #hrep04 .bg_white .p01,
	.entry-content #hrep04 .bg_white .p01txt,
	.entry-content #hrep04 .bg_white .p02,
	.entry-content #hrep04 .bg_white .p02 > p:nth-of-type(1),
	.entry-content #hrep04 .bg_white .p02txt,
	.entry-content #hrep04 .bg_white .p03txt,
	.entry-content #hrep04 .bg_white .p03,
	.entry-content #hrep04 .bg_white .p03 > p:nth-of-type(1),
	.entry-content #hrep04 .bg_white .p04,
	.entry-content #hrep04 .bg_white .p04txt,
	.entry-content #hrep04 .bg_white .p05,
	.entry-content #hrep04 .bg_white .p05txt,
	.entry-content #hrep05 .bg_white .p01,
	.entry-content #hrep05 .bg_white .p01txt,
	.entry-content #hrep05 .bg_white .p02,
	.entry-content #hrep05 .bg_white .p03,
	.entry-content #hrep05 .bg_white .paddingt0 > div:nth-of-type(5),
	.entry-content #hrep05 .bg_white .p03txt + .p03txt,
	.entry-content #hrep05 .bg_white .p04,
	.entry-content #hrep05 .bg_white .p05,
	.entry-content #hrep05 .bg_white .paddingt0 > div:nth-of-type(9),
	.entry-content #hrep05 .bg_white .p05txt + .p05txt,
	.entry-content #hrep05 .bg_white .p06txt,
	.entry-content #hrep05 .bg_white .p06,
	.entry-content #hrep05 .bg_white .p06 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p01 > p:nth-of-type(2),
	.entry-content #hrep06 .bg_white .p01txt,
	.entry-content #hrep06 .bg_white .p02,
	.entry-content #hrep06 .bg_white .p02txt,
	.entry-content #hrep06 .bg_white .p02txt > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p03,
	.entry-content #hrep06 .bg_white .p03txt,
	.entry-content #hrep06 .bg_white .p04,
	.entry-content #hrep06 .bg_white .p04 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p05,
	.entry-content #hrep06 .bg_white .p05 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p05txt,
	.entry-content #hrep06 .bg_white .p06,
	.entry-content #hrep06 .bg_white .p06 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p06txt,
	.entry-content #hrep06 .bg_white .p07-1txt,
	.entry-content #hrep06 .bg_white .p07-2txt,
	.entry-content #hrep06 .bg_white .p07-2txt > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p07-2txt > p:nth-of-type(2),
	.entry-content #hrep06 .bg_white .p08,
	.entry-content #hrep06 .bg_white .p08txt,
	.entry-content #hrep06 .bg_white .p08txt > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p08txt > p:nth-of-type(2),
	.entry-content #hrep06 .bg_white .p09,
	.entry-content #hrep06 .bg_white .p09 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p01txt:first-child,
	.entry-content #hrep07 .bg_white .p01txt > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p02txt,
	.entry-content #hrep07 .bg_white .p02,
	.entry-content #hrep07 .bg_white .p03txt,
	.entry-content #hrep07 .bg_white .paddingt0 > div:nth-of-type(6),
	.entry-content #hrep07 .bg_white .p03,
	.entry-content #hrep07 .bg_white .p03 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p04txt,
	.entry-content #hrep07 .bg_white .p04,
	.entry-content #hrep07 .bg_white .p05txt,
	.entry-content #hrep07 .bg_white .p06txt,
	.entry-content #hrep07 .bg_white .p06,
	.entry-content #hrep07 .bg_white .paddingt0 > div:nth-of-type(13),
	.entry-content #hrep07 .bg_white .p01txt + .p01txt,
	.entry-content #hrep07 .bg_white .p07,
	.entry-content #hrep07 .bg_white .p07 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p08 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p01,
	.entry-content #hrep08 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p01,
	.entry-content #hrep09 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p02,
	.entry-content #hrep09 .bg_white .p02txt,
	.entry-content #hrep09 .bg_white .p02txt-03,
	.entry-content #hrep09 .bg_white .p02txt-03 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p03,
	.entry-content #hrep09 .bg_white .p04,
	.entry-content #hrep09 .bg_white .p05,
	.entry-content #hrep09 .bg_white .p05 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p08 > p:nth-of-type(2),
	.entry-content #hrep09 .bg_white .p09,
	.entry-content #hrep09 .bg_white .p10 > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p01,
	.entry-content #hrep10 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p02,
	.entry-content #hrep10 .bg_white .p03,
	.entry-content #hrep10 .bg_white .p04txt,
	.entry-content #hrep10 .bg_white .p04txt-02 > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p05,
	.entry-content #hrep10 .bg_white .p05txt,
	.entry-content #hrep10 .bg_white .p06,
	.entry-content #hrep10 .bg_white .p06txt,
	.entry-content #hrep10 .bg_white .p07 {
		margin-top: 0;
		margin-bottom: 20px;
	}

	/* 下の空き 25px（17 件）*/
	.entry-content #hrep08 .bg_white .p06,
	.entry-content #hrep08 .bg_white .p06txt > p:nth-of-type(3),
	.entry-content #hrep08 .bg_white .p06txt-02,
	.entry-content #hrep08 .bg_white .p07,
	.entry-content #hrep08 .bg_white .p07txt,
	.entry-content #hrep09 .bg_white .p06,
	.entry-content #hrep09 .bg_white .p06txt,
	.entry-content #hrep09 .bg_white .p07,
	.entry-content #hrep09 .bg_white .p07txt,
	.entry-content #hrep09 .bg_white .p07txt-02,
	.entry-content #hrep09 .bg_white .p08txt,
	.entry-content #hrep09 .bg_white .p08txt > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p07txt > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p08,
	.entry-content #hrep10 .bg_white .p09 > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p09txt,
	.entry-content #hrep10 .bg_white .p10 {
		margin-top: 0;
		margin-bottom: 25px;
	}

	/* 下の空き 50px（15 件）*/
	.entry-content #hrep08 .bg_white .p01txt,
	.entry-content #hrep08 .bg_white .p02txt,
	.entry-content #hrep08 .bg_white .p02,
	.entry-content #hrep08 .bg_white .p03txt,
	.entry-content #hrep08 .bg_white .p03txt-02,
	.entry-content #hrep08 .bg_white .p04 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p04txt,
	.entry-content #hrep08 .bg_white .p05 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p05txt,
	.entry-content #hrep08 .bg_white .p08,
	.entry-content #hrep09 .bg_white .p02txt-02,
	.entry-content #hrep09 .bg_white .p04txt,
	.entry-content #hrep09 .bg_white .p05txt,
	.entry-content #hrep10 .bg_white .p03txt,
	.entry-content #hrep10 .bg_white .p04 {
		margin-top: 0;
		margin-bottom: 50px;
	}

	/* 上の空き 50px（1 件・入れ子の段落が最後の子で下が相殺される組）*/
	.entry-content #hrep09 .bg_white .p02txt-03 > p:nth-of-type(1) {
		margin-top: 50px;
	}
}
/* ===== ここまでが build-paragraph-gap-css.py の生成物 ===== */

/* ===== ここから下は build-blank-line-css.py の生成物
 * ==============================================================
 * しあわせレポート詳細のパソコン幅で、移行元の空行を段落の外余白として置き直す
 * （Bug #4081 の原因 ①・Task #4129）。
 *
 * 移行元は連続した改行 `<br><br>` で空きを 1 行つくる。WordPress の取り込み
 * （`wpautop`）はその位置を段落 `<p>` の切れ目に変えるので、dev では空きが消える。
 * 段落の切れ目そのものが 1 回の行送りをつくるため、足すのは
 * **「移行元の改行の本数 − 1」行ぶん**である。
 *
 * 器の中の当たり先 38 件（合計 1408.0px）・器と器の間の当たり先 1 件（合計 70.4px）。表は
 * `tests-retired/pa-cms-happyreport-blank-lines/blank-lines.json` が正本で、
 * この節は `build-blank-line-css.py` が作る。**手で書き換えない。**
 *
 * 🚨 携帯幅（749px 以下）はこの節の対象外である（Bug #4054 の持ち場）。
 * 🚨 当たり先に `.bg_white` を挟んで詳しさを上げてある（すぐ上の節がカンマで
 *    並べた当たり先を持つため）。
 */
@media (min-width: 750px) {
	.entry-content #hrep02 .bg_white .p03 > p:nth-of-type(2),
	.entry-content #hrep04 .bg_white .p02 > p:nth-of-type(1),
	.entry-content #hrep04 .bg_white .p03 > p:nth-of-type(1),
	.entry-content #hrep05 .bg_white .p06 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p01 > p:nth-of-type(2),
	.entry-content #hrep06 .bg_white .p02txt > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p04 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p05 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p06 > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p07-2txt > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p07-2txt > p:nth-of-type(2),
	.entry-content #hrep06 .bg_white .p08txt > p:nth-of-type(1),
	.entry-content #hrep06 .bg_white .p08txt > p:nth-of-type(2),
	.entry-content #hrep06 .bg_white .p09 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p01txt > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p03 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p07 > p:nth-of-type(1),
	.entry-content #hrep07 .bg_white .p08 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p04 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p05 > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p06txt > p:nth-of-type(1),
	.entry-content #hrep08 .bg_white .p06txt > p:nth-of-type(2),
	.entry-content #hrep08 .bg_white .p06txt > p:nth-of-type(3),
	.entry-content #hrep09 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p02txt-03 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p05 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p08 > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p08 > p:nth-of-type(2),
	.entry-content #hrep09 .bg_white .p08txt > p:nth-of-type(1),
	.entry-content #hrep09 .bg_white .p10 > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p01 > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p04txt-02 > p:nth-of-type(1) {
		margin-top: 35.2px;
	}

	.entry-content #hrep08 .bg_white .p06txt > p:nth-of-type(3) {
		margin-bottom: 35.2px;
	}

	.entry-content #hrep10 .bg_white .p07txt > p:nth-of-type(1),
	.entry-content #hrep10 .bg_white .p09 > p:nth-of-type(1) {
		margin-top: 70.4px;
	}

	/* 巻 02: 移行元は本文の束（div.clearfix）の末尾に <br><br> を置き、ご夫婦の囲みとの間に 2 行の空きを作る。取り込みでこの 2 本が落ちた。器の中ではなく器の外なので、束そのものに下の内余白として与える（外余白だと親から抜け出るおそれがある）。 */
	.entry-content #hrep02 .bg_white > .clearfix {
		padding-bottom: 70.4px;
	}
}

/* ===== ここまでが build-blank-line-css.py の生成物 ===== */

/* ==============================================================
 * しあわせレポート詳細の上の 2 区画（Bug #6937・携帯幅だけ）
 *
 * 写し元は移行元のスマートフォン版が読む
 * `public/sp/introduce/happyreport/css/sp_style.css` と同 `css/style.css` である。
 * 値は写し元の宣言をそのまま持ってきた（組み替えていない）。
 *
 *   #report            { padding: 25px 0; line-height: 2 }
 *   #report .box       { padding: 25px 6.25% 32px }
 *   #report .heading h2{ font-size: 28px; 游明朝; bold; height: 70px;
 *                        background: parts.png no-repeat 50% 50%; text-align: center }
 *   #report .heading .mv_cont   { width: auto; text-align: center; margin: 15px auto 30px }
 *   #report .heading-cont       { text-align: left }
 *   #report .heading .title_txt { width: 100%; font-size: 16px; bold;
 *                                 line-height: 28.8px; color: #322422; margin-bottom: 20px }
 *   #report .heading p          { font-size: 16px }
 *
 * 🚨 **移行元の id（`report`）は使わない。**本文の別の区画と衝突しうるので、
 * 印を付けた独自の類名へ当てる。
 *
 * 🚨 **絵の寸法は移行元の属性に合わせる。**挿絵の実寸は 150×251 だが、移行元は
 * `width="156" height="250"` を書いており、描かれるのはそちらである。
 * ============================================================== */

@media (max-width: 749px) {
	.entry-content .pa-hrep-head-sp {
		display: block;
	}

	/* 帯の絵。実寸 750×240 を画面の幅いっぱいに敷く（本番の実測は 375×120）. */
	.entry-content .pa-hrep-head-sp__band {
		margin: 0;
	}

	.entry-content .pa-hrep-head-sp__band img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 題字の塊。移行元 `#report` の上下の余白と行送りをここが持つ. */
	.entry-content .pa-hrep-head-sp__heading {
		padding: 25px 6.25% 32px;
		line-height: 2;
		text-align: center;
	}

	/* 移行元 `#report .heading h2`。ピンクの刷毛は背景の絵である. */
	.entry-content .pa-hrep-head-sp__title {
		height: 70px;
		margin: 0;
		background-image: url("../../introduce/images/happyreport/parts.png?ver=bdba3ff75b30");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		color: inherit;
		font-family: "游明朝", serif;
		font-size: 28px;
		font-weight: bold;
		text-align: center;
	}

	/* 移行元 `#report .heading .mv_cont`。器が中央寄せなので絵も中央に来る. */
	.entry-content .pa-hrep-head-sp__illust {
		width: auto;
		margin: 15px auto 30px;
		text-align: center;
	}

	/* 移行元 `#report .heading-cont`。ここから下は左寄せに戻る. */
	.entry-content .pa-hrep-head-sp__body {
		text-align: left;
	}

	/* 移行元 `#report .heading .title_txt`. */
	.entry-content .pa-hrep-head-sp__lead {
		width: 100%;
		margin-bottom: 20px;
		color: #322422;
		font-size: 16px;
		font-weight: bold;
		line-height: 28.8px;
	}

	/* 移行元 `#report .heading p` と `#report p`（行送り 2）. */
	.entry-content .pa-hrep-head-sp__text {
		margin: 0;
		font-size: 16px;
		line-height: 2;
	}
}