/* も、もう……！ レスポンシブ対応しなくちゃだめ！ */
/* え～～～……　小糸ちゃんなんでもだめって言う～～～  */

img{
  -webkit-user-drag: none;
}

@font-face{
  font-family: 'YasashisaAntique';
  src: url('../../../font/YasashisaAntique.otf');
}

.music_size{
  position:absolute;
  top:5%;
  left:18%;
  transform: translate(-50%,-50%);
  width: 35%;
  height: auto;
  opacity: 0.9;
}

.music_sel_1_size{
  position:absolute;
  top:15%;
  left:4%;
  transform: translate(-50%,-50%);
  width: 5%;
  height: auto;
}

.music_sel_2_size{
  position:absolute;
  top:27%;
  left:4%;
  transform: translate(-50%,-50%);
  width: 5%;
  height: auto;
}

.music_sel_3_size{
  position:absolute;
  top:39%;
  left:4%;
  transform: translate(-50%,-50%);
  width: 5%;
  height: auto;
}

.music_sel_4_size{
  position:absolute;
  top:51%;
  left:4%;
  transform: translate(-50%,-50%);
  width: 5%;
  height: auto;
}

table{
  background-color: #ffffff;
  table-layout: fixed;
  width: 100%;
}

td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td_width_10{
  width: 10%;
}

.scr_exist_music_img{
  width: 100%;
}

.scr_exist_music{
  overflow-x:hidden;
  overflow-y:scroll;
  color: #6e6764;
  font-family: 'YasashisaAntique';
  font-size:1vw;
  position:absolute;
  top:33%;
  left:21%;
  transform: translate(-50%,-50%);
  width: 26%;
  height: 45%;
  opacity: 0.9;
  display: none;
}

.scr_exist_music::-webkit-scrollbar{
  width: 25px;
}

.scr_exist_music::-webkit-scrollbar-track{
  background-color: #837987;
  border-radius: 10px;
}

.scr_exist_music::-webkit-scrollbar-thumb{
  background-color: #ff48b6;
  border-radius: 10px;
}

.message_size{
  position:absolute;
  top:66%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 25%;
  height: auto;
  opacity: 0.9;
}

.gauge_size{
  position:absolute;
  top:60%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: auto;
  display: none;
}

.gauge_stop_size{
  position:absolute;
  top:60%;
  left:42.8%;
  transform: translate(-50%,-50%);
  width: 1%;
  height: auto;
  display: none;
}

.flower_size{
  position:absolute;
  top:50%;
  left:85%;
  transform: translate(-50%,-50%);
  width: 18%;
  height: auto;
}

.toru_size{
  position:absolute;
  top:85%;
  left:32%;
  transform: translate(-50%,-50%);
  width: 10%;
  height: auto;
}

.madoka_size{
  position:absolute;
  top:85%;
  left:43%;
  transform: translate(-50%,-50%);
  width: 10%;
  height: auto;
}

.koito_size{
  position:absolute;
  top:85%;
  left:54%;
  transform: translate(-50%,-50%);
  width: 10%;
  height: auto;
}

.hinana_size{
  position:absolute;
  top:85%;
  left:65%;
  transform: translate(-50%,-50%);
  width: 10%;
  height: auto;
}

.range_area_img_size{
  position:absolute;
  top:18%;
  left:85%;
  transform: translate(-50%,-50%);
  width: 15%;
  height: auto;
  opacity: 0.9;
}

.range_area{
  position: absolute;
  top:19.5%;
  left:85%;
  transform: translate(-50%,-50%);
  width: 15%;
  height: 30%;
  background-color: rgba(0,0,0,0.0);
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

input[type=range]{
  width: 13vw;
  height: 4vw;
  accent-color: #ff48b6;
}

.range_se{
  margin: -7px 0px;
}

.banner_1_size{
  position:absolute;
  top:85%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
}

.banner_2_size{
  position:absolute;
  top:85%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
  display: none;
}

.banner_3_size{
  position:absolute;
  top:85%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
  display: none;
}

.banner_4_size{
  position:absolute;
  top:85%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
  display: none;
}

.banner_5_size{
  position:absolute;
  top:85%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
  display: none;
}

.banner_sel_1_size{
  position:absolute;
  top:95%;
  left:9%;
  transform: translate(-50%,-50%);
  width: 1.5%;
  height: auto;
}

.banner_sel_2_size{
  position:absolute;
  top:95%;
  left:11%;
  transform: translate(-50%,-50%);
  width: 1.5%;
  height: auto;
}

.banner_sel_3_size{
  position:absolute;
  top:95%;
  left:13%;
  transform: translate(-50%,-50%);
  width: 1.5%;
  height: auto;
}

.banner_sel_4_size{
  position:absolute;
  top:95%;
  left:15%;
  transform: translate(-50%,-50%);
  width: 1.5%;
  height: auto;
}

.banner_sel_5_size{
  position:absolute;
  top:95%;
  left:17%;
  transform: translate(-50%,-50%);
  width: 1.5%;
  height: auto;
}

.produce_p_size{
  position:absolute;
  top:83%;
  left:78%;
  transform: translate(-50%,-50%);
  width: 13%;
  height: auto;
}

.memo_size{
  position:absolute;
  top:83%;
  left:92%;
  transform: translate(-50%,-50%);
  width: 15%;
  height: auto;
}

.sofa_1_size{
  position:absolute;
  top:57%;
  left:48%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
}

.sofa_2_size{
  position:absolute;
  top:57%;
  left:60%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: auto;
}

.cr_area{
  position:absolute;
  top:98.5%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 2%;
  background-color: rgba(0,0,0,0.0);
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
}

.copyright{
  transform: scale(0.2);
  white-space: nowrap;
  font-size: 4vw;
  color: #FFFFFF;
}