@charset "UTF-8";

body {  
  overflow-x: hidden;
  width: 100%;
}

.main {
  max-width: 600px;
  margin: 0 auto;
  overflow-x: hidden;
}

/*  cta  */
.cta-wrap {
  width: 100%;
  height: 100%;
}

.btn-wrapper__cta {
  position: absolute;
  bottom: 4.5%;        
  left: 50%;           
  transform: translateX(-50%); 
}

.program__cta {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.program__cta:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.program__cta-img {
  display: block;
  width: clamp(151px, 76vw, 470px); /* ← 現状維持 */
  height: auto;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

/* 画像だけ軽くズームさせて“動きを感じる” */
.program__cta:hover .program__cta-img {
  transform: scale(1.05);
}

/* ---------------- FV ---------------- */
.main-visual {
  height: auto;
  width: 100%;
  position: relative; 
}

/* ---------------- program ---------------- */
.program {
  position: relative;
  background-color: var(--lp-pink);
  color: #fff;
  text-align: center;
  margin: -2px;
  height: auto;
  overflow-x: hidden;
}

.program-intro-cta {
  position: absolute;
  bottom: 7%;
}

/* ---------------- trouble ---------------- */
.trouble {
  position: relative;
  overflow: hidden;
  height: auto;
}

.trouble-cta {
  position: absolute;
  top:3%;
}

/* ---------------- habit ---------------- */
.habit {
  position: relative;
  margin-top: -8%;
  z-index: 1;
}

/* ---------------- before-after ---------------- */
.before-after {
  margin-top: -3%;
  position: relative;
}

.before-after-cta {
  position: absolute;
  bottom: 2%;
}

/* ---------------- plan-slider ---------------- */
.plan-slider {
  padding: 0 0.5rem 1rem 0.5rem;
  margin-top: -158%;
}

.plan-slider__inner {
  margin: 0 auto;
}

.swiper-slide {
  text-align: center;
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

.plan-slider .swiper-button-prev,
.plan-slider .swiper-button-next {
  color: #ff4b6d; 
  width: 20px;
  height: 40px;
}

.swiper-pagination-bullet {
  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-slide img {
  pointer-events: none;
  width: 100%;
  height: auto;
}


/* ---------------- support ---------------- */
.support {
  margin-top: 3rem;
}

.support__inner {
  margin: 0 auto;
}

/* ---------------- program-intro ---------------- */
.program-intro {
  position: relative;
  margin-top: 1rem;
}

/* ---------------- faq ---------------- */
.faq {
  padding-top: 4rem;
}

.faq__title {
  padding: 0 3rem;
}

.faq__container {
  padding: 1rem 1rem 0;
}

.faq__item {
  padding-top: 1rem;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.faq__item.active .faq__answer {
  max-height: 400px; 
  opacity: 1;
}


/* ---------------- message ---------------- */
.message {
  padding-top: 2rem;
  position: relative;
}

.message-cta {
  position: absolute;
  bottom: 0;
}

/* ---------------- access ---------------- */
.access {
  background-color: #898c93;
}
.access__wrapper {
  padding: 0 1rem 0;
}

/* ---------------- footer ---------------- */
.footer-links {
  position: relative;
  margin: 0 auto;
}

.footer-links__img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-links__area {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%; 
  display: block;
}

.footer-links__area--left {
  left: 0;
}

.footer-links__area--right {
  right: 0;
}