/* ==== Timeline ==== */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #fff;
  background: url("../images/background-002.jpg") repeat-y center top fixed;
  background-size: cover;         /* 画像をコンテナいっぱいに表示 */
  background-position: center;    /* 中央寄せ */
  background-repeat: repeat-y;
  margin: 0;
  padding: 0;
}

.tl-wrap { 
  margin: 60px auto 80px;
  max-width: 1200px;   /* 横幅広め */
  padding: 0 24px;
}

.tl-title { 
  margin: 0 0 32px;
  font-size: 1.9rem;   /* 少し大きく */
  font-weight: 700;
  color: #fff;
}

/* 全体グリッド */
.tl-grid {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr; /* 左カラムも少し広げる */
  gap: 16px 32px;
  margin-top: 80px;
}

.tl-grid::before{
  content:"";
  position:absolute; left:180px; top:0; bottom:0;
  width:2px; background:rgba(255,255,255,0.2);
  transform: translateX(14px);
}

/* アイテム（スクロール出現用） */
.tl-item {
  display: contents;
  opacity: 0; 
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.tl-item.is-in { 
  opacity: 1; 
  transform: translateY(0); 
}

/* 年（左カラム） */
.tl-year {
  position: sticky; 
  top: 80px; /* ヘッダー高さに応じて調整 */
  height: fit-content;
  font-family:'Do Hyeon',sans-serif;
  font: 700 16px/1.2 "Noto Sans JP", sans-serif;
  color:#FC5F00; /* オレンジでアクセント */
  background:#1f2937;
  border:1px solid #374151;
  border-radius:999px;
  padding:8px 14px;
  justify-self: end;
}

/* 本文（右カラム） */
.tl-body {
  position: relative;
  padding: 16px 20px 20px 24px;
  background: #1f2937; /* ダークグレー */
  border: 1px solid #374151;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  font-size: 1rem;     /* 読みやすく */
  line-height: 1.7;
  color:#f9fafb;
}

/* ドット */
.tl-body::before{
  content:"";
  position:absolute; left:-28px; top:18px;
  width:14px; height:14px; border-radius:50%;
  background:#3b82f6; /* 青 */
  box-shadow:0 0 0 4px rgba(59,130,246,0.25);
}

/* ノート（昇格・降格など） */
.tl-note {
  margin:.5em 0 0;
  font-size: .95em;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
}
.tl-note.up { 
  background:#065f46; 
  color:#d1fae5; 
  border:1px solid #10b981; 
}
.tl-note.down { 
  background:#7f1d1d; 
  color:#fee2e2; 
  border:1px solid #f87171; 
}

/* レスポンシブ */
@media (max-width: 768px){
  .tl-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tl-grid::before{ display:none; }
  .tl-year{ 
    position: static; 
    justify-self: start; 
    margin-top: 8px; 
  }
  .tl-body{ 
    padding: 14px; 
    font-size: 0.95rem;
  }
  .tl-body::before{ display:none; }
}