:root {
    --font-32: 3.2rem;
    --font-24: 2.4rem;
    @media screen and (max-width: 767px) {
        --font-32: 2.4rem;
        --font-24: 2rem;
    }
}
/* リード */
.recruit_lead {
  max-width: 1200px;
  width: 90%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  margin: var(--sp-64) auto;
}
.recruit_lead--right {
  max-width: calc(100% - 479px);
  width: 100%;
  @media screen and (max-width: 767px) {
    max-width: 100%;
  }
}
.recruit_lead--img {
  position: relative;
  padding: 0 0 20px 20px;
  &::before {
    content: "";
    display: block;
    width: calc(100% - 30px);
    height: 80%;
    background: var(--main-color);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }
  @media screen and (max-width: 767px) {
    padding: 0 0 20px 20px;
    &::before {
      width: calc(100% - 20px);
    }
  }
}
.recruit_lead--fill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
  margin-bottom: 2em;
}
.recruit_lead--fill span {
  padding: 0 0.2em;
  background: var(--sub-color);
  font-size: 3.2rem;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  @media screen and (max-width: 1280px) {
    font-size: 2.8rem;
  }
  @media screen and (max-width: 767px) {
    font-size: 2.4rem;
    white-space: normal;
  }
}
.recruit_lead--logo {
  position: relative;
}
.recruit_lead--logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/recruit_logo.png) no-repeat center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}
.recruit_lead--logo::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* セクション */
.recruit_section {
  width: 100%;
  padding: var(--sp-64) 5%;
  &:nth-of-type(odd) {
    background: #F5F5F5;
  }
}

/* 見出し */
.recruit_heading {
  padding-bottom: 0.5em;
  font-size: var(--font-32);
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
  position: relative;
  &::after {
    content: "";
    width: 40px;
    height: 3px;
    display: block;
    background: linear-gradient(to right, var(--main-color) 0%, var(--main-color) 50%, var(--sub-color) 50%, var(--sub-color) 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: auto;
  }
}

/* テーブル */
.recruit_table {
  width: 950px;
  border: 1px solid var(--main-color);
  margin-inline: auto;
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}
.recruit_table tr {
  border-bottom: 1px solid var(--main-color);
}
.recruit_table--th {
  padding: 1em 2.5em;
  text-align: center;
  vertical-align: middle;
  background: rgba(149, 173, 224, 0.4);
  border-right: 1px solid var(--main-color);
  @media screen and (max-width: 767px) {
    display: block;
    width: 100%;
    border-right: none;
  }
}
.recruit_table--td {
  padding: 1em 2.5em;
  @media screen and (max-width: 767px) {
    display: block;
    width: 100%;
    padding: 1em 1.5em;
  }
}

/* テキスト */
.recruit_txt {
  padding-bottom: 1.5em;
}
.recruit_center {
  text-align: center;
}

/* 仕事内容 */
.recruit_job {
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
  gap: 30px;
  margin: 0 auto 30px;
}
.recruit_job--txt {
  max-width: calc(100% - 535px);
  width: 100%;
  @media screen and (max-width: 767px) {
    max-width: 100%;
  }
}
.recruit_job--img {
 @media screen and (max-width: 767px) {
    margin: auto;
  }
}
@media print, screen and (min-width: 768px) {
  .recruit_job:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}
.recruit_job--title {
  padding-bottom: 1em;
  font-size: var(--font-24);
  font-weight: bold;
  &::first-letter {
    color: var(--sub-color);
  }
}

/* swiper */
.swiper_outer {
  max-width: 1024px;
  width: 100%;
  margin-inline: auto;
  position: relative;
  @media screen and (max-width: 767px) {
    padding: 0;
  }
}
.swiper img {
  width: 100%;
}
.swiper figcaption {
  padding-top: 1em;
}
.swiper-slide{
  @media screen and (min-width: 767px) {/*767以上*/
    width: calc((100% / 2.8) - 30px)!important;
    margin: 0 15px;
  }
}
.recruit-button-prev, .recruit-button-next {
  width: 45px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 60%;
  transform: translateY(calc(-50% - 2em));
  background: var(--sub-color);
  z-index: 2;
  &:hover {
    opacity: 0.8;
  }
  &::before {
    content: "";
    display: block;
    width: 12px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
  }
  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    position: absolute;
    top: 50%;
    background: #fff;
    right: 0;
    left: 0;
    margin-inline: auto;
  }
  @media screen and (max-width: 767px) {
    width: 35px;
    &::after {
      width: 15px;
    }
    &::before {
      width: 10px;
    }
  }
}
.recruit-button-prev {
  left: -80px;
  &::before {
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg) translateY(calc(-50% - 2px));
    left: 20px;
  }
  @media screen and (max-width: 767px) {
    left: 0px;
    transform: translate(-50%, calc(-50% - 2em));
    &::before {
      left: 15px;
    }
  }
}
.recruit-button-next {
  right: -80px;
  &::before {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(calc(-50% - 2px));
    right: 20px;
  }
  @media screen and (max-width: 767px) {
    right: 0px;
    transform: translate(50%, calc(-50% - 2em));
    &::before {
      right: 15px;
    }
  }
}
.swiper-slide figcaption {
  text-align: center;
}
/* 社員の声 */
.recruit_voice {
  background: url(../img/img04.webp) no-repeat center left;
  @media screen and (max-width: 767px) {
    background: url(../img/img04.webp) no-repeat bottom left / 95%;
  }
}
.recruit_voice--container {
  max-width: 1200px;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-inline: auto;
  @media print, screen and (min-width: 768px) {
    min-height: 497px;
  }
  @media screen and (max-width: 767px) {
    padding-bottom: 180px;
  }
}
.recruit_voice--box {
  display: block;
  max-width: 400px;
  width: 100%;
}
.recruit_btn {
  max-width: 285px;
  width: 100%;
  margin-inline: auto;
  margin-top: 1em;
}
.recruit_btn a {
  width: 100%;
  padding: 0.5em 1em;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sub-color);
  text-align: center;
  color: #fff;
  font-weight: bold;
}