@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

.carousel{
    height: 600px;
}
.carousel__contents_area {
    white-space: nowrap;
    width: 660px;
    height: 500px;
    overflow: hidden; 
}

.carousel__contents_area img{
    margin: 0;
    padding: 0;
    width: 655px;
    height: 100%;
    border: none;
}

@keyframes slide_cont {
    0% { margin-left: 0; }
    10% { margin-left: 0; }
    25% { margin-left: -100%; }
    35% { margin-left: -100%; }
    50% { margin-left: -200%; }
    60% { margin-left: -200%; }
    75% { margin-left: -300%; }
    85% { margin-left: -300%; }
    100% { margin-left: 0; }
} 

.carousel__contents_area > :first-child {
    animation-name: slide_cont; /* キーフレーム使用 */
    animation-timing-function: ease;/* 最初加速して減速 */
    animation-duration: 10s; /* アニメーション時間を5秒に設定 */
    animation-delay: 0s; /* アニメーション開始までの時間を0秒に設定 */
    animation-iteration-count: infinite; /* アニメーションをずっと続ける */
}


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

    .carousel{
        height: auto;
	}
	.carousel__contents_area {
	    width: 300px;
	}

	.carousel__contents_area img{
	    width: 300px;
	}
}



/*
.carousel__contents_area:hover > :first-child {
    animation-play-state: paused;/一時停止/
}
@keyframes tibi{
    100% { margin-left: 0; }
}
*/



@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}





/*
.carousel__cntents:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}
*/

/* snapper */
.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media {
  .carousel__snapper {
    animation-name: tonext, snap; /* @キーフレームで指定したものを使う */
    animation-timing-function: ease;/* 最初加速して減速 */
    animation-duration: 1s; /* アニメーションの周期*/
    animation-iteration-count: infinite; /* ずっと */
  }

  .carousel__cntents:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}


/* ナビゲーション（黒丸） */
.carousel__navigation {
  right: 0;
  bottom: 0;
 /* bottom: 17px; */
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}


/* 画面上の左右で移動 */
/*
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel__prev {
  left: -1rem;
}

.carousel__next {
  right: -1rem;
}
*/