/* ==========================================================================
   tokens.css — デザイントークン（Figma「DESIGN GUIDELINE」647:8658 と1:1）
   値の出どころは docs/figma-cache/guideline.md
   ========================================================================== */

/*
 * ブレイクポイント（min-width基準・モバイルファースト。この4つだけを使う）
 *   SP      〜767px   : 既定（メディアクエリなし）
 *   TAB     768px〜   : @media (min-width: 768px)
 *   PC      1100px〜  : @media (min-width: 1100px)
 *   PC-wide 1280px〜  : @media (min-width: 1280px) ※ヘッダー専用
 * CSSのカスタムプロパティはメディアクエリに使えないため、値はコメントで管理する
 */

:root {
	/* ---- 色 ---- */
	--color-text: #1c1b18;            /* text/primary 本文 */
	--color-brand: #503018;           /* accent ブランド・CTA */
	--color-muted: #5a554a;           /* text/muted サブラベル・注記 */
	--color-bg-base: #faf8f5;         /* bg/base ベース */
	--color-bg-mid: #f2efe9;          /* 中間 */
	--color-bg-divider: #e0ddd7;      /* カード区切り */
	--color-white: #fff;              /* bg/card・text/on-dark */
	--color-bg-dark: #1c1b18;         /* bg/dark 写真上の黒 */
	--color-on-dark-muted: #d6d2cc;   /* text/on-dark-muted */
	--color-line-strong: #c9c3b8;     /* line/strong ヘッダー下線 */
	--color-line-weak: #d8d2c7;       /* line/weak フッター区切り */
	--color-alert: #b3261e;           /* 要確定ラベル */
	--color-page-inactive: #7c6452;   /* ページネーションの非アクティブ（12章の12。コントラスト比 約5.5:1） */
	--color-brand-tint: rgb(80 48 24 / 0.08);  /* バッジの背景（ブランド色の8%） */
	--color-accent-tint: #efe7de;     /* bg/accent-tint Comparison の NOBOBO 列 */
	--color-on-dark-60: rgb(255 255 255 / 0.6);
	--color-on-dark-40: rgb(255 255 255 / 0.4);
	--color-accent-hover: #6a4a32;    /* accent-hover 主要ボタンのホバー（10/13 ホバー一覧 636:1363） */
	--color-line-button-on-dark: #fff; /* line/button-on-dark 写真の上の副次ボタンの枠（10/13 確定） */

	/* ---- ホバー（10/13 改訂：色反転は廃止。「背景」ではなく「役割」で決める。ホバー一覧 636:1363。docs/design-fb-1013.md） ---- */
	--hover-primary-bg: var(--color-accent-hover);             /* 主要（ブラウン塗り）→ #6A4A32 */
	--hover-on-photo-primary-bg: var(--color-accent-tint);     /* 写真・ブラウン地の上の主要（白塗り×ブラウン文字）→ #EFE7DE */
	--hover-secondary-bg: var(--color-brand-tint);             /* 副次（ブラウン枠・透過）→ ブラウン8% */
	--hover-on-photo-secondary-bg: rgb(255 255 255 / 0.15);    /* 写真の上の副次（白枠・透過）→ 白15% */
	--hover-ext-opacity: 0.7;                                  /* 外部リンク → 不透明度70% */
	--hover-arrow-x: 4px;                                      /* ボタンの矢印 → 右へ4px */

	/* ---- KV の写真の上の文字の影（Figma の効果スタイル「KV/text-shadow（写真上の文字）」。PC 202:1160・SP 1163:1963 の両方） ---- */
	--kv-text-shadow: 0 0 2px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);

	/* ---- フォント（3書体のみ） ---- */
	--ff-mincho: "Shippori Mincho", serif;               /* 見出し専用（Medium 500） */
	--ff-sans: "Noto Sans JP", sans-serif;               /* 本文・ナビ・UI（400/500/700） */
	--ff-en: "Jost", "Noto Sans JP", sans-serif;         /* ロゴ・英文・数字（400/500）。和文は Noto にフォールバック */

	/* ---- 文字サイズ（SPの値。PC/TABの値は下の @media で上書き） ---- */
	--fs-kv: clamp(34px, calc(2.667vw + 23.6px), 62px);      /* Display/KV 390→34 / 1440→62 */
	--fs-display-m: clamp(28px, calc(1.143vw + 23.5px), 40px); /* Display/JP M 390→28 / 1440→40 */
	--fs-display-s: 19px;             /* Display/JP S（カード内タイトル） PC 22 */
	--fs-sec-en: clamp(24px, calc(0.286vw + 22.9px), 27px);  /* Heading/EN Section 390→24 / 1440→27 */
	--fs-body: 15px;                  /* Body/JP M  PC 16 */
	--fs-body-xs: 15px;               /* Body/JP XS */
	--fs-label: 14px;                 /* Label/JP Sub */
	--fs-nav: 16px;                   /* Nav/JP */
	--fs-btn-en: 15px;                /* Button/EN  PC 16 */
	--fs-btn-jp: 13px;                /* Button（CONTACT用） PC 14 */
	--fs-en-small: 14px;              /* Label/EN Small */
	--fs-course: 16px;                /* コース名・金額  PC 18 */
	--fs-price: 18px;                 /* 価格（Jost Medium） */
	--fs-note: 12px;                  /* 注記・要確定ラベル */
	--fs-badge: 12px;                 /* バッジ */
	--fs-breadcrumb: 13px;            /* パンくず */

	/* ---- 字間 ---- */
	--ls-kv: 0.04em;
	--ls-display-m: 0.08em;
	--ls-display-s: 0.06em;
	--ls-sec-en: 0.22em;
	--ls-label: 0.16em;
	--ls-body: 0.04em;
	--ls-body-xs: 0.06em;
	--ls-nav: 0.08em;
	--ls-btn-en: 0.2em;
	--ls-btn-jp: 0.08em;
	--ls-en-small: 0.24em;
	--ls-course: 0.04em;
	--ls-price: 0.02em;
	--ls-note: 0.1em;
	--ls-badge: 0.04em;
	--ls-breadcrumb: 0.08em;

	/* ---- 行間 ---- */
	--lh-kv: 1.5;                     /* PC 1.45 */
	--lh-display-m: 1.65;             /* PC 1.6 */
	--lh-display-s: 1.8;
	--lh-sec-en: 1.3;
	--lh-label: 1.8;
	--lh-body: 1.9;
	--lh-body-xs: 1.8;
	--lh-nav: 1.8;
	--lh-btn: 1.3;
	--lh-course: 1.9;
	--lh-price: 1.5;
	--lh-note: 1.8;

	/* ---- レイアウト・余白 ---- */
	--gutter: clamp(24px, calc(12.95vw - 26.5px), 160px);   /* 390→24 / 1440→160 */
	--content-max: 1120px;
	--content-narrow: 1000px;         /* Concerns・Staff */
	--content-faq: 960px;             /* FAQ */
	--content-article: 800px;         /* 記事本文の列 */
	--space-section: 120px;           /* セクション上下 */
	--space-section-strong: 100px;    /* Why NOBOBO・Reserve  TAB以上 140 */
	--space-block: 32px;              /* セクション内の要素間  PC 56 */
	--header-h: 64px;                 /* PC 88 */
	--header-pad: clamp(20px, calc(2.667vw + 9.6px), 48px); /* ヘッダーの左右 390→20 / 1440→48 */
	--cta-btn-h: 56px;                /* SP・TABの固定CTA：ボタンの高さ（10/9 新デザイン） */
	--cta-frame-w: 3px;               /* SP・TABの固定CTA：白枠の太さ（Figma 968:1330） */
	--cta-bar-h: calc(var(--cta-btn-h) + var(--cta-frame-w) * 2); /* SP・TABの固定CTA：バー全体の高さ 62px（セーフエリアを除く） */

	/* ---- 部品 ---- */
	--btn-max: 300px;
	--btn-h: 52px;                    /* TAB以上 56 */
	--radius-card: 2px;
	--radius-badge: 2px;
	--shadow-card: 0 2px 10px rgb(26 23 20 / 0.06);

	/* ---- 固定CTA（10/9 荒川さんの新デザイン C案：PC 968:1306／SP 968:1294）。先方の最終OK（10/12）で色が変わったら、ここだけ直す ---- */
	--cta-base: #503018;                                /* 台座・SP の HPB の地・LINE の文字 */
	--cta-accent: #f5e6da;                              /* LINE の地・HPB の文字と枠 */
	--cta-edge: rgb(245 230 218 / 0.5);                 /* PC の台座の外周（accent の 50%） */
	--cta-frame: #fff;                                  /* SP・TAB のバーの白枠（10/9 追加。Figma 392:1000） */
	--cta-line-hover: #fff;                             /* LINE のホバー・押したとき（10/12 No.51。Figma 1024:1289） */
	--cta-hpb-hover: #6a4a32;                           /* HPB のホバー・押したとき（同上。文字・枠はそのまま） */
	--cta-shadow: 0 4px 16px rgb(26 23 20 / 0.16);      /* PC */
	--cta-shadow-sp: 0 -2px 10px rgb(26 23 20 / 0.1);   /* SP・TAB */
	--cta-pc-bottom: 115px;                             /* PC：画面の下からの距離（1440×800 基準） */
	--overlay-dark: 0.7;              /* 写真上の黒の不透明度 */
	--duration: 0.25s;

	/* ---- 出現アニメーション（10/13 先方要望。docs/animation.md。数字だけで「もっとゆっくり／速く」に応えられるように） ---- */
	--anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--anim-text-dur: 0.9s;            /* テキスト：下から上へフェードイン */
	--anim-text-y: 24px;
	--anim-img-dur: 1.6s;             /* 画像：ゆっくり下からふわっと（Longleage の 5s を NOBOBO 向けに短く） */
	--anim-img-y: 40px;
	--anim-img-delay: 0.2s;
	--anim-stagger: 0.04s;            /* 並びもの：1つずつの遅延（SP は半分。768px〜は下で 0.08s） */
	--anim-stagger-max: 0.2s;         /* 並びもの：遅延の上限（SP は半分。768px〜は下で 0.4s） */
	--anim-kv-scale: 1.06;            /* KV：表示中のスライドだけゆっくりズーム */
	--anim-kv-dur: 8s;
	--z-header: 100;
	--z-cta: 90;
	--z-drawer: 200;
}

@media (min-width: 768px) {
	:root {
		--fs-display-s: 22px;
		--fs-body: 16px;
		--fs-btn-en: 16px;
		--fs-btn-jp: 14px;
		--fs-course: 18px;
		--lh-display-m: 1.6;
		--btn-h: 56px;
		--space-block: 56px;
		--space-section-strong: 140px;
		--anim-stagger: 0.08s;
		--anim-stagger-max: 0.4s;
	}
}

@media (min-width: 1100px) {
	:root {
		--lh-kv: 1.45;
		--header-h: 88px;
	}
}