/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
    margin-bottom:1rem;
 }
 
 .navbar .dropdown-menu {
   border:none;
   background-color:#ffffff!important;
 }
 
 /* breakpoint and up - mega dropdown styles */
 @media screen and (min-width: 992px) {
   
   /* remove the padding from the navbar so the dropdown hover state is not broken */
 .navbar {
   padding-top:0px;
   padding-bottom:0px;
 }
 
 /* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
 .navbar .nav-item {
   padding:.5rem .5rem;
   margin:0 .25rem;
 }

 
 /* makes the dropdown full width  */
 .navbar .dropdown {position:static;}
 
 .navbar .dropdown-menu {
   width:100%;
   left:0;
   right:0;
 /*  height of nav-item  */
   top:45px;
   
   display:block;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s, opacity 0.3s linear;
   
 }
   
  
 
   
   /* shows the dropdown menu on hover */
 .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
   display:block;
   visibility: visible;
   opacity: 1;
   transition: visibility 0s, opacity 0.3s linear;
 }
   
   .navbar .dropdown-menu {
     border: 1px solid rgba(0,0,0,.15);
     background-color: #fff;
   }
 
 }



.navbar .dropdown-menu:before {
  content: "";
  position: absolute;
  top: -24px; /* 三角表示位置（要素上から）*/
  left: 60%; /* 三角表示位置（要素左から）*/
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #ffffff;
  z-index: 2;
}

.navbar .dropdown-menu:after {
  content: "";
  position: absolute;
  top: -26px; /* 三角表示位置（要素上から）*/
  left: 60%; /* 三角表示位置（要素左から）*/
  margin-left: -16px;
  border: 13px solid transparent;
  border-bottom: 13px solid rgba(0,0,0,.15);;
  z-index:1;
}

.navbar .dropdown-menu p {
  margin: 0;
  padding: 0;
}
 
.nav-links {
  display: none;
}