@charset "UTF-8";
/* CSS Document */
.hero__container {
  max-width: 1000px;
  padding: 5rem 0;
  position: relative;
  width: 100%;
  height: 130vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  background-color: var(--white);
  overflow: hidden;
}
.hero-img__inner {
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  transform-origin: center;

}
.hero-image {
  height: auto;
  text-align: center;
    position: relative;
}
.hero-image img {
  width: 90%;
  display: block;
  margin: 0 auto
}
@media(max-width: 37.5em) {
    .hero-image img{
        width: 100%;
    }
}
.mv-item1{
    position: absolute;
    top: 7%;
    left: 2%
}
@media(max-width: 37.5em){
    .mv-item1{
    top: 5%;
    left: -30%
}
}
.mv-item2{
    position: absolute;
    top: 45%;
    left: -5%
}
@media(max-width: 37.5em) {
    .mv-item2{
    top: 45%;
    left: -10%
}
}
@media(max-width: 37.5em){
    .mv-item2{
    top: 45%;
    left: -28%
}
}
.mv-item3{
    position: absolute;
    bottom: 5%;
    left: 5%
}
@media(max-width: 37.5em){
    .mv-item3{
    left: -25%
}
}
.mv-item4{
    position: absolute;
    top: 5%;
    right: 0
}
@media(max-width: 37.5em){
    .mv-item4{
    top: 7%;
    right: -30%
}
}
.mv-item5{
    position: absolute;
    right: 5%;
    bottom: 0%
}
@media(max-width: 37.5em){
    .mv-item5{
    right: -25%
}
}
.mv-item6{
    position: absolute;
    top: 53%;
    right: -10%
}
@media(max-width: 37.5em){
    .mv-item6{
    right: -35%
}
}
.mv-item1 img, .mv-item2 img, .mv-item3 img, .mv-item4 img, .mv-item5 img, .mv-item6 img{
    width: 30%;
    height: auto
}
@media(max-width: 48em){
    .mv-item1 img, .mv-item2 img, .mv-item3 img, .mv-item4 img, .mv-item5 img, .mv-item6 img{
    width: 20%;
}
}
@media(max-width: 48em){
    .mv-item1 img, .mv-item2 img, .mv-item3 img, .mv-item4 img, .mv-item5 img, .mv-item6 img{
    width: 15%;
    height: auto
}
}
.hero-title {
  height: 500px;
  text-align: center
}
@media(max-width: 37.5em) {
.hero-title {
  height: 300px;
}
}
.hero-title img {
  width: 48%;
  display: block;
  margin: 0 auto
}
@media(max-width: 37.5em) {
    .hero-title img{
        width: 65%;
    }
}