/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
*/

/* ===========================
   CSS Custom Properties
=========================== */
:root {
	/* Brand color system */
	--color-deep:        #0D2266;
	--color-primary:     #1A3FA0;
	--color-bright:      #2D5CC5;
	--color-light:       #A8BFED;
	--color-pale:        #E8EEFA;

	/* Aliases */
	--color-navy:        #0D2266;
	--color-blue:        #2D5CC5;
	--color-white:       #ffffff;
	--color-black:       #111111;
	--color-gray:        #888888;
	--color-bg:          #ffffff;

	/* Text color scale (統一ルール) */
	--text-primary:      #1a1a1a; /* 見出し・タイトル・ラベル・入力値 */
	--text-secondary:    #333333; /* 説明文・本文 */
	--text-muted:        #8a8a8a; /* 補足・日付・プレースホルダー */
	--color-error:       #c0392b; /* エラー・必須マーク */

	--header-height:     80px;
	--float-height:      49px;
	--float-bottom:      32px;

	--font-en:           'Inter', sans-serif;
	/* 日本語は新ゴ（XServer Webフォント）。ウェイトごとに別フォント名のため R/B を分けて定義。
	   本番ドメイン以外・未読込時は Noto Sans JP にフォールバック。 */
	--font-ja:           "新ゴ R", "Shin Go Regular", 'Noto Sans JP', sans-serif;
	--font-ja-bold:      "新ゴ B", "Shin Go Bold", 'Noto Sans JP', sans-serif;
	--font-condensed:    'Barlow Condensed', sans-serif;
	--font-arteria:      'arteria-std-compress', sans-serif;

	--transition-base:   0.3s ease;
	--transition-overlay: 0.5s cubic-bezier(0.77, 0, 0.18, 1);

	/* 青海波（せいがいは）背景パターン: 白地 + ブランド青の極薄の波（細い弧） */
	--seigaiha-wave: rgba(26, 63, 160, 0.07);
	--seigaiha-size: 100px 50px;
	--seigaiha-image:
		radial-gradient(circle farthest-side at 100% 150%, #fff 14%, var(--seigaiha-wave) 15%, var(--seigaiha-wave) 18%, #fff 19%, #fff 30%, var(--seigaiha-wave) 31%, var(--seigaiha-wave) 34%, #fff 35%, #fff 46%, var(--seigaiha-wave) 47%, var(--seigaiha-wave) 50%, transparent 50%, transparent),
		radial-gradient(circle farthest-side at 0% 150%, #fff 14%, var(--seigaiha-wave) 15%, var(--seigaiha-wave) 18%, #fff 19%, #fff 30%, var(--seigaiha-wave) 31%, var(--seigaiha-wave) 34%, #fff 35%, #fff 46%, var(--seigaiha-wave) 47%, var(--seigaiha-wave) 50%, transparent 50%, transparent),
		radial-gradient(circle closest-corner at 50% 100%, #fff 28%, var(--seigaiha-wave) 30%, var(--seigaiha-wave) 36%, #fff 38%, #fff 60%, var(--seigaiha-wave) 62%, var(--seigaiha-wave) 68%, #fff 70%, #fff 92%, var(--seigaiha-wave) 94%, var(--seigaiha-wave) 100%, transparent 100%, transparent),
		radial-gradient(circle farthest-side at 100% 50%, #fff 14%, var(--seigaiha-wave) 15%, var(--seigaiha-wave) 18%, #fff 19%, #fff 30%, var(--seigaiha-wave) 31%, var(--seigaiha-wave) 34%, #fff 35%, #fff 46%, var(--seigaiha-wave) 47%, var(--seigaiha-wave) 50%, transparent 50%, transparent),
		radial-gradient(circle farthest-side at 0% 50%, #fff 14%, var(--seigaiha-wave) 15%, var(--seigaiha-wave) 18%, #fff 19%, #fff 30%, var(--seigaiha-wave) 31%, var(--seigaiha-wave) 34%, #fff 35%, #fff 46%, var(--seigaiha-wave) 47%, var(--seigaiha-wave) 50%, #fff 50%, #fff);

	/* ヘキサゴン（六角/ハニカム）背景パターン: ブランド青の六角アウトライン */
	--hex-size: 56px 98px;
	--hex-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%231A3FA0' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");

	/* ファイブドッツ（五点/サイコロの5）背景パターン: ブランド青の淡いドット */
	--five-dots-size: 40px 40px;
	--five-dots-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%231A3FA0' fill-opacity='0.08'%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='33' cy='7' r='2.5'/%3E%3Ccircle cx='20' cy='20' r='2.5'/%3E%3Ccircle cx='7' cy='33' r='2.5'/%3E%3Ccircle cx='33' cy='33' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===========================
   Reset / Base
=========================== */
*, *::before, *::after {
	box-sizing: border-box;
}

/* モバイル幅の時だけ改行を入れるユーティリティ */
.br-mobile-only {
	display: none;
}

@media (max-width: 768px) {
	.br-mobile-only {
		display: inline;
	}
}

body {
	margin: 0;
	font-family: var(--font-ja);
	background-color: var(--color-bg);
	color: var(--text-primary);
}

/* ===========================
   Site Header
=========================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	transition: background var(--transition-base), border-color var(--transition-base);
}

/* トップページ / CLUBページ（フルスクリーン背景あり）: 完全透明 */
body.home .site-header:not(.is-scrolled),
body:has(.club-hero) .site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
}

/* スクロール後 or 非トップページでスクロール: ロイヤルブルー */
.site-header.is-scrolled {
	background: var(--color-primary);
	border-bottom-color: transparent;
}

/* 非トップページ: 常にロイヤルブルー */
body:not(.home) .site-header {
	background: var(--color-primary);
	border-bottom-color: transparent;
}

/* 非トップページ: ヘッダー分の余白を確保（CLUBページはフルスクリーン背景のため除く） */
body:not(.home):not(:has(.club-hero)) .site-content {
	padding-top: var(--header-height);
}


/* Astra既定の #page{min-height:100vh}（本来スティッキーフッター用）を無効化。
   当テーマはフッターを #page の外に出しているため、この 100vh が
   コンテンツの短いページでフッター上に余分な空白を生んでいた。 */
body #page {
	min-height: 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding: 0 40px;
}

.header-logo {
	flex: 1;
}

.header-match {
	flex: 1;
	justify-content: flex-end;
}

/* Logo */
.header-logo a {
	display: flex;
	align-items: center;
}

.site-logo {
	height: 52px;
	width: auto;
	display: block;
}

/* ロゴは常にワードマーク白1枚 */

/* Desktop nav (hidden on mobile) */
.header-nav {
	display: flex;
	align-items: center;
}

.header-nav .primary-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.header-nav .primary-menu li {
	display: flex;
	align-items: center;
}

.header-nav .primary-menu a {
	font-family: var(--font-arteria);
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-navy);
	text-decoration: none;
	padding: 12px 20px 10px;
	border-radius: 100px;
	line-height: 1;
	background-image: linear-gradient(93deg, currentColor 0%, currentColor 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, currentColor 67%, currentColor 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: color var(--transition-base);
}

.header-nav .primary-menu a:hover {
	color: var(--color-navy);
	background-position: 0% 0;
	transition: background var(--transition-base), color var(--transition-base), background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ブルー・スクロール背景時: 白テキスト */
.site-header.is-scrolled .primary-menu a,
body:not(.home) .primary-menu a {
	color: rgba(255, 255, 255, 0.85);
}

.site-header.is-scrolled .primary-menu a:hover,
body:not(.home) .primary-menu a:hover {
	color: rgba(255, 255, 255, 0.85);
}

/* ヒーロー透明時: 白テキスト */
body.home .site-header:not(.is-scrolled) .primary-menu a {
	color: rgba(255, 255, 255, 0.9);
}

body.home .site-header:not(.is-scrolled) .primary-menu a:hover {
	color: rgba(255, 255, 255, 0.9);
}

/* Match info */
.header-match {
	display: flex;
	align-items: center;
}

.match-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	border-left: 2px solid rgba(255, 255, 255, 0.4);
	padding-left: 14px;
}

body.home .site-header:not(.is-scrolled) .match-info {
	border-left-color: rgba(255, 255, 255, 0.4);
}

.match-eyebrow {
	font-family: var(--font-arteria);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.match-coming-soon {
	font-family: var(--font-arteria);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	margin-top: 0.15em;
	color: var(--color-navy);
	transition: color var(--transition-base);
}

.match-main {
	display: flex;
	align-items: center;
	gap: 8px;
}

.match-badge {
	font-family: var(--font-arteria);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--color-primary);
	background: var(--color-white);
	padding: 4px 9px 2px;
	line-height: 1;
	border-radius: 100px;
	white-space: nowrap;
	flex-shrink: 0;
}

.match-opponent {
	font-family: var(--font-ja);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-navy);
	transition: color var(--transition-base);
}

.match-date {
	font-family: var(--font-ja);
	font-size: 12px;
	font-weight: 400;
	color: var(--color-navy);
	transition: color var(--transition-base);
}

.match-venue {
	font-family: var(--font-ja);
	font-size: 10px;
	color: var(--text-muted);
	transition: color var(--transition-base);
}

/* 透明・ブルー背景時: 白テキスト */
body.home .site-header:not(.is-scrolled) .match-eyebrow,
body.home .site-header:not(.is-scrolled) .match-coming-soon,
body.home .site-header:not(.is-scrolled) .match-opponent,
body.home .site-header:not(.is-scrolled) .match-sep,
body.home .site-header:not(.is-scrolled) .match-date,
body.home .site-header:not(.is-scrolled) .match-venue,
.site-header.is-scrolled .match-eyebrow,
.site-header.is-scrolled .match-coming-soon,
.site-header.is-scrolled .match-opponent,
.site-header.is-scrolled .match-sep,
.site-header.is-scrolled .match-date,
body:not(.home) .match-eyebrow,
body:not(.home) .match-coming-soon,
body:not(.home) .match-opponent,
body:not(.home) .match-sep,
body:not(.home) .match-date {
	color: rgba(255, 255, 255, 0.85);
}

.site-header.is-scrolled .match-venue,
body:not(.home) .match-venue {
	color: rgba(255, 255, 255, 0.6);
}

/* ===========================
   Floating Bottom Bar
=========================== */
.header-float {
	position: fixed;
	bottom: var(--float-bottom);
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--color-white);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 100px;
	height: var(--float-height);
	padding: 0 6px 0 18px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	white-space: nowrap;
}

.float-home {
	font-family: var(--font-arteria);
	font-size: 26px;
	font-weight: 900;
	color: var(--color-navy);
	text-decoration: none;
	letter-spacing: 0.04em;
	padding-right: 12px;
	margin-top: 0.15em;
	background-image: linear-gradient(93deg, currentColor 0%, currentColor 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, currentColor 67%, currentColor 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: color var(--transition-base);
}

.float-home:hover {
	color: var(--color-navy);
	background-position: 0% 0;
	transition: color var(--transition-base), background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.float-hamburger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: var(--color-primary);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: background var(--transition-base);
}

.float-hamburger:hover {
	background: var(--color-bright);
}

.float-hamburger:focus,
.float-hamburger:active,
.float-hamburger.is-active {
	background: var(--color-primary);
	outline: none;
}

.float-hamburger.is-active:hover {
	background: var(--color-bright);
}

.hamburger-bar {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--color-white);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Hamburger → X animation */
.float-hamburger.is-active .hamburger-bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.float-hamburger.is-active .hamburger-bar:nth-child(2) {
	opacity: 0;
}
.float-hamburger.is-active .hamburger-bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ===========================
   Nav Overlay (Full Screen)
=========================== */
.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-overlay), visibility var(--transition-overlay);
}

.nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}

.overlay-logo {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%) translateY(-12px);
	opacity: 0;
	transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
	white-space: nowrap;
}

.nav-overlay.is-open .overlay-logo {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.overlay-logo-img {
	height: 64px;
	width: auto;
}

.overlay-nav .overlay-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.overlay-nav .overlay-menu a {
	font-family: var(--font-arteria);
	font-size: clamp(44px, 5vw, 56px);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	display: inline-flex;
	flex-direction: column;
	background-image: linear-gradient(93deg, currentColor 0%, currentColor 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, currentColor 67%, currentColor 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: color var(--transition-base);
}

.overlay-nav .overlay-menu a::before {
	/* 新ゴ B（太字）で統一。CSSの::before文字はWebフォントの動的サブセットに含まれず
	   一部の字（例:「ド」）がフォールバックして太く見えるため、全体を太字に揃える。 */
	font-family: var(--font-ja-bold);
	font-size: clamp(11px, 1.1vw, 15px);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: none;
	line-height: 1;
	opacity: 0.6;
	margin-bottom: 2px;
	color: var(--color-white);
	-webkit-text-fill-color: var(--color-white);
}

.overlay-nav .overlay-menu li:nth-child(1) a::before { content: "クラブ"; }
.overlay-nav .overlay-menu li:nth-child(2) a::before { content: "ブログ"; }
.overlay-nav .overlay-menu li:nth-child(3) a::before { content: "スカッド"; }
.overlay-nav .overlay-menu li:nth-child(4) a::before { content: "試合情報"; }

.overlay-nav .overlay-menu a:hover {
	color: var(--color-white);
	background-position: 0% 0;
	transition: color var(--transition-base), background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.overlay-social {
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
}

.nav-overlay.is-open .overlay-social {
	opacity: 1;
	transform: translateY(0);
}

.overlay-social-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: var(--color-white);
}

/* 外枠だけにグラデーションを流すリング（中心はmaskでくり抜く） */
.overlay-social-link::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: 50%;
	padding: 1.5px;
	background-image: linear-gradient(93deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, rgba(255, 255, 255, 0.5) 67%, rgba(255, 255, 255, 0.5) 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.overlay-social-link svg {
	position: relative;
	fill: none;
	background-image: linear-gradient(93deg, currentColor 0%, currentColor 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, currentColor 67%, currentColor 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIuMTYzYzMuMjA0IDAgMy41ODQuMDEyIDQuODUuMDcgMy4yNTIuMTQ4IDQuNzcxIDEuNjkxIDQuOTE5IDQuOTE5LjA1OCAxLjI2NS4wNjkgMS42NDUuMDY5IDQuODQ5IDAgMy4yMDUtLjAxMiAzLjU4NC0uMDY5IDQuODQ5LS4xNDkgMy4yMjUtMS42NjQgNC43NzEtNC45MTkgNC45MTktMS4yNjYuMDU4LTEuNjQ0LjA3LTQuODUuMDctMy4yMDQgMC0zLjU4NC0uMDEyLTQuODQ5LS4wNy0zLjI2LS4xNDktNC43NzEtMS42OTktNC45MTktNC45Mi0uMDU4LTEuMjY1LS4wNy0xLjY0NC0uMDctNC44NDkgMC0zLjIwNC4wMTMtMy41ODMuMDctNC44NDkuMTQ5LTMuMjI3IDEuNjY0LTQuNzcxIDQuOTE5LTQuOTE5IDEuMjY2LS4wNTcgMS42NDUtLjA2OSA0Ljg0OS0uMDY5em0wLTIuMTYzYy0zLjI1OSAwLTMuNjY3LjAxNC00Ljk0Ny4wNzItNC4zNTguMi02Ljc4IDIuNjE4LTYuOTggNi45OC0uMDU5IDEuMjgxLS4wNzMgMS42ODktLjA3MyA0Ljk0OCAwIDMuMjU5LjAxNCAzLjY2OC4wNzIgNC45NDguMiA0LjM1OCAyLjYxOCA2Ljc4IDYuOTggNi45OCAxLjI4MS4wNTggMS42ODkuMDcyIDQuOTQ4LjA3MiAzLjI1OSAwIDMuNjY4LS4wMTQgNC45NDgtLjA3MiA0LjM1NC0uMiA2Ljc4Mi0yLjYxOCA2Ljk3OS02Ljk4LjA1OS0xLjI4LjA3My0xLjY4OS4wNzMtNC45NDggMC0zLjI1OS0uMDE0LTMuNjY3LS4wNzItNC45NDctLjE5Ni00LjM1NC0yLjYxNy02Ljc4LTYuOTc5LTYuOTgtMS4yODEtLjA1OS0xLjY5LS4wNzMtNC45NDktLjA3M3ptMCA1LjgzOGMtMy40MDMgMC02LjE2MiAyLjc1OS02LjE2MiA2LjE2MnMyLjc1OSA2LjE2MyA2LjE2MiA2LjE2MyA2LjE2Mi0yLjc1OSA2LjE2Mi02LjE2M2MwLTMuNDAzLTIuNzU5LTYuMTYyLTYuMTYyLTYuMTYyem0wIDEwLjE2MmMtMi4yMDkgMC00LTEuNzktNC00IDAtMi4yMDkgMS43OTEtNCA0LTRzNCAxLjc5MSA0IDRjMCAyLjIxLTEuNzkxIDQtNCA0em02LjQwNi0xMS44NDVjLS43OTYgMC0xLjQ0MS42NDUtMS40NDEgMS40NHMuNjQ1IDEuNDQgMS40NDEgMS40NGMuNzk1IDAgMS40MzktLjY0NSAxLjQzOS0xLjQ0cy0uNjQ0LTEuNDQtMS40MzktMS40NHoiLz48L3N2Zz4=");
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIuMTYzYzMuMjA0IDAgMy41ODQuMDEyIDQuODUuMDcgMy4yNTIuMTQ4IDQuNzcxIDEuNjkxIDQuOTE5IDQuOTE5LjA1OCAxLjI2NS4wNjkgMS42NDUuMDY5IDQuODQ5IDAgMy4yMDUtLjAxMiAzLjU4NC0uMDY5IDQuODQ5LS4xNDkgMy4yMjUtMS42NjQgNC43NzEtNC45MTkgNC45MTktMS4yNjYuMDU4LTEuNjQ0LjA3LTQuODUuMDctMy4yMDQgMC0zLjU4NC0uMDEyLTQuODQ5LS4wNy0zLjI2LS4xNDktNC43NzEtMS42OTktNC45MTktNC45Mi0uMDU4LTEuMjY1LS4wNy0xLjY0NC0uMDctNC44NDkgMC0zLjIwNC4wMTMtMy41ODMuMDctNC44NDkuMTQ5LTMuMjI3IDEuNjY0LTQuNzcxIDQuOTE5LTQuOTE5IDEuMjY2LS4wNTcgMS42NDUtLjA2OSA0Ljg0OS0uMDY5em0wLTIuMTYzYy0zLjI1OSAwLTMuNjY3LjAxNC00Ljk0Ny4wNzItNC4zNTguMi02Ljc4IDIuNjE4LTYuOTggNi45OC0uMDU5IDEuMjgxLS4wNzMgMS42ODktLjA3MyA0Ljk0OCAwIDMuMjU5LjAxNCAzLjY2OC4wNzIgNC45NDguMiA0LjM1OCAyLjYxOCA2Ljc4IDYuOTggNi45OCAxLjI4MS4wNTggMS42ODkuMDcyIDQuOTQ4LjA3MiAzLjI1OSAwIDMuNjY4LS4wMTQgNC45NDgtLjA3MiA0LjM1NC0uMiA2Ljc4Mi0yLjYxOCA2Ljk3OS02Ljk4LjA1OS0xLjI4LjA3My0xLjY4OS4wNzMtNC45NDggMC0zLjI1OS0uMDE0LTMuNjY3LS4wNzItNC45NDctLjE5Ni00LjM1NC0yLjYxNy02Ljc4LTYuOTc5LTYuOTgtMS4yODEtLjA1OS0xLjY5LS4wNzMtNC45NDktLjA3M3ptMCA1LjgzOGMtMy40MDMgMC02LjE2MiAyLjc1OS02LjE2MiA2LjE2MnMyLjc1OSA2LjE2MyA2LjE2MiA2LjE2MyA2LjE2Mi0yLjc1OSA2LjE2Mi02LjE2M2MwLTMuNDAzLTIuNzU5LTYuMTYyLTYuMTYyLTYuMTYyem0wIDEwLjE2MmMtMi4yMDkgMC00LTEuNzktNC00IDAtMi4yMDkgMS43OTEtNCA0LTRzNCAxLjc5MSA0IDRjMCAyLjIxLTEuNzkxIDQtNCA0em02LjQwNi0xMS44NDVjLS43OTYgMC0xLjQ0MS42NDUtMS40NDEgMS40NHMuNjQ1IDEuNDQgMS40NDEgMS40NGMuNzk1IDAgMS40MzktLjY0NSAxLjQzOS0xLjQ0cy0uNjQ0LTEuNDQtMS40MzktMS40NHoiLz48L3N2Zz4=");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.overlay-social-link:hover {
	color: var(--color-white);
}

.overlay-social-link:hover::before,
.overlay-social-link:hover svg {
	background-position: 0% 0;
	transition: background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Overlay link stagger animation */
.nav-overlay .overlay-menu li {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-overlay.is-open .overlay-menu li {
	opacity: 1;
	transform: translateY(0);
}

.nav-overlay.is-open .overlay-menu li:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.is-open .overlay-menu li:nth-child(2) { transition-delay: 0.15s; }
.nav-overlay.is-open .overlay-menu li:nth-child(3) { transition-delay: 0.2s; }
.nav-overlay.is-open .overlay-menu li:nth-child(4) { transition-delay: 0.25s; }
.nav-overlay.is-open .overlay-menu li:nth-child(5) { transition-delay: 0.3s; }

/* ===========================
   Hero Section
=========================== */
.hero-section {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* 管理バーがある場合: 高さからバー分を引いて実表示領域に合わせる */
.admin-bar .hero-section {
	height: calc(100vh - 32px);
}
@media (max-width: 782px) {
	.admin-bar .hero-section {
		height: calc(100vh - 46px);
	}
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-color: var(--color-deep);
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.25) 0%,
		rgba(0, 0, 0, 0.1) 40%,
		rgba(0, 0, 0, 0.4) 100%
	);
}

/* タグライン: デスクトップ = 左下 */
.hero-tagline {
	position: absolute;
	bottom: calc(var(--float-height) + var(--float-bottom) + 32px);
	left: 40px;
	text-align: left;
	color: var(--color-white);
}

.hero-tagline-main {
	font-family: var(--font-arteria);
	font-size: clamp(44px, 7.5vw, 96px);
	font-weight: 900;
	letter-spacing: 0.04em;
	margin: 0 0 4px;
	line-height: 1;
}


.hero-tagline-sub {
	font-family: var(--font-ja-bold);
	font-size: clamp(13px, 1.5vw, 18px);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	opacity: 0.85;
}

/* ニューススライダー: デスクトップ = 右下 */
.hero-news-slider {
	position: absolute;
	bottom: calc(var(--float-height) + var(--float-bottom) + 16px);
	right: 40px;
	width: 280px;
	display: grid;
	grid-template-rows: 1fr auto;
}

.hero-news-card {
	grid-area: 1 / 1;
	background: var(--color-white);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease, transform var(--transition-base);
}

.hero-news-card.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hero-news-card:hover {
	transform: translateY(-2px);
}

.hero-news-dots {
	grid-area: 2 / 1;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding-top: 10px;
}

.hero-news-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--transition-base);
}

.hero-news-dot.is-active {
	background: var(--color-white);
}

.hero-news-thumb {
	width: 100%;
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: #e0e0e0;
}

.hero-news-thumb--no-image {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue) 100%);
}

.hero-news-body {
	padding: 12px 16px 4px;
}

.hero-news-title {
	font-family: var(--font-ja-bold);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 6px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.hero-news-date {
	font-family: var(--font-ja);
	font-size: 11px;
	color: var(--text-muted);
}

.hero-news-arrow {
	display: block;
	text-align: right;
	padding: 8px 16px 12px;
	color: var(--color-primary);
	font-size: 16px;
}

/* モバイル */
@media (max-width: 768px) {
	/* タグライン: モバイル = ニュースカードの上 */
	.hero-tagline {
		top: auto;
		bottom: calc(var(--float-height) + var(--float-bottom) + 16px + 72px + 24px);
		left: 20px;
		right: 20px;
	}

	.hero-tagline-main {
		font-size: clamp(40px, 13vw, 56px);
	}

	/* ニューススライダー: モバイル = メニューボタンの上、横型 */
	.hero-news-slider {
		bottom: calc(var(--float-height) + var(--float-bottom) + 16px);
		right: 20px;
		left: 20px;
		width: auto;
	}

	.hero-news-card {
		flex-direction: row;
		align-items: center;
		border-radius: 8px;
	}

	.hero-news-thumb {
		width: 80px;
		height: 64px;
		flex-shrink: 0;
	}

	.hero-news-body {
		flex: 1;
		padding: 8px 12px;
	}

	.hero-news-title {
		font-size: 12px;
		-webkit-line-clamp: 2;
	line-clamp: 2;
	}

	.hero-news-arrow {
		padding: 0 12px 0 0;
		flex-shrink: 0;
	}
}

/* ===========================
   フッター上: キャッチコピー横スクロール（中抜き・青）
=========================== */
.pitch-marquee {
	overflow: hidden;
	width: 100%;
	line-height: 0;
	padding-top: 0.2em; /* グリフ上端の切れ防止（下端＝フッター上端は不変） */
}

.pitch-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
	transform: translateZ(0); /* 単一のGPUレイヤーに固定（輪郭文字を毎フレーム再描画させない） */
	backface-visibility: hidden;
	animation: pitch-marquee-scroll 45s linear infinite;
	/* Webフォント（arteria＝圧縮フォント）読み込み前は幅広のフォールバックで描画され、
	   途中でフォントが差し替わると幅が変わり、%指定のtranslateがズレてループが崩れる
	   （最後で文字が消えて先頭に飛ぶ）。フォント確定までは停止しておく。 */
	animation-play-state: paused;
}

.fonts-ready .pitch-marquee-track {
	animation-play-state: running;
}

.pitch-marquee-group {
	display: flex;
	flex-shrink: 0;
}

.pitch-marquee-text {
	display: block;
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(64px, 12vw, 150px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px var(--color-primary);
	padding-right: 0.5em; /* 繰り返し間の余白 */
	margin-bottom: -0.14em; /* 文字の下端をフッター上端に合わせる */
}

@keyframes pitch-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.pitch-marquee-track {
		animation: none;
	}
}

/* ===========================
   Site Footer
=========================== */
.site-footer {
	background: #1e1e1e;
	padding: 40px 0 24px;
}

.footer-inner {
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 32px 0 8px;
}

.footer-brand-logo {
	display: inline-flex;
}

.footer-brand-logo-img {
	height: 88px;
	width: auto;
	display: block;
}

.footer-social {
	display: flex;
	justify-content: center;
}


.footer-nav .footer-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 8px 24px;
}

.footer-nav .footer-menu a {
	font-family: var(--font-arteria);
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color var(--transition-base);
}

.footer-nav .footer-menu a:hover {
	color: var(--color-white);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.footer-copyright {
	font-family: var(--font-arteria);
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

.footer-privacy {
	font-family: var(--font-ja);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-base);
}

.footer-privacy:hover {
	color: var(--color-white);
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 768px) {
	:root {
		--float-bottom: 24px;
	}

	.header-inner {
		padding: 0 20px;
	}

	/* デスクトップナビを非表示 */
	.header-nav.desktop-nav {
		display: none;
	}

	.header-match {
		max-width: 45vw;
	}

	.match-main {
		max-width: 100%;
	}

	.match-opponent {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.match-coming-soon {
		font-size: 17px;
	}

	.match-date,
	.match-venue {
		font-size: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	.site-logo {
		height: 52px;
	}

	.header-float {
		bottom: var(--float-bottom);
	}

	.footer-inner {
		padding: 0 20px;
	}

	.footer-brand-logo-img {
		height: 64px;
	}

	.pitch-marquee-text {
		font-size: clamp(52px, 16vw, 72px);
		-webkit-text-stroke-width: 1.5px;
	}
}

/* ===========================
   Story Section
=========================== */
.story-section {
	position: relative;
	overflow: hidden;
	padding: 100px 40px;
}

.story-inner {
	position: relative;
	z-index: 3;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;
}

.story-text {
	/* ゴシックMB101 B（本番） / Zen Kaku Gothic New（暫定） */
	font-family: "ゴシックMB101 B", "Gothic MB101", "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.1vw, 32px);
	line-height: 1.8;
	letter-spacing: -0.01em;
	color: var(--color-white);
	margin: 0;
}

.story-cta {
	display: inline-flex;
	align-self: center;
	align-items: center;
	gap: 10px;
	font-family: var(--font-ja-bold);
	font-size: clamp(14px, 1.3vw, 16px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* 新ゴ（通常メトリクス）向けに上下対称paddingで中央寄せ（元はarteria用に非対称だった） */
	color: var(--color-white);
	background: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: 11px 28px;
	border-radius: 100px;
	text-decoration: none;
	transition: background var(--transition-base), color var(--transition-base);
}

.story-cta:hover {
	background: transparent;
	color: var(--color-primary);
}

.story-cta-arrow {
	display: inline-block;
	transition: transform var(--transition-base);
}

.story-cta:hover .story-cta-arrow {
	transform: translateX(5px);
}

/* 準備中のボタン: グレーアウトしてクリック不可 */
.story-cta.is-disabled {
	background: #c9ccd1;
	border-color: #c9ccd1;
	color: #fff;
	pointer-events: none;
	cursor: default;
	opacity: 0.85;
}

.story-cta.is-disabled:hover {
	background: #c9ccd1;
	color: #fff;
}

.story-cta.is-disabled:hover .story-cta-arrow {
	transform: none;
}

/* ストーリーセクション（紺背景）内のボタンだけ、白枠+ホバーでキラキラ流れる仕様に */
.story-section .story-cta {
	position: relative;
	color: var(--color-white);
	background-color: transparent;
	background-image: linear-gradient(93deg, currentColor 0%, currentColor 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, currentColor 67%, currentColor 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	border: 2px solid transparent;
	transition: none;
}

/* 外枠だけにグラデーションを流すリング（Instagramアイコンと同じ手法） */
.story-section .story-cta::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 100px;
	padding: 2px;
	background-image: linear-gradient(93deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, rgba(255, 255, 255, 0.7) 67%, rgba(255, 255, 255, 0.7) 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	transition: none;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.story-section .story-cta:hover {
	color: var(--color-white);
	background-position: 0% 0;
	transition: background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.story-section .story-cta:hover::before {
	background-position: 0% 0;
	transition: background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.story-section .story-cta-arrow {
	color: var(--color-white);
	background-image: linear-gradient(93deg, currentColor 0%, currentColor 33%, #5985D1 40%, #FD4690 48%, #FECAB5 56%, #62C3FF 64%, currentColor 67%, currentColor 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.story-section .story-cta:hover .story-cta-arrow {
	/* 親<a>のbackground-clip:textが元位置に矢印のゴーストを残すため、
	   スライドさせると矢印が二重に見える。この変種ではスライドを無効化する。 */
	transform: none;
	background-position: 0% 0;
	transition: background-position 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 768px) {
	.story-section {
		padding: 64px 20px;
	}

	.story-inner {
		gap: 32px;
		align-items: flex-start;
		text-align: left;
	}

	.story-text {
		font-size: 17px;
	}

	.story-cta {
		align-self: center;
	}
}

/* Pro Max(430px)は17pxで綺麗なので維持。それより狭い端末だけ幅に応じて縮小し、
   文末に1〜2文字だけ落ちる孤立改行を防ぐ（実機ゴシックMB101 Bで検証済み）。 */
@media (max-width: 427px) {
	.story-text {
		font-size: clamp(13px, 3.7vw, 16px);
	}
}

/* Astraのトップに戻るボタンを非表示 */
#ast-scroll-top {
	display: none !important;
}

/* Astraのコンテナ背景（薄い青 #F0F5FA）を白に */
.ast-separate-container {
	background-color: var(--color-bg);
}

/* ===========================
   Page Hero (共通ページタイトル)
=========================== */
.page-hero {
	background: var(--color-white);
	padding: 112px 40px 0;
}

/* --- プライバシーポリシー本文（プレーンテキスト） --- */
.privacy-section {
	padding: 40px 20px 80px;
}

.privacy-inner {
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.9;
}

.privacy-inner h2 {
	font-size: 1.1em;
	margin: 32px 0 8px;
}

.privacy-inner p {
	margin: 0 0 12px;
}

.privacy-inner ul {
	margin: 0 0 12px;
	padding-left: 1.5em;
}

/* --- 404 --- */
.notfound-section {
	padding: 40px 20px 100px;
	text-align: center;
}

.notfound-text {
	font-family: var(--font-ja);
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 2;
	color: var(--text-primary);
	margin: 0 0 32px;
}

/* 柄は親で通しタイルするため、ヒーローは透過にして親の柄を見せる */
body.blog .page-hero,
body.page-template-page-schedule .page-hero,
body.page-template-page-squad .page-hero,
body.page-privacy .page-hero,
body.error404 .page-hero {
	background: transparent;
}

/* ブログ・スカッド・スケジュール（+ トップページのブログ枠）のタイトルは中央寄せ */
body.blog .page-hero-title,
body.blog .page-hero-sub,
body.page-template-page-schedule .page-hero-title,
body.page-template-page-schedule .page-hero-sub,
body.page-template-page-squad .page-hero-title,
body.page-template-page-squad .page-hero-sub,
.home-news .page-hero-title,
.home-news .page-hero-sub,
.home-matches .page-hero-title,
.home-matches .page-hero-sub,
.home-partners .page-hero-title,
.home-partners .page-hero-sub,
body.page-privacy .page-hero-title,
body.page-privacy .page-hero-sub,
body.error404 .page-hero-title,
body.error404 .page-hero-sub {
	text-align: center;
}

/* CLUBのCompany見出しと同じ配色: 英語=黒 / 日本語=紺 */
body.blog .page-hero-title,
body.page-template-page-schedule .page-hero-title,
body.page-template-page-squad .page-hero-title,
.home-news .page-hero-title,
.home-matches .page-hero-title,
.home-partners .page-hero-title,
body.page-privacy .page-hero-title,
body.error404 .page-hero-title {
	color: var(--text-primary);
}

body.blog .page-hero-sub,
body.page-template-page-schedule .page-hero-sub,
body.page-template-page-squad .page-hero-sub,
.home-news .page-hero-sub,
.home-matches .page-hero-sub,
.home-partners .page-hero-sub,
body.page-privacy .page-hero-sub,
body.error404 .page-hero-sub {
	color: var(--color-deep);
}


.page-hero-inner {
	padding-bottom: 8px;
	animation: page-hero-reveal 0.7s cubic-bezier(0.19, 1, 0.22, 1) both;
}

/* CLUBのタグラインはブロックが大きい分、体感速度を合わせるため元の速さを維持 */
.page-hero-inner.club-hero-tagline {
	animation-duration: 1s;
}

/* 絞り込み・ページ送り後の再読み込み時はアニメーションなし（初回のみ再生） */
.page-hero-inner.is-static {
	animation: none;
}

/* ブログ・スカッド・スケジュールはタイトルのせり上がりアニメーションなし */
body.blog .page-hero-inner,
body.page-template-page-schedule .page-hero-inner,
body.page-template-page-squad .page-hero-inner,
body.page-privacy .page-hero-inner,
body.error404 .page-hero-inner {
	animation: none;
}

@keyframes page-hero-reveal {
	from {
		clip-path: inset(100% 0 0 0);
		transform: translateY(24px);
	}
	to {
		clip-path: inset(0% 0 0 0);
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-hero-inner {
		animation: none;
	}
}

/* スクロールで画面に入ったら下からせり上がる汎用演出（JS側でis-visibleを付与） */
.reveal-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1),
		transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.page-hero-title {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(64px, 12vw, 150px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	padding-top: 0.06em; /* グリフ上端の切れ防止 */
	color: var(--color-deep);
}

.page-hero-sub {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.08em;
	color: var(--color-deep);
	margin: -14px 0 0;
	padding-left: 0.1em; /* 日本語フォントのサイドベアリング補正 */
}

/* ===========================
   Club Hero: 動く背景（実写動画の代わりにCSSグラデーションで実装）
=========================== */
.club-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.club-hero-bg-layers {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	filter: blur(40px);
}

/* Neat（WebGL）グラデーション用（CLUBヒーロー / トップのstory-section 共用）。
   ぼかしは不要（キャンバス自体が滑らか）。読み込み前の白フラッシュ防止に紺の下地。 */
.club-hero > .club-hero-bg-layers,
.story-section > .club-hero-bg-layers {
	filter: none;
	background-color: var(--color-deep);
}

.club-hero-neat {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Neatグラデーションは元々暗いので、黒被せを弱める（フロントのstory-sectionには影響させない）。
   mix-blendの黒オーバーレイはオフ、フラット黒はごく薄くして白文字の可読性だけ確保。 */
.club-hero > .club-hero-overlay,
.story-section > .club-hero-overlay {
	background: transparent;
}

.club-hero > .club-hero-blur,
.story-section > .club-hero-blur {
	background: rgba(0, 0, 0, 0.08);
}

.club-hero-bg {
	position: absolute;
	inset: -20%;
	background-color: var(--color-deep);
	background-image: radial-gradient(circle at 80% 20%, var(--color-primary) 0%, transparent 50%);
	background-size: 160% 160%;
	animation: club-bg-flow-primary 16s ease-in-out infinite alternate;
}

/* 青系の2レイヤーは実要素として重ね、速く動かす */
.club-hero-bg--a,
.club-hero-bg--b {
	background-color: transparent;
}

.club-hero-bg--a {
	background-image: radial-gradient(circle at 20% 30%, var(--color-bright) 0%, transparent 45%);
	animation: club-bg-flow-a 5s ease-in-out infinite alternate;
}

.club-hero-bg--b {
	background-image: radial-gradient(circle at 50% 85%, var(--color-blue) 0%, transparent 55%);
	animation: club-bg-flow-b 5s ease-in-out infinite alternate;
}

@keyframes club-bg-flow-primary {
	0%   { background-position: 90% 10%; }
	100% { background-position: 60% 50%; }
}

@keyframes club-bg-flow-a {
	0%   { background-position: 0% 0%; }
	100% { background-position: 100% 80%; }
}

@keyframes club-bg-flow-b {
	0%   { background-position: 20% 100%; }
	100% { background-position: 100% 20%; }
}

.club-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
	mix-blend-mode: overlay;
}

.club-hero-blur {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.25);
}

.club-hero .page-hero {
	position: relative;
	z-index: 3;
	background: transparent;
	padding: 192px 40px 0;
}

/* タイトルの代わりに中央寄せの大きいタグラインを表示（試験的） */
.club-hero-tagline {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 246px 40px 0;
}

.club-hero-tagline-text {
	font-family: var(--font-arteria);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--color-white);
	text-align: center;
	white-space: nowrap;
	margin: 0;
	font-size: clamp(52px, 10.8vw, 207px);
}

.club-hero-tagline-ja {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	white-space: nowrap;
	margin: 20px 0 0;
	font-size: clamp(14px, 1.5vw, 29px);
	line-height: 1.35;
}

.club-hero .page-hero-title {
	color: var(--color-white);
}

.club-hero .page-hero-sub {
	color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
	.club-hero-bg {
		animation: none;
	}
}

/* --- Who We Are: 左見出し / 右テキスト（グラデーション背景の中、白文字） --- */
.club-about-inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: clamp(188px, 30vw, 540px) 1fr;
	align-items: start;
	gap: clamp(72px, 13.9vw, 140px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 168px 40px 100px;
}

.club-about-heading {
	border-left: 3px solid var(--color-white);
	padding-left: 24px;
}

.club-about-heading-en {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(44px, 7vw, 134px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	padding-top: 0.06em;
	color: var(--color-white);
}

.club-about-heading-ja {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.75);
	margin: -4px 0 0;
	padding-left: 0.1em;
}

.club-about-text-tagline {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--color-white);
	margin: 0 0 20px;
}

.club-about-text-body {
	font-family: var(--font-ja);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 2;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 24px;
}

.club-about-text-body:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.club-about-inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 126px 20px 80px;
	}

	.club-about-text-tagline {
		margin-bottom: 14px;
	}
}

/* --- Manifesto（グラデーション背景の中、白文字） --- */
.club-values-inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: clamp(188px, 30vw, 540px) 1fr;
	align-items: start;
	gap: clamp(72px, 13.9vw, 140px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px 126px;
}

.club-values-heading {
	border-left: 3px solid var(--color-white);
	padding-left: 24px;
}

.club-values-heading-en {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(44px, 7vw, 134px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	padding-top: 0.06em;
	color: var(--color-white);
}

.club-values-heading-ja {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.75);
	margin: -4px 0 0;
	padding-left: 0.1em;
}

.club-values-list {
	list-style: none;
	/* MANIFESTO見出しに対し1項目目の上端を少し下げて揃える（デスクトップ） */
	margin: 5px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.club-value-title {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: clamp(20px, 1.8vw, 28px);
	letter-spacing: 0.04em;
	color: var(--color-white);
	margin: 0;
}

.club-value-title-ja {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--color-white);
	margin-left: 4px;
}

.club-value-body {
	font-family: var(--font-ja);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 2;
	color: rgba(255, 255, 255, 0.8);
	margin: 14px 0 0;
}

@media (max-width: 768px) {
	.club-values-inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 0 20px 94px;
	}

	.club-values-list {
		gap: 32px;
		margin-top: 0; /* デスクトップの上端揃え調整はモバイルでは不要 */
	}
}

/* --- Company（白背景セクション） --- */
.club-company {
	background: #f2f2f2;
	/* 横paddingはinner側に持たせ、WHO WE ARE/MANIFESTOと左端基準を揃える（背景は全幅維持） */
	padding: 100px 0;
}

.club-company-inner {
	display: grid;
	grid-template-columns: clamp(188px, 30vw, 540px) 1fr;
	align-items: start;
	gap: clamp(72px, 13.9vw, 140px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.club-company-heading {
	border-left: 3px solid var(--color-primary);
	padding-left: 24px;
}

.club-company-heading-en {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(44px, 7vw, 134px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	padding-top: 0.06em;
	color: var(--text-primary);
}

.club-company-heading-ja {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.08em;
	color: var(--color-deep);
	margin: -4px 0 0;
	padding-left: 0.1em;
}

/* 会社情報テーブル */
.club-company-table {
	width: 100%;
	border-collapse: collapse;
	border: none;
}

.club-company-table tr {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.club-company-table th,
.club-company-table td {
	border: none;
	text-align: left;
	vertical-align: top;
	padding: 24px 0;
	font-family: var(--font-ja);
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.8;
}

.club-company-table th {
	width: 220px;
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
}

.club-company-table td {
	font-weight: 400;
	color: var(--text-secondary);
}

@media (max-width: 768px) {
	.club-company {
		padding: 64px 0;
	}

	.club-company-inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 0 20px;
	}

	.club-company-table th {
		width: 110px;
	}

	.club-company-table th,
	.club-company-table td {
		padding: 16px 0;
		font-size: 14px;
	}
}

/* ===========================
   News Listing
=========================== */
.news-layout {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px 96px;
}

@media (max-width: 768px) {
	.news-layout {
		background-image: none;
	}
}

.news-main {
	position: relative;
	z-index: 1;
}

/* --- フィルター（カテゴリ/年、タイトル下に中央寄せのドロップダウン） --- */
.news-filter-bar {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 40px 48px;
}

.news-filter-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 220px;
}

.news-filter-heading {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0;
}

.news-select {
	width: 100%;
	font-family: var(--font-ja);
	font-size: 15px;
	font-weight: 500;
	height: 44px;
	line-height: 44px;
	color: var(--text-primary);
	background-color: #f2f2f2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	border-radius: 8px;
	padding: 0 34px 0 14px;
	cursor: pointer;
}

.news-select:focus {
	background-color: #f2f2f2;
	color: var(--text-primary);
}

/* --- 記事一覧（右）: レスポンシブなカードグリッド --- */
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 24px;
}

/* 4列 → 2列（2列のまま維持する範囲を広めに取る） */
@media (max-width: 1024px) {
	.news-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 2列 → 1列（スマホ幅のみ） */
@media (max-width: 600px) {
	.news-list {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background: var(--color-white);
}

.news-card-thumb {
	width: 100%;
	aspect-ratio: 40 / 21;
	overflow: hidden;
	border-radius: 8px;
	background-color: #e6e6e6;
	flex-shrink: 0;
}

.news-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.news-card:hover .news-card-img {
	transform: scale(1.08);
}

.news-card-thumb--no-image {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue) 100%);
}

.news-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 0 0;
}

.news-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.news-card-cat {
	font-family: var(--font-ja);
	font-size: 11px;
	font-weight: 500;
	color: var(--text-secondary);
	background: #f0f0f0;
	padding: 4px 12px;
	border-radius: 100px;
}

.news-card-date {
	font-family: var(--font-ja);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.news-card-title {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: clamp(15px, 1.3vw, 16px);
	line-height: 1.5;
	color: var(--text-primary);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.news-empty {
	font-family: var(--font-ja);
	color: var(--text-muted);
	padding: 40px 0;
}

/* --- ページネーション --- */
.news-pagination {
	margin-top: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* 前へ / 次へ ボタン（サイト共通ボタンと同じピル形状・反転ホバー） */
.news-page-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-ja-bold);
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 100px;
	border: 2px solid var(--color-primary);
	background: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--transition-base), color var(--transition-base);
}

.news-page-btn:hover {
	background: transparent;
	color: var(--color-primary);
}

.news-page-btn.is-disabled {
	background: #ececec;
	border-color: #ececec;
	color: #bcbcbc;
	pointer-events: none;
}

.news-page-arrow {
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1;
	display: inline-block;
	transition: transform var(--transition-base);
}

.news-page-next:hover .news-page-arrow {
	transform: translateX(4px);
}

.news-page-prev:hover .news-page-arrow {
	transform: translateX(-4px);
}

/* 数字（中央） */
.news-page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

.news-page-numbers .page-numbers {
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	min-width: 16px;
	text-align: center;
	transition: color var(--transition-base);
}

.news-page-numbers a.page-numbers:hover {
	color: var(--color-primary);
}

.news-page-numbers .page-numbers.current {
	color: var(--text-primary);
	font-weight: 700;
}

.news-page-numbers .page-numbers.dots {
	color: var(--text-muted);
}

/* --- モバイル: フィルターを記事の上に --- */
@media (max-width: 900px) {
	.page-hero {
		padding: 80px 20px 0;
	}

	.club-hero .page-hero {
		padding: 160px 20px 60px;
	}

	.club-hero-tagline {
		padding: 200px 20px 0;
	}

	/* CLUBページの arteria 見出し類はモバイルで55px（Footballのみ60px） */
	.club-about-heading-en,
	.club-values-heading-en,
	.club-company-heading-en {
		/* Footballと同傾斜で縮小し、常にFootballより一回り小さく保つ */
		font-size: clamp(44px, 14.1vw, 55px);
	}

	.club-hero-tagline-text {
		/* 390pxで60px、狭くなるほど縮小（〜320pxで約49px）してはみ出しを防ぐ */
		font-size: clamp(48px, 15.4vw, 60px);
	}

	/* 日本語ラベル（私たちについて／マニフェスト／運営会社）はモバイルで15px */
	.club-about-heading-ja,
	.club-values-heading-ja,
	.club-company-heading-ja {
		font-size: 15px;
	}

	.page-hero-title {
		font-size: clamp(46px, 15vw, 64px);
	}

	.page-hero-sub {
		font-size: 14px;
		margin-top: -8px;
	}

	.news-layout {
		padding: 0 20px 72px;
	}

	.news-filter-bar {
		flex-wrap: nowrap;
		gap: 12px;
		padding: 40px 20px 28px;
	}

	.news-filter-group {
		flex: 1;
		width: auto;
		max-width: 220px;
	}

	.news-pagination {
		margin-top: 40px;
		gap: 8px;
	}

	.news-page-btn {
		font-size: 13px;
		padding: 10px 14px;
		gap: 8px;
	}

	.news-page-numbers {
		gap: 12px;
	}

	.news-page-numbers .page-numbers {
		font-size: 14px;
	}
}

/* ===========================
   Single Post (ブログ記事詳細)
   本文・画像とも最大幅720pxの単一カラム。
   将来サイドバーを足す場合:
     .single-wrap を desクトップで
       display:flex; gap:48px; max-width:1100px;
     にして .single-article{max-width:720px;flex:1} の隣に
     <aside class="single-sidebar" style="width:300px"> を置く。
=========================== */
.single-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 20px 96px;
}

.single-header {
	margin-bottom: 28px;
}

.single-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.single-date {
	font-family: var(--font-ja);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.single-cat {
	font-family: var(--font-ja);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
	background: #f0f0f0;
	padding: 4px 14px;
	border-radius: 100px;
	text-decoration: none;
	transition: background var(--transition-base);
}

.single-cat:hover {
	background: var(--color-pale);
}

.single-title {
	font-family: var(--font-ja-bold);
	font-weight: 700;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--text-primary);
	margin: 0;
}

/* 一覧ページのサムネイル（.news-card-thumb）と同じ比率にそろえる */
.single-thumb {
	margin: 0 0 40px;
	width: 100%;
	aspect-ratio: 40 / 21;
	overflow: hidden;
	border-radius: 10px;
	background-color: #e6e6e6;
}

.single-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- 本文タイポグラフィ --- */
.single-content {
	font-family: var(--font-ja);
	font-size: 17px;
	line-height: 1.9;
	color: var(--text-secondary);
}

/* 段落・要素間の縦リズム */
.single-content > * + * {
	margin-top: 1.6em;
}

.single-content h2 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--text-primary);
	margin-top: 2.2em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--color-pale);
}

.single-content h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text-primary);
	margin-top: 1.8em;
}

.single-content h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--text-primary);
	margin-top: 1.6em;
}

.single-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-content a:hover {
	text-decoration: none;
}

.single-content strong {
	font-weight: 700;
	color: var(--text-primary);
}

.single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.single-content figure {
	margin: 2em 0;
}

.single-content figure figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
}

.single-content ul,
.single-content ol {
	padding-left: 1.5em;
}

.single-content li + li {
	margin-top: 0.5em;
}

.single-content blockquote {
	border-left: 3px solid var(--color-light);
	padding: 4px 0 4px 20px;
	color: var(--text-muted);
	font-style: normal;
}

.single-content blockquote > * + * {
	margin-top: 0.8em;
}

.single-content pre {
	background: #1e1e1e;
	color: #f2f2f2;
	padding: 18px 20px;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.7;
}

.single-content :not(pre) > code {
	background: var(--color-pale);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.92em;
}

.single-content hr {
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 2.4em 0;
}

/* ページ分割記事のリンク（<!--nextpage-->） */
.single-pagelinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	font-family: var(--font-en);
	font-weight: 600;
}

.single-pagelinks a span,
.single-pagelinks > span {
	display: inline-block;
	min-width: 36px;
	text-align: center;
	padding: 6px 10px;
	border: 1px solid var(--color-light);
	border-radius: 6px;
}

/* --- 記事下ナビ（一覧へ）。ボタンはトップのブログセクションと同じ .story-cta --- */
.single-nav {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid #e2e2e2;
	display: flex;
	justify-content: center;
}

@media (max-width: 600px) {
	.single-content {
		font-size: 16px;
	}
}

/* ===========================
   Home: News Section
=========================== */
.home-news,
.home-matches,
.home-partners {
	padding-top: 100px;
}

/* 試合情報セクションだけ淡いブルー背景（#E8EEFA = --color-pale） */
.home-matches {
	background: var(--color-pale);
}

/* .page-hero は既定で白背景。MATCHESのタイトル帯は透過にして
   セクションの淡いブルーを見せる。 */
.home-matches .page-hero {
	background: transparent;
}

.home-news .page-hero,
.home-matches .page-hero,
.home-partners .page-hero {
	padding-top: 0;
}

.home-news-inner,
.home-matches-inner,
.home-partners-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 40px 100px;
}

.home-news-action {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}

/* PARTNERS: フッターと同じロゴ並び（明るい背景用に黒ロゴ） */
.home-partners-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px 56px;
	margin-top: 32px; /* タイトルとの間隔を確保 */
}

.home-partner-link {
	display: flex;
	align-items: center;
}

.home-partner-logo {
	height: 32px;
	width: auto;
	display: block;
}

@media (max-width: 900px) {
	.home-news,
	.home-matches,
	.home-partners {
		padding-top: 56px;
	}

	.home-news-inner,
	.home-matches-inner,
	.home-partners-inner {
		padding: 24px 20px 64px;
	}

	.home-news-action {
		margin-top: 44px;
		justify-content: center;
	}

	.home-partners-logos {
		gap: 28px 36px;
	}

	.home-partner-logo {
		height: 26px;
	}
}

/* ===========================
   Squad ページ
=========================== */
.squad-section {
	padding: 60px 40px 100px;
}

.squad-tabs {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 420px;
	background: #ededed;
	border-radius: 100px;
	padding: 3px;
	gap: 0;
	margin: 0 auto 48px;
}

.squad-tabs::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	height: calc(100% - 6px);
	width: calc((100% - 6px) / 3);
	background: var(--color-primary);
	border-radius: 100px;
	transform: translateX(calc(var(--idx, 0) * 100%));
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 0;
}

.squad-tab {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	font-family: var(--font-arteria);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	background: none;
	border: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 100px;
	padding: 0.6em 0.4em 0.4em;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition: color 0.25s;
}

.squad-tab:hover,
.squad-tab:focus {
	background: none;
	color: var(--text-muted);
	box-shadow: none;
	outline: none;
}

.squad-tab.is-active,
.squad-tab.is-active:hover,
.squad-tab.is-active:focus {
	color: var(--color-white);
	background: none;
	outline: none;
}

.squad-tab span {
	display: inline-block;
	margin-right: -0.04em;
}

.squad-panel {
	display: none;
}

.squad-panel.is-active {
	display: block;
}

.squad-panel.panel-anim-in {
	animation: panel-rise 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes panel-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.squad-panel.panel-anim-in {
		animation: none;
	}
}

.squad-coming-soon {
	font-family: var(--font-arteria);
	font-size: clamp(40px, 8vw, 80px);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-primary);
	text-align: center;
	padding: 60px 0;
}

@media (max-width: 768px) {
	.squad-section {
		padding: 40px 20px 80px;
	}

	.squad-tabs {
		max-width: 100%;
	}
}

/* ===========================
   Schedule ページ
=========================== */
/* MATCHESページ全体を、トップのMATCHESセクションと同じ淡いブルー背景に。
   page-hero・各セクションは透過なので、body背景がそのまま見える。 */
body.page-template-page-schedule {
	background-color: var(--color-pale);
}

.schedule-section {
	padding: 0 40px 100px;
}

.schedule-panel {
	display: none;
}

.schedule-panel.is-active {
	display: block;
}

/* --- フィルター（SPORT/SEASON、タイトル下に中央寄せのドロップダウン。NEWSページと同じ体裁） --- */
.match-filter-bar {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 40px 48px;
}

.match-filter-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 220px;
}

/* Official/Practiceの2列(.match-columns)と全く同じgridにして、SPORTとSEASONを
   それぞれの列の真上に揃える（.match-columnsが出ている905px以上のみ） */
@media (min-width: 905px) {
	.match-filter-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.match-filter-group {
		width: 100%;
	}

	/* SPORT: 見出し・ドロップダウンとも同じ220px幅・同じ左端になるよう右に寄せる
	   （ドロップダウンの右端がOfficialカードの右端、見出しはその220pxの左端に来る） */
	.match-filter-bar .match-filter-group:first-child .match-filter-heading,
	.match-filter-bar .match-filter-group:first-child .match-select {
		width: 220px;
		margin-left: auto;
	}

	/* .match-columns側の点線区切り分(padding-left:24px)とカードの左端を合わせる */
	.match-filter-bar .match-filter-group + .match-filter-group {
		padding-left: 24px;
	}

	/* SEASON: 左端をPracticeカードの左端に固定し、ボックス幅は220pxに狭める */
	.match-filter-bar .match-filter-group + .match-filter-group .match-select {
		width: 220px;
	}
}

.match-filter-heading {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0;
}

.match-select {
	width: 100%;
	font-family: var(--font-ja);
	font-size: 15px;
	font-weight: 500;
	height: 44px;
	line-height: 44px;
	color: var(--text-primary);
	background-color: var(--color-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	border-radius: 8px;
	padding: 0 34px 0 14px;
	cursor: pointer;
}

.match-select:focus {
	background-color: var(--color-white);
	color: var(--text-primary);
}

/* --- 試合リスト --- */
/* デスクトップ: Official / Practice の2列。モバイル用の単一リストは隠す */
.match-layout--mobile {
	display: none;
}

.match-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	/* 実効幅をBLOG(.news-layout)に合わせる。左右余白は親(.schedule-section)の40pxのみに
	   頼り、二重パディングを避ける。広い時=1320px中央、狭い時=viewport−80px（ヘッダーと一致）。 */
	max-width: 1320px;
	margin: 0 auto;
}

.match-col {
	min-width: 0;
}

.match-columns .match-col + .match-col {
	position: relative;
	padding-left: 24px;
}

.match-columns .match-col + .match-col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background-image: repeating-linear-gradient(to bottom, var(--color-light) 0, var(--color-light) 6px, transparent 6px, transparent 18px);
}

.match-col-heading {
	font-family: var(--font-arteria);
	font-weight: 900;
	font-size: clamp(36px, 4vw, 56px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--color-primary);
	text-align: center;
	margin: 0 0 20px;
}

/* 2列分（カード最小幅400px×2 + gap）を確保できない幅では、Official/Practiceに分けず
   モバイルと同じ日付順の単一リストにする */
@media (max-width: 904px) {
	.match-layout--mobile {
		display: block;
	}

	.match-columns {
		display: none;
	}
}

.match-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* --- 試合カード（左に縦バー / ホーム左 / スコア中央 / アウェイ右） --- */
.match-card {
	display: flex;
	border: 2px solid var(--color-primary);
	border-radius: 8px;
	background: var(--color-white);
	overflow: hidden;
}

/* フィルターで非表示（display:flex が hidden 属性を上書きするため明示） */
.match-card[hidden] {
	display: none;
}

.mc-inner {
	flex: 1;
	min-width: 0;
	padding: 18px 24px 0;
}

/* 上段: 大会名 / 日付・時刻 / 結果 / HOME・AWAY */
.mc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 0;
}

.mc-headmain {
	min-width: 0;
}

.mc-comp {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-white);
	background: var(--color-primary);
	margin: -18px -24px 14px;
	padding: 8px 24px;
}

.mc-comp-text {
	font-family: var(--font-ja);
	font-size: 13px;
	font-weight: 500;
	min-width: 0;
}

/* 日付・キックオフ時刻（一番目立たせる / 縦長フォント） */
.mc-when {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 5px;
	margin: 0;
	font-family: var(--font-arteria);
	text-transform: uppercase;
	line-height: 1;
	color: var(--text-primary);
}

.mc-date {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 0.01em;
}

.mc-day {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-secondary);
}

.mc-ko {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin-left: 8px;
}

.mc-ko-time {
	font-size: 28px;
	font-weight: 900;
	color: var(--color-primary);
}

.mc-ko-label {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-secondary);
}

.mc-result {
	flex-shrink: 0;
	font-family: var(--font-arteria);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 10px 3px;
	border-radius: 100px;
	line-height: 1;
}

.mc-result--win  { color: var(--color-white); background: #1b8a4b; }
.mc-result--lose { color: var(--color-white); background: #9aa0a6; }
.mc-result--draw { color: var(--text-secondary); background: #ececec; }

/* 中段: チーム名 左右対称 + 中央スコア/VS */
.mc-teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 36px 0;
}

/* アーカイブ（合計スコア）: ロゴと合計の間を少し広く（デスクトップ） */
.mc-teams--result {
	column-gap: 40px;
}

.mc-team { min-width: 0; }
.mc-team--left  { text-align: right; }
.mc-team--right { text-align: left; }

.mc-name {
	font-family: var(--font-ja-bold);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--text-primary);
}

.mc-team.is-us .mc-name {
	font-family: var(--font-arteria);
	font-size: 24px;
	letter-spacing: 0.02em;
	color: var(--color-primary);
	text-transform: uppercase;
}

.mc-logo {
	height: 60px;
	width: auto;
	display: block;
}

.mc-team--left .mc-logo {
	margin-left: auto;
}

.mc-team--right .mc-logo {
	margin-right: auto;
}

.mc-mid {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 68px;
}

.mc-score {
	font-family: var(--font-arteria);
	font-size: 48px;
	font-weight: 900;
	color: var(--text-primary);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
}

.mc-score em {
	font-style: normal;
	font-weight: 700;
	font-size: 40px;
	color: var(--text-secondary);
	transform: translateY(-0.08em);
}

.mc-vs {
	font-family: var(--font-arteria);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

/* アーカイブ内のVSはモバイル専用（デスクトップは非表示） */
.mc-vs--sp {
	display: none;
	justify-self: center;
}

/* アーカイブ（スコア）: 合計｜ピリオド内訳｜合計 */
.mc-scoreline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.mc-total {
	font-family: var(--font-arteria);
	font-size: 48px;
	font-weight: 900;
	line-height: 1;
	color: var(--text-primary);
}

.mc-periods {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mc-period {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.mc-pn {
	font-family: var(--font-arteria);
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
}

.mc-period > .mc-pn:first-child { text-align: right; }
.mc-period > .mc-pn:last-child { text-align: left; }

.mc-pl {
	font-family: var(--font-ja);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-muted);
	position: relative;
	top: -2px;
}

.mc-period--pk .mc-pl {
	font-family: var(--font-arteria);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-secondary);
	top: 0;
}

/* 下段: 会場 / タグ */
.mc-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 0;
	padding: 10px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.mc-venue {
	font-family: var(--font-ja);
	font-size: 13px;
	color: var(--text-secondary);
	min-width: 0;
}

.mc-ha-mark {
	flex-shrink: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding-top: 0.75px; /* 新ゴBで文字が上寄りに見えるため僅かに下げて中央寄せ（特にH） */
	border-radius: 50%;
	color: var(--color-white);
	font-family: var(--font-ja-bold);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.mc-ha-mark--home { background: var(--color-primary); }
.mc-ha-mark--away { background: #9aa0a6; }

.mc-cat {
	font-family: var(--font-arteria);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
	background: var(--color-pale);
	padding: 4px 12px;
	border-radius: 100px;
	white-space: nowrap;
}

.mc-sport {
	margin-left: auto;
	flex-shrink: 0;
	font-family: var(--font-ja-bold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
	background: #f0f0f0;
	padding: 5px 12px;
	border-radius: 100px;
	white-space: nowrap;
}

.mc-sport--soccer  { color: #1E7A3D; background: #E3F4E8; }
.mc-sport--futsal  { color: #C05A1E; background: #FDEDE0; }
.mc-sport--society { color: #6B3FA0; background: #F0E7FA; }

.match-empty {
	padding: 40px 8px;
	font-family: var(--font-ja);
	color: var(--text-muted);
	text-align: center;
}

/* SQUAD/SCHEDULEのComing Soonと同じ体裁 */
.match-empty--coming-soon {
	font-family: var(--font-arteria);
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-primary);
	padding: 60px 0;
}

@media (max-width: 768px) {
	.schedule-section {
		padding: 0 20px 80px;
	}

	.match-filter-bar {
		flex-wrap: nowrap;
		gap: 12px;
		padding: 40px 20px 28px;
	}

	.match-filter-group {
		flex: 1;
		width: auto;
		max-width: 220px;
	}

	/* 試合カード: モバイル */
	.mc-inner {
		padding: 16px 16px 0;
	}

	.mc-comp {
		margin: -16px -16px 14px;
		padding: 8px 16px;
	}

	.mc-teams {
		padding: 16px 0 30px;
	}

	.mc-head {
		margin-bottom: 14px;
	}

	.mc-comp {
		white-space: normal;
	}

	.mc-date,
	.mc-ko-time {
		font-size: 23px;
	}

	.mc-day {
		font-size: 15px;
	}

	.mc-ko-label {
		font-size: 15px;
	}

	.mc-name {
		overflow-wrap: anywhere;
	}

	.mc-teams {
		gap: 12px;
	}

	.mc-name {
		font-size: 16px;
	}

	.mc-team.is-us .mc-name {
		font-size: 18px;
	}

	.mc-logo {
		height: 50px;
	}

	.mc-mid {
		min-width: 60px;
	}

	.mc-score {
		font-size: 40px;
		gap: 10px;
	}

	.mc-score em {
		font-size: 32px;
	}

	/* スコアカード: 上段は logo｜VS｜相手（upcomingと同じ）、下段にスコア */
	.mc-teams--result {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas:
			"teamL vs    teamR"
			"score score score";
		row-gap: 20px;
		column-gap: 12px;
	}

	.mc-teams--result .mc-team--left  { grid-area: teamL; }
	.mc-teams--result .mc-vs--sp      { grid-area: vs; display: block; min-width: 60px; text-align: center; }
	.mc-teams--result .mc-team--right { grid-area: teamR; }
	.mc-teams--result .mc-scoreline   { grid-area: score; }

	.mc-total {
		font-size: 40px;
	}

	.mc-foot {
		flex-wrap: wrap;
		gap: 8px;
	}
}