/* 画面読み上げ専用（視覚的に非表示だがアクセシブル） */
.zz-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;
}

/* ============ パンくず（旧来の装飾） ============ */

.zz-breadcrumb {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
}

.zz-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.zz-breadcrumb a:hover {
  text-decoration: underline;
}

/* 旧 .sep は廃止。区切りは .breadcrumb-sep に統一 */
.zz-breadcrumb .breadcrumb-sep {
  margin: 0 0.35em;
  opacity: 0.6;
}

.breadcrumb-row {
  /* ▼ 区切り「›」の大きさ/微調整（ここを変えるだけ） */
  --bc-sep-size: 2.0em;
  /* 例: 1.0em / 1.3em / 2.0em */
  --bc-sep-shift: -0.1em;
  /* 例: -0.08em でほんの少し上へ */
  display: inline-flex;
  /* 1行内で横並び */
  align-items: center;
  /* 縦中央揃えで「›」が一直線に見える */
  flex-wrap: wrap;
  /* 狭小幅で折り返し */
  gap: .3rem .6rem;
  /* 要素間の余白 */
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.2;
}

.breadcrumb-row a {
  display: inline-flex;
  /* 文字とアイコンの縦中央を安定 */
  align-items: center;
  color: #000;
  text-decoration: none;
  line-height: 1;
}

.breadcrumb-row a:hover {
  text-decoration: underline;
}

.breadcrumb-row a[aria-current="page"] {
  pointer-events: none;
  font-weight: 600;
}

/* 区切り「›」は .breadcrumb-sep に一本化 */
.breadcrumb-row .breadcrumb-sep {
  display: inline-flex;
  align-items: center;

  /* サイズ変更時の“沈み”防止：高さ/行高もサイズに連動 */
  font-size: var(--bc-sep-size);
  height: var(--bc-sep-size);
  line-height: var(--bc-sep-size);

  margin: 0 .25em;
  vertical-align: middle;
  /* 念のための保険 */
  opacity: .75;
  -webkit-font-smoothing: antialiased;
  /* 微細な沈み・滲み対策 */

  /* 必要なら微調整。負値で少し上げられます（例: -0.08em） */
  transform: translateY(var(--bc-sep-shift));
}