/* ============================================================
   MIAVIE Design System  (assets/design-system.css)
   HIK基準・静謐/上品・ミント基調。Tailwind と併用しても壊れない
   よう全クラスに mv- 接頭辞。純CSS・トークン駆動。
   薬機法🔴表現は一切含まない。
   ============================================================ */

/* ---------- 0. Design Tokens ---------- */
:root{
  /* ----- color ----- */
  --mv-ink:#1a1a1a;          /* 主要テキスト */
  --mv-ink-strong:#000000;   /* primary hover */
  --mv-ink-soft:#3a3a3a;     /* やや弱いテキスト */
  --mv-muted:#888888;        /* 補足テキスト */
  --mv-faint:#b8b8b8;        /* 装飾ヘアライン(目立つ方) */
  --mv-line:#ecf2f0;         /* 構造の極薄ボーダー(淡い方) */
  --mv-mint:#a3c9c2;         /* アクセント(accent/hover/selected限定) */
  --mv-mint-deep:#7fb3aa;    /* ミントの濃い版(数字・タグ) */
  --mv-mint-soft:#cfe3df;    /* 背景パターン用ミント */
  --mv-mint-bg:#f5fafa;      /* オフホワイト/ミント極薄面 */
  --mv-mint-tint:#eef6f4;    /* 表ヘッダ等のミント淡地 */
  --mv-soft:#f5fafa;         /* オフホワイト面 */
  --mv-white:#ffffff;
  --mv-sel:#d8ebe6;          /* 選択ハイライト */

  /* ----- hairline 役割(色の意味を固定) ----- */
  --mv-rule:var(--mv-faint);     /* 装飾罫線 */
  --mv-divider:var(--mv-line);   /* 構造の仕切り */

  /* ----- spacing (8px スケール) ----- */
  --mv-sp-1:6px;  --mv-sp-2:12px; --mv-sp-3:18px; --mv-sp-4:24px;
  --mv-sp-5:32px; --mv-sp-6:48px; --mv-sp-7:64px;

  /* ----- radius — HIK基準で極控えめ ----- */
  --mv-radius:2px;
  --mv-radius-pill:9999px;

  /* ----- button sizing ----- */
  --mv-btn-pad-y:18px;  --mv-btn-pad-x:26px;
  --mv-btn-pad-y-sm:12px; --mv-btn-pad-x-sm:22px;
  --mv-btn-pad-y-lg:21px; --mv-btn-pad-x-lg:34px;
  --mv-btn-h:54px; --mv-btn-h-sm:44px; --mv-btn-h-lg:60px;

  /* ----- typography ----- */
  --mv-ff-jp:"Shippori Mincho",serif;                       /* 見出し明朝 */
  --mv-ff-body:"Zen Kaku Gothic New",system-ui,sans-serif;  /* 本文 */
  --mv-ff-en:"Cormorant Garamond",serif;                    /* 欧文・数字 */
  --mv-ff-num:"Cormorant Garamond",serif;                   /* 価格・数字 */
  --mv-fs-btn:13px; --mv-fs-btn-sm:12px; --mv-fs-btn-lg:14px;
  --mv-ls-btn:0.14em;
  --mv-ls-cap:0.32em;        /* eyebrow 字間 */
  --mv-eyebrow-size:11px;

  /* ----- 見出しブロックの一定リズム ----- */
  --mv-eyebrow-gap:1.25rem;  /* eyebrow → title */
  --mv-title-gap:1.5rem;     /* title → sub */

  /* ----- ornament 寸法 ----- */
  --mv-orn-hair:1px;
  --mv-orn-w-sm:32px; --mv-orn-w-md:56px; --mv-orn-w-lg:120px;
  --mv-orn-gap:14px;  --mv-orn-dot:5px;   --mv-orn-diamond:6px;

  /* ----- motion ----- */
  --mv-ease:cubic-bezier(0.22,0.61,0.36,1);
  --mv-dur:.6s; --mv-dur-fast:.4s;

  /* ----- elevation — ほぼ無し(上品) ----- */
  --mv-shadow-soft:0 1px 2px rgba(26,26,26,.04);
  --mv-shadow-card:0 1px 0 rgba(26,26,26,.02);
  --mv-shadow-bar:0 -1px 0 var(--mv-line), 0 -8px 24px rgba(26,26,26,.04);

  /* ----- focus ring — ミントで上品に ----- */
  --mv-ring:0 0 0 3px rgba(163,201,194,.45);
}

/* ============================================================
   1. Buttons / CTA
   ============================================================ */
.mv-btn{
  --_bg:var(--mv-ink); --_fg:var(--mv-white); --_bd:var(--mv-ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6em; box-sizing:border-box;
  min-height:var(--mv-btn-h);
  padding:var(--mv-btn-pad-y) var(--mv-btn-pad-x);
  font-family:var(--mv-ff-body); font-weight:300;
  font-size:var(--mv-fs-btn); letter-spacing:var(--mv-ls-btn); line-height:1;
  text-align:center; text-decoration:none; cursor:pointer;
  color:var(--_fg); background:var(--_bg);
  border:1px solid var(--_bd); border-radius:var(--mv-radius);
  transition:background var(--mv-dur) var(--mv-ease),
             color var(--mv-dur) var(--mv-ease),
             border-color var(--mv-dur) var(--mv-ease),
             transform var(--mv-dur) var(--mv-ease),
             box-shadow var(--mv-dur) var(--mv-ease);
  -webkit-tap-highlight-color:transparent;
}
.mv-btn::after{ /* hover で現れるミント極細下線 */
  content:""; position:absolute; left:50%; bottom:-1px; width:0; height:1px;
  background:var(--mv-mint); transform:translateX(-50%);
  transition:width var(--mv-dur) var(--mv-ease);
}
.mv-btn:hover{ transform:translateY(-1px); }
.mv-btn:hover::after{ width:100%; }
.mv-btn:active{ transform:translateY(0); }
.mv-btn:focus-visible{ outline:none; box-shadow:var(--mv-ring); }

/* variants */
.mv-btn--primary{ --_bg:var(--mv-ink); --_fg:var(--mv-white); --_bd:var(--mv-ink); }
.mv-btn--primary:hover{ background:var(--mv-ink-strong); }
.mv-btn--secondary{ --_bg:transparent; --_fg:var(--mv-ink); --_bd:var(--mv-ink); }
.mv-btn--secondary:hover{ background:var(--mv-ink); color:var(--mv-white); }
.mv-btn--ghost{ --_bg:transparent; --_fg:var(--mv-ink); --_bd:var(--mv-line); }
.mv-btn--ghost:hover{ background:var(--mv-mint-bg); border-color:var(--mv-mint); }

/* sizes */
.mv-btn--sm{ min-height:var(--mv-btn-h-sm); padding:var(--mv-btn-pad-y-sm) var(--mv-btn-pad-x-sm); font-size:var(--mv-fs-btn-sm); }
.mv-btn--lg{ min-height:var(--mv-btn-h-lg); padding:var(--mv-btn-pad-y-lg) var(--mv-btn-pad-x-lg); font-size:var(--mv-fs-btn-lg); }

/* layout: block 中央寄せ(Tailwind mx-auto 依存を排除) */
.mv-btn--block{ display:flex; width:100%; max-width:380px; margin-left:auto; margin-right:auto; }

/* disabled */
.mv-btn:disabled, .mv-btn[aria-disabled="true"]{
  pointer-events:none; opacity:.4; transform:none; filter:grayscale(.2);
}
.mv-btn:disabled::after, .mv-btn[aria-disabled="true"]::after{ width:0; }

/* ---------- 1b. mobile sticky buy bar ---------- */
.mv-buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:var(--mv-shadow-bar);
  opacity:0; pointer-events:none;
  transition:opacity var(--mv-dur) var(--mv-ease);
}
.mv-buybar.is-visible{ opacity:1; pointer-events:auto; }
.mv-buybar .mv-btn{ flex:0 0 auto; min-height:46px; }
@media (min-width:768px){ .mv-buybar{ display:none; } }

/* ---------- 1c. tab / filter pill ---------- */
.mv-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:0 auto; }
.mv-tab{
  display:inline-flex; align-items:center; min-height:40px;
  padding:10px 18px; box-sizing:border-box;
  font-family:var(--mv-ff-body); font-weight:300; font-size:12px;
  letter-spacing:0.06em; color:var(--mv-muted); white-space:nowrap;
  background:transparent; border:1px solid var(--mv-line);
  border-radius:var(--mv-radius); cursor:pointer;
  transition:color var(--mv-dur-fast) var(--mv-ease),
             border-color var(--mv-dur-fast) var(--mv-ease),
             background var(--mv-dur-fast) var(--mv-ease);
}
.mv-tab:hover{ color:var(--mv-ink); border-color:var(--mv-faint); }
.mv-tab:focus-visible{ outline:none; box-shadow:var(--mv-ring); }
.mv-tab.is-active, .mv-tab[aria-pressed="true"]{
  color:var(--mv-ink); border-color:var(--mv-mint); background:var(--mv-mint-bg);
}

/* ============================================================
   2. Links & Navigation
   ============================================================ */
.mv-link{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mv-ff-body); font-weight:300; font-size:13px;
  letter-spacing:0.08em; color:var(--mv-muted); text-decoration:none;
  padding-bottom:3px;
  transition:color var(--mv-dur) var(--mv-ease);
}
.mv-link::before{ /* hover で伸びるミント下線 */
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--mv-mint); transition:width var(--mv-dur) var(--mv-ease);
}
.mv-link::after{ /* 矢印 → */
  content:"\2192"; font-family:var(--mv-ff-en); font-style:normal;
  font-size:1.05em; line-height:1; transform:translateX(0);
  transition:transform var(--mv-dur) var(--mv-ease);
}
.mv-link:hover{ color:var(--mv-ink); }
.mv-link:hover::before{ width:calc(100% - 1.6em); }
.mv-link:hover::after{ transform:translateX(4px); }
.mv-link:focus-visible{ outline:none; box-shadow:var(--mv-ring); border-radius:2px; }

/* 欧文キャプション体 */
.mv-link--cap{
  font-family:var(--mv-ff-en); font-style:italic; font-weight:300;
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
}
/* 戻る型(矢印を左へ) */
.mv-link--back::after{ content:"\2190"; }
.mv-link--back:hover::after{ transform:translateX(-4px); }
.mv-link--back::before{ left:auto; right:0; }

/* ---------- 2b. nav link ---------- */
.mv-nav-link{
  position:relative; display:inline-block; padding-bottom:2px;
  color:var(--mv-ink); text-decoration:none;
  transition:opacity var(--mv-dur) var(--mv-ease);
}
.mv-nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--mv-mint); transition:width var(--mv-dur) var(--mv-ease);
}
.mv-nav-link:hover{ opacity:.6; }
.mv-nav-link:hover::after{ width:100%; }
.mv-nav-link[aria-current="page"]{ opacity:1; }
.mv-nav-link[aria-current="page"]::after{ width:100%; }
.mv-nav-link:focus-visible{ outline:none; box-shadow:var(--mv-ring); border-radius:2px; }

/* ---------- 2c. icon button (再生 / メニュー / 閉じる) ---------- */
.mv-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:var(--mv-radius-pill);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border:0; cursor:pointer; color:var(--mv-ink);
  transition:transform var(--mv-dur) var(--mv-ease), background var(--mv-dur) var(--mv-ease);
}
.mv-icon-btn:hover{ transform:scale(1.08); background:rgba(255,255,255,.96); }
.mv-icon-btn:focus-visible{ outline:none; box-shadow:var(--mv-ring); }
.mv-icon-btn--sm{ width:40px; height:40px; }

/* ============================================================
   3. Headings & Eyebrow
   ============================================================ */
.mv-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mv-ff-en); font-style:italic; font-weight:200;
  font-size:var(--mv-eyebrow-size); letter-spacing:var(--mv-ls-cap);
  text-transform:uppercase; color:var(--mv-muted); line-height:1;
}
.mv-eyebrow::before,.mv-eyebrow::after{
  content:""; display:inline-block; width:24px; height:1px; background:var(--mv-rule);
}
/* ルール無し版(Hero): 線を消して左右に em-dash を自動付与 */
.mv-eyebrow--bare::before{ content:"\2014\00a0"; width:0; background:transparent; }
.mv-eyebrow--bare::after{ content:"\00a0\2014"; width:0; background:transparent; }

.mv-heading{ text-align:center; }
.mv-heading.is-left{ text-align:left; }
.mv-h-title{
  font-family:var(--mv-ff-jp); font-weight:200; color:var(--mv-ink);
  letter-spacing:0.06em; line-height:1.7;
  font-feature-settings:'palt' 1; text-wrap:balance;
  margin-top:var(--mv-eyebrow-gap);
}
.mv-h-sub{
  font-family:var(--mv-ff-body); font-weight:300; color:var(--mv-muted);
  letter-spacing:0.06em; line-height:2.2; font-size:13px;
  margin-top:var(--mv-title-gap); text-wrap:pretty;
}

/* ============================================================
   4. Micro UI — Price / Badge / Tag / Rating / Byline / Quote / Rule / List
   ============================================================ */
/* ---------- price ---------- */
.mv-price{
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--mv-ff-num); color:var(--mv-ink);
  font-weight:300; letter-spacing:0.04em; line-height:1; white-space:nowrap;
}
.mv-price__amount{ font-size:22px; }
.mv-price__cur{ font-size:.7em; }
.mv-price__tax{
  font-family:var(--mv-ff-body); font-weight:300; font-size:10px;
  color:var(--mv-muted); letter-spacing:0.08em;
}
.mv-price--lg .mv-price__amount{ font-size:28px; }
.mv-price--sm .mv-price__amount{ font-size:15px; }
.mv-price--range .mv-price__amount{ letter-spacing:0.02em; }
.mv-price--range .mv-price__sep{ margin:0 .15em; color:var(--mv-muted); }

/* ---------- badge / tag ---------- */
.mv-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mv-ff-body); font-weight:300;
  font-size:10px; letter-spacing:0.18em; line-height:1;
  padding:6px 12px; border-radius:var(--mv-radius);
  border:1px solid var(--mv-line); color:var(--mv-muted); background:var(--mv-white);
  white-space:nowrap;
}
.mv-badge::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--mv-mint); display:inline-block; }
.mv-badge--quiet::before{ display:none; }
.mv-badge--line{ border-color:var(--mv-mint); color:var(--mv-ink); }
.mv-badge--solid{ background:var(--mv-mint); border-color:var(--mv-mint); color:var(--mv-white); }
.mv-badge--solid::before{ background:var(--mv-white); }

.mv-tag{
  display:inline-block; font-family:var(--mv-ff-en);
  font-style:italic; font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mv-mint-deep);
}

/* ---------- rating ---------- */
.mv-rating{ display:inline-flex; gap:3px; color:var(--mv-mint); line-height:0; }
.mv-rating__star{ width:14px; height:14px; display:block; }
.mv-rating--sm .mv-rating__star{ width:12px; height:12px; }
.mv-rating__star path{ fill:currentColor; }

/* ---------- byline ---------- */
.mv-byline{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.mv-byline__no{ font-family:var(--mv-ff-en); font-style:italic; font-size:10px; letter-spacing:0.3em; color:var(--mv-mint); }
.mv-byline__rule{ width:32px; height:1px; background:var(--mv-rule); }
.mv-byline__name{ font-family:var(--mv-ff-en); font-style:italic; font-size:11px; letter-spacing:0.3em; color:var(--mv-ink); text-transform:uppercase; }
.mv-byline__meta{ font-family:var(--mv-ff-body); font-weight:300; font-size:11px; color:var(--mv-muted); letter-spacing:0.04em; }

/* ---------- quote ---------- */
.mv-quote{ margin:0; }
.mv-quote__mark{
  display:block; font-family:var(--mv-ff-en); font-style:italic; font-weight:300;
  font-size:46px; line-height:1; color:var(--mv-mint); margin-bottom:.2em;
}
.mv-quote__body{
  margin:0 0 var(--mv-sp-4); font-family:var(--mv-ff-jp); font-weight:300;
  font-size:14px; line-height:2.1; letter-spacing:0.04em; color:var(--mv-ink-soft);
}

/* ---------- rule (罫線) ---------- */
.mv-rule{ background:var(--mv-rule); border:0; }
.mv-rule--center{ display:block; width:var(--mv-orn-w-sm); height:1px; margin:0 auto; }
.mv-rule--center.is-wide{ width:var(--mv-orn-w-md); }
.mv-rule--center.is-mint{ background:var(--mv-mint); }
.mv-rule--inline{ display:inline-block; width:32px; height:1px; vertical-align:middle; }
.mv-rule--v{ display:inline-block; width:1px; height:12px; background:var(--mv-divider); }
.mv-rule--soft{ background:var(--mv-divider); }

/* ---------- list (ミント極小ドット記号) ---------- */
.mv-list{ list-style:none; padding:0; margin:0; }
.mv-list > li{
  position:relative; padding-left:18px;
  font-family:var(--mv-ff-body); font-weight:300; font-size:13px;
  line-height:2; color:var(--mv-muted);
}
.mv-list > li::before{
  content:""; position:absolute; left:2px; top:.85em;
  width:5px; height:5px; border-radius:50%; background:var(--mv-mint);
}

/* ============================================================
   5. Ornament & Divider
   ============================================================ */
.mv-divider{
  display:flex; align-items:center; justify-content:center; gap:var(--mv-orn-gap);
  width:100%; max-width:var(--mv-orn-w-lg); margin:0 auto; color:var(--mv-faint);
}
.mv-divider::before,.mv-divider::after{
  content:""; flex:1 1 auto; height:var(--mv-orn-hair); background:currentColor; opacity:.85;
}
.mv-divider__mark{ /* 中央モチーフ:菱形 */
  flex:0 0 auto; width:var(--mv-orn-diamond); height:var(--mv-orn-diamond);
  background:currentColor; transform:rotate(45deg);
}
.mv-divider--mint{ color:var(--mv-mint); }
.mv-divider--dot .mv-divider__mark{ width:var(--mv-orn-dot); height:var(--mv-orn-dot); border-radius:50%; transform:none; }
.mv-divider--plain{ max-width:var(--mv-orn-w-md); }
.mv-divider--plain .mv-divider__mark{ display:none; }

/* ボタニカル線画モチーフ */
.mv-ornament{ display:inline-block; color:var(--mv-mint); line-height:0; }
.mv-ornament svg{ display:block; width:38px; height:auto; }
.mv-ornament--sm svg{ width:24px; }
.mv-ornament--lg svg{ width:56px; }
.mv-ornament--center{ display:flex; justify-content:center; margin:0 auto 20px; }

/* 線画を中央に抱いたワイド区切り(最上位) */
.mv-divider-leaf{
  display:flex; align-items:center; justify-content:center; gap:18px;
  width:100%; max-width:200px; margin:0 auto; color:var(--mv-mint);
}
.mv-divider-leaf::before,.mv-divider-leaf::after{
  content:""; flex:1 1 auto; height:var(--mv-orn-hair);
  background:linear-gradient(to right,transparent,var(--mv-mint)); opacity:.9;
}
.mv-divider-leaf::after{ background:linear-gradient(to left,transparent,var(--mv-mint)); }
.mv-divider-leaf svg{ display:block; width:26px; height:auto; flex:0 0 auto; }

/* カード額装コーナー(極細L字) */
.mv-corner{ position:relative; }
.mv-corner::before,.mv-corner::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
}
.mv-corner::before{ top:8px; left:8px; border-top:var(--mv-orn-hair) solid var(--mv-mint); border-left:var(--mv-orn-hair) solid var(--mv-mint); }
.mv-corner::after{ bottom:8px; right:8px; border-bottom:var(--mv-orn-hair) solid var(--mv-mint); border-right:var(--mv-orn-hair) solid var(--mv-mint); }

/* 極薄背景テクスチャ */
.mv-pattern-dots{ position:relative; }
.mv-pattern-dots::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--mv-mint-soft) .8px,transparent .8px);
  background-size:22px 22px; opacity:.35;
}
.mv-pattern-grid{ position:relative; }
.mv-pattern-grid::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--mv-line) var(--mv-orn-hair),transparent var(--mv-orn-hair)),
                   linear-gradient(90deg,var(--mv-line) var(--mv-orn-hair),transparent var(--mv-orn-hair));
  background-size:40px 40px; opacity:.5;
}
.mv-pattern--fade::before{
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
}

/* ============================================================
   6. Infographic — Ingredient / Step / Compare / Texture / Stat
   ============================================================ */
/* ---------- ingredient card ---------- */
.mv-ing-grid{
  display:grid; grid-template-columns:repeat(1,1fr); gap:var(--mv-sp-3);
  list-style:none; padding:0; margin:0;
}
.mv-ing-card{
  position:relative; border:1px solid var(--mv-line); background:var(--mv-white);
  padding:var(--mv-sp-6) var(--mv-sp-4) var(--mv-sp-5); text-align:center;
  transition:border-color .7s var(--mv-ease); box-shadow:var(--mv-shadow-card);
}
.mv-ing-card__ico{ width:34px; height:34px; margin:0 auto var(--mv-sp-3); color:var(--mv-mint); display:block; }
.mv-ing-card__ico svg{
  width:100%; height:100%; display:block; fill:none; stroke:currentColor;
  stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
}
.mv-ing-card__name{
  font-family:var(--mv-ff-jp); font-weight:300; color:var(--mv-ink);
  font-size:14px; letter-spacing:0.04em; line-height:1.6; margin:0 0 var(--mv-sp-2);
}
.mv-ing-card__desc{
  font-family:var(--mv-ff-body); font-weight:300; font-size:11px;
  line-height:2; color:var(--mv-muted); margin:0;
}

/* ---------- step ---------- */
.mv-steps{ list-style:none; margin:0 auto; padding:0; max-width:540px; text-align:left; }
.mv-step{
  position:relative; display:grid; grid-template-columns:48px 1fr;
  gap:var(--mv-sp-4); padding-bottom:var(--mv-sp-6);
}
.mv-step:last-child{ padding-bottom:0; }
.mv-step::before{ content:""; position:absolute; left:23px; top:46px; bottom:0; width:1px; background:var(--mv-line); }
.mv-step:last-child::before{ display:none; }
.mv-step__num{
  position:relative; z-index:1; width:46px; height:46px;
  border:1px solid var(--mv-mint); border-radius:var(--mv-radius-pill);
  background:var(--mv-white); display:flex; align-items:center; justify-content:center;
  font-family:var(--mv-ff-en); font-style:italic; font-weight:300;
  font-size:18px; color:var(--mv-mint-deep);
}
.mv-step__body{ padding-top:var(--mv-sp-2); }
.mv-step__title{ font-family:var(--mv-ff-jp); font-weight:300; font-size:15px; letter-spacing:0.04em; color:var(--mv-ink); margin:0 0 var(--mv-sp-2); }
.mv-step__text{ font-family:var(--mv-ff-body); font-weight:300; font-size:12.5px; line-height:2; color:var(--mv-muted); margin:0; }

/* ---------- compare table ---------- */
.mv-compare{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--mv-line); background:var(--mv-white); }
.mv-compare__table{ width:100%; min-width:560px; border-collapse:collapse; font-family:var(--mv-ff-body); }
.mv-compare__table th,.mv-compare__table td{ padding:var(--mv-sp-4) var(--mv-sp-3); text-align:left; vertical-align:top; border-bottom:1px solid var(--mv-line); }
.mv-compare__table thead th{ background:var(--mv-mint-tint); font-weight:300; font-size:11px; letter-spacing:0.08em; color:var(--mv-ink); }
.mv-compare__table tbody th{ font-family:var(--mv-ff-jp); font-weight:300; font-size:13px; color:var(--mv-ink); white-space:nowrap; }
.mv-compare__table td{ font-size:11.5px; line-height:1.9; color:var(--mv-muted); }
.mv-compare__step{ font-family:var(--mv-ff-en); font-style:italic; font-size:13px; color:var(--mv-mint-deep); letter-spacing:0.1em; }
.mv-compare__table tbody tr:last-child th,
.mv-compare__table tbody tr:last-child td{ border-bottom:0; }
.mv-compare__note{ font-family:var(--mv-ff-body); font-size:10px; color:var(--mv-faint); margin-top:var(--mv-sp-3); text-align:center; }

/* ---------- texture scale ---------- */
.mv-texture{ display:flex; flex-direction:column; gap:var(--mv-sp-4); max-width:420px; margin:0 auto; }
.mv-texture__cap{
  text-align:center; font-family:var(--mv-ff-en); font-style:italic;
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mv-mint-deep); margin:0 0 var(--mv-sp-1);
}
.mv-texture__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--mv-sp-3); }
.mv-texture__label{ font-family:var(--mv-ff-body); font-weight:300; font-size:11px; letter-spacing:0.06em; color:var(--mv-muted); white-space:nowrap; }
.mv-texture__label.is-left{ text-align:right; }
.mv-texture__label.is-right{ text-align:left; }
.mv-texture__dots{ display:inline-flex; gap:7px; }
.mv-texture__dot{ width:7px; height:7px; border-radius:var(--mv-radius-pill); border:1px solid var(--mv-mint); background:transparent; }
.mv-texture__dot.is-on{ background:var(--mv-mint); }

/* ---------- stat / survey ---------- */
.mv-stat{ display:grid; grid-template-columns:1fr; gap:var(--mv-sp-6); max-width:640px; margin:0 auto; }
.mv-stat__item{ text-align:center; }
.mv-stat__num{ font-family:var(--mv-ff-en); font-weight:300; font-size:46px; line-height:1; color:var(--mv-ink); letter-spacing:0.02em; margin:0; }
.mv-stat__num small{ font-size:18px; color:var(--mv-mint-deep); font-style:italic; margin-left:2px; }
.mv-stat__bar{ position:relative; height:2px; background:var(--mv-line); margin:var(--mv-sp-4) auto var(--mv-sp-3); max-width:180px; }
.mv-stat__bar > span{ position:absolute; left:0; top:0; height:100%; background:var(--mv-mint); }
.mv-stat__label{ font-family:var(--mv-ff-jp); font-weight:300; font-size:13px; letter-spacing:0.06em; color:var(--mv-ink); margin:0; }
.mv-stat__note{ font-family:var(--mv-ff-body); font-size:10px; color:var(--mv-faint); text-align:center; margin-top:var(--mv-sp-6); line-height:1.9; }

/* ============================================================
   7. Responsive (min-width:768px)
   ============================================================ */
@media (min-width:768px){
  .mv-h-sub{ font-size:14px; }

  .mv-ing-grid{ grid-template-columns:repeat(3,1fr); gap:var(--mv-sp-5); }
  .mv-ing-grid--2{ grid-template-columns:repeat(2,1fr); }

  .mv-step{ grid-template-columns:56px 1fr; gap:var(--mv-sp-5); }
  .mv-step::before{ left:27px; top:54px; }
  .mv-step__num{ width:54px; height:54px; font-size:21px; }
  .mv-step__title{ font-size:16px; }

  .mv-stat{ grid-template-columns:repeat(3,1fr); }
}

/* hover 環境のみ:カード hover でミント枠 */
@media (hover:hover){
  .mv-ing-card:hover{ border-color:var(--mv-mint); }
}

/* ============================================================
   8. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .mv-btn, .mv-btn::after,
  .mv-link::before, .mv-link::after,
  .mv-nav-link::after,
  .mv-icon-btn, .mv-buybar, .mv-tab,
  .mv-ing-card{ transition:none; }
  .mv-btn:hover,
  .mv-icon-btn:hover{ transform:none; }
}