/* チャプターの基底要素の設定 */
.uliza-chapter {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: auto;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color: transparent;

  /* スクロールバー色の設定（Firefox）*/
  scrollbar-color: #444960 #12131a;
  scrollbar-width: thin;

  /* 初動時のアニメーションの設定 */
  animation: fadeIn 0.5s ease 0.5s 1 normal both;
}

/* スクロールバー色の設定（Webkit系）*/
.uliza-chapter::-webkit-scrollbar {
  width: 12px;
  background-color: #12131a;
}
.uliza-chapter::-webkit-scrollbar-thumb {
  background-color: #444960;
  border-radius: 10px;
  border: 2px #12131a solid;
}

/* 項目の境界に仕切りを表示する。*/
.uliza-chapter .item+.item {
  border-top: 1px solid #1e2032;
}

/* チャプター領域を非表示にする。 */
.uliza-chapter.auto {
  display: none;
}

/* 項目を無効にする。 */
.uliza-chapter:not(.has-started) .item,
.uliza-chapter.linearad-has-started .item,
.uliza-chapter.lock .item,
.uliza-chapter.showing-cta .item {
  pointer-events: none;
}

/* 項目の設定 */
.uliza-chapter .item {
  display: flex;
  box-sizing: border-box;
  padding: 10px 10px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: #12131a;
  cursor: pointer;
}

/* マウスカーソルホバー時に背景色を変える。*/
.uliza-chapter .item.hover {
  background: #1e2032;
}

/* 選択状態の項目の背景色を変える。*/
.uliza-chapter .item.selected {
  background: #373950;
}
.uliza-chapter .item.selected.hover {
  background: #454760;
}

/* サムネイルの設定 */
.uliza-chapter .thumbnail {
  width: 90px;
  /* テキスト量が多い場合にサムネイルが小さくなる問題の対策 */
  min-width: 90px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* テキストの設定 */
.uliza-chapter .description {
  display: -webkit-box;
  height: 4em;
  font-weight: bold;
  line-height: 1.5em;
  word-break: break-word;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #ffffff;
}

::-webkit-full-page-media, :future, :root .uliza-chapter .description {
  -webkit-line-clamp: 2;
}

/* 開始時間の設定 */
.uliza-chapter .description::before {
  content: attr(data-start-time);
  display: block;
  font-size: 12px;
  font-weight: normal;
  line-height: 1em;
}