/*　ハンバーガーボタン　*/
.hamburger {
    display: block;
    position: relative;
    z-index: 3;
    right: 13px;
    top: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .hamburger {
        width: 20px;
    }
}

.hamburger span {
    display: block;
    position: absolute;
    will-change: transform;
    width: 30px;
    height: 1px;
    left: 6px;
    background: #555;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 10px;
}

.hamburger span:nth-child(2) {
    top: 20px;
}

/* ナビ開いてる時のボタン */
.hamburger.active {
    z-index: 1000;
}

.hamburger.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff;
}

.hamburger.active span:nth-child(2) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #fff;
}

#headerMenu>.hamburger {
    top: 60px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #headerMenu>.hamburger {
        top: 50px;
    }
}

@media screen and (max-width: 767px) {
    #headerMenu>.hamburger {
        top: 35px;
    }
}

/* headerMenu
------------------------------------------ */
#headerMenu {
    top: 0px;
    right: 0px;
    opacity: 0;
    position: fixed;
    height: 100vh !important;
    z-index: 1000;
    -webkit-transition: all 0.37s ease;
    transition: all 0.37s ease;
    pointer-events: none;
    width: 380px;
    will-change: opacity;
    opacity: 0;
    pointer-events: none;
}

#headerMenu::after {
    content: "";
    display: block;
    height: 100vh !important;
    width: 380px;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    -webkit-transition: all 0.52s ease;
    transition: all 0.52s ease;
    -webkit-transform: translate(-242px, 0);
    transform: translate(142px, 0);
    background-color: rgba(87, 90, 95, 0.9);
}

#headerMenu.-is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1000;
}

#headerMenu.-is-active::after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    z-index: -1;
}

#headerMenu .js-menuButton a {
    pointer-events: none;
}

#headerMenu.-is-active .js-menuButton a {
    pointer-events: all;
}

#headerMenu .js-menuButton a:hover {
    text-decoration: none;
}

#headerMenu .headerMenuList {
    padding: 11.5vh 0 60px 50px;
}

#headerMenu .headerMenuList li {
    margin-bottom: 30px;
    margin-bottom: 2.8vh;
}

#headerMenu .li-box {
    border-left: solid 1px #fff;
    padding-left: 10px;
    line-height: 1.3em;
}

#headerMenu .headerMenuList a {
    color: #fff;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.0em;
    font-weight: 600;
    letter-spacing: .02em;
    pointer-events: none;
}

#headerMenu.-is-active .headerMenuList a {
    pointer-events: auto;
    text-decoration: none;
}

#headerMenu .headerMenuList a .textTranstionText {
    -webkit-transform: translateY(2em);
    transform: translateY(2em);
}

#headerMenu.-is-active .headerMenuList a .textTranstionText {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.textTranstionTextClone {
    -webkit-transform: translateY(2.7em);
    transform: translateY(2.7em);
    padding-top: 14px;
}

body.-is-noTouch #headerMenu .headerMenuList a:hover .textTranstionText {
    -webkit-transform: translateY(-2.7em);
    transform: translateY(-2.7em);
}

body.-is-noTouch #headerMenu.-is-active .headerMenuList a:hover .textTranstionTextClone {
    -webkit-transform: translateY(1.8em);
    transform: translateY(1.8em);
}

#headerMenu .midnightInner {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
}

#headerMenu .js-menuButton {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    position: absolute;
    bottom: 40px;
    padding-left: 60px;
    font-size: 16px;
    font-family: "Cormorant Garamond", serif;
    line-height: 1;
    letter-spacing: 0.07em;
}

.headerMenuListWrap {
    height: 100vh;
    overflow: scroll;
}

.js-menuButton.menuOpen {
    display: -webkit-box;
    display: flex;
    opacity: 0;
    -webkit-box-align: end;
    align-items: flex-end;
    top: auto !important;
    left: 42px !important;
    right: auto !important;
    height: 1em !important;

    bottom: 35px;
    padding-left: 60px;
    font-size: 16px;
    font-family: "Cormorant Garamond", serif;
    line-height: 1;
    letter-spacing: 0.07em;
    position: fixed;
    z-index: 100;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    pointer-events: none;
}

.-is-menuOpen .js-menuButton.menuOpen {
    opacity: 0;
}

.js-menuButton.menuOpen a {
    color: #414242;
}


.menuOpen.fixed {
    opacity: 1;
    pointer-events: all;
}

body.-is-noTouch .js-menuButton a:hover {
    text-decoration: none;
}

#headerMenu a {
    color: #fff;
    pointer-events: auto;
}

body.-is-noTouch #headerMenu a:hover {
    text-decoration: none;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #headerMenu {
        height: 100% !important;
    }
}

@media screen and (max-width: 767px) {
    #headerMenu {
        height: 100% !important;
    }

    #headerMenu p {
        padding: 0 0 34px 7vw;
    }

    #headerMenu .headerMenuListWrap {
        height: 100vh;
        display: -webkit-box;
        display: flex;
    }

    #headerMenu .headerMenuList {
        padding: 15.2vh 0 0 8vw;
    }

    #headerMenu .headerMenuList li {
        margin-bottom: 30px;
        margin-bottom: 3.0vh;
    }

    #headerMenu .js-menuButton {
        /* padding-left: 8vw; */
        padding-left: 8.6vw;
        /* bottom: 5%; */
    }

    .js-menuButton.menuOpen {
        left: 20px !important;
    }

    .sp-menu-end{
        padding-bottom: 15vh;
    }
}