@charset "utf-8";

/*===================
intro
===================*/

.intro__inner {
  padding: 164px 0 clamp(280px, 28.906vw, 370px);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.intro__contWrap {
  width: fit-content;
  padding: 0 22px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.intro__ttl {
  margin-bottom: 49px;
  font-size: clamp(35px, 5.3125vw, 68px);
  font-weight: 700;
  line-height: 1.382;
  color: #fff;
}
.intro__txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 2.33;
  color: #fff;
}
.intro__txt + .intro__txt {
  margin-top: 30px;
}
.intro__pic01 {
  max-width: 285px;
  width: 23.2%;
  position: absolute;
  top: 111px;
  right: 0;
}
.intro__pic02 {
  max-width: 188px;
  width: 15.6%;
  position: absolute;
  top: 43.5%;
  left: 3%;
  z-index: 2;
}
.intro__pic03 {
  max-width: 195px;
  width: 16.2%;
  position: absolute;
  top: 57.5%;
  left: 10.5%;
  z-index: 0;
}
.intro__pic04 {
  max-width: 345px;
  width: 26.9%;
  position: absolute;
  bottom: 0;
  right: 264px;
}
.intro__img--sp {
  display: none;
}
@media screen and (max-width: 960px) {
  .intro__pic02 {
    left: 0;
  }
  .intro__pic03 {
    top: 55.5%;
    left: 4.5%;
  }
}
@media screen and (max-width: 800px) {
  .intro__contWrap {
    padding-bottom: 88px;
  }
  .intro__pic04 {
    display: none;
  }
  .intro__inner {
    padding: 164px 0 0px;
  }
  .intro__picBox {
    width: 375px;
    height: 406px;
    margin: 0 auto;
    position: relative;
    /* position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0); */
  }
  .intro__pic01 {
    max-width: 207px;
    width: 56%;
    top: 0;
    right: auto;
    left: -14px;
  }
  .intro__pic02 {
    max-width: 148px;
    width: 40%;
    top: auto;
    bottom: 12px;
    left: 45px;
  }
  .intro__pic03 {
    max-width: 184px;
    width: 49%;
    top: 91px;
    left: auto;
    right: -21px;
  }
  .intro__img--pc {
    display: none;
  }
  .intro__img--sp {
    display: block;
  }
}
@media screen and (max-width: 750px) {
  .intro__inner {
    padding: 72px 0 0px;
  }
  .intro__ttl {
    margin-bottom: 32px;
  }
  .intro__txt {
    padding-left: 37px;
    font-size: 14px;
    line-height: 2.43;
  }
}
@media screen and (max-width: 480px) {
  .intro {
    overflow-x: hidden;
  }
  .intro__picBox {
    max-width: 375px;
    width: 100%;
  }
}

/*===================
type
===================*/
.type {
  padding-top: 152px;
}
.type__wrap + .type__wrap {
  padding-top: 156px;
}
.type__ttlBox {
  max-width: 900px;
  margin: 0 auto 68px;
}
.type__container {
  max-width: 900px;
  margin: 0 auto 33px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.type__leftBox {
  width: fit-content;
}
.type__rightBox {
  flex: 1;
  padding-left: 137px;
}
.type__num {
  display: block;
  margin-bottom: 19px;
  font-family: "AvenirLTPro-Medium";
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.08em;
  color: #fff;
}
.type__head {
  width: fit-content;
  padding: 2px 9px;
  font-size: 34px;
  font-weight: 700;
  color: #0f1c3e;
  line-height: 1.41;
  background: #fff;
}
.type__sub {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #fff;
}
.type__txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 2.33;
  color: #fff;
}
.type__loopPic {
  display: none;
  width: calc(100% / 3.2);
}

/* .type__loopPic .img {
  max-height: 348px;
} */
@media screen and (max-width: 750px) {
  .type {
    padding-top: 115px;
  }
  .type__ttlBox {
    margin: 0 auto 42px;
  }
  .type__wrap + .type__wrap {
    padding-top: 92px;
  }
  .type__container {
    margin: 0 auto 39px;
    flex-direction: column;
  }
  .type__leftBox {
    width: 100%;
    margin-bottom: 35px;
  }
  .type__rightBox {
    width: 100%;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .type__num {
    margin-bottom: 7px;
    font-size: 15px;
  }
  .type__head {
    font-size: 24px;
  }
  .type__sub {
    width: fit-content;
    padding-top: 9px;
    padding-right: 34px;
    font-size: 13px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  .type__txt {
    flex: 1;
    font-size: 14px;
    line-height: 2.142;
  }
  .type__loopPic {
    width: calc(100% / 1.35);
  }
}

/*===================
for-people
===================*/
.for-people {
  padding-top: 197px;
}
.for-people__ttl {
  margin-bottom: 115px;
  font-size: 33px;
  font-weight: 700;
  line-height: 1.515;
  color: #fff;
  text-align: center;
}
.for-people__ttlSpan {
  display: inline-block;
  padding: 0 10px;
  border: 2px solid #fff;
  margin-right: 15px;
}
.for-people__list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 9.1%;
}
.for-people__item {
  padding: 34px 27px 3px 72px;
  border-top: 1px solid #fff;
  position: relative;
}
.for-people__item:nth-child(2n) {
  margin-top: 106px;
}
.for-people__item--point {
  padding: 16px 10px 16px 8px;
  background: #fff;
  border-radius: 0 0 10px 0;
  font-family: "AvenirLTPro-Heavy";
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: #0f1c3e;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  top: 0;
  left: 0;
}
.for-people__item--ttl {
  margin-bottom: 19px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.for-people__item--txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color: #fff;
}
@media screen and (max-width: 750px) {
  .for-people {
    padding-top: 94px;
  }
  .for-people__ttl {
    margin-bottom: 61px;
    font-size: 23px;
  }
  .for-people__ttlSpan {
    padding: 0 10px;
    border: 1px solid #fff;
    margin-right: 12px;
  }
  .for-people__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 0 9.1%;
  }
  .for-people__item {
    padding: 25px 15px 56px 42px;
  }
  .for-people__item--point {
    top: -1px;
    left: -22px;
  }
  .for-people__item:nth-child(2n) {
    margin-top: 0px;
  }
  .for-people__item--ttl {
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 1.55;
  }
  .for-people__item--txt {
    font-size: 14px;
    line-height: 1.79;
  }
}

/*===================
for-people
===================*/
.benefits {
  padding-top: 85px;
  padding-bottom: 248px;
  overflow-x: hidden;
}
.benefits__wrap {
  max-width: 900px;
  padding-top: 31px;
  padding-bottom: 18px;
  margin: 0 auto;

  position: relative;
}
.benefits__wrap::before {
  display: block;
  content: "";
  width: 107%;
  height: 100%;
  background: #efefef;
  border-radius: 0 0 0 40px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
.benefits__ttl {
  margin-bottom: 29px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.515;
  color: #000;
  position: relative;
  z-index: 1;
}
.benefits__ttlSpan {
  display: inline-block;
  padding: 0 10px;
  border: 2px solid #fff;
  margin-right: 15px;
}
.benefits__list {
  max-width: 695px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 9.1%;
}
.benefits__item {
  padding: 16px 4px 45px 23px;
  border-top: 1px solid #c4c4c4;
  position: relative;
}

.benefits__item--ttl {
  margin-bottom: 9px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.55;
  color: #000;
  position: relative;
}
.benefits__item--ttl::before {
  display: block;
  content: "";
  width: 13px;
  height: 10px;
  background: url(../imgs/recruit/benefits_icon.svg) center center / cover
    no-repeat;
  position: absolute;
  top: 13px;
  left: -21px;
}
.benefits__item--txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color: #000;
}
@media screen and (max-width: 750px) {
  .benefits {
    padding-top: 40px;
  }
  .benefits__wrap {
    padding-top: 25px;
    padding-left: 22px;
  }
  .benefits__wrap::before {
    width: 113%;
    left: 0;
    transform: none;
  }
  .benefits__ttl {
    margin-bottom: 28px;
    font-size: 26px;
    position: relative;
  }
  .benefits__ttl::before {
    display: block;
    content: "";
    width: calc(100% + 22px);
    height: 1px;
    background: #0f1c3e;
    position: absolute;
    bottom: -5px;
    left: 0;
    margin-left: 0;
  }
  .benefits__list {
    grid-template-columns: repeat(1, 1fr);
  }

  .benefits__item {
    padding: 22px 4px 27px 20px;
    margin-left: 22px;
    border: none;
  }
  .benefits__item::before {
    display: block;
    content: "";
    width: calc(100% + 22px);
    height: 1px;
    background: #c4c4c4;
    position: absolute;
    bottom: 0px;
    left: 0;
    margin-left: 0;
  }
  .benefits__item:last-of-type::before {
    display: none;
  }
  .benefits__item--ttl {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.7;
  }
  .benefits__item--txt {
    font-size: 14px;
    line-height: 1.64;
  }
}

/*===================
voice
===================*/
.voice {
  padding: 175px 0 174px;
}
.voice__inner {
  max-width: 900px;
  margin: 0 auto;
}

.voice__container {
  margin-bottom: 111px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.voice__left {
  width: 50%;
  min-width: 420px;
  padding-top: 127px;
}
.voice__right {
  width: 50%;
  /* margin-bottom: 36px; */
  position: relative;
  z-index: 3;
}
.voice__enTtl {
  font-family: "AvenirLTPro-Medium";
  font-size: 65px;
  letter-spacing: 0;
  line-height: 1;
  color: #0f1c3e;
}
.voice__contBox {
  position: relative;
  padding: 60px 20px 37px 56px;
  position: relative;
  z-index: 1;
}
.voice__contBox::before {
  display: block;
  content: "";
  width: 122%;
  height: 100%;
  background: #0f1c3e;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.voice__head {
  padding-bottom: 52px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.59;
  color: #fff;
}
.voice__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.voice__sub {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.77;
  color: #fff;
}
.voice__img {
  width: 119%;
  transform: translate(0px, -10px);
}
.voice__group {
  max-width: 760px;
  margin: 0 auto;
}
.voice__unit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.voice__unit + .voice__unit {
  margin-top: 57px;
}
.voice__unit--head {
  width: 224px;
}
.voice__unit--headSpan {
  display: block;
  width: fit-content;
  padding: 10px 16px 10px 14px;
  border-radius: 0 0 10px 0;
  background: #0f1c3e;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.voice__unit--txt {
  flex: 1;
  max-width: 462px;
  font-size: 15px;
  font-weight: 500;
  line-height: 2.2;
  color: #000;
}
@media screen and (max-width: 1195px) {
  .voice__contBox {
    padding: 38px 20px 37px 32px;
  }
  .voice__pic {
    width: calc(100% + 22px);
    max-width: none;
    position: relative;
    left: 0;
    margin-left: 0;
  }
  .voice__img {
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .voice {
    padding: 57px 0 198px;
  }
  .voice__ttl {
    margin-bottom: 41px;
  }
  .voice__container {
    padding-top: 42px;
    margin-bottom: 38px;
    flex-direction: column-reverse;
    position: relative;
  }
  .voice__left {
    width: 100%;
    min-width: auto;
    padding-top: 0;
  }
  .voice__right {
    width: 100%;
  }
  .voice__contBox {
    padding: 165px 15px 37px 0px;
    margin-top: -126px;
  }
  .voice__contBox::before {
    width: calc(100% + 22px);
    height: 100%;
    left: -22px;
    top: auto;
    bottom: 0;
  }
  .voice__pic {
    /* width: 100%; */
  }
  .voice__img {
    transform: none;
  }
  .voice__enTtl {
    font-size: 56px;
    position: absolute;
    top: 0;
    right: -22px;
    z-index: 4;
  }
  .voice__head {
    padding-bottom: 25px;
    font-size: 20px;
    line-height: 1.5;
  }
  .voice__unit {
    flex-direction: column;
  }
  .voice__unit + .voice__unit {
    margin-top: 42px;
  }
  .voice__unit--head {
    width: 100%;
  }
  .voice__unit--headSpan {
    padding: 10px 16px 10px 22px;
    position: relative;
    top: 0;
    left: -22px;
  }
  .voice__unit--txt {
    max-width: none;
    padding-left: 34px;
    font-size: 14px;
    line-height: 2.36;
  }
}

/*===================
join
===================*/
.join__ttlText {
  color: #0f1c3e;
}