/*
  リレーインタビュー / ユーティリティクラス。
  ブレークポイントはサイト全体で単一（768px、SP基準・min-widthでPCへ切り替え）。
*/

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

/* display の出し分けは !important で確定させる。
   utilities.css は style.css / components.css より前に読み込まれるため、
   コンポーネント側が display を指定していると同じ詳細度で負けて出し分けが効かなくなる。 */
.u-sp-only {
  display: block !important;
}
@media (min-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

.u-pc-only {
  display: none !important;
}
@media (min-width: 768px) {
  .u-pc-only {
    display: block !important;
  }
}

/* スキップリンク。フォーカスされるまで視覚的に隠す（WCAG 2.4.1） */
.vchr-skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--vchr-bg);
  color: var(--vchr-text-heading);
  font: 500 14px/1.4 var(--vchr-font-heading);
  border-bottom: var(--vchr-rule-accent) solid var(--vchr-accent);
  transition: none;
}
.vchr-skip-link:focus {
  top: 0;
}

/* フォーカスリングは消さない。臙脂ベースで視認性を確保する。 */
:focus-visible {
  outline: 2px solid var(--vchr-accent);
  outline-offset: 2px;
}

/* 動きを減らす設定を尊重する。アニメーションは一切必須ではない
   （transition を切っても表示・非表示は正しく切り替わる作りにしてある）。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* タップ領域確保用。見た目の下線は細くても実効領域を44px相当にする。 */
.u-tap-target {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}