/**
 * GoTicket v2 EC デザイントークン
 * Bootstrap の直後に読み込むこと。
 */
:root {
  /* --- レイアウト --- */
  --gt-layout-max-width: 1000px;
  --gt-space-header-offset: 85px;
  --gt-z-header: 999;
  --gt-main-pad-bottom: 50px;
  --gt-main-min-height: 88vh;

  /* --- サーフェス --- */
  --gt-color-page-frame: #dad6c772;
  --gt-color-surface: #ffffff;
  --gt-color-surface-hover: #f5f5f5;
  --gt-color-surface-tint: #fffff0;

  /* --- ブランド（ティール・見出し帯・主 CTA） --- */
  --gt-color-primary: #008080;
  --gt-color-primary-hover: #008b8b;
  --gt-color-link-title: #4169e1;
  --gt-color-accent-rule: #f2b036;
  --gt-color-accent-rule-hover: #e0a331;

  /* --- ニュートラル --- */
  --gt-color-neutral-dark: #393e46;
  --gt-color-coral: #ef6e4e;
  --gt-color-alto: #b9b7b7;
  --gt-color-teal-named: teal;
  --gt-color-text: #000000;
  --gt-color-text-muted: #333333;
  --gt-color-text-soft: #555555;
  --gt-color-text-softer: #666666;
  --gt-color-border: #a9a9a9;
  --gt-color-form-border: #d1d1d1;
  --gt-color-border-light: #eeeeee;
  --gt-color-border-medium: #dddddd;
  --gt-color-disabled: #a7a7a7;
  --gt-color-slate: #2f4f4f;

  /* --- ボタン（オレンジ・危険） --- */
  --gt-color-btn-orange: #ff8c00;
  --gt-color-btn-orange-hover: #ffaa00;
  --gt-color-btn-danger: #ff4500;
  --gt-color-btn-danger-hover: #ff0000;

  /* --- 意味付き --- */
  --gt-color-danger: #ff3333;
  --gt-color-danger-bg: #ffeeee;
  --gt-color-on-primary: #ffffff;

  /* --- フッター --- */
  --gt-color-footer-bg: #c0c0c0;
  --gt-color-footer-text: #555555;
  --gt-color-footer-border: #eeeeee;

  /* --- 購入履歴等 --- */
  --gt-color-bg-subtle: #f8f9fa;
  --gt-color-border-card: #e9ecef;

  /* --- 座席リスト --- */
  --gt-color-seat-available: #ececec;
  --gt-color-seat-taken: #808080;
  --gt-color-seat-field-border: #eee8aa;
  --gt-color-seat-header-bg: #ff8c00;

  /* --- 形状・動き（ブラッシュアップ） --- */
  --gt-radius-sm: 6px;
  --gt-radius-md: 8px;
  --gt-radius-seat: 15px;
  --gt-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.12);
  --gt-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --gt-shadow-header: 0 2px 12px rgba(0, 0, 0, 0.06);
  --gt-transition: 0.2s ease;
  --gt-focus-ring-color: rgba(0, 128, 128, 0.45);
  --gt-focus-ring: 0 0 0 3px var(--gt-focus-ring-color);

  /* --- タイポ --- */
  --gt-line-height-tight: 1.35;
  --gt-font-size-h2-sm: 16px;
  --gt-font-size-h2-xs: 14px;

  /* --- トップ（ヒーロー）--- 体操会場バナーに合わせたネイビー系 */
  --gt-color-hero-overlay: rgba(10, 28, 52, 0.88);
  --gt-color-hero-overlay-soft: rgba(26, 58, 92, 0.5);
  --gt-color-hero-text: #ffffff;
  --gt-hero-min-height: 220px;
  --gt-hero-max-height: 420px;

  /* --- 会員エリア --- */
  --gt-member-auth-max: 480px;
  --gt-member-card-accent: 4px solid var(--gt-color-primary);
  --gt-mypage-card-min: 240px;
}

/* 固定ヘッダー実高：SP でロゴ＋ログインが縦積みになり 85px を超えるため body の余白を拡張 */
@media screen and (max-width: 798px) {
  :root {
    --gt-space-header-offset: 90px;
  }
}

@media screen and (max-width: 450px) {
  :root {
    --gt-space-header-offset: 85px;
  }
}

@media screen and (max-width: 380px) {
  :root {
    --gt-space-header-offset: 85px;
  }
}