@charset "UTF-8";

#sbg .lp_main,
#sbg .lp_main *,
#sbg .lp_main *::before,
#sbg .lp_main *::after {
  box-sizing: border-box;
}

#sbg .lp_main {
  --u: calc(100vw / 1920);
  width: 100vw;
  min-width: 320px;
  margin: 0 auto;
  overflow: hidden;
  color: #2b1646;
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  background: linear-gradient(135deg, #f5eaff, #fff4fb);
}

#sbg .lp_main img,
#sbg .lp_main picture {
  display: block;
}

#sbg .lp_main img {
  max-width: none;
  height: auto;
}

#modal_window_base {
  z-index: 11000;
}

#modal_window_box {
  z-index: 11001;
}

#lp_wrapper #modal_window_box .main_box {
  box-sizing: content-box;
}

#lp_wrapper #modal_window_box img.scaling {
  max-width: 100%;
  height: auto;
}

#sbg .lp_main .visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  white-space: nowrap;
}

#sbg .lp_main .section-fv {
  position: relative;
  width: 100vw;
  height: calc(893 * var(--u));
  background: #fff;
}

#sbg .lp_main .section-fv picture,
#sbg .lp_main .full-art {
  width: 100vw;
  height: calc(893 * var(--u));
}

#sbg .lp_main .section-fv picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sbg .lp_main .fv-actions {
  position: absolute;
  inset: 0;
  z-index: 3;
}

#sbg .lp_main a.btn_reserve {
  display: block;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transition: opacity 0.15s ease;
}

#sbg .lp_main a.btn_reserve.reserved {
  pointer-events: none;
}

#sbg .lp_main .fv-actions .detail {
  position: absolute;
  top: calc(447 * var(--u));
  left: calc(1248 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  width: max-content;
  margin: 0;
}

#sbg .lp_main a.btn_reserve.btn-detail-link {
  flex: 0 0 calc(172 * var(--u));
  width: calc(172 * var(--u));
  height: calc(99 * var(--u));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info.png);
}

.webp #sbg .lp_main a.btn_reserve.btn-detail-link {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info.webp);
}

#sbg .lp_main a.btn_reserve.btn-detail-link:hover,
#sbg .lp_main a.btn_reserve.btn-detail-link:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info_hover.png);
}

.webp #sbg .lp_main a.btn_reserve.btn-detail-link:hover,
.webp #sbg .lp_main a.btn_reserve.btn-detail-link:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info_hover.webp);
}

#sbg .lp_main .fv-actions .device {
  width: calc(72 * var(--u));
  flex-shrink: 0;
}

#sbg .lp_main .fv-actions .device img,
#sbg .lp_main .fv-actions .device picture {
  width: 100%;
  height: auto;
}

#sbg .lp_main .fv-actions .btn {
  position: absolute;
  top: calc(596 * var(--u));
  left: calc(1190 * var(--u));
  width: calc(189 * var(--u));
}

#sbg .lp_main .btns .btn a.btn_reserve {
  width: 100%;
  aspect-ratio: 189 / 189;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration.png);
}

.webp #sbg .lp_main .btns .btn a.btn_reserve {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration.webp);
}

#sbg .lp_main .btns .btn a.btn_reserve:hover,
#sbg .lp_main .btns .btn a.btn_reserve:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_hover.png);
}

.webp #sbg .lp_main .btns .btn a.btn_reserve:hover,
.webp #sbg .lp_main .btns .btn a.btn_reserve:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_hover.webp);
}

#sbg .lp_main .btns .btn a.btn_reserve.reserved {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_disabled.png);
}

.webp #sbg .lp_main .btns .btn a.btn_reserve.reserved {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_disabled.webp);
}

#sbg .lp_main .btns .btn a.btn_reserve.end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game.png);
}

.webp #sbg .lp_main .btns .btn a.btn_reserve.end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game.webp);
}

#sbg .lp_main .btns .btn a.btn_reserve.end:hover,
#sbg .lp_main .btns .btn a.btn_reserve.end:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game_hover.png);
}

.webp #sbg .lp_main .btns .btn a.btn_reserve.end:hover,
.webp #sbg .lp_main .btns .btn a.btn_reserve.end:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game_hover.webp);
}

#sbg .lp_main .section-registlist {
  position: relative;
  width: 100vw;
  height: calc(960 * var(--u));
  overflow: hidden;
}

#sbg .lp_main .section-bg-img,
#sbg .lp_main .section-bg-img picture,
#sbg .lp_main .section-bg-img img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#sbg .lp_main .section-bg-img img {
  object-fit: fill;
}

#sbg .lp_main .registlist-window {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: calc(960 * var(--u));
}

#sbg .lp_main .section-registlist .section-title {
  position: absolute;
  top: calc(80 * var(--u));
  left: calc(100 * var(--u));
  width: calc(412 * var(--u));
  margin: 0;
}

#sbg .lp_main .section-registlist h2 {
  margin: 0;
}

#sbg .lp_main .section-registlist .title-img,
#sbg .lp_main .section-registlist .title-img img {
  width: calc(412 * var(--u));
  height: auto;
}

#sbg .lp_main .milestone-cards {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: nowrap;
  top: 2.5vw;
}

#sbg .lp_main .milestone-card {
  position: absolute;
  top: calc(180 * var(--u));
  flex-shrink: 0;
}

#sbg .lp_main .milestone-5000 {
  left: calc(128 * var(--u));
  width: calc(217 * var(--u));
  z-index: 2;
}

#sbg .lp_main .milestone-10000 {
  left: calc(357 * var(--u));
  width: calc(218 * var(--u));
  z-index: 2;
}

#sbg .lp_main .milestone-30000 {
  left: calc(570 * var(--u));
  width: calc(252 * var(--u));
  z-index: 2;
}

#sbg .lp_main .milestone-50000 {
  left: calc(799 * var(--u));
  width: calc(252 * var(--u));
  z-index: 2;
}

#sbg .lp_main .milestone-100000 {
  left: calc(487 * var(--u));
  width: calc(1358 * var(--u));
  z-index: 1;
}

#sbg .lp_main .milestone-card .card-img,
#sbg .lp_main .milestone-card .card-img picture,
#sbg .lp_main .milestone-card .card-img img,
#sbg .lp_main .milestone-card .card-img-clear,
#sbg .lp_main .milestone-card .card-img-clear picture,
#sbg .lp_main .milestone-card .card-img-clear img {
  width: 100%;
  height: auto;
}

#sbg .lp_main .milestone-card .card-img-clear {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

#sbg .lp_main .milestone-card.clear .card-img-clear {
  display: block;
}

#sbg .lp_main .art-section,
#sbg .lp_main .slider-section {
  position: relative;
  width: 100vw;
  height: calc(960 * var(--u));
  overflow: hidden;
  padding: 0;
}

#sbg .lp_main .section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(960 * var(--u));
  object-fit: fill;
}

#sbg .lp_main .section-inner {
  position: relative;
  z-index: 1;
  width: calc(1120 * var(--u));
  height: 100%;
  margin: 0 auto;
  padding-top: calc(40 * var(--u));
}

#sbg .lp_main h2 {
  margin: 0 0 calc(28 * var(--u));
  text-align: center;
}

#sbg .lp_main .title-image {
  width: calc(410 * var(--u));
  margin: 0 auto;
}

#sbg .lp_main .text-title {
  color: #32124e;
  font-size: calc(58 * var(--u));
  line-height: 1.15;
  text-shadow: 0 calc(2 * var(--u)) #fff;
}

#sbg .lp_main .text-title small {
  display: block;
  margin-bottom: calc(5 * var(--u));
  color: #7648bd;
  font-size: 0.3em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#sbg .lp_main .section-character {
  position: relative;
  width: 100vw;
  height: calc(960 * var(--u));
  overflow: hidden;
  padding: 0;
  background: #efe6f8;
}

#sbg .lp_main .character-slider,
#sbg .lp_main .section-character .swiper-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#sbg .lp_main .section-character .swiper-slide {
  position: relative;
  height: 100%;
  background: transparent;
}

#sbg .lp_main .character-slide-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#sbg .lp_main .character-slide-art picture,
#sbg .lp_main .character-slide-art img {
  width: 100%;
  height: 100%;
}

#sbg .lp_main .character-slide-art img {
  object-fit: fill;
}

#sbg .lp_main .character-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#sbg .lp_main .section-character h2 {
  position: absolute;
  top: calc(48 * var(--u));
  left: calc(88 * var(--u));
  margin: 0;
  text-align: left;
}

#sbg .lp_main .section-character .title-image {
  width: calc(398 * var(--u));
  margin: 0;
}

#sbg .lp_main .character-thumbs {
  position: absolute;
  left: calc(156 * var(--u));
  bottom: calc(70 * var(--u));
  display: flex;
  align-items: center;
  pointer-events: auto;
}

#sbg .lp_main .character-thumb {
  position: relative;
  flex-shrink: 0;
  width: calc(200 * var(--u));
  height: calc(192 * var(--u));
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  background: transparent;
  filter: grayscale(1);
  transition: filter 0.2s, transform 0.2s;
}

#sbg .lp_main .character-thumb + .character-thumb {
  margin-left: calc(-47 * var(--u));
}

#sbg .lp_main .character-thumb img,
#sbg .lp_main .character-thumb picture,
#sbg .lp_main .character-thumb picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#sbg .lp_main .character-thumb img {
  object-fit: fill;
}

#sbg .lp_main .character-thumb:hover {
  transform: translateY(calc(-2 * var(--u)));
}

#sbg .lp_main .character-thumb.is-active {
  z-index: 1;
  filter: none;
}

#sbg .lp_main .slider-shell {
  position: relative;
  width: calc(1060 * var(--u));
  margin: 0 auto;
  padding-bottom: calc(42 * var(--u));
}

#sbg .lp_main .slider-shell .swiper-container {
  overflow: hidden;
  border: calc(3 * var(--u)) solid rgb(255 255 255 / 85%);
  border-radius: calc(22 * var(--u));
  box-shadow: 0 calc(20 * var(--u)) calc(55 * var(--u)) rgb(74 28 102 / 20%);
}

#sbg .lp_main .slider-shell .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(680 * var(--u));
}

#sbg .lp_main .slider-shell .swiper-slide > img,
#sbg .lp_main .slider-shell .swiper-slide > picture,
#sbg .lp_main .slider-shell .swiper-slide > picture img {
  width: 100%;
  height: 100%;
}

#sbg .lp_main .slider-shell .swiper-slide > img,
#sbg .lp_main .slider-shell .swiper-slide > picture img {
  object-fit: contain;
}

#sbg .lp_main .slider-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 0 calc(6 * var(--u));
  color: #fff;
  font-size: calc(44 * var(--u));
  line-height: 1;
  cursor: pointer;
  border: calc(2 * var(--u)) solid #fff;
  border-radius: 50%;
  background: #70428e;
  box-shadow: 0 calc(5 * var(--u)) calc(15 * var(--u)) rgb(45 15 70 / 28%);
  transform: translateY(-70%);
}

#sbg .lp_main .slider-prev {
  left: calc(-70 * var(--u));
}

#sbg .lp_main .slider-next {
  right: calc(-70 * var(--u));
}

#sbg .lp_main .swiper-pagination {
  bottom: calc(5 * var(--u));
  width: 100%;
}

#sbg .lp_main .swiper-pagination-bullet {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin: 0 calc(5 * var(--u));
  background: #71418f;
}

#sbg .lp_main .section-detail {
  padding: 0;
}

#sbg .lp_main .section-detail .feature-title {
  position: absolute;
  z-index: 6;
  top: calc(40 * var(--u));
  left: auto;
  right: calc(280 * var(--u));
  margin: 0;
  pointer-events: none;
}

#sbg .lp_main .section-detail .title-image {
  width: calc(410 * var(--u));
}

#sbg .lp_main .feature-slider-shell {
  z-index: 1;
  width: 100vw;
  height: calc(960 * var(--u));
  margin: 0;
  padding: 0;
}

#sbg .lp_main .feature-slider-sp {
  display: none;
}

#sbg .lp_main .section-detail .slider-shell .swiper-container {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#sbg .lp_main .section-detail .slider-shell .swiper-slide {
  position: relative;
  height: 100%;
  background: transparent;
}

#sbg .lp_main .feature-slide-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#sbg .lp_main .feature-slide-art img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#sbg .lp_main .section-detail .slider-arrow {
  top: 50%;
  width: calc(80 * var(--u));
  height: calc(86 * var(--u));
  padding: 0;
  color: transparent;
  font-size: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(-50%);
}

#sbg .lp_main .section-detail .slider-arrow img {
  width: 100%;
  height: auto;
}

#sbg .lp_main .section-detail .slider-arrow:hover {
  opacity: 0.78;
}

#sbg .lp_main .section-detail .slider-prev {
  left: calc(36 * var(--u));
}

#sbg .lp_main .section-detail .slider-next {
  right: calc(36 * var(--u));
}

#sbg .lp_main .section-detail .swiper-pagination {
  bottom: calc(36 * var(--u));
  left: 50%;
  width: auto;
  transform: translateX(-50%);
}

#sbg .lp_main .section-detail .swiper-pagination-bullet {
  box-sizing: content-box;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin: 0 calc(12 * var(--u));
  background: #fff;
  border: calc(3 * var(--u)) solid #2f004a;
  opacity: 1;
  box-shadow: none;
}

#sbg .lp_main .section-detail .swiper-pagination-bullet-active {
  background: #c08ad4;
  border-color: #fff;
}

#sbg .lp_main .section-world {
  width: 100vw;
  height: calc(960 * var(--u));
  background: #f7eafb;
}

#sbg .lp_main .section-world picture,
#sbg .lp_main .world-art {
  width: 100vw;
  height: calc(960 * var(--u));
}

#sbg .lp_main .section-world picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sbg .lp_main .section-spec {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: auto;
  min-height: calc(885 * var(--u));
  padding: calc(120 * var(--u)) 0 calc(80 * var(--u));
  background: #f6eef8;
}

#sbg .lp_main .section-spec .spec-bg,
#sbg .lp_main .section-spec .spec-bg picture,
#sbg .lp_main .section-spec .spec-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

#sbg .lp_main .section-spec .spec-bg img {
  object-fit: cover;
  object-position: center top;
}

#sbg .lp_main .section-spec .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(1034 * var(--u));
  height: auto;
  padding: 0;
}

#sbg .lp_main .section-spec picture {
  width: 100%;
}

#sbg .lp_main .spec-image {
  width: calc(1034 * var(--u));
  max-width: 100%;
  min-width: 0;
  height: auto;
  margin: 0 0 calc(40 * var(--u));
}

#sbg .lp_main .attention-box {
  width: 100%;
  padding: 0;
}

#sbg .lp_main .attention-box picture,
#sbg .lp_main .attention-box img {
  width: calc(1030 * var(--u));
  margin: 0 auto;
}

@media (max-width: 768px) {
  #sbg .lp_main .section-fv,
  #sbg .lp_main .section-fv picture,
  #sbg .lp_main .full-art {
    height: calc(1201 / 768 * 100vw);
  }

  #sbg .lp_main .fv-actions .detail {
    top: calc(860 / 768 * 100vw);
    left: calc(413 / 768 * 100vw);
    right: auto;
    flex-direction: row-reverse;
    gap: calc(10 / 768 * 100vw);
  }

  #sbg .lp_main a.btn_reserve.btn-detail-link {
    flex: 0 0 calc(172 / 768 * 100vw);
    width: calc(172 / 768 * 100vw);
    height: calc(99 / 768 * 100vw);
    background-size: 100% 100%;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info_sp.png);
  }

  .webp #sbg .lp_main a.btn_reserve.btn-detail-link {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info_sp.webp);
  }

  #sbg .lp_main a.btn_reserve.btn-detail-link:hover,
  #sbg .lp_main a.btn_reserve.btn-detail-link:active {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info_hover_sp.png);
  }

  .webp #sbg .lp_main a.btn_reserve.btn-detail-link:hover,
  .webp #sbg .lp_main a.btn_reserve.btn-detail-link:active {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_info_hover_sp.webp);
  }

  #sbg .lp_main .fv-actions .device {
    width: calc(72 / 768 * 100vw);
  }

  #sbg .lp_main .fv-actions .btn {
    top: calc(1005 / 768 * 100vw);
    left: calc(168 / 768 * 100vw);
    width: calc(432 / 768 * 100vw);
  }

  #sbg .lp_main .btns .btn a.btn_reserve {
    aspect-ratio: 432 / 147;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_sp.png);
  }

  .webp #sbg .lp_main .btns .btn a.btn_reserve {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_sp.webp);
  }

  #sbg .lp_main .btns .btn a.btn_reserve:hover,
  #sbg .lp_main .btns .btn a.btn_reserve:active {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_hover_sp.png);
  }

  .webp #sbg .lp_main .btns .btn a.btn_reserve:hover,
  .webp #sbg .lp_main .btns .btn a.btn_reserve:active {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_hover_sp.webp);
  }

  #sbg .lp_main .btns .btn a.btn_reserve.reserved {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_disabled_sp.png);
  }

  .webp #sbg .lp_main .btns .btn a.btn_reserve.reserved {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/preregistration_disabled_sp.webp);
  }

  #sbg .lp_main .btns .btn a.btn_reserve.end {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game_sp.png);
  }

  .webp #sbg .lp_main .btns .btn a.btn_reserve.end {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game_sp.webp);
  }

  #sbg .lp_main .btns .btn a.btn_reserve.end:hover,
  #sbg .lp_main .btns .btn a.btn_reserve.end:active {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game_hover_sp.png);
  }

  .webp #sbg .lp_main .btns .btn a.btn_reserve.end:hover,
  .webp #sbg .lp_main .btns .btn a.btn_reserve.end:active {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sbg/play_game_hover_sp.webp);
  }

  #sbg .lp_main .section-registlist,
  #sbg .lp_main .registlist-window {
    height: auto;
    min-height: calc(1141 / 768 * 100vw);
  }

  #sbg .lp_main .registlist-window {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #sbg .lp_main .section-registlist .section-title,
  #sbg .lp_main .section-character h2,
  #sbg .lp_main .section-detail .feature-title {
    padding-top: calc(64 / 768 * 100vw);
    padding-bottom: calc(48 / 768 * 100vw);
  }

  #sbg .lp_main .section-registlist .section-title {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-top: 0;
    transform: none;
  }

  #sbg .lp_main .section-registlist .title-img,
  #sbg .lp_main .section-registlist .title-img img,
  #sbg .lp_main .section-character .title-image,
  #sbg .lp_main .section-detail .title-image {
    width: auto;
    height: calc(94 / 768 * 100vw);
  }

  #sbg .lp_main .milestone-cards {
    position: relative;
    inset: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
    width: calc(725 / 768 * 100%);
    max-width: calc(100% - 24px);
    padding: 0 0 calc(32 / 768 * 100vw);
  }

  #sbg .lp_main .milestone-card,
  #sbg .lp_main .milestone-5000,
  #sbg .lp_main .milestone-10000,
  #sbg .lp_main .milestone-30000,
  #sbg .lp_main .milestone-50000,
  #sbg .lp_main .milestone-100000 {
    position: relative;
    top: auto;
    left: auto;
  }

  #sbg .lp_main .milestone-5000,
  #sbg .lp_main .milestone-10000 {
    width: calc(652 / 725 * 100%);
  }

  #sbg .lp_main .milestone-30000,
  #sbg .lp_main .milestone-50000 {
    width: calc(716 / 725 * 100%);
  }

  #sbg .lp_main .milestone-100000 {
    width: 100%;
    z-index: 1;
  }

  #sbg .lp_main .section-character {
    height: calc(1141 / 768 * 100vw);
  }

  #sbg .lp_main .section-character h2 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  #sbg .lp_main .section-character .title-image {
    margin: 0 auto;
  }

  #sbg .lp_main .section-detail {
    height: auto;
    min-height: calc(1141 / 768 * 100vw);
    padding: 0 0 calc(40 / 768 * 100vw);
  }

  #sbg .lp_main .section-detail .section-bg-img img {
    object-fit: cover;
    object-position: center top;
  }

  #sbg .lp_main .section-detail .feature-title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0 auto;
  }

  #sbg .lp_main .section-detail .title-image {
    margin: 0 auto;
  }

  #sbg .lp_main .feature-slider-pc {
    display: none;
  }

  #sbg .lp_main .feature-slider-sp {
    display: block;
    width: calc(601 / 768 * 100vw);
    height: auto;
    margin: 0 auto;
    padding: 0;
  }

  #sbg .lp_main .section-detail .feature-slider-sp .swiper-container {
    width: 100%;
    height: calc(884 / 768 * 100vw);
  }

  #sbg .lp_main .section-detail .feature-slider-sp .swiper-slide {
    height: 100%;
  }

  #sbg .lp_main .feature-slider-sp .feature-slide-art img {
    object-fit: contain;
  }

  #sbg .lp_main .section-detail .feature-slider-sp .swiper-pagination {
    position: relative;
    bottom: auto;
    left: 50%;
    width: auto;
    margin-top: calc(20 / 768 * 100vw);
    transform: translateX(-50%);
  }

  #sbg .lp_main .section-detail .swiper-pagination-bullet {
    width: calc(16 / 768 * 100vw);
    height: calc(16 / 768 * 100vw);
    margin: 0 calc(8 / 768 * 100vw);
    border-width: calc(3 / 768 * 100vw);
  }

  #sbg .lp_main .character-thumbs {
    left: calc(0 / 768 * 100vw);
    top: calc(970 / 768 * 100vw);
    bottom: auto;
    width: calc(714 / 768 * 100vw);
    justify-content: flex-start;
    gap: 0;
    transform: none;
  }

  #sbg .lp_main .character-thumb {
    width: calc(167 / 768 * 100vw);
    height: calc(162 / 768 * 100vw);
    overflow: visible;
  }

  #sbg .lp_main .character-thumb + .character-thumb {
    margin-left: calc(-48 / 768 * 100vw);
  }

  #sbg .lp_main .section-world,
  #sbg .lp_main .section-world picture,
  #sbg .lp_main .world-art {
    height: calc(1141 / 768 * 100vw);
  }

  #sbg .lp_main .section-spec {
    min-height: calc(1128 / 768 * 100vw);
    padding: calc(80 / 768 * 100vw) 0 calc(64 / 768 * 100vw);
  }

  #sbg .lp_main .section-spec .section-inner {
    width: calc(686 / 768 * 100vw);
  }

  #sbg .lp_main .spec-image {
    width: 100%;
    margin: 0 0 calc(32 / 768 * 100vw);
  }

  #sbg .lp_main .attention-box picture,
  #sbg .lp_main .attention-box img {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sbg .lp_main *,
  #sbg .lp_main *::before,
  #sbg .lp_main *::after {
    transition-duration: 0.001ms !important;
  }
}