/* ==========================================================
   キレイ・デ・エクオール LP - FV / CTA
   Mobile-first / container query 単位(cqw)で崩れを防止
   画像が用意されている箇所は画像を使用し、
   画像がない見出し・注釈のみCSS/テキストで再現
========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --red: #c0363c;
  --red-dk: #9c2b30;
  --gray: #7a7167;
  --text: #2c2c2c;
  --heading: #1a1a1a;
  --pink-bg: #ffeff2;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

body {
  font-family: var(--font-gothic);
  color: var(--text);
  background: linear-gradient(160deg, #fffbfb 0%, #fdf3f4 45%, #fbeaec 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

.lp {
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  container-type: inline-size;
  container-name: lp;
}

/* ============ FV ============ */
.fv {
  container-type: inline-size;
  container-name: fv;
  background: #fff;
}

/* --- ビジュアル（実写：fv_bg／上部の余白をトリミングしてパッケージを近づける） --- */
.fv__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 850 / 1227;
  overflow: hidden;
}
.fv__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* --- リード見出し（画像なし：ゴシック体で再現／背景写真の中に収める） --- */
.fv__lead {
  position: absolute;
  top: 6%;
  left: 4%;
  right: 4%;
  z-index: 4;
  text-align: center;
}
.fv__lead-title {
  font-family: var(--font-gothic);
  font-size: clamp(15px, 6cqw, 51px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--heading);
  border-bottom: 2px solid #999;
  display: inline-block;
  padding-bottom: 1cqw;
  margin: 0;
  text-shadow:
    0 0 6px #fff,
    0 0 10px #fff,
    0 0 16px #fff,
    0 0 22px #fff;
}

/* --- キャッチコピー（画像：fv_catch.png／背景写真の中に収める） --- */
.fv__catch {
  position: absolute;
  top: 15%;
  left: 8%;
  right: 8%;
  z-index: 4;
}

/* エンブレム（画像：emblem01-03.png／縦方向に均等配置） */
.fv__emblems {
  position: absolute;
  top: 38%;
  right: 3%;
  width: 26%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  align-items: center;
}
.fv__emblem {
  width: 100%;
  display: block;
}

/* --- 2色帯（画像：fv_point.png） --- */
.fv__point {
  margin-top: -1px;
}

/* --- 3冠達成 --- */
.fv__crown {
  text-align: center;
  padding: 5cqw 2cqw;
}
/* 画像なし：明朝体で再現 */
.fv__crown-lead {
  font-family: var(--font-mincho);
  font-size: clamp(13px, 4cqw, 34px);
  color: #333;
  margin: 0 0 2cqw;
}
.fv__crown-title {
  font-family: var(--font-mincho);
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 5.6cqw, 48px);
  padding: 1.6cqw 6cqw;
  margin: 0 0 6cqw;
}
/* 画像：fv_3kan.png */
.fv__crown-img {
  margin: 0 auto;
  width: 88%;
}

/* ============ CTA ============ */
.cta {
  padding: 8% 4%;
  container-type: inline-size;
  container-name: cta;
  background-image: image-set(url(../bg/cta_bg.png.webp) type("image/webp"), url(../bg/cta_bg.png) type("image/png"));
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}
.cta__card {
  border: 3px solid var(--red);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
  container-name: ctacard;
}

/* --- 上部帯：公式サイト限定キャンペーン --- */
.cta__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  background: linear-gradient(155deg, #d5535a 0%, var(--red) 55%, var(--red-dk) 100%);
  padding: 6cqw 4cqw;
}
.cta__badge-slash {
  color: #fff;
  font-size: clamp(16px, 7cqw, 55px);
  font-weight: 300;
  line-height: 1;
}
.cta__badge-text {
  color: #fff;
  font-size: clamp(17px, 6.4cqw, 50px);
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* --- 商品・価格エリア --- */
.cta__body {
  padding: 7cqw 6cqw 0;
}
.cta__top {
  display: flex;
  align-items: center;
  gap: 5cqw;
  margin-bottom: 4cqw;
}
.cta__pkg {
  width: 34%;
  flex-shrink: 0;
}
.cta__info {
  flex: 1;
  min-width: 0;
}
.cta__course {
  display: inline-block;
  border: 1.5px solid var(--text);
  color: var(--text);
  font-size: clamp(10px, 3.2cqw, 30px);
  font-weight: 700;
  padding: 1.6cqw 3cqw;
  margin-bottom: 3cqw;
}
.cta__brand-en {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(13px, 4.6cqw, 42px);
  color: var(--text);
  margin: 0 0 1cqw;
}
.cta__brand-jp {
  font-family: var(--font-gothic);
  font-size: clamp(14px, 4.8cqw, 48px);
  font-weight: 900;
  color: var(--heading);
  line-height: 1.3;
  margin: 0 0 1.6cqw;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6em;
}
.cta__brand-note {
  font-size: clamp(9px, 2.8cqw, 25px);
  font-weight: 500;
  color: var(--gray);
}
.cta__tagline {
  font-size: clamp(11px, 3.4cqw, 31px);
  color: var(--gray);
  margin: 0;
}

/* --- 価格（画像：assets/parts/cta/price.png） --- */
.cta__price-img {
  line-height: 0;
}

/* --- ボタン（画像：assets/parts/cta/cta_btn.png） --- */
.cta__btn {
  display: block;
  line-height: 0;
  margin: 1rem 2cqw 7cqw;
  animation: cta-btn-bounce 1.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes cta-btn-bounce {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 4px 10px rgba(192,54,60,.25)); }
  50% { transform: scale(1.05) translateY(-6px); filter: drop-shadow(0 8px 20px rgba(192,54,60,.5)); }
}
/* --- 定期注記 --- */
.cta__legal {
  padding: 10px 20px 32px;
  font-family: var(--font-gothic);
}
.cta__legal-list {
  list-style: disc;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.cta__legal-list li {
  font-size: clamp(8px, 2.2cqw, 14px);
  color: #666;
  line-height: 1.8;
}

/* ============ 4大特典 ============ */
.tokuten {
  padding: 6cqw 4% 10cqw;
  container-type: inline-size;
  container-name: tokuten;
  background-image: image-set(url(../bg/cta_bg.png.webp) type("image/webp"), url(../bg/cta_bg.png) type("image/png"));
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}
.tokuten__heading {
  text-align: center;
  margin-bottom: 6cqw;
}
.tokuten__heading img {
  width: 84%;
  margin: 0 auto;
}

.tokuten__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqw;
}
.tokuten__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4cqw;
  background: #fff;
  border: 1px solid #ecdfd6;
  border-radius: 6px;
  padding: 5cqw 3.5cqw;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  container-type: inline-size;
  container-name: tokutenitem;
}
.tokuten__badge {
  flex-shrink: 0;
  width: 20cqw;
  height: 20cqw;
  min-width: 60px;
  min-height: 60px;
  max-width: 147px;
  max-height: 147px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3da9a 0%, #d4af58 45%, #a97e2c 100%);
  color: #4a3413;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.tokuten__badge span {
  font-size: clamp(10px, 3cqw, 32px);
  font-weight: 700;
}
.tokuten__badge strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 6.4cqw, 67px);
  font-weight: 700;
  line-height: 1;
}
.tokuten__text {
  flex: 1;
  min-width: 0;
}
.tokuten__lead {
  font-size: clamp(13px, 3.6cqw, 42px);
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 1cqw;
}
.tokuten__highlight {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-weight: 900;
  color: var(--red);
  font-size: clamp(24px, 8cqw, 90px);
  line-height: 1.2;
  margin: 0;
}
.tokuten__highlight--small {
  font-size: clamp(17px, 5.6cqw, 61px);
}
.tokuten__highlight-inline {
  display: inline-block;
  margin-left: 2cqw;
  font-weight: 900;
  color: var(--red);
  font-size: clamp(24px, 8cqw, 90px);
  line-height: 1;
  vertical-align: middle;
}
.tokuten__highlight-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11cqw;
  height: 11cqw;
  min-width: 40px;
  min-height: 40px;
  max-width: 93px;
  max-height: 93px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-size: clamp(9px, 2.4cqw, 24px);
  font-weight: 700;
  line-height: 1.2;
}
.tokuten__highlight-sub {
  font-size: clamp(13px, 3.6cqw, 38px);
  font-weight: 700;
  color: var(--text);
}

/* ============ お悩みセクション（preview.htmlより移植） ============ */
.onayami {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  aspect-ratio: 850 / 1434;
  overflow: hidden;
  container-type: inline-size;
}
.onayami-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.onayami-title {
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  width: 15.6cqw;
  margin: 0 auto;
  z-index: 2;
  writing-mode: vertical-rl;
  font-size: 12cqw;
  font-weight: 900;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: .03em;
  font-family: var(--font-mincho);
}
.onayami-title .r {
  color: var(--red);
}
.onayami-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  background: #fff;
  z-index: 2;
}
.onayami-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.onayami-circle--1 { top: 13%; left: 2%; width: 32%; aspect-ratio: 1/1; }
.onayami-circle--2 { top: 36%; right: 2%; width: 30%; aspect-ratio: 1/1; }
.onayami-circle--3 { top: 60%; left: 3%; width: 30%; aspect-ratio: 1/1; }
.onayami-circle--4 { top: 76%; right: 4%; width: 32%; aspect-ratio: 1/1; }

/* ============ AWARD / 3冠達成（preview.htmlより移植） ============ */
.evidence {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  aspect-ratio: 850 / 1216;
  overflow: hidden;
}
.evidence-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.evidence-emblem {
  position: absolute;
  top: 44%;
  right: 6%;
  width: 37%;
  z-index: 2;
}
.evidence-emblem img {
  width: 100%;
  display: block;
}
.award-note {
  font-size: clamp(8px, 2.4cqw, 32px);
  color: #888;
  line-height: 1.7;
  padding: 12px 16px;
  font-family: var(--font-gothic);
  background-color: rgb(248, 237, 236);
  margin: 0 !important;
}

/* ============ EVIDENCE（No.1） ============ */
.evidence-no1 {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  container-type: inline-size;
  container-name: evidenceno1;
}
.evidence-no1__bg {
  width: 100%;
  display: block;
}
.evidence-no1__title {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  z-index: 2;
}
.evidence-no1__title img {
  width: 100%;
  display: block;
}
.evidence-no1__emblem {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 61%;
  z-index: 2;
}
.evidence-no1__emblem img {
  width: 100%;
  display: block;
}
.award-note--no1 {
  background-color: rgb(255, 255, 255);
}

/* ============ EVIDENCE2（さらに！） ============ */
.evidence2 {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: evidence2;
}
.evidence2__bg {
  position: absolute;
  top: -35%;
  left: 0;
  width: 100%;
  height: 170%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}
.evidence2__inner {
  position: relative;
  z-index: 1;
  padding: 10cqw 6cqw 8cqw;
}

/* 画像なし：CSS/テキストで再現 */
.evidence2__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  margin: 0 0 8cqw;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(24px, 8cqw, 102px);
  color: var(--heading);
}
.evidence2__heading-slash {
  font-weight: 300;
  color: var(--text);
  font-size: clamp(16px, 5cqw, 64px);
}

.evidence2__stats {
  display: flex;
  gap: 4cqw;
  margin-bottom: 8cqw;
}
.evidence2__stat {
  flex: 1;
  min-width: 0;
  line-height: 0;
}
.evidence2__stat img {
  width: 100%;
  display: block;
}

.evidence2__medals {
  margin-bottom: 6cqw;
}
.evidence2__medals img {
  width: 100%;
  display: block;
}

.evidence2__note {
  font-size: clamp(10px, 2.6cqw, 35px);
  color: #7a7167;
  margin: 0;
}

/* ============ POINT ============ */
.point {
  background: #f7f4f0;
  container-type: inline-size;
  container-name: point;
}
.point__catch {
  position: absolute;
  left: 0;
  right: 0;
  top: 4%;
  z-index: 2;
  text-align: center;
  padding: 0 6cqw;
}
.point__catch img {
  width: 92%;
  margin: 0 auto;
}

/* --- POINTブロック共通 --- */
.point__block {
  position: relative;
}
.point__photo {
  position: relative;
  line-height: 0;
  background: rgb(235, 231, 223);
}
.point__photo img {
  width: 100%;
  display: block;
}
/* 画像なし：CSS/テキストで再現（墨黒） */
.point__label {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  text-align: center;
  color: var(--text);
  line-height: 1;
}
.point__label-en {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(16px, 5.4cqw, 74px);
  letter-spacing: .04em;
}
.point__label-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(36px, 13cqw, 178px);
  margin-top: 1cqw;
}

.point__card {
  position: relative;
  margin: -20% 5% 12cqw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 9cqw 6cqw 8cqw;
  text-align: center;
  z-index: 3;
}
.point__card-badge {
  position: absolute;
  top: -4%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: clamp(30px, 10cqw, 85px);
}
.point__card-title {
  font-family: var(--font-gothic);
  font-size: clamp(20px, 7cqw, 96px);
  font-weight: 900;
  color: var(--heading);
  margin: 1.6cqw 0 2.4cqw;
}
.point__card-sub {
  font-size: clamp(13px, 4cqw, 54px);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4cqw;
}
.point__card-text {
  font-size: clamp(13px, 3.6cqw, 50px);
  color: var(--gray);
  line-height: 1.9;
  margin: 0;
}

/* --- ブロックごとの写真比率に合わせた重なり調整 --- */
.point__block--02 .point__label,
.point__block--03 .point__label,
.point__block--04 .point__label {
  top: 52%;
}
.point__block--02 .point__card { margin-top: -10%; }
.point__block--03 .point__card { margin-top: -9%; }
.point__block--04 .point__card { margin-top: -12%; }

.point__block--03 .point__photo {
  background: #b9c1bd;
  padding-bottom: 10cqw;
}
.point__block--04 .point__photo {
  background: #c4d1d6;
  padding-bottom: 10cqw;
}

/* --- POINT02：EC-12の見出し --- */
.point__card-title-en {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

/* --- 腸内環境イラスト（画像：assets/parts/point/nyusankin.png／カード内に内包） --- */
.point__illust {
  text-align: center;
  margin-top: 6cqw;
}
.point__illust img {
  width: 84%;
  margin: 0 auto;
}

/* --- POINT04：引用バナー／カプセル比較 --- */
.point__quote {
  margin: 6cqw -6cqw;
  line-height: 0;
}
.point__quote img {
  width: 100%;
  display: block;
}
.point__compare {
  margin-top: 2cqw;
  line-height: 0;
}
.point__compare img {
  width: 100%;
  display: block;
}

/* ============ QUALITY ============ */
.quality {
  background: #e6efef;
  container-type: inline-size;
  container-name: quality;
}

/* --- ヒーロー（画像：assets/bg/quality.jpg.png／「High Quality」文字含む） --- */
.quality__hero {
  position: relative;
  line-height: 0;
}
.quality__hero-bg {
  width: 100%;
  display: block;
}
/* 画像なし：CSS/テキストで再現 */
.quality__hero-text {
  position: absolute;
  top: 22%;
  right: 10%;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 3cqw;
}
.quality__hero-note {
  writing-mode: vertical-rl;
  font-size: clamp(11px, 3cqw, 42px);
  color: #333;
  letter-spacing: .15em;
  margin: 0;
}
.quality__hero-catch {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: clamp(19px, 6.4cqw, 86px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--heading);
  margin: 0;
}

/* --- QUALITYブロック共通 --- */
.quality__block {
  padding: 5cqw 7% 5cqw;
  text-align: left;
}
.quality__block--01 {
  padding-top: 2cqw;
}
.quality__num {
  margin-bottom: 1.5cqw;
  text-align: center;
}
.quality__num img {
  width: clamp(60px, 14cqw, 120px);
  margin: 0 auto;
}
.quality__title {
  font-family: var(--font-gothic);
  font-size: clamp(22px, 7.4cqw, 70px);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.4;
  margin: 0 0 2cqw;
  text-align: center;
}
.quality__sub {
  font-size: clamp(14px, 4cqw, 38px);
  font-weight: 700;
  color: #444;
  line-height: 1.8;
  margin: 0 0 4cqw;
  text-align: center;
}

/* 写真（左寄せ／最前面）＋写真の下に重なる白いテキストエリア */
.quality__photo-wrap {
  position: relative;
  z-index: 2;
  width: 85%;
  margin: 0 0 0 -7%;
}
.quality__photo {
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
  line-height: 0;
}
.quality__photo img {
  width: 100%;
  display: block;
}

.quality__text-wrap {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  margin: -18% -7% 5cqw 16%;
  padding: 18cqw 7% 5cqw;
  text-align: left;
}
.quality__text {
  font-size: clamp(14px, 3.8cqw, 38px);
  color: #333;
  line-height: 1.9;
  margin: 0 0 4cqw;
}
.quality__text:last-child {
  margin-bottom: 0;
}
.quality__text mark {
  background: none;
  color: var(--red);
  font-weight: 700;
}

/* ============ こんな変化を感じていませんか？ ============ */
.onayami2 {
  background: #fff;
  padding: 10cqw 0 0;
  container-type: inline-size;
  container-name: onayami2;
}
.onayami2__title {
  text-align: center;
  padding: 0 6% 6cqw;
}
.onayami2__title img {
  width: 84%;
  margin: 0 auto;
}

.onayami2__stage {
  position: relative;
  overflow: hidden;
  padding-top: 71%;
}
.onayami2__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* 画像なし：CSS/テキストで再現 */
.onayami2__checklist {
  position: relative;
  z-index: 1;
  margin: -18% 6% 8cqw;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 4cqw 5%;
}
.onayami2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
}
.onayami2__list li {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  background: #eeeeee;
  border-radius: 6px;
  padding: 1.8cqw 3cqw;
  font-family: var(--font-gothic);
  font-size: clamp(11px, 3.1cqw, 32px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.onayami2__list li img {
  flex-shrink: 0;
  width: clamp(16px, 4.6cqw, 28px);
  height: auto;
}

.onayami2__lead {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: clamp(14px, 4cqw, 38px);
  font-weight: 700;
  color: #333;
  margin: 4cqw 0 0;
}
.onayami2__badge {
  position: relative;
  z-index: 2;
  margin: 3cqw auto 0;
  transform: translateY(50%);
  width: 15cqw;
  height: 15cqw;
  min-width: 56px;
  min-height: 56px;
  max-width: 141px;
  max-height: 141px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(13px, 3.6cqw, 32px);
  box-shadow: 0 8px 20px rgba(192,54,60,.35);
}
.onayami2__intro {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0;
}
.onayami2__intro img {
  width: 82%;
  margin: 0 auto;
  display: block;
}

/* ============ 年齢による変化のサイン〜理由 ============ */
.reason {
  background: #fff;
  container-type: inline-size;
  container-name: reason;
}

.reason__photo {
  line-height: 0;
}
.reason__photo img {
  width: 100%;
  display: block;
}

.reason__body {
  padding: 8cqw 6cqw 10cqw;
}
.reason__body-title {
  margin-bottom: 5cqw;
}
.reason__body-title img {
  width: 100%;
  display: block;
}
.reason__text {
  font-size: clamp(14px, 4cqw, 38px);
  color: #333;
  line-height: 1.9;
  margin: 0 0 6cqw;
}
.reason__graph img {
  width: 100%;
  display: block;
}

/* しかし の遷移矢印（画像：shikashi.png） */
.reason__arrow {
  background: var(--pink-bg);
  text-align: center;
  padding: 8cqw 6cqw;
}
.reason__arrow img {
  width: 30%;
  margin: 0 auto;
}

/* だから：商品紹介〜以下、背景色を統一 */
.reason__product {
  background: var(--pink-bg);
}
.reason__product > picture > img {
  width: 100%;
  display: block;
  margin-bottom: 4cqw;
}
.reason__product-catch {
  position: relative;
  text-align: center;
  padding: 2cqw 6cqw 4cqw;
}
.reason__product-catch img {
  position: relative;
  z-index: 1;
  width: 74%;
  margin: 0 auto;
}
.reason__product .reason__text {
  padding: 0 6cqw;
  text-align: center;
  margin-bottom: 0;
}

/* 大豆イソフラボンの図解 */
.reason__diagram {
  background: var(--pink-bg);
  padding: 8cqw 6cqw;
}
.reason__diagram img {
  width: 100%;
  display: block;
}

.reason__warning {
  background: var(--pink-bg);
  text-align: center;
  font-family: var(--font-gothic);
  font-size: clamp(20px, 7cqw, 67px);
  font-weight: 900;
  color: var(--heading);
  line-height: 1.5;
  padding: 0 6cqw 8cqw;
  margin: 0;
}
.reason__warning-mark {
  font-size: clamp(30px, 11cqw, 96px);
  color: var(--red);
  text-decoration: underline wavy;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.reason__warning-sub {
  display: inline-block;
  font-size: clamp(14px, 5cqw, 45px);
  white-space: nowrap;
}

.reason__compare {
  background: var(--pink-bg);
  padding: 0 6cqw 10cqw;
}
.reason__compare img {
  width: 100%;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

/* ============ 内側環境ケアへの導入 ============ */
.innerenv {
  container-type: inline-size;
  container-name: innerenv;
}

/* 画像なし：ゴシック体で再現 */
.innerenv__lead {
  background: var(--pink-bg);
  padding: 8cqw 6cqw;
}
.innerenv__lead-text {
  font-family: var(--font-gothic);
  font-size: clamp(14px, 4cqw, 32px);
  color: var(--heading);
  line-height: 2;
  margin: 0;
}

/* 画像：kyusyu_image.png（「だからこそ」含む）＋ 縦組みテキストのオーバーレイ */
.innerenv__visual {
  position: relative;
}
.innerenv__visual img {
  width: 100%;
  display: block;
}
.innerenv__visual-text {
  position: absolute;
  top: 25%;
  left: 40%;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(18px, 5.4cqw, 48px);
  color: var(--text);
  letter-spacing: .05em;
  line-height: 1.5;
  margin: 0;
}

/* 画像：jikkan.png（実感できる／内側環境を整えることに着目しました。を含む） */
.innerenv__catch {
  background: #f1f5f7;
  padding: 12cqw 6cqw 10cqw;
}
.innerenv__catch-badge {
  display: block;
  width: 100%;
  margin: 0;
}

/* ============ 実感力の理由はエクオールだけじゃない ============ */
.wapproach {
  background: var(--pink-bg);
  container-type: inline-size;
}
.wapproach__visual img {
  width: 100%;
  display: block;
}
/* 画像なし：ゴシック体で再現（写真に少し重ねる） */
.wapproach__catch {
  position: relative;
  z-index: 1;
  margin-top: -50cqw;
  text-align: center;
}
.wapproach__catch-lead {
  font-family: var(--font-gothic);
  font-size: clamp(15px, 4.2cqw, 32px);
  color: var(--heading);
  margin: 0 0 1cqw;
}
.wapproach__catch-main {
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(20px, 7.2cqw, 61px);
  color: var(--heading);
  white-space: nowrap;
  margin: 0 0 5cqw;
}
.wapproach__catch-mark {
  color: var(--red);
}
.wapproach__catch-text {
  font-family: var(--font-gothic);
  font-size: clamp(13px, 3.6cqw, 29px);
  color: var(--gray);
  line-height: 1.9;
  margin: 0;
}
.wapproach__catch-text::before {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: #ddd;
  margin: 0 auto 4cqw;
}

/* ============ 薬剤師コメント ============ */
.comment {
  background: #ede5e6;
  padding-top: 8cqw;
  container-type: inline-size;
}
.comment__head {
  position: relative;
  padding: 0 6cqw 8cqw;
}
.comment__watermark {
  position: absolute;
  top: -2cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  z-index: 0;
}
.comment__title {
  position: relative;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(20px, 7cqw, 58px);
  color: var(--heading);
  line-height: 1.3;
  margin: 4cqw 0 6cqw;
  padding-bottom: 4cqw;
  border-bottom: 1px solid #ddd;
}
.comment__profile {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4cqw;
  align-items: flex-start;
}
.comment__profile-photo {
  width: 36%;
  flex-shrink: 0;
}
.comment__profile-photo img {
  width: 100%;
  display: block;
  border-radius: 4px;
}
.comment__profile-info {
  flex: 1;
  min-width: 0;
}
.comment__profile-name {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(15px, 4.2cqw, 32px);
  color: var(--heading);
  margin: 0 0 2cqw;
}
.comment__profile-name span {
  display: block;
  font-size: clamp(11px, 3cqw, 22px);
  font-weight: 400;
  color: var(--red);
  margin-bottom: 1cqw;
}
.comment__profile-bio {
  font-family: var(--font-gothic);
  font-size: clamp(11px, 3cqw, 22px);
  color: var(--gray);
  line-height: 1.8;
  margin: 0;
}

.comment__quote {
  position: relative;
  margin: 8cqw 6cqw 10cqw;
  border-radius: 8px;
  overflow: hidden;
}
.comment__quote-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 0;
}
.comment__quote-body {
  position: relative;
  z-index: 1;
  padding: 14cqw 7cqw 8cqw;
}
.comment__quote-title {
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(22px, 6.4cqw, 51px);
  color: var(--heading);
  line-height: 1.5;
  margin: 0 0 6cqw;
}
.comment__quote-text {
  font-family: var(--font-gothic);
  font-size: clamp(14px, 3.6cqw, 27px);
  color: #333;
  line-height: 2;
  margin: 0 0 4cqw;
}
.comment__quote-text strong {
  color: var(--red);
  font-weight: 700;
}

/* ============ 選ばれる理由（比較表） ============ */
.reasontable {
  background-image: image-set(url(../bg/hikaku_bg.jpg.webp) type("image/webp"), url(../bg/hikaku_bg.jpg) type("image/jpeg"));
  background-size: cover;
  background-position: top center;
  text-align: center;
  padding: 10cqw 6cqw 12cqw;
  container-type: inline-size;
}
.reasontable__head-en {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(12px, 3.4cqw, 26px);
  color: var(--red);
  letter-spacing: .15em;
  margin: 0 0 2cqw;
}
.reasontable__head-ja {
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(24px, 7cqw, 58px);
  color: var(--heading);
  margin: 0 0 6cqw;
}
.reasontable__head-ja span {
  font-weight: 400;
}
.reasontable__table img {
  width: 100%;
  display: block;
}

/* ============ お客様の声 ============ */
.voice2 {
  background-image: image-set(url(../bg/review_bg.jpg.webp) type("image/webp"), url(../bg/review_bg.jpg) type("image/jpeg"));
  background-size: cover;
  background-position: top center;
  padding: 10cqw 0 12cqw;
  container-type: inline-size;
}
.voice2__head {
  padding: 0 6cqw 8cqw;
}
.voice2__head img {
  width: 100%;
  display: block;
}
.voice2__card {
  margin: 0 5cqw 8cqw;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(150, 60, 70, .12);
}
.voice2__card-photo img {
  width: 100%;
  display: block;
}
.voice2__card-body {
  padding: 6cqw 6cqw 7cqw;
}
.voice2__card-num {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 5cqw, 38px);
  color: var(--red);
  letter-spacing: .05em;
  margin: 0 0 3cqw;
  padding-bottom: 3cqw;
  border-bottom: 1px solid #eee;
}
.voice2__card-text {
  font-family: var(--font-gothic);
  font-size: clamp(13px, 3.6cqw, 26px);
  color: #333;
  line-height: 1.9;
  margin: 0 0 3cqw;
}
.voice2__card-text strong {
  color: var(--red);
  font-weight: 700;
}
.voice2__card-attr {
  text-align: right;
  font-family: var(--font-gothic);
  font-size: clamp(12px, 3.2cqw, 22px);
  color: var(--gray);
  margin: 0;
}
.voice2__note {
  font-family: var(--font-gothic);
  font-size: clamp(10px, 2.8cqw, 19px);
  color: var(--gray);
  text-align: center;
  margin: 0;
  padding: 0 6cqw;
}

/* ============ アップセル ============ */
.upsale {
  background: #fff;
  container-type: inline-size;
}
.upsale__warning img {
  width: 100%;
  display: block;
}
/* 画像なし：ゴシック体で再現 */
.upsale__lead {
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(16px, 4.6cqw, 35px);
  color: var(--heading);
  line-height: 1.6;
  margin: 0;
  padding: 8cqw 6cqw;
}

.upsale__offer {
  position: relative;
  margin: 0 5cqw 10cqw;
  padding: 8cqw 5cqw 6cqw;
  border: 2px solid var(--red);
  border-radius: 8px;
  background: #fff;
}
.upsale__offer-badge {
  position: absolute;
  top: -4.5cqw;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: linear-gradient(155deg, #e8c874 0%, #c9a24c 50%, #e8c874 100%);
  color: #fff;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(13px, 3.8cqw, 29px);
  padding: 2.4cqw 5cqw;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(150, 110, 30, .25);
}
.upsale__offer-lead {
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(14px, 4cqw, 30px);
  color: var(--heading);
  line-height: 1.6;
  margin: 3cqw 0 4cqw;
}
.upsale__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5cqw;
  margin-bottom: 5cqw;
}
.upsale__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  border-radius: 999px;
  padding: 1.6cqw 4cqw;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(12px, 3.4cqw, 26px);
  color: #333;
  line-height: 1.3;
}
.upsale__tag--accent {
  border-color: var(--red);
  color: var(--red);
}
.upsale__tag small {
  font-size: .6em;
  font-weight: 400;
  color: var(--gray);
}
.upsale__tag-plus {
  font-weight: 700;
  font-size: clamp(16px, 4.4cqw, 32px);
  color: #999;
}
.upsale__tag-suffix {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(12px, 3.4cqw, 26px);
  color: #333;
}
.upsale__photo img,
.upsale__price img {
  width: 100%;
  display: block;
}
.upsale__photo--lg {
  margin: 0 -3.5cqw;
}
.upsale__price {
  margin-top: 3cqw;
}
.upsale__note {
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(13px, 3.6cqw, 27px);
  color: var(--red-dk);
  margin: 4cqw 0;
}
.upsale__btn {
  display: block;
}
.upsale__btn img {
  width: 100%;
  display: block;
}
.upsale__small-note {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: clamp(10px, 2.8cqw, 19px);
  color: var(--gray);
  margin: 3cqw 0 0;
}

.upsale__more {
  text-align: center;
  padding: 0 6cqw 8cqw;
}
.upsale__more-lead {
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(24px, 7.4cqw, 54px);
  color: var(--red-dk);
  margin: 0 0 2cqw;
}
.upsale__more-sub {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(15px, 4.4cqw, 32px);
  color: var(--red);
  margin: 0;
}

.upsale__single {
  text-align: center;
  padding: 4cqw 6cqw 12cqw;
}
.upsale__single-lead {
  font-family: var(--font-gothic);
  font-size: clamp(13px, 3.6cqw, 26px);
  color: var(--gray);
  margin: 0 0 4cqw;
}
.upsale__single-btn {
  display: block;
}
.upsale__single-btn img {
  width: 100%;
  display: block;
}

/* ============ 大画面での崩れ防止 ============ */
@media (min-width: 851px) {
  body { padding: 40px 0; }
  .lp { box-shadow: 0 12px 48px rgba(150,60,60,.14); }

  /* 4大特典: グリッド2列でカード幅が半分になり、コンテナクエリの参照幅が
     狭くなるため、cqwベースの値が最大値に達しないまま最小値付近で
     頭打ちになる。実ビューポート幅で判定してPC時のみ拡大する。 */
  .tokuten__badge {
    width: 100px;
    height: 100px;
  }
  .tokuten__badge span {
    font-size: 15px;
  }
  .tokuten__badge strong {
    font-size: 32px;
  }
  .tokuten__lead {
    font-size: 19px;
  }
  .tokuten__highlight {
    font-size: 30px;
  }
  .tokuten__highlight--small {
    font-size: 22px;
  }
  .tokuten__highlight-inline {
    font-size: 30px;
  }
  .tokuten__highlight-badge {
    width: 46px;
    height: 46px;
    font-size: 13px;
  }
  .tokuten__highlight-sub {
    font-size: 17px;
  }
}

/* ============ 商品詳細 ============ */
.seibun {
  max-width: 850px;
  margin: 0 auto;
  container-type: inline-size;
  background: #fff;
  padding: 8cqw 6cqw;
}
.seibun h1 {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: clamp(17px, 5cqw, 26px);
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 6cqw;
  padding-bottom: 3cqw;
  border-bottom: 2px solid var(--red);
}
.seibun .Contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
}
.seibun .box {
  background: var(--pink-bg);
  border-radius: 8px;
  padding: 4cqw 4.5cqw;
}
.seibun .boxTitle {
  font-family: var(--font-gothic);
  font-size: clamp(12px, 3.2cqw, 14px);
  font-weight: 700;
  color: var(--red);
  margin: 0 0 1.5cqw;
}
.seibun .boxInner {
  font-size: clamp(11px, 2.8cqw, 13px);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

/* ============ フッター（注意書き・アコーディオン） ============ */
.cf::after {
  content: '';
  display: block;
  clear: both;
}
footer {
  background: #f6efee;
}
footer .footer {
  max-width: 850px;
  margin: 0 auto;
  container-type: inline-size;
  padding: 8cqw 6cqw 12cqw;
}
footer .footer > img {
  width: 100%;
  display: block;
  border-radius: 8px;
  margin: 0 0 6cqw;
}

.attention {
  background: #fff;
  border: 1px solid #e6cdd0;
  border-left: 4px solid var(--red);
  border-radius: 6px;
  padding: 5cqw 5.5cqw;
  margin: 0 0 8cqw;
}
.attention h2 {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-family: var(--font-gothic);
  font-size: clamp(14px, 3.8cqw, 18px);
  font-weight: 700;
  color: var(--red-dk);
  margin: 0 0 3cqw;
  line-height: 1.4;
}
.attention h2::before {
  content: '!';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: .85em;
  line-height: 1;
}
.attention p {
  font-size: clamp(11px, 2.8cqw, 13px);
  color: var(--gray);
  line-height: 1.9;
  margin: 0;
}

.accordion {
  display: block;
}
.accordion .toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.accordion .Label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  background: #fff;
  border: 1px solid #e8dcd6;
  border-radius: 6px;
  padding: 3.5cqw 4.5cqw;
  margin: 0 0 1.5cqw;
  font-family: var(--font-gothic);
  font-size: clamp(12px, 3.2cqw, 15px);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s;
}
.accordion .Label:hover {
  background: var(--pink-bg);
}
.accordion .Label.fontRed {
  color: var(--red);
  border-color: var(--red);
}
.accordion .Label::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.4em;
  font-weight: 400;
  color: var(--red);
  line-height: 1;
  transition: transform .2s;
}
.accordion .toggle:checked + .Label {
  background: var(--pink-bg);
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}
.accordion .toggle:checked + .Label::after {
  transform: rotate(135deg);
}
.accordion .content {
  display: none;
  background: #fff;
  border: 1px solid #f0e6e2;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 4cqw 4.5cqw;
  margin: 0 0 1.5cqw;
}
.accordion .toggle:checked + .Label + .content {
  display: block;
}
.accordion .content ol {
  margin: 0;
  padding-left: 5cqw;
}
.accordion .content li {
  font-size: clamp(11px, 2.8cqw, 13px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 1cqw;
}
.accordion .content .listInner {
  font-size: clamp(10px, 2.6cqw, 12px);
  color: var(--gray);
  line-height: 1.8;
  margin: 0 0 4cqw;
}
.accordion .content p,
.accordion .content dd {
  font-size: clamp(11px, 2.8cqw, 13px);
  color: var(--gray);
  line-height: 1.9;
  margin: 0;
}
.accordion .content dl {
  margin: 0;
}
.accordion .content a {
  color: var(--red);
}