/* 動画ライブラリページ YouTubeリンク用 */
.GoYouTube {
  padding-left: 25px;

  background-image: url(goyoutube.svg);
  background-repeat: no-repeat;
  background-position: center left;
}

/* 固定幅、右詰 (ステージ歴の日付表示用) */
.Fwrf {
  display: inline-block;
  min-width: 2.6em;
  text-align: right;
}


/* 動画リスト、動画ランキング 下位 */
.MovieList, .MovieRankingLower {
  width: 99%;
  margin: 0 auto;
}

.Item {
   overflow:hidden;
}

.Item:not(.Header) {
  padding: 3px 0;
}

.Header {
  padding: 0;
  background-color: #e4e4f8;
  border-bottom: 2px solid #8080c0;
}
.Item:nth-of-type(2n+1) {
  background-color: #e4e4f8;
}

.Item span {
  display: inline-block;
}
.Title, .Date, .Note, .Rank, .Count {
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  vertical-align: middle;	/* overflow: hidden;を使うと下に不要な空白ができるのを防ぐ */
}

.Item.Header > .Title {
  padding-left: 28px;
}

.MovieList .Title {
  min-width: 36%;
}
.MovieList .FloatRight {
  width: calc(100% - 36%);
  float: right;
}
.MovieList .Date {
  width: 10.5em;
}
.MovieList .Note {
  width: calc(100% - 10.5em);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.MovieRankingLower .Rank {
  width: 2.2em;
  padding: 0;
  text-align: center;
}
.MovieRankingLower .Title {
  min-width: 33%;
}
.MovieRankingLower .FloatRight {
  width: calc(100% - 33% - 2.2em);
  float: right;
}
.MovieRankingLower .Note {
  width: calc(100% - 7.2em);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.MovieRankingLower .Count {
  width: 7.2em;
  float: right;
  text-align: right;
}


/* 動画ランキング 上位 */
.MovieRankingHigher {
  display: flex;
  flex-direction: row;
  font-size: 16px;
}

.HigherTitle {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.HigherPlayCount {
  min-width: 5.5em;
  text-align: right;
}

.HigherDetail {
  flex-wrap: wrap;
}

.HigherDetail div:nth-child(1) {
  width: 100%;
}

.HigherDetail div:nth-child(2) {
  flex-grow: 1;
}

.HigherDetail div:nth-child(3) {
  flex-grow: 4;
}

@media screen and (max-width:640px) {		/* スマートフォン用 */
  .HigherDetail div:nth-child(3) {
    width: 100%;
  }
}
@media screen and (max-width:450px) {		/* 動画サムネイルを3個表示できない場合 */
  .YouTubeThumbnail:nth-of-type(3) {
    display: none;
  }
}

/*.AlignCenter {
  text-align: center;
}

.AlignRight {
  text-align: right;
}
*/
.YouTubeThumbnail {
  float: left;
  margin: 4px 4px 4px 0;
}