/* グローバルナビ内の最上位の各リストを横並びにする */
.navbar>ul {
    display: flex;
    list-style: none;
    /*アイテム同士の間隔の幅*/
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* 通常のリスト項目 */
.navbar>ul>li {
    position: relative;
}

/* 展開したサブメニューのリスト（初期は非表示） 
最上位アイテムの位置を基準にして、その下に表示する。
*/
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 250px;
    z-index: 10;

    background: white;
    border: 1px solid #ddd;
}

/* 展開したサブメニュー内のアイテム */
.dropdown-menu li {
    padding: 5px 15px;
}

/* 最上位アイテムにマウスオーバーしたらサブリストを表示する */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* サブリスト内のリンクの通常状態のスタイル */
.navbar a {
    color: dimgray;

    /* 下線なし */
    text-decoration: none;
    /* 少し太字 */
    font-weight: 500;
    padding: 5px 10px;
    display: block;
}

/* 各アイテムのホバー時のスタイル */
.navbar a:hover {
    color: green;
    background-color: palegreen;

    /* 角を少し丸く（今風） */
    border-radius: 4px;
    /* なめらかに色変化 */
    transition: 0.2s;
}

/* 最上位リストのアイテムだけの色スタイル */
.navbar>ul>li>a {
    color: white;
}

.hamburger-menu {
    display: none;
    /* ハンバーガー表示 */
}

/* スマホ表示（768px以下） */
@media (max-width: 768px) {
    .navbar {
        display: none;
        /* ナビゲーション非表示 */
    }

    .hamburger-menu {
        display: block;
        /* ハンバーガー表示 */
    }
}