.slider{
    position:relative;
    width:100%;
    height: 100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:16px;
    transition:
    filter .35s ease,
    box-shadow .35s ease;
  }

.slider:hover { 
  filter: brightness(0.9);
  box-shadow:
     0 0 22px rgba(255, 248, 180, 0.5);
}

  /* ラジオボタンを完全に隠す */
  .slider input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  .slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.04);
    transition:
      opacity 1s ease,
      transform 1s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }

  .slide img{
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
  }

  /* チェックされたスライドを表示 */
  #s1:checked ~ .slides .img1,
  #s2:checked ~ .slides .img2 {
    opacity:1;
    transform:scale(1);
    pointer-events:auto; /* クリック可能に */
  }

  /* 各スライドが label になっておりクリックで次の input をONにする */
  .slides label{
    display:block;
    width:100%;
    height:100%;
    cursor:pointer;
  }

  /* クリック時の軽い反応 */
  .slides label:active{
    transform:scale(0.98);
    transition:.1s;
  }