nav.mobileNavi {
  display: none;
}



@media all and (max-width: 768px) {

  nav.mobileNavi {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
  }
  nav.mobileNavi ul {
    display: flex;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 52px;
    font-size: 70%;
    letter-spacing: 0;
    line-height: 1.2em;
    border-top: #eeeeee solid 2px;
    background-color: var(--bodycolor);
    box-shadow: 0 0 2px #dfdfdf;
  }
  @supports (height: var(--sab)) {
      nav.mobileNavi ul {
          height: calc(52px + var(--sab) / 1.5)
    }
  }

  nav.mobileNavi ul li {
      width: calc(100% / 3);
      height: 50px;
      text-align: center;
      border-right: var(--bodycolor) solid 1px;
  }
  nav.mobileNavi ul li.outline,
  nav.mobileNavi ul li.map {
    background-color: var(--subcolor);
  }
  nav.mobileNavi ul li.request {
    background-color: var(--leadcolor);
  }
  nav.mobileNavi ul li.reserve {
    background-color: var(--themecolor---);
  }

  nav.mobileNavi ul li a {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: .2em 0 .5em !important;
    height: 100%;
    color: var(--bodycolor);
    border-left: unset;
  }
  nav.mobileNavi ul li a img {
    display: inline-block;
    padding: 2px;
    width: 30px;
    height: -webkit-fill-available;
    filter: invert(100%) sepia(0%) saturate(7464%) hue-rotate(4deg) brightness(104%) contrast(102%);
  }


}