/* =============================================================
   メインビジュアル右側プロモ（IP活用）
   - 応援バナー（川崎ブレイブサンダース）   … エンジ #8f0038
   - YouTube 動画カード（わたしたちのシゴト）… 紺   #092c38
   Figma: IP利用_オリ建リース Frame 4(応援) / Frame 1(動画) / Frame 5(SP)
   ============================================================= */

/* ---- ヒーロー内の配置コンテナ ----
   .hero_wrap(relative) / .hero_wrap_inner(absolute; top:0; height:100%; z-index:100)
   はテーマ本体(style.css)が既に指定済み。ここで position を上書きすると
   オーバーレイが解除され、内側コンテンツ（見出し＋プロモ）が MV 下に脱落するため触らない。 */

.hero_promo {
  position: absolute;
  z-index: 5;
  right: 47px;          /* コンプ実測（赤枠右端 x1393 / 余白47px）に一致 */
  top: 84px;            /* ヘッダー直下にトップ寄せ（中央寄せだと縦に間延びするため） */
  width: 325px;         /* コンプ実測（赤枠幅 325px）に一致 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =============================================================
   応援バナー
   ============================================================= */
.bt_support { width: 100%; }

.bt_support__link {
  position: relative;
  display: block;
  /* キャラクター枠(__character)とロゴ枠(__logo)の背景を透明化（MVを透過表示）。
     白塗りはこのリンク要素が担っていたため、ここを透明にする。
     帯(__band #8f0038)と外部リンク(__extlink #8f0038)は各自の背景を持つため影響なし。 */
  background: transparent;
  border: 3px solid #8f0038;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bt_support__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.bt_support__extlink {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #8f0038;
  border-radius: 4px;
}
.bt_support__extlink img { width: 14px; height: 14px; display: block; filter: brightness(0) invert(1); }
.bt_support__character { display: block; padding: 12px 18px 2px; }
/* 縦長アセット(871×1192)。高い画面ではコンプ通り枠いっぱい(=幅325時の塗り高 395px)まで使い、
   低い画面では viewport 高さに連動して自動縮小しMVはみ出しを防ぐ。
   395px = (325 - 左右padding36) × 1192/871。calc の引き算はヘッダー/ロゴ/帯/カード分の確保。 */
.bt_support__character img { width: auto; max-width: 100%; max-height: min(395px, calc(100vh - 505px)); height: auto; display: block; margin: 0 auto; }
.bt_support__logo { position: relative; display: block; padding: 0 16px 20px; }
/* ロゴ svg は viewBox をロゴ本体(雷エンブレム＋KAWASAKI BRAVE THUNDERS)に
   トリミング済み。等倍で全体を表示する（cover 切り出しは廃止。エンブレム上端の
   見切れ防止）。 */
.bt_support__logo img { width: 100%; height: auto; display: block; }
.bt_support__band { display: block; background: #8f0038; padding: 9px 10px 8px; text-align: center; }
.bt_support__text {
  display: block; color: #fff; font-size: 12px; line-height: 1.4;
  letter-spacing: .01em; font-weight: 700; white-space: nowrap;
}
/* コピーライトはロゴの右下隅へ。背景透明化でMV(写真)に重なるため白文字に。
   写真の明部でも視認できるよう薄い影を付ける。 */
.bt_support__credit {
  position: absolute; right: 16px; bottom: 5px;
  color: #fff; font-size: 8px;
  letter-spacing: .06em; opacity: .9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* =============================================================
   YouTube 動画カード
   ============================================================= */
.mov_card { width: 100%; }

.mov_card__link {
  position: relative;
  display: block;
  background: #fff;
  border: 3px solid #092c38;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.mov_card__link:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }

.mov_card__thumb { position: relative; display: block; line-height: 0; }
.mov_card__thumb-img { width: 100%; height: auto; display: block; }
.mov_card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

/* 「わたしたちのシゴト」ピル */
.mov_card__pill {
  position: absolute;
  top: 8px; left: 16px;
  display: inline-block;
  background: #092c38;
  color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: .08em;
  padding: 6px 16px;
  border-radius: 36px;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(0, 0, 0, .2);
}
/* 外部リンクアイコン */
.mov_card__extlink {
  position: absolute;
  top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #fff; border-radius: 4px;
}
.mov_card__extlink img { width: 13px; height: 13px; display: block; }

/* 下帯のマーキー（ORIKEN LEASE ANIMATION） */
.mov_card__band {
  display: block;
  border-top: 3px solid #092c38;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
}
.mov_card__marquee {
  display: inline-block;
  color: #092c38;
  font-family: "DM Sans", sans-serif;
  font-size: 22px; font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  padding-left: 100%;
  animation: movCardMarquee 14s linear infinite;
}
@keyframes movCardMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* =============================================================
   Scroll for contents（デザイン準拠で左下へ）
   テーマ既定は右下（right:20px / text-align:right）。コンテンツ枠 .txt_wrap
   を基準に左端へ反転する。矢印(.bar)も左側へ。
   ============================================================= */
.scroll_bar_wrap { right: auto; left: 20px; text-align: left; }
.scroll_bar_wrap .txt { text-align: left; }
.scroll_bar_wrap .bar { right: auto; left: 5px; }

/* =============================================================
   中間幅（タブレット〜小型デスクトップ）の被り解消
   769〜984px の desktop レイアウトで見出しブロックとプロモが水平に被るため、
   見出し・サブテキスト・バナーを「連動して」段階的に縮小しバランスを保つ。
   ≤768px は SP 専用ルール（見出し 7.2vw / プロモ 142px）を維持するため min-width:769。
   ============================================================= */
@media (min-width: 769px) and (max-width: 992px) {
  .hero_wrap_inner .txt_wrap_inner .ttl { font-size: 44px; }
  .hero_wrap_inner .txt_wrap_inner .txt { font-size: 14px; }
  .hero_promo { width: 240px; }
}
@media (min-width: 769px) and (max-width: 860px) {
  .hero_wrap_inner .txt_wrap_inner .ttl { font-size: 38px; }
  .hero_wrap_inner .txt_wrap_inner .txt { font-size: 13px; }
  .hero_promo { width: 200px; }
}

/* =============================================================
   SP（Figma Frame 5 相当のミニ表示）
   ============================================================= */
@media (max-width: 767px) {
  /* SP（コンプ Frame 5）: 応援バナーは右上に小さく、動画カードは下部・中央に小さめで分離配置。
     hero_promo を MV 全面の透明コンテナにし、子要素をそれぞれ絶対配置する。
     小型端末(SE 375x667)でもキャッチコピー帯（縦中央配置）と被らない高さに抑える。 */
  .hero_promo { position: absolute; inset: 0; width: auto; display: block; }

  /* 応援バナー（右上）。コンプの画面比率に寄せて width を拡大しつつ、character 高さを
     画面高さ連動にして、高い端末では大きく・低い端末では自動縮小し見出しと被らせない。
     top:76 はヘッダー（ハンバーガー枠 y15-65）の下端をかわす位置。
     高さ calc/cap を 16px 詰めてバナー下端を据え置き、見出しとの余白も維持。 */
  .bt_support { position: absolute; top: 76px; right: 12px; width: 200px; }   /* 応援テキストを1行に収めるため幅拡大（1行必要幅182px+枠14px） */
  .bt_support__link { border-width: 2px; }
  .bt_support__character { padding: 8px 10px 2px; }
  /* character 高さは実表示領域(small viewport)基準にする。iOS Safari の vh は
     アドレスバーを畳んだ最大高さで過大評価され、実表示中央のキャッチコピーに被るため、
     キャッチコピー(height:100%=実表示基準)と揃う svh を使う。vh 版は未対応ブラウザ用の
     フォールバック。減算定数は 284→300 に増やし実機での安全余白を確保。 */
  /* キャラ＋ロゴの合計高さ S = min(212px, 50svh-258px) を保ったまま（＝バナー下端は
     検証済み位置に固定＝被り悪化し得ない）、配分をキャラ:ロゴ=R:1 で決める。
     ロゴのマークが視認できるよう R=3.85→2.8 に変更（ロゴを約+28%拡大、キャラは約-7%）。
       キャラ = S×R/(R+1) = S×0.737 → min(156px, 36.8svh-190px)
       ロゴ   = S/(R+1)   = S×0.263 → min(56px, 13.2svh-68px) */
  .bt_support__character img { max-height: min(156px, calc(36.8vh - 190px)); }   /* fallback（svh 非対応） */
  .bt_support__character img { max-height: min(156px, calc(36.8svh - 190px)); }  /* 本命：実表示基準でキャッチコピーと非干渉 */
  .bt_support__logo { padding: 0 11px 12px; }   /* 下余白を確保し ©KBT をロゴ画像の下へ逃がす */
  /* ロゴ高＝キャラ:ロゴ=2.8:1 になるよう合計Sから配分（キャラが縮めばロゴも連動＝1ユニット拡縮）。
     マーク視認性優先で比率をコンプ3.85より下げてロゴを大きめに。width:auto＋margin:0 auto で
     ロゴをキャラと同じく中央寄せ。©KBT は右下のまま(右端)。 */
  .bt_support__logo img { height: min(56px, calc(13.2vh - 68px)); width: auto; max-width: 100%; margin: 0 auto; }   /* fallback（svh 非対応） */
  .bt_support__logo img { height: min(56px, calc(13.2svh - 68px)); width: auto; max-width: 100%; margin: 0 auto; }  /* 本命：合計S固定でロゴ寄り配分・中央寄せ */
  .bt_support__extlink { width: 16px; height: 16px; top: 5px; right: 5px; }
  .bt_support__extlink img { width: 9px; height: 9px; }
  .bt_support__band { padding: 5px 5px 4px; }
  /* 枠を width200 に広げ、応援テキストは base の nowrap を継承して1行表示にする */
  .bt_support__text { font-size: 8px; letter-spacing: 0; }
  .bt_support__credit { right: 11px; bottom: 3px; font-size: 5px; }

  /* 動画カード（小さめ・中央揃え・下部） */
  .mov_card { position: absolute; left: 0; right: 0; bottom: 30px; width: 236px; margin: 0 auto; }
  .mov_card__link { border-width: 2px; }
  .mov_card__play { width: 42px; }
  .mov_card__pill { font-size: 10px; padding: 4px 11px; top: 7px; left: 8px; letter-spacing: .04em; }
  .mov_card__extlink { width: 18px; height: 18px; top: 7px; right: 7px; }
  .mov_card__extlink img { width: 10px; height: 10px; }
  .mov_card__band { border-top-width: 2px; padding: 5px 0; }
  .mov_card__marquee { font-size: 14px; }

  /* コンプSPは下部を動画カードが占めるためスクロール表示は隠す */
  .scroll_bar_wrap { display: none; }
}