@charset "utf-8";

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

/* hamburger */

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

@media screen and (max-width:600px) {

    .onoff-btn {
        width: 45px;
        height: 45px;
        background-color: #555555;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: .5rem;
        right: 1rem;
        font-size: .9rem;
        z-index: 500;
    }

    .global-nav {
        flex-direction: column;
        width: 100%;
        height: 35rem;
        background-color: rgba(112, 112, 112, .85);
        position: fixed;
        top: 0;
        left: 100%;
        padding: 4.5rem 0 0 3.5rem;
        transition: all .4s linear;
        z-index: 200;
    }

    .global-nav__item {
        width: 100%;/*横幅いっぱいに広げてくれる*/
        text-align: left;
        font-size: 2rem;
        padding: 1rem 0 1rem .5rem;
        color: #ffffff;
        border-bottom: solid 1px #ffffff;

    }

    .global-child-nav {
        width: 20rem;
        font-size: 1rem;
        gap: 1rem;
        background-color: transparent;
        margin-left: 8rem;
        margin-top: -4.8rem;
    }

    .global-child-nav__item {
        line-height: .8rem;
    }


    .onoff-btn:hover {
        background-color: rgb(199, 178, 16);
        transition: all .7s;
        }

    #menu-switch:checked ~ .global-nav {
        left: 0;
    }
    /*HTMLでのチェックボタンとナビの順序に気を付ける(先にチエックボタンを記述してないとだめ)*/

}