@charset "UTF-8";
/* =====================================================================
   LP Master Template ― スタイル（lp.css）
   ---------------------------------------------------------------------
   1. デザイン設定（CSS変数）…… 基本はここだけ変更します
   2. ベース
   3. 文字装飾クラス（商品データのHTML内で使う）
   4. 共通部品（見出し・プレースホルダー・星・吹き出し）
   5. セクション別スタイル
   6. PC表示
   7. ガイド表示・書き出しモード

   ■ サイズ指定のルール
     文字サイズ・余白・角丸は「375px幅のSPデザインでのpx値」を単位なしの数値で書き、
     calc(数値 * var(--u)) で画面幅に比例させています。
     例）--fs-heading: 24;  → 375px幅で24px、430px幅で約27.5px
     ※商品ごとに変えたい値は、商品データの theme で上書きできます。
   ===================================================================== */

/* --- 英字フォント（Plus Jakarta Sans / SIL Open Font License）を同梱 ---
   和文フォント（Noto Sans JP）は index.html で Google Fonts から読み込みます。
   別のフォントに変える場合は、ここと --font-ja / --font-en を変更します。 */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-italic.woff2") format("woff2"); }

/* =====================================================================
   1. デザイン設定
   ===================================================================== */
:root {
  /* --- カラー ------------------------------------------------------ */
  --color-main: #474647;          /* メインカラー（暗い背景・見出し・サイズタイル） */
  --color-sub: #44a48f;           /* サブカラー（クーポン・バッジ・コピーボタン） */
  --color-accent: #c1ac28;        /* アクセント（チェックマーク） */
  --color-bg: #ffffff;            /* 背景色 */
  --color-bg-alt: #e5e3de;        /* 背景色：グレージュ（品質・FAQ） */
  --color-bg-dark: var(--color-main); /* 背景色：暗色（特徴・クーポン） */
  --color-bg-buy: #eeedeb;        /* 背景色：購入エリア */
  --color-text: #474647;          /* 文字色 */
  --color-text-sub: #666666;      /* 補足の文字色（レビューの属性など） */
  --color-text-inverse: #ffffff;  /* 暗い背景上の文字色 */
  --color-line: #d4d4d4;          /* 枠線 */
  --color-star: #ffbb29;          /* レビューの星 */
  --color-fv-badge: #d4d854;      /* FV：評価バッジ */
  --color-fv-label: #a8a796;      /* FV：縦書きキャッチの背景 */
  --fv-bg: linear-gradient(180deg, #d7d6d0 0%, #a4a390 62%, #efefec 100%); /* FV：背景 */
  --gold: linear-gradient(90deg, #dacc72 0%, #fcf4bd 33%, #e0cf5f 58%, #bca724 100%); /* 権威帯・評価バッジ */
  --gold-text: #4f4401;           /* 金色背景上の文字 */
  --gold-laurel: #5b4d0e;         /* 金色バッジの月桂樹 */
  --balloon-bg: #252525;          /* 吹き出し */
  --balloon-accent: #e5c26a;      /* 吹き出しの強調文字 */
  --chart-bar-base: #d9d9d9;      /* 棒グラフ：比較対象 */
  --chart-bar-accent: linear-gradient(180deg, #fce186 0%, #ddb442 100%); /* 棒グラフ：自社 */
  --chart-line-accent: #c9ae5b;   /* 折れ線グラフ：自社 */
  --chart-line-base: #aaaaaa;     /* 折れ線グラフ：比較対象 */

  /* --- ボタン ------------------------------------------------------ */
  --btn-bg: var(--color-sub);     /* ボタンの色（クーポンコピー） */
  --btn-text: #ffffff;            /* ボタンの文字色 */
  --btn-buy-bg: #4a4545;          /* 購入ボタンの色 */
  --cta-bar-bg: var(--color-main);/* FVのCTAバー */

  /* --- フォント ---------------------------------------------------- */
  --font-ja: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-en: "Plus Jakarta Sans", var(--font-ja);

  /* --- 文字サイズ（375px幅でのpx値・単位なし） ------------------------ */
  --fs-body: 14;                  /* 本文 */
  --fs-small: 12;                 /* 注釈 */
  --fs-heading: 24;               /* 見出し */
  --fs-heading-lg: 28;            /* 大見出し（問題提起） */
  --fs-section-title: 42;         /* セクション英字タイトル（Features など） */
  --fs-section-sub: 14;           /* セクション英字の商品名・和文ラベル */
  --lh-body: 2.7;                 /* 本文の行間（問題提起・特徴） */
  --lh-card: 2.2;                 /* 本文の行間（品質カード） */

  /* --- 角丸（375px幅でのpx値・単位なし） ------------------------------ */
  --radius: 8;                    /* カード・写真 */
  --radius-sm: 4;                 /* クーポン・小さい部品 */

  /* --- レイアウト -------------------------------------------------- */
  --content-width: 450px;         /* PC表示時のLP幅（SPは画面幅いっぱい） */
  --gutter: 16;                   /* 左右の余白（375px幅でのpx値） */
  --section-space: 66;            /* セクション上下の余白（375px幅でのpx値） */
  --pc-bg: #efeeea;               /* PC表示時の左右の背景 */

  /* --- 内部用（変更不要） -------------------------------------------- */
  --u: calc(100cqw / 375);        /* 1デザインpx（LPの幅÷375） */
}
@supports not (width: 1cqw) {
  :root { --u: min(calc(100vw / 375), calc(var(--content-width) / 375)); }
}

/* =====================================================================
   2. ベース
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ja);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
}
.lp-stage { min-height: 100vh; }
.lp {
  position: relative;
  width: 100%;
  container-type: inline-size;
  background: var(--color-bg);
  overflow-x: clip;
}
.lp :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.lp :where(ul, ol) { padding: 0; list-style: none; }
.lp img, .lp video, .lp iframe { display: block; max-width: none; border: 0; }
.lp a { color: inherit; }
.lp button { font: inherit; }

.sec {
  position: relative;
  overflow: hidden;
  font-size: calc(var(--fs-body) * var(--u));
  line-height: 1.8;
}
.fill { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }

/* =====================================================================
   3. 文字装飾クラス（商品データの文字列内で使えます）
   ===================================================================== */
.dots { }                  /* 傍点：<span class="dots">シワ</span>（1文字ずつ点を付けます） */
.dots__c { position: relative; }
.dots__c::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.12em;
  width: 0.15em;
  height: 0.15em;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.s  { font-size: 0.857em; }  /* 一回り小さく（28→24） */
.xs { font-size: 0.7em; }    /* かなり小さく */
.l  { font-size: 1.17em; }   /* 一回り大きく */
.ul {                      /* 太い下線 */
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: calc(2 * var(--u));
  text-underline-offset: 0.55em;
  text-decoration-skip-ink: none;
}
.accent { color: var(--color-accent); }
.sub-color { color: var(--color-sub); }
.gold-text { color: var(--balloon-accent); }
.en { font-family: var(--font-en); font-weight: 700; }
.num { font-family: var(--font-en); font-weight: 800; font-size: 1.4em; }
.nowrap { white-space: nowrap; }
.amp { font-size: 0.76em; margin: 0 0.16em; }
.zero {                    /* 「0（ゼロ）」装飾：<span class="zero" data-ruby="ゼロ">0</span> */
  position: relative;
  display: inline-block;
  width: calc(29 * var(--u));
  height: calc(50 * var(--u));
  margin: 0 calc(5 * var(--u)) 0 calc(4 * var(--u));
  border: calc(4.5 * var(--u)) solid currentColor;
  border-radius: calc(15 * var(--u));
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  transform: translateY(calc(-3 * var(--u)));
}
.zero::after {
  content: attr(data-ruby);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: calc(10 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

/* =====================================================================
   4. 共通部品
   ===================================================================== */

/* --- セクション見出し（英字商品名 / Features / こだわり） ---------------- */
.sec-head { text-align: center; line-height: 1.2; }
.sec-head__sub {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--fs-section-sub) * var(--u));
  letter-spacing: 0;
  word-spacing: 0.12em;
}
.sec-head__title {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(var(--fs-section-title) * var(--u));
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin-top: calc(6 * var(--u)) !important;
}
.sec-head__ja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  margin-top: calc(9 * var(--u)) !important;
  font-size: calc(var(--fs-section-sub) * var(--u));
  font-weight: 500;
  letter-spacing: 0.08em;
}
.sec-head__ja::before,
.sec-head__ja::after {
  content: "";
  width: calc(26 * var(--u));
  height: 1px;
  background: currentColor;
}

/* --- プレースホルダー（素材未設定） -------------------------------------- */
.ph {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ph-ratio, auto);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: #55554f;
  background: repeating-linear-gradient(135deg, #deded8 0 8px, #e8e8e3 8px 16px);
  outline: 1px dashed #8f8f86;
  outline-offset: -1px;
  container-type: inline-size;
  font-family: var(--font-ja);
  line-height: 1.4;
}
.ph.fill, .ph.contain { height: 100%; aspect-ratio: auto; min-height: 0; }
.ph__inner { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; }
.ph__icon { display: block; width: 22px; height: 22px; opacity: 0.7; }
.ph__icon svg { width: 100%; height: 100%; display: block; }
.ph__label { font-size: 12px; font-weight: 700; }
.ph__meta { font-size: 10.5px; font-weight: 500; }
.ph__note { font-size: 10px; opacity: 0.8; }
.ph--error { background: repeating-linear-gradient(135deg, #f3dede 0 8px, #f8e9e9 8px 16px); outline-color: #c55; }
@container (max-width: 110px) {
  .ph__label, .ph__meta, .ph__note { display: none; }
  .ph__icon { width: 16px; height: 16px; }
}

/* --- 星評価 ------------------------------------------------------------ */
.stars { display: block; width: calc(91 * var(--u)); height: auto; }
.stars__empty { fill: #e3e3e3; }
.stars__fill { fill: var(--color-star); }
.stars--outline .stars__empty { fill: none; stroke: currentColor; stroke-width: 1.3; }
.stars--outline .stars__fill { fill: currentColor; }

/* --- 吹き出し（丸） ----------------------------------------------------- */
.balloon {
  position: absolute;
  z-index: 2;
  width: calc(81 * var(--u));
  height: calc(81 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--balloon-bg);
  color: #fff;
  text-align: center;
}
.balloon::after {
  content: "";
  position: absolute;
  right: calc(-11 * var(--u));
  top: calc(50 * var(--u));
  border-left: calc(22 * var(--u)) solid var(--balloon-bg);
  border-top: calc(7 * var(--u)) solid transparent;
  border-bottom: calc(7 * var(--u)) solid transparent;
  transform: rotate(24deg);
}
.balloon p { font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1.25; }
.balloon .gold-text { font-size: 1.7em; font-weight: 900; }

.lp-error {
  margin: 12px;
  padding: 12px 16px;
  border: 2px solid #c33;
  background: #fff3f3;
  color: #a22;
  font: 700 13px/1.6 sans-serif;
}
.lp-error--boot { margin: 40px 16px; }

/* =====================================================================
   5. セクション別スタイル
   ===================================================================== */

/* ---------------------------------------------------------------------
   5-1. ファーストビュー（fv）
   --------------------------------------------------------------------- */
.sec--fv {
  background: var(--fv-bg);
  padding-bottom: calc(58 * var(--u));
  color: #fff;
}
.fv__visual { position: relative; height: calc(495 * var(--u)); }
.fv__media { position: absolute; inset: 0; overflow: hidden; }
.fv__visual--cutout .fv__media-el {
  position: absolute;
  left: calc(var(--cut-left) * var(--u));
  top: calc(var(--cut-top) * var(--u));
  width: calc(var(--cut-width) * var(--u));
  height: auto;
}
.fv__visual--cutout .fv__media .ph {
  position: absolute;
  left: 14.7%;
  width: 66.4%;
  top: 4%;
  height: 92%;
  aspect-ratio: auto;
  color: #55554f;
}
.fv__visual--cover .fv__media-el { width: 100%; height: 100%; object-fit: cover; object-position: var(--fv-cover-pos, 50% 20%); }
.fv__media .ph { align-items: flex-start; justify-content: flex-end; }
.fv__media .ph__inner { align-items: flex-end; max-width: 44%; padding: 70px 10px 0 0; text-align: right; }
.fv__visual--cutout .fv__media .ph__inner { max-width: 40%; }
.fv__logo {
  position: absolute;
  z-index: 3;
  left: calc(18 * var(--u));
  top: calc(16 * var(--u));
  width: calc(82 * var(--u));
}
.fv__logo-img { width: 100%; height: auto; }
.fv__logo .ph { height: calc(26 * var(--u)); min-height: 0; }
.fv__catch {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--fv-catch-top, 93) * var(--u));
  transform: translateX(-50%);
}
.fv__catch span {
  display: block;
  max-height: calc(var(--fv-catch-h, 258) * var(--u));
  padding: calc(7 * var(--u)) 0 calc(3 * var(--u));
  writing-mode: vertical-rl;
  background: var(--color-fv-label);
  color: #fff;
  font-size: calc(var(--fv-catch-fs, 19) * var(--u));
  font-weight: 400;
  line-height: calc(var(--fv-catch-lh, 25) * var(--u));
  letter-spacing: calc(4 * var(--u));
  white-space: normal;
}
.fv__badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--fv-badge-top, 362) * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  color: var(--color-fv-badge);
  filter: drop-shadow(0 calc(1 * var(--u)) calc(1.5 * var(--u)) rgba(0, 0, 0, 0.35));
}
.fv__badge .laurel { width: calc(24 * var(--u)); height: calc(60 * var(--u)); flex: none; }
.fv__badge-body { text-align: center; line-height: 1; }
.fv__badge-label { font-size: calc(9.7 * var(--u)); font-weight: 900; letter-spacing: 0.02em; }
.fv__badge-score { display: flex; align-items: baseline; justify-content: center; margin-top: calc(2 * var(--u)) !important; }
.fv__badge-num {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 800;
  font-size: calc(30 * var(--u));
  letter-spacing: -0.02em;
}
.fv__badge-suffix { font-size: calc(16.6 * var(--u)); font-weight: 900; margin-left: calc(2 * var(--u)); }
.fv__badge .stars { width: calc(72 * var(--u)); margin: calc(3 * var(--u)) auto 0; }
.fv__name {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.fv__kana {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  margin-bottom: calc(9 * var(--u)) !important;
}
.fv__title,
.fv__reflect {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.74;
  white-space: nowrap;
  font-size: calc(49 * var(--u));
}
.fv__title .fit-target,
.fv__reflect .fit-target { display: inline-block; padding: 0 0.04em 0 0; }
.fv__reflect {
  position: relative;
  height: calc(24 * var(--u));
  overflow: hidden;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  pointer-events: none;
}
.fv__hy { display: inline-block; margin: 0 -0.07em; }
.fv__reflect .fit-target { transform: scaleY(-1); transform-origin: 50% 50%; margin-top: -0.2em; }
.fv__sub {
  margin: calc(4 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) !important;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.fv__points {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: calc(8 * var(--u));
  margin: 0 calc(8 * var(--u)) !important;
}
.fv__point {
  min-height: calc(66 * var(--u));
  padding: calc(6 * var(--u)) calc(2 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: calc(1.5 * var(--u)) solid #fff;
  border-radius: calc(3 * var(--u));
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.22);
}
.fv__point-lead { font-size: calc(var(--fv-point-lead-fs, 12) * var(--u)); font-weight: 700; }
.fv__point-main { font-size: calc(var(--fv-point-main-fs, 18) * var(--u)); font-weight: 900; letter-spacing: 0.01em; }
.fv__authority {
  margin: calc(12 * var(--u)) calc(8 * var(--u)) 0;
  min-height: calc(44 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--gold-text);
  text-align: center;
  line-height: 1.35;
}
.fv__authority-text { font-size: calc(13 * var(--u)); font-weight: 900; letter-spacing: 0.02em; }
.fv__authority-note { font-size: calc(9 * var(--u)); font-weight: 500; }
.fv__cta {
  position: relative;
  display: flex;
  align-items: center;
  margin: calc(19 * var(--u)) calc(25 * var(--u)) 0;
  min-height: calc(70 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--cta-bar-bg);
  border-radius: calc(6 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.28);
  color: #fff;
  text-decoration: none;
}
.fv__cta::before {
  content: "";
  position: absolute;
  inset: calc(4 * var(--u));
  border: calc(1 * var(--u)) dashed rgba(255, 255, 255, 0.6);
  border-radius: calc(3 * var(--u));
  pointer-events: none;
}
.fv__cta-badge {
  position: relative;
  flex: none;
  width: calc(68 * var(--u));
  min-height: calc(50 * var(--u));
  margin-right: calc(13 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sub);
  border-radius: calc(5 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.03em;
  text-align: center;
}
.fv__cta-badge::after {
  content: "";
  position: absolute;
  right: calc(-5 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  border-left: calc(5 * var(--u)) solid var(--color-sub);
  border-top: calc(4 * var(--u)) solid transparent;
  border-bottom: calc(4 * var(--u)) solid transparent;
}
.fv__cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fv__cta-lead { font-size: calc(10 * var(--u)); font-weight: 500; white-space: nowrap; }
.fv__cta-lead .num { font-size: 1.4em; font-weight: 700; }
.fv__cta-lead .en { font-size: 1.3em; }
.fv__cta-main { font-size: calc(var(--fv-cta-main-fs, 18) * var(--u)); font-weight: 700; letter-spacing: var(--fv-cta-main-ls, 0.02em); white-space: nowrap; margin-top: calc(2 * var(--u)); }
.fv__cta-icon { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-left: calc(6 * var(--u)); }
.fv__cta-icon svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------
   5-2. 問題提起・ベネフィット・使用シーン（benefit）
   --------------------------------------------------------------------- */
.sec--benefit { background: var(--color-bg); }
.benefit__media { aspect-ratio: 16 / 9; }
.benefit__body { padding: calc(34 * var(--u)) calc(10 * var(--u)) calc(62 * var(--u)) calc(20 * var(--u)); }
.benefit__heading {
  font-size: calc(var(--fs-heading-lg) * var(--u));
  font-weight: 900;
  line-height: 1.9;
  letter-spacing: 0.01em;
}
.checklist { margin: calc(23 * var(--u)) 0 0 calc(12 * var(--u)) !important; }
.checklist__item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(47 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.5;
}
.checklist__icon { flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.checklist__icon svg { width: 100%; height: 100%; display: block; }
.benefit__text {
  font-size: calc(var(--fs-body) * var(--u));
  font-weight: 500;
  line-height: var(--lh-body);
}
.checklist + .benefit__text { margin-top: calc(16 * var(--u)) !important; }
.benefit__text + .benefit__text { margin-top: calc(14 * var(--u)) !important; }

/* ---------------------------------------------------------------------
   5-3. 特徴紹介（features）
   --------------------------------------------------------------------- */
.features__header-media {
  aspect-ratio: 16 / 9;
  position: relative;
}
.features__header-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) var(--features-fade, 22%));
}
.features__inner {
  padding: calc(68 * var(--u)) 0 calc(70 * var(--u));
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}
.sec--features .sec-head { margin-bottom: calc(32 * var(--u)); }
.sec--features .sec-head__ja { letter-spacing: 0.26em; gap: calc(12 * var(--u)); padding-left: 0.26em; }
.sec--features .sec-head__ja::before,
.sec--features .sec-head__ja::after { width: calc(48 * var(--u)); background: rgba(255, 255, 255, 0.8); }
.feature { position: relative; }
.feature + .feature { margin-top: calc(58 * var(--u)); }
.feature__num {
  position: relative;
  z-index: 2;
  margin: 0 0 calc(-21 * var(--u)) calc(11 * var(--u)) !important;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(72 * var(--u));
  line-height: 0.74;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.feature__media { aspect-ratio: 3 / 2; }
.feature__body { padding: calc(20 * var(--u)) calc(10 * var(--u)) 0 calc(17 * var(--u)); }
.feature__visual:has(.bar-chart) + .feature__body { padding-top: calc(28 * var(--u)); }
.feature__heading { font-size: calc(var(--fs-heading) * var(--u)); font-weight: 700; line-height: 1.8; }
.feature__text {
  margin-top: calc(17 * var(--u)) !important;
  font-size: calc(var(--fs-body) * var(--u));
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: -0.02em;
}
.feature__text + .feature__text { margin-top: 0 !important; }

/* 棒グラフ（特徴03） */
.bar-chart {
  position: relative;
  height: calc(249 * var(--u));
  background-color: #fff;
  background-image: radial-gradient(circle, #dcdcdc calc(1.2 * var(--u)), transparent calc(1.4 * var(--u)));
  background-size: calc(21 * var(--u)) calc(21 * var(--u));
  background-position: calc(4 * var(--u)) calc(6 * var(--u));
  color: var(--color-text);
}
.bar-chart__plot {
  position: absolute;
  left: calc(68 * var(--u));
  top: calc(14 * var(--u));
  width: calc(239 * var(--u));
  height: calc(184 * var(--u));
  border-bottom: calc(1.2 * var(--u)) solid #b5b5b5;
}
.bar-chart__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: #8a8a8a;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.bar-chart__lines line { vector-effect: non-scaling-stroke; }
.bar-chart__bar {
  position: absolute;
  bottom: 0;
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: var(--chart-bar-base);
}
.bar-chart__bar.is-accent { background: var(--chart-bar-accent); }
.bar-chart__value {
  position: absolute;
  top: calc(40 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(43 * var(--u));
  line-height: 1;
  color: #111;
  white-space: nowrap;
  text-shadow:
    calc(2.4 * var(--u)) 0 0 #fff, calc(-2.4 * var(--u)) 0 0 #fff, 0 calc(2.4 * var(--u)) 0 #fff, 0 calc(-2.4 * var(--u)) 0 #fff,
    calc(1.7 * var(--u)) calc(1.7 * var(--u)) 0 #fff, calc(-1.7 * var(--u)) calc(1.7 * var(--u)) 0 #fff,
    calc(1.7 * var(--u)) calc(-1.7 * var(--u)) 0 #fff, calc(-1.7 * var(--u)) calc(-1.7 * var(--u)) 0 #fff;
}
.bar-chart__label {
  position: absolute;
  top: calc(100% + calc(5 * var(--u)));
  left: calc(var(--x) * var(--u));
  transform: translateX(-50%);
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.bar-chart__balloon { left: calc(47 * var(--u)); top: calc(20 * var(--u)); }

/* ---------------------------------------------------------------------
   5-4. カラー・サイズ（variations）
   --------------------------------------------------------------------- */
.sec--variations {
  background: var(--color-bg);
  padding: calc(70 * var(--u)) 0 calc(69 * var(--u));
}
.sec--variations .sec-head { margin-bottom: calc(52 * var(--u)); }
.color-row { position: relative; height: calc(309 * var(--u)); isolation: isolate; }
.color-row__image:has(> .ph) { z-index: -1; }
.color-row__panel {
  position: absolute;
  top: calc(65 * var(--u));
  width: calc(var(--color-panel-w, 186) * var(--u));
  height: calc(172 * var(--u));
  display: flex;
  align-items: center;
  background: var(--panel-bg);
}
.color-row--img-right .color-row__panel { left: 0; padding-left: calc(30 * var(--u)); }
.color-row--img-left .color-row__panel { right: 0; justify-content: flex-end; padding-right: calc(36 * var(--u)); }
.color-row.has-shadow .color-row__panel { box-shadow: 0 0 calc(24 * var(--u)) rgba(0, 0, 0, 0.09); }
.color-row__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(28 * var(--u));
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--panel-text);
}
.color-row__image {
  position: absolute;
  z-index: 1;
  top: calc(-2 * var(--u));
  width: calc(300 * var(--u));
  height: calc(300 * var(--u));
  transform: translate(calc(var(--img-x, 0) * var(--u)), calc(var(--img-y, 0) * var(--u))) scale(var(--img-scale, 1));
}
.color-row--img-right .color-row__image { left: calc(140 * var(--u)); }
.color-row--img-left .color-row__image { left: calc(-90 * var(--u)); }
.color-row__image .ph { width: 70%; height: 70%; margin: 15% 0 0 8%; }
.color-row--img-left .color-row__image .ph { margin-left: 30%; }
.sizes { padding: calc(50 * var(--u)) calc(18 * var(--u)) 0; text-align: center; }
.sizes__heading { font-size: calc(var(--fs-heading) * var(--u)); font-weight: 900; line-height: 1.375; }
.sizes__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(16 * var(--u));
  margin-top: calc(30 * var(--u)) !important;
}
.sizes__list[style*="--size-w"] { gap: calc(10 * var(--u)); }
.sizes__item {
  width: calc(var(--size-w, 72) * var(--u));
  height: calc(var(--size-w, 72) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--size-w, 72) * 0.555 * var(--u));
  line-height: 1;
}
.sizes__item.is-long { font-size: calc(var(--size-w, 72) * 0.375 * var(--u)); }
.sizes__note { margin-top: calc(16 * var(--u)) !important; font-size: calc(var(--fs-small) * var(--u)); }

/* ---------------------------------------------------------------------
   5-5. 品質・価値（quality）
   --------------------------------------------------------------------- */
.sec--quality {
  background: var(--color-bg-alt);
  padding: calc(63 * var(--u)) calc(var(--gutter) * var(--u)) calc(64 * var(--u));
}
.sec--quality .sec-head { margin-bottom: calc(44 * var(--u)); }
.cards { display: grid; gap: calc(32 * var(--u)); }
.card {
  overflow: hidden;
  background: #fff;
  border-radius: calc(var(--radius) * var(--u));
  padding-bottom: calc(40 * var(--u));
}
.card:has(> .block-image:last-child),
.card:has(> .line-chart:last-child) { padding-bottom: 0; }
.card:has(> .carousel:last-child) { padding-bottom: calc(46 * var(--u)); }
.card__media { aspect-ratio: 16 / 9; }
.card__media--contain { background: #fff; }
.card__media--pair { aspect-ratio: 16 / 9; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #000; }
.card__media-cell { position: relative; overflow: hidden; }
.card__media-cell .fill { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: calc(22 * var(--u)) calc(24 * var(--u)) 0; }
.card__heading { font-size: calc(var(--fs-heading) * var(--u)); font-weight: 900; line-height: 1.375; }
.card__text {
  margin-top: calc(16 * var(--u)) !important;
  font-size: calc(var(--fs-body) * var(--u));
  font-weight: 500;
  line-height: var(--lh-card);
}
.card__text + .card__text { margin-top: calc(8 * var(--u)) !important; }
.block-image { margin-top: calc(26 * var(--u)); }
.block-image__img { width: 100%; height: auto; }
.block-image.is-inset { padding: 0 calc(24 * var(--u)); }
.block-text { padding: 0 calc(24 * var(--u)); }

/* 評価バッジ（金色） */
.award {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  margin: calc(19 * var(--u)) calc(24 * var(--u)) 0;
  min-height: calc(100 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u));
  background: var(--gold);
  color: var(--gold-text);
}
.award .laurel { flex: none; width: calc(22 * var(--u)); height: calc(55 * var(--u)); color: var(--gold-laurel); }
.award__body { text-align: center; line-height: 1.4; }
.award__lead { font-size: calc(11 * var(--u)); font-weight: 900; }
.award__main { font-size: calc(25.6 * var(--u)); font-weight: 900; line-height: 1.3; letter-spacing: 0.01em; }
.award__main small { font-size: 0.77em; }
.award__lead small { font-size: 0.7em; }
.award__note { font-size: calc(7.7 * var(--u)); font-weight: 500; }

/* 折れ線グラフ */
.line-chart { margin-top: calc(33 * var(--u)); }
.line-chart__title {
  padding: calc(6 * var(--u)) 0;
  background: #0a0a0a;
  color: #fff;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}
.line-chart__plot {
  position: relative;
  padding: calc(14 * var(--u)) calc(4 * var(--u)) 0;
  background-color: #f4f3f0;
  background-image: radial-gradient(circle, #dddcd7 calc(0.9 * var(--u)), transparent calc(1.1 * var(--u)));
  background-size: calc(16 * var(--u)) calc(16 * var(--u));
}
.line-chart__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc__axis { stroke: #9b9b9b; stroke-width: 1.5; }
.lc__grid { stroke: #b9b9b9; stroke-width: 1.5; }
.lc__ytick, .lc__xtick { fill: var(--color-text); font-size: 11px; font-weight: 700; font-family: var(--font-ja); }
.line-chart__balloon { right: calc(14 * var(--u)); top: calc(46 * var(--u)); }
.line-chart__balloon::after { right: auto; left: calc(8 * var(--u)); top: calc(-4 * var(--u)); transform: rotate(-120deg); }
.line-chart__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  background: #f4f3f0;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}
.line-chart__legend li { display: flex; align-items: center; gap: calc(8 * var(--u)); line-height: 1.9; }
.line-chart__legend li::before { content: ""; width: calc(24 * var(--u)); height: calc(3 * var(--u)); background: var(--c); }
.line-chart__note { font-size: calc(10 * var(--u)); white-space: nowrap; }

/* 着用写真カルーセル */
.carousel {
  margin-top: calc(26 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc(24 * var(--u));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: calc(30 * var(--u)); width: max-content; padding: 0 calc(24 * var(--u)); }
.carousel__item { flex: none; width: calc(172 * var(--u)); scroll-snap-align: start; }
.carousel__media { aspect-ratio: 9 / 16; overflow: hidden; border-radius: calc(var(--radius) * var(--u)); }
.carousel__caption { margin-top: calc(12 * var(--u)) !important; font-size: calc(var(--fs-body) * var(--u)); font-weight: 500; line-height: 1.5; text-align: center; }

.carousel-wrap { position: relative; }
.carousel__arrow {
  position: absolute;
  z-index: 3;
  top: calc(153 * var(--u));
  transform: translateY(-50%);
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-main);
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
}
.carousel__arrow svg { width: 46%; height: 46%; display: block; }
.carousel__arrow--prev { left: calc(10 * var(--u)); }
.carousel__arrow--next { right: calc(10 * var(--u)); }
.carousel__arrow:disabled { opacity: 0; pointer-events: none; }
.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(7 * var(--u));
  margin-top: calc(14 * var(--u));
}
.carousel__dot {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: #d6d4cd;
  transition: background 0.2s, width 0.2s;
}
.carousel__dot.is-active {
  background: var(--color-main);
  width: calc(14 * var(--u));
  border-radius: calc(3 * var(--u));
}

/* ---------------------------------------------------------------------
   5-6. 動画（video）
   --------------------------------------------------------------------- */
.sec--video { background: var(--color-bg); padding: calc(var(--section-space) * var(--u)) calc(var(--gutter) * var(--u)); }
.sec--video .sec-head { margin-bottom: calc(26 * var(--u)); }
.video__frame { aspect-ratio: var(--video-ratio, 16 / 9); overflow: hidden; border-radius: calc(var(--radius) * var(--u)); background: #000; }
.video__caption { margin-top: calc(12 * var(--u)) !important; font-size: calc(var(--fs-small) * var(--u)); text-align: center; }

/* ---------------------------------------------------------------------
   5-7. レビュー（reviews）
   --------------------------------------------------------------------- */
.sec--reviews {
  background: var(--color-bg);
  padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(63 * var(--u));
}
.sec--reviews .sec-head { margin-bottom: calc(43 * var(--u)); }
.reviews__summary { margin: calc(-20 * var(--u)) 0 calc(28 * var(--u)) !important; text-align: center; font-weight: 700; }
.review { padding-bottom: calc(16 * var(--u)); border-bottom: 1px dashed #c8c8c8; }
.review + .review { margin-top: calc(17 * var(--u)); }
.review__profile { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.review__avatar { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); overflow: hidden; border-radius: 50%; }
.review__avatar .ph { border-radius: 50%; }
.review__who { font-size: calc(var(--fs-body) * var(--u)); font-weight: 700; color: var(--color-text-sub); }
.review__stars { margin-top: calc(9 * var(--u)); margin-left: calc(-2 * var(--u)); }
.review__title { margin-top: calc(8 * var(--u)) !important; font-size: calc(16 * var(--u)); font-weight: 700; line-height: 1.6; }
.review__images { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)) !important; }
.review__image { width: calc(88 * var(--u)); aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(var(--radius-sm) * var(--u)); }
.review__text { margin-top: calc(10 * var(--u)) !important; font-size: calc(var(--fs-body) * var(--u)); line-height: 1.78; }

/* ---------------------------------------------------------------------
   5-8. FAQ（faq）
   --------------------------------------------------------------------- */
.sec--faq {
  background: var(--color-bg-alt);
  padding: calc(63 * var(--u)) calc(20 * var(--u)) calc(65 * var(--u));
}
.sec--faq .sec-head { margin-bottom: calc(43 * var(--u)); }
.faq { border-top: 1px solid var(--color-main); }
.faq__item { border-bottom: 1px solid var(--color-main); }
.faq__q {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(67.5 * var(--u));
  padding: calc(10 * var(--u)) calc(6 * var(--u));
  cursor: pointer;
  list-style: none;
  font-size: calc(var(--fs-body) * var(--u));
  font-weight: 700;
  line-height: 1.5;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__mark { flex: none; font-family: var(--font-en); font-weight: 700; }
.faq__q-text { flex: 1; letter-spacing: 0.04em; }
.faq__icon { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #1c1b1f; }
.faq__icon .v { transition: opacity 0.2s; }
.faq__icon svg { width: 100%; height: 100%; display: block; }
.faq__item[open] .faq__icon .v { opacity: 0; }
.faq__a {
  display: flex;
  gap: calc(8 * var(--u));
  padding: 0 calc(6 * var(--u)) calc(20 * var(--u));
  font-size: calc(var(--fs-faq-a, 12.5) * var(--u));
  line-height: 1.9;
}
.faq__a .faq__mark { color: var(--color-sub); }
.faq__a-text a { color: var(--color-sub); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   5-9. オファー（offer）
   --------------------------------------------------------------------- */
.sec--offer {
  background: var(--color-bg-dark);
  padding: calc(16 * var(--u)) calc(var(--gutter) * var(--u)) calc(50 * var(--u));
}
.offer__ribbon {
  position: absolute;
  z-index: 3;
  left: calc(57 * var(--u));
  top: calc(57 * var(--u));
  width: calc(240 * var(--u));
  height: calc(41 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--color-sub);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(22 * var(--u));
  letter-spacing: 0.02em;
  line-height: 1;
}
.offer__lead { color: #fff; text-align: center; font-weight: 700; margin: calc(16 * var(--u)) 0 !important; }
.coupon { position: relative; background: #fff; border-radius: calc(var(--radius-sm) * var(--u)); color: var(--color-text); }
.coupon + .coupon { margin-top: calc(22 * var(--u)); }
.coupon__top { padding: calc(24 * var(--u)) calc(27 * var(--u)) 0; text-align: center; }
.coupon__logo { width: calc(130 * var(--u)); margin: 0 auto calc(18 * var(--u)); }
.coupon__logo-img { width: 100%; height: auto; }
.coupon__logo .ph { height: calc(40 * var(--u)); min-height: 0; }
.coupon__condition {
  padding: calc(5 * var(--u)) 0;
  border-top: calc(2 * var(--u)) solid var(--color-main);
  border-bottom: calc(2 * var(--u)) solid var(--color-main);
  font-size: calc(16 * var(--u));
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.coupon__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: calc(7 * var(--u)) calc(-8 * var(--u)) 0 !important;
  color: var(--color-sub);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.coupon__amount { font-size: calc(77 * var(--u)); }  /* 金額が長い場合はJSで自動縮小（data-fit） */
.coupon__amount .fit-target { display: inline-flex; align-items: baseline; }
.coupon__num { font-family: var(--font-en); font-size: 1em; letter-spacing: -0.04em; }
.coupon__unit { font-size: 0.506em; font-weight: 900; margin-left: 0.03em; }
.coupon__off { font-family: var(--font-en); font-size: 0.558em; letter-spacing: -0.03em; }
.coupon__cut {
  position: relative;
  height: calc(40 * var(--u));
  margin-top: calc(2 * var(--u));
}
.coupon__cut::before {
  content: "";
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: 50%;
  border-top: calc(1.2 * var(--u)) dashed #6d6d6d;
}
.coupon__cut::after {
  content: "";
  position: absolute;
  left: calc(-20 * var(--u));
  right: calc(-20 * var(--u));
  top: 0;
  height: 100%;
  background:
    radial-gradient(circle at calc(20 * var(--u)) 50%, var(--color-bg-dark) calc(20 * var(--u)), transparent calc(20.5 * var(--u))),
    radial-gradient(circle at calc(100% - calc(20 * var(--u))) 50%, var(--color-bg-dark) calc(20 * var(--u)), transparent calc(20.5 * var(--u)));
}
.coupon__bottom { padding: 0 calc(27 * var(--u)); }
.coupon__code {
  min-height: calc(78 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-main);
  line-height: 1.3;
}
.coupon__code-label { font-size: calc(14 * var(--u)); letter-spacing: 0.1em; }
.coupon__code-value { font-family: var(--font-en); font-weight: 700; font-size: calc(24 * var(--u)); letter-spacing: 0.07em; margin-top: calc(2 * var(--u)) !important; }
.coupon__btn {
  display: flex;
  width: 100%;
  min-height: calc(66 * var(--u));
  margin-top: calc(23 * var(--u));
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  padding: calc(8 * var(--u));
  border: 0;
  border-radius: 0 0 calc(var(--radius-sm) * var(--u)) calc(var(--radius-sm) * var(--u));
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: calc(18 * var(--u)) !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 0.2s;
}
.coupon__btn:hover { filter: brightness(1.06); }
.coupon__btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.coupon__btn.is-copied { filter: brightness(0.92); }
.notes { margin-top: calc(23 * var(--u)); color: #fff; font-size: calc(var(--fs-small) * var(--u)); line-height: 1.5; }
.notes__list li { padding-left: 1em; text-indent: -1em; }
.notes__list li::before { content: "※"; }

/* ---------------------------------------------------------------------
   5-10. 購入エリア（purchase）
   --------------------------------------------------------------------- */
.sec--purchase { background: var(--color-bg-buy); border-top: 1px solid #e2e2e2; }
.buy__main { position: relative; aspect-ratio: 1 / 1; background: var(--color-bg-buy); }
.buy__main > img, .buy__main > video { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.buy__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(4 * var(--u)); padding: calc(2 * var(--u)); }
.buy__thumb { position: relative; aspect-ratio: 1 / 1; background: #e6e5e2; cursor: pointer; overflow: hidden; }
.buy__thumb.is-active { outline: calc(2 * var(--u)) solid #333; outline-offset: calc(-2 * var(--u)); }
.buy__thumb .fill { object-fit: contain; }
.buy__thumb-play { position: absolute; right: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); }
.buy__thumb-play svg { width: 100%; height: 100%; }
.buy__info { padding: calc(28 * var(--u)) calc(18 * var(--u)) calc(48 * var(--u)); }
.buy__name { font-family: var(--font-en); font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.4; }
.buy__rating { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)) !important; font-size: calc(14 * var(--u)); font-weight: 700; }
.buy__price { margin-top: calc(18 * var(--u)) !important; font-family: var(--font-en); font-size: calc(15 * var(--u)); font-weight: 700; }
.buy__price small { font-family: var(--font-ja); font-size: calc(10 * var(--u)); }
.buy__price-note { font-size: calc(11 * var(--u)); }
.buy__widget { margin-top: calc(16 * var(--u)); }
.buy__widget .ph { min-height: calc(46 * var(--u)); }
.buy__option { margin-top: calc(20 * var(--u)); }
.buy__option-label { font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: 0.15em; }
.buy__option-current { font-family: var(--font-en); letter-spacing: 0; margin-left: calc(6 * var(--u)); }
.buy__swatches { display: flex; gap: calc(14 * var(--u)); margin-top: calc(10 * var(--u)) !important; padding-left: calc(6 * var(--u)) !important; }
.buy__swatch { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #ccc; cursor: pointer; }
.buy__swatch.is-active { box-shadow: 0 0 0 calc(2 * var(--u)) #fff, 0 0 0 calc(3 * var(--u)) #999; }
.buy__sizes { display: grid; grid-template-columns: repeat(4, calc(58 * var(--u))); column-gap: calc(14 * var(--u)); row-gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)) !important; }
.buy__size { padding-top: calc(14 * var(--u)); border-top: calc(1 * var(--u)) solid #aaa; text-align: center; font-family: var(--font-en); font-size: calc(11 * var(--u)); cursor: pointer; }
.buy__size.is-active { border-top: calc(3 * var(--u)) solid #333; padding-top: calc(12 * var(--u)); }
.buy__or { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(24 * var(--u)) !important; font-family: var(--font-en); font-size: calc(12 * var(--u)); font-weight: 600; }
.buy__or::before, .buy__or::after { content: ""; flex: 1; height: 1px; background: #ddd; }
.buy__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  min-height: calc(53 * var(--u));
  margin-top: calc(16 * var(--u));
  background: var(--btn-buy-bg);
  color: #fff !important;
  text-decoration: none;
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.35em;
}
.buy__button svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.buy__notice { margin-top: calc(18 * var(--u)) !important; font-size: calc(12.5 * var(--u)); font-weight: 700; line-height: 1.75; letter-spacing: 0.06em; }
.buy__desc-title, .buy__spec-title { margin-top: calc(26 * var(--u)) !important; font-size: calc(12.5 * var(--u)); font-weight: 500; line-height: 1.7; letter-spacing: 0.05em; }
.buy__desc { margin-top: calc(14 * var(--u)) !important; font-size: calc(12.5 * var(--u)); font-weight: 500; line-height: 1.7; letter-spacing: 0.05em; }
.buy__spec-label { margin-right: 0.5em; }
.buy__specs { margin-top: calc(4 * var(--u)) !important; font-size: calc(12.5 * var(--u)); font-weight: 500; line-height: 1.7; letter-spacing: 0.04em; }
.buy__note { margin-top: calc(18 * var(--u)) !important; font-size: calc(12.5 * var(--u)); font-weight: 500; line-height: 1.7; letter-spacing: 0.05em; }
.buy__accordions { margin-top: calc(30 * var(--u)); border-top: 1px solid #ddd; }
.buy__acc { border-bottom: 1px solid #ddd; }
.buy__acc summary { display: flex; justify-content: space-between; align-items: center; padding: calc(18 * var(--u)) calc(22 * var(--u)); list-style: none; cursor: pointer; font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: 0.15em; }
.buy__acc summary::-webkit-details-marker { display: none; }
.buy__acc-icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); transition: transform 0.2s; }
.buy__acc-icon svg { width: 100%; height: 100%; display: block; }
.buy__acc[open] .buy__acc-icon { transform: rotate(45deg); }
.buy__acc-body { padding: 0 calc(22 * var(--u)) calc(18 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.8; }
.buy__sizechart { margin-top: calc(20 * var(--u)); background: #fff; }
.buy__sizechart .ph { aspect-ratio: 686 / 600; }
.buy__sizechart img { width: 100%; height: auto; }

/* =====================================================================
   6. PC表示（SPデザインを中央に表示し、左右に固定パネル）
   ===================================================================== */
.lp-side { display: none; }
/* --------------------------------------------------------------------------
   追従クーポンバッジ（SP）
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  background: var(--color-sub);
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}
.sticky-cta__icon { width: 20px; height: 20px; flex: none; transform: rotate(0deg); }
.sticky-cta__icon svg { width: 100%; height: 100%; display: block; }
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

@media (min-width: 768px) {
  body { background: var(--pc-bg); }
  .lp-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(var(--content-width), 100%) minmax(0, 1fr);
    background: var(--pc-bg);
  }
  .lp { grid-column: 2; grid-row: 1; box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); }
}
@media (min-width: 1024px) {
  .lp-side {
    display: block;
    position: sticky;
    top: 0;
    grid-row: 1;
    align-self: start;
    height: 100vh;
    color: var(--color-text);
  }
  .lp-side--left { grid-column: 1; }
  .lp-side--right { grid-column: 3; }
  .lp-no-side .lp-side { display: none; }
  .pc-side__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 32px;
    text-align: center;
  }
  .pc-side__logo { width: 120px; height: auto; margin-bottom: 18px; }
  .pc-side__brand { font-family: var(--font-en); font-weight: 700; font-size: 24px; margin: 0 0 12px; }
  .pc-side__copy { margin: 0; font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; letter-spacing: 0.08em; }
  .pc-side__kana { margin: 12px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.3em; }
  .pc-side__name { margin: 0; font-family: var(--font-en); font-weight: 700; font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
  .pc-side__rating { display: flex; align-items: center; gap: 8px; font-family: var(--font-en); font-weight: 700; }
  .pc-side__rating .stars { width: 96px; }
  .pc-side__lead { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
  .pc-side__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 280px);
    min-height: 56px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-main);
    border-radius: 4px;
    color: var(--color-main);
    background: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: transform 0.15s;
  }
  .pc-side__btn.is-primary { background: var(--color-sub); border-color: var(--color-sub); color: #fff; }
  .pc-side__btn:hover { transform: translateY(-1px); }
}

/* =====================================================================
   7. ガイド表示（?guide=1）・書き出しモード（?export=1）
   ===================================================================== */
.lp-guide .sec { outline: 2px dashed #e0457b; outline-offset: -2px; }
.lp-guide .sec::before {
  content: attr(data-label);
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  padding: 2px 8px;
  background: #e0457b;
  color: #fff;
  font: 700 11px/1.6 sans-serif;
}
.lp-export { scroll-behavior: auto; }
.lp-export body, .lp-export .lp-stage { background: var(--color-bg); }
.lp-export .lp { box-shadow: none; }
.lp-export .lp-side { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =====================================================================
   追加（Stretch Jogger Pants制作時に拡張）
   ===================================================================== */
/* FVバッジのレビュー件数（例：324 REVIEWS） */
.fv__badge-count { margin-top: calc(4 * var(--u)) !important; font-family: var(--font-en); font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.08em; }
/* 特徴：図解など、切れさせたくない画像用 */
.feature__media--contain { background: #fff; }
.feature__media--contain .contain { width: 100%; height: 100%; object-fit: contain; }
/* クーポン金額の前置き（「今なら」） */
.coupon__pre { font-size: 0.3em; font-weight: 900; margin-right: 0.12em; color: var(--color-main); letter-spacing: 0.02em; }