@charset "utf-8";
/*
top.css … ①TOP・キャンペーン等オリジナルコンテンツ用
common.css の :root トークンに依存する（common.css を先に読み込む前提）。
KV・キャスト・トレーラー等はすべてプレースホルダーのブロックとして組んでおり、
本番素材差し替え時はマークアップ構造を変えずに画像・文言のみ置換できるようにしている。
------------------------------------------------------------*/

/*------------------------------------------------------------
	KV（ファーストビュー）— ABDK40+ポスター再現
	・全画面（100dvh）。MVは上5dvhの余白を取り中央配置、PCでは下端をカットして最大化
	・左右端にフィルム帯（上方向へ無限ループ）
	・ロゴは「白黒テレビをつけた時」風のブレ出現 → キャッチ（お呼び？/呼んだ？）が後追いフェード
------------------------------------------------------------*/
.ab-kv {
	position: relative;
	width: 100%;
	height: 100svh;
	max-height: 56.25vw; /* PCでは16:9帯に収める（幅×9/16） */
	min-height: 660px; /* 帯が低くなりすぎないよう下限を確保 */
	padding-top: 3dvh; /* ポスター上部余白の比率（約5%）を踏襲 */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden; /* MV下端のカットとフィルム帯ループのマスクを兼ねる */
}

/* --- 左右のフィルム帯（無限上スクロール） --- */
.ab-kv__film {
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(84px, 12.75vw, 300px);
	overflow: hidden;
	z-index: 2;
}
.ab-kv__film--left {
	left: 5vw; /* ブラウザ左端から5vw内側 */
}
.ab-kv__film--right {
	right: 5vw; /* ブラウザ右端から5vw内側 */
}
.ab-kv__film-track {
	display: flex;
	flex-direction: column;
	width: 100%;
	animation: ab-film-roll 60s linear infinite;
	will-change: transform;
}
.ab-kv__film-track img {
	width: 100%;
	height: auto;
}
@keyframes ab-film-roll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); } /* 同一画像2枚構成のため-50%で継ぎ目なくループ */
}

/* --- MVステージ（ロゴ・キャッチの配置基準） --- */
.ab-kv__stage {
	position: relative;
	height: 100%;
	z-index: 1;
}
.ab-kv__mv {
	/* PC：縦をはみ出させて下端をカットし、なるべく大きく見せる。
	   幅はフィルム帯の内側に収める（object-fit:contain＋上寄せで縦横どちら制約でも上端基準を維持） */
	height: 128%; /* ステージ（=帯高）基準。帯が16:9に縮んでもポスター框の比率を保つ */
	width: auto;
	max-width: calc(100vw - 10vw - 2 * clamp(84px, 12.75vw, 183px) - 32px); /* 左右5vwのインセット＋フィルム帯の内側に収める */
	object-fit: contain;
	object-position: top center;
}

/* --- ロゴ：白黒テレビの電源ON風グリッチ出現 --- */
.ab-kv__logo {
	position: absolute;
	left: 50%;
	top: 38.5%; /* ポスター準拠：顎下〜胸元にロゴ上端がくる位置 */
	width: min(62%, 460px);
	transform: translateX(-50%);
	animation: ab-tv-on 0.9s steps(1, end) 1.2s both; /* 後半の傾き除去＋速度アップ／ローディングが開き切る頃に始動 */
}
/* 前半の「白黒テレビ電源ON」風の立ち上がりは踏襲。後半の斜体（skewX）・横ブレは廃し、
   明滅（opacity/brightness）だけ残してテンポよく完成形へ収束する。 */
@keyframes ab-tv-on {
	0%   { opacity: 0; transform: translateX(-50%) scale(1.5, 0.01); filter: brightness(4) blur(2px); }
	8%   { opacity: 1; transform: translateX(-50%) scale(1.25, 0.08); filter: brightness(4) blur(2px); }
	18%  { opacity: 1; transform: translateX(-50%) scale(1, 1); filter: brightness(2.6) contrast(1.8) blur(1px); }
	30%  { opacity: 0.3; transform: translateX(-50%) scale(1, 1); filter: brightness(2.2); }
	45%  { opacity: 1; transform: translateX(-50%) scale(1, 1); filter: brightness(1.7) contrast(1.4); }
	60%  { opacity: 0.7; transform: translateX(-50%) scale(1, 1); filter: brightness(1.9); }
	75%  { opacity: 1; transform: translateX(-50%) scale(1, 1); filter: brightness(1.2); }
	100% { opacity: 1; transform: translateX(-50%) scale(1, 1); filter: none; }
}

/* --- キャッチ（お呼び？／呼んだ？）：ロゴ出現後にフェードイン --- */
.ab-kv__catch {
	position: absolute;
	width: clamp(5.6px, 1.7%, 9.6px); /* 従来（1/5）のさらに半分 */
	opacity: 0;
	animation: ab-catch-in 0.9s var(--ab-ease) 2.2s forwards;
}
.ab-kv__catch--left {
	left: 0%;
	top: 15%;
}
.ab-kv__catch--right {
	right: 0%;
	top: 24%;
}
@keyframes ab-catch-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* モーション低減設定時はループ・グリッチを止めて完成形を即時表示 */
@media (prefers-reduced-motion: reduce) {
	.ab-kv__film-track { animation: none; }
	.ab-kv__logo { animation: none; }
	.ab-kv__catch { animation: none; opacity: 1; }
}

/* SP：MVは幅基準（下部カットなし）で縦中央配置。
   ステージ高を画像にフィットさせ、ロゴ・キャッチの%配置基準をアート本体に合わせる */
@media (max-width: 768px) {
	.ab-kv {
		height: auto;
		max-height: none; /* PCの16:9キャップを解除 */
		min-height: 0;
		aspect-ratio: 5 / 6;
		align-items: flex-end; /* 画像下端を帯下端に揃え、下部の余白を出さない */
		padding-top: 0;
	}
	/* KV下端の黒ブリード。
	   PCはKVを16:9でクロップするためポスターの黒が下端まで届き、直下の動画枠（#0d0a0b）と繋がって見える。
	   SPは素材全体が入るぶん、下端にフィルム帯のコマ間やポスターの下辺という明るい縁が残り、
	   黒帯との境目が白い線（＝隙間）に見えてしまう。下端だけ帯と同じ色を敷いて繋げる。
	   フィルム帯は無限スクロールでコマ位置が変わるため、クロップ位置の調整では消せない。 */
	.ab-kv::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 24px;
		background: #0d0a0b;
		pointer-events: none;
	}
	.ab-kv__stage {
		height: auto;
	}
	.ab-kv__mv {
		height: auto;
		width: calc(100vw - 2 * clamp(44px, 12vw, 56px) - 8px);
		max-width: none;
	}
	.ab-kv__film {
		width: clamp(44px, 12vw, 56px);
	}
	/* SPはPCの5vwインセットを解除して従来どおり両端に固定 */
	.ab-kv__film--left { left: 0; }
	.ab-kv__film--right { right: 0; }
	.ab-kv__logo {
		width: 64%;
		top: 40%;
	}
	.ab-kv__catch--left {
		left: 8%;
		top: 10%;
	}
	.ab-kv__catch--right {
		right: 5%;
		top: 17%;
	}
 .ab-kv__film-track {
  animation: ab-film-roll 30s linear infinite;
	}
}
/*------------------------------------------------------------
	汎用セクション（About / Cast / Staff / Trailer 共通の外枠）
------------------------------------------------------------*/
.ab-section {
	padding-block: clamp(60px, 10vw, 120px);
}
#news {
	padding-block: clamp(60px, 10vw, 120px) 60px;
}
/* 見出しを持たない枠（CONTENTS誘導枠・予告動画枠）は、上下の余白を .ab-section の半分にする */
#contents,
#trailer {
	padding-block: clamp(30px, 5vw, 60px);
}
.ab-section__title {
	text-align: center;
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-size: clamp(3rem, 2.2rem + 3vw, 5.6rem);
	font-weight: var(--ab-font-weight-bold);
	letter-spacing: -0.08em;
	line-height: 0.95;
	margin-bottom: clamp(32px, 6vw, 56px);
}
.ab-section__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: 20px auto 0;
	background: var(--ab-color-accent);
}

/*------------------------------------------------------------
	TOP内 予告動画枠（.ab-movie）
	全幅の暗色帯の中に16:9のYouTubeを中央配置する。自動再生はミュートが前提
	（ブラウザの自動再生ポリシー）。ループ制御は top.js。
------------------------------------------------------------*/
.ab-movie {
	background: #0d0a0b;
}
.ab-movie__frame {
	width: min(100% - 40px, 940px);
	margin-inline: auto;
}
/* iframeはインライン要素のため display:block にしないと下に隙間が出る */
.ab-movie__frame iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}
/* SPは左右の余白を取らず画面幅いっぱいに置く。
   基本スタイル（上の .ab-movie__frame）より後ろに置かないと後勝ちで打ち消されるため、
   冒頭のSPブロックではなくここに書く。 */
@media (max-width: 768px) {
	.ab-movie__frame {
		width: 100%;
	}
}

/*------------------------------------------------------------
	TOP内 NEWS誘導枠（.ab-news-teaser）
	PC：左に大見出し（220px）＋右にリスト。行は上罫線＋最終行のみ下罫線。
	日付=アクセント色の英字太字／Read MORE=右寄せの矩形ボタン。
	SP（≤912px）：縦積み・見出しとボタンは中央寄せ。
	WPではTOP固定ページ本文から [call_php file='top-news'] で同一マークアップを出力する。
------------------------------------------------------------*/
.ab-news-teaser {
	display: flex;
	gap: clamp(24px, 4vw, 56px);
	align-items: flex-start;
}
.ab-news-teaser__heading {
	flex-shrink: 0;
	width: clamp(160px, 200vw, 200px);
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(4rem, 8vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.08em;
	color: var(--ab-color-accent);
}
.ab-news-teaser__body {
	flex: 1;
	min-width: 0;
}
.ab-news-teaser__list {
	display: flex;
	flex-direction: column;
}
/* 行の上下罫線。記事0件のときの1行（.ab-news-teaser__empty）も同じ見え方にする */
.ab-news-teaser__item,
.ab-news-teaser__empty {
	border-top: 1px solid var(--ab-color-border);
}
.ab-news-teaser__item:last-child,
.ab-news-teaser__empty {
	border-bottom: 1px solid var(--ab-color-border);
}
/* 行の内側の余白。リンク行は <a> が、空状態は <p> 自身が持つ（値は1か所だけに置く） */
.ab-news-teaser__item a,
.ab-news-teaser__empty {
	padding: 22px 0 28px;
}
.ab-news-teaser__item a {
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 3vw, 40px);
	width: 100%;
}
.ab-news-teaser__date {
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	letter-spacing: -0.08em;
	color: var(--ab-color-accent);
	white-space: nowrap;
	flex-shrink: 0;
}
.ab-news-teaser__title {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem);
	line-height: 1.8;
}
.ab-news-teaser__more {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
.ab-news-teaser__more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
 min-width: 200px;
	padding: 2px 28px;
	background: var(--ab-color-accent);
	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.8rem, 2vw, 2.4rem);
	letter-spacing: -0.08em;
	transition: background 200ms var(--ab-ease), opacity 200ms var(--ab-ease);
}
.ab-news-teaser__more a:hover {
	background: var(--ab-color-accent-dark);
	opacity: 1;
}
@media (max-width: 912px) {
	.ab-news-teaser {
		flex-direction: column;
		gap: 20px;
	}
	.ab-news-teaser__heading {
		width: auto;
		text-align: center;
		margin-inline: auto;
	}
	.ab-news-teaser__body {
		width: 100%;
	}
	.ab-news-teaser__item a,
	.ab-news-teaser__empty {
		padding: 16px 0 20px;
	}
	.ab-news-teaser__item a {
		flex-direction: column;
		gap: 4px;
	}
	.ab-news-teaser__more {
		justify-content: center;
	}
}

/*------------------------------------------------------------
	TOP内 コンテンツ誘導枠（.ab-guide）
	4DX上映 / 4Kリバイバル上映 / GOODS&SHOP / EVENT の4カード（2カラム）。
	画像は専用のバナー素材（assets/img/top/banner_*）で4枚とも同一サイズ。
------------------------------------------------------------*/
.ab-guide {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* SP(390px)=24px 〜 PC(1440px)=40px を線形に */
	gap: clamp(24px, 18.06px + 1.52vw, 40px);
}
.ab-guide__item a {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ab-color-white);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
	text-align: center;
}
/* バナー素材は4枚とも同一比率のため、枠に嵌めずカード幅いっぱいに置く（上下左右の余白なし） */
.ab-guide__thumb {
	display: block; /* spanはインライン要素のため、サイズ指定の前にdisplayを明示 */
}
.ab-guide__thumb img {
	width: 100%;
}
.ab-guide__label {
	display: block;
	padding: 14px 18px 0;
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	letter-spacing: -0.08em;
	line-height: 1;
	/* SP(390px)=4rem 〜 PC(1440px)=5rem を線形に */
	font-size: clamp(4rem, 3.63rem + 0.95vw, 5rem);
	color: var(--ab-color-black);
}
.ab-guide__text {
	display: block;
	padding: 8px 18px 20px;
	font-size: clamp(1.3rem, 1.25rem + 0.2vw, 1.5rem);
	line-height: 1.7;
}
@media (max-width: 820px) {
	.ab-guide {
		grid-template-columns: 1fr;
	}
}