/* ============================================================
   マクロズWEBデザイン正典 — 共通デザイントークン＋共通部品
   原本: Figma マクロズ_コーポレーションサイト_20251223_8
   色はスクショ実ピクセルから採取した実測値
   ============================================================ */

/* 書体 ＝ マクロズWEB確定仕様（2026-07-08 承認済み・以後この4種で統一）:
   - 数字ディスプレイ: DSEG7 Classic Italic（7セグLCD・SIL OFL・自己ホスト）。原本Figmaが
     実際に読み込んでいた本物を同定＝完全一致。7セグのため数字専用（英字は破綻）。.digital で使用。
   - ディスプレイ(英見出し): Kode Mono（連続丸角モノライン）。原本の見出し書体はラスタライズで
     ベイクされ名前が取れないが、その形状クラスに最も忠実な Kode Mono をブランド標準として採用確定。
   - 和文/本文: Noto Sans JP（確定）／ 英ナビ・小見出し: Oswald（確定）
   ※フォント変更はブランド判断。安易に差し替えない。 */
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@500;600&display=swap');

/* 本物の数字フォント（自己ホスト・OFL） */
@font-face {
  font-family: 'DSEG7 Classic';
  src: url('assets/fonts/DSEG7Classic-Italic.woff2') format('woff2');
  font-style: italic;
  font-display: swap;
}

:root {
  --bg-dark: #0e0000;      /* 基調の黒(わずかに赤みを含む) */
  --green: #01fe12;        /* ネオングリーン(アクセント・見出し頭文字・active) */
  --white: #ffffff;
  --bg-light: #ffffff;     /* 反転セクション/下層の白 */
  --field: #efefef;        /* フォーム入力欄グレー */
  --red: #e83836;          /* 必須バッジ */
  --text-dark: #111111;    /* 白地上の本文 */

  --font-display: 'Kode Mono', monospace;     /* 英大見出し(連続丸角モノライン近似) */
  --font-digital: 'DSEG7 Classic', monospace; /* 数字LCD(本物・数字専用) */
  --font-body: 'Noto Sans JP', sans-serif;    /* 和文 */
  --font-nav: 'Oswald', 'Noto Sans JP', sans-serif; /* ナビ/ラベル */

  --container: 1200px;
}

/* 数字LCDユーティリティ（純数字にのみ使う） */
.digital { font-family: var(--font-digital); font-style: italic; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 2.0;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: var(--container); max-width: calc(100% - 80px); margin: 0 auto; }

/* ---------- ヘッダー ---------- */
.site-header {
  height: 110px;
  display: flex; align-items: center;
  background: var(--bg-dark);
  position: sticky; top: 0; z-index: 100;
}
.site-header .inner {
  width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header .logo img { height: 46px; width: auto; }
.global-nav { display: flex; gap: 34px; }
.global-nav a {
  font-family: var(--font-nav);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
}
.global-nav a.active { color: var(--green); }

/* ---------- 英ディスプレイ見出し ----------
   頭文字だけグリーン。原本は字間広めのセグメント書体 */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.25;
  color: var(--white);
}
.display .g { color: var(--green); }
.display--xl { font-size: 96px; }   /* ページタイトル */
.display--lg { font-size: 64px; }   /* 大セクション */
.display--md { font-size: 40px; }   /* 中セクション */
.display--sm { font-size: 26px; }   /* 小ラベル */
.on-light .display, .display.dark { color: var(--text-dark); }

/* 見出し直下の和文サブ(字間広め) */
.display-sub {
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.5em; text-indent: 0.5em;
  text-align: center;
}

/* ---------- ページヒーロー(黒地・中央) ---------- */
.page-hero { text-align: center; padding: 130px 0 90px; }
.page-hero .display--xl { margin-bottom: 28px; }

/* ---------- セクション区切りの緑ドット ---------- */
.dot-divider { width: 12px; height: 12px; border-radius: 50%; background: var(--green); margin: 70px auto; }

/* ---------- read more ピル型ボタン ---------- */
.btn-more {
  display: inline-flex; align-items: center; gap: 38px;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 9px 26px;
  font-family: var(--font-nav); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.04em;
}
.btn-more .arrow { font-family: var(--font-body); }

/* ---------- 白反転セクション ---------- */
.on-light { background: var(--bg-light); color: var(--text-dark); }

/* ---------- フッター ---------- */
.site-footer { padding: 40px 0 110px; }
.site-footer .rule { border-top: 1px solid #ffffff; opacity: .85; margin-bottom: 46px; }
.site-footer .cols { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-links { display: grid; grid-template-columns: repeat(4, auto); gap: 14px 40px; justify-content: start; }
.footer-links a { font-size: 14.5px; font-weight: 700; letter-spacing: 0.1em; }
.footer-legal { margin-top: 34px; }
.footer-legal a {
  color: var(--green);
  font-family: var(--font-nav); font-size: 14.5px; font-weight: 600; letter-spacing: 0.08em;
}
.footer-legal p { font-size: 13.5px; font-weight: 500; margin-top: 6px; }
.site-footer .logo img { height: 52px; width: auto; }

/* ---------- CONTACT/RECRUITアンカーCTA(黒地・上向き三角) ---------- */
.cta-jump { text-align: center; padding: 60px 0; }
.cta-jump .display--lg { margin-bottom: 24px; }
.cta-jump .tri { width: 0; height: 0; margin: 26px auto 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-bottom: 18px solid var(--green); }