@charset "utf-8";
/* CSS Document */

.video-container {
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video-wrap {
  width: 100%;
  /*背景色を横幅いっぱいに広げる*/
  text-align: center;
  margin: auto;
  /*ここで動画の周りの余白を調整*/
  background: #ffffff;
  /*余白の背景色*/
}

video {
  width: 100%;
  min-width: 100%;
  min-height: 80.5vh;
  object-fit: cover;
  border-radius: 50px 0px 0px 50px;
}

.p_sp{display: none;}


@media screen and (max-width: 1400px) {

  video {min-height: 70vh;}

  #header_mv .video-container {height: 70vh;}

  /*#header_mv ul {
    margin: 0px 4%;
    padding-top: 80px;
  }*/

  #header_link .mv_ttl {
    font-size: 22px;
    line-height: 2;
    white-space: nowrap;
  }

  #mv>div { width: 67vw; }

}

@media screen and (max-width: 1250px) {

  /*#header_mv {height: 64.5vh;}*/
  #header_mv>div{
    width: 75vw;
    border-radius: 40px 0 0 40px;
  }
  /*#header_mv ul{padding-top: 50px;}*/
  #header_link .mv_ttl{margin-bottom: 17%;}

  #header_mv .video-container {height: 64vh;}
  /*.video-wrap {height: 64vh;}*/
  video {min-height: 67vh;}

}

@media screen and (min-height: 1000px) {

  /* 高さ1000pxを超える場合 */
  #header_mv { height: 66.5vh; }

  #header_mv .video-container { height: 65vh; }

  video { min-height: 65vh; }


}



/* ↓縦向きの場合のスタイル↓ */
@media screen and (orientation: portrait) {

  #header_mv {
    display: block;
    height: auto;
  }
  #header_mv .video-container {
    height: 51vh;
    /*width: 90%;
    margin: 0 auto;*/
    border-radius: 60px;

  }
  /*.video-wrap {
    width: 100%;
    height: 52vh;
  }*/
  video { min-height: 46vh; }

  #header_mv .mv_ttl {
    font-size: 30px;
    margin-bottom: 5%;
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
  }
  
  /* Add left margin for navigation menu spacing - desktop */
  #header_mv ul {
    margin-left: 60px !important;
    padding-left: 20px !important;
  }
  
  /* Ensure no wrapping for mv_ttl elements - all screen sizes */
  .mv_ttl.eng {
    white-space: nowrap !important;
    overflow: visible !important;
    display: block !important;
    width: auto !important;
  }
  
  /* Additional targeting for the specific text */
  li.mv_ttl.eng {
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
  }

}

@media screen and (orientation: portrait) and (max-width: 700px) {
  #header_mv .video-container {height: 42vh;}
  video {min-height: 42vh;}
}

@media screen and (max-width: 1000px) {


  #header_mv {padding-top: 0;}

  article {padding-top: 103px;}

  #mv {
    display: block;
    height: auto;
  }

  video {min-height: 52vh;}

  .video-wrap {
    width: 100%;
    height: 52vh;
  }
  #mv .video-container {height: 52vh;}

  #mv>div {
    width: 100%;
    border-radius: 60px;
    margin: 0 auto;
    /*height: 68vh;*/
    height: 55vh;
  }

  #header_mv>div {
    width: 97%;
    border-radius: 30px 0 0 30px;
  }

  #mv ul {padding-top: 60px;}

  #mv .mv_ttl {
    font-size: 30px;
    margin-bottom: 5%;
  }

  .p_sp {
    display: block;
    width: 90%;
    margin: 0 auto;
    font-size: 26px;
    margin-top: 30px;
    color: #512701;
  }
  
  /* Fix text wrapping and spacing for responsive screens */
  .mv_ttl.eng {
    white-space: nowrap !important;
  }
  
  #header_mv ul {
    margin-left: 30px !important;
  }

}

@media screen and (max-width: 700px) {

  #mv>div{height: 42vh;}
  video {min-height: 42vh;}

  .p_sp {margin: 30px auto 60px;}

}

/* Final override rules for text wrapping and spacing issues */
#header_mv ul, #header_link ul {
  margin-left: 60px !important;
  padding-left: 20px !important;
}

/* Ultra-specific targeting for dynamically loaded content */
[data-template="header_mv"] li.mv_ttl.eng,
#header_mv ul li.mv_ttl.eng,
#header_mv li.mv_ttl.eng,
li.mv_ttl.eng,
.mv_ttl.eng {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: none !important;
  overflow: visible !important;
  word-break: keep-all !important;
  word-wrap: normal !important;
  text-overflow: visible !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* Ensure template container doesn't constrain width */
[data-template="header_mv"],
[data-template="header_mv"] ul {
  width: auto !important;
  min-width: 300px !important;
}

/* Additional rule to handle post-load styling */
body li.mv_ttl.eng {
  white-space: nowrap !important;
  display: inline-block !important;
  width: auto !important;
}

/* Force re-render after template load */
[data-template="header_mv"]:not(:empty) li.mv_ttl.eng {
  white-space: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
}

/* Force container to accommodate the text */
#header_mv ul,
#header_mv > div ul {
  width: auto !important;
  min-width: 400px !important;
}