/* SubPro LP v3 — 「機能」ではなく「自分の場所を持つこと」で組む (2026-10-04)
   lp2.css の上に重ねる。色の決まりは lp2.css と同じ: 色を持つのは指導者のサイトの画面の中だけ、
   枠・図・見出し・ボタンは無彩色。黒い面は「欲望」の1面だけ (ページの中で一度きり)。 */

/* ── 01 ヒーロー: 言葉が先、絵が後。開いた瞬間に「何を持てるのか」が読めて、その下に実物が見えている ── */
.stage.hero.say { padding-top: clamp(40px, 6vw, 84px); }
.stage.hero.say > .inner { gap: clamp(28px, 4vw, 48px); }
/* lp2.css の --art-w (絵と見出しを最初の1画面に収めるための縮小) はここでは使わない。
   言葉が先なので、絵は画面の下に続いて見えていればよい (意図して外している) */
.stage.hero.say .hero-art { width: min(980px, 100%); }
.stage.hero.say .art-cap { margin-top: clamp(36px, 5vw, 56px); }
html:lang(ja) .stage.hero.say .note { word-break: auto-phrase; text-wrap: balance; }
/* 句が3つあるので、句の切れ目で折る */
.stage.hero h1.own { max-width: none; font-size: clamp(34px, 5.4vw, 68px); }
html:lang(ja) .stage.hero h1.own { font-size: clamp(26px, 4.7vw, 56px); }
.stage.hero h1.own .hl { display: inline-block; }

/* ── 02 同じシステム、違うブランド: 6つのサイトを一度に見せる ── */
.wall { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(14px, 2.4vw, 28px); }
.site { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.site .browser { transition: transform 0.3s var(--ease); }
a.site:hover .browser { transform: translateY(-4px); }
a.site:focus-visible { outline: 2px solid #0071e3; outline-offset: 6px; border-radius: 14px; }
.site .browser-view img.btm { object-position: bottom center; }
.site-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; text-align: left; }
.site-cap b { font-weight: 600; }
.site-cap span { font-size: 12px; color: var(--faint); white-space: nowrap; }
.wall .browser { border-radius: 10px; }
.wall .browser-bar { height: 24px; padding-inline: 10px; gap: 8px; }
.wall .browser-bar .dots { gap: 5px; }
.wall .browser-bar .dots i { width: 7px; height: 7px; }
.wall .browser-bar .url { font-size: 10px; padding: 1px 8px; border-radius: 5px; transform: translateX(-16px); }
@media (max-width: 860px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .wall .browser-bar { height: 18px; }
  .wall .browser-bar .url { display: none; }
  .site-cap { display: grid; gap: 0; font-size: 13px; }
}

/* ── 03 欲望: ページの中で一度だけの黒い面 ── */
.stage.dark { background: var(--ink); color: #fff; }
.stage.dark .note { color: #a1a1a6; }
.mine { display: grid; gap: 6px; text-align: center; font-size: clamp(22px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: #6e6e73; }
html:lang(ja) .mine { letter-spacing: 0; line-height: 1.5; }
.closing { max-width: 24ch; font-size: clamp(26px, 4.2vw, 48px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; text-align: center; text-wrap: balance; }
html:lang(ja) .closing { max-width: 30em; letter-spacing: -0.01em; line-height: 1.35; word-break: auto-phrase; }

/* ── 04 学ぶために: 4つだけ ── */
.points { width: min(980px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(14px, 2.4vw, 28px); text-align: left; }
.points li { padding-top: 14px; border-top: 1px solid var(--ink); font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
html:lang(ja) .points li { line-height: 1.5; letter-spacing: 0; word-break: auto-phrase; }
@media (max-width: 640px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
}

/* ── 05 売上: SubPro が売上から取る割合 ── */
.zero { display: grid; justify-items: center; gap: 4px; }
.zero b { font-size: clamp(96px, 17vw, 208px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.zero span { font-size: clamp(14px, 1.6vw, 17px); color: var(--muted); }
.stage h2.trio { max-width: none; }
.stage h2.trio .hl { display: block; }

/* ── 06 誰が作っているか ── */
.maker { width: min(680px, 100%); display: grid; gap: 1.1em; text-align: left; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.65; color: var(--ink); }
html:lang(ja) .maker { line-height: 1.95; }
.maker .ask { font-size: clamp(21px, 2.8vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
/* 教える側・見る側の声。本文より一段強く、左に細い線 */
.maker .says { display: grid; gap: 0.35em; padding-left: 1.1em; border-left: 2px solid var(--ink); font-weight: 600; margin-block: -0.4em; }
.maker .sig { margin-top: 0.6em; padding-top: 1.1em; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--muted); }
.maker .sig b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }

/* ── 07 料金の前に置く一行 ── */
.lead { max-width: 28ch; font-size: clamp(19px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--muted); text-wrap: balance; }
html:lang(ja) .lead { max-width: 30em; letter-spacing: 0; line-height: 1.5; }

/* ── 全機能ページの冒頭 ── */
.stage.top { padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px); }