@charset "utf-8";
/* CSS Document */

/* スライドショーコンテナ */
.slideshow-container {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

/* スライド */
.slide {
  display: none;
  text-align: center;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0; /* アニメ前の状態 */
}

/* キャプション */
.caption {
  background: rgba(0,0,0,1.00);
  color: #FFFFFF;
  padding: 15px;
  font-size: 1.2em;
  line-height: 1.2em;
  opacity: 0;
  transform: translateY(20px);
  font-weight: 800;
}

/* アクティブなスライドにアニメーションをかける */
.slide.active img {
  animation: slideFadeIn 1s ease forwards;
}

/* 画像が終わった後にキャプションを出す（delay 1s） */
.slide.active .caption {
  animation: fadeUp 0.8s ease 1s forwards;
}

/* キャプションのフェードアップ */
@keyframes fadeUp {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0);}
}

/* 画像の横スライド＋フェードイン */
@keyframes slideFadeIn {
  0% {opacity: 0; transform: translateX(30px);}
  100% {opacity: 1; transform: translateX(0);}
}

/* 前/次ボタン */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  background: rgba(0,0,0,0.4);
  border-radius: 3px;
  transform: translateY(-50%);
}
.prev {left: 10px;}
.next {right: 10px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}

/* インジケータ（ドット） */
.dot-container {
  text-align: center;
  padding: 10px;
  background: #111;
}
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 3px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.active-dot, .dot:hover {
  background-color: #717171;
}

/* サムネイルコンテナ */
.thumbnail-container {
  max-width: 900px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.thumbnail-container img {
  width: 80px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid #333;
  transition: opacity 0.3s ease, border 0.3s ease;
}
.thumbnail-container img:hover,
.thumbnail-container img.active-thumb {
  opacity: 1;
  border: 2px solid #fff;
}


    .gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 各ブロック4列 */
      grid-template-rows: auto auto; /* 各ブロック2行 */
      gap: 40px;
      width: 85%;
      margin: 5em auto;
      position: relative;
    }

    .gallery div {
      width: 100%;
      padding-bottom: 75%; /* 画像のアスペクト比を維持 */
      background-size: cover;
      background-position: center;
      position: relative;
      transform: scale(var(--scale));
      animation: pauseThenRotate var(--duration) infinite ease-in-out;
      animation-delay: var(--delay);
    }

    /* 静止→回転→静止を繰り返すアニメーション */
    @keyframes pauseThenRotate {
      0%, 40% { transform: scale(var(--scale)) rotate(0deg); } /* 静止 */
      45% { transform: scale(var(--scale)) rotate(-1deg); } /* 回転開始 */
      50% { transform: scale(var(--scale)) rotate(1deg); }
      55% { transform: scale(var(--scale)) rotate(-0.5deg); }
      60% { transform: scale(var(--scale)) rotate(0.5deg); }
      100% { transform: scale(var(--scale)) rotate(0deg); } /* 静止に戻る */
    }

    /* 各画像のサイズ、時間差、アニメーションの長さをランダムに設定 */
    .gallery div:nth-child(1) { --scale: 0.9; --delay: 2s; --duration: 6s; }
    .gallery div:nth-child(2) { --scale: 1.3; --delay: 1.5s; --duration: 5.5s; }
    .gallery div:nth-child(3) { --scale: 0.85; --delay: 3s; --duration: 7s; }
    .gallery div:nth-child(4) { --scale: 1.2; --delay: 2.5s; --duration: 6.5s; }
    .gallery div:nth-child(5) { --scale: 1.4; --delay: 1s; --duration: 5s; }
    .gallery div:nth-child(6) { --scale: 0.8; --delay: 2.8s; --duration: 7.2s; }
    .gallery div:nth-child(7) { --scale: 1.5; --delay: 1.8s; --duration: 5.8s; }
    .gallery div:nth-child(8) { --scale: 1; --delay: 3.5s; --duration: 6.8s; }
    .gallery div:nth-child(9) { --scale: 1.1; --delay: 2.3s; --duration: 6s; }
    .gallery div:nth-child(10) { --scale: 1.35; --delay: 1.2s; --duration: 6.5s; }
    .gallery div:nth-child(11) { --scale: 0.95; --delay: 3.2s; --duration: 7.5s; }
    .gallery div:nth-child(12) { --scale: 1.25; --delay: 2s; --duration: 5.3s; }
    .gallery div:nth-child(13) { --scale: 1.15; --delay: 1.7s; --duration: 6.2s; }
    .gallery div:nth-child(14) { --scale: 0.9; --delay: 3s; --duration: 7s; }
    .gallery div:nth-child(15) { --scale: 1.5; --delay: 1.5s; --duration: 6.8s; }
    .gallery div:nth-child(16) { --scale: 1.05; --delay: 2.6s; --duration: 6.1s; }

.shadow_1{
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);}