/* スライダー全体 */
.slider{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
   width: 100%;
  height: 100vh;

  
}

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

}

/*
  ①スライド画像
  表示する画像を定義
*/

.slider .image:first-of-type{
background-image: url(../tk_img/20240210sb/1.jpg);
}
.slider .image:nth-of-type(2){
  animation-delay: 4s;
  background-image: url(../tk_img/20240210sb/2.jpg);
}
.slider .image:nth-of-type(3){
  animation-delay: 8s;
  background-image: url(../tk_img/20240210sb/3.jpg);
}
.slider .image:nth-of-type(4){
  animation-delay: 12s;
  background-image: url(../tk_img/20240210sb/4.jpg);
}


.slider .image:nth-of-type(5){
animation-delay: 16s;
background-image: url(../tk_img/20211205/1.jpg);
}
.slider .image:nth-of-type(6){
  animation-delay: 20s;
  background-image: url(../tk_img/20211205/2.jpg);
}
.slider .image:nth-of-type(7){
  animation-delay: 24s;
  background-image: url(../tk_img/20211205/3.jpg);
}
.slider .image:nth-of-type(8){
  animation-delay: 26s;
  background-image: url(../tk_img/20211205/4.jpg);
}
.slider .image:nth-of-type(9){
  animation-delay: 30s;
  background-image: url(../tk_img/20211205/5.jpg);
}
.slider .image:nth-of-type(10){
  animation-delay: 34s;
  background-image: url(../tk_img/20211205/6.jpg);
}
.slider .image:nth-of-type(11){
  animation-delay: 38s;
  background-image: url(../tk_img/20211205/7.jpg);
}
/*.slider .image:nth-of-type(12){
  animation-delay: 42s;
  background-image: url(../tk_img/20211205/8.jpg);
}*/
/*.slider .image:nth-of-type(13){
  animation-delay: 24s;
  background-image: url(../tk_img/20211205/9.jpg);
}*/

/*.slider .image:nth-of-type(14){
  animation-delay: 26s;
  background-image: url(../tk_img/20211205/9-2.jpg);
}*/
.slider .image:nth-of-type(12){
  animation-delay: 42s;
  background-image: url(../tk_img/20211205/10.jpg);
}

.slider .image:nth-of-type(13){
  animation-delay: 46s;
  background-image: url(../tk_img/20240210sb/1.jpg);
}

.slider .image:last-of-type(14){
animation-delay: 50s;
background-image: url(../tk_img/20240210sb/1.jpg);
}

/*
  ②アニメーション設定
  animation-durationのみ変更
*/
.slider .image{
  animation-name: anime;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-duration: 60s;  /* ①で設定したanimation-delayの画像枚数×切り替え時間（4s）合計を挿入 */
}

/* アニメーション定義 */
@keyframes anime {
  0% {
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  80% {
    opacity: 0;
    transform: scale(1.2) ;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
    z-index: 0;
  }
}