/*********************
ズームしながらフェードインするCSS
*********************/
#main-visual {
  width: 100%;
  overflow: hidden;
  /*heightはzoom_in.jsで指定*/
}
.zoom-container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: visible;
}
.zoom-wrapper {
  position: relative;
  height: 100%;
}
.zoom-slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;
  -webkit-transition: all 6s ease-out;
  -moz-transition: all 6s ease-out;
  -ms-transition: all 6s ease-out;
  transition: all 6s ease-out;
  /*ズームインの場合はこちら
  transform: scale(1);*/
  /*ズームアウトの場合はこちら*/
  transform: scale(1.1);
}

/*ズームインの場合はこちら
.zoom-slide.zoom{
  transform: scale(1.1);
}*/
/*ズームアウトの場合はこちら*/
.zoom-slide.zoom {
  transform: scale(1);
}
.zoom-slide.show {
  opacity: 1;
}

@media screen and (max-width: 500px) {
  /* #main-visual.main_fadein {
    height: 400px !important;
  } */

  .zoom-slide {
    background-size: contain;
    background-color: initial !important;
  }
}