@charset "utf-8";
/* ==========================================================================
   ヨドラム工業 — DESIGN TOKENS
   --------------------------------------------------------------------------
   サイト全体で使う値はすべてここに集約します。
   各コンポーネントで色・余白・時間などを直接ベタ書きしないこと。
   ========================================================================== */
:root {

  /* ------------------------------------------------------------------
     COLOR — ブランド
     ------------------------------------------------------------------ */
  --c-navy:      #07182C;   /* Deep Navy     … メイン */
  --c-yellow:    #FFD400;   /* Safety Yellow … アクセント（全体の5〜10%） */
  --c-offwhite:  #F5F4EF;
  --c-black:     #111111;
  --c-white:     #FFFFFF;

  /* COLOR — Deep Navy スケール（濃い→薄い順。隣接セクションの単調化を防ぐ微差） */
  --c-navy-deep:  #04101E;   /* 最も濃い面（FOOTER / PREV・NEXT） */
  --c-navy-panel: #05121F;   /* 濃紺の上に置くパネル（WORKS INFO） */
  --c-navy-2:     #06192D;   /* WHY YILDIRIM / COMPANY 背景 */
  --c-navy-3:     #081D32;   /* SERVICE 背景（前後と差をつける） */
  --c-navy-tint:  #0C2340;   /* ネイビー上の面 */
  --c-navy-card:  #0B1F36;   /* 濃紺上のカード面 */
  --c-ink:        #1B2735;               /* 明色地の本文 */
  --c-ink-mute:   #5B6875;               /* 明色地の弱いテキスト */
  --c-on-navy:         rgba(255,255,255,.94);
  --c-on-navy-mute:    rgba(255,255,255,.66);
  --c-yellow-deep: #E5BE00;              /* 白地で黄色を文字に使う場合 */

  /* COLOR — HERO オーバーレイ（写真を暗くしすぎない） */
  --c-veil-top:    rgba(7,24,44,.60);
  --c-veil-mid:    rgba(7,24,44,.16);
  --c-veil-focus:  rgba(7,24,44,.56);    /* コピー周辺 */
  --c-veil-bottom: rgba(7,24,44,.76);

  /* ------------------------------------------------------------------
     BORDER
     ------------------------------------------------------------------ */
  --bd-w:      1px;
  --bd-light:  rgba(7,24,44,.12);        /* 明色地の罫線 */
  --bd-navy:   rgba(255,255,255,.12);    /* ネイビー上の罫線 */
  --bd-accent: 2px;                      /* 黄色ラインの太さ */

  /* 角丸は原則使わない（Straight / Industrial） */
  --radius:    0;
  --radius-sm: 2px;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — ファミリー
     ------------------------------------------------------------------ */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Oswald", "Helvetica Neue", Arial, sans-serif;
  /* 見出し用の太明朝（力強い×洗練） */
  --font-display: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  /* 数字用の等幅（図面的・テクノ） */
  --font-num: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* TYPOGRAPHY — ウェイト */
  --fw-hero:    900;   /* HERO 社名 */
  --fw-display: 800;   /* セクション見出し */
  --fw-bold:    700;   /* 小見出し・カードタイトル・英字ラベル */
  --fw-medium:  500;
  --fw-body:    400;

  /* TYPOGRAPHY — サイズ */
  --fs-label:  clamp(.68rem, .34vw + .6rem, .78rem);
  --fs-body:   clamp(.94rem, .3vw + .87rem, 1.02rem);
  --fs-lead:   clamp(1rem, .5vw + .9rem, 1.14rem);
  --fs-h2:     clamp(1.75rem, 3.4vw + .5rem, 3.5rem);
  --fs-h3:     clamp(1.12rem, .9vw + .9rem, 1.5rem);
  --fs-small:  .8rem;

  /* TYPOGRAPHY — 字間（英字ラベルは広めに） */
  --ls-label: .34em;
  --ls-en:    .16em;
  --ls-jp:    .04em;

  /* TYPOGRAPHY — 行送り */
  --lh-tight: 1.1;
  --lh-head:  1.36;
  --lh-body:  1.9;
  --lh-lead:  2.05;

  /* ------------------------------------------------------------------
     SPACING — 8px を基準にしたスケール
     ------------------------------------------------------------------ */
  --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:  96px;
  --sp-10: 128px;

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --wrap:        1360px;                       /* 最大コンテンツ幅 */
  --gutter:      clamp(20px, 5vw, 72px);
  --section-y:   clamp(64px, 6.4vw, 110px);    /* セクション上下パディング */
  --section-gap: clamp(34px, 3.6vw, 58px);     /* 見出し〜本体 */

  --header-h:        84px;                     /* HERO 上（コンパクトに） */
  --header-h-solid:  68px;                     /* スクロール後 */
  --cta-h:           46px;                     /* ヘッダー CTA の高さ */
  --hit:             44px;                     /* 最小タップ領域 */

  /* ------------------------------------------------------------------
     TRANSITION / EASING
     ------------------------------------------------------------------ */
  --t-fast:   160ms;
  --t-base:   260ms;   /* ヘッダーの色変化など（仕様: 200〜300ms） */
  --t-slow:   620ms;
  --t-reveal: 1100ms; /* マスクリベール */

  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-mask: cubic-bezier(.76, 0, .24, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);

  /* ------------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------------ */
  --z-base:   1;
  --z-sticky: 50;
  --z-menu:   200;
  --z-header: 300;   /* メニュー展開中も閉じるボタンを押せるよう上に置く */
  --z-loader: 400;
  --z-skip:   500;
}

@media (max-width: 1000px) {
  :root {
    --header-h:       64px;
    --header-h-solid: 58px;
  }
}