@charset "UTF-8";
/* =====================
  header
===================== */
@layer style {
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 94px;
    padding-inline: 40px 0;
    background-color: #fff;
    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;
      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) * 196 * 1vw);
        }
      }
    }

    .logo-big {
      display: none;
    }

    /* ==== nav ==== */
    .nav {
      pointer-events: auto;
      display: block grid;
      grid-template-columns: auto max-content 238px;

      @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;

            &::before {
              content: attr(data-text);
              background: linear-gradient(255.87deg, #d2d200 -8.93%, #007635 37.32%, #18562a 83.58%);
              font-size: 13px;
              font-weight: 500;
              line-height: 1.2;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }
      .unit {
        .u-hover {
          display: block grid;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;
        }
        &[data-id='sdgs'] {
          margin-inline-start: 8px;
          .u-hover {
            padding-inline: 40px;
          }
        }
        &[data-id='contact'] {
          .anchor {
            display: block grid;
            place-content: center;
            inline-size: 100%;
            block-size: 100%;
            background: linear-gradient(78.71deg, #003a13 50.95%, #459e00 152.95%);
            transition: background 0.3s ease-in-out;

            & span {
              position: relative;
              font-weight: 500;
              line-height: 1.4;
              color: #fff;
              display: block flex;
              gap: 16px;
              justify-content: center;
              align-items: center;

              &::before {
                content: '';
                display: block flow;
                inline-size: 30px;
                aspect-ratio: 30 / 20;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_mail.svg');
                transition: all 0.3s ease-in-out;
              }
            }
          }
          @media (any-hover: hover) {
            &:hover {
              .anchor {
                background: #789676;
                & span {
                  &::before {
                    background-image: url('../img/_common/icon_mail2.svg');
                  }
                }
              }
            }
          }
        }

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

  .header-color .header {
  }

  .menu-on .header {
  }

  .header ul li {
    position: relative;
  }

  .header ul li::after {
    content: '';
    position: absolute;
    inline-size: 12px;
    aspect-ratio: 12 / 8;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-image: var(--icon-arrow);
    background-color: currentColor;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transition: all 250ms ease 0s;
    opacity: 0;
  }

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

    &::after {
      opacity: 1;
    }
  }
}