@charset "utf-8";


header {
  padding-top: 36px;
  padding-right: 40px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 7;
  pointer-events: none;
}
.ham {
  width: 31px;
  height: 31px;
  margin-left: auto;
  position: relative;
  display: block;
  z-index: 10;
  pointer-events: auto;
}
.ham span {
  width: 30px;
  height: 1px;
  background-color: #000000;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  display: block;
  transition: 0.3s;
}
.ham.index span {
  background-color: #FFFFFF;
}
.ham span:nth-child(1){
  top: 12px;
}
.ham span:nth-child(2) {
  bottom: 12px;
}
.ham.open span {
  background-color: #FFFFFF;
}
.ham.open span:nth-child(1) {
  transform: translate(-50%,-50%) rotate(12deg);
  top: 50%;
}
.ham.open span:nth-child(2) {
  transform: translate(-50%,-50%) rotate(-12deg);
  top: 50%;
  bottom: initial;
}


.headerNav__bg {
  background-color: rgba(14,23,20,0.75);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow-x: scroll;
  display: none;
  z-index: 6;
  pointer-events: auto;
}
.headerNav {
  background-color: #35453F;
  color: #DBDBDB;
  max-width: 492px;
  margin-left: auto;
  min-height: 100svh;
  position: relative;
  font-family: "NHaasGroteskDSPro-45Lt";
}
.headerNav__img--1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
}
.headerNav__img--2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 305px;
  z-index: 2;
}
.headerNav__square {
  background-color: #EEFF1D;
  width: 130px;
  height: 157px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.headerNav__item {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 143px;
  z-index: 3;
}
.headerNav__list {
  margin-bottom: 44px;
}
.headerNav__listItem {
  margin-bottom: 17px;
  position: relative;
}
.headerNav__listItem.current::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #DBDBDB;
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}
.headerNav__listLink {
  font-size: 2.7rem;
  letter-spacing: 0.04em;

}
.headerNav__sns {
  display: flex;
  flex-direction: column;
  gap: 22px 0;
}
.headerNav__snsLink {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  transition: 0.3s;
}
.headerNav__snsLink:hover {
  opacity: 0.7;
}
.headerNav__snsIcon {
  width: 14px;
  margin-right: 7px;
}


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

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

}
@media screen and (max-width: 750px) {
  header {
    padding-right: 6%;
    padding-top: 19px;
  }
  .headerNav {
    width: 330px;
  }
  .headerNav__img--1 {
    width: 160px;
  }
  .headerNav__img--2 {
    width: 258px;
  }
  .headerNav__square {
    width: 105px;
    height: 134px;
  }
  .headerNav__item {
    left: 92px;
  }
  .headerNav__list {
    margin-bottom: 52px;
  }
  .headerNav__listItem {
    margin-bottom: 13px;
  }
  .headerNav__listItem.current::before {
    left: -19px;
  }
  .headerNav__snsLink {
    font-size: 1.1rem;
  }
  .headerNav__snsIcon {
    margin-right: 5px;
  }
}
@media screen and (max-width: 480px) {

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

}