/* ============================================================================
 * lp.css — BAL STUDIO LP体系 共通スタイル
 * 常設LP(/studio) と キャンペーンLP(/studio/2.0) の両方が読む。
 *
 * ── ブランド継続性について（2026-08-15 改定）───────────────────────────
 * 旧版は白/クリーム地 + 深緑アクセントの「SaaS的」配色だった。CEOレビューで
 * 「BALのカラー・世界観と違う」「無機質」として差し戻し。
 *
 * 本版の配色・組版は、実在するBAL公式ページを実機確認し、画像から実際に
 * ピクセルを採取して決定している（新規デザインの発明はしていない）:
 *   - https://bal-studio.hp.peraichi.com        （BAL STUDIO 公式）
 *   - https://balstudio-entry.hp.peraichi.com   （BAL STUDIO ENTRY 入会）
 * 採取結果（支配色）:
 *   地      = #000000（全ページの85〜92%を占める純黒）
 *   ゴールド = #c8a86c（ロゴ・CTA帯・見出し・アイコンで完全に共通の一色）
 *   白      = #fcfcfc / 本文グレー = #b8b8b8
 * 組版:
 *   断定的な大見出しと特徴カード見出し = 明朝（セリフ）
 *   ラベル・注記・表・FAQ等の実務テキスト = ゴシック
 *   CTAは「ゴールド地に黒の太字」の帯（BALの最も強い視覚シグネチャ）
 * ========================================================================== */

:root {
  /* ── BAL 実採色 ───────────────────────────────────────────────────── */
  --gold:       #c8a86c;            /* BAL GOLD（公式ページからの実採色） */
  --gold-hi:    #e2c894;
  --gold-lo:    #a98b52;
  --gold-dim:   #7d6738;
  --gold-line:  rgba(200,168,108,.24);
  --gold-line2: rgba(200,168,108,.46);
  --gold-wash:  rgba(200,168,108,.085);
  --red:        #d9483a;            /* 期限・緊急（ENTRYページで使用色） */

  /* ── 旧トークン名を維持したまま黒基調へ差し替え ───────────────────── */
  --ink:        #fcfcfc;   /* 主テキスト */
  --ink-2:      #b8b8b8;   /* 本文 */
  --ink-3:      #8d8d8d;   /* 補助 */
  --ink-4:      #6b6b6b;   /* 注記 */
  --paper:      #000000;   /* 地 */
  --paper-2:    #0d0d0d;   /* カード面 */
  --paper-3:    #070707;   /* 交互セクション帯 */
  --line:       var(--gold-line);
  --line-2:     var(--gold-line2);

  --accent:     var(--gold);
  --accent-ink: var(--gold-hi);
  --accent-bg:  var(--gold-wash);

  --flag:       var(--gold);
  --flag-ink:   var(--gold-hi);
  --flag-bg:    var(--gold-wash);

  --gate:       var(--gold);

  --r-sm: 4px;
  --r:    10px;
  --r-lg: 14px;

  --shadow:    0 1px 2px rgba(0,0,0,.6), 0 8px 26px rgba(0,0,0,.55);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.6), 0 26px 70px rgba(0,0,0,.7);

  --maxw: 1040px;
  --measure: 33em;

  --f-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
          "Yu Gothic", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 明朝（BALの断定的な見出しの正体）。iOS/Mac=Hiragino Mincho, Win=Yu Mincho */
  --f-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho",
             "Noto Serif JP", "Times New Roman", serif;
  --f-num: "Helvetica Neue", Arial, var(--f-jp);
}

/* campaign LP: 同じゴールドの中で「期限」だけ赤を足す（BAL ENTRYページの型） */
body.lp-campaign { --flag: var(--red); --flag-ink: #f08a7e; }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--f-jp);
  background: var(--paper);
  color: var(--ink-2);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--gold-hi); }
::selection { background: var(--gold); color: #000; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.measure { max-width: var(--measure); }

/* ─── preview ribbon ───────────────────────────────────────────────────── */
.preview-bar {
  background: #0a0a0a; color: var(--ink-3);
  font-size: 12px; line-height: 1.5; letter-spacing: .06em;
  padding: 8px 16px; text-align: center;
  border-bottom: 1px solid var(--gold-line);
}
.preview-bar b { color: var(--gold); font-weight: 800; letter-spacing: .14em; }
.preview-bar code { color: var(--ink-2); }

/* ─── header ───────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.9);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--gold-line);
}
.site-head__in { display: flex; align-items: center; gap: 20px; min-height: 64px; }

/* ロゴ: 公式と同じ「BAL(白) + STUDIO(ゴールド)」の詰まった太字 */
.brand {
  font-weight: 800; letter-spacing: .1em; font-size: 17px;
  text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1.15;
}
.brand__bal    { color: var(--ink); }
.brand__studio { color: var(--gold); }
.brand__ver {
  color: var(--gold-hi); font-family: var(--f-num); font-size: .82em;
  border: 1px solid var(--gold-line2); border-radius: 3px;
  padding: 1px 6px; margin-left: 3px; letter-spacing: .04em;
}
.brand small {
  display: block; font-size: 9.5px; letter-spacing: .3em;
  color: var(--ink-4); font-weight: 600; margin-top: 3px;
}
.only-sm { display: none; }
.only-lg { display: inline; }

.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a {
  font-size: 13px; color: var(--ink-3); text-decoration: none;
  font-weight: 600; white-space: nowrap; letter-spacing: .05em;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ─── buttons ──────────────────────────────────────────────────────────── */
/* 一次CTA = 「ゴールド地に黒の太字」。BAL公式のCTA帯と同じ処理。 */
/* inline-flex + gap だと「<span>月額13,800円（税込）</span>で入会する」のような
 * 混在ラベルが2つのflexアイテムに割れて不自然に改行される。inline-block にして
 * 通常のテキストとして流す。 */
.btn {
  display: inline-block;
  font-family: var(--f-jp); font-size: 15px; font-weight: 800; letter-spacing: .04em;
  padding: 15px 28px; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease,
              background .14s ease, color .14s ease, border-color .14s ease;
  line-height: 1.45; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(180deg, #d6ba85 0%, var(--gold) 48%, #bb9a5c 100%);
  color: #000; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, var(--shadow);
  border-color: #d9c08e;
}
.btn--primary:hover {
  background: linear-gradient(180deg, #e3caa0 0%, #d1b47b 48%, #c5a468 100%);
  color: #000;
}
.btn--ghost {
  background: transparent; color: var(--gold); border-color: var(--gold-line2);
}
.btn--ghost:hover { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-hi); }
.btn--sm { font-size: 12.5px; padding: 10px 18px; letter-spacing: .06em; }
.btn--lg { font-size: 17px; padding: 19px 38px; }
.btn--block { display: block; width: 100%; }

.cta-pair { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ─── date-gated announcement bar (evergreen → campaign) ───────────────── */
/* 公式の「BAL STUDIO LIBRARYを見る」帯と同じ、ゴールド地に黒文字の全幅バー */
.campaign-bar {
  background: linear-gradient(180deg, #d6ba85 0%, var(--gold) 55%, #bb9a5c 100%);
  color: #000;
  border-bottom: 1px solid #000;
}
.campaign-bar__in {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; font-size: 14.5px; font-weight: 800; letter-spacing: .02em;
}
.campaign-bar__dates {
  font-family: var(--f-num); font-size: 12.5px; font-weight: 700;
  color: #4a3c1e; letter-spacing: .06em;
}
.campaign-bar__cta {
  margin-left: auto; background: #000; color: var(--gold);
  padding: 8px 18px; border-radius: var(--r-sm); font-size: 13px; font-weight: 800;
  text-decoration: none; white-space: nowrap; letter-spacing: .05em;
}
.campaign-bar__cta:hover { background: #141414; color: var(--gold-hi); }

/* ─── sections ─────────────────────────────────────────────────────────── */
section { padding: 92px 0; border-top: 1px solid var(--gold-line); background: var(--paper); }
section:first-of-type { border-top: 0; }
.sec-alt { background: var(--paper-3); }
.sec-ink { background: #050505; }
.sec-ink h2, .sec-ink h3 { color: var(--ink); }
.sec-ink .lead { color: var(--ink-2); }

.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .28em;
  color: var(--gold); text-transform: uppercase; margin: 0 0 20px;
  font-family: var(--f-jp);
}

/* 断定的な見出しは明朝。ここがBALの世界観の中心。 */
h1 {
  font-family: var(--f-serif);
  font-size: clamp(31px, 5.2vw, 56px); line-height: 1.42;
  letter-spacing: .02em; font-weight: 700; margin: 0 0 26px; color: var(--ink);
}
h2 {
  font-family: var(--f-serif);
  font-size: clamp(23px, 3.3vw, 35px); line-height: 1.52;
  font-weight: 700; margin: 0 0 24px; letter-spacing: .02em; color: var(--ink);
}
h3 {
  font-family: var(--f-serif);
  font-size: 20px; font-weight: 700; margin: 0 0 14px; line-height: 1.6;
  letter-spacing: .02em; color: var(--ink);
}
p { margin: 0 0 1.35em; }
strong { color: var(--ink); font-weight: 700; }
.lead { font-size: 17px; color: var(--ink-2); line-height: 2.0; }
.small { font-size: 13px; color: var(--ink-3); line-height: 1.85; }
.note {
  font-size: 12.5px; color: var(--ink-4); line-height: 1.85;
  border-left: 2px solid var(--gold-dim); padding: 4px 0 4px 16px; margin: 30px 0 0;
}
.note strong { color: var(--ink-3); }
code {
  font-size: .92em; color: var(--gold-hi);
  background: var(--gold-wash); padding: 1px 6px; border-radius: 3px;
}

/* ─── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 104px 0 88px; position: relative; overflow: hidden; }
.hero__sub { font-size: 17.5px; line-height: 2.05; color: var(--ink-2); max-width: 35em; }
.hero__sub strong { color: var(--ink); font-weight: 700; }

/* 2026-08-16(CEOフィードバック・3巡目): 姉妹プロダクトBAL STUDIO Searchの
 * Heroと同じ視覚言語(実講義サムネイルのモザイク+暗いスクリム+中央コピー)へ統一する。
 * モザイクに使う画像は実在の講義サムネイル(nav-data.jsのidから実行時に組み立て)の
 * みで、生成/ストック画像は使わない。取得できないタイルは静かに非表示にする
 * (course-shotと同じフォールバック方針)。装飾のみのためaria-hidden。 */
.hero-collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-collage__grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  opacity: .92;
}
.hero-collage__cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #050505; }
.hero-collage__cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.25) brightness(.68) contrast(1.05);
}
/* 2026-08-16(CEOフィードバック・4巡目): overlayが強すぎて背景が「大量のコンテンツがある」
   ことを伝えられていなかった。scrim/vignetteを3割ほど弱め、画像自体の明るさも上げて、
   白文字の可読性を保ったまま背景のモザイクがはっきり見えるようにする。 */
.hero-collage__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.66) 100%);
}
.hero-collage__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 40%, rgba(0,0,0,.38) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%);
}
.hero-collage__fade-top {
  position: absolute; inset: 0 0 auto 0; height: 110px;
  background: linear-gradient(to bottom, var(--paper), transparent);
}
.hero-collage__fade-bottom {
  position: absolute; inset: auto 0 0 0; height: 160px;
  background: linear-gradient(to top, var(--paper), transparent);
}
.hero__content { position: relative; z-index: 1; }

/* 常設LPのヒーローは、公式ヒーローと同じ「ゴールドのBAL STUDIOワードマーク →
   明朝の断定コピー」の順。eyebrowをワードマークとして組む。 */
.lp-evergreen .hero .eyebrow {
  font-size: clamp(30px, 6.6vw, 52px);
  letter-spacing: .06em; line-height: 1.1;
  color: var(--gold); margin: 0 0 10px; font-weight: 800;
}
.lp-evergreen .hero .eyebrow::after {
  content: "学びの本拠地 ｜ 会員制学習プラットフォーム";
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink-2);
  margin-top: 12px; text-transform: none;
}
.lp-evergreen .hero h1 { margin-top: 30px; }

/* キャンペーンLPのヒーローも、公式と同じ「ゴールドのワードマーク → 明朝の断定コピー」 */
.h1-mark {
  display: block; font-family: var(--f-jp); color: var(--gold);
  font-size: clamp(28px, 6.2vw, 48px); font-weight: 800;
  letter-spacing: .06em; line-height: 1.1; margin: 0 0 26px;
}

/* 2026-08-16(CEOフィードバック): Hero直下は「600本以上」を主役にし、48名は
   補足(4番手)へ格下げする。48名を主役に見せていた旧hero-factsの並びを変更。 */
/* 2026-08-16(CEOフィードバック・2巡目): 主役数字と脇の数字の対比をさらに強める。
   縦積みにして"見出し"としての存在感を出し、フォントサイズの差を約3.5倍まで拡大。 */
.hero-primary-stat {
  display: flex; flex-direction: column; gap: 2px;
  margin: 40px 0 0;
}
.hero-primary-stat b {
  font-family: var(--f-num); font-size: clamp(52px, 9vw, 86px); font-weight: 800;
  color: var(--gold); line-height: 1; letter-spacing: .005em;
}
.hero-primary-stat > span { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0;
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
}
.hero-facts div { flex: 1 1 190px; padding: 20px 24px 20px 0; }
.hero-facts b {
  display: block; font-family: var(--f-num); font-size: 24px;
  font-weight: 800; color: var(--gold); line-height: 1.15; letter-spacing: .01em;
}
/* 直下の span のみ。<b> の内側にある数値 span(.stat-*) まで縮めない。 */
.hero-facts div > span { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.hero-facts b span { font-size: inherit; color: inherit; }
/* 48名は4番手の補足情報。数字自体を小さくして主役の600本以上と差をつける。 */
.hero-facts__tertiary b { font-size: 17px; color: var(--ink-2); }
.hero-facts__tertiary { opacity: .65; }

/* ─── generic cards ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper-2); border: 1px solid var(--gold-line);
  border-radius: var(--r); padding: 28px 26px;
}
.card h3 { color: var(--ink); }
/* 公式の特徴カードは見出しの脇にゴールドの標識がある。細い金の罫で置き換える。 */
.card h3::before {
  content: ''; display: block; width: 28px; height: 2px;
  background: var(--gold); margin: 0 0 14px;
}
.card p { color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.card__tags { font-size: 12.5px; color: var(--gold-lo); margin: 0 0 12px; letter-spacing: .03em; }
.card__eg {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.9;
  border-top: 1px solid var(--gold-line); padding-top: 14px; margin-top: 16px;
}

/* ─── real course thumbnails (courses strip, #courses) ─────────────────── */
/* 実在するBAL STUDIO Search本番アセットのサムネイル(1800x1000)。生成/ストック画像は使わない。 */
.course-card {
  background: var(--paper-2); border: 1px solid var(--gold-line);
  border-radius: var(--r); overflow: hidden;
}
/* 2026-08-16(CEOフィードバック・4巡目): coverだと講義サムネイルが切れすぎて
   何の講義か分からなくなっていた。STUDIO Searchのカードと同じ思想で、画像
   全体が見えるcontainへ変更し、余白は背景色(#050505、黒ベースのブランドと
   親和)で埋める。 */
.course-shot {
  width: 100%; height: auto; aspect-ratio: 9 / 5; object-fit: contain;
  background: #050505; /* JSでsrcを差し込むまでの下地 + containの余白 */
}
.course-card__body { padding: 16px 18px 18px; }
.course-card__body h3 { font-size: 16px; margin: 0 0 6px; line-height: 1.5; }
.course-card__body .card__tags { margin: 0; }
/* サムネイル取得に失敗した場合のフォールバック(壊れた画像アイコンを出さない) */
.course-card--noimg .course-shot { display: none; }
.course-card--noimg .course-card__body { padding-top: 20px; }

/* ─── 誰から学べるか(講師collage、#lecturers) ─────────────────────────────
   2026-08-16(CEOフィードバック・4巡目): 大きな個別カード5枚だと「5人しかいない」に
   見えてしまうため、より小さく密度の高いcollage/railへ変更。実在講師写真(BAL公式HP
   bal-okinawa.jp/staff)のみ使用、生成画像は使わない。詳細プロフィールはHPへ委ね('
   人がたくさんいる'が一瞬で伝わることを優先し、名前+肩書き1行のみに圧縮)。 */
.lecturer-collage {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 3px;
  margin-top: 34px;
}
.lecturer-tile {
  display: block; text-decoration: none; color: inherit; position: relative;
  overflow: hidden; aspect-ratio: 3 / 4; background: #050505;
}
/* 2026-08-16(CEOフィードバック・4巡目): coverだと講師の顔・上半身が切れて
   いた。人物全体が分かるようcontainへ変更し、余白は背景色で埋める。 */
.lecturer-photo {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: contain; object-position: center center;
  background: #050505; display: block; transition: transform .25s;
}
.lecturer-tile:hover .lecturer-photo { transform: scale(1.04); }
/* 2026-08-16(CEOフィードバック・4巡目): 「もっと見る」で表示する残り25名の
   ラッパー。表示時はgridの直接の子として並ぶよう display:contents にする
   (hidden時はUAスタイルのdisplay:noneのまま)。 */
.lecturer-collage__more:not([hidden]) { display: contents; }
.lecturer-more-btn { appearance: none; -webkit-appearance: none; }
.lecturer-tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 12px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.92) 10%, rgba(0,0,0,0) 100%);
}
.lecturer-tile__caption h3 { font-size: 13.5px; margin: 0 0 2px; line-height: 1.4; color: #fff; }
.lecturer-tile__caption p { font-size: 10.5px; color: var(--gold); margin: 0; line-height: 1.5; }

/* ─── walkthrough timeline ─────────────────────────────────────────────── */
.timeline { border-left: 1px solid var(--gold-line2); padding-left: 28px; margin: 0; }
.timeline li { list-style: none; margin: 0 0 22px; position: relative; color: var(--ink-2); }
.timeline li::before {
  content: ''; position: absolute; left: -34px; top: 13px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--paper);
}
.timeline time {
  font-family: var(--f-num); font-weight: 800; font-size: 13px;
  color: var(--gold); display: inline-block; min-width: 72px; letter-spacing: .04em;
}

/* ─── static navigator demo (evergreen §3) ─────────────────────────────── */
.demo {
  background: var(--paper-2); border: 1px solid var(--gold-line);
  border-radius: var(--r); overflow: hidden; margin: 0 0 20px;
}
.demo__q {
  background: #141414; border-bottom: 1px solid var(--gold-line);
  padding: 16px 24px; font-size: 13.5px; color: var(--ink-3); letter-spacing: .03em;
}
.demo__q b { color: var(--gold-hi); font-size: 16px; font-weight: 800; }
.demo__body { padding: 24px; }
.demo__rows { margin: 0; padding: 0; list-style: none; }
.demo__rows li {
  display: flex; gap: 14px; align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid rgba(200,168,108,.12); font-size: 14.5px; color: var(--ink);
}
.demo__rows li:last-child { border-bottom: 0; }
.demo__rank {
  font-family: var(--f-num); font-size: 11px; font-weight: 800;
  color: #000; background: var(--gold); border-radius: 2px;
  padding: 3px 8px; white-space: nowrap; letter-spacing: .04em;
}
.demo__meta { color: var(--ink-3); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.chip-static {
  font-size: 13px; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--gold-line2); background: transparent; color: var(--gold-hi);
}

/* ─── LIVE SEARCH (campaign LP) ────────────────────────────────────────── */
.search-panel {
  background: var(--paper-2); border: 1px solid var(--gold-line2);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 30px; margin-top: 10px;
}
.search-label {
  font-size: 12px; font-weight: 800; margin: 0 0 12px; display: block;
  color: var(--gold); letter-spacing: .16em;
}
.search-row { display: flex; gap: 10px; }
.search-row input {
  flex: 1; font-family: inherit; font-size: 16.5px; padding: 16px 18px;
  border: 1px solid var(--gold-line2); border-radius: var(--r-sm);
  background: #000; color: var(--ink); min-width: 0;
}
.search-row input::placeholder { color: var(--ink-4); }
.search-row input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}
.search-egs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; align-items: center; }
.search-egs .lbl { font-size: 12.5px; color: var(--ink-4); }
.eg {
  font-size: 13px; padding: 7px 14px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--gold-line); background: transparent; color: var(--ink-2);
  font-family: inherit;
}
.eg:hover { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-wash); }

.results { margin-top: 32px; }
.results__head {
  font-size: 13px; font-weight: 800; color: var(--ink-3); letter-spacing: .1em;
  padding-bottom: 12px; border-bottom: 1px solid var(--gold); margin-bottom: 22px;
}
.results__head b { color: var(--gold); }

/* ─── rich result card ─────────────────────────────────────────────────── */
.rc {
  border: 1px solid var(--gold-line); border-radius: var(--r);
  background: var(--paper-2); padding: 24px; margin-bottom: 16px;
}
.rc__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rc__rank {
  font-family: var(--f-num); font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #000; background: var(--gold); border-radius: 2px; padding: 4px 10px;
}
.badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 2px;
}
.badge--cg { background: var(--gold-wash); color: var(--gold-hi); border: 1px solid var(--gold-line2); }
.badge--prov { background: #161616; color: var(--ink-4); border: 1px solid rgba(255,255,255,.08); }
.rc__title {
  font-family: var(--f-serif);
  font-size: 20px; font-weight: 700; line-height: 1.55; margin: 0 0 10px; color: var(--ink);
}
.rc__meta {
  font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--gold-line);
}
.rc__meta b { color: var(--ink-2); font-weight: 700; }

.rc__field { margin: 0 0 18px; }
.rc__flabel {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  color: var(--gold); margin: 0 0 8px; font-family: var(--f-jp);
}
.rc__three { margin: 0; padding-left: 1.15em; }
.rc__three li { font-size: 14.5px; line-height: 1.9; margin-bottom: 5px; color: var(--ink-2); }
.rc__three li::marker { color: var(--gold-dim); }
.rc__text { font-size: 14.5px; line-height: 1.9; color: var(--ink-2); margin: 0; }
.rc__cases { display: flex; flex-wrap: wrap; gap: 7px; }
.rc__case {
  font-size: 12.5px; padding: 6px 12px; border-radius: 100px;
  background: transparent; color: var(--ink-2); border: 1px solid var(--gold-line);
}
.rc__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gold-line); }

.more {
  border: 1px solid var(--gold-line); border-radius: var(--r);
  padding: 20px 24px; margin-top: 6px; background: #0a0a0a;
}
.more h4 { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: .08em; }
.more ul { margin: 0; padding-left: 1.2em; }
.more li { font-size: 13.5px; color: var(--ink-2); line-height: 1.95; }
.more li::marker { color: var(--gold-dim); }

.assist {
  border: 1px solid var(--gold-line2); border-radius: var(--r);
  padding: 26px; background: var(--paper-2);
}
.assist h4 { margin: 0 0 10px; font-size: 17px; color: var(--ink); font-family: var(--f-serif); font-weight: 700; }
.assist p { font-size: 14px; color: var(--ink-2); }

/* ─── signup gate modal ────────────────────────────────────────────────── */
.gate-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  overflow-y: auto;
}
.gate-backdrop.is-open { opacity: 1; pointer-events: auto; }
.gate {
  background: #0d0d0d; border: 1px solid var(--gold-line2); border-radius: var(--r);
  max-width: 560px; width: 100%; box-shadow: var(--shadow-lg);
  overflow: hidden; margin: auto;
  transform: translateY(10px); transition: transform .18s ease;
}
.gate-backdrop.is-open .gate { transform: none; }
.gate__head {
  background: linear-gradient(180deg, #d6ba85 0%, var(--gold) 55%, #bb9a5c 100%);
  color: #000; padding: 15px 26px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em; font-family: var(--f-jp);
}
.gate__body { padding: 30px 26px 26px; }
.gate__msg { font-size: 16px; line-height: 2; margin: 0 0 6px; color: var(--ink-2); }
.gate__lecture {
  font-family: var(--f-serif);
  font-weight: 700; color: var(--gold-hi); font-size: 19px;
  display: block; margin-bottom: 8px; line-height: 1.6;
}
.gate__sub { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; margin: 16px 0 0; }
.gate__price { margin: 24px 0; }
.gate__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.gate__minor {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px; font-size: 13px;
}
.gate__minor button, .gate__minor a {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.gate__minor button:hover, .gate__minor a:hover { color: var(--gold); }
.gate__note {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gold-line);
  font-size: 12px; color: var(--ink-4); line-height: 1.8;
}
/* 決済リンク未接続の警告。目立たせるが、LP全体の見た目は壊さない */
.gate__note--warn {
  border: 1px solid rgba(217,72,58,.55); background: rgba(217,72,58,.09);
  border-radius: var(--r-sm);
  padding: 14px 16px; margin-top: 14px; color: var(--ink-2); font-size: 12.5px;
}
.gate__note--warn b { color: #f08a7e; }
/* 押せないCTA。押せるように見せない */
.btn.is-disabled {
  background: transparent; color: var(--ink-4);
  border: 1px dashed rgba(255,255,255,.18); box-shadow: none;
  cursor: not-allowed;
}
.btn.is-disabled:hover { background: transparent; color: var(--ink-4); }
.btn.is-disabled:active { transform: none; }

/* ─── price block ──────────────────────────────────────────────────────── */
.price-block {
  border: 1px solid var(--gold-line2); border-radius: var(--r);
  background: #0a0a0a; overflow: hidden;
}
.price-block.has-campaign { border-color: var(--gold); }
.price-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--gold-line);
}
.price-row:last-child { border-bottom: 0; }
.price-row__label {
  font-size: 11.5px; font-weight: 800; color: var(--ink-4);
  min-width: 96px; letter-spacing: .1em;
}
.price-row__value { font-family: var(--f-num); font-size: 25px; font-weight: 800; color: var(--ink); }
.price-row__value.is-hero { font-size: 44px; color: var(--gold); line-height: 1.1; letter-spacing: .01em; }
.price-row__value.is-struck { text-decoration: line-through; color: var(--ink-4); font-size: 20px; }
.price-row__value.is-tbd {
  font-size: 20px; color: var(--ink-3);
  border: 1px dashed rgba(255,255,255,.2); border-radius: var(--r-sm); padding: 3px 14px;
}
.price-unit { font-size: 15px; font-weight: 700; color: var(--ink-3); margin-left: 5px; }
.price-row__tax { font-size: 12px; color: var(--ink-4); margin-left: auto; }
.price-row--campaign { background: var(--gold-wash); }
.price-row--tbd { background: #0d0d0d; }
.price-row--campnote { padding-top: 0; border-bottom: 0; }
.price-row--campnote .price-row__tax { margin-left: 0; }

/* 永年固定 — 一時割引ではないことを価格ブロック内で言い切る行。
 * 「期間中だけ安い」と「入った価格がずっと続く」は別の商品なので、
 * 小さな注記に流さず、価格の直下に独立した行として出す。 */
.price-perm {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--gold-wash);
  border-top: 1px solid var(--gold-line2);
}
.price-perm__badge {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: #000; background: var(--gold);
  border-radius: 999px; padding: 5px 13px; white-space: nowrap;
}
.price-perm__text {
  font-size: 13.5px; font-weight: 700; color: var(--gold-hi); line-height: 1.7;
}

/* 通常/Campaign 価格の一目比較ブロック(#priceCompare)。
 * price-block(申し込み時に実際に効く価格)とは別物で、日付に関わらず常に
 * 「2つの価格がある」ことだけを一目で伝える。値引き訴求ではなく招待の
 * トーンにするため、価格そのものよりリード文を先に読ませる。 */
.price-compare {
  border: 1px solid var(--gold-line2); border-radius: var(--r);
  background: #0a0a0a; padding: 22px 24px; max-width: 620px; margin: 18px 0 26px;
}
.price-compare__lede { font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0 0 16px; }
.price-compare__lede strong { color: var(--ink); }
.price-compare__row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.price-compare__cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--gold-line); flex: 1 1 160px; min-width: 140px;
}
.price-compare__cell.is-campaign { background: var(--gold-wash); border-color: var(--gold); }
.price-compare__label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink-4);
}
.price-compare__cell.is-campaign .price-compare__label { color: var(--gold-hi); }
.price-compare__value { font-family: var(--f-num); font-size: 24px; font-weight: 800; color: var(--ink); }
.price-compare__value.is-hero { color: var(--gold); font-size: 28px; }
.price-compare__arrow { flex: none; font-size: 18px; color: var(--ink-4); }
.price-compare__note { font-size: 12px; color: var(--ink-4); margin: 14px 0 0; line-height: 1.7; }
@media (max-width: 640px) {
  .price-compare__row { flex-direction: column; align-items: stretch; }
  .price-compare__arrow { transform: rotate(90deg); align-self: center; }
}

/* ─── unified join ─────────────────────────────────────────────────────── */
.join {
  border: 1px solid var(--gold-line2); border-radius: var(--r);
  background: #080808; padding: 36px; max-width: 620px;
  box-shadow: var(--shadow);
}
.join__ctx {
  background: var(--gold-wash); border-left: 2px solid var(--gold);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px; line-height: 1.85; margin-bottom: 26px; color: var(--ink-2);
}
.join__ctx b { color: var(--gold-hi); }
.join ul { margin: 24px 0; padding-left: 1.2em; }
.join li { font-size: 14.5px; line-height: 2; color: var(--ink-2); margin-bottom: 5px; }
.join li::marker { color: var(--gold); }

/* ─── story arc (campaign LP) ──────────────────────────────────────────── */
.arc { display: grid; gap: 0; counter-reset: arc; }
.arc__step {
  display: grid; grid-template-columns: 62px 1fr; gap: 26px;
  padding: 32px 0; border-bottom: 1px solid var(--gold-line);
}
.arc__step:last-child { border-bottom: 0; }
.arc__n {
  counter-increment: arc;
  font-family: var(--f-num); font-weight: 800; font-size: 13px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #000; letter-spacing: .04em;
}
.arc__n::before { content: "0" counter(arc); }
.arc h3 { margin-bottom: 12px; }
.arc p { font-size: 15.5px; color: var(--ink-2); margin-bottom: .85em; }
.arc p:last-child { margin-bottom: 0; }

.stat-table {
  width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: 14px;
}
.stat-table th, .stat-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--gold-line);
}
.stat-table th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.stat-table td:last-child {
  font-family: var(--f-num); font-weight: 800; text-align: right; white-space: nowrap;
}
.stat-table .was td:last-child { color: #cf7a6e; }
.stat-table .now td:last-child { color: var(--gold); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--gold-line); }
.faq details { border-bottom: 1px solid var(--gold-line); }
.faq summary {
  cursor: pointer; padding: 22px 36px 22px 0; font-weight: 700; font-size: 16px;
  list-style: none; position: relative; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-hi); }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 18px;
  font-size: 22px; font-weight: 400; color: var(--gold);
}
.faq details[open] summary { color: var(--gold-hi); }
.faq details[open] summary::after { content: '−'; }
.faq .a { padding: 0 0 24px; font-size: 14.5px; color: var(--ink-2); line-height: 2; }
.faq .a em { color: var(--ink-3); }

/* ─── footer ───────────────────────────────────────────────────────────── */
.site-foot {
  background: #000; color: var(--ink-4); padding: 52px 0; font-size: 13px;
  border-top: 1px solid var(--gold-line);
}
.site-foot a { color: var(--ink-3); text-decoration: none; }
.site-foot a:hover { color: var(--gold); }
.site-foot__links {
  display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
  font-weight: 600; letter-spacing: .04em;
}

/* ─── mobile sticky CTA ────────────────────────────────────────────────── */
.mobile-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(0,0,0,.94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--gold-line2);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 9px;
}
.mobile-cta .btn { flex: 1; font-size: 14px; padding: 14px 8px; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; line-height: 1.85; }
  html { scroll-padding-top: 68px; }
  .wrap { padding: 0 20px; }

  section { padding: 60px 0; }
  .hero { padding: 52px 0 50px; }

  h1 { font-size: 26px; line-height: 1.55; }
  h2 { font-size: 21px; line-height: 1.62; }
  h3 { font-size: 18px; }
  .lead, .hero__sub { font-size: 16px; line-height: 1.95; }

  .lp-evergreen .hero .eyebrow { font-size: 38px; letter-spacing: .05em; }
  .lp-evergreen .hero .eyebrow::after { font-size: 11.5px; letter-spacing: .1em; }
  .lp-evergreen .hero h1 { margin-top: 26px; }
  .hero-collage__grid { grid-template-columns: repeat(5, 1fr); }

  /* header: brand + CTA のみ。アンカーは隠す(ブリーフのモバイル仕様) */
  .nav { display: none; }
  .site-head__in { min-height: 56px; gap: 10px; }
  .brand { font-size: 15px; letter-spacing: .08em; }
  .brand small { font-size: 8.5px; letter-spacing: .2em; margin-top: 2px; }
  .only-sm { display: inline; }
  .only-lg { display: none; }
  .site-head .btn--sm { margin-left: auto; white-space: nowrap; font-size: 12px; padding: 9px 13px; }

  .campaign-bar__in { padding: 11px 0; font-size: 13px; gap: 8px; }
  .campaign-bar__cta { margin-left: 0; width: 100%; text-align: center; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 22px 20px; }

  .hero-primary-stat { margin-top: 30px; }
  .hero-primary-stat b { font-size: 54px; }
  .hero-facts { display: block; margin-top: 26px; }
  .hero-facts div { padding: 16px 0; border-bottom: 1px solid var(--gold-line); }
  .hero-facts div:last-child { border-bottom: 0; }
  .hero-facts b { font-size: 21px; }
  .hero-facts__tertiary b { font-size: 16px; }

  .cta-pair { flex-direction: column; }
  .cta-pair .btn { width: 100%; }

  .search-panel { padding: 20px; }
  .search-row { flex-direction: column; }
  .search-row .btn { width: 100%; }
  .search-row input { font-size: 16px; } /* iOS zoom 抑止 */

  .rc { padding: 20px; }
  .rc__title { font-size: 18px; }

  .arc__step { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .arc__n { width: 38px; height: 38px; font-size: 12px; }

  .price-row { padding: 16px 18px; }
  .price-row__value.is-hero { font-size: 34px; }
  .price-row__tax { margin-left: 0; width: 100%; }
  .price-perm { padding: 13px 18px; gap: 9px; }
  .price-perm__text { font-size: 12.5px; }
  .join { padding: 24px 20px; }
  .gate__body { padding: 24px 20px; }
  .gate__msg { font-size: 15.5px; }
  .gate__lecture { font-size: 17px; }

  .timeline { padding-left: 22px; }
  .timeline li::before { left: -27px; }
  .timeline time { display: block; min-width: 0; }

  /* モバイル固定CTAバーを出す。footer が隠れないよう余白を足す */
  .mobile-cta { display: flex; }
  .site-foot { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}