/* TD HERO EXT v6c (Vimeo) — クリック再生・初期は画像・SP=1:1・優先度強化 */
#td-hero{position:relative!important;width:100vw!important;left:50%!important;right:50%!important;margin-left:-50vw!important;margin-right:-50vw!important;max-width:100vw!important;overflow:hidden!important;box-sizing:border-box!important;z-index:0}
#td-hero *{box-sizing:border-box!important}
#td-hero .td-hero__stage{display:block!important;width:100%!important;position:relative!important;z-index:0!important}

/* 動画ラッパー: PC=16:9, SP=1:1 */
#td-hero .td-hero__videoWrap{position:relative!important;width:100%!important;aspect-ratio:16/9!important;background:#000!important;overflow:hidden!important;display:block!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__videoWrap{aspect-ratio:1/1!important}
}
/* aspect-ratio非対応フォールバック */
@supports not (aspect-ratio:16/9){
  #td-hero .td-hero__videoWrap{height:0!important;padding-top:56.25%!important}
  #td-hero .td-hero__videoWrap iframe{position:absolute!important;top:0!important;left:0!important;height:100%!important;width:100%!important}
}
@supports not (aspect-ratio:1/1){
  @media (max-width: 767.98px){
    #td-hero .td-hero__videoWrap{height:0!important;padding-top:100%!important}
    #td-hero .td-hero__videoWrap iframe{position:absolute!important;top:0!important;left:0!important;height:100%!important;width:100%!important}
  }
}

/* Iframe */
#td-hero .td-hero__videoWrap iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;display:block!important;z-index:0!important}

/* 画像：初期表示（画像モード） */
#td-hero .td-hero__image{display:block!important;width:100%!important;line-height:0!important;background:#000!important;position:relative!important;z-index:1!important}
#td-hero .td-hero__image img{display:block!important;width:100vw!important;height:auto!important;max-width:100vw!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__image{aspect-ratio:1/1!important}
  #td-hero .td-hero__image img{width:100%!important;height:100%!important;object-fit:cover!important}
}
@supports not (aspect-ratio:1/1){
  @media (max-width: 767.98px){
    #td-hero .td-hero__image{height:0!important;padding-top:100%!important}
    #td-hero .td-hero__image img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  }
}

/* モード切替 */
#td-hero.td-hero--imageMode .td-hero__image{display:block!important}
#td-hero.td-hero--imageMode .td-hero__videoWrap{display:none!important}
#td-hero:not(.td-hero--imageMode) .td-hero__image{display:none!important}
#td-hero:not(.td-hero--imageMode) .td-hero__videoWrap{display:block!important}

/* コントロール行（常に一番上でクリック可能に） */
#td-hero .td-hero__controls{display:flex!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important;text-align:center!important;margin-top:8px!important;position:relative!important;z-index:5!important;pointer-events:auto!important}
#td-hero .td-hero__btn{display:inline-block!important;font-size:12px!important;padding:6px 10px!important;border:1px solid #ccc!important;border-radius:3px!important;background:#fff!important;color:#333!important;cursor:pointer!important;touch-action:manipulation!important;user-select:none!important}
#td-hero .td-hero__btn:focus-visible{outline:2px solid #0a84ff!important;outline-offset:2px!important}

/* 再生ボタンは画像モードでのみ表示 */
#td-hero .td-hero__play{display:none!important}
#td-hero.td-hero--imageMode .td-hero__play{display:inline-block!important}

/* 音声トグル：SP=下部表示、PC=動画上オーバーレイ */
#td-hero .td-hero__audioCtl{display:none!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__audioCtl{display:inline-block!important}
}
/* PC用オーバーレイ（動画上・右下）。SPでは必ず非表示 */
#td-hero .td-hero__audioOverlay{position:absolute!important;right:8px!important;bottom:8px!important;z-index:6!important;display:inline-block!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__audioOverlay{display:none!important}
}

/* ▼▼ クリック一時停止エリア & 速度変更ボタン ▼▼ */

/* クリック用透明オーバーレイ（動画の上に被せる） */
#td-hero .td-hero__clickOverlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important; /* iframe(0)より上、ボタン(5)より下 */
  cursor: pointer !important;
  background: transparent !important;
}

/* 速度変更ボタンのスタイル（他のボタンと合わせる） */
#td-hero .td-hero__speedCtl {
  min-width: 60px !important;
}

/* スマホでのボタン配置調整 */
@media (max-width: 767.98px){
  #td-hero .td-hero__clickOverlay {
    /* スマホでコントローラーを邪魔しないように調整 */
    bottom: 40px !important; 
    height: auto !important;
  }
}

/* ▼▼ PCのみ横幅を80%にして中央寄せ ▼▼ */
@media (min-width: 768px) {
  /* 親枠：画面幅の80%にする */
  #td-hero {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: -40vw !important;
    margin-right: -40vw !important;
  }

  /* 画像：親枠に合わせて100%にする（元の100vw設定を打ち消す） */
  #td-hero .td-hero__image img {
    width: 100% !important;
    max-width: 100% !important;
  }
}