@charset "UTF-8";
/* ==========================================================================
   ビズアニメ (BIZ ANIME) — Hero
   ボイスコミック紹介ページ。ビズマンガのブランド × 映像制作のシネマティック感。
   PC先行実装（1280〜1920px）。スマホは後日 responsive-rules で作り込む。
   命名: .ba-*（BizAnime）。既存 bizmanga.css / bm-lp-v2.css とは衝突しない。
   ========================================================================== */

:root {
  --ba-black:    #050505;
  --ba-ink:      #090909;
  --ba-charcoal: #111111;
  /* アクセント=黄色（2026-08-30 指示: このページだけオレンジではなく黄色）。
     glow系のrgba()は --ba-accent-rgb を使う。
     塗り（背景が黄色）になる場所の文字は必ず暗色（--ba-on-accent）にする */
  --ba-accent:     #ffc400;
  --ba-accent-2:   #ffd21a;
  --ba-accent-3:   #ffdf4d;
  --ba-accent-rgb: 255, 200, 20;
  --ba-on-accent:  #171204;
  --ba-white:    #ffffff;
  /* 既存ヘッダー高（bizmanga.css .bm-header = 72px）と揃える */
  --ba-header-h: 72px;
}

/* ==========================================================================
   0. ページ土台 — このページだけ黒地。body.ba-page のスコープに閉じる
   ========================================================================== */
body.ba-page {
  background: var(--ba-black);
  color: var(--ba-white);
}

/* ヘッダーは他ページと完全に共通（2026-08-22 ユーザー指示）。
   白背景・ロゴ・ナビ配色・追従CTAは bizmanga.css のまま使う。
   ⚠️ ここに body.ba-page 用の上書きを足さないこと。足すとこのページだけ
      ヘッダーが違う見た目になり、サイト全体の統一が崩れる。
   ヘッダーは position:fixed で本文に覆いかぶさるため、Hero 側に
   ヘッダー高ぶんの余白を取って、キャラの頭が白いバーに隠れないようにする。 */
/* ロゴ横「| BIZ ANIME」— ヘッダー内のサービス名表示 */
/* ロゴ横のサービス名。
   ⚠️ ヘッダーは [ロゴ][nav flex:1][右CTA] の3分割で、ナビは約480px必要。
      ここに要素を差し込むとナビのリンクが溢れる。
      そこでヘッダーの通常フローからは外し(absolute)、ロゴの右に重ねて置く。
      ナビの幅計算に一切影響させないことが要点。 */
.ba-header-brand {
  position: absolute;
  left: 208px;   /* ロゴ(140px)+左padding+余白 */
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding-left: 13px;
  border-left: 1px solid rgba(255,255,255,.26);
  pointer-events: none; /* ナビのクリックを妨げない */
}
body.ba-page .bm-header-inner { position: relative; }

/* ナビと重なる幅ではサービス名を隠す（ロゴ内に BizManga があるので情報は失われない） */
/* 既存ナビ・CTA・アイコン2個で、1920pxでもロゴ右の余白は約70pxしかない。
   サービス名を置くとナビ項目と物理的に重なるため、ヘッダーでは表示しない。
   「BIZ ANIME」はHero本文のH1で大きく出るので、情報としては失われない。 */
.ba-header-brand { display: none; }
.ba-header-brand-en {
  font-family: "Noto Serif JP", "Times New Roman", serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--ba-white);
  white-space: nowrap;
}
.ba-header-brand-ja {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  color: rgba(255,255,255,.62);
}

/* ==========================================================================
   1. Hero 全体
   16:9 の完成デザインを基準。1920pxでも間延びしないよう max-height で抑える。
   ========================================================================== */
.ba-hero {
  position: relative;
  width: 100%;
  min-height: 820px;
  /* 目標は16:9のキービジュアル。画面いっぱいを使い切って黒い余白を作らない（§18）。
     ヘッダーを除いたビューポート高を基準にしつつ、16:9より縦長にはしない。 */
  height: clamp(820px, max(calc(100vh - var(--ba-header-h)), 56.25vw), 1040px);
  /* 共通ヘッダーは position:fixed。その下に潜り込まないよう本体を押し下げる */
  margin-top: var(--ba-header-h);
  overflow: clip; /* Crop decorative art without creating a hidden scroll container. */
  background-color: var(--ba-black);
  isolation: isolate; /* 内部の mix-blend が外へ漏れないように */
}

/* --- 背景レイヤー群（下から: 生成背景 → 暗幕 → オレンジglow → ノイズ → vignette） --- */
.ba-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url('/material/images/biz-anime/hero-bg.webp') center center / cover no-repeat;
  /* 生成画像は右側が明るい。左のコピー領域を暗く落として可読性を確保する */
  opacity: .95;
}
/* 暗幕 + 右側だけオレンジの光（仕様§12のレイヤー構成） */
.ba-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 目標は右側からオレンジ光が中央へ差し込む。現状より明確に強くする（§15） */
  background:
    radial-gradient(ellipse 55% 70% at 96% 48%, rgba(var(--ba-accent-rgb),.40), transparent 62%),
    radial-gradient(circle at 72% 45%, rgba(var(--ba-accent-rgb),.20), transparent 45%),
    linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.78) 40%, rgba(0,0,0,.34) 100%);
}
/* vignette（四隅を締めて中央へ視線を集める） */
.ba-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 42%, rgba(0,0,0,.62) 100%);
}
/* 微細なノイズ（バンディング防止 + フィルムの質感）。SVGはCSS内に埋め込み、外部リクエスト0 */
.ba-hero-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
/* 漫画ハーフトーン（§13: ただの動画会社に見せない。主張はさせない） */
.ba-hero-halftone {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .13;
  background-image: radial-gradient(rgba(var(--ba-accent-rgb),.9) 1px, transparent 1.6px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 58%, transparent 94%);
          mask-image: linear-gradient(105deg, transparent 30%, #000 58%, transparent 94%);
}
/* 左端・左下にも極薄の漫画表現を置いて、真っ黒な空白を減らす（§14）。
   文字の可読性を邪魔しない範囲（opacity .06）に留める。 */
.ba-hero-halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image:
    repeating-linear-gradient(68deg, rgba(255,255,255,.5) 0 1px, transparent 1px 84px),
    radial-gradient(rgba(255,255,255,.42) 1px, transparent 1.5px);
  background-size: auto, 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 4% 92%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 46% 62% at 4% 92%, #000 0%, transparent 72%);
}

/* --- コンテンツ最大幅 --- */
.ba-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1500px;
  height: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   2. 左コピー（Heroの約34%）
   完成デザイン実測: 左端 4.2% / 小見出し 18.6% / BIZ ANIME 25.5% / CTA 70.7%
   ========================================================================== */
.ba-copy {
  position: absolute;
  left: max(4.2vw, 24px);
  /* 目標ではHero上半分からコピーが始まり、BIZ ANIME とキャラの顔がほぼ同じ高さに並ぶ。
     下端は共通の追従CTA(.bm-fab)と近接するので、少し上げて余裕を持たせる */
  top: 9%;
  z-index: 5;
  /* キャラの手は画像左端まで届くので box は必ず重なる。実体が隠れないよう、
     CTA など可視要素はキャラの胴体(左端+29%)より手前で終わらせる。 */
  width: 33%;
  max-width: 530px;
  /* .ba-title が cqw で自分の幅に追随できるようにする（1行維持のため） */
  container-type: inline-size;
}

/* --- 小見出し「マンガに、声と動きを。」+ 波形ライン --- */
.ba-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  /* コンテナ幅に追随させ「マンガに、声と動きを。」を必ず1行に収める */
  font-size: min(clamp(14px, 1.1vw, 19px), 6.2cqw);
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
.ba-eyebrow > span { white-space: nowrap; flex: 0 0 auto; }
.ba-eyebrow em {
  font-style: normal;
  color: var(--ba-accent-3);
}
/* コピー右へ伸びる音声波形（装飾。CSSのみ＝画像不要） */
.ba-eyebrow-wave {
  flex: 1 1 auto;
  min-width: 0; /* Flex子の潰れ防止（STYLE-GUIDE 鉄則） */
  height: 22px;
  opacity: .55;
  color: var(--ba-accent);
}

/* --- ブランドタイトル BIZ ANIME --- */
.ba-title {
  margin: 0;
  font-family: "Noto Serif JP", "Didot", "Bodoni MT", "Times New Roman", serif;
  /* Androidの文字拡大(約1.3〜1.6倍)でも1行を保つ演出文字。
     拡大されると折り返してブランド表記が壊れるため、対象から外す（鉄則3 / BUGS #045）。
     ⚠️ 本文・UIテキストには使わない（ユーザーの拡大設定を尊重するため） */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* 「BIZ ANIME」を必ず1行で収める。コンテナ幅(34%)基準の cqw を使い、
     幅が変わっても改行しないサイズへ自動追随させる（vw基準だと親幅と噛み合わず折り返す） */
  /* 実測: 「ビズアニメ」は font-size 100px で幅499px = 20.0cqw が1行の上限
     （2026-08-30 カタカナ化。英字 BIZ ANIME=572px より詰まるので大きくできる）。
     3%の安全率を見て 19.4cqw まで攻める（§7） */
  font-size: min(clamp(64px, 6vw, 122px), 19.4cqw);
  font-weight: 700;
  line-height: .9;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ba-title-biz   { color: var(--ba-white); }
.ba-title-anime {
  color: var(--ba-accent);
  /* 白→オレンジの視線移動を強調する、ごく淡いglow */
  text-shadow: 0 0 38px rgba(var(--ba-accent-rgb),.34);
}
.ba-title-ja {
  display: block;
  margin-top: 14px;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 500;
  letter-spacing: .34em;
  color: rgba(255,255,255,.72);
}

/* --- メインコピー --- */
.ba-lead {
  margin: clamp(26px, 3.2vh, 44px) 0 0;
  /* 目標は「明朝・漫画タイトル・広告コピー」寄り。太さで押さずに字面で見せる（§8） */
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(38px, 3.3vw, 60px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .015em;
  color: var(--ba-white);
  /* 日本語の改行を文節で切る（memory feedback_jp_line_break） */
  word-break: auto-phrase;
  line-break: strict;
  /* 白文字の輪郭に黒フチを纏わせて、背景の絵と分離する（2026-08-29 指示）。
     ⚠️ -webkit-text-stroke は字の内側も削るため字面が痩せる。paint-order は
        SVG専用でHTMLテキストには効かない。そこで text-shadow を8方向に重ねて
        フチを作り、外側にだけ黒を乗せる。最後の2本は背景から浮かせる用。 */
  text-shadow:
     2px  0   0 rgba(5,5,5,.95),  -2px  0   0 rgba(5,5,5,.95),
     0    2px 0 rgba(5,5,5,.95),   0   -2px 0 rgba(5,5,5,.95),
     2px  2px 0 rgba(5,5,5,.95),  -2px  2px 0 rgba(5,5,5,.95),
     2px -2px 0 rgba(5,5,5,.95),  -2px -2px 0 rgba(5,5,5,.95),
     0 2px 18px rgba(0,0,0,.8),    0 0 44px rgba(0,0,0,.55);
}

/* --- 補足文 --- */
.ba-sub {
  margin: clamp(16px, 2vh, 26px) 0 0;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.9;
  color: rgba(255,255,255,.72);
  word-break: auto-phrase;
  line-break: strict;
}

/* ==========================================================================
   3. CTA
   ========================================================================== */
.ba-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 3.4vh, 44px);
  flex-wrap: nowrap; /* 1280pxでも折り返さない（§17） */
  /* CTAはキャラの手前に置く。ボタンが絵に隠れて押せないのを防ぐ。
     キャラを左へ寄せるとスカートが掛かるため、これは必須。 */
  position: relative;
  z-index: 6;
}
.ba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 主役はキービジュアル。CTAは主張しすぎない大きさに抑える（2026-08-29 指示） */
  height: clamp(50px, 3.6vw, 58px);
  padding: 0 24px;
  border-radius: 9px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, background-color .28s, border-color .28s;
}
/* Primary — オレンジ */
.ba-btn--primary {
  min-width: 190px;
  color: var(--ba-on-accent);   /* 黄色地に白文字はコントラスト不足 */
  background: linear-gradient(135deg, var(--ba-accent), var(--ba-accent-2));
  box-shadow: 0 8px 22px rgba(var(--ba-accent-rgb),.28);
}
.ba-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(var(--ba-accent-rgb),.5), 0 0 28px rgba(var(--ba-accent-rgb),.35);
}
/* Secondary — 透明＋オレンジ枠 */
.ba-btn--ghost {
  color: var(--ba-white);
  /* キャラのスカートが背後に来るため、ほぼ不透明の黒にして文字を沈ませない */
  background: rgba(9,9,9,.9);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  border: 1px solid rgba(var(--ba-accent-rgb),.75);
}
.ba-btn--ghost:hover {
  transform: translateY(-3px);
  background: rgba(var(--ba-accent-rgb),.14);
  border-color: var(--ba-accent-3);
  box-shadow: 0 12px 32px rgba(var(--ba-accent-rgb),.22);
}
.ba-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.ba-btn--ghost .ba-btn-icon { background: rgba(var(--ba-accent-rgb),.18); }
.ba-btn-arrow { opacity: .8; }

/* ==========================================================================
   4. メディア表示（YouTube / SNS / Web / 広告・LP）— 重要度は低く抑える
   ========================================================================== */
.ba-media {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2.6vh, 32px);
  padding: 0;
  list-style: none;
  /* 目標ではもう少しはっきり見える。左コピーの一部として揃える（§10） */
  opacity: 1;
  flex-wrap: nowrap;
}
.ba-media li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 1.02vw, 15px);
  font-weight: 500;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
}
.ba-media li + li { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.ba-media-icon { color: var(--ba-accent-3); flex: 0 0 auto; }
.ba-media-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 17px;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ==========================================================================
   5. キャラクター（中央）
   完成デザイン実測: 頭頂 y≈9.6% / 左 x≈36%。動画プレイヤーより手前。
   ========================================================================== */
.ba-character {
  position: absolute;
  /* 目標実測: 肌の左端 32.1%W / 頭頂 10.1%H / 幅 33.9%W。
     顔が画面中央付近に来て、身体が左コピーと右モニターを繋ぐ位置。 */
  /* 目標ではキャラはモニター左辺に重なるだけで、吹き出しや人物は隠さない。
     顔が画面中央よりやや左に来る位置。 */
  /* 目標ではキャラはモニター左辺に軽く重なるだけで、吹き出しは完全に読める。
     吹き出し「伝えたい想いが、動画で動き出す！」は作品のメッセージそのものなので隠さない。
     実測: 吹き出しの左端は 52%W。キャラの右端がそこに掛からない位置に置く。 */
  left: 25%;
  /* 高さがHeroを超えるため bottom 基準だと頭が上に飛び出す。
     目標は頭頂 10.1%H なので top 基準で固定し、脚を下端で切る。 */
  top: 9%;
  z-index: 4;
  /* 目標ではキャラ幅が33.9%W＝画像比から高さ約1368px必要で、Hero高を大きく超える。
     脚はViewport下端で切れてよい（広告KVとして大胆にトリミングする §1）。
     幅を基準に指定し、高さは画像の縦横比(615:1513)に任せる方が構図が安定する。 */
  width: 34%;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* 薄いオレンジのリムライト。光らせすぎない（§9） */
  filter:
    drop-shadow(0 0 26px rgba(var(--ba-accent-rgb),.22))
    drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

/* ==========================================================================
   6. 動画プレイヤー（右の主役）
   キャラの後ろへ少し入り込ませる。歪ませすぎない。
   ========================================================================== */
.ba-device {
  position: absolute;
  /* 目標実測: 枠の x 50.0%〜98.8% / y 12.6%〜87.2%。右端はViewportぎりぎりまで使う */
  right: -3%;
  top: 14%;
  z-index: 3;
  /* 目標では枠が y12.6%〜87.2% を占める＝高さ約690px。画像比(1366:1009)から幅は約57%W。
     右へ寄せて、キャラが吹き出し（作品のメッセージ）を隠さないようにする。 */
  width: min(56%, 990px);
  /* 素材(1536×1024)の比率で高さを確保する。中の動画レイヤーが absolute なので
     height:auto では潰れる */
  aspect-ratio: 1536 / 1024;
  /* フレーム素材そのものにオレンジ発光が描かれているため、
     旧素材向けの強い drop-shadow は外し、地に馴染ませる程度に留める */
  filter: drop-shadow(0 26px 52px rgba(0,0,0,.6));
  /* スクロール演出で transform を毎フレーム更新する。JS側は --ba-dev-* を書き換え、
     ここで合成する（layout を触らず transform だけで動かす §31） */
  --ba-dev-x: 0px;
  --ba-dev-y: 0px;
  --ba-dev-scale: 1;
  --ba-dev-ry: -6deg;
  --ba-dev-rz: -2.2deg;
  transform:
    translate3d(var(--ba-dev-x), var(--ba-dev-y), 0)
    perspective(1150px)
    rotateY(var(--ba-dev-ry))
    rotateZ(var(--ba-dev-rz))
    scale(var(--ba-dev-scale));
  transform-origin: center center;
}

/* --- 画面レイヤー: フレームの穴に合わせて切り抜く ---
   四隅は素材から実測（画像全体に対する%）:
     左上 17.19,24.41 / 右上 90.04,10.06 / 右下 83.66,84.96 / 左下 7.94,79.98
   clip-path は要素の矩形に対する%なので、フレーム画像と同じ寸法に置けば一致する。 */
.ba-device__screen {
  position: absolute;
  inset: 0;
  z-index: 1;              /* フレーム(2)より下 */
  overflow: hidden;
  background: #000;
  /* --ba-clip: 0=フレームの穴の形 / 1=矩形（フルスクリーン）。
     JSがスクロール進捗でこの値を動かし、四隅が矩形へ開いていく。
     フレームが消えるのと同時に「画面の穴」から「画面そのもの」へ変わる。 */
  --ba-clip: 0;
  -webkit-clip-path: polygon(
    calc(17.19% - 17.19% * var(--ba-clip)) calc(24.41% - 24.41% * var(--ba-clip)),
    calc(90.04% + 9.96% * var(--ba-clip))  calc(10.06% - 10.06% * var(--ba-clip)),
    calc(83.66% + 16.34% * var(--ba-clip)) calc(84.96% + 15.04% * var(--ba-clip)),
    calc(7.94% - 7.94% * var(--ba-clip))   calc(79.98% + 20.02% * var(--ba-clip))
  );
  clip-path: polygon(
    calc(17.19% - 17.19% * var(--ba-clip)) calc(24.41% - 24.41% * var(--ba-clip)),
    calc(90.04% + 9.96% * var(--ba-clip))  calc(10.06% - 10.06% * var(--ba-clip)),
    calc(83.66% + 16.34% * var(--ba-clip)) calc(84.96% + 15.04% * var(--ba-clip)),
    calc(7.94% - 7.94% * var(--ba-clip))   calc(79.98% + 20.02% * var(--ba-clip))
  );
}
/* 画面内に置く動画/ポスターは、切り抜き四辺形を確実に覆うよう全面に敷く。
   YouTubeはタイトル・ロゴ・関連動画を映像の外周に描くため、
   一回り大きく敷いて周辺UIを切り抜きの外へ追い出す。 */
.ba-device__screen > * {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 132%;
  height: 132%;
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
}
.ba-device__poster {
  background-size: cover;
  background-position: center;
  background-color: #0a0a0a;
}
/* ==========================================================================
   スクロール演出（sticky ステージ）
   Hero を画面に貼り付け、直後の .ba-stage でスクロール距離を稼ぐ。
   高さは動画の本数から JS が決める。スクロール自体は奪わない。
   ========================================================================== */
/* ⚠️ sticky が効かない2つの落とし穴を回避している。
   ① 祖先の overflow: 共通CSSの html{overflow-x:hidden} がスクロールコンテナを
      作ってしまい sticky が無効化される。このページだけ clip に変える
      （clip は overflow-x:hidden と同じく横スクロールを止めるが、
       スクロールコンテナを作らないので sticky が生きる）。
   ② スクロール余白: Hero と .ba-stage を1つのラッパーに入れ、その中で貼り付ける。 */
html:has(body.ba-page) { overflow-x: clip; }
/* ⚠️ body 側にも overflow-x:hidden が効いており、これもスクロールコンテナを作る。
      html だけ直しても sticky は効かない（実測で確認）。 */
body.ba-page { overflow-x: clip; }
.ba-scroll-wrap { position: relative; }
/* ⚠️ 登場アニメーション(.ba-anim .ba-device)は transform を animation で設定するため、
   インラインの transform（スクロール演出）より優先されてしまう。
   演出が始まったらアニメーションを外し、transform の主導権を JS 側へ渡す。 */
.ba-hero--sticky .ba-device,
.ba-hero--sticky .ba-copy,
.ba-hero--sticky .ba-character { animation: none !important; }

.ba-hero--sticky {
  position: sticky;
  /* ⚠️ top はヘッダー高ではなく 0。ヘッダーぶんを引くと
     「Hero高 = 可動域」になって留まる余地が無くなり、sticky が効かなく見える。 */
  top: 0;
  height: 100vh;
  min-height: 0;
  /* sticky 時は margin-top を使わない（ラッパー先頭に貼り付ける） */
  margin-top: 0;
  /* sticky の間だけ z-index を上げ、後続セクションの上に載せる */
  z-index: 4;
}
/* ヘッダーぶんの余白はラッパー側で確保し、Hero自身は画面いっぱいに貼る */
.ba-scroll-wrap { padding-top: var(--ba-header-h); }
.ba-stage { position: relative; pointer-events: none; }

/* 演出で毎フレーム動く要素にだけ will-change を付ける（§32） */
.ba-device,
.ba-device__screen,
.ba-device__frame { will-change: transform, opacity, clip-path; }

.ba-device__frame { transition: opacity .12s linear; }
/* フレーム素材はオレンジ発光が焼き込まれている。黒は色相の影響を受けないため、
   hue-rotate で発光だけを黄色へ寄せる（+24°: オレンジ~25°→イエロー~49°） */
.ba-device__frame { filter: hue-rotate(24deg) saturate(1.05); }

/* 動画が画面全体になった状態。フレームの発光を消し、余計な影も外す */
.ba-device__screen.is-full { background: #000; }
/* 映像が画面全体になる瞬間は、デバイスの影も外して"画面そのもの"に見せる */
.ba-hero--sticky .ba-device:has(.is-full) { filter: none; }

/* --- フレーム画像: 画面部分が透過した素材を最前面に --- */
.ba-device__frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 波形装飾（プレイヤー周辺・下部）— 主役にしない */
.ba-wave-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: var(--ba-accent);
}
.ba-wave-deco--player { right: 6vw; top: 13%;  width: min(20vw, 300px); opacity: .5; }
.ba-wave-deco--bottom { left: 42%;  bottom: 8%; width: min(26vw, 380px); opacity: .22; }

/* ==========================================================================
   8. 登場アニメーション（§15: 過剰にしない。初回表示のみ）
   ========================================================================== */
@keyframes ba-fade-up   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ba-fade-char { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } }
@keyframes ba-fade-left { from { opacity: 0; transform: translateX(30px) perspective(1200px) rotateY(-5deg) rotateZ(-2deg); }
                          to   { opacity: 1; transform: perspective(1200px) rotateY(-5deg) rotateZ(-2deg); } }
@keyframes ba-pulse     { 0%,100% { opacity: .5; } 50% { opacity: .24; } }

.ba-anim .ba-copy      { animation: ba-fade-up   .9s cubic-bezier(.22,1,.36,1) both; }
.ba-anim .ba-character { animation: ba-fade-char 1.05s cubic-bezier(.22,1,.36,1) .12s both; }
.ba-anim .ba-device    { animation: ba-fade-left 1.05s cubic-bezier(.22,1,.36,1) .06s both; }
.ba-anim .ba-wave-deco--player { animation: ba-pulse 6.5s ease-in-out 1.4s infinite; }

/* 動きを減らす設定を尊重（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .ba-anim .ba-copy,
  .ba-anim .ba-character,
  .ba-anim .ba-device,
}

/* ==========================================================================
   9. 幅ごとの調整（PC先行。1280pxまでを担保する）
   ========================================================================== */
@media (max-width: 1600px) {
}
@media (max-width: 1440px) {
  .ba-copy      { width: 32%; top: 12%; }
  /* 狭い幅ではキャラを小さく・右へ寄せて、CTAとモニターの居場所を確保する */
  .ba-character { left: 30%; width: 29%; }
  .ba-device    { width: min(52%, 830px); right: 0.5%; top: 12%; }
}
/* 1280px: テキストとキャラが重ならない・CTAが折り返さないことを担保 */
@media (max-width: 1360px) {
  .ba-hero      { min-height: 780px; }
  .ba-copy      { width: 33%; max-width: 440px; top: 11.5%; }
  .ba-lead      { font-size: clamp(28px, 2.6vw, 38px); }
  .ba-character { left: 31%; width: 29%; }
  .ba-device    { width: min(51%, 760px); right: 0.5%; top: 12%; }
 /* 狭い幅では説明を落とし、4列の横並びを維持 */
}

/* ==========================================================================
   10. スマホ・タブレット（〜1024px）
   PCの「左コピー＋中央キャラ＋右モニター」の重なりは幅が足りないので成立しない。
   目標デザインどおり、縦積み＋キャラを右上に重ねる構成へ組み替える。
       コピー（キャラが右に重なる）
         ↓
       動画モニター（中央・全幅）
         ↓
       CTA（横幅いっぱい・縦2本）
         ↓
       媒体表示
         ↓
       VOICE/MUSIC/SFX/MOTION（4列・暗いUI帯）
   文字サイズは clamp()+vw の連続スケールで書き、
   ブレークポイントごとの再定義はしない（鉄則2・#045対策）。
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- ヘッダー: スマホだけ Hero と一体化させる（2026-08-22 指示）---
     PC は他ページと完全共通のまま。スマホは黒背景・コンパクトにして、
     1画面に収まる情報量を増やす。 */
  body.ba-page .bm-header {
    --bm-header-height: 56px;
    background: rgba(5,5,5,.92);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    height: 56px;
  }
  body.ba-page .bm-header-inner { height: 56px; }
  body.ba-page .bm-logo-img { filter: brightness(0) invert(1); height: 30px; }
  /* ハンバーガーの線を白に */
  body.ba-page .bm-hamburger span { background: #fff; }
  /* ロゴ横の「| BIZ ANIME」を出す。PCではナビと衝突するため隠しているが、
     スマホはナビがハンバーガーに収納されるので余白がある */
  body.ba-page .ba-header-brand {
    display: inline-flex;
    position: static;
    transform: none;
    margin-left: 10px;
    padding-left: 11px;
  }
  .ba-header-brand-en { font-size: 14px; letter-spacing: .08em; }
  .ba-header-brand-ja { font-size: 8px; letter-spacing: .18em; margin-top: 2px; }

  .ba-hero {
    height: auto;
    min-height: 0;
    /* ヘッダーが 72px→56px に縮むぶんを合わせる */
    margin-top: 56px;
    padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 6vw, 56px);
    overflow: clip;
  }
  .ba-hero-inner { height: auto; }

  /* --- 背景: 右上のオレンジ光を強め、縦長画面でも締まって見せる --- */
  /* 黒を主体にし、オレンジはキャラ背後と動画まわりだけに絞る */
  .ba-hero-bg::after {
    background:
      radial-gradient(ellipse 62% 26% at 86% 16%, rgba(var(--ba-accent-rgb),.30), transparent 66%),
      radial-gradient(ellipse 76% 20% at 50% 54%, rgba(var(--ba-accent-rgb),.14), transparent 70%),
      linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.93) 100%);
  }
  .ba-hero-vignette { background: radial-gradient(ellipse 90% 62% at 50% 42%, transparent 46%, rgba(0,0,0,.6) 100%); }

  /* --- 縦積みの順序を order で組み替える ---
     HTMLは「コピー(CTA/媒体を内包) → 動画 → キャラ → 機能UI」の順だが、
     スマホでは 見出し・説明 → 動画 → 媒体 → 機能UI と見せたい。
     .ba-copy を display:contents にして子を親のflexへ引き上げ、order で並べ替える。
     （HTMLを書き換えずに順序だけ変えられる。PCの構図には影響しない） */
  .ba-hero-inner {
    display: flex;
    flex-direction: column;
  }
  .ba-copy {
    display: contents;
  }
  /* display:contents で .ba-copy の枠が消えるため、余白と cqw の基準を子へ移す */
  .ba-eyebrow,
  .ba-title,
  .ba-lead,
  .ba-sub {
    margin-left: clamp(18px, 5vw, 32px);
    margin-right: clamp(18px, 5vw, 32px);
  }
  /* 見出し・メインコピー・説明文はキャラの手前に置き、絵に沈まないようにする。
     キャラは z-index:2 なので、これで文字が必ず上に来る。 */
  .ba-eyebrow,
  .ba-title,
  .ba-lead,
  .ba-sub { position: relative; z-index: 5; }
  /* 文字自体は z-index:5 でイラストより前にあり潰れていないが、
     背後に絵が来ると視覚的に読みづらい。字の周囲を暗く落として分離する。
     （右マージンで逃がすと .ba-title の cqw 基準が変わり文字が縮むので使わない） */
  .ba-title,
  .ba-lead {
    text-shadow: 0 2px 16px rgba(5,5,5,.95), 0 0 42px rgba(5,5,5,.9), 0 0 80px rgba(5,5,5,.7);
  }
  .ba-sub {
    /* 説明文はスカートに重なる高さ。影を濃いめにして可読性を確保する */
    text-shadow: 0 1px 12px rgba(5,5,5,.98), 0 0 34px rgba(5,5,5,.92);
  }
  .ba-eyebrow { order: 1; }
  .ba-title   { order: 2; container-type: inline-size; }
  .ba-lead    { order: 3; }
  .ba-sub     { order: 4; }
  .ba-device  { order: 5; }   /* 説明文の直後に動画（最重要） */
  .ba-media   { order: 6; }
  .ba-character { order: 0; } /* absolute なので順序は無関係 */
  .ba-eyebrow {
    font-size: clamp(12px, 3.6vw, 17px);
    gap: 10px;
    margin-bottom: clamp(10px, 2.6vw, 18px);
  }
  .ba-title {
    white-space: nowrap;
    /* ⚠️ cqw はパディングを含む幅を返すため、左右padding(最大32px×2)を引いた
       実際の文字領域で計算する。実測: 100px時の文字幅は copyW の 17.6cqw 相当なので、
       padding を差し引いた上で 16.6cqw（約6%の安全マージン）に収める。 */
    font-size: min(clamp(38px, 13.5vw, 84px), calc((100cqw - clamp(36px, 10vw, 64px)) * 0.194));  /* カタカナ実測499px/100px 基準 */
  }
  .ba-title-ja { letter-spacing: .3em; font-size: clamp(11px, 3.2vw, 15px); }
  .ba-lead {
    font-size: clamp(26px, 8.2vw, 52px);
    line-height: 1.38;
    margin-top: clamp(14px, 4vw, 26px);
  }
  .ba-sub {
    font-size: clamp(13px, 3.7vw, 18px);
    line-height: 1.85;
    margin-top: clamp(10px, 3vw, 18px);
  }

  /* --- キャラクター: コピーの右に重ねる（目標では右上でコピーと重なる） --- */
  .ba-character {
    display: block;
    position: absolute;
    /* 上半分の右側に置き、腰付近で切る（全身は見せない）。
       見出し周辺にだけ重なり、説明文から下には掛からないようにする。 */
    /* リボン・頭頂が「BIZ ANIME」に近づきすぎないよう少し下げる */
    top: clamp(64px, 16vw, 130px);
    left: auto;
    /* 顔が画面右端で切れないよう、はみ出しは最小限にとどめる */
    right: -4%;
    /* 見本では足がほぼ見えないほど大きく寄る。上半身の存在感を出す */
    width: min(62%, 390px);
    height: auto;
    z-index: 2;   /* コピー(z-index:5)より奥。文字を絶対に隠さない */
    pointer-events: none;
    /* 脚を見せないよう、腰の上あたりからフェードして消す
       （画像は縦1513pxの全身。上から約50%＝腰の位置で切る） */
    -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.6) 50%, transparent 60%);
            mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.6) 50%, transparent 60%);
    filter: drop-shadow(0 0 22px rgba(var(--ba-accent-rgb),.24)) drop-shadow(0 16px 34px rgba(0,0,0,.5));
  }

  /* --- 動画モニター: 中央・ほぼ全幅 ---
     ⚠️ transform:none で打ち消してはいけない。スクロール演出のJSは
        CSS変数(--ba-dev-*)を書き、基底ルールの transform で合成している。
        none にすると拡大・正面化が一切効かなくなる（実測でハマった）。
        傾きを浅くしたい場合は変数の初期値の方を上書きする。 */
  .ba-device {
    display: block;
    position: static;
    width: calc(100% - clamp(36px, 10vw, 64px));
    margin: clamp(20px, 5vw, 40px) auto 0;
    --ba-dev-ry: -4deg;    /* スマホは傾きを浅めに（正対まではJSが遷移させる） */
    --ba-dev-rz: -1.2deg;
    filter:
      drop-shadow(0 0 20px rgba(var(--ba-accent-rgb),.4))
      drop-shadow(0 0 52px rgba(var(--ba-accent-rgb),.24))
      drop-shadow(0 18px 36px rgba(0,0,0,.6));
  }

  /* --- CTA: スマホでは出さない（2026-08-22 ユーザー指示）---
     ビジュアルに集中させるため、Hero内のCTA2本を非表示にする。 */
  .ba-cta-row { display: none; }

  /* 追従CTA(.bm-fab)もスマホでは出さない。
     Heroは1画面強の高さしかなくスクロール量が200px程度のため、画面下に固定表示すると
     どの位置で止めても VOICE/MUSIC/SFX/MOTION の文字に重なる（余白では回避できない）。
     連絡手段はヘッダーのハンバーガー内（LINE/電話）とページ下部で確保する。
     ※ /contact と /biz-library も同様にFABを出さない前例あり（js/bm-nav.js） */
  body.ba-page .bm-fab { display: none; }

  /* --- 媒体表示: 4つを等間隔で1行に --- */
  .ba-media {
    justify-content: space-between;
    gap: clamp(6px, 2vw, 14px);
    margin: clamp(16px, 4.4vw, 28px) clamp(18px, 5vw, 32px) 0;
  }
  .ba-media li { font-size: clamp(11px, 3.1vw, 15px); gap: 6px; }
  .ba-media li + li { padding-left: clamp(6px, 2vw, 14px); }
  .ba-media-icon { width: 15px; height: 15px; }


  /* 波形装飾は絶対配置前提なので縦積みでは邪魔になる。背景側の光で代用する */
  .ba-wave-deco { display: none; }

  /* VOICE/MUSIC/SFX/MOTION の4機能カードは 2026-08-29 に完全削除済み */
}

/* 極小幅（〜360px）: 4列の機能UIが潰れるので説明文だけ落として列は維持する */
@media (max-width: 360px) {
}

/* 極小幅（〜340px）: 説明文の行末がスカートに掛かるので、キャラを少し小さくして逃がす */
@media (max-width: 340px) {
  .ba-character { width: 56%; }
}

/* タブレット帯（600〜1024px）: 画面が広くなるとキャラの拡大率が過剰になり、
   顔が右端で切れる。幅を絞って全体を収める。 */
@media (min-width: 600px) and (max-width: 1024px) {
  .ba-character { width: min(46%, 380px); right: -2%; }
  .ba-sub { margin-right: clamp(80px, 26vw, 200px); }
}

/* ==========================================================================
   CASE STUDIES — 制作事例グリッド
   一覧はサムネのみ（iframeを並べない）。細いラインの控えめなカードで、
   映像（サムネ）を主役にする。PC3列 / スマホ2列（1列にはしない §29）。
   ========================================================================== */
.ba-cases {
  position: relative;
  background: #070707;
  padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 48px) clamp(72px, 9vw, 130px);
  border-top: 1px solid rgba(255,255,255,.07);
}
.ba-cases-head {
  max-width: 1280px;
  margin: 0 auto clamp(28px, 4vw, 52px);
}
.ba-cases-eyebrow {
  margin: 0 0 10px;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--ba-accent-3);
}
.ba-cases-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--ba-white);
}
.ba-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* PC: 3列 */
  gap: clamp(14px, 2vw, 28px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.ba-cases-grid li { min-width: 0; }   /* 1fr等分の潰れ防止（鉄則5 / #044） */

.ba-case {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ba-case__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: #101010 center / cover no-repeat;
  background-image: radial-gradient(circle at 50% 45%, rgba(var(--ba-accent-rgb),.12), transparent 62%);
  transition: border-color .25s, transform .25s;
}
.ba-case__play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: rgba(5,5,5,.62);
  border: 1px solid rgba(var(--ba-accent-rgb),.65);
  transition: background .25s, transform .25s;
}
.ba-case:hover .ba-case__thumb,
.ba-case:focus-visible .ba-case__thumb {
  border-color: rgba(var(--ba-accent-rgb),.7);
  transform: translateY(-3px);
}
.ba-case:hover .ba-case__play { background: rgba(var(--ba-accent-rgb),.94); color: var(--ba-on-accent); }
.ba-case:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 3px; border-radius: 12px; }
.ba-case__cat {
  display: block;
  margin: 12px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ba-accent-3);
}
.ba-case__title {
  display: block;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  color: rgba(255,255,255,.94);
  line-height: 1.5;
  word-break: auto-phrase;
}

/* スマホ: 2列（必須 §29。1列にしない） */
@media (max-width: 767px) {
  .ba-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ba-case__play { width: 32px; height: 32px; }
  .ba-case__cat { font-size: 10px; margin-top: 8px; }
  .ba-case__title { font-size: 12.5px; }
}

/* ==========================================================================
   動画モーダル
   開いた時だけプレイヤーを生成し、閉じたら破棄する（JS側 §27）。
   ========================================================================== */
.ba-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;   /* ヘッダー(1000)・追従CTA(9500)より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 40px);
}
.ba-modal[hidden] { display: none; }
.ba-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  cursor: pointer;
}
.ba-modal__dialog {
  position: relative;
  width: min(960px, 100%);
}
.ba-modal__player {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--ba-accent-rgb),.35);
  box-shadow: 0 0 60px rgba(var(--ba-accent-rgb),.18), 0 30px 70px rgba(0,0,0,.7);
}
.ba-modal__player > iframe,
.ba-modal__player > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.ba-modal__title {
  margin: 14px 2px 0;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  color: rgba(255,255,255,.95);
}
.ba-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;              /* タップ44px以上 */
  height: 44px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(5,5,5,.6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.ba-modal__close:hover,
.ba-modal__close:focus-visible { border-color: var(--ba-accent-3); color: var(--ba-accent-3); }
/* モーダル表示中は背面のスクロールを止める（モーダルの標準作法。演出のscroll lockとは別物） */
body.ba-modal-open { overflow: hidden; }

/* ==========================================================================
   スクロール演出のスマホ対応（〜1024px）
   本文が1画面に収まる場合だけ、PCと同じsticky方式を使う。
   収まらない場合は末尾の .ba-hero--flow とJSの実測判定で通常表示に戻す。
   倍率や移動量は基準寸法から動的に計算する。
   ========================================================================== */
@media (max-width: 1024px) {
  /* スマホのヘッダーは56px。sticky中の貼り付き位置と初期余白を合わせる */
  .ba-scroll-wrap { padding-top: 56px; }
  .ba-hero--sticky {
    margin-top: 0;
    height: 100vh;
    height: 100svh;   /* モバイルブラウザのUIバー分を除いた実表示高 */
  }
}

/* ==========================================================================
   音声トグルボタン
   自動再生はブラウザ制約でミュート必須のため、タップ起点で音を出す。
   演出中も見失わないよう Hero 内の右下に固定（sticky中は画面右下に留まる）。
   ========================================================================== */
.ba-audio {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 7;                /* デバイス(3)・コピー(5)より手前 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;               /* タップ44px以上 */
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ba-accent-rgb),.65);
  background: rgba(5,5,5,.72);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, transform .2s;
}
.ba-audio:hover { transform: scale(1.06); border-color: var(--ba-accent-3); }
.ba-audio:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 3px; }
.ba-audio.is-on { background: rgba(var(--ba-accent-rgb),.92); border-color: transparent; color: var(--ba-on-accent); }
/* OFF時はミュートアイコン、ON時はスピーカーアイコンを表示 */
.ba-audio .ba-audio__icon-on  { display: none; }
.ba-audio.is-on .ba-audio__icon-on  { display: block; }
.ba-audio.is-on .ba-audio__icon-off { display: none; }

/* ==========================================================================
   YouTube標準UIの抑制（2026-08-30 指示: タイトルバー/関連動画/ロゴを見せない）
   ========================================================================== */
/* 演出中の動画は触れなくする。クリックで一時停止すると
   YouTube側のタイトル・「その他の動画」が出てしまうため。
   （タイトルバー自体は132%クロップで最初から枠外に追い出してある） */
.ba-device__screen > iframe { pointer-events: none; }

/* モーダルのYouTubeも同様に触れなくし、操作は自前バーに寄せる。
   さらに130%に拡大して切り抜き、冒頭に出るタイトルバー（チャンネルアイコンと
   タイトル＝YouTubeへのリンク）と右下ロゴを最初から表示枠の外に追い出す。
   タイトルバーは高さの約10%なので、上下15%ずつのクロップで確実に隠れる。 */
.ba-modal__player--youtube > iframe {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
}
.ba-modal__player { position: relative; }

/* --- モーダル下部の自前バー --- */
.ba-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}
.ba-modal__bar .ba-modal__title { margin: 0; min-width: 0; }
.ba-modal__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.ba-modal__audio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ba-accent-rgb),.6);
  background: rgba(5,5,5,.7);
  color: #fff;
  cursor: pointer;
}
.ba-modal__audio.is-on { background: rgba(var(--ba-accent-rgb),.92); border-color: transparent; color: var(--ba-on-accent); }
.ba-modal__audio .ba-audio__icon-on { display: none; }
.ba-modal__audio.is-on .ba-audio__icon-on { display: block; }
.ba-modal__audio.is-on .ba-audio__icon-off { display: none; }
.ba-modal__audio:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 3px; }

/* ==========================================================================
   進捗バー（YouTube標準UIの代わりに残す唯一の要素 2026-08-30 指示）
   ========================================================================== */
/* --- モーダル: プレイヤー直下の細いバー。クリックでシーク --- */
.ba-modal__progress {
  height: 4px;
  margin-top: 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.16);
  cursor: pointer;
}
.ba-modal__progress > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ba-accent), var(--ba-accent-2));
  transition: width .25s linear;   /* infoDeliveryは約0.25秒間隔なので繋いで滑らかに */
}
.ba-modal__progress:hover { height: 6px; margin-top: 8px; }  /* YouTube風: ホバーで太く */

/* --- 演出: フルスクリーン時だけ画面下端に出る --- */
.ba-device__progress {
  position: absolute;
  left: 4%;
  right: 4%;
  /* PCは左下に追従CTA(高さ約72px)が固定表示されるため、その上に置く */
  bottom: 84px;
  height: 3px;
  z-index: 3;               /* screen(1) frame(2) より上 */
  border-radius: 3px;
  background: rgba(255,255,255,.18);
  cursor: pointer;
  opacity: 0;               /* 通常は隠す。フルスクリーン時のみ表示 */
  pointer-events: none;
  transition: opacity .3s;
}
.ba-device__progress > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ba-accent), var(--ba-accent-2));
  transition: width .25s linear;
}
/* 画面が矩形に開き切った（=フレームが消えた）ときだけ出す */
.ba-device:has(.ba-device__screen.is-full) .ba-device__progress {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   実績バッジ（WPの「実績」欄。動画の左下に表示 2026-08-30 指示）
   例:「MV 450万インプレッション」「コンテスト最優秀賞」
   ========================================================================== */
/* --- 共通の見た目: 黒地×オレンジの左罫。シネマティックに寄せる --- */
.ba-device__badge,
.ba-modal__badge {
  margin: 0;
  padding: 9px 16px 9px 13px;
  border-left: 3px solid var(--ba-accent-3);
  border-radius: 0 8px 8px 0;
  background: rgba(5,5,5,.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  pointer-events: none;
  max-width: 70%;
}

/* --- 演出: フルスクリーン時のみ左下に（進捗バーの上） --- */
.ba-device__badge {
  position: absolute;
  left: 4%;
  bottom: 102px;   /* 進捗バー(84px)のすぐ上 */
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.ba-device:has(.ba-device__screen.is-full) .ba-device__badge:not([hidden]) {
  opacity: 1;
  transform: none;
}

/* --- モーダル: プレイヤー左下のオーバーレイ --- */
.ba-modal__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;          /* iframe より上 */
}

/* --- 事例カード: サムネ左下の小さなチップ --- */
.ba-case__badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: 70%;
  padding: 4px 9px 4px 7px;
  border-left: 2px solid var(--ba-accent-3);
  border-radius: 0 6px 6px 0;
  background: rgba(5,5,5,.78);
  color: rgba(255,255,255,.95);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.35;
  pointer-events: none;
}
@media (max-width: 767px) {
  .ba-case__badge { font-size: 9px; padding: 3px 7px 3px 6px; }
}
/* スマホは追従CTAを出していないので、バーとバッジは画面下端に寄せる */
@media (max-width: 1024px) {
  .ba-device__progress { bottom: 14px; }
  .ba-device__badge    { bottom: 32px; }
}

/* ==========================================================================
   追加セクション共通（USE CASE / WHY / RANGE / FAQ）2026-08-30
   調整ノブは :root の変数と window.BA_TUNE（JS側）に集約している。
   ========================================================================== */
:root {
  --uc-active-grow: 2;          /* activeパネルのflex-grow（JSが同期） */
  --uc-radius: 14px;
  --why-transition: 340ms;      /* JSが同期 */
  --why-nav-gap: 18px;
  --why-stage-radius: 16px;
  --range-tile-gap: 14px;
  --range-radius: 12px;
  --range-active-scale: 1.02;
  --faq-anim: 220ms;            /* JSが同期 */
  --faq-item-gap: 10px;
  --faq-item-padding: 22px;
  --faq-open-bg: rgba(255,255,255,.04);
  --sec-reveal: 600ms;          /* JSが同期 */
}

.ba-sec {
  position: relative;
  background: #070707;
  padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 48px);
  border-top: 1px solid rgba(255,255,255,.07);
}
.ba-sec-head { max-width: 1280px; margin: 0 auto clamp(28px, 4vw, 48px); }
.ba-sec-eyebrow {
  margin: 0 0 10px;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--ba-accent-3);
}
.ba-sec-title {
  margin: 0 0 14px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--ba-white);
}
.ba-sec-lead {
  margin: 0;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.9;
  color: rgba(255,255,255,.72);
}

/* 出現アニメ（IntersectionObserverで .is-in 付与） */
.ba-sec > * { transition: opacity var(--sec-reveal), transform var(--sec-reveal); }
.ba-sec:not(.is-in) > * { opacity: 0; transform: translateY(22px); }
.ba-sec.is-in > * { opacity: 1; transform: none; }
.ba-faq:not(.is-in) > *, .ba-faq.is-in > * { transition-duration: 320ms; } /* FAQは控えめ */

/* --- 動画ホスト共通: poster背景 + プレビューは135%クロップ（YouTube UIを枠外へ） --- */
.ba-vhost {
  position: relative;
  overflow: hidden;
  background: #0d0d0d center / cover no-repeat;
}
.ba-vhost > .ba-preview-player {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 135%;
  height: 135%;
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

/* --- 小さな現在地ラベル --- */
.ba-now {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(5,5,5,.72);
  border-left: 2px solid var(--ba-accent-3);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.ba-now--idx { left: auto; right: 10px; border-left: 0; border-right: 2px solid var(--ba-accent-3); opacity: 1; }
.is-playing > .ba-now, .ba-vhost.is-playing .ba-now { opacity: 1; }

/* --- ミニCTA共通 --- */
.ba-mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid rgba(var(--ba-accent-rgb),.7);
  background: rgba(var(--ba-accent-rgb),.92);
  color: var(--ba-on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms, background 180ms, border-color 180ms;
}
.ba-mini-cta:hover { transform: translateY(-2px); }
.ba-mini-cta:active { transform: translateY(0); }
.ba-mini-cta:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 3px; }
.ba-mini-cta--ghost { background: rgba(5,5,5,.5); border-color: rgba(255,255,255,.3); color: #fff; }
.ba-mini-cta--ghost:hover { border-color: var(--ba-accent-3); color: var(--ba-accent-3); }

/* ==========================================================================
   USE CASE — 4パネル
   ========================================================================== */
.ba-uc-panels {
  display: flex;
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto;
}
.ba-uc-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--uc-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  transition: flex-grow 340ms cubic-bezier(.3,.8,.3,1), border-color 260ms, box-shadow 260ms;
}
.ba-uc-panel.is-active {
  flex-grow: var(--uc-active-grow);
  border-color: rgba(var(--ba-accent-rgb),.55);
  box-shadow: 0 0 28px rgba(var(--ba-accent-rgb),.14);
}
.ba-uc-hit {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ba-uc-hit:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: -2px; }
.ba-uc-media {
  display: block;
  aspect-ratio: 16 / 10;
  filter: brightness(.82) saturate(.9);
  transition: filter 300ms;
}
.ba-uc-panel.is-active .ba-uc-media { filter: none; }
.ba-uc-panel.is-empty .ba-uc-media {
  background-image: radial-gradient(circle at 50% 40%, rgba(var(--ba-accent-rgb),.14), transparent 70%);
}
.ba-uc-info { display: block; padding: 14px 16px 6px; }
.ba-uc-num { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ba-accent-3); margin-right: 8px; }
.ba-uc-en { display: inline-block; font-size: clamp(12px, 1vw, 14px); font-weight: 700; letter-spacing: .08em; color: #fff; }
.ba-uc-ja { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.6); }
.ba-uc-copy {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  opacity: 0;
  max-height: 0;
  transition: opacity 300ms 80ms, max-height 300ms;
  overflow: hidden;
}
.ba-uc-panel.is-active .ba-uc-copy { opacity: 1; max-height: 4em; }
.ba-uc-ctas {
  display: flex;
  gap: 8px;
  padding: 8px 16px 16px;
  opacity: 0;
  transition: opacity 300ms 120ms;
  pointer-events: none;
}
.ba-uc-panel.is-active .ba-uc-ctas { opacity: 1; pointer-events: auto; }
.ba-uc-stage { display: none; }

/* ==========================================================================
   WHY BIZ ANIME — editorial split
   ========================================================================== */
.ba-why-grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: clamp(24px, 3.5vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.ba-why-nav { display: flex; flex-direction: column; gap: var(--why-nav-gap); }
.ba-why-item {
  position: relative;
  padding: 16px 18px 16px 22px;
  border: 0;
  border-left: 3px solid rgba(255,255,255,.14);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  opacity: .55;
  transition: opacity 260ms, border-color 260ms, background 260ms;
}
.ba-why-item.is-active {
  opacity: 1;
  border-left-color: var(--ba-accent-3);
  background: rgba(255,255,255,.03);
}
.ba-why-item:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 2px; }
.ba-why-num { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ba-accent-3); margin-right: 10px; }
.ba-why-en { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.85); }
.ba-why-title { display: block; margin-top: 8px; font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; color: #fff; line-height: 1.6; }
.ba-why-sub { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.ba-why-stage {
  aspect-ratio: 16 / 9;
  border-radius: var(--why-stage-radius);
  border: 1px solid rgba(255,255,255,.1);
  transition: opacity var(--why-transition);
}
.ba-why-stage.is-swap { opacity: .25; }
.ba-why-alt { display: flex; gap: 10px; margin-top: 12px; }
.ba-why-thumb {
  width: 132px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  padding: 0;
  transition: border-color 200ms, transform 200ms;
}
.ba-why-thumb:hover, .ba-why-thumb:focus-visible { border-color: var(--ba-accent-3); transform: translateY(-2px); }
.ba-why-view { margin-top: 14px; }

/* ==========================================================================
   PRODUCTION RANGE — モニターウォール
   ========================================================================== */
.ba-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto clamp(20px, 3vw, 32px);
}
.ba-chip {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  background: none;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color 180ms, border-color 180ms, background 180ms;
}
.ba-chip.is-on, .ba-chip[aria-pressed="true"] {
  color: #fff;
  border-color: var(--ba-accent-3);
  background: rgba(var(--ba-accent-rgb),.18);
}
.ba-chip:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 3px; }
.ba-range-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 110px;
  grid-auto-flow: dense;
  gap: var(--range-tile-gap);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.ba-range-tile { position: relative; min-width: 0; transition: opacity 300ms, transform 300ms; }
.ba-range-tile.t-w { grid-column: span 2; grid-row: span 2; }
.ba-range-tile.t-t { grid-row: span 2; }
.ba-range-tile.is-dim { opacity: .16; pointer-events: none; }
.ba-range-tile.is-active { transform: scale(var(--range-active-scale)); z-index: 2; }
.ba-range-hit {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--range-radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 240ms, box-shadow 240ms;
}
.ba-range-tile.is-active .ba-range-hit {
  border-color: rgba(var(--ba-accent-rgb),.6);
  box-shadow: 0 0 26px rgba(var(--ba-accent-rgb),.16);
}
.ba-range-hit:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: 2px; }
.ba-range-cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  text-align: left;
  pointer-events: none;
}
.ba-range-cat {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(5,5,5,.72);
  color: var(--ba-accent-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
}
.ba-range-title {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ba-range-view {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  padding: 6px 12px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 220ms;
}
.ba-range-tile.is-active .ba-range-view { opacity: 1; }
.ba-range-view:focus-visible { opacity: 1; }

/* ==========================================================================
   FAQ — quiet editorial accordion
   ========================================================================== */
.ba-faq { background: #0a0a0a; }
.ba-faq-grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1280px;
  margin: 0 auto;
}
.ba-faq-list { display: flex; flex-direction: column; gap: var(--faq-item-gap); }
.ba-faq-item {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.015);
  transition: border-color 220ms, background 220ms;
}
.ba-faq-item.is-open { border-color: rgba(var(--ba-accent-rgb),.45); background: var(--faq-open-bg); }
.ba-faq-q { margin: 0; }
.ba-faq-q button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: var(--faq-item-padding);
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  line-height: 1.6;
}
.ba-faq-q button:focus-visible { outline: 2px solid var(--ba-accent-3); outline-offset: -2px; border-radius: 10px; }
.ba-faq-num { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ba-accent-3); }
.ba-faq-icon { flex: 0 0 auto; margin-left: auto; position: relative; width: 14px; height: 14px; }
.ba-faq-icon::before, .ba-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ba-accent-3);
  transform: translateY(-50%);
  transition: transform var(--faq-anim);
}
.ba-faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.ba-faq-item.is-open .ba-faq-icon::after { transform: translateY(-50%) rotate(0deg); }
.ba-faq-a {
  height: 0;
  overflow: hidden;
  transition: height var(--faq-anim) ease;
}
.ba-faq-a p {
  margin: 0;
  padding: 0 var(--faq-item-padding) var(--faq-item-padding) calc(var(--faq-item-padding) + 26px);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.95;
  color: rgba(255,255,255,.78);
}
.ba-faq-cta { margin-top: 22px; text-align: right; }
.ba-faq-cta__btn { display: inline-flex; }

/* ==========================================================================
   SP（〜1024px）
   ========================================================================== */
@media (max-width: 1024px) {
  /* USE CASE: 2×2セレクタ + 下に大きなステージ */
  .ba-uc-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ba-uc-panel, .ba-uc-panel.is-active { flex: none; }
  .ba-uc-media { aspect-ratio: 16 / 9; }
  .ba-uc-copy, .ba-uc-ctas { display: none; }   /* コピーとCTAはステージ側に集約 */
  .ba-uc-panel .ba-now { display: none; }
  .ba-uc-stage {
    display: block;
    max-width: 1280px;
    margin: 14px auto 0;
  }
  .ba-uc-stage__media { aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid rgba(var(--ba-accent-rgb),.4); }
  .ba-uc-stage__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
  .ba-uc-stage__copy { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.8); line-height: 1.6; }

  /* WHY: 縦積み */
  .ba-why-grid { grid-template-columns: 1fr; }
  .ba-why-nav { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .ba-why-item { flex: 0 0 78%; border-left-width: 3px; }
  .ba-why-thumb { width: 104px; }

  /* RANGE: 2列ベース */
  .ba-range-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 96px; }
  .ba-range-chips { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .ba-chip { flex: 0 0 auto; }
  .ba-range-view { opacity: 1; }   /* タッチではhover非依存: 常時表示 */

  /* FAQ: 1列 */
  .ba-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .ba-faq-cta { text-align: center; }
}

/* ==========================================================================
   reduced motion: 動きを最小化（コンテンツは消さない）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ba-sec > *, .ba-sec:not(.is-in) > * { opacity: 1; transform: none; transition: none; }
  .ba-uc-panel { transition: none; }
  .ba-uc-panel.is-active { flex-grow: 1.3; }   /* 幅変化を小さく */
  .ba-why-stage, .ba-why-stage.is-swap { transition: none; opacity: 1; }
  .ba-range-tile, .ba-range-tile.is-active { transition: none; transform: none; }
  .ba-faq-a { transition: none; }
}

/* ==========================================================================
   タッチ端末のタップ対象を44px以上に（監査で32〜38pxだった。鉄則）
   PCのコンパクトな見た目は維持し、粗いポインタ/SP幅でのみ底上げする
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  .ba-chip {
    min-height: 44px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
  }
  .ba-mini-cta { min-height: 44px; }
  .ba-range-view {
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
  }
  .ba-why-thumb { min-height: 60px; }   /* 16:9のまま十分なタップ面を確保 */
}

.ba-faq-grid > *, .ba-faq-q button > span { min-width: 0; }
.ba-faq-q button { overflow-wrap: anywhere; word-break: normal; }

/* Content, rather than a fixed screen-height breakpoint, determines whether
   the complete hero fits in a sticky viewport. JS measures this natural layout
   after fonts/images load and on resize. Keep clipping for the decorative art. */
.ba-hero.ba-hero--sticky { min-height: 0; }
.ba-hero.ba-hero--flow {
  position: relative;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}
.ba-hero--flow + .ba-stage { display: none; }
@media (min-width: 1025px) {
  .ba-hero--flow .ba-hero-inner {
    height: auto;
    padding-top: 9vh;
    padding-bottom: 32px;
  }
  .ba-hero--flow .ba-copy { position: relative; top: auto; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .ba-hero--flow .ba-hero-inner { padding-top: 12vh; }
}
@media (min-width: 1025px) and (max-width: 1360px) {
  .ba-hero--flow .ba-hero-inner { padding-top: 11.5vh; }
}
@media (max-width: 1024px) {
  .ba-hero--sticky:not(.ba-hero--flow) .ba-hero-inner { height: 100%; }
  /* The audio control must not cover the last media label in natural flow. */
  .ba-hero--flow .ba-audio,
  .ba-hero:not(.ba-hero--sticky) .ba-audio {
    position: relative;
    order: 7;
    align-self: flex-end;
    right: auto;
    bottom: auto;
    margin: 16px clamp(18px, 5vw, 32px) 0;
    flex-shrink: 0;
  }
}