@charset "UTF-8";

/*!
 * 入会案内のコースと料金のページ（/guide/course/）で、テーマの初期化と移行元の
 * 初期化の食い違いを埋める 1 本（Issue #3206）。
 *
 * **このファイルだけは手で書く。**同じディレクトリの base.css・dialog.css・
 * style.css は写し出しの道具が作るので手で触らない
 * （scripts/pa-cms/extract-guide-course-base-css.py・
 * scripts/pa-cms/transform-guide-course-css.py）。生成物を直すと次に作り直した
 * ときに黙って消えるため、打ち消しは後ろに読むこの 1 本へ集める。
 *
 * 読む順は 土台（base）→ モーダル（dialog）→ ページ専用（style）→ このファイル。
 *
 * ## 何を埋めるか: 擬似要素の box-sizing
 *
 * 移行元とテーマは、どちらも `box-sizing: border-box` を全体へ当てている。
 * **違いは「擬似要素を含めるかどうか」だけである。**
 *
 *   - 移行元 https://www.p-a.jp/assets/css/style.css の 97〜99 行
 *       `* { box-sizing: border-box }`          ← 擬似要素を含めない
 *   - このテーマ assets/css/main.css の 466〜469 行
 *       `*, *::before, *::after { box-sizing: border-box }`  ← 含める
 *
 * CSS の既定値は `content-box` なので、移行元の `::before` / `::after` は
 * content-box のまま描かれる。移行元の本文を写したこのページの飾りは、
 * その前提で寸法が書かれている。
 *
 * ## 実際に出ていた不具合（ユーザーの目視・2026-09-04）
 *
 * 比較表の「パートナーエージェント」の列を囲む赤い線が、セルの罫線から
 * ずれて二重線に見えていた。赤い線は `.compare-table th.feature::before` 等が
 * 枠線 4px で描いており、幅の指定は `calc(100% - 4px)` である。
 *
 *   - content-box（移行元）: 外形 = (100% - 4px) + 枠 4px × 2 = 100% + 4px
 *     → 赤い線がセルの縁に乗る
 *   - border-box（テーマ）: 外形 = 100% - 4px
 *     → 赤い線が 4px 内側へ入り、灰色の罫線との間に隙間ができて二重に見える
 *
 * 差は枠線 2 辺ぶんの 8px である。同じ原因で、携帯幅（749px 以下）の転置した
 * 比較表でも赤い上下の線が行から浮いていた。
 *
 * **セルそのものの寸法は移行元と 1 件も違わなかった**（両側を同じ道具で測って
 * 確認）。違うのはこの box-sizing 1 点だけである。
 *
 * ## なぜ本文の器の中だけに閉じるか
 *
 * この食い違いは、移行元から本文を写した他の画面にも同じ形で効く見込みが高い。
 * ただしテーマ共通の初期化（main.css の `*::before`）を動かすと全ページへ
 * 波及するため、まずこのページの本文の器の中だけへ閉じて直す。範囲を広げるかは
 * 別途判断する。
 *
 * 器は本文の 2 つ（`.page-course` と `.cta`）で、
 * scripts/pa-cms/extract-guide-course-base-css.py の SCOPE_CONTAINERS と
 * 同じ集合である。器を増やすときはこのファイルもそろえること。
 *
 * 🚨 器に要素名を書かない（`section.cta` ではなく `.cta`）。`:is()` の詳細度は
 * 中身の最大値なので、要素名を混ぜると器が要素 1 つぶん強くなり、
 * このページ専用の CSS の打ち消しに勝ってしまう
 * （理由の詳細は SCOPE_CONTAINERS のコメント）。
 */

body .pa-page--guide .page-content__body :is(.page-course, .cta)::before,
body .pa-page--guide .page-content__body :is(.page-course, .cta)::after,
body .pa-page--guide .page-content__body :is(.page-course, .cta) *::before,
body .pa-page--guide .page-content__body :is(.page-course, .cta) *::after {
	box-sizing: content-box;
}

/*
 * ## 2 つめ: 「まずは無料婚活体験へ」の見出しへ、テーマの記事見出しの指定が漏れる
 *   （Task #3286）
 *
 * このテーマは記事本文の見出しへ字の大きさと字間を直に書いている
 * （`assets/css/main.css` の
 * `.entry-content :is(h2〜h6), .page-content__body :is(h2〜h6)`）。移行元の
 * `.cta__title` はどちらも持たないため、2 つとも打ち消す。
 *
 * ### 字間（両方の幅で効く）
 *
 * 移行元は `normal`（= 0）だが、テーマは `0.05em` を当てる。見出しの中の
 * `<span>`（「無料婚活体験」）は字間を受け継ぐので、6 文字ぶん横に広がる。
 *
 * | 幅 | 移行元 | dev（打ち消す前） |
 * |---|---|---|
 * | 1440px | 字間 0・幅 241.92px | 字間 1.26px・幅 249.48px（**+7.56px**） |
 * | 375px | 字間 0・幅 126px | 字間 1.05px・幅 132.31px（**+6.31px**） |
 *
 * ### 字の大きさ（携帯幅だけで効く）
 *
 * 移行元は 749px 以下でこの見出しへ字の大きさを**書いていない**。書いてあるのは
 * 750px 以上の `.cta__title { font-size: 1.8em }` だけである。したがって移行元の
 * 携帯幅では、ブラウザ既定の `h2 { font-size: 1.5em }` がそのまま出る
 * （器 `.cta` の 14px × 1.5 = **21px**、行送りは 1.5 倍の 31.5px）。テーマの指定が
 * 当たると **22px**（行送り 33px）になり、見出しの高さが 1.5px 変わる。
 *
 * パソコン幅では移行元自身が `1.8em` を直に書いて勝つので、字の大きさの打ち消しは
 * 携帯幅だけに閉じる（実測でもパソコン幅は 1 要素も動かない）。
 *
 * ### なぜ `.cta__title` だけに絞るか
 *
 * 器の中には見出しが **30 個**ある。他の 29 個は移行元でも別の指定を持つため、
 * 絞らずに当てるとそちらの見た目まで変えてしまう。実測でも、この絞り方なら
 * 動くのは `.cta__title` とその中の `<span>` だけである。
 */
body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__title {
	letter-spacing: normal;
}

@media (max-width: 749px) {
	body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__title {
		font-size: 1.5em;
	}
}

/*
 * 見出し 16 個へ漏れるテーマの字間を打ち消す（Bug #3501）。
 *
 * ## 何が起きていたか
 *
 * テーマの共通の CSS が、移行本文の見出しすべてへ字間を配っている。
 *
 * ```css
 * .entry-content :is(h2, h3, h4, h5, h6),
 * .page-content__body :is(h2, h3, h4, h5, h6) { letter-spacing: 0.05em }
 * ```
 *
 * 移行元はこれらの見出しに字間を持たない（`normal`）。当たると文字が広がる。
 *
 * | 見出し | 字間 | 文字の並びの幅（1440px） |
 * |---|---|---|
 * | `.promise__heading`「出会いがなければ月会費無料」 | 0 → 1.8px | 542 → 565.41（**+23.41**） |
 * | `.support-flow__step-group-heading`「コンタクト（お見合い）」 | 0 → 1.1px | 242 → 254.11（+12.11） |
 * | `.age-plan__item-title`「シングルマザー応援プラン」 | 0 → 1.1px | 262.03 → 275.23（+13.2） |
 * | `.course-card__body-heading`「このコースの特長」 | 0 → 0.7px | 112 → 117.61（+5.61） |
 *
 * ## 🚨 要素の箱を測っても差は出ない
 *
 * 見出しは器いっぱいに広がるので、**箱の幅は両側とも同じ**になる。差が出るのは
 * 文字の並びそのものである。`Range.selectNodeContents()` で測ること
 * （道具: `pa-verify-assets/f8-guide-0904/probe-ls-impact.mjs`）。
 *
 * ## なぜ 6 つのクラスを名指しするか
 *
 * この器の中の見出しは **29 個**で、そのうち **13 個は移行元自身が字間を持つ**
 * （`.c-heading-l` の 1.28px、`.course-card__name` の 0.91px など）。まとめて
 * 打ち消すと、その 13 個まで移行元と違う見た目にしてしまう。
 *
 * 名指しする 6 つは、**移行元が `normal` である 16 個**をちょうど覆う。
 * 全 29 個を両側で測って確かめた（2026-09-04・幅 1440px と 375px）。
 *
 * 🚨 上の `.cta__title` の注記にある「他の 29 個は移行元でも別の指定を持つ」は
 * **一部が誤り**だった。全数で測り直すと 16 個は移行元が `normal` である。
 *
 * ## 詳細度
 *
 * `:is()` の中はクラスだけにする。要素名を混ぜると `:is()` の詳細度が中身の最大値まで
 * 上がり、ページ専用 CSS の指定に勝ってしまう（この画面で実際に踏んだ）。
 */
body .pa-page--guide .page-content__body :is(.page-course, .cta) :is(
	.course-card__body-heading,
	.promise__heading,
	.support-flow__step-heading,
	.support-flow__step-group-heading,
	.age-plan__item-title,
	.plus-system__col-heading
) {
	letter-spacing: normal;
}