:root {
  --lpMaxWidth: 480px;
  --focusColor: #06c755;
  --inkColor: #11162a;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #f7f8fc;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--inkColor);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  overflow-x: hidden;
}

.desktopBackground {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(249, 251, 255, 0.82)),
    repeating-linear-gradient(90deg, rgba(29, 35, 80, 0.06) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(29, 35, 80, 0.05) 0 1px, transparent 1px 84px);
}

.desktopBackground::before,
.desktopBackground::after {
  position: absolute;
  content: "";
  inset: -18%;
  opacity: 0.55;
  animation: gridDrift 32s linear infinite;
}

.desktopBackground::before {
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(126, 74, 255, 0.16) 46% 47%, transparent 47% 100%),
    linear-gradient(45deg, transparent 0 55%, rgba(255, 113, 64, 0.14) 55% 56%, transparent 56% 100%);
  background-size: 180px 180px, 220px 220px;
}

.desktopBackground::after {
  background:
    repeating-conic-gradient(from 45deg, rgba(255, 55, 125, 0.08) 0deg 8deg, transparent 8deg 36deg),
    radial-gradient(circle at center, transparent 0 64%, rgba(61, 107, 255, 0.08) 65% 66%, transparent 67%);
  background-size: 260px 260px, 240px 240px;
  animation-duration: 46s;
  animation-direction: reverse;
}

.geoShape {
  position: absolute;
  display: block;
  width: clamp(68px, 8vw, 138px);
  aspect-ratio: 1;
  opacity: 0.26;
  animation: shapeFloat 15s ease-in-out infinite;
}

.shapeOne {
  top: 10vh;
  left: 6vw;
  border: 2px solid rgba(127, 72, 255, 0.8);
  transform: rotate(12deg);
  --moveX: 34px;
  --moveY: 46px;
  --startRotate: 12deg;
  --endRotate: 58deg;
}

.shapeTwo {
  top: 22vh;
  right: 6vw;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, rgba(255, 71, 131, 0.7), rgba(255, 155, 33, 0.5));
  --moveX: -42px;
  --moveY: 30px;
  --startRotate: -14deg;
  --endRotate: -70deg;
  animation-duration: 19s;
}

.shapeThree {
  bottom: 12vh;
  left: 8vw;
  border: 2px solid rgba(255, 121, 45, 0.78);
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(255, 121, 45, 0.6) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 0 47%, rgba(126, 74, 255, 0.55) 47% 53%, transparent 53%);
  --moveX: 44px;
  --moveY: -36px;
  --startRotate: 28deg;
  --endRotate: 96deg;
  animation-duration: 17s;
}

.shapeFour {
  right: 9vw;
  bottom: 8vh;
  width: clamp(92px, 11vw, 184px);
  border: 2px solid rgba(26, 121, 255, 0.58);
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  --moveX: -28px;
  --moveY: -50px;
  --startRotate: 10deg;
  --endRotate: 44deg;
  animation-duration: 21s;
}

.shapeFive {
  top: 55vh;
  left: 3vw;
  width: clamp(56px, 7vw, 120px);
  border: 2px dashed rgba(255, 62, 133, 0.7);
  --moveX: 32px;
  --moveY: -32px;
  --startRotate: 45deg;
  --endRotate: 120deg;
  animation-duration: 18s;
}

.lp {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lpMaxWidth);
  margin: 0 auto;
  background: #fff;
}

.lpSection {
  position: relative;
  overflow: hidden;
  line-height: 0;
  isolation: isolate;
}

.lpSection + .lpSection {
  margin-top: -1px;
}

/* 画像の境目を軽くなじませるための薄いフェザーです。 */
.lpSection + .lpSection::before {
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  z-index: 3;
  height: 22px;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0)
  );
  filter: blur(0.5px);
}

.lpSection img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.ctaHitbox {
  position: absolute;
  z-index: 4;
  left: var(--ctaLeft, 14.8%);
  top: var(--ctaTop, 90.4%);
  width: var(--ctaWidth, 75.8%);
  height: var(--ctaHeight, 7.2%);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ctaHitbox::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  transition: background-color 160ms ease;
}

.ctaHitbox:hover::after {
  background: rgba(255, 255, 255, 0.08);
}

.ctaHitbox:focus-visible {
  outline: 3px solid var(--focusColor);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(6, 199, 85, 0.22);
}

.heroSection {
  --ctaLeft: 6.6%;
  --ctaTop: 89.2%;
  --ctaWidth: 86.8%;
  --ctaHeight: 8.2%;
}

.defaultCtaSection {
  --ctaLeft: 14.7%;
  --ctaTop: 90.2%;
  --ctaWidth: 75.7%;
  --ctaHeight: 7.4%;
}

.finalSection {
  aspect-ratio: 941 / 1450;
  --ctaLeft: 6.7%;
  --ctaTop: 57.1%;
  --ctaWidth: 86.8%;
  --ctaHeight: 10.1%;
}

/* 最終画像に含まれるフッター4項目はLP上では表示しません。 */
.finalSection img {
  position: absolute;
  inset: 0 auto auto 0;
}

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

@keyframes gridDrift {
  from {
    transform: translate3d(-2%, -1%, 0);
  }

  to {
    transform: translate3d(2%, 1%, 0);
  }
}

@keyframes shapeFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--startRotate, 0deg));
  }

  50% {
    transform: translate3d(var(--moveX, 30px), var(--moveY, 30px), 0) rotate(var(--endRotate, 60deg));
  }
}

@media (min-width: 561px) {
  .lp {
    box-shadow: 0 0 80px rgba(29, 24, 56, 0.16);
  }
}

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

  .desktopBackground {
    display: none;
  }

  .lp {
    max-width: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktopBackground::before,
  .desktopBackground::after,
  .geoShape {
    animation: none;
  }
}