@charset "utf-8";

.recruit {
}

.mission__slider-imgs {
  left: 50%;
  margin-block-start: clamp(3.125rem, 1.8286780973rem + 5.5309734513vw, 6.25rem);
  margin-inline: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.mission__swiper-container,
.mission__swiper,
.mission__swiper-wrapper,
.mission__swiper-slide {
  position: relative;
}

.mission__swiper-container {
  max-height: 22.625rem;
}

.mission__swiper-wrapper {
  transition-timing-function: linear;
  display: flex;
}

.mission__swiper-slide {
  aspect-ratio: 400/360;
  height: auto;
  width: clamp(18.75rem, 16.1573561947rem + 11.0619469027vw, 25rem);
}

.mission__swiper-slide img {
  border-radius: 5px;
}

.mission .swiper-button-prev,
.mission .swiper-button-next,
.mission .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: unset;
  left: unset;
  margin: 0;
  padding: 0;
  right: unset;
  top: unset;
}

.mission .swiper-button-prev::after,
.mission .swiper-button-next::after {
  content: "";
}

.mission .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
  opacity: 1;
}

.flow__head-title {
  color: #272a2c;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.2194413717rem + 0.6637168142vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.flow__body {
  margin-block-start: clamp(1.875rem, 0.8379424779rem + 4.4247787611vw, 4.375rem);
}

.flow__steps {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media screen and (width >= 600px) {
  .flow__steps {
    align-items: flex-start;
    flex-flow: row wrap;
    gap: clamp(1.25rem, 0.5759126106rem + 2.8761061947vw, 2.875rem);
    justify-content: center;
  }
}

.flow__item {
  position: relative;
}

.flow__circle {
  align-items: center;
  aspect-ratio: 200/200;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 200px;
  z-index: 1;
}

.flow__item-label {
  align-items: flex-end;
  background: #393b3e;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  height: 20%;
  justify-content: center;
  left: 0;
  line-height: 35px;
  position: absolute;
  text-align: left;
  top: 0;
  width: 100%;
  z-index: 2;
}

.flow__item-title {
  color: #272a2c;
  font-family: "Noto Serif JP";
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 67px;
  text-align: center;
}

.flow__item-desc {
  color: #272a2c;
  font-family: "Noto Serif JP";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 23.4px;
  text-align: center;
}

.flow__arrow {
  aspect-ratio: 15/15;
  height: auto;
  left: 50%;
  position: absolute;
  top: calc(100% + 10px);
  transform: rotate(90deg);
  translate: -50% 0%;
  width: 15px;
}

@media screen and (width >= 600px) {
  .flow__arrow {
    left: calc(100% + 5px);
    top: 50%;
    transform: none;
    translate: 0 -50%;
  }
}

.flow__arrow img {
  display: block;
  height: auto;
  width: 100%;
}

.flow__text {
  color: #272a2c;
  font-family: "Noto Serif JP";
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 32px;
  margin-block-start: 2.75rem;
  text-align: left;
}

.recruitment__head-title {
  color: #272a2c;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.2194413717rem + 0.6637168142vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.recruitment__body {
  margin-block-start: clamp(1.875rem, 0.8379424779rem + 4.4247787611vw, 4.375rem);
}