.marutto-lp-wrap {
  --page-bg: #fffaf4;
  --section-gap: clamp(12px, 2vw, 28px);
  width: min(100vw, 1280px);
  margin-left: calc(50% - min(50vw, 640px));
  margin-right: calc(50% - min(50vw, 640px));
  background: var(--page-bg);
}

.marutto-lp-wrap,
.marutto-lp-wrap * {
  box-sizing: border-box;
}

.marutto-lp-wrap .lp {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 var(--section-gap);
}

.marutto-lp-wrap .lp-section {
  position: relative;
  margin-bottom: var(--section-gap);
}

.marutto-lp-wrap .lp-section:last-child {
  margin-bottom: 0;
}

.marutto-lp-wrap picture,
.marutto-lp-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.marutto-lp-wrap .hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.marutto-lp-wrap .hotspot:focus-visible {
  outline: 4px solid rgba(30, 130, 76, 0.7);
  outline-offset: 3px;
}

/* desktop hotspot positions */
.marutto-lp-wrap .hero-cta {
  left: 54.6%;
  top: 72.9%;
  width: 41.2%;
  height: 17.2%;
}

.marutto-lp-wrap .video-1 { left: 16.9%; top: 31.4%; width: 19.2%; height: 20.3%; border-radius: 12px; }
.marutto-lp-wrap .video-2 { left: 40.4%; top: 31.4%; width: 19.2%; height: 20.3%; border-radius: 12px; }
.marutto-lp-wrap .video-3 { left: 63.8%; top: 31.4%; width: 19.2%; height: 20.3%; border-radius: 12px; }
.marutto-lp-wrap .video-4 { left: 16.9%; top: 54.2%; width: 19.2%; height: 20.3%; border-radius: 12px; }
.marutto-lp-wrap .video-5 { left: 40.4%; top: 54.2%; width: 19.2%; height: 20.3%; border-radius: 12px; }

.marutto-lp-wrap .final-cta {
  left: 1.6%;
  top: 82.6%;
  width: 96.8%;
  height: 15.5%;
}

@media (max-width: 767px) {
  .marutto-lp-wrap {
    --section-gap: clamp(10px, 3.2vw, 18px);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .marutto-lp-wrap .hero-cta {
    left: 1.8%;
    top: 80.4%;
    width: 96.4%;
    height: 15.1%;
  }

  .marutto-lp-wrap .video-1 { left: 10.8%; top: 28.4%; width: 38.1%; height: 12.4%; border-radius: 10px; }
  .marutto-lp-wrap .video-2 { left: 51.0%; top: 28.4%; width: 38.1%; height: 12.4%; border-radius: 10px; }
  .marutto-lp-wrap .video-3 { left: 10.8%; top: 42.2%; width: 38.1%; height: 12.4%; border-radius: 10px; }
  .marutto-lp-wrap .video-4 { left: 51.0%; top: 42.2%; width: 38.1%; height: 12.4%; border-radius: 10px; }
  .marutto-lp-wrap .video-5 { left: 10.8%; top: 56.0%; width: 38.1%; height: 12.4%; border-radius: 10px; }

  .marutto-lp-wrap .final-cta {
    left: 1.4%;
    top: 86.4%;
    width: 97.2%;
    height: 12.6%;
  }
}