:root {
    --theme-accent: #1e40af;
    --theme-accent-gold: #1e40af;
    --theme-background: #F8FAFC;
    --theme-background-alt: #F1F5F9;
    --theme-badge-error-bg: #fee2e2;
    --theme-badge-error-text: #991b1b;
    --theme-badge-info-bg: #dbeafe;
    --theme-badge-info-text: #1e40af;
    --theme-badge-success-bg: #d1fae5;
    --theme-badge-success-text: #065f46;
    --theme-badge-warning-bg: #fef3c7;
    --theme-badge-warning-text: #92400e;
    --theme-border: #e2e8f0;
    --theme-border-hover: #cbd5e1;
    --theme-button-disabled: #cbd5e1;
    --theme-button-primary: #1e40af;
    --theme-button-primary-active: #1e3a8a;
    --theme-button-primary-hover: #1e3a8a;
    --theme-button-primary-text-hover: #ffffff;
    --theme-button-secondary: #475569;
    --theme-button-secondary-active: #1e293b;
    --theme-button-secondary-hover: #334155;
    --theme-button-secondary-text-hover: #ffffff;
    --theme-button-text: #FFFFFF;
    --theme-card-background: #FFFFFF;
    --theme-card-hover-background: #f8fafc;
    --theme-card-hover-border: #e2e8f0;
    --theme-card-text-light: rgba(255, 255, 255, 0.9);
    --theme-card-text-white: #FFFFFF;
    --theme-disabled: #e2e8f0;
    --theme-error: #dc2626;
    --theme-focus-ring: #2563eb;
    --theme-footer-background: #0f172a;
    --theme-footer-link: #cbd5e1;
    --theme-footer-link-hover: #ffffff;
    --theme-footer-text: #f8fafc;
    --theme-gradient-error-from: #ef4444;
    --theme-gradient-error-to: #dc2626;
    --theme-gradient-info-from: #3b82f6;
    --theme-gradient-info-to: #1e40af;
    --theme-gradient-success-from: #10b981;
    --theme-gradient-success-to: #059669;
    --theme-gradient-warning-from: #f59e0b;
    --theme-gradient-warning-to: #d97706;
    --theme-header-background: #ffffff;
    --theme-header-link: #475569;
    --theme-header-link-hover: #1e40af;
    --theme-header-text: #334155;
    --theme-heading: #0f172a;
    --theme-info: #0284c7;
    --theme-input-background: #FFFFFF;
    --theme-input-disabled-background: #f1f5f9;
    --theme-input-focus-border: #2563eb;
    --theme-input-focus-shadow: rgba(37, 99, 235, 0.2);
    --theme-input-hover-border: #cbd5e1;
    --theme-link: #2563eb;
    --theme-link-active: #1e40af;
    --theme-link-hover: #1d4ed8;
    --theme-logo-text-color: #334155;
    --theme-muted: #94a3b8;
    --theme-overlay: rgba(15, 23, 42, 0.5);
    --theme-overlay-card-96: rgba(255, 252, 249, 0.96);
    --theme-overlay-dark: rgba(0, 0, 0, 0.55);
    --theme-overlay-dark-05: rgba(0, 0, 0, 0.05);
    --theme-overlay-dark-08: rgba(0, 0, 0, 0.08);
    --theme-overlay-dark-14: rgba(0, 0, 0, 0.14);
    --theme-overlay-dark-20: rgba(0, 0, 0, 0.2);
    --theme-overlay-dark-40: rgba(0, 0, 0, 0.4);
    --theme-overlay-dark-60: rgba(0, 0, 0, 0.6);
    --theme-overlay-dark-72: rgba(0, 0, 0, 0.72);
    --theme-overlay-dark-82: rgba(0, 0, 0, 0.82);
    --theme-overlay-gradient-dark: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    --theme-overlay-gradient-dark-compact: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 0.12) 65%, transparent 100%);
    --theme-overlay-light: rgba(255, 255, 255, 0.9);
    --theme-overlay-light-15: rgba(255, 255, 255, 0.15);
    --theme-overlay-light-20: rgba(255, 255, 255, 0.2);
    --theme-overlay-light-30: rgba(255, 255, 255, 0.3);
    --theme-overlay-light-80: rgba(255, 255, 255, 0.8);
    --theme-overlay-light-95: rgba(255, 255, 255, 0.95);
    --theme-overlay-light-96: rgba(255, 255, 255, 0.96);
    --theme-primary: #1e40af;
    --theme-primary-active: #1e3a8a;
    --theme-primary-hover: #1e3a8a;
    --theme-secondary: #475569;
    --theme-secondary-active: #1e293b;
    --theme-secondary-hover: #334155;
    --theme-success: #059669;
    --theme-text: #0f172a;
    --theme-text-dark: #0f172a;
    --theme-text-disabled: #94a3b8;
    --theme-text-light: #64748b;
    --theme-text-on-primary: #ffffff;
    --theme-warning: #d97706;

    /* Typography */
    --theme-font-primary: 'Titillium Web', sans-serif;
    --theme-font-secondary: 'Titillium Web', sans-serif;
    --theme-font-size-xs: 0.75rem;
    --theme-font-size-sm: 0.875rem;
    --theme-font-size-base: 1rem;
    --theme-font-size-lg: 1.125rem;
    --theme-font-size-xl: 1.25rem;
    --theme-font-size-2xl: 1.5rem;
    --theme-font-size-h1: 2rem;
    --theme-font-size-h2: 1.75rem;
    --theme-font-size-h3: 1.5rem;
    --theme-font-size-h4: 1.25rem;
    --theme-font-size-3xl: 1.875rem;
    --theme-font-size-4xl: 2.25rem;
    --theme-font-size-5xl: 3rem;
    --theme-font-weight-normal: 400;
    --theme-font-weight-medium: 500;
    --theme-font-weight-semibold: 600;
    --theme-font-weight-bold: 700;
    --theme-font-weight-light: 300;
    --theme-line-height-none: 1;
    --theme-line-height-tight: 1.25;
    --theme-line-height-snug: 1.375;
    --theme-line-height-normal: 1.5;
    --theme-line-height-relaxed: 1.625;
    --theme-line-height-loose: 2;
    --theme-letter-spacing-tighter: -0.05em;
    --theme-letter-spacing-tight: -0.025em;
    --theme-letter-spacing-normal: 0;
    --theme-letter-spacing-wide: 0.025em;
    --theme-letter-spacing-wider: 0.05em;

    /* Component Settings */
    --theme-radius-none: 0;
    --theme-radius-sm: 0.125rem;
    --theme-radius-base: 0.25rem;
    --theme-radius-md: 0.375rem;
    --theme-radius-lg: 0.5rem;
    --theme-radius-xl: 0.75rem;
    --theme-radius-2xl: 1rem;
    --theme-radius-full: 9999px;
    --theme-radius-button: 0.375rem;
    --theme-radius-card: 0.75rem;
    --theme-shadow-none: none;
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --theme-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --theme-transition-duration: 0.2s;
    --theme-transition-easing: ease;

    /* Advanced: Border Radius */
    --theme-radius-none: 0;
    --theme-radius-sm: 0.125rem;
    --theme-radius-base: 0.25rem;
    --theme-radius-md: 0.375rem;
    --theme-radius-lg: 0.5rem;
    --theme-radius-xl: 0.75rem;
    --theme-radius-2xl: 1rem;
    --theme-radius-full: 9999px;

    /* Advanced: Shadows */
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --theme-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --theme-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --theme-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --theme-shadow-none: none;

    /* Theme Gradients */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    --theme-gradient-info: linear-gradient(to bottom right, var(--theme-gradient-info-from), var(--theme-gradient-info-to));
    --theme-gradient-success: linear-gradient(to bottom right, var(--theme-gradient-success-from), var(--theme-gradient-success-to));
    --theme-gradient-error: linear-gradient(to bottom right, var(--theme-gradient-error-from), var(--theme-gradient-error-to));
    --theme-gradient-warning: linear-gradient(to bottom right, var(--theme-gradient-warning-from), var(--theme-gradient-warning-to));

    /* RGB Color Values for Opacity Usage */
    --theme-primary-rgb: 30, 64, 175;
    --theme-secondary-rgb: 71, 85, 105;
    --theme-info-rgb: 2, 132, 199;
    --theme-success-rgb: 5, 150, 105;
    --theme-warning-rgb: 217, 119, 6;
    --theme-error-rgb: 220, 38, 38;
}


body {
    background-color: var(--theme-background);
    color: var(--theme-text);
    font-family: var(--theme-font-primary, 'Noto Sans JP', sans-serif);
    font-size: var(--theme-font-size-base, 1rem);
    line-height: var(--theme-line-height-normal, 1.5);
}

h1 {
    font-size: var(--theme-font-size-h1, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h1, 600);
    margin-bottom: 1rem;
}

h2 {
    font-size: var(--theme-font-size-h2, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h2, 600);
    margin-bottom: 1rem;
}

h3 {
    font-size: var(--theme-font-size-h3, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h3, 600);
    margin-bottom: 1rem;
}

h4 {
    font-size: var(--theme-font-size-h4, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h4, 600);
    margin-bottom: 1rem;
}

h5 {
    font-size: var(--theme-font-size-h5, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h5, 600);
    margin-bottom: 1rem;
}

h6 {
    font-size: var(--theme-font-size-h6, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h6, 600);
    margin-bottom: 1rem;
}

header {
    background-color: var(--theme-header-background);
}

footer {
    background-color: var(--theme-footer-background);
}

a {
    color: var(--theme-link);
    text-decoration: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

a:hover {
    color: var(--theme-link-hover, var(--theme-primary));
    text-decoration: none;
}

a:active {
    color: var(--theme-link-active, var(--theme-link-hover));
}

header a, header nav a {
    text-decoration: none !important;
}

header a:hover, header nav a:hover {
    text-decoration: none !important;
}

.btn-primary {
    background-color: var(--theme-button-primary, var(--theme-primary));
    border-color: var(--theme-button-primary, var(--theme-primary));
    color: var(--theme-button-text, #ffffff);
    border-radius: var(--theme-radius-button, 0.375rem);
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.btn-primary:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover));
    border-color: var(--theme-button-primary-hover, var(--theme-primary-hover));
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.btn-primary:active {
    background-color: var(--theme-button-primary-active, var(--theme-button-primary-hover));
    border-color: var(--theme-button-primary-active, var(--theme-button-primary-hover));
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--theme-button-secondary, var(--theme-secondary));
    border-color: var(--theme-button-secondary, var(--theme-secondary));
    color: var(--theme-button-text, #ffffff);
    border-radius: var(--theme-radius-button, 0.375rem);
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.btn-secondary:hover {
    background-color: var(--theme-button-secondary-hover, var(--theme-secondary-hover));
    border-color: var(--theme-button-secondary-hover, var(--theme-secondary-hover));
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.btn-secondary:active {
    background-color: var(--theme-button-secondary-active, var(--theme-button-secondary-hover));
    border-color: var(--theme-button-secondary-active, var(--theme-button-secondary-hover));
    transform: translateY(0);
}

.btn:disabled, .btn.disabled {
    background-color: var(--theme-button-disabled, #e9ecef);
    border-color: var(--theme-button-disabled, #e9ecef);
    color: var(--theme-text-disabled, #adb5bd);
    cursor: not-allowed;
    opacity: 0.65;
}

.card {
    background-color: var(--theme-card-background, #ffffff);
    border-radius: var(--theme-radius-card, 0.75rem);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.card:hover, .card.hover-enabled:hover {
    background-color: var(--theme-card-hover-background, var(--theme-card-background));
    box-shadow: var(--theme-card-hover-shadow, var(--theme-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));
    transform: translateY(var(--theme-card-hover-transform, -2px));
}

.hover-lift {
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.hover-lift:hover {
    transform: translateY(var(--theme-card-hover-transform, -2px));
    box-shadow: var(--theme-card-hover-shadow, var(--theme-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));
}

.form-control:focus, .form-select:focus {
    border-color: var(--theme-input-focus-border, var(--theme-primary));
    box-shadow: 0 0 0 0.25rem var(--theme-input-focus-shadow, rgba(var(--theme-primary-rgb, 13, 110, 253), 0.25));
}

.form-control:hover, .form-select:hover {
    border-color: var(--theme-input-hover-border, var(--theme-border-hover));
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--theme-input-disabled-background, var(--theme-button-disabled));
}

/* Theme Utility Classes */

/* Gradient Classes */
.theme-gradient-primary {
    background: var(--theme-gradient-primary);
}

.theme-gradient-info {
    background: var(--theme-gradient-info);
}

.theme-gradient-success {
    background: var(--theme-gradient-success);
}

.theme-gradient-error {
    background: var(--theme-gradient-error);
}

.theme-gradient-warning {
    background: var(--theme-gradient-warning);
}

/* Badge Classes */
.theme-badge-info {
    background-color: var(--theme-badge-info-bg);
    color: var(--theme-badge-info-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.theme-badge-success {
    background-color: var(--theme-badge-success-bg);
    color: var(--theme-badge-success-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.theme-badge-error {
    background-color: var(--theme-badge-error-bg);
    color: var(--theme-badge-error-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.theme-badge-warning {
    background-color: var(--theme-badge-warning-bg);
    color: var(--theme-badge-warning-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

/* Card Classes */
.theme-card {
    background-color: var(--theme-card-background);
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.theme-card-text-white {
    color: var(--theme-card-text-white);
}

.theme-card-text-light {
    color: var(--theme-card-text-light);
}

/* Alert Box Classes */
.theme-alert-info {
    background-color: var(--theme-badge-info-bg);
    border-left: 4px solid var(--theme-badge-info-text);
    color: var(--theme-badge-info-text);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.theme-alert-success {
    background-color: var(--theme-badge-success-bg);
    border-left: 4px solid var(--theme-badge-success-text);
    color: var(--theme-badge-success-text);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.theme-alert-warning {
    background-color: var(--theme-badge-warning-bg);
    border-left: 4px solid var(--theme-badge-warning-text);
    color: var(--theme-badge-warning-text);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.theme-alert-error {
    background-color: var(--theme-badge-error-bg);
    border-left: 4px solid var(--theme-badge-error-text);
    color: var(--theme-badge-error-text);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}