/* =========================================================
 * Nephilim Hero
 * ========================================================= */

.nephilim-hero{
  width: 100%;
}

/* HEROメディアラッパー
 * - line-height: 0 は video 下の余白対策
 * - overflow: hidden で object-fit 時のはみ出し防止
 */
.nephilim-hero-media{
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

/* HERO動画本体
 * - vh 基準で画面に追従
 * - min/max で極端な環境差を吸収
 */
.nephilim-hero-video{
  display: block;
  width: 100%;
  height: 56vh;

  min-height: 280px;   /* 小型端末でも潰れない保険 */
  max-height: 720px;   /* 大画面で伸びすぎない制御 */

  object-fit: cover;
}
/* =========================================
   Responsive (SP) - HERO（no-crop / contain, centered）
   ====================================== */
@media (max-width: 768px){

  .nephilim-hero-media{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    aspect-ratio: 16 / 9;
    max-height: 68vh;

    overflow: hidden;
    border-radius: 0;

    background: rgba(0,0,0,0.55);

    /* ★追加：上下左右の余白を均等にする */
    display: flex;
    align-items: center;      /* 縦方向中央 */
    justify-content: center;  /* 横方向中央 */
  }

  .nephilim-hero-media video{
    display: block;

    /* ★重要：containで“切らない” */
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* 念のため：中央に */
    object-position: center center;
  }
}