@charset "UTF-8";
/* =====================================================================
   デザインルール（tokens.css）
   ---------------------------------------------------------------------
   色・文字・余白・角の丸み・動きの速さを、ここ1か所にまとめています。
   値を変えると、ページ全体の同じ名前を使っている場所にまとめて反映されます。
   ・PC用の値 …… 下の「:root { … }」
   ・スマホ用の値 …… ファイル末尾の「スマホ（画面幅600px以下）」
   ・タブレット用の値 …… ファイル末尾の「タブレット（画面幅601〜1024px）」
   詳しい一覧は docs/デザインルール一覧.md を見てください。
   ===================================================================== */

:root {
  /* -------------------------------------------------------------------
     1. 色（DS20 の定義）
     ------------------------------------------------------------------- */
  --color-bg-page: #ECEDF5;        /* ページの背景（トップ画像の背景と同じ色） */
  --color-bg-light: #F5F6FA;       /* 背景1（薄い）※現在は未使用。予備 */
  --color-bg-dark: #E1E3EB;        /* 背景2（濃い）※現在は未使用。予備 */
  --color-card-white: #FFFFFF;     /* 白カード（10のこだわり・チャンス・参加方法） */
  --color-card-black: #343538;     /* 黒カード（20年の歩みの帯の背景、参加方法の番号） */
  --color-button-black: #1D1E1F;   /* 黒ボタン（エントリーボタン、こだわりの矢印、選択中のドット） */
  --color-button-gray: #68788E;    /* 灰色ボタン（ストアを開く／アプリを開く） */
  --color-button-light: #B6C3D6;   /* 薄いボタン（未選択のドット） */
  --color-button-low: #D7DCE5;     /* 20年の歩みの矢印ボタン */
  --color-button-accent: #008A00;  /* 強調ボタン（緑）※現在は未使用。予備 */
  --color-text-main: #1D1E1F;      /* メインテキスト */
  --color-text-sub: #68788E;       /* サブテキスト（コピーライト） */
  --color-text-accent: #008A00;    /* 強調テキスト（緑の見出し） */
  --color-text-white: #FFFFFF;     /* 白テキスト */
  --color-text-year: #A7ABB2;      /* 20年の歩みの年の数字 */
  --color-divider: rgba(0, 0, 0, 0.15); /* 区切り線 */

  /* -------------------------------------------------------------------
     2. 書体
     ------------------------------------------------------------------- */
  --font-base: "Roboto", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; /* 欧文Roboto＋和文Noto Sans JP */
  --font-year: "Poppins", "Century Gothic", sans-serif;  /* 年の数字（Poppins Light Italic） */

  /* 文字の太さ */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;
  --weight-year: 300;

  /* -------------------------------------------------------------------
     3. 文字サイズ（PC）
     ------------------------------------------------------------------- */
  --fs-greeting: 20px;        /* 挨拶文 */
  --fs-section-title: 32px;   /* 中見出し（20年の歩み 10のトピック／10のこだわり） */
  --fs-sub-title: 22px;       /* 小見出し（キャンペーンの参加方法／概要）、応募期間の日付 */
  --fs-card-title-topic: 18px; /* 20年の歩みのカード見出し */
  --fs-card-title: 18px;      /* 10のこだわりのカード見出し、チャンスの見出し */
  --fs-card-body: 14px;       /* カードの本文 */
  --fs-lead: 15px;            /* 応募期間の下の説明文 */
  --fs-prize: 20px;           /* チャンス1の 1等・2等 の行 */
  --fs-entry: 20px;           /* エントリーボタン（大） */
  --fs-button: 14px;          /* 小さいボタン（ヘッダー、ストアを開く等） */
  --fs-step-who: 13px;        /* 参加方法のカード上のラベル */
  --fs-step-body: 15px;       /* 参加方法のカードの説明 */
  --fs-step-num: 16px;        /* 参加方法の番号 */
  --fs-ov-title: 14px;        /* 概要の項目見出し */
  --fs-ov-body: 12px;         /* 概要の本文 */
  --fs-year: 56px;            /* 年の数字 */
  --fs-footer: 12px;          /* コピーライト */

  /* 行間 */
  --lh-tight: 1.3;
  --lh-heading: 1.4;
  --lh-body: 1.6;
  --lh-greeting: 2.1;

  /* -------------------------------------------------------------------
     4. 余白（4の倍数のルール）
     ページ内では、この段階の名前だけを使います。
     ------------------------------------------------------------------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* 場所ごとの余白（上の段階から選んでいます） */
  --page-side: var(--space-96);            /* 中身の左右の余白 */
  --header-height: 64px;
  --header-side: var(--space-32);
  --greeting-pad-top: var(--space-56);
  --greeting-pad-bottom: var(--space-56);
  --big-title-pad-top: var(--space-80);    /* 大見出しの上 */
  --topics-pad: var(--space-56);           /* 20年の歩みの帯の上下 */
  --kodawari-pad: var(--space-56);         /* 10のこだわりの上下 */
  --section-title-gap: var(--space-40);    /* 中見出しの下 */
  --present-gap: var(--space-40);          /* プレゼント欄のブロック同士の間 */
  --present-pad-bottom: var(--space-56);
  --howto-extra-top: var(--space-40);      /* 参加方法・概要の上に足す余白（合計80px） */

  /* カードの大きさと間隔 */
  --topic-card-width: 320px;
  --topic-gap: var(--space-80);
  --topic-inner-gap: var(--space-32);      /* 画像・文章・年の間 */
  --kodawari-card-width: 560px;
  --kodawari-card-min-height: 456px;
  --kodawari-gap: var(--space-56);
  --kodawari-pad-top: var(--space-48);
  --kodawari-pad-side: var(--space-48);
  --kodawari-pad-bottom: var(--space-32);
  --kodawari-inner-gap: var(--space-24);
  --kodawari-label-height: 48px;           /* 帯見出しの高さ（中の文字22px） */

  /* -------------------------------------------------------------------
     5. 角の丸み
     ------------------------------------------------------------------- */
  --radius-8: 8px;     /* こだわりカードの画像 */
  --radius-12: 12px;   /* 参加方法の番号の丸 */
  --radius-16: 16px;   /* ボタン、トピック画像 */
  --radius-card: 40px; /* カード（PC） */

  /* -------------------------------------------------------------------
     6. 部品の大きさ
     ------------------------------------------------------------------- */
  --top-mark-max: 640px;          /* 20thマークの最大の大きさ */
  --header-title-height: 40px;    /* ヘッダーのタイトル画像の高さ（幅は自動） */
  --button-height: 40px;          /* 小さいボタン、矢印ボタン */
  --entry-width: 400px;           /* エントリーボタン（大）の幅 */
  --entry-height: 64px;           /* エントリーボタン（大）の高さ */
  --icon-size: 24px;              /* ボタン内のアイコン */
  --year-row-height: 56px;        /* 年の数字の行の高さ */
  --k-nav-width: 356px;           /* こだわりの「矢印＋ドット」の幅 */
  --dot-size: 6px;                /* ドット */
  --chance-height: 480px;         /* チャンスカードの高さ（PC） */
  --chance-badge-width: 64px;     /* 「チャンス1/2」のリボン */
  --chance1-image-width: 348px;   /* Amazonギフト券の画像 */
  --chance2-image-width: 348px;   /* 自車アイコンの画像 */
  --chance2-image-height: 100%;
  --step-card-width: auto;        /* 参加方法のカード（PCは3等分） */
  --step-num-size: 24px;          /* 参加方法の番号の丸 */
  --step-image-size: 144px;       /* 参加方法のイラスト */
  --step-arrow-size: 32px;        /* 参加方法の矢印 */
  --footer-logo-width: 144px;     /* フッターのNAVITIMEロゴ */
  --heading-image-width: 442px;   /* 大見出し画像の幅 */

  /* -------------------------------------------------------------------
     7. 動き（速さ・待ち時間）※main.js もここの値を読みます
     ------------------------------------------------------------------- */
  --motion-dissolve: 1.2s;          /* 読み込み時・スクロール時のディゾルブ（トップ画像・ヘッダー） */
  --motion-step-1-to-2: 500ms;      /* 読み込み時：20が表示されてから、矢印を描き始めるまで */
  --motion-step-2-to-3: 1500ms;     /* 読み込み時：矢印を描き始めてから、ヘッダーを表示するまで */
  --motion-arrow-delay: 0ms;        /* 読み込み時：矢印を描き始めるまでの追加の待ち時間（通常は0） */
  --motion-arrow-draw: 0.8s;        /* 読み込み時：矢印を一筆書きで描く時間（左上→左下→右下→右上） */
  --motion-text-delay: 600ms;       /* 読み込み時：矢印を描き始めてから、文字などが出始めるまで（描き終わる直前） */
  --motion-text-dissolve: 2s;       /* 読み込み時：文字などのディゾルブの時間 */
  --motion-reveal: 0.9s;            /* 画面に入った要素が表示される時間 */
  --motion-reveal-distance: 48px;   /* 画面に入った要素が下から動く距離 */
  --motion-reveal-stagger: 0.12s;   /* 横に並ぶ要素を順番に表示するずらし幅 */
  --motion-reveal-offset: 12%;      /* 画面の下から何%入ったら表示するか */
  --motion-hover: 0.2s;             /* ボタンにマウスを乗せたときの色の変化 */
  --motion-scroll-threshold: 24;    /* 何px下にスクロールしたら画像A→B・ヘッダーを隠すか（数字のみ） */
}

/* ---------------------------------------------------------------------
   タブレット（画面幅601〜1024px）
   --------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --page-side: var(--space-40);
    --chance-height: auto;
    --step-card-width: 236px;   /* タブレットでも参加方法は横スクロール */
  }
}

/* ---------------------------------------------------------------------
   スマホ（画面幅600px以下）
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    /* 文字サイズ */
    --fs-greeting: 16px;
    --fs-section-title: 23px;
    --fs-sub-title: 18px;
    --fs-card-title-topic: 17px;
    --fs-card-title: 16px;
    --fs-card-body: 14px;
    --fs-lead: 14px;
    --fs-prize: 15px;
    --fs-entry: 18px;
    --fs-step-body: 15px;
    --fs-ov-title: 14px;
    --fs-ov-body: 12px;
    --fs-year: 44px;

    /* 余白 */
    --page-side: var(--space-20);
    --header-height: 56px;
    --header-side: var(--space-24);
    --greeting-pad-top: var(--space-40);
    --greeting-pad-bottom: var(--space-48);
    --big-title-pad-top: var(--space-56);
    --topics-pad: var(--space-40);
    --kodawari-pad: var(--space-44);
    --section-title-gap: var(--space-28);
    --present-gap: var(--space-32);
    --present-pad-bottom: var(--space-40);
    --howto-extra-top: var(--space-32);

    /* カード */
    --topic-card-width: 280px;
    --topic-gap: var(--space-32);
    --topic-inner-gap: var(--space-16);
    --kodawari-card-width: 330px;
    --kodawari-card-min-height: 0px;
    --kodawari-gap: var(--space-16);
    --kodawari-pad-top: var(--space-48);
    --kodawari-pad-side: var(--space-16);
    --kodawari-pad-bottom: var(--space-40);
    --kodawari-inner-gap: var(--space-24);
    --kodawari-label-height: calc(48px * 18 / 22); /* 帯の中の文字が18pxになる高さ */

    /* 角の丸み */
    --radius-card: 28px;

    /* 部品の大きさ */
    --top-mark-max: 384px;
    --header-title-height: 32px;
    --entry-height: 56px;
    --year-row-height: 48px;
    --chance-height: auto;
    --chance-badge-width: 52px;
    --chance1-image-width: 300px;
    --chance2-image-width: 300px;
    --chance2-image-height: 300px;
    --step-card-width: 236px;
    --step-arrow-size: 24px;
    --footer-logo-width: 112px;
    --heading-image-width: 306px;
  }
}