/* バナー本体 */
.banner-slideshow{
  position:relative; width:100%; max-width:900px;
  aspect-ratio:16 / 5; height:auto; border-radius:12px;
  overflow:hidden; background:#000;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
@media (max-width:580px){
  .banner-slideshow{ aspect-ratio:16 / 9; }
}

/* フレーム */
.banner-slideshow .frame{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 600ms linear; pointer-events:none;
}
.banner-slideshow .frame.active{ opacity:1; }
.banner-slideshow img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ラベル */
.banner-slideshow .frame::after{
  content: attr(data-label);
  position:absolute; left:10px; top:10px;
  padding:.25em .55em; font-weight:700; font-size:.9rem;
  color:#fff; background:rgba(0,0,0,.45);
  border-radius:6px; backdrop-filter: blur(2px);
}

/* 吹き出し */
.bubble{
  position:absolute; max-width:min(90%, 620px);
  background:rgba(255,255,255,.9); color:#000;
  padding:.5em .9em; border-radius:14px;
  font-size:clamp(.85rem, 2.2vw, 1rem);
  box-shadow:0 2px 6px rgba(0,0,0,.25); line-height:1.5;
}
.bubble::after{ content:""; position:absolute; width:0; height:0; }

/* 各位置 */
.bubble--tr{ top:10%; right:6%; }
.bubble--tr::after{ border-left:10px solid rgba(255,255,255,.9); border-top:10px solid transparent; border-bottom:10px solid transparent; right:-10px; top:14px; }
.bubble--br{ bottom:10%; right:6%; }
.bubble--br::after{ border-left:10px solid rgba(255,255,255,.9); border-top:10px solid transparent; border-bottom:10px solid transparent; right:-10px; bottom:14px; }
.bubble--bl{ bottom:10%; left:6%; }
.bubble--bl::after{ border-right:10px solid rgba(255,255,255,.9); border-top:10px solid transparent; border-bottom:10px solid transparent; left:-10px; bottom:14px; }
.bubble--bc{ left:50%; bottom:8%; transform:translateX(-50%); text-align:center; }
.bubble--bc::after{ border-top:10px solid rgba(255,255,255,.9); border-left:10px solid transparent; border-right:10px solid transparent; left:50%; transform:translateX(-50%); bottom:-10px; }
.bubble--tl{ top:10%; left:6%; }
.bubble--tl::after{ border-right:10px solid rgba(255,255,255,.9); border-top:10px solid transparent; border-bottom:10px solid transparent; left:-10px; top:14px; }

/* コントロール */
.banner-controls{ margin-top:8px; display:flex; gap:8px; justify-content:center; }
.banner-controls button{ padding:.45em .9em; border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer; }
.banner-controls button:hover{ background:#f3f3f3; }

/* JS失敗時の保険 */
#lastShow6 .frame:first-child{ opacity:1; }

/* 上中央 */
.bubble--tc{ 
  top:8%; 
  left:50%; 
  transform:translateX(-50%); 
  text-align:center; 
}
.bubble--tc::after{
  border-bottom:10px solid rgba(255,255,255,.9);
  border-left:10px solid transparent; 
  border-right:10px solid transparent;
  left:50%; 
  transform:translateX(-50%); 
  top:-10px;
  position:absolute;
  content:"";
}

@media (max-width:580px){
  .bubble{
    font-size:.8rem;           /* 文字を小さめに */
    padding:.35em .6em;        /* 余白を詰める */
    max-width:86%;             /* 幅を少し狭く */
    line-height:1.35;
    background:rgba(255,255,255,.88);
  }
  /* 位置も少し外周へ寄せる（例） */
  .bubble--bl{ bottom:6%; left:5%; }
  .bubble--br{ bottom:6%; right:5%; }
  .bubble--tr{ top:6%; right:5%; }
  .bubble--tl{ top:6%; left:5%; }
  .bubble--bc{ bottom:5%; }
}