.screen {
  position: relative;
  background-color: black;
  width: 100%;
  height: 100%;
}

.screen canvas, .screen .in_screen {
  position: absolute;
  top: 0;
  left: 0;
}

#controls {
  position: relative;
  /*left: 0;
  bottom: 0;*/
  width: 100%;
  height: 100%;
  background-color: #101010;
  /* opacity: 0.92; */
  /* opacity: 0.75; */
}

#controls .btn {
  position: absolute;
  /* top: 48px; */
  width: 34px;
  height: 34px;
  text-align: center;
  font-size: 16px;
  color: #F0F0F0;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

#controls .btn:hover {
  background-color: #303030;
}

#controls .btn:not(:disabled):not(.disabled).active,
#controls .btn:not(:disabled):not(.disabled):active
{
  background-color: #404040;
}

.current_time {
  padding-top: 4px;
  position: absolute;
  width: 50px;
  height: 34px;
  text-align: right;
  font-size: 16px;
  color:#F0F0F0;
  /* user-select: none; */
}

#current_time1 {
  /*
  left: 240px;
  top: 48px;
  */
  left: 0;
  top: 0;
}

.slash {
  padding-top: 4px;
  position: absolute;
  width: 6px;
  height: 34px;
  text-align: center;
  font-size: 16px;
  color:#F0F0F0;
  /* user-select: none; */
}

#slash1 {
  /*
  left: 296px;
  top: 48px;
  */
  left: 56px;
  top: 0;
}

.total_time {
  padding-top: 4px;
  position: absolute;
  width: 50px;
  height: 34px;
  text-align: left;
  font-size: 16px;
  color:#F0F0F0;
  /* user-select: none; */
}

#total_time1 {
  /*
  left: 308px;
  top: 48px;
  */
  left: 68px;
  top: 0;
}

#controls #playback_button2 {
  left: 113px;
  top: 0;
}

#controls #full_screen_btn1 {
  right: 0;
  top: 0;
}

#controls #loop_btn {
  right: 34px;
  top: 0;
  color: #bbb;
}

#controls #eco_mode_btn {
  right: 68px;
  top: 0;
}

#controls #playback_rate_slider {
  position: absolute;
  right: 102px;
  bottom: 0;
  width: 100px;
  height: 34px;
}

#controls #playback_rate_icon {
  padding: 0;
  position: absolute;
  right: 244px;
  bottom: 0;
  /*
  width: 48px;
  height: 48px;
  display: 16px;
  text-align: center;
  color: #F0F0F0;
  */
}

/*
#controls #seek_bar {
  position: absolute;
  left: 122px;
  top: 0;
  width: calc(100% - 118px - 144px - 148px - 8px);
  height: 48px;
}
*/

.seek_bar {
  position: absolute;
  height: 34px;
  background-color: transparent;
}

#seek_bar1 {
  /* left: 4px; */
  /* left: 122px; */
  left: 165px;
  top: 0;
  width: calc(100% - 113px - 34px - 102px - 134px - 8px);
}

#controls #chapter {
  /* -webkit-appearance: menulist-button; */
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: calc(100% - 8px);
  height: 26px;
  /* font-size: 16px; */
}

#controls #top_block_btn {
  left: 0;
}

#controls #prev_block_btn {
  left: 34px;
}

#controls #play_btn {
  left: 68px;
}

#controls #next_block_btn {
  left: 102px;
}

/*
#controls #volume_icon {
  padding: 0;
  position: absolute;
  width: 24px;
  height: 24px;
  font-size: 16px;
  text-align: center;
  color: #F0F0F0;
}

#controls #volume_slider {
  position: absolute;
  width: 70px;
  height: 48px;
}
*/

.reference_url {
  overflow: visible;
  position: absolute;
}

.reference_url span{
  white-space: nowrap;
}

#controls #indicator {
  display: none;
  position: absolute;
  padding: 4px 8px;
  top: -64px;
  left:100px;
  color: #ddd;
  font-size: 32px;
  background-color:#333;
  border: solid 2px #ddd;
  border-radius: 8px;
  opacity: 0.85;
}

/* シークバー上のブロックの区切り線 */
.block_separator {
  position: absolute;
  border-left: solid 1px #F0F0F0;
  /* top: 18px; */
  width: 1px;
  height: 12px;
}

.block_separator2 {
  position: absolute;
  border-left: solid 1px white;
  top: 23px;
  width: 1px;
  height: 12px;
}


/* ■以下スライダ関連■ */
input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  /* background-color: #101010; */
  background-color: transparent;
}

input[type=range]:focus {
  outline: none;
}

/* WebKit・Blink向け 溝のスタイル */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  background: #F0F0F0;
  border-radius: 1.5px;
  cursor: pointer;
}
/* WebKit・Blink向け つまみのスタイル */
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #F0F0F0;
  -webkit-appearance: none;
  /* 以下は つまみの縦位置調整 */
  margin-top: -8px; /*  (つまみの高さ - トラックの高さ) / 2 。つまみの高さは border を含む */
  cursor: pointer;
}
#seek_bar2::-webkit-slider-thumb {
  background: white;
}

/* 何故か上の margin-top 指定が Edge に効いてしまうので、Edge向けに設定をリセット */
@supports (-ms-ime-align: auto) {
	input[type=range]::-webkit-slider-thumb {
		margin-top: 0 !important;
	}
}

/* WebKit・Blink向け focus時のスタイル */
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #F0F0F0;
}
#seek_bar2:focus::-webkit-slider-runnable-track {
  background: white;
}

/* Firefox向け 溝のスタイル */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  background: #F0F0F0;
  border-radius: 1.5px;
  cursor: pointer;
}
#seek_bar2::-moz-range-track {
  background: white;
}
/* Firefox向け つまみのスタイル */
input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #F0F0F0;
  -webkit-appearance: none;
  cursor: pointer;
}
#seek_bar2::-moz-range-thumb {
  background: white;
}

/* Edge・IE向け 溝のスタイル */
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  background: #F0F0F0;
  border-radius: 1.5px;
  cursor: pointer;
}
#seek_bar2::-ms-track {
  background: white;
}
/* Edge・IE向け 溝の色（つまみより左側） */
input[type=range]::-ms-fill-lower {
  background: #F0F0F0;
  border-radius: 1.5px;
}
#seek_bar2::-ms-fill-lower {
  background: white;
}
/* Edge・IE向け 溝の色（つまみより右側） */
input[type=range]::-ms-fill-upper {
  background: #F0F0F0;
  border-radius: 1.5px;
}
#seek_bar2::-ms-fill-upper {
  background: white;
}
/* Edge・IE向け つまみのスタイル */
input[type=range]::-ms-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #F0F0F0;
  -webkit-appearance: none;
  cursor: pointer;
}
#seek_bar2::-ms-thumb {
  background: white;
}
/* Edge・IE向け focus時の色（つまみより左側） */
input[type=range]:focus::-ms-fill-lower {
  background: #F0F0F0;
}
#seek_bar2:focus::-ms-fill-lower {
  background: white;
}
/* Edge・IE向け focus時の色（つまみより右側） */
input[type=range]:focus::-ms-fill-upper {
  background: #F0F0F0;
}
#seek_bar2:focus::-ms-fill-upper {
  background: white;
}

/* Edge・IE向け ポップアップを非表示に */
input[type=range]::-ms-tooltip {
  display: none;
}

#seek_bar1::-webkit-slider-thumb, #seek_bar2::-webkit-slider-thumb {
  height: 30px;
  width: 30px;
  margin-top: -12px; /*  (つまみの高さ - トラックの高さ) / 2 。つまみの高さは border を含む */
}

#seek_bar1::-moz-range-thumb, #seek_bar2::-moz-range-thumb {
  height: 30px;
  width: 30px;
}

#seek_bar1::-ms-thumb, #seek_bar2::-ms-thumb {
  height: 30px;
  width: 30px;
}

#seek_bar1::-webkit-slider-runnable-track {
  /* background: #0066cc; */
  height: 6px;
  background: linear-gradient(to right, #0066cc 0%, #333 0%);
}
#seek_bar2::-webkit-slider-runnable-track {
  /* background: #0066cc; */
  height: 6px;
  background: linear-gradient(to right, #0066cc 0%, white 0%);
}
#seek_bar1::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, #0066cc 0%, #333 0%);
}
#seek_bar2::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, #0066cc 0%, white 0%);
}
#seek_bar1::-ms-track, #seek_bar2::-ms-track {
  height: 6px;
  background: #0066cc;
}
/* Edge・IE向け 溝の色（つまみより左側） */
#seek_bar1::-ms-fill-lower, #seek_bar2::-ms-fill-lower {
  background: #0066cc;
}
/* Edge・IE向け 溝の色（つまみより右側） */
#seek_bar1::-ms-fill-upper {
  background: #333;
}
/* Edge・IE向け 溝の色（つまみより右側） */
#seek_bar2::-ms-fill-upper {
  background: white;
}

/*
#controls #seek_bar::-webkit-slider-thumb {
  height: 30px;
  width: 30px;
  margin-top: -12px; /*  (つまみの高さ - トラックの高さ) / 2 。つまみの高さは border を含む * /
}

#controls #seek_bar::-moz-range-thumb {
  height: 30px;
  width: 30px;
}

#controls #seek_bar::-ms-thumb {
  height: 30px;
  width: 30px;
}

#controls #seek_bar::-webkit-slider-runnable-track {
  /* background: #0066cc; * /
  height: 6px;
  background: linear-gradient(to right, #0066cc 0%, #F0F0F0 0%);
}
#controls #seek_bar::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, #0066cc 0%, #F0F0F0 0%);
}
#controls #seek_bar::-ms-track {
  height: 6px;
  background: #0066cc;
}
/* Edge・IE向け 溝の色（つまみより左側） * /
#controls #seek_bar::-ms-fill-lower {
  background: #0066cc;
}
/* Edge・IE向け 溝の色（つまみより右側） * /
#controls #seek_bar::-ms-fill-upper {
  background: #F0F0F0;
}
*/

#link_layer {
  display: table;
  text-align: center;
}

#link_area {
  display: table-cell;
  vertical-align: middle;
}

#link_area a {
  text-decoration: underline;
}

.answer_layer {
  position: absolute;
}

.answer {
  position: absolute;
  background-color: blue;
  opacity: 0.3;
}

.answer:hover {
  background-color: blueviolet;
}

.answer:active {
  background-color: darkblue;
}

.loading_layer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.loading {
  display: table-cell;
  vertical-align: middle;
  font-size: 2rem;
  color: #444;
  font-weight: 500;
}

canvas { -webkit-backface-visibility: hidden; } /* canvas軽量化 */
input[type="range"]::-moz-focus-outer { border: 0; } /* Firefox 点線無効 */

/* ダミータッチエリア */
#touch_area { position: absolute; top: 0; left: 0; pointer-events: none; }
#touch_area > div { display: inline-block; width:calc(100% / 12); font-size: 4vw; color: #009; background: #99f; opacity: 0; }

/* モーダルフッター */
.modal-footer { padding: 0.5rem; }
.modal-footer > .btn-sm { font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.4); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.modal-footer > .button-sm { font-size: 13px; /* box-shadow: 0 1px 4px rgba(0,0,0,.4); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.4); */ }

/* .modal-xl対応 */
.modal-content { user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

@media (max-width: 991px) {
  #player_modal .modal-dialog {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    margin: 0;
  }

  #player_modal .modal-content {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  #player_modal .modal-body {
    height: calc( 100% - 34px );
    min-height: calc( 100% - 34px );
    max-height: calc( 100% - 34px );
    padding: 0;
  }

  #player_modal .modal-footer {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0;
    border: 0;
  }
}

@media (min-width: 992px) {
	.modal-xl { max-width: 992px; }
	.modal-xl .modal-content { height: 613px; }
	.modal-xl .modal-body { padding: 0.5rem calc(0.5rem - 1px); }
	#web_player { width: 976px; height: 549px; }
	.loading { font-size: 1.6rem; }
}

@media (min-width: 1200px) {
	.modal-xl { max-width: 1200px; }
	.modal-xl .modal-content { height: 730px; }
	#web_player { width: 1184px; height: 666px; }
	.loading { font-size: 2rem; }
}

@media (min-width: 1800px) { /* 巨大モーダル */
	.modal-xl { max-width: 1800px; }
	.modal-xl .modal-body { padding: 0.625rem calc(0.625rem + 1px); }
	.modal-xl .modal-content { height: 1067px; }
	#web_player { width: 1776px; height: 999px; }
	.loading { font-size: 3rem; }
}

#player_modal { padding: 0 !important; }


#playback_buttons_layer {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  display: none;
}

#playback_buttons_area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  width: 100%;
  height: 10vw;
  font-size: 10vw;
  line-height:10vw;
  color: white;
  /* background-color: red; */
}

.playback_buttons {
  display: block;
  width: 10vw;
  height: 10vw;
  position: absolute;
  top: 50%;
  left: 50%;
}

.playback_buttons svg {
  pointer-events: none;
}

.playback_buttons:hover {
  opacity: 0.75;
}

.playback_buttons:active {
  opacity: 0.5;
}

#prev_block_button {
  transform: translate( -200%, -50% );
}

#playback_button {
  transform: translate( -50%, -50% );
}

#next_block_button {
  transform: translate( 100%, -50% );
}

.disabled_block_button {
  opacity: 0.15;
}

 .disabled_block_button:active {
  opacity: 0.15;
  pointer-events: none;
}

.disabled_block_button:hover {
  opacity: 0.15;
}

#seek_bar_area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, calc(50% + 32px) );
  width: 100%;
  height: 10vw;
  color: white;
  /* background-color: green; */
  display: none;
}

#current_time2 {
  left: 0;
  top: 12px;
  color: white;
}

#slash2 {
  left: 56px;
  top: 12px;
  color: white;
}

#total_time2 {
  left: 68px;
  top: 12px;
  color: white;
}

#seek_bar2 {
  /* left: 4px; */
  left: 122px;
  top: 12px;
  width: calc(100% - 118px - 34px - 8px);
  opacity: 1;
}

#full_screen_btn2 {
  position: absolute;
  right: 0;
  top: 12px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: white;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

#player_modal .button {
  font-weight: 400;
}

#player_modal_footer .button {
  border-radius: 0.25rem;
  padding: 4px 5px 1px;
  margin-top: 0;
  margin-bottom: 0;
}

#player_modal_footer .button:hover {
  margin-top: 1px;
}

#player_modal_footer .button:active {
  margin-top: 2px;
}