@charset "UTF-8";
/* =========================================================================
   common.css
   サイト全体の設計値（カラー・フォント・フォントサイズ・余白）とリセット。
   値を変えるときはここだけを編集し、style.css 側では var() で参照する。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------------------- */
:root {
	/* カラー */
	--color-black: #181717;            /* ロゴ黒。黒セクション背景 */
	--color-white: #ffffff;
	--color-gray-50: #f7f7f6;
	--color-gray-100: #ededec;
	--color-gray-200: #dededc;
	--color-gray-300: #c7c7c4;
	--color-gray-400: #a9a9a6;
	--color-gray-500: #8b8b88;
	--color-gray-600: #6e6e6b;
	--color-gray-700: #4a4a47;
	--color-gray-800: #2e2e2c;
	--color-accent: #4b6353;           /* テーマカラー（ユーカリグリーン） */
	--color-accent-dark: #384e40;
	--color-on-black-muted: #d6d6d3;   /* 黒地上の補助テキスト 12.3:1 */
	--color-on-green-muted: #e2ede6;   /* 緑地上の補助テキスト 5.45:1 */
	--color-placeholder: #d4d4d1;      /* 画像未設定時のグレー */
	--color-hero-panel: rgba(24, 23, 23, 0.82);
	--color-mosaic-overlay: rgba(75, 99, 83, 0.9);

	/* フォント */
	--font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
	--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-en: "Inter", var(--font-sans);

	/* フォントサイズ（固定） */
	--fs-11: 11px;
	--fs-12: 12px;
	--fs-13: 13px;
	--fs-14: 14px;
	--fs-15: 15px;
	--fs-16: 16px;
	--fs-20: 20px;
	--fs-22: 22px;
	--fs-26: 26px;

	/* フォントサイズ（可変） */
	--fs-hero: clamp(30px, 4.4vw, 56px);        /* ヒーローのキャッチ */
	--fs-hero-mark: clamp(64px, 7.8vw, 124px);  /* ヒーローの英字透かし */
	--fs-head-en: clamp(40px, 6vw, 80px);       /* 各セクションの英字見出し */
	--fs-page-title: clamp(24px, 3.2vw, 38px);  /* 下層ページの h1（見出し帯） */
	--fs-page-en: clamp(36px, 5.4vw, 72px);     /* 下層ページの見出し帯の英字 */
	--fs-mosaic: clamp(20px, 3vw, 34px);        /* 写真帯の一文 */
	--fs-statement: clamp(28px, 5vw, 64px);     /* フッター手前の英文 */

	/* 行間 */
	--lh-tight: 1.3;
	--lh-heading: 1.6;
	--lh-body: 1.8;

	/* 余白 */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;

	/* レイアウト */
	--container-max: 1280px;
	--gutter: var(--space-3);
	--radius-sm: 2px;
	--transition: 0.15s ease;
}

@media (min-width: 768px) {
	:root {
		--gutter: var(--space-5);
	}
}

/* -------------------------------------------------------------------------
   2. リセット
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   3. ベース
   ------------------------------------------------------------------------- */
body {
	font-family: var(--font-sans);
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--color-black);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

.l-container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.u-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;
}