/*
 * 会員特典メニューのページ /option/ の、テーマとの境目の調整。
 *
 * このファイルだけは手で書く。写し（style.css）は写し元を
 * scripts/pa-cms/transform-legacy-page-css.py に通して作り直すもので、
 * 手を入れない。
 *
 * ## なぜ調整が要るか
 *
 * 移行元の /option/ は 1 枚で完結した静的ページで、**一番外側の器を画面いっぱい
 * （1440px 幅の画面で 1440px・左端 0）に広げて組んでいる。**写し元の CSS は
 * その器に幅を書いておらず、親の全幅へ広がることを前提にしている。
 *
 * ところが dev の本文は柱（`.page-content__body`）の中にあり、1,100px しか
 * ない。**幅の規則を写すだけでは足りず、柱そのものを外す必要がある**
 * （Bug #2316 の「測り方」欄の注意）。
 *
 * 幅 1440px で測った移行元の実測は次のとおりである（2026-08-31・移行元の
 * ファイルを直接開いて測定）。
 *
 *   .l-wrap ／ .l-main ／ .l-header   幅 1440px（左端 0）
 *   .l-header--inner                  幅 1040px（左端 200px）
 *
 * ## 柱を外すやり方
 *
 * このファイルの成婚ストーリーの節（Bug #2309）と同じ 3 つ組で効かせる。
 *
 *   1. 本文の器を画面の幅まで広げる（width: 100vw と margin-inline）
 *   2. 祖先に切り落としがあれば外す（この本文の器には無いので不要）
 *   3. body 側で横方向のはみ出しを切る（overflow-x: clip）
 *
 * `clip` を使い `hidden` を使わないのは、スクロールの器を作らずヘッダーの
 * 貼り付き（position: sticky）を保つためである。
 *
 * ## 段落の余白について（写し込みの一般の注意とは逆の判断）
 *
 * 写し込みの一般の注意では「移行元の初期化のうち `p` だけは写さない」と
 * されている。本文を WordPress の作法で複数の段落へ組み直すページでは、
 * `p { margin: 0 }` を当てると本文が 1 かたまりに詰まるためである。
 *
 * **このページはその型ではない。**移行元は短い `<p>` を 59 個並べ、改行タグは
 * 1 つしか持たない（2026-08-31 に移行元の HTML を数えた）。段落の間隔は
 * 移行元の部品ごとの CSS が作っており、`p { margin: 0 }` はその前提である。
 * よって初期化は `p` を含めたまま写している。**この判断はページごとに変わる。**
 */

/* 本文の器を画面の幅まで広げ、移行元と同じ全幅の組みへ戻す。

   画面の幅を表す単位（vw）は縦スクロールバーの幅を含む。バーが場所を取る
   環境でその差がはみ出すため、下の body 側で切り落とす（成婚ストーリーの節と
   同じ組み合わせ）. */
body .pa-page--option .page-content__body {
	/* 幅の上限を外す。テーマは `.page-content__body` へ `max-width` を置いており
	   （main.css の「本文の文字組み」の節）、これを外さないと下の width が
	   その上限で頭打ちになる。**外す前は幅 1,100px のままだった**（2026-08-31 に
	   実測して気づいた）. */
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* 広げた器のぶんの横方向のはみ出しを切る。ページの中身で見分け、他のページを
   巻き添えにしない。

   🚨 **切るのは、写しが必要とする幅がある画面だけにする**（Codex の追加指摘）。

   写しはパソコン用の組みを幅 1040px の決め打ちで持つ。**426〜1039px では中身が
   画面より広くなる。**そこで横方向を切ると、右側にある特典のカードへ
   横スクロールでも到達できなくなり、**内容が読めなくなる。**移行元は切っていない
   ので、その幅では横スクロールで読める。

   境目は「写しが必要とする幅 1040px ＋ 縦スクロールバーの幅 17px」の 1057px に
   する（Issue #2380 の裁定と同じ数え方）。**この幅より狭いときは切らず、移行元と
   同じく横スクロールで読める状態にする。** */
@media (min-width: 1057px) {
	body:has(.pa-page--option) {
		overflow-x: clip;
	}
}

/* ページの中の見出しの帯（`.l-header`）は、写しのとおり画面の上端へ貼り付ける（Bug #10088）。

   写しは移行元と同じく、426px 以上で `position: fixed; top: 0; z-index: 999` を持ち、
   先頭のスライダーへ固定ヘッダーぶんの `margin-top: 90px` を置く（`style.css`）。
   **ここでは打ち消さない。**

   以前はここに 2 つの規則があった（#2476・2026-08-31）。帯を通常の流れへ戻す
   `position: static` と、スライダーの `margin-top` を 0 にする規則である。理由は
   「サイト共通のヘッダー（`.site-header`・sticky）と重なり、ロゴとナビが隠れる」だった。
   **#4633（2026-09-08）で、このページはサイト共通のヘッダーを出さなくなった**
   （`header-option.php`）。前提が消えたので 2 つとも外した。外した後の実測（幅 1440px）では、
   帯は移行元と同じ 1440×89 で、送っても上端 0 に残る。幅 375px は変わらない
   （写しの指定は 426px 以上だけ）. */

/* 送りボタンの矢印を二重に描かない（Codex の指摘 P2）。

   本文の `swiper-container` に反応してテーマの `legacy-swiper.css` も読み込まれ、
   そちらが `::before` で罫線の矢印を描く。写しは `::after` に矢印を置くため、
   両方が並んで矢印が 2 つ見える。

   **残すのは写しの `::after`（移行元の矢印）である。**

   🚨 **当初はここを取り違え、写しの `::after` を消していた。**「写しの `::after` は
   swiper 本体の書体を前提にしており、その書体をテーマへ持ち込んでいない」と考えた
   ためだが、**その前提が誤りだった。**写し（`style.css` の 379 行）は
   `@font-face` で書体をデータ URL のまま同梱しており、`::after` は
   `font-family: pa-scoped-kf-…-swiper-icons` を指している。**書体は持ち込まれて
   おり、`content: "prev"` / `"next"` は文字ではなく矢印として描かれる。**

   したがって移行元と同じ見た目になるのは写しの `::after` の側である。テーマ側の
   `::before`（罫線で描いた矢印）を、このページに限って止める.

   テーマ側は `.swiper-container.is-swiper-ready` を前置しているので、同じ形に
   目印を足して打ち消す（クラス 3 つ + タグ 0 に、目印 1 つを足した強さ）. */
body .pa-page--option .page-content__body .swiper-container.is-swiper-ready .swiper-button-prev::before,
body .pa-page--option .page-content__body .swiper-container.is-swiper-ready .swiper-button-next::before {
	content: none;
}