/* ============================================================
   利益構造DX — Base / Tokens / Layout
   ============================================================ */
:root{
  /* green-forward palette (growth / profit) */
  --ink:        oklch(0.25 0.022 162);
  --ink-soft:   oklch(0.42 0.018 162);
  --ink-faint:  oklch(0.58 0.014 162);
  --line:       oklch(0.90 0.012 162);
  --line-soft:  oklch(0.94 0.010 162);
  --bg:         oklch(0.995 0.004 150);
  --bg-soft:    oklch(0.975 0.012 158);
  --bg-tint:    oklch(0.965 0.030 158);
  --card:       #ffffff;

  /* accent — hue is tweakable via --acc-h */
  --acc-h: 158;
  --acc:        oklch(0.60 0.135 var(--acc-h));
  --acc-deep:   oklch(0.47 0.115 var(--acc-h));
  --acc-dark:   oklch(0.30 0.060 var(--acc-h));
  --acc-darker: oklch(0.225 0.045 var(--acc-h));
  --acc-bright: oklch(0.82 0.170 calc(var(--acc-h) - 16));
  --acc-tint:   oklch(0.95 0.035 var(--acc-h));
  --acc-tint-2: oklch(0.90 0.055 var(--acc-h));

  /* feedback hues for before/after */
  --warn:  oklch(0.66 0.15 38);
  --warn-tint: oklch(0.95 0.04 38);

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 26px;
  --shadow-sm: 0 1px 2px oklch(0.3 0.03 162 / .06), 0 2px 8px oklch(0.3 0.03 162 / .05);
  --shadow:    0 8px 30px oklch(0.3 0.03 162 / .09), 0 2px 8px oklch(0.3 0.03 162 / .05);
  --shadow-lg: 0 30px 70px oklch(0.25 0.04 162 / .18), 0 8px 24px oklch(0.25 0.04 162 / .10);
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-jp);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.75;
  font-feature-settings:"palt" 1;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--acc-bright); color:var(--acc-darker); }

/* ---- layout ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,10vw,140px); position:relative; }
.section--tight{ padding-block:clamp(56px,7vw,96px); }

/* ---- eyebrow / headings ---- */
.eyebrow{
  font-family:var(--font-display);
  font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acc-deep);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc-bright));
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ display:none; }

.h-xl{ font-size:clamp(34px,5.6vw,62px); line-height:1.12; font-weight:700; letter-spacing:-.01em; margin:0; text-wrap:balance; }
.h-lg{ font-size:clamp(28px,4vw,46px); line-height:1.2; font-weight:700; letter-spacing:-.005em; margin:0; text-wrap:balance; }
.h-md{ font-size:clamp(21px,2.4vw,28px); line-height:1.35; font-weight:700; margin:0; }
.lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.85; color:var(--ink-soft); margin:0; text-wrap:pretty; }
.sec-head{ text-align:center; max-width:720px; margin-inline:auto; margin-bottom:clamp(40px,5vw,68px); display:flex; flex-direction:column; align-items:center; gap:18px; }
.sec-head .lead{ max-width:600px; }
.accent-text{ color:var(--acc-deep); }
.mark{
  background:linear-gradient(transparent 62%, var(--acc-tint-2) 62%);
  padding-inline:.06em;
}

/* ---- buttons ---- */
.btn{
  --bh:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--bh); padding-inline:26px; border-radius:999px;
  font-family:var(--font-jp); font-weight:700; font-size:16px; letter-spacing:.02em;
  cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{
  color:#fff;
  background:linear-gradient(180deg, var(--acc), var(--acc-deep));
  box-shadow:0 1px 0 oklch(1 0 0 / .25) inset, var(--shadow), 0 10px 26px oklch(0.55 0.13 var(--acc-h) / .35);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 oklch(1 0 0 / .25) inset, var(--shadow-lg), 0 16px 34px oklch(0.55 0.13 var(--acc-h) / .42); }
.btn--ghost{
  color:var(--ink); background:transparent; border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--acc); color:var(--acc-deep); transform:translateY(-2px); }
.btn--on-dark{ color:var(--acc-darker); background:#fff; box-shadow:var(--shadow); }
.btn--on-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--ghost-dark{ color:#fff; border-color:oklch(1 0 0 / .3); background:oklch(1 0 0 / .04); }
.btn--ghost-dark:hover{ border-color:oklch(1 0 0 / .7); background:oklch(1 0 0 / .1); transform:translateY(-2px); }
.btn--sm{ --bh:44px; font-size:14.5px; padding-inline:20px; }

/* arrow nudge */
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---- header ---- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center;
  height:74px; transition:background .35s, box-shadow .35s, border-color .35s, height .35s;
  border-bottom:1px solid transparent;
}
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.hdr.is-stuck{ height:64px; background:oklch(0.995 0.004 150 / .82); backdrop-filter:blur(18px) saturate(150%); border-bottom-color:var(--line-soft); box-shadow:0 6px 24px oklch(0.3 0.03 162 / .05); }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; flex:none; }
.brand__mark{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:#fff; box-shadow:var(--shadow-sm); flex:none; overflow:hidden; padding:3px; }
.brand__mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand__name{ font-size:18px; letter-spacing:.01em; line-height:1; white-space:nowrap; }
.brand__name b{ color:var(--acc-deep); }
.brand__tag{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; font-family:var(--font-jp); font-weight:500; }
.brand__txt{ display:flex; flex-direction:column; gap:3px; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--acc); border-radius:2px; transition:right .25s var(--ease); }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }
.hdr__cta{ display:flex; align-items:center; gap:14px; }
/* header on dark hero */
.hdr.on-dark:not(.is-stuck) .nav a{ color:oklch(1 0 0 / .82); }
.hdr.on-dark:not(.is-stuck) .nav a:hover{ color:#fff; }
.hdr.on-dark:not(.is-stuck) .brand__name{ color:#fff; }
.hdr.on-dark:not(.is-stuck) .brand__name b{ color:var(--acc-bright); }
.hdr.on-dark:not(.is-stuck) .brand__tag{ color:oklch(1 0 0 / .6); }
.menu-btn{ display:none; }

/* ---- reveal animation — resting state is the VISIBLE end-state.
   Hiding only happens under html.anim-on, which JS adds solely when the
   document is visible & motion is allowed. So print / hidden tab / reduced
   motion / no-JS all show finished content. ---- */
.anim-on .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform; }
.anim-on .reveal.is-in{ opacity:1; transform:none; }
.anim-on .reveal[data-d="1"]{ transition-delay:.08s; }
.anim-on .reveal[data-d="2"]{ transition-delay:.16s; }
.anim-on .reveal[data-d="3"]{ transition-delay:.24s; }
.anim-on .reveal[data-d="4"]{ transition-delay:.32s; }
.anim-on .reveal[data-d="5"]{ transition-delay:.40s; }
.anim-on .reveal--scale{ transform:translateY(26px) scale(.97); }
.anim-on .reveal--scale.is-in{ transform:none; }

/* ---- image placeholders ---- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, oklch(0.93 0.02 162) 0 12px, oklch(0.95 0.015 162) 12px 24px);
  display:grid; place-items:center; color:var(--ink-faint);
}
.ph__lbl{
  font-family:var(--font-display); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  background:oklch(1 0 0 / .8); padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
}

/* ---- utility ---- */
.center{ text-align:center; }
.muted{ color:var(--ink-faint); }
.tnum{ font-variant-numeric:tabular-nums; font-family:var(--font-display); }
.divider{ height:1px; background:var(--line-soft); border:0; margin:0; }

@media (max-width: 880px){
  .nav{ display:none; }
  .hdr__cta .btn--ghost{ display:none; }
}