@charset "utf-8";
/* ==========================================================================
   variables.css — カラー・タイポ・レイアウト値を一元管理
   カンプ（アートボード 1920px）の実測値を基準にしている。
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COLOR
     ------------------------------------------------------------------ */
  --c-accent:          #DD3615;   /* ブランドオレンジ（ボタン・ドット・矢印） */
  --c-accent-dark:     #C22E10;
  --c-accent-light:    #f8911b;   /* プライマリボタンのホバー */

  --c-bg:              #F5F5F4;   /* ページ地（ヘッダー・FV・About・物流） */
  --c-white:           #FFFFFF;
  --c-dark:            #222222;   /* 暗色セクション・フッター・ボタン */
  --c-darkness:        #202020;   /* ダークネスネスセクション */
  --c-black:           #0A0A0A;   /* SNSセクションのストライプ */

  --c-text:            #333333;   /* 基本文字色 */
  --c-text-strong:     #222222;
  --c-text-sub:        #666666;
  --c-text-light:      #999999;   /* 日付・英字ラベル */

  --c-line:            #DFDFD7;   /* 明色地の罫線 */
  --c-line-list:       #CECEC5;   /* Newsリストの罫線 */
  --c-line-dark:       #4E4E4E;   /* 暗色地の罫線（見出し下） */
  --c-line-footer:     #333333;   /* フッターの罫線 */

  --c-en-heading:      #D3D3CC;   /* 「About Us」等の大英字（明色地） */
  --c-en-heading-dark: #CECEC5;   /* 「Service」（暗色地） */

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     本文：Noto Sans JP 400（場合により 500 / 600 / 700）
     見出し：Shippori Mincho → 游明朝
     英字：Lato
     ------------------------------------------------------------------ */
  --ff-base:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --ff-min:   "Shippori Mincho", "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", serif;
  --ff-en:    "Lato", "Helvetica Neue", Arial, sans-serif;

  --fz-base:  16px;
  --fz-xs:    12px;
  --fz-sm:    13px;
  --fz-md:    15px;
  --fz-lg:    18px;
  --fz-xl:    22px;
  --fz-2xl:   24px;

  --lh-base:  2;
  --lh-tight: 1.5;

  --ls-base:  0.04em;
  --ls-wide:  0.1em;
  --ls-en:    0.15em;

  /* ------------------------------------------------------------------
     LAYOUT — 1920px時のカンプ実測から
       ヘッダー  : 左右 80px  → 1760px
       FV        : 左右 120px → 1680px
       本文      : 左右 200px → 1520px
       狭幅      : 左右 400px → 1120px（SNS・News・フッターサイトマップ）
       フッター下部罫線 : 左右 160px → 1600px
     ------------------------------------------------------------------ */
  --w-header:   1760px;
  --w-hero:     1680px;
  --w-main:     1520px;
  --w-narrow:   1120px;
  --w-footer:   1600px;
  --gutter:     40px;

  --header-h:   150px;
  --header-h-compact: 90px;

  /* ------------------------------------------------------------------
     SHAPE / MOTION / Z
     ------------------------------------------------------------------ */
  --r-pill:     999px;
  --r-card:     4px;

  --shadow-bar:  0 12px 30px rgba(0, 0, 0, .06);
  --shadow-cta:  0 10px 30px rgba(221, 54, 21, .35);
  --shadow-photo: 0 20px 50px rgba(0, 0, 0, .35);

  --dur:        .3s;
  --dur-slow:   .8s;
  --ease:       cubic-bezier(.33, 1, .68, 1);

  --z-header:   100;
  --z-cta:      150;
  --z-overlay:  200;
  --z-drawer:   210;
}

/* PC：画面の縦が低いノートPC向けに、ヘッダー高さを vh に追従させる（1000px以上の高さで従来の150px） */
@media screen and (min-width: 1200px) {
  :root {
    --header-h: clamp(88px, 15vh, 150px);
    --header-h: clamp(88px, 15svh, 150px);
  }
}

/* ==========================================================================
   ブレイクポイント
     SP  :         ~ 767px
     TAB : 768px  ~ 1199px
     PC  : 1200px ~
   ========================================================================== */
@media screen and (max-width: 1199px) {
  :root {
    --gutter:   32px;
    --header-h: 90px;
    --header-h-compact: 72px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --gutter:   20px;
    --header-h: 76px;
    --header-h-compact: 64px;
    --lh-base:  1.9;
  }
}