@charset "UTF-8";
/* レイアウト */
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Arial", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 接続ボタン */
  /* プレイヤー */
  /* フッター */
}
body #header {
  line-height: 39px;
  width: 90%;
  height: 40px;
  margin: 10px 5%;
  margin-bottom: 15px;
  border: 1px solid;
  border-radius: 10px;
  border-color: #888888;
  background: #4676d7;
  color: #fff;
  cursor: pointer;
  position: relative;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
  /* テキスト */
}
body #header:hover {
  background: #2a5cc0;
  color: #bfbfbf;
}
body #header #connect {
  position: absolute;
  height: 40px;
  top: 2px;
  width: 100%;
  letter-spacing: 0.2rem;
  font-weight: 400;
  font-size: 28px;
  text-align: center;
}
body #player {
  width: 100%;
  display: flex;
  /* 左側 */
  /* 右側 */
}
body #player #left-bar {
  width: 65%;
  /* ビデオ */
  /* コントローラー */
  /* アララ */
}
body #player #left-bar #video {
  width: 96%;
  margin: 0 2%;
  display: block;
}
body #player #left-bar #connectedDisplay {
  width: 96%;
  height: 60px;
  margin: 0 2%;
  display: flex;
  font-size: 42px;
  background: #7b507e;
}
body #player #left-bar #connectedDisplay #announce {
  height: 60px;
  width: 50%;
  position: relative;
}
body #player #left-bar #connectedDisplay #announce #first {
  position: absolute;
  height: 60px;
  top: 4px;
  left: 8px;
}
body #player #left-bar #connectedDisplay #cButton {
  width: 50%;
  margin: 0;
  display: flex;
  justify-content: space-around;
}
body #player #left-bar #connectedDisplay #cButton p {
  height: 50px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 0 10px;
  background: #b1a4b4;
  font-size: 36px;
  line-height: 50px;
  margin: auto;
}
body #player #left-bar #connectedDisplay #cButton p:hover {
  cursor: pointer;
  background: #d0c8d2;
}
body #player #left-bar #connectedDisplay #cButton p:active {
  cursor: pointer;
  background: #a596a8;
}
body #player #left-bar #link {
  display: flex;
  margin: 0 2%;
  width: 96%;
}
body #player #left-bar #link .waku1 {
  margin: 9px;
  border-radius: 0px;
  border: 1px solid;
  box-sizing: border-box;
}
body #player #left-bar #link .waku1 .waku2 {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body #player #left-bar #link .waku1 .waku2 p {
  margin-top: 1%;
  margin-bottom: 0%;
  background: skyblue;
  text-align: center;
  font-size: 1em;
  border-radius: 0px;
  border-top: 1px solid;
  box-sizing: border-box;
  margin-top: auto;
}
body #player #left-bar #link #sponcer {
  width: 25%;
}
body #player #left-bar #link #sponcer img {
  width: 100%;
}
body #player #left-bar #link #kokoku {
  width: 75%;
}
body #player #left-bar #link #kokoku .center img {
  width: 80%;
  height: 100%;
}
body #player #left-bar #link #kokoku img {
  margin-left: 20px;
  margin-top: 5px;
}
body #player #right-bar {
  width: 35%;
  margin-bottom: 50px;
  /* 再生モードとファイル追加ボタン */
}
body #player #right-bar #right-input-panel {
  display: flex;
  font-size: 20px;
  line-height: 25px;
  font-family: sans-serif;
  font-weight: 400;
  /* 再生モード */
}
body #player #right-bar #right-input-panel #start {
  width: 50%;
  height: 40px;
  border-radius: 30px;
  border: 3px solid;
  box-sizing: border-box;
  border-color: rgb(40, 177, 40);
  display: block;
  cursor: pointer;
}
body #player #right-bar #right-input-panel #start:hover {
  background: rgba(40, 177, 40, 0.3);
}
body #player #right-bar #right-input-panel #start:active {
  background: rgba(40, 177, 40, 0.7);
}
body #player #right-bar #right-input-panel #start span {
  margin-top: 6px;
  display: block;
  text-align: center;
}
body #player #right-bar #right-input-panel label {
  width: 50%;
  height: 40px;
  margin: 0 2%;
  border-radius: 30px;
  border: 3px solid;
  box-sizing: border-box;
  border-color: orange;
  display: block;
  cursor: pointer;
}
body #player #right-bar #right-input-panel label:hover {
  background: rgba(255, 165, 0, 0.3);
}
body #player #right-bar #right-input-panel label:active {
  background: rgba(255, 165, 0, 0.7);
}
body #player #right-bar #right-input-panel label span {
  margin-top: 6px;
  display: block;
  text-align: center;
}
body #player #right-bar ul {
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body #player #right-bar ul #original-li {
  visibility: hidden;
  display: none;
}
body #player #right-bar ul #nowPlaying {
  background: deepskyblue;
}
body #player #right-bar ul .blue-background-class {
  background: #C8EBFB;
}
body #player #right-bar ul .record {
  width: 98%;
  height: 86px;
  margin-top: 2px;
  margin-bottom: -4px;
  margin-right: 2%;
  box-sizing: border-box;
  border: 2px solid;
  border-color: pink;
  display: flex;
  align-items: center;
  cursor: grab;
}
body #player #right-bar ul .record .number-class {
  min-width: 8%;
  max-width: 8%;
  text-align: center;
  font-size: large;
  font-weight: 100;
}
body #player #right-bar ul .record .input-buttons {
  min-width: 82%;
}
body #player #right-bar ul .record .input-buttons .input-media {
  height: 38px;
  border-bottom: 1px solid;
  border-color: green;
  box-sizing: border-box;
  display: flex;
  font-size: large;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
body #player #right-bar ul .record .input-buttons .input-media .input-media-text {
  width: 100%;
  margin: 13px auto 0 0;
}
body #player #right-bar ul .record .input-buttons .input-csv {
  height: 46px;
  display: flex;
}
body #player #right-bar ul .record .input-buttons .input-csv .input-label {
  margin: auto 0;
}
body #player #right-bar ul .record .input-buttons .input-csv .input-label .input-csv-exp {
  padding: 7px 7px;
  border: 1px solid;
  border-radius: 20px;
  box-sizing: border-box;
  border-color: #C8EBFB;
  background: #C8EBFB;
  cursor: pointer;
}
body #player #right-bar ul .record .input-buttons .input-csv .input-label .input-csv-exp:hover {
  background: #98daf8;
}
body #player #right-bar ul .record .input-buttons .input-csv .input-label input {
  display: hidden;
  visibility: hidden;
}
body #player #right-bar ul .record .input-buttons .input-csv .input-csv-text {
  width: 50%;
  margin: auto 0;
  margin-left: 5px;
}
body #player #right-bar ul .record .delete-class {
  min-width: 8%;
  height: 50px;
  margin: auto 1%;
  box-sizing: border-box;
  border-color: green;
  border-radius: 10px;
  background: white;
}
body #player #right-bar ul .record .delete-class .delete-label {
  width: 100%;
  height: 100%;
  margin: auto 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
body #player #right-bar ul .record .delete-class .delete-label .delete-button {
  display: none;
}
body #player #right-bar ul .record .delete-class .delete-label .delete-text {
  margin: auto;
  display: block;
  width: 73px;
  height: 100%;
}
body #player #right-bar ul .record .delete-class .delete-label .delete-text:hover {
  background: #98daf8;
  border-radius: 10px;
}
body #player #right-bar ul .record .delete-class .delete-label .delete-text:active {
  background: #c8ebfb;
  border-radius: 10px;
}
body #footer {
  height: 30px;
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  background: #3a3a3a;
}
body #footer div {
  width: 30%;
  text-align: center;
  margin-top: 3px;
}
body #footer div a {
  font-size: larger;
  color: rgb(185, 185, 185);
  text-decoration: none;
}
body #footer div a:hover {
  color: white;
}
body #modal-content {
  width: 90%;
  height: 50vh;
  left: 0;
  right: 0;
  margin: 2em auto 0;
  padding: 10px 20px;
  border: 2px solid #aaa;
  background: #fff;
  z-index: 99;
  position: fixed;
}
body #modal-content img {
  width: 23%;
  margin: 1%;
}

@media screen and (max-width: 1100px) {
  /* レイアウト */
  body {
    /* 接続ボタン */
    /* プレイヤー */
  }
  body #header {
    margin: 10px 5%;
    margin-bottom: 10px;
    /* テキスト */
  }
  body #player {
    flex-direction: column;
    /* 左側 */
    /* 右側 */
  }
  body #player #left-bar {
    width: 100%;
    /* ビデオ */
    /* コントローラー */
  }
  body #player #left-bar #video {
    width: 100%;
    margin: 0 0%;
  }
  body #player #left-bar #connectedDisplay {
    width: 100%;
    height: 50px;
    margin: 0 0%;
    font-size: 40px;
  }
  body #player #left-bar #connectedDisplay #announce {
    height: 50px;
  }
  body #player #left-bar #connectedDisplay #cButton p {
    margin: 0;
    font-size: 36px;
  }
  body #player #right-bar {
    width: 100%;
    /* 再生モードとファイル追加ボタン */
  }
  body #player #right-bar #right-input-panel {
    margin-top: 8px;
    font-size: 22px;
    background: white;
    /* 再生モード */
  }
  body #player #right-bar #right-input-panel #start {
    width: 50%;
    height: 40px;
    margin: 0 1%;
  }
  body #player #right-bar #right-input-panel #start span {
    margin-bottom: 6px;
  }
  body #player #right-bar #right-input-panel label {
    width: 50%;
    height: 40px;
    margin: 0 1%;
  }
  body #player #right-bar #right-input-panel label span {
    height: 100%;
    padding-bottom: -6px;
  }
  body #player #right-bar ul {
    margin: 8px 0 0 0;
    padding: 0;
  }
  body #player #right-bar ul .record {
    background: white;
    max-width: 100%;
    height: 86px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
  }
  body #player #right-bar ul .record .number-class {
    width: 8%;
    text-align: center;
    font-size: large;
  }
  body #player #right-bar ul .record .input-buttons {
    width: 80%;
  }
  body #player #right-bar ul .record .input-buttons .input-media {
    height: 38px;
  }
  body #player #right-bar ul .record .input-buttons .input-media .input-media-text {
    width: 100%;
    margin: 13px auto 0 0;
  }
  body #player #right-bar ul .record .input-buttons .input-csv {
    height: 46px;
    display: flex;
  }
  body #player #right-bar ul .record .input-buttons .input-csv .input-label {
    margin: auto 0;
  }
  body #player #right-bar ul .record .input-buttons .input-csv .input-label .input-csv-exp {
    padding: 7px 7px;
  }
  body #player #right-bar ul .record .input-buttons .input-csv .input-csv-text {
    width: 20%;
    margin: auto 0;
  }
  body #player #right-bar ul .record .delete-class {
    width: 12%;
    height: 50px;
    margin: auto 1%;
  }
  body #player #right-bar ul .record .delete-class .delete-label {
    width: 100%;
    height: 100%;
    margin: auto 0;
  }
  body #player #right-bar ul .record .delete-class .delete-label .delete-text {
    margin: auto;
    height: 50px;
    width: 50px;
  }
  body #modal-content {
    height: 94vh;
  }
  body #modal-content img {
    width: 48%;
    margin: 1%;
  }
}/*# sourceMappingURL=style.css.map */