/* ??????? */
body.mdui-locked {
  overflow: hidden;
}
/* ????? */
.mdui-overlay {
  position: fixed;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  z-index: 2000;
  visibility: hidden;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition-duration: .3s;
  transition-property: opacity, visibility;

  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity;
}
/* ???????? */
.mdui-overlay-show {
  visibility: visible;
  opacity: 1;
}
/* ??? transition ????Ч?? */
.mdui-no-transition {
  transition-property: none !important;
}

/**
 * =============================================================================
 * ************   Drawer ??????????   ************
 * =============================================================================
 */
/* DOM ????????????? transition */
body.mdui-loaded {
  transition: padding .3s cubic-bezier(0, 0, .2, 1);
}
body.mdui-loaded .mdui-drawer {
  transition: all .3s cubic-bezier(0, 0, .2, 1);
}
/* ?????????????????????????? */
.mdui-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  width: 240px;
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;

  will-change: transform;
}
/* ??????????????? */
.mdui-drawer-right {
  right: 0;
  left: auto;
}
/* ???????????? */
@media (max-width: 1023px) {
  .mdui-drawer {
    /* ????б???????? */
    background-color: remfff;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
    /* ??????? */
    -webkit-transform: translateX(-250px);
            transform: translateX(-250px);
  }
  .mdui-drawer-right {
    /* ??? drawer ???????? */
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
}
/* ???????????? */
.mdui-drawer-close {
  -webkit-transform: translateX(-250px);
          transform: translateX(-250px);
          box-shadow: none;
}
.mdui-drawer-close.mdui-drawer-right {
  -webkit-transform: translateX(250px);
          transform: translateX(250px);
}
/* ???????????? */
.mdui-drawer-open {
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
}
/* PC ?????? */
@media (min-width: 1024px) {
  /* ? body ??? padding-left ?? padding-right???????????????????? */
  body.mdui-drawer-body-left {
    padding-left: 240px;
  }
  body.mdui-drawer-body-right {
    padding-right: 240px;
  }
  /* PC ??????????? */
  .mdui-appbar-with-toolbar .mdui-drawer {
    top: 64px;
  }
  .mdui-appbar-with-tab .mdui-drawer {
    top: 48px;
  }
  .mdui-appbar-with-tab-larger .mdui-drawer {
    top: 72px;
  }
  .mdui-appbar-with-toolbar.mdui-appbar-with-tab .mdui-drawer {
    top: 112px;
  }
  .mdui-appbar-with-toolbar.mdui-appbar-with-tab-larger .mdui-drawer {
    top: 136px;
  }
}
/* ????????????????????? */
.mdui-drawer[class*="mdui-color-"]:not(.mdui-color-transparent) {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
}
/* ?????? 100% ??????????????????? */
.mdui-drawer-full-height {
  top: 0 !important;
}