/* =========================
   全体のデザイン設定
========================= */

/* ページ全体の設定 */
body {
    font-family: Arial, sans-serif;
    /* 文字の種類 */
    margin: 0;
    /* 余白をなくす */
    background-color: #f2f7ff;
    /* 背景色 */
    color: #191a19;
    /* 文字色 */
}

/* =========================
   ヘッダー部分
========================= */

header {
    background-color: #3394f5;
    color: rgb(191, 240, 255);
    /* 文字を白に */
    padding: 20px;
    /* 内側の余白 */
    text-align: center;
    /* 中央寄せ */
}

/* =========================
   ナビゲーションメニュー
========================= */

nav {
    background-color: #18395a;
    padding: 10px;
    text-align: center;
}

/* メニューのリンク */
nav a {
    color: white;
    /* 文字色 */
    text-decoration: none;
    /* 下線を消す */
    margin: 0 15px;
    /* 横の間隔 */
    font-weight: bold;
    /* 太字 */
}

/* マウスを乗せたとき */
nav a:hover {
    color: #f1c40f;
    /* 黄色に変化 */
}

/* =========================
   メイン内容
========================= */

main {
    padding: 30px;
    /* 余白 */
    max-width: 900px;
    /* 最大幅 */
    margin: auto;
    /* 中央配置 */
    background-color: white;
    /* 白背景 */
    border-radius: 10px;
    /* 角を丸く */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 影 */
}

/* ========================================
   ハンバーガーメニュー設定
======================================== */

/* ハンバーガーボタン */
.menu-button {

    /* PCでは非表示 */
    display: none;

    background-color: #18395a;

    color: white;

    border: none;

    padding: 10px 15px;

    font-size: 28px;

    cursor: pointer;
}

/* メニュー全体 */
.nav-links {

    display: flex;

    justify-content: center;

    gap: 20px;
}

/* ========================================
   スマホ用設定
======================================== */

@media screen and (max-width: 768px) {

    /* ハンバーガーボタンを表示 */
    .menu-button {

        display: block;

        margin: 0 auto;
    }

    /* 最初はメニューを非表示 */
    .nav-links {

        display: none;

        flex-direction: column;

        margin-top: 10px;
    }

    /* showクラスが付いたら表示 */
    .nav-links.show {

        display: flex;
    }

    /* スマホ用リンク */
    .nav-links a {

        padding: 10px;

        color: white;

        text-decoration: none;
    }
}