@charset "UTF-8";
/* =========================================================
   Design tokens — 拝啓 ナイチンゲール様
   Source: チラシ（表＝イラスト／裏＝情報面）の色・トーン
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

:root {
	/* —— Color (flyer) —— */
	/* 情報帯・ボタンの主色（裏チラシのティール） */
	--color-primary: #0a95a6;
	--color-primary-deep: #04647d;/* 公演タイトル帯（bg-title.svg）と同色 */
	--color-primary-dark: #1e3f48;
	--color-primary-soft: #5ca1af;
	--color-primary-mist: #a7ced1;

	/* イラスト空の青緑〜ミント */
	--color-sky: #69b3c3;
	--color-sky-deep: #557886;

	/* キャッチ（裏チラシ黄系）／温かみの桃ベージュ */
	--color-accent: #e6c84a;
	--color-accent-warm: #c4a090;
	--color-peach: #d4b4a8;

	/* ベース */
	--color-ink: #1a1a1a;
	--color-ink-soft: #4b4e4d;
	--color-paper: #f7f5f2;
	--color-white: #ffffff;
	--color-line: #c5d6da;

	/* セマンティック */
	--color-bg: var(--color-paper);
	--color-bg-band: var(--color-primary);
	--color-bg-hero-fallback: var(--color-sky);
	--color-text: var(--color-ink);
	--color-text-on-primary: var(--color-white);
	--color-text-muted: var(--color-ink-soft);
	--color-link: var(--color-primary-deep);
	--color-link-hover: var(--color-primary);
	--color-border: var(--color-line);

	/* —— Typography —— */
	/* 本文・ストーリー：文学的な明朝 */
	--font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
	/* UI・公演情報・ナビ：すっきりしたゴシック */
	--font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	/* タイトルロゴ未着時の仮ディスプレイ（本番は画像ロゴ優先） */
	--font-display: var(--font-serif);

	--fs-body: 1rem;
	--fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
	--fs-h2: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
	--fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
	--lh-body: 1.85;
	--lh-tight: 1.45;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* —— Layout / effects —— */
	--radius-sm: 2px;
	--radius-md: 6px;
	--space-section: clamp(4.5rem, 15vh, 10rem);
	--shadow-soft: 0 12px 40px rgba(30, 63, 72, 0.12);

	/* メインビジュアル（現状の配置） */
	--img-main: url("/dear-nightingale/images/mainpict.webp");
	/* ページ背景（シームレス・1600x1000） */
	--img-bg: url("/dear-nightingale/images/bg06.jpg?v=20260807j");
}

/* 基盤への軽い適用（本格差し替え前の土台） */
html {
	/*
		青空テクスチャ（スクロール連動）。
		1画面分の高さでタイルし、縦横とも repeat
	*/
	--bg-sky-size: auto 100vh;
	background-color: #059ab0;
	background-image: var(--img-bg);
	background-repeat: repeat;
	background-position: center top;
	background-size: var(--bg-sky-size);
	background-attachment: scroll;
}
@supports (height: 100dvh) {
	html {
		--bg-sky-size: auto 100dvh;
		background-size: var(--bg-sky-size);
	}
}

body {
	font-family: var(--font-serif);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	color: var(--color-text);
	/* 空テクスチャは html 側。body で塗りつぶさない */
	background-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-ink);
}

.font-sans,
nav,
.section.info,
.ticket,
.btn,
.menubar {
	font-family: var(--font-sans);
}

a:link,
a:visited {
	color: var(--color-link);
}

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