@charset "UTF-8";

/* ==============================================================
 * 来店予約・資料請求の帯（移行元 .box_support）
 * ==============================================================
 *
 * 移行元の全ページの本文の末尾に入っている帯である。移行元は共通の
 * `https://www.p-a.jp/css/style.css` で組んでおり、テーマには 1 行も写されて
 * いなかった。そのため投入した 5,488 記録のうち 4,849 件（88.4%）で飾りが全部
 * 落ち、2 列が縦に並び、写真 3 枚が重ならずに縦に伸びていた（Bug #2235）。
 *
 * 移行元の組み（原本 `/css/style.css` を配信元から取得して採取・2026-08-27）
 *   .box_support        背景 #fdf3df / 内余白 上下 75px / 幅 1280px / 文字 24px /
 *                       中央ぞろえ / 上下に #a08046 の 20px の罫線 / 下外余白 75px
 *   .box_support_inner  幅 1100px・中央・flex・両端ぞろえ（左に写真つきの文章、
 *                       右に自動で切り替わる写真）
 *   .box_support p      文字色 #000 / 左ぞろえ / 字間 0.1em / 行の高さ 2.0
 *   .box_support .inner_text  文字 15px
 *   .box_menu2          幅 1100px・中央・flex・両端ぞろえ・上内余白 75px
 *   #box-photo          525x320px・罫線 1px #a08046・はみ出しを隠す
 *   #box-photo li       絶対配置・18 秒周期の入れ替え（-2s / 4s / 10s の 3 枚）
 *
 * 実測（移行元 https://www.p-a.jp/guide/ ・幅 1440px・2026-08-27 採取）
 *   帯 1280x668px（左端 80px）/ 内側 1100x334px（左端 170px）/
 *   左の列 533x334px / 写真 527x322px（左端 743px）/ 写真 1 枚 525x320px /
 *   ボタンの列 1100x144px / ボタン 1 個 525x69px
 *
 * ------------------------------------------------------------------
 * なぜ main.css へ足さないか
 * ------------------------------------------------------------------
 * `main.css` は 7 つの枠が同時に触る唯一の共有ファイルで、CSS の節を交互に混ぜて
 * も構文が壊れないため、自動マージが通っても内容だけが壊れる。この帯は 150 行
 * 規模の新しい部品なので、既存の `form-frame.css` / `otocon-landing.css` と同じ
 * 形で別ファイルに切り出す。読み込みは `inc/support-band.php` が、本文に帯を
 * 持つページだけで行う。
 *
 * ------------------------------------------------------------------
 * 上の外余白（margin-top）は宣言しない
 * ------------------------------------------------------------------
 * 移行元は `margin: 0 auto 75px` の一括指定で上を 0 にしているが、ここでは
 * 上を宣言しない。会員紹介の診断ページだけが読む
 * `assets/introduce/css/style_introduce.css` の 199 行に
 * `.box_support { margin-top: 100px }` があり、移行元でも同じ順（共通 →
 * 診断ページ）で 100px が勝つ。ここで 0 を書くと、読み込みの順によって
 * その 100px を消しうる。テーマの既定では帯の上外余白は 0 なので、
 * 宣言しなくても移行元と同じ値になる（dev の実測で 0px を確認済み）。
 * ============================================================== */

/* 帯そのもの。移行元の幅 1280px は本文の柱（1100px）より広く、柱の外へはみ出す。
   広げ方はテーマにすでにある形（幅と負の左右余白）に揃える。

   🚨 **訂正（Task #4281・2026-09-07）。**ここは以前「`max-width: 100vw` で止めて
   いるのは、画面が 1280px より狭いときに右へだけはみ出して横スクロールが出るのを
   避けるためである（移行元は狭い画面で右へはみ出すが、2026-09-01 のユーザー判断
   「横スクロールを写さない」に従う。**裁定 156・184**）」と書いていた。

   **その判断は裁定 346（2026-09-07・ユーザー決定）で上書きされた。**裁定 265・272
   （中間幅 750px 以上は移行元と同じく横スクロールを許容する）が優先する。
   **いま `max-width: 100vw` は携帯幅（749px 以下）のためだけに残してあり、
   750px 以上ではこのファイルの下の囲みが外す。**移行元と同じく、帯は 1,280px を
   保って紙面からはみ出し、横送りで届く。

   🚨 **`min(640px, 50vw)` を外してはいけない。**この式は幅で 2 つの姿を出し分けている。

   | 画面の幅 | `min(640px, 50vw)` が選ぶ側 | 左余白の意味 |
   |---|---|---|
   | 1280px より狭い | `50vw` | 画面の左端へ寄せる |
   | 1280px 以上 | `640px` | **1,280px の帯を器の中で中央に置く**（移行元と同じ） |

   移行元の実測（`method` の本文・2026-09-05）でも、**広い側は中央寄せ**である。

   | 画面の幅 | 移行元の器 | 移行元の帯の左端 |
   |---|---|---|
   | 750 / 1050px | 1,100 | **0** |
   | 1280px | 1,280 | **0** |
   | 1440px | 1,440 | **80** |
   | 1920px | 1,920 | **320** |

   🚨 **`calc(50% - 50vw)` に置き換えると、1281px 以上で左端が 0 に張り付いて移行元と
   ずれる**（1440px で 80 → 0、1920px で 320 → 0）。**Bug #3986 の直しでいったんそう
   置き換えて退行させ、3 班の実測で分かった**（Bug #4020・裁定 197）。

   ## 器が画面からはみ出す幅だけ、外余白を 0 にする

   `50%` は**親（本文の器）の幅の半分**である。Bug #3884 で器へ下限 1,100px を入れたので、
   **画面が 1,100px より狭いと器が画面からはみ出し、器の中心が画面の中心とずれる**。
   その幅だけ左端が右へ動いていた（750px で 175px・1050px で 25px）。

   境目は **1,100px ちょうど**である（dev の実ページを 1090〜1200px で 1px 刻みに測り、
   1,100px から器が画面の幅に付き従うことを確かめた。器に左右の内余白は無い）。

   **その幅では帯も器と同じだけ画面からはみ出しているので、外余白は 0 でよい.** */
.box_support {
	clear: both;
	width: 1280px;
	max-width: 100vw;
	margin-inline: calc(50% - min(640px, 50vw));
	padding: 75px 0;
	border-top: 20px solid #a08046;
	border-bottom: 20px solid #a08046;
	background-color: #fdf3df;
	color: #fff;
	font-size: 24px;
	/* 移行元の帯は行の高さを持たない（`normal`）。テーマの本文既定（1.5）が
	   流れ込むとボタンの行の高さが変わるため、移行元と同じ `normal` へ戻す. */
	line-height: normal;
	text-align: center;
}

/* 🚨 **器が画面からはみ出す幅では、帯の外余白を 0 にする。**Bug #3884 で
 * はじめての方への本文の器へ下限 1,100px を入れたので、画面が 1,100px より狭いと
 * 器が画面からはみ出し、`50%`（器の幅の半分）が画面の中心とずれる。そのぶん帯が
 * 右へ動く（750px で 175px・1050px で 25px。実測 12 通り・Bug #3986）。
 *
 * 🚨🚨 **この打ち消しは Task #4281 でも残す（2026-09-07）。**帯の上限
 * （`max-width: 100vw`）を 750px 以上で外したので「帯を切り下げていたときだけ
 * 必要な手当てだったのでは」と考えて**いったん撤去したが、実測で誤りだった。**
 * ずれの原因は帯の幅ではなく**器の下限 1,100px** なので、上限を外しても残る。
 * 撤去した状態で dev のはじめての方へを測った値（2026-09-07・#4288 の CSS を
 * 差し替えて計測）:
 *
 *   画面  750px  帯の左端 **175**（移行元 0）  中身の器の左端 265（移行元 90）
 *   画面 1000px  帯の左端  **50**（移行元 0）  中身の器の左端 140（移行元 90）
 *   画面 1099px  帯の左端 **0.5**（移行元 0）  中身の器の左端 90.5（移行元 90）
 *
 * 同じ幅で `/service/` と `/guide/` の帯の左端は 0 だった（器に下限が無いため）。
 * **ずれるのは下限 1,100px を持つはじめての方への画面だけである。**
 *
 * 🚨 **上限は 1099px にする。**1,100px ちょうどから器が画面の幅に付き従うので、
 * そこから上は素の規則（中央寄せ）が正しい。dev の実ページを 1090〜1200px で
 * 測って確かめた（Bug #4020）。
 *
 * 🚨 **当たり先をはじめての方への画面に絞る（2026-09-06 の自動レビューの P1）。**
 * 下限 1,100px を持つ器は `.pa-page--visitor` だけである（実測。`/service/` は
 * 下限なし、`/guide/` は上限 1,100px、支店紹介の入口は上限 1,120px）。
 * **絞らずに当てると、器が左右に余白を持つ画面で帯が右へずれる。**素の式の
 * `50% - min(640px, 50vw)` は、器が画面より狭いときは「器の左端から画面の左端まで」を
 * ちょうど打ち消す働きをしており、それを 0 で上書きすると打ち消しが消えるためである。
 * dev の実測（幅 900 / 1000 / 1099px）は次のとおり。
 *
 *   `/service/`  器 x 0            → ずれない
 *   `/guide/`    器 x 15           → **右へ 15px ずれ、右端が 15px はみ出す**
 *   支店紹介     器 x 45〜55       → **右へ 45〜55px ずれる**
 *
 * 器が画面からはみ出すのは下限 1,100px を持つ画面だけなので、打ち消しもそこだけに要る.
 */
@media (max-width: 1099px) {
	.pa-page--visitor .box_support {
		margin-inline: 0;
	}
}

/* 下の外余白は、クラス名を 3 回重ねて詳細度を上げる。本文の器が末尾の要素の
 * 下余白を消す指定を持っており（`main.css` の
 * `.entry-content.entry-content > :last-child` と
 * `.page-content__body.page-content__body > :last-child`。詳細度 0,3,0）、
 * 帯が本文の最後の要素になったときに移行元の 75px が消える（外部レビューの指摘）。
 *
 * 実測（2026-08-27・帯を持つ 5 ページ）: 投入した本文は帯の直後に必ず
 * `div.page_topArea`（「TOP」へ戻る画像）を置くため、**5 ページとも帯は最後の
 * 要素ではなく、下余白は 75px のまま**だった。つまり今のデータでは表に出ない。
 * ただし管理画面で末尾の `page_topArea` を消すと表に出るため、備えておく. */
.box_support.box_support.box_support {
	margin-bottom: 75px;
}

/* 🚨 **切り落としは携帯幅（749px 以下）だけに絞った（Task #4281・裁定 346）。**
 *
 * もとは幅の条件なしで `body:has(.box_support) { overflow-x: clip }` だった。
 * **750px 以上では、移行元と同じく帯が紙面からはみ出して横送りで届く姿にする**
 * ため外す（裁定 265・272・320）。
 *
 * **携帯幅では残す。**携帯用の帯（`.pa-conv-band`）が `width: 100vw` で画面いっぱいに
 * 広がるが、`100vw` は縦スクロールバーの幅を含むため、バーが場所を取る環境では
 * 右へ数 px はみ出す（このファイルの携帯幅の節の注釈を参照）。またリンクの行き先が
 * 解決できない環境では携帯用の帯が差し込まれず、パソコン版の帯（1,280px）が
 * 携帯幅にそのまま出る。どちらの場合もここで切り落とす。
 *
 * `clip` はスクロール領域を作らないので、貼り付く要素の動きを壊さない. */
@media (max-width: 749px) {
	body:has(.box_support) {
		overflow-x: clip;
	}
}

/* 上の段（左に写真つきの文章、右に自動で切り替わる写真）と、下の段（ボタン 2 つ）。
   移行元はどちらも同じ幅・同じ並べ方である. */
.box_support_inner,
.box_support .box_menu2 {
	display: flex;
	justify-content: space-between;
	width: 1100px;
	/* 🚨 **この上限は携帯幅（749px 以下）のためだけに残してある。**750px 以上では
	   このファイルの下の囲みが外す（Task #4281）。移行元の中身の器は
	   `width: 1100px; margin: 0 auto` だけで、上限を持たない
	   （`css/style.css` 1832 行）。 */
	max-width: 100%;
	margin-inline: auto;
}

/* 🚨 **750px 以上は上限を外し、移行元と同じ固定幅にする（Task #4281・裁定 346）。**
 *
 * 移行元の値は次のとおりで、どちらも上限を持たない。**画面が狭いと紙面から
 * はみ出し、横送りで届く。**
 *
 *   帯       `.box_support`      … 幅 1280px（`css/style.css` の当該規則）
 *   中身の器 `.box_support_inner` / `.box_support .box_menu2`
 *                                … 幅 1100px（`css/style.css` 1832 行・`margin: 0 auto`）
 *
 * 上限を置いていたのは「750px 以上で横スクロールを出さない」という方針
 * （裁定 156・184）に沿ったものだったが、**裁定 346（2026-09-07・ユーザー決定）で
 * 裁定 265・272 が上書きした。**
 *
 * 🚨 **携帯幅（749px 以下）の上限は素の規則に残してある。**理由は 2 つある。
 * ①携帯用の帯（`.pa-conv-band`）へ差し替わらない環境では、パソコン版の帯が
 * 携帯幅にそのまま出る ②その幅の切り落としも残してある（このファイルの上の節）。
 *
 * 🚨 **写真の器（`#box-photo`）の `max-width: 100%` は触らない。**あれは器が
 * 親より広くなれない場合の保険で、帯が 1,280px を保つ 750px 以上では効かない. */
@media (min-width: 750px) {
	.box_support {
		max-width: none;
	}

	.box_support_inner,
	.box_support .box_menu2 {
		max-width: none;
	}
}

/* 画面が 1,280px より狭いときだけ、帯を画面幅にそろえる（Bug #5064）。

   直す理由は裁定 497（2026-09-07 夜のユーザー判断）である。**750〜1,279px は画面幅に
   収める。1,280px 以上は移行元と同じ固定にする。**移行元も同じ 1,280px の固定で組んで
   いるので、これは「移行元の再現」ではなく裁定 497 が移行元より優先される場面である。
   共通のパンくず（Bug #5043・`main.css` の `.pa-breadcrumb__inner`）と同じ筋である。

   🚨 **上限（`max-width`）を足すのでは直らない。**この帯は**負の外余白で本文の柱の外へ
   押し出す**作りで（すぐ上の `margin-inline: calc(50% - min(640px, 50vw))`）、柱の幅は
   1,100px しかない。`max-width: 100%` を足すと帯の幅が 1,100px に落ち、**画面の右に
   100px の隙間が空く**（幅 1,200px の実測で、直す前の帯は左端 0・右端 1,280）。

   **代わりに幅の指定を外す。**押し出しの式がそのまま画面幅にそろえるので、幅 1,200px
   なら 1,100 + 50 × 2 = 1,200px にちょうど収まる。実測（2026-09-09 11:47 JST）:

     画面 1,200px → 帯 1,200px（送れる幅 80px → 0px）
     画面 1,279px → 帯 1,279px（送れる幅  1px → 0px）
     画面 1,280px → 帯 1,280px（変わらず）
     画面 1,440px → 帯 1,280px（変わらず）

   🚨 **上下の内余白は触らない。**あれは [Bug #2986](https://github.com/mationinc/wp-platform/issues/2986) が扱う別の話である。 */
@media (max-width: 1279px) {
	.box_support {
		width: auto;
	}
}

/* ボタンの段。移行元 `.box_support .box_menu2 { padding-top: 75px }`。
   `ul` なので、テーマの本文既定が付ける点・左内余白・下外余白を打ち消す
   （移行元の一覧は点を出さない）. */
.box_support .box_menu2 {
	margin-block: 0;
	padding-top: 75px;
	padding-inline: 0;
	list-style: none;
}

.box_support .box_menu2 > li {
	margin: 0;
	list-style: none;
}

/* 帯の中の文章。移行元は文字色・ぞろえ・字間・行の高さを持ち、外余白は持たない
   （テーマの本文既定は下に 25px を付けるので打ち消す）. */
.box_support p {
	margin: 0;
	color: #000;
	letter-spacing: 0.1em;
	line-height: 2;
	text-align: left;
}

.box_support .inner_text {
	font-size: 15px;
}

/* 写真も文章の中の画像も、器より広い写真に差し替えられてもはみ出さないようにする。
 *
 * 縦の位置合わせを文字の基準線（baseline）へ戻すのは、テーマが本文の画像に
 * `vertical-align: middle` を当てているためである。移行元は画像を行の中の箱の
 * まま扱い、位置合わせを変えていない（移行元・dev の両方で実測して確認）。
 * この 1 行で、左の列の高さが 319px から移行元と同じ 334px になり、ボタンの
 * 行の高さも 60px から 69px になる（行の高さ 48px・normal に対して、基準線より
 * 下に残る場所のぶんだけ行の箱が伸びる）. */
.box_support img {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

/* 自動で切り替わる写真の器。移行元は id で書いているので同じ形にするが、
   帯の中に限る（同じ id を持つ別の部品へ届かないようにする）. */
/* 器の外形は 527x322px である。移行元は box-sizing が既定（content-box）なので、
   525x320px の内側に 1px の罫線が外へ付く。このテーマは box-sizing: border-box を
   全体に効かせており、そのままだと外形が 525x320px（内側 523x318px）に縮む。
   移行元と同じ外形にするため、この器だけ content-box へ戻す. */
.box_support #box-photo {
	box-sizing: content-box;
	position: relative;
	width: 525px;
	height: 320px;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid #a08046;
}

.box_support #box-photo > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 3 枚を同じ位置へ重ね、18 秒周期で入れ替える。移行元と同じ指定である
 * （`:nth-child(1..3)` に遅延 -2s / 4s / 10s）。
 *
 * **入れ替えが成り立つのは、ちょうど 3 枚のときだけである。**下の節で、3 枚以外は
 * 動きを止めて 1 枚目を出したままにする。理由は枚数ごとに違う。
 *
 * - **2 枚以下**: 1 枚が見える区間は 1 周期の約 46% しかなく、2 枚では
 *   2 × 46% < 100% となって必ず空白の時間ができる（周期を縮めても埋まらない）
 * - **4 枚以上**: 位相は 3 つしか無いので、同じ位相の写真が重なる。位置も
 *   不透明度も完全に一致するため、**後ろにある 1 枚が常に上に描かれ、
 *   同じ位相の先の写真は一度も見えない**（外部レビューの指摘）
 *
 * 枚数に応じて周期と遅延を割り当て直せば 3 枚以外も回せるが、CSS では枚数ごとに
 * 遅延の表を書き並べることになる。**投入した 4,849 ページの写真はすべて
 * ちょうど 3 枚である**（移行元の差し込みファイル
 * `public/include/box_support.shtml` が 3 枚を固定で書いている）ため、
 * 起こらない場合のために表を増やすより、**予測できる形（止めて 1 枚目を出す）**
 * にするほうが安全と判断した. */
.box_support #box-photo > ul > li {
	position: absolute;
	top: 0;
	left: 0;
	width: 525px;
	height: 320px;
	max-width: 100%;
	margin: 0;
	list-style: none;
	opacity: 0;
	animation: boxphotoSlider 18s infinite;
}

.box_support #box-photo > ul > li:nth-child(1) {
	/* 移行元と同じく、最初の 1 枚だけは動きが効かない場でも見えるようにしておく. */
	opacity: 1;
	animation-delay: -2s;
}

.box_support #box-photo > ul > li:nth-child(2) {
	animation-delay: 4s;
}

.box_support #box-photo > ul > li:nth-child(3) {
	animation-delay: 10s;
}

/* ちょうど 3 枚でないときは動きを止め、1 枚目を出したままにする。
 * 判定は「3 枚目がある」かつ「4 枚目が無い」の 2 つで挟む。
 *
 * 実測（2026-08-27・写真を 1 / 2 / 3 / 4 / 5 枚にして 10 秒間を 0.5 秒ごとに
 * 20 回測定）: **どの枚数でも「全部が透明」になる瞬間は 0 回**。3 枚のときの
 * 不透明度の合計の最小値は 0.709 で、常にどれかが見えている. */
.box_support #box-photo > ul:not(:has(> li:nth-child(3))) > li,
.box_support #box-photo > ul:has(> li:nth-child(4)) > li {
	opacity: 0;
	animation: none;
}

.box_support #box-photo > ul:not(:has(> li:nth-child(3))) > li:first-child,
.box_support #box-photo > ul:has(> li:nth-child(4)) > li:first-child {
	opacity: 1;
}

/* 移行元 `@keyframes boxphotoSlider` をそのまま写す。18 秒のうち 20.83%〜45.83%
   の間だけ見える（3 枚が 6 秒ずつ順に出る）. */
@keyframes boxphotoSlider {
	0% {
		opacity: 0;
	}

	20.83% {
		opacity: 1;
	}

	33.33% {
		opacity: 1;
	}

	45.83% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/* 動きを控える設定を尊重し、1 枚目を出したまま止める。
 *
 * [#2235](https://github.com/mationinc/wp-platform/issues/2235) は「移行元に配慮が
 * 無いので範囲外」としていたが、**このテーマは既に逆の方針を明文化している**
 * （`main.css` の「動きを控える設定を尊重する。移行元は尊重していないが、この
 * テーマの既存方針（front-page.js のスライダー自動送り等）を踏襲して維持する」）。
 * 帯は 4,849 ページに出て 18 秒周期で永久に動くため、既存方針から外すと
 * テーマの中で扱いが食い違う。外部レビューの指摘を採って揃える。
 *
 * 動きを控える設定を選んでいない利用者の見え方は変わらない. */
@media (prefers-reduced-motion: reduce) {
	.box_support #box-photo > ul > li {
		opacity: 0;
		animation: none;
	}

	.box_support #box-photo > ul > li:first-child {
		opacity: 1;
	}
}

/* --------------------------------------------------------------
 * 携帯幅
 * --------------------------------------------------------------
 * 🚨 **移行元のスマホ版の帯を丸ごと作り直す（Task #3189・ユーザー裁定 2026-09-04）。**
 *
 * 旧版のこの注釈は「移行元の携帯版は別の部品で**写せる指定が無い**ので、寸法の一致では
 * なく崩れないことを満たす（Bug #2235）」と書いていた。**その 2 点はどちらも誤りだった。**
 *
 *   ① スマホ版の部品は実在する（移行元 `public/include/box_support_sp.shtml`。器は
 *      `div.conv-banner`）。見た目は `public/sp/css/common.css` の 575〜681 行が持つ
 *   ② 裁定 46（2026-09-03）で「原則、移行元のスマホ版の表示に合わせる」に変わった
 *
 * パソコン版は文言がスタッフの写真に焼き込まれているため、CSS だけではスマホ版の
 * 組み（文字の見出し + 丸いアイコン 4 個 + 補足の文字 + 文字のボタン 2 個）を作れない。
 * だから `inc/support-band.php` が携帯用の帯（`.pa-conv-band`）を本文へ差し込み、
 * **ここで幅による出し分けだけを行う**。
 *
 * パソコン幅の帯は移行元と一致しているので触らない。下の 1139px 以下の手当ては、
 * 幅 750〜1139px（携帯幅より広い側）で効くものなので残す. */
/* 🚨 **ここに在った「写真の器の高さを幅に追従させる手当て」は撤去した
 * （Task #4281・裁定 346）。**
 *
 * もとは `@media (max-width: 1139px)` で `.box_support #box-photo` の高さを
 * `aspect-ratio: 525 / 320` に置き換え、中の写真を器いっぱいに伸ばしていた。
 * 入れた理由は、**帯を画面の幅で切り下げていたために写真の器が 525px を保てず、
 * 金茶の枠の中に空白ができた**ことである（2026-08-27 の実測: 幅 750px で
 * 95.77px の空白・768px で 90.33px・900px で 50.39px・1024px で 12.89px）。
 *
 * **もとの注釈自身が「移行元はこの幅で帯を 1280px のまま右へはみ出させるので
 * 写せる指定が無い」と書いていた。**帯が移行元と同じ 1,280px を保つようになった
 * ので、**写真の器も移行元と同じ 525 × 320px を保つ。手当ては要らない。**
 *
 * 🚨 **戻すときは帯の上限（`max-width: 100vw`）も一緒に戻すこと。**片方だけ戻すと
 * 移行元にもいまの dev にも無い姿になる。
 *
 * なお携帯幅（749px 以下）の側の手当ては下の節に別に在り、そちらは残してある. */

@media (max-width: 749px) {
	.box_support_inner,
	.box_support .box_menu2 {
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-inline: var(--pa-inner-gutter, 15px);
		row-gap: 20px;
	}

	.box_support .box_menu2 {
		padding-top: 40px;
	}

	/* ボタンは器の幅まで広げるが、移行元の 525px より大きくはしない. */
	.box_support .box_menu2 > li {
		width: 100%;
		max-width: 525px;
	}

	.box_support .box_menu2 > li img {
		width: 100%;
	}
}

/* --------------------------------------------------------------
 * 携帯幅で出す帯（移行元スマホ版の `.conv-banner`）— Task #3189
 * --------------------------------------------------------------
 * 組みを出すのは `inc/support-band.php` の pa_support_band_sp_markup() で、本文の
 * パソコン版の帯（`.box_support`）の直前へ差し込む。ここは見た目だけを持つ。
 *
 * 写し元は移行元のスマホ版 `public/sp/css/common.css` の 575〜681 行である。
 * 値は**移行元の本番から実測した**（`https://www.p-a.jp/service/` を要求して
 * `https://www.p-a.jp/sp/service/` へ転送された先を幅 375px で測定・
 * 2026-09-04 02:35 JST。結果は `pa-verify-assets/support-band-sp-0904.md`）。
 *
 * 🚨 **見出しの下線とボタンの矢印は作らない。**移行元スマホ版の CSS は
 * `/segment/images/banner_conv_bg.png`（下線代わりの背景）と
 * `/segment/images/icon_arrow_wh.png`（矢印）を指しているが、**その 2 枚は移行元の
 * 本番に無い**（2026-09-04 02:46 JST に移行元スマホ版の実ページを開き、ブラウザ自身の
 * 要求への応答がどちらも 404 だった。パソコンの名乗りで直に叩いても 404 で、
 * ホットリンク対策ではない）。つまり**移行元でも描かれていない**ので、作ると移行元より
 * 飾りが多くなる。画像が本番へ戻されたら移行元の見た目が変わるので、そのときに足す。
 *
 * 🚨 **記録版と本番で食い違う。**移行元の写しの記録版 `19f499fe3` には
 * `public/segment/images/banner_conv_bg.png` と `icon_arrow_wh.png` の 2 枚が実在する。
 * **記録版だけを見ると「写し漏れ」に見えるが、写し漏れではない。**判断の基準は
 * 「今の訪問者に見えている姿」なので、本番で 404 のこの 2 枚は作らない。
 * 作る側に倒すときに足すのは、`.pa-conv-band__lead > span` の背景 1 宣言と、
 * `.pa-conv-band__button > a:after` 1 規則 + 同 `a` の `position: relative` である。
 *
 * 🚨 **`1rem` をそのまま写さない。**移行元スマホ版は土台の字を 13px にしているので
 * `1rem` = 13px だが、dev の rem の基準は違う。実測値の 13px を直に書く（テーマ全体の
 * rem の基準を動かすのは裁定 46 の「不自然な修正」に当たる）。
 *
 * 🚨 **見出しの字は 3 段階ある。**素の値 17px を書いただけでは幅 375px の実測（14px）と
 * 合わない。`max-width: 375px` と `320px` の 2 段の上書きも写す（**375px は「375px 以下」に
 * 入る**ので、1 幅だけ測って 17px と決めない）。
 *
 * 囲みを `:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host)`
 * で前置するのは、
 * 投入した本文の中へ差し込むため、テーマの本文向けの指定（`.entry-content p` 等）と
 * 詳しさで並ぶ必要があるからである。
 *
 * 🚨 **3 つ目の `.pa-branch-archive` を落とさない。**支店紹介の入口（`/branch/`）だけは
 * 投入した本文を持たず、`archive-branch.php` が帯の組みを直接書き出す。その器は
 * `<div class="archive-content archive-content--branch pa-branch-archive">`（385 行）で、
 * `.entry-content` も `.page-content__body` も祖先に持たない。**この 1 つを落とすと
 * 携帯幅の指定が 1 つも当たらず、帯を出す組みだけが増えて見た目は直る前と同じになる**
 * （2026-09-04 のセルフレビューが実際に見つけた退行）。前置を書き換えるときは
 * `grep -n 'entry-content\|page-content__body\|pa-branch-archive' archive-branch.php` で
 * 器のクラスを必ず確かめる.
 *
 * 🚨 **4 つ目の `.pa-conv-band-host` は「帯を受ける器」だと示すためだけの類名である。**
 * キャンペーンページ（`single-pa_banner.php`・投稿型 `pa_banner`）の器は移行元の
 * `<div class="cp_inner">` をそのまま写したもので、上の 3 つのどれも祖先に持たない。
 * そのため携帯幅の指定が 1 つも当たらず、帯が `display: none` のまま 0 × 0 になっていた
 * （Bug #7160。2026-09-18 に幅 375 で実測）。
 *
 * 移行元の類名 `cp_inner` を直接ここへ書かない。移行元の類名は本文の投入で変わりうるので、
 * dev の CSS を結ぶ相手にしない。既存の `page-content__body` も使わない。あの類名に当たる
 * 規則がテーマ全体で 1,174 本あり、帯に関わるのは 23 本だけなので、キャンペーンページへ
 * 残り 1,151 本が当たって見た目が変わる。
 *
 * **型紙の側では類名を消さずに足すだけにする。**`/cp/` は来店予約のリンク 2 本のうち
 * 片方を `main.css` の `body .pa-reg18-link--pc.pa-reg18-link--pc { display: none }` 等で
 * 伏せている。器の類名を消すと同じ型の退行（Bug #6946）が起きる. */
.pa-conv-band {
	/* パソコン幅では出さない。移行元もパソコン版はこの帯を持たない. */
	display: none;
}

@media (max-width: 749px) {
	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band {
		display: block;
		/* 移行元 `.conv-banner { margin: 15px 0 30px }`. */
		margin-block: 15px 30px;

		/* 🚨 **画面の幅いっぱいに広げる。**移行元スマホ版の帯は画面の左端から
		   右端まで（幅 375px の画面で x=0・幅 375px）である。dev の本文の柱は
		   携帯幅で左右に余白を持つため、そのままだと帯が 30px 狭くなり左端が
		   15px ずれる（手元の陰性対照で実測: 345px・x=15）。広げ方はこの帯の
		   パソコン版（上の `.box_support`）と同じ形にそろえる。
		   横のはみ出しは `body:has(.box_support) { overflow-x: clip }` が
		   すでに切り落としている。

		   🚨 **縦スクロールバーが場所を取る環境では、帯が左へ寄る。**`100vw` はバーの幅を
		   含むため、幅 749px の窓（バー 15px・組みの幅 734px）だと帯の左端が -7.5px に
		   なり、右の 7.5px が切り落とされる。**これはこの帯だけの話ではなく、上の
		   パソコン版の帯（`.box_support`）も同じずれを持つ**ので、ここだけ直すと 2 つの
		   帯の広げ方が食い違う。移行元と同じ見え方（携帯の実機ではバーが場所を取らない）を
		   優先して現状のままにする（2026-09-04 のセルフレビューの指摘 7・記録のみ）。
		   実測を取り直すときは、バーが場所を取らない環境で測る. */
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	/* パソコン版の帯は隠す。
	 *
	 * 🚨 **`.pa-conv-band` の兄弟であることを条件にする。**行き先の解決できない
	 * 環境では携帯用の帯が組み立てられず（`pa_support_band_sp_markup()` が空文字を
	 * 返す）差し込まれない。無条件に隠すと、そのとき**帯が 1 つも出なくなる**。
	 * 差し込みはパソコン版の帯の直前なので、後続の兄弟として絞れる. */
	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band ~ .box_support {
		display: none;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__inner {
		/* 移行元 `.conv-banner__banner`。
		   **移行元の `margin: 0` は写していない。**`div` の既定の外余白は 0 で、
		   テーマも本文の中の `div` に外余白を当てていないため、書いても書かなくても
		   同じ姿になる（実測でも器と帯の高さは同じ 399.72px）。**写し漏れではない**
		   （セルフレビューで 2 回続けて挙がったので、判断をここに残す）. */
		box-sizing: border-box;
		border-top: 10px solid #a18046;
		border-bottom: 10px solid #a18046;
		padding: 20px 15px 30px;
		background: #fef3e0;
		color: #333;
		text-align: left;

		/* 🚨 **行の高さを `normal` へ戻す。**移行元スマホ版の帯は行の高さを持たず
		   （実測でも `normal`）、和文の書体では字の大きさの約 1.5 倍になる。
		   テーマの本文の既定（1.8）が流れ込むと、補足の文字が 23px → 27px、
		   ボタンが 47px → 52.39px と背が高くなる（手元の陰性対照で実測）。
		   見出しだけは移行元が `2.3` を持つので、下で別に指定する. */
		line-height: normal;
		/* 移行元は明朝を先頭に置く並びで、2 番目以降はゴシックである
		   （游明朝を持たない環境ではゴシックで出る）. */
		font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead {
		margin: 0;
		/* 移行元 `.text { line-height: 2.3 }`（実測 29.9px = 13px × 2.3）. */
		line-height: 2.3;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead > span {
		display: block;
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 1px;

		/* 🚨 **行の高さを受け継ぎに頼らず、ここで明示する（Bug #6995）。**
		   親の `.pa-conv-band__lead` は `line-height: 2.3` を持ち、数値はそのまま
		   受け継がれるので `<span>` も自分の字の大きさ × 2.3 になるはずである。
		   移行元はそうなっている（幅 375px の実測で 1 行 32.2px ＝ 14px × 2.3）。
		   **dev の `<span>` は `normal`（1 行 21px）だった**（2026-09-17 20:5x に
		   本番 www.p-a.jp/sp/concierge/ と dev の両方を幅 375px で実測。字 14px・
		   太さ 600・字間 1px・書体は 1 つも違わず、行の高さだけが違った）。
		   そのぶん帯の丈が 399.72px → 377.34px と **22.38px 低くなっていた。**

		   🚨 **なぜ受け継ぎが届かないのかは分かっていない。**テーマの CSS を全部
		   走査しても、この当たり先の行の高さを当てている規則は 1 本も無い。
		   **原因が分からないまま受け継ぎに任せると、また静かに戻る。**移行元と同じ
		   値をここで持つ。移行元の `sp/css/common.css` は `.text` に
		   `line-height: 2.3` を当てる 1 本しか持たないので、値は同じ `2.3` である。

		   🚨 **注釈の中に波かっこを書かない。**この節を切り出す検査と道具は
		   `[^{}]*` で規則を区切るので、注釈の中の `{` で切れて別の規則を拾う
		   （2026-09-17 に実際に踏み、変異 3 本が素通りした）. */
		line-height: 2.3;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__icons {
		margin: 20px 0 10px;
		padding: 0;
		list-style: none;
		text-align: center;
		/* 横に並べた項目の間の隙間を消すための古い手（移行元も同じ）. */
		font-size: 0;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__icons > li {
		display: inline-block;
		margin: 0 1%;
		width: 23%;

		/* 🚨 **項目の字を 13px に戻す。器の `font-size: 0` を受け継がせない。**
		   移行元は器に `font-size: 0` を置いて横並びの隙間を消しているが、**項目の
		   側は移行元のサイト共通の初期化が `13px` を当てて上書きしている**（受け継ぐ
		   値は、自分に当たった宣言に負ける）。実測でも移行元の項目は 13px である。
		   その 13px の行の下に残る場所のぶんだけ、項目は絵より 6px 背が高くなる
		   （移行元 79.34 × 85.34 に対し絵は 79.34 × 79.34）。0 を受け継がせると
		   項目の高さが絵と同じ 79.34px になり、6px 足りなくなる. */
		font-size: 13px;
		line-height: normal;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__icons > li img {
		display: inline;
		width: 100%;
		height: auto;

		/* 🚨 **縦の位置合わせを基準線へ戻す。**移行元スマホ版の初期化
		   （`sp/css/basic.css` の 22 行）は `img` を `vertical-align: baseline` に
		   しており、13px の行の基準線より下に残る場所のぶんだけ、項目は絵より 6px
		   背が高くなる（移行元の実測 79.34 × 85.34 に対し絵は 79.34 × 79.34）。
		   テーマの既定も baseline だが（`main.css` 21271〜21274 行）、新デザイン扱いの
		   ページ向けの上書き `.pa-profile-new :is(.entry-content, .page-content__body) img
		   { vertical-align: bottom }`（同 21283〜21285 行）は詳細度 0,2,1 で、
		   ここに書かないと勝ってしまい帯が 6px 低くなる。**今の投入データでは
		   新デザインの 6 ページに帯が無いので表に出ない**が、新デザインの画面が
		   増えたときに黙って崩れるため先に押さえる（2026-09-04 のセルフレビューの
		   指摘 B）. */
		vertical-align: baseline;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__sub {
		margin: 0;
		text-align: center;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 2px;

		/* 🚨 行の高さは `normal`（移行元と同じ）。テーマの本文の段落は 1.8 を持ち、
		   受け継がせると高さが 23px → 27px になる（手元の陰性対照で実測）. */
		line-height: normal;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__buttons {
		padding-top: 20px;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button {
		margin: 0;

		/* 🚨 **子を横いっぱいに伸ばすのは親の役目にする**（Bug #7205）。
		   もとは下の `> a` へ `display: block` を書いていたが、**それだと
		   `assets/css/main.css` の来店予約の出し分け
		   （`body .pa-reg18-link--pc.pa-reg18-link--pc { display: none }`）が効かない**。
		   前置きを外しても詳しさが 0,2,1 どうしで並び、この CSS は
		   `wp_enqueue_style( 'pa-support-band', …, array( 'pa-main' ), … )` で
		   `main.css` の後に読み込まれるため後勝ちしてしまう（2026-09-18 に数え直した）。

		   **帯の CSS はボタンの `a` の `display` を書かない。**そうすれば
		   `display: none` がそのまま効き、消えた `a` は flex の子から外れて
		   この段落も潰れる（幅 375 の実測で移行元と同じ器 127・帯 399.72 になる）. */
		display: flex;

		/* 🚨 行の高さは `normal`（移行元と同じ）。テーマの本文の段落の 1.8 を
		   受け継がせると、中のボタンの高さが 47px → 52.39px になる. */
		line-height: normal;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button > a {
		box-sizing: border-box;

		/* 🚨 **`display` を書かない**（Bug #7205）。理由は上の親の規則の注釈にある。
		   横いっぱいに伸びるのは親が `display: flex` で、ここが `flex: 1 1 auto` を
		   持つためである。**ここへ `display` を足し戻すと来店予約が 2 本とも出る。** */
		flex: 1 1 auto;
		padding: 10px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		font-size: 18px;
		letter-spacing: 3px;

		/* 🚨 **薄まり方も移行元に合わせる。**移行元スマホ版の初期化はすべてのリンクへ
		   `a, a:hover { transition: 0.7s }` を当てている（記録版 19f499fe3 の
		   `public/sp/css/basic.css` 106〜111 行）。この宣言を写さないと、下の
		   `opacity: 0.7` が**瞬時に切り替わる**（テーマはリンク自体に移り変わりを
		   持たず、持っているのは `a img` の 0.2 秒だけで、この帯のアイコンはリンクの
		   中に無い）。移行元は「すべての指定」を対象にしているが、この帯で押した
		   ときに変わるのは不透明度だけなので、対象を絞って同じ見え方にする
		   （2026-09-04 のセルフレビューの指摘 F3）. */
		transition: opacity 0.7s;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button > a:hover {
		opacity: 0.7;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button--reservation > a {
		background: #c61f10;
		/* 移行元は `1rem`。スマホ版の土台の字が 13px なので実測 13px. */
		margin-bottom: 13px;
	}

	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button--request > a {
		background: #a18046;
	}

	/* はじめての方への 3 ページだけ、帯の中の段落に下の外余白が付く（Bug #4530）。
	 *
	 * 移行元はこの 3 ページのページ専用 CSS（`sp/visitor/parents/css/style.css` の
	 * 72〜74 行ほか）に `p { margin: 0 0 4% }` と書いており、**素の `p` に当てている
	 * ので、共通部品として差し込まれるこの帯の中の段落にも効いてしまう**。dev は帯を
	 * 独立して組むため染み出しが起きず、帯が低くなっていた。
	 *
	 * 🚨 **固定 px で写してはいけない。**4% は囲みの中身の幅に対する割合で、しかも
	 * 隣り合う外余白は大きいほうだけが残るため、**効く場所が幅で入れ替わる**。
	 * 移行元の実測（`pa-verify-assets/f15-common-0905/4530-band-3widths.md`）:
	 *
	 *   幅 320 → 帯 401.06（4% = 11.59。読みの下と押しボタンの隙は動かない）
	 *   幅 375 → 帯 428.11（4% = 13.80。押しボタンの隙だけ 13 → 13.80）
	 *   幅 749 → 帯 581.55（4% = 28.75。4 か所すべてが動く）
	 *
	 * 入口 `/visitor/` と婚活のすすめ方 `/visitor/method/` にはこの規則が無いので、
	 * 当たり先から外す（移行元も dev も 3 つの幅で一致している）。
	 *
	 * 🚨 **前置の `.pa-branch-archive` を外さないこと。**この写しの携帯幅の指定は
	 * すべて前置に支店紹介の入口の器を含める約束で、`tests-retired/pa-cms-support-band-sp/`
	 * がそれを見張っている（外すとあの検査が落ちる）。`body` の目印で 3 ページに
	 * 絞っているので、ここに足しても当たる範囲は広がらない。
	 */
	body:is(.pa-visitor--parents, .pa-visitor--questions, .pa-visitor--experienced)
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band p {
		margin-bottom: 4%;
	}

	/* 🚨 **上の 4% と、来店予約の対（Bug #7205）の重なりを解く（Bug #8848）。**
	 *
	 * #7205 で、来店予約の段落をパソコン版と携帯版の 2 つにし、段落を `display: flex` に
	 * した（伏せた `a` の段落が潰れるように）。この 3 ページでは上の規則で段落に 4% の
	 * 下の外余白が付くので、2 つの空きが余計に出ていた。
	 *
	 *   ① 伏せたパソコン版の段落は潰れても、4% の外余白が残る
	 *   ② flex の段落の中では、`a` の 13px（`1rem` の写し）と段落の 4% が相殺しない
	 *
	 * 移行元は段落の 4% と `a` の 13px が相殺し、大きいほうだけが残る。そこで
	 * ①は段落ごと伏せ、②は段落の外余白を `max(13px, 4%)`、`a` を 0 にして、
	 * 相殺の結果と同じ値にする（幅 320 では 13px、375 では 13.8px、749 では 28.75px）。
	 *
	 * 実測（2026-09-29・移行元リポジトリの版 68e3190cb・親御さまへとよくあるご質問）:
	 *
	 *   幅    帯の高さ 移行元 / dev 直す前 / 直した後     押しボタンの塊
	 *   320   401.06 / 424.25 / 401.06                   127    / 150.19 / 127
	 *   375   428.11 / 454.91 / 428.11                   127.8  / 154.59 / 127.8
	 *   749   581.55 / 623.3  / 581.55                   142.75 / 184.5  / 142.75
	 *
	 * 2 ページとも同じ値だった。
	 *
	 * 🚨 **当たり先は 2 ページだけにする。**上の #4530 の規則は目印に
	 * `.pa-visitor--experienced` も並べているが、この目印はどのページにも付かない
	 * （`inc/visitor-page-css.php` のページ別の写しは `method` `parents` `questions` の 3 つだけ）。
	 * 他社経験は dev では `/service/experienced/` に在り、サービス配下の目印を持つ.
	 */
	body:is(.pa-visitor--parents, .pa-visitor--questions)
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button:has(> a.pa-reg18-link--pc) {
		display: none;
	}

	body:is(.pa-visitor--parents, .pa-visitor--questions)
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button--reservation {
		margin-bottom: max(13px, 4%);
	}

	body:is(.pa-visitor--parents, .pa-visitor--questions)
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__button--reservation > a {
		margin-bottom: 0;
	}
}

/* 幅 375px 以下で見出しの字を落とす（移行元 `sp/css/common.css` の 604〜609 行）。
   **幅 375px はこの括りに入る**ので、実測は 17px ではなく 14px である. */
@media (max-width: 375px) {
	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead > span {
		font-size: 14px;
	}
}

/* 幅 320px 以下（移行元 同 611〜616 行）. */
@media (max-width: 320px) {
	:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead > span {
		font-size: 12px;
	}
}

/*
 * ==================================================================
 * 作り替え版 4 店だけの誘導帯（Bug #4453）
 * ==================================================================
 * **札幌・高崎・仙台・福岡の 4 店は、帯を左右 2.5% 内側に置き、上の外余白を 0 にし、
 * 読みの字を 1 段大きくする。**移行元がこの 4 店にだけ別の CSS を読ませているためである。
 *
 * | 読む順 | 移行元のファイル | 帯への指定 |
 * |---:|---|---|
 * | 2 番目 | `sp/css/common.css` 575 行 | `margin: 15px 0 30px`・読みの字 17 / 14 / 12px |
 * | **4 番目** | `sp/branch/css/style_renew.css` 1587 行 | **`margin: 0 2.5% 30px`**・読みの字 **18 / 16 / 13px** |
 *
 * 字の 3 つの値は「素の値 / 375px 以下 / 320px 以下」である。**後ろに読むほうが勝つ。**
 * この CSS を読む移行元スマホ版のページはちょうど 4 つで、dev では `body` の
 * `pa-branch-renew` が同じ 4 店に付く。
 *
 * 🚨 **左右の 2.5% は「親の幅」ではなく「画面の幅」に対する割合である。**移行元の親は
 * 画面いっぱいなので同じ値になる。dev の帯は本文の柱から出すために
 * `width: 100vw; margin-inline: calc(50% - 50vw)` で画面幅へ広げているので、
 * **その細工を活かして `95vw` にする**（左右 2.5% ずつを引いた幅）。
 * 幅 375px で 356.25px・左端 9.375px になる。
 *
 * 🚨 **この対応表は 5 件で、広島店を含む**（`inc/branch-renew-map.php`）。**いま広島店は
 * dev にページが無い**（`/branch/branch-chugoku-hiroshima/` は県別の一覧へ 301 で送られ、
 * 移行元スマホ版にも頁が無い）。**あとで広島店の頁が増えたときに黙って当たらないよう、
 * `tests-retired/pa-cms-conv-band-renew/` が「当たるのは 4 店」を見張る。**
 *
 * 🚨 **上の外余白を 0 にしても、画面で見える隔たりは移行元とそろわない**（移行元 39px
 * 対 dev 30px）。移行元スマホ版は帯のすぐ上にパンくずを出し、その下の外余白が隔たりを
 * 作るが、**dev の携帯幅はパンくずを出さない**（高さ 0）。この差は意図的変更の台帳の
 * 213 行で Feature #1627 として追いかけている。**ここでそろえるのは指定値だけである。**
 */
@media (max-width: 749px) {

	body.pa-branch-renew
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band {
		margin-block: 0 30px;
		width: 95vw;
		max-width: 95vw;
		margin-inline: calc(50% - 47.5vw);
	}

	body.pa-branch-renew
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead > span {
		font-size: 18px;
	}
}

/* 幅 375px 以下（移行元 `sp/branch/css/style_renew.css`）. */
@media (max-width: 375px) {
	body.pa-branch-renew
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead > span {
		font-size: 16px;
	}
}

/* 幅 320px 以下（同上）. */
@media (max-width: 320px) {
	body.pa-branch-renew
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .pa-conv-band .pa-conv-band__lead > span {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------
 * 移行元の携帯版が帯を持たないページ（Bug #4708・28 ページ）
 * ------------------------------------------------------------------
 *
 * `inc/support-band.php` の `pa_support_band_insert_sp()` は、この 28 ページで
 * 携帯用の帯（`.pa-conv-band`）を差し込まない。移行元の携帯版がそこに帯を持たず、
 * 代わりに縦長の誘導（`.word-cta`）だけを出しているためである。
 *
 * 🚨 **差し込みを止めるだけでは、パソコン版の帯が携帯幅に出る。**このファイルの
 * `:is(…) .pa-conv-band ~ .box_support { display: none }` は、**携帯用の帯が
 * 兄弟に在るときだけ**パソコン版の帯を隠している。差し込みを止めると兄弟が
 * 居なくなり、その規則が当たらなくなる。だからここで、しるし
 * （`body.pa-no-sp-conv-band`・`pa_support_band_sp_body_class()` が立てる）を鍵に
 * 携帯幅で隠す。
 *
 * 🚨 **前置は 3 つそろえる。**このファイルの携帯幅の規則はすべて
 * `:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host)` で
 * 書いており、
 * 検査がその数の一致を見張っている（支店紹介の入口はほかの 2 つを祖先に持たないため）。
 * 除外の 28 ページは記事なので入口には当たらないが、**書き方をそろえておく**。
 *
 * 🚨 **パソコン幅（750px 以上）では隠さない。**移行元のパソコン版はこの 28 ページ
 * でも帯を持つ（実測 28 本すべてに `box_support` が在る。2026-09-11）.
 * ------------------------------------------------------------------ */
@media (max-width: 749px) {
	body.pa-no-sp-conv-band
		:is(.entry-content, .page-content__body, .pa-branch-archive, .pa-conv-band-host) .box_support {
		display: none;
	}
}