@charset "UTF-8";
/*
 * member.css
 * MEMBERセクション・MEMBERバナー・現役/卒業生一覧ページ共通スタイル
 * section-member.php を使用する全ページで読み込む
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   MEMBERセクション（PC: 5列グリッド）
   ============================================= */
.sec-member--bg {
	background-color: var(--color-offwhite);
}

/* ─── セクションタイトル ─── */
.member-section__title {
	font-family: var(--font-en);
	font-size: 80px;
	font-weight: 900;
	color: var(--color-black);
	text-align: center;
	letter-spacing: 0.02em;
	margin-bottom: 60px;
}

/* ─── チーム集合写真 ─── */
.member-team-photo-wrap {
	margin-bottom: 60px;
}

.member-team-photo {
	width: 100%;
	height: 550px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ─── グリッド外枠（PC・タブレット：container相当） ─── */
.member-grid-outer {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 40px;
}

/* ─── グリッド（PC: 5列） ─── */
.member-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 48px 32px;
	padding: 0;
	margin: 0;
}

/* ─── カード ─── */
.member-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ─── 写真エリア ─── */
.member-card__photo-wrap {
	width: 100%;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background-color: #D8D8D8;
}

.member-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	/* scale(1.6)+translateYは証明写真を顔アップにトリミングする表示調整（演出ではない） */
	transform: scale(1.6) translateY(15%);
}

/* ホバー時はopacityを下げてクリック可能を示す（sponsorと挙動を統一）。
   現役選手カードのみ対象。alumni-card（卒業生）はクリック不可のため除外する */
@media (hover: hover) {
	.member-card:not(.alumni-card) {
		transition: opacity 0.2s ease;
	}

	.member-card:not(.alumni-card):hover {
		opacity: 0.7;
	}
}

.member-card__photo--empty {
	width: 100%;
	height: 100%;
	background-color: #D8D8D8;
}

/* ─── テキスト情報 ─── */
.member-card__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.member-card__name-ja {
	font-family: var(--font-ja);
	font-size: 26px;
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.4;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.member-card__number {
	font-family: var(--font-en);
	font-size: 26px;
	font-weight: 700;
	color: var(--color-black);
	flex-shrink: 0;
}

.member-card__name-en {
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 600;
	color: var(--color-black);
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.member-card__grade {
	font-family: var(--font-ja);
	font-size: 22px;
	font-weight: 400;
	color: var(--color-black);
	line-height: 1.6;
}

/* =============================================
   ALUMNIセクション
   ============================================= */
.sec-alumni {
	padding: 80px 0 calc( var(--section-pb) + 180px );
}

/* ─── 年度ラベル ─── */
.alumni-year-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-ja);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-black);
	border-bottom: 2px solid var(--color-orange);
	padding-bottom: 12px;
	margin-bottom: 48px;
}

.alumni-year-label__dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--color-orange);
	flex-shrink: 0;
}

/* ─── 進学先テキスト ─── */
.alumni-card__school {
	font-size: 18px;
}

/* タイトルは .member-section__title を共用 */
/* ALUMNIタイトルはフォントサイズをMEMBERより小さく（日本語のため） */
.sec-alumni .member-section__title {
	font-family: var(--font-ja);
	font-size: 56px;
	font-weight: 900;
	letter-spacing: 0.04em;
}

@media screen and (max-width: 1024px) {
	.sec-alumni .member-section__title {
		font-size: 40px;
	}
}

@media screen and (max-width: 768px) {
	.sec-alumni {
		padding: calc( var(--section-pt-sp) + 24px ) 0 calc( var(--section-pb-sp) + 40px );
	}

	.sec-alumni .member-section__title {
		font-size: 32px;
	}
}

/* =============================================
   MEMBERバナー
   ============================================= */

/* ─── ラッパー（container外・全幅） ─── */
.member-banner-wrap {
	max-width: var(--content-width);
	margin: 120px auto 0;
	padding-inline: 40px;
}

/* ─── バナー本体（リンク or div） ─── */
.member-banner {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
}

/* ─── 写真 ─── */
.member-banner__img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.5s ease;
}

/* ALUMNIバナーは顔が見えるよう位置調整 */
.sec-alumni .member-banner__img {
	height: 400px;
	object-position: center 20%;
}

@media (hover: hover) {
	a.member-banner:hover .member-banner__img {
		transform: scale(1.03);
	}
}

/* ─── テキストオーバーレイ ─── */
.member-banner__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 48px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.20) 60%,
		rgba(0, 0, 0, 0) 100%
	);
	gap: 12px;
}

/* ALUMNIバナー専用オーバーレイ */
.sec-alumni .member-banner__overlay {
	background: rgba(220, 80, 50, 0.65);
}

/* ─── タイトル（英大文字・大サイズ） ─── */
.member-banner__title {
	font-family: var(--font-en);
	font-size: 110px;
	font-weight: 700;
	color: var(--color-white);
	line-height: 1;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ─── サブタイトル ─── */
.member-banner__subtitle {
	font-family: var(--font-ja);
	font-size: 40px;
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.4;
	text-align: center;
}

/* =============================================
   レスポンシブ（タブレット 〜1024px）
   ============================================= */
@media screen and (max-width: 1024px) {

	/* ─── チーム集合写真（タブレット） ─── */
	.member-team-photo {
		height: 380px;
	}

	/* ─── MEMBERセクション（タブレット: 3列） ─── */
	.member-grid-outer {
		padding-inline: 24px;
	}

	.member-grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: 40px 24px;
	}

	.member-section__title {
		font-size: 60px;
		margin-bottom: 40px;
	}

	.member-card__name-ja {
		font-size: 20px;
	}

	.member-card__number {
		font-size: 20px;
	}

	.member-card__name-en {
		font-size: var(--text-base-size); /* 16px */
	}

	.member-card__grade {
		font-size: var(--text-base-size); /* 16px */
	}

	/* ─── MEMBERバナー（タブレット） ─── */
	.member-banner-wrap {
		padding-inline: 24px;
	}

	.member-banner__img {
		height: 320px;
	}

	.sec-alumni .member-banner__img {
		height: 320px;
	}

	.member-banner__title {
		font-size: 80px;
	}

	.member-banner__subtitle {
		font-size: 30px;
	}
}

/* =============================================
   レスポンシブ（SP 〜768px）
   ============================================= */
@media screen and (max-width: 768px) {

	/* ─── チーム集合写真（SP） ─── */
	.member-team-photo {
		height: 240px;
	}

	/* ─── MEMBERセクション（SP: 横スクロール・peek効果） ─── */
	/* padding は sec-page-content に委譲 */
	.member-section__title {
		font-size: 48px;
		margin-bottom: 28px;
	}

	/* SP: 横スクロールコンテナ */
	.member-grid-outer {
		max-width: none;
		padding-inline: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.member-grid-outer::-webkit-scrollbar {
		display: none;
	}

	/* SP: グリッドをflex横並びに */
	.member-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		scroll-snap-type: x mandatory;
		gap: 0;
		padding: 0;
		margin: 0;
		width: max-content;
	}

	/* SP: 最初のカードに左余白（containerのSP padding相当） */
	.member-card:first-child {
		margin-left: 16px;
	}

	.member-grid::-webkit-scrollbar {
		display: none; /* Chrome / Safari */
	}

	.member-card {
		flex: 0 0 auto;
		width: 220px;
		margin-right: 16px;
		scroll-snap-align: start;
	}

	/* 最後のカードは右端が少し見えるよう余白なし（peek効果） */
	.member-card.is-last {
		margin-right: 20px;
	}


	.member-card__info {
		text-align: center;
		align-items: center;
	}

	.member-card__name-ja {
		font-size: var(--page-h3-sp); /* 18px */
		justify-content: center;
	}

	.member-card__number {
		font-size: var(--page-h3-sp); /* 18px */
	}

	.member-card__name-en {
		font-size: var(--text-sm-size); /* 14px */
	}

	.member-card__grade {
		font-size: var(--page-body-sp); /* 16px */
	}

	/* ─── MEMBERバナー（SP） ─── */
	.member-banner-wrap {
		padding-inline: 16px;
		margin-top: 100px;
	}

	.member-banner__img {
		height: 240px;
	}

	.sec-alumni .member-banner__img {
		height: 240px;
	}

	.member-banner__overlay {
		padding: 24px 20px;
		gap: 8px;
	}

	.member-banner__title {
		font-size: 50px;
	}

	.member-banner__subtitle {
		font-size: 20px;
	}
}


/* =============================================
   一覧ページではsection-member.phpのタイトルを非表示
   （HEROで既に表示しているため）
   ============================================= */


/* パンくずがない404ページはパンくず分（85px）上余白を補正 */
.sec-404-hero {
	padding-top: calc( var(--page-hero-pt) + 85px );
}


/* =============================================
   卒業生一覧アーカイブ（年度アコーディオン）
   ============================================= */
.alumni-accordion {
	border-top: 1px solid #D0D0D0;
}

.alumni-accordion.is-last {
	border-bottom: 1px solid #D0D0D0;
}

.alumni-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 32px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	outline: none;
}


.alumni-accordion__year {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-ja);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-black);
}

/* アコーディオンアイコン（PC・SP共通表示） */
.alumni-accordion .club-accordion__icon {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='2,6 10,14 18,6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.3s ease;
}

.alumni-accordion.is-open .club-accordion__icon {
	transform: rotate(180deg);
}

/* アコーディオン本文（PC・SP共通・JS制御） */
.alumni-accordion .js-accordion-body {
	overflow: hidden;
	height: 0;
	display: block;
	transition: height 0.35s ease;
}

.alumni-archive__grid {
	padding-bottom: 48px;
}

/* =============================================
   レスポンシブ（タブレット 〜1024px）
   ============================================= */
@media screen and (max-width: 1024px) {

	.page-hero__title {
		font-size: clamp(80px, 12vw, 160px);
	}

	.alumni-accordion__year {
		font-size: 22px;
	}

}

/* =============================================
   レスポンシブ（SP 〜768px）
   ============================================= */
@media screen and (max-width: 768px) {


	.page-hero__title {
		font-size: clamp(60px, 15vw, 100px);
	}

	.alumni-accordion__trigger {
		padding: 20px 0;
	}

	.alumni-accordion__year {
		font-size: var(--page-h3-sp); /* 18px */
	}

	.alumni-year-label {
		font-size: var(--page-h3-sp); /* 18px */
		margin-bottom: 24px;
	}

}

/* =============================================
   一覧ページSP：横スクロールを2列グリッドに上書き
   ============================================= */
@media screen and (max-width: 768px) {

	.sec-member--archive .member-grid-outer {
		overflow-x: visible;
		padding-inline: 16px;
	}

	.sec-member--archive .member-grid {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		gap: 32px 16px;
		width: auto;
		flex-direction: unset;
		flex-wrap: unset;
		scroll-snap-type: unset;
	}

	.sec-member--archive .member-card {
		width: auto;
		flex: unset;
		margin-right: 0;
		margin-left: 0;
		scroll-snap-align: unset;
	}

	.sec-member--archive .member-card:first-child {
		margin-left: 0;
	}

	.sec-member--archive .member-card.is-last {
		margin-right: 0;
	}

	/* 卒業生アーカイブも2列グリッド */
	.sec-alumni-archive .member-grid {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		gap: 32px 16px;
		width: auto;
		flex-direction: unset;
		flex-wrap: unset;
		scroll-snap-type: unset;
	}

	.sec-alumni-archive .member-card {
		width: auto;
		flex: unset;
		margin-right: 0;
		margin-left: 0;
		scroll-snap-align: unset;
	}

	.sec-alumni-archive .member-card:first-child {
		margin-left: 0;
	}

	.sec-alumni-archive .member-card.is-last {
		margin-right: 0;
	}

}