.home-content {
  width: -webkit-fill-available;
  width: stretch;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 75px;
  -webkit-overflow-scrolling: touch;
}

.snap-area {
  margin-top: 75px auto auto auto;
  scroll-snap-align: start;
  min-height: stretch;
  height: -webkit-fill-available;
  height: stretch;
  article {
    height: 100%;
    line-height: 2;
  }
}
.snap-area-footer {
  scroll-snap-align: end;
}

.hello {
  height: -webkit-fill-available;
  height: stretch;
  padding: 0 20px;
  color: #fff;
  background: linear-gradient(#7f00ff, #bc7aff);
  border-radius: 10px;
}

.slides {
  position: relative;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  height: calc(stretch - 75px); 
  overflow: hidden;
  border-radius: 20px;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  color: #fff;
}

.title::after {
  content: "nakahaku";
  display: inline-block;
  vertical-align: middle;
}

.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  background-size: cover;
  background-position: center;
  animation: slide-anime 12s infinite;
}

.slide-item:nth-of-type(1) {
  background-image: image-set(
    "/img/home/home1.avif" type("image/avif"),
    "/img/home/home1.webp" type("image/webp"),
    "/img/home/home1.png" type("image/png")
  );
}

.slide-item:nth-of-type(2) {
  animation-delay: 4s;
  background-position: right bottom;
  background-image: image-set(
    "/img/home/home2.avif" type("image/avif"),
    "/img/home/home2.webp" type("image/webp"),
    "/img/home/home2.png" type("image/png")
  );
}

.slide-item:nth-of-type(3) {
  animation-delay: 8s;
  background-position: center;
  background-image: image-set(
    "/img/home/home3.avif" type("image/avif"),
    "/img/home/home3.webp" type("image/webp"),
    "/img/home/home3.png" type("image/png")
  );
}

@keyframes slide-anime {
  0%, 100% {
    opacity: 0;
  }
  30%, 35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}