• widgetマスター

    モデレータ
    2024年2月27日 11:56

    おまたせしております!

    下記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%;

    }