.marutto-web-wrap {
  --page-bg: #f7fcfd;
  --section-gap: clamp(22px, 2.8vw, 42px);
  --section-gap-large: clamp(34px, 4vw, 64px);
  width: min(100vw, 1280px);
  margin-left: calc(50% - min(50vw, 640px));
  margin-right: calc(50% - min(50vw, 640px));
  background: var(--page-bg);
}

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

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

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

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

.marutto-web-wrap .section-hero,
.marutto-web-wrap .section-works,
.marutto-web-wrap .section-final-cta {
  margin-bottom: var(--section-gap-large);
}

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

.marutto-web-wrap .hotspot {
  position: absolute;
  display: block;
}

.marutto-web-wrap .hotspot:focus-visible {
  outline: 4px solid rgba(0, 146, 154, 0.7);
  outline-offset: 4px;
}

.marutto-web-wrap .hero-cta {
  left: 14.2%;
  top: 86.3%;
  width: 71.4%;
  height: 10.8%;
  border-radius: 999px;
}

.marutto-web-wrap .section-works .work {
  left: 4.7%;
  width: 90.4%;
  height: 22.3%;
  border-radius: 18px;
}

.marutto-web-wrap .work-wedding { top: 17.5%; }
.marutto-web-wrap .work-seitai { top: 40%; }
.marutto-web-wrap .work-footcare { top: 62.5%; }

.marutto-web-wrap .final-cta {
  left: 5.6%;
  top: 48.4%;
  width: 54.2%;
  height: 17.2%;
  border-radius: 999px;
}

@media (max-width: 767px) {
  .marutto-web-wrap {
    --section-gap: clamp(18px, 4.2vw, 28px);
    --section-gap-large: clamp(26px, 6vw, 40px);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .marutto-web-wrap .hero-cta {
    left: 4.4%;
    top: 84.2%;
    width: 91.2%;
    height: 10%;
  }

  .marutto-web-wrap .section-works .work {
    left: 4.9%;
    width: 90.1%;
    height: 23.2%;
    border-radius: 14px;
  }

  .marutto-web-wrap .work-wedding { top: 18.1%; }
  .marutto-web-wrap .work-seitai { top: 40.9%; }
  .marutto-web-wrap .work-footcare { top: 63.7%; }

  .marutto-web-wrap .final-cta {
    left: 3.8%;
    top: 49.5%;
    width: 92.4%;
    height: 13.4%;
  }
}
