:root {
  color-scheme: light;
  --page-width: 600px;
  --focus: #135fd1;
}

* {
  box-sizing: border-box;
}

html {
  background: #eef0f2;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: #eef0f2;
  color: #242424;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.lp {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  overflow: clip;
  background: #fff;
  box-shadow: 0 0 32px rgb(0 0 0 / 10%);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* 値は原版画像のpx。表示幅に合わせて間隔も同じ比率で縮小する。 */
.lp-section {
  --source-width: 1168;
  --reserved-cta: 300;
  --section-gap: 60;
  padding-top: calc(100% * var(--section-gap) / 1168);
}

.lp-section--fv {
  --section-gap: 0;
}

.lp-section--03 {
  /* 直前の2.png自体に75pxの白余白があるため追加は控えめに。 */
  --section-gap: 30;
}

.lp-section--04 {
  /* 4.pngの末尾52pxに248pxを足して、他と同じ300pxのCTA枠に。 */
  --reserved-cta: 52;
}

.lp-section--05 {
  --source-width: 1143;
}

.artwork,
.artwork picture,
.artwork img {
  display: block;
  width: 100%;
}

.artwork {
  position: relative;
  margin: 0;
  line-height: 0;
}

.artwork img {
  height: auto;
}

.cta-slot {
  position: relative;
  z-index: 2;
  /* 画像内の予約余白へ枠を重ねる。本文は一切隠さない。 */
  margin-top: calc(-100% * var(--reserved-cta) / var(--source-width));
  width: 100%;
  aspect-ratio: 1168 / 300;
  display: grid;
  align-items: center;
}

.cta-button {
  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transform-origin: center;
  animation: cta-pulse 2.3s ease-in-out infinite;
}

.cta-button picture,
.cta-button img {
  display: block;
  width: 100%;
  height: auto;
}

.cta-button span {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 45%;
  width: 72%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(20px, 5.2vw, 31px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

.cta-button:hover {
  filter: brightness(1.06);
}

.cta-button:active {
  animation: none;
  transform: translateY(2px) scale(.99);
}

.cta-button:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: -4px;
  border-radius: 999px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes cta-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 7px 8px rgb(0 86 0 / 22%));
  }
  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 10px 13px rgb(0 86 0 / 32%));
  }
}

@media (max-width: 600px) {
  html,
  body {
    background: #fff;
  }

  .lp {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cta-button {
    animation: none;
  }
}