.icon-text{
  font-size : 0.6em;
}

#flickBtn{
  position : fixed;
  width : fit-content;
  border-radius : 50%; 
  z-index:20000;
  left : 85vw;
  top : 65vh; 
}

#setlist{
  position : fixed;
  width : 300px;
  height : 300px
}

.scoreImg{ /* ここはメディアクエリで横幅による変更が必要  */
  height : 100%;
  /* max-height:calc(100vh - 100px); */
  max-height : calc(100vh - 20vh);
}

.bg-faint{
  background-color:rgba(100,100,100,0.1);
}

#setlist_group_base{
  position : relative;
}

#setlist_group{
  position : absolute;
  bottom : 100%;
  opacity : 0;
  height : 30vh;
  right : 0;
  transition : all 0.3s;   
}
#setlist_group.active{
  opacity : 1;
}
#setlist_tooltip{
  position : absolute;
  bottom : 100%;
  opacity : 0;
  transition : all 0.3s;
}
#setlist_tooltip.active{
  opacity : 1;
}

#setlist_input_name_base,
#setlist_list_base,
#setlist_link_base{
  position : fixed;
  top    : 0;
  bottom : 0;
  left   : 0;
  right  : 0;
  background-color:rgba(100,100,100,0.6);
  z-index:20000;
}

/* -------------------------------------- */

.w-10em{
  width : 10em;
}
.flex-item{
  width : 12em;
  min-width : 12em;
  max-width : 12em;
  height:19vh;
}
.w-20em{
  width : 20em;
}
.h-100vh{
  height : 100vh;
}
.bg-lightgray{
  background-color : #f5f5f5;
}
.bg-mediumgray{
  background-color : #e0e0e0;
}
.bg-middlegray{
  background-color : #c0c0c0;
}
.bg-deepgray{
  background-color : #a0a0a0;
}
.bg-darkgray{
  background-color : #333333;
}
.h-20vh{
  height : 20vh;
}
.h-30vh{
  height : 30vh;
}
.h-60vh{
  height : 60vh;
}
.h-70vh{
  height : 70vh;
}
.h-80vh{
  height : 80vh;
}
.left-menu{
 width : 40vw;
 max-width : 300px;
}
.w-10vw{
  width : 10vw;
}
.w-30vw{
  width : 30vw;
}
.w-50vw{
  width : 50vw;
}
.w-70vw{
  width : 70vw;
}
.w-80vw{
  width : 80vw;
}
.w-100vw{
  width : 100vw;
}
.memu div{
  background-color : #FFFFFF;
  border-top : 1px solid #000000;
  color : #000000;
}
.menu div:hover{
  background-color : gray;
  color : #FFFFFF;
}

/* リストの表示モーション */
.slidelist{
  position:fixed;
  z-index: 10001;
  
  /*ナビのスタート位置と形状*/
  top:0;
  left: -120%;
  
  width  : 100vw;
  height : 100vh;
       
  /*動き*/
  transition: all 0.5s;
}

/*アクティブクラスがついたら位置を0に*/
.slidelist.active{
  left: 0;
}
.rightMenu_base{
  position : fixed;
  top:0;
  right:-120%;
  bottom:0;
  width:100vw;
  opacity:0;
  transition : all 0.5s;
  z-index:10099;
}
.rightMenu_base.active{
  right:0;
  opacity:1;
}
.rightMenu{
  position : absolute;
  z-index:10100;
  top:0;
  right  : 0;
  width  : 70vw;
  max-width:300px;
  height : 100vh;
  box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.34);
}
.aboutPage_base{
  position : fixed;
  top : 250%;
  width : 100vw;
  height : 100vh;
  transition : all 0.8s;
  z-index:10099;
 /* background-color:rgba(100,100,100,0.6); */
  opacity:0;
}
.aboutPage_base.active{
  top:0;
  opacity:1;
}
.login_base{
  position : fixed;
  top : 0;
  width : 100vw;
  height : 100vh;
  transition : all 0.6s;
  z-index:10099;
  background-color:rgba(100,100,100,0.6);
  opacity : 0;
}
.login_base.active{
  opacity:1;
}
.login{
  position : absolute;
  top : 120%;
  //border-radius:10% 10% 10% 10%;
  width:90%;
  max-width : 400px;
  transition : all 0.6s;
  z-index:10100;
}
.login.active{
  top : 1rem;
}
.set-height{
  position : absolute;
  top : calc(100vh - (36vh + 50px));
  width : 100%;
  transition : all 0.5s;
  bottom : 0;
  height : calc(35vh);
}
.set-height.down{
  top : calc(100vh - (12vh + 57px));
  height : calc(11vh);
}
.threeMenu{
  position : fixed;
  bottom : 10px;
  right : -40%;
  transition : all 0.5s;
  z-index: 10000;
}
.threeMenu.active{
  right : calc(0% + 10px);
}
.moveMenu{
  position : fixed;
  bottom : -100px;
  right : calc(50vw - 6em);
  z-index : 10010;
  transition : all 0.5s;
}
.moveMenu.active{
  bottom : 100px;
}
.top-menu{
  position:absolute;
  left:0;
  top:-50px;
  height:100px;
  width:100%;
  z-index:1000;
  transition:all 0.5s;
}
.top-menu.active{
  top:0;
}
.main{
  position:absolute;
  top:0;
  left:0;
}
.threedots_button{
  position:absolute;
  width:fit-content;
  right:0;
}
.selectShadow{
  box-shadow: 10px 10px 10px -4px #414141;
}
.search{
  position : fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgba(100,100,100,0.6); 
  z-index: 10003;
}
.move_obj{
  z-index:20000;
}
.search_emph{
  background-color : #f0f8ff;
  font-weight : bold;
}
.moveMenu_base{
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index : 10005;
  position:fixed;
}