/*css_pulldown_menu.css */

.menu-item {
 position: relative;
 display: block;
}

.menu-item a {
 color: rgba(85, 85, 85, 1);
 text-decoration: none;
 transition:color 0.4s ease;
}

.menu-item a:visited {
 text-decoration: none;
 font-family: serif;
 margin: 0; padding: 0;
 font-weight: bold;
 color: rgba(85, 85, 85, 1);
}

.menu-item a:hover {
 color: rgba(220, 220, 220, 1);
 text-decoration: underline;
}

.menu-item.is-open .dropdown-menu {
 display: block;
}

/* for PC */
@media (hover: hover) {
  .menu-item:hover .dropdown-menu {
    display: block;
  }
}


/* --- プルダウンメニュー関連のスタイル --- */

.dropdown-menu {
 display: none;
 position: absolute;
 background-color: rgba(238, 238, 238, 0.9);
 border: 2px solid black;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 list-style-type: none;
 margin: 0;
 padding: 6px 0;
 color: rgba(85, 85, 85, 1);
 min-width: 80px;
}

.dropdown-menu li a {
 padding: 8px 5px;
 }

.dropdown-menu li a:hover {
 background-color: rgba(200, 200, 200, 0.9);
}

.dropdown-menu li {
 padding: 10px 0;
 font-size: 14px;
}


/* dropdown menu open */
.dropdown-menu.is_open {
  display: block;
  x-index: 10;
}

/* dropdown menu */
.menu-item.is-open .dropdown-menu {
  display: block;
  z-index: 10;
}

/* OverLay */
.overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 1;
}

.overlay.is-visible {
  display: block;
  z-index: 1;
}