@charset "UTF-8";
/* ==========================================================================
   Utility（u-*）＋ 出現アニメ
   ========================================================================== */

/* スクリーンリーダー専用 */
.u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 本文へスキップ */
.u-skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 100;
  background: var(--c-white);
  color: var(--c-main-dark);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--c-radius-btn);
  box-shadow: var(--c-shadow);
  translate: 0 -200%;
}

.u-skip:focus-visible {
  translate: 0 0;
}

/* 余白 */
.u-mt-s { margin-top: 12px; }
.u-mt-m { margin-top: 24px; }
.u-mt-l { margin-top: 48px; }

.u-small {
  font-size: 13px;
  color: var(--c-muted);
}

/* ── 出現（32_マニュアル §4-6: fade＋16px rise だけ） ──
   🔴 隠すのは .js が付いたときだけ＝JSが動かなければ最初から全部見える */
.js [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.6s ease, translate 0.6s ease;
}

.js [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}