:root {
  /* ==========================
     フォント・テキストサイズ
  ========================== */
  --font-main: "Lato", "Noto Sans JP", sans-serif;
  --font-en: "Lato", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;

  --font-size-body: clamp(15px, 0.94vw, 18px);
  --font-size-small: clamp(12px, 0.73vw, 14px);

  /* ==========================
     カラー
  ========================== */
  --color-bg: #000;
  --color-text: #fff;

  /* ==========================
     ロゴ用タイポ
  ========================== */
  --logo-main-size: clamp(16px, 1.8vw, 22px); /* DIGITAL */
  --logo-main-weight: 300;

  --logo-accent-size: clamp(20px, 2.4vw, 28px); /* ADDICTION */
  --logo-accent-weight: 700;

  /* ==========================
     Intro アニメーション
  ========================== */

  /* タイムライン（開始時間） */
  --intro-1: var(--t-hold); /* 横線スタート */
  --intro-2: calc(var(--intro-1) + var(--t-swipe)); /* 横線伸び終わり */
  --intro-3: calc(var(--intro-2) + var(--t-line)); /* Loading 表示 */
  --intro-4: calc(var(--intro-3) + var(--t-invert)); /* Complete 表示 */
  --intro-5: calc(
    var(--intro-4) + var(--t-complete-in) + var(--t-complete-wait) +
      var(--t-complete-out)
  ); /* 縦線落下 */
  --intro-6: calc(
    var(--intro-5) + var(--t-drop)
  ); /* ロゴ表示 → Scroll Down 表示 */

  /* アニメーション尺 */
  --t-hold: 0.6s;
  --t-swipe: 0.8s;
  --t-line: 0.9s;
  --t-invert: 0.25s;
  --t-back: 0.4s;
  --t-drop: 0.7s;
  --t-out: 0.8s;

  --t-complete-in: 0.35s;
  --t-complete-wait: 0.45s;
  --t-complete-out: 0.3s;

  /* イージング */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 補助（演出調整用） */
  --t-bounce: 0.22s;
  --vline-bounce: 16px;

  /* Loading / Complete 表示調整 */
  --intro-label-size: clamp(18px, 1.4vw, 28px);
  --intro-letter: 0.22em;
  --intro-right-nudge: 12px;
  --right-nudge: var(--intro-right-nudge, 12px);

  /* ライン位置 */
  --line-offset: 12px;
  --h-sub: clamp(3rem, 4.69vw, 5.625rem);
  --h-main: clamp(3rem, 6.25vw, 7.5rem);
  --h-sub-lh: 0.9;
  --h-main-lh: 0.85;
  --h-gap-rows: 0px;

  --line-y: calc(
    50vh +
      (
        (var(--h-sub) * var(--h-sub-lh)) + var(--h-gap-rows) +
          (var(--h-main) * var(--h-main-lh))
      ) / 2 + var(--line-offset)
  );
  --line-gap: 14px;

  /* ==========================
     Scroll 表示
  ========================== */
  --scroll-top: 65vh; /* 棒の開始位置 */
  --scroll-h: 200px; /* 棒の長さ */
  --scroll-x-nudge: -20px; /* 横位置調整 */
  --scroll-gap: 10px;
  --drop-extra: 0px;

  --sd-dur: 1.8s; /* アニメ周期 */
  --sd-seg-h: 34px; /* 動くセグメントの長さ */

  /* ==========================
     レイアウト基準
  ========================== */
  --hero-right: 5vw;

  --head-size: clamp(3.125rem, 10.42vw, 12.5rem);
  --head-weight: 800;
  --head-tracking: 0.06em;

  --content-title-size: clamp(2.625rem, 4.17vw, 5rem);
  --content-title-weight: 900;

  --subhead-size: clamp(1.5rem, 2.6vw, 3.125rem);
  --subhead-weight: 900;

  --service-image-size: clamp(160px, 28vw, 600px);
  --section-padding-side: clamp(24px, 6vw, 120px);
  --section-gap-top: clamp(64px, 10vw, 160px);
  --vertical-heading-gutter: clamp(80px, 8vw, 160px);

  --content-rail: clamp(880px, 58vw, 1100px);
  --gallery-rail: clamp(520px, 42vw, 720px);

  --layout-max-width: 1700px;

  /* ==========================
     Recruit セクション
  ========================== */
  --recruit-rail: 1200px;
  --recruit-gutter: var(--section-padding-side);
  --recruit-row-height: clamp(55px, 6vw, 72px);
  --recruit-line: rgba(255, 255, 255, 0.25);
  --recruit-label-w: 160px;
  --recruit-spacing-y: clamp(56px, 6.25vw, 120px);

  /* ==========================
     ボタン
  ========================== */
  --btn-pop-pad-y: 12px;
  --btn-pop-pad-x: 36px;
  --btn-pop-pad-x-hover: 52px;
  --btn-pop-offset-x: 10px;
  --btn-pop-offset-y: 10px;
  --btn-stroke: 1px;
  --btn-cap-len: 6px;

  /* ==========================
     ナビ
  ========================== */
  --nav-speed: 420ms;
  --nav-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}