@charset "UTF-8";
/* =====================
  header
===================== */
@layer style {
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 90px;
    padding-inline: 40px 120px;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: max-content auto;
    align-items: center;
    justify-content: space-between;
    transition: all 250ms ease 0s;
    background-color: #fff;

    @media (width <= 768px) {
      min-block-size: calc((100 / 390) * 70 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw) 0;
    }

    /* ==== title ==== */
    .title {
      background-color: #121212;
      color: #fff;
      font-size: 12px;
      line-height: 1.4;
      grid-area: 1/1/2/3;
      padding-inline: 16px;
      padding-block: 4px;

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 10 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        padding-block: calc((100 / 390) * 3 * 1vw);
      }
    }
    /* ==== logo ==== */
    .logo {
      grid-area: 2/1/3/2;
      inline-size: fit-content;
      pointer-events: auto;
      display: block grid;
      place-content: center;

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

    .logo-big {
      display: none;
    }

    /* ==== nav ==== */
    .nav {
      gap: 40px;
      padding-inline: 40px;
      pointer-events: auto;

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

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

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            grid-template-rows: repeat(2, max-content);
            align-content: center;
            inline-size: 100%;
            block-size: inherit;
          }
        }
      }
    }
    .unit[data-id='contact'] {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 120px;
      block-size: 120px;
      font-family: var(--serif);
      font-weight: 600;
      line-height: 1.4;
      color: #fff;

      .hover {
        position: relative;
        display: block grid;
        gap: 8px;
        justify-items: center;
        place-content: center;
        inline-size: 100%;
        block-size: 100%;
        background: transparent;

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: -2;
          background: linear-gradient(223.16deg, #2b7996 27.71%, #102647 117.52%);
        }
        &::after {
          content: '';
          position: absolute;
          inset: 0;
          opacity: 1;
          transition: opacity 0.4s ease;
          z-index: -1;
          background: linear-gradient(222.65deg, #102647 60.49%, #2b7996 112.7%);
        }
      }
      @media (any-hover: hover) {
        &:hover {
          .hover {
            &::after {
              opacity: 0;
            }
          }
        }
      }

      @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(139deg, #102647 0%, #2b7996 100%);
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 250ms ease 0s;
  }

  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='sdgs'] .header ul li[data-id='sdgs'],
  body[data-page='recruit'] .header ul li[data-id='recruit'] {
    &::after {
      inline-size: 100%;
    }
  }
}