/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 10 2025 | 21:23:30 */
.image-container {
  position: relative;
  width: 100%; /* 画像の幅 */
  height: 600px; /* 画像の高さ */
  overflow: hidden; /* はみ出た部分を隠す */
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position: top center;
  transition: opacity 1s ease; /* フェードイン/アウトのアニメーション */
}

.image-container img.first-image {
  opacity: 1;
}

.image-container img.second-image {
  opacity: 0;
}

.image-container:hover img.first-image {
  opacity: 0;
}

.image-container:hover img.second-image {
  opacity: 1;
}


@media screen and (max-width: 767px) {

    .image-container {
  position: relative;
  width: 100%; /* 画像の幅 */
  height: 350px; /* 画像の高さ */
  overflow: hidden; /* はみ出た部分を隠す */
}
    
}