@charset "UTF-8";
/* =====================
  header
===================== */
@layer style {
  .header {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 20;
    display: block grid;
    grid-template-columns: max-content 1fr;
    align-items: start;
    justify-items: end;
    justify-content: space-between;
    padding-inline: 40px 20px;
    transition: all 250ms ease 0s;

    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 390) * 8 * 1vw);
    }

    &::before {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: 100% 174px;
      background-position: center;
      background-image: url('../img/_common/header_bg.svg');
      inline-size: 100%;
      min-block-size: 174px;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }

    @media only screen and (width <= 768px) {
      &::before {
        background-size: 100% calc((100 / 390) * 82 * 1vw);
        background-image: url('../img/_common/header_bg_2x.svg');
        min-block-size: calc((100 / 390) * 82 * 1vw);
      }
    }

    /* ==== logo ==== */
    .logo {
      pointer-events: auto;
      display: block grid;
      place-content: center;
      padding-block: 52px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 8 * 1vw);

        & img {
          width: calc((100 / 390) * 210 * 1vw);
        }
      }
    }

    /* ==== nav ==== */
    .nav {
      pointer-events: auto;
      margin-block-start: 20px;
      min-block-size: 61px;
      display: block grid;
      grid-template-columns: 1fr max-content max-content;
      align-items: center;
      column-gap: 13px;

      @media (width <= 768px) {
        display: none;
      }

      & > ul {
        block-size: 100%;
        text-align: center;
        display: block grid;
        justify-content: end;
        grid-template-columns: repeat(4, max-content);
        gap: 40px;
        font-size: 15px;
        font-weight: 500;
        margin-inline-end: 27px;

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            align-items: center;
            inline-size: 100%;
            block-size: 100%;
          }
        }
      }

      .unit[data-id='sdgs'] {
        .u-hover {
          display: block grid;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;
        }
      }
      .unit[data-id='contact'] {
        .u-hover {
          display: block grid;
          grid-template-columns: repeat(2, max-content);
          align-items: center;
          inline-size: 100%;
          block-size: 100%;
          padding-inline: 43px 38px;
          padding-block: 10px;
          gap: 8px;
          background-color: var(--secondary);
          border-radius: 50rem;
          font-family: var(--pop);
          font-size: 22px;
          font-weight: 500;
          color: #fff;
        }
      }
    }
  }
}