@charset "UTF-8";


/* ---------------------------------------------------------------------------
//  reasons
--------------------------------------------------------------------------- */
main {
  overflow: hidden;
}
.mv-reasons .mv-inner {
  justify-content: flex-end;
}
.bg-reasons-line {
  position: relative;
}
.bg-reasons-line1 {
  position: absolute;
  top: 3rem;
  right: 0;
  z-index: -1;
  height: 28rem;
  background: var(--blue);
  opacity: .04;
  transform: skewY(-30deg);
}
.bg-reasons-line2 {
  position: absolute;
  top: 3rem;
  left: 0;
  z-index: -2;
  height: 28rem;
  background: var(--bg2);
  opacity: 7;
  transform: skewY(30deg);
}
.bg-reasons-line3 {
  position: absolute;
  top: 70rem;
  right: 0;
  z-index: -1;
  height: 28rem;
  background: var(--blue);
  opacity: .04;
  transform: skewY(-30deg);
}
.bg-reasons-line4 {
  position: absolute;
  top: 160rem;
  left: 0;
  z-index: -2;
  height: 28rem;
  background: var(--bg2);
  opacity: 7;
  transform: skewY(30deg);
}
.bg-reasons-line5 {
  position: absolute;
  top: 250rem;
  right: 0;
  z-index: -1;
  height: 18rem;
  background: var(--blue);
  opacity: .04;
  transform: skewY(-30deg);
}

.bg-clear {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  background: var(--gray-bg);
}

.reasons-sec04 {
  padding-bottom: 6rem;
}
.reasons-sec05 {
  padding: 10rem 0 10rem;
}

.reasons-item {
  gap: 0 12rem;
  justify-content: flex-end;
}
.reasons-item .image {
  flex: 1;
  max-width: 40rem;
}
.reasons-item.left-over .image {
  margin-left: clamp( -18rem, calc(50% - 50vw), 0px );
}
.reasons-item.right-over .image {
  margin-right: clamp( -18rem, calc(50% - 50vw), 0px );
}
.reasons-item .text {
  /* width: 64rem; */
  width: 58rem;
}

.reasons-sec05 .images > div {
  width: calc(100% / 4);
}

@media screen and (min-width: 751px) and (max-width: 1024px) {
  .reasons-item {
    gap: 0;
    padding-bottom: 6rem;
  }
  .reasons-item .text {
    width: 54rem;
  }
  .reasons-sec05 .images > div p {
    padding: 0 2rem;
  }
} /* @min751-max1024 */

@media screen and (max-width: 750px) {
  .mv-reasons .mv-inner {
    align-items: flex-end;
    justify-content: flex-start;
  }
  .bg-reasons-line1 {
    height: 14rem;
  }
  .bg-reasons-line2 {
    height: 14rem;
  }
  .bg-reasons-line3 {
    top: 30rem;
    height: 14rem;
  }
  .bg-reasons-line4 {
    top: 60rem;
    height: 14rem;
  }
  .bg-reasons-line5 {
    top: 90rem;
    height: 14rem;
  }
  .reasons-sec02 {
    padding-top: 5rem;
  }
  .reasons-sec03 {
    padding-top: 5rem;
  }
  .reasons-sec04 {
    padding: 5rem 0 10rem;
  }
  .reasons-sec05 {
    padding: 8rem 0 0;
  }
  .reasons-item .image {
    width: 24rem;
    margin: 0 auto;
  }
  .reasons-item.left-over .image {
    margin-left: auto;
  }
  .reasons-item.right-over .image {
    margin-right: auto;
  }
  .reasons-item .text {
    width: 100%;
    text-align: center;
  }
  .reasons-sec05 .images {
    gap: 4rem 0;
  }
  .reasons-sec05 .images > div {
    width: calc(100% / 2);
  }
  .reasons-sec05 .images p {
    font-size: 1.4rem;
    font-weight: 400;
    padding: 0 1rem;
  }
} /* @max750 */