@charset "utf-8";
/* ==========================================================================
   ACL ELITE 2026-27 / VISSEL KOBE
   common.css
   ---------------------------------------------------------------------------
   - 命名は既存2026_27を踏襲：{section}-{block}-{element} ／ 共通部品は cmn-
   - ブレイクポイントは 834 / 835px の1点のみ（既存サイト踏襲）
   - カラーは ACL Elite 公式ブランドガイドライン準拠（2.1 OVERVIEW）
   - 依存ライブラリなし（jQuery / Swiper / lightbox / FontAwesome 不使用）
   ========================================================================== */

/* ==========================================================================
   00. トークン
   ========================================================================== */
:root {
	/* --- ベース（Pale Gold 系の暖色ニュートラル） --- */
	--c-bg: #ffffff;
	--c-bg-2: #f5eee5;
	/* Pale Gold（公式） */
	--c-bg-3: #ede6dc;
	--c-line: #e4dcd1;
	--c-line-lt: #c9bfb2;

	/* --- ヴィッセル神戸（クラブ所有領域のみ） --- */
	--c-crimson: #a9002e;
	--c-crimson-dk: #7a0020;
	--c-crimson-lt: #d4123f;
	--c-crimson-bg: #fbeef1;
	--c-crimson-deep: #4e0015;
	/* ユニフォームパネルの地。クリムゾンより沈ませて高級感を出す */

	/* --- ACL Elite 公式パレット --- */
	--c-purple: #230037;
	/* Regal Purple  PMS 2695C */
	--c-purple-lt: #4a286b;
	/* ABOUT ACLE の縦グラデ下端 */
	--c-lilac: #9f7fdf;
	/* Lilac         PMS 2094C */
	--c-gold: #baa072;
	/* Deep Gold     PMS 7503C */
	--c-gold-lt: #deccb2;
	/* Light Gold    PMS 4249C */
	--c-gold-pale: #f5eee5;
	/* Pale Gold                */

	/* --- 濃紫グラデーション（RANKINGのセクション地） --- */
	--c-purple-grad-a: #240138;
	/* 左端 */
	--c-purple-grad-b: #4d2b70;
	/* 右端 */

	/* --- テキスト --- */
	--c-white: #ffffff;
	--c-text: #1a1420;
	--c-mute: #6b6378;
	--c-dim: #8a8290;
	--c-neutral: #6e6e6e;
	/* AWAY・国旗まわりの無彩色 */

	/* --- スペーシング（8pxグリッド） --- */
	--s-1: 8px;
	--s-2: 16px;
	--s-3: 24px;
	--s-4: 32px;
	--s-5: 40px;
	--s-6: 56px;
	--s-7: 80px;
	--s-8: 120px;
	--sec-pad: 80px;

	/* --- 書体 --- */
	--f-en: "Oswald", sans-serif;
	--f-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;

	/* --- フォントサイズ（PC） --- */
	--fz-caption: 12px;
	--fz-label: 12px;
	--fz-btn: 14px;
	--fz-small: 14px;
	--fz-body: 16px;
	--fz-lead: 18px;
	--fz-h4: 20px;
	--fz-date: 18px;
	--fz-h3: 24px;
	--fz-h2: 48px;
	--fz-h1: 64px;
	--fz-score: 40px;

	/* --- レイアウト --- */
	--w-inner: 1120px;
	--w-narrow: 880px;
	--h-gnav: 64px;
	--h-gnav-row: 64px;
	/* gNav 1行ぶんの高さ。SPは2行に折り返すので --h-gnav の半分になる */

	/* --- 背景画像（ACLE公式グラデーション素材） --- */
	--bg-dark: url("./images/acle_bg1.png");
	/* 濃紫：暗いセクション */
	--bg-gold: url("./images/acle_bg2.png");
	/* 金：ファイナルステージ盤面 */
	--bg-lilac: url("./images/bg_match-card.png");
	/* 淡紫：MATCHカードの面（522×683・カード比率と同じ） */
	--bg-history: url("./images/bg_history.png");
	/* クリムゾンの質感：HISTORY */
}

/* SP：フォントサイズだけを上書き（Figma Typography コレクションの SP モードと同値） */
@media screen and (max-width: 834px) {
	:root {
		--fz-small: 13px;
		--fz-body: 14px;
		--fz-lead: 16px;
		--fz-h4: 18px;
		--fz-date: 16px;
		--fz-h3: 20px;
		--fz-h2: 32px;
		--fz-h1: 40px;
		--fz-score: 32px;
		--sec-pad: 56px;
		--h-gnav: 80px;
		--h-gnav-row: 40px;
	}
}

/* ==========================================================================
   01. リセット／ベース
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--h-gnav) + 8px);
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-jp);
	font-size: var(--fz-body);
	line-height: 1.75;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
}

a:hover {
	opacity: .78;
}

button {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 数字は等幅（順位表・スコアのガタつき防止） */
.num,
.cmn-num {
	font-family: var(--f-en);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* 表示切替（既存サイト踏襲）
   .cmn-btns など後段のコンポーネントに display を上書きされないよう !important を付ける */
.only-sp {
	display: none !important;
}

@media screen and (max-width: 834px) {
	.only-pc {
		display: none !important;
	}

	.only-sp {
		display: block !important;
	}

	br.only-sp {
		display: inline !important;
	}

	.cmn-btns.only-sp {
		display: flex !important;
	}
}

[hidden] {
	display: none !important;
}

/* スクリーンリーダー専用 */
.cmn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   02. レイアウト共通
   ========================================================================== */
.cmn-section {
	position: relative;
	padding: var(--sec-pad) 0;
}

.cmn-inner {
	width: min(var(--w-inner), calc(100% - 40px));
	margin-inline: auto;
}

.cmn-inner--narrow {
	width: min(var(--w-narrow), calc(100% - 40px));
}

/* --- 背景バリエーション ------------------------------------------------- */
.cmn-section--dark {
	background: var(--c-purple) var(--bg-dark) center / cover no-repeat;
	color: var(--c-white);
}

/* 濃紫グラデーション（背景画像を使わないバリエーション。--dark と併用する） */
.cmn-section--grad {
	background: linear-gradient(90deg, var(--c-purple-grad-a) 0%, var(--c-purple-grad-b) 100%);
}

.cmn-section--crimson {
	background: var(--c-crimson);
	color: var(--c-white);
}

.cmn-section--pale {
	background: var(--c-bg-2);
}

/* ==========================================================================
   03. 共通見出し cmn-head
   ========================================================================== */
.cmn-head {
	margin-bottom: var(--s-6);
}

/* 見出しの右にボタンを置く行。
   .cmn-head::after（罫線）もフレックスアイテムになるため、
   折り返して全幅に伸ばさないと space-between がボタンを中央に寄せてしまう */
.cmn-head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: var(--s-3);
	row-gap: 0;
}

.cmn-head--row::after {
	flex: 0 0 100%;
}

.cmn-head-title {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h2);
	line-height: 1;
	letter-spacing: .04em;
	margin: 0;
}

/* Figmaの cmn-head--row 準拠。明るい面・暗い面を問わず Deep Gold で統一する */
.cmn-head-sub {
	display: block;
	margin-top: var(--s-1);
	font-size: var(--fz-small);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.7;
	color: var(--c-gold);
}

.cmn-head::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: var(--s-3);
	background: var(--c-line);
}

.cmn-section--dark .cmn-head::after {
	background: rgba(255, 255, 255, .22);
}

.cmn-section--crimson .cmn-head::after {
	background: rgba(255, 255, 255, .3);
}

/* 小見出し（EN ／ JP のペア）
   ゴールドは白地だとコントラストが足りないので、明るいセクションでは
   文字はダーク、ゴールドは先頭のバーだけに使う */
.cmn-subhead {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: var(--s-3);
	font-family: var(--f-en);
	font-weight: 600;
	font-size: var(--fz-h3);
	letter-spacing: .1em;
	color: var(--c-text);
}

.cmn-subhead::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 18px;
	height: 2px;
	background: var(--c-gold);
}

.cmn-subhead-jp {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: var(--fz-body);
	letter-spacing: .04em;
	color: var(--c-mute);
}

.cmn-section--dark .cmn-subhead,
.cmn-section--crimson .cmn-subhead {
	color: var(--c-gold-lt);
}

.cmn-section--dark .cmn-subhead-jp,
.cmn-section--crimson .cmn-subhead-jp {
	color: rgba(255, 255, 255, .8);
}

/* 素材未入稿で blank.png に差し替わった画像が伸びないようにする */
img.is-fallback {
	object-fit: contain;
	opacity: .5;
}

/* ==========================================================================
   04. 共通ボタン cmn-btn
   ========================================================================== */
.cmn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 40px;
	border: 1px solid var(--c-text);
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-btn);
	letter-spacing: .12em;
	white-space: nowrap;
}

.cmn-btn:hover {
	opacity: 1;
	background: var(--c-text);
	color: var(--c-white);
}

.cmn-btn::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.cmn-btn--cta {
	background: var(--c-crimson);
	border-color: var(--c-crimson);
	color: var(--c-white);
	font-family: var(--f-jp);
	font-weight: 700;
	letter-spacing: .06em;
}

.cmn-btn--cta:hover {
	background: var(--c-crimson-dk);
	border-color: var(--c-crimson-dk);
}

.cmn-btn--light {
	border-color: rgba(255, 255, 255, .5);
	color: var(--c-white);
}

.cmn-btn--light:hover {
	background: var(--c-white);
	color: var(--c-text);
}

.cmn-btns {
	display: flex;
	justify-content: center;
	margin-top: var(--s-5);
}

/* ==========================================================================
   05. 共通スライダー（矢印＋ドット）
   ========================================================================== */
.cmn-slider {
	position: relative;
}

/* 横スクロールのビューポート。JS が scrollLeft を制御する */
.cmn-slider-viewport {
	display: flex;
	gap: var(--s-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-inline: max(20px, calc((100% - var(--w-inner)) / 2));
}

.cmn-slider-viewport::-webkit-scrollbar {
	display: none;
}

.cmn-slider-viewport>* {
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.cmn-slider-ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: var(--s-4);
}

.cmn-slider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid currentColor;
	color: var(--c-text);
}

.cmn-section--dark .cmn-slider-arrow,
.cmn-section--crimson .cmn-slider-arrow {
	color: var(--c-white);
}

.cmn-slider-arrow:hover {
	opacity: 1;
	background: currentColor;
}

.cmn-slider-arrow:hover::before {
	border-color: var(--c-bg);
}

.cmn-slider-arrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

.cmn-slider-arrow--prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.cmn-slider-arrow--next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

.cmn-slider-arrow[disabled] {
	opacity: .3;
	pointer-events: none;
}

.cmn-slider-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cmn-slider-dots button {
	width: 8px;
	height: 4px;
	background: currentColor;
	opacity: .3;
	transition: width .25s ease, opacity .25s ease;
}

.cmn-slider-dots button.is-active {
	width: 40px;
	opacity: 1;
}

@media screen and (max-width: 834px) {
	.cmn-slider-arrow {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   07. 共通アコーディオン cmn-acc
   ========================================================================== */
.cmn-acc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 4px 2px;
	background: none;
	border-bottom: 1px solid var(--c-crimson);
	color: var(--c-crimson);
	font-weight: 700;
	font-size: var(--fz-body);
	text-align: center;
}

.cmn-acc-btn::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	transition: transform .25s ease;
}

.cmn-acc-btn.is-open::after {
	transform: rotate(90deg);
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.cmn-acc-body {
	display: none;
	padding: var(--s-3) 24px var(--s-4);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-top: 0;
}

/* ==========================================================================
   08. スクロールフェード
   ========================================================================== */
.js-fadein {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .7s ease, transform .7s ease;
}

.js-fadein.is-shown {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.js-fadein {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.cmn-slider-viewport {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   09. ページトップ
   ========================================================================== */
.cmn-pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--c-crimson);
	color: var(--c-white);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.cmn-pagetop.is-shown {
	opacity: 1;
	pointer-events: auto;
}

.cmn-pagetop::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(-45deg);
	margin-top: 4px;
}
/* ==========================================================================
   10. KV（メインスライダー＋連動サムネイル）
   ========================================================================== */
/* サムネイル帯の地色は ACLE の Regal Purple */
.kv {
	background: var(--c-purple);
}

.kv-main {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-bg-3);
}

.kv-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .9s ease;
}

.kv-slide.is-active {
	opacity: 1;
}

.kv-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kv-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	background: rgba(26, 20, 32, .35);
	color: var(--c-white);
	backdrop-filter: blur(2px);
}

.kv-arrow:hover {
	opacity: 1;
	background: rgba(26, 20, 32, .6);
}

.kv-arrow::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

/* スライドが1枚のときは矢印を出さない（JSが .is-single を付ける） */
.kv-main.is-single .kv-arrow {
	display: none;
}

.kv-arrow--prev {
	left: 12px;
}

.kv-arrow--prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.kv-arrow--next {
	right: 12px;
}

.kv-arrow--next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

.kv-thumbs {
	width: min(var(--w-inner), calc(100% - 40px));
	margin: 0 auto;
	padding: 8px 0;
}

.kv-thumbs-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--s-1);
}

.kv-thumbs-item {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
	opacity: .45;
	transition: opacity .25s ease;
}

.kv-thumbs-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kv-thumbs-item.is-active,
.kv-thumbs-item:hover {
	opacity: 1;
}

.kv-thumbs-item.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--c-crimson);
}

@media screen and (max-width: 834px) {
	/* SPは4:5のSP専用画像（Figma SP版：414×518） */
	.kv-main {
		aspect-ratio: 4 / 5;
	}

	.kv-arrow {
		width: 36px;
		height: 36px;
	}

	.kv-thumbs {
		width: calc(100% - 40px);
		margin: 0 auto;
		padding: 4px 0;
	}
}

/* ==========================================================================
   11. gNav（sticky）
   ========================================================================== */
.gnav {
	position: sticky;
	top: 0;
	z-index: 30;
	border-top: 3px solid var(--c-gold);
	background: var(--c-crimson);
}

.gnav-list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: var(--h-gnav);
}

.gnav-item a {
	display: flex;
	align-items: center;
	height: var(--h-gnav-row);
	padding: 0 24px;
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-btn);
	letter-spacing: .12em;
	color: var(--c-white);
	position: relative;
}

.gnav-item a::after {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 12px;
	height: 1px;
	background: var(--c-gold-lt);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.gnav-item a:hover,
.gnav-item a.is-current {
	opacity: 1;
}

.gnav-item a:hover::after,
.gnav-item a.is-current::after {
	transform: scaleX(1);
}

@media screen and (max-width: 834px) {
	/* 横スクロールではなく折り返して2行にする。
	   1項目を25%にして、書体の幅に左右されず 4＋4 で割れるようにしている */
	.gnav-list {
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		height: auto;
		min-height: var(--h-gnav);
	}

	.gnav-item {
		flex: 0 0 25%;
		/* フレックスアイテムの min-width:auto を解除しないと、
		   文字幅が25%を超えたときに3行へこぼれる */
		min-width: 0;
	}

	/* 非表示の項目（template）が残っているあいだは6項目なので 3列×2段。
	   HIGHLIGHT / CONTENTS を公開して template を外せば、
	   このルールが外れて自動で 4列×2段（25%）に戻る */
	.gnav-list:has(template[data-hidden]) .gnav-item {
		flex-basis: 33.3333%;
	}

	.gnav-item a {
		width: 100%;
		justify-content: center;
		padding: 0 6px;
		white-space: nowrap;
	}

	.gnav-item a::after {
		left: 12px;
		right: 12px;
		bottom: 6px;
	}
}

/* ==========================================================================
   12. NEWS（Figma: PC 5:2 ／ SP 91:20334 ／ list 91:20341）
   PCは 240px の見出しカラム＋816px のリストの2カラム。
   見出しが横に並ぶぶん、セクションの縦幅が従来より短くなる。
   ========================================================================== */
.news-layout {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.news-head {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-3);
	padding-bottom: var(--s-3);
}

.news-head-body {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

/* 見出しとサブの間隔は news-head-body の gap で取るので margin は消す */
.news-head-body .cmn-head-sub {
	margin-top: 0;
}

/* Figmaの cmn-btn は枠が Light Line、面が白30% */
.news-head .cmn-btn {
	border-color: var(--c-line-lt);
	background: rgba(255, 255, 255, .3);
}

.news-head .cmn-btn:hover {
	background: var(--c-text);
	border-color: var(--c-text);
}

/* Figma: news-list に上罫線、各 news-item に下罫線（どちらも #E4DCD1） */
.news-list {
	flex: 1 1 auto;
	min-width: 0;
	border-top: 1px solid var(--c-line);
}

.news-item {
	border-bottom: 1px solid var(--c-line);
}

.news-item a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) 0;
}

/* PCでは日付・ラベル・見出しを1行に並べるので、meta の箱は無かったことにする */
.news-item-meta {
	display: contents;
}

.news-item-date {
	flex: 0 0 110px;
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-date);
	letter-spacing: .04em;
	color: var(--c-mute);
}

.news-item-tag {
	flex: 0 0 132px;
	padding: 3px 10px;
	border: 1px solid var(--c-line-lt);
	color: var(--c-mute);
	font-family: var(--f-en);
	font-weight: 600;
	font-size: var(--fz-label);
	letter-spacing: .16em;
	text-align: center;
}

.news-item-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fz-body);
	font-weight: 400;
	line-height: 1.8;
}

@media screen and (max-width: 834px) {
	.cmn-section.news {
		padding: 24px 0;
	}

	.news-layout {
		display: block;
	}

	/* SPは見出しの右にボタンを置き、下端で揃える */
	.news-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--s-2);
		padding-bottom: 0;
		margin-bottom: var(--s-3);
	}

	.news-head-body {
		gap: 4px;
	}

	.news-head .cmn-btn {
		min-height: 36px;
		padding: 0 24px;
	}

	.news-item a {
		display: block;
		padding: 8px 0;
	}

	.news-item-meta {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 10px;
	}

	.news-item-date {
		flex: 0 0 auto;
	}
}
/* ==========================================================================
   13. MATCH（カード横スライダー）
   ========================================================================== */
.match .cmn-slider-viewport {
	gap: var(--s-3);
	padding-block: 4px;
}

.match-card {
	width: 348px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--c-lilac) var(--bg-lilac) center / cover no-repeat;
	color: var(--c-purple);
	padding: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.match-card-head {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h4);
	letter-spacing: .06em;
	text-align: center;
}

.match-card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-1);
	flex: 1 1 auto;
}

.match-card-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
}

/* シーズンが2026→2027をまたぐので年を小さく添える */
.match-card-year {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-caption);
	line-height: 1;
	letter-spacing: .14em;
	color: var(--c-mute);
	margin-bottom: -2px;
}

.match-card-date {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: var(--fz-h2);
	line-height: 1;
	letter-spacing: -.02em;
}

.match-card-time {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-date);
	letter-spacing: .04em;
}

.match-card-badge {
	display: inline-block;
	min-width: 72px;
	padding: 3px 12px;
	background: var(--c-crimson);
	color: var(--c-white);
	font-family: var(--f-en);
	font-weight: 600;
	font-size: var(--fz-label);
	letter-spacing: .12em;
	text-align: center;
}

/* AWAY は無彩色グレー（HOMEとの区別） */
.match-card-badge--away {
	background: var(--c-neutral);
}

.match-card-venue {
	font-size: var(--fz-caption);
}

.match-card-vs {
	flex: 0 0 auto;
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h3);
	letter-spacing: .08em;
}

.match-card-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
}

.match-card-emblem {
	width: 96px;
	height: 96px;
	object-fit: contain;
}

.match-card-club {
	font-size: var(--fz-caption);
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}

.match-card-flag {
	width: 24px;
	height: auto;
}

.match-card-country {
	font-family: var(--f-en);
	font-size: var(--fz-label);
	letter-spacing: .1em;
	color: var(--c-mute);
}

/* 試合前＝CTAピル／試合後＝スコアピル（公式記録へのリンクを兼ねる） */
.match-card-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	border-radius: 999px;
	background: var(--c-crimson);
	color: var(--c-white);
	font-weight: 700;
	font-size: var(--fz-body);
	letter-spacing: .04em;
}

.match-card-pill:hover {
	opacity: 1;
	background: var(--c-crimson-dk);
}

.match-card-pill--score {
	background: var(--c-bg-2);
	color: var(--c-crimson);
	font-family: var(--f-en);
	font-weight: 700;
	font-size: var(--fz-h3);
	letter-spacing: .06em;
}

.match-card-pill--score:hover {
	background: var(--c-white);
}

.match-card-result {
	font-family: var(--f-jp);
	font-size: var(--fz-body);
}

@media screen and (max-width: 834px) {
	.match .cmn-slider-viewport {
		gap: 12px;
		padding-inline: 20px;
	}

	.match-card {
		width: 300px;
		border-radius: 14px;
		padding: var(--s-2);
	}

	.match-card-emblem {
		width: 76px;
		height: 76px;
	}
}

/* ==========================================================================
   14. RANKING
   ========================================================================== */
.ranking-group+.ranking-group,
.ranking-group+.ranking-rules {
	margin-top: var(--s-6);
}

.ranking-group-label {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h3);
	letter-spacing: .1em;
	color: var(--c-gold-lt);
	margin-bottom: var(--s-2);
}

.ranking-table-wrap {
	border-radius: 16px;
	overflow: hidden;
	background: var(--c-white);
}

.ranking-table {
	width: 100%;
	color: var(--c-text);
}

.ranking-table th,
.ranking-table td {
	padding: 14px 4px;
	border-bottom: 1px solid var(--c-line);
	text-align: right;
	vertical-align: middle;
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-small);
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
}

.ranking-table thead th {
	background: var(--c-bg-2);
	padding-block: 12px;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--c-mute);
	font-weight: 600;
}

.ranking-table th:first-child,
.ranking-table td:first-child {
	width: 44px;
	padding-left: 16px;
	text-align: center;
}

.ranking-table th:nth-child(2),
.ranking-table td:nth-child(2) {
	width: auto;
	text-align: left;
}

.ranking-table th:last-child,
.ranking-table td:last-child {
	padding-right: 16px;
}

.ranking-table col.is-pts {
	width: 56px;
}

.ranking-table tbody tr:last-child td {
	border-bottom: 0;
}

/* 順位 */
.ranking-table .rank {
	color: var(--c-mute);
}

/* 突破ライン関連の表示は、RANKINGセクションの is-pending で一括制御する。
   リーグ戦が未消化のあいだは is-pending を付けたままにし、
   結果が出たら index.html の <section class="... ranking is-pending"> から
   is-pending を消せば、金罫線・順位の色分け・注記の該当文が一斉に出る */
.ranking:not(.is-pending) .ranking-table tr.is-qualify .rank {
	color: var(--c-crimson);
	font-weight: 700;
}

/* クラブ名セル */
.ranking-club {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ranking-club img {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.ranking-club span {
	font-family: var(--f-jp);
	font-weight: 400;
	font-size: var(--fz-caption);
	line-height: 18px;
	letter-spacing: .02em;
}

/* 勝点は少し強く */
.ranking-table .pts {
	font-weight: 700;
	color: var(--c-text);
	font-size: var(--fz-small);
}

/* 自チーム行 */
.ranking-table tr.is-self td {
	background: var(--c-crimson-bg);
	color: var(--c-crimson);
	font-weight: 700;
}

.ranking-table tr.is-self .ranking-club span {
	font-weight: 700;
	color: var(--c-crimson);
}

/* 突破ライン（8位と9位の間） */
.ranking:not(.is-pending) .ranking-table tr.is-cutline td {
	border-bottom: 2px solid var(--c-gold);
}

/* 注記のうち、突破ラインの説明と更新日は未消化のあいだ出さない */
.ranking.is-pending .ranking-note-line,
.ranking.is-pending .ranking-note-date,
.ranking.is-pending .ranking-note br {
	display: none;
}

.ranking-note {
	margin-top: var(--s-2);
	font-size: var(--fz-caption);
	color: rgba(255, 255, 255, .75);
}

@media screen and (max-width: 834px) {

	.ranking-table th,
	.ranking-table td {
		padding: 14px 1px;
	}

	.ranking-table th:first-child,
	.ranking-table td:first-child {
		width: 20px;
		padding-left: 8px;
	}

	.ranking-table th:last-child,
	.ranking-table td:last-child {
		padding-right: 8px;
	}

	.ranking-table col.is-pts {
		width: 20px;
	}

	.ranking-club img {
		width: 30px;
		height: 30px;
	}
}

/* ==========================================================================
   15. 順位の決定方法（テキストベース・2025-26踏襲）
   ========================================================================== */
.ranking-rules-panel {
	border-radius: 16px;
	background: var(--c-white);
	color: var(--c-text);
	padding: var(--s-5);
}

.ranking-rules-block+.ranking-rules-block {
	margin-top: var(--s-4);
}

.ranking-rules-subhead {
	font-weight: 700;
	font-size: var(--fz-lead);
	letter-spacing: .02em;
	color: var(--c-gold);
	margin-bottom: 6px;
}

.ranking-rules-text {
	font-size: var(--fz-body);
	line-height: 1.75;
}

.ranking-rules-list {
	margin-top: var(--s-2);
	padding: var(--s-4);
	border-radius: 8px;
	background: var(--c-bg-2);
	counter-reset: rule;
}

.ranking-rules-list li {
	display: flex;
	gap: 6px;
	font-weight: 700;
	font-size: var(--fz-body);
	line-height: 1.75;
}

.ranking-rules-list li+li {
	margin-top: 14px;
}

.ranking-rules-list li::before {
	counter-increment: rule;
	content: counter(rule) ".";
	flex: 0 0 22px;
	text-align: right;
}

@media screen and (max-width: 834px) {
	.ranking-rules-panel {
		padding: var(--s-3) 20px;
	}

	.ranking-rules-list {
		padding: var(--s-2);
	}

	.ranking-rules-list li+li {
		margin-top: 12px;
	}
}
/* ==========================================================================
   16. HIGHLIGHT（中央に大きい動画・前後が見切れる）
   ========================================================================== */
.highlight .cmn-slider-viewport {
	gap: var(--s-3);
	padding-inline: calc((100% - 760px) / 2);
}

.highlight-slide {
	position: relative;
	width: 760px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-crimson-dk);
	display: block;
}

.highlight-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.highlight-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(26, 20, 32, .35);
	opacity: 1;
	transition: opacity .3s ease;
	z-index: 1;
}

.highlight-slide.is-active::before {
	opacity: 0;
}

.highlight-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
}

.highlight-play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 5px;
	border-left: 20px solid var(--c-crimson);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}

.highlight-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--s-3);
	background: linear-gradient(180deg, rgba(26, 20, 32, 0) 0%, rgba(26, 20, 32, .85) 100%);
	color: var(--c-white);
}

.highlight-caption-date {
	font-family: var(--f-en);
	font-size: var(--fz-label);
	letter-spacing: .1em;
	color: var(--c-gold-lt);
}

.highlight-caption-title {
	font-size: var(--fz-small);
	font-weight: 700;
	line-height: 1.5;
}

@media screen and (max-width: 834px) {
	.highlight .cmn-slider-viewport {
		gap: 16px;
		padding-inline: calc((100% - 320px) / 2);
	}

	.highlight-slide {
		width: 320px;
	}

	.highlight-play {
		width: 52px;
		height: 52px;
	}

	.highlight-play::before {
		border-left-width: 15px;
		border-top-width: 9px;
		border-bottom-width: 9px;
		margin-left: 4px;
	}

	.highlight-caption {
		padding: 10px 14px 12px;
	}
}

/* ==========================================================================
   17. CONTENTS ／ The Opponent Club（Instagram 画像グリッド）
   ========================================================================== */
.contents-block+.contents-block {
	margin-top: var(--s-7);
}

.opponent-viewport {
	position: relative;
}

.opponent-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
}

/* 9枚目以降は隠す（アコーディオンで展開） */
.opponent-grid.is-collapsed .opponent-item:nth-child(n + 10) {
	display: none;
}

.opponent-item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--c-bg-3);
}

.opponent-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.opponent-item:hover img {
	transform: scale(1.04);
}

.opponent-item-btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Instagram アイコン */
.opponent-item-btn::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 22px;
	height: 22px;
	border: 2px solid var(--c-white);
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
	opacity: .9;
}

.opponent-item-btn::before {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 8px;
	height: 8px;
	border: 2px solid var(--c-white);
	border-radius: 50%;
	z-index: 1;
	opacity: .9;
}

/* 半透明マスク＋MOREボタン */
.opponent-more {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 120px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .92) 55%, var(--c-white) 100%);
	text-align: center;
	pointer-events: none;
}

.opponent-more .cmn-acc-btn {
	pointer-events: auto;
}

.opponent-viewport.is-open .opponent-more {
	position: static;
	padding-top: var(--s-4);
	background: none;
}

@media screen and (max-width: 834px) {
	.opponent-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-2);
	}

	.opponent-grid.is-collapsed .opponent-item:nth-child(n + 10) {
		display: block;
	}

	.opponent-grid.is-collapsed .opponent-item:nth-child(n + 9) {
		display: none;
	}
}

/* --- Instagram モーダル -------------------------------------------------- */
.insta-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(26, 20, 32, .82);
}

.insta-modal.is-open {
	display: flex;
}

.insta-modal-inner {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: var(--c-white);
	border-radius: 12px;
}

.insta-modal-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.insta-modal-body {
	padding: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.insta-modal-caption {
	font-size: var(--fz-small);
	line-height: 1.7;
}

.insta-modal-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	background: var(--c-crimson);
	color: var(--c-white);
	font-weight: 700;
	font-size: var(--fz-btn);
	letter-spacing: .04em;
	border-radius: 999px;
}

.insta-modal-link:hover {
	opacity: 1;
	background: var(--c-crimson-dk);
}

.insta-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(26, 20, 32, .6);
	color: var(--c-white);
}

.insta-modal-close::before,
.insta-modal-close::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 1px;
	background: currentColor;
}

.insta-modal-close::before {
	transform: rotate(45deg);
}

.insta-modal-close::after {
	transform: rotate(-45deg);
}

body.is-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   18. SHORT MOVIE（Ballon d'Or 型・縦型9:16）
   ========================================================================== */
.short-panel {
	/* --short-w：カード幅（単位なし・px換算）。横に5枚並ぶ値にしている
	   1120 − padding 60 − gap 15×4 ＝ 1000 → 1000 / 5 ＝ 200
	   Instagramの埋め込みは幅326px未満だと中身が崩れるため、
	   326pxで描画してから 200/326 に縮小して収めている */
	--short-w: 200;
	--short-h: 470px;
	/* JSが実測値で上書きする */
	background: #05040b;
	border-radius: 16px;
	padding: var(--s-5) 0;
}

.short-panel .cmn-slider-viewport {
	gap: 15px;
	padding-inline: 30px;
	align-items: flex-start;
}

/* --- Instagramリールの埋め込み ---------------------------------------- */
.short-embed {
	flex: 0 0 auto;
	width: calc(var(--short-w) * 1px);
	/* 縦動画・横動画が混ざっても高さを揃える */
	height: var(--short-h);
	overflow: hidden;
	border-radius: 12px;
	background: var(--c-white);
	scroll-snap-align: center;
}

.short-embed-inner {
	width: 326px;
	transform: scale(calc(var(--short-w) / 326));
	transform-origin: top left;
}

/* 公式埋め込みのインラインstyle（margin:1px / min-width:326px 等）を打ち消す */
.short-embed .instagram-media {
	margin: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* embed.js が読み込めなかったときの素の表示 */
.short-embed-fallback {
	display: block;
	padding: 24px 16px;
	background: var(--c-white);
	color: var(--c-crimson);
	font-size: var(--fz-small);
	font-weight: 700;
	text-align: center;
}

.short-card {
	position: relative;
	width: 180px;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--c-gold);
	background: #12101a;
	display: block;
}

.short-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.short-card-play {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
}

.short-card-play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 3px;
	border-left: 9px solid #05040b;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.short-card-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 12px 12px;
	background: linear-gradient(180deg, rgba(5, 4, 11, 0) 0%, rgba(5, 4, 11, .9) 100%);
	color: var(--c-white);
	font-size: var(--fz-caption);
	font-weight: 700;
	line-height: 1.5;
}

.short-panel .cmn-slider-arrow {
	color: var(--c-gold);
}

.short-panel .cmn-slider-dots {
	color: var(--c-gold);
}

@media screen and (max-width: 834px) {
	.short-panel {
		padding: var(--s-3) 0;
	}

	.short-panel {
		--short-w: 170;
	}

	.short-panel .cmn-slider-viewport {
		padding-inline: 16px;
		gap: 10px;
	}

	.short-card {
		width: 126px;
	}
}

/* ==========================================================================
   19. ACLE GUIDE（現状は非表示。復活させるときは hidden を外す）
   ========================================================================== */
.guide-lead {
	margin-bottom: var(--s-3);
}

.guide-list>*+* {
	margin-top: var(--s-2);
}

.guide-movie {
	margin-top: var(--s-5);
	aspect-ratio: 16 / 9;
	background: var(--c-bg-3);
}

.guide-movie iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* ABOUT ACLE は背景画像を使わず、上から下への紫グラデーションにする。
   .cmn-section--dark は MATCH / RANKING と共用なので、.about に限定して上書きする */
.about.cmn-section--dark {
	background: linear-gradient(180deg, var(--c-purple) 0%, var(--c-purple-lt) 100%);
}

/* ==========================================================================
   20. ABOUT ACLE ／ 共通
   ========================================================================== */
.about-lead {
	font-size: var(--fz-body);
	line-height: 2;
	margin-bottom: var(--s-5);
}

/* 大会ロゴ（Figma：PC 822×422 ／ SP 300×154） */
.about-logo {
	display: block;
	width: 600px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 822 / 422;
	object-fit: contain;
	margin: 0 auto var(--s-5);
}

@media screen and (max-width: 834px) {
	.about-logo {
		width: 300px;
	}
}

.about-stage+.about-stage {
	margin-top: var(--s-6);
}

.about-stage-head {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.about-stage-head h3 {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h3);
	letter-spacing: .08em;
}

.about-stage-head .date {
	font-family: var(--f-en);
	font-size: var(--fz-small);
	letter-spacing: .08em;
	color: var(--c-gold-lt);
}

/* 箇条書き（8pxのダッシュ） */
.about-rules li {
	display: flex;
	gap: 12px;
	font-size: var(--fz-body);
	line-height: 1.6;
}

.about-rules li+li {
	margin-top: 4px;
}

.about-rules li::before {
	content: "";
	flex: 0 0 8px;
	height: 1px;
	margin-top: .8em;
	background: var(--c-gold);
}

/* ステージ本体のパネル（Pale Gold・角丸32）
   Figma: Frame 625759 / round16-bracket / FINAL STAGE tournament bracket */
.about-panel {
	margin-top: var(--s-5);
	padding: var(--s-6) var(--s-5);
	background: var(--c-gold-pale);
	border-radius: 32px;
	color: var(--c-text);
}

.about-panel> :first-child {
	margin-top: 0;
}

/* パネル直下の下向き三角（Figma: triangle 385×80 / SP 206×43） */
.about-chevron {
	display: block;
	width: 385px;
	max-width: 34.4%;
	aspect-ratio: 385 / 80;
	margin: 0 auto;
	background: var(--c-gold-pale);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (max-width: 834px) {
	.about-panel {
		padding: var(--s-4) 16px;
		border-radius: 16px;
	}

	.about-chevron {
		width: 206px;
		max-width: 55%;
		aspect-ratio: 206 / 43;
	}
}

/* ==========================================================================
   21. 参加32クラブ
   ========================================================================== */
.about-clubs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-5);
	margin-top: var(--s-5);
}

.about-clubs-label {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-small);
	letter-spacing: .1em;
	color: var(--c-text);
	margin-bottom: var(--s-2);
}

/* 1pxのすき間から地色をのぞかせて罫線に見せる */
.about-clubs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(26, 20, 32, .24);
	border: 1px solid rgba(26, 20, 32, .26);
}

.about-clubs-cell {
	aspect-ratio: 126 / 122;
	background: var(--c-white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.about-clubs-cell img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media screen and (max-width: 834px) {
	.about-clubs {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}
}

/* ==========================================================================
   22. 賞金ストリップ
   ========================================================================== */
.prize-strip {
	display: flex;
	margin-top: var(--s-5);
	padding: 30px 0 32px;
	background: var(--c-purple) var(--bg-dark) center / cover no-repeat;
	border: 1px solid var(--c-gold);
}

.prize-strip-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
}

.prize-strip-col+.prize-strip-col {
	border-left: 1px solid rgba(186, 160, 114, .3);
}

.prize-strip-en {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .12em;
	color: rgba(186, 160, 114, .75);
}

.prize-strip-jp {
	font-weight: 700;
	font-size: var(--fz-small);
	color: rgba(255, 255, 255, .8);
}

.prize-strip-amount {
	display: flex;
	align-items: baseline;
	gap: 5px;
	color: var(--c-gold);
}

.prize-strip-amount b {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -.03em;
}

.prize-strip-amount span {
	font-weight: 700;
	font-size: var(--fz-body);
}

.prize-strip-amount small {
	font-weight: 400;
	font-size: var(--fz-small);
	color: rgba(255, 255, 255, .6);
}

@media screen and (max-width: 834px) {
	.prize-strip {
		flex-direction: column;
		padding: var(--s-3) 0 26px;
	}

	.prize-strip-col+.prize-strip-col {
		border-left: 0;
		border-top: 1px solid rgba(186, 160, 114, .3);
		padding-top: 20px;
		margin-top: 20px;
	}

	.prize-strip-amount b {
		font-size: 36px;
	}
}

/* ==========================================================================
   23. ラウンド16（空の対戦表）
   ========================================================================== */
.r16-bracket {
	margin-top: var(--s-5);
}

.r16-group+.r16-group {
	margin-top: var(--s-5);
}

.r16-group-label {
	font-family: var(--f-en);
	font-weight: 600;
	font-size: var(--fz-small);
	letter-spacing: .1em;
	color: var(--c-purple);
	margin-bottom: var(--s-2);
}

.r16-pairs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}

.r16-pair-bracket {
	height: 18px;
	margin: 0 auto;
	width: calc(50% + 4px);
	border-top: 2px solid rgba(186, 160, 114, .75);
	border-left: 2px solid rgba(186, 160, 114, .75);
	border-right: 2px solid rgba(186, 160, 114, .75);
	border-bottom: 0;
}

.r16-pair-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-1);
}

.r16-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 10px 16px;
	background: var(--c-white);
	border: 1px solid rgba(159, 127, 223, .28);
}

.r16-card-rank {
	padding: 5px 10px;
	background: var(--c-gold);
	color: var(--c-purple);
	font-weight: 700;
	font-size: var(--fz-label);
	letter-spacing: .04em;
}

.r16-card-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(186, 160, 114, .06);
	border: 1px dashed rgba(186, 160, 114, .55);
	font-family: var(--f-en);
	font-size: 10px;
	letter-spacing: .08em;
	color: rgba(186, 160, 114, .85);
}

.r16-card-slot img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.r16-card-name {
	font-size: var(--fz-caption);
	color: var(--c-mute);
	text-align: center;
	line-height: 1.4;
}

@media screen and (max-width: 834px) {
	.r16-pairs {
		grid-template-columns: 1fr 1fr;
		gap: 16px 22px;
	}

	.r16-pair-bracket {
		height: 14px;
	}

	.r16-card {
		padding: 10px 6px 12px;
		gap: 10px;
	}

	.r16-card-rank {
		padding: 4px 7px;
		font-size: 10px;
	}

	.r16-card-slot {
		width: 44px;
		height: 44px;
		font-size: 8px;
	}

	.r16-card-name {
		font-size: 10px;
	}
}

/* ==========================================================================
   24. ファイナルステージ（トーナメント表）
   ========================================================================== */
.fs-round+.fs-round,
.fs-round+.fs-champion {
	margin-top: var(--s-2);
}

.fs-round-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-family: var(--f-en);
	font-weight: 600;
	font-size: var(--fz-caption);
	letter-spacing: .12em;
	color: var(--c-gold);
}

.fs-round-label::before {
	content: "";
	width: 18px;
	height: 2px;
	background: currentColor;
}

.fs-round-label b {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: var(--fz-small);
	letter-spacing: .04em;
	color: var(--c-text);
}

/* --- 対戦（tie） --- */
.fs-ties {
	display: grid;
	gap: var(--s-3);
}

.fs-round--qf .fs-ties {
	grid-template-columns: repeat(4, 1fr);
}

.fs-round--sf .fs-ties {
	grid-template-columns: repeat(2, 1fr);
	width: 75%;
	margin-inline: auto;
}

.fs-round--f .fs-ties {
	grid-template-columns: 1fr;
	width: 50%;
	margin-inline: auto;
}

.fs-tie {
	display: flex;
	align-items: stretch;
	background: var(--c-white);
	border: 1px solid #dcd3c4;
	border-radius: 6px;
	overflow: hidden;
}

.fs-tie-clubs {
	flex: 1 1 auto;
	min-width: 0;
}

.fs-club {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
}

.fs-club+.fs-club {
	border-top: 1px solid #dcd3c4;
}

.fs-club img {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.fs-club-slot {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px dashed rgba(138, 130, 144, .5);
}

.fs-club-name {
	font-weight: 700;
	font-size: 13px;
	line-height: 18px;
	min-width: 0;
}

/* ヴィッセル神戸の行 */
.fs-club.is-self {
	background: var(--c-crimson-bg);
	border-left: 3px solid var(--c-crimson);
}

.fs-club.is-self .fs-club-name {
	color: var(--c-crimson);
}

/* 未確定（勝者待ち） */
.fs-club.is-tbd .fs-club-name {
	font-weight: 500;
	color: var(--c-dim);
}

/* 日程チップ */
.fs-tie-chip {
	flex: 0 0 66px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 10px 0;
	background: var(--c-purple);
	color: var(--c-white);
}

.fs-tie-chip .d {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.1;
}

.fs-tie-chip .w {
	font-family: var(--f-en);
	font-size: 9px;
	color: rgba(255, 255, 255, .7);
}

.fs-tie-chip .t {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: 11px;
	color: var(--c-gold);
}

/* ラウンド間コネクタ */
.fs-connector {
	display: block;
	width: 1px;
	height: 18px;
	margin: 14px auto;
	background: rgba(186, 160, 114, .8);
}

/* CHAMPION */
.fs-champion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 18px 0 20px;
	border-radius: 6px;
	background:
		linear-gradient(90deg, rgba(159, 127, 223, 0) 0%, rgba(159, 127, 223, .35) 100%),
		var(--c-purple);
	width: 50%;
	margin-inline: auto;
}

.fs-champion b {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: .06em;
	color: var(--c-gold-lt);
}

.fs-champion span {
	font-weight: 700;
	font-size: var(--fz-caption);
	color: rgba(255, 255, 255, .75);
}

.fs-note {
	margin-top: var(--s-3);
	font-size: var(--fz-caption);
	color: var(--c-mute);
	text-align: right;
}

@media screen and (max-width: 834px) {
	.fs-round--qf .fs-ties,
	.fs-round--sf .fs-ties,
	.fs-round--f .fs-ties {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 10px;
	}

	.fs-champion {
		width: 100%;
	}

	.fs-note {
		text-align: left;
	}
}

/* ==========================================================================
   25. 賞金ラダー（ファイナルステージ）
   ========================================================================== */
.prize-ladder {
	margin-top: var(--s-5);
	padding: 28px 12px 32px;
	background: var(--c-purple) var(--bg-dark) center / cover no-repeat;
	border: 1px solid rgba(186, 160, 114, .35);
}

.prize-ladder-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 22px;
}

.prize-ladder-head::before,
.prize-ladder-head::after {
	content: "";
	width: 28px;
	height: 1px;
	background: rgba(186, 160, 114, .7);
}

.prize-ladder-head b {
	font-family: var(--f-en);
	font-weight: 600;
	font-size: var(--fz-btn);
	letter-spacing: .14em;
	color: var(--c-gold);
}

.prize-ladder-head span {
	font-weight: 500;
	font-size: var(--fz-caption);
	color: rgba(255, 255, 255, .6);
}

.prize-ladder-stages {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.prize-ladder-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 18px 8px;
}

.prize-ladder-stage+.prize-ladder-stage {
	border-left: 1px solid rgba(186, 160, 114, .3);
}

.prize-ladder-stage-en {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(186, 160, 114, .7);
}

.prize-ladder-stage-jp {
	font-weight: 700;
	font-size: var(--fz-small);
	color: rgba(255, 255, 255, .8);
}

.prize-ladder-stage-amount {
	display: flex;
	align-items: baseline;
	gap: 4px;
	color: var(--c-gold);
}

.prize-ladder-stage-amount b {
	font-family: var(--f-en);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

.prize-ladder-stage-amount span {
	font-weight: 700;
	font-size: var(--fz-small);
}

.prize-ladder-stage:nth-child(1) .prize-ladder-stage-amount {
	opacity: .72;
}

.prize-ladder-stage:nth-child(1) .prize-ladder-stage-amount b {
	font-size: 34px;
}

.prize-ladder-stage:nth-child(2) .prize-ladder-stage-amount {
	opacity: .82;
}

.prize-ladder-stage:nth-child(2) .prize-ladder-stage-amount b {
	font-size: 38px;
}

.prize-ladder-stage:nth-child(3) .prize-ladder-stage-amount {
	opacity: .92;
}

.prize-ladder-stage:nth-child(3) .prize-ladder-stage-amount b {
	font-size: 46px;
}

/* 優勝カラム（地色は敷かず、文字色と級数だけで差をつける） */
.prize-ladder-stage.is-champion .prize-ladder-stage-en,
.prize-ladder-stage.is-champion .prize-ladder-stage-jp {
	color: var(--c-gold-lt);
}

.prize-ladder-stage.is-champion .prize-ladder-stage-amount {
	color: var(--c-gold-lt);
	opacity: 1;
}

.prize-ladder-stage.is-champion .prize-ladder-stage-amount b {
	font-size: 58px;
}

@media screen and (max-width: 834px) {
	.prize-ladder-stages {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 0;
	}

	.prize-ladder-stage:nth-child(odd) {
		border-left: 0;
	}

	.prize-ladder-stage:nth-child(1) .prize-ladder-stage-amount b {
		font-size: 26px;
	}

	.prize-ladder-stage:nth-child(2) .prize-ladder-stage-amount b {
		font-size: 28px;
	}

	.prize-ladder-stage:nth-child(3) .prize-ladder-stage-amount b {
		font-size: 30px;
	}

	.prize-ladder-stage.is-champion .prize-ladder-stage-amount b {
		font-size: 32px;
	}

	.prize-ladder-stage-amount span {
		font-size: var(--fz-caption);
	}
}

/* ==========================================================================
   26. FIFA CLUB WORLD CUP 2030 への導線
   ========================================================================== */
/* Figma: Frame 625754（PC 1120×96 ／ SP 374×128）
   Deep Gold → Pale Gold の横グラデーション地に Regal Purple の見出し */
.about-cwc {
	margin-top: var(--s-5);
	/* PC 28px上下＋1行40px＝96px（Figmaの高さ） */
	padding: 28px var(--s-2);
	text-align: center;
	background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-pale) 100%);
	border-radius: 8px;
}

.about-cwc b {
	display: block;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--c-purple);
}

@media screen and (max-width: 834px) {
	.about-cwc {
		/* SP 24px上下＋2行80px＝128px */
		padding: var(--s-3) var(--s-2);
	}
}
/* ==========================================================================
   27. HISTORY（2025-26のデザイン踏襲）
   ========================================================================== */
.history {
	background: var(--c-crimson) var(--bg-history) center / cover no-repeat;
	color: var(--c-white);
}

.history-timeline {
	position: relative;
	margin-top: var(--s-6);
}

/* 中央のゴールド縦線 */
.history-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: var(--c-gold);
}

.history-timeline {
	/* 写真の幅と、中央線と本文のあき。ここを変えれば線・ドット・段組が追従する */
	--hist-img: 400px;
	--hist-clear: 40px;
}

.history-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
}

.history-item+.history-item {
	margin-top: var(--s-7);
}

/* 偶数番目は左右反転 */
.history-item:nth-child(even) {
	flex-direction: row-reverse;
}

/* 写真から中央線へのコネクタ（.history-item 基準なので中央＝50%で取れる） */
.history-item::after {
	content: "";
	position: absolute;
	top: 125px;
	left: var(--hist-img);
	right: 50%;
	height: 1px;
	background: var(--c-gold);
}

.history-item:nth-child(even)::after {
	left: 50%;
	right: var(--hist-img);
}

/* 中央線に重なるドット */
.history-item::before {
	content: "";
	position: absolute;
	top: 122px;
	left: calc(50% - 3.5px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-gold);
	z-index: 1;
}

.history-item-img {
	flex: 0 0 var(--hist-img);
	width: var(--hist-img);
	position: relative;
	border: 1px solid var(--c-gold);
	box-shadow: 10px 10px 0 rgba(0, 0, 0, .15);
}

.history-item:nth-child(even) .history-item-img {
	box-shadow: -10px 10px 0 rgba(0, 0, 0, .15);
}

.history-item-img img {
	width: 100%;
	aspect-ratio: 400 / 250;
	object-fit: cover;
	display: block;
}

/* 中央線をまたがないよう、本文は半分から --hist-clear を引いた幅に収める */
.history-item-body {
	flex: 0 0 calc(50% - var(--hist-clear));
	max-width: none;
	min-width: 0;
	padding-top: 6px;
}

.history-item-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: var(--s-2);
}

.history-item-year {
	font-family: var(--f-en);
	font-weight: 300;
	font-size: var(--fz-score);
	line-height: 1;
	letter-spacing: .04em;
	color: var(--c-white);
}

.history-item-result {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h2);
	line-height: 1;
	letter-spacing: .02em;
	color: var(--c-gold);
}

.history-item-text {
	font-size: var(--fz-small);
	line-height: 1.9;
}

/* タイムラインの締め。中央揃えで、上に十分な余白を取る */
.history-lead {
	margin-top: var(--s-7);
	/* トークンの階段で2段上げ（body 16 → lead 18 → h4 20） */
	font-size: var(--fz-h4);
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: .04em;
	text-align: center;
	/* Deep Gold はクリムゾン地だとコントラストが 3.1:1 で沈むため Light Gold */
	color: var(--c-gold-lt);
}

/* 筆文字スローガン（素材未入稿でも高さが暴れないよう比率を固定） */
.history-slogan {
	display: block;
	width: min(560px, 80%);
	aspect-ratio: 560 / 120;
	object-fit: contain;
	margin: var(--s-7) auto 0;
}

@media screen and (max-width: 834px) {
	.history-timeline::before {
		left: 7px;
	}

	.history-item,
	.history-item:nth-child(even) {
		flex-direction: column;
		gap: var(--s-2);
		padding-left: 32px;
	}

	.history-item+.history-item {
		margin-top: var(--s-6);
	}

	.history-item-img,
	.history-item:nth-child(even) .history-item-img {
		flex: 0 0 auto;
		width: 100%;
		box-shadow: 6px 6px 0 rgba(0, 0, 0, .15);
	}

	.history-item::after,
	.history-item:nth-child(even)::after {
		top: 14px;
		left: 7px;
		right: auto;
		width: 25px;
	}

	.history-item::before,
	.history-item:nth-child(even)::before {
		top: 11px;
		left: 3.5px;
	}

	.history-item-body {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	/* SPは改行位置を固定せず、幅なりに折り返す（brは.only-pc） */
	.history-lead {
		margin-top: var(--s-6);
		font-size: var(--fz-small);
		line-height: 2;
	}
}

/* ==========================================================================
   28. UNIFORM
   ========================================================================== */
/* 1stユニフォームのパネル（Figma: Frame 625768）
   パネルの地は深いクリムゾン（#4E0015）。写真タイル側を白にして、
   ユニフォームが沈まないようにしている
   1120幅・角丸24・padding 40・見出しとの間隔24 */
.uniform-panel {
	padding: var(--s-5);
	border-radius: 24px;
	background: var(--c-crimson-deep);
	text-align: center;
}

.uniform-panel-title {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: var(--fz-h3);
	line-height: 1.4;
	letter-spacing: .1em;
	color: var(--c-white);
	margin-bottom: var(--s-3);
}

/* --- メイン＋サムネイル切替 --- */
.uni-detail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
}

.uni-detail-main {
	flex: 0 0 420px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--c-white);
}

.uni-detail-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: opacity .25s ease;
}

.uni-detail-main.is-loading img {
	opacity: 0;
}

/* サムネは6枚。3列×2段で、メイン（420px）と高さが近くなるようにしている */
.uni-detail-thumbs {
	flex: 0 1 596px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-content: center;
	gap: var(--s-2);
}

.uni-detail-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--c-white);
	transition: box-shadow .2s ease;
}

/* 通常は等倍。ホバーしたときだけ写真を薄くする。
   タイルごと opacity を下げると地のクリムゾンが透けて白タイルが濁るので、
   透過させるのは中の <img> だけにしている */
.uni-detail-thumb img {
	opacity: 1;
	transition: opacity .2s ease;
}

.uni-detail-thumb:hover img {
	opacity: .55;
}

.uni-detail-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* アクティブ枠は box-shadow。枠を足してもグリッドがずれない。
   地がクリムゾンになったので、枠はゴールド（クリムゾンにも白タイルにも効く） */
.uni-detail-thumb.is-active {
	box-shadow: 0 0 0 3px var(--c-gold);
}

/* Figmaでは見出しとビジュアルの間も40px */
.uniform .cmn-head {
	margin-bottom: var(--s-5);
}

@media screen and (max-width: 834px) {
	.uniform-panel {
		padding: var(--s-2);
		border-radius: 16px;
	}

	.uni-detail {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-2);
	}

	.uni-detail-main {
		flex: 0 0 auto;
	}

	.uni-detail-thumbs {
		flex: 0 0 auto;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--s-1);
	}
}

/* ==========================================================================
   29. FOOTER（2025-26と同じ構成）
   ========================================================================== */
.footer {
	background: var(--c-crimson);
	color: var(--c-white);
}

.footer-sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	padding: var(--s-3) 20px;
}

.footer-sns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.footer-sns svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.footer-sns img {
	width: 100%;
	height: auto;
}

.footer-body {
	background: var(--c-white);
	color: var(--c-text);
	padding: var(--s-4) 20px var(--s-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
}

.footer-logo img {
	width: 180px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2) var(--s-5);
}

.footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fz-small);
	border-bottom: 1px solid var(--c-crimson);
	color: var(--c-crimson);
	padding-bottom: 2px;
}

.footer-links a::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 6px solid var(--c-crimson);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.footer-copyright {
	padding: 0 20px var(--s-3);
	background: var(--c-white);
	color: var(--c-text);
	font-size: 10px;
	line-height: 1.6;
	text-align: center;
}

@media screen and (max-width: 834px) {
	.footer-sns {
		gap: var(--s-3);
	}

	.footer-links {
		gap: 12px var(--s-3);
	}
}