@charset "utf-8";
:root {
  /* ===========================================
               固定値
=========================================== */
  /* ブランドカラー */
  --color-primary: #70c7d4;
  --color-secondary: #1f6b7a;
  --color-accent: #ea5d5f;
  --color-light-blue: #e4f4f6;
  --color-black: #394048;
  --color-navy: #1e3888;
  --color-background: #f7f9fa;
  --color-white: #ffffff;
  /* グレースケール */
  --color-gray-100: #f8f9fa; /* 現在のcomment-back */
  --color-gray-300: #e0e0e0; /* light-gray */
  --color-gray-500: #8b95a1; /* gray */
  --color-gray-700: #6b7280; /* label-gray */
  /* 状態カラー */
  --color-error: #dc2626;
  --color-success: #059669; /* 成功状態 */
  --color-warning: #d97706; /* 警告・重要 */
  --color-link: #2563eb;
  --color-link-visited: #7c3aed;

  /* ---------------------------
     タイポグラフィ
     --------------------------- */
  /* フォント */
  --font-normal: 400;
  --font-mid: 500;
  --font-bold: 600;
  --font-max-bold: 700;

  /* フォントサイズ */
  --font-caption: clamp(1.2rem, 0.2vw, 1.3rem); /* 12px → 13px */
  --font-sm: clamp(1.4rem, 1.5vw, 1.6rem); /* 14px → 16px */
  --font-body: 1.6rem; /* 16px 固定 */

  --font-h4: clamp(1.8rem, 1.5vw, 2.4rem); /* 18px → 24px */
  --font-h3: clamp(2.4rem, 2vw, 3rem); /* 24px → 30px */
  --font-h2: clamp(3.2rem, 2.5vw, 4.2rem); /* 32px → 42px */
  --font-h1: clamp(4rem, 3vw, 5.2rem); /* 40px → 52px */

  /* 特殊用途 */
  --section-ttl-en: clamp(4rem, 3vw, 5.2rem); /* 40px → 52px */
  --section-ttl-ja: clamp(
    1.8rem,
    1.429rem + 1.14vw,
    2.8rem
  ); /* 18px → 28px */

  /* 行間 */
  --lh-caption: 1.5;
  --lh-sm: 1.5;
  --lh-body: 1.6;
  --lh-h4: 1.3;
  --lh-h3: 1.3;
  --lh-h2: 1.2;
  --lh-h1: 1.1;

  /* レタースペーシング */
  --ls-caption: 0.01em;
  --ls-sm: 0.015em;
  --ls-body: 0.01em;
  --ls-h4: 0.02em;
  --ls-h3: 0.025em;
  --ls-h2: 0.03em;
  --ls-h1: 0.04em;

  --ls-section-ttl-ja: 0.015em;

  /* ---------------------------
     スペーシング
     --------------------------- */
  --space-2xs: 0.4rem; /* 4px - 細かな調整要素 */
  --space-xs: 0.8rem; /* 8px - アイコンなど密な関連要素 */
  --space-sm: 1.6rem; /* 16px - テキスト、密な関連要素 */
  --space-md: 2.4rem; /* 24px - 通常の要素間 */
  --space-lg: 3.2rem; /* 32px - 段落・コンポーネント間・カード内 */
  --space-xl: 4.8rem; /* 48px - 段落・コンポーネント間 */
  --space-2xl: 6.4rem; /* 64px - セクション内、見出し-コンテンツ間 */
  --space-3xl: clamp(
    8rem,
    6.183rem + 4.85vw,
    12rem
  ); /* 80px-120px - セクション間 */

  --section-inner-gap: 4.8rem;
  /* ================================
     ボタンシステム
  ================================ */
  --btn-height: 4.8rem;
  --btn-padding-x: 2.4rem;
  --btn-padding-y: 1.2rem;
  --btn-gap: 0.8rem;
  --btn-icon-size: 2rem;
  --btn-radius: 4px;

  --btn-transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --btn-hover-lift: -3px;
  --btn-active-press: 1px;

  /* 統一された影システム - 背景色に依存しない */
  --btn-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  --btn-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15),
    0 3px 10px rgba(0, 0, 0, 0.08);
  --btn-shadow-active: 0 1px 3px rgba(0, 0, 0, 0.12);

  /* 色付きボタン専用の影（ブランドカラーを活用） */
  --btn-primary-shadow: 0 2px 8px rgba(31, 107, 122, 0.2),
    0 1px 4px rgba(31, 107, 122, 0.1);
  --btn-primary-shadow-hover: 0 8px 25px rgba(31, 107, 122, 0.3),
    0 3px 10px rgba(31, 107, 122, 0.15);

  --btn-secondary-shadow: 0 2px 8px rgba(112, 199, 212, 0.2),
    0 1px 4px rgba(112, 199, 212, 0.1);
  --btn-secondary-shadow-hover: 0 8px 25px rgba(112, 199, 212, 0.3),
    0 3px 10px rgba(112, 199, 212, 0.15);

  --btn-cta-shadow: 0 2px 8px rgba(234, 93, 95, 0.2),
    0 1px 4px rgba(234, 93, 95, 0.1);
  --btn-cta-shadow-hover: 0 8px 25px rgba(234, 93, 95, 0.3),
    0 3px 10px rgba(234, 93, 95, 0.15);

  /* ホバー時の色変更（より統一された計算式） */
  --btn-primary-bg: var(--color-secondary);
  --btn-primary-text: var(--color-white);
  --btn-primary-hover: #174a56; /* 15%暗く */

  --btn-secondary-bg: var(--color-primary);
  --btn-secondary-text: #1f4a52;
  --btn-secondary-hover: #5ab0bd; /* 15%暗く */

  --btn-tertiary-bg: var(--color-white);
  --btn-tertiary-text: var(--color-secondary);
  --btn-tertiary-border: 2px solid var(--color-secondary);
  --btn-tertiary-hover-bg: rgba(31, 107, 122, 0.08);
  --btn-tertiary-hover-border: #174a56;

  --btn-cta-bg: var(--color-accent);
  --btn-cta-text: var(--color-white);
  --btn-cta-hover: #c74e50; /* 15%暗く */

  /* ==============================
     装飾系（色・影・角丸・動き）
     ============================== */
  /*基本影色 */
  --shadow-color: rgba(0, 24, 64, 0.08);

  /* 段階別影 */
  --shadow-xs: 0 1px 3px var(--shadow-color); /* 最小影（境界線的） */
  --shadow-sm: 0 2px 6px var(--shadow-color); /* 小さい影（軽やか） */
  --shadow-md: 0 4px 12px var(--shadow-color); /* 中程度影（標準） */
  --shadow-lg: 0 8px 24px var(--shadow-color); /* 大きい影（強調） */
  --shadow-xl: 0 12px 32px rgba(0, 24, 64, 0.12); /* 特大影（最強調） */

  /* 特殊影 */
  --outline-shadow: 0 0 8px 0 rgba(0, 24, 64, 0.14);
  --scroll-shadow: 0 2px 10px rgba(0, 24, 64, 0.1);
  --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);

  /* アニメーション */
  --transition-base: 250ms ease-out; /* 基本アニメーション */
  --transition-fast: 150ms ease-out;
  --transition-slow: 350ms ease-out; /* 速いアニメーション */
  --active-translate: 2px; /* クリック時の押し込み移動 */

  /* 角丸 */
  --outline-radius: 8px; /* コンテンツ全体の角丸 */
  --label-radius: 2px; /* ラベル角丸 */
  --image-radius: 4px;
  --voice-card-radius: 16px;

  /* アイコンサイズ */
  --voice-icon-size: clamp(20px, 8vw, 36px);

  /* コンポーネント系 */
  --btn-gap: 1.2rem; /* 12px - ボタン内のアイコン↔テキスト */
  --icon-gap: 0.8rem; /* 8px - 小さなアイコン↔テキスト */
  --badge-gap: 0.4rem; /* 4px - バッジ、タグ同士 */

  /* ================================
    ヘッダー
  ================================ */

  /* ヘッダー固有の設定 */
  --header-height: 60px;
  --header-blur: 8px;
  --header-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* タッチターゲット最小サイズ */
  --touch-target-min: 44px;

  /* アニメーション設定 */
  --animation-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ================================
   セクション
  ================================ */
  --section-padding-vertical: clamp(3.2rem, 6vw, 5.6rem);
  --section-padding-side: clamp(2.4rem, 4vw, 4rem);
  --section-gap-block: clamp(6.4rem, 8vw, 8.8rem);

  /* ================================
    ベネフィットエリア
  ================================ */
  /* MEMBER BENEFITSセクション専用変数 */
  --benefits-icon-size: clamp(52px, 13vw, 68px);
  --benefits-text-size: clamp(1.28rem, 2vw, 1.52rem);
  --benefits-gap-vertical: clamp(0.96rem, 1.5vw, 1.44rem);
  --benefits-item-padding: clamp(1.6rem, 3vw, 2.4rem);
  --benefits-grid-gap: clamp(2.4rem, 4vw, 3.2rem);

  /* ================================
    カードシステム
  ================================ */

  --card-inner-gap: clamp(var(--space-md), 3vw, var(--space-lg));
  --card-img-width: clamp(100%, 90vw, 1000px);

  --card-compact-x: var(--space-md);
  --card-compact-y: var(--card-compact);

  --card-standard-x: var(--space-lg);
  --card-standard-y: var(--space-md);

  --card-spacious-x: var(--space-lg);
  --card-spacious-y: var(--card-spacious);

  --card-shadow: var(--shadow-md);
  --card-hover-shadow: var(--shadow-lg);

  --voice-card-width: clamp(280px, 70vw, 320px);

  --card-radius: 4px;
}
