@charset "Shift_JIS";

/* スタイルを追加してカスタマイズ可能 */
.slider-container {
  position: relative;
  text-align: center;
  max-width: 580px;
  margin-right: 6px;
}

.thumbnail-container {
  position: relative;
  text-align: center;
  margin-right: 4px;
  margin-left: 6px;
}

.slider-button {
  position: relative;
  background-color: transparent;
  color: black;
  padding: 0px 0px;
  border: none;
  cursor: pointer;
  font-size: 54px;
  opacity: 0.8;
}

.slider-button:hover {
  opacity: 0.2;
  background-blend-mode: screen;
}

.thumbnail {
  width: 80px;
  cursor: pointer;
  transition: opacity 0.3s, background-color 0.3s;
  margin-top: 3px;
  margin-bottom: 3px;
}

.thumbnail:hover {
  opacity: 0.5;
  background-blend-mode: screen;
}

/* prevボタンのスタイル */
#prev-button-1,
#prev-button-2,
#prev-button-3 {
  position: absolute;
  top: 100%;
  transform: translateY(0);
  left: -20px;
}

/* nextボタンのスタイル */
#next-button-1,
#next-button-2,
#next-button-3 {
  position: absolute;
  top: 100%;
  transform: translateY(0);
  right: -20px;
}

/* スタイルを追加してキャプションを右側に配置 */

.caption {
  position: absolute;
  top: 50%;
  right: 0; /* 右側に配置 */
  transform: translateY(-50%);
  color: white;
  background-color: #00479d;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
  font-size: 16px;
  width: 280px;
}
.caption p{
  font-size: 12px;
}

/* 他のスタイルも追加可能 */