手描き風下線・囲みスクリブル装飾

<div class="scrib07-08-03">
          <p class="row">
            <span class="word underline-word">重要な語句
              <svg class="deco deco-underline" viewBox="0 0 100 20" preserveAspectRatio="none">
                <path d="M2,12 Q15,2 30,10 T60,8 T98,12"></path>
              </svg>
            </span>
          </p>
          <p class="row row2">
            <span class="word circle-word">強調ワード
              <svg class="deco deco-circle" viewBox="0 0 120 50" preserveAspectRatio="none">
                <path d="M10,25 Q8,8 40,6 Q90,3 112,18 Q118,30 95,40 Q50,48 15,38 Q2,32 10,25 Z"></path>
              </svg>
            </span>
          </p>
        </div>

.d07-08-03 .scrib07-08-03{
          font-family:sans-serif;
          font-size:20px;
          color:#1e293b;
          line-height:2.4;
          text-align:left;
        }
        .d07-08-03 .row{
          margin:0;
        }
        .d07-08-03 .row2{
          margin-top:20px;
        }
        .d07-08-03 .word{
          position:relative;
          display:inline-block;
        }
        .d07-08-03 .deco{
          position:absolute;
          pointer-events:none;
        }
        .d07-08-03 .deco path{
          fill:none;
        }
        .d07-08-03 .deco-underline{
          left:-4px;
          bottom:-10px;
          width:calc(100% + 8px);
          height:16px;
        }
        .d07-08-03 .deco-underline path{
          stroke:#ef4444;
          stroke-width:3;
          stroke-linecap:round;
        }
        .d07-08-03 .deco-circle{
          left:-16px;
          top:-12px;
          width:calc(100% + 32px);
          height:calc(100% + 22px);
        }
        .d07-08-03 .deco-circle path{
          stroke:#2563eb;
          stroke-width:3;
          stroke-linecap:round;
        }