/**
 * LP 全体の読みやすさ — 見出しの階層と余白のリズム（最後に読み込む）。
 *
 * WHY. 節の見出しを実測したら 14.11px 〜 26.25px までばらけていた。読み手には「どれが章の始まりか」が
 * 伝わらず、14.11px の見出しは本文より小さいので見出しに見えない。しかも大小が内容の重要度と対応して
 * いなかった（同じことを言う2つの見出しが 24.86px と 14.11px で並んでいた）。
 *
 * 文字の大小は装飾ではなく情報である。節の見出しは全部同じ大きさにして、「ここから新しい話」だけを
 * 伝えさせる。強弱は色と余白で付ける。
 *
 * デモの中（#lp-phone-demo / .phone--demo）には一切触れない — あれは製品画面そのもので、CEO が今の形が
 * ベストと決めている。だから対象はLPの節見出しのクラスを名指しで列挙する（子孫セレクタで巻き込まない）。
 */

/* ── 節の見出し: ひとつの大きさに揃える ───────────────────────────────────────── */
.lp-page .lp-section-title,
.lp-page .lp-partner-appeal__title,
.lp-page .lp-emotion-band__title,
.lp-page .lp-outcome__title,
.lp-page .lp-career__title,
.lp-page .lp-trust__title,
.lp-page .lp-pricing-zone__title,
.lp-page .ref-faq__title,
.lp-page .ref-cta__title {
  font-size: clamp(1.4rem, 5.9vw, 2rem) !important;
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: 800;
  /* 見出しは2行に割れても意味のかたまりで折れてほしい。対応していないブラウザでは無視されるだけ。 */
  text-wrap: balance;
  margin-bottom: 0.6em;
}

/* 節の顔になる2つだけ一段大きく。ページの中で「ここが本題」と分かる場所を作る。 */
.lp-page .lp-career__title,
.lp-page .lp-emotion-band__title {
  font-size: clamp(1.6rem, 6.8vw, 2.4rem) !important;
}

/* ── 節の上下の余白: 章の切れ目を余白で示す ────────────────────────────────────── */
.lp-page .lp-asset,
.lp-page .lp-partner-appeal,
.lp-page .lp-emotion-band,
.lp-page .lp-compare,
.lp-page .lp-outcome,
.lp-page .lp-career,
.lp-page .lp-questions,
.lp-page .lp-trust,
.lp-page .ref-faq {
  padding-block: clamp(2.25rem, 7vw, 3.5rem);
}

/* ── 本文: 小さすぎる説明文を読める大きさに ────────────────────────────────────── */
.lp-page .lp-compare__lead,
.lp-page .lp-emotion-band__body,
.lp-page .lp-outcome__lead,
.lp-page .lp-career__lead,
.lp-page .lp-trust__lead,
.lp-page .lp-pricing-zone__sub,
.lp-page .ref-cta__sub {
  /* rem の下限はページの基準サイズに左右され、狙いの15pxに届かなかった（実測14.1px）。px で切る。 */
  font-size: clamp(15px, 3.7vw, 17px) !important;
  line-height: 1.7;
}

/* ── 指で押せる大きさ: LP上のすべてのボタンとナビ ─────────────────────────────── */
/* live-stats-density.css が min-height:auto !important を広く当てるので、こちらも !important で勝つ。
 * ただしデモの中は対象外（製品画面の見た目を変えない）。 */
/*
 * display は強制しない。.lp-menu-btn はデスクトップで display:none になっており、inline-flex を
 * !important で当てた結果、デスクトップにハンバーガーボタンが現れた（画面で確認）。
 * 押しやすさに必要なのは高さで、表示するかどうかは元のCSSの判断である。
 */
.lp-page .btn,
.lp-page .lp-nav a,
.lp-page .lp-nav-mobile a,
.lp-page .lp-footer__links a,
.lp-page .lp-menu-btn {
  min-height: 44px !important;
  align-items: center;
  justify-content: center;
}

/* ── 法務リンク: ページの2番目に置く情報ではない ──────────────────────────────── */
/*
 * Terms · Privacy が上端から 47px、ロゴの次にいた。必要なリンクだが、最初に読ませるものではない。
 * 消さずに（法務リンクは常に到達可能である必要がある）主張だけ下げる。フッターにも同じリンクがある。
 */
.lp-page .lp-legal-bar {
  opacity: 0.5;
}

.lp-page .lp-legal-bar a {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.lp-page .lp-legal-bar:hover,
.lp-page .lp-legal-bar:focus-within {
  opacity: 1;
}

/* ── 導入後のイメージ（デモの直後） ────────────────────────────────────────────── */
/*
 * デモで数字は出し切っているので、その直後にまた数字を並べても刺さらない。ここは「自分が使ったら
 * どうなるか」だけを置く。時間軸にしてあるのは、この製品の価値が時間とともに増えるものだからで、
 * 1日目より1年後の方が価値が大きいことが、並べるだけで伝わる。
 */
.lp-page .lp-after {
  padding-block: clamp(2.5rem, 8vw, 4rem);
}

.lp-page .lp-after__eyebrow {
  font-size: 12px;
  /* 0.16em は欧文向けの値で、日本語にかけると「導 入 後 の イ メ ー ジ」と字が離れて読みにくい（CEO指摘）。 */
  letter-spacing: 0.06em;
  opacity: 0.72;
  color: #c4b5fd;
  margin: 0 0 0.5rem;
  text-align: center;
}

.lp-page .lp-after__title {
  font-size: clamp(1.4rem, 5.9vw, 2rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 0.5rem;
}

.lp-page .lp-after__lead {
  font-size: clamp(15px, 3.7vw, 17px);
  line-height: 1.7;
  opacity: 0.78;
  text-align: center;
  margin: 0 0 1.75rem;
}

/* 「TikTok連携 → 配信開始するだけ」は文章ではなく2手順なので、文字を並べるのではなく手順として見せる。
   opacity で沈めていた lead と違い、ここは色を持たせる（華やかに、というCEO指示）。 */
.lp-page .lp-after__lead--flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 1;
}

.lp-page .lp-after__flow-step {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-weight: 700;
  color: #f3e8ff;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.28), rgba(34, 211, 238, 0.18));
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.22);
}

.lp-page .lp-after__flow-arrow {
  color: var(--cyan);
  font-weight: 800;
  font-size: 1.1em;
}

/* 縦に積んだ時系列。1日目より1年後が大きい価値だと、並びだけで分かるようにする。 */
.lp-page .lp-after__timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 620px;
  display: grid;
  gap: 0.85rem;
}

.lp-page .lp-after__step {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}

/* 到達点だけ色を持たせる。ここが「1年後にこうなる」という約束の行。 */
.lp-page .lp-after__step--goal {
  border-color: rgba(139, 122, 255, 0.42);
  background: linear-gradient(180deg, rgba(139, 122, 255, 0.14), rgba(90, 190, 255, 0.06));
}

.lp-page .lp-after__when {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.8;
  padding-top: 0.15rem;
  white-space: nowrap;
}

.lp-page .lp-after__step--goal .lp-after__when {
  opacity: 1;
}

.lp-page .lp-after__what {
  margin: 0;
  font-size: clamp(15px, 3.7vw, 16px);
  line-height: 1.6;
  opacity: 0.86;
}

.lp-page .lp-after__what strong {
  display: block;
  font-weight: 800;
  opacity: 1;
  margin-bottom: 0.15rem;
}

.lp-page .lp-after__notes {
  max-width: 620px;
  margin: 1.5rem auto 0;
  display: grid;
  gap: 0.75rem;
}

.lp-page .lp-after__note {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.lp-page .lp-after__note-title {
  margin: 0 0 0.25rem;
  font-size: clamp(16px, 4vw, 18px);
  font-weight: 800;
}

.lp-page .lp-after__note-body {
  margin: 0;
  font-size: clamp(15px, 3.7vw, 16px);
  line-height: 1.65;
  opacity: 0.8;
}

.lp-page .lp-after__cta {
  margin-top: 1.5rem;
  text-align: center;
}

@media (min-width: 760px) {
  .lp-page .lp-after__notes {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── デスクトップ: デモを最初の画面に入れる ──────────────────────────────────── */
/*
 * 実測（1280×800）: ヒーローが 631px で、デモは 723px から始まり、最初の画面に入るのは 13% だけだった。
 * デモはこのページで一番強い説得材料で、しかも触れる。それが下に隠れているのは、パンフレットの表紙で
 * 中身を見せていないのと同じである。
 *
 * 横2カラムにはしない — ヒーローとデモは別の <section> で、共通の親を grid にすると他の節まで巻き込む。
 * 代わりに縦を詰める。スマホは今の形が良いので、900px 以上だけに効かせる。
 */
@media (min-width: 900px) {
  .lp-page .hero.hero--locked[data-lp-hero-locked="true"] {
    padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0 !important;
  }

  /*
   * ブランド枠が 127px で、ヒーローの中で一番縦を食っていた（ロゴ47px + 4行が縦積み）。
   * ロゴを左に置いて4行をその右に流すと、同じ情報のまま高さがほぼ半分になる。情報は1つも落とさない。
   */
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand--hero {
    display: grid !important;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    justify-content: center;
    column-gap: 0.9rem;
    row-gap: 0;
    text-align: left;
  }

  /* 5要素すべてに行と列を明示する。1 / -1 の指定は暗黙の行だと解釈が定まらず、ロゴと名前が
   * 画面から消えた（実測）。自動配置に任せない。 */
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__mark {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
  }

  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__name { grid-column: 2; grid-row: 1; }
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__kana { grid-column: 2; grid-row: 2; }
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__scope { grid-column: 2; grid-row: 3; }
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__type { grid-column: 2; grid-row: 4; }

  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__kana,
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__scope,
  .lp-page .hero--locked[data-lp-hero-locked="true"] .lp-brand__type {
    margin: 0;
    line-height: 1.4;
  }

  .lp-page .hero--locked[data-lp-hero-locked="true"] .hero__title--value {
    margin-block: 0.55rem;
  }

  .lp-page .hero--locked[data-lp-hero-locked="true"] .hero__sub--value,
  .lp-page .hero--locked[data-lp-hero-locked="true"] .hero__punch {
    margin-block: 0.3rem;
  }

  .lp-page .hero--locked[data-lp-hero-locked="true"] .hero__cta--in-card {
    margin-top: 0.85rem;
  }

  /* デモの上にある2つのラベルも詰める（「下のナビをタップ」＋「サンプル画面」）。 */
  .lp-page .lp-hero-demo.lp-hero-demo-below {
    padding-top: 0.75rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   対戦相手別の通算成績（見本表）
   数字タイルだけでは「で、何が見えるの？」に答えていなかったため、実際の相手別テーブルを見せる。
   行の中身は scripts/generate-lp-demo-static.js が VS_DEMO_SAMPLE から生成する。
   ────────────────────────────────────────────────────────────── */
.lp-page .lp-vs-table {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-radius: 16px;
  background: rgba(15, 12, 32, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.lp-page .lp-vs-row {
  display: grid;
  /* 順位 · 名前 · 勝敗 · 勝率。名前だけ可変にして、右の数字3列は行をまたいで縦に揃える。 */
  grid-template-columns: 1.35rem minmax(0, 1fr) auto 3.4rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.55rem;
  border-radius: 11px;
  font-size: 0.9rem;
}

.lp-page .lp-vs-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.035);
}

.lp-page .lp-vs-row__rank {
  font-size: 0.72rem;
  font-weight: 700;
  color: #a78bfa;
  text-align: center;
}

.lp-page .lp-vs-row__name {
  font-weight: 600;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-page .lp-vs-row__record {
  display: flex;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lp-page .lp-vs-row__win { color: var(--win); }
.lp-page .lp-vs-row__lose { color: #94a3b8; }

.lp-page .lp-vs-row__rate {
  font-weight: 800;
  color: var(--cyan);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lp-page .lp-vs-sample__note {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  text-align: center;
  color: #94a3b8;
}

/* ── 戦績KPI: 項目名が小さすぎて数字しか読めなかった ─────────────────────────────
   実測で節の見出しが 0.62rem（約10px）、カードの項目名が 0.5rem（約8px）。数字だけが目に入り、
   それが何の数字なのかが読めない状態だった（CEO指摘: 名前が小さすぎる・インパクトが欲しい）。 */
.lp-page .lp-asset--kpi .lp-asset__group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(1.05rem, 4.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  opacity: 1;
  color: #f3e8ff;
  margin-bottom: 0.85rem;
}

/* 見出しの頭に色の縦棒。絵文字だけだと、どこから新しい項目なのかが目で追えない。 */
.lp-page .lp-asset--kpi .lp-asset__group-title::before {
  content: '';
  width: 4px;
  align-self: stretch;
  min-height: 1.2em;
  border-radius: 999px;
  background: linear-gradient(180deg, #c084fc, #22d3ee);
}

.lp-page .lp-asset--kpi .lp-asset__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.82;
}

/* ── 戦績KPIが独立したスクロール箱になっていた（実測 scrollH 1330 / clientH 1209） ──────────────
   lp.css の `.lp-asset { overflow-x: hidden }` が原因。CSSは片方の軸だけ hidden にすると、もう片方の
   visible を auto に格上げする。そこへ .lp-section-glow::before が inset:-120.89px 0 で上下にはみ出す
   ため、セクションが約121pxぶん中身だけスクロールする箱になっていた。指で触ると中身がズレ（操作しにくい）、
   ズレたぶん下に空白が出る（余白が気持ち悪い）— CEOが指摘した2つは同じこれ1つ。
   clip は auto への格上げが起きないので、横のはみ出しを止めたまま縦のスクロールを作らない。 */
.lp-page .lp-asset {
  overflow: clip;
}

/* ── 「導入後から自動集計」「もっと早く始めればよかった」を目立たせる ──────────────────────────
   この2枚はこの節の結論で、他の説明文と同じ枠に見えていた（CEO指摘）。 */
.lp-page .lp-after__note {
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.42);
  background: linear-gradient(150deg, rgba(147, 51, 234, 0.16), rgba(34, 211, 238, 0.07) 65%, rgba(10, 8, 20, 0.5));
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.18);
}

.lp-page .lp-after__note-title {
  font-size: clamp(18px, 4.6vw, 21px);
  font-weight: 800;
  color: #f5edff;
  margin-bottom: 0.4rem;
}

.lp-page .lp-after__note-body {
  opacity: 0.9;
}

/* ── LPデモ: 見た目の丸は小さく、当たり判定は44pxのまま ────────────────────────────────
   shared/ui-shell/home-gifter-density.css が「もっと見る」「期間チップ」などに min-height:44px を
   当てている（実機375pxで18pxしかなく、押し間違えると"別の期間が開く"ため入れられた実測ベースの修正）。
   ただし背景・枠線も同じ箱に乗っているので、44pxがそのまま「でかい丸」として見えていた（CEO指摘）。

   当たり判定と見た目を分ける: 要素自体は元の小さいピルに戻し、44pxの領域は透明な ::after で確保する。
   押しやすさは1pxも減らさずに、見た目だけ小さくなる。
   ここはLPのデモ内だけ（#lp-phone-demo / .phone--demo）。アプリ側（#liver-shell）には触れない。 */
#lp-phone-demo .phone-rank-more,
#lp-phone-demo .mpc-more,
#lp-phone-demo .home-block__action,
#lp-phone-demo .home-gifter-more__link,
#lp-phone-demo .phone-battle-history-head__more,
#lp-phone-demo .phone-mypage-quick__btn,
#lp-phone-demo .phone-period-tab,
#lp-phone-demo .phone-trend-tab,
#lp-phone-demo .mpc-period,
.phone--demo .phone-rank-more,
.phone--demo .home-block__action,
.phone--demo .home-gifter-more__link {
  min-height: 0 !important;
  min-width: 0 !important;
  position: relative;
}

#lp-phone-demo .phone-rank-more::after,
#lp-phone-demo .mpc-more::after,
#lp-phone-demo .home-block__action::after,
#lp-phone-demo .home-gifter-more__link::after,
#lp-phone-demo .phone-battle-history-head__more::after,
#lp-phone-demo .phone-mypage-quick__btn::after,
#lp-phone-demo .phone-period-tab::after,
#lp-phone-demo .phone-trend-tab::after,
#lp-phone-demo .mpc-period::after,
.phone--demo .phone-rank-more::after,
.phone--demo .home-block__action::after,
.phone--demo .home-gifter-more__link::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px;
  /* 見えない。触れるだけ。 */
  background: transparent;
  pointer-events: auto;
}

/* リーグバッジ（A1）は押すものではないのに44pxで縦長の楕円になっていた。当たり判定は要らない。 */
#lp-phone-demo .profile-league-badge,
.phone--demo .profile-league-badge {
  min-height: 0 !important;
}