/* #region CSS変数*/

:root {
  /*bootstrapブレークポイント*/
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
  /*bootstrapカラー*/
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /*マイカラー*/
  --jolab-red: #c91f19;
  --jolab-red2: #cc302b;
  --jolab-green: #047232;
  --jolab-blue: #1644c4;
  --jolab-orange: #ea5532;
  --jolab-yellow: #ffdc00;
  --jolab-brown: #4e362b;
  --jolab-purple: #590672;
  --jolab-pink: #f70b9c;
  --jolab-gray: #424242;
  --jolab-black: #000000;
  --jolab-white: #ffffff;

  /*データセット*/
  --ds-header-color: #f5f5f5;
  --ds-cell-color: #fff;
  --ds-border-color: #dddddd;
}
/* #endregion */

/* #region スマホ・タブレット関連*/
/**左右に揺れないようにするためのスタイルです。bodyタグに適用してください。*/
.unsway-x {
  overflow-x: hidden;
}
/**タッチ操作で、ピンチズーム、ダブルタップズームを無効にします。ページ全体に適用するにはbodyタグに指定します。また、個別の要素に適用することもできます。*/
.touch-manipulation {
  touch-action: manipulation;
}
/* #endregion */

/* #region 正方形サイズ指定*/

/**pxで正方形サイズ指定*/
.size-px-10 {
  width: 10px;
  height: 10px;
}
.size-px-20 {
  width: 20px;
  height: 20px;
}
.size-px-30 {
  width: 30px;
  height: 30px;
}
.size-px-40 {
  width: 40px;
  height: 40px;
}
.size-px-50 {
  width: 50px;
  height: 50px;
}
/*emで正方形サイズ指定*/
.size-em-1 {
  width: 1em;
  height: 1em;
}
.size-em-1-5 {
  width: 1.5em;
  height: 1.5em;
}
.size-em-2 {
  width: 2em;
  height: 2em;
}
.size-em-2-5 {
  width: 2.5em;
  height: 2.5em;
}
.size-em-3 {
  width: 3em;
  height: 3em;
}
/* #endregion */

/* #region ボタン*/

/*編集ボタン*/
.edit-button {
  border: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: 80% 80%;
  transition: background-color 0.3s ease;
}
.edit-button:hover {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23777777" class="bi bi-pencil-square" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/></svg>');
  transition: background-color 0.3s ease;
}
.edit-button:active {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/></svg>');
}

/*スリードットメニューボタン（横並び）*/
.dots-button {
  border: none;
  border-radius: 15%; /* 四隅を少し丸く */
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='4' viewBox='0 0 16 4' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23333'/%3E%3Ccircle cx='8' cy='2' r='2' fill='%23333'/%3E%3Ccircle cx='14' cy='2' r='2' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dots-button:hover {
  background-color: rgba(0, 0, 0, 0.06); /* 薄いグレー */
}
/*スリードットメニューボタン（縦並び）*/
.dots-button-v {
  border: none;
  border-radius: 15%; /* Rounded corners */
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='20' viewBox='0 0 4 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23333'/%3E%3Ccircle cx='2' cy='10' r='2' fill='%23333'/%3E%3Ccircle cx='2' cy='18' r='2' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dots-button-v:hover {
  background-color: rgba(0, 0, 0, 0.06); /* 薄いグレー */
}

/* #endregion */

/* #region モーダル関連*/
.exception-modal-td {
  padding: 5px;
  vertical-align: top;
  border: 1px solid gray;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* #endregion */

/* #region 並べ替え可能要素*/
/**並べ替え可能要素*/
.sortable-item {
  transition: background-color 0.2s ease;
  touch-action: none;
}
/**並べ替え中の要素*/
.sorting {
  opacity: 0.5;
}
/* #endregion */

/* #region fileOpner.js関連*/
/**fileOpenerのファイルをドロップで受け取る要素のスタイル*/
.file-opener-drop-area {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #aaa;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  background: #f9f9f9;
}
/*fileOpenerの閉じるボタン*/
.file-opener-close {
  position: absolute;
  top: clamp(5px, 5%, 100px);
  right: clamp(5px, 5%, 100px);
  height: 35px;
  width: 35px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555555' class='bi bi-x' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.file-opener-close:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23222222' class='bi bi-x' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/></svg>");
}
.file-opener-close:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555555' class='bi bi-x' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/></svg>");
}

/*fileOpenerのファイルを開くボタン*/
.file-opener-button {
  padding: 8px 16px;
  background-color: #1d7b22;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
}
.file-opener-button:hover {
  background-color: #268a2b;
}
.file-opener-button:active {
  background-color: #1d7b22;
}
/**fileOpenerのメッセージ*/
.file-opener-message {
  margin-top: 10px;
  color: #333;
}
/**ドラッグドロップのヒント*/
.file-opener-hint {
  font-size: 0.9em;
  color: #777;
}
/* #endregion */

/* #region video.js関連*/

/*動画プレイヤーコンテナ*/
.video-player-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
/**動画プレイヤー*/
.video-player {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  display: block;
}
/**動画プレイヤーのコントロールボックス*/
.video-player-control-box {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding: 5px;
  background-color: #444444;
}
/*動画プレイヤーの再生ボタン*/
.video-player-play-button {
  margin-left: 5px;
  margin-right: 5px;
  height: 29px;
  width: 45px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-play-fill' viewBox='0 0 16 16'><path d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-play-button:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-play-fill' viewBox='0 0 16 16'><path d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/></svg>");
}
.video-player-play-button:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-play-fill' viewBox='0 0 16 16'><path d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/></svg>");
}

/*動画プレイヤーの一時停止ボタン*/
.video-player-pause-button {
  margin-left: 5px;
  margin-right: 5px;
  height: 29px;
  width: 45px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-pause-fill' viewBox='0 0 16 16'><path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-pause-button:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-pause-fill' viewBox='0 0 16 16'><path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/></svg>");
}
.video-player-pausebutton:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-pause-fill' viewBox='0 0 16 16'><path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/></svg>");
}
/**動画プレイヤーのメインスクラブバーです。*/
.video-player-main-scrub-bar {
  margin-left: 4px;
  margin-right: 4px;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
}
/**動画プレイヤーのメインスクラブバーのハンドルです。*/
.video-player-main-scrub-handle {
  position: absolute;
  width: 9px;
  height: 17px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 3px #bbbbbb;
}
.video-player-main-scrub-handle:hover {
  background: #b5ff81;
}
.video-player-main-scrub-handle:active {
  background: #98d66c;
}
/**動画プレイヤーの時間（長さ）コントロール*/
.video-player-duration {
  border: 0px;
  outline: none;
  background-color: transparent;
  color: white;
  width: 110px;
  text-align: center;
}
/**動画プレイヤーの前フレーム*/
.video-player-prev-frame {
  height: 25px;
  width: 35px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-chevron-double-left' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-prev-frame:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-chevron-double-left' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
}
.video-player-prev-frame:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-chevron-double-left' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
}
/**動画プレイヤーの次フレーム*/
.video-player-next-frame {
  margin-right: 5px;
  height: 25px;
  width: 35px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-chevron-double-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-next-frame:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-chevron-double-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
}
.video-player-next-frame:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-chevron-double-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
}
/**動画プレイヤーのサウンド小*/
.video-player-volume-s {
  margin-left: 4px;
  height: 21px;
  width: 35px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-volume-s:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
}
.video-player-volume-s:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
}
/**動画プレイヤーのサウンド中*/
.video-player-volume-m {
  margin-left: 4px;
  height: 21px;
  width: 35px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-volume-m:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
}
.video-player-volume-m:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
}
/**動画プレイヤーのサウンド大*/
.video-player-volume-l {
  margin-left: 4px;
  height: 21px;
  width: 35px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z'/><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-volume-l:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z'/><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
}
.video-player-volume-l:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-volume-up-fill' viewBox='0 0 16 16'><path d='M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z'/><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/><path d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/></svg>");
}
/**動画プレイヤーのミュート*/
.video-player-volume-mute {
  margin-left: 4px;
  height: 21px;
  width: 35px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-volume-mute-fill' viewBox='0 0 16 16'><path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-volume-mute:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-volume-mute-fill' viewBox='0 0 16 16'><path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0'/></svg>");
}
.video-player-volume-mute:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-volume-mute-fill' viewBox='0 0 16 16'><path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0'/></svg>");
}

/**動画プレイヤーの音量調節バーです。*/
.video-player-volume-bar {
  margin-left: 6px;
  margin-right: 4px;
  width: 100px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #888888 0%, #888888 40%, #ffffff 40%, #ffffff 100%);
}
/**動画プレイヤーの音量調節バーのハンドルです。*/
.video-player-volume-handle {
  position: absolute;
  left: 700px;
  width: 9px;
  height: 17px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 3px #bbbbbb;
}
.video-player-volume-handle:hover {
  background: #b5ff81;
}
.video-player-volume-handle:active {
  background: #98d66c;
}
/*動画プレイヤーの情報ボタンです。*/
.video-player-info-button {
  margin-left: 8px;
  height: 25px;
  width: 25px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-info-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-info-button:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-info-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
}
.video-player-info-button:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-info-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
}
/*動画プレイヤーのファイルを開くボタンです。*/
.video-player-open-file {
  margin-left: 6px;
  margin-right: 6px;
  height: 25px;
  width: 25px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-folder2-open' viewBox='0 0 16 16'><path d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.video-player-open-file:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5ff81' class='bi bi-folder2-open' viewBox='0 0 16 16'><path d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z'/></svg>");
}
.video-player-open-file:active {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398d66c' class='bi bi-folder2-open' viewBox='0 0 16 16'><path d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z'/></svg>");
}

/*画像キャプチャー要素*/
.video-capture[data-overlap="true"] {
  position: relative;
}
/**画像キャプチャーの動画時間*/
.video-capture-time {
  margin: 3px;
}
/*画像キャプチャー要素の動画時間をオーバーラップ*/
.video-capture-time[data-overlap="true"] {
  position: absolute;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 1px;
  padding-bottom: 1px;
  left: 5px;
  top: 5px;
  border-radius: 5px;
  background-color: #ffffffaa;
}
/**画像キャプチャー要素のダウンロードリンク*/
.video-capture-download-link {
  margin: 3px;
}
/*画像キャプチャー要素のダウンロードリンクをオーバーラップ*/
.video-capture-download-link[data-overlap="true"] {
  position: absolute;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 1px;
  padding-bottom: 1px;
  right: 5px;
  bottom: 5px;
  border-radius: 15px;
  background-color: #000000aa;
  color: white;
  text-decoration: none;
  font-size: small;
}
/*画像キャプチャー要素のダウンロードリンクをオーバーラップ*/
.video-capture-download-link[data-overlap="true"]:hover {
  background-color: #333333aa;
}

/* #endregion */

/* #region YouTube関連*/

/**幅を基準としてYouTubeプレイヤーのコンテナの高さを16:9に維持します。*/
.ytplayer-16-9 {
  width: 100%; /* or 任意の幅 */
  height: auto; /* 自動で16:9に保たれる */
  aspect-ratio: 16 / 9;
}
/**幅を基準としてYouTubeプレイヤーのコンテナの高さを16:9に維持します。ページ幅が広くなると段々とプレイヤーの幅が狭くなります。*/
.ytplayer-16-9-gw {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (min-width: 576px) {
  /**幅を基準としてYouTubeプレイヤーの高さを16:9に維持します。ページ幅が広くなると段々とプレイヤーの幅が狭くなります。*/
  .ytplayer-16-9-gw {
    width: 90%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}
@media (min-width: 768px) {
  /**幅を基準としてYouTubeプレイヤーの高さを16:9に維持します。ページ幅が広くなると段々とプレイヤーの幅が狭くなります。*/
  .ytplayer-16-9-gw {
    width: 80%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}
@media (min-width: 992px) {
  /**幅を基準としてYouTubeプレイヤーの高さを16:9に維持します。ページ幅が広くなると段々とプレイヤーの幅が狭くなります。*/
  .ytplayer-16-9-gw {
    width: 70%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}
@media (min-width: 1200px) {
  /**幅を基準としてYouTubeプレイヤーの高さを16:9に維持します。ページ幅が広くなると段々とプレイヤーの幅が狭くなります。*/
  .ytplayer-16-9-gw {
    width: 60%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}
@media (min-width: 1400px) {
  /**幅を基準としてYouTubeプレイヤーの高さを16:9に維持します。ページ幅が広くなると段々とプレイヤーの幅が狭くなります。*/
  .ytplayer-16-9-gw {
    width: 50%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/**画面が横の時のスタイルです。*/
@media (orientation: landscape) {
  /**YouTubeプレイヤーをウィンドウにフィットさせます。*/
  .ytplayer-window-fit {
    width: 100%;
    height: 100vh;
  }
}

/**画面が縦の時のスタイルです。*/
@media (orientation: portrait) {
  /**YouTubeプレイヤーをウィンドウにフィットさせます。*/
  .ytplayer-window-fit {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}
/* #endregion */

/* #region BootstrapのAccordionボタンの独自装飾*/
/**BootstrapのAccordionボタンが展開されているときのprimary色スタイルです。*/
.accordion-button-primary:not(.collapsed) {
  color: #fff;
  background-color: var(--bs-primary);
}
.accordion-button-primary:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのsecondary色スタイルです。*/
.accordion-button-secondary:not(.collapsed) {
  color: #fff;
  background-color: var(--bs-secondary);
}
.accordion-button-secondary:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのsuccess色スタイルです。*/
.accordion-button-success:not(.collapsed) {
  color: #fff;
  background-color: var(--bs-success);
}
.accordion-button-success:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのdanger色スタイルです。*/
.accordion-button-danger:not(.collapsed) {
  color: #fff;
  background-color: var(--bs-danger);
}
.accordion-button-danger:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのinfo色スタイルです。*/
.accordion-button-info:not(.collapsed) {
  color: #000;
  background-color: var(--bs-info);
}
.accordion-button-info:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのwarning色スタイルです。*/
.accordion-button-warning:not(.collapsed) {
  color: #000;
  background-color: var(--bs-warning);
}
.accordion-button-warning:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのlight色スタイルです。*/
.accordion-button-light:not(.collapsed) {
  color: #000;
  background-color: var(--bs-light);
}
.accordion-button-light:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンが展開されているときのdark色スタイルです。*/
.accordion-button-dark:not(.collapsed) {
  color: #fff;
  background-color: var(--bs-dark);
}
.accordion-button-dark:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/**BootstrapのAccordionボタンがフォーカスされているときのスタイルです。*/
.accordion-button-no-shadow:focus {
  border-color: inherit;
  box-shadow: none;
}

/* #endregion */

/* #region ローダー*/

/**待機を示すローダーです。
  Copyright Luke Haas
  https://github.com/lukehaas/css-loaders
  Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
.loader {
  color: #000000;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loader 1.7s infinite ease, round 1.7s infinite ease;
  animation: loader 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes loader {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
      -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em,
      -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes loader {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
      -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em,
      -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* #endregion */

/* #region モーダルローダー*/

/**待機を示すモーダルに表示されるローダーです。
  Copyright Luke Haas
  https://github.com/lukehaas/css-loaders
  Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
.loader-modal {
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loader-modal 1.7s infinite ease, loader-modal-round 1.7s infinite ease;
  animation: loader-modal 1.7s infinite ease, loader-modal-round 1.7s infinite ease;
}
@-webkit-keyframes loader-modal {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
      -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em,
      -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes loader-modal {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
      -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em,
      -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes loader-modal-round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loader-modal-round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**loadingModalに表示されるリンクのスタイルです。*/
.link-white {
  color: white;
}
.link-white:hover {
  color: #cccccc;
}

/* #endregion */

/*ナビゲーションバーのリンク
.nav-link {
  cursor: pointer;
}*/

/*カード
.card {
  cursor: pointer;
}*/

/*カードのマウスオーバー
.card:hover {
  background-color: rgb(244, 244, 244);
}*/

/*もどるボタン
.back-button {
  cursor: pointer;
}*/

/*もどるボタンのマウスオーバー
.back-button:hover {
  color: darkgreen;
}*/

/**画面サイズが767px以下の場合（Bootstrapの.sm以下の場合）*/
@media screen and (max-width: 767px) {
  /*測定メニュー
  .measurement-menu {
    height: 50px;
    width: 100%;
    margin: 4px 6px;
    padding: 2px;
  }*/

  /**測定ページのメインパネル（測定メニュー左右に分割している）
  .measurement-main-panel {
    width: 100%;
  }*/

  /**測定用YouTubeプレイヤーエリア
  .measurement-player-area {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
  }*/

  /**測定用項目エリア
  .measurement-item-area {
    width: 100%;
    z-index: 0;
  }*/
}

/**画面サイズが767pxより大きい場合（Bootstrapの.md以上）*/
@media screen and (min-width: 767px) {
  /**測定メニュー
  .measurement-menu {
    width: 50px;
    position: sticky;
    top: 0;
    z-index: 101;
    height: 100%;
    margin: 1px 1px;
    padding: 2px;
  }*/

  /**測定ページのメインパネル（測定メニュー左右に分割している）
  .measurement-main-panel {
    width: calc(100% - 51px);
  }*/

  /**測定用YouTubePlayerエリア
  .measurement-player-area {
    width: 60%;
    position: sticky;
    top: 0;
    z-index: 100;
  }*/

  /**測定用項目エリア
  .measurement-item-area {
    width: 40%;
    position: sticky;
    top: 0;
    max-height: var(--measurementItemMaxHeight);
    overflow-y: scroll;
    z-index: 100;
  }*/

  /**測定用データセットエリア
  .measurement-dataset-area {
    max-height: var(--datasetContainerMaxHeight);
  }*/
}

/*測定メニューのボタン
.measurement-menu-button:hover {
  border: 1px solid #000000;
  background-color: white;
  box-shadow: 3px 1px 1px gray;
}

.measurement-menu-button:active {
  border: 1px solid #000000;
  background-color: rgb(221, 221, 221);
  box-shadow: 3px 1px 1px gray;
}*/

/*測定項目のラジオボタン
.measurement-interface-radio {
  display: none;
}

.measurement-interface-radio + label {
  padding: 3px 10px 5px 10px;
  margin-left: 3px;
  white-space: nowrap;
}

.measurement-interface-radio:checked + label {
  background-color: rgb(153, 180, 242);
  padding: 3px 10px 5px 10px;
  margin-left: 3px;
  border-radius: 5px;
  white-space: nowrap;
}*/

/*測定項目のチェックボックス
.measurement-interface-check {
  display: none;
}

.measurement-interface-check + label {
  padding: 3px 10px 5px 10px;
  margin-left: 3px;
  white-space: nowrap;
}

.measurement-interface-check:checked + label {
  background-color: rgb(235, 159, 108);
  padding: 3px 10px 5px 10px;
  margin-left: 3px;
  border-radius: 5px;
  white-space: nowrap;
}*/

/* #region 値ラベル関連*/

/**値ラベルの編集テーブル*/
.valueLabelEditTable {
  width: 100%;
  table-layout: fixed;
}
/**値ラベル編集テーブルの行を移動させるためのハンドルを格納するセル*/
.valueLabelEditTdHandle {
  padding: 2px;
  width: 16px;
}
/**値ラベル編集テーブルの行を移動させるためのハンドル*/
.valueLabelEditHandle {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666666' class='bi bi-three-dots-vertical' viewBox='0 0 16 16'><path d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/></svg>");
  background-repeat: no-repeat;
}
.valueLabelEditHandle:hover {
  cursor: pointer;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' class='bi bi-three-dots-vertical' viewBox='0 0 16 16'><path d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/></svg>");
}

/**値ラベル編集テーブルの行番号のセル*/
.valueLabelEditTdIndex {
  padding: 2px 4px 2px 2px;
  text-align: end;
  width: 2em;
  text-wrap: none;
}
/**値ラベル編集テーブルの値テキストボックスを格納するセル*/
.valueLabelEditTdValue {
  padding: 2px;
  width: 40%;
}
/**値ラベル編集テーブルのラベルテキストボックスを格納するセル*/
.valueLabelEditTdLabel {
  padding: 2px;
  width: auto;
}
/**値ラベル編集テーブルの削除ボタンを格納するセル*/
.valueLabelEditTdRemove {
  padding: 2px 2px 2px 2px;
  width: 25px;
}
/* #endregion */

/* #region データセットのテーブル*/

/*データセットのテーブルを水平疑似スクロール可能にするためのコンテナ*/
.ds-table-container-vfixed {
  overflow: auto;
  width: 100%;
  height: 100%;
}
/*データセットのテーブルを水平疑似スクロール可能にするためのラッパー*/
.ds-table-wrapper-hscrollable {
  overflow-x: auto;
  width: 100%;
  scrollbar-color: #00000000 #00000000; /*本来のスクロールバーは透明にする*/
  margin-bottom: 9px; /*疑似スクロールバーのスペース*/
}
/*データセットのテーブルの疑似水平スクロールバー*/
.ds-table-fake-scrollbar {
  position: relative;
  width: 100%;
  height: 8px;
  background: #ffffff;
  opacity: 50%;
  touch-action: none;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 1;
}
/*データセットのテーブルの疑似水平スクロールバーのつまみ部分*/
.ds-table-fake-thumb {
  position: absolute;
  height: 100%;
  background: #888888;
  border-radius: 5px;
  cursor: pointer;
}
.ds-table-fake-thumb:hover {
  background: #555555;
}

/* 先頭行を固定 */
.ds-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--ds-header-color);
  border: 1px solid var(--ds-border-color);
}
/* 先頭列を固定 */
.ds-table-sticky th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--ds-header-color);
  border: 1px solid var(--ds-border-color);
}
/* ヘッダーの左上セルだけ最前面に */
.ds-table-sticky thead th:first-child {
  z-index: 3;
  background-color: var(--ds-header-color);
  border: 1px solid var(--ds-border-color);
}
/*データセットテーブル*/
.ds-table {
  border-collapse: separate;
  border-spacing: 0; /* collapse に近い見た目 */
  text-align: left;
  vertical-align: top;
  cursor: default;
  user-select: none;
  background-color: var(--ds-cell-color);
  border: 1px solid var(--ds-border-color);
}

/*データセットテーブルの列見出し*/
.ds-table thead th {
  color: #333;
  font-weight: bold;
  text-align: left;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  background-color: var(--ds-header-color);
  border: 1px solid var(--ds-border-color);
}
/*データセットテーブルのボディのth要素*/
.ds-table tbody th {
  padding-top: 1px;
  padding-left: 2px;
  padding-bottom: 1px;
  padding-right: 2px;
  text-align: right;
  font-weight: 200;
  font-family: "Consolas", "Menlo", "Monaco", "Courier New", "monospace"; /*等幅フォント*/
  background-color: var(--ds-header-color);
  border: 1px solid var(--ds-border-color);
}
/*データセットテーブルのボディのtd要素*/
.ds-table tbody td {
  padding-top: 1px;
  padding-left: 2px;
  padding-bottom: 1px;
  padding-right: 2px;
  text-align: left;
  min-width: 50px;
  border: 1px solid var(--ds-border-color);
}
/*データセットのテーブルのアクティブレコード*/
.ds-table tbody tr[data-is-active="true"] th {
  border-top: 2px solid rgb(50, 122, 255);
  border-left: 2px solid rgb(50, 122, 255);
  border-bottom: 2px solid rgb(50, 122, 255);
}
.ds-table tbody tr[data-is-active="true"] td {
  border-top: 2px solid rgb(50, 122, 255);
  border-bottom: 2px solid rgb(50, 122, 255);
}
.ds-table tbody tr[data-is-active="true"] > td:last-of-type {
  border-top: 2px solid rgb(50, 122, 255);
  border-right: 2px solid rgb(50, 122, 255);
  border-bottom: 2px solid rgb(50, 122, 255);
}
/*データセットのテーブルの選択レコード*/
.ds-table tbody tr[data-is-selected="true"] {
  background-color: #9ecbff;
}
.ds-table-selected-row {
  background-color: #9ecbff !important;
}
/**選択チェックボックスの幅が縮まらないようにする*/
.d-flex .form-check-input {
  flex: 0 0 auto;
}

/**入力されたばかりのセル*/
.just-inputed-td {
  background-color: rgb(255, 156, 255);
  /* 背景色を透明に設定 */
  transition: 0.5s;
  /* 遷移の遅延を2秒に設定 */
}

.just-inputed-td-fadeout {
  background-color: transparent;
  /* 背景色を透明に設定 */
  transition: 2s;
  /* 遷移の遅延を2秒に設定 */
}
/* #endregion */

/* #region 測定項目インターフェース*/

/**測定項目インターフェースのコンテナ*/
.mi-interface-container {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  height: 100%;
  width: 100%;
}
/**測定項目インターフェースのアイテム（ヘッダーとパネルを格納）*/
.mi-interface-item {
  border-top: 1px solid var(--border-color-dark);
}
/*測定項目インターフェースのcollapseヘッダー*/
.mi-interface-header {
  position: relative;
  padding-left: 24px;
  /*cursor: pointer;*/
  justify-content: space-between;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
/* ::before で chevron-down 表示 */
.mi-interface-header::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
/* アクティブ時 */
.mi-interface-header.active {
  background-color: #9ecbff;
}
.mi-interface-header.active::before {
  transform: translateY(-50%) rotate(180deg); /*矢印を180度回転*/
}
/**測定項目インターフェースのコラプス*/
.mi-interface-collapse {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  min-height: 20px;
}
/**測定項目インターフェースのクリアボタン*/
.mi-interface-clear-button {
  width: 1.5em;
  height: 1.5em;
  border: 1px solid var(--bs-secondary);
  border-radius: 8px;
  background-color: white;
  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-eraser-fill' viewBox='0 0 16 16'><path d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  padding: 3px 8px 4px 8px;
  transition: all 0.3s 0s ease;
}
.mi-interface-clear-button:hover {
  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-eraser-fill' viewBox='0 0 16 16'><path d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z'/></svg>");
  background-color: var(--bs-secondary);
  transition: all 0.3s 0s ease;
}
/* #endregion */

/* #region ドロップメニュー*/

/**ドロップメニュー*/
.dropmenu {
  position: absolute;
  border: 1px solid gray;
  border-radius: 8px;
  box-shadow: 2px 2px 3px;
  background-color: white;
  z-index: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 150px;
}
/**ドロップメニューアイテム（クリックするだけのメニュー）*/
.dropmenu-item {
  cursor: pointer;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 20px;
}
/**ドロップメニューアイテムの上側に区切り線を引く*/
.dropmenu-separator {
  border-top: 1px solid #888888;
}
.dropmenu-item:hover {
  background-color: #eeeeee;
}
.dropmenu-item:active {
  background-color: var(--bs-secondary);
  color: white;
}
/**ドロップコラプスメニュー（展開・格納可能なメニュー）*/
.dropmenu-item-collapse {
  cursor: pointer;
  position: relative;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 20px;
}
.dropmenu-item-collapse::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
.dropmenu-item-collapse:hover {
  background-color: #eeeeee;
}
.dropmenu-item-collapse.active::after {
  transform: translateY(-50%) rotate(180deg); /*矢印を180度回転*/
}
/**ドロップダウンコラプスボディ（展開・格納されるアイテム）*/
.dropmenu-item-collapse-body {
  margin: 3px;
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/**ドロップダウンダウンコラプス内に配置されるボタン*/
.dropmenu-button {
  border: 1px solid var(--bs-secondary);
  border-radius: 4px;
  background-color: white;
  font-size: 0.9em;
  text-wrap: none;
  color: var(--bs-secondary);
  padding: 3px 8px 4px 8px;
  transition: all 0.3s 0s ease;
}
.dropmenu-button:hover:not(:disabled)[data-selected="false"] {
  background-color: #dddddd;
  transition: all 0.3s 0s ease;
}
.dropmenu-button[data-selected="true"] {
  background-color: var(--bs-secondary);
  color: white;
}
.dropmenu-button:disabled {
  border: 1px solid #cccccc;
  color: #cccccc;
}

/* #endregion */

/* 下から上に移動しながらフェードイン */
.fadeInUp {
  opacity: 0;
  transform: translateY(100px);
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* 上から下に移動しながらフェードイン */
.fadeInDown {
  opacity: 0;
  transform: translateY(-100px);
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* 右から左に移動しながらフェードイン */
.fadeInLeft {
  opacity: 0;
  transform: translateX(-100px);
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* 左から右に移動しながらフェードイン */
.fadeInRight {
  opacity: 0;
  transform: translateX(100px);
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  0% {
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.fadeOut {
  animation: fadeOut 2s;
  /*keyframesで命名したものを使う。2秒間で消える*/
  animation-fill-mode: both;
  /*0%の時と100%の時の状態を保つ*/
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    /*初めに存在する*/
  }

  100% {
    opacity: 0;
    /*最後に消える*/
  }
}

/*YouTubeプレイヤーの再生ボタン*/
.youtube-player-play-button {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: #ff0000;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  cursor: pointer;
}

.youtube-player-play-button:hover {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: linear-gradient(90deg, #ffb2b2 0%, #ff0000 100%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  cursor: pointer;
}

.youtube-player-play-button:active {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: linear-gradient(90deg, #d39a9a 0%, #db0000 100%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  cursor: pointer;
}

/**YouTubeプレイヤーの一時停止ボタン*/
.youtube-player-pause-button {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: #ff0000;
  clip-path: inset(10% 60% 0% 0%);
  cursor: pointer;
}

.youtube-player-play-button:hover {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: linear-gradient(90deg, #ffb2b2 0%, #ff0000 100%);
  clip-path: inset(0% 70% 0% 0%);
  cursor: pointer;
}

.youtube-player-play-button:active {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: linear-gradient(90deg, #d39a9a 0%, #db0000 100%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  cursor: pointer;
}

.youtube-player-scrab-bar {
  appearance: none;
  width: 100%;
  height: 12px;
  border: 2px solid #ffffff;
  background: linear-gradient(90deg, #ff0000 30%, #dddddd 30%);
  cursor: pointer;
}

/* ツマミ：Chrome, Safari, Edge用 */
.youtube-player-scrab-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 20px;
  border: 2px solid #ffffff;
  background: #ff0000;
  box-shadow: none;
}

/* ツマミ：Firefox用 */
.youtube-player-scrab-bar::-moz-range-thumb {
  border-radius: 0;
  width: 6px;
  height: 20px;
  border: 2px solid #ffffff;
  background: #ff0000;
  box-shadow: none;
}

/**ツールチップのinformationマーク*/
.tooltipInformation:hover {
  color: gray;
}

/**デコレーションなしのリンク*/
.no-decoration-link {
  color: #000000;
  text-decoration: none;
}