.bnr {
  position: relative;
  width: 100%;
  margin: 1em 0;
  padding: 0;
  overflow: hidden;
}

.bnr-slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
/* 1枚目は通常配置にして、バナーの高さを画像に合わせる */
.bnr-slide:first-child { position: relative; inset: auto; }

.bnr-slide.is-active { opacity: 1; pointer-events: auto; }
.bnr-slide img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) { .bnr-sp { display: none; } }
@media (max-width: 767px) { .bnr-pc { display: none; } }