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


/* スライダー全体 */

.hero {
	padding: 6% 6% 18% 6%;
}
.slider{
 	position: relative;
  	top: 0;
  	left: 0;
  	overflow: hidden;
  	width: 100%;
  	height: 75vh;
}

/* スライダー画像 */
.slider .image{
  	position: absolute;
  	z-index: 1;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: cover;
}

.slider .image:nth-of-type(1){
  	background-image: url("../img/1.jpg");
}
.slider .image:nth-of-type(2){
  	animation-delay: 5s;
  	background-image: url("../img/2.jpg");
}
.slider .image:nth-of-type(3){
  	animation-delay: 10s;
  	background-image: url("../img/3.jpg");
}

/* animation-duration */
.slider .image{
  	animation-name: anime;
  	animation-delay: 0;
  	animation-iteration-count: infinite;
  	animation-duration: 15s;  /* 上で設定したanimation-delayの合計 */
}

/* アニメーション定義 */
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}


@media screen and (max-width:900px) {
    .hero {
	    padding: 10% 12% 18% 12%;
    }
	.slider .image:nth-of-type(1){
		background-position: top right;
	}

}