/* 動画埋め込み
   16:9 の比率を保ったまま、画面幅に合わせて縮む枠。 */
.videoBlock {
    /* 図・時間割・帯グラフと同じ幅にそろえる。
       本文の中に置くので、本文より広くはならない。 */
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    margin: 20px auto;
}

.videoBlock iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* 説明文と動画を横に並べる行。
   .videoRow--main は主役（長い講義）、.videoRow--sub は脇役（短いクリップ）。
   動画の幅で、どちらを先に見てほしいかを示している。 */
.videoRow {
    gap: 32px;
    align-items: flex-start;
}

.videoRow .description {
    flex: 1 1 auto;
    min-width: 0;
}

.videoRow iframe {
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 100%;
}

.videoRow--main iframe {
    flex: 0 1 520px;
}

.videoRow--sub iframe {
    flex: 0 1 300px;
}

@media (max-width: 768px) {
    .videoRow iframe {
        width: 100%;
        flex-basis: auto;
    }
}

/* 説明文の要点を太字にしたところだけ 2px 大きくする（トップの学部紹介文と同じ）。 */
.videoRow .description b {
    font-size: calc(1em + 2px);
}

.videoRow > iframe {
  min-width: 0;
}

.videoRow > .description {
  flex: 1 1 0;
}