/* ==========================================================
   tokens.css — 自動生成（05_coding/_tools/build_tokens.py）
   元：04_design/tokens.json v1.2.2（唯一の正）。このファイルは手で直さない
   PC=1440 の値。tab(≦1000px)・sp(≦760px) で一部を上書き
   ========================================================== */
:root {

  /* color */
  --kk-color-base: #11100F;
  --kk-color-base-sub: #191715;
  --kk-color-base-deep: #0B0A09;
  --kk-color-base-hero: #151310;
  --kk-color-surface-hover: #201B17;
  --kk-color-surface-contact: #1E1712;
  --kk-color-surface-card: #201A15;
  --kk-color-input: #1E1B18;
  --kk-color-opening: #000000;
  --kk-color-text: #F4EFE6;
  --kk-color-text-sub: #C7BFB6;
  --kk-color-text-muted: #AEA69E;
  --kk-color-text-faint: #8C8177;
  --kk-color-label-gold: #AE9A87;
  --kk-color-gold: #B79A68;
  --kk-color-main: #DD5A1F;
  --kk-color-main-light: #2A1D15;
  --kk-color-accent: #EF8245;
  --kk-color-accent-light: #F38A4A;
  --kk-color-button-fill: #E57635;
  --kk-color-button-fill-hover: #F39760;
  --kk-color-button-text: #140E09;
  --kk-color-border: rgba(255,255,255,0.13);
  --kk-color-border-strong: rgba(255,255,255,0.20);
  --kk-color-border-input: rgba(255,255,255,0.20);
  --kk-color-border-header: rgba(244,239,230,0.12);
  --kk-color-border-accent: #C9773F;
  --kk-color-focus: #EF8245;
  --kk-color-error: #F0866B;
  --kk-color-dummy: #6F655C;
  --kk-color-text-link: #ED9764;
  --kk-color-text-link-line: #A86138;

  /* gradient */
  --kk-gradient-hero: radial-gradient(circle at 58% 50%, rgba(221,90,31,0.18), transparent 8%), #151310;
  --kk-gradient-hero-overlay-pc: linear-gradient(90deg, rgba(10,9,8,0.46), rgba(10,9,8,0.18) 45%, transparent 69%);
  --kk-gradient-hero-overlay-sp: linear-gradient(180deg, rgba(12,11,10,0.58), rgba(12,11,10,0.82));
  --kk-gradient-contact: radial-gradient(ellipse at 50% 115%, rgba(172,76,38,0.27), transparent 70%), #1E1712;
  --kk-gradient-post-thumb-overlay: linear-gradient(180deg, rgba(23,22,20,0.35) 0%, rgba(23,22,20,0.85) 100%);
  --kk-gradient-journal-1: linear-gradient(140deg, #2D231C, #171614);
  --kk-gradient-journal-2: linear-gradient(140deg, #292827, #171614);
  --kk-gradient-journal-3: linear-gradient(140deg, #342219, #171614);

  /* font */
  --kk-ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --kk-ff-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --kk-ff-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --kk-ff-en: Inter, "Noto Sans JP", Arial, sans-serif;
  --kk-fw-regular: 400;
  --kk-fw-medium: 500;
  --kk-fw-bold: 700;
  --kk-fw-en-medium: 500;
  --kk-fw-en-semibold: 600;
  --kk-fw-heading-display: 700;
  --kk-fw-heading: 600;
  --kk-fw-heading-statement: 500;

  /* font-size（PC 1440 の値。SP は下の media query で上書き） */
  --kk-fs-display: 78px;
  --kk-fs-page-title: 48px;
  --kk-fs-contact-heading: 58px;
  --kk-fs-statement: 52px;
  --kk-fs-h2: 40px;
  --kk-fs-h3: 34px;
  --kk-fs-h3-card: 28px;
  --kk-fs-h3-mincho: 28px;
  --kk-fs-h3-works: 30px;
  --kk-fs-mission: 23px;
  --kk-fs-h4: 20px;
  --kk-fs-theme: 18px;
  --kk-fs-lead: 17px;
  --kk-fs-body: 16px;
  --kk-fs-body-small: 15px;
  --kk-fs-small: 14px;
  --kk-fs-caption: 12px;
  --kk-fs-label: 12px;
  --kk-fs-nav: 12px;
  --kk-fs-nav-sub: 11px;
  --kk-fs-number: 21px;
  --kk-fs-number-l: 40px;
  --kk-fs-button: 14px;
  --kk-fs-button-l: 16px;
  --kk-fs-hero-note: 12px;
  --kk-fs-micro: 8px;
  --kk-fs-micro-label: 9px;
  --kk-fs-vertical: 40px;
  --kk-fs-body-about: 15px;
  --kk-fs-watermark: 260px;
  --kk-fs-vertical-label: 15px;
  --kk-fs-fluid-display: clamp(48px, 5.8vw, 100px);  /* 2026-10-19 大きく（旧 clamp(46px, 5.4vw, 92px)） */
  --kk-fs-fluid-page-title: clamp(30px, 3.4vw, 48px);
  --kk-fs-fluid-contact-heading: clamp(30px, 4.3vw, 58px);
  --kk-fs-fluid-statement: clamp(32px, 3.6vw, 52px);
  --kk-fs-fluid-h2: clamp(25px, 2.8vw, 40px);
  --kk-fs-fluid-h3: clamp(26px, 2.4vw, 34px);
  --kk-fs-fluid-h3-card: clamp(26px, 1.95vw, 28px);
  --kk-fs-fluid-h3-mincho: clamp(26px, 1.95vw, 28px);
  --kk-fs-fluid-mission: clamp(17px, 1.6vw, 23px);
  --kk-fs-fluid-lead: clamp(16px, 1.2vw, 20px);
  --kk-fs-fluid-hero-note: clamp(11px, 0.82vw, 14px);
  --kk-fs-fluid-display-sp: clamp(38px, 12.5vw, 56px); /* 2026-10-19 大きく（旧 clamp(36px, 11vw, 52px)） */

  /* line-height（倍率） */
  --kk-lh-display: 1.1;
  --kk-lh-display-sp: 1.25;
  --kk-lh-page-title: 1.4;
  --kk-lh-heading: 1.5;
  --kk-lh-mincho: 1.7;
  --kk-lh-contact-heading: 1.65;
  --kk-lh-card: 1.5;
  --kk-lh-mission: 1.8;
  --kk-lh-lead: 2.0;
  --kk-lh-body: 2.0;
  --kk-lh-body-loose: 2.3;
  --kk-lh-intro: 1.9;
  --kk-lh-small: 1.9;
  --kk-lh-label: 1.6;
  --kk-lh-tight: 1.0;
  --kk-lh-vertical: 1.25;
  --kk-lh-body-about: 2.4;

  /* letter-spacing（em） */
  --kk-ls-display: 0.045em;
  --kk-ls-display-sp: 0.015em;
  --kk-ls-page-title: 0.06em;
  --kk-ls-heading: 0.08em;
  --kk-ls-mincho: 0.06em;
  --kk-ls-card: 0.04em;
  --kk-ls-lead: 0.075em;
  --kk-ls-body: 0.04em;
  --kk-ls-button: 0.06em;
  --kk-ls-label: 0.2em;
  --kk-ls-eyebrow: 0.28em;
  --kk-ls-en: 0.16em;
  --kk-ls-nav-contact: 0.18em;
  --kk-ls-caption: 0.08em;
  --kk-ls-hero-note: 0.07em;
  --kk-ls-micro: 0.15em;
  --kk-ls-micro-label: 0.22em;
  --kk-ls-body-about: 0.1em;
  --kk-ls-watermark: -0.01em;

  /* space */
  --kk-space-section: 120px;
  --kk-space-section-contact: 112px;
  --kk-space-page-header-pc-top: 96px;
  --kk-space-page-header-pc-bottom: 88px;
  --kk-space-page-header-sp-top: 48px;
  --kk-space-page-header-sp-bottom: 56px;
  --kk-space-page-header-photo-gap: 120px;
  --kk-space-page-header-photo-sp-bottom: 40px;
  --kk-space-block: 64px;
  --kk-space-element: 24px;
  --kk-space-card: 48px;
  --kk-space-card-sm: 32px;
  --kk-space-label-to-heading: 16px;
  --kk-space-heading-to-text: 24px;
  --kk-space-grid-gap: 32px;
  --kk-space-grid-gap-hairline: 1px;
  --kk-space-grid-gap-column: 80px;
  --kk-space-xs: 8px;
  --kk-space-s: 16px;
  --kk-space-m: 24px;
  --kk-space-l: 40px;

  /* container */
  --kk-container-max: 1280px;
  --kk-container-narrow: 880px;
  --kk-container-text: 680px;
  --kk-container-wide: 1440px;
  --kk-gutter: 80px;

  /* header */
  --kk-header-h: 112px;
  --kk-header-h-top: 122px;
  --kk-header-px: 68px;
  --kk-header-logo-w: 209px;
  --kk-header-nav-gap: 28px;

  /* hero（トップ） */
  --kk-hero-gap-eyebrow-to-h1: 31px;
  --kk-hero-gap-h1-to-lead: 36px;
  --kk-hero-gap-lead-to-note: 20px;
  --kk-hero-gap-to-actions: 38px;
  --kk-hero-gap-actions-gap: 15px;  /* 30→15 2026-10-16 ユーザー指示（半分） */
  --kk-hero-h: max(100svh, 740px);
  --kk-hero-content-x: 104px;
  --kk-hero-content-w: min(860px, 54vw);

  /* button */
  --kk-btn-primary-w: 360px;
  --kk-btn-primary-h: 68px;       /* 76→68 2026-10-16 ユーザー指示（少し細く） */
  --kk-btn-primary-px: 28px;
  --kk-btn-fill-w: 420px;
  --kk-btn-fill-h: 68px;
  --kk-btn-fill-px: 32px;
  --kk-btn-secondary-h: 58px;
  --kk-btn-secondary-px: 24px;
  --kk-btn-text-py: 12px;
  --kk-btn-nav-contact-w: 124px;
  --kk-btn-nav-contact-h: 48px;
  --kk-btn-icon: 44px;            /* 丸いアイコン（Primary・Fill）2026-10-16 */
  --kk-btn-icon-s: 36px;          /* 丸いアイコン（Secondary） */
  --kk-gradient-button-fill: linear-gradient(90deg, #EF8245 0%, #DD5A1F 100%);       /* accent → main */
  --kk-gradient-button-fill-hover: linear-gradient(90deg, #F39760 0%, #E57635 100%); /* buttonFillHover → buttonFill */
  --kk-shadow-button-fill: 0 8px 24px rgba(221,90,31,0.28);
  --kk-shadow-button-fill-hover: 0 10px 28px rgba(239,130,69,0.36);

  /* form */
  --kk-form-field-h: 56px;
  --kk-form-padding: 16px;
  --kk-form-label-gap: 8px;
  --kk-form-field-gap: 32px;
  --kk-form-textarea-min-h: 180px;
  --kk-form-fs: 16px;

  /* border / radius / shadow / focus */
  --kk-border-w: 1px;
  --kk-radius: 0;
  --kk-radius-pill: 999px;       /* ボタン 2026-10-16 */
  --kk-shadow-hero-text: 0 2px 28px rgba(0,0,0,0.28);
  --kk-focus-outline: 2px solid #EF8245;
  --kk-focus-offset: 5px;
  --kk-tap-target: 44px;

  /* motion（ms はそのまま） */
  --kk-dur-fast: 180ms;
  --kk-dur-base: 220ms;
  --kk-dur-card: 250ms;
  --kk-dur-wipe: 380ms;
  --kk-dur-reveal: 800ms;
  --kk-dur-scroll-cue: 1800ms;
  --kk-ease-base: ease;
  --kk-ease-wipe: cubic-bezier(0.68, 0, 0.18, 1);
  --kk-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --kk-ease-ember-fall: cubic-bezier(0.42, 0.12, 0.75, 0.57);
  --kk-ease-loop: ease-in-out;
  --kk-reveal-distance: 16px;
  --kk-works-autoplay: 6000ms;
  --kk-works-dur: 600ms;
  --kk-works-shift: 24px;

  /* photo */
  --kk-photo-filter: brightness(.9);
  --kk-photo-tint: rgba(42,29,21,.22);
  --kk-photo-fade: linear-gradient(180deg, rgba(17,16,15,0) 45%, rgba(17,16,15,.55) 100%);

  /* icon */
  --kk-icon-size: 32px;

  /* about（心灯について） */
  --kk-about-watermark-fs: 260px;
  --kk-about-watermark-opacity: 0.06;
  --kk-about-catch-gap: 24px;
  --kk-about-body-w: 470px;
  --kk-about-paragraph-gap: 32px;
  --kk-about-circle: 52px;
  --kk-about-padding: 176px 0 240px;
}

@media (max-width: 1000px) {
  :root {
    --kk-gutter: 48px;
  }
}

@media (max-width: 760px) {
  :root {
    --kk-fs-display: 41px;
    --kk-fs-page-title: 30px;
    --kk-fs-contact-heading: 29px;
    --kk-fs-statement: 32px;
    --kk-fs-h2: 25px;
    --kk-fs-h3: 26px;
    --kk-fs-h3-card: 26px;
    --kk-fs-h3-mincho: 26px;
    --kk-fs-h3-works: 26px;
    --kk-fs-mission: 17px;
    --kk-fs-h4: 18px;
    --kk-fs-theme: 16px;
    --kk-fs-lead: 14px;
    --kk-fs-body: 15px;
    --kk-fs-body-small: 14px;
    --kk-fs-small: 13px;
    --kk-fs-caption: 12px;
    --kk-fs-label: 11px;
    --kk-fs-nav: 15px;
    --kk-fs-nav-sub: 11px;
    --kk-fs-number: 18px;
    --kk-fs-number-l: 32px;
    --kk-fs-button: 14px;
    --kk-fs-button-l: 15px;
    --kk-fs-hero-note: 11px;
    --kk-fs-micro: 8px;
    --kk-fs-micro-label: 9px;
    --kk-fs-vertical: 30px;
    --kk-fs-body-about: 14px;
    --kk-fs-watermark: 92px;
    --kk-fs-vertical-label: 13px;
    --kk-ls-body-about: 0.08em;
    --kk-space-section: 64px;
    --kk-space-section-contact: 72px;
    --kk-space-page-header-photo-gap: 56px;
    --kk-space-block: 32px;
    --kk-space-element: 16px;
    --kk-space-card: 24px;
    --kk-space-card-sm: 24px;
    --kk-space-grid-gap: 16px;
    --kk-gutter: 24px;
    --kk-header-h: 72px;
    --kk-header-h-top: 92px;
    --kk-header-px: 22px;
    --kk-header-logo-w: 155px;
    --kk-hero-gap-eyebrow-to-h1: 23px;
    --kk-hero-gap-h1-to-lead: 25px;
    --kk-hero-gap-lead-to-note: 16px;
    --kk-hero-gap-to-actions: 28px;
    --kk-hero-gap-actions-gap: 12px;
    --kk-hero-h: max(100svh, 800px);
    --kk-hero-content-x: 22px;
    --kk-btn-primary-w: 100%;
    --kk-btn-primary-h: 56px;
    --kk-btn-fill-w: 100%;
    --kk-btn-fill-h: 56px;
    --kk-btn-fill-px: 24px;
    --kk-btn-secondary-h: 52px;
    --kk-btn-icon: 36px;
    --kk-btn-icon-s: 32px;
    --kk-about-watermark-fs: 92px;
    --kk-about-catch-gap: 16px;
    --kk-about-body-w: 327px;
    --kk-about-paragraph-gap: 24px;
    --kk-about-circle: 44px;
    --kk-about-padding: 120px 24px 260px;
  }
}