/*
 * ご紹介プログラムの案内ページ 2 本の意匠（Task #7499）。
 *
 * 移行元の `public/form/css/page_introcmp.css`（59 行）を写したもの。
 * 当たり先だけを移行先の類名へ置き換え、**値は変えていない**。
 *
 * | 移行元の当たり先 | ここでの当たり先 |
 * |---|---|
 * | `.category_ttl` | `.pa-introcmp__title` |
 * | `.page_ttl` | `.pa-introcmp__lead` |
 * | `.cpm_txt` | `.pa-introcmp__text` |
 * | `.intro_names` | `.pa-introcmp__names` |
 * | `.link_menu` | `.pa-introcmp__links` |
 * | `.kv01` / `.kv02` | `.pa-introcmp--general .pa-introcmp__kv` / `--premium` |
 *
 * 🚨🚨 **`rem` をそのまま写してはいけない。土台が両側で違う。**
 *
 * | 側 | `html` の字の大きさ | 根拠 |
 * |---|---|---|
 * | 移行元 | **16px（ブラウザの既定）** | `import.css` が取り込む `common.css`・`style.css` に `html` の指定が無い（2026-09-19 に全数を検索。`body { font-size: 13px }` は在るが `rem` の土台にはならない） |
 * | 移行先のテーマ | **`html { font-size: 10px }`** | `assets/css/main.css`（幅によっては `2.5445292621vw`） |
 *
 * **同じ `1.8rem` が移行元では 28.8px、移行先では 18px になる。**そこで **px で書く**。
 *
 * | 移行元 | px（16px 土台） |
 * |---|---|
 * | `1.8rem`（`.page_ttl`） | **28.8px** |
 * | `1.5rem`（`.intro_names`） | **24px** |
 * | `1.2rem`（`.cpm_txt`） | **19.2px** |
 *
 * 🚨 **移行元の携帯幅の境目は `max-width: 600px` である。**この作業場所の既定の
 * 境目（749px）とは違うので、**移行元の値をそのまま使う**。
 *
 * 🚨 **背景の絵は投入では届かない。**テーマの資材として持つ
 * （`assets/images/introcmp/kv.jpg`・`assets/images/introcmp-premium/kv.jpg`）。
 */

/*
 * 本文の器。移行元の `#contents` と同じ幅で中央へ寄せる
 * （`css/page_inquiry.css` 7 行の `#contents { margin: 0 auto; padding-bottom: 55px;
 * width: 1100px; }`）。Bug #7554 の実測では、これが無いために幅 1440 で
 * 器が x=0・w=1440 まで広がり、押しボタン 2 つが左右の端へ張り付いていた。
 *
 * 🚨 **上の絵（`.pa-introcmp__kv`）はこの器の外に置く。**移行元も
 * `<div class="kv01">` を `#contents` の**前**に置き、画面いっぱいに敷く。
 *
 * 🚨 **`width` ではなく `max-width` にする。**移行元は `width: 1100px` と
 * `css/page_top.css` 10 行の `min-width: 1100px` を併せ持つので、幅 375 でも
 * 1100px のまま横へあふれる。**幅 375 をどちらへ合わせるかは別の Issue で決める**
 * （移行元の携帯版 `form/sp_introcmp.php` は絵も押しボタンの並び順も別物である）。
 * `max-width` なら幅 1440 は移行元と同じ 1100px になり、幅 375 の今の見た目は変わらない.
 */
.pa-introcmp__body {
	margin: 0 auto;
	max-width: 1100px;
	padding-bottom: 55px;
}

/*
 * 題名の絵の箱。移行元の `<h2 class="category_ttl mt50">` には、`page_introcmp.css` の `text-align` のほかに、
 * `css/page_inquiry.css` 60 行の `.category_ttl { margin-bottom: 50px; line-height: 0 }` と `.mt50` が当たる。
 * 行の高さ 0 で箱が絵の高さ（53px）ちょうどになり、下に 50px を空けて導入文が始まる。以前は下の余白と行の高さを
 * 写しておらず、箱が 9px 高く、導入文との間が導入文の上の既定の余白 28.8px だけだった（Bug #10084・
 * `pa-verify-assets/A/10084-下見-1009/`。押しボタンが移行元より 26.7px 下に出た原因の 1 つ）.
 */
.pa-introcmp__title {
	margin: 50px 0;
	line-height: 0;
	text-align: center;
}

.pa-introcmp__title-image {
	height: auto;
	max-width: 100%;
}

.pa-introcmp__lead {
	color: #a68141;
	/* 移行元は `<p class="page_ttl serif">` で、`.serif` が明朝体を当てる. */
	font-family: var(--pa-font-family-serif);
	font-size: 28.8px;
	font-weight: normal;
	letter-spacing: 0.05em;
	/*
	 * 移行元の `p` は上の余白 0 で（初期化の CSS）、行の高さは `normal` である（2 行で 84px）。以前は本文の器の
	 * 行の高さ 1.8（2 行で 103.7px）とブラウザの既定の上の余白 1em を受け継いでいた（Bug #10084）.
	 */
	line-height: normal;
	margin: 0 0 60px;
	text-align: center;
}

.pa-introcmp__text {
	font-size: 19.2px;
	line-height: 1.8;
	text-align: center;
}

/*
 * 本文の段落の既定の余白を外す。移行元の `p` は余白 0 で、2 段落目（類名なし）と注記の間は空かない。以前は
 * 2 段落目にブラウザの既定の 1em（19.2px）が付いていた（Bug #10084）。`:where()` で詳細度を類名 1 つにとどめ、
 * 下の `.pa-introcmp__paragraph`・`.pa-introcmp__note` の下の余白 30px（移行元の `.mb30`）が勝つようにする.
 */
.pa-introcmp__text :where(p) {
	margin: 0;
}

.pa-introcmp__paragraph {
	margin-bottom: 30px;
}

/*
 * 注記。移行元は `<p class="mb30 fs12">` で、`css/style.css` 335 行の
 * `.fs12 { font-size: 12px }` が当たる（Bug #7554）。ここを書かないと
 * `.pa-introcmp__text` の 19.2px を受け継ぎ、移行元より大きく出る.
 */
.pa-introcmp__note {
	font-size: 12px;
	margin-bottom: 30px;
}

/*
 * 🚨 **名前の見出しは 2 本で体裁が違う**（R1 の指摘・2026-09-19）。移行元を写す。
 *
 * | 版 | 移行元の書き方 | 効く指定 |
 * |---|---|---|
 * | 一般（`introcmp.php`） | `<h3 style="font-size:150%;font-weight:bold;" class="mb30">` | **150%**・太字・下 30px。**明朝体では無い** |
 * | 限定（`introcmp_premium.php`） | `<h3 class="intro_names serif mb30">` | `.intro_names` の **1.5rem（＝24px）**・太字・中央・**明朝体**・下 30px |
 *
 * 🚨 **一般の側は `%` のままにする。**親から受け継ぐ字の大きさに対する割合なので、
 * px へ直すと親が変わったときに移行元とずれる。
 */
.pa-introcmp__names {
	font-weight: bold;
	margin-bottom: 30px;
	text-align: center;
}

.pa-introcmp--general .pa-introcmp__names {
	font-size: 150%;
}

.pa-introcmp--premium .pa-introcmp__names {
	font-family: var(--pa-font-family-serif);
	font-size: 24px;
}

.pa-introcmp__links {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 50px 0;
	padding: 0;
}

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

/* 上の絵。移行元の `.kv01` / `.kv02` と同じ高さ・敷き方である. */
.pa-introcmp__kv {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	height: 450px;
}

.pa-introcmp--general .pa-introcmp__kv {
	background-image: url(../images/introcmp/kv.jpg?ver=fb1047a9cb61);
}

.pa-introcmp--premium .pa-introcmp__kv {
	background-image: url(../images/introcmp-premium/kv.jpg?ver=97438efeb96c);
}

@media (max-width: 600px) {
	.pa-introcmp__title {
		height: auto;
		margin: 20px auto 30px;
		width: 80%;
	}

	.pa-introcmp__text {
		margin: 0 auto;
		text-align: left;
		width: 90%;
	}
}

/*
 * フッターの規程のリンクの列（Bug #10096）。パソコン幅だけ.
 *
 * 移行元の案内ページ（`form/introcmp.php`・`form/introcmp_premium.php`）は `css/page_top.css` を読み、
 * `#footer #footer_inner .footer_menu { margin: 0 auto 20px; width: 980px }`（1545 行）と
 * `.footer_menu li { padding: 0 9px; border-right: 1px solid #6E6C6C }`（1551 行）で、規程の 11 項目を
 * 幅 980 の中に自然に折り返して 2 段に組む。どの項目も右の罫線を持つ（5 番目と 9 番目の罫線を消す規則は
 * 1567 行に在るが、注釈の中に入っていて効かない）.
 *
 * dev のフォーム用の共通フッター（`form-frame-footer.css`）は、`page_top.css` を読まないフォームの画面に合わせて、
 * 幅 900・6 番目と 10 番目の罫線と右の内余白を消す形で 3 段に組む。案内ページはこのファイルだけが読まれるので、
 * ここで移行元の 980・2 段に戻す（2026-10-09 の実測: 移行元 左 230・幅 980・高さ 47.8 / dev 左 270・幅 900・高さ 71.7・
 * pa-verify-assets/A/10084-下見-1009-走行2/）.
 *
 * 選び方は、`form-frame-footer.css` の規則より 1 段強い（頭に要素名 `footer` を足した）。読み込みの順に頼らないため.
 */
@media (min-width: 750px) {
	footer.pa-form-frame__footer--full .site-footer__policy {
		max-width: 980px;
	}

	footer.pa-form-frame__footer--full .site-footer__menu--policy > li:nth-child(6),
	footer.pa-form-frame__footer--full .site-footer__menu--policy > li:nth-child(10) {
		padding-right: var(--pa-footer-policy-space);
		border-right: 1px solid var(--pa-footer-separator-color);
	}
}