body{background-color:#f3f3f3;height:100dvh;
    font-family: 'Noto Serif JP', serif;}
  li{list-style-type: none;}
  a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

#main-wrapper { background-color: rgba(255,255,255,0.99); }
#page5 { background-color: rgba(255,255,255,0.99); }
#page4 { background-color: rgba(230,230,230,0.99); }

  .container {max-width: 100%;}

  #menu-area{background-color:#323348;height:43px;}
    .nav-link.active {background-color: #323348 !important;}
    .nav-link{color:#323348;}
    #navimenu{color: red;font-size:1.7rem;}

  #page-area{background-color:#323348;height:30px;overflow-x: auto;white-space: nowrap;}
    #page-area a{text-decoration: none;border:1px #fff solid;}
    

  .offcanvas {transition: transform 0.1s ease-in-out;}
  .offcanvas-top.offcanvas-custom {height: 92.5vh;}
  .offcanvas-bottom.offcanvas-custom {height: 92.5vh;}
  .offcanvasclosebtn{bottom: 1.5rem;left: 50%;transform: translateX(-50%);width: 50px; height: 50px; z-index: 1050;border:2px solid #999;}



  .ripple {position: absolute;width: 40px;height: 40px;background: rgba(0, 0, 0, 0.5);border-radius: 50%;transform: translate(-50%, -50%);animation: ripple 0.6s ease-out forwards;pointer-events: none;}
    @keyframes ripple {
      0% {transform: translate(-50%, -50%) scale(0.3);opacity: 1;}
      100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0;}
    }

    #loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: white;display: flex;align-items: center;justify-content: center;flex-direction: column;z-index: 9999;}