積み上げ棒グラフ(複数系列固定表示)

<div class="d05-12-06-wrap">
          <div class="d05-12-06-chart">
            <div class="d05-12-06-col"><div class="d05-12-06-stack"><span class="d05-12-06-seg d05-12-06-a1"></span><span class="d05-12-06-seg d05-12-06-b1"></span><span class="d05-12-06-seg d05-12-06-c1"></span></div><span class="d05-12-06-mo">Q1</span></div>
            <div class="d05-12-06-col"><div class="d05-12-06-stack"><span class="d05-12-06-seg d05-12-06-a2"></span><span class="d05-12-06-seg d05-12-06-b2"></span><span class="d05-12-06-seg d05-12-06-c2"></span></div><span class="d05-12-06-mo">Q2</span></div>
            <div class="d05-12-06-col"><div class="d05-12-06-stack"><span class="d05-12-06-seg d05-12-06-a3"></span><span class="d05-12-06-seg d05-12-06-b3"></span><span class="d05-12-06-seg d05-12-06-c3"></span></div><span class="d05-12-06-mo">Q3</span></div>
            <div class="d05-12-06-col"><div class="d05-12-06-stack"><span class="d05-12-06-seg d05-12-06-a4"></span><span class="d05-12-06-seg d05-12-06-b4"></span><span class="d05-12-06-seg d05-12-06-c4"></span></div><span class="d05-12-06-mo">Q4</span></div>
          </div>
          <div class="d05-12-06-legend"><span class="d05-12-06-dot d05-12-06-la"></span>製品A<span class="d05-12-06-dot d05-12-06-lb"></span>製品B<span class="d05-12-06-dot d05-12-06-lc"></span>製品C</div>
        </div>

.d05-12-06{padding:20px 20px 14px;align-items:stretch}
        .d05-12-06-wrap{width:100%;display:flex;flex-direction:column;gap:10px}
        .d05-12-06-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;width:100%;height:160px}
        .d05-12-06-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%}
        .d05-12-06-stack{display:flex;flex-direction:column-reverse;width:100%;max-width:34px;border-radius:4px 4px 0 0;overflow:hidden}
        .d05-12-06-seg{display:block;width:100%}
        .d05-12-06-a1{height:50px;background:#0ea5e9}
        .d05-12-06-b1{height:35px;background:#38bdf8}
        .d05-12-06-c1{height:20px;background:#bae6fd}
        .d05-12-06-a2{height:65px;background:#0ea5e9}
        .d05-12-06-b2{height:40px;background:#38bdf8}
        .d05-12-06-c2{height:25px;background:#bae6fd}
        .d05-12-06-a3{height:45px;background:#0ea5e9}
        .d05-12-06-b3{height:55px;background:#38bdf8}
        .d05-12-06-c3{height:30px;background:#bae6fd}
        .d05-12-06-a4{height:70px;background:#0ea5e9}
        .d05-12-06-b4{height:50px;background:#38bdf8}
        .d05-12-06-c4{height:35px;background:#bae6fd}
        .d05-12-06-mo{margin-top:8px;font-size:10px;color:#94a3b8;font-weight:600}
        .d05-12-06-legend{display:flex;align-items:center;gap:6px;justify-content:center;font-size:10.5px;color:#64748b;font-weight:600}
        .d05-12-06-dot{width:8px;height:8px;border-radius:2px;margin-left:10px;display:inline-block}
        .d05-12-06-legend .d05-12-06-dot:first-child{margin-left:0}
        .d05-12-06-la{background:#0ea5e9}
        .d05-12-06-lb{background:#38bdf8}
        .d05-12-06-lc{background:#bae6fd}