@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;
  }

  #mv>div { width: 67vw; }

}

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

  /*#header_mv {height: 64.5vh;}*/
  #header_mv>div{
    width: 67vw;
    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 (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;
  }
  #header_mv .video-container {height: 55vh;}

  #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;
  }

}

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

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

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

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

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

  #header_mv .video-container {
    height: 51vh;
    border-radius: 60px;
  }

  video {
    min-height: 46vh;
  }

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

}

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