@charset "UTF-8";

body {
  margin: 0;
  background: #f5f5f5;
  padding-bottom: 110px;
}

.lp {
  width: 390px;
  max-width: 100%;
  margin: 0 auto;
}

.lp-img {
  display: block;
  width: 100%;
  height: auto;
}

.fv {
  position: relative;
}

.fv-cta {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 10;
  display: block;
  width: 86%;
}

.fv-cta2{
  position: absolute;
  bottom: 6%;
}

.fv-cta img,
.floating-cta img {
  display: block;
  width: 100%;
  height: auto;
  animation: pulseCta 1.8s ease-in-out infinite;
}

.floating-cta {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transition: transform 0.35s ease, visibility 0.35s ease;
  z-index: 999;
  display: block;
  width: min(340px, calc(100% - 32px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


.floating-cta.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 最終セクションでフェード中 */
.floating-cta.is-fade-out {
  pointer-events: none;
}


@keyframes pulseCta {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}