@charset "UTF-8";
/* =====================
  header
===================== */
@layer style {
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 72px;
    padding-inline: 16px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(59, 61, 60, 0.1);
    margin-block-start: 24px;
    margin-inline: 40px;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      min-block-size: calc((100 / 390) * 60 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw) 0;
      box-shadow: 0px 0px calc((100 / 390) * 20 * 1vw) rgba(59, 61, 60, 0.1);
      margin-block-start: calc((100 / 390) * 8 * 1vw);
      margin-inline: calc((100 / 390) * 8 * 1vw);
      border-radius: calc((100 / 390) * 10 * 1vw);
      padding-block: 0;
    }

    /* ==== logo ==== */
    .logo {
      inline-size: fit-content;
      pointer-events: auto;
      display: block grid;
      place-content: center;

      @media (width <= 768px) {
        & img {
          width: calc((100 / 390) * 190 * 1vw);
        }
      }
    }

    .logo-big {
      display: none;
    }

    /* ==== nav ==== */
    .nav {
      pointer-events: auto;
      display: block grid;
      align-items: center;
      grid-template-columns: auto max-content max-content;

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

      & > ul {
        text-align: center;
        font-weight: 500;
        display: block grid;
        grid-template-columns: repeat(5, max-content);
        gap: 48px;
        block-size: 100%;

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            grid-template-rows: repeat(2, max-content);
            padding-block-start: 16px;
            inline-size: 100%;
            block-size: inherit;
          }
        }
      }
      .unit {
        .u-hover {
          display: block grid;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;
        }
        &[data-id='sdgs'] {
          margin-inline: 28px;
          .u-hover {
            padding-inline: 20px;
          }
        }
        &[data-id='contact'] {
          --_primary-color: #1990bc;
          --_secondary-color: #4ae296;
          inline-size: 52px;
          aspect-ratio: 1/1;
          border-radius: 50rem;
          transition:
            --_primary-color 500ms ease 0s,
            --_secondary-color 500ms ease 0s;
          background: linear-gradient(180deg, var(--_primary-color) 0%, var(--_secondary-color) 100%);
          .anchor {
            display: block grid;
            place-content: center;
            inline-size: 100%;
            block-size: 100%;
          }
          @media (any-hover: hover) {
            &:hover {
              --_primary-color: #4ae296;
              --_secondary-color: #1990bc;
            }
          }
        }

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

  .header ul li {
    position: relative;
  }

  .header ul li::after {
    content: '';
    position: absolute;
    inline-size: 0;
    block-size: 2px;
    background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
    bottom: 21px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 250ms ease 0s;
  }

  body[data-page='top'] .header ul li[data-id='top'],
  body[data-page='company'] .header ul li[data-id='company'],
  body[data-page='works'] .header ul li[data-id='works'],
  body[data-page='business'] .header ul li[data-id='business'],
  body[data-page='recruit'] .header ul li[data-id='recruit'],
  body[data-page='sdgs'] .header ul li[data-id='sdgs'],
  body[data-page='contact'] .header ul li[data-id='contact'] {
    pointer-events: none;

    &::after {
      inline-size: 100%;
    }
  }
}