/* ===== 年表：ベース ===== */
.tl-hero{
  margin-top: 8px;
  background:
    radial-gradient(80vw 50vh at 12% -10%, rgba(255,244,214,.9), rgba(255,244,214,.35) 60%, transparent 80%),
    linear-gradient(to bottom, #fffdf8, #fff8ef);
  border:1px solid #ead9b0;
  border-radius:16px;
  padding:18px;
}
.tl-hero .page-title{ margin:4px 0 8px; }
.tl-hero .lead{ color:#475569; }
.tl-quick, .tl-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tl-filters .chip{ cursor:pointer; }
.tl-filters .chip.is-active{ background:#111827; color:#fff; }

/* ===== タイムライン本体 ===== */
.timeline{ margin: 22px 0 28px; display:flex; flex-direction:column; gap:26px; }
.tl-era{
  display:grid; grid-template-columns: 120px 1fr; gap:16px;
  padding:16px; border:1px solid #eee; border-radius:14px; background: #fff;
  content-visibility:auto; contain-intrinsic-size: 600px;
}
.tl-year{
  font-weight:700; color:#7c5c16;
  position: sticky; top: 76px; /* ヘッダー高さ+余白 */
  height: fit-content;
}
.tl-items{ display:grid; gap:14px; }

.tl-item{
  border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px;
  background:
    linear-gradient(180deg,#fff,#fafaf9);
  box-shadow: 0 3px 10px rgba(0,0,0,.03);
}
.tl-item-title{ margin:0 0 6px; font-size:1.05rem; }
.tl-item-meta{ margin:0 0 6px; color:#64748b; font-size:.9rem; }
.tl-item-body{ margin:0; color:#374151; }
.tl-item .note{ color:#b9811d; font-size:.9rem; margin-left:.25em; }

/* ===== モバイル調整 ===== */
@media (max-width: 960px){
  .tl-era{ grid-template-columns: 1fr; }
  .tl-year{ position: static; color:#9a6a17; }
  .tl-hero{ padding:14px; }
}

/* アニメーション少しだけ */
.tl-item{ transition: transform .12s ease, box-shadow .12s ease; }
.tl-item:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }

/* スクロール余裕（読みやすさ） */
section, .tl-era{ scroll-margin-top: 72px; }
/* === Timeline page === */
.tl-hero{
  margin-top: 14px;
  padding: 28px 18px;
  border: 1px solid var(--line,#eee);
  border-radius: 16px;
  background:
    radial-gradient(70vw 40vh at 12% -10%, rgba(255,244,214,.9), rgba(255,244,214,.25) 60%, transparent 80%),
    linear-gradient(to bottom,#fffdf8,#fffaf1);
}
.tl-hero h1{ font-size: clamp(1.2rem, 2.8vw, 1.8rem); margin: 4px 0 8px; }
.tl-hero .lead{ color:#475569; }

.tl-anchor{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.tl-anchor a{
  display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; text-decoration:none; font-weight:600; color:#334155;
}
.tl-anchor a:hover{ border-color:#cbd5e1; }

/* Era block */
.tl-era{
  position:relative;
  margin: 26px 0;
  padding: 18px 14px;
  border:1px solid #f0e6c8;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #fffaf1 70%);
  overflow:hidden;
}
.tl-era::before{
  content:"";
  position:absolute; inset:0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity:.08;         /* ほんのり背景に */
  pointer-events:none;
  mask-image: radial-gradient(120% 80% at 50% 30%, #000 70%, transparent 100%);
}
.tl-era[data-bg]::before{ background-image: attr(data-bg url); }

.tl-era-title{
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  margin: 0 0 10px; padding-left: 8px;
  border-left: 4px solid #b9811d;
}

.tl-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tl-item{
  background:#fff; border:1px solid #f2ead2; border-radius:12px; padding:12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.tl-item time{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#fff7d6; border:1px solid #f3e6b1; color:#7c5c16; font-weight:700; font-variant-numeric: tabular-nums;
  margin-bottom:4px;
}
.tl-item h3{ margin:.2rem 0 .2rem; font-size:1.05rem; }
.tl-item p{ color:#475569; margin:0; }

/* 余白と読みやすさ（スマホ重視） */
@media (max-width: 720px){
  .page{ padding-left: 12px; padding-right: 12px; }
  .tl-hero{ padding: 20px 14px; }
  .tl-item{ padding: 12px; }
}

/* デスクトップではゆったり */
@media (min-width: 960px){
  .tl-list{ grid-template-columns: repeat(2, 1fr); }
}
/* === Timeline page === */
.tl-hero{
  margin-top: 14px;
  padding: 28px 18px;
  border: 1px solid var(--line,#eee);
  border-radius: 16px;
  background:
    radial-gradient(70vw 40vh at 12% -10%, rgba(255,244,214,.9), rgba(255,244,214,.25) 60%, transparent 80%),
    linear-gradient(to bottom,#fffdf8,#fffaf1);
}
.tl-hero h1{ font-size: clamp(1.2rem, 2.8vw, 1.8rem); margin: 4px 0 8px; }
.tl-hero .lead{ color:#475569; }

.tl-anchor{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.tl-anchor a{
  display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; text-decoration:none; font-weight:600; color:#334155;
}
.tl-anchor a:hover{ border-color:#cbd5e1; }

/* Era block */
.tl-era{
  position:relative;
  margin: 26px 0;
  padding: 18px 14px;
  border:1px solid #f0e6c8;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #fffaf1 70%);
  overflow:hidden;
}
.tl-era::before{
  content:"";
  position:absolute; inset:0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity:.08;         /* ほんのり背景に */
  pointer-events:none;
  mask-image: radial-gradient(120% 80% at 50% 30%, #000 70%, transparent 100%);
}
.tl-era[data-bg]::before{ background-image: attr(data-bg url); }

.tl-era-title{
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  margin: 0 0 10px; padding-left: 8px;
  border-left: 4px solid #b9811d;
}

.tl-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tl-item{
  background:#fff; border:1px solid #f2ead2; border-radius:12px; padding:12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.tl-item time{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#fff7d6; border:1px solid #f3e6b1; color:#7c5c16; font-weight:700; font-variant-numeric: tabular-nums;
  margin-bottom:4px;
}
.tl-item h3{ margin:.2rem 0 .2rem; font-size:1.05rem; }
.tl-item p{ color:#475569; margin:0; }
/* --- Timeline Story --- */
.tl-item.tl-story summary h3{display:flex;align-items:center;gap:.4em}
.tl-item.tl-story summary h3::after{
  content:"物語"; font-size:.7em; color:#7c5c16;
  padding:.15em .5em; border:1px solid #f3e6b1; border-radius:999px; background:#fff7d6;
}

.tl-detail .dialog{list-style:none; padding:0; margin:.2rem 0}
.tl-detail .dialog li{margin:.35rem 0; line-height:1.65}
.tl-detail .dialog b{
  display:inline-block; margin-right:.4em; font-weight:700; color:#334155;
  background:#fff; border:1px solid #e8e5da; border-radius:999px; padding:.1em .55em;
}
.tl-detail .aside{color:#64748b; font-size:.9rem; margin-top:.4rem}
.tl-list{ display: grid; gap: 12px; }
.tl-item{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; }
.tl-item summary{ cursor:pointer; font-weight:700; list-style:none; }
.tl-item summary::-webkit-details-marker{ display:none; }
.tl-item[open]{ background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.tl-item .story{ margin-top:.6rem; line-height:1.9; }

/* 時代ブロックの薄い背景（任意） */
.tl-era{ border-radius:12px; padding:10px 12px; background:#fffdf7; }

/* 余白と読みやすさ（スマホ重視） */
@media (max-width: 720px){
  .page{ padding-left: 12px; padding-right: 12px; }
  .tl-hero{ padding: 20px 14px; }
  .tl-item{ padding: 12px; }
}

/* デスクトップではゆったり */
@media (min-width: 960px){
  .tl-list{ grid-template-columns: repeat(2, 1fr); }
}