/**
 * フォームの見た目。
 *
 * 移行元サイト（www.p-a.jp）の入力画面の見た目は、このファイルが受け持つ。
 * 寸法・色・境界線は移行元の `public/css/page_inquiry.css` から写した実測値である
 * （Issue #1630）。テーマ側にフォーム向けの指定は無いので、ここが正本になる.
 *
 * 組み方は移行元をフォームごとに引き継ぐ（`PA_Forms_Embed::FORM_LAYOUTS`）。
 * 表組みの 4 種（お問い合わせ・法人からの問い合わせ・来店予約・ご紹介プログラム）は
 * `.pa-form--table`、資料請求は定義リストの `.pa-form--dl`、OTOCON 予約は 2 列の
 * 格子の `.pa-form--div`、婚活 EQ 診断は表組みと定義リストの混成として出る。
 * 縦 1 列の `.pa-form--stack` は組み方を指定しないフォームの既定で、今は使っていない.
 */

.pa-form {
	max-width: 640px;
}

/*
 * 婚活 EQ 診断つき資料請求（`.pa-form--mixed`）にも表組みと同じ上限を持たせる
 * （Issue #1808）。持たせていなかったため、フォーム全体が既定の 640px に
 * 縮こまり、複数行入力欄の `width: 95%` がその狭い器の 95% になって、移行元
 * より 347.7px も狭く出ていた（実測 438.6px。移行元は 786.3px）.
 */
.pa-form--table,
.pa-form--mixed {
	max-width: 1100px;
}

/* --------------------------------------------------------------------------
 * ブラウザ既定の余白と文字サイズの打ち消し（Issue #1668）
 *
 * 移行元の共通 CSS（`public/css/common.css` の 109-117 行）は、`button` /
 * `fieldset` / `form` / `input` / `label` / `legend` / `select` / `textarea` の
 * 8 タグの外余白・内余白を 0 にし、文字サイズを 100% に戻している。テーマ側に
 * 同じ打ち消しは無いため、フォーム部品にブラウザ既定の値が残る.
 *
 * 適用範囲はフォームの器（`.pa-form`）の内側に閉じる。サイト全体へ広げても
 * 実際に変わる値はここと同じ 1 種類だけで、移行元に無い部品（404 ページの
 * 検索欄）まで巻き込むためである（司令塔の裁定・2026-08-08）.
 *
 * 8 タグのうち `input` だけを書く。残る 7 タグは、次の理由で書いても効かない.
 *
 * - `fieldset` / `legend` … このプラグインは出力しない。`PA_Forms_Embed` が出す
 *   のは `form` / `input` / `select` / `textarea` / `label` / `button` だけである
 * - `button` … 送信ボタンには `.pa-form-submit button` が内余白と文字サイズを
 *   与えており、そちらが詳細度で勝つ
 * - `form` / `label` / `select` / `textarea` … 現行の Chrome で実測すると、
 *   外余白も内余白も既に 0 で移行元と一致する（`select` と `textarea` には必ず
 *   `.pa-control` が付き、内余白 5px と文字サイズ 1em を受け取る）
 *
 * `input` の内余白と文字サイズも、`.pa-control` が付く欄では
 * `.pa-form .pa-control` が詳細度で勝つため値は変わらない。値が変わるのは
 * `.pa-control` を付けない 3 種である。見た目が動くのはうち 2 種で、
 * チェックボックスとラジオの外余白が 3〜5px から 0 になる（移行元と同じ）。
 * 残る 1 種は自動入力よけの隠し欄で、画面の外へ出してあるため見た目は動かない.
 * -------------------------------------------------------------------------- */

.pa-form input {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/* --------------------------------------------------------------------------
 * 縦 1 列（stack）の組み方
 * -------------------------------------------------------------------------- */

.pa-form .pa-field {
	margin: 0 0 1.25em;
}

.pa-form .pa-field label {
	display: block;
	margin: 0 0 0.4em;
	font-weight: bold;
}

.pa-form .pa-field-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: normal;
}

/* --------------------------------------------------------------------------
 * 表組み（table）の組み方。寸法は page_inquiry.css の 82-151 行から写した
 * -------------------------------------------------------------------------- */

.pa-form-table {
	width: 100%;
	margin: 0 0 40px;
	border: 0;
	border-top: 1px solid #cccccc;
	border-collapse: collapse;
	clear: both;
}

.pa-form-table th,
.pa-form-table td {
	padding: 30px 0 30px 30px;
	border: 0;
	border-bottom: 1px solid #cccccc;
	text-align: left;
	vertical-align: top;
}

/*
 * 🚨 **太さは `bold` である**（Task #8053）。移行元の `page_inquiry.css` の
 * `table th` は `font-weight` の指定を持たないので、`th` のブラウザ既定（`bold`）が
 * そのまま効く。ここに `normal` を書くと移行元から離れる。2026-09-20 に幅 1440 で
 * 両側を実測し、移行元 700 に対し dev が 400 であることを確かめた（見出し 11 本とも）.
 */
.pa-form-table th {
	width: 23.181%;
	font-family: var(--pa-font-family-serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif);
	font-size: 19px;
	font-weight: bold;
	line-height: 120%;
}

.pa-form-table td {
	width: 76.818%;
	font-size: 16px;
}

/*
 * 続けて並ぶ行を 1 つのかたまりに見せる（Bug #7935）。移行元は行ごとに
 * 内余白と区切り線を変える class を 3 つ持ち（`page_inquiry.css` の
 * `.half01` / `.half03` / `.half02`）、**お名前の 2 行と住所の 5 行**に当てている。
 *
 * | 役割 | 移行元 | 内余白（上/下） | 下の区切り線 |
 * |---|---|---|---|
 * | かたまりの先頭 | `half01` | 30 / 15 | 消す |
 * | かたまりの中 | `half03` | 15 / 15 | 消す |
 * | かたまりの末尾 | `half02` | 15 / 30 | 出す |
 *
 * 左の内余白 30px は 3 つとも同じである.
 */
.pa-form-table__row--pair-top th,
.pa-form-table__row--pair-top td {
	padding: 30px 0 15px 30px;
	border-bottom: 0;
}

.pa-form-table__row--pair-middle th,
.pa-form-table__row--pair-middle td {
	padding: 15px 0 15px 30px;
	border-bottom: 0;
}

.pa-form-table__row--pair-bottom th,
.pa-form-table__row--pair-bottom td {
	padding: 15px 0 30px 30px;
}

/* --------------------------------------------------------------------------
 * 必須・任意の印。page_inquiry.css の .ico01 / .ico02
 * -------------------------------------------------------------------------- */

.pa-form .pa-badge {
	display: inline-block;
	padding: 4px;
	margin-right: 10px;
	color: #ffffff;
	font-family: var(--pa-font-family-base, sans-serif);
	font-size: 12px;
	line-height: 100%;
	text-align: center;
	vertical-align: text-bottom;
}

.pa-form .pa-badge--required {
	background: #e1200f;
}

.pa-form .pa-badge--optional {
	background: #888888;
}

/* --------------------------------------------------------------------------
 * 入力欄の列（td）の中身
 * -------------------------------------------------------------------------- */

.pa-form .pa-cell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

/* 同じ行の中で次の段へ折り返すための、幅いっぱいの区切り. */
.pa-form .pa-cell-break {
	flex-basis: 100%;
	height: 0;
}

.pa-form .pa-cell-field {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.pa-form .pa-cell-field-textarea {
	flex-basis: 100%;
}

/*
 * 入力欄の手前に出す必須・任意の印。移行元は印に 10px の右余白を付けていたが
 * （`css/page_inquiry.css` の `table td p span.ico01`）、ここでは囲みの 8px の
 * 間隔がその役目を果たすので、余白は重ねずに消す.
 */
.pa-form .pa-cell-field .pa-badge {
	margin-right: 0;
}

.pa-form .pa-sub-label {
	display: inline-block;
	min-width: 40px;
	font-size: 16px;
}

.pa-form .pa-unit {
	display: inline-block;
	font-size: 16px;
}

/* 画面には出さず、画面読み上げソフトにだけ渡す. */
.pa-form .pa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * 日付を選ぶまで隠す時刻の選択欄（Bug #8355・ユーザー決定 D562）。
 *
 * 上の `.pa-form .pa-visually-hidden`（class 2 つ）は、選択欄の幅を決める規則に負ける。
 * 表の組みの `.pa-form--table select.pa-control`（幅 184px）と、携帯幅の
 * `.pa-form select.pa-control`（幅 100%）は、どちらも class 2 つ＋要素 1 つだからである。
 * 負けると `clip-path` で見えなくなるだけで、箱は 184px（携帯幅は 375px）× 6.4px のまま残る
 * （2026-09-25 10:34 の下見の実測・記録は pa-verify-assets/A/8355-下見-0925/）。携帯幅では箱の右端が 397px になり、画面の幅を超える。
 * そこで class 3 つ＋要素 1 つで、幅と高さの指定を取り戻す。直したあとの箱は 16×6.4px で、
 * 両幅ともページの横幅は画面の幅に収まった（同じ日の 10:37 の下見の 2 走行目・記録は
 * pa-verify-assets/A/8355-下見2-0925/）。1px まで縮まないのは、ほかの規則の内余白か枠線が
 * 残るためと読めるが、確かめていない。箱は `position: absolute` なので、並びには効かない.
 */
.pa-form select.pa-control.pa-visually-hidden {
	width: 1px;
	height: 1px;
	min-height: 0;
}

/* --------------------------------------------------------------------------
 * 定義リストの組み方（資料請求）。実値は移行元の request/style.css から写した
 * -------------------------------------------------------------------------- */

/*
 * 色の 4 つの変数と、基準の文字サイズ（Issue #1774 の AC 4.2）。
 *
 * 移行元はこの 4 つを CSS ファイルではなく入力画面の HTML に直書きしている
 * （`legacy/www.p-a.jp/public/form/view/request.php` の 17-22 行の `<style>`）。
 * `request/style.css` だけを写すと色が全部落ちるため、ここへ写す。置き場は
 * `.pa-form--dl` の中に閉じ、テーマ全体へは広げない。テーマ側の変数はすべて
 * `--pa-` で始まるので名前はぶつからない（サイト配下を検索して 0 件を確認した）.
 *
 * 基準の文字サイズ 16px も一緒に置く。移行元は `body, html { font-size: 16px }` を
 * 敷いたうえで、寸法をすべて `em` で書いている。移行先でフォームが入る器
 * （固定ページの本文 `.page-content__body`）の文字サイズは広い画面では 16px だが、
 * **749px 以下では 15px へ下がる**（テーマの `main.css` の `--pa-article-font-size`）。
 * 移行元は幅で分岐する指定を 1 つも持たないので（親 Feature #1772 の 2.2）、器の
 * 分岐をそのまま受けると狭い画面で寸法が 6.25% 縮む。ここで基準を固定して、
 * 移行元と同じ「幅で変わらない」状態にする（AC 4.9）.
 *
 * **副作用を 1 つ受け入れている。** 送信ボタンの文字（`1.05em`）と内余白
 * （`0.7em 1em`）も、749px 以下ではこの基準を受ける。ボタンの外形は 250x60px の
 * 固定なので寸法は動かず、動くのは中の文字の実寸だけである（15.75px → 16.8px）。
 * これは広い画面での見え方と同じ値で、Issue #1630 で承認を得た形へ揃う側の変化で
 * ある（送信ボタンの規則そのものは触っていない。AC 4.7）.
 *
 * 行の高さも同じ理由で固定する。移行元は指定を持たず、器から末端までブラウザ既定の
 * `normal` で描かれる（1280px と 375px の両方で実測した）。移行先の器は 1.5 を敷き、
 * **749px 以下では 1.8 へ上がる**（テーマの `--pa-line-height-text`）。そのままだと
 * 狭い画面で性別の押しボタンが 40px から 44.8px へ伸び、注記の行も 19px から 23.04px へ
 * 伸びる（実測）。`normal` を置くと移行元と同じ寸法に揃う.
 *
 * 本文の文字色も移行元へ合わせる（移行元は `body, html { color: var(--text-color) }`）。
 * 移行先の器は純黒（`#000`）を敷いている。入力欄の中の文字色はこれで変わらない。
 * ブラウザは `input` / `select` / `textarea` に `color` を継がせないためで、移行元も
 * 同じくブラウザ既定の色で描かれている（実測で確認した）.
 */
.pa-form--dl {
	--theme-color: #a08046;
	--primary-color: #fd7b7d;
	--text-color: #4a453d;
	--dark-gray: #8a8378;

	max-width: 600px;
	color: var(--text-color);
	font-size: 16px;
	line-height: normal;
}

.pa-form .pa-form-row {
	margin: 2.25em 0 0;
}

.pa-form .pa-form-row__title {
	font-weight: 700;
}

.pa-form .pa-form-row__data {
	margin: 1em 0 0;
}

/*
 * 段と段のあいだ、横に並べる欄と欄のあいだ（AC 4.3）。
 *
 * 移行元は欄ごとの囲み（`.input-wrap` / `.select-wrap`）へ `margin-bottom: 1.5em`
 * = 24px を与え、横 2 列の囲み（`.form-row__data--2column`）へ `gap: 1em` = 16px を
 * 与えている。よって段の間隔は 24px、横の間隔は 16px である（実測で確認した）.
 *
 * 移行先は段の区切りに高さ 0 の要素（`.pa-cell-break`）を 1 つ挟む組み立てなので、
 * 段と段のあいだに **`row-gap` が 2 回入る**（区切りの前と後）。よって 1 回分は
 * その半分の 12px（0.75em）と書く。着手前は 1em だったため段の間隔が 32px あり、
 * 移行元より 8px 広かった（実測）.
 */
.pa-form--dl .pa-cell {
	row-gap: 0.75em;
	column-gap: 1em;
}

/*
 * 生年月日の年・月・日だけ、移行元の横の間隔が 0.5em = 8px と狭い（`.date-select`）。
 * 移行先は横 2 列の組みと横 3 列の組みが同じ `.pa-cell` なので、**選択欄が 2 つ以上
 * 隣り合う行だけ**を選び分けて上書きする。資料請求で当てはまるのは生年月日の 1 行
 * だけである。住所情報の都道府県も選択欄だが、前後を `.pa-cell-break` で区切られた
 * 単独の欄なので隣り合わない（出力した HTML で確認した）。アンケートは Task #1853 で
 * ラジオ 9 個へ変えたので、そもそも選択欄ではない.
 */
.pa-form--dl .pa-cell:has(.pa-cell-field-select + .pa-cell-field-select) {
	column-gap: 0.5em;
}

/*
 * 欄の伸び方は移行元と同じ `flex: 1`（伸びる土台を 0 にする）にする。移行元の横 2 列
 * と横 3 列は、どちらも子へ `flex: 1` を与えていて、画面幅がどれだけ狭くなっても
 * 縦に折り返さない。移行先は土台が 200px だったため 375px では 2 欄が収まらず、
 * 狭い画面向けの上書き（`flex: 1 1 120px`）で折り返しを止めていた。土台を 0 にすると
 * その上書きが要らなくなる（AC 4.9）.
 *
 * `position: relative` は 3 つの重ね置きの基準である。選択欄の矢印（下の `::after`）と、
 * 欄ごとの誤りの文（`.pa-form-error`）と、メール欄・電話番号欄に重ねる絵
 * （`.pa-input-icon`。Task #1855）を欄の上へ重ねる。移行元も欄ごとの囲みへ
 * `position: relative` を置いている.
 */
.pa-form--dl .pa-cell-field {
	position: relative;
	flex: 1 1 0%;
}

/*
 * メール欄と電話番号欄の右端に重ねる絵（Task #1855。移行元の `.input-wrap__button` と
 * `.input-wrap__button--icon`）。
 *
 * 位置と大きさは移行元の値をそのまま写した。文字の基準が 16px なので、上 0.75em =
 * 12px・右 0.5em = 8px・絵の大きさ 1.5em = 24×24px になる.
 *
 * 包みは `<label for="...">` なので、押すと入力欄に焦点が移る。移行元と同じ形である。
 * 選択欄の矢印（下の `.pa-cell-field-select::after`）は当たり判定を切っているが、
 * こちらは切らない。矢印は `<span>` の飾りで押した先が入力欄へ届かないのに対し、
 * この絵は `<label>` 自身が入力欄を指すためである.
 *
 * 絵を出すのは資料請求のメール欄と電話番号欄の 2 つだけなので（項目定義の `icon`）、
 * 他の 6 種のフォームには要素そのものが出ない.
 */
.pa-form--dl .pa-input-icon {
	position: absolute;
	top: 0.75em;
	right: 0.5em;
	cursor: pointer;

	/*
	 * 包みの高さを絵と同じ 24px に揃える。`<label>` は行の要素なので、既定のままだと
	 * 文字の下に伸びる余白（行送り）が付き、絵の下端が数 px 下がる.
	 */
	line-height: 1;
}

.pa-form--dl .pa-input-icon__glyph {
	display: block;
	width: 1.5em;
	height: 1.5em;
}

/*
 * 入力欄の枠線・角丸・内余白・行の高さ（AC 4.1・4.3）。
 *
 * セレクタに `.pa-form` を前置して class 3 つにしてあるのは、このファイルの下の方に
 * ある `.pa-form .pa-control { padding: 5px }` に勝たせるためである。class 2 つ同士では
 * 指定の強さが同じで、後に書いた 5px の側が勝ってしまう。**着手前は実際にそうなって
 * いた**（実測で内余白 5px・一行入力欄の高さ 30px。移行元は 12px/8px・48.39px で、
 * 高さの差は 18.39px あった）。前置で強さを上げる形を採ったのは、規則の並び順を
 * 動かさずに済み、他の 6 種へ届く指定を 1 つも書き換えないためである.
 *
 * `cursor: pointer` は移行元の指定である。移行元は文字欄・選択欄・複数行入力欄の
 * すべてへ与えており、文字欄にも指の形のカーソルが出る（Issue #1774 の 2.2）.
 */
.pa-form.pa-form--dl .pa-control {
	display: block;
	padding: 0.75em 0.5em;
	border: 1px solid #dddddd;
	border-radius: 0.4em;
	background-color: transparent;
	cursor: pointer;
}

/*
 * 行の高さは移行元の土台（`input, textarea { line-height: 1.4 }`）と同じにする。
 * 移行先はブラウザ既定（`normal` ≒ 18px）で、この差 4.4px が一行入力欄の高さの
 * 残差にあたる。**選択欄は移行元も指定していない**ので当てない（当てると移行元の
 * 43px から離れる）.
 */
.pa-form--dl input.pa-control,
.pa-form--dl textarea.pa-control {
	line-height: 1.4;
}

/* 焦点が当たった欄は枠線が金色に変わり、ブラウザ既定の囲みは出さない（AC 4.3）. */
.pa-form--dl .pa-control:focus {
	outline: none;
	border: 1px solid var(--theme-color);
}

/* 欄の中の薄い文字の色（AC 4.3。移行元の `.form-row ::placeholder`）. */
.pa-form--dl .pa-control::placeholder {
	color: #b2b2b2;
}

.pa-form--dl textarea.pa-control {
	height: 8em;
}

/*
 * 選択欄（AC 4.4・選択欄の文字色）。
 *
 * ブラウザ内蔵の矢印を消す。移行元は接頭辞つき（`-webkit-appearance`）だけを書いて
 * いるが、移行先では接頭辞なしも書く（親 Feature #1772 の 7.2 の決定）.
 *
 * 文字色は「値が選ばれたら `--text-color`」である。移行元は画面側の処理
 * （`request/script.js`）が値の有無を見て `--text-color` を当て直しており、CSS には
 * 指定が無い。移行先は画面側の処理を使わず CSS だけで成立させる（担当の境界・
 * 2026-08-14）.
 *
 * 空の選択肢が選ばれているあいだは、移行元と同じ純黒（`#000`）にする（Bug #9398）。
 * 移行元は空のあいだの色を CSS に書いておらず、選択欄はブラウザ既定の色（純黒）で描かれる。
 * `request/script.js` は値が空になると `style` を外すだけなので、空のあいだは純黒のままである
 * （実測 2026-10-05: 1440 と 375 で rgb(0, 0, 0)。`pa-verify-assets/B/9398-着手前の実測-1005/走行1/`）.
 *
 * 🚨 **この規則を消すだけでは移行元にならない。**消すと上の `var(--text-color)`（#4a453d）が残る。
 * 以前は 2026-08-14 の旧統括の指示で薄い字（`#b2b2b2`）にしていた。ユーザー決定にも意図的変更の台帳にも
 * 無い差で、事業部とユーザーの目視（W96・W97）が移行元との違いとして挙げたので、移行元へ戻す.
 *
 * 当たり先は資料請求（`shiryo`）の生年月日と都道府県の 4 つの選択欄だけである。広告用の `eq_ad` も
 * `pa-form--dl` の包みを持つが、下の `eq_ad` の節が文字色へ戻している（移行元の `eq_ad.php` の
 * `.form-row select { color: var(--text-color) !important }`）。
 */
.pa-form--dl select.pa-control {
	appearance: none;
	-webkit-appearance: none;
	color: var(--text-color);
}

.pa-form--dl select.pa-control:has(option[value=""]:checked) {
	color: #000;
}

/*
 * 選択欄の矢印（AC 4.4。移行元の `.select-wrap:after`）。画像は使わない。8x8px の
 * 正方形の右上の角だけを枠線で描き、135 度回して下向きの山形にする。色は文字色を
 * 継ぐ。位置は右端から 16px・上下中央である.
 *
 * 移行元は選択欄を包む要素が `<label>` なので、山形を押しても選択欄が開く。移行先の
 * 包みは `<span>` で押した先が選択欄へ届かないため、山形自身には当たり判定を持たせ
 * ない。これで押した先が下の選択欄へ通る.
 */
.pa-form--dl .pa-cell-field-select::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5em);
	right: 1em;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid;
	border-right: 1px solid;
	transform: rotate(135deg);
	cursor: pointer;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * アンケートのラジオ 9 個（Task #1853。移行元の `.radio-wrap` と `.radio`）
 *
 * 移行元は器（`.radio-wrap`）で並べ方と間隔を決め、丸をラベルの `::before` で描く。
 * ラジオ本体は `hidden` で隠してある.
 *
 * 移行先はラベルがラジオを包む形なので（`PA_Forms_Embed::render_control()`）、丸は
 * ラジオ本体そのものを描き替えて出す。`::before` を足す形は採れない。移行元の丸は
 * 「1em の円・枠線 1px・選ばれると枠線と中身が `--theme-color`」で、この 3 つは
 * ラジオ本体に当てても同じ見え方になる（下の各指定で移行元の値を写した）.
 *
 * 器の指定は `.pa-radio-wrap` を持つ欄にだけ届く。器を出すのは資料請求と婚活 EQ
 * 診断つき資料請求のアンケート 1 欄だけなので（Bug #1985 で後者を追加）、他の 5 種の
 * フォームのラジオは、見た目が変わらない（資料の受け取り方のラジオは Bug #9878 で外した）.
 *
 * 選択肢の並べ方は、資料請求が 1 行に横並び（`gap` で空ける）、婚活 EQ 診断つき資料請求は
 * 移行元が 1 行 4 個の格子（`.enq_ul-1 li` の `width:25%`）のため、`--grid` の
 * 修飾 class（下の節）で上書きする。🚨 **丸の描き方（下の 2 つの規則）は資料請求だけのものである**
 * （Bug #10180。婚活 EQ 診断つき資料請求の丸は、ご紹介のアンケートの節と携帯幅のアンケートの節で描く）.
 * -------------------------------------------------------------------------- */

.pa-form--dl .pa-radio-wrap,
.pa-form--mixed .pa-radio-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
}

/*
 * 婚活 EQ 診断つき資料請求のアンケートは、移行元が 1 行に 4 個ずつ並べる格子である
 * （`legacy/www.p-a.jp/public/css/page_inquiry.css` の `.enq_ul-1 li` が
 * `width:25%; line-height:40px; height:40px;`）。上の flex 並びを打ち消して、
 * 移行元と同じ 4 列の格子にする（Bug #1985）.
 */
.pa-form--mixed .pa-radio-wrap--grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 0.5em 1em;
}

/*
 * 選択肢と選択肢のあいだは器の `gap` で空ける。共通のラジオ（`.pa-form .pa-radio`）が
 * 持つ右余白 1.2em を残すと、`gap` の 2em に足されて移行元より広くなる.
 *
 * 丸と文字のあいだは 0.5em にする。移行元はラベルへ `padding-left: 1.5em` を与えて
 * 左端に 1em の丸を重ねるので、丸の右端と文字のあいだが 0.5em = 8px 空く。共通の
 * ラジオの 0.3em では 3.2px 狭い.
 */
.pa-form--dl .pa-radio-wrap .pa-radio,
.pa-form--mixed .pa-radio-wrap .pa-radio {
	margin-right: 0;
	gap: 0.5em;
}

/*
 * 丸そのもの。ブラウザ既定の描画を止めてから、移行元の `.radio::before` の値を写す
 * （1em の円・枠線 1px・塗りなし）。枠線の色は書かない。移行元も書いておらず、
 * 文字色を継いで `--text-color`（#4a453d）の枠線になる.
 *
 * **`color: inherit` が要る。** 枠線の色を書かない指定は文字色を使うが、ラジオの
 * 文字色はブラウザ既定で親から継がず、黒（#000000）になる。書かないと丸の枠線だけ
 * 黒くなり、移行元の #4a453d と食い違う（手元で描き出して実測した）.
 *
 * `flex: none` は縮み止めである。器が `display: flex` なので、既定の `flex-shrink: 1`
 * のままだと狭い画面で丸が楕円に潰れる.
 */
.pa-form--dl .pa-radio-wrap input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 1em;
	height: 1em;
	margin: 0;
	border: 1px solid;
	border-radius: 50%;
	background: transparent;
	color: inherit;
}

.pa-form--dl .pa-radio-wrap input[type="radio"]:checked {
	border-color: var(--theme-color);
	background: var(--theme-color);
}

/*
 * 🚨 **上の 2 つの規則（資料請求の丸）を、婚活 EQ 診断つき資料請求（`.pa-form--mixed`・`/form/eq/`）の 8 択に当てない**
 * （Bug #10180・事業部シート No.83）。以前は `.pa-form--mixed` にも当てていたが（Bug #1985）、選んだときの塗り
 * `var(--theme-color)` を定義しているのは `.pa-form--dl` だけなので、`/form/eq/` では値が無くなり、押しても丸の地が透明・
 * 枠が字の色のままで、印が付かなかった（2026-10-10 の実測 `pa-verify-assets/A/83-8択の見た目-1010/`）。
 * しかもあの丸は移行元の資料請求の `.radio::before` の描き方で、EQ 診断の移行元の描き方ではない.
 *
 * 移行元の EQ 診断の 8 択は、ご紹介・資料請求の広告と同じ作りである:
 * パソコン版（`form/view/eq.php`）は `.enq_ul-1`（`css/page_inquiry.css` の 1249〜1259 行・ブラウザ標準の丸）、
 * 携帯版（`form/view/sp_eq.php`）は `#enquete_list`（`sp/css/style.css` の 2015〜2067 行・`label::before` の 35px の丸と、
 * 選ぶと `::after` の 18px の金の点）。そこで、それらのフォームの既存の規則（「ご紹介のアンケート」の節と、携帯幅の
 * 「アンケート」の節）に `/form/eq/`（`.pa-form[data-pa-form="eq"]`）を足して同じ値で描く.
 */

/*
 * 指の形のカーソルと、重ねたときに文字色が変わる動きも移行元の指定である
 * （`request/style.css` の `.radio` の `@media (hover: hover)`）。触る道具でしか
 * 反応しない環境では出さないので、移行元と同じ条件で囲む.
 */
@media (hover: hover) {
	.pa-form--dl .pa-radio-wrap .pa-radio,
	.pa-form--mixed .pa-radio-wrap .pa-radio {
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}

	.pa-form--dl .pa-radio-wrap .pa-radio:hover,
	.pa-form--mixed .pa-radio-wrap .pa-radio:hover {
		color: var(--theme-color);
	}
}

/* --------------------------------------------------------------------------
 * 性別の押しボタン 2 つ（AC 4.5。移行元の `.switch-box`）
 *
 * ラジオ本体は画面から見えなくし（`.pa-visually-hidden`）、対応するラベルを横 50%
 * ずつの押しボタンに見せる。ラベルは `for` でラジオを指すので、押すとラジオが選ばれる.
 * -------------------------------------------------------------------------- */

.pa-form--dl .pa-switch {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid #dddddd;
	border-radius: 0.4em;
	text-align: center;
}

.pa-form--dl .pa-switch__label {
	width: 50%;
	padding: 0.5em;
	font-weight: 700;
	cursor: pointer;
}

/* 左側のラベルだけ左の角を丸める（移行元の `.switch-box__label:not(.right)`）. */
.pa-form--dl .pa-switch__label:not(.pa-switch__label--right) {
	border-top-left-radius: 0.4em;
	border-bottom-left-radius: 0.4em;
}

/* 右側のラベルは左に境界線を持ち、右の角を丸める. */
.pa-form--dl .pa-switch__label--right {
	border-left: 1px solid #dddddd;
	border-top-right-radius: 0.4em;
	border-bottom-right-radius: 0.4em;
}

/* 選ばれた側は地が金色・文字が白になる. */
.pa-form--dl input:checked + .pa-switch__label {
	background-color: var(--theme-color);
	color: #ffffff;
}

/*
 * キーボードで操作している間の目印。
 *
 * **移行元に無い装飾を足すのではなく、移行先の変更が作った退行を塞ぐ指定である。**
 * 移行元はラジオを `hidden` 属性で隠すが、移行先は「`hidden` の付いた必須のラジオは
 * 未選択のとき送信が黙って止まる」のを避けるため、画面から見えなくする class
 * （`.pa-visually-hidden`）へ変えた（`PA_Forms_Embed::render_switch_radio()`）。その
 * 副作用で、焦点が当たるのが切り抜かれたラジオ本体になり、**未選択のあいだはどちらを
 * 操作しているのか画面から分からなくなっていた**（Codex の指摘・PR #1848）。焦点は
 * ラベルの側へ写して見せる.
 *
 * `:focus-visible` を使うので、指やマウスで押したときには出ない。押した先が既に
 * 見えている操作で輪郭を足すと、移行元と違う見え方になるためである.
 *
 * 色は `#333333` にする。**選ばれた側の金色の地（`#a08046`）の上でも見える必要がある。**
 * 本文の文字色（`--text-color` = `#4a453d`）は金色に対して 2.57:1 しかなく、輪郭として
 * 細い線では埋もれる。`#333333` なら金色に対して 3.41:1、白地に対して 12.63:1、
 * 指で操作しない端末の重ね色（`#dfd8cd`）に対して 8.93:1 で、3 通りの地すべてで
 * 3:1 を超える（計算で確認した）.
 *
 * 内側へ 3px ずらすのは、輪郭を押しボタンの中に収めるためである。外へ出すと、隣の
 * ラベルとの境界線や押しボタン全体の枠線と重なる.
 */
.pa-form--dl input:focus-visible + .pa-switch__label {
	outline: 2px solid #333333;
	outline-offset: -3px;
}

/* 指で操作しない端末だけの変化（移行元も `@media (hover: hover)` で分けている）. */
@media (hover: hover) {

	.pa-form--dl .pa-switch:hover,
	.pa-form--dl .pa-switch:hover > * {
		border-color: var(--theme-color);
	}

	.pa-form--dl .pa-switch__label {
		transition: 0.3s all ease-in-out;
	}

	.pa-form--dl .pa-switch__label:hover {
		background-color: #dfd8cd;
	}
}

/*
 * `※` の注記（AC 4.6。移行元の `.asterisk-list__item`）。
 *
 * **`※` は CSS から足さない。** 移行元は `::before` で足しているが、移行先は文言の
 * 中に含めている（Task #1773）。CSS から足すと `※` が 2 つ並ぶ。代わりに、移行元と
 * 同じ「`※` を左端に出し、折り返した行を 1.25em 下げる」見え方を、字下げの打ち消し
 * （`text-indent`）で作る.
 *
 * 上下の余白 16px は、移行元の囲み（`.asterisk-list { margin: 1em 0 }`）の実寸である。
 * 囲みの基準が 16px なので 16px になる。ここでは注記そのものへ与えるため、`em` で
 * 書くと注記の 12.8px を基準にしてしまう。実寸で書く.
 *
 * セレクタに `.pa-form` を前置して class 3 つにしてあるのは、このファイルの下の方に
 * ある `.pa-form .pa-note`（7 種共通の添え書き。0.85em・`#555`・上の余白 0.3em）に
 * 勝たせるためである。class 2 つ同士では後に書いた側が勝ってしまう（実測で確認した）.
 */
.pa-form.pa-form--dl .pa-note {
	margin: 16px 0;
	padding-left: 1.25em;
	color: #757575;
	font-size: 0.8em;
	text-indent: -1.25em;
}

/*
 * 入力欄を持たない案内の行（資料請求の「資料の受け取り方」）の注記（Bug #9939）。
 *
 * 移行元 `request/style.css` の `.asterisk-list` と `.asterisk-list__item` の値を、そのまま写す。
 * 組みも移行元と同じ `dd > ul > li` で、`ul` は flex の中に無いので、上の余白 1em は `dd` の上の余白と相殺され、
 * 下の余白 1em は `dl` の外へ抜けて次のアンケートの押しボタンの帯の上の余白と相殺される（移行元と同じ）.
 * 「※」は `::before` で出し、本文は 1.25em 右から始まる（移行元と同じ空き）.
 *
 * セレクタの頭に `.pa-form.pa-form--dl` を置くのは、テーマの本文の `ul`・`li` の規則に勝たせるためである.
 */
.pa-form.pa-form--dl .pa-asterisk-list {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

.pa-form.pa-form--dl .pa-asterisk-list__item {
	position: relative;
	margin: 0;
	padding-left: 1.25em;
	color: #757575;
	font-size: 0.8em;
}

.pa-form.pa-form--dl .pa-asterisk-list__item::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}

/*
 * 送信ボタン周りの注意書き 3 本（AC 4.6。移行元の `.form-row__caption`）。上下の
 * 余白 `1em` は注意書き自身の 12.8px を基準にするので 12.8px になる（移行元も同じ）.
 */
/*
 * 行送りは移行元と同じ `normal` にする（Bug #8518）。フォームの器（`.pa-form--dl`）は
 * `normal` を敷くが、注意書きは `<p>` なので、テーマの本文の段落の規則が行送りを
 * 直に与え、器の値を受け継がない（749px 以下で 23.04px になっていた）.
 */
/*
 * 広告用の婚活 EQ 診断フォーム（`eq_ad`）も、同じ注意書き 3 本を持つ（Bug #8542）。
 * 移行元の `form/view/eq_ad.php`（1023〜1028 行）と `sp_eq_ad.php`（1004〜1008 行）は、
 * 資料請求と同じ `/request/style.css` の `.form-row__caption` を読む。`eq_ad` の組みは
 * 定義リスト（`.pa-form--dl`）ではなく `mixed` なので、当たり先を素の識別子で足す.
 */
.pa-form--dl .pa-form-row__caption,
.pa-form[data-pa-form="eq_ad"] .pa-form-row__caption {
	margin-block: 1em;
	font-size: 0.8em;
	line-height: normal;
}

.pa-form--dl .pa-form-row__caption a,
.pa-form[data-pa-form="eq_ad"] .pa-form-row__caption a {
	color: var(--dark-gray);
}

/*
 * eq_ad の注意書きの字は、上の資料請求の値を固定値で上書きする（Bug #8542）。移行元の eq_ad は、
 * 資料請求と別の型紙（`form/view/asset/css/style2019.css`・`style2019_sp.css`）の上に載っている。
 * 2026-09-26 の下見の実測で、移行元の注意書きは両幅とも 12.8px・行送り 23.04px・字の色
 * rgb(74, 69, 61)・リンクの色 rgb(138, 131, 120) だった.
 *
 * 🚨 **字の大きさを `em` で書かない。**dev の eq_ad は幅 749px 以下で器の字が 13px になり、
 * 0.8em が 10.4px になっていた（同じ下見の実測）。上下の外余白 `1em` は、この 12.8px を基準にして
 * 移行元と同じ 12.8px になる.
 */
.pa-form[data-pa-form="eq_ad"] .pa-form-row__caption {
	color: #4a453d;
	font-size: 12.8px;
	line-height: 23.04px;
}

.pa-form[data-pa-form="eq_ad"] .pa-form-row__caption a {
	color: #8a8378;
}

/*
 * 送信ボタンの上下の空きは、注意書きの `margin-block: 1em`（12.8px）だけで決める（Bug #8532）。
 * 移行元の `request/style.css` の `.form-row__submit` は外余白を持たず、前後の
 * `.form-row__caption` の外余白だけが空きになる。dev はボタンを包む `p.pa-form-submit` が
 * 全フォーム共通の上下 35px（`.pa-form .pa-form-submit`）を持ち、注意書きの 12.8px と
 * 相殺して 35px が勝っていた（上下とも 22.2px 広かった）.
 *
 * 当たるのは、送信ボタンの前後に注意書きを置く資料請求（`SUBMIT_NOTES_FORMS`）の
 * 包み（`.pa-form-row--submit`）だけである.
 */
.pa-form--dl .pa-form-row--submit .pa-form-submit,
.pa-form[data-pa-form="eq_ad"] .pa-form-row--submit .pa-form-submit {
	margin-top: 0;
	margin-bottom: 0;
}

/* 必須の印は項目名の後ろに置き、枠線だけの形にする。任意の印は出さない. */
.pa-form--dl .pa-badge {
	padding: 0.25em 0.5em;
	margin: 0 0 0 0.5em;
	border: 1px solid;
	background: transparent;
	color: #ff7878;
	font-size: 0.75em;
	line-height: 1;
}

/*
 * 送信ボタンは 7 種で揃える（Issue #1630 の承認済みの例外）。移行元は資料請求が
 * 横いっぱいの角丸、OTOCON の振り返りミーティングが 600x80px と別の形だが、
 * 「文字のボタンのまま移行元と同じ目立ち方へ寄せる」は承認を得た 1 件なので、
 * 勝手に組み方ごとへ散らさない.
 */

/* --------------------------------------------------------------------------
 * 格子の組み方（OTOCON 振り返りミーティングの予約）。実値は移行元の
 * form/css/otocon.css から写した
 * -------------------------------------------------------------------------- */

.pa-form--div {
	max-width: 902px;
}

.pa-form .pa-form-grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.pa-form .pa-form-grid__row {
	display: grid;
	grid-template-columns: 318px 1fr;
	gap: 40px;
	align-items: start;
}

.pa-form .pa-form-grid__label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.pa-form--div .pa-cell {
	gap: 13px 18px;
}

.pa-form--div .pa-cell-field {
	flex: 1 1 200px;
}

/*
 * 入力欄の内余白と文字サイズ（Bug #1857）。
 *
 * セレクタに `.pa-form` を前置して class 3 つにしてあるのは、このファイルの下の方に
 * ある `.pa-form .pa-control { padding: 5px; font-size: 1em }` に勝たせるためである。
 * class 2 つ同士では指定の強さが同じで、後に書いた側が勝ってしまう。**着手前は実際に
 * そうなっていた**（dev 実測 2026-08-17: 内余白は上下左右 5px、375px では文字 15px）。
 * 移行元のパソコン版の控え（`legacy/www.p-a.jp/public/form/css/otocon.css` の
 * 664-674 行）は `padding: 0 16px` と `font-size: 1rem` を与えており、こちらが写す
 * べき値である（同ファイルにメディアクエリは 1 つも無く、`.form-control` の内余白を
 * 書いている規則もこの 1 つだけである）.
 *
 * 前置で強さを上げる形は、資料請求（`.pa-form.pa-form--dl .pa-control`・Issue #1774）
 * と同じ組み方である。規則の並び順を動かさずに済み、他の 6 種へ届く指定
 * （`.pa-form .pa-control`）を 1 つも書き換えないためこの形を採る.
 *
 * 複数行入力欄の側も同じだけ強さを上げる。上だけを class 3 つにすると、class 2 つ +
 * タグ 1 つのこちらが負けて `padding-top: 16px` が消え、移行元（上 16px・下 0）と
 * 食い違うためである.
 */
.pa-form.pa-form--div .pa-control {
	min-height: 45px;
	padding: 0 16px;
	border: 1px solid #cfcfcf;
	border-radius: 2px;
	font-size: 1rem;
}

.pa-form.pa-form--div textarea.pa-control {
	min-height: 100px;
	padding-top: 16px;
	resize: vertical;
}

/* 必須の印は項目名の後ろに置き、角の丸い赤の帯にする。任意の印は出さない. */
.pa-form--div .pa-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	height: 25px;
	padding: 0 10px;
	margin: 0;
	border-radius: 5px;
	background: #ff0012;
	font-size: 0.875rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 設問の組み方（婚活 EQ 診断つき資料請求）。実値は移行元の page_inquiry.css の
 * #analysis 配下から写した
 * -------------------------------------------------------------------------- */

.pa-form .pa-question {
	margin: 0 0 25px;
	clear: both;
}

/*
 * 設問の見出し（Bug #2126）。
 *
 * 移行元は番号も本文も通常の太さ（`400`）である（パソコン版・スマートフォン版とも
 * 2026-08-26 に実測）。移行先の見出しは `dt` なので、テーマの共通 CSS が本文の中の
 * 定義リストの見出しへ一律に与える太字（`main.css` の
 * `.entry-content dt, .page-content__body dt { font-weight: bold }`）を受けて太く
 * 出ていた。フォームは固定ページの本文（`.page-content__body`）の中に差し込まれる
 * ためである。
 *
 * 打ち消しはここで行う。**共通 CSS は触らない**（全サイト共通の見た目に波及する）。
 * `!important` も要らない。テーマ側はクラス 1 個 + 要素 1 個（0,1,1）で、ここは
 * クラス 2 個（0,2,0）のため詳細度で素直に勝つ（手元の描画で実測済み）.
 */
.pa-form .pa-question__title {
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.05em;
}

.pa-form .pa-question__no {
	color: #e1200f;
}

/*
 * 設問の見出しは幅ごとに 2 つ出ており、既定では**パソコン幅用だけを見せる**
 * （Bug #2171。2 つ出す理由は `PA_Forms_Embed::render_question()` の説明を参照）。
 *
 * 隠す側は `display: none` にする。**画面外へ逃がす形（`.pa-visually-hidden` と
 * 同じ手法）は使わない。** 隠した側にも設問の本文が入っているため、読み上げに残すと
 * 同じ設問が 2 回読まれる。ここは画面に見えない側を読み上げの木からも外すのが正しい
 * （選択肢の文言を画面外へ逃がして読み上げに残す判断とは、逆の理由で逆の手を採る。
 * あちらは画面に「1」しか出ないので文言が要る）.
 */
.pa-form .pa-question__head--narrow {
	display: none;
}

.pa-form .pa-question__choices {
	padding: 20px;
	background: #f5f5f5;
	font-size: 14px;
}

/* 移行元は選択肢を横に並べ、右に 55px の間をあける. */
.pa-form .pa-question__choices .pa-radio {
	margin: 0 55px 0 0;
}

/*
 * 選択肢は番号（`.pa-radio__number`）と文言（`.pa-radio__text`）の両方を持つ
 * （Bug #2118。組み方の理由は `PA_Forms_Embed::render_question_radio()` を参照）。
 *
 * **パソコン幅では文言だけを見せる。** 移行元のパソコン版（`page_inquiry.css` の
 * `#analysis` 配下）は文言を見出しにしており、番号を出さない。番号は狭い画面だけの
 * 見た目なので、ここで消して後方の狭い画面の区分（`@media screen and
 * (max-width: 749px)`）で出し直す。
 *
 * 番号は `aria-hidden` を付けていない（狭い画面では画面に見えている文字なので、読み上げ名
 * にも含める必要がある。理由は `render_question_radio()` の説明を参照）。そのぶん、ここで
 * `display: none` にすると読み上げの木からも外れる。パソコン幅では番号が見えないので、
 * これが正しい（読み上げ名は文言だけの「かなりあてはまる」になる）。**文言の側は狭い画面でも
 * `display: none` にしない。** 画面外へ逃がす形で残す（後方の区分を参照）.
 */
.pa-form .pa-question__choices .pa-radio__number {
	display: none;
}

/*
 * まだ答えていない設問の帯の色（Bug #2028 → ユーザー決定 D751・Bug #9397）。
 *
 * **答える前も後も、土台の灰色（`#f5f5f5`）のままにする。**移行元の CSS（`css/page_inquiry.css` の
 * `#analysis dd { background:#F5F5F5 }`）の色である.
 *
 * Bug #2028 では、まだ答えていない設問の帯を薄いピンク（`#fddddd`）にしていた。移行元の本番で、タグマネージャー
 * （`GTM-TCD3F4`）経由の第三者の入力支援ツール（`app2.gorilla-efo.com`）が実行時に各設問へ `style` 属性を書き込んで
 * 塗り分けていたためである（2026-08-26 のユーザー裁定）。事業部の確認（W101・管理表 2026-10-04 版 No.83）が
 * 「移行元は薄い灰色」と指摘し、ユーザー決定 D751（2026-10-05）で 2026-08-26 の裁定を改めて、ピンクの規則を外した.
 *
 * 見張りは `tests/pa-forms/run-eq-unanswered-band.mjs`（ピンクの規則が無いこと・パソコン幅は答える前も後も灰色）.
 */

/*
 * パソコン幅の選択肢の行の高さ（Bug #8616）。
 *
 * 移行元のパソコン版（`page_inquiry.css` の `#analysis dd` と `#analysis dd .faq_list li`）は、
 * 選択肢の帯と選択肢の行を `line-height: 100%` で組み、ラジオボタンを
 * `vertical-align: top` で行の上端にそろえる。選択肢の行は 14px の字と同じ高さの 14px に
 * なる。移行先はテーマの本文の行の高さを受け継ぎ、選択肢（`label.pa-radio`）が 21px に
 * なっていた。帯の高さも 9px 高く、設問 1 問の高さが移行元の 93px に対し 102px だった.
 *
 * ラジオボタンと文言のあいだは、移行元では `input` と `label` のあいだの空白 1 つで、1440px の
 * 実測でラジオボタンの右端 203px から文言の左端 207px までの 4px である。移行先は `label` が
 * ラジオボタンと文言を包み、共通の `gap: 0.3em`（14px で 4.2px）で空けるため、文言が 0.19px
 * 右に出て、字の縁の画素が移行元と食い違っていた。ここで `gap` を 4px にする。
 * `label` を行の上端にそろえるのは、`inline-flex` の基準線で行が 14px より高くならない
 * ようにするためである.
 *
 * 当たり先は見た目の土台 `[data-pa-form-look="eq"]` で閉じる（婚活 EQ 診断と LP 系の
 * 広告フォーム 15 本）。狭い画面は押しボタンの組みで、後方の区分が受け持つ.
 */
@media screen and (min-width: 750px) {

	.pa-form[data-pa-form-look="eq"] .pa-question__choices {
		line-height: 100%;
	}

	.pa-form[data-pa-form-look="eq"] .pa-question__choices .pa-radio {
		align-items: flex-start;
		gap: 4px;
		vertical-align: top;
	}
}

/*
 * 携帯版の男性向け広告の婚活 EQ 診断フォーム（`eq_mens_lp` 系 5 本）の、設問の字の色（Bug #8617）。
 *
 * 移行元の携帯版の入力画面（`form/view/sp_eq_mens_lp.php`・`_as`・`_ju`・`_li`・`_rt`）は、
 * `sp/form/eqlp_mens/css/eq_mens.css` の `#wrap { color: #2f2f2f }` を読み、ページ全体を包む
 * `#wrap` の既定の字の色を `#2f2f2f` にする。設問の本文（`dl.analysis dd`）と選択肢の器
 * （`ul.list_faq`）は色の指定を持たず、この色を受け継ぐ。同じ土台の `eq_lp` 系・`eq_lp2` 系が
 * 読む CSS（`sp/form/eqlp/css/common.css`・`sp/form/eqlp2/css/eq2.css`）は `#wrap` に色を
 * 持たないので、黒のままである.
 *
 * ここでは設問（`.pa-question`）だけに色を与える（リーダーの判断・案 1）。番号は
 * `.pa-question__no` と `.pa-question__prefix` が赤を別に与え、押しボタンの文字は `.pa-radio` が白を
 * 別に与えるので、この指定では動かない。フォームのほかの字（表の題・欄の添え字・選択肢・同意の欄など）は
 * すぐ下の Bug #8643 の指定が受け持つ.
 *
 * パソコン幅は対象外である。移行元の設定はパソコン版の入力画面に `eq_mens_lp.php` を指すが、
 * そのファイルが無い.
 */
@media (max-width: 749px) {

	.pa-form:is([data-pa-form="eq_mens_lp"], [data-pa-form="eq_mens_lp_as"], [data-pa-form="eq_mens_lp_ju"], [data-pa-form="eq_mens_lp_li"], [data-pa-form="eq_mens_lp_rt"]) .pa-question {
		color: #2f2f2f;
	}
}

/*
 * 携帯版の男性向け広告の婚活 EQ 診断フォーム（`eq_mens_lp` 系 5 本）の、設問の外の字の色（Bug #8643）。
 *
 * 上の Bug #8617 と同じく、移行元の `#wrap { color: #2f2f2f }` を写す。Bug #8617 の下見（走行 2）の実測で、
 * 設問の外の 36 種類（表の題・欄の添え字・選択肢・アンケートの問い・同意の欄・設問と個人情報の間の見出し）が
 * 移行元の `rgb(47, 47, 47)` と違った.
 *
 * - フォームの外枠（`.pa-form`）に色を与え、色の指定を持たない字に受け継がせる。dev の黒は、テーマの
 *   `.page-content__body` の本文色を受け継いだものである
 * - 「同意する」（`.pa-form-consent__agree`）は、全フォーム共通の指定が `#000000` を別に与えるので、ここで上書きする
 * - 「続いて、診断結果の送付先の情報を入力ください。」（`.pa-eq-transition__heading`）は、テーマの
 *   `.page-content__body h3` から見出しの金色（`--pa-color-heading`）を受け継ぐので、ここで上書きする。
 *   移行元の携帯版は色の指定を持たない `p.form_ttl` で、パソコン版は黒い太字の明朝の文字画像（`text.gif`）である。
 *   携帯幅だけを移行元に合わせる（D598 のケース 1・リーダーの判断・案 1）
 *
 * 赤い必須の印や白い押しボタンの文字など、色を別に与えている字は動かない。パソコン幅は上と同じ理由で対象外である.
 */
@media (max-width: 749px) {

	.pa-form:is([data-pa-form="eq_mens_lp"], [data-pa-form="eq_mens_lp_as"], [data-pa-form="eq_mens_lp_ju"], [data-pa-form="eq_mens_lp_li"], [data-pa-form="eq_mens_lp_rt"]),
	.pa-form:is([data-pa-form="eq_mens_lp"], [data-pa-form="eq_mens_lp_as"], [data-pa-form="eq_mens_lp_ju"], [data-pa-form="eq_mens_lp_li"], [data-pa-form="eq_mens_lp_rt"]) .pa-form-consent__agree,
	.pa-form:is([data-pa-form="eq_mens_lp"], [data-pa-form="eq_mens_lp_as"], [data-pa-form="eq_mens_lp_ju"], [data-pa-form="eq_mens_lp_li"], [data-pa-form="eq_mens_lp_rt"]) .pa-eq-transition__heading {
		color: #2f2f2f;
	}
}

/* --------------------------------------------------------------------------
 * 婚活 EQ 診断つき資料請求の、ページ上部の案内（Bug #1985）。
 *
 * 実値は移行元の `legacy/www.p-a.jp/public/css/page_inquiry.css` の
 * `.category_ttl` / `#analysis .form_text02` / `#analysis .check_box` 配下から
 * 写した。固定ページの本文（`the_content()`）ではなく、ショートコードの出力
 * 自身がこの案内を持つ理由は `PA_Forms_Embed::render_eq_top_intro()` の説明を
 * 参照.
 * -------------------------------------------------------------------------- */

.pa-form--mixed .pa-eq-intro__heading {
	margin: 0 0 50px;
	line-height: 0;
}

.pa-form--mixed .pa-eq-intro__heading img {
	max-width: 100%;
	height: auto;
}

.pa-form--mixed .pa-eq-intro__media {
	margin: 0 0 25px;
	font-size: 15px;
	line-height: 1.66;
}

.pa-form--mixed .pa-eq-intro__keypad {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin: 0 0 40px;
	padding: 10px 20px 10px 10px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.pa-form--mixed .pa-eq-intro__keypad-text {
	flex: 1 1 480px;
	padding-top: 15px;
	font-size: 14px;
}

/*
 * テンキーの案内の 1 行目（Bug #9051）。テーマの本文の段落の規則が下の外余白 25px を与え、文の列が
 * 82px（15 + 21 + 25 + 21）になって、テンキーの絵（68px）より高くなっていた。移行元の段落
 * （`#analysis .check_box .text_check p`）は外余白 0 で、凡例とは凡例の上の内余白 6px だけで離れる。
 * 文の列は 63px で、見本の箱は絵の高さで決まって 90px になる（幅 1440 の実測 2026-09-30・
 * `pa-verify-assets/B/9051-読み-0930/`・移行元 90 ／ dev 104）。
 * 携帯幅ではこの段落を出さない（後方の狭い画面の区分で `display: none`）.
 */
.pa-form--mixed .pa-eq-intro__keypad-lead {
	margin: 0;
}

/*
 * 狭い画面だけに出す案内（Bug #2118）。移行元のスマートフォン専用ページの文言で、
 * パソコン版には無い（移行元のパソコン版はテンキーの案内を出す）。パソコン幅の
 * 見た目を 1px も変えないため、ここでは消しておき、後方の狭い画面の区分で出す。
 *
 * ここは `display: none` でよい。同じ役割の文（テンキーの案内）がパソコン幅では
 * 見えているので、読み上げから落ちる中身が無い.
 */
.pa-form--mixed .pa-eq-intro__keypad-note {
	display: none;
}

.pa-form--mixed .pa-eq-intro__keypad-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.pa-form--mixed .pa-eq-intro__keypad-legend li {
	display: flex;
	align-items: center;
	gap: 15px;
}

.pa-form--mixed .pa-eq-intro__keypad-legend span {
	color: #e1200f;
}

/*
 * 携帯幅だけの対応表の絵（Bug #9397・W191）。パソコン幅は文字の対応表（`.pa-eq-intro__keypad-legend`）を出すので隠す.
 * 携帯幅で出す指定は、下の携帯幅の区分（Bug #2118 の節の後ろ・Bug #9397）にある.
 */
.pa-form--mixed .pa-eq-intro__keypad-sp-image {
	display: none;
}

.pa-form--mixed .pa-eq-intro__keypad-image {
	flex: 0 0 auto;
	margin: 0;
}

.pa-form--mixed .pa-eq-intro__keypad-image img {
	display: block;
	width: 272px;
	height: 68px;
}

/* --------------------------------------------------------------------------
 * 婚活 EQ 診断つき資料請求の、設問と個人情報の間に置く見出しと進み具合の表示
 * （Bug #1985）。
 *
 * 見出し・説明は `#analysis .form_text` / `.form_text02` から、進み具合の
 * 表示（`flow-list`）は `legacy/www.p-a.jp/public/spiral/eq/css/style.css`
 * から実値を写した。進み具合の表示は、確認画面を挟まない構成（入力 → 完了の
 * 2 段）と両立する対象として本 Issue の AC に残っている（PR 本文の裁定を参照）.
 * -------------------------------------------------------------------------- */

.pa-form--mixed .pa-eq-transition__heading {
	margin: 0;
	padding: 65px 0 25px;
	font-size: 15px;
	line-height: 1.66;
	font-weight: normal;
}

/*
 * パソコン幅の見出しの高さ（Bug #9051）。移行元のパソコン版は中身が文字の画像（`text.gif`・379×23）で、
 * 画像が行の中に乗るので行の箱が 30.91px になり、見出しは 120.91px（65 + 30.91 + 25）である。
 * dev は字（15px・行送り 24.9px）なので 114.89px だった（幅 1440 の実測 2026-09-30・
 * `pa-verify-assets/B/9051-読み-0930/`）。字の位置は動かさず、下の内余白で差の 6.02px を足す。
 * 行送りを 30.91px にすると字が約 3px 下がるので採らない。
 * 携帯幅は移行元も字（`p.form_ttl`）なので触らない.
 */
@media (min-width: 750px) {

	.pa-form--mixed .pa-eq-transition__heading {
		padding-bottom: 31.02px;
	}
}

/*
 * パソコン幅の見出しの字を、移行元の文字画像と同じ見た目にする（Bug #9397・W192・D598 のケース 1）。
 *
 * 移行元のパソコン版（`form/view/eq.php` の 601 行・`eq_lp.php` も同じ絵）は、見出しを文字画像 `images/inquiry/analysis/text.gif`
 * （379×23）で出す。絵の中身は白地に黒い太字の明朝の字だけで、画素は黒 rgb(0, 0, 0) とそのにじみの灰色だけである（2026-10-05 に
 * 数えた。金色の画素は無い）。字の範囲は横 0〜374・縦 4〜19 で、24 文字の送りは約 16px である。
 * 「絵の中の文言は背景＋テキスト」の原則に従い、字だけの絵なので、すゝめの見出し（D488）と同じく字と CSS で作る.
 *
 * 行の高さを絵の高さ（23px）にそろえ、上の内余白 65px はそのまま、下の内余白を 120.91 − 65 − 23 ＝ 32.91px にして、見出しの
 * 高さ（移行元 120.91px）を保つ。上の Bug #9051 の下の内余白（31.02px。行送り 24.9px のとき）はここで置き替える.
 *
 * 当てるのは、移行元でこの絵を持つ 6 本（`eq` と `eq_lp` 系 5 本）だけである。`eq_as`・`eq_ad` はこの見出しを持たない
 * （`render_legacy_basic_lead()` を出す）。`eq_lp2` 系・`eq_mens_lp` 系は移行元にパソコン版が無い.
 */
@media (min-width: 750px) {

	.pa-form--mixed:is([data-pa-form="eq"], [data-pa-form="eq_lp"], [data-pa-form="eq_lp_as"], [data-pa-form="eq_lp_ju"], [data-pa-form="eq_lp_li"], [data-pa-form="eq_lp_rt"]) .pa-eq-transition__heading {
		padding-bottom: 32.91px;
		color: #000;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 16px;
		font-weight: bold;
		line-height: 23px;
	}
}

/*
 * 携帯幅の見出しの色と字の大きさ（Bug #8650）。
 *
 * 移行元の携帯版の入力画面（`form/view/sp_<鍵>.php`）は、16 本とも色の指定を持たない `p.form_ttl` で、
 * `sp/css/style.css` の `#analysis .form_ttl { font-size: 14px }` だけを読む。字は黒の 14px になる。
 * dev は、テーマの `.page-content__body h3` から見出しの金色（`--pa-color-heading`）を受け継ぎ、上の指定で 15px になる.
 *
 * 色は `inherit` にせず、移行元の黒を書く。テーマの本文色（`--pa-color-text`）は #474747 で、親の色に
 * 任せると黒にならないことがある。`eq_mens_lp` 系 5 本は、上の Bug #8643 の指定（詳細度が高い）が
 * #2f2f2f を与えるので、そちらが勝つ（移行元も `#wrap` から #2f2f2f を受け継ぐ）.
 *
 * パソコン幅は対象外である。移行元のパソコン版（`form/view/eq.php` の 601 行）は黒い太字の明朝の文字画像（`text.gif`）で、
 * 上の Bug #9397 の節が受け持つ.
 */
@media (max-width: 749px) {

	.pa-form--mixed .pa-eq-transition__heading {
		color: #000;
		font-size: 14px;
	}
}

.pa-form--mixed .pa-eq-transition__text {
	margin: 0 0 25px;
	font-size: 15px;
	line-height: 1.66;
}

/*
 * 婚活 EQ 診断（`eq`）のパソコン幅の、送付先の案内文から手順の帯までの空き（Bug #9473）。
 *
 * 移行元のパソコン版 `form/view/eq.php` の 604〜605 行は、案内文 `p.form_text02` の字の 2 行の後ろに `<br>` と改行と `<br>` を
 * 置き、空の行を 1 つ作る。案内文はさらに下の内余白 25px を持つ。案内文の箱は 24.9 × 3 行 ＋ 25 ＝ 99.7 になり、手順の帯
 * `ol.flow-list` はそのすぐ下に付く（外余白 0）。dev は空の行も内余白も持たず、外余白 25px だけなので、帯が 24.9 上へずれていた
 * （2026-10-05 の実測・`pa-verify-assets/A/9473-直す前-1005/` と `A/9473-下見-1005/`）.
 *
 * 空の `<br>` を字に足すと読み上げに空の行が残るので、空の 1 行（1.66em。15px で 24.9px）と内余白 25px の和を外余白で持つ.
 * 携帯幅は対象外である。移行元の携帯版 `sp_eq.php` は案内文の末尾に `<br>` を持たず、帯を内余白 20px の `div` で包む別の組みで、
 * 今の dev の値を変えない.
 */
@media (min-width: 750px) {

	.pa-form--mixed[data-pa-form="eq"] .pa-eq-transition__text {
		margin-bottom: calc(1.66em + 25px);
	}
}

/*
 * 進み具合の表示（`ol.pa-eq-flow`）は、資料請求の広告フォーム `request_ad`・`request_as` の表の組み（`.pa-form--table`）にも
 * 当てる（Task #9564・D777）。移行元の `.flow-list` の規則（`public/css/style.css` 272〜367 行・携帯版 255〜322 行）は、
 * 婚活 EQ 診断と同じ値である（2026-10-06 の CDP の読み・`pa-verify-assets/A/9564-直す前-1006/`）.
 * 表の組みでこの部品を出すのは、埋め込みの `FLOW_BAND_AD_FORMS` の 2 本だけである.
 */
.pa-form--mixed .pa-eq-flow,
.pa-form--table .pa-eq-flow {
	display: flex;
	width: 100%;
	margin: 0 0 35px;
	padding: 0;
	list-style: none;
}

.pa-form--mixed .pa-eq-flow__step,
.pa-form--table .pa-eq-flow__step {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52%;
	height: 30px;
	margin-right: 14px;
	box-sizing: border-box;
	background-color: #f1f1f1;
	font-size: 15px;
	font-weight: bold;
	color: #666;
}

.pa-form--mixed .pa-eq-flow__step::before,
.pa-form--table .pa-eq-flow__step::before {
	content: "";
	position: absolute;
	top: 0;
	right: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent #f1f1f1;
}

.pa-form--mixed .pa-eq-flow__step:last-child,
.pa-form--table .pa-eq-flow__step:last-child {
	width: 48%;
	margin-right: 0;
}

.pa-form--mixed .pa-eq-flow__step:last-child::before,
.pa-form--table .pa-eq-flow__step:last-child::before {
	content: none;
}

.pa-form--mixed .pa-eq-flow__num,
.pa-form--table .pa-eq-flow__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 7px;
	border-radius: 10px;
	background-color: #fff;
	color: #666;
	font-family: Arial, sans-serif;
}

.pa-form--mixed .pa-eq-flow__step--current,
.pa-form--table .pa-eq-flow__step--current {
	background-color: #666;
	color: #fff;
}

.pa-form--mixed .pa-eq-flow__step--current::before,
.pa-form--table .pa-eq-flow__step--current::before {
	border-color: transparent transparent transparent #666;
}

.pa-form--mixed .pa-eq-flow__step--current .pa-eq-flow__num,
.pa-form--table .pa-eq-flow__step--current .pa-eq-flow__num {
	background-color: #fff;
	color: #666;
}

/*
 * 今の段の字の改行（Bug #9593）。移行元の携帯版だけが「必要事項を」「入力」の 2 行で、パソコン版は 1 行である.
 * 改行は携帯幅の節（`@media (max-width: 749px)`）で出す.
 */
.pa-form--table .pa-eq-flow__br {
	display: none;
}

/* --------------------------------------------------------------------------
 * 入力欄そのもの。幅は組み方ごとに移行元の値へ戻す
 * -------------------------------------------------------------------------- */

/*
 * 書体は指定しない（Issue #1765）。
 *
 * 移行元は入力欄・選択欄・押しボタンを、ブラウザ内蔵の書体のままにしている
 * （一行入力欄・選択欄・押しボタンは Arial、複数行入力欄は等幅）。移行元の
 * 共通 CSS（`public/css/common.css` の 110 行）が `font-family:inherit` を
 * コメントアウトしていて、本文の書体を継がせていないためである.
 *
 * よってこのファイルでも書体を指定しない。Issue #1616 で入れた「本文へ揃える」
 * 指定は巻き戻した（ユーザー裁定 2026-08-10・材料は Task #1655）.
 *
 * 移行元はサイト全体で書体を統一していないため、ここで統一の方針は決めない
 * （構築後フェーズの提案へ切り出し済み）.
 */

.pa-form .pa-control {
	box-sizing: border-box;
	max-width: 100%;
	padding: 5px;
	font-size: 1em;
}

/*
 * 一行入力欄・複数行入力欄の行の高さ（Issue #1808）。
 *
 * 移行元は 16px × 1.4 = 22.4px、dev は既定の `normal`（≒18px）で、この差
 * 4.4px が一行入力欄の高さの残差そのものだった（着手時の実測。内余白 5px と
 * 枠線は一致していた）。対象は寸法の検収で残差が確定した 3 種
 * （F-2 婚活EQ診断つき資料請求・F-4 お問い合わせ・F-5 法人からの問い合わせ）に
 * 閉じる。**F-6 ご紹介プログラム（shoukai）は対象外**で、移行元が別ページ
 * （`intro/mypageform_02.php`）の CSS を使っており、フォントサイズ 15.84px・
 * 行の高さ `normal`・枠線 1px と、この 3 種とは寸法の作りが違う。ここへ同じ
 * line-height を当てると、既に許容範囲（差 2px）に収まっている F-6 の高さが
 * 差 6.4px まで広がってしまう（実測で確認済み）ため、フォームの識別子で
 * 明示的に絞る。
 */
.pa-form[data-pa-form="eq"] input.pa-control,
.pa-form[data-pa-form="eq"] textarea.pa-control,
.pa-form[data-pa-form="toiawase"] input.pa-control,
.pa-form[data-pa-form="toiawase"] textarea.pa-control,
.pa-form[data-pa-form="houjin"] input.pa-control,
.pa-form[data-pa-form="houjin"] textarea.pa-control,
.pa-form[data-pa-form="request_lp"] input.pa-control,
.pa-form[data-pa-form="request_intro"] input.pa-control,
.pa-form[data-pa-form="request_tool_test"] input.pa-control,
.pa-form[data-pa-form="request_tool_ad"] input.pa-control,
.pa-form[data-pa-form="request_tool_as"] input.pa-control,
.pa-form[data-pa-form="request_ad"] input.pa-control,
.pa-form[data-pa-form="request_online"] input.pa-control,
.pa-form[data-pa-form="request_as"] input.pa-control,
.pa-form[data-pa-form="request_lp"] textarea.pa-control,
.pa-form[data-pa-form="request_intro"] textarea.pa-control,
.pa-form[data-pa-form="request_tool_test"] textarea.pa-control,
.pa-form[data-pa-form="request_tool_ad"] textarea.pa-control,
.pa-form[data-pa-form="request_tool_as"] textarea.pa-control,
.pa-form[data-pa-form="request_ad"] textarea.pa-control,
.pa-form[data-pa-form="request_online"] textarea.pa-control,
.pa-form[data-pa-form="request_as"] textarea.pa-control {
	line-height: 1.4;
}

/*
 * 会員紹介とご紹介の来店予約のパソコン幅（Bug #8553）。
 *
 * 移行元のパソコン版（`form/view/intro/reservation_intro.php`・`form/view/reservation3.php`）は
 * 新しい CSS の束を読み、`css/common.css` 160 行の `input, textarea { line-height: 1.4 }` で
 * 一行入力欄が 36.39、rows=8 のコメントの欄が 191.13 になる。dev は行送りが `normal` の 32 と、
 * `min-height: 124` だった（2026-09-27 の直す前の測定・CDP・記録 `pa-verify-assets/B/8553-直す前-0927/`）。
 * 選択欄の高さは両側とも同じで、幅だけが中身なり（年 128・月と日 56・都道府県 150）である.
 *
 * 携帯幅は移行元が別の型紙なので、750px 以上に閉じる。社員紹介は古い束を読むので値が違う
 * （Bug #8538）.
 */
@media (min-width: 750px) {
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) input.pa-control,
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) textarea.pa-control {
		line-height: 1.4;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) textarea.pa-control {
		min-height: calc(1.4em * 8 + 10px + 2px);
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell select.pa-control[name="birth-year"] {
		width: 128px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell select.pa-control:is([name="birth-month"], [name="birth-day"]) {
		width: 56px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell select.pa-control[name="pref"] {
		width: 150px;
	}

	/*
	 * 一行入力欄の幅。移行元は `size` の既定で 180、`size="40"` の町名・番地と建物名が 340 である.
	 * 郵便番号・電話番号・e-mail は dev の定義の幅が移行元と同じだった（2026-09-27 の下見の実測）.
	 */
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell input.pa-control[name="address01"] {
		width: 180px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell input.pa-control:is([name="address02"], [name="address03"]) {
		width: 340px;
	}

	/*
	 * お名前。移行元は幅 40px の「姓」「名」（`table td label.size01`）・空白 1 字（4.57px）・欄の並びで、
	 * 欄の右は `table td input[type="text"] { margin-right: 18px }` と空白 1 字である.
	 */
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell:has(input[name="sei"], input[name="sei-kana"]) {
		column-gap: calc(18px + 4.57px);
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field {
		column-gap: 4.57px;
	}

	/*
	 * 生年月日の欄のあいだ。移行元は欄・空白 1 字・幅 40px の「年」「月」・空白 1 字である
	 * （社員紹介の Bug #8538 と同じ組みで、空白 1 字はこの書体で 4.57px）.
	 */
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell:has(select[name="birth-year"]),
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell:has(select[name="birth-year"]) .pa-cell-field {
		column-gap: 4.57px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell-field:has(select:is([name="birth-year"], [name="birth-month"])) .pa-unit {
		width: 40px;
	}

	/*
	 * 来店希望日。会員紹介は日付の選択部品が右の内余白 26px を足して 201、ご紹介は 180 である.
	 *
	 * 並びは、札の右 10px（ご紹介だけ札を持つ）・「第1希望」の右 20px・欄の右 20px と、あいだの
	 * 空白 1 字（札と字のあいだ・字と欄のあいだは 4.57px、欄と「日付を選択してください」のあいだは
	 * 2.56px）である。縦は、1 行の高さが欄の 36.39 で決まり、字と札は 4.43px 下、
	 * 「日付を選択してください」（行の高さ 16）は 8.43px 下に来る。希望どうしは `p.mb15` の 15px で、
	 * dev は改行の印の上下の 2 つの `row-gap` で置く（7.5px × 2）（2026-09-27 の下見の実測）.
	 */
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell:has(.pa-cell-field-date) {
		align-items: flex-start;
		gap: 7.5px calc(20px + 2.56px);
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell-field-date {
		align-items: flex-start;
		column-gap: 0;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell-field-date .pa-badge {
		margin-top: 4.43px;
		margin-right: calc(10px + 4.57px);
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell-field-date .pa-sub-label {
		min-width: 0;
		margin-top: 4.43px;
		margin-right: calc(20px + 4.57px);
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell:has(.pa-cell-field-date) .pa-time-placeholder {
		margin-top: 8.43px;
		line-height: 16px;
	}

	/*
	 * 「店舗が休業日の際は…」の注記。移行元は第 3 希望のすぐ下の `p.form_text`（15px・行送り 24.9px・
	 * 黒・下の外余白 25px）である。dev は改行の印の後ろの `row-gap` 7.5px を打ち消して詰める
	 * （2026-09-27 の下見の 3 回目の実測）.
	 */
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell:has(.pa-cell-field-date) > .pa-note {
		margin: -7.5px 0 25px;
		color: #000000;
		font-size: 15px;
		line-height: 24.9px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control {
		height: 36.39px;
	}

	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control {
		width: 201px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control {
		width: 180px;
	}

	/*
	 * ご紹介のアンケート。移行元は `css/page_inquiry.css` の `.enq_ul-1 li { float: left;
	 * width: 25%; line-height: 40px; height: 40px }` で 1 行に 4 個ずつ並べ、丸は
	 * `.enq_ul-1 input[type="radio"] { margin: 0 5px }` のブラウザ既定の丸である.
	 * 丸と字のあいだに空白は無い（`<input … /><label …>`）.
	 *
	 * 高さは `min-height` で置く。幅 750〜940px ほどの画面では「インターネット広告」などが
	 * 25% の幅に収まらず 2 行に折れるので、固定の `height` だと下の選択肢に重なる.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="eq"] .pa-cell:has(.pa-radio-wrap--grid) {
		row-gap: 0;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="eq"] .pa-cell-field:has(> .pa-radio-wrap--grid) {
		flex-basis: 100%;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	/*
	 * 婚活 EQ 診断つき資料請求だけは、器の `.pa-form--mixed .pa-radio-wrap--grid { gap: 0.5em 1em }`（4 列の格子の間）が残り、
	 * 幅 25% の選択肢の間に 16px が足されて 4 個目が次の段へ折れる（Bug #10180 の下見の走行 3・1 個ごとに 16px 右・2 段目は 8px 下）。
	 * 移行元の `.enq_ul-1 li` は間を持たないので、0 にする.
	 */
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid {
		gap: 0;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio {
		align-items: flex-start;
		width: 25%;
		min-height: 40px;
		margin: 0;
		gap: 0;
		line-height: 40px;
	}

	/* 丸の縦は、移行元の `vertical-align: middle` が行の高さ 40 の中で置く 15.26px である. */
	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio input[type="radio"] {
		margin: 15.26px 5px 0;
	}
}

/*
 * 🚨 **入力欄の枠線を 1px にするのは、移行元が古い CSS の束を読む 2 画面だけ**
 * （Bug #7936）。
 *
 * dev の `.pa-control` は枠線を 1 つも宣言していないので、**ブラウザ既定の 2px**
 * が当たる。移行元の入力画面（パソコン版）294 本のうち、枠線を宣言しているのは
 * `import_old.css`（→ `common_old.css`）を読む 10 本だけで、dev で言うと
 * **ご紹介プログラム（`shoukai`）と社員紹介の来店予約（`reservation_intro_02`）の
 * 2 種**に当たる。残りの 284 本は新しい束（`import.css`）を読み、枠線を宣言しない。
 * 実測したのはそのうちお問い合わせ 1 本で、移行元も dev も 2px であった。
 *
 * 移行元の値（`public/css/common_old.css` の `table input, table textarea,
 * table select`）:
 *
 *     border-top:1px solid #aaadb2;
 *     border-left:1px solid #e3e3ed;
 *     border-right:1px solid #dbdee3;
 *     border-bottom:1px solid #e2e9ef;
 *
 * 4 辺で色が違う、20 年前の立体風の見せ方である。**全体原則（見た目は移行元を
 * 完全再現）のとおりそのまま写す**（ユーザー決定・2026-09-20）。
 *
 * ## 🚨 狭い画面には当てない
 *
 * **移行元の携帯版は、この 2 画面でも枠線が 2px である。**携帯版は別の型紙
 * （`/sp/form/myintro/…`）で、`import_old.css` を読み込まない（測定で保存した
 * HTML の `<link>` を数えて確かめた）。よって `table input` の規則そのものが届かない。
 * 実測（2026-09-20 09:51・幅 375）で両側とも 2px、つまり**いまの dev と既に
 * 一致している**。ここを 1px にすると逆に差が生まれるので、750px 以上だけに閉じる。
 *
 * | 画面 | 幅 1440 の移行元 | 幅 375 の移行元 | dev（着手前・両幅） |
 * |---|---|---|---|
 * | ご紹介プログラム | **1px** | 2px | 2px |
 * | 社員紹介の来店予約 | **1px** | 2px | 2px |
 *
 * ## 選択欄には当てない
 *
 * 移行元の規則は `select` も含むが、**選択欄は両側とも 1px で太さが一致している**
 * （実測）。色までは測っていないので、**測っていない値を当てない**。選択欄へ枠線を
 * 宣言するとブラウザ既定の見た目から外れる副作用もある。色の突き合わせは別に測る.
 */
@media screen and (min-width: 750px) {

	.pa-form[data-pa-form="shoukai"] input.pa-control,
	.pa-form[data-pa-form="shoukai"] textarea.pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] input.pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] textarea.pa-control {
		border-top: 1px solid #aaadb2;
		border-right: 1px solid #dbdee3;
		border-bottom: 1px solid #e2e9ef;
		border-left: 1px solid #e3e3ed;
	}
}

/*
 * 選択欄の内余白（Issue #1808）。移行元は上下 3.2px・左右 8px、dev は既定の
 * 5px/5px だった。中身の高さ（19px）は一致していたので、内余白だけを直せば
 * 高さも幅も動く。
 *
 * 対象は表組みの系統（`.pa-form--table` / `.pa-form--mixed`）に絞る。F-6
 * （shoukai）に選択欄は無いので巻き込まれないが、資料請求（`.pa-form--dl`）と
 * OTOCON 予約（`.pa-form--div`）にも選択欄があり（生年月日・希望時刻）、絞らずに
 * 書くとこの 2 種の見た目まで変わってしまう。この 2 種は本 Issue の対象外
 * （資料請求は作り直し中、OTOCON は Bug #1782 の対象）である.
 *
 * **来店予約（raiten）は表組みの系統なので、選択欄 9 件（生年月日 3・都道府県・
 * きっかけ・店舗・希望時刻 3）と複数行入力欄 1 件が巻き込まれる。**
 * このフォームは移行元が外部の予約サービス（`reg18.smp.ne.jp`）へ中継するため
 * 突き合わせる相手が無く、Issue #1808 の実測の対象からも外れている。よって
 * 「移行元へ寄った」とは言えない。ここで起きるのは「移行元と一致した他の 4 種と
 * 同じ寸法に揃う」ことである。切り離すには来店予約だけ別扱いする指定が要るが、
 * 突き合わせる相手が無い以上、別扱いにする根拠も無いため揃える側を採った.
 */
.pa-form--table select.pa-control,
.pa-form--mixed select.pa-control {
	padding: 3.2px 8px;
}

/*
 * 幅は組み方ごとに分ける。移行元で欄ごとに幅が違ったのは表組みの系統だけで、
 * 資料請求と OTOCON の振り返りミーティングは、どの欄も横いっぱいに広げていた
 * （`request/style.css` の `.form-row input{width:100%}` と `otocon.css` の
 * `.form-control{width:100%}`）。同じ数値を 7 種すべてに当てると、この 2 種が
 * 移行元と別の見た目になる.
 *
 * 区分の名前は、移行元で実測した幅の数値そのものにしてある（`--180` なら 180px）。
 * 以前は `--md` / `--sm` / `--xs` の 3 段階だったが、移行元の幅は段階になって
 * おらず欄ごとにばらばらである（Issue #1808 の実測で 10 通り）。段階の名前を
 * 増やすと「`--lg` は何ピクセルか」を CSS まで見に行く必要が出るうえ、数値の
 * 名前と段階の名前が混ざって読み手が迷う。名前に数値を置けば、項目の定義
 * （`PA_Forms_Definitions`）を読むだけで移行元の幅が分かる.
 */
.pa-form--table input.pa-control,
.pa-form--mixed input.pa-control {
	width: 276px;
}

.pa-form--table select.pa-control,
.pa-form--mixed select.pa-control,
.pa-form--table input:is([type="date"], [data-pa-date-text]).pa-control,
.pa-form--mixed input:is([type="date"], [data-pa-date-text]).pa-control {
	width: 184px;
}

/*
 * 複数行入力欄の幅と高さ（Issue #1808）。
 *
 * 幅は器（td）の相対値（`width: 95%`）をやめ、移行元の実測値をそのまま置く。
 * 相対値のままだと、器の実際の幅（`.pa-cell` 側の flex レイアウトが決める）と
 * 移行元の固定値のあいだに 12px のずれが残った（実測 774.3px、移行元
 * 786.3px）。このフォーム 3 種は器自体が `.pa-form--table` / `.pa-form--mixed`
 * の `max-width: 1100px` で頭打ちの固定レイアウトなので、固定値を置いても
 * 狭い画面での崩れは起きない（749px 以下は下のメディアクエリで `width: 100%`
 * が勝つ）.
 *
 * 高さは、移行元の中身の高さ 112px が行の高さ 22.4px の 5 行分にあたる
 * （22.4 × 5 + 内余白 10 + 枠線 2 = 124px）。5 行分はお問い合わせ・法人からの
 * 問い合わせが対象で、婚活 EQ 診断だけ移行元が 2 行分（56.8px）と短いため、
 * 下のフォーム別の指定で個別に上書きする.
 */
.pa-form--table textarea.pa-control,
.pa-form--mixed textarea.pa-control {
	width: 786.3px;
	min-height: 124px;
}

/* 婚活 EQ 診断つき資料請求だけ、移行元が複数行入力欄 2 行分（Issue #1808）. */
.pa-form[data-pa-form="eq"] textarea.pa-control {
	min-height: 56.8px;
}

/*
 * 資料請求の LP 専用フォーム（Task #8667）。生年月日の選択欄どうしの間隔。移行元は選択欄と単位の字
 * 「年」「月」のあいだと後ろに空白を持ち、選択欄の右端から次の選択欄の左端まで 49.13px である
 * （幅 1440 の実測。dev は囲みの間隔 18px を含めて 42px で、7.13px 狭かった）。携帯幅は下の携帯幅の節が決める.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(select[name="birth-year"]) {
		column-gap: calc(18px + 7.13px);
	}
}

/*
 * 資料請求の LP 専用フォーム（Task #8667）。移行元の `form/view/request_lp.php` のコメントは `rows="8"` で、
 * 高さ 191.13px（中身 22.4 × 8 ＝ 179.13 ＋ 内余白 10 ＋ 枠線 2）である.
 */
.pa-form[data-pa-form="request_lp"] textarea.pa-control,
.pa-form[data-pa-form="request_intro"] textarea.pa-control,
.pa-form[data-pa-form="request_tool_test"] textarea.pa-control,
.pa-form[data-pa-form="request_tool_ad"] textarea.pa-control,
.pa-form[data-pa-form="request_tool_as"] textarea.pa-control {
	min-height: 191.13px;
}

/*
 * 資料請求の冊子の広告フォーム（Task #8668・ユーザー決定 D645）。お名前の 4 欄の例文「姓」「名」「セイ」「メイ」は
 * 移行元の携帯版だけが持つ。パソコン版（`form/view/request_tool_ad.php`・`request_tool_as.php`）は例文を持たず、
 * 題「姓」「名」を欄の横に出すので、パソコン幅では例文の字を透明にする.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="request_tool_ad"] input.pa-control:is([name="sei"], [name="mei"], [name="sei-kana"], [name="mei-kana"])::placeholder,
	.pa-form[data-pa-form="request_tool_as"] input.pa-control:is([name="sei"], [name="mei"], [name="sei-kana"], [name="mei-kana"])::placeholder,
	.pa-form[data-pa-form="request_ad"] input.pa-control:is([name="sei"], [name="mei"], [name="sei-kana"], [name="mei-kana"])::placeholder,
	.pa-form[data-pa-form="request_online"] input.pa-control:is([name="sei"], [name="mei"], [name="sei-kana"], [name="mei-kana"])::placeholder,
	.pa-form[data-pa-form="request_as"] input.pa-control:is([name="sei"], [name="mei"], [name="sei-kana"], [name="mei-kana"])::placeholder {
		color: transparent;
	}
}

/*
 * 資料請求の広告フォーム（Task #8666）のパソコン幅。移行元は表を `/spiral/request/css/style.css` の
 * `.form-inner { font-size: 16px; line-height: 1.6 }` の中に置くので、中身の字の行送りが 25.6px になる
 * （LP 専用フォームと冊子の広告フォームは `normal`）。コメントは `rows="2"` で高さ 56.78（中身 22.4 × 2 ＋ 内余白 10 ＋ 枠線 2）.
 * コメントの幅は移行元の `page_inquiry.css` の `table td textarea { width: 95% }` で、中身の列 737.47 から左の内余白 30 を
 * 引いた 707.47 の 95% に、内余白と枠線の 12 を足した 684.09 になる。共通の固定幅 786.3px のままだと、欄が中身の列を
 * 816.3 まで押し広げ、題の列が 143.7 に縮んだ（2026-09-28 の下見の 1 回目）.
 * 「資料送付」の行の案内の文も、同じ 16px・25.6px の段落である（2026-09-28 の読みの実測・`pa-verify-assets/A/8666-adの読み-0928/走行1/`）.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="request_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_online"] .pa-form-table td,
	.pa-form[data-pa-form="request_as"] .pa-form-table td {
		line-height: 1.6;
	}

	.pa-form[data-pa-form="request_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_online"] textarea.pa-control,
	.pa-form[data-pa-form="request_as"] textarea.pa-control {
		width: 684.09px;
		min-height: 56.78px;
		height: 56.78px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-info-row__text,
	.pa-form[data-pa-form="request_online"] .pa-info-row__text,
	.pa-form[data-pa-form="request_as"] .pa-info-row__text {
		margin: 0;
		font-size: 16px;
		line-height: 1.6;
	}

	/* 題の括弧の中（移行元の `span.fs14`・`css/style.css` の 349〜351 行 `.fs14 { font-size: 14px }`）. */
	.pa-form[data-pa-form="request_ad"] .pa-form-table th .pa-row-label__small,
	.pa-form[data-pa-form="request_online"] .pa-form-table th .pa-row-label__small,
	.pa-form[data-pa-form="request_as"] .pa-form-table th .pa-row-label__small {
		font-size: 14px;
	}

	/*
	 * アンケートの問いの字。移行元の `p.enq_p-1` は器の 16px・25.6px を受け継ぐ（資料請求の 1.5 の規則より 1.59 高い・
	 * 2026-09-28 の下見の 2 回目）.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-cell-intro,
	.pa-form[data-pa-form="request_online"] .pa-cell-intro,
	.pa-form[data-pa-form="request_as"] .pa-cell-intro {
		line-height: 1.6;
	}

	/* 生年月日の年。移行元の選択欄は幅を持たず、游ゴシックの「1996/平成8」の幅で 131 になる（dev は 128 の固定）. */
	.pa-form[data-pa-form="request_ad"] select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_online"] select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_as"] select.pa-control[name="birth-year"] {
		width: 131px;
	}

	/*
	 * select だけを持つ欄（生年月日・都道府県）の高さを、移行元の行の高さに揃える。移行元は select を行の中に置き
	 * （`page_inquiry.css` の `table td select { vertical-align: middle }`）、行の高さが select の 26.38 より高い 26.95 になる。
	 * dev は欄が flex で、select の高さがそのまま欄の高さになるので、行が 0.57 ずつ低く、下の行が 1.16 上へずれた
	 * （2026-09-28 の下見の 4 回目・7 回目）。flex の中では vertical-align が効かないので、高さで揃える.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-form-table td .pa-cell-field-select,
	.pa-form[data-pa-form="request_online"] .pa-form-table td .pa-cell-field-select,
	.pa-form[data-pa-form="request_as"] .pa-form-table td .pa-cell-field-select {
		min-height: 26.95px;
	}

	/*
	 * 性別の押しボタン（Bug #9594。Bug #9645 で `request_lp`・`request_tool_ad`・`request_tool_as` へ広げた。移行元の型紙が同じ作りで、
	 * 1440 の実測も同じ値だった・2026-10-07 の直す前の実測 `pa-verify-assets/A/9645-46-直す前-1007/`）。
	 * 移行元の `request_ad.php`・`request_as.php` は「男」の `label` に `size02` を付け、
	 * `page_inquiry.css` の `table td label.size02 { width: 138px }` で幅を持たせる。押しボタンから字までと、
	 * 「男」の `label` の右端から「女」の押しボタンまでは、どちらも空白 1 字（幅 1440 で 4.6・2026-10-07 の直す前の実測）.
	 * そのため 2 つの押しボタンの左端の間は 160.2 になる。dev は字の幅で並べて 77 だった.
	 * 押しボタンの上端は、移行元は字の箱の上端（行の上から 4）にそろう。dev は行の中ほどへ寄せて 2.3 下にあった.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) {
		column-gap: 4.6px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio {
		gap: 4.6px;
		margin-right: 0;
	}

	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio:not(:last-child) {
		width: calc(13px + 4.6px + 138px);
	}

	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"] {
		align-self: flex-start;
		margin-top: 4px;
	}
}

/*
 * 区分ごとの幅。種別ごとの既定（input 276px / select 184px）に勝たせるため、
 * class を 2 つ重ねて指定の強さを上げている.
 *
 * 区分の名前は Issue #1630 の時点では相対的な大きさ（xs / sm / md）で
 * 付けていたが、Issue #1808 の実測で欄ごとの値がフォームをまたいでばらばら
 * だと分かった（実測で 10 通り）。もう大きさの呼び名では意味を持たせられない
 * ため、**すべての区分を移行元の px 値そのものの名前へ改めた**
 * （`pa-control--340` のように）。旧 md は `--180`、旧 sm は `--128`、
 * 旧 xs は `--56` にあたる.
 *
 * 数値の名前と大きさの呼び名を混ぜなかったのは、混ぜると「`--lg` は何ピクセルか」
 * を CSS まで見に行く必要が出るためである。名前に数値を置けば、項目の定義
 * （`PA_Forms_Definitions`）を読むだけで移行元の幅が分かる.
 */
.pa-form--table .pa-control.pa-control--180,
.pa-form--mixed .pa-control.pa-control--180 {
	width: 180px;
}

/*
 * 生年月日（年・月・日）は、`common_fields()` を共有する 3 フォーム
 * （資料請求・婚活 EQ 診断・来店予約）のうち婚活 EQ 診断だけ移行元の値が違う
 * （128px / 56px）。他の 2 フォームは着手前と同じ 120px / 92px のまま
 * （`pa-control--120` / `pa-control--92`、下に定義）。
 *
 * `common_fields()` 自体にこの値を書くと来店予約（移行元が外部の予約サービスへ
 * 中継するため突き合わせる相手が無く、この Issue の対象外）まで巻き込まれる
 * （実測で確認済み）。婚活 EQ 診断だけの上書き（`eq_display()`）でこの区分を
 * 当てることで、来店予約は着手前の値のまま残す.
 */
.pa-form--table .pa-control.pa-control--128,
.pa-form--mixed .pa-control.pa-control--128 {
	width: 128px;
}

.pa-form--table .pa-control.pa-control--56,
.pa-form--mixed .pa-control.pa-control--56 {
	width: 56px;
}

/*
 * 生年月日（年）／（月・日）の着手前の値（旧 `sm` / `xs`）。資料請求・来店予約は
 * 婚活 EQ 診断の上書きを受けないので、この区分のまま残る.
 */
.pa-form--table .pa-control.pa-control--120,
.pa-form--mixed .pa-control.pa-control--120 {
	width: 120px;
}

.pa-form--table .pa-control.pa-control--92,
.pa-form--mixed .pa-control.pa-control--92 {
	width: 92px;
}

/*
 * 町名・番地と建物・マンション名（`address02` / `address03`）は、婚活 EQ 診断・
 * お問い合わせ・法人からの問い合わせの 3 フォームで移行元が共通して 340px。
 * 法人からの問い合わせの社名（`corp`）も同じ 340px なので同じ区分に載せる
 * （Issue #1808）.
 */
.pa-form--table .pa-control.pa-control--340,
.pa-form--mixed .pa-control.pa-control--340 {
	width: 340px;
}

/*
 * 都道府県の選択欄は、婚活 EQ 診断・法人からの問い合わせで移行元 150px
 * （お問い合わせだけ 166px で別区分。Issue #1808）.
 */
.pa-form--table .pa-control.pa-control--150,
.pa-form--mixed .pa-control.pa-control--150 {
	width: 150px;
}

/* お問い合わせの都道府県の選択欄。移行元 166px（Issue #1808）. */
.pa-form--table .pa-control.pa-control--166,
.pa-form--mixed .pa-control.pa-control--166 {
	width: 166px;
}

/* 法人からの問い合わせの業種の選択欄。移行元 246px（Issue #1808）. */
.pa-form--table .pa-control.pa-control--246,
.pa-form--mixed .pa-control.pa-control--246 {
	width: 246px;
}

/* お問い合わせの件名の選択欄。移行元 566px（Issue #1808）. */
.pa-form--table .pa-control.pa-control--566,
.pa-form--mixed .pa-control.pa-control--566 {
	width: 566px;
}

/*
 * ご紹介プログラムのメールアドレス。移行元は電話番号・メールアドレスを
 * 分割していない唯一のフォームで、単独の欄として 212px（Issue #1808）.
 */
.pa-form--table .pa-control.pa-control--212,
.pa-form--mixed .pa-control.pa-control--212 {
	width: 212px;
}

/* ご紹介プログラムの電話番号（本人）。移行元 162px（Issue #1808）. */
.pa-form--table .pa-control.pa-control--162,
.pa-form--mixed .pa-control.pa-control--162 {
	width: 162px;
}

/* 定義リスト・格子・縦 1 列は、どの欄も横いっぱいに広げる（移行元と同じ）. */
.pa-form--dl .pa-control,
.pa-form--div .pa-control,
.pa-form--stack .pa-control {
	width: 100%;
}

/*
 * 必須の入力欄のうち、未入力のものだけ背景を薄い赤で塗る（移行元と同じ
 * rgb(255,191,191)）。値が入ると印のクラス `pa-control--empty` が外れ、ブラウザ既定の
 * 白へ戻る。印を付け外しするのはフォームの画面側の処理
 * （assets/js/pa-forms.js の setupRequiredEmptyPaint()）である（Issue #1768）.
 *
 * ここで初期の色を塗ることはしない。最初のピンクも JavaScript の最初の 1 回が付ける。
 * 移行元も塗り分けを JavaScript で行っているため（legacy/www.p-a.jp/public/js/checkreq.js）、
 * JavaScript が動かない環境では移行元も塗らない。その挙動へ揃える.
 *
 * 塗るのは表組みの系統だけである。移行元でこの色を持つのは `common.css` の `.reqFalse` を
 * 読むページ（お問い合わせ・法人・来店予約・ご紹介と EQ 診断の基本項目）だけで、
 * 資料請求と OTOCON には無い（ユーザー裁定 2026-08-08）。色だけで必須を示すと
 * 色を見分けにくい利用者に伝わらないため、「必須」の文字は消さない.
 *
 * 婚活 EQ 診断（`eq`）はここから外し、下の専用の規則で生年の選択欄だけを塗る（Bug #10009・下の注釈）。
 * 資料請求の広告フォーム 3 本（`request_ad`・`request_as`・`request_online`）も外す（Bug #10014・下の注釈）。
 * 外す指定は `:not(:where(…))` にして、選び方の強さを `(0,4,1)` のまま保つ。強さを上げると、この規則を後ろで
 * 上書きしている広告フォームの白の規則などに勝ってしまうため.
 */
.pa-form--table:not(:where([data-pa-form="eq"], [data-pa-form="request_ad"], [data-pa-form="request_as"], [data-pa-form="request_online"])) input.pa-control[required].pa-control--empty,
.pa-form--table:not(:where([data-pa-form="eq"], [data-pa-form="request_ad"], [data-pa-form="request_as"], [data-pa-form="request_online"])) select.pa-control[required].pa-control--empty,
.pa-form--table:not(:where([data-pa-form="eq"], [data-pa-form="request_ad"], [data-pa-form="request_as"], [data-pa-form="request_online"])) textarea.pa-control[required].pa-control--empty,
.pa-form--mixed:not(:where([data-pa-form="eq"], [data-pa-form="request_ad"], [data-pa-form="request_as"], [data-pa-form="request_online"])) input.pa-control[required].pa-control--empty,
.pa-form--mixed:not(:where([data-pa-form="eq"], [data-pa-form="request_ad"], [data-pa-form="request_as"], [data-pa-form="request_online"])) select.pa-control[required].pa-control--empty,
.pa-form--mixed:not(:where([data-pa-form="eq"], [data-pa-form="request_ad"], [data-pa-form="request_as"], [data-pa-form="request_online"])) textarea.pa-control[required].pa-control--empty {
	background-color: rgb(255, 191, 191);
}

/*
 * 資料請求の広告フォーム `request_ad`・`request_as`・`request_online`（Task #8666）は、未入力の必須欄を塗らない。移行元の
 * `form/view/request_ad.php`・`request_as.php` と携帯版は、欄に `class="req"` を持たず、`checkreq.js` が塗り分けない
 * （2026-09-28 の読みの実測で、全部の欄の地が白 rgb(255, 255, 255)）.
 *
 * 🚨 **パソコン幅では白で上書きしない**（Bug #10014）。以前は全幅で土台の薄い赤を `background-color: #ffffff` で上書きしていた。
 * ブラウザは、作者が背景を指定した入力欄で既定の見た目をやめ、既定の `2px inset` の枠線（上と左が濃い立体の線）を描く。
 * 移行元のパソコン版は既定の細い線で描かれる（2026-10-10 の実測・`pa-verify-assets/A/10014-枠線-1010/`）。そこで土台の規則から
 * 3 本を外し（上の規則）、パソコン幅では背景を指定しない.
 *
 * 携帯幅だけは白の指定を残す。移行元の携帯版は、欄が立体の線で描かれる（同じ実測で 3 本とも。移行元の携帯版は、何も指定しない
 * 入力欄まで立体になる作りだった）。dev は背景を指定すると同じ立体の線になるので、今の見た目を保つ.
 */
@media (max-width: 749px) {
	.pa-form[data-pa-form="request_ad"] input.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_ad"] select.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_ad"] textarea.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_online"] input.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_as"] input.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_online"] select.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_as"] select.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_online"] textarea.pa-control[required].pa-control--empty,
	.pa-form[data-pa-form="request_as"] textarea.pa-control[required].pa-control--empty {
		background-color: #ffffff;
	}
}

/*
 * 婚活 EQ 診断（`eq`）は、未入力の必須欄のうち生年の選択欄（`birth-year`）だけを塗る（Bug #9447・ユーザー決定 D753・
 * 事業部の NG `on5m6nvo2slt7h0akklg`）。移行元の `form/view/eq.php` と `sp_eq.php` で `class="req"` を持つのは、生年の部品
 * （`year_select.php`・`sp_year_select.php`）の選択欄だけで、`checkreq.js` はほかの欄を塗らない。2026-10-05 の実測
 * （`pa-verify-assets/A/9397-W101の古いNG-1005/`）でも、移行元で塗られていたのは生年の選択欄だけだった.
 * `eq` を土台に組む LP（`eq_lp` ほか）は、移行元の `eq_lp.php`・`_sp_eq_lp.php` が必須の欄すべてに `req` を持つので、この規則を当てない.
 *
 * 🚨 **ほかの欄を白で上書きしない**（Bug #10009・事業部の指摘 NEW-20261009-04）。以前は土台の薄い赤を
 * `background-color: #ffffff` で上書きしていた。ブラウザは、作者が背景を指定した入力欄で既定の見た目をやめ、
 * 既定の `2px inset` の枠線（上と左が濃い立体の線）をそのまま描く。移行元の `eq.php` は入力欄に枠線も背景も
 * 指定せず、既定の細い線で描かれる。そこで土台の規則から `eq` を外し、ここでは生年の選択欄だけを塗る.
 */
.pa-form[data-pa-form="eq"] select.pa-control[required].pa-control--empty[name="birth-year"] {
	background-color: rgb(255, 191, 191);
}

/*
 * 広告フォームの欄の書体（Task #8666）。移行元は `/spiral/request/css/style.css` の 22 行（携帯版は
 * `/sp/spiral/request/css/style.css` の同じ行）で、一行入力欄・選択欄・複数行入力欄に游ゴシックを当てる。
 * 選択欄と携帯幅の一行入力欄の高さは、この書体の行の高さで決まる（パソコン幅の選択欄 26.38・携帯幅の一行入力欄 48）.
 */
.pa-form[data-pa-form="request_ad"] input.pa-control,
.pa-form[data-pa-form="request_ad"] select.pa-control,
.pa-form[data-pa-form="request_ad"] textarea.pa-control,
.pa-form[data-pa-form="request_online"] input.pa-control,
.pa-form[data-pa-form="request_as"] input.pa-control,
.pa-form[data-pa-form="request_online"] select.pa-control,
.pa-form[data-pa-form="request_as"] select.pa-control,
.pa-form[data-pa-form="request_online"] textarea.pa-control,
.pa-form[data-pa-form="request_as"] textarea.pa-control {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*
 * 広告フォームの送信の押しボタン（Task #8666）。移行元は茶色の絵（パソコン版 `/spiral/images/btn_check_off.png`・
 * 250 × 60、携帯版 `/sp/spiral/images/btn_check.png`・339 × 100）で、白の明朝体の「入力内容を送信」と、右端の「>」を持つ。
 * パソコン版の「>」だけ、下に短い線がある。字は絵にせず、地の色と字で出す（全体原則: 絵の中の文言は背景＋テキスト）.
 *
 * 値は絵の画素を数えた（Pillow）。パソコン版は字 7 字が x 50〜192・y 21〜38、「>」が x 224〜233・y 21〜38（線の太さ約 1.5px）、
 * 下の線が x 219〜236・y 48。携帯版は絵の 0.5573 倍で出るので、「>」は幅 11.1・高さ 16.7・右から 13.9・上から 19.5 になる.
 * 「>」と下の線は `currentColor` で描くので、指を乗せたときの反転（上の `@media (hover: hover)`）でも茶色に変わる.
 */
.pa-form[data-pa-form="request_ad"] .pa-form-submit button,
.pa-form[data-pa-form="request_online"] .pa-form-submit button,
.pa-form[data-pa-form="request_as"] .pa-form-submit button {
	position: relative;
	padding: 0 8px 0 0;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 0.3px;
	line-height: 1;
}

.pa-form[data-pa-form="request_ad"] .pa-form-submit button::after,
.pa-form[data-pa-form="request_online"] .pa-form-submit button::after,
.pa-form[data-pa-form="request_as"] .pa-form-submit button::after {
	content: "";
	position: absolute;
	top: 21px;
	right: 16px;
	width: 10px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpolyline points='0.8,0.6 9,9 0.8,17.4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpolyline points='0.8,0.6 9,9 0.8,17.4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.pa-form[data-pa-form="request_ad"] .pa-form-submit button::before,
.pa-form[data-pa-form="request_online"] .pa-form-submit button::before,
.pa-form[data-pa-form="request_as"] .pa-form-submit button::before {
	content: "";
	position: absolute;
	top: 48px;
	right: 14px;
	width: 18px;
	height: 1px;
	background-color: currentColor;
}

/*
 * 広告用の婚活 EQ 診断フォーム（`eq_ad`）の、設問のあとの締めの 1 文と 1 列の個人情報（Bug #8551）。
 *
 * 移行元の `form/view/eq_ad.php` の 721〜723 行は、設問のあとに赤い字の「お疲れ様でした。
 * 診断は以上です。」を真ん中に置き（行内の `text-align: center; margin: 0 0 1em`・
 * `style2019.css` の `strong.red { color: #cb1d11; font-weight: bold }`）、灰色の地の 1 行
 * （`.form-p { background: #eee; padding: 0.5em; margin-bottom: 1em; font-weight: bold }`）から
 * 資料請求と同じ 1 列の個人情報を聞き始める。どちらの段落も `style2019.css` の
 * `p { font-size: 18px; line-height: 1.8 }` を受ける.
 *
 * 1 列の包み（`.pa-eq-ad-personal`）は `pa-form--dl` を持つので、資料請求の定義リストの
 * 規則がそのまま当たる。**ただし外の器は婚活 EQ 診断の `.pa-form--mixed` のままなので、
 * 表組み向けの規則も当たる。**欄の固定幅（`.pa-form--mixed .pa-control.pa-control--180` などの
 * class 3 つ）・選択欄の内余白・複数行入力欄の幅と高さ・未入力の桃色の地（class 4 つ＋要素 1 つ）
 * である。資料請求の欄の見た目（`.pa-form.pa-form--dl .pa-control` ほか）は、外の器が
 * `pa-form--dl` を持つ前提の選び方なので当たらない。そこで `data-pa-form` を前置した
 * 選び方で、資料請求と同じ値を当て直す.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-finish {
	margin: 0 0 1em;
	font-size: 18px;
	line-height: 1.8;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-finish strong {
	color: #cb1d11;
	font-weight: bold;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal__lead {
	margin: 0 0 1em;
	padding: 0.5em;
	background: #eeeeee;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal .pa-control {
	display: block;
	width: 100%;
	padding: 0.75em 0.5em;
	border: 1px solid #dddddd;
	border-radius: 0.4em;
	background-color: transparent;
	cursor: pointer;
}

/*
 * 焦点が当たった欄の金色の枠線も当て直す。上の規則（class 4 つ分）が資料請求の
 * `.pa-form--dl .pa-control:focus`（class 3 つ分）より強く、当て直さないと枠線が #ddd のまま変わらない
 * （セルフレビューの指摘）.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal .pa-control:focus {
	border: 1px solid var(--theme-color);
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal textarea.pa-control {
	min-height: 0;
	height: 8em;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal .pa-control[required].pa-control--empty {
	background-color: transparent;
}

/*
 * 移行元の `eq_ad` だけが読む `style2019.css` の 2 つの指定を写す（1 段目の下見・2026-09-27 01:36 の実測）.
 *
 * - `body { line-height: 1 }` … 項目名と性別の押しボタンの行送りが 16px になる（資料請求は `normal`）。
 *   写さないと、項目名の下が 4px、性別の押しボタンが 8px ずつ高くなった
 * - `p { font-size: 18px }` … 「表示」ボタンを包む `p.acc-wrap` が 18px になり、ボタンの字・内余白・角丸と、
 *   包みの上の外余白（2.25em）と間隔（0.5em）がそれに比例する。写さないと、ボタンが 1440 で 20px 狭く 5px 低く、
 *   包みの上端が 4.5px 高くなった
 *
 * 生年月日の 3 つの選択欄は、移行元では横並びの囲み（`.date-select { display: flex }`）の中で、それぞれ
 * `.select-wrap { margin-bottom: 1.5em }` を持つ。横並びの囲みの中の外余白は外へ抜けないので、行の中に
 * 24px の空きが残る（ほかの行では最後の欄の外余白が次の行の外余白と重なって消える）。dev はこの空きを
 * 持たず、行が 20px 低かった。資料請求の同じ行はまだ測っていない.
 *
 * 選択欄は、未選択のあいだも文字色で出す。移行元の `eq_ad.php` はページの中の `<style>` で
 * `.form-row select { color: var(--text-color) !important }` と書き、資料請求の未選択の色（純黒・Bug #9398）を打ち消している.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal {
	line-height: 1;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal .pa-form-accordion {
	font-size: 18px;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal .pa-cell:has(.pa-cell-field-select + .pa-cell-field-select) {
	padding-bottom: 1.5em;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-personal select.pa-control:has(option[value=""]:checked) {
	color: var(--text-color);
}

/*
 * 広告用の婚活 EQ 診断フォーム 2 本（`eq_ad`・`eq_as`）の赤い枠（Task #8556・Bug #8551 の 2 段目）。
 *
 * 移行元は、設問・個人情報・押しボタンを持つ `<form>` を `section.eq-check` で囲む
 * （`style2019.css` の `.eq-check { width: 740px; margin: 85px auto; border: 2px solid #cb1d11 }`・
 * 携帯版の `style2019_sp.css` は `width: 92%; margin: 45px auto`）。どちらも `* { box-sizing: border-box }`
 * なので、線は幅の内側に入る。枠の中身は `.input-form { width: 80%; margin: auto }`（携帯版は 92%）の幅で、
 * 設問の塊（`#qListTable`）も PC では同じ 80% の幅に収まる。携帯版の設問は枠の中身いっぱいに広がる
 * （2026-09-27 02:00 の直す前の調査の実測: 1440 は枠 740・中身 588.8、375 は枠 345・設問 341・中身 313.72）.
 *
 * 携帯幅の 92% は画面の幅に対する値である。dev の本文は左右に 16px の内余白を持つので、`92vw` にして
 * 内余白の外まで広げ、真ん中に置く.
 */
.pa-form .pa-eq-check {
	box-sizing: border-box;
	width: 740px;
	max-width: 100%;
	margin: 85px auto;
	border: 2px solid #cb1d11;
}

.pa-form .pa-eq-check > * {
	box-sizing: border-box;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 749px) {

	.pa-form .pa-eq-check {
		width: 92vw;
		max-width: none;
		margin: 45px calc((100% - 92vw) / 2);
	}

	.pa-form .pa-eq-check > * {
		width: 92%;
	}

	.pa-form .pa-eq-check > .pa-question {
		width: 100%;
	}
}

/*
 * 広告用の婚活 EQ 診断フォーム `eq_as` の個人情報の表（Bug #8559 の 1 段目・CSS で写せる分）。
 *
 * 移行元の `form/view/eq_as.php` は、個人情報を `div.input-form > table.basic02` で組み、
 * `style2019.css`（携帯版は `style2019_sp.css`）の `.basic02 th, .basic02 td { display: block }` で
 * 題の下に欄を積む 1 列にしている。`tr` と `tbody` は表のままなので、表は中身の幅まで縮み
 * （1440 で 556.17）、器（`.input-form`）の左端に寄る。ここでも `th` と `td` だけを塊にして同じ縮み方にし、
 * 左端を器の左端（枠の中身の 10%、携帯は 4%）へ置く.
 *
 * 値は 2026-09-27 03:06 の直す前の測定（`pa-verify-assets/A/8559-下調べ-0927/直す前/`）で読んだ移行元の値である.
 *
 * - 題: 16px・太字・行の高さ 16px（移行元は `body { line-height: 1 }`）・`#101010`・上の内余白 1em
 * - 中身: 内余白 `0.5em 0 1.5em`・字の色 `#5b5b5b`
 * - 欄: 枠 `1px solid #bdbdbd`・地 `#f2f2f2`・角丸 5px。PC は字をブラウザ既定の 13.3333px に置き、内余白 1em。
 *   幅は移行元が `size` 属性（無ければ 20 字分）で決めた値を、測った幅のまま書く
 * - 欄どうしの間: 移行元は markup の空白 1 つ（4.56px）と、区切りの字（「-」「＠」）と題の字（「姓」「セイ」「月」）で空く
 *
 * 🚨 **地の色の規則は要素名を持たせない**（class と属性だけで `(0,4,0)`）。未入力の必須欄の桃色
 * （`.pa-form--mixed input.pa-control[required].pa-control--empty`・`(0,4,1)`）を上書きしないためである。
 * 移行元の未入力の地（`.reqFalse { background: #ffbfbf }`）と同じ色が、この桃色で出る.
 *
 * 性別の押しボタン・必須の「※」の印・表の前の案内と「※は必須項目です」・アンケートの題と問いの字は
 * markup が要るので、この段では扱わない（`pa-verify-assets/A/8559-下調べ-0927/` の見積もり）.
 */
/*
 * PC の表の幅は、移行元が中身の幅まで縮んだ値（556.17px）をそのまま置く。移行元の赤い枠は PC で
 * 740px の固定なので、この値は画面の幅で変わらない。dev の表は中身（折り返すタイルの並びなど）の
 * 最大幅が器を超えるため、縮ませると器いっぱい（588.8px）になり、タイルの 32% が移行元より広くなる
 * （2026-09-27 03:21 の下見 2 回目）。携帯は移行元も器いっぱい（92%）なので、下の節で `auto` に戻す.
 */
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table {
	width: 556.17px;
	max-width: 80%;
	margin: 0 auto 0 10%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table th,
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table td {
	display: block;
	width: auto;
	border: 0;
	background: none;
	text-align: left;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table th {
	padding: 1em 0 0;
	color: #101010;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: 16px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table td {
	padding: 0.5em 0 1.5em;
	color: #5b5b5b;
	font-size: 16px;
	line-height: 16px;
}

/* 欄の並び: 字の塊どうしの間を、移行元の空白 1 つ（4.56px）にする. */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell,
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-field,
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-parts,
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-parts-unit {
	gap: 0;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-field + .pa-cell-field {
	margin-left: 4.56px;
}

/* 「姓」「名」は移行元が `姓&nbsp;&nbsp;` と書くので空白 3 つ分、「セイ」「メイ」は空白 1 つ分あける. */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-sub-label {
	min-width: 0;
	margin-right: 4.56px;
	font-size: 16px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-sub-label[for="pa-field-sei"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-sub-label[for="pa-field-mei"] {
	margin-right: 13.68px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-parts-sep {
	width: auto;
	margin: 0 4.56px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-unit {
	margin-left: 4.56px;
}

/* 移行元の e-mail の行に、半角の案内は無い. */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-note--sp {
	display: none;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control {
	box-sizing: border-box;
	max-width: none;
	padding: 1em;
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	background-color: #f2f2f2;
	color: #5b5b5b;
	font-size: 13.3333px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="sei"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="mei"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="sei-kana"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="mei-kana"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="address01"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="email1"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="email2"] {
	width: 173.66px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="address02"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="address03"] {
	width: 313.66px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="zipcode1"] {
	width: 54.66px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="zipcode2"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="phone1"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="phone2"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="phone3"] {
	width: 61.66px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="pref"] {
	width: 142.66px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="birth-month"],
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="birth-day"] {
	width: 63.66px;
}

/*
 * 生年（Bug #8586 で戻した欄）: 移行元の `year_select.php` の選択欄は幅の指定を持たず、いちばん長い選択肢
 * （「2005/平成17」など）の字の幅で決まる。2026-09-27 20:29 の下見で測った移行元の幅（PC 123.66・携帯 109.8）にする.
 * 土台の婚活 EQ 診断の `.pa-control--128`（128px）を受けたままだと、月と日が右へずれる.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="birth-year"] {
	width: 123.66px;
}

/*
 * アンケートの選択肢を、移行元と同じ 1 行 3 個のタイルにする（`ul.enq_ul-1 > li > label.reason`）。
 * 移行元はラジオを隠し（`.basic02 td input[type=radio] { display: none }`）、`label` を押す形である.
 * PC は幅 32%・右の外余白 1%、携帯は幅 30%・右の外余白 3%（行の最後は 0）。下の外余白はどちらも 1%.
 *
 * 移行元は `li` を `float: left` で並べ、携帯版は jQuery の `matchHeight()`（`sp_eq_as.php` の 918 行）で
 * 1 行のタイルの高さをそろえる（2 行に折れる「電車(駅)広告」と同じ行の「新聞」も 66px になる）。
 * ここでは折り返す flex で並べ、行の高さを伸ばしてそろえる。幅と外余白の % は flex の器の幅に対して
 * 解かれるので、移行元の `ul` に対する値と同じになる（2026-09-27 03:16 の下見で float のままでは高さと並びがずれた）.
 */
/*
 * アンケートの問い: 移行元は `<p class="enq_p-1"><b>…</b></p>` で、`style2019.css` の
 * `p { font-size: 18px; line-height: 1.8 }` を受ける（Task #8590）.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-intro {
	margin: 0;
	border: 0;
	color: #5b5b5b;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
}

/* タイルの % を中身（`td`）の幅で解くため、タイルを持つ欄の塊を行いっぱいにする. */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-field:has(.pa-radio-wrap--grid) {
	flex: 0 0 100%;
	width: 100%;
}

/* 共通の `.pa-form--mixed .pa-radio-wrap--grid { gap: 0.5em 1em }` は flex にも効くので 0 に戻す. */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio-wrap--grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin: 1em 0 0;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio-wrap--grid .pa-radio {
	display: block;
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 32%;
	margin: 0 1% 1% 0;
	padding: 1em 0;
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	background: linear-gradient(to bottom, #ececec 0%, #cac9c9 100%);
	color: #101010;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
	cursor: pointer;
}

/*
 * 🚨 ラジオは `display: none` にしない（Greptile の指摘・PR #8591）。移行元は隠しているが、隠すと Tab で移れず、
 * 読み上げにも選んだ状態が伝わらない。1px の透明な形でタイルの中に残す。入力はタイルの字の流れの外に置くので、
 * タイルの大きさと字の位置は隠していたときと変わらない.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio-wrap--grid .pa-radio input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

/*
 * キーボードで移ったときだけ、押しボタン（アンケートのタイルと性別の押しボタン）の外側に輪郭を出す（Greptile の指摘・
 * PR #8591 / #8592）。指やマウスで押したときは出ない（`:focus-visible`）。移行元は焦点の枠を持たないが、キーボードだけで
 * 操作する利用者が今どこに居るのか分からなくなるのを避ける（設問の `.pa-question__choices` と同じ考え方）.
 * 色は `#333333`。選んだタイルの地も `#333333` なので、内側ではなく外側（2px）に出して白地の上で見せる.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio:has(input[type="radio"]:focus-visible) {
	outline: 2px solid #333333;
	outline-offset: 2px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio-wrap--grid .pa-radio:has(input:checked) {
	background: #333333;
	color: #ffffff;
}

@media (max-width: 749px) {

	.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table {
		width: auto;
		max-width: 92%;
		margin-left: 4%;
	}

	/*
	 * 携帯幅の表の組みの共通の規則（`.pa-form-table tr` の下の線 1px）を外す（Bug #8559）。移行元の
	 * `table.basic02` は行の間に線を持たない。th と td の線は上で 0 にしてあるが、tr の線が残っていて、
	 * 行の境目ごとに 1px ずつ下へずれていた（375 の実測で 12 行目が 11px 下）。パソコン幅の表は tr に線を持たない.
	 */
	.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table tr {
		border-bottom: 0;
	}

	/*
	 * 携帯版は字 14px・内余白 0.4em・幅は中身の 35% まで（都道府県と建物名は 65%）.
	 *
	 * 🚨 **幅の % は移行元の中身（`td`）の幅で解く。**共通の携帯幅の規則は欄の塊
	 * （`.pa-cell-field`）を `flex-basis: 100%` で 1 行ずつに折るので、そのままだと「姓」と「名」が
	 * 2 行に分かれる（2026-09-27 03:16 の下見）。折らないよう `auto` に戻すと、欄の塊は中身の幅まで
	 * 縮み、`width: 35%` が縮んだ塊に対して解かれてしまう。そこで、移行元の中身の幅
	 * （赤い枠 `92vw` から線 2px × 2 を引いた幅の 92%。幅 375 で 313.72）から値を出す.
	 */
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control {
		padding: 0.4em;
		font-size: 14px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-field {
		flex-basis: auto;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-parts {
		flex-wrap: nowrap;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="sei"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="mei"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="sei-kana"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="mei-kana"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="address01"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="address02"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="email1"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="email2"] {
		width: calc((92vw - 4px) * 0.92 * 0.35);
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="address03"] {
		width: calc((92vw - 4px) * 0.92 * 0.65);
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="zipcode1"] {
		width: 40.19px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="zipcode2"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="phone1"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="phone2"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="phone3"] {
		width: 47.19px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="pref"] {
		width: 131.19px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="birth-month"],
	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="birth-day"] {
		width: 49.19px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-control[name="birth-year"] {
		width: 109.8px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio-wrap--grid .pa-radio {
		width: 30%;
		margin-right: 3%;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio-wrap--grid .pa-radio:last-child {
		margin-right: 0;
	}
}

/*
 * `eq_as` の表の前の 2 行と、必須の印・性別の押しボタン（Bug #8559 の 2 段目）。
 *
 * 表の前の 2 行は `PA_Forms_Embed::render_legacy_basic_lead()` が出す。移行元は
 * `p.form-p`（地 `#eee`・内余白 0.5em・下の外余白 1em・太字）と、`p > strong.red`（`#cb1d11`・太字）で、
 * どちらも `style2019.css` の `p { font-size: 18px; line-height: 1.8 }` を受ける.
 *
 * 必須の印は題の後ろの `strong.pa-mark`（移行元の `strong.red`）.
 *
 * 性別は、移行元がラジオを隠して `label.gender1` / `label.gender2` を押しボタンにしている
 * （`.basic02 td label.gender1 { display: inline-block; margin-top: 0.5em; border: 1px solid #bdbdbd;
 * background: #f2f2f2; border-radius: 5px; padding: 1em 3em }`、携帯版は `padding: 0.5em 1em`、
 * 選ぶと `#c5a674`）。押しボタンは `p`（18px・行の高さ 1.8・内余白 `0.2em 0.5em 0.5em 0.5em`）の中にあり、
 * 未選択のあいだは `checkreq2.js` がその `p` に `.reqFalse`（地 `#ffbfbf`）を付ける.
 *
 * 🚨 **ラジオは `display: none` にしない。**移行元は隠しているが、隠すとキーボードで選べず、
 * 必須の入力チェックの吹き出しもブラウザが出せない（「focusable でない」として送信だけが止まる）。
 * 見えない形（1px・透明）で残し、押しボタンの `label` を押しても選べるようにする.
 */
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-legacy-basic-lead,
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-legacy-basic-required {
	color: #101010;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	text-align: left;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-legacy-basic-lead {
	margin-top: 0;
	margin-bottom: 1em;
	padding: 0.5em;
	background: #eeeeee;
	font-weight: bold;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-legacy-basic-required {
	margin-top: 0;
	margin-bottom: 0;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-legacy-basic-required strong,
.pa-form[data-pa-form="eq_as"] .pa-form-table th .pa-mark {
	color: #cb1d11;
	font-weight: bold;
}

/*
 * お名前の 2 行だけ、「※」の前に空白 1 つ分をあける（Bug #8559）。移行元の `form/view/eq_as.php` の 694・702 行
 * （携帯版は `sp_eq_as.php` の 674・682 行）は、`お名前 <span class="fs14">(漢字)</span>` の後で改行してから
 * `<strong class="red">※</strong>` を書くので、題と「※」の間に空白が 1 つ入る。ほかの行は `性別<strong …>` と
 * 続けて書くので空白が無い。実測で、この 2 行の「※」が移行元より 4.56px 左にあった（375・1440 とも）.
 * 4.56px は、この表のほかの「空白 1 つ分」（`.pa-sub-label` の右の余白など）と同じ値である.
 * 行は、姓とセイの欄を持つかで名指しする.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table tr:has(#pa-field-sei, #pa-field-sei-kana) th .pa-mark {
	margin-left: 4.56px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-field-radio:has(input[name="gender"]) {
	display: inline-block;
	padding: 0.2em 0.5em 0.5em;
	font-size: 18px;
	line-height: 1.8;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-cell-field-radio:has(input[name="gender"]):not(:has(input[name="gender"]:checked)) {
	background-color: #ffbfbf;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio:has(input[name="gender"]) {
	display: inline-block;
	position: relative;
	margin: 0.5em 0 0;
	padding: 1em 3em;
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	background: #f2f2f2;
	color: #5b5b5b;
	cursor: pointer;
}

/* 移行元の 2 つの押しボタンの間は、markup の空白 1 つ（18px で 5.14px）. */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio:has(input[name="gender"]) + .pa-radio {
	margin-left: 5.14px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio:has(input[name="gender"]:checked) {
	background: #c5a674;
}

.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio input[name="gender"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

@media (max-width: 749px) {

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-radio:has(input[name="gender"]) {
		padding: 0.5em 1em;
	}
}

/*
 * 狭い画面だけで折り返す改行（`PA_Forms_Embed::sp_lines_html()`・Task #8590）。
 * 広い画面では隠して 1 行につなぐ.
 */
.pa-form .pa-br-sp {
	display: none;
}

@media (max-width: 749px) {

	.pa-form .pa-br-sp {
		display: inline;
	}
}

/*
 * 携帯幅だけ字を替える行の題（`PA_Forms_Embed::row_heading_html()` の `row_label_sp`・Bug #9678）。
 * 広い画面ではパソコン版の字、狭い画面（749px 以下）では携帯版の字を出す.
 */
.pa-form .pa-row-label__sp {
	display: none;
}

@media (max-width: 749px) {

	.pa-form .pa-row-label__pc {
		display: none;
	}

	.pa-form .pa-row-label__sp {
		display: inline;
	}
}

/*
 * アンケートの行の題: 移行元は `<th><p><strong class="red">…</strong></p></th>` で、
 * `p { font-size: 18px; line-height: 1.8 }` と `strong.red { color: #cb1d11; font-weight: bold }` を受ける（Task #8590）.
 * `strong` は行の中の要素のまま置く。行の高さ 32.4px の字が行の箱を決めるので、`th` の高さは移行元と同じになる
 * （2026-09-27 19:4x の下見で、`display: block` では `th` は合うが `strong` の箱の幅と高さが移行元と違った）.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table th .pa-row-label--alert {
	display: inline;
	color: #cb1d11;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
}

/*
 * 郵便番号の案内: 移行元は欄の後ろに空白 1 つを置いて字を続ける（`zipcode2` の後ろの「 住所が自動入力されます。」）。
 * PC は `td` の字（16px・行の高さ 16px・`#5b5b5b`）のまま、携帯は `<span style="font-size:11px;">` で包む（Task #8590）.
 * 共通の `.pa-form .pa-note`（段を替える `flex-basis: 100%`・0.85em・`#555`）を戻す.
 * 🚨 狭い画面だけの注記（`.pa-note--sp`・メールの行）は隠したままにするので、`:not()` で外す.
 */
.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-note:not(.pa-note--sp) {
	display: inline;
	position: relative;
	top: -1.76px;
	flex-basis: auto;
	margin: 0 0 0 4.56px;
	color: #5b5b5b;
	font-size: 16px;
	line-height: 16px;
}

/*
 * PC の `top: -1.76px`: 移行元は欄と字を基線でそろえ、dev の `.pa-cell` は flex の真ん中でそろえる。
 * 2026-09-27 19:4x の下見で、行の中の上端が移行元 20.07・dev 21.83 だった差を戻す.
 * 携帯は `<span style="font-size:11px;">` が `body { line-height: 1 }` を受けて行の高さ 11px になる。
 * 真ん中でそろえると移行元の上端（16.83）と ±1 に入るので、ずらさない.
 */
@media (max-width: 749px) {

	.pa-form[data-pa-form="eq_as"] .pa-form-table .pa-note:not(.pa-note--sp) {
		top: 0;
		font-size: 11px;
		line-height: 11px;
	}
}

.pa-form .pa-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-right: 1.2em;
}

.pa-form .pa-required {
	color: #c0392b;
	font-size: 0.85em;
	font-weight: normal;
}

.pa-form .pa-note {
	display: block;
	flex-basis: 100%;
	margin-top: 0.3em;
	font-size: 0.85em;
	color: #555;
}

/*
 * 入力欄の上に出す質問文（`cell_intro`）。婚活 EQ 診断つき資料請求（Bug #1985）と
 * 資料請求（Bug #2622）のアンケートが持つ。値は移行元の `.enq_p-1`
 * （`page_inquiry.css`）から写した.
 *
 * 🚨 **下の内余白は持たない（Bug #5967）。**かつて `padding-bottom: 8px` を置いて
 * いたが、**移行元の内余白は 0 である**（実測 2026-09-12 09:27・幅 1280・移行元
 * `.enq_p-1` の高さ 25px = 行 24 ＋ 下線 1・内余白は上下とも 0px）。8px を置くと
 * 下線が字から離れ、その下の中身も 8px 下がる（dev は 33px だった）。行の高さ・
 * 外余白 15px・下線 1px は移行元と一致していたので、**差はこの 1 つだけ**だった.
 */
.pa-form .pa-cell-intro {
	width: 100%;
	margin: 0 0 15px;
	border-bottom: 1px solid #ccc;

	/* 🚨 **行の高さをここで決める（Bug #5960）。**テーマの土台は素の `p` へ
	   `line-height: var(--pa-line-height-text)` を当てており、変数の既定は 1.8 で
	   ある（`main.css` 471 行・692 行）。本文の器（`.entry-content` /
	   `.page-content__body`）だけがこの変数を 1.5 へ落とす（同 36116〜36121 行）。

	   **資料請求のページはその器を持たない。**`page-templates/form-frame.php` は
	   `shiryo` 以外の 6 種にだけ `page-content__body` を付ける作りで（同ファイル
	   34〜45 行・Bug #1983）、資料請求だけ 1.8 が残って 16 × 1.8 = 28.8px になって
	   いた。移行元は 24px である（実測 2026-09-12・幅 1280 と 375 の両方）。

	   フォームの器に置いた `line-height: normal`（`.pa-form--dl`）はこの段落に
	   効かない。要素そのものを指す `p` の規則が継承より強いためである。

	   値に `normal` を使わないのは、書体で px が変わるためである。dev 側の
	   `normal` が何 px になるかは測っていない。**移行元の実測値 24px と同じに
	   なる 1.5** を書く（16px × 1.5 = 24px）。婚活 EQ 診断はいまも器のおかげで
	   24px なので、この行で値は変わらない. */
	line-height: 1.5;
}

/*
 * 🚨 **資料請求は下線を持たない（Bug #2622）。**上の下線と内余白は婚活 EQ 診断の
 * 移行元（`page_inquiry.css` の `.enq_p-1`）から写した値である。**資料請求の移行元は
 * 素の `<p class="">` で、下線も内余白も持たない**（写し
 * `legacy/www.p-a.jp/public/form/view/request.php`）。
 *
 * 🚨 **下の外余白は 15px から 4px へ落とす。囲みの行間と足し算になるためである。**
 * `.pa-form--dl .pa-cell` は `row-gap: 0.75em`（版面 16px なので **12px**）を持ち、
 * 質問文は `width: 100%` で 1 行を占めるので、**ラジオとのあいだは「外余白 ＋ 行間」**
 * になる。素の 15px のままだと 15 ＋ 12 = **27px** で、移行元の 16px より 11px 広い。
 * **4 ＋ 12 = 16** でそろえる（Greptile の指摘・2026-09-12）。
 *
 * 移行元の実測（2026-09-12 01:27・押しボタンを押してから採った）は
 * **質問文とラジオの間が 16px** である。
 *
 * 🚨 **行間を変えたら、この 4px も一緒に見直すこと。**下の検査が両方の値を読んで
 * 足し算を見張る.
 *
 * 🚨 **当たり先はフォームの種類で絞る。**`[data-pa-form]` は器
 * （`.pa-form`）が持つ（`class-pa-forms-embed.php` の `render_form()`）。ここを
 * 素の `.pa-cell-intro` へ広げると、**婚活 EQ 診断の下線まで消える**. */
.pa-form[data-pa-form="shiryo"] .pa-cell-intro {
	margin-bottom: 4px;

	/* 素の規則が 8px を落とした（Bug #5967）ので、この行はいま同じ値の重ね書きで
	   ある。素の値が動いたときに資料請求だけは 0 を保つ歯止めとして残す. */
	padding-bottom: 0;
	border-bottom: 0;
}

.pa-form .pa-form-notice {
	padding: 0.8em 1em;
	border: 1px solid #c0392b;
	background: #fdecea;
	color: #c0392b;
}

/* --------------------------------------------------------------------------
 * 送信ボタン
 *
 * 移行元は画像のボタン（btn_check_off.gif・250x60px）を .btn_area で中央へ
 * 置いていた。文字のボタンのまま残し、目立ち方だけを移行元へ寄せる（承認済み）.
 * -------------------------------------------------------------------------- */

.pa-form .pa-form-submit {
	margin-top: 35px;
	margin-bottom: 35px;
	text-align: center;
}

/* --------------------------------------------------------------------------
 * 同意欄と送信ボタンの帯（移行元の `.agree_box`。Issue #1771）
 *
 * 寸法・色は移行元の `page_inquiry.css` の 284-310 行から写した実測値である。
 * 対象は `PA_Forms_Embed::CONSENT_BAND_FORMS` の 5 種で、資料請求と OTOCON 予約は
 * 移行元にこの帯が無いため、同意のチェックボックスは表の下に単独で出る（対象外）.
 * -------------------------------------------------------------------------- */

/*
 * 高さを固定せず下限にするのは、文字がはみ出しても切れないようにするためである。
 * 移行元は `height:60px` の固定だが、移行元の同意欄の文言はどのフォームも
 * 「同意する」の 4 文字で 1 行に収まる。移行先はご紹介プログラムだけ文言が長く
 * （下の `line-height` の説明を参照）、固定にすると帯の外へ文字がはみ出す.
 */
.pa-form .pa-form-consent {
	display: flex;
	width: 396px;
	max-width: 100%;
	min-height: 60px;
	margin: 0 auto 40px;
}

/*
 * 行の高さは移行元の `.agree_box .agree`（`page_inquiry.css:289-298` の
 * `line-height:100%`）と同じにする。移行元の 4 文字では 1 行なので差は出ないが、
 * ご紹介プログラムだけは移行先の文言が長い（「ご本人の同意を得たうえで登録して
 * います」。第三者の個人情報を扱うための文言で、法務部の確認事項 Task #1075 が
 * 保留中のため移行元へ戻していない。`PA_Forms_Definitions::referral_fields()`）。
 * 既定の行の高さのままだと 3 行で 72px となり、帯の 60px に収まらない。移行元と
 * 同じ 100% にすると 48px となり、5 種すべてが移行元と同じ 396 × 60px に収まる.
 */
.pa-form .pa-form-consent__agree {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	margin: 0;
	background-color: #be9f6a;
	color: #000000;
	font-size: 16px;
	line-height: 100%;
}

/*
 * チェックが入っていないあいだの色（移行元の `.agree_box .agree.reqFalse` /
 * `.efo_invalid`）。チェックの付け外しは assets/js/pa-forms.js の
 * setupConsentBandState() が行う.
 */
.pa-form .pa-form-consent--unchecked .pa-form-consent__agree {
	background-color: #ff8686;
}

/*
 * 幅を 252px にするのは、テーマが `box-sizing: border-box` を全体へ効かせている
 * ためである（`themes/pa/assets/css/main.css:351-355`）。移行元の
 * `.agree_box .check`（`page_inquiry.css:307-312`）は既定の `content-box` で
 * 幅 250px + 左の内余白 2px = 外形 252px になる。移行先で 250px と書くと外形が
 * 250px になり、送信ボタンが 248px へ縮んで帯にも 2px のすきまが空く（実測）.
 */
.pa-form .pa-form-consent__submit {
	width: 252px;
	padding-left: 2px;
}

/* 帯の中では、送信ボタンの上下 35px の外余白を消す（帯の高さ 60px を保つ）. */
.pa-form .pa-form-consent .pa-form-submit {
	margin: 0;
}

/*
 * 帯の上下に出す説明文とリンク（Issue #1771）。文字の大きさ・行の高さは移行元の
 * `.form_text02`（`page_inquiry.css` の 385-389 行など）から写した。出すのは
 * `PA_Forms_Embed::CONSENT_NOTICE_FORMS` の対象だけである.
 */
/*
 * 🚨 **下の空きは外余白ではなく内余白の 35px である**（Task #8053）。移行元の
 * `#reservation .form_text02`（`page_inquiry.css`）が `padding: 0 0 35px` を持つ。
 * 2026-09-20 に幅 1440 で実測し、移行元の塊が 84.81（中身 49.81 ＋ 内余白 35）なのに
 * 対し dev が 49.81 であることを確かめた.
 */
.pa-form .pa-consent-intro {
	margin: 0;
	padding: 0 0 35px;
	font-size: 15px;
	line-height: 166%;
}

/*
 * 婚活 EQ 診断の標準版の案内文は、移行元と同じく 3 段落に分けて出す（Bug #8531・
 * `class-pa-forms-embed.php` の `render_consent_intro()`）。移行元のパソコン版は 3 段落を
 * 1 つの器 `#analysis .form_text02`（`css/page_inquiry.css` の 660〜664 行・下の内余白 25px）に
 * 包み、段落の間に空きを持たない。dev は段落ごとに上の 35px を持つので、最後の段落だけに
 * 25px を残す.
 *
 * 携帯幅は下の `@media screen and (max-width: 749px)` の節で、移行元の携帯版の値に
 * 置き換える.
 */
@media screen and (min-width: 750px) {
	.pa-form[data-pa-form="eq"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="eq"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--item {
		padding-bottom: 0;
	}

	.pa-form[data-pa-form="eq"] .pa-consent-intro--last {
		padding-bottom: 25px;
	}

	/*
	 * 資料請求の LP 専用フォーム（Task #8667）の器は `#request .form_text02`
	 * （`css/page_inquiry.css` の 385〜389 行・下の内余白 35px）。最後の段落は `--item` も
	 * 持ち、上の `padding-bottom: 0` が当たるので、35px を戻す。2026-09-28 の下見 3 回目で、
	 * 「同意する」の箱が移行元より 35.16 上にあった.
	 */
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--last {
		padding-bottom: 35px;
	}
}

/*
 * 🚨 **末尾の注記は 13px・行送り normal である**（Task #8053）。移行元は
 * `<p class="mb20">` で、`page_inquiry.css` に字の指定を持たず移行元の既定 13px を
 * 継承する。dev が 15px・166% だったため、「情報セキュリティを見る」のリンクが
 * 2 行にまたがって左端へ落ちていた（移行元は 1 行に収まり右端 x 1003.25・w 142.63）。
 * 2026-09-20 に幅 1440 で実測し、塊の高さが移行元 20.00 に対し dev 49.81 であることを
 * 確かめた.
 *
 * 🚨 **携帯幅の 12px はまだ当てていない**（移行元の `sp/css/style.css` の
 * `.text_area .text_security p { font-size: 12px }`）。携帯幅の字の大きさは
 * 全体差分の段 3 がまとめて持つ.
 */
.pa-form .pa-consent-footer {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: normal;
}

/*
 * 婚活 EQ 診断のパソコン幅で、同意の注記から下のパンくず（またはフッター）までの空き（Bug #9493）。
 *
 * 移行元のパソコン版（`form/view/eq.php`・`eq_lp.php`）は、同意の注記 `p.mb20` の下の外余白 20px と、
 * `css/page_inquiry.css` の `#contents { padding-bottom: 55px }` の 2 つで空きを作る（20＋55）。
 * dev は外枠 `.pa-form-frame__wrapper` の下の内余白 48px だけで、2026-10-13 に幅 1440 で測ると
 * 注記の下端からパンくず（`eq_lp` はフッター）の上端まで 移行元 79px・dev 52px だった（−27）.
 *
 * 🚨 **外枠は触らない。**外枠は pa-forms のフォーム全部が使い、移行元の末尾の要素と下の空きはフォームごとに違う。
 * 当てるのは、移行元で `eq.php` か `eq_lp.php` をパソコン版の入力画面に使う 6 本（`eq` と `eq_lp` 系 5 本。
 * 見出しの規則〔Bug #9051〕と同じ顔ぶれ）だけである。`eq_as`・`eq_ad` は別の画面で、ページの高さの差の向きも違う.
 */
@media (min-width: 750px) {

	.pa-form:is([data-pa-form="eq"], [data-pa-form="eq_lp"], [data-pa-form="eq_lp_as"], [data-pa-form="eq_lp_ju"], [data-pa-form="eq_lp_li"], [data-pa-form="eq_lp_rt"]) .pa-consent-footer {
		margin-bottom: 27px;
	}
}

/*
 * 🚨 **ご紹介プログラムと社員紹介だけ、移行元の値が違う**（Task #8053）。
 * この 2 種は移行元で `page_inquiry.css` を読まず、器も `#contents` ではない
 * （ご紹介プログラムは `#formArea` ＋ `#request`、社員紹介は `#reservation`）。
 * 2026-09-20 13:56 に移行元のパソコン版を幅 1440 で測り、次の 2 点が
 * ほかの 4 種（お問い合わせ・法人からの問い合わせ・ご紹介・会員紹介）と
 * 違うことを確かめた.
 *
 * | | ほかの 4 種 | この 2 種 |
 * |---|---|---|
 * | 入力の行の見出し | 700・19px | **400・15px** |
 * | 末尾の注記の行送り | normal（塊 20.00） | **26px**（塊 52.00・器が 840px で 2 行になる） |
 *
 * 上の既定をそのまま当てると、この 2 種だけ移行元から離れる。ここで戻す.
 */
.pa-form[data-pa-form="shoukai"] .pa-form-table th,
.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th {
	font-weight: normal;
}

.pa-form[data-pa-form="shoukai"] .pa-consent-footer,
.pa-form[data-pa-form="reservation_intro_02"] .pa-consent-footer {
	line-height: 26px;
}

/*
 * 社員紹介の来店予約のパソコン幅の表（Bug #8521）。移行元のパソコン版
 * （`form/view/intro/reservation_intro_02.php`）は、表を幅 943px の器 `#reservation`
 * の中の `.maintextBoxw_setting`（幅 840px・左右の内余白 32px。`css/base_old.css`）に
 * 置く。表は幅 840px で、器の左端から 32px の位置に来る（幅 1440 で左 280.5）。
 * dev は外枠いっぱいの 1,100px だった。2026-09-26 に幅 1440 で両側を CDP で読んで
 * 確かめた.
 *
 * 🚨 **表の幅とエリア別の帯の幅は 1,280px 以上だけに当てる。**意図的変更の台帳の
 * 「本サイトの対応幅の区分」のとおり、1,280px 以上は移行元と同じ固定の姿を保ち、
 * 750〜1,279px は画面幅に収める（固定の 840px と 475px を持ち込まない）.
 *
 * - 表の左の外余白は「外枠の幅と 943px の差の半分 ＋ 32px」（幅 1440 で 110.5px）
 * - 見出しの器の字は 15px（`css/reservation_intro_form02.css` の
 *   `table th { font-size: 15px !important }`）。行送りは `page_inquiry.css` の
 *   `line-height: 120%` が後から勝つので 18px のまま
 * - 性別と紹介者とのご関係のラジオは、`label.size02 { width: 138px }` と、丸・字・
 *   次の丸のあいだの空白 1 字（5.33px）で並ぶ。最後の選択肢の字は幅を持たない。
 *   dev は選択肢を欄の器（`.pa-cell-field`）の間隔 8px で並べるので、その間隔を
 *   5.33px にし、選択肢の右の外余白を外す。字の行送りは、移行元が `body` の
 *   `font: 13px/1.231`（`css/mypage_common_new.css`）を受け継いだ 1.231（16px で 19.7px）.
 *   来店希望店舗のラジオは組みが違う（`dl.area dd label { margin-right: 18px }`）ので
 *   当てない
 * - 来店希望店舗のエリア別の帯は、移行元が社員紹介だけ `#reservation table td dl.area
 *   { width: 100% !important }`・`dd { width: 475px !important }` に上書きしている
 *   （`css/reservation_intro_form02.css`）。dev の既定の固定幅 805px のままだと、表の
 *   自動レイアウトが欄の器を縮められず、表が 924px に広がって見出しの器が細くなる
 *   （2026-09-26 の下見の実測）
 * - 帯の中の店舗の並びも移行元の組みにそろえる（2026-09-26 の下見の 6 回目で、行の
 *   高さが移行元 606.63 に対し 649.5 だった）。移行元は `dt { width: 121px }`、
 *   `dd label { margin-right: 18px }` と、字と次の丸のあいだの空白 1 字（5.33px）、
 *   丸と字のあいだも空白 1 字で並び（`css/page_inquiry.css`）、行送りは上と同じ 1.231
 *   である。店舗の途中の改行は、移行元の `<br>` と同じ位置に定義から出す
 *   （`PA_Forms_Definitions::STORE_AREA_BREAKS_BY_FORM`）
 */
@media (min-width: 1280px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table {
		width: 840px;
		margin-left: calc((100% - 943px) / 2 + 32px);
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-area {
		width: 100%;
	}

	/* 店名の欄の幅（Bug #9342）。移行元の `dd { width: 475px !important }` は content-box で、左の内余白 19px が
	 * 外に足される（475 ＋ 19 ＝ 494・エリア名 121 と合わせて td の中身の幅 615）。dev はテーマの `main.css` が全体を
	 * border-box にするので、475px のままだと内余白を含んで 596 になり、右端が 19px 手前で終わっていた。
	 * `.pa-area { width: 100% }` も、器 `.pa-cell-field`（inline-flex）が中身に合わせて縮むので、td の幅まで広げない。
	 * 会員紹介とご紹介の 684px（665 ＋ 19）と同じく、内余白を足した外形の幅で書く. */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-area__stores {
		width: calc(475px + 19px);
		line-height: 1.231;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-area__name {
		width: 121px;
	}

	/*
	 * 選択肢は行の上端にそろえる。既定の `vertical-align: baseline` のままだと、
	 * 丸の下端が字の基準線に乗って行の箱が 21.03px に伸びる（移行元は 19.69px。
	 * 2026-09-26 の下見の 7 回目で 1 行ごとに 1.34px ずれた）。移行元の丸は行の
	 * 上端から 2px の位置にある.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-area .pa-radio {
		gap: 5.33px;
		align-items: flex-start;
		margin-right: calc(18px + 5.33px);
		vertical-align: top;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-area .pa-radio input[type="radio"] {
		margin-top: 2px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-area__break {
		display: inline;
	}
}

/*
 * 社員紹介の来店予約のパソコン幅の、表より下の段落と申し込みの塊（Bug #10231）。移行元のパソコン版は、同意の前の 2 段落
 * （`p.form_text02`）・同意の箱（`div.agree_box`）・同意の下の段落（`p.mb20`）・見出し「お申し込みが可能な方」（`p.fs16`）・本文（素の `p`）を、
 * 表と同じ 840px の箱（`.maintextBoxw_setting`）に置く。dev は器いっぱいに置き、見出しと本文の行の高さと外余白も違っていた
 * （直す前の読み `pa-verify-assets/A2/10231-申し込みの塊-1011/直す前/`・幅 1440）.
 *
 * | 要素 | 移行元 | dev（直す前） |
 * |---|---|---|
 * | 同意の下の段落 | 外余白 `0 0 20px` | 外余白 `20px 0 0`（見出しとの間が 0） |
 * | 見出し | 16px・行の高さ 32・外余白 0 | 16px・行の高さ 24・下の外余白 25 |
 * | 本文 | 13px・行の高さ 26・外余白 0 | 13px・行の高さ 19.5・下の外余白 25 |
 * | 左と幅 | 840 の列（幅 1440 で左 280.5）。同意の箱は列の中央（左 502.5） | 器いっぱい。同意の箱は器の中央 |
 *
 * 移行元の `p` は `css/mypage_common_new.css` の reset で外余白 0。`.mb20`・`.fs16` は `css/style.css`。行の高さは計算した値（字の 2 倍）.
 * 同意の下の段落の上の外余白 20 は残す（同意の箱との間は両側とも 40 で同じ）.
 * 840 の列は、上の表（Bug #8521）と同じく 1,280px 以上だけに当てる（意図的変更の台帳「本サイトの対応幅の区分」）.
 * 字の色と書体の差は扱わない（フォーム全体の方針として別に決める）.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-consent-footer {
		margin-bottom: 20px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-admission__heading {
		margin: 0;
		line-height: 32px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-admission__body {
		margin: 0;
		line-height: 26px;
	}
}

@media (min-width: 1280px) {
	.pa-form[data-pa-form="reservation_intro_02"] :is(.pa-consent-intro, .pa-consent-footer, .pa-admission__heading, .pa-admission__body) {
		width: 840px;
		margin-left: calc((100% - 943px) / 2 + 32px);
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent {
		margin-left: calc((100% - 943px) / 2 + 32px + (840px - 396px) / 2);
	}
}

/* 見出しの器の字とラジオの並びは幅を固定しないので、パソコン幅（750px 以上）の全部に当てる. */
@media (min-width: 750px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th {
		font-size: 15px;
	}

	/*
	 * 札と項目名のあいだ。移行元は `<span class="ico01">必須</span>紹介者とのご関係` と
	 * 空白を挟まず、札の右の外余白 10px だけを空ける。dev は札と項目名のあいだの改行が
	 * 空白 1 字（15px の明朝で約 5px。下見の 4 回目の実測で 4.99px）になるので、そのぶんを外余白から引く。
	 * 引かないと、幅 164.72px の見出しの器で「紹介者とのご関係」が 2 行に折り返す
	 * （2026-09-26 の下見の実測）.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th .pa-badge {
		margin-right: 5px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) {
		column-gap: 5.33px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio {
		gap: 5.33px;
		margin-right: 0;
		line-height: 1.231;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:not(:last-child) {
		width: calc(13px + 5.33px + 138px);
	}

	/*
	 * 来店希望日時・生年月日・都道府県の欄（Bug #8538）。移行元は古い CSS の束を読み、
	 * 欄の字は `css/mypage_common_new.css` の `select, input { font: 99% … }` で 15.84px、
	 * 選択欄の内余白は `css/page_inquiry.css` の `table td select { padding: 5px }` で、
	 * 高さが 31 になる。選択欄の幅は中身なり（年 121・月と日 50・都道府県 143）である
	 * （2026-09-27 の直す前の測定・CDP）。dev は字 16px・内余白 3.2px 8px で高さ 27.38、
	 * 幅は定義の 120 / 92 / 92 / 184 だった.
	 *
	 * 会員紹介とご紹介の移行元は新しい束を読み、値が違う（Bug #8553）.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell select.pa-control:is([name^="birth-"], [name="pref"]) {
		padding: 5px;
		font-size: 15.84px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell select.pa-control[name="birth-year"] {
		width: 121px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell select.pa-control:is([name="birth-month"], [name="birth-day"]) {
		width: 50px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell select.pa-control[name="pref"] {
		width: 143px;
	}

	/*
	 * 生年月日の欄のあいだ。移行元は欄・空白 1 字・幅 40px の「年」「月」
	 * （`table td label.size01 { width: 40px }`）・空白 1 字の並びである。「日」は幅を持たない.
	 * 空白 1 字は、同じ表の選択肢の並びで測った 5.33px と同じである（2026-09-27 の下見の実測）.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field {
		column-gap: 5.33px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(select:is([name="birth-year"], [name="birth-month"])) .pa-unit {
		width: 40px;
	}

	/*
	 * 来店希望日。移行元は一行入力欄（内余白 5px）に日付の選択部品が右の内余白 26px を
	 * 足した 199 × 30 である。dev は `input type="date"` のまま（ユーザー決定 D562）で、
	 * 外形だけを移行元にそろえる。暦の印はブラウザ内蔵のものが右端に出るので、右の
	 * 内余白は 5px のままにする.
	 *
	 * 札・「第1希望」・欄・「日付を選択してください」の並びは、移行元の
	 * `table td p span.ico01 { margin-right: 10px }`・`table td label.kibou { margin-right: 20px }`・
	 * `table td .mr20 { margin-right: 20px }` と、あいだの改行の空白 1 字である。
	 * dev の欄は flex で空白を持たないので、その幅を外余白に足す.
	 *
	 * 縦は、移行元の 1 行（`p.mb15`）が「第1希望」の字の箱の高さ 32 で決まり、欄はその 2px 下、
	 * 札は 4px 下に来る。行と行のあいだは `.mb15` の 15px で、dev は改行の印
	 * （`.pa-cell-break`）の上下の 2 つの `row-gap` で置く（7.5px × 2）.
	 *
	 * 「第1希望」の字の幅は、移行元の書体で 58.52px である（dev の書体では 56.89px）。
	 * 欄の横の位置がこの幅で決まるので、移行元の幅を置く.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control {
		width: 199px;
		height: 30px;
		font-size: 15.84px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date {
		align-items: flex-start;
		column-gap: 0;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date .pa-badge {
		margin-top: 4px;
		margin-right: calc(10px + 5.33px);
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date .pa-sub-label {
		min-width: 58.52px;
		margin-right: calc(20px + 5.33px);
		line-height: 32px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control {
		margin-top: 2px;
	}

	/*
	 * 「日付を選択してください」。移行元は欄の右の外余白 20px と空白 1 字（3.33px）の後ろに
	 * 字（行の高さ 16）を置く（2026-09-27 の下見の実測）.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(.pa-cell-field-date) {
		gap: 7.5px calc(20px + 3.33px);
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(.pa-cell-field-date) .pa-time-placeholder {
		line-height: 16px;
	}
}

/*
 * 通常時の地の色（Task #8086）。
 *
 * 移行元は送信ボタンを画像で置いていた。**その画像から色を数えた**（2026-09-20 16:2x・
 * Pillow で画素を数えた結果）。
 *
 * | 画像 | 寸法 | いちばん多い色 |
 * |---|---|---|
 * | `images/event/btn_check_off.gif`（パソコン版） | 250x60 | `#a3762b` 14,250 画素 |
 * | `sp/images/inquiry/btn_check.gif`（スマートフォン版） | 339x100 | `#a3762b` 32,161 画素 |
 * | `images/inquiry/btn_error.gif`（未入力・パソコン版） | 250x60 | `#e0200f` 13,762 画素 |
 * | `sp/images/inquiry/btn_error.gif`（未入力・スマートフォン版） | 339x100 | `#e0200f` 30,942 画素 |
 *
 * 文字は 4 枚とも白である。未入力のあいだの `#e0200f` は
 * `.pa-form-submit--blocked` が既に同じ値を持つ（Issue #1770）。
 *
 * 🚨 **資料請求（`.pa-form--dl`）だけは `#a3762b` にしない。**写す相手が実配信の
 * **新系統**（`legacy/www.p-a.jp/public/request/style.css` の `.form-row__submit`）で、
 * そちらの地の色は `--primary-color`（`#fd7b7d`）だからである。下の
 * `.pa-form.pa-form--dl .pa-form-submit button` が明示して守る.
 */
.pa-form .pa-form-submit button {
	box-sizing: border-box;
	display: inline-block;
	width: 250px;
	max-width: 100%;
	min-height: 60px;
	padding: 0.7em 1em;
	border: 0;
	background-color: #a3762b;
	color: #ffffff;
	font-size: 1.05em;
	cursor: pointer;
}

.pa-form .pa-form-submit button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
 * 指を乗せたときの反転（Task #8148）。
 *
 * 移行元のパソコン版は `class="imgover"` の仕組みで画像を差し替える。**その画像の
 * 画素を数えた**（Pillow）。
 *
 * | 画像 | 地 | 文字 | 枠線 |
 * |---|---|---|---|
 * | `images/event/btn_check_off.gif`（通常） | `#a3762b` 14,250 画素 | 白 155 画素 | `#a3762b`（地と同色） |
 * | `images/event/btn_check_ov.gif`（指を乗せたとき） | `#ffffff` 13,635 画素 | `#a3762b` | **`#a3762b` 1px** |
 *
 * 四隅と辺の 1px 目が `#a3762b`・2px 目から白なので、**1px の枠線つきの完全な反転**である。
 *
 * 組み方は資料請求（`.pa-form--dl`。下の `@media (hover: hover)` の節）と同じにする。
 * 移行元も同じ考え方で、指を乗せられる端末にだけ反転を出す。
 *
 * 🚨 **資料請求は除く**（`:not(.pa-form--dl)`）。写す相手が実配信の新系統で、
 * そちらは白地に `--primary-color`（`#fd7b7d`）へ反転する。**選び方で除いてあるので、
 * 節の並べ替えで勝敗が変わらない。**
 *
 * 🚨 **未入力が残っているあいだは反転させない**（`:not(.pa-form-submit--blocked)`）。
 * 移行元も未入力のあいだは赤い画像（`btn_error.gif`）に差し替え、`imgover` の対から
 * 外している。枠線を付けないのも同じ理由で、`btn_error.gif` の四隅は地と同じ
 * `#e0200f` だからである。
 *
 * 🚨 **箱は 250x60 のまま動かない。**共通の規則が `box-sizing: border-box` を持つので、
 * 枠線 1px は内側に食い込む。
 *
 * 🚨 **スマートフォン版は対象外。**移行元のスマートフォン版は画像が 1 枚だけ
 * （`sp/images/inquiry/btn_check.gif`）で差し替える相手を持たない。`@media (hover: hover)`
 * に入れてあるので、指しか使えない端末には当たらない.
 */

@media (hover: hover) {

	.pa-form:not(.pa-form--dl) .pa-form-submit:not(.pa-form-submit--blocked) button {
		border: 1px solid #a3762b;
		transition: all 0.3s ease-in-out;
	}

	.pa-form:not(.pa-form--dl) .pa-form-submit:not(.pa-form-submit--blocked) button:hover {
		background-color: #ffffff;
		color: #a3762b;
	}
}

/*
 * 未入力が残っているあいだの見せ方（Issue #1770）。
 *
 * 移行元は、必須欄に未入力が残っているあいだ送信ボタンの代わりに赤い画像
 * （btn_error.gif・250x60px・地の色 rgb(224, 32, 15)）を出していた。移行先は画像を
 * 使わず、送信ボタンの中身（`.pa-form-submit__ready` / `.pa-form-submit__blocked`）を
 * 差し替える形で同じ見せ方を作る。切り替えの判定は assets/js/pa-forms.js の
 * setupSubmitBlockedState() が行う。
 */

.pa-form .pa-form-submit__blocked {
	display: none;
}

.pa-form .pa-form-submit--blocked .pa-form-submit__ready {
	display: none;
}

.pa-form .pa-form-submit--blocked .pa-form-submit__blocked {
	display: inline;
}

.pa-form .pa-form-submit--blocked button {
	background-color: rgb(224, 32, 15);
	/*
	 * 「未入力の」「必須項目があります」の 2 行組みでも寸法を 250x60px に保つための
	 * 調整。font-size は継承の 1.05em（約 16.8px）のまま変えない。2 行 × line-height
	 * 1.3 ≒ 43.7px に、上下の padding 0.4em（約 13.4px）を足すと約 57px となり、
	 * button 側の min-height: 60px が効いてちょうど 60px に収まる（実測は Issue の
	 * 本文を参照）。
	 */
	padding: 0.4em 1em;
	line-height: 1.3;
}

/*
 * 紹介経由の来店予約 3 画面（ご紹介・社員紹介・会員紹介）の未入力の知らせ（Bug #8356・D553）。
 *
 * 移行元は `btn_error.gif`（250x60）の画像に明朝体の白字を焼き込んでいる。3 画面とも
 * `checkreq.js` が同じ画像を出すことを実ブラウザのスクリーンショットで確かめた（版 `bd23f8358`）。
 * 字は字のまま残し、書体を明朝体にする。字体の並びは移行元の `.serif` をそのまま写す
 * （テーマの変数 `--pa-font-family-serif` は「ＭＳ 明朝」を持たないため、変数を使わない）。
 *
 * 字の大きさは 16.8px に固定する。継承の 1.05em のままだと、携帯幅では本文の 13px から
 * 13.65px になる。比べる相手は幅を問わずパソコン版の画像である（D540（う）・携帯版の
 * `/sp/form/…` は手元のミラーで開けない）。2 行 × 1.3 と上の padding 0.4em を足すと約 57px
 * なので、箱は両幅とも min-height の 250x60 のまま動かない。
 *
 * 🚨 **通常の来店予約と資料請求は対象外**（Bug #8356 の陰性対照）。`data-pa-form` で 3 画面に絞る.
 */
.pa-form[data-pa-form="reservation3"] .pa-form-submit--blocked button,
.pa-form[data-pa-form="event"] .pa-form-submit--blocked button,
.pa-form[data-pa-form="reservation_intro"] .pa-form-submit--blocked button,
.pa-form[data-pa-form="reservation_intro_02"] .pa-form-submit--blocked button {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 16.8px;
}

/*
 * 資料請求の送信ボタン（Bug #1928）。
 *
 * 上の `.pa-form .pa-form-submit button` は 7 種すべてに効く共通の規則で、寸法
 * 250x60px は移行元の**旧系統**が未入力のあいだ出していた赤い画像（`btn_error.gif`。
 * 250x60px）から採った値である。資料請求だけは写す相手が実配信の**新系統**
 * （`legacy/www.p-a.jp/public/request/style.css` の `.form-row__submit`）なので、
 * 器の横いっぱいに広がる角の丸い太字のボタンへ上書きする.
 *
 * **選び方に `.pa-form` を前置して class 3 つにしてある。** 共通の規則は class 2 つで
 * このファイルの前方（`.pa-form .pa-form-submit button`）に書かれている。class 2 つの
 * まま後ろに書くと、勝敗が「書かれた順」だけで決まり、節の並べ替えで黙って負ける。
 * class 3 つにすれば順番に依らず勝つ.
 *
 * 移行元の宣言との対応は次のとおり（実測は Issue #1928 のコメントを参照）。
 *
 * - `display: block` / `width: 100%` … 移行元と同じ。器の横いっぱいに広げる
 * - `min-height: 0` … 共通の規則の `min-height: 60px` を打ち消す。移行元は下限を
 *   持たず、内余白と文字の高さだけで 58px になる（実測）
 * - `padding: 1em` … 移行元と同じ。この要素の文字は 16px なので 16px になる
 * - `border-radius: 0.5em` … 移行元と同じ 8px
 * - `font-size: 1em` … 移行元の送信ボタンは文字の大きさを指定せず、器の 16px を継ぐ
 *   （移行元の土台 CSS が `button { font-size: 100% }` を敷いている）。共通の規則の
 *   `1.05em`（16.8px）を器と同じ 16px へ戻す
 * - `font-weight: 700` … 移行元と同じ
 *
 * - `background-color: var(--primary-color)` … 移行元の新系統と同じ `#fd7b7d`。
 *   🚨 **この 1 行は Task #8086 で足した。**共通の規則の地の色が移行元の**旧系統**の
 *   画像の色（`#a3762b`）へ変わったので、書かないと資料請求だけ写す相手から離れる。
 *   文字色は共通の規則の白が新系統（`color: #fff`）と同じなので書かない.
 *
 * **未入力のあいだの見せ方（Issue #1770 の `.pa-form-submit--blocked`）は壊れない。**
 * あの見せ方を使うのはフォーム 5 種（婚活EQ診断つき資料請求・来店予約・お問い合わせ・
 * 法人からの問い合わせ・ご紹介プログラム）で、どれも `.pa-form--dl` を持たない。
 * 資料請求と OTOCON 予約は切り替える中身そのものを描き出していない（実測）.
 */
.pa-form.pa-form--dl .pa-form-submit button {
	display: block;
	width: 100%;
	min-height: 0;
	padding: 1em;
	border-radius: 0.5em;
	background-color: var(--primary-color);
	font-size: 1em;
	font-weight: 700;
}

/*
 * 枠線・間の動き・指を乗せたときの反転を `@media (hover: hover)` の側に置くのは、
 * 移行元と同じ組み方である（`.form-row__submit` の直後の同じ問い合わせ）。住所自動
 * 入力の押しボタン（下の `.pa-form--dl .pa-form-zip-lookup`）も同じ形で写してある.
 *
 * **枠線は指を乗せられる端末でだけ付く。** 枠線の色は地の色と同じなので見た目は
 * 変わらないが、外形は上下に 1px ずつ増える（移行元の実測は 58px で、内余白 16+16 と
 * 文字の高さ 24 に枠線 1+1 を足した値である）。指しか使えない端末では移行元も
 * 枠線を持たないため 56px になる。**この差は移行元がそう作っているので写す。**
 */
@media (hover: hover) {

	.pa-form.pa-form--dl .pa-form-submit button {
		border: 1px solid var(--primary-color);
		transition: all 0.3s ease-in-out;
	}

	.pa-form.pa-form--dl .pa-form-submit button:hover {
		background-color: #ffffff;
		color: var(--primary-color);
	}
}

/*
 * 送信の行の文字の基準も、個人情報の器（`.pa-form--dl { font-size: 16px }`）と同じ 16px に
 * する。行は器の外にあるので、置かないと携帯幅でテーマの 13px を継ぐ。そうなると
 * `em` で書いた値がすべて縮む。2026-09-27 の下見（幅 375）では次のとおりだった。
 * 移行元の土台は `html { font-size: 16px }` である.
 *
 * - 行の上の外余白（`.pa-form .pa-form-row { margin: 2.25em 0 0 }`）: 移行元 36 に対して 29.25
 * - 押しボタンの高さ: 移行元 56 に対して 46
 * - 押しボタンの角丸: 移行元 8px に対して 6.5px
 *
 * 注意書きは字の大きさを 12.8px と値で書いてあるので変わらない.
 */
.pa-form[data-pa-form="eq_ad"] .pa-form-row--submit {
	font-size: 16px;
}

/*
 * 広告用の婚活 EQ 診断フォーム `eq_ad` の送信ボタン（Task #8557）。
 *
 * 移行元の `form/view/eq_ad.php` は資料請求の新系統と同じ `/request/style.css` の
 * `.form-row__submit` を使う（器いっぱいの幅・`#fd7b7d`・角丸 8px）。写す値は上の
 * 資料請求（`.pa-form.pa-form--dl .pa-form-submit button`）と同じである.
 *
 * 🚨 **上の規則は `eq_ad` に当たらない。**`eq_ad` のフォーム要素は `.pa-form--mixed`
 * で、`.pa-form--dl` を持つのは個人情報の器（`.pa-eq-ad-personal`）だけである。
 * 送信ボタンの行はその器の外（赤い枠 `.pa-eq-check` の直下）に出るので、
 * `data-pa-form` で絞って同じ値を書く。色の変数（`--primary-color`）も器の中にしか
 * 無いので、値をそのまま書く.
 *
 * 選び方は class 4 つ（属性の選び方を 1 つと数える）にしてある。共通の
 * `.pa-form .pa-form-submit button`（class 2 つ）に、書かれた順に依らず勝つ.
 */
.pa-form[data-pa-form="eq_ad"] .pa-form-row--submit .pa-form-submit button {
	display: block;
	width: 100%;
	min-height: 0;
	padding: 1em;
	border-radius: 0.5em;
	background-color: #fd7b7d;
	font-size: 1em;
	font-weight: 700;
}

/*
 * 枠線と指を乗せたときの反転は、資料請求と同じく `@media (hover: hover)` の側に置く.
 *
 * 🚨 **選び方は class 5 つにしてある。**共通の茶色の枠線
 * （`.pa-form:not(.pa-form--dl) .pa-form-submit:not(.pa-form-submit--blocked) button`。
 * `:not()` の中身も数えて class 4 つ）は `.pa-form--dl` を持たない `eq_ad` にも当たる。
 * 同じ数だと書かれた順だけで勝敗が決まるので、1 つ多くして順番に依らず勝たせる.
 */
@media (hover: hover) {

	.pa-form[data-pa-form="eq_ad"] .pa-form-row--submit .pa-form-submit:not(.pa-form-submit--blocked) button {
		border: 1px solid #fd7b7d;
		transition: all 0.3s ease-in-out;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-form-row--submit .pa-form-submit:not(.pa-form-submit--blocked) button:hover {
		background-color: #ffffff;
		color: #fd7b7d;
	}
}

.pa-thanks-info {
	font-size: 1.1em;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
 * 欄ごとの誤りの文と、送信中の全画面の覆い（Issue #1774 の AC 4.8 と担当の境界）
 *
 * どちらも要素を出すのは画面側の処理の Task #1776 で、**見た目だけをここが持つ**
 * （担当の境界・2026-08-14）。class の名前は #1776 と揃えてある。名前を変えると
 * 両方が同時に壊れるので、片方だけで変えない.
 * -------------------------------------------------------------------------- */

/*
 * 欄ごとの誤りの文（移行元の `[data-err]`）。欄の下へ重ねて置くので、行の高さを
 * 増やさない。重ねる基準は包み（`.pa-form--dl .pa-cell-field`）の `position: relative`
 * である。`bottom: -1.5em` は誤りの文自身の 12px を基準にするので -18px になる
 * （移行元も同じ）.
 *
 * 出す・消すは #1776 が受け持つ。移行元は `opacity` で切り替えるが、移行先は要素の
 * 有無で切り替えるため、ここでは初期状態を隠さない.
 */
.pa-form .pa-form-error {
	position: absolute;
	bottom: -1.5em;
	color: #f57c7c;
	font-size: 0.75em;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * 送信中の全画面の覆い（移行元の `.send-loader`）。
 *
 * `.pa-form--dl` を前置していないのは、#1776 がこの要素をフォームの器の外側へ置いても
 * 効くようにするためである。この 2 つの class は資料請求の送信中表示だけが使うので、
 * 他の 6 種には届かない（他の 6 種の HTML に同じ class が出ないことを、7 種すべてを
 * 描き出して確認した）.
 */
.pa-form-sending {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: grid;
	place-content: center;
	width: 100%;
	height: 100vh;
	background: #ffffff8b;
}

/*
 * `hidden` 属性が付いているあいだは出さない。上で `display` を書くとブラウザ既定の
 * `[hidden] { display: none }` に勝ってしまうので、明示的に打ち消す.
 */
.pa-form-sending[hidden] {
	display: none;
}

/*
 * 覆いの中央で回る点（移行元の `.load-circle`）。4px の丸 1 つを土台に、影を 9 個
 * 置いて 3x3 の並びを作り、2 秒周期で膨らむ位置を入れ替える.
 *
 * 色は移行元の `--primary-color` の実値（`#fd7b7d`）を直に書く。覆いがフォームの器の
 * 外に出ても効くようにするためで、変数は `.pa-form--dl` の中でしか引けない.
 */
.pa-form-sending__dots {
	width: 4px;
	aspect-ratio: 1;
	border-radius: 50%;
	color: #fd7b7d;
	box-shadow:
		19px -19px, 38px -19px, 57px -19px,
		19px 0 0 5px, 38px 0 0 5px, 57px 0 0 5px,
		19px 19px, 38px 19px, 57px 19px;
	transform: translate(-38px);
	animation: pa-form-sending-dots 2s infinite linear;
}

@keyframes pa-form-sending-dots {

	12.5% {
		box-shadow:
			19px -19px, 38px -19px, 57px -19px 0 5px,
			19px 0 0 5px, 38px 0, 57px 0 0 5px,
			19px 19px, 38px 19px, 57px 19px;
	}

	25% {
		box-shadow:
			19px -19px 0 5px, 38px -19px, 57px -19px 0 5px,
			19px 0, 38px 0, 57px 0,
			19px 19px, 38px 19px 0 5px, 57px 19px;
	}

	50% {
		box-shadow:
			19px -19px 0 5px, 38px -19px 0 5px, 57px -19px,
			19px 0, 38px 0, 57px 0,
			19px 19px, 38px 19px, 57px 19px 0 5px;
	}

	62.5% {
		box-shadow:
			19px -19px, 38px -19px, 57px -19px,
			19px 0 0 5px, 38px 0, 57px 0,
			19px 19px, 38px 19px 0 5px, 57px 19px 0 5px;
	}

	75% {
		box-shadow:
			19px -19px, 38px -19px 0 5px, 57px -19px,
			19px 0, 38px 0, 57px 0 0 5px,
			19px 19px, 38px 19px, 57px 19px 0 5px;
	}

	87.5% {
		box-shadow:
			19px -19px, 38px -19px 0 5px, 57px -19px,
			19px 0, 38px 0 0 5px, 57px 0,
			19px 19px 0 5px, 38px 19px, 57px 19px;
	}
}

/* --------------------------------------------------------------------------
 * 住所自動入力と開閉の押しボタン（Issue #1776 の AC 4.1 と AC 4.4）
 *
 * この 3 つの class は Task #1776 が新しく出す要素のものである。見た目の Task #1774 の
 * 実装時点にはまだ要素が無かったため、#1774 は見た目を書けなかった。担当の切り分けを
 * 訂正し、**#1776 が要素の出し分けと見た目の両方を持つ**ことにした（2026-08-14）.
 *
 * 写す相手は移行元の実配信版の 3 つの規則である
 * （`legacy/www.p-a.jp/public/request/style.css` の `.trigger-button` / `.acc-wrap` /
 * `.acc-button`）。ただし開いたあとに文字を読めなくする `.acc-button.on`
 * （`color: #eee !important`）は写さない。親 Feature #1772 の 7.1 で「再現しない」と
 * 決めてある.
 * -------------------------------------------------------------------------- */

/*
 * 住所自動入力の押しボタン（移行元の `.trigger-button`）。
 *
 * **幅の指定が要る理由。** 移行元は郵便番号の欄と押しボタンを専用の器
 * （`.form-row__data--2column`）へ入れ、どちらにも `flex: 1` を与えて半分ずつに割る。
 * 移行先は住所情報の 4 欄がすべて同じ `.pa-cell` に並ぶ組み立てなので、器の子すべてに
 * `flex: 1` を与えるわけにいかない。そこで押しボタンだけに「器の半分から横の間隔の
 * 半分を引いた幅」を与え、郵便番号の欄は残りへ縮ませる。`.pa-form--dl .pa-cell` の
 * 横の間隔は 1em なので、引く量はその半分の 0.5em である.
 *
 * **`align-self` が要る理由。** 移行元の器は縦の揃え方を指定しないため、押しボタンが
 * 郵便番号の欄と同じ高さまで伸びる（実測 48.39px）。移行先の `.pa-cell` は
 * `align-items: center` を持つので、指定しないと文字の高さだけに縮む.
 *
 * **移行元の下余白（`margin-bottom: 1.5em`）は写さない。** 移行元は郵便番号の欄にも
 * 同じ下余白を置いて次の段との間隔 24px を作るが、移行先はその間隔を `.pa-cell` の
 * 段の間隔（`row-gap: 0.75em` が段の区切りの前後で 2 回 = 24px）が作る。写すと間隔が
 * 二重になり、さらに押しボタンの伸びる高さが下余白の分だけ削られる（実測: 48.39px が
 * 28px へ縮んだ）.
 *
 * 内余白を 0 にするのは移行元と同じである（移行元は既定を打ち消す指定を持つ）。
 * 枠線・間の動き・指の形を `@media (hover: hover)` の側に置くのも移行元と同じ組み方で
 * ある。枠線の色は地の色と同じなので、指を乗せられない端末で見た目は変わらない.
 */
.pa-form--dl .pa-form-zip-lookup {
	box-sizing: border-box;
	flex: 0 0 calc(50% - 0.5em);
	align-self: stretch;
	padding: 0;
	border: none;
	border-radius: 0.5em;
	background-color: var(--dark-gray);
	color: #ffffff;
	font-size: 1em;
	text-align: center;
}

@media (hover: hover) {

	.pa-form--dl .pa-form-zip-lookup {
		border: 1px solid var(--dark-gray);
		cursor: pointer;
		transition: 0.3s all ease-in-out;
	}

	.pa-form--dl .pa-form-zip-lookup:hover {
		background-color: #ffffff;
		color: var(--dark-gray);
	}
}

/*
 * 資料請求の生年月日・必須の札・郵便番号の欄の幅（Bug #8560）。移行元は `request/style.css`
 * である（2026-09-27 の直す前の測定・CDP・記録 `pa-verify-assets/B/8560-直す前2-0927/`）.
 *
 * 資料請求だけに絞る。同じ `.pa-form--dl` の部品を広告用の婚活 EQ 診断フォーム（`eq_ad`）も
 * 使うようになるため（Bug #8551）で、eq_ad の値はそちらで決める（郵便番号の割り方は下の別の指定）.
 *
 * - 生年月日: 移行元は選択欄の囲み（`.select-wrap`）がそれぞれ `margin-bottom: 1.5em` を持ち、
 *   横並びの囲み（`.date-select { display: flex }`）の中なので外へ抜けず、行の中に 24px の空きが残る
 * - 必須の札: 移行元は `vertical-align` の既定（baseline）で、題の字の上端から 3px 下に来る。
 *   dev の土台の `.pa-badge` は `text-bottom` である。横は、dev だけ題の字と札のあいだに改行の
 *   空白 1 字（4.56px）が入るので、移行元の `margin-left: .5em` からその幅を引く
 * - 郵便番号: 移行元は欄と押しボタンに `flex: 1` を与え（`.form-row__data--2column > *`）、
 *   指を乗せられる端末だけ押しボタンに枠線 1px を足す。その結果、幅 1440 では欄 275・
 *   押しボタン 277 に割れる（dev は押しボタンを固定の幅にしていて 276 / 276）
 */
.pa-form[data-pa-form="shiryo"] .pa-cell-field-select:has(select[name^="birth-"]) {
	margin-bottom: 1.5em;
}

.pa-form[data-pa-form="shiryo"] .pa-form-row__title .pa-badge {
	margin-left: calc(0.5em - 4.56px);
	vertical-align: baseline;
}

@media (hover: hover) {

	.pa-form[data-pa-form="shiryo"] .pa-form-zip-lookup {
		flex-basis: calc(50% - 0.5em + 1px);
	}
}

/*
 * 広告用の婚活 EQ 診断フォーム（`eq_ad`）の郵便番号の欄と住所自動入力の押しボタンの割り方（Bug #8551）。
 *
 * 上の資料請求と同じ理由である。移行元の `form/view/eq_ad.php` も `.form-row__data--2column` の中に
 * 欄と押しボタンを置き、`/request/style.css` を読む。指を乗せられる端末では押しボタンに枠線 1px が付き、
 * 幅 1440 で欄 285.39・押しボタン 287.41 に割れる。dev は押しボタンを固定の幅にしていて、
 * 286.41 / 286.39 だった（2026-09-28 08:57 の測定・`pa-verify-assets/A/8551-残り2点-0928/走行1/`）。
 * 幅 375 は、指を乗せられない端末として測ると枠線が無く、両側とも 148.86 で差が無い.
 *
 * 必須の札と生年月日は、eq_ad では同じ測定で移行元と差が無いので足さない.
 */
@media (hover: hover) {

	.pa-form[data-pa-form="eq_ad"] .pa-form-zip-lookup {
		flex-basis: calc(50% - 0.5em + 1px);
	}
}

/*
 * 開閉の押しボタンの並び（移行元の `.acc-wrap`）。
 *
 * **`[hidden]` の打ち消しが要る。** JavaScript が動かない環境では押しても何も起きない
 * ので、#1776 はこの並びに `hidden` を付けて描き出し、JavaScript が現す。ここで
 * `display` を書くとブラウザ既定の `[hidden] { display: none }` に勝ってしまうため、
 * 明示的に打ち消す（送信中の覆いと同じ組み方）.
 */
.pa-form--dl .pa-form-accordion {
	display: flex;
	gap: 0.5em;
	margin: 2.25em 0 0;
}

.pa-form--dl .pa-form-accordion[hidden] {
	display: none;
}

/*
 * 開閉の押しボタン（移行元の `.acc-button`）。
 *
 * 移行元は `border: none` を書いた直後に `border: 1px solid #ddd` を書いており、
 * 後ろが勝って 1px の枠線が出る（実測で確認した）。ここでは結果だけを書く.
 */
.pa-form--dl .pa-form-accordion__button {
	box-sizing: border-box;
	padding: 0.5em 1em;
	border: 1px solid #dddddd;
	border-radius: 0.4em;
	background: transparent;
	font-size: 1em;
	text-align: left;
}

@media (hover: hover) {

	.pa-form--dl .pa-form-accordion__button {
		cursor: pointer;
		transition: 0.3s all ease-in-out;
	}

	.pa-form--dl .pa-form-accordion__button:hover {
		color: var(--theme-color);
	}
}

/* --------------------------------------------------------------------------
 * スマートフォン幅（375px で成立させる）
 *
 * 移行元はパソコン版とスマートフォン版で別の HTML を配っていたため、表組みを
 * そのまま横に並べたままにはできない。項目名と入力欄を縦に積み替える.
 * -------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {

	.pa-form-table,
	.pa-form-table tbody,
	.pa-form-table tr,
	.pa-form-table th,
	.pa-form-table td {
		display: block;
		width: auto;
	}

	.pa-form-table {
		border-top: 0;
	}

	.pa-form-table tr {
		border-bottom: 1px solid #cccccc;
	}

	/*
	 * 🚨 **かたまりの指定は狭い画面では効かせない**（Bug #7935）。狭い画面の
	 * 行の組み方は移行元スマートフォン版（`<dl>`）と別の話で、まだ測っていない。
	 * ここで `--pair-middle` を足さないので、**狭い画面の見え方は 1px も変わらない**
	 * （区切り線は `tr` が持ち、内余白は下の `th` / `td` の規則が上書きする）.
	 */
	.pa-form-table th,
	.pa-form-table td,
	.pa-form-table__row--pair-top th,
	.pa-form-table__row--pair-top td,
	.pa-form-table__row--pair-bottom th,
	.pa-form-table__row--pair-bottom td {
		border-bottom: 0;
	}

	/*
	 * 🚨 **携帯幅の見出しは太字にしない**（Task #8053）。パソコン幅の `bold` は
	 * 移行元の `page_inquiry.css` の `table th`（`th` のブラウザ既定）の値で、
	 * 移行元の携帯版は `sp/css/style.css` の `dt` で組み、`sp/css/basic.css` が
	 * 全要素へ当てる `font-weight: normal` を受ける。2026-09-20 13:13 の実測で
	 * 移行元の携帯版が 400、パソコン版が 700 であることを確かめた.
	 */
	.pa-form-table th {
		padding: 16px 0 8px;
		font-size: 17px;
		font-weight: normal;
	}

	.pa-form-table td {
		padding: 0 0 16px;
	}

	.pa-form-table__row--pair-top {
		border-bottom: 0;
	}

	.pa-form-table__row--pair-top td {
		padding-bottom: 8px;
	}

	/*
	 * 幅の区分を持たない欄は、画面幅に合わせて広げる。区分を持つ欄（56px /
	 * 128px / 150px / 162px / 166px / 180px / 212px / 246px）は 375px でも
	 * 収まるので、指定の強い方が残す（Issue #1808 で追加した区分も同じ扱い）.
	 */
	.pa-form input.pa-control,
	.pa-form select.pa-control,
	.pa-form input:is([type="date"], [data-pa-date-text]).pa-control,
	.pa-form textarea.pa-control {
		width: 100%;
	}

	/*
	 * 340px（町名・番地・建物名・社名）と 566px（件名）は、375px の画面幅に
	 * 収まらない。区分を持つ欄でもこの 2 つだけは画面幅に合わせて広げる
	 * （Issue #1808）.
	 */
	.pa-form .pa-control.pa-control--340,
	.pa-form .pa-control.pa-control--566 {
		width: 100%;
	}

	.pa-form .pa-cell-field {
		flex-basis: 100%;
	}

	.pa-form .pa-cell-field-select,
	.pa-form .pa-cell-field-date {
		flex-basis: auto;
	}

	/*
	 * 格子の組み方は、項目名の列（318px 固定）が 375px では成立しない。
	 * 項目名と入力欄を縦に積み替える.
	 */
	.pa-form .pa-form-grid__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.pa-form .pa-form-grid {
		gap: 20px;
	}

	/*
	 * 定義リスト（資料請求）は、この境目をまたいでも見え方を変えない（AC 4.9）。
	 *
	 * 移行元の資料請求は幅で分岐する指定を 1 つも持たず（親 Feature #1772 の 2.2）、
	 * 横 2 列・横 3 列の子へ `flex: 1` を与えて、狭い画面でも折り返さない。よって広い
	 * 画面と同じ値（`flex: 1 1 0%`）をここでも置き、上の 2 つの積み替え（`flex-basis` を
	 * 100% / auto にする指定）を打ち消す。着手前はここで土台を 120px へ下げて折り返しを
	 * 止めていたが、土台を 0 にしたことで境目の前後で値が揃った.
	 *
	 * **セレクタの強さを上げる形（`:not(.pa-form--dl)` を上の 2 つへ付ける形）は採らない。**
	 * 実測したところ、強さを 3 つに上げると OTOCON 予約の希望日時 6 欄が 480px で
	 * 450px から 258px / 174px へ縮んだ。上の 2 つより後に書かれた
	 * `.pa-form--div .pa-cell-field { flex-basis: 100% }` に勝ってしまうためである。
	 * 同じ強さのまま後ろに置いて打ち消すこの形なら、他の 6 種の値は 1 つも動かない.
	 */
	.pa-form--dl .pa-cell-field {
		flex: 1 1 0%;
	}

	.pa-form--div .pa-cell-field {
		flex-basis: 100%;
	}

	/*
	 * 設問の選択肢を、移行元のスマートフォン専用ページと同じ「1 2 3 4」の四角い
	 * ボタンに戻す（Bug #2118）。
	 *
	 * ## 正本と実測
	 *
	 * 正本は `legacy/www.p-a.jp/public/sp/css/style.css` の 2946〜2979 行
	 * （`#analysis .box_faq .list_faq` 配下）と、同 2907〜2917 行
	 * （`#analysis .text_check`）である。375px の実測とも一致する
	 * （`_cat-top-audit/work/form-verify/data/legacy-eq-sp.json` の
	 * `questionTypography` / `bandsBeforeSummary`・2026-08-26 採取）:
	 * 選択肢は 4 つで 1 行に 4 つ並ぶ・選択肢どうしの間隔は 12px・見出しは 15px の白・
	 * 設問の帯は地の色を持たない（`rgba(0, 0, 0, 0)`）。
	 *
	 * ## 地の色を画像ではなく色で置く
	 *
	 * 移行元はボタンの地を画像 2 枚（`num_off.gif` / `num_on.gif`。どちらも 90×90 を
	 * `background-size: 45px` で縮める）で描く。**中身を開いて確かめたところ、
	 * どちらも無地の四角だった**（`num_off.gif` は一色の灰色、`num_on.gif` は一色の赤。
	 * 赤の方は右端と下端に 1px の白があるが、`height: 30px` で切られて画面には出ない）。
	 * 絵柄が無いので、画像を取り込まず地の色で置き換える。読み込む物が 2 つ減り、
	 * 画面を拡大しても粗くならない.
	 *
	 * ## 寸法は移行元と同じ外形にそろえる
	 *
	 * 移行元は `width: 45px; height: 30px; padding: 15px 0 0` で、`box-sizing` の
	 * 指定を持たない（移行元のスマートフォン向け CSS は `*` への一括指定を持たず、
	 * この規則も既定の `content-box` である）。外形は 45×45px になる。**このテーマは
	 * `box-sizing: border-box` を全体へ効かせているため**（`themes/pa/assets/css/
	 * main.css` の `*, *::before, *::after`）、同じ外形を出すには高さを外形の 45px で
	 * 書く。内余白 15px を差し引いた中身の高さは移行元と同じ 30px になる。
	 *
	 * ## 中身が変わっても崩れない
	 *
	 * 設問の番号（`:nth-child` など）では狙わない。設問も選択肢も管理画面から増減し
	 * うるためである（番号の数字は選択肢の並び順から出力側が数える）。4 つが 1 行に
	 * 収まるのに要る幅は 45×4 + 間隔 12×3 = 216px で、375px の画面では余裕がある。
	 * 選択肢が 5 つ以上に増えたときは折り返して 2 行になる（あふれて横スクロールに
	 * ならないよう、幅の固定は器へ持たせない）.
	 */
	.pa-form .pa-question__choices {
		padding: 12px;

		/*
		 * 移行元のスマートフォン版は設問の帯に地の色を持たない（上記の実測。
		 * パソコン版だけが灰色とピンクの塗り分けを持つ）。パソコン幅の
		 * `background: #f5f5f5` をここで戻す.
		 */
		background: transparent;
		text-align: center;
	}

	.pa-form .pa-question__choices .pa-radio {
		display: inline-block;

		/*
		 * 外形の寸法で書いていることを、テーマ側の一括指定に頼らず明示する
		 * （テーマの `*` への指定が将来変わっても、この押しボタンの外形は動かない）.
		 */
		box-sizing: border-box;
		width: 45px;
		height: 45px;
		padding: 15px 0 0;
		margin: 0 6px;
		background-color: #888888;
		color: #fff;
		font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		font-size: 15px;
		line-height: 100%;
		text-align: center;
		cursor: pointer;
	}

	/* 選んだ選択肢は赤くなる（移行元の `num_on.gif` の色）. */
	.pa-form .pa-question__choices .pa-radio:has(input[type="radio"]:checked) {
		background-color: #f10000;
	}

	/*
	 * ラジオボタン本体と選択肢の文言を画面から外す。
	 *
	 * **`display: none` は使わない。** 2 つの理由がある。
	 *
	 * ひとつは読み上げである。文言を `display: none` にすると読み上げからも消え、
	 * 「1」「2」だけが読まれて意味が伝わらなくなる。画面外へ逃がす形なら、画面には
	 * 出ないまま読み上げには残る（`.pa-visually-hidden` と同じ手法・同じ宣言）。
	 *
	 * もうひとつは送信である。移行元はラジオ本体を `display: none` で消しているが、
	 * 移行元のフォームは `novalidate` を付けて自前の入力チェックへ寄せている。移行先は
	 * ブラウザの入力チェックを使うため、**必須のラジオを `display: none` にすると
	 * 未選択のときにブラウザが焦点を当てられず、送信が黙って止まる**（利用者には
	 * 何も伝わらない）。性別の押しボタンで同じ行き止まりを避けた判断と同じである
	 * （前方の `.pa-switch` の説明を参照）.
	 */
	.pa-form .pa-question__choices .pa-radio input[type="radio"],
	.pa-form .pa-question__choices .pa-radio__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* 番号を出す（パソコン幅では消してある）. */
	.pa-form .pa-question__choices .pa-radio__number {
		display: inline;
	}

	/*
	 * 焦点の位置を見せる。ラジオ本体を画面外へ逃がすと本体の焦点の枠も画面外へ出る
	 * ため、押しボタンの側に枠を出す。指で操作するときは出ない（`:focus-visible`）。
	 * 移行元はラジオ本体を消していて焦点の枠を持たないが、キーボードだけで操作する
	 * 利用者が今どこに居るのか分からなくなるのを避ける.
	 */
	.pa-form .pa-question__choices .pa-radio:has(input[type="radio"]:focus-visible) {
		outline: 2px solid #f10000;
		outline-offset: 2px;
	}

	/*
	 * 設問の見出しの、狭い画面での大きさと色（Bug #2126）。
	 *
	 * 婚活 EQ 診断は、移行元がスマートフォン専用のページ（`/sp/form/eq/`）を持つ。
	 * そのページは設問の見出しをパソコン版と別の書式で組む。
	 *
	 * 🚨 **「唯一のフォームである」という以前の書き方は事実と違った**（2026-09-20・
	 * Task #8077 で訂正）。移行元は 10 種すべてに `sp_` を前に付けた型紙を持つ
	 * （`form/view/sp_contact.php` など）。パソコンの名乗り（UA）で `/sp/…` を取ると
	 * 型紙の先頭の `pc_redirect()` が黙ってパソコン版へ転送するため、
	 * 「携帯版が無い」と読めてしまう.
	 *
	 * 正本は `legacy/www.p-a.jp/public/sp/css/style.css` の 2931〜2944 行
	 * （`#analysis .box_faq dl.analysis dt` が 14px と `#f10000`、同 `dd` が 14px）で、
	 * 375px の実測とも一致する（`_cat-top-audit/work/form-verify/data/legacy-eq-sp.json`
	 * の `questionTypography`・2026-08-26 採取）。
	 *
	 * 移行元は番号（`dt`）と本文（`dd`）を別の要素へ分けるが、移行先は 1 つの見出し
	 * （`dt.pa-question__title`）に番号の `span` を入れる組み方である。大きさは見出しへ
	 * 与えれば番号の `span` へ受け継がれるので、指定は 1 つで足りる。**高さは書かない。**
	 * 設問の本文が長くなっても折り返して収まるようにするためである。
	 *
	 * 他の 6 種にスマートフォン専用のページは無いので、この節は
	 * 見た目の土台 `[data-pa-form-look="eq"]` で閉じる（class を足して詳細度を上げる形は採らない。
	 * 上げると後ろの規則に勝って他のフォームの値が動く。下の Issue #1837 の節の説明を
	 * 参照）。設問の番号（`:nth-child` など）でも狙わない。設問は管理画面から増減しうる.
	 *
	 * 太さは幅で変わらない（移行元はどちらの幅でも `400`）ので、ここには置かず、
	 * 幅の区分の外にある `.pa-form .pa-question__title` が受け持つ。
	 * 選択肢の文言の書式（14px・`400`）はここでは動かさない（選択肢の器の大きさは、
	 * 下の Bug #2171 の節の器の規則が Bug #8616 で 13px にした）。
	 *
	 * **この見出しには、すぐ下の Bug #2171 の節にもう 1 つ規則がある**（幅・左の余白・
	 * 行の高さ）。書式と組み方で説明を分けたいため 2 つに分かれている。片方だけを
	 * 直すと食い違うので、見出しを触るときは両方を見ること.
	 */
	.pa-form[data-pa-form-look="eq"] .pa-question__title {
		font-size: 14px;

		/*
		 * 字間は移行元の携帯版と同じ `normal` にする（Bug #8616）。幅の区分の外の
		 * `.pa-form .pa-question__title` が持つ `0.05em` は、移行元のパソコン版
		 * （`page_inquiry.css` の `#analysis dt`）の値である。携帯版の本文（`dl.analysis dd`）
		 * と番号（`dt`）は字間を持たない。`0.05em` を受け継ぐと 14px で 1 字 0.7px 広がり、
		 * 13 字の Q10 で本文の幅が 9.1px 長くなっていた（移行元 182px・dev 191.11px）.
		 */
		letter-spacing: normal;
	}

	.pa-form[data-pa-form-look="eq"] .pa-question__no {
		color: #f10000;
	}

	/* ----------------------------------------------------------------------
	 * 設問 1 行の組み方（Bug #2171）
	 *
	 * ## 移行元はどう組んでいるか
	 *
	 * 正本は `legacy/www.p-a.jp/public/sp/css/style.css` の 2920〜2949 行
	 * （`#analysis .box_faq` 配下）である。移行元のスマートフォン専用ページは、
	 * 設問 1 問を次の 3 段で組む。
	 *
	 *   1. 器（`.box_faq`）が画面の幅いっぱいに広がり、左右に `6.25%` の内余白を持つ。
	 *      内側の幅は画面の幅の 87.5%（375px のとき 328.13px）になる
	 *   2. 番号（`dt`）を左へ、本文（`dd`）を右へ回り込ませ、幅を内側の
	 *      12.5% / 87.5% に分ける（375px のとき 41.02px / 287.11px）
	 *   3. 選択肢の器（`ul.list_faq`）は定義リストの**外**にあり、内側の幅
	 *      いっぱい（328.13px）に広がる。内余白も外余白も持たない
	 *
	 * 375px の実測（2026-08-26 採取）: 番号 41.02px・左 23.44px / 本文 287.11px・
	 * 左 64.45px / 選択肢の器 328.13px・左 23.44px・高さ 45px / 設問どうしの縦の
	 * 間隔 132px。
	 *
	 * **移行元のパソコン版は番号を本文の先頭に置く別の組み方で、移行先の現状と既に
	 * 一致している。** だからここは狭い画面だけを直す。
	 *
	 * ## 移行先はどう寄せるか
	 *
	 * 移行先の HTML は、幅ごとの見出しを 2 つ持つ（`PA_Forms_Embed::render_question()`
	 * の説明を参照）。ここで**狭い画面用の見出しに切り替え**、次のように寄せる。
	 *
	 *   - パソコン幅用の見出し（`.pa-question__head--wide`）を隠し、狭い画面用
	 *     （`--narrow`）を出す
	 *   - 定義リスト（`dl.pa-question`）を移行元の器の内側と同じ幅にする。この節の
	 *     後ろにある Issue #1837 の節が説明している `87.5vw` の約束を当て、はみ出しは
	 *     左の負の余白で左右へ等しく振り分ける（案内文の器 `.pa-eq-intro__keypad-text`
	 *     と同じ書き方。負の余白で振り分ける理由もそちらの説明にある）
	 *   - 見出し（`dt`）を右の列にする。幅は定義リストの 87.5%、左の余白は 12.5%
	 *   - 番号（`.pa-question__prefix`）を左へ回り込ませ、幅を `87.5vw` の 12.5% に
	 *     する。左の余白に同じ幅の負の値を置くと、見出しの左端のさらに左、つまり
	 *     移行元と同じ位置（画面の左端から 6.25vw の所）へ出る。回り込みの右端が
	 *     見出しの左端とちょうど重なるので、本文の行は番号を避けずに済む
	 *   - 選択肢の器（`dd`）は内余白と外余白を落として定義リストの幅いっぱいにし、
	 *     回り込みを解除する
	 *
	 * 回り込み（`float`）を選んだのは、番号が 1 行に収まらないほど長くなったときに、
	 * `clear` の効果で選択肢の器が下へ押し出されて重ならないためである。切り離す形
	 * （`position: absolute`）だと、あふれた番号が選択肢の器に重なる。
	 *
	 * ## 行の高さも移行元に合わせる
	 *
	 * 設問どうしの縦の間隔（移行元 132px）は、見出しの高さの積み上げで決まる。
	 * 移行元の見出しは 14px の文字を行の高さ 21px で組む（`line-height` の指定を
	 * 持たず、実測が 21px）。移行先はテーマの本文の行の高さ 25.2px を受け継いで
	 * いたため、2 行の設問で 8.4px 高くなっていた。**行の高さを移行元と同じ 21px
	 * （14px の 150%）にする。** 割合で書くので、文字の大きさが変わっても比率は保つ。
	 * **高さそのものは書かない。** 設問の本文が長くなったら折り返して伸びる。
	 *
	 * 積み上げの内訳（移行元・375px）: 見出し 42px（2 行）+ 見出しの下 15px +
	 * 選択肢の器 45px + 設問の下 30px = 132px。移行元の 30px は器の下の内余白
	 * （`.box_faq` の `padding-bottom`）だが、移行先には器に当たる要素が無いので
	 * 定義リストの下の外余白で置く。選択肢の器の下の外余白を 0 にしてあるので、
	 * この 30px がそのまま設問と設問のあいだになる。
	 *
	 * ## 中身が変わっても崩れない
	 *
	 * 設問の番号（`:nth-child` など）では狙わない。設問は管理画面から増減しうる。
	 * 番号が 2 桁（`Q10.`）でも左の列に 1 行で収まる（375px の実測で確かめた。移行元も
	 * 20 問あるので 2 桁は実在する）。幅は固定の px で書かないので、375px 以外の画面でも
	 * 移行元と同じ比率になる.
	 * -------------------------------------------------------------------- */

	.pa-form[data-pa-form-look="eq"] .pa-question {
		width: 87.5vw;
		margin: 0 0 30px calc( ( 100% - 87.5vw ) / 2 );
	}

	/*
	 * **この見出しには、すぐ上の Bug #2126 の節にもう 1 つ規則がある**（文字の大きさ）。
	 * 片方だけを直すと食い違うので、見出しを触るときは両方を見ること.
	 */
	.pa-form[data-pa-form-look="eq"] .pa-question__title {
		width: 87.5%;
		margin-left: 12.5%;
		line-height: 150%;
	}

	/* 見出しを狭い画面用に入れ替える（前方の `--narrow` の説明を参照）. */
	.pa-form[data-pa-form-look="eq"] .pa-question__head--wide {
		display: none;
	}

	.pa-form[data-pa-form-look="eq"] .pa-question__head--narrow {
		display: block;
	}

	/*
	 * 番号の列。色は上の `.pa-question__no` と同じ赤を、句点まで含めて当てる。移行元の
	 * スマートフォン版は番号の列（`dt`）ごと赤にしており、句点も赤である
	 * （パソコン版は句点を赤にしないため、この指定は狭い画面だけに置く）.
	 */
	.pa-form[data-pa-form-look="eq"] .pa-question__prefix {
		float: left;
		width: calc( 87.5vw * 0.125 );
		margin-left: calc( -87.5vw * 0.125 );
		color: #f10000;
	}

	.pa-form[data-pa-form-look="eq"] .pa-question__choices {
		clear: both;
		padding: 0;
		margin: 0;

		/*
		 * 選択肢の器の字の大きさは、移行元の `ul.list_faq` と同じ 13px にする（Bug #8616）。
		 * 移行元の器は大きさの指定を持たず、携帯版の本文の 13px を受け継ぐ。押しボタンの
		 * 文字（15px）は `.pa-radio` の規則が別に与えるので、この指定では動かない.
		 */
		font-size: 13px;
	}

	/*
	 * 同意欄と送信ボタンの帯を縦に積む（Issue #1771）。
	 *
	 * 🚨 **2026-09-20 に注記を訂正した（Task #8077）。**ここには以前
	 * 「スマートフォン用のミラーも同じ `page_inquiry.css` を読み、帯は 396px 固定の
	 * まま縮小表示になる」と書いてあったが、**事実と違う**。移行元の携帯版は
	 * `form/view/sp_contact.php` で、`sp/css/{basic,common,style,form_footer}.css` を
	 * 読む（`page_inquiry.css` は読まない）。**パソコンの名乗り（UA）で `/sp/…` を
	 * 取ると型紙の先頭の `pc_redirect()` が黙ってパソコン版へ転送するため、
	 * その転送に当たった読みだったと思われる。**同じ節にあった「婚活 EQ 診断つき
	 * 資料請求だけが移行元のスマートフォン専用のページを持つ唯一のフォームである」
	 * も同じ理由で事実と違い、移行元は 10 種すべてに `sp_` の型紙を持つ.
	 *
	 * ただし**帯（同意欄 ＋ 送信ボタン）の組み方はこのまま残す**。移行元の携帯版は
	 * `table.agree_box` で横に並べる作りで、dev は縦に積む。この差は Issue #1771 の
	 * 判断として記録済みで、Task #8077 では扱わない.
	 */
	.pa-form .pa-form-consent {
		flex-direction: column;
		width: 100%;
	}

	.pa-form .pa-form-consent__agree {
		width: 100%;
		height: 60px;
	}

	.pa-form .pa-form-consent__submit {
		width: 100%;
		padding-left: 0;
	}

	/*
	 * 🚨 **同意文の下の空きは、携帯幅では内余白 35px ではなく外余白 20px である**
	 * （Task #8053）。パソコン幅の 35px は移行元の `#reservation .form_text02`
	 * （`page_inquiry.css`）の値で、移行元の携帯版はこの段落に `<p class="mb20">` を
	 * 使い `sp/css/style.css` の `.mb20 { margin-bottom: 20px }` だけを持つ。
	 * ここで打ち消さないと、パソコン幅の 35px が携帯幅にも効いて塊が 35px 高くなる
	 * （2026-09-20 13:10 の実測で確かめた）.
	 */
	.pa-form .pa-consent-intro {
		margin: 0 0 20px;
		padding: 0;
	}

	/* ----------------------------------------------------------------------
	 * 婚活 EQ 診断つき資料請求だけの、狭い画面での欄の寸法（Issue #1837）
	 *
	 * このフォームは、移行元がスマートフォン専用のページを持つ
	 * （携帯の UA で `https://www.p-a.jp/form/eq/` を開くと `/sp/form/eq/` へ
	 * 転送される）。移行元のスマートフォン版はパソコン版と別の寸法で作られており、
	 * 幅の正本は `legacy/www.p-a.jp/public/sp/css/style.css` の 1616-1740 行である。
	 * この節は `[data-pa-form="eq"]` で 1 種に閉じる（class を足して詳細度を上げる形は
	 * 採らない。上げると後ろの規則に勝って他のフォームの値が動くためである。
	 * 実例は上の `.pa-form--dl .pa-cell-field` の説明を参照）.
	 *
	 * 🚨 **「他の 6 種にスマートフォン専用のページは無い」という以前の書き方は
	 * 事実と違った**（2026-09-20・Task #8077 で訂正）。移行元は 10 種すべてに
	 * `sp_` を前に付けた型紙を持ち、婚活 EQ 診断つき資料請求の器が `#analysis` で
	 * ほかと違うだけである。**この節を `eq` に閉じること自体は正しい**（移行元の
	 * 組みが 10 種で同じではないため）.
	 *
	 * 幅の土台は `87.5vw` である。移行元は定義リストの説明部分（`dd`）に
	 * `padding: 10px 6.25%` を置き、欄はその内側の 87.5% を占める。移行元の
	 * `dd` は画面の幅いっぱいに広がるため、この 87.5% は画面の幅に対する割合に
	 * なる。区分の名前は 375px で実測した移行元の値（`sp-328` なら 328px）で、
	 * 指定は割合のまま置く。移行元が割合で書いているので、375px 以外の幅でも
	 * 移行元と同じ比率になる.
	 *
	 * 移行先の器はページの左右余白（`--pa-inner-gutter` の 15px）を差し引いた
	 * 幅なので、器に対する割合（`width: 100%`）では移行元の値にならない。だから
	 * 画面の幅を基準にする `vw` を使う。欄が器から 16.9px はみ出すが、はみ出す
	 * 先はページの左右余白の中で、画面の幅が 225px を下回らないかぎり横方向の
	 * スクロールは出ない（計算: 15 + 0.875 × 画面の幅 ≦ 画面の幅）.
	 * -------------------------------------------------------------------- */

	/* 都道府県・市区郡・町名番地・建物名・コメント。移行元 328.13px（87.5%）. */
	.pa-form[data-pa-form="eq"] .pa-control.pa-control--sp-328 {
		width: 87.5vw;
	}

	/* 姓・名・セイ・メイ。移行元 152.92px（欄の置き場の 46.607%）. */
	.pa-form[data-pa-form="eq"] .pa-control.pa-control--sp-153 {
		width: calc(87.5vw * 0.46607);
	}

	/* 生年月日（年）。移行元 131.25px（欄の置き場の 40%）. */
	.pa-form[data-pa-form="eq"] .pa-control.pa-control--sp-131 {
		width: calc(87.5vw * 0.4);
	}

	/* 生年月日（月・日）。移行元 82.95px（欄の置き場の 25.285%）. */
	.pa-form[data-pa-form="eq"] .pa-control.pa-control--sp-83 {
		width: calc(87.5vw * 0.25285);
	}

	/*
	 * 一行入力欄・複数行入力欄の内余白と行の高さ。移行元は内余白 10px で、行の
	 * 高さを指定していない（`normal`）。パソコン幅では 16px × 1.4 を当てている
	 * （Issue #1808）ので、ここで `normal` へ戻す。移行元と枠線の太さ（2px）も
	 * 文字サイズ（16px）も同じなので、この 2 つで高さが移行元の 42px に一致する
	 * （中身 18 + 内余白 20 + 枠線 4）。高さを直に書く必要は無い.
	 *
	 * 電話番号・メールアドレス・郵便番号も一行入力欄で、移行元は同じ内余白 10px・
	 * 高さ 42px である（幅だけは移行元が複数の欄に分けており突き合わせない）.
	 */
	.pa-form[data-pa-form="eq"] input.pa-control,
	.pa-form[data-pa-form="eq"] textarea.pa-control {
		padding: 10px;
		line-height: normal;
	}

	/*
	 * コメントの複数行入力欄。移行元は `rows="1"` の 1 行分で高さ 40px である
	 * （中身 18 + 内余白 20 + 枠線 2）。パソコン幅の 2 行分（56.8px）を
	 * `min-height` で置いているため、こちらも `min-height` で打ち消す
	 * （`height` だけでは `min-height` に負ける）.
	 */
	.pa-form[data-pa-form="eq"] textarea.pa-control {
		min-height: 40px;
		height: 40px;
	}

	/*
	 * 選択欄の内余白。移行元は 10px（生年月日だけ左右 5px）で、高さは
	 * 都道府県・月・日が 39px、年が 38px である。
	 *
	 * 移行元は選択欄の見た目をブラウザ既定から外している（`-webkit-appearance:
	 * none` にして矢印を背景画像で描く）ため、中身の高さが 17px になる。以前は
	 * 移行先だけブラウザ既定の矢印で中身が 19px あり、上下の内余白を 9px にして
	 * 高さを合わせていた。Bug #10019 で矢印を移行元と同じく自前で描く形
	 * （下の「選択欄」の規則に `eq` を足した）にしたので、移行元と同じ 10px に戻す.
	 * 全体の内余白 10px は下の「選択欄」の規則が持つ.
	 */

	/* 生年月日の選択欄だけ、移行元は左右の内余白が 5px（`.birth_y` / `.birth_m`）. */
	.pa-form[data-pa-form="eq"] .pa-control.pa-control--sp-131,
	.pa-form[data-pa-form="eq"] .pa-control.pa-control--sp-83 {
		padding: 10px 5px;
	}

	/*
	 * 生年月日の年・月・日を 1 行に収める。
	 *
	 * 移行元のスマートフォン版は 3 つの選択欄を 1 行に並べる（375px の実物で確認。
	 * 単位の「年・月・日」は選択欄の外に置かず、選択欄の中の初期表示で見せている）。
	 * 移行先は単位を選択欄の外に別の要素として持つため、幅を移行元に合わせると
	 * 選択欄 3 つ + 単位 3 つ + 間隔の合計が行の幅を超え、「日」だけが次の段へ
	 * 送られていた（375px で必要幅 405px に対し行の幅 375px）。
	 *
	 * 🚨 **単位の字は携帯幅で隠す**（Bug #10007・事業部の指摘 NEW-20261009-07・統括の判断で案 1）。以前は単位を残して
	 * 間隔だけを詰めた（選択欄の間 6px・選択欄と単位の間 2px）が、行の幅を 375px と置いた計算だった。器はページの
	 * 左右余白（15px ずつ）を引いた幅（375 幅で 345px）なので、詰めた後も 131＋2＋16・83＋2＋16・83＋2＋16 と
	 * 間 6×2 で 363px 要り、「日」が次の段へ落ちていた。選択欄の幅は画面の幅の比率（87.5vw）で伸びるので、
	 * 390・430 幅でも落ちる。移行元は単位を選択欄の外に置かず、月と日は選択欄の最初の字「月」「日」で見せる
	 * （年の最初の字は空白）。dev も携帯幅ではその形にする。最初の字は表示の上書き `sp_placeholder`
	 * （`class-pa-forms-definitions.php` の `eq_display()`）を、画面側の `setupSpLabels()` が当てる。
	 * 隠した後の必要幅は 131＋83＋83 と間 6×2 で 309px で、345px に収まる.
	 *
	 * 選択欄どうしの間隔は移行元に合わせてある。移行元は選択欄に `margin-right: 3px` を
	 * 与えるだけで（`sp/css/style.css` の `.birth_y` / `.birth_m` / `.birth_d`）、
	 * 実物の選択欄どうしの間隔は約 6px である.
	 */
	.pa-form[data-pa-form="eq"] .pa-cell:has(.pa-control--sp-131) {
		column-gap: 6px;
	}

	.pa-form[data-pa-form="eq"] .pa-cell:has(.pa-control--sp-131) .pa-cell-field {
		column-gap: 0;
	}

	.pa-form[data-pa-form="eq"] .pa-cell:has(.pa-control--sp-131) .pa-unit {
		display: none;
	}

	/*
	 * 行の順（Bug #10006・事業部の指摘 NEW-20261009-06）。移行元のスマホ版 `form/view/sp_eq.php` は、性別と生年月日を
	 * お名前（漢字）より前に置く（パソコン版は後ろ）。DOM の順は画面側の JavaScript（`setupSpFirstRows()`・
	 * `PA_Forms_Embed::SP_FIRST_ROWS`）が携帯幅のときだけ入れ替える（キーボードと読み上げの順も表示順にそろう）。
	 * この `order` は、JavaScript が動かないときの見た目の控えである（ご紹介・冊子の広告フォームと同じ組み・Bug #9374・#9646）.
	 */
	.pa-form[data-pa-form="eq"] .pa-form-table tbody {
		display: flex;
		flex-direction: column;
	}

	.pa-form[data-pa-form="eq"] .pa-form-table tr:has(input[name="gender"]) {
		order: -2;
	}

	.pa-form[data-pa-form="eq"] .pa-form-table tr:has(select[name="birth-year"]) {
		order: -1;
	}

	/*
	 * アンケートの格子（Bug #1985）。移行元のスマートフォン版は 4 列を保たない
	 * （375px の実物で確認。`.enq_ul-1 li` は `width:25%` のままだが、行の幅が
	 * 狭く選択肢の文言が折り返す）。折り返しても読めるよう、2 列にして詰まりを
	 * 緩める.
	 */
	.pa-form--mixed .pa-radio-wrap--grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	/*
	 * ページ上部の案内（Bug #1985・Bug #2118）。
	 *
	 * 移行元のスマートフォン専用ページは、この位置に「下記の設問について最も当ては
	 * まる数字をお選びください。」と 1〜4 の意味の対応表だけを、薄い茶色の帯に入れて
	 * 置く（`legacy/www.p-a.jp/public/sp/css/style.css` の 2907〜2917 行
	 * `#analysis .text_check`。地の色 `#F7F2EC`・文字の色 `#a4762b`・中央揃え・
	 * 14px・行の高さ 135%・下の余白 20px・内余白 `14px 6.25%`）。ここではその帯を
	 * 作り直す。
	 *
	 * **テンキーの案内文とテンキーの絵は狭い画面では出さない。** 狭い画面の端末に
	 * キーボードは無く、移行元のスマートフォン専用ページも出していない（絵
	 * `keypad.gif` に当たるものも無い）。役割の別な文がパソコン幅に見えているので、
	 * ここは `display: none` でよい（読み上げから落ちる中身が無い）。
	 *
	 * **1〜4 の対応表はどちらの幅でも出す。** 移行元もどちらの幅でも出している
	 * （スマートフォン版は絵で出すが、絵の中身は同じ対応表である）。番号ボタンだけに
	 * なる狭い画面では、この対応表が「1」の意味を伝える唯一の説明になる。
	 *
	 * 縦積み（`flex-direction: column`）は残す。移行元のスマートフォン版も案内文と
	 * 対応表を縦に積む（`sp/css/page_inquiry.css` の `#analysis .check_box` 配下）.
	 */
	.pa-form--mixed .pa-eq-intro__keypad {
		flex-direction: column;
		margin: 0 0 20px;
		padding: 14px 6.25%;
		border-top: 0;
		border-bottom: 0;
		background: #f7f2ec;
		color: #a4762b;
		text-align: center;
	}

	.pa-form--mixed .pa-eq-intro__keypad-lead,
	.pa-form--mixed .pa-eq-intro__keypad-image {
		display: none;
	}

	/*
	 * 狭い画面だけの案内（パソコン幅では消してある）。
	 *
	 * 書体は明朝にする。移行元はこの 1 文だけに明朝の指定（`sp/css/common.css` の
	 * `.serif`）を付けており、375px の実測でも `游明朝` から始まる書体で描かれていた
	 * （`_cat-top-audit/work/impl-2118/data/legacy-sp.json` の `intro.note.fontFamily`）。
	 * 下の余白 10px も移行元と同じ（`sp_eq.php` の `class="mb10 serif"` の `.mb10`）.
	 */
	.pa-form--mixed .pa-eq-intro__keypad-note {
		display: block;
		margin: 0 0 10px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 14px;
		line-height: 135%;
	}

	/*
	 * 縦並びのあいだは `flex: 1 1 480px` の 480px が幅ではなく高さの基準になる
	 * （Codex の指摘・PR #2022 のレビュー）。親の高さが自動のままだと、この
	 * 480px 近くまで領域が伸び、案内文と対応表の間に大きな空白が入る。
	 * 幅の基準として書いた値なので、縦並びでは `auto` に戻す.
	 *
	 * 幅には、この節の冒頭で説明した `87.5vw` の約束を当てる。移行元の帯
	 * （`.text_check`）は画面の幅いっぱいに広がり、内余白 `6.25%` を左右から
	 * 差し引いた 87.5%（375px のとき 328.13px）が案内文と対応表の器になる。
	 * 移行先の帯はページの左右余白（`--pa-inner-gutter` の 15px）を差し引いた
	 * 幅なので、器に対する割合（`width: 100%`）では 328.13px にならず、
	 * 対応表の 3 番目の項目（「あまりあてはまらない」）が移行元と違う位置で
	 * 折り返す（実測 300.13px）。だから画面の幅を基準にする `vw` で置く.
	 *
	 * はみ出しは左の負の余白で左右へ等しく振り分ける。`100%` は器（帯の内側）の幅
	 * なので、`( 100% - 87.5vw ) / 2` がはみ出しの半分になる。左へその分ずらせば、
	 * 左右へ均等にはみ出し、移行元と同じ位置（画面の左端から 6.25vw の所）に
	 * 収まる。375px の実測で 23.44px〜351.57px となり、移行元と一致した.
	 *
	 * `align-self: center` では効かない。帯は `flex-wrap: wrap` の付いた縦並びで、
	 * 中身が 1 列に収まるあいだは列の幅がこの器自身の幅と同じになる。器を列の中で
	 * 中央に寄せても動く余地が無く、右だけへ 28px はみ出したままになる（実測で確認）.
	 */
	.pa-form--mixed .pa-eq-intro__keypad-text {
		flex-basis: auto;
		width: 87.5vw;
		margin-left: calc( ( 100% - 87.5vw ) / 2 );
		padding-top: 0;
	}

	/*
	 * 1〜4 の対応表を、移行元の絵と同じ並びと同じ色にする（Bug #2118）。
	 *
	 * 移行元は対応表を 1 枚の絵（`sp/images/inquiry/analysis/img_select_num.gif`）で
	 * 描く。**絵は取り込まない**（既にある文字を使い回す）ので、絵の中身を測って
	 * 同じ見た目を組み立てる。測った値（元の絵は 560×131 で、描かれる幅は 328.13px。
	 * 倍率 0.586 で換算した）:
	 *
	 *   - 並びは 2 行 2 列。長い項目（「まったくあてはまらない」）は列の中で折り返す
	 *   - 番号は一色の `#888888`（押しボタンと同じ色）の四角に白抜き。四角は 30.5px 四方
	 *   - 番号と文言のあいだは 5.2px、行と行のあいだは 14.6px
	 *   - 文言の色は黒（絵の中で最も多い文字の色が `rgb(0, 0, 0)`）。文字の幅は
	 *     11.7〜12.9px なので、文字の大きさは 12px 相当
	 *   - 番号の数字の高さは 11.1px で、押しボタンの数字（15px の明朝）とほぼ同じ
	 *
	 * 2 列の幅は等分ではなく、移行元の絵と同じ割合にする。絵の中で 2 列目の四角の
	 * 左端は横 560 のうち 309 の位置にあるので、1 列目が 55.18%・2 列目が 44.82%
	 * である（375px のとき 181.05px と 147.08px）。列のあいだの隙間は絵に無いので
	 * `column-gap` は 0 にする（割合の合計が 100% なので、隙間を足すとあふれる）。
	 *
	 * 等分（`1fr` を 2 つ）にすると 2 列目が 164px まで広がり、4 番目の項目
	 * （「まったくあてはまらない」）が「まったくあてはまらな」と「い」に割れて、
	 * 1 文字だけが次の行に残る。移行元の割合に合わせると 2 列目が 147.08px に
	 * なり、移行元と同じ「1 行目に 3 番目の項目が収まり、4 番目の項目だけが
	 * 2 行になる」形に戻る.
	 *
	 * 幅は px で固定せず割合で置くので、文言が長くなっても列の中で折り返り、
	 * あふれて横スクロールにはならない（移行元の絵も同じ項目で折り返している）.
	 */
	.pa-form--mixed .pa-eq-intro__keypad-legend {
		display: grid;
		grid-template-columns: 55.18% 44.82%;
		gap: 15px 0;
		color: #000;
		font-size: 12px;
		line-height: 135%;
		text-align: left;
	}

	.pa-form--mixed .pa-eq-intro__keypad-legend li {
		gap: 5px;
	}

	.pa-form--mixed .pa-eq-intro__keypad-legend span {
		flex: none;
		width: 30px;
		height: 30px;
		background-color: #888888;
		color: #fff;
		font-size: 15px;
		line-height: 30px;
		text-align: center;
	}

	/*
	 * 携帯幅の案内の区画を、移行元のスマートフォン版と同じ形にする（Bug #9397・W191・D598 のケース 1）。
	 *
	 * 移行元（`form/view/sp_eq.php` の 139 行 `div.text_check`・`sp/css/style.css` の `#analysis .text_check`）は、区画が画面の幅
	 * いっぱい（左 0・幅 375）で、内余白は 14px と画面の幅の 6.25%（23.44px）、中に案内の字と対応表の絵（`img_select_num.gif`・
	 * 328.1×76.8）を置く（2026-10-05 の実測・`pa-verify-assets/A/9397-見出しと案内の実測-1005/`）。区画の高さ 152.6px は、
	 * 内余白 14 ＋ 字 37.8 ＋ 字の下の余白 10 ＋ 絵 76.8 ＋ 内余白 14 で、絵の器に余分な高さは無い.
	 *
	 * dev の区画はページの左右の余白（16px）の内側にあった（左 16・幅 343）。左右へ 16px 広げ、内余白は画面の幅に対する割合
	 * （`6.25vw`）で置く。`%` にすると親（343px）に対する割合になり、21.44px になる.
	 *
	 * 対応表は文字（上の Bug #2118 の組み）を隠し、移行元の絵を出す。絵の alt に対応表の字を書き起こしてある.
	 *
	 * 当てるのは婚活 EQ 診断（`data-pa-form="eq"`）だけである。同じ案内の区画を出す LP 系（`eq_lp` 系・`eq_mens_lp` 系など）は、
	 * 移行元のスマートフォン版の形を測っていない。範囲を絞らないと `eq_mens_lp` の 375px で区画の高さが 156.8px から 75.8px へ
	 * 変わることを、2026-10-05 の下見の陰性対照で測った（`pa-verify-assets/A/9397-下見-1005/`）.
	 */
	.pa-form--mixed[data-pa-form="eq"] .pa-eq-intro__keypad {
		margin: 0 -16px 20px;
		padding: 14px 6.25vw;
	}

	.pa-form--mixed[data-pa-form="eq"] .pa-eq-intro__keypad-legend {
		display: none;
	}

	.pa-form--mixed[data-pa-form="eq"] .pa-eq-intro__keypad-sp-image {
		display: block;
		margin: 0;
		line-height: 0;
	}

	.pa-form--mixed[data-pa-form="eq"] .pa-eq-intro__keypad-sp-image img {
		display: block;
		width: 100%;
		height: auto;
	}

	/*
	 * 進み具合の表示（Bug #1985）。移行元のスマートフォン版は固定幅
	 * （`sp/spiral/eq/css/style.css` の `.flow-list .list-item` が
	 * `width:227px` / `237px`）で、番号の丸を出さない（`display:none`）。
	 * 固定幅は画面の幅（375px を含む）によって欄からあふれる箇所があるため、
	 * 移行先は幅の考え方（パソコン版と同じ 52%/48%）を保ちつつ、番号の丸を
	 * 消す・高さを移行元の 40px に合わせる・文字を移行元と同じ 13px 中央
	 * 揃えにする、の 3 点だけを移行元へ合わせる.
	 */
	.pa-form--mixed .pa-eq-flow__step,
	.pa-form--table .pa-eq-flow__step {
		height: 40px;
		font-size: 13px;
		line-height: 1.2;
		text-align: center;
	}

	.pa-form--mixed .pa-eq-flow__num,
	.pa-form--table .pa-eq-flow__num {
		display: none;
	}

	/*
	 * 資料請求の広告フォーム 2 本の帯（Bug #9593）。移行元の携帯版（`sp_request_ad.php`・`sp_request_as.php` と
	 * `sp/spiral/request/css/style.css` の 255〜322 行）は、今の段の字を「必要事項を」「入力」の 2 行にし、段の幅を
	 * 婚活 EQ 診断と同じ `227px` / `237px` に置いて、器に収まるまで縮める（`flex-shrink` の既定の 1）.
	 * 幅 375 の移行元は器 355 で 166.8 / 174.2 になる（2026-10-07 の直す前の実測）。dev の器は 343 なので、
	 * 同じ値を置くと 161.0 / 168.0 になる。器の幅の差（12）は Bug #9593 のスコープ境界の対象外である.
	 * 婚活 EQ 診断（`.pa-form--mixed`）の帯は、この 2 本の識別子で絞るので動かない.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-eq-flow__br,
	.pa-form[data-pa-form="request_online"] .pa-eq-flow__br,
	.pa-form[data-pa-form="request_as"] .pa-eq-flow__br {
		display: inline;
	}

	.pa-form[data-pa-form="request_ad"] .pa-eq-flow__step,
	.pa-form[data-pa-form="request_online"] .pa-eq-flow__step,
	.pa-form[data-pa-form="request_as"] .pa-eq-flow__step {
		width: 227px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-eq-flow__step:last-child,
	.pa-form[data-pa-form="request_online"] .pa-eq-flow__step:last-child,
	.pa-form[data-pa-form="request_as"] .pa-eq-flow__step:last-child {
		width: 237px;
	}

	/* ----------------------------------------------------------------------
	 * 婚活 EQ 診断つき資料請求だけの、狭い画面での分割欄（Bug #2042）
	 *
	 * 郵便番号・電話番号・メールアドレスは、移行元のスマートフォン専用ページが
	 * パソコン版と別の幅を持つ（`legacy/www.p-a.jp/public/sp/css/style.css` の
	 * 1661-1671 行。`.code` 30% / `.tel` 25% / `.email` 45%）。土台は上の節と同じ
	 * 定義リストの説明部分（`dd`）の内側で、画面の幅の 87.5% にあたる。375px の
	 * 実測は 98.44px × 2 / 82.03px × 3 / 147.66px × 2 で、この割合と一致する
	 * （`_cat-top-audit/work/form-2042/data/legacy-sp.json`・2026-08-26 採取）.
	 *
	 * 幅の区分の名前（`pa-control--44` など）では区別できない。`--52` を郵便番号の
	 * 2 欄目と電話番号の 3 欄が共有しており、移行元のスマートフォン版ではこの 2 つの
	 * 幅が違うためである。そこで項目の名前の修飾（`pa-parts--zipcode` /
	 * `--phone` / `--email`。`class-pa-forms-embed.php` の `render_parts_control()`
	 * が出す）で分ける.
	 *
	 * ここだけは `[data-pa-form="eq"]` に修飾と `.pa-control` を重ねて詳細度を
	 * 上げる（0,4,0）。**他のフォームの値は動かない。** 打ち消す相手が下の
	 * 「メールアドレスの分割欄」の節（`.pa-form--mixed .pa-control.pa-control--260`
	 * = 0,3,0）で、このファイルの後方にあるため、同じ強さのままでは勝てない。
	 * 選び方の先頭が `[data-pa-form="eq"]` なので、当たる先は婚活 EQ 診断 1 種に
	 * 閉じたままである.
	 * -------------------------------------------------------------------- */

	/* 郵便番号の 2 欄。移行元 98.44px（欄の置き場の 30%）. */
	.pa-form[data-pa-form="eq"] .pa-parts--zipcode .pa-control {
		width: calc(87.5vw * 0.3);
	}

	/* 電話番号の 3 欄。移行元 82.03px（25%）. */
	.pa-form[data-pa-form="eq"] .pa-parts--phone .pa-control {
		width: calc(87.5vw * 0.25);
	}

	/* メールアドレスの 2 欄。移行元 147.66px（45%）. */
	.pa-form[data-pa-form="eq"] .pa-parts--email .pa-control {
		width: calc(87.5vw * 0.45);
	}

	/*
	 * 折り返しを解除して 1 行に戻す。下の「メールアドレスの分割欄」の節は、
	 * 260px × 2 が 375px に収まらない他の 3 種（お問い合わせ・法人からの
	 * 問い合わせ・来店予約）のための手当てだが、`.pa-form--mixed`（婚活 EQ 診断）
	 * にも当たってしまう。婚活 EQ 診断は上の割合で 147.66 × 2 + 記号 20px =
	 * 315.3px となり移行元の器（328.13px）に収まるので、この手当ては要らない。
	 * **他の 3 種の折り返しはそのまま残る**（この節は `[data-pa-form="eq"]` に
	 * 閉じているためである）.
	 */
	.pa-form[data-pa-form="eq"] .pa-parts {
		flex-wrap: nowrap;
	}

	.pa-form[data-pa-form="eq"] .pa-parts-unit--at {
		width: auto;
	}

	/*
	 * 欄と欄のあいだ。移行元のスマートフォン版は郵便番号 12.98px・電話番号
	 * 14.98px・メールアドレス 20.42px である（同じ生データ）。移行元は記号を素の
	 * 文字列として置いており、前後の空白の畳み込みで幅が決まる。ここでは記号を
	 * `span` にしてあるためその空白が付かない。フォントによる揺れを避けるため、
	 * 記号の幅そのものを間隔の値に合わせ、左右の外余白は 0 にする
	 * （パソコン幅の `.pa-parts-sep` は幅 16px + 外余白 10px ずつ）。全角の `＠` は
	 * 15px の文字送りなので、20px の器に収まる.
	 */
	.pa-form[data-pa-form="eq"] .pa-parts--zipcode .pa-parts-sep {
		width: 13px;
		margin: 0;
	}

	.pa-form[data-pa-form="eq"] .pa-parts--phone .pa-parts-sep {
		width: 15px;
		margin: 0;
	}

	.pa-form[data-pa-form="eq"] .pa-parts--email .pa-parts-sep {
		width: 20px;
		margin: 0;
	}

	/*
	 * 赤字の注記を入力欄の前の行へ送る（Bug #2042）。
	 *
	 * 移行元のスマートフォン版は、郵便番号の案内文「郵便番号を入れると、住所が
	 * 自動入力されます。」を欄の**上の行**に置く（`legacy/www.p-a.jp/public/form/
	 * view/sp_eq.php:573`）。パソコン版は欄の右側に続けて出す。移行先は画面の幅で
	 * 組み替える 1 つのテンプレートなので、HTML の並びはパソコン版のまま
	 * （欄 → 注記）残し、**見た目の順序だけ** `order` で入れ替える。読み上げの
	 * 順序は HTML の並びのままになる.
	 *
	 * 文字の大きさ 11px・下の余白 10px・行の高さ `normal` は移行元の実測値である
	 * （`_cat-top-audit/work/impl-2042/data/legacy-sp-styles.json`・2026-08-26 採取。
	 * 出どころは `sp/css/style.css` の `dd .text_red` と共通の `.mb10`）。下の余白を
	 * 2px と書くのは、囲み（`.pa-cell`）が行と行のあいだに 8px の隙間を持つため
	 * である（8 + 2 = 10）.
	 *
	 * 高さは指定しない。注記の文言が長くなっても `flex-basis: 100%` で行を占め、
	 * 折り返して収まる.
	 */
	.pa-form[data-pa-form="eq"] .pa-cell .pa-note.pa-note--alert {
		order: -1;
		flex-basis: 100%;
		margin: 0 0 2px;
		font-size: 11px;
		line-height: normal;
	}

	/* 携帯幅だけに出す注記（メールアドレスの「半角英数でご入力ください。」）. */
	.pa-form[data-pa-form="eq"] .pa-cell .pa-note.pa-note--sp {
		display: block;
	}

	/* ------------------------------------------------------------------
	 * 🚨 お問い合わせの入力の行を、移行元の携帯版の寸法にそろえる（Bug #7961）
	 * ------------------------------------------------------------------
	 *
	 * 移行元の携帯版（`form/view/sp_contact.php`）は行を `<dl><dt><dd>` で組む。
	 * dev は `<table><tr><th><td>` を携帯幅で `display: block` にして積む。
	 * **組みが違っても、行の高さは同じにできる。**実測（2026-09-20 09:26・幅 375）で
	 * 入力の行 11 本の合計が移行元 1,499.00 対 dev 1,388.59 と **−110.41** ずれていた。
	 *
	 * 1 行ずつ足し算で下ろした内訳（お問い合わせの `e-mail` の −60.81）:
	 *
	 *   見出しの器      45 対 46.41   →  −1.41
	 *   赤字の注記      27（17 + 下の余白 10）対 **dev は出していない**
	 *   一行入力欄 2 つ 42 対 36.39   →  +11.22
	 *   欄の器の内余白  20（上下 10）対 16（下だけ）→  +4
	 *   欄を包む段の行間 20 対 0
	 *   ------------------------------------------------ 合計 +60.81（実測と一致）
	 *
	 * 🚨 **婚活 EQ 診断と同じ直しである。**上の `eq` の節と値をそろえてある。
	 * まとめて 1 つの規則にしないのは、**フォームごとに移行元の値が違う**
	 * （赤字の注記の下の余白は婚活 EQ 診断が 2px、お問い合わせが 10px）ためである。
	 */

	/*
	 * 一行入力欄・複数行入力欄。移行元は内余白 10px・行の高さの指定なしで 42px
	 * （中身 18 + 内余白 20 + 枠線 4）。理由は上の婚活 EQ 診断の節に同じ.
	 *
	 * 社員紹介（Bug #8540）にも当てる。移行元の携帯版（`form/view/intro/sp_reservation_intro_02.php`）
	 * も同じ `sp/css/style.css` を読み、一行入力欄は 42px である（2026-09-26 の直す前の測定）.
	 */
	.pa-form[data-pa-form="toiawase"] input.pa-control,
	.pa-form[data-pa-form="toiawase"] textarea.pa-control,
	.pa-form[data-pa-form="reservation3"] input.pa-control,
	.pa-form[data-pa-form="event"] input.pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] input.pa-control,
	.pa-form[data-pa-form="reservation_intro"] input.pa-control,
	.pa-form[data-pa-form="request_lp"] input.pa-control,
	.pa-form[data-pa-form="request_intro"] input.pa-control,
	.pa-form[data-pa-form="request_tool_test"] input.pa-control,
	.pa-form[data-pa-form="request_tool_ad"] input.pa-control,
	.pa-form[data-pa-form="request_tool_as"] input.pa-control,
	.pa-form[data-pa-form="request_ad"] input.pa-control,
	.pa-form[data-pa-form="request_online"] input.pa-control,
	.pa-form[data-pa-form="request_as"] input.pa-control,
	.pa-form[data-pa-form="request_lp"] textarea.pa-control,
	.pa-form[data-pa-form="request_intro"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_test"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_as"] textarea.pa-control,
	.pa-form[data-pa-form="request_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_online"] textarea.pa-control,
	.pa-form[data-pa-form="request_as"] textarea.pa-control,
	.pa-form.pa-form--eq-lp-sp input.pa-control,
	.pa-form.pa-form--eq-lp-sp textarea.pa-control {
		padding: 10px;
		line-height: normal;
	}

	/*
	 * 選択欄（Bug #8399 で書き換えた）。移行元スマホ版の `sp/css/style.css` は、選択欄の
	 * すべてで `-webkit-appearance: none` にしてブラウザ既定の矢印を消し、背景の画像
	 * `images/inquiry/icon_select_arrow.gif` を右上に高さいっぱいで置く。`dd select` の
	 * 内余白は 10px である。件名と都道府県はどちらも欄の幅いっぱい（375px で 328.1px）で、
	 * dev は都道府県だけ `pa-control--166` の 166px だった（2026-09-25 12:53 の実測・記録
	 * `pa-verify-assets/A/8399-直す前-0925/`）。
	 *
	 * 以前は、移行元の中身の高さ 17px（矢印を自前で描くため）と既定の 19px の差を、上下の
	 * 内余白 9px で埋めて 39px にそろえていた。矢印を移行元と同じく自前で描く形にしたので、
	 * 内余白も移行元と同じ 10px に戻す。
	 *
	 * 画像は移行元の `public/sp/images/inquiry/icon_select_arrow.gif` の写し（md5 一致）.
	 * 🚨 幅の規則 `.pa-form--table .pa-control.pa-control--166`（class 3 つ）に勝つため、
	 * class 3 つ＋要素 1 つで書く.
	 *
	 * 社員紹介（Bug #8540）は、都道府県と生年月日の選択欄に当てる。紹介者の e-mail の
	 * `@` より後ろの選択欄は移行元に相手が無い（移行元は「＠tameny.jp」を字で置く）ので
	 * 当てない。生年月日の幅と内余白は、後ろの社員紹介の節で上書きする.
	 *
	 * 婚活 EQ 診断（Bug #10019）は、選択欄 4 つ（年・月・日・都道府県）のすべてに当てる。
	 * 🚨 `eq` だけ `:is()` で絞らない。絞ると詳細度が上がり、上の婚活 EQ 診断の節の
	 * 幅と内余白（`.pa-control--sp-131` など・class 4 つ）に勝って、生年月日の幅が崩れる.
	 */
	.pa-form[data-pa-form="eq"] select.pa-control,
	.pa-form[data-pa-form="toiawase"] select.pa-control,
	.pa-form[data-pa-form="reservation3"] select.pa-control:is([name="pref"], [name^="birth-"]),
	.pa-form[data-pa-form="event"] select.pa-control:is([name="pref"], [name^="birth-"]),
	.pa-form[data-pa-form="reservation_intro_02"] select.pa-control:is([name="pref"], [name^="birth-"]),
	.pa-form[data-pa-form="reservation_intro"] select.pa-control:is([name="pref"], [name^="birth-"]),
	.pa-form[data-pa-form="request_lp"] select.pa-control,
	.pa-form[data-pa-form="request_intro"] select.pa-control,
	.pa-form[data-pa-form="request_tool_test"] select.pa-control,
	.pa-form[data-pa-form="request_tool_ad"] select.pa-control,
	.pa-form[data-pa-form="request_tool_as"] select.pa-control,
	.pa-form[data-pa-form="request_ad"] select.pa-control,
	.pa-form[data-pa-form="request_online"] select.pa-control,
	.pa-form[data-pa-form="request_as"] select.pa-control,
	.pa-form.pa-form--eq-lp-sp select.pa-control {
		width: 100%;
		padding: 10px;
		border-radius: 0;
		-webkit-appearance: none;
		appearance: none;
		background-image: url("../images/inquiry/icon_select_arrow.gif");
		background-position: right top;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	/*
	 * 選択欄の器も幅いっぱいにする（Bug #8399）。携帯幅の共通の
	 * `.pa-form .pa-cell-field-select { flex-basis: auto }` が器を中身の幅まで縮めるため、
	 * 上の `width: 100%` だけでは都道府県が 150px になった（2026-09-25 12:57 の下見の実測）.
	 *
	 * 冊子の広告フォーム 2 本（Task #8668）は、社員紹介と同じく都道府県だけに当てる。生年月日の選択欄 3 つは
	 * 移行元と同じく 1 行に並べるので、器を幅いっぱいにしない（2026-09-28 の下見の 1 回目で、月と日が 1 行ずつを占め、
	 * 生年月日の行が移行元より 77 高かった）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell-field-select,
	.pa-form[data-pa-form="reservation3"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="event"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="request_lp"] .pa-cell-field-select,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field-select,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field-select,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="request_ad"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="request_online"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form[data-pa-form="request_as"] .pa-cell-field-select:has(> select[name="pref"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell-field-select:has(> select[name="pref"]) {
		flex-basis: 100%;
	}

	/*
	 * 見出しの器。移行元の `dt` は内余白 10px・字 15px・行の高さの指定なしで 45px.
	 * 上下の内余白は移行元と同じ 10px である。以前は下を 11px にして、中の札が
	 * 移行元より 4px 低いぶんを埋めていた。札を移行元の寸法にした（下の
	 * 「行の中の部品」の節・Bug #7961）ので、埋める理由が無くなった.
	 *
	 * 社員紹介（Bug #8540）の `dt` も同じ値である.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table th,
	.pa-form[data-pa-form="reservation3"] .pa-form-table th,
	.pa-form[data-pa-form="event"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table th,
	.pa-form[data-pa-form="request_lp"] .pa-form-table th,
	.pa-form[data-pa-form="request_intro"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_online"] .pa-form-table th,
	.pa-form[data-pa-form="request_as"] .pa-form-table th,
	.pa-form.pa-form--eq-lp-sp .pa-form-table th {
		padding: 10px 0;
		font-size: 15px;
		line-height: normal;
	}

	/*
	 * 欄の器。移行元の `dd` は上下とも内余白 10px である（dev は上 0・下 16）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table td,
	.pa-form[data-pa-form="reservation3"] .pa-form-table td,
	.pa-form[data-pa-form="event"] .pa-form-table td,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table td,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table td,
	.pa-form[data-pa-form="request_lp"] .pa-form-table td,
	.pa-form[data-pa-form="request_intro"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table td,
	.pa-form[data-pa-form="request_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_online"] .pa-form-table td,
	.pa-form[data-pa-form="request_as"] .pa-form-table td,
	.pa-form.pa-form--eq-lp-sp .pa-form-table td {
		padding: 10px 0;
	}

	/* ----------------------------------------------------------------------
	 * 移行元のスマートフォン版が `dl` / `dt` / `dd` で組む 5 種（Task #8077）
	 *
	 * 移行元は同じフォームでもパソコン版とスマートフォン版で別の型紙・別の
	 * スタイルシートを配る。**スマートフォン版が `public/sp/css/style.css` の
	 * `dl` / `dt` / `dd` で組まれているのは次の 5 種だけ**である
	 * （2026-09-20 14:27 に 10 種を実測して数えた）.
	 *
	 * | フォーム | 移行元の型紙 | 器 |
	 * |---|---|---|
	 * | お問い合わせ | `form/view/sp_contact.php` | `#contents` |
	 * | 法人からの問い合わせ | `form/view/sp_corporation.php` | `#contents` |
	 * | 会員紹介 | `form/view/intro/sp_reservation_intro.php` | `#contents` |
	 * | 社員紹介 | `form/view/intro/sp_reservation_intro_02.php` | `#reservation` |
	 * | ご紹介 | `form/view/sp_reservation3.php` | `#contents` |
	 *
	 * **残る 5 種は当てない。**ご紹介プログラムは `sp/form/myintro/css/mypage_form03.css`
	 * が最後に来て器が `#form_contents`・内余白 5px・背景なし、OTOCON は見出しを
	 * 持たず、資料請求は器が別、来店予約は両側とも外部の予約サービスへ転送するので
	 * 測れない（D343）.
	 *
	 * 🚨 **婚活 EQ 診断つき資料請求（`sp_eq.php`）は、以前「器が `#analysis` で別」として
	 * 外していたが、誤りだった（Bug #10019）。**器の上書きは注意書きと設問 20 問の `dl` に
	 * しか効かず、個人情報の欄には素の `dt`・`dd`・`select` の規則が当たる（2026-10-09 の
	 * 実測で、見出しの地紋・内余白 23.4px・選択欄の矢印を確かめた）。表を画面いっぱいに
	 * する規則・左右の内余白・見出しの地紋・選択欄の矢印にだけ足し、行の上下の内余白と
	 * 字の大きさは婚活 EQ 診断の節のままにする.
	 *
	 * 🚨 **移行元の型紙は先頭で `pc_redirect()` を呼ぶ。**パソコンの名乗り（UA）で
	 * `/sp/…` を取ると黙ってパソコン版へ転送され、同じ中身が返る。**このファイルの
	 * 前の版にあった「スマートフォン用のミラーも同じ `page_inquiry.css` を読む」
	 * という注記は、その転送に当たった読みで、事実と違う。**
	 *
	 * 値の出典（`public/sp/css/style.css`）:
	 *
	 *   dl { margin: 0; clear: both; border-top: 1px solid #888888; }
	 *   dt { background-image: url(../images/inquiry/bg_form.gif); background-repeat: repeat;
	 *        padding: 10px 6.25%; font-size: 15px; }
	 *   dd { padding: 10px 6.25%; font-size: 15px; }
	 *
	 * 🚨 **内余白を固定の px で写さない。**375px の画面で出る 23.4375px は
	 * 375 × 6.25% の結果にすぎず、360px や 414px の画面では移行元とずれる.
	 *
	 * 🚨 **`dl.last` は移行元のお問い合わせで 1 つも使われていない。**最後の行に
	 * 下の罫線は付かないので、`tr` の下の罫線は 0 にして上の罫線だけを持たせる.
	 * -------------------------------------------------------------------- */

	.pa-form[data-pa-form="toiawase"] .pa-form-table,
	.pa-form[data-pa-form="houjin"] .pa-form-table,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table,
	.pa-form[data-pa-form="reservation3"] .pa-form-table,
	.pa-form[data-pa-form="event"] .pa-form-table,
	.pa-form[data-pa-form="request_lp"] .pa-form-table,
	.pa-form[data-pa-form="request_intro"] .pa-form-table,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table,
	.pa-form[data-pa-form="request_ad"] .pa-form-table,
	.pa-form[data-pa-form="request_online"] .pa-form-table,
	.pa-form[data-pa-form="request_as"] .pa-form-table,
	.pa-form.pa-form--eq-lp-sp .pa-form-table,
	.pa-form[data-pa-form="eq"] .pa-form-table {
		/*
		 * 器（`.pa-form-frame__wrapper`）が持つ左右 16px の内余白を打ち消し、
		 * 移行元と同じ画面いっぱいにする（移行元の `dl` は x 0・w 375）。
		 * 器を直に触らないのは、同じ器を使う来店予約まで動いてしまうためである.
		 *
		 * 婚活 EQ 診断（Bug #10019）は、個人情報の表にだけ当てる（設問 20 問は
		 * `.pa-form-table` の外）。移行元 `sp_eq.php` の個人情報の欄は素の
		 * `<form><dl><dt><dd>` で、器 `#analysis` の上書きは注意書きと設問の `dl` に
		 * しか効かない。そのため `sp/css/style.css` の素の `dt`・`dd`・`select` の
		 * 規則（地紋・内余白 6.25%・矢印の絵）がそのまま当たる.
		 */
		margin-right: -16px;
		margin-left: -16px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-form-table tr,
	.pa-form[data-pa-form="houjin"] .pa-form-table tr,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table tr,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table tr,
	.pa-form[data-pa-form="reservation3"] .pa-form-table tr,
	.pa-form[data-pa-form="event"] .pa-form-table tr,
	.pa-form[data-pa-form="request_lp"] .pa-form-table tr,
	.pa-form[data-pa-form="request_intro"] .pa-form-table tr,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table tr,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table tr,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table tr,
	.pa-form[data-pa-form="request_ad"] .pa-form-table tr,
	.pa-form[data-pa-form="request_online"] .pa-form-table tr,
	.pa-form[data-pa-form="request_as"] .pa-form-table tr,
	.pa-form.pa-form--eq-lp-sp .pa-form-table tr {
		border-top: 1px solid #888888;
		border-bottom: 0;
	}

	/*
	 * 🚨 **左右だけを指定する。**`padding` の一括指定で上下も書くと、
	 * [Task #8013](https://github.com/mationinc/wp-platform/issues/8013) で
	 * 移行元と 0.00 まで合わせたお問い合わせの行の高さ（11 本で 1,499.00）が
	 * 崩れる。実測（2026-09-20 14:35）では上下を移行元と同じ 10px にすると
	 * 11 本とも 1〜7px 縮んで合計 1,473.00 になった。移行元の `dt` と dev の `th` は
	 * 中の札（移行元は `span.icon` 13px・dev は `span.pa-badge` 12px）の高さが違うので、
	 * **上下の内余白は行の高さを合わせた値のままにする**.
	 *
	 * 🚨 **字の大きさも触らない。**移行元の `dt` / `dd` は 15px だが、変えると
	 * 同じ理由で行の高さが動く。携帯幅の字の大きさは段 3（Bug #8006）がまとめて持つ.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table th,
	.pa-form[data-pa-form="houjin"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th,
	.pa-form[data-pa-form="reservation3"] .pa-form-table th,
	.pa-form[data-pa-form="event"] .pa-form-table th,
	.pa-form[data-pa-form="toiawase"] .pa-form-table td,
	.pa-form[data-pa-form="houjin"] .pa-form-table td,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table td,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table td,
	.pa-form[data-pa-form="reservation3"] .pa-form-table td,
	.pa-form[data-pa-form="event"] .pa-form-table td,
	.pa-form[data-pa-form="request_lp"] .pa-form-table th,
	.pa-form[data-pa-form="request_intro"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_online"] .pa-form-table th,
	.pa-form[data-pa-form="request_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_lp"] .pa-form-table td,
	.pa-form[data-pa-form="request_intro"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table td,
	.pa-form[data-pa-form="request_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_online"] .pa-form-table td,
	.pa-form[data-pa-form="request_as"] .pa-form-table td,
	.pa-form.pa-form--eq-lp-sp .pa-form-table th,
	.pa-form.pa-form--eq-lp-sp .pa-form-table td,
	.pa-form[data-pa-form="eq"] .pa-form-table th,
	.pa-form[data-pa-form="eq"] .pa-form-table td {
		padding-right: 6.25%;
		padding-left: 6.25%;
	}

	.pa-form[data-pa-form="toiawase"] .pa-form-table th,
	.pa-form[data-pa-form="houjin"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th,
	.pa-form[data-pa-form="reservation3"] .pa-form-table th,
	.pa-form[data-pa-form="event"] .pa-form-table th,
	.pa-form[data-pa-form="request_lp"] .pa-form-table th,
	.pa-form[data-pa-form="request_intro"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_online"] .pa-form-table th,
	.pa-form[data-pa-form="request_as"] .pa-form-table th,
	.pa-form.pa-form--eq-lp-sp .pa-form-table th,
	.pa-form[data-pa-form="eq"] .pa-form-table th {
		background-image: url("../images/inquiry/bg_form.gif");
		background-repeat: repeat;
		font-family: var(--pa-font-family-base, "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", sans-serif);
	}

	/* ----------------------------------------------------------------------
	 * 同意まわりの字（Bug #8006・全体差分の段 3）
	 *
	 * 段 2 と同じ 5 種に当てる。**移行元の値は 5 種とも同じ**であることを
	 * 2026-09-20 14:27 に実測で確かめた.
	 *
	 * | 項目 | 移行元の携帯版 | 直す前 |
	 * |---|---|---|
	 * | 同意文 | 13px / 行送り 18.9px・塊 75.63 | 15px / 24.9px・塊 99.63 |
	 * | 「同意する」のラベル | 13px・塊 13.00 | 16px・塊 16.00 |
	 * | 末尾の注記 | 12px / 18.9px | 13px / normal（段 1 で 15px から詰めた） |
	 * | 赤字の注記 | 11px / normal・塊 17.00 | 14px（お問い合わせだけ Task #8013 で 11px 済み） |
	 *
	 * 値の出典（`public/sp/css/style.css` と `public/sp/css/basic.css`）:
	 *
	 *   .text_area { padding: 18px 6.25%; font-size: 14px; line-height: 135%; }
	 *   .text_area .text_security p { font-size: 12px; }
	 *   dd .text_red { color: #e1200f; font-size: 11px; }
	 *   table.agree_box th.agree label { font-size: 13px; }
	 *   basic.css … 全要素へ font-size: 13px と font-weight: normal
	 *
	 * 🚨 **行送りの 18.9px は計算値をそのまま書く。**移行元は器
	 * （`.text_area`）に `font-size: 14px; line-height: 135%` を置き、子の段落は
	 * `basic.css` の 13px を受けつつ**親の計算値 18.9px（14 × 1.35）を継承する**。
	 * dev にはこの器に当たる箱が無く、子に `1.35` と書くと 17.55px になって
	 * 移行元から離れる.
	 *
	 * 下の 3 規則（同意文・末尾の注記・「同意する」）だけは、婚活 EQ 診断にも当てる
	 * （Bug #8531）。移行元の `sp_eq.php` も器 `.text_area` の中に同意の塊を置き、
	 * 2026-09-26 の下見で 3 つとも上の 5 種と同じ値だった。入力の行の規則は、器が
	 * `#analysis` で別なので当てない.
	 *
	 * 同意文の規則はご紹介プログラムにも当てる（Bug #8534）。ご紹介プログラムは帯の上に
	 * 「個人情報の取り扱いについて」のリンクだけを出し、移行元の携帯版（`p.mb20` の中の `a`）も
	 * 同じ 13px・18.9px である.
	 * -------------------------------------------------------------------- */

	.pa-form[data-pa-form="toiawase"] .pa-consent-intro,
	.pa-form[data-pa-form="houjin"] .pa-consent-intro,
	.pa-form[data-pa-form="reservation_intro"] .pa-consent-intro,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-consent-intro,
	.pa-form[data-pa-form="reservation3"] .pa-consent-intro,
	.pa-form[data-pa-form="event"] .pa-consent-intro,
	.pa-form[data-pa-form="eq"] .pa-consent-intro,
	.pa-form[data-pa-form="shoukai"] .pa-consent-intro,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro,
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro,
	.pa-form.pa-form--eq-lp-sp .pa-consent-intro {
		font-size: 13px;
		line-height: 18.9px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-consent-footer,
	.pa-form[data-pa-form="houjin"] .pa-consent-footer,
	.pa-form[data-pa-form="reservation_intro"] .pa-consent-footer,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-consent-footer,
	.pa-form[data-pa-form="reservation3"] .pa-consent-footer,
	.pa-form[data-pa-form="event"] .pa-consent-footer,
	.pa-form[data-pa-form="eq"] .pa-consent-footer,
	.pa-form[data-pa-form="request_lp"] .pa-consent-footer,
	.pa-form[data-pa-form="request_intro"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-footer,
	.pa-form[data-pa-form="request_ad"] .pa-consent-footer,
	.pa-form[data-pa-form="request_online"] .pa-consent-footer,
	.pa-form[data-pa-form="request_as"] .pa-consent-footer,
	.pa-form.pa-form--eq-lp-sp .pa-consent-footer {
		font-size: 12px;
		line-height: 18.9px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-form-consent__agree,
	.pa-form[data-pa-form="houjin"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent__agree,
	.pa-form[data-pa-form="event"] .pa-form-consent__agree,
	.pa-form[data-pa-form="eq"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_online"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_as"] .pa-form-consent__agree,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent__agree {
		font-size: 13px;
	}

	/*
	 * 赤字の注記。お問い合わせは Task #8013 が `.pa-cell` の中で 11px にしてあり
	 * （並べ替えと下の余白も持つ）、ここは**字だけ**をほかの 4 種へ広げる.
	 */
	.pa-form[data-pa-form="houjin"] .pa-note.pa-note--alert,
	.pa-form[data-pa-form="reservation_intro"] .pa-note.pa-note--alert,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-note.pa-note--alert,
	.pa-form[data-pa-form="reservation3"] .pa-note.pa-note--alert,
	.pa-form[data-pa-form="event"] .pa-note.pa-note--alert {
		font-size: 11px;
	}

	/*
	 * 赤字の注記（`sp_note`）。移行元は入力欄の**前**に置く（`sp_contact.php`）。
	 * dev は行の下にまとめて出すので、並べ替えで前へ送る。字は移行元の
	 * `dd .text_red`（11px）、下の余白は `.mb10`（10px）である.
	 *
	 * 社員紹介（Bug #8540）の郵便番号の注記も、移行元は入力欄の前の `p.text_red.mb10` である.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="reservation3"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="event"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_lp"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_intro"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_ad"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_online"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_as"] .pa-cell .pa-note.pa-note--alert,
	.pa-form.pa-form--eq-lp-sp .pa-cell .pa-note.pa-note--alert {
		order: -1;
		flex-basis: 100%;
		margin: 0 0 10px;
		font-size: 11px;
		line-height: normal;
	}

	.pa-form[data-pa-form="toiawase"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_lp"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_intro"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_ad"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_online"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_as"] .pa-cell .pa-note.pa-note--sp,
	.pa-form.pa-form--eq-lp-sp .pa-cell .pa-note.pa-note--sp {
		display: block;
	}

	/*
	 * メールアドレスの赤字の注記（`sp_note`・Bug #8029）を、法人・会員紹介・社員紹介・来店予約 3 の
	 * 4 種にも出す。移行元の携帯版（`view/sp_corporation.php`・`view/intro/sp_reservation_intro.php`・
	 * `view/intro/sp_reservation_intro_02.php`・`view/sp_reservation3.php`）は、欄の前に
	 * `<p class="text_red mb10">` を置く。字 11px は上の `.pa-note--alert` の指定が与える.
	 *
	 * 当て先は `.pa-note--sp` だけに絞る。4 種はほかの行にも赤字の注記を持ち、そちらまで並べ替えないためである。
	 * 下の余白を 2px と書くのは、囲み（`.pa-cell`）が行と行のあいだに 8px の隙間を持つためである
	 * （8 + 2 = 10・婚活 EQ 診断と同じ書き方）。お問い合わせは囲みの隙間を 0 にしているので 10px と書く.
	 *
	 * 通常の来店予約（`raiten`）は、移行元も dev も入力画面を利用者に見せない（定義の `raiten_display()` の説明）ので、
	 * 注記を持たせていない.
	 */
	.pa-form:is([data-pa-form="houjin"], [data-pa-form="reservation_intro"], [data-pa-form="reservation_intro_02"], [data-pa-form="reservation3"], [data-pa-form="event"]) .pa-cell .pa-note.pa-note--sp {
		display: block;
		order: -1;
		flex-basis: 100%;
		margin: 0 0 2px;
		line-height: normal;
	}

	/*
	 * 社員紹介のスマホ版だけにある、赤字でない注記（Bug #9373・定義の `sp_note_plain`）。
	 * 移行元の `intro/sp_reservation_intro_02.php` は、来店希望日時の行の下に `p.form_text`
	 * （#333・12px・行送り 17.4px）を置く（2026-10-04 の実測）。店舗の選択欄の下の注記は、案内先の
	 * コメントの欄が無いので写さない（D740）。赤字の注記（上の規則・欄の前）と違い、欄の後ろに
	 * 出すので `order` を戻す.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell .pa-note.pa-note--sp-plain {
		order: 0;
		margin: 0;
		color: #333;
		font-size: 13px;
	}

	/*
	 * 休業日の注記は、移行元の `sp/css/style.css` の `#reservation .form_text`（2449 行）が
	 * `padding: 20px 6.25%` を持つ。左右の 6.25% は dev の行の内余白（字の左端 23.4px）と同じなので、
	 * 上下の 20px だけを足す.
	 */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has([name="visit-time-3"]) .pa-note.pa-note--sp-plain {
		padding: 20px 0;
		font-size: 12px;
		line-height: 17.4px;
	}

	/*
	 * 欄の器の中の段の空き。移行元は `<p>` を積むだけで段のあいだに空きを持たない
	 * （dev の `.pa-cell` は `gap: 8px 18px`）。**横の空きは残す**（`＠` や
	 * ハイフンの前後は移行元も空ける）.
	 *
	 * 社員紹介（Bug #8540）は郵便番号の行だけに当てる（注記と欄のあいだ）。来店希望日時の
	 * 行は、希望ごとの段のあいだの空きを dev の `gap` が持つので当てない.
	 * ご紹介はアンケートの行にも当てる（Bug #9409。問いの文と選択肢のあいだ。下見の走行2 で 8px 多かった）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell,
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-parts--zipcode),
	.pa-form[data-pa-form="event"] .pa-cell:has(.pa-parts--zipcode),
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(.pa-parts--zipcode),
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(.pa-parts--zipcode),
	.pa-form[data-pa-form="request_lp"] .pa-cell,
	.pa-form[data-pa-form="request_intro"] .pa-cell,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell,
	.pa-form[data-pa-form="request_ad"] .pa-cell,
	.pa-form[data-pa-form="request_online"] .pa-cell,
	.pa-form[data-pa-form="request_as"] .pa-cell,
	.pa-form.pa-form--eq-lp-sp .pa-cell {
		row-gap: 0;
	}

	/*
	 * お名前（漢字）（カナ）。移行元は姓と名を**横に並べる**
	 * （`sp/css/style.css` の `dd .nameL { float: left; width: 46.607% }` と
	 * `dd .nameR { float: right; width: 46.607% }`）。見出しの「姓」「名」は
	 * 入力欄の**上**に置く（`dd .nameL label { display: block; padding: 0 0 8px }`）。
	 *
	 * 当たり先は「欄が 2 つ並ぶ行」だけである。郵便番号・電話番号・メールアドレスは
	 * 1 つの欄の中を `parts` で割るので `.pa-cell-field` は 1 つしか無く、当たらない.
	 *
	 * 社員紹介（Bug #8540）も、移行元は同じ `.nameL` / `.nameR` で組む。社員紹介では
	 * 来店希望日時・生年月日・紹介者の e-mail の行も欄を 2 つ以上持つので、お名前の欄の名前で絞る.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell:has( .pa-cell-field + .pa-cell-field ),
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="event"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(input[name="sei"], input[name="sei-kana"]) {
		justify-content: space-between;
	}

	.pa-form[data-pa-form="toiawase"] .pa-cell:has( .pa-cell-field + .pa-cell-field ) .pa-cell-field,
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="event"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field,
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-cell-field {
		flex: 0 0 46.607%;
		row-gap: 0;
	}

	/*
	 * 「姓」「名」の字は 13px である（移行元の `sp/css/basic.css` が全要素へ 13px を
	 * 当て、`dd` の 15px を上書きする）。以前は 15px にして行送り 20px で高さだけを
	 * 合わせていた。行送りの 20px は移行元の 13px・`normal` の 1 行の高さと同じなので残す.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell:has( .pa-cell-field + .pa-cell-field ) .pa-sub-label,
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="event"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label {
		flex-basis: 100%;
		padding: 0 0 8px;
		font-size: 13px;
		line-height: 20px;
	}

	/*
	 * 🚨 **入力欄を欄の幅いっぱいにする。**移行元は `dd input[type="text"]` に
	 * `width: 100%` を当てている。dev の `.pa-control--180` は 180px の固定幅で、
	 * 46.607% の器（159.8px）に収まらず**次の段へ送られる**（実測で欄の器が
	 * 90px のところ 168px になった）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell:has( .pa-cell-field + .pa-cell-field ) .pa-control,
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="event"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control,
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-control {
		width: 100%;
	}


	/*
	 * 複数行入力欄。移行元は `rows="5"` で高さ 112px である
	 * （中身 5 行 + 内余白 20 + 枠線 4）。パソコン幅の高さを `min-height` で
	 * 置いているため、こちらも `min-height` で打ち消す.
	 */
	.pa-form[data-pa-form="toiawase"] textarea.pa-control,
	.pa-form[data-pa-form="request_lp"] textarea.pa-control,
	.pa-form[data-pa-form="request_intro"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_test"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_as"] textarea.pa-control,
	.pa-form[data-pa-form="request_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_online"] textarea.pa-control,
	.pa-form[data-pa-form="request_as"] textarea.pa-control,
	.pa-form.pa-form--eq-lp-sp textarea.pa-control {
		min-height: 112px;
		height: 112px;
	}

	/*
	 * 複数行入力欄の下の添え書き。移行元は `<br>` で改行して地の文で置くため、
	 * 入力欄と字のあいだに空きが入る（`.pa-note` の既定は 0.3em）。値は、字を
	 * 移行元と同じ 15px にした形（下の「行の中の部品」の節）で、字の上端と行の高さが
	 * 移行元とそろう値である（2026-09-26 の下見の実測。以前の 12px は 13.6px の字の値）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_lp"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_intro"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_ad"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_online"] .pa-cell .pa-note,
	.pa-form[data-pa-form="request_as"] .pa-cell .pa-note,
	.pa-form.pa-form--eq-lp-sp .pa-cell .pa-note {
		margin-top: 6px;
	}

	/* ----------------------------------------------------------------------
	 * 行の中の部品と同意の塊を、移行元の携帯版の見た目にそろえる（Bug #7961）
	 *
	 * 段 1〜4（#8053・#8077・#8006・#1630 の子）が閉じたあとに測り直した
	 * （2026-09-26・`pa-verify-assets/B/7961-直す前-0926/`）。入力の行 11 本の高さは
	 * 移行元と同じになっていた。残っていたのは、行の高さを変えない部品の差である.
	 *
	 * | 部品 | 移行元の携帯版 | 直す前の dev |
	 * |---|---|---|
	 * | 必須・任意の札 | 13px・36 × 24 | 12px・32 × 20 |
	 * | 「姓」「名」の字 | 13px | 15px |
	 * | 内容の下の添え書き | 15px | 13.6px |
	 * | 郵便番号の 2 欄 | 98.44（30%） | 44・52 |
	 * | 電話番号の 3 欄 | 82.03（25%） | 52 |
	 * | 市・区・郡 | 328.13（100%） | 180 |
	 * | e-mail | 2 欄を縦に積み、あいだの 1 行に `＠` | 2 つ目の欄の左に `＠`（285.13） |
	 * | 同意する・送信の押しボタン | 横に並べる（38.75% ＋ 60.535%） | 縦に積む |
	 * | 「情報セキュリティを見る」 | 次の段落・13px | 文の続き・12px |
	 *
	 * 値の出典は `legacy/www.p-a.jp/public/sp/css/style.css` の `dt span.icon`・
	 * `dd input[type="text"]`・`.code`・`.tel`・`table.agree_box` と、型紙
	 * `form/view/sp_contact.php` である.
	 * -------------------------------------------------------------------- */

	/*
	 * 必須・任意の札.
	 *
	 * 社員紹介（Bug #8540）は、来店希望日時の欄の中の札（移行元の `dd .kibou span.icon`・
	 * 同じ値）にも当てるので、`th` に絞らない.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="reservation3"] .pa-form-table .pa-badge,
	.pa-form[data-pa-form="event"] .pa-form-table .pa-badge,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table .pa-badge,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table .pa-badge,
	.pa-form[data-pa-form="request_lp"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_intro"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_ad"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_online"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_as"] .pa-form-table th .pa-badge,
	.pa-form.pa-form--eq-lp-sp .pa-form-table th .pa-badge {
		margin-right: 12px;
		padding: 2px 5px;
		font-size: 13px;
		line-height: normal;
		vertical-align: baseline;
	}

	/*
	 * 社員紹介の見出しの札の右。移行元は `<span class="icon">必須</span>性別` と空白を挟まない。
	 * dev は札と項目名のあいだの改行が空白 1 字（15px で 4.26px）になるので、そのぶんを
	 * 外余白から引く（2026-09-26 の下見の実測で、項目名の左端が移行元より 4.26px 右だった）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="event"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table th .pa-badge {
		margin-right: 7.74px;
	}

	/*
	 * 内容の行の札は、移行元では「必須」の字のまま灰色である（型紙が任意の札の類名
	 * `icon02` を付けている・`sp_contact.php` 64 行）。移行元の書き間違いに見えるが、
	 * 見た目は移行元にそろえる（2026-09-26 のリーダーの判断・ユーザー決定 D529 の方針）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table tr:has( #pa-field-content ) th .pa-badge--required {
		background: #888888;
	}

	/*
	 * 内容の下の添え書き。移行元は `dd` の地の文（15px・行送り `normal`）である.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell-field-textarea ~ .pa-note {
		color: #000000;
		font-size: 15px;
		line-height: normal;
	}

	/*
	 * 市・区・郡。移行元は一行入力欄のすべてが欄の幅いっぱいで、幅を持つのは
	 * 郵便番号（`.code`）と電話番号（`.tel`）だけである.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_lp"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_online"] .pa-cell-field-text,
	.pa-form[data-pa-form="request_as"] .pa-cell-field-text,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field-text {
		flex-basis: 100%;
	}

	.pa-form[data-pa-form="toiawase"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_lp"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_online"] .pa-cell-field-text > input.pa-control,
	.pa-form[data-pa-form="request_as"] .pa-cell-field-text > input.pa-control,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field-text > input.pa-control {
		width: 100%;
	}

	/*
	 * 郵便番号・電話番号・e-mail の分割欄。欄の置き場は画面の幅の 87.5%
	 * （`dd` の左右の内余白 6.25% を引いた幅）で、婚活 EQ 診断の節と同じ考え方である.
	 *
	 * 社員紹介（Bug #8540）の分割欄も、移行元は同じ `.code`・`.tel` と、`＠` を挟んで
	 * 2 欄を積む e-mail である（`sp_reservation_intro_02.php` の 556〜674 行）.
	 *
	 * 資料請求の冊子の広告フォーム 2 本（Task #8668）の郵便番号と電話番号も、移行元は同じ `.code`・`.tel` である
	 * （`sp_request_tool_ad.php`・`sp_request_tool_as.php`）。e-mail は `.email`（45%）で横に並べるので、2 本だけの節で置く.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_lp"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_online"] .pa-cell-field-parts,
	.pa-form[data-pa-form="request_as"] .pa-cell-field-parts,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field-parts {
		flex-basis: 100%;
	}

	.pa-form[data-pa-form="toiawase"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="reservation3"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="event"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--zipcode .pa-control,
	.pa-form.pa-form--eq-lp-sp .pa-parts--zipcode .pa-control {
		width: calc(87.5vw * 0.3);
	}

	.pa-form[data-pa-form="toiawase"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="reservation3"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="event"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--phone .pa-control,
	.pa-form.pa-form--eq-lp-sp .pa-parts--phone .pa-control {
		width: calc(87.5vw * 0.25);
	}

	/*
	 * 区切りの字。移行元は素の字で置き、前後の空白の畳み込みで間隔が決まる。
	 * 郵便番号の `-` は `<p>` の中（13px）、電話番号の `-` は `dd` の地の文（15px）である.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="reservation3"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="event"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_lp"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_intro"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_ad"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_online"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_as"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form.pa-form--eq-lp-sp .pa-parts--zipcode .pa-parts-sep {
		width: 13px;
		margin: 0;
		font-size: 13px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="reservation3"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="event"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_lp"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_intro"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_ad"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_online"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_as"] .pa-parts--phone .pa-parts-sep,
	.pa-form.pa-form--eq-lp-sp .pa-parts--phone .pa-parts-sep {
		width: 15px;
		margin: 0;
		font-size: 15px;
	}

	/*
	 * e-mail。移行元は 2 欄とも幅いっぱいで、`＠` が 2 欄のあいだの 1 行になる
	 * （欄 42 ＋ `＠` の行 20 ＋ 欄 42 ＝ 104）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-parts--email,
	.pa-form[data-pa-form="event"] .pa-parts--email,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts--email,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts--email,
	.pa-form[data-pa-form="request_lp"] .pa-parts--email,
	.pa-form[data-pa-form="request_intro"] .pa-parts--email,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--email,
	.pa-form.pa-form--eq-lp-sp .pa-parts--email {
		display: flex;
		width: 100%;
	}

	.pa-form[data-pa-form="toiawase"] .pa-parts-unit--at,
	.pa-form[data-pa-form="event"] .pa-parts-unit--at,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts-unit--at,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_lp"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_intro"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts-unit--at,
	.pa-form.pa-form--eq-lp-sp .pa-parts-unit--at {
		flex-wrap: wrap;
	}

	.pa-form[data-pa-form="toiawase"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="event"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="reservation_intro"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_lp"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_intro"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--email .pa-parts-sep--at,
	.pa-form.pa-form--eq-lp-sp .pa-parts--email .pa-parts-sep--at {
		flex-basis: 100%;
		width: auto;
		margin: 0;
		font-size: 13px;
		line-height: 20px;
		text-align: left;
	}

	/* ----------------------------------------------------------------------
	 * 社員紹介だけが持つ行（Bug #8540）
	 *
	 * 移行元の携帯版（`form/view/intro/sp_reservation_intro_02.php`）の値である.
	 * 値の出典は `sp/css/style.css`（`dd select.birth_y`・`dd .kibou label`・`.radio label`）と
	 * `sp/form/myintro/css/reservation_intro_form02.css`（`#office #reservation #radio label`）.
	 * -------------------------------------------------------------------- */

	/*
	 * 生年月日。移行元は選択欄 3 つを 1 行に並べ、「年」「月」「日」の字を HTML の注釈で
	 * 消している（型紙の 493〜497 行）。資料請求の冊子の広告フォーム 2 本（Task #8668）も同じ組みで、
	 * 年の選択欄を `sp_year_select.php` から読み込む（`sp_request_tool_ad.php` の 122〜126 行）。dev の字は `aria-hidden` の飾りなので、隠しても
	 * 読み上げは変わらない（欄の名前は隠したラベルが持つ）.
	 *
	 * 🚨 **最初の選択肢の字は移行元と違ったまま残る。**移行元の携帯版は「（空白）」「月」「日」、
	 * パソコン版は 3 つとも空白、dev は「----」「--」「--」である。パソコン幅に差を
	 * 出さないため、定義は変えない（2026-09-26 のリーダーの判断）
	 * ご紹介（`reservation3`）だけは、携帯幅の字を移行元のスマホ版にそろえた（Bug #9409。空の選択肢・和暦・2 桁の字を
	 * 画面側の `setupSpLabels()` が携帯幅のときだけ差し替える。パソコン幅の字と送る値は変えない）.
	 * 紹介経由の 3 種の年の字と、会員紹介・社員紹介の月と日の字は、Bug #9483 で両幅とも移行元の字にした
	 * （空白 1 字・「1996/平成8」・「01」。社員紹介の携帯幅の月と日の空の選択肢は「月」「日」。
	 * `class-pa-forms-definitions.php` の `BIRTH_ERA_LABELS`・`BIRTH_SP_EMPTY_LABELS`）.
	 *
	 * 欄と欄のあいだは、移行元の `margin-right: 3px` と、欄のあいだの改行の空白 1 字
	 * （3.72px）で 6.72px になる（2026-09-26 の下見の実測）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(select[name="birth-year"]) {
		column-gap: 3.72px;
	}

	/*
	 * 🚨 **会員紹介（`reservation_intro`）はここに入れない**（Bug #9373）。移行元の会員紹介のスマホ版
	 * （`intro/sp_reservation_intro.php` 435・453・489 行）は「年」「月」「日」の字を注釈の外で出す。
	 * 紹介経由の 3 種で字を注釈で消しているのは、社員紹介とご紹介（`sp_reservation3.php`・Bug #9374）のスマホ版である。
	 * PR #9294 が会員紹介をここへ足したため、
	 * 会員紹介の携帯幅で単位の字が消えていた（2026-10-04 の実測）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(select[name="birth-year"]) .pa-unit,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]) .pa-unit,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(select[name="birth-year"]) .pa-unit,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(select[name="birth-year"]) .pa-unit,
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(select[name="birth-year"]) .pa-unit,
	.pa-form[data-pa-form="request_online"] .pa-cell:has(select[name="birth-year"]) .pa-unit,
	.pa-form[data-pa-form="request_as"] .pa-cell:has(select[name="birth-year"]) .pa-unit {
		display: none;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="request_online"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form[data-pa-form="request_as"] .pa-cell:has(select[name="birth-year"]) select.pa-control {
		margin-right: 3px;
		padding: 10px 5px;
		font-size: 15px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"] {
		width: calc(87.5vw * 0.4);
		font-size: 14px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]) {
		width: calc(87.5vw * 0.25285);
	}

	/*
	 * 会員紹介だけ、「年」「月」「日」の字を出したまま移行元の 2 段の組みにする（Bug #9373）。
	 * 移行元の `intro/sp_reservation_intro.php`（352〜490 行）は、年の選択欄と「年」を 1 段目の
	 * `<p class="mb10">` に、月と日を 2 段目の `<p>` に置く。字は `<label>`（13px）である.
	 *
	 * 空きは選択欄の右の外余白 3px と、型紙の改行の空白（3.72px）と `&nbsp;` の数で決まる
	 * （2026-10-04 の下見の実測で、移行元の箱から数え直した）.
	 *
	 * - 年と「年」: 3 + 空白 3 つ（改行・`&nbsp;`・改行）＝ 14.16px → 器の中の空き 11.16px
	 * - 月と「月」・日と「日」: 3 + 改行の空白 1 つ ＝ 6.72px → 器の中の空き 3.72px
	 * - 「月」と日の選択欄: 改行・`&nbsp;` 4 つ・改行の空白 6 つ ＝ 22.32px → 行の中の空き
	 * - 1 段目と 2 段目: `mb10` の 10px
	 */
	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) {
		gap: 10px 22.32px;
	}

	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field {
		gap: 3.72px;
	}

	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field:has(select[name="birth-year"]) {
		flex-basis: 100%;
		gap: 11.16px;
	}

	.pa-form[data-pa-form="reservation_intro"] .pa-cell:has(select[name="birth-year"]) .pa-unit {
		font-size: 13px;
		line-height: 1;
	}

	/*
	 * 来店希望日時。移行元は札と「第1希望」の字（13px・下の内余白 8px）の下に、
	 * 幅いっぱいの日付の欄（高さ 42px）を置く.
	 *
	 * 札と「第1希望」のあいだは、札の右の外余白 12px と、移行元の型紙の改行の空白 1 字
	 * （3.72px）である。dev の欄は flex で空白を持たないので、その幅を `gap` で置く.
	 *
	 * 移行元の日付の欄は、右の内余白が 36px である（日付の選択部品の絵の置き場）。dev は
	 * ブラウザ内蔵の日付の欄で、暦の印を自分で右端に出すので、右も 10px のままにする.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell-field-date,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field-date {
		flex-basis: 100%;
		gap: 0 3.72px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field-date .pa-sub-label,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date .pa-sub-label,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field-date .pa-sub-label {
		min-width: 0;
		padding: 0 0 8px;
		font-size: 13px;
		line-height: normal;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field-date input:is([type="date"], [data-pa-date-text]).pa-control {
		width: 100%;
		height: 42px;
	}

	/*
	 * 性別と紹介者とのご関係（ユーザー決定 D602）。移行元は本物のラジオを消し、字の左に
	 * 直径 35px の丸を描き、選ぶと中に 18px の点を出す.
	 *
	 * 🚨 **ラジオ本体は `display: none` にせず、画面の外へ逃がす。**必須のラジオを
	 * `display: none` にすると、未選択のときにブラウザが焦点を当てられず送信が黙って
	 * 止まる（婚活 EQ 診断の設問の押しボタンと同じ判断）.
	 *
	 * 丸は移行元と同じく罫線の外側で測る（`box-sizing: content-box`。35 ＋ 罫線 1px × 2）.
	 * 選択肢のあいだは、移行元の選択肢どうしの間の空白 1 字（4.28px）である.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]),
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]),
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) {
		gap: 0 4.28px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio,
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio {
		position: relative;
		display: inline-block;
		margin: 0;
		padding: 11px 15px 15px 40px;
		font-size: 13px;
		line-height: normal;
		cursor: pointer;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio input[type="radio"] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio::before,
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio::before,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio::before,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: content-box;
		width: 35px;
		height: 35px;
		border: 1px solid #666666;
		border-radius: 50%;
		background: #fafafa;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:checked)::after {
		content: "";
		position: absolute;
		top: 9px;
		left: 9px;
		box-sizing: content-box;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #a3762b;
	}

	/*
	 * 焦点の位置を丸の側に出す。移行元は焦点の枠を持たないが、キーボードだけで操作する
	 * 利用者が今どこに居るのか分からなくなるのを避ける（婚活 EQ 診断の設問と同じ）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="reservation_intro"] .pa-cell-field:has(input[name="gender"], input[name="referrer-relation"]) .pa-radio:has(input[type="radio"]:focus-visible)::before {
		outline: 2px solid #f10000;
		outline-offset: 2px;
	}

	/*
	 * 入力の表と同意文のあいだ。移行元は器 `.text_area` の上の内余白 18px である
	 * （dev の表は下に 40px の外余白を持つ）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table,
	.pa-form[data-pa-form="request_lp"] .pa-form-table,
	.pa-form[data-pa-form="request_intro"] .pa-form-table,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table,
	.pa-form[data-pa-form="request_ad"] .pa-form-table,
	.pa-form[data-pa-form="request_online"] .pa-form-table,
	.pa-form[data-pa-form="request_as"] .pa-form-table,
	.pa-form.pa-form--eq-lp-sp .pa-form-table {
		margin-bottom: 18px;
	}

	/*
	 * 同意の塊の左右。移行元は器 `.text_area` の内余白 6.25% の内側に置く。
	 * dev の器は左右 16px の内余白を持つので、その差だけ内側へ寄せる.
	 *
	 * この節の同意の塊の規則（左右の寄せ・横並び・同意欄の幅・行送り・チェック欄・
	 * 押しボタン）は、法人からの問い合わせと婚活 EQ 診断にも当てる（Bug #8531）。
	 * 移行元の携帯版は 3 種とも器 `.text_area` の中に同じ `table.agree_box` を置く
	 * （`form/view/sp_contact.php` の 213〜245 行と `sp_corporation.php` の 235〜267 行は
	 * 字まで同じ。`sp_eq.php` の 705〜726 行も同じ表で、押しボタンの絵も 339 × 100）。
	 * 2026-09-26 の下見で、移行元の 3 種の値（左 23.44・同意欄 128.05・高さ 58.86・
	 * 13px / 18.9px）が同じであることを測った.
	 *
	 * ご紹介プログラム（`shoukai`）にも当てる（Bug #8534）。移行元の携帯版の通常版
	 * （`mypageform_03`）も器 `.text_area` の中に同じ `table.agree_box` を置き、2026-09-26 の
	 * 直す前の測定で、同意欄 128.05・押しボタンの器 200.08・高さ 58.86・左 23.44 が
	 * お問い合わせと同じだった（`pa-verify-assets/B/8534-直す前-0926/`）。同意欄の字と帯の上の
	 * 案内文は意図的変更の台帳で保留（#1075 の法務確認待ち）で、ご紹介プログラムは案内文を
	 * 出さない。そのため、婚活 EQ 診断の案内文の 3 段落の規則（`--lead` / `--item` / `--last`）は
	 * 当てない.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-consent-intro,
	.pa-form[data-pa-form="toiawase"] .pa-form-consent,
	.pa-form[data-pa-form="toiawase"] .pa-consent-footer,
	.pa-form[data-pa-form="houjin"] .pa-consent-intro,
	.pa-form[data-pa-form="houjin"] .pa-form-consent,
	.pa-form[data-pa-form="houjin"] .pa-consent-footer,
	.pa-form[data-pa-form="eq"] .pa-consent-intro,
	.pa-form[data-pa-form="eq"] .pa-form-consent,
	.pa-form[data-pa-form="eq"] .pa-consent-footer,
	.pa-form[data-pa-form="shoukai"] .pa-consent-intro,
	.pa-form[data-pa-form="shoukai"] .pa-form-consent,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro,
	.pa-form[data-pa-form="event"] .pa-consent-intro,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent,
	.pa-form[data-pa-form="event"] .pa-form-consent,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent,
	.pa-form[data-pa-form="request_lp"] .pa-consent-footer,
	.pa-form[data-pa-form="request_intro"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-footer,
	.pa-form[data-pa-form="event"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-footer,
	.pa-form.pa-form--eq-lp-sp .pa-consent-intro,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent,
	.pa-form.pa-form--eq-lp-sp .pa-consent-footer {
		margin-right: calc(6.25vw - 16px);
		margin-left: calc(6.25vw - 16px);
	}

	/*
	 * 婚活 EQ 診断の案内文の 3 段落（Bug #8531）。移行元の携帯版（`form/view/sp_eq.php` の
	 * 706〜710 行・`sp/css/style.css`）は、器 `div.mb20`（下 20px）の中に案内文の `p.mb10`
	 * （下 10px）と、「・」で始まる `p.ind` を 2 つ置く。`.text_area .ind` は
	 * `margin: 0 0 0 7px; text-indent: -7px` で、「・」をぶら下げる.
	 *
	 * 🚨 **左の外余白は上の寄せ（`calc(6.25vw - 16px)`）に 7px を足す。**7px だけを書くと、
	 * 上の規則の寄せを打ち消して左へ 7.44px ずれる.
	 */
	.pa-form[data-pa-form="eq"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="event"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--lead,
	.pa-form.pa-form--eq-lp-sp .pa-consent-intro--lead {
		margin-bottom: 10px;
	}

	.pa-form[data-pa-form="eq"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro--item,
	.pa-form[data-pa-form="event"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro--item,
	.pa-form.pa-form--eq-lp-sp .pa-consent-intro--item {
		margin-bottom: 0;
		margin-left: calc(6.25vw - 16px + 7px);
		text-indent: -7px;
	}

	.pa-form[data-pa-form="eq"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_lp"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_intro"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-intro--last,
	.pa-form[data-pa-form="event"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--last,
	.pa-form.pa-form--eq-lp-sp .pa-consent-intro--last {
		margin-bottom: 20px;
	}

	/*
	 * 「同意する」と送信の押しボタンを横に並べる。移行元は `table.agree_box` の
	 * 2 つのセル（`th.agree` 38.75%・右に 1px の白い罫線／`td.check` 60.535%）で、
	 * 高さは押しボタンの絵（339 × 100）を幅いっぱいに縮めた高さで決まる.
	 *
	 * 🚨 **以前ここで縦に積んでいたのは、Issue #1771 の「移行元に狭い画面向けの帯は
	 * 無い」という読みによる。**その読みは Task #8077 で訂正済みである（パソコンの
	 * 名乗りで `/sp/…` を取り、パソコン版へ転送されていた）.
	 *
	 * 紹介経由の来店予約 3 種（会員紹介 `reservation_intro`・社員紹介 `reservation_intro_02`・
	 * ご紹介 `reservation3`）も同じ表を持つ（`form/view/intro/sp_reservation_intro.php`・
	 * `sp_reservation_intro_02.php`・`form/view/sp_reservation3.php`）。一覧から漏れていて、
	 * 携帯幅で縦に積んでいた（Bug #10413。2026-10-16 の実測で、移行元の会員紹介は
	 * 押しボタンの左 152・幅 200 の横並びで、お問い合わせと同じ値）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-consent,
	.pa-form[data-pa-form="houjin"] .pa-form-consent,
	.pa-form[data-pa-form="eq"] .pa-form-consent,
	.pa-form[data-pa-form="shoukai"] .pa-form-consent,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent,
	.pa-form[data-pa-form="event"] .pa-form-consent,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent,
	.pa-form[data-pa-form="request_online"] .pa-form-consent,
	.pa-form[data-pa-form="request_as"] .pa-form-consent,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent {
		flex-direction: row;
		width: auto;
		min-height: 0;
		margin-bottom: 20px;
	}

	/*
	 * 移行元の表は 2 つのセルの割合（38.75% と 60.535%。足して 99.285%）を幅いっぱいへ
	 * 広げて配る。同意欄はその 38.75 / 99.285 ＝ 39.03% になる（375px で 128.05・右の
	 * 罫線を含む）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-consent__agree,
	.pa-form[data-pa-form="houjin"] .pa-form-consent__agree,
	.pa-form[data-pa-form="eq"] .pa-form-consent__agree,
	.pa-form[data-pa-form="shoukai"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent__agree,
	.pa-form[data-pa-form="event"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_online"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_as"] .pa-form-consent__agree,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent__agree {
		flex: 0 0 39.03%;
		width: auto;
		height: auto;
		border-right: 1px solid #ffffff;
	}

	.pa-form[data-pa-form="toiawase"] .pa-form-consent__submit,
	.pa-form[data-pa-form="houjin"] .pa-form-consent__submit,
	.pa-form[data-pa-form="eq"] .pa-form-consent__submit,
	.pa-form[data-pa-form="shoukai"] .pa-form-consent__submit,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent__submit,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent__submit,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent__submit,
	.pa-form[data-pa-form="event"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_online"] .pa-form-consent__submit,
	.pa-form[data-pa-form="request_as"] .pa-form-consent__submit,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent__submit {
		flex: 1 1 auto;
		width: auto;
	}

	/*
	 * チェック欄と「同意する」。移行元のチェック欄はブラウザ既定の外余白（上下 3px・
	 * 右 3px・左 4px）を持ち、字の前に空白が 1 つ入る。dev も字の前に空白を持つ
	 * （`class-pa-forms-embed.php` の `<input … /> %4$s`）が、欄の外余白が 0 だった。
	 * 行送りは、移行元が器 `.text_area` から受け継ぐ 18.9px である.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-consent__agree,
	.pa-form[data-pa-form="houjin"] .pa-form-consent__agree,
	.pa-form[data-pa-form="eq"] .pa-form-consent__agree,
	.pa-form[data-pa-form="shoukai"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent__agree,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent__agree,
	.pa-form[data-pa-form="event"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_online"] .pa-form-consent__agree,
	.pa-form[data-pa-form="request_as"] .pa-form-consent__agree,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent__agree {
		line-height: 18.9px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="houjin"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="eq"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="shoukai"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="reservation3"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_lp"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_intro"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="event"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_ad"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_online"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form[data-pa-form="request_as"] .pa-form-consent__agree input[type="checkbox"],
	.pa-form.pa-form--eq-lp-sp .pa-form-consent__agree input[type="checkbox"] {
		margin: 3px 3px 3px 4px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="houjin"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="eq"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="shoukai"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="reservation3"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_lp"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_intro"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="event"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_online"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_as"] .pa-form-consent .pa-form-submit button,
	.pa-form.pa-form--eq-lp-sp .pa-form-consent .pa-form-submit button {
		display: block;
		width: 100%;
		min-height: 0;
		aspect-ratio: 339 / 100;
		padding: 0;
	}

	/*
	 * 末尾の注記の下。移行元はリンクの段落の `.mb20` と、器 `.text_area` の下の
	 * 内余白 18px を持つ.
	 *
	 * 法人からの問い合わせと婚活 EQ 診断も、移行元の携帯版の末尾は同じ組みである
	 * （`form/view/sp_corporation.php` の 259〜262 行・`form/view/sp_eq.php` の 721〜724 行。
	 * どちらも器 `.text_area` の中の `.text_security` に、文の `p.mb10` とリンクだけの
	 * `p.mb20` を置く）。そのため同じ値を当てる（Bug #8516）。婚活 EQ 診断の広告・LP
	 * 専用フォーム（`eq_ad` など）は `data-pa-form` が別の値なので当たらない.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-consent-footer,
	.pa-form[data-pa-form="houjin"] .pa-consent-footer,
	.pa-form[data-pa-form="eq"] .pa-consent-footer,
	.pa-form[data-pa-form="request_lp"] .pa-consent-footer,
	.pa-form[data-pa-form="request_intro"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-footer,
	.pa-form[data-pa-form="event"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-footer,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-footer,
	.pa-form[data-pa-form="request_ad"] .pa-consent-footer,
	.pa-form[data-pa-form="request_online"] .pa-consent-footer,
	.pa-form[data-pa-form="request_as"] .pa-consent-footer,
	.pa-form.pa-form--eq-lp-sp .pa-consent-footer {
		margin-bottom: 38px;
	}

	/* 「情報セキュリティを見る」。移行元は文と別の段落（`.mb10` の下）に置く. */
	.pa-form[data-pa-form="toiawase"] .pa-consent-footer a,
	.pa-form[data-pa-form="houjin"] .pa-consent-footer a,
	.pa-form[data-pa-form="eq"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_lp"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_intro"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_tool_test"] .pa-consent-footer a,
	.pa-form[data-pa-form="event"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_tool_ad"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_tool_as"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_ad"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_online"] .pa-consent-footer a,
	.pa-form[data-pa-form="request_as"] .pa-consent-footer a,
	.pa-form.pa-form--eq-lp-sp .pa-consent-footer a {
		display: block;
		width: fit-content;
		margin-top: 10px;
		font-size: 13px;
	}

	/* ----------------------------------------------------------------------
	 * 資料請求の LP 専用フォーム（`request_lp`）の携帯幅だけの違い（Task #8667）
	 *
	 * 移行元の携帯版（`form/view/sp_request_lp.php`）は、お問い合わせと同じ `sp/css/style.css` の
	 * `dl` / `dt` / `dd` で組む。そのためこの節より前の、お問い合わせの携帯幅の規則に `request_lp` を
	 * 足してある。ここには、移行元の lp だけがお問い合わせと違う所を置く.
	 *
	 * | 所 | 移行元の lp（375 の実測） | お問い合わせ |
	 * |---|---|---|
	 * | 郵便番号・電話番号 | 欄に幅の類名（`.code`・`.tel`）が無く、全部の欄が幅いっぱい（328.13）で、`-` の行を挟んで縦に積む | 30%・25% で横に並べる |
	 * | 生年月日 | 年（131.25 × 38・14px）が 1 段目、月と日（82.95 × 39・15px）が 2 段目（`p.mb10`） | 行が無い |
	 * | コメント | `rows="8"` で高さ 166 | `rows="5"` で 112 |
	 *
	 * 値の出典は `sp/css/style.css` の `dd input[type="text"]`（幅 100%・内余白 10px）と
	 * `dd select.birth_y` / `.birth_m` / `.birth_d`、型紙の `sp_request_lp.php`（移行元の固定コミット
	 * `b5bee0c58`）。実測は `pa-verify-assets/A/8667-lpの読み-0928/走行2/`（2026-09-28 17:04）.
	 * -------------------------------------------------------------------- */

	/*
	 * 郵便番号と電話番号。欄を幅いっぱいにし、区切りの `-` を欄のあいだの 1 行にする.
	 * 行の高さは移行元の欄の間隔から引いた値である（郵便番号は `<p>` の中の 13px で 20、
	 * 電話番号は `dd` の地の文の 15px で 23。欄 42 ＋ 区切りの行 ＝ 62・65）.
	 */
	.pa-form[data-pa-form="request_lp"] .pa-parts--zipcode,
	.pa-form[data-pa-form="request_intro"] .pa-parts--zipcode,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--zipcode,
	.pa-form[data-pa-form="request_lp"] .pa-parts--phone,
	.pa-form[data-pa-form="request_intro"] .pa-parts--phone,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--phone {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	/* 2 つ目より後の欄は、区切りの字と組みの器（`.pa-parts-unit`）に入っている。器ごと 1 行を占めさせる. */
	.pa-form[data-pa-form="request_lp"] .pa-parts--zipcode .pa-parts-unit,
	.pa-form[data-pa-form="request_intro"] .pa-parts--zipcode .pa-parts-unit,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--zipcode .pa-parts-unit,
	.pa-form[data-pa-form="request_lp"] .pa-parts--phone .pa-parts-unit,
	.pa-form[data-pa-form="request_intro"] .pa-parts--phone .pa-parts-unit,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--phone .pa-parts-unit {
		display: flex;
		flex-basis: 100%;
		flex-wrap: wrap;
	}

	.pa-form[data-pa-form="request_lp"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_intro"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_lp"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_intro"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--phone .pa-control {
		width: 100%;
	}

	.pa-form[data-pa-form="request_lp"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_intro"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_lp"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_intro"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--phone .pa-parts-sep {
		flex-basis: 100%;
		width: auto;
		text-align: left;
	}

	.pa-form[data-pa-form="request_lp"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_intro"] .pa-parts--zipcode .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--zipcode .pa-parts-sep {
		line-height: 20px;
	}

	.pa-form[data-pa-form="request_lp"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_intro"] .pa-parts--phone .pa-parts-sep,
	.pa-form[data-pa-form="request_tool_test"] .pa-parts--phone .pa-parts-sep {
		line-height: 23px;
	}

	/*
	 * 生年月日。年を 1 段目に置き、月と日を 2 段目に並べる。段のあいだは移行元の `p.mb10` の 10px.
	 * 幅は欄の置き場（画面の幅の 87.5%）に対する移行元の割合（年 40%・月と日 25.285%）である.
	 */
	/*
	 * 月と日のあいだ。移行元は月の選択欄の右端から日の選択欄の左端まで 38.25px である
	 * （単位の字「月」と前後の空白・`margin-right: 3px`）。dev は囲みの間隔 18px のままで 42px だった
	 * （下見の 2 回目の実測）ので、囲みの間隔を 3.75px 詰める.
	 */
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(select[name="birth-year"]),
	.pa-form[data-pa-form="event"] .pa-cell:has(select[name="birth-year"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(select[name="birth-year"]) {
		flex-wrap: wrap;
		row-gap: 0;
		column-gap: calc(18px - 3.75px);
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-year"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-year"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-year"]),
	.pa-form[data-pa-form="event"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-year"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-year"]) {
		flex-basis: 100%;
		margin-bottom: 10px;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-month"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-month"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-month"]),
	.pa-form[data-pa-form="event"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-month"]),
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-day"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-day"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-day"]),
	.pa-form[data-pa-form="event"] .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-day"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-month"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(select[name="birth-year"]) .pa-cell-field-select:has(> select[name="birth-day"]) {
		flex-basis: auto;
	}

	.pa-form[data-pa-form="request_lp"] select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_intro"] select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_tool_test"] select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="event"] select.pa-control[name="birth-year"],
	.pa-form.pa-form--eq-lp-sp select.pa-control[name="birth-year"] {
		width: calc(87.5vw * 0.4);
		padding: 10px 5px;
		font-size: 14px;
	}

	.pa-form[data-pa-form="request_lp"] select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="request_intro"] select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="request_tool_test"] select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="event"] select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form.pa-form--eq-lp-sp select.pa-control:is([name="birth-month"], [name="birth-day"]) {
		width: calc(87.5vw * 0.25285);
		padding: 10px 5px;
		font-size: 15px;
	}

	/*
	 * コメント。移行元は `rows="8"` で高さ 166（中身 8 行 ＋ 内余白 20 ＋ 枠線 2）.
	 * 移行元の `textarea` は `dd` の中の行の要素なので、下に字の下がりのぶんの 6px が付く
	 * （行の高さ 192 ＝ 欄 166 ＋ `dd` の内余白 20 ＋ 6。下見の 1 回目の実測）。その 6px を外余白で置く.
	 */
	.pa-form[data-pa-form="request_lp"] textarea.pa-control,
	.pa-form[data-pa-form="request_intro"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_test"] textarea.pa-control {
		min-height: 166px;
		height: 166px;
		margin-bottom: 6px;
	}

	/*
	 * 性別。移行元は本物のラジオを隠し、字の左に直径 35px の丸を描く（`sp/css/style.css` の
	 * `#radio { height: 40px }`・`#radio label { padding: 11px 20px 0 44px }`・`:before` の丸）.
	 * ラジオ本体は `display: none` にせず画面の外へ逃がす（社員紹介の性別と同じ判断・D602）.
	 */
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="gender"]),
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(input[name="gender"]) {
		height: 40px;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(input[name="gender"]),
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid {
		gap: 0;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio {
		position: relative;
		display: inline-block;
		margin: 0;
		padding: 11px 20px 0 44px;
		font-size: 13px;
		line-height: normal;
		cursor: pointer;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(input[name="gender"]) .pa-radio input[type="radio"],
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio input[type="radio"],
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio input[type="radio"] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio::before,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(input[name="gender"]) .pa-radio::before,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio::before,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: content-box;
		width: 35px;
		height: 35px;
		border: 1px solid #666666;
		border-radius: 50%;
		background: #fafafa;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after {
		content: "";
		position: absolute;
		top: 9px;
		left: 9px;
		box-sizing: content-box;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #a3762b;
	}

	/* 焦点の位置は丸の側に出す（社員紹介の性別と同じ）. */
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(input[name="gender"]) .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before {
		outline: 2px solid #f10000;
		outline-offset: 2px;
	}

	/*
	 * 資料請求の広告・LP 専用フォーム 5 本の性別の並び（Bug #9594・Bug #9645 で 3 本を足した。375 の実測で、3 本も字の箱が
	 * 4.5 下・あいだが 0 だった）。移行元の `sp_request_ad.php`・`sp_request_as.php` は、字の箱（`label`）を
	 * 行（`dd#radio`）の上端から置き、2 つの字の箱のあいだに空白 1 字（15px の字で 4.28px）を挟む.
	 * dev は高さ 40 の欄の中で字の箱（高さ 31.8）を縦の中央へ寄せて 4.1 下にあり、あいだは 0 だった（2026-10-07 の下見の 2 回目）.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="gender"]) {
		align-items: flex-start;
	}

	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(input[name="gender"]),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(input[name="gender"]) {
		column-gap: 4.28px;
	}

	/*
	 * アンケート。移行元は問いの `dd`（内余白 10px 6.25%・15px）と選択肢の `dd#enquete_list` を分けて持つ
	 * （`sp_request_lp.php`）。問いと選択肢のあいだは、2 つの `dd` の内余白の和の 20px である.
	 * 選択肢は `#enquete_list ul li { float: left; width: 50%; height: 40px; margin: 5px auto }` で 2 列に並べ、
	 * 7 番目（インターネット広告）だけ 1 列（`width: 100%`）、最後（インターネット動画）は 1 段下げる（`clear: both`）.
	 * 丸の字の内余白は `padding: 11px 0 0 44px`（性別と違い右の 20px が無い）.
	 */
	.pa-form[data-pa-form="request_lp"] .pa-cell-intro,
	.pa-form[data-pa-form="request_intro"] .pa-cell-intro,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-intro,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-intro,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-intro,
	.pa-form[data-pa-form="request_ad"] .pa-cell-intro,
	.pa-form[data-pa-form="request_online"] .pa-cell-intro,
	.pa-form[data-pa-form="request_as"] .pa-cell-intro,
	.pa-form.pa-form--eq-lp-sp .pa-cell:has(.pa-radio-wrap--grid) .pa-cell-intro,
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-radio-wrap--grid) .pa-cell-intro {
		margin: 0 0 20px;
		border-bottom: 0;
		font-size: 15px;
		line-height: normal;
	}

	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form.pa-form--eq-lp-sp .pa-cell-field:has(> .pa-radio-wrap--grid),
	.pa-form[data-pa-form="eq"] .pa-cell-field:has(> .pa-radio-wrap--grid) {
		flex-basis: 100%;
	}

	/*
	 * 選択肢の `li` は浮かせてあり、`dd#enquete_list` の高さに入らない。次の行の `dl` が
	 * `clear: both` で浮きの下へ回り込むので、`dd` の下の内余白 10px は浮きに重なって消える
	 * （下見の 2 回目の実測で、dev のアンケートの行が 10px 高かった）。欄の器の下の内余白を 0 にする.
	 */
	.pa-form[data-pa-form="request_lp"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_intro"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_ad"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_online"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="request_as"] .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form.pa-form--eq-lp-sp .pa-form-table td:has(.pa-radio-wrap--grid),
	.pa-form[data-pa-form="eq"] .pa-form-table td:has(.pa-radio-wrap--grid) {
		padding-bottom: 0;
	}

	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio {
		height: 40px;
		margin: 5px 0;
		padding-right: 0;
	}

	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio:nth-child(7),
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio:nth-child(7) {
		grid-column: 1 / -1;
	}

	.pa-form[data-pa-form="request_lp"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_intro"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_tool_test"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_tool_ad"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_tool_as"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form.pa-form--eq-lp-sp .pa-radio-wrap--grid .pa-radio:last-child,
	.pa-form[data-pa-form="eq"] .pa-radio-wrap--grid .pa-radio:last-child {
		grid-column: 1;
	}

	/* ----------------------------------------------------------------------
	 * 資料請求の冊子の広告フォーム（`request_tool_ad`・`request_tool_as`）の携帯幅だけの違い（Task #8668）
	 *
	 * 移行元の携帯版（`form/view/sp_request_tool_ad.php`・`sp_request_tool_as.php`）も `sp/css/style.css` の
	 * `dl` / `dt` / `dd` で組むので、上のお問い合わせと LP 専用フォームの規則の多くに 2 本を足してある.
	 * LP 専用フォームと違う所は、郵便番号と電話番号（`.code` 30%・`.tel` 25% で横に並ぶ・お問い合わせの規則）と
	 * 生年月日（3 つの選択欄を 1 行に並べる・社員紹介の規則）で、上の規則に 2 本を足した。ここにはその残りを置く.
	 *
	 * | 所 | 移行元の tool（375 の実測） |
	 * |---|---|
	 * | お名前の 4 欄 | 題「姓」「名」「セイ」「メイ」を注釈で消し、例文で見分ける。2 欄を横に並べる（152.92 × 42・中身の高さ 62） |
	 * | e-mail | 2 欄とも 45%（147.66）で、`＠` を挟んで横に並べる（`dd input[type="text"].email`） |
	 * | コメント | `rows="3"` で高さ 76 |
	 *
	 * 実測は `pa-verify-assets/A/8665-表の組み-0928/走行2/`（移行元の固定コミット `b5bee0c58`）.
	 * -------------------------------------------------------------------- */

	/*
	 * お名前の 4 欄の題（ユーザー決定 D645）。移行元の携帯版は `<label>` を注釈で消しているので、dev の題も出さない.
	 * 欄の名前は例文（定義の `table_look_display()`）と、入力の誤りの文言の `data-pa-error-label` が持つ.
	 */
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_online"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label,
	.pa-form[data-pa-form="request_as"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label {
		display: none;
	}

	/*
	 * e-mail。欄は画面の幅の 87.5% に対する 45%。`＠` は `<p>` の中の 13px で、前後の改行の空白 1 字ずつ
	 * （3.71px）を挟む（2 つ目の欄の左端 191.52 ＝ 23.44 ＋ 147.66 ＋ 20.42）.
	 */
	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--email,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--email,
	.pa-form[data-pa-form="request_ad"] .pa-parts--email,
	.pa-form[data-pa-form="request_online"] .pa-parts--email,
	.pa-form[data-pa-form="request_as"] .pa-parts--email {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
	}

	.pa-form[data-pa-form="request_tool_ad"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_ad"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_online"] .pa-parts-unit--at,
	.pa-form[data-pa-form="request_as"] .pa-parts-unit--at {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--email .pa-control,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--email .pa-control {
		width: calc(87.5vw * 0.45);
	}

	.pa-form[data-pa-form="request_tool_ad"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_tool_as"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_ad"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_online"] .pa-parts--email .pa-parts-sep--at,
	.pa-form[data-pa-form="request_as"] .pa-parts--email .pa-parts-sep--at {
		width: auto;
		margin: 0 3.71px;
		font-size: 13px;
		line-height: normal;
	}

	/*
	 * コメント。移行元は `rows="3"` で高さ 76（中身 3 行 ＋ 内余白 20 ＋ 枠線 2）。下の 6px は LP 専用フォームと同じく、
	 * 行の要素の `textarea` の字の下がりのぶんである（行の高さ 102 ＝ 欄 76 ＋ `dd` の内余白 20 ＋ 6）.
	 */
	.pa-form[data-pa-form="request_tool_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_tool_as"] textarea.pa-control {
		min-height: 76px;
		height: 76px;
		margin-bottom: 6px;
	}

	/* ----------------------------------------------------------------------
	 * 資料請求の広告フォーム（`request_ad`・`request_as`）の携帯幅だけの違い（Task #8666）
	 *
	 * 移行元の携帯版（`form/view/sp_request_ad.php`・`sp_request_as.php`）は、冊子の広告フォームと同じ `sp/css/style.css` の
	 * `dl` / `dt` / `dd` で組み、その外側を `/sp/spiral/request/css/style.css` の `.form-inner { padding: 0 10px; font-size: 14px;
	 * line-height: 1.6 }` で包む。そのため上の冊子の広告フォームの規則の多くに 2 本を足し、ここには値が違う所を置く.
	 *
	 * | 所 | 移行元の ad（375 の実測） | 冊子の広告フォーム |
	 * |---|---|---|
	 * | 行の器 | x 10・幅 355（画面から左右 10px ずつ） | x 0・幅 375 |
	 * | 題と中身の行送り | 15px・24px（1.6） | 15px・`normal` |
	 * | 欄の置き場 | 310.63（355 の 87.5%） | 328.13（375 の 87.5%） |
	 * | 郵便番号・電話番号 | `type="tel"` で行内の `style` が幅 60・80・75、高さ 50、内余白はブラウザ既定 | `.code` 30%・`.tel` 25%・高さ 42 |
	 * | コメント | `rows="1"` で高さ 46 | `rows="3"` で 76 |
	 *
	 * 幅を持つ値は、冊子の広告フォームの `87.5vw` を「画面の幅から 20px を引いた幅」の 87.5% に置き換える.
	 * 実測は `pa-verify-assets/A/8666-adの読み-0928/走行1/`（2026-09-28 19:05・移行元の固定コミット `b5bee0c58`）.
	 * -------------------------------------------------------------------- */

	/* 行の器。上の規則の左右 -16px（画面いっぱい）を、画面から左右 10px の位置に戻す. */
	.pa-form[data-pa-form="request_ad"] .pa-form-table,
	.pa-form[data-pa-form="request_online"] .pa-form-table,
	.pa-form[data-pa-form="request_as"] .pa-form-table {
		margin-right: -6px;
		margin-left: -6px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_online"] .pa-form-table th,
	.pa-form[data-pa-form="request_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_online"] .pa-form-table td,
	.pa-form[data-pa-form="request_as"] .pa-form-table td {
		line-height: 1.6;
	}

	/* 必須・任意の札。移行元の `dt span.icon` は 13px で、行送りは器の 1.6 を受け継ぐ（20.8px・札の高さ 24.8）. */
	.pa-form[data-pa-form="request_ad"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_online"] .pa-form-table th .pa-badge,
	.pa-form[data-pa-form="request_as"] .pa-form-table th .pa-badge {
		line-height: 1.6;
	}

	/* 欄の中の注記（郵便番号・e-mail の赤字 11px）。移行元の `p.text_red` も器の 1.6 を受け継ぐ（17.6px）. */
	.pa-form[data-pa-form="request_ad"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_online"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_as"] .pa-cell .pa-note.pa-note--alert,
	.pa-form[data-pa-form="request_ad"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_online"] .pa-cell .pa-note.pa-note--sp,
	.pa-form[data-pa-form="request_as"] .pa-cell .pa-note.pa-note--sp {
		line-height: 1.6;
	}

	/* 性別とアンケートの選択肢の字（13px）。行送りは器の 1.6（20.8px）. */
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="request_ad"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_online"] .pa-radio-wrap--grid .pa-radio,
	.pa-form[data-pa-form="request_as"] .pa-radio-wrap--grid .pa-radio {
		line-height: 1.6;
	}

	/* 生年月日。幅は欄の置き場（画面の幅 − 20px の 87.5%）に対する移行元の割合（年 40%・月と日 25.285%）. */
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_online"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"],
	.pa-form[data-pa-form="request_as"] .pa-cell:has(select[name="birth-year"]) select.pa-control[name="birth-year"] {
		width: calc((100vw - 20px) * 0.875 * 0.4);
		font-size: 14px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(select[name="birth-year"]) select.pa-control:is([name="birth-month"], [name="birth-day"]) {
		width: calc((100vw - 20px) * 0.875 * 0.25285);
	}

	/* 郵便番号と電話番号。移行元は `type="tel"` の行内の `style` で寸法を持ち、内余白はブラウザ既定の 1px 2px である. */
	.pa-form[data-pa-form="request_ad"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_online"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_as"] .pa-parts--zipcode .pa-control,
	.pa-form[data-pa-form="request_ad"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_online"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_as"] .pa-parts--phone .pa-control {
		box-sizing: border-box;
		height: 50px;
		padding: 1px 2px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-parts--zipcode .pa-control[name="zipcode1"],
	.pa-form[data-pa-form="request_online"] .pa-parts--zipcode .pa-control[name="zipcode1"],
	.pa-form[data-pa-form="request_as"] .pa-parts--zipcode .pa-control[name="zipcode1"] {
		width: 60px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-parts--zipcode .pa-control[name="zipcode2"],
	.pa-form[data-pa-form="request_online"] .pa-parts--zipcode .pa-control[name="zipcode2"],
	.pa-form[data-pa-form="request_as"] .pa-parts--zipcode .pa-control[name="zipcode2"] {
		width: 80px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_online"] .pa-parts--phone .pa-control,
	.pa-form[data-pa-form="request_as"] .pa-parts--phone .pa-control {
		width: 75px;
	}

	/* e-mail。欄の置き場の 45%（移行元の `dd input[type="text"].email`）. */
	.pa-form[data-pa-form="request_ad"] .pa-parts--email .pa-control,
	.pa-form[data-pa-form="request_online"] .pa-parts--email .pa-control,
	.pa-form[data-pa-form="request_as"] .pa-parts--email .pa-control {
		width: calc((100vw - 20px) * 0.875 * 0.45);
	}

	/*
	 * コメント。移行元は `rows="1"` で高さ 46（中身 1 行 ＋ 内余白 20 ＋ 枠線 2）。行の要素の `textarea` の下に、
	 * 行送り 24px の字の下がりのぶんの 7px が付く（行の高さ 73 ＝ 欄 46 ＋ `dd` の内余白 20 ＋ 7）.
	 */
	.pa-form[data-pa-form="request_ad"] textarea.pa-control,
	.pa-form[data-pa-form="request_online"] textarea.pa-control,
	.pa-form[data-pa-form="request_as"] textarea.pa-control {
		min-height: 46px;
		height: 46px;
		margin-bottom: 7px;
	}

	/* 「資料送付」の行の案内の文。移行元は `dd` の中の `p`（13px・行送り 20.8px）. */
	.pa-form[data-pa-form="request_ad"] .pa-info-row__text,
	.pa-form[data-pa-form="request_online"] .pa-info-row__text,
	.pa-form[data-pa-form="request_as"] .pa-info-row__text {
		margin: 0;
		font-size: 13px;
		line-height: 1.6;
	}

	/*
	 * 同意の塊の左右。移行元は同意文と帯を `.text_area` の内余白 6.25% の内側に置く。器が画面から左右 10px なので、
	 * dev の器の左右 16px から見た寄せは「(画面の幅 − 20px) の 6.25% − 6px」になる.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro,
	.pa-form[data-pa-form="request_ad"] .pa-form-consent,
	.pa-form[data-pa-form="request_online"] .pa-form-consent,
	.pa-form[data-pa-form="request_as"] .pa-form-consent,
	.pa-form[data-pa-form="request_ad"] .pa-consent-footer,
	.pa-form[data-pa-form="request_online"] .pa-consent-footer,
	.pa-form[data-pa-form="request_as"] .pa-consent-footer {
		margin-right: calc((100vw - 20px) * 0.0625 - 6px);
		margin-left: calc((100vw - 20px) * 0.0625 - 6px);
	}

	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--item,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--item {
		margin-bottom: 0;
		margin-left: calc((100vw - 20px) * 0.0625 - 6px + 7px);
		text-indent: -7px;
	}

	/* 最後の段落は `--item` も持つので、上の `margin-bottom: 0` のあとに移行元の `div.mb20` の 20px を戻す（下見の 2 回目で 20 上だった）. */
	.pa-form[data-pa-form="request_ad"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_online"] .pa-consent-intro--last,
	.pa-form[data-pa-form="request_as"] .pa-consent-intro--last {
		margin-bottom: 20px;
	}

	/* アンケートの問いの字（15px）。行送りは器の 1.6（24px・2 行で 48）。下見の 1 回目で、選択肢が移行元より 2 上だった. */
	.pa-form[data-pa-form="request_ad"] .pa-cell-intro,
	.pa-form[data-pa-form="request_online"] .pa-cell-intro,
	.pa-form[data-pa-form="request_as"] .pa-cell-intro {
		line-height: 1.6;
	}

	/*
	 * 最後の行（コメント）の下の罫線。移行元の携帯版は最後の `dl` に `class="last"` を付け、`sp/css/style.css` の
	 * 1583〜1585 行 `dl.last { border-bottom: 1px solid #888888 }` を当てる（お問い合わせは `dl.last` を持たない）.
	 */
	.pa-form[data-pa-form="request_ad"] .pa-form-table tr:last-child,
	.pa-form[data-pa-form="request_online"] .pa-form-table tr:last-child,
	.pa-form[data-pa-form="request_as"] .pa-form-table tr:last-child {
		border-bottom: 1px solid #888888;
	}

	/* 送信の押しボタンの字と「>」。携帯版の絵は 339 × 100 を 0.5573 倍で出すので、字は 18px、「>」は幅 11.1・高さ 16.7 になる. */
	.pa-form[data-pa-form="request_ad"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_online"] .pa-form-consent .pa-form-submit button,
	.pa-form[data-pa-form="request_as"] .pa-form-consent .pa-form-submit button {
		padding-right: 14px;
		font-size: 18px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-form-consent .pa-form-submit button::after,
	.pa-form[data-pa-form="request_online"] .pa-form-consent .pa-form-submit button::after,
	.pa-form[data-pa-form="request_as"] .pa-form-consent .pa-form-submit button::after {
		top: 35.9%;
		right: 7.35%;
		width: 11.1px;
		height: 16.7px;
	}

	.pa-form[data-pa-form="request_ad"] .pa-form-consent .pa-form-submit button::before,
	.pa-form[data-pa-form="request_online"] .pa-form-consent .pa-form-submit button::before,
	.pa-form[data-pa-form="request_as"] .pa-form-consent .pa-form-submit button::before {
		display: none;
	}

	/*
	 * ご紹介プログラムの末尾の注記（Bug #8518）。移行元の携帯版
	 * （`form/view/intro/sp_mypageform_03.php`）も、お問い合わせと同じ
	 * `div.text_security` の組み方である。文は `p.mb10`（12px・行送り 18.9px・#333）、
	 * 「情報セキュリティを見る」は次の段落 `p.mb20`（13px・#cf3319・下線なし。
	 * `sp/form/myintro/css/reservation_intro_form02.css` と同じ `.paIntro a`）に置く.
	 *
	 * 注記の下は、段落の `.mb20` 20px・器 `.text_area` の下の内余白 18px・
	 * `section.contents` の下の内余白 19.5px で、足して 57.5px になる
	 * （2026-09-26 の実測）。dev の外枠の下の内余白は 48px なので、残りの 9.5px を
	 * 注記の下の外余白に置く.
	 */
	.pa-form[data-pa-form="shoukai"] .pa-consent-footer {
		margin-right: calc(6.25vw - 16px);
		margin-bottom: 9.5px;
		margin-left: calc(6.25vw - 16px);
		color: #333333;
		font-size: 12px;
		line-height: 18.9px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-consent-footer a {
		display: block;
		width: fit-content;
		margin-top: 10px;
		color: #cf3319;
		font-size: 13px;
		text-decoration: none;
	}

	/*
	 * 帯の上の「個人情報の取り扱いについて」（Bug #8534）。移行元は `p.mb20` の中に
	 * リンクだけを置き、`a` を段落の形（`display: block`・#cf3319・下線なし）で出す。
	 * 字の大きさと行送りは、同意文の規則（この節の前方）が持つ.
	 */
	.pa-form[data-pa-form="shoukai"] .pa-consent-intro a {
		display: block;
		color: #cf3319;
		text-decoration: none;
	}
}

/* --------------------------------------------------------------------------
 * 来店予約の、ページ上部の案内とエリア別の店舗ラジオ（レーン F1・Bug #1986）
 *
 * 実値は移行元の `public/css/page_inquiry.css`（`.category_ttl` / `#reservation
 * .form_text` / `table th p.linkBranch` / `table td dl.area` 配下）と、共通の
 * `public/css/style.css` の余白の指定（`.mt50` / `.mb70`）から写した。帯の左の
 * 灰色は、移行元が背景画像（`bg_dl_area.gif`・121×17）で敷いている単色
 * `#bbbbbb` を色の指定に置き換えたものである（実測で全画素が同色）.
 *
 * 見出し（`.pa-raiten-intro__heading`）の上下余白 50px / 50px は、テーマの外枠
 * が持つ「中身が画像 1 枚だけの見出しには飾りを付けない」規則
 * （`main.css` の `.page-content__body :is(h2…):has(> img:only-child)`）に
 * 詳細度で負けて 0px / 25px に潰れる不具合があった（司令塔の視覚レビュー指摘・
 * 2026-08-25）。テーマ側の規則はクラス 2 個＋擬似クラスで詳細度
 * （0,2,2）を持つため、プラグイン側もクラス 3 個（`.page-content__body` を
 * 前段に足す）へ上げて詳細度（0,3,0）で勝たせる.
 * -------------------------------------------------------------------------- */

/*
 * 見出しは h2 タグのため、上下余白を 50px/50px へ直すだけでは、テーマが本文の
 * h2 へ与える下線（下の内余白 10px + 下の罫線 2px）が画像の下に残っていた
 * （司令塔の視覚レビュー指摘・2026-08-25）。画像 1 枚だけの見出しには飾りを
 * 持たせない考え方は F2（お問い合わせ・法人からの問い合わせ）の
 * `.pa-form-intro__heading` と同じため、同じ打ち消し（`padding` / `border` /
 * `background`）をここでも行う。
 */
.page-content__body .pa-form--table .pa-raiten-intro__heading {
	margin: 50px 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
}

.pa-form--table .pa-raiten-intro__heading img,
.pa-form--table .pa-raiten-intro__check img {
	max-width: 100%;
	height: auto;
}

.pa-form--table .pa-raiten-intro__check {
	margin: 0 0 70px;
	line-height: 0;
}

.pa-form--table .pa-raiten-intro__text {
	margin: 0 0 30px;
	font-size: 15px;
	line-height: 1.66;
}

.pa-form--table .pa-raiten-intro__text span {
	color: #e1200f;
}

/*
 * 上部の案内文 3 行（Bug #8274）。移行元 `public/css/page_inquiry.css` の
 * `#reservation .category_ttl + .catch_txt`（488〜493 行）から写した。
 *
 * ```css
 * padding: 0 0 50px 0;
 * text-align: center;
 * font-size: 17px;
 * line-height: 2;
 * ```
 *
 * 🚨 **持つのは通常の来店予約とご紹介の 2 種だけである**（`RESERVATION_CATCH_FORMS`）。
 * 移行元の型紙 4 本を注釈の内外まで判定して数えた.
 */
.pa-form--table .pa-raiten-intro__catch {
	margin: 0;
	padding: 0 0 50px;
	font-size: 17px;
	line-height: 2;
	text-align: center;
}

/*
 * オンライン店舗の案内 1 行（Bug #8274）。移行元 `public/css/page_inquiry.css` の
 * `#reservation .form_text`（495〜500 行）と、型紙が同じ `<p>` へ直に書いている
 * 行内の指定（`margin-left: 30px; margin-bottom: 50px;`）から写した。
 *
 * 🚨 **中の `<span>` は赤字である**（同 507〜510 行 `#reservation .form_text span`）。
 * 移行元がこの 1 行を `<span>` で包んでいるのは赤くするためで、色を落とすと
 * 意味が変わる.
 *
 * 🚨 **持つのは会員紹介 1 種だけである**（`RESERVATION_ONLINE_NOTE_FORMS`）.
 */
.pa-form--table .pa-raiten-intro__online {
	margin: 0 0 50px 30px;
	font-size: 15px;
	line-height: 1.66;
}

.pa-form--table .pa-raiten-intro__online span {
	color: #e1200f;
}

/*
 * 入会基準の案内（Bug #8274）。移行元は見出しへ共通の `public/css/style.css` の
 * `.fs16`（357〜359 行 `font-size: 16px`）を当て、本文は素の `<p>` である。
 *
 * 🚨 **移行元の類名（`fs16`）は写さない。**字の大きさを名前にした類名で役割が
 * 読み取れないため、テーマの接頭辞を付けた名前にして値だけを写した.
 */
.pa-form--table .pa-admission__heading {
	font-size: 16px;
}

/*
 * 本文は移行元の型紙に類名が無く、ページの素の字の大きさで出る。**移行元は 13px、
 * dev の根は 16px** なので、写さないと 3 ポイント大きくなる（2026-09-20 の実測）。
 *
 * 🚨 **行の高さは写さない。**移行元の 2 本の様式が食い違っており、どちらが正か
 * 決められないためである（`reservation3` と `reservation_intro` は `normal`、
 * `reservation_intro_02` は `26px`）。テーマの値のままにして、配信後の受入で測る.
 */
.pa-form--table .pa-admission__body {
	font-size: 13px;
}

/*
 * 🚨 **社員紹介の来店予約だけ、上部の案内が絵 3 枚である**（Bug #7904）。
 * ほかの 3 種（来店予約・会員紹介・ご紹介）は 2 枚で、間隔も違う。
 *
 * 移行元の実測（幅 1440・`public/form/view/intro/reservation_intro_02.php`）:
 *
 * | どこからどこまで | 距離 |
 * |---|---:|
 * | 器の上端 → 見出しの絵（`main_ttl.gif` 739×53） | 55px |
 * | 見出しの絵の下端 → 案内の絵（`img_service.jpg` 840×263.45） | 15px |
 * | 案内の絵の下端 → 副見出しの絵（`ttl.gif` 240×29） | 70px |
 *
 * **案内の絵の下の 70px は 3 種と同じ値**なので、`.pa-raiten-intro__check` の
 * 既定（`margin: 0 0 70px`）がそのまま当たる。見出しの上下だけ書き換える.
 *
 * 詳細度をクラス 3 個へ上げるのは、テーマ（`main.css`）の
 * `.page-content__body :is(h2…):has(> img:only-child)` に負けないためである
 * （`.pa-raiten-intro__heading` の既定と同じ理由）.
 */
.page-content__body .pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__heading {
	margin: 55px 0 15px;
}

/*
 * 副見出し「来店予約フォーム」（移行元の `h3.page_ttl`）。移行元は絵（`ttl.gif`・240×29）で
 * 出すが、全体原則（絵の中の文言は背景＋テキスト）に従い字で組む（Task #7969）。
 * テーマが本文の h3 へ与える左の罫線と内余白を消す.
 *
 * 字は絵の画素から決めた。明朝・`#a3762b`（絵の中で最も多い色）。8 字の送りがほぼ 30px で、
 * 字の範囲の幅が 238px なので、29px に字間 1px を足す。高さは絵と同じ 29px に固定する.
 *
 * 下の余白は 30px。移行元はこの下に進み具合の帯（`img_flow01.gif`）を 30px 空けて置く。
 * dev はその帯を写さない（意図的変更の台帳「フォームの進み具合の帯」の行・2026-08-21 の裁定）
 * ので、次の案内文までを同じ 30px にする。以前の 36px は「絵の下に字のベースライン下ぶん
 * 6px が残る」前提で足していたが、移行元の器の高さは絵と同じ 29px で、6px は出ていなかった
 * （直す前の実測・`pa-verify-assets/A/7969-社員紹介の見出しの絵の実測-1002/走行1/`）.
 */
.page-content__body .pa-form--table .pa-raiten-intro__subheading {
	height: 29px;
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	background: none;
	color: #a3762b;
	font-family: var(--pa-font-family-serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif);
	font-size: 29px;
	font-weight: normal;
	line-height: 29px;
	letter-spacing: 1px;
	white-space: nowrap;
}

/*
 * 項目名の下の「支店一覧 >」。項目名（`th`）は明朝の 19px なので、移行元と同じく
 * ゴシックの 14px・通常の太さへ戻す（`page_inquiry.css` の `table th p.linkBranch`）.
 */
.pa-form-table th .pa-row-link {
	margin: 8px 0 0 45px;
	font-family: var(--pa-font-family-base, "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", sans-serif);
	font-size: 14px;
	font-weight: normal;
}

/*
 * エリア別の帯。移行元の `<dl class="area">`（`display: table` の 2 列組み）を
 * `span` で組み直したもの（組み替えの理由は `PA_Forms_Embed::render_area_radio()`
 * を参照）。幅 805px は移行元の実測値。`max-width: 100%` は器（`.pa-cell` の
 * 行が乗る td）が幅を持つ場合にだけ効く。td はテーブルの自動レイアウトで、
 * 中身の最小幅（この帯の 805px）を下回れないため、750px〜999px の画面幅では
 * `.pa-area` が縮まずそのまま画面の右へはみ出していた（下の 999px 区分で
 * 積み替えて解消する。実測は `.pa-area` 単体の可変化を参照）.
 */
.pa-form .pa-area {
	display: table;
	clear: both;
	width: 805px;
	max-width: 100%;
	margin: 0 0 10px;
	font-size: 16px;
}

.pa-form .pa-area__name {
	display: table-cell;
	width: 120px;
	padding: 10px 0;
	background: #bbbbbb;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	line-height: 1;
}

.pa-form .pa-area__stores {
	display: table-cell;
	padding: 10px 0 10px 19px;
	vertical-align: middle;
}

/*
 * 未選択のあいだの桃色。付け外しは画面側の処理（`assets/js/pa-forms.js` の
 * `setupAreaEmptyPaint()`）が行う。色は移行元の `.reqFalse`（`common.css` の
 * 377 行）と同じ #ffbfbf である.
 */
.pa-form .pa-area__stores--empty {
	background: #ffbfbf;
}

/* 選択肢の間隔。移行元は label の右余白 18px（`table td dl.area dd label`）. */
.pa-form .pa-area .pa-radio {
	margin-right: 18px;
}

/*
 * 移行元の `<br>` と同じ位置の改行（Bug #8521）。既定では出さない。出す幅と
 * フォームは、社員紹介の 1280px 以上の節が決める.
 */
.pa-form .pa-area__break {
	display: none;
}

/*
 * 携帯幅（375px を含む）〜タブレット相当の狭い画面幅でのエリア別の店舗ラジオ
 * （レーン F1・Bug #1986）。
 *
 * 既存の共通 749px 区分（本ファイル前方の `@media screen and (max-width: 749px)`）
 * へ足さず、ここに新しい区分を持つ。`.pa-area` の基準の指定（`display: table` /
 * 固定幅 805px）が本節の後半にあり、後に書いた規則が勝つ CSS の重なりの決まりの
 * ため、上書きは基準より後ろに置く必要がある.
 *
 * `.pa-area` は固定幅 805px を持つ。器（`.pa-cell-field-radio`）の
 * `flex-basis: 100%` や `.pa-area` 自身の `max-width: 100%` では収まらない。
 * この帯が乗る td はテーブルの自動レイアウトで動いており、中身（805px）を
 * 下回る幅には縮まないため、パーセント指定では解決できない（Codex レビュー
 * 指摘・2026-08-25）。実測では 750px〜920px で画面の右へ最大 174px はみ出し、
 * 940px 以上ではみ出しが消えた。境目に余裕を持たせ 999px までをこの区分に含め、
 * 項目名の列を積み替える他の欄（`.pa-form-grid__row` 等）と同じ考え方で、
 * エリアの帯見出し（`dt` にあたる `.pa-area__name`）を店舗の並び（`dd` にあたる
 * `.pa-area__stores`）の上へ積み替え、横あふれを止める。1000px 以上（PC 1440px
 * を含む）は table の自動レイアウトが自然に収まる幅を確保するため、この区分の
 * 対象外のままでよい.
 */
@media screen and (max-width: 999px) {
	.pa-form .pa-area {
		display: block;
		width: auto;
		margin: 0 0 12px;
	}

	.pa-form .pa-area__name {
		display: block;
		width: auto;
		padding: 8px 0;
	}

	.pa-form .pa-area__stores {
		display: block;
		padding: 10px 0 0;
	}

	/*
	 * コメント欄（`textarea.pa-control`）は共通の指定（本ファイル前方）で PC の
	 * 固定幅 786.3px を持つ。この指定は「お問い合わせ・法人からの問い合わせ・
	 * 婚活 EQ 診断の 3 種は 1100px 頭打ちの固定レイアウトなので崩れない」という
	 * 前提で書かれていたが、来店予約はこの 3 種に無い「エリア別ラジオ」を持つため
	 * 上の対応で先に幅を可変にしており、コメント欄だけ固定幅のままだと表全体が
	 * 786.3px を下回れず、750px〜920px の画面幅で画面の右へはみ出したまま残る
	 * （実測。Codex レビュー指摘・2026-08-25）。他の 3 種（既に検収済み）の見た目
	 * は変えたくないため、上書きは来店予約（`data-pa-form="raiten"`）だけに絞る.
	 */
	.pa-form[data-pa-form="raiten"] textarea.pa-control {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
 * レーン F5 Bug #1984: 郵便番号・電話番号・メールアドレスの欄の分割と赤字の注記
 * （婚活 EQ 診断・来店予約・お問い合わせ・法人からの問い合わせ）
 * -------------------------------------------------------------------------- */

/*
 * 分割した欄と間の記号（- / ＠）を 1 つの塊として横に並べる。囲み（.pa-cell）の
 * gap（18px）を記号の左右に効かせないため、塊の中は gap を持たず、記号の margin で
 * 間隔を作る。移行元は欄の margin 10px ずつ + 記号の文字で、欄と欄の間が 36px
 * （PC 1440 の実測・2026-08-25）.
 */
.pa-form .pa-parts {
	display: inline-flex;
	align-items: center;
}

/*
 * 記号と、その直後の入力欄を 1 つの折り返し単位にする（Codex の指摘・PR #2041 の
 * レビュー）。スマートフォン幅で `.pa-parts` が折り返すとき、記号だけが前の行に
 * 取り残されて孤立するのを防ぐ。PC 幅では中の並びが変わるだけで見た目は変わらない.
 */
.pa-form .pa-parts-unit {
	display: inline-flex;
	align-items: center;
}

/*
 * 移行元は記号を素の文字列（`-`）として置いているため、直前・直後の改行と字下げの
 * 空白がブラウザの折り畳みで半角スペース 1 個ぶんずつ足され、欄との間が実測 36px
 * になる（margin 10px + 空白 + 記号 + 空白 で 16px・本文 16px フォント。2026-08-25
 * `https://www.p-a.jp/form/eq/` で実測）。ここでは記号を `aria-hidden` の `span` に
 * したため素の空白が付かず、margin だけでは 25px にしかならない。フォントによる
 * 揺れを避けるため、記号の幅そのものを 16px に固定して合わせる.
 */
.pa-form .pa-parts-sep {
	display: inline-block;
	width: 16px;
	margin: 0 10px;
	text-align: center;
}

/*
 * メールの間の全角 ＠ だけ、移行元の間隔が広い（欄と欄の間 43px。前の欄の
 * margin-right 18px + 記号の前後の空白）。左右で 27px を足して合わせる.
 */
.pa-form .pa-parts-sep--at {
	margin: 0 13px 0 14px;
}

/* 部品の幅は移行元の classic 系統 4 フォームの実測値（PC 1440・2026-08-25） */
.pa-form--table .pa-control.pa-control--44,
.pa-form--mixed .pa-control.pa-control--44 {
	width: 44px;
}

.pa-form--table .pa-control.pa-control--52,
.pa-form--mixed .pa-control.pa-control--52 {
	width: 52px;
}

.pa-form--table .pa-control.pa-control--260,
.pa-form--mixed .pa-control.pa-control--260 {
	width: 260px;
}

/*
 * スマートフォン幅（749px 以下）。メールアドレスの分割欄（260px × 2）は、375px の
 * 画面幅に収まらない（欄 2 つと記号「＠」の合計 563px）。郵便番号（44px + 52px）と
 * 電話番号（52px × 3）は狭い画面でも収まるため、この欄だけ画面幅に合わせて広げ、
 * 塊（`.pa-parts`）を折り返し可にして「＠」記号ごと次の行へ送る（自己検証で発見した
 * 横スクロールの崩れの手当て）。
 *
 * 直前の `.pa-control--260 { width: 260px; }` と詳細度が同じ（クラス3つ）ため、
 * 先に書いた宣言が後勝ちで効く。既存の `.pa-control--340` / `--566` の
 * スマートフォン上書き（このファイル前方の @media 内）も同じ理由でこの宣言より
 * 後ろに置いてある.
 *
 * 「＠」を含む折り返し単位（`.pa-parts-unit--at`）にも幅 100% を与える。単位そのものに
 * 幅が無いと、中の入力欄（`.pa-control--260` の上書きで width:100%）の基準となる親幅が
 * 定まらず、折り返し後も欄が縮んでしまう（Codex の指摘・PR #2041 のレビュー）。
 * 郵便番号・電話番号の折り返し単位はここで対象にしていない（幅は変えず、375px に
 * 収まる現状のままでよいため）.
 */
@media screen and (max-width: 749px) {
	.pa-form--table .pa-control.pa-control--260,
	.pa-form--mixed .pa-control.pa-control--260 {
		width: 100%;
	}

	.pa-form .pa-parts {
		flex-wrap: wrap;
	}

	.pa-form .pa-parts-unit--at {
		width: 100%;
	}
}

/*
 * 赤字の注記（移行元 `css/page_inquiry.css` の `table td span.red`: #e1200f・14px）。
 * 灰色の添え書き（.pa-note）は flex-basis:100% で欄の下の行へ折り返すが、赤字の
 * 注記は移行元が欄の右側に続けて出すため、折り返さずに同じ段へ置く.
 */
.pa-form .pa-note.pa-note--alert {
	flex-basis: auto;
	margin-top: 0;
	color: #e1200f;
	font-size: 14px;
}

/*
 * 携帯幅だけに出す注記（Bug #2042）。移行元は婚活 EQ 診断つき資料請求の
 * スマートフォン専用ページにだけ「半角英数でご入力ください。」を置き、パソコン版に
 * は置かない（`legacy/www.p-a.jp/public/form/view/sp_eq.php:671` と `eq.php` の
 * 突き合わせ）。既定では隠し、狭い画面の節（このファイル前方の
 * `@media screen and (max-width: 749px)` の中）で婚活 EQ 診断だけ出す.
 */
.pa-form .pa-note.pa-note--sp {
	display: none;
}

/* --------------------------------------------------------------------------
 * F4 #1990: OTOCON 予約の行の区切り線と携帯幅の項目名の下線。実値は移行元の
 * form/css/otocon.css（578〜647 行）と sp_otocon.css（657〜684 行）から写した
 * -------------------------------------------------------------------------- */

/*
 * パソコン幅の区切り線。移行元は 2 行目（希望日）と 3 行目（お名前・漢字）に
 * `.form-row--divider`（上の線 #EAB56D・上の内余白 28px・上の外余白 2px）を
 * 付ける。移行先の格子は行に個別の class を持たないため、行の位置
 * （:nth-child）で同じ 2 行を指す。並びは `PA_Forms_Definitions::otocon_fields()`
 * が移行元と同じ順（悩み → 希望日 → お名前 →…）で持つ.
 */
.pa-form--div .pa-form-grid__row:nth-child(2),
.pa-form--div .pa-form-grid__row:nth-child(3) {
	margin-top: 2px;
	padding-top: 28px;
	border-top: 1px solid #eab56d;
}

@media screen and (max-width: 749px) {

	/*
	 * 携帯幅は区切り線をやめ、すべての項目名の下に線を引く（移行元の
	 * スマートフォン版の組み方）。行と格子の間隔も移行元の値
	 * （行の中 15px・行の間 24px）にする。上の共通の積み替え
	 * （`.pa-form .pa-form-grid__row { gap: 8px }` と
	 * `.pa-form .pa-form-grid { gap: 20px }`）と同じ強さのまま後ろに置いて
	 * 上書きするので、他の 6 種の値は動かない.
	 */
	.pa-form--div .pa-form-grid__row:nth-child(2),
	.pa-form--div .pa-form-grid__row:nth-child(3) {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	.pa-form--div .pa-form-grid__label {
		border-bottom: 1px solid #eab56d;
		padding-bottom: 15px;
	}

	.pa-form--div .pa-form-grid__row {
		gap: 15px;
	}

	.pa-form--div .pa-form-grid {
		gap: 24px;
	}

	/*
	 * 「予約する」の押しボタンの上下（Bug #8517）。移行元のスマートフォン版は、
	 * 同意の塊 `.form-consent` の下の外余白 50px と、押しボタンの包み `.form-submit`
	 * の上の外余白 20px（`sp_otocon.css` 868 行）が重なり、あいだが 50px になる。
	 * 押しボタンの下は器 `section.form-section` の下の内余白 40px だけである
	 * （2026-09-26 の実測）。共通の `.pa-form .pa-form-submit { margin: 35px 0 }` の
	 * ままだと、上が 15px 狭く（dev の同意の欄の下の 20px と重なって 35px）、下が
	 * 35px 広い。class 3 つで共通の規則（class 2 つ）に勝たせる.
	 */
	.pa-form.pa-form--div .pa-form-submit {
		margin-top: 50px;
		margin-bottom: 0;
	}
}

/*
 * OTOCON の予約の同意の欄と「予約する」の押しボタン（Bug #8528・ユーザー決定 D598 の
 * ケース (1)。意図的変更の台帳の「OTOCON の振り返りミーティングの予約の送信ボタン」の行）。
 * 値は移行元の `form/css/otocon.css`（パソコン版）と `sp_otocon.css`（携帯版）の
 * `.form-consent` / `.checkbox` / `.form-submit` / `.submit-disabled` / `.reserve-btn` から写した.
 *
 * - 移行元の押しボタンは、同意にチェックを入れるまで灰色の `.submit-disabled`（押せない）で、
 *   入れると橙の `.reserve-btn` に替わる（型紙の末尾の script）。dev は同意の欄の状態を
 *   `:has()` で読んで同じ 2 つの見た目を出し分ける
 * - 押しボタンの高さは、字の行送り `line-height: 80px` にブラウザ既定の上下の内余白 1px が
 *   足されて 82px（携帯版は 60px に足されて 62px）になる。`min-height` は内余白を含む
 *   （共通の規則の `box-sizing: border-box`）ので、高さを決めるのは行送りの側である
 * - チェックの四角の外余白は、移行元が右の 10px だけを書き、残りはブラウザ既定の
 *   チェックボックスの値（上下 3px・左 4px）のままである。これで同意の欄は 266 × 34 になる
 * - 携帯版の同意する前の押しボタンは、移行元の `sp_otocon.css` が地の色と字の色を
 *   押しボタンの包み（`.form-submit`）の側に書いているので、押しボタン自体はブラウザ既定の
 *   押せない形（地 `rgba(239, 239, 239, 0.3)`・字 `rgba(16, 16, 16, 0.3)`・太さ 400）で、
 *   包みの灰色（#f0f0f0）の上に重なって見える。dev も同じ値を 2 つに分けて持つ
 */
.pa-form[data-pa-form="otocon"] .pa-field-checkbox {
	margin: 42px 0 0;
	text-align: center;
}

.pa-form[data-pa-form="otocon"] .pa-field-checkbox .pa-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin: 0;
	color: #3b4043;
	font-size: 16px;
}

.pa-form[data-pa-form="otocon"] .pa-field-checkbox .pa-checkbox a {
	text-decoration: underline;
}

.pa-form[data-pa-form="otocon"] .pa-field-checkbox input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin: 3px 10px 3px 4px;
	border: 1px solid #c8c8c8;
	background: #ffffff;
	-webkit-appearance: none;
	appearance: none;
}

.pa-form[data-pa-form="otocon"] .pa-field-checkbox input[type="checkbox"]:checked::after {
	position: absolute;
	top: 3px;
	left: 8px;
	width: 8px;
	height: 14px;
	border-right: 2px solid #f0952b;
	border-bottom: 2px solid #f0952b;
	transform: rotate(45deg);
	content: "";
}

.pa-form[data-pa-form="otocon"] .pa-form-submit button {
	width: 600px;
	min-height: 80px;
	padding: 1px 6px;
	border: 0;
	border-radius: 9999px;
	background: linear-gradient(90deg, #ef7902 0%, #f09f3a 100%);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
	color: #ffffff;
	font-size: 32px;
	font-weight: 600;
	line-height: 80px;
}

/*
 * `(hover: hover)` の節（このファイルの前方）が、押しボタンに 1px の金茶の罫線を足し、
 * 乗ったときに地を白・字を金茶に替える（`.pa-form:not(.pa-form--dl) .pa-form-submit:not(
 * .pa-form-submit--blocked) button` と `:hover`）。移行元の OTOCON の押しボタンは罫線を
 * 持たず、乗っても見た目が変わらない（`otocon.css` に `:hover` の規則が無い）ので、
 * 同じ強さで後ろに置いて打ち消す.
 */
.pa-form[data-pa-form="otocon"] .pa-form-submit:not(.pa-form-submit--blocked) button,
.pa-form[data-pa-form="otocon"] .pa-form-submit:not(.pa-form-submit--blocked) button:hover {
	border: 0;
	background-color: transparent;
	color: #ffffff;
	transition: none;
}

.pa-form[data-pa-form="otocon"]:has(input[name="ppol"]:not(:checked)) .pa-form-submit button,
.pa-form[data-pa-form="otocon"]:has(input[name="ppol"]:not(:checked)) .pa-form-submit button:hover {
	background: #f0f0f0;
	box-shadow: none;
	color: #adadad;
}

@media (min-width: 750px) {
	.pa-form.pa-form--div[data-pa-form="otocon"] .pa-form-submit {
		margin: 26px 0 0;
	}
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="otocon"] .pa-field-checkbox {
		margin-top: 22px;
	}

	.pa-form[data-pa-form="otocon"] .pa-field-checkbox .pa-checkbox {
		line-height: 1.5;
	}

	.pa-form[data-pa-form="otocon"] .pa-form-submit button {
		width: 100%;
		min-height: 60px;
		font-size: 20px;
		line-height: 60px;
	}

	.pa-form[data-pa-form="otocon"]:has(input[name="ppol"]:not(:checked)) .pa-form-submit {
		border-radius: 9999px;
		background: #f0f0f0;
	}

	/* 乗ったときも同じ色を保つ（前方のパソコン幅の規則は `:hover` 付きで、これより強い）. */
	.pa-form[data-pa-form="otocon"]:has(input[name="ppol"]:not(:checked)) .pa-form-submit button,
	.pa-form[data-pa-form="otocon"]:has(input[name="ppol"]:not(:checked)) .pa-form-submit button:hover {
		background: rgba(239, 239, 239, 0.3);
		color: rgba(16, 16, 16, 0.3);
		font-weight: 400;
	}
}

/* --------------------------------------------------------------------------
 * F2: お問い合わせ・法人からの問い合わせの、ページ上部の見出しと案内文
 * （Bug #1987 / #1988）。
 *
 * 実値は配信中の移行元（`/form/contact/` と `/form/corporation/`。パソコン幅
 * 1440px で実測）から写した。出どころは `public/css/page_inquiry.css` の
 * `.category_ttl` / `.page_ttl` と `#reservation .form_text` である。器は
 * `PA_Forms_Embed::render_contact_intro()` / `render_corporate_intro()` が出し、
 * この 2 種にしか出ないため、同じ表組み（`.pa-form--table`）の来店予約・
 * ご紹介プログラムには要素そのものが無く、見た目は変わらない.
 * -------------------------------------------------------------------------- */

/*
 * 見出し 2 段に共通の打ち消し。フォームは固定ページの本文の器
 * （`.page-content__body`）の中に出るため、テーマ（`main.css`）が本文の h2 に
 * 与える下線と下の内余白、h3 に与える左の罫線と左の内余白がそのまま付いてしまう
 * （実測で h2 に下 10px + 線、h3 に左 12px + 線）。移行元の見出しは画像だけで
 * 飾りを持たないので、ここで消す.
 */
.pa-form--table .pa-form-intro__heading,
.pa-form--table .pa-form-intro__subheading {
	padding: 0;
	border: 0;
	background: none;
}

/* 大見出し画像（`.category_ttl`。下余白 50px・行の高さ 0） */
.pa-form--table .pa-form-intro__heading {
	margin: 0 0 50px;
	line-height: 0;
}

/*
 * 副見出し画像（`.page_ttl`。下余白 30px）。移行元は行の高さを 0 にしておらず、
 * 高さ 29px の画像の下に文字のベースライン下ぶんの 6px が残る（実測で器の高さ
 * 35px）。ここでは行の高さを 0 にそろえ、その 6px を下余白へ足して 36px と書く。
 * 画像の下端から次の要素までの距離は移行元と同じになる.
 */
.pa-form--table .pa-form-intro__subheading {
	margin: 0 0 36px;
	line-height: 0;
}

.pa-form--table .pa-form-intro__heading img,
.pa-form--table .pa-form-intro__subheading img {
	max-width: 100%;
	height: auto;
}

/*
 * 案内文（`#reservation .form_text`。15px・行送り 166%・下余白 25px）。
 * 法人からの問い合わせの 4 行の段落は移行元で `.mb10` も持つが、`#reservation
 * .form_text` の 25px が詳細度で勝っており、実測の段落間隔も 25px だった。
 * よって区分は 1 つでよい.
 */
.pa-form--table .pa-form-intro__text {
	margin: 0 0 25px;
	font-size: 15px;
	line-height: 1.66;
}

/*
 * スマートフォン幅（749px 以下）。実値は配信中の移行元（`/sp/form/contact/` と
 * `/sp/form/corporation/`。幅 375px で実測）から写した。出どころは
 * `sp/css/style.css` の `#request .category_ttl`（下余白 30px）・`#request
 * .form_ttl`（下余白 20px）・`#request .form_text`（12px・行送り 145%・
 * 内余白 20px 6.25%）である。
 *
 * 見出し画像はスマートフォン用の別画像（`<picture>` の `source`）へ切り替わる。
 * 幅 640px の画像なので、器いっぱい（移行元は画面幅いっぱい）へ縮めて出す。
 * 副見出しはスマートフォン版では画像の下にベースライン下の隙間が無い
 * （実測で器の高さ = 画像の高さ）ため、下余白は 20px のままでよい。
 *
 * 案内文の左右の内余白は移行元が画面幅の 6.25%（375px で 23.4px）。移行先は
 * ページの外枠（`.pa-form-frame__wrapper`）が先に左右 16px を持つので、ここでは
 * 8px だけ足して合計 24px ≒ 移行元とする。%で書くと外枠のぶんが二重に効く.
 */
@media screen and (max-width: 749px) {
	.pa-form--table .pa-form-intro__heading {
		margin-bottom: 30px;
	}

	.pa-form--table .pa-form-intro__subheading {
		margin-bottom: 20px;
	}

	.pa-form--table .pa-form-intro__heading img,
	.pa-form--table .pa-form-intro__subheading img {
		width: 100%;
	}

	.pa-form--table .pa-form-intro__text {
		margin: 0;
		padding: 20px 8px;
		font-size: 12px;
		line-height: 1.45;
	}

	/*
	 * お問い合わせと法人からの問い合わせだけ、見出しの塊を移行元と同じ画面いっぱいに広げる（Bug #7961。法人は Task #9558 で足した。
	 * 移行元の `form/view/sp_corporation.php` は `sp_contact.php` と同じ器と CSS で、帯の上端も同じ 209.2 である）。
	 * 移行元は見出しの絵を画面の幅いっぱい（375px で 375 × 50.39）で出し、器
	 * `#request` の上の内余白は 25px である。dev は外枠（`.pa-form-frame__wrapper`）が
	 * 上 48px・左右 16px の内余白を持つので、その差を外余白で打ち消す。外枠を直に
	 * 触らないのは、同じ外枠をフォーム 10 種が使うためである.
	 *
	 * 案内文の左右の内余白も、画面いっぱいの塊の中なので移行元と同じ 6.25% になる.
	 */
	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro {
		margin: calc(25px - 48px) -16px 0;
	}

	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro__text {
		padding: 20px 6.25%;
	}

	/*
	 * 見出しの下の空き。移行元は大見出しの下 30px・副見出しの下 20px である。
	 * 🚨 **上の `.pa-form--table .pa-form-intro__heading`（0,2,0）は効いていない。**
	 * テーマ（`main.css`）の `.page-content__body :is(h2, …):has(> :is(img, picture):only-child)`
	 * （0,2,2）が勝ち、2 つとも 18px になっていた（2026-09-26 の下見の実測）。
	 * ここは `[data-pa-form]` を足して (0,3,0) にし、お問い合わせだけで勝たせる.
	 */
	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro__heading {
		margin-bottom: 30px;
	}

	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro__subheading {
		margin-bottom: 20px;
	}
}

/*
 * お問い合わせのパソコン幅（750px 以上）の見出しの塊と入力の表（Bug #8520）。
 * 移行元のパソコン版（`form/view/contact.php`・`css/page_inquiry.css`）の値に
 * 合わせる。2026-09-26 に幅 1440 で両側を CDP で読んで確かめた.
 *
 * - 見出しの塊の上: 移行元は器 `#reservation` が内余白を持たず、見出しが器の
 *   上端に付く。dev の外枠（`.pa-form-frame__wrapper`）の上の内余白 48px を、
 *   携帯幅と同じく外余白で打ち消す（外枠はフォーム 10 種が使うので触らない）
 * - 見出しの下: 移行元は `.category_ttl { margin-bottom: 50px }`、副見出しの下は
 *   `.page_ttl { margin-bottom: 30px }`。上の既定（0,2,0）はテーマの
 *   `:has(> :is(img, picture):only-child)`（0,2,2）に負けて 25px になっていた
 *   ので、携帯幅と同じく `[data-pa-form]` を足して勝たせる
 * - 副見出しの箱: 移行元は行送りが `normal`（字は 13px）で、絵 29px の下に字の
 *   下がりが残り、箱が 35px になる
 * - 進み具合の帯（`p.page_flow_img`・塊 74px と下の外余白 30px）は、ユーザー決定 D777（2026-10-06）で
 *   出すことになった（Task #9558。2026-09-26 の「写さない」の判断は改めた）。副見出しの下 30px のあとに帯、
 *   帯の下 36px（絵 68px と塊 74px の差 6px ＋ 外余白 30px）のあとに案内文が来る
 * - 法人からの問い合わせ（`form/view/corporation.php`）も同じ器と CSS で、帯の上端も同じ 360 である（Task #9558 で足した）
 */
@media (min-width: 750px) {
	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro {
		margin-top: -48px;
	}

	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro__heading {
		margin-bottom: 50px;
	}

	.pa-form--table:is([data-pa-form="toiawase"], [data-pa-form="houjin"]) .pa-form-intro__subheading {
		margin-bottom: 30px;
		font-size: 13px;
		line-height: normal;
	}

	/*
	 * 見出しの器と欄の器の縦の寄せ。移行元は `th`・`td` とも既定の
	 * `vertical-align: middle` のままである。dev の既定（`top`）だと、欄の器が
	 * 高い行で「必須」の札が上に寄る（内容の行で 74.65px 上）.
	 *
	 * 会員紹介（`reservation_intro`）とご紹介（`reservation3`）の来店予約も、移行元は同じ
	 * `css/page_inquiry.css` の表で、`th`・`td` に `vertical-align` を持たない（91〜102 行。
	 * 読み込む CSS をたどって 0 件）。Bug #9340 で足した.
	 *
	 * 🚨 **社員紹介（`reservation_intro_02`）は足さない。**移行元の社員紹介だけが読む
	 * `css/reservation_intro_form02.css` の 190 行が `table th { vertical-align: top }` を持ち、
	 * 項目名は移行元でも上寄せである（Bug #9340 の下見の走行1 で、直す前の dev と移行元が一致した）.
	 */
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table th,
	.pa-form[data-pa-form="reservation_intro"] .pa-form-table td,
	.pa-form[data-pa-form="reservation3"] .pa-form-table th,
	.pa-form[data-pa-form="event"] .pa-form-table th,
	.pa-form[data-pa-form="reservation3"] .pa-form-table td,
	.pa-form[data-pa-form="event"] .pa-form-table td,
	.pa-form[data-pa-form="toiawase"] .pa-form-table th,
	.pa-form[data-pa-form="toiawase"] .pa-form-table td,
	.pa-form[data-pa-form="request_lp"] .pa-form-table th,
	.pa-form[data-pa-form="request_intro"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_ad"] .pa-form-table th,
	.pa-form[data-pa-form="request_online"] .pa-form-table th,
	.pa-form[data-pa-form="request_as"] .pa-form-table th,
	.pa-form[data-pa-form="request_lp"] .pa-form-table td,
	.pa-form[data-pa-form="request_intro"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_test"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_tool_as"] .pa-form-table td,
	.pa-form[data-pa-form="request_ad"] .pa-form-table td,
	.pa-form[data-pa-form="request_online"] .pa-form-table td,
	.pa-form[data-pa-form="request_as"] .pa-form-table td {
		vertical-align: middle;
	}

	/*
	 * 内容の添え書き。移行元は欄の下の `<br>` に続く素の字で、欄の器の字
	 * （16px・行送り normal・黒）のまま 2 行に折り返す。dev の既定の添え書き
	 * （0.85em・#555）だと 1 行に収まり、行が 15.48px 低くなる。移行元の字の行は
	 * 欄の下端からすぐ始まる（欄と同じ行の箱の下端が欄の下端に重なる）ので、上の
	 * 外余白で欄の器の段の間隔 8px を打ち消す。欄の下端から字の上端までは、行送りの
	 * 上の半分だけの 4px になる（2026-09-26 の下見の実測で移行元と同じ）.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-form-table tr:has(#pa-field-content) .pa-note {
		margin-top: -8px;
		color: #000000;
		font-size: 16px;
		line-height: normal;
	}

	/*
	 * 姓名の欄の間隔。移行元は `label.size01`（幅 40px）と欄のあいだ、欄の右の外余白
	 * 18px と次の `label` のあいだに、それぞれ空白 1 字（4.57px）が入る。dev は
	 * 小見出しと欄のあいだが 8px、欄と次の小見出しのあいだが 18px である.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_lp"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_intro"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_ad"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_online"] .pa-cell:has(.pa-sub-label),
	.pa-form[data-pa-form="request_as"] .pa-cell:has(.pa-sub-label) {
		column-gap: 22.57px;
	}

	.pa-form[data-pa-form="toiawase"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_lp"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_intro"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_ad"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_online"] .pa-cell-field:has(> .pa-sub-label),
	.pa-form[data-pa-form="request_as"] .pa-cell-field:has(> .pa-sub-label) {
		column-gap: 4.57px;
	}

	/*
	 * 小見出し（姓・名・セイ・メイ）の縦の位置。移行元は `label` を欄と同じ行に
	 * 並べ、字の基準線でそろえるので、箱の上端が欄の上端から 4.44px 下に来る
	 * （2026-09-26 の実測）。dev の既定（中央寄せ）だと 6.16px 下になる.
	 */
	.pa-form[data-pa-form="toiawase"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_lp"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_intro"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_tool_test"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_tool_ad"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_tool_as"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_ad"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_online"] .pa-cell-field > .pa-sub-label,
	.pa-form[data-pa-form="request_as"] .pa-cell-field > .pa-sub-label {
		align-self: flex-start;
		margin-top: 4.44px;
	}
}

/* --------------------------------------------------------------------------
 * F3 レーン・Bug #1989: ご紹介プログラムの、フォームの前に置くページ本文。
 *
 * 実値は移行元のパソコン版 `legacy/www.p-a.jp/public/css/mypage_form02.css`
 * （成婚退会者様限定版）と `mypage_form03.css`（通常版）から写した。携帯向け
 * （749px 以下）の実値は携帯版の `public/sp/form/myintro/css/` 配下から写した
 * （携帯版は html の文字サイズが 62.5% で 1rem = 10px。ここでは px に直して書く）.
 *
 * 本文の幅は移行元の器（`.container_full` の 943px）に合わせる。フォームの表の
 * 幅（器の差は別 Issue の扱い）には手を触れない.
 * -------------------------------------------------------------------------- */

.pa-shoukai-intro {
	max-width: 943px;
	margin: 0 auto;
}

.pa-shoukai-intro img {
	max-width: 100%;
	height: auto;
}

/*
 * 見出しの画像は行の高さの隙間を出さずに敷き詰める。h2 はテーマ（`main.css`）が
 * `.page-content__body h2` に下線・下の内余白・文字色・字の大きさを与えており
 * （詳細度 0,1,1）、単独クラス（0,1,0）のままでは負けて margin/line-height も
 * 含めて反映されない。`.pa-form--table` を前置して詳細度 0,2,0 に上げ、テーマの
 * 飾りを打ち消す（F2 の `.pa-form-intro__heading` と同じ手当て。Codex 指摘）.
 */
.pa-form--table .pa-shoukai-normal__hero,
.pa-form--table .pa-shoukai-premium__hero {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
}

.pa-shoukai-normal__hero img,
.pa-shoukai-premium__hero img {
	display: block;
	width: 100%;
}

/* 画面側（setupShoukaiIntro）が選ばれていない版に hidden を付ける. */
.pa-shoukai-intro__block[hidden] {
	display: none;
}

/* ぶら下げの字下げ（移行元の `p.indent-1`）. */
.pa-shoukai-indent {
	padding-left: 1em;
	text-indent: -1em;
}

/* フォームへの飛び先。見た目を持たない印だけの要素. */
.pa-shoukai-intro__form-anchor {
	display: block;
}

/* 通常版（mypageform_03）。 */

/*
 * `<p>` タグに直接付くクラスは、テーマの `.page-content__body p`（詳細度 0,1,1・
 * このファイルより後に読み込まれる）に margin が負ける。`.pa-shoukai-premium__txt`
 * と同じ理由で `.pa-form--table` を前置する（Codex 指摘・第 3 便）.
 */
.pa-form--table .pa-shoukai-normal__button {
	margin: 0;
	padding: 40px;
	text-align: center;
}

/* 2 つ目のボタンは移行元の携帯版だけが持つ. */
.pa-shoukai-normal__button--sp {
	display: none;
}

.pa-shoukai-normal__flow {
	padding-bottom: 30px;
}

/*
 * `position: relative` は携帯幅（749px 以下）で灰色の帯を画面いっぱいへ広げる
 * ときの基準点として使う（下の @media 節の `::before` を参照）。パソコン幅では
 * 効果を持たない.
 */
.pa-shoukai-normal__step {
	position: relative;
	max-width: 862px;
	margin: 0 auto;
	padding: 40px 0;
	background-color: #f3f3f3;
	text-align: center;
}

/*
 * h3 も同じ理由（テーマの `.page-content__body h3` が左の罫線と内余白を持つ・
 * 詳細度 0,1,1）で `.pa-form--table` を前置する（Codex 指摘）.
 */
.pa-form--table .pa-shoukai-normal__step-heading {
	margin: 10px 0 25px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

.pa-shoukai-normal__step-figure {
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.pa-shoukai-normal__step-figure--sp {
	display: none;
}

.pa-shoukai-normal__note {
	padding: 0 30px;
	text-align: left;
}

/* 同上の理由で `.pa-form--table` を前置する（Codex 指摘）. */
.pa-form--table .pa-shoukai-normal__note p {
	font-size: 12px;
	line-height: 1.6;
	margin: 0;
}

/* 成婚退会者様限定版（mypageform_02）。 */

.pa-shoukai-premium__flow {
	padding: 20px 0;
	background: url("../images/shoukai/pc/premium-bg.png") repeat scroll left top;
}

/*
 * `.pa-form--table` を前置して詳細度を上げる。テーマの本文の `p` の規則
 * （`.page-content__body p`。詳細度 0,1,1）と同じ詳細度のままだと、あとに
 * 読み込まれるテーマ側が勝って左右の余白が付かず全幅になる（レビューの
 * 実測・2026-08-25）.
 */
.pa-form--table .pa-shoukai-premium__txt {
	margin: 0 50px;
	padding-bottom: 10px;
	font-size: 16px;
	line-height: 1.6;
}

.pa-shoukai-premium__notes {
	max-width: 830px;
	margin: 5px auto 0;
	font-size: 12px;
}

/* 同上の理由で `.pa-form--table` を前置する（Codex 指摘）. */
.pa-form--table .pa-shoukai-premium__notes p {
	margin: 0;
	line-height: 1.6;
}

/* 見出し画像（`<p>` タグ）も同じ理由で前置する. */
.pa-form--table .pa-shoukai-premium__flow-title {
	margin: 30px 0 0;
	text-align: center;
}

.pa-shoukai-premium__step {
	max-width: 860px;
	margin: 30px auto 0;
}

.pa-shoukai-premium__step-list {
	margin: 0;
	padding: 20px;
	list-style: none;
	border: 1px solid #b5a27c;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.5);
}

/*
 * 高さは移行元の実測 59px（レビューの実測・2026-08-25）。テーマの
 * `.page-content__body li { margin-bottom: 0.5em }`（詳細度 0,1,1・14px 基準で
 * 7px）がこの箇条書きにも掛かり、テーマ全体の `box-sizing: border-box` と
 * 合わさって箱が薄く見える（実測 42px）ため、`min-height` で打ち消す。
 *
 * `margin-bottom` は `.pa-form--table` を前置して詳細度を 0,2,0 へ上げないと
 * 上のテーマの規則（0,1,1）に負けて 7px が残る（`.pa-shoukai-premium__txt` と
 * 同じ事故。再レビューで指摘・項目間隔が 66px のまま残っていた）.
 */
.pa-form--table .pa-shoukai-premium__step-item {
	min-height: 59px;
	margin-bottom: 0;
	padding-left: 32px;
	padding-top: 17px;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	background-repeat: no-repeat;
	background-position: left top;
}

.pa-shoukai-premium__step-item--no1 {
	background-image: url("../images/shoukai/pc/premium-i_no1.png");
}

.pa-shoukai-premium__step-item--no2 {
	background-image: url("../images/shoukai/pc/premium-i_no2.png");
}

.pa-shoukai-premium__step-item--no3 {
	background-image: url("../images/shoukai/pc/premium-i_no3.png");
}

.pa-shoukai-premium__step-item--no4 {
	background-image: url("../images/shoukai/pc/premium-i_no4.png");
}

.pa-shoukai-premium__step-item--no5 {
	background-image: url("../images/shoukai/pc/premium-i_no5.png");
}

/* いずれも `<p>` タグに直接付くクラスなので `.pa-form--table` を前置する（Codex 指摘）. */
.pa-form--table .pa-shoukai-premium__lead {
	margin: 50px 0 0;
	text-align: center;
}

.pa-form--table .pa-shoukai-premium__button {
	margin: 30px 0 15px;
	text-align: center;
}

/*
 * 携帯向け（749px 以下）。既存の同幅のメディアクエリの塊へは足さず、別の塊に
 * する（同じ位置へ複数の PR が追記して衝突するのを防ぐ・レーン共通指示）.
 */
@media screen and (max-width: 749px) {

	/*
	 * 通常版。実値は `sp/form/myintro/css/mypage_form03.css`（1rem = 10px）。
	 * パソコン側を `.pa-form--table` 前置（詳細度 0,2,0）にしたため、ここも同じ
	 * 前置にしないと、詳細度で負けて携帯側の上書きが効かない（Codex 指摘・
	 * 同型の再発防止で携帯側の塊を一括点検）.
	 */
	.pa-form--table .pa-shoukai-normal__button {
		padding: 25px;
	}

	.pa-shoukai-normal__button--sp {
		display: block;
	}

	/*
	 * 灰色の帯そのものは画面の幅いっぱいに広げる（移行元の実測。レビュー・
	 * 2026-08-25）。箱自身の幅（82%）は見出し画像・流れの図の位置決めに使って
	 * いるため変えず、背景だけを `::before` で画面幅へ広げる。広げ方は `main.css`
	 * の全幅表示と同じ書き方（幅 100vw と左の負の余白）で、`.pa-form-frame__wrapper`
	 * が既に持つ `overflow: clip`（`form-frame.css`）がはみ出しを吸収する.
	 */
	.pa-shoukai-normal__step {
		max-width: 82%;
		padding: 20px 0 5px;
		background-color: transparent;
	}

	.pa-shoukai-normal__step::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		z-index: -1;
		width: 100vw;
		margin-left: -50vw;
		background-color: #f3f3f3;
	}

	.pa-shoukai-normal__step-heading img {
		max-width: 40%;
	}

	.pa-shoukai-normal__step-figure {
		margin: 0 auto 20px;
	}

	.pa-shoukai-normal__step-figure--pc {
		display: none;
	}

	.pa-shoukai-normal__step-figure--sp {
		display: block;
	}

	.pa-shoukai-normal__note {
		padding: 0 15px 20px;
	}

	/*
	 * 移行元の携帯版の指定は `1.1rem` だが、このページだけ html の文字サイズが
	 * 13px（他の携帯ページは 10px）のため、実際の表示は 14.3px である（2026-08-25
	 * に配信中ページで実測）。実測の表示へ合わせる.
	 */
	/* パソコン側の `.pa-form--table .pa-shoukai-normal__note p` に合わせて前置する. */
	.pa-form--table .pa-shoukai-normal__note p {
		font-size: 14.3px;
	}

	/* 成婚退会者様限定版。実値は同 `mypage_form02.css`. */
	.pa-shoukai-premium__flow {
		padding: 20px 0 30px;
	}

	.pa-form--table .pa-shoukai-premium__txt {
		margin: 0 20px;
		font-size: 13px;
	}

	/* 移行元の携帯版は字下げ段落に大きさの指定が無く、13px を継承する（実測）. */
	.pa-shoukai-premium__notes {
		margin: 5px 20px 0;
		font-size: 13px;
	}

	/* margin を持つので、ここも `.pa-form--table` を前置する（Codex 指摘）. */
	.pa-form--table .pa-shoukai-premium__flow-title {
		margin: 25px auto 15px;
	}

	.pa-shoukai-premium__step {
		max-width: 94%;
	}

	/*
	 * 番号アイコンを携帯版の画像（33×93）へ切り替える。移行元の携帯版は
	 * アイコンと文を表組み（table-cell）で縦中央に揃えるため、ここでは
	 * フレックスの縦中央で同じ見え方にする（行の高さ 88px の実測に合わせる）.
	 */
	/*
	 * パソコン側の `.pa-form--table .pa-shoukai-premium__step-item`（詳細度 0,2,0）
	 * に min-height / padding-top / padding-left / font-size で負けないよう、
	 * ここも `.pa-form--table` を前置する（Codex 指摘）.
	 */
	.pa-form--table .pa-shoukai-premium__step-item {
		display: flex;
		align-items: center;
		min-height: 88px;
		padding-top: 0;
		padding-left: 43px;
		font-size: 13px;
		background-size: 31px auto;
	}

	.pa-shoukai-premium__step-item--no1 {
		background-image: url("../images/shoukai/sp/premium-i_no1.png");
	}

	.pa-shoukai-premium__step-item--no2 {
		background-image: url("../images/shoukai/sp/premium-i_no2.png");
	}

	.pa-shoukai-premium__step-item--no3 {
		background-image: url("../images/shoukai/sp/premium-i_no3.png");
	}

	.pa-shoukai-premium__step-item--no4 {
		background-image: url("../images/shoukai/sp/premium-i_no4.png");
	}

	.pa-shoukai-premium__step-item--no5 {
		background-image: url("../images/shoukai/sp/premium-i_no5.png");
	}

	.pa-form--table .pa-shoukai-premium__lead {
		margin: 30px 20px 0;
	}

	.pa-form--table .pa-shoukai-premium__button {
		margin: 30px 20px 15px;
	}
}

/* --------------------------------------------------------------------------
 * Task #2230 の第 1 段: 完了画面の本文（お問い合わせ・法人からの問い合わせ・
 * OTOCON 予約）。器は `PA_Forms_Thanks_Body` が出す.
 *
 * 実値の出どころは移行元の CSS である。パソコン幅は `public/css/page_inquiry.css`
 * （`.category_ttl` / `.page_ttl` / `.page_flow_img` / `#complete .thanks_box` /
 * `#complete .thanks_box .thanks_copy` / `#complete .text_back`）と
 * `public/css/style.css`（`.mb35`）・`public/css/common.css`（`.serif`）。携帯幅は
 * `public/sp/css/style.css`（`#request.thanks` / `#request .category_ttl` /
 * `#request .form_ttl` / `#request .thanks_text` / `.tac` / `.mb20` /
 * `.back_top`）・`public/sp/css/basic.css`（基準の文字の大きさ 13px）・
 * `public/sp/css/common.css`（`.serif` と `img` の敷き詰め）である。
 * OTOCON だけは専用の `public/form/css/otocon.css` と `public/form/css/sp_otocon.css`
 * から写した.
 *
 * **移行元が `rem` で書いている値は px に直して書く。** 移行元は `html` の文字の
 * 大きさを 16px に固定しているが、移行先のテーマは別の値を持つ。`rem` のまま写すと
 * 文字の大きさが変わってしまう.
 *
 * ## テーマの共通指定との衝突
 *
 * 本文は固定ページの器（`.page-content__body`）の中に出るため、テーマ（`main.css`）が
 * 本文の `h2` に与える下線・下の内余白・文字色と、`h3` に与える左の罫線・左の内余白が
 * そのまま付いてしまう。`p` の下余白も上書きされる。移行元の見出しは画像だけで飾りを
 * 持たないので、ここで打ち消す.
 *
 * 打ち消しには `!important` を使わない。テーマ側の詳細度が 0,1,1
 * （`.page-content__body h2`）なので、**`.pa-thanks-body` を前置して 0,2,0 に
 * 上げて勝たせる**（既存の `.pa-form--table .pa-shoukai-normal__hero` と同じ手当て）.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * 本文が載る面の幅を、移行元と同じ 1,100px にする。
 *
 * 完了画面はテーマの汎用テンプレート `page.php` が出すため、本文が
 * `.page-content__body` の中に入る。テーマ（`main.css`）はこの器を
 * `max-width: 800px` に絞っており（記事・固定ページの読みやすさのための値）、
 * その外側の柱 `.page-content` も `max-width: 1120px` と左右 15px の内余白を持つ.
 *
 * 移行元の完了画面の面は 1,100px 固定である（お問い合わせ・法人は
 * `public/css/page_inquiry.css` の `#contents { width: 1100px }`、OTOCON は
 * `public/form/css/otocon.css` の `.container { width: min(100% - 40px, 1100px) }`）。
 * 絞りをそのままにすると、**送信完了の帯の画像（実寸 1,100 × 68px）が 800px まで
 * 縮み、面の幅が移行元と 300px 食い違う**.
 *
 * **`main.css` は全カテゴリーの共有ファイルなので触らない。** 完了画面だけを狙って、
 * この CSS の側から絞りを外す。狙い撃ちには `:has()` を使い、`.pa-thanks-body` を
 * 出すページ（お問い合わせ・法人・OTOCON の完了画面）だけに当てる。詳細度は 0,2,0
 * でテーマ側（0,1,0）より高いため、`!important` は使わない.
 *
 * 柱の幅は「面の 1,100px ＋ 内余白の左右 15px」= 1,130px と書く。内余白を残すのは、
 * 画面の幅が 1,130px を下回るときに本文が画面の端に貼り付かないようにするためである.
 * -------------------------------------------------------------------------- */

.page-content:has(.pa-thanks-body) {
	max-width: 1130px;
}

/* --------------------------------------------------------------------------
 * 本文の器の下の内余白（Bug #3123・PR #3118 の副作用）
 *
 * 🚨 **移行元のパソコン版は、フォームの完了画面だけ下の内余白 55px を持つ。**
 * 共通 CSS は `#contents { padding: 0 }`（`public/css/style.css` 1296〜1301 行）
 * だが、ページ別 CSS が後から上書きしている。
 *
 *     public/css/page_inquiry.css:9  #contents { margin: 0 auto; padding-bottom: 55px; width: 1100px }
 *     public/css/page_event.css:9    #contents { margin: 0 auto; padding: 63px 0 55px; width: 1100px }
 *
 * 読み込み順も確かめた。`public/form/template/request/thanks/request_thanks.html` の
 * 10〜12 行が `import.css`（この中で共通の `padding: 0` を読む）→ `page_inquiry.css`
 * の順なので、同じ詳細度で **55px が勝つ**。
 *
 * PR #3118 はテーマ共通の規則から下の内余白を外し、**この画面を 55px → 0px に
 * してしまった**（直す前は 60px で移行元より +5px、いまは −55px）。ここで戻す。
 *
 * 🚨 **この画面は下部のパンくずを出さないものがある**（婚活EQ診断・来店予約・
 * ご紹介プログラム・OTOCON。`inc/form-frame.php` の `pa_form_frame_shows_breadcrumb()`）。
 * その場合この 55px は本文とフッターの間の空きになる。
 *
 * 🚨 **イベントの完了画面が持つ上の内余白 63px は、ここでは扱わない。**
 * PR #3118 は下の内余白しか触っておらず、63px は元からある別の差である
 * （Bug #3123 の本文に記録し、司令塔預かりとした）。
 *
 * 🚨 **携帯幅でも 55px のままにする（Bug #9086・2026-09-30）。**移行元の正式な URL（`/form/<種類>/thanks/`）は、
 * `form/.htaccess` の書き換えで dv の付かない入口へ回り、端末に関係なくパソコン版の型紙を出す。移行元の `.htaccess` は
 * 端末で転送する条件を持たず、型紙の中にも転送の JS が無い。スマホで開いた実測（幅 375・携帯の UA・お問い合わせ・資料請求・
 * 法人）でも、最終の URL は頼んだ URL のままで、`#contents` の下の内余白は 55px だった
 * （`pa-verify-assets/A/9086-完了画面の正式URLの携帯の読み-0930/走行1/`）。携帯版の型紙（`sp_` 付き）は、`/sp/form/` の
 * URL から入ったときだけ出る。フォームの完了画面の携帯幅は、スマホの利用者が実際に着地する姿を正とする（リーダーの判断・
 * Bug #7334 と同じ立場）.
 *
 * 以前はここに「携帯幅では 0 に戻す」規則を置いていた。携帯版の型紙を前提にした値で、しかも注釈の書き方の誤りで
 * どの画面にも当たっていなかった（Bug #9086）。当たっていない規則なので、消しても見た目は変わらない.
 * テーマ共通の携帯幅の 20px（`main.css` の `.page-content { padding-bottom: 20px }`・詳細度 0,1,0）には、
 * この規則（0,2,0）が勝つ.
 *
 * 🚨 **この節の注釈に、移行元の道すじを glob の形で書かない。**アスタリスクとスラッシュが続くと注釈がそこで閉じ、
 * 残りの字が次の規則の選択子に付いて、規則が黙って当たらなくなる（Bug #9086 の原因）.
 * -------------------------------------------------------------------------- */

.page-content:has(.pa-thanks-body) {
	padding-bottom: 55px;
}

.page-content__body:has(.pa-thanks-body) {
	max-width: none;
}

/*
 * OTOCON だけは、移行元の左右の余白が 20px である（`.container` の `100% - 40px`）。
 * 柱の内余白を 20px にそろえ、柱の幅も「1,100px ＋ 20px × 2」= 1,140px にする。
 * こうすると画面が広いときの面は 1,100px、狭いときの左右の余白は 20px となり、
 * どちらも移行元と同じになる.
 */
.page-content:has(.pa-thanks-body--otocon) {
	max-width: 1140px;
	padding-right: 20px;
	padding-left: 20px;
}

.pa-thanks-body img {
	max-width: 100%;
	height: auto;
}

/* 見出し 2 段と帯に共通の、テーマの飾りの打ち消し */
.pa-thanks-body .pa-thanks-body__heading,
.pa-thanks-body .pa-thanks-body__subheading,
.pa-thanks-body .pa-thanks-body__flow {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	letter-spacing: normal;
}

/*
 * 大見出しの画像（`.category_ttl`。下余白 50px・行の高さ 0）.
 *
 * 🚨 **大見出しと副見出しの余白の規則は、類名を 3 つにする（`.pa-thanks-body.pa-thanks-body …`）。**テーマの
 * `.page-content__body :is(h2, h3, h4, h5, h6):has(> :is(img, picture):only-child)`（`main.css`・詳細度 0,2,2）が、絵だけを持つ見出しの
 * 下の余白を変数 `--pa-article-paragraph-gap` にする。類名 2 つ（0,2,0）ではこれに負け、パソコン幅で 25px・携帯幅で 18px になっていた
 * （Bug #9103 の下見 2 の走行 1 で婚活 EQ 診断の LP の大見出しを実測）。携帯幅の節と婚活 EQ 診断の携帯版の大見出しも同じ理由で 3 つにする.
 */
.pa-thanks-body.pa-thanks-body .pa-thanks-body__heading {
	margin: 0 0 50px;
	line-height: 0;
}

/*
 * 副見出しの画像（`.page_ttl`。下余白 30px）。移行元は行の高さを 0 にしておらず、
 * 高さ 29px の画像の下に文字のベースライン下ぶんの 6px が残る。ここでは行の高さを
 * 0 にそろえ、その 6px を下余白へ足して 36px と書く（入力画面の同じ見出しで実測して
 * 決めた値。この CSS の F2 の節を参照）。画像の下端から次の要素までの距離は移行元と
 * 同じになる。類名を 3 つにする理由は、上の大見出しの節を参照.
 */
.pa-thanks-body.pa-thanks-body .pa-thanks-body__subheading {
	margin: 0 0 36px;
	line-height: 0;
}

/*
 * 送信完了の帯（`.page_flow_img`。下余白 30px）。移行元はここも行の高さを 0 に
 * しておらず、13px の文字のベースライン下ぶんの隙間が画像の下に数 px 残る。その
 * ぶんの足し込みは、配備した dev をブラウザで測ってから決める（第 1 段では
 * 移行元の CSS の値そのままで置く）.
 */
.pa-thanks-body .pa-thanks-body__flow {
	margin: 0 0 30px;
	line-height: 0;
}

/*
 * 案内文の箱（`#complete .thanks_box`）。上下に薄い罫線を引き、中身を中央へそろえる.
 */
.pa-thanks-body .pa-thanks-body__box {
	margin: 0 0 35px;
	padding: 38px 0 40px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font-size: 15px;
	line-height: 1.66;
	text-align: center;
}

/*
 * 大きい 1 行（`.thanks_copy serif`）。移行元は明朝体を当てている。字体の並びは
 * 移行元の `.serif` をそのまま写す（テーマの変数 `--pa-font-family-serif` は
 * 「ＭＳ 明朝」を持たないため、ここでは変数を使わない）.
 */
.pa-thanks-body .pa-thanks-body__copy {
	margin: 0 0 35px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.9;
}

/* 小さい 1 行（`.mb35`。箱の下の内余白 40px と重なって合計 75px 空く） */
.pa-thanks-body .pa-thanks-body__text {
	margin: 0 0 35px;
}

/* TOP へ戻る導線（`#complete .text_back`） */
.pa-thanks-body .pa-thanks-body__back {
	margin: 0;
	padding: 0 0 35px;
	font-size: 15px;
	text-align: center;
}

/*
 * 幅で片方だけを出す組。法人の大きい 1 行と、TOP へ戻る導線の文字が、移行元の
 * パソコン版と携帯版で違うためである（法人は句点の有無と改行、導線は空白が全角か
 * 半角か）。文言を 1 つに寄せるとどちらかの幅で移行元と食い違うので、両方を出して
 * 片方を隠す.
 */
.pa-thanks-body .pa-thanks-body__copy--sp,
.pa-thanks-body .pa-thanks-body__back--sp {
	display: none;
}

/* --- OTOCON 予約（移行元の `form/css/otocon.css`） --- */

.pa-thanks-body--otocon .pa-thanks-otocon__box {
	padding: 0 0 60px;
}

/*
 * 白い箱。移行元の `.container`（`width: min(100% - 40px, 1100px)`）に
 * `.form-thanks__box .container` の枠線・角の丸み・内余白が重なる.
 */
/*
 * 左右の余白 20px は、外側の柱（`.page-content`）の内余白が受け持つ（上の節）。
 * ここで `100% - 40px` と書くと、その 20px が二重に引かれて面が 1,060px に縮む.
 */
.pa-thanks-body--otocon .pa-thanks-otocon__container {
	width: min(100%, 1100px);
	margin: 60px auto;
	padding: 70px;
	border: 1px solid #cfcfcf;
	border-radius: 2px;
}

/* 橙色の見出し（移行元は 2rem = 32px） */
.pa-thanks-body--otocon .pa-thanks-otocon__heading {
	margin: 0 0 50px;
	padding: 0;
	border: 0;
	background: none;
	color: #f0952b;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4;
	text-align: center;
}

/* 太字の本文（移行元は 1rem = 16px） */
.pa-thanks-body--otocon .pa-thanks-otocon__text {
	margin: 0;
	color: #3b4043;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
	text-align: center;
}

.pa-thanks-body--otocon .pa-thanks-otocon__submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 26px;
}

/*
 * 橙色のグラデーションで塗った角丸の押しボタン。移行元は `.reserve-btn` と
 * `.form-submit .reserve-btn` の 2 つが重なった姿である（2rem = 32px）.
 *
 * 移行元のこの指定は、テーマの `assets/css/otocon-landing.css` にも `.reserve-btn`
 * として入っている。ただし**そのファイルは OTOCON の入力画面でしか読み込まれない**
 * （`inc/form-frame.php`）。テーマの読み込み範囲を変えるのは完了画面の外枠の
 * Issue #2231 の範囲なので、ここでは必要な指定をこの CSS へ写す.
 */
.pa-thanks-body--otocon .pa-thanks-otocon__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 600px;
	max-width: 100%;
	min-height: 80px;
	border: none;
	border-radius: 9999px;
	background: linear-gradient(90deg, #ef7902 0%, #f09f3a 100%);
	box-shadow:
		0 6px 12px rgba(0, 0, 0, 0.12),
		0 2px 4px rgba(0, 0, 0, 0.06);
	color: #ffffff;
	font-size: 32px;
	font-weight: 600;
	line-height: 80px;
	text-decoration: none;
}


/* --------------------------------------------------------------------------
 * Task #2329 の第 2 段: 完了画面の本文（資料請求・婚活 EQ 診断つき資料請求）。
 *
 * 移行元はこの 2 件だけ、他の 4 件（お問い合わせ・法人・OTOCON・成婚力診断）とは
 * 別系統の CSS（`spiral/` 配下。もっと新しい時期に作られた見た目）を使っている。
 * パソコン幅は `public/spiral/request/css/style.css`（資料請求）・
 * `public/spiral/eq/css/style.css`（婚活 EQ 診断。フローの帯だけ）。携帯幅は
 * `public/sp/spiral/request/css/style.css`・`public/sp/spiral/eq/css/style.css`
 * （フローの帯）と、`public/sp/css/style.css`（`#request` / `#request.thanks` /
 * `#analysis` / `#guide`）である。案内文の箱・簡易診断の結果・TOP へ戻る導線は、
 * 第 1 段と同じ `public/css/page_inquiry.css` の指定を使うため、
 * `.pa-thanks-body__copy` / `.pa-thanks-body__back` を第 1 段のものをそのまま流用する.
 *
 * ## 個別相談の案内（`#guide01` / `#guide`）は、実測に基づく妥当な値で組む
 *
 * この区画（写真・案内文・相談の流れ 4 コマ）は、サイト内の多数のフォームで
 * 使い回されている共通部品で、幅の指定だけがフォームごとの CSS で上書きされる
 * 作りである（`public/css/page_inquiry.css` の `#guide01 .message` /
 * `#guide01 .flow` が土台）。土台の値は写したが、写真とテキストの左右並び・
 * 4 コマの並びといった組み方は、そのフォーム固有の上書きを離れた一般的なレイアウト
 * として、この CSS の他の 2 カラム組みに揃えて書く（画面の見た目の破綻を防ぐための
 * 実務上の判断。厳密な移行元一致ではない）.
 * -------------------------------------------------------------------------- */

/* --- 大見出し（資料請求のみ。`.main_ttl` / `.main_ttl-inner`） --- */

.pa-thanks-body--request .pa-thanks-body__main-ttl {
	position: relative;
	margin: 0 0 20px;
}

.pa-thanks-body--request .pa-thanks-body__main-ttl-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pa-thanks-body--request .pa-thanks-body__main-ttl-img {
	display: flex;
	margin: 0 14px 0 0;
	width: 68px;
	height: 68px;
}

.pa-thanks-body--request .pa-thanks-body__main-ttl-img img {
	width: 100%;
	height: auto;
}

.pa-thanks-body--request .pa-thanks-body__main-ttl-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #a08046;
	font-size: 36px;
	font-weight: bold;
	letter-spacing: normal;
}

.pa-thanks-body--request .pa-thanks-body__main-ttl-msg {
	display: block;
	font-size: 17px;
	font-weight: bold;
}

/* --- リボンの飾り（`.svg_ribbon`）。1〜3 本目だけを実際の位置で出す --- */

.pa-thanks-body--request .pa-thanks-body__ribbon {
	position: relative;
	margin-top: -30px;
	font-size: 0;
	line-height: 0;
}

.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(1) {
	width: 50%;
	margin-left: -50px;
}

.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(2) {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -64px;
	margin-bottom: -8px;
	width: 83px;
	height: 29px;
}

.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(3) {
	position: absolute;
	left: 50%;
	margin-left: 75px;
	margin-bottom: -2px;
	width: 50%;
}

.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(1) .cls-1,
.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(3) .cls-1 {
	fill: none;
	stroke: #c51f10;
	stroke-width: 1px;
	fill-rule: evenodd;
}

.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(2) .cls-1 {
	fill: none;
	stroke: #ba2521;
	stroke-miterlimit: 10;
}

/* 画面が 1,280px より狭いときだけ、飾りのはみ出しを切る（Bug #5064）。

   直す理由は裁定 497（2026-09-07 夜のユーザー判断）である。**750〜1,279px は画面幅に
   収める。1,280px 以上は移行元と同じ姿にする。**

   3 本目の飾り（すぐ上の `svg:nth-of-type(3)`）は、器（1,100px）の中心から右へ
   75px ずらした位置に、器の半分（550px）の幅で置く**器の外へ出す意図の飾り**である。
   幅 1,200px では器の左端が 50px なので、飾りの右端は 50 + 550 + 75 = **1,225px** に
   なり、画面を **25px** 超える（実測 2026-09-09 11:47 JST）。幅 1,280px では器の
   左端が 90px になるので右端は 1,265px で収まる。

   🚨 **飾りの位置そのものは動かさない。**1,280px 以上の見え方を 1px も変えないため、
   器の側で切るだけにする。切ると 1,280px 未満では飾りの右端が画面で止まるが、
   裁定 497 が求めるのはその姿である。 */
@media (max-width: 1279px) {
	.pa-thanks-body--request .pa-thanks-body__ribbon {
		overflow: hidden;
	}
}

/*
 * 4・5 本目（`#ribbon_02_04` / `#ribbon_02_05`）は落書き風の飾りで、移行元でも
 * JS のアニメーションが線を描き終えた合図（`.is-finish` / 個別の `.is-active`）が
 * 付くまでは見えない作りである。**この記法は JS のアニメーションを移さないため
 * （`PA_Forms_Thanks_Body::render_ribbon()` の説明を参照）、その合図は永久に付かない。**
 * 移行元の複雑な位置あわせ（`calc()` を含む）を再現しても見た目には出ないため、
 * ここでは素直に隠す.
 */
.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(4),
.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(5) {
	display: none;
}

/*
 * パソコン用・携帯用のリボンを両方 DOM に出しているので、幅で片方を隠す
 * （`__copy--sp` / `__back--sp` と同じ書き方）。既定はパソコン版を出し、携帯版を隠す.
 */
.pa-thanks-body--request .pa-thanks-body__ribbon--sp {
	display: none;
}

/* --- 送信完了の帯（`.flow-list`。資料請求・婚活 EQ 診断で共通） --- */

.pa-thanks-body .pa-thanks-body__flow-list {
	display: flex;
	margin: 0 0 35px;
	padding: 0;
	list-style: none;
	width: 100%;
}

.pa-thanks-body .pa-thanks-body__flow-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 14px;
	width: 52%;
	height: 30px;
	background-color: #f1f1f1;
	box-sizing: border-box;
}

.pa-thanks-body .pa-thanks-body__flow-item:last-child {
	margin-right: 0;
	width: 48%;
}

.pa-thanks-body .pa-thanks-body__flow-item::before {
	content: "";
	position: absolute;
	top: 0;
	right: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent #f1f1f1;
}

.pa-thanks-body .pa-thanks-body__flow-item:last-child::before {
	display: none;
}

/*
 * `:last-child` は DOM 上の 4 つ目（携帯用の 2 番目）に当たる。パソコン幅で見えて
 * いるのは 1〜2 つ目（パソコン用）なので、実際に見えている末尾（2 つ目＝
 * `--pc:nth-of-type(2)`）にも同じ指定を当てる。携帯幅は `:last-child` がそのまま
 * 見えている末尾（携帯用の 2 番目）に当たるので、そちらは直さない.
 */
.pa-thanks-body .pa-thanks-body__flow-item--pc:nth-of-type(2) {
	margin-right: 0;
	width: 48%;
}

.pa-thanks-body .pa-thanks-body__flow-item--pc:nth-of-type(2)::before {
	display: none;
}

.pa-thanks-body .pa-thanks-body__flow-item p {
	margin: 0;
	font-size: 15px;
	font-weight: bold;
	color: #666666;
}

.pa-thanks-body .pa-thanks-body__flow-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 7px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: #ffffff;
	color: #666666;
	font-family: arial;
}

.pa-thanks-body .pa-thanks-body__flow-item--sp {
	display: none;
}

/*
 * 移行元は 2 つの帯とも `is-current`（背景色 #666・文字は白）で、選ばれていない
 * 段が無い。よってここでは色替えの分岐を作らず、2 段とも常にこの色で出す.
 */
.pa-thanks-body .pa-thanks-body__flow-item {
	background-color: #666666;
}

.pa-thanks-body .pa-thanks-body__flow-item::before {
	border-color: transparent transparent transparent #666666;
}

.pa-thanks-body .pa-thanks-body__flow-item p {
	color: #ffffff;
}

.pa-thanks-body .pa-thanks-body__flow-num {
	background-color: #ffffff;
	color: #666666;
}

/*
 * 資料請求だけ、中身の面をさらに 960px へ絞る（`.form-inner`）。柱（`.page-content`）
 * は他の完了画面と同じ 1,100px のまま、中身だけを絞る点が婚活 EQ 診断（`#complete`
 * を素で使い、絞りを持たない）と違う.
 */
.pa-thanks-body--request .pa-thanks-body__inner,
.pa-thanks-body--request .pa-thanks-body__guide {
	margin-right: auto;
	margin-left: auto;
	max-width: 960px;
}

/* --- 案内文（資料請求のみ。`.lead-area`） --- */

.pa-thanks-body--request .pa-thanks-body__lead {
	margin: 0 0 40px;
	text-align: center;
}

.pa-thanks-body--request .pa-thanks-body__lead-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/*
 * --- オンライン資料請求のおすすめの記事 4 件（ユーザー決定 D812・Task #9712） ---
 *
 * 移行元は `#complete .thanks_box`（上の内余白 38px・中央揃え・`css/page_inquiry.css`）の中の `section.c-pick`
 * （外余白 100px auto 90px・`spiral/request/css/style.css`）である。案内文の外余白 40px と内余白 38px と区画の 100px が
 * 足し合わさるので、案内文の下から 178px 空く。dev は案内文の直後に置くので、外余白が重なり合う（大きい方が残る）。
 * よって上は 178px にする。4 件の幅は 225px と間 20px で、中身の面の 960px にちょうど収まる.
 */
.pa-thanks-body--request-online .pa-thanks-body__pickup {
	margin: 178px auto 90px;
	text-align: center;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-heading {
	margin: 0 0 18px;
	padding: 0 0 0 20px;
	border-left: 4px solid #a08046;
	background: none;
	color: #000;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-item {
	display: flex;
	margin: 0 20px 0 0;
	width: 225px;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-item:nth-child(4n) {
	margin-right: 0;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-item a {
	display: block;
	box-sizing: border-box;
	border: 1px solid #a08046;
	background-color: #a08046;
	text-decoration: none;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-item a:hover {
	opacity: 0.8;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-img {
	display: block;
	margin: 0;
	background-color: #fff;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-img img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-ttl {
	position: relative;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 15px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.pa-thanks-body--request-online .pa-thanks-body__pickup-ttl::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	bottom: 0;
	margin-top: -4px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
}

/* 3 件目の 1 行目だけ字の間を詰める（移行元の行内の `letter-spacing: -.07em`） */
.pa-thanks-body--request-online .pa-thanks-body__pickup-tight {
	letter-spacing: -0.07em;
}

/* 案内文の携帯版だけの改行 */
.pa-thanks-body--request-online .pa-thanks-body__br--sp {
	display: none;
}

/*
 * 携帯幅は移行元の携帯版（`sp/css/style.css` の 2293〜2393 行の `.c-pick` と `sp/spiral/request/css/style.css` の `.subline`）の値にする.
 * 区画は中身の器（左右 10px）の中で、内余白 20px・左右 6.25% を持つ.
 */
@media (max-width: 749px) {

	.pa-thanks-body--request-online .pa-thanks-body__pickup {
		margin: 0;
		padding: 20px 6.25%;
		text-align: left;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-heading {
		font-size: 16px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-list {
		justify-content: space-between;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-item {
		margin: 0;
		width: 47.8%;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-item:nth-child(n+3) {
		margin-top: 15px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-item a:hover {
		opacity: 1;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-ttl {
		padding: 10px 15px 10px 5px;
	}

	/* 携帯版は 3 件目の見出しの全体を詰める（移行元の行内の `letter-spacing: -.08em`） */
	.pa-thanks-body--request-online .pa-thanks-body__pickup-item:nth-child(3) .pa-thanks-body__pickup-ttl,
	.pa-thanks-body--request-online .pa-thanks-body__pickup-tight {
		letter-spacing: -0.08em;
	}

	.pa-thanks-body--request-online .pa-thanks-body__br--sp {
		display: inline;
	}
}

@media (max-width: 640px) {

	.pa-thanks-body--request-online .pa-thanks-body__pickup-item {
		width: 49%;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-item:nth-child(n+3) {
		margin-top: 10px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-ttl {
		font-size: 11px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__pickup-ttl::before {
		right: 6px;
	}
}

/* --- 簡易診断の結果（婚活 EQ 診断のみ。`#complete .thanks_box .box_result`） --- */

.pa-thanks-body--eq .pa-thanks-body__result {
	margin: 0;
	padding: 40px;
	background: #f5f5f5;
	color: #a3762b;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
}

.pa-thanks-body--eq .pa-thanks-body__result p {
	margin: 0 0 25px;
}

.pa-thanks-body--eq .pa-thanks-body__result p:last-child {
	margin-bottom: 0;
}

.pa-thanks-body--eq .pa-thanks-body__heading--sp {
	display: none;
}

/* --- 来店予約の押しボタン（`#complete .thanks_box .btn_waribiki`） --- */

.pa-thanks-body .pa-thanks-body__reserve {
	margin: 30px 0 50px;
	text-align: center;
}

/* --- 個別相談の案内（`#guide01`。実測に基づく組み方。節の説明を参照） --- */

/*
 * 上下の余白だけを指定する（`margin:` の一括指定にしない）。資料請求は上の節
 * （`.pa-thanks-body--request .pa-thanks-body__guide`）で左右を `auto` にして
 * 中央寄せしているが、ここが同じ詳細度（クラス 2 つ）の一括指定で後から
 * 上書きすると、後に書かれたこちらが勝って左右の余白を 0 に戻してしまう
 * （Codex の指摘。PR #2336）.
 */
.pa-thanks-body .pa-thanks-body__guide {
	margin-top: 0;
	margin-bottom: 35px;
}

/*
 * 写真と文章の間隔は 35px。移行元は間隔そのものを持たず、面の幅 1,100px から
 * 写真 240px（`css/page_inquiry.css:1130-1133`）と文章 825px（同 `:1134-1138`）を
 * 引いた残りが 35px になる形で空けている（婚活 EQ 診断で実測 35px）。資料請求は
 * 文章を 650px へ狭めるので 70px になる（下の資料請求だけの節を参照）.
 */
.pa-thanks-body .pa-thanks-body__guide-message {
	display: flex;
	align-items: flex-start;
	gap: 35px;
	margin: 0 0 30px;
	text-align: left;
}

.pa-thanks-body .pa-thanks-body__guide-photo {
	flex: 0 0 240px;
	margin: 0;
}

.pa-thanks-body .pa-thanks-body__guide-photo img {
	width: 100%;
	height: auto;
}

.pa-thanks-body .pa-thanks-body__guide-text {
	flex: 1 1 auto;
}

.pa-thanks-body .pa-thanks-body__guide-heading {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.5;
}

/*
 * 本文の文字は 15px、行の高さは 26px の固定値。
 *
 * - 15px は婚活 EQ 診断で区画を囲む `#complete .thanks_box`（`css/page_inquiry.css:705,708`）
 *   が決めている。資料請求だけ 16px へ上書きする（下の資料請求だけの節を参照）
 * - 26px は `#guide01 .message .text p`（同 `:1144-1146`）の固定値である。文字の
 *   大きさに連動する相対値（`1.85` 等）では、15px と 16px で行の高さが変わって
 *   しまい移行元と合わない.
 */
.pa-thanks-body .pa-thanks-body__guide-text p {
	margin: 0;
	font-size: 15px;
	line-height: 26px;
}

.pa-thanks-body .pa-thanks-body__guide-message--sp,
.pa-thanks-body .pa-thanks-body__guide-flow-heading--sp {
	display: none;
}

/*
 * 流れ欄の内側の余白は上下左右とも 22px（`#guide01 .flow`。
 * `css/page_inquiry.css:1099-1103`）。資料請求だけ左右を 32px へ広げる
 * （`spiral/request/css/style.css:1676-1678`）ので、下の資料請求だけの節で上書きする。
 * 以前は両方に `22px 32px` を当てていて、婚活 EQ 診断の左右が 10px ずつ広かった
 * （実測: 移行元 22px / 移行先 32px。Issue #2362）.
 */
.pa-thanks-body .pa-thanks-body__guide-flow {
	margin: 0 0 30px;
	padding: 22px;
	background: #f6f2eb;
}

.pa-thanks-body .pa-thanks-body__guide-flow-heading {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: normal;
	text-align: center;
}

/*
 * 4 段は「隙間なく並べ、幅だけで区切る」組み方である。移行元は `float: left` と
 * 固定幅（`#guide01 .flow ul li`。`css/page_inquiry.css:1115-1121`）で、段と段の
 * 間隔を持たない。ここは Flexbox のままにして、`gap: 0` と固定幅で同じ配置を作る
 * （`float` へ戻すと回り込みの解除が要るため。方針は Issue #2362 で決定）.
 *
 * `ul` の左の余白 60px は `#guide01 .flow ul`（同 `:1112-1114`）の値。資料請求だけ
 * 0 に戻す（`spiral/request/css/style.css:1679-1681`）.
 *
 * **折り返しを禁じる（`nowrap`）。** 段を固定幅にしたため、器がタブレット幅
 * （750〜1099px）まで狭まると 4 段の合計（婚活 EQ 診断 940px / 資料請求 884px）が
 * 入りきらず、最後の段だけ次の行へ落ちる（Codex の指摘。実測で婚活 EQ 診断は
 * 750〜1024px、資料請求は 750〜900px で 2 行になることを確かめた）.
 *
 * 移行元はこの幅域を設計していない。2026-08-27 に幅 750〜1100px で移行元を測ると、
 * 4 段は常に 1 行のままで、**ページ全体が横スクロールする**（本体の幅は資料請求
 * 1,268px / 婚活 EQ 診断 1,200px で固定）。つまり移行元はパソコン版を固定幅で
 * 出しているだけである。よって「写すべき正解」がこの幅域には無い.
 *
 * 移行元の設計（4 段を 1 行・幅 245px と 205px）を保つ方を採る（司令塔の裁定・
 * 08-27）。ただし移行元のようにページ全体を溢れさせるのではなく、`overflow-x: auto`
 * で**この一覧の中だけに横スクロールを閉じる**。移行先のテーマは応答型で、ページ全体を
 * 溢れさせると他の区画の組みまで崩れるためである.
 *
 * 携帯幅では折り返しへ戻す（下の携帯幅の節）。縦 1 列は「段の幅 100% + 折り返し」で
 * 作るため、`nowrap` のままでは 4 段が 1 行に押し込まれる.
 */
.pa-thanks-body .pa-thanks-body__guide-flow-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 0 0 60px;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

/*
 * 幅は 245px、最後の 1 つだけ 205px（`css/page_inquiry.css:1115-1121`）。伸縮させると
 * 均等幅になって移行元の内訳（3 つ同じ幅 + 最後だけ細い）が崩れるため、
 * `flex-grow` と `flex-shrink` はどちらも 0 にする.
 *
 * 文字の寄せは左。移行元は段に `text-align` を持たず、実測でも `left` だった
 * （2026-08-27 実測。移行先は `center` だったため段の中の文章の見え方が違っていた）.
 */
.pa-thanks-body .pa-thanks-body__guide-flow-item {
	flex: 0 0 245px;
	text-align: left;
}

.pa-thanks-body .pa-thanks-body__guide-flow-item:last-child {
	flex-basis: 205px;
}

/*
 * 見出しの行の高さは、移行元では囲みから受け継ぐ値になる。移行元に見出し自身の
 * 指定は無い（`#guide01 .flow h5`。`css/page_inquiry.css:1107-1111` は寄せ・
 * 文字の大きさ・下余白だけ）.
 *
 * - 婚活 EQ 診断（土台）は `#complete .thanks_box { font-size: 15px;
 *   line-height: 166% }`（同 `:705,708`）。**割合の指定は長さに計算されてから
 *   受け継がれる**ので、見出しの文字が 20px でも 15 × 1.66 = 24.9px になる
 * - 資料請求は `.form-inner { font-size: 16px; line-height: 1.6 }`
 *   （`spiral/request/css/style.css:71,75`）。**単位なしの数の指定は数のまま
 *   受け継がれる**ので、見出しでは 20 × 1.6 = 32px になる
 *
 * この違いを写すため、土台は長さ（24.9px）で、資料請求は数（1.6）で書く。
 * 2026-08-27 に移行元の稼働中サイトで実測し、24.9px と 32px を確かめた.
 *
 * 選び方をパソコン版の見出し（`--pc`）に絞る。携帯版の見出し（`--sp`）は行の
 * 高さが別の値（資料請求 20.8px / 婚活 EQ 診断は指定なし）で、携帯幅の節が扱う.
 */
.pa-thanks-body .pa-thanks-body__guide-flow-heading--pc {
	line-height: 24.9px;
}

.pa-thanks-body--request .pa-thanks-body__guide-flow-heading--pc {
	line-height: 1.6;
}

.pa-thanks-body .pa-thanks-body__guide-flow-item picture,
.pa-thanks-body .pa-thanks-body__guide-flow-item img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * 段の中の文章は、右に 35px の余白を持ち、行の高さは 26px の固定値
 * （`#guide01 .flow ul li dl dd`。`css/page_inquiry.css:1126-1129`）。右の余白は
 * 隣の段との読み分けを作るためのもので、段そのものの間隔（0px）とは別物である.
 *
 * **上の余白 7.91px は、移行元の「画像の下の空き」を写した値である。** 移行元は
 * 画像の上下に余白を持たない（同 `:1126-1129` に `margin-top` は無い）。空きの正体は、
 * 画像を行の中の文字として置いているために出る**文字の下ばみ分**である。移行先は
 * 画像を行そのものとして置く（`display: block`）ので下ばみが出ず、そのままでは
 * 空きが 0 になる.
 *
 * 下ばみの大きさは書体・文字の大きさ・行の高さで決まり、移行元と移行先で書体が
 * 違うため、同じ仕組みを写しても同じ値にならない。よって移行元を実測した値を
 * そのまま書く（2026-08-27 実測。婚活 EQ 診断 7.91px / 資料請求 7.59px。
 * 資料請求は下の専用の節で上書きする）。幅では変わらない値なので固定値でよい.
 */
.pa-thanks-body .pa-thanks-body__guide-flow-item-text {
	margin: 7.91px 0 0;
	padding-right: 35px;
	font-size: 15px;
	line-height: 26px;
}

.pa-thanks-body .pa-thanks-body__guide-flow-item-text--sp {
	display: none;
}

/* --- 個別相談の案内・資料請求だけの上書き（`spiral/request/css/style.css`） --- */

/*
 * 資料請求は移行元でもページ専用の CSS を重ねており、婚活 EQ 診断（上書きを持たず
 * 土台の値がそのまま出る）と値が違う。**上の土台の節より後ろに置くこと。** 詳細度は
 * どちらもクラス 2 つで並ぶため、後に書いた方が勝つ.
 */

/* 文章を 825px から 650px へ狭めるので、写真との間隔が 70px になる（`:1673-1675`） */
.pa-thanks-body--request .pa-thanks-body__guide-message {
	gap: 70px;
}

/*
 * 区画を囲む `.form-inner` が 16px を指定する（`spiral/request/css/style.css:71,74`）。
 * 婚活 EQ 診断は `#complete .thanks_box` の 15px のままなので、案内欄の本文を
 * 資料請求だけ 16px へ上げる（段の中の文章は、下の専用の節でまとめて上書きする）.
 */
.pa-thanks-body--request .pa-thanks-body__guide-text p {
	font-size: 16px;
}

/*
 * 段の中の文章は、文字を 16px（上と同じ `.form-inner` の値）へ上げ、画像の下の空きを
 * 7.59px にする。空きが土台（婚活 EQ 診断）の 7.91px と違うのは、文字の大きさが
 * 16px と 15px で違い、下ばみの大きさも変わるためである（空きの由来は土台の節を参照。
 * 2026-08-27 に移行元を実測）.
 *
 * **この選び方の節は 1 つだけにする。** 2 つに分けると、節を選び方で探す検査
 * （`pa_rule_body()`）が先に見つけた方だけを読み、後ろの節の指定を見落とす.
 */
.pa-thanks-body--request .pa-thanks-body__guide-flow-item-text {
	margin-top: 7.59px;
	font-size: 16px;
}

/* 流れ欄の左右だけ 32px へ広げる（`:1676-1678`） */
.pa-thanks-body--request .pa-thanks-body__guide-flow {
	padding: 22px 32px;
}

/* `ul` の左の余白を 0 に戻す（`:1679-1681`） */
.pa-thanks-body--request .pa-thanks-body__guide-flow-list {
	margin-left: 0;
}

/* 段の幅は 230px、最後の 1 つだけ 194px（`:1682-1691`） */
.pa-thanks-body--request .pa-thanks-body__guide-flow-item {
	flex-basis: 230px;
}

.pa-thanks-body--request .pa-thanks-body__guide-flow-item:last-child {
	flex-basis: 194px;
}

/* 最後の段だけ、文章の右の余白を 0 に戻す（`:1692-1694`） */
.pa-thanks-body--request .pa-thanks-body__guide-flow-item:last-child .pa-thanks-body__guide-flow-item-text {
	padding-right: 0;
}

/* --------------------------------------------------------------------------
 * 資料請求・婚活 EQ 診断の完了画面の、パソコン幅の帯の飾りと縦の空き（Bug #2230）
 *
 * 移行元の写し 68e3190cb と dev を、幅 1440 の実ブラウザで並べて測った
 * （`pa-verify-assets/A/2230-5つの差-1001/走行1/`）。直す前の値は次のとおり.
 *
 * | 画面 | 箇所 | 移行元 | dev（直す前） |
 * |---|---|---|---|
 * | 資料請求 | 帯の飾りの線 1 本目の幅 | 720（全幅 1440 の 50%） | 550（本文の器 1100 の 50%） |
 * | 資料請求 | 「You」の手書きの飾り（`#ribbon_02_04`） | 出す | 出さない |
 * | 資料請求 | 送信完了の帯の上端 | 403 | 322.5 |
 * | 資料請求 | 来店予約の押しボタンの下の罫線 | 1px #ccc | 無し |
 * | 婚活 EQ | 送信完了の帯の上端 | 150（`ol.flow-list.mt30`） | 120 |
 * | 婚活 EQ | 罫線の箱（`div.thanks_box`）の高さ | 1271（押しボタンまで包む） | 301（結果だけを包む） |
 *
 * 🚨 **携帯幅には当てない**（`min-width: 750px` で囲う）。携帯幅は後ろの「標準フォームの完了画面 4 本の携帯幅」の節が受け持つ.
 *
 * 🚨 **広告の 2 系統には当てない。**資料請求の広告（`--request-ad`）と婚活 EQ の LP（`--eq-lp`）は
 * 同じ類名を持つが、移行元の姿を測っていないので `:not()` で外す.
 * -------------------------------------------------------------------------- */
@media (min-width: 750px) {

	/*
	 * 帯の飾りを画面いっぱいに広げる。移行元は器 `main#complete` が全幅で、その中の `.svg_ribbon` も全幅に
	 * なる（`spiral/request/css/style.css` 140〜200 行。線の幅 `50%` はこの全幅に対する値）。dev は飾りが
	 * 本文の器（1,100px）の中に在るので、器を突き抜けて 100vw に広げる.
	 *
	 * はみ出しは横だけ切る。移行元は `main { overflow: hidden }`（同 47〜54 行）で画面の端で切る。
	 * 縦は切らない。「Thank」の飾りは帯の下へ 8px、「You」は 12px はみ出す作りである.
	 * 切るのは本文の外枠（`#site-main`）でも行う。100vw はスクロールバーの幅を含むので、帯だけで切ると
	 * スクロールバーのある環境で横スクロールが出る（main.css の「店舗ページの横方向のはみ出し」の節と同じ理由）.
	 * 幅 750〜1,279px も同じ形で画面の端で切れるので、裁定 497（画面幅に収める）を満たす.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--pc {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		overflow-x: clip;
		overflow-y: visible;
	}

	#site-main:has(.pa-thanks-body--request:not(.pa-thanks-body--request-ad)) {
		overflow-x: clip;
	}

	/*
	 * 「You」の手書きの飾り（4 本目）を、移行元の動きが終わった姿で出す（同 202〜234 行の `.is-finish`）.
	 * 5 本目は白い線で、線の始まりの位置（`stroke-dashoffset`）が線の長さを超えているので終わりの姿でも見えない.
	 * 隠したままにする.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--pc svg:nth-of-type(4) {
		display: block;
		position: absolute;
		left: 50%;
		bottom: -12px;
		margin-left: 15px;
		width: 61px;
		height: 36px;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--pc svg:nth-of-type(4) .cls-1,
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--pc svg:nth-of-type(4) .cls-2 {
		fill: none;
		stroke: #c51f10;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--pc svg:nth-of-type(4) .cls-1 {
		stroke-miterlimit: 10;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--pc svg:nth-of-type(4) .cls-2 {
		stroke-linejoin: bevel;
	}

	/* 題の塊から送信完了の帯までは 100px（移行元 `.form-inner { margin: 100px auto 70px }`・同 71〜75 行） */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__main-ttl {
		margin-bottom: 100px;
	}

	/*
	 * 1 つ目の来店予約の押しボタンは、移行元では罫線の箱 `div.thanks_box` の中に在る
	 * （`css/page_inquiry.css` 705〜713 行の内余白 38px・40px と上下の罫線。上の罫線は
	 * `spiral/request/css/style.css` 1670〜1672 行で消している）。押しボタンの外余白 30px・50px と
	 * 合わせて、押しボタン自身の内余白へ写す（上 38 + 30・下 50 + 40）.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__inner > .pa-thanks-body__reserve {
		margin: 0;
		padding: 68px 0 90px;
		border-bottom: 1px solid #cccccc;
	}

	/*
	 * 個別相談の案内は、2 つ目の `.form-inner`（上 100px・下 70px）の中に在る。流れの区画の下は 90px
	 * （移行元の実測の外余白。`css/page_inquiry.css` 1099 行の 60px より後から当たる行は特定していない）で、
	 * 2 つ目の押しボタンは外余白を持たない.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide {
		margin-top: 100px;
		margin-bottom: 70px;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide-flow {
		margin-bottom: 90px;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide .pa-thanks-body__reserve {
		margin: 0;
	}

	/* 婚活 EQ 診断: 送信完了の帯の上の 30px（移行元 `ol.flow-list.mt30`） */
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__flow-list {
		margin-top: 30px;
	}

	/*
	 * 婚活 EQ 診断: 移行元の罫線の箱 `div.thanks_box` は、結果・個別相談の案内・来店予約の押しボタンまで包む
	 * （`eq_thanks.php`）。dev は箱が結果だけを包むので、箱の下の罫線と内余白を個別相談の案内の側へ移す.
	 * 結果の下は 50px（`#complete .thanks_box .box_result`）、流れの区画の下は 90px で、
	 * 押しボタンの上の 30px と重なって 90px になる.
	 */
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__box {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__result {
		margin-bottom: 50px;
	}

	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide {
		margin-bottom: 35px;
		padding-bottom: 40px;
		border-bottom: 1px solid #cccccc;
	}

	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide-flow {
		margin-bottom: 90px;
	}
}

/* --------------------------------------------------------------------------
 * 携帯幅（749px 以下）。境目の値はこの CSS の他の切り替えと同じ.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {

	/*
	 * **携帯幅では柱（`.page-content`）の左右の内余白を外す。** 移行元の携帯版は、
	 * この 2 種の余白の持ち方が違う.
	 *
	 * | 完了画面 | 移行元の携帯版の左右の余白 | 持っている場所 |
	 * |---|---|---|
	 * | お問い合わせ・法人 | **0**（画像が画面いっぱいに広がる） | `#request { padding: 25px 0 }`（`public/sp/css/style.css`）。上下だけで左右は無い |
	 * | OTOCON | 20px | `.form-thanks__box { padding: 0 20px 60px }`（`public/form/css/sp_otocon.css`） |
	 *
	 * どちらも柱の余白を当てにしていない。柱の余白を残すと**移行元の余白に足し込まれて
	 * 二重になる**（レビューの指摘・2026-08-27）。幅 375px の OTOCON では、戻る押しボタンが
	 * 移行元の 335px に対し 295px まで縮む。お問い合わせ・法人では、画面いっぱいに
	 * 広がるはずの画像が 345px に縮む.
	 *
	 * 上下の余白（`padding-bottom`）は柱のものを残す。左右だけを外す.
	 */
	.page-content:has(.pa-thanks-body),
	.page-content:has(.pa-thanks-body--otocon) {
		padding-right: 0;
		padding-left: 0;
	}

	/*
	 * 携帯版は案内文を箱で囲まず、**本文のかたまり全体の下端に 1 本の罫線**を引く
	 * （`#request.thanks`）。よって箱の枠線と内余白は消し、罫線をここへ移す.
	 */
	/*
	 * 罫線は要素そのものに置く。**下の余白 30px だけは、テーマの「本文の末尾の余白を
	 * 消す」指定に負けるため、選び方を長くして勝たせる**（レビューの指摘・2026-08-27）.
	 *
	 * テーマ（`main.css` の 17975〜17977 行）は
	 * `.page-content__body.page-content__body > :last-child { margin-bottom: 0 }` を持ち、
	 * 詳細度は 0,3,0 である。広告計測タグが空の通常の場合、この要素が本文の最後になるため、
	 * `.pa-thanks-body--inquiry`（0,1,0）では必ず負けて 30px が消える.
	 *
	 * `!important` は使わず、クラスを 1 つ足して 0,4,0 で勝つ。読み込みの順に頼らない.
	 */
	.pa-thanks-body--inquiry {
		border-bottom: 1px solid #cccccc;
	}

	.page-content__body.page-content__body > .pa-thanks-body.pa-thanks-body--inquiry {
		margin-bottom: 30px;
	}

	.pa-thanks-body .pa-thanks-body__box {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 13px;
		line-height: normal;
		text-align: center;
	}

	/* `#request .category_ttl`（下余白 30px）。類名を 3 つにする理由は、上の大見出しの節を参照 */
	.pa-thanks-body.pa-thanks-body .pa-thanks-body__heading {
		margin: 0 0 30px;
	}

	/* `#request .form_ttl`（下余白 20px）。携帯版の画像は下に隙間を持たない */
	.pa-thanks-body.pa-thanks-body .pa-thanks-body__subheading {
		margin: 0 0 20px;
	}

	/* 携帯版は移行元の共通指定（`img { width: 100%; display: block }`）で敷き詰まる */
	.pa-thanks-body .pa-thanks-body__flow {
		margin: 0;
	}

	.pa-thanks-body .pa-thanks-body__heading img,
	.pa-thanks-body .pa-thanks-body__subheading img,
	.pa-thanks-body .pa-thanks-body__flow img {
		width: 100%;
	}

	/* `#request .thanks_text`（内余白 23px 0 22px・16px。行の高さは指定が無い） */
	.pa-thanks-body .pa-thanks-body__copy {
		margin: 0;
		padding: 23px 0 22px;
		font-size: 16px;
		line-height: normal;
	}

	/* `.tac mb20`（中央そろえ・下余白 20px。文字の大きさは基準の 13px） */
	.pa-thanks-body .pa-thanks-body__text {
		margin: 0 0 20px;
		font-size: 13px;
	}

	/* `.back_top`（14px・中央そろえ）。移行元の携帯版に下の内余白は無い */
	.pa-thanks-body .pa-thanks-body__back {
		padding: 0 0 20px;
		font-size: 14px;
	}

	/* 出す側を入れ替える（法人の大きい 1 行と TOP へ戻る導線） */
	.pa-thanks-body .pa-thanks-body__copy--pc,
	.pa-thanks-body .pa-thanks-body__back--pc {
		display: none;
	}

	.pa-thanks-body .pa-thanks-body__copy--sp,
	.pa-thanks-body .pa-thanks-body__back--sp {
		display: block;
	}

	/*
	 * OTOCON の携帯幅。**移行元はこの画面を白紙で返している**（移行元の不具合。
	 * 詳しくは `PA_Forms_Thanks_Body::render_otocon()` の説明）。中身はパソコン版を
	 * 出すと決めたので、**装飾だけ**を移行元が同じ画面のために書いていた
	 * `form/css/sp_otocon.css` の実値へそろえる.
	 */
	.pa-thanks-body--otocon .pa-thanks-otocon__box {
		padding: 0 20px 60px;
	}

	.pa-thanks-body--otocon .pa-thanks-otocon__container {
		width: 100%;
		margin: 60px auto;
		padding: 0 30px;
		border: 0;
		border-radius: 0;
	}

	/* 移行元の携帯版は 1.25rem = 20px */
	.pa-thanks-body--otocon .pa-thanks-otocon__heading {
		font-size: 20px;
	}

	.pa-thanks-body--otocon .pa-thanks-otocon__submit {
		gap: 18px;
		margin-top: 20px;
	}

	.pa-thanks-body--otocon .pa-thanks-otocon__btn {
		width: 100%;
		min-height: 60px;
		font-size: 20px;
		line-height: 60px;
	}

	/* --------------------------------------------------------------------------
	 * Task #2329 の第 2 段（携帯幅）: 資料請求・婚活 EQ 診断。
	 * 値の出どころは `public/sp/css/style.css` の `#request` / `#request.thanks` /
	 * `#analysis` / `#guide` と、`public/sp/spiral/request/css/style.css` /
	 * `public/sp/spiral/eq/css/style.css` である.
	 * -------------------------------------------------------------------------- */

	/* `#request.thanks`（資料請求だけ、かたまりの下端に罫線） */
	.pa-thanks-body--request {
		padding: 25px 0;
		margin-bottom: 30px;
		border-bottom: 1px solid #cccccc;
	}

	/* `#analysis`。婚活 EQ 診断に下端の罫線は無い（移行元に `#analysis.thanks` の指定が無い） */
	.pa-thanks-body--eq {
		padding: 25px 0;
	}

	.pa-thanks-body--request .pa-thanks-body__main-ttl-img {
		margin-right: 10px;
	}

	.pa-thanks-body--request .pa-thanks-body__main-ttl-heading {
		font-size: 24px;
	}

	.pa-thanks-body--request .pa-thanks-body__main-ttl-msg {
		font-size: 13px;
	}

	/*
	 * 題の区画。**携帯幅ではリボンの飾りが右へ 2px はみ出す**（Bug #2532）。
	 *
	 * はみ出しは移行元をそのまま写した結果である。3 本目のリボン
	 * （`#ribbon_02_03`）は移行元の携帯版（`sp/spiral/request/css/style.css`）で
	 * 次の 3 つを持ち、**幅によらず右端が画面幅 + 2px になる**。
	 *
	 *   1. `left: 50%`
	 *   2. `margin-left: 58px`
	 *   3. `width: calc(50% - 56px)`
	 *
	 * 右端 = 50% + 58 + (50% - 56) = **100% + 2px** である。だから画面幅を
	 * 320 / 360 / 375 / 414px と変えても、超過はいつも 2px で一定になる。
	 *
	 * 🚨 **リボンの寸法は動かさない。**移行元と同じ寸法にするのが合わせ先である。
	 * **移行元は、はみ出しを外側の箱で切り落としている**——同じ CSS の
	 * `main { overflow: hidden }` である。**資料請求と予約の系統 4 本すべてが
	 * この切り方を持つ**（お問い合わせの系統は持たない）。dev 側もそれを写す。
	 *
	 * **切る場所を題の区画に絞る理由。**移行元は `main` で切るので、その中の
	 * どの要素のはみ出しも消える。dev の `main` はフォーム 7 種の完了画面で
	 * 共通なので、そこで切ると資料請求以外の 6 種にも波及する。**題の区画は
	 * 画面いっぱいの幅（実測で左 0・右 375）なので、切る位置は移行元と同じ
	 * 375px になる。**
	 *
	 * 🚨 **`hidden` ではなく `clip` を使う。**`hidden` は `overflow-y` を `auto`
	 * に変えるため、この区画が縦に送れる箱になる。2 本目のリボン
	 * （`#ribbon_02_02`）は `margin-bottom: -5px` で下へ出るので、送れる箱に
	 * なると縦の送り棒が出るおそれがある。**`clip` は送れる箱を作らず、縦は
	 * `visible` のまま残る。**
	 *
	 * `clip` を読めない古い閲覧環境（iOS 16 より前の Safari 等）では、この宣言が
	 * 落ちて**いまと同じ 2px のはみ出しに戻るだけ**である。新しい崩れは起きない。
	 *
	 * パソコン幅は変えない。dev のパソコン幅では、この飾りは画面から出ていない
	 * （題の区画が画面より狭いため）。
	 */
	.pa-thanks-body--request .pa-thanks-body__main-ttl {
		overflow-x: clip;
	}

	.pa-thanks-body--request .pa-thanks-body__ribbon {
		margin-top: 0;
	}

	.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(1) {
		width: calc(50% - 66px);
		margin-left: 0;
	}

	.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(2) {
		margin-left: -82px;
		margin-bottom: -5px;
	}

	.pa-thanks-body--request .pa-thanks-body__ribbon svg:nth-of-type(3) {
		top: 2px;
		margin-left: 58px;
		width: calc(50% - 56px);
	}

	/* 出す側を入れ替える（携帯幅ではリボンも携帯用へ切り替える） */
	.pa-thanks-body--request .pa-thanks-body__ribbon--pc {
		display: none;
	}

	.pa-thanks-body--request .pa-thanks-body__ribbon--sp {
		display: block;
	}

	/* 送信完了の帯（携帯幅は 2 段とも同じ幅・番号を出さない） */
	.pa-thanks-body .pa-thanks-body__flow-item {
		margin-right: 14px;
		width: 227px;
		height: 40px;
	}

	.pa-thanks-body .pa-thanks-body__flow-item:last-child {
		width: 237px;
	}

	.pa-thanks-body .pa-thanks-body__flow-item p {
		font-size: 13px;
		line-height: 1.2;
	}

	.pa-thanks-body .pa-thanks-body__flow-num {
		display: none;
	}

	.pa-thanks-body .pa-thanks-body__flow-item--pc {
		display: none;
	}

	.pa-thanks-body .pa-thanks-body__flow-item--sp {
		display: flex;
	}

	.pa-thanks-body--request .pa-thanks-body__lead-text {
		font-size: 14px;
	}

	/* `#analysis .category_ttl`（婚活 EQ 診断の携帯版だけの大見出し）。類名を 3 つにする理由は、上の大見出しの節を参照 */
	.pa-thanks-body.pa-thanks-body--eq .pa-thanks-body__heading--sp {
		display: block;
		margin: 0 0 20px;
		line-height: 0;
	}

	/* `#analysis .thanks_text` */
	.pa-thanks-body--eq .pa-thanks-body__copy {
		padding: 19px 0;
		font-size: 14px;
	}

	/* `#analysis .box_result` */
	.pa-thanks-body--eq .pa-thanks-body__result {
		margin: 0 0 18px;
		padding: 20px 6.25%;
		font-size: 14px;
		line-height: 1.35;
	}

	/*
	 * **携帯幅では区画の左右に余白を作る。** 移行元の携帯版は、案内欄と流れ欄を囲む
	 * `.anchor_block` が「自分の親の幅の 6.25%」を左右の内余白に持つ
	 * （`public/sp/css/style.css:3898-3901`）。幅 375px では 23.4px になり、稼働中サイトの
	 * 実測（2026-08-27・婚活 EQ 診断で 23.4px）と一致する.
	 *
	 * **上下の 25px は、区画そのものの内余白である**（`#guide { padding: 25px 0 25px }`。
	 * 同 `:3862-3864`）。移行元は左右を `.anchor_block`、上下を `#guide` の 2 つの器で
	 * 分けて持つが、移行先は器が 1 つなのでここへまとめる.
	 */
	.pa-thanks-body .pa-thanks-body__guide {
		padding-top: 25px;
		padding-right: 6.25%;
		padding-bottom: 25px;
		padding-left: 6.25%;
	}

	/*
	 * 資料請求だけ、さらに外側の `.form-inner` が固定 10px を持つ二重構造になる
	 * （`public/sp/spiral/request/css/style.css:62-70`）。移行先は囲む入れ物が 1 つしか
	 * ないので、「まず外側で 10px を取り、残った幅の 6.25% をさらに取る」という移行元と
	 * 同じ計算を `calc` 1 つにまとめる。幅 375px では
	 * 10 + (375 - 20) × 6.25% = 32.19px となり、実測 32.2px と一致する.
	 */
	.pa-thanks-body--request .pa-thanks-body__guide {
		padding-right: calc(10px + (100% - 20px) * 0.0625);
		padding-left: calc(10px + (100% - 20px) * 0.0625);
	}

	/*
	 * 案内欄そのものは下の余白を持たない（移行元の `.message` を実測して 0px。
	 * 間隔は中の段落の 4% が作る。上の節を参照）。パソコン幅の 30px を 0 に戻す.
	 */
	.pa-thanks-body .pa-thanks-body__guide-message {
		flex-direction: column;
		gap: 15px;
		margin-bottom: 0;
	}

	.pa-thanks-body .pa-thanks-body__guide-message--pc {
		display: none;
	}

	.pa-thanks-body .pa-thanks-body__guide-message--sp {
		display: block;
	}

	/*
	 * 携帯幅の案内欄の本文の下の余白は「自分の親の幅の 4%」（`#guide p`。
	 * 同 `:3944-3946`）。幅 375px では婚活 EQ 診断が 13.13px、資料請求が 12.42px に
	 * なり、実測と一致する。案内欄そのものの下の余白ではなく、**中の段落が持つ**点が
	 * 移行元の作りである（`.message` に下の余白は無い。実測 0px）.
	 *
	 * 文字は 13px。移行元の携帯版は画面全体の既定値
	 * （`public/sp/css/basic.css:21`）をそのまま使い、この区画に固有の指定を持たない。
	 * 行の高さの指定も無いので `normal` になる（婚活 EQ 診断で実測 13px・行の高さの
	 * 指定なし）。資料請求だけ `.form-inner` が 1.6 を渡すので、すぐ下で上書きする.
	 *
	 * 写真の段落（`__guide-photo`）は選ばない。写真しか入っておらず、行の高さを当てると
	 * 画像の下に余白が生まれるためである.
	 */
	.pa-thanks-body .pa-thanks-body__guide-message--sp p:not(.pa-thanks-body__guide-photo) {
		margin: 0 0 4%;
		font-size: 13px;
		line-height: normal;
	}

	/* `.form-inner { line-height: 1.6 }`（同 `:62-70`。実測 13px / 20.8px） */
	.pa-thanks-body--request .pa-thanks-body__guide-message--sp p:not(.pa-thanks-body__guide-photo) {
		line-height: 1.6;
	}

	.pa-thanks-body .pa-thanks-body__guide-photo {
		flex-basis: auto;
	}

	.pa-thanks-body .pa-thanks-body__guide-flow-heading--pc {
		display: none;
	}

	/*
	 * 見出しの下の余白は「自分の幅の 4%」（`#guide .flow h4`。
	 * `public/sp/css/style.css:3958-3961`）。幅 375px の資料請求では 11.1px になる。
	 * パソコン幅の 20px を残すと 9px ほど広くなる.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow-heading--sp {
		display: block;
		margin-bottom: 4%;
		text-align: center;
	}

	/*
	 * 移行元の携帯版は画像を行の中の文字として扱わず、行そのものとして置く
	 * （実測: `display: block`。パソコン版は行の中の文字のまま）。行の中の文字として
	 * 置くと、画像の下に文字の下ばみ分（7px 前後）の空きが生まれ、移行元より広くなる.
	 *
	 * 幅 70% と中央寄せは `#guide .flow h4 img`（`public/sp/css/style.css:3963-3966`）の値.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow-heading--sp img {
		display: block;
		margin: 0 auto;
		width: 70%;
	}

	.pa-thanks-body .pa-thanks-body__guide-message--sp .pa-thanks-body__guide-photo img {
		display: block;
	}

	/*
	 * 流れ欄の内側の余白は、上下左右とも「自分の幅の 5.35%」（`#guide .flow`。
	 * `public/sp/css/style.css:3952-3956`）。幅 375px では婚活 EQ 診断が 17.5px、
	 * 資料請求が 16.6px になり、実測と一致する。パソコン幅の 22px は当てない.
	 *
	 * **背景色は携帯版だけ `#f6f1eb` である**（同 `:3953`）。パソコン版の `#f6f2eb`
	 * （`css/page_inquiry.css:1100`）と緑成分が 1 だけ違う。移行元の稼働中サイトを
	 * 2026-08-27 に実測して確かめた（携帯版 `rgb(246, 241, 235)` / パソコン版
	 * `rgb(246, 242, 235)`）。移行元が幅で塗り分けているので、ここで上書きする.
	 *
	 * **下の余白は「自分の親の幅の 8%」**（`#guide .flow { margin: 0 0 8% }`。
	 * 同 `:3952-3956`）。幅 375px では婚活 EQ 診断が 26.25px、資料請求が 24.84px に
	 * なり、実測と一致する。パソコン幅の 30px は当てない.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow {
		margin-bottom: 8%;
		padding: 5.35%;
		background: #f6f1eb;
	}

	/*
	 * 4 段は縦 1 列に積む。移行元の携帯版は段に幅も `float` も指定せず、ブロック要素の
	 * 既定の積み上がりに任せている（`public/sp/css/style.css:3968-3972`）。ここは Flexbox の
	 * ままなので、段の幅を 100% にして 1 行に 1 段しか入らないようにする。段の間隔
	 * （`gap`）は使わない。移行元は段ごとの下余白で間隔を作るためである.
	 *
	 * `ul` の左の余白 60px はパソコン幅だけの値なので 0 に戻す.
	 *
	 * **折り返しを許す（`wrap`）。** 縦 1 列は「段の幅 100% + 折り返し」で作るため、
	 * パソコン幅で入れた `nowrap` をここで戻す。横スクロール（`overflow-x`）も戻す
	 * （1 行に 1 段しか入らないので溢れない）.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow-list {
		flex-wrap: wrap;
		gap: 0;
		margin-left: 0;
		overflow-x: visible;
	}

	/*
	 * 段の下の空きは、内余白 7% と外余白 5% の 2 段構え（同 `:3968-3972`）。幅 375px の
	 * 資料請求では 19.4px + 13.9px になり、実測と一致する。最後の段だけ両方を 0 に戻す
	 * （同 `:3974-3979`）.
	 *
	 * **移行元は内余白 7% の位置に区切りの矢印画像（`sp/images/guide/arrow.gif`）を背景と
	 * して敷いているが、この画像は移行先のプラグインに無いので写していない。** 余白だけを
	 * 合わせている（画像を持ち込むかどうかは別途の判断。Issue #2362 の報告を参照）.
	 *
	 * 段の中身は、写真を左へ回り込ませた小さな横並びになる。移行元は写真（`dl dt`）だけに
	 * 幅 33% と右の外余白 3.92%、`float: left` を指定している（同 `:3989-3993`）。ここは
	 * Flexbox で同じ配置を作る.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow-item {
		display: flex;
		align-items: flex-start;
		flex-basis: 100%;
		margin: 0 0 5%;
		padding: 0 0 7%;
	}

	/*
	 * 幅の 100% は最後の段にも書き直す。パソコン幅の最後の段だけを細くする規則
	 * （`…__guide-flow-item:last-child`）は「クラス 2 つ + `:last-child`」で、上の
	 * 「クラス 2 つ」だけの規則より詳細度が高い。書き直さないと、携帯幅でも最後の段だけ
	 * 205px（資料請求は 194px）に縮んでしまう。`!important` は使わず、同じ
	 * `:last-child` 付きの規則を後ろに置いて勝たせる.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow-item:last-child {
		flex-basis: 100%;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.pa-thanks-body .pa-thanks-body__guide-flow-item picture {
		flex: 0 0 33%;
		margin-right: 3.92%;
	}

	/*
	 * 段の中の文章は 15px。移行元の携帯版は画面全体の `dd` の指定
	 * （`public/sp/css/style.css:1616-1619`）をそのまま使う。行の高さの指定は無いので
	 * `normal` になる（婚活 EQ 診断で実測 15px・行の高さの指定なし）。資料請求だけ
	 * `.form-inner` が 1.6 を渡す（実測 24px）.
	 *
	 * パソコン幅で当てている右の余白 35px と上の余白 10px は、移行元の携帯版が
	 * どちらも持たないため 0 に戻す（`#guide .flow dl dd`。同 `:3980-3987`）.
	 */
	.pa-thanks-body .pa-thanks-body__guide-flow-item-text {
		flex: 1 1 auto;
		margin: 0;
		padding-right: 0;
		font-size: 15px;
		line-height: normal;
	}

	.pa-thanks-body--request .pa-thanks-body__guide-flow-item-text {
		line-height: 1.6;
	}

	.pa-thanks-body .pa-thanks-body__guide-flow-item-text--pc {
		display: none;
	}

	.pa-thanks-body .pa-thanks-body__guide-flow-item-text--sp {
		display: block;
	}
}

/* --------------------------------------------------------------------------
 * 標準フォームの完了画面 4 本の携帯幅を、移行元のスマホ版の型紙にそろえる（Bug #2230）
 *
 * 比べる相手は移行元のスマホ版の型紙（`/sp/form/<種類>/thanks/` = `form/index.php?dv=sp`・写し 68e3190cb）
 * である（統括の判断 2026-10-01 10:38。スマホ版のページからのリンクの多くが `/sp/form/` を指す）。
 * 幅 375 の実測（`pa-verify-assets/A/2230-5つの差-1001/走行1/`）で見えた差と出どころは次のとおり.
 *
 * | 画面 | 箇所 | 移行元 | dev（直す前） | 出どころ |
 * |---|---|---|---|---|
 * | 資料請求 | 題の上の内余白 | 20 | 0 | `sp/spiral/request/css/style.css` 82〜95 行 `.main_ttl-inner` |
 * | 資料請求 | 題の絵 | 50×50（幅 640px 以下） | 68×68 | 同 94〜104 行（既定 68px・99〜104 行で 50px）。この節の後ろの `max-width: 640px` の節が受け持つ |
 * | 資料請求 | 帯の飾りの器の高さ | 35.4 | 29.4 | 行の箱の下ばみ（実測の差 6） |
 * | 資料請求 | 「You」の飾り | 出す | 出さない | 同 195〜226 行 |
 * | 資料請求 | 題の塊から工程の帯 | 65 | 20 | 同 62〜70 行 `.form-inner { margin: 65px auto 40px; padding: 0 10px }` |
 * | 資料請求・EQ | 工程の帯の左右 | 10 | 0 | 同 `.form-inner`（EQ は帯を包む `div` の内余白） |
 * | 資料請求・EQ | 工程の帯の矢印 | 上下 20・横 10 | 上下 15・横 10 | 同 255〜290 行 `.flow-list .list-item:before` |
 * | 資料請求 | 1 つ目の来店予約 | 幅 310.6 の絵（`section.c-pick` の内余白 20 と 6.25%） | 幅 375 | 型紙の `section.c-pick` |
 * | 資料請求・EQ | 2 つ目の来店予約 | 流れの区画の下 8%・絵の下 8% | 上 30・下 50 | `#guide .anchor_block` の外余白 |
 * | 資料請求・EQ | 個別相談の写真の下 | 親の幅の 4% | 0 | `sp/css/style.css` 3944〜3946 行 `#guide p` |
 * | 資料請求・EQ | 相談の流れの段の間の ▼ | 出す | 出さない | `sp/css/style.css` 3968〜3978 行 `#guide .flow li`（`sp/images/guide/arrow.gif`） |
 * | お問い合わせ・法人 | 見出しの上 | 25 | 0 | `#request { padding: 25px 0 }` |
 * | 4 本 | 「TOPにもどる」の下 | 資料請求 40＋25・ほか 25 | 20＋25・EQ 20＋25・お問い合わせ・法人 20 | 型紙の器の下の外余白と内余白 |
 *
 * ▼ の絵は写しから取り込んだ（`assets/images/guide/sp-arrow.gif`・md5 21a47251…）.
 *
 * 🚨 **広告の 2 系統には当てない**（`--request-ad`・`--eq-lp`）。移行元の姿を測っていない.
 * お問い合わせ・法人の本文（`--inquiry`）は他のフォームの完了画面も使うので、外枠の識別子の修飾クラスで 2 本に絞る.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__main-ttl {
		margin-bottom: 65px;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__main-ttl-inner {
		padding-top: 20px;
	}


	/*
	 * 幅 1,279px 以下の `overflow: hidden`（Bug #5064 の節）は、帯の下へはみ出す「Thank」（5px）と「You」（9px）を切る。
	 * 移行元は器 `main` の `overflow: hidden` で横だけが画面の端に当たる。横は題の塊の `overflow-x: clip` が切るので、ここは切らない.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--sp {
		overflow: visible;
		padding-bottom: 6px;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--sp svg:nth-of-type(4) {
		display: block;
		position: absolute;
		left: 50%;
		bottom: -9px;
		margin-left: -1px;
		width: 61px;
		height: 36px;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--sp svg:nth-of-type(4) .cls-1,
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--sp svg:nth-of-type(4) .cls-2 {
		fill: none;
		stroke: #c51f10;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--sp svg:nth-of-type(4) .cls-1 {
		stroke-miterlimit: 10;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__ribbon--sp svg:nth-of-type(4) .cls-2 {
		stroke-linejoin: bevel;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__inner {
		padding-right: 10px;
		padding-left: 10px;
	}

	/* 幅は器に任せる（既定の `width: 100%` のままだと左右 10px のぶん画面から 20px はみ出す） */
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__flow-list {
		margin-right: 10px;
		margin-left: 10px;
		width: auto;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__flow-item::before,
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__flow-item::before {
		border-width: 20px 0 20px 10px;
	}

	/* 1 つ目の来店予約は `section.c-pick`（内余白 20px・左右 6.25%）の中の `div.campaign_heijitsu.mb50` に在る */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__inner > .pa-thanks-body__reserve {
		margin: 0;
		padding: 20px 6.25% 70px;
	}

	/*
	 * 2 つ目の来店予約は個別相談の案内の末尾に在る。流れの区画の下の 8% がそのまま空きになり、
	 * 絵の下は `.anchor_block` の外余白（`#guide` の幅の 8%。資料請求は器の左右 10px を引いた幅）が空く.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide .pa-thanks-body__reserve {
		margin: 0 0 calc((100vw - 20px) * 0.08);
	}

	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide .pa-thanks-body__reserve {
		margin: 0 0 calc(100vw * 0.08);
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__reserve :is(a, picture, img),
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__reserve :is(a, picture, img) {
		display: block;
		width: 100%;
		height: auto;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide,
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide {
		margin-bottom: 0;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide-message--sp .pa-thanks-body__guide-photo,
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide-message--sp .pa-thanks-body__guide-photo {
		margin: 0 0 4%;
	}

	/*
	 * 相談の流れの見出しの下は「自分の幅の 4%」（`#guide .flow h4`）。既存の規則（`.pa-thanks-body .pa-thanks-body__guide-flow-heading--sp`・(0,2,0)）は、
	 * テーマの `.page-content__body :is(h2, …, h6):has(> :is(img, picture):only-child) { margin: 0 0 var(--pa-article-paragraph-gap) }`（(0,2,2)・携帯幅で 18px）に負けていた.
	 */
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide-flow-heading--sp,
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide-flow-heading--sp {
		margin-bottom: 4%;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide-flow-item,
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide-flow-item {
		background: url(../images/guide/sp-arrow.gif) no-repeat center bottom / 10% auto;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__guide-flow-item:last-child,
	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__guide-flow-item:last-child {
		background: none;
	}

	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__back--sp {
		padding-bottom: 40px;
	}

	.pa-thanks-body--eq:not(.pa-thanks-body--eq-lp) .pa-thanks-body__back--sp,
	:is(.pa-form-frame__thanks--toiawase, .pa-form-frame__thanks--houjin) .pa-thanks-body--inquiry .pa-thanks-body__back--sp {
		padding-bottom: 0;
	}

	:is(.pa-form-frame__thanks--toiawase, .pa-form-frame__thanks--houjin) .pa-thanks-body--inquiry {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

/* 資料請求の題の絵は、幅 640px 以下だけ 50×50（`sp/spiral/request/css/style.css` 99〜104 行の `@media screen and (max-width: 640px)`）. */
@media screen and (max-width: 640px) {
	.pa-thanks-body--request:not(.pa-thanks-body--request-ad) .pa-thanks-body__main-ttl-img {
		width: 50px;
		height: 50px;
	}
}

/* --------------------------------------------------------------------------
 * Task #2352 の第 3 段: 完了画面の本文（ご紹介プログラム）。器は
 * `PA_Forms_Thanks_Body` が出す. 実測の記録は Issue #2352 の本文と
 * `_cat-top-audit/work/thanks-gap/stage3-legacy/CAPTURED-AT.txt`.
 *
 * 移行元の段落は `taC paddingt10 font16 paddingb50` の 4 class を持つが、
 * 実際に効いているのは中央寄せの `taC`（`public/css/mypage_form02.css` の
 * `.main_full .taC { text-align: center; margin-top: 10px; }`）だけである。
 * 残る 3 class は移行元の CSS 一式のどこにも対応する規則が無く、見た目に効かない
 * 死んだ class なので持ち込まない.
 *
 * `margin-top: 10px` は写さない。移行元ではこの段落の直前に見出し画像
 * （`<h2>`）が並んでおり、その画像との間隔である。見出し画像はこの段では
 * 出さない（Issue #2306 の範囲）ため、上に何も無いこの本文にだけ写すと、
 * 移行元には無い「何もない余白」になってしまう.
 *
 * `.pa-thanks-body__text` は問い合わせ・法人（`pa-thanks-body`）と共有する
 * class で、既定は下余白 35px（3631 行目付近）・携帯幅は下余白 20px と文字の
 * 大きさ 13px（4228 行目付近）が当たる。これは問い合わせ用の値であり、
 * ご紹介プログラムの本文には無関係なので、ここで明示的に打ち消す
 * （2026-08-27 に稼働中サイトを GET で取得し、携帯幅は携帯の端末を装って接続して
 * 実測。パソコン幅 1440px と携帯幅 375px で `getComputedStyle` の値が一致
 * することを確かめた: 文字の大きさ 17.199px、行の高さ 34.398px（文字の大きさの
 * ちょうど 2 倍）、上下の余白は 0（`margin:0` のリセットのみが当たり、
 * 携帯・パソコンで差が無い）。ここでは文字の大きさを 17.2px に丸め、行の高さは
 * 比率で `2` と書く.
 *
 * 🚨 **携帯幅はこの値を使わない。**後ろの Bug #8769 の節（`@media (max-width: 749px)`）が、
 * 移行元の携帯版の型紙（`intro/sp_mypageform_0{2,3}_thanks.php`）の値で上書きする。
 * 上の実測は `mypageform_02` のパソコン版の入口（`/form/mypageform_02/`）を携帯の端末で
 * 開いたときの姿である。移行元は携帯版の型紙を URL の道すじ（`/sp/form/` → `dv=sp`）だけで
 * 選び、携帯版の入力画面から送った人は `_02` も `_03` も携帯版の完了画面を見た
 * （リーダー判断・2026-09-29 04:1x）.
 * -------------------------------------------------------------------------- */

.pa-thanks-body--shoukai .pa-thanks-body__text {
	text-align: center;
	margin: 0;
	font-size: 17.2px;
	line-height: 2;
}

/* --------------------------------------------------------------------------
 * ご紹介プログラムの完了画面の見出し画像・白い枠・灰色の地（Bug #2230）
 *
 * 見出し画像は特典の種類で出しわける（`PA_Forms_Thanks_Body::SHOUKAI_HEADINGS`）。
 * 写し元は移行元の型紙と CSS である（移行元リポジトリの版 b5bee0c58）.
 *
 * | 部品 | パソコン版（`intro/mypageform_0{2,3}_thanks.php`） | 携帯版（`intro/sp_mypageform_0{2,3}_thanks.php`） |
 * |---|---|---|
 * | 見出し | `h2.taC.paddingt30`。`.main_full h2 { margin: 15px 0 }`（`css/mypage_form0{1,2}.css`）・`.paddingt30 { padding-top: 30px!important }`（`css/common_old.css` 581 行） | `p.mxw.taC.pT10`。画像を画面の幅いっぱいに縮める |
 * | 本文 | `p.taC.paddingt10.font16.paddingb50`。`.paddingt10`（577 行）・`.paddingb50`（599 行）・`.font16 { font-size: 132.3% }`（281 行） | `p.txt.m_t15.pB40`（下の Bug #8769 の節） |
 * | 白い枠 | `.container_full`（幅 943・`margin: 15px auto 0`・`padding: 0 0 30px`・角丸 5・白・影） | 全幅の白い区画 `#wrap.wrap.paIntro`（下の Bug #8769 の節） |
 * | 地 | `html { background: #f5f5f5 }`（`css/mypage_common_new.css` 98 行） | `body { background: #f5f5f5 }`（`sp/form/myintro/mcss/common.css` 117 行） |
 *
 * 🚨 **上の節の説明にある「`paddingt10` / `font16` / `paddingb50` は死んだ class」は誤りである。**
 * 3 つとも `css/import_old.css` が読み込む `css/common_old.css` に規則がある。見出しが無かったあいだは、
 * 本文の上下の余白が見出しとの間隔と区別できなかった.
 *
 * 見出しの上の余白 15px は、白い枠の上の余白 15px と重なって 1 つになる（枠が上の内余白も罫線も
 * 持たないため）。移行元も同じ重なり方をする。本文の上の余白（移行元 `_02` の `.main_full .taC
 * { margin-top: 10px }`）も、見出しの下の余白 15px と重なって消える.
 *
 * 地の色は、ご紹介プログラムの完了画面にだけ当てる（`:has(.pa-thanks-body--shoukai)`）。
 * ほかの完了画面と入力画面の地は変えない.
 *
 * 🚨 **見出しの当て先は class 3 つ（詳細度 (0,3,0)）にする。**テーマの「画像だけの見出し」の打ち消し
 * （`main.css` の `.page-content__body :is(h2, …):has(> :is(img, picture):only-child)`・詳細度 (0,2,2)）が
 * 見出しの `padding: 0` と下の外余白 `--pa-article-paragraph-gap` を当てる。class 2 つでは負けて、
 * 画像が枠の上端に貼り付き、本文との間が 25px になった（2026-09-29 の下見の走行 1）.
 *
 * 本文の字の色は、パソコン版では移行元の `p { color: #221815 }`（`css/common_old.css` 289〜294 行）に合わせる。
 * 携帯版の本文の組み方（左寄せ・字の色 #333 ほか）は、下の Bug #8769 の節で合わせる.
 * -------------------------------------------------------------------------- */

.pa-thanks-body.pa-thanks-body--shoukai .pa-thanks-body__shoukai-heading {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	line-height: 0;
	text-align: center;
}

@media (max-width: 749px) {
	.pa-thanks-body.pa-thanks-body--shoukai .pa-thanks-body__shoukai-heading {
		padding-top: 10px;
		margin-bottom: 15px;
	}
}

/* 地の色はパソコン版も携帯版も #f5f5f5（上の表の「地」の行）. */
html:has(.pa-thanks-body--shoukai),
html:has(.pa-thanks-body--shoukai) body {
	background-color: #f5f5f5;
}

@media (min-width: 750px) {
	.pa-thanks-body--shoukai {
		max-width: 943px;
		margin: 15px auto 0;
		padding: 0 0 30px;
		border-radius: 5px;
		background-color: #fff;
		box-shadow: 0 0 5px 1px rgba(125, 125, 125, 0.3);
	}

	.pa-thanks-body.pa-thanks-body--shoukai .pa-thanks-body__shoukai-heading {
		margin: 15px 0;
		padding-top: 30px;
	}

	.pa-thanks-body--shoukai .pa-thanks-body__text {
		padding: 10px 0 50px;
		color: #221815;
	}
}

/* --------------------------------------------------------------------------
 * ご紹介プログラムの完了画面の携帯幅の本文と白い区画（Bug #8769）
 *
 * 写し元は移行元の携帯版の型紙 `intro/sp_mypageform_0{2,3}_thanks.php` と、型紙が読む CSS である
 * （移行元リポジトリの版 b5bee0c58）。`_02` は `sp/form/myintro/css/mypage_form02.css`、`_03` は
 * `mypage_form01.css` を読むが、下の値に効く規則は 2 つで同じである.
 *
 * 🚨 **移行元の携帯版の 1rem は 13px である（10px ではない）。**`sp/form/myintro/mcss/common.css` の
 * `html { font-size: 62.5% }` を、後から読む `sp/css/basic.css` の `html, body, … { font-size: 13px }` が
 * 上書きする（詳細度が同じなので後ろが勝つ）.
 *
 * | 値 | 移行元の規則 |
 * |---|---|
 * | 字の大きさ 16.9px・行の高さ 1.6 | `section.contents .txt { font-size: 1.3rem; line-height: 1.6 }`（詳細度 (0,2,1)。`.paIntro .txt { font-size: 1.6rem }` の (0,2,0) に勝つ） |
 * | 左右の外余白 26px | 同じ規則の `margin: 0 2rem` |
 * | 下の内余白 40px | `.pB40 { padding-bottom: 40px !important }` |
 * | 上の外余白 15px | `.m_t15 { margin-top: 15px !important }`。見出しの下の外余白 15px（上の節）と同じ間隔なので、本文には書かない |
 * | 左寄せ | `taC` を持たない |
 * | 字の色 #333 | `sp/form/myintro/css/common.css` の `p { color: #333333 }` |
 * | 白い区画と影 | `.wrap { background: #fff; box-shadow: 0 -1px 6px rgba(0,0,0,.2) }`（`mcss/common.css`）。上の外余白 20px は `mypage_form0x.css` の `.wrap { margin-top: 0 }`、上の内余白 20px は `#wrap.paIntro { padding-top: 0 }` で消える |
 * | 区画の下の内余白 19.5px | `section.contents { padding: 0 0 1.5rem }` |
 *
 * 本文の当て先は class 3 つにする。問い合わせ用の携帯幅の規則（`.pa-thanks-body .pa-thanks-body__text`・
 * 文字の大きさ 13px）と上の全幅の規則は class 2 つなので、並び順に頼らずに勝つ.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * ご紹介プログラムの完了画面の、本文の器の下の内余白（Bug #8770）
 *
 * 上の「本文の器の下の内余白（Bug #3123）」の節は、フォームの完了画面の器に 55px を当てる。移行元の値は
 * `css/page_inquiry.css` の `#contents { padding-bottom: 55px }` だが、ご紹介プログラムの完了画面
 * （写し 68e3190cb の `form/view/intro/mypageform_0{2,3}_thanks.php`・`sp_` の版）は `#contents` を持たない.
 * 白い区画（パソコン版 `.container_full`・携帯版 `#wrap`）の直後にフッターが続く.
 *
 *   - パソコン版: 白い区画の下端からフッターのリンクまでの空きは、フッターの `.links { margin: 25px 0 }`
 *     （`/css/mypage_common_new.css`）の 25px である。dev のフッターのリンクは上の外余白を持たないので、器の下の
 *     内余白を 25px にする
 *   - 携帯版: 白い区画の直後にフッターのリンクが並ぶ（空き 0）
 *
 * 直す前の下見（`pa-verify-assets/A/8770-ご紹介の外枠の下見-0930/走行2/`）で、本文の 2 行目の下端から最初のリンクまでが
 * 1440 で 移行元 56・dev 86、375 で 移行元 19.5・dev 74.5 だった。白い区画の下端は両幅とも移行元と一致していた.
 *
 * 上の節は、完了画面の器に両幅とも 55px を当てる（Bug #9086。移行元の正式な URL はスマホでもパソコン版の型紙を出す）.
 * ご紹介プログラムは違い、パソコン版の型紙 `mypageform_03_thanks.php` が `screen.width <= 767` のとき携帯版の型紙
 * （`/sp/form/mypageform_03/thanks/`）へ JS で転送する。そのため、ここではご紹介プログラムだけを両幅とも値を書いて決める.
 * 🚨 この注釈の中にも、アスタリスクとスラッシュを続けて書かない.
 * -------------------------------------------------------------------------- */
.page-content:has(.pa-thanks-body--shoukai) {
	padding-bottom: 25px;
}

@media (max-width: 749px) {
	.page-content:has(.pa-thanks-body--shoukai) {
		padding-bottom: 0;
	}
}

@media (max-width: 749px) {
	.pa-thanks-body--shoukai {
		padding-bottom: 19.5px;
		background-color: #fff;
		box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
	}

	.pa-thanks-body.pa-thanks-body--shoukai .pa-thanks-body__text {
		margin: 0 26px;
		padding: 0 0 40px;
		color: #333;
		font-size: 16.9px;
		line-height: 1.6;
		text-align: left;
	}
}

@media (min-width: 1000px) {
	/*
	 * 来店希望店舗の帯（Bug #8561）。移行元は `css/page_inquiry.css` の `table td dl.area dt { width: 121px }`・
	 * `dd { width: 665px }` と、`.clearfix:after` の見えない「.」が帯（`display: table`）の 3 つ目の列になり、
	 * エリア名 120.41・店舗の並び 680.44 に割れる。店舗は丸・空白 1 字（4.56px）・字（`label` は
	 * `inline-block`）・`margin-right: 18px`・空白 1 字の並びで、帯の 1 行の高さは 24 である
	 * （dev は `inline-flex` の字の箱で 24.5 になっていた）（2026-09-27 の直す前の測定・CDP）.
	 *
	 * 🚨 **列の幅は「.」の列ごと写す。**エリア名と店舗の並びの幅を値（120.41 と 680.44）だけで置くと、
	 * 帯の幅 805 のうち「.」の列のぶん（4.15）が 2 つの列へ配り直され、測った値にならない。帯を
	 * 800.85 に縮めれば値で合うが、それでは帯の幅が移行元と違ってしまう。そこで移行元と同じく
	 * 見えない「.」を 3 つ目の列として置く（フッターの `form-frame.css`・Bug #8523 と同じ手）.
	 * 店舗の並びの幅は、移行元の `width: 665px` に左の内余白 19px を足した外形の 684px で書く
	 * （dev は `box-sizing: border-box` のため）.
	 *
	 * 🚨 **1000px 以上だけで効かせる。**999px 以下は、Bug #1986 の節（`@media screen and (max-width: 999px)`）が
	 * エリア名を店舗の並びの上へ積み替えて横あふれを止めている。ここの規則は名指しのぶん詳細度が高いので、
	 * 750px 以上の節に置くと 750〜999px で積み替えの `width: auto` に勝ち、店舗の並びが 684px のまま右へはみ出す.
	 */
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-area::after {
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-area__name {
		width: 121px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-area__stores {
		width: 684px;
	}

	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-area .pa-radio {
		gap: 4.56px;
		margin-right: calc(18px + 4.56px);
		vertical-align: top;
	}
}

/*
 * 会員紹介の来店希望店舗の帯の中の改行（Bug #8561）。移行元の `<br>` と同じ位置に定義から出す
 * （`PA_Forms_Definitions::STORE_AREA_BREAKS_BY_FORM`）。社員紹介（Bug #8521）と同じく 1280px 以上だけで出す。
 * 移行元と比べて測ったのは幅 1280 と 1440 だけで、1000〜1279px は測っていないため、折り返しをブラウザに任せる.
 */
@media (min-width: 1280px) {
	.pa-form[data-pa-form="reservation_intro"] .pa-area__break {
		display: inline;
	}
}

/* ======================================================================
 * 広告用の婚活 EQ 診断フォーム（eq_ad）の上部の LP（Feature #8593）。区画 ① 大きな写真と「今すぐ診断する」・
 * 区画 ② 婚活価値観 4 大チェックポイント（Task #8594）・区画 ③ 「婚活 EQ 診断」とは・こんな自分を発見します・
 * 区画 ④ 対象の表と帯（Task #8595）
 *
 * 移行元は `legacy/www.p-a.jp/public/form/view/eq_ad.php` の 129〜172 行（携帯版は `sp_eq_ad.php`）で、
 * 見た目は `form/view/asset/css/style2019.css`（携帯版は `style2019_sp.css`）の `.mv`・`.area01`・`.sec01`・
 * `.bar`・`.lead-sec01`・`.check-box`（区画 ③ と ④ は `.sec01-footer`・`.sec02`・`.eq-about`・`.voice-list`・
 * `.eq-body`・`.basic`・`.eq-sample`・`.sample-head`）が受け持つ。値はそのまま写した。移行元の後に読む `/request/style.css` が
 * 本文の書体（游ゴシック）と字の大きさ（16px）と字の色（`body, html { color: var(--text-color) }`）を決めているので、
 * それも写した。`--text-color` は入力画面の `<style>` の `:root` が持つ `#4a453d`（`eq_ad.php` の 110 行・
 * `sp_eq_ad.php` の 102 行）.
 *
 * 🚨 絵は移行元の絵のまま `<img>` で出す（ユーザー決定 D625）.
 *
 * 区画は画面の幅いっぱいに出す（移行元の `section.wrapper` は幅の指定を持たない）。フォームの外枠の中に
 * 置くので、`100vw` と負の左の余白で外枠の外へ広げる.
 * ==================================================================== */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	color: #4a453d;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp *,
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp *::before,
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp *::after {
	box-sizing: border-box;
}

/*
 * 移行元の `style2019.css` の先頭の打ち消しと、`p` の字の大きさを写す。
 * 🚨 `:where()` で包んで、下の区画ごとの規則（`padding-top` など）より詳細度を上げない。テーマの見出しの
 * 行の高さも受け継がせないよう、見出しは `line-height: 1`（移行元の `body` の値）にする.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp :where(h2, h3, p) {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	line-height: 1;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp :where(p) {
	font-size: 18px;
	line-height: 1.8;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp :where(img) {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

/*
 * 区画 ③ と ④ の一覧・表・見出しも、移行元の `style2019.css` の先頭の打ち消しにそろえる。行の高さは親から
 * 受け継ぐ（移行元の `body` の 1）。字の色と字間も受け継ぎ、テーマの見出しや定義の一覧の値を持ち込まない。
 * 字の太さは移行元の `/request/style.css` の値（`h4` と `th` は 700）を下の区画ごとの規則が持つ.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp :where(h4, ul, li, dl, dt, dd, table, tr, th, td) {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 100%;
	line-height: inherit;
	letter-spacing: normal;
	list-style: none;
}

/*
 * 🚨 画面の幅いっぱいに広げた区画を、フォームの外枠が左右で切り落とさないようにする（PR #8625 の Greptile の指摘）。
 * 外枠はテーマの `main#site-main.pa-form-frame__wrapper--wide`（`form-frame.css`・`overflow: clip` と
 * `max-width: 1100px`）で、1440 では中央の 1100px の外が白く抜けていた.
 *
 * この LP を持つページだけ、外枠の最大幅を外して画面の幅（スクロールバーを除く）にする。切り取り（`overflow: clip`）は
 * 残すので、下の `100vw` がスクロールバーの幅だけはみ出しても、外枠の端＝画面の端で切れて横スクロールは出ない
 * （外枠を外して `body` で切る形は採らない。`main.css` の「🚨 `body` へ置いても効かない」の節のとおり、Chromium では
 * `body` / `html` の切り取りで横スクロールが止まらない）.
 * フォームの本体（`.pa-form--mixed`・`max-width: 1100px`）は左寄せなので、外枠を広げた分だけ中央に寄せ、
 * いままでと同じ位置に置く.
 */
.pa-form-frame__wrapper--wide:has(.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp) {
	max-width: none;
}

.pa-form-frame__wrapper--wide .pa-form[data-pa-form="eq_ad"]:has(.pa-eq-ad-lp) {
	margin-right: auto;
	margin-left: auto;
}

/* 区画 ①. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__mv {
	background: #fff;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__mainvisual {
	position: relative;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__btn {
	position: absolute;
	right: 0;
	bottom: 25px;
	left: 0;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__btn:hover {
	opacity: 0.8;
}

/* 区画 ②. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__area01 {
	background: #f5f5f6;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec01 {
	width: 63.6%;
	margin: auto;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__title {
	padding-top: 70px;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__bar {
	padding-top: 50px;
	color: #a3752a;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__lead {
	padding: 40px 7.5%;
}

/* 移行元の携帯版は「、」と印の `<span>` のあいだに改行を持つので、印の外に空白が 1 つ出る（パソコン版は改行が無い）. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__lead-gap {
	display: none;
}

/* 移行元は左右へ回り込ませ、jQuery の matchHeight で同じ行の高さをそろえる。dev は折り返す横並びで同じ高さにする. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__checks--pc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__checks--sp {
	display: none;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__check {
	width: 49%;
	margin-bottom: 2%;
	padding: 1em;
	background: #fff;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__check-head {
	margin-bottom: 1em;
	color: #c5a674;
	font-size: 16px;
	font-weight: normal;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__check-pict {
	width: auto;
	max-height: 215px;
}

/* 区画 ③ の先頭（移行元は区画 ② の section の中の `.sec01-footer`）. */

/*
 * 🚨 パソコン版の背景の絵は、移行元では出ていない。移行元の `style2019.css` の 284 行が `../img/avuf/sec02_bg.avif`
 * と書き誤っていて、絵が読めない（絵は `avif/sec02_bg.avif` に在る）。dev は正しい絵を出す（ユーザー決定 D627・
 * D598 のケース 2・`docs/pa-cms/design/意図的変更の台帳.md`）。携帯版は移行元も正しい絵（`avif/mb/sec02_bg.avif`）を出す.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec01-footer {
	width: 87.8%;
	margin: 70px auto 0;
	background: url("../images/eq_ad/sec02_bg.avif") 100% 100% no-repeat;
	background-size: 100% auto;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__footer-title {
	padding-top: 70px;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__footer-text {
	padding-top: 50px;
	padding-bottom: 90px;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sp-br {
	display: none;
}

/* 区画 ③. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec02 {
	width: 740px;
	margin: auto;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__about-title {
	padding-top: 70px;
	padding-bottom: 1em;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__about-pict,
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-answer,
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-pict {
	padding-bottom: 1em;
	text-align: center;
}

/* 移行元は、囲みのどこを押しても答えを開く（`assets/js/pa-forms.js` の `setupEqAdAbout()`）. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about {
	position: relative;
	margin: 1em 0 50px;
	padding: 2em;
	border: 1px solid #c5a674;
	background: #f5f5f6;
	cursor: pointer;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about::before {
	position: absolute;
	top: 2em;
	right: 1em;
	width: 10px;
	height: 10px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	content: "";
	transform: rotate( 135deg );
	transition: all 0.3s ease;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about.is-open::before {
	opacity: 0;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-head {
	color: #c5a674;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-q {
	color: #cb1e11;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-wrap {
	padding-top: 1em;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-wrap[hidden] {
	display: none;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-mark {
	background: linear-gradient( transparent 60%, #f9d2bf 60% );
	font-weight: 700;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about-a {
	color: rgb( 17, 70, 203 );
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-title {
	font-weight: 700;
	text-align: center;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 25px 0 0;
	padding-bottom: 50px;
	text-align: left;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list li {
	width: 360px;
	margin-bottom: 20px;
	padding: 15px 10px;
	border-radius: 10px;
	background: #fff;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dl {
	display: table;
	width: 100%;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dt,
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dd {
	display: table-cell;
	vertical-align: middle;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dt {
	width: 82px;
	height: auto;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dd {
	padding-left: 10px;
	font-size: 17px;
	line-height: 1.4;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dd span {
	color: #a67632;
	font-weight: bold;
}

/* 区画 ④（「今すぐ診断する」の行き先 `#eq`）. */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec04 {
	background: #fff;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-body {
	width: 740px;
	margin: auto;
}

/*
 * 🚨 テーマの携帯幅の規則（`main.css` の `.entry-content table:not(.pa-form-table)` と、その `> tbody`）は、表を
 * `display: block` にし、`tbody` を `display: table` にする。この表は移行元と同じ表の組みのまま出すので、両方を戻す.
 */
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic {
	display: table;
	width: 100%;
	margin: 30px 0;
	overflow: visible;
	border-collapse: collapse;
	border-spacing: 0;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic > tbody {
	display: table-row-group;
	width: auto;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic th,
.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic td {
	padding: 1em;
	border: 1px solid #b4b4b4;
	font-size: 18px;
	line-height: 1.8;
	text-align: left;
	vertical-align: baseline;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic th {
	background: #fdfbf9;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sample {
	margin-bottom: 10px;
	border: 1px solid #b4b4b4;
}

.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sample-head {
	padding: 0.5em;
	background: #a3752a;
	color: #fff;
	font-size: 20px;
	letter-spacing: -1px;
	text-align: center;
}

@media (max-width: 749px) {

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__mainvisual {
		max-width: 100%;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__btn {
		max-width: 60%;
		height: auto;
		bottom: 2%;
		margin: auto;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec01 {
		width: 92%;
	}

	/* 移行元の携帯版は題の絵に `width="240"` を持つ. */
	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__title {
		padding-top: 20px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__title img {
		width: 240px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__bar {
		padding-top: 10px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__lead {
		padding: 4% 0;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__lead-mark {
		background: linear-gradient( transparent 60%, #f9d2bf 60% );
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__lead-gap {
		display: inline;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__checks--pc {
		display: none;
	}

	/* 移行元の携帯版は 1 つの `.check-box` を 2 列の格子にし、1 枚にした絵を 4 枚並べる. */
	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__checks--sp {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 0.65em;
		width: 100%;
		margin-bottom: 2%;
		padding: 1em 0;
		text-align: center;
	}

	/*
	 * 移行元の携帯版の `style2019_sp.css` は `section { max-width: 768px; overflow: hidden }` を持つ。区画 ④ の表の上の
	 * 余白（30px）と帯の下の余白（10px）が section の外へ抜けず、section の中に残る。幅は 749px 以下なので最大幅は効かない.
	 */
	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp > section {
		overflow: hidden;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec01-footer {
		width: 92%;
		margin: 10px auto 0;
		background-image: url("../images/eq_ad/sp/sec02_bg.avif");
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__footer-title {
		padding-top: 50px;
		padding-bottom: 1em;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__footer-text {
		padding-top: 0;
		padding-bottom: 115px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sp-br {
		display: inline;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sec02 {
		width: 92%;
		overflow: hidden;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-about {
		padding: 8% 4%;
	}

	/* 移行元の携帯版は 1 列に積む. */
	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list {
		display: block;
		padding-bottom: 30px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list li {
		width: 100%;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__voice-list dt {
		width: 70px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__eq-body {
		width: 92%;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic th,
	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__basic td {
		font-size: 14px;
	}

	.pa-form[data-pa-form="eq_ad"] .pa-eq-ad-lp__sample-head {
		font-size: 18px;
		line-height: 1.3;
	}
}

/* ======================================================================
 * 広告用の婚活 EQ 診断フォーム（eq_ad・eq_as）の区画 ⑤ の設問（Feature #8593 の 3 段目・Task #8596。`eq_as` は Task #9060）。
 *
 * 移行元は `legacy/www.p-a.jp/public/form/view/eq_ad.php` の 254〜719 行（携帯版は `sp_eq_ad.php` の 235〜700 行）で、
 * 見た目は `form/view/asset/css/style2019.css`（携帯版は `style2019_sp.css`）の `.eq-check h2`・`#qListTable`・
 * `.faq_list` が受け持つ。値はそのまま写した（`/request/style.css` の `* { box-sizing: border-box }` も効いている）.
 *
 * - 見出しの絵（`h2.pa-eq-ad-qtitle`・移行元 `h2.q-check-title`）は、四方の負の余白で赤い枠の線の上へ重ねる
 * - 設問の塊（`div.pa-eq-ad-qlist`・移行元 `div#qListTable`）は、見出しの負の余白の分を上の内余白で空ける
 * - 選択肢は丸い絵（CSS の背景 `select_off`、選ぶと `select_on`）の下に 2 行の文言を置く。🚨 絵は投入では届かないので、
 *   プラグインの資材 `assets/images/eq_ad/` に置いた
 * - 🚨 `eq_as`（`form/view/eq_as.php` の 218〜662 行・携帯版は `sp_eq_as.php`）は同じ `style2019.css` の規則で組む。
 *   違うのは、字の色と書体（`eq_as` は `/request/style.css` を読まず、`style2019.css` の `body` の #101010・游ゴシック体・500）と
 *   見出しの絵（`eq_as/eq-ttl.png`・`eq_ad` の avif と別のファイル）だけで、下の節の終わりで上書きする。選択肢の丸い絵は
 *   同じファイル（md5 一致）なので `eq_ad/` のものを使う。最後の `<li>` の閉じ忘れも 20 問とも同じ
 * - 移行元は各設問の `ul` の最後の `<li>` を閉じ忘れ、空の 5 つ目の `li`（下の内余白だけを持つ）が次の行へ落ちて
 *   1 行ぶんの余白を作る。dev は空の `li` を出さず、同じ高さを `ul` の下の内余白で持つ
 * ==================================================================== */
.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-check > .pa-eq-ad-qtitle {
	width: auto;
	margin: -35px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-qtitle img {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

/* 字の色は、移行元の `/request/style.css` の `body, html { color: var(--text-color) }`（`#4a453d`）を受け継ぐ. */
.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-check > .pa-eq-ad-qlist {
	width: 80%;
	margin: auto;
	padding-top: 5em;
	color: #4a453d;
	font-size: 16px;
	line-height: 1;
	letter-spacing: normal;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-qlist .pa-eq-ad-q {
	margin: 0;
	padding: 0;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__title {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__no {
	display: inline-block;
	float: left;
	min-height: 2em;
	color: #cb1d11;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__choices {
	margin: 0;
	padding: 0;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list {
	clear: both;
	margin: 0;
	padding: 0 0 2em;
	list-style: none;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list::after {
	display: block;
	clear: both;
	content: "";
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list li {
	float: left;
	width: 24%;
	margin: 0 1% 0 0;
	padding: 0 0 2em;
	list-style: none;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__icon {
	display: block;
	width: 120px;
	height: 90px;
	margin: 0;
	padding-top: 90px;
	background: url("../images/eq_ad/select_off.avif") 50% 50% no-repeat;
	color: #686868;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: -1px;
	text-align: center;
	cursor: pointer;
}

.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list input[type="radio"]:checked + .pa-eq-ad-q__icon {
	background-image: url("../images/eq_ad/select_on.avif");
}

/* 移行元はラジオを `display: none` にするのでキーボードで選べない。dev は選べるので、焦点の位置を線で示す. */
.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list input[type="radio"]:focus-visible + .pa-eq-ad-q__icon {
	outline: 2px solid #cb1d11;
	outline-offset: 2px;
}

@media (max-width: 749px) {

	/* 移行元の携帯版は見出しの絵に `width="250"` を持つ. */
	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-check > .pa-eq-ad-qtitle {
		margin: -15px;
	}

	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-qtitle img {
		width: 250px;
	}

	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-check > .pa-eq-ad-qlist {
		width: 100%;
		padding: 2em 4% 4%;
		overflow: hidden;
	}

	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__title {
		font-size: 14px;
		line-height: 1.4;
	}

	/* 移行元の携帯版は最後の `li` だけ右の余白を 0 にするが、閉じ忘れた空の `li` が最後になるので、4 つとも 3% を持つ. */
	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list {
		padding-bottom: 1em;
	}

	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__list li {
		width: 22%;
		margin-right: 3%;
		padding-bottom: 1em;
	}

	.pa-form:is([data-pa-form="eq_ad"], [data-pa-form="eq_as"]) .pa-eq-ad-q__icon {
		width: 100%;
		height: auto;
		padding-top: 65px;
		background-position: 50% 20%;
		background-size: 70% auto;
		font-size: 10px;
	}
}

/*
 * `eq_as` の設問の字の色と書体と行の高さ（移行元の `style2019.css` の `body { line-height: 1; color: #101010 }`。
 * `eq_ad` の #4a453d と選択肢の `li` の行の高さは `/request/style.css` の値）.
 */
/* 題の `h2` は太字（700）のまま。上の節の `.pa-eq-ad-qtitle` の値である. */
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-eq-ad-qtitle,
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-eq-ad-qlist {
	color: #101010;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-eq-ad-qlist {
	font-weight: 500;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-ad-q__list li {
	line-height: 1;
}

/* ======================================================================
 * 広告用の婚活 EQ 診断フォーム `eq_as` の送信ボタン（Bug #8559 の 4 段目・Task #8602）。
 *
 * 移行元の `form/view/eq_as.php` の 893〜900 行（携帯版は `sp_eq_as.php` の 873〜880 行）は、「同意する」の
 * 箱の下に、枠の中身の 90%（`.eq-footer { width: 90% }`）の幅の絵のボタンを置く。送信できるときは
 * `btn-send02_off.png`（643×104・金茶のグラデーション・白い字「入力内容を送信」）、必須の欄が空のあいだは
 * `btn-end_off.png`（同じ大きさ・赤のグラデーション・白い字「未入力の必須項目があります」）で、マウスを乗せると
 * `_ov` の平らな色の絵に替わる（`form/view/asset/js/checkreq2.js` と `style2019.css` の `.hideSubmit`）.
 *
 * 🚨 絵は使わず、地と字で組む（全体原則「絵の中の文言は背景＋テキスト」）。値は絵の画素から読んだ.
 *
 * - 箱: 幅は枠の中身の 90%（PC は 736px の 90% ＝ 662.4px、携帯は枠 `92vw` から線 2px × 2 を引いた幅の 90%）。
 *   高さは絵と同じ縦横比（643 : 104）。角の丸みは絵の 4px（643 に対して）
 * - 地: 送信できるとき `rgb(187, 133, 56)` から `rgb(163, 106, 26)`、マウスを乗せると平らな `rgb(160, 104, 22)`。
 *   必須の欄が空のあいだ `rgb(208, 52, 41)` から `rgb(184, 26, 16)`、マウスを乗せると平らな `rgb(183, 22, 11)`
 * - 字: 白の太字。大きさは絵の字の送り（643 に対して 44.7px と 25.75px）をボタンの幅の割合にした
 *   （`cqw`。ボタンを包む `p` を幅の基準にする）。未入力の字は移行元と同じ 1 行にする（dev の共通の字の改行を隠す）
 * - 未入力のあいだの切り替えは、dev の今の仕組み（`.pa-form-submit--blocked`）のまま
 *
 * 🚨 同意の塊は、dev の共通の組みでは「同意する」の箱とボタンが横に並ぶ。移行元は「同意する」の箱の下にボタンを
 * 置くので、`eq_as` だけ縦に積んで真ん中に寄せる。「同意する」の箱そのものの見た目（144×60・桃色）は変えない.
 * ==================================================================== */
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-consent {
	flex-direction: column;
	align-items: center;
	gap: 1em;
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-consent__agree {
	height: 60px;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-consent__submit {
	width: 100%;
	padding-left: 0;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit {
	width: calc(736px * 0.9);
	margin: 0 auto;
	container-type: inline-size;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 0;
	aspect-ratio: 643 / 104;
	padding: 0;
	border: 0;
	border-radius: 0.622% / 3.846%;
	background: linear-gradient(rgb(187, 133, 56), rgb(163, 106, 26));
	color: #fff;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit__ready {
	font-size: 6.95cqw;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit--blocked button {
	padding: 0;
	background: linear-gradient(rgb(208, 52, 41), rgb(184, 26, 16));
	line-height: 1;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit__blocked {
	font-size: 4cqw;
}

.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit__blocked br {
	display: none;
}

/*
 * 🚨 選び方は class 5 つ以上にしてある。共通の茶色の枠線と白への反転
 * （`.pa-form:not(.pa-form--dl) .pa-form-submit:not(.pa-form-submit--blocked) button`・class 4 つ）に勝たせる.
 */
@media (hover: hover) {

	.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit:not(.pa-form-submit--blocked) button {
		border: 0;
		transition: none;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit:not(.pa-form-submit--blocked) button:hover {
		background: rgb(160, 104, 22);
		color: #fff;
	}

	.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit--blocked button:hover {
		background: rgb(183, 22, 11);
	}
}

@media (max-width: 749px) {

	.pa-form[data-pa-form="eq_as"] .pa-form-consent .pa-form-submit {
		width: calc((92vw - 4px) * 0.9);
	}
}

/* ======================================================================
 * 広告用の婚活 EQ 診断フォーム `eq_as` の同意の前後の区画（Bug #9439）.
 *
 * 移行元の `form/view/eq_as.php` の 885〜908 行と同じ組み（`PA_Forms_Embed::render_eq_footer_open()`）に、
 * `/form/view/asset/css/style2019.css` と `/css/page_inquiry.css` の値を当てる。値は 2026-10-05 の直す前の読み
 * （`pa-verify-assets/A/9439-直す前-1005/`）で測った移行元の計算後の値である.
 *
 * | 要素 | 移行元 1440 | 移行元 375 |
 * |---|---|---|
 * | 器 `div.eq-footer` | 幅 90%（662.4）・中央寄せ・字の色 rgb(16, 16, 16)・太さ 500 | 幅 90%（306.9） |
 * | 案内の段落 | 16px・行の高さ 28.8 | 12px・行の高さ 14.4 |
 * | 枠 `div.eq-footer-ex` | 地 #fffce2・外余白 16 0 50・内余白 8 | 同じ |
 * | 箇条書き | 18px・行の高さ 32.4。2 行目の下に 1em | 12px・行の高さ 14.4 |
 * | 法令の文と「> 情報セキュリティを見る」 | 16px・行の高さ 28.8。法令の文の下に 1em | 12px・行の高さ 14.4 |
 * | リンク | #1679ff・下線 | 同じ |
 * | 同意の札 `p.agree` | 114.4×39.6・内余白 3.6 9・18px・行の高さ 32.4・未チェックの地 rgb(255, 191, 191)・チェック後の地は透明・下に 18 | 同じ |
 * | 送信ボタン `p.check.pb50` | 幅 662.4・下の内余白 50（同意の札から器の下端まで 224.1） | 幅 306.9（同じく 166.6） |
 *
 * 同意の塊は、上の「`eq_as` の送信ボタン」の節の規則（`.pa-eq-check > .pa-form-consent`）の代わりに、器の直下の塊として縦に積む.
 * 同意の札は、移行元と同じ字の大きさと内余白の行内の箱にする（Task #8602 では 144×60 の箱のままにしていたが、この区画の箱を
 * 移行元にそろえるのが Bug #9439 の AC である）。下の内余白 59.4 は、移行元の送信ボタンの段落の行の箱の余り 9.4 と内余白 50 の和.
 * ==================================================================== */
.pa-form[data-pa-form="eq_as"] .pa-eq-footer {
	width: 90%;
	margin: 0 auto;
	color: rgb(16, 16, 16);
	font-weight: 500;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer__lead {
	margin: 0;
	font-size: 16px;
	line-height: 28.8px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer__ex {
	margin: 16px 0 50px;
	padding: 8px;
	background: #fffce2;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer__item {
	margin: 0;
	font-size: 18px;
	line-height: 32.4px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer__note {
	margin: 0;
	font-size: 16px;
	line-height: 28.8px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer__gap {
	padding-bottom: 1em;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer__ex a {
	color: #1679ff;
	text-decoration: underline;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer > .pa-form-consent {
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding-bottom: 59.4px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer .pa-form-consent__agree {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 3.6px 9px;
	background-color: transparent;
	font-size: 18px;
	font-weight: 500;
	line-height: 32.4px;
	text-align: center;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer .pa-form-consent--unchecked .pa-form-consent__agree {
	background-color: rgb(255, 191, 191);
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer .pa-form-consent__agree .pa-checkbox {
	display: inline;
	color: rgb(16, 16, 16);
	font-size: 18px;
	line-height: 32.4px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-footer .pa-form-consent__agree input[type="checkbox"] {
	margin: 3px 3px 3px 4px;
}

@media (max-width: 749px) {

	.pa-form[data-pa-form="eq_as"] .pa-eq-footer__lead,
	.pa-form[data-pa-form="eq_as"] .pa-eq-footer__item,
	.pa-form[data-pa-form="eq_as"] .pa-eq-footer__note {
		font-size: 12px;
		line-height: 14.4px;
	}
}

/*
 * 広告用の婚活 EQ 診断フォーム `eq_as` の個人情報の表の字の太さ（Bug #8623）.
 *
 * 移行元の `form/view/asset/css/style2019.css` は `body { font-weight: 500 }` で、表の字は題（`th`・700）のほかは
 * これを受け継ぐ。`/request/style.css` の `label { font-weight: inherit }` で、押しボタンの字も 500 になる.
 * dev は受け継ぐ太さが 400 なので、表の中身（`td`）を 500 にし、ラベルと案内に受け継がせる.
 * 🚨 入力欄と選択欄の字は 400 のまま（移行元も 400。2026-09-28 03:1x の下見で測った）.
 *
 * - 性別の押しボタン（移行元 `label.switch-box__label`・dev `.pa-switch__label`）: 移行元 500・dev 400 だった
 * - 欄の中身（`td`）: 移行元 500・dev 400 だった
 * - 郵便番号の案内（移行元は PC が `td` の字・携帯が `span`、dev `.pa-note`）: 移行元 500・dev 400 だった
 * - 🚨 アンケートの問いは変えない。移行元は `<p class="enq_p-1"><b>…</b></p>` で、字を描く `<b>` は既定の `bolder` で
 *   700 になる。dev の問いの規則の `bold`（700）と同じである（Bug #8623 の起票時は外側の `p` の 500 を読んでいた）.
 *   🚨 この注記に問いの class の名前を書かない。`tests/pa-forms/run-shiryo-layout.php` が、その名前を含む規則の数を注釈ごと数える
 */
.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table td {
	font-weight: 500;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-check > .pa-form-table td :is(label, .pa-note) {
	font-weight: inherit;
}

/* ======================================================================
 * 婚活 EQ 診断の広告フォーム `eq_ad`・`eq_as` の完了画面の本文（Bug #8965）
 *
 * 移行元は写し 68e3190cb の `form/view/eq_ad_thanks.php`・`eq_as_thanks.php`（携帯版は `sp_` 付きの 2 本）で、見た目は
 * `form/view/asset/css/style2019.css`（携帯版は `style2019_sp.css`）の `.header.thanks`・`.header-inner`・`.area01`・
 * `.sec01`・`.bar`・`.reserve` と、字の余白の `.tc`・`.pt70`・`.pt50`・`.pb1em`・`.pb2em`・`.w92`・`.pt1em` が受け持つ。
 * 値はそのまま写した。この画面は `/request/style.css` を読まないので、字の色は `style2019.css` の `body` の `#101010` である.
 * 本文は `PA_Forms_Thanks_Body::render_eq_ad_thanks()` が出す.
 *
 * 🚨 **規則は `.page-content__body .pa-eq-ad-thanks` を頭に付けて詳細度を (0,3,0) 以上にする。**テーマの
 * `.pa-page--eq .page-content__body h2`（0,2,1・字 240%）と `.page-content__body p`（0,1,1・下の余白）に勝つためである.
 *
 * 区画は入力画面の LP（`.pa-eq-ad-lp`）と同じく、`100vw` と負の左の余白でフォームの外枠の外へ広げる。外枠と本文の器の
 * 最大幅と、完了画面の下の内余白 55px（`.page-content:has(.pa-thanks-body)` の節）は、この画面では外す。移行元は区画の
 * 下にすぐ著作権の帯が続く.
 * ==================================================================== */
.pa-form-frame__wrapper--wide:has(.pa-eq-ad-thanks),
.page-content:has(.pa-eq-ad-thanks),
.page-content__body:has(.pa-eq-ad-thanks) {
	max-width: none;
}

.page-content:has(.pa-eq-ad-thanks) {
	padding-bottom: 0;
}

.page-content__body .pa-eq-ad-thanks {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	color: #101010;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
}

/* 移行元の `style2019.css`（携帯版も同じ）の 100〜104 行は、すべての要素を `border-box` にする。KV の白い箱の幅 50%（携帯版 80%）が内余白を含む. */
.page-content__body .pa-eq-ad-thanks,
.page-content__body .pa-eq-ad-thanks *,
.page-content__body .pa-eq-ad-thanks *::before,
.page-content__body .pa-eq-ad-thanks *::after {
	box-sizing: border-box;
}

/* 移行元の `style2019.css` の先頭の打ち消し. */
.page-content__body .pa-eq-ad-thanks :is(section, div, h1, h2, p, a, picture, img) {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.page-content__body .pa-eq-ad-thanks p.pa-eq-ad-thanks__note,
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__bar,
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__text p,
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__photo {
	font-size: 18px;
	line-height: 1.8;
}

.page-content__body .pa-eq-ad-thanks img {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

/* お礼の KV（`.header.thanks`）. `background` の一括指定が `.header` の `background-size: cover` を打ち消すので、絵は原寸. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv {
	padding: 7% 0;
	background: url(../images/eq_ad/thanks/complete_kv_bg.jpg) 50% 50% no-repeat;
}

/* `.header-inner` と `.header.thanks .header-inner`. 上下の内余白だけは幅の節（1000px・1500px）が変える. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv-inner {
	width: 50%;
	margin: 0 auto;
	padding: 1.5em 0 1.5em 3em;
	background: rgba( 255, 255, 255, 0.8 );
	text-align: left;
}

/* 🚨 見出しの外余白は、この規則（0,3,0）でも 0 と書く。テーマの `.page-content__body :is(h2, …):has(> :is(img, picture):only-child)`（0,2,2）が
 * 絵だけを持つ見出しへ下の外余白（1440 で 25px・375 で 18px）を当て、上の打ち消し（0,2,1）に勝つ（下見 走行 1 で実測）. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv-title {
	margin: 0;
	padding-bottom: 1em;
	font-size: 100%;
}

.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__note--sp {
	display: none;
}

/* `section.area01`. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__area01 {
	background: #f5f5f6;
}

.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__sec01 {
	width: 63.6%;
	margin: auto;
}

/* `h2.tc.pt70`. 字の大きさは、テーマの `.pa-page--eq .page-content__body h2`（240%）に負けないよう、ここでも 100% と書く. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__title {
	margin: 0;
	padding-top: 70px;
	font-size: 100%;
	text-align: center;
}

/* `p.tc.bar.pb1em`. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__bar {
	padding-top: 50px;
	padding-bottom: 1em;
	color: #a3752a;
	text-align: center;
}

/* `p.pb2em.tc` と行内の `padding-left: 8%; padding-right: 8%`. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__photo {
	padding: 0 8% 2em;
	text-align: center;
}

/* 文の `p.pb1em`. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__text p {
	padding-bottom: 1em;
}

/* `.reserve` と `.reserve + .reserve`. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__reserve {
	padding: 2em 10% 5em;
	text-align: center;
}

.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__reserve + .pa-eq-ad-thanks__reserve {
	padding-top: 0;
}

/* `eq_as` のキャンペーンのバナー 2 枚。移行元は行内の `style` で最大幅 643px と、2 枚目の上の余白 15px を持つ. */
.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__campaign img {
	max-width: min( 100%, 643px );
}

.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__campaign img.pa-eq-ad-thanks__campaign-sub {
	margin-top: 15px;
}

@media (min-width: 1000px) {
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv-inner {
		padding-top: 2em;
		padding-bottom: 2em;
	}

	/* `.pb1em img { max-width: 95% !important }`. */
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv-title img {
		max-width: 95%;
	}
}

@media (min-width: 1500px) {
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv-inner {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}

/* 携帯幅は `style2019_sp.css` の値. */
@media (max-width: 749px) {
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv {
		padding: 10% 0;
		background: url(../images/eq_ad/thanks/sp/complete_kv_bg.jpg) 0% 50% / 100% auto no-repeat;
	}

	/* `.header-inner`（幅 85%・内余白 1.15em 1.7em・中央寄せ）に `.header.thanks .header-inner`（幅 80%・右の内余白 0）. */
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__kv-inner {
		width: 80%;
		padding: 1.15em 0 1.15em 1.7em;
		text-align: center;
	}

	/* 携帯版のお礼の文は KV の下の `p.w92.pt1em.pb1em`. */
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__note--pc {
		display: none;
	}

	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__note--sp {
		display: block;
		width: 92%;
		margin: auto;
		padding: 1em 0;
	}

	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__sec01 {
		width: 92%;
	}

	/* `h2.tc.pt50`. */
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__title {
		padding-top: 50px;
	}

	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__bar {
		padding-top: 10px;
	}

	/* 携帯版の写真は文と同じ 92% の列の中の `p.pb2em`。`style2019_sp.css` は `.pb2em` を持たないので余白は 0、字寄せも左. */
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__photo {
		width: 92%;
		margin: auto;
		padding: 0;
		text-align: left;
	}

	/* `.reserve`（上下の内余白 1em・3em・幅 92%・字寄せの指定なし）. `eq_ad` は文の列の中にあるので、列の 92% のさらに 92% になる. */
	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__reserve {
		width: 92%;
		margin: 0 auto;
		padding: 1em 0 3em;
		text-align: left;
	}

	.page-content__body .pa-eq-ad-thanks .pa-eq-ad-thanks__campaign img {
		max-width: 100%;
	}
}

/* ======================================================================
 * 資料請求の冊子の広告フォーム `request_tool_ad`・`request_tool_as` の完了画面の本文（Bug #8986）
 *
 * 移行元は写し 68e3190cb の `form/view/request_tool_ad_thanks.php`・`request_tool_as_thanks.php`（携帯版は `sp_` 付きの 2 本）。
 * 本文は `PA_Forms_Thanks_Body::render_book_thanks()` が出す。お問い合わせ・法人と同じ古い版の作りなので、案内の箱・お礼の文・
 * 案内の文・来店予約の押しボタン・個別相談の流れ・TOP へ戻るは、上の `.pa-thanks-body` の節をそのまま使う。ここに書くのは冊子の版だけの差である.
 *
 * パソコン版の値は `css/page_inquiry.css`（`.mb50`・`.mb35`・`.mt30` は `css/style.css`）、携帯版の値は `sp/css/style.css`
 * （`#request.thanks`・`.box_campaign`・`#request.thanks .dayservice_sec .price_ttl`・`#guide`・`.back_top`）と `sp/css/common.css`（`img`）を写した.
 * 抜き出しの記録は `pa-verify-assets/A/8986-冊子の完了の本文の読み-0930/移行元の規則.md`.
 * ==================================================================== */

/* 4 コマ漫画の案内（`p.mb50`）。行き先が版で違うので、両方を出して幅で片方を隠す. */
.pa-thanks-body--book .pa-thanks-body__book-comic {
	margin: 0 0 50px;
}

.pa-thanks-body--book .pa-thanks-body__book-comic-link--sp,
.pa-thanks-body--book .pa-thanks-body__book-dayservice-text--sp,
.pa-thanks-body--book .pa-thanks-body__book-dayservice-image {
	display: none;
}

/* キャンペーンの案内の見出し（`#complete .dayservice_sec h4`・明朝体）. */
.pa-thanks-body--book .pa-thanks-body__book-dayservice-heading {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #a3762b;
	background: none;
	color: #a3762b;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 30px;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 85px;
}

/* 文（`p.mb35.mt30`）. */
.pa-thanks-body--book .pa-thanks-body__book-dayservice-text {
	margin: 30px 0 35px;
}

/* 個別相談の流れの古い版（`#guide01 .flow` の下の外余白 60px・`c-thx` の無い版）. */
.pa-thanks-body--book .pa-thanks-body__guide {
	margin-bottom: 0;
}

.pa-thanks-body--book .pa-thanks-body__guide--flow-first .pa-thanks-body__guide-flow {
	margin: 0 0 60px;
}

.pa-thanks-body--book .pa-thanks-body__guide--flow-first .pa-thanks-body__guide-message {
	margin: 0;
}

@media (min-width: 750px) {
	/* 送信完了の帯（`p.page_flow_img`）は、絵の下に行の余り 6px を持つ（下見 走行 1 で実測・案内の箱の上端が帯の上端から 104px）. */
	.pa-thanks-body--book .pa-thanks-body__flow {
		margin-bottom: 36px;
	}

	/* 案内の箱の中の段落は、箱の行の高さ 166% を受け継ぐ（テーマの `.page-content__body p` の 1.5 を当てない）. */
	.pa-thanks-body--book .pa-thanks-body__book-lead,
	.pa-thanks-body--book .pa-thanks-body__book-comic,
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-text,
	.pa-thanks-body--book .pa-thanks-body__reserve,
	.pa-thanks-body--book .pa-thanks-body__guide-photo {
		line-height: 1.66;
	}
}

@media (max-width: 749px) {
	/* `#request.thanks`（上下の内余白 25px・下の外余白 30px・下の罫線）. 移行元は送信完了の帯から TOP へ戻るまでを包む. */
	.pa-thanks-body.pa-thanks-body--book {
		margin-bottom: 30px;
		padding: 25px 0;
		border-bottom: 1px solid #cccccc;
	}

	/* 本文の最後の要素になると、テーマの `.page-content__body.page-content__body > :last-child { margin-bottom: 0 }`（0,3,0）が
	   上の 30px に勝つ。お問い合わせの完了画面（`.pa-thanks-body--inquiry`）と同じ形で、(0,4,0) で戻す（PR #8995 の Greptile の指摘）. */
	.page-content__body.page-content__body > .pa-thanks-body.pa-thanks-body--book {
		margin-bottom: 30px;
	}

	/* `.box_campaign`（左右 6.25%・下 20px。完了画面では罫線なし）. 字寄せは左. */
	.pa-thanks-body--book .pa-thanks-body__book-campaign {
		padding: 0 6.25% 20px;
		text-align: start;
	}

	.pa-thanks-body--book .pa-thanks-body__book-first-reserve--pc-only {
		display: none;
	}

	/* 案内の文とキャンペーンの文（`.box_campaign .campaign_copy`）. */
	.pa-thanks-body--book .pa-thanks-body__book-lead,
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-text {
		margin: 0 0 18px;
		font-size: 14px;
		line-height: 1.35;
	}

	.pa-thanks-body--book .pa-thanks-body__book-comic {
		margin: 0 0 15px;
	}

	.pa-thanks-body--book .pa-thanks-body__book-comic-link--pc,
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-text--pc {
		display: none;
	}

	.pa-thanks-body--book .pa-thanks-body__book-comic-link--sp,
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-text--sp,
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-image {
		display: block;
	}

	/* 携帯版の絵は幅いっぱいのブロック（`sp/css/common.css` の `img`）. */
	.pa-thanks-body--book .pa-thanks-body__book-comic img,
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-image img,
	.pa-thanks-body--book .pa-thanks-body__reserve img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* `#request.thanks .dayservice_sec .price_ttl`. */
	.pa-thanks-body--book .pa-thanks-body__book-dayservice-heading {
		margin: 0 0 20px;
		padding: 15px 0;
		border-bottom: 2px solid #a3762b;
		font-size: 20px;
		line-height: 1.2;
		text-align: start;
	}

	.pa-thanks-body--book .pa-thanks-body__book-dayservice-image {
		margin: 0 0 15px;
	}

	/* 1 本目の押しボタンは `.box_campaign .campaign_heijitsu`（太字・中央・行 150%・字 16px）の中の `p`. */
	.pa-thanks-body--book .pa-thanks-body__reserve {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}

	/* `#guide`（上下 25px）と `section#guide01.anchor_block`（左右 6.25%・下の外余白 8%）. 2 本目の押しボタンの `p` は `#guide p`（下 4%）. */
	.pa-thanks-body--book .pa-thanks-body__guide {
		margin-bottom: 0;
		padding: 25px 6.25% calc(25px + 8%);
	}

	/* 2 本目の押しボタンの `p` の下 4%（`#guide p`）は、区画の下の外余白 8% と重なって消える（下見 走行 1 で実測）. 下は区画の内余白が持つ. */
	.pa-thanks-body--book .pa-thanks-body__guide .pa-thanks-body__reserve {
		margin: 0;
		font-weight: normal;
	}

	/* 流れの区画の下は 8%（`#guide .flow`）. 上のパソコン幅の 60px を携帯幅では当てない. */
	.pa-thanks-body--book .pa-thanks-body__guide--flow-first .pa-thanks-body__guide-flow {
		margin: 0 0 8%;
	}

	/* 流れの見出しの絵（`#guide .flow h4`・下 4%）. テーマの絵だけの見出しの規則（0,2,2・下 18px）に勝つよう (0,3,0) で書く. */
	.pa-thanks-body--book .pa-thanks-body__guide-flow .pa-thanks-body__guide-flow-heading--sp {
		margin: 0 0 4%;
	}

	/* 写真の段落も `#guide p`（下 4%）. */
	.pa-thanks-body--book .pa-thanks-body__guide-message--sp .pa-thanks-body__guide-photo {
		margin: 0 0 4%;
	}

	/* `.back_top`（字 14px・中央・余白なし）. 下の 25px は `#request.thanks` の内余白が持つ. */
	.pa-thanks-body--book .pa-thanks-body__back {
		padding: 0;
		font-size: 14px;
	}
}

/* ======================================================================
 * 婚活 EQ 診断の広告 LP 15 本の、携帯幅の入力画面の LP の頭と設問の前置き（Task #8998）
 *
 * HTML は `PA_Forms_Ad_Lp_Head`（`includes/class-pa-forms-ad-lp-head.php`）が出す。移行元の携帯版の型紙
 * （写し 68e3190cb の `form/view/sp_eq_lp*.php`・`sp_eq_lp2*.php`・`sp_eq_mens_lp*.php`）の値をそのまま写した:
 *   - LP の頭: `sp/form/eqlp/css/common.css`・`sp/form/eqlp2/css/eq2.css`・`sp/form/eqlp_mens/css/eq_mens.css`
 *   - 設問の前置き: `sp/css/style.css` の `#analysis` の節（2809〜2913 行）
 *   - 両方の土台: `sp/css/basic.css` の打ち消し（要素ごとに字の大きさ 13px）・`sp/css/common.css` の `body` の書体と
 *     `img { width: 100%; height: auto; display: block }`・`sp/css/style.css` の素の `dl`・`dt`・`dd`
 *
 * 🚨 **LP の頭は、移行元と同じく幅 640px の器を `zoom` で縮めて出す。**移行元は `tilt.js` が端末の向きで `body` に
 * `portrait`（縦）か `landscape`（横）を付け、`#main-contents` を 50% か 75% に縮める。CSS の値の半分が画面の寸法に
 * なるので、値を半分に割って書き直すより、器ごと縮めるほうが移行元の値をそのまま写せる。向きは CSS の
 * `orientation` で見る。設問の前置き（`#analysis`）は縮める器の外にあり、画面の幅いっぱいに出る.
 *
 * 🚨 **移行元は `box-sizing` を指定しない（`content-box`）。**dev のテーマは `border-box` を使うので、塊の中を
 * `content-box` に戻す（`width: 46%` と内余白を持つ `dl.l2` などの幅が変わるため）.
 *
 * 🚨 **パソコン幅では出さない。**パソコン幅は Task #8999 と Bug #8943 の決定が受け持つ.
 *
 * 詳細度: テーマの本文の規則（`.page-content__body p` の (0,1,1)・絵だけの見出しの外余白の (0,2,2)）に勝つよう、
 * 打ち消しは `.pa-form .pa-eq-lp` の (0,2,0)、見出しは類名 3 つの (0,3,0) で書く.
 * ==================================================================== */
.pa-form .pa-eq-lp {
	display: none;
}

@media (max-width: 749px) {
	.pa-form .pa-eq-lp {
		display: block;
		color: #000;
		font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
		font-size: 13px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		text-align: start;
	}

	/* `eq_mens.css` の `#wrap { color: #2f2f2f }`。設問の前置きも `#wrap` の中にある. */
	.pa-form .pa-eq-lp--eqlp-mens {
		color: #2f2f2f;
	}

	/*
	 * 標準の婚活 EQ 診断の前置きのうち、題の絵とメディアの文を出さない。移行元の LP は持たない.
	 * 数字の見本（`.pa-eq-intro__keypad`）は残す。移行元の `.text_check` にあたる.
	 */
	.pa-form:has(> .pa-eq-lp) .pa-eq-intro__heading,
	.pa-form:has(> .pa-eq-lp) .pa-eq-intro__media {
		display: none;
	}

	/*
	 * ページ名（「婚活 EQ 診断つき資料請求」）と、外枠の上の内余白 48px を出さない。移行元は LP 専用ヘッダーの
	 * すぐ下に LP の頭を置く。`pa-form-frame--eq-lp` はテーマが 15 本の入力画面の `body` に付ける（Bug #8943）.
	 */
	.pa-form-frame--eq-lp .pa-form-frame__page-name {
		display: none;
	}

	.pa-form-frame--eq-lp .pa-form-frame__wrapper {
		padding-top: 0;
	}

	/* `basic.css` の打ち消し。要素ごとに字の大きさを 13px にする（親から受け継がない）. */
	.pa-form .pa-eq-lp :where(div, p, ul, li, dl, dt, dd, h3, h4, em, span, a, img, details, summary) {
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		font-family: inherit;
		font-size: 13px;
		font-style: normal;
		font-weight: normal;
		line-height: inherit;
		letter-spacing: normal;
		text-align: inherit;
		text-decoration: none;
		vertical-align: baseline;
		list-style: none;
	}

	/*
	 * 一覧の字寄せを親から受け継ぐ。テーマの `:is(.entry-content, .page-content__body) :is(ol, ul, …, .story_inner .archive_ttl) { text-align: left }`
	 * （`main.css`）は、`:is()` の中に類名 2 つの `.story_inner .archive_ttl` を持つので、詳細度が (0,3,0) になる。
	 * これに勝つよう、器の類名まで書いて (0,3,1) にする（下見 走行 1 と 2 の外れ。`justify` の器の中の一覧が左寄せになっていた）。
	 * 移行元の一覧は器の `text-align: justify` を受け継ぐ.
	 */
	.pa-form .pa-eq-lp .pa-eq-lp__main :is(ul, ol),
	.pa-form .pa-eq-lp .pa-eq-lp__analysis :is(ul, ol) {
		text-align: inherit;
	}

	/* `sp/css/style.css` の `a { color: #000000; text-decoration: underline }`. */
	.pa-form .pa-eq-lp a {
		color: #000;
		text-decoration: underline;
	}

	/* 絵を包む `<picture>`（パソコン幅で空の絵を選ばせるため・`PA_Forms_Ad_Lp_Head::PC_BLANK_SOURCE`）は、箱を作らない. */
	.pa-form .pa-eq-lp .pa-eq-lp__picture {
		display: contents;
	}

	/* `sp/css/common.css` の `img`. */
	.pa-form .pa-eq-lp img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* `basic.css` の `a img:hover`. */
	.pa-form .pa-eq-lp a img {
		transition: 0.7s;
	}

	.pa-form .pa-eq-lp a img:hover {
		opacity: 0.75;
	}

	/* `#main-contents`（幅 640px・縦で 50%・横で 75%）. */
	.pa-form .pa-eq-lp .pa-eq-lp__main {
		width: 640px;
		margin: 0 auto;
		background-color: #fff;
		zoom: 0.5;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__clearfix::after {
		content: " ";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}

	/*
	 * `hr`。先頭の 1 本は上の外余白を 0 にする。移行元は LP 専用ヘッダーの下の余白（15px）と `hr` の上の余白
	 * （既定の 0.5em）が重なって 15px になる。dev はヘッダーの下の余白 7.5px（縮めた後の値）をテーマが持つ.
	 */
	.pa-form .pa-eq-lp .pa-eq-lp__rule {
		box-sizing: content-box;
		height: 0;
		margin: 6.5px 0 10px;
		padding: 0;
		overflow: hidden;
		border: 1px solid #ccc;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__rule:first-child {
		margin-top: 0;
	}

	/* `eq2.css`・`eq_mens.css` の `hr { border: #CCCCCC 1ox }` は値が壊れていて、ブラウザの既定（1px の inset・灰色）が残る. */
	.pa-form .pa-eq-lp--eqlp2 .pa-eq-lp__rule,
	.pa-form .pa-eq-lp--eqlp-mens .pa-eq-lp__rule {
		margin-bottom: 6.5px;
		padding: 5px 0;
		border: 1px inset gray;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__main p {
		clear: both;
		color: #333;
		line-height: 150%;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__visual {
		clear: both;
		margin: 0;
	}

	.pa-form .pa-eq-lp--eqlp2 .pa-eq-lp__visual {
		margin: -22px 0 0;
	}

	.pa-form .pa-eq-lp--eqlp-mens .pa-eq-lp__visual {
		margin: -22px 0 20px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__rect {
		padding: 10px;
		text-align: justify;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__box {
		clear: both;
		margin: 5px 10px 20px;
		padding: 10px;
		background-color: #ececec;
		text-align: justify;
	}

	.pa-form .pa-eq-lp--eqlp2 .pa-eq-lp__box,
	.pa-form .pa-eq-lp--eqlp-mens .pa-eq-lp__box {
		clear: none;
		margin: 0;
		padding: 10px 0 0;
		background-color: transparent;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__h3 {
		clear: both;
		margin: 0 0 15px;
		text-align: center;
	}

	/*
	 * `h4` は移行元の CSS に規則が無く、打ち消しの外余白 0 のまま。テーマの「絵だけの見出し」の外余白
	 * （`.page-content__body :is(h2, …, h6):has(> :is(img, picture):only-child)`・詳細度 (0,2,2)）が打ち消しに勝つので、
	 * 類名 3 つで外余白を 0 に戻す（下見 走行 1 で、`eq_mens_lp` 系の `h4` の下が 9px ずつ広かった）.
	 */
	.pa-form .pa-eq-lp .pa-eq-lp__h4 {
		margin: 0;
	}

	.pa-form .pa-eq-lp--eqlp2 .pa-eq-lp__h3,
	.pa-form .pa-eq-lp--eqlp-mens .pa-eq-lp__h3 {
		margin: 30px 0 15px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__astlist {
		margin: 10px 0;
		padding-left: 1em;
		font-size: 90%;
		line-height: 1.3em;
		text-indent: -1em;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__toha {
		margin: 10px;
		padding: 20px;
		background: url(../images/eq_lp/eqlp/voice_bg.gif) repeat left top;
		text-align: justify;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__toha-inner {
		padding: 20px;
		background: #fff;
		box-shadow: 1px 1px 3px #bebebe;
	}

	/* `eq2.css` の `#toha`。背景の線の絵 `images2/eq2/line01.png` は移行元の写しに無く、白の地だけが出る. */
	.pa-form .pa-eq-lp--eqlp2 .pa-eq-lp__toha {
		margin: 0;
		padding: 40px;
		background: #fff;
	}

	.pa-form .pa-eq-lp--eqlp-mens .pa-eq-lp__toha {
		margin: 0;
		padding: 40px;
		background: transparent;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__txt-b {
		font-size: 120%;
		font-weight: bold;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__ind {
		margin-left: 1em;
		text-indent: -1em;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__fr {
		float: right;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__fl {
		float: left;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__ml20 {
		margin-left: 20px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__ml10 {
		margin-left: 10px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__mb10 {
		margin-bottom: 10px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__main .pa-eq-lp__pt10 {
		padding-top: 10px;
	}

	/* `.center` は `eq_lp` 系の CSS だけが持つ（`eq2.css`・`eq_mens.css` には無い）. */
	.pa-form .pa-eq-lp--eqlp .pa-eq-lp__main .pa-eq-lp__center {
		text-align: center;
	}

	/* `eq2.css`・`eq_mens.css` の `ul.lead`. */
	.pa-form .pa-eq-lp .pa-eq-lp__lead {
		margin: 0 10px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__lead li {
		padding-bottom: 10px;
		font-size: 116%;
	}

	.pa-form .pa-eq-lp--eqlp2 .pa-eq-lp__lead em {
		color: #c62a32;
	}

	.pa-form .pa-eq-lp--eqlp-mens .pa-eq-lp__lead em {
		color: #0066cc;
	}

	/* `eq_mens.css` の `ul.notes`・`.sp_box`・`.blue_bg` ほか. */
	.pa-form .pa-eq-lp .pa-eq-lp__notes {
		margin: 0 0 0 10px;
		padding: 0;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__notes li {
		padding-left: 1em;
		font-size: 85%;
		line-height: 1.3em;
		text-indent: -1em;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__sp-box {
		padding: 10px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__main .pa-eq-lp__sp-box p {
		padding-bottom: 10px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__blue {
		margin-bottom: 15px;
		padding: 10px;
		border: 2px solid #0066cc;
		border-radius: 10px;
		background: linear-gradient(to bottom, #fff 0%, #f1f9fd 100%);
	}

	/* `sp/css/style.css` の素の `dl`・`dt`・`dd` を、`eq_mens.css` の `.blue_bg` の規則で上書きした値. */
	.pa-form .pa-eq-lp .pa-eq-lp__blue dl {
		clear: none;
		margin: 0;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__l2 {
		width: 46%;
		padding: 0 10px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__l3 {
		width: 30%;
		padding: 0 9px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__bdr {
		border-right: 1px solid #7db1e5;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__blue dt {
		color: #0066cc;
		font-size: 93%;
		font-weight: bold;
		text-align: center;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__blue dt em {
		display: block;
		color: #0066cc;
		font-size: 123.1%;
		font-weight: bold;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__blue dd {
		padding: 10px 6.25%;
		font-size: 15px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__main .pa-eq-lp__semi p {
		font-weight: bold;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__semi dd {
		padding: 50px 0 0;
		background-position: center top;
		background-repeat: no-repeat;
		font-size: 93%;
		text-align: center;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__pic01 dd {
		background-image: url(../images/eq_lp/eqlp_mens/pic01.jpg);
	}

	.pa-form .pa-eq-lp .pa-eq-lp__pic02 dd {
		background-image: url(../images/eq_lp/eqlp_mens/pic02.jpg);
	}

	.pa-form .pa-eq-lp .pa-eq-lp__pic03 dd {
		background-image: url(../images/eq_lp/eqlp_mens/pic03.jpg);
	}

	/* 設問の前置き（`#analysis`）。画面の幅いっぱいに出す. */
	.pa-form .pa-eq-lp .pa-eq-lp__analysis {
		width: 100vw;
		margin-left: calc( 50% - 50vw );
		padding: 25px 0 0;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__main-copy {
		margin-bottom: 12px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__sub-copy {
		margin-bottom: 15px;
		padding: 15px 6.25%;
		font-size: 12px;
		line-height: 140%;
		text-align: center;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__sample {
		margin-bottom: 20px;
		padding: 15px 6.25%;
		background: #f5f5f5;
		line-height: 120%;
		text-align: center;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__attention {
		clear: both;
		margin: 0;
		padding: 0 3.214%;
		border: 1px solid #e1200f;
		background: #fff;
	}

	/* 素の `dt`（内余白 10px 6.25%・字 15px）に `#analysis dl.attention dt` を重ねた値. */
	.pa-form .pa-eq-lp .pa-eq-lp__attention-head {
		display: block;
		padding: 10px 6.25%;
		color: #e1200f;
		font-size: 15px;
		text-align: center;
		cursor: pointer;
		list-style: none;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__attention-head::-webkit-details-marker {
		display: none;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__attention-head span {
		display: block;
		background: url(../images/analysis/sp-icon.gif) no-repeat right center / 8px 8px;
		font-size: 12px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__attention-body {
		padding: 12px 0;
		border-top: 1px solid #e1200f;
		font-size: 11px;
		line-height: 145%;
		text-align: left;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__atte-txt {
		padding: 0 0 15px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__atte-txt li {
		margin: 0 0 5px 12px;
		font-size: 11px;
		text-indent: -12px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__atte-txt2 {
		padding: 0 0 0 20px;
	}

	.pa-form .pa-eq-lp .pa-eq-lp__atte-txt2 li {
		margin-bottom: 5px;
		list-style: disc;
	}
}

@media (max-width: 749px) and (orientation: landscape) {
	.pa-form .pa-eq-lp .pa-eq-lp__main {
		zoom: 0.75;
	}
}

/* ======================================================================
 * 婚活 EQ 診断の広告 LP `eq_lp` 系 5 本の、パソコン幅の入力画面の題と見本の塊（Task #8999）
 *
 * HTML は `PA_Forms_Ad_Lp_Head::pc_head_eqlp()`（題と見本の塊）と `pc_transition_text_html()`（個人情報の欄の前の案内の文）が出す。
 * 移行元はパソコン版の型紙 `form/view/eq_lp.php`（写し 68e3190cb・5 本とも同じ）で、値は次から写した:
 *   - `css/page_inquiry.css` の `.category_ttl`・`#analysis .sample_box`・`.img_sample`・`.detail_sample`
 *   - `css/common.css` の `body`（字 13px・游ゴシック）と要素の打ち消し（外余白と内余白 0）・`.clearfix:after`
 *
 * - 標準の婚活 EQ 診断の題の絵・メディアの文・個人情報の欄の前の標準の文・進み具合の表示（`ol.pa-eq-flow`）は、この 5 本の
 *   パソコン幅で隠す（移行元の `eq_lp.php` は持たない。進み具合の絵 `img_flow01.gif` は意図的変更の台帳 118 行のとおり写さない）
 * - ページ名と外枠の上の内余白 48px も隠す。移行元は題の絵がヘッダーのすぐ下（上端 120）から始まる
 * - 🚨 絵の寸法は移行元の `width`・`height` の値を CSS にも書く。移行元は題（実寸 934×95）・写真（120×178）・注意点（714×116）を
 *   縦横比を崩して出しており、テーマの `img` の規則（`height: auto` など）が効くと寸法が戻るため（統括の判断・D598 のケース 1）
 * - 🚨 幅 750〜1100px の画面では、題の絵（824）と見本の 2 列（余白を含めて 944）が外枠に収まらず、外枠の `overflow: clip` で
 *   右端が切れる（PR #9050 のレビュー）。題の絵と注意点の絵は `max-width: 100%` と、移行元の寸法の比の `aspect-ratio` で縮める.
 *   注意点の列は、写真の列 120 と左の余白 50 を引いた幅を上限にする。幅 1440 では上限に届かず、移行元の寸法のままである
 * - 携帯幅では出さない（携帯幅は Task #8998 の節が受け持つ）
 * ==================================================================== */
@media (min-width: 750px) {
	.pa-form .pa-eq-lp-pc {
		display: block;
		color: #000;
		font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
		font-size: 13px;
		line-height: normal;
		letter-spacing: normal;
		text-align: left;
	}

	.pa-form .pa-eq-lp-pc :where(div, p, h2, img) {
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		border: 0;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp__picture {
		display: contents;
	}

	/* `.category_ttl`（下 50px・行の高さ 0）と `h2` の打ち消し。テーマの絵だけの見出しの外余白（0,2,2）に勝つよう類名 3 つで書く. */
	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__title {
		margin: 0 0 50px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 100%;
		font-weight: bold;
		line-height: 0;
	}

	.pa-form .pa-eq-lp-pc img {
		display: inline;
		max-width: none;
		vertical-align: baseline;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__title img {
		width: 824px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 824 / 53;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__sample {
		margin: 0 0 40px;
		padding: 30px;
		background: #f5f5f5;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__clearfix::after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
		line-height: 0;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__sample-image {
		float: left;
		width: 120px;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__sample-image img {
		width: 128px;
		height: 164px;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__sample-detail {
		float: left;
		width: 714px;
		max-width: calc(100% - 170px);
		padding: 0 0 0 50px;
	}

	.pa-form .pa-eq-lp-pc .pa-eq-lp-pc__sample-detail img {
		width: 714px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 714 / 114;
	}

	.pa-form:has(> .pa-eq-lp-pc) .pa-eq-intro__heading,
	.pa-form:has(> .pa-eq-lp-pc) .pa-eq-intro__media,
	.pa-form:has(> .pa-eq-lp-pc) .pa-eq-transition__text:not(.pa-eq-transition__text--eqlp-pc),
	.pa-form:has(> .pa-eq-lp-pc) .pa-eq-flow {
		display: none;
	}

	.pa-form-frame__page-name:has(~ .page-content__body .pa-eq-lp-pc) {
		display: none;
	}

	.pa-form-frame__wrapper:has(.pa-form > .pa-eq-lp-pc) {
		padding-top: 0;
	}
}

@media (max-width: 749px) {
	.pa-form .pa-eq-lp-pc,
	.pa-form .pa-eq-transition__text--eqlp-pc {
		display: none;
	}
}

/* ======================================================================
 * 婚活 EQ 診断の広告 LP 15 本の、携帯幅の個人情報の欄（Task #9004）
 *
 * 🚨 **広告フォームの携帯幅の欄は、同じ型紙を共有する系統は印で、単独の形は列挙で当てる.**
 *   - 印: `eq_lp`・`eq_lp2`・`eq_mens_lp` の 3 系統 15 本（`PA_Forms_Ad_Lp_Head::FAMILIES` の顔ぶれ）は、
 *     `PA_Forms_Ad_Lp_Head::sp_personal_class()` が付ける `.pa-form--eq-lp-sp` で当てる。15 本の識別子を並べない
 *   - 列挙: 型紙を共有しない単独の形（`request_lp`・`request_ad` など）は、これまでどおり `[data-pa-form="…"]` を並べる
 *   （統括の判断 2026-09-30・案 B）
 *
 * 移行元は携帯版の型紙 `form/view/sp_eq_lp*.php`・`sp_eq_lp2*.php`・`sp_eq_mens_lp*.php` の 498〜828 行（写し 68e3190cb）で、
 * 15 本とも古い携帯版の欄（灰色の帯の見出し・桃色の入力欄・姓と名の横並び）を持つ。この欄の組みは資料請求の広告 LP
 * （`request_lp`）の携帯版と同じなので、表の組み（行・見出しの器・入力欄・同意の塊）は、上の `request_lp` 系の携帯幅の規則に
 * 印の選択子を 1 本ずつ足して当てる。この節は、`request_lp` に無い部分だけを持つ:
 *   - 見出し「続いて、診断結果の送付先の情報を入力ください。」（移行元の `p.form_ttl`）と案内の文（`p.form_text`）の寸法。
 *     値は `sp/css/style.css` の `#analysis .form_ttl`・`#analysis .form_text` を、幅 375 の実測（2026-09-30）で確かめた
 *   - 標準の婚活 EQ 診断の案内の文と進み具合の表示（`ol.pa-eq-flow`）を隠す。移行元の見出しの下の流れの絵（`img_flow01.gif`）は、
 *     意図的変更の台帳 118 行のとおり写さない
 * 見出しの色は触らない（`eq_mens_lp` 系は Bug #8643 の #2f2f2f、ほかは Bug #8650 の黒が受け持つ）.
 *
 * 見出しと案内の文は、表と同じく器（`.pa-form-frame__wrapper`）の左右 16px の内余白を打ち消して画面いっぱいにする。
 * 左右の内余白は、移行元の 6.25%（幅 375 で 23.4375px）を、打ち消したあとの幅（器の中の幅 + 32px）から出す.
 * ==================================================================== */
@media (max-width: 749px) {
	.pa-form.pa-form--eq-lp-sp .pa-eq-transition__heading {
		margin: 0 -16px 20px;
		padding: 30px calc( ( 100% + 32px ) * 0.0625 ) 0;
		border-top: 1px solid #888888;
		font-size: 14px;
		line-height: normal;
		letter-spacing: normal;
	}

	.pa-form.pa-form--eq-lp-sp .pa-eq-transition__text--eqlp-sp {
		margin: 0 -16px;
		padding: 12px calc( ( 100% + 32px ) * 0.0625 );
		font-size: 11px;
		line-height: 145%;
	}

	/*
	 * コメント。移行元は `rows` を持たない `textarea` で高さ 107（`sp/css/style.css` の `dd textarea`・幅 375 の実測）.
	 * `request_lp` の 166（`rows="8"`）とは違う。`dd` の中の行の要素なので、下に字の下がりの 6px が付く（`request_lp` の節と同じ）.
	 */
	.pa-form.pa-form--eq-lp-sp textarea.pa-control {
		min-height: 107px;
		height: 107px;
		margin-bottom: 6px;
	}

	/*
	 * 最後の行（コメント）の下の枠線。移行元は最後の `dl` に `class="last"` を付け、`sp/css/style.css` の
	 * `dl.last { border-bottom: 1px solid #888888 }` で表の下を閉じる（型紙の 803 行）。dev の行は上の枠線だけを持つ.
	 */
	.pa-form.pa-form--eq-lp-sp .pa-form-table tr:has(textarea[name="comment"]) {
		border-bottom: 1px solid #888888;
	}

	.pa-form.pa-form--eq-lp-sp .pa-eq-transition__text:not(.pa-eq-transition__text--eqlp-sp),
	.pa-form.pa-form--eq-lp-sp .pa-eq-flow {
		display: none;
	}
}

@media (min-width: 750px) {
	.pa-form .pa-eq-transition__text--eqlp-sp {
		display: none;
	}
}

/* ======================================================================
 * 婚活 EQ 診断の広告フォーム `eq_as` の、フォームより上の LP（Task #9059・Bug #9001 の A）
 *
 * HTML は `PA_Forms_Embed::eq_as_lp_top_html()`。移行元は `form/view/eq_as.php` の 119〜216 行（携帯版は `sp_eq_as.php` の
 * 112〜197 行・写し 68e3190cb）で、値は `form/view/asset/css/style2019.css`（携帯版は `style2019_sp.css`）から写した.
 * 移行元の `eq_as` は、`eq_ad` と違って `/request/style.css` を読まない。字は `style2019.css` の `body`（游ゴシック体・500・
 * #101010・行の高さ 1）と `p`（18px・行の高さ 1.8）のまま.
 *
 * - `eq_ad` の LP（`.pa-eq-ad-lp`）とは組みが違うので、規則を共用しない（`eq_ad` の姿に触れない）
 * - 🚨 「恋愛・結婚への第一歩は自分を知ることから。」の背景の絵は、移行元のパソコン版では出ていない（`style2019.css` が
 *   `../img/avuf/sec02_bg.avif` と書き誤っている）。dev は `eq_ad` と同じく正しい絵を出す（ユーザー決定 D627・D598 のケース 2・
 *   意図的変更の台帳）。絵は `eq_ad` の資材と同じファイル（md5 一致）なので、`assets/images/eq_ad/` のものを使う
 * - 登場の演出（移行元の AOS・`duration: 2000`・`easing: 'ease-in-out-sine'`）は、`[data-pa-eq-as-reveal]` と
 *   `assets/js/pa-forms.js` の `setupEqAsLpReveal()` が受け持つ。値は AOS 2.3.1 の `aos.css` と同じ（下の節）
 * ==================================================================== */
.pa-form-frame__wrapper--wide:has(.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp) {
	max-width: none;
}

.pa-form-frame__wrapper--wide .pa-form[data-pa-form="eq_as"]:has(.pa-eq-as-lp) {
	margin-right: auto;
	margin-left: auto;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	color: #101010;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-align: left;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp *,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp *::before,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp *::after {
	box-sizing: border-box;
}

/* 移行元の `style2019.css` の先頭の打ち消し。見出しの太さは UA の既定（太字）のまま. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp :where(section, div, h2, h3, h4, p, b, span, table, tr, th, td) {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 100%;
	line-height: inherit;
	letter-spacing: inherit;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp :where(h2, h3, h4, b, th) {
	font-weight: bold;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp :where(p) {
	font-size: 18px;
	line-height: 1.8;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp :where(img) {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp :where(table) {
	border-collapse: collapse;
	border-spacing: 0;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-title,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01-title,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__about-title,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__bar,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__footer-title,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__footer-text,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__about-pict,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-head,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-answer,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-pict,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-title {
	text-align: center;
}

/* ① KV（`.header`・`.header-inner`）. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv {
	padding: 9.42% 0;
	background: url("../images/eq_as/kv.jpg") 50% 50% / cover no-repeat;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-inner {
	width: 50%;
	margin: 0 auto 0 1em;
	padding: 1.5em 1em;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-sub01,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-title,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-sub02 {
	padding-bottom: 1em;
}

/* 移行元の `.pb1em:nth-child(3) img`（`!important`）。3 番目の子はパソコン版の 2 枚目の絵. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-sub02 img {
	max-width: 70%;
	margin-top: 0.5em;
}

/* ② 婚活価値観 4 大チェックポイント（`.area01`・`.sec01`・`.bar`・`.lead-sec01`・`.check-box`）. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__area01 {
	background: #f5f5f6;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01 {
	width: 63.6%;
	margin: auto;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01-title {
	padding-top: 70px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__bar {
	padding-top: 50px;
	color: #a3752a;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__lead {
	padding: 40px 7.5%;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__lead-gap {
	display: none;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__checks::after {
	content: "";
	display: block;
	clear: both;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__check {
	float: left;
	width: 49%;
	margin-bottom: 2%;
	padding: 1em;
	background: #fff;
	text-align: center;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__check--r {
	float: right;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__check-head {
	margin-bottom: 1em;
	color: #c5a674;
	font-size: 16px;
	font-weight: normal;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__check .pa-eq-as-lp__check-pict {
	width: auto;
	max-height: 215px;
}

/* ③ 恋愛・結婚への第一歩は自分を知ることから。（`.sec01-footer`）. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01-footer {
	width: 87.8%;
	margin: 70px auto 0;
	background: url("../images/eq_ad/sec02_bg.avif") 100% 100% / 100% auto no-repeat;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__footer-title {
	padding-top: 70px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__footer-text {
	padding: 50px 0 90px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sp-br {
	display: none;
}

/* ④ 婚活 EQ 診断とは（`.sec02`・`.eq-about`・`.m_pink`・`.fs-large`）. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec02 {
	width: 740px;
	margin: auto;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__about-title {
	padding: 70px 0 1em;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__about-pict,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-answer,
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-pict {
	padding-bottom: 1em;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about {
	position: relative;
	margin: 1em 0 50px;
	padding: 2em;
	border: 1px solid #c5a674;
	background: #f5f5f6;
}

/* 移行元は開閉しないが、`.eq-about:before` の印（右上の山形）は出ている. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about::before {
	content: "";
	position: absolute;
	top: 2em;
	right: 1em;
	width: 10px;
	height: 10px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(135deg);
	transition: all 0.3s ease;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-head {
	color: #c5a674;
	font-size: 20px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__mark {
	background: linear-gradient(transparent 60%, #f9d2bf 60%);
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__closing {
	padding-bottom: 50px;
	font-size: 24px;
}

/* ⑤ 区画 04（`.sec04-header`・`.eq-body`・`.basic`・`.eq-sample`・`.sample-head`）. */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-header {
	background: url("../images/eq_as/sec04_bg.jpg") 50% 0 / cover no-repeat;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-title {
	padding-top: 115px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-text {
	width: 46%;
	margin: auto;
	padding: 0 0 90px;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-body {
	width: 740px;
	margin: auto;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__basic {
	width: 100%;
	margin: 30px 0;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__basic :is(th, td) {
	padding: 1em;
	border: 1px solid #b4b4b4;
	font-size: 18px;
	line-height: 1.8;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__basic th {
	background: #fdfbf9;
	text-align: center;
	vertical-align: middle;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sample {
	margin-bottom: 10px;
	border: 1px solid #b4b4b4;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sample-head {
	padding: 0.5em;
	background: #a3752a;
	color: #fff;
	font-size: 20px;
	letter-spacing: -1px;
	text-align: center;
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sp {
	display: none;
}

/*
 * パソコン幅だけの 2 つ（`style2019.css` にだけ在る・`style2019_sp.css` に無い規則）.
 *   - 移行元の `.pb1em:nth-child(3) img { max-width: 70%; margin-top: 0.5em }`（`!important`）は KV のための規則だが、
 *     「EQ理論とは？」の囲みの 3 番目の子（`p.tc.pb1em`・絵 `sec03_img02.png`）にも当たり、絵を 9px 下げている
 *   - 区画 04 の本文の `p.w46.pt1em.pb90` の `.pt1em` はパソコン版の CSS に無く、上の余白は 0（上の規則のとおり）
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about-pict img {
		max-width: 70%;
		margin-top: 0.5em;
	}
}

@media (min-width: 1000px) {
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-inner {
		width: 45%;
		margin: 0 auto 0 5%;
		padding: 2em 1em;
	}

	.pa-form[data-pa-form="eq_as"] :is(.pa-eq-as-lp__kv-sub01, .pa-eq-as-lp__kv-title) img {
		max-width: 95%;
	}
}

@media (min-width: 1500px) {
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-inner {
		width: 42.5%;
		margin: 0 auto 0 7.5%;
		padding: 3em 1em;
	}
}

/* 携帯幅（`style2019_sp.css`）. */
@media (max-width: 749px) {
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__pc {
		display: none;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sp {
		display: block;
	}

	/* 移行元の `style2019_sp.css` の `section { max-width: 768px; overflow: hidden }`。区画の中の最後の外余白（見本の枠の下 10px）を区画の中に留める. */
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp section {
		overflow: hidden;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv {
		padding: 77.5% 0 6%;
		background-image: url("../images/eq_as/sp/kv_sp.jpg");
		background-position: 62.5% 50%;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-inner {
		width: 85%;
		margin: 0 auto;
		padding: 1.15em 1.7em;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-inner p {
		line-height: 2.2;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-sub01,
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-title {
		padding-bottom: 0;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-sub02 {
		padding-bottom: 0.5em;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__kv-sub02 img {
		max-width: 100%;
		margin-top: 0;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01 {
		width: 92%;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01-title {
		padding-top: 20px;
	}

	/* 移行元の携帯版は `<img width="240">`. */
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01-title img {
		width: 240px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__bar {
		padding-top: 10px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__lead {
		padding: 4% 0;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__lead-gap {
		display: inline;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__lead-mark {
		background: linear-gradient(transparent 60%, #f9d2bf 60%);
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec01-footer {
		width: 92%;
		margin-top: 10px;
		background-image: url("../images/eq_ad/sp/sec02_bg.avif");
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__footer-title {
		padding: 50px 0 1em;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__footer-text {
		padding: 0 0 115px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sp-br {
		display: inline;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec02 {
		overflow: hidden;
		width: 92%;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-about {
		padding: 8% 4%;
	}

	/* 携帯版は `.fs-large` を持たない（`p.pb50`）. */
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__closing {
		font-size: 18px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-header {
		margin-bottom: 1em;
		padding: 10% 4%;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-title {
		padding-top: 0;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sec04-text {
		width: 92%;
		padding: 1em 0;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__eq-body {
		width: 92%;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__basic :is(th, td) {
		font-size: 14px;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp__sample-head {
		font-size: 18px;
		line-height: 1.3;
	}
}

/*
 * 登場の演出（移行元の AOS 2.3.1・`AOS.init({ duration: 2000, easing: 'ease-in-out-sine' })`）。値は `aos.css` の
 * `[data-aos^=fade]`・`[data-aos=fade-up]`・`[data-aos=fade-right]`・`body[data-aos-easing=ease-in-out-sine]`・
 * `[data-aos-delay="1000"].aos-animate` と同じ。KV の見出しは両版とも `fade-right`（遅れ 1000ms）、ほかの 5 か所は
 * パソコン版が `fade-up`、携帯版が `fade`（動かさずに浮き出す）.
 *
 * 隠す指定は、`setupEqAsLpReveal()` が器に `is-reveal-ready` を付けてからだけ効かせる。JS が動かない環境でも本文は見える.
 * 移行元の AOS 2.3.1 は `prefers-reduced-motion` を見ないので、dev も同じく動かす.
 */
.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal] {
	opacity: 0;
	transition-duration: 2s;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal="up"] {
	transform: translate3d(0, 100px, 0);
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal="right"] {
	transform: translate3d(-100px, 0, 0);
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal].is-revealed {
	opacity: 1;
	transform: translateZ(0);
}

.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal="right"].is-revealed {
	transition-delay: 1s;
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal="up"] {
		transform: none;
	}

	.pa-form[data-pa-form="eq_as"] .pa-eq-as-lp.is-reveal-ready [data-pa-eq-as-reveal="up"].is-revealed {
		transform: translateZ(0);
	}
}

/* ======================================================================
 * 資料請求の広告フォーム `request_ad`・`request_as` の完了画面の本文（Bug #9103）
 *
 * 移行元は写し 68e3190cb の `form/view/request_ad_thanks.php`・`request_as_thanks.php`（携帯版は `sp_` 付きの 2 本）。
 * 本文は標準の資料請求と同じ `PA_Forms_Thanks_Body::render_request()` が出し、外枠に印 `pa-thanks-body--request-ad` を足す.
 * 上の `.pa-thanks-body--request` の節をそのまま使い、ここには広告の版だけの差を書く.
 *
 * - パソコン版は、個別相談の案内（`section#guide01`・`c-thx` の類名なし）と 2 本目の押しボタンが、1 本目と同じ
 *   `#complete .thanks_box` の中にある（`css/page_inquiry.css:705-712`: 字 15px・行 166%・中央寄せ・下の内余白 40px・
 *   下の枠線 1px・下の外余白 35px）。標準の版は案内を箱の外の `.form-inner`（字 16px）に置く
 * - 流れの一覧が先に来て、下の外余白は 60px（`#guide01 .flow`・`c-thx` の無い版。`css/page_inquiry.css:1099-1103`）
 * - 携帯版は、1 本目の押しボタンの器（`div.campaign_heijitsu`）が `mb50` を持たない
 * ==================================================================== */

@media (min-width: 750px) {
	/* 案内の区画は箱の中。箱の下の内余白・枠線・外余白を、区画の下が持つ. */
	.pa-thanks-body--request-ad .pa-thanks-body__guide {
		margin-bottom: 35px;
		padding-bottom: 40px;
		border-bottom: 1px solid #cccccc;
		text-align: center;
	}

	/*
	 * 箱の字 15px・行 166%（15px の 166% は 24.9px）を、押しボタン 2 本と写真の段落も受け継ぐ。絵を行の中の字として置くので、
	 * 絵の下に行の余り 7.91px が出る（下見 走行 1 で実測: 標準の版の 16px・1.6 のままだと、押しボタンの段落と写真と文の区画が 1.91px 低い）.
	 * 写真の段落と 2 本目の押しボタンの段落は `p` なので、テーマの `.page-content__body p`（行 1.5）が受け継ぎより先に当たる。直接当てる
	 * （走行 2・3 で実測: 当てないと、写真と文の区画と 2 本目の押しボタンの段落が 1.41px 低い）.
	 */
	.pa-thanks-body--request-ad .pa-thanks-body__guide,
	.pa-thanks-body--request-ad .pa-thanks-body__guide-photo,
	.pa-thanks-body--request-ad .pa-thanks-body__reserve {
		font-size: 15px;
		line-height: 24.9px;
	}

	.pa-thanks-body--request-ad .pa-thanks-body__guide--flow-first .pa-thanks-body__guide-flow {
		margin: 0 0 60px;
	}

	.pa-thanks-body--request-ad .pa-thanks-body__guide--flow-first .pa-thanks-body__guide-message {
		margin: 0;
	}

	/* 箱の字 15px・行 166%（`#complete .thanks_box`）を受け継ぐ。標準の版の 16px・1.6 を戻す. */
	.pa-thanks-body--request-ad .pa-thanks-body__guide-text p {
		font-size: 15px;
	}

	.pa-thanks-body--request-ad .pa-thanks-body__guide-flow-heading--pc {
		line-height: 24.9px;
	}

	.pa-thanks-body--request-ad .pa-thanks-body__guide-flow-item-text {
		margin-top: 7.91px;
		font-size: 15px;
	}
}

@media (max-width: 749px) {
	/* 1 本目の押しボタンの器に `mb50` が無い. */
	.pa-thanks-body--request-ad .pa-thanks-body__inner .pa-thanks-body__reserve {
		margin-bottom: 0;
	}

	/*
	 * 2 本目の押しボタンの器（`#guide div.campaign_heijitsu`）は上の外余白を持たない。写真と文の本文の下の 4%（`#guide p`）だけが空く
	 * （下見 走行 1 で実測: 移行元 12.42px。土台の 30px のままだと 30px 空く）.
	 */
	.pa-thanks-body--request-ad .pa-thanks-body__guide .pa-thanks-body__reserve {
		margin-top: 0;
	}
}

/* ======================================================================
 * 婚活 EQ 診断の LP 専用フォーム `eq_lp` 系 5 種の完了画面の本文（Bug #9103）
 *
 * 移行元は写し 68e3190cb の `form/view/eq_lp_thanks.php`（パソコン版・`css/page_inquiry.css`）と `sp_eq_lp_thanks.php`
 * （携帯版・`sp/css/style.css` の `#analysis`）。本文は `PA_Forms_Thanks_Body::render_eq_lp()` が出す。外枠は婚活 EQ 診断の印
 * `pa-thanks-body--eq` も持つので、簡易診断の結果の箱（`.pa-thanks-body__result`）と携帯幅の外枠（`#analysis` の上下 25px）は
 * 上の婚活 EQ 診断の節をそのまま使う。ここには LP の版だけの差を書く.
 * ==================================================================== */

/* 結果の箱の中の段落は、箱の行の高さを受け継ぐ（テーマの `.page-content__body p` の行の高さを当てない）. */
.pa-thanks-body--eq-lp .pa-thanks-body__result p {
	line-height: inherit;
}

.pa-thanks-body--eq-lp .pa-thanks-body__result .pa-thanks-body__eq-lp-note {
	margin-bottom: 0;
}

.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-note--sp,
.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-reserve {
	display: none;
}

@media (min-width: 750px) {
	/* 送信完了の帯（`p.page_flow_img`）は、絵の下に行の余り 6px を持つ（冊子の広告フォームの下見で実測した値と同じ作り）. */
	.pa-thanks-body--eq-lp .pa-thanks-body__flow {
		margin-bottom: 36px;
	}

	/* `#complete .text_back` は行の高さの指定を持たない（normal）. テーマの `.page-content__body p` の行 1.5 を当てない. */
	.pa-thanks-body--eq-lp .pa-thanks-body__back {
		line-height: normal;
	}

	/* `#complete .thanks_box .text_result.serif`（下 30px・字 20px・左寄せ。行は箱の 166% ＝ 24.9px を受け継ぐ）. */
	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-title {
		margin: 0 0 30px;
		font-size: 20px;
		line-height: 24.9px;
		text-align: left;
	}

	/* `#complete .thanks_box .box_result`（下 50px）. 内側の値は上の婚活 EQ 診断の節と同じ. */
	.pa-thanks-body--eq-lp .pa-thanks-body__result {
		margin-bottom: 50px;
	}

	/* `#complete .thanks_box .box_contact`（黒・上下 50px・下 25px・中央寄せ）. 中の段落は箱の字 15px・行 24.9px. */
	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-contact {
		margin: 0 0 25px;
		padding: 50px 0;
		background: #000000;
		text-align: center;
	}

	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-contact p {
		margin: 0;
		font-size: 15px;
		line-height: 24.9px;
	}

	/* `p.mb25` */
	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-contact .pa-thanks-body__eq-lp-contact-tel {
		margin-bottom: 25px;
	}
}

@media (max-width: 749px) {
	/*
	 * `#analysis .category_ttl`（下 20px）. 共通の携帯幅の規則（`#request .category_ttl` の 30px・類名 3 つ）より後ろに、同じ詳細度で置く.
	 * パソコン幅の 50px は共通の規則がそのまま持つ.
	 */
	.pa-thanks-body.pa-thanks-body--eq-lp .pa-thanks-body__heading {
		margin: 0 0 20px;
	}

	/* `.back_top` は下の内余白を持たない（外枠 `#analysis` の下 25px だけが空く）. 上の携帯幅の土台の 20px を戻す. */
	.pa-thanks-body--eq-lp .pa-thanks-body__back {
		padding-bottom: 0;
	}

	/* `p.mb15` */
	.pa-thanks-body--eq-lp .pa-thanks-body__result .pa-thanks-body__result-diag {
		margin-bottom: 15px;
	}

	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-note--pc,
	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-contact {
		display: none;
	}

	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-note--sp {
		display: block;
	}

	/*
	 * 平日割の区画（`div.box_campaign`）の位置に置く、普通の来店予約の押しボタン（統括の判断 A-1）。器の余白は、標準の資料請求の
	 * 携帯版で同じ押しボタンを包む `section.c-pick`（上下 20px・左右 6.25%。`sp/css/style.css:2293-2295`）の値にする.
	 */
	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-reserve {
		display: block;
		padding: 20px 6.25%;
	}

	.pa-thanks-body--eq-lp .pa-thanks-body__eq-lp-reserve .pa-thanks-body__reserve {
		margin: 0;
	}
}

/* ======================================================================
 * 婚活 EQ 診断の LP 専用フォーム `eq_lp2` 系・`eq_mens_lp` 系の 10 種の完了画面の本文（Bug #9103）
 *
 * 移行元は携帯版の型紙（写し 68e3190cb の `form/view/sp_eq_lp2_thanks.php`・`sp_eq_mens_lp_thanks.php`）しか持たず、パソコン幅は
 * 白紙（200 で 0 バイト）である。携帯版の中身を全幅で出し、見た目は携帯版の値（`sp/css/basic.css`・`common.css`・`style.css` の
 * `#analysis`・`#guide`）を幅によらず当てる。パソコン幅では幅 750px に絞って中央へ寄せる（統括の判断・D598 の (2)）.
 * 本文は `PA_Forms_Thanks_Body::render_eq_lp_sp_only()` が出す。幅で切り替える上の部品は使わず、類名を分けている.
 * 左右の内余白の百分率は、移行元と同じく外枠の幅を基準にする（外枠の幅 375px で 6.25% ＝ 23.44px）.
 * ==================================================================== */

/* `#analysis`（上下 25px）. 字の土台は `basic.css` の 13px・行の高さは既定（normal）. */
.pa-thanks-body.pa-thanks-eqlp-sp {
	margin-right: auto;
	margin-left: auto;
	padding: 25px 0;
	max-width: 750px;
	color: #000000;
	font-size: 13px;
	line-height: normal;
}

/* テーマの本文の飾り（`.page-content__body` の見出し・段落・箇条・絵）を打ち消す. */
.pa-thanks-body.pa-thanks-eqlp-sp :is(h2, h4, p, ul, li) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: normal;
	letter-spacing: normal;
	line-height: inherit;
	list-style: none;
}

/* `common.css` の `img { width: 100%; height: auto; display: block }`. */
.pa-thanks-body.pa-thanks-eqlp-sp img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* `#analysis .category_ttl`（下 20px）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__heading {
	margin-bottom: 20px;
}

/* `#analysis .thanks_text.serif`（上下 19px・字 14px・中央寄せ・明朝体）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__title {
	padding: 19px 0;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 14px;
	text-align: center;
}

/* `#analysis .box_result`（下 18px・上下 20px・左右 6.25%・灰色の地・金茶の太字 14px・行 135%）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__result {
	margin: 0 0 18px;
	padding: 20px 6.25%;
	background: #f5f5f5;
	color: #a3762b;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

/* `p.mb15`. 太字は箱から受け継ぐ（上の打ち消しの `font-weight: normal` を戻す）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__diag {
	margin-bottom: 15px;
	font-weight: inherit;
}

/*
 * 平日割の区画（`div.box_campaign`）の位置に置く、普通の来店予約の押しボタン（統括の判断 A-1）。器の余白は、標準の資料請求の
 * 携帯版で同じ押しボタンを包む `section.c-pick`（上下 20px・左右 6.25%。`sp/css/style.css:2293-2295`）の値にする.
 */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__reserve {
	padding: 20px 6.25%;
}

/*
 * `#guide`（上下 25px）と `section#guide01.anchor_block`（左右 6.25%・下の外余白 8%）. 2 本目の押しボタンの段落の下 4%（`#guide p`）は、
 * 区画の下の外余白 8% と重なって消えるので、下は区画の内余白が `25px + 8%` で持つ（冊子の広告フォームと同じ作り）.
 */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide {
	padding: 25px 6.25% calc(25px + 8%);
}

/* `#guide .flow`（地 #f6f1eb・内余白 5.35%・下 8%）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow {
	margin: 0 0 8%;
	padding: 5.35%;
	background: #f6f1eb;
}

/* `#guide .flow h4`（中央・下 4%）と `h4 img`（幅 70%・中央）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow-heading {
	margin-bottom: 4%;
	text-align: center;
}

.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow-heading img {
	width: 70%;
	margin: 0 auto;
}

/*
 * `#guide .flow li`（下の内余白 7%・外余白 5%。最後の段は 0）。移行元は内余白 7% の位置に区切りの矢印の絵（`sp/images/guide/arrow.gif`）を
 * 敷くが、上の携帯幅の案内区画と同じく写さない（Issue #2362 の扱い）.
 */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow-item {
	display: flex;
	align-items: flex-start;
	margin: 0 0 5%;
	padding: 0 0 7%;
}

.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow-item:last-child {
	margin: 0;
	padding: 0;
}

/* `#guide .flow dl dt`（幅 33%・右 3.92%・左へ回り込み）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow-photo {
	flex: 0 0 33%;
	width: 33%;
	margin-right: 3.92%;
}

/* `dd`（`sp/css/style.css` の素の `dd` の字 15px）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-flow-text {
	flex: 1 1 auto;
	font-size: 15px;
}

/* `#guide p`（下 4%）. 写真と文の段落と 2 本目の押しボタンの段落が当たる. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__guide-message p {
	margin-bottom: 4%;
}

/* `.back_top`（字 14px・中央寄せ）. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__back {
	font-size: 14px;
	text-align: center;
}

/* ======================================================================
 * 資料請求の LP 専用フォーム `request_lp` の完了画面の本文（Bug #9103）
 *
 * 本文は `PA_Forms_Thanks_Body::render_request_lp()` が、冊子の広告フォームと同じ部品と類名（外枠の印 `pa-thanks-body--book`）で出す。
 * 移行元（写し 68e3190cb の `form/view/request_lp_thanks.php`・`sp_request_lp_thanks.php`）は冊子の版と同じ CSS を読むので、上の冊子の版の
 * 節の値がそのまま当たる。ここには LP の版だけの差を書く.
 * ==================================================================== */

@media (max-width: 749px) {
	/* 移行元の携帯版は、案内の文と個別相談の流れを持たない（お礼の文の次が平日割の区画、その次が料金の区画）. */
	.pa-thanks-body--request-lp .pa-thanks-body__request-lp-lead,
	.pa-thanks-body--request-lp .pa-thanks-body__request-lp-guide {
		display: none;
	}
}

/*
 * 成婚退会者様限定のご紹介プログラムを使い終えた会員へ、フォームの代わりに出す案内（Bug #2186）。
 * 移行元 `prem_pre_check_msg.php` は見出し画像（941px）・文言 1 行（行内の指定で 28px）・
 * 通常版へのリンクを出していた.
 */
.pa-shoukai-used {
	text-align: center;
}

.pa-shoukai-used__hero img {
	max-width: 100%;
	height: auto;
}

.pa-shoukai-used__txt {
	font-size: 28px;
}

/* --------------------------------------------------------------------------
 * 会員紹介の来店予約（`reservation_intro`）の携帯幅（Bug #9160）。
 *
 * 移行元のスマホ版（`form/view/intro/sp_reservation_intro.php`・CSS は `sp/css/style.css`）に
 * そろえる 2 点である。欄の大きさ（性別の丸・生年月日・姓名・郵便番号・電話）は、社員紹介の
 * 携帯幅の規則（Bug #8399・#8540）へ会員紹介の選び方を足して受ける（同じ `style.css` の値）.
 *
 * 1. 店舗の選択欄 2 つ。画面側の JavaScript（`setupAreaSelectSp()`）が帯のラジオから組み立てる。
 *    移行元は `select.area`（`dd select.area { width: 100% }`・`dd select { padding: 10px }`・
 *    矢印の絵 `icon_select_arrow.gif`・字 16px）で、エリアの選択欄の下は `p.mb10` の 10px である。
 *    店舗の選択欄は `class="req"` を持ち、未選択のあいだ桃色に塗られる（`checkreq.js`）.
 *    帯は `display: none` にせず画面の外へ逃がす（必須のラジオに焦点が当たらなくなるため）.
 * 2. 無料個別相談会の案内の絵。携帯幅は `sp-check.jpg`（750×580）へ切り替わる
 *    （`PA_Forms_Embed::RESERVATION_SP_CHECK_FORMS`）。移行元は画面の幅いっぱいに出す。
 *    器 `.service_box` の下の 40px は、器が中に持つ注記の後ろに来る（Bug #9302 で注記へ移した）.
 * -------------------------------------------------------------------------- */
.pa-form .pa-area-select {
	display: none;
}

@media (max-width: 749px) {
	.pa-form .pa-area-select {
		display: block;
		flex-basis: 100%;
		width: 100%;
	}

	.pa-form .pa-area-select select.pa-control {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: 10px;
		font-size: 16px;
		border-radius: 0;
		-webkit-appearance: none;
		appearance: none;
		background-image: url("../images/inquiry/icon_select_arrow.gif");
		background-position: right top;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	.pa-form .pa-area-select select.pa-control.pa-area-select__area {
		margin-bottom: 10px;
	}

	.pa-form .pa-area-select select.pa-control.pa-control--empty {
		background-color: rgb(255, 191, 191);
	}

	.pa-form .pa-area-groups.pa-area-groups--has-select {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__check {
		margin: 0 -16px;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__check img {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
 * 会員紹介の来店予約（`reservation_intro`）の携帯幅の、店舗の選択欄より上の区画（Bug #9302）。
 *
 * 移行元のスマホ版（`form/view/intro/sp_reservation_intro.php`・CSS は `sp/css/style.css` と
 * 型紙の中の `<style>`）の値を写す。直す前の実測は
 * `pa-verify-assets/A/9302-会員紹介の頭の区画の実測-1002/走行1/`（根の字は移行元 13px）.
 *
 * | 区画 | 移行元 | dev（直す前） |
 * |---|---|---|
 * | 題名の帯 `h2.category_ttl` | 画面の幅いっぱい・下 20px（`#reservation .category_ttl`） | 柱の幅・上下 50px |
 * | 注記 `p.form_text.att` | 幅いっぱい・内余白 20px 6.25% 0・字 1rem（13px）・行 145%・赤。下に器 `.service_box` の 40px | 左 30px・字 15px・行 1.66・下 50px |
 * | 案内文 `p.form_text` | 幅いっぱい・内余白 20px 6.25%・字 12px・行 145%。1 文目の後ろは空白でつなぐ。赤字の span は 11px | 柱の幅・字 15px・行 1.66・下 30px・1 文目の後ろで改行 |
 * | 店舗の項目名 `dt` | 「来店希望店舗またはオンライン店舗」を 1 行・その下に「支店一覧 >」（`<br>` の後ろの素の `a`） | 「来店希望店舗」で改行・リンクは左 45px・上 8px・字 14px |
 *
 * 6.25% は移行元の器（画面の幅）に対する値なので、`6.25vw` で書く（dev の柱は左右 16px 狭い）。
 * 工程の帯（`img_flow01.gif`）は意図的変更の台帳 118 行どおり出さないので、注記より下は
 * 移行元より工程の帯の高さだけ上に来る.
 * -------------------------------------------------------------------------- */
@media (max-width: 749px) {
	.page-content__body .pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__heading {
		margin: 0 -16px 20px;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__heading img {
		width: 100%;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__online {
		margin: 0 -16px 40px;
		padding: 20px 6.25vw 0;
		font-size: 13px;
		line-height: 145%;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__text {
		margin: 0 -16px;
		padding: 20px 6.25vw;
		font-size: 12px;
		line-height: 145%;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__text span {
		font-size: 11px;
	}

	/*
	 * 1 文目の後ろの改行は、パソコン版の組み（`form/view/intro/reservation_intro.php`）である。
	 * スマホ版は改行せず空白でつなぐので、改行を隠す。空白は無くなるが、字 12px・幅 328px では
	 * 行数は変わらない（3 行）。下見の走行1 で、改行のままだと案内文が 1 行（17.4px）高かった.
	 */
	.pa-form--table[data-pa-form="reservation_intro"] .pa-raiten-intro__text br:first-of-type {
		display: none;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-table th:has(> .pa-row-link) > br {
		display: none;
	}

	/*
	 * 確認表示の店舗の見出しも 1 行にする（Task #9559）。移行元の携帯版の確認画面
	 * （`intro/sp_reservation_intro_conf.php`・`sp_reservation_intro_02_conf.php`）は「来店希望店舗またはオンライン店舗」を
	 * 改行せずに出す。確認表示へ写した見出しは「支店一覧」の札を持たないので、上の `:has(> .pa-row-link)` が当たらない.
	 */
	.pa-form--table:is([data-pa-form="reservation_intro"], [data-pa-form="reservation_intro_02"]) .pa-form-confirm__table th > br {
		display: none;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-table th .pa-row-link {
		margin: 0;
		font-size: 15px;
	}
}

/* --------------------------------------------------------------------------
 * ご紹介の来店予約（`reservation3`）の携帯幅を、移行元のスマホ版にそろえる（Bug #9374）。
 *
 * 移行元のスマホ版は `form/view/sp_reservation3.php`（CSS は `sp/css/style.css` の
 * `#reservation` の節・2401〜2462 行）。直す前の実測は
 * `pa-verify-assets/A/9374-ご紹介の携帯幅の区画の実測-1004/`（幅 375）.
 *
 * | 区画 | 移行元 | dev（直す前） |
 * |---|---|---|
 * | 題名の帯 `h2.category_ttl` | 画面の幅いっぱい・下 20px | 柱の幅・上下 50px |
 * | 案内文 `.service_box02 p.catch_txt` | 器は幅 94%・中央・下 30px。字 17px・行 2・下 30px・左寄せ。2 文目の前だけ改行・文末に句点なし | 中央寄せ・下の内余白 50px・1 文目の後ろでも改行 |
 * | 赤い枠 `p.mb25` の絵 `staff/txt_01.png` | 器の幅いっぱい・下 25px | 無い |
 * | キャンペーンの帯 `p.mt30` の絵 `staff/bnr_wpcp.png` | 器の幅いっぱい・上 30px（器の下 30px） | 無い |
 * | 相談会 `.service_box p.check` の絵 `check.jpg` | 画面の幅いっぱい・下 40px（`.service_box`） | パソコン版の絵を柱の幅で |
 * | 案内の 2 段目 `p.form_text` | 内余白 20px 6.25%・字 12px・行 145%。1 文目の後ろは空白でつなぎ、赤字の前に空行 1 つ | 柱の幅・本文の字 |
 * | 行の順 | 性別 → 生年月日 → 来店希望店舗 | 来店希望店舗が先頭 |
 * | 店舗の項目名 | 「来店希望店舗　支店一覧 >」を 1 行 | 「支店一覧 >」が次の行 |
 * | 性別と生年月日の欄 | 直径 35px の丸のラジオ・矢印つきの選択欄 3 つを 1 行・単位の字なし | 素のラジオと選択欄・単位の字あり |
 *
 * 性別と生年月日の欄、項目名と欄の内余白（`dt` と `dd` の上下 10px・字 15px）、必須の札、名前・郵便番号・
 * 電話番号・e-mail・来店希望日時の欄は、同じ `sp/css/style.css` を写した会員紹介と社員紹介の規則
 * （このファイルの携帯幅の節・`reservation_intro_02` と並べた規則）へ `reservation3` を足した.
 * 下見の走行2 で、これらの規則がご紹介にだけ当たっておらず、性別と生年月日の欄が移行元より 8.6px 上に
 * 出ていた（項目名の上下と欄の上の内余白の差）.
 *
 * 器 `.service_box02`（幅 94%・中央）は dev に無いので、中の区画ごとに左右の外余白
 * `calc(3vw - 16px)` で同じ幅にする（dev の柱は左右 16px 狭い）。区画のあいだの外余白は
 * 相殺に頼らず、片側にだけ置く.
 * 工程の帯（`img_flow01.gif`）は意図的変更の台帳 118 行どおり出さない（Bug #9374 の AC からも外した）.
 * -------------------------------------------------------------------------- */
.pa-raiten-intro__sp-frame,
.pa-raiten-intro__sp-campaign {
	display: none;
}

/* --------------------------------------------------------------------------
 * ご紹介の来店予約のパソコン幅の絵 2 枚（Bug #9392）
 *
 * 移行元のパソコン版 `form/view/reservation3.php` の案内文の後ろの 2 区画を写した。移行元の値は
 * `public/css/page_inquiry.css` の `.mb50`・`.mb20`・`.tac` と、2026-10-05 の実測（幅 1440・案内文の箱の下端から測る）:
 *
 * | 区画 | 移行元 | 絵 |
 * |---|---|---|
 * | 赤い枠 `p.mb50.tac` | 案内文の下端から 0・中央寄せ・器の高さ 48・下 50px | `staff/txt_01.png`（450×42） |
 * | キャンペーンの帯 `p.mb20` | 98・器の高さ 186・下 20px | `staff/bnr_wpcp.png`（1100×180） |
 * | 無料個別相談会 `p.mb70` | 304 | `check.png`（1100×200） |
 *
 * 移行元の器が絵より 6px 高いのは、絵が行の中に置かれ、ベースラインの下に隙間が出るためである（字 13px・行の高さ normal）。
 * dev は絵を `display: block` で置いて隙間を作らず、その 6px を下の外余白へ足す（50 + 6・20 + 6）。字の大きさと
 * 書体に頼らずに、移行元と同じ位置に置くためである.
 *
 * 携帯幅（749px 以下）では隠す。携帯幅は移行元のスマホ版の別の絵（Bug #9374・`__sp-frame`・`__sp-campaign`）を出す.
 * -------------------------------------------------------------------------- */
.pa-form--table .pa-raiten-intro__pc-frame {
	margin: 0 0 56px;
	line-height: 0;
}

.pa-form--table .pa-raiten-intro__pc-frame img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.pa-form--table .pa-raiten-intro__pc-campaign {
	margin: 0 0 26px;
	line-height: 0;
}

.pa-form--table .pa-raiten-intro__pc-campaign img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 749px) {
	.pa-form--table .pa-raiten-intro__pc-frame,
	.pa-form--table .pa-raiten-intro__pc-campaign {
		display: none;
	}
}

/*
 * ご紹介の来店予約（`reservation3`）のパソコン幅は、題名の画像の上の外余白を 0 にする（Bug #9474）。
 * 既定の `margin: 50px 0`（`.pa-raiten-intro__heading`）は来店予約（Bug #1986）の移行元の `.mt50` から
 * 写した値で、`reservation3` の移行元（`form/view/reservation3.php` の `h2.category_ttl`）は上の外余白を
 * 持たない（`page_inquiry.css` の `.category_ttl` は `margin-bottom: 50px` だけ）。下の 50px は同じなので残す.
 * 器の上の内余白 48px はテーマの `form-frame.css` の `reservation3` の節で 0 にする。2 つで、題名の画像の
 * 上端が移行元と同じパンくずの下端（192）に来る（直す前の実測 dev 290・`pa-verify-assets/A/9474-直す前-1005/走行1/`）.
 * 詳細度は (0,4,0) で、既定の (0,3,0) に勝つ.
 */
@media (min-width: 750px) {
	.page-content__body .pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__heading {
		margin-top: 0;
	}
}

@media (max-width: 749px) {
	.page-content__body .pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__heading {
		margin: 0 -16px 20px;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__heading img {
		width: 100%;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__catch {
		margin: 0 calc(3vw - 16px) 30px;
		padding: 0;
		font-size: 17px;
		line-height: 2;
		text-align: left;
	}

	/* スマホ版は 1 文目「パートナーエージェントには、」の後ろで改行せず、文末に句点を置かない. */
	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__catch br:first-of-type,
	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__catch-end {
		display: none;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__sp-frame {
		display: block;
		margin: 0 calc(3vw - 16px);
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__sp-campaign {
		display: block;
		margin: 30px calc(3vw - 16px) 30px;
	}

	.pa-form--table[data-pa-form="reservation3"] :is(.pa-raiten-intro__sp-frame, .pa-raiten-intro__sp-campaign) img {
		display: block;
		width: 100%;
		height: auto;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__check {
		margin: 0 -16px 40px;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__check img {
		display: block;
		width: 100%;
		height: auto;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__text {
		margin: 0 -16px;
		padding: 20px 6.25vw;
		font-size: 12px;
		line-height: 145%;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__text br:first-of-type {
		display: none;
	}

	/* 赤字の前の空行（移行元は `<br><br>`。dev の字は `<br>` 1 つ）を、行の高さ 1 つ分の上の外余白で作る. */
	.pa-form--table[data-pa-form="reservation3"] .pa-raiten-intro__text span {
		display: block;
		margin-top: 17.4px;
		font-size: 11px;
	}

	/*
	 * 「支店一覧 >」は、移行元のスマホ版では項目名「来店希望店舗」の後ろに全角の空白を挟んで同じ行に続く
	 * （`dt` の中の素の `a`）。dev は段落（`p.pa-row-link`）で次の行に出すので、段落を行の中に入れる.
	 * 下見の走行2 の実測（移行元 375）: リンクの字は 13px、左端 176.4。項目名の字 15px の後ろの全角の空白 1 つ
	 * （15px）の分だけ空ける（dev の字は項目名とリンクのあいだに空白を持たない）.
	 */
	.pa-form--table[data-pa-form="reservation3"] .pa-form-table th .pa-row-link {
		display: inline;
		margin: 0 0 0 15px;
		font-size: 13px;
	}

	/*
	 * 性別の丸の札。ご紹介の移行元のスマホ版は `sp/css/style.css` の `#radio label`（内余白 11px 20px 0 44px）と
	 * `#radio`（高さ 40px）で組む。会員紹介と社員紹介の札の内余白（11px 15px 15px 40px）とは違うので、
	 * ご紹介だけ上書きする（下見の走行3 の実測: 移行元の札は 77×31、dev は 68×46 だった）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(input[name="gender"]) .pa-radio,
	.pa-form[data-pa-form="event"] .pa-cell-field:has(input[name="gender"]) .pa-radio {
		padding: 11px 20px 0 44px;
	}

	/* 移行元の `#radio` は高さ 40px で、札は上に寄る（走行4 で、中央寄せのため札が 4.5px 下がっていた）. */
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(input[name="gender"]),
	.pa-form[data-pa-form="event"] .pa-cell:has(input[name="gender"]) {
		min-height: 40px;
		align-items: flex-start;
		align-content: flex-start;
	}

	/*
	 * 来店希望日時の行。移行元のスマホ版は希望 1 組を `p.mb10.kibou`（札・「第N希望」・入力欄）と
	 * `p.mb10`（時刻の案内）の 2 段で組み、最後に `p.fs11.mt10`（休業日の注記）を置く。
	 * 下見の走行4 の記録（項目名からの距離・移行元 ／ dev）:
	 * - 札の上 0 ／ 2、「第N希望」の上 2 ／ 0、入力欄の上 30 ／ 28（1 段目の行の高さが 30 ／ 28）
	 * - 時刻の案内は字 13px・高さ 20 ／ 字 16px・高さ 24
	 * - 段のあいだは 10・10 ／ 8・16（dev は組の区切りの部品の前後にも行の空きが付く）
	 * - 休業日の注記は字 12.75px・高さ 38・上 10 ／ 字 13.6px・高さ 42
	 * 1 組で 6px、3 組で 18px 高かった（行の高さ 移行元 438 ／ dev 456.1）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-cell-field-date) {
		row-gap: 10px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-cell-field-date) .pa-cell-break {
		display: none;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field-date {
		align-items: flex-start;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field-date .pa-sub-label {
		margin-top: 2px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-cell-field-date) .pa-time-placeholder {
		font-size: 13px;
		line-height: 20px;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell:has(.pa-cell-field-date) > .pa-note {
		margin: 0;
		font-size: 12.75px;
		line-height: normal;
	}

	/*
	 * お名前（漢字・カナ）の「姓」「名」「セイ」「メイ」の札。ご紹介の移行元のスマホ版は札を注釈の中に置いて出さない
	 * （`sp_reservation3.php` の `<!--<label for="name01">姓</label>-->` ほか）。会員紹介と社員紹介は札を出すので、
	 * ご紹介だけ見た目から外す。入力欄の名前として読み上げられるよう、`display: none` にせず画面の外へ逃がす
	 * （下見の走行3 の記録: お名前（漢字）の行は dev 136・移行元 108。差の 28 は札の行 20 と下の内余白 8）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-cell:has(input[name="sei"], input[name="sei-kana"]) .pa-sub-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/*
	 * 生年月日の選択欄 3 つ。移行元のスマホ版は `sp/css/style.css` の「フォーム共通」で、選択欄の見た目を
	 * 消して右端に矢印の絵（`icon_select_arrow.gif`）を敷く。幅と内余白は社員紹介と同じ規則に入れた
	 * （`dd select.birth_y` 40%・`birth_m` と `birth_d` 25.285%）。矢印は生年月日の行だけに当てる
	 * （ほかの選択欄の見た目は Bug #9374 の対象外）.
	 */
	.pa-form--table[data-pa-form="reservation3"] .pa-cell:has(select[name="birth-year"]) select.pa-control,
	.pa-form--table[data-pa-form="event"] .pa-cell:has(select[name="birth-year"]) select.pa-control {
		border-radius: 0;
		-webkit-appearance: none;
		appearance: none;
		background-image: url("../images/inquiry/icon_select_arrow.gif");
		background-position: right top;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	/*
	 * 行の順。移行元のスマホ版は性別と生年月日を来店希望店舗より前に置く（パソコン版は後ろ）。冊子の広告フォーム 2 本は
	 * お名前より前に置く（Bug #9646・`sp_request_tool_ad.php`・`sp_request_tool_as.php`）。
	 * 送る値と項目の定義は 1 本のままにする。DOM の順は画面側の JavaScript（`setupSpFirstRows()`）が
	 * 携帯幅のときだけ入れ替える（キーボードと読み上げの順も表示順にそろえる・PR #9395 の指摘）。
	 * この `order` は、JavaScript が動かないときの見た目の控えである.
	 */
	.pa-form--table[data-pa-form="reservation3"] .pa-form-table tbody,
	.pa-form--table[data-pa-form="request_tool_ad"] .pa-form-table tbody,
	.pa-form--table[data-pa-form="request_tool_as"] .pa-form-table tbody {
		display: flex;
		flex-direction: column;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-form-table tr:has(input[name="gender"]),
	.pa-form--table[data-pa-form="request_tool_ad"] .pa-form-table tr:has(input[name="gender"]),
	.pa-form--table[data-pa-form="request_tool_as"] .pa-form-table tr:has(input[name="gender"]) {
		order: -2;
	}

	.pa-form--table[data-pa-form="reservation3"] .pa-form-table tr:has(select[name="birth-year"]),
	.pa-form--table[data-pa-form="request_tool_ad"] .pa-form-table tr:has(select[name="birth-year"]),
	.pa-form--table[data-pa-form="request_tool_as"] .pa-form-table tr:has(select[name="birth-year"]) {
		order: -1;
	}

	/*
	 * e-mail（Bug #9409）。ご紹介の移行元のスマホ版は `dd input[type="text"].email`（幅 45%）の 2 欄を、`<p>` の中で
	 * `＠` を挟んで横に並べる（`sp_reservation3.php` 557〜559 行）。`＠` は 13px で、前後に改行の空白 1 字ずつ
	 * （3.71px）が付く。資料請求の冊子の広告フォーム（Task #8668）と同じ組みである.
	 * 会員紹介と社員紹介は 2 欄を縦に積む規則のまま残す（このファイルの携帯幅の節）.
	 * 着手前の実測（`pa-verify-assets/A/9409-残り4点の実測-1005/`・幅 375）: 移行元は欄 147.7 が 2 つで同じ段、
	 * dev は欄 328.1 が 2 段だった.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-parts--email {
		display: flex;
		flex-wrap: nowrap;
		align-items: baseline;
		width: 100%;
	}

	.pa-form[data-pa-form="reservation3"] .pa-parts--email .pa-parts-unit--at {
		display: flex;
		flex-wrap: nowrap;
		align-items: baseline;
		width: auto;
	}

	.pa-form[data-pa-form="reservation3"] .pa-parts--email .pa-control {
		width: calc(87.5vw * 0.45);
	}

	.pa-form[data-pa-form="reservation3"] .pa-parts--email .pa-parts-sep--at {
		flex-basis: auto;
		width: auto;
		margin: 0 3.71px;
		font-size: 13px;
		line-height: normal;
	}

	/*
	 * アンケート（Bug #9409）。移行元のスマホ版は `sp/css/style.css` の `#enquete_list` で、ラジオを隠し
	 * （`dd input[type="radio"] { display: none }`）、札の左に直径 35px の丸を描く。選択肢は
	 * `ul li { float: left; width: 50%; height: 40px; margin: 5px auto }` で 2 列に並べ、7 番目（インターネット広告）
	 * だけ 1 列、最後（インターネット動画）は 1 段下げる。札の字は 13px・内余白 `11px 0 0 44px` である.
	 * 同じ CSS を写した LP 専用フォームの規則（このファイルの携帯幅の節・`request_lp`）と同じ値にそろえる.
	 *
	 * ラジオ本体は `display: none` にせず画面の外へ逃がす（性別の丸と同じ判断・D602）。焦点は丸の側に出す.
	 * 着手前の実測（幅 375）: 移行元は札 164.1 × 40 が 2 列、dev は字の長さなりの札が 1 行に 2〜3 つだった.
	 */
	/*
	 * 問いの `dd`（内余白 10px 6.25%・15px）と選択肢の `dd#enquete_list` のあいだは、2 つの `dd` の内余白の和の 20px である
	 * （問いの文の規則は LP 専用フォームの規則の当たり先へご紹介を足した）。選択肢の `li` は浮かせてあり、`dd#enquete_list` の
	 * 下の内余白 10px は次の行の `dl` の回り込みで消えるので、欄の器の下の内余白を 0 にする（LP 専用フォームの規則と同じ値）.
	 * 下見の走行1 で、選択肢が移行元より 6px 下、コメントの行が 16px 下だった.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-form-table td:has(.pa-radio-wrap--grid) {
		padding-bottom: 0;
	}

	.pa-form[data-pa-form="reservation3"] .pa-cell-field:has(> .pa-radio-wrap--grid) {
		flex-basis: 100%;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		width: 100%;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio {
		position: relative;
		display: inline-block;
		height: 40px;
		margin: 5px 0;
		padding: 11px 0 0 44px;
		font-size: 13px;
		line-height: normal;
		cursor: pointer;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio:nth-child(7) {
		grid-column: 1 / -1;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio:last-child {
		grid-column: 1;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio input[type="radio"] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: content-box;
		width: 35px;
		height: 35px;
		border: 1px solid #666666;
		border-radius: 50%;
		background: #fafafa;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:checked)::after {
		content: "";
		position: absolute;
		top: 9px;
		left: 9px;
		box-sizing: content-box;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #a3762b;
	}

	.pa-form[data-pa-form="reservation3"] .pa-radio-wrap--grid .pa-radio:has(input[type="radio"]:focus-visible)::before {
		outline: 2px solid #f10000;
		outline-offset: 2px;
	}
}

/* --------------------------------------------------------------------------
 * 社員紹介の来店予約（`reservation_intro_02`）の携帯幅の頭の区画（Task #9306）。
 *
 * 移行元のスマホ版（`form/view/intro/sp_reservation_intro_02.php`）は、絵 4 枚
 * （`sp/images/inquiry/reservation/` の `main_ttl.gif`・`main_copy.gif`・`img_service.gif`・
 * `img_check.gif`）で題・案内・相談会を出す。全体原則（絵の中の文言は背景＋テキスト）に
 * 従い、絵の中の字を書き起こして字で組む（markup は `render_intro02_top_intro()`）。
 * 749px 以下でだけ出し、パソコン版の絵 2 枚（見出し・案内）はその幅で隠す.
 *
 * 寸法は移行元の画面の実測（幅 375・直す前の実測
 * `pa-verify-assets/A/9306-社員紹介の3区画の実測-1002/走行1/`）と、絵の中の字の位置
 * （元の絵の画素 × 表示の倍率。`main_*` は 375/640、`img_*` は 323/560）から決めた.
 *
 * | 区画 | 移行元（幅 375） | 組み方 |
 * |---|---|---|
 * | 題 `h2.category_ttl` | 高さ 50.4・外余白 上 19.5／下 20 | 明朝 28px の「来店予約」と、下端に幅 23.4 の赤い線 |
 * | 案内 `p.main_copy` | 高さ 99・4 行 | 明朝 18px・行送り 24.6・中央寄せ |
 * | 相談会 `.service_box` | 高さ 388.1・#f5f5f5・内余白 26・外余白 上 26／下 40 | 上段（高さ 89.4）と下段（上の線 1px 白・内余白 上 15・中身 230.7） |
 *
 * 🚨 **絵の中だった寸法は、移行元の絵と同じ割合で画面の幅に比例させる。**移行元の絵は
 * 幅いっぱいに伸び縮みするので、字も高さも画面の幅に比例する。px で固定すると、幅 320 では
 * 案内とチェック項目の 6 行目が収まらず、折り返して下の区画に重なるか、切れる（PR #9318 の
 * レビューの指摘）。上の表の値は幅 375 のときの値で、次の割合で書く.
 *
 *   - 題と案内（絵は画面の幅いっぱい）… 幅 375 の値 × 100vw / 375
 *   - 相談会の中（絵は囲みの内側の幅 ＝ 画面の幅 − 内余白 52）… 幅 375 の値 × (100vw − 52px) / 323
 *
 * 移行元の CSS が持つ値（題の外余白・囲みの内余白と外余白・下段の上の線と内余白）は、
 * 移行元でも画面の幅で変わらないので px のまま書く.
 *
 * 🚨 **高さは字の行送りに任せず書く。**書体が環境で違っても、区画の上端と高さが
 * 移行元とずれないようにするためである。チェック項目と相談会の題は折り返さない
 * （同じ割合で縮むので、幅 375 で収まれば、ほかの幅でも収まる）.
 * -------------------------------------------------------------------------- */
.pa-form--table .pa-intro02-sp {
	display: none;
}

@media (max-width: 749px) {
	.pa-form--table .pa-intro02-sp {
		--pa-i2-s: calc(100vw - 52px);
		display: block;
		font-family: var(--pa-font-family-serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif);
		color: #000;
	}

	.page-content__body .pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__heading,
	.pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__check {
		display: none;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__title {
		position: relative;
		height: 13.440000vw;
		margin: 19.5px 0 20px;
		padding: 0;
		border: 0;
		background: none;
		color: #000;
		font-size: 7.466667vw;
		font-weight: normal;
		line-height: 7.466667vw;
		letter-spacing: 0;
		text-align: center;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__title::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 6.240000vw;
		height: 0.320000vw;
		margin-left: -3.120000vw;
		background: #f10000;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__copy {
		height: 26.400000vw;
		margin: 0;
		font-size: 4.800000vw;
		line-height: 6.560000vw;
		text-align: center;
	}

	.pa-form--table .pa-intro02-sp__service {
		margin: 26px -16px 40px;
		padding: 26px;
		background: #f5f5f5;
	}

	.pa-form--table .pa-intro02-sp__service-head {
		height: calc(var(--pa-i2-s) * 0.276780);
	}

	.page-content__body .pa-form--table .pa-intro02-sp__service-title {
		margin: 0;
		font-size: calc(var(--pa-i2-s) * 0.052632);
		line-height: calc(var(--pa-i2-s) * 0.089783);
		letter-spacing: calc(var(--pa-i2-s) * 0.009288);
		white-space: nowrap;
	}

	.pa-form--table .pa-intro02-sp__service-time {
		display: inline-block;
		width: calc(var(--pa-i2-s) * 0.337461);
		height: calc(var(--pa-i2-s) * 0.053560);
		margin-left: calc(var(--pa-i2-s) * 0.024768);
		background: #ad843a;
		color: #fff;
		font-size: calc(var(--pa-i2-s) * 0.037152);
		line-height: calc(var(--pa-i2-s) * 0.053560);
		letter-spacing: 0;
		text-align: center;
		vertical-align: calc(var(--pa-i2-s) * 0.009288);
	}

	.page-content__body .pa-form--table .pa-intro02-sp__service-text {
		margin: calc(var(--pa-i2-s) * 0.018576) 0 0;
		font-size: calc(var(--pa-i2-s) * 0.046440);
		line-height: calc(var(--pa-i2-s) * 0.067802);
	}

	/* 高さ 246.7 ＝ 絵の 230.7（比例）＋ 内余白 15 ＋ 上の線 1（移行元の CSS の値・固定）. */
	.pa-form--table .pa-intro02-sp__check {
		box-sizing: border-box;
		height: calc(var(--pa-i2-s) * 0.714241 + 16px);
		padding-top: 15px;
		border-top: 1px solid #fff;
		color: #222;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__check-title {
		margin: 0;
		font-size: calc(var(--pa-i2-s) * 0.055728);
		font-weight: bold;
		line-height: calc(var(--pa-i2-s) * 0.055728);
	}

	.page-content__body .pa-form--table .pa-intro02-sp__check-list {
		margin: calc(var(--pa-i2-s) * 0.049536) 0 0;
		padding: 0;
		list-style: none;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__check-list li {
		position: relative;
		height: calc(var(--pa-i2-s) * 0.060681);
		margin: 0;
		padding-left: calc(var(--pa-i2-s) * 0.089164);
		font-size: calc(var(--pa-i2-s) * 0.037152);
		line-height: calc(var(--pa-i2-s) * 0.060681);
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__check-list li + li {
		margin-top: calc(var(--pa-i2-s) * 0.017957);
	}

	/* 枠（灰の線・白地）と赤いチェック。移行元の絵の 34×34 画素の枠を倍率で写した. */
	.page-content__body .pa-form--table .pa-intro02-sp__check-list li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: calc(var(--pa-i2-s) * 0.060681);
		height: calc(var(--pa-i2-s) * 0.060681);
		border: 1px solid #ccc;
		background: #fff;
	}

	.page-content__body .pa-form--table .pa-intro02-sp__check-list li::after {
		content: "";
		position: absolute;
		top: calc(var(--pa-i2-s) * 0.015480);
		left: calc(var(--pa-i2-s) * 0.015480);
		width: calc(var(--pa-i2-s) * 0.027864);
		height: calc(var(--pa-i2-s) * 0.015480);
		border-bottom: 1.5px solid #e1040b;
		border-left: 1.5px solid #e1040b;
		transform: rotate(-45deg);
	}

	.page-content__body .pa-form--table .pa-intro02-sp__check-note {
		margin: calc(var(--pa-i2-s) * 0.040248) 0 0;
		padding-left: calc(var(--pa-i2-s) * 0.092879);
		color: #e1040b;
		font-size: calc(var(--pa-i2-s) * 0.040248);
		line-height: calc(var(--pa-i2-s) * 0.062539);
	}
}

/*
 * 副見出し「来店予約フォーム」の携帯幅（Task #7969）。移行元のスマホ版は別の絵
 * （`sp/images/inquiry/reservation/ttl.gif`・640×39）を画面の幅いっぱいに縮め、字は絵の中で
 * 中央に寄っている。幅 375 で高さ 22.8・下の余白 20（`sp/css/style.css` の `#reservation .form_ttl`）.
 * 絵は幅に比例して縮むので、字の大きさと高さも `vw` で書く（幅 375 の値 × 100vw / 375）。
 * 字の大きさはパソコン版の絵の 0.78 倍（字の範囲の幅 185.7 ÷ 238）.
 */
@media (max-width: 749px) {
	.page-content__body .pa-form--table .pa-raiten-intro__subheading {
		height: 6.080000vw;
		margin: 0 0 20px;
		font-size: 6.026667vw;
		line-height: 6.080000vw;
		letter-spacing: 0.208000vw;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
 * 社員紹介の来店予約のパソコン幅の案内の塊（Bug #9325）。
 *
 * 移行元のパソコン版（`form/view/intro/reservation_intro_02.php`）は、見出しの絵・相談会の絵・
 * 副見出し・案内文・入力の表を、器 `#reservation`（943px）の中の箱 `.maintextBoxw_setting`
 * （幅 840px・左右の内余白 32px。`css/base_old.css` 712 行）に並べる。見出しと副見出しは箱の中で
 * 中央に寄り、相談会の絵は箱の幅いっぱい（`css/reservation_intro_form02.css` 210 行）.
 *
 * 入力の表は Bug #8521 で同じ位置（幅 840px・左の外余白「外枠の幅と 943px の差の半分 ＋ 32px」）へ
 * 置いた。表より上の案内の塊も同じ位置へ置く。直す前の実測（幅 1440・
 * `pa-verify-assets/A/9325-社員紹介のパソコン幅の器の実測-1002/走行1/`）:
 *
 * | 要素（左端／幅） | 移行元 | dev（直す前） |
 * |---|---|---|
 * | 見出しの絵 | 331／739 | 170／739 |
 * | 相談会の絵 | 280.5／840 | 170／1100 |
 * | 副見出し | 280.5／840 の中で中央 | 170／1100 の左寄せ |
 * | 案内文 | 280.5／840 | 170／1100 |
 * | 入力の表 | 280.5／840 | 280.5／840（一致） |
 * | 案内文の下の余白 | 25 | 30 |
 *
 * 🚨 **1,280px 以上だけに当てる。**意図的変更の台帳の「本サイトの対応幅の区分」と #8521 と同じく、
 * 750〜1,279px は画面の幅に収める（固定の 840px を持ち込まない）.
 * -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
	.pa-form--table .pa-raiten-intro--intro02 {
		width: 840px;
		margin-left: calc((100% - 943px) / 2 + 32px);
	}

	.page-content__body .pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__heading,
	.page-content__body .pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__subheading {
		text-align: center;
	}

	.pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__check img {
		width: 100%;
	}

	/* 案内文の下の余白は、移行元の `#reservation .form_text`（`css/page_inquiry.css` 495〜497 行）の 25px。
	 * 既定の 30px のままだと、表の上端が 5px 下にずれる（下見の走行1 の実測）. */
	.pa-form--table .pa-raiten-intro--intro02 .pa-raiten-intro__text {
		margin-bottom: 25px;
	}
}

/* --------------------------------------------------------------------------
 * 社員紹介の来店予約（`reservation_intro_02`）の携帯幅の案内文（Bug #9321）。
 *
 * 移行元のスマホ版（`form/view/intro/sp_reservation_intro_02.php` 249〜251 行・
 * `sp/css/style.css` 2449〜2463 行）の `p.form_text` を写す。
 *
 * ```html
 * <p class="form_text">下記フォーム…ください。 後日、…頂きます。<br><br>
 *   <span>※お電話でのご予約は…（有料）。</span><br><br></p>
 * ```
 *
 * 字 12px・行 145%（17.4px）・内余白 20px 6.25%・色 #333。赤字の span は 11px。
 * 会員紹介（Bug #9302）と違い、赤字の前に空行が 1 行あり、末尾にも空行が 1 行ある。
 *
 * markup（`render_intro02_top_intro()`）はパソコン幅と共通で、移行元のパソコン版
 * （`form/view/intro/reservation_intro_02.php` 121〜123 行）の組みに合っているので変えない。空行は CSS で組む:
 * 赤字を block にして上に 1 行ぶん（17.4px）空け、下の内余白に 1 行ぶん足す。
 * 赤字は移行元でも改行の直後から始まるので、block にしても折り返しの幅と行数は変わらない.
 * 1 文目の後ろの改行はパソコン版の組みなので隠す（Bug #9302 と同じ）.
 *
 * 6.25% は移行元の器（画面の幅）に対する値なので、`6.25vw` で書く（dev の柱は左右 16px 狭い）.
 * -------------------------------------------------------------------------- */
@media (max-width: 749px) {
	.pa-form--table[data-pa-form="reservation_intro_02"] .pa-raiten-intro__text {
		margin: 0 -16px;
		padding: 20px 6.25vw calc(20px + 12px * 1.45);
		color: #333;
		font-size: 12px;
		line-height: 145%;
	}

	.pa-form--table[data-pa-form="reservation_intro_02"] .pa-raiten-intro__text span {
		display: block;
		margin-top: calc(12px * 1.45);
		font-size: 11px;
	}

	.pa-form--table[data-pa-form="reservation_intro_02"] .pa-raiten-intro__text br:first-of-type {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * パーティー申込（`event`・/form/event/）の入力画面と完了画面（Task #9403）。
 *
 * 移行元は `form/view/event.php`・`event_thanks.php`（CSS は `css/page_event.css`）と、携帯版
 * `sp_event.php`・`sp_event_thanks.php`（CSS は `sp/css/style.css` の「03 イベント＆パーティーへのお申し込み」の節・
 * 2739〜2808 行）である。表の行・欄・同意の帯は、同じ CSS を写したご紹介の来店予約の規則へ `event` を足した
 * （このファイルの `reservation3` の規則）。ここにはパーティー申込だけの区画を置く.
 *
 * 題名「PA体験ラウンジ」と見出し「お申し込みフォーム」は、移行元の絵（パソコン版 `images/event/main_ttl.gif` 712×53・
 * `ttl.gif` 263×29、携帯版 `sp/images/event/entry/main_ttl.gif` 640×90・`ttl.gif` 640×39）の中の字を書き起こした。
 * 箱の大きさは絵と同じにし、字の大きさと線の位置は絵の画素から読んだ（2026-10-05）.
 *
 * | 絵 | 字 | 線 |
 * |---|---|---|
 * | パソコン版の題名 | 明朝・黒・1 字目の左端 10px・字の高さ 36px（3〜38 行目） | 下端に左から赤 #e1200f 38×2px、続けて黒 1px を 324px まで |
 * | パソコン版の見出し | 明朝・#a3762b・字の高さ 28px | 無い |
 * | 携帯版の題名（幅 640 の絵を画面の幅へ縮める） | 明朝・黒・中央・字の高さ 41/640 | 下端の中央に赤 #f10000 40×2（/640） |
 * | 携帯版の見出し | 明朝・#a3762b・中央・字の高さ 38/640 | 無い |
 *
 * 手順の絵（`img_flow01.gif`・`img_flow03.gif`）は出さないので、その下の区画は移行元より手順の絵のぶん上に来る
 * （意図的変更の台帳 118 行と同じ扱い）.
 * -------------------------------------------------------------------------- */
.pa-event-intro {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.page-content__body .pa-event-intro .pa-event-intro__title {
	position: relative;
	box-sizing: border-box;
	width: 712px;
	max-width: 100%;
	height: 53px;
	margin: 0 0 36px;
	padding: 0 0 0 10px;
	border: 0;
	background: none;
	color: #000;
	font-family: inherit;
	font-size: 38px;
	font-weight: normal;
	line-height: 42px;
	letter-spacing: 0.1em;
	text-align: left;
}

/* 下端の線。左の赤 38px（2px）と、続く黒 1px（324px まで） */
.page-content__body .pa-event-intro .pa-event-intro__title::before,
.page-content__body .pa-event-intro .pa-event-intro__title::after {
	content: "";
	position: absolute;
	left: 0;
}

.page-content__body .pa-event-intro .pa-event-intro__title::before {
	bottom: 0;
	width: 325px;
	height: 1px;
	background: #000;
}

.page-content__body .pa-event-intro .pa-event-intro__title::after {
	bottom: 0;
	width: 38px;
	height: 2px;
	background: #e1200f;
}

.page-content__body .pa-event-intro .pa-event-intro__heading {
	box-sizing: border-box;
	width: 263px;
	max-width: 100%;
	height: 29px;
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	background: none;
	color: #a3762b;
	font-family: inherit;
	font-size: 26px;
	font-weight: normal;
	line-height: 29px;
	letter-spacing: 0.1em;
	text-align: left;
	white-space: nowrap;
}

/* `#event .form_text`（下の内余白 25px・15px・行送り 166%） */
.pa-form .pa-event-intro .pa-event-intro__text {
	margin: 0;
	padding: 0 0 25px;
	font-family: var(--pa-font-family-base, inherit);
	font-size: 15px;
	line-height: 166%;
}

/* 完了画面の題名と見出しは、携帯版だけが持つ（パソコン版は注釈の中） */
.pa-event-intro--thanks {
	display: none;
}

/* パーティー名の注記をパソコン幅だけで折り返す改行（`note_pc_lines`）。携帯幅では隠して 1 行につなぐ */
@media (max-width: 749px) {
	.pa-form .pa-br-pc {
		display: none;
	}
}

/*
 * 同意の案内文。移行元のパソコン版は 3 段落を 1 つの器 `#event .form_text02`（下の内余白 35px・15px・行送り 166%）に
 * 包み、段落の間に空きを持たない（資料請求の LP 専用フォームと同じ値）.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="event"] .pa-consent-intro--lead,
	.pa-form[data-pa-form="event"] .pa-consent-intro--item {
		padding-bottom: 0;
	}

	.pa-form[data-pa-form="event"] .pa-consent-intro--last {
		padding-bottom: 35px;
	}

	/*
	 * パーティー名の注記。移行元は選択欄を `p.mb15` に入れ、注記は表のセルの素の `<p>`（16px・行送り 24px）である
	 * （`form/view/event.php` の 91〜112 行）。dev の注記は既定で 0.85em・器の行の間 8px＋上 0.3em なので、
	 * 選択欄の下端から注記の上端までを 15px（8px ＋ 7px）にする.
	 */
	.pa-form[data-pa-form="event"] .pa-cell:has(select[name="party_select"]) > .pa-note {
		margin-top: 7px;
		color: inherit;
		font-size: 16px;
		line-height: 24px;
	}

	/*
	 * 法令の文と「お申し込みが可能な方」。移行元は法令の文を `p.mb20`（13px・1 行 20px）に置き、続けて見出しを
	 * `p.fs16`（16px・行送り 24px）、本文を素の `<p>`（13px・行送り 20px）に置く（`event.php` の 362〜366 行）.
	 * 入会基準の既定の規則（`.pa-form--table .pa-admission__heading` ほか）は表の見た目の広告フォームにだけ当たるので、
	 * ここで同じ値を当てる.
	 */
	.pa-form[data-pa-form="event"] .pa-consent-footer {
		margin-bottom: 20px;
		line-height: 20px;
	}

	.pa-form[data-pa-form="event"] .pa-admission__heading {
		margin: 0;
		padding: 0;
		font-size: 16px;
		font-weight: normal;
		line-height: 24px;
	}

	.pa-form[data-pa-form="event"] .pa-admission__body {
		margin: 0;
		padding: 0;
		font-size: 13px;
		line-height: 20px;
	}
}

@media (max-width: 749px) {
	/* `#event .category_ttl`（下 20px）。絵の高さ 90/640 を画面の幅に比例させる */
	.page-content__body .pa-event-intro .pa-event-intro__title {
		width: auto;
		height: 14.062500vw;
		margin: 0 0 20px;
		padding: 0;
		font-size: 6.875000vw;
		line-height: 6.875000vw;
		letter-spacing: 0.08em;
		text-align: center;
	}

	.page-content__body .pa-event-intro .pa-event-intro__title::before {
		display: none;
	}

	.page-content__body .pa-event-intro .pa-event-intro__title::after {
		left: 50%;
		width: 6.250000vw;
		height: 0.312500vw;
		margin-left: -3.125000vw;
		background: #f10000;
	}

	/* `#event .form_ttl`（下 20px）。絵の高さ 39/640 */
	.page-content__body .pa-event-intro .pa-event-intro__heading {
		width: auto;
		height: 6.093750vw;
		margin: 0 0 20px;
		font-size: 5.600000vw;
		line-height: 6.093750vw;
		letter-spacing: 0.08em;
		text-align: center;
	}

	/* `#event .form_text`（内余白 12px 6.25%・11px・行送り 145%） */
	.pa-form .pa-event-intro .pa-event-intro__text {
		padding: 12px 6.25%;
		font-size: 11px;
		line-height: 145%;
	}

	.pa-event-intro--thanks {
		display: block;
		padding: 25px 0 0;
	}

	/*
	 * 題名・見出し・案内文は画面の幅いっぱい（移行元の `#event` は左右の内余白を持たない）。dev のフォームの器は
	 * 左右 16px の内余白を持つので、その分だけ外へ出す（左右を別々に書く。一括の `margin` は右へはみ出す）.
	 */
	.pa-form .pa-event-intro {
		margin-right: -16px;
		margin-left: -16px;
	}

	/*
	 * パーティーの選択欄（`dd select.party` 幅 100%・`dd select` 内余白 10px・字は `dd` の 15px）。矢印の絵は
	 * ほかの選択欄と同じ `icon_select_arrow.gif` を敷く（移行元の「フォーム共通」の `select`）.
	 */
	.pa-form[data-pa-form="event"] .pa-cell-field-select:has(> select[name="party_select"]) {
		flex-basis: 100%;
	}

	.pa-form[data-pa-form="event"] .pa-cell select.pa-control[name="party_select"] {
		width: 100%;
		padding: 10px;
		border-radius: 0;
		font-size: 15px;
		-webkit-appearance: none;
		appearance: none;
		background-image: url("../images/inquiry/icon_select_arrow.gif");
		background-position: right top;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	/*
	 * パーティー名の注記。移行元は選択欄を `p.mb10` に入れ、注記は `dd` の素の `<p>`（13px・1 行 20px）である
	 * （`sp_event.php` の 107〜122 行）。選択欄の下端から注記の上端までを 10px（器の行の間 8px ＋ 2px）にする.
	 */
	.pa-form[data-pa-form="event"] .pa-cell:has(select[name="party_select"]) > .pa-note {
		margin-top: 2px;
		color: inherit;
		font-size: 13px;
		line-height: 20px;
	}

	/*
	 * 「情報セキュリティを見る」の段落の下と、「お申し込みが可能な方」。移行元は器 `.text_area` の中で、
	 * リンクの `p.mb20` の後ろに見出しと本文を 1 つの `<p>`（13px・1 行 18.9px）で続ける（`sp_event.php` の
	 * 431〜437 行）。お問い合わせの末尾の空き 38px（`.mb20` ＋ 器の下の内余白 18px）のうち、器の内余白は本文の後ろへ回す.
	 */
	.pa-form[data-pa-form="event"] .pa-consent-footer {
		margin-bottom: 20px;
	}

	.pa-form[data-pa-form="event"] .pa-admission__heading,
	.pa-form[data-pa-form="event"] .pa-admission__body {
		margin: 0 calc(6.25vw - 16px);
		padding: 0;
		font-size: 13px;
		font-weight: normal;
		line-height: 18.9px;
	}

	.pa-form[data-pa-form="event"] .pa-admission__body {
		margin-bottom: 18px;
	}
}

/*
 * 完了画面。パソコン版は `#complete`（`css/page_event.css` の 302〜343 行）、携帯版は `#event`（`sp/css/style.css` の
 * 2775〜2808 行）の値である.
 *
 * 🚨 **行送りは段落と項目ごとに書く。**移行元は器（`.box_mail` の 160%・`.mail_text` の 176%）に行送りを置き、中の `<p>` と `<li>` が
 * 受け継ぐ。dev はテーマの `<p>` と `<li>` の行送りが器の値に勝つので、器に書くだけでは効かない（下見の走行 3 で、注記の行が 24px・
 * (1)(2) の場合の行が 19.5px だった）.
 */
.pa-thanks-body--event .pa-event-thanks {
	margin-bottom: 35px;
	padding: 38px 0 40px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 15px;
	line-height: 166%;
	text-align: center;
}

.pa-thanks-body--event .pa-event-thanks__copy {
	margin: 0 0 35px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 24px;
	line-height: 190%;
}

.pa-thanks-body--event .pa-event-thanks__copy--sp,
.pa-thanks-body--event .pa-event-thanks__sp {
	display: none;
}

.pa-thanks-body--event .pa-event-thanks__mail {
	padding: 35px 40px;
	background: #f5f5f5;
	font-size: 16px;
	line-height: 160%;
	text-align: left;
}

.pa-thanks-body--event .pa-event-thanks__note {
	margin: 0;
	line-height: 25.6px;
}

.pa-thanks-body--event .pa-event-thanks__note--second {
	margin-bottom: 25px;
}

.pa-thanks-body--event .pa-event-thanks__causes {
	display: flex;
	margin: 0 0 25px;
	padding: 25px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	list-style: none;
}

.pa-thanks-body--event .pa-event-thanks__causes li {
	width: 225px;
	margin: 0;
	font-weight: 700;
	line-height: 25.6px;
}

.pa-thanks-body--event .pa-event-thanks__cases {
	font-size: 13px;
	line-height: 176%;
}

.pa-thanks-body--event .pa-event-thanks__case {
	margin: 0;
	line-height: 176%;
}

.pa-thanks-body--event .pa-event-thanks__case--first {
	margin-bottom: 25px;
}

@media (max-width: 749px) {
	.pa-thanks-body--event .pa-event-thanks {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 13px;
		line-height: normal;
	}

	/* `#event .thanks_text`（内余白 23px 6.25% 22px・16px・中央） */
	.pa-thanks-body--event .pa-event-thanks__copy {
		margin: 0;
		padding: 23px 6.25% 22px;
		font-family: inherit;
		font-size: 16px;
		line-height: normal;
	}

	.pa-thanks-body--event .pa-event-thanks__copy--pc,
	.pa-thanks-body--event .pa-event-thanks__pc {
		display: none;
	}

	.pa-thanks-body--event .pa-event-thanks__copy--sp {
		display: block;
	}

	.pa-thanks-body--event .pa-event-thanks__sp {
		display: inline;
	}

	/* `#event .box_mail`（下 30px・内余白 15px 6.25%・行送り 130% は 16px の字に対する値） */
	.pa-thanks-body--event .pa-event-thanks__mail {
		margin-bottom: 30px;
		padding: 15px 6.25%;
		font-size: 13px;
		line-height: 20.8px;
	}

	.pa-thanks-body--event .pa-event-thanks__note--first {
		margin-bottom: 10px;
	}

	.pa-thanks-body--event .pa-event-thanks__note--second {
		margin-bottom: 15px;
	}

	.pa-thanks-body--event .pa-event-thanks__note,
	.pa-thanks-body--event .pa-event-thanks__causes li {
		line-height: 20.8px;
	}

	.pa-thanks-body--event .pa-event-thanks__causes li {
		width: 50%;
	}

	/* `.back_top` の中のリンクは、移行元の `sp/css/basic.css` の 13px で出る（下見の走行 3 の実測） */
	.pa-thanks-body--event .pa-thanks-body__back--sp {
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
 * ご紹介プログラムの表の上の見出し・案内文と、メール・電話番号の入力例・受信設定の注記（Bug #9162）
 *
 * 移行元の通常版（`form/view/intro/mypageform_03.php`）の値を 2026-10-05 に測った
 * （`pa-verify-assets/A/9162-直す前-1005/`・台本 `tools/a-9162-紹介フォームの直す前の読み-1005.mjs`）.
 *
 * | 要素 | 移行元のパソコン版（1440） | 移行元の携帯版（375） |
 * |---|---|---|
 * | 見出し `h3.title_style05` | 内余白 20/0/3・下の外余白 18・高さ 69・下に点線の絵 `border_style01.gif`・中に絵 441×46 | 無い |
 * | 案内文 | 13px・行の高さ 26・内余白 10/0・色 rgb(34, 24, 21)。表はすぐ下 | 13px・行の高さ 23.4・下の外余白 13・色 rgb(51, 51, 51) |
 * | 入力例 `span.gray` | 16px・色 rgb(76, 76, 76)・欄の右端から 23.3 | 13px・色 rgb(25, 25, 25)・欄の右端から 3.7 |
 * | 注記 `p.indent-1` | 12px・行の高さ 24・色 rgb(76, 76, 76)・左の内余白 12・字下げ −12。欄のすぐ下 | 13px・行の高さ 19.5・色 rgb(51, 51, 51)・左の内余白 13・字下げ −13。欄のすぐ下 |
 * | 姓・名 | 同じ行 | 同じ行。「姓：」「名：」（13px）と幅 97.5 の欄 |
 *
 * 見出しの絵は左のアイコンと金色（rgb(161, 135, 85)）の明朝の字だけなので、字を書き起こして CSS で組み、アイコンだけを
 * 背景の絵にする（全体原則「絵の中の文言は背景＋テキスト」・D488）。絵の中の字は左 38 から右 397・上 12 から下 32 の範囲に
 * あり、16 字で幅 359（1 字あたり約 22.4px）.
 *
 * 見出しと案内文はテーマの `.page-content__body h3` / `p`（0,1,1）の飾りを受けるので、`.pa-form--table` を前置して
 * 0,2,0 に上げて打ち消す（`.pa-shoukai-normal__hero` と同じ手当て）.
 *
 * 白い札の枠（パソコン幅のページの地と器）は Task #9444 が受け持つ.
 * -------------------------------------------------------------------------- */

.pa-form--table .pa-shoukai-form__heading {
	margin: 0 0 18px;
	padding: 20px 0 3px 38px;
	border: 0;
	background: url("../images/shoukai/pc/form-heading-icon.png") no-repeat 0 20px, url("../images/shoukai/pc/border_style01.gif") repeat-x left bottom;
	color: #a18755;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 22px;
	font-weight: normal;
	line-height: 46px;
	letter-spacing: 0.44px;
}

.pa-form--table .pa-shoukai-form__lead {
	margin: 0;
	padding: 10px 0;
	color: #221815;
	font-size: 13px;
	line-height: 26px;
}

.pa-form[data-pa-form="shoukai"] .pa-cell .pa-example {
	margin-left: 15.3px;
	color: #4c4c4c;
	font-size: 16px;
}

.pa-form[data-pa-form="shoukai"] .pa-cell .pa-note {
	margin-top: -8px;
	padding-left: 12px;
	color: #4c4c4c;
	font-size: 12px;
	line-height: 24px;
	text-indent: -12px;
}

@media (max-width: 749px) {

	.pa-form--table .pa-shoukai-form__heading {
		display: none;
	}

	.pa-form--table .pa-shoukai-form__lead {
		margin: 0 0 13px;
		padding: 0;
		color: #333;
		line-height: 23.4px;
	}

	/*
	 * 移行元の携帯版は入力例を欄の字の基準線にそろえ、字の縦の中心が欄の縦の中心より 1.1 上に来る（直す前の読み）。
	 * dev は欄の縦の中心にそろうので、その差だけ上げる.
	 */
	.pa-form[data-pa-form="shoukai"] .pa-cell .pa-example {
		position: relative;
		top: -1.1px;
		margin-left: -4.3px;
		color: #191919;
		font-size: 13px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-cell .pa-note {
		padding-left: 13px;
		color: #333;
		font-size: 13px;
		line-height: 19.5px;
		text-indent: -13px;
	}

	/* 姓・名を 1 行に並べる。字は「姓：」「名：」（移行元の携帯版は 13px の字にコロンを付ける）. */
	.pa-form[data-pa-form="shoukai"] .pa-cell:has(input[name="sei"], input[name="sei-kana"], input[name="friend-sei"], input[name="friend-sei-kana"]) {
		column-gap: 3.7px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-cell:has(input[name="sei"], input[name="sei-kana"], input[name="friend-sei"], input[name="friend-sei-kana"]) .pa-cell-field {
		flex-basis: auto;
		column-gap: 3.7px;
	}

	/*
	 * 札は `inline-flex` にする。札の字「姓」の後ろには型紙の改行と字下げがあり、`inline-block` のままだと `::after` の「：」の前に
	 * 空白（約 3.7px）が残る（下見の走行 1 で、姓の欄が移行元より 3.7 右へ寄った）.
	 */
	.pa-form[data-pa-form="shoukai"] .pa-cell:has(input[name="sei"], input[name="sei-kana"], input[name="friend-sei"], input[name="friend-sei-kana"]) .pa-sub-label {
		display: inline-flex;
		min-width: 0;
		font-size: 13px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-cell:has(input[name="sei"], input[name="sei-kana"], input[name="friend-sei"], input[name="friend-sei-kana"]) .pa-sub-label::after {
		content: "：";
	}

	.pa-form[data-pa-form="shoukai"] .pa-cell:has(input[name="sei"], input[name="sei-kana"], input[name="friend-sei"], input[name="friend-sei-kana"]) .pa-control {
		width: 97.5px;
	}

	/* 入力例を欄の右に並べるため、メールと電話番号の欄を移行元の携帯版の幅（170）にする. */
	.pa-form[data-pa-form="shoukai"] .pa-cell-field:has(.pa-example) {
		flex-basis: auto;
	}

	.pa-form[data-pa-form="shoukai"] .pa-cell-field:has(.pa-example) .pa-control {
		width: 170px;
	}
}

/* --------------------------------------------------------------------------
 * ご紹介プログラムの入力画面の見た目を移行元にそろえる（Task #9812・ユーザー決定 D826・D830）
 *
 * 2026-10-08 の直す前の読み（`pa-verify-assets/A/9812-直す前の読み-1008/走行1/`・スクリプト `tools/a-9812-直す前の読み-1008.mjs`）.
 * 移行元は origin/main `b435f9a7e` のコピーの `form/view/intro/mypageform_0{2,3}.php`（パソコン版）と、携帯版の型紙
 * `sp_mypageform_0{2,3}.php`（`sp/form/myintro/css/formstyle.css`）.
 *
 * | 見本 | 移行元 1440 | dev 1440（直す前） | 移行元 375 | dev 375（直す前） |
 * |---|---|---|---|---|
 * | 行の見出し | 15px・行の高さ 18px・#1a1a1a | 19px・22.8px・#000 | 13px・灰色の帯（rgba(0,0,0,.05)）・内余白 5px・下に #ccc の実線 | 17px の明朝・帯なし・内余白 16px 0 8px |
 * | 必須の札（375） | — | — | 13px・内余白 2px 5px・右の外余白 12px・行の高さ 19.5px | 12px・内余白 4px・右 10px |
 * | 会員番号の欄 | 白地・幅 178 | 桃色（空欄の塗り）・幅 180 | 白地・幅 308.75（器の 95%）・内余白 10px 0・高さ 42 | 桃色・幅 180・高さ 32 |
 * | 同意の上のリンク | #cf3319・下線なし | #000・下線あり | #cf3319・下線なし | 同じ |
 * | 同意の札 | 16px・#221815 | 16px・#000 | 13px・#191919 | 16px・#000 |
 *
 * - 会員番号の欄は、移行元の型紙が `class="req"` を付けないので、空欄に色を付ける仕組み（`checkreq.js`）が当たらず白地のままである.
 *   dev は必須の欄すべてを塗るので、この欄だけ塗りを打ち消す
 * - 携帯版の型紙は、案内文と表を白い角丸の箱（`#form_contents > div`・外余白 8px 10px 15px・内余白 10px・影）に入れ、
 *   表の欄の行の下に #999 の点線を引く。器は `PA_Forms_Embed::render_form()` が足す `.pa-shoukai-form__card`
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table th {
		color: #1a1a1a;
		font-size: 15px;
		line-height: 18px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-consent-intro a,
	.pa-form[data-pa-form="shoukai"] .pa-consent-footer a {
		color: #cf3319;
		text-decoration: none;
	}

	.pa-form[data-pa-form="shoukai"] #pa-field-member-no {
		width: 178px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-consent__agree .pa-checkbox {
		color: #221815;
	}
}

.pa-form[data-pa-form="shoukai"] input#pa-field-member-no.pa-control--empty,
.pa-form[data-pa-form="shoukai"] input#pa-field-member-no {
	background-color: #fff;
}

/* 成婚退会者様限定版のお申込み方法の 1 段目と 5 段目は、字を幅で出し分ける（Task #9812・`render_shoukai_intro_premium()`）. */
.pa-form .pa-shoukai-premium__step-sp {
	display: none;
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card {
		margin: 8px -6px 15px;
		padding: 10px;
		border-radius: 5px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}

	/* 器の中の表は下に外余白を持たない（移行元の `#form_contents table:last-child { margin: 0 }`）。既定の 40px が箱の下に残っていた（下見の走行 2 の絵）. */
	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table {
		margin-bottom: 0;
	}

	/*
	 * e-mail の欄の注記どうしのあいだは 1em（移行元の `#form_contents > div p { margin: 0 0 1em }`・13px）.
	 * dev の `.pa-cell` は段のあいだに `gap` の 8px を持つので、外余白はその残りの 5px にする
	 * （13px を置いた下見の走行3 では 21px だった）.
	 */
	.pa-form[data-pa-form="shoukai"] .pa-cell .pa-note + .pa-note {
		margin-top: 5px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table tr,
	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table__row--pair-top {
		border-bottom: 0;
	}

	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table th {
		padding: 5px;
		border-bottom: 1px solid #ccc;
		background-color: rgba(0, 0, 0, 0.05);
		color: #191919;
		font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
		font-size: 13px;
		line-height: 1.5;
		white-space: nowrap;
	}

	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table td {
		padding: 5px;
		border-bottom: 1px dotted #999;
		color: #191919;
		font-size: 13px;
		line-height: 1.5;
	}

	/* 札は上端でそろえる。字の基準線にそろえると行の高さが 3px 広がり、帯が移行元（34）より高くなった（下見の走行 1）. */
	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table th .pa-badge {
		margin-right: 12px;
		padding: 2px 5px;
		font-family: inherit;
		font-size: 13px;
		line-height: 19.5px;
		vertical-align: top;
	}

	/* 欄の字は 16px（移行元の携帯版）。表の字の 13px を受け継ぐと、欄が 3px 低くなった（下見の走行 1）. */
	.pa-form[data-pa-form="shoukai"] .pa-shoukai-form__card .pa-form-table input.pa-control {
		padding: 10px 0;
		font-size: 16px;
	}

	.pa-form[data-pa-form="shoukai"] #pa-field-member-no {
		width: 95%;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-consent__agree .pa-checkbox {
		color: #191919;
		font-size: 13px;
	}

	.pa-form .pa-shoukai-premium__step-pc {
		display: none;
	}

	.pa-form .pa-shoukai-premium__step-sp {
		display: inline;
	}
}

/* --------------------------------------------------------------------------
 * 婚活 EQ 診断（`eq`）の題名の区画を移行元にそろえる（Bug #9440・事業部の NG `w101pc20261002ogawax1`・`70n0boi05gpm607cgc8e`・
 * `w191sp20261001ogawax1`・D598 のケース 1）
 *
 * 2026-10-05 の直す前の読み（`pa-verify-assets/A/9440-直す前-1005/`・スクリプト `tools/a-9440-婚活EQ診断の題名の区画の直す前の読み-1005.mjs`）:
 *
 * | | 移行元 1440（`form/view/eq.php`） | dev 1440 | 移行元 375（`sp_eq.php`） | dev 375 |
 * |---|---|---|---|---|
 * | 外枠の上の内余白 | 0（`#contents` はパンくずのすぐ下） | 48 | 25（`#analysis`） | 48 |
 * | ページ名の見出し | 無い | 28＋下 24 | 無い | 28＋下 24 |
 * | 題 | 絵 934×95・下 50 | 同じ絵・下 25 | 字だけの絵 2 枚（3 行の題 375×106.6・下 20／2 行 375×43.4・下 12） | パソコン版の絵を 343 に縮めて 34.9・下 18 |
 * | 「サンデー・ジャポン…」の段落 | 15px・行の高さ 24.9・下の内余白 25 | 15px・行の高さ 24.9・下 25 | 12px・行の高さ 16.8・中央寄せ・内余白 15 と 6.25vw・画面の幅いっぱい・下 15 | 15px・左寄せ・幅 343・下 25 |
 * | テンキーの区画の上端 | 411.8 | 486.8 | 397 | 388.2 |
 *
 * ページ名の見出しはプラグインの定義（`hide_page_name`）で出さない。携帯幅の題の字は `PA_Forms_Embed::eq_sp_title_html()` と
 * `eq_sp_copy_html()` が `eq` だけに出す（ほかのフォームの HTML は変わらない）.
 *
 * 携帯幅の題の字は、移行元の絵の字を画素で測った値で組む（375 に縮めたときの字の上端・下端）:
 * 1 行目「成婚率No.1の結婚相談所」赤 rgb(225, 32, 15) 0.6〜18.2、2 行目「パートナーエージェント独自開発」同じ赤 27.5〜45.1（幅 265.4）、
 * 3 行目「婚活EQ診断」黒 56.2〜85.5、赤 rgb(241, 0, 0) の線 幅 23・105.5〜106.6（中央）。2 行の字は黒 0.6〜17.6 と 24.6〜42.2.
 * -------------------------------------------------------------------------- */

.pa-eq-intro__title-sp,
.pa-eq-intro__copy-sp {
	display: none;
}

@media (min-width: 750px) {

	.pa-form-frame__wrapper:has(.pa-form[data-pa-form="eq"]) {
		padding-top: 0;
	}

	.pa-form[data-pa-form="eq"] .pa-eq-intro__heading {
		margin-bottom: 50px;
	}
}

@media (max-width: 749px) {

	.pa-form-frame__wrapper:has(.pa-form[data-pa-form="eq"]) {
		padding-top: 25px;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__heading {
		margin: 0 0 20px;
		letter-spacing: 0;
		line-height: normal;
	}

	.pa-form[data-pa-form="eq"] .pa-eq-intro__heading img {
		display: none;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-sp {
		display: block;
		height: 106.6px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		text-align: center;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-line {
		display: block;
		font-size: 17.7px;
		font-weight: 600;
		line-height: 18px;
	}

	/*
	 * 行ごとの字の間・縦の伸び・位置は、移行元の絵の字の外接箱に合わせた（2026-10-05 の下見の走行 1・`pa-verify-assets/A/9440-下見-1005/`）.
	 * 走行 1 の dev（字の間 0）と移行元の外接箱（題の上端からの上〜下・左〜右）:
	 *   1 行目 dev 1〜16・90〜284 ／ 移行元 1〜17・79〜296（幅が 23 足りない。12 か所の字の間に 1.9px ずつ足す）
	 *   2 行目 dev 27〜42・56〜318 ／ 移行元 28〜44・56〜319（下へ 1px 寄せる）
	 *   3 行目 dev 54〜85・107〜268 ／ 移行元 57〜85・108〜267（字の高さが 3 高い。下端を軸に縦だけ 0.9 倍にする）
	 *   線 dev 105〜106 の 2 行 ／ 移行元 106 の 1 行（高さ 1px にして 106 に置く）
	 * 字の間を足すと末尾にも同じ幅の間が付いて字が左へ寄るので、左の内余白に同じ幅を足して中央に戻す.
	 */
	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-line--accent:first-child {
		padding-left: 1.9px;
		letter-spacing: 1.9px;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-line--accent {
		color: #e1200f;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-line--accent + .pa-eq-intro__title-line--accent {
		position: relative;
		top: 1px;
		margin-top: 8.2px;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-line--main {
		margin-top: 9.9px;
		color: #000;
		font-size: 30px;
		font-weight: normal;
		line-height: 30px;
		transform: scaleY(0.9);
		transform-origin: 50% 100%;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-sp::after {
		content: "";
		display: block;
		width: 23px;
		height: 1px;
		margin: 21.9px auto 0;
		background: #f10000;
	}

	/*
	 * 2 行の案内。走行 1 の dev（17.6px・字の間 0・行の高さ 24）と移行元の外接箱（器の上端からの上〜下・左〜右）:
	 *   1 行目 dev 3〜18・56〜316 ／ 移行元 1〜17・39〜330
	 *   2 行目 dev 27〜42・56〜311 ／ 移行元 25〜41・56〜318
	 * 2 行目の幅（255 と 262）から字を 18.1px にし、1 行目は 15 か所の字の間に 1.6px ずつ足す。移行元の 2 行目は中央より 3.5px 右に
	 * あるので、左の内余白で寄せる。両方の行を上へ 2px 寄せる（器の位置と高さは変えない）.
	 */
	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__copy-sp {
		display: block;
		height: 43.4px;
		margin: 0 0 12px;
		color: #000;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 18.1px;
		line-height: 24px;
		text-align: center;
	}

	/*
	 * 行の中では折り返さない（PR #9453 の Greptile の指摘）。器の高さを 43.4 に決めているので、幅 320 の画面で 1 行目（幅 291・中身の幅 288）が
	 * 折り返すと、2 行目と下の段落に重なる。折り返さなければ、はみ出しは左右の外枠の内余白（16）の中に収まる。幅 375 では元々折り返さない.
	 */
	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__title-line,
	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__copy-line {
		white-space: nowrap;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__copy-line {
		display: block;
		position: relative;
		top: -2px;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__copy-line:first-child {
		padding-left: 1.6px;
		letter-spacing: 1.6px;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__copy-line + .pa-eq-intro__copy-line {
		padding-left: 7px;
	}

	:is(.pa-form[data-pa-form="eq"], .pa-form .pa-form-confirm__head--eq) .pa-eq-intro__media {
		margin: 0 -16px 15px;
		padding: 15px 6.25vw;
		font-size: 12px;
		line-height: 16.8px;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
 * 確認の段（Task #9556・D777）
 *
 * 確認の段を持つフォーム（埋め込みの `CONFIRM_STEP_FORMS`）は、器に `data-pa-step` を持つ。
 * 画面側（`assets/js/pa-forms.js` の `setupSubmit()`）が「確認する」で `confirm`、「戻る」で `input` にする。
 *
 * 確認のあいだ、フォームの中は確認表示の器（`.pa-form-confirm`）だけを見せる。**入力欄は消さずに隠すだけにする。**
 * 送信は今と同じ POST 1 回で、隠した入力欄の値をそのまま運ぶ。
 *
 * ここは見せ方の切り替えだけを持つ。確認表示の表と帯の見た目は、帯の絵と共通 CSS の Task（#9557）と
 * 型ごとの Task が、移行元の確認画面から写す.
 * -------------------------------------------------------------------------- */
.pa-form[data-pa-step="confirm"] > form > :not(.pa-form-confirm) {
	display: none;
}

/*
 * ご紹介プログラム（Task #9561）の案内（`div.pa-shoukai-intro`・見出しの絵・紹介方法・特典付与の注意事項）は、フォームの器の中でも
 * `form` の外に在るので、上の規則が当たらない。移行元の確認画面（`intro/mypageform_conf.php`・`sp_mypageform_conf.php`）は
 * 表だけを出すので、確認のあいだは隠す（下見 r2 で、確認の表の上に案内が出たままだった）.
 */
.pa-form[data-pa-step="confirm"] .pa-shoukai-intro {
	display: none;
}

.pa-form-confirm[hidden] {
	display: none;
}

.pa-form-confirm:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
 * 進み具合の帯（3 段）と確認表示の見た目（Task #9557・#9558）
 *
 * 移行元は 3 段の絵（`images/inquiry/img_flow01.gif`・`02`・1100×68、携帯版 `sp/images/inquiry/…`・640×124）を置く。
 * 全体原則（#2482）と統括の決め（2026-10-06・#9557 のコメント）に従い、字を消した絵を背景にして、段の字は `li` に書く。
 * 段の字の位置は、移行元の絵の中の字の箱の中心（パソコン版 169.5・541・920 / 1100、携帯版 104.5・319・532.5 / 640）に
 * 置く。字の大きさは、絵の中の字の間隔（パソコン版 19px、携帯版 26.4 / 640）から決めた。
 * 「戻る」「送信」も、字を消した移行元の絵（`btn_back_off.gif`・`btn_send_off.gif` 250×60、携帯版 277×100）を背景にする。
 * 余白は移行元の `css/page_inquiry.css`（`.page_flow_img`・`.btn_area`・`.note`）と `sp/css/style.css` から写した.
 * -------------------------------------------------------------------------- */
.pa-form-flow {
	position: relative;
	display: block;
	width: 1100px;
	max-width: 100%;
	height: 68px;
	margin: 0 auto 36px;
	padding: 0;
	list-style: none;
	background: url("../images/inquiry/img_flow01-bg.png") no-repeat 0 0 / 100% 100%;
	color: #000;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 19px;
	line-height: 1;
}

/*
 * 帯の下の外余白は `.pa-form` を前に付けて (0,2,0) にする。テーマの `.page-content__body :is(ul, ol) { margin: 0 0 25px }`（(0,1,1)）に
 * 負けて、帯の下が 36px でなく 25px になっていた（2026-10-06 の下見の走行 2・案内文の上端 453 / 464）.
 */
.pa-form .pa-form-flow {
	margin: 0 auto 36px;
}

.pa-form-flow--step2 {
	background-image: url("../images/inquiry/img_flow02-bg.png");
}

.pa-form-flow--step3 {
	background-image: url("../images/inquiry/img_flow03-bg.png");
}

.pa-form-flow__step {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27.273%;
	margin: 0;
	padding-top: 2px;
	white-space: nowrap;
	text-align: center;
}

.pa-form-flow__step--1 {
	left: 1.773%;
}

.pa-form-flow__step--2 {
	left: 35.545%;
}

.pa-form-flow__step--3 {
	left: 70%;
}

.pa-form-flow__step--current {
	color: #fff;
}

.pa-form-flow__br {
	display: none;
}

/*
 * 確認表示の中の規則は `.pa-form .pa-form-confirm` を前に付けて (0,3,0) にする。`p`・`ul`・`ol` の既定の規則（行の高さ 1.5・
 * 左寄せ・外余白）に負けていた（2026-10-06 の下見の走行 1 で、案内文の行の高さが 18px × 1.5、ボタンが左に寄った）.
 *
 * - 帯の塊: パソコン版は `p.page_flow_img` の中に絵（68px）と行の下がりが残り 74px、下の外余白 30px（`page_inquiry.css`）。
 *   dev は絵だけの箱なので、下の外余白を 36px にする。携帯版は絵の下がりが無く、下の外余白も 0
 * - 案内文: パソコン版は `#request .form_text`（字 18px・行の高さ 166%・上の内余白 35px）。携帯版は `padding: 20px 6.25%`・
 *   字 12px・行の高さ 145% で、画面いっぱいに広がる
 * - ボタン: パソコン版は `input[type="image"]` に `body:first-of-type input { padding: 0.1em }`（約 1.3px）が当たり、箱が
 *   252.6 × 62.6 になる。dev も内余白を 1.3px 持たせ、背景の絵は内余白の内側に敷く。携帯版は器 `.text_area` の左右の
 *   内余白 6.25% の内側に、幅 49.464% のボタンを左右に寄せる。字の位置は絵の中の字の中心（横は戻る 143.5 / 277・送信 129.5 / 277。
 *   縦は上端から戻る 29.6・送信 30.5（幅 162.3 のとき）で、上の内余白で下げる。2026-10-06 の下見の走行 5）
 * - 注意書き: パソコン版は `.note`（字 12px・行の高さ 183%・左 12px のぶら下げ）。携帯版は `.text_area .ind2`（字 11px）
 */
.pa-form .pa-form-confirm .pa-form-confirm__lead {
	margin: 0;
	padding: 35px 0 0;
	font-size: 18px;
	line-height: 1.66;
}

.pa-form .pa-form-confirm .pa-form-confirm__table {
	margin-top: 0;
}

/*
 * 法人からの問い合わせの案内文（パソコン版）。移行元の `corporation_conf.php` は器が `#reservation`（35 行）で、
 * `#request .form_text`（`page_inquiry.css` 379〜384 行・上 35px・字 18px）でなく `#reservation .form_text`（495〜500 行）が当たる。
 * 上の内余白なし・字 15px・行の高さ 166%・下の外余白 25px（2026-10-06 の下見の走行 3・表の上端 529.4 / 514.4）。
 * 携帯版の `sp_corporation_conf.php` は `#request` なので、お問い合わせと同じ.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="houjin"] .pa-form-confirm .pa-form-confirm__lead {
		margin-bottom: 25px;
		padding: 0;
		font-size: 15px;
		line-height: 1.66;
	}
}

/*
 * 紹介経由の来店予約 3 本（Task #9559）の確認表示（パソコン版）.
 *
 * - 案内文: 会員紹介 `intro/reservation_intro_conf.php` 44 行とご紹介 `reservation_conf.php` の `p.form_text` は、器が
 *   `#reservation` なので、法人と同じ `#reservation .form_text`（`page_inquiry.css` 495〜500 行）が当たる
 * - 帯: ご紹介の確認画面は頭を持たず、帯の塊が `p.page_flow_img.mt30`（上の外余白 30px）から始まる
 * - 来店希望日時の 3 行: 希望ごとの `p.mb15`（下の外余白 15px・最後の行は無し）。字は `table td p { font-size: 16px }`（223 行）。
 *   ご紹介の札は `table td p span.ico01` / `.ico02`（117〜140 行・内余白 4px・右の外余白 10px・字 12px・行の高さ 100%）
 */
@media (min-width: 750px) {
	.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation3"]) .pa-form-confirm .pa-form-confirm__lead {
		margin-bottom: 25px;
		padding: 0;
		font-size: 15px;
		line-height: 1.66;
	}

	.pa-form[data-pa-form="reservation3"] .pa-form-confirm > .pa-form-flow {
		margin-top: 30px;
	}

	/*
	 * ご紹介の入力画面の帯は、無料個別相談会の絵（移行元 `p.mb70`）の下 76px。移行元の器は絵の下に字の下がりの 6px を持ち、
	 * その下に 70px を空ける。dev の器（`.pa-raiten-intro__check`）は絵と同じ高さで下 70px なので、帯の上の外余白 76px を
	 * 重ねて（外余白は大きいほうになる）同じ位置にする（下見の走行 r3 で dev 1133・移行元 1139）.
	 */
	.pa-form[data-pa-form="reservation3"] .pa-raiten-intro > .pa-form-flow {
		margin-top: 76px;
	}
}

/*
 * 社員紹介（`reservation_intro_02`・Task #9559）のパソコン幅の帯と確認表示。移行元 `intro/reservation_intro_02.php` と
 * `intro/reservation_intro_02_conf.php` は、器 `#reservation`（943px）の中の 840px の列に組み、帯の絵（1100×68）も
 * 840px に縮めて置く（高さ 51.9・下見の走行 r3 の実測）。入力の表（`.pa-form-table`・3097 行）と同じ列に、確認表示も置く.
 *
 * - 帯は絵と同じ比（1100 / 68）で縮め、字の大きさと上の内余白も同じ倍率にする（`cqw` は帯そのものを基準にする）。
 *   🚨 `cqw` は、`container-type` を持つ要素そのものの値では、その要素でなく祖先の器（無ければ画面）を基準にする。
 *   字の大きさを帯（`.pa-form-flow`）に置くと画面幅の 19/1100 になり、1440px で 24.9px と移行元の倍近くになった
 *   （下見の走行 r4 の絵）。字の大きさは中の段（`.pa-form-flow__step`）に置く
 * - 入力画面の帯の下は、移行元の案内文（`#reservation .form_text`）までの 30px
 * - 確認表示を 840px の列に置くのは 1,280px 以上だけにする（入力の表・3097 行と、頭の器・13697 行と同じ。
 *   意図的変更の台帳の「本サイトの対応幅の区分」で、750〜1,279px は画面の幅に収める）
 * - 確認の表（`.pa-form-confirm__table`）は入力の表と同じ類名 `.pa-form-table` を持つので、入力の表の位置の指定
 *   （幅 840px・左の外余白「外枠の幅と 943px の差の半分 ＋ 32px」）が 840px の確認表示の中でもう一度効き、
 *   左の外余白が -19.5px になる（下見の走行 r4 の絵で、表の罫線の左端が移行元 281 に対し 261）。確認表示の中では打ち消す
 * - 確認の表の値は中央に寄せる。移行元の確認画面は表が `form` の外にあり、`css/mypage_form02.css` の
 *   `form table td { text-align: left }` が当たらず、中央寄せを受け継ぐ（r4 の絵で値の字の中心が升の中身の中心 812 と合う）。
 *   来店希望日時の 3 行（`p`）は左寄せのまま（同じ絵で升の中身の左端 505 にそろう）
 */
@media (min-width: 1280px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm {
		width: 840px;
		margin-left: calc((100% - 943px) / 2 + 32px);
	}

	/* 確認表示の頭は入力画面と同じ器（`.pa-raiten-intro--intro02`・840px と左の外余白）を使う。確認表示が既にその列に在るので打ち消す. */
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-raiten-intro--intro02 {
		width: auto;
		margin-left: 0;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-table {
		width: 100%;
		margin-left: 0;
	}
}

/*
 * 社員紹介と会員紹介の確認表示の残りの寸法（Task #9559・下見の走行 r5 の計算済みの値・`pa-verify-assets/A/9559-下見-r5-1007/結果.json` の
 * `記録だけ_確認画面の計算値`）.
 *
 * | 幅 | 部品 | 移行元 | dev（直す前） |
 * |---|---|---|---|
 * | 社員紹介 1440 | 頭の上端 | 139 | 132 |
 * | 社員紹介 1440 | 帯の下の外余白 | 30（`.page_flow_img`） | 36 |
 * | 社員紹介 1440 | 案内文（`p.paddingtb10`） | 字 13px・行送り 26px・上下 10px（高さ 46） | 字 18px・上 35px（高さ 64.9） |
 * | 社員紹介 1440 | 値の升の行送り | 19.696px（`body` の 1.231 を受け継ぐ） | 24px |
 * | 社員紹介 1440 | 来店希望日時の 1 行の行送り | 32px | 24px |
 * | 社員紹介 1440 | ボタン | 250 × 60（絵そのまま） | 252.6 × 62.6 |
 * | 社員紹介 375 | 頭の上端 | 90 | 85 |
 * | 社員紹介 375 | 行送り（見出し・値・札・日時の 1 行） | 23.4px（13px × 1.8 を受け継ぐ。行は 91.8・日時の行は 168.6） | normal（行 89・日時の行 165） |
 * | 会員紹介 375 | 来店希望日時の 1 行の行送り | 20px（日時の行 156） | 23px（165） |
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__head {
		margin-top: 7px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm > .pa-form-flow {
		margin-bottom: 30px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__lead {
		padding: 10px 0;
		font-size: 13px;
		line-height: 26px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__table td {
		line-height: 1.231;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm__table td .pa-form-confirm__line {
		line-height: 32px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__back,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__send {
		width: 250px;
		height: 60px;
		padding: 0;
	}
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__head {
		margin-top: 5px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__table :is(th, td),
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__table th .pa-badge,
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__table .pa-form-confirm__line {
		line-height: 23.4px;
	}

	.pa-form[data-pa-form="reservation_intro"] .pa-form-confirm .pa-form-confirm__table .pa-form-confirm__line {
		line-height: 20px;
	}
}

/*
 * 社員紹介の確認表示の、ボタンの下の間と字の位置（Task #9705・2026-10-10 の実測 `pa-verify-assets/A/9705-確認の残差-1010/`）.
 *
 * 移行元の確認画面（`intro/reservation_intro_02_conf.php`・`sp_reservation_intro_02_conf.php`）の「戻る」「送信」は、
 * それぞれ別の `form` の中の `input type="image"`（絵）である.
 *
 * | 幅 | 移行元の作り | 移行元 | dev（直す前） |
 * |---|---|---|---|
 * | 1440 | 絵は行の中に `vertical-align: baseline` で置かれ、字 13px の基準線より下の空き 4px が絵の下に付く（`li` と `ul.btn_area` の高さ 64）。`ul` の下の外余白は 35px | ボタンの下端から注意書きまで 39 | 35 |
 * | 1440 | 絵の中の字は真ん中より左にある（字の中心は、真ん中の 125 に対し「戻る」123・「送信」123.5） | 字の中心 562.5・835 | 564.5・836.5 |
 * | 375 | 絵は `vertical-align: middle` で、`li` の高さは絵と同じ。`ul.btn_area` の下の外余白は 20px | ボタンの下端から注意書きまで 20 | 25.9 |
 *
 * dev のボタンは字を持つ `button` で、書体と字の大きさが移行元と違うため、基準線の空きを同じ作りで作っても 4px にならない。
 * 空きは `ul` の下の外余白（35px ＋ 4px）として写し、字は右の内余白で左へ寄せる。全フォーム共通の値（1440 の 35px・375 の 25.9px）は
 * ほかのフォームで移行元と合っているので変えず、社員紹介だけに当てる.
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__buttons {
		margin-bottom: 39px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__back {
		padding-right: 4px;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__send {
		padding-right: 3px;
	}
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm .pa-form-confirm__buttons {
		margin-bottom: 20px;
	}
}

@media (min-width: 750px) {
	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm__table td {
		text-align: center;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-confirm__table td .pa-form-confirm__line {
		text-align: left;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-flow {
		height: auto;
		aspect-ratio: 1100 / 68;
		container-type: inline-size;
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-form-flow .pa-form-flow__step {
		padding-top: calc(100cqw * 2 / 1100);
		font-size: calc(100cqw * 19 / 1100);
	}

	.pa-form[data-pa-form="reservation_intro_02"] .pa-raiten-intro > .pa-form-flow {
		margin-bottom: 30px;
	}
}

/*
 * 会員紹介（`reservation_intro`・Task #9559）の確認表示の頭（大見出し「来店予約」・副見出し「来店予約フォーム」の絵）。
 * 移行元の確認画面 `intro/reservation_intro_conf.php` と携帯版の値（下見の走行 r3 の実測）を、お問い合わせ（7476〜7530 行）と同じ形で当てる.
 *
 * | 幅 | 移行元 | dev（直す前） |
 * |---|---|---|
 * | パソコン | 大見出しの上端 120・下 50・副見出しの箱 35 と下 30（帯の上端 288） | 外枠の上の内余白 48 が残り 168、下 25・下 25 |
 * | 携帯 | 絵は画面の幅いっぱい（375×50.4・375×22.8）、下 20・下 20 | 外枠の左右 16 の内側で 343 幅、下 18・下 18 |
 *
 * 外枠（`.pa-form-frame__wrapper`）はフォーム 10 種が使うので触らず、頭の外余白で打ち消す。テーマの
 * `:has(> :is(img, picture):only-child)`（0,2,2）に勝つよう `[data-pa-form]` を足す.
 */
@media (min-width: 750px) {
	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-confirm__head {
		margin-top: -48px;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-confirm__head .pa-form-intro__heading {
		margin-bottom: 50px;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-confirm__head .pa-form-intro__subheading {
		margin-bottom: 30px;
		font-size: 13px;
		line-height: normal;
	}
}

@media (max-width: 749px) {
	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-confirm__head {
		margin: 0 -16px;
	}

	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-confirm__head .pa-form-intro__heading,
	.pa-form--table[data-pa-form="reservation_intro"] .pa-form-confirm__head .pa-form-intro__subheading {
		margin-bottom: 20px;
	}
}

.pa-form .pa-form-confirm .pa-form-confirm__line {
	margin: 0 0 15px;
	font-size: 16px;
}

.pa-form .pa-form-confirm .pa-form-confirm__line:last-child {
	margin-bottom: 0;
}

.pa-form .pa-form-confirm .pa-form-confirm__line .pa-badge {
	margin-right: 10px;
	padding: 4px;
	font-size: 12px;
	line-height: 1;
	vertical-align: text-bottom;
}

/*
 * 確認の行の高さを決める規則（Task #9557・#9558）。移行元の確認画面の規則を、確認の行専用に写す.
 *
 * - パソコン版は入力画面と同じ `page_inquiry.css` 79〜150 行（無印の行 30px・30px と罫線 1px、`half01` 30px・15px、`half02` 15px・30px、
 *   `half03` 15px・15px）。dev の入力画面の規則（`.pa-form-table__row--pair-*`）がそのまま合うので、ここでは足さない。
 *   行の類名だけ、移行元の確認画面に合わせる（`CONFIRM_ROW_CLASSES`）
 * - 携帯版は下の `@media (max-width: 749px)` の節。移行元は `dl` > `dt` / `dd`（`sp/css/style.css` 1577〜1619 行）で、入力画面の表と別の作り
 */

.pa-form-confirm__table th .pa-form-confirm__br {
	display: inline;
}

/*
 * ご紹介プログラム（Task #9561）の確認表示。移行元の `intro/mypageform_conf.php` の e-mail の値の下の注記（`p.indent-1.gray.fs12`。
 * `css/mypage_form01.css` の `p.indent-1` は 1 字のぶら下げ、`css/style.css` の `.fs12` は字 12px。`.gray` は規則が無く色は親のまま）と、
 * 携帯版で題の字を持たない「特典」の行（`sp_mypageform_conf.php` は札だけ）.
 */
.pa-form .pa-form-confirm .pa-form-confirm__value-note {
	margin: 0;
	padding-left: 1em;
	font-size: 12px;
	text-indent: -1em;
}

/* 携帯幅だけ出す行の題の字（`PA_Forms_Embed::CONFIRM_ROW_SP_HEADINGS`・Task #9561）。パソコン幅では隠す. */
.pa-form .pa-form-confirm .pa-form-confirm__label-sp {
	display: none;
}

@media (max-width: 749px) {
	.pa-form .pa-form-confirm .pa-form-confirm__value-note {
		font-size: inherit;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__label-pc {
		display: none;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__label-sp {
		display: inline;
	}
}

/*
 * 携帯幅だけ出す確認表示の頭（Task #9560・パーティー申込）。移行元のパソコン版の確認画面 `event_conf.php` は題名と見出しを
 * 注釈の中に置き、携帯版 `sp_event_conf.php` だけが出す.
 */
@media (min-width: 750px) {
	.pa-form .pa-form-confirm .pa-form-confirm__head--sp {
		display: none;
	}
}

/*
 * パーティー申込の確認表示の案内文と、完了画面の帯（Task #9560）。下見の走行 r1（`pa-verify-assets/A/9560-下見-1007/`）の実測と、
 * 移行元の CSS の値.
 *
 * - パソコン版の案内文は `#event .form_text`（`css/page_event.css`・上の内余白 0・下 25px・字 15px・行送り 166%）。既定の
 *   上 35px・字 18px のままだと、器の上の内余白を 63px に直したとき（`form-frame.css`）表が 15 下にずれる
 * - 携帯版の案内文は `#event .form_text`（`sp/css/style.css`・上下 12px・字 11px・行送り 145%）。既定の上下 20px・字 12px の
 *   ままだと、箱が 57px（移行元 40px）で、表が 17 下にずれる
 * - パソコン版の完了画面は、`#contents` の上の内余白 63px の先頭に帯（`p.page_flow_img`・下の外余白 30px と行の下がり）を置き、
 *   案内文の箱の上の罫線は帯の下端から 36px 下（移行元 帯 183・罫線 287）。dev は帯がヘッダーの直下（120）にあった
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="event"] .pa-form-confirm .pa-form-confirm__lead {
		padding: 0 0 25px;
		font-size: 15px;
		line-height: 1.66;
	}

	.pa-thanks-body--event .pa-thanks-body__flow {
		margin: 63px 0 36px;
	}

	/*
	 * 確認表示の注意書き 2 つ（Task #9708）。移行元の `form/view/event_conf.php` は `css/page_event.css` を読み、`.note`
	 * （12px・行送り 183%・字下げ −12px）を持つ `css/page_inquiry.css` を読まない。`page_event.css` の `.note` は
	 * `.box_privacy_inner .note` だけで当たらないので、`p.note` は body の 13px・行送りの既定値・字下げなしになる.
	 * 下の全フォーム共通の `.pa-form-confirm__note`（`page_inquiry.css` の値）のままだと、1 つ目の箱が 3.9px 高く、
	 * 2 つ目が 3.9px 下にずれる。値は #9560 の下見 r2 の記録（822eda470）の絵から数えた行の間隔 20px.
	 */
	.pa-form[data-pa-form="event"] .pa-form-confirm .pa-form-confirm__note {
		margin-left: 0;
		font-size: 13px;
		line-height: 20px;
		text-indent: 0;
	}
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="event"] .pa-form-confirm .pa-form-confirm__lead {
		padding: 12px 6.25vw;
		font-size: 11px;
		line-height: 1.45;
	}
}

.pa-form .pa-form-confirm .pa-form-confirm__buttons {
	margin: 0 0 35px;
	padding: 0;
	list-style: none;
	letter-spacing: -0.4em;
	text-align: center;
}

.pa-form .pa-form-confirm .pa-form-confirm__button-item {
	display: inline-block;
	width: 250px;
	margin: 0 11px;
	padding: 0;
	letter-spacing: normal;
	vertical-align: top;
}

.pa-form .pa-form-confirm .pa-form-confirm__back,
.pa-form .pa-form-confirm .pa-form-confirm__send {
	display: block;
	box-sizing: border-box;
	width: 252.6px;
	height: 62.6px;
	margin: 0;
	padding: 1.3px;
	border: 0;
	border-radius: 0;
	background: #ccc url("../images/inquiry/btn_back-bg.png") no-repeat 0 0 / 100% 100%;
	background-clip: content-box;
	background-origin: content-box;
	color: #fff;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 20px;
	line-height: 60px;
	letter-spacing: normal;
	text-align: center;
	cursor: pointer;
}

.pa-form .pa-form-confirm .pa-form-confirm__send {
	background-color: #a3762b;
	background-image: url("../images/inquiry/btn_send-bg.png");
}

.pa-form-confirm__send-sp {
	display: none;
}

.pa-form .pa-form-confirm .pa-form-confirm__note {
	margin: 0 0 0 12px;
	font-size: 12px;
	line-height: 1.83;
	text-indent: -12px;
}

@media (max-width: 749px) {
	/*
	 * 背景の絵は `.pa-form-flow`（(0,1,0)）にだけ置く。`.pa-form .pa-form-flow`（(0,2,0)）に置くと、下の
	 * `.pa-form-flow--step2` の 2 段目の絵に勝ち、確認画面の帯が 1 段目の絵のままになる（PR #9612 のレビューの指摘）.
	 */
	.pa-form-flow {
		background-image: url("../images/inquiry/sp-img_flow01-bg.png");
	}

	.pa-form-flow,
	.pa-form .pa-form-flow {
		width: 100%;
		max-width: none;
		height: auto;
		margin-bottom: 0;
		aspect-ratio: 640 / 124;
		container-type: inline-size;
		font-size: 4.125cqw;
		line-height: 1.29;
	}

	/* 器の左右の内余白 16px の外へ広げる。`max-width: 100%` が残ると幅が 343 に縮む（下見の走行 2）. */
	.pa-form .pa-form-confirm > .pa-form-flow {
		width: auto;
		margin: 0 -16px;
	}

	/*
	 * 紹介経由の来店予約 3 本（Task #9559）の入力画面の帯も、案内の器（`.pa-raiten-intro`）の内余白 16px の外へ広げる。
	 * 移行元の携帯版は全幅（375 で 375×72.7）で、器の中のほかの部品（`__check`・`__online`・`__text`）も `margin: 0 -16px` で
	 * 全幅にしている（下見の走行 r3 で dev が 343×66.5 だった）.
	 */
	.pa-form .pa-raiten-intro > .pa-form-flow {
		width: auto;
		margin: 0 -16px;
	}

	.pa-form-flow--step2 {
		background-image: url("../images/inquiry/sp-img_flow02-bg.png");
	}

	.pa-form-flow--step3 {
		background-image: url("../images/inquiry/sp-img_flow03-bg.png");
	}

	.pa-form-flow__step {
		width: 28.125%;
		padding-top: 0;
	}

	.pa-form-flow__step--1 {
		left: 2.266%;
	}

	.pa-form-flow__step--2 {
		left: 35.781%;
	}

	.pa-form-flow__step--3 {
		left: 69.141%;
	}

	.pa-form-flow__br {
		display: inline;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__lead {
		margin: 0 -16px;
		padding: 20px 6.25vw;
		font-size: 12px;
		line-height: 1.45;
	}

	.pa-form-confirm__table th .pa-form-confirm__br {
		display: none;
	}

	/*
	 * 確認の行（携帯版）。移行元の `sp/css/style.css` を写す.
	 *
	 * - 1577 行 `dl { border-top: 1px solid #888888 }`・1583 行 `dl.last { border-bottom: 1px solid #888888 }`（最後の同意の行）
	 * - 1587 行 `dt { padding: 10px 6.25%; font-size: 15px }`・1616 行 `dd { padding: 10px 6.25%; font-size: 15px }`。行の高さは
	 *   指定が無く `normal`（`common.css` 2 行の `body` も指定なし）
	 * - 1594 行 `dt span.icon` / 1605 行 `dt span.icon02`（字 13px・内余白 2px 5px・右 12px）
	 * - 入力画面の規則は、お問い合わせ（4817・4841・5314 行）と法人（3824・3837 行の既定）で違い、`td` は 16px のまま。
	 *   確認の行はどちらのフォームでも同じ値にするため、`.pa-form .pa-form-confirm` を前に付けて上書きする
	 */
	/*
	 * 表とボタンのあいだ。移行元はボタンの器 `.text_area` の上の内余白 18px（`sp/css/style.css` 1756〜1760 行・
	 * `sp_contact_conf.php` と `sp_corporation_conf.php` の `div.text_area`）。法人は入力画面の規則（5772 行）に入っておらず、
	 * 既定の 40px のままだった（2026-10-06 の下見の走行 4・ボタンの上端 1535.3 / 1514.3）.
	 */
	.pa-form .pa-form-confirm .pa-form-confirm__table {
		margin-bottom: 18px;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__table tr {
		border-top: 1px solid #888888;
		border-bottom: 0;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__table tr:last-child,
	.pa-form .pa-form-confirm .pa-form-confirm__table tr.pa-form-confirm__row--last {
		border-bottom: 1px solid #888888;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__table th,
	.pa-form .pa-form-confirm .pa-form-confirm__table td {
		padding: 10px 6.25%;
		border: 0;
		font-size: 15px;
		line-height: normal;
	}

	/* 既定の `.pa-form .pa-badge` の `vertical-align: text-bottom` を戻す。法人の行が 3px 高くなっていた（下見の走行 3・92 / 89）. */
	.pa-form .pa-form-confirm .pa-form-confirm__table th .pa-badge {
		margin-right: 12px;
		padding: 2px 5px;
		font-size: 13px;
		line-height: normal;
		vertical-align: baseline;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__buttons {
		display: flow-root;
		margin: 0 calc(6.25vw - 16px) 25.9px;
		letter-spacing: normal;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__button-item {
		display: block;
		float: left;
		width: 49.464%;
		margin: 0;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__button-item + .pa-form-confirm__button-item {
		float: right;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__back,
	.pa-form .pa-form-confirm .pa-form-confirm__send {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		padding: 0.5% 0 0 3.6%;
		aspect-ratio: 277 / 100;
		background-image: url("../images/inquiry/sp-btn_back-bg.png");
		font-size: 5.9vw;
		line-height: 1;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__send {
		padding: 1.6% 6.5% 0 0;
		background-image: url("../images/inquiry/sp-btn_send-bg.png");
	}

	.pa-form-confirm__send-pc {
		display: none;
	}

	.pa-form-confirm__send-sp {
		display: inline;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__note {
		margin: 0 calc(6.25vw - 16px) 0 calc(6.25vw - 16px + 12px);
		font-size: 11px;
		line-height: 18.9px;
	}

	/*
	 * 2 つ目の注意書き（`CONFIRM_EXTRA_NOTES`）との間の 15px（Task #9563）。移行元の携帯版の確認画面は 1 つ目の注意書きに
	 * `mb15` を付ける（注意書きを 2 つ持つ携帯版の確認画面 43 本のうち 38 本。`sp_request_conf.php`・`sp_request_tool_ad_conf.php` ほか）.
	 * パソコン版の `p.note` は間を空けないので、携帯幅だけに当てる.
	 */
	.pa-form .pa-form-confirm .pa-form-confirm__note.pa-form-confirm__note--extra {
		margin-top: 15px;
	}

	/*
	 * 来店希望日時の 3 行（携帯版・Task #9559）。移行元の `sp_reservation_conf.php` ほかは 3 行とも `p.mb10.kibou` で、
	 * 最後の行にも下の外余白 10px が残る。字は `dd` と同じ 15px。ご紹介の札は `dt span.icon` / `.icon02` と同じ組み.
	 */
	.pa-form .pa-form-confirm .pa-form-confirm__line,
	.pa-form .pa-form-confirm .pa-form-confirm__line:last-child {
		margin: 0 0 10px;
		font-size: 15px;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__line .pa-badge {
		margin-right: 12px;
		padding: 2px 5px;
		font-size: 13px;
		line-height: normal;
		vertical-align: baseline;
	}
}

/*
 * 完了画面の送信完了の帯（Task #9601）。`PA_Forms_Thanks_Body::render_flow_band()` が、器（`div.pa-thanks-body__flow`・
 * 携帯版の型紙しか持たない婚活 EQ 診断の LP 10 本は `div.pa-thanks-eqlp-sp__flow`）の中に 3 段目の帯を置く.
 *
 * - 帯の外余白は 0 にし、器の規則（`.pa-thanks-body .pa-thanks-body__flow` の下 30px・冊子と婚活 EQ 診断の LP は 36px・
 *   携帯幅は 0）に任せる。器が絵を持っていたときと同じ高さ（パソコン版 68px・携帯版は幅 × 124 / 640）になる
 * - `pa-form-flow--sp` は、どの幅でも携帯版の帯にする（`@media (max-width: 749px)` の節と同じ値）
 */
.pa-thanks-body .pa-thanks-body__flow .pa-form-flow,
.pa-thanks-eqlp-sp .pa-thanks-eqlp-sp__flow .pa-form-flow {
	margin: 0 auto;
}

.pa-form-flow.pa-form-flow--sp {
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 640 / 124;
	container-type: inline-size;
	background-image: url("../images/inquiry/sp-img_flow01-bg.png");
	font-size: 4.125cqw;
	line-height: 1.29;
}

.pa-form-flow.pa-form-flow--sp.pa-form-flow--step2 {
	background-image: url("../images/inquiry/sp-img_flow02-bg.png");
}

.pa-form-flow.pa-form-flow--sp.pa-form-flow--step3 {
	background-image: url("../images/inquiry/sp-img_flow03-bg.png");
}

.pa-form-flow--sp .pa-form-flow__step {
	width: 28.125%;
	padding-top: 0;
}

.pa-form-flow--sp .pa-form-flow__step--1 {
	left: 2.266%;
}

.pa-form-flow--sp .pa-form-flow__step--2 {
	left: 35.781%;
}

.pa-form-flow--sp .pa-form-flow__step--3 {
	left: 69.141%;
}

.pa-form-flow--sp .pa-form-flow__br {
	display: inline;
}

/*
 * どの幅でも携帯版の帯（`pa-form-flow--sp`）の字の縦の位置。移行元の携帯版の絵は、1・2 段目の字が 2 行（字の箱の縦の中心が絵の上から 62.5）、
 * 3 段目が 1 行（60.5）で、中心が違う。`li` は縦の中央に寄せるので、絵の 1px（`100cqw / 640`）を単位に内余白でずらす
 * （2026-10-06 の下見の走行 2・幅 1440 で 1・2 段目が 1.4px 上、3 段目が 0.9px 下にあった）。
 * 類名を 4 つ重ねて、婚活 EQ 診断の LP の器が `li` に当てる打ち消し（`.pa-thanks-body.pa-thanks-eqlp-sp :is(…, li)`・(0,3,1)）より強くする.
 */
.pa-form-flow.pa-form-flow--sp .pa-form-flow__step.pa-form-flow__step--1,
.pa-form-flow.pa-form-flow--sp .pa-form-flow__step.pa-form-flow__step--2 {
	padding-top: calc(100cqw / 640 * 2.4);
}

.pa-form-flow.pa-form-flow--sp .pa-form-flow__step.pa-form-flow__step--3 {
	padding-bottom: calc(100cqw / 640 * 1.5);
}

/* 婚活 EQ 診断の LP の器は `li` の色を `inherit` に戻す（上と同じ打ち消し）。今の段の字を白に保つ. */
.pa-thanks-body.pa-thanks-eqlp-sp .pa-form-flow .pa-form-flow__step--current {
	color: #fff;
}

@media (min-width: 750px) {
	/*
	 * 送信完了の帯の塊（パソコン版）。移行元の `p.page_flow_img` は、絵 68px の下に行の余り 6px が残って 74px になり、
	 * 下の外余白 30px と合わせて次の区画が帯の上端から 104px にある（下見の走行 2: お問い合わせ・法人は 98px だった）.
	 * `request_lp`・冊子の広告フォームは `p.page_flow_img mt30` で、上にも 30px ある（`request_lp_thanks.php` 83 行・
	 * `request_tool_ad_thanks.php` 100 行。走行 2 で帯の上端が 120 / 150 だった）.
	 */
	.pa-thanks-body--inquiry .pa-thanks-body__flow {
		margin-bottom: 36px;
	}

	.pa-thanks-body--book .pa-thanks-body__flow {
		margin-top: 30px;
	}
}

/* --------------------------------------------------------------------------
 * 婚活 EQ 診断の LP 15 本の確認表示（Task #9562・`PA_Forms_Embed::CONFIRM_QUESTION_FORMS`）
 *
 * 移行元の確認画面はパソコン版 `form/view/eq_conf.php`・携帯版 `sp_eq_conf.php` を 15 本で共有する。
 *
 * - 確認のあいだは、`<form>` の外に在る LP の頭（`PA_Forms_Ad_Lp_Head::html_for()`）も隠す。移行元の確認画面は LP の頭を持たない
 *   （`<form>` の中の入力は、確認の段の共通の規則 `.pa-form[data-pa-step="confirm"] > form > :not(.pa-form-confirm)` が隠す）
 * - 設問の答えはパソコン版 `css/page_inquiry.css` 626〜642 行（`#analysis dt`・`dd`）、携帯版 `sp/css/style.css` 2920〜2984 行
 *   （`#analysis .box_faq`）の値に合わせる
 * - 設問の上の帯の 2 段目と案内文（`pa-form-confirm__top`）は、パソコン版だけが持つ（`eq_conf.php` 58〜59 行）。携帯版は題と惹句と
 *   案内文（`pa-form-confirm__head--eq`・`sp_eq_conf.php` 59〜62 行）を置く
 * -------------------------------------------------------------------------- */
.pa-form[data-pa-step="confirm"][data-pa-confirm-layout="mixed"] > :not(form):not(.pa-form-sending) {
	display: none;
}

.pa-form .pa-form-confirm .pa-form-confirm__questions {
	margin: 0;
	padding: 0;
	text-align: left;
}

.pa-form .pa-form-confirm .pa-form-confirm__questions dt {
	margin: 0 0 15px;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.05em;
}

.pa-form .pa-form-confirm .pa-form-confirm__qno {
	color: #e1200f;
}

.pa-form .pa-form-confirm .pa-form-confirm__questions dd {
	margin: 0 0 25px;
	padding: 20px;
	background: #f5f5f5;
	font-size: 14px;
	line-height: 100%;
}

@media (max-width: 749px) {

	.pa-form .pa-form-confirm .pa-form-confirm__top {
		display: none;
	}

	/*
	 * LP は入力画面の題を隠す（`.pa-form:has(> .pa-eq-lp) .pa-eq-intro__heading`）。確認表示の頭の題は、移行元の
	 * `sp_eq_conf.php` 59 行（`main_ttl.gif`）と同じく出す（下見 r2・2026-10-07 で題が隠れていた）.
	 */
	.pa-form .pa-form-confirm .pa-form-confirm__head--eq .pa-eq-intro__heading {
		display: block;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__sub-copy {
		margin: 0 0 20px;
		font-size: 14px;
		line-height: 135%;
		text-align: center;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__questions dt {
		display: flex;
		margin: 0 0 15px;
		font-size: 14px;
		letter-spacing: normal;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__qno {
		flex: 0 0 auto;
		color: #f10000;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__qtext {
		flex: 1 1 auto;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__questions dd {
		margin: 0 0 30px;
		padding: 0 0 0 30px;
		background: none;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
 * オンライン資料請求 `request_online` の完了画面の、個別相談の案内と押しボタン（ユーザー決定 D812・Task #9712）
 *
 * 移行元（`form/view/request_online_thanks.php`）は、PICK UP CONTENTS・個別相談の案内（`#guide01.c-thx`）・来店予約の押しボタンを、
 * 罫線の箱 `#complete .thanks_box`（字 15px・行の高さ 166%・下の内余白 40px・下の罫線・下の外余白 35px。`css/page_inquiry.css`
 * 705〜713 行）の中に置く。標準の資料請求（`request_thanks.php`）は、案内を箱の外の 2 つ目の `.form-inner`（字 16px・行の高さ 1.6・
 * 上 100px・下 70px）に置くので、上の「資料請求」の節はその値を持つ。オンラインは婚活 EQ 診断（同じく箱の中）と同じ値へ戻す.
 *
 * - 案内の上は PICK UP の下の外余白 90px（`.c-pick`）だけにする（標準の 100px と重ねない）
 * - 字は箱の 15px、行の高さは箱の 166%（15px の 166% の 24.9px を子が受け継ぐ。「個別相談の流れ」の見出しも 24.9px）
 * - 案内の文と段の文は 15px（土台の値。段の文の下の空きも土台の 7.91px）
 * - 押しボタンは外余白 30px・50px（`#complete .thanks_box .btn_waribiki`）。上の 30px は流れの区画の下の 90px と重なる
 * - 箱の下の内余白 40px・罫線・外余白 35px は、案内の器の下へ写す
 *
 * 🚨 **この節はファイルの末尾に置き、案内の器と押しボタンは `.pa-thanks-body--request.pa-thanks-body--request-online` で書く。**
 * 上の「資料請求」の節は `.pa-thanks-body--request:not(.pa-thanks-body--request-ad) …` で、`:not()` の中の類名も数えるので
 * 類名 3 つ分になる。類名 2 つの指定は、後ろに書いても負ける（2026-10-08 の下見の走行 2 で、案内の上の 100px と押しボタンの
 * 外余白 0 が残っていた）。類名をそろえ、後ろに書いた方を勝たせる.
 * 2026-10-08 の下見（`pa-verify-assets/A/9712-下見-1008/走行1/`・`走行2/`）で、案内の上端が 9.5px 下・押しボタンが 14.7px 下だった.
 * -------------------------------------------------------------------------- */
@media (min-width: 750px) {

	.pa-thanks-body--request.pa-thanks-body--request-online .pa-thanks-body__guide {
		margin-top: 0;
		margin-bottom: 35px;
		padding-bottom: 40px;
		border-bottom: 1px solid #cccccc;
		font-size: 15px;
		line-height: 24.9px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__guide-flow-heading--pc {
		line-height: 24.9px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__guide-text p {
		font-size: 15px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__guide-flow-item-text {
		margin-top: 7.91px;
		font-size: 15px;
	}

	.pa-thanks-body--request.pa-thanks-body--request-online .pa-thanks-body__guide .pa-thanks-body__reserve {
		margin: 30px 0 50px;
	}

	/*
	 * 写真の段落と押しボタンの段落は、箱の行の高さ 24.9px を受け継ぐ（絵の下の行の隙間が 7.9px になる）。dev は段落の規則の
	 * 22.5px が当たり、走行 3 で写真の区画が 1.4px 低く、押しボタンが 1.9px 上だった。TOP へ戻るは移行元の computed が 24px.
	 */
	.pa-thanks-body--request-online .pa-thanks-body__guide-photo,
	.pa-thanks-body--request.pa-thanks-body--request-online .pa-thanks-body__guide .pa-thanks-body__reserve {
		line-height: 24.9px;
	}

	.pa-thanks-body--request-online .pa-thanks-body__back--pc {
		line-height: 24px;
	}
}

/*
 * 携帯幅の案内文と TOP へ戻るは 13px。下見の走行 2（2026-10-08）で、移行元の携帯版の `.lead-area .txt` の computed が 13px・行の高さ 20.8px
 * だった（規則の出どころは特定していない）。TOP へ戻る（`p.back_top`）も、走行 3 の computed が 13px・行の高さ 20.8px だった.
 */
@media (max-width: 749px) {

	.pa-thanks-body--request-online .pa-thanks-body__lead-text {
		font-size: 13px;
		line-height: 1.6;
	}

	.pa-thanks-body--request-online .pa-thanks-body__back--sp {
		font-size: 13px;
		line-height: 1.6;
	}
}

/*
 * ご紹介プログラム（`shoukai`）の確認表示（Task #9710）。移行元の確認画面 `form/view/intro/mypageform_conf.php`（携帯は
 * `intro/sp_mypageform_conf.php`）の計算値を、手元のコピーで測った値（#9710 のコメント）に合わせる.
 *
 * - パソコン版は `css/mypage_form01.css` の `table th { font-size: 15px !important; line-height: 1.4 }` の後に `css/page_inquiry.css` を読み、
 *   th の行送りは後の `120%`（18px）になる。td は `page_inquiry.css` の 16px のまま、行送りは `css/mypage_common_new.css` の
 *   `body { font: 13px/1.231 … }` を受け継ぐ（19.696px）。寄せは `css/base_old.css` の `body { text-align: center }` を受け継ぐ
 * - パソコン版の案内文は `p.paddingtb10`（上下 10px・13px・行送り 26px）。器 `.maintextBoxw_setting` の上の内余白 40px の下にある
 * - 携帯版は表が `#form_contents`（内余白 10px）の中で左 10・幅 355。見出しと値は別の行に並び、th と td は 13px・行送り 19.5px・
 *   内余白 5px・縦の中央寄せ。下の罫線は th が #ccc、td が #999 の 1px で、行の上の罫線は無い
 * - 携帯版の案内文は `p.mt30`（13px・行送り 23.4px・外余白 10px）。注意書きの 2 つ目は `mb15` を持たないので、間を空けない
 * - パソコン版の器の上の 40px は、案内文の外余白にすると親の外余白と重なって 25px しか動かない（下見の 1 本目で上端 124・移行元 139）。
 *   確認表示の器（`.pa-form-confirm`）の内余白にする
 * - e-mail の行の注記（移行元 `p.indent-1.gray.fs12`）は、パソコン版が 12px・行送り 24px・左寄せ、携帯版が 13px・行送り 19.5px。
 *   携帯版の札（`span.icon`）も行送り 19.5px で、`normal` のままだと見出しが 0.5px 高くなる（下見の 2 本目の計算値）
 * - ボタンは、パソコン版が絵 `images/inquiry/btn_back_off.gif`・`btn_send_off.gif` の 250×60 で、その下端から注意書きまで 39px。
 *   携帯版は表の下端からボタンまで 28px、ボタンの下端から注意書きまで 20px（下見の 3 本目の実測）。共通の規則（252.6×62.6・下 35px、
 *   携帯は表の下 18px・ボタンの下 25.9px）はほかのフォームの移行元の値なので、ここだけ替える
 */
@media (min-width: 750px) {
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm {
		padding-top: 40px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__lead {
		padding: 10px 0;
		font-size: 13px;
		line-height: 26px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table th {
		font-size: 15px;
		line-height: 18px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table td {
		line-height: 1.231;
		text-align: center;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table td .pa-form-confirm__value-note {
		line-height: 24px;
		text-align: left;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__buttons {
		margin-bottom: 39px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__back,
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__send {
		width: 250px;
		height: 60px;
		padding: 0;
	}
}

@media (max-width: 749px) {
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__lead {
		margin: 20px 4px 10px;
		padding: 0;
		font-size: 13px;
		line-height: 23.4px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table {
		width: calc(100% + 12px);
		margin-right: -6px;
		margin-bottom: 28px;
		margin-left: -6px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__buttons {
		margin-bottom: 20px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table tr,
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table tr:last-child,
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table tr.pa-form-confirm__row--last {
		border-top: 0;
		border-bottom: 0;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table th,
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table td {
		padding: 5px;
		font-size: 13px;
		line-height: 19.5px;
		vertical-align: middle;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table th {
		border-bottom: 1px solid #cccccc;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table td {
		border-bottom: 1px solid #999999;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table th .pa-badge,
	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__table td .pa-form-confirm__value-note {
		line-height: 19.5px;
	}

	.pa-form[data-pa-form="shoukai"] .pa-form-confirm .pa-form-confirm__note.pa-form-confirm__note--extra {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
 * 婚活 EQ 診断の LP 15 本の確認表示の寸法（Task #9715）
 *
 * 移行元のパソコン版 `form/view/eq_conf.php` と携帯版 `sp_eq_conf.php` の値を写す。並びは Task #9562 で戻してあり、ここでは位置と大きさを詰める。
 * 当たり先の類名（`__top`・`__mid`・`__head--eq`・`__questions`）は、LP 15 本（`PA_Forms_Embed::CONFIRM_QUESTION_FORMS`）の確認表示だけが持つ.
 *
 * パソコン幅（`css/page_inquiry.css`）
 * - 設問の上の帯は `p.page_flow_img.mt30` に包まれ、帯の上が 30px 空く
 * - 案内文 `p.form_text02` は字 15px・行の高さ 24.9px・下の内余白 25px（上は 0）。設問の上と個人情報の表の上の 2 か所とも同じ
 *
 * 携帯幅（`sp/css/style.css` 2809〜2995 行の `#analysis`）
 * - 器 `#analysis` は全幅で、上の内余白が 25px。dev は器の左右の内余白 16px の内側に組むので、頭・設問・帯を `margin: 0 -16px` で全幅にする
 * - 頭の上の空きは 42px にする。移行元はヘッダーの下端が 61px、dev は 44px で、題の上端（86px）に合わせると 25px + 17px になる
 * - 案内文 `.sub_copy` は字 12px・行の高さ 140%・内余白 15px 6.25%・下 15px
 * - 設問 `.box_faq` は左右 6.25%・下 30px。番号 `dt` は幅 12.5%、設問の字 `dd` は 87.5%。答え `ul.list_faq.conf li` は左に 30px と 6px、
 *   字 13px で高さ 20px
 * - 個人情報の上の帯 `img_flow02` は全幅、案内文 `.form_text` は字 11px・行の高さ 145%・内余白 12px 6.25%
 * - 入力画面の帯 `img_flow01` も全幅
 * 6.25% は全幅（画面の幅）に対する割合なので、dev では `6.25vw` と書く.
 * -------------------------------------------------------------------------- */
@media (min-width: 750px) {

	.pa-form .pa-form-confirm .pa-form-confirm__top {
		padding-top: 30px;
	}

	.pa-form .pa-form-confirm :is(.pa-form-confirm__top, .pa-form-confirm__mid) .pa-form-confirm__lead {
		padding: 0 0 25px;
		font-size: 15px;
		line-height: 24.9px;
	}
}

@media (max-width: 749px) {

	.pa-form .pa-form-confirm .pa-form-confirm__head--eq {
		margin: 0 -16px;
		padding-top: 42px;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__head--eq .pa-form-confirm__sub-copy {
		margin: 0 0 15px;
		padding: 15px 6.25vw;
		font-size: 12px;
		line-height: 140%;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__questions {
		margin: 0 -16px;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__questions dt {
		padding: 0 6.25vw;
	}

	/*
	 * 設問の字は移行元の `dd`（`float: right; width: 87.5%`）と同じく、右へ寄せて幅 87.5% にする。番号の後ろの「. 」は
	 * 画面側（`pa-forms.js`）が字のまま差し込むので、番号の幅を 12.5% に決めると、その字の幅だけ設問の字が右へずれる（下見の 1 本目）.
	 */
	.pa-form .pa-form-confirm .pa-form-confirm__questions .pa-form-confirm__qtext {
		flex: 0 0 87.5%;
		margin-left: auto;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__questions dd {
		padding: 0 6.25vw 0 calc(6.25vw + 36px);
		font-size: 13px;
		line-height: 20px;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__mid > .pa-form-flow,
	.pa-form.pa-form--eq-lp-sp > form .pa-form-flow {
		width: auto;
		margin-right: -16px;
		margin-left: -16px;
	}

	.pa-form .pa-form-confirm .pa-form-confirm__mid .pa-form-confirm__lead {
		padding: 12px 6.25vw;
		font-size: 11px;
		line-height: 145%;
	}
}