.w-10em{
  width : 10em;
}
.flex-item{
  width : 12em;
  min-width : 12em;
  max-width : 12em;
}
.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.7s;
  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.7s;
  z-index:10099;
  opacity:0;
}
.login_base.active{
  opacity : 1;
}
.login{
  position : absolute;
  top : 120%;
  border-radius:5% 5% 5% 5%;
  width : 100%;
  max-width : 500px;
  transition : all 0.7s
}
.login.active{
  top : 0;
}
.set-height{
  position : fixed;
  height : calc(25vh + 50px);
  width : 100%;
  transition : all 0.5s;
  bottom : 0;
}
.set-height.down{
  bottom : -25vh;
}
.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-show-button{
  width:fit-content;
  position:fixed;
  top:0;
  right:0;
  transition:all 0.5s;
  z-index:10000;
}
.top-show-button.active{
  top:50px;
}  
.top-menu{
  position:absolute;
  left:0;
  top:-47;
  height:50px;
  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;
}