/**
 * File: utilities.css
 * Usage: ユーティリティクラス（ヘルパー・アクセシビリティ）
 * Source: base.css から分割
 */

/* ================================================
 ヘルパークラス
================================================ */

/* 余白の調整 */
.hp_mt20 {
  margin-top: 20px;
}

.hp_mt40 {
  margin-top: 40px;
}

.hp_pb20 {
  padding-bottom: 20px;
}

.hp_pt40 {
  padding-top: 40px;
}

.hp_padX40 {
  padding-inline: var(--space-2xl);
}

.hp_padY20 {
  padding-block: 20px;
}

.hp_wMax {
  width: max-content;
  margin-inline: auto;
}

/* 色の変更 */
.hp_bgBlack {
  background: #333;
}

/* テキストの調整 */
.hp_txtCenter {
  text-align: center;
}

/* ================================================
 アクセシビリティ
================================================ */

/* スクリーンリーダー専用（視覚的に非表示） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* フォーカス可視化（キーボードナビゲーション用） */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ボタン・リンクのフォーカス */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}