/* submenu base */
#topNav > ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}


#topNav li {
  position: relative;
}

#topNav ul ul {
    background: rgba(21, 21, 21, 0.88);
    display: block;
    max-height: 0;
    min-width: 180px;
    padding: 8px 0;
     left: 0;
    right: auto;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.25s ease,
        opacity 0.2s ease;
}

#topNav ul ul li a {
  padding: 12px 12px;
  line-height: 1.0;
}

/* open submenu */
#topNav li:hover > ul,
#topNav li:focus-within > ul {
  max-height: 900px;
  opacity: 1;
}

#topNav li:hover > a,
#topNav li:focus-within > a {
  background: rgba(68, 84, 119, 0.75);
  color: #ffd0ca;
}

/* これは不要かも
#topNav li:last-child ul,
#topNav li:nth-last-child(2) ul {
  left: auto;
  right: 0;
}
*/

/* width lt 800 submenu */
@media (max-width: 800px) {
  #topNav li a {
    padding: 9px 14px;
    font-size: 15px;
  }
}

/* width lt 720 submenu */
@media (max-width: 700px) {
  #topNav ul ul {
    position: static;
    width: 100%;
    max-height: none;
    opacity: 1;
    display: none;
  }

  #topNav li:hover > ul,
  #topNav li:focus-within > ul {
    display: block;
  }

  #topNav ul ul a {
    text-align: center;
    background: rgba(21, 21, 21, 0.95);
  }
}

/* width lt 520 submenu */
@media (max-width: 520px) {
  #topNav > ul > li {
    flex: 1 1 33.333%;
  }

  #topNav li a {
    text-align: center;
    padding: 10px 6px;
  }
}






/* base nav styles */
nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#151515; font:16px Times New Roman, Sans-serif; font-weight:700; filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #966; border-right:1px solid #222; color:#ff9891; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }

/* CSS3 */
.borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#222), to(#222)); }
.boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); }
.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222222), to(#445477)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); }
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }

/* fallbacks */
.no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../fallback/navBG.gif) repeat-x 0 0; }
.no-borderradius nav ul, .no-js nav ul { background:url(../fallback/navRight.gif) no-repeat 100% 0; }
.no-borderradius nav ul ul, .no-js nav ul ul { background:none; }
.no-borderradius nav li, .no-js nav li { height:44px; }
.no-cssgradients nav li:hover, .no-js nav li:hover { background:url(../fallback/navOverBG.gif) repeat-x 0 0; }
.no-borderradius nav li li, .no-js nav li li { height:auto; width:98%; left:-2px; }
.no-borderradius nav li:first-child, .no-js nav li:first-child { background:url(../fallback/navLeft.gif) no-repeat 0 0; }
.no-borderradius nav li:first-child:hover, .no-js nav li:first-child:hover { background:url(../fallback/navOverLeft.gif) no-repeat 0 0; }
.no-borderradius nav li li:first-child, .no-js nav li li:first-child { background:none; }
.no-rgba nav ul ul, .no-js nav ul ul { left:1px; padding-left:2px; background:url(../fallback/subnavBG.png) no-repeat 100% 100%; }
.no-rgba nav ul ul a, .no-js nav ul ul a { left:3px; }
.no-rgba nav ul ul a:hover { background:url(../fallback/subOverBG.png) repeat 0 0; }
.no-csstransforms ul a span { height:7px; width:12px; margin-top:8px; text-indent:-5000px; overflow:hidden; background:url(../fallback/indicator.png) no-repeat 0 0; }
.no-borderradius ul ul li.last { margin-bottom:10px; }
.no-cssgradients.boxshadow nav { box-shadow:none; }