@keyframes mascot-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(2deg);
  }
  66% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 23, app/assets/stylesheets/lp.scss */
.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* line 28, app/assets/stylesheets/lp.scss */
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* line 34, app/assets/stylesheets/lp.scss */
.scroll-animate-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* line 39, app/assets/stylesheets/lp.scss */
.scroll-animate-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* line 45, app/assets/stylesheets/lp.scss */
.scroll-animate-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* line 50, app/assets/stylesheets/lp.scss */
.scroll-animate-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* line 56, app/assets/stylesheets/lp.scss */
.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* line 61, app/assets/stylesheets/lp.scss */
.scroll-animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hero-mascot-in {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* line 78, app/assets/stylesheets/lp.scss */
.hero-text-animate {
  animation: hero-text-in 0.8s ease-out forwards;
}

/* line 82, app/assets/stylesheets/lp.scss */
.hero-mascot-animate {
  animation: hero-mascot-in 0.8s ease-out 0.2s both;
}

/* line 86, app/assets/stylesheets/lp.scss */
.hero-bubble-1 {
  animation: bubble-in 0.5s ease-out 1s both;
}

/* line 90, app/assets/stylesheets/lp.scss */
.hero-bubble-2 {
  animation: bubble-in 0.5s ease-out 1.2s both;
}

/* line 95, app/assets/stylesheets/lp.scss */
.mascot-float {
  animation: mascot-float 3s ease-in-out infinite;
}

/* line 100, app/assets/stylesheets/lp.scss */
.glow-pulse {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* line 105, app/assets/stylesheets/lp.scss */
.faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* line 111, app/assets/stylesheets/lp.scss */
.faq-content.open {
  max-height: 300px;
  opacity: 1;
}

/* line 118, app/assets/stylesheets/lp.scss */
#mobile-sticky-cta {
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

/* line 122, app/assets/stylesheets/lp.scss */
#mobile-sticky-cta.visible {
  transform: translateY(0);
}

/* line 129, app/assets/stylesheets/lp.scss */
#lp-mobile-menu.hidden {
  display: none;
}

/* line 135, app/assets/stylesheets/lp.scss */
.scroll-animate-opacity {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* line 139, app/assets/stylesheets/lp.scss */
.scroll-animate-opacity.visible {
  opacity: 1;
}

/* line 145, app/assets/stylesheets/lp.scss */
html {
  scroll-behavior: smooth;
}

/* line 150, app/assets/stylesheets/lp.scss */
.lp-body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: #0A0A0A;
  color: #FFFFFF;
}

/* line 156, app/assets/stylesheets/lp.scss */
.lp-body .lp-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* line 163, app/assets/stylesheets/lp.scss */
.hero-bg {
  background: #0A0A0A;
}

/* line 166, app/assets/stylesheets/lp.scss */
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(200, 255, 0, 0.1) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

/* line 181, app/assets/stylesheets/lp.scss */
.neon-btn {
  box-shadow: 0 0 20px rgba(200, 255, 0, 0.4);
  transition: all 0.2s ease;
}

/* line 185, app/assets/stylesheets/lp.scss */
.neon-btn:hover {
  box-shadow: 0 0 30px rgba(200, 255, 0, 0.6);
  transform: translateY(-2px);
}

/* line 192, app/assets/stylesheets/lp.scss */
.hover-card {
  transition: border-color 0.2s ease;
}

/* line 195, app/assets/stylesheets/lp.scss */
.hover-card:hover {
  border-color: rgba(200, 255, 0, 0.5) !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* line 17, app/assets/stylesheets/application.scss */
.footer-bottom {
  margin-top: 50px;
}

/* facebook, line, twitter */
/* line 21, app/assets/stylesheets/application.scss */
.twitter {
  background: #55acee;
}

/* line 25, app/assets/stylesheets/application.scss */
.fb {
  background: #3b5998;
}

/* line 29, app/assets/stylesheets/application.scss */
.line {
  background: #09B701;
}

/* line 32, app/assets/stylesheets/application.scss */
a.twitter {
  color: #ffffff;
}

/* line 35, app/assets/stylesheets/application.scss */
a.fb {
  color: #ffffff;
}

/* line 38, app/assets/stylesheets/application.scss */
a.line {
  color: #ffffff;
}

/* line 41, app/assets/stylesheets/application.scss */
.footer_copyright {
  text-align: center;
}

/*# sourceMappingURL=application.css-e5a3dd6a1f5d7f89bcf584e7cec3e05d7e2b57f3c5dc36d0324dbb5e706c3205.map */