/* ========================================
   Accessibility Utilities
======================================== */
/* ラッパーは最小限 */
.skip-links {
  z-index: 1000;
}

/* 🫖スキップリンク：フォーカス時のみ表示 2025.09.04 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:active {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 8px 14px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  z-index: 1000;
}

/* 🫖キーボードフォーカスの可視化（全般） */
a:focus, button:focus {
  outline: 2px solid #0a7; outline-offset: 2px;
}

/* 🫖背景カラー上のリンク可読性を底上げ */
.has-tea-beige-background-color a,
.has-tea-pink-background-color a,
.has-tea-green-background-color a,
.has-kuma-gold-background-color a {
  text-decoration: underline;
}

/*🫖 ゴールド/ブラウン系背景では文字色を濃く */
.has-kuma-gold-background-color,
.has-tea-brown-background-color {
  color: #111; /* ほんの少し濃い黒で読みやすさUP */
}
.has-kuma-gold-background-color a,
.has-tea-brown-background-color a {
  color: #0b3d91; /* 濃いめブルー系リンク */
}

/* 🫖フォーカスの視認性（キーボード操作a11y） */
.wp-block a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 🫖スクリーンリーダー専用 */
.tw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;

  /* 新しい書き方 */
  clip-path: inset(50%);

  /* 古いブラウザ対応 */
  clip: rect(0, 0, 0, 0);
}

/* =========================================
   🫖Accessibility – Front behavior
   ========================================= */

/* === 🫖Front: a11y skip の可視化は完全OFF === */
table.tw-a11y-skip {
  outline: none !important;
  position: static !important;
}
table.tw-a11y-skip::before,
table.tw-a11y-skip::after {
  content: none !important;
}

/* 🫖フォーカスが当たったときにだけ見える */
.skip-link:focus,
.skip-link:active {
  position: absolute;
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #000;
  background: #fff;
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  clip: auto;
  white-space: normal;
}

/* 視覚的に非表示（読み上げ対象） */
.tw-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.tw-sr-only:focus,
.tw-sr-only:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* スキップリンク（必要なページで <a class="tw-skip-link" href="#main">本編へスキップ</a> など） */
.tw-skip-link {
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-120%);
  background: #111; color: #fff;
  padding: .5rem .75rem; border-radius: .25rem;
  z-index: 1000;
}
.tw-skip-link:focus { transform: translateY(0); outline: 2px solid #fff; }

/*==================================
 * Screen-reader only (sr-only) 
 * 視覚的に隠すが、支援技術では読ませる
 * 2025.12.31 移設
==================================*/
.tw-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,1px,1px) !important; /* 旧式でも互換性高い */
  white-space:nowrap !important;
  border:0 !important;
}

/* サイト全体の保険：sr-only表記が混在しても効くように */
.tw-sr-only,
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,1px,1px) !important;
  white-space:nowrap !important;
  border:0 !important;
}