/*
 * よくあるご質問（`/visitor/questions/`）の携帯幅の画面内ナビ（Bug #4136）。
 *
 * 文言は `inc/visitor-questions-sp-anchor.php` が `<a>` の中へ差し込む。ここはその
 * 見た目だけを持つ。
 *
 * ## なぜ `sp.css` に足さず、別の 1 本にするのか
 *
 * この 1 本は**この 1 ページにしか配らない**（`inc/visitor-page-css.php`）。
 * `assets/visitor/css/sp.css` は 4 ページ共通の写しで、はじめての方への携帯幅の直し
 * （Bug #4134〜#4137）が続けて触る。**このページ専用の塊を混ぜると、その 4 本と同じ場所で
 * 衝突する**（ユーザーの判断・裁定 291。他社経験にも Bug #4150 で同じ形の 1 本が在ったが、
 * そちらはページを移行しないと決まって 2026-09-15 に消した。Task #6227）。
 *
 * 🚨 **この 1 本も幅の条件を付けずに配る。**幅の切り替えは下の `@media` が自分で持つ。
 * 条件を付けて配ると携帯幅で 1 度も配られない（`sp.css` と同じ理由）。
 *
 * ## 移行元スマホ版の姿（記録版を実測。幅 375px）
 *
 *   1 段目   328.13 x 71.48px（器いっぱい）  下の外余白 10px
 *   2 段目   160.53 x 72.06px（2 列）        下の外余白 5px・偶数番は右へ
 *   器の下   内余白 11px
 *
 * 移行元の指定（`sp/visitor/questions/css/style.css` の 78〜91 行）:
 *
 *   .anchor_menu           { padding: 0 6.25% 11px }
 *   .anchor_menu li        { float: left; margin-bottom: 5px; width: 48.928% }
 *   .anchor_menu li:nth-child(2n+0) { float: right }
 *   p.mb10                 { padding-bottom: 0 }
 *
 * 器の高さ 165.13px は 72.06 ＋ 5 ＋ 72.06 ＋ 5 ＋ 11（下の内余白）で説明できる。
 *
 * 🚨 **左右の 6.25% はここでは書かない。**移行元はこの塊の親が画面幅（375px）なので
 * 自分で内余白を持つが、dev はこの塊の親（`section#qa`）が `sp.css` の第 4 節で
 * すでに `padding-inline: 6.25vw` を持っている。**二重に入れると 328.13 が 287 まで縮む**
 * （Bug #4150 で踏んだ）。
 *
 * ## Bug #4150 との違い: 器はすでに在る
 *
 * 他社経験は塊ごと無かったので `<nav>` を新しく作った。こちらは
 * `<ul class="list_archives clearfix" id="menu">` と 5 つの `<a href="#anchorNN">` が
 * すでに在る（移行元パソコン版の帯）。**器は作らず、この写しが携帯幅で並べ替える。**
 *
 * ## 絵に焼き込まれた文言は、テキストで出す（大原則 3・裁定 291）
 *
 * 移行元スマホ版の `anchor_menu01〜05.gif` は、**黒地に白い明朝の文言**を焼き込んでいる。
 * ほかにあるのは右の山形（∨）と左下の赤い帯だけである。文言はテキストで出し、地と帯は
 * ここで描き、**山形は Bug #4150 で切り出した 1 枚（`anchor_arrow.gif` 28x14px）を
 * 使い回す**（同じ意匠なので新しく切り出さない）。移行元スマホ版の絵 5 枚は運び込まない。
 *
 * **dev に在る移行元パソコン版の帯（`tab01〜05.gif`）は、携帯幅で隠す。**移行元スマホ版が
 * この帯を持たないためである。
 *
 * ## 絵から画素で読んだ値（描かれる寸法・幅 375px）
 *
 *   地の色       #000
 *   赤い帯       rgb(225, 32, 15) = #e1200f  64.45 x 3.52px  左下の角に接する（5 枚とも同じ）
 *   山形         16.40 x 8.20px  右端から 9.37〜9.96px  上端 31.05px（5 枚とも同じ）
 *   文字の色     #fff
 *   行の送り     20.51px（2 枚目）／ 21.68px（4 枚目）
 *
 * 🚨 **字の大きさは絵からは 1 つに決まらない。**Bug #4150 と同じ 15.47px を使う。
 *
 * 2 通りの方法で測って、どちらも 1 つの値に収束しなかった。
 *
 * ① 墨の塊の中心から字の送りを出す方法 … 「に」「い」のように**墨が切れる字**があり、
 *    **塊の数が字数より多くなる**（1 枚目は 15 字で 18 塊）。出た値は 14.89〜17.58px。
 *
 * ② dev の描画を実寸で撮り、絵と同じ描画寸法で墨の列を比べる方法（Bug #4135 の押しボタンで
 *    確立した手順。道具は `pa-verify-assets/f7-visitor-0907/compare-q-anchor-pixels.py`）
 *    … 15.47px で描いたときの墨の幅と、絵の墨の幅の比から「要る字の大きさ」を逆算した。
 *
 *      つまみ                          絵の墨   dev の墨   比      要る大きさ
 *      1 パートナーエージェントについて  219.73   229.40   0.958   14.82px
 *      2 サービスに / ついて              75.58    73.78   1.024   15.85px
 *      3 入会について                     96.08    90.73   1.059   16.38px
 *      4 コンシェルジュ / について        99.60   103.70   0.961   14.86px
 *      5 費用について                     96.08    89.73   1.071   16.57px
 *
 *    **14.82〜16.57px と 11% ばらついた。**同じ 6 字で末尾も同じ 3 枚目と 5 枚目でさえ
 *    16.38 と 16.57 で 1.2% 違う。**原因は、墨の幅が字の形に左右されること**である
 *    （片仮名は送りが同じでも墨が細い）。絵を作った書体が dev の游明朝と同じとは限らず、
 *    比を取っても字の形の差が消えない。
 *
 * したがって**単一の正解が無い**（Bug #4135 の押しボタンと同じ結論。あちらは移行元の絵
 * 2 枚が互いに 1.8px 違った）。**同じ意匠の系列である Bug #4150 の値をそのまま使う**のが
 * 最も筋が通る。5 枚の比の相乗平均は 1.013 で、15.47px はその中心に在る。
 *
 * 🚨 **行送りも同じ理由で 1 つに決まらない。**絵の墨の行の間隔は 2 枚目 20.51px・
 * 4 枚目 21.68px だが、**墨の上端は字の形で動く**（「サ」と「コ」で違う）。Bug #4150 の
 * 19.33px を使い、**2 行目の墨の上端が移行元と 0.04px で一致する**ことを実測で確かめた。
 *
 * ## 実測の結果（手元の写しを当てた実ページを撮って、絵と画素で比べた）
 *
 *   箱          1 段目 328.13 x 71.47（移行元 328.13 x 71.48）
 *               2〜5   160.53 x 72.05（移行元 160.53 x 72.06）
 *   赤い帯      幅 ±0.6px・高さ ±0.5px・左 0px・上 ±1.2px
 *   山形        幅 −0.45px・高さ −0.81px・右端から ±0.6px・上 ±0.15px
 *   字の行の上端 ±0.8px 以内
 *
 * 赤い帯と山形の差は**ブラウザが縮めて描くときのにじみ**である（絵は原寸で角が立って
 * いるが、dev は 28x14px を 16.4x8.2px へ縮める）。**墨のしきい値を 170 のままにすると
 * 山形が 16.40 → 8.97px と半分に出る**ので、細い線は 100 まで下げて測る。
 */

/*
 * 差し込んだ文言は既定で隠す。**この 1 本は幅の条件なしで配られる**ので、749px 以下の節の
 * 外に置かないと、パソコン幅で絵と文言が二重に出る。
 *
 * 🚨 **強さを 749px 以下の節の中とそろえ、順番で勝たせる。**ここを
 * `.pa-visitor--questions`（(0,3,0)）で書くと、節の中の `:where(...)`（(0,2,0)）に
 * 勝ってしまい、**携帯幅でも隠れたまま**になる。`:where()` で 0 に落とし、**この規則を
 * 節より前に置く**ことで、同じ強さなら後に読む節の中が勝つ（`sp.css` の第 14 節と同じ型）.
 */
:where(.pa-visitor--questions) :where(.page-content__body) :where(.pa-questions-sp-anchor__text) {
	display: none;
}

@media (max-width: 749px) {

	/*
	 * 並び。1 つ目だけ幅いっぱいで、2 つ目からは 2 列になる。
	 * 移行元は `float` で組むが、ここは `flex` の折り返しで同じ姿にする
	 * （`float` は親の高さが決まらず、下の節が回り込む）。
	 *
	 * 下の内余白 11px は移行元の `.anchor_menu` から写す。
	 *
	 * 🚨 **`gap` を 0 に戻す。**テーマの `assets/css/main.css`（35303〜35311 行）が
	 * `.list_archives` へ `gap: 30px 56px` を当てている。残すと 2 列が
	 * 160.53 x 2 ＋ 56 = 377px になって器（328.13px）に入らず、**1 列ずつ縦に並ぶ**。
	 * 列の間の 7.07px は `space-between` が作る（328.125 − 160.53 x 2 = 7.07）。
	 *
	 * 🚨 **下の外余白はこの Bug では触らない。**移行元の `ul.anchor_menu` は
	 * 外余白を持たず dev は 20px を持つが、これは**この画面の縦のリズム全体**（節の外余白・
	 * 題の外余白・器の内余白）と一緒に直す話で、別の Bug で扱う（裁定 359）.
	 */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0;
		padding: 0 0 11px;
		list-style: none;
	}

	/*
	 * つまみ 1 つの器。幅と下の外余白は移行元の `li` から写す。
	 * 1 つ目だけ幅いっぱいで、下の外余白も 10px（移行元は `p.anchor_menu.mb10`）。
	 *
	 * 🚨 **1 つ目は `max-width` を外す。**テーマの `main.css`（35313〜35317 行）が
	 * `.list_archives li` へ `max-width: 302px` を当てているため、`width: 100%` を
	 * 書いても **302px で止まる**（実測で踏んだ）。2 つ目以降は 160.53px なので当たらない.
	 */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li {
		/*
		 * 🚨 **共有の幅の上限を、この画面だけ外す（Bug #4573 を #4522 に取り込んだ）。**
		 * `main.css` 36787〜36790 行が `.list_archives li` へ `max-width: 302px` を
		 * 当てているため、**画面幅 705.41px 以上で札の幅が 302px で止まる**。
		 * 高さを縦横比で、字と飾りを `vw` で書くと、**札の幅だけ止まって字が伸び続け、
		 * 706〜749px で折り返しが増える**（749px で字の入る場所 242px に対し
		 * 「コンシェルジュについて」が 340px になる）。
		 *
		 * 上限を外すと札の幅も同じ割合で伸び、749px で移行元と同じ 320.66px になる。
		 *
		 * 🚨 **`main.css` は触らない。**この目印はニュース一覧・会社概要・採用の職種
		 * にも出る（`main.css` 36769〜36773 行の注釈）。**ページの印（`.pa-visitor--questions`）
		 * で絞ってこの画面だけを上書きする**（15 班の回答・裁定 543）。
		 *
		 * 🚨 **当たり先は器（`.list_archives`）ではなく項目（`> li`）。**上限は項目に
		 * 付いているので、器に書いても札は 302px のままである（15 班の指摘）.
		 */
		max-width: none;
		width: 48.928%;
		margin: 0 0 5px;
	}

	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li:first-child {
		max-width: none;
		width: 100%;
		margin-bottom: 10px;
	}

	/*
	 * つまみの中身。地は黒、文字は白の明朝。
	 *
	 * 🚨 **高さは絵の縦横比で決める（Bug #4522）。**移行元は札を絵で組むので、高さも
	 * 字も飾りも**幅に比例して縮む**。もとは 375px で測った画素（72.06 / 71.48px 等）を
	 * 直に書いていたため、**幅 320px で移行元より 31.59px 高くなっていた**
	 * （移行元 214.97px に対し dev 246.56px）。
	 *
	 * 縦横比は移行元の絵の元の寸法から取る。
	 *
	 *   1 枚め   `sp/visitor/questions/images/anchor_menu01.gif`  560 x 122
	 *   2〜5 枚め `sp/visitor/questions/images/anchor_menu02〜05.gif`  274 x 123
	 *
	 * 実測（移行元スマホ版）: 375px で 71.48 / 72.07px、320px で 61.00 / 61.50px。
	 *
	 * 🚨 **`vw` ではなく `aspect-ratio` を使う。**`main.css` の共有の規則が
	 * `.list_archives li` へ `max-width: 302px` を当てるため、幅 749px では札が
	 * 302px で止まる。高さを `vw` で書くと、そこで縦横比が崩れる。
	 *
	 * 🚨 **字と飾りは `vw` にする**（幅に比例して縮ませる）。375px の画素を 100/375 倍
	 * した値である.
	 */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li > a {
		position: relative;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		aspect-ratio: 274 / 123;
		padding: 0 7.04vw 0 0.9387vw;
		background: #000;
		color: #fff;
		font-family: var(--pa-font-family-serif);
		font-size: 4.1253vw;
		line-height: 5.1547vw;
		text-decoration: none;
	}

	/* 1 つ目だけ絵が横長（560 x 122）で、字の左端も少し内側に在る. */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li:first-child > a {
		aspect-ratio: 560 / 122;
		padding-left: 1.4053vw;
	}

	/* 移行元パソコン版の帯をやめる。読み上げは差し込んだ文言が担う. */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li > a img {
		display: none;
	}

	/* 文字の塊。行の分かれ方は差し込む側が `<br>` で持つ. */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives .pa-questions-sp-anchor__text {
		display: block;
	}

	/*
	 * 左下の赤い帯。移行元は絵に焼き込んでいるので、ここで描く。
	 * **5 枚とも描かれる幅が 64.45px で同じ**である（1 枚目は 560px 幅、2〜5 枚目は
	 * 274px 幅だが、縮む倍率がどちらも約 0.5859 なので同じ値に落ちる）.
	 */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li > a::after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 17.1867vw;
		height: 0.9387vw;
		background: #e1200f;
		content: "";
	}

	/*
	 * 右の山形。Bug #4150 で切り出した 1 枚を背景に置く。**上下の中央でなく、絵の位置に
	 * 合わせる**（移行元は上端 31.05px で、箱の中央より 4.9px 上である）.
	 */
	:where(.pa-visitor--questions) .page-content__body ul#menu.list_archives > li > a::before {
		position: absolute;
		top: 8.28vw;
		right: 2.4987vw;
		width: 4.3733vw;
		height: 2.1867vw;
		background: url(../../sp/visitor/questions/images/anchor_arrow.gif?ver=0561a797b1dd) no-repeat 0 0 / 4.3733vw 2.1867vw;
		content: "";
	}
}