/* ハンバーガーメニューのスタイル設定 */
.hamburger {
    position: fixed; /* 画面に固定 */
    top: 10px; /* 上から10pxの位置 */
    right: 10px; /* 右から10pxの位置 */
    z-index: 1000; /* 他の要素より前面に表示 */
    cursor: pointer; /* カーソルをポインターに変更 */
    background: rgb(199, 232, 248);
    border: 1px solid #ddd; /* 枠線を淡いグレーの1pxソリッドラインに設定 */
    display: flex; /* フレックスボックスレイアウトを使用 */
    justify-content: center; /* 横方向の中央に配置 */
    align-items: center; /* 縦方向の中央に配置 */
}

/* メニューのスタイル設定 */
.menu {
    display: none; /* 最初は非表示 */
    position: fixed; /* 画面に固定 */
    top: 65px; /* 上から55pxの位置 */
    right: 10px; /* 右から10pxの位置 */
    z-index: 1000; /* 他の要素より前面に表示 */
    background-color: #fff; /* 背景色を白に設定 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ボックスシャドウを設定 */
    padding: 12px; /* パディングを12pxに設定 */
    border-radius: 5px; /* ボーダーラウンドを5pxに設定 */
}

/* メニュー内のリストのスタイル設定 */
.menu li{
    list-style: none; /* リストマーカーを非表示に設定 */
}

/* メニュー内のリンクのスタイル設定 */
.menu li a {
    display: block; /* ブロック要素に設定 */
    margin-bottom: 10px; /* 下マージンを10pxに設定 */
    font-size: 18px; /* フォントサイズを18pxに設定 */
    line-height: 26px; /* 行の高さを30pxに設定 */
    color: #000000; /* 文字色を黒に設定 */
    text-decoration: none; /* テキストの下線を非表示に設定 */
    background: rgb(199, 232, 248); /* 背景色を設定 */
    padding: 6px; /* パディングを6pxに設定 */
}

/* サブメニューのリンクのスタイル設定 */
.menu li a.sub {
    color: #ffffff; /* 文字色を白に設定 */
    background: rgb(0, 0, 0); /* 背景色を黒に設定 */
}

/* リンクの前にマーカーを追加 */
.menu li a:before {
    content:"■"; /* マーカーとして黒い四角を追加 */
}

/* 最後のリンクのスタイル設定 */
.menu li:last-of-type a {
    margin-bottom: 0px; /* 下マージンを0pxに設定 */
}

/* リンクにホバーしたときのスタイル設定 */
.menu li a:hover {
    color: #f33; /* 文字色を赤に変更 */
}

/* アクティブなメニューのスタイル設定 */
.menu.active {
    display: block; /* 表示 */
}

/* 画面幅が1051px以上のときのスタイル設定 */
@media (min-width: 1051px) {
    .hamburger, .menu {
        right: calc(50% - 500px); /* 右端からの位置を計算で設定 */
    }
}