@charset "utf-8";

/* header__nav-content
------------------------------------------------------------- */
.nav-content {
  background-color: var(--color-white);
  padding: 56px 32px 0;
  position: absolute;
  top: -105vh;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}

.nav-content__list {
  margin-bottom: 12px;
}

.nav-content__list-link {
  display: block;
  font-size: var(--fsize-15);
  font-weight: 700;
  color: var(--color-main);
}

@media (min-width: 768px) {
  .nav-content {
    position: fixed;
    left: initial;
    top: 0;
    right: -41%;
    width: 40%;
    padding: 16px 32px;
  }
}

@media (min-width: 1280px) {
  .nav-content {
    width: 500px;
    padding: 128px 64px;
  }

  .nav-content__list-link {
    font-size: var(--fsize-18);
  }
}

/* header__nav-content - :open
------------------------------------------------------------- */
.site-title {
  z-index: 30;
}

.nav-content {
  transition-property: top, right;
  transition-duration: 0.4s;
}

.nav-content.open {
  top: 0;
}

.header.active-h {
  background-color: var(--color-white);
  position: fixed;
  inset: 0;
  z-index: 10;
}

.header.active-h .site-title {
  position: relative;
  align-self: start;
}

@media (min-width: 768px) {
  .nav-content.open {
    right: 0;
  }

  .header.active-h {
    position: initial;
    background-color: initial;
  }
}