/* ==========================================================================
   tokens.css — デザイントークン（値の正本）。色・書体・余白・幅・角丸・影・動き。
   値を変える時はここだけを直す。各CSSでは数値を直書きせず var(--ep-*) を使う。
   値の基準: 2026-10-17 のトップ仮組み（採用案）を 1440px 幅で実測した値
   ブレークポイント（メディアクエリには変数が使えないので数値で書く）:
     PC        : 1024px 以上（デザイン基準 1440）
     タブレット : 768〜1023px（基準 768）
     スマホ    : 767px 以下（基準 390）
   ========================================================================== */

:root {
	/* ---- 色（白・ink・深緑の3系統だけ。ADR: 色を増やさない） ---- */
	--ep-color-bg: #ffffff;
	--ep-color-surface: #f6f5f1;          /* 面の淡色（白基調の中の区切り） */
	--ep-color-ink: #111c26;              /* 文字 */
	--ep-color-ink-sub: #53606b;          /* 補助文字（日付・注記） */
	--ep-color-accent: #1f4d3a;           /* アクセント（ボタン・番号・リンク・強調だけ） */
	--ep-color-accent-hover: #2b6a50;     /* 主ボタンのホバー＝アクセントと同じ色相155°・彩度43%のまま明度だけ 21→29%（10/18 ヤヤ） */
	--ep-color-on-dark: #ffffff;          /* 写真・濃色の上の文字 */
	--ep-color-line: rgba(17, 28, 38, 0.14);       /* 罫線 */
	--ep-color-line-strong: rgba(17, 28, 38, 0.32);
	--ep-color-line-on-dark: rgba(255, 255, 255, 0.7);
	--ep-color-accent-soft: rgba(31, 77, 58, 0.08); /* アクセントの淡い面（マーカー・選択中タブ） */
	--ep-overlay-accent: rgba(31, 77, 58, 0.62);    /* 写真帯の重ね色（深緑） */
	--ep-overlay-ink: rgba(17, 28, 38, 0.5);        /* 写真帯の重ね色（墨） */
	--ep-overlay-hero: rgba(17, 28, 38, 0.3);       /* FV の重ね色 */
	--ep-overlay-footer: rgba(17, 28, 38, 0.38);

	/* ---- 書体 ---- */
	--ep-font-base: "Arimo", "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", sans-serif;
	--ep-font-latin: "Arimo", Arial, sans-serif;
	--ep-weight-regular: 400;
	--ep-weight-medium: 500;
	--ep-weight-bold: 600;

	/* 文字サイズ（121型の実測値を段にしたもの） */
	--ep-fs-2xs: 12px;   /* 小ラベル・サイドボタン */
	--ep-fs-xs: 14px;    /* 日付・注記・カード説明 */
	--ep-fs-sm: 16px;    /* 本文の基準・ナビ・ボタン */
	--ep-fs-md: 18px;    /* 縦書きの本文・カード見出し */
	--ep-fs-lg: 20px;    /* CTA 見出し・小見出し */
	--ep-fs-xl: 24px;    /* 下層の h3 */
	--ep-fs-2xl: 32px;   /* FV キャッチ・中見出し（縦） */
	--ep-fs-3xl: 40px;   /* 下層ページの h1 */
	--ep-fs-display: 62px; /* 縦書きの大見出し（2〜3字。121「住まう」「働く」「知る」） */
	--ep-fs-display-m: 56px; /* 同 4字（メディア・事業内容）。字数が多いほど1列が長くなるので段を下げる（10/18） */
	--ep-fs-display-l: 50px; /* 同 5字以上（EIPについて） */

	--ep-lh-tight: 1.4;
	--ep-lh-base: 1.8;
	--ep-lh-relaxed: 2;
	--ep-lh-vertical: 2.8;  /* 縦書き本文 18px / 50.4px */
	--ep-ls-base: 0.04em;
	--ep-ls-wide: 0.12em;

	/* ---- 余白（121型の実測値を段にしたもの） ---- */
	--ep-space-3xs: 5px;
	--ep-space-2xs: 10px;
	--ep-space-xs: 15px;
	--ep-space-s: 20px;
	--ep-space-m: 25px;
	--ep-space-l: 40px;
	--ep-space-xl: 70px;
	--ep-space-2xl: 100px;
	--ep-space-3xl: 120px;
	--ep-space-section: var(--ep-space-3xl);  /* セクション上下 */

	/* ---- 幅 ---- */
	--ep-width-content: 1100px;  /* 本文コンテナ（121型 inner） */
	--ep-width-wide: 1240px;     /* 広いコンテナ（事業内容 2×2＋見出し列） */
	--ep-width-narrow: 880px;    /* 表・お知らせ一覧・フォーム */
	--ep-width-prose: 760px;     /* 記事本文 */
	--ep-gutter: 40px;           /* 画面端の余白 */
	--ep-frame-inset: 100px;     /* FV・写真帯の左右の切り抜き余白 */
	--ep-header-height: 100px;   /* 121: #header 100px（1201px〜）／60px（〜1200px） */

	/* ---- 角丸 ---- */
	--ep-radius-s: 5px;     /* 小ボタン・タグ */
	--ep-radius-m: 7px;     /* カード画像 */
	--ep-radius-l: 10px;    /* サムネ・CTA カード */
	--ep-radius-xl: 15px;   /* FV・ギャラリー・写真帯の切り抜き */
	--ep-radius-pill: 999px;

	/* ---- 影（白基調なので控えめに。基本は線で区切り、影は浮かせたい物だけ） ---- */
	--ep-shadow-s: 0 1px 2px rgba(17, 28, 38, 0.06);
	--ep-shadow-m: 0 8px 24px rgba(17, 28, 38, 0.08);
	--ep-shadow-header: 0 1px 0 var(--ep-color-line);

	/* ---- 動き ---- */
	--ep-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ep-duration-fast: 0.25s; /* 121: リンク・ボタンの色 0.25s ease */
	--ep-duration-base: 0.4s;
	--ep-duration-slow: 0.9s;
	/* 出現・写真帯・FV の動き（121デモの実測値に合わせる・10/18） */
	--ep-reveal-distance: 50px;          /* 121: top 50px → 0 */
	--ep-reveal-fade: 0.7s;              /* 121: opacity 0.7s */
	--ep-reveal-move: 1s;                /* 121: top 1.0s */
	--ep-band-inset-start: 200px;        /* 121: 写真帯の切り抜き inset(200px round 15px) → 全幅（スマホ 100px） */

	/* ---- 重なり順 ---- */
	--ep-z-header: 100;
	--ep-z-drawer: 90;
}

/* ヘッダーの高さ: 121 と同じく 1200px 以下は 60（121: @media (max-width:1200px) { #header { height:60px } }・ヤヤ 10/18「縦に広すぎる」）。
   FV の上端・ドロワーの上端・アンカーの止まる位置はこの変数（と main.js の実測）に追従する */
@media (max-width: 1200px) {
	:root {
		--ep-header-height: 60px;
	}
}

/* PC の狭い幅（1024〜1199）: 大見出しを 0.9 倍 */
@media (max-width: 1199px) {
	:root {
		--ep-fs-display: 56px;
		--ep-fs-display-m: 50px;
		--ep-fs-display-l: 45px;
	}
}

/* タブレット */
@media (max-width: 1023px) {
	:root {
		--ep-fs-display: 48px;
		--ep-fs-display-m: 44px;
		--ep-fs-display-l: 40px;
		--ep-fs-3xl: 34px;
		--ep-space-section: 96px;
		--ep-gutter: 32px;
		--ep-frame-inset: 32px;
	}
}

/* スマホ */
@media (max-width: 767px) {
	:root {
		--ep-fs-display: 40px;
		--ep-fs-display-m: 38px;
		--ep-fs-display-l: 36px;
		--ep-fs-2xl: 24px;
		--ep-fs-3xl: 28px;
		--ep-fs-xl: 20px;
		--ep-fs-md: 16px;
		--ep-lh-vertical: 2.3;
		--ep-space-section: 56px; /* 10/18 72→56（121 は 50。間延びを詰める） */
		--ep-space-3xl: 56px;
		--ep-space-2xl: 56px;
		--ep-space-xl: 48px;
		--ep-gutter: 20px;
		--ep-frame-inset: 20px;
		--ep-band-inset-start: 100px;
	}
}