/* ==============================================
   CSS変数定義
   ============================================== */

:root {
    /* Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #333333;
    --color-gray-300: #666666;
    --color-gray-400: #999999;
    --color-gray-500: #cccccc;
    --color-silver: #c0c0c0;
    --color-crimson: #dc143c;
    --color-salmon: #fa8072;
    --color-cornflowerblue: #6495ed;
    --color-darkslategray: #2f4f4f;
    
    /* Typography */
    --font-lato: 'Lato', sans-serif;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-19: 19px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-30: 30px;
    --font-size-36: 36px;
    --font-size-100: 100px;
    
    /* Spacing */
    --gap-5: 5px;
    --gap-10: 10px;
    --gap-19: 19px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-30: 30px;
    --padding-19: 19px;
    --padding-20: 20px;
    --padding-40: 40px;
    
    /* Border Radius */
    --br-6: 6px;
    --br-8: 8px;
    
    /* Breakpoints */
    --breakpoint-mobile: 450px;
    --breakpoint-tablet: 750px;
    --breakpoint-desktop: 1050px;
    --breakpoint-large: 1200px;
    
    /* 追加変数 */
    --gap-4: 4px;
    --gap-6: 6px;
}