よろしくお願いします。

PCのページでパンくずリストを見やすくと思いまして探したところ、下記の通りのｃｓｓが見つかり、共通説明文(大）へ以下を貼り付けました。

例えば、https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/　のページで言いますと

・カテゴリ＞宝石
のところのグレー枠線が短いです。100％にしたいです。

・下位カテゴリがの無いところにグレーの四角が出てしまいます。グレーを消したいです。

いろいろいじったのですが、おかしくなってしまい元のに戻したのですが、どこを修正すればよいでしょうか？
申し訳ございませんが教えてください。


<style type="text/css">
<!--
/* パンくずリスト
----------------------*/
td.breadcrumbs_list{
padding:16px 10px;
background:#eee;
display:block;
width:710px;
border-bottom:2px solid #aaa;
}
/* カテゴリリスト
----------------------*/
table table table table td[width="1%"] span.subcategory_list{
display:none;
}
table table table table td[width="33%"] a.subcategory_list{
color: #333333!important;
font-size:12px!important;
text-decoration:none;
border:1px solid #ccc;
padding:8px 0;
border-radius:8px;
width:90%;
display:block;
transition: all 0.2s ease 0s;
margin:0 0 10px;
text-align:center;
position:relative;
background:#FFF;
}
table table table table td[width="33%"] a.subcategory_list:after{
content:">";
font-size:12px;
margin:-6px 0 0;
display:block;
position:absolute;
right:5px;
top:50%;
}
table table table table td[width="33%"] a.subcategory_list:hover{
background:#555;
color:#FFF!important;
border-color:#555;
}
-->
</style>