@charset "utf-8";
html {
  scroll-padding-top: 128px;
}

/* -----------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------------- */
.sub_mv {
  background: url(../img/recruit/sub_mv.jpg) no-repeat center/cover;
}

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

.lead_sec .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lead_sec .photo {
  width: 483px;
}

.lead_sec .texts {
  width: calc(100% - 563px);
}

.lead_sec .lead {
  margin-bottom: 56px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 16px;
  text-decoration-thickness: 6px;
  text-decoration-color: var(--main);
}

.lead_sec .text {
  line-height: 2.4em;
  letter-spacing: 0.03em;
}

.lead_sec .btn_2 {
  margin: 56px auto 112px;
}

.swiper {
  width: 100%;
  height: 335px;
}

.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide {
  width: 440px;
  height: 335px;
  margin-right: 16px;
}

/* ----------------welfare------------ */
.welfare {
  padding: 120px 0 136px;
  background-color: var(--bg-gray02);
}

.welfare ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.welfare li {
  width: 369px;
  padding: 32px;
  background-color: white;
  color: var(--main);
  border-radius: 8px;
}

.welfare li:nth-child(7),
.welfare li:nth-child(8),
.welfare li:nth-child(9) {
  display: none;
}

.welfare .icon {
  width: 112px;
  aspect-ratio: 1/1;
  margin: 0 auto 16px;
}

.icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.welfare h3 {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: 0.06em;
  text-align: center;
}

.welfare li p {
  line-height: 2em;
}

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

.people .flex1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.people h2 {
  width: fit-content;
  margin: 0;
  padding-bottom: 56px;
  color: white;
}

.people h2 .ja {
  text-decoration-color: white;
}
.people h2 .en {
  color: white;
}

.people h2 .en::before {
  background: url(../img/h2_white.svg) no-repeat center/contain;
}

.people .flex1 > p {
  width: 764px;
  color: white;
}

.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;
}

/* ----------------requirements------------ */
.requirements {
  padding: 120px 0 calc(136px + 98px);
}
.requirements h2 .ja {
  text-decoration: underline;
  text-underline-offset: 16px;
  text-decoration-thickness: 6px;
  text-decoration-color: var(--main);
}

.requirements dl {
  padding: 0 80px;
}

.requirements .flex {
  display: flex;
  padding: 32px 0;
  column-gap: 8px;
  border-bottom: 2px dotted var(--main);
}

.requirements dt {
  width: 214px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.requirements dd {
  width: calc(100% - 222px);
}

.requirements .ul_flex {
  display: flex;
  column-gap: 1em;
}

.requirements .ul li {
  margin-bottom: 16px;
}

.requirements .disc_ul {
  list-style: inside;
}

.disc_ul li {
  text-indent: 0.6em;
}

.requirements .entry_link {
  text-decoration: underline;
  color: var(--text-link);
}

.requirements .btn_2 {
  margin: 56px auto 0;
}

@media screen and (max-width: 750px) {
  html {
    scroll-padding-top: calc((100 / 750) * 128 * 1vw);
  }
  /* -------------------main-------------------------- */
  /* --------------sub_mv------------- */
  .sub_mv {
    background: url(../img/recruit/sub_mv_sp.jpg) no-repeat center/cover;
  }

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

  .lead_sec .flex {
    display: block;
  }

  .lead_sec .photo {
    width: calc((100 / 750) * 483 * 1vw);
    margin: 0 auto calc((100 / 750) * 80 * 1vw);
  }

  .lead_sec .texts {
    width: 100%;
  }

  .lead_sec .lead {
    margin-bottom: calc((100 / 750) * 56 * 1vw);
    font-size: calc((100 / 750) * 48 * 1vw);
    text-underline-offset: calc((100 / 750) * 16 * 1vw);
    text-decoration-thickness: calc((100 / 750) * 8 * 1vw);
  }

  .lead_sec .text {
    line-height: 2.4em;
    letter-spacing: 0.03em;
  }

  .lead_sec .btn_2 {
    margin: calc((100 / 750) * 72 * 1vw) auto calc((100 / 750) * 112 * 1vw);
  }

  .swiper {
    height: calc((100 / 750) * 335 * 1vw);
  }

  .swiper-slide {
    width: calc((100 / 750) * 440 * 1vw);
    height: calc((100 / 750) * 335 * 1vw);
    margin-right: calc((100 / 750) * 16 * 1vw);
  }

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

  .welfare ul {
    display: block;
  }

  .welfare li {
    width: calc((100 / 750) * 560 * 1vw);
    margin: 0 auto calc((100 / 750) * 24 * 1vw);
    padding: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 56 * 1vw);
    border-radius: calc((100 / 750) * 8 * 1vw);
  }

  .welfare .icon {
    width: calc((100 / 750) * 136 * 1vw);
    margin: 0 auto calc((100 / 750) * 16 * 1vw);
  }

  .welfare h3 {
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 40 * 1vw);
  }

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

  .people .flex1 {
    display: block;
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

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

  .people .flex1 > p {
    width: 100%;
    letter-spacing: 0.03em;
  }

  .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;
  }

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

  .requirements dl {
    padding: 0;
  }

  .requirements .flex {
    display: block;
    padding: calc((100 / 750) * 40 * 1vw) 0;
    border-bottom: calc((100 / 750) * 2 * 1vw) solid var(--border-gray);
  }

  .requirements dt {
    width: 100%;
    margin-bottom: calc((100 / 750) * 8 * 1vw);
  }

  .requirements dd {
    width: 100%;
  }

  .requirements .ul li {
    margin-bottom: calc((100 / 750) * 16 * 1vw);
  }

  .requirements .btn_2 {
    margin: calc((100 / 750) * 72 * 1vw) auto 0;
  }
}