/* Google Fonts */
body {
    margin: 0;
    font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    color: #333;
}

/* Hero Section */
.hero {
    background: url('IMG_4171.jpeg') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
}
.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.hero p {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.hero .btn {
    background-color: #007acc;
    color: #fff;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.3s;
}
.hero .btn:hover {
    background-color: #005fa3;
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}
.navbar a {
    text-decoration: none;
    color: #007acc;
    font-weight: bold;
    transition: color 0.3s;
}
.navbar a:hover {
    color: #005fa3;
}

/* Sections */
.section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
}
.section h2 {
    color: #007acc;
    margin-bottom: 1rem;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.card {
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-5px);
}
.card h3 {
    margin-top: 0;
    color: #007acc;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    background-color: #007acc;
    color: #fff;
}

/* --- Collapsible (publication by year) --- */.pub-year {  margin: 1rem 0;  border: 1px solid rgba(0,0,0,0.08);  border-radius: 8px;  background-color: #fff;  box-shadow: 0 2px 6px rgba(0,0,0,0.06); padding: 0 1rem 1rem;}.pub-year > summary {  cursor: pointer;  list-style: none; /* remove default marker */  padding: 0.9rem 1rem 0.9rem 2.25rem;  font-weight: 700;  color: #007acc;  position: relative;  user-select: none;}.pub-year > summary::marker {  display: none;}.pub-year > summary::before {  /* caret icon */  content: "▶";  position: absolute;  left: 0.9rem;  top: 50%;  transform: translateY(-50%);  color: #007acc;  transition: transform 0.2s ease;}.pub-year[open] > summary::before {  content: "▼";  transform: translateY(-50%);}.pub-year[open] {  /* subtle emphasis when expanded */  border-color: rgba(0,0,0,0.08);}.pub-year > *:not(summary) {  margin-top: 1rem;}/* Optional: trim excessive link spacing if lines are long */.pub-year a {  display: inline-block;  margin: 0.15rem 0;  word-break: break-word;}

.card {  box-sizing: border-box;  width: 100%;  background-color: #fff;  padding: 1rem;                /* 既存を維持 */  border-radius: 8px;  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  transition: transform 0.3s;  /* 任意：外枠との視覚分離を強化したい場合 */  /* border: 1px solid rgba(0,0,0,0.06); */}

/* --- Publication controls --- */.pub-controls { display:flex; gap: .5rem; margin: 1rem 0; }.pub-controls button {  background-color: #007acc; color: #fff; border: none; border-radius: 6px;  padding: .5rem .9rem; font-weight: 700; cursor: pointer;}.pub-controls button + button { background-color: #5f6b7a; }.pub-controls button:hover { filter: brightness(1.05); }

/* Research4 専用：カードを 1 カラムで全幅にする */.card-grid.single-column { grid-template-columns: 1fr; }.card.single-column { width: 100%; } /* 念のための明示 */

/* --- Balanced two-column cards for profile section --- */
.card-grid.profile-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.card-grid.profile-inline .card { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
}
.card-grid.profile-inline .card h3 { margin-top: 0; }
.card.profile-photo img { 
  width: 100%; 
  aspect-ratio: 4 / 3; 
  object-fit: cover; 
  border-radius: 8px; 
}
@media (max-width: 768px) { .card-grid.profile-inline { grid-template-columns: 1fr; } }