@charset "UTF-8";
/*
 * layout.css
 * ヘッダー・フッター・コンテナ幅等のレイアウト定義
 * ※ ヘッダー・フッターの詳細スタイルはデザインデータ確認後に追記
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   コンテナ
   ============================================= */

/* 基本コンテナ（コンテンツ幅 1480px） */
.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 40px;
}

/* 全幅コンテナ（サイト幅 1920px） */
.container--full {
	width: 100%;
	max-width: var(--site-width);
	margin-inline: auto;
}

/* =============================================
   ヘッダー
   ============================================= */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height-pc);
	background-color: var(--color-white);
	z-index: var(--z-header);
	/* opacity も対象に。ease-out でふわっと出入りさせる（下で隠れ・上で出る）
	   立ち上がりを緩やかにする ease-out で「パキッ」を避けてふわっと表示する */
	transition: opacity 0.5s ease-out, box-shadow 0.5s ease-out;
	/* iOS Safari対策: opacity単独フェードだと position:fixed 要素で合成レイヤーが立たず
	   フェードがスキップされる（下層ページで顕著・TOPは背景色変化があるため発生しない）。
	   will-change で合成レイヤーを事前生成しフェードを安定させる。
	   transform は使わない（ドロワーのstacking contextを壊さないため） */
	will-change: opacity;
}

#header.is-scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

/* 下スクロールで隠す（全ページ・全デバイス共通）
   transform はドロワーのstacking contextを壊すため使わず opacity で制御 */
#header.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* モーション低減環境（視差効果を減らす）対応。
   reduce は視差・回転・ズーム・スライド等「前庭系を刺激する大きな動き」を抑えるためのもの。
   ヘッダーの opacity クロスフェードは穏やかな変化でガイドライン上も許容されるため残す。
   （以前は transition:none で全無効化していたが、reduce環境の実機で出入りが瞬時切替=パキッに
   なっていたため、opacityフェードのみ残す方針に変更。背景・影は瞬時でも体感上問題ない） */
@media (prefers-reduced-motion: reduce) {
	#header,
	body.home #header {
		transition: opacity 0.5s ease-out;
	}
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding-inline: 40px;
}

/* ロゴ */
.header-nav__logo {
	display: flex;
	align-items: center;
}

.header-nav__logo img {
	width: auto;
	height: 100px;
}

/* PCナビゲーション */
.header-nav__list {
	display: flex;
	align-items: center;
	gap: 56px;
}

.header-nav__list a {
	font-family: var(--font-en);
	font-size: var(--nav-font-size);
	font-weight: var(--nav-font-weight);
	color: var(--color-bg);
	letter-spacing: var(--nav-letter-spacing);
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.header-nav__list a:hover {
		opacity: 0.5;
	}
}

/* CONTACT・ENTRYボタン群（横並び1段・主従をつける） */
.header-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
}

/* CONTACT・ENTRYボタン共通の骨格（サイズは1段縮小してヘッダーに収める）
   スクロール後（白背景）は黒枠＋黒文字＋透明のアウトラインで2つを統一する。
   TOP透過時は白枠＋白文字に切り替わる（白黒の逆パターン）。
   ※ ENTRY/CONTACTを同じ見た目にして色のチグハグを解消 */
.header-entry-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 120px;
	height: 40px;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-black);
	background-color: transparent;
	border: 1px solid var(--color-black);
	padding: 0 20px;
	letter-spacing: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
	/* ホバー: 黒枠 → 黒塗り＋白文字に反転。
	   opacity:1 を明示して base.css の共通 a:hover{opacity:0.7} を打ち消す
	   （これを入れないと黒が半透明になりグレーに見える） */
	.header-entry-btn:hover {
		opacity: 1;
		color: var(--color-white);
		background-color: var(--color-black);
	}
}

.header-entry-btn__arrow {
	display: inline-flex;
	align-items: center;
}

/* =============================================
   SPドロワーメニュー
   ============================================= */
.nav-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-black);
	z-index: var(--z-drawer);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

/* 閉じるボタン */
.nav-drawer__close {
	position: absolute;
	top: 28px;
	right: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

/* メニュー内側の余白（左右はSP container と統一）
   縦flexにして、ボタン群（__actions）を画面下部へ寄せる。
   高さは --vh（common.js が orientationchange 時のみ更新）を使い、
   スクロール中のアドレスバー出入りでドロワーが伸縮しないようにする（dvh は使用禁止） */
.nav-drawer__inner {
	box-sizing: border-box;
	min-height: calc(var(--vh, 1vh) * 100);
	display: flex;
	flex-direction: column;
	padding: 56px 16px 32px;
}

/* 2カラムグリッド（左右カラム先頭が揃うよう align-items: start） */
.nav-drawer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
	align-items: start;
}

/* グループ（NEWS / CLUB / SCHOOL / COACH / SPONSOR 各ブロック） */
.nav-drawer__group {
	margin-bottom: 24px;
}

/* 見出し（NEWS / CLUB / SCHOOL / COACH / SPONSOR） */
.nav-drawer__heading {
	font-family: var(--font-en);
	font-size: 40px;
	font-weight: 700;
	font-style: normal;
	color: var(--color-white);
	letter-spacing: 0.02em;
	line-height: 1;
	margin-bottom: 8px;
}

/* リンクリスト */
.nav-drawer__list li {
	margin-bottom: 8px;
}

.nav-drawer__list li:last-child {
	margin-bottom: 0;
}

.nav-drawer__list a {
	font-family: var(--font-ja);
	font-size: var(--text-base-size);
	font-weight: 400;
	color: var(--color-white);
	line-height: 1.5;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.nav-drawer__list a:hover {
		opacity: 0.6;
	}
}

/* CONTACTボタン群（無料体験エントリー・お問い合わせ／縦並び） */
.nav-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto; /* メニューとの間を押し広げ、ボタン群をドロワー下部へ寄せる */
	padding-top: 24px; /* メニューとの最小間隔（コンテンツが多い時の詰まり防止） */
}

.nav-drawer__contact {
	display: block;
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--color-white);
	font-family: var(--font-ja);
	font-size: 16px;
	font-weight: 400;
	color: var(--color-white);
	text-align: center;
	letter-spacing: 0.1em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
	.nav-drawer__contact:hover {
		background-color: var(--color-white);
		color: var(--color-black);
		opacity: 1;
	}
}

/* オーバーレイ */
.nav-overlay {
	display: none;
}

/* =============================================
   メインコンテンツ
   ============================================= */
#main {
	padding-top: var(--header-height-pc);
	flex: 1;
}

/* =============================================
   TOPページ: ヘッダー透過＋HERO完全フルスクリーン（ツクリオ型・トレンド没入HERO）
   ヘッダーをHEROに重ね、ヘッダー分の余白を消してHEROを画面いっぱいに。
   未スクロール時はヘッダー背景透明＋白文字、スクロールで白背景＋黒文字に戻す。
   ============================================= */
body.home #main {
	/* ヘッダー分の余白を消してHEROを画面の最上部から開始 */
	padding-top: 0;
}

body.home #header {
	/* HEROに重ねるため背景透明（スクロール時に白へ） */
	background-color: transparent;
	box-shadow: none;
	/* opacity・背景・影をすべて同じ ease-out・同尺に揃え、二重フェードのチグハグをなくす */
	transition: opacity 0.5s ease-out, background-color 0.5s ease-out, box-shadow 0.5s ease-out;
}

/* 未スクロール時: HERO（暗い画像/動画）上で視認できるようナビ文字を白に */
body.home #header:not(.is-scrolled) .header-nav__list a {
	color: var(--color-white);
}

/* 未スクロール時: HERO上で視認できるようハンバーガーの線を白に
   （スクロール後は白背景になるためデフォルトの黒線に戻る） */
body.home #header:not(.is-scrolled) .hamburger__line {
	background-color: var(--color-white);
}

/* 未スクロール時（TOP透過HERO上）のCTA: ENTRY・CONTACTとも白枠＋白文字＋透明。
   スクロール後（白背景）は黒枠＋黒文字に切り替わる（白黒の逆パターン）。
   2つを同じ見た目にして色のチグハグを解消している */
body.home #header:not(.is-scrolled) .header-entry-btn {
	color: var(--color-white);
	background-color: transparent;
	border-color: var(--color-white);
}

/* TOP透過時のホバー: 白枠 → 白塗り＋黒文字に反転（opacity:1 で a:hover を打ち消す） */
@media (hover: hover) {
	body.home #header:not(.is-scrolled) .header-entry-btn:hover {
		opacity: 1;
		color: var(--color-black);
		background-color: var(--color-white);
		border-color: var(--color-white);
	}
}

/* スクロール後: 白背景＋黒文字に戻す（通常ヘッダー） */
body.home #header.is-scrolled {
	background-color: var(--color-white);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

/* TOPで下スクロールして隠す時は、白背景化させず透過のまま消す
   （白ヘッダーが一瞬チラついてから消えるのを防ぐ。白背景は上スクロール復帰時のみ見せる）
   background-color/box-shadow は即時で透過へ戻し（transition対象から外す）、
   opacity のフェードだけで消す。これで「白くなってから消える」チラつきを防ぐ */
body.home #header.is-hidden {
	background-color: transparent;
	box-shadow: none;
	transition: opacity 0.5s ease-out;
}

/* =============================================
   フッター
   ============================================= */
#footer {
	width: 100%;
	background-color: var(--color-black);
	padding-inline: 20px;
}

.footer-inner {
	max-width: var(--banner-width);
	margin-inline: auto;
	padding: 160px 0 60px;
}

/* フッターナビゲーション */
.footer-nav {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0 20px;
	margin-bottom: 80px;
}

.footer-nav__heading {
	font-family: var(--font-en);
	font-size: 40px;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}

.footer-nav__list li {
	margin-bottom: 8px;
}

.footer-nav__list a {
	font-family: var(--font-ja);
	font-size: 20px;
	font-weight: 900;
	color: var(--color-gray-3);
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.footer-nav__list a:hover {
		opacity: 0.6;
	}
}

/* フッター下部（ロゴ＋SNS ／ コピーライト） */
.footer-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

/* 左側ブランド群: サイトロゴ＋SNSアイコンをまとめる */
.footer-bottom__brand {
	display: flex;
	align-items: center;
	gap: 20px;
}

.footer__logo img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* SNSアイコン（Instagram） */
.footer-sns {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	/* ロゴ画像（炎マークが枠内で上寄り）の視覚的中心にアイコンを合わせるため微調整 */
	margin-top: 20px;
}

.footer-sns__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.footer-sns__icon {
	display: block;
	width: 64px;
	height: 64px;
}

@media (hover: hover) {
	.footer-sns__link {
		transition: opacity 0.2s ease;
	}

	.footer-sns__link:hover {
		opacity: 0.7;
	}
}

.footer__copyright {
	font-family: var(--font-en);
	font-size: var(--text-lg-size);
	font-weight: 400;
	color: var(--color-white);
	letter-spacing: 0.05em;
}

/* =============================================
   フッター レスポンシブ
   ============================================= */
@media screen and (max-width: 1024px) {
	/* コンテナタブレット左右余白 */
	.container {
		padding-inline: 24px;
	}

	.footer-inner {
		padding: 60px 24px 40px;
	}

	.footer-nav {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		margin-bottom: 60px;
	}
}

@media screen and (max-width: 768px) {
	.footer-inner {
		padding: 48px 20px 32px;
	}

	.footer-nav {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}

/* =============================================
   レスポンシブ
   ============================================= */
@media screen and (max-width: 1024px) {

	/* PCナビ・CONTACT/ENTRYボタン群を非表示 */
	.header-nav,
	.header-actions {
		display: none;
	}

	/* ハンバーガーを表示 */
	.hamburger {
		display: flex;
	}

	/* ヘッダー高さをSP用に調整 */
	#header {
		height: var(--header-height-sp);
	}

	#main {
		padding-top: var(--header-height-sp);
	}

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

	.header-nav__logo img {
		height: 50px;
	}
}

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

	/* SPトップページ：ヘッダー分のpadding-topを相殺（HEROをフルスクリーンに）
	   初期は透過ヘッダーを表示し、下スクロールで隠す挙動は全デバイス共通（.is-hidden）に統一 */
	body.home #main {
		padding-top: 0;
	}

	/* コンテナSP左右余白 */
	.container {
		padding-inline: 16px;
	}

	/* SPフッター：ナビ非表示・ロゴとコピーライトのみ */
	.footer-nav {
		display: none;
	}

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

	.footer-bottom {
		flex-direction: row-reverse;
		align-items: center;
	}

	.footer-bottom__brand {
		gap: 12px;
	}

	.footer__logo img {
		width: 70px;
		height: 70px;
	}

	.footer-sns__icon {
		width: 46px;
		height: 46px;
	}
}