/* menu */
/*
 * メニューのパネル。編集画面ではJSが動かないため、パネルを重ねる指定はフッターだけで読み込む。
 * 編集画面では、パネルは普通の箱として表示され、中のリンクを編集できる。
 */
.menu__panel {
  position: fixed;
  inset: 0;
  z-index: var(--menu-z, 90);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--menu-duration, 300ms) ease,
    translate var(--menu-duration, 300ms) ease,
    visibility 0s linear var(--menu-duration, 300ms);
}
.menu.is-open .menu__panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  translate: 0;
  transition-delay: 0s;
}
/* 横から出るメニュー */
.menu--drawer-right .menu__panel {
  left: auto;
  width: min(100%, var(--menu-width, 22rem));
  opacity: 1;
  translate: 100% 0;
}
.menu--drawer-left .menu__panel {
  right: auto;
  width: min(100%, var(--menu-width, 22rem));
  opacity: 1;
  translate: -100% 0;
}
/* 上から下りるメニュー */
.menu--drop .menu__panel {
  translate: 0 -1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .menu__panel {
    translate: 0 !important;
  }
}

/* reveal */
/*
 * 画面に入る前の状態。JSが`html`に`.is-reveal-ready`を付けたときだけ効くため、
 * JSが動かない編集画面では、普通に表示される。
 */
.is-reveal-ready :is(.reveal, .reveal-stagger > *) {
  transition:
    opacity var(--reveal-duration, 800ms) var(--reveal-easing, cubic-bezier(0.2, 0.6, 0.2, 1)),
    translate var(--reveal-duration, 800ms) var(--reveal-easing, cubic-bezier(0.2, 0.6, 0.2, 1)),
    scale var(--reveal-duration, 800ms) var(--reveal-easing, cubic-bezier(0.2, 0.6, 0.2, 1)),
    clip-path var(--reveal-duration, 800ms) var(--reveal-easing, cubic-bezier(0.2, 0.6, 0.2, 1));
  transition-delay: var(--reveal-delay, 0ms);
}
.is-reveal-ready :is(.reveal, .reveal-stagger > *):not(.is-visible) {
  opacity: 0;
  translate: 0 var(--reveal-distance, 2rem);
}
.is-reveal-ready :is(.reveal--down, .reveal-stagger--down > *):not(.is-visible) {
  translate: 0 calc(var(--reveal-distance, 2rem) * -1);
}
.is-reveal-ready :is(.reveal--left, .reveal-stagger--left > *):not(.is-visible) {
  translate: calc(var(--reveal-distance, 2rem) * -1) 0;
}
.is-reveal-ready :is(.reveal--right, .reveal-stagger--right > *):not(.is-visible) {
  translate: var(--reveal-distance, 2rem) 0;
}
.is-reveal-ready :is(.reveal--scale, .reveal-stagger--scale > *):not(.is-visible) {
  translate: 0;
  scale: 0.92;
}
.is-reveal-ready :is(.reveal--fade, .reveal-stagger--fade > *):not(.is-visible) {
  translate: 0;
}
.is-reveal-ready :is(.reveal--clip, .reveal-stagger--clip > *):not(.is-visible) {
  opacity: 1;
  translate: 0;
  clip-path: inset(0 100% 0 0);
}
.is-reveal-ready :is(.reveal--clip, .reveal-stagger--clip > *).is-visible {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .is-reveal-ready :is(.reveal, .reveal-stagger > *) {
    transition: none !important;
    opacity: 1 !important;
    translate: 0 !important;
    scale: 1 !important;
    clip-path: none !important;
  }
}