/* ==========================================================
   1. メイン画像部分の設定（270px固定・白飛び背景）
========================================================== */
.slider {
  width: 270px;
  position: relative; /* 矢印を写真の上に浮かせるために必要 */
  overflow: hidden;   /* 💡 復活：右側にはみ出す画像を完全に隠します */
}

.slider-for {
  width: 1080px; /* 270px × 4枚 */
}

.slider-for > div {
  float: left;
  width: 270px;
  background: #fff; /* 白飛び用の背景色 */
}

.slider-for img {
  width: 100%;
  display: block;
}

/* 🔽 【新設】左右の透明なクリックエリア（％指定で写真の高さに自動で合わせます） */
.prev-btn, .next-btn {
  position: absolute;
  top: 0;
  height: 360px;
  width: 40px;         /* クリックエリアの横幅 */
  z-index: 10;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.4);
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

/* ホバー時は矢印の文字だけを白くクッキリさせる */
.prev-btn:hover, .next-btn:hover {
  background: transparent !important;
  color: rgba(255, 255, 255, 1);
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* ==========================================================
   2. サムネイル部分の設定（グレー枠・選択時に黒枠に色変更）
========================================================== */
.slider-nav {
  width: 270px;
  padding-top: 10px;
  overflow: hidden;
}

/* サムネイルの枠（💡最初から全員に1pxのグレーの線を引いておきます） */
.slider-nav > div {
  float: left;
  width: 60px;
  margin-right: 10px;
  cursor: pointer;
  
  /* 🔽 【復活】1pxのグレーの枠線を追加 */
  border: 1px solid #808080;
  box-sizing: border-box; /* 💡 枠線のせいでサイズが太くならない（壊れない）ために必須 */
  
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s; /* 線の色の変化も滑らかに */
}

/* 一番右端（4枚目）のサムネイルは右マージンをなしにする */
.slider-nav > div:last-child {
  margin-right: 0;
}

/* サムネイル画像自体のサイズ */
.slider-nav img {
  width: 100%;
  display: block;
}

/* 💡 選択されている（active）サムネイルの見た目 */
.slider-nav > div.active {
  opacity: 1;
  border-color: #000000; /* 🔽 【復活】グレーの線を「黒」に変えるだけなので、サイズは変わりません */
}