.youtube-search {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  background: #000;
  padding: 20px 0;
}

/* 検索ボックス */
.youtube-search input[type="text"] {
  width: 50%;
  padding: 15px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
}

/* ボタン */
.youtube-search button {
  padding: 15px;
  background-color: #E53022;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  /* transition: background 0.3s; */
  box-sizing: border-box;
}
.movie-grid
{
    display: grid;
    gap: 25px;
    margin: 50px auto;
    grid-template-columns: repeat(2, 1fr);
}
.movie-item
{
    width: 100%;
}
.movie-item>iframe
{
    width: 100%;
    aspect-ratio: 16/9;
}



.junbi-chu
{
    background: #242424;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 5%;
}
.junbi-chu img
{
    height: 70px;
}


.movie .gallery
{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px 20px ;
    /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
}
.video-card {
    /* background: #ffffff; */
    /* border-radius: 8px;
    padding: 1em; */
    transition: transform 0.2s;
     cursor:pointer;
     position:relative;
}
  /* .video-card:hover {
      transform: translateY(-4px);
    } */
        video {
      width: 100%;
      height: auto;
      border-radius: 5px;
      background: #0D0C0C;
       /* pointer-events:none;  */
    }
    .caption {
      margin-top: 0.5em;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      /* color: #0D0C0C; */
    }
    


  /* モーダル */
  .modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    justify-content:center;
    align-items:center;
    z-index:2001;
  }
  .modal.show{display:flex;}
  .modal-content{
    position:relative;
    max-width:90%;
    width:900px;
    background:#000;
    border-radius:8px;
  }
  .modal video{
    width:100%;
    height:auto;
    display:block;
    background:#000;
  }
  .close-btn{
    position:absolute;
    top:-70px;
    right:10px;
    font-size:60px;
    color:#fff;
    cursor:pointer;
    background:none;
    border:none;
  }

   /* ▶再生ボタン */
  .play-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-90%);
    width:64px;
    height:64px;
    background:rgba(0,0,0,0.6);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
  }

  .play-button::before{
    content:"";
    border-style:solid;
    border-width:12px 0 12px 20px;
    border-color:transparent transparent transparent #fff;
    margin-left:4px;
  }

@media screen  and (max-width:768px){
    /* .youtube-search button:hover {
        background-color: #B5261B;
    } */
    .movie .gallery
    {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .play-button
    {
        transform: translate(-50%, -80%);
    }
      .modal{
    background:rgba(0,0,0,0.8);
  }

}