@charset "UTF-8";

/* ==================================
   1. ベース設定
================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f0f0f0;
  color: #4a3e44;
}

img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:root {
  --lp-width: 750px;
  --brand-brown: #4a3e44;
  --brand-pink: #b8658a;
  --text-gray: #6b6267;
  --white: #ffffff;

  --sec1-reason-top: 38.2%;
  --sec1-lower-top: 49.6%;
  --sec2-overlap: 28.205128%;

  /* 390px基準 → 可変化 */
  --w-308: min(78.9744%, 592px);
  --w-292: min(74.8718%, 561px);
  --w-244: min(62.5641%, 469px);
  --w-188: min(48.2051%, 362px);
  --w-320: min(82.0513%, 615px);
  --w-270: min(69.2308%, 519px);
  --w-84: min(21.5385%, 110px);
  --w-22: clamp(18px, 5.641%, 28px);
}


.lp-container {
  width: 100%;
  max-width: var(--lp-width);
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* ==================================
   2. 共通ラッパー
================================== */
.lp-container {
  width: 100%;
  max-width: var(--lp-width);
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fv-wrapper,
.lp-sec1,
.lp-sec2,
.section3-wrapper,
.section4-wrapper,
.section5-wrapper,
.section6-wrapper,
.section7-wrapper,
.section8-wrapper,
.section9-wrapper,
.section11-user-voice-wrapper,
.section12-wrapper,
.footer-wrapper {
  width: 100%;
  max-width: var(--lp-width);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.bg-image,
.btn-image,
.lp-sec1__bg,
.lp-sec2__bg,
.sec3-spacer-img,
.sec4-spacer-img,
.sec5-spacer-img,
.sec6-spacer-img,
.sec7-spacer-img,
.sec8-spacer-img,
.sec9-spacer-img {
  width: 100%;
  height: auto;
  display: block;
}

.pc-only {
  display: none;
}

.highlight-pink {
  color: #b8658a;
  font-weight: 500;
}

/* ==================================
   3. FVエリア
================================== */
.fv-wrapper {
  line-height: 0;
  font-size: 0;
}

.cta-link {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  z-index: 10;
  display: block;
  transition: transform 0.2s ease-out;
}

.cta-link:hover {
  transform: translateX(-50%) scale(1.03);
}

.cta-link:active {
  transform: translateX(-50%) scale(0.98);
}

/* ==================================
   4. Section 1
================================== */
.lp-sec1 {
  z-index: 4;
  margin-top: -8px;
  overflow: visible;
}

.lp-sec1__bg {
  position: relative;
  z-index: 1;
}

.lp-sec1__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.lp-sec1__overlay > img {
  width: 72%;
  height: auto;
  display: block;
}

.lp-sec1__main {
  position: absolute;
  top: 5.2%;
  left: 50%;
  width: 85%;
  transform: translateX(-50%);
  z-index: 3;
}

.lp-sec1__trouble {
  position: absolute;
  top: 19.5%;
  left: 4.2%;
  width: 48%;
  z-index: 3;
}

.lp-sec1__reason {
  position: absolute;
  top: var(--sec1-reason-top);
  left: 50%;
  width: 88%;
  transform: translateX(-50%);
  z-index: 4;
  color: var(--brand-brown);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-sec1__reason-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.lp-sec1__reason-head {
  margin: 0 0 2px;
  font-size: clamp(17px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.1;
}

.lp-sec1__reason-sub {
  margin: 0;
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}

.lp-sec1__reason-sub .is-lg {
  font-size: clamp(29px, 4.2vw, 46px);;
}

.lp-sec1__reason-sub .is-md {
  font-size: clamp(19px, 2.8vw, 30px);
}

.lp-sec1__reason-line-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -8px;
  margin-bottom: 0;
}

.lp-sec1__reason-line {
  display: block;
  width: 86%;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

.lp-sec1__reason-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -2px;
}

.lp-sec1__reason-main {
  margin: 0;
  color: var(--brand-pink);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-shadow: 1px 3px 4px rgba(80, 50, 64, 0.28);
}

.lp-sec1__reason-main .is-lg {
  font-size: clamp(38px, 5.6vw, 60px);
}

.lp-sec1__reason-main .is-lg2 {
  font-size: clamp(23px, 3.4vw, 36px);
}

.lp-sec1__reason-foot {
  margin: 0;
  font-size: clamp(23px, 3.0vw, 28px);  
  line-height: 2;
}

.lp-sec1__lower {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 91.5%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lp-sec1__card-wrap {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
}

.lp-sec1__card {
  background: var(--white);
  padding: 7% 4.4% 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  clip-path: polygon(
    0% 0%,
    calc(50% - 20px) 0%,
    50% 18px,
    calc(50% + 20px) 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

.lp-sec1__card-text {
  margin-top: 5%;
  width: 95%;
  color: var(--brand-brown);
}

.lp-sec1__card-text--top {
  font-size: clamp(12px, 2.8vw, 24px);
  line-height: 1.95;
  text-align: left;
  letter-spacing: 0.02em;
}

.lp-sec1__diagram {
  width: 90%;
}

.lp-sec1__card-text--bottom {
  text-align: center;
  font-size: clamp(17px, 4.4vw, 36px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lp-sec1__card-text--bottom .accent-lg {
  color: var(--brand-pink);
  font-size: clamp(24px, 4.4vw, 46px)
}

.lp-sec1__card-text--bottom .accent-md {
  color: var(--brand-pink);
  font-size: clamp(20px, 4.4vw, 42px)
}

.lp-sec1__bottom {
  position: relative;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.lp-sec1__demo {
  width: 25%;
  max-width: 96px;
  margin: 6px auto 8px;
}

.lp-sec1__bottom-copy {
  width: 100%;
  text-align: center;
  color: var(--brand-brown);
  font-family: "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}

.lp-sec1__bottom-copy .lead {
  margin: 0;
  color: #ffffff;
  font-size: clamp(32px, 6.8vw, 60px);
  line-height: 1.2;
}

.lp-sec1__bottom-copy .sub {
  margin: 0 0 2px;
  color: var(--brand-brown);
   font-size: clamp(20px, 3vw, 32px);
  line-height: 1.24;
}

/* ==================================
   5. Section 2
================================== */
.lp-sec2 {
  overflow: visible;
  z-index: 2;
  margin-top: calc(var(--sec2-overlap) * -1);
}

.lp-sec2__bg {
  position: relative;
  width: 100%;
  z-index: 1;
}

.lp-sec2__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lp-sec2__title-area,
.lp-sec2__middle,
.lp-sec2__banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  margin: 0;
}

.lp-sec2__title-area {
  top: 9%;
  width: var(--w-308);
  text-align: center;
  color: var(--brand-brown);
}

.lp-sec2__title-image {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.lp-sec2__desc {
  margin: 0;
  font-family: "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: clamp(16px, 2.8vw, 22px);
  line-height: 1.32;
  color: var(--brand-brown);
  text-align: center;
}

.lp-sec2__middle {
  top: 50%;
  width: var(--w-292);
}

.lp-sec2__middle-image {
  width: 100%;
  max-width: none;
}

.lp-sec2__banner {
  top: 56%;
  width: var(--w-188);
}

.lp-sec2__banner-image {
  width: 100%;
  max-width: none;
}

/* ==================================
   6. Section 3
================================== */

/* --- 全体 --- */
.section3-wrapper {
  position: relative;
  z-index: 5;
  background: #ffffff;
}

.section3 {
  position: static;
  overflow: visible;
}

.section3__inner {
  width: auto;
  margin: 0;
  position: static;
}

.section3::before {
  content: none;
}

.sec3-spacer-img {
  display: none;
}

.sec3-content-overlay {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  padding: 0;
}

/* --- 見出し（白背景） --- */
.sec3-h2-image {
  width: 80%;
  height: auto;
  display: block;
  margin: clamp(3px, 4vw, 40px) auto clamp(-24px, -4.5vw, -5px);
}

/* --- Points 共通 --- */
.sec3-points-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.sec3-point-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sec3-point-icon {
  width: 30%;
  height: auto;
  display: block;
  margin: 0 auto clamp(4px, 1vw, 10px);
  position: relative;
  z-index: 2;
}

.sec3-point-title {
  font-family: "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: clamp(22px, 5vw, 46px);
  line-height: 1.34;
  text-align: center;
  margin: 0 0 clamp(8px, 1.8vw, 16px);
  position: relative;
  z-index: 1;
}

.sec3-point-title .small-text {
  font-size: 0.83em;
}

/* =====================
   Point1（ピンク背景 + 下端V字）
===================== */
.sec3-point1-block {
  background: #efe8ec;
  padding: clamp(24px, 5vw, 50px) 16px clamp(24px, 5vw, 50px);
  margin: 0;
  margin-top: clamp(-10px, -1.5vw, -6px);
  position: relative;
}

/* 上端：白がV字で食い込む */
.sec3-point1-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(20px, 8.3vw, 45px);
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 3;
}

.sec3-arrow-pink {
  width: 100%;
  height: clamp(20px, 5.1vw, 38px);
  background: #efe8ec;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: 0;
  padding: 0;
}

.sec3-point1-block .sec3-point-icon {
  margin-bottom: 0;
  margin-top: clamp(-34px, -6vw, -24px);
  position: relative;
  z-index: 5;
}

.sec3-ingredients-image {
  display: block;
  margin: 0 auto;
  width: min(95%, 620px);
  height: auto;
  position: relative;
  z-index: 1;
}

.sec3-check-list {
  list-style: none;
  padding: 0;
  width: min(88%, 620px);
  margin: clamp(8px, 1.5vw, 14px) auto 0;
  text-align: left;
  position: relative;
  z-index: 1;
}

.sec3-check-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: clamp(6px, 1.2vw, 10px);
}

.check-icon {
  width: clamp(16px, 3vw, 26px);
  height: auto;
  margin-right: clamp(6px, 1.6vw, 12px);
  flex-shrink: 0;
  margin-top: 2px;
}

.sec3-check-list p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #4a3e44;
  font-size: clamp(13px, 2.4vw, 20px);
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin: 0;
}
/* =====================
   Point2（白背景 + 下端V字）
===================== */
.sec3-point2-block {
  background: #ffffff !important;
  padding: clamp(8px, 2vw, 20px) 16px clamp(24px, 5vw, 50px);
  margin: 0;
  margin-top: clamp(-10px, -1.5vw, -6px);
  position: relative;
}

.sec3-point2-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(20px, 8.3vw, 45px);
  background: #efe8ec;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 3;
}


.sec3-point2-block .sec3-point-icon {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: clamp(-28px, -5vw, -20px) auto clamp(4px, 1vw, 10px);
  z-index: 5;
}


.sec3-point2-main-img {
  width: min(88%, 620px);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.sec3-point2-desc-block {
  width: min(88%, 620px);
  max-width: 100%;
  margin: clamp(6px, 1.2vw, 12px) auto 0;
  text-align: left;
  position: relative;
  z-index: 1;
}

.sec3-point2-desc-block p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #4a3e44;
  font-size: clamp(13px, 2.4vw, 20px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  margin: 0;
}

/* =====================
   Point3（ピンク背景 + 下端なみなみ）
===================== */
.sec3-point3-block {
  background: #efe8ec;
  padding: clamp(8px, 2vw, 20px) 16px clamp(24px, 5vw, 50px);
  margin: 0;
  margin-top: clamp(-10px, -1.5vw, -6px);
  position: relative;
  z-index: 5;
}

.sec3-point3-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(20px, 8.3vw, 45px);
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 3;
}


.sec3-point3-block .sec3-point-icon {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: clamp(-16px, -2.5vw, -10px) auto clamp(4px, 1vw, 10px);
  z-index: 5;
}

.sec3-point3-main-img {
  width: min(88%, 620px);
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sec3-point3-desc-block {
  width: min(88%, 620px);
  max-width: 100%;
  margin: clamp(6px, 1.2vw, 12px) auto 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.sec3-point3-desc-block p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #4a3e44;
  font-size: clamp(13px, 2.4vw, 20px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  margin: 0;
}

/* =====================
   closing（キラキラ背景）
===================== */
.sec3-closing-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 56px) 16px 0; 
  margin-top: clamp(-45px, -5vw, -20px);
  overflow: hidden;
}

.sec3-closing-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sec3-closing-title,
.sec3-model-img,
.sec3-akogare-img {
  position: relative;
  z-index: 1;
}

.sec3-model-img {
  width: 90%;
  max-width: 615px;
  height: auto;
  display: block;
  /* margin-topをautoにすることで、フレックスコンテナ内で一番下に押しやられます */
  margin: auto auto 0; 
}


/* =====================
   小スマホ微調整
===================== */
@media screen and (max-width: 375px) {
  .sec3-point-icon {
    width: 68px;
  }

  .sec3-point-title {
    font-size: clamp(20px, 6.5vw, 30px);
    margin-bottom: 10px;
  }

  .sec3-check-list p,
  .sec3-point2-desc-block p,
  .sec3-point3-desc-block p {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* =====================
   PC微調整
===================== */

  .sec3-point-title {
    font-size: clamp(30px, 4vw, 46px);
  }

  .sec3-check-list p,
  .sec3-point2-desc-block p,
  .sec3-point3-desc-block p {
    font-size: clamp(16px, 1.6vw, 20px);
  }
}

/* ==================================
   7. Section 4
================================== */
.section4-wrapper {
  z-index: 20;
  margin-top: -17.4359%;
}

.sec4-content-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 21;
}

.sec4-ribbon-img {
  width: 85%;
  height: auto;
  display: block;
  margin-top: clamp(12px, 2vw, 20px);
  z-index: 10;
  position: relative;
}

.sec4-campaign-title {
  font-family: "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(30px, 7vw, 54px);
  text-align: center;
  margin-top: 0;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.3;
}

.sec4-white-card {
  background-color: #ffffff;
  width: 92%;
  max-width: 690px;
  border-radius: clamp(24px, 4vw, 32px);
  min-height: 320px;
  margin: 0 auto 12px;
  padding: clamp(22px, 3vw, 30px) clamp(16px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec4-price-img {
  width: 100%;
  max-width: none;
  margin: 0 auto 16px;
  height: auto;
  display: block;
  position: relative;
  z-index: 5;
}

.sec4-usp-img {
  width: 95%;
  height: auto;
  margin-bottom: 10px;
}

.sec4-cta-btn {
  width: 100%;
  display: block;
  transition: transform 0.2s ease-out;
  margin: 0 auto 14px;
  position: relative;
  z-index: 10;
}

.sec4-cta-btn:hover {
  transform: scale(1.03);
}

.sec4-cta-btn:active {
  transform: scale(0.98);
}

.sec4-cta-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.sec4-notes {
  width: 100%;
  text-align: justify;
  padding: 0 10px;
}

.sec4-notes p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #888888;
  font-size: clamp(8px, 2.8vw, 17px);
  line-height: 1.45;
  letter-spacing: 0;
  margin-bottom: 4px;
}

/* ==================================
   8. Section 5
================================== */
.section5-wrapper {
  margin-top: -30px;
  z-index: 1;
  position: relative;
  background-color: #ffffff; /* 見出しの背景が白になるように設定 */
}

/* --- 見出し（縦並びで一番上に配置） --- */
.sec5-h2-image {
  width: 100%;
  height: auto;
  display: block;
  /* position: absolute; は削除！ */
  margin: 0px auto ; /* 上下の余白（モックに合わせて適宜調整してください） */
  position: relative;
  z-index: 10;
}

/* --- 上部エリア（キラキラ背景 ＋ Before/After人物） --- */
.sec5-upper-area {
  width: 100%;
  position: relative; /* ここを起点に人物を絶対配置する */
  z-index: 10;
  overflow: hidden;
}

.sec5-upper-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Before/After比較画像（人物） */
.sec5-ba-image {
  position: absolute;
  bottom: 0; /* 背景の下端にピッタリ合わせる */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; 
  height: auto;
  z-index: 5;
}

/* --- 下部エリア（VC） --- */
.sec5-lower-area {
  width: 100%;
  position: relative;
  z-index: 10;
  overflow: hidden;
  margin-top: -1px; /* 上下エリアの隙間潰し */
}

.sec5-lower-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部のVC画像（チューブと文字） */
.sec5-visual-image {
  position: absolute;
  bottom: 0; /* 背景の下端にピッタリ合わせる */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; 
  height: auto;
  z-index: 5;
}

/* ==================================
   9. Section 6
================================== */
.section6-wrapper {
  margin-top: -2px;
  z-index: 1;
}

.sec6-content-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6%;
  z-index: 10;
}

.sec6-h2-image {
  width: 80%;
  height: auto;
  display: block;
  margin-top: 8%;
  z-index: 10;
  position: relative;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}

.sec6-h3-image {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
  z-index: 10;
  position: relative;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}

.sec6-r1-title {
  margin-top: 25%;
}

.sec6-r1-main-img {
  width: 95%;
  height: auto;
  display: block;
  margin: 25px auto 0;
  border-radius: 10px;
  z-index: 10;
  position: relative;
}

.sec6-desc-block {
  width: 90%;
  margin: 10px auto 30px;
  text-align: left;
  z-index: 10;
  position: relative;
}

.sec6-desc-block p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #4a3e44;
  font-size: clamp(15px, 3.5vw, 27px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0;
  margin-bottom: 3px;
}

.sec6-r1-desc {
  padding-bottom: 40px;
}

.sec6-r2-image {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  margin: 35% auto 0;
  z-index: 10;
  position: relative;
}

.sec6-r2-beauty-img {
  width: 112%;
  max-width: none;
  margin-left: -6%;
  margin-right: -6%;
  height: auto;
  display: block;
  margin-top: 27%;
  border-radius: 0;
  z-index: 5;
  position: relative;
}

.sec6-r2-desc {
  width: 90%;
  max-width: none;
  margin-top: -60px;
  padding-bottom: 60px;
}

.sec6-r3-title {
  width: 95%;
  margin-left: 0;
  margin-right: auto;
  margin-top: 38%;
}

.sec6-r3-main-img {
  width: 95%;
  height: auto;
  display: block;
  margin: 10px auto 0;
  border-radius: 10px;
  z-index: 10;
  position: relative;
}

.sec6-r3-desc {
  width: 94%;
  max-width: none;
  margin-top: 10px;
  padding-bottom: 80px;
}

.sec6-benefit-text-img {
  width: 112%;
  max-width: none;
  margin-left: -6%;
  margin-right: -6%;
  height: auto;
  display: block;
  margin-top: 90%;
  z-index: 20;
  position: relative;
}

@media screen and (min-width: 768px) {
  .sec6-r2-image {
    margin-top: 52%;
  }
    .sec6-r2-desc {
    margin-top: -80px;
  }
    .sec6-r3-title {
    margin-top: 50%;
  }
  .sec6-benefit-text-img{
    margin-top: 110%;
  }
}

/* ==================================
   10. Section 7
================================== */
.section7-wrapper {
  margin-top: -4px;
  z-index: 1;
}

.sec7-content-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5%;
  z-index: 10;
}

.sec7-h2-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-top: 5%;
  z-index: 10;
  position: relative;
}

.sec7-arrow-image {
  width: 10%;
  max-width: 50px;
  height: auto;
  display: block;
  margin: 0 auto;
  z-index: 10;
  position: relative;
}

.sec7-step1-image {
  margin-top: 12%;
  margin-bottom: 1.5%;
}

.sec7-arrow1,
.sec7-arrow2,
.sec7-arrow3 {
  margin-top: 0;
}

.sec7-step2-image,
.sec7-step3-image {
  margin-top: 1%;
  margin-bottom: 1%;
}

.sec7-step4-image {
  margin-top: 1%;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ==================================
   11. Section 8
================================== */
.section8-wrapper {
  margin-top: -60%;
  z-index: 5;
}

.sec8-content-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20%;
  z-index: 10;
}

.sec8-lead-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #4a3e44;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.5;
}

.sec8-numbers-img {
  width: 90%;
  height: auto;
  display: block;
  margin: 8% auto -25px;
}

.sec8-products-img {
  width: 90%;
  height: auto;
  display: block;
  margin: 13% auto 25px;
  z-index: 10;
  position: relative;
}

.align-right-block {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: -35px;
  margin-bottom: 0;
  z-index: 15;
  position: relative;
}

.sec8-note-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  color: #888888;
  margin-right: 5%;
  margin-top: 0;
  margin-bottom: 0;
}

.sec8-copy-img {
  width: 90%;
  height: auto;
  display: block;
  margin: 20px auto 0;
  z-index: 10;
  position: relative;
}

/* ==================================
   12. Section 9
================================== */
.section9-wrapper {
  margin-top: -13%;
  z-index: 4;
}

.sec9-content-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 5%;
  padding-top: 100px;
  z-index: 10;
}

.sec9-recommend-circle {
  width: 50%;
  max-width: 310px;
  height: auto;
  display: block;
  align-self: flex-start;
  margin-top: 0px;
  margin-left: 0;
  z-index: 10;
  position: relative;
}

.sec9-checklist-img {
  width: 90%;
  max-width: 720px;
  height: auto;
  display: block;
  align-self: center;
  margin-top: -40px;
  margin-left: -10%;
  z-index: 10;
  position: relative;
}

.sec9-closing-text-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-self: center;
  margin-top: 24%;
  z-index: 15;
  position: relative;
}

.sec9-to-you {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #ffffff;
  font-size: clamp(24px, 3.5vw, 36px);
  margin: 0;
  line-height: 1.3;
}

.sec9-to-you .is-large {
  display: inline-block;
  font-size: 1.5em;
  line-height: 0.95;
}

.sec9-dots {
  font-family: Arial, sans-serif;
  color: #c7a7b8;
  text-align: center;
  margin: -120px 0 20px;
  align-self: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  z-index: 16;
  position: relative;
}

.fv-copy-top .is-large {
  font-size: 1.45em;
  line-height: 1;
  display: inline-block;
}

.sec9-closing-gold-img {
  width: 97%;
  height: auto;
  display: block;
  margin: 85% auto 0;
  margin-bottom: 0;
  z-index: 10;
  position: relative;
}

@media screen and (min-width: 768px) {
  .sec9-recommend-circle {
    margin-top: 88px;
  }
    .sec9-checklist-img {
    margin-top: -48px;
  }
}


/* ==================================
   13. Section 11（お客様の声）
================================== */
.section11-user-voice-wrapper {
  margin-top: -20px;
  z-index: 10;
  background-color: #ffffff;
  padding-top: 60px;
  padding-bottom: 80px;
}

.sec11-heading-block {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.sec11-heading-img {
  width: 80%;
  max-width: 312px;
  height: auto;
  display: block;
}

.sec11-content-inner {
  width: 100%;
  padding: 0;
}

.sec11-voice-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

.sec11-voice01 {
  align-items: flex-start;
}

.sec11-voice02 {
  align-items: flex-end;
}

.sec11-voice-img {
  width: 85%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 0 0 10px;
}

.sec11-voice02 .sec11-voice-img {
  margin-left: auto;
  margin-right: 0;
}

.sec11-voice-title {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(22px, 5.5vw, 38px);
  color: #4a3e44;
  line-height: 1.4;
  text-align: left;
  margin: 0 0 10px;
}

.sec11-voice-text {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 3vw, 24px);
  color: #666666;
  line-height: 1.8;
  text-align: justify;
  margin: 0 0 10px;
}

.sec11-voice-demo {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 3vw, 22px);
  color: #888888;
  text-align: right;
  margin: 0;
}

.sec11-disclaimer {
  width: 100%;
  max-width: none;
  margin: -12px 0 0;
  padding: 0 5%;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 2.2vw, 12px);
  color: #a0a0a0;
  text-align: right;
}

/* ==================================
   14. Section 12（よくある質問）
================================== */
.section12-wrapper {
  margin-top: -15%;
  z-index: 11;
  background-color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
}

.sec12-heading-block {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.sec12-heading-img {
  width: 100%;
  max-width: 9000px;
  height: auto;
  display: block;
}

.sec12-content-inner {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-item {
  width: 90%;
  margin: 0 auto 20px;
  box-sizing: border-box;
}

.faq-q {
  width: 100%;
  background-color: #c5a3b1;
  padding: 15px 5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.faq-a {
  width: 100%;
  background-color: #f2f2f2;
  padding: 15px 5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.faq-icon-img {
  height: auto;
  display: block;
  margin-right: 14px;
}

.faq-q .faq-icon-img {
  width: 30px;
}

.faq-a .faq-icon-img {
  width: 26px;
}

.faq-text {
 font-size: clamp(16px, 3vw, 24px);
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

.faq-q .faq-text {
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  font-weight: 500;
  color: #ffffff;
}

.faq-a .faq-text {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: #666666;
}

/* ==================================
   15. FOOTER
================================== */
.footer-wrapper {
  background-color: #f7f5f6;
  z-index: 10;
  overflow: hidden;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0 50px;
  gap: 25px;
}

.footer-link {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 0.6;
}

.footer-bottom {
  width: 100%;
  background-color: #c0a4b3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0 40px;
  position: relative;
  border-top-left-radius: 50% 30px;
  border-top-right-radius: 50% 30px;
  margin-top: -20px;
}

.footer-logo {
  width: 60%;
  max-width: 250px;
  height: auto;
  display: block;
  margin-bottom: 25px;
}

.footer-copyright {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #6a5e65;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

/* ==================================
   フローティングCTAボタン（スマホのみ）
================================== */
.floating-cta {
  display: block;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(88%, 360px);
  z-index: 9999;
  transition: transform 0.2s ease-out, opacity 0.2s ease;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.floating-cta img {
  width: 100%;
  height: auto;
  display: block;
}

.floating-cta:hover {
  transform: translateX(-50%) scale(1.03);
}

.floating-cta:active {
  transform: translateX(-50%) scale(0.97);
}

/* PC（750px以上）では非表示 */
@media screen and (min-width: 750px) {
  .floating-cta {
    display: none;
  }
}

/* 20260425 .p-lp__confirm コメントアウト化 */
/*
.p-lp__confirm {
    display: none !important;
}
*/