@charset "UTF-8";
:root {
  --font-apple:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* @section base */
body {
  font-family: var(--font-apple);
  background-color: #fff;
  color: #1e293b;
  overflow-x: hidden;
}
.font-yusei {
  font-family: var(--font-apple);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.font-inter {
  font-family: var(--font-apple);
}

/* @section focus */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.6);
  outline-offset: 4px;
}

/* @section utilities */
.perspective-1000 {
  perspective: 1000px;
}

/* @section reveal */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
}
.js .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* @section hero-phone */
:root {
  --phone-spread-outer: 220px;
  --phone-spread-inner: 140px;
  --phone-spread-extra-outer: 60px;
  --phone-spread-extra-inner: 30px;
}
@media (max-width: 768px) {
  :root {
    --phone-spread-outer: 120px;
    --phone-spread-inner: 70px;
    --phone-spread-extra-outer: 20px;
    --phone-spread-extra-inner: 10px;
  }
}
@media (max-width: 480px) {
  :root {
    --phone-spread-outer: 90px;
    --phone-spread-inner: 55px;
    --phone-spread-extra-outer: 10px;
    --phone-spread-extra-inner: 6px;
  }
}
.phone-wrapper {
  position: absolute;
  width: 260px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.phone-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
}
@media (max-width: 768px) {
  .phone-wrapper {
    width: 140px;
  }
}
@media (max-width: 360px) {
  .phone-wrapper {
    width: 110px;
  }
}

/* @section faq */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
.faq-icon {
  transition: transform 0.3s;
}
details[open] .faq-icon {
  transform: rotate(45deg);
}
details[open] summary ~ * {
  animation: sweep 0.3s ease-in-out;
}
@keyframes sweep {
  0% {
    opacity: 0;
    margin-top: -10px;
  }
  100% {
    opacity: 1;
    margin-top: 10px;
  }
}

/* @section animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-2000 {
  animation-delay: 2s;
}

[class*='animate-spread-'] {
  animation-duration: 2.5s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
  opacity: 1;
}
.js [class*='animate-spread-'] {
  opacity: 0;
}
.animate-spread-1 {
  animation-name: spread1;
}
.animate-spread-2 {
  animation-name: spread2;
}
.animate-spread-3 {
  animation-name: spread3;
}
.animate-spread-4 {
  animation-name: spread4;
}
.animate-spread-5 {
  animation-name: spread5;
}

@keyframes spread1 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.65);
  }
  100% {
    opacity: 1;
    transform: translate(
        calc(-50% - var(--phone-spread-outer) - var(--phone-spread-extra-outer)),
        -50%
      )
      scale(0.7);
  }
}
@keyframes spread2 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.65);
  }
  100% {
    opacity: 1;
    transform: translate(
        calc(-50% - var(--phone-spread-inner) - var(--phone-spread-extra-inner)),
        -50%
      )
      scale(0.82);
  }
}
@keyframes spread3 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.65);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@keyframes spread4 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.65);
  }
  100% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--phone-spread-inner) + var(--phone-spread-extra-inner)),
        -50%
      )
      scale(0.82);
  }
}
@keyframes spread5 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.65);
  }
  100% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--phone-spread-outer) + var(--phone-spread-extra-outer)),
        -50%
      )
      scale(0.7);
  }
}