@charset "utf-8";
.features__container {
  margin-top: 197px;
  display: flex;
  flex-direction: column;
  gap: 227px;
}

@media screen and (min-width: 768px) {
  .features__container {
    margin-top: 67px;
    gap: 197px;
  }
}

.features__contents {
  position: relative;
  max-width: 1366px;
  width: 100%;
  margin-inline: auto;
}

.features__box {
  background: var(--color-white);
  border-radius: 10px;
  width: 100%;
  padding: 90px 30px;
}

@media screen and (min-width: 768px) {
  .features__box {
    width: 72%;
    padding: 40px 30px;
  }

  .features__contents:nth-child(odd) .features__box {
    box-shadow: 0 3px 21px var(--color-bg-blue);
    padding: clamp(40px, 6.15vw, 84px) clamp(100px, 14.65vw, 200px)
      clamp(40px, 6.15vw, 84px) clamp(25px, 4.54vw, 62px);
    margin-inline: 0 auto;
  }

  .features__contents:nth-child(even) .features__box {
    box-shadow: 0 3px 21px #69c7d8;
    padding: clamp(40px, 6.15vw, 84px) clamp(30px, 4.54vw, 62px)
      clamp(40px, 6.15vw, 84px) clamp(100px, 14.65vw, 200px);
    margin-inline: auto 0;
  }
}

.features__box-title-ja {
  font-size: clamp(20px, 2.05vw, 28px);
  font-weight: 700;
  letter-spacing: calc(60 / 1000 * 1em);
  color: var(--color-title);
}

.features__box-text {
  letter-spacing: calc(80 / 1000 * 1em);
  font-size: clamp(14px, 1.18vw, 16px);
  line-height: calc(32 / 16);
}

.features__box-text.first {
  margin-top: 40px;
}

.features__box-text + .features__box-text {
  margin-top: 40px;
}

.features__contents-image-wrapper {
  position: absolute;
  top: -188px;
  aspect-ratio: 563/629;
  height: auto;
  width: 228px;
  overflow: hidden;
}

.features__contents:nth-child(odd) .features__contents-image-wrapper {
  right: 0;
  border-radius: 10px 0 0 10px;
}

.features__contents:nth-child(even) .features__contents-image-wrapper {
  left: 0;
  border-radius: 0 10px 10px 0;
}

@media screen and (min-width: 768px) {
  .features__contents-image-wrapper {
    top: -9%;
    width: 41.21%;
  }
}

@media screen and (min-width: 1367px) {
  .features__contents-image-wrapper {
    border-radius: 10px !important;
  }
}

.features__contents-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.features__contents-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.features__contents-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48%;
  pointer-events: none;
}

.features__contents:nth-child(odd) .features__contents-image::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(96, 171, 242, 0.41) 60%,
    rgba(0, 104, 201, 1) 100%
  );
}

.features__contents:nth-child(even) .features__contents-image::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(61, 203, 237, 0.41) 60%,
    #31acc3 100%
  );
}

.features__contents-number {
  position: absolute;
  z-index: 3;
  bottom: 6px;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: clamp(20px, 5.13vw, 70px);
  font-weight: 500;
  letter-spacing: calc(10 / 1000 * 1em);
}

.features__contents:nth-child(odd) .features__contents-number {
  right: 20px;
}

.features__contents:nth-child(even) .features__contents-number {
  left: 20px;
}