:root{
  --bg:#0a0a0a;
  --text:#ffffff;
  --muted:#e4ecf5;
  --accent:#4cc9f0;
  --panel:#121314;
  --line:#1e2327;
  --container:1200px;
  --sidebar-w:260px;
}

/* リセット */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* 背景暗さ */
:root{ --page-bg-darkness: 0.11; }

body{
  margin:0;
  background-color:#0a0a0a;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP";
  line-height:1.75;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 背景切り替え */
body.bg-a {
  background-image:
    linear-gradient(rgb(0 0 0 / var(--page-bg-darkness)), rgb(0 0 0 / var(--page-bg-darkness))),
    var(--page-bg-a) !important;
}
body.bg-b {
  background-image:
    linear-gradient(rgb(0 0 0 / var(--page-bg-darkness)), rgb(0 0 0 / var(--page-bg-darkness))),
    var(--page-bg-b) !important;
}

/* anchor */
a{color:#ffffff;text-decoration:none}
a:hover{text-decoration:underline}

/* Sidebar layout */
header.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  background-color:#0a0a0a;
  border-right:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px 16px;
}
header.sidebar .brand-link{display:flex;align-items:center;gap:.8rem;white-space:nowrap}
.logo {
  background: url("img/logo.jpg") no-repeat left center;
  background-size: contain;
  width: 100%;
  max-width: 500px;
  height: 60px;
}
header.sidebar .main-nav ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:.2rem}
header.sidebar .main-nav a{display:block;padding:.5rem .6rem;border-radius:8px;color:#e2e8ef}
header.sidebar .main-nav a:hover{background:#121314;color:#fff}
header.sidebar .main-nav a.active{background:#16222b;color:#fff;border:1px solid #264657}
.lang-toggle{margin-top:auto;display:flex;gap:.4rem}
.lang-toggle button{padding:.28rem .6rem;border:1px solid #2b3440;border-radius:999px;background:linear-gradient(180deg,#0f141a,#0b0f14);color:#cfe2f2;cursor:pointer}
.lang-toggle button.active{border-color:#4cc9f0;color:#fff}

/* content */
.content{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;position: relative; z-index: 0;}
main{padding:48px 32px;flex:1}
.panel{background:#121314;border:1px solid #ffffff22;border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.5);padding:20px;margin-bottom:20px}
.content, .content *{ color:#ffffff !important }

/* footer */
.site-footer{ border-top:1px solid #ffffff22; padding:20px 0; color:#ffffff; background:#0a0a0a; }
.footer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 0px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

/* headings */
h1,h2{line-height:1.3;margin:.2em 0 .6em}
h1{font-size:1.8rem}
h2{font-size:1.4rem}
hr.sep{border:0;border-top:1px solid #2a2f34;margin:24px 0}

/* Hero セクション（元に戻した想定） */
/* ====== Hero (Index) ====== */
/* ① main を「縦中央ステージ化」：背景に対してヒーロ全体を垂直中央 */
main:has(> .hero){
  min-height: 12vh;          /* 画面高に合わせて縦中央 */
  display: grid;              /* Gridで中央寄せがシンプル */
  align-content: center;      /* 垂直中央 */
  justify-items: center;       /* 水平は左寄せ */
  padding-inline: 5px;       /* 左右の安全余白（必要なら調整） */
  padding-block: 5px;
}

/* ② .hero は“カード”として幅を持ちすぎない＋文字は左揃え */
.hero{
  --overlay-alpha: .6;

  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ffffff22;
  background: transparent;

  /* Flexはやめる：横幅が不必要に広がる原因 */
  display: block;

  /* 文字量に合わせつつ、読みやすい最大幅だけ指定 */
  max-width: 960px;           /* お好みで 720〜960px など */
  width: 100%;
  margin: 0;                  /* 左寄せ（mainが左に揃える） */
  place-items: center;
  max-height: 50vh;
}

/* ③ 背景レイヤー（既存のまま） */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    image-set(
      var(--hero-url) 1x,
      var(--hero-2x, var(--hero-url)) 2x
    );
  background-size:cover;
  background-position:center;
  filter: contrast(1.05) saturate(0.95);
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(
    to bottom,
    rgb(0 0 0 / calc(var(--overlay-alpha) * 1))   0%,
    rgb(0 0 0 / calc(var(--overlay-alpha) * 0.9)) 35%,
    rgb(0 0 0 / calc(var(--overlay-alpha) * 0.6)) 60%
  );
  z-index:1;
  pointer-events:none;
}

/* ④ ヒーロ内のテキストは左揃え（そのまま） */
.hero .hero-inner{
  position:relative; z-index:2;
  text-align:left;
  padding: 10px 0;   
}
.hero h1{ text-align: center;font-size:2rem; margin:0 0 .6rem; }
.hero p { font-size:1.1rem; opacity:0.95; }
.hero h2 {text-align: left;}

@media (max-width: 900px) {
  .hero h1 {
    font-size: 1.5rem;
  }
  .hero h2 {
    font-size: 1.0rem;
  }
}

/* ====== Timeline (About Profile) ====== */
.timeline{border-left:2px solid #2f3a45;margin:8px 0;padding-left:16px;display:flex;flex-direction:column;gap:10px}
.timeline .t-item{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start}
.timeline .t-year{font-weight:700;opacity:.95}
.timeline .t-year.t-empty{opacity:.6}
.timeline .t-body{opacity:.95}

/*=======NEWS==========*/

.news {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 16px;
}

.news h2 {
  font-size: 1.6rem;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  padding-bottom: 4px;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-list li {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
}

.news-list .date {
  font-weight: bold;
  color: var(--accent);
  margin-right: 8px;
}

/* モバイル調整 */
@media (max-width: 900px) {
  .news {
    margin: 24px auto;
    padding: 0 12px;
  }
  .news h2 {
    font-size: 1.4rem;
  }
  .news-list li {
    font-size: .95rem;
  }
}

.news a {
  color:#4cc9f0 !important;
  text-decoration:underline !important;
}
.news a:hover {
  color:#82d4f7 !important;
  text-decoration:underline !important;
}

/* ===== ハンバーガーメニュー用 ===== */

/* ボタン基本デザイン */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* PC（900px以上） */
@media (min-width:901px){
  .menu-toggle { display: none; }
  header.sidebar .main-nav { display: flex !important; }
}

/* モバイル（900px以下） */
@media (max-width:900px){
  header.sidebar{
    position:fixed;
    height:64px;
    width:100%;
    inset:auto 0 auto 0;
    flex-direction:row;
    align-items:center;
    gap:16px;
    padding:8px 12px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }

  /* ハンバーガーボタン表示 */
  .menu-toggle { display:flex; margin-left:auto; }

  /* main-nav 初期状態は非表示 */
  header.sidebar .main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #0a0a0a;
    padding: 12px;
    flex-direction: column;
    gap: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  /* activeクラスで展開 */
  header.sidebar .main-nav.active {
    display: flex;
  }

  /* contentの位置調整 */
  .content{margin-left:0;padding-top:64px}
  .footer-inner{padding:0 16px}
}

/* index.html の中だけリンクを薄い青にする */
body.publication-page .content a {
  color: #4cc9f0 !important;
  text-decoration: underline;
}
body.publication-page .content a:hover {
  color: #82d4f7 !important;
  text-decoration: underline;
}