@charset "utf-8";
/* =====================================================================
   research/* 研究詳細ページ用モダン上書き（modern.css と併用して読み込む）
   旧 research.css（#contents 800px / #main 760px 固定 等）を上書きしレスポンシブ化
   ===================================================================== */

html.mjs #contents {
  width: auto !important;
  max-width: 1000px;
  margin: 0 auto !important;
  padding: 26px 20px 60px !important;
  background: none !important;
  border: 0 !important;
}

/* 研究タイトルのバナー */
html.mjs #header {
  background: linear-gradient(100deg, var(--brand-dark), var(--brand-deep)) !important;
  border: 0 !important;
  border-radius: 16px;
  color: #fff !important;
  padding: 26px 30px !important;
  margin: 0 0 24px !important;
  box-shadow: var(--shadow);
}
html.mjs #header h1 {
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 800;
  border: 0 !important;
  background: none !important;   /* 旧 title.png 装飾を除去 */
  font-family: var(--font-jp) !important;
}
html.mjs #header h1 big { font-size: 1.12em; }
html.mjs #header p#author,
html.mjs #header #author {
  color: #eaf1ff !important;
  margin: 14px 0 0 !important;
  padding: 8px 0 0 !important;
  font-size: .92rem;
  font-weight: 500;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.35) !important;
  border-bottom: 0 !important;
  display: inline-block;
}

/* 本文カード */
html.mjs #main {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 32px 36px !important;
  box-shadow: var(--shadow);
}
html.mjs #main h2 {
  font-size: 1.24rem;
  color: var(--ink);
  font-weight: 700;
  margin: 34px 0 16px !important;
  padding: 6px 0 6px 14px !important;
  border: 0 !important;
  border-left: 6px solid var(--brand) !important;
  background: none !important;
}
html.mjs #main h2:first-letter { color: inherit; font-size: inherit; }

/* 章番号ボックス（CSSカウンタ）と図表の水色(#00a0e9)をブランド色(#2563eb)に統一 */
html.mjs #main h2::before {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 5px;
  padding: 0.1em 0.45em 0 !important;
  margin-right: 0.4em !important;
}
html.mjs #main .img table th,
html.mjs #main .img table td { border-color: var(--brand) !important; }
html.mjs #main .img table th { background: var(--brand) !important; color: #fff !important; }
html.mjs #main > h2:first-of-type,
html.mjs #main .section:first-child h2 { margin-top: 4px !important; }
html.mjs #main h3 {
  color: var(--brand-deep);
  font-weight: 700;
  border: 0;
  border-bottom: 2px dashed var(--brand-tint2);
  padding-bottom: 6px;
  margin: 24px 0 12px;
}
html.mjs #main p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
html.mjs #main .section { margin: 0 0 22px !important; }
html.mjs #main ul, html.mjs #main ol { line-height: 1.9; }

/* 画像・動画・表 */
html.mjs #main img,
html.mjs #main video {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}
html.mjs #main video { width: 100%; box-shadow: var(--shadow-sm); background: #000; }
html.mjs #main .img { margin: 18px 0; text-align: center; }
html.mjs #main .img table { margin: 0 auto; max-width: 100%; border-collapse: collapse; }
html.mjs #main .img table td, html.mjs #main .img table th { padding: 6px; }
html.mjs #main p#return {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* フッター */
html.mjs #contents #footer,
html.mjs #footer {
  background: var(--brand-dark) !important;
  color: #eaf1ff !important;
  text-align: center;
  padding: 20px 16px !important;
  height: auto !important;
  border-radius: 14px;
  margin-top: 26px;
  border: 0 !important;
}
html.mjs #footer address,
html.mjs #footer * { color: #eaf1ff !important; font-style: normal; }
html.mjs #footer a { color: #fff !important; }

@media (max-width: 760px) {
  html.mjs #contents { padding: 14px 12px 44px !important; }
  html.mjs #main { padding: 20px 16px 28px !important; }
  html.mjs #header { padding: 20px 18px !important; }
  html.mjs #header h1 { font-size: 1.24rem; }
  html.mjs #main h2 { font-size: 1.12rem; }
}