/* ブランドカラーパレット - ロゴデザインコンセプトに基づく */

:root {
    /* メインカラー */
    --coral-red: #FF6B6B;
    --coral-red-dark: #FA5252;
    --coral-red-light: #FF8787;
    
    /* アクセントカラー */
    --cool-blue: #4ECDC4;
    --cool-blue-dark: #14B8A6;
    --cool-blue-light: #5EEAD4;
    
    /* サポートカラー */
    --brand-green: #51CF66;
    --brand-green-dark: #22C55E;
    --brand-green-light: #86EFAC;
    
    /* テキストカラー */
    --charcoal-gray: #2C3E50;
    --charcoal-gray-light: #475569;
    --charcoal-gray-lighter: #64748B;
    
    /* 背景カラー */
    --bg-white: #FFFFFF;
    --bg-gray-50: #F8FAFC;
    --bg-gray-100: #F1F5F9;
    --bg-gray-200: #E2E8F0;
    
    /* グラデーション */
    --gradient-coral: linear-gradient(135deg, var(--coral-red) 0%, var(--coral-red-dark) 100%);
    --gradient-blue: linear-gradient(135deg, var(--cool-blue) 0%, var(--cool-blue-dark) 100%);
    --gradient-green: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
    --gradient-dark: linear-gradient(135deg, var(--charcoal-gray) 0%, #34495e 100%);
}

/* リンクカラー */
a {
    color: var(--coral-red);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--coral-red-dark);
}

/* ボタンスタイル */
.btn-primary {
    background: var(--gradient-coral);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.btn-secondary {
    background: var(--gradient-blue);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

/* テキストカラー */
.text-primary {
    color: var(--coral-red);
}

.text-secondary {
    color: var(--cool-blue);
}

.text-success {
    color: var(--brand-green);
}

.text-dark {
    color: var(--charcoal-gray);
}

.text-muted {
    color: var(--charcoal-gray-light);
}

/* 背景カラー */
.bg-primary {
    background-color: var(--coral-red);
}

.bg-secondary {
    background-color: var(--cool-blue);
}

.bg-success {
    background-color: var(--brand-green);
}

.bg-dark {
    background-color: var(--charcoal-gray);
}

.bg-light {
    background-color: var(--bg-gray-50);
}

/* ボーダーカラー */
.border-primary {
    border-color: var(--coral-red);
}

.border-secondary {
    border-color: var(--cool-blue);
}

.border-success {
    border-color: var(--brand-green);
}

.border-dark {
    border-color: var(--charcoal-gray);
}

/* フォーカス状態 */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--coral-red);
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

/* ナビゲーション */
.nav-link {
    color: var(--charcoal-gray);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--coral-red);
}

.nav-link.active {
    color: var(--coral-red);
    font-weight: 600;
}

/* カードスタイル */
.card {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(44, 62, 80, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.2);
    border-color: var(--coral-red);
}

/* アラートスタイル */
.alert-primary {
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--coral-red);
    color: var(--coral-red-dark);
}

.alert-secondary {
    background-color: rgba(78, 205, 196, 0.1);
    border: 1px solid var(--cool-blue);
    color: var(--cool-blue-dark);
}

.alert-success {
    background-color: rgba(81, 207, 102, 0.1);
    border: 1px solid var(--brand-green);
    color: var(--brand-green-dark);
}

/* プログレスバー */
.progress-bar {
    background: var(--gradient-coral);
}

/* バッジ */
.badge-primary {
    background-color: var(--coral-red);
    color: white;
}

.badge-secondary {
    background-color: var(--cool-blue);
    color: white;
}

.badge-success {
    background-color: var(--brand-green);
    color: white;
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .card {
        border-radius: 8px;
    }
}