@charset "UTF-8";

/* =====================
  header
===================== */
.header {
  @media (width > 768px) {
    padding-inline-end: 33px;
  }

  @media only screen and (width <= 768px) {
    inset: 4.2vw auto 0;
    padding-block: calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 7 * 1vw);
  }

  .logo {
    display: block flex;
    gap: 25px;
    align-items: center;
    color: var(--main);

    @media only screen and (width <= 768px) {
      flex-direction: column;
      gap: 1.3vw;
      line-height: 1;

      & span[lang='en'] {
        font-family: var(--sans-serif);
        font-size: calc((100 / 390) * 13 * 1vw);
      }
    }
  }

  .nav {
    display: block flex;
    gap: 21px;

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

    & a {
      display: block grid;
      gap: 2px;
      place-content: center;
      min-inline-size: 186px;
      padding-block: 14px;
      padding-inline: 37px;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

      & span {
        margin-block: calc((1em - 1lh) / 2);
        line-height: 1;

        &:first-child {
          translate: 0 -2px;
        }
      }

      & span[lang='en'] {
        font-size: 15px;
        line-height: 1;
      }

      &[data-id='requirements'] {
        color: var(--main);
        border: 2px solid var(--main);

        @media (any-hover: hover) {
          &:hover {
            background: color-mix(in srgb, var(--main) 20%, transparent);
          }
        }
      }

      &[data-id='entry'] {
        color: white;
        background: var(--main);
        border: 2px solid var(--main);

        @media (any-hover: hover) {
          &:hover {
            background: var(--d_sky);
            border-color: var(--d_sky);
          }
        }
      }
    }
  }
}

/* =====================
  aside
===================== */
.aside-recruit {
  padding-block: 80px;
  background-image: url('../img/recruit/aside.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 64 * 1vw);
    background-image: url('../img/recruit/aside_sp.webp');
  }

  /* ==== inner ==== */
  .inner {
    display: block flex;
    gap: 40px;
    justify-content: center;

    @media only screen and (width <= 768px) {
      flex-direction: column;
      gap: calc((100 / 390) * 16 * 1vw);
      padding-inline: calc((100 / 390) * 32 * 1vw);
    }

    & a {
      position: relative;
      display: block grid;
      grid-template-columns: 1fr auto;
      gap: 28px 185px;
      padding-block: 43.4px;
      padding-inline: 51.5px;
      overflow: hidden;
      border-radius: 20px;
      transition: all 250ms ease 0s;

      @media only screen and (width <= 768px) {
        gap: 2.7vw calc((100 / 390) * 31 * 1vw);
        padding-block: 6.4vw 7.1vw;
        padding-inline: calc((100 / 390) * 55 * 1vw);
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      &::before {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 200%;
        aspect-ratio: 1 / 1;
        pointer-events: none;
        content: '';
        border-radius: calc(infinity * 1px);
        opacity: 0;
        scale: 0;
        translate: -50% -50%;
        transition: scale 0.5s ease-in-out, opacity 0.1s ease-in-out;
        will-change: scale, opacity;
      }

      .title {
        position: relative;
        z-index: 2;
        grid-column-start: 1;
        font-size: 32px;
        font-weight: 500;
        line-height: 1;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
        }
      }

      & [lang='en'] {
        position: relative;
        z-index: 2;
        grid-column-start: 1;
        font-size: 24px;
        font-weight: 600;
        line-height: 1;

        @media only screen and (width <= 768px) {
          font-family: var(--sans-serif);
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }

      &::after {
        display: block flow;
        grid-row: 1 / span 2;
        grid-column-start: 2;
        inline-size: 60px;
        aspect-ratio: 1 / 1;
        line-height: 1;
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        translate: 3px 12px;
      }

      @media only screen and (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 41 * 1vw);
          translate: 0.1vw 0.9vw;
        }
      }

      @media (any-hover: hover) {
        &:hover {
          &::before {
            opacity: 1;
            scale: 2;
            transition: scale 0.6s ease-in-out, opacity 0.1s ease-in-out;
          }
        }
      }

      &[data-id='requirements'] {
        color: var(--main);
        background: white;
        border: 4px solid var(--main);

        @media only screen and (width <= 768px) {
          border: calc((100 / 390) * 2 * 1vw) solid var(--main);
        }

        &::before {
          background: #dbf7ff;
        }

        &::after {
          background-image: url('../img/_common/icon/arrow-circle-main-thin.svg');
        }
      }

      &[data-id='entry'] {
        color: white;
        background: var(--main);
        border: 4px solid var(--main);

        @media only screen and (width <= 768px) {
          border: calc((100 / 390) * 2 * 1vw) solid var(--main);
        }

        &::before {
          background: var(--d_sky);
        }

        &::after {
          background-image: url('../img/_common/icon/arrow-circle-white-thin.svg');
        }
      }
    }
  }
}

/* =====================
  footer
===================== */
.footer-recruit {
  padding-block: 72px 27px;
  background-image: url('../img/recruit/footer.png');
  background-repeat: no-repeat;
  background-size: cover;

  @media only screen and (width <= 768px) {
    padding-block: 20.3vw 4.7vw;
    background-image: url('../img/recruit/footer_sp.png');
  }

  .inner {
    display: block grid;
    grid-template-columns: 100%;
    align-items: center;
    justify-content: center;
    padding-inline: 80px;

    @media only screen and (width <= 768px) {
      padding-inline: 0;
    }

    /* ==== logo ==== */
    .logo {
      & a {
        display: block grid;
        gap: 4px;
        color: var(--main);
        text-align: center;

        @media only screen and (width <= 768px) {
          gap: 1.4vw;
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }

      @media only screen and (width <= 768px) {
        & img {
          inline-size: calc((100 / 390) * 244 * 1vw);
        }
      }
    }

    .address {
      margin-block-start: 32px;
      font-size: 18px;
      text-align: center;

      @media only screen and (width <= 768px) {
        margin-block-start: 8.6vw;
        font-size: calc((100 / 390) * 14 * 1vw);
      }

      & address {
        display: block flex;
        gap: 23px;
        justify-content: center;

        @media only screen and (width <= 768px) {
          gap: 4.6vw;
        }
      }

      .tel {
        display: block flex;
        gap: 36px;
        justify-content: center;

        @media only screen and (width <= 768px) {
          gap: 7.2vw;

          & a[href^='tel:'] {
            color: var(--blue);
            text-decoration: underline;
          }
        }
      }
    }

    .nav {
      display: block grid;
      gap: 24px;
      margin-block-start: 56px;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 25 * 1vw);
        margin-block-start: 14vw;
        font-size: calc((100 / 390) * 16 * 1vw);
      }

      .main-nav {
        display: block flex;
        gap: 56px;
        justify-content: center;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 32 * 1vw);
        }
      }

      .sub-nav {
        display: block flex;
        gap: 55px;
        justify-content: center;
        font-size: 14px;
        color: var(--grey);

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 32 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        & a {
          display: block flex;
          gap: 8px;

          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 8 * 1vw);
          }

          &::after {
            inline-size: 11px;
            aspect-ratio: 1 / 1;
            content: '';
            background-color: currentcolor;
            mask-image: var(--icon-blank);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
          }

          @media only screen and (width <= 768px) {
            &::after {
              inline-size: calc((100 / 390) * 11 * 1vw);
            }
          }
        }
      }
    }

    .copyright {
      display: block flow;
      inline-size: 100%;
      padding-block-start: 25px;
      margin-block-start: 24px;
      margin-inline: auto;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      color: #848484;
      text-align: center;
      border-block-start: 1px solid #c3d2d9;

      @media only screen and (width <= 768px) {
        max-inline-size: calc((100 / 390) * 358 * 1vw);
        padding-block: 4.3vw 0;
        margin-block-start: 4.1vw;
        margin-inline: calc((100 / 390) * 16 * 1vw);
        font-size: calc((100 / 390) * 12 * 1vw);
      }
    }
  }
}

/* =====================
  sp-nav
===================== */
.sp-nav {
  block-size: fit-content;
  background: var(--sub);

  /* ==== inner ==== */
  .inner {
    display: block grid;
    grid-template-rows: auto 1fr;
    grid-auto-rows: min-content;
    min-block-size: calc((100 / 390) * 456 * 1vw);
    padding-block: 31.5vw 9vw;
    padding-inline: calc((100 / 390) * 0 * 1vw);
    overflow-y: scroll;
  }

  /* ==== main-nav ==== */
  .main-nav {
    display: block grid;
    gap: 3.9vw;
    align-items: flex-start;

    & a {
      display: block grid;
      gap: calc((100 / 390) * 0 * 1vw);
      justify-content: center;
      min-inline-size: calc((100 / 390) * 220 * 1vw);
      padding-block: calc((100 / 390) * 6.8 * 1vw) calc((100 / 390) * 10.8 * 1vw);
      padding-inline: calc((100 / 390) * 60 * 1vw);
      margin-inline: auto;
      font-weight: 500;
      text-align: center;
      border-radius: calc(infinity * 1px);

      .title {
        font-size: calc((100 / 390) * 15 * 1vw);
      }

      & [lang='en'] {
        font-size: calc((100 / 390) * 13 * 1vw);
        line-height: 1;
      }

      &[data-id='requirements'] {
        color: var(--main);
        background: white;
        border: calc((100 / 390) * 2 * 1vw) solid var(--main);
      }

      &[data-id='entry'] {
        color: white;
        background: var(--main);
        border: calc((100 / 390) * 2 * 1vw) solid var(--main);
      }
    }
  }

  /* ==== sub-nav ==== */
  .sub-nav {
    display: block flex;
    gap: 9vw;
    align-items: flex-start;
    align-self: flex-end;
    justify-content: center;
    margin-block-start: 0;
    margin-inline: auto;
    font-size: calc((100 / 390) * 12 * 1vw);
    color: var(--black);

    & a {
      display: block flex;
      gap: 1.6vw;

      &::after {
        inline-size: calc((100 / 390) * 11 * 1vw);
        aspect-ratio: 1 / 1;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-blank);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }
    }
  }
}

/* =====================
  u-mv
===================== */
.u-mv {
  &::before,
  &::after {
    display: none;
  }

  @media only screen and (width <= 768px) {
    block-size: calc((100 / 390) * 270 * 1vw);
  }

  & .inner {
    @media only screen and (width <= 768px) {
      padding-block-start: 30.1vw;
      padding-inline-start: calc((100 / 390) * 25.5 * 1vw);
    }
  }

  .u-breadcrumb {
    color: var(--black);

    & li:not(:last-child)::after {
      background-color: var(--black);
    }
  }
}