html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* スライドショー */
.slide-aria {
  position: relative;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 800px; /* 初期値（fallback） */
  overflow: hidden;
  transition: height 0.6s ease;
}
/* 表示エリアいっぱいにするクラス */
.slideshow.fullscreen {
  height: 100vh;
}
.overlay-image {
  position: absolute; 
  height: 300px;
  max-height: 300px;
  max-width: 1024px;
  z-index: 10;
  left: 0;
  right: 0;
  top: 30%;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  object-fit: cover;
}
.overlay-image.show {
  opacity: 1;
}

/* スマホ表示用 */
@media (max-width: 768px) {
  .slideshow {
    height: 400px;
  }
  .overlay-image {
    width: 100%;
    height: auto;
    top: 45%;
  }
}

.slideshow img:not(.overlay-image) {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.zoomLeftTop {
  animation-name: zoomLeftTop;
}

.zoomLeftBottom {
  animation-name: zoomLeftBottom;
}

.zoomOutCenter {
  animation-name: zoomOutCenter;
}

.slideshow img.animated {
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.slideshow img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1) translate(0, 0);
  transition: opacity 1s ease, transform 5s ease-in-out;
}

.slideshow img.active {
  opacity: 1;
}

@keyframes zoomLeftTop {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.2) translate(-5%, -5%);
  }
}

@keyframes zoomLeftBottom {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.2) translate(-5%, 5%);
  }
}

@keyframes zoomOutCenter {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.maximan {
  position: absolute;
  right: 10px;
  top: 10px;
}

.maximan img {
  width: 50px;
}