/*! Plac/*! Place your custom styles here */

.bar .logo {
  top: 0;
  max-height: 6em;
}

/* タブレット */
@media (max-width: 1024px) {
  .bar {
    padding: 0;
  }
  .bar .logo {
    top: 4px;
    max-height: 2.2em;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .bar .logo {
    max-height: 3.0em;
  }
}

/* ===== 通常ページのヘッダー高さ ===== */
section.cover.imagebg:not(.video-bg){
    height: 60vh;
    min-height: 400px;   /* ← Stack推奨の安定値 */
}



.cover.imagebg {
  display: flex;
  align-items: center;      /* ← 縦中央 */
  justify-content: center;  /* ← 横中央（不要なら削除OK） */
}

.cover.imagebg .container {
  position: relative;
  top: auto;
  transform: none;
}


/* Hero動画背景 */
.video-bg .background-image-holder {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* もともとのimgは非表示にしたい場合（imgを残してる時だけ） */
/* .video-bg .background-image-holder img { display: none !important; } */

.video-bg .bg-video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* overlayが効くように */
.video-bg.imagebg:before{
  z-index: 2;
}

/* 文字などコンテンツを動画より前に */
.video-bg .container,
.video-bg .pos-vertical-center{
  position: relative;
  z-index: 3;
}

/* 動画自体は一番後ろ */
.video-bg .background-image-holder{
  z-index: 1;
}

/* スマホだけヒーローを画面いっぱい */
@media (max-width: 768px){

  .video-bg.cover{
    height: 100vh;        /* 画面の高さいっぱい */
    min-height: 100vh;
  }

}

@media (max-width: 768px){

  .video-bg.cover{
    height: 100svh;
    min-height: 100svh;
  }

}

/*! Place your custom styles here */e your custom styles here */