@charset "utf-8";

/* -----------header---------- */
.header #nav li a[href*='/recruit/'] {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 5px;
  text-decoration-color: var(--main);
}

/* -------------------main-------------------------- */
/* --------------sub_mv_rec------------- */
.sub_mv_rec .view {
  position: relative;
}

.sub_mv_rec .illust_bg {
  width: calc(50% + 143px);
  height: 879px;
  margin: 0 0 0 auto;
  background: url(../img/recruit/people01_bg.jpg) no-repeat right center/cover;
  border-radius: 0 0 0 56px;
  position: relative;
}

.sub_mv_rec .illust {
  width: 793px;
  margin: 0 auto 0 0;
}

.sub_mv_rec .breadcrumbs {
  margin: 0;
  box-shadow: 0 0 14px rgba(25, 24, 31, 0.1);
  position: absolute;
  bottom: 32px;
  right: clamp(80px, calc(50vw - 570px), calc(50vw - 570px));
  z-index: 10;
}

.sub_mv_rec .lead {
  display: flex;
  padding-top: 268px;
  column-gap: 1em;
  flex-direction: row-reverse;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  position: absolute;
  top: 0;
  left: clamp(185.5px, calc(50vw - 464.5px), calc(50vw - 464.5px));
}

.sub_mv_rec .lead span {
  display: block;
  width: fit-content;
  writing-mode: vertical-rl;
}

.sub_mv_rec .deco {
  font-size: 132px;
  line-height: 0.7;
  text-transform: uppercase;
  color: rgba(23, 33, 39, 0.07);
  writing-mode: vertical-rl;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sub_mv_rec .info {
  display: flex;
  width: 980px;
  margin: 80px auto 0;
  padding: 32px 80px;
  column-gap: 32px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--text-main);
  border-radius: 50px;
}

.sub_mv_rec .info > .en {
  width: fit-content;
  font-size: 24px;
  line-height: 1.2em;
  color: var(--main);
}

.sub_mv_rec .flex {
  display: flex;
  column-gap: 24px;
  align-items: center;
}

.sub_mv_rec .inner_flex {
  display: flex;
  column-gap: 8px;
  align-items: center;
}

.sub_mv_rec .position {
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.07em;
}

.sub_mv_rec .position::before {
  content: '/';
  margin-right: 8px;
}

.sub_mv_rec .name {
  font-size: 32px;
  line-height: 1.2;
}

/* --------------interview------------- */
.interview {
  padding: 120px 0 136px;
}

.interview .flex {
  display: flex;
  padding: 86px 0 80px;
  justify-content: space-between;
  border-top: 1px solid var(--text-main);
  position: relative;
}

.interview dt {
  width: 360px;
}

.interview dt .en {
  display: block;
  font-size: 18px;
  line-height: 1.2;
  color: var(--main);
  position: absolute;
  left: 0;
  top: 32px;
}

.interview dt .ja {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.interview dd {
  width: 684px;
  padding-top: 16px;
}

/* -------------people------------------- */
.people {
  padding: 120px 0 136px;
  background-color: var(--main);
}

.people h2 {
  color: white;
  text-align: center;
}

.people ul {
  display: flex;
  column-gap: 24px;
}

.people li {
  width: 364px;
  position: relative;
}

.people .illust {
  width: 100%;
}

.people .texts {
  color: white;
  position: absolute;
  left: 32px;
  bottom: 24px;
}

.people .lead {
  margin-bottom: 24px;
  font-size: 24px;
  line-height: 1.7em;
}

.people .info {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.people .department {
  display: block;
  width: fit-content;
}

.people .position {
  display: block;
  width: fit-content;
}

.people .position::before {
  content: '/';
  margin-right: 8px;
}

.people .name {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.people .name .en {
  font-size: 48px;
  line-height: 1.2em;
}

/* -----------------people_footer------------ */
.people_footer {
  display: flex;
  padding: 120px 0 calc(136px + 98px);
  column-gap: 24px;
  justify-content: center;
}

.people_footer .requirements_link {
  display: block;
  width: 478px;
  padding: 23px 64px 23px 88px;
  font-size: 19px;
  font-weight: 700;
  border: 2px solid var(--main);
  border-radius: 8px;
  color: var(--main);
  text-align: center;
  position: relative;
}

.requirements_link::before {
  content: '';
  display: block;
  width: 56px;
  aspect-ratio: 1/1;
  background: url(../img/recruit/requirements_link_icon.svg) no-repeat center/contain;
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}

.requirements_link::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--main) url(../img/arrow_icon_white.svg) no-repeat center/20px 20px;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

.people_footer .entry_link {
  display: block;
  width: 478px;
  padding: 23px 64px 23px 88px;
  font-size: 19px;
  font-weight: 700;
  border: 2px solid var(--main);
  border-radius: 8px;
  color: white;
  background-color: var(--main);
  text-align: center;
  position: relative;
}

.entry_link::before {
  content: '';
  display: block;
  width: 56px;
  aspect-ratio: 1/1;
  background: url(../img/recruit/entry_link_icon.svg) no-repeat center/contain;
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}

.entry_link::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: white url(../img/arrow_icon_blue.svg) no-repeat center/20px 20px;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

@media screen and (max-width: 750px) {
  /* -------------------main-------------------------- */
  /* --------------sub_mv_rec------------- */
  .sub_mv_rec .view {
    position: relative;
  }

  .sub_mv_rec .illust_bg {
    width: calc((100 / 750) * 448 * 1vw);
    height: calc((100 / 750) * 1016 * 1vw);
    margin: 0 0 0 auto;
    background: none;
    position: static;
  }

  .sub_mv_rec .illust {
    width: calc((100 / 750) * 448 * 1vw);
    margin: 0 0 0 auto;
  }

  .sub_mv_rec .breadcrumbs {
    margin: 0;
    box-shadow: 0 0 calc((100 / 750) * 14 * 1vw) rgba(25, 24, 31, 0.1);
    position: absolute;
    bottom: calc((100 / 750) * 32 * 1vw);
    right: calc((100 / 750) * 40 * 1vw);
  }

  .sub_mv_rec .lead {
    padding-top: calc((100 / 750) * 268 * 1vw);
    column-gap: calc((100 / 750) * 24 * 1vw);
    font-size: calc((100 / 750) * 40 * 1vw);
    left: calc((100 / 750) * 67 * 1vw);
  }

  .sub_mv_rec .deco {
    font-size: calc((100 / 750) * 132 * 1vw);
  }

  .sub_mv_rec .info {
    width: 100%;
    max-width: calc((100 / 750) * 670 * 1vw);
    margin: calc((100 / 750) * 80 * 1vw) auto 0;
    padding: calc((100 / 750) * 32 * 1vw) calc((100 / 750) * 80 * 1vw);
    column-gap: calc((100 / 750) * 32 * 1vw);
    align-items: center;
    border: calc((100 / 750) * 2 * 1vw) solid var(--text-main);
    border-radius: calc((100 / 750) * 300 * 1vw);
  }

  .sub_mv_rec .info > .en {
    font-size: calc((100 / 750) * 46 * 1vw);
  }

  .sub_mv_rec .flex {
    flex-wrap: wrap;
    gap: calc((100 / 750) * 8 * 1vw);
  }

  .sub_mv_rec .inner_flex {
    column-gap: calc((100 / 750) * 12 * 1vw);
  }

  .sub_mv_rec .position::before {
    margin-right: calc((100 / 750) * 12 * 1vw);
  }

  .sub_mv_rec .name {
    font-size: calc((100 / 750) * 48 * 1vw);
  }

  /* --------------interview------------- */
  .interview {
    padding: calc((100 / 750) * 128 * 1vw) 0 calc((100 / 750) * 144 * 1vw);
  }

  .interview .flex {
    display: block;
    padding: calc((100 / 750) * 106 * 1vw) 0 calc((100 / 750) * 64 * 1vw);
    border-top: calc((100 / 750) * 2 * 1vw) solid var(--text-main);
  }

  .interview dt {
    width: 100%;
  }

  .interview dt .en {
    font-size: calc((100 / 750) * 28 * 1vw);
    top: calc((100 / 750) * 46 * 1vw);
  }

  .interview dt .ja {
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 48 * 1vw);
  }

  .interview dd {
    width: 100%;
    padding-top: calc((100 / 750) * 16 * 1vw);
  }

  /* -------------people------------------- */
  .people {
    padding: calc((100 / 750) * 128 * 1vw) 0 calc((100 / 750) * 144 * 1vw);
  }

  .people ul {
    display: block;
  }

  .people li {
    width: 100%;
    margin-bottom: calc((100 / 750) * 24 * 1vw);
  }

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

  .people .texts {
    left: calc((100 / 750) * 32 * 1vw);
    bottom: calc((100 / 750) * 24 * 1vw);
  }

  .people .lead {
    margin-bottom: calc((100 / 750) * 24 * 1vw);
    font-size: calc((100 / 750) * 36 * 1vw);
  }

  .people .info {
    margin-bottom: calc((100 / 750) * 8 * 1vw);
    font-size: calc((100 / 750) * 24 * 1vw);
    letter-spacing: 2.2;
    column-gap: calc((100 / 750) * 16 * 1vw);
  }

  .people .position::before {
    margin-right: calc((100 / 750) * 16 * 1vw);
  }

  .people .name {
    column-gap: calc((100 / 750) * 8 * 1vw);
  }

  .people .name .en {
    font-size: calc((100 / 750) * 72 * 1vw);
    line-height: 1.2em;
  }

  /* -----------------people_footer------------ */
  .people_footer {
    display: block;
    padding: calc((100 / 750) * 128 * 1vw) 0 calc((100 / 750) * (144 + 98) * 1vw);
  }

  .people_footer .requirements_link {
    width: calc((100 / 750) * 590 * 1vw);
    margin-bottom: calc((100 / 750) * 24 * 1vw);
    padding: calc((100 / 750) * 48 * 1vw) calc((100 / 750) * 96 * 1vw) calc((100 / 750) * 48 * 1vw)
      calc((100 / 750) * 128 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
    border: calc((100 / 750) * 4 * 1vw) solid var(--main);
    border-radius: calc((100 / 750) * 8 * 1vw);
  }

  .requirements_link::before {
    width: calc((100 / 750) * 80 * 1vw);
    background: url(../img/recruit/requirements_link_icon.svg) no-repeat center/contain;
    left: calc((100 / 750) * 32 * 1vw);
  }

  .requirements_link::after {
    width: calc((100 / 750) * 48 * 1vw);
    background: var(--main) url(../img/arrow_icon_white.svg) no-repeat
      center/calc((100 / 750) * 24 * 1vw) calc((100 / 750) * 24 * 1vw);
    right: calc((100 / 750) * 32 * 1vw);
  }

  .people_footer .entry_link {
    width: calc((100 / 750) * 590 * 1vw);
    padding: calc((100 / 750) * 48 * 1vw) calc((100 / 750) * 96 * 1vw) calc((100 / 750) * 48 * 1vw)
      calc((100 / 750) * 128 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
    border: calc((100 / 750) * 4 * 1vw) solid var(--main);
    border-radius: calc((100 / 750) * 8 * 1vw);
  }

  .entry_link::before {
    width: calc((100 / 750) * 80 * 1vw);
    left: calc((100 / 750) * 32 * 1vw);
  }

  .entry_link::after {
    width: calc((100 / 750) * 48 * 1vw);
    background: white url(../img/arrow_icon_blue.svg) no-repeat center/calc((100 / 750) * 24 * 1vw)
      calc((100 / 750) * 24 * 1vw);
    right: calc((100 / 750) * 32 * 1vw);
  }
}