@charset "UTF-8";
/*↑ブラウザでソースを表示する際の文字化け防止対策。ファイルの先頭に書かなければならないためコメントアウトは2行目から書く。*/

/*body {
  font-family: sans-serif;
}*/

/*.yp-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
*/

/* プレーヤーラッパー */
.player-block {
  width: 100%;
  /*max-width: 100%;*/
  margin: auto;
  /*margin-bottom: 50px;*/
}

/*.player-block {
  width: 100%;
  margin-bottom: 50px;
  position: relative;
}*/

.yt-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; 
  margin: auto;
  /*align-items: center; 
  justify-content: center;*/
}

.yt-player iframe {
  width: 100%;
  height: 100%;
}

.player-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  right: 0;
  left: 0;
  gap: 10px;
  position: relative;
  width: 100%;
  margin: auto;
}

.playBtn,
.muteBtn {
  width: 100%;
  cursor: pointer;
  border-radius: 20px;
  padding: 7px 20px;
  border: 2px solid #ff6347;
  font-size: medium;
  color: #ffffff;
  background-color: #ff6347;
  margin-top: 10px;
}

@media(max-width: 600px){
  .playBtn,.muteBtn{
      margin-bottom: 10px;
  }
}

.playBtn:hover,
.muteBtn:hover{
  transition: 0.3s;
  opacity:0.6;
}