/* ============================================================
   アクセシビリティ機能：文字サイズ変更（標準／中／大）
   assets/css/common.css の後に読み込むこと
   ・画面右端に固定表示される縦型パネル（ヘッダーのハンバーガー
     メニューなどを隠さないよう、ヘッダーの外＝独立したオーバーレイとして配置）
   ============================================================ */

.a11y-bar{
  position:fixed;
  top:50%;
  right:0;
  z-index:900;
  display:flex;
  align-items:stretch;
  background:var(--navy-deep, #15304B);
  color:#fff;
  font-size:12.5px;
  border-radius:12px 0 0 12px;
  box-shadow:-2px 4px 16px rgba(0,0,0,.22);
  max-height:88vh;
  /* 既定は「取っ手」だけ見える位置まで右にスライドさせておく */
  transform:translate(var(--a11y-panel-w, 130px), -50%);
  transition:transform .22s ease;
}
.a11y-bar:hover,
.a11y-bar:focus-within,
.a11y-bar.is-open{
  transform:translate(0, -50%);
}

.a11y-bar button.a11y-handle{
  flex:none;
  width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none;
  background:transparent;
  color:#fff;
  writing-mode:vertical-rl;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  padding:14px 0;
  gap:8px;
}
.a11y-handle svg{
  width:16px;
  height:16px;
  flex:none;
  writing-mode:horizontal-tb;
}

.a11y-panel-content{
  width:var(--a11y-panel-w, 130px);
  flex:none;
  padding:14px 10px;
  overflow-y:auto;
  background:var(--navy-deep, #15304B);
  color:#fff;
}
.a11y-bar .a11y-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.a11y-bar .a11y-label{
  font-weight:700;
  letter-spacing:.03em;
  text-align:center;
  white-space:nowrap;
}
.a11y-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
.a11y-bar button{
  appearance:none;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:#fff;
  border-radius:6px;
  padding:8px 6px;
  font-size:12.5px;
  line-height:1.3;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  font-family:inherit;
  width:100%;
  text-align:center;
}
.a11y-bar button:hover,
.a11y-bar button:focus-visible{
  background:#fff;
  color:var(--navy-deep, #15304B);
  outline:none;
}
.a11y-bar button[aria-pressed="true"]{
  background:var(--gold, #BD9650);
  border-color:var(--gold, #BD9650);
  color:var(--navy-deep, #15304B);
  font-weight:700;
}
.a11y-bar button.a11y-size-btn{
  font-weight:700;
}
.a11y-bar .a11y-current-size{
  font-size:11px;
  opacity:.8;
  text-align:center;
}

/* ---- 文字サイズ（標準／中文字／大文字の3段階、zoomベース。標準=0は属性なし＝等倍） ---- */
html[data-a11y-size="1"]{ zoom:1.15; }
html[data-a11y-size="2"]{ zoom:1.3; }

/* Firefox など zoom 未対応ブラウザ向けフォールバック（body全体を拡大） */
@supports not (zoom: 1){
  html[data-a11y-size="1"] body{ transform:scale(1.15); transform-origin:top left; width:calc(100% / 1.15); }
  html[data-a11y-size="2"] body{ transform:scale(1.3); transform-origin:top left; width:calc(100% / 1.3); }
}

@media (max-width:600px){
  .a11y-bar{ --a11y-panel-w:104px; border-radius:10px 0 0 10px; }
  .a11y-panel-content{ padding:10px 8px; }
}