グラデーション背景タイムライン

<ul class="d06-08-10-line">
          <li><span class="d06-08-10-dot"></span><div class="d06-08-10-body"><span class="d06-08-10-yr">2017</span><h4>創業</h4><p>個人事業として開業</p></div></li>
          <li><span class="d06-08-10-dot"></span><div class="d06-08-10-body"><span class="d06-08-10-yr">2020</span><h4>法人設立</h4><p>株式会社として組織化</p></div></li>
          <li><span class="d06-08-10-dot"></span><div class="d06-08-10-body"><span class="d06-08-10-yr">2024</span><h4>支社開設</h4><p>大阪に第二拠点を開設</p></div></li>
        </ul>

.d06-08-10{padding:20px 18px;background:linear-gradient(135deg,#eef3ff 0%,#fdf1f6 100%);}
        .d06-08-10-line{list-style:none;margin:0;padding:0;position:relative;width:100%;}
        .d06-08-10-line::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:rgba(120,110,200,.35);}
        .d06-08-10-line li{position:relative;padding:0 0 18px 24px;}
        .d06-08-10-line li:last-child{padding-bottom:0;}
        .d06-08-10-dot{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;background:#8b6fd8;border:2px solid #fff;box-shadow:0 0 0 1px #8b6fd8;}
        .d06-08-10-yr{display:block;font-size:11px;color:#8b6fd8;font-weight:700;}
        .d06-08-10-body h4{margin:2px 0 3px;font-size:13px;color:#333;}
        .d06-08-10-body p{margin:0;font-size:10.5px;color:#777;line-height:1.4;}