/* ボタン */
.main-menu.btn-menu {
  border: none !important;
  width: 100%;
  display: block;
  position: relative;
  height: inherit;
  font-size: .8rem;
  font-weight: 400;
  padding: 5px;
  text-align: center;
  /*background: #fff;*/
  background: #3b4675;
  /*color: #3b4675 !important;*/
  color: #fff !important;
  text-decoration: unset !important;
  letter-spacing: 0;
  -webkit-transition: color .3s ease,background .3s ease,transform .3s ease,opacity .3s ease,border .3s ease,padding .3s ease,left .3s ease,bottom .3s ease,box-shadow .3s ease;
  transition: color .3s ease,background .3s ease,transform .3s ease,opacity .3s ease,border .3s ease,padding .3s ease,left .3s ease,bottom .3s ease,box-shadow .3s ease;
  cursor: pointer;
}
.main-menu.btn-menu:hover {
  /*opacity: .6;*/
}
.mm-container {
  background: rgba(255, 255, 255, .9);
    height: 0;
    width: 100%;
    left: 0;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    transition: .5s;
    z-index: 40000;
}
/* メニュー */
.main-menu nav {
    background: #fff;
    border: 1px solid #3b4675;
    position: absolute;
    left: 0;
    bottom: 70px;
    z-index: 2;
    overflow-x: hidden;
    text-align: center;
    transition: .5s;
    height: 0;
    width: 100%;
}
.main-menu nav ul {
  margin: 2em auto;
}
.main-menu nav ul li {
    margin: .5em auto;
    padding: .5em 0;
}
/* メニューを開いた時 */
.mm-container.open-menu {height: 100%;}
.mm-container.open-menu .main-menu nav {
  height: calc(100% - 70px);
}
@media screen and (min-width: 768px) {
/* ボタン */
.main-menu.btn-menu {}

.mm-container {
    background: rgba(255, 255, 255, .9);
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    bottom: unset;
}

/* メニュー */
.main-menu nav {
  top: 0;
  left: 0;
  bottom: unset;
  overflow-x: hidden;
  width: 0;
  height: 100%;
}
/* メニューを開いた時 */
.mm-container.open-menu {width: 100%;}
.mm-container.open-menu .main-menu nav {
  width: 600px;
  height: 100%;
}
}