/* ==========================================================
   小池直之 個人サイト — 共通スタイル
   紙面のように組む：白地・明朝の見出し・罫線。面の塗りと影は使わない。
   ========================================================== */
:root {
  --navy: #1b2a4a;        /* 見出し・サイト名 */
  --navy-2: #2a3b60;
  --ink: #222831;         /* 本文 */
  --muted: #646b76;
  --accent: #1f4f9c;      /* リンク。青を一色だけ、彩度を落として使う */
  --accent-soft: #eef2f8;
  --gold: #9a7b3a;        /* 番号・記号の差し色 */
  --bg: #fdfcfa;          /* わずかに暖かい白 */
  --card: #ffffff;
  --line: #dcdfe4;
  --rule: #1b2a4a;        /* 見出し下の太罫 */
  /* 面ではなく罫線で組むため、角丸は「角を落とす」程度にとどめる */
  --radius: 2px;
  --maxw: 1040px;
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
    "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  /* 欧文セリフを先に置き、和字はヒラギノ明朝に落とす。
     和文中の英数字と、英語版ページ全体が Georgia になる（部門サイトと同じ指定）。 */
  --font-serif: Georgia, "Times New Roman", "Hiragino Mincho ProN",
    "Yu Mincho", YuMincho, "MS PMincho", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.85;
  font-size: 16px;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 文章の中のリンクは、リンク色と本文色の差 (1.88:1) だけでは見分けにくいので常に下線を引く。
   ナビ・ボタン・一覧の見出しなど、位置でリンクと分かるものは対象外 */
.prose a, .news-list a, .essay a, .message-card a, .book-card .desc a,
.theme-card p a, .quote a, .lede-sm a, .card > p a, .abstract a, .note a {
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}

/* 画面には出さず、読み上げソフトにだけ伝える文字（表の表題など） */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* プロフィールの小見出し（見出しの階層は h2、見た目はカード内の小見出し） */
.profile-heading { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }

/* ==========================================================
   動き（すべて短時間で止まる。「視差効果を減らす」設定では出さず、印刷にも影響しない）
   ========================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  /* 研究テーマの線画：実線は端から引き、破線はふわっと現す（--i は描く順番） */
  .theme-fig .stroke { transition: stroke-dashoffset 0.9s ease calc(var(--i) * 0.16s); }
  .theme-fig .fade { opacity: 0; transition: opacity 0.6s ease calc(var(--i) * 0.16s); }
  .theme-fig.drawn .stroke { stroke-dashoffset: 0 !important; }
  .theme-fig.drawn .fade.f-dash { opacity: 0.8; }
  .theme-fig.drawn .fade.f-axis { opacity: 1; }

  /* 節：画面の下から入ってくるときに、少し浮かび上がって現れる。
     隠すのは一瞬（.pending に遷移なし）、現れるときだけ遷移する（main.js が .pending を .revealed に替える） */
  html.anim main > section.block.pending { opacity: 0; transform: translateY(14px); }
  html.anim main > section.block.revealed { transition: opacity 0.7s ease, transform 0.7s ease; }

  /* 見出しの太罫：左から右へ引く（main.js が .drawn を付ける） */
  html.anim .section-head, html.anim .page-title .inner { position: relative; border-bottom-color: transparent; }
  html.anim .section-head::after, html.anim .page-title .inner::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--rule);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
  }
  html.anim .drawn .section-head::after, html.anim .page-title.drawn .inner::after { transform: scaleX(1); }

  /* リンク・カードの小さな反応 */
  a, .btn, .nav a, a.nav-card, .news-more summary {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.2s ease, text-decoration-color 0.15s ease;
  }
  .more-link::after, .hero-links a::after, a.nav-card h3::after { display: inline-block; transition: transform 0.2s ease; }
  .more-link:hover::after, .hero-links a:hover::after, a.nav-card:hover h3::after { transform: translateX(4px); }
  .nav a:hover { border-bottom-color: var(--line); }
  .nav a.active:hover { border-bottom-color: var(--navy); }
}
/* 文章中のリンクの下線：ふだんは薄く、マウスを載せると濃く（下線そのものは常に出す） */
.prose a, .news-list a, .essay a, .message-card a, .book-card .desc a,
.theme-card p a, .quote a, .lede-sm a, .card > p a, .abstract a, .note a {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.prose a:hover, .news-list a:hover, .essay a:hover, .message-card a:hover, .book-card .desc a:hover,
.theme-card p a:hover, .quote a:hover, .lede-sm a:hover, .card > p a:hover, .abstract a:hover, .note a:hover {
  text-decoration-color: currentColor;
}

/* キーボード操作の現在位置をはっきり示す */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
/* 「本文へ移動」：ふだんは隠し、Tab キーで最初に現れる */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--navy); color: #fff; padding: 8px 14px; font-size: 0.88rem;
  border-radius: var(--radius);
}
.skip-link:focus { top: 10px; text-decoration: none; }

/* ---------- 明朝の適用範囲 ----------
   見出しと散文を明朝にする。MathJax の数式はもともとセリフなので、
   周囲の和文を明朝にすると行中の数式が浮かなくなる。
   一覧・メタ情報・ナビ・ラベルの類は、密度が要るのでゴシックのまま残す。 */
.brand .name,
.hero h1, .hero p.lede,
.page-title h1,
.section-head h2,
.prose h2, .prose h3, .prose p, .prose ul, .prose ol,
.theme-card h3, .theme-card p,
.book-card .btitle,
a.nav-card h3,
.conf-card h3,
.year-block h2,
.sim-banner h3,
.quote, .essay p, .message-card p,
.drama-card h3,
.card > h3 {
  font-family: var(--font-serif);
}

/* ---------- 英語版 ----------
   和文に合わせた広い字間・行送りは欧文には緩いので、英語ページだけ詰める */
html[lang="en"] .brand .name,
html[lang="en"] .hero h1,
html[lang="en"] .section-head h2,
html[lang="en"] .page-title h1,
.page-title h1:lang(en), .hero h1:lang(en) { letter-spacing: 0.01em; }
html[lang="en"] .hero .en-name { letter-spacing: 0.08em; }
html[lang="en"] body { line-height: 1.65; }
html[lang="en"] .hero p.lede,
html[lang="en"] .theme-card p,
html[lang="en"] .reading { line-height: 1.65; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 250, 0.96);
  backdrop-filter: blur(6px);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
/* ヘッダーだけ本文より広く取り、サイト名とナビが窮屈にならないようにする */
.header-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
  height: 64px;
}
.brand { display: flex; align-items: baseline; gap: 12px; color: var(--navy); }
.brand:hover { text-decoration: none; }
.brand .name { font-weight: 600; font-size: 1.12rem; letter-spacing: 0.08em; white-space: nowrap; }
.brand .romaji {
  font-size: 0.7rem; color: var(--muted); letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
}
/* 欧文表記は装飾なので、幅が足りなくなる手前で隠して和文のサイト名だけ残す */
@media (max-width: 1080px) { .brand .romaji { display: none; } }

.nav { display: flex; gap: 2px; align-items: center; }
.nav a {
  color: var(--ink); font-size: 0.86rem; padding: 8px 11px;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
/* 横並びのときはサイト名がホームへの導線になるので「ホーム」は省く。
   ハンバーガーメニューでは分かりやすさのために表示する。 */
@media (min-width: 921px) { .nav .home-link { display: none; } }
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a.active { color: var(--navy); border-bottom-color: var(--navy); }
.nav .lang { border: 1px solid var(--line); margin-left: 8px; border-radius: var(--radius); }

.nav-toggle {
  display: none; background: none; border: none; color: var(--navy);
  font-size: 1.5rem; cursor: pointer; padding: 6px 10px;
}

/* ナビ7→8項目とサイト名の長さから、920px を切ると横並びが収まらない */
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); padding: 4px 16px 12px;
    border-bottom: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .nav a.active { border-bottom-color: var(--line); font-weight: 600; }
  .nav .lang { margin: 10px 0 0; text-align: center; }
}
/* 英語版のサイト名は明朝だと和文より幅を取るので、スマホ幅では字間と大きさを詰める */
@media (max-width: 480px) {
  .header-inner { gap: 12px; padding: 0 16px; }
  .brand .name { font-size: 1rem; letter-spacing: 0.03em; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: var(--ink); overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* 曲線短縮流の線画（計算と色は main.js 側）。文章の背後に線が通らないよう右側に限る。
   スマホでは文章と重なるので出さない */
.hero canvas {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%; height: 100%;
  opacity: 0.55;
  cursor: crosshair;   /* 図の上だけ十字カーソル。クリックでもう一度流す（main.js） */
  /* 左端で線が直線的に切れて見えないよう、端だけぼかす */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
  mask-image: linear-gradient(to right, transparent 0, #000 18%);
}
@media (max-width: 720px) { .hero canvas { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero canvas { cursor: default; } }   /* 動かさないので操作もしない */
/* 文字ブロックは図の上に重なっているので、透明な余白はマウスを素通りさせて図に届ける。
   実際の文字・リンク・写真だけがマウスを受け取る（文字の選択やリンクは今までどおり） */
.hero-inner { pointer-events: none; }
.hero-inner > div > *, .hero-inner > .portrait { pointer-events: auto; }
.hero-inner > div > :not(.lede) { width: fit-content; max-width: 100%; }
.hero-inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: 76px 20px 68px;
  display: grid; grid-template-columns: 1fr 200px; gap: 56px; align-items: center;
}
.hero h1 {
  font-size: 2.4rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.35;
  color: var(--navy);
}
.hero .en-name {
  font-family: var(--font-serif);
  font-size: 0.95rem; color: var(--muted); letter-spacing: 0.2em; margin-top: 6px;
}
.hero .affiliation {
  margin-top: 14px; font-size: 0.95rem; color: var(--ink); letter-spacing: 0.04em;
}
.hero .fields {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 0;
  font-size: 0.9rem; color: var(--navy-2);
}
/* 分野は札ではなく、中点で区切った一行として見せる */
.hero .fields span + span::before { content: "・"; color: var(--muted); }
.hero p.lede {
  margin-top: 22px; color: var(--ink); max-width: 580px; font-size: 1rem; line-height: 2;
  padding-top: 20px; border-top: 1px solid var(--line);
}
/* 主要ページへの導線。下線付きの文字リンクとして、本文より一段強く見せる */
.hero-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 0.95rem; }
.hero-links a {
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px;
}
.hero-links a::after { content: "→"; margin-left: 0.35em; font-weight: 400; color: var(--muted); }
.hero-links a:hover { color: var(--accent); }
.hero .ids { margin-top: 14px; display: flex; gap: 22px; }
.hero .ids a {
  font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent);
}
.hero .ids a::after { content: " ↗"; font-size: 0.75em; }
.portrait {
  width: 200px; height: 250px; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius);
  border: 1px solid var(--line); padding: 5px; background: #fff;
}
/* スマホでは名前・所属・研究分野を先に読ませ、写真は紹介文の後に小さく置く */
@media (max-width: 720px) {
  .hero-inner { grid-template-columns: 1fr; padding: 32px 20px; gap: 20px; }
  .portrait { width: 120px; height: 150px; }
  .hero h1 { font-size: 1.8rem; }
}

/* ---------- layout ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 80px; }

section.block { padding-top: 64px; }
/* 見出しは「太罫＋明朝」。欧文の副題は右に小さく添える */
.section-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px;
  padding-bottom: 8px; border-bottom: 2px solid var(--rule);
}
.section-head h2 { font-size: 1.45rem; font-weight: 600; color: var(--navy); letter-spacing: 0.08em; }
/* 副題は小さく添えるだけにする（大文字化・広い字間・斜体を重ねない）。
   斜体は欧文の副題（lang="en"）にだけ掛け、和文の副題は立体のまま */
.section-head .sub {
  margin-left: auto; color: var(--muted); font-family: var(--font-serif);
  font-size: 0.85rem; letter-spacing: 0.04em;
}
.section-head .sub:lang(en), .page-title .sub:lang(en) { font-style: italic; }
/* スマホ幅では見出しを一行で読ませ、欧文の副題はその下に回す */
@media (max-width: 600px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .section-head .sub { margin-left: 0; }
}

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px;
}

/* 段数は 3 → 2 → 1、2 → 1 と段階的に減らす（タブレット幅で縦に長くなりすぎないように） */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 840px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  section.block { padding-top: 44px; }
}

/* ---------- news ---------- */
/* お知らせは枠を外し、罫線区切りの年表として組む */
#news .card { border: none; background: none; padding: 0; }
.news-list { list-style: none; }
.news-list li {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.news-list time {
  color: var(--muted); font-size: 0.84rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-family: var(--font-serif);
}
.news-list .tag { margin-right: 10px; vertical-align: 1px; }
@media (max-width: 600px) {
  .news-list li { grid-template-columns: 1fr; gap: 2px; }
}
.news-more summary {
  cursor: pointer; padding: 12px 0; font-size: 0.88rem; color: var(--accent);
  border-bottom: 1px solid var(--line);
}
.news-more summary:hover { text-decoration: underline; }
.news-more[open] summary { color: var(--muted); }

/* 種別ラベル：塗りのピルではなく、細い枠の角札 */
.tag {
  display: inline-block; margin-right: 8px; padding: 0 7px;
  font-size: 0.7rem; line-height: 1.7; font-weight: 500; letter-spacing: 0.06em;
  border: 1px solid currentColor; border-radius: var(--radius);
  vertical-align: middle; background: none;
}
.tag-event { color: var(--accent); }
.tag-book { color: #826528; }   /* 金色 (--gold) は 3.89:1 で小さい文字には薄い。これは 5.33:1 */
.tag-info { color: #3d6b52; }

/* ---------- research cards ---------- */
/* 4テーマは枠を外し、番号と上罫で区切る */
.theme-card {
  border: none; border-top: 1px solid var(--line); background: none; padding: 18px 0 6px; border-radius: 0;
  /* 1行目：番号（左下）と線画（右）。見出しと説明文はその下に全幅で（カード間で見出しの高さがそろう） */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
  align-content: start;   /* 隣のカードに高さを合わせて伸びても、余白を行に配らない */
}
.theme-card .num { grid-column: 1; grid-row: 1; align-self: end; }
.theme-card h3, .theme-card p { grid-column: 1 / -1; }

/* ---------- 研究テーマの線画（描くのは theme-figures.js） ---------- */
.theme-fig { grid-column: 2; grid-row: 1; width: 144px; height: 101px; margin-bottom: 8px; }
.theme-fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 線の太さ・破線の長さは図の座標（viewBox）で決める。vector-effect: non-scaling-stroke を付けると
   線を引く演出の破線の長さが画面のピクセルで解釈され、拡大表示したときに線の末尾が欠ける */
.theme-fig path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.theme-fig .f-main   { stroke: var(--navy); stroke-width: 1.2; }
.theme-fig .f-sub    { stroke: var(--muted); stroke-width: 1; opacity: 0.7; }
.theme-fig .f-accent { stroke: var(--gold); stroke-width: 1.4; }
.theme-fig .f-dash   { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.theme-fig .f-axis   { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
@media (max-width: 480px) { .theme-fig { width: 114px; height: 80px; } }
.theme-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; line-height: 1.6; }
.theme-card .num {
  display: block; color: var(--gold); font-family: var(--font-serif);
  font-size: 1.5rem; line-height: 1; margin-bottom: 10px; font-style: italic;
}
.theme-card p { font-size: 1rem; color: var(--ink); line-height: 1.95; }
/* トップの研究紹介など、散文として読ませる段落 */
.reading { font-family: var(--font-serif); font-size: 1rem; line-height: 1.95; max-width: 800px; margin-bottom: 26px; }
.more-link { display: inline-block; margin-top: 16px; font-size: 0.88rem; }
.more-link::after { content: "→"; margin-left: 0.35em; }

/* ---------- books ---------- */
.book-card { display: flex; flex-direction: column; }
/* 書影の代わりの色面。グラデーションをやめ、落ち着いた単色の装丁にする */
.book-cover {
  border-radius: var(--radius); padding: 22px 20px; color: #fff; min-height: 140px;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-family: var(--font-serif); margin-bottom: 16px;
  border-left: 6px solid rgba(0,0,0,0.18);
}
.book-cover .btitle { font-size: 1.08rem; font-weight: 600; line-height: 1.55; letter-spacing: 0.04em; }
.book-cover .bsub { font-size: 0.8rem; opacity: 0.85; margin-top: 6px; }
.bc-1 { background: #2b3f66; }
.bc-2 { background: #2f5a4f; }
.bc-3 { background: #6b3341; }
.bc-4 { background: #4f5373; }
.bc-5 { background: #7a6332; }
.book-card .meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; }
.book-card .desc { font-family: var(--font-serif); font-size: 0.92rem; flex: 1; }
.book-card .links { margin-top: 14px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; }

/* ---------- videos / simulations ---------- */
/* 紺のグラデーション帯をやめ、左の太罫で区切る囲みにする */
.sim-banner {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--navy);
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between;
}
.sim-banner h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.sim-banner p { font-size: 0.88rem; color: var(--muted); max-width: 560px; }
.sim-banner .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 8px 16px; border-radius: var(--radius); font-size: 0.86rem;
  font-weight: 500; border: 1px solid var(--navy);
}
.btn-light { background: var(--navy); color: #fff; }
.btn-light:hover { background: var(--navy-2); text-decoration: none; }
.btn-ghost { color: var(--navy); background: #fff; }
.btn-ghost:hover { background: var(--accent-soft); text-decoration: none; }

.video-list { list-style: none; columns: 2; column-gap: 32px; font-size: 0.9rem; }
.video-list li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); }
.video-list li::before { content: "▸"; color: var(--gold); margin-right: 9px; }
@media (max-width: 720px) { .video-list { columns: 1; } }

/* ---------- students ---------- */
.quote {
  border-left: 3px solid var(--gold); background: none;
  padding: 6px 0 6px 22px; margin-top: 22px; font-size: 0.95rem; line-height: 2;
}
.quote .qtitle { font-weight: 600; color: var(--navy); margin-bottom: 6px; }

/* ---------- prose pages ---------- */
.page-title {
  background: var(--bg); color: var(--navy); padding: 48px 0 0;
}
.page-title .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px 16px;
  border-bottom: 2px solid var(--rule);
}
.page-title h1 { font-size: 1.9rem; font-weight: 600; letter-spacing: 0.1em; }
.page-title .sub {
  color: var(--muted); font-family: var(--font-serif);
  font-size: 0.95rem; letter-spacing: 0.04em; margin-top: 2px;
}

.prose { max-width: 780px; }
.prose h2 { color: var(--navy); font-size: 1.3rem; font-weight: 600; margin: 44px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prose h3 { color: var(--navy-2); font-size: 1.06rem; font-weight: 600; margin: 30px 0 10px; }
.prose p { margin-bottom: 14px; line-height: 2; }
.prose ul, .prose ol { margin: 0 0 14px 24px; }
.prose .note {
  background: none; border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: var(--radius); padding: 14px 20px;
  font-size: 0.9rem; margin: 18px 0;
}

/* ---------- カード型ナビゲーション ---------- */
a.nav-card { display: block; text-decoration: none; transition: border-color .15s; }
a.nav-card:hover { border-color: var(--navy); }
a.nav-card h3 { color: var(--navy); margin-bottom: 8px; font-size: 1.02rem; font-weight: 600; }
a.nav-card h3::after { content: "→"; margin-left: 0.35em; font-weight: 400; color: var(--muted); }
a.nav-card p { font-size: 0.87rem; color: var(--muted); line-height: 1.75; }

/* ---------- ギャラリー ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; height: 180px; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--line);
}
.gallery figcaption { margin-top: 7px; font-size: 0.84rem; color: var(--ink); line-height: 1.6; }
.gallery figcaption .when { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* ---------- 趣味・自己紹介 ---------- */
table.favorites { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.favorites th, table.favorites td {
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
table.favorites th { white-space: nowrap; color: var(--muted); font-weight: 500; width: 1%; }
table.favorites td .cmt { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--muted); }

ul.karaoke {
  list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px;
}
ul.karaoke li { padding: 5px 0 5px 16px; position: relative; font-size: 0.9rem; }
ul.karaoke li::before { content: "♪"; position: absolute; left: 0; color: var(--muted); }

.drama-card h3 .cast { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); font-weight: 400; font-family: var(--font-jp); }
/* 旧ページの「1行ごとの改行」を文の単位につなぎ直したので、行間を詰めて一続きの文章として読ませる。
   段落の切れ目は文の終わりにしかないため、段落間の余白は小さくする */
.essay > p, .essay > .sub-head { max-width: 780px; }   /* 見出しの罫は他の節と同じ幅のまま */
.essay p { line-height: 1.95; margin-bottom: 0.45em; }
.essay .sub-head { margin-top: 34px; }

/* ---------- セミナー・プロフィール・学生向け ---------- */
.sub-head {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 600; color: var(--navy); margin: 28px 0 10px;
  padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
ul.bulleted { list-style: none; }
ul.bulleted li { padding: 7px 0 7px 18px; position: relative; border-bottom: 1px solid var(--line); }
ul.bulleted li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
ul.bulleted li:last-child { border-bottom: none; }
.link-list li a { color: var(--accent); }
.muted-note { color: var(--muted); font-size: 0.84rem; }

.seminar-session .talk { padding: 14px 0; border-top: 1px solid var(--line); }
.seminar-session .talk:first-of-type { border-top: none; }
.talk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.talk-head .t { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.talk-head strong { color: var(--navy); }
.talk-head .aff { color: var(--muted); font-size: 0.8rem; }
.talk-title { margin-top: 4px; font-size: 0.95rem; font-family: var(--font-serif); }
.abstract {
  margin-top: 9px; padding: 10px 0 10px 16px; background: none;
  border-left: 2px solid var(--line); font-family: var(--font-serif);
  font-size: 0.95rem; line-height: 1.9; color: #3a4049;
}
.abstract .lbl {
  display: block; margin-bottom: 5px; font-size: 0.72rem;
  font-weight: 600; color: var(--muted); letter-spacing: 0.06em;
}

table.grants { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
table.grants td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grants td.t { white-space: nowrap; color: var(--muted); width: 1%; font-variant-numeric: tabular-nums; }
table.grants td.k { white-space: nowrap; color: var(--navy); font-weight: 600; width: 1%; }
table.grants td .aff { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--muted); }

.message-card p { margin-bottom: 12px; line-height: 2; }
.message-card .signed { margin-top: 14px; font-size: 0.78rem; color: var(--muted); text-align: right; }

/* ---------- 研究集会ハブ ---------- */
.lede-sm { font-size: 0.92rem; color: var(--muted); margin-bottom: 20px; line-height: 1.8; }
.en-sub { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; font-family: var(--font-serif); font-style: italic; }
.en-sub .span, .year-block h2 .span {
  margin-left: 10px; padding: 0 7px; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 0.72rem; color: var(--muted); font-weight: 400;
  font-family: var(--font-jp); font-style: normal;
}
.year-block h2 .span { vertical-align: middle; }

.year-jump { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 28px; font-family: var(--font-serif); }
.year-jump a {
  padding: 2px 12px; border-left: 1px solid var(--line);
  font-size: 0.9rem; color: var(--accent); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.year-jump a:first-child { border-left: none; padding-left: 0; }
.year-jump a:hover { text-decoration: underline; }

.conf-card .links a.primary {
  font-weight: 600; color: var(--navy);
}
.conf-card .links a.primary::after { content: " →"; }

/* ---------- 研究集会アーカイブ ---------- */
.back-link {
  display: inline-block; margin-bottom: 20px; font-size: 0.88rem;
  color: var(--muted); text-decoration: none;
}
.back-link:hover { color: var(--navy); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 3px 0; font-size: 0.9rem; color: var(--ink); }

.day { margin-bottom: 30px; }
.day h3 {
  font-family: var(--font-serif);
  font-size: 1.02rem; color: var(--navy); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 2px solid var(--rule);
}

/* プログラム表は狭い画面で表だけ横スクロールさせる */
table.program {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
  display: block; overflow-x: auto;
}
table.program th, table.grants th {
  text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--navy);
  font-size: 0.78rem; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; white-space: nowrap;
}
table.program td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.program td.t { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; width: 1%; }
table.program td.who { white-space: nowrap; width: 1%; }
table.program td.who strong { font-weight: 600; color: var(--navy); }
table.program td.who .aff { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 400; }
table.program td.ti { line-height: 1.55; font-family: var(--font-serif); }
table.program td.social { color: var(--muted); font-style: italic; }
a.slide {
  display: inline-block; margin-left: 8px; padding: 0 7px;
  font-size: 0.72rem; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
a.slide:hover { border-color: var(--navy); color: var(--navy); }

.kind, .room {
  display: inline-block; margin-right: 6px; padding: 0 6px;
  font-size: 0.7rem; border-radius: var(--radius); font-weight: 500;
}
.kind { border: 1px solid var(--navy); color: var(--navy); }
.room { border: 1px solid var(--line); color: var(--muted); }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.photo-grid img {
  width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius); display: block;
}

/* ---------- 数式（MathJax / SVG出力） ---------- */
/* 別行立ての数式が狭い画面でページごと横スクロールさせないよう、数式内で完結させる */
mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding: 4px 0;
}
/* 行中の数式は和文の行送りを崩さない範囲で少し余白を取る */
mjx-container:not([display="true"]) { margin: 0 0.15em; }

/* ---------- publications ---------- */
.pub-tools { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-tools input {
  flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid #7b8492;
  border-radius: var(--radius); font-size: 0.95rem; font-family: inherit; background: #fff;
}
.pub-tools input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* 論文リストは枠を外し、番号付きの文献リストとして組む */
.pub-list { list-style: none; counter-reset: pub; border-top: 1px solid var(--line); }
.pub-list li {
  background: none; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 12px 0 12px 48px; margin: 0; position: relative; font-size: 1rem;
  font-family: var(--font-serif); line-height: 1.75;
}
.pub-list li::before {
  counter-increment: pub; content: "[" counter(pub) "]";
  position: absolute; left: 0; top: 12px;
  color: var(--muted); font-family: var(--font-serif); font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
/* 査読付き論文は JS が付けた data-number を使い、絞り込み中も元の番号のまま見せる */
.pub-list li[data-number]::before { content: "[" attr(data-number) "]"; }
.pub-label { display: block; margin-bottom: 6px; font-size: 0.88rem; color: var(--ink); }
.pub-list .jr { color: var(--muted); }
.pub-list li.hidden { display: none; }
.pub-count { color: var(--muted); font-size: 0.85rem; margin-bottom: 14px; }

/* ---------- conferences ---------- */
.year-block { margin-bottom: 44px; }
.year-block h2 {
  color: var(--navy); font-size: 1.2rem; font-weight: 600; margin-bottom: 4px;
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--rule);
}
/* 年度内の各集会は枠を外し、罫線区切りの記録として組む */
.year-block .conf-card {
  border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; padding: 16px 0; margin: 0;
}
.conf-card { margin-bottom: 14px; }
.conf-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--navy-2); margin-bottom: 6px; line-height: 1.6; }
.conf-card .meta { font-size: 0.86rem; color: var(--muted); margin-bottom: 6px; }
/* 日付・場所などは記号で飾らず、斜線で区切って一行に並べる（アーカイブ・セミナーも共通） */
.meta > span + span::before { content: "／"; margin: 0 0.5em; color: var(--muted); opacity: 0.6; }
.conf-card .support { font-size: 0.8rem; color: var(--muted); background: none; padding: 0; margin-top: 6px; }
.conf-card .links { margin-top: 6px; font-size: 0.88rem; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--bg); color: var(--muted); margin-top: 40px;
  font-size: 0.84rem; border-top: 2px solid var(--rule);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 32px 20px 44px;
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center;
}
.site-footer strong { color: var(--navy); font-family: var(--font-serif); font-weight: 600; }
.site-footer a { color: var(--accent); }
.footer-ids { display: flex; gap: 16px; }
/* ==========================================================
   印刷（研究集会のプログラムは紙で配られることがある）
   ========================================================== */
@media print {
  /* 画面用の装飾・操作部品は落とす */
  .site-header, .site-footer, .nav, .nav-toggle,
  .back-link, .more-link, .year-jump, .hero canvas { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.7; }
  main { max-width: none; padding: 0; }
  section.block { padding: 0 0 12pt; }

  /* 見出しの直後で改ページさせない */
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; color: #000; }

  /* カード・講演・1日分のプログラムは途中で切らない */
  .card, .talk-card, .member-card, .conf-card, .day, figure, tr {
    page-break-inside: avoid; break-inside: avoid;
  }
  .card, .talk-card, .member-card, .conf-card {
    border: 1px solid #bbb; box-shadow: none; background: #fff;
  }
  .year-block .conf-card, .theme-card, #news .card { border: none; border-bottom: 1px solid #bbb; }

  /* 紙ではリンク先が分からないので URL を添える（外部リンクのみ） */
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 8.5pt; color: #555; word-break: break-all;
  }

  /* 見出し帯は枠線だけにして地色を使わない */
  .page-title, .hero {
    background: #fff !important; color: #000 !important;
    border-bottom: 1.5pt solid #000; padding: 0 0 8pt;
  }
  .page-title h1, .page-title .sub, .hero h1, .hero .en-name { color: #000 !important; }
  .page-title .inner { border-bottom: none; }   /* 上の 1.5pt の罫と二重にならないように */
  /* お知らせ全体は大きな枠なので、途中で改ページしてよい（丸ごと次ページへ送られて空白ができる） */
  #news .card { break-inside: auto; page-break-inside: auto; }

  .abstract, .talk-card .f.abst, .support { background: #f4f4f4; }

  /* 書影の色面：「背景を印刷しない」設定だと白文字が消えるので、紙では枠と黒文字にする */
  .book-cover { color: #000 !important; background: #fff !important; border: 1px solid #888; }
  .book-cover .bsub { opacity: 1; }

  /* 1日分のプログラムが長いと丸ごと次ページへ送られて大きな空白ができるので、日の途中で切ってよい。
     切れるのは講演の行と行のあいだだけ（tr は上で分割禁止） */
  .day { break-inside: auto; page-break-inside: auto; }
  table.program { display: table; overflow: visible; }
  table.program td.who { white-space: normal; }
  table.program thead { display: table-header-group; }   /* ページをまたいだら見出し行を繰り返す */

  /* 論文リストは、画面で絞り込んでいても紙には全件を出す（検索欄と件数は不要） */
  .pub-label, .pub-tools, .pub-count, .skip-link, .news-more summary { display: none !important; }
  #paper-list .pub-list li.hidden { display: block; }

  /* 研究テーマの線画：画面でまだ線を引いていない図も、紙には完成形で出す */
  .theme-fig path { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .theme-fig .f-dash { stroke-dasharray: 3 3 !important; }
}