/* =========================
   Base / Reset
========================= */
*{box-sizing:border-box}
:root{
  --max:1000px;
  --pad:20px;
  --border:#e9e9e9;
  --muted:#666;
}

html { scrollbar-gutter: stable; }


html{scroll-padding-top:110px;}
:target{scroll-margin-top:110px;}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.7;
  color:#111;
  background:#f6f7fb; /* ページ背景 */
}

a{color:inherit}

/* =========================
   Layout
========================= */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

main{
  padding:28px 0 40px;
}

/* 中身を白い面にする */
main.container{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px var(--pad) 40px;
  margin:20px auto 40px;
}

/* 見出し・テキスト */
h1{font-size:28px;line-height:1.2;margin:0 0 12px}
h2{font-size:20px;margin:0 0 10px}
p{margin:10px 0}
.small{color:var(--muted);font-size:14px}
.list{padding-left:18px}
.kv{font-weight:600}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}

.footer{
  border-top:1px solid var(--border);
  padding:22px 0;
  color:var(--muted);
  font-size:13px;
}

/* カードの先頭見出しは上マージンを消す */
.card > h1:first-child { margin-top: 0; }
.card > h2:first-child { margin-top: 0; }
.card > h3:first-child { margin-top: 0; } /* 年ごと見出し用に保険 */
.card > h4:first-child { margin-top: 0; } /* 年ごと見出し用に保険 */


/* section間の余白（入れ子のsectionは除外） */
main.container > section{ margin:16px 0; }
main.container section section{ margin:0; }

/* =========================
   Header / Nav
========================= */
.header{
  position:sticky;
  top:0;
  z-index:100;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.15);

  /* 背景：画像 + ダーク */
  background:#111;
  background-image:url("../images/header.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 文字を読みやすくする暗い膜 */
.header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  pointer-events:none;
}

.header .container{position:relative; z-index:1;}

.brand .title{font-weight:700;letter-spacing:.03em;color:#fff}
.brand .subtitle{margin-top:6px;color:rgba(255,255,255,.8);font-size:13px;line-height:1.4}

.nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.nav a{
  font-size:14px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
}
.nav a[aria-current="page"]{border-color:#fff}

/* Home冒頭を少し下げたい時用（必要なら数値調整） */
.home-title{margin-top:1px;}

/* =========================
   Common Components
========================= */
.card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  background:#fff;
}

.notice{
  background:#fafafa;
  border:1px dashed var(--border);
  border-radius:14px;
  padding:14px;
  color:var(--muted);
}

.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:780px){.grid-2{grid-template-columns:1fr}}

.btn{
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  background:#fff;
}
.btn:hover{border-color:#111}

/* =========================
   Home: Hero overlay
========================= */
.home{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  margin:16px 0;
}
.home-img{width:100%;height:auto;display:block;}
.home-card{
  position:absolute;
  left:16px;
  right:16px;
  top:18px;
  bottom:auto;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(6px);
}

/* =========================
   Team list (/team/)
========================= */
.team-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:780px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}

.member-tile{
  display:block;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  text-align:center;
  overflow:hidden;
  background:#fff;
}
.member-photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
}
.member-name{margin-top:10px;font-weight:700}
.member-role{color:var(--muted);font-size:14px;margin-top:4px}

/* =========================
   Profile page (/team/suzuki/ etc.)
========================= */
.profile-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:14px 0;
}
@media (max-width:780px){ .profile-row{flex-direction:column} }

.profile-photo{
  width:180px;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
  transition:transform .12s ease;
}
.profile-link{display:inline-block;text-decoration:none}
.profile-link:hover .profile-photo{transform:scale(1.01)}

/* =========================
   Research: theme images + theme cards
========================= */
.theme-img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
  margin-bottom:10px;
}

/* 背景 + 左ライン（Research themes専用） */
.theme-card{
  position:relative;
  overflow:hidden;
  padding-left:24px;
}
.theme-card::before{
  content:"";
  position:absolute;
  left:10px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:rgba(0,0,0,.15);
}

/* color variants */
.theme-card.theme-1{background:#f3f7ff;}
.theme-card.theme-1::before{background:#2f6fff;}
.theme-card.theme-2{background:#f3fff8;}
.theme-card.theme-2::before{background:#18a06a;}
.theme-card.theme-3{background:#fff7f1;}
.theme-card.theme-3::before{background:#f08a24;}
.theme-card.theme-4{background:#fbf6ff;}
.theme-card.theme-4::before{background:#8a4fff;}

/* =========================
   Contact: Map
========================= */
.map-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.map{width:100%;height:380px;border:0;display:block}

/* Transportation guide (旧2カラム版を使うなら) */
.transport-grid{margin-top:12px;}
.transport-full{grid-column:1 / -1;}

/* Access layout: left tall image + right stacked cards */
.access-layout{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr 1.2fr;
  align-items:center;  /* ←左右を縦方向の中央で揃える */
  margin-top:12px;
}

.access-map{
  padding:12px;
  display:flex;
  flex-direction:column;
}
.access-map-img{
  width:100%;
  height:auto;
  object-fit:contain; /* 切りたいなら cover */
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
}
.access-cards{
  display:block;
}

.transport-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:10px 0;
}
.transport-line .ico{
  flex:0 0 22px;      /* アイコン列の幅を固定 */
  margin-top:2px;     /* 文字の1行目と高さを合わせる */
}
.transport-line .icon{
  width:22px;
  height:22px;
  color:#111;
  opacity:.75;
  display:block;
}


@media (max-width:900px){
  .access-layout{grid-template-columns:1fr;}
  .access-map-img{height:auto;}
  .access-cards{grid-template-rows:none;height:auto;}
}

/* =========================
   Osaka photos
========================= */
.osaka-row{
  display:flex;
  gap:12px;
  margin-top:12px;
}
.osaka-row img{
  width:calc(50% - 6px);
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
}

/* 1枚目（osaka.jpg）を整える：任意 */
.osaka > img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
}
@media (max-width:780px){
  .osaka-row{flex-direction:column}
  .osaka-row img{width:100%}
}

/* =========================
   Publications: spacing
========================= */
ol.list > li{margin-bottom:16px;}
ul.list > li{margin-bottom:16px;}

/* =========================
   Optional: card color utilities（使ってるなら残す）
========================= */
.card.card-blue{background:#f3f7ff;}
.card.card-green{background:#f3fff8;}
.card.card-yellow{background:#fffdf2;}
.card.card-gray{background:#f7f7f7;}
.card.card-white{background:#fff;}
.card.card-contact{background:#f6f7fb;}

.card.accent{
  position:relative;
  padding-left:24px;
}
.card.accent::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:#111;
}
.card.accent.blue::before{background:#2f6fff;}
.card.accent.green::before{background:#18a06a;}
.card.accent.orange::before{background:#f08a24;}

.year-label{
  list-style: none;
  margin-top: 14px;
  font-weight: 700;
}

#news-list hr { margin: 18px 0; }