/* Platform navigation, matching little-chicken-website/home_r. */
:root { --dmm-header: 39px; }
html { scroll-padding-top: calc(var(--header) + var(--dmm-header)); }
body { padding-top: var(--dmm-header); }
.site-header { top: var(--dmm-header); }
.mobile-nav { top: calc(var(--header) + var(--dmm-header)); }
.scroll-progress { top: var(--dmm-header); }
.characters { min-height: calc(100svh - var(--header) - var(--dmm-header)); }

#dmm_ntgnavi {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--dmm-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff url("assets/dmm/bg_navimain.gif") center repeat-x;
  border-block: 1px solid #ccc;
  color: #333;
  font: 12px/15px Meiryo, "Hiragino Kaku Gothic Pro", sans-serif;
}
#dmm_ntgnavi ul { display: flex; align-items: center; list-style: none; margin: 2px 0; padding: 0; }
#dmm_ntgnavi li { margin-right: 6px; }
#dmm_ntgnavi a { display: block; white-space: nowrap; }
#dmm_ntgnavi .navi_left a { padding: 0 3px 0 8px; border: 1px solid #eee; border-radius: 3px; }
#dmm_ntgnavi .navi_left a:hover { background: #eee; border-color: #666; }
#dmm_ntgnavi .navi_left span { display: block; padding: 9px 10px 7px 28px; font-weight: bold; }
#dmm_ntgnavi .ntg_top { margin-left: 10px; }
#dmm_ntgnavi .ntg_top span { background: url("assets/dmm/bg_bt_olgtop.gif") left center no-repeat; }
#dmm_ntgnavi .ntg_poi span { background: url("assets/dmm/bg_bt_point.gif") left center no-repeat; }
#dmm_ntgnavi .navi_right { justify-content: flex-end; font-size: 10px; }
#dmm_ntgnavi .navi_right li { margin-right: 10px; padding: 8px 5px; }
#dmm_ntgnavi .arrow { padding-left: 14px; background: url("assets/dmm/arrow_common.gif") left center no-repeat; }
#dmm_ntgnavi a:focus-visible { outline: 2px solid #2869ff; outline-offset: 1px; }

@media (max-width: 600px) {
  #dmm_ntgnavi { font-size: 10px; }
  #dmm_ntgnavi li { margin-right: 2px; }
  #dmm_ntgnavi .ntg_top { margin-left: 3px; }
  #dmm_ntgnavi .navi_left a { padding-inline: 3px; }
  #dmm_ntgnavi .navi_left span { padding: 9px 2px 7px 21px; background-size: 18px auto; }
  #dmm_ntgnavi .navi_right li { margin-right: 3px; padding-inline: 0; }
  #dmm_ntgnavi .arrow { padding-left: 10px; }
}

@media (max-width: 360px) {
  #dmm_ntgnavi, #dmm_ntgnavi .navi_right { font-size: 9px; }
  #dmm_ntgnavi .navi_left a { padding-inline: 2px; }
  #dmm_ntgnavi .navi_left span { padding-left: 19px; padding-right: 0; }
  #dmm_ntgnavi .navi_right li { margin-right: 2px; }
}