/* ハンバーガーメニュー */
.mobileNav {
    display: none;
}

@media screen and (max-width: 1162px) {
    nav {
        display: none;
    }
    .mobileNav {
        display: block;
        position: fixed;
        top: 80px;
        right: 30px;
        z-index: 9999;
    }

    .hamburgerMenu {
        position: relative;
    }

    #menuToggle {
        display: none;
    }

    .menuIcon {
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
        padding: 15px;
        position: absolute;
        z-index: 9999;
        right: 0;
    }

    .navIcon {
        display: block;
        width: 30px;
        height: 2px;
        background-color: #333;
        position: relative;
        transition: all 0.3s;
    }

    .navIcon::before,
    .navIcon::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }

    .navIcon::before {
        top: -8px;
    }

    .navIcon::after {
        bottom: -8px;
    }

    /* メニューが開いたときのアイコンアニメーション */
    #menuToggle:checked ~ .menuIcon .navIcon {
        background-color: transparent;
    }

    #menuToggle:checked ~ .menuIcon .navIcon::before {
        transform: rotate(45deg);
        top: 0;
    }

    #menuToggle:checked ~ .menuIcon .navIcon::after {
        transform: rotate(-45deg);
        bottom: 0;
    }

    /* オーバーレイ */
    .menuOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        z-index: 9990;
    }

    #menuToggle:checked ~ .menuOverlay {
        opacity: 1;
        visibility: visible;
    }

    /* メニューコンテンツ */
    .menuContent {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        padding: 80px 20px 20px;
        transition: right 0.3s ease-in-out;
        overflow-y: auto;
        z-index: 9990;
    }

    #menuToggle:checked ~ .menuContent {
        right: 0;
    }

    .menuContent ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menuContent li {
        margin-bottom: 20px;
    }

    .menuContent a {
        color: #333;
        text-decoration: none;
        font-size: 18px;
        display: block;
        padding: 10px 0;
    }

    .menuContent a:hover {
        color: #666;
    }
}