/* Light theme for Dypy Lab (画像をより大きく表示する調整を含む) */
:root{
  --bg:#ffffff;         /* page background */
  --card:#f5f5f5;       /* card / surface */
  --accent:#4da6ff;     /* primary accent (buttons) */
  --muted:#666666;      /* secondary text */
  --text:#333333;       /* main text */
  --radius:10px;
  --max-width:1200px;   /* 少し広げて大きいヒーローに対応 */
  --shadow-dark: rgba(0,0,0,0.6);
  font-family: "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
}

/* 中国語用のフォント設定 */
:lang(zh) {
  font-family: "Source Han Sans", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1rem;
}

/* Header */
.site-header{
  background:#ffffff;
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0.5rem 0;
}
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  padding-bottom:0;
}
.logo{
  text-align:center;
  position:relative;
  z-index:31;
}
.logo a{
  display:inline-block;
}
.logo img{
  vertical-align: bottom;
  height:4rem;
}
.lang-switcher{
  display:flex;
  gap:0.5rem;
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
}
.lang-switcher button{
  padding:0.3rem 0.8rem;
  background:#f5f5f5;
  color:var(--text);
  border:1px solid #e0e0e0;
  border-radius:2px;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.lang-switcher button:hover{
  background:#e8e8e8;
}
.lang-switcher button.active{
  background:#000000;
  color:#ffffff;
  border-color:#000000;
}
.main-nav{
  display:flex;
  gap:0;
  margin-bottom:0;
  width:100%;
  justify-content:center;
  background:#f5f5f5;
  border-top:1px solid #e0e0e0;
  border-bottom:4px solid #000000;
}
.main-nav a{
  padding:0.4rem 1.5rem;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  background:#f5f5f5;
  border-bottom:none;
  border-right:1px solid #e0e0e0;
  border-left:1px solid #e0e0e0;
  transition:background 0.2s ease;
}
.main-nav a:first-child{
  border-left:1px solid #e0e0e0;
}
.main-nav a:hover{
  background:#e8e8e8;
}
.main-nav a[aria-current="page"]{ 
  color:#f5f5f5;
  background:#000000;
  font-weight:700;
}

/* Hero - 大きめに見せるための調整 */
.hero{
  padding:0;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:center;
}
/* デスクトップではテキストより画像を優先して大きく表示 */
.hero-text{
  width:100%;
  text-align:center;
}
.hero-text h2{ margin:0 0 .5rem; font-size:2rem; color:var(--text) }
.hero-text p{ margin:0 0 1rem; color:var(--muted) }

/* 画像領域を広めに取り、SVG の max-height を引き上げ */
.hero-image{
  width:100%;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.inline-hero{
  width:100%;
  height:auto;
  max-height:600px;          /* ここを大きくして画像表示領域を拡張 */
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
  transition:transform .22s ease;
}
.inline-hero:hover{ transform:translateY(-6px) }

/* Buttons */
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  background:#000000;
  color:#ffffff;
  text-decoration:none;
  border-radius:2px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  border:1px solid #000000;
  transition:background 0.2s ease, color 0.2s ease;
}
.btn:hover{ background:#ffffff; color:#000000; }
.btn.ghost{ background:transparent; color:var(--accent); border:2px solid rgba(77,166,255,0.15) }
.hero-links .btn{ margin-right:.5rem }

/* Content */
.content{ padding:2rem 1rem; background:transparent }

/* Research list */
.research-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:1rem;
}
.research-item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  background:#ffffff;
  padding:1.5rem;
  border-radius:2px;
  border:1px solid #e0e0e0;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.research-item:hover{
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  transform:translateY(-2px);
}
.research-item .thumb{
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:2px;
  flex:0 0 200px;
  background:#f0f0f0;
  border:1px solid #e0e0e0;
}
.research-body h3{ margin:0 0 0; color:var(--text); font-size:1.25rem; font-weight:700; }
.meta{ color:var(--muted); font-size:.9rem; margin:0 0 .75rem; font-weight:600; }
.abstract{ margin:0 0 .75rem; color:var(--text); line-height:1.7; }
.research-links .btn{vertical-align:bottom; margin-right:.5rem; margin-bottom:.25rem }

/* Footer */
.site-footer{
  padding:1rem 0;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  margin-top:2rem;
  background:transparent;
}

/* News section */
.news{
  padding:2rem 1rem;
  margin-top:0;
}
.news h3{
  margin:0 0 1rem;
  color:var(--text);
  font-size:1.5rem;
}
.news-list{
  list-style:none;
  padding:0;
  margin:0;
}
.news-list li{
  margin-bottom:1rem;
}
.news-item-link{
  display:block;
  padding:1rem;
  background:#ffffff;
  border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-decoration:none;
  transition:box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.news-item-link:hover{
  box-shadow:0 6px 16px rgba(0,0,0,0.1);
  transform:translateY(-2px);
}
.news-item-link:hover p{
  text-decoration:none;
}
.news-list time{
  display:block;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.5rem;
}
.news-list p{
  margin:0;
  color:var(--accent);
  text-decoration:underline;
}

/* Utilities */
.small{ font-size:.85rem; color:var(--muted) }

/* Hero fullscreen styles */
.hero-fullscreen {
  position: relative;
  width: 100vw;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hero-bg {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

.hero-fullscreen .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 
               0 4px 8px rgba(0, 0, 0, 0.4),
               0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.hero-fullscreen .hero-text h2 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
  color: #ffffff;
}

.hero-fullscreen .hero-text p {
  font-size: 1.1rem;
  margin: 0;
  color: #ffffff;
}

/* Focus & accessibility */
/* Responsive tweaks: 小さい画面では画像を控えめにして縦積み */
@media (max-width:1100px){
  .container{ padding-left:1rem; padding-right:1rem }
  .hero-text{ flex: 1 1 48%; max-width:480px }
  .hero-image{ flex: 1 1 52% }
  .inline-hero{ max-height:420px }
}
@media (max-width:900px){
  .research-item{ flex-direction:column; align-items:center; text-align:center }
  .research-item .thumb{ width:80%; max-width:320px; flex:0 0 auto }
  .research-body{ width:100% }
}
@media (max-width:700px){
  .hero-inner{ flex-direction:column-reverse; text-align:center }
  .hero-image{ text-align:center; justify-content:center }
  .hero-text{ max-width:100% }
  .inline-hero{ max-height:360px }
  .header-inner{ flex-direction:column; align-items:flex-start }
  .main-nav{ margin-top:.5rem }
}