/* megly-base.css ------------------------------------------------
   出典トークン: brand-tokens.json v1.1（黒 #000000 統一）
   ecforce制約: グローバルリセット(* {})禁止／全て .mg-lp 配下にスコープ
   ---------------------------------------------------------------- */
:root {
  /* Core colors */
  --mg-black:  #000000;
  --mg-black-soft: #231F20;
  --mg-white:  #FFFFFF;
  --mg-red:    #F64439;   /* Warm Red C : CTA/アクセント */
  --mg-sage:   #AEBBAF;   /* MEGLYグリーン（5655C） */

  /* Semantic */
  --mg-bg:          #FFFFFF;
  --mg-bg-alt:      #F5F6F5;
  --mg-text:        #000000;
  --mg-text-soft:   var(--mg-black-soft);
  --mg-text-muted:  #6B6A68;
  --mg-text-inverse:#FFFFFF;
  --mg-border:      #E3E3E1;
  --mg-cta-bg:      #F64439;
  --mg-cta-text:    #FFFFFF;
  --mg-accent-soft: #AEBBAF;

  /* Product accent（本LPはMEGLYレッド） */
  --mg-accent: var(--mg-red);

  /* MEGLYグリーンの派生色（--mg-sage から算出。独自HEXは新設しない）
     ※先行宣言はcolor-mix非対応環境向けのフォールバック値 */
  --mg-sage-tint: #E8ECE9;
  --mg-sage-tint: color-mix(in srgb, var(--mg-sage) 28%, var(--mg-white));
  /* 濃色グリーンは使用しない。MEGLYグリーンは地色として使い、その上の文字は黒。 */

  /* Secondary palette */
  --mg-c-olive:#9F925D; --mg-c-deepteal:#093E52; --mg-c-periwinkle:#A1ADD8;
  --mg-c-orange:#F57F34; --mg-c-blue:#0E47BB; --mg-c-green:#7CC24D;
  --mg-c-pink:#F5A0C5; --mg-c-yellow:#FFC843; --mg-c-darkgreen:#0E793E;

  /* Typography */
  --mg-font-title:  'Temeraire', 'Yu Gothic', 'YuGothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --mg-font-title2: 'acumin-pro', 'Yu Gothic', 'YuGothic', sans-serif;
  --mg-font-body:   'acumin-pro', 'Yu Gothic', 'YuGothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --mg-font-ja:     'Yu Gothic', 'YuGothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  /* Type scale */
  --mg-fs-hero:  clamp(2rem, 6vw, 3.25rem);
  --mg-fs-h1:    clamp(1.6rem, 4.5vw, 2.25rem);
  --mg-fs-h2:    clamp(1.35rem, 3.5vw, 1.75rem);
  --mg-fs-h3:    1.25rem;
  --mg-fs-body:  1rem;
  --mg-fs-small: 0.875rem;
  --mg-lh-tight: 1.25;
  --mg-lh-normal:1.7;

  /* Spacing */
  --mg-sp-xs:4px; --mg-sp-sm:8px; --mg-sp-md:16px; --mg-sp-lg:24px;
  --mg-sp-xl:40px; --mg-sp-2xl:64px; --mg-sp-section:80px;

  /* Radius */
  --mg-r-sm:4px; --mg-r-md:8px; --mg-r-lg:16px; --mg-r-pill:999px;

  /* Layout */
  --mg-lp-max: 640px;
  --mg-content-max: 1080px;
}

/* ---------- ベース ---------- */
.mg-lp {
  font-family: var(--mg-font-body);
  font-size: var(--mg-fs-body);
  line-height: var(--mg-lh-normal);
  color: var(--mg-text);
  background: var(--mg-bg);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
.mg-lp *,
.mg-lp *::before,
.mg-lp *::after { box-sizing: border-box; }
.mg-lp :where(h1,h2,h3,h4,p,figure,ul,ol) { margin: 0; }
.mg-lp img { max-width: 100%; height: auto; display: block; }
.mg-lp a { color: inherit; }
.mg-lp ul, .mg-lp ol { padding-left: 1.2em; }

/* ---------- レイアウト ---------- */
.mg-lp .mg-container {
  width: 100%; max-width: var(--mg-lp-max);
  margin-inline: auto; padding-inline: var(--mg-sp-lg);
}
.mg-lp .mg-container--wide { max-width: var(--mg-content-max); }
.mg-lp .mg-section { padding-block: var(--mg-sp-section); }
.mg-lp .mg-section--tight { padding-block: var(--mg-sp-xl); }
.mg-lp .mg-section--alt { background: var(--mg-bg-alt); }
.mg-lp .mg-section--dark { background: var(--mg-black); color: var(--mg-text-inverse); }
.mg-lp .mg-stack > * + * { margin-top: var(--mg-sp-md); }
.mg-lp .mg-stack-lg > * + * { margin-top: var(--mg-sp-lg); }

/* ---------- タイポグラフィ ---------- */
.mg-lp .mg-eyebrow {
  font-family: var(--mg-font-title2); font-size: var(--mg-fs-small);
  letter-spacing: .08em; color: var(--mg-text-muted); text-transform: uppercase;
}
.mg-lp .mg-hero-title {
  font-family: var(--mg-font-title); font-size: var(--mg-fs-hero);
  line-height: var(--mg-lh-tight); font-weight: 400;
}
.mg-lp .mg-h1 { font-family: var(--mg-font-title); font-size: var(--mg-fs-h1); line-height: var(--mg-lh-tight); font-weight: 400; }
.mg-lp .mg-h2 { font-family: var(--mg-font-title); font-size: var(--mg-fs-h2); line-height: var(--mg-lh-tight); font-weight: 400; }
.mg-lp .mg-h3 { font-family: var(--mg-font-title2); font-size: var(--mg-fs-h3); font-weight: 600; }
.mg-lp .mg-lead { font-size: 1.0625rem; color: var(--mg-text); }
.mg-lp .mg-muted { color: var(--mg-text-muted); }
.mg-lp .mg-small { font-size: var(--mg-fs-small); }
.mg-lp .mg-num { font-family: var(--mg-font-title); font-size: 1.4em; line-height: 1; vertical-align: -0.05em; }

/* ---------- ボタン / CTA ---------- */
.mg-lp .mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--mg-font-title2); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer;
  padding: 18px 32px; border-radius: var(--mg-r-pill); border: 1px solid transparent;
  transition: transform .15s ease, opacity .15s ease;
}
.mg-lp .mg-btn:active { transform: translateY(1px); }
.mg-lp .mg-btn--cta { background: var(--mg-cta-bg); color: var(--mg-cta-text); box-shadow: 0 6px 18px rgba(246,68,57,.28); }
.mg-lp .mg-btn--cta:hover { opacity: .92; }
.mg-lp .mg-btn--ghost { background: transparent; color: var(--mg-text); border-color: var(--mg-border); }
.mg-lp .mg-btn--block { display: flex; width: 100%; }

.mg-lp .mg-cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-top: 1px solid var(--mg-border);
}

/* ---------- ユーティリティ ---------- */
/* ★文章は原則センター配置。読み順が崩れるものだけ左揃えに戻す */
.mg-lp .mg-section { text-align: center; }
.mg-lp .mg-notes,
.mg-lp .mg-kitlist,
.mg-lp .mg-steps,
.mg-lp .mg-steps > li { text-align: left; }
.mg-lp .mg-list-plain { list-style: none; padding-left: 0; }
.mg-lp .mg-center { text-align: center; }
.mg-lp .mg-accent-text { color: var(--mg-accent); }
.mg-lp .mg-hr { height: 1px; background: var(--mg-border); border: 0; margin-block: var(--mg-sp-xl); }
.mg-lp .mg-hr--sage { height: 2px; width: 48px; background: var(--mg-sage); margin-inline: auto; }
.mg-lp .mg-img-round { border-radius: var(--mg-r-lg); overflow: hidden; }

@media (min-width: 768px) {
  .mg-lp .mg-container { max-width: var(--mg-lp-max); padding-inline: var(--mg-sp-xl); }
  .mg-lp .mg-section { padding-block: calc(var(--mg-sp-section) * 1.25); }
}

/* ---------- ecforce 購入フォームの色合わせフック（クラス名は実機確認後に確定） ----------
.mg-lp .ec-form__submit,
.mg-lp [class*="payment"] button[type="submit"] {
  background: var(--mg-cta-bg) !important;
  color: var(--mg-cta-text) !important;
  border-radius: var(--mg-r-pill) !important;
}
------------------------------------------------------------------------------------- */

/* megly-components.css ------------------------------------------ */

/* ---------- グリッド ---------- */
.mg-lp .mg-grid-2,
.mg-lp .mg-grid-3 { display: grid; gap: var(--mg-sp-lg); }
.mg-lp .mg-grid-2 { grid-template-columns: 1fr; }
.mg-lp .mg-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .mg-lp .mg-grid-2 { grid-template-columns: 1fr 1fr; }
  .mg-lp .mg-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- カード ---------- */
.mg-lp .mg-card {
  background: var(--mg-white); border: 1px solid var(--mg-border);
  border-radius: var(--mg-r-lg); padding: var(--mg-sp-lg);
}
.mg-lp .mg-card__title { font-family: var(--mg-font-title2); font-weight: 600; font-size: 1.0625rem; margin-bottom: var(--mg-sp-sm); }

/* ---------- バッジ ---------- */
.mg-lp .mg-badge {
  display: inline-block; font-family: var(--mg-font-title2); font-weight: 600;
  font-size: var(--mg-fs-small); letter-spacing: .04em;
  padding: 4px 12px; border-radius: var(--mg-r-pill);
  background: var(--mg-accent-soft); color: var(--mg-black);
}

/* ---------- S4：Flow ---------- */
.mg-lp .mg-flow { display: grid; gap: var(--mg-sp-md); grid-template-columns: 1fr; }
@media (min-width: 768px) { .mg-lp .mg-flow { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.mg-lp .mg-flow__step { text-align: center; }
.mg-lp .mg-flow__icon {
  width: 72px; height: 72px; margin: 0 auto var(--mg-sp-sm);
  display: grid; place-items: center; border-radius: var(--mg-r-pill);
  background: var(--mg-bg-alt); color: var(--mg-accent);
  font-family: var(--mg-font-title); font-size: 1.6rem;
}

/* ---------- S5：Steps ---------- */
.mg-lp .mg-steps { counter-reset: step; list-style: none; padding-left: 0; }
.mg-lp .mg-steps > li { position: relative; padding-left: 56px; min-height: 40px; }
.mg-lp .mg-steps > li + li { margin-top: var(--mg-sp-lg); }
.mg-lp .mg-steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: var(--mg-r-pill);
  display: grid; place-items: center;
  background: var(--mg-sage); color: var(--mg-black);
  font-family: var(--mg-font-title); font-size: 1.25rem; line-height: 1;
}
.mg-lp .mg-steps__title { font-family: var(--mg-font-title2); font-weight: 600; }

/* ---------- S6：Voice ---------- */
.mg-lp .mg-voice {
  background: var(--mg-bg-alt); border-radius: var(--mg-r-lg);
  padding: var(--mg-sp-lg); position: relative;
}
.mg-lp .mg-voice__body { font-size: 1.0625rem; }
.mg-lp .mg-voice__name { margin-top: var(--mg-sp-md); font-size: var(--mg-fs-small); color: var(--mg-text-muted); }

/* ---------- S7：SpecTable ---------- */
.mg-lp .mg-spec { width: 100%; border-collapse: collapse; font-size: var(--mg-fs-body); }
.mg-lp .mg-spec th, .mg-lp .mg-spec td { text-align: left; padding: 14px 4px; border-bottom: 1px solid var(--mg-border); vertical-align: top; }
.mg-lp .mg-spec th { width: 38%; font-family: var(--mg-font-title2); font-weight: 600; color: var(--mg-text-muted); }

/* ---------- S8：FAQ ---------- */
.mg-lp .mg-faq__item { border-bottom: 1px solid var(--mg-border); }
.mg-lp .mg-faq__item > summary {
  cursor: pointer; list-style: none; padding: var(--mg-sp-md) 32px var(--mg-sp-md) 0;
  position: relative; font-family: var(--mg-font-title2); font-weight: 600;
}
.mg-lp .mg-faq__item > summary::-webkit-details-marker { display: none; }
.mg-lp .mg-faq__item > summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--mg-accent); line-height: 1;
}
.mg-lp .mg-faq__item[open] > summary::after { content: "−"; }
.mg-lp .mg-faq__answer { padding: 0 0 var(--mg-sp-md); color: var(--mg-text-muted); }

/* ---------- S9：Offer ---------- */
.mg-lp .mg-offer {
  border: 2px solid var(--mg-accent); border-radius: var(--mg-r-lg);
  padding: var(--mg-sp-lg); text-align: center; background: var(--mg-white);
}
.mg-lp .mg-offer__price { font-family: var(--mg-font-title); line-height: 1; margin: var(--mg-sp-sm) 0; }
.mg-lp .mg-offer__price .now { font-size: clamp(2.4rem, 9vw, 3.6rem); color: var(--mg-accent); }
.mg-lp .mg-offer__price .yen { font-size: .5em; }
.mg-lp .mg-offer__was { color: var(--mg-text-muted); text-decoration: line-through; font-size: var(--mg-fs-small); }
.mg-lp .mg-offer__note { font-size: var(--mg-fs-small); color: var(--mg-text-muted); margin-top: var(--mg-sp-sm); }

/* ---------- Ratio ---------- */
.mg-lp .mg-ratio { position: relative; width: 100%; overflow: hidden; border-radius: var(--mg-r-lg); background: var(--mg-bg-alt); }
.mg-lp .mg-ratio--1x1 { aspect-ratio: 1 / 1; }
.mg-lp .mg-ratio--4x3 { aspect-ratio: 4 / 3; }
.mg-lp .mg-ratio--16x9 { aspect-ratio: 16 / 9; }
.mg-lp .mg-ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   ★ver.2 追加①：書体ルール（セリフ／サンセリフの混在禁止）
   -------------------------------------------------------------
   Temeraire はセリフ体。和文（游ゴシック＝サンセリフ）と同じ一文に
   欧文・数字が入ると、一文の中でセリフ体とサンセリフ体が混ざる。
   → 文章として読む要素はすべてサンセリフ体に統一する。
   → セリフ体は「和文と同じ行に並ばない欧文ディスプレイ」＝ .mg-en のみ。
   ============================================================= */
.mg-lp .mg-hero-title,
.mg-lp .mg-h1,
.mg-lp .mg-h2,
.mg-lp .mg-num,
.mg-lp .mg-offer__price { font-family: var(--mg-font-ja); }
.mg-lp .mg-hero-title,
.mg-lp .mg-h1,
.mg-lp .mg-h2 { font-weight: 700; letter-spacing: -0.01em; }
.mg-lp .mg-num { font-weight: 700; }
/* 本LPのFVコピーは一文のため、ヒーローのサイズを一段下げて改行を安定させる */
.mg-lp .mg-hero-title { font-size: clamp(1.6rem, 5vw, 2.5rem); }
.mg-lp .mg-offer__price { font-weight: 700; }
/* 単独で置く欧文ディスプレイのみセリフ体（和文と同じ行に置かないこと） */
.mg-lp .mg-en { font-family: var(--mg-font-title); font-weight: 400; }

/* =============================================================
   ★ver.2 追加②：注釈（文中マーク「*²」／注釈文「＊2 XXXX」）
   注釈文はセクションごとに、その直下へ置く。末尾まとめは作らない。
   ============================================================= */
.mg-lp .mg-ref { font-size: .8em; font-weight: 400; letter-spacing: 0; }
.mg-lp .mg-no {
  display: grid; place-items: center; width: 36px; height: 36px;
  margin: 0 auto var(--mg-sp-sm); border-radius: var(--mg-r-pill);
  background: var(--mg-sage); color: var(--mg-black);
  font-size: 1rem; line-height: 1;
}
.mg-lp .mg-notes {
  font-size: 0.75rem; line-height: 1.75; color: var(--mg-text-muted);
  margin-top: var(--mg-sp-lg); padding-top: var(--mg-sp-md);
  border-top: 1px solid var(--mg-border); text-align: left;
}
.mg-lp .mg-section--dark .mg-notes { border-top-color: rgba(255,255,255,.24); color: rgba(255,255,255,.72); }
.mg-lp .mg-notes p + p { margin-top: 2px; }
.mg-lp .mg-card .mg-notes,
.mg-lp .mg-offer .mg-notes { margin-top: var(--mg-sp-md); }

/* ---------- インセット・セクション（画面幅いっぱいにせず、左右に余白を残す） ---------- */
.mg-lp .mg-section--inset { padding-block: var(--mg-sp-xl); padding-inline: var(--mg-sp-md); }
.mg-lp .mg-inset {
  max-width: var(--mg-content-max); margin-inline: auto;
  border-radius: var(--mg-r-lg); padding-block: var(--mg-sp-2xl);
}
.mg-lp .mg-inset--sage { background: var(--mg-sage-tint); }
@media (min-width: 768px) {
  .mg-lp .mg-section--inset { padding-inline: var(--mg-sp-xl); }
}

/* ---------- 本LP用の最小追加（すべてトークン参照） ---------- */
.mg-lp .mg-term {
  background: var(--mg-sage); color: var(--mg-black);
  text-align: center; padding: var(--mg-sp-sm) var(--mg-sp-md);
  font-family: var(--mg-font-title2); font-size: var(--mg-fs-small); letter-spacing: .04em;
}
.mg-lp .mg-branches { display: grid; gap: var(--mg-sp-md); }
.mg-lp .mg-branch { display: flex; align-items: center; gap: var(--mg-sp-lg);
  text-decoration: none; text-align: left;
  border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
  padding: var(--mg-sp-lg); background: var(--mg-white); }
.mg-lp .mg-branch__body { flex: 1 1 auto; min-width: 0; }
.mg-lp .mg-branch__fig { flex: 0 0 38%; max-width: 38%; }
.mg-lp .mg-branch__fig img { width: 100%; }
@media (max-width: 480px) {
  .mg-lp .mg-branch { gap: var(--mg-sp-md); padding: var(--mg-sp-md); }
  .mg-lp .mg-branch__fig { flex: 0 0 32%; max-width: 32%; }
  .mg-lp .mg-branch__name { font-size: 1.0625rem; }
  .mg-lp .mg-branch__price { font-size: 0.9375rem; }
}
.mg-lp .mg-branch:hover { border-color: var(--mg-accent); }
.mg-lp .mg-branch__label { font-family: var(--mg-font-title2); font-weight: 600; font-size: var(--mg-fs-small); color: var(--mg-accent); }
.mg-lp .mg-branch__name { font-family: var(--mg-font-ja); font-weight: 700; font-size: 1.25rem; line-height: var(--mg-lh-tight); margin-top: var(--mg-sp-xs); }
.mg-lp .mg-branch__price { font-family: var(--mg-font-title2); font-weight: 600; margin-top: var(--mg-sp-sm); }
.mg-lp .mg-branch__arrow { margin-top: var(--mg-sp-sm); font-size: var(--mg-fs-small); color: var(--mg-text-muted); }
.mg-lp .mg-kitlist { list-style: none; padding-left: 0; text-align: left; }
.mg-lp .mg-kitlist > li { padding: var(--mg-sp-sm) 0; border-bottom: 1px solid var(--mg-border); font-size: var(--mg-fs-small); }
.mg-lp .mg-kitlist > li:last-child { border-bottom: 0; }
.mg-lp .mg-kitlist .gift { color: var(--mg-accent); font-weight: 600; }

/* S4（インセット・グリーン面）内のカード見出しはグリーン */