.has-page-navigation {
  padding-bottom: calc(96px + var(--page-navigation-offset, 0px));
}
#page-start:focus { outline: none; }
.page-navigation {
  position: fixed;
  z-index: 35;
  right: 24px;
  bottom: max(20px, env(safe-area-inset-bottom), var(--page-navigation-offset, 0px));
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.page-navigation[hidden], body:has(dialog[open]) .page-navigation { display: none; }
.page-navigation .page-home-button,
.page-navigation .page-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 56px;
  margin: 0;
  padding: 14px 24px;
  border: 1px solid #8faebb;
  border-radius: 9px;
  background: #fff;
  color: #173f55;
  box-shadow: 0 5px 20px #17364d1a;
  font: 700 17px/1.4 system-ui, -apple-system, "Noto Sans JP", sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.page-navigation .page-home-button:hover { background: #edf6fa; border-color: #086b9c; }
.page-navigation .page-top-button { color: #fff; background: #086b9c; border-color: #086b9c; }
.page-navigation .page-top-button:hover { background: #07557c; border-color: #07557c; }
.page-navigation :is(a, button):focus-visible { outline: 3px solid #e6ab25; outline-offset: 3px; }
@media (max-width: 600px) {
  .page-navigation { right: 12px; left: 12px; gap: 8px; }
  .page-navigation .page-home-button,
  .page-navigation .page-top-button { flex: 1; min-width: 0; padding: 13px 10px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-navigation :is(a, button) { transition: none; }
}