:root {

    /* ==========================================================================
       1. Colors (色彩設定)
       ========================================================================== */

    /* ============================================================
       Brand Colors (ロゴ由来のアイデンティティ)
       ============================================================ */
    --color-primary: #009BC1;
    /* メイン：信頼のブルー */
    --color-primary-dark: #007A99;
    --color-secondary: #FC4C86;
    /* アクセント：情熱のピンク */
    --color-secondary-light: #FFA07E;
    /* 補助：オレンジ系（グラデ用） */

    /* ============================================================
       Background & Surface (背景・土台)
       ============================================================ */
    --color-bg-main: #F8FAFB;
    /* サイト全体の地の色（淡いブルーグレー） */
    --color-bg-surface: #ffffff;
    /* カードやコンテンツ面（純白） */
    --color-bg-inverse: #1A2B33;
    /* 反転背景（フッターやダークセクション用） */

    /* ============================================================
       Text Colors (テキスト：背景とのコントラストを定義)
       ============================================================ */
    /* 通常背景（White/Light Gray）用 */
    --color-text-main: #1A2B33;
    /* 最も強い文字色（知的な紺） */
    --color-text-body: #334155;
    /* 本文用（読みやすさ重視） */
    --color-text-muted: #64748B;
    /* 補足・注釈用 */
    --color-text-disabled: #94A3B8;
    /* 無効状態・プレースホルダー */

    /* 濃色背景（Primary/Inverse）用 */
    --color-text-on-fill: #ffffff;
    /* 塗りつぶし背景の上の文字 */
    --color-text-white: #ffffff;
    /* Alias for backward compatibility if needed, else replace */

    /* ============================================================
       Border & UI Elements (境界線・装飾)
       ============================================================ */
    --color-border-main: #E2E8F0;
    --color-border-dark: #c6ccd4;
    --color-border-focus: var(--color-primary);

    /* ユーティリティ */
    --color-mark-bg: #FFFBEB;
    /* 注目（ハイライト）背景 */
    --color-status-error: #E53E3E;
    /* エラーなどの警告 */

    /* ============================================================
       Gradations & Effects (シズル感・奥行き)
       ============================================================ */
    /* ロゴの矢印感を出す動的なグラデーション */
    --grad-primary: linear-gradient(135deg, #00BCC1 0%, #009BC1 100%);
    --grad-accent: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    --grad-multi: linear-gradient(135deg, #00BCC1 0%, var(--color-secondary) 100%);

    /* 影：背景色に馴染むよう、僅かにブルーを混ぜた透過黒 */
    --shadow-sm: 0 1px 2px rgba(0, 50, 70, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 50, 70, 0.08);
    --shadow-card: 0 20px 25px -5px rgba(0, 50, 70, 0.1);

    /* SNS Colors (SNSカラー) - Keep existing */
    --color-facebook: #1877f2;
    --color-x: #000;
    --color-line: #06c755;
    --color-instagram: #E4405F;

    /* RGB Values for Mixins */
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;
    --color-primary-rgb: 0, 155, 193;
    --color-secondary-rgb: 252, 76, 134;
    --color-line-rgb: 6, 199, 85;

    /* Transparencies & Overlays (Utility) */
    --color-bg-white-translucent: rgba(255, 255, 255, 0.9);
    --color-bg-dark-translucent: rgba(26, 43, 51, 0.9);
    /* 濃色背景ベース */
    --color-white-opacity-10: rgba(255, 255, 255, 0.1);
    --color-white-opacity-20: rgba(255, 255, 255, 0.2);
    --color-overlay-dark: rgba(0, 0, 0, 0.5);


    /* ==========================================================================
       2. Typography (文字設定)
       ========================================================================== */

    /* Font Families (フォントファミリー) */
    --font-family-ja: "LINE Seed JP", "Yu Gothic UI", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-family-en: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Font Sizes (フォントサイズ) - Fluid Typography */
    /* 10.5px - 14px */
    --font-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.875rem);
    /* 12.25px - 16px */
    --font-sm: clamp(0.875rem, 0.82rem + 0.16vw, 1rem);
    /* 14px - 18px */
    --font-base: clamp(1rem, 0.93rem + 0.34vw, 1.125rem);
    /* 15.75px - 21px */
    --font-md: clamp(1.125rem, 1.02rem + 0.47vw, 1.313rem);
    /* 17.5px - 26px */
    --font-lg: clamp(1.25rem, 1.15rem + 0.72vw, 1.625rem);
    /* 21px - 32px */
    --font-xl: clamp(1.5rem, 1.42rem + 0.94vw, 2rem);
    /* 28px - 36.5px */
    --font-2xl: clamp(2rem, 1.6rem + 1.1vw, 2.286rem);
    /* 35px - 45.7px */
    --font-3xl: clamp(2.5rem, 1.9rem + 1.7vw, 2.857rem);
    /* 42px - 96px */
    --font-4xl: clamp(2.5rem, 1.5789rem + 3.6842vw, 6rem);
    /* 42px - 70px */
    --font-5xl: clamp(2.1875rem, 1.6118rem + 2.3026vw, 4.375rem);
    /* 48px - 93px */
    --font-6xl: clamp(3rem, 2.1rem + 3.5vw, 5.833rem);
    /* 64px - 124px */
    --font-7xl: clamp(4rem, 2.8rem + 4.5vw, 7.77rem);
    /* 80px - 165px */
    --font-8xl: clamp(5rem, 3.5rem + 6vw, 10.36rem);

    /* Fixed Sizes (固定サイズ) */
    --font-title-lg: 20px;
    --font-title-sm: 14px;
    --font-label: 12px;

    /* Line Height (行間) */
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Font Weight (太さ) */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Letter Spacing (文字間隔) */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;


    /* ==========================================================================
       3. Layout & Spacing (レイアウト・余白)
       ========================================================================== */

    /* Containers (コンテナ幅) */
    --width-container: 1200px;
    --width-container-small: 1000px;
    --width-sidebar: 336px;

    /* Spacing Steps (余白設定) - Fluid Spacing */
    /* 6px - 6.8px */
    --space-xs: clamp(0.375rem, 0.35rem + 0.12vw, 0.429rem);
    /* 8px - 9px */
    --space-sm: clamp(0.5rem, 0.46rem + 0.16vw, 0.571rem);
    /* 16px - 18px */
    --space-md: clamp(1rem, 0.93rem + 0.34vw, 1.143rem);
    /* 24px - 27px */
    --space-lg: clamp(1.5rem, 1.39rem + 0.51vw, 1.714rem);
    /* 32px - 36px */
    --space-xl: clamp(2rem, 1.86rem + 0.68vw, 2.286rem);
    /* 40px - 45px */
    --space-2xl: clamp(2.5rem, 2.32rem + 0.85vw, 2.857rem);
    /* 48px - 54px */
    --space-3xl: clamp(3rem, 2.79rem + 1.03vw, 3.429rem);
    /* 64px - 73px */
    --space-4xl: clamp(4rem, 3.72rem + 1.37vw, 4.571rem);
    /* 80px - 91px */
    --space-5xl: clamp(5rem, 4.65rem + 1.71vw, 5.714rem);
    /* 96px - 109px */
    --space-6xl: clamp(6rem, 5.58rem + 2.05vw, 6.857rem);
    /* 112px - 128px */
    --space-7xl: clamp(7rem, 6.51rem + 2.39vw, 8rem);
    /* 128px - 146px */
    --space-8xl: clamp(8rem, 7.44rem + 2.74vw, 9.143rem);

    /* Grid Gaps (グリッド間隔) */
    --grid-gap: var(--space-xl);
    --section-spacing: var(--space-4xl);

    /* Mobile Spacing (スマホ用余白) */
    --mobile-gutter: 20px;
    --mobile-margin: 20px;


    /* ==========================================================================
       4. UI Elements (UI要素)
       ========================================================================== */

    /* Border Radius (角丸) */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-2xl: 32px;
    --border-radius-full: 100vw;

    /* Icon Sizes (アイコンサイズ) */
    --icon-size-xs: 4px;
    --icon-size-sm: 6px;
    --icon-size-md: 8px;
    --icon-size-lg: 18px;
    --icon-size-xl: 24px;


    /* ==========================================================================
       5. Layer (重なり順)
       ========================================================================== */

    --z-base: 0;
    --z-above: 1;
    --z-content: 2;
    --z-decoration: 3;
    --z-slider: 4;
    --z-sticky: 10;
    --z-fixed: 20;
    --z-header: 100;
    --z-drawer: 1000;


    /* ==========================================================================
       6. Motion (アニメーション)
       ========================================================================== */

    /* Duration (時間) */
    --duration-fast: 0.5s;
    --duration-base: 0.7s;
    --duration-medium: 0.9s;
    --duration-slow: 1.1s;
    --duration-slower: 1.4s;

    /* Easing (イージング) */
    --easeOutCubic: cubic-bezier(0.33, 0.85, 0.4, 0.96);
    --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
    --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
    --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easeCustom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --easeRelaxed: cubic-bezier(0.2, 0, 0.2, 1);
    /* ゆったりとしたイージング */

    /* Transitions (トランジションプリセット) */
    --transition-hover: var(--duration-medium) var(--easeRelaxed);
    /* ホバー用標準（ゆったり） */
    --transition-base: var(--duration-base) var(--easeOutCubic);
    --transition-fast: var(--duration-fast) var(--easeOutCubic);
    --transition-medium: var(--duration-medium) var(--easeOutCubic);
    --transition-slow: var(--duration-slow) var(--easeOutCubic);
    --transition-slower: var(--duration-slower) var(--easeOutCubic);
    --transition-ease-out: var(--duration-base) var(--easeOutCubic);
    --transition-all: all var(--duration-base) var(--easeOutCubic);
}