/*
 * ご入会からご成婚までの携帯版の写しと、テーマの既定とのつなぎ（Bug #4699）。
 *
 * パソコン版の `bridge.css` と同じ役目を、携帯幅（749px 以下）で果たす。
 * 写した CSS（`sp-layout.css` / `sp-module.css`）は移行元の値をそのまま持って
 * いるが、**テーマの既定のほうが強い当たり先で書かれている指定が残る**ため、
 * それを移行元の姿へ戻す。
 *
 * ## 1. 段落と箇条書きの行送り
 *
 * テーマは `.page-content__body p` / `.page-content__body li`（クラス 2 つ ＋
 * タグ 1 つ）へ共通の行送りを当てる。移行元は先祖から受け継ぐ形なので、
 * 受け継ぐ形に戻す。パソコン版（`bridge.css` の同じ規則）と同じ考え方である。
 *
 * ## 2. 見出しの字間
 *
 * テーマは `.page-content__body :is(h2, h3, h4, h5, h6)` へ `letter-spacing: 0.05em`
 * を当てる。移行元はこの区画の見出しに字間を置かない。
 *
 * 🚨 **パソコン版の直し（Bug #4688・`bridge.css`）は 750px 以上でしか配られない。**
 * 同じ直しを携帯幅にも置かないと、`h4.deviceTtl01` の字間が 0.7px（14px × 0.05）
 * になって移行元とずれる（実測・2026-09-08 幅 375px）。
 *
 * `!important` は使わない。この区画の目印（`pa-page--guidance`）を含む
 * 「body ＋ クラス 2〜3 つ」で、テーマの規則に勝てる。
 */

body .pa-page--guidance .page-content__body p,
body .pa-page--guidance .page-content__body li {
	line-height: inherit;
}

body .pa-page--guidance .page-content__body .deviceTtl01,
body .pa-page--guidance .page-content__body .deviceTtl02,
body .pa-page--guidance .page-content__body .deviceTtl04,
body .pa-page--guidance .page-content__body .numberTtl01,
body .pa-page--guidance .page-content__body .imgTtl01 {
	letter-spacing: normal;
}

/*
 * ## 3. 2 段組みを携帯幅で縦に積む
 *
 * 🚨 **移行元の携帯版 CSS 自体は `.corWrap .col6` を 2 段組み（幅 50%・左寄せ）に
 * している。**しかし**移行元の携帯版の HTML はこのクラスを 1 か所も使っていない**
 * （写しの全数で確認）。移行元では死んだ指定である。
 *
 * dev の本文は移行元の**パソコン版**から取り込んでいるため `.corWrap .col6` を
 * 持つ。そのまま写しを配ると、幅 375px で **1 段が 148px** になり、読めない細さの
 * 2 段組みになる（実測・2026-09-08。移行元の携帯版は同じ中身を 325px の
 * 1 段で見せている）。
 *
 * **移行元の携帯版の見た目に合わせて縦に積む。**移行元の携帯版で 2 段組みが
 * 出ている場所は 1 つも無いので、これが移行元と同じ姿である。
 */

body .pa-page--guidance .page-content__body .corWrap .col6,
body .pa-page--guidance .page-content__body .corWrap .col6:last-child {
	float: none;
	width: 100%;
	padding: 0;
}

/*
 * ## 4. 見出しの中の絵を携帯版の大きさへ縮める
 *
 * 移行元は見出しの中の絵を**幅ごとに別ファイル**で持つ。
 *
 *   パソコン版 … `guidance/common/img/ttl_pict_01.png`（84 × 22px）
 *   携帯版     … `guidance/sp/common/img/ttl_pict_01.png`（58 × 16px）
 *
 * dev は 1 つの本文をどの幅でも出すので、**携帯幅でもパソコン版の絵が出る**。
 * そのままだと見出し 1 つあたり 6px 高くなる（実測・幅 375px）。
 *
 * **ユーザー決定（2026-09-08・確認事項 12）で「見た目だけそろえる」と決まった**ため、
 * 携帯幅では CSS で携帯版と同じ大きさに縮める。絵のファイルそのものは差し替えない。
 *
 * 対象は `deviceTtl01` の 3 枚だけである。移行元の携帯版 5 本の絵を全数で数えて
 * 確かめた（58 × 16px は 3 枚。ほかの見出しの型は絵を持たない）。
 */

body .pa-page--guidance .page-content__body .deviceTtl01 img {
	width: 58px;
	height: 16px;
}

/**
 * キーボードで移動したときの囲み線を戻す（Greptile 指摘・2026-09-08）。
 *
 * 🚨 移行元は初期化で本文のリンクの囲み線を消している
 * （`sp-reset.css` の `a:focus { outline: none }`）。写した CSS はそのままにするが、
 * **消したままだとキーボードの閲覧者がいまどこを選んでいるか分からない。**
 *
 * **囲み線が出るのはキーボードで移動したときだけである**（`:focus-visible`）。
 * 指やマウスで押したときは出ないので、**移行元との見た目の違いにはならない**。
 * 同じ判断の前例が入会案内のコースと料金にある
 * （`assets/guide-course/css/dialog.css`・Bug #2748・ユーザー判断 2026-09-05）。
 *
 * 色と太さはその前例に合わせる（ブラウザの既定に任せると地色によって見えにくい）。
 */

body .pa-page--guidance .page-content__body a:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}