@charset "utf-8";
/*
あぶない刑事40周年特設サイト『ABDK40+』
contents.css … ④コンテンツページ（MOVIE / GOODS&SHOP / EVENT）
TOPと同じ「全面カスタム」構成。下層共通の白ボックス（news.css の .ab-article-box）もヘッダーロゴも持たず、
ページ先頭にキービジュアルが来る（MENUボタンはTOP同様スクロールで現れる＝body[data-menu="scroll"]）。
色・書体・余白は common.css の :root トークンを参照する（common.css を先に読み込む前提）。
このページ群は common.css ＋ 本ファイルのみで完結する（news.css は読み込まない）。
------------------------------------------------------------*/

/*------------------------------------------------------------
	1コンテンツ＝1セクション
	キービジュアルは全幅（画像の原寸を上限に中央寄せ）、
	本文・一覧は .ab-contents（common.css：min(100% - 40px, 1200px)）の中に置く。
------------------------------------------------------------*/
.ab-cnt {
	padding-block: clamp(48px, 8vw, 96px);
}
.ab-cnt:first-of-type {
	padding-top: 0;
}
.ab-cnt + .ab-cnt {
	border-top: 1px solid var(--ab-color-border-gray);
}

/* キービジュアル：横幅いっぱい。原寸を超えて拡大しないよう画像ごとに上限を持たせる */
.ab-cnt__kv {
	width: 100%;
	margin: 0 auto clamp(28px, 5vw, 56px);
}
.ab-cnt__kv img {
	width: 100%;
}
.ab-cnt__kv--wide {
	max-width: 1600px;
}
.ab-cnt__kv--tall {
	max-width: 980px;
}
/* GOODS&SHOP：全幅の黒帯にロゴを載せ、その下にタイトルロゴを地のテクスチャの上へ置く構成。
   どちらのロゴも横幅の上限は .ab-cnt__body（920px）に合わせる */
.ab-cnt__kv--stack {
	max-width: none;
}
.ab-cnt__kv-band {
	background: var(--ab-color-black);
	padding-block: clamp(28px, 5vw, 56px);
}
.ab-cnt__kv-title {
	margin-top: clamp(24px, 4vw, 44px);
}
.ab-cnt__kv-band img,
.ab-cnt__kv-title img {
	width: min(100% - 40px, 920px);
	margin-inline: auto;
}

/* リード文と注記（中央揃え・読み幅を絞る） */
.ab-cnt__body {
	width: min(100%, 920px);
	margin-inline: auto;
	text-align: center;
}
.ab-cnt__lead {
	/* SP(390px)=2rem 〜 PC(1440px)=3rem を線形に */
	font-size: clamp(2rem, 1.63rem + 0.95vw, 3rem);
	font-weight: 700;
	line-height: 1.6em;
	text-align: justify;
	text-align-last: left; /* 最終行は左揃え（和文の両端揃えの定石） */
}
/* 文章が長いページ（movie-4k / goods / event）は一段小さく。SP(390px)=1.5rem 〜 PC(1440px)=2.2rem */
.ab-cnt__lead--long {
	font-size: clamp(1.5rem, 1.24rem + 0.67vw, 2.2rem);
}
/* 文章が短いページ（movie-4dx）はセンター揃え */
.ab-cnt__lead--center {
	text-align: center;
	text-align-last: center;
}
.ab-cnt__lead + .ab-cnt__lead {
	margin-top: 1em;
}
.ab-cnt__note {
	margin-top: clamp(16px, 2.5vw, 24px);
	/* SP(390px)=1.4rem 〜 PC(1440px)=2rem を線形に */
	font-size: clamp(1.4rem, 1.18rem + 0.57vw, 2rem);
	font-weight: var(--ab-font-weight-bold);
	line-height: 1.6;
	color: var(--ab-color-accent);
}

/* SP限定の改行。PCでは無効化する（brはdisplayで出し分けできる） */
.ab-br-sp {
	display: none;
}

/*------------------------------------------------------------
	開催概要（会期・会場など）
	TOPのNEWS誘導枠と同じ「上下1本の直線で行を仕切る」作法に合わせる。
------------------------------------------------------------*/
.ab-cnt-info {
	width: min(100%, 920px); /* .ab-cnt__body と同じ幅に揃える */
	margin: clamp(32px, 5vw, 56px) auto 0;
	border-top: 1px solid var(--ab-color-border);
	text-align: left;
}
.ab-cnt-info__row {
	display: flex;
	gap: clamp(12px, 2vw, 28px);
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--ab-color-border);
}
.ab-cnt-info__row dt {
	flex: 0 0 auto;
	width: 130px;
	font-family: var(--ab-font-base);
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.3rem, 1.25rem + 0.2vw, 1.5rem);
	color: var(--ab-color-accent);
}
.ab-cnt-info__row dd {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.6rem);
	line-height: 1.8;
}
/* 情報表の中の外部リンク。グローバルの a は color:inherit / text-decoration:none なので、
   ここだけ配色と下線を与えてリンクだと分かるようにする。
   配色・下線オフセットは記事本文（news.css の .ab-entry-content a）と揃える。
   URLをそのまま文字にしているため、a が display:inline-block（common.css）である分だけ
   overflow-wrap を明示しないと狭い幅で dd をはみ出す。 */
.ab-cnt-info__row dd a {
	max-width: 100%;
	color: var(--ab-color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

/*------------------------------------------------------------
	上映作品ポスター一覧
------------------------------------------------------------*/
.ab-cnt-posters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: clamp(16px, 2.4vw, 32px);
	row-gap: clamp(32px, 4.8vw, 64px); /* 上下の余白は左右の2倍（SPは3倍＝下部のメディアクエリ） */
	margin-top: clamp(32px, 5vw, 60px);
}
.ab-cnt-poster {
	text-align: center;
}
.ab-cnt-poster figure {
	margin: 0;
}
.ab-cnt-poster img {
	width: 100%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.ab-cnt-poster__title {
	margin-top: 14px;
	font-size: clamp(1.3rem, 1.25rem + 0.2vw, 1.5rem);
	font-weight: var(--ab-font-weight-bold);
	line-height: 1.5;
	color: var(--ab-color-accent);
}
/*------------------------------------------------------------
	単体図版（告知ビジュアル等）
------------------------------------------------------------*/
.ab-cnt-fig {
	width: min(100%, 460px);
	margin: clamp(32px, 5vw, 60px) auto 0;
}
.ab-cnt-fig img {
	width: 100%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.ab-cnt-fig figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: clamp(1.2rem, 1.15rem + 0.2vw, 1.3rem);
	color: var(--ab-color-text-muted);
	line-height: 1.7;
}

/*------------------------------------------------------------
	締めの帯（ポスター下段の「2026.10-2027.3 SEE YOU AT THE THEATER」）
	素材のSVGを .ab-contents 幅いっぱいに置く。PC／SPで版を出し分ける（<picture>のmedia）。
------------------------------------------------------------*/
.ab-theater {
	margin-block: 0 clamp(48px, 8vw, 96px);
}
.ab-theater img {
	width: 100%;
}

/*------------------------------------------------------------
	メディアクエリは基本スタイルの後（後勝ち）にまとめて置く
------------------------------------------------------------*/
@media (max-width: 1000px) {
	.ab-cnt-posters {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.ab-br-sp {
		display: inline;
	}
	.ab-cnt-posters {
		row-gap: 48px; /* SPは左右（16px）の3倍 */
	}
}
@media (max-width: 700px) {
	.ab-cnt-posters {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.ab-cnt-info__row {
		flex-direction: column;
		gap: 2px;
		padding: 14px 0;
	}
	.ab-cnt-info__row dt {
		width: auto;
	}
}