.lp {
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 24px 48px rgba(95, 45, 55, 0.6);
  .lp-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: ver(--spacing-4);
    margin-bottom: var(--spacing-16);
    .ornament {
      font-size: var(--font-size-3);
      font-family: "Playwrite CA", cursive;
      color: var(--color-text-primary);
      font-weight: 400;
    }
    .main {
      font-weight: 400;
      font-size: 22px;
      color: var(--color-text-base-high);
    }
    &.inverse {
      text-shadow: 0 4px 48px rgba(95, 45, 55, 0.6);
      .main,
      .ornament {
        color: var(--color-text-inverse-high);
      }
    }
  }
}
.lp-container {
  padding-inline: var(--spacing-12);
  &.full {
    padding-inline: 0;
  }
}
.lp-hero-area {
  height: 75vh;
  max-height: 640px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--spacing-24);
  .hero-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    mix-blend-mode: soft-light;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.lp-hero-content {
  padding-inline: var(--spacing-12);
  display: grid;
  gap: var(--spacing-12);
  padding-block: var(--spacing-32);
  position: relative;
  z-index: 1;
  .c-lp-hero-copy {
    color: var(--color-text-inverse-high);
    font-weight: normal;
    font-size: 30px;
    line-height: 1.5;
    text-shadow: 0 4px 32px rgba(95, 45, 55, 0.75);
  }
}
.lp-about-area {
  padding-bottom: var(--spacing-24);
  margin-top: -64px;
  .about-lead {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-inverse-high);
    margin-bottom: var(--spacing-8);
    text-shadow: 0 4px 48px rgba(95, 45, 55, 0.6);
  }
  .about-detail {
    font-size: var(--font-size-4);
    line-height: 1.75;
    color: var(--color-text-inverse-middle);
    font-weight: normal;
    text-shadow: 0 4px 48px rgba(95, 45, 55, 0.6);
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
  }
  .caution {
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--color-border-inverse-high);
    font-size: var(--font-size-2);
    color: var(--color-text-inverse-high);
    line-height: 1.4;
    margin-top: var(--spacing-8);
    text-shadow: 0 4px 32px rgba(95, 45, 55, 0.8);
  }
}
.lp-feature-area {
  background: var(--color-surface-base-primary);
  border-radius: var(--radius-6) var(--radius-6) 0 0;
  padding-inline: var(--spacing-10);
  padding-block: var(--spacing-24);
  .l-lp-feature-items {
    display: grid;
    gap: var(--spacing-24);
  }
  .lp-feature-item {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-2);
    counter-increment: count;
    .feature-item-image {
      display: flex;
      justify-content: center;
      img {
        width: auto;
        height: auto;
        max-height: 360px;
        display: block;
      }
    }
    .feature-item-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-2);
      padding-inline: var(--spacing-8);
      &:before {
        content: counter(count);
        font-size: 32px;
        font-family: serif;
        color: var(--color-text-primary);
        line-height: 1;
      }
    }
    .feature-item-title {
      color: var(--color-text-primary);
      font-size: 18px;
      font-weight: 400;
      margin-bottom: var(--spacing-4);
    }
    .feature-item-detail {
      font-size: var(--font-size-4);
      line-height: var(--line-height-4);
    }
  }
}
.lp-user-voice {
  padding-block: var(--spacing-32);
  background: var(--color-surface-base-secondary);
  .swiper-wrapper {
    padding-bottom: var(--spacing-24);
    align-items: stretch;
    .swiper-slide {
      height: unset;
      width: 296px;
    }
  }
  .swiper-pagination-bullet-active {
    background: var(--color-surface-primary);
  }
  .swiper-button-next,
  .swiper-button-prev {
    color: var(--color-surface-primary);
    &:after {
      font-size: 32px;
    }
  }
  .voice-item {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.1);
    position: relative;
    .voice-item-title {
      padding-block: var(--spacing-12);
      padding-inline: var(--spacing-10);
      background: linear-gradient(4deg, #d5918b 2.18%, #dca98d 100%);
      font-size: var(--font-size-7);
      line-height: 150%;
      color: var(--color-text-inverse-high);
    }
    .voice-item-detail {
      padding-block: var(--spacing-12);
      padding-inline: var(--spacing-10);
    }
  }
}
.lp-faq-area {
  padding-block: var(--spacing-32) 80px;
  .lp-faq-list {
    background: var(--white-alpha-10);
    border-radius: var(--radius-6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    .lp-faq-item {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid var(--color-border-base-middle);
      &:last-child {
        border-bottom: none;
      }
      &.open {
        .lp-faq-question {
          background: var(--color-surface-primary-light);
        }
        .lp-faq-answer {
          visibility: visible;
          opacity: 1;
          height: auto;
          overflow: visible;
          padding-block: var(--spacing-6);
          padding-inline: var(--spacing-6);
        }
        .toggle-icon {
          &:after {
            transform: rotate(0);
          }
        }
      }
      .lp-faq-question {
        button {
          border: none;
          background: transparent;
          display: flex;
          align-items: flex-start;
          padding: 0;
          gap: var(--spacing-4);
          padding-block: var(--spacing-8);
          padding-inline: var(--spacing-6);
          width: 100%;
          &:before {
            content: "Q.";
            font-size: var(--font-size-8);
            font-weight: bold;
            color: var(--color-text-primary);
            font-weight: bold;
            line-height: var(--line-height-1);
            transform: translateY(-1px);
          }
        }
        .question-title {
          flex: 1;
          text-align: left;
          font-weight: normal;
          font-size: var(--font-size-4);
          padding-top: var(--spacing-1);
        }
        .toggle-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          border-radius: var(--radius-round);
          border: 1.5px solid var(--color-border-primary);
          position: relative;
          &:before,
          &:after {
            content: "";
            width: 8px;
            height: 1.25px;
            background: var(--color-border-primary);
            border-radius: 2px;
            position: absolute;
            left: calc(50% - 4px);
            top: calc(50% - 0.75px);
          }
          &:after {
            transform: rotate(90deg);
          }
        }
      }
      .lp-faq-answer {
        display: flex;
        gap: var(--spacing-4);
        padding-block: 0;
        padding-inline: 0;
        visibility: hidden;
        opacity: 0;
        height: 0;
        overflow: hidden;
        &:before {
          content: "A.";
          font-size: var(--font-size-8);
          font-weight: bold;
          line-height: var(--line-height-1);
          color: var(--color-text-info);
          transform: translateY(-1px);
        }
        .answer-content {
          flex: 1;
          display: grid;
          gap: var(--spacing-2);
        }
      }
    }
  }
}