星やアイコンで示す評価スタッツ

<div class="d05-04-09-stats">
          <div class="d05-04-09-row">
            <span class="d05-04-09-label">総合満足度</span>
            <div class="d05-04-09-stars">
              <i class="d05-04-09-star">★</i><i class="d05-04-09-star">★</i><i class="d05-04-09-star">★</i><i class="d05-04-09-star">★</i><i class="d05-04-09-star d05-04-09-half">★</i>
            </div>
            <span class="d05-04-09-score">4.5</span>
          </div>
          <div class="d05-04-09-row">
            <span class="d05-04-09-label">リピート意向</span>
            <div class="d05-04-09-dots">
              <i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i><i class="d05-04-09-dot d05-04-09-off"></i>
            </div>
            <span class="d05-04-09-score">4.0</span>
          </div>
          <div class="d05-04-09-row">
            <span class="d05-04-09-label">おすすめ度</span>
            <div class="d05-04-09-dots">
              <i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i><i class="d05-04-09-dot"></i>
            </div>
            <span class="d05-04-09-score">5.0</span>
          </div>
        </div>

.d05-04-09 .d05-04-09-stats{display:flex;flex-direction:column;gap:16px;width:100%}
        .d05-04-09 .d05-04-09-row{display:flex;align-items:center;gap:10px}
        .d05-04-09 .d05-04-09-label{width:88px;font-size:12px;color:#5a6273;flex:0 0 auto}
        .d05-04-09 .d05-04-09-stars,.d05-04-09 .d05-04-09-dots{display:flex;gap:5px;flex:1}
        .d05-04-09 .d05-04-09-star{font-size:20px;color:#ddd;font-style:normal;opacity:0;transform:scale(.4);
          transition:opacity .35s ease,transform .35s ease}
        .d05-04-09.is-in .d05-04-09-star{color:#f4b400;opacity:1;transform:scale(1)}
        .d05-04-09.is-in .d05-04-09-star.d05-04-09-half{color:#f4d78a}
        .d05-04-09 .d05-04-09-dot{width:16px;height:16px;border-radius:50%;background:#ddd;opacity:0;transform:scale(.4);
          transition:opacity .35s ease,transform .35s ease,background .35s ease}
        .d05-04-09.is-in .d05-04-09-dot{background:#2b5cff;opacity:1;transform:scale(1)}
        .d05-04-09.is-in .d05-04-09-dot.d05-04-09-off{background:#dfe4ee}
        .d05-04-09.is-in .d05-04-09-star:nth-child(2),.d05-04-09.is-in .d05-04-09-dot:nth-child(2){transition-delay:.1s}
        .d05-04-09.is-in .d05-04-09-star:nth-child(3),.d05-04-09.is-in .d05-04-09-dot:nth-child(3){transition-delay:.2s}
        .d05-04-09.is-in .d05-04-09-star:nth-child(4),.d05-04-09.is-in .d05-04-09-dot:nth-child(4){transition-delay:.3s}
        .d05-04-09.is-in .d05-04-09-star:nth-child(5),.d05-04-09.is-in .d05-04-09-dot:nth-child(5){transition-delay:.4s}
        .d05-04-09 .d05-04-09-score{font-size:16px;font-weight:800;color:#2a3140;flex:0 0 auto;width:34px;text-align:right}