header {
  position: fixed;
  background-color: var(--genBc);
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9;
  height: 3em;
  overflow: visible;
}

.ayMenu {
  background-color: var(--genBc);
  max-width: var(--pgWidth);
  margin: 0 auto;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
}
.ayMenu span, .ayMenu a {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
}
.ayMenu .ayL1Logo {
  flex-grow: 1;
  max-width: 3em;
}
.ayMenu .ayL1Logo img {
  height: 1.8em;
  max-width: 3em;
}
.ayMenu .aySubL1 img {
  height: 1.8em;
  margin-right: 0.5em;
}
.ayMenu .aySubL1 a,
.ayMenu .aySubL1 span.ay--sL1,
.ayMenu .aySubL1 a:visited {
  font-size: 1.3rem;
  color: white;
}
.ayMenu .aySubL1 a:hover {
  text-decoration: underline;
  color: #ffffcc;
}

@media (max-width: 59.9em) {
  .ayMenu {
    width: 100vw;
    padding: 0.5em;
  }
  .ayMenu .ayMenuCross {
    height: 2rem;
    width: 2rem;
    margin: 0 1em;
    padding: 0;
    background-size: cover;
  }
  .ayMenu .topLine {
    display: block;
    position: fixed;
    z-index: 9;
    background-color: #780000;
    top: 3em;
    right: 0;
    height: calc(100vh - 1.8em);
  }
  .ayMenu .aySubL1 {
    margin-top: 1em;
  }
  .ayMenu .aySubL2 {
    max-width: 100%;
    margin-top: 1em;
    border-top: solid 3px black;
  }
  .ayMenu .aySubL2 img {
    display: none;
  }
  .ayMenu .ay--l2body {
    max-width: calc(100% - 3em);
  }
  .ayMenu[data-visible=N] .ayMenuCross {
    background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><g fill="white"><circle cx="500" cy="145" r="120"/><circle cx="500" cy="855" r="120"/><circle cx="500" cy="500" r="120"/></g></svg>');
  }
  .ayMenu[data-visible=N] .topLine {
    width: 0;
    overflow: hidden;
    transition: all 500ms;
  }
  .ayMenu[data-visible=Y] {
    overflow: show;
  }
  .ayMenu[data-visible=Y] .ayMenuCross {
    background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m172 75s-97 0-97 91l324 334-324 335s0 90 87 90l338-324 334 324s91 0 91-97l-323-328 323-338s0-87-93-87l-332 323zm418 425c1 122-179 125-180 0s179-122 180 0z" fill="rgb(120, 0, 0)"/></svg>');
  }
  .ayMenu[data-visible=Y] .topLine {
    width: min(35em, 80%);
    overflow-y: auto;
    padding: 1em;
    transition: width 500ms;
  }
}
@media (min-width: 60em) {
  .ayMenu {
    margin: 0 auto;
    padding: 0.5em 0;
  }
  .ayMenu .ayMenuCross {
    display: none;
    overflow: none;
  }
  .ayMenu .topLine {
    width: var(--pgWidth);
    max-height: 2em;
    margin: 0.5em auto;
    padding: 0.5em;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-evenly;
    flex-grow: 2;
  }
  .ayMenu .ayL1Logo, .ayMenu .aySubL1 {
    position: relative;
    text-align: center;
  }
  .ayMenu .aySubL1 .aySubL2 {
    height: 0;
    overflow: hidden;
    transition: all 500ms;
    flex-grow: 0;
  }
  .ayMenu .aySubL1 .aySubL2.wide {
    position: fixed;
    left: 0.5em;
    width: calc(100vw - 1em);
  }
  .ayMenu .aySubL1 .aySubL2.narrow {
    position: absolute;
    left: -5em;
    width: 15em;
  }
  .ayMenu .aySubL1:hover .aySubL2 {
    z-index: 9;
    height: 10em;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 3px 3px 10px rgba(120, 0, 0, 0.6666666667);
    transition: height 500ms;
  }
  .ayMenu .aySubL1.wide:hover .aySubL2 ul {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    width: min(90em, 100vw);
    margin: 1em auto;
  }
  .ayMenu .aySubL2 ul li span {
    display: block;
    margin-top: 1em;
    font-size: 0.8em;
    text-align: left;
    max-width: 15em;
    color: #efeed6;
  }
  .ayMenu .aySubL1:hover .aySubL2 {
    display: flex;
    background-color: #780000;
  }
  .ayMenu .aySubL1:hover .aySubL2 ul li {
    display: block;
  }
  .ayMenu .aySubL1:hover .aySubL2 img {
    height: 10em;
    max-height: 10em;
  }
  .ayMenu .aySubL1:hover ul img,
  .ayMenu .aySubL1:hover .aySubL2 ul img {
    max-height: 1.8em;
    max-width: 2em;
  }
  .ayMenu .aySubL1:hover .aySubL2.wide {
    flex-flow: row;
  }
  .ayMenu .aySubL1:hover .aySubL2.wide ul li {
    display: block;
    flex-grow: 1;
  }
  .ayMenu .aySubL1:hover .aySubL2.narrow ul {
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
  }
  .ayMenu .aySubL1:hover .aySubL2 ul li ul {
    display: unset;
  }
}