@charset "UTF-8";
/* =========================
   Foundation
========================= */
.sp-hidden {
  display: block;
}
@media screen and (max-width: 999px) {
  .sp-hidden {
    display: none;
  }
}

.pc-hidden {
  display: none;
}
@media screen and (max-width: 999px) {
  .pc-hidden {
    display: block;
  }
}

/* =========================
   Layout
========================= */
/* =========================
   Foundation
========================= */
/* =========================
   Component
========================= */
#header .hd-searchForm #srch_r input[type="radio"]:checked:after {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: #ffdb00;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 4px solid white;
}

body {
  background: #000;
}

.pageTitle-area {
  display: none;
}

.page-id-17230 #header {
  max-width: 100% !important;
}

.page-id-17230 .hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  background-size: contain !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.page-id-17230 .play-place {
  background: #fff !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-bottom: 100px;
}

.page-id-17230 .lowerPage-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.part-page h2 {
  font-size: 1.5rem;
  line-height: 3.5rem;
}

#rewinder {
  display: none;
  z-index: 1300;
  position: fixed;
  width: 95px !important;
  height: 95px !important;
  bottom: 35px;
  right: 27px !important;
}
#rewinder :hover {
  opacity: 0.5;
}
@media screen and (max-width: 999px) {
  #rewinder {
    width: 52px !important;
    height: 52px !important;
    bottom: 64px !important;
    right: 19px !important;
  }
}

/* =========================
   hero
========================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1240/460;
  background-image: url("../img/hero_pc.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (max-width: 999px) {
  .hero {
    background-image: url("../img/hero_sp.jpg");
    aspect-ratio: 1/1;
  }
}

.hero__copy {
  position: absolute;
  top: 8%;
  left: 3.5%;
  z-index: 0;
}
@media screen and (max-width: 999px) {
  .hero__copy {
    top: 4%;
    left: 5.5%;
  }
}

.hero__main {
  margin: 0;
  display: block;
}

.hero__main-top {
  display: block;
  font-size: clamp(36px, 5.5vw, 110px);
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .hero__main-top {
    font-size: clamp(30px, 7.81vw, 50px);
  }
}

.hero__main-red {
  display: block;
  font-size: clamp(36px, 5vw, 92px);
  font-weight: 900;
  line-height: 1.5;
  color: #e60012;
}
@media screen and (max-width: 999px) {
  .hero__main-red {
    display: inline;
    font-size: clamp(30px, 9.06vw, 58px);
  }
}

.hero__sub {
  margin-top: 24px;
}
.hero__sub span {
  display: block;
  font-size: clamp(16px, 1.66vw, 50px);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .hero__sub span {
    margin-top: 17px;
    line-height: 0.5;
    font-size: clamp(12px, 3.59vw, 23px);
  }
}

/* =========================
   cta-button
========================= */
.cta-button {
  position: fixed;
  right: 139px;
  bottom: 24px;
  z-index: 1000;
}
@media screen and (max-width: 999px) {
  .cta-button {
    bottom: 0;
    width: 100%;
    right: 0;
  }
}

.cta-button__img {
  display: block;
  width: 402px;
  height: auto;
}
@media screen and (max-width: 999px) {
  .cta-button__img {
    width: 100%;
  }
}

/* =========================
   feature
========================= */
.feature {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 40px;
}
@media screen and (max-width: 999px) {
  .feature {
    margin-top: 0;
  }
}

.feature__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 共通 */
.feature__item {
  position: absolute;
  top: 31%;
}

.feature__title {
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.2;
  color: #fedc01;
}
@media screen and (max-width: 999px) {
  .feature__title {
    font-size: clamp(18px, 4.8vw, 22px);
  }
}

.feature__title-mid {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  color: #fedc01;
}
@media screen and (max-width: 999px) {
  .feature__title-mid {
    font-size: 18px;
  }
}

@media screen and (max-width: 999px) {
  .feature__title-sp {
    font-size: 18px;
  }
}

.feature__title span {
  display: block;
}

.feature__text {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .feature__text {
    font-size: 10px;
  }
}

.feature__text-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 5px;
  color: #fff;
}

.feature__text span {
  display: block;
}

/* 個別座標 */
.feature__item--01 {
  top: 32%;
  left: 23px;
}
@media screen and (max-width: 999px) {
  .feature__item--01 {
    top: 26%;
    left: 4%;
  }
}

.feature__item--02 {
  left: 270px;
}
@media screen and (max-width: 999px) {
  .feature__item--02 {
    left: 54%;
    top: 22%;
  }
}

.feature__item--03 {
  display: inline-block;
  left: 516px;
}
@media screen and (max-width: 999px) {
  .feature__item--03 {
    left: 3%;
    top: 63%;
  }
}

.feature__item--04 {
  top: 159px;
  left: 765px;
}
@media screen and (max-width: 999px) {
  .feature__item--04 {
    left: 53%;
    top: 63%;
  }
}

.feature__bottom {
  width: 1000px;
  position: absolute;
  top: 62%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (max-width: 999px) {
  .feature__bottom {
    top: 87%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
  }
}

.feature__main-message {
  font-size: 75px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: 0.5px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
@media screen and (max-width: 999px) {
  .feature__main-message {
    font-size: clamp(25px, 4vw, 61px);
  }
}

.feature__sub-message {
  font-size: 51px;
  font-weight: 900;
  color: #ce2224;
  text-align: center;
  margin: 34px 0 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
@media screen and (max-width: 999px) {
  .feature__sub-message {
    font-size: clamp(20px, 3vw, 40px);
    margin: 15px 0 0 !important;
  }
}

/* =========================
    movie
========================= */
.movie {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .movie {
    margin-top: 30px;
  }
}

.movie__video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.movie__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 96px;
  height: 96px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}

.movie.is-playing .movie__play {
  display: none;
}

/* =========================
   realism
========================= */
.realism {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.realism__image {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 999px) {
  .realism__image {
    max-width: 100%;
    height: auto;
  }
}

.realism__lead {
  display: block;
  position: absolute;
  top: 28px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  width: 1000px;
}
@media screen and (max-width: 999px) {
  .realism__lead {
    font-size: clamp(14px, 2vw, 26px);
  }
}

.realism__lead span {
  display: block;
}

.realism__lead span:nth-child(2) {
  font-size: 61px;
  color: #fedc01;
  font-weight: 900;
}
@media screen and (max-width: 999px) {
  .realism__lead span:nth-child(2) {
    font-size: clamp(24px, 3vw, 48px);
  }
}

.realism__card-text {
  position: absolute;
  z-index: 1;
  top: 12.5%;
}

.realism__card-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  color: #fedc01;
  text-align: center;
}
@media screen and (max-width: 999px) {
  .realism__card-title {
    display: inline-block;
    font-size: 18px;
  }
}

.realism__card-title span:nth-child(2) {
  font-size: 34px;
  color: #fedc01;
}
@media screen and (max-width: 999px) {
  .realism__card-title span:nth-child(2) {
    font-size: 18px;
  }
}

.realism__card-title span {
  display: block;
}
@media screen and (max-width: 999px) {
  .realism__card-title span {
    display: inline-block;
  }
}

.realism__card-desc {
  margin: 214px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 999px) {
  .realism__card-desc {
    margin: 0;
    margin-top: 5px;
    text-align: left;
    font-size: 12px;
  }
}

.realism__card-desc span {
  display: block;
}

.realism__card-text--01 {
  left: 31px;
}
@media screen and (max-width: 999px) {
  .realism__card-text--01 {
    display: inline-block;
    top: 10%;
    left: 4%;
    text-align: left;
  }
}

.realism__card-text--02 {
  left: 393px;
}
@media screen and (max-width: 999px) {
  .realism__card-text--02 {
    display: inline-block;
    top: 19.5%;
    left: 4%;
    text-align: left;
  }
}

.realism__card-text--03 {
  left: 729px;
}
@media screen and (max-width: 999px) {
  .realism__card-text--03 {
    display: inline-block;
    top: 28.5%;
    left: 4%;
    text-align: left;
  }
}

.realism__review {
  position: absolute;
  top: 1224px;
  left: 50%;
  width: 1000px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (max-width: 999px) {
  .realism__review {
    top: 79%;
    width: 100%;
  }
}

.realism__review-text {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.7;
  color: #000;
  text-align: center;
}
@media screen and (max-width: 999px) {
  .realism__review-text {
    font-size: 14px;
  }
}

.realism__review-text span {
  display: block;
}

.realism__review-text span:nth-child(2) {
  color: #be8b22;
}

.realism__main {
  position: absolute;
  top: 38%;
  left: 4%;
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.7;
  text-align: left;
}
@media screen and (max-width: 999px) {
  .realism__main {
    text-align: center;
    top: 36%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    font-size: 22px;
  }
}

.realism__main span:nth-child(2) {
  color: #fedc01;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.7;
}
@media screen and (max-width: 999px) {
  .realism__main span:nth-child(2) {
    display: inline;
    font-size: 22px;
  }
}

.realism__main span:nth-child(3) {
  color: #fedc01;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.7;
}
@media screen and (max-width: 999px) {
  .realism__main span:nth-child(3) {
    display: inline;
    font-size: 22px;
  }
}

.realism__main-text {
  margin: 0;
}
.realism__main-text span {
  display: block;
}
@media screen and (max-width: 999px) {
  .realism__main-text span {
    display: block;
  }
  .realism__main-text span:nth-child(2),
  .realism__main-text span:nth-child(3) {
    display: inline;
  }
}

.realism__sub {
  position: absolute;
  top: 56%;
  left: 15%;
}
.realism__sub span {
  display: block;
  color: #fedc01;
  font-size: 37px;
  font-weight: 900;
  line-height: 1.7;
  color: #be8b22;
}
@media screen and (max-width: 999px) {
  .realism__sub span {
    font-size: 14px;
  }
}
@media screen and (max-width: 999px) {
  .realism__sub {
    top: 64.5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
  }
}

.realism__bottom-copy {
  position: absolute;
  top: 1430px;
  left: 50%;
  margin: 0;
  font-size: 50px;
  font-weight: 900;
  line-height: 1.4;
  color: #000;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1000px;
}
@media screen and (max-width: 999px) {
  .realism__bottom-copy {
    top: 89%;
    font-size: 20px;
  }
}

.color-red {
  color: #ce2224;
  font-size: 67px;
  font-weight: 900;
}
@media screen and (max-width: 999px) {
  .color-red {
    font-size: 24px;
  }
}

.realism__control {
  position: absolute;
  display: block;
  text-align: center;
  width: 100%;
  z-index: 2;
  top: 90%;
}
@media screen and (max-width: 999px) {
  .realism__control {
    max-width: 800px;
    top: 95%;
  }
}

.realism__control__text {
  position: absolute;
  display: block;
  text-align: center;
  width: 100%;
  z-index: 2;
  top: 10%;
}
.realism__control__text span {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.5;
  color: #fedc01;
}
@media screen and (max-width: 999px) {
  .realism__control__text span {
    font-size: 14px;
  }
}
.realism__control__text span:nth-child(2) {
  display: block;
  color: #fff;
}

/* =========================
   drift-movie
========================= */
.drift-movie {
  position: relative;
  margin-top: 15px;
}

.drift-movie__video {
  width: 1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .drift-movie__video {
    width: 100%;
  }
}

.drift-movie__video--pc {
  display: block;
}

.drift-movie__video--sp {
  display: none;
}

.drift-movie__play {
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 96px;
  height: 96px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

@media screen and (max-width: 999px) {
  .drift-movie__video--pc {
    display: none;
  }
  .drift-movie__video--sp {
    display: block;
  }
  .drift-movie__play {
    width: 72px;
    height: 72px;
    font-size: 32px;
  }
}
.drift-movie__text {
  margin-top: 70px;
}
@media screen and (max-width: 999px) {
  .drift-movie__text {
    margin-top: 45px;
  }
}

.drift-movie__main-text {
  text-align: center;
}

.drift-movie__main-text span {
  display: block;
  font-size: 67px;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .drift-movie__main-text span {
    font-size: 24px;
  }
}

/* =========================
   drift-hero
========================= */
.drift-hero {
  position: relative;
  margin-top: 56px;
}
@media screen and (max-width: 999px) {
  .drift-hero {
    margin-top: 43px;
  }
}

.drift-hero__bg {
  width: 1000px;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .drift-hero__bg {
    width: 100%;
  }
}

.drift-hero__title {
  position: absolute;
  top: 45px;
  left: calc(50% - 458px);
  text-align: left;
  line-height: 1.3;
}
@media screen and (max-width: 999px) {
  .drift-hero__title {
    top: 21%;
    left: 3%;
  }
}

.drift-hero__title-text span {
  margin: 0;
  font-size: 50px;
  font-weight: 900;
}
@media screen and (max-width: 999px) {
  .drift-hero__title-text span {
    font-size: 20px;
  }
}

.drift-hero__title-text span:nth-child(2) {
  display: block;
  font-size: 66px;
  color: #ce2224;
  font-weight: 900;
}
@media screen and (max-width: 999px) {
  .drift-hero__title-text span:nth-child(2) {
    font-size: 26px;
  }
}

.drift-hero__heading {
  position: absolute;
  bottom: 18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}
.drift-hero__heading span {
  position: relative;
  font-size: 33px;
  font-weight: 700;
  color: #000;
  padding-inline: 32px;
}
@media screen and (max-width: 999px) {
  .drift-hero__heading span {
    font-size: 15px;
  }
}

/* =========================
   paint-body
========================= */
.paint-body {
  position: relative;
}

.paint-body__bg {
  width: 1000px;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .paint-body__bg {
    width: 100%;
  }
}

.paint-body__title {
  position: absolute;
  top: 67px;
  left: calc(50% - 409px);
}
@media screen and (max-width: 999px) {
  .paint-body__title {
    top: 7%;
    left: 8%;
    letter-spacing: -0.5px;
  }
}

.paint-body__title-text {
  color: #fff;
  font-size: 60px;
  font-weight: 900;
  line-height: 1.2;
}
.paint-body__title-text span {
  color: #fedc01;
}
@media screen and (max-width: 999px) {
  .paint-body__title-text {
    font-size: 30px;
  }
}

.text-yellow {
  color: #fedc01;
}

.paint-body__description {
  position: absolute;
  top: 289px;
  left: calc(50% - 469px);
}
@media screen and (max-width: 999px) {
  .paint-body__description {
    top: 29%;
    left: 3%;
  }
}

.paint-body__description-text span {
  display: block;
  font-size: 27px;
  font-weight: 700;
  line-height: 2;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .paint-body__description-text span {
    font-size: 12px;
  }
}

.paint-body__description-text span:nth-child(2) {
  font-size: 27px;
  color: #ce2224;
}
@media screen and (max-width: 999px) {
  .paint-body__description-text span:nth-child(2) {
    font-size: 12px;
  }
}

.paint-body__description-text span:nth-child(3) {
  font-size: 27px;
  color: #ce2224;
}
@media screen and (max-width: 999px) {
  .paint-body__description-text span:nth-child(3) {
    font-size: 12px;
  }
}

/* =========================
   chassis
========================= */
.chassis {
  position: relative;
}

.chassis__bg {
  width: 1000px;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 999px) {
  .chassis__bg {
    width: 100%;
  }
}

.chassis__title {
  position: absolute;
  top: 75px;
  left: calc(50% - 400px);
}
@media screen and (max-width: 999px) {
  .chassis__title {
    top: 1%;
    left: 8%;
  }
}

.chassis__title-text {
  color: #fff;
  font-size: 57px;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 999px) {
  .chassis__title-text {
    font-size: 30px;
  }
}

.chassis__text-mid {
  color: #fff;
  font-size: 45px;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 999px) {
  .chassis__text-mid {
    font-size: 20px;
  }
}

.chassis__text-yellow {
  color: #fedc01;
  font-size: 45px;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 999px) {
  .chassis__text-yellow {
    font-size: 20px;
  }
}

.chassis__lead-text {
  position: absolute;
  top: 601px;
  left: calc(50% - 475px);
  color: #000;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.7;
}
@media screen and (max-width: 999px) {
  .chassis__lead-text {
    font-size: 12px;
    top: 19%;
    left: 2%;
  }
}

.chassis__description-text {
  position: absolute;
}
.chassis__description-text span {
  color: #fedc01;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 999px) {
  .chassis__description-text span {
    font-size: 11px;
  }
}

.chassis__description-text--01 {
  top: 970px;
  left: calc(50% - 406px);
}
@media screen and (max-width: 999px) {
  .chassis__description-text--01 {
    top: 33%;
    left: 13%;
    line-height: 1;
  }
}

.chassis__description-text--02 {
  top: 970px;
  left: calc(50% - 76px);
}
@media screen and (max-width: 999px) {
  .chassis__description-text--02 {
    top: 33%;
    left: 62%;
    line-height: 1;
  }
}

.chassis__description-text--03 {
  top: 970px;
  left: calc(50% + 256px);
}
@media screen and (max-width: 999px) {
  .chassis__description-text--03 {
    top: 53.7%;
    left: 13%;
    line-height: 1;
  }
}

.chassis__description-text--04 {
  top: 1398px;
  left: calc(50% - 405px);
}
@media screen and (max-width: 999px) {
  .chassis__description-text--04 {
    top: 53.8%;
    left: 62%;
    line-height: 1;
  }
}

.chassis__description-text--05 {
  top: 1411px;
  left: calc(50% - 75px);
}
@media screen and (max-width: 999px) {
  .chassis__description-text--05 {
    top: 75%;
    left: 13%;
    line-height: 1;
  }
}

.chassis__description-text--06 {
  top: 1411px;
  left: calc(50% + 251px);
}
@media screen and (max-width: 999px) {
  .chassis__description-text--06 {
    top: 75%;
    left: 62%;
    line-height: 1;
  }
}

/* =========================
   power-system
========================= */
.power-system {
  position: relative;
}

.power-system__bg {
  display: block;
  width: 1000px;
  margin: 0 auto;
  height: auto;
}
@media screen and (max-width: 999px) {
  .power-system__bg {
    width: 100%;
  }
}

.power-system__title {
  position: absolute;
  top: 7%;
  left: calc(50% - 416px);
  margin: 0;
  line-height: 1.4;
}
.power-system__title p {
  display: inline-block;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .power-system__title p {
    font-size: 20px;
    line-height: normal;
  }
}
.power-system__title p span {
  color: #fedc01;
  font-size: 54px;
}
@media screen and (max-width: 999px) {
  .power-system__title p span {
    font-size: 20px;
    line-height: normal;
  }
}
@media screen and (max-width: 999px) {
  .power-system__title {
    top: 5%;
    left: 7%;
  }
}

.power-system__title-text-mid {
  font-size: 54px;
  color: #fff !important;
}
@media screen and (max-width: 999px) {
  .power-system__title-text-mid {
    font-size: 20px;
  }
}

.power-system__text {
  position: absolute;
  top: 42%;
  left: calc(50% - 470px);
  margin: 0;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.8;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .power-system__text {
    font-size: 12px;
    top: 38%;
    left: 2%;
  }
}

/* =========================
   transmitter
========================= */
.transmitter {
  position: relative;
}

.transmitter__bg {
  display: block;
  width: 1000px;
  margin: 0 auto;
  height: auto;
}
@media screen and (max-width: 999px) {
  .transmitter__bg {
    width: 100%;
  }
}

.transmitter__title {
  position: absolute;
  top: 46px;
  left: calc(50% - 418px);
  margin: 0;
  line-height: 1.15;
}
.transmitter__title span {
  display: block;
  font-weight: 900;
}
@media screen and (max-width: 999px) {
  .transmitter__title span {
    margin-top: -6px;
  }
}
.transmitter__title span:first-child {
  color: #d91f26;
  font-size: 47px;
}
@media screen and (max-width: 999px) {
  .transmitter__title span:first-child {
    font-size: 20px;
    line-height: normal;
  }
}
.transmitter__title span:last-child {
  color: #000;
  font-size: 59px;
}
@media screen and (max-width: 999px) {
  .transmitter__title span:last-child {
    font-size: 30px;
    line-height: normal;
  }
}
@media screen and (max-width: 999px) {
  .transmitter__title {
    top: 3%;
    left: 7%;
  }
}

.transmitter__text {
  position: absolute;
  top: 249px;
  left: calc(50% - 469px);
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.7;
  color: #111;
}
@media screen and (max-width: 999px) {
  .transmitter__text {
    font-size: 12px;
    top: 38%;
    left: 1%;
    font-weight: 500;
  }
}

/* =========================
   drift-beginner
========================= */
.drift-beginner {
  position: relative;
}

.drift-beginner__bg {
  display: block;
  width: 1000px;
  margin: 0 auto;
  height: auto;
}
@media screen and (max-width: 999px) {
  .drift-beginner__bg {
    width: 100%;
  }
}

.drift-beginner__title {
  position: absolute;
  top: 105px;
  left: calc(50% - 452px);
  margin: 0;
  font-size: 67px !important;
  font-weight: 900;
  line-height: 1.15 !important;
  color: #fff;
}
.drift-beginner__title span {
  display: block;
}
@media screen and (max-width: 999px) {
  .drift-beginner__title {
    font-size: 26px !important;
    top: 3%;
    left: 5%;
    line-height: 1.5 !important;
  }
}

.drift-beginner__text {
  position: absolute;
  top: 346px;
  left: calc(50% - 455px);
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.8;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .drift-beginner__text {
    font-size: 14px;
    top: 27%;
    left: 22%;
  }
}

.first-step {
  width: 1000px;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 999px) {
  .first-step {
    width: 100%;
  }
}

.first-step__bg {
  width: 1000px;
}
@media screen and (max-width: 999px) {
  .first-step__bg {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* =========================
   rz34-hero
========================= */
.rz34-hero {
  position: relative;
  margin-top: -17px;
}
@media screen and (max-width: 999px) {
  .rz34-hero {
    margin-top: -7px;
  }
}

.rz34-hero__bg {
  display: block;
  width: 1000px;
  margin: 0 auto;
  height: auto;
}
@media screen and (max-width: 999px) {
  .rz34-hero__bg {
    width: 100%;
  }
}

.rz34-hero__title {
  position: absolute;
  top: 32px;
  left: calc(50% - 438px);
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -2px;
}
.rz34-hero__title span {
  display: block;
}
.rz34-hero__title span:first-child {
  font-size: 53px;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .rz34-hero__title span:first-child {
    top: 2%;
    font-size: 20px;
  }
}
.rz34-hero__title span:last-child {
  margin-top: 27px;
  font-size: 70px;
  color: #ce2224;
}
@media screen and (max-width: 999px) {
  .rz34-hero__title span:last-child {
    font-size: 30px;
    margin-top: -24px;
  }
}
@media screen and (max-width: 999px) {
  .rz34-hero__title {
    top: 0%;
    left: 0%;
  }
}

.rz34-hero__name {
  position: absolute;
  top: 266px;
  left: calc(50% - 429px);
}
.rz34-hero__name p {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -2px;
  color: #fff;
}
.rz34-hero__name p:nth-child(1) {
  font-size: 24px;
  font-weight: 500;
}
@media screen and (max-width: 999px) {
  .rz34-hero__name p:nth-child(1) {
    font-size: 14px;
    font-weight: normal;
  }
}
.rz34-hero__name p:nth-child(2) {
  font-size: 22px;
  font-weight: 500;
}
@media screen and (max-width: 999px) {
  .rz34-hero__name p:nth-child(2) {
    font-size: 14px;
    font-weight: normal;
  }
}
.rz34-hero__name p:nth-child(3) {
  margin-top: 2px;
  font-size: 47px;
  font-weight: 900;
  letter-spacing: -2px;
}
@media screen and (max-width: 999px) {
  .rz34-hero__name p:nth-child(3) {
    position: absolute;
    font-size: 24px;
    top: -30%;
    left: 165%;
    width: 210px;
    letter-spacing: 0;
    margin-top: -1px;
  }
}
@media screen and (max-width: 999px) {
  .rz34-hero__name {
    top: 24%;
    left: 4%;
  }
}

.rz34-hero__text {
  position: absolute;
  top: 462px;
  left: calc(50% - 431px);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .rz34-hero__text {
    font-size: 12px;
    top: 28%;
    left: 4%;
  }
}

.rz34-hero__card--01 {
  position: absolute;
  top: 59%;
  left: calc(50% - 476px);
}
@media screen and (max-width: 999px) {
  .rz34-hero__card--01 {
    top: 44%;
    left: 6.5%;
  }
}

.rz34-hero__card--02 {
  position: absolute;
  top: 59%;
  left: calc(50% - 231px);
}
@media screen and (max-width: 999px) {
  .rz34-hero__card--02 {
    top: 44%;
    left: 54.5%;
  }
}

.rz34-hero__card--03 {
  position: absolute;
  top: 57%;
  left: calc(50% + 15px);
}
@media screen and (max-width: 999px) {
  .rz34-hero__card--03 {
    top: 61%;
    left: 5.5%;
    font-size: 18px;
  }
}

.rz34-hero-text-mid {
  font-size: 16px;
}
@media screen and (max-width: 999px) {
  .rz34-hero-text-mid {
    font-size: 18px;
  }
}

@media screen and (max-width: 999px) {
  .sp-text-mid {
    font-size: 18px;
  }
}

.rz34-hero__card--04 {
  position: absolute;
  top: 57%;
  left: calc(50% + 264px);
}
@media screen and (max-width: 999px) {
  .rz34-hero__card--04 {
    top: 61%;
    left: 54.5%;
  }
}

.rz34-hero__card-title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
  color: #fedc01;
}
@media screen and (max-width: 999px) {
  .rz34-hero__card-title {
    font-size: 18px;
  }
}

.rz34-hero__card-text {
  width: 220px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: left;
}
@media screen and (max-width: 999px) {
  .rz34-hero__card-text {
    width: 162px;
    font-size: 10px;
  }
}

/* =========================
   cta
========================= */
.cta {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 999px) {
  .cta {
    width: 100%;
  }
}

.cta__link {
  display: block;
  text-decoration: none;
}
.cta__link img {
  display: block;
  width: 100%;
  height: auto;
}

.cta__catch {
  font-weight: 900;
  line-height: 1.3;
  color: #000;
}
.cta__catch span {
  display: inline;
}
.cta__catch span:first-child {
  font-size: 50px;
  position: absolute;
  top: 14%;
  left: calc(50% - 454px);
}
@media screen and (max-width: 999px) {
  .cta__catch span:first-child {
    top: 9%;
    font-size: 26px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
  }
}
.cta__catch span:last-child {
  font-size: 33px;
  position: absolute;
  top: 21%;
  left: calc(50% + 77px);
}
@media screen and (max-width: 999px) {
  .cta__catch span:last-child {
    font-size: 16px;
    top: 38%;
    left: 49%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
  }
}
@media screen and (max-width: 999px) {
  .cta__catch {
    text-align: center;
  }
}

.select {
  width: 1000px;
  margin: 0 auto;
  margin-top: 37px;
}
@media screen and (max-width: 999px) {
  .select {
    width: 100%;
    margin-top: 27px;
  }
}

.select__bg {
  width: 100%;
}
@media screen and (max-width: 999px) {
  .select__bg {
    width: 100%;
  }
}

/* =========================
   QA
========================= */
.faq {
  background: #000;
  padding-top: 41px;
  padding-bottom: 119px;
  color: #fff;
  width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .faq {
    width: 100%;
    padding-top: 23px;
    padding-bottom: 64px;
  }
}

.faq__inner {
  max-width: 1354px;
}
@media screen and (max-width: 999px) {
  .faq__inner {
    padding-inline: 3.2%;
  }
}

.faq__label {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 999px) {
  .faq__label {
    font-size: 18px;
  }
}

.faq__title {
  margin-top: 5px;
  font-size: 36px !important;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
@media screen and (max-width: 999px) {
  .faq__title {
    font-size: 18px !important;
    line-height: normal !important;
  }
}

.faq__list {
  display: grid;
  gap: 16px;
  margin-top: 57px;
  width: 1000px;
}
@media screen and (max-width: 999px) {
  .faq__list {
    margin-top: 7px;
    width: 100%;
    gap: 14px;
  }
}

.faq__item {
  background: transparent;
}

.faq__question {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 60px;
  padding: 0 72px 0 28px;
  background: #fedc01;
  color: #000;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
@media screen and (max-width: 999px) {
  .faq__question {
    font-size: 10px;
    font-weight: 500;
    padding: 3px 35px 3px 16px;
    min-height: 41px;
  }
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::before,
.faq__question::after {
  content: "";
  position: absolute;
  right: 77px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: #000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 999px) {
  .faq__question::before,
  .faq__question::after {
    width: 7px;
    right: 24px;
  }
}

.faq__question::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
}

.faq__item[open] .faq__question::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
}

.faq__answer {
  padding-top: 17px;
  color: #fff;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.8;
  -webkit-transition:
    height 0.3s ease,
    opacity 0.3s ease,
    padding-top 0.3s ease;
  transition:
    height 0.3s ease,
    opacity 0.3s ease,
    padding-top 0.3s ease;
}
@media screen and (max-width: 999px) {
  .faq__answer {
    font-size: 10px;
    font-weight: 400;
  }
}

.faq__item.is-open .faq__answer {
  opacity: 1;
  padding-top: 17px;
}

/* =========================
   play-place
========================= */
.play-place {
  position: relative;
  background: #fff;
  padding-bottom: 33px;
}

.play-place__bg {
  width: 1000px;
  display: block;
  margin: 0 auto;
  height: auto;
}
@media screen and (max-width: 999px) {
  .play-place__bg {
    width: 100%;
  }
}

.play-place__title {
  position: absolute;
  top: 2.5%;
  left: calc(50% - 474px);
}
.play-place__title p {
  font-size: 65px;
  font-weight: 900;
  line-height: 1.2;
  color: #000;
}
@media screen and (max-width: 999px) {
  .play-place__title p {
    font-size: 26px;
  }
}
.play-place__title p span {
  color: #ce2224;
}
@media screen and (max-width: 999px) {
  .play-place__title {
    top: 1.5%;
    left: 2%;
  }
}

.play-place__title-text {
  position: absolute;
  top: 6.5%;
  left: calc(50% - 466px);
}
.play-place__title-text span {
  display: block;
  font-size: 25px;
  font-weight: 500;
  margin-top: 11px;
}
@media screen and (max-width: 999px) {
  .play-place__title-text span {
    font-size: 10px;
    margin-top: 0;
  }
}
@media screen and (max-width: 999px) {
  .play-place__title-text {
    top: 5%;
    left: 4%;
    line-height: 1.5;
  }
}

.play-place__description-title {
  position: absolute;
}
.play-place__description-title span {
  font-size: 31px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}
@media screen and (max-width: 999px) {
  .play-place__description-title span {
    font-size: 18px;
    display: inline-block;
  }
}

.play-place__description-title--01 {
  top: 353px;
  left: calc(50% - 314px);
}
@media screen and (max-width: 999px) {
  .play-place__description-title--01 {
    top: 10.6%;
    left: 16%;
  }
}

.play-place__description-title--02 {
  top: 353px;
  left: calc(50% + 170px);
}
@media screen and (max-width: 999px) {
  .play-place__description-title--02 {
    top: 10.6%;
    left: 65%;
  }
}

.play-place__description-title--03 {
  top: 955px;
  left: calc(50% - 314px);
}
@media screen and (max-width: 999px) {
  .play-place__description-title--03 {
    top: 31.5%;
    left: 14%;
  }
}

.play-place__description-title--04 {
  top: 955px;
  left: calc(50% + 150px);
}
@media screen and (max-width: 999px) {
  .play-place__description-title--04 {
    top: 31.5%;
    left: 65%;
  }
}

@media screen and (max-width: 999px) {
  .play-place__description-small {
    display: inline;
    font-size: 10px !important;
  }
}

.play-place__description-text {
  position: absolute;
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 2;
  color: #000;
}
.play-place__description-text p {
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 2;
  color: #000;
}
@media screen and (max-width: 999px) {
  .play-place__description-text p {
    font-size: 10px;
    font-weight: 900;
  }
}

.play-place__description-text--01 {
  top: 23%;
  left: calc(50% - 438px);
}
@media screen and (max-width: 999px) {
  .play-place__description-text--01 {
    font-size: 10px;
    font-weight: 900;
    min-width: 160px;
    top: 20.6%;
    left: 4%;
    line-height: 1.5;
  }
}

.play-place__description-text--02 {
  top: 23%;
  left: calc(50% + 37px);
}
@media screen and (max-width: 999px) {
  .play-place__description-text--02 {
    font-size: 10px;
    font-weight: 900;
    top: 20.6%;
    left: 56%;
    line-height: 1.5;
  }
}

.play-place__description-text--03 {
  top: 44%;
  left: calc(50% - 441px);
}
@media screen and (max-width: 999px) {
  .play-place__description-text--03 {
    font-size: 10px;
    font-weight: 900;
    min-width: 160px;
    top: 41.6%;
    left: 4%;
    line-height: 1.5;
  }
}

.play-place__description-text--04 {
  top: 44%;
  left: calc(50% + 49px);
}
@media screen and (max-width: 999px) {
  .play-place__description-text--04 {
    font-size: 10px;
    font-weight: 900;
    top: 41.6%;
    left: 56%;
    line-height: 1.5;
  }
}

@media screen and (max-width: 999px) {
  .ng-place__description {
    position: absolute;
    top: 61.5%;
    left: 0;
    width: 100%;
    height: 23%;
  }
}

.ng-place__description-title {
  position: absolute;
  top: 1718px;
  left: calc(50% - 194px);
  display: block;
  font-size: 42px;
  font-weight: 900;
  color: #ce2224;
}
.ng-place__description-title span {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  color: #000;
  margin-top: 10px;
}
@media screen and (max-width: 999px) {
  .ng-place__description-title span {
    font-size: 12px;
    margin-top: 0;
  }
}
@media screen and (max-width: 999px) {
  .ng-place__description-title {
    top: -18.5%;
    left: 25%;
    font-size: 20px;
  }
}

.ng-place__description-text {
  font-size: 26px;
  font-weight: 500;
}
@media screen and (max-width: 999px) {
  .ng-place__description-text {
    font-size: 10px;
  }
}

.ng-place__description-text--01 {
  position: absolute;
  top: 2029px;
  left: calc(50% - 438px);
}
@media screen and (max-width: 999px) {
  .ng-place__description-text--01 {
    top: 26%;
    left: 6%;
  }
}

.ng-place__description-text--02 {
  position: absolute;
  top: 2029px;
  left: calc(50% - 70px);
}
@media screen and (max-width: 999px) {
  .ng-place__description-text--02 {
    top: 26%;
    left: 42%;
  }
}

.ng-place__description-text--03 {
  position: absolute;
  top: 2029px;
  left: calc(50% + 182px);
}
@media screen and (max-width: 999px) {
  .ng-place__description-text--03 {
    top: 26%;
    left: 68%;
  }
}