@charset "UTF-8";

@media (min-width: 1261px){

.MainVisual {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 2560px;
  height: 100vh;
  text-align: center;
  background-image: url(../img/main_visual2.jpg);
  animation: bg-color 1s 3;
  -webkit-animation: bg-color 1s 3;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes bg-color {
  0% { background-image: url(../img/main_visual2.jpg); }
  10% { background-image: url(../img/main_visual.jpg); }
  100% { background-image: url(../img/main_visual2.jpg); }
}
@keyframes bg-color {
  0% { background-image: url(../img/main_visual2.jpg); }
  10% { background-image: url(../img/main_visual.jpg); }
  100% { background-image: url(../img/main_visual2.jpg); }
}
}

@media (min-width: 641px) and (max-width: 1260px){
.MainVisual {
  background-image: url(../img/main_visual_md.jpg);
  background-position: 38%;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 2560px;
  height: 100vh;
  text-align: center;
  animation: bg-color 1s 3;
  -webkit-animation: bg-color 1s 3;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes bg-color {
  0% { background-image: url(../img/main_visual2_md.jpg); }
  10% { background-image: url(../img/main_visual_md.jpg); }
  100% { background-image: url(../img/main_visual2_md.jpg); }
}
@keyframes bg-color {
  0% { background-image: url(../img/main_visual2_md.jpg); }
  10% { background-image: url(../img/main_visual_md.jpg); }
  100% { background-image: url(../img/main_visual2_md.jpg); }
}
}

@media (max-width: 640px) {
.MainVisual {
  background-image: url(../img/main_visual2_sp.jpg);
	background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 2560px;
  height: 100vh;
  text-align: center;
	animation: bg-color 1s 3;
  -webkit-animation: bg-color 1s 3;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes bg-color {
	0% { background-image: url(../img/main_visual2_sp.jpg); }
  10% { background-image: url(../img/main_visual_sp.jpg); }
  100% { background-image: url(../img/main_visual2_sp.jpg); }
}
@keyframes bg-color {
	0% { background-image: url(../img/main_visual2_sp.jpg); }
  10% { background-image: url(../img/main_visual_sp.jpg); }
  100% { background-image: url(../img/main_visual2_sp.jpg); }
}
}



#opv-wrap {
  display: none;
}
video#opv {
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  vertical-align: bottom;
}
@media (min-width: 1261px){
#MainVisualBox {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 2560px;
  height: 100vh;
  text-align: center;
  background-image: url(../img/main_visual2.jpg);
  position: relative;
  z-index: -1;
}
}

@media (min-width: 641px) and (max-width: 1260px){
#MainVisualBox {
  background-position: 38%;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 2560px;
  height: 100vh;
  text-align: center;
  background-image: url(../img/main_visual2_md.jpg);
  position: relative;
  z-index: -1;
}
}

@media (max-width: 640px) {
	#MainVisualBox {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 2560px;
  height: 100vh;
  text-align: center;
  background-image: url("../img/main_visual2_sp.jpg");
  position: relative;
  z-index: -1;
}
}

#mv {
  width: 100%;
  height: 100vh;
  max-width: 2560px;
}

@media (max-width: 640px) {
	video#opv{
		left: -400px!important;
		width: 170vw!important;
		height: 80vh!important;
	}
}