@charset "UTF-8";

/*-------------------MV内ボタン追加------------------------*/
#mv_outer .btn_wrap{
    margin: 15px 0 0 0;
    pointer-events: auto;
}

#mv_outer .btn_wrap a.btn{
    color: #fff;
    border: 3px solid #fff;
    padding: 6px 15px 6px;
    text-decoration: none;
    transition: opacity .3s;
    margin: 0 20px;
}

@media screen and (max-width:400px){
    #mv_outer .btn_wrap a.btn{
      margin: 0 3px;
    }
    #mv_outer #mv .mv_text div p.static {
       font-size: 1.5rem;
    }
}

#mv_outer .btn_wrap a.btn:hover{
    opacity:0.7;
}

@media screen and (max-width: 900px){
  #mv:before {
    bottom: 40%;
  }
}
@media screen and (max-width: 650px){
  #mv:before {
    bottom: 43vh;
  }
}

#mv:before {
    bottom: 40%;
}

/*-------------------MV最後だけ非表示に------------------------*/
#mv_outer .mv_text,
#mv:before {
  transition: opacity 1s ease-in-out;
  opacity: 0;
  animation: mv_text_loop 15s linear infinite;
}

@keyframes mv_text_loop {
  0%, 80%, 100% {
    opacity: 0;
  }
  5%, 75% {
    opacity: 1;
  }
}

/*-------------------MV調整------------------------*/
#mv {
    min-height: 380px!important;
}
#mv:before {
    bottom: calc(20% + 120px);
}
#mv .mv_text {
    z-index: 20;
}
@media screen and (max-width: calc(125vh)) {
#mv.mv_mp4_cover {
    height: calc(100vw / (5/4)) !important;
    min-height: 380px!important;
}
}
@media screen and (max-width: 900px) {
#mv .mv_scroll a:before {
    display: none;
}
}
@media screen and (max-width: 650px) {
#mv {
    min-height: 340px!important;
}
#mv.mv_mp4_cover {
    min-height: 340px!important;
}
#mv .mv_text {
    height: auto;
}
#mv:before {
    bottom: calc(20% + 100px + 6vw);
}
}