.banner {
  position: relative;
}
.banner__join {
  position: absolute;
  width: calc(var(--vw) * 354);
  bottom: calc(var(--vw) * 93);
  right: 0;
  left: 0;
  margin: 0 auto;
  @media screen and (min-width: 769px) {
    width: calc(var(--vw) * 554);
    bottom: calc(var(--vw) * 138);
  }
}
.banner__schedule {
  position: absolute;
  width: calc(var(--vw) * 205);
  bottom: calc(var(--vw) * 40);
  right: 0;
  left: 0;
  margin: 0 auto;
  @media screen and (min-width: 769px) {
    width: calc(var(--vw) * 321);
    bottom: calc(var(--vw) * 55);
  }
}
.voice {
  position: relative;
  padding-bottom: calc(var(--vw) * 75);

  p {
    font-family: "Noto Sans JP", sans-serif;
    color: #223657;
    font-weight: 600;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 0.65px;
    text-align: center;
    margin-top: 25px;
  }
}
.voice-swiper__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--vw) * 27);

  .swiper-pagination-bullet {
    background: #D9D9D9;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 12px !important;
  }
  .swiper-pagination-bullet-active {
    background: #005090;
    width: 14px;
    height: 14px;
  }
}

.differnce {
  position: relative;
}
.differnce__join {
  position: absolute;
  width: calc(var(--vw) * 354);
  bottom: calc(var(--vw) * 93);
  right: 0;
  left: 0;
  margin: 0 auto;
  @media screen and (min-width: 769px) {
    width: calc(var(--vw) * 554);
    bottom: calc(var(--vw) * 205);
  }
}
.differnce__schedule {
  position: absolute;
  width: calc(var(--vw) * 205);
  bottom: calc(var(--vw) * 40);
  right: 0;
  left: 0;
  margin: 0 auto;
  @media screen and (min-width: 769px) {
    width: calc(var(--vw) * 321);
    bottom: calc(var(--vw) * 120);
  }
}
.dont-miss {
  width: calc(var(--vw) * 291);
  margin: 0 auto calc(var(--vw) * 27) auto;
}
.difference-2 {
  overflow: scroll;
  margin-bottom: 15px;
}
.difference-2-image {
  width: calc(var(--vw) * 631);
}
.difference-2-finger {
  width: calc(var(--vw) * 54);
  animation-name: scrollFinger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  float: right;
  margin-top: calc(var(--vw) * -14);
}
.teacher-2 {
  padding: 0 25px;
  margin-bottom: 50px;
}
.teacher-swiper__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--vw) * 10);

  .swiper-pagination-bullet {
    background: #D9D9D9;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 12px !important;
  }
  .swiper-pagination-bullet-active {
    background: #005090;
    width: 14px;
    height: 14px;
  }
}
.banner-2 {
  justify-content: center;
  display: flex;
  gap: calc(var(--vw) * 24);
  align-items: center;
  margin-bottom: calc(var(--vw) * 52);
  a {
    display: block;
    width: calc(var(--vw) * 480);
    @media screen and (max-width: 768px) {
      width: calc(var(--vw) * 335);
    }
  }
  @media screen and (max-width: 768px) {
    flex-direction: column;
    margin-bottom: calc(var(--vw) * 50);
    gap: calc(var(--vw) * 17);
  }
}
.cta {
  position: relative;
  .cta__join {
    position: absolute;
    bottom: calc(var(--vw) * 189);
    right: 0;
    left: 0;
    margin: 0 auto;
    @media screen and (min-width: 769px) {
      bottom: calc(var(--vw) * 240);
    }
  }
  .cta__schedule {
    position: absolute;
    bottom: calc(var(--vw) * 134);
    right: 0;
    left: 0;
    margin: 0 auto;
    @media screen and (min-width: 769px) {
      bottom: calc(var(--vw) * 157);
    }
  }
}



.cta__join {
  display: block;
  margin: 0 auto;
  width: calc(var(--vw) * 354);
  @media screen and (min-width: 769px) {
    width: calc(var(--vw) * 554);
  }
}
.cta__schedule {
  display: block;
  margin: 12px auto 0 auto;
  width: calc(var(--vw) * 205);
  @media screen and (min-width: 769px) {
    width: calc(var(--vw) * 321);
  }
}
@keyframes scrollFinger {
  50% {
    transform: translateX(-40px);
  }
  100% {
    transform: translateX(0);
  }
}