/* ============================================================
   PRIME ESSENCE — Base Styles
   最小限のリセット、基本タイポグラフィ、レスポンシブ画像、
   アクセシビリティ(フォーカス状態・キーボード操作)を定義。
   写真が主役のため、装飾的なCSSは極力足さない。
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--pe-font-body);
	font-size: var(--pe-fs-base);
	line-height: var(--pe-lh-base);
	color: var(--pe-color-body); /* 本文はダークグレー(最終調整: 可読性優先) */
	background-color: var(--pe-color-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 見出し: 英字はCormorant Garamond、日本語はNoto Serif JP
   (両方併記される場合はHTML側でspan分けする想定)
   最終調整: 見出しのみブランドカラー(Chocolate Brown)を維持する */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--pe-space-sm);
	font-family: var(--pe-font-heading-jp);
	font-weight: 600;
	line-height: var(--pe-lh-tight);
	letter-spacing: var(--pe-ls-heading);
	color: var(--pe-color-heading);
}

h1 { font-size: var(--pe-fs-2xl); }
h2 { font-size: var(--pe-fs-xl); }
h3 { font-size: var(--pe-fs-lg); }
h4, h5, h6 { font-size: var(--pe-fs-md); }

@media (min-width: 768px) {
	h1 { font-size: var(--pe-fs-3xl); }
	h2 { font-size: var(--pe-fs-2xl); }
}

/* ロゴ・英字見出し用ユーティリティ */
.pe-font-en {
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	letter-spacing: 0.04em;
}

p {
	margin: 0 0 var(--pe-space-md);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	margin: 0;
	padding-left: 1.2em;
}

/* レスポンシブ画像(写真が主役のため必ず親要素に収める) */
img,
picture,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

img {
	object-fit: cover;
}

button {
	font-family: inherit;
	font-size: inherit;
}

/* アクセシビリティ: キーボード操作時のフォーカスを明確に表示
   (マウス操作時は控えめに、キーボード操作時のみ強調) */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--pe-color-accent);
	outline-offset: 2px;
}

/* スクリーンリーダー専用テキスト */
.pe-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* スキップリンク(キーボード操作でメインコンテンツへ直接移動) */
.pe-skip-link {
	position: absolute;
	top: -48px;
	left: var(--pe-space-sm);
	z-index: 1000;
	background-color: var(--pe-color-text);
	color: var(--pe-color-base);
	padding: 10px 20px;
	border-radius: var(--pe-radius-sm);
	transition: top var(--pe-transition-fast);
}

.pe-skip-link:focus {
	top: var(--pe-space-sm);
}

/* 固定ヘッダー分のオフセット(Heroがなく、ヘッダーが最初から不透明なページ用) */
.pe-page-offset {
	padding-top: 64px;
}

@media (min-width: 768px) {
	.pe-page-offset {
		padding-top: 80px;
	}
}

/* コンテナ */
.pe-container {
	width: 100%;
	max-width: var(--pe-container-max);
	margin-inline: auto;
	padding-inline: var(--pe-container-padding);
}

/* セクション背景の切り替え(CLAUDE.md 9章: White / Soft Blush / Pink Beigeを穏やかに切り替え) */
.pe-section {
	padding-block: var(--pe-space-section-mobile);
}

@media (min-width: 768px) {
	.pe-section {
		padding-block: var(--pe-space-section-desktop);
	}
}

.pe-bg-base    { background-color: var(--pe-color-base); }
.pe-bg-soft    { background-color: var(--pe-color-bg-soft); }
.pe-bg-primary { background-color: var(--pe-color-primary); }
/* ブラッシュアップ追加(提案): base/softの中間の、ごくわずかな変化のためのトーン */
.pe-bg-whisper { background-color: var(--pe-color-bg-whisper); }