/* ─────────────────────────────────────────────────────────────
   SODAI SYSTEM · Brand Site · COMMON (base/reset/tokens)
   ─ CSS変数・リセット・ベースタグスタイル・
     ユーティリティクラス (.wrap, .label-en, .reveal 他)
   ───────────────────────────────────────────────────────────── */

:root {
  --ink-900: #0A1013;
  --ink-700: #1F2A30;
  --ink-500: #4B5963;
  --ink-300: #8B97A0;
  --ink-100: #D0D7DC;
  --paper: #F4F1EC;

  --sky: #ECF0F4;
  --mountain: #1A2329;
  --river-1: #0F4D52;
  --river-2: #136B70;
  --ocean: #E6EEEE;
  --light: #FFFFFF;

  --teal-1: #0F6F76;
  --teal-2: #1F9398;
  --teal-3: #4FBFC3;
  --green-1: #1E8A6E;
  --green-2: #5CB89A;
  --accent: #5CB89A;
  --accent-deep: #1E8A6E;

  --display: "Bricolage Grotesque", "Zen Kaku Gothic New", system-ui, sans-serif;
  --serif: "Roboto Slab", ui-serif, Georgia, serif;
  --lato: "Lato", "Roboto Slab", ui-serif, Georgia, serif;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --jp: "Noto Sans JP", "Zen Kaku Gothic New", system-ui, sans-serif;
  --jp-bold: "Zen Kaku Gothic New", system-ui, sans-serif;

  --pad-x: clamp(20px, 5vw, 96px);
  --max: 1520px;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

body {
  font-family: var(--jp);
  color: var(--ink-900);
  background: var(--paper);
  line-height: 1.6;
  letter-spacing: .005em;
  overflow-x: hidden;
}

img,
video,
svg {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

em,
i {
  font-style: normal !important
}

em {
  font-family: var(--lato) !important;
  font-style: normal !important;
  font-weight: 300 !important
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer
}

::selection {
  background: var(--accent);
  color: var(--ink-900)
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x)
}

.label-en {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1)
}

.reveal.in {
  opacity: 1;
  transform: none
}

.d1 {
  transition-delay: .1s
}

.d2 {
  transition-delay: .22s
}

.d3 {
  transition-delay: .34s
}

.d4 {
  transition-delay: .46s
}