/* =============================================
   SSH 大会実績（年度別アコーディオン + 表）
   - JS不要・ZOMEKI対応（外部参照なし）
   - 長文でも崩れにくい可読性重視
   - ライト基調 + ダーク環境での見栄えも配慮
   Author: ChatGPT
   ============================================= */

/* ---------- Theme variables (Light default) ---------- */
:root{
  --bg: #f7f9fc;             /* page background */
  --panel: #ffffff;           /* card background */
  --panel-2: #f9fafb;         /* alt bg */
  --text: #0f172a;            /* slate-900 */
  --muted: #475569;           /* slate-600 */
  --muted-2: #64748b;         /* slate-500 */
  --border: #e6e8ee;          /* subtle border */
  --grid: #e4e7ee;            /* table grid */
  --grid-strong: #cfd6e3;     /* header border */
  --accent: #2563eb;          /* blue-600 */
  --accent-2: #059669;        /* emerald-600 */
  --accent-3: #7c3aed;        /* violet-600 */
  --chip-bg: #eef2ff;         /* indigo-50 */
  --chip-text: #3730a3;       /* indigo-800 */
  --badge-bg: #e8efff;        /* blue-50 */
  --badge-text: #1e40af;      /* blue-800 */
  --badge-success-bg: #e9fdf4;/* emerald-50 */
  --badge-success-text: #065f46;/* emerald-900 */
  --row-alt: #fbfdff;         /* zebra alt */
  --shadow: 0 10px 24px rgba(15,23,42,.06), 0 1px 0 rgba(2,6,23,.04);
  --radius: 14px;
}

/* Auto dark-tint for users with dark preference */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f172a;
    --panel: #111827;
    --panel-2: #0b1220;
    --text: #e5e7eb;
    --muted: #a3aec2;
    --muted-2: #94a3b8;
    --border: #1f2937;
    --grid: #283244;
    --grid-strong: #36455f;
    --accent: #60a5fa;
    --accent-2: #34d399;
    --accent-3: #c4b5fd;
    --chip-bg: rgba(99,102,241,.18);
    --chip-text: #e0e7ff;
    --badge-bg: rgba(96,165,250,.18);
    --badge-text: #dbeafe;
    --badge-success-bg: rgba(52,211,153,.2);
    --badge-success-text: #bbf7d0;
    --row-alt: rgba(255,255,255,.02);
    --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,
.02);
  }
}

/* ---------- Base layout ---------- */
html, body { height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo,
sans-serif;
  background:
    radial-gradient(1000px 650px at 8% -10%, rgba(37,99,235,.08),
transparent 60%),
    radial-gradient(900px 600px at 92% 0%, rgba(5,150,105,.08), transparent
55%),
    var(--bg);
  color: var(--text);
}
.shell{ max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; }

/* Header */
.page-head{ display:flex; gap:18px; align-items:flex-end; justify-content:
space-between; flex-wrap:wrap; }
.title{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(5,150,105,
.08));
  border: 1px solid var(--border);
  padding: 12px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.title h1{ margin:0; font-weight:800; letter-spacing:.02em; font-size: clamp
(1.1rem, 1.1rem + 1vw, 1.9rem); }
.title small{ color: var(--muted); font-weight:500; }

/* 検索UIは今回非表示に（検索ベースから移行） */
.controls{ display:none !important; }

/* ---------- Accordion (details/summary) ---------- */
.accordion { display: grid; gap: 14px; margin-top: 14px; }
.acc {
  border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); box-shadow: var(--shadow);
  overflow: clip;
}
.acc > summary{
  list-style: none; cursor: pointer; user-select: none; outline: none;
  display: flex; align-items: center; justify-content: space-between; gap:
12px;
  padding: 14px 16px; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--border);
}
.acc > summary::-webkit-details-marker{ display:none; }

/* Chevron */
.acc > summary::before{
  content: ""; width: 10px; height: 10px; flex: 0 0 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted
);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.acc[open] > summary::before{ transform: rotate(45deg); }

/* 件数バッジ */
.sum-count{
  display:inline-flex; align-items:center; padding:.15rem .55rem;
  border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--badge-text); background: var
(--badge-bg);
}

.acc .acc-body{ animation: accFade .18s ease; background: var(--panel); }
@keyframes accFade { from{ opacity:.6; transform: translateY(-1px);} to{
opacity:1; transform:none;} }

/* ---------- Table (lined) ---------- */
.table-wrap{ overflow:auto; }

/* 列幅（HTMLの colgroup と連携） */
.col-year{ width: 120px; }
.col-division{ width: 200px; }
.col-award{ width: 180px; }

/* 基本表スタイル */
table{ width:100%; border-collapse: separate; border-spacing: 0; }
caption{ text-align:left; padding:14px 16px; color: var(--muted); font-size:
.95rem; }

table.lined thead th{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 2px solid var(--grid-strong);
  text-align: left; font-weight: 700; letter-spacing:.02em; font-size:.95rem
;
  padding: 14px 16px; color: var(--muted);
}

table.lined tbody td{
  padding: 14px 16px; vertical-align: top; color: var(--text);
  border-bottom: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
  line-height: 1.7; word-break: normal; overflow-wrap: anywhere; hyphens:
auto;
}

/* 最後の列の右線は消す */
table.lined thead th:last-child,
table.lined tbody td:last-child{ border-right: none; }

/* ゼブラ行（控えめ） */
table.lined tbody tr:nth-child(odd){ background: var(--row-alt); }

/* ホバー */
table.lined tbody tr{ transition: background-color .16s ease; }
table.lined tbody tr:hover{ background: color-mix(in srgb, var(--accent) 6%,
transparent); }

/* カード感を少し出す（最初／最後の角） */
table.lined tbody tr:first-child td:first-child{ border-top-left-radius:
12px; }
table.lined tbody tr:first-child td:last-child{  border-top-right-radius:
12px; }
table.lined tbody tr:last-child  td:first-child{ border-bottom-left-radius:
12px; }
table.lined tbody tr:last-child  td:last-child{  border-bottom-right-radius:
12px; }

/* 年度チップ・バッジ */
.year-chip{
  display:inline-block; padding:.25rem .55rem; border-radius:8px;
  background: var(--chip-bg); color: var(--chip-text);
  border: 1px solid var(--border); font-size:.85rem; font-weight:700;
}
.nowrap{ white-space: nowrap; }

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:.25rem .6rem;
  border-radius:999px; font-size:.85rem; font-weight:700; letter-spacing:
.01em;
  border: 1px solid var(--border); background: var(--badge-bg); color: var(
--badge-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.badge.success{ background: var(--badge-success-bg); color: var(
--badge-success-text); }

/* 行左のアクセントバー（視線誘導） */
table.lined tbody td:first-child{ position: relative; padding-left: 22px; }
table.lined tbody td:first-child::before{
  content:""; position:absolute; left:10px; top:12px; bottom:12px; width:4px;
border-radius:3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
opacity:.9;
}

/* ---------- Responsive (カード風) ---------- */
@media (max-width: 720px){
  .table-wrap{ overflow:visible; }
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  table.lined tbody tr{ margin:12px; background: var(--panel); border: 1px
solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
  table.lined tbody td{ border:0; border-bottom: 1px solid var(--grid); }
  table.lined tbody td:last-child{ border-bottom: 0; }
  table.lined tbody td[data-label]::before{ content: attr(data-label) "：";
display:block; font-weight:700; color: var(--muted); margin-bottom:4px; }
  /* アクセントバーの余白調整 */
  table.lined tbody td:first-child{ padding-left: 26px; }
  table.lined tbody td:first-child::before{ left:12px; top:12px; bottom:12px;
}
}

/* ---------- Medium width tuning ---------- */
@media (max-width: 1100px){ .col-division{ width: 170px; } .col-award{ width:
160px; } }
@media (max-width: 900px){  .col-division{ width: 150px; } .col-award{ width:
140px; } }

/* ---------- Footer under table (件数など) ---------- */
.foot{ display:flex; gap:10px; align-items:center; justify-content:
space-between; padding: 10px 14px; color: var(--muted); border-top:1px solid
var(--border); background: var(--panel); }
.count{ font-variant-numeric: tabular-nums; }

/* ---------- Print ---------- */
@media print{
  body{ background: #fff; color:#000; }
  .title, .controls{ display:none !important; }
  .acc, .acc > summary, .acc .acc-body{ background:#fff; box-shadow:none; }
  table.lined thead th{ position: static; background:#fff; color:#000;
border-bottom: 2px solid #000; }
  table.lined tbody td{ border-right: 1px solid #000; border-bottom: 1px
solid #000; }
  table.lined tbody td:last-child{ border-right: 0; }
  table.lined tbody td:first-child::before{ background:#000 !important; }
}
/* 1) 基本：中央寄せの強化（余白も確保） */
body .shell{
  max-width: 1200px;               /* 読みやすい幅に制限 */
  width: min(100%, 1200px);        /* 画面が狭ければ100% */
  margin-left: auto;
  margin-right: auto;              /* センター */
  padding-left: 20px;
  padding-right: 20px;
  float: none;                     /* 古いテーマのfloat解除 */
  display: block;
}

/* 2) 親が flex の場合の保険（ZOMEKIテーマでありがち） */
body .shell{
  flex: 0 1 auto;                  /* 伸び縮みを抑える */
  align-self: center;              /* 自分自身を中央に */
}

/* 3) さらに“必ず中央”にしたいとき（競合が強いテーマ用） */
body .shell{
  max-width: 1200px !important;
  margin-inline: auto !important;  /* LTR/RTL両対応 */
}

/* 4) 中身のカード群も“左寄りに見える”場合の視覚調整（任意） */
.page-head, .accordion, .card, .foot{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* 5) レイアウトが grid で左右に押される場合の保険（任意） */
@supports (place-self: center){
  body .shell{ place-self: center; }
}

/* =============================================
   SSH 大会実績（年度別アコーディオン + 表）
   - JS不要・ZOMEKI対応（外部参照なし）
   - 長文でも崩れにくい可読性重視
   - ライト基調 + ダーク環境での見栄えも配慮
   Author: ChatGPT
   ============================================= */

/* ---------- Theme variables (Light default) ---------- */
:root{
  --bg: #f7f9fc;             /* page background */
  --panel: #ffffff;           /* card background */
  --panel-2: #f9fafb;         /* alt bg */
  --text: #0f172a;            /* slate-900 */
  --muted: #475569;           /* slate-600 */
  --muted-2: #64748b;         /* slate-500 */
  --border: #e6e8ee;          /* subtle border */
  --grid: #e4e7ee;            /* table grid */
  --grid-strong: #cfd6e3;     /* header border */
  --accent: #2563eb;          /* blue-600 */
  --accent-2: #059669;        /* emerald-600 */
  --accent-3: #7c3aed;        /* violet-600 */
  --chip-bg: #eef2ff;         /* indigo-50 */
  --chip-text: #3730a3;       /* indigo-800 */
  --badge-bg: #e8efff;        /* blue-50 */
  --badge-text: #1e40af;      /* blue-800 */
  --badge-success-bg: #e9fdf4;/* emerald-50 */
  --badge-success-text: #065f46;/* emerald-900 */
  --row-alt: #fbfdff;         /* zebra alt */
  --shadow: 0 10px 24px rgba(15,23,42,.06), 0 1px 0 rgba(2,6,23,.04);
  --radius: 14px;
}

/* Auto dark-tint for users with dark preference */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f172a;
    --panel: #111827;
    --panel-2: #0b1220;
    --text: #e5e7eb;
    --muted: #a3aec2;
    --muted-2: #94a3b8;
    --border: #1f2937;
    --grid: #283244;
    --grid-strong: #36455f;
    --accent: #60a5fa;
    --accent-2: #34d399;
    --accent-3: #c4b5fd;
    --chip-bg: rgba(99,102,241,.18);
    --chip-text: #e0e7ff;
    --badge-bg: rgba(96,165,250,.18);
    --badge-text: #dbeafe;
    --badge-success-bg: rgba(52,211,153,.2);
    --badge-success-text: #bbf7d0;
    --row-alt: rgba(255,255,255,.02);
    --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,
.02);
  }
}

/* ---------- Base layout ---------- */
html, body { height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo,
sans-serif;
  background:
    radial-gradient(1000px 650px at 8% -10%, rgba(37,99,235,.08),
transparent 60%),
    radial-gradient(900px 600px at 92% 0%, rgba(5,150,105,.08), transparent
55%),
    var(--bg);
  color: var(--text);
}
.shell{ max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; }

/* Header */
.page-head{ display:flex; gap:18px; align-items:flex-end; justify-content:
space-between; flex-wrap:wrap; }
.title{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(5,150,105,
.08));
  border: 1px solid var(--border);
  padding: 12px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.title h1{ margin:0; font-weight:800; letter-spacing:.02em; font-size: clamp
(1.1rem, 1.1rem + 1vw, 1.9rem); }
.title small{ color: var(--muted); font-weight:500; }

/* 検索UIは今回非表示に（検索ベースから移行） */
.controls{ display:none !important; }

/* ---------- Accordion (details/summary) ---------- */
.accordion { display: grid; gap: 14px; margin-top: 14px; }
.acc {
  border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); box-shadow: var(--shadow);
  overflow: clip;
}
.acc > summary{
  list-style: none; cursor: pointer; user-select: none; outline: none;
  display: flex; align-items: center; justify-content: space-between; gap:
12px;
  padding: 14px 16px; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--border);
}
.acc > summary::-webkit-details-marker{ display:none; }

/* Chevron */
.acc > summary::before{
  content: ""; width: 10px; height: 10px; flex: 0 0 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted
);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.acc[open] > summary::before{ transform: rotate(45deg); }

/* 件数バッジ */
.sum-count{
  display:inline-flex; align-items:center; padding:.15rem .55rem;
  border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--badge-text); background: var
(--badge-bg);
}

.acc .acc-body{ animation: accFade .18s ease; background: var(--panel); }
@keyframes accFade { from{ opacity:.6; transform: translateY(-1px);} to{
opacity:1; transform:none;} }

/* ---------- Table (lined) ---------- */
.table-wrap{ overflow:auto; }

/* 列幅（HTMLの colgroup と連携） */
.col-year{ width: 120px; }
.col-division{ width: 200px; }
.col-award{ width: 180px; }

/* 基本表スタイル */
table{ width:100%; border-collapse: separate; border-spacing: 0; }
caption{ text-align:left; padding:14px 16px; color: var(--muted); font-size:
.95rem; }

table.lined thead th{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 2px solid var(--grid-strong);
  text-align: left; font-weight: 700; letter-spacing:.02em; font-size:.95rem
;
  padding: 14px 16px; color: var(--muted);
}

table.lined tbody td{
  padding: 14px 16px; vertical-align: top; color: var(--text);
  border-bottom: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
  line-height: 1.7; word-break: normal; overflow-wrap: anywhere; hyphens:
auto;
}

/* 最後の列の右線は消す */
table.lined thead th:last-child,
table.lined tbody td:last-child{ border-right: none; }

/* ゼブラ行（控えめ） */
table.lined tbody tr:nth-child(odd){ background: var(--row-alt); }

/* ホバー */
table.lined tbody tr{ transition: background-color .16s ease; }
table.lined tbody tr:hover{ background: color-mix(in srgb, var(--accent) 6%,
transparent); }

/* カード感を少し出す（最初／最後の角） */
table.lined tbody tr:first-child td:first-child{ border-top-left-radius:
12px; }
table.lined tbody tr:first-child td:last-child{  border-top-right-radius:
12px; }
table.lined tbody tr:last-child  td:first-child{ border-bottom-left-radius:
12px; }
table.lined tbody tr:last-child  td:last-child{  border-bottom-right-radius:
12px; }

/* 年度チップ・バッジ */
.year-chip{
  display:inline-block; padding:.25rem .55rem; border-radius:8px;
  background: var(--chip-bg); color: var(--chip-text);
  border: 1px solid var(--border); font-size:.85rem; font-weight:700;
}
.nowrap{ white-space: nowrap; }

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:.25rem .6rem;
  border-radius:999px; font-size:.85rem; font-weight:700; letter-spacing:
.01em;
  border: 1px solid var(--border); background: var(--badge-bg); color: var(
--badge-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.badge.success{ background: var(--badge-success-bg); color: var(
--badge-success-text); }

/* 行左のアクセントバー（視線誘導） */
table.lined tbody td:first-child{ position: relative; padding-left: 22px; }
table.lined tbody td:first-child::before{
  content:""; position:absolute; left:10px; top:12px; bottom:12px; width:4px;
border-radius:3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
opacity:.9;
}

/* ---------- Responsive (カード風) ---------- */
@media (max-width: 720px){
  .table-wrap{ overflow:visible; }
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  table.lined tbody tr{ margin:12px; background: var(--panel); border: 1px
solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
  table.lined tbody td{ border:0; border-bottom: 1px solid var(--grid); }
  table.lined tbody td:last-child{ border-bottom: 0; }
  table.lined tbody td[data-label]::before{ content: attr(data-label) "：";
display:block; font-weight:700; color: var(--muted); margin-bottom:4px; }
  /* アクセントバーの余白調整 */
  table.lined tbody td:first-child{ padding-left: 26px; }
  table.lined tbody td:first-child::before{ left:12px; top:12px; bottom:12px;
}
}

/* ---------- Medium width tuning ---------- */
@media (max-width: 1100px){ .col-division{ width: 170px; } .col-award{ width:
160px; } }
@media (max-width: 900px){  .col-division{ width: 150px; } .col-award{ width:
140px; } }

/* ---------- Footer under table (件数など) ---------- */
.foot{ display:flex; gap:10px; align-items:center; justify-content:
space-between; padding: 10px 14px; color: var(--muted); border-top:1px solid
var(--border); background: var(--panel); }
.count{ font-variant-numeric: tabular-nums; }

/* ---------- Print ---------- */
@media print{
  body{ background: #fff; color:#000; }
  .title, .controls{ display:none !important; }
  .acc, .acc > summary, .acc .acc-body{ background:#fff; box-shadow:none; }
  table.lined thead th{ position: static; background:#fff; color:#000;
border-bottom: 2px solid #000; }
  table.lined tbody td{ border-right: 1px solid #000; border-bottom: 1px
solid #000; }
  table.lined tbody td:last-child{ border-right: 0; }
  table.lined tbody td:first-child::before{ background:#000 !important; }
}
/* 1) 基本：中央寄せの強化（余白も確保） */
body .shell{
  max-width: 1200px;               /* 読みやすい幅に制限 */
  width: min(100%, 1200px);        /* 画面が狭ければ100% */
  margin-left: auto;
  margin-right: auto;              /* センター */
  padding-left: 20px;
  padding-right: 20px;
  float: none;                     /* 古いテーマのfloat解除 */
  display: block;
}

/* 2) 親が flex の場合の保険（ZOMEKIテーマでありがち） */
body .shell{
  flex: 0 1 auto;                  /* 伸び縮みを抑える */
  align-self: center;              /* 自分自身を中央に */
}

/* 3) さらに“必ず中央”にしたいとき（競合が強いテーマ用） */
body .shell{
  max-width: 1200px !important;
  margin-inline: auto !important;  /* LTR/RTL両対応 */
}

/* 4) 中身のカード群も“左寄りに見える”場合の視覚調整（任意） */
.page-head, .accordion, .card, .foot{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* 5) レイアウトが grid で左右に押される場合の保険（任意） */
@supports (place-self: center){
  body .shell{ place-self: center; }

/* ===== スコープ化パッチ（大会実績／評価ページ専用）===== */
/* 1) これ以降の装飾は .ssh-page 内だけで効くようにする ------------------ */
.ssh-page { /* ここは“記事ブロックの外枠”。サイト全体には影響しない */
  /* 背景の装飾をこの中に限定（必要なければ削除可） */
  background:
    radial-gradient(1000px 650px at 8% -10%, rgba(37,99,235,.08),
transparent 60%),
    radial-gradient(900px 600px at 92% 0%, rgba(5,150,105,.08), transparent
55%);
  padding: 1px 0; /* 背景のにじみ防止のうっすら余白 */
}

/* 2) 旧 .shell のレイアウトを“名前付き”で再定義 ------------------------ */
/* ※ これでサイト側の .shell とはバッティングしません */
.ssh-page .ssh-shell{
  max-width: 1200px;
  margin: 0 auto;          /* 中央寄せ */
  padding: 28px 20px 60px; /* 既存と同じ余白 */
  display: block;
  float: none;
}

/* 3) セクション類の横幅も、念のため中央に寄せる（視覚的なズレ対策） --- */
.ssh-page .page-head,
.ssh-page .accordion,
.ssh-page .card,
.ssh-page .foot{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* 4) ここから下は「スコープ化のための上書き」 -------------------------- */
/* 既存CSSの “body { … }” 指定の装飾が全体に及んでしまうのを中和し、
   記事ブロック内にだけ似たテイストを再現します。 */
body{
  /* サイト全体に影響するのを避けるため、ここでは何も変更しない */
}
.ssh-page{
  color: var(--text); /* 文字色は従来のトーンを維持 */
}
.ssh-page .title{
  background: linear-gradient(135deg, rgba(37,99,235,.08),
rgba(5,150,105,.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 5) テーブルやアコーディオン等も “.ssh-page 内” に限定 --------------- */
.ssh-page .acc{ border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow); background: var(--panel); overflow: clip; }
.ssh-page .acc > summary{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--border);
}
.ssh-page table.lined thead th{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

/* 6) ヒーロー（中央大タイトル）を使っている場合のスコープ ------------- */
.ssh-page .hero{
  text-align: center;
  background:
    radial-gradient(1200px 700px at 50% -20%, color-mix(in srgb,
var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb,
var(--accent-2) 10%, transparent), transparent 55%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ssh-page .hero-lead{ text-align: left; margin: 10px auto 14px; max-width:
70ch; }

/* === Mobile固定：PCと同じ表をそのまま表示（横スクロール対応） === */
.ssh-page .table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ssh-page table.lined{
  min-width: 980px;   /* 列数に応じて 900–1100px で調整 */
}

/* 既存の「カード風レイアウト」化を無効化（スマホ幅でも表のまま） */
@media (max-width: 720px){
  /* 表の構造を元に戻す */
  .ssh-page table{ display: table !important; width: 100% !important; }
  .ssh-page thead{ display: table-header-group !important; }
  .ssh-page tbody{ display: table-row-group !important; }
  .ssh-page tr{ display: table-row !important; }
  .ssh-page th, .ssh-page td{ display: table-cell !important; }

  /* ヘッダーを隠さない・ラベル擬似要素を消す */
  .ssh-page table thead{ visibility: visible !important; }
  .ssh-page table.lined tbody td[data-label]::before{ content: none
!important; }

  /* “カード風”で付いていた余計な装飾をリセット */
  .ssh-page table.lined tbody tr{
    margin: 0 !important;
    background: inherit !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 罫線をPC同様に戻す */
  .ssh-page table.lined tbody td{
    border-bottom: 1px solid var(--grid) !important;
    border-right: 1px solid var(--grid) !important;
    padding: 14px 16px !important;
  }
  .ssh-page table.lined tbody td:last-child{ border-right: none !important;
}
}

/* ====== 外枠（#wrapper=780px）に合わせて安全に収める ====== */

/* ページ内ラッパーは親の幅に合わせる（はみ出し禁止） */
.ssh-page .ssh-shell,
.ssh-page .page-head,
.ssh-page .accordion,
.ssh-page .hero,
.ssh-page .foot{
  max-width: 100% !important;   /* ← 1200pxなどの上限を解除 */
  margin-left: 0;
  margin-right: 0;
}

/* 表は親幅にフィット。PCでは min-width を付けない */
.ssh-page .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ssh-page table.lined{
  width: 100%;
  min-width: auto;              /* ← 以前の 980px を打ち消し */
  table-layout: auto;
}

/* “スマホでPC並びをそのまま”にしたい場合のみ：小画面だけ横スクロール */
@media (max-width: 720px){
  .ssh-page table{ display: table !important; width: 100% !important; }
  .ssh-page thead{ display: table-header-group !important; visibility:
visible !important; }
  .ssh-page tbody{ display: table-row-group !important; }
  .ssh-page tr{ display: table-row !important; }
  .ssh-page th, .ssh-page td{ display: table-cell !important; }

  /* ラベル化やカード風を無効化 */
  .ssh-page table.lined tbody td[data-label]::before{ content: none
!important; }
  .ssh-page table.lined tbody tr{
    margin: 0 !important; background: inherit !important;
    border: 0 !important; box-shadow: none !important;
  }
  .ssh-page table.lined tbody td{
    border-bottom: 1px solid var(--grid) !important;
    border-right: 1px solid var(--grid) !important;
    padding: 14px 16px !important;
  }
  .ssh-page table.lined tbody td:last-child{ border-right: none !important;
}

  /* ここでだけ横スクロールを許可（PCは100%フィットのまま） */
  .ssh-page table.lined{ min-width: 980px; }  /* 必要に応じて 900–1100px で調整 */
}

/* 画像やPDFカードも外枠に合わせてはみ出さない */
.ssh-page img, .ssh-page .doc-card, .ssh-page .thumb{
  max-width: 100%; box-sizing: border-box;
}
/* ===== スコープ化パッチ（大会実績／評価ページ専用）===== */
/* 1) これ以降の装飾は .ssh-page 内だけで効くようにする ------------------ */
.ssh-page { /* ここは“記事ブロックの外枠”。サイト全体には影響しない */
  /* 背景の装飾をこの中に限定（必要なければ削除可） */
  background:
    radial-gradient(1000px 650px at 8% -10%, rgba(37,99,235,.08),
transparent 60%),
    radial-gradient(900px 600px at 92% 0%, rgba(5,150,105,.08), transparent
55%);
  padding: 1px 0; /* 背景のにじみ防止のうっすら余白 */
}

/* 2) 旧 .shell のレイアウトを“名前付き”で再定義 ------------------------ */
/* ※ これでサイト側の .shell とはバッティングしません */
.ssh-page .ssh-shell{
  max-width: 1200px;
  margin: 0 auto;          /* 中央寄せ */
  padding: 28px 20px 60px; /* 既存と同じ余白 */
  display: block;
  float: none;
}

/* 3) セクション類の横幅も、念のため中央に寄せる（視覚的なズレ対策） --- */
.ssh-page .page-head,
.ssh-page .accordion,
.ssh-page .card,
.ssh-page .foot{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* 4) ここから下は「スコープ化のための上書き」 -------------------------- */
/* 既存CSSの “body { … }” 指定の装飾が全体に及んでしまうのを中和し、
   記事ブロック内にだけ似たテイストを再現します。 */
body{
  /* サイト全体に影響するのを避けるため、ここでは何も変更しない */
}
.ssh-page{
  color: var(--text); /* 文字色は従来のトーンを維持 */
}
.ssh-page .title{
  background: linear-gradient(135deg, rgba(37,99,235,.08),
rgba(5,150,105,.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 5) テーブルやアコーディオン等も “.ssh-page 内” に限定 --------------- */
.ssh-page .acc{ border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow); background: var(--panel); overflow: clip; }
.ssh-page .acc > summary{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--border);
}
.ssh-page table.lined thead th{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

/* 6) ヒーロー（中央大タイトル）を使っている場合のスコープ ------------- */
.ssh-page .hero{
  text-align: center;
  background:
    radial-gradient(1200px 700px at 50% -20%, color-mix(in srgb,
var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb,
var(--accent-2) 10%, transparent), transparent 55%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ssh-page .hero-lead{ text-align: left; margin: 10px auto 14px; max-width:
70ch; }

/* === Mobile固定：PCと同じ表をそのまま表示（横スクロール対応） === */
.ssh-page .table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ssh-page table.lined{
  min-width: 980px;   /* 列数に応じて 900–1100px で調整 */
}

/* 既存の「カード風レイアウト」化を無効化（スマホ幅でも表のまま） */
@media (max-width: 720px){
  /* 表の構造を元に戻す */
  .ssh-page table{ display: table !important; width: 100% !important; }
  .ssh-page thead{ display: table-header-group !important; }
  .ssh-page tbody{ display: table-row-group !important; }
  .ssh-page tr{ display: table-row !important; }
  .ssh-page th, .ssh-page td{ display: table-cell !important; }

  /* ヘッダーを隠さない・ラベル擬似要素を消す */
  .ssh-page table thead{ visibility: visible !important; }
  .ssh-page table.lined tbody td[data-label]::before{ content: none
!important; }

  /* “カード風”で付いていた余計な装飾をリセット */
  .ssh-page table.lined tbody tr{
    margin: 0 !important;
    background: inherit !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 罫線をPC同様に戻す */
  .ssh-page table.lined tbody td{
    border-bottom: 1px solid var(--grid) !important;
    border-right: 1px solid var(--grid) !important;
    padding: 14px 16px !important;
  }
  .ssh-page table.lined tbody td:last-child{ border-right: none !important;
}
}

/* ====== 外枠（#wrapper=780px）に合わせて安全に収める ====== */

/* ページ内ラッパーは親の幅に合わせる（はみ出し禁止） */
.ssh-page .ssh-shell,
.ssh-page .page-head,
.ssh-page .accordion,
.ssh-page .hero,
.ssh-page .foot{
  max-width: 100% !important;   /* ← 1200pxなどの上限を解除 */
  margin-left: 0;
  margin-right: 0;
}

/* 表は親幅にフィット。PCでは min-width を付けない */
.ssh-page .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ssh-page table.lined{
  width: 100%;
  min-width: auto;              /* ← 以前の 980px を打ち消し */
  table-layout: auto;
}

/* “スマホでPC並びをそのまま”にしたい場合のみ：小画面だけ横スクロール */
@media (max-width: 720px){
  .ssh-page table{ display: table !important; width: 100% !important; }
  .ssh-page thead{ display: table-header-group !important; visibility:
visible !important; }
  .ssh-page tbody{ display: table-row-group !important; }
  .ssh-page tr{ display: table-row !important; }
  .ssh-page th, .ssh-page td{ display: table-cell !important; }

  /* ラベル化やカード風を無効化 */
  .ssh-page table.lined tbody td[data-label]::before{ content: none
!important; }
  .ssh-page table.lined tbody tr{
    margin: 0 !important; background: inherit !important;
    border: 0 !important; box-shadow: none !important;
  }
  .ssh-page table.lined tbody td{
    border-bottom: 1px solid var(--grid) !important;
    border-right: 1px solid var(--grid) !important;
    padding: 14px 16px !important;
  }
  .ssh-page table.lined tbody td:last-child{ border-right: none !important;
}

  /* ここでだけ横スクロールを許可（PCは100%フィットのまま） */
  .ssh-page table.lined{ min-width: 980px; }  /* 必要に応じて 900–1100px で調整 */
}

/* 画像やPDFカードも外枠に合わせてはみ出さない */
.ssh-page img, .ssh-page .doc-card, .ssh-page .thumb{
  max-width: 100%; box-sizing: border-box;
}
/* === Fix: スマホでもPCと同じ表を維持し、横スクロールで対応 === */

/* 既存のカード化を打ち消し */
@media (max-width: 1200px){
  .ssh-page table{ display: table !important; width: 100% !important; }
  .ssh-page thead{ display: table-header-group !important; visibility:
visible !important; }
  .ssh-page tbody{ display: table-row-group !important; }
  .ssh-page tr{ display: table-row !important; }
  .ssh-page th, .ssh-page td{ display: table-cell !important; }
  .ssh-page table.lined tbody td[data-label]::before{ content: none
!important; }
  .ssh-page table.lined tbody tr{
    margin: 0 !important; background: inherit !important; border: 0
!important; box-shadow: none !important;
  }
  .ssh-page table.lined tbody td{
    border-bottom: 1px solid var(--grid) !important;
    border-right: 1px solid var(--grid) !important;
    padding: 14px 16px !important;
  }
  .ssh-page table.lined tbody td:last-child{ border-right: none !important;
}
}

/* 表はラッパー内で横スクロール（ページ全体は縮む） */
.ssh-page .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ssh-page table.lined{ width: 100%; min-width: 900px; } /* 列数に合わせて
900–1100px で調整 */
/* === Fix: このページに限って、スマホ時の固定幅を解除 === */
@media (max-width: 900px){
  html, body, #container{ min-width: 0 !important; width: 100% !important; }
  #main, #pageHeaderBody,
  #globalNavi .pieceBody, #breadCrumbs .pieceBody,
  #commonFooter .pieceBody, #copyright .pieceBody{
    width: auto !important;
  }
  /* 2カラムを単一カラム化（左メニューが空でも余白が残らない） */
  #wrapper, #links{ float: none !important; width: auto !important; }
  #links{ display: none !important; } /* 左カラム非表示（必要なら外してください） */
}
/* =========================================================
   ■(A) ヘッダーの重なり解消（文字サイズ変更／背景色変更ツール）
   ※ このページだけで効く読み順になっている想定
========================================================= */
/* ツールを絶対配置から通常フローに戻し、折返し可能に */
#accessibilityTool{
  position: static !important;
  float: none !important;
  margin: 6px 0 0 !important;
  padding: 6px 0 0 !important;
  z-index: 1; /* 念のため */
}
#accessibilityTool .pieceBody ul{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  float: none !important;
  justify-content: flex-end !important;
}
#accessibilityTool .pieceBody li{
  display: inline-flex !important;
  align-items: center;
}

/* 学校名とメニューは回り込み解除して縦積み可能に（狭幅時） */
@media (max-width: 1100px){
  #commonHeader h1,
  #commonHeader .menu{
    float: none !important;
    text-align: center !important;
    padding-top: 6px !important;
  }
  #accessibilityTool{ text-align: center !important; }
}
/* 旧floatのclearfix保険 */
#commonHeader::after{ content:""; display:block; clear:both; }

/* =========================================================
   ■(B) スマホで“横スライド不要”に（PCと同じ表のまま、1画面で見やすく）
   ポイント：
   - 表はtableのまま（display:block化はしない）
   - 1列目の「年度」はアコーディオン見出しにあるのでスマホでは非表示
   - 余白と字間を圧縮、テキストは自動改行
========================================================= */
@media (max-width: 720px){
  /* 既存の「カード風」への組み替えを全面的にOFF */
  .ssh-page table{ display: table !important; width: 100% !important;
table-layout: fixed !important; }
  .ssh-page thead{ display: table-header-group !important; visibility:
visible !important; }
  .ssh-page tbody{ display: table-row-group !important; }
  .ssh-page tr{ display: table-row !important; }
  .ssh-page th, .ssh-page td{ display: table-cell !important; }

  /* 1列目（年度）を隠す：アコーディオン見出しに年度があるため */
  .ssh-page table.lined th:nth-child(1),
  .ssh-page table.lined td:nth-child(1){ display: none !important; }

  /* 余白とフォント微調整（可読性を保ちつつ行数を抑える） */
  .ssh-page table.lined th,
  .ssh-page table.lined td{
    padding: 10px 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }

  /* 列の比率（端末幅内で収まるよう最適化） */
  .ssh-page table.lined th:nth-child(2), /* 大会名 */
  .ssh-page table.lined td:nth-child(2){ width: 34% !important; }
  .ssh-page table.lined th:nth-child(3), /* 部門 */
  .ssh-page table.lined td:nth-child(3){ width: 16% !important; }
  .ssh-page table.lined th:nth-child(4), /* 受賞名 */
  .ssh-page table.lined td:nth-child(4){ width: 20% !important; }
  .ssh-page table.lined th:nth-child(5), /* 課題研究名（長文） */
  .ssh-page table.lined td:nth-child(5){ width: 30% !important; }

  /* 以前の“カード風”で付いたラベル・影などを念のため無効化 */
  .ssh-page table.lined tbody td[data-label]::before{ content: none
!important; }
  .ssh-page table.lined tbody tr{
    margin: 0 !important;
    background: inherit !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* =========================================================
   ■(C) PCで左にずれる問題の解消
   このページだけ左カラム(#links)を隠し、本文(#wrapper)を中央に
   ※ 左カラムを残したい場合は、#links の1行をコメントアウトしてください
========================================================= */
#links{ display: none !important; }  /* ←左カラム非表示（このページだけ） */
#wrapper{
  float: none !important;
  width: auto !important;
  max-width: 1000px !important;  /* サイト基準幅に揃える */
  margin: 0 auto !important;     /* 中央寄せ */
}
#main{
  width: auto !important;
  max-width: 1000px !important;
  margin: 0 auto 45px !important;
}
/* 共通パーツの1000px固定も、このページ内では“自動”に */
#globalNavi .pieceBody,
#breadCrumbs .pieceBody,
#commonFooter .pieceBody,
#copyright .pieceBody{
  width: auto !important;
}

/* =========================================================
   ■(D) 表と見出しの最終調整（PC/スマホ共通の見やすさ）
========================================================= */
.ssh-page .ssh-shell{ max-width: 1000px; margin: 0 auto; }
.ssh-page .page-head,
.ssh-page .accordion{ margin-left: auto; margin-right: auto; }

/* バッジが折返す時の詰まり解消 */
.badge{ white-space: normal !important; }