/* =========================================================
   デザイントークン

   配色・余白・タイポの基準値をここに集約している。
   個々のCSSに色を直接書かないこと。ここを変えればサイト全体が変わる。

   方針: ゴールド × 墨黒。ゴールドは面ではなく罫線や見出しの装飾に
   限って使い、箔押しのような上質感を出す。余白を広く取り情報密度を
   下げることで、格式のある国際見本市の印象と読みやすさを両立させる。
   ========================================================= */

:root {
	/* --- 基調 --- */
	--c-ink: #0B0B0B;
	/* 墨黒。純黒を避けて重さを抑える */
	--c-ink-soft: #181818;
	/* 本文 */
	/* 2026-08-20: #8A8378 は明るい地（#FAF9F6 / #F8F6F1）で 3.47〜3.56 しかなく、
	   本文サイズの補助テキストとしてAA(4.5:1)に届いていなかった。色味は保ったまま暗くする。
	   新しい値は 4.8〜5.2。暗い地に置いていた唯一の例（.visitor-label）は
	   地色が反転する場所なので color: inherit へ変更済み（components.css 末尾）。 */
	--c-muted: #736C62;
	/* 補足・注記 */

	/* --- 主色 --- */
	--c-gold: #B89545;
	--c-gold-deep: #C4A35A;
	/* ホバー・押下 */
	--c-gold-pale: #E8DFC8;
	/* 淡い面 */

	/* --- 地 --- */
	--c-bg: #FAF9F6;
	/* 乳白 */
	--c-surface: #FFFFFF;
	--c-surface-dark: #111111;
	--c-charcoal: #171717;
	--c-charcoal-2: #202020;
	--c-text-light: #F5F5F5;
	/* 暗い面 */
	--c-border: #E3DED4;
	--c-border-strong: #CFC6B6;

	/* --- 状態 --- */
	--c-link: var(--c-ink);
	--c-link-hover: var(--c-gold-deep);
	--c-disabled: #B5AFA6;

	/* --- 余白 ---
	   情報密度を下げるため、既存より一段広く取っている */
	--sp-xs: 8px;
	--sp-sm: 16px;
	--sp-md: 32px;
	--sp-lg: 64px;
	--sp-xl: 96px;
	--sp-2xl: 140px;

	/* --- 幅 --- */
	--w-content: 1600px;
	--w-text: 780px;

	/* --- タイポ --- */
	--ff-base: "Noto Sans JP", sans-serif;
	/* 見出しもゴシック。カンプは均一なストロークの角ゴシックで、
	   明朝は方向性が違う。太さと字間で格を出す */
	--ff-display: "Noto Serif JP", "Shippori Mincho B1", serif;
	/* 数字用の明朝。カンプのカウントダウンは縦横の太さの差が大きい
	   ハイコントラストのセリフ体で、見出しのゴシックと使い分けている */
	--ff-numeral: "Cormorant Garamond", "Noto Serif JP", serif;

	/* 全体に小さすぎたため一段上げ、見出しは画面幅に応じて伸びるようにした */
	--fs-xs: 0.875rem;
	--fs-sm: 1rem;
	--fs-md: 1.0625rem;
	--fs-lg: 1.375rem;
	--fs-xl: clamp(1.75rem, 2.8vw, 2.5rem);
	--fs-2xl: clamp(2.4rem, 4.2vw, 3.6rem);
	--fs-3xl: clamp(2.6rem, 5.6vw, 5.5rem);
	--lh-base: 2;
	--lh-tight: 1.5;

	/* --- 装飾 --- */
	--rule-gold: 1px solid var(--c-gold);
	--radius: 2px;
	--shadow-soft: 0 2px 16px rgba(20, 17, 15, .06);
	--transition: .25s ease;
}

/* =========================================================
   共通の下地
   ========================================================= */

body {
	background-color: var(--c-bg);
	color: var(--c-ink-soft);
	font-family: var(--ff-base);
	line-height: var(--lh-base);
}

a {
	color: var(--c-link);
	transition: color var(--transition);
}

a:hover {
	color: var(--c-link-hover);
}

/* =========================================================
   セクション見出し

   ゴールドは細い罫線として使う。面で塗らない。
   ========================================================= */

.section__title {
	text-align: center;
	margin-bottom: var(--sp-lg);
}

.section__title p {
	font-size: var(--fs-sm);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-gold-deep);
	margin-bottom: var(--sp-xs);
}

.section__title h2 {
	font-size: var(--fs-xl);
	line-height: var(--lh-tight);
	color: var(--c-ink);
	position: relative;
	display: inline-block;
	padding-bottom: var(--sp-sm);
}

.section__title h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background-color: var(--c-gold);
	margin: var(--sp-sm) auto 0;
}

.section-title {
	font-size: var(--fs-xl);
	line-height: var(--lh-tight);
	color: var(--c-ink);
	text-align: center;
	margin-bottom: var(--sp-md);
}

.sub-title {
	font-size: var(--fs-lg);
	color: var(--c-ink);
	text-align: center;
	margin-bottom: var(--sp-md);
}

.lead-text,
.title_txt {
	max-width: var(--w-text);
	margin: 0 auto;
	line-height: var(--lh-base);
}

.lead-text {
	text-align: center;
}

.note,
.info-table__note {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* =========================================================
   セクションの間隔
   ========================================================= */

.section {
	padding-top: var(--sp-xl);
	padding-bottom: var(--sp-xl);
}

@media screen and (max-width: 768px) {
	.section {
		padding-top: var(--sp-lg);
		padding-bottom: var(--sp-lg);
	}
}

/* 見出しは明朝で組む。本文はゴシックのまま可読性を優先する */
.section__title h2,
.section-title,
.sub-title,
.exhibit-group__title,
.firstview__text .font,
.mission-section h2,
.bk__text h1,
.bk__text h2,
.bk__text p,
.achievements__value,
.entry-band__label {
	font-family: var(--ff-display);
	font-weight: 900;
	letter-spacing: .04em;
}

.lead-text,
.title_txt {
	font-size: var(--fs-md);
	line-height: 2.1;
}