/* ============================================================
   マニュアル_STAFF.css
   一般スタッフ向けマニュアル5ページ専用の追加スタイル（第6試作）
   ・色は theme_STAFF.css の変数だけを使う
   ・styles_STAFF.css は変更しない（ここに足すだけ）
   ・スマホ幅（〜480px）で読みやすい短い見出し・項目形式
   ============================================================ */

/* ---------- 目次（ページ内ジャンプ） ---------- */

.目次{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.目次 li{ margin:0; }
.目次 a{
  display:inline-block;
  font-size:12px;
  color:var(--色-入口文字);
  background:var(--色-アクセント面);
  border:1px solid var(--色-入口枠);
  border-radius:999px;
  padding:5px 11px;
  text-decoration:none;
}

/* ---------- 本文の見出し・項目 ---------- */

.小見出し{
  font-size:13px;
  color:var(--色-強調);
  margin:12px 0 5px;
  padding-left:8px;
  border-left:3px solid var(--色-アクセント);
}
.小見出し:first-child{ margin-top:0; }

.本文一覧{ margin:0 0 6px; padding:0 0 0 1.2em; }
.本文一覧 li{ margin:0 0 5px; }
.本文一覧 li b{ color:var(--色-強調); }

.手順{ margin:0 0 6px; padding:0 0 0 1.5em; }
.手順 li{ margin:0 0 7px; }
.手順 li b{ color:var(--色-強調); }

.補足{
  font-size:12px;
  color:var(--色-文字薄);
  margin:0 0 6px;
}

/* 強調枠：必ず守ること・禁止 */
.強調枠{
  background:var(--色-アクセント面);
  border:1px solid var(--色-入口枠);
  border-radius:8px;
  padding:9px 12px;
  margin:6px 0 10px;
  font-size:13px;
}
.強調枠 b{ color:var(--色-強調); }

/* ---------- 簡単な表（用語・ペナルティ等） ---------- */

.簡易表{ width:100%; border-collapse:collapse; font-size:13px; margin:4px 0 8px; }
.簡易表 th,
.簡易表 td{ border-bottom:1px solid var(--色-罫線); padding:6px 4px; text-align:left; vertical-align:top; }
.簡易表 th{ color:var(--色-文字薄); font-weight:normal; white-space:nowrap; width:34%; }

/* 4列表（地域の比較）：見出し列を狭くして、3地域の列を確保する */
.簡易表-4列 th{ width:auto; white-space:normal; font-size:12px; }
.簡易表-4列 td{ font-size:12px; }

/* ---------- 地域タブ（規則ページ） ---------- */

.地域タブ{ display:flex; gap:6px; margin:0 0 10px; }
.地域タブボタン{
  flex:1;
  font:inherit;
  font-size:13px;
  color:var(--色-入口文字);
  background:var(--色-入口面);
  border:1px solid var(--色-入口枠);
  border-radius:8px;
  padding:9px 4px;
  cursor:pointer;
}
.地域タブボタン[aria-selected="true"]{
  background:var(--色-見出し帯);
  color:var(--色-見出し帯文字);
  border-color:var(--色-見出し帯);
}
.地域面{ display:none; }
.地域面[data-表示="true"]{ display:block; }

/* ---------- 会場の図（宴会：上座・下座） ---------- */

.席図{
  border:1px solid var(--色-罫線);
  border-radius:8px;
  padding:8px;
  margin:6px 0 10px;
  font-size:12px;
  text-align:center;
  background:var(--色-面);
}
.席図-段{
  padding:6px 4px;
  margin:0 0 4px;
  border-radius:6px;
}
.席図-舞台{ background:var(--色-アクセント面); color:var(--色-強調); }
.席図-上座{ background:var(--色-アクセント面); border:1px solid var(--色-入口枠); color:var(--色-強調); }
.席図-中{ color:var(--色-文字薄); padding:10px 4px; }
.席図-下座{ border:1px dashed var(--色-罫線); color:var(--色-文字薄); }
.席図-入口{ color:var(--色-文字薄); padding:2px; }

/* ---------- 円卓の図（パーティー：注ぐ順番） ---------- */

.円卓{
  position:relative;
  width:200px;
  height:200px;
  margin:6px auto 10px;
}
.円卓-卓{
  position:absolute;
  left:50px; top:50px;
  width:100px; height:100px;
  border-radius:50%;
  background:var(--色-アクセント面);
  border:1px solid var(--色-入口枠);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--色-強調); text-align:center;
}
.円卓-席{
  position:absolute;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--色-面);
  border:1px solid var(--色-入口枠);
  color:var(--色-入口文字);
  font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.円卓-席-主{ background:var(--色-見出し帯); color:var(--色-見出し帯文字); border-color:var(--色-見出し帯); }

/* ---------- 用語（基本用語） ---------- */

.用語一覧{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.用語一覧 li{
  font-size:13px;
  background:var(--色-アクセント面);
  border-radius:6px;
  padding:5px 10px;
}