* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
  height: auto;
}
a:hover {
  opacity: 0.8;
}

.mv_container {
  position: relative;
  overflow: hidden;
}
.mv_container img {
  width: 100%;
  transition: all 0.5s;
  transition-delay: var(--i);
}
.mv_container img#mv1 {
  position: relative;
}
.mv_container img#mv2 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: min(20vw, 768px);
  cursor: pointer;
  animation: horizontal_889 2s 2.5s ease-in-out infinite alternate;
  transition: none;
}
@keyframes horizontal_889 {
  0% { transform:translate(0,0) }
  4.41177% { transform:translate(5px,0) }
  8.82353% { transform:translate(0,0) }
  13.23529% { transform:translate(5px,0) }
  17.64706% { transform:translate(0,0) }
  22.05882% { transform:translate(5px,0) }
  26.47059% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}
.mv_container img#mv2:hover {
  opacity: 0.8;
  transition: none;
}
.mv_container img#mv3 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;

  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.48, -0.02, 0, 0.85);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
}
.mv_container.move img#mv3 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mv_container img#mv4 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;

  transform: translateY(10px);
  transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 0;
  visibility: hidden;
}
.mv_container.move img#mv4 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mv_container img#mv5 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;

  transform: translateX(-55%);
  transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 0;
  visibility: hidden;
}
.mv_container.move img#mv5 {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.mv_container #mv_ul_box {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.mv_container #mv_left_btn {
  width: 50%;
  background: #F8B500;
  text-align: center;
}
.mv_container #mv_left_btn a {
  padding: min(1.6vw, 61px) 0;
  text-decoration: none;
  color: #fff;
  font-size: min(1.3vw,48px);
  font-weight: bold;
  display: block;
}
.mv_container #mv_right_btn {
  width: 50%;
  background: #FF155D;
  text-align: center;
}
.mv_container #mv_right_btn a {
  padding: min(1.6vw, 61px) 0;
  text-decoration: none;
  color: #fff;
  font-size: min(1.3vw,48px);
  font-weight: bold;
  display: block;
}
.mv_container span {
  position: relative;
}
.mv_container .Polygon_right_icon {
  width: min(1vw, 40px);
  position: absolute;
  right: max(-2vw, -70px);
  top: 4px;
  bottom: 0;
  margin: auto;
}

@media (max-width: 1199px) {
  .mv_container img#mv2 {
    width: min(85vw, 1140px);
    right: 0;
    top: 0;
  }

  .mv_container #mv_ul_box {
    display: block;
  }
  .mv_container #mv_left_btn,
  .mv_container #mv_right_btn {
    width: 100%;
  }
  .mv_container .Polygon_right_icon {
    width: min(3.8vw, 40px);
    right: max(-5vw, -70px);
  }
  .mv_container #mv_left_btn a,
  .mv_container #mv_right_btn a {
    font-size: min(5.4vw, 50px);
    padding: min(3.7vw, 72px) 0;
  }
}

.key_points_Swiper_pc {
  display: block;
}
.key_points_Swiper_sp {
  display: none;
}
.key_points_container {
  background: #017CFF;
}
.key_points_wrapper {
  max-width: 73.5%;
  margin: auto;
  padding: min(7.15vw, 160px) 0 min(8.4vw, 320px);
  text-align: center;
}
.key_points_container h2 {
  margin: 0;
  margin-bottom: min(2.1vw, 80px);
}
.key_points_container h2 img {
  width: 30.3%;
}
.key_points_container .swiper_box {
  position: relative;
}
.key_points_container .swiper-slide img {
  width: 100%;
}
.key_points_container .swiper-button-prev,
.key_points_container .swiper-button-next {
  width: min(4vw, 96px);
  height: auto;
  border: 4px solid #fff;
  border-radius: 64px;
  padding: 8px;
}
.key_points_container .swiper-button-prev {
  left: max(-5vw, -150px);
}
.key_points_container .swiper-button-next {
  right: max(-5vw, -150px);
}
.key_points_container .swiper-button-prev:hover,
.key_points_container .swiper-button-next:hover {
  opacity: 0.8;
}
.key_points_container .swiper-pagination_pc,
.key_points_container .swiper-pagination_sp {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;

  bottom: max(-5vw, -180px);
}
.key_points_container .swiper-pagination-bullet {
  width: min(0.85vw, 32px);
  height: min(0.85vw, 32px);
  background-color: #808080;
  opacity: 1;
}
.key_points_container .swiper-pagination-bullet-active {
  background-color: #fff;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px);
}

@media (max-width: 1199px) {
  .key_points_Swiper_pc {
    display: none;
  }
  .key_points_Swiper_sp {
    display: block;
  }
  .key_points_container h2 {
    margin-bottom: min(10.8vw, 80px);
  }
  .key_points_wrapper {
    max-width: 89.3%;
    padding: min(10.7vw, 160px) 0 min(25.5vw, 320px);
  }
  .key_points_container h2 img {
    width: 70%;
  }
  .key_points_container .swiper-button-prev,
  .key_points_container .swiper-button-next {
    background: #017CFF;
    border: min(0.6vw, 4px) solid #fff;
    width: min(10vw, 96px);
  }
  .key_points_container .swiper-pagination-bullet {
    width: min(4.5vw, 32px);
    height: min(4.5vw, 32px);
  }
  .key_points_container .swiper-pagination_pc,
  .key_points_container .swiper-pagination_sp {
    bottom: max(-15vw, -180px);
  }
  .key_points_container .swiper-button-prev {
    left: max(-4vw, -150px);
  }
  .key_points_container .swiper-button-next {
    right: max(-4vw, -150px);
  }
}

.quiz_campaign_container {
  background: linear-gradient(180deg, rgba(16, 65, 167, 1) 0%, rgba(53, 188, 255, 1) 100%);
  position: relative;
  overflow: hidden;
}
.quiz_campaign_container::before {
  content: '';
  position: absolute;
  left: 0;
  top: min(4.2vw, 160px);
  width: 100%;
  height: 100%;
  background-image: url('../images/contents/main/racer_back.webp');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}
.quiz_campaign_wrapper {
  max-width: 73.5%;
  margin: auto;
  padding: min(4.2vw, 160px) 0 min(8.4vw, 320px);
  text-align: center;
  position: relative;
  z-index: 2;
}
.quiz_campaign_container h2 {
  margin: 0;
  margin-bottom: min(9vw, 344px);
}
.quiz_campaign_container h2 img {
  width: 62.2%;
}
.quiz_campaign_prize_box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1.7vw,64px);
}
.quiz_campaign_prize_text {
  text-align: right;
  color: #fff;
  font-size: min(0.85vw, 32px);
  margin: 0;
  margin-top: min(0.85vw, 32px);
}
.quiz_campaign_question_box {
  background: #fff;
  border-radius: 16px;
  padding: min(4.2vw, 160px) 0;
  margin-top: min(4.3vw, 164px);
}
.quiz_campaign_question_box h3 {
  margin: 0;
  margin-bottom: min(2.1vw, 80px);
}
.quiz_campaign_question_box h3 img {
  width: 76.4%;
}
.each_quiz_box {
  background: linear-gradient(90deg, rgba(1, 124, 255, 1) 0%, rgba(9, 71, 191, 1) 100%);
  width: 59.6%;
  margin: auto;
  border-radius: 16px;
  padding: min(1.3vw, 48px);
}
.each_quiz_box h4 {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(0.45vw, 16px);
}
.each_quiz_box h4 img {
  width: 14.3%;
}
.each_quiz_box h4 span {
  font-size: min(1.3vw, 48px);
  font-weight: bold;
  color: #fff;
}
.each_quiz_text_box {
  background: #fff;
  border-radius: 16px;
  padding: min(1.7vw, 64px);
  margin-top: min(1.3vw, 48px);
}
.each_quiz_text_box p {
  margin: 0;
  color: #1041A7;
  font-weight: bold;
  font-size: min(1.35vw, 52px);
  text-align: left;
}
.each_quiz_text_box img {
  display: block;
  margin: auto;
  width: 20.6%;
  margin-top: min(1.3vw, 48px);
}
.each_quiz_text_box a {
  color: #1041A7;
  font-size: min(1.3vw, 48px);
  font-weight: bold;
  margin-top: min(0.85vw, 32px);
  display: inline-block;
  text-underline-offset: min(0.42vw, 16px);
  text-align: left;
}

#quiz_title_img {
  filter: drop-shadow(4px 4px 14px black);
}

.answer_btn_box {
  display: inline-block;
  padding: min(0.55vw, 20px);
  background: #FF2D6D;
  border-radius: 16px;
  margin-top: min(1.3vw, 48px);
  margin-bottom: min(4.2vw, 160px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.answer_btn_box a {
  font-size: min(1.3vw, 48px);
  font-weight: bold;
  text-decoration: none;
  background: #FF155D;
  color: #fff;
  padding: min(1.5vw, 56px) min(6.15vw, 236px);
  border-radius: 16px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.43);
  display: block;
}

.coming_soon_box {
  margin-bottom: min(2.1vw, 80px);
}
.coming_soon_box h4 {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(0.45vw, 16px);
  margin-bottom: min(0.85vw, 32px);
}
.coming_soon_box h4 img {
  width: 8%;
}
.coming_soon_box h4 span {
  font-size: min(1.3vw, 48px);
  font-weight: bold;
  color: #848484;
}
.coming_soon_box .coming_soon {
  width: 15%;
}
.coming_soon_box + .coming_soon_box {
  margin-top: min(1.7vw, 64px);
}

.end_text {
  margin: 0;
  color: #848484;
  font-weight: bold;
  font-size: min(3.33vw, 128px);
  margin-top: min(4.17vw, 160px);
}

#modal_terms {
  all: unset;
  background: #1041A7;
  color: #fff;
  font-size: min(1.3vw, 48px);
  padding: min(0.85vw, 32px) min(3.34vw, 128px);
  border-radius: 16px;
  cursor: pointer;
  display: block;
  margin: auto;
  margin-top: min(4.2vw, 160px);
}
#modal_terms:hover {
  opacity: 0.8;
}

.pc_none {
  display: none;
}

@media (max-width: 1199px) {
  .pc_none {
    display: block;
  }
  .quiz_box {
    max-width: 89.3%;
    margin: auto;
  }
  .quiz_campaign_wrapper {
    max-width: 100%;
    padding-bottom: 0;
  }
  .quiz_campaign_container h2 {
    max-width: 89.3%;
    margin: auto;
    /* margin-top: min(18.7vw, 210px); */
    margin-top: min(42.8vw, 500px);
    margin-bottom: min(6.5vw, 344px);
  }
  .quiz_campaign_container h2 img {
    width: 100%;
  }
  .quiz_campaign_container::before {
    background-image: url('../images/contents/main/racer_back_sp.webp');
  }
  .quiz_campaign_prize_box {
    flex-direction: column;
    gap: min(6.5vw, 64px);
  }
  .quiz_campaign_prize_text {
    font-size: min(3.8vw, 32px);
    text-align: left;
    margin-top: min(4.3vw, 32px);
  }

  .quiz_campaign_question_box {
    border-radius: 0;
    padding: min(10.7vw, 80px) 0;
  }
  .quiz_campaign_question_box h3 {
    margin-bottom: min(10.7vw, 80px);
  }
  .quiz_campaign_question_box h3 img {
    width: 85.4%;
  }
  .each_quiz_box {
    width: 89.3%;
    padding: min(4.3vw, 32px) min(2.2vw, 16px);
  }
  .each_quiz_box h4 {
    flex-direction: column;
    gap: min(4.3vw, 32px);
  }
  .each_quiz_box h4 img {
    width: 29.6%;
  }
  .each_quiz_box h4 span {
    font-size: min(5.4vw, 40px);
    text-align: justify;
  }
  .each_quiz_text_box {
    border-radius: 8px;
    margin-top: min(4.5vw, 32px);
    padding: min(6vw, 48px) min(2.2vw, 16px);
  }
  .each_quiz_text_box p {
    font-size: min(5.4vw, 40px);
  }
  .each_quiz_text_box img {
    width: 39%;
    margin-top: min(6.5vw, 48px);
  }
  .each_quiz_text_box a {
    text-underline-offset: 4px;
    font-size: min(4.3vw, 32px);
    margin-top: min(4.3vw, 32px);
  }
  .answer_btn_box {
    width: 89.3%;
    padding: min(2.2vw, 16px);
    margin-top: min(4.3vw, 32px);
    margin-bottom: min(10.8vw, 80px);
  }
  .answer_btn_box a {
    font-size: min(5.4vw, 40px);
    border-radius: 8px;
  }
  .coming_soon_box {
    width: 89.3%;
    margin: auto;
    margin-bottom: min(2.1vw, 80px);
  }
  .coming_soon_box h4 {
    flex-direction: column;
    gap: min(4.3vw, 32px);
    margin-bottom: min(4.3vw, 32px);
  }
  .coming_soon_box h4 img {
    width: 25.6%;
  }
  .coming_soon_box h4 span {
    font-size: min(5.4vw, 40px);
    text-align: justify;
  }
  .coming_soon_box .coming_soon {
    width: 63%;
  }
  .coming_soon_box + .coming_soon_box {
    margin-top: min(10.8vw, 80px);
  }
  #modal_terms {
    font-size: min(4.3vw, 32px);
    padding: min(4.3vw, 32px) min(17.2vw, 128px);
    margin-top: min(10.8vw, 80px);
    border-radius: 8px;
  }

  .end_text {
    font-size: min(6.4vw, 77px);
  }
}

footer {
  background-color: #1041A7;
  padding: min(2.1vw, 80px) 0;
}
footer ul {
  padding: 0;
  list-style: none;
  /* width: 56.7%; */
  width: 27.5%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1.7vw, 64px);
}
footer ul li img {
  width: 100%;
}
footer p {
  text-align: center;
  color: #fff;
  margin: 0;
  margin-top: min(2.1vw, 80px);
  font-size: min(0.85vw, 32px);
}

#to_top_btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  width: min(4.5vw, 173px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
  z-index: 11;
}
#to_top_btn.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1199px) {
  footer {
    padding: min(10.8vw, 80px) 0;
  }
  footer ul {
    width: 89.3%;
    flex-wrap: wrap;
    gap: min(2.2vw, 16px);
  }
  footer ul li {
    width: 48%;
  }
  footer p {
    margin-top: min(4.5vw, 80px);
    font-size: min(3.5vw, 32px);
  }

  #to_top_btn {
    width: min(8.2vw, 60px);
    bottom: min(2.4vw, 20px);
    right: min(2.4vw, 20px);
  }
}