いつもお世話になっております。

マスターズの投稿( https://forum.ec-masters.net/post_view.php?id=8507 )
見ながらやってみたのですが、うまくいかなくて

http://maerc.me/170418/?fbclid=IwAR0gxuatE7cQzfT9nQUkYdj45_ZLv-ZW6CECRgBIqH1NRe4n7nddXIOOGW0
こちらを参考にやってみたら、画像スペースは開いたのですが画像が表示されず

どこが間違っているのか教えてください。
よろしくお願いいたします。

▼このページのスマホ版
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

▼書いたCSS
@charset "utf-8";
/* CSS Document */

/* 選択肢名前に画像出す - 縦軸専用
---------------------------------- */
/* 天体観測 */

/* 1項目目 黄色 */
.itemSelectPopUp dl:nth-child(4) dd:nth-child(2):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1);
}

/* 2項目目 青 */
.itemSelectPopUp dl:nth-child(4) dd:nth-child(3):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353301.jpg?_ex=200x200&s=0&r=1);
}

/* 3項目目 赤 */
.itemSelectPopUp dl:nth-child(4) dd:nth-child(4):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/shohin/compass1540355446.jpg?_ex=200x200&s=0&r=1);
}


.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
width: 80px;
height: 80px;
background-size: 40px;
background-repeat: no-repeat;
background-position: center;
}

.itemSelectPopUp dl .icon {
position: relative;
left: 80px;
}
.itemSelectPopUp dl .name {
padding-left: 80px
}
.itemSelectPopUp dl .caption {
padding-left: 80px
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
background-color: #5c4b43 !important;
}
.itemSelectPopUp dd {
min-height: 80px;
height: 81px;
}
.itemSelectPopUp .itemSelectRadio{
top:40%;
}
.itemSelectPopUp .itemSelectRadio + .selected {
top: 44%;
}