@charset "UTF-8";

/* =========================================================
   MT4 Lock System 直販LP ─ v3_overseas（実験版）
   追加コンポーネントのみ。デザイントークン・基本部品は
   assets/css/style.css をそのまま使う。

   ★ assets/css/style.css は絶対に編集しないこと。
     ここに書けないスタイルが出てきたら、本体を触らず
     このファイル側でクラスを増やして解決する。
   ========================================================= */

:root {
  /* ドラフト告知バーの高さ。公開版を作るときはバーごと削除する。 */
  --draft-h: 36px;
}

/* ---------- Hero：プロミス型の追記 ---------- */

/* 「何を約束する商品か」を1行で置く帯。見出しの直下に入る。 */
.promise {
  margin: 0 0 30px;
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(200,162,74,.10), transparent 78%);
  font-size: clamp(.95rem, 2.6vw, 1.08rem);
  line-height: 1.95;
  color: var(--text);
}
.promise strong { color: var(--white); }

/* ヒーロー下の信頼バー（買い切り・MT4専用・開発者直販） */
.trust-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 26px;
}
.trust-bar span {
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 6px 13px;
  line-height: 1.6;
  background: rgba(11,11,16,.5);
}

/* ---------- 02 Agitate：コストの積み上げ ---------- */
.costs { margin: 48px 0 0; }
.costs li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(.92rem, 2.5vw, 1rem);
  line-height: 1.9;
}
.costs li:first-child { border-top: 1px solid var(--line-soft); }
.costs .c-when {
  flex: 0 0 auto;
  min-width: 8.5em;
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .16em;
  color: var(--gold-dim);
}
.costs .c-what { flex: 1 1 14em; color: var(--text); }
.costs .c-what strong { color: var(--white); }
.costs .c-amt {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: var(--red);
  white-space: nowrap;
}
.costs__foot {
  margin: 26px 0 0;
  font-size: .86rem;
  line-height: 2;
  color: var(--text-dim);
}

/* ---------- 03 False Solutions ---------- */
.myths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 52px;
}
.myth {
  border: 1px solid var(--line-soft);
  border-top: 2px solid rgba(226,69,60,.5);
  background: linear-gradient(180deg, var(--surface), rgba(11,11,16,.55));
  padding: 28px 24px;
}
.myth__t {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--white);
  line-height: 1.7;
  margin: 0 0 6px;
}
.myth__tag {
  display: inline-block;
  font-size: .7rem; letter-spacing: .16em;
  color: #c26058;
  border: 1px solid rgba(226,69,60,.35);
  padding: 3px 10px;
  margin-bottom: 14px;
}
.myth p { margin: 0; font-size: .89rem; line-height: 1.95; color: var(--text-dim); }

/* ---------- 04 Origin Story ---------- */
.beats { margin: 52px 0 0; counter-reset: beat; }
.beat {
  position: relative;
  padding: 0 0 40px 34px;
  border-left: 1px solid var(--line-soft);
}
.beat:last-child { padding-bottom: 0; border-left-color: transparent; }
.beat::before {
  counter-increment: beat;
  content: "";
  position: absolute; left: -5px; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold-dim);
  box-shadow: 0 0 0 4px var(--bg);
}
.beat:last-child::before { background: var(--gold-hi); box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--gold); }
.beat__k {
  display: block;
  font-family: var(--serif);
  font-size: .72rem; letter-spacing: .26em;
  color: var(--gold-dim);
  margin-bottom: 10px;
}
.beat__t {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 3vw, 1.22rem);
  color: var(--white);
  line-height: 1.7;
  margin-bottom: 12px;
}
.beat p { margin: 0; font-size: .93rem; line-height: 2.05; color: var(--text-dim); }
.beat p strong { color: var(--text); }

/* ---------- 05 Mechanism：2層構造の図 ---------- */
.mech {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 48px;
}
.layer {
  border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, rgba(22,22,31,.92), rgba(11,11,16,.6));
  padding: 26px 26px;
}
.layer--app { border-left: 3px solid var(--gold); }
.layer--ea  { border-left: 3px solid var(--gold-dim); }
.layer__k {
  display: inline-block;
  font-family: var(--serif);
  font-size: .7rem; letter-spacing: .22em;
  color: var(--gold);
  border: 1px solid var(--line);
  padding: 3px 11px;
  margin-bottom: 14px;
}
.layer__t {
  display: block;
  font-size: 1.05rem; font-weight: 700; color: var(--white);
  line-height: 1.7; margin-bottom: 10px;
}
.layer p { margin: 0; font-size: .91rem; line-height: 2; color: var(--text-dim); }
.layer p strong { color: var(--white); }
.mech__link {
  text-align: center;
  font-size: .78rem; letter-spacing: .18em;
  color: var(--gold-dim);
  font-family: var(--serif);
}

/* メカニズムの名前を置く札 */
.mech-name {
  display: inline-block;
  margin: 0 auto;
  padding: 12px 26px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(200,162,74,.09), transparent);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  color: var(--gold-hi);
  letter-spacing: .1em;
  line-height: 1.6;
}
.mech-name small {
  display: block; margin-top: 6px;
  font-family: var(--sans); font-size: .58em; font-weight: 400;
  letter-spacing: .22em; color: var(--text-dim);
}

/* ---------- 09 Old Way vs New Way ---------- */
.oldnew {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--line-soft);
}
.oldnew__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-soft);
}
.oldnew__row:last-child { border-bottom: 0; }
.oldnew__row--head { background: rgba(11,11,16,.7); }
.oldnew__cell {
  padding: 18px 20px;
  font-size: .89rem;
  line-height: 1.9;
  color: var(--text-dim);
}
.oldnew__cell + .oldnew__cell {
  border-left: 1px solid var(--line-soft);
  background: rgba(200,162,74,.045);
  color: var(--text);
}
.oldnew__row--head .oldnew__cell {
  font-family: var(--serif);
  font-size: .92rem;
  letter-spacing: .08em;
  color: var(--text-dim);
  padding-block: 16px;
}
.oldnew__row--head .oldnew__cell + .oldnew__cell { color: var(--gold-hi); }
.oldnew__cell strong { color: var(--white); }

/* 損切り直後の10分間・Before / After */
.ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.ba__col {
  border: 1px solid var(--line-soft);
  background: rgba(16,16,23,.7);
  padding: 30px 26px;
}
.ba__col--before { border-top: 2px solid var(--red); }
.ba__col--after  { border-top: 2px solid var(--gold); background: linear-gradient(180deg, rgba(200,162,74,.07), rgba(16,16,23,.7)); }
.ba__head {
  font-family: var(--serif);
  font-size: 1rem; color: var(--white); line-height: 1.7;
  margin: 0 0 18px;
}
.ba__col--after .ba__head { color: var(--gold-hi); }
.ba ol { margin: 0; padding: 0; counter-reset: baT; }
.ba li {
  position: relative;
  padding: 11px 0 11px 62px;
  font-size: .88rem; line-height: 1.85; color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ba li:last-child { border-bottom: 0; }
.ba li .t {
  position: absolute; left: 0; top: 1.05em;
  font-family: var(--serif);
  font-size: .72rem; letter-spacing: .1em;
  color: var(--gold-dim);
}
.ba__col--before li .t { color: #c26058; }
.ba li strong { color: var(--white); }

/* ---------- 12 Risk Reversal ---------- */
/* ★このブロックは現行LPの既定方針（返金保証なし）からの逸脱。
   セクションごと削除しても他に影響しないよう独立させてある。 */
.guarantee {
  margin-top: 48px;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(165deg, rgba(28,24,16,.9), rgba(10,10,14,.95));
  padding: clamp(30px, 5vw, 46px) clamp(20px, 4vw, 40px);
  position: relative;
}
.guarantee::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(200,162,74,.18);
  pointer-events: none;
}
.guarantee > * { position: relative; }
.guarantee__badge {
  display: inline-block;
  font-family: var(--serif);
  font-size: .76rem; letter-spacing: .22em;
  color: #14100a;
  background: linear-gradient(135deg, var(--gold), var(--gold-hi));
  padding: 7px 20px;
  margin-bottom: 22px;
  font-weight: 700;
}
.guarantee__t {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  color: var(--white);
  line-height: 1.75;
  margin: 0 0 20px;
}
.guarantee p { font-size: .93rem; line-height: 2.05; color: var(--text-dim); }
.guarantee p strong { color: var(--white); }
.guarantee__terms { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.guarantee__terms li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: .84rem; line-height: 1.95; color: var(--text-dim);
}
.guarantee__terms li::before {
  content: ""; position: absolute; left: 2px; top: 1.5em;
  width: 8px; height: 1px; background: var(--gold-dim);
}
.guarantee__draft {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px dashed rgba(255,159,67,.45);
  background: rgba(255,159,67,.07);
  font-size: .82rem; line-height: 1.9; color: #ffb974;
}

/* ---------- 13 Value Stack ---------- */
.stack { margin: 48px 0 0; counter-reset: st; }
.stack__item {
  display: flex; gap: 20px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.stack__item:first-child { border-top: 1px solid var(--line-soft); }
.stack__n {
  counter-increment: st;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--serif); font-size: .78rem; letter-spacing: .06em;
  color: var(--gold);
}
.stack__n::before { content: "0" counter(st); }
.stack__body { flex: 1; min-width: 0; }
.stack__t {
  display: block;
  font-size: 1rem; font-weight: 700; color: var(--white);
  line-height: 1.7; margin-bottom: 8px;
}
.stack__t small {
  display: block; margin-top: 5px;
  font-size: .72em; font-weight: 400; letter-spacing: .12em;
  color: var(--text-dim);
}
.stack__body p { margin: 0; font-size: .89rem; line-height: 2; color: var(--text-dim); }
.stack__val {
  display: inline-block;
  margin-top: 10px;
  font-size: .82rem; line-height: 1.8;
  color: var(--gold-hi);
  border-left: 2px solid var(--gold-dim);
  padding-left: 12px;
}
/* ★円建ての「◯◯円相当」は付けない（情報商材型の特典積み増しを避けるため。
   reference/lp_competitor_analysis.md 4章の既決事項）。
   価値は「何を肩代わりするか」という質で示す。 */

.stack-sum {
  margin: 34px 0 0;
  padding: 26px 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(200,162,74,.06), transparent);
  text-align: center;
}
.stack-sum p { margin: 0; }
.stack-sum .big {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  color: var(--white);
  line-height: 1.85;
  margin-bottom: .5em;
}
.stack-sum .sub { font-size: .88rem; color: var(--text-dim); line-height: 1.95; }

/* 希少性の注記（時限ではなく、事実として真であるものだけ） */
.scarcity {
  margin: 30px auto 0;
  max-width: 620px;
  padding: 20px 22px;
  border: 1px dashed rgba(255,255,255,.16);
  font-size: .84rem; line-height: 1.95; color: var(--text-dim);
}
.scarcity strong { color: var(--white); }

/* ---------- 14 導入3ステップ ---------- */
.steps3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.step3 {
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--gold-dim);
  background: linear-gradient(180deg, var(--surface), rgba(11,11,16,.55));
  padding: 28px 22px;
  text-align: center;
}
.step3 .n {
  display: block;
  font-family: var(--serif); font-size: .7rem; letter-spacing: .3em;
  color: var(--gold-dim); margin-bottom: 14px;
}
.step3 .t { display: block; color: var(--white); font-weight: 700; font-size: 1rem; margin-bottom: 10px; line-height: 1.6; }
.step3 .d { font-size: .87rem; color: var(--text-dim); line-height: 1.9; }

/* サポート体制（tokushoho.html の記載と一致する範囲でのみ書く） */
.support-box {
  margin-top: 44px;
  padding: 28px clamp(20px, 4vw, 32px);
  border: 1px solid var(--line-soft);
  background: rgba(11,11,16,.6);
}
.support-box h4 {
  font-family: var(--serif);
  font-size: 1.05rem; color: var(--white); margin-bottom: 16px;
}
.support-box li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: .88rem; line-height: 1.95; color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.support-box li:last-child { border-bottom: 0; }
.support-box li::before {
  content: ""; position: absolute; left: 2px; top: 1.5em;
  width: 8px; height: 1px; background: var(--gold-dim);
}
.support-box strong { color: var(--white); }

/* ---------- 16 Final Close ---------- */
.final-close {
  margin-top: 56px;
  padding: clamp(34px, 6vw, 56px) clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background: linear-gradient(180deg, rgba(200,162,74,.05), transparent 70%);
}
.final-close .fc-t {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.35rem, 4.6vw, 2.3rem);
  color: var(--white);
  line-height: 1.7;
  margin-bottom: 26px;
}
.final-close .fc-p { font-size: .95rem; line-height: 2.1; color: var(--text-dim); }

/* ---------- v3のドラフト告知バー ---------- */
/* この版は社内検討用。公開しないことを画面上でも明示しておく。
   ★本体の .site-header は position:fixed で inset:0 0 auto 0（＝top:0）。
     素直に流し込むとヘッダーの下に潜って重なるので、バー自体も固定にして
     ヘッダーを --draft-h だけ下げ、ヒーローの上余白も同じ分だけ足している。
     公開時はこのバーごと削除し、ここの .site-header / .hero の上書きも消すこと。 */
.draft-flag {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 130;
  height: var(--draft-h);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: rgba(28,20,10,.97);
  border-bottom: 1px solid rgba(255,159,67,.4);
  color: #ffb974;
  font-size: .76rem;
  letter-spacing: .04em;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  padding: 0 14px;
}
.site-header { top: var(--draft-h); }
.hero { padding-top: calc(128px + var(--draft-h)); }

/* ---------- Responsive ---------- */
/* 狭い画面では2列を縦に積むが、そのままだと「どっちの列の話か」が消えて
   比較の意味がなくなる（style.css の .cmp-table と同じ問題）。
   見出し行を隠し、代わりに各セルへラベルを付けて対応を保つ。
   2列のまま読める幅は保ちたいので、折る閾値は620pxまで下げてある。 */
@media (max-width: 620px) {
  .oldnew__row { grid-template-columns: 1fr; border-bottom-color: var(--line); }
  .oldnew__row--head { display: none; }
  .oldnew__cell { padding-block: 14px; }
  .oldnew__cell + .oldnew__cell { border-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
  .oldnew__cell::before {
    content: "これまでのやり方";
    display: block;
    font-family: var(--serif);
    font-size: .68rem; letter-spacing: .16em;
    color: #c26058;
    margin-bottom: 5px;
  }
  .oldnew__cell + .oldnew__cell::before { content: "MLSを入れたあと"; color: var(--gold-hi); }
}

@media (max-width: 720px) {
  .costs .c-when { min-width: 100%; }
  .costs .c-amt { margin-left: auto; }
  .stack__item { gap: 14px; }
  .stack__n { width: 34px; height: 34px; font-size: .7rem; }
  .beat { padding-left: 26px; }

  .draft-flag { font-size: .68rem; letter-spacing: 0; }
  .hero { padding-top: calc(104px + var(--draft-h)); }

  /* ★本体CSSは「375×667でも .btn-primary の上端が画面内に入る」よう詰めてある。
     v3で .promise を足した分そのままだとボタンが画面外へ落ちるので、
     スマホでは .hero__sub（プロミスと内容が重なる段落）を落として帳尻を合わせる。
     .promise を消さないのは、こちらがv3の骨格そのものだから。 */
  .hero__sub { display: none; }
  .promise {
    font-size: .89rem;
    line-height: 1.85;
    padding: 12px 14px;
    margin-bottom: 22px;
  }
  .trust-bar { margin-top: 18px; }
  .trust-bar span { font-size: .68rem; padding: 5px 10px; }
}

/* iPhone SE などの縦の短い端末（本体CSSの同条件クエリに合わせる）。
   375×667 で .hero .btn-primary の上端が画面内に収まることを実測して決めた値。 */
@media (max-width: 720px) and (max-height: 740px) {
  .hero { padding-top: calc(92px + var(--draft-h)); }
  .promise {
    font-size: .83rem;
    line-height: 1.75;
    padding: 10px 12px;
    margin-bottom: 16px;
  }
  .trust-bar { margin-top: 14px; }
}


/* =============================================================
   v4 追加分（2026-08-23）
   ============================================================= */

/* ── ヒーローの製品名（金文字）──────────────────────────
   ★これが無いと、金文字が「止めてほしかった。」だけになり
     **それが商品名に見える**（本人指摘・2026-08-23）。
   ★見出しの金と competing させないため、字を小さく・字間を広く取って
     「マーク」に見せる。.product-mark（05の巨大な製品名）は流用しない
     ─ あちらは 2.1〜4rem あり、ヒーローではh1を食う。 */
.hero h1 .h1-name{
  display:block;
  /* ★em で書かない。h1はスマホで clamp の下限（1.95rem）に張り付くので、
     em 指定だと製品名が上の .small（.52em）より小さくなり、
     いちばん読ませたい名前がいちばん小さい、という逆転が起きる（実測13.1px）。 */
  font-size:clamp(1.3rem,3.1vw,2rem);
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.4;
  margin-bottom:.5em;
}

/* ── ★ヒーローの高さを index.html に完全一致させる ──────────
   `.hero__bg` は cover なので、**ヒーローが高いほど絵が寄る**。
   v4は製品名の1行を足したぶん背が高くなり、騎士が拡大して左へ流れていた。

   実測（本番の index.html と付き合わせ）：
     1440×900 … index 1079px ／ v4 1141px（内訳：本文 +26px、ドラフト帯 +36px）
      390×844 … index  921px ／ v4  958px（内訳：本文  +1px、ドラフト帯 +36px）

   → 増えたぶんを下余白から引いて相殺する。
   ★`var(--draft-h, 0px)` にしてあるので、**公開時にドラフト帯のCSSごと消せば
     自動で 36px 分が戻り、そのまま正しい値になる**（触り直さなくてよい）。
   ⛔ヒーローの文言や要素を変えたら、この 26px は測り直すこと。 */
.hero{ padding-bottom: calc(92px - 26px - var(--draft-h, 0px)); }
@media (max-width: 720px){
  .hero{ padding-bottom: calc(72px - var(--draft-h, 0px)); }
}

/* ── 許容値カードの背景にロックスタンプ（本人指示・2026-08-24）──
   ★①②＝赤ロック、③④＝青ロック。特典①のフローチャートと同じ色分けの約束
     （赤＝損失側で止まる／青＝利益側）をLPにも通す。
   ★素材は 特典作成/_assets/stamp_{red,blue}.png（白背景を抜いた版）を
     webp 化して assets/img/stamp-{red,blue}.webp に複製したもの。元は無変更。
   ★あくまで透かし。文字の可読性を落とさないよう opacity は 0.13 まで。 */
.tol{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.tol::before{
  content:"";
  position:absolute;
  right:-14px;
  bottom:-18px;
  width:148px;
  height:148px;
  z-index:-1;
  background:center/contain no-repeat;
  opacity:.13;
  pointer-events:none;
}
.tol--red::before { background-image:url(assets/img/stamp-red-v6.webp);  }
.tol--blue::before{ background-image:url(assets/img/stamp-blue-v6.webp); opacity:.16; }
@media (max-width: 720px){
  .tol::before{ width:116px; height:116px; right:-10px; bottom:-14px; }
}

/* ── 実画面の「開発途中」注記 ────────────────────────────
   ⛔金色・明朝の `.ui-notes__foot` に置かないこと。注記が本文より目立つうえ、
     2カラムなので画像の横に出てしまう（2026-08-24に一度やった）。 */
/* ★`.ui-shot figcaption`（0-1-1）に負けるので、詳細度を上げた形も併記する。
   これが無いと figcaption 側の .8rem／text-dim が勝って、注記が縮まない。 */
.dev-note,
.ui-shot figcaption.dev-note,
.ui-shot figcaption .dev-note{
  display:block;
  margin-top:10px;
  font-family:var(--sans);
  font-size:.72rem;
  line-height:1.7;
  letter-spacing:.02em;
  color:#7c7c86;
  text-align:center;
}

/* ── 01 見出しの背景（旧：大きな図版）────────────────────
   ★本人指示（2026-08-24）：canva-regret-alt を1枚で大きく見せると
     マイナスの印象が強すぎる。→ 見出しの**背景**へ落とす。
   ★この絵は背景向きでもある：平均輝度が13/255しかなく、上半分がほぼ黒。
     文字を乗せる帯として素直に使える（だから brightness を上げて使っている）。
   ⛔主役級の絵を cover で敷かない、という原則の例外にあたるので、
     **主役（人物とモニタ）が切れても意味が壊れない位置**＝下寄せに固定し、
     さらにヴェールを掛けて「絵」ではなく「空気」として扱う。 */
.sec01-head{
  position:relative;
  isolation:isolate;
  padding:70px 22px 62px;
  border-radius:14px;
  overflow:hidden;
}
.sec01-head::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url(assets/img/canva/canva-regret-alt.webp) center 78% / cover no-repeat;
  /* 素材が暗いので持ち上げる。style.css の .bleed-figure--lift-x img と同じ考え方
     （あちらは 2.7。ここは文字を乗せるので少し抑える）。 */
  filter:brightness(2.1);
}
.sec01-head::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(7,7,10,.90) 0%,
    rgba(7,7,10,.72) 42%,
    rgba(7,7,10,.86) 100%);
}
.sec01-head .sec-title,
.sec01-head .lead{
  text-shadow:0 2px 22px rgba(0,0,0,.9);
}
@media (max-width: 720px){
  .sec01-head{ padding:52px 16px 46px; }
  /* スマホは横が詰まる分、人物が寄りで入る。少し引いて見せる。 */
  .sec01-head::before{ background-position:center 82%; }
}

/* ── 03・11 見出しの背景（本人指示・2026-08-24）────────────
   ★01 と同じ「見出しを箱にして絵を敷く」型。ただし **絵の性質が違う**。
     canva-regret-alt は平均輝度 5.3/255 で暗すぎるので brightness を 2.1 まで
     上げているが、こちらの2枚は主役が自分で光っている：
       canva-brain … 平均 11.8／左1/3が 0.0（完全な黒）／右1/3が 22.9
       trial-gate  … 平均 10.3／左1/3が 0.4／右1/3が 21.6
     **持ち上げると光が白飛びして「絵」になってしまう**ので brightness は掛けない。
     暗さの調整はヴェール側だけで行う。
   ⛔trial-gate.webp は trial.html の .page-head--trial と**共用**。
     差し替えるときは両方の見え方を確認すること。
   ⛔どちらも主役が右 1/3 に寄っていて左が真っ黒。中央の見出しは黒の上に乗る。
     **左右を反転したり center 以外を指定すると、文字が主役の上に来て読めなくなる。** */
.head-bg{
  position:relative;
  isolation:isolate;
  padding:70px 22px 62px;
  border-radius:14px;
  overflow:hidden;
}
.head-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-repeat:no-repeat;
  background-size:cover;
}
.head-bg::after{
  /* ★2026-08-25 明るさ調整（本人指摘：02/03/06/12/14が暗すぎて絵が分からない）。
     旧：全面に一律で rgba(7,7,10,.70〜.88) を重ねていたため、
     主役が写っている右側まで一律に暗く潰れていた。
     ★画像自体の左40%はもともと輝度0（完全な黒）で作ってある
       （head-bg見出し背景の各コメント参照）ので、左を覆う濃さは
       ある程度重複しても実害がない。問題は右側（主役が写る側）を
       同じ濃さで覆っていたこと。
     → 見出し文字が乗る左側だけは濃いまま残し、絵がある右側はほぼ素通しにする
       （横方向のグラデーションを追加）。縦方向の帯もさらに弱めた。 */
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(7,7,10,.85) 0%,
      rgba(7,7,10,.85) 36%,
      rgba(7,7,10,.16) 58%,
      rgba(7,7,10,0) 100%),
    linear-gradient(180deg,
      rgba(7,7,10,.24) 0%,
      rgba(7,7,10,.10) 44%,
      rgba(7,7,10,.24) 100%);
}
.head-bg .sec-title,
.head-bg .lead{
  text-shadow:0 2px 22px rgba(0,0,0,.9);
}
.sec03-head::before{
  /* ★2026-08-24差し替え：脳の絵は「気持ち悪い」で本人却下。
     幽霊船案も却下し、「弱い柵の門を弱い防具で守ろうとしている兵士」に決定。
     ヒーロー画像（鋼の鎧の騎士＋分厚い鉄の門）とわざと対照的な構図にしている。
     Canvaのdesign_type=desktop_wallpaperで生成→1600x900 webpに変換。
     実測：平均 6.1/255・左40% 0.0（完全な黒）・34.6KB。brightnessは掛けない。 */
  background-image:url(assets/img/bg-myths-weakgate.webp);
  background-position:80% 50%;
}
.sec11-head::before{
  background-image:url(assets/img/trial-gate.webp);
  background-position:center 56%;
}
@media (max-width: 720px){
  .head-bg{ padding:52px 16px 46px; }
  /* スマホは横が詰まるぶん主役が寄りで入る。少し引いて見せる。 */
  .sec03-head::before{ background-position:85% 50%; }
  .sec11-head::before{ background-position:70% 58%; }
}

/* ── 02・06・12・14 の背景（2026-08-24）──────────────────
   本人が ChatGPT で生成した4枚。共通プロンプトで
   「主役は右1/3・左40%は純黒」を固定して出したもの。
   ★02・12は2026-08-24に本人指示でCanva生成のものへ差し替え済み（下記コメント参照）。
   実測（1600x900 webp）：
     bg-cost-invoice   平均 10.3 ／ 左40% 0.0 ／ 32.0KB（★2026-08-24差し替え）
     bg-lock-nokeyhole 平均  9.9 ／ 左40% 0.42 ／ 77.6KB
     bg-stack-scrolls  平均  7.6 ／ 左40% 0.0 ／ 32.3KB（★2026-08-24差し替え）
     bg-gauntlet-ring  平均  7.7 ／ 左40% 0.06 ／ 44.5KB
   ★どれも平均輝度が 03/11 の2枚（11.8／10.3）と同じ帯なので brightness は掛けない。
   ⛔**左40%の純黒が見出しの可読性そのもの。** 左寄せの background-position や
     左右反転をすると、中央の見出しが主役の上に乗って読めなくなる。
   ⛔横方向の position は「主役が切れないところ」で決めてある。cover の切り取りは
     箱の縦横比で決まるので、**見出しの行数を変えたら位置を測り直すこと。** */
.sec02-head::before{
  /* ★2026-08-24差し替え：「請求書を突きつけられる」イメージが欲しいという本人指示で
     Canva生成に変更。籠手が燃える書状（無地の蝋印）を差し出す構図。 */
  background-image:url(assets/img/bg-cost-invoice.webp);
  background-position:65% 50%;
}
.sec06-head::before{
  background-image:url(assets/img/bg-lock-nokeyhole.webp);
  background-position:center 50%;
}
.sec12-head::before{
  /* ★2026-08-24差し替え：宝箱の絵が「富」を連想させるという懸念で本人却下。
     「金の証印」代案も金貨に見えてしまい不採用。束ねた設計図の巻物（内側から
     光が漏れる）に差し替え。中身が特定できない光のまま、金銭色を排除している。 */
  background-image:url(assets/img/bg-stack-scrolls.webp);
  background-position:72% 50%;
}
.sec14-head::before{
  /* 金のリング（＝届かなかった目標）が原画の右端近く。切ると意味が壊れる。 */
  background-image:url(assets/img/bg-gauntlet-ring.webp);
  background-position:88% 50%;
}
@media (max-width: 720px){
  /* スマホは横が55%ほど切り落とされる。主役が入る位置まで寄せる。 */
  .sec02-head::before{ background-position:75% 50%; }
  .sec06-head::before{ background-position:80% 50%; }
  .sec12-head::before{ background-position:82% 50%; }
  .sec14-head::before{ background-position:95% 50%; }
}

/* ── ⛔.promise を消したので、スマホの .hero__sub を復活させる ──
   style-v3.css は「.promise と内容が重なるから .hero__sub を落とす」という
   指定を @media(max-width:720px) に持っている。.promise が無くなった今、
   これを残すと**スマホのヒーローから本文が全部消える**（h1とボタンだけになる）。
   ★このファイルは style-v3.css のあとに読まれるので、ここで打ち消す。 */
@media (max-width: 720px){
  .hero__sub{
    display:block;
    font-size:.89rem;
    line-height:1.85;
    margin-bottom:24px;
  }
}
@media (max-width: 720px) and (max-height: 740px){
  .hero__sub{
    font-size:.83rem;
    line-height:1.75;
    margin-bottom:18px;
  }
}

/* ── 09 Old/New の見出し行を立てる ──────────────────────
   ★Excelの見出し行のような「塗り」は黒×金の世界観を壊す。
     金をごく薄く敷き、上下を細い金の罫で挟んで“光っている行”に見せる。 */
.oldnew__row--head{
  background:linear-gradient(180deg,rgba(232,199,102,.10),rgba(232,199,102,.04));
  border-top:1px solid rgba(232,199,102,.42);
  border-bottom:1px solid rgba(232,199,102,.42);
}
.oldnew__row--head .oldnew__cell{
  color:#f3dc9a;
  font-weight:700;
  letter-spacing:.04em;
}
.oldnew__row--head .oldnew__cell + .oldnew__cell{
  border-left-color:rgba(232,199,102,.30);
}

/* ── 無料版 → 早期購入枠の導線 ───────────────────────── */
.early-band{
  margin-top:40px;
  padding:34px 26px 30px;
  border:1px solid rgba(232,199,102,.34);
  border-radius:14px;
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(232,199,102,.10),transparent 62%),
    rgba(255,255,255,.02);
  text-align:center;
}
.early-band__tag{
  display:inline-block;
  padding:5px 14px;
  border:1px solid rgba(232,199,102,.5);
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.12em;
  color:#e8c766;
}
.early-band h4{
  margin:16px 0 12px;
  font-family:"Noto Serif JP",serif;
  font-size:clamp(1.08rem,3.2vw,1.42rem);
  line-height:1.7;
  color:#f5f5f7;
}
.early-band h4 strong{color:#f3dc9a}
.early-band p{
  margin:0 auto 20px;
  max-width:34em;
  font-size:.94rem;
  line-height:1.9;
  color:#b9b9c2;
}
.early-band .btn{margin-inline:auto}
.early-band__note{
  margin:16px auto 0;
  font-size:.8rem;
  color:#8a8a93;
}

/* ── 早期購入枠の帯を大きく見せる（本人指示・2026-08-23 第2回）──
   ★金額も期間も書かない建て付けなので、訴求力は「面積と明るさ」でしか出せない。
     枠を太く・地を明るく・見出しを一段大きくして、価格カードの次に目が行く位置に置く。
   ★ただし価格カードより大きくはしない。ここは無料版への導線であって、
     このページの結論ではない。 */
.early-band--lg{
  margin-top:52px;
  padding:44px 30px 40px;
  border-width:2px;
  border-color:rgba(232,199,102,.55);
  background:
    radial-gradient(120% 150% at 50% 0%,rgba(232,199,102,.17),transparent 66%),
    rgba(255,255,255,.03);
  box-shadow:0 0 44px rgba(232,199,102,.10);
}
.early-band--lg .early-band__tag{
  font-size:.78rem;
  padding:6px 18px;
  border-color:rgba(232,199,102,.7);
}
.early-band--lg h4{
  margin:20px auto 16px;
  max-width:24em;
  font-size:clamp(1.3rem,4.4vw,1.95rem);
  line-height:1.75;
  /* ★これが無いと「アンケー／ト」のように語の途中で折れる。
     style.css は見出し類にだけ auto-phrase を掛けており、h4は対象外。 */
  word-break:auto-phrase;
  line-break:strict;
}
.early-band--lg h4 strong{
  color:#f7e6ae;
  border-bottom:2px solid rgba(232,199,102,.45);
  padding-bottom:2px;
}
.early-band--lg p{
  font-size:.97rem;
  margin-bottom:26px;
}

/* ── 目立たせない注記（サポートの返信速度など）──────────── */
.quiet-note{
  margin:26px auto 0;
  max-width:44em;
  font-size:.78rem;
  line-height:1.85;
  color:#70707a;
  text-align:left;
}

/* ── 投資リスクの免責（infocart toushi.php で必須）──────────
   価格カード直下。目立たせすぎず、しかし確実に読める濃さで置く。 */
.risk-disclosure{
  margin:18px auto 0;
  max-width:46em;
  padding:14px 18px;
  border:1px solid rgba(232,199,102,.28);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  font-size:.76rem;
  line-height:1.9;
  color:#8a8a93;
  text-align:left;
}

/* ── 価格カードの補足チップ ───────────────────────────
   ★元の .price-off は「5,000円 OFF」用で赤い。赤は割引の合図なので、
     「買い切り／月額費用なし」に使うと意味がずれる。金の線に寄せる。 */
.price-card .price-off{
  color:#e8c766;
  border-color:rgba(232,199,102,.45);
  background:rgba(232,199,102,.06);
}

/* ── クロージングの副見出し ──────────────────────────── */
.fc-t--sub{
  margin-top:28px;
  font-size:clamp(1.05rem,3.2vw,1.5rem);
  color:#f5f5f7;
}

/* ── 04 「口座を倒壊させました。」を少し大きく（本人指示・2026-08-25）── */
.lead--big{
  font-size:clamp(1.08rem,2.9vw,1.24rem);
}

/* ── 07 3つのロックのアイコン（本人が「薄い」と指摘・2026-08-25）──
   ★#locks に限定してある。.card は index.html 等の他ページでも使う
     共有クラスなので、style.css 側は触らずここだけで上書きする。 */
#locks .card img{
  width:132px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6)) brightness(1.14) contrast(1.08);
}

/* ── ヒーロー背景を少し明るく（本人指示・2026-08-26）──────────
   ★.hero__bg は assets/css/style.css 側の共有クラス（index.html等でも使用）。
     そちらは直接触らず、v4だけ filter で持ち上げる。
   ⛔.hero__veil（左側の暗幕）はCLAUDE.mdの規定どおり触らない。
     veilはrgba半透明の重ねがけなので、背景を明るくしても左の本文帯
     （.96/.90でほぼ不透明）はほとんど変化せず、右側の騎士側だけ
     ほんのり明るくなる。 */
.hero__bg{ filter:brightness(1.15); }

/* ── 「無料お試し版を受け取る」ボタンを銀色に（本人指示・2026-08-26）──
   ★.btn-primary（金）と並べたときに購入ボタンと視覚的に区別させる。
     価格カードの「今すぐ導入して資金を守る」は金のまま変更しない。
   ★.btn-primary::after のシェイン演出はクラスを共存させたまま流用する
     （背景色だけこちらで上書き）。 */
.btn-silver{
  background: linear-gradient(135deg, #7d7d86 0%, #d9d9e0 42%, #aeaeb8 60%, #f2f2f5 100%);
  color:#15151a;
  box-shadow: 0 10px 34px rgba(160,160,172,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-silver:hover{
  box-shadow: 0 16px 44px rgba(160,160,172,.36), inset 0 1px 0 rgba(255,255,255,.55);
}

/* ── 03 末尾「MT4 Lock Systemは〜」の目立たせ枠（本人指示・2026-08-26／第11回で調整）──
   ★.product-mark（05で使っている巨大な製品名）を流用し、金の大文字で明示。
   ★背景にMLSロゴ（mls-logo.webp＝MLS_256×256（背景透過）.png のwebp版。
     assets/images/logo/ 直下の元PNGと同一・既にassets/img/へ複製済み）を薄い透かしとして敷く。
     07許容値カードの .tol::before（スタンプの透かし）と同じ考え方。
     主役級の絵をcoverで敷かない、という原則があるため、フル背景ではなく
     右下の透かしに留める。
   ⛔第11回：メニューパネル用の plate-idle.webp（待機中プレート）は使わないよう指示された。
     ロゴの mls-logo.webp に差し替え済み。 */
.mls-plate-banner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:56px;
  padding:48px 26px 44px;
  border:1px solid rgba(232,199,102,.30);
  border-radius:16px;
  text-align:center;
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(232,199,102,.09),transparent 65%),
    rgba(255,255,255,.02);
}
.mls-plate-banner::before{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-30px;
  width:260px;
  height:260px;
  z-index:-1;
  background:url(assets/img/mls-logo-v6.webp) center/contain no-repeat;
  opacity:.16;
  pointer-events:none;
}
.mls-plate-banner .product-mark{ margin:0 0 14px; }
/* ★第11回：本文を .lead（グレー・小さめ）から専用クラスへ変更。
   全体を白文字・一段大きくする指示のため。 */
.mls-plate-banner__body{
  margin:0 auto;
  max-width:30em;
  font-size:clamp(1.06rem,2.9vw,1.28rem);
  line-height:2;
  color:var(--white);
}
@media (max-width: 720px){
  .mls-plate-banner{ margin-top:44px; padding:38px 20px 34px; }
  .mls-plate-banner::before{ width:170px; height:170px; right:-16px; bottom:-16px; }
}

/* ── 14（Final／#offer）の背景にチャート画像（本人指示・2026-08-26）──
   ★従来 canva-rise.webp は本文中の <figure> として表示していたが、
     セクション全体の背景に格上げする指示があったため、その <figure> は削除し
     （FINAL_SECTION側で対応）、ここでセクション背景として敷く。
   ⛔`.offer` クラスは #offer（この最終セクション）と #stack（12 VALUE STACK）の
     **両方**に付いている共有クラス。ここは #offer だけに効かせたいので、
     クラスではなくID（#offer）で指定すること。
   ★画像は左側が人物のシルエット、右上に向かって上昇するローソク足。
     全体の84%程度が地の黒なので、そのまま暗幕代わりに使える
     （.hero__bg + .hero__veil と同じ発想だが、素材自体が暗いぶん薄めのveilで足りる）。 */
#offer{ isolation:isolate; }
#offer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,7,10,.72) 0%, rgba(7,7,10,.45) 30%, rgba(7,7,10,.86) 78%, rgba(7,7,10,.96) 100%),
    url(assets/img/canva/canva-rise.webp) center 18% / cover no-repeat;
}


/* ── v6：新デザインのヒーロー背景（共有 style.css の hero-fortress.webp を上書き） ── */
.hero__bg{ background-image:url("assets/img/hero-fortress-v6.webp"); }
@media (min-resolution:1.5dppx){
  .hero__bg{ background-image:url("assets/img/hero-fortress-v6.webp"); }
}

/* ── v6：07章 許容値カードの背景スタンプ。新デザインの蝋封は元の赤スタンプより
       暗く沈むので、透かしの不透明度を上げて視認性を確保する（元は .13 / .16） ── */
.tol::before{ opacity:.4; }

/* ── v6：対応決済サービス画像（infocart 審査対応・2026-09-03） ── */
.pay-methods{ margin:22px auto 0; text-align:center; }

/* 白地が浮かないよう、金の細枠と影で決済パネルとして見せる（画像は無改変） */
.pay-methods img{ display:block; width:auto; max-width:100%; height:auto; margin:0 auto; background:#fff; padding:16px 26px; border-radius:12px; border:1px solid rgba(198,160,74,.38); box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.03); }
.pay-methods p{ margin:10px auto 0; max-width:44em; font-size:.78rem; line-height:1.8; color:rgba(255,255,255,.62); }
.tol--blue::before{ opacity:.42; }

/* ── v6：特典マニュアルの表紙を、より実物の冊子らしく。傾きを深め、影を増やし、
       右下にページ束の小口（積層シャドウ）を足して厚みを出す（元は共有 style.css の
       .doc-cover：rotateY(-7deg) ＋ 単発の drop-shadow だけ） ── */
.doc-cover{
  max-width:356px;
  transform:perspective(1100px) rotateY(-12deg) rotateX(1deg);
  border-radius:2px 5px 5px 2px;
  box-shadow:
    1px 2px 0 #d3ccbc, 2px 4px 0 #c7c0af, 3px 6px 0 #bcb5a2,
    4px 8px 0 #b1aa96, 5px 10px 0 #a69e89, 6px 12px 0 #9b937d, 7px 14px 0 #8f8771,
    10px 20px 34px rgba(0,0,0,.5),
    44px 52px 100px -16px rgba(0,0,0,.92),
    0 0 0 1px rgba(255,255,255,.05) inset;
}
.doc-cover:hover{ transform:perspective(1100px) rotateY(-5deg) rotateX(0); }
@media (max-width:720px){
  .doc-cover{ transform:perspective(1100px) rotateY(-9deg); }
}