@charset "utf-8";
/* CSS Document */
.gallery-container {
  position: relative;
  width: 100%; /* 画格の横幅 */
  height: auto; /* 画格の縦幅 */
  overflow: hidden;
  background-color: rgba(0,0,0,1.00);
}

/* メイン画像（画格いっぱいに表示） */
.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  /* フェードイン・アウトのアニメーション設定 (0.6秒) */
  transition: opacity 0.6s ease-in-out;
}
/* フェード時の透明度 */
.main-image.fade {
  opacity: 0;
}
/* サムネイル一覧（左上に「縦並び」で配置） */
.thumbnail-list {
  position: absolute;
  top: 10px; /* 上からの距離 */
  left: 10px; /* 左からの距離 */
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 6px; /* サムネイル同士の上下間隔 */
  z-index: 10; /* メイン画像より前面に表示 */
  background-color: rgba(225, 225, 225, 0.2);/* 背景の半透明黒 */
  padding: 6px;
  backdrop-filter: blur(4px); /* 背景ぼかし効果 */
}
/* サムネイル単体 */
.thumb {
  width: 35px; /* サムネイルの横幅 */
  height: 55px; /* サムネイルの縦幅 */
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all 0.3s ease;
}
/* サムネイル ホバー・選択時のスタイル */
.thumb:hover {
  opacity: 1;
}
.thumb.active {
  opacity: 1;
  border-color: #fff; /* 選択中を白枠で強調 */
  transform: scale(1.05); /* 少し大きく表示 */
}