/*============================*/
/* ハンバーガーメニュー */
/*============================*/
.hamburger {
    display: none;
    cursor: pointer;
}
.hamburger__bar {
    display: block;
    width: 38px;
    height: 6px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #333;
    transition: .5s;
}
.hamburger__bar:last-child {
    margin-bottom: 0;
}

/*============================*/
/* ナビゲーション */
/*============================*/
.nav__list {
    display: flex;
}
.nav__item {
    margin-right: 20px;
}
.nav__item:last-child {
    margin-right: 0;
}

/*============================*/
/* ハンバーガーメニュー */
/*============================*/
.is-hamburger {
    overflow: hidden;
}
.hamburger__image{
    opacity: 0;
    display: none;
    transition: .5s;
    width: 70px;
}
.hamburger__image--close{
    width: 38px;
    display: block;
}

/*============================*/
/* レスポンシブ */
/*============================*/
@media (max-width: 1024px) {
    /* .is-hamburger header{
        background-color: #F0F4FF;
    } */
    .is-hamburger .logo{
        display: none;
    }
    .is-hamburger .globalnav {
        margin-block: 10px;
        position: fixed;
        top: 0px;
        z-index: 110;
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        width: 100%;
        margin: auto;
        align-items: start;
        background-color: #F0F4FF;
    }

    .is-hamburgerOpen .hamburger__image{
        opacity: 1;
        display: block;
        transition: .5s;
    }
    .is-hamburgerOpen .hamburger__image--close{
        display: none;
    }
    .nav {
        display: none;
        flex-direction: column;
    }
    .nav__item {
        margin-right: 0;
    }
    .hamburger{
        display: block;
        padding: 15px;
    }
    .is-hamburgerMenu {
        display: block;
        width: 100vw;
        height: 100vh;
        background-color: #F0F4FF;
    }
    .is-hamburgerMenu .icon{
        width: 45px;
        display: inline-block;
        padding: 50px 6px 0 6px;
    }
    .menu {
        display: block;
        max-width: 200px;
        width: 100%;
        margin-inline: auto;
        font-size: 1.5rem;
    }
    .menu__item{
        text-align: left;
        padding-bottom: 30px;
    }
    .menu::before{
        content: "MENU";
        position: absolute;
        top: 100px;
        left: -40px;
        font-size: 3.5rem;
        z-index: 0;
        display: inline-block;
        transform: rotate(-90deg);
        color: #fff;
    }
}