.youtubeLinkButton {
  text-align: center;
}

.youtubeLinkButton a{
  color: #00477f;
  display: inline-block;
  border: 1px solid #00477f;
  padding: .9em 3em 1em;
  text-decoration: none;
  letter-spacing: .05em;
  background: linear-gradient(to left, transparent,transparent 50%,#00477f 50%,#00477f) right/210% 210% no-repeat;
}

.youtubeLinkButton a:hover{
  background-position: left;
  opacity: 1;
  color: #fff;
}

#youtubePlayList_controller>ul {
  display: none;
}

.playListWrap {
  margin: 0 0 50px;
}

#youtubePlayList {
  width: calc( 100vw - 20px );
  height: calc( (100vw - 20px) * 9 / 16);
}

.play_list {
  height: 320px;
  overflow-y: auto;
}

@media screen and (min-width: 900px){
  .playListWrap {
    display: flex;
    align-items: flex-start;
  }

  #youtubePlayList {
    flex-shrink: 0;
    width: 65vw;
    height: calc( 65vw * 9 / 16);
    max-width: 658px;
    max-height: calc( 658px * 9 / 16);
  }

  .play_list {
    height: calc( 65vw * 9 / 16);
    max-height: calc( 658px * 9 / 16);
    overflow-y: auto;
  }
}

.play_list>div  {
  margin-bottom: 2px;
}

.play_list>div a{
  color: inherit;
  text-decoration: none;
  opacity: 1;
  display: block;
  padding: 1em;
  font-size: 1.4rem;
  background: #fff;
  transition: .5s;
}

.play_list>div:hover a{
  background: #f1f1f1
}

.play_list>div.active a {
  background: #01457f;
  color: #fff;
}