/**
 * 広告 LP man2（`/ad/man2/`）の、パソコン幅で画面の右端に追従する目次（Bug #4893）。
 *
 * 移行元は見え方を 3 つの仕組みで作っており、**そのうち 2 つが投入で消え、残る 1 つは
 * man2 へ配られない。**追従する押しボタンの帯（Bug #4859）とまったく同じ形である。
 *
 * | 移行元の仕組み | 投入後 |
 * |---|---|
 * | `div.pcmenu` の行内の `style="display: none;"` | **消える**（消毒が `style` 属性を落とす） |
 * | 意匠の CSS（`asset/css/style.css` 3,508〜3,533 行と 3,549〜3,558 行） | **配られない**（man2 は資材の並びに行が無い） |
 * | 携帯幅で隠す `.pc { display: none !important; }`（同 3,372 行） | **配られない**（同じ） |
 *
 * 🚨 **書体のファイルは 1 本も読まない。**目次の規則 5 件のうち書体の語を持つのは
 * `.pcmenu-menu li a` の `font-size` と `font-weight` だけで、**`font-family` も
 * `@font-face` も 1 つも無い**（実測）。移行元がページ全体へ当てている
 * `* { font-family: "YuGothic", sans-serif; }` と、その `@font-face` 2 本
 * （`YuGothic-Bold.otf` / `YuGothic-Medium.otf`）は、**目次に固有ではなく man2 のページ
 * 全体の話**である。2 本は意匠の `assets/ad-man2/css/style.css` が配る（ユーザー決定
 * D657・Task #8839。当初は裁定 173 で保留にしていた）。
 *
 * 🚨 **`.pc` を素の当たり先にしてはいけない。**このページで class に `pc` を語で持つ
 * 要素は **71 個**あり、意匠が配られていないので**いまその 71 個には出し分けの規則が
 * 1 つも当たっていない。**素の `.pc { display: none; }` を配ると、**目次以外の 70 個が
 * 携帯幅で急に消える。**当たり先は必ず `.pcmenu` に絞る。
 */

/* 最初は隠す（移行元の行内の `style="display: none;"` の置き直し）。
   出し入れは `assets/js/ad-lp-man2-pcmenu.js` が `is-shown` を付け外しする。 */
.pcmenu {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 5000;
	display: none;
	width: 160px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(10, 26, 30, 0.2);
	transform: translate(0, -50%);
}

/* 🚨 **出す指定は 751px 以上にだけ置く。**移行元は携帯幅で `.pc { display: none
   !important; }` を当てて隠していた。ここを素の `.pcmenu.is-shown` にすると、
   携帯幅でも出てしまう。**幅の条件で囲めば `!important` も並び順も要らない。** */
@media screen and (min-width: 751px) {
	.pcmenu.is-shown {
		display: block;
	}
}

/*
 * 移行元の初期化のうち、この目次に効いていた 5 つを言い直す（Bug #5143）。
 *
 * 移行元は `style.css` の先頭で `ul, ol, dl { list-style: none; margin: 0; padding: 0;
 * box-sizing: border-box; }` と `body { line-height: 1.5; }` を全ページへ当てている。
 * **この広告 LP は共通スタイル（`pa-main`）をわざと読まない**作りなので、その初期化が
 * どこからも来ない。**一覧にブラウザ既定の左余白 40px が付き、項目の中身の幅が
 * 160px → 120px に縮んで、最初の 2 項目（サービスの特徴・結婚相談所比較）が 2 行に
 * 折り返す。**目次の高さが移行元の 308px に対し 388px になる。
 *
 * 🚨 **素の `ul` や `*` に当てない。**この LP の外へ配ると、テーマの全ページの一覧と
 *    箱の測り方が変わる。当たり先はこの目次の中だけに絞る。
 *
 * 🚨 **足す値を 1 つずつ書き分ける。**下の 5 つは、移行元と dev の値を実際に測って
 *    差が出たものだけである（2026-09-09 11:4x・控えは `pa-verify-assets/f14-man2-reset/`）。
 *
 * | 当たり先 | 性質 | 移行元 | dev（直す前） |
 * |---|---|---|---|
 * | `.pcmenu-menu` | `margin` | `0` | `16px 0` |
 * | `.pcmenu-menu` | `padding` | `0` | `0 0 0 40px` |
 * | `.pcmenu-menu` | `list-style-type` | `none` | `disc`（点が出る） |
 * | `.pcmenu-menu li` | `box-sizing` | `border-box` | `content-box` |
 * | `.pcmenu-menu li` | `line-height` | `1.5`（24px） | `normal`（約 18.4px） |
 *
 * 🚨 **`box-sizing` は項目（`li`）に要る。**項目は左右に 10px の余白を持つので、
 *    `content-box` のままだと箱の幅が 160 + 20 = 180px になり、160px の目次から
 *    はみ出す。
 */
.pcmenu-menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.pcmenu-menu li {
	box-sizing: border-box;
	padding: 10px;
	line-height: 1.5;
	text-align: center;
}

.pcmenu-menu li:hover {
	background-color: #0a1a1e;
}

.pcmenu-menu li:hover a {
	color: #fff;
}

.pcmenu-menu li a {
	font-size: 16px;
	font-weight: 700;
}

/* 移行元 `asset/css/style.css` の 3,549〜3,558 行。 */
@media screen and (max-width: 1280px) {
	.pcmenu {
		width: 12.5vw;
	}

	.pcmenu-menu li {
		padding: 0.78vw;
	}

	.pcmenu-menu li a {
		font-size: 1.25vw;
	}
}