/* header */
.header {
  padding: 10px 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  min-height: 80px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.001);
  color: var(--color-neutral-800);

  &.white {
    color: var(--color-neutral-50);
    img.svg-filter,
    label.svg-filter {
      filter: var(--color-svg-filter-neutral-50);
    }
  }
  &:hover {
    @media (min-width: 1025px) {
      background: var(--color-neutral-50, #ffffff);
      border-bottom: 1px solid var(--color-neutral-200);
      box-shadow: var(
        --shadow-50-box-shadow,
        0px 2px 8px 0px rgba(0, 0, 0, 0.03)
      );
      color: inherit;
      img.svg-filter,
      label.svg-filter {
        filter: none;
      }
      & .submenu {
        display: flex;
      }
    }
  }
  &:has(#menu-toggle:checked) {
    background: var(--color-neutral-50, #ffffff);
    border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(
      --shadow-50-box-shadow,
      0px 2px 8px 0px rgba(0, 0, 0, 0.03)
    );
    color: inherit;
    img.svg-filter,
    label.svg-filter {
      filter: none;
    }
    & .menu-container {
      @media (max-width: 1024px) {
        display: block;
      }
    }
  }
}

.nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1240px;
  padding: 0 20px;
  position: relative;

  @media (max-width: 1024px) and (min-width: 768px) {
    padding: 0 24px;
  }

  @media (max-width: 767px) {
    padding: 0 20px;
  }
}
.logo {
  width: 60px;
  height: 60px;
  position: absolute;
  overflow: hidden;
  left: 20px;
  top: 0;
}
.menu-container {
  width: 100%;
  display: block;
  @media (max-width: 1024px) {
    display: none;
  }
}
.menu-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 32px;
  padding: 18px 0px;

  @media (max-width: 1024px) and (min-width: 768px) {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
    padding: 96px 8px 24px 24px;
  }

  @media (max-width: 767px) {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 92px);
    grid-template-rows: auto;
    justify-content: space-between;
    gap: 0;
    row-gap: 48px;
    column-gap: normal;
    padding: 96px 4px 24px 12px;
  }
}
.header .menu {
  display: flex;
  flex-direction: column;
  gap: 16px;

  &:not(.exlink) {
    width: 92px;
  }
  &.exlink {
    position: absolute;
    right: 20px;
    top: 0;
    padding: 18px 0px;
  }

  @media (max-width: 1024px) {
    gap: 16px;
    width: 92px;
    &.exlink {
      position: relative;
      padding: 0;
      right: 0;
    }
  }
}

.menu-button {
  display: none;
  position: absolute;
  right: 20px;
  top: 0px;

  width: 60px;
  height: 60px;
  padding: 12px 12px;

  & > .menu-btn {
    display: block;
    width: 36px;
    height: 36px;
    background-image: url(../images/icon/header-menu.svg);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }

  & > #menu-toggle {
    display: none;
  }
  & > #menu-toggle:checked + .menu-btn {
    background-image: url(../images/icon/header-close.svg);
  }

  @media (max-width: 1024px) {
    display: block;
    right: 10px;
  }
}

.menu-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-size: var(--font-size-desktop-body-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--lineheight-desktop-body-m);
  cursor: default;

  &.xs {
    font-size: var(--font-size-desktop-body-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--lineheight-desktop-body-xs);
    @media (max-width: 767px) {
      font-size: var(--font-size-mobile-body-m);
    }
  }

  @media (max-width: 1024px) and (min-width: 768px) {
    font-weight: var(--font-weight-semibold);
  }
  @media (max-width: 767px) {
    font-size: var(--font-size-mobile-body-l);
    font-weight: var(--font-weight-bold);
  }
}
.submenu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;

  @media (min-width: 1025px) {
    display: none;
  }
  @media (max-width: 1024px) and (min-width: 768px) {
    gap: 14px;
  }
  @media (max-width: 767px) {
    gap: 14px;
  }
}
.submenu > .li {
  display: flex;
  align-items: center;
  align-self: stretch;
  text-align: center;
  color: var(--color-neutral-700);
  font-size: var(--font-size-desktop-body-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--lineheight-desktop-body-s);
  cursor: pointer;
  &:hover {
    color: var(--color-neutral-800);
    font-weight: var(--font-weight-semibold);
  }

  @media (max-width: 767px) {
    font-size: var(--font-size-mobile-body-m);
    font-weight: var(--font-weight-medium);
  }
}
.menu-title-container {
  display: flex;
  padding: 2px 0px;
  align-items: flex-start;
  gap: 2px;
}
.svg-filter {
  &.white {
    filter: var(--color-svg-filter-neutral-50);
  }
}
/* header end */