/* ==========================================================================
   home.css — トップページ（heroセクション）
   ========================================================================== */

/* ---------- hero ---------- */
.hero {
	padding-block: var(--space-3xl);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3xl);
	align-items: start;
}

/* ---------- 左カラム: ビジュアル ---------- */
.hero__visual {
	display: flex;
	justify-content: center;
}

.hero__logo {
	width: 100%;
	max-width: 480px;
	height: auto;
	box-sizing: content-box;
	padding: 50px 30px;
	background-color: #fff;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.05);
}

/* ---------- 右カラム: NEWS ---------- */
.hero__news {
	padding-top: var(--space-sm);
}

.hero__news-heading {
	font-size: 3rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.05em;
	margin-bottom: var(--space-lg);
}

/* --- ニュース一覧 --- */
.hero__news-list {
	border-top: 1px solid var(--color-lightgray);
}

.hero__news-item {
	border-bottom: 1px solid var(--color-lightgray);
}

.hero__news-link {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 var(--space-lg);
	align-items: baseline;
	padding-block: var(--space-md);
	transition: opacity 0.2s ease;
}

.hero__news-link:hover {
	opacity: 0.6;
}

/* meta: 日付 + カテゴリ */
.hero__news-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 5.5em;
}

.hero__news-date {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
	letter-spacing: 0.02em;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid #aaaaaa;
}

.hero__news-cat {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
}

.hero__news-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
}

/* --- もっと見るボタン --- */
.hero__news-more {
	margin-top: var(--space-xl);
	text-align: center;
}

/* ==========================================================================
   section-01 — 日本の自然観を再考し、未来へ進む
   ========================================================================== */
.section-01 {
	padding-block: var(--space-3xl);
	background-image: url("../../images/home/section-01-bg.svg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 80% auto;
}

/* --- 見出し --- */
.section-01__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.section-01__heading {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

/* --- コンセプト文 --- */
.section-01__concept p {
	margin-bottom: var(--space-md);
	line-height: 2;
}

.section-01__concept p:last-child {
	margin-bottom: 0;
}

/* --- 下段: 鳥瞰パース＋地図 --- */
.section-01__images {
	margin-top: var(--space-3xl);
	display: grid;
	gap: var(--space-3xl);
}

.section-01__images img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   section-02 — 政府出展の見所
   ========================================================================== */
.section-02 {
	padding-block: var(--space-3xl);
}

/* --- 見出し --- */
.section-02__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.section-02__heading {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

/* --- グループ（屋内/屋外） --- */
.section-02__group {
	margin-bottom: var(--space-3xl);
}

.section-02__group:last-child {
	margin-bottom: 0;
}

.section-02__group-heading {
	display: inline-block;
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	color: #ffffff;
	background-color: var(--color-accent);
	padding: 0.5em 1.5em;
	border-radius: 8px 8px 0 0;
	margin-bottom: 0;
	margin-left: var(--space-xl);
}

/* --- カード --- */
.section-02__card {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-3xl);
	background-color: var(--color-bg-glass);
	border-radius: 0 12px 12px 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	padding: var(--space-2xl) var(--space-xl);
}

.section-02__card:last-child {
	margin-bottom: 0;
}

/* --- カード内サブセクション --- */
.section-02__sub {
	margin-bottom: var(--space-2xl);
}

.carousel-dots + .section-02__sub {
	margin-top: var(--space-3xl);
}

.section-02__sub:last-child {
	margin-bottom: 0;
}

.section-02__sub-title {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	text-align: center;
	margin-bottom: var(--space-lg);
	line-height: 1.5;
}

.section-02__card-title {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	text-align: center;
	margin-bottom: var(--space-lg);
	line-height: 1.5;
}

.section-02__card-subtitle {
	font-size: 1.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	text-align: center;
	margin-bottom: var(--space-xl);
	letter-spacing: 0.05em;
}

.section-02__card-text {
	max-width: 800px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-xl);
}

.section-02__card-text p {
	font-size: var(--font-size-base);
	line-height: 2;
	margin-bottom: var(--space-sm);
}

.section-02__card-text p:last-child {
	margin-bottom: 0;
}

.section-02__card-note {
	font-size: var(--font-size-sm);
	color: #767676;
}

.section-02__card-kicker {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.section-02__card-kicker:first-child {
	margin-top: 0;
}

/* --- カード内ボタン --- */
.section-02__card-action {
	text-align: center;
	margin-bottom: var(--space-xl);
}

/* --- 画像：横並び（PC） --- */
.section-02__card-images--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}

.section-02__card-images img {
	width: 100%;
	height: auto;
}

/* ドット：PCでは非表示 */
.carousel-dots {
	display: none;
}

/* ==========================================================================
   section-03 — ディレクター紹介
   ========================================================================== */
.section-03 {
	padding-block: var(--space-3xl);
}

/* --- 見出し --- */
.section-03__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.section-03__heading {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

/* --- カードグリッド --- */
.section-03__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3xl) var(--space-xl);
	justify-items: center;
}

/* --- カード --- */
.section-03__card {
	max-width: 700px;
	background-color: var(--color-bg-glass);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.05);
	padding: 30px 15px;
}

.section-03__card-upper {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-lg);
}

/* --- 写真 --- */
.section-03__card-photo img {
	width: 240px;
	height: 240px;
	border-radius: 30px;
	object-fit: cover;
}

/* --- テキスト --- */
.section-03__card-name {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	line-height: 1.4;
}

.section-03__card-name-en {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: #767676;
	letter-spacing: 0.04em;
	margin-top: 0.25rem;
}

/* --- アコーディオン（PC: 常時展開、summary非表示） --- */
.section-03__card-details {
	margin-top: var(--space-md);
}

.section-03__card-toggle {
	display: none;
}

.section-03__card-profile-heading {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-sm);
}

.section-03__card-role {
	font-size: 1.375rem;
	font-weight: var(--font-weight-bold);
	color: #888888;
	margin-top: var(--space-xs);
}

.section-03__card-affiliations {
	list-style: none;
	padding-left: 0;
	margin-top: var(--space-xs);
}

.section-03__card-affiliations li {
	font-size: var(--font-size-base);
	line-height: 1.8;
	color: var(--color-black);
}

.section-03__card-desc {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: 1.8;
	margin-top: 0;
}

.section-03__card-career {
	margin-top: var(--space-md);
}

.section-03__card-career-heading {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-sm);
}

.section-03__card-career-list {
	list-style: disc;
	padding-left: 1.5em;
}

.section-03__card-career-list li {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: 1.8;
}

/* ==========================================================================
   section-04 — 開催概要
   ========================================================================== */
.section-04 {
	padding-block: var(--space-3xl);
}

/* --- 見出し --- */
.section-04__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.section-04__heading {
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

/* --- 開催情報 --- */
.section-04__info {
	max-width: 700px;
	margin-inline: auto;
	font-size: var(--font-size-base);
}

.section-04__info-item {
	display: flex;
	gap: var(--space-xs);
	line-height: 1.8;
}

.section-04__info-item dt {
	flex-shrink: 0;
	white-space: nowrap;
}

.section-04__info-item .separator {
	margin-left: 0.1em;
}


/* --- CTAボタン --- */
.section-04__action {
	margin-top: var(--space-xl);
	text-align: center;
}

/* ==========================================================================
   タブレット（～1023px）
   ========================================================================== */
@media (max-width: 1023px) {
	.hero {
		padding-block: var(--space-2xl);
	}

	.hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
	}

	.hero__logo {
		max-width: 360px;
		padding: 40px 20px;
	}

	/* section-01 */
	.section-01 {
		padding-block: var(--space-2xl);
	}

	.section-01__heading {
		font-size: 2rem;
	}

	/* section-02 */
	.section-02 {
		padding-block: var(--space-2xl);
	}

	.section-02__heading {
		font-size: 2rem;
	}

	/* section-03 */
	.section-03 {
		padding-block: var(--space-2xl);
	}

	.section-03__heading {
		font-size: 2rem;
	}

	.section-03__grid {
		grid-template-columns: 1fr;
	}

	/* section-04 */
	.section-04 {
		padding-block: var(--space-2xl);
	}

	.section-04__heading {
		font-size: 2rem;
	}
}

/* ==========================================================================
   スマホ（～767px）
   ========================================================================== */
@media (max-width: 767px) {
	.hero {
		padding-block: var(--space-xl);
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.hero__visual {
		justify-content: center;
	}

	.hero__logo {
		max-width: 260px;
		padding: 24px 12px;
	}

	.hero__news-link {
		grid-template-columns: 1fr;
		gap: var(--space-xs);
	}

	.hero__news-meta {
		flex-direction: row;
		align-items: center;
		gap: var(--space-xs);
	}

	/* section-01 */
	.section-01 {
		padding-block: var(--space-xl);
	}

	.section-01__header {
		margin-bottom: var(--space-2xl);
	}

	.section-01__heading {
		font-size: 1.625rem;
	}

	.section-01__images {
		margin-top: var(--space-2xl);
		display: block;
		overflow: hidden;
	}

	.carousel-track {
		display: flex;
		transition: transform 0.5s ease;
	}

	.carousel-track > img {
		flex: 0 0 auto;
		height: auto;
	}

	/* section-02 */
	.section-02 {
		padding-block: var(--space-xl);
	}

	.section-02__header {
		margin-bottom: var(--space-2xl);
	}

	.section-02__heading {
		font-size: 1.625rem;
	}

	.section-02__sub-title,
	.section-02__card-title {
		font-size: 1.5rem;
	}

	.section-02__group {
		text-align: center;
	}

	.section-02__card {
		text-align: left;
		padding-inline: var(--space-md);
	}

	.section-02__card-text {
		text-align: left;
	}

	.section-02__card-kicker {
		text-align: center;
	}

	.section-02__group-heading {
		margin-left: 0;
	}

	.section-02__card-images--row {
		display: block;
		overflow: hidden;
	}

	/* ドットインジケーター */
	.carousel-dots {
		display: flex;
		justify-content: center;
		gap: var(--space-xs);
		margin-top: var(--space-sm);
	}

	.carousel-dots__dot {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: none;
		padding: 0;
		background: var(--color-lightgray);
		border: 1.5px solid #929292;
		transition: background 0.2s;
	}

	.carousel-dots__dot[aria-selected="true"] {
		background: var(--color-accent);
		border-color: var(--color-accent);
	}

	/* section-03 */
	.section-03 {
		padding-block: var(--space-xl);
	}

	.section-03__header {
		margin-bottom: var(--space-2xl);
	}

	.section-03__heading {
		font-size: 1.625rem;
	}

	.section-03__card {
		width: 100%;
	}

	.section-03__card-upper {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.section-03__card-photo img {
		width: 180px;
		height: 180px;
	}

	.section-03__card-name {
		font-size: 1.5rem;
	}

	.section-03__card-role {
		font-size: 1.125rem;
	}

	.section-03__card-affiliations {
		text-align: left;
	}

	.section-03__card-desc {
		font-size: var(--font-size-base);
		text-align: left;
	}

	/* アコーディオン：スマホ時にsummary表示・閉じた状態 */
	.section-03__card-details {
		margin-top: var(--space-sm);
	}

	.section-03__card-details:not([open]) .section-03__card-desc,
	.section-03__card-details:not([open]) .section-03__card-career {
		display: none;
	}

	.section-03__card-toggle {
		display: block;
		cursor: pointer;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-bold);
		color: var(--color-accent);
		padding: var(--space-xs) var(--space-sm);
		border: 1px solid var(--color-accent);
		border-radius: 4px;
		text-align: center;
		list-style: none;
	}

	.section-03__card-toggle::-webkit-details-marker {
		display: none;
	}

	.section-03__card-details[open] > .section-03__card-toggle {
		margin-bottom: var(--space-md);
	}

	.section-03__card-career-list {
		text-align: left;
	}

	/* section-04 */
	.section-04 {
		padding-block: var(--space-xl);
	}

	.section-04__header {
		margin-bottom: var(--space-2xl);
	}

	.section-04__heading {
		font-size: 1.625rem;
	}

	.section-04__info-item {
		flex-direction: column;
		gap: 0;
		font-size: var(--font-size-base);
		margin-bottom: var(--space-sm);
	}

	.section-04__info-item:last-child {
		margin-bottom: 0;
	}

	.section-04__info-item dt {
		font-weight: var(--font-weight-bold);
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}

	.section-04__info-item dt::after {
		content: "";
	}
}