header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}

.l-header {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 767px) {
  .l-header {
    max-width: 1380px;
    height: 80px;
  }
}
@media screen and (min-width: 767px) {
  .l-header {
    max-width: 95.8333333333vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header {
    max-width: 89.3333333333vw;
    height: 14.6666666667vw;
  }
}

@media screen and (min-width: 767px) {
  .l-header__logo img {
    width: 165px;
    height: 22.5px;
  }
}
@media screen and (max-width: 766px) {
  .l-header__logo img {
    width: 29.3333333333vw;
    height: 4vw;
  }
}

.l-header__right {
  display: flex;
  align-items: center;
}

.l-header__right__contact {
  background-color: #2E2E2E;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 767px) {
  .l-header__right__contact {
    width: 140px;
    height: 35px;
  }
}
@media screen and (max-width: 766px) {
  .l-header__right__contact {
    width: 37.3333333333vw;
    height: 9.3333333333vw;
  }
}
@media screen and (min-width: 767px) {
  .l-header__right__contact img {
    width: 13.28px;
    height: 13.29px;
  }
}
@media screen and (max-width: 766px) {
  .l-header__right__contact img {
    width: 3.5413333333vw;
    height: 3.544vw;
  }
}
.l-header__right__contact span {
  color: #fff;
}
@media screen and (max-width: 766px) {
  .l-header__right__contact span {
    font-size: calc((13 / 375) * 100vw);
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 400;
  }
}
@media screen and (min-width: 767px) {
  .l-header__right__contact span {
    font-size: 13px;
    letter-spacing: 0.1em;
    margin-left: 9px;
  }
}
@media screen and (max-width: 766px) {
  .l-header__right__contact span {
    margin-left: 2.4vw;
  }
}

.openbtn {
  position: relative;
  z-index: 9999;
  cursor: pointer;
}
@media screen and (min-width: 767px) {
  .openbtn {
    width: 40px;
    height: 13.71px;
    margin-left: 50px;
  }
}
@media screen and (max-width: 766px) {
  .openbtn {
    width: 10.6666666667vw;
    height: 3.656vw;
    margin-left: 5.3333333333vw;
  }
}
.openbtn span {
  position: absolute;
  display: inline-block;
  transition: all 0.6s;
  height: 1px;
  background-color: #1A1A1A;
}
.openbtn span:first-of-type {
  top: 0;
  left: 0;
}
@media screen and (min-width: 767px) {
  .openbtn span:first-of-type {
    width: 40px;
  }
}
@media screen and (max-width: 766px) {
  .openbtn span:first-of-type {
    width: 10.6666666667vw;
  }
}
.openbtn span:last-of-type {
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 767px) {
  .openbtn span:last-of-type {
    width: 30px;
  }
}
@media screen and (max-width: 766px) {
  .openbtn span:last-of-type {
    width: 8vw;
  }
}
.openbtn.active span:first-of-type {
  transform: rotate(-45deg);
}
.openbtn.active span:last-of-type {
  transform: rotate(45deg);
  top: 0;
  bottom: auto;
}
@media screen and (min-width: 767px) {
  .openbtn.active span:last-of-type {
    width: 40px;
  }
}
@media screen and (max-width: 766px) {
  .openbtn.active span:last-of-type {
    width: 10.6666666667vw;
  }
}

.l-header__drawer__wrap {
  position: relative;
  position: fixed;
  z-index: -1;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  background: #FFFFFF;
  transition: all 0.6s;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__wrap {
    height: 98vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 97.2222222222vw;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__wrap {
    width: 97.2222222222vw;
    top: 0.6944444444vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__wrap {
    padding: 8vw 0 32vw;
    width: 94.6666666667vw;
    top: 2.6666666667vw;
    left: 2.6666666667vw;
  }
}
.l-header__drawer__wrap.panelactive {
  visibility: visible;
  opacity: 1;
  z-index: 999;
}

.l-header__drawer__img {
  position: absolute;
  right: 0;
  z-index: 1;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__img {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__img {
    top: 13.3333333333vw;
  }
}
@media screen and (min-width: 767px) {
  .l-header__drawer__img img {
    height: 539.45px;
    width: 70px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__img img {
    height: 37.4618055556vw;
    width: 4.8611111111vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__img img {
    height: 122.9333333333vw;
    width: 16vw;
  }
}

@media screen and (min-width: 767px) {
  .l-header__drawer__inner {
    margin-left: auto;
    margin-right: auto;
    width: 840px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__inner {
    width: 58.3333333333vw;
  }
}

.l-header__drawer__sns {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__sns {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__sns {
    margin-bottom: 3.125vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__sns {
    margin-left: 8vw;
    margin-bottom: 9.3333333333vw;
  }
}

@media screen and (min-width: 767px) {
  .l-header__drawer__sns__insta {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__sns__insta {
    margin-right: 2.0833333333vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__sns__insta {
    margin-right: 8vw;
  }
}
@media screen and (min-width: 767px) {
  .l-header__drawer__sns__insta img {
    width: 35px;
    height: 35px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__sns__insta img {
    width: 2.4305555556vw;
    height: 2.4305555556vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__sns__insta img {
    width: 9.3333333333vw;
    height: 9.3333333333vw;
  }
}

@media screen and (min-width: 767px) {
  .l-header__drawer__sns__facebook img {
    width: 35px;
    height: 35px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__sns__facebook img {
    width: 2.4305555556vw;
    height: 2.4305555556vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__sns__facebook img {
    width: 9.3333333333vw;
    height: 9.3333333333vw;
  }
}

.l-header__drawer__nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__nav__list {
    row-gap: 28px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__nav__list {
    row-gap: 1.9444444444vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__nav__list {
    row-gap: 4.2666666667vw;
  }
}
.l-header__drawer__nav__list li {
  position: relative;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__nav__list li {
    width: 25%;
    padding-left: 33px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__nav__list li {
    padding-left: 2.2916666667vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__nav__list li {
    width: 100%;
    padding-left: 8.8vw;
  }
}
@media screen and (min-width: 767px) {
  .l-header__drawer__nav__list li:nth-of-type(10), .l-header__drawer__nav__list li:nth-of-type(12) {
    width: 75%;
  }

  .l-header__drawer__nav__list li.professional-hair {
    width: 42%;
  }

  .l-header__drawer__nav__list li.tokyo-beauty {
    width: 32%;
  }
}
.l-header__drawer__nav__list li::before {
  position: absolute;
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/module/arrow-b.png);
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__nav__list li::before {
    width: 20px;
    height: 3.88px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__nav__list li::before {
    width: 1.3888888889vw;
    height: 0.2694444444vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__nav__list li::before {
    width: 5.3333333333vw;
    height: 1.0346666667vw;
  }
}
.l-header__drawer__nav__list a {
  font-family: "Poppins", sans-serif;
}
@media screen and (min-width: 767px) {
  .l-header__drawer__nav__list a {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.2em;
    font-weight: 300;
  }
}
@media screen and (max-width: 1440px) and (min-width: 767px) {
  .l-header__drawer__nav__list a {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 766px) {
  .l-header__drawer__nav__list a {
    font-size: calc((14 / 375) * 100vw);
    line-height: 1.2;
    letter-spacing: 0.2em;
    font-weight: 300;
  }
}