/* ===================================================
   variables.css — デザイン設計値（Figma準拠）
   =================================================== */

html{font-size:62.5%;}
@media screen and (max-width:1279px){
html{font-size:56.25%;}
}

:root {
    /* === カラー === */
    --color-primary: #006cbf;
    --color-primary-dark: #0c56a0;
    --color-accent: #00afec;
    --color-accent-light: #00a0e9;
    --color-deep-blue: #004098;
    --color-text: #333333;
    --color-text-dark: #404040;
    --color-text-gray: #999999;
    --color-white: #ffffff;
    --color-bg-nav: #f2fbfe;
    --color-bg-cta: #fffddc;
    --color-bg-btn: #fefff5;
    --color-bg-alliance: #fafeff;
    --color-bg-card: #fbfbfb;
    --color-bg-gray: #f0f3f5;
    --color-border-blue: #abe4fe;
    --color-border-gray: #d9d9d9;
    --color-border-dark: #d0d6e4;
    --color-border-light: #cdd6dd;
    --color-tab-inactive: #efefef;
    --color-overlay: rgba(12, 86, 160, 0.6);

    /* === グラデーション === */
    --gradient-cta: linear-gradient(72.2236deg, rgb(0, 108, 191) 4.3262%, rgb(0, 175, 236) 24.623%, rgb(63, 192, 223) 78.967%, rgb(248, 244, 186) 101.31%);
    /* ホバー時：カラーストップ右シフトで左の濃青領域を拡張 + 8%青オーバーレイで全体を暗化（Figma準拠） */
    --gradient-cta-hover:
        linear-gradient(90deg, rgba(12, 86, 160, 0.08) 0%, rgba(12, 86, 160, 0.08) 100%),
        linear-gradient(72.2236deg, rgb(0, 108, 191) 4.3262%, rgb(0, 175, 236) 56.62%, rgb(63, 192, 223) 84.046%, rgb(248, 244, 186) 101.31%);

    /* === フォント === */
    --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-heading: "Zen Old Mincho", "Noto Serif JP", serif;
    --font-serif: "Noto Serif JP", serif;

    /* === フォントサイズ === */
    --fz-xxs: 1.0rem;
    --fz-xs: 1.2rem;
    --fz-sm: 1.4rem;
    --fz-base: 1.6rem;
    --fz-lg: 1.8rem;
    --fz-xl: 2.0rem;
    --fz-2xl: 2.4rem;
    --fz-3xl: 2.8rem;
    --fz-4xl: 3.2rem;
    --fz-5xl: 3.6rem;
    --fz-6xl: 6.4rem;

    /* === 余白 === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 56px;
    --space-4xl: 64px;
    --space-5xl: 80px;

    /* === 角丸 === */
    --radius-sm: 8px;
    --radius-card: 10px;
    --radius-md: 20px;
    --radius-lg: 64px;
    --radius-xl: 80px;
    --radius-pill: 100px;

    /* === シャドウ === */
    --shadow-header: 0px 2px 4px rgba(0, 0, 0, 0.14);
    --shadow-btn: 0px 2px 0px 0px #abe4fe;

    /* === トランジション === */
    --transition-base: 0.3s ease;

    /* === レイアウト === */
    --content-width: 1280px;
    --content-narrow: 1080px;
    --header-height: 126px;

    /* === z-index === */
    --z-header: 1000;
    --z-drawer: 1100;
    --z-overlay: 1050;
}

/* ===== レスポンシブ：ヘッダー高さ上書き（≤1024px はハンバーガー＝64px） ===== */
@media screen and (max-width: 1279px) {
  :root {
      --header-height: 122px;
  }
}
@media screen and (max-width: 1024px) {
    :root {
        --header-height: 64px;
    }
}

/* 管理バー分だけ上からの位置をずらす */
body.admin-bar .l-header {
    top: 32px;
  }
  
  @media screen and (max-width: 782px) {
    body.admin-bar .l-header {
      top: 46px;
    }
  }