html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container{
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.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;

}

.text { 
  position: absolute;
  top: 350px;
  width: 100%;
  text-align: center;
  opacity: 0;
  z-index: 2; /* 画像より前に表示 */
  animation: image-switch-animation 30s infinite;
}

 /* 画像と同じタイミングで遅延を設定 */

.text1 { 
   color: white;
   font-size: 70px;
   font-style : italic;
   font-family: sans-serif;
   animation-delay: 0s;
}

.text2 {
  color: white;
  font-size: 80px;
  font-family: fantasy;
  animation-delay: 10s;
}
.text3 {
  color: white;
  font-size: 70px;
  font-family: sans-serif;
  animation-delay: 20s;
}

.src1 {
  background-image: url(../img/kumiko-shimizu-lNxMcE8mvIM-unsplash.jpg);
}
.src2 {
  background-image: url(../img/pexels-canvastudio-3153198.jpg);
}
.src3 {
  background-image: url(../img/pexels-fauxels-3184306.jpg);
}

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

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

.fadeIn-img {
  width: 600px;
  height: auto;
  text-align:left;
  opacity: 0;
  animation: fadeIn 4s ease-in-out forwards;
}

@keyframes fadeIn {
  0% { 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }
}

.fadeIn-img2 {
  width: 350px;
  height: auto;
  display:block;
  margin-left: auto;
  margin-right: 0;
  opacity: 0;
  animation: fadeIn2 7s ease-in-out forwards;
  margin-top: -1px;
}

@keyframes fadeIn2 {
  0% ,50%{ 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }
}

.fadeIn-img3 {
  border: none;
  outline: none;
  box-shadow: none;
  width: 450px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: 0;
  opacity: 0;
  animation: fadeIn3 7s ease-in-out forwards;
  margin-top: -500px;
}

@keyframes fadeIn3 {
  0% ,50%{ 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }
}

.qrimg {
  border: none;
  outline: none;
  box-shadow: none;
  width: 300px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -200px;
}