/**
 * ==========================================================================
 * bioanalchem-project - Modern Semantic Web Architecture Style
 * 東京薬科大学 生命分析化学研究室 Webサイト共通スタイルシート
 *
 * 規約:
 * - セマンティックHTML5を前提とした完全新規設計
 * - CSS変数によるデザイントークン一元管理
 * - Flexbox / CSS Grid による完全レスポンシブレイアウト
 * - 過去の旧式テンプレートの記述・ハック・固定幅は一切不使用
 * ==========================================================================
 */

/* ==========================================================================
   1. CSS変数 (Custom Properties / Design Tokens)
   ========================================================================== */
:root {
  /* カラーパレット: アカデミック＆ライフサイエンスを想起させるディープブルー＆ティール */
  --color-primary: #1d4ed8;            /* メインアクセントブルー */
  --color-primary-dark: #1e3a8a;       /* ディープネイビー（重要見出し・ヘッダー背景） */
  --color-primary-light: #eff6ff;      /* 超淡色ブルー（ホバー・テーブル強調・バッジ背景） */
  --color-primary-accent: #0284c7;     /* 明るいシアンブルー（リンク・アクティブ状態） */
  --color-secondary: #0d9488;          /* サブカラー（ティールグリーン・生体・化学の清潔感） */
  --color-secondary-light: #f0fdfa;

  /* 背景色 */
  --color-bg-body: #f8fafc;            /* 全体背景（わずかに青みのあるクリーンなライトグレー） */
  --color-surface: #ffffff;            /* カード・メインコンテンツ背景 */
  --color-surface-subtle: #f1f5f9;     /* テーブルストライプ・タグ・薄い背景 */
  --color-sidebar-bg: #ffffff;         /* サイドバー背景 */
  
  /* テキスト色 */
  --color-text-main: #334155;          /* 本文テキスト（コントラストを保ちつつ目に優しいスレート） */
  --color-text-heading: #0f172a;       /* 見出しテキスト（高コントラストなダークネイビー） */
  --color-text-muted: #64748b;         /* 補足・日付・弱強調 */
  --color-text-inverse: #ffffff;       /* 反転色（ヘッダー・ボタン・アクティブタグ等） */

  /* ボーダー・分割線 */
  --color-border: #e2e8f0;             /* 基本ボーダー */
  --color-border-light: #f1f5f9;       /* 控えめなボーダー */
  --color-border-focus: #3b82f6;       /* フォーカス時ボーダー */

  /* タイポグラフィ */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-root: 16px;
  --font-size-sm: 0.875rem;            /* 14px */
  --font-size-base: 1rem;              /* 16px */
  --font-size-lg: 1.125rem;            /* 18px */
  --font-size-xl: 1.25rem;             /* 20px */
  --font-size-2xl: 1.5rem;             /* 24px */
  --font-size-3xl: 1.875rem;           /* 30px */
  --line-height-base: 1.75;
  --line-height-tight: 1.35;

  /* スペーシング（ベーススペース単位: 4px / 8px 基準） */
  --space-2xs: 0.25rem;                /* 4px */
  --space-xs: 0.5rem;                  /* 8px */
  --space-sm: 0.75rem;                 /* 12px */
  --space-md: 1rem;                    /* 16px */
  --space-lg: 1.5rem;                  /* 24px */
  --space-xl: 2rem;                    /* 32px */
  --space-2xl: 3rem;                   /* 48px */

  /* レイアウト最大幅 */
  --max-width: 1120px;
  --sidebar-width: 280px;

  /* 角丸 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ボックスシャドウ */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* アニメーション・トランジション */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;

  /* スライダー動的変数デフォルト値（build_site.py が master.xlsx の slider シート行数に応じて自動設定） */
  --slide-count: 7;
  --slide-duration: 28s;
}

/* ==========================================================================
   2. リセット & ベーススタイル
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-root);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  word-break: break-word;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
  overflow-wrap: anywhere;
  word-break: break-word;
}

a:hover {
  color: var(--color-primary-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* 見出し群 */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  line-height: var(--line-height-tight);
  font-weight: 700;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-base); }

p {
  margin-bottom: var(--space-md);
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-2xs);
}

/* ==========================================================================
   3. 全体レイアウトアーキテクチャ
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ヘッダー */
.site-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-md);
  gap: var(--space-lg);
}

.brand-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.university-affiliation {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.site-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover {
  color: var(--color-primary);
}

/* グローバルナビゲーション */
.global-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.nav-list {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.nav-item {
  margin-bottom: 0;
}

.nav-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-main);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-item a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.nav-item a[aria-current="page"],
.nav-item a.active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* メインラッパー（2カラムグリッド） */
.site-main {
  flex: 1;
  padding-block: var(--space-xl);
}

.layout-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: var(--space-xl);
  align-items: start;
  min-width: 0;
}

/* 1カラム表示用（トップページやワイドビューが必要な場合） */
.layout-container.single-column {
  grid-template-columns: minmax(0, 1fr);
}

/* メインコンテンツ領域 */
.main-content {
  min-width: 0;
  max-width: 100%;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* サイドバー領域（PC表示時はスクロールしても画面右側に追従し、いつでもカテゴリ切替可能） */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  position: sticky;
  top: 6.75rem;
}

/* ドロワー制御用要素（PC表示 769px以上ではすべて非表示とし2カラム常時表示を維持） */
.drawer-checkbox,
.drawer-fab,
.drawer-overlay,
.drawer-header {
  display: none;
}

.sidebar-widget {
  background-color: var(--color-sidebar-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.sidebar-widget-title {
  font-size: var(--font-size-base);
  color: var(--color-primary-dark);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary-light);
  font-weight: 700;
}

/* サイドバー・サブナビゲーションリスト */
.sub-nav-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.sub-nav-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-main);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.sub-nav-list a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateX(2px);
}

.sub-nav-list a[aria-current="page"],
.sub-nav-list a.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  border-left: 3px solid var(--color-primary);
}

.sub-nav-badge {
  font-size: 0.75rem;
  background-color: var(--color-surface-subtle);
  color: var(--color-text-muted);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ==========================================================================
   4. UIコンポーネント
   ========================================================================== */

/* --- ページヘッダー・タイトル装飾 --- */
.page-title {
  font-size: var(--font-size-2xl);
  color: var(--color-primary-dark);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 3px solid var(--color-primary);
  position: relative;
}

.section-title {
  font-size: var(--font-size-xl);
  color: var(--color-text-heading);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 4px solid var(--color-secondary);
}

.subsection-title {
  font-size: var(--font-size-lg);
  color: var(--color-primary-dark);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

/* --- レスポンシブ・ヒーロースライダー (.slider-container) ---
   master.xlsx の slider シート行数に応じて --slide-count / --slide-duration と
   @keyframes heroSlideLoop がビルド時に動的生成されるため、枚数増減時も手動CSS修正不要 */
.slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
  background-color: var(--color-surface-subtle);
}

.slider-track {
  display: flex;
  width: calc(var(--slide-count, 1) * 100%);
  height: 100%;
  animation: heroSlideLoop var(--slide-duration, 20s) infinite ease-in-out;
}

.slider-container:hover .slider-track,
.slider-container:focus-within .slider-track {
  animation-play-state: paused;
}

.slide-item {
  width: calc(100% / var(--slide-count, 1));
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0) 100%);
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.slide-caption .author-highlight {
  color: #ffffff;
  text-decoration-color: #60a5fa;
  background-color: rgba(255, 255, 255, 0.15);
}

/* DYNAMIC_SLIDER_KEYFRAMES_START */
@keyframes heroSlideLoop {
  0.00%, 11.43% { transform: translateX(-0.0000%); }
  14.29%, 25.71% { transform: translateX(-14.2857%); }
  28.57%, 40.00% { transform: translateX(-28.5714%); }
  42.86%, 54.29% { transform: translateX(-42.8571%); }
  57.14%, 68.57% { transform: translateX(-57.1429%); }
  71.43%, 82.86% { transform: translateX(-71.4286%); }
  85.71%, 97.14% { transform: translateX(-85.7143%); }
  100.00% { transform: translateX(0.0000%); }
}
/* DYNAMIC_SLIDER_KEYFRAMES_END */

/* --- 洗練されたアコーディオン (.details-accordion) --- */
.details-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.details-accordion:hover {
  border-color: var(--color-primary-accent);
}

.details-accordion[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.details-accordion > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: var(--font-size-lg);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color var(--transition-fast);
}

.details-accordion > summary::-webkit-details-marker {
  display: none;
}

.details-accordion > summary:hover {
  background-color: var(--color-primary-light);
}

.details-accordion > summary:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.details-accordion > summary::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

.details-accordion[open] > summary::after {
  transform: rotate(-135deg);
}

.details-accordion .accordion-content {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  line-height: var(--line-height-base);
}

.accordion-section-item {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px dashed var(--color-border);
}

.accordion-section-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.accordion-section-body {
  flex: 1;
  min-width: 0;
}

.accordion-section-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

.accordion-section-img {
  width: 240px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* --- 業績・外部資金テーブル (.data-table) --- */
.table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
}

.data-table th,
.data-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.data-table th {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-heading);
  font-weight: 700;
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
  background-color: rgba(241, 245, 249, 0.4);
}

.data-table tbody tr:hover {
  background-color: var(--color-primary-light);
}

/* カラムごとの比率・幅指定 */
.data-table .col-no {
  width: 4.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.data-table .col-year {
  width: 4.5rem;
  text-align: center;
  color: var(--color-text-muted);
}

.data-table .col-period {
  width: 13rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.data-table .col-authors {
  width: 24%;
}

.data-table .col-title {
  font-weight: 600;
  color: var(--color-text-heading);
}

.data-table .col-journal {
  width: 20%;
  font-style: italic;
  color: var(--color-text-muted);
}

.data-table .col-doi {
  width: 4.5rem;
  text-align: center;
}

.data-table .col-program {
  width: 7rem;
}

.data-table .col-division {
  width: 9rem;
}

.data-table .col-org-name {
  width: 42%;
}

/* PC表示時の原著論文テーブル (ach1.html) 列幅バランス最適化（論文題目列を広く確保し縦伸びを防止） */
@media (min-width: 769px) {
  .ach1-table th,
  .ach1-table td {
    padding: 0.75rem 0.6rem;
  }

  .ach1-table .col-no {
    width: 3.1rem;
  }

  .ach1-table .col-year {
    width: 3.6rem;
  }

  .ach1-table .col-authors {
    width: 21%;
  }

  .ach1-table .col-title {
    width: 42%;
    line-height: 1.55;
  }

  .ach1-table .col-journal {
    width: 15%;
  }

  .ach1-table .col-doi {
    width: 3.8rem;
  }
}

/* DOIリンクボタンスタイル */
.doi-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid rgba(29, 78, 216, 0.2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.doi-badge:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* --- 著者強調ハイライト (.author-highlight) --- */
.author-highlight {
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background-color: rgba(29, 78, 216, 0.06);
  padding-inline: 0.2em;
  border-radius: var(--radius-sm);
}

/* --- ニュース・What's New リスト（スクロールボックス） --- */
.news-list {
  list-style: none;
  padding: var(--space-xs) var(--space-lg);
  margin-bottom: 0;
  max-height: 480px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.news-item {
  display: flex;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.news-item:last-child {
  border-bottom: none;
}

.news-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 110px;
  flex-shrink: 0;
}

.news-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.news-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.news-badge.award {
  background-color: #fef3c7;
  color: #92400e;
}

.news-content {
  flex: 1;
  min-width: 0;
}

.news-title {
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2xs);
}

.news-authors {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- プロフィール・情報カード --- */
.profile-card {
  display: flex;
  gap: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.profile-avatar {
  width: 180px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.profile-details {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2xs);
}

.profile-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

/* --- カード・グリッドUI --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-block: var(--space-lg);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-accent);
}

.card-title {
  font-size: var(--font-size-lg);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-xs);
  font-weight: 700;
}

/* ==========================================================================
   5. フッター (Footer)
   ========================================================================== */
.site-footer {
  background-color: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg);
  margin-top: auto;
  border-top: 4px solid var(--color-primary);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.footer-brand {
  max-width: 480px;
}

.footer-title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.footer-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: rgba(255, 255, 255, 0.75);
}

.footer-nav-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-nav-list a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer-nav-list a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-md);
  text-align: center;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   6. レスポンシブ設計 (@media max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* タイポグラフィ調整 */
  :root {
    --font-size-2xl: 1.25rem;
    --font-size-xl: 1.125rem;
    --space-xl: 1.25rem;
  }

  /* ヘッダー・ナビゲーションの375px完全対応＆省スペース化（スクロール時の読書エリア拡大） */
  .site-header {
    position: relative;
  }

  .header-inner {
    flex-direction: column;
    align-items: stretch;
    padding-block: 0.55rem;
    gap: 0.35rem;
  }

  .university-affiliation {
    font-size: 0.75rem;
  }

  .site-title {
    font-size: 1.25rem;
  }

  .global-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .nav-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  .nav-item {
    min-width: 0;
  }

  .nav-item a {
    display: flex;
    width: 100%;
    padding: 0.35rem 0.2rem;
    font-size: 0.8125rem;
    text-align: center;
    background-color: var(--color-surface-subtle);
    border-radius: var(--radius-sm);
  }

  .site-main {
    padding-block: var(--space-lg) 2.5rem;
  }

  /* 2カラムから1カラムレイアウトへの切り替え */
  .layout-container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* 一般ページ（非対象ページ）のサイドバーは下部に押しやらずスマホ時は非表示 */
  .sidebar-general {
    display: none;
  }

  /* 対象ページ（業績 ach1〜ach9・外部資金 funds〜funds3）の追従ボタン＆開閉式ドロワーメニュー */
  .drawer-checkbox {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  .drawer-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: fixed;
    right: 0.875rem;
    bottom: 1rem;
    z-index: 900;
    padding: 0.55rem 0.95rem;
    background-color: rgba(30, 58, 138, 0.94);
    backdrop-filter: blur(6px);
    color: var(--color-text-inverse);
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
    cursor: pointer;
    user-select: none;
    transition: transform var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
  }

  .drawer-fab:hover,
  .drawer-fab:active {
    background-color: var(--color-primary);
    transform: translateY(-2px);
  }

  .drawer-fab-icon {
    flex-shrink: 0;
  }

  .drawer-checkbox:checked ~ .drawer-fab {
    opacity: 0;
    pointer-events: none;
  }

  .drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
  }

  .drawer-checkbox:checked ~ .drawer-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar.sidebar-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: min(310px, 86vw);
    max-width: 100vw;
    background-color: var(--color-surface);
    padding: var(--space-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.25);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition-normal), visibility var(--transition-normal);
  }

  .drawer-checkbox:checked ~ .sidebar.sidebar-drawer {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-primary);
  }

  .drawer-header-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary-dark);
  }

  .drawer-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.65rem;
    background-color: var(--color-surface-subtle);
    color: var(--color-text-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .drawer-close-btn:hover,
  .drawer-close-btn:active {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
  }

  body:has(.drawer-checkbox:checked) {
    overflow: hidden;
  }

  .main-content {
    min-width: 0;
    max-width: 100%;
    padding: var(--space-md);
  }

  .layout-container:has(.drawer-fab) .main-content {
    padding-bottom: 4.25rem;
  }

  /* スライダーのモバイル最適化 */
  .slider-container {
    aspect-ratio: 4 / 3;
    max-height: 280px;
  }

  .slide-caption {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-md);
  }

  /* アコーディオン内アイテムの縦積み */
  .details-accordion > summary {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
  }

  .details-accordion .accordion-content {
    padding: var(--space-md);
  }

  .accordion-section-item {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .accordion-section-img {
    width: 100%;
    max-width: 100%;
  }

  /* テーブルのモバイル最適化（375pxで横スクロール不要・1文字落ち防止・全文視認可能化） */
  .data-table th,
  .data-table td {
    padding: 0.65rem 0.55rem;
    font-size: 0.8125rem;
  }

  .data-table .col-no {
    width: 3rem;
  }

  .data-table .col-period {
    width: 6.25rem;
    white-space: nowrap;
  }

  .data-table .col-program {
    width: 3.75rem;
    white-space: nowrap;
  }

  .data-table .col-division {
    width: 6.25rem;
    white-space: nowrap;
  }

  .data-table:has(.col-program) td:not(:last-child) {
    white-space: nowrap;
  }

  .data-table .col-org-name {
    width: 42%;
  }

  /* 外部資金テーブル (funds.html / funds2.html) とリンク集テーブル (link.html) もモバイルでカード型に展開 */
  .funds-table,
  .funds-table tbody,
  .link-section .data-table,
  .link-section .data-table tbody {
    display: block;
    width: 100%;
  }

  .funds-table thead,
  .link-section .data-table thead {
    display: none;
  }

  .funds-table tbody tr,
  .link-section .data-table tbody tr {
    display: block;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
  }

  .funds-table tbody tr:last-child,
  .link-section .data-table tbody tr:last-child {
    border-bottom: none;
  }

  .funds-table tbody td,
  .link-section .data-table tbody td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: none;
  }

  .funds-table .col-period {
    width: 100%;
    white-space: normal;
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
  }

  .link-section .data-table tbody td:first-child {
    margin-bottom: 0.2rem;
    font-size: 0.875rem;
  }

  .link-section .data-table tbody td:last-child {
    font-size: 0.78rem;
  }

  /* ach1（原著論文6列テーブル）はモバイルでカード形式に自動展開しタイトルや著者を100%表示 */
  .ach1-table,
  .ach1-table tbody {
    display: block;
    width: 100%;
  }

  .ach1-table thead {
    display: none;
  }

  .ach1-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
  }

  .ach1-table tbody tr:last-child {
    border-bottom: none;
  }

  .ach1-table tbody td {
    display: block;
    padding: 0;
    border-bottom: none;
    width: 100%;
    text-align: left;
  }

  .ach1-table .col-no,
  .ach1-table .col-year,
  .ach1-table .col-doi {
    width: auto;
    display: inline-block;
  }

  .ach1-table .col-no {
    background-color: var(--color-primary-light);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
  }

  .ach1-table .col-no::before {
    content: "No.";
  }

  .ach1-table .col-year {
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--color-surface-subtle);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
  }

  .ach1-table .col-title {
    order: 3;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .ach1-table .col-authors {
    order: 4;
    width: 100%;
    font-size: 0.8125rem;
    color: var(--color-text-main);
  }

  .ach1-table .col-journal {
    order: 5;
    width: 100%;
    font-size: 0.75rem;
  }

  .ach1-table .col-doi {
    order: 2;
    margin-left: auto;
  }

  /* プロフィールカードの縦積み */
  .profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
  }

  .profile-avatar {
    width: 140px;
    height: 170px;
  }

  /* ニュースリストの配置 */
  .news-list {
    padding: var(--space-xs) var(--space-md);
    max-height: 440px;
  }

  .news-item {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .news-meta {
    flex-direction: row;
    align-items: center;
  }

  /* フッターのレイアウト（追従ボタンと最下部テキストの重なり防止余白を確保） */
  .site-footer {
    padding-bottom: 4.5rem;
  }

  .footer-inner {
    flex-direction: column;
    gap: var(--space-lg);
  }
}