/* =========================================
   ヘッダー全体のデザイン（上部固定・影付き）
========================================= */
header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 軽い影をつけて浮き上がらせる */
    position: sticky; /* スクロールしても上部に固定 */
    top: 0;
    z-index: 1000;
}

/* ヘッダー内部のレイアウト（横並び） */
.header-inner {
    display: flex;
    justify-content: space-between; /* ロゴは左、メニューは右に配置 */
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px 20px;
}

/* ロゴ画像のサイズ調整 */
.logo img {
    max-height: 50px;
    width: auto;
    vertical-align: middle;
}

/* =========================================
   ナビゲーションメニューのデザイン
========================================= */
.header-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 30px; /* メニュー間の余白 */
}

.header-nav a {
    text-decoration: none;
    color: #333333;
    font-weight: bold;
    font-size: 15px;
    transition: color 0.3s ease; /* ホバー時にふわっと色を変える */
}

/* マウスカーソルを合わせた時の文字色 */
.header-nav a:hover {
    color: #0056b3; 
}

/* =========================================
   「受講申し込み」ボタンの特別デザイン
========================================= */
.header-nav a.header-btn {
    background-color: #f39c12; /* アクセントカラー（オレンジ） */
    color: #ffffff !important;
    padding: 10px 25px;
    border-radius: 30px; /* 角を丸くする */
    box-shadow: 0 4px 6px rgba(243, 156, 18, 0.3);
    transition: all 0.3s ease;
}

/* ボタンにカーソルを合わせた時の動き */
.header-nav a.header-btn:hover {
    background-color: #e67e22; /* 少し濃いオレンジに */
    transform: translateY(-2px); /* 少し上に浮き上がるアニメーション */
    box-shadow: 0 6px 12px rgba(243, 156, 18, 0.4);
}

/* =========================================
   ページタイトル帯（ページヘッダー）のデザイン
========================================= */
.page-header {
    background: linear-gradient(135deg, #0056b3, #002c5f); /* 青系の美しいグラデーション */
    color: #ffffff;
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 40px;
}

.page-header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 文字を読みやすくする影 */
}

/* =========================================
   スマートフォン向けのレスポンシブ調整
========================================= */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column; /* 縦並びに変更 */
        gap: 15px;
        padding: 15px;
    }
    
    .header-nav ul {
        flex-wrap: wrap; /* 画面幅が狭い場合は折り返す */
        justify-content: center;
        gap: 15px 20px;
    }
    
    .logo img {
        max-height: 40px;
    }

    .header-nav a {
        font-size: 13px;
    }
    
    .header-nav a.header-btn {
        padding: 8px 20px;
    }

    .page-header {
        padding: 30px 20px;
        margin-bottom: 30px;
    }

    .page-header h1 {
        font-size: 20px;
    }
}

/* =========================================
   フッターのデザイン
========================================= */
footer {
    background-color: #002c5f; /* ページタイトルと合わせた信頼感のある濃紺 */
    color: #ffffff;
    text-align: center;
    padding: 50px 20px;
    margin-top: 60px; /* 上のコンテンツ（規約の白い枠）との余白 */
}

/* フッター内のリンクメニュー（横並び） */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    justify-content: center;
    gap: 40px; /* リンク同士の隙間 */
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.8; /* 少しだけ透過させて上品に */
    transition: opacity 0.3s ease;
}

/* マウスを乗せた時に明るく光るような効果 */
.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* コピーライト（©）のテキスト */
footer p {
    margin: 0;
    font-size: 13px;
    letter-spacing: 1px;
    opacity: 0.6; /* リンクよりさらに少し薄くして階層をつける */
}

/* =========================================
   スマートフォン向けのレスポンシブ調整
========================================= */
@media (max-width: 768px) {
    footer {
        padding: 40px 20px;
    }
    
    .footer-links {
        flex-direction: column; /* スマホではリンクを縦並びに */
        gap: 20px;
        margin-bottom: 30px;
    }
}