/* TOKIWA – flow */
/* 縦タイムライン（実工程の順序のため番号を使用） */
.tl{ position:relative; max-width:var(--w-narrow); margin-inline:auto; }
.tl::before{ content:""; position:absolute; left:29px; top:8px; bottom:8px; width:1px; background:var(--c-line); }
.tl-item{ position:relative; display:grid; grid-template-columns:60px 1fr; gap:26px; padding-bottom:clamp(40px,5vw,60px); }
.tl-item:last-child{ padding-bottom:0; }
.tl-num{
  position:relative; z-index:2; width:60px; height:60px; border-radius:50%;
  background:var(--c-base); border:1px solid var(--c-gold-pale);
  display:grid; place-items:center;
  font-family:var(--f-en); font-style:italic; font-size:17px; color:var(--c-gold);
}
.tl-body h2{ font-weight:400; font-size:16.5px; letter-spacing:.2em; padding-top:14px; }
.tl-body p{ margin-top:10px; font-size:13px; color:var(--c-ink-soft); }
.tl-body .ph{ margin-top:20px; aspect-ratio:16/8; }
.tl-term{ display:inline-block; margin-top:12px; font-family:var(--f-en); font-size:11px; letter-spacing:.22em; color:var(--c-gold); border:1px solid var(--c-gold-pale); padding:4px 12px; }
@media (max-width:720px){
  .tl::before{ left:22px; }
  .tl-item{ grid-template-columns:46px 1fr; gap:18px; }
  .tl-num{ width:46px; height:46px; font-size:14px; }
}