/* modal sidebar right */
.right .modal-dialog{
  margin:0;
  position: fixed;
  top:0;
  bottom:0;
  right:0;
  background: #fff;
  width:70%;
  overflow-y: auto;
}
.right .modal-content{
  border:none;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius:0;
}
.modal.fade:not(.in).right .modal-dialog {
  -webkit-transform: translate3d(25%, 0, 0);
  transform: translate3d(25%, 0, 0);
}

/* modal sidebar left */
.left .modal-dialog{
  margin:0;
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  background: #fff;
  width:65%;
  overflow-y: auto;
}
@media ( min-width : 768px ) {
  .left .modal-dialog{
    /* 画面が大きい場合は、メニューバーを小さく設定 */
    width:400px;
  }  
}
.left .modal-content{
  border:none;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius:0;
}
.modal.fade:not(.in).left .modal-dialog {
  -webkit-transform: translate3d(-25%, 0, 0);
  transform: translate3d(-25%, 0, 0);
}