header {
  padding:10px;
  background: #ccc;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 25px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 20px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 60%;
  max-height: 40px;/*最大幅（お好みで調整を）*/
  width: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  margin: 0; padding: 0; 
line-height: 30px; 
background-color: #fff; 

}
#nav-content img{
margin:5px 10px 0 10px;
}
#nav-content a{
margin:5px;
font-size: 12px; 
}

ul.mwi-menu-list li {
  height:15px;
  background-color:#737373;
  text-align:left;
  padding:5px 0 5px 5px;
}
#nav-content  a:link { color: #999; text-decoration: none; }

#nav-content  a:visited{
  color:#FFFFFF;
}
#nav-content a:hover{
  color:#FF0000;
}


/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{
text-align:center;
margin:auto;
}


/*---------------------------------------------
*   左
--------------------------------------------*/
#side-drawer {
  position: relative;
  position: fixed;
}

/*チェックボックス等は非表示に*/
.side-unshown {
  display:none;
}

/*アイコンのスペース*/
#side-open {
  display: inline-block;
  width: 25px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#side-open span, #side-open span:before, #side-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 20px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#side-open span:before {
  bottom: -8px;
}
#side-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#side-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 50;
  left: 0;
  width: 325px;
  height: 22px;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#side-content {
//  overflow: auto;
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 9999;
  height: 100%;
  width: 40%;
  max-width: 180px;/*最大幅（お好みで調整を）*/
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  margin: 0; padding: 0; 
line-height: 30px; 
background-color: #fff; 

}
#side-content img{
margin:5px 10px 0 10px;
}
#side-content a{
margin:5px;
font-size: 12px; 
}

ul.mwi-menu-list li {
  height:15px;
  background-color:#737373;
  text-align:left;
  padding:5px 0 5px 5px;
}
#side-content  a:link { color: #999; text-decoration: none; }

#side-content  a:visited{
  color:#FFFFFF;
}
#side-content a:hover{
  color:#FF0000;
}


/*チェックがついたら表示させる*/
#side-input:checked ~ #side-close {
  display: block;
  opacity: .5;
}

#side-input:checked ~ #side-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-side-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.side-area{text-align:center;margin:auto;
top: 50px;
}



/*
* ズーム
*/


button.minus,
button.plus,
button.reset {
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  padding: .4rem .5rem;
  cursor: pointer;
	border: 1px solid #d3d3d3;
	font-weight: normal;
	color: #555555;
	border-top-left-radius: 4px;
	 border-top-right-radius: 4px; 
	 border-bottom-left-radius: 4px; 
	 border-bottom-right-radius: 4px; 
}


/*******************************
ドラグドロップ
*****************************/
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
#columns{
  width:200px; 
  height:250px; 
  margin:2px; 
  background-color:#e6e6fa; 
  border:1px solid #000000;
  }
.column {
  height: 50px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
  cursor: move;
}
.chair {
  height: 80px;
  width: 150px;
  float: left;
  border: 1px solid #d3d3d3;
  background-color: #d3d3d3;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
  cursor: move;
}


.column header,
.chair header{
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(255, 174, 174), rgb(245, 163, 255), rgb(255, 174, 174));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(255, 174, 174)),
                               color-stop(0.50, rgb(245, 163, 255)),
                               color-stop(1, rgb(255, 174, 174)));
  background: -webkit-linear-gradient(left center, rgb(255, 174, 174), rgb(245, 163, 255), rgb(255, 174, 174));
  background: -ms-linear-gradient(left center, rgb(255, 174, 174), rgb(245, 163, 255), rgb(255, 174, 174));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
}
.column.over,
.chair.over {
  border: 2px dashed #000;
}


.tablemap{
	width:1200px;
	height:400px;
	  overflow: scroll;

}
.tableset{
}
.tableset canvas{
	display:inline-block;
}
.tablechair{
//	height:350px;
}
.slider{
	    float:  right; 
}