/* Design tokens & base typography */
:root {
  --c-main: #2d5f44;
  --c-deep: #1a3d2e;
  --c-sub:  #4a7d5f;
  --c-bg-beige:    #f0ebde;
  --c-bg-white:    #fefdf9;
  --c-bg-beige-2:  #f5f3eb;
  --c-text:        #1a3d2e;
  --c-text-sub:    #4a5a52;
  --c-line:        rgba(26, 61, 46, 0.12);

  --ff-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --ff-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  --container: 1120px;
  --gutter: 24px;
  --section-py: 120px;

  --ease: cubic-bezier(.2,.7,.2,1);

  /* ── Typography: font-size ── */
  --fs-caption: 12px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-lead:    clamp(18px, 2.2vw, 22px);
  --fs-h3:      clamp(20px, 2.4vw, 26px);
  --fs-h2:      clamp(26px, 3.4vw, 40px);
  --fs-h1:      clamp(32px, 5.6vw, 64px);
  --fs-num:     clamp(40px, 5vw, 64px);
  --fs-nav:     10px;

  /* ── Typography: line-height ── */
  --lh-tight:   1.3;
  --lh-normal:  1.7;
  --lh-relax:   1.9;

  /* ── Typography: letter-spacing ── */
  --ls-jp:       0.04em;
  --ls-jp-wide:  0.08em;
  --ls-en:       0.12em;
  --ls-en-nav:   0.18em;
  --ls-en-label: 0.28em;
  --ls-en-hero:  0.32em;

  /* ── Spacing (8pt grid) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  88px;
  --sp-10: 120px;
}

html, body { background: var(--c-bg-white); color: var(--c-text); }
body {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-jp);
}

.en { font-family: var(--ff-en); letter-spacing: var(--ls-en); }

p { color: var(--c-text-sub); }

/* Container */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section spacing */
.section { padding-block: var(--section-py); position: relative; overflow: hidden; }

@media (max-width: 1023px) { :root { --section-py: 88px; } }
@media (max-width: 767px)  { :root { --section-py: 64px; --gutter: 24px; } }

/* Section label  "— ABOUT" */
.section-label {
  font-family: var(--ff-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-en-label);
  color: var(--c-main);
  font-weight: 500;
  margin-bottom: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.section-label::before {
  display: none;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* E-3: 同じ親内の reveal を順次出現 */
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }

/* sp-only: スマホでのみ改行を有効化 */
.sp-only { display: inline; }
@media (min-width: 768px) {
  .sp-only { display: none; }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); background: #fff; padding: var(--sp-2) var(--sp-3); z-index: 1000; }