/* =============================================
   SSH 評価ページ（.ssh-page スコープ版）
   - 外枠(#wrapper 等)に干渉しない
   - レイアウト崩れの主因だった .shell/body 直指定を撤去
   - 長文・画像・PDFカードに強い
   ============================================= */

/* ---------- Theme variables ---------- */
:root{
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-2: #f9fafb;
  --text: #0f172a;
  --muted: #475569;
  --muted-2: #64748b;
  --border: #e6e8ee;
  --grid: #e4e7ee;
  --grid-strong: #cfd6e3;
  --accent: #2563eb;
  --accent-2: #059669;
  --accent-3: #7c3aed;
  --badge-bg: #e8efff;
  --badge-text: #1e40af;
  --badge-success-bg: #e9fdf4;
  --badge-success-text: #065f46;
  --row-alt: #fbfdff;
  --shadow: 0 10px 24px rgba(15,23,42,.06), 0 1px 0 rgba(2,6,23,.04);
  --radius: 14px;
}
@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;
    --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);
  }
}

/* ---------- Scope base ---------- */
.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%),
    var(--bg);
  color: var(--text);
}
.ssh-page .ssh-shell{
  max-width: 1000px;        /* サイト外枠に合わせた安全幅 */
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ---------- Hero（タイトル＋概要＋図） ---------- */
.ssh-page .hero{
  margin: 8px 0 18px;
  padding: 28px 20px 26px;
  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-wrap{ max-width: 960px; margin: 0 auto 10px; }
.ssh-page .hero-kicker{
  display:inline-block; margin: 0 0 6px; padding: .2rem .6rem;
  font-weight: 800; letter-spacing: .08em; font-size: .85rem;
  color: var(--badge-text); background: var(--badge-bg);
  border: 1px solid var(--border); border-radius: 999px;
}
.ssh-page .hero-title{
  margin: 0; font-weight: 900; letter-spacing: .02em; line-height: 1.2;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); color: var(--text);
  position: relative; display: inline-block;
}
.ssh-page .hero-title::after{
  content: ""; display: block; height: 6px; width: 56%; min-width: 180px;
  margin: 10px auto 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
opacity:.85;
}
.ssh-page .hero-sub{ margin: 10px 0 4px; color: var(--muted); font-weight:
700; letter-spacing: .03em; }

.ssh-page .hero-body{ max-width: 980px; margin: 10px auto 0; }

/* 概要文（段落は左揃え、ブロックは中央） */
.ssh-page .hero-lead{
  margin: 10px auto 8px;     /* ← 図との間を詰める（14px→8px） */
  max-width: 70ch;
  line-height: 1.9;
  color: var(--muted-2);
  font-size: clamp(1rem, .95rem + .3vw, 1.05rem);
  text-align: left;
}

/* 全体図（中央寄せ） */
.ssh-page .hero-figure{
  margin: 6px auto 0;        /* ← さらに詰める（12px→6px） */
  max-width: 560px;
}

.ssh-page .hero-figure img{
  width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: var(--shadow);
}
.ssh-page .hero-figure figcaption{
  margin-top: 2px;           /* ← キャプションも少し詰める */
  font-size: 1.2rem; color: var(--muted);
}
@media (max-width: 900px){
  .ssh-page .hero{ padding: 22px 16px; }
  .ssh-page .hero-title::after{ height: 5px; }
}
@media (max-width: 600px){
  .ssh-page .hero{ padding: 20px 14px; }
  .ssh-page .hero-lead{ max-width: 100%; }
}

/* ---------- Accordion ---------- */
.ssh-page .accordion{ display:grid; gap:14px; margin-top:14px; }
.ssh-page .acc{
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel); box-shadow:var(--shadow); overflow:clip;
}
.ssh-page .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);
}
.ssh-page .acc>summary::-webkit-details-marker{ display:none; }
.ssh-page .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;
}
.ssh-page .acc[open]>summary::before{ transform:rotate(45deg); }
.ssh-page .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);
}
.ssh-page .lead{ margin:12px 4px 10px; line-height:1.8; color:var(--muted-2);
}
.ssh-page .acc .acc-body{ animation: accFade .18s ease; background: var(
--panel); }
@keyframes accFade { from{opacity:.6; transform: translateY(-1px);} to{
opacity:1; transform:none;} }

/* ---------- 画像＋PDFカード ---------- */
.ssh-page .evidence-grid{
  display:grid; grid-template-columns:minmax(260px,380px) 1fr;
  gap:16px; align-items:start; margin:8px 2px 0;
}
.ssh-page .thumb{ margin:0; }
.ssh-page .thumb img{
  width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid var(--border);
  box-shadow:var(--shadow); background:var(--panel-2);
}
.ssh-page .thumb figcaption{ margin-top:8px; color:var(--muted); font-size:
.9rem; }

.ssh-page .doc-card{
  display:flex; gap:12px; align-items:center; text-decoration:none;
  border:1px solid var(--border); borde
}
/* === 図（全体図）の位置と見た目を安定化 === */
.ssh-page .hero-lead{
  margin-bottom: 8px; /* 概要文の下の余白（図との距離） */
}

.ssh-page .hero-figure{
  display: block;                 /* ブロック化して幅と中央寄せを効かせる */
  width: min(100%, 560px);        /* 最大560px（端末が狭ければ100%） */
  margin-left: auto;              /* 中央寄せ */
  margin-right: auto;
  margin-top: 6px;                /* 上の余白 */
  float: none !important;         /* どこかのfloat指定を打ち消す */
}

.ssh-page .hero-figure img{
  display: block;                 /* インライン画像のクセを消す */
  width: 100%;                    /* 器にフィット */
  height: auto;
  float: none !important;         /* 右寄りの主犯になりがちなfloatを無効化 */

  /* Aプラン：枠/影/角丸/背景を無効化（“箱感”を消す） */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* （任意）寄せ方向を切替したい場合の補助クラス */
.ssh-page .hero-figure.align-left { margin-left: 0; margin-right: auto; }
.ssh-page .hero-figure.align-right{ margin-left: auto; margin-right: 0; }
/* ==== 1) 説明文とインライン図（flow-figure） ========================= */
.ssh-page .rich p{
  margin: 0 0 .9em;               /* 段落の下だけ余白 */
  line-height: 1.9;
  color: var(--muted-2);
}
.ssh-page .flow-figure{
  /* 図の“器”：中央寄せ＋最大幅 */
  display: block;
  width: min(100%, 720px);        /* 画面が広くても720pxまで */
  margin: 8px auto 10px;          /* 上8px・下10px、左右は自動で中央 */
  text-align: center;
  float: none !important;         /* どこかのfloatを無効化（右寄り対策） */
}
.ssh-page .flow-figure img{
  /* 画像は器にフィットさせる */
  display: block;
  width: 100%;
  height: auto;
}
.ssh-page .flow-figure figcaption{
  margin-top: 6px;
  font-size: .9rem;
  color: var(--muted);
}

/* 図の見た目：薄い枠＋柔らかい背景（=thin-frame）
   → 枠/影を無くしたい時は HTML側で class="flow-figure center no-frame" にし、
      下の no-frame を使ってください。 */
.ssh-page .flow-figure.thin-frame img{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: var(--shadow);
}
/* Aプラン（完全に枠なし）にしたい場合の切替クラス */
.ssh-page .flow-figure.no-frame img{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* 左右の寄せをクラスで切替できるように */
.ssh-page .flow-figure.center{ margin-left:auto; margin-right:auto; }
.ssh-page .flow-figure.left{   margin-left:0;    margin-right:auto; }
.ssh-page .flow-figure.right{  margin-left:auto; margin-right:0; }

/* ==== 2) PDF用タブ（JS不要：radio + label） ========================= */
/* 入力（ラジオ）は見せない */
.ssh-page .tabs input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* タブ見出し（label） */
.ssh-page .tabs .tab{
  display: inline-block;
  margin: 0 6px -1px 0;                 /* パネル上辺と繋げるため下だけ -1px */
  padding: 10px 14px;
  font-weight: 800;
  font-size: .95rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  user-select: none;
}

/* 選択中タブ（input + label の“+”で隣接選択） */
#tab-r1:checked + label,
#tab-r2:checked + label,
#tab-r3:checked + label{
  color: var(--text);
  background: var(--panel);
  border-color: var(--grid-strong);
}

/* タブ本体の箱 */
.ssh-page .tabs .tab-panels{
  border: 1px solid var(--grid-strong);
  background: var(--panel);
  border-radius: 0 12px 12px 12px;
  padding: 14px 16px;
}

/* すべてのパネルは非表示 → 選択中だけ表示 */
.ssh-page .tabs .tab-panel{ display: none; }
#tab-r1:checked ~ .tab-panels #panel-r1{ display: block; }
#tab-r2:checked ~ .tab-panels #panel-r2{ display: block; }
#tab-r3:checked ~ .tab-panels #panel-r3{ display: block; }

/* アクセシビリティの補助：hiddenを更新できないため見た目だけ制御 */
#tab-r1:checked ~ .tab-panels #panel-r1[hidden],
#tab-r2:checked ~ .tab-panels #panel-r2[hidden],
#tab-r3:checked ~ .tab-panels #panel-r3[hidden]{ display:block; }

/* スマホでタブ見出しがはみ出す場合の横スクロール */
@media (max-width: 600px){
  .ssh-page .tabs{ overflow-x: auto; white-space: nowrap; }
  .ssh-page .tabs .tab{ font-size: .92rem; padding: 9px 12px; }
}
/* ===== 図（全体図/関係図）のデフォルト：枠なし・影なし・中央寄せ ===== */
/* 図の“器”（figure）：幅と位置を管理 */
.ssh-page .hero-figure,
.ssh-page .flow-figure{
  display: block;
  width: min(100%, 720px);      /* 画面が広くても最大720px。必要なら値を変えてOK */
  margin: 8px auto 10px;        /* 左右autoで中央寄せ */
  float: none !important;       /* テーマ側のfloatを打ち消す（右寄り対策） */
  text-align: center;           /* 画像以外の中身があれば中央に */
}

/* 画像そのもの：器にフィット＆“箱っぽさ”を完全に消す */
.ssh-page .hero-figure img,
.ssh-page .flow-figure img{
  display: block;
  width: 100%;
  height: auto;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  float: none !important;
}

/* 図の説明は今後使わない */
.ssh-page .hero-figure figcaption,
.ssh-page .flow-figure figcaption{
  display: none !important;
}

/* ===== 折りたたみ本文の左右に余白（評価ページ #eval のみ） ===== */
.ssh-page #eval .acc .acc-body{
  padding: 2px 100px 2px;  /* 上右下左（左右18pxで“詰まり感”を解消） */
}

/* ===== 本文の強調（太字） ===== */
.ssh-page .rich strong{
  font-weight: 800;        /* 太めにする */
  /* 必要なら色も少し濃く： color: var(--text); */
}
/* 縦並びのPDFリスト（間隔だけ定義） */
.ssh-page .doc-list{
  display: grid;
  gap: 12px;            /* カード同士の縦の余白 */
  margin-top: 8px;
}

/* 長いタイトルでもきれいに折り返す */
.ssh-page .doc-card .doc-title{
  line-height: 1.5;
  word-break: break-word;    /* 日本語の長い語でも適切に折返し */
  overflow-wrap: anywhere;   /* 英数字が続く場合の保険 */
}

/* スマホでカード内の情報量が多い時、やや詰める（任意） */
@media (max-width: 480px){
  .ssh-page .doc-card{ padding: 12px 14px; }
  .ssh-page .doc-card .doc-meta{ font-size: .85rem; }
}
/* ===== PDFカード：完全版（壊れた定義を上書き） ===== */
.ssh-page .doc-card{
  display:flex; gap:12px; align-items:center; text-decoration:none;
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s
ease;
}
.ssh-page .doc-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(15,23,42,.12);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.ssh-page .doc-ico{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius: 10px; border:1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  color: var(--accent);
}
.ssh-page .doc-body{ display:flex; flex-direction:column; gap:2px; }
.ssh-page .doc-title{ font-weight:800; letter-spacing:.01em; }
.ssh-page .doc-meta{ color: var(--muted); font-size:.9rem; }

/* 縦リストの余白と折返し（既出ですが念のため） */
.ssh-page .doc-list{ display:grid; gap:12px; margin-top:8px; }
.ssh-page .doc-card .doc-title{
  line-height:1.5; word-break:break-word; overflow-wrap:anywhere;
}
@media (max-width:480px){
  .ssh-page .doc-card{ padding:12px 14px; }
  .ssh-page .doc-card .doc-meta{ font-size:.85rem; }
}
/* ===== 小題目（自動番号つき・各項目の本文ごとにリセット） ===== */


.ssh-page .subhead{
  position: relative;
  margin: 16px 0 8px;                  /* 小題目前後の余白 */
  padding-left: 2.25em;                /* ナンバー分の左インデント */
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
}



/* 小題目直後の段落は少し詰める */
.ssh-page .subhead + p{ margin-top: .4em; }

/* モバイルでややコンパクトに */
@media (max-width: 480px){
  .ssh-page .subhead{
    padding-left: 2.1em;
    font-size: 1rem;
  }
  .ssh-page .subhead::before{
    width: 1.5em; height: 1.5em; font-size: .9rem;
  }
}
/* ====== 小題目（.ssh-page スコープ）================================== */
.ssh-page .subhead{
  /* ベース（フォント・余白・折返し） */
  margin: 18px 0 10px;
  font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  line-height: 1.5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;     /* 複数行でも番号と本文の高さがきれいに揃う */
  word-break: normal;
  overflow-wrap: anywhere;   /* 長い語でも崩れにくく */
}

/* 共通：番号の見た目（必要に応じて各スタイルで上書き） */
.ssh-page .subhead .num{
  display:inline-grid; place-items:center;
  min-width: 28px; height: 28px;
  padding: 0 8px;            /* 2桁以上でも幅が伸びる */
  font-size: .95em; font-weight: 900;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}


/* --- A) s-label：ラベル＋細い左線 ----------------------------------- */
/* 小さめ番号のラベル＋見出し左にアクセントライン */
/* --- s-label：左バーを変数でカスタムできるように --- */
.ssh-page .s-label{
  /* デフォルト値（ページ全体の初期色・太さ） */
  --bar-start: var(--accent);     /* グラデ上側の色 */
  --bar-end:   var(--accent-2);   /* グラデ下側の色 */
  --bar-width: 4px;               /* バーの太さ */
  --bar-radius: 3px;              /* バー角の丸み */
  --bar-opacity: .9;              /* 透明度 */

  position: relative;
  padding-left: 10px;             /* バーぶんの余白 */
  color: #2b2b2b;                 /* 見出しテキスト色（お好みで） */
}

.ssh-page .s-label::before{
  content:"";
  position:absolute; left:0; top:.2em; bottom:.2em;
  width: var(--bar-width);
  border-radius: var(--bar-radius);
  background: linear-gradient(180deg, var(--bar-start), var(--bar-end));
  opacity: var(--bar-opacity);
}
/* ルーブリック = 青→緑 */
#rubric   .s-label{ --bar-start:#2563eb; --bar-end:#059669; }

/* アンケート = シアン系 */
#survey   .s-label{ --bar-start:#06b6d4; --bar-end:#22d3ee; }

/* 探究テスト = 橙→赤 */
#test     .s-label{ --bar-start:#f59e0b; --bar-end:#ef4444; }

/* ポートフォリオ = エメラルド系 */
#feedback .s-label{ --bar-start:#10b981; --bar-end:#22c55e; }

/* ラベル風に角丸を少し弱く */
.ssh-page .s-label .num{ border-radius: 6px; }

/* --- B) s-underline：下線グラデ＋丸みのある番号 -------------------- */
/* 見出し全体にやさしい下線（グラデーション） */
.ssh-page .s-underline{
  padding-bottom: 6px;
  border-bottom: 4px solid transparent;
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) bottom left /
140px 4px no-repeat;
}
/* 番号はピル形（丸め）に */
.ssh-page .s-underline .num{
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
}

/* --- C) s-timeline：タイムライン風（ドット＋細線） ------------------ */
.ssh-page .s-timeline{
  position: relative;
  padding-left: 14px;
}
.ssh-page .s-timeline::before{
  /* 左にタイムライン */
  content:"";
  position:absolute; left: 5px; top: 0.2em; bottom: 0.2em;
  width: 2px; background: var(--grid-strong);
}
/* ===== 小題目（ベース：既存 .subhead の上にデザイン差分） ============ */
.ssh-page .subhead{
  margin: 20px 0 12px;
  font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
  line-height: 1.5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.ssh-page .subhead .num{
  display:inline-grid; place-items:center;
  min-width: 30px; height: 30px; padding: 0 10px; /* 2桁でも余裕 */
  font-weight: 900;
  color: #fff;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* --- A) リボン（s-ribbon）：左に折り返しを作る ---------------------- */
.ssh-page .subhead.s-ribbon { position: relative; }
.ssh-page .subhead.s-ribbon .num{
  border-radius: 8px 8px 8px 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35
);
  position: relative;
}
.ssh-page .subhead.s-ribbon .num::after{
  /* 右下に“折り返し”の三角 */
  content:""; position:absolute; right:-6px; bottom:0;
  border-left: 6px solid color-mix(in srgb, var(--accent-2) 80%, #0000);
  border-top: 6px solid transparent;
}
.ssh-page .subhead.s-ribbon::after{
  /* タイトル下に細いグラデライン（長すぎず上品に） */
  content:""; display:block; grid-column: 1 / -1; height: 3px; margin-top:
8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  opacity: .8;
}

/* --- B) インク下線（s-ink）：手描き風ハイライト ---------------------- */
.ssh-page .subhead.s-ink{
  position: relative;
  padding-bottom: 6px;
}
.ssh-page .subhead.s-ink::after{
  content:""; position:absolute; left: 38px; right: 0; bottom: 0;
  height: 8px;
  background:
    radial-gradient(12px 6px at left 50%, color-mix(in srgb, var(--accent)
22%, #0000), #0000) left center / 16px 100% repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, #0000),
color-mix(in srgb, var(--accent-2) 22%, #0000));
  opacity: .9;
  border-radius: 6px;
}
.ssh-page .subhead.s-ink .num{
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* --- C) タブ（s-tab）：カード見出しのように浮かせる ------------------- */
.ssh-page .subhead.s-tab{
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-bottom: 3px solid color-mix(in srgb, var(--accent) 40%, var(
--border));
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.ssh-page .subhead.s-tab .num{
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

/* --- D) レール（s-rail）：細いレールとノードでタイムライン風 ---------- */
.ssh-page .subhead.s-rail{
  position: relative; padding-left: 8px;
}
.ssh-page .subhead.s-rail::before{
  content:""; position:absolute; left: 4px; top: 4px; bottom: 4px; width:
2px;
  background: linear-gradient(var(--grid-strong), var(--grid-strong));
  border-radius: 2px;
}
.ssh-page .subhead.s-rail .num{
  min-width: 26px; height: 26px; font-size: .95em;
  border-radius: 999px;
  background: radial-gradient(12px 12px at 30% 30%, #fff6, #0000),
              linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* --- セクション別カラー（任意：色を分けたいとき） --------------------- */
/* 例：ルーブリック=青×緑、アンケート=シアン、テスト=橙、PF=エメラルド */
#rubric   .subhead .num{ background: linear-gradient(135deg, #2563eb,
#059669); }
#survey   .subhead .num{ background: linear-gradient(135deg, #0ea5e9,
#22d3ee); }
#test     .subhead .num{ background: linear-gradient(135deg, #f59e0b,
#f43f5e); }
#feedback .subhead .num{ background: linear-gradient(135deg, #10b981,
#22c55e); }

/* モバイル微調整 */
@media (max-width: 520px){
  .ssh-page .subhead{ gap: 10px; }
  .ssh-page .subhead .num{ min-width: 26px; height: 26px; padding: 0 8px; }
  .ssh-page .subhead.s-ink::after{ left: 34px; height: 7px; }
}
/* 本文（.rich）の strong だけ色変更。doc-card等には影響させない */
.ssh-page #eval .acc .acc-body .rich strong{
  color:#f84141; /* 好きな色に変えてOK */
  font-weight: 800;
}
/* 図はすべて枠・影なし（.ssh-page 内だけ） */
.ssh-page .hero-figure img,
.ssh-page .flow-figure img,
.ssh-page .rich img{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 0 !important; /* テーマがimgに余白を付けている対策 */
}
/* 既存HTMLが class="thin-frame" のままでも枠を出さない */
.ssh-page .flow-figure.thin-frame img{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* 1) 見出しに付くテーマ側のマーカーを全消し（.ssh-page 内だけ） */
.ssh-page h2::before, .ssh-page h2::after,
.ssh-page h3::before, .ssh-page h3::after,
.ssh-page h4::before, .ssh-page h4::after{
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) 既存の s-label の ::before を使っていた場合は無効化 */
.ssh-page .s-label::before{ content:none !important; background:none
!important; }

/* 3) s-label 左バーを「背景グラデーション」で再実装（疑似要素不使用） */
.ssh-page .s-label{
  /* 既存のカスタム変数はそのまま使えます（セクション別色もOK） */
  --bar-start: var(--accent);
  --bar-end:   var(--accent-2);
  --bar-width: 4px;
  --bar-offset: .2em;    /* 上下の余白分 */

  padding-left: calc(var(--bar-width) + 10px);
  background:
    linear-gradient(180deg, var(--bar-start), var(--bar-end))
    left calc(var(--bar-offset)) / var(--bar-width) calc(100% -
(var(--bar-offset) * 2))
    no-repeat;
}

/* セクション別カラー（既にお使いの指定はそのまま有効です） */
#rubric   .s-label{ --bar-start:#2563eb; --bar-end:#059669; }
#survey   .s-label{ --bar-start:#06b6d4; --bar-end:#22d3ee; }
#test     .s-label{ --bar-start:#f59e0b; --bar-end:#ef4444; }
#feedback .s-label{ --bar-start:#10b981; --bar-end:#22c55e; }
/* 見出しに付くテーマ側の左バー装飾を .ssh-page 内だけで全無効化
   ─ s-label には当てない（自前のバーは残す） */
.ssh-page h2:not(.s-label),
.ssh-page h3:not(.s-label),
.ssh-page h4:not(.s-label),
.ssh-page .subhead:not(.s-label){
  border-left: 0 !important;          /* よくある左線 */
  box-shadow: none !important;         /* 影で線を作る系 */
  background: none !important;         /* 背景画像/グラデで線を作る系 */
  padding-left: 0 !important;          /* 左線用の余白も打ち消す */
}

/* 見出しテキストが <span> で包まれていて、そこに装飾されるケースも潰す */
.ssh-page h2:not(.s-label) > span,
.ssh-page h3:not(.s-label) > span,
.ssh-page h4:not(.s-label) > span{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 念のため：当面 s-label は擬似要素で描画しているのでこちらは維持 */
.ssh-page .s-label{
  position: relative;
  padding-left: 10px; /* バー幅ぶんの余白（調整可） */
}
/* s-label の左バー本体（色はセクション別の変数で既に上書き済み） */
.ssh-page .s-label::before{
  content:"";
  position:absolute; left:0; top:.2em; bottom:.2em;
  width: var(--bar-width, 4px);
  border-radius: var(--bar-radius, 3px);
  background: linear-gradient(180deg, var(--bar-start, var(--accent)),
                                   var(--bar-end,   var(--accent-2)));
  opacity: var(--bar-opacity, .9);
}
/* 見出しに付くテーマ側の左バー装飾を .ssh-page 内だけで除去  */
/* 1) 要素そのものに付けられた border/background/余白を潰す */
.ssh-page h1:not(.s-label),
.ssh-page h2:not(.s-label),
.ssh-page h3:not(.s-label),
.ssh-page h4:not(.s-label),
.ssh-page h5:not(.s-label),
.ssh-page h6:not(.s-label),
.ssh-page .subhead:not(.s-label){
  border-left: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
}

/* 2) 擬似要素で引いている線（::before/::after）を無効化  */
/*    → s-label の ::before は自前のバーなので“除外”する */
.ssh-page h1:not(.s-label)::before,
.ssh-page h2:not(.s-label)::before,
.ssh-page h3:not(.s-label)::before,
.ssh-page h4:not(.s-label)::before,
.ssh-page h5:not(.s-label)::before,
.ssh-page h6:not(.s-label)::before,
.ssh-page .subhead:not(.s-label)::before,
.ssh-page h1:not(.s-label)::after,
.ssh-page h2:not(.s-label)::after,
.ssh-page h3:not(.s-label)::after,
.ssh-page h4:not(.s-label)::after,
.ssh-page h5:not(.s-label)::after,
.ssh-page h6:not(.s-label)::after,
.ssh-page .subhead:not(.s-label)::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) 見出し内テキストが <span> で包まれ、その ::before/::after で線を描くテーマ対策 */
.ssh-page h1 > span::before, .ssh-page h1 > span::after,
.ssh-page h2 > span::before, .ssh-page h2 > span::after,
.ssh-page h3 > span::before, .ssh-page h3 > span::after,
.ssh-page h4 > span::before, .ssh-page h4 > span::after,
.ssh-page h5 > span::before, .ssh-page h5 > span::after,
.ssh-page h6 > span::before, .ssh-page h6 > span::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) s-label は自前の左バーだけ残す */
.ssh-page .s-label{ position: relative; padding-left: 10px; }
.ssh-page .s-label::before{
  content:"";
  position:absolute; left:0; top:.2em; bottom:.2em;
  width: var(--bar-width, 4px);
  border-radius: var(--bar-radius, 3px);
  background: linear-gradient(180deg, var(--bar-start, var(--accent)),
                                   var(--bar-end,   var(--accent-2)));
  opacity: var(--bar-opacity, .9);
}
/* 念のため：s-label の ::after は使っていないので消しておく */
.ssh-page .s-label::after{ content: none !important; display: none
!important; }

/* ==== 1) 見出しの既定装飾（左バー/背景/疑似要素）を完全に無効化 ==== */
/*   ※ s-label も含めてまず一度リセットします */
.ssh-page h1, .ssh-page h2, .ssh-page h3, .ssh-page h4, .ssh-page h5,
.ssh-page h6,
.ssh-page .subhead{
  border-left: 0 !important;
  background: none !important;
  padding-left: 0 !important;
  box-shadow: none !important;
  position: relative;
}
.ssh-page h1::before, .ssh-page h1::after,
.ssh-page h2::before, .ssh-page h2::after,
.ssh-page h3::before, .ssh-page h3::after,
.ssh-page h4::before, .ssh-page h4::after,
.ssh-page h5::before, .ssh-page h5::after,
.ssh-page h6::before, .ssh-page h6::after,
.ssh-page .subhead::before, .ssh-page .subhead::after,
.ssh-page h1 > span::before, .ssh-page h1 > span::after,
.ssh-page h2 > span::before, .ssh-page h2 > span::after,
.ssh-page h3 > span::before, .ssh-page h3 > span::after,
.ssh-page h4 > span::before, .ssh-page h4 > span::after,
.ssh-page h5 > span::before, .ssh-page h5 > span::after,
.ssh-page h6 > span::before, .ssh-page h6 > span::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==== 2) s-label の左バーを“疑似要素を使わず”描き直す（背景で描画） ==== */
/*   → テーマの疑似要素と競合しません */
.ssh-page .subhead.s-label{
  /* 好みで調整可（各セクションで上書きも可） */
  --bar-start: #2563eb;   /* グラデ上 */
  --bar-end:   #059669;   /* グラデ下 */
  --bar-width: 4px;       /* バーの太さ */
  --bar-offset-top: .2em; /* 上下の余白 */

  padding-left: calc(var(--bar-width) + 8px);  /* バー分の字下げ */
  background-image: linear-gradient(180deg, var(--bar-start),
var(--bar-end));
  background-repeat: no-repeat;
  background-size: var(--bar-width) calc(100% - (var(--bar-offset-top) *
2));
  background-position: left var(--bar-offset-top);
}

/* セクション別の色（必要なら維持/調整してください） */
#rubric   .subhead.s-label{ --bar-start:#2563eb; --bar-end:#059669; }
#survey   .subhead.s-label{ --bar-start:#06b6d4; --bar-end:#22d3ee; }
#test     .subhead.s-label{ --bar-start:#f59e0b; --bar-end:#ef4444; }
#feedback .subhead.s-label{ --bar-start:#10b981; --bar-end:#22c55e; }
/* --- s-label だけはリセット対象から外し、バーを再有効化する --- */
.ssh-page .subhead:not(.s-label){
  /* リセットは s-label 以外に限定 */
  background: none !important;
  padding-left: 0 !important;
}

/* s-label のバーを background-image で描画（!important で確実に上書き） */
.ssh-page .subhead.s-label{
  /* 必要なら色・太さをここで調整 */
  --bar-start: #2563eb;   /* 上色 */
  --bar-end:   #059669;   /* 下色 */
  --bar-width: 4px;       /* 太さ */
  --bar-offset-top: .2em; /* 上下の余白 */

  padding-left: calc(var(--bar-width) + 8px) !important;
  background-image: linear-gradient(180deg, var(--bar-start),
var(--bar-end)) !important;
  background-repeat: no-repeat !important;
  background-size: var(--bar-width) calc(100% - (var(--bar-offset-top) *
2)) !important;
  background-position: left var(--bar-offset-top) !important;
}

/* セクション別カラー（必要なら維持/調整） */
#rubric   .subhead.s-label{ --bar-start:#2563eb; --bar-end:#059669; }
#survey   .subhead.s-label{ --bar-start:#06b6d4; --bar-end:#22d3ee; }
#test     .subhead.s-label{ --bar-start:#f59e0b; --bar-end:#ef4444; }
#feedback .subhead.s-label{ --bar-start:#10b981; --bar-end:#22c55e; }
/* ===== 評価ページ：スマホ可読性＆余白＆図サイズ 調整 ===== */

/* 図（ヒーローの全体図）を全体的に少し大きめに */
.ssh-page .hero-figure{
  max-width: 720px !important;   /* 既存の560pxを上書き */
}

/* スマホ向け最適化 */
@media (max-width: 720px){
  /* ベース文字サイズを底上げ（全体を読みやすく） */
  .ssh-page{ font-size: 17px; } /* 端末倍率にもよるが、だいたい+1～2pt体感 */

  /* タイトル・本文の読みやすさ（行間とサイズ） */
  .ssh-page .hero-title{ font-size: clamp(1.6rem, 1.2rem + 3vw, 2.2rem); }
  .ssh-page .hero-lead,
  .ssh-page .rich p{
    font-size: 1.06rem;
    line-height: 1.9;
  }

  /* 左右が“つまる”のを解消（ヒーローとアコーディオン本文） */
  .ssh-page .hero-body,
  .ssh-page .acc .acc-body{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ssh-page .acc>summary{ padding: 14px 16px; }

  /* 図：スマホでは器いっぱいに見せる（既存max幅の制限を外す） */
  .ssh-page .hero-figure{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto; margin-right: auto;
  }
  .ssh-page .hero-figure img{
    width: 100% !important; height: auto !important;
    display: block;
  }
}
/* ===== 評価ページ：スマホ読みやすさ＆図拡大（このページ専用） ===== */
.ssh-page{ -webkit-text-size-adjust: 100%; }  /* iOSの勝手な縮小を抑止 */

@media (max-width: 768px){
  /* ① 基本文字サイズと行間を底上げ */
  .ssh-page{ font-size: 18px; } /* ベース16→18px相当 */
  .ssh-page .hero-title{
    font-size: clamp(1.6rem, 1.1rem + 3.2vw, 2.2rem);
  }
  .ssh-page .hero-lead,
  .ssh-page .rich p{
    font-size: 1.06em;
    line-height: 1.9;
    letter-spacing: .01em;
  }

  /* ② 左右の“端詰まり”を解消（概要＋折りたたみ本文） */
  .ssh-page .hero-wrap{ padding: 0 18px; }
  .ssh-page .hero-body{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .ssh-page .acc>summary{ padding: 14px 18px; }
  .ssh-page .acc .acc-body{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ③ 概要図をカードいっぱいに拡大（余白まで“はみ出し”表示） */
  .ssh-page .hero-figure{
    width: calc(100% + 36px);      /* 18px×左右ぶん広げる */
    margin: 10px -18px 6px;         /* カードの内側余白を相殺 */
  }
  .ssh-page .hero-figure img{
    width: 100% !important;
    height: auto !important;
    max-width: none !important;     /* テーマ側の上限を無効化 */
    display: block;
  }

  /* 参考：本文中の図も常に幅いっぱいに */
  .ssh-page .flow-figure img{
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
}
/* ===== 評価ページ：スマホ幅 1000px 固定の解除 + 可読性UP（このページ限定） ===== */
/* 端末が小さいときだけ、外枠(#container 等)の min-width:1000px をオフ */
@media (max-width: 1000px), (max-device-width: 820px){
  html, body, #container{ min-width: 0 !important; width: 100% !important; }
  #main, #pageHeaderBody,
  #globalNavi .pieceBody, #breadCrumbs .pieceBody,
  #commonFooter .pieceBody, #copyright .pieceBody{
    width: auto !important;
  }
  #wrapper, #links{ float: none !important; width: auto !important; }
  #links{ display: none !important; }   /* 左カラムがあれば非表示（必要なら外してOK） */

  /* ── ここから評価ページ本体（.ssh-page）の見やすさ ── */
  .ssh-page{ font-size: 18px; -webkit-text-size-adjust: 100%; }
  .ssh-page .hero-title{
    font-size: clamp(1.6rem, 1.1rem + 3.2vw, 2.2rem);
  }
  .ssh-page .hero-wrap{ padding: 0 18px; }
  .ssh-page .hero-body,
  .ssh-page .acc .acc-body{ padding-left: 18px !important; padding-right:
18px !important; }
  .ssh-page .acc>summary{ padding: 14px 18px; }

  /* 図を“カードいっぱい”に（左右の内側余白ぶんはみ出して見せる） */
  .ssh-page .hero-figure{
    width: calc(100% + 36px);         /* 18px×左右 */
    margin: 10px -18px 6px;            /* 余白を相殺してフルブリード */
    max-width: none !important;
  }
  .ssh-page .hero-figure img{
    width: 100% !important; height: auto !important; max-width: none
!important; display: block;
  }

  /* 本文中の図も常に幅いっぱい */
  .ssh-page .flow-figure img{ width: 100% !important; height: auto
!important; max-width: none !important; }
}

/* デスクトップでは図を少し大きめに（任意） */
.ssh-page .hero-figure{ max-width: 720px !important; }

/* （メモ）左右が詰まって見える場合は、下の100px指定を削除/縮小してください */
.ssh-page #eval .acc .acc-body{ padding: 2px 18px 2px; }  /* 100px→18px に修正
*/
/* ===== 評価ページ：スマホで #container=1000px 固定を解除（このページ限定） ===== */
@media (max-width: 1000px), (max-device-width: 820px){
  /* 外枠の固定幅を外す（テーマより強く !important で上書き） */
  html, body, #container{ min-width: 0 !important; width: 100% !important; }
  #wrapper, #main{ width: auto !important; max-width: 100% !important;
float: none !important; margin: 0 auto !important; }
  #links{ display: none !important; }  /* 左カラムがある場合は非表示（必要なら外してOK） */

  /* 読みやすさアップ（余白＋文字） */
  .ssh-page{ font-size: 18px; -webkit-text-size-adjust: 100%; }
  .ssh-page .hero-wrap{ padding: 0 18px; }
  .ssh-page .hero-body,
  .ssh-page .acc .acc-body{ padding-left: 18px !important; padding-right:
18px !important; }
  .ssh-page .acc>summary{ padding: 14px 18px; }

  /* 図をカード幅いっぱいに（フルブリード） */
  .ssh-page .hero-figure{
    width: calc(100% + 36px);
    margin: 10px -18px 6px;
    max-width: none !important;
  }
  .ssh-page .hero-figure img{ width: 100% !important; height: auto
!important; }
}

/* PCでは図を少し大きめ維持（任意） */
.ssh-page .hero-figure{ max-width: 720px !important; }

/* 折りたたみ本文の左右詰まりを解消（以前の100px指定を小さく） */
.ssh-page #eval .acc .acc-body{ padding: 2px 18px; }
/* === 評価ページだけ：スマホ時に外枠(#container等)の固定幅を解除 === */
@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; }
}

/* === スマホの読みやすさ（文字＋左右余白＋図の拡大） === */
@media (max-width: 768px){
  /* 文字を少し大きく */
  .ssh-page{ font-size: 18px; }

  /* 概要文＆折りたたみ本文の左右に余白 */
  .ssh-page .hero-wrap{ padding: 0 18px; }
  .ssh-page .hero-body,
  .ssh-page .acc .acc-body{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* 概要の図を見やすく（カードの余白いっぱいまで拡げる） */
  .ssh-page .hero-figure{
    width: calc(100% + 36px);
    margin: 10px -18px 6px;
  }
  .ssh-page .hero-figure img{
    width: 100% !important; height: auto !important; display:block;
    max-width: none !important;
  }

  /* 本文中の図も幅いっぱい */
  .ssh-page .flow-figure img{
    width: 100% !important; height: auto !important; max-width: none
!important;
  }
}
/* === 評価ページだけ：ヘッダーの重なり解消（文字サイズ/背景色ツール） === */
/* ツールを絶対配置→通常フローに戻し、折り返し可に */
#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;
}

/* 学校名・メニューの旧floatを解除（狭幅で縦積み） */
@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; }
/* ========= 中央枠内にだけ背景グラデを敷く（全ページ共通） ========= */

/* お好みで調整可能なパラメータ */
:root{
  /* 中央枠の最大幅（.hero / .acc と同じ 1000px 想定） */
  --page-frame-w: 1000px;
  /* 枠の左右に少し余白を足したい場合 */
  --page-frame-pad: 24px;
  /* グラデーションの最大縦サイズ（超える場合はここで打ち止め） */
  --page-frame-max-h: 1400px;

  /* 既存のアクセント色を流用（なければデフォルト値） */
  --grad-blue: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
  --grad-green: color-mix(in srgb, var(--accent-2, #059669) 12%,
transparent);
}

/* ベースは単色にして、グラデは擬似要素へ移す */
body:has(.ssh-research-page){ background:#f7f9fc; }

.ssh-research-page{
  position: relative;
  isolation: isolate;          /* z-index:-1 の擬似要素を背面に閉じ込める */
  background:#f7f9fc !important; /* ここに直接描いていたグラデをリセット */
}

/* 中央に固定した「背景用キャンバス」を重ねる */
.ssh-research-page::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;

  /* 横は中央枠内だけに収める */
  width:min(100%, calc(var(--page-frame-w) + var(--page-frame-pad)*2));

  /* 縦はページ高と最大値の小さい方に収める（はみ出さない） */
  height:min(100%, var(--page-frame-max-h));

  pointer-events:none;
  z-index:-1;                   /* コンテンツの背面に配置 */

  /* グラデーション本体（色は既存の配色を利用） */
  background:
    radial-gradient(800px 520px at 20% -8%, var(--grad-blue),  transparent
60%),
    radial-gradient(760px 500px at 80%  -8%, var(--grad-green), transparent
60%);
}

/* 画面が十分高いときは、ページの全高まで伸ばす（横幅は中央枠のまま） */
@media (min-height: 740px){
  .ssh-research-page::before{ height:100%; }
}

/* （必要なら）ヒーロー自体にも独自グラデがあり二重に見える場合は下を有効化
.ssh-research-page .hero{ background:#fff !important; }
*/
/* =========================
   課題研究紹介ページ（.ssh-research-page）
   枠幅と背景グラデを評価ページ幅に統一
   ========================= */

/* ここだけ評価ページの枠幅に変更してください */
.ssh-research-page{
  --eval-frame-w: 900px;   /* ← 評価ページの最大幅に合わせる（例：900px / 880px） */
  --eval-frame-pad: 0px;   /* 必要なら左右に足す余白（通常 0 のままでOK） */

  /* 背景グラデ用の縦方向の上限。評価ページの見え方に合わせたい時に微調整 */
  --eval-bg-max-h: 1200px;
}

/* ヒーローとアコーディオンの“枠幅”を評価ページ幅に統一 */
.ssh-research-page .hero,
.ssh-research-page .acc{
  max-width: var(--eval-frame-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ヒーロー内のwrapが枠を超えないように（既存 960px を無効化） */
.ssh-research-page .hero-wrap{
  max-width: 100% !important;
}

/* カルーセルやギャラリーが 900px 固定に縛られないよう上書き */
.ssh-research-page .carousel{
  width: 100% !important;
  max-width: 100% !important;   /* 既存の max-width:900px を無効化 */
}
.ssh-research-page .assets-gallery,
.ssh-research-page .intro-photos{
  max-width: 100% !important;
}

/* ===== 背景グラデを“中央の枠内だけ”に固定（評価ページ幅に合わせて描画） ===== */
.ssh-research-page{
  position: relative;
  isolation: isolate;                /* 背景レイヤを背面に閉じ込める */
  background: #f7f9fc !important;   /* ベース色のみ残す（ページごとの差異をなくす） */
}

/* 中央寄せの背景キャンバス */
.ssh-research-page::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;

  /* 横幅は評価ページの枠幅＋任意のパディングに限定 */
  width: min(100%, calc(var(--eval-frame-w) + var(--eval-frame-pad)*2));

  /* 縦はページ高 or 上限の小さい方に。長すぎる時に出過ぎないよう制御 */
  height: min(100%, var(--eval-bg-max-h));

  z-index: -1;
  pointer-events: none;

  /* 既存の青×緑の配色を踏襲（変えたい時は値だけ調整） */
  background:
    radial-gradient(800px 520px at 20% -8%,
      color-mix(in srgb, var(--accent, #2563eb) 12%, transparent),
      transparent 60%),
    radial-gradient(760px 500px at 80% -8%,
      color-mix(in srgb, var(--accent-2, #059669) 12%, transparent),
      transparent 60%);
}

/* 画面が十分高い時はページ全高まで伸ばす（横幅は枠内のまま） */
@media (min-height: 740px){
  .ssh-research-page::before{ height: 100%; }
}

/* ヒーロー自体の背景が重なって見える場合は下を有効化して白に固定
.ssh-research-page .hero{ background:#fff !important; }
*/