:root {
  --banner-width: 20vw;
}
.banner {
  position: fixed;
  top: 24%;
  right: 0; /* 最終位置は右端 */
  transform: translateX(100%) translateY(-50%); /* 初期位置：右外 */
  width: var(--banner-width);
  min-width: 240px;
  max-width: 414px;
  transition: transform 1s ease, width 0.5s ease; /* transformでスライド */
  z-index: 10;
}

.banner.active {
  transform: translateX(0) translateY(-50%); /* 表示位置 */
}
.banner img{
width:100%;
}
.banner img:hover{
opacity:0.8;
}
/* ブラウザ幅が狭い場合の調整 */
@media (max-width: 768px) {
  .banner {
    width: 40vw; /* 幅を広げる */
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .banner {
    width: 50vw;
top: 165px;
  }
}