経歴ミニタイムライン

<ul class="d06-03-10-line io-reveal">
          <li style="--d:0"><span class="d06-03-10-y">2016</span><span class="d06-03-10-t">新卒でIT企業に入社</span></li>
          <li style="--d:1"><span class="d06-03-10-y">2019</span><span class="d06-03-10-t">Webディレクターに昇格</span></li>
          <li style="--d:2"><span class="d06-03-10-y">2022</span><span class="d06-03-10-t">独立・フリーランス開業</span></li>
          <li style="--d:3"><span class="d06-03-10-y">2025</span><span class="d06-03-10-t">制作チームを立ち上げ</span></li>
        </ul>

.d06-03-10-line{list-style:none;margin:0;padding:0 0 0 8px;width:220px;position:relative}
        .d06-03-10-line::before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:2px;background:#e6eaf3}
        .d06-03-10-line li{position:relative;padding:0 0 18px 30px;opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--d) * .18s)}
        .d06-03-10-line li:last-child{padding-bottom:0}
        .d06-03-10-line li::before{content:"";position:absolute;left:5px;top:3px;width:14px;height:14px;border-radius:50%;background:#c3cbe0;border:2px solid #fff;transition:background .4s;transition-delay:calc(var(--d) * .18s)}
        .d06-03-10-line.is-in li{opacity:1;transform:none}
        .d06-03-10-line.is-in li::before{background:#6a8dff}
        .d06-03-10-y{display:block;font-size:12px;font-weight:700;color:#6a8dff}
        .d06-03-10-t{font-size:13px;color:#3a4666}