@charset "utf-8";

/*
</header>の後に
    <input type="checkbox" id="menu-switch" class="menu-check">
    <label for="menu-switch" class="onoff-btn">MENU</label>
を追加

<nav>に
    class="global-nav-box"
を追加
*/

.menu-check,
.onoff-btn{
    display: none;
}

@media screen and (max-width:600px) {
    .onoff-btn{
        width: 3rem;
        height: 3rem;

        color: #fff;
        background-color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;

        position: fixed;
        top: 23px;
        right: 10px;
    }
    .global-nav{
        flex-direction: column;
    }

    .global-nav-box{
        width: 100%;
        height: 100%;

        background-color: #000000;

        position: fixed;
        top: 0;
        left: 0;
    }

    .onoff-btn{
        z-index: 90;
    }

    .global-nav-box{
        z-index: 80;
    }

    .global-nav__item{
        color: #fff;
    }

    .global-nav__item{
        border-bottom: solid 1px #fff;
        width: 100%;
    }

    .global-nav{
        padding: 4.5rem 2rem 0;
    }

    .global-nav__item a{
        padding: 2rem 0 0.5rem;
        font-size:1.25rem;
        text-align: left;
    }
    .global-nav-box{
        left: 100%;
    }

    #menu-switch:checked ~ .global-nav-box{
        left: 0;
    }
    .global-nav-box{
        transition: all 0.4s linear;
    }

 
} 
    

/* hamburger */