@charset "utf-8";
/*
あぶない刑事40周年特設サイト『ABDK40+』
common.css … ③共通：リセット／デザイントークン／タイポ／ヘッダー・グロナビ・フッター／通知購読UI
素材・配色は未着のため全面プレースホルダー。値は :root のカスタムプロパティに集約し、
本番素材が届き次第ここだけ差し替えれば全ページに反映される設計にしている。
------------------------------------------------------------*/

/* 英字見出し書体：2024サイトと同じ AmarilloUSAFProRegular（自ホスト・斜体なし） */
@font-face {
	font-family: "AmarilloUSAFProRegular";
	src: url("../fonts/AmarilloUSAFProRegular.woff2") format("woff2"),
	     url("../fonts/AmarilloUSAFProRegular.woff") format("woff"),
	     url("../fonts/AmarilloUSAFProRegular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*------------------------------------------------------------
	デザイントークン（確定：ABDK40+ポスター準拠。白地×黒×赤 #e00010）
	TOP・NEWSとも同一のライトトーン（地はグレーテクスチャ #container::after）
------------------------------------------------------------*/
:root {
	--ab-color-bg: #ffffff;
	--ab-color-bg-alt: #f5f5f7;
	--ab-color-surface: #eef0f4;
	--ab-color-text: #1a1a1a;
	--ab-color-text-muted: #707070;
	/* 純黒より一段明るいダークグレー。暗い背景の上でも輪郭が出て、白地でも十分に濃い
	   （白文字とのコントラスト比9.7:1でAA適合）。MENUボタンの地色と404見出しで共用する。 */
	--ab-color-dark: #444444;
	/* 本文中のテキストリンク色。記事本文（news.css の .ab-entry-content a）と
	   コンテンツページの情報表（contents.css）で共用する。
	   ※ WP/editor-style.css は管理画面エディタ専用で :root を読めないため、同じ値をベタ書きしている。
	     この色を変えるときは editor-style.css も併せて直すこと。 */
	--ab-color-link: #1a0dab;
	--ab-color-accent: #e00010; /* ポスター実測の赤（ABDK40+ MOVIE 4K REVIVAL） */
	--ab-color-accent-dark: #a50011;
	--ab-color-border: rgba(0, 0, 0, 0.5);
 --ab-color-border-gray: rgba(0, 0, 0, 0.2);
	--ab-color-white: #ffffff;
	--ab-color-black: #000000;

	/* タイポ（仮：本文=Noto Sans JP 500 / 見出し・ナビ=Noto Sans JP 700） */
	--ab-font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--ab-font-weight-regular: 500;
	--ab-font-weight-bold: 700;

	/* レイアウト */
	--ab-container-width: 1200px;
	--ab-header-height: clamp(56px, 8vw, 88px);
	--ab-header-padding-inline: clamp(16px, 4vw, 40px); /* .ab-header と中央ロゴのSP左揃えオフセットで共有 */
	--ab-header-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
	--ab-radius-s: 4px;
	--ab-radius-m: 8px;
	--ab-ease: cubic-bezier(0.23, 1, 0.32, 1);

	/* アクセント書体：英字・数字見出し用。2024と同じ自ホスト AmarilloUSAFProRegular（斜体なし） */
	--ab-font-heading: "AmarilloUSAFProRegular", var(--ab-font-base);
}

/* 注：確定デザイン（ポスター準拠）でTOP・NEWSとも同一ライトトーンになったため、
   旧 body[data-page="sub"] のトークン上書きブロックは削除した（:rootに一本化・二重実装防止）。
   data-page属性自体はナビJS（common.jsのTOP/sub分岐）で引き続き使用する。 */

/*------------------------------------------------------------
	Reset
------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub,
sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, nav,
section, time, mark, audio, video, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	vertical-align: baseline;
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
}
html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: var(--ab-font-base);
	font-weight: var(--ab-font-weight-regular);
	font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.6rem);
	line-height: 1.8;
	color: var(--ab-color-text);
	background-color: var(--ab-color-bg);
}
ol, ul {
	list-style: none;
}
button {
	background: none;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	display: inline-flex; /* インライン要素相当のbuttonにサイズ・中央寄せを効かせるためdisplay明示 */
	align-items: center;
	justify-content: center;
}
a {
	color: inherit;
	text-decoration: none;
	display: inline-block; /* aはインライン要素のため、サイズ・上下余白を効かせる場合は先にdisplay変更が必要 */
	transition: opacity 200ms var(--ab-ease), color 200ms var(--ab-ease);
}
a:hover {
	opacity: 0.75;
}
img, svg {
	max-width: 100%;
	height: auto;
	display: block; /* インライン画像の下の隙間対策 */
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*------------------------------------------------------------
	共通レイアウト
------------------------------------------------------------*/
#container {
 width: 100%;
 margin: 0 auto;
 position: relative;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 min-height: 100dvh;
}
/* コンテンツが少なくても main が伸びてフッターを画面最下部へ押し下げる（スティッキーフッター） */
#container > main {
 flex: 1 0 auto;
}
#container::after {
 content: "";
 background: #f6f6f6 url("../img/bg.jpg") repeat center top;
 background-image: image-set(url("../img/bg.webp") type("image/webp"), url("../img/bg.jpg") type("image/jpeg"));
 background-size: 100% auto;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100vh;
 height: 100lvh;
 min-height: 100vh;
 min-height: 100lvh;
 display: block;
 position: fixed;
}
.ab-contents {
	width: min(100% - 40px, var(--ab-container-width));
	margin-inline: auto;
}
.ab-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* 見出しフォント（Amarillo）は「&」の字形を持たないため、＆だけ別フォントで指定して
   前後の大文字と大きさ・太さを光学的に揃える。common.js がラベル内の & をこのspanで包む。 */
.ab-amp {
	font-family: Arial, Helvetica, "sans-serif";
 font-weight: 800;
	font-size: .75em;
	display: inline-block;
	line-height: 1em;
 margin: 0 3px;
}

/*------------------------------------------------------------
	ローディング（昔のテレビが点くように中央から上下へ開く）
	黒い上下ハーフ＋中央ラインの発光→上下に開いて本体を出す。CSSのみで完結（JS不要・forwards）。
	pointer-events:none で操作を妨げず、JS無効でも必ず開く。TOPのKVロゴは開き終わりに合わせて始動（top.css側でdelay）。
------------------------------------------------------------*/
.ab-loader {
	position: fixed;
	inset: 0;
	z-index: 3000;
	pointer-events: none;
}
.ab-loader__half {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: var(--ab-color-black);
}
.ab-loader__half--top {
	top: 0;
	animation: ab-loader-top 1.1s var(--ab-ease) forwards;
}
.ab-loader__half--bottom {
	bottom: 0;
	animation: ab-loader-bottom 1.1s var(--ab-ease) forwards;
}
.ab-loader__line {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: var(--ab-color-white);
	box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.9);
	transform: translateY(-50%) scaleX(0);
	animation: ab-loader-line 1.1s var(--ab-ease) forwards;
}
@keyframes ab-loader-top {
	0%, 30% { transform: translateY(0); }
	100% { transform: translateY(-100%); }
}
@keyframes ab-loader-bottom {
	0%, 30% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}
@keyframes ab-loader-line {
	0% { opacity: 0; transform: translateY(-50%) scaleX(0); }
	12% { opacity: 1; transform: translateY(-50%) scaleX(1); }
	30% { opacity: 1; transform: translateY(-50%) scaleX(1); }
	44% { opacity: 0; transform: translateY(-50%) scaleX(1); }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ab-loader { display: none; }
}

/*------------------------------------------------------------
	ヘッダー／グローバルナビ（.ab-header / .ab-gnav）
	・ナビ本体（項目一覧）は common.js の NAV_ITEMS から描画する（静的マークアップは持たない。
	  マークアップの二重管理を避けるため。存在のすべてを案件のNAV_ITEMS方式を踏襲）
------------------------------------------------------------*/
.ab-header {
	position: absolute; /* スクロール追随なし：ページ先頭のみに表示し、以降は本文と一緒に流れて消える */
	inset-inline: 0;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ab-header-height);
	padding-inline: var(--ab-header-padding-inline);
	transition: background 200ms var(--ab-ease);
}
/* スクロール後は常に地色を敷く（KV等の背景が流れた後も文字を読めるようにするため。
   common.js が window.scrollY > 40 で付与する） */
.ab-header.is-scrolled {
}
.ab-header__logo {
	display: inline-flex;
	align-items: center;
	height: 100%;
	width: 55%;
	max-width: 380px;
}
.ab-header__logo img {
	width: 100%;
	height: auto;
}
/* 下層ページ：ヘッダーロゴをヘッダー幅の中央へ絶対配置（操作群は右端のまま）。
   height:auto で画像の実高さに合わせる（親.ab-header__logoのheight:100%を打ち消し、縦中央寄せによる
   上方向のオーバーフローを防ぐ）。 */
.ab-header__logo--center {
	position: absolute;
	left: 50%;
	top: clamp(12px, 3vw, 16px); /* ページ見出し系の上余白下限（480px以上、news.css参照）と整合させる */
	height: auto;
	transform: translateX(-50%);
}
.ab-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(8px, 2vw, 20px);
	margin-left: auto; /* ロゴ非表示ページ（TOP）でも操作群を常に右端へ寄せる */
}

/* メニュー開閉ボタン（丸型 MENU⇄CLOSE） */
.ab-menu-toggle {
	position: fixed;
	top: clamp(10px, 2vw, 30px);
	right: clamp(10px, 2vw, 30px);
	width: clamp(64px, 8vw, 96px);
	height: clamp(64px, 8vw, 96px);
	border-radius: 50%;
	/* 純黒にすると、GOODSのKV黒帯や動画枠のような暗い背景の上で丸の輪郭が消える（値の根拠は :root 参照） */
	background: var(--ab-color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2000;
	opacity: 0;
	transform: scale(0);
	transition: transform 400ms var(--ab-ease), opacity 400ms var(--ab-ease), background 200ms var(--ab-ease);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.ab-menu-toggle.is-visible {
	opacity: 1;
	transform: scale(1);
}
.ab-menu-toggle:hover {
	background: var(--ab-color-accent);
}
.ab-menu-toggle__text {
	color: var(--ab-color-white);
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.5rem, 2vw, 2rem);
	letter-spacing: -0.08em;
}
/* 開いている間は白丸＋黒文字（CLOSE） */
.ab-menu-toggle.is-active {
	background: var(--ab-color-white);
}
.ab-menu-toggle.is-active .ab-menu-toggle__text {
	color: var(--ab-color-black);
}

/* 背景マスク（半透明黒） */
.ab-nav-mask {
	position: fixed;
	inset: 0;
	z-index: 1400;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms var(--ab-ease);
}
.ab-nav-mask.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* メニュー本体（右からカーテン展開・黒全面） */
.ab-gnav {
	position: fixed;
	top: 0;
	right: 0;
	width: min(600px, 100%);
	height: 100%;
	z-index: 1500;
	display: flex;
	flex-direction: column;
	/* 縦中央寄せは .ab-gnav__inner の margin-block:auto が担当（justify-content:center は使わない）。
	   スクロールコンテナで justify-content:center を使うと、項目が増えて内容が画面より高くなったとき
	   上端がはみ出してスクロールで戻せなくなるため。auto marginは余白が無いとき0になり上端から並ぶ。 */
	padding: clamp(80px, 12vh, 120px) clamp(24px, 8vw, 100px);
	background: var(--ab-color-black);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	clip-path: inset(0 0 0 100%); /* 右からのカーテン展開 */
	transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.ab-gnav.is-open {
	clip-path: inset(0 0 0 0);
}
.ab-gnav__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 6vh, 64px);
	margin-block: auto; /* 縦中央寄せ（親のjustify-contentは使わない。上のコメント参照） */
}
.ab-gnav__list {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 2vh, 20px);
}
.ab-gnav__list > li {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s var(--ab-ease), transform 0.5s var(--ab-ease);
}
/* 順送りで出す。--i（0起点の並び順）は common.js が li に付与するため、
   項目を増減してもここは修正不要（nth-childでの個別指定はしない） */
.ab-gnav.is-open .ab-gnav__list > li {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(0.25s + 0.1s * var(--i, 0));
}
.ab-gnav__list > li > a {
	display: block;
	color: var(--ab-color-white);
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	
	font-size: clamp(4rem, 2.5rem + 3vw, 6rem);
	line-height: 1.1;
	letter-spacing: -0.08em;
	transition: opacity 0.3s ease;
}
.ab-gnav__parent {
	display: inline-flex; /* 開閉アイコンを文字と縦中央で揃えるため。左右位置は親liのtext-alignに従う */
	align-items: center;
	gap: 0.18em;
	color: var(--ab-color-white);
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-size: clamp(4rem, 2.5rem + 3vw, 6rem);
	line-height: 1.1;
	letter-spacing: -0.08em;
	transition: opacity 0.3s ease;
}
.ab-gnav__list > li > a:hover,
.ab-gnav__parent:hover {
	opacity: 0.6;
}

/* --- サブメニュー（MOVIE配下）---------------------------------------------
 * 既定は閉じた状態。SPはタップでliに .is-open が付いて開き、
 * ホバー可能な環境（PC）ではホバー／フォーカスでも開く（メディアクエリは下部にまとめて記述）。 */
.ab-gnav__sub {
	display: grid;
	grid-template-rows: 0fr; /* 高さ固定値を使わずに開閉するためのgrid行アニメーション */
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows 0.4s var(--ab-ease), opacity 0.3s var(--ab-ease), visibility 0s linear 0.4s;
}
.ab-gnav__sub-inner {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1vh, 10px);
	margin-left: 7px; /* 見出しAmarilloの左サイドベアリング分。赤罫と「M」の左端を揃える */
	padding-left: clamp(12px, 2vw, 20px);
	border-left: 2px solid var(--ab-color-accent);
}
/* 親項目との間隔は先頭liの内側に取る。ul側のmargin/paddingだと閉じた状態でも高さが残るため
   （grid-template-rows:0fr で潰れるのは中身の高さだけ） */
.ab-gnav__sub-inner > li:first-child {
	padding-top: clamp(8px, 1.4vh, 14px);
}
.ab-gnav__item--has-sub.is-open .ab-gnav__sub {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows 0.4s var(--ab-ease), opacity 0.3s var(--ab-ease) 0.1s, visibility 0s;
}
.ab-gnav__sub a {
	display: block;
	color: var(--ab-color-white);
	font-family: var(--ab-font-base);
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.2rem);
	line-height: 1.6;
	transition: color 0.3s ease, opacity 0.3s ease;
}
.ab-gnav__sub a:hover {
	color: var(--ab-color-accent);
	opacity: 1;
}
/* サブメニューの開閉サイン（＋／－）。素材のSVGを疑似要素の背景で出す（マークアップは持たない） */
.ab-gnav__parent::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	background: url("../img/common/nav-open.svg") no-repeat center center / contain;
}
.ab-gnav__item--has-sub.is-open .ab-gnav__parent::after {
	background-image: url("../img/common/nav-close.svg");
}
/* ホバー可能な環境（PC）：MOVIEにカーソルを合わせるだけでサブメニューを開く。
   キーボード操作でも開くよう :focus-within を併記する */
@media (hover: hover) {
	.ab-gnav__item--has-sub:hover .ab-gnav__sub,
	.ab-gnav__item--has-sub:focus-within .ab-gnav__sub {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transition: grid-template-rows 0.4s var(--ab-ease), opacity 0.3s var(--ab-ease) 0.1s, visibility 0s;
	}
	.ab-gnav__item--has-sub:hover .ab-gnav__parent::after {
		background-image: url("../img/common/nav-close.svg");
	}
}

/* 下段（メニュー項目とは切り分け）：最新情報を受け取る＋FOLLOW US */
.ab-gnav__extra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 3vh, 32px);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 下段はメニュー項目5件が出終わってから（最後の項目のディレイ 0.25+0.1×4=0.65s より後） */
.ab-gnav.is-open .ab-gnav__extra {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s;
}
.ab-gnav__push {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ab-color-white);
	font-family: var(--ab-font-base);
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.7rem);
	transition: opacity 0.3s ease;
}
.ab-gnav__push:hover {
	opacity: 0.6;
}
.ab-gnav__push .ab-push__logo {
	height: 70px;
}
.ab-gnav__push .ab-push__label {
	padding-top: 5%;
}
/* FOLLOW US ＋ SNSアイコン（フッター・メニュー共通コンポーネント）
   「FOLLOW US」はアイコン左横の小さな添え文字（リンクなし）。実リンクは各アイコン側。
   アイコンの箱は .ab-follow__icon 1本に集約し、X／Instagramで同じ寸法・同じhoverを使う
   （サービスごとに同責務のルールを増やさない。色の出し分けだけ .ab-gnav__follow / .ab-footer__follow で行う）。 */
.ab-follow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.ab-follow__label {
	font-family: var(--ab-font-heading);
 font-weight: var(--ab-font-weight-bold);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 1.8vw, 2rem);
	letter-spacing: -0.08em;
}
/* アイコンの並び。ラベルとの間隔（.ab-follow の gap:14px）よりアイコン同士は詰める */
.ab-follow__icons {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ab-follow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	transition: opacity 0.3s ease;
}
.ab-follow__icon svg {
	width: 50%;
}
.ab-follow__icon:hover {
	opacity: 0.6;
}
/* メニュー内（黒地）：白文字＋白枠のアイコンボックス */
.ab-gnav__follow .ab-follow__label {
	color: var(--ab-color-white);
}
.ab-gnav__follow .ab-follow__icon {
	color: var(--ab-color-white);
	border: 1px solid var(--ab-color-white);
}


/*------------------------------------------------------------
	フッター（.ab-footer）
------------------------------------------------------------*/
.ab-footer {
	flex-shrink: 0; /* スティッキーフッター：main伸長時も縮まず最下部に固定 */
	padding-block: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 40px);
	text-align: center;
}
/* フッターのFOLLOW US：明るい地なのでアイコンは黒ボックス＋白抜き、ラベルは本文色 */
.ab-footer__follow {
	justify-content: center;
	margin-bottom: clamp(22px, 3vw, 30px);
}
.ab-footer__follow .ab-follow__label {
	color: var(--ab-color-text);
}
.ab-footer__follow .ab-follow__icon {
	color: var(--ab-color-white);
	background: var(--ab-color-black);
}
.ab-footer__logo img {
	height: clamp(20px, 4vw, 28px);
	width: auto;
	margin-inline: auto;
}
.ab-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 3vw, 24px);
	margin-bottom: clamp(20px, 4vw, 32px);
	font-size: clamp(1.2rem, 1.1rem + 0.2vw, 1.4rem);
}
.ab-footer__copyright {
	font-size: clamp(1.0rem, 0.9rem + 0.2vw, 1.2rem);
}

/*------------------------------------------------------------
	通知購読UI（Web Push）。フッター等に設置するトグルボタン＋iOS向け案内モーダル。
	JSの状態管理は assets/js/push.js。ここではボタン／モーダルの見た目のみ担当する。
------------------------------------------------------------*/
/* ドック領域（SPでフッター最下部に着地する席を常時確保。高さ変化＝スクロール中断を防ぐ）。
   高さは push.js が --ab-push-dock-h にカード実測値をセット（SPのみ有効） */
.ab-push-dock {
	position: relative;
}
.ab-push-dock[hidden] {
	display: none;
}
/* 右下固定のプッシュ購読ウィジェット。表示制御は push.js */
.ab-push {
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 90;
	display: inline-flex;
	background: var(--ab-color-accent);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	/* ロード後に下からスライドイン（push.js が is-visible を付与） */
	opacity: 0;
	transform: translateY(24px);
	pointer-events: none; /* 非表示中はタップを透過（フッター等を妨げない） */
	transition: opacity 0.6s var(--ab-ease), transform 0.6s var(--ab-ease);
}
.ab-push.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.ab-push[hidden] {
	display: none;
}
.ab-push__button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 6px 28px 0 20px; /* 右は×ボタンと重ならないよう広めに確保 */
	color: var(--ab-color-white);
	font-size: clamp(1.5rem, 1.5rem + 0.2vw, 2.4rem);
	font-weight: var(--ab-font-weight-bold);
	transition: opacity 200ms var(--ab-ease);
}
.ab-push__button:hover {
	opacity: 0.8;
}
/* 左側のロゴ画像（白ABDK・透過） */
.ab-push__logo {
	display: block;
	flex: none;
	width: auto;
	height: clamp(60px, 10vw, 80px);
}
/* クロスアイコン（線画・currentColor追従） */
.ab-push__icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* ×クローズ：カード右上 */
.ab-push__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--ab-color-white);
	transition: opacity 200ms var(--ab-ease);
}
.ab-push__close:hover {
	opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
	.ab-push {
		opacity: 1;
		transform: none;
		transition: none;
		pointer-events: auto;
	}
}
/* SP：OC同様、メニューを中央寄せ（フルスクリーン） */
@media (max-width: 768px) {
 #container::after {
 background-size: auto 100%;
}
	.ab-gnav {
		align-items: center;
		text-align: center;
		padding-inline: 24px;
	}
	.ab-gnav__list {
		align-items: center;
	}
	/* 中央寄せのSPでは左インデント＋左罫が中心線とずれるため外す（階層は文字サイズ差で示す） */
	.ab-gnav__sub-inner {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
	.ab-gnav__extra {
		align-items: center;
	}
	/* SP：ヘッダーロゴは中央寄せをやめて左揃え。
	   絶対配置の子はヘッダーのpadding-inlineを無視して境界（padding box）に張り付くため、
	   left:0 だと画面端に接触してしまう。ヘッダーの左padding量（--ab-header-padding-inline）を
	   そのままleftに与えて余白を再現する（上余白は共通のtopオフセットで確保済み）。 */
	.ab-header__logo--center {
		left: var(--ab-header-padding-inline);
		transform: none;
	}
	/* SP：下部中央（左右・下に余白）。フッター到達時はpush.jsがis-dockedを付与しフッター直下へ収める */
	.ab-push {
		right: 5px;
		bottom: 5px;
  left: 5px;
  margin: auto;
  width: fit-content;
		display: flex;
		justify-content: center;
	}
	/* SPドック領域の高さを常時確保（ドック時に高さが増えず、スクロールが途切れない） */
	.ab-push-dock {
		min-height: var(--ab-push-dock-h, 96px);
	}
	/* フッター到達：まず下降フェードアウト（固定のまま） */
	.ab-push.is-leaving {
		opacity: 0;
		transform: translateY(24px);
		pointer-events: none;
	}
	/* 確保済みのドック領域内に絶対配置して即着地（is-visibleと同じopacity/transformで遷移を起こさない） */
	.ab-push.is-docked {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.ab-follow__icon {
	 width: 44px;
	 height: 44px;
	}
}
/* iOS「ホーム画面に追加」案内モーダル（push.jsが表示制御） */
.ab-push-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms var(--ab-ease), visibility 250ms var(--ab-ease);
}
.ab-push-modal.is-open {
	opacity: 1;
	visibility: visible;
}
.ab-push-modal__panel {
	width: min(100%, 420px);
	max-height: 90dvh;
	overflow-y: auto;
	padding: clamp(20px, 5vw, 32px);
	border-radius: var(--ab-radius-m);
	background: var(--ab-color-surface);
	border: 1px solid var(--ab-color-border);
}
.ab-push-modal__title {
	font-size: clamp(1.6rem, 1.4rem + 0.4vw, 1.9rem);
	font-weight: var(--ab-font-weight-bold);
	margin-bottom: 16px;
}
.ab-push-modal__steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
	font-size: clamp(1.3rem, 1.2rem + 0.2vw, 1.5rem);
	line-height: 1.7;
	color: var(--ab-color-text-muted);
}
.ab-push-modal__steps li {
	display: flex;
	gap: 8px;
}
.ab-push-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px;
	border-radius: var(--ab-radius-s);
	border: 1px solid var(--ab-color-border);
	font-weight: var(--ab-font-weight-bold);
}
/* Android「ホーム画面に追加」促しモーダル（.ab-push-modal--a2hs）。購読成功直後にpush.jsが1回だけ表示 */
.ab-push-modal__text {
	margin-bottom: 24px;
	font-size: clamp(1.3rem, 1.2rem + 0.2vw, 1.5rem);
	line-height: 1.7;
	color: var(--ab-color-text-muted);
}
.ab-push-modal__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px;
	margin-bottom: 10px;
	border-radius: var(--ab-radius-s);
	background: var(--ab-color-accent);
	color: var(--ab-color-white);
	font-weight: var(--ab-font-weight-bold);
}

/*------------------------------------------------------------
	スクロール連動フェードイン（.ab-in）
	common.js の IntersectionObserver が観測開始時に .ab-in-armed を付与してから .is-active を付与する。
	「JSが実行されるまでは通常表示のまま」が既定（.ab-inだけでは何も隠さない）にして、
	JS未実行・エラー・IntersectionObserver非対応時にコンテンツが消えたままにならないようにしている
	（フルページ一括キャプチャのスクリーンショット検証で、要素が非表示のまま固定される不具合を確認したための対策）。
	TOP（top.css）のセクション演出に使う共通フックのため、ここに1箇所だけ実装する
	（news.css / top.css側では二重実装しない）。
------------------------------------------------------------*/
.ab-in.ab-in-armed {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--ab-ease), transform 700ms var(--ab-ease);
}
.ab-in.ab-in-armed.is-active {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ab-in.ab-in-armed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* 注：NEWS系の見出し（.ab-page-head）は news.css に実体を1箇所だけ持たせている
   （NEWSページのライトトーン用トークンと合わせて管理するため。common.cssとの二重実装防止） */