@media (max-width: 768px) {
    /* ハンバーガーメニュー */
    nav.menu.open {
        display: block;
    }

    /* ハンバーガーボタン */
    .hamburger {
        position: fixed;
        top: 25px;
        right: 20px;
        width: 30px;
        height: 24px; /* ←追加（高さ固定） */
        cursor: pointer;
        z-index: 20;
    }

    /* 線 */
    .hamburger span {
        position: absolute; /* ←超重要 */
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #333;
        transition: 0.4s;
        margin-top: 0;
    }

    /* 初期位置 */
    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 7px;
    }

    .hamburger span:nth-child(3) {
        top: 14px;
    }

    /* バツに変化 */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg);
        top: 10px; /* ←中央に集める */
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px; /* ←中央に集める */
    }

    /* メニュー */
    .menu {
        position: fixed;
        top: -110%;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        z-index: 5;
        transition: top 0.3s ease;
    }

    /* 表示時 */
    .menu.open {
        top: 0;
        padding: 0;
        display: block;
    }

    .menu.open ul {
        margin: 0;
        margin-top: 5rem;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .menu ul li {
        list-style-type: none;
        margin: 2rem 0;
    }

    .menu ul li.hamburger-menu {
        margin: 0;
        width: 50%;
    }

    .menu ul li a {
        padding: 0 0px;
    }

    p.hamburger-text {
        font-size: 10px;
        margin: 0;
        position: absolute;
        bottom: -17px;
    }

    .menu .nav-btn {
        width: 100%;
        height: auto;
        font-size: 21px;
        font-weight: bold;
        line-height: 1.5;
    }
    .text-menu {
        width: 100%;
        display: flex;
        margin-bottom: 45px;
    }
    .menu.open .nav-btn span {
        font-size: 10px;
        font-weight: 400;
    }

    .menu.open ul li.hamburger-menu.first-hamburger {
        width: 80%;
        margin: 0 auto;
    }
    a.nav-btn.nav-btn-red {
        padding: 15px 0;
        border-radius: 50px;
    }
    img.menu-img {
        width: 80%;
        margin: 110px auto 0;
    }

    a.nav-btn.nav-btn-blue img,
    a.nav-btn.nav-btn-blue2 img {
        width: 100%;
        padding: 0 25%;
    }
    a.nav-btn.nav-btn-blue span {
        font-size: 10px;
        font-weight: lighter;
    }
}