@charset "UTF-8";

/* =====================
  header
===================== */
@layer style {
  .header {
    position: sticky;
    inset: 32px auto 0;
    z-index: 22;
    display: block grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: flex-start;
    padding-block: 0;
    padding-inline: 17px;
    margin-inline: 32px;
    container-type: inline-size;
    background: rgb(255 255 255 / 70%);
    border-radius: 8px;

    @media (width <=768px) {
      inset: calc((100 / 390) * 24 * 1vw) auto 0;
      padding-block: 3.7vw;
      margin-inline: calc((100 / 390) * 24 * 1vw);
    }

    /* ==== logo ==== */
    .logo {
      display: block grid;
      place-content: center;

      @media (width <=768px) {
        inline-size: calc((100 / 390) * 153 * 1vw);
      }
    }

    /* ==== nav ==== */
    .nav {
      margin-inline: auto 0;

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

      ul {
        position: relative;
        display: block flex;
        gap: 0;
        margin-inline-end: 25px;

        --active-anchor: --company;
        --_oversize: -3px;

        &::before {
          position: absolute;
          inset-block-start: calc(anchor(start) - var(--_oversize));
          inset-inline-start: calc(anchor(start) + var(--_oversize));
          z-index: 1;
          inline-size: calc(anchor-size(width) - calc(var(--_oversize) * 2));
          block-size: calc(anchor-size(height) + calc(var(--_oversize) * 2));
          position-anchor: var(--active-anchor);
          pointer-events: none;
          content: '';
          background: var(--lightblue);
          background: color-mix(in srgb, var(--lightblue) 20%, transparent);
          border-radius: 4px;
          opacity: 0;
          transition: all 300ms var(--slideInBezier) 0s;
        }

        a {
          display: block grid;
          padding-block: 21px;
          padding-inline: 24px;

          .title {
            position: relative;
            z-index: 2;
          }
        }

        @media (width > 768px) {
          @container (width < 840px) {
            margin-inline-end: 15px;

            a {
              padding-inline: 20px;
            }
          }

          @container (width < 840px) {
            a {
              padding-inline: 5px;
            }
          }
        }

        /* ==== active ==== */
        @media (any-hover: hover) {
          &:hover {
            &:has([data-id='company']:hover) {
              --active-anchor: --company;

              &::before {
                opacity: 1;
              }
            }

            &:has([data-id='product']:hover) {
              --active-anchor: --product;

              &::before {
                opacity: 1;
              }
            }

            &:has([data-id='recruit']:hover) {
              --active-anchor: --recruit;

              &::before {
                opacity: 1;
              }
            }

            &:has([data-id='sdgs']:hover) {
              --active-anchor: --sdgs;

              &::before {
                opacity: 1;
              }
            }
          }
        }
      }
    }

    /* ==== contact ==== */
    .contact {
      display: block flex;
      gap: 7px;
      padding-block: 6px;
      padding-inline: 15px;
      font-size: 15px;
      color: white;
      background: var(--lightblue);
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

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

      &::before {
        inline-size: 17px;
        aspect-ratio: 17 / 13;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-mail);
        mask-repeat: no-repeat;
        mask-position: 0 8px;
        mask-size: contain;
      }

      @media (any-hover: hover) {
        &:hover {
          color: var(--lightblue);
          background: white;
        }
      }
    }
  }

  /* ==== active ==== */
  body[data-page='company'] .header ul {
    --active-anchor: --company;

    &::before {
      opacity: 1;
    }
  }

  body[data-page='product'] .header ul {
    --active-anchor: --product;

    &::before {
      opacity: 1;
    }
  }

  body[data-page='recruit'] .header ul {
    --active-anchor: --recruit;

    &::before {
      opacity: 1;
    }
  }

  body[data-page='sdgs'] .header ul {
    --active-anchor: --sdgs;

    &::before {
      opacity: 1;
    }
  }
}