【吹き出し】右アイコン吹き出し03-think

下記Beyondコード

JS head

なし

HTML

<div class="balloon_right_03think">
    <div class="faceicon_right_03think">
        <!--画像の入れ替えは下記URL変更もしくは左に表示されている画像を選択した後に上部の画像ボタンからも入れ替え可能-->
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/631031/65882372-a684-416b-a484-fe55664b6da8.png" draggable="false" class="lazyload" height="50" width="50">
    </div>
    <div class="outline-right_03think">
        <div class="right_03think">
            <p>こちらに文章を入力。色変更もできます。</p>
        </div>
    </div>
</div>

CSS

 .balloon_right_03think {
  width: 100%;
  margin: 1.5em 0;
  overflow: visible;
  display: flex;
  flex-direction: row-reverse;
}

 .faceicon_right_03think {
  flex-basis: 55px;
  flex-shrink: 0;
  align-self: flex-end;
}

 .faceicon_right_03think img {
  width: 55px;
  max-width: 55px;
  height: 55px !important;
  object-fit: cover;
  /*アイコン周りの線。線の種類｜線の太さ｜線の色*/
  border: solid 3px #ffe6d9;
  border-radius: 50%;
  box-sizing: border-box;
}

 .outline-right_03think {
  width: auto;
}

 .right_03think {
  display: inline-block;
  position: relative;
  margin: 0 25px 0 0px;
  padding: 12px;
  /*一番大きい吹き出しの背景色*/
  background-color: #ffe6d9;
  border-radius: 20px;
  margin-right: 50px;
}

 .right_03think::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  /*中くらいの真ん中にある吹き出しの背景色*/
  background-color: #ffe6d9;
  right: -29px;
  top: 25%;
  width: 22px;
  height: 22px;
}

 .right_03think::after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  /*一番小さい吹き出しの背景色*/
  background-color: #ffe6d9;
  right: -45px;
  top: 50%;
  width: 12px;
  height: 12px;
}

 .right_03think p {
  margin: 0;
  padding: 0;
  letter-spacing: -0.01em;
}