/* ============================================================
   PAGE BASE — 下層ページ共通土台（TOP ライト/水彩 世界観）
   style.css の後・各 page-〇〇.css の前に読み込む。
   全下層ページで共通のプリミティブ（ページヘッダー・見出し・
   フェード・水彩）を自己完結で定義する。ページ固有は page-〇〇.css。
   ============================================================ */

/* ── トークン（グローバル :root は既にライト。不足分を補う）── */
:root {
	--bg:         #f5f4f0;
	--green:      #007d6e;
	--accent:     #007d6e;
	--pad:        clamp(24px, 5vw, 80px);
	/* 和文セリフ見出しに統一（Noto Serif JP は全ページ読込済み）*/
	--font-serif: 'Noto Serif JP', 'Cormorant Garamond', serif;
}

/* ── PAGE HEADER（ph-* ヒーロー：about 等が使用）── */
/* #sec_head の箱組みの上書きは各ページCSSで（ページごとにヘッダー構造が違うため）*/
.ph-bg {
	position: absolute; inset: 0;
	background: #f5f4f0 url('../img/bg_watercolor.png') center top / cover no-repeat;
}
.ph-bg::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(245,244,240,0) 40%, rgba(245,244,240,0.55) 100%);
	pointer-events: none;
}
.ph-bg-word {
	position: absolute; right: -2vw; bottom: -6vh;
	font-family: var(--font-serif);
	font-size: clamp(120px, 22vw, 300px);
	font-weight: 300;
	color: rgba(0,0,0,0.035);
	line-height: 1; letter-spacing: -0.04em;
	pointer-events: none; user-select: none;
}
.ph-vline {
	position: absolute; top: 0; bottom: 0;
	width: 0.5px; background: var(--line-2);
}
.ph-vline:first-of-type { left: var(--pad); }
.ph-vline:last-of-type  { right: var(--pad); }
.ph-inner {
	position: relative; z-index: 2;
	width: 100%; max-width: 1400px;
	margin: 0 auto; padding: 0 var(--pad) 52px;
}
.ph-eyebrow {
	display: flex; align-items: center; gap: 12px;
	font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 16px;
	opacity: 0; animation: phFadeUp .8s .2s ease forwards;
}
.ph-eyebrow::before {
	content: ''; display: block;
	width: 32px; height: 0.5px; background: var(--accent); flex-shrink: 0;
}
.ph-title {
	font-family: var(--font-serif);
	font-size: clamp(42px, 7vw, 96px);
	font-weight: 300; color: var(--text);
	line-height: 0.95; letter-spacing: -0.02em;
	opacity: 0; animation: phFadeUp .9s .4s ease forwards;
}
.ph-title-sub {
	display: block;
	font-size: clamp(14px, 1.5vw, 18px);
	font-weight: 300; color: var(--text-3);
	letter-spacing: 0.15em; margin-top: 10px;
	font-style: normal;
	font-family: 'Noto Sans JP', sans-serif;
}
@keyframes phFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── 共通セクション見出し ── */
.sec-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 12px;
}
.sec-eyebrow::before {
	content: ''; width: 20px; height: 0.5px;
	background: var(--accent); flex-shrink: 0;
}
.sec-title {
	font-family: var(--font-serif);
	font-size: clamp(22px, 1.8vw, 28px);
	font-weight: 500; color: var(--text);
	line-height: 1.4; letter-spacing: 0.03em;
	margin-bottom: 28px;
}
.sec-desc {
	font-size: 16px; color: var(--text-2);
	line-height: 2.1; font-weight: 300;
	border-left: 0.5px solid var(--line-2);
	padding-left: 18px; max-width: 680px;
}
.sec-desc + .sec-desc { margin-top: 20px; }
.sec-sign {
	font-size: 14px; color: var(--text-3);
	text-align: right; margin-top: 24px; line-height: 1.9;
}

/* ── 測量グリッド（ダーク演出）は下層ライトでは非表示 ── */
.survey-grid { display: none; }

/* ── 画像は角丸なし（フラットな写真面）── */
.msg-img,
.msg-portrait { border-radius: 0; }