CSSがうまく反応しない

実現したいこと

・吹き出し型のCSSをちゃんと反映させたい

前提

ワードプレスで記事を書いています。
他のテーマを使用している時は、全く問題ないです。
今回「AFFINGER」というテーマに変えてから、いくつか問題が発生しました。
その内の1つが今回の現象です。
https://pikapika-woman.blog/test/hukidashi

正解はこう

発生している問題・エラーメッセージ

どこにエラーが出ているのかがわからないため省略。

該当のソースコード

<div class="balloon"> <div class="faceicon"> <!--画像の入れ替えは下記URL変更もしくは左に表示されている画像を選択した後に上部の画像ボタンからも入れ替え可能--><picture><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/1666730/e1ca2756-7f44-4a5c-ac39-fbb4a91c0e2b.jpg" width="55" height="55" class="entered loaded" draggable="false" data-src="https://file.mysquadbeyond.com/uploads/article_photo/photo/1666730/e1ca2756-7f44-4a5c-ac39-fbb4a91c0e2b.jpg" data-ll-status="loaded"><source type="image/webp" data-srcset="https://file.mysquadbeyond.com/uploads/article_photo/photo/1666730/e1ca2756-7f44-4a5c-ac39-fbb4a91c0e2b.webp" srcset="https://file.mysquadbeyond.com/uploads/article_photo/photo/1666730/e1ca2756-7f44-4a5c-ac39-fbb4a91c0e2b.webp"><source type="image/avif" data-srcset="https://file.mysquadbeyond.com/uploads/article_photo/photo/1666730/e1ca2756-7f44-4a5c-ac39-fbb4a91c0e2b.avif" srcset="https://file.mysquadbeyond.com/uploads/article_photo/photo/1666730/e1ca2756-7f44-4a5c-ac39-fbb4a91c0e2b.avif"></picture> </div> <div class="chatting"><div class="says"><p><font color="#ff0000"><b><span style="font-size: 18px;" class="sb-fs-free">ワキガ悩みから解放される…<br>その先生って一体何者なの!?</span></b></font></p></div></div> </div>

.balloon { width: 100%; /*周りの余白。上下｜左右*/ margin: 1.5em 0; display: flex; } .chatting { /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定してください*/ width: auto; } .faceicon { flex-basis: 55px; flex-shrink: 0; } .faceicon img { width: 55px; max-width: 55px; height: 55px !important; object-fit: cover; border-radius: 50%; box-sizing: border-box; } .chatting { /*吹き出しの背景色。下の.chatting:beforeと色を合わせてください */ background: #baeaff; margin: 0 14px auto; min-height: 27px; padding: 5px 13px; border-radius: 22px; /*吹き出しの影。水平方向の距離｜垂直方向の距離｜ぼかし距離｜広がり距離｜影の色の順*/ box-shadow: 2px 2px 3px 0px #cccccc; position: relative; display: inline-block; box-sizing: border-box; } .chatting:before { /*吹き出しのしっぽ部分の色変更は下記２行のカラーコード*/ border-right: 12px solid #baeaff; border-right-color: #baeaff; left: -15px; border-top-right-radius: 100%; transform: rotate(285deg); width: 24px; height: 18px; top: 10px; content: ''; position: absolute; box-sizing: border-box; } .says p { margin: 0; padding: 0; letter-spacing: -0.01em; }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。