/*
 * 東青協50年の歩み（/history/）「活字を拾う＋年号が走る」
 * html.ts50-tl-on のときだけ動かす（JSが動かないときは、もとの年表の見た目のまま）
 */
.ts50-history-page .post_content { max-width: 1100px !important; }

/* JSが組み終わるまで、動かす部分は隠しておく */
.ts50-tl-on:not(.ts50-tl-ready) .ts50-article h2.ts50-yh,
.ts50-tl-on:not(.ts50-tl-ready) .ts50-milestone { visibility: hidden; }

/* 数字が回るカウンター */
.ts50-odo { display: inline-flex; height: 1.15em; overflow: hidden; line-height: 1.15; vertical-align: bottom; }
.ts50-odo > span { display: flex; flex-direction: column; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.ts50-odo > span > span { display: block; height: 1.15em; }
/* 年表の札の中の数字は、札の年号の大きさのまま（札の説明文用の span の指定を打ち消す） */
.ts50-article .ts50-milestone small .ts50-odo,
.ts50-article .ts50-milestone small .ts50-odo span { margin: 0; font-size: inherit !important; line-height: 1.15 !important; letter-spacing: inherit; color: inherit !important; }

/* 左に年号、右に本文 */
.ts50-tl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 56px; margin-top: 40px; }
.ts50-tl__rail { position: relative; }
.ts50-tl__stick { position: sticky; top: calc(var(--ts50-head, 80px) + 40px); padding-top: 24px; }
.ts50-tl__now { margin: 0 !important; font-family: var(--a-mincho); color: var(--a-spot); line-height: 1; }
.ts50-tl__big { font-size: 64px; font-weight: 800; letter-spacing: .01em; }
.ts50-tl__range { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: #5a6270; }
/* 本文用のリストやリンクの飾り（番号・丸いボタン）は打ち消す */
.ts50-tl .ts50-tl__index { margin: 28px 0 0 !important; padding: 0 0 0 16px !important; list-style: none !important; border-left: 1px solid #d9d2c3; }
.ts50-tl .ts50-tl__index li { margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; }
.ts50-tl .ts50-tl__index li::before, .ts50-tl .ts50-tl__index li::marker { content: none !important; display: none !important; }
.ts50-tl .ts50-tl__index a { position: relative; display: block; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 5px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--a-mincho); font-size: 13px !important; font-weight: 600; line-height: 1.6 !important; letter-spacing: .04em; text-align: left !important; color: #9a9ea6 !important; text-decoration: none !important; transition: color .3s; }
.ts50-tl .ts50-tl__index a::after { content: none !important; }
.ts50-tl__index a::before { content: ""; position: absolute; left: -20px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--a-spot); transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.ts50-tl__index a:hover { color: var(--a-ink) !important; }
.ts50-tl__index .is-current a { color: var(--a-ink) !important; }
.ts50-tl__index .is-current a::before { transform: scale(1); }

/* 本文側の見出し：年は左の札に出すので隠し、罫線は動かして引く */
.ts50-history-page .ts50-tl h2.ts50-yh { position: relative; display: block !important; margin: 104px 0 28px !important; padding-top: 26px !important; border-top: 0 !important; scroll-margin-top: calc(var(--ts50-head, 80px) + 24px); }
.ts50-history-page .ts50-tl__body > h2.ts50-yh:first-child { margin-top: 0 !important; }
.ts50-tl h2.ts50-yh .ts50-yh__year { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts50-tl h2.ts50-yh .ts50-yh__title { display: block; font-size: 1.22em; line-height: 1.45; }
.ts50-tl h2.ts50-yh .ts50-yh__sub { display: block; margin-top: 8px; }
.ts50-tl__rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--a-ink); transform: scaleX(0); transform-origin: 0 50%; }
.ts50-tl h2.is-in .ts50-tl__rule { transition: transform .7s cubic-bezier(.7, 0, .2, 1); transform: scaleX(1); }

/* 活字：少し傾いて上から落ち、行にそろう */
.ts50-ch { display: inline-block; white-space: pre; opacity: 0; transform: translateY(-.9em) rotate(var(--r, 0deg)); }
.ts50-tl h2.is-in .ts50-ch { animation: ts50TlDrop .55s cubic-bezier(.3, 1.5, .5, 1) calc(.35s + var(--i) * 40ms) forwards; }
@keyframes ts50TlDrop {
  0% { opacity: 0; transform: translateY(-.9em) rotate(var(--r, 0deg)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.ts50-tl h2.ts50-yh .ts50-yh__sub { opacity: 0; transform: translateY(8px); }
.ts50-tl h2.is-in .ts50-yh__sub { transition: opacity .7s ease var(--sd, .8s), transform .7s ease var(--sd, .8s); opacity: 1; transform: none; }

/* 本文の段落 */
.ts50-tl__body > .ts50-tl-rv:not(h2) { opacity: 0; transform: translateY(16px); }
.ts50-tl__body > .ts50-tl-rv.is-in:not(h2) { transition: opacity .9s ease .1s, transform .9s cubic-bezier(.2, .7, .2, 1) .1s; opacity: 1; transform: none; }

/* 上の年表の札：1枚ずつ置かれる */
.ts50-milestones.ts50-tl-rv .ts50-milestone { opacity: 0; transform: translateY(-22px) rotate(-3deg); }
.ts50-milestones.is-in .ts50-milestone { animation: ts50TlCard .6s cubic-bezier(.3, 1.4, .5, 1) calc(var(--k) * 110ms) forwards; }
@keyframes ts50TlCard { to { opacity: 1; transform: none; } }

/* スマホ：年号の札は上に貼りつく帯に */
@media (max-width: 860px) {
  .ts50-tl { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .ts50-tl__rail { position: sticky; top: var(--ts50-head, 52px); z-index: 5; margin: 0 -20px; padding: 0 20px; background: #f4f1ea; border-bottom: 1px solid #d9d2c3; box-shadow: 0 6px 14px -12px rgba(0, 16, 64, .35); }
  .ts50-tl__stick { position: static; padding: 8px 0 6px; }
  .ts50-tl__now { display: flex; align-items: baseline; gap: 10px; }
  .ts50-tl__big { font-size: 30px; }
  .ts50-tl__range { margin: 0; font-size: 13px; }
  .ts50-tl__index { display: none; }
  .ts50-history-page .ts50-tl h2.ts50-yh { margin-top: 72px !important; }
  .ts50-history-page .ts50-tl__body > h2.ts50-yh:first-child { margin-top: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ts50-odo > span { transition: none; }
  .ts50-ch, .ts50-tl h2.ts50-yh .ts50-yh__sub, .ts50-tl__body > .ts50-tl-rv:not(h2), .ts50-milestones.ts50-tl-rv .ts50-milestone { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ts50-tl__rule { transform: none; }
}