.content {
  width: auto;
  height: 200px;
  background-color: #a3a3a3;
  flex-shrink: 0; /* 縮小されないようにする */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 疑似要素の基準位置 */
}

/* 薄いブルーのフィルター（オーバーレイ） */
.content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(255, 255, 255, 0.3); 薄いブルーのオーバーレイ */
  pointer-events: none; /* クリックイベントを通過させる */
  z-index: 1;
}
.content img {
  width: auto;
  height: 100%;
  display: block;
  max-width: none; /* 最大幅の制限を解除 */
  border-top: 10px solid white; /* 上側に10pxの白色ボーダー */
  border-right: 10px solid white; /* 右側に10pxの白色ボーダー */
}
.wrap li{
  list-style-type:none;
}

/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 200px;
  margin: 0;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  animation: loop-slide 300s infinite linear 1s both;
  will-change: transform; /* パフォーマンス向上 */
  backface-visibility: hidden; /* レンダリング最適化 */
  transform: translateZ(0); /* GPU アクセラレーション */
}

/* スライドショーが一時停止状態の時はアニメーションを停止 */
.wrap.slide-paused .slideshow {
  animation-play-state: paused;
}

@-webkit-keyframes loop-slide {
  from {
     transform: translateX(0);
  }
  to {
    transform: translateX(var(--slide-offset, -50%));
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--slide-offset, -50%));
  }
}