星とハートの装飾見出し

<h4 class="d02-15-11-heading">
          <span class="d02-15-11-icons" aria-hidden="true"></span>
          大人気サービス
        </h4>

.d02-15-11{background:#fff}
        .d02-15-11-heading{display:flex;align-items:center;gap:8px;margin:0;font-size:20px;font-weight:800;color:#1f2937}
        .d02-15-11-icons{display:inline-flex;gap:2px}
        .d02-15-11-icons svg{width:22px;height:22px;overflow:visible}
        .d02-15-11-icons path{stroke:#f59e0b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:transparent;stroke-dasharray:120;stroke-dashoffset:120;transition:fill .3s ease 1.3s}
        .d02-15-11.is-in .d02-15-11-icons svg:nth-child(1) path{animation:d1811draw .8s ease-out forwards}
        .d02-15-11.is-in .d02-15-11-icons svg:nth-child(2) path{animation:d1811draw .8s ease-out .2s forwards}
        .d02-15-11.is-in .d02-15-11-icons svg:nth-child(3) path{animation:d1811draw .8s ease-out .4s forwards}
        .d02-15-11.is-in .d02-15-11-icons path{fill:#fbbf24}
        @keyframes d1811draw{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-11-icons path{animation:none!important;stroke-dashoffset:0;fill:#fbbf24;transition:none}}

(function(){
        var wrap=document.querySelector('.d02-15-11-icons');if(!wrap)return;
        var starPath='M11,1 L13.5,7.5 L20,8 L15,12.5 L16.5,19 L11,15.5 L5.5,19 L7,12.5 L2,8 L8.5,7.5 Z';
        var heartPath='M11,19 C4,13.5 1,9.5 1,6 C1,3 3.5,1 6.5,1 C8.5,1 10,2 11,3.5 C12,2 13.5,1 15.5,1 C18.5,1 21,3 21,6 C21,9.5 18,13.5 11,19 Z';
        var shapes=[starPath,heartPath,starPath];
        shapes.forEach(function(d){
          var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
          svg.setAttribute('viewBox','0 0 22 22');
          var path=document.createElementNS('http://www.w3.org/2000/svg','path');
          path.setAttribute('d',d);
          svg.appendChild(path);
          wrap.appendChild(svg);
        });
      })();