/* ========= 第1章 41節-1 専用（最小・安全版） ========= */

/* スコープ＆トークン */
.page-law-proc, .page-law-proc * { box-sizing: border-box; }
.page-law-proc{
  --container: min(1120px, calc(100% - 32px));
  --page-bg: #f5f7fb;
  --card-bg: #fff;
  --ink: #0b1f3a;
  --accent: #1f2a44;
  --head-bg: #f1f6ff;
  --border: #e5e7eb;
  --border-strong: #d5d9e2;   /* 縦罫の視認性UP */
  --hint: #6b7280;            /* 補足色 */
  --ok: #0ea5a8;              /* 可バッジ色 */
  --ng: #ef4444;              /* 不可バッジ色 */
}
body.page-law-proc { background: var(--page-bg); color: var(--ink); }
.page-law-proc .breadcrumbs,
.page-law-proc .main-container { max-width: var(--container); margin-inline: auto; }

/* 見出し（統一） */
.page-law-proc .section-title{
  margin: 18px 0 14px;
  font: 700 clamp(22px,2.1vw,28px)/1.25 system-ui,"Noto Sans JP",sans-serif;
  color: var(--ink);
  border-left: 5px solid var(--accent);
  padding-left: 12px;
  background: transparent;
  box-shadow: none;
}

/* ====== テーブル（#revocations-and-suspensions 内だけ） ====== */
#revocations-and-suspensions .table-wrap{
  position: relative;
  background: transparent;
  padding: 2px 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  overflow-x: auto;          /* SP横スクロール */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pan-x; /* 縦横パンを許可（スクロール固まり対策） */
  overscroll-behavior-x: contain;
}

#revocations-and-suspensions .procedures-table{
  width: 100%;
  min-width: 920px;          /* 3列なのでやや狭めでOK */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.7;
}

#revocations-and-suspensions .procedures-table caption{
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin: 6px 0 12px;
}
#revocations-and-suspensions .procedures-table caption small{
  display:block; font-weight:400; color: var(--hint); margin-top: 4px;
}

/* セル基礎（sticky の透け防止） */
#revocations-and-suspensions .procedures-table th,
#revocations-and-suspensions .procedures-table td{
  background: #fff;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-break: auto-phrase;
}

/* ヘッダ固定 */
#revocations-and-suspensions .procedures-table thead th{
  position: sticky; top: 0; z-index: 40;
  background: var(--head-bg);
  border-bottom: 1px solid #d8e2ff;
  font-weight: 700;
}

/* 1列目（手段）固定＋右側の縦罫を疑似要素で */
#revocations-and-suspensions .procedures-table thead th:first-child,
#revocations-and-suspensions .procedures-table tbody th.cell-proc,
#revocations-and-suspensions .procedures-table tbody th[scope="row"]{
  position: sticky; left: 0; z-index: 45;
  background: #fff;
  background-clip: padding-box;
  isolation: isolate;
}
#revocations-and-suspensions .procedures-table thead th:first-child{ top: 0; z-index: 50; background: var(--head-bg); }
#revocations-and-suspensions .procedures-table thead th:first-child::after,
#revocations-and-suspensions .procedures-table tbody th.cell-proc::after,
#revocations-and-suspensions .procedures-table tbody th[scope="row"]::after{
  content: "";
  position: absolute; top: 0; right: -1px; bottom: 0; width: 1px;
  background: var(--border-strong);
  pointer-events: none;
}

/* 左列ラベルの見た目 */
#revocations-and-suspensions .cell-proc{
  background:#f9fbff; color:#0b2b66; font-weight:700; text-align:center;
}

/* 列の縦罫（1列目以外の境界） */
#revocations-and-suspensions .procedures-table thead th + th,
#revocations-and-suspensions .procedures-table tbody td + td{
  border-left: 1px solid var(--border-strong);
}


/* 4列の幅（例） */
#revocations-and-suspensions .procedures-table thead th:nth-child(1){ width: 160px; }   /* 項目 */
#revocations-and-suspensions .procedures-table thead th:nth-child(2){ width: auto; }  /* 内容 */
#revocations-and-suspensions .procedures-table thead th:nth-child(3){ width: 100px; }  /* 許可取消 */
#revocations-and-suspensions .procedures-table thead th:nth-child(4){ width: 100px; }   /* 使用停止 */


/* 行ストライプ */
#revocations-and-suspensions .procedures-table tbody tr:nth-child(even) td{
  background: #fcfdff;
}

/* SP微調整 */
@media (max-width: 768px){
  #revocations-and-suspensions .procedures-table{ min-width: 760px; }
  #revocations-and-suspensions .procedures-table th,
  #revocations-and-suspensions .procedures-table td{ padding: 12px 10px; font-size: .95rem; }
  #revocations-and-suspensions .procedures-table tbody td + td{ border-left: 1px solid #cfd6e3; }
}

/* 注釈：読みやすいミニリスト */
#revocations-and-suspensions .mini-list{
  margin: 0; padding-left: 1.1em; list-style: disc; line-height: 1.7;
}
#revocations-and-suspensions .mini-list li{ margin: 4px 0; }


/* 補助文字 */
.muted { color: var(--hint); font-size: .9em; }


/* ===== 頻出ポイント（オレンジ） ===== */
.page-law-proc .exam-notes{
  background: #FFF8E8;
  border: 2px dashed #F1C073;
  border-radius: 12px;
  box-shadow: none;
  padding: 18px 18px 16px;
  margin: 20px 0 18px;
}
.page-law-proc .exam-notes > h3{
  margin: 0 0 12px;
  font-size: clamp(18px,1.9vw,20px);
  font-weight: 700;
  color: #2B2B2B;
  border: 0; padding: 0;
}

/* 表示崩れ防止 */
.page-law-proc .main-container,
.page-law-proc .site-main,
.page-law-proc .summary-section{ overflow: visible !important; }

/* iOS/Safariの自動拡大を禁止（このページだけ） */
.page-law-proc { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* テーブル内の文字サイズを固定 */
.page-law-proc .procedures-table { font-size: 1rem; line-height: 1.6; }
@media (max-width: 768px){
  .page-law-proc .procedures-table th,
  .page-law-proc .procedures-table td{ font-size: .95rem; }
  .page-law-proc .procedures-table td,
  .page-law-proc .procedures-table th{
    word-break: break-word; overflow-wrap: anywhere;
  }
}


/* ── 修正②：ヘッダ行との列境界の一貫性（thead側も明示） ── */
#revocations-and-suspensions .procedures-table thead th + th {
  border-left: 1px solid var(--border-strong);
}

/* ── 修正③：頻出ポイントの箇条書きを“整うリスト”に ── */
.page-law-proc .exam-notes ul.compact{
  list-style: disc;
  padding-left: 1.2em;   /* ハンギングインデントの土台 */
  margin: .2rem 0 0;
}
.page-law-proc .exam-notes ul.compact li{
  margin: .35rem 0;
  line-height: 1.8;
  padding-left: .2em;    /* テキストがマーカーに寄り過ぎないよう微調整 */
}
.page-law-proc .exam-notes ul.compact li::marker{
  color: #C69336;        /* 枠のダッシュ色に寄せる（視認性UP） */
  font-size: .95em;
}

/* セル内リスト（読みやすい行間＆インデント） */
#revocations-and-suspensions .cell-list{
  margin: 0; padding-left: 1.2em; list-style: disc; line-height: 1.7;
}
#revocations-and-suspensions .cell-list li{ margin: .2rem 0; }

/* テーブルの直後に来る補足ボックスとの間隔を作る */
#revocations-and-suspensions .table-wrap{
  margin-bottom: 16px;       /* まずは下マージン */
  padding-bottom: 8px;       /* スクロールバーと衝突しないようクッション */
}

/* 補足ボックス自体の上マージン（他の場所でも使えるように） */
.note-box{ 
  margin-top: 18px; 
}

/* 画面幅で可変（SPは少し詰める、PCは広めに） */
@media (min-width: 768px){
  #revocations-and-suspensions .table-wrap{ margin-bottom: 20px; padding-bottom: 10px; }
  .note-box{ margin-top: 22px; }
}


/* ===== 1) 余白トークン（このページ専用スコープ・後で全ページに入れる） ===== */
.page-law-proc{
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}
.page-law-proc .section-title{ margin: var(--space-5) 0 var(--space-4); }
#revocations-and-suspensions .table-wrap{ margin-bottom: var(--space-5); }
.note-box{ margin-top: var(--space-5); }
.page-law-proc .exam-notes{ margin: var(--space-6) 0 var(--space-5); }

/* ===== 2) フォーカス可視化（このページ専用） ===== */
.page-law-proc a,
.page-law-proc button,
.page-law-proc [tabindex]:not([tabindex="-1"]) { outline: none; }
.page-law-proc :focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== 3) 印刷最適化（このページ専用） ===== */
@media print{
  .page-law-proc .site-header,
  .page-law-proc .breadcrumbs,
  .page-law-proc .nav-links{ display: none !important; }
  .page-law-proc{ background: #fff; color: #000; }
  .page-law-proc .procedures-table th,
  .page-law-proc .procedures-table td{ border-color: #999; }
}


/* 共通 or このページCSSに */
.sec-badge::before{
  content: var(--sec-no, "⑪");
  display: inline-block;
  font-weight: 700;
  margin: 0 .3em 0 .2em; /* ← ここで左右の間隔を調整 */
}

/* chapter1_transport_and_transfer.css など このページのスコープで */
.page-law-proc { --sec-no: "⑪"; }

/* ○/— の見やすさ（中央寄せ） */
#revocations-and-suspensions .procedures-table td:nth-child(3),
#revocations-and-suspensions .procedures-table td:nth-child(4){
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 3-α) テキスト内容での色分けはCSSだけでは困難なので、
   data-attr を使う方法を用意（HTML側で <td data-mark="ok">○</td> など） */
#revocations-and-suspensions .procedures-table td[data-mark="ok"]{ color:#0aa07a; }
#revocations-and-suspensions .procedures-table td[data-mark="na"]{ color:#7a8699; }

/* 4) 余白のソースを一本化（トークンに寄せる） */
#revocations-and-suspensions .table-wrap{ margin-bottom: var(--space-5); padding-bottom: 10px; }


/* 小見出しの改行感を穏やかに */
#revocations-and-suspensions .cell-proc{ line-height: 1.35; }