@charset 'UTF-8';

/**
 * CSS Variables - Design Tokens
 * CEOの判断で一括カラー変更が可能
 */

:root {
  /* ========================================
   * カラースキーム - TonTon風
   * ======================================== */
  --color-primary: #000000;        /* メインカラー(黒) */
  --color-accent: #b70606;         /* アクセントカラー(赤) */
  --color-bg-main: #ffffff;        /* 背景色(白) */
  --color-bg-sub: #f7f7f7;         /* サブ背景色(薄いグレー) */
  --color-text-main: #000000;      /* テキストカラー */
  --color-text-inverse: #ffffff;   /* 反転テキスト */
  --color-border: #cbcbcb;         /* ボーダー */
  --color-disabled: #999999;       /* 無効状態 */

  /* ========================================
   * タイポグラフィ
   * ======================================== */
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-base: var(--font-ja);

  /* ベースフォントサイズ: 12.6666666667px = 19px/1.5 */
  --base-font-size: 12.6666666667px;

  /* フォントサイズ (rem単位) */
  --font-size-xs: 0.9473684211rem;   /* 約12px */
  --font-size-sm: 1.1052631579rem;   /* 約14px */
  --font-size-base: 1.2631578947rem; /* 約16px */
  --font-size-md: 1.5789473684rem;   /* 約20px */
  --font-size-lg: 1.8947368421rem;   /* 約24px */
  --font-size-xl: 2.5263157895rem;   /* 約32px */
  --font-size-2xl: 3.7894736842rem;  /* 約48px */
  --font-size-3xl: 4.5rem;           /* 約57px - キャッチコピー用 */

  /* 行間 */
  --line-height-tight: 1em;
  --line-height-normal: 1.2em;
  --line-height-relaxed: 1.8em;

  /* フォントウェイト */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  /* ========================================
   * スペーシング
   * ======================================== */
  --spacing-xs: 0.3157894737rem;   /* 約4px */
  --spacing-sm: 0.9473684211rem;   /* 約12px */
  --spacing-md: 2.2736842105rem;   /* 約29px */
  --spacing-lg: 3.9473684211rem;   /* 約50px */
  --spacing-xl: 6.3157894737rem;   /* 約80px */
  --spacing-2xl: 11.8421052632rem; /* 約150px */

  /* セクション間マージン */
  --section-margin: var(--spacing-2xl);

  /* ========================================
   * レイアウト
   * ======================================== */
  --container-width: 90rem;           /* 約1140px */
  --content-width: 83.6842105263rem;  /* 約1060px */
  --form-width: 66.3157894737rem;     /* 約840px */

  /* ========================================
   * ボタン
   * ======================================== */
  --btn-width: 25.2631578947rem;      /* 約320px */
  --btn-height: 5.0526315789rem;      /* 約64px */
  --btn-skew-angle: -21.3368592918deg; /* 斜めカット角度 */

  /* ========================================
   * アニメーション・トランジション
   * ======================================== */
  --transition-base: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  --transition-fast: 0.2s ease-out;
  --transition-slow: 0.5s ease-in-out;

  /* ========================================
   * ボーダー・角丸
   * ======================================== */
  --border-width: 1px;
  --border-width-bold: 2px;
  --border-radius-sm: 0.1578947368rem;  /* 約2px */
  --border-radius-md: 0.9473684211rem;  /* 約12px */

  /* ========================================
   * シャドウ
   * ======================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

  /* ========================================
   * Z-index
   * ======================================== */
  --z-index-base: 1;
  --z-index-dropdown: 10;
  --z-index-sticky: 100;
  --z-index-modal: 1000;
  --z-index-overlay: 1100;

  /* ========================================
   * ブレイクポイント
   * ======================================== */
  --breakpoint-sp: 900px;  /* スマートフォン */
  --breakpoint-pc: 901px;  /* PC */
  --breakpoint-tb: 768px;  /* タブレット */
  --breakpoint-sp-s: 420px; /* 小型スマートフォン */
}

/* ========================================
 * レスポンシブ用のルートフォントサイズ調整
 * ======================================== */
@media screen and (max-width: 900px) {
  :root {
    /* SPでは若干小さめに調整 */
    --base-font-size: 10.24px;  /* 約16px/1.5625 */
  }
}