@charset "UTF-8";

#movielist {

}

#movielist dl dt a {
  display: block;
  position: relative;
  width: 100%; /* 必要に応じて固定幅を指定 */
  padding-top: 56.25%; /* 16:9 のアスペクト比 (9/16 * 100) */
  overflow: hidden;
}

#movielist dl dt img.ytimg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を16:9枠に収めてトリミング */
  transform: translate(-50%, -50%); /* 中央揃え */
}

#movielist dl dd ul {
  display: flex;
}

#movielist dl dd ul li {
  margin: 0 0.7em 0 0;
}

#movielist dl dd h3 a {
    max-height: 3.4em;
    overflow: hidden;
    display: inline-block;
}

@media (min-width: 1000px) {
  #movielist {
    display:block;
  }

  #movielist div {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    padding: 0;
  }
  
  #movielist h3.initial {
    width:100%;
    text-align: left;
    display: block;
    font-size: 150%;
    height: 100%;
  } 
  
  #movielist h2 {
    width:100%;
    text-align: left;
    display: block;
    font-size: 125%;
    height: 100%;
    margin-top:0.7em;
  }

  #movielist h2 a {
    font-size: 125%;
  }

}