main {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
}

.relative {
  position: relative;
}

._soldout {
  pointer-events: none;
}

.offer__price {
  position: absolute;
  top: var(--offer__price__position__top, 1%);
  left: var(--offer__price__position__left, 5%);
  width: var(--offer__price__width, calc(880 / 960 * 100%));
}

.offer__btn {
  position: absolute;
  bottom: var(--offer__btn__position__bottom, 2.5%);
  left: var(--offer__btn__position__left, 5%);
  display: block;
  width: var(--offer__btn__width, calc(863 / 960 * 100%));
}

.offer__annotation {
  width: 95%;
  margin: 5% auto;
  text-align: left;
}

.offer__annotation__btn {
  background: #474747;
  border: 1px solid #AFAFB0;
  padding: 1% 0;
  font-size: min(3.125vw, 30px);
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.offer__annotation__btn span {
  position: relative;
}

.offer__annotation__btn span::before,
.offer__annotation__btn span::after {
  content: "";
  position: absolute;
  top: calc(50% + 0.1041666667vw);
  right: -10%;
  width: min(2.08333333333vw, 20px);
  height: min(0.2083333333vw, 2px);
  background-color: #ffffff;
}

.offer__annotation__btn span::before {
  top: calc(50% + min(0.2083333333vw, 2px));
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.25s linear;
}

.offer__annotation.active .offer__annotation__btn span::before {
  transform: translateY(-50%) rotate(0deg) !important;
}

.annotation-text {
  display: none;
  padding: 2.5% 2.5% 0;
  font-size: clamp(10px, 1.6666666667vw, 16px);
}

.offer__annotation.active .annotation-text {
  display: block;
  animation: appear .5s ease;
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.step__item-s {
  position: absolute;
  top: 27%;
  left: 6%;
  width: calc(256 / 960 * 100%);
}

.step__item-r {
  position: absolute;
  top: 45%;
  right: 5%;
  width: calc(268 / 960 * 100%);
}

.step__item-sr {
  position: absolute;
  bottom: 4.25%;
  left: 10%;
  width: 80%;
}

.step__item-cm {
  position: absolute;
  top: 37%;
  left: 3%;
  width: calc(414 / 960 * 100%);
}

.step__item-hls {
  position: absolute;
  top: 35.5%;
  right: 13%;
  width: calc(227 / 960 * 100%);
}

.step__item-slbs {
  position: absolute;
  top: 19.5%;
  left: 5.5%;
  width: calc(356 / 960 * 100%);
}

.step__item-hsl {
  position: absolute;
  top: 29.5%;
  right: 1%;
  width: calc(401 / 960 * 100%);
}

.program {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
}

.program__carousel {
  position: absolute;
  top: var(--program__carousel__position__top, 32%);
  left: 5%;
  width: 90%;
}

.program__carousel .swiper-horizontal~.swiper-button-prev,
.program__carousel .swiper-horizontal~.swiper-button-next {
  background: none;
  width: auto;
  height: auto;
  font-size: min(3.125vw, 30px);
  color: var(--program__carousel__button__color, #f05790);
  line-height: 1;
}

.program__carousel .swiper-horizontal~.swiper-button-prev {
  left: var(--program__carousel__button__position__left, -4%);
}

.program__carousel .swiper-horizontal~.swiper-button-next {
  right: var(--program__carousel__button__position__right, -4%);
  ;
}

.program__carousel .swiper-horizontal~.swiper-button-prev .swiper-navigation-icon,
.program__carousel .swiper-horizontal~.swiper-button-next .swiper-navigation-icon {
  display: none;
}

.program__carousel .swiper-pagination-bullets.swiper-pagination-horizontal {
  top: auto;
  bottom: var(--program__carousel__pagination__position__bottom, -3.5%);
}

.program__carousel .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background: var(--program__carousel__pagination__color, #595959);
  width: clamp(10px, 1.6666666667vw, 16px);
  height: clamp(10px, 1.6666666667vw, 16px);
  margin: 0 2%;
}