/* ========== Global Font Settings (Noto Sans JP + Inter) ========== */
body {
  margin: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #0f172a;
  font-weight: 300;  /* ★追加：通常は 400（細め） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 英語部分も Noto Sans JP に統一（letter-spacing のみ調整） */
.en,
.brand-en,
.brand-affiliation-en,
span[lang="en"],
.hero .en,
.section-title .en {
  letter-spacing: -0.01em;
}

/* 見出し（Noto Sans JP に統一） */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ヘッダーのブランド部分 */
.brand-ja,
.brand-affiliation-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;  /* 500 → 400 に（細く） */
}

.brand-en,
.brand-affiliation-en {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
}

/* ナビゲーション */
.nav a {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
/* .en { opacity: .9; } */

.nav { display: flex; gap: 14px; flex-wrap: wrap; padding: 16px 24px; }
.nav a { text-decoration: none; color: #111; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card { border: 1px solid #e6e6e6; border-radius: 14px; padding: 16px; background: #fff; }
.card time { display: block; color: #666; font-size: 0.95rem; margin-bottom: 8px; }
.tags { color: #666; font-size: 0.9rem; }
.btn { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #111; color: #fff; text-decoration: none; }

/* ===== Hero (video) ===== */
.hero {
  position: relative;
  width: 100%;
  height: min(72vh, 720px);
  overflow: hidden;
  border-radius: 16px;
  margin: 16px 0 24px;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 40px 28px;
  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.10) 100%
  );
}

.hero-overlay h1 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0.2px;
}

.hero-overlay p {
  margin: 0;
  max-width: 920px;
}

.hero-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn.primary {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.30);
}

@media (max-width: 640px) {
  .hero {
    height: 70vh;  /* ← 100vh → 70vh に縮小（画面の70%の高さ） */
    min-height: 500px;  /* ← 600px → 500px に縮小 */
    border-radius: 12px;
  }
  
  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hero-overlay {
    padding: 28px 18px;
    justify-content: center;
  }
  
  /* ヒーローのテキストサイズをスマホ用に調整 */
  .hero-overlay h1 {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    line-height: 1.3;
  }
  
  .hero-overlay p {
    font-size: clamp(0.85rem, 3vw, 0.95rem) !important;
    line-height: 1.6;
  }
  
  /* ボタンのサイズも調整 */
  .hero-buttons {
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }
  
  .hero .btn {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    padding: 12px 16px;
  }
}


/* ===== Quality polish (Hero / Buttons / Accessibility) ===== */

/* ボタンの基本品質（borderがないと primary の border-color が効かないことがある） */
.btn {
  border: 1px solid transparent;
  transition: transform .06s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid rgba(255,255,255,0.75);
  outline-offset: 2px;
}

/* primary ボタン：枠線を確実に出す */
.btn.primary {
  border: 1px solid rgba(255, 255, 255, 0.30);
}

/* ヒーローの文字可読性：テキスト影 */
.hero-overlay h1,
.hero-overlay p {
  text-shadow: 0 2px 14px rgba(0,0,0,0.50);
}

/* ヒーロー内の文字サイズを少し整える（好みで調整OK） */
.hero-overlay h1 {
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem);
}

.hero-overlay p {
  font-size: clamp(0.98rem, 0.5vw + 0.9rem, 1.15rem);
}

/* ナビ：薄い下線で区切って“サイト感”を出す（任意） */
.nav {
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}


/* ===== Members page ===== */
.figure { margin: 12px 0 20px; }

.figure-img{
  width: 100%;
  max-height: 520px;      /* 大きすぎ防止（好みで 420/640 に調整可） */
  height: auto;
  object-fit: contain;     /* 切らずに全体表示 */
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  display: block;
  background: #f6f6f6;     /* 余白が出た時に見た目を整える */
}

.figure-cap { margin-top: 8px; color: #555; font-size: 0.95rem; }

/* スマホだけ少し小さく（任意だが推奨） */
@media (max-width: 640px){
  .figure-img{ max-height: 360px; }
}

/* ===== Members: PI photo (DEM-like) ===== */
.pi-card{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  margin-bottom: 18px;
}

.pi-grid{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
}

.pi-photo img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  display: block;
  background: #f6f6f6;
}

.pi-name-ja{
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.pi-affil{
  color: #333;
  margin-top: 8px;
  line-height: 1.5;
}

.pi-links a{
  margin-right: 12px;
}

@media (max-width: 640px){
  .pi-grid{ grid-template-columns: 1fr; }
  .pi-photo img{ max-width: 220px; }
}

/* ===== Members: Staff/Students list as cards (no photos) ===== */
.members{
  list-style: none;   /* ← 箇条書き（・）を消す */
  padding-left: 0;
  margin: 12px 0 18px;
  display: grid;
  gap: 10px;
}

.members li{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.members .role{
  display: inline-block;
  font-size: 0.9rem;
  color: #666;
  margin-right: 10px;
}

.members .name-ja{
  font-weight: 600;
}

/* ===== Members: PI links spacing ===== */
.pi-links{
  margin: 10px 0 0;
}

.pi-links a{
  display: inline-block;
  margin-right: 12px;
}


/* ===== Access page ===== */
.access-block{ margin: 18px 0 22px; }

.access-card{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
}

.addr-ja, .addr-en{
  margin: 0;
  line-height: 1.65;
}

.access-card a{
  word-break: break-all;
}

/* ===== Research: layout & media grid ===== */
.research-block{ margin: 18px 0 22px; }

.pillar{ margin: 14px 0; }

.media-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.media-placeholder{
  width: 100%;
  height: 180px;
  border-radius: 12px;
  border: 1px dashed #cfcfcf;
  background: #fafafa;
  color: #777;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.media figcaption{
  margin-top: 8px;
  color: #333;
  line-height: 1.45;
}

.plain-list{
  margin: 10px 0 0;
  padding-left: 18px;
}

.media-video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background: #000;
}

/* ===== Research: embedded image ===== */
.media-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background: #fff;
}

/* ===== News cards layout (Home) ===== */
.news-block {
  margin-top: 28px;
}

.news-block h2 {
  margin: 0 0 12px;
}

/* 1列→2列→3列に伸びるカードグリッド */
.news-block .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 10px 0 14px;
}

/* 画面幅で列数を増やす */
@media (min-width: 720px) {
  .news-block .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 1100px) {
  .news-block .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* カードの見た目 */
.news-block .card {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* カード内のタイポ */
.news-block .card time {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.news-block .card h3 {
  margin: 0 0 10px;
  line-height: 1.35;
  font-size: 16px;
}

.news-block .card p {
  margin: 0 0 12px;
  line-height: 1.7;
  font-size: 14px;
}

/* ボタンはカード下に揃える（カード高さが揃いやすい） */
.news-block .card {
  display: flex;
  flex-direction: column;
}
.news-block .card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* 「すべてのNewsを見る」リンクの余白 */
.news-block > p {
  margin: 0;
}

/* ===== Hero readability improvements (clean) ===== */
/* 目的：配置は既存のまま（absolute/inset:0）維持し、可読性だけ上げる */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* 既存 .hero-overlay が全面にかぶさる設計を維持する（重要） */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 40px 28px;

  color: #fff;

  /* 暗幕は overlay 側で管理（今のあなたの設計と整合） */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.10) 100%
  );
}

/* 文字の視認性（影） */
.hero-overlay h1,
.hero-overlay p {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}

/* 本文 */
.hero-overlay p {
  max-width: 920px;
  line-height: 1.7;
}

/* CTAボタン */
.hero-overlay .btn {
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

/* モバイル */
@media (max-width: 640px) {
  .hero-overlay {
    padding: 28px 18px;
  }
}


/* =========================================================
   Theme: Deep Teal (Level 2)
   - Accent: #0F766E
   - Link/CTA: #0B5F59
   - Background tint: #F3FBFA
   ========================================================= */

:root{
  --accent: #0F766E;
  --accent-2: #0B5F59;
  --bg: #F3FBFA;
  --text: #0F172A;
  --muted: rgba(15, 23, 42, 0.72);
  --border: rgba(15, 118, 110, 0.18);
  --card: #FFFFFF;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* 背景を“真っ白→オフホワイト”へ（紙っぽい質感） */
body{
  background: var(--bg);
  color: var(--text);
}

/* コンテナの見え方を少し上品に（余白の体感を整える） */
.container{
  padding: 26px;
}

/* リンク（デフォルトの青を、研究室カラーへ） */
a{
  color: var(--accent-2);
  text-decoration-color: rgba(15, 118, 110, 0.35);
  text-underline-offset: 3px;
}
a:hover{
  color: var(--accent);
  text-decoration-color: rgba(15, 118, 110, 0.55);
}

/* ナビ：シンプルのまま“少しだけ洗練” */
.nav{
  border-bottom: 1px solid rgba(15, 118, 110, 0.14);
}
.nav a{
  color: var(--text);
  opacity: 0.92;
}
.nav a:hover{
  color: var(--accent-2);
}

/* 見出し：細いアクセントラインで“セクション感” */
h2{
  position: relative;
  padding-bottom: 8px;
}
h2::after{
  content:"";
  display:block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), rgba(15,118,110,0.25));
}

/* ボタン：黒ベタから“Teal”へ（primaryは薄いTeal） */
.btn{
  background: var(--accent-2);
  border-color: rgba(15,118,110,0.25);
  box-shadow: 0 10px 22px rgba(15,118,110,0.16);
}
.btn:hover{
  filter: brightness(1.03);
}

.btn.primary{
  background: rgba(15,118,110,0.14);
  border-color: rgba(15,118,110,0.28);
  color: #ffffff;            /* ヒーロー上で白文字を維持したい場合 */
}

/* カード：枠と影をTealトーンで統一（やりすぎない） */
.card{
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* News：日付をアクセント色で（視線誘導） */
.news-block .card time{
  color: var(--accent-2);
  opacity: 0.9;
  font-weight: 600;
}

/* “View all news” を控えめなラベルっぽく */
.news-block > p a{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.95rem;
  color: var(--accent-2);
}

/* 英語（.en）を少しだけ“洗練” */
.en{
  /* opacity: 0.88; ← 削除 */
  letter-spacing: 0.1px;
}

/* =========================================================
   Theme: Deep Teal (Level 2)
   - Accent: #0F766E
   - Link/CTA: #0B5F59
   - Background tint: #F3FBFA
   ========================================================= */

:root{
  --accent: #0F766E;
  --accent-2: #0B5F59;
  --bg: #F3FBFA;
  --text: #0F172A;
  --muted: rgba(15, 23, 42, 0.72);
  --border: rgba(15, 118, 110, 0.18);
  --card: #FFFFFF;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* 背景を“真っ白→オフホワイト”へ（紙っぽい質感） */
body{
  background: var(--bg);
  color: var(--text);
}

/* コンテナの見え方を少し上品に（余白の体感を整える） */
.container{
  padding: 26px;
}

/* リンク（デフォルトの青を、研究室カラーへ） */
a{
  color: var(--accent-2);
  text-decoration-color: rgba(15, 118, 110, 0.35);
  text-underline-offset: 3px;
}
a:hover{
  color: var(--accent);
  text-decoration-color: rgba(15, 118, 110, 0.55);
}

/* ナビ：シンプルのまま“少しだけ洗練” */
.nav{
  border-bottom: 1px solid rgba(15, 118, 110, 0.14);
}
.nav a{
  color: var(--text);
  opacity: 0.92;
}
.nav a:hover{
  color: var(--accent-2);
}

/* 見出し：細いアクセントラインで“セクション感” */
h2{
  position: relative;
  padding-bottom: 8px;
}
h2::after{
  content:"";
  display:block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), rgba(15,118,110,0.25));
}

/* ボタン：黒ベタから“Teal”へ（primaryは薄いTeal） */
.btn{
  background: var(--accent-2);
  border-color: rgba(15,118,110,0.25);
  box-shadow: 0 10px 22px rgba(15,118,110,0.16);
}
.btn:hover{
  filter: brightness(1.03);
}

.btn.primary{
  background: rgba(15,118,110,0.14);
  border-color: rgba(15,118,110,0.28);
  color: #ffffff;            /* ヒーロー上で白文字を維持したい場合 */
}

/* カード：枠と影をTealトーンで統一（やりすぎない） */
.card{
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* News：日付をアクセント色で（視線誘導） */
.news-block .card time{
  color: var(--accent-2);
  opacity: 0.9;
  font-weight: 600;
}

/* “View all news” を控えめなラベルっぽく */
.news-block > p a{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.95rem;
  color: var(--accent-2);
}

/* 英語（.en）を少しだけ“洗練” */
.en{
  /* opacity: 0.88; ← 削除 */
  letter-spacing: 0.1px;
}

/* =========================================================
   Modern/Tech polish (B: Deep Teal) — add-on
   目的：余白は維持しつつ、線・面・微細な光で“先進感”
   ========================================================= */

/* 1) 全体の微調整（読みやすさ） */
:root{
  --radius: 14px;
  --radius-lg: 18px;
  --grid: rgba(15,118,110,0.10);
  --glass: rgba(255,255,255,0.70);
  --glass-strong: rgba(255,255,255,0.88);
  --shadow-tech: 0 14px 40px rgba(15, 23, 42, 0.08);
}

/* 2) 背景に“極薄グリッド感”（テックっぽさ：ほぼ気づかない程度） */
body{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(15,118,110,0.10), transparent 55%),
    radial-gradient(900px 500px at 85% 10%, rgba(15,118,110,0.08), transparent 55%),
    var(--bg);
}

/* 3) ナビ：ホバーをテック寄り（下線ではなくライン） */
.nav a{
  position: relative;
  padding: 6px 2px;
}
.nav a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(15,118,110,0.0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  opacity: .9;
}
.nav a:hover::after{
  transform: scaleX(1);
}

/* 4) セクション見出し：細いTealライン＋小さなラベル感 */
h2{
  letter-spacing: .2px;
}
h2::after{
  width: 72px;
  height: 3px;
}

/* 5) Newsブロック：面（glass）にして“編集デザイン感”を付与 */
.news-block{
  background: var(--glass);
  border: 1px solid rgba(15,118,110,0.16);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow-tech);
  backdrop-filter: blur(6px);
}

/* 6) Newsカード：左にアクセントラインで“視線誘導”（テックっぽい） */
.news-block .card{
  border-radius: var(--radius);
  background: var(--glass-strong);
  border: 1px solid rgba(15,118,110,0.16);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.news-block .card::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), rgba(15,118,110,0.25));
}

/* 7) 日付・タイトル：情報の階層を明確に */
.news-block .card time{
  font-feature-settings: "tnum";
  letter-spacing: .2px;
}
.news-block .card h3{
  font-weight: 720;
}

/* 8) ボタン：主CTAだけ“控えめグロー”で先進感 */
.btn{
  border-radius: 999px;
}
.btn:hover{
  box-shadow: 0 16px 30px rgba(15,118,110,0.18);
}

/* primary（薄いTeal）を少し“ガラス”に寄せる */
.btn.primary{
  background: rgba(15,118,110,0.16);
  border-color: rgba(15,118,110,0.30);
}

/* 9) 英語（.en）を少し“プロダクト風”に */
.en{
  /* opacity: .86; ← 削除 */
  letter-spacing: .25px;
}

/* =========================================================
   Headings System (Level 2/Modern) — Deep Teal
   目的：h2/h3の階層と余白・装飾を全ページで統一
   ========================================================= */

:root{
  --h2-size: clamp(1.25rem, 1.2vw + 1rem, 1.55rem);
  --h3-size: clamp(1.02rem, 0.6vw + 0.95rem, 1.18rem);
  --lead-size: clamp(0.98rem, 0.4vw + 0.92rem, 1.08rem);

  --heading-weight: 760;
  --subheading-weight: 700;

  --heading-gap: 14px;      /* 見出し上下の基準余白 */
  --section-gap: 24px;      /* セクション間の基準余白 */
}

/* セクション間の“呼吸”を統一（ページ全体が整って見える） */
section{
  margin-top: var(--section-gap);
}

/* h2：ページ内の大見出し */
h2{
  font-size: var(--h2-size);
  font-weight: var(--heading-weight);
  letter-spacing: 0.2px;
  line-height: 1.25;

  margin: 0 0 var(--heading-gap);
  padding-bottom: 10px;
  position: relative;
}

/* h2のアクセント（細いTealライン） */
h2::after{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), rgba(15,118,110,0.22));
}

/* h3：カードやサブセクションの見出し */
h3{
  font-size: var(--h3-size);
  font-weight: var(--subheading-weight);
  letter-spacing: 0.1px;
  line-height: 1.35;
  margin: 0 0 10px;
}

/* “小見出しっぽい段落”のリード文 */
.lead{
  font-size: var(--lead-size);
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 14px;
}

/* 日英併記（.en）を “サブタイトル” として統一 */
h1 .en, h2 .en, h3 .en{
  display: inline-block;
  font-weight: 520;
  letter-spacing: 0.35px;
  opacity: 0.86;
}

/* 見出し直下の段落の読みやすさ（文章が多い研究室サイト向け） */
h2 + p,
h3 + p{
  margin-top: -4px;
}

/* リンクの下線と見出しアクセントの整合性 */
a{
  text-decoration-thickness: 1.5px;
}

/* ヒーロー以外の本文の行間を“研究室サイト向け”に安定化 */
p{
  line-height: 1.75;
}

/* ナビは下線ではなく擬似要素ラインで表現する */
.nav a,
.nav a:hover{
  text-decoration: none;
}

/* ===== Research: For students section polishing ===== */
#students .card{
  padding: 22px 22px;
  max-width: 980px;         /* 行長を抑えて読みやすく */
}

/* カード内の見出し（h3）を“区切り”として機能させる */
#students .card h3{
  margin: 18px 0 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(15,118,110,0.14); /* 薄い区切り線 */
}
#students .card h3:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* 段落の余白と行間 */
#students .card p{
  margin: 0 0 12px;
  line-height: 1.8;
}

/* 箇条書きの読みやすさ */
#students .card .plain-list{
  margin: 8px 0 14px;
  padding-left: 18px;
}
#students .card .plain-list li{
  margin: 0 0 12px;        /* 項目間の余白 */
  line-height: 1.75;
}

/* 英語は“補足”として少し控えめに */
#students .card .en{
  display: block;
  margin-top: 4px;
  font-size: 0.95em;
  opacity: 0.78;
}

/* strongを少しだけ締める（箇条書きの見出し感） */
#students .card strong{
  color: var(--text);
}

/* =========================================================
   Publications (Readability tuning)
   ========================================================= */
.pubs {
  /* セクション全体の呼吸を少し増やす */
  padding-block: 0.5rem 1.25rem;
}

/* 年見出し（2017, 2018...）の余白を増やしてブロック感を出す */
.pubs > h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* 最初の年見出しだけは上を詰めすぎない程度に */
.pubs > h2:first-of-type {
  margin-top: 1rem;
}

/* リスト全体の左余白・上下余白を整理 */
.pubs .pub-list {
  margin: 0 0 1.25rem;
  padding-left: 1.2rem; /* 既存のマーカー位置を整える */
}

/* 1本ごとの行間と間隔（ここが主目的） */
.pubs .pub-list li {
  margin: 0 0 1rem;      /* ← 論文と論文の間隔 */
  line-height: 1.75;     /* ← 文章の読みやすさ */
}

/* 著者・タイトル・雑誌名などが長くても自然に折り返す */
.pubs .pub-list li,
.pubs .pub-list li * {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* DOIリンクが長くても崩れないように（特にスマホ） */
.pubs .pub-list a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* もし DOI の表示が「横並びで詰まる」場合の保険（任意） */
.pubs .pub-list a[href*="doi.org"] {
  display: inline;
}

/* =========================================================
   Mobile nav: keep one-line + horizontal swipe
   ========================================================= */
@media (max-width: 640px) {
  .site-header .nav { 
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.5rem;
    margin: 0;
    white-space: nowrap;
  }

  .site-header .nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .site-header .nav::-webkit-scrollbar {
    height: 6px;
  }
  .site-header .nav::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 999px;
  }
}

/* =========================================================
   Mobile nav: subtle fade hint (optional)
   - 右端にフェードを置き「横に続きがある」ことを示す
   ========================================================= */
@media (max-width: 640px) {
  .site-header {
    position: relative; /* ← ::after を重ねるために必要 */
  }

  .site-header::after {
    content: "";
    position: absolute;
    right: 0;

    /* ここはあなたのヘッダー構造に合わせて微調整ポイント */
    top: 3.0rem;     /* ブランド行の高さに合わせて調整 */
    height: 2.2rem;  /* navの高さに合わせて調整 */
    width: 28px;

    pointer-events: none;

    /* 背景色はヘッダー背景に合わせる（仮） */
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(230,245,244,1));
  }
}

/* =========================================================
   Brand link styling (A+B) + remove underline
   - remove underline always
   - subtle accent line on hover/focus (modern)
   - typographic refinement for JA/EN
   ========================================================= */

.site-header .brand-text,
.site-header .brand-text:visited {
  text-decoration: none;         /* 下線OFF */
  display: inline-block;
  position: relative;            /* ::after の基準 */
  color: inherit;                /* 既存テーマ色を尊重 */
}

.site-header .brand-text:hover,
.site-header .brand-text:focus-visible {
  text-decoration: none;         /* hover/focusでも下線OFF */
}

/* A: elegant accent line on hover/focus (not underline) */
.site-header .brand-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.72);
  transform-origin: left;
  transition: opacity .18s ease, transform .18s ease;
  border-radius: 999px;
}

.site-header .brand-text:hover::after,
.site-header .brand-text:focus-visible::after {
  opacity: 0.22;                /* 主張しすぎない */
  transform: scaleX(1);
}

/* B: typography refinement */
.site-header .brand-ja {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.site-header .brand-en {
  display: block;
  margin-top: 2px;
  font-size: 0.92em;
  opacity: 0.82;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Optional: keyboard focus ring (subtle, modern) */
.site-header .brand-text:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.18);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Students: card width aligns with others, but text line-length is controlled */
#students .card{
  padding: 22px 22px;
  width: 100%;
  max-width: none;          /* カード自体は絞らない */
  box-sizing: border-box;
}

#students .card > *{
  max-width: 72ch;          /* 文章の1行を読みやすい長さに制限 */
}

#students .card > *:where(ul, hr){
  max-width: none;          /* 箇条書きや区切り線は全幅のままでもOKなら */
}

/* =========================================================
   Fix: Students section should NOT be centered
   ========================================================= */
#students .card p,
#students .card ul,
#students .card h3{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* もし max-width:72ch が当たって細くなりすぎているなら解除 */
#students .card p,
#students .card ul,
#students .card h3{
  max-width: none !important;
}

/* Optional: left-aligned readability (no centering) */
#students .card{
  padding: 22px 22px;  /* 既存維持 */
}

/* 本文だけ、読みやすい行長に（左揃えのまま） */
#students .card p{
  max-width: 78ch;     /* 好みで 72〜86ch */
}


/* =========================================================
   Theme A: Charcoal Minimal (white + calm typography)
   ========================================================= */
:root{
  --bg: #ffffff;                 /* 背景：白 */
  --card: #ffffff;               /* カード：白 */
  --text: #0f172a;               /* Charcoal */
  --muted: rgba(15, 23, 42, 0.72);

  --accent: #0f172a;             /* 差し色＝Charcoal */
  --accent-2: #0f172a;

  --border: rgba(15, 23, 42, 0.12); /* 境界線：薄いグレー */
  --shadow: 0 6px 18px rgba(15, 23, 42, 0.06); /* 影：かなり弱く */
}

/* 背景グラデ（テック演出）をミニマルに戻す */
body{
  background: var(--bg) !important;
  color: var(--text);
}

/* リンク：色はCharcoal、下線は薄く（PHAPHIC寄り） */
a{
  color: var(--accent);
  text-decoration-color: rgba(15, 23, 42, 0.22);
  text-underline-offset: 4px;
}
a:hover{
  text-decoration-color: rgba(15, 23, 42, 0.40);
}

/* カード：影を弱く・線を主役に */
.card{
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* ボタン：塗りはCharcoal、角は丸めで上品に */
.btn{
  background: var(--accent);
  color: #fff;
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  border-radius: 999px;
}
.btn:hover{
  filter: brightness(1.02);
}

/* primary（薄いボタン）は“線＋薄塗り”に */
.btn.primary{
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
  border-color: rgba(15, 23, 42, 0.18);
}

/* 見出し下のアクセント線：TealではなくCharcoalで控えめに */
h2::after{
  background: linear-gradient(90deg, rgba(15,23,42,0.9), rgba(15,23,42,0.12));
  height: 2px;
  width: 64px;
}


/* =========================================================
   Minimal typography & spacing (PHAPHIC-ish)
   ========================================================= */

/* コンテナ余白：少しだけ上品に（現状 26px でもOK。好みで） */
.container{
  padding: clamp(18px, 2.4vw, 28px);
}

/* 本文の読みやすさ（研究室サイトは文章が多いので効く） */
p{
  line-height: 1.85;
}

/* 英文は補足として少し控えめ（既に .en を使っているので微調整） */
.en{
  /* opacity: 0.82; ← 削除 */
  letter-spacing: 0.2px;
}

/* ナビ：線は薄く、色はCharcoalで統一 */
.nav{
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.nav a{
  color: var(--text);
  opacity: 0.88;
}
.nav a:hover{
  opacity: 1;
}

/* =========================================================
   Hero buttons: keep minimal but readable on video
   ========================================================= */
.hero-overlay .btn.primary{
  background: rgba(255,255,255,0.12);          /* うっすら明るく */
  border-color: rgba(255,255,255,0.55);
  color: #fff;                                  /* 白文字にして確実に読める */
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.hero-overlay .btn.primary:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.70);
}

/* =========================================================
   Minimal: remove fade from section underline
   ========================================================= */
h2::after{
  background: rgba(15,23,42,0.20) !important;  /* 単色ライン（フェードなし） */
}

.news-block .card::before{
  display: none !important;
}

/* =========================================================
   Footer (minimal)
   ========================================================= */
.site-footer{
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.site-footer .copyright{
  display: block;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.70);
  letter-spacing: 0.2px;
}

/* =========================================================
   Back to top (minimal floating button)
   ========================================================= */
html { scroll-behavior: smooth; }

.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(15, 23, 42, 0.92); /* Charcoal */
  color: #fff;
  text-decoration: none;

  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);

  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999;
}
.back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover{ filter: brightness(1.03); }

@supports (padding: max(0px)) {
  .back-to-top{
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Back to top: SVG icon thickness */
.back-to-top .btt-icon{
  width: 20px;
  height: 20px;
  display: block;
}

.back-to-top .btt-icon path{
  stroke-width: 3.4; /* ← 太さ：おすすめ。2.6〜3.4で好み調整 */
}


/* Hero title: slightly smaller */
.hero-overlay h1{
  font-size: clamp(1.25rem, 1.6vw + 0.85rem, 2.05rem);
}


/* =========================================================
   Research media card: Related publications
   ========================================================= */
.media figcaption .related-pubs{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.10); /* Charcoal Minimal */
}

.media figcaption .related-title{
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.media figcaption .related-empty{
  font-size: 0.92rem;
  color: rgba(15, 23, 42, 0.62);
}

.media figcaption .related-pubs ul{
  margin: 0;
  padding-left: 18px;
}

.media figcaption .related-pubs li{
  margin: 0 0 8px;
  line-height: 1.7;
}

/* DOI/URLが長くても崩れない */
.media figcaption .related-pubs a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   PDF embed (Research Overview)
   ========================================================= */
.pdf-embed{
  margin-top: 12px;
}

.pdf-embed iframe{
  width: 100%;
  height: min(72vh, 720px);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 640px){
  .pdf-embed iframe{
    height: 60vh;
  }
}

.pdf-links{
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: rgba(15, 23, 42, 0.72);
}

.pdf-links .sep{
  margin: 0 8px;
  opacity: 0.5;
}
@media (max-width: 640px){
  .pdf-embed iframe{
    display: none;
  }
}

/* =========================================================
   Sticky header (site brand + nav)
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255,255,255,0.92);  /* 白ベース＋透け（ミニマル） */
  backdrop-filter: blur(8px);          /* 対応ブラウザのみ上品に */
  -webkit-backdrop-filter: blur(8px);

  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* header内のナビがある場合の余白を少し整える（任意） */
.site-header .nav{
  margin-bottom: 0; /* 既存で下に余白がある場合の吸収 */
}

/* Anchor jump offset for sticky header */
#students, #industry, #top{
  scroll-margin-top: 96px; /* ヘッダー高さに合わせて後で微調整 */
}


/* 研究室名（メイン・太字） */
.brand-ja {
  display: block; /* ★追加：ブロック化して改行 */
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.03em;
}

/* 英語名（小さめ・グレー） */
.brand-en {
  display: block; /* ★追加：ブロック化して改行 */
  font-size: 0.75rem;
  font-weight: 400;
  color: #475569;
  letter-spacing: 0.02em;
}

/* ========== スマホ対応（横幅狭い時） ========== */
@media (max-width: 768px) {
  .site-header {
    padding: 0.5rem 1rem;
    gap: 1rem;
  }

  .brand-affiliation {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .brand-ja {
    font-size: 0.95rem;
  }

  .brand-en {
    font-size: 0.65rem;
  }
}

/* ========== さらに狭い画面（所属名を非表示にする場合：オプション） ========== */
@media (max-width: 480px) {
  .brand-affiliation {
    display: none; /* 所属名を隠してスペース節約 */
  }
}

/* 所属（英語・2行目・小さく・薄いグレー） */
.brand-affiliation-en {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: #94a3b8;
  letter-spacing: 0.01em;
  margin-bottom: 0.15rem; /* 研究室名との間に少し余白 */
}

/* 研究室名（メイン・太字） */
.brand-ja {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.03em;
}

/* 英語名（研究室・小さめ・グレー） */
.brand-en {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #475569;
  letter-spacing: 0.02em;
}

/* ========== スマホ対応（横幅狭い時） ========== */
@media (max-width: 768px) {
  .site-header {
    padding: 0.5rem 1rem;
    gap: 1rem;
  }

  .brand-affiliation-ja {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .brand-affiliation-en {
    font-size: 0.55rem;
    line-height: 1.2;
  }

  .brand-ja {
    font-size: 0.95rem;
  }

  .brand-en {
    font-size: 0.65rem;
  }
}

/* ========== さらに狭い画面（所属名を非表示にする場合：オプション） ========== */
@media (max-width: 480px) {
  .brand-affiliation-ja,
  .brand-affiliation-en {
    display: none; /* 所属名を隠してスペース節約 */
  }
}

/* ========== Hero text shadow for readability (2.A) ========== */
.hero h1,
.hero p,
.hero .cta {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ボタン内のテキストも影を付ける */
.hero .btn {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ========== News section title enhancement (提案A：ミニマル・洗練系) ========== */
.section-title,
h2.section-title {
  font-size: 1.5rem;          /* 2rem → 1.5rem に縮小 */
  font-weight: 600;            /* 700 → 600 に軽量化 */
  color: #0f172a;
  margin-bottom: 1.5rem;       /* 2rem → 1.5rem */
  padding-left: 0.75rem;       /* 左に余白を追加 */
  position: relative;
  display: inline-block;
  letter-spacing: 0.02em;
}

/* 左側の縦線（アクセント） */
.section-title::before,
h2.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 3px;
  height: 1.6rem;
  background: #0f172a;
  border-radius: 2px;
}

/* 下の短い線（控えめ） */
.section-title::after,
h2.section-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0.75rem;               /* 縦線の右側から開始 */
  width: 2.5rem;               /* 3rem → 2.5rem に短縮 */
  height: 2px;                 /* 3px → 2px に細く */
  background: rgba(15, 23, 42, 0.20);  /* 薄く */
  border-radius: 1px;
}

/* 最新情報 / News の部分に適用 */
.news-section h2,
.publications-section h2,
.research-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 1.5rem;
  padding-left: 0.75rem;
  position: relative;
  display: inline-block;
  letter-spacing: 0.02em;
}

.news-section h2::before,
.publications-section h2::before,
.research-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 3px;
  height: 2.0rem;
  background: #0f172a;
  border-radius: 2px;
}

.news-section h2::after,
.publications-section h2::after,
.research-section h2::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0.75rem;
  width: 2.5rem;
  height: 2px;
  background: rgba(15, 23, 42, 0.20);
  border-radius: 1px;
}

/* News block の見出しにも適用 */
.news-block h2.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 1.5rem;
  padding-left: 0.75rem;
  position: relative;
  display: inline-block;
  letter-spacing: 0.02em;
}

.news-block h2.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 6px;
  height: 1.5rem;
  background: #0f172a;
  border-radius: 2px;
}

.news-block h2.section-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0.75rem;
  width: 2.5rem;
  height: 2px;
  background: rgba(15, 23, 42, 0.20);
  border-radius: 1px;
}



/* ========== Links Page ========== */
.links-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.links-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.links-section h2:first-of-type {
  margin-top: 1rem;
}

.links-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.links-list li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
}

/* リンクの前に矢印アイコン */
.links-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #0f172a;
  font-weight: 600;
}

.links-list a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.links-list a:hover {
  color: #475569;
  text-decoration: underline;
}

/* 外部リンクアイコン（オプション） */
.links-list a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
  vertical-align: super;
  opacity: 0.6;
}

/* 英語テキストのスタイル */
.links-section .en {
  font-size: 0.9em;
  color: #64748b;
  font-weight: 400;
}

/* =========================================================
   Page title (h1) size adjustment
   - ヒーロー内の h1 は既存の設定を維持
   - 各ページの通常 h1 を適切なサイズに
   ========================================================= */

/* 各ページの通常 h1（ヒーロー外） */
.container > h1,
main > h1 {
  font-size: clamp(1.35rem, 1.5vw + 0.9rem, 1.75rem);  /* 控えめなサイズ */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem;
}

/* ヒーロー内の h1 は既存のサイズを維持（上書きしない） */
.hero-overlay h1 {
  font-size: clamp(1.25rem, 1.6vw + 0.85rem, 2.05rem) !important;
}

/* =========================================================
   Research page: reduce text size on mobile
   ========================================================= */
@media (max-width: 768px) {
  /* Research ページの本文を少し小さく */
  .research-block p,
  .research-block li,
  .pillar p {
    font-size: 0.9rem;
    line-height: 1.7;
  }
  
  /* 見出しも少し調整 */
  .research-block h2 {
    font-size: 1.3rem;
  }
  
  .research-block h3 {
    font-size: 1.1rem;
  }
}


/* ========================================
   Site Header & Brand (完全修正版)
   ======================================== */

.site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem 2rem;
  display: flex;
  flex-direction: row;  /* ← デフォルトは横並び */
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* ブランド部分（左側） */
.brand {
  flex: 0 0 auto;
  max-width: 50%;
}

.brand-link {
  display: block;
  text-decoration: none !important;
  color: inherit;
}

.brand-link:hover,
.brand-link:focus {
  text-decoration: none !important;
}

/* 所属名（日本語） */
.brand-affiliation-ja {
  display: block;
  font-size: 0.65rem;
  line-height: 1.3;
  color: #64748b;
  font-weight: 400;
}

/* 所属名（英語） */
.brand-affiliation-en {
  display: block;
  font-size: 0.6rem;
  line-height: 1.3;
  color: #94a3b8;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

/* 研究室名（日本語） */
.brand-ja {
  display: block;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #0f172a;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* 研究室名（英語） */
.brand-en {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  color: #475569;
  font-size: 0.7rem;
  line-height: 1.3;
  font-weight: 400;
}

/* ナビゲーション（右側） */
.site-header .nav {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.site-header .nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none !important;
  transition: color 0.2s ease;
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
}

.site-header .nav-link:hover {
  color: #0f172a;
  text-decoration: none !important;
}

.site-header .nav-link[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

/* デスクトップ（769px以上）：横並びを強制 */
@media (min-width: 769px) {
  .site-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}

/* スマホ対応（768px以下）：縦並び */
@media (max-width: 768px) {
  .site-header {
    padding: 0.75rem 1rem;
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .brand {
    max-width: 100%;
  }

  .brand-affiliation-en,
  .brand-en {
    display: none;
  }

  .brand-affiliation-ja {
    font-size: 0.6rem;
  }

  .brand-ja {
    font-size: 0.85rem;
  }

  .site-header .nav {
    width: 100%;
    gap: 0.75rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .site-header .nav-link {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }

  /* 横スクロールバーのスタイル */
  .site-header .nav::-webkit-scrollbar {
    height: 4px;
  }

  .site-header .nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
  }
}

/* さらに狭い画面（480px以下） */
@media (max-width: 480px) {
  .brand-affiliation-ja {
    display: none;
  }
}


/* ========================================
   Members Page - Simple Table Style
   ======================================== */

/* 集合写真 */
.group-photo {
  margin: 60px 0;
  text-align: center;
}

.group-photo-img {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.group-photo figcaption {
  margin-top: 16px;
  font-size: 1.05rem;  /* ← 0.95rem → 1.05rem に拡大 */
  color: #64748b;
  font-weight: 300;
}

/* メンバーテーブル */
.members-table-wrapper {
  margin: 48px 0;
}

.members-table-wrapper h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  color: #1e293b;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.members-table thead {
  background: #f8fafc;
}

.members-table th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 500;
  font-size: 1.05rem;  /* ← 0.95rem → 1.05rem に拡大 */
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
}

.members-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 1.05rem;  /* ← 1rem → 1.05rem に拡大 */
}

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

.members-table tbody tr:hover {
  background: #f8fafc;
}

/* リンクのスタイル統一 */
.members-table a {
  color: #334155 !important;
  text-decoration: none !important;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-size: 0.9rem;  /* ← 0.85rem → 0.9rem に拡大 */
  display: inline-block;
  margin-right: 6px;
  transition: all 0.2s ease;
}

.members-table a:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #1e293b !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .members-table {
    font-size: 0.95rem;  /* ← 0.9rem → 0.95rem に拡大 */
  }

  .members-table th,
  .members-table td {
    padding: 12px 14px;
  }

  .members-table a {
    font-size: 0.85rem;  /* ← 0.8rem → 0.85rem に拡大 */
    padding: 3px 8px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
}

/* 旧スタイルを非表示 */
.pi-card,
.pi-grid,
.members {
  display: none !important;
}

/* post */
.news-photo img {
  max-width: 600px;
  width: 100%;
  height: auto;
}

.card-thumb {
  display: block;
  margin-bottom: 0.8rem;
}

.card-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.news-page .card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.news-page .card time {
  font-size: 0.85rem;
  color: #666;
}

/* News記事ページのタイトル（スマホ調整） */
@media (max-width: 768px) {
  .news-post h1 {
    font-size: 1.4rem;   /* 好みで調整（1.3〜1.6くらい） */
    line-height: 1.4;
  }
}