/* ============================================================
   株式会社GrowLink — Corporate TOP
   Design tokens & system
   ============================================================ */

:root{
  /* ---- Brand (fixed, from logo) ---- */
  --green:#90BB5E;   /* 成長・学生 */
  --blue:#3DABCA;    /* 信頼・企業 */
  --orange:#E6915E;  /* 温もり・地域 */
  --ink:#231815;     /* テキスト */

  /* derived */
  --orange-ink:oklch(0.62 0.12 50);     /* button-safe deeper orange */
  --green-ink:oklch(0.62 0.11 135);
  --blue-ink:oklch(0.60 0.10 220);

  --ink-1:#231815;
  --ink-2:#5a4f49;
  --ink-3:#8a8079;
  --line:oklch(0.88 0.012 70);
  --line-soft:oklch(0.92 0.01 70);

  /* ---- Taste: WARM (default) ---- */
  --bg:#FBF7F0;          /* warm paper */
  --bg-2:#F4ECE0;        /* warm alt */
  --surface:#FFFFFF;
  --surface-tint:#FBF6EE;
  --hero-bg:#FBF7F0;
  --accent:var(--orange);
  --accent-ink:var(--orange-ink);

  /* type */
  --serif:"Zen Old Mincho", serif;
  --sans:"Zen Kaku Gothic New", system-ui, sans-serif;
  --latin:"Figtree", var(--sans);
  --heading-family:var(--serif);

  /* metrics */
  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(35,24,21,.05), 0 6px 20px -12px rgba(35,24,21,.18);
  --shadow-md:0 4px 10px -6px rgba(35,24,21,.10), 0 24px 50px -28px rgba(35,24,21,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Taste: MODERN (white, crisp 3-color) ---- */
:root[data-taste="modern"]{
  --bg:#FFFFFF;
  --bg-2:#F6F8F9;
  --surface:#FFFFFF;
  --surface-tint:#FAFBFC;
  --hero-bg:#FFFFFF;
  --line:oklch(0.91 0.006 230);
  --line-soft:oklch(0.95 0.004 230);
}

/* heading family toggle */
:root[data-heading="gothic"]{ --heading-family:var(--sans); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-1);
  background:var(--bg);
  font-size:16px;
  line-height:1.85;
  font-feature-settings:"palt" 1;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 日本語の改行を文節単位で・禁則処理を有効に */
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
/* 文節で固まりごと改行させたい箇所に付与 */
.np{display:inline-block;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

/* ---------- Headings ---------- */
.h-serif{font-family:var(--heading-family);}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--latin);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-ink);
  white-space:nowrap;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;
}
.eyebrow .jp{color:var(--ink-3);letter-spacing:.16em;font-weight:600;}

.section{padding-block:clamp(72px,9vw,128px);}
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px);}
.section-title{
  font-family:var(--heading-family);
  font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.3;
  letter-spacing:.02em;
  margin:.5em 0 0;
  text-wrap:balance;
}
.section-lead{
  margin:1.2em 0 0;
  color:var(--ink-2);
  font-size:1.02rem;
  line-height:2;
  max-width:60ch;
}

/* reveal on scroll — visible by default; hidden only when JS confirms it can animate */
.reveal{opacity:1;transform:none;}
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
html.js .reveal.in{opacity:1;transform:none;}
.reveal.force-show{opacity:1 !important;transform:none !important;transition:none !important;}
@media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none;transition:none;} }
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}
.reveal[data-delay="5"]{transition-delay:.40s;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-weight:700;font-size:.96rem;
  padding:.95em 1.7em;border-radius:999px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  cursor:pointer;border:none;letter-spacing:.04em;
}
.btn-primary{background:var(--accent-ink);color:#fff;box-shadow:0 10px 24px -12px color-mix(in oklab, var(--accent-ink) 70%, transparent);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px color-mix(in oklab, var(--accent-ink) 75%, transparent);}
.btn-ghost{background:transparent;color:var(--ink-1);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink-1);transform:translateY(-2px);}
.btn .arr{transition:transform .35s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}