-
widgetについて
-
ありがとうございます！
上記の対応しますと、白い線になってしまいます、、
-
再度確認させていただきます！
編集したversionの名前を共有いただけますか？
-
-
上記になります！
また今回の問題に加えて、ランキング表内の「内容量」の下・「送料」の下の線がなくなってしまう問題も解決したく、ご教示いただけましたら幸いでございます、！
-
おまたせしております！
下記2点ご対応お願いします！
① javascript head を修正バージョンのものに丸ごと入れ替え
【修正バージョン】
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5CRP5BF');</script>
<!-- End Google Tag Manager -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11259970126"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-11259970126');
</script>
<style>
.body .article-body {
overflow:hidden;
}
.tbl-sticky .btn {
position: relative;
display: block;
padding: 1em;
text-decoration: none;
color: #fff;
font-weight: 700;
background-color: #f47118;
border-bottom: solid 3px #ad5515;
border-radius: 4px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.tbl-sticky .btn:hover {
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: solid 1px #ad5515;
}
.tbl-sticky::-webkit-scrollbar {
display: block;
overflow: hidden;
width: 6px;
background: #eee;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/*商品紹介のCSS*/
.box-ad-sp {
font-size: 16px;
-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
width: calc(100% - 10px);
border-radius: 0 0 5px 5px;
margin: 0 auto;
}
@media screen and (max-width: 640px) {
.box-ad-sp {
font-size: 2.5vw;
}
}
.box-ad-sp .content {
padding: 0 3% 4%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box-ad-sp .title {
font-size: 1.5em;
position: relative;
width: calc(100% + 10px);
margin-left: -5px;
padding: 5px;
background-image: linear-gradient(135deg, #c2873b 0%, #ffce08 40%, #e1ce08 60%, #c2873b 100%);
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: none;
}
.box-ad-sp .title>img {
position: absolute;
top: center;
width: 2em;
}
.box-ad-sp .title>a {
padding: 0.2em 0.2em 0.1em 2em;
background-color: #ffffff;
border-radius: 4px;
width: 100%;
display: inline-block;
text-decoration: none;
color: #2f93e5;
-webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box-ad-sp .title::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 5px transparent;
border-right: solid 5px #c2873b;
}
.box-ad-sp .title::after {
position: absolute;
content: '';
top: 100%;
right: 0;
border: none;
border-bottom: solid 5px transparent;
border-left: solid 5px #c2873b;
}
.box-ad-sp .lead {
color: #f70000;
margin-bottom: 20px;
font-weight: 700;
text-align: center;
font-size: 1.1em;
margin: 1em 0;
}
.box-ad-sp .wrap-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box-ad-sp .wrap-item>.item {
padding: 0 2%;
}
.box-ad-sp .wrap-item>.item:nth-child(2) {
-ms-flex-preferred-size: 65%;
flex-basis: 65%;
}
.box-ad-sp .wrap-item figure {
padding: 0;
margin: 0;
}
.box-ad-sp .tbl-rate {
text-align: left;
width: 100%;
margin: 0px;
padding: 0px;
border-spacing: 0;
}
.box-ad-sp .tbl-rate th,
.box-ad-sp .tbl-rate td {
border-bottom: 1px solid #ddd;
padding: 0.5em 0.2em;
}
.box-ad-sp .tbl-rate tr:first-of-type th,
.box-ad-sp .tbl-rate tr:first-of-type td {
border-top: 1px solid #ddd;
}
.box-ad-sp .tbl-rate td:nth-of-type(1) {
font-weight: 700;
color: #efbb5a;
font-size: 1.5em;
letter-spacing: -0.2em;
}
.box-ad-sp .tbl-rate td:nth-of-type(1)>span {
color: #000
;
}
.box-ad-sp .tbl-rate td:nth-of-type(2) {
font-weight: 700;
color: #000
;
}
.box-ad-sp .tbl-rate .total {
background-color: #fffbdd;
color: #e31f1f;
}
.box-ad-sp .tbl-rate .total td:nth-of-type(2) {
color: #e31f1f;
}
.box-ad-sp .tbl-cond {
text-align: center;
border-collapse: collapse;
width: 100%;
margin: 0px;
padding: 0px;
border-spacing: 0;
border: 1px solid #ddd;
margin-top: 1em;
}
.box-ad-sp .tbl-cond th {
font-weight: normal;
background-color: #efefef;
padding: 0.5em;
border-top: 1px solid #ddd;
}
.box-ad-sp .tbl-cond td {
font-weight: 700;
border-top: 1px solid #ddd;
padding: 0.5em;
}
.box-ad-sp .tbl-cond tr:first-of-type th,
.box-ad-sp .tbl-cond tr:first-of-type td {
border: none;
}
.box-ad-sp .list-check {
margin: 1em 0 0;
padding: 0;
list-style: none;
}
.box-ad-sp .list-check>li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 700;
}
.box-ad-sp .list-check>li::before {
content: "";
display: inline-block;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0.1em 0.4em 0 0;
width: 1.2em;
height: 1.2em;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23374149%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%22221.18%2C250.621%20153.547%2C183.836%2091.934%2C245.453%2091.668%2C245.719%2091.668%2C245.719%2091.614%2C245.773%20221.207%2C374.516%20512%2C83.02%20450.121%2C21.14%20450.121%2C21.136%20450.121%2C21.136%20450.062%2C21.082%20407.187%2C64.109%20348.152%2C123.258%20%22%20style%3D%22fill%3A%20rgb(223%2C%2086%2C%2086)%3B%22%3E%3C%2Fpolygon%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M439.379%2C211.941v-0.113l-50.34%2C50.484V407.5c0%2C18.266-14.883%2C33.078-33.078%2C33.078H83.418%20c-18.266%2C0-33.078-14.813-33.078-33.078V259.578v-13.66V134.957c0-18.192%2C14.812-33.082%2C33.078-33.082h230.188l6.543-6.539%20l25.546-25.59l17.809-17.766c-0.023-0.004-0.047-0.004-0.066-0.004l0.074-0.078c-2.446-0.211-4.962-0.36-7.551-0.36H83.418%20C37.394%2C51.539%2C0%2C89.008%2C0%2C134.957V407.5c0%2C46.028%2C37.394%2C83.418%2C83.418%2C83.418h272.543c45.954%2C0%2C83.418-37.39%2C83.418-83.418%20V292.227l0.058-80.34L439.379%2C211.941z%22%20style%3D%22fill%3A%20rgb(223%2C%2086%2C%2086)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.box-ad-sp .wrap-btn {
background-color: #fffede;
padding: 10px 8% 20px;
}
.box-ad-sp .link-btn {
margin-top: 20px;
}
.box-ad-sp .link-btn>a {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
color: #fff;
font-weight: 700;
text-shadow: 0 1px 1px #0000004d;
text-decoration: none;
background-color: #16ac76;
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#36b126), to(#2b8615));
background: linear-gradient(#36b126, #2b8615);
-webkit-box-shadow: 0px 4px 0px #105d14;
box-shadow: 0px 4px 0px #105d14;
border: 0;
font-size: 1.2em;
width: 100%;
margin: 0 auto;
padding: 0.8em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box-ad-sp .link-btn.green>a {
background: -webkit-gradient(linear, left top, left bottom, from(#36b126), to(#2b8615));
background: linear-gradient(#36b126, #2b8615);
-webkit-box-shadow: 0px 4px 0px #105d14;
box-shadow: 0px 4px 0px #105d14;
}
.box-ad-sp .link-btn.blue>a {
background: -webkit-gradient(linear, left top, left bottom, from(#1E9CDE), to(#0562B2));
background: linear-gradient(#1E9CDE, #0562B2);
-webkit-box-shadow: 0 4px 0 #2c527e;
box-shadow: 0 4px 0 #2c527e;
}
/*商品紹介のCSSおわり*/
.btn-area1 {
/*ボタン周りの余白。上下の余白｜左右*/
margin: 0.5em 0;
/*ボタンの水平方向配置。左寄せは flex-start 、真ん中寄せは center、右寄せはflex-end*/
justify-content: center;
display: flex;
}
.btn-area-in {
/* はねる領域の確保 */
padding: 2em 3% 0;
position: relative;
}
.btn1 {
display: inline-block;
/*横幅サイズを変更する場合は下記autoを20%から100%で変更できます*/
width: auto;
/*文字数が少ない場合の最低サイズを指定できます*/
min-width: 250px;
/*文字の大きさ*/
font-size: 16px;
/*ボタンの色*/
background-color: #4CAF50;
/*文字の色*/
color: #fff;
/*文字の太さ。太字はbold、標準の太さはnormal*/
font-weight: bold;
/*水平方向の字間のスペース*/
letter-spacing: 0.1em;
/*ボタンの高さを指定*/
line-height: 1.5;
/*ボタン内側の余白。上下｜左右*/
padding: 1rem 2rem;
/*角を丸くする指定*/
border-radius: 0.5rem;
/*ボタンの影の指定。insetを指定することで、影はボックスの内側に描画されます。
カンマで区切ることで複数の影レイヤーを重ねられます。
左右の向き｜上下の向き｜ぼかし｜広がり｜色
rgbaはRed（赤）,Green（緑）,Blue（青）,Alpha（透明度）の略。三色は0から255まで、Alphaは0.1から1まで*/
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
/*下記はボタンの影を外側にも指定*/
7px 7px 20px 0px rgba(0, 0, 0, 0.1),
4px 4px 5px 0px rgba(0, 0, 0, 0.1);
/*ホバー時アニメーション。変化の対象、変化の始まりから終わりまでの時間、変化の仕方の順に指定*/
transition: all 0.3s ease;
position: relative;
cursor: pointer;
text-align: center;
vertical-align: middle;
text-decoration: none;
box-sizing: border-box;
animation: bound-anim 1s infinite;
}
.btn-area-in::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
margin: auto;
width: 94%;
height: 10px;
border-radius: 50%;
background: #000;
filter: blur(6px);
opacity: 0.9;
animation: shadow-anim 1s infinite;
}
a.btn:hover {
/*ボタンの上にカーソルを置いた時の背景色を指定*/
background: #55c55a;
}
@keyframes bound-anim {
0%,
100% {
transform: scale(1) translate(0%, 0%);
}
30% {
transform: scale(0.96, 1.04) translate(0%, -60%);
}
60% {
transform: scale(1);
}
90% {
transform: scale(1.05, 0.9) translate(0%, 0%);
}
}
@keyframes shadow-anim {
0%,
100% {
transform: scale(1);
filter: blur(4px);
}
30% {
transform: scale(0.8, 1);
filter: blur(8px);
}
}
/*はねるボタンのCSSおわり*/
/*運用者情報のCSS*/
.text a{
color: #000 !important;
}
/*運用者情報のCSSおわり*/
</style>
<!-- おすすめ商品widget -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var accordionTableFunc = accordionTableFunc || {};
(function(_) {
const target = '.js-accordionTable';
_.tableOpen = function(el) {
$(function() {
$('.js-head').click(function() {
$(this).toggleClass('is-active');
$(this).next('.js-table').slideToggle();
$(this).toggleClass("is-open");
})
});
};
/**
* Lazyload画像の読み込みチェック
* @param {object} object チェックしたい画像
* @param {callback} callback ロード完了時に実行する関数
*
*/
_.lazyImgLoaded = function(object, callback) {
if (typeof LazyLoad === 'undefined' || !(object.length)) {
if (!callback) return;
callback();
return;
}
const target = Array.from(object);
const promise = target.map(async (img) => {
return imgCheck(img);
});
Promise.all(promise).then((msg) => {
if (!callback) return;
callback();
});
function imgCheck(img) {
let flg = img.classList.contains('loaded');
return new Promise((resolve, reject) => {
if (flg) {
resolve("OK");
return;
} else {
LazyLoad.load(img, {
callback_loaded: resolve("OK"),
callback_cancel: reject("ERROR"),
callback_error: reject("ERROR")
}); //画像の読み込み
}
});
}
};
_.init = function() {
Array.from(document.querySelectorAll(target), el => {
_.tableOpen(el);
})
};
})(accordionTableFunc);
</script>
<!-- おすすめ商品widgetここまで -->
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "jrdzsdqasj");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js" integrity="sha512-0UbR6HN0dY8fWN9T7fF658896tsPgnbRREHCNq46J9/JSn8GonXDZmqtTc3qS879GM0zV49b9LPhdc/maKP8Kg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.gallery.min.css" integrity="sha512-B31/elyDKOSa2yGC1ALSAHkdlJ5FOhZJTNANGUFxWOnVMfKQmekRG2/sNdp6yJPrO7Ae9rlAxUlr0QjiJne01Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script>
var commentPopupFunc = commentPopupFunc || {};
(function(_) {
_.init = function() {
$('.js-commentBox .js-item').featherlight({
root: '.js-popupRead'
})
}
})(commentPopupFunc);
</script>
<style>
.commentBox__area {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
line-height: 1.5;
box-sizing: border-box;
}
.commentItem {
width: calc((100% - 20px) / 3);
height: auto;
border: 1px solid #ddd;
cursor: pointer;
box-sizing: border-box;
}
@media screen and (max-width:600px) {
.commentItem {
width: calc((100% - 10px) / 2);
height: auto;
}
}
.commentItem__img {
position: relative;
}
.commentItem__img img {
width: 100%;
height: auto;
}
.commentItem__img .appIcon {
width: 20px;
height: 20px !important;
position: absolute;
top: 5px;
left: 5px;
}
.commentItem__text {
padding: 10px;
width: calc(100% - 20px);
}
.comment__name {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.comment__name .userIcon {
margin-right: 5px;
width: 16px;
height: auto;
}
.comment__name .userIcon img {
width: 100%;
height: auto;
}
.comment__name .userName {
font-size: 14px;
font-weight: bold;
color: #333;
}
.comment__text {
margin-top: 10px;
height: 80px !important;
overflow-y: hidden;
position: relative;
}
.comment__text:after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, transparent 60%, #fff 100%);
position: absolute;
top: 0;
left: 0;
}
.comment__text .userComment {
font-size: 13px;
color: #333;
}
.comment__detail {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 10px;
}
.comment__detail .comment__icon {
display: inline-flex;
}
.comment__detail .comment__icon img {
width: 14px;
height: 14px !important;
margin-right: 4px;
}
.comment__detail .date {
font-size: 11px;
color: #333;
}
.featherlight {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
.featherlight-content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
}
@media screen and (max-width:600px) {
.featherlight-content {
padding: 10px;
}
}
.featherlight-close {
position: absolute;
top: -20px;
right: 20px;
border: none;
background: none;
font-size: 24px;
color: #666;
z-index: 2;
}
@media screen and (max-width:600px) {
.featherlight-close {
top: 30px;
right: 30px;
border: none;
background: rgba(255, 255, 255, 0.6);
border-radius: 2px;
font-size: 24px;
color: #666;
}
}
.featherlight-inner {
display: block;
max-width: 900px;
margin: 0 auto;
box-shadow: rgb(0 0 0 / 20%) 0px 0px 5px 0px !important;
display: flex;
justify-content: space-between;
align-items: flex-start;
background: #fff;
}
@media screen and (max-width:600px) {
.featherlight-inner {
max-width: inherit;
max-height: 95vh;
overflow-y: scroll;
padding-bottom: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
}
.featherlight-inner .commentItem__img {
width: calc(45% - 20px);
padding: 20px 0 20px 20px;
}
@media screen and (max-width:600px) {
.featherlight-inner .commentItem__img {
width: 100%;
padding: 0;
}
}
.featherlight-inner .commentItem__img img {
width: 100%;
height: auto;
}
.featherlight-inner .commentItem__img .appIcon {
display: none;
}
.featherlight-inner .commentItem__text {
width: calc(52% - 20px);
padding: 20px 20px 20px 0;
}
@media screen and (max-width:600px) {
.featherlight-inner .commentItem__text {
width: calc(100% - 20px);
padding: 0 10px;
margin-top: 10px;
}
}
.featherlight-inner .commentItem__text .comment__text {
max-height: 300px !important;
height: auto !important;
overflow-y: auto;
}
@media screen and (max-width:600px) {
.featherlight-inner .commentItem__text .comment__text {
max-height: inherit !important;
overflow-y: inherit;
}
}
.featherlight-inner .commentItem__text .comment__name {
display: flex;
justify-content: flex-start;
align-items: center;
}
.featherlight-inner .commentItem__text .comment__name .userIcon {
width: 20px;
height: 20px !important;
margin-right: 10px;
}
.featherlight-inner .commentItem__text .comment__name .userIcon img {
width: 100%;
height: auto;
}
.featherlight-inner .commentItem__text .comment__name .userName {
font-size: 18px;
font-weight: bold;
color: #333;
}
.featherlight-inner .commentItem__text .comment__text {
margin-top: 20px;
}
.featherlight-inner .commentItem__text .comment__text::after {
content: none;
}
.featherlight-inner .commentItem__text .comment__text .userComment {
font-size: 14px;
color: #333;
}
.featherlight-inner .commentItem__text .comment__text .userComment+.userComment {
margin-top: 10px;
}
.featherlight-inner .comment__detail {
display: none;
}
</style>
② 表組のWidget内のCSSを修正バージョンのものに丸ごと入れ替え
【修正バージョン】
/* 表組のCSS */
.tbl-sticky {
overflow-x: auto;
max-width: 100%;
position: relative;
}
.tbl-sticky table {
/* 表の横幅（記事幅を超える部分は横スクロール） */
width: 150%;
table-layout: fixed;
border-top: solid 1px #000;
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
text-align: center;
}
.tbl-sticky table td {
border-right: 1px solid #000;
border-bottom: solid 1px #000;
padding: 0.2em;
box-sizing: border-box;
}
.tbl-sticky table th {
width: 12%;
position: sticky;
left: 0;
z-index: 10;
/* 左端見出しセルの色 */
background-color: #FFC266;
border-right: solid 1px #000;
border-left: solid 1px #000;
line-height: 1.25;
border-top: none;
border-bottom: none;
padding: 0.2em;
box-sizing: border-box;
}
.tbl-sticky table th::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-bottom: solid 1px #000;
pointer-events: none;
}
.ranking-item-ratings .result {
font-size: 1.1em;
font-weight: 300;
}
.ranking-item-ratings .rating {
position: relative;
font-size: 1.1em;
min-height: 1.7em;
line-height: 1.3;
width: 5em;
scale: 1.2;
margin-left: auto;
margin-right: auto;
}
.ranking-item-ratings .rating::before,
.ranking-item-ratings .rating::after {
content: "★★★★★";
color: #D6D6D6;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.ranking-item-ratings .rating::after {
color: #f2cb06;
overflow: hidden;
white-space: nowrap;
}
.ranking-item-ratings .rating[data-rate="0"]::after,
.ranking-item-ratings .rating[data-rate="0.0"]::after {
width: 0%;
}
.ranking-item-ratings .rating[data-rate="0.1"]::after,
.ranking-item-ratings .rating[data-rate="0.1.0"]::after {
width: 2%;
}
.ranking-item-ratings .rating[data-rate="0.2"]::after,
.ranking-item-ratings .rating[data-rate="0.2.0"]::after {
width: 4%;
}
.ranking-item-ratings .rating[data-rate="0.3"]::after,
.ranking-item-ratings .rating[data-rate="0.3.0"]::after {
width: 6%;
}
.ranking-item-ratings .rating[data-rate="0.4"]::after,
.ranking-item-ratings .rating[data-rate="0.4.0"]::after {
width: 8%;
}
.ranking-item-ratings .rating[data-rate="0.5"]::after,
.ranking-item-ratings .rating[data-rate="0.5.0"]::after {
width: 10%;
}
.ranking-item-ratings .rating[data-rate="0.6"]::after,
.ranking-item-ratings .rating[data-rate="0.6.0"]::after {
width: 12%;
}
.ranking-item-ratings .rating[data-rate="0.7"]::after,
.ranking-item-ratings .rating[data-rate="0.7.0"]::after {
width: 14%;
}
.ranking-item-ratings .rating[data-rate="0.8"]::after,
.ranking-item-ratings .rating[data-rate="0.8.0"]::after {
width: 16%;
}
.ranking-item-ratings .rating[data-rate="0.9"]::after,
.ranking-item-ratings .rating[data-rate="0.9.0"]::after {
width: 18%;
}
.ranking-item-ratings .rating[data-rate="1"]::after,
.ranking-item-ratings .rating[data-rate="1.0"]::after {
width: 20%;
}
.ranking-item-ratings .rating[data-rate="1.1"]::after,
.ranking-item-ratings .rating[data-rate="1.1.0"]::after {
width: 22%;
}
.ranking-item-ratings .rating[data-rate="1.2"]::after,
.ranking-item-ratings .rating[data-rate="1.2.0"]::after {
width: 24%;
}
.ranking-item-ratings .rating[data-rate="1.3"]::after,
.ranking-item-ratings .rating[data-rate="1.3.0"]::after {
width: 26%;
}
.ranking-item-ratings .rating[data-rate="1.4"]::after,
.ranking-item-ratings .rating[data-rate="1.4.0"]::after {
width: 28%;
}
.ranking-item-ratings .rating[data-rate="1.5"]::after,
.ranking-item-ratings .rating[data-rate="1.5.0"]::after {
width: 30%;
}
.ranking-item-ratings .rating[data-rate="1.6"]::after,
.ranking-item-ratings .rating[data-rate="1.6.0"]::after {
width: 32%;
}
.ranking-item-ratings .rating[data-rate="1.7"]::after,
.ranking-item-ratings .rating[data-rate="1.7.0"]::after {
width: 34%;
}
.ranking-item-ratings .rating[data-rate="1.8"]::after,
.ranking-item-ratings .rating[data-rate="1.8.0"]::after {
width: 36%;
}
.ranking-item-ratings .rating[data-rate="1.9"]::after,
.ranking-item-ratings .rating[data-rate="1.9.0"]::after {
width: 38%;
}
.ranking-item-ratings .rating[data-rate="2"]::after,
.ranking-item-ratings .rating[data-rate="2.0"]::after {
width: 40%;
}
.ranking-item-ratings .rating[data-rate="2.1"]::after,
.ranking-item-ratings .rating[data-rate="2.1.0"]::after {
width: 42%;
}
.ranking-item-ratings .rating[data-rate="2.2"]::after,
.ranking-item-ratings .rating[data-rate="2.2.0"]::after {
width: 44%;
}
.ranking-item-ratings .rating[data-rate="2.3"]::after,
.ranking-item-ratings .rating[data-rate="2.3.0"]::after {
width: 46%;
}
.ranking-item-ratings .rating[data-rate="2.4"]::after,
.ranking-item-ratings .rating[data-rate="2.4.0"]::after {
width: 48%;
}
.ranking-item-ratings .rating[data-rate="2.5"]::after,
.ranking-item-ratings .rating[data-rate="2.5.0"]::after {
width: 50%;
}
.ranking-item-ratings .rating[data-rate="2.6"]::after,
.ranking-item-ratings .rating[data-rate="2.6.0"]::after {
width: 52%;
}
.ranking-item-ratings .rating[data-rate="2.7"]::after,
.ranking-item-ratings .rating[data-rate="2.7.0"]::after {
width: 54%;
}
.ranking-item-ratings .rating[data-rate="2.8"]::after,
.ranking-item-ratings .rating[data-rate="2.8.0"]::after {
width: 56%;
}
.ranking-item-ratings .rating[data-rate="2.9"]::after,
.ranking-item-ratings .rating[data-rate="2.9.0"]::after {
width: 58%;
}
.ranking-item-ratings .rating[data-rate="3"]::after,
.ranking-item-ratings .rating[data-rate="3.0"]::after {
width: 60%;
}
.ranking-item-ratings .rating[data-rate="3.1"]::after,
.ranking-item-ratings .rating[data-rate="3.1.0"]::after {
width: 62%;
}
.ranking-item-ratings .rating[data-rate="3.2"]::after,
.ranking-item-ratings .rating[data-rate="3.2.0"]::after {
width: 64%;
}
.ranking-item-ratings .rating[data-rate="3.3"]::after,
.ranking-item-ratings .rating[data-rate="3.3.0"]::after {
width: 66%;
}
.ranking-item-ratings .rating[data-rate="3.4"]::after,
.ranking-item-ratings .rating[data-rate="3.4.0"]::after {
width: 68%;
}
.ranking-item-ratings .rating[data-rate="3.5"]::after,
.ranking-item-ratings .rating[data-rate="3.5.0"]::after {
width: 70%;
}
.ranking-item-ratings .rating[data-rate="3.6"]::after,
.ranking-item-ratings .rating[data-rate="3.6.0"]::after {
width: 72%;
}
.ranking-item-ratings .rating[data-rate="3.7"]::after,
.ranking-item-ratings .rating[data-rate="3.7.0"]::after {
width: 74%;
}
.ranking-item-ratings .rating[data-rate="3.8"]::after,
.ranking-item-ratings .rating[data-rate="3.8.0"]::after {
width: 76%;
}
.ranking-item-ratings .rating[data-rate="3.9"]::after,
.ranking-item-ratings .rating[data-rate="3.9.0"]::after {
width: 78%;
}
.ranking-item-ratings .rating[data-rate="4"]::after,
.ranking-item-ratings .rating[data-rate="4.0"]::after {
width: 80%;
}
.ranking-item-ratings .rating[data-rate="4.1"]::after,
.ranking-item-ratings .rating[data-rate="4.1.0"]::after {
width: 82%;
}
.ranking-item-ratings .rating[data-rate="4.2"]::after,
.ranking-item-ratings .rating[data-rate="4.2.0"]::after {
width: 84%;
}
.ranking-item-ratings .rating[data-rate="4.3"]::after,
.ranking-item-ratings .rating[data-rate="4.3.0"]::after {
width: 86%;
}
.ranking-item-ratings .rating[data-rate="4.4"]::after,
.ranking-item-ratings .rating[data-rate="4.4.0"]::after {
width: 88%;
}
.ranking-item-ratings .rating[data-rate="4.5"]::after,
.ranking-item-ratings .rating[data-rate="4.5.0"]::after {
width: 90%;
}
.ranking-item-ratings .rating[data-rate="4.6"]::after,
.ranking-item-ratings .rating[data-rate="4.6.0"]::after {
width: 92%;
}
.ranking-item-ratings .rating[data-rate="4.7"]::after,
.ranking-item-ratings .rating[data-rate="4.7.0"]::after {
width: 94%;
}
.ranking-item-ratings .rating[data-rate="4.8"]::after,
.ranking-item-ratings .rating[data-rate="4.8.0"]::after {
width: 96%;
}
.ranking-item-ratings .rating[data-rate="4.9"]::after,
.ranking-item-ratings .rating[data-rate="4.9.0"]::after {
width: 98%;
}
.ranking-item-ratings .rating[data-rate="5"]::after,
.ranking-item-ratings .rating[data-rate="5.0"]::after {
width: 100%;
}
