@charset "utf-8";

/* ---------------------sub_mv-------------------- */
.sub_mv {
  background: url(/recruit/assets/img/people/sub_mv.jpg) no-repeat center/cover;
}

/* ---------------------who-------------------- */
.who {
  max-width: 1240px;
  margin: 104px auto 120px;
  padding: 60px;
  border-radius: 20px;
  background-color: var(--pink);
}

.who h2 {
  max-width: 1120px;
  margin: 0 auto 40px;
}

.who h2 .en {
  color: white;
}

.who h2 .en::before {
  background: url(/recruit/assets/img/white_rec.svg) no-repeat center center/cover;
}

.who h2 .ja {
  color: var(--dark_pink);
}

.who h2 .ja::before {
  background-color: white;
}

.who .texts {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 0;
  border-radius: 20px;
  background-color: #fff3f4;
}

.who .flex {
  display: flex;
  margin-bottom: 40px;
  justify-content: center;
  column-gap: 60px;
  align-items: center;
}

.who .photo {
  width: 400px;
  aspect-ratio: 400/267;
}

.who .text {
  width: 440px;
  line-height: 1.8;
}

.who .flex.re {
  margin-bottom: 0;
  flex-direction: row-reverse;
}

/* ---------------------interview-------------------- */
.interview {
  padding-bottom: 104px;
}

.interview h2 {
  padding-bottom: 72px;
}

.interview h2 .en {
  color: var(--main);
}

.interview h2 .en::before {
  background: url(/recruit/assets/img/main_rec.svg) no-repeat center center/cover;
}

.interview h2 .ja {
  color: var(--dark_green);
}

.interview h2 .ja::before {
  background-color: var(--main);
}

.interview li a:hover {
  opacity: 1;
}

.interview .r {
  width: 545px;
  aspect-ratio: 545/572;
  margin: -160px 0 0 auto;
}

.interview .l {
  width: 545px;
  aspect-ratio: 545/572;
  margin-top: -198px;
}

.interview .text {
  display: flex;
  width: fit-content;
  height: 182px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--dark_green);
  align-items: center;
  position: relative;
  z-index: -10;
}

.interview li:hover .text {
  color: var(--point);
  transition: all 0.3s;
}

.interview .text::before {
  content: '';
  display: block;
  width: 545px;
  aspect-ratio: 545/209;
  background-image: url(/recruit/assets/img/people/comment.svg), url(/recruit/assets/img/people/comment_hover.svg);
  background-size: cover, 0 0;
  position: absolute;
  top: calc(50% + 13.5px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}

.interview li:hover .text::before {
  background-size: 0 0, cover;
  transition: all 0.3s;
}

.interview .flex {
  display: flex;
  width: 542px;
  aspect-ratio: 542/468;
  margin: -60px 0 0 11px;
  padding: 377px 0 46px 103px;
  column-gap: 16px;
  align-items: center;
  color: white;
  position: relative;
}

.interview .flex::before {
  content: '';
  display: block;
  width: 542px;
  aspect-ratio: 542/468;
  background-size: cover, 0 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

.interview li:hover .flex::before {
  background-size: 0 0, cover;
  transition: all 0.3s;
}

.interview li:nth-child(1) .flex::before {
  background-image: url(/recruit/assets/img/people/staff_1_g.png), url(/recruit/assets/img/people/staff_1_p.png);
}

.interview li:nth-child(2) .flex::before {
  background-image: url(/recruit/assets/img/people/staff_2_g.png), url(/recruit/assets/img/people/staff_2_p.png);
}

.interview li:nth-child(3) .flex::before {
  background-image: url(/recruit/assets/img/people/staff_3_g.png), url(/recruit/assets/img/people/staff_3_p.png);
}

.interview li:nth-child(4) .flex::before {
  background-image: url(/recruit/assets/img/people/staff_4_g.png), url(/recruit/assets/img/people/staff_4_p.png);
}

.interview li:nth-child(5) .flex::before {
  background-image: url(/recruit/assets/img/people/staff_5_g.png), url(/recruit/assets/img/people/staff_5_p.png);
}

.interview li:nth-child(6) .flex::before {
  background-image: url(/recruit/assets/img/people/staff_6_g.png), url(/recruit/assets/img/people/staff_6_p.png);
}

.interview .flex .name {
  width: fit-content;
  height: 45px;
  font-size: 72px;
  font-weight: 600;
  line-height: 45px;
}

.interview .flex .position {
  width: fit-content;
  height: 45px;
}

.interview .position span {
  display: block;
  height: 12px;
  line-height: 12px;
  margin-bottom: 16px;
}

.interview .position span:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 750px) {
  /* ---------------------sub_mv-------------------- */
  .sub_mv {
    height: calc((100 / 750) * 440 * 1vw);
    background: url(/recruit/assets/img/people/sub_mv_sp.jpg) no-repeat center/cover;
  }

  /* ---------------------who-------------------- */
  .who {
    max-width: calc((100 / 750) * 670 * 1vw);
    margin: calc((100 / 750) * 128 * 1vw) auto;
    padding: calc((100 / 750) * 80 * 1vw) 0 calc((100 / 750) * 40 * 1vw);
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .who h2 {
    max-width: 100%;
    margin: 0 0 calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 40 * 1vw);
  }

  .who .texts {
    max-width: calc((100 / 750) * 590 * 1vw);
    padding: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 40 * 1vw);
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .who .flex {
    display: block;
    margin-bottom: calc((100 / 750) * 80 * 1vw);
  }

  .who .photo {
    width: 100%;
    aspect-ratio: 518/346;
    margin-bottom: calc((100 / 750) * 60 * 1vw);
  }

  .who .text {
    width: 100%;
  }

  /* ---------------------interview-------------------- */
  .interview {
    padding-bottom: calc((100 / 750) * 155 * 1vw);
  }

  .interview h2 {
    padding-bottom: calc((100 / 750) * 80 * 1vw);
  }

  .interview li {
    position: relative;
  }

  .interview li:last-child {
    margin-bottom: 0;
  }

  .interview li::before {
    content: '';
    display: block;
    width: calc((100 / 750) * 635 * 1vw);
    position: absolute;
    bottom: 0;
    left: calc((100 / 750) * -9 * 1vw);
  }

  .interview li:nth-child(1)::before {
    aspect-ratio: 635/599;
    background: url(/recruit/assets/img/people/staff_1_g_sp.png) no-repeat center center/cover;
  }

  .interview li:nth-child(2)::before {
    aspect-ratio: 635/560;
    background: url(/recruit/assets/img/people/staff_2_g_sp.png) no-repeat center center/cover;
  }

  .interview li:nth-child(3)::before {
    aspect-ratio: 635/560;
    background: url(/recruit/assets/img/people/staff_3_g_sp.png) no-repeat center center/cover;
  }

  .interview li:nth-child(4)::before {
    aspect-ratio: 635/571;
    background: url(/recruit/assets/img/people/staff_4_g_sp.png) no-repeat center center/cover;
  }

  .interview li:nth-child(5)::before {
    aspect-ratio: 635/560;
    background: url(/recruit/assets/img/people/staff_5_g_sp.png) no-repeat center center/cover;
  }

  .interview li:nth-child(6)::before {
    aspect-ratio: 635/602;
    background: url(/recruit/assets/img/people/staff_6_g_sp.png) no-repeat center center/cover;
  }

  .interview .r {
    width: 100%;
    aspect-ratio: 670/711;
    margin: 0 auto calc((100 / 750) * 192 * 1vw);
  }

  .interview .l {
    width: 100%;
    height: calc((100 / 750) * 711 * 1vw);
    margin: 0 auto calc((100 / 750) * 192 * 1vw);
  }

  .interview li a {
    display: block;
  }

  .interview .text {
    height: calc((100 / 750) * 216 * 1vw);
    font-size: calc((100 / 750) * 28 * 1vw);
  }

  .interview li:hover .text {
    color: var(--dark_green);
  }

  .interview .text::before {
    width: calc((100 / 750) * 670 * 1vw);
    aspect-ratio: 670/243;
    background: url(/recruit/assets/img/people/comment_sp.svg) no-repeat center center/cover;
    position: absolute;
    top: calc(50% + ((100 / 750) * 13.5 * 1vw));
  }

  .interview li:hover .text::before {
    background: url(/recruit/assets/img/people/comment_sp.svg) no-repeat center center/cover;
  }

  .interview .flex {
    display: block;
    width: calc((100 / 750) * 423 * 1vw);
    margin: 0 auto;
    padding: calc((100 / 750) * 337 * 1vw) 0 0 calc((100 / 750) * 32 * 1vw);
    color: white;
    position: relative;
  }

  .interview .flex::before {
    display: none;
  }

  .interview .flex .name {
    height: calc((100 / 750) * 50 * 1vw);
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 80 * 1vw);
    line-height: calc((100 / 750) * 50 * 1vw);
  }

  .interview .flex .position {
    width: 100%;
    height: calc((100 / 750) * 52 * 1vw);
  }

  .interview .position span {
    display: block;
    height: calc((100 / 750) * 18 * 1vw);
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 24 * 1vw);
    line-height: calc((100 / 750) * 18 * 1vw);
  }

  .interview .position span:last-child {
    margin-bottom: 0;
  }
}