ヤフーショッピングにてスマホブラウザで表示したときだけPNGが透過されない

Question

前提・実現したいこと

ヤフーショッピングにてサイトを構築しています。
パソコンのブラウザやスマホアプリにてサイトを表示した際はPNGの透過が適用されていますが、
スマホのブラウザからサイトを表示したときのみPNGの透過が適用されず、背景が白く表示されてしまいます。
パソコンのブラウザはFirefox/Googlechrome、スマホ環境はiPhoneXRです。
PNGの保存形式はPhotoshopの「PNG-24」です。保存時に透明部分にチェックを入れています。

該当のソースコード

該当サイトはこちら（https://store.shopping.yahoo.co.jp/taiyou-cosme/）で、Brand listの「Sulwhasoo」というPNG画像の部分(https://shopping.c.yimg.jp/lib/taiyou-cosme/logo_sulwhasoo.png)がスマホブラウザ表示の際に透過できません。

<div class="brand-child1" style="position:absolute;margin-left:1em;z-index:2;">
  <img src="https://shopping.c.yimg.jp/lib/taiyou-cosme/f42e4aedd23f8bcd8bb7af680a1abc67.png" alt="" style="vertical-align:middle;" width="480px">
</div>

<div class="brand-child2" style="position:absolute;background-color:#86bf3f;top:1.5em;right:0px;width:95%;min-height:300px;z-index:1;">
 <div class="bc2" style="position:absolute;left:48%;top:3em;">
 <img src="https://shopping.c.yimg.jp/lib/taiyou-cosme/logo_sulwhasoo.png" alt="" style="vertical-align:middle;" width="180px">
 <p class="bc2p" style="font-size:16px;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;color:#333;padding-top:2em;padding-bottom:2em;padding-right:0;padding-left:1em;">ホリスティックビューティーの考え方を基に、<br>
                    アジアの知恵を凝縮した韓方化粧品<br>
                    Sulwhasoo(雪花秀、ソルファス)<br>
                    眠ってる間の肌にしっかりと栄養を与えるナイトパック</p>
 <a class="button1" href="https://store.shopping.yahoo.co.jp/taiyou-cosme/a5bda5eba5.html" style="position:absolute;background-color:#333;right:0px;padding-top:0.5em;padding-bottom:0.5em;padding-right:3em;padding-left:3em;color:#fff;text-decoration:none;font-size:14px;" target="_top">VIEW MORE</a>
 </div>
</div>
    

試したこと

画像形式をGIFに変更してみましたが透過されませんでした。

解決方法がわかる方がいらっしゃいましたらコメント頂けると助かります。
よろしくお願いいたします。

Answer 1

CSSの影響です。

img {
    background: #fff;
    color: #ccc;
    font-size: 10px;
}

Comments

[ec-]

早速のご回答ありがとうございます。
img に「background-color: transparent;」を指定したところ、透過が適用されました。

大変助かりました！