:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --sub:#475569;
  --accent:#60a5fa; /* 明るい青 */
  --line:#0f172a;
  --chip:#eef6ff;
}

*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
}

/* Header & Nav */
.header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:#fff; border-bottom:1px solid #e5e7eb;
}
.brand{ font-weight:700; text-decoration:none; color:var(--ink); }

.nav{ display:flex; gap:16px; }
.nav a{
  text-decoration:none; color:var(--ink); padding:8px;
  border-radius:8px;
}
.nav a:hover{ background:#f1f5f9; }

/* ハンバーガー */
.hamburger{ display:none; background:none; border:none; padding:6px; cursor:pointer; }
.hamburger span{
  display:block; width:26px; height:3px; background:var(--ink); margin:5px 0; transition:.2s;
}

/* Hero */
.hero{
  display:grid; grid-template-columns:120px 1fr; gap:20px;
  max-width:960px; margin:40px auto 10px; padding:0 16px;
  align-items:center;
}
.avatar{ width:120px; height:120px; object-fit:cover; border-radius:9999px; border:4px solid #000; }
.page-title{ font-size:32px; margin:0; }
.lead{ margin:6px 0; color:var(--ink); font-weight:600; }
.sublead{ margin:0; color:var(--sub); }

/* Sections */
.section{
  max-width:960px; margin:28px auto; padding:0 16px;
}
.title-line{
  font-size:28px; margin:36px 0 14px; position:relative; display:inline-block;
}
.title-line::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:4px; background:var(--line);
}

/* Lists & chips */
.list{ margin:0; padding-left:1.2rem; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  background:var(--chip); border:1px solid #cfe5ff; color:#1e293b;
  padding:6px 10px; border-radius:999px; font-size:14px;
}

/* Publications */
.pubs{ padding-left:1.2rem; }
.pubs li{ margin:10px 0 14px; }
.tags{
  display:inline-block; margin-left:6px; font-size:12px; color:#1e293b;
  background:#e2e8f0; padding:2px 8px; border-radius:999px;
}
.note{ color:var(--sub); font-size:0.9rem; }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.card{ border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; }
.card h3{ margin-top:0; }

/* Contact */
.contact{ padding-left:1.2rem; }
.contact a{ color:#2563eb; }

/* Footer */
.footer{ text-align:center; padding:24px; color:var(--sub); }

/* Responsive */
@media (max-width: 880px){
  .cards{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .hero{ grid-template-columns:80px 1fr; }
  .avatar{ width:80px; height:80px; }
  .page-title{ font-size:26px; }
  /* ハンバーガー有効化 */
  .hamburger{ display:block; }
  .nav{
    position: fixed; inset: 56px 0 auto 0; /* ヘッダー下に展開 */
    background:#fff; border-bottom:1px solid #e5e7eb;
    display:none; flex-direction:column; gap:0;
  }
  .nav a{ padding:14px 16px; border-bottom:1px solid #f1f5f9; }
  .nav.show{ display:flex; }
}