積み上げ横棒比較

<div class="d05-02-08-wrap">
          <div class="d05-02-08-legend"><span><i class="c1"></i>直接</span><span><i class="c2"></i>紹介</span><span><i class="c3"></i>広告</span></div>
          <div class="d05-02-08-item"><span class="d05-02-08-name">1月</span><div class="d05-02-08-bar"><i class="c1" style="--w:40%"></i><i class="c2" style="--w:30%"></i><i class="c3" style="--w:30%"></i></div></div>
          <div class="d05-02-08-item"><span class="d05-02-08-name">2月</span><div class="d05-02-08-bar"><i class="c1" style="--w:55%"></i><i class="c2" style="--w:20%"></i><i class="c3" style="--w:25%"></i></div></div>
          <div class="d05-02-08-item"><span class="d05-02-08-name">3月</span><div class="d05-02-08-bar"><i class="c1" style="--w:35%"></i><i class="c2" style="--w:40%"></i><i class="c3" style="--w:25%"></i></div></div>
        </div>

.d05-02-08-wrap{width:100%;max-width:270px}
        .d05-02-08-legend{display:flex;gap:12px;justify-content:center;font-size:10px;color:#6b7280;margin-bottom:12px}
        .d05-02-08-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;vertical-align:middle}
        .d05-02-08-item{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11px}
        .d05-02-08-name{width:28px;color:#6b7280;flex-shrink:0}
        .d05-02-08-bar{flex:1;display:flex;height:16px;border-radius:5px;overflow:hidden;background:#f1f5f9}
        .d05-02-08-bar i{width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
        #item-05-02-08.is-in .d05-02-08-bar i{width:var(--w)}
        .d05-02-08-wrap .c1{background:#6366f1}.d05-02-08-wrap .c2{background:#22d3ee}.d05-02-08-wrap .c3{background:#f59e0b}