@charset "UTF-8";
/* =====================
  recruit-intro
===================== */
.recruit-intro {
  overflow-x: hidden;
  background-color: #2d70ac;
}
.recruit-intro_wrap {
  --bottom: 4.79vw;
  padding-block-end: var(--bottom);
  background: url(/assets/img/recruit/recruit-intro-bg.png) no-repeat center / cover;
  border-bottom-left-radius: 50% calc(var(--bottom) + 50rem);
  border-bottom-right-radius: 50% calc(var(--bottom) + 50rem);
  margin-left: -100rem;
  margin-right: -100rem;
}
.recruit-intro_text {
  letter-spacing: 0.03em;
  line-height: 2.3;
}
.recruit-intro_slide {
  margin-top: 80rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }
  .swiper-slide {
    width: 480rem;
    img,
    source {
      width: 100%;
      aspect-ratio: 480 / 320;
    }
  }
}

/* =====================
  numbers
===================== */
.numbers {
  background: url(/assets/img/recruit/numbers-bg.png) no-repeat center top / cover;
}
.numbers-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rem;
  > li {
    background-color: var(--color-white);
    border-radius: 16rem;
    padding: 48rem 24rem 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    &::before {
      position: absolute;
      font-family: var(--sans-serif);
      font-size: 24rem;
      line-height: 1.3;
      color: rgb(0 68 124 / 0.16);
      top: 24rem;
      left: 24rem;
      z-index: 1;
    }
    &:nth-child(1) {
      &::before {
        content: '01';
      }
    }
    &:nth-child(2) {
      &::before {
        content: '02';
      }
    }
    &:nth-child(3) {
      &::before {
        content: '03';
      }
    }
    &:nth-child(4) {
      &::before {
        content: '04';
      }
    }
    &:nth-child(5) {
      &::before {
        content: '05';
      }
    }
    &:nth-child(6) {
      &::before {
        content: '06';
      }
    }
    h3 {
      font-size: 24rem;
      line-height: 1.7;
      margin-bottom: 4rem;
    }
  }
}
.numbers-item_icon {
  img {
    width: 152rem;
    aspect-ratio: 1 / 1;
  }
}
.numbers-item_numerical {
  font-size: 80rem;
  color: var(--color-cyan);
  + .ratio {
    font-size: 80rem;
    color: var(--color-cyan);
    margin-inline: 8rem;
  }
  .decimal {
    font-size: 56rem;
  }
}
.numbers-item_unit {
  margin-left: 8rem;
  color: var(--color-cyan);
  &.ja {
    font-size: 40rem;
  }
  &.en {
    font-size: 48rem;
  }
}

/* =====================
  interview
===================== */
.interview {
  background-color: var(--background-color-paleBlue);
}
.interview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  + .interview-item {
    margin-top: 48rem;
  }
  &:nth-child(2n) {
    .interview-item_person {
      order: 2;
    }
    .interview-item_oredr {
      order: 1;
      align-items: flex-end;
    }
  }
}
.interview-item_person {
  display: flex;
  align-items: flex-end;
  column-gap: 64rem;
}
.interview-item_img {
  img {
    width: 465rem;
    aspect-ratio: 465 / 376;
  }
}
.interview-item_intro {
  width: 476rem;
  .name {
    font-size: 48rem;
    color: var(--color-primary);
  }
  .years {
    color: var(--color-white);
    background-color: var(--color-text-primary);
    padding-inline: 16rem;
    border-radius: 2rem;
    margin-top: 8rem;
    display: inline-block;
  }
  .comment {
    background-color: var(--color-white);
    padding: 32rem 24rem;
    border-radius: 16rem;
    font-size: 20rem;
    margin-top: 24rem;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      background: url(/assets/img/recruit/interview-comment.svg) no-repeat center / contain;
      width: 20.45rem;
      height: 16.73rem;
      top: 14rem;
      left: -19rem;
    }
    > p {
      width: fit-content;
      margin-inline: auto;
      max-width: 100%;
    }
  }
  .button-capsule {
    font-weight: initial;
  }
}
.interview-item_oredr {
  color: rgb(0 68 124 / 0.3);
  transform: rotate(90deg);
  display: flex;
  align-items: flex-start;
  column-gap: 8rem;
  height: 195rem;
  .vertical-text {
    font-size: 14rem;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
  .num {
    display: inline-block;
    transform: rotate(-90deg);
    font-size: 32rem;
  }
}

/* =====================
  requirements
===================== */
.benefit-img {
  width: 323rem;
  border: var(--border) var(--border-gray);
  img {
    width: 100%;
    aspect-ratio: 323 / 169;
  }
}

/* =====================
  interview-page
===================== */
.interview-page {
  .page-title {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 44.4%;
      background-color: var(--color-primary);
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
    }
  }
}
.page-title-interview {
  position: relative;
}
.page-title-interview_num {
  position: absolute;
  color: #e3e9ed;
  font-size: 80rem;
  top: -40rem;
  left: -24rem;
}
.page-title-interview_img {
  img {
    width: 100%;
    aspect-ratio: 1200 / 480;
    border-radius: var(--img-round);
  }
}
.page-title-interview_intro {
  padding-block: 32rem 80rem;
  color: var(--color-white);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 24rem;
  .comment {
    font-size: 24rem;
  }
  .years {
    background-color: var(--color-text-primary);
    border-radius: 2rem;
    padding-inline: 16rem;
    display: inline-block;
  }
  .name {
    font-size: 48rem;
    color: var(--color-white);
  }
}

.interview-response_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  .first {
    border-right: var(--border) var(--list-border-gray);
    .interview-response {
      padding-right: 80rem;
    }
  }
  .last {
    .interview-response {
      padding-left: 80rem;
    }
  }
}
.interview-response {
  + .interview-response {
    margin-top: 64rem;
  }
  .question {
    font-size: 32rem;
    line-height: 1.7;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16rem;
    &::before {
      content: 'Q';
      font-size: 40rem;
      font-weight: normal;
      font-family: var(--sans-serif);
      color: var(--color-cyan);
      line-height: 1.4;
      z-index: 1;
    }
  }
  .answer {
    margin-top: 24rem;
  }
}