@charset "UTF-8";
/* CSS Document */

/* --------------------------------
  Hero
-------------------------------- */

@media screen and (min-width:641px) {

/* ------ slide image ------- */
.hero-slide__img {
	animation-duration: 24s;
	animation-iteration-count: infinite;
	animation-name: slideAnime;
	animation-timing-function: ease;
	opacity: 0;
}
.hero-slide__item:nth-of-type(1) .hero-slide__img {
	animation-delay: 0s;
}
.hero-slide__item:nth-of-type(2) .hero-slide__img {
	animation-delay: 8s;
}
.hero-slide__item:nth-of-type(3) .hero-slide__img {
	animation-delay: 16s;
}

}

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

/* ------ slide image ------- */
.hero-slide__img {
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-name: slideAnime-sp;
	animation-timing-function: ease;
	opacity: 0;
}
.hero-slide__item:nth-of-type(1) .hero-slide__img {
	animation-delay: 0s;
}
.hero-slide__item:nth-of-type(2) .hero-slide__img {
	animation-delay: 5s;
}
.hero-slide__item:nth-of-type(3) .hero-slide__img {
	animation-delay: 10s;
}

}

@keyframes slideAnime {
  0% {
	opacity: 0;
  }
  16% {
	opacity: 1;
  }
  33% {
	opacity: 1;
  }
  49% {
	opacity: 0;
  }
  100% {
	opacity: 0;
	transform: translateX(-3%);
  }
}

@keyframes slideAnime-sp {
  0% {
	opacity: 0;
  }

  16% {
	opacity: 1;
  }

  33% {
	opacity: 1;
  }

  49% {
	opacity: 0;
  }

  100% {
	opacity: 0;
	transform: translateX(-5%);
  }
}

/* ------ hero erea ------- */
.hero {
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-color: #000;
}
.hero__inner {
	margin: 0 auto;
	width: 100vw;
}
.hero-slide{
	position: absolute;
}
.hero-slide__item {}
.hero-slide__item img{
	width: 105vw;
	height: 105vh;
	object-fit: cover;
	position: absolute;
	top:0;
}