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


/*
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.loop_wrap img:first-child {
  animation: loop 60s -30s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 60s linear infinite;
}



.loopSlide {
    display: flex;
    width: 100vw;
    height: 100%;
    overflow: hidden;

    img {
        width: auto;
        height: 100%;

        &:first-child {
            animation: slide1 60s -30s linear infinite;
        }

        &:last-child {
            animation: slide2 60s linear infinite;
        }

    }
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
*/

/*
.loopSlide {
    display: flex;
    width: 100vw;
    height: 200px;
    overflow: hidden;

    img {
        width: auto;
        height: 100%;

        &:first-child {
            animation: slide1 60s -30s linear infinite;
        }

        &:last-child {
            animation: slide2 60s linear infinite;
        }

    }
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
} */


.wrap2 {
  display: flex;
  align-items: center;
　height: 100%; 
　overflow: hidden;
	margin-bottom: 20px;
}

.slideshow {
  display: flex;
  animation: loop-slide 20s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
} 

.content {
  width: 200px;
  height: 100%;
}

.content:nth-child(1) {
}

.content:nth-child(2) {
}

.content:nth-child(3) {
}

.content:nth-child(4) {
}