/*VideoLapのCSS*/
/*ライセンスは別途 jolab.jp/apps/lisence.txt に記した通りです。*/

html,
body {
  overflow-y: hidden;
}

/**最初に動画ファイルを開く際のコンテナ*/
.initial-video-open-container {
  padding-top: clamp(3%, 80vw, 8%);
  padding-left: clamp(3%, 80vw, 10%);
  padding-right: clamp(3%, 80vw, 10%);
}
/**キャプチャー画像のコンテナ*/
.captured-container {
  overflow: auto;
  /*height: calc(100vh - 58px - 0.25rem); /*ナビゲーションバーの58pxとpadding（p-1）の0.25remを引く*/
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-bottom: 4px;
}
/*ビデオプレイヤーを格納するコンテナ*/
.video-container {
  border-radius: 10px;
  overflow: hidden;
}
/*マーカー番号*/
.marker-number {
  width: 35px;
  height: 30px;
  background: white;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight: 600;
}
.marker-number[data-role="table"] {
  width: 30px;
  height: 30px;
}
.marker-number::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央 */
  font-size: 10px;
  font-weight: bold;
  color: black;
}

/*区間タイムテーブルの行*/
tr {
  height: 35px;
}
/*区間タイムテーブルのセル*/
td {
  height: 35px;
  padding-left: 10px;
  padding-right: 10px;
}
/*区間タイムテーブルの区間を示すコの字型の線*/
td.corner-line {
  position: relative;
  vertical-align: middle;
  z-index: 0; /* 相対指定 */
}
td.corner-line::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 0;
  width: 20px;
  height: 90%; /* 75% - 25% */
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-top: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  z-index: 0; /* 相対指定 */
}
td.corner-line div {
  position: relative;
  z-index: 1; /* 上に表示 */
  width: 100%;
  box-sizing: border-box;
  background-color: white;
}