@charset "utf-8";
/* CSS Document */

#mobile_menu, #mobile_menu_button, #mobile_menu_close_button, #mobile_area, #home_page_mobile {
  display: none;
}

@media all and (max-width: 620px) {
  #mobile_area {
    display: block;  
    position: relative;
    width: 160px;
  }
  
  #mobile_menu_button {
    display: block;
    position: absolute;
    top: 26px;
    left: 4px;
    width: 40px;
    height: 40px;
    z-index: 25;
  }
  
  #mobile_menu_button img, #mobile_menu_close_button img {
    width: 40px;
    height: 40px;
  }
  
  #mobile_menu_close_button {
    position: absolute;
    top: 26px;
    right: -20px;
    width: 40px;
    height: 40px;
    z-index: 60;
    display: none;
  }
  
  #mobile_menu {
    position: fixed;
    top: 0;
    left: 0px;
    z-index: 55;
    display: block;
    background: #003;
    display: none;
    border: 1px solid white;
    padding: 15px 28px 8px 8px;
    width: 160px;
  }
  
  #mobile_menu a {
    display: block;
    padding: 6px;
    color: white;
    text-decoration: none;
  }
  
  #mobile_menu .sub {
    margin-left: 22px;
  }
  
  #mobile_menu .sub::before{
    content: "\2022\00a0";
  }
  
  #home_page_mobile {
    display: block;
    width: 100%;
  }
}

@media all and (max-width: 520px) {
  #mobile_menu_button {
    top: 22px;
    left: 4px;
    width: 36px;
    height: 36px;
  }
}

@media all and (max-width: 480px) {
  #mobile_menu_button {
    top: 20px;
    left: 4px;
    width: 32px;
    height: 32px;
  }
}

@media all and (max-width: 450px) {
  #mobile_menu_button {
    top: 16px;
    left: 4px;
    width: 24px;
    height: 24px;
  }
}

@media all and (max-width: 385px) {
  #mobile_menu_button {
    top: 8px;
    left: 4px;
    width: 16px;
    height: 16px;
  }
}