/*=========================================
 * ccus.css
 * top画像をアニメーション表示するためのcss
 * 2025.07.09 e.niitsuma
=========================================*/

@charset "utf-8";

/*Webfont読み込み*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

div.container{
  height:600px;
  width:100%;
  position: relative;
}

div.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 30s infinite;
}

.src1 {
  background-image: url(../img/top/1.jpg);
}
.src2 {
  background-image: url(../img/top/2.jpg);
}
.src3 {
  background-image: url(../img/top/3.jpg);
}

div.image:nth-of-type(1) {
  animation-delay: 0s;
}
div.image:nth-of-type(2) {
  animation-delay: 10s;
}
div.image:nth-of-type(3) {
  animation-delay: 20s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  20%{ opacity: 1;}
  33%{ opacity: 1;}
  63%{ opacity: 0;}
  100%{ opacity: 0;}
}