/* ========================================
   ヘッダー・フッター色彩設計
   MGFactory Corporate Website
   Created: 2025-09-24
======================================== */

/* === 企業ライトテーマ - カラーパレット定義 === */
:root {
    /* プライマリーカラー（企業ブランドカラー - 落ち着いたプロフェッショナルブルー） */
    --primary-blue: #1e3a8a;      /* 濃い企業ブルー */
    --primary-blue-light: #3b82f6; /* 明るい企業ブルー */
    --primary-blue-dark: #1e40af;  /* 深い企業ブルー */
    
    /* セカンダリーカラー（信頼性のあるティール） */
    --secondary-teal: #0f766e;     /* 落ち着いたティール */
    --secondary-teal-light: #14b8a6; /* 明るいティール */
    --secondary-teal-dark: #134e4a;  /* 深いティール */
    
    /* エンタープライズグレー（プロフェッショナルなニュートラル） */
    --neutral-white: #ffffff;
    --neutral-gray-50: #f8fafc;   /* 最も薄いグレー */
    --neutral-gray-100: #f1f5f9;  /* 薄いグレー */
    --neutral-gray-200: #e2e8f0;  /* ライトグレー */
    --neutral-gray-300: #cbd5e1;  /* ミディアムライトグレー */
    --neutral-gray-400: #94a3b8;  /* ミディアムグレー */
    --neutral-gray-500: #64748b;  /* ミディアムダークグレー */
    --neutral-gray-600: #475569;  /* ダークグレー */
    --neutral-gray-700: #334155;  /* より濃いグレー */
    --neutral-gray-800: #1e293b;  /* 非常に濃いグレー */
    --neutral-gray-900: #0f172a;  /* 最も濃いグレー */
    
    /* 機能的カラー（企業用途向け） */
    --success-green: #10b981;     /* 成功時のグリーン */
    --warning-amber: #f59e0b;     /* 警告のアンバー */
    --error-red: #ef4444;         /* エラー時のレッド */
    
    /* テキストカラー（読みやすさ重視） */
    --text-primary: #111827;      /* メインテキスト */
    --text-secondary: #374151;    /* セカンダリテキスト */
    --text-muted: #6b7280;        /* 補助テキスト */
    --text-white: #ffffff;        /* 白いテキスト */
    
    /* 背景カラー（清潔感のあるライトテーマ） */
    --bg-primary: #ffffff;        /* メイン背景 */
    --bg-secondary: #f9fafb;      /* セカンダリ背景 */
    --bg-accent: #f3f4f6;         /* アクセント背景 */
    --bg-subtle: #f8fafc;         /* 微妙な背景 */
    
    /* 企業らしいアクセントカラー */
    --accent-gold: #d97706;       /* ゴールドアクセント */
    --accent-purple: #7c3aed;     /* 紫アクセント */
    
    /* 統一透明度システム */
    --opacity-full: 1.0;          /* 完全不透明 */
    --opacity-high: 0.9;          /* 高透明度 */
    --opacity-medium: 0.8;        /* 中透明度 */
    --opacity-low: 0.7;           /* 低透明度 */
    --opacity-subtle: 0.6;        /* 微透明度 */
}

/* === ナビゲーション（ヘッダー）スタイリング === */
.navbar {
    background: var(--neutral-white);
    opacity: var(--opacity-full); /* 完全に不透明なナビゲーション */
    backdrop-filter: blur(10px);
}

/* ロゴテキスト */
.logo-text {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo-text:hover {
    color: var(--primary-blue-dark);
}

/* ナビゲーションリンク */
.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue-light);
}

.nav-link:active,
.nav-link:focus {
    color: var(--primary-blue-dark);
}

/* ハンバーガーメニュー */
.hamburger .bar {
    background: var(--text-secondary);
    transition: all 0.3s ease;
}

.hamburger:hover .bar {
    background: var(--primary-blue);
}

/* アクティブ状態のハンバーガー */
.hamburger.active .bar {
    background: var(--primary-blue);
}

/* モバイルメニューの背景 */
.nav-menu {
    background: var(--neutral-white);
}

/* === フッタースタイリング === */
.footer {
    background: linear-gradient(135deg, var(--neutral-gray-900) 0%, var(--neutral-gray-800) 100%);
    color: var(--text-white);
    border-top: 3px solid var(--primary-blue);
}

/* フッターロゴ */
.footer-logo-text {
    color: var(--neutral-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-logo-text:hover {
    color: var(--primary-blue-light);
}

/* フッター情報テキスト */
.footer-info p {
    color: var(--neutral-gray-300);
    margin: 0;
}

/* フッターリンク */
.footer-links a {
    color: var(--neutral-gray-400);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-blue-light);
    text-decoration: underline;
}

/* フッターリンク間のセパレーター */
.footer-links a:not(:last-child)::after {
    content: " | ";
    color: var(--neutral-gray-500);
    margin: 0 0.5rem;
}

/* === レスポンシブ対応 === */
@media (max-width: 768px) {
    /* モバイルでのナビゲーション調整 */
    .nav-menu.active {
        background: var(--neutral-white);
    }
    
    .nav-link {
        padding: 1rem 1.5rem;
    }
    
    /* フッターのモバイル対応 */
    .footer-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-links a:not(:last-child)::after {
        display: none;
    }
}

/* === フォーカス状態のアクセシビリティ === */
.logo-text:focus,
.nav-link:focus,
.footer-logo-text:focus,
.footer-links a:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* === スムーズなアニメーション === */
* {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}