タイピング風見出しヒーロー

<div class="d01-01-04-hero">
          <div class="d01-01-04-inner">
            <h1><span class="d01-01-04-text"></span><span class="d01-01-04-caret"></span></h1>
            <p>一文字ずつ紡がれる言葉が、訪問者の目を惹きつけます。</p>
          </div>
        </div>

.prev.d01-01-04{padding:0;display:block;min-height:320px}
        .d01-01-04-hero{height:320px;display:flex;align-items:center;justify-content:center;background:#101418;text-align:center}
        .d01-01-04-inner{padding:24px;max-width:92%}
        .d01-01-04-hero h1{color:#e8f0ff;font-size:24px;font-weight:700;letter-spacing:.06em;margin:0 0 16px;min-height:1.5em}
        .d01-01-04-caret{display:inline-block;width:2px;height:1.1em;background:#5ad1ff;margin-left:4px;vertical-align:-0.15em;animation:d01-01-04-blink 1s step-end infinite}
        @keyframes d01-01-04-blink{0%,100%{opacity:1}50%{opacity:0}}
        .d01-01-04-hero p{color:rgba(232,240,255,.6);font-size:12.5px;line-height:1.9;margin:0}

(function(){
        var el=document.querySelector('#item-01-01-04 .d01-01-04-text');
        if(!el)return;
        var msg='未来をつくる、Webの力。';
        var i=0;
        function type(){
          if(i<=msg.length){
            el.textContent=msg.slice(0,i);
            i++;
            setTimeout(type,140);
          }else{
            setTimeout(function(){i=0;el.textContent='';setTimeout(type,400);},2200);
          }
        }
        type();
      })();