/* brand-movie.html 専用：既存の部品で足りない分だけ */

/* ページの頭：英字が長いので小さめに。リードの一行目（題）を大きく */
.ph.long .ph-en{font-size:clamp(44px,8cqw,160px)}
.ph-lead b{display:block;color:#fff;font-size:1.35em;font-weight:900;line-height:1.5}

/* 見出しの下の空き */
.bm-head{margin-bottom:clamp(40px,4.5vw,80px)}
.bm-head .lead{margin-top:clamp(16px,1.6vw,28px)}

/* 2. 結論の図：月1本の映像 → 3つの使い道 */
.bm-hub{display:grid;gap:0;align-items:center}
.bm-src{
  display:flex;align-items:center;justify-content:center;min-height:clamp(120px,11vw,200px);padding:24px;
  background:var(--ink);color:#fff;font-size:clamp(22px,2.2vw,40px);font-weight:900;line-height:1.4;text-align:center;
}
.bm-arrow{position:relative;height:48px}
.bm-arrow::before{content:"";position:absolute;left:50%;top:0;bottom:12px;width:4px;margin-left:-2px;background:var(--accent)}
.bm-arrow::after{content:"";position:absolute;left:50%;bottom:0;margin-left:-12px;border:12px solid transparent;border-bottom:0;border-top:14px solid var(--accent)}
.bm-out{display:grid;gap:12px}
.bm-out li{
  display:flex;align-items:center;justify-content:center;min-height:72px;padding:16px 20px;
  border:2px solid var(--ink);border-top:6px solid var(--accent);background:#fff;
  color:var(--ink);font-size:clamp(18px,1.5vw,26px);font-weight:900;line-height:1.4;text-align:center;
}
@media (min-width:1024px){
  .bm-hub{grid-template-columns:minmax(0,4fr) clamp(56px,6vw,120px) minmax(0,5fr)}
  .bm-src{min-height:100%}
  .bm-arrow{height:auto;align-self:stretch}
  .bm-arrow::before{left:0;right:14px;top:50%;bottom:auto;width:auto;height:4px;margin:-2px 0 0}
  .bm-arrow::after{left:auto;right:0;top:50%;bottom:auto;margin:-12px 0 0;border:12px solid transparent;border-right:0;border-left:14px solid var(--accent)}
  .bm-out{gap:16px}
  .bm-out li{justify-content:flex-start;min-height:88px;padding-inline:32px}
}

/* 3. 業種の札：誰に・何を */
.bm-ind dl{margin-top:12px;display:grid;gap:6px}
.bm-ind dt{display:inline-block;justify-self:start;padding:3px 10px 2px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;line-height:1.5}
.bm-ind dd{color:var(--slate);line-height:1.7}
.bm-ind dd+dt{margin-top:8px}

/* 5. 積み上げの図：1本＝1マス */
.bm-stack-wrap{display:grid;gap:clamp(40px,5vw,96px);align-items:end}
.bm-stack-wrap .lead{max-width:30em}
.bm-stack{--c:clamp(7px,.62vw,11px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,40px);align-items:end}
.bm-stack li{display:flex;flex-direction:column;align-items:stretch}
.bm-stack .bar{
  height:calc(var(--n) * var(--c));
  background:repeating-linear-gradient(to top,var(--accent) 0 calc(var(--c) - 2px),transparent calc(var(--c) - 2px) var(--c));
}
.bm-stack .num{margin-bottom:10px;font-family:var(--en);font-weight:900;font-size:clamp(36px,3.6vw,72px);line-height:1;letter-spacing:-.03em;color:#fff}
.bm-stack .num small{margin-left:.15em;font-family:var(--jp);font-size:.36em;font-weight:900;letter-spacing:0}
.bm-stack .yr{margin-top:12px;padding-top:10px;border-top:2px solid var(--line-dark);color:var(--on-dark);font-size:14px;font-weight:700}
@media (min-width:1024px){
  .bm-stack-wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}

/* 6. TVer広告：注記とリンク */
.bm-tver .src{margin-top:12px;font-size:13px;color:var(--slate)}
.bm-tver .tlink{margin-top:clamp(24px,2.4vw,40px)}

/* 8. PR動画の置き場（見本では仮の枠） */
.bm-movie{position:relative;aspect-ratio:16/9;max-width:1280px;background:#000;border:2px dashed var(--line-dark)}
.bm-movie p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--on-dark);font-size:14px}

/* 10. お問い合わせ：ボタンを2つ並べる */
.bm-btns{display:flex;flex-wrap:wrap;gap:16px}
.bm-btns .btn-line{height:clamp(64px,5vw,88px);padding:0 clamp(28px,3vw,48px);font-size:clamp(16px,1.3vw,22px);font-weight:900;background:none;border-color:#fff;color:#fff}
.bm-btns .btn-line:hover{background:#fff;color:var(--ink)}
@media (max-width:639.98px){ .bm-btns .btn{width:100%} }

/* 8. PR動画 */
.bm-movie{max-width:1040px;margin-inline:auto;aspect-ratio:16/9;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.bm-movie video{display:block;width:100%;height:100%;object-fit:cover}
.bm-movie-note{max-width:1040px;margin:14px auto 0;color:rgba(255,255,255,.7);font-size:13px;text-align:right}
.bm-movie-lead{max-width:none}
.bm-movie-lead span{display:block}
.bm-movie-lead span.nb{display:inline}