.lp {
  overflow-x: hidden;
}

.lp-container {
  width: min(100%, 550px);
  margin: 0 auto;
}

.lp-image,
.lp-cta {
  display: block;
}

.lp-image {
  width: 100%;
  height: auto;
}

.lp-cta {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lp-group-14{
    padding-bottom: 80px;
}

.lp-cta:hover {
  transform: translateY(2px) scale(0.98);
}

/* ===== group 01 ===== */
.img-01-01 {
  margin-top: -90%;
}

.img-01-02 {
  margin-top: -37%;
}

.img-cta-main {
  width: 91%;
  margin-top: -7%;
}

.img-03-01 {
  width: 90%;
  margin-top: -38%;
  margin-bottom: 6%;
  margin-left: auto;
  margin-right: auto;
}

/* ===== group 12 ===== */
.img-12-01 {
  width: 95%;
  margin-top: -195%;
  margin-left: auto;
  margin-right: auto;
}

.img-12-01-1,
.img-12-02,
.img-12-02-1,
.img-12-03,
.img-12-03-1,
.img-12-04,
.img-12-04-1 {
  width: 95%;
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
}

/* ===== group 13 ===== */
.img-13 {
  margin-top: 5%;
}

.img-cta-plan {
  width: 85%;
  margin-top: -38%;
}

/* ===== group 14 ===== */
.img-14 {
  margin-top: 5%;
}

.img-cta02 {
  width: 85%;
  margin-top: -90%;
}

.img-cta03 {
  width: 85%;
  margin-top: 48%;
}

/* ===== animation ===== */
.fade-left,
.fade-right,
.fade-up,
.zoom-in {
  opacity: 0;
  will-change: transform, opacity;
}

.fade-left {
  transform: translateX(-24px);
}

.fade-right {
  transform: translateX(24px);
}

.fade-up {
  transform: translateY(24px);
}

.zoom-in {
  transform: scale(0.94);
}

.is-visible.fade-left,
.is-visible.fade-right,
.is-visible.fade-up,
.is-visible.zoom-in {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ===== mobile ===== */
@media (max-width: 767px) {
  .lp-container {
    width: 100%;
    max-width: 550px;
  }

  .img-01-01 {
    margin-top: -86%;
  }

  .img-01-02 {
    margin-top: -37%;
  }

  .img-cta-main {
    width: 85%;
    margin-top: -9%;
  }

  .img-03-01 {
    width: 95%;
    margin-top: -36%;
    margin-bottom: 3%;
  }

  .img-12-01 {
    width: 95%;
    margin-top: -195%;
  }

  .img-12-01-1,
  .img-12-02,
  .img-12-02-1,
  .img-12-03,
  .img-12-03-1,
  .img-12-04,
  .img-12-04-1 {
    width: 95%;
    margin-top: 1%;
  }

  .img-13 {
    margin-top: 10%;
  }

  .img-cta-plan {
    width: 85%;
    margin-top: -39%;
  }

  .img-14 {
    margin-top: 9%;
  }

  .img-cta02 {
    width: 85%;
    margin-top: -89%;
  }

  .img-cta03 {
    width: 85%;
    margin-top: 48%;
  }
}