@charset "UTF-8";
/* ブレイクポイント */
/* 読み込み */
/*foundation */
html {
  font-size: 100%;
  overflow-y: scroll;
}

body {
  color: #3C3C3C;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.15em;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #3C3C3C;
  transition: all 0.4s ease;
}

a:hover {
  color: #E9938D;
}

img {
  width: 100%;
  display: block;
}

li {
  list-style: none;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  border: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.lp-wrapper {
  background: url("../img/pc-bg.jpg");
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
}

.lp-container {
  max-width: 440px;
  margin: 0 auto;
}

.js-stop-float {
  height: 1px;
}

/* =====================
    読み込み
===================== */
/* =====================
    fv
===================== */
.l-fv {
  width: 100%;
  height: auto;
  position: relative;
}

.l-fv__main-copy {
  width: 92%;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.js-fade-glass {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.02);
  transition: opacity 1s ease, filter 1.2s ease, transform 1.2s ease;
}

.js-fade-glass.is-show {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.l-plan {
  width: 100%;
  height: auto;
  position: relative;
}

.l-plan__cta {
  width: 92%;
  position: absolute;
  bottom: 21%;
  left: 50%;
  transform: translateX(-50%);
}

.l-problems {
  width: 100%;
  height: auto;
  position: relative;
}

.l-problems__flex {
  width: 84%;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.l-about {
  width: 100%;
  height: auto;
  position: relative;
}

.l-about__flex {
  width: 92%;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.l-target {
  width: 100%;
  height: auto;
  position: relative;
}

.l-target__cta {
  width: 92%;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
}

.l-feature {
  width: 100%;
  height: auto;
  position: relative;
}

.l-feature__content {
  width: 100%;
  height: auto;
  position: absolute;
  top: 11%;
  left: 0;
}

.l-feature__img {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
}

.l-feature__flower {
  display: block;
  width: 33%;
  position: absolute;
  top: 5%;
  right: 23px;
  z-index: 1;
}

.l-flow {
  width: 100%;
  height: auto;
  position: relative;
}

.l-faq {
  background-color: #FFFFFF;
}

.l-faq__wrapper {
  padding: 2.5rem 1.5rem;
}

.l-faq__title {
  width: 52%;
  margin: 0 auto 1.5rem auto;
}

.l-last {
  position: relative;
}

.l-last__copy {
  width: 86%;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
}

.l-last__cta {
  width: 92%;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.l-footer {
  color: #3C3C3C;
  font-size: 13px;
  text-align: center;
  background-color: #FFF3F2;
  padding: 2rem 0;
}

.l-footer__link {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* 読み込み */ /* =====================
    読み込み
===================== */
/* =====================
    SP-TB固定CTA
===================== */
.p-float-cta {
  width: 100%;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
  background: rgba(255, 255, 255, 0.4); /* 半透明 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 0.5rem 2rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  display: none;
  justify-content: center;
}
@media (min-width: 1025px) {
  .p-float-cta {
    display: none;
  }
}

.p-float-cta.is-show {
  display: flex;
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.p-float-cta__btn {
  position: relative;
  display: block;
  overflow: hidden;
}

.p-float-cta__btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -40%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-150%) rotate(25deg);
  -webkit-animation: shine 5s ease-in-out infinite;
          animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}

@-webkit-keyframes shine {
  0% {
    transform: translateX(-150%) rotate(25deg);
    opacity: 0;
  }
  15% {
    transform: translateX(800%) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(800%) rotate(25deg);
    opacity: 0;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-150%) rotate(25deg);
    opacity: 0;
  }
  15% {
    transform: translateX(800%) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(800%) rotate(25deg);
    opacity: 0;
  }
}
.js-stop-float {
  height: 10px; /* 1pxより安全 */
}

.p-float-cta__img {
  max-width: 360px;
  width: 100%;
  display: block;
}

/* =====================
    CTA
===================== */
.p-bg__img {
  height: auto;
  display: block;
}

.p-cta__btn {
  position: relative;
  display: block;
  overflow: hidden;
  transition: transform 0.5s ease;
}

@media (min-width: 1025px) {
  .p-cta__btn:hover {
    transform: scale(1.05);
  }
}

.p-cta__btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -40%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-150%) rotate(25deg);
  -webkit-animation: shine 5s ease-in-out infinite;
          animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0% {
    transform: translateX(-150%) rotate(25deg);
    opacity: 0;
  }
  15% {
    transform: translateX(800%) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(800%) rotate(25deg);
    opacity: 0;
  }
}
/* =====================
    　 faq
===================== */
.p-faq__list {
  background-color: #FFF3F2;
  margin-bottom: 1.5rem;
}
.p-faq__list:last-child {
  margin-bottom: 0;
}

.p-faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
}

.p-faq__question--title {
  color: #E9938D;
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
}

.p-faq__question--text {
  color: #E9938D;
  flex: 1;
}

.p-faq__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.p-faq__answer {
  display: flex;
  gap: 0.5rem;
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  font-size: 0.875rem;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.p-faq__answer--title {
  font-weight: 500;
}

/* ===== 開いた状態 ===== */
.p-faq__item.is-open .p-faq__icon {
  transform: rotate(180deg);
}
.p-faq__item.is-open .p-faq__answer {
  max-height: 500px;
  padding: 0 1rem 1rem;
}

.js-stagger {
  pointer-events: none;
}

.js-stagger a,
.js-stagger button {
  pointer-events: auto;
}

/* 基本設定（変数、リセットCSSなど） */
/* ヘッダー、フッターなどの共通レイアウト*/
/* パーツ（ボタン、カードなど） */
/*各ページ独自のモジュール（例：トップページの特集など） */
/*# sourceMappingURL=style.css.map */