/*
 * responsive.css
 * 既存の common.css / picture.css を上書き・補完するレスポンシブ対応CSS
 * ブレークポイント: 768px（タブレット）/ 480px（スマホ）
 */

/* =====================
   基本リセット・共通
   ===================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;        /* 水平スクロールを強制封印 */
  max-width: 100%;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;           /* 全iframeで共通 */
}

/* =====================
   common.css の固定幅上書き（全画面共通）
   ===================== */
figure.title-banner {
  min-width: 0;
  width: auto;
  max-width: 100%;
}

ul.header-nav {
  min-width: 0;
}

div#adress,
#adress {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* .article の min-width: 500px (common.css) を解除 → 横スクロール防止 */
.article,
.article2 {
  min-width: 0;
  max-width: 100%;
}

/* =====================
   ヘッダー（常に「画像｜リンク」の横並び）
   ===================== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 8px 16px;
}

/* タイトル画像は残り幅いっぱい（右のリンクぶんを除く） */
.title-banner {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.title-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 右上の大学・病院リンクは最小幅で縦積み */
.header-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =====================
   ナビゲーション
   ===================== */
.nav {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ハンバーガーボタン（デフォルト非表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: 0.3s;
}

/* =====================
   メインコンテンツ
   ===================== */
main {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.article {
  flex: 1 1 500px;
  min-width: 0;
}

.main-side {
  flex: 0 0 500px;
  min-width: 0;
}

/* =====================
   メンバー個人ページ 顔写真 (.pic_self)
   画像の元サイズが違っても 160x200 程度に統一
   ===================== */
.self {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: auto;                /* common.css の height:200px を解除 */
  flex-wrap: wrap;
}
figure.pic_self {
  float: none;                 /* common.css の float:left を解除 */
  width: 160px;
  height: 200px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
figure.pic_self img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 枠に収めてクロップ */
  display: block;
}
.self_name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* 名前・肩書の縦余白をゆったりに */
.self_name h1 {
  margin: 0 0 14px 0;
  line-height: 1.4;
}
.self_name h2 {
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.self_name h4 {
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* =====================
   メンバー個別ページの表
   ===================== */
/* 略歴・資格・所属学会 などの小タイトル(caption)を左寄せに */
table.staff caption,
table.staff2 caption,
table.staff3 caption {
  text-align: left;
  padding-left: 0;
  line-height: 2rem;
  margin-top: 8px;
}

/* 資格・所属学会・研究テーマ・ひとこと など staff2 の本文も左寄せに
   （common.css の text-align: center を解除） */
table.staff2 {
  text-align: left;
}
table.staff2 th,
table.staff2 td {
  text-align: left;
  padding: 4px 0;
  line-height: 1.6;
}

/* =====================
   スタッフ一覧(table.member): 名前を左寄せ・折り返し禁止
   iPhone等の狭幅画面でも名前が二段にならないように
   ===================== */
table.member {
  width: 100%;
  margin: 10px 0;
}
table.member td {
  text-align: left;
  padding: 0.5rem 0.4rem;
  font-size: 0.95rem;    /* member2 td と揃える */
  vertical-align: top;
}
table.member td:first-child {
  width: 1%;             /* 内容幅にフィット */
  white-space: nowrap;   /* 名前を必ず一行で表示 */
  padding-right: 1rem;
  font-size: 1.1rem;     /* member2 th と揃える */
  font-weight: bold;
  color: maroon;
}

/* =====================
   大学院4年以下(member2): 名前をスタッフ表と同じ見た目に
   ※ リンクなし・ホバー効果なし
   ===================== */
table.member2 {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px 0;
  width: 100%;
}
table.member2 th {
  width: 1%;             /* 内容幅にフィット */
  white-space: nowrap;   /* 名前を必ず一行で表示 */
  font-weight: bold;
  color: maroon;
  font-size: 1.1rem;
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 0.4rem;
  vertical-align: top;
}
table.member2 td {
  font-size: 0.85rem;
  padding: 0.15rem 0.4rem;
  line-height: 1.3;
  text-align: left;
  vertical-align: top;
}
/* 各メンバー表の下に区切り線（最終行の直下） */
table.member2 tr:last-child td,
table.member2 tr:last-child th {
  border-bottom: solid 1px #eee;
  padding-bottom: 0.5rem;
}

/* member.html: 2番目以降の section の先頭 h2/h3 (大学院4年・名誉教授など) の上に余白 */
section + section > h2:first-child,
section + section > h3:first-child {
  margin-top: 30px;
}

/* 2列テーブル: 左列は内容幅＋改行禁止 / 右列との隙間を小さく */
table.staff,
table.staff3 {
  width: 100%;
  border-collapse: collapse;
}
table.staff td,
table.staff3 td {
  padding: 4px 0;
  vertical-align: top;
}
table.staff td:first-child,
table.staff3 td:first-child {
  width: 1%;
  white-space: nowrap;
  padding-right: 12px;
}

/* data-href を持つ要素(スタッフ一覧の行など)をクリックしやすく */
[data-href] {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
tr[data-href]:hover,
tr[data-href]:focus {
  background-color: #f4eaea;
}

/* 記念誌サムネイル（クリックでPDFを開く） */
.kinen-wrap {
  margin: 16px 0;
  text-align: center;
}
.kinen-wrap a {
  display: inline-block;
  line-height: 0;            /* 下端の余白を詰める */
  border: 1px solid #aaa;
  padding: 4px;
  background: #fff;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kinen-wrap a:hover {
  transform: translateY(-2px);
  box-shadow: 3px 4px 10px rgba(0,0,0,0.25);
}
.kinen-wrap img {
  display: block;
  max-width: 280px;          /* サムネイルサイズ */
  width: 100%;
  height: auto;
}

/* Facebook 埋め込み（投稿・ページ共通） */
.fb-post-wrap,
.fb-page-wrap {
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;           /* 親の中で中央寄せ */
}
.fb-post-wrap iframe,
.fb-page-wrap iframe {
  display: block;
  max-width: 100% !important;
  width: 100% !important;
  height: auto;
}
.fb-post-wrap iframe { min-height: 546px; }
.fb-page-wrap iframe { min-height: 600px; }

/* Facebookページへのリンクボタン */
.fb-link {
  text-align: center;
  margin: 8px 0 0;
}
.fb-link a {
  display: inline-block;
  padding: 6px 12px;
  color: #1877f2;
  text-decoration: none;
  font-size: 0.9em;
}
.fb-link a:hover {
  text-decoration: underline;
}

/* =====================
   スライドショー（フェード切替・1200px中央・aspect-ratio固定）
   ===================== */
ul.slider {
  --slider-fade: 1500ms;
  --slider-ratio: 5 / 2;      /* 縦横比 横:縦 ※必要に応じて index.html のstyleで上書き */
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 20px auto 0;        /* ナビとの間に 20px のスペース */
  padding: 0;
  list-style: none;
  overflow: hidden;
  line-height: 0;
  aspect-ratio: var(--slider-ratio);
  background: #eee;           /* 画像読み込み中の見た目 */
}

/* =====================
   main 内の見出しの上マージン縮小（最新ニュース／リンク等）
   ===================== */
main .article h3 {
  margin-top: 0.5em;
  margin-bottom: 0.3em;
}

/* =====================
   最新ニュース（dl.timeline を一行表示）
   ===================== */
dl.timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px 0;
}

dl.timeline dt {
  flex: 0 0 auto;
  margin: 0;
}

dl.timeline dt .date {
  margin: 0;
  font-weight: bold;
  white-space: nowrap;
}

dl.timeline dd {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

/* 全スライドを重ねる */
ul.slider > li {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity var(--slider-fade) ease-in-out;
}

/* active のみ表示 */
ul.slider > li.active {
  opacity: 1;
}

ul.slider > li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================
   テーブル（スマホで横スクロール）
   ===================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.clinical {
  min-width: 400px;
  border-collapse: collapse;
}

table.clinical th,
table.clinical td {
  white-space: nowrap;
}

/* =====================
   フッター
   ===================== */
footer {
  padding: 16px;
  text-align: center;
}

/* =====================
   タブレット（768px以下）
   ===================== */
@media (max-width: 768px) {
  /* ヘッダーは横並びを維持（画像の横にリンク） */
  .header-nav {
    font-size: 0.85em;
  }

  main {
    flex-direction: column;
  }

  .main-side {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* =====================
   スマホ（480px以下）
   ===================== */
@media (max-width: 480px) {
  /* ハンバーガーボタンを表示 */
  .nav-toggle {
    display: flex;
  }

  /* ナビを縦に折りたたむ */
  .nav {
    flex-direction: column;
  }

  .nav-list {
    display: none;
    width: 100%;
  }

  /* nav-open クラスが付いたら展開 */
  .nav.nav-open .nav-list {
    display: block;
  }

  /* common.css の固定幅を狭い画面で完全に解除 */
  figure.title-banner {
    min-width: 0;
    width: auto;
  }

  ul.header-nav {
    min-width: 0;
    width: auto;
    font-size: 0.75em;
  }

  div#adress,
  #adress {
    width: auto;
    max-width: 100%;
    margin: 20px 0;
  }

  footer {
    font-size: 0.85em;
    text-align: left;
  }
}

/* =====================
   極小画面（500px以下）: 大学/附属病院リンクを非表示
   ===================== */
@media (max-width: 500px) {
  .header-nav,
  ul.header-nav,
  #header-placeholder .header-nav {
    display: none !important;
  }
}