@charset "utf-8";
/* ============================================================
   NOEX 次期サイト — デザイントークン
   ------------------------------------------------------------
   出典: preview.studio.site/live/.../noex-top の算出スタイルと
         スタイルシート内の @media ルールを実測して抽出（2026-09-11）

   ここに無い色・級数・余白は使わない。
   このファイルは人間が管理する。AI の更新ツールからは触らせない。
   ============================================================ */

/* ---------- 1. ブレークポイント ----------
   Studio が実際に使っていた 4 段階。media クエリから抽出。
     1280px : ワイド → 標準PC
      768px : PC → タブレット（レイアウトが最も大きく動く）
      540px : タブレット → スマホ
      320px : 極小端末の微調整
   CSS 変数はメディアクエリ条件に使えないため、
   ブレークポイントは下の @media に直接書いた数値が正。
   ここは参照用の控え。
-------------------------------------------- */

:root {
  /* ---------- 2. 色（実測で使われていた 8 色） ---------- */
  --c-accent:      #E22A1F;  /* 製品名・強調・アクティブ状態 */
  --c-ink:         #0F0F0F;  /* 見出し */
  --c-body:        #333333;  /* 本文 */
  --c-muted:       #606060;  /* 補助テキスト */
  --c-faint:       #A3A3A3;  /* キャプション・非活性 */
  --c-surface:     #FFFFFF;  /* ページ地 */
  --c-surface-alt: #F6F6F6;  /* カード地 */
  --c-line:        #EEEEEE;  /* 罫線 */

  /* 派生（実測値から算出。単独では使わず、下の用途変数経由で参照する） */
  --c-accent-hover: #C41F15;
  --c-overlay:      rgba(15, 15, 15, .55);

  /* ---------- 3. 書体 ---------- */
  --f-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", system-ui, sans-serif;
  --f-en: "Inter", "Noto Sans JP", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---------- 4. 級数 ----------
     実測では 11〜80px の 18 段階が使われていたが、
     1〜2px 差は誤差とみなして 9 段階に整理した。
     768px 以下の値は @media で上書きする（実測ベース）。
  -------------------------------------------- */
  --fs-display: 56px;  /* ヒーロー "make our next" */
  --fs-h1:      48px;
  --fs-h2:      34px;  /* セクション見出し */
  --fs-h3:      24px;  /* カード見出し・製品名 */
  --fs-lg:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-2xs:     11px;  /* 英字ラベル */

  --lh-tight: 1.35;
  --lh-head:  1.5;
  --lh-body:  1.9;
  --ls-label: .14em;   /* 英字ラベルの字間 */
  --ls-head:  .01em;

  /* ---------- 5. 余白 ----------
     実測 4/8/12/13/16/24/30/32/56/65/76/100 を 4 の倍数に丸めた。
  -------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-14: 56px;
  --sp-20: 80px;
  --sp-25: 100px;   /* セクション間 */

  /* ---------- 6. 角丸 ---------- */
  --r-sm:   6px;    /* タグ・小ボタン */
  --r-md:  12px;    /* カード */
  --r-pill: 999px;  /* フィルタタブ */
  --r-full: 50%;    /* 丸アイコン */

  /* ---------- 7. レイアウト ---------- */
  --container:    1188px;   /* 実測。2カラム時は 522px + gap */
  --gutter:         24px;
  --col-gap:       144px;
  --header-h:       72px;

  /* ---------- 8. その他 ---------- */
  --dur: 200ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --z-header: 100;
  --z-menu:   200;
}

/* ---------- 級数の可変分（実測: 768px 以下で display 系が大きく縮む） ---------- */
@media screen and (max-width: 1280px) {
  :root {
    --gutter: 20px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --fs-display: 38px;   /* 56 → 38 */
    --fs-h1:      32px;   /* 48 → 32 */
    --fs-h2:      28px;   /* 34 → 28 */
    --fs-h3:      24px;   /* 据え置き */
    --fs-lg:      18px;
    --fs-body:    15px;
    --fs-sm:      14px;
    --fs-xs:      12px;
    --sp-25:      64px;
    --sp-20:      48px;
    --col-gap:    32px;
    --gutter:     20px;
    --header-h:   60px;
  }
}

@media screen and (max-width: 540px) {
  :root {
    --fs-display: 32px;
    --fs-h1:      28px;
    --fs-xs:      13px;
    --gutter:     16px;
  }
}

@media screen and (max-width: 320px) {
  :root {
    --fs-display: 28px;
    --gutter:     12px;
  }
}

/* ============================================================
   ベース
   ここから下は最小限の土台のみ。
   コンポーネントの CSS は components.css に分ける。
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-body);
  font-family: var(--f-ja);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-accent); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

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

/* 英字ラベル（PRODUCT / OUR BUSINESS / NEWS …） */
.label-en {
  font-family: var(--f-en);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

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

/* セクション間 */
.section { padding-block: var(--sp-25); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}