/* 基本リセット */
* { margin:0; padding:0; box-sizing:border-box; }
*
*/* スライダーの枠 */
.slider{
  margin: 0 auto;            /* 画面中央に寄せ */
  overflow: hidden;          /* はみ出た部分は隠す */
  position: relative;
}

/* 画像群を横並びに */
.slides{
  display:flex;
  width: 100%;                /* 3枚分（100% * 3） */
  transition: transform 0.6s ease-in-out;
}

/* 画像の基本サイズ */
.slides img{
  width: 100%;                /* 親の幅に合わせて伸縮 */
  flex-shrink:0;              /* 伸び縮みしない */
  object-fit: cover;          /* 画像が枠からはみ出たら切り取る */
}
/* ---------- ホットスポット ---------- */
.hotspot{
  position: absolute;      /* ② 絶対位置指定 */
  z-index: 2;              /* 画像の上に重ねる */
  cursor: pointer;
  /* 透明化：背景なし、枠線も無し */
  background: transparent;
  text-decoration: none;
}

/* ① ① 左上 (例: 20% 左、15% 上、幅 15%、高さ 10%) */
.hotspot-1{
  top: 0%;
  left: 70%;
  width: 7%;
  height: 7%;
}

/* ② 真ん中 (例: 35% 左、40% 上、幅 30%、高さ 20%) */
.hotspot-2{
  top: 0%;
  left: 77%;
  width: 7%;
  height: 7%;
}

/* ③ 右下 (例: 70% 左、70% 上、幅 15%、高さ 15%) */
.hotspot-3{
  top: 0%;
  left: 84%;
  width: 7%;
  height: 7%;
}
.hotspot-4{
  top: 0%;
  left: 91%;
  width: 7%;
  height: 7%;
}

/* 必要に応じてホバー時の表示を追加 */
.hotspot:hover{
  background: rgba(255,255,255,0.2);   /* 例: 半透明白でハイライト */
}