@charset "UTF-8";

/* Variable Fontで中間ウェイト350を使用。通常文字は350、強調は400・500を個別指定。 */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@100..900&display=swap');


/* ===== テンプレートの管理方針 =====
   ・LPの最大幅は750px。ブラウザが狭い場合は横幅100%。
   ・文字サイズは768px未満／768px以上の2つの設定欄で個別管理。
   ・768pxはBootstrapのmd、Tailwind CSSのmd（48rem・標準換算768px）
     として採用されている一般的な区切りを参考にした初期値。
     https://getbootstrap.com/docs/5.3/layout/breakpoints/
     https://tailwindcss.com/docs/responsive-design
   ・端末そのものを判定する設定ではなく、ブラウザの表示幅で切り替える。
   ・最大幅と切替幅は独立して管理する。最大幅を変更した際は、
     切替付近で見出しの折り返し・本文・ナビの収まりを確認し、必要なら切替幅も調整。
   ・将来の部品も同じ切替幅と文字サイズ変数を使い、設定の重複を避ける。
   ・スマホは430pxを基準に文字サイズを一律縮小（375px以下で固定）。PCは従来値を維持。
*/

/* ===== 共通設定：幅・余白 ===== */
:root {
  --lp-max-width: 750px;
  --lp-padding-x: 20px;
  --lp-padding-y: 40px;
  /* 英字・数字はJost、日本語はNoto。明朝見出し内の英数字もJostで統一 */
  --lp-font-sans: "Jost", "Noto Sans JP", sans-serif;
  --lp-font-serif: "Jost", "Noto Serif JP", serif;
  --lp-color-text: #262521;
  --lp-color-page: #fff;
  --lp-color-outside: #fff;
  /* 背景色：増やす場合は変数と末尾の背景クラスを追加 */
  --lp-color-bg-sand: rgba(234, 229, 221, 0.39);
  --lp-color-bg-gray: #E2E4E5;
  --lp-color-bg-light: #F9F9F9;
  /* 区切り線：上下それぞれ本文2.5行分。本文サイズ・行間に連動 */
  --lp-divider-color-warm: #cdcdbc;
  --lp-divider-color-gray: #969696;
  --lp-divider-width: 1px;
  --lp-divider-space-lines: 2.5;
  --lp-empty-slide-height: 280px; /* 空のテンプレートを確認するための高さ */
}
.lp-number-serif {
  font-family: "Noto Serif JP", "Times New Roman", serif;
}

/* ===== スマホ用文字サイズ・行間・上下余白：画面幅768px未満 =====
   430pxから375pxまで共通倍率で縮小し、375px以下は固定。ここを変更するとスマホ側だけに反映します。 */
:root {
  --lp-font-title: clamp(21px, 5.65vw, 24.2px);       /* 1 日本語の大見出し・明朝 */
  --lp-font-eyebrow: clamp(14.08430195px, 3.75581395vw, 17.85px);     /* 2 大見出し上の英字 */
  --lp-font-subtitle: clamp(15.3px, 4.25vw, 16.15px);    /* 3 サブタイトル */
  --lp-font-body: clamp(13.01686005px, 4.15116279vw, 13.6px);        /* 4 本文・下部ナビ */
  --lp-font-small: clamp(9.63662765px, 2.56976744vw, 11.05px);       /* 5 小さいテキスト */
  --lp-font-note: clamp(9.113372px, 2.43023255vw, 10.45px);        /* 6 右寄せ注釈 */
  --lp-font-extra: clamp(10.3779067px, 2.76744186vw, 11.9px);       /* 7 イレギュラー用 */
  /* 行間は倍率、上下余白はpx。画像を参考にした仮設定 */
  --lp-line-title: 1.6;
  --lp-space-title-top: 0px;
  --lp-space-title-bottom: 28px;
  --lp-line-eyebrow: 1.5;
  --lp-space-eyebrow-top: 0px;
  --lp-space-eyebrow-bottom: 32px;
  --lp-line-subtitle: 1.7;
  --lp-space-subtitle-top: 0px;
  --lp-space-subtitle-bottom: 38px;
  --lp-line-body: 1.8;
  --lp-space-body-top: 0px;
  --lp-space-body-bottom: 32px;
  --lp-line-small: 1.8;
  --lp-space-small-top: 0px;
  --lp-space-small-bottom: 20px;
  --lp-line-note: 1.7;
  --lp-space-note-top: 12px;
  --lp-space-note-bottom: 0px;
  --lp-line-extra: 1.8;
  --lp-space-extra-top: 0px;
  --lp-space-extra-bottom: 20px;
}

/* ===== PC用文字サイズ・行間・上下余白：画面幅768px以上 =====
   スマホ用の文字サイズ・行間・上下余白をここで上書きします。
   切替幅を変更するときは、下の768pxを変更してください。
   この切替幅はLP最大幅（--lp-max-width）とは独立しています。 */
@media (min-width: 768px) {
  :root {
    --lp-font-title:27px;       /* 1 日本語の大見出し・明朝 */
    --lp-font-eyebrow: 17.85px;     /* 2 大見出し上の英字 */
    --lp-font-subtitle: 22.1px;    /* 3 サブタイトル */
    --lp-font-body: 17.85px;        /* 4 本文・下部ナビ */
    --lp-font-small: 11.05px;       /* 5 小さいテキスト */
    --lp-font-note: 10.45px;        /* 6 右寄せ注釈 */
    --lp-font-extra: 11.9px;       /* 7 イレギュラー用 */
    /* 行間は倍率、上下余白はpx。画像を参考にした仮設定 */
    --lp-line-title: 1.6;
    --lp-space-title-top: 0px;
    --lp-space-title-bottom: 28px;
    --lp-line-eyebrow: 1.5;
    --lp-space-eyebrow-top: 0px;
    --lp-space-eyebrow-bottom: 32px;
    --lp-line-subtitle: 1.7;
    --lp-space-subtitle-top: 0px;
    --lp-space-subtitle-bottom: 48px;
    --lp-line-body: 1.8;
    --lp-space-body-top: 0px;
    --lp-space-body-bottom: 32px;
    --lp-line-small: 1.8;
    --lp-space-small-top: 0px;
    --lp-space-small-bottom: 20px;
    --lp-line-note: 1.7;
    --lp-space-note-top: 12px;
    --lp-space-note-bottom: 0px;
    --lp-line-extra: 1.8;
    --lp-space-extra-top: 0px;
    --lp-space-extra-bottom: 20px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* スマホで内容が画面外にはみ出してもページ全体に横スクロールを作らない */
html, body { width: 100%; max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
body {
  margin: 0;
  background: var(--lp-color-outside);
  color: var(--lp-color-text);
  font-family: var(--lp-font-sans);
  font-size: var(--lp-font-body);
  font-weight: 350;
  line-height: var(--lp-line-body);
}
.lp-shell {
  overflow-x: clip;
  width: 100%;
  max-width: var(--lp-max-width);
  min-height: 100vh;
  margin-inline: auto;
  background: var(--lp-color-page);
}
/* 横スクロールの各ページ・通常セクション共通の余白 */
.lp-section {
  display: flow-root;
  padding-top: calc(var(--lp-padding-y)*1.5);
  padding-bottom: var(--lp-padding-y);
  padding-left: var(--lp-padding-x);
  padding-right: var(--lp-padding-x);
  background-color: var(--lp-section-bg, transparent);
}

@media (min-width: 768px) {
.lp-section {
  display: flow-root;
  padding-top: calc(var(--lp-padding-y)*1.5);
  padding-bottom: var(--lp-padding-y);
  padding-left: calc(var(--lp-padding-x)*1.5);
  padding-right: calc(var(--lp-padding-x)*1.5);
  background-color: var(--lp-section-bg, transparent);
}
}
.lp-section--pb60 {
  padding-bottom: 60px;
}
.lp-shell img, .lp-shell video { display: block; max-width: 100%; height: auto; }
/* タグの階層と文字の見た目は独立して管理：
   lp-title=大きい明朝、lp-subtitle=ゴシックのサブタイトル。
   h2やh3に付けても同じ見た目になります。
   各テキストの行間・上下余白は上のスマホ／PC欄で管理。
   余白は各テキストの外側。通常のブロックでは隣接する上下marginは相殺されます。 */
.lp-title {
  overflow-wrap: anywhere;
  font-size: var(--lp-font-title);
  line-height: var(--lp-line-title);
  margin-block: var(--lp-space-title-top) var(--lp-space-title-bottom);
  font-family: var(--lp-font-serif);
  font-weight: 350;
  /*  letter-spacing: 0.1em; */
}
/* h2の見出しだけを共通大見出しより約8%小さくする（h1は変更しない） */
h2.lp-title { font-size: calc(var(--lp-font-title) * 0.82); }

.lp-eyebrow {
  font-weight: 400;
  overflow-wrap: anywhere;
  font-size: var(--lp-font-eyebrow);
  line-height: var(--lp-line-eyebrow);
  margin-block: var(--lp-space-eyebrow-top) var(--lp-space-eyebrow-bottom);
  font-family: var(--lp-font-sans);
}
.lp-subtitle {
  font-weight: 350;
  font-size: var(--lp-font-subtitle);
  line-height: var(--lp-line-subtitle);
  margin-block: var(--lp-space-subtitle-top) var(--lp-space-subtitle-bottom);
}

/* PC版のみ：.lp-subtitleを共通サイズの90%に縮小 */
@media (min-width: 768px) {
  .lp-subtitle {
    font-size: calc(var(--lp-font-subtitle) * 0.9);
  }
}
.lp-subtitle2 {
  font-weight: 350;
  font-size: calc(var(--lp-font-subtitle)*0.7);
  line-height: var(--lp-line-subtitle);
  padding-top:20px;
}
.lp-subtitle3 {
  font-weight: 350;
  font-size: var(--lp-font-subtitle);
  line-height: var(--lp-line-subtitle);
}
.lp-body {
  font-weight: 350;
  font-size: var(--lp-font-body);
  line-height: var(--lp-line-body);
  margin-block: var(--lp-space-body-top) var(--lp-space-body-bottom);
}
.lp-small {
  font-weight: 350;
  font-size: var(--lp-font-extra);
  line-height: var(--lp-line-small);
  margin-block: var(--lp-space-small-top) var(--lp-space-small-bottom);
}
.lp-note {
  font-weight: 350;
  font-size: var(--lp-font-note);
  line-height: var(--lp-line-note);
  margin-block: var(--lp-space-note-top) var(--lp-space-note-bottom);
  text-align: right;
}
.lp-extra {
  font-weight: 350;
  font-size: var(--lp-font-extra);
  line-height: var(--lp-line-extra);
  margin-block: var(--lp-space-extra-top) var(--lp-space-extra-bottom);
}
/* セクションの最初・最後のテキストは、外側の共通paddingを余白に使用 */
.lp-section > :is(.lp-title, .lp-subtitle, .lp-eyebrow, .lp-body, .lp-small, .lp-note, .lp-extra):first-child { margin-top: 0; }
.lp-section > :is(.lp-title, .lp-subtitle, .lp-eyebrow, .lp-body, .lp-small, .lp-note, .lp-extra):last-child { margin-bottom: 0; }

/* ===== セクションの背景パターン =====
   通常セクションはlp-section、横スクロール全体はlp-horizontalに付ける。
   新色の例：.lp-bg-new { --lp-section-bg: #任意の色; }
   変数が子に継承されるため、横スクロール内と下部UIも同じ背景になります。 */
.lp-bg-sand { --lp-section-bg: var(--lp-color-bg-sand); }
.lp-bg-gray { --lp-section-bg: var(--lp-color-bg-gray); }

/* ===== 区切り線：初期値1px、上下各2.5行分 =====
   lp-section内に配置。装飾用の場合はHTMLでaria-hidden="true"を付ける。
   flow-rootにより隣のテキストのmarginとの相殺を防ぎ、指定余白を確保。 */
.lp-divider {
  display: flow-root;
  padding-block: calc(var(--lp-font-body) * var(--lp-line-body) * var(--lp-divider-space-lines));
}
.lp-divider::before {
  content: "";
  display: block;
  border-top: var(--lp-divider-width) solid var(--lp-divider-color, var(--lp-divider-color-warm));
}
.lp-divider--warm { --lp-divider-color: var(--lp-divider-color-warm); }
/* 線の余白に隣接するテキストの余白を重ねて加算しない */
.lp-section > :is(.lp-title, .lp-subtitle, .lp-eyebrow, .lp-body, .lp-small, .lp-note, .lp-extra):has(+ .lp-divider) { margin-bottom: 0; }
.lp-section > .lp-divider + :is(.lp-title, .lp-subtitle, .lp-eyebrow, .lp-body, .lp-small, .lp-note, .lp-extra) { margin-top: 0; }

/* ===== 横スクロール部品 ===== */
.lp-horizontal,
.lp-ingredients-carousel { width: 100%; min-width: 0; overflow: hidden; background-color: var(--lp-section-bg, transparent); }
.lp-horizontal__track,
.lp-ingredients-carousel__track {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.lp-horizontal__track::-webkit-scrollbar,
.lp-ingredients-carousel__track::-webkit-scrollbar { display: none; }
.lp-horizontal__slide,
.lp-ingredients-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  min-height: var(--lp-empty-slide-height);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-wrap: anywhere;
}
.lp-horizontal__nav,
.lp-ingredients-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 var(--lp-padding-x) var(--lp-padding-y);
  font-size: calc(var(--lp-font-body) * 0.95);
  line-height: var(--lp-line-body);
}
.lp-horizontal__nav [hidden], .lp-horizontal__nav[hidden],
.lp-ingredients-carousel__nav [hidden], .lp-ingredients-carousel__nav[hidden] { display: none !important; }
.lp-horizontal__nav button,
.lp-ingredients-carousel__nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-horizontal__nav button span:not([aria-hidden]),
.lp-ingredients-carousel__nav button span:not([aria-hidden]) { overflow-wrap: anywhere; }
.lp-horizontal__count,
.lp-ingredients-carousel__count { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-horizontal__end { flex-shrink: 0; }
.lp-horizontal__nav.is-first, .lp-horizontal__nav.is-last,
.lp-ingredients-carousel__nav.is-first, .lp-ingredients-carousel__nav.is-last { justify-content: flex-end; }
/* 1ページ目は「次の名前・番号・矢印」の順番 */
.lp-horizontal__nav.is-first .lp-horizontal__next,
.lp-ingredients-carousel__nav.is-first .lp-ingredients-carousel__next { gap: 10px; }
.lp-horizontal__nav.is-first .lp-horizontal__next-label,
.lp-ingredients-carousel__nav.is-first .lp-ingredients-carousel__next-label { order: 0; min-width: 0; }
.lp-horizontal__nav.is-first .lp-horizontal__count,
.lp-ingredients-carousel__nav.is-first .lp-ingredients-carousel__count { order: 1; }
.lp-horizontal__nav.is-first .lp-horizontal__arrow,
.lp-ingredients-carousel__nav.is-first .lp-ingredients-carousel__arrow { order: 2; padding-block: 10px; }
.lp-horizontal__track:focus-visible, .lp-horizontal__nav button:focus-visible,
.lp-ingredients-carousel__track:focus-visible, .lp-ingredients-carousel__nav button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.lp-horizontal__nav button:hover,
.lp-ingredients-carousel__nav button:hover { opacity: .65; }


/* ===== FV：配置・文字・余白の調整欄 =====
   FVの大見出し・サブタイトルは共通の文字サイズ・行間を使用。
   成分表示だけ3列に収めるための独立したサイズを設定。
   ロゴは仮SVG（2:3）、ボトルは仮WebP（1:1）。
   実画像に差し替えた場合は、画像自体の縦横比に従う。 */
:root {
  --lp-fv-placeholder-bg: #e2e4e5;
  --lp-fv-logo-width: 60px;
  --lp-fv-intro-top: 40px;
  --lp-fv-intro-bottom: 48px;
  --lp-fv-logo-gap: 40px;
  --lp-fv-title-gap: 32px;
  --lp-fv-stats-padding-y: 56px;
  --lp-fv-stats-padding-x: 6px;
  --lp-fv-stat-label-size: clamp(9.593023px, 2.55813953vw, 11px);
  --lp-fv-stat-benefit-size: clamp(9.593023px, 2.55813953vw, 11px);
  --lp-fv-stat-number-size: clamp(29.65116285px, 7.90697674vw, 34px);
  --lp-fv-stat-label-line: 1.6;
  --lp-fv-stat-benefit-line: 1.6;
  --lp-fv-stat-number-line: 1.1;
  --lp-fv-stat-gap: 12px;
  --lp-fv-stat-rule-color: var(--lp-divider-color-gray);
}
/* 768pxの根拠と調整方針はファイル冒頭を参照。
   最大幅750pxに達した画面では、成分ラベル・配合率を大きめに設定。 */
@media (min-width: 768px) {
  :root {
    --lp-fv-logo-width: 60px;
    --lp-fv-intro-top: 56px;
    --lp-fv-intro-bottom: 56px;
    --lp-fv-logo-gap: 40px;
    --lp-fv-title-gap: 40px;
    --lp-fv-stats-padding-y: 56px;
    --lp-fv-stats-padding-x: 12px;
    --lp-fv-stat-label-size: 13.6px;
    --lp-fv-stat-benefit-size: 13.6px;
    --lp-fv-stat-number-size: 44.2px;
    --lp-fv-stat-label-line: 1.6;
    --lp-fv-stat-benefit-line: 1.6;
    --lp-fv-stat-number-line: 1.1;
    --lp-fv-stat-gap: 20px;
  }
}
.lp-fv__intro {
  padding-top: var(--lp-fv-intro-top);
  padding-bottom: var(--lp-fv-intro-bottom);
}
.lp-fv__logo {
  width: var(--lp-fv-logo-width);
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--lp-fv-logo-gap);
}
.lp-fv__logo img { width: 100%; height: auto; }
.lp-fv__title { margin: 0 0 var(--lp-fv-title-gap); }
.lp-fv__title span { display: block; overflow-wrap: anywhere; }
.lp-fv__subtitle { margin: 0; overflow-wrap: anywhere; }
.lp-fv__product { width: 100%; background: var(--lp-fv-placeholder-bg); }
.lp-fv__product img { width: 100%; height: auto; }
.lp-fv__composition {
  padding-top: var(--lp-fv-stats-padding-y);
  padding-bottom: calc(var(--lp-fv-stats-padding-y) /3);
}.lp-fv__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-fv__stat {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: var(--lp-fv-stat-gap);
  min-width: 0;
  padding-inline: var(--lp-fv-stats-padding-x);
  text-align: center;
}
.lp-fv__stat + .lp-fv__stat {
  border-left: var(--lp-divider-width) solid var(--lp-fv-stat-rule-color);
}
.lp-fv__ingredient, .lp-fv__benefit { margin: 0; font-weight: 350; }
.lp-fv__percentage { margin: 0; font-weight: 400; }
.lp-fv__ingredient {
  align-self: center;
  font-size: var(--lp-fv-stat-label-size);
  line-height: var(--lp-fv-stat-label-line);
  overflow-wrap: anywhere;
}
.lp-fv__percentage {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: var(--lp-fv-stat-number-size);
  line-height: var(--lp-fv-stat-number-line);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.lp-fv__percent-sign { font-size: .6em; }
.lp-fv__benefit {
  align-self: start;
  font-size: var(--lp-fv-stat-benefit-size);
  line-height: var(--lp-fv-stat-benefit-line);
  overflow-wrap: anywhere;
}


/* ===== ベーシックなコンテンツ =====
   大見出し・説明見出し・成分一覧・注釈は共通の文字スタイルを使用。
   成分一覧は7番のlp-extraで、スマホ／PCそれぞれの設定に連動。
   仮WebPの比率は750×556／1500×1112（添付写真を参考に設定）。
   実画像に差し替えると画像自身の縦横比に従う。 */
:root {
 
  --lp-basic-image-gap: 50px;
  --lp-basic-note-gap: 40px;
}
@media (min-width: 768px) {
  :root {
    --lp-basic-image-gap: 60px;
    --lp-basic-note-gap: 48px;
  }
}
/* セクション間の線も、本文と同じ左右余白で表示 */
.lp-section-divider { padding-inline: var(--lp-padding-x); padding-block: 30px;}
.lp-section-divider2{  padding: 60px 0 15px 0;}
.lp-section-divider3{  padding: 15px;}

.lp-basic__title span, .lp-basic__lead span { display: block; }
.lp-basic__title, .lp-basic__lead { overflow-wrap: anywhere; }
.lp-basic__image {
  width: 100%;
  margin: var(--lp-basic-image-gap) 0;
  background: var(--lp-basic-placeholder-bg);
}
.lp-basic__image img { width: 100%; height: auto; }
.lp-basic__ingredients {
  display: flow-root;
  overflow-wrap: anywhere;
}
.lp-basic__ingredients > :last-child { margin-bottom: 0; }
.lp-basic__note { margin-top: var(--lp-basic-note-gap); }

.lp-text-small {font-size: 0.7em;}
.lp-text-center {text-align:center;}

/* ===== WebP + srcset画像の共通表示 =====
   全幅・本文画像フォルダ：assets/images/750/ と assets/images/1500/。
   プロフィール共通画像：assets/images/350/ と assets/images/700/。
   両サイズで同じ仮ファイル名を使用し、HTMLのsrc・srcsetを合わせて差し替えます。
   SVGロゴはassets/images/logo.svg。
   srcset・sizesはHTMLで管理し、CSSは表示幅と縦横比を管理。
   sizesはCSSカスタムプロパティを直接参照できないため、最大幅や
   左右余白を変更した場合はHTML側のsizesも合わせて更新してください。
   ・全幅：最大750px、狭い画面では100vw
   ・本文内：最大710px、狭い画面では100vw - 40px
   width・height属性は縦横比の確保用。実表示の横幅は下記CSSで決まります。 */
.lp-responsive-image { display: block; width: 100%; max-width: 100%; height: auto; }
.lp-image-frame { position: relative; }
/* 実画像へ差し替えるときは、このラベルのspanをHTMLから削除 */


/* ===== 追加した横スクロール3パターンの調整欄 =====
   テキストは共通の7種類の文字設定を使用。
   体験談は添付と同じ配置を保つため、表題を視覚的に隠し、構造上のh2を用意。
   人物写真・図版は実画像を用意して差し替える。SVGではなくWebPを使用。 */
:root {
  --lp-tech-image-gap: 36px;
  --lp-review-avatar-size: 64px;
  --lp-review-header-gap: 32px;
  --lp-review-image-gap: 28px;
  --lp-review-note-gap: 28px;
  --lp-media-profile-gap: 14px;
  --lp-expert-qa-gap: 40px;
  --lp-expert-answer-gap: 16px;
}
@media (min-width: 768px) {
  :root {
    --lp-tech-image-gap: 48px;
    --lp-review-avatar-size: 100px;
    --lp-review-header-gap: 56px;
    --lp-review-image-gap: 40px;
    --lp-review-note-gap: 36px;
    --lp-media-profile-gap: 28px;
    --lp-expert-qa-gap: 56px;
    --lp-expert-answer-gap: 28px;
  }
}
.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lp-review__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: var(--lp-review-header-gap);
}
.lp-review__author { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.lp-review__author .lp-subtitle, .lp-review__author .lp-body { margin: 0; }
.lp-review__stars { margin: 4px 0 0; font-size: var(--lp-font-subtitle); line-height: 1.2; letter-spacing: -.05em; }
.lp-review__avatar {
  flex: 0 0 var(--lp-review-avatar-size);
  width: var(--lp-review-avatar-size);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}
.lp-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-review__note { margin-top: var(--lp-review-note-gap); text-align: left; }
/* 医師・専門家コメント：引用符は行の高さ・中央揃えに影響させない */
.lp-expert__quote {
  position: relative;
  text-align: center;
  padding-inline: 0;
  margin-bottom: calc(var(--lp-space-title-bottom) * 2);
}
.lp-expert__quote::before,
.lp-expert__quote::after {
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  color: #aaa;
  font-family: "Noto Serif JP", Georgia, serif;
  font-size: 1.9em;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}
/* 引用符は行間と本文の中央揃えに影響させず、左右から12%内側へ寄せる */
.lp-expert__quote::before {
  content: "“";
  top: 0;
  left: 12%;
  transform: translateY(-.32em);
}
.lp-expert__quote::after {
  content: "”";
  right: 12%;
  bottom: 0;
  transform: translateY(.12em);
}
/* 汎用テンプレート：左画像35%＋右テキスト。
   lp-expertや背景クラスの指定は不要。通常セクション・各スライドで使用可能。
   列の間隔はスマホ／PC設定欄の--lp-media-profile-gapで調整。 */
.lp-media-profile { display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr); gap: var(--lp-media-profile-gap); align-items: start; }
.lp-media-profile__content { min-width: 0; overflow-wrap: anywhere; }
.lp-media-profile__content .lp-eyebrow { margin-bottom: 16px; }
/* 皮膚科医プロフィールのみ：肩書き2行と医師名の間隔を詰める */
.lp-doctor-profile .lp-media-profile__content .lp-eyebrow { line-height: 1.2; margin-bottom: 6px; }
.lp-media-profile__title { margin: 0; }
.lp-media-profile__rule { border-top: var(--lp-divider-width) solid var(--lp-divider-color-warm); margin-block: 16px; }
.lp-media-profile__content .lp-small { margin: 0; }
.lp-expert__qa { margin-top: var(--lp-expert-qa-gap); }
.lp-expert__question { font-weight: 500; margin-bottom: 20px; }
.lp-expert__answer { display: grid; grid-template-columns: minmax(0, 20%) minmax(0, 1fr); gap: var(--lp-expert-answer-gap); align-items: start; }
.lp-expert__answer .lp-body { margin: 0; overflow-wrap: anywhere; }
.lp-expert__avatar { aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.lp-expert__avatar img { width: 100%; height: 100%; object-fit: cover; }


/* ===== 成分と役割：PC・スマホ共通の4列テーブル =====
   スマホはテーブル幅710pxを維持して表部分のみ横スクロール。
   添付の紙風背景の色を近似した追加パターン。質感は画像化せず単色で表現。 */
:root {
  --lp-color-bg-paper: var(--lp-color-bg-sand);
  --lp-ingredient-table-font: clamp(10.3779067px, 2.76744186vw, 11.9px);
  --lp-ingredient-table-line: 1.7;
  --lp-ingredient-mobile-label-font: clamp(8.8953486px, 2.37209302vw, 10.2px);
  --lp-ingredient-cell-bg: rgba(255, 255, 255, .8);
  --lp-ingredient-table-gap: 6px;
  --lp-ingredient-table-top: 40px;
  --lp-ingredient-note-gap: 40px;
}
@media (min-width: 768px) {
  :root {
    --lp-ingredient-table-font: 11.9px;
    --lp-ingredient-table-line: 1.7;
    --lp-ingredient-table-top: 48px;
    --lp-ingredient-note-gap: 48px;
  }
}
.lp-bg-paper { --lp-section-bg: var(--lp-color-bg-paper); }
.lp-ingredients__table-wrap { margin-top: var(--lp-ingredient-table-top); }
.lp-ingredient-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--lp-ingredient-table-gap);
  font-size: var(--lp-ingredient-table-font);
  line-height: var(--lp-ingredient-table-line);
}
.lp-ingredient-table__role-col { width: 16%; }
.lp-ingredient-table__name-col { width: 52%; }
.lp-ingredient-table th, .lp-ingredient-table td {
  padding: 8px 10px;
  background: var(--lp-ingredient-cell-bg);
  text-align: center;
  font-weight: 400;
  vertical-align: middle;
}
.lp-ingredient-table th.lp-ingredient-table__name {
  padding-left: 16px;
  text-align: left;
  overflow-wrap: anywhere;
}
.lp-ingredient-table__check {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: none;
  stroke: #555;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 空欄はPC・スマホとも同じ表示 */
.lp-ingredient-table__dash { visibility: hidden; }
.lp-ingredient-table__mobile-label { display: none; }
.lp-ingredients__note { margin-top: var(--lp-ingredient-note-gap); }
/* スマホ：PCと同じ4列の表を維持し、表エリア内だけ横スクロール */
@media (max-width: 767.98px) {
  .lp-ingredients__table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .lp-ingredient-table {
    width: 710px;
    min-width: 710px;
  }
}

/* 部分的な赤字 */
.lp-red { color: #c00000; }

/* 指定した英数字のみ：Light(300)を明示 */
.lp-latin-weight-300 { font-weight: 300; }

/* MANAMIの英字のみ明朝（Jost優先の共通serif変数は使わない） */
.lp-latin-serif { font-family: "Noto Serif JP", Georgia, "Times New Roman", serif; }

/* 専門家レビュー導入：横スクロール外の全幅画像 */
.lp-professional-review-intro { width: 100%; background: var(--lp-color-bg-gray); }
.lp-professional-review-intro img { width: 100%; height: auto; }

/* 専門家レビュー導入画像の下余白のみ縮小（共通セクションには影響しない） */
.lp-professional-review-intro { padding-bottom: 12px; }

/* ===== 固定テキスト＋画像のみ横スクロール（5枚・2枚） ===== */
.lp-image-carousel-section__eyebrow { color: #e45f65; }
.lp-image-carousel-section__description { margin-bottom: 32px; }
.lp-image-only-carousel { width: 100%; min-width: 0; }
.lp-image-only-carousel__track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.lp-image-only-carousel__track::-webkit-scrollbar { display: none; }
.lp-image-only-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.lp-image-only-carousel__slide img { width: 100%; height: auto; }
.lp-image-only-carousel__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  font-size: calc(var(--lp-font-body) * 0.95);
  line-height: var(--lp-line-body);
  font-variant-numeric: tabular-nums;
}
.lp-image-only-carousel__nav button {
  padding: 0;
  min-width: 36px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lp-image-only-carousel__nav button:disabled { opacity: .25; cursor: default; }
.lp-image-only-carousel__track:focus-visible, .lp-image-only-carousel__nav button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* 専門家レビュー：画像カルーセルと同じ数字＋矢印を右下に配置 */
.lp-expert-carousel__nav { padding: 0 var(--lp-padding-x) var(--lp-padding-y); }

/* ===== サポート成分・使用実感（通常セクション） ===== */
.lp-support__eyebrow { color: #e45f65; }
.lp-support__body { margin-top: 48px; }
/* 本文のフォント設定を引き継ぎ、文字サイズだけ少し小さくする汎用クラス */
.lp-body--compact { font-size: calc(var(--lp-font-body) * .85); }
.lp-experience__lead { margin-bottom: 40px; }
.lp-experience__table { display: grid; gap: 20px; margin-bottom: 64px; }
.lp-experience__row { display: grid; grid-template-columns: 35% minmax(0, 1fr); gap: 20px; align-items: center; }
.lp-experience__period { display: grid; place-items: center; margin: 0; padding: 7px 6px; background: #262521; color: #fff; text-align: center; }
.lp-experience__detail { margin: 0; }
.lp-experience__image img { width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .lp-experience__row { grid-template-columns: 28% minmax(0, 1fr); gap: 10px; }
  .lp-experience__period { padding-inline: 2px; }
  .lp-experience__table { gap: 16px; }
}

/* ===== THE POWER OF FERMENTATION：導入・3枚スワイプ ===== */
.lp-tpof-intro__figure { margin: 44px 0 0; }
.lp-tpof-intro__figure img { width: 100%; height: auto; }
.lp-tpof-intro__figure figcaption { margin-top: 24px; }
.lp-tpof__slide > img { width: 100%; height: auto; }
.lp-tpof__slide .lp-title { margin-bottom: 32px; }
.lp-tpof__copy { margin-top: 28px; }
.lp-tpof__copy .lp-body:last-child { margin-bottom: 0; }
.lp-tpof__copy + img { margin-top: 32px; }
@media (min-width: 768px) {
  .lp-tpof-intro__figure { margin-top: 56px; }
  .lp-tpof__slide .lp-title { margin-bottom: 40px; }
}

/* TPOF：導入の次に続く最初のスワイプ見出し上余白を約2/3に */
.lp-tpof__slide { padding-top: calc(var(--lp-padding-y) * 1 / 3); }

/* 発酵技術（TPOF）の横スワイプナビは中間ページも右寄せ */
.lp-tpof .lp-horizontal__nav { justify-content: flex-end; }

/* 専門家レビュー導入：固定コンテンツ、スワイプ外 */
.lp-professional-review-intro { width: 100%; background: var(--lp-color-bg-gray); }
.lp-professional-review-intro__text { padding: 56px var(--lp-padding-x) 64px; }
.lp-professional-review-intro__text .lp-eyebrow { margin: 0 0 48px; }
.lp-professional-review-intro__text .lp-subtitle { margin: 0 0 28px; }
.lp-professional-review-intro__text .lp-title { margin: 0; }
.lp-professional-review-intro > img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .lp-professional-review-intro__text { padding-top: 60px; padding-bottom: 72px; }
}

/* ===== 専門家支持率：専門家レビューと連続するグレー背景 ===== */
.lp-specialist-support {
  padding-top: 0;
  padding-bottom: -var(--lp-padding-y);
}
.lp-specialist-support__rule {
  border-top: 1px solid #a9abad;
  margin-bottom: 44px;
}
.lp-specialist-support__image {
  display: block;
  width: 100%;
  height: auto;
}
.lp-specialist-support__note {
  margin: 44px 0 0;
  font-size: var(--lp-font-note);
  line-height: var(--lp-line-note);
  font-weight: 350;
  text-align: right;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .lp-specialist-support__rule { margin-bottom: 56px; }
  .lp-specialist-support__note { margin-top: 52px; }
}

/* ===== 成分比率の英字見出し：上余白のみ従来の80% ===== */
.lp-image-carousel-section > .lp-image-carousel-section__eyebrow,
.lp-support > .lp-support__eyebrow {
  margin-top: calc(var(--lp-space-eyebrow-top) * .8);
}
/* セクション先頭の余白はpaddingで決まるため、この3セクションだけ上paddingを80%にする */
.lp-image-carousel-section,
.lp-support { padding-top: calc(var(--lp-padding-y) * .8); }

/* ===== 最下部：OUR PROMISE / HOW TO USE / BRAND PHILOSOPHY ===== */
.lp-promise__lead { margin-bottom: 40px; }
.lp-promise__image, .lp-howto__image, .lp-philosophy__image { width: 100%; height: auto; }
.lp-promise__note { margin-top: 36px; text-align: left; }
.lp-howto__image { margin: 42px 0 60px; }
.lp-howto__lead { margin-bottom: 36px; }
.lp-howto .lp-body { margin-bottom: 32px; }
.lp-howto .lp-body:last-child { margin-bottom: 0; }
.lp-philosophy__lead { margin-bottom: 48px; }
@media (min-width: 768px) {
  .lp-promise__lead { margin-bottom: 48px; }
  .lp-howto__image { margin-top: 50px; margin-bottom: 72px; }
  .lp-philosophy__lead { margin-bottom: 56px; }
}

/* FAQ・注釈一覧：既存の共通文字サイズを使用 */
.lp-faq > .lp-eyebrow { margin-bottom: 52px; }
.lp-faq > .lp-title { margin-top: 0; margin-bottom: 60px; }

/* FAQアコーディオン：商品情報の＋−、下線、開閉処理を共用 */
.lp-faq__items {
  border-top: 1px solid rgba(38, 37, 33, .24);
}
.lp-faq__item + .lp-faq__item { margin-top: 0; }
.lp-faq__button {
  min-height: 92px;
}
.lp-faq__question {
  margin: 0;
  padding-right: 12px;
  text-align: left;
}
.lp-faq__answer {
  padding: 0 5px 42px;
}
.lp-faq__answer .lp-body { margin: 0; }
.lp-faq__answer .lp-body + .lp-body { margin-top: 42px; }

.lp-footnotes { padding-top: 30px; padding-bottom: 30px; }
.lp-footnotes__box { border: 1px solid currentColor; padding: 28px; }
.lp-footnotes__heading { margin: 0 0 12px; }
.lp-footnotes__copy { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .lp-faq > .lp-eyebrow { margin-bottom: 42px; }
  .lp-faq > .lp-title { margin-bottom: 50px; }
  .lp-faq__button { min-height: 84px; }
  .lp-faq__answer { padding-bottom: 36px; }
  .lp-faq__answer .lp-body + .lp-body { margin-top: 36px; }
  .lp-footnotes__box { padding: 32px 30px; }
}

/* PC版：改行しない */
.sp-only-br {  display: none;}

/* SP版：改行する */
@media (max-width: 767px) {
  .sp-only-br {   display: inline;}
}
/* スマホ：改行しない */
.pc-only-br {
  display: none;
}

/* PC：改行する */
@media (min-width: 768px) {
  .pc-only-br {
    display: inline;
  }
}
/* 共通グラデーション背景。
   lp-bg-gradient：上が白、下がサンド色。
   lp-bg-gradient-reverse：上がサンド色、下が白。
   横スクロール全体なら外側のlp-horizontalに追加。
   90% CONCENTRATIONの既存指定も維持する。 */
.lp-bg-gradient,
.lp-bg-gradient-reverse {
  --lp-section-bg: transparent;
  background-color: var(--lp-color-page);
}
.lp-bg-gradient,
.lp-section.lp-basic[aria-labelledby="concentration-title"]:not(.lp-bg-gradient-reverse) {
  background-image: linear-gradient(to bottom, #fff 0%, var(--lp-color-bg-sand) 100%);
}
.lp-bg-gradient-reverse {
  background-image: linear-gradient(to top, #fff 0%, var(--lp-color-bg-sand) 100%);
}

/* ESSENTIAL / PRIMARY / BASE: between full sections */
.lp-between-sections {
  box-sizing: border-box;
  width: 100%;
  padding: 18px var(--lp-padding-x);
  margin: 0;
}

/* ESSENTIAL / DOCTOR’S RECOMMENDATION：実測した最大高さを2枚と枠に共通適用。
   lp-sectionの余白は内側に置き、計測用の中身は自然な高さのままにする。 */
.lp-ingredients-carousel__content { min-height: var(--lp-empty-slide-height); }
#ingredients-track,
#ingredients-track > .lp-ingredients-carousel__slide {
  height: var(--lp-ingredients-height, auto) !important;
  max-height: none !important;
}
#ingredients-track {
  align-items: stretch;
  /* ScrollHintが設定するinlineのoverflow:autoより優先する。 */
  overflow-y: hidden !important;
}

/* ===== ScrollHint: 横スクロール可能なコンテンツの案内 ===== */
/* ScrollHintの表示レイヤーを既存の横スクロール領域内に収める */
.scroll-hint-icon-wrap { z-index: 5; pointer-events: none; }
.scroll-hint-icon { pointer-events: none; }
/* CDN側のCSSより詳細度を上げ、背景だけを薄いグレーにする */
.lp-shell .scroll-hint-icon { background-color: rgba(0, 0, 0, .25); }
/* 表のPC版はスクロールしないため、案内を表示しない */
@media (min-width: 768px) {
  .lp-ingredients__table-wrap .scroll-hint-icon-wrap { display: none !important; }
}

/* ===== PC：横スクロールをマウスドラッグでも操作可能にする ===== */
@media (min-width: 768px) and (pointer: fine) {
  /* カーソルは通常の矢印のまま。画像の標準ドラッグだけ無効化する。 */
  .lp-horizontal__track,
  .lp-ingredients-carousel__track,
  .lp-image-only-carousel__track {
    cursor: default;
  }

  .lp-horizontal__track img,
  .lp-ingredients-carousel__track img,
  .lp-image-only-carousel__track img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .lp-horizontal__track.is-mouse-dragging,
  .lp-ingredients-carousel__track.is-mouse-dragging,
  .lp-image-only-carousel__track.is-mouse-dragging {
    cursor: default;
    scroll-snap-type: none !important;
    user-select: none;
  }
}

/* ===== ナイアシンアミド動画上のフィルター ===== */
.lp-video-overlay {
  position: relative;
}

.lp-video-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(205, 205, 188, 0.18);
  pointer-events: none;
}

/* ===== USER’S VOICE：年代サムネイル＋3枚レビュー ===== */
.lp-user-review {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

.lp-user-review__intro { padding-bottom: 28px; }
.lp-user-review__intro > .lp-title { margin-bottom: 34px; }

.lp-user-review__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.lp-user-review__thumb {
  min-width: 0;
  padding: 0;
  border: 0;
  background: #262521;
  color: #fff;
  font: inherit;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s ease;
}

.lp-user-review__thumb.is-active { opacity: 1; }

.lp-user-review__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.lp-user-review__thumb span {
  display: block;
  padding: 5px 2px 6px;
  font-size: calc(var(--lp-font-body) * .72);
  line-height: 1.2;
  text-align: center;
}

.lp-user-review__thumb:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.lp-user-review__track { align-items: flex-start; }
.lp-user-review__slide { min-height: 0; }
.lp-user-review__slide .lp-review__header { margin-bottom: 34px; }

/* 30代・40代共通：左に縦長動画、右に画像またはテキスト */
.lp-user-review__visual-row {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-bottom: 40px;
}

.lp-user-review__visual-main,
.lp-user-review__visual-side {
  width: 100%;
  min-width: 0;
}

.lp-user-review__visual-main video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
}

.lp-user-review__visual-side--image {
  display: block;
}

.lp-user-review__visual-side--image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.lp-user-review__visual-side--copy {
  margin: 0;
  line-height: 1.95;
}

/* 50代：表題＋全幅画像 */
.lp-user-review__visual-title {
  margin: 40px 0 0;
  text-align: center;
}

.lp-user-review__visual-full {
  display: block;
  width: 100%;
  margin: 0 0 30px;
}

.lp-user-review__visual-full img {
  display: block;
  width: 100%;
  max-width: 750px;
  height: auto;
  margin-inline: auto;
}

/* 下部UI */
.lp-user-review__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding-top: 0;
  font-size: calc(var(--lp-font-body) * .8);
  font-variant-numeric: tabular-nums;
}
.lp-user-review__nav[hidden] {
  display: none !important;
}


.lp-user-review__nav-button,
.lp-user-review__count-button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lp-user-review__nav-button {
  min-width: 44px;
  padding-inline: 10px;
}

.lp-user-review__count-button {
  min-width: 78px;
  padding-inline: 8px;
  font-variant-numeric: tabular-nums;
}

.lp-user-review__nav-button:disabled {
  opacity: .25;
  cursor: default;
}

.lp-user-review__nav-button:focus-visible,
.lp-user-review__count-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .lp-user-review__intro { padding-bottom: 36px; }
  .lp-user-review__intro > .lp-title { margin-bottom: 42px; }
  .lp-user-review__thumb span { padding-block: 7px 8px; }
  .lp-user-review__visual-full { margin-bottom: 40px; }
}

@media (max-width: 767.98px) {
  .lp-user-review__visual-row {
    grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
    gap: 15px;
    margin-bottom: 34px;
  }

  .lp-user-review__visual-side--copy {
    font-size: calc(var(--lp-font-body) * .9);
    line-height: 1.85;
  }
}

@media (max-width: 374px) {
  .lp-user-review__visual-row { gap: 10px; }
  .lp-user-review__visual-side--copy { font-size: calc(var(--lp-font-body) * .82); }
}

@media (min-width: 768px) and (pointer: fine) {
  .lp-user-review__track { cursor: grab; }

  .lp-user-review__track.is-mouse-dragging {
    cursor: grabbing;
    scroll-snap-type: none !important;
    user-select: none;
  }
}

/* ===== USER’S VOICE：ページ送り端の矢印は非表示 =====
   1枚目: 01 / 03 →
   2枚目: ← 02 / 03 →
   3枚目: ← 03 / 03
*/
.lp-user-review__nav-button:disabled {
  display: none;
}


/* ===== 商品情報アコーディオン / フッター ===== */
.lp-product-info {
  background: #fff;
  padding: 22px var(--lp-padding-x) 0;
}
.lp-product-info__inner {
  border-top: 1px solid rgba(38, 37, 33, .24);
}
.lp-accordion {
  border-bottom: 1px solid rgba(38, 37, 33, .24);
}
.lp-accordion__heading {
  margin: 0;
}
.lp-accordion__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--lp-font-body);
  font-weight: 350;
  text-align: left;
  cursor: pointer;
}
.lp-accordion__icon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.lp-accordion__icon::before,
.lp-accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.lp-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .28s ease, opacity .28s ease;
}
.lp-accordion__button[aria-expanded="true"] .lp-accordion__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}
.lp-accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height .42s ease;
}
.lp-accordion__content {
  padding: 0 5px 42px;
  font-size: calc(var(--lp-font-body) * .92);
  line-height: 2;
}
.lp-accordion__content > :last-child { margin-bottom: 0; }
.lp-accordion__content p + p { margin-top: 18px; }

.lp-footer {
  background: #fff;
  padding: 72px var(--lp-padding-x) 34px;
}
.lp-footer__nav {
  display: grid;
  gap: 24px;
}
.lp-footer__nav a {
  color: inherit;
  text-decoration: none;
  font-size: calc(var(--lp-font-body) * .9);
  line-height: 1.6;
  font-weight: 350;
}
.lp-footer__nav a:hover { opacity: .65; }
.lp-footer__copyright {
  margin: 96px 0 0;
  text-align: center;
  font-family: var(--lp-font-sans);
  font-size: var(--lp-font-small);
  line-height: 1.6;
  font-weight: 350;
}

@media (min-width: 768px) {
  .lp-product-info { padding-top: 28px; }
  .lp-accordion__button { min-height: 84px; }
  .lp-accordion__content { padding-bottom: 50px; }
  .lp-footer { padding-top: 88px; padding-bottom: 40px; }
  .lp-footer__nav { gap: 28px; }
  .lp-footer__copyright { margin-top: 110px; }
}

/* ===== 成分紹介カルーセル専用：旧UIを維持 =====
   ナイアシンアミド / 皮膚科医推薦にのみ適用し、他カルーセルへ影響させない。 */
[data-ingredients-carousel] .lp-ingredients-carousel__nav {
  width: 100%;
}

[data-ingredients-carousel] .lp-ingredients-carousel__nav.is-first,
[data-ingredients-carousel] .lp-ingredients-carousel__nav.is-last {
  justify-content: flex-end;
}

[data-ingredients-carousel] .lp-ingredients-carousel__slide,
[data-ingredients-carousel] .lp-ingredients-carousel__content {
  box-sizing: border-box;
}


.lp-note-mark {
  display: inline-block;
  font-size: max(9px, 0.55em);
  line-height: 1;
  vertical-align: super;
  margin-left: 0.08em;
  white-space: nowrap;
}


/**動画**/

.lp-media-video {
  width: 100%;
  overflow: hidden;
}

.lp-media-video__video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}