@charset "utf-8";

/*ボタンが点滅*/
.reflection_btn1::after,.reflection_btn2::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: rotate(45deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);

  /* アニメーション */
  animation: reflection 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2s ease-in-out infinite;
}



@keyframes reflection {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.3; }
  81% { transform: scale(4) rotate(45deg); opacity: 0.8; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.3; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.8; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
  0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.3; }
  81% { -moz-transform: scale(4) rotate(45deg); opacity: 0.8; }
  100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
  0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.3; }
  81% { -ms-transform: scale(4) rotate(45deg); opacity: 0.8; }
  100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
  0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -o-transform: scale(0) rotate(45deg); opacity: 0.3; }
  81% { -o-transform: scale(4) rotate(45deg); opacity: 0.8; }
  100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* ふわふわアニメーション */
@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ふわふわボタン画像に適用 */
.btn-Anim1 {
  animation: fuwafuwa 2.5s ease-in-out infinite;
}


/* スライド設定*/
.swiper-container {
  width: 100%;
  height: 285px;
  overflow: hidden; /* はみ出し防止 */
}

.swiper-wrapper {
  display: flex;
  transition-timing-function: linear; /* 滑らかな動き */
}

.swiper-slide {
  width: auto; /* 画像のサイズに自動調整 */
  flex-shrink: 0; /* 画像が縮まらないようにする */
}

.swiper-slide img {
  width: 100%; /* 親要素に対してフルサイズ */
  height: auto; /* 縦横比を維持して自動調整 */
  object-fit: cover; /* 画像のはみ出しを防ぐ */
  max-width: 750px; /* 画像の最大幅を元のサイズに合わせる */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .swiper-slide {
    width: 100%; /* スマホでも画像サイズを自動調整 */
  }
}

/* ふわふわサイドボタン */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 上に戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
  display: none;
  width: 60px;
  height: 60px;
  z-index: 9999;
  animation: float 2.5s ease-in-out infinite;
}

/* 画像を整える */
.back-to-top img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* ホバー時に少し拡大 */
.back-to-top:hover img {
  transform: scale(1.05);
}