/* 01 */
.stage-1,
.stage-2,
.stage-3,
.stage-4,
.stage-5,
.stage-6,
.stage-7 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.stage-1::before {
  content: "";
  display: block;
  padding-top: 126.935%;
  /* ドキュメントの縦横比 */
  background-color: #fccf00;
}

.baku-1-1 {
  position: absolute;
  width: 41.1%;
  top: 53.4%;
  left: 0.7%;
}

.baku-1-2 {
  position: absolute;
  width: 40%;
  top: 36%;
  left: 61.6%;
}

.bg-1 {
  position: absolute;
  width: 100.0%;
  top: -1.4%;
  left: 0.0%;
}

.btn-1 {
  position: absolute;
  width: 95.5%;
  top: 81.2%;
  left: 0.0%;
}

.c-1-2 {
  position: absolute;
  width: 53.2%;
  top: 22.1%;
  left: 30.5%;
}

.c-1-3 {
  position: absolute;
  width: 40.0%;
  top: 2.0%;
  left: 60.0%;
}

.catch-1 {
  position: absolute;
  width: 83.7%;
  top: 59.4%;
  left: 8.6%;
}

.goods-1 {
  position: absolute;
  width: 35%;
  top: 38%;
  left: 64%;
}

.lead-1 {
  position: absolute;
  width: 55.3%;
  top: 32%;
  left: 5.4%;
}

.title-1 {
  position: absolute;
  width: 69.9%;
  top: 2%;
  left: 1.1%;
}

/* 02 */
.stage-2::before {
  content: "";
  display: block;
  padding-top: 128.151%;
  /* ドキュメントの縦横比 */
  background-color: #25c19f;
}

.baku-2 {
  position: absolute;
  width: 59.0%;
  top: 33.0%;
  left: 21.6%;
}

.bg-2 {
  position: absolute;
  width: 100.0%;
  top: 0.0%;
  left: 0.0%;
}

.btn-2 {
  position: absolute;
  width: 95.8%;
  top: 81.4%;
  left: 0.0%;
}

.c-2-1 {
  position: absolute;
  width: 34.5%;
  top: 41.4%;
  left: 65.5%;
}

.c-2-2 {
  position: absolute;
  width: 42.3%;
  top: 41.1%;
  left: 0.0%;
}

.catch-2 {
  position: absolute;
  width: 40.2%;
  top: 45.1%;
  left: 29.9%;
}

.lead-2 {
  position: absolute;
  width: 85.9%;
  top: 29.8%;
  left: 5.3%;
}

.title-2 {
  position: absolute;
  width: 94.9%;
  top: 0.6%;
  left: 2.6%;
}

/* 03 */
.stage-3::before {
  content: "";
  display: block;
  padding-top: 125.912%;
  background-color: #e73c8f;
}

.baku-3 {
  position: absolute;
  width: 44.5%;
  top: 47.2%;
  left: 0.8%;
}

.bg-3 {
  position: absolute;
  width: 100.0%;
  top: 0.0%;
  left: 0.0%;
}

.btn-3 {
  position: absolute;
  width: 95.7%;
  top: 81.2%;
  left: -0.2%;
}

.c-3 {
  position: absolute;
  width: 71.6%;
  top: 16.7%;
  left: 33.1%;
}

.catch-3 {
  position: absolute;
  width: 63.7%;
  top: 52.0%;
  left: 8.6%;
}

.lead-3 {
  position: absolute;
  width: 48.4%;
  top: 31.5%;
  left: 5.1%;
}

.title-3 {
  position: absolute;
  width: 93.0%;
  top: 3.3%;
  left: 3.8%;
}

/* 04 */
.stage-4::before {
  content: "";
  display: block;
  padding-top: 115.739%;
  /* ドキュメントの縦横比 */
  background-color: #a575d8;
}

.baku-4 {
  position: absolute;
  width: 41.7%;
  top: 62.5%;
  left: 1.7%;
}

.bg-4 {
  position: absolute;
  width: 100.0%;
  top: 0.0%;
  left: 0.0%;
}

.c-4 {
  position: absolute;
  width: 77.7%;
  top: 52%;
  left: 20.2%;
}

.catch-4 {
  position: absolute;
  width: 31.7%;
  top: 73.9%;
  left: 7.3%;
}

.lead-4 {
  position: absolute;
  width: 83.3%;
  top: 36.5%;
  left: 5.1%;
}

.title-4 {
  position: absolute;
  width: 93.5%;
  top: 3.4%;
  left: 3.5%;
}

/* 05 */
.stage-5::before {
  content: "";
  display: block;
  padding-top: 183.045%;
  /* ドキュメントの縦横比 */
  background-color: #2bbc66;
}

.baku-5 {
  position: absolute;
  width: 42.2%;
  top: 10.6%;
  left: 57.8%;
}

.bg-5 {
  position: absolute;
  width: 100.0%;
  top: 0.0%;
  left: 0.0%;
}

.btn-5 {
  position: absolute;
  width: 90%;
  top: 87.0%;
  left: 5%;
}

.c-5-1 {
  position: absolute;
  width: 38.6%;
  top: 16.3%;
  left: 58.9%;
}

.c-5-2 {
  position: absolute;
  width: 88.2%;
  top: 36.3%;
  left: 6.4%;
}

.c-5-3 {
  position: absolute;
  width: 89.4%;
  top: 64.6%;
  left: 5.5%;
}

.lead-5-1 {
  position: absolute;
  width: 57.3%;
  top: 31.8%;
  left: 5.1%;
}

.lead-5-2 {
  position: absolute;
  width: 52.4%;
  top: 60.3%;
  left: 5.1%;
}

.title-5 {
  position: absolute;
  width: 82.3%;
  top: 2.5%;
  left: 4.4%;
}

/* 06 */
.stage-6::before {
  content: "";
  display: block;
  padding-top: 103.583%;
  /* ドキュメントの縦横比 */
  background-color: #42a1db;
}

.bg-6 {
  position: absolute;
  width: 100.0%;
  top: 0.0%;
  left: 0.0%;
}

.btn-6 {
  position: absolute;
  width: 90%;
  top: 77.3%;
  left: 5%;
}

.c-6 {
  position: absolute;
  width: 55.5%;
  top: 27.7%;
  left: 51.9%;
}

.lead-6 {
  position: absolute;
  width: 62.0%;
  top: 48.5%;
  left: 5.1%;
}

.text-6 {
  position: absolute;
  width: 70.6%;
  top: 38.9%;
  left: 5.2%;
  font-size: 1.05vw;
}

.text-6 span {
  font-size: 80%;
}

.title-6 {
  position: absolute;
  width: 93.2%;
  top: 2.6%;
  left: 4.6%;
}

/* 07 */
.stage-7::before {
  content: "";
  display: block;
  padding-top: 122.265%;
  /* ドキュメントの縦横比 */
  background-color: #c20813;
}

.comics-cover {
  position: absolute;
  width: 38%;
  top: 5.8%;
  left: 31%;
}

.comics-text {
  position: absolute;
  width: 64%;
  top: 58.5%;
  left: 18%;
}

.bg-7 {
  position: absolute;
  width: 90%;
  top: 0.0%;
  left: 5%;
}

.btn-7 {
  position: absolute;
  width: 95.8%;
  top: 80.6%;
  left: 0.1%;
}

.btn-1,
.btn-2,
.btn-3,
.btn-4,
.btn-7 {
  transform: translateX(-10px);
  transition: all 0.2s ease;
}

.btn-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-item {
  width: 48%;
  transition: all 0.2s ease;
  transform: translateX(0px);
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .text-6 {
    font-size: 3.1vw;
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {
  .text-6 {
    font-size: 1.55vw;
  }
}

@media screen and (min-width: 1025px) {

  .btn-1:hover,
  .btn-2:hover,
  .btn-3:hover,
  .btn-4:hover,
  .btn-7:hover {
    transform: translateX(0px);
  }

  .btn-item:hover {
    transform: translateX(10px);
  }
}