:root {
    --content-max-width: min(1280px, 100%);
    --section-padding: clamp(16px, 1vw, 80px);
    --content-padding: 88px;
    --section-padding-tablet: 24px;
    --content-padding-tablet: 80px;
    --section-padding-mobile: 8px;
    --content-padding-mobile: 16px;

    --color-primary: #009EB1;
    --color-secondary: #009C72;
    --color-accent: #10AFCE;
    --color-accent-green: #58D34F;

    --color-admin-orange: #F97316;
    --color-admin-amber: #F59E0B;
    --color-admin-emerald: #10B981;

    --color-error: #DC2626;
    --color-error-alt: #dc3545;
    --color-error-dark: #d32f2f;
    --color-error-light: #e53e3e;

    --color-success: #28a745;
    --color-success-dark: #388E3C;

    --color-blue: #1976d2;
    --color-blue-alt: #1a73e8;

    --color-green-search: #00a98b;
    --color-badge-dark: #36383E;
    --color-dark-green: #304E5D;
    --color-brown: #5D4037;
    --color-blue-dark: #0d47a1;
    --color-blue-hover: #1565c0;
    --color-teal-alt: #0e9ab5;
    --color-green-dark: #2e7d32;
    --color-green-light-bg: #e8f5e9;
    --color-green-mint: #86efac;
    --color-green-success-bg: #f0fdf4;
    --color-amber-dark: #b45309;
    --color-amber-light-bg: #fffbeb;
    --color-amber-light: #fcd34d;
    --color-orange-e65100: #e65100;
    --color-orange-ef6c00: #ef6c00;
    --color-orange-f57c00: #f57c00;
    --color-orange-bright: #FF9800;
    --color-yellow-warm: #FFD54F;

    --color-black: #000;
    --color-black-dark: #02161A;
    --color-gray-900: #333;
    --color-gray-800: #6B7280;
    --color-gray-700: #666;
    --color-gray-600: #444;
    --color-gray-500: #999;
    --color-gray-400: #ccc;
    --color-gray-350: #ddd;
    --color-gray-200: #eee;
    --color-gray-100: #f0f0f0;
    --color-gray-warm: #F2F2F2;
    --color-gray-50: #f5f5f5;
    --color-gray-fafafa: #fafafa;
    --color-gray-f8f9fa: #f8f9fa;
    --color-gray-e8e8e8: #e8e8e8;
    --color-gray-e5e5e5: #e5e5e5;
    --color-gray-e0e0e0: #e0e0e0;
    --color-gray-d5d5d5: #d5d5d5;
    --color-gray-d0d0d0: #d0d0d0;
    --color-gray-bbb: #bbb;
    --color-gray-25: #f9f9f9;
    --color-white: #fff;

    --color-white-alpha-05: rgba(255, 255, 255, 0.05);
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);
    --color-white-alpha-30: rgba(255, 255, 255, 0.3);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);

    --color-black-alpha-15: rgba(0, 0, 0, 0.15);
    --color-black-alpha-50: rgba(0, 0, 0, 0.5);
    --color-gray-alpha-04: rgba(128, 128, 128, 0.04);
    --color-gray-alpha-15: rgba(128, 128, 128, 0.15);
    --color-black-alpha-05: rgba(0, 0, 0, 0.05);
    --color-dark-teal-alpha-50: rgba(34, 56, 66, 0.5);
    --color-blue-light-bbdefb: #bbdefb;
    --color-green-success-text: #16a34a;
    --color-gray-alpha-20: rgba(128, 128, 128, 0.2);

    --color-blue-light-bg: #e3f2fd;
    --color-blue-light-b3d9f2: #b3d9f2;
    --color-blue-bg-e8f4fd: #e8f4fd;
    --color-blue-bg-f0f7ff: #f0f7ff;
    --color-teal-bg: #f0fafb;
    --color-teal-bg-f0f7fa: #f0f7fa;
    --color-red-bg-fff5f5: #fff5f5;
    --color-red-bg-fef2f2: #fef2f2;
    --color-red-bg-ffebee: #ffebee;
    --color-red-bg-FEE2E2: #FEE2E2;
    --color-red-light-FCA5A5: #FCA5A5;
    --color-red-border-f5c6cb: #f5c6cb;
    --color-red-border-fecaca: #fecaca;
    --color-green-border-c3e6cb: #c3e6cb;
    --color-green-bg-f0fff4: #f0fff4;
    --color-orange-bg-fff3e0: #fff3e0;
    --color-amber-bg-FFF8E1: #FFF8E1;

    --spacing-0-5: 2px;
    --spacing-1: 4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-2-5: 10px;
    --spacing-3: 12px;
    --spacing-3-5: 14px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --letter-spacing-wide: 0.1em;
    --letter-spacing-sm: 0.05em;
    --border-width-md: 2px;

    --size-logo-sm: 28px;
    --size-logo-lg: 80px;
    --size-logo-height: 44px;
    --size-logo-max-width-mobile: 200px;
    --size-search-max-width: 500px;
    --size-search-max-width-sm: 400px;
    --size-content-max-width-lg: 1440px;
    --size-footer-height: 120px;
    --size-footer-height-mobile: 80px;
    --size-form-max-width: 480px;
    --size-auth-max-width: 600px;
    --size-content-max-width-md: 960px;
    --size-auth-login-max-width: 800px;
    --size-auth-reset-max-width: 500px;
    --size-checkbox: 18px;
    --size-image-preview: 180px;
    --size-textarea-min-height: 100px;
    --size-textarea-min-height-sm: 80px;
    --size-textarea-height: 120px;
    --size-thumbnail: 64px;
    --size-grid-pattern: 25px;
    --size-property-input: 50px;
    --size-popup-max-height: 90vh;
    --size-popup-list-max-height: 400px;
    --size-size-input: 70px;
    --size-col-2xs: 50px;
    --size-col-xs: 70px;
    --size-col-sm: 80px;
    --size-col-md-sm: 90px;
    --size-col-md: 120px;
    --size-col-lg: 140px;
    --size-col-xl: 180px;
    --size-btn-min-width: 160px;
    --size-search-min-width: 320px;
    --size-action-btn-min-width: 60px;
    --size-textarea-min-height-lg: 100px;
    --size-select-width: 400px;
    --size-image-upload-width: 160px;
    --size-image-upload-min-height: 120px;
    --size-sub-image-width: 200px;
    --size-unit-badge-min-width: 80px;
    --size-card-max-width: 300px;
    --size-arrow-padding: 60px;
    --size-header-height: 64px;
    --size-all-scraps-height: 317px;
    --size-banner-padding: 60px;
    --size-banner-content-max-width: 500px;
    --size-banner-btn-padding-x: 28px;
    --size-slider-header-padding: 15px;
    --size-hero-min-height-mobile: 480px;
    --size-image-small: 90px;
    --size-list-max-height: 240px;
    --size-dropdown-max-height: 200px;
    --size-label-min-width: 120px;
    --size-label-min-width-sm: 100px;

    --font-size-3xs: 0.625rem;
    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-body: 0.95rem;
    --font-size-lg: 1rem;
    --font-size-base: 0.875rem;
    --font-size-heading: 1.125rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.25rem;
    --font-size-2-5xl: 1.5rem;
    --font-size-page-title: 1.5rem;
    --font-size-xl-5: 1.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 3rem;
    --font-family-body: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
    --font-family-admin: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    --font-size-page-title-mobile: 1.25rem;
    --font-size-hero-mobile: 2.5rem;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 16px;
    --radius-full: 50%;
    --radius-pill: 50px;
    --radius-2xl: 20px;

    --z-content: 1;
    --z-fixed-btn: 50;
    --z-sidebar-overlay: 90;
    --z-sidebar: 100;
    --z-modal: 200;
    --z-overlay: 1000;
    --z-sp-nav-overlay: 9998;
    --z-sp-nav: 9999;
    --z-toast: 10000;

    --transition-opacity: opacity 0.2s;
    --transition-transform: transform 0.3s ease;
    --transition-grid-rows: grid-template-rows 0.3s ease;
    --transition-bg: background-color 0.2s;
    --transition-width: width 0.3s ease;
    --transition-slide: transform 0.3s ease;
    --transition-color: color 0.2s;
    --transition-border-color: border-color 0.2s;
    --transition-all: all 0.2s;

    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-sidebar: -2px 0 8px rgba(0, 0, 0, 0.15);

    --breakpoint-desktop: 1280px;
    --breakpoint-tablet: 1024px;
    --breakpoint-mobile: 768px;
    --breakpoint-mobile-sm: 640px;

    --sidebar-width: 280px;
    --sidebar-width-collapsed: 60px;
    --sidebar-popup-max-width: 480px;
}

.u-hidden {
    display: none !important;
}