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

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

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

      .color {
        display: none;
      }

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

    /* ==== nav ==== */
    .nav {
      min-inline-size: 668px;
      gap: 40px;
      padding-inline: 40px;
      pointer-events: auto;
      block-size: 100%;

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

      & > ul {
        text-align: center;
        font-weight: 500;
        display: block grid;
        justify-content: end;
        grid-template-columns: repeat(5, max-content);
        gap: 40px;
        color: #fff;
        block-size: inherit;

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            align-items: center;
            inline-size: 100%;
            block-size: inherit;
          }
        }
      }
    }
    .unit[data-id='contact'] {
      inline-size: 175px;
      block-size: 50px;
      font-weight: 500;

      .hover {
        position: relative;
        display: block grid;
        grid-template-columns: repeat(2, max-content);
        gap: 8px;
        align-items: center;
        justify-items: center;
        place-content: center;
        inline-size: 100%;
        block-size: 100%;
        background-color: transparent;
        border-radius: 10px;
        border: solid 1px #fff;
        transition: all 250ms ease 0s;
        color: #fff;

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 10px;
          background: transparent;
          transition: all 250ms ease 0s;
          z-index: -1;
        }

        .white {
          display: block flow;
        }
        .color {
          display: none;
        }
      }
      @media (any-hover: hover) {
        &:hover {
          .hover {
            background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;

            &:before {
              background: #fff;
            }

            .white {
              display: none;
            }
            .color {
              display: block;
            }
          }
        }
      }

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

  .header ul li {
    position: relative;
  }

  .header ul li::after {
    content: '';
    position: absolute;
    inline-size: 0;
    block-size: 2px;
    background: #fff;
    bottom: 16px;
    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%;
    }
  }

  .is-header-color {
    .header {
      background-color: rgba(255, 255, 255, 0.8);

      .logo {
        .white {
          display: none;
        }
        .color {
          display: block;
        }
      }

      .nav {
        & ul {
          color: var(--black);
        }
      }

      .unit[data-id='contact'] {
        .hover {
          border: solid 1px var(--black);
          color: var(--black);
          .white {
            filter: brightness(0) saturate(100%) invert(15%) sepia(12%) saturate(2467%) hue-rotate(166deg) brightness(88%) contrast(82%);
          }
        }
        @media (any-hover: hover) {
          &:hover {
            .hover {
              border: unset;
              color: #fff;
              background: unset;
              -webkit-background-clip: unset;
              -webkit-text-fill-color: unset;
              background-clip: unset;

              &:before {
                background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
              }

              .white {
                display: block;
                filter: unset;
              }
              .color {
                display: none;
              }
            }
          }
        }
      }
    }
    .header ul li::after {
      background: var(--black);
    }
  }
}

/* =====================
  Recruit header
===================== */
@layer style {
  .recruiut-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 82px;
    padding-inline: 40px;
    z-index: 20;
    display: block grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    justify-content: space-between;
    transition: all 250ms ease 0s;

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

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

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

    /* ==== nav ==== */
    .nav {
      min-inline-size: 668px;
      gap: 40px;
      padding-inline: 40px;
      pointer-events: auto;
      block-size: 100%;

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

      & > ul {
        text-align: center;
        font-weight: 500;
        display: block grid;
        justify-content: end;
        grid-template-columns: repeat(5, max-content);
        gap: 40px;
        block-size: inherit;
        color: var(--primary);

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            align-items: center;
            inline-size: 100%;
            block-size: inherit;
          }
        }
      }
    }
    .unit[data-id='entry'] {
      inline-size: 109px;
      block-size: 50px;
      font-weight: 500;

      .hover {
        position: relative;
        display: block grid;
        place-content: center;
        inline-size: 100%;
        block-size: 100%;
        background-image: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
        border-radius: 10px;
        transition: all 250ms ease 0s;

        &::before {
          content: '';
          position: absolute;
          inset: 1px;
          border-radius: 9px;
          background-color: #fff;
          opacity: 0;
          transition: all 250ms ease 0s;
        }

        .u-text-gradation {
          position: relative;
          background: unset;
          -webkit-background-clip: unset;
          -webkit-text-fill-color: unset;
          background-clip: unset;
          color: #fff;
          font-family: var(--title);
          text-align: center;
        }
      }
      @media (any-hover: hover) {
        &:hover {
          .hover {
            .u-text-gradation {
              background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }

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

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

  .recruiut-header ul li {
    position: relative;
  }

  .recruiut-header ul li::after {
    content: '';
    position: absolute;
    inline-size: 0;
    block-size: 1px;
    background: var(--primary);
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 250ms ease 0s;
  }

  body[data-page='about'] .recruiut-header ul li[data-id='about'],
  body[data-page='culture'] .recruiut-header ul li[data-id='culture'],
  body[data-page='person'] .recruiut-header ul li[data-id='person'],
  body[data-page='faq'] .recruiut-header ul li[data-id='faq'],
  body[data-page='requirements'] .recruiut-header ul li[data-id='requirements'] {
    &::after {
      inline-size: 100%;
    }
  }

  .is-header-color {
    .recruiut-header {
      background: linear-gradient(180deg, #ffffff -3.45%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    }
  }
}