/* LiverStats — 事務所・マネージャー向け（agency.html）と LP の事務所セクション（index.html #agency） */

/* ── agency.html ── */
.agency-page main {
  padding-bottom: 3rem;
}

.agency-hero {
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.agency-hero__eyebrow,
.agency-section__eyebrow,
.lp-agency-intro__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-light, #a855f7);
}

.agency-hero__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.25;
}

.agency-hero__lead {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  font-size: clamp(0.95rem, 2.6vw, 1.08rem);
  line-height: 1.7;
  color: var(--text-muted, #a1a1aa);
}

.agency-hero__lead strong,
.agency-card__title strong {
  color: var(--text, #f5f3ff);
}

.agency-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.agency-hero__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim, #71717a);
}

.agency-section {
  padding: 2.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.agency-section__head {
  margin-bottom: 1.25rem;
  text-align: center;
}

.agency-section__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 700;
}

.agency-section__desc {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted, #a1a1aa);
}

.agency-cards {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agency-card {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius, 14px);
  background: var(--bg-card, rgba(16, 18, 32, 0.92));
  border: 1px solid var(--border, rgba(168, 85, 247, 0.18));
}

.agency-card__icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.45rem;
}

.agency-card__title {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 700;
}

.agency-card__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted, #a1a1aa);
}

.agency-card__source {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-dim, #71717a);
}

/* 3 ステップ */
.agency-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: agency-step;
}

.agency-step {
  position: relative;
  padding: 1rem 1.1rem 1rem 3.4rem;
  border-radius: var(--radius, 14px);
  background: var(--bg-card, rgba(16, 18, 32, 0.92));
  border: 1px solid var(--border, rgba(168, 85, 247, 0.18));
}

.agency-step::before {
  counter-increment: agency-step;
  content: counter(agency-step);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent-gradient, linear-gradient(135deg, #7c3aed, #c084fc));
}

.agency-step__title {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.agency-step__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted, #a1a1aa);
}

/* 料金 */
.agency-pricing .lp-pricing-zone__head {
  text-align: center;
}

.agency-pricing__consult {
  margin: 1.25rem 0 0;
  text-align: center;
}

/* 最後の CTA */
.agency-final {
  padding: 2.5rem 0 1rem;
  text-align: center;
}

.agency-final__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 800;
}

.agency-final__sub {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--text-muted, #a1a1aa);
}

@media (min-width: 720px) {
  .agency-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .agency-cards--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .agency-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── index.html — 事務所・マネージャーの方へ（#pricing の直後） ── */
.lp-agency-intro {
  padding: 3rem 0;
  position: relative;
  z-index: 4;
}

.lp-agency-intro__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.lp-agency-intro__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  font-weight: 800;
}

.lp-agency-intro__lead {
  margin: 0 auto 1.25rem;
  max-width: 32rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted, #a1a1aa);
}

.lp-agency-intro__cards {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.lp-agency-intro__card {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: rgba(8, 10, 18, 0.65);
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.lp-agency-intro__card h3 {
  margin: 0 0 0.25rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.lp-agency-intro__card p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted, #a1a1aa);
}

@media (min-width: 720px) {
  .lp-agency-intro__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10 リニューアル（agency.html 固有・renewal.css のトークンを使う・既存ルールは消さない）
   CEO 2026-10-25「華やか・高級感・信頼感・色ははっきり・表現は短く言い切る」
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.agency-page .agency-hero {
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.agency-page .agency-hero__title {
  font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: 0 12px 48px rgba(139, 92, 246, 0.4);
  margin-bottom: 1rem;
}
.agency-page .agency-hero__lead {
  max-width: 46rem;
  font-size: clamp(1.08rem, 0.95rem + 0.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.65;
  color: #fff;
}
.agency-page .agency-hero__lead strong {
  background: var(--rn-grad, linear-gradient(100deg, #ff2ea6, #8b5cf6, #22d3ee));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.agency-hero__punch {
  margin: 0 auto 1.4rem;
  max-width: 40rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  font-weight: 600;
  line-height: 1.7;
  color: var(--rn-ink-2, #e9e4ff);
}
.agency-hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
  max-width: 48rem;
}
.agency-hero__proof li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 9.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
.agency-hero__proof strong {
  font-family: var(--rn-display, inherit);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: var(--rn-grad-gold, linear-gradient(120deg, #ffe29a, #f6c453, #d99a1f));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agency-hero__proof span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rn-ink-3, #b7b0d6);
  white-space: nowrap;
}
.agency-page .agency-hero__actions { gap: 0.8rem; margin-bottom: 1rem; }
.agency-page .agency-hero__actions .btn { padding: 0.9rem 1.6rem; font-size: 1rem; }
.agency-page .agency-hero__note { font-size: 0.84rem; font-weight: 600; color: var(--rn-ink-3, #b7b0d6); }

/* ── 節 ── */
.agency-page .agency-section {
  padding: clamp(2.6rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.agency-page .agency-section__head { margin-bottom: 1.8rem; }
.agency-page .agency-section__desc { max-width: 44rem; line-height: 1.75; }
.agency-page .agency-cards { gap: 1rem; }
.agency-page .agency-card { padding: 1.4rem 1.3rem 1.3rem; }
.agency-page .agency-card__icon { font-size: 1.8rem; margin-bottom: 0.6rem; }
.agency-page .agency-card__title { font-size: 1.12rem; line-height: 1.35; }
.agency-page .agency-card__text { font-size: 0.95rem; line-height: 1.7; }
.agency-page .agency-step { padding: 1.3rem 1.2rem 1.2rem 3.8rem; }
.agency-page .agency-step::before {
  left: 1.1rem;
  top: 1.25rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  color: #0b0a14;
  background: var(--rn-grad-gold, linear-gradient(120deg, #ffe29a, #f6c453, #d99a1f));
  box-shadow: 0 8px 20px -8px rgba(246, 196, 83, 0.8);
}
.agency-page .agency-step__title { font-size: 1.05rem; }
.agency-page .agency-step__text { font-size: 0.95rem; line-height: 1.7; }
.agency-page .agency-pricing__consult {
  margin-top: 1.6rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
}
.agency-page .agency-pricing__consult .btn { margin-left: 0.4rem; vertical-align: middle; }

/* 改行の制御: <br class="agency-br"> は全幅で効かせる（390px の実測で 消すと句が繋がって読める）
   h1 は 390px で「事務所・マネー / ジャー」と語の途中で割れたので 狭幅では 1 行に収まる大きさに詰める */
@media (max-width: 480px) {
  .agency-page .agency-hero__title { font-size: clamp(1.6rem, 7.2vw, 2rem); letter-spacing: -0.04em; }
}

/* ── 最後の CTA（帯にして締める） ── */
.agency-page .agency-final {
  margin-top: 1.5rem;
  padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
  border-radius: var(--rn-radius, 20px);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255, 46, 166, 0.3), transparent 70%),
    radial-gradient(70% 120% at 50% 100%, rgba(139, 92, 246, 0.35), transparent 70%),
    var(--rn-bg-3, #120f26);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 100px -50px rgba(139, 92, 246, 0.7);
}
.agency-page .agency-final__title {
  font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.2rem);
  text-shadow: 0 10px 40px rgba(255, 46, 166, 0.35);
  margin-bottom: 0.8rem;
}
.agency-page .agency-final__sub { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 1.4rem; }

/* ── 2026-10-25 スマホの仕上げ（CEO「スマホでも正確に見やすく」・390 / 360 で 1 画面ずつ撮って直した） ──
   見つけたもの: 語の途中で折れる（「ラ / ンキング」「担当ラ / イバー」「今日やる / ことが」「アカウ / ント」「トライア / ル」）・
   h1 が 360 で「マネー / ジャー」・h2「ライバーの所 / 属は3ステップ」・料金の相談行が「大丈 / 夫 [相談する]」・
   hero の注記 13.4px（サンプル画面の手書きモック向けの指定は 画像化で不要になり 2026-10-25 に削除） */
@media (max-width: 767px) {
  /* 語の途中で折り返さない — 句の区切りで折り 長すぎる句だけ任意の位置で折る */
  .agency-page .agency-hero__lead,
  .agency-page .agency-hero__punch,
  .agency-page .agency-hero__note,
  .agency-page .agency-section__desc,
  .agency-page .agency-card__text,
  .agency-page .agency-step__text,
  .agency-page .agency-pricing__consult,
  .agency-page .agency-final__sub,
  .agency-page .lp-pricing-zone__lead {
    word-break: keep-all;
    overflow-wrap: anywhere;
    /* Chromium 119+ は文節で折る（「読み取ってもら / える」「権限判定で決ま / る」を文節で折る）
       未対応の Safari は上の keep-all + anywhere のまま（今と同じ折れ方） */
    word-break: auto-phrase;
  }
  .agency-page .agency-hero__lead { font-size: 1.08rem; }
  .agency-page .agency-hero__note { font-size: 0.9rem; line-height: 1.6; }
  .agency-page .agency-hero__proof span { font-size: 0.85rem; }

  /* 料金の相談行: 文とボタンを縦に並べる（inline だと「大丈 / 夫 [相談する]」と割れた）・ボタンは 44px 以上 */
  .agency-page .agency-pricing__consult {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
  .agency-page .agency-pricing__consult .btn { margin-left: 0; min-height: 2.75rem; padding: 0.7rem 1.5rem; font-size: 0.95rem; }
}
@media (max-width: 480px) {
  /* h1: 360 では 7.2vw でも「事務所・マネー / ジャー」と割れた（13 字 × 25.9px > 328px）— 13 字が 1 行に入る大きさへ */
  .agency-page .agency-hero__title { font-size: clamp(1.5rem, 6.8vw, 2rem); }
  /* h2: renewal.css の clamp（390 で 29.3px）だと「ライバーの所 / 属は3ステップ」と語の途中で割れる — 13 字が 1 行に入る大きさへ
     renewal.css は !important なので 特異性を上げたうえで !important */
  .agency-page .agency-section__title { font-size: clamp(1.45rem, 6.8vw, 1.9rem) !important; }
  .agency-page .agency-final__title { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  /* 節の説明: 360 で「権限判定で決ま / る」と 1 字だけ落ちた（19 字 × 16.6px > 328px）— 19 字が入る 16px に */
  .agency-page .agency-section__desc { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10 見せる（agency.html・CEO 2026-10-25「文章だけじゃなくて画面を見ないとわからない」）
   hero の直後に「オーナー / マネージャーが開く画面」を端末風の枠で 3 枚 — 枠は renewal.css の .lp-screen*（トップと同じ見た目）
   中身は本番アプリを撮った画像（scripts/ops/build-agency-screens.mjs）— 手書きモック agency-mock の規則は 2026-10-25 に削除
   ═══════════════════════════════════════════════════════════════════════════ */

/* 本文は 15px 以上（節の説明 14.4px・hero の注記 13.4px だったのを上げる） */
.agency-page .agency-section__desc { font-size: 1rem; }
.agency-page .agency-hero__note { font-size: 0.95rem; line-height: 1.6; }
.agency-page .agency-hero__lead { margin-bottom: 1.6rem; }

/* ── 画面の節 ── */
.agency-shots .agency-section__head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.agency-shots .lp-screen__text .lp-screen__title { color: #fff; }
.agency-shots .lp-screen__sub { font-size: 1.02rem; line-height: 1.7; }

/* 文章の節: 1 枚 1 行なので 余白を詰めて画面に近づける */
.agency-page .agency-card { padding: 1.2rem 1.2rem 1.1rem; }
.agency-page .agency-card__icon { margin-bottom: 0.45rem; }
.agency-page .agency-card__title { margin-bottom: 0.3rem; }
.agency-page .agency-step__text,
.agency-page .agency-card__text { font-size: 0.96rem; }

/* 料金節の「相談する」: 1280 で 43px だった — タップ領域 44px 以上を全幅で */
.agency-page .agency-pricing__consult .btn { min-height: 2.75rem; }

/* 1280 で「今月総ダイ / ヤ推移」「1人ごとの成 / 長率」「所 / 属します」と語の途中で折れた — 文節折返しを全幅に（≤767px の指定と同じ形） */
.agency-page .agency-card__text,
.agency-page .agency-step__text,
.agency-page .agency-section__desc,
.agency-page .lp-screen__sub {
  word-break: keep-all;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}