/*
 * 申し込みフォームのページの外枠（Task #1775・Bug #1983）。
 *
 * 読み込むのは対象のページだけである（`inc/form-frame.php` の
 * `pa_form_frame_enqueue()`）。共通の `assets/css/main.css` へ足すと、対象外の固定
 * ページにも配られてしまうため、別ファイルにしてある。対象は `shiryo`・`eq`・
 * `raiten`・`toiawase`・`houjin`・`shoukai`・`otocon` の 7 種（`pa_form_frame_key()`
 * が返す識別子）で、ヘッダー・フッターの中身は識別子ごとに 3〜4 パターンに分かれる。
 * 各パターンの実測元は `header-form.php` / `footer-form.php` のファイル冒頭コメントと
 * Bug #1983 の実測補正コメントを参照。
 *
 * `shiryo`（資料請求）の値の写し元は `legacy/www.p-a.jp/public/request/style.css`
 * （新系統の見た目の定義）である。**このファイルは圧縮済みで全体が 1 行のため、行番号
 * では示せない。** 下では規則の名前（`.form-top` 等）で示す。
 *
 * `eq`・`raiten`・`toiawase`・`houjin` の値の写し元は、共通ヘッダー・フッターの CSS
 * （`/css/import.css` が読み込む `common.css` / `style.css`）である。こちらは圧縮
 * されておらず、行番号で示せる。
 *
 * `shoukai`（ご紹介プログラム）の値の写し元は `/css/mypage_common_new.css` である。
 *
 * ------------------------------------------------------------------
 * em で書かず px で書いた理由
 * ------------------------------------------------------------------
 * 移行元は `body, html { font-size: 16px }` を置いたうえで、外枠の余白を `1em`・`3em`・
 * `2em` のような相対値で書いている。このテーマの本文の基準は 13px（`main.css` の
 * `--pa-font-size-base`）で 16px ではないため、相対値をそのまま写すと実寸が変わる。
 * そこで **移行元を 16px 基準で換算した実寸（px）** を書く。各規則に換算前の値を
 * 添えてある。
 *
 * 器（`.pa-form-frame__wrapper`）に `font-size: 16px` を置いて相対値を活かす形は
 * 採らない。その指定は中のフォームの寸法まで一緒に動かすが、フォームの中身の見た目は
 * 別の Issue（#1774）の担当範囲だからである。
 *
 * ------------------------------------------------------------------
 * 行の高さと画像の寸法を明示する理由
 * ------------------------------------------------------------------
 * 移行元は見出しにも著作権表記にも行の高さを指定しておらず、ブラウザ既定（normal）で
 * 描かれる。このテーマは `main.css` が `h1〜h6` と `body` に 1.5 を当てるため、指定を
 * 戻さないと縦に伸びる。同じ理由で、`main.css` の `img { height: auto }` が移行元の
 * `height` 属性を打ち消すため、画像 2 点の寸法も CSS 側で明示する。
 */

/* --- ヘッダー（移行元 .form-top）---
   移行元: padding:1em; border-bottom:1px solid #ddd; display:grid; place-content:center */
.pa-form-frame__top {
	padding: 16px; /* 移行元の 1em を 16px 基準で換算 */
	border-bottom: 1px solid #ddd;
	display: grid;
	place-content: center;
}

/* ロゴ画像。移行元は width="175" height="31" の属性で寸法を決めている
   （legacy/www.p-a.jp/public/form/view/request.php の 37 行）。 */
.pa-form-frame__logo {
	width: 175px;
	height: 31px;
}

/* --- ヘッダー最上部の帯（移行元 `#header #description`。Bug #2548）---
   資料請求の完了画面（`/form/request/thanks/`）だけが持つ。ほかの 6 種は
   サイト共通ヘッダーの帯（`.site-header__page-name`）を使うか、移行元に帯が
   無い（判定は `inc/form-frame.php` の `pa_form_frame_header_band_text()`）。

   既定で消しておくのは、**移行元のスマートフォン版がこの帯を持たない**ためで
   ある。2026-09-08 10:45 に配信中の `https://www.p-a.jp/sp/form/eq/` を携帯の
   名乗りで取得して数え、`id="description"` が **0 件**（引き出しメニューの
   `drawer` は 9 件）であることを確かめた。手元の写し
   （`legacy/www.p-a.jp/public/sp/form/view/eq.php`）はこの帯を持つが、
   **引き出しメニューを持たない古い版**なので判定には使えない。

   サイト共通の帯（main.css の `.site-header__page-name`）も同じ理由で
   749px 以下では消えている。扱いをそろえている。 */
.pa-form-frame__band {
	display: none;
}

/* 値は移行元 `#header #description`（`public/css/style.css` 495〜504 行）の
   `padding: 15px 0 0 50px` / `font-size: 11px` / `font-weight: normal` /
   `line-height: 120%` の写しである。高さ 40px は器の外側の高さで、移行元は
   内側の高さ 25px と上の内余白 15px で同じ 40px を作っていた（このテーマは
   box-sizing: border-box なので内余白を含めて 40px と書く）。

   同じ値を main.css の `.site-header__page-name` も持つ。**片方だけを直すと
   フォームの完了画面と他のページで帯の見た目がずれる**ので、直すときは
   両方をそろえること. */
@media (min-width: 750px) {
	.pa-form-frame__band {
		display: block;

		/* 移行元の `#description` は `float: left` で中身の幅まで縮んでいた
		   （実測: `/form/request/thanks/` の帯は 380 × 40px）。ここで float を
		   使わないのは、下のロゴのヘッダーへ回り込みを起こさないためである
		   （移行元は `#header-logo { clear: both }` で回り込みを打ち消していた。
		   同じ組みを写すと打ち消しの指定が 2 つ増える）。`width: fit-content` は
		   流れの中に残ったまま中身の幅まで縮むので、打ち消しが要らない。
		   サイト共通の帯（main.css の `.site-header__page-name`）は
		   `.site-header__top` の中の flex アイテムなので、`flex-shrink: 0` が
		   同じ役目を担っている. */
		width: fit-content;
		height: 40px;
		margin: 0;
		padding: 15px 0 0 50px;
		font-size: 11px;
		font-weight: 400;
		line-height: 1.2;
		color: var(--pa-color-text);
	}
}

/* --- 器（移行元 .form-wrapper。幅は識別子ごとの修飾クラスで分ける）---
   `shiryo` の移行元: max-width:600px; margin:0 auto; padding:3em 1em; overflow:clip
   中身の実効幅は最大 568px になる。

   幅の値をここに固定せず識別子ごとの修飾クラス（`--shiryo` 等）へ分けた理由は
   `header-form.php` の `$pa_form_frame_wrapper_modifier` のコメントを参照
   （Codex レビュー・Bug #1983）。 */
.pa-form-frame__wrapper {
	margin: 0 auto;
	padding: 48px 16px; /* 移行元の 3em 1em を 16px 基準で換算 */
	overflow: clip;
}

/* `shiryo`（`.pa-form--dl`。フォームプラグイン pa-forms 側の幅の上限 600px）。 */
.pa-form-frame__wrapper--shiryo {
	max-width: 600px;
}

/* `eq`・`raiten`・`toiawase`・`houjin`
   （`.pa-form--table`・`.pa-form--mixed`。同上 1100px）。
   `shoukai` は移行元が 1,100px 系列を使わないため、下の専用の器へ移した（Bug #2369）。 */
.pa-form-frame__wrapper--wide {
	max-width: 1100px;
}

/* 資料請求の広告フォーム `request_ad`・`request_as`（Task #8666）。移行元は `/spiral/request/css/style.css` の
   `.form-inner { width: 960px }` の中に表を置く（幅 1440 の実測で幅 960・左端 240）。パソコン幅の左右の内余白は
   `--wide` と同じく下で 0 に戻す. */
.pa-form-frame__wrapper--spiral {
	max-width: none;
	padding-top: 0;
	background-image: url(../images/form/spiral-bg.png?ver=e2430e6bf4fa);
	background-position: top center;
	background-size: auto;
	background-repeat: repeat-y;
}

/*
 * 器を全幅にし、フォームの塊だけを幅 960px で中央に置く（Bug #8727・リーダーの判断 2026-09-28・案 A）。移行元は
 * `main#request`（全幅・背景の飾り）の中に、全幅の題の塊 `div.main_ttl` と幅 960px の `.form-inner` を置く.
 * 背景の飾りは移行元の `spiral/request/css/style.css` 47〜53 行（`main` に `bg.png`・上下に繰り返す・幅は実寸）と、
 * 携帯版の `sp/spiral/request/css/style.css` 42〜48 行（`bg_sp.png`・幅 100%）。絵は写しから取り込んだ
 * （`spiral-bg.png` の md5 は 0fcba776…・`spiral-bg-sp.png` は 4ede47b7…）。移行元の CSS は本番の URL を指すが、dev は指さない.
 */
.pa-form-frame__wrapper--spiral .pa-form {
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}

/*
 * 題の塊（`template-parts/form-spiral-title.php`）。値は移行元の `spiral/request/css/style.css` 81〜160 行の写し.
 * 書体と行の高さは、移行元の土台（`css/common.css` 28〜31 行の `body`。行の高さの指定は無い）に合わせる.
 *
 * フォームの塊の上の空きは、移行元の `.form-inner { margin: 100px auto 70px }` を題の塊の下の外余白で写す。
 * リボンの器が `margin-top: -30px` なので、題の塊の下端は字の下端より 30px 上になり、そこから 100px である.
 * 移行元はこの空きのあと、`.form-inner` の先頭に工程の帯（`ol.flow-list`）を置くが、dev は写さない
 * （意図的変更の台帳の「フォームの進み具合の帯」の行）.
 */
.pa-form-frame__spiral-ttl {
	display: block;
	margin: 0 0 100px;
}

.pa-form-frame__spiral-ttl-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pa-form-frame__spiral-ttl-img {
	display: flex;
	margin: 0 14px 0 0;
	width: 68px;
	height: 68px;
}

.pa-form-frame__spiral-ttl-img img {
	width: 100%;
	height: auto;
}

.pa-form-frame__spiral-ttl-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: normal;
	color: #a08046;
}

.pa-form-frame__spiral-ttl-message {
	display: block;
	font-size: 17px;
	font-weight: 700;
}

/* リボン。移行元は SVG 2 本を幅 53% ずつ、左 0 と左 50% に置き、字の下へ 30px 重ねる. */
.pa-form-frame__ribbon {
	position: relative;
	margin-top: -30px;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__ribbon-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 53%;
}

.pa-form-frame__ribbon-svg--pc-right {
	left: 50%;
}

.pa-form-frame__ribbon-svg--sp-left,
.pa-form-frame__ribbon-svg--sp-right {
	display: none;
}

.pa-form-frame__ribbon-path {
	fill: none;
	stroke: #c51f10;
	stroke-width: 1px;
	fill-rule: evenodd;
}

/*
 * 線を描く動き（リーダーの判断 2026-09-28・案 b）。移行元は `spiral/request/js/ribbon.js` が読み込みの直後に
 * vivus で描く（`type: 'oneByOne'`・`duration: 150` フレーム・`animTimingFunction: Vivus.EASE`）。dev は JavaScript を
 * 使わず、同じ計算を 10% 刻みの keyframes に落とした。全体の進み具合に EASE（`0.5 - cos(πt) / 2`）をかけ、
 * 1 本の SVG の中の path を長さの割合で順に描く。150 フレームは 60 フレーム毎秒で 2.5 秒である.
 * 線の長さ（`stroke-dasharray`）は移行元の HTML に残っている値（描き終わりの姿）の写し.
 */
.pa-form-frame__ribbon-path--pc-left-1 {
	stroke-dasharray: 704, 706;
	animation: pa-form-frame-ribbon-pc-left-1 2.5s linear both;
}

.pa-form-frame__ribbon-path--pc-left-2 {
	stroke-dasharray: 76, 78;
	animation: pa-form-frame-ribbon-pc-left-2 2.5s linear both;
}

.pa-form-frame__ribbon-path--pc-right-1 {
	stroke-dasharray: 705, 707;
	animation: pa-form-frame-ribbon-pc-right-1 2.5s linear both;
}

.pa-form-frame__ribbon-path--pc-right-2 {
	stroke-dasharray: 75, 77;
	animation: pa-form-frame-ribbon-pc-right-2 2.5s linear both;
}

.pa-form-frame__ribbon-path--sp-left-1 {
	stroke-dasharray: 191, 193;
	animation: pa-form-frame-ribbon-sp-left-1 2.5s linear both;
}

.pa-form-frame__ribbon-path--sp-left-2 {
	stroke-dasharray: 76, 78;
	animation: pa-form-frame-ribbon-sp-left-2 2.5s linear both;
}

.pa-form-frame__ribbon-path--sp-right-1 {
	stroke-dasharray: 191, 193;
	animation: pa-form-frame-ribbon-sp-right-1 2.5s linear both;
}

.pa-form-frame__ribbon-path--sp-right-2 {
	stroke-dasharray: 75, 77;
	animation: pa-form-frame-ribbon-sp-right-2 2.5s linear both;
}

@keyframes pa-form-frame-ribbon-pc-left-1 {
	0% { stroke-dashoffset: 704; }
	10% { stroke-dashoffset: 684.91; }
	20% { stroke-dashoffset: 629.52; }
	30% { stroke-dashoffset: 543.24; }
	40% { stroke-dashoffset: 434.52; }
	50% { stroke-dashoffset: 314; }
	60% { stroke-dashoffset: 193.48; }
	70% { stroke-dashoffset: 84.76; }
	80% { stroke-dashoffset: 0; }
	90% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-pc-left-2 {
	0% { stroke-dashoffset: 76; }
	10% { stroke-dashoffset: 76; }
	20% { stroke-dashoffset: 76; }
	30% { stroke-dashoffset: 76; }
	40% { stroke-dashoffset: 76; }
	50% { stroke-dashoffset: 76; }
	60% { stroke-dashoffset: 76; }
	70% { stroke-dashoffset: 76; }
	80% { stroke-dashoffset: 74.48; }
	90% { stroke-dashoffset: 19.09; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-pc-right-1 {
	0% { stroke-dashoffset: 705; }
	10% { stroke-dashoffset: 685.91; }
	20% { stroke-dashoffset: 630.52; }
	30% { stroke-dashoffset: 544.24; }
	40% { stroke-dashoffset: 435.52; }
	50% { stroke-dashoffset: 315; }
	60% { stroke-dashoffset: 194.48; }
	70% { stroke-dashoffset: 85.76; }
	80% { stroke-dashoffset: 0; }
	90% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-pc-right-2 {
	0% { stroke-dashoffset: 75; }
	10% { stroke-dashoffset: 75; }
	20% { stroke-dashoffset: 75; }
	30% { stroke-dashoffset: 75; }
	40% { stroke-dashoffset: 75; }
	50% { stroke-dashoffset: 75; }
	60% { stroke-dashoffset: 75; }
	70% { stroke-dashoffset: 75; }
	80% { stroke-dashoffset: 74.48; }
	90% { stroke-dashoffset: 19.09; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-sp-left-1 {
	0% { stroke-dashoffset: 191; }
	10% { stroke-dashoffset: 184.47; }
	20% { stroke-dashoffset: 165.5; }
	30% { stroke-dashoffset: 135.97; }
	40% { stroke-dashoffset: 98.75; }
	50% { stroke-dashoffset: 57.5; }
	60% { stroke-dashoffset: 16.25; }
	70% { stroke-dashoffset: 0; }
	80% { stroke-dashoffset: 0; }
	90% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-sp-left-2 {
	0% { stroke-dashoffset: 76; }
	10% { stroke-dashoffset: 76; }
	20% { stroke-dashoffset: 76; }
	30% { stroke-dashoffset: 76; }
	40% { stroke-dashoffset: 76; }
	50% { stroke-dashoffset: 76; }
	60% { stroke-dashoffset: 76; }
	70% { stroke-dashoffset: 55.03; }
	80% { stroke-dashoffset: 25.5; }
	90% { stroke-dashoffset: 6.53; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-sp-right-1 {
	0% { stroke-dashoffset: 191; }
	10% { stroke-dashoffset: 184.49; }
	20% { stroke-dashoffset: 165.6; }
	30% { stroke-dashoffset: 136.18; }
	40% { stroke-dashoffset: 99.1; }
	50% { stroke-dashoffset: 58; }
	60% { stroke-dashoffset: 16.9; }
	70% { stroke-dashoffset: 0; }
	80% { stroke-dashoffset: 0; }
	90% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

@keyframes pa-form-frame-ribbon-sp-right-2 {
	0% { stroke-dashoffset: 75; }
	10% { stroke-dashoffset: 75; }
	20% { stroke-dashoffset: 75; }
	30% { stroke-dashoffset: 75; }
	40% { stroke-dashoffset: 75; }
	50% { stroke-dashoffset: 75; }
	60% { stroke-dashoffset: 75; }
	70% { stroke-dashoffset: 54.82; }
	80% { stroke-dashoffset: 25.4; }
	90% { stroke-dashoffset: 6.51; }
	100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pa-form-frame__ribbon-path {
		animation: none;
	}
}

@media (max-width: 749px) {
	/*
	 * 携帯幅。値は移行元の `sp/spiral/request/css/style.css` 42〜48 行と 79〜160 行の写し.
	 * 題の上の空き 25px は、移行元の実測（幅 375 でヘッダーの下端 61・題の塊の上端 86）で、出どころの CSS はまだ読めていない.
	 * 器の左右の内余白 16px の外まで題の塊を広げ、移行元と同じく画面いっぱいにする.
	 */
	.pa-form-frame__wrapper--spiral {
		padding-top: 25px;
		background-image: url(../images/form/spiral-bg-sp.png?ver=33885a01b514);
		background-size: 100% auto;
	}

	.pa-form-frame__spiral-ttl {
		margin-right: -16px;
		margin-bottom: 65px;
		margin-left: -16px;
	}

	.pa-form-frame__spiral-ttl-inner {
		padding: 20px 0 0;
	}

	.pa-form-frame__spiral-ttl-img {
		margin-right: 10px;
	}

	.pa-form-frame__spiral-ttl-heading {
		justify-content: center;
		font-size: 24px;
	}

	.pa-form-frame__spiral-ttl-message {
		font-size: 13px;
	}

	.pa-form-frame__ribbon {
		margin-top: 0;
		font-size: inherit;
		line-height: inherit;
	}

	.pa-form-frame__ribbon-svg {
		width: 55.6%;
	}

	.pa-form-frame__ribbon-svg--pc-left,
	.pa-form-frame__ribbon-svg--pc-right {
		display: none;
	}

	.pa-form-frame__ribbon-svg--sp-left,
	.pa-form-frame__ribbon-svg--sp-right {
		display: block;
	}

	.pa-form-frame__ribbon-svg--sp-right {
		left: 44.4%;
	}
}

@media (max-width: 640px) {
	/* 移行元の携帯版は 640px 以下で、絵を 50px・字を 23px にする. */
	.pa-form-frame__spiral-ttl-img {
		width: 50px;
		height: 50px;
	}

	.pa-form-frame__spiral-ttl-heading {
		font-size: 23px;
	}
}

/*
 * 冊子の広告フォーム `request_tool_ad`・`request_tool_as` の入力画面の、フォームより上の部品（Bug #8728・Bug #8744）。
 * 型紙は `template-parts/form-book-title.php`。外枠は `--wide`（幅 1100px）のまま.
 *
 * 値は移行元の写しから採った.
 *   - 題の絵 `h2.book_ttl`: `css/page_inquiry.css` 416〜420 行（`margin: 0 auto; font-size: 0`）。携帯版は
 *     `sp/css/style.css` 2153〜2163 行（絵は `max-width: 100%; height: auto`・幅いっぱい）
 *   - 説明の絵と押しボタン `div.flex_form_text.mt30.mb70`: `css/page_inquiry.css` 363〜371 行（flex・中央そろえ・
 *     左の段落は幅 650px で中央寄せ）。パソコン幅だけ出す（携帯版は注釈の中）
 *   - 案内文 `p.form_text`: パソコン版は `css/page_inquiry.css` 379〜383 行（18px・行の高さ 166%・上の内余白 35px）、
 *     携帯版は、同じ 2123〜2127 行の `#request .form_text` が**当たらない。**`sp_request_tool_ad.php` の開きの
 *     `div.service_box02`（82 行）は注釈（69〜85 行）の中にあり、閉じ（86 行）だけが生きて `#request`（67 行）を閉じるためである。字は全体の 13px・行の高さ
 *     `normal` のまま、内余白は `pLR20`・`pB20`（0 20px 20px）になる（2026-09-29 の実測で箱 [0, 338.66, 375, 60]）
 *
 * 題の上と下の空き（2026-09-29 の実測・`pa-verify-assets/A/8728-冊子の題-0929/走行1/`）.
 *   - パソコン版: 題は移行元のパンくず `div.path` の下端にすぐ続く（空き 0）。dev はパンくずを Bug #8722 で扱うので、外枠の
 *     上の内余白を 0 にして、ヘッダーの下端にすぐ続ける
 *   - 携帯版: 題は `#request` の上下の内余白 25px に挟まれる（ヘッダーの下端 61 → 題 86、題の下端 216 → 工程の絵 241）
 *   - 工程の絵（`img_flow01.gif`）: 移行元のパソコン版は、説明の絵の段落の行の箱が 154（絵 148 に字の下がりが 6 足される）で、
 *     その下に 20px 空けて工程の絵の段落（`p.page_flow_img`・絵 68 に字の下がりが足されて 74）を置き、その下に 30px 空けて案内文を置く。
 *     dev の帯（`.pa-form-frame__book-flow` の中の `ol.pa-form-flow`・Task #9563・D777）は絵だけの箱（68）なので、説明の絵の塊の
 *     下の空きを 26px（154＋20−148）、帯の下の空きを 36px（74＋30−68）にする。携帯版は `p.mb25`（帯の下 25px）
 */
.pa-form-frame__wrapper:has(> .pa-form-frame__book-ttl) {
	padding-top: 0;
}

.pa-form-frame__book-ttl {
	margin: 0 auto;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__book-ttl img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pa-form-frame__book-lead {
	display: flex;
	align-items: center;
	margin: 30px 0 26px;
}

.pa-form-frame__book-lead p {
	margin: 0;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__book-lead-text {
	width: 650px;
	text-align: center;
}

.pa-form-frame__book-lead img {
	vertical-align: top;
}

.pa-form-frame__book-intro {
	margin: 0;
	width: fit-content;
	padding: 35px 0 0;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
	font-size: 18px;
	line-height: 166%;
}

@media (max-width: 749px) {
	.pa-form-frame__wrapper:has(> .pa-form-frame__book-ttl) {
		padding-top: 25px;
	}

	.pa-form-frame__book-ttl {
		margin-right: -16px;
		margin-bottom: 25px;
		margin-left: -16px;
	}

	.pa-form-frame__book-lead {
		display: none;
	}

	.pa-form-frame__book-intro {
		margin-right: -16px;
		margin-left: -16px;
		width: auto;
		padding: 0 20px 20px;
		font-size: 13px;
		line-height: normal;
	}

	.pa-form-frame__book-intro-break {
		display: none;
	}
}

/*
 * 冊子の広告フォーム `request_tool_ad` の年末年始休業の告知（Bug #9818・ユーザー決定 D830）。型紙は `template-parts/form-book-title.php`.
 *
 * 値は移行元のコピー（移行元リポジトリの b435f9a7e）を実ブラウザで読んだ計算後の値（`pa-verify-assets/A/9818-直す前の読み-1008/走行1/`）.
 *   - パソコン版: `#reservation .form_text`（`css/page_inquiry.css` 495〜500 行・15px・行の高さ 166%・下の外余白 25px）と
 *     `#reservation .form_text span`（同 507〜510 行・#e1200f）。段落の上は帯の下の空き 36px（`.pa-form-frame__book-flow .pa-form-flow`）。
 *     書体は同じ柱の案内文（`.pa-form-frame__book-intro`）と同じ
 *   - 携帯版: `sp_request_tool_ad.php` 95 行の `style`（左右の内余白 6.25%・下 20px・#e1200f）と、中の `span` の 11px。
 *     段落は 13px・行の高さ normal。移行元の 6.25% は画面の幅に対する割合なので、dev の外枠の左右の内余白 16px の外へ広げて `vw` で書く
 * 1 つの HTML で 2 か所に置き、幅で片方だけを出す（位置と改行の数が幅で違うため）.
 */
.pa-form-frame__book-notice {
	margin: 0 0 25px;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
	font-size: 15px;
	line-height: 166%;
}

.pa-form-frame__book-notice span {
	color: #e1200f;
}

.pa-form-frame__book-notice--sp {
	display: none;
}

@media (max-width: 749px) {
	.pa-form-frame__book-notice--pc {
		display: none;
	}

	.pa-form-frame__book-notice--sp {
		display: block;
		margin: 0 -16px;
		padding: 0 6.25vw 20px;
		color: #e1200f;
		font-size: 13px;
		line-height: normal;
	}

	.pa-form-frame__book-notice--sp span {
		font-size: 11px;
	}
}

/*
 * 資料請求の LP `request_lp` の入力画面の、フォームより上の部品（Task #9000・Bug #8945 の 3 本目）。
 * 型紙は `template-parts/form-request-lp-title.php`。外枠は `--wide`（幅 1100px）のまま.
 *
 * 値は移行元の写し（68e3190cb）から採った.
 *   - パソコン版: 題の絵 `h2.category_ttl` は `css/page_inquiry.css` 60〜63 行（下の外余白 50px・行の高さ 0）。案内文 `#request .form_text` は `css/page_inquiry.css` 379〜383 行
 *     （左へ浮動・上の内余白 35px・18px・行の高さ 166%）、来店予約と電話の塊 `#request .contact_box` は 405〜412 行
 *     （右へ浮動・幅 387px・地 #A3762B・上の内余白 12px・下 30px・中央寄せ）。塊の中の段落は下の余白を持たない
 *     （2026-09-30 の実測で、押しボタンの段落 52・電話の段落 68 が間を空けずに積まれ、塊の高さは 132）。そのほかの段落は `css/common.css` 321〜325 行の
 *     `p { margin-bottom: 1em }`、字は `#contents` の 13px（`css/style.css` 1296〜1301 行）を受ける
 *   - 携帯版: `sp/css/style.css` 2079〜2127 行。`#request` の上下の内余白 25px・題の下 30px・`p.catch` は幅 60% で中央・
 *     下の内余白 40px・案内文は内余白 20px 6.25%（画面の幅に対する割合）・12px・行の高さ 145%
 *   - 工程の絵（`img_flow01.gif`）: 移行元は題の下 50px に工程の絵の段落（`p.page_flow_img`・74）と下の余白 30 を置き、その下に
 *     案内文と来店予約の塊を置く。dev の帯（`.pa-form-frame__request-lp-flow` の中の `ol.pa-form-flow`・Task #9563・D777）は
 *     絵だけの箱（68）なので、帯の下の空きを 36px（74＋30−68）にする。携帯版は飾りの無い `p`（帯の下の空きなし）
 *
 * 実測は `pa-verify-assets/A/9000-資料請求LPの本文の下見-0930/`.
 */
.pa-form-frame__wrapper:has(> .pa-form-frame__request-lp-ttl) {
	padding-top: 0;
}

.pa-form-frame__request-lp-ttl {
	margin: 0 0 50px;
	font-size: 13px;
	line-height: 0;
}

.pa-form-frame__request-lp-ttl img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pa-form-frame__request-lp-catch {
	display: none;
}

.pa-form-frame__request-lp-lead {
	display: flow-root;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
	font-size: 13px;
	line-height: normal;
}

.pa-form-frame__request-lp-lead p {
	margin: 0 0 1em;
}

.pa-form-frame__request-lp-intro {
	float: left;
	padding: 35px 0 0;
	font-size: 18px;
	line-height: 166%;
}

.pa-form-frame__request-lp-contact {
	float: right;
	box-sizing: content-box;
	width: 387px;
	margin: 0 0 30px;
	padding: 12px 0 0;
	background: #a3762b;
	text-align: center;
}

.pa-form-frame__request-lp-lead .pa-form-frame__request-lp-contact p {
	margin: 0;
	line-height: normal;
	text-align: center;
}

.pa-form-frame__request-lp-contact img {
	max-width: none;
	vertical-align: baseline;
}

@media (max-width: 749px) {
	.pa-form-frame__wrapper:has(> .pa-form-frame__request-lp-ttl) {
		padding-top: 25px;
	}

	.pa-form-frame__request-lp-ttl {
		margin-right: -16px;
		margin-bottom: 30px;
		margin-left: -16px;
		line-height: normal;
	}

	/* 移行元の幅 60% は画面の幅に対する割合である。dev の外枠は左右に 16px の内余白を持つので、足して戻す. */
	.pa-form-frame__request-lp-catch {
		display: block;
		width: calc((100% + 32px) * 0.6);
		margin: 0 auto;
		padding: 0 0 40px;
		font-size: 13px;
		line-height: 0;
	}

	.pa-form-frame__request-lp-catch img {
		display: block;
		width: 100%;
		height: auto;
	}

	.pa-form-frame__request-lp-lead p {
		margin: 0;
	}

	.pa-form-frame__request-lp-lead .pa-form-frame__request-lp-intro {
		float: none;
		margin-right: -16px;
		margin-left: -16px;
		padding: 20px 6.25vw;
		font-size: 12px;
		line-height: 145%;
	}

	.pa-form-frame__request-lp-intro-break {
		display: none;
	}

	.pa-form-frame__request-lp-contact {
		display: none;
	}
}

/* `shoukai`（ご紹介プログラム）。移行元だけ 943px の専用の幅を持つ（Bug #2369）。
 *
 * 出典は `/css/mypage_form03.css` の `.container_full`（5 行目）と `.main_full`
 * （18 行目）の `width: 943px`。2026-08-28 に配信中の移行元へ GET して実測し、
 * 器の幅 943px・左端 248.5px（幅 1440px で中央寄せ）を確かめた。入口 2 つ
 * （`mypageform_02` = 成婚退会者様限定・`mypageform_03` = 通常）で値は同じである.
 *
 * **`width` ではなく `max-width` を使う。** 上の土台は `overflow: clip` を持つため、
 * 固定幅にすると 750〜872px の画面（タブレットの縦向き 768px を含む）で中身が黙って
 * 切れる。`max-width` なら 943px 以上の画面で移行元と同じ寸法になり、狭い画面では
 * 素直に縮む.
 */
.pa-form-frame__wrapper--shoukai {
	max-width: 943px;
}

/* `otocon`（`.pa-form--div`。同上 902px）。 */
.pa-form-frame__wrapper--otocon {
	max-width: 902px;
}

/* `--wide` の 4 種（お問い合わせ・法人・婚活 EQ 診断・来店予約）と `--shoukai`
 * （ご紹介プログラム）は、パソコン幅では左右の内余白を持たない。上の土台が持つ
 * 左右 16px を、ここで 0 に戻す（Bug #2311・Bug #2369）.
 *
 * 移行元の器（`#contents`）は左右の内余白を持たず、幅 1,100px をそのまま表に使う。
 * 土台の 16px が残ると、外側の器の幅は移行元と一致しているのに**中の表だけが 32px
 * 狭くなり、16px 右へずれる**。2026-08-27 に移行元と dev を同じ幅で測って確かめた
 * （お問い合わせ・法人・婚活 EQ 診断の 3 件で、移行元 表 1,100px・左端 170px に対し
 * dev は表 1,068px・左端 186px。項目名の列 255px → 247.6px、値の列 845px → 820.4px）.
 *
 * **土台の 16px を消すのではなく、`--wide` だけで打ち消す。** 土台は 7 種すべてが
 * 共有しており、資料請求（`--shiryo`・幅 600px の定義リスト）と OTOCON
 * （`--otocon`・幅 902px の専用の意匠）にも効いている。土台を触るとこの 2 種の
 * パソコン幅の余白まで動く。修飾クラスはクラス 1 つ分だけ土台より強いので、
 * `!important` を使わずに勝てる.
 *
 * **携帯幅では指定しない。** 土台の 16px をそのまま残し、表が画面の端に貼り付くのを
 * 防ぐ。移行元も携帯版は左右に余白を持つ（実測: dev は携帯幅 375px で表 343px・
 * 左右 16px ずつ。この値は変えない）.
 *
 * 切り替えの幅 750px は、このファイルの既存の切り替え（260 行目・284 行目）と同じ値で、
 * 新しい値を持ち込まない.
 *
 * 【解消済み】ご紹介プログラムは、移行元がそもそも 1,100px の器を使っていない
 * （器 943px・表 840px・中央寄せ）。この 16px を外しただけでは表が 1,068px のままで
 * 移行元の 840px とは 228px の差が残っていたが、**Bug #2369 で専用の器
 * （`--shoukai`）と下の帯の幅を足して解消した**.
 *
 * 【測れないもの】来店予約は、移行元の生きた入口が外部の予約システムへ転送されるため
 * パソコン幅の実測ができない。移植の写し元
 * （`legacy/www.p-a.jp/public/form/view/reservation3.php`）が
 * `<div id="contents">` + `<table width="100%">` という、お問い合わせ・法人と同じ
 * 組みを持つことは確かめたので、同じ扱いにしている.
 */
@media (min-width: 750px) {
	.pa-form-frame__wrapper--wide,
	.pa-form-frame__wrapper--spiral,
	.pa-form-frame__wrapper--shoukai {
		padding-right: 0;
		padding-left: 0;
	}

	/*
	 * ご紹介プログラムだけ、**器の中でフォームの帯をさらに 840px へ絞る**
	 * （Bug #2369）。器（943px）を狭めるのではなく帯だけを絞るのは、移行元が
	 * その形だからである.
	 *
	 * 移行元は器 943px の中で、**冒頭の見出し画像と流れの帯は器いっぱいの 943px**、
	 * **入力の帯だけが 840px**（器の左端から 32px 内側）である。2026-08-28 に配信中の
	 * 移行元へ GET して実測した（見出し画像 幅 943・左端 248.5 / 入力の帯と表
	 * 幅 840・左端 280.5）。器そのものを 840px まで狭めると見出し画像まで縮み、
	 * かえって移行元から離れる.
	 *
	 * 値の出典は `/css/base_old.css` 712 行目の
	 * `.maintextBoxw_setting { padding: 40px 32px 0 32px; width: 840px }`。左の
	 * 32px はこの内余白に対応する.
	 *
	 * **表の列の幅は足さない。** 帯が 840px になれば、フォーム部品が既に持つ
	 * 割合の指定（`pa-forms.css` の 23.181% / 76.818%）から
	 * 840 × 0.23181 = 194.72px（項目名）と 645.28px（値）が自動で出て、移行元の
	 * 実測（194.7 / 645.3）と一致する.
	 *
	 * **携帯幅では当てない。** 移行元の携帯版は表 335px・左端 20px で、943px 系列の
	 * 組みを持たない。この節を `min-width: 750px` の中に置くことで携帯幅を外す.
	 */
	.pa-form-frame__wrapper--shoukai .pa-form > form {
		max-width: 840px;
		margin-left: 32px;
	}
}

/*
 * 🚨 **携帯幅の器の下の内余白は、フォームごとに移行元の器の値へ戻す**（Bug #8511）。
 *
 * 土台の下 48px は、資料請求の移行元（`.form-wrapper { padding: 3em 1em }`）の値である。
 * ほかのフォームの移行元の携帯版は別の器で組まれ、下の内余白が違う。入力の塊の最後の字から
 * フッターまでを両側で測った（2026-09-26・`pa-verify-assets/B/8511-直す前-0926/`）.
 *
 * | フォーム | 移行元の携帯版の器（下の内余白） | 直す前の差 |
 * |---|---|---:|
 * | お問い合わせ | `#request`（25px） | +23 |
 * | ご紹介・会員紹介 | `#reservation`（25px） | +23.09 |
 * | 社員紹介 | `#reservation`（25px）＋ `section.contents`（19.5px） | +3.59 |
 * | 法人からの問い合わせ | `#request`（25px） | Bug #8516 で足した |
 * | 婚活 EQ 診断 | `#analysis`（25px） | Bug #8516 で足した |
 *
 * 当たり先は、フォームの部品の `data-pa-form` で絞る。完了画面は入力のフォームを持たない
 * ので当たらない。資料請求（移行元も 48px）とほかのフォームは、この節では動かさない.
 */
@media (max-width: 749px) {
	.pa-form-frame__wrapper:has(.pa-form:is([data-pa-form="toiawase"], [data-pa-form="houjin"], [data-pa-form="eq"], [data-pa-form="reservation3"], [data-pa-form="reservation_intro"])) {
		padding-bottom: 25px;
	}

	.pa-form-frame__wrapper:has(.pa-form[data-pa-form="reservation_intro_02"]) {
		padding-bottom: 44.5px;
	}
}

/*
 * 会員紹介の来店予約の携帯幅は、器の上の内余白も移行元の `#reservation`（`sp/css/style.css`
 * の `padding: 25px 0`）へ戻す（Bug #9302）。土台の 48px のままだと、題名の帯の上端が
 * 移行元（86）より 23 下になる（直す前の実測・`pa-verify-assets/A/9302-会員紹介の頭の区画の実測-1002/走行1/`）.
 * 社員紹介も、移行元のスマホ版は同じ `#reservation`（上 25px）の中に題を組む（Task #9306）。
 * 土台の 48px のままだと、注意書きの下端から題「来店予約」の上端までが移行元（44.5）より
 * 23 広くなる（直す前の実測・`pa-verify-assets/A/9306-社員紹介の3区画の実測-1002/走行1/`）.
 * ご紹介の来店予約（`reservation3`）も、移行元のスマホ版は同じ `#reservation`（上 25px）の中に
 * 題名の帯を組む（Bug #9474）。土台の 48px のままだと、題名の帯の上端が移行元（86）より 23 下の
 * 109 になる（直す前の実測・`pa-verify-assets/A/9474-直す前-1005/走行1/`）.
 * ほかのフォームの上の内余白は、この節では動かさない.
 */
@media (max-width: 749px) {
	.pa-form-frame__wrapper:has(.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation_intro_02"], [data-pa-form="reservation3"], [data-pa-form="event"])) {
		padding-top: 25px;
	}
}

/*
 * パーティー申込（`event`・Task #9560）の器の上の内余白。移行元の携帯版は `#event`（`sp/css/style.css` の `padding: 25px 0`）、
 * パソコン版は `#contents`（`css/page_event.css` の `padding: 63px 0 55px`）の中に頭と帯を組む。土台の 48px のままだと、
 * 携帯幅の題名が移行元（86）より 23 下の 109、パソコン幅の確認画面の帯が移行元（183）より 15 上の 168 になる
 * （下見の走行 r1 の実測・`pa-verify-assets/A/9560-下見-1007/`）。携帯幅は上の節の一覧に足した.
 */
@media (min-width: 750px) {
	.pa-form-frame__wrapper:has(.pa-form[data-pa-form="event"]) {
		padding-top: 63px;
	}
}

/*
 * ご紹介の来店予約（`reservation3`）のパソコン幅は、器の上の内余白を 0 にする（Bug #9474）。
 * 移行元（`form/view/reservation3.php` 82〜85 行）はパンくず `div.path` のすぐ後に
 * `div#contents`（上の内余白 0）を置き、その先頭に題名の画像 `h2.category_ttl`（上の外余白 0）を
 * 置く。dev は土台の 48px と題名の上の外余白 50px（`pa-forms.css` 6649 行）の和で、題名の画像の
 * 上端が移行元（192）より 98 下の 290 になっていた（直す前の実測・
 * `pa-verify-assets/A/9474-直す前-1005/走行1/`）。題名の上の外余白は `pa-forms.css` の
 * `reservation3` の節で 0 にする.
 * 会員紹介・社員紹介（`reservation_intro`・`reservation_intro_02`）のパソコン幅は、すぐ下の節（Issue #9504）で扱う.
 */
@media (min-width: 750px) {
	.pa-form-frame__wrapper:has(.pa-form[data-pa-form="reservation3"]) {
		padding-top: 0;
	}
}

/*
 * 会員紹介・社員紹介の来店予約（`reservation_intro`・`reservation_intro_02`）のパソコン幅も、器の上の内余白を 0 にする
 * （Issue #9504・事業部の指摘 W181）。移行元（`form/view/intro/reservation_intro.php` と `reservation_intro_02.php`）は
 * ヘッダーのすぐ後の `div#contents`（上の内余白 0）の中に題名の画像を置く。題名の上の外余白は、会員紹介が `.mt50`（50px）、
 * 社員紹介が 15px で、dev の題名（`pa-forms.css` の `.pa-raiten-intro__heading`）も同じ値を持つ。dev は土台の 48px がその上に
 * 足され、題名の画像の上端が移行元より 48 下にあった.
 *
 * 下見（幅 1440・2026-10-10・この字を差し込んで読んだ）:
 *   会員紹介の題名の画像の上端      218 → 170（移行元 170）
 *   会員紹介のチェック項目の絵の上端 433 → 385（移行元 385・W181）
 *   社員紹介の題名の画像の上端      870.53 → 822.53（移行元 822.53）
 *   陰性対照: ご紹介の来店予約の 1440、会員紹介と社員紹介の 375 は、器の上の内余白とページの高さが前と同じ.
 */
@media (min-width: 750px) {
	.pa-form-frame__wrapper:has(.pa-form:is([data-pa-form="reservation_intro"], [data-pa-form="reservation_intro_02"])) {
		padding-top: 0;
	}
}

/* `shiryo` 以外の 6 種が使う `page-content__body`（`main.css`）は、本文の文字組みを
 * 借りるためだけの区画である。この区画自身が持つ `max-width: 800px`（`main.css`
 * `--pa-inner-xs`）をそのまま効かせると、上の識別子ごとの幅（1100px・902px）を
 * 再び 800px まで縮めてしまう（このファイル冒頭の「本文の器の幅」の節と同じ事故。
 * Codex レビュー・Bug #1983）。`.pa-form-frame__wrapper` の内側に限って幅の指定を
 * 打ち消し、外側の幅をそのまま使わせる. */
.pa-form-frame__wrapper .page-content__body {
	max-width: none;
	margin: 0;
}

/* --- 見出し（移行元 .form-header）---
   移行元: color:var(--theme-color); display:flex; align-items:center;
           justify-content:center; gap:.5rem
   `--theme-color` の実値 #A08046 は request.php の 17〜22 行の <style> にある。
   `h1` の余白と文字の大きさ・太さは、移行元の土台
   （`h1,h2,…{font-size:100%;font-weight:700;margin:0}` と
   `…,h1,…{margin:0;padding:0}`）が決めている。 */
.pa-form-frame__heading {
	margin: 0;
	padding: 0;
	color: #a08046;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* 移行元の .5rem を 16px 基準で換算 */
	font-size: 16px; /* 移行元の font-size:100%（基準 16px）にあたる */
	font-weight: 700;
	line-height: normal;
}

/* 見出しの画像。移行元は width="68" height="68" の属性で寸法を決めている
   （request.php の 41 行）。「1分で入力完了」の文言は、文字ではなくこの画像の中に
   あり、代替文字として同じ文言が与えられている。 */
.pa-form-frame__heading-image {
	width: 68px;
	height: 68px;
}

/* 移行元 .form-header__title: font-size:1.75em（上の 16px の 1.75 倍 = 28px） */
.pa-form-frame__heading-title {
	font-size: 1.75em;
}

/* 移行元 .form-header__title--message: font-size:.5em; display:block
   上の 28px の 0.5 倍 = 14px。上の行に置かれる。 */
.pa-form-frame__heading-message {
	font-size: 0.5em;
	display: block;
}

/* `shiryo` 以外の 6 種が、本文がショートコードだけのときに出す投稿題名の見出し
   （Codex レビュー・Bug #1983。`page-templates/form-frame.php` のコメントを参照）。
   h1 にしない分、見た目だけ見出しらしく保つ。移行元のどの種類にも固定の色・寸法の
   正本が無いため、`shiryo` の見出し（`--theme-color` #a08046）を流用せず、本文の
   基準色（`--pa-color-text`）で控えめに出す。 */
.pa-form-frame__page-name {
	margin: 0 0 24px;
	color: var(--pa-color-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* フッターの土台（移行元 .form-footer）は `form-frame-footer.css` へ移した（Bug #10084）. */

/* ==================================================================
 * ヘッダー（otocon 暫定。サイト共通ロゴ・トップページへのリンクあり）
 * ==================================================================
 * `eq`・`raiten`・`toiawase`・`houjin` は下の節（サイト共通ヘッダーの引き出し
 * メニュー部品を再利用する）へ移った（AC 違反の自己検出・2026-08-24）。この
 * クラスは otocon 専用として残す（本来の意匠は Bug #1990 の対象。それまでの
 * 暫定表示）.
 *
 * 移行元は共通 include（header_form2.shtml）を持ち、CSS は
 * `#header.form_header`（style.css 444〜492 行）で、高さ 120px・ロゴの枠
 * （#header-logo）は 280x79px・左パディング 41px（画面幅 1367px 以上）。画面幅
 * 1366px 以下は枠が 175px 幅・左パディング 45px に縮み、画像も枠いっぱいに縮む
 * （2026-08-24 実測。`https://www.p-a.jp/css/import.css` → `common.css` /
 * `style.css` 経由）。`shiryo` と違い罫線を持たない. */
/* 🚨 **この区分はパソコン幅（750px 以上）だけに効かせる（Bug #4710）。**
 * 移行元の完了画面は携帯幅に追従せず、器を 1200px のまま返す（移行元は携帯専用の
 * サイトを別に持つ）。**比べる相手が無いので、携帯幅は dev のいまの姿を動かさない。**
 * 素の `.pa-form-frame__top`（内余白 16px・中央寄せ・下の罫線）と素の
 * `.pa-form-frame__logo`（175 × 31）のままにする。
 *
 * 🚨 **囲いを外すと携帯幅まで動く。**下の 3 つの規則はどれも幅を持たない書き方が
 * できるが、**帯は携帯幅で `display: none` になっても札としては残る**ので、
 * 隣どうしを指す規則（`.pa-form-frame__band +`）は携帯幅でも当たってしまう。
 * その結果、直す前は 64px だった器が 80px になる（Greptile の指摘・2026-09-12）.
 */
/* 🚨 **ロゴを block にすることだけは、幅の囲いの外に置く（Bug #5957）。**
 * 完了画面のロゴは `<a>` で包んである。`img` が行内（inline）のまま `<a>` の中に
 * 並ぶと、文字の下がりぶんの空きが 4px 入る。携帯幅ではこの区分の囲い（750px
 * 以上）が当たらないため、器が **64px から 68px へ 4px 伸びた**（実測 2026-09-12
 * 08:06・dev 幅 375。`<a>` の高さ 35 に対し `img` の高さ 31）。
 *
 * 内訳: 内余白 16 ＋ ロゴ 31 ＋ 内余白 16 ＋ 下の罫線 1 = **64px**。`img` を block に
 * すると行内の配置から外れ、この 64px に戻る。
 *
 * **寸法は幅ごとに違う**（1367px 以上は 280 × 49・1366px 以下は 175 × 31・携帯幅は
 * 素の `.pa-form-frame__logo` の 175 × 31）ので、囲いの中に残す. */
.pa-form-frame__logo--linked {
	display: block;
}

/* 資料請求の完了画面のロゴは同じ絵を 2 枚置き、幅で出し分ける（Task #8912）。移行元は
   パソコン版と携帯版でロゴの代わりの字が違う（`header-form.php` の注釈）。隠す側は
   display: none なので読み上げにも出ない。

   🚨 **既定で携帯用を隠し、携帯幅の節だけで入れ替える**（サイト共通ヘッダーの
   `main.css` と同じ書き方・PR #8913 の外部レビュー）。2 つの幅の節で隠すと、749〜750px の
   端数の幅ではどちらも当たらず 2 枚とも出る。
   🚨 **囲いの類名を 1 つ足して、上の `display: block` より強くする。**同じ強さだと、
   書いた順で上の規則が勝つ場所に足したときに携帯用が出てしまう. */
.pa-form-frame__top--linked .pa-form-frame__logo--sp {
	display: none;
}

@media (max-width: 749px) {
	.pa-form-frame__top--linked .pa-form-frame__logo--pc {
		display: none;
	}

	.pa-form-frame__top--linked .pa-form-frame__logo--sp {
		display: block;
	}
}

@media (min-width: 750px) {
	.pa-form-frame__top--linked {
		padding: 0 0 0 41px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 0;
	}

	/* ロゴ画像。移行元のロゴは 280x49 の SVG（サイト共通ヘッダーと同じ画像
	   `assets/images/logo.svg`）で、枠の中に table-cell で縦中央寄せされる。ここは
	   枠を作らず画像自体を実寸で置き、flex の align-items: center で縦中央寄せを
	   再現する。**`display: block` は幅を問わないので囲いの外に置いてある**
	   （Bug #5957）. */
	.pa-form-frame__logo--linked {
		width: 280px;
		height: 49px;
	}

	/* 🚨 **帯が前に在るときは、その 40px を差し引いて 80px にする。**
	   移行元は帯（`<h1 id="description">`）を `#header.form_header` の**中**に置き、
	   高さ 120px の中で「帯 40 ＋ ロゴの枠 79」を積む。dev は帯をこの器の**外の前**に
	   置いている（`header-form.php` の注釈のとおり、中へ入れるとロゴが右へずれる）。
	   **そのままだと 40 ＋ 120 = 160px になり、移行元より 40px 高い。**

	   帯を持たない画面（いまは無い）では上の 120px がそのまま効く。**帯の有無で
	   合計が変わらない**書き方にしてある。

	   実測（移行元の本番・幅 1440px・2026-09-12 01:04）: 器 0〜120・ロゴの枠 40〜119・
	   ロゴの絵 280 × 49 が 55〜104（枠の中で縦中央）。dev もこの積み方になる. */
	.pa-form-frame__band + .pa-form-frame__top--linked {
		height: 80px;
	}
}

/* 🚨 **下限を 750px で閉じる。**閉じないと携帯幅にも当たり、素の 175 × 31 の
   ロゴが左へ 45px ずれる. */
@media screen and (min-width: 750px) and (max-width: 1366px) {
	.pa-form-frame__top--linked {
		padding-left: 45px;
	}

	/* 280x49 を 175px 幅に縮めた比率（移行元と同じ縮め方. img { width:100%;
	   height:auto } にあたる）. */
	.pa-form-frame__logo--linked {
		width: 175px;
		height: 31px;
	}
}

/* ヘッダー（eq・raiten・toiawase・houjin・ご紹介プログラムの案内ページ。`pa-form-frame--full-header`）の規則は
   `form-frame-header.css` へ移した（Bug #9159）。案内ページはこのファイルを読まないためである. */

/* ==================================================================
 * ヘッダー（shoukai。独自ロゴ・リンクなし）
 * ==================================================================
 * 移行元は `.header { width:954px; margin:0 auto }` ・
 * `.header .logo { float:left; margin:20px 0 0 }`
 * （`/css/mypage_common_new.css` 218〜227 行）。ロゴ画像は 118x64px
 * （`/images/mypage/header/logo.png` を実測。2026-08-24）。罫線は持たない。
 * 画面幅 540px 以下は器を画面幅いっぱいに広げる（同 CSS の `mypage_form02.css`
 * 244〜260 行）. */
.pa-form-frame__top--shoukai {
	max-width: 954px;
	margin: 0 auto;
	padding: 20px 16px;
	display: block;
	text-align: left;
	border-bottom: 0;
}

.pa-form-frame__logo--shoukai {
	display: inline-block;
	width: 118px;
	height: 64px;
}

@media (max-width: 540px) {
	.pa-form-frame__top--shoukai {
		max-width: none;
	}
}

/* ------------------------------------------------------------------
 * ご紹介プログラムの入力画面のロゴと主画像（Task #8959）
 * ------------------------------------------------------------------
 * 直す前の読み（`pa-verify-assets/A/8959-ご紹介の入力の携帯のロゴの直す前-0930/走行1/`）で、移行元と次の差があった.
 *
 * | 幅 | 移行元（通常版 `mypageform_03`） | dev（直す前） |
 * |---|---|---|
 * | 1440 | ロゴ 243,20・主画像の上端 99 | ロゴ 259,20（+16）・主画像の上端 156（+57） |
 * | 375 | ロゴ `logo.gif` 10,15 65×42.91・主画像 0,67.91 375 幅 | ロゴ 16,20 118×64・主画像 16,156 343 幅 |
 *
 * 🚨 **パソコン幅の値の出典。**ヘッダーは `/css/mypage_common_new.css` の `.header { width: 954px }` と
 * `.header .logo { margin: 20px 0 0 }` で、左の内余白を持たない（dev の 16px が +16 の元）。主画像の器は
 * `/css/mypage_form03.css` の `.container_full { margin: 15px auto 0 }` で、ロゴの下端 84 から 15px 下に始まる
 * （dev は本文の器の上の内余白 48px と、ロゴが行内の絵のままで入る 4px の下がりが +57 の元）.
 *
 * 🚨 **携帯幅の値の出典。**移行元の携帯版は `.container { border-top: 5px solid #D6000F }`（`/sp/form/myintro/mcss/common.css`）
 * の中にヘッダーを置く。ヘッダーの内余白とロゴの幅は版で違う.
 *   - 通常版: `header.main { padding: 10px }`（同じ CSS）。ロゴの幅は 65px（`header.main h1 { width: 5rem }` を、
 *     この版の CSS の読み込み順で 1rem = 13px として測った値）。ヘッダーの高さ 62.91
 *   - 成婚退会者様限定版: `header.main { padding: 12px 5.312% 11px 6.25% }`（`/sp/form/myintro/css/mypage_form02.css`）。
 *     ロゴの幅は 50px（1rem = 10px）。ヘッダーの高さは実測 61 で、下の内余白 11px にロゴを包む `figure`（行内の箱）の
 *     下がり 5px が足される。dev は `figure` を持たないので、下の内余白を 16px と書いて同じ高さにする
 *   - 主画像はヘッダーの直後に画面の幅いっぱいで始まる（`header.mxw`）
 * dev は 1 ページで版をラジオボタン（`input[name="shoukai-program"]`）で切り替える（`pa-forms.js` の
 * `setupShoukaiIntro`）。版を選んでいないときは通常版が先頭に出るので、既定を通常版の値にし、成婚退会者様限定版を
 * 選んだときだけ `:has()` で切り替える.
 * 種類ごとのページ（成婚退会者様限定版 `/form/mypageform_02/`・Task #9811）はラジオを持たないので、
 * body の class `pa-form-frame--shoukai-premium`（`header-form.php`）でも同じ値に切り替える.
 *
 * 🚨 **完了画面には当てない。**入力画面だけの修飾クラス（`--shoukai-input`）と、入力画面だけが使う器
 * （`.pa-form-frame__wrapper--shoukai`。完了画面は器を使わない）に書く。完了画面は Bug #8770 が扱う. */
.pa-form-frame__shoukai-logo {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
}

.pa-form-frame__top--shoukai-input .pa-form-frame__logo {
	display: block;
}

.pa-form-frame__top--shoukai-input .pa-form-frame__logo--shoukai-sp {
	display: none;
}

@media (min-width: 750px) {
	.pa-form-frame__top--shoukai-input {
		padding: 20px 0 0;
	}

	/* 器と主画像の間の 15px は、下の「灰色の地と白い札」の節が器の外余白として持つ（Task #9444）. */

	/* 成婚退会者様限定版の主画像は、移行元が絵の元の寸法（941×533）のまま置く（`mypageform_02.php` 42 行・幅の指定が無い）.
	   プラグインの `.pa-shoukai-premium__hero img { width: 100% }` は器の 943px へ 2px 引き伸ばすので、パソコン幅だけ元の寸法に戻す
	   （下見 `pa-verify-assets/A/8959-ご紹介の入力の携帯のロゴの下見-0930/走行1/` で 943×534.13 対 941×533）。通常版は移行元も 943px に広げる. */
	.pa-form-frame__wrapper--shoukai .pa-shoukai-premium__hero img {
		width: auto;
	}
}

@media (max-width: 749px) {
	.pa-form-frame__top--shoukai-input {
		max-width: none;
		padding: 10px;
		border-top: 5px solid #d6000f;
	}

	.pa-form-frame__top--shoukai-input .pa-form-frame__logo--shoukai-pc {
		display: none;
	}

	.pa-form-frame__top--shoukai-input .pa-form-frame__logo--shoukai-sp {
		display: block;
		width: 65px;
		height: auto;
	}

	body:has(input[name="shoukai-program"][value="premium"]:checked) .pa-form-frame__top--shoukai-input,
	body.pa-form-frame--shoukai-premium .pa-form-frame__top--shoukai-input {
		padding: 12px 5.312% 16px 6.25%;
	}

	body:has(input[name="shoukai-program"][value="premium"]:checked) .pa-form-frame__top--shoukai-input .pa-form-frame__logo--shoukai-sp,
	body.pa-form-frame--shoukai-premium .pa-form-frame__top--shoukai-input .pa-form-frame__logo--shoukai-sp {
		width: 50px;
	}

	/* 主画像は器の左右の内余白（16px）を打ち消して画面の幅いっぱいにし、ヘッダーの直後に置く.
	   プラグインの `.pa-form--table .pa-shoukai-normal__hero { margin: 0 }`（詳細度 0,2,0）に勝つよう、器の類名を前に足す. */
	.pa-form-frame__wrapper--shoukai {
		padding-top: 0;
	}

	.pa-form-frame__wrapper--shoukai .pa-form--table .pa-shoukai-normal__hero,
	.pa-form-frame__wrapper--shoukai .pa-form--table .pa-shoukai-premium__hero {
		margin-right: -16px;
		margin-left: -16px;
	}
}

/* ------------------------------------------------------------------
 * ご紹介プログラムの入力画面の灰色の地と白い札（Task #9444・親の Bug #9162 の表の 6 番目）
 * ------------------------------------------------------------------
 * 移行元は灰色のページの地の上に白い札を置き、主画像から情報セキュリティの区画までをその中に収める.
 * 直す前の読み（2026-10-05・`pa-verify-assets/A/9444-直す前-1005/`）で、移行元と次の差があった.
 *
 * | 幅 | 移行元（通常版 `mypageform_03`） | dev（直す前） |
 * |---|---|---|
 * | 1440 | html・body の地 rgb(245, 245, 245)。札 `div.container_full` は左 248.5・幅 943・上端 99（外余白の上 15）・下の内余白 30・地 白・角 5px・影 `rgba(125, 125, 125, 0.3) 0 0 5px 1px` | body の地は白。器は同じ左と幅で、上端 84（上の内余白 15）・下の内余白 48・地 透明・角 0・影 なし |
 * | 375 | body の地 rgb(245, 245, 245)。札 `div#wrap.paIntro` は左 0・幅 375・上端 67.9・地 白・影 `rgba(0, 0, 0, 0.2) 0 -1px 6px 0` | body の地は白。器は同じ箱で、地 透明・影 なし |
 *
 * 札は本文の器（`main.pa-form-frame__wrapper--shoukai`）に持たせる。器は主画像から情報セキュリティの区画まで（プラグインの塊）を
 * 包み、フッターのリンクの手前で終わる。移行元の札と同じ範囲である。1440 で器の上の内余白 15 を外余白へ移すのは、札の上端を 99 にして、
 * 主画像の上端（99）を動かさないためである。下の内余白 50 は、移行元の「区画の下の外余白 20＋札の下の内余白 30」と同じ距離にする
 * （dev の区画は下の外余白を持たない）.
 *
 * 🚨 **完了画面には当てない。**完了画面は器を使わないので、`body` の直下にこの器があるときだけ地を塗る.
 */
html:has(> body > main.pa-form-frame__wrapper--shoukai),
body:has(> main.pa-form-frame__wrapper--shoukai) {
	background-color: rgb(245, 245, 245);
}

.pa-form-frame__wrapper--shoukai {
	background-color: #fff;
}

@media (min-width: 750px) {
	.pa-form-frame__wrapper--shoukai {
		margin-top: 15px;
		padding-top: 0;
		padding-bottom: 50px;
		border-radius: 5px;
		box-shadow: rgba(125, 125, 125, 0.3) 0 0 5px 1px;
	}
}

@media (max-width: 749px) {
	.pa-form-frame__wrapper--shoukai {
		box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 0;
	}

	/* 携帯幅の移行元は html の地を持たない（透明）。body だけを灰色にする. */
	html:has(> body > main.pa-form-frame__wrapper--shoukai) {
		background-color: transparent;
	}
}

/* ------------------------------------------------------------------
 * 社員紹介の来店予約のパソコン幅の灰色の地と白い札（Bug #10227・事業部の指摘 W153）
 * ------------------------------------------------------------------
 * 移行元のパソコン版（`form/view/intro/reservation_intro_02.php`）は、ご紹介プログラムと同じく灰色の地の上に白い札を置く.
 * 直す前の読み（2026-10-10・`pa-verify-assets/A2/W153-社員紹介の白い札-1010/`）で、移行元と次の差があった.
 *
 * | 幅 1440 | 移行元 | dev（直す前） |
 * |---|---|---|
 * | `html`・`body` の地 | rgb(245, 245, 245)（`css/mypage_common_new.css` の `html`） | 白 |
 * | 札 | `div.container_full`: 左 248.5・幅 943・上端 99・外余白 `15px auto 0`・下の内余白 30・白・角 5px・影 `rgba(125, 125, 125, 0.3) 0 0 5px 1px`（`css/reservation_intro_form02.css`） | 無い |
 * | 札の中のリンク（「支店一覧 >」・「個人情報の取り扱いについて」・「情報セキュリティを見る」） | #cf3319・下線なし・hover で下線（同じ CSS の `.main_full a`） | #000・下線あり |
 *
 * リンクの行は件 3 の比較（2026-10-12・`pa-verify-assets/A2/10230-件3の比較-1012/`）で見つけた。移行元の `.main_full` は札の中身の包みで、
 * dev では札の包み `.pa-intro02-card` が同じ範囲を持つ。ご紹介プログラム（`shoukai`）も同じ色に合わせてある（`pa-forms.css` の Task #9812）.
 *
 * 札の包み `.pa-intro02-card` は `header-form.php` が主画像の前で開き、`footer-form.php` が本文の器（`main`）の後ろで閉じる.
 * 包みは入力画面と確認表示に出て、完了画面には出ない（移行元も確認画面 `reservation_intro_02_conf.php` だけが同じ札を持つ）.
 * 器 `main.pa-form-frame__wrapper--wide`（上限 1100）は札の中で札の幅（943）いっぱいになる。表より上の塊と入力の表は、左の外余白を
 * 「器の幅と 943px の差の半分 ＋ 32px」で決めている（Bug #9325・Bug #8521）ので、器が 943 になっても札の左から 32px の位置に残る.
 * 主画像の上の外余白 15 は札の上の外余白へ移す（確認表示で主画像を隠しても、札の上端を 99 に保つため）.
 *
 * 札の下は、移行元と同じく「最後の段落の下端 → 札の下端」を 30（札の下の内余白）だけにする。dev の器は下の内余白 48 を持つので、
 * 札の中では 0 にする（下見の 2 回目・`pa-verify-assets/A2/W153-社員紹介の白い札-1010/下見2/`。器の下端が最後の段落の 73 下にあった）.
 * 最後の段落（「お申し込みが可能な方」の本文 `.pa-admission__body`）の下の外余白 25 は、`pa-forms.css` の Bug #10231 の節が 0 にする.
 *
 * 🚨 **携帯幅には当てない。**移行元のスマホ版は別の型紙（`sp_reservation_intro_02.php`）で、札を持たない.
 */
@media (min-width: 750px) {
	html:has(> body > .pa-intro02-card),
	body:has(> .pa-intro02-card) {
		background-color: rgb(245, 245, 245);
	}

	.pa-intro02-card {
		max-width: 943px;
		margin: 15px auto 0;
		padding-bottom: 30px;
		border-radius: 5px;
		background-color: #fff;
		box-shadow: rgba(125, 125, 125, 0.3) 0 0 5px 1px;
	}

	.pa-intro02-card > .pa-intro02-main {
		margin-top: 0;
	}

	.pa-intro02-card > .pa-form-frame__wrapper {
		padding-bottom: 0;
	}

	.pa-intro02-card a {
		color: #cf3319;
		text-decoration: none;
	}

	.pa-intro02-card a:hover {
		text-decoration: underline;
	}
}

/* ------------------------------------------------------------------
 * ご紹介プログラムの完了画面のヘッダー（Bug #8770）
 * ------------------------------------------------------------------
 * 直す前の読み（`pa-verify-assets/A/8770-ご紹介の外枠の直す前-0930/走行1/`）で、移行元と次の差があった.
 *
 * | 幅 | 移行元（通常 `_03`・成婚退会者様限定 `_02`） | dev（直す前・2 つの版で同じ） |
 * |---|---|---|
 * | 1440 | ヘッダー 954×84・ロゴ 243,20 118×64。`_02` だけ sitename の絵 361,20 136×64 | ヘッダー 954×108・ロゴ 259,20・sitename の絵なし |
 * | 375 | 上端に 5px の赤い線。`_03` は内余白 10px・高さ 62.91、`_02` は内余白 12px 5.312% 11px 6.25%・高さ 65.91。ロゴ `logo.gif` 65×42.91 | 赤い線なし・内余白 20px 16px・高さ 108・パソコン版のロゴ 118×64 |
 *
 * 🚨 **パソコン幅の値の出典。**`/css/mypage_common_new.css` の `.header .logo { float: left; margin: 20px 0 0 }` と
 * `.header .logo h1, .header .logo p { float: left }`。ロゴと sitename の絵は左から隙間なく並ぶ。左の内余白は持たない.
 *
 * 🚨 **携帯幅の値の出典。**`/sp/form/myintro/mcss/common.css` の `.container { border-top: 5px solid #D6000F }` と
 * `header.main { padding: 10px }`。`_02` は `/sp/form/myintro/css/mypage_form02.css` の `header.main { padding: 12px 5.312% 11px 6.25% }`.
 * ロゴの幅は `header.main h1 { width: 5rem }` で、完了画面は 2 つの版とも 1rem = 13px の読み込み順なので 65px になる
 * （入力画面の `_02` は読み込み順が違い 50px になる。上の Task #8959 の節）。完了画面の `_02` は `figure` の下がりが出ず、
 * 高さは内余白とロゴの和（12 + 42.91 + 11）である.
 *
 * 版は `header-form.php` がヘッダーの修飾クラス（`--shoukai-normal`・`--shoukai-premium`）に載せる。入力画面の
 * `--shoukai-input` とは別の類名なので、入力画面には当たらない. */
.pa-form-frame__top--shoukai-thanks .pa-form-frame__logo {
	display: block;
}

.pa-form-frame__top--shoukai-thanks .pa-form-frame__logo--shoukai-sp {
	display: none;
}

.pa-form-frame__shoukai-sitename {
	display: block;
	width: 136px;
	height: 64px;
}

@media (min-width: 750px) {
	/* 素の `.pa-form-frame__top` の `place-content: center` は flex の並びも中央へ寄せる（下見 走行 2 でロゴが x=661・
	   移行元は 243）。左寄せに戻す. */
	.pa-form-frame__top--shoukai-thanks {
		display: flex;
		place-content: normal;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20px 0 0;
	}
}

@media (max-width: 749px) {
	.pa-form-frame__top--shoukai-thanks {
		max-width: none;
		padding: 10px;
		border-top: 5px solid #d6000f;
	}

	.pa-form-frame__top--shoukai-thanks.pa-form-frame__top--shoukai-premium {
		padding: 12px 5.312% 11px 6.25%;
	}

	.pa-form-frame__top--shoukai-thanks .pa-form-frame__logo--shoukai-pc,
	.pa-form-frame__top--shoukai-thanks .pa-form-frame__shoukai-sitename {
		display: none;
	}

	.pa-form-frame__top--shoukai-thanks .pa-form-frame__logo--shoukai-sp {
		display: block;
		width: 65px;
		height: auto;
	}
}

/* 共通フッター（eq・raiten・toiawase・houjin ほか。関連キーワード・認証マーク・規程へのリンク・著作権）は
   `form-frame-footer.css` へ移した（Bug #10084）. */

/* ==================================================================
 * フッター（shoukai。リンク 3 本と著作権の独自フッター）
 * ==================================================================
 * 移行元は `.footer { width:954px; margin:0 auto }` ・
 * `.footer .links { font-size:85%; margin:25px 0 }` ・
 * `.footer div.copy p.copy { font-size:77%; line-height:26px }`
 * （`/css/mypage_common_new.css` 249〜283 行）。基準の文字は 13px
 * （同 CSS の `body { font:13px/1.231 … }`）なので、85% は約 11.05px、77% は
 * 約 10.01px にあたる. */
.pa-form-frame__footer--shoukai {
	max-width: 954px;
	margin: 0 auto;
	padding: 0 16px 20px;
	border-top: 0;
	color: #4a453d;
	font-size: 16px;
	line-height: normal;
}

.pa-form-frame__shoukai-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 16px;
	margin: 0 0 16px;
	padding: 0;
	font-size: 0.69em; /* 13px 基準の 85% ≈ 11.05px を 16px 基準で換算 */
}

.pa-form-frame__shoukai-links a {
	color: #999;
	text-decoration: none;
}

.pa-form-frame__shoukai-links a:hover,
.pa-form-frame__shoukai-links a:focus-visible {
	text-decoration: underline;
}

.pa-form-frame__shoukai-copyright {
	margin: 0;
	font-size: 0.63em; /* 13px 基準の 77% ≈ 10.01px を 16px 基準で換算 */
	line-height: 1.63em; /* 26px を 16px 基準で換算 */
}

@media (max-width: 540px) {
	.pa-form-frame__footer--shoukai {
		max-width: none;
	}
}

/* 社員紹介（`reservation_intro_02`）の入力画面も、この型のフッターを使う（Bug #8512）。
 * 移行元のパソコン版（`form/view/intro/reservation_intro_02.php`）は同じ
 * `/css/mypage_common_new.css` を読み、上の既定の値とは次の点が違うので、
 * キーの類名で絞って写す.
 *
 * ご紹介プログラム（`shoukai`）の入力画面と完了画面も、移行元のパソコン版は同じ CSS の同じ値である
 * （Bug #8770 の直す前の読み `pa-verify-assets/A/8770-ご紹介の外枠の直す前-0930/走行1/`。リンクの間隔 30・
 * 行の高さ 13.60・著作権の右端 1184・#221815・行の高さ 26・フッターの高さ 84.59）。同じ選択子に足した.
 *
 *   - リンクの間隔は `li { margin: 0 15px }` の 2 つ分で 30px。行送りは
 *     `body { font: 13px/1.231 }` を受け継ぎ、下の外余白は `.links { margin: 25px 0 }`
 *   - 著作権は `div.copy { float: right; margin: 0 13px 20px 0 }` で右に寄せる。
 *     字の色は `body` の #221815
 *   - 左右の内余白は右の 13px に合わせ、リンクの中心がずれないよう左も 13px にする
 *
 * 社員紹介の携帯幅は、下の Bug #9819 の節で移行元の素の並びを写す。ご紹介プログラムの携帯幅は
 * 移行元の CSS が当たるので、その下の節で写す. */
@media (min-width: 750px) {
	.pa-form-frame__footer:is(.pa-form-frame__footer--key-shoukai, .pa-form-frame__footer--key-reservation_intro_02) {
		padding: 0 13px 20px;
	}

	.pa-form-frame__footer:is(.pa-form-frame__footer--key-shoukai, .pa-form-frame__footer--key-reservation_intro_02) .pa-form-frame__shoukai-links {
		gap: 0 30px;
		margin-bottom: 25px;
		line-height: 1.231;
	}

	.pa-form-frame__footer:is(.pa-form-frame__footer--key-shoukai, .pa-form-frame__footer--key-reservation_intro_02) .pa-form-frame__shoukai-copyright {
		color: #221815;
		line-height: 26px;
		text-align: right;
	}
}

/* ご紹介プログラムのパソコン幅は、リンクの上にも `.footer .links { margin: 25px 0 }` の 25px を置く（Task #9812）.
 * 移行元（`form/view/intro/mypageform_0{2,3}.php`）はリンクを白い箱の下 33px に置くが、dev は 8px で、箱の下端に重なって見えた
 * （直す前の読み `pa-verify-assets/A/9812-直す前の読み-1008/走行1/` の `L-02-pc.png`・`D-02-pc.png`）.
 * 社員紹介（`reservation_intro_02`）も同じ 25px を置く（Bug #10227）。移行元はフッター `div.footer` の上端を白い札の下 25px に置く
 * （直す前の読み `pa-verify-assets/A2/W153-社員紹介の白い札-1010/`・札の下端 3849.47・フッターの上端 3874.47）. */
@media (min-width: 750px) {
	.pa-form-frame__footer:is(.pa-form-frame__footer--key-shoukai, .pa-form-frame__footer--key-reservation_intro_02) .pa-form-frame__shoukai-links {
		margin-top: 25px;
	}
}

/* ご紹介プログラム（`shoukai`）の携帯幅のフッター（Bug #8770）.
 *
 * 移行元の携帯版（入力画面・完了画面とも `form/view/intro/sp_mypageform_0{2,3}*.php`）は、`footer > ul.internal_links` と
 * `p.copy` を `.container` の中に置き、`.container { border-bottom: 5px solid #D6000F }` がフッターの直後に下の赤い線を引く
 * （`/sp/form/myintro/mcss/common.css`）。直す前の読みの値は次のとおり.
 *
 *   - リンク: 左端 30px（`.internal_links { margin: 0 30px; text-align: left }`）に縦に 1 本ずつ。1 本の高さ 33
 *     （`a { padding: 10px 0; float: left; line-height: 1rem }`・`li:after { clear: both }`）。字は 13px・#b20f16
 *   - リンクの頭の三角（`a:before` の `../mimg/triangls.png`・8×8・右の外余白 5px）は、絵が写しに無く何も描かれない。
 *     場所だけを取るので、同じ寸法の空の箱を置く
 *   - 著作権: 幅いっぱい・地 #7f7f7f・白い字・11.7px・行の高さ 30px・中央寄せ（`.copy`）
 *
 * 入力画面の成婚退会者様限定（`sp_mypageform_02.php`）だけ、CSS の読み込み順が違い 1rem = 10px になる。リンクの行の高さが
 * 10px（1 本の高さ 30）、著作権の字が 9px である。入力画面は 1 ページで版をラジオボタンで切り替えるので、上の Task #8959 の
 * ヘッダーと同じく `:has()` で見る。書体の差（移行元の Arial・ヒラギノ角ゴ）はページ全体の話なので、ここでは扱わない. */
@media (max-width: 749px) {
	.pa-form-frame__footer--key-shoukai {
		padding: 0;
		border-bottom: 5px solid #d6000f;
	}

	.pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-links {
		display: block;
		margin: 0 30px;
		font-size: 13px;
		line-height: 13px;
		text-align: left;
	}

	.pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-links li {
		display: flow-root;
	}

	.pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-links a {
		float: left;
		padding: 10px 0;
		color: #b20f16;
	}

	.pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-links a::before {
		content: "";
		float: left;
		width: 8px;
		height: 8px;
		margin-right: 5px;
	}

	.pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-copyright {
		background-color: #7f7f7f;
		color: #fff;
		font-size: 11.7px;
		line-height: 30px;
		text-align: center;
	}

	body:has(input[name="shoukai-program"][value="premium"]:checked) .pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-links,
	body.pa-form-frame--shoukai-premium .pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-links {
		line-height: 10px;
	}

	body:has(input[name="shoukai-program"][value="premium"]:checked) .pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-copyright,
	body.pa-form-frame--shoukai-premium .pa-form-frame__footer--key-shoukai .pa-form-frame__shoukai-copyright {
		font-size: 9px;
	}
}

/* 社員紹介の来店予約（`reservation_intro_02`）の入力画面の携帯幅のフッター（Bug #9819・ユーザー決定 D830 で移行元どおりに戻した）.
 *
 * 移行元の携帯版 `form/view/intro/sp_reservation_intro_02.php` は `<footer><ul class="internal_links">…</ul><p class="copy">…</p></footer>`
 * を出す。サイトの CSS 6 本（`sp/css/` の 3 本と `sp/form/myintro/css/` の 3 本）に `footer` と `.internal_links` に当たる規則が
 * 1 本も無く、初期化（`sp/css/basic.css`）と `sp/css/style.css` の `a { color: #000000; text-decoration: underline }` のままで出る.
 * 幅 375 の値（`pa-verify-assets/B/8512-下見3-0926/記録.json`）は次のとおり.
 *
 *   - リンク 3 本: 左端 0 に縦に 1 本ずつ。上端はフッターの上から 3・23・43（行の高さ 20）。字は 13px・黒・下線あり
 *   - 著作権: 左端 0・上端 63・13px・#333
 *   - フッターの高さ 80（4 行 × 20）。内余白も外余白も無い
 *
 * 行き先は変えない。移行元の携帯版の「個人情報の取扱いについて」は `/sp/policy/privacy/about.html` を指すが、移行元の
 * `.htaccess` がこれを `https://tameny.jp/privacy/` へ転送する（`tests/pa-cms-htaccess-redirects/legacy-htaccess-redirects.tsv`
 * 289 行）。dev のリンクは、はじめから同じページを指している. */
@media (max-width: 749px) {
	.pa-form-frame__footer--key-reservation_intro_02 {
		max-width: none;
		padding: 0;
		color: #333;
		font-size: 13px;
		line-height: normal;
		text-align: left;
	}

	.pa-form-frame__footer--key-reservation_intro_02 .pa-form-frame__shoukai-links {
		display: block;
		margin: 0;
		font-size: 13px;
		text-align: left;
	}

	.pa-form-frame__footer--key-reservation_intro_02 .pa-form-frame__shoukai-links a {
		color: #000;
		text-decoration: underline;
	}

	.pa-form-frame__footer--key-reservation_intro_02 .pa-form-frame__shoukai-copyright {
		font-size: 13px;
		line-height: normal;
		text-align: left;
	}
}

/* --- 完了画面の入れ物（Bug #2231）---
 *
 * **完了画面は幅も余白もここで決めない。**フォーム部品の完了画面用 CSS
 * （`plugins/pa-forms/assets/css/pa-forms.css` の `.page-content:has(.pa-thanks-body)`）が、
 * 柱 1,130px（面 1,100px ＋ 左右 15px）・OTOCON は 1,140px ＋ 左右 20px と定めている。
 * その CSS は `page.php` と同じ 2 段の器（`.page-content` と `.page-content__body`）を
 * 前提にしており、`page-templates/form-frame.php` の完了画面の分岐が同じ 2 段を出す。
 *
 * ここで入力画面の器（`.pa-form-frame__wrapper`）を流用しないのは、次の 2 つが
 * 完了画面の中身を壊すためである。
 *
 *   - **幅の修飾子**。資料請求の入力画面は 600px（`--shiryo`）だが、移行元の完了画面は
 *     器を全幅にしている（2026-08-28 の実測。`#contents` が x=0 w=1440）
 *   - **左右 16px の内余白と `overflow: clip`**。完了画面の中身は左右の余白を自分で
 *     決めており、帯の画像を器いっぱいに広げる
 *
 * この規則が値を 1 つも持たないのは意図である。入れ物としての名前だけを与え、
 * 寸法はすべて完了画面用 CSS に任せる。名前を与えるのは、入力画面の器と
 * 取り違えないようにするためと、あとから完了画面だけを狙えるようにするためである. */
.pa-form-frame__thanks {
	/* 寸法は pa-forms.css の完了画面用 CSS が持つ（上の説明を参照）。 */
	margin: 0;
	padding: 0;
}

/* --- 資料請求の完了画面だけ、本文のリンクを金茶にする（Bug #6954）---
 *
 * 移行元 `/form/request/thanks/` は `/spiral/request/css/style.css` を読み、その
 * 24〜29 行が `main a { color: #A08046 }` を持つ。**この宣言を持つ CSS は移行元の
 * フォーム 6 系統のうち資料請求だけが読み込む**（婚活EQ診断が読む
 * `/spiral/eq/css/style.css`・共通の `/css/page_inquiry.css`・OTOCON の
 * `/form/css/otocon.css` はいずれも `main a` の規則を持たない。Bug #6954 で数えた）。
 *
 * dev は移行元のこの CSS を運んでいない。そのためリンクは `main.css` の
 * `a { color: var(--pa-color-link) }`（= `--pa-palette-ink-legacy` = #000）のままで、
 * PDF へのリンクが黒く出ていた。
 *
 * 実測（2026-09-18 03:09:17〜03:13:28・実ブラウザ・両サイト・読み込み 50 回・失敗 0）:
 * PDF リンクの computed color は 移行元 `rgb(160, 128, 70)` ／ dev `rgb(0, 0, 0)`。
 * 幅 1440 と 375 の両方で同じ値だった。下線はどちらも `underline` で一致している。
 *
 * 🚨 **7 件の完了画面のうち資料請求だけに当てる。**ほかの 6 件は移行元でもこの色を
 * 持たないので、器の名（`.pa-form-frame__thanks`）だけで当てると 6 件の側が
 * 移行元から離れる。当たり先を分けるため `header-form.php` が
 * `pa-form-frame__thanks--<識別子>` を出している. */
.pa-form-frame__thanks--shiryo a {
	color: #a08046;
}

/* --- 資料請求の完了画面だけ、先頭へ戻るの押しボタンを画面の端まで寄せる（Bug #7385）---

   共通部品の既定は**中央に寄せた 1100px の柱**である（`assets/css/main.css` の
   `.pa-page-top`。`width: var(--pa-inner-ratio); max-width: 1100px; margin: 0 auto`）。
   これは移行元の完了画面 4 件（婚活EQ診断・来店予約・お問い合わせ・法人。器が 1100px）
   と合うが、**資料請求だけ移行元の器が全幅**なので、その柱のぶん内側へ寄ってしまう。

   実測（2026-09-18 19:15・移行元・実ブラウザ）:

     幅 1440 … 移行元の絵 x=1393 w=47（右端 1440・`.pagetop` は `float: right`）
               器 `#contents` は x=0 w=1440
     幅 375  … 移行元の絵 x=328 w=47（右端 375）／器 x=0 w=375

   dev（2026-09-18 19:08・版 80d4f9ef）は器が 1440 で x=170 w=1100、375 で x=18.75 w=337.5
   だった。**絵は器の中で右そろえなので、絵の右端は器の右端（1270 / 356.25）を超えない。**

   🚨 **共通部品の芯（`.pa-page-top`）は触らない。**10 種類以上の区分が使い回しており、
   芯を変えるとほかの画面が移行元から離れる。**型紙が出す識別子の修飾クラス**
   （`header-form.php` の `pa-form-frame__thanks--<識別子>`）で資料請求だけに絞る。
   詳しさは (0,2,0) で、既定の (0,1,0) に勝つ。このファイルは `array( 'pa-main' )` を
   依存に持つので `main.css` の後に読み込まれる. */
.pa-form-frame__thanks--shiryo .pa-page-top--form {
	width: 100%;
	max-width: none;
}

/* --- 資料請求の完了画面だけ、花柄の背景を敷く（Bug #2230）---

   移行元は `spiral/request/css/style.css` 47〜54 行で、全幅の器 `main#complete` に `bg.png` を
   上下に繰り返して敷く（幅は実寸・上端の中央から）。入力画面の器（上の `.pa-form-frame__wrapper--spiral`・
   Bug #8727）と同じ絵（`spiral-bg.png`・md5 0fcba776…）を使う。dev の完了画面で全幅なのは外枠の
   `main#site-main` だけなので、そこへ敷く。上端はどちらも幅 1440 で 192（パンくずの下）である.
   外枠の識別子 `--shiryo` は広告・LP の完了画面にも付くので、本文の修飾クラスを `:has()` で見て標準の資料請求だけに絞る.

   携帯幅の絵は別の絵（`spiral-bg-sp.png`）で、下の「標準フォームの完了画面 4 本の携帯幅」の節が敷く. */
@media (min-width: 750px) {
	.pa-form-frame__thanks:has(.pa-thanks-body--request:not(.pa-thanks-body--request-ad)) {
		background-image: url(../images/form/spiral-bg.png?ver=e2430e6bf4fa);
		background-position: top center;
		background-size: auto;
		background-repeat: repeat-y;
	}
}

/* --- 標準フォームの完了画面 4 本の携帯幅: 先頭へ戻るの押しボタンを出さず、資料請求に花柄の背景を敷く（Bug #2230）---

   幅 375 の比べる相手は移行元のスマホ版の型紙（`/sp/form/<種類>/thanks/`）である（統括の判断 2026-10-01 10:38）。
   その型紙（`sp_*_thanks.php`）はこの押しボタンを持たない（`main.css` の `.pa-page-top--form` の節の説明と同じ事実）。
   資料請求・婚活EQ診断・お問い合わせ・法人の 4 本だけに絞る。詳しさは (0,3,0) 以上で、`main.css` の `display: block`（(0,1,0)）に勝つ.

   🚨 **外枠の識別子（`--shiryo`・`--eq`）だけで当てない**（PR #9153 の Greptile の指摘）。広告・LP 専用フォームの完了画面も、
   外枠の識別子は `shiryo` や `eq` に読み替えられる。本文の修飾クラス（`pa-forms` の `--request-ad`・`--eq-lp`・
   資料請求の LP は `--request-lp`）を `:has()` で見て、標準の 4 本だけに絞る. */
@media (max-width: 749px) {
	.pa-form-frame__thanks:has(:is(.pa-thanks-body--request:not(.pa-thanks-body--request-ad), .pa-thanks-body--eq:not(.pa-thanks-body--eq-lp))) .pa-page-top--form,
	.pa-form-frame__thanks--toiawase:has(.pa-thanks-body--inquiry) .pa-page-top--form,
	.pa-form-frame__thanks--houjin:has(.pa-thanks-body--inquiry) .pa-page-top--form {
		display: none;
	}

	/* 資料請求の花柄の背景の携帯版（`sp/spiral/request/css/style.css` 42〜48 行の `bg_sp.png`・幅 100%。入力画面と同じ `spiral-bg-sp.png`・md5 4ede47b7…） */
	.pa-form-frame__thanks:has(.pa-thanks-body--request:not(.pa-thanks-body--request-ad)) {
		background-image: url(../images/form/spiral-bg-sp.png?ver=33885a01b514);
		background-position: top center;
		background-size: 100% auto;
		background-repeat: repeat-y;
	}
}

/* ==================================================================
 * 婚活 EQ 診断の広告 LP 15 本の、携帯幅の LP 専用のヘッダー（Bug #8943）
 *
 * 移行元の携帯版（`form/view/sp_eq_lp*.php` ほか・写し 68e3190cb）は共通のヘッダーを持たず、
 * `#header_lp` にロゴと押しボタンだけを置く。移行元は幅 640px の器 `#main-contents` を
 * `zoom: 50%` で縮めて出すので、CSS の値の半分が画面の寸法になる（`sp/form/eqlp/css/common.css`）:
 *   `#wrap { margin-top: 10px }`（縮める器の外）→ 上 10
 *   `#header_lp { margin: 0 0 15px }` → 下 7.5
 *   `#header-inner { height: 53px }` → 26.5
 *   `#logo { float: left; padding-left: 10px; padding-right: 20px }` → 左 5・右 10
 * 実測（幅 375・`pa-verify-assets/A/8943-直す前-0930/走行1/`）: 器 27.5,10 320×26.5・ロゴ 32.5,10 170×26.5・
 * 押しボタン 212.5,10 135×26.5（15 本とも同じ）。
 *
 * 🚨 **共通ヘッダーは消さず、見える部分（ロゴ・MENU・引き出し）だけを隠す。**帯の `h1`
 * （`.site-header__page-name`）は、携帯幅では `main.css` が画面の外へ出して読み上げに残している。
 * ヘッダーごと `display: none` にすると、この `h1` も消える（リーダーの判断・2026-09-30 06:5x・案 A）.
 *
 * パソコン幅は対象外で、LP 専用のヘッダーを出さない（移行元のパソコン版は共通の枠を持つ）. */
.pa-eqlp-header {
	display: none;
}

@media (max-width: 749px) {
	.pa-form-frame--eq-lp .site-header {
		position: static;
		box-shadow: none;
		background: none;
	}

	.pa-form-frame--eq-lp .site-header__main {
		display: none;
	}

	.pa-form-frame--eq-lp .pa-eqlp-header {
		display: block;
		width: 320px;
		margin: 10px auto 7.5px;
	}

	.pa-eqlp-header__inner {
		display: flow-root;
		height: 26.5px;
	}

	.pa-eqlp-header__logo,
	.pa-eqlp-header__mail {
		float: left;
		margin: 0;
	}

	.pa-eqlp-header__logo {
		padding: 0 10px 0 5px;
	}

	.pa-eqlp-header__logo img {
		display: block;
		width: 170px;
		height: 26.5px;
	}

	.pa-eqlp-header__mail img {
		display: block;
		width: 135px;
		height: 26.5px;
	}
}

/* ==================================================================
 * フォームの枠のヘッダーを出さない広告フォーム `eq_ad`・`eq_as`（Task #8960）
 *
 * 移行元（写し 68e3190cb の `form/view/eq_ad.php`・`eq_as.php` ほか）は、本文の頭の絵がページの上端から始まる。
 * 直す前の dev は、ヘッダー（1440 で 120・375 で 61）の下に、器の上の内余白 48px と題名の文字見出し
 * （`.pa-form-frame__page-name`・字 28 ＋下の余白 24 ＝ 52px）を挟んで絵を出していた（主画像の上端 1440 で 220・375 で 161）。
 * ヘッダーと文字見出しは `header-form.php`・`page-templates/form-frame.php` が出さない。ここでは器の上の内余白だけを 0 にする.
 *
 * 🚨 **土台の `.pa-form-frame__wrapper`（上下 48px）より後ろに置く。**同じ詳細度なので、書いた順で勝つ. */
.pa-form-frame__wrapper--headerless {
	padding-top: 0;
}

/* ==================================================================
 * 婚活 EQ 診断の広告フォーム `eq_ad`・`eq_as` のフッター（Bug #9396）
 *
 * 移行元の型紙 8 本（入力と完了 × パソコン版とスマホ版 × 2 本）は、ページの末尾に `div.copyright` の 1 行だけを置く。
 * 2026-10-05 の実測（`pa-verify-assets/A/9396-フッターの実測-1005/`）で、8 画面とも次の値だった:
 *
 * | 項目 | 移行元 |
 * |---|---|
 * | 箱 | 画面の幅いっぱい × 高さ 28・内余白 7px |
 * | 字 | 14px・行の高さ 14px・中央寄せ |
 * | 地 | rgb(245, 245, 246) |
 * | 字の色 | `eq_ad` の入力画面だけ rgb(74, 69, 61)。ほかの 7 画面は rgb(16, 16, 16) |
 *
 * 器 `footer` は土台の `.pa-form-frame__footer`（内余白 32px 16px・上の線・字 16px）を打ち消し、中の 1 行に移行元の値を当てる.
 * 🚨 **土台の `.pa-form-frame__footer` より後ろに置く。**同じ詳細度なので、書いた順で勝つ. */
.pa-form-frame__footer--ad-copyright {
	padding: 0;
	border-top: 0;
}

.pa-form-frame__ad-copyright {
	margin: 0;
	padding: 7px;
	background-color: #f5f5f6;
	color: #101010;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
}

.pa-form-frame__footer--key-eq_ad.pa-form-frame__footer--input .pa-form-frame__ad-copyright {
	color: #4a453d;
}

/* ==================================================================
 * 広告用の婚活 EQ 診断フォーム `eq_as` の入力画面の、枠の下余白（Bug #9439）
 *
 * 移行元（写し 68e3190cb の `form/view/eq_as.php`）は、同意の区画（`div.eq-footer`）の下端から著作権の 1 行
 * （`div.copyright`）の上端までが 1440 で 87px・375 で 47px である。dev はその上に土台の `.pa-form-frame__wrapper` の
 * 下の内余白 48px が足され、2026-10-05 の下見（`pa-verify-assets/A/9439-下見-1005/`）で両方の幅とも著作権の行が 48px 下にずれた.
 * 当たり先はフォームの部品の `data-pa-form` で `eq_as` だけに絞る。完了画面は入力のフォームを持たないので当たらない. */
.pa-form-frame__wrapper:has(.pa-form[data-pa-form="eq_as"]) {
	padding-bottom: 0;
}

/* ==================================================================
 * 資料請求の LP `request_lp` の入力画面の、携帯幅のロゴ（Task #8958・ユーザー決定 D672）
 *
 * 移行元の携帯版 `sp_request_lp.php`（写し 68e3190cb）は、共通の携帯ヘッダーの古い写しを型紙の中に持つ（83〜86 行）。
 * 実測（幅 375・`pa-verify-assets/A/8943-直す前-0930/走行1/`）は、器 375×61・ロゴ `logo.gif` 23.44,12 175×32.38（リンク無し）・
 * MENU 323.09,12 32×37 で、dev の共通ヘッダーとの差はロゴの絵・alt・リンクの有無だけである。
 *
 * ロゴの絵は `template-parts/site-header-nav.php` がリンクの外に出す（引数 `logo_sp_unlinked_src`）。寸法は共通の
 * `.site-header__logo-image`（幅 175・高さ auto）のままで、400×74 の絵が 175×32.38 になる。
 * ここでは、携帯幅で中身の見えなくなるリンク（パソコン幅のロゴだけを包む `<a>`）を隠し、キーボードの移動先に残さない. */
@media (max-width: 749px) {
	.pa-form-frame--request-lp .site-header__logo a {
		display: none;
	}
}

/*
 * 資料請求の LP と冊子 2 本の進み具合の帯の 1 段目（Task #9563・D777）。型紙は `template-parts/form-request-lp-title.php`・
 * `form-book-title.php`。帯の見た目は pa-forms の `.pa-form-flow` が持ち、ここは置き場の外余白だけを持つ.
 *
 * 外余白は `.pa-form-frame__…-flow .pa-form-flow`（(0,2,0)）で書く。帯は `.pa-form` の外に在るので、pa-forms の
 * `.pa-form .pa-form-flow` が当たらない。素の `.pa-form-flow`（(0,1,0)）のままでは、本文の `ul`・`ol` の規則に負けうる.
 */
.pa-form-frame__request-lp-flow .pa-form-flow,
.pa-form-frame__book-flow .pa-form-flow {
	margin: 0 auto 36px;
}

@media (max-width: 749px) {
	/* 移行元の携帯版の帯は画面の幅いっぱい。dev の外枠の左右の内余白 16px の外へ広げる. */
	.pa-form-frame__request-lp-flow,
	.pa-form-frame__book-flow {
		margin: 0 -16px;
	}

	.pa-form-frame__request-lp-flow .pa-form-flow {
		margin: 0;
	}

	/* 冊子 2 本の携帯版は `p.mb25`（`sp/css/style.css` 79 行）. */
	.pa-form-frame__book-flow .pa-form-flow {
		margin: 0 0 25px;
	}
}

/*
 * 確認表示のあいだ（Task #9563）、フォームより上の部品を隠す。移行元の確認画面 `request_conf.php`・`sp_request_conf.php` は
 * 題・説明の絵・帯の 1 段目・案内を持たず、2 段目の帯（確認表示の器の中）から始まる。印は pa-forms の画面側
 * （`assets/js/pa-forms.js` の `showConfirm()`）が `body` に付ける `data-pa-form-step`。携帯幅の `display: block` の規則
 * （(0,1,0)）より強い (0,2,1) にする.
 */
body[data-pa-form-step="confirm"] :is(.pa-form-frame__request-lp-ttl, .pa-form-frame__request-lp-catch, .pa-form-frame__request-lp-flow, .pa-form-frame__request-lp-lead, .pa-form-frame__book-ttl, .pa-form-frame__book-lead, .pa-form-frame__book-flow, .pa-form-frame__book-intro, .pa-form-frame__book-notice) {
	display: none;
}

/*
 * 確認表示のあいだだけ、パンくずの末尾を「入力内容確認」にする（Task #9563）。移行元の確認画面 `request_conf.php` は
 * 上側（52 行）と本文の下（202 行）に「結婚相談所・結婚支援サービスパートナーエージェント > 入力内容確認」を出す。資料請求の LP は入力画面にパンくずを
 * 持たず、冊子の 2 本は入力画面の末尾が「結婚相談所の選び方」である。確認の段のパンくず（`pa-breadcrumb--confirm`）は
 * テーマの `pa_form_frame_confirm_breadcrumb_html()` が組み、入力画面のパンくずには `pa-breadcrumb--input-only` が付く.
 * 携帯幅は `main.css` の `.pa-breadcrumb { display: none }` が両方を隠す（移行元の `sp_request_conf.php` もパンくずを持たない）.
 */
body:not([data-pa-form-step="confirm"]) .pa-breadcrumb--confirm,
body[data-pa-form-step="confirm"] .pa-breadcrumb--input-only {
	display: none;
}

/*
 * 確認表示のあいだだけ、ヘッダー上段の帯の字を入れ替える（Bug #9851）。移行元の婚活 EQ 診断の確認の型紙 `eq_conf.php` は、
 * 52 行の帯が「婚活EQ診断テスト｜結婚相談所パートナーエージェント」で、入力画面の帯と違う。部品
 * `template-parts/site-header-nav.php` が両方の字を描くので、段に合わせて片方を隠す.
 */
body:not([data-pa-form-step="confirm"]) .site-header__page-name-step--confirm,
body[data-pa-form-step="confirm"] .site-header__page-name-step--input {
	display: none;
}

/*
 * 社員紹介の来店予約（`reservation_intro_02`・Task #9559）の確認表示のあいだ、ヘッダーの下の題の区画（ご紹介プログラムの絵と
 * 注記・`header-form.php` の `.pa-intro02-main`・`.pa-intro02-notes`）を隠す。移行元の確認画面 `intro/reservation_intro_02_conf.php`
 * と携帯版は、ロゴの帯のすぐ下から「来店予約フォーム」の題と 2 段目の帯で始まる（下見の走行 r3 で dev の帯が 874.5 だった）.
 */
body[data-pa-form-step="confirm"] :is(.pa-intro02-main, .pa-intro02-notes) {
	display: none;
}

/* オンライン資料請求 `request_online` のフッターは、認証マーク帯の上の罫線を持たない（ユーザー決定 D812・Task #9712）.
   移行元の `include/footer_form_online.shtml` は関連キーワードを持たず、`ul.pmarkList` に行内で `border-top:none` を当てる.
   関連キーワードを出さない分岐は `footer-form.php` が持つ. */
.pa-form-frame--online .pa-form-frame__footer--full .site-footer__certs {
	border-top: 0;
}

/*
 * オンライン資料請求 `request_online` の入力画面の案内文（ユーザー決定 D812・Task #9712）。型紙は `template-parts/form-spiral-title.php`.
 * 値は移行元の `spiral/request/css/style.css` 616〜629 行（`.lead-area`・`.lead-area .msg`）と `.form-inner`（幅 960px・16px・行の高さ 1.6）、
 * 携帯幅は `sp/spiral/request/css/style.css` 578〜593 行と `.form-inner`（14px）の写し.
 * 題の塊の下の外余白 100px（`.pa-form-frame__spiral-ttl`）が、移行元の `.form-inner` の上の 100px に当たる.
 */
.pa-form-frame__spiral-lead {
	margin: 0 auto 40px;
	max-width: 960px;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

/* 段落の行の高さは器の 1.6 を明示する。下見の走行 1（2026-10-08）で 1 行 28.8px（行の高さ 1.8 相当・移行元 25.6px）で、器の 1.6 が段落に効いていなかった */
.pa-form-frame__spiral-lead-text {
	margin: 0;
	line-height: 1.6;
}

.pa-form-frame__spiral-lead-msg {
	display: inline-block;
	margin: 30px 0 0;
	padding: 0.5em 0;
	line-height: 1.6;
	border-top: 2px solid #c51f10;
	border-bottom: 2px solid #c51f10;
	color: #c51f10;
	font-size: 16px;
	font-weight: bold;
}

.pa-form-frame__spiral-lead-br-sp {
	display: none;
}

/*
 * 携帯幅は、移行元の `.form-inner` の左右の内余白 10px に合わせる。dev の器は左右 16px なので、外へ 6px ずつ広げる.
 * 字は案内文が 13px（移行元の高さ 62.4px＝3 行×20.8px からの逆算。走行 2 で computed の値を控える）、赤い線の一文が 13px.
 */
@media (max-width: 749px) {
	.pa-form-frame__spiral-lead {
		margin-right: -6px;
		margin-left: -6px;
		font-size: 13px;
	}

	.pa-form-frame__spiral-lead-msg {
		display: block;
		margin-top: 20px;
		font-size: 13px;
	}

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

/*
 * 版違いの資料請求 2 本 `request_intro`・`request_tool_test` の入力画面の、フォームより上の部品（Bug #9856・ユーザー決定 D832）。
 * 型紙は `template-parts/form-request-variant-title.php`。外枠は `--wide`（幅 1100px）のまま.
 *
 * 値は移行元の写し（8b8c142bc）から採った.
 *   - パソコン版 `css/page_inquiry.css`: `.category_ttl { margin-bottom: 50px; line-height: 0 }`（`request_intro` は `.mt50` も付く）・
 *     `.page_ttl { margin-bottom: 30px }`・`.page_flow_img { margin-bottom: 30px }`・`#request .book_ttl { margin: 0 auto; font-size: 0 }`・
 *     `#request .box_book`（幅 1100px・地の絵 `box_book_bg.jpg` を縦に繰り返す・中央寄せ・内余白 60px 0・下の外余白 30px）と中の段落
 *     （1 つ目の下 50px・2 つ目と `.txt_catch` の下 30px・`.att` は右寄せで右 30px）・`#request .catch_book_txt`（高さ 205px・地の絵
 *     `book_img02.png` を左から 10%・下 50px・段落は上 50px・17px・行の高さ 2）・`#request .flex_form_text`（flex・中央・下 20px・
 *     1 つ目の段落は幅 650px で中央寄せ）・`.mb70`。段落の外余白は `css/common.css` の `p { margin: 0 }`
 *   - 携帯版 `sp/css/style.css`: `#request { padding: 25px 0 }`・`#request .category_ttl { margin-bottom: 30px }`・
 *     `#request .form_ttl { margin-bottom: 20px }`・`#request .box_book`（幅いっぱい・地の絵 `box_book_bg.png`・上 30px・下の外余白 30px）・
 *     `figure img { width: 100%; margin: 0 0 10px; padding-bottom: 1px }`・`ul.catch_book_txt`（表の組み・左右 15px・下 50px。1 つ目の
 *     段は幅 60%・17px・行の高さ 2、2 つ目は幅 25%・右寄せ・絵は 90%）・`.mb10`・`.mt30`・`.mb25`
 *   - 工程の絵: dev の帯（`ol.pa-form-flow`）は絵だけの箱（68）なので、パソコン版の帯の下の空きは 36px（段落 74＋30−68）。
 *     携帯版は `request_intro` が飾りの無い `p`（空きなし）、`request_tool_test` が `p.mb25`
 */
.pa-form-frame__wrapper:has(> .pa-form-frame__variant-ttl) {
	padding-top: 0;
}

.pa-form-frame__variant-ttl {
	margin: 0 auto;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__variant-ttl--intro {
	margin: 50px 0;
}

.pa-form-frame__variant-ttl img,
.pa-form-frame__variant-box img,
.pa-form-frame__variant-banner img,
.pa-form-frame__variant-service img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pa-form-frame__variant-sp {
	display: none;
}

.pa-form-frame__variant-box {
	box-sizing: content-box;
	width: 1100px;
	max-width: 100%;
	margin: 0 auto 30px;
	padding: 60px 0;
	background: url("../images/form/book-box-bg.jpg?ver=16dd463d3d54") repeat-y;
	text-align: center;
}

.pa-form-frame__variant-box p {
	margin: 0;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__variant-box p img {
	display: inline-block;
}

.pa-form-frame__variant-box-lead {
	padding-bottom: 50px;
}

.pa-form-frame__variant-box-chara,
.pa-form-frame__variant-box-catch {
	padding-bottom: 30px;
}

.pa-form-frame__variant-box .pa-form-frame__variant-box-att {
	padding-right: 30px;
	text-align: right;
}

.pa-form-frame__variant-catch {
	height: 205px;
	margin: 0 0 50px;
	background: url("../images/form/book-img02.png?ver=f1636e79df5d") no-repeat 10% center;
	text-align: center;
}

.pa-form-frame__variant-catch-text {
	margin: 0 auto;
	padding-top: 50px;
	font-size: 17px;
	line-height: 2;
	text-align: center;
}

.pa-form-frame__variant-lead {
	display: flex;
	align-items: center;
	margin: 0 0 20px;
}

.pa-form-frame__variant-lead p {
	margin: 0;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__variant-lead p:first-child {
	width: 650px;
	text-align: center;
}

.pa-form-frame__variant-lead img {
	vertical-align: top;
}

.pa-form-frame__variant-banner {
	margin: 0 0 70px;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__variant-flow .pa-form-flow {
	margin: 0 auto 36px;
}

/* 確認の段だけで出す `request_intro` の題（`intro/request_intro_conf.php` 50〜51 行）. */
.pa-form-frame__variant-confirm-ttl {
	display: none;
}

.pa-form-frame__variant-confirm-heading {
	margin: 0 0 50px;
	font-size: 0;
	line-height: 0;
}

.pa-form-frame__variant-confirm-subheading {
	margin: 0 0 30px;
	font-size: 0;
	line-height: 0;
}

body[data-pa-form-step="confirm"] .pa-form-frame__variant-confirm-ttl {
	display: block;
}

body[data-pa-form-step="confirm"] :is(.pa-form-frame__variant-ttl, .pa-form-frame__variant-box, .pa-form-frame__variant-catch, .pa-form-frame__variant-lead, .pa-form-frame__variant-banner, .pa-form-frame__variant-service, .pa-form-frame__variant-flow) {
	display: none;
}

@media (max-width: 749px) {
	.pa-form-frame__wrapper:has(> .pa-form-frame__variant-ttl) {
		padding-top: 25px;
	}

	.pa-form-frame__variant-pc {
		display: none;
	}

	.pa-form-frame__variant-sp {
		display: block;
	}

	.pa-form-frame__variant-ttl,
	.pa-form-frame__variant-flow {
		margin-right: -16px;
		margin-left: -16px;
	}

	.pa-form-frame__variant-ttl--intro {
		margin: 0 -16px 30px;
	}

	.pa-form-frame__variant-ttl img {
		width: 100%;
	}

	.pa-form-frame__variant-box {
		width: auto;
		margin: 0 -16px 30px;
		padding: 30px 0 0;
		background: url("../images/form/book-box-bg-sp.png?ver=3eb87d299c2b");
	}

	.pa-form-frame__variant-box-figure {
		margin: 0 0 10px;
	}

	.pa-form-frame__variant-box-figure img {
		width: 100%;
		margin: 0 0 10px;
		padding-bottom: 1px;
	}

	/* `ul.catch_book_txt` は表の組みで、案内文の段（幅 60%）とスマートフォンの絵の段（幅 25%）を横に並べる. */
	.pa-form-frame__variant-catch {
		display: table;
		height: auto;
		margin: 0 -1px 50px;
		background: none;
		text-align: left;
	}

	.pa-form-frame__variant-catch-text {
		display: table-cell;
		width: 60%;
		padding: 0;
		vertical-align: top;
		text-align: left;
	}

	.pa-form-frame__variant-catch .pa-form-frame__variant-catch-image {
		display: table-cell;
		width: 25%;
		margin: 0;
		padding-left: 5px;
		text-align: right;
	}

	.pa-form-frame__variant-catch-image img {
		max-width: 90%;
		height: auto;
	}

	.pa-form-frame__variant-service p {
		margin: 0;
		font-size: 0;
		line-height: 0;
	}

	.pa-form-frame__variant-service-lead {
		margin-bottom: 10px;
	}

	.pa-form-frame__variant-service .pa-form-frame__variant-service-banner {
		margin-top: 30px;
	}

	.pa-form-frame__variant-flow .pa-form-flow {
		margin: 0;
	}

	.pa-form-frame__variant-flow--request-tool-test .pa-form-flow {
		margin: 25px 0;
	}

	.pa-form-frame__variant-confirm-ttl {
		margin: 0 -16px;
	}

	.pa-form-frame__variant-confirm-heading {
		margin-bottom: 30px;
	}

	.pa-form-frame__variant-confirm-subheading {
		margin-bottom: 20px;
	}

	.pa-form-frame__variant-confirm-ttl img {
		width: 100%;
		height: auto;
	}
}

/*
 * 冊子の版違い `request_tool_test` の入力画面の古いフッター（Bug #9856・`template-parts/form-footer-legacy-old.php`）。
 * パソコン幅の入力の段だけ古いフッターを出し、共通のフォームのフッター（`--beside-legacy-old`）を隠す。携帯幅と確認の段は逆にする
 * （移行元の `sp_request_tool_test.php` は `footer_form_sp.shtml`、確認画面 `request_conf.php` は `footer_form.shtml`）.
 * ISO の 3 つの字は、移行元の `css/style.css` の `.pmarkList li p`（10px・中央寄せ）にならって絵の下に置く.
 */
.pa-form-frame__footer--beside-legacy-old {
	display: none;
}

.pa-form-frame__old-certs-iso p {
	margin: 4px 0 0;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
}

body[data-pa-form-step="confirm"] .pa-form-frame__footer--legacy-old {
	display: none;
}

body[data-pa-form-step="confirm"] .pa-form-frame__footer--beside-legacy-old {
	display: block;
}

@media (max-width: 749px) {
	.pa-form-frame__footer--legacy-old {
		display: none;
	}

	.pa-form-frame__footer--beside-legacy-old {
		display: block;
	}
}

/*
 * 婚活 EQ 診断の LP 系 15 本の入力画面の会社情報の 3 段落（Bug #9853・`template-parts/form-footer-eq-lp-company-sp.php`）.
 *
 * 移行元の携帯版の入力の型紙は、この塊を `<div style="padding: 0 10px;">` で持つ。パソコン幅は移行元に無いので隠し、
 * 確認の段（移行元の `sp_eq_conf.php` は持たない）でも隠す。見た目の寸法の照合はこの Bug の範囲外で、内余白だけを写す.
 */
.pa-form-frame__eq-lp-company {
	display: none;
}

@media (max-width: 749px) {
	.pa-form-frame__eq-lp-company {
		display: block;
		padding: 0 10px;
	}
}

body[data-pa-form-step="confirm"] .pa-form-frame__eq-lp-company {
	display: none;
}