ガントチャート風スケジュール

<div class="d05-03-09-gantt">
          <div class="d05-03-09-row"><span class="d05-03-09-lbl">企画</span><div class="d05-03-09-track"><span class="d05-03-09-bar" style="--s:0%;--w:35%"></span></div></div>
          <div class="d05-03-09-row"><span class="d05-03-09-lbl">設計</span><div class="d05-03-09-track"><span class="d05-03-09-bar" style="--s:25%;--w:40%"></span></div></div>
          <div class="d05-03-09-row"><span class="d05-03-09-lbl">制作</span><div class="d05-03-09-track"><span class="d05-03-09-bar" style="--s:55%;--w:35%"></span></div></div>
          <div class="d05-03-09-row"><span class="d05-03-09-lbl">納品</span><div class="d05-03-09-track"><span class="d05-03-09-bar" style="--s:85%;--w:15%"></span></div></div>
          <div class="d05-03-09-wk"><span>1週</span><span>2週</span><span>3週</span><span>4週</span></div>
        </div>

.d05-03-09-gantt{width:100%;max-width:300px}
        .d05-03-09-row{display:flex;align-items:center;margin-bottom:10px}
        .d05-03-09-lbl{flex:none;width:44px;font-size:11px;color:#475569;font-weight:700}
        .d05-03-09-track{position:relative;flex:1;height:16px;background:#eef2f8;border-radius:8px}
        .d05-03-09-bar{position:absolute;left:var(--s);top:0;height:100%;width:0;background:linear-gradient(90deg,#4f7cff,#7aa0ff);border-radius:8px;transition:width .9s cubic-bezier(.22,1,.36,1)}
        .d05-03-09.is-in .d05-03-09-bar{width:var(--w)}
        .d05-03-09.is-in .d05-03-09-row:nth-child(2) .d05-03-09-bar{transition-delay:.15s}
        .d05-03-09.is-in .d05-03-09-row:nth-child(3) .d05-03-09-bar{transition-delay:.3s}
        .d05-03-09.is-in .d05-03-09-row:nth-child(4) .d05-03-09-bar{transition-delay:.45s}
        .d05-03-09-wk{display:flex;justify-content:space-around;padding-left:44px;font-size:9px;color:#94a3b8;margin-top:2px}