@charset "utf-8";

/* ---------------------sub_mv-------------------- */
.sub_mv {
  background: url(/recruit/assets/img/workstyle/sub_mv.jpg) no-repeat center/cover;
}

/* ---------------------benefits-------------------- */
.benefits {
  padding: 104px 0;
  background-color: var(--buck);
}

.benefits h2 {
  margin-bottom: 40px;
}

.benefits h2 .en {
  display: block;
  color: var(--main);
}

.benefits h2 .en::before {
  background: url(/recruit/assets/img/main_rec.svg) no-repeat center center/cover;
}

.benefits h2 .ja {
  display: block;
  color: var(--dark_green);
}

.benefits h2 .ja::before {
  background-color: var(--main);
}

.benefits dl {
  margin-bottom: 80px;
  padding: 20px 40px;
  background-color: white;
  border-radius: 20px;
}

.benefits dl .li {
  display: flex;
  column-gap: 56px;
  align-items: center;
  padding: 40px 0 40px 40px;
  border-bottom: 1px solid var(--gray);
  line-height: 1.8;
}

.benefits dl .li:last-child {
  border: none;
}

.benefits dt {
  width: 190px;
}

.benefits dd {
  width: calc(100% - 246px);
}

/* --------------------swiper---------------- */

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

.swiper-slide {
  width: 300px;
  aspect-ratio: 300/200;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------------------number-------------------- */
.number {
  padding: 104px 0;
}

.number h2 {
  margin-bottom: 40px;
}

.number h2 .en {
  display: block;
  color: var(--main);
}

.number h2 .en::before {
  background: url(/recruit/assets/img/main_rec.svg) no-repeat center center/cover;
}

.number h2 .ja {
  display: block;
  color: var(--dark_green);
}

.number h2 .ja::before {
  background-color: var(--main);
}

.number .li dt {
  text-align: center;
}

.number .li dt .ja {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 15px;
}

.number .li dt .en {
  line-height: 10px;
}

.number .num {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: white;
  font-weight: 800;
  line-height: 0.6;
}

.number .num .big {
  font-size: 128px;
}

.number .num .medium {
  font-size: 96px;
}

.number .num .mini {
  font-size: 75px;
}

.number .num .unit {
  font-size: 48px;
}

.number .num .tiny {
  font-size: 24px;
}

.number .text {
  line-height: 1.8;
}

.number .flex {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

.number .flex .li {
  width: calc((100% - 40px) / 3);
  height: 486px;
  padding: 40px 30px;
  border-radius: 20px;
}

.number .flex .li:nth-child(1) {
  background-color: var(--orange);
}

.number .flex .li:nth-child(2) {
  background-color: var(--pink);
}

.number .flex .li:nth-child(3) {
  background-color: var(--blue);
}

.number .flex dt {
  margin-bottom: 26px;
}

.number .flex .li:nth-child(1) dt {
  color: var(--dark_orange);
}

.number .flex .li:nth-child(2) dt {
  color: var(--dark_pink);
}

.number .flex .li:nth-child(3) dt {
  color: var(--dark_blue);
}

.number .flex .num {
  margin-bottom: 26px;
  padding-top: 146px;
  position: relative;
}

.number .flex .li:nth-child(1) .num:before {
  content: '';
  display: block;
  width: 191px;
  aspect-ratio: 191/120;
  background: url(/recruit/assets/img/workstyle/off.png) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.number .flex .li:nth-child(2) .num:before {
  content: '';
  display: block;
  width: 215px;
  aspect-ratio: 215/120;
  background: url(/recruit/assets/img/workstyle/ratio.png) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.number .flex .li:nth-child(3) .num:before {
  content: '';
  display: block;
  width: 103px;
  aspect-ratio: 103/106;
  background: url(/recruit/assets/img/workstyle/hours.png) no-repeat center center/cover;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.number .flex2 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row-reverse;
}

.number .column .li {
  width: 551px;
  height: 359px;
  padding: 40px 0;
  border-radius: 20px;
}

.number .column .li:nth-child(1) {
  margin-bottom: 20px;
  background-color: var(--main);
}

.number .column .li:nth-child(2) {
  margin-bottom: 20px;
  background-color: var(--pink);
}

.column .li dt {
  margin-bottom: 40px;
}

.column .li:nth-child(1) dt {
  color: var(--dark_green);
}

.column .li:nth-child(2) dt {
  color: var(--dark_pink);
}

.column .li .num {
  height: 100px;
  margin-bottom: 40px;
  line-height: 100px;
  position: relative;
}

.column .li:nth-child(1) .num {
  padding-left: 126px;
}

.column .li:nth-child(1) .num::before {
  content: '';
  display: block;
  width: 106px;
  aspect-ratio: 106/100;
  background: url(/recruit/assets/img/workstyle/holiday.png) no-repeat center center/cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.column .li:nth-child(2) .num {
  padding-left: 139px;
}

.column .li:nth-child(2) .num::before {
  content: '';
  display: block;
  width: 109px;
  aspect-ratio: 109/100;
  background: url(/recruit/assets/img/workstyle/years.png) no-repeat center center/cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.column .li .text {
  padding: 0 64px;
}

.number .column.li {
  width: 549px;
  height: 739px;
  padding: 40px 38px;
  background-color: var(--blue);
  border-radius: 20px;
}

.number .column.li dt {
  color: var(--dark_blue);
  margin-bottom: 45px;
}

.bar {
  display: flex;
  width: 359px;
  margin: 0 auto;
  padding-right: 10px;
  align-items: center;
}

.bar:nth-child(5) {
  margin-bottom: 45px;
}

.bar .ages {
  width: calc(100% - 240px);
  height: 70px;
  padding: 10px 27px 10px 0;
  border-right: 1px solid var(--dark_blue);
  line-height: 50px;
  font-weight: 700;
  color: var(--dark_blue);
  letter-spacing: 0.1em;
}

.bar .age {
  font-size: 40px;
}

.bar .age_unit {
  font-size: 20px;
}

.bar-fill {
  height: 50px;
  padding-right: 6px;
  color: white;
}

.bar:nth-child(1) .bar-fill {
  width: 240px;
}

.bar:nth-child(2) .bar-fill {
  width: 120px;
}

.bar:nth-child(3) .bar-fill {
  width: 79px;
  padding-right: 3px;
}

.bar:nth-child(4) .bar-fill,
.bar:nth-child(5) .bar-fill {
  width: 38px;
  padding-right: 0;
}

.bar.is-inview .bar-fill {
  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
  background-color: var(--dark_blue);
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%,
  100% {
    opacity: 1;
  }
}

.bar.is-inview .bar-fill .percents {
  line-height: 50px;
  text-align: end;
  font-weight: 700;
  position: relative;
  z-index: 10;
}

.percents .percent {
  font-size: 36px;
}

.percents .unit {
  font-size: 13px;
}

.bar:nth-child(4) .percents,
.bar:nth-child(5) .percents {
  margin-right: -48px;
}

.column.li .ave {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  justify-content: center;
  align-items: end;
}

.column.li .ave .ja {
  width: fit-content;
  margin-right: 16px;
  font-size: 24px;
  font-weight: 400;
  color: var(--b);
  line-height: 1.8;
}

.ave .num {
  width: fit-content;
  margin: 0;
}

/* ---------------------day-------------------- */
.day {
  padding: 104px 0;
}

.day h2 {
  margin-bottom: 40px;
}

.day h2 .en {
  display: block;
  color: var(--main);
}

.day h2 .en::before {
  background: url(/recruit/assets/img/main_rec.svg) no-repeat center center/cover;
}

.day h2 .ja {
  display: block;
  color: var(--dark_green);
}

.day h2 .ja::before {
  background-color: var(--main);
}

.day p {
  margin-bottom: 40px;
  line-height: 1.8;
}

.day dl {
  padding: 20px 40px;
  background-color: var(--buck);
  border-radius: 20px;
}

.day .li {
  display: flex;
  padding: 40px 0 40px 40px;
  align-items: center;
  column-gap: 20px;
  border-bottom: 1px solid var(--gray);
  line-height: 1.8;
}

.day .li:last-child {
  border-bottom: none;
}

.day dt {
  width: 250px;
  padding-left: 80px;
  font-size: 20;
  font-weight: 600;
  position: relative;
}

.day dt::before {
  content: '';
  display: block;
  width: 40px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.day .li:nth-child(1) dt::before {
  background: url(/recruit/assets/img/workstyle/time_9.png) no-repeat center center/cover;
}

.day .li:nth-child(2) dt::before {
  background: url(/recruit/assets/img/workstyle/time_10.png) no-repeat center center/cover;
}

.day .li:nth-child(3) dt::before {
  background: url(/recruit/assets/img/workstyle/time_12.png) no-repeat center center/cover;
}

.day .li:nth-child(4) dt::before {
  background: url(/recruit/assets/img/workstyle/time_13.png) no-repeat center center/cover;
}

.day .li:nth-child(5) dt::before {
  background: url(/recruit/assets/img/workstyle/time_16.png) no-repeat center center/cover;
}

.day .li:nth-child(6) dt::before {
  background: url(/recruit/assets/img/workstyle/time_18.png) no-repeat center center/cover;
}

.day dd {
  width: calc(100% - 270px);
}

@media screen and (max-width: 750px) {
  /* ---------------------sub_mv-------------------- */
  .sub_mv {
    height: calc((100 / 750) * 440 * 1vw);
    background: url(/recruit/assets/img/workstyle/sub_mv_sp.jpg) no-repeat center/cover;
  }

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

  .benefits h2 {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .benefits dl {
    margin-bottom: calc((100 / 750) * 96 * 1vw);
    padding: calc((100 / 750) * 20 * 1vw);
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .benefits dl .li {
    column-gap: 0;
    padding: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 15 * 1vw) calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 20 * 1vw);
    border-bottom: calc((100 / 750) * 2 * 1vw) solid var(--gray);
  }

  .benefits dt {
    width: calc((100 / 750) * 150 * 1vw);
  }

  .benefits dd {
    width: calc(100% - ((100 / 750) * 150 * 1vw));
  }

  /* --------------------swiper---------------- */

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

  .swiper-slide {
    width: calc((100 / 750) * 450 * 1vw);
    aspect-ratio: 450/300;
    margin-right: calc((100 / 750) * 40 * 1vw);
  }

  .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

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

  .number h2 {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .number .li dt .ja {
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
    line-height: calc((100 / 750) * 23 * 1vw);
  }

  .number .li dt .en {
    line-height: calc((100 / 750) * 15 * 1vw);
    font-size: calc((100 / 750) * 24 * 1vw);
  }

  .number .num {
    line-height: 0.6;
  }

  .number .num .big {
    font-size: calc((100 / 750) * 160 * 1vw);
  }

  .number .num .medium {
    font-size: calc((100 / 750) * 128 * 1vw);
  }

  .number .num .mini {
    font-size: calc((100 / 750) * 104 * 1vw);
  }

  .number .num .unit {
    font-size: calc((100 / 750) * 48 * 1vw);
  }

  .number .num .tiny {
    font-size: calc((100 / 750) * 26 * 1vw);
  }

  .number .flex {
    display: block;
    margin-bottom: 0;
  }

  .number .flex .li {
    width: 100%;
    height: calc((100 / 750) * 519 * 1vw);
    margin-bottom: calc((100 / 750) * 40 * 1vw);
    padding: calc((100 / 750) * 60 * 1vw) 0;
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .number .flex dt {
    margin-bottom: calc((100 / 750) * 32 * 1vw);
  }

  .number .flex .num {
    height: calc((100 / 750) * 140 * 1vw);
    margin-bottom: calc((100 / 750) * 32 * 1vw);
    line-height: calc((100 / 750) * 140 * 1vw);
    padding-top: 0;
    position: relative;
  }

  .number .flex .li:nth-child(1) .num {
    padding-left: calc((100 / 750) * 221 * 1vw);
  }

  .number .flex .li:nth-child(1) .num:before {
    width: calc((100 / 750) * 189 * 1vw);
    aspect-ratio: 189/140;
    background: url(/recruit/assets/img/workstyle/off_sp.png) no-repeat center center/cover;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .number .flex .li:nth-child(2) .num {
    padding-left: calc((100 / 750) * 151 * 1vw);
    padding-right: calc((100 / 750) * 162 * 1vw);
  }

  .number .flex .li:nth-child(2) .num:before {
    width: calc((100 / 750) * 119 * 1vw);
    aspect-ratio: 119/140;
    background: url(/recruit/assets/img/workstyle/ratio_men_sp.png) no-repeat center center/cover;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .number .flex .li:nth-child(2) .num::after {
    content: '';
    display: block;
    width: calc((100 / 750) * 130 * 1vw);
    aspect-ratio: 130/140;
    background: url(/recruit/assets/img/workstyle/ratio_women.png) no-repeat center center/cover;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .number .flex .li:nth-child(3) .num {
    padding-right: calc((100 / 750) * 169 * 1vw);
  }

  .number .flex .li:nth-child(3) .num:before {
    width: calc((100 / 750) * 137 * 1vw);
    aspect-ratio: 137/140;
    background: url(/recruit/assets/img/workstyle/hours_sp.png) no-repeat center center/cover;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }

  .number .flex .text {
    padding: 0 calc((100 / 750) * 60 * 1vw) calc((100 / 750) * 60 * 1vw);
  }

  .number .flex2 {
    display: block;
  }

  .number .column .li {
    width: 100%;
    height: calc((100 / 750) * 519 * 1vw);
    padding: calc((100 / 750) * 60 * 1vw) 0;
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .number .column .li:nth-child(1) {
    margin-bottom: calc((100 / 750) * 40 * 1vw);
  }

  .number .column .li:nth-child(2) {
    margin-bottom: calc((100 / 750) * 40 * 1vw);
  }

  .column .li dt {
    margin-bottom: calc((100 / 750) * 32 * 1vw);
  }

  .column .li .num {
    height: calc((100 / 750) * 140 * 1vw);
    margin-bottom: calc((100 / 750) * 32 * 1vw);
    line-height: calc((100 / 750) * 140 * 1vw);
    position: relative;
  }

  .column .li:nth-child(1) .num {
    padding-left: calc((100 / 750) * 181 * 1vw);
  }

  .column .li:nth-child(1) .num::before {
    width: calc((100 / 750) * 149 * 1vw);
    aspect-ratio: 149/140;
    background: url(/recruit/assets/img/workstyle/holiday_sp.png) no-repeat center center/cover;
  }

  .column .li:nth-child(2) .num {
    padding-left: 0;
    padding-right: calc((100 / 750) * 185 * 1vw);
  }

  .column .li:nth-child(2) .num::before {
    content: '';
    display: block;
    width: calc((100 / 750) * 153 * 1vw);
    aspect-ratio: 153/140;
    background: url(/recruit/assets/img/workstyle/years.png) no-repeat center center/cover;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }

  .column .li .text {
    padding: 0 calc((100 / 750) * 60 * 1vw);
  }

  .number .column.li {
    width: 100%;
    height: auto;
    padding: calc((100 / 750) * 60 * 1vw) 0;
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .number .column.li dt {
    margin-bottom: calc((100 / 750) * 62 * 1vw);
  }

  .bar {
    width: calc((100 / 750) * 590 * 1vw);
    padding-right: calc((100 / 750) * 35 * 1vw);
  }

  .bar:nth-child(5) {
    margin-bottom: calc((100 / 750) * 34 * 1vw);
  }

  .bar .ages {
    width: calc(100% - ((100 / 750) * 380 * 1vw));
    height: calc((100 / 750) * 104 * 1vw);
    padding: calc((100 / 750) * 12 * 1vw) 0 calc((100 / 750) * 12 * 1vw) calc((100 / 750) * 20 * 1vw);
    border-right: calc((100 / 750) * 2 * 1vw) solid var(--dark_blue);
    line-height: calc((100 / 750) * 80 * 1vw);
  }

  .bar .age {
    font-size: calc((100 / 750) * 64 * 1vw);
  }

  .bar .age_unit {
    font-size: calc((100 / 750) * 36 * 1vw);
  }

  .bar-fill {
    height: calc((100 / 750) * 80 * 1vw);
    padding-right: calc((100 / 750) * 16 * 1vw);
  }

  .bar:nth-child(1) .bar-fill {
    width: calc((100 / 750) * 380 * 1vw);
  }

  .bar:nth-child(2) .bar-fill {
    width: calc((100 / 750) * 190 * 1vw);
  }

  .bar:nth-child(3) .bar-fill {
    width: calc((100 / 750) * 130 * 1vw);
    padding-right: calc((100 / 750) * 16 * 1vw);
  }

  .bar:nth-child(4) .bar-fill,
  .bar:nth-child(5) .bar-fill {
    width: calc((100 / 750) * 80 * 1vw);
  }

  .bar.is-inview .bar-fill .percents {
    line-height: calc((100 / 750) * 80 * 1vw);
  }

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

  .percents .unit {
    font-size: calc((100 / 750) * 24 * 1vw);
  }

  .bar:nth-child(4) .percents,
  .bar:nth-child(5) .percents {
    margin-right: calc((100 / 750) * -76 * 1vw);
  }

  .column.li .ave {
    height: calc((100 / 750) * 140 * 1vw);
    margin-bottom: calc((100 / 750) * 32 * 1vw);
  }

  .column.li .ave .ja {
    margin-right: calc((100 / 750) * 24 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
  }

  .column.li .text {
    padding: 0 calc((100 / 750) * 60 * 1vw);
  }

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

  .day h2 {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
    text-wrap: nowrap;
  }

  .day p {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .day dl {
    padding: calc((100 / 750) * 40 * 1vw);
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .day .li {
    padding: calc((100 / 750) * 40 * 1vw) 0 calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 20 * 1vw);
    column-gap: calc((100 / 750) * 32 * 1vw);
    border-bottom: calc((100 / 750) * 2 * 1vw) solid var(--gray);
  }

  .day dt {
    width: calc((100 / 750) * 190 * 1vw);
    padding-left: calc((100 / 750) * 90 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
  }

  .day dt::before {
    width: calc((100 / 750) * 70 * 1vw);
  }

  .day dd {
    width: calc(100% - ((100 / 750) * 222 * 1vw));
  }
}