.u-reading {
  max-width: var(--reading);
}

.u-muted {
  color: var(--muted);
}

.u-accent {
  color: var(--accent);
}

.u-small {
  font-size: var(--step--1);
}

.u-mt {
  margin-top: 32px;
}

.u-mt-lg {
  margin-top: 64px;
}

.u-border-top {
  border-top: 1px solid var(--line);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-js [data-requires-js] {
  display: none;
}
/* ========================================
   SCROLL REVEAL
======================================== */

/*
  初回描画前の非表示状態。
  head内でreveal-preloadを付けているため、
  一瞬表示される現象を防げる。
*/
html.reveal-preload
  :is(
    .branch,
    .principle-map__step,
    .section-heading,
    .route-box,
    .business-card,
    .news-list > li
  ),
.js .reveal-target {
  opacity: 0;
  transform: translateY(22px);

  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* 表示状態 */
.js .reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  html.reveal-preload
    :is(
      .branch,
      .principle-map__step,
      .section-heading,
      .route-box,
      .business-card,
      .news-list > li
    ),
  .js .reveal-target,
  .js .reveal-target.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}