@charset "utf-8";
/* CSS Document */
/*トップページスライドショー*/
/*https://gorigoricode.com/css-slideshow/*/
/*計算参考https://note.com/megweb/n/n9f1cf36ef4c6*/

.slide {
  position: relative;
  width: 100%;
  height: 750px;
  overflow: hidden;
  display: block;
}
.slides_sp{
  display: none;
}

.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 30s linear infinite;
}

.slide-image:nth-child(1) {
  background-image: url("../image/image_tree.png");
  animation-delay: 0s;
}

.slide-image:nth-child(2) {
  background-image: url("../image/image_gaikan.png");
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url("../image/image_tree.png");
  animation-delay: 12s;
}
.slide-image:nth-child(4) {
  background-image: url("../image/image_gaikan.png");
  animation-delay: 18s;
}
.slide-image:nth-child(5) {
  background-image: url("../image/image_tree.png");
  animation-delay: 24s;
}

@keyframes slider-1 {
   0% {
   opacity: 0;
   }

   7% {
   opacity: 1;
   }

   18% {
   opacity: 1;
   }

   25% {
   opacity: 0;
   }

   100% {
   opacity: 0;
   }
}


@media screen and (min-width:800px) {
	.slide{
		display: block;
	}
	.slide_sp{
		display: none;
	}
}

@media screen and (max-width:800px) {
.slide{
		display:none;
}

.slide_sp {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  padding-top: 60%;	
  margin-top: 50px;
}
	

	
.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  /*background-size: cover;*/
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 30s linear infinite;
}

.slide-image:nth-child(1) {
  background-image: url("../image/image_tree_sp.png");
  animation-delay: 0s;
}

.slide-image:nth-child(2) {
  background-image: url("../image/image_gaikan_sp.png");
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url("../image/image_tree_sp.png");
  animation-delay: 12s;
}
.slide-image:nth-child(4) {
  background-image: url("../image/image_gaikan_sp.png");
  animation-delay: 18s;
}
.slide-image:nth-child(5) {
  background-image: url("../image/image_tree_sp.png");
  animation-delay: 24s;
}

@keyframes slider-1 {
   0% {
   opacity: 0;
   }

   7% {
   opacity: 1;
   }

   18% {
   opacity: 1;
   }

   25% {
   opacity: 0;
   }

   100% {
   opacity: 0;
   }
}