/* header-footer.css - ヘッダとフッタの共通スタイル定義
 * 全HTMLページで使用されるヘッダとフッタのスタイル
 * このファイルの変数を変更すれば、全ページのヘッダ・フッタ色が変わります
 */

/* ========================================
   ヘッダスタイル（header要素用）
   ======================================== */
header {
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
}

/* ========================================
   ナビゲーションヘッダスタイル（nav要素用）
   ======================================== */
nav {
    background: var(--color-header-bg);
    color: var(--color-header-text);
}

/* ナビゲーション内のcontainerは透明に（白い背景を防ぐ） */
nav .container {
    background: transparent !important;
}

nav div.container {
    background: transparent !important;
    background-color: transparent !important;
}

/* ナビゲーション内のリンクは白色に */
nav a {
    color: #ffffff;
    text-decoration: none;
}

nav a:hover {
    opacity: 0.8;
}

/* ========================================
   フッタスタイル
   ======================================== */
footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

/* フッター内のcontainerは透明に（白い背景を防ぐ） */
footer .container {
    background: transparent !important;
}

/* フッター内のpタグは白色に */
footer p {
    color: #ffffff;
}

/* フッター内のリンクは白色に */
footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ========================================
   注意事項
   ======================================== */
/*
 * このCSSファイルは、全HTMLページで読み込む必要があります。
 *
 * 使用方法:
 * <link rel="stylesheet" href="./css/variables.css">
 * <link rel="stylesheet" href="./css/header-footer.css">
 *
 * 色の変更方法:
 * variables.css の以下の変数を変更してください：
 * --color-header-bg: ヘッダ背景色
 * --color-footer-bg: フッタ背景色
 * --color-header-text: ヘッダテキスト色
 * --color-footer-text: フッタテキスト色
 */