#about-dialog {
  --about-dialog-background: var(--page);
  --about-dialog-available-height: calc(100dvh - min(8.928571vw, 125px) - 24px);
  height: min(365px, var(--about-dialog-available-height));
  max-height: var(--about-dialog-available-height);
  padding: 50px 0 0;
  overflow: hidden;
}

#about-dialog[open] {
  display: flex;
  flex-direction: column;
}

[data-page=top][data-theme=normal] #about-dialog {
  --about-dialog-background: var(--green);
}

#about-dialog .close-dialog {
  z-index: 1;
}

#about-dialog .about-scroll-panel {
  position: relative;
  flex: 1;
  min-height: 0;
}

#about-dialog .about-copy {
  height: 100%;
  padding: 0 14px 18px 8px;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

#about-dialog .about-copy:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

#about-dialog .about-copy p {
  margin: 0 0 1.7em;
  font-family: 'Mooom Heavy', 'Hiragino Kaku Gothic StdN', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
  font-feature-settings: 'palt' 1;
  overflow-wrap: anywhere;
}

#about-dialog .about-copy p:last-child {
  margin-bottom: 0;
}

#about-dialog .about-copy::-webkit-scrollbar { display: none; }

#about-dialog .scroll-panel-fade {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 0;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--about-dialog-background));
  pointer-events: none;
}

#about-dialog [data-scroll-end=true] .scroll-panel-fade {
  opacity: 0;
}

@media (max-width: 767px) {
  #about-dialog {
    --about-dialog-available-height: calc(100dvh - 85 / 375 * 100vw - 24px);
  }
}