/* ==========================================================================
   Install Design System — tokens.css
   庄内クリエート工業 教育事業（インストールシリーズ）
   構成: プリミティブ（原色） → セマンティック（役割） の2層。
   コンポーネント・ページは必ずセマンティック層を参照する。
   ========================================================================== */

:root {
  /* ---------- Primitive: color ---------- */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-brand-green-50:  #effaf5;
  --color-brand-green-100: #d7f4e4;
  --color-brand-green-200: #b3e7ce;
  --color-brand-green-300: #81d4b1;
  --color-brand-green-400: #4cbb90;
  --color-brand-green-500: #30b686;
  --color-brand-green-600: #1b805e;
  --color-brand-green-700: #21644c;
  --color-brand-green-800: #14513e;
  --color-brand-green-900: #114334;
  --color-brand-green-950: #08261e;

  --color-brand-yellow-50:  #fefee8;
  --color-brand-yellow-100: #ffffc2;
  --color-brand-yellow-200: #fffa87;
  --color-brand-yellow-300: #fff043;
  --color-brand-yellow-400: #ffe004;
  --color-brand-yellow-500: #efc803;
  --color-brand-yellow-600: #ce9b00;
  --color-brand-yellow-700: #a46f04;
  --color-brand-yellow-800: #88570b;
  --color-brand-yellow-900: #734710;
  --color-brand-yellow-950: #432505;

  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;

  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* ---------- Semantic: color ---------- */
  /* brand */
  --color-primary:        var(--color-brand-green-500);
  --color-primary-hover:  var(--color-brand-green-600);
  --color-primary-active: var(--color-brand-green-700);
  --color-primary-soft:   var(--color-brand-green-100);
  --color-primary-subtle: var(--color-brand-green-50);
  --color-primary-strong: var(--color-brand-green-800);
  --color-secondary:      var(--color-brand-yellow-400);   /* CTAボタン（.btn-cta）と吹き出し */
  --color-secondary-hover:var(--color-brand-yellow-500);
  --color-secondary-soft: var(--color-brand-yellow-100);   /* マーカー */
  --color-cream:          #fff8eb;                          /* 補足ボックス・ピックアップ面（relay由来） */
  --color-tint-mint:      var(--color-brand-green-50);      /* 淡色カード3色（GEPPY由来） */
  --color-tint-sky:       #e9f0ff;
  --color-tint-cream:     var(--color-cream);
  --color-panel:          #f4f6f7;                          /* 大パネル（角丸32）の面 */

  /* surface */
  --color-page:        var(--color-white);
  --color-page-alt:    var(--color-slate-50);
  --color-page-green:  var(--color-brand-green-50);
  --color-page-dark:   var(--color-brand-green-900);       /* 反転セクション（思想・問い合わせ） */
  --color-surface:     var(--color-white);
  --color-surface-dark:var(--color-brand-green-800);
  --color-overlay:     rgb(15 23 42 / 0.6);

  /* text */
  --color-fg-high:        var(--color-slate-900);
  --color-fg-middle:      var(--color-slate-700);
  --color-fg-low:         var(--color-slate-500);
  --color-fg-placeholder: var(--color-slate-400);
  --color-fg-disabled:    var(--color-slate-400);
  --color-fg-brand:       var(--color-brand-green-600);
  --color-fg-high-inverse:   var(--color-white);
  --color-fg-middle-inverse: var(--color-slate-200);
  --color-fg-low-inverse:    var(--color-slate-300);

  /* border */
  --color-stroke-high:   var(--color-slate-300);
  --color-stroke-middle: var(--color-slate-200);
  --color-stroke-low:    var(--color-slate-100);
  --color-stroke-brand:  var(--color-brand-green-500);
  --color-stroke-inverse: rgb(255 255 255 / 0.16);
  --color-outline-focus: var(--color-blue-600);

  /* status */
  --color-success:      var(--color-brand-green-600);
  --color-success-soft: var(--color-brand-green-50);
  --color-warning:      var(--color-amber-600);
  --color-warning-soft: var(--color-amber-50);
  --color-negative:     var(--color-red-600);
  --color-negative-soft:var(--color-red-50);
  --color-info:         var(--color-blue-600);
  --color-info-soft:    var(--color-blue-50);

  /* ---------- Typography ---------- */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display-en: "Poppins", "Noto Sans JP", sans-serif;   /* 英字の大見出し専用（GEPPY由来） */

  --text-xs:   0.75rem;  --leading-xs:   1rem;     /* 12/16 */
  --text-sm:   0.875rem; --leading-sm:   1.5rem;   /* 14/24 */
  --text-base: 1rem;     --leading-base: 1.75rem;  /* 16/28 本文 */
  --text-lg:   1.25rem;  --leading-lg:   2rem;     /* 20/32 */
  --text-xl:   1.5rem;   --leading-xl:   2.25rem;  /* 24/36 */
  --text-2xl:  2rem;     --leading-2xl:  2.75rem;  /* 32/44 */
  --text-3xl:  2.5rem;   --leading-3xl:  3.25rem;  /* 40/52 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --font-weight-black:  900;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-widest: 0.16em;   /* eyebrow・英字ラベル */

  /* ---------- Spacing（4px基準・祝福値のみ） ---------- */
  --spacing: 0.25rem;
  --space-0:  0;
  --space-1:  calc(var(--spacing) * 1);   /* 4  */
  --space-2:  calc(var(--spacing) * 2);   /* 8  */
  --space-3:  calc(var(--spacing) * 3);   /* 12 */
  --space-4:  calc(var(--spacing) * 4);   /* 16 */
  --space-6:  calc(var(--spacing) * 6);   /* 24 */
  --space-8:  calc(var(--spacing) * 8);   /* 32 */
  --space-12: calc(var(--spacing) * 12);  /* 48 */
  --space-16: calc(var(--spacing) * 16);  /* 64 */
  --space-24: calc(var(--spacing) * 24);  /* 96 セクション上下 */

  /* ---------- Layout ---------- */
  --container-max: 1080px;
  --container-narrow: 760px;
  --gutter: var(--space-6);

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;      /* 大パネル */
  --radius-full: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 12px 32px rgb(15 23 42 / 0.12);
  --shadow-primary: 0 6px 18px rgb(48 182 134 / 0.32);
  --shadow-cta: 0 4px 0 var(--color-brand-yellow-600), 0 10px 24px rgb(239 200 3 / 0.35);
  --shadow-focus-ring: 0 0 0 3px rgb(37 99 235 / 0.35);

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-fg-high);
  background: var(--color-page);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-outline-focus); outline-offset: 2px; }

/* ---------- Typography classes ---------- */
.typo-xs   { font-size: var(--text-xs);   line-height: var(--leading-xs); }
.typo-sm   { font-size: var(--text-sm);   line-height: var(--leading-sm); }
.typo-base { font-size: var(--text-base); line-height: var(--leading-base); }
.typo-lg   { font-size: var(--text-lg);   line-height: var(--leading-lg);   font-weight: var(--font-weight-bold); }
.typo-xl   { font-size: var(--text-xl);   line-height: var(--leading-xl);   font-weight: var(--font-weight-bold); }
.typo-2xl  { font-size: var(--text-2xl);  line-height: var(--leading-2xl);  font-weight: var(--font-weight-black); letter-spacing: var(--tracking-tight); }
.typo-3xl  { font-size: var(--text-3xl);  line-height: var(--leading-3xl);  font-weight: var(--font-weight-black); letter-spacing: var(--tracking-tight); }
.typo-display { font-size: clamp(var(--text-2xl), 4.6vw, var(--text-3xl)); line-height: 1.4; font-weight: var(--font-weight-black); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.typo-heading { font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl)); line-height: 1.5; font-weight: var(--font-weight-black); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.typo-eyebrow { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-fg-brand); }
.typo-display-en { font-family: var(--font-display-en); font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: var(--color-fg-high); }
.typo-display-en .em-brand { color: var(--color-primary); }
.typo-hero { font-size: clamp(2.25rem, 5.6vw, 3.75rem); line-height: 1.3; font-weight: var(--font-weight-black); letter-spacing: -0.02em; text-wrap: balance; }

.text-high { color: var(--color-fg-high); }
.text-middle { color: var(--color-fg-middle); }
.text-low { color: var(--color-fg-low); }
.text-brand { color: var(--color-fg-brand); }
.text-inverse { color: var(--color-fg-high-inverse); }
.text-center { text-align: center; }
.font-bold { font-weight: var(--font-weight-bold); }
.font-black { font-weight: var(--font-weight-black); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Spacing utilities（祝福値のみ） ---------- */
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)} .gap-6{gap:var(--space-6)} .gap-8{gap:var(--space-8)} .gap-12{gap:var(--space-12)}
.mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)} .mt-12{margin-top:var(--space-12)} .mt-16{margin-top:var(--space-16)}
.mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)} .mb-12{margin-bottom:var(--space-12)}
.p-4{padding:var(--space-4)} .p-6{padding:var(--space-6)} .p-8{padding:var(--space-8)}

/* Service concept: limit the visual height, keep text in HTML. */
:root { --concept-core-height: 8rem; }

/* v5.5 editorial rhythm */
:root {
 --color-editorial-paper: #fbf8f0;
 --color-editorial-hero: #176749;
 --text-editorial-hero: 3.5rem;
 --text-editorial-heading: 2.625rem;
 --text-editorial-section: 3.25rem;
 --editorial-lead-width: 38rem;
}

/* v5.6: one LP palette. Brand + neutrals; status uses text, not added hues. */
.lp-geppy {
 --color-primary:#00c653;
 --color-primary-hover:var(--color-primary);
 --color-primary-active:var(--color-primary-hover);
 --color-primary-strong:var(--color-primary);
 --color-primary-soft:#edfaf3;
 --color-image-surface:#f4f7f6;
 --color-image-surface-on-tint:#e7eeec;
 --color-primary-subtle:var(--color-primary-soft);
 --color-secondary:var(--color-primary-soft);
 --color-secondary-hover:var(--color-primary-soft);
 --color-secondary-soft:var(--color-primary-soft);
 --color-page:#ffffff;
 --color-surface:var(--color-page);
 --color-page-alt:#f4f7f5;
 --color-panel:var(--color-page-alt);
 --color-page-green:var(--color-primary-soft);
 --color-page-dark:#1f2924;
 --color-surface-dark:var(--color-page-dark);
 --color-cream:var(--color-page-alt);
 --color-tint-mint:var(--color-primary-soft);
 --color-tint-sky:var(--color-primary-soft);
 --color-tint-cream:var(--color-primary-soft);
 --color-fg-high:#1f2924;
 --color-fg-middle:#46564d;
 --color-fg-low:#66766c;
 --color-fg-brand:var(--color-primary);
 --color-stroke-middle:#dbe6df;
 --color-stroke-high:var(--color-stroke-middle);
 --color-stroke-brand:var(--color-primary);
 --color-warning:var(--color-fg-middle);
 --color-warning-soft:var(--color-page-alt);
 --color-outline-focus:var(--color-primary);
 --section-word-size:3.5rem;
}

/* ---------- v0.4 Craft（LP v7：表現レイヤー） ---------- */
/* 動き・装飾の値はここだけで定義。ページ側に秒数・距離・イージングを直書きしない。 */
:root {
 --duration-slow:   600ms;
 --duration-reveal: 900ms;
 --duration-marquee: 48s;
 --ease-out-expo:  cubic-bezier(.16,1,.3,1);
 --ease-in-out:    cubic-bezier(.65,0,.35,1);
 --stagger:        60ms;
 --reveal-distance: var(--space-3);
 --font-display-en-weight: 800;
 --text-mega: clamp(2.75rem, 11.5vw, 10.5rem);         /* フッターの大ワードマーク専用 */
 --text-numeral: clamp(5rem, 11vw, 9rem);        /* 特長の大数字専用 */
 --grid-notebook: var(--space-8);                /* 方眼の1マス */
 --rail-width: var(--space-12);                  /* 爪見出しの幅 */
 --progress-height: 2px;
 --measure-lead: 30em;
 --duration-slide: 5500ms;
 --text-marquee: clamp(2.75rem, 7.5vw, 7rem);    /* ヒーロー下の目次帯 */                       /* FVスライドの1枚あたりの表示時間 */                           /* 左揃えリードの1行の長さ */
}
.lp-geppy {
 --color-highlighter: #d7f4e4;
 --lp-statement-size: clamp(1.5rem, 2.6vw, 2.25rem);   /* 物語の転換点の一文（Why の結び） */
 --char-stagger: 24ms;                   /* 蛍光ペン（既存 green-100 と同値） */
 --color-grid-line: #edfaf3;                     /* 方眼線（既存の淡緑と同値） */
 --shadow-lift: 0 12px 28px rgb(0 198 83 / 0.22);
 --shadow-card-lift: 0 16px 40px rgb(31 41 36 / 0.08);
}