@charset "UTF-8";
/*
 * voice.css
 * 保護者の声アーカイブ（/voice/）専用スタイル
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   ヒーローセクション
   ============================================= */

/* PC: SPブロック非表示 */
.voice-hero__pc {
	display: block;
}

.voice-hero__sp {
	display: none;
}

/* PC余白は sec-page-hero に委譲・padding-bottom はSPで上書き */
.sec-voice-hero {
	padding-bottom: 0;
}

/* リード文（PC） */
.voice-archive__lead {
	font-family: var(--font-ja);
	font-size: var(--page-h1-pc); /* 32px */
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.8;
	text-align: center;
	margin-top: 120px;
	margin-bottom: 100px;
}

/* =============================================
   リード文セクション（PCのみ）
   ============================================= */
.sec-voice-lead {
	padding: 80px 0 0;
	text-align: center;
}

/* =============================================
   記事一覧セクション
   ============================================= */

/* 記事なし時のメッセージ */
.voice-archive__empty {
	font-family: var(--font-ja);
	font-size: var(--text-base-size);
	color: var(--color-gray-3);
	padding: 40px 0;
}

/* 記事リスト */
.voice-archive__list {
	display: flex;
	flex-direction: column;
}

/* リスト上端の区切り線（container幅に揃える） */
.voice-archive__list::before {
	content: '';
	display: block;
	height: 1px;
	background: var(--color-gray-1);
	max-width: var(--content-width);
	width: calc(100% - 80px);
	margin-inline: auto;
}

/* 記事1件 */
.voice-item {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 0 0 80px;
}

/* 記事間の区切り線（container幅に揃える） */
.voice-item + .voice-item::before {
	content: '';
	display: block;
	height: 1px;
	background: var(--color-gray-1);
	max-width: var(--content-width);
	width: calc(100% - 80px);
	margin-inline: auto;
}

/* 写真 */
.voice-item__photo {
	width: calc(100% - 80px);
	max-width: var(--content-width);
	margin-inline: auto;
	background-color: var(--color-white);
}

.voice-item__img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	display: block;
}

.voice-item__photo-placeholder {
	width: 100%;
	aspect-ratio: 16 / 7;
	background-color: var(--color-gray-1);
}

/* Q&Aエリア（containerクラス併用） */
.voice-item__body {
	display: flex;
	flex-direction: column;
}

/* プロフィール */
.voice-item__profile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 0 0;
	text-align: center;
	align-items: center;
	width: calc(100% - 80px);
	max-width: var(--content-width);
	margin-inline: auto;
}

/* プロフィール下の区切り線（container幅に揃える） */
.voice-item__profile::after {
	content: '';
	display: block;
	height: 1px;
	background: var(--color-gray-1);
	max-width: var(--content-width);
	width: calc(100% - 80px);
	margin-inline: auto;
	margin-top: 80px;
}

/* VIEW MOREボタン（PCでは非表示） */
.voice-item__view-more {
	display: none;
}

/* PCでは line-clamp を無効化 */
.voice-item__qa-a--clamp {
	-webkit-line-clamp: unset;
	overflow: visible;
	display: block;
}

.voice-item__affiliation {
	font-family: var(--font-ja);
	font-size: var(--page-h1-pc); /* 32px */
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.6;
}

.voice-item__period {
	font-family: var(--font-ja);
	font-size: var(--page-h2-pc); /* 26px */
	font-weight: 400;
	color: var(--color-black);
	line-height: 1.6;
}

.voice-item__name {
	font-family: var(--font-ja);
	font-size: var(--page-h1-pc); /* 32px */
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.5;
	margin-top: 12px;
}

/* Q&A */
.voice-item__qa {
	display: flex;
	flex-direction: column;
}

.voice-item__qa-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 50px 0;
}

/* 最初のQ&Aブロックのみ上余白を調整 */
.voice-item__qa-block:first-child {
	padding-top: 40px;
}

/* Q: オレンジ太字 */
.voice-item__qa-q {
	font-family: var(--font-ja);
	font-size: var(--page-h2-pc); /* 26px */
	font-weight: 700;
	color: var(--color-orange);
	line-height: 1.5;
	margin: 0;
}

/* A: 本文 */
.voice-item__qa-a {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 400;
	color: var(--color-black);
	line-height: 1.9;
	margin: 0;
}

/* =============================================
   SP（〜768px）
   ============================================= */
@media screen and (max-width: 768px) {

	/* リード文セクションはSPでは非表示（SPはヒーロー内に表示） */
	.sec-voice-lead {
		display: none;
	}

	/* PC: ヒーローブロック非表示 */
	.voice-hero__pc {
		display: none;
	}

	/* SP: ヒーローブロック表示 */
	.voice-hero__sp {
		display: block;
	}

	/* パンくず＋ヒーローを包む1枚の背景 */
	.sec-voice-hero-wrap {
		position: relative;
		background-image: var(--voice-hero-bg);
		background-size: cover;
		background-position: center center;
	}

	.sec-voice-hero-wrap::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(220, 80, 50, 0.65);
		pointer-events: none;
	}

	/* パンくず・SPヒーローをオーバーレイより前面に */
	.sec-voice-hero-wrap .breadcrumb-wrap,
	.voice-hero__sp .sec-voice-hero {
		position: relative;
		z-index: 1;
	}

	/* パンくず文字・セパレーターを白に */
	.sec-voice-hero-wrap .breadcrumb,
	.sec-voice-hero-wrap .breadcrumb a,
	.sec-voice-hero-wrap .breadcrumb__item,
	.sec-voice-hero-wrap .breadcrumb__item--current {
		color: var(--color-white);
	}

	.sec-voice-hero-wrap .breadcrumb__item + .breadcrumb__item::before {
		color: rgba(255, 255, 255, 0.6);
	}

	/* SPヒーロー：フルスクリーン高さ */
	.voice-hero__sp .sec-voice-hero {
		min-height: calc(100vh - var(--header-height-sp) - 40px);
		min-height: calc(calc(var(--vh, 1vh) * 100) - var(--header-height-sp) - 40px);
		padding-top: var(--section-pt-sp);
		padding-bottom: var(--section-pt-sp);
	}

	/* タイトル（上）＋リード文（下）をフルスクリーン内で上詰め配置（CLUB/SCHOOLと統一） */
	.voice-hero__sp .page-hero__head {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		height: calc(100vh - var(--header-height-sp) - 40px - var(--section-pt-sp) * 2);
		height: calc(calc(var(--vh, 1vh) * 100) - var(--header-height-sp) - 40px - var(--section-pt-sp) * 2);
		justify-content: flex-start;
		margin-bottom: 0;
		gap: 0;
		padding-top: 0;
	}

	/* タイトルグループ（中央配置） */
	.voice-hero__sp-title-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		width: 100%;
	}

	.voice-hero__sp .page-hero__title {
		color: var(--color-white);
	}

	.voice-hero__sp .section-subtitle {
		color: var(--color-white) !important;
	}

	/* リード文（SP・下部左寄せ）: margin-top:autoで下部に押し出す（CLUBのsp-bottomと同方式） */
	.voice-archive__lead--sp {
		display: block;
		font-family: var(--font-ja);
		font-size: var(--page-catch-lead-sp); /* 18px */
		font-weight: 900;
		color: var(--color-white);
		text-align: left;
		margin: 0;
		margin-top: auto;
		width: 100%;
	}

	/* ─── 記事一覧 ─── */
	.voice-archive__list {
		display: block;
	}

	.voice-archive__list::before {
		display: none;
	}

	.voice-item {
		display: block;
		gap: 0;
		padding: 0;
	}

	.voice-item + .voice-item::before {
		display: none;
	}

	.voice-item + .voice-item {
		margin-top: 40px;
	}

	.voice-item__photo {
		width: 100%;
		max-width: none;
	}

	.voice-item__img {
		max-height: none;
		aspect-ratio: 4 / 3;
		object-position: center 30%;
	}

	.voice-item__photo-placeholder {
		aspect-ratio: 4 / 3;
	}

	/* Q&Aエリア：オフホワイト背景・フルwidth */
	.voice-item__body {
		display: block;
		background-color: var(--color-offwhite);
	}

	/* プロフィール：オレンジ背景・フルwidth */
	.voice-item__profile {
		display: block;
		width: 100%;
		max-width: none;
		background-color: var(--color-orange);
		padding: 24px 16px;
		text-align: left;
	}

	.voice-item__profile::after {
		display: none;
	}

	.voice-item__affiliation {
		font-size: var(--page-h2-sp); /* 20px */
		font-weight: 700;
		color: var(--color-white);
	}

	.voice-item__period {
		font-size: var(--page-body-sp); /* 16px */
		font-weight: 400;
		color: var(--color-white);
	}

	.voice-item__name {
		font-size: var(--page-h2-sp); /* 20px */
		color: var(--color-white);
		margin-top: 8px;
	}

	/* Q&Aエリア */
	.voice-item__qa {
		display: block;
	}

	/* Q&Aブロック */
	.voice-item__qa-block {
		padding: 20px 0;
		gap: 12px;
	}

	.voice-item__qa-block--hidden {
		display: none;
	}

	.voice-item__qa-block.is-open {
		display: flex;
	}

	.voice-item__qa-q {
		font-size: var(--page-h3-sp); /* 18px */
	}

	.voice-item__qa-a {
		font-size: var(--page-body-sp); /* 16px */
		margin: 0;
	}

	.voice-item__qa-a p {
		margin: 0 0 1em;
	}

	.voice-item__qa-a p:last-child {
		margin-bottom: 0;
	}

	/* 9行でクランプ（10行目以降を省略） */
	.voice-item__qa-a--clamp {
		display: -webkit-box;
		-webkit-line-clamp: 9;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 展開時はクランプ解除 */
	.voice-item__qa-a--clamp.is-open {
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	/* VIEW MOREボタン（btn-viewmore SP準拠：下線テキストリンクスタイル） */
	.voice-item__view-more {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: auto;
		height: auto;
		padding: 0 0 4px;
		background: none;
		border: none;
		border-bottom: 1px solid var(--color-black);
		font-family: var(--font-ja);
		font-size: var(--text-sm-size); /* 14px */
		font-weight: 700;
		letter-spacing: 0;
		color: var(--color-black);
		cursor: pointer;
		align-self: flex-end;
		margin-top: 20px;
		margin-bottom: 32px;
	}

	.voice-item__view-more-icon {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--color-black);
		border-bottom: 2px solid var(--color-black);
		transform: rotate(45deg);
		transition: transform 0.3s ease;
		margin-bottom: 3px;
	}

	.voice-item__view-more[aria-expanded="true"] .voice-item__view-more-icon {
		transform: rotate(-135deg);
		margin-bottom: -3px;
	}
}