/* 記録所.com のデザインの試作（データベースの見た目）。どの画面も、表と「項目: 値」の並びで見せる。
   色は、傾向の◯（いつも表のいちばん左の列）だけに使う */
:root {
  --canvas: #f3f4f5;
  --panel: #ffffff;
  --line: #d9dde1;
  --line-soft: #e8ebee;
  --head: #eef0f2;
  --text: #2a2f35;
  --name: #000000;
  --sub: #6a7178;
  --brass: #8a6a1e;
  --brass-soft: #f4eedd;
  --none: #9aa1a8;
  --font: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.7; font-feature-settings: "palt" 1; }
a { color: var(--name); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
h1, h2, h3 { margin: 0; color: var(--name); font-weight: 700; line-height: 1.4; }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }

/* 頭: 名前・行き先・検索 */
.bar { background: var(--panel); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.wordmark { font-size: 20px; font-weight: 700; color: var(--name); letter-spacing: 0.01em; }
.nav { display: flex; gap: 20px; font-size: 14px; }
.nav a { color: var(--sub); }
.nav a[aria-current="page"] { color: var(--name); font-weight: 500; }
.bar .search { margin-left: auto; display: flex; width: min(420px, 100%); }
.search input, .field select, .field input { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; min-width: 0; }
.bar .search input { flex: 1; border-radius: 6px 0 0 6px; }
.btn { font: inherit; font-weight: 500; color: #fff; background: var(--name); border: 1px solid var(--name); border-radius: 6px; padding: 7px 16px; cursor: pointer; white-space: nowrap; }
.bar .search .btn { border-radius: 0 6px 6px 0; }
.btn.quiet { color: var(--text); background: var(--panel); border-color: var(--line); }

/* 見出しの行（見出しと件数）と、絞り込みの行 */
.page-head { padding: 28px 0 18px; display: grid; gap: 6px; }
.page-head .count { color: var(--sub); }
.block { margin: 0 0 28px; }
.block-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.block-head .count { color: var(--sub); font-size: 13px; }
.block-head .more { margin-left: auto; font-size: 13px; color: var(--brass); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 10px 12px; }
.toolbar + .table-wrap .db { border-radius: 0 0 6px 6px; }
.field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; color: var(--text); background: var(--panel); border: 0; border-left: 1px solid var(--line); padding: 5px 12px; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--name); color: #fff; }

/* 表 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.db { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.db th { background: var(--head); color: var(--sub); font-weight: 500; font-size: 12px; text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db th:first-child { border-top-left-radius: 6px; } .db th:last-child { border-top-right-radius: 6px; }
.db th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.db th[aria-sort] button::after { content: "▼"; font-size: 9px; margin-left: 4px; color: var(--brass); }
.db th[aria-sort="ascending"] button::after { content: "▲"; }
.db td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.db tbody tr:last-child td { border-bottom: 0; }
.db tbody tr:hover td { background: #fafbf8; }
.db .lean { width: 44px; text-align: center; padding-left: 14px; padding-right: 4px; }
.db .r { text-align: right; white-space: nowrap; }
.db .nw { white-space: nowrap; }
.db .who a, .db .who { font-weight: 500; color: var(--name); }
.db .sub { color: var(--sub); font-size: 13px; }
.db .gist { color: var(--text); font-size: 13px; margin-top: 2px; }
.db .title { font-weight: 500; color: var(--name); }

/* 傾向の◯。白は縁を付けて見えるように。判断できる判決が少ない人は、破線の◯ */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); vertical-align: -2px; flex: none; }
.dot.none { background: var(--panel); box-shadow: none; border: 1.5px dashed var(--none); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--sub); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* 立場: 反対意見・意見は枠、多数意見は地の文 */
.pos { display: inline-block; font-size: 12px; font-weight: 500; color: var(--name); padding: 0 6px; border-radius: 3px; line-height: 1.8; white-space: nowrap; }
.pos.against { border: 1.5px solid var(--name); }
.pos.opinion { border: 1px dashed var(--name); }
.pos.with { color: var(--sub); padding-left: 0; font-weight: 400; }

/* 項目: 値 の並び */
.kv { display: grid; grid-template-columns: 8em 1fr; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.kv dt, .kv dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.kv dt { color: var(--sub); background: #f8f9fa; font-size: 13px; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

.pager { display: flex; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 10px; font-size: 13px; color: var(--sub); }
.pager a, .pager span.cur { min-width: 30px; text-align: center; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
.pager span.cur { background: var(--name); color: #fff; border-color: var(--name); }

.foot { color: var(--sub); font-size: 12px; padding: 24px 0 48px; border-top: 1px solid var(--line); margin-top: 12px; }

@media (max-width: 720px) {
  .bar .wrap { height: auto; flex-wrap: wrap; gap: 10px 20px; padding-top: 10px; padding-bottom: 10px; }
  .bar .search { width: 100%; }
  .kv { grid-template-columns: 6.5em 1fr; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* トップ: 左に表、右にタイムライン（判決・任命・昇格や異動・司法試験などのニュース）と新しい投稿 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.timeline { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.timeline li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { grid-column: 1 / -1; color: var(--sub); font-size: 12px; }
.timeline a { color: var(--name); }
.timeline .who { font-weight: 500; }
.tag { align-self: start; font-size: 11px; font-weight: 500; color: var(--name); border: 1px solid var(--line); background: var(--head); border-radius: 3px; padding: 0 6px; line-height: 1.8; white-space: nowrap; }
.tag.plain { background: none; border: 0; font-size: 14px; padding: 0; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

/* 傾向の色の見方: 色の◯と同じ色の帯。左ほどリベラル（青）、真ん中が中立（白）、右ほど保守（赤）。
   濃さは寄り方の強さ（左の結論に付いた割合が50%から離れるほど濃い）。縦の線は言葉の区切り（70・57・43・30%） */
.gauge { max-width: 560px; margin-top: 12px; }
.gauge-bar { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #1f5fbf, #ffffff 50%, #c8102e); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.gauge-bar i { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(0, 0, 0, 0.35); }
.gauge-labels { position: relative; height: 1.9em; font-size: 12px; color: var(--text); }
.gauge-labels span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.gauge-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
@media (max-width: 520px) { .gauge-labels span:nth-child(2), .gauge-labels span:nth-child(4) { top: 20px; } .gauge-labels { height: 3.4em; } }

/* 担当した判決の行に、本人の個別意見（反対意見・意見・補足意見）を入れる */
.mine { margin-top: 8px; padding: 8px 12px; background: #f8f9fa; border-left: 3px solid var(--name); border-radius: 0 4px 4px 0; font-size: 13px; }
.mine-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; color: var(--name); margin-bottom: 2px; }
.mine a { color: var(--brass); font-size: 12px; }

/* 事件の流れ（一審 → 二審 → 最高裁 → 差戻し審）。左の線と点で、同じ事件の判決のつながりを見せる */
.flow td.step { position: relative; padding-left: 34px; white-space: nowrap; font-weight: 500; }
.flow td.step .sub { display: block; font-weight: 400; font-size: 12px; }
.flow td.step::before { content: ""; position: absolute; left: 16px; top: 0; bottom: -1px; width: 2px; background: var(--line); }
.flow tbody tr:first-child td.step::before { top: 21px; }
.flow tbody tr:last-child td.step::before { bottom: auto; height: 21px; }
.flow td.step::after { content: ""; position: absolute; left: 11px; top: 15px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--panel); border: 2px solid var(--sub); }
.flow tr.here td { background: var(--brass-soft); }
.flow tr.here td.step::after { background: var(--brass); border-color: var(--brass); }

/* 個別意見の概要 */
.lead-note { font-size: 13px; margin: 0 0 10px; max-width: 62em; }
.ops .op-text { margin: 0; max-width: 46em; line-height: 1.75; }
.ops .op-more { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--brass); }
.ops tr:target td { background: var(--brass-soft); }
/* 並べ替えられる列（まだ並べていない）の印は薄く */
.db th[aria-sort="none"] button::after { content: "▼"; color: var(--line); }
/* 主な判決を選んだ理由 */
.title + .tag { margin-left: 8px; }

/* 向きは点だけ。見出しの「?」で、見方（ゲージと説明）をモーダルで出す */
.side-dot { width: 10px; height: 10px; vertical-align: middle; }
.help { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--sub); font: 500 11px/1 var(--font); cursor: pointer; vertical-align: 1px; }
.help:hover, .help:focus-visible { border-color: var(--brass); color: var(--brass); }
.modal { width: min(520px, calc(100vw - 32px)); padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }
.modal::backdrop { background: rgba(20, 24, 28, .45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-close { padding: 4px; border: 0; background: none; color: var(--sub); font-size: 20px; line-height: 1; cursor: pointer; }
.modal p { margin: 12px 0 0; font-size: 13px; line-height: 1.75; }
.muki-keys { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.muki-keys li { display: flex; align-items: center; gap: 8px; }

/* 主な判決: どんな裁判か、一審からの流れ、本人の立場を一目で */
.keys { display: grid; gap: 12px; }
.key { padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.key-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.key-head .title { font-size: 15px; }
.key-side { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--sub); }
.key-side .help { margin-right: 4px; }
.key-body { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px 12px; margin: 0; font-size: 13px; }
.key-body dt { color: var(--sub); }
.key-body dd { margin: 0; line-height: 1.7; }
.steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.step-box { display: grid; gap: 1px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); color: inherit; text-decoration: none; }
a.step-box:hover { border-color: var(--brass); }
.step-box small { font-size: 11px; color: var(--sub); }
.step-box b { font-weight: 500; }
.step-box.here { border-color: var(--brass); background: var(--brass-soft); }
.steps .arr { align-self: center; color: var(--sub); }
@media (max-width: 640px) { .key-body { grid-template-columns: 1fr; gap: 2px; } .key-body dt { margin-top: 8px; } .key-side { margin-left: 0; } }

/* 傾向の見出し: 並べ替えの印は「?」に付けない */
.db th.lean { white-space: nowrap; }
.db th[aria-sort] button.help::after { content: none; }
.modal h3 { margin: 16px 0 0; font-size: 13px; }
.modal h3 + p { margin-top: 4px; }

/* スマホ（幅 720px 以下。列を隠す幅と同じ）: 余白を詰め、長い表は組み替える。
   一覧: 1行目に日付・立場・向き、2行目に判決名と要約。個別意見: 1行目に種類・名前・向き、2行目に概要。
   項目と値の表（あらまし など）: 項目を上、値を下に積む。プロフィール: 写真と名前を横に、項目は下に */
.sm-only { display: none; }
@media (max-width: 720px) {
  h1 { font-size: 21px; }
  .page-head { padding: 18px 0 12px; }
  .block { margin-bottom: 22px; }
  .db th, .db td { padding: 8px 10px; }
  .db .lean { width: 34px; padding-left: 10px; padding-right: 2px; }
  .sm-only { display: block; }
  .db .who .aff { font-size: 12px; font-weight: 400; color: var(--sub); }

  .db.stack tr, .db.stack th, .db.stack td { display: block; }
  .db.stack tbody tr { border-bottom: 1px solid var(--line-soft); }
  .db.stack tbody tr:last-child { border-bottom: 0; }
  .db.stack th { width: auto !important; padding-bottom: 0; border-bottom: 0; background: none; font-size: 12px; }
  .db.stack td { border-bottom: 0; padding-top: 2px; }
  .db.stack tbody tr:first-child th { border-radius: 6px 6px 0 0; }

  .db.list thead, .db.ops thead { display: none; }
  .db.list tbody tr, .db.ops tbody tr { display: grid; align-items: center; column-gap: 8px; border-bottom: 1px solid var(--line-soft); }
  .db.list tbody tr:last-child, .db.ops tbody tr:last-child { border-bottom: 0; }
  .db.list td, .db.ops td { border-bottom: 0; }
  .db.list tbody tr { grid-template-columns: 1fr auto auto; }
  .db.list td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .db.ops tbody tr { grid-template-columns: auto 1fr auto; }
  .db.ops td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }

  .flow td.step { padding-left: 30px; }
  .flow td.step::before { left: 13px; }
  .flow td.step::after { left: 8px; }

}
@media (max-width: 720px) {
  /* 絞り込みのボタンは折り返さない */
  .field { white-space: nowrap; }
  .seg button { padding: 5px 9px; white-space: nowrap; }
  .flow .res { font-weight: 500; }
}

/* スマホの情報の順。ページの種類ごとに、大事なものから並べ直す（PC の並びはそのまま）
   トップ: 最高裁 → タイムライン → 下級審 → 新しい投稿
   裁判官: 写真と名前 → ページ内の案内 → 主な判決 → 担当した判決 → 経歴・投稿
   判決: 見出しと結果 → 要約 → 裁判の流れ → 個別意見 → 裁判官 → 事件番号などの項目 */
.sm-inline, .sm-flex { display: none; }
@media (max-width: 720px) {
  .sm-inline { display: inline; }
  .sm-flex { display: flex; }

  .page-top .split { display: flex; flex-direction: column; gap: 0; }
  .page-top .split > .main, .page-top .split > .side { display: contents; }
  .page-top section[aria-labelledby="sc"] { order: 1; }
  .page-top section[aria-labelledby="tl"] { order: 2; }
  .page-top section[aria-labelledby="lower"] { order: 3; }
  .page-top section[aria-labelledby="posts"] { order: 4; }

  .jnav { position: sticky; top: 0; z-index: 5; gap: 6px; margin: 0 -16px 16px; padding: 8px 16px; background: var(--canvas); border-bottom: 1px solid var(--line); overflow-x: auto; }
  .jnav a { flex: none; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 13px; }

  .page-case { display: flex; flex-direction: column; }
  .page-case > .case-top { display: contents !important; }
  .page-case > .page-head { order: 1; }
  .page-case > .case-top > .table-wrap { order: 2; margin-bottom: 22px; }
  .page-case > section[aria-labelledby="flow"] { order: 3; }
  .page-case > section[aria-labelledby="ops"] { order: 4; }
  .page-case > section[aria-labelledby="bench"] { order: 5; }
  .page-case > .case-top > .kv { order: 6; margin-bottom: 22px; }
  .page-case > .foot { order: 7; }
  .verdict { flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 2px; font-size: 13px; }
  .verdict > span { display: inline-flex; align-items: center; gap: 4px; }

  /* 一覧の上に、右の印の見方 */
  .list-key { align-items: center; gap: 2px; padding: 6px 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); color: var(--sub); font-size: 12px; }
  .toolbar + .list-key { border-top: 1px solid var(--line-soft); }
  .list-key + .table-wrap .db { border-radius: 0 0 6px 6px; }
  .db.list td:first-child { white-space: normal; }
  .page-cases .db.list tbody tr { grid-template-columns: 1fr auto; }
  .page-cases .db.list td:nth-child(6) { grid-column: 1 / -1; grid-row: 3; padding-top: 0; }

  /* 主な判決の流れは縦に（左に段階と裁判所、右に結果） */
  .steps { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .steps .arr { display: none; }
  .step-box { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: var(--panel); }
  .step-box:last-child { border-bottom: 0; }
  .step-box.here { border-color: var(--line-soft); }
  .step-box b { text-align: right; }
}
@media (max-width: 720px) {
  /* 項目名（みんなの評価・結論の向き など）が折れないように */
  .kv { grid-template-columns: 7.5em 1fr; }
}

/* 押せる名前と判決名は、薄い下線で示す（色は付けない。青と赤は傾向の色と紛れるため） */
.db .who a, a.who, .db a.title, .key-head a.title, .timeline a, .bench-name a { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.28); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.db .who a:hover, a.who:hover, .db a.title:hover, .key-head a.title:hover, .timeline a:hover { text-decoration-color: var(--brass); }

/* 裁判官のページ: 上に「人の記録」（写真・名前・傾向の色・役職と、就任・定年・国民審査・件数などの事実）。
   その下は、左に判決（主な判決・担当した判決）、右に経歴とみんなの投稿（タブ）。スマホでは記録 → 判決 → 経歴・投稿の順 */
.crumb { padding-top: 16px; font-size: 13px; }
.crumb a { color: var(--brass); }
.record { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px 22px; margin: 12px 0 24px; padding: 20px 22px 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.record-photo { margin: 0; }
.photo-ph { display: grid; place-items: center; width: 112px; height: 140px; padding: 8px; background: #e4e7ea; color: var(--sub); font-size: 11px; text-align: center; }
.record-photo figcaption { margin-top: 4px; font-size: 10px; line-height: 1.5; color: var(--sub); }
.record-photo figcaption a { color: var(--brass); }
.record-id { align-self: center; }
.who-line { display: flex; align-items: center; gap: 12px; }
.who-line h1 { font-size: 34px; letter-spacing: 0.02em; }
.dot.dot-lg { width: 26px; height: 26px; }
.reading { margin-top: 2px; font-size: 13px; color: var(--sub); }
.post { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--name); }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -22px; border-top: 1px solid var(--line); }
.facts > div { padding: 10px 16px 12px 22px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.facts > div:nth-child(4n) { border-right: 0; }
.facts > div:nth-last-child(-n+4) { border-bottom: 0; }
.facts dt { font-size: 12px; color: var(--sub); }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; color: var(--name); }
.facts dd .sub { display: block; font-size: 12px; font-weight: 400; color: var(--sub); }
.facts dd .sub a { color: var(--brass); }
.judge-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.side-tabs { display: flex; overflow: hidden; background: var(--head); border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; }
.side-tabs [role="tab"] { flex: 1; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sub); font: inherit; font-size: 13px; cursor: pointer; }
.side-tabs [role="tab"][aria-selected="true"] { background: var(--panel); color: var(--name); font-weight: 500; border-bottom-color: var(--name); }
.side-panel { padding: 0 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 6px 6px; }
.career-list { margin: 0; padding: 0; list-style: none; }
.career-list li { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.6; }
.career-list .yr { color: var(--sub); }
.career-list li.now { background: var(--brass-soft); color: var(--name); font-weight: 500; }
.side-h { margin: 16px 16px 6px; font-size: 13px; }
.quotes { display: grid; gap: 10px; margin: 0; padding: 0 16px; list-style: none; }
.quotes li { padding-left: 12px; border-left: 3px solid var(--line); }
.quotes q { display: block; color: var(--name); font-size: 14px; quotes: "「" "」"; }
.quotes .src { font-size: 12px; color: var(--brass); }
.side-note { margin: 12px 16px 0; font-size: 12px; color: var(--sub); }
.side-note a { color: var(--brass); }
.post-form { display: grid; gap: 10px; padding: 12px 16px 14px; border-bottom: 1px solid var(--line-soft); }
.post-form .seg { justify-self: start; }
.post-form textarea { min-height: 72px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; }
.post-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--sub); }
.posts { margin: 0; padding: 0; list-style: none; }
.posts li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 2px 8px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.posts li:last-child { border-bottom: 0; }
.posts li p { grid-column: 1 / -1; }
.posts .report { justify-self: end; padding: 0; border: 0; background: none; color: var(--sub); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
@media (max-width: 1000px) { .judge-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .record { grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; margin-top: 8px; padding: 14px 14px 0; }
  .photo-ph { width: 64px; height: 80px; padding: 4px; font-size: 9px; }
  .record-photo figcaption { font-size: 9px; }
  .who-line { gap: 8px; }
  .who-line h1 { font-size: 24px; }
  .dot.dot-lg { width: 20px; height: 20px; }
  .post { margin-top: 6px; font-size: 13px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -14px; }
  .facts > div { padding: 8px 14px; }
  .facts > div:nth-child(4n) { border-right: 1px solid var(--line-soft); }
  .facts > div:nth-child(2n) { border-right: 0; }
  .facts > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line-soft); }
  .facts > div:nth-last-child(-n+2) { border-bottom: 0; }
  .facts dd { font-size: 14px; }
}

/* 主な判決の流れは、どの幅でも縦に並べる（左に段階と裁判所、右に結果）。横に並べると折り返して矢印が行頭に来るため */
.steps { display: grid; gap: 0; max-width: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.steps .arr { display: none; }
.step-box { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: var(--panel); }
.step-box:last-child { border-bottom: 0; }
.step-box.here { border-color: var(--line-soft); background: var(--brass-soft); }
.step-box small { font-size: 12px; }
.step-box b { text-align: right; }

/* PC: 人の記録は「写真・名前・事実の表」を横一列に（名前の右が空かないように、上の段を低く） */
@media (min-width: 1001px) {
  .record { grid-template-columns: 112px minmax(230px, 290px) minmax(0, 1fr); padding: 20px 0 20px 22px; }
  .record-id { align-self: start; padding-top: 4px; }
  .facts { grid-column: auto; grid-auto-rows: 1fr; align-self: stretch; margin: -20px 0; border-top: 0; border-left: 1px solid var(--line); }
  .facts > div { display: flex; flex-direction: column; justify-content: center; padding: 10px 14px 10px 16px; }
}

/* 裁判官のページのタブ（経歴・主な判決・担当裁判・みんなの投稿）。丸いボタンを横に並べ、選んだものを黒に。
   下に動いても上に残る。中身は1つずつ出す（経歴は、PC では経歴と本人の発言を左右に） */
.jtabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; margin: 0 0 16px; padding: 10px 0; overflow-x: auto; background: var(--canvas); border-bottom: 1px solid var(--line); }
.jtabs [role="tab"] { flex: none; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.jtabs [role="tab"] .num { margin-left: 6px; color: var(--sub); font-size: 12px; }
.jtabs [role="tab"][aria-selected="true"] { background: var(--name); border-color: var(--name); color: #fff; font-weight: 500; }
.jtabs [role="tab"][aria-selected="true"] .num { color: rgba(255, 255, 255, 0.75); }
.jpanel { margin-bottom: 28px; }
.jpanel.narrow { max-width: 860px; }
.jbox { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.career-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.panel-h { margin: 4px 0 10px; font-size: 14px; }
.career-grid .quotes { padding: 0; }
.career-grid .side-note { margin: 12px 0 0; }
.jbox .career-list li:last-child { border-bottom: 0; }
@media (max-width: 720px) {
  .jtabs { gap: 6px; margin: 0 -16px 14px; padding: 8px 16px; }
  .jtabs [role="tab"] { padding: 5px 13px; font-size: 13px; }
  .career-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* 整理: 一覧（担当裁判・判決をさがす）。PC は列の見出しがラベル。行の上下を少し広げる */
.db.list td { padding-top: 11px; padding-bottom: 11px; }
.list-note { margin-top: 8px; font-size: 12px; color: var(--sub); }
/* 主な判決のカード: 選んだ理由 → 判決名 → 日付と法廷 → ラベル付きの項目 */
.keys { gap: 16px; }
.key { padding: 16px 20px 8px; }
.key-why { font-size: 12px; font-weight: 500; color: var(--brass); }
.key-title { margin-top: 2px; font-size: 16px; line-height: 1.5; }
.key-meta { margin-top: 2px; font-size: 12px; color: var(--sub); }
.key-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); row-gap: 12px; }
.key-body dt { display: flex; align-items: flex-start; gap: 2px; }
/* スマホの一覧: 1行目に日付・裁判所・種類、2行目に判決名、3行目に要約、その下にラベル付きの項目
   （担当裁判は 結果・本人の立場・向き、判決をさがすは 結果・向き・裁判長）。ラベルは td の data-label から出す */
@media (max-width: 720px) {
  .db.list tbody tr, .page-cases .db.list tbody tr { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 22px; padding: 4px 0 2px; }
  .db.list td:first-child { grid-column: 1 / -1; grid-row: 1; padding-bottom: 0; }
  .db.list td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 2px; padding-bottom: 6px; }
  .db.list td[data-label], .page-cases .db.list td:nth-child(6) { grid-column: auto; grid-row: 3; padding-top: 0; padding-bottom: 12px; }
  .db.list td[data-label]::before, .db.ops td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 11px; line-height: 1.4; color: var(--sub); }
  .db.list .title { font-size: 15px; }
  .db.list .gist { margin-top: 4px; }
  .tool-help { align-items: center; gap: 2px; margin-left: auto; font-size: 12px; color: var(--sub); }
  .toolbar .field:has(.seg) { flex-direction: column; align-items: flex-start; gap: 4px; }
  .jtabs [role="tab"] .num { display: none; }
  .key { padding: 14px 14px 6px; }
}
@media (max-width: 720px) {
  /* 主な判決の流れ: 狭い幅では、段階と裁判所の下に結果（右に並べると欠けるため） */
  .step-box { flex-direction: column; align-items: flex-start; gap: 0; }
  .step-box b { text-align: left; }
}
/* #key などでタブを開いたとき、上に残るタブの並びに中身の頭が隠れないように */
.jpanel { scroll-margin-top: 64px; }
/* タブの中の見出し（経歴・本人の発言は左右に、ほかは一覧の上に）。大きさはほかの欄の見出しと同じ */
.panel-h { margin: 0 0 10px; font-size: 17px; }
.panel-lead { margin: -4px 0 12px; font-size: 13px; color: var(--sub); }

/* ---- ここから下は、試作をサイトに移すときに足したもの（見た目は試作のまま。試作で style 属性や仮のリンクだった所） ---- */
/* 判決のページの上の段（要約の表と項目の並び）。幅が狭いときは縦に積む（試作の <style> と同じ） */
@media (max-width: 860px) { main .block[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }
.db.stack td p + p { margin-top: 6px; }
.kv a { color: var(--brass); }

/* 絞り込み（立場）はページを読み直すので、ボタンと同じ見た目のリンクにする */
.seg a { font-size: 13px; color: var(--text); background: var(--panel); border-left: 1px solid var(--line); padding: 5px 12px; white-space: nowrap; }
.seg a:first-child { border-left: 0; }
.seg a:hover { text-decoration: none; background: #fafbf8; }
.seg a[aria-current="true"] { background: var(--name); color: #fff; }
@media (max-width: 720px) { .seg a { padding: 5px 9px; } }

/* 写真のない裁判官: 写真の場所に、傾向の色の◯と名前の1字（設計書 §3.2） */
.photo-dot { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); color: var(--ink); font-size: 44px; font-weight: 700; line-height: 1; }
.photo-dot.none { background: var(--panel); box-shadow: none; border: 2px dashed var(--none); color: var(--sub); }
.record-photo img { display: block; width: 112px; height: auto; }
@media (max-width: 720px) { .photo-dot { width: 64px; height: 64px; font-size: 26px; } .record-photo img { width: 64px; } }

/* 中身がまだないとき */
.empty { padding: 14px 16px; font-size: 13px; color: var(--sub); }
.empty-box { padding: 14px 16px; font-size: 13px; color: var(--sub); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.toolbar + .empty-box { border-radius: 0 0 6px 6px; }

/* みんなの投稿: 送った結果の知らせ、通報したあとのボタン */
.post-msg { font-size: 12px; color: var(--name); font-weight: 500; }
.post-msg:empty { display: none; }
.post-form .ts-box:empty { display: none; }
.posts .report[disabled] { text-decoration: none; cursor: default; }
.posts li p { white-space: pre-line; overflow-wrap: anywhere; }

/* ページの下の案内 */
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.foot a { color: var(--sub); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.2); text-underline-offset: 3px; }

/* 判決をさがす: 名前で探したときの裁判官 */
.hits { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 12px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.hits li { display: inline-flex; align-items: center; gap: 6px; }
.hits a { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.28); text-underline-offset: 3px; }
.hits .sub { color: var(--sub); font-size: 12px; }

/* 読み物のページ（このサイトについて・利用規約・プライバシーポリシー・削除の依頼） */
.legal { max-width: 760px; padding-bottom: 8px; }
.legal section { margin-top: 24px; }
.legal p, .legal li { line-height: 1.8; }
.legal p + p, .legal h2 + p, .legal h2 + ul, .legal p + ul { margin-top: 8px; }
.legal ul, .legal ol { margin: 8px 0 0; padding-left: 1.4em; }
.legal a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }

/* エラーのページ */
.err { padding: 48px 0 56px; }
.err .code { color: var(--sub); font-size: 14px; font-weight: 700; }
.err p { margin-top: 10px; color: var(--sub); }
.err .btn { display: inline-block; margin-top: 20px; }
.err .btn:hover { text-decoration: none; }

/* 裁判官のページの写真: 裁判所の写真を加工せずに出す（縦横比もそのまま。表示の大きさだけ変える）。写真がない人は写真の列を作らない */
.record-photo img { display: block; width: 112px; height: auto; }
.record.no-photo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .record-photo img { width: 64px; } .record.no-photo { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1001px) { .record.no-photo { grid-template-columns: minmax(230px, 340px) minmax(0, 1fr); } }

/* PC（幅1001px以上）: タブにせず、左に主な判決・担当裁判、右に経歴・みんなの投稿を並べて1画面で見せる（2026-11-02 ユーザー「PC版はタブ切り替えじゃなくして」）。
   スマホ・タブレットはタブで切り替える */
@media (min-width: 1001px) {
  .jtabs { display: none; }
  .jcols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .jcols .jmain { grid-column: 1; grid-row: 1; }
  .jcols .jside { grid-column: 2; grid-row: 1; }
  .jcols .jpanel, .jcols .jpanel[hidden] { display: block !important; max-width: none; }
  .jside .career-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}