@charset "utf-8";

/* 社員紹介の来店予約 `/form/reservation_intro_02/` の入力画面の頭（Task #7664・Bug #7762）。
 *
 * 読み込むのは `header-form.php` の自前のヘッダーの枝が出す画面だけである
 * （`inc/form-frame.php` の `pa_form_frame_uses_own_header()`）。共通の main.css へは足さない。
 *
 * 🚨 **この画面は移行元がパソコン版と携帯版で別のページを配っている。**
 * dev は 1 つの markup を両方の幅で出すので、**幅ごとに移行元のどちらの版を写すかを決めている。**
 *
 *   - 既定（749px 以下）… 移行元の携帯版 `/sp/form/reservation_intro_02/` を写す
 *   - `@media (min-width: 750px)` … 移行元のパソコン版 `/form/reservation_intro_02/` を写す
 *
 * 🚨 **区切りを 750px にした理由**: `header-form.php` の `<picture>` が画像を切り替える
 * 境目が 749/750px である。ここを別の値にすると、間の幅で「携帯版の画像をパソコン版の
 * 組みで出す」状態になる。移行元のパソコン版も自分の中に `@media(max-width:540px)` を
 * 持つが、**あれはパソコン版のページの中だけの区切り**なので写さない。
 *
 * 🚨 **Bug #7762 の直し**: PR #7736 は
 * `legacy/www.p-a.jp/public/css/reservation_intro_form02.css` の後ろにある
 * `.header` / `.container_full` / `.main_full` の `width: 100%` を「効いている最後の値」と
 * 読んだが、**あの 3 行は `@media(max-width:540px)` の中にある。**
 * `@media` の入れ子を追って読み直し、既定（541px 以上）の値へ直した。
 *
 * 出典（すべて 2026-09-19 に注釈を外して字読みした。走行 0）:
 *
 *   - 携帯版 `legacy/www.p-a.jp/public/sp/form/myintro/css/mypage_form02.css`
 *     `header.main { padding: 12px 5.312% 11px 6.25% }`
 *     `header.main h1.logo { width: 200px }`
 *     `section.contents img { max-width: 100%; height: auto; vertical-align: bottom }`
 *   - パソコン版 `legacy/www.p-a.jp/public/css/mypage_common_new.css`
 *     `.header { width: 954px; margin: 0 auto }`
 *     `.header .logo { float: left; margin: 20px 0 0 }`
 *   - パソコン版 `legacy/www.p-a.jp/public/css/reservation_intro_form02.css`
 *     `.container_full { width: 943px; margin: 15px auto 0 }`（既定）
 *     `.main_full { width: 943px }`（既定）
 *     `.main_full h1 img { border-top-left-radius: 5px; border-top-right-radius: 5px; display: block }`
 *
 * 🚨 移行元の当たり先は `.header` / `.container_full` / `.main_full` という広い名前である。
 * そのまま使うとテーマの他の画面に当たるので、`.pa-intro02-*` で囲み直した。
 */

/* ------------------------------------------------------------------
 * 既定（749px 以下）＝ 移行元の携帯版
 * ------------------------------------------------------------------ */

/* 移行元: header.main（mypage_form02.css）. */
.pa-intro02-header {
	padding: 12px 5.312% 11px 6.25%;
}

/* 移行元の携帯版に `.logo` を包む div は無い。dev だけが持つ器なので余白を持たせない. */
.pa-intro02-header__logo {
	margin: 0;
}

/* 移行元: header.main h1.logo（mypage_form02.css）.
 * 🚨 画像の素の寸法は 400 × 74 なので、200px に収めると 200 × 37 で描かれる. */
.pa-intro02-header__title {
	width: 200px;
	margin: 0;
}

.pa-intro02-header__title img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 移行元: section.contents の中の header.mxw。携帯版は画面いっぱいに出る.
 * 🚨 `.mxw { max-width: 60.8rem }` は 972.8px にあたるので、749px 以下では効かない. */
.pa-intro02-main {
	width: 100%;
	margin: 0;
}

/* 移行元: section.contents img（携帯版）＋ .main_full h1 img（パソコン版）.
 * 🚨 `width: 100%` ではなく `max-width: 100%` にする。これ 1 つで両方の幅が合う。
 *   - 749px 以下 … 器が 375px、画像の素の寸法が 640 × 681 なので 375 × 399.02 に縮む
 *   - 750px 以上 … 器が 943px、画像の素の寸法が 942 × 405 なので素のまま出る
 * 角の丸めはパソコン版の `.main_full h1 img` が持つ. */
.pa-intro02-main__image {
	display: block;
	max-width: 100%;
	height: auto;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* 注記 2 段落（Bug #7833）。移行元の `.main_full .flow` と `p.txt.notes` を写した。
 *
 * 移行元の宣言（注釈を外し `@media` の入れ子を追って読んだ・2026-09-19・走行 0）:
 *
 *   - パソコン版 `css/reservation_intro_form02.css`
 *     `.main_full .flow { background: url(/images/mypage/mypage_form02/bg.png) repeat scroll left top; padding: 20px 0 }`
 *     `#office .main_full .flow { margin-top: 0 }`
 *     `.main_full p.txt { font-size: 16px; padding-bottom: 10px; margin: 0 50px; line-height: 1.6 }`
 *     `.main_full .notes { font-size: 11px !important }`
 *   - 携帯版 `sp/form/myintro/css/mypage_form02.css`
 *     `.paIntro .flow { background: url(../images/mypage_form02/bg.png) repeat scroll left top; padding: 2rem 0 3rem }`
 *     `section.contents .txt { font-size: 1.3rem; line-height: 1.6; padding-bottom: 1rem; margin: 0 2rem }`
 *     `.paIntro .notes { font-size: 1.1rem !important }`
 *
 * 🚨 **背景の絵は両版で同じ 1 枚である**（md5 が `268867fb…` で一致）。
 * テーマへは `assets/images/form/intro02/bg.png` として 1 枚だけ置いた。
 *
 * 🚨 **`!important` は写していない。**移行元は `p.txt` の 16px を打ち消すために要ったが、
 * ここは `.pa-intro02-notes__text` だけを指すので競る相手が居ない。
 *
 * 🚨 **寸法を移行元にそろえ切るのは Task #7832 の持ち場である。**この Bug は
 * 「本文が出ること」を受け持つ。ここに置くのは、字が素のまま出ないための最低限の組みである. */
/* 🚨 **`rem` をそのまま写さない**（Bug #7890）。移行元の携帯版は初期化
 * （`sp/css/basic.css` の 21 行）が `html, body, div, …, p, …` へ `font-size: 13px` を
 * 当てており、**`rem` の基準が 13px** である。dev の基準は 16px なので、同じ `1.1rem` が
 * 17.6px になる。**移行元の基準 13px を掛けた px を書く。**
 *
 *   2rem → 26px ／ 3rem → 39px ／ 1rem → 13px
 *
 * 字と行送りは、**移行元の画面で実際に出ている値**を書く（2026-09-20 05:0x の実測で
 * 字 13px・行送り 16.9px ＝ 1.3）。移行元の宣言は `.paIntro .notes { font-size: 1.1rem }`
 * と `section.contents .txt { line-height: 1.6 }` だが、**配信中の実物はそうならない。**
 * ユーザー決定の原則「正 ＝ 配信中の実物」に従い、実測の値を採る.
 *
 * 算数の裏取り（幅 375・移行元）: 囲みの高さ 496.38 ＝ 段落 198.80 ＋ 232.58 ＋
 * 上下の内余白 26 ＋ 39。段落 1 は 11 行 × 16.9 ＋ 下の内余白 13、段落 2 は 13 行 × 16.9 ＋ 13.
 *
 * 外余白（Task #9306）: 携帯版 `sp/form/myintro/css/reservation_intro_form02.css` の 248 行
 * `#office .paIntro .flow { margin-top: -1rem; margin-bottom: 1rem }`（基準 13px）を写す。
 * 0 のままだと、囲みの上端が移行元（446）より 13 下になっていた（直す前の実測 459・
 * `pa-verify-assets/A/9306-社員紹介の3区画の実測-1002/走行1/`）.
 *
 * 🚨 **背景の絵のパスは、この CSS（`assets/css/`）から見た相対で書く**（Task #9306）。
 * 以前は `../../images/…` で、テーマ直下の `images/` を指していた。絵はそこに無いので
 * 両方の幅で地紋が出ず白かった（幅 375 の実測で白・幅 1440 は同じ規則なので白い見込み）。
 * 直すと幅 1440 にも地紋が出る。移行元のパソコン版も `.main_full .flow` に同じ絵を敷くので、
 * 意図した変化である. */
.pa-intro02-notes {
	margin: -13px 0 13px;
	padding: 26px 0 39px;
	background: url("../images/form/intro02/bg.png?ver=13b9e2ec80e6") repeat left top;
}

.pa-intro02-notes__text {
	margin: 0 26px;
	padding-bottom: 13px;
	font-size: 13px;
	line-height: 1.3;
}

/* ------------------------------------------------------------------
 * 750px 以上 ＝ 移行元のパソコン版
 * ------------------------------------------------------------------ */

@media (min-width: 750px) {

	/* 移行元: .header（mypage_common_new.css）. */
	.pa-intro02-header {
		width: 954px;
		margin: 0 auto;
		padding: 0;
	}

	/* 移行元: .header .logo（同）.
	 * 🚨 `float: left` は写していない。中に 1 つしか置かないので回り込む相手が無く、
	 * 移行元と同じ見え方になる。外余白だけを写す. */
	.pa-intro02-header__logo {
		margin: 20px 0 0;
	}

	/* 移行元: .header .logo h1（同）。幅の指定は持たないので画像の素の寸法で出る. */
	.pa-intro02-header__title {
		width: auto;
	}

	/* 注記 2 段落のパソコン幅（Bug #7833）。移行元は
	 * `.main_full .flow { padding: 20px 0 }`・`#office .main_full .flow { margin-top: 0 }`・
	 * `.main_full p.txt { font-size: 16px; padding-bottom: 10px; margin: 0 50px }`・
	 * `.main_full .notes { font-size: 11px }` である.
	 *
	 * 行送りと上の内余白（Bug #9328）。移行元の段落は、共通の
	 * `p.txt { padding: 5px 0; line-height: 1.6 }`（`css/mypage_common_new.css` 1496〜1502 行）を受ける。
	 * `.main_full p.txt` は下の内余白だけを 10px に上書きするので、上の 5px が残る。
	 * 行送りは `.main_full p.txt { line-height: 1.6 }`（`css/reservation_intro_form02.css` 51〜56 行）どおり 17.6px。
	 * どちらも書かないと、携帯幅の既定（`line-height: 1.3`・上の内余白 0）がこの幅でも効き、
	 * 囲みが 46px 低かった（直す前の実測 263.5 と 217.3・`pa-verify-assets/A/9328-社員紹介の注意書きの実測-1002/走行1/`）.
	 * 算数: 段落 1 は 5 ＋ 6 行 × 17.6 ＋ 10 ＝ 120.6、段落 2 は 5 ＋ 5 行 × 17.6 ＋ 10 ＝ 103.
	 * 字体の違い（移行元はヒラギノ角ゴ Pro W3 が先頭）は行数を変えないので写さない. */
	.pa-intro02-notes {
		width: 943px;
		margin: 0 auto;
		padding: 20px 0;
	}

	.pa-intro02-notes__text {
		margin: 0 50px;
		padding-top: 5px;
		padding-bottom: 10px;
		font-size: 11px;
		line-height: 1.6;
	}

	/* 移行元: .container_full ＋ .main_full（reservation_intro_form02.css の既定）.
	 * 🚨 角の丸めと影は `.container_full` が持つが、**あれはフォーム全体を包む器**で、
	 * この Task の範囲（頭の 2 枚）ではない。ここでは幅と外余白だけを写す. */
	.pa-intro02-main {
		width: 943px;
		margin: 15px auto 0;
	}
}