@charset "UTF-8";

/* ==========================================================================
   TOPページ
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① FV（全面の背景動画にマスクをかけ、中央にコピーを重ねる／参考：z-project.jp）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  /* 0930修正：開いた時点の画面の高さで固定する（JSが --fv-height を入れる）。
     アプリ内ブラウザ等ではスクロールでアドレスバーが出入りするたびに svh が変わり、
     FVの高さと背景動画の拡大率が揺れてカクついていたため */
  min-height: var(--fv-height, 100svh);
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 90px;
  background: linear-gradient(115deg, #0d1b3e 0%, #172a5c 38%, #2a2568 72%, #3a2a6e 100%);
  overflow: hidden;
  color: #ffffff;
}

@media (min-width: 900px) {
  .hero {
    padding-top: var(--header-height);
    padding-bottom: 110px;
  }
}

/* ---- 背景の光と星 ---- */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero__orb--1 { top: -12%; right: 4%;  width: 460px; height: 460px; background: rgba(96, 150, 255, 0.34); }
.hero__orb--2 { bottom: -18%; left: -6%; width: 420px; height: 420px; background: rgba(140, 90, 235, 0.34); }
.hero__orb--3 { top: 32%; right: 34%;  width: 260px; height: 260px; background: rgba(232, 95, 168, 0.22); }

.hero__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.30) 1px, transparent 1px);
  background-size: 132px 132px, 71px 71px;
  background-position: 0 0, 34px 52px;
}

.hero__glowline {
  position: absolute;
  top: -20%;
  right: 18%;
  width: 2px;
  height: 140%;
  transform: rotate(24deg);
  background: linear-gradient(180deg, rgba(120, 210, 255, 0) 0%, rgba(120, 210, 255, 0.7) 45%, rgba(180, 130, 255, 0) 100%);
  filter: blur(0.6px);
  pointer-events: none;
}

/* ---- 中身 ---- */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

/* 0923修正：コピーの位置が下寄りだったため、1行分ぶん上へ持ち上げる */
.hero__body {
  position: relative;
  bottom: 48px;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .hero__body { bottom: 64px; }
}

@media (min-width: 1200px) {
  .hero__body { bottom: 80px; }
}

.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #7fd9f5;
}

@media (min-width: 768px) {
  .hero__eyebrow { font-size: 13px; }
}

.hero__title {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  text-shadow: 0 2px 22px rgba(4, 12, 34, 0.45);
}

@media (min-width: 768px) {
  .hero__title { font-size: 46px; }
}

@media (min-width: 1200px) {
  .hero__title { font-size: 58px; letter-spacing: 0.04em; }
}

/* 「躍動」は途中で折らない（SPで「躍／動」に割れていた） */
.hero__title-accent {
  white-space: nowrap;
  background: linear-gradient(90deg, #6fd8f5 0%, #a78bfa 55%, #f58bc4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 背景動画（会社・地域の風景） ---- */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字を読ませるための薄いマスク（中央をやや濃く）
   1013修正：参考サイト（z-project.jp・黒30%を全面）に近い暗さに */
.hero__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8, 16, 40, 0.12) 0%, rgba(8, 16, 40, 0) 100%),
    linear-gradient(180deg, rgba(8, 16, 40, 0.34) 0%, rgba(8, 16, 40, 0.3) 45%, rgba(8, 16, 40, 0.38) 100%);
}

/* ---- 手書きの縦組みコピー ---- */
.hero__script {
  position: absolute;
  left: var(--container-padding);
  bottom: 56px;
  z-index: 1;
  display: none;
  font-size: 22px;
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
}

@media (min-width: 1400px) {
  .hero__script { display: block; }
}

/* --------------------------------------------------------------------------
   ①-a 実績バンド
   -------------------------------------------------------------------------- */
.stats {
  position: relative;
  padding-block: 28px 36px;
  background: var(--color-bg);
  overflow: hidden;
}

.stats__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

@media (min-width: 900px) {
  .stats__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
}

.stats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
  width: 100%;
}

@media (min-width: 900px) {
  .stats__list { width: auto; flex-wrap: nowrap; }
}

.stats__item {
  flex: 1 1 50%;
  padding-right: 24px;
}

@media (min-width: 900px) {
  .stats__item {
    flex: 0 0 auto;
    padding: 0 32px;
    border-left: 1px solid var(--color-border);
  }

  .stats__item:first-child {
    padding-left: 0;
    border-left: none;
  }
}

.stats__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-light);
}

.stats__value {
  margin-top: 3px;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 768px) {
  .stats__value { font-size: 34px; }
}

.stats__value--accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
}

.stats__unit {
  font-size: 15px;
  font-weight: 600;
}

/* 1007修正：広告換算価値の注記 */
.stats__body { width: 100%; }

@media (min-width: 900px) {
  .stats__body { width: auto; }
}

.stats__note {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* 1012修正：無料相談ボタンの下に小さなサブテキスト */
.stats__cta {
  width: 100%;
  text-align: center;
}

@media (min-width: 900px) {
  .stats__cta { width: auto; flex-shrink: 0; }
}

.stats__cta-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   ①-b 新着お知らせ
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ①-c プロデュースVTuber（横スクロール）
   -------------------------------------------------------------------------- */
.vtubers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

/* 横スクロール領域は左端をコンテナに合わせ、右は画面外へ抜けさせる */
.vtubers__scroller {
  position: relative;
  z-index: 1;
  padding-left: var(--container-padding);
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vtubers__scroller::-webkit-scrollbar {
  display: none;
}

.vtubers__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-right: var(--container-padding);
}

@media (min-width: 768px) {
  .vtubers__track { gap: 20px; }
}

/* --------------------------------------------------------------------------
   ② 課題
   -------------------------------------------------------------------------- */
.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 24px;
  margin-top: 56px;
}

@media (min-width: 768px) {
  .problem__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 44px;
  }
}

/* --------------------------------------------------------------------------
   ③ 解決策（ダーク）
   -------------------------------------------------------------------------- */
.solution {
  padding-block: 96px 100px;
}

@media (min-width: 768px) {
  .solution { padding-block: 122px 128px; }
}

.solution__lead {
  max-width: 780px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 2;
  color: #b9c8e0;
}

/* 0930修正：見出し下の文章は、SPでは中央揃えだと読みにくいので左寄せ */
@media (max-width: 767px) {
  .solution__lead { text-align: left; }
}

.solution__steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 40px;
}

@media (min-width: 900px) {
  .solution__steps {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
    margin-top: 48px;
  }
}

.solution__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6fd8f5;
}

.solution__arrow--last { color: #c39bf0; }

/* SPでは矢印を下向きにする */
@media (max-width: 899px) {
  .solution__arrow svg {
    transform: rotate(90deg);
  }
}

.solution__glow-1,
.solution__glow-2 {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
}

.solution__glow-1 {
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(23, 181, 232, 0.30) 0%, rgba(23, 181, 232, 0) 68%);
}

.solution__glow-2 {
  bottom: -240px;
  right: -100px;
  background: radial-gradient(circle, rgba(123, 91, 230, 0.34) 0%, rgba(123, 91, 230, 0) 68%);
}

/* --------------------------------------------------------------------------
   ④ 導入実績
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ⑤ 行政・教育からの信頼
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ⑤-b ゆるV
   -------------------------------------------------------------------------- */
.yuruv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 36px;
}

@media (min-width: 768px) {
  .yuruv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
  }
}

/* --------------------------------------------------------------------------
   ⑥ 下層への導線
   -------------------------------------------------------------------------- */
.guide {
  padding-block: 0 64px;
  background: var(--color-bg);
}

@media (min-width: 768px) {
  .guide { padding-block: 0 96px; }
}

.guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   ⑦ お問い合わせ
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  padding-block: 80px 72px;
  background: var(--gradient-contact);
  overflow: hidden;
  text-align: center;
}

@media (min-width: 768px) {
  .contact { padding-block: 112px 96px; }
}

.contact__label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.86);
}

.contact__title {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.5;
  color: #ffffff;
}

@media (min-width: 768px) {
  .contact__title { font-size: 36px; }
}

/* 0930修正：SPで「…ディスカッションは／こちら」と3行に割れないよう、2行目（14文字）が収まる大きさに */
@media (max-width: 767px) {
  .contact__title { font-size: 23px; }
}

.contact__lead {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}

.contact__action {
  margin-top: 30px;
}

.contact__tel {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.90);
}

.contact__circle-1,
.contact__circle-2 {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}

.contact__circle-1 { top: -160px; left: 12%; width: 420px; height: 420px; }
.contact__circle-2 { bottom: -200px; right: 8%; width: 460px; height: 460px; background: rgba(255, 255, 255, 0.08); }

.contact__stripes {
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.07) 0px,
    rgba(255, 255, 255, 0.07) 44px,
    transparent 44px,
    transparent 106px
  );
}

.contact__dots {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

/* --------------------------------------------------------------------------
   課題：番号を写真に大きく食い込ませる
   -------------------------------------------------------------------------- */
.problem-card__num {
  top: -44px;
  left: 18px;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 74px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow:
    0 3px 0 rgba(23, 181, 232, 0.85),
    0 6px 0 rgba(123, 91, 230, 0.55),
    0 14px 26px rgba(10, 30, 70, 0.35);
}

@media (min-width: 768px) {
  .problem-card__num {
    top: -52px;
    left: 24px;
    font-size: 86px;
  }
}

/* --------------------------------------------------------------------------
   解決策：斜めのネオンライン
   -------------------------------------------------------------------------- */
.solution__neon {
  position: absolute;
  width: 3px;
  height: 150%;
  pointer-events: none;
  filter: blur(0.5px);
}

.solution__neon--1 {
  top: -25%;
  left: 16%;
  transform: rotate(22deg);
  background: linear-gradient(180deg, rgba(111, 216, 245, 0) 0%, rgba(111, 216, 245, 0.85) 48%, rgba(111, 216, 245, 0) 100%);
}

.solution__neon--2 {
  top: -25%;
  right: 22%;
  transform: rotate(-20deg);
  background: linear-gradient(180deg, rgba(195, 155, 240, 0) 0%, rgba(232, 95, 168, 0.75) 52%, rgba(195, 155, 240, 0) 100%);
}

.solution__neon--3 {
  top: -25%;
  right: 8%;
  width: 1px;
  transform: rotate(-20deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
}

/* --------------------------------------------------------------------------
   導入実績：ハッシュタグ
   -------------------------------------------------------------------------- */


/* ==========================================================================
   ブラッシュアップ：躍動感を出すための上書き
   ========================================================================== */

/* --------------------------------------------------------------------------
   ② 解決策：横長のグラスパネル＋二重シェブロン＋大きな光の帯
   -------------------------------------------------------------------------- */
.solution__beam {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 320px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(23, 181, 232, 0) 0%,
    rgba(23, 181, 232, 0.30) 22%,
    rgba(123, 91, 230, 0.42) 52%,
    rgba(232, 95, 168, 0.28) 78%,
    rgba(232, 95, 168, 0) 100%
  );
  filter: blur(60px);
}

.solution__beam--1 { top: 18%; transform: rotate(-7deg); }
.solution__beam--2 { bottom: 6%; height: 220px; opacity: 0.6; transform: rotate(6deg); }

/* 上下を横切る細い光の線 */
.solution__streak {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(111, 216, 245, 0) 0%, rgba(111, 216, 245, 0.9) 45%, rgba(232, 95, 168, 0.9) 62%, rgba(232, 95, 168, 0) 100%);
  filter: blur(0.5px);
}

.solution__streak--1 { top: 26%; transform: rotate(-6deg); opacity: 0.75; }
.solution__streak--2 { bottom: 22%; transform: rotate(5deg); opacity: 0.5; }

@media (min-width: 900px) {
  .solution__steps { gap: 10px; }

  .step-card {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 26px 26px;
    text-align: left;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.40),
      0 22px 46px rgba(4, 12, 34, 0.38);
    backdrop-filter: blur(6px);
  }

  .step-card--last {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.28) 0%, rgba(232, 95, 168, 0.18) 100%);
    border-color: rgba(255, 255, 255, 0.40);
  }

  .step-card__icon {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    box-shadow: 0 10px 22px rgba(4, 12, 34, 0.35);
  }

  .step-card__title {
    font-size: 16px;
    line-height: 1.55;
  }
}

/* 二重シェブロンの矢印 */
.solution__arrow svg { display: none; }

.solution__arrow::before {
  content: "❯❯";
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: currentColor;
  text-shadow: 0 0 14px currentColor;
}

@media (max-width: 899px) {
  .solution__arrow::before {
    display: block;
    transform: rotate(90deg);
  }
}

/* --------------------------------------------------------------------------
   ③ 導入実績：キャラをカードの外へ飛び出させる
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ④ 数字をもっと大きく
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  

  

  

  .stats__value { font-size: 40px; }

  .stats__unit { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   仕上げ：キャラを本当にカードの外へ／ステップの改行と光の強さ
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* 事例カードのキャラは絶対配置で上下左に突き抜けさせる */
  

  

  /* ステップの文言が2行で割れないよう詰める */
  .step-card { padding: 24px 22px; gap: 15px; }
  .step-card__icon { width: 64px; height: 64px; }
  .step-card__title { font-size: 15px; line-height: 1.6; }
}

@media (min-width: 1200px) {
  .step-card__title { font-size: 16px; }
}

/* 0930修正：ステップの文言は2行（例：社員が／Ｖチューバー運用に関わる）に揃える。
   1400px未満はアイコン横に2行目が収まらず3行に割れるので、アイコンを上に積む */
@media (min-width: 900px) and (max-width: 1399px) {
  .step-card {
    flex-direction: column;
    gap: 12px;
    padding: 22px 18px;
    text-align: center;
  }
}

/* 光の帯をもう少し効かせる */
.solution__beam--1 { opacity: 0.85; height: 380px; }
.solution__beam--2 { opacity: 0.7; }

/* ==========================================================================
   生成した背景画像を適用（CSSのグラデーション装飾は画像に置き換え）
   原本は 素材・情報/背景_FV_原本.png / 背景_SOLUTION_原本.png
   ========================================================================== */
.hero {
  background-image: url("../../img/hero-poster.webp");
  background-size: cover;
  background-position: center;
  background-color: #0d1b3e;
}

.solution {
  background-image: url("../../img/bg-solution.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-navy);
}

/* 画像の上では斜めストライプとドットを控えめに */
.solution .deco--stripes-light { opacity: 0.5; }
.solution .deco--dots-overlay { opacity: 0.45; }

/* --------------------------------------------------------------------------
   高さ指定で枠外へはみ出すキャラ画像は、reset の max-width:100% を解除する
   （これが効いていると横方向に潰れる）
   -------------------------------------------------------------------------- */
.case-card__img {
  max-width: none;
}

/* --------------------------------------------------------------------------
   事例ラベルは本文側へ（枠外に出したキャラの頭とぶつかるため）
   -------------------------------------------------------------------------- */


/* ==========================================================================
   Case Study セクションの作り込み
   ========================================================================== */

/* セクション全体を淡いブルーに沈める */


/* ロゴの枠は細く、白く */


/* 事例カード本体 */


/* 数字をもっと大きく */


/* お客様の声は数字より一段小さく */


/* ハッシュタグは右寄せ */


/* --------------------------------------------------------------------------
   斜めカットは「背景だけ」に適用する
   （コンテナに clip-path をかけるとキャラまで切られてはみ出せなくなる）
   -------------------------------------------------------------------------- */


/* ==========================================================================
   プロデュースVTuber：自動スライダー
   JSがカードを複製し、motion.css の marquee で -50% までを無限ループさせる
   ========================================================================== */
.vtubers__scroller.is-marquee {
  /* キャラの頭・背景棒の上端とホバーの浮き上がりぶんの余白（スクローラーは overflow:hidden） */
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-width: 768px) {
  .vtubers__scroller.is-marquee .vtuber-card {
    width: 240px;
    margin-right: 40px;
  }

  .vtubers__scroller.is-marquee .vtuber-card__thumb { height: 320px; }

  /* 交互に上下させてリズムを出す */
  .vtubers__scroller.is-marquee .vtuber-card:nth-child(odd)  { transform: translateY(10px); }
  .vtubers__scroller.is-marquee .vtuber-card:nth-child(even) { transform: translateY(-10px); }

  .vtubers__scroller.is-marquee .vtuber-card:hover { transform: translateY(-18px); }

  .vtubers__scroller.is-marquee .vtuber-card__name { font-size: 19px; }
  .vtubers__scroller.is-marquee .vtuber-card__role { font-size: 11px; padding: 4px 11px; }
}

/* ==========================================================================
   スマートフォンの調整（〜767px）
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- FV ---- */
  /* 0930修正：SPのコピーを一段大きく（28px → 34px）。1行8文字以内なので3行に収まる */
  .hero__title {
    font-size: 34px;
    line-height: 1.5;
  }

  /* 0930修正：最初の画面に実績バンドまで入れる。FVの高さから実績バンドのSPでの高さ（192px、1012修正でサブテキスト分+29px）を引く */
  .hero { min-height: calc(var(--fv-height, 100svh) - 221px); }

  /* ---- 実績バンド：3つを横に並べる ---- */
  .stats__list { flex-wrap: nowrap; gap: 0; }

  /* 0930修正：3等分だと「累計チャンネル登録者数」が折り返すので、幅は中身に合わせて伸縮させる */
  .stats__item {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    border-left: 1px solid var(--color-border);
  }

  .stats__item:first-child { padding-left: 0; border-left: none; }

  .stats__label { font-size: 10px; line-height: 1.5; white-space: nowrap; }
  .stats__value { font-size: 26px; }
  .stats__unit  { font-size: 13px; }

  .stats__inner .button { width: 100%; }

  /* ---- プロデュースVTuber ---- */
  /* 見出しと「すべて見る」は縦に積む */
  .vtubers__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* ---- 導入事例 ---- */
  /* キャラをカードの上へ少し出す */
  

  

  

  /* 署名の「様」だけが次行に落ちないように */
  

  /* ハッシュタグは左寄せに戻す */
  
}

@media (max-width: 767px) {
  /* ラベルが2行になっても数字の高さを揃える */
  .stats__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}


/* --------------------------------------------------------------------------
   0923修正：SPのスクロールのカクつき対策
   ぼかし半径の大きい装飾は面積あたりの再描画コストが高く、
   ゆっくりスワイプすると描画が追いつかないため、SPでは軽くする。
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero__orb { filter: blur(44px); }

  /* 光の帯・光の線はSPではほぼ見えないので描画ごと省く */
  .solution__beam,
  .solution__streak,
  .hero__glowline {
    display: none;
  }
}

/* 0930修正：320px幅の小型機では実績バンドのラベルが1行に収まりきらないので、一回り小さく */
@media (max-width: 359px) {
  .stats__label { font-size: 9px; }
}