Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

kintone 2Advent Calendar 2020Day 22
@takecho123(たけちょ)

kintoneでいろんなリアクションをしよう！

Last updated at Posted at 2020-12-22

kintone Advent Calendar 2020 22日目の記事です。

はじめに

kintoneにはスレッドやコメントに「いいね！」できる機能があります。
でも、普段のコミュニケーションの中では「いいね！」以外を押したくなることありますよね？

例えば、そのコメントを読んだことを伝えたいだけだったり、すこし真面目な話に「いいね！」は押しにくかったり…

そこで、レコードにいろんなリアクションができるカスタマイズをしてみました😎

アプリの準備

アプリストアから「日報」アプリを追加しましょう。
以下のフィールドを追加してください。

フィールド名 フィールドの種類 フィールドコード 備考　　　　
スペース space ※要素ID
グループ グループ グループ
グッドの数 数値 NUM_good 初期値：０
笑いの数 数値 NUM_haha 初期値：０
びっくりの数 数値 NUM_wow 初期値：０
ぴえんの数 数値 NUM_pien 初期値：０
悲しいの数 数値 NUM_sad 初期値：０

SVGファイルの準備

今回はSVGファイルをbase64エンコードすることで画像を表示しています。
私の場合は、パワポで画像作成して、以下のサイトでbase64エンコードしました。
https://lab.syncer.jp/Tool/Base64-encode/
私が作ったアイコン画像でよければご自由にご利用ください！

カスタマイズ

PC用のJavaScriptファイル

詳細画面表示時に、大きく分けて3つの処理をします。

  1. アイコンの要素を作成
  2. アイコンマウスオーバー時にアイコン切り替え
  3. アイコンクリック時に数を更新

1. アイコンの要素を作成

詳細画面を表示した際に、スペースフィールドにアイコンを表示します。

detailShow.js
function createElementIcon() {
    var span = document.createElement('span');
    var input_radio1 = document.createElement('input');
    var input_radio2 = document.createElement('input');
    var input_radio3 = document.createElement('input');
    var input_radio4 = document.createElement('input');
    var input_radio5 = document.createElement('input');
    var i_1 = document.createElement('i');
    var i_2 = document.createElement('i');
    var i_3 = document.createElement('i');
    var i_4 = document.createElement('i');
    var i_5 = document.createElement('i');
    var massage = document.createElement('div');

    span.className = 'icon-rating';

    input_radio1.type = 'radio';
    input_radio2.type = 'radio';
    input_radio3.type = 'radio';
    input_radio4.type = 'radio';
    input_radio5.type = 'radio';

    input_radio1.name = 'rating';
    input_radio2.name = 'rating';
    input_radio3.name = 'rating';
    input_radio4.name = 'rating';
    input_radio5.name = 'rating';

    input_radio1.value = 'good';
    input_radio2.value = 'haha';
    input_radio3.value = 'wow';
    input_radio4.value = 'pien';
    input_radio5.value = 'sad';

    input_radio1.addEventListener('click', putHyoka, false);
    input_radio2.addEventListener('click', putHyoka, false);
    input_radio3.addEventListener('click', putHyoka, false);
    input_radio4.addEventListener('click', putHyoka, false);
    input_radio5.addEventListener('click', putHyoka, false);
    input_radio1.addEventListener('mouseover', mouseOverHyoka, false);
    input_radio2.addEventListener('mouseover', mouseOverHyoka, false);
    input_radio3.addEventListener('mouseover', mouseOverHyoka, false);
    input_radio4.addEventListener('mouseover', mouseOverHyoka, false);
    input_radio5.addEventListener('mouseover', mouseOverHyoka, false);

    i_1.className = 'good';
    i_2.className = 'haha';
    i_3.className = 'wow';
    i_4.className = 'pien';
    i_5.className = 'sad';

    span.appendChild(input_radio1);
    span.appendChild(i_1);
    span.appendChild(input_radio2);
    span.appendChild(i_2);
    span.appendChild(input_radio3);
    span.appendChild(i_3);
    span.appendChild(input_radio4);
    span.appendChild(i_4);
    span.appendChild(input_radio5);
    span.appendChild(i_5);

    kintone.app.record.getSpaceElement('space').append(span);
  }

2. アイコンクリック時にフィールドの値を更新

アイコンクリックした際に、グループの中のフィールドの値を+１します。

detailShow.js
function putHyoka() {
    var tgtFld = "NUM_" + this.value;
    var beforeValue = Number(event.record[tgtFld].value);
    var afterValue = beforeValue + 1;

    var body = {
      'app': kintone.app.getId(),
      'id': kintone.app.record.getId(),
      'record': {
        [tgtFld] : {
          'value': afterValue
        }
      }
    };

    kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body, function(resp) {
      // success
      console.log(resp);
    }, function(error) {
      // error
      console.log(error);
    });
}

3. アイコンマウスオーバー時にアイコン切り替え

CSSでもいろいろ設定していますが、マウスオーバーした際に、対象のアイコンのみ表示するようにします。

detailShow.js
function mouseOverHyoka() {
    switch (this.value) {
      case 'good':
        $('.icon-rating i.good')
          .eq(0)
          .css('opacity', '');
        break;
      case 'haha':
        $('.icon-rating i.haha')
          .eq(1)
          .css('opacity', '');
        break;
      case 'wow':
        $('.icon-rating i.wow')
          .eq(2)
          .css('opacity', '');
        break;
      case 'pien':
        $('.icon-rating i.pien')
          .eq(3)
          .css('opacity', '');
        break;
      case 'sad':
        $('.icon-rating i.sad')
          .eq(4)
          .css('opacity', '');
        break;
    }
}

PC用のCSSファイル

それぞれのアイコンの「background」に画像をエンコードした値を設定しています。
あとは、マウスオーバーした際の表示も設定しています。

detailShow.css
/* グレー背景 */
.icon-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 250px;
    height: 50px;
    overflow: hidden;
    position: relative;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA0IiBoZWlnaHQ9IjMwNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHBhdGggZD0iTTE4IDI4IDMyMiAyOCAzMjIgMzMyIDE4IDMzMloiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4IC0yOCkiPjxwYXRoIGQ9Ik0xOSAxNzkuNUMxOSA5NS44Mjg4IDg2LjYwNSAyOCAxNzAgMjggMjUzLjM5NSAyOCAzMjEgOTUuODI4OCAzMjEgMTc5LjUgMzIxIDI2My4xNzEgMjUzLjM5NSAzMzEgMTcwIDMzMSA4Ni42MDUgMzMxIDE5IDI2My4xNzEgMTkgMTc5LjVaIiBmaWxsPSIjRDlEOUQ5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+');
    background-size: contain;
  }

  /* グッドアイコン */
  .icon-rating i.good {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA1IiBoZWlnaHQ9IjMwNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHBhdGggZD0iTTM1OCAyNyA2NjMgMjcgNjYzIDMzMiAzNTggMzMyWiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L2NsaXBQYXRoPjxpbWFnZSB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFRQUFBQUVBQ0FZQUFBQmNjcWhtQUFBQUFYTlNSMElBcnM0YzZRQUFBQVJuUVUxQkFBQ3hqd3Y4WVFVQUFBQUpjRWhaY3dBQURzTUFBQTdEQWNkdnFHUUFBQm5uU1VSQlZIaGU3WjBOa0YxbGVjY1BrSHZPdlhjM213QUJIZEZLa1ZHdzFpcG9LNktnRkpFYXE5SU9VeXN5b2xndDJySFlENm1sTlIzUm9VV3Bpam9VUDVyV2oxS0NJRklKQ1p0N3p6bTd5VUprUnl3aVNPc0FPbUFqWVRmWmtHU1RiUEs4L1Q5blQyQ3plWGZ2MTdtNzk3em4vNS81eldZbTk1ejNuSHVmNS85K25QZThyMGRSRkVWUkRXWFdlTDdjVlQ1YjZzRlZFdm5mQk1QZ2NRbUR2UklGMnlUMGY0Ri9Qd2p1a1RpNEJmLzNNZjI4R2ZXV0dlTWRrWjZHb3FnOHlZUmUyY1RCSlVqb096WFpUUlNZVnNBeCsyQU9tL0QzOHhLV0w1YTdLcytESVJ5Wm5wNmlxRjZWYlBTV29qYi9MR3I0WGJia2JoV1l3SDZjNjhkU0N5NlRFYStTRmtOUlZLL0pESHJMSlBhL2pvU2R0Q1Z6SjJoTEF0eUJWc1ZiekFPZW54WkpVVlF2eU56dVZaSDhseU5KZDlnU09DdHcvdDB5NUY4dm0wb3ZRMWRqU1ZvOFJWR0xKYlBLTzlJTWV5ZVp5QjlGN1Q5bFM5d3NRUmtIWURhUG9xdHhxZHpFYmdGRkxhcFFFL2RMM1YrRnhIemFsckRkUXN1VDBQKzRyUGY2MGt1aEtHcWhKU1BlTVJLVkJ0RTgzMmRMMUc0Q0U5aUZjcS9Wd2NmMGNpaUtXaWlaTmQ1UkVsWmVKWkcvMVphZ0N3Rk1ZQkltOE85bTlPaGw2V1ZSRkxVUU1xUHA0RjhVVE5pU2M2RkErWHRnQXQ4eDl5MWJubDRhUlZIZGxxejFCbEQ3WDZkTmNWdGlMaVF3QUoxaFNCT2dxSVdTQ2IzbFVpL2RyRFd3TFNrWEdwakFEcW41SDlYSGt1a2xVaFRWTGNuZzBtUFJBaGlHQVN6NEFPQmM0RnJHSkt5ZWorNUpLYjFNaXFLNklkblVkendNNEdkSXVnTzJaRndzY0UxUG1yRDZDaDJrVEMrVm9xZ3NaVHp2Q0Frcno1ZlEvNVV0Q1JjVDdaSUFqZ2RRVkxla013Qmx5SDh4YXR1ZU13QUZCckFyR2FEa0hBR0t5bDdhdkRZYnE2OUltdHVXQk93RllBSVRVdmYvbklPQ0ZKV3g5R1VjaWN1dmxYanhKZ0UxQWdhd1g4TGdoMUpiK2hLdUtVQlJHVXBIMlUwWW5Jc1d3Smd0K1hvRm1NQk9jTFhjeHE0QVJXV21aTW12dXIreTF3MUEwWUZLaVlOejBBcmdLOFFVbFlXMEJZRG05Zm01TUlEcFJVcitqZThMVUZSR1NneWdIcnc1RHdhZ3dBUzJTVmgrdDFudGxkTmJvQ2lxWGVWbERPQWdhSzNvWXFQclpkM0FNZWt0VUJUVnJwSVdRQzA0Qndid2xDM2hlaEcyQWlncUl5V1BBWWZLWitmTUFEZ1dRRkZaS0RHQXFQejZQQm1BZ203QUZva3J2NjNYbjk0S1JWR3RTaFBJaE9YWDVjNEFkQzNCeUwrU2F3bFNWQWRLV3dCbjlQSk1RQnN3Z0NrVCtwRyt5cHplQ2tWUnJjb1k3eWh0U3FNMnpaVUJLRG9ZYUtMS2hiTFdDOUxib1NpcUZmWENncUR0SXJyQlNOMy9pdHpqRGFTM1ExRlVLMHJlQnF4WFQ0Y0I5T3piZ0hPQkZzQUJpVW8vTlhjR0ozSW5Zb3BxUTNsNEhYaGV3bUM3REpVdk5pSG5CRkJVeTlMWGEyV2s3emZ6YWdCSk55RHlyMmMzZ0tMYVVHSUF3MzIvSVdGT0RTQlpLOEQva2F6dFB5NjlKWXFpbWxWaUFGSC9xYWhGZTNKSnNHWkFLMkJNQnJtQ01FVzFyR1JOd05yU2wrVGFBSFN4a0RENE5CY0xvYWdXcGFQbk1oS2NuUE1Xd0Q1Yy93YTVsWk9DS0tvbEpRWlFDMTZVY3dNUVhQK2p1cjlCZWxzVVJUVWpOUUFUQmlmcWNsdTI1TW9MTUlDdHNxRjZtajdXVEcrTm9xaEdTZ3hnc1B4citUZUFZRnppeWg5eVdqQkZ0U2dacVp6Z2dBSHNRQ3ZnQ3I0ZFNGRXRTdTZxUEEvSnM4V1dXSGtobVJBVStqZHdRaEJGdFNqWjBQY2NKRS9lRFVEWENsekh0UUlwcWdXNU13Z1k3SmZZdjllRS9TdlNXNk1vcXBGZ0FMbWZDYWdrandKRC94RStDcVNvRnBUbjE0Rm5vNjBZaVlOZjExWk5lbnNVUmMybnZLNEphQVAzc0ZVWE4rRkNvUlRWcEpLTlFZYnpzekhJZktBYk1DYjE2cHY1VWhCRk5TbWRPR01pLzBLcCs5dHNTWlVuMUFCTTJIY3VEWUNpbXBUOHlPdVQyUDg3aVlLbmJVbVZKeVQwbjVKNitVeDJBU2lxU1NGWmxxUDUveTBZd0I1YlV1V0paQXlBN3dOUVZQUFM1K2JvQW95aStiemZsbFI1QWkyQUozRS9wK2lqemZUMktJcWFTL3E0VERibSsxWGdtU1NQQVd2bEYvSXhJRVUxSVRTVmZmVC9WeUp4eG0wSmxTZVNpVUNSL3hnbkFsRlVrNUtOM2xMMC9hOEJPMjFKbFNkd0QxTXdzaUZ1RlVaUlRVcjcvMUwzTjJ2eTJKSXFUK0FlSnNHM1RMaHNlWHA3RkVYTnBXUUNVT2pHQkNCRld6SGdhaTRNU2xGTnlJUmV2d2xMLzRDa3lmM3pmMFhDWUFKY0ppTmVKYjFGaXFKc01wNTNoTnpkOTV4a2UrMTYvcHYvQ3BKL1hPTHFTczRDcEtnRzBtV3owUFQvR0pKbWh5Mlo4b2crQWpTRHdVbDhCRWhSODBobnljbHdTYmNDZXdETi85eFAvbEZnWkxvOTJHWXVCa0pSRGFTRFpGSUwva2tIeld6SmxFZHdMNU1TbFZlYjBhT1hwYmRKVWRSc21SdVNrZjgzb1BtL0JVa2p0bVRLSTlxVlFRdmdyN2tpTUVYTkl4TjZLeVFxM1liazMydExwTHpDQVVDS2FxQmsxbDhZWEF0MjJaSW9yK0IrUk9yKy84cDZUZ0dtS0t2MDJUZ1M1VEl3WVV1aVBJTjcyaTAxN2dkQVVWWWxNLzZtbC96NnVkYVd0aVRLTStqT2JKT3cvRTV1Q1VaUnM2UXI0NWh3eWV0TTZJOGlVWnlZOERNYkdOdi9jU1ZnaXBvbFRYNEpsN3pLcGVmOXM4Rjk4UVVnaXBvdFhSRUh0ZjRwRXBVZVJyUC9nQzE1WEFESlB5SER3WWM1LzUraVVpV3IvS3dydndCTjQ4ZGM3UFBQQlBlNFZUWlZYcTJ0bmZUMkthcTRTcEovSkRnWmllSEVFbC96Z2RwL0wvcitkM0F6VUlxQ2tqNy9VUGxzSkgvdWQvaHBCaGpBMC9vNk0rNjdQLzBLS0txWVFoS1VwVjY2Q01tZis4MDlta0c3TmhMNlQwakU1ajlWY0psUnI1ck1nM2ZvMWQ1RzRGNTM0NTcvaFpOL3FFSkwxbm9ENkFkL0hzMWhwNmIzTmdJR01DNUQxYmZxcXNicFYwRlJ4WkUyZTgxdzZYUWt3dTA2R0daTEVsZkJQZS9GUGQ5bWhwY2RuWDRkRkZVY0pmMzlXdWxkU0lTSGtRaE9UdkJwd0hiYyszdjFlMGkvRW9vcWhoRDBUaTNrMlNwSS9QMFNjZVVmcW1CS2x2RWE4bCtNQlBnMmtuL1NsaHhGQVBlL1EySXUvRUVWU09ZQno1ZWEvellrL3IzQXlSZDZtZ0hKTDdqL01hbVhQalA5L0QvL1NOMWZKYUYvdVluOEN5VXFueUZoNWZuYzJaaDZSdWtqdnIvU21zK1dGTVE5WUhKN3dIZnhtLytKYlBSZndua09CVlF5cGZjdTczbkpzKzR3MkcwTEZPSSsrTzMzSVFZMm1ucndBYjd3VkJBbEMzam93cDExUDlRQXNBVUdLUlpvRWV5VE9MZ2IvNllSdUN6OWNaTWZPUXlld0kvdTdHdThwRDBTSTRpQ2pSTDV2OGRKVUk3SnBhMjZTWGRCQlRFbTllQ0RjaE5iQTdtWER2SklYRG9OUCtqMzhNTVdhbFlmYVI5VUZEdlFFcmlDajBSenJIUlczeDhqK1IvQ0QxckVXWDJrQXhBenVpRHF4V1kxWjBYbVRza0duYUgvOS9nUkN6bXJqMlJEc3Y1RFdINGRIeGZtUkxwZUg1cjZKeVB4dndFS082dVBaQU5pYUFyeE5DSzFnUmVaVmQ2UmFaaFJ2U2dkdVpXNnZ4SS8yR2I4Y0h6RVJ6SkJLeEtKZzI5eWM5UWVWanFyNzZNbURMYmJma1JDT2dHVnlnUk00SU9jSjlDRFNoYnVDUDB2NFVmaXJEN1NGWkt1UUQzNGdZUURKMnMzTXcwOWFyR0ZtbitaUlA2TitJSDIySDQ0UXJJQ01iWVRYQzIzZVV2VDhLTVdVMmJZTzFyQzBxMzRVZmg4bnl3SXFHeTJtdUhxNldnRjhLM0N4WlNzODQ2UnFIUW5tbVVjN0NNTEJpb2I3cGEwMkVxU1AvVHJTUDdDdnI5UEZnY1lBSjhJTEtaazg5SmprZndqK0NHWS9HVEJrV1RoRlA5bnNyN3YrRFFrcVlXU3JsV0g1UDhoa3AvVGVzbWlBUk1ZbDdpNlVsOHRUME9UNnJaTTZLMUFuLzhuK1BMNUdpOVpiTFpMTFhpZnZtdVNobWRyMG5uRnlmYlNOZjhQa2dHRnlQK0ViVTJ6eFFEWHNnclg5amNtREM2Um9lQjM1WCs4QVYxQko3MzBSWkZzNmpzZU5mOGoydnl5L0JpRUxDaG9nYmIrcG1BeVIzMVQrWVZTOXorUjlHRnpzaHBOTXVnUkJyZEtQYmgwTVVZK1pVUGZjL0I5L2RKMmJZUXNCc2lIWGVCYVhXTWlEZFA1aFJxL1AwMzhSL0xhZjhWMTY3SkpJeEtYMzdOUUN5V2tvLzAxanZhVFhpS3BGS01tbndTa3o2c0g4MUxqTndJMy92UjBONkc3MjBZbnBoa0huMEo1WE1HSDlCVEk1YjNhS202NGZab005UjhuWWVsQmZOaXBnU3NrWlZjWFNwaXhkdC9FN0xJSldXd1FsN3A3OGczejdwNk1HbXc1YWtwbjMwbnZsZ2trRzNWRS9nWDRnc2R0NVJLeTJHaXJGQ2J3NlRuZkNkQStNajd3ZnBkck1Id0pVMGpVamNsdUt4azlKZENuSXpLODVEVkkvdnR4Zmo3ckp6MEo4bm9IWXZSeWM3dFhUVVAzVUNVdnFjVHV2NlNDKzlQeGdDdXpXampSZkIvZlc3MTBNODdMTi90SXo0TDQzQ2IxOGtXeTFndlMwRDFVRXZzcmtSaGp0b05kUW10cDNPdTlXZXdtcTROKzAvTVF1SVlmNlcyUTIxdGxxUEk3Mm1KTncvZFFvWW53QlFSeUlVYXZjYS9qRWxVdTZIUWpCUm9BeVFPSTkzMHdnRHRsM2NBeGFlZ2VMbnpnWHYyZzdRU3VvVWFIZTUxN1FLUkowUUJJSGtDc1Q4aFFjTm04aytJazlIK0JRQzdFSUJhK2tNYVBSSm9RRFlEa0FjVDZMMldvLzZYekxndW1pMVFnTVFveGJ4MzMyZHlraUFhaUFaQmVCN0U1S1hINVh4dk9BTFFkN0NyNFV2YUMvNklCRU5kQlJUY3V0Y3JiR281MzJRNTJGUm9BS1FKSS9sMkl6V3VhZWdISWRnSlhvUUVRMTBGTVRxSHZQMktHZzVPYTJoM0lkaEpYb1FHUUF0RGFBaUNXRXpnTERZQzRET0pSSDNOL3FxWEgzTFlUdVFvTmdMaEswdTl2WmVHUGc3S2R6RlZvQU1SRkVJZTdKUEt2YXpuNVZiWVR1Z29OZ0xpR3hxQkVwVSthTURqUnJHbGpCeURiU1YyRkJrQmNCRTMvQTJnQlBLSXgyYklSMkU3b0tqUUE0aktJeC8wd2d3ZVRSWEdiWFF2VGRpSlhvUUdRSWdBVDJJMFd3ZGZBcVExYkE3WVR1QW9OZ0JRRnhPWVV1Z09qTWxoNU5lTFZ2aGFBeW5hd3E5QUFTSkZBZkI2UXFQUndNaTR3MTFKNHRnTmRoUVpBaW9pRS9oYmR0Q1lOMzBObE84QlZhQUNraUlpdURCVDY2NjByQTlrT2NCVWFBQ2txaU5WSnFWdDJDTEo5MkZWb0FLVElhTHpLN0pXeGJSOTBGUm9BS1RMb0NnZ000QW1KZzNPTVNaOE0yRDdvS2pRQVVuUVFzM3ZRRmJqUmhNdVdUd2V6NVVPdVFnTWdSUFBBZjBxR3ltY25yUURiQjF5RkJrQUk4aUFNZHFJVmNKWEdNUTJnRGRFQVNKNUIzRTR2RzNaNy93b2FRQnVpQVpDOGszUURvdUNOTklBMlJBTWdlUWV4T3dFK1JBTm9RelFBa25lU053Wmovem9hUUJ1aUFaQzhrMHdQamt0MzBBRGFFQTJBNUIzRXJnNEVicVFCdENFYUFNazdhQUVjUUJmZ2ZocEFHNklCRUJkQUMrQVhOSUEyUkFNZ2VXZjZ2WURnWVJwQUc2SUJrTHlEMk4wdmtiK1pCdENHYUFBazd5UlBBVUovUFEyZ0RkRUFTTjVCN09yS3dWK2hBYlFoR2dESk80amRDWW1ERDlNQTJoQU5nT1FkZEFIR0pLNmVSd05vUXpRQWttZVNPUUJSNlNHcGxWOUlBMmhETkFDU1oyQUF1NlFlL0hPeW03RHRBNjVDQXlBa01ZQ2srVzlHdlJJTm9BM1JBRWhlUWN6dWdRSGNaTzdqbW9CdGl3WkE4Z3FTZjF6cWxiZWJOWjQvSGN5V0Q3a0tEWUFVR1NUL2JnbjlHK1FlYnlBTlpScEFPNklCa0x5QjVOYzlBWDR1dGZKWnord0pvTEo5MkZWb0FLU29hS3hLemYvNElic0NxV3dmZGhVYUFDa2lpTk5KaVMzN0FxcHNCN2dLRFlBVWphVGZIL25YSDlMdm55bmJRYTVDQXlCRklvbFB4S25HYXhxNmg4dDJvS3ZRQUVnUm1CN3dDN1pLM2Y5TE0rcFYwN0MxeTNZQ1Y2RUJFTmRCOHU5RjR0K1o3UDJuTS8wYXlYWVNWNkVCRUZkQkxPNlRPTGdiLy82QWpIaVZORlFiYS9hSlhJWUdRRndFY1ppODI5OVM0aCtVN1lTdVFnTWdyaUtoUHdZVE9PZVFTVDdOeUhZeVY2RUJFSmRCLzM5Y2hxcHZmV2FlZnpPeW5jaFZhQURFZFJDVDJ5UXN2MVBXZWtFYXJ2UExkaEpYb1FFUTEwRk1Ia0IzNEJHcGw4OUVuRGJ1RHRoTzRpbzBBRklFRUplVFVwOWo2dTlzMlU3Z0tqUUFVaFFRbTgwOUdiQWQ3Q28wQUZJVUVKdjd3UU1TVlY5cGpIZFVHcnFIeTNhd3E5QUFTSkdRNmNVL1A1Y3Mvam1YYkFlNkNnMkFGQW5FcCs3L2Q2OEorMWVrb1h1NGJBZTZDZzJBRkkxa2JrQmNYVG5uZXdHMmcxeUZCa0NLUnRJTmlJSnI1dXdHMkE1eUZSb0FLUm93Z1AwUytwdm43QWJZRG5JVkdnQXBJaEw1djVJaC84Vm1sWGRrR3NMUHluYUFxOUFBU0JIUkY0Vk1HSnhySFFld0hlQXFOQUJTVUxaTExYZ2Y0cmFjaHZDenNuellXV2dBcElna2NZcDQxYmhOUS9oWjJRNXdGUm9BS1NLSTAwbDBBNzV1QmowdUMwNERJRVVEY2FvYmd0NWlqWHZiQWE1Q0F5QkZCTW12ZXdOOFVSNnl6QVd3SGVBcU5BQlNSRFJPcGU3LzdXSGJncWxzQjdnS0RZQVVsTzBTbDkrRHVPVlRBQm9BS1Jwby9qOTEySzdBQjJVN3dGVm9BS1JvSUVZUFNGeDZVTmIzSForRzc2R3lIZVFxTkFCU05CQ2preEtWVjgrNVBKanRJRmVoQVpDaUlXR3dRK3IrWDVqYjU5Z2owSGFRcTlBQVNORkkrdjlSOE1ZNU53eXhIZVFxTkFCU0pOTG4vMStTZTd5Qk5IUVBsKzFBVjZFQmtDTFJzUFpYMlE1MEZSb0FLUXBOMWY0cTI4R3VRZ01nUlFCeHVRL0VFZzZjak5yLzhFVkFac3AyQWxlaEFSRFhRVXdLMkNMMWVSWUNuU25iU1Z5RkJrQmNCekU1Z2FiL1IrWjg3RGRidHBPNENnMkF1RXdTajRoTGpjODBWQnZMZGlKWG9RRVFWMmtyK1ZXMms3a0tEWUM0U052SnI3S2QwRlZvQU1RbEVIOVQ0RDRKUys4MHF5MnYrallqMjRsZGhRWkFYQ0Y5enY4Vk14eWNaTmJNcy90dkk5bE83aW8wQUpKbkVHOEhrUFNQUzgzL3N0U0NjNXA2ek5kSXRvSmNoUVpBOGthYTlGc2tEbTVCclgrWmJLaWMwSEJ5VHl1eUZlb3FOQUNTRjlMWGVLK1FEYVdYSTk3bW5zdmZxV3lGdXdvTmdPUUZHSUJJVkg3VWJPby9KZE1hZjdac2hic0tEWURrQ1pqQVhuQnJwL0U2cjJ3RnV3b05nT1FOR0lEdTcvK1pPZmYzNzFTMlFsMkZCa0R5Q09Kc205VEs3NUsxWHBDR1lIYXlGZWdxTkFDU1I5S3V3UGU2MGhXd0ZlZ3FOQUNTWTdiREJONHZOM21WTkF5emthVWdaNkVCa0x5QzVOOG5zVDhvNndhT1NjTXdHOWtLY3hVYUFNa3pNSUZ4RTFiZVlkWjRmaHFLbmN0V1VMZEI0a3hKUGZneC90Nk1tL3BDd3ZTLzc5Zi9zeDJUQlRnM0RZRGtGc1RiVGhNSC81anBFd0ZiUWQwQXlhMVRHaCtWcVBSSjJWQTZ6YlpTS1JKcmlmNmYxRXRYNGZOYmdOak8xUzQwQUpKbkVHOVRFdnF4REM0OU5nM0Z6bVVyS0dzMFVUVHh6ZDNCaWMyOHVaUVlRUXdqaUlML0FKTzJjN1lEemtVRElMa0dCdkNrYk9oN2VVZHZBTTZVclpBc1FTMitXK3IrRjl0cHRpRFJscVBWOEkyc1RJQUdRUElPWW02YnhPVS95bXhPZ0syUXJFZ1NKQzYxdDFKSnFpeVREZWVnQVpCY2c1aHJiZEhQUnJJVmtnVnB6Zi9WaGhzVE5DRXo2QzNEVFg4Vk43L2JWbGF6MEFCSTNrSE03VVJ1ZlZwdXkyZ2cwRlpJcCtqZ0hmb3FqOGx3NVRWSWxvNWZaZFJ6U0ZRK0F5YndXQ2NEZzVrWndLaFhsZGkvSE9lYXNKVkRTTGRBekUwaUQ3Nm1sV0lhanAzSlZraW5xRXRwRGFrMVpWcE14OHFpMXNXeFdiVUF5cktoOUc0VCt0dHQ1UkRTTGJLSzRXZGtLNlJUVUV1UFM5VDNwa3lXTEVxbDU4S052d251TjJZcnN4a3lNd0M5bGpnNEQ2MmN0cStGa0haSXV0YVJmMzBXWGV0RXRrSTZBUWsyaFl1OHg5emV2eUl0SWpPWnNIOEZidjV1TGNOV2RpTXlNNEExM2xFU1YwL0R0VHhwSzRlUWJvSDRmUnB4ZDZXczkvclNjT3hNdGtJNkFSYzRLZlhnbTJiMDZHejZLRE5raHIyakpTeDlYeFBaVm5Zak1qTUF6enRDd3NyejhVTnNzWlZEU0JmUmw0TGVxOTNRTkJ3N2s2V0Fqc0RGN1pLaDdpeGcwQ3NHb0VxdUpTcmQxdTYxRU5JT2lMY3hDYXZuWjlhOXRoWFNDVVV4QUJueEtySWgrRlBjTDU4RWtBVWo2WGFHMVZmMDdFeEFKSmp6WFFCVk1nNHdWSG81eHdISVFvSFluVUs4YmN4MGZNMVdVQ2NrRnhrR0d6TjlZU0dWbmhOZndMQ1dZU3U3RVZrYWdBcjlzT1ZTTDkyTWMrNnhsVWRJbGlETzJ0OERjQzdaQ3VvVUdNQ1kxTXBuMmQ3NGExZTRhWjBNOUhvWXdGTzJNcHNoYXdOSXVnSDE0RVBzQnBDRlFFTC9LZVRWYXpVWDBoRHNYTGFDT2dWSjV2UkVvSm1TZGQ0eEVwWHVoQkhzczVWSlNCWWdicnZUdGJZVjFpbW9FUS9nZ244aVEvMHZ6V0t3UWpkR1FNMS9LbmdBNTkxdks3TVp1bUVBTUtZeWpPa1N6Z29rM1FSeHUwM0M4c1Z0N3dJOGwyeUZaUUV1T0xQK1NoYTF2OUlOQTFDbGc1TzM2UGx0NVJMU0NhaFE5MHJjcFExQ2JBVm1SWkt3SGI0T0xHdTlnV1E5Z1NqWVpTdWpGYnBsQVBwdXRvbjhDM0dkMjJ6bEV0SXVhV3Y2cHhKVlg0bVdjRGFQL21iS1ZtaVc0T0xiSGcvSXF1WS9TTGNNUUtYWGlqN2FWVmxkS3lFS0RHQmM2cFczb3l1ZDNVS2dNMlVyTkdzMEtWcGVFaXdxdlJJMTZtb2MyOUVhQURQcHBnR29jTjE4TEVneUE4bS9BMDMvRCt2VHBqVEVzcGV0NEc0dzNaUkpGd1dOeW1mWXBqSk92L0ZYUGdQOTZVL2g4ejI3S09oOGtxSCs0MkJjdXVKeDI0T1ZoQ0IrSnBEOGY1Ylp5ajl6eVZaNHQ4SE5UWUdIa09EZkFjOHVDeDRIRCtyLzJZN0pBcHk3NndhZ2trSHZXQW45ZTdwNUw4Uk5FRFA3VFJ5TVNsUjV0YmFFMDVEcW5td1g0U29MWlFDcVpFd2dDcTRHTzIzWFFzaHNVQkh1UnNYeFpiblZPMWJmT0UxRHFidXlYWWlyTEtRQnFMVDVobTdQUi9ERDdyQmREeUVLNG1NZkVuOElmOS9mMWY2K1RiWUxjcFdGTmdCVjhvZ3c5TitCSC9jT3dIa0M1QmswSGxCQnJKTjY2U0swR0xPZDROT3NiQmZtS290aEFBZWxQN0JFcFhmaEJ3L1Y4VzNYUjl3SHY3ME9iRzlISE42WVZBemQyUE8vRmMyK1FKZFpUQU00cVBRRm9rdHhIZDlGTUl5bEFXRzlYdUlPU2V5RmZpMTVlV3hENVFTZDNwNkd4T0xLZHJHdTBnc0djRkE2eURNOVVPaS9CU2J3V2Z3ZEJvL2kraVpwQ3ZrRnY5OEJKUHFUWUFTLzUycjgvVGorWG1BMlY1L2JNMGsvVTdhYmNKVmVNb0M1WkZaNVJ5YUxuMjRxdlV6aThsa21ETjVBZWhlcGw4K1VXdW0zekdCd1V2Szc2WmlQV2FBUi9Dd0VoeHBYMTdJbGpHc2t0V3ZjbmRXS0tDcVhRbk96cTVOdmVnbmM2eTcwd1Q3WGpmVUtLU3FYUXZKL1YydEdXOEs0QnU1ellhWlhVbFJlSkhIcDBxSXNacEVNem1TNXR6cEY1VjB5RXB3c0hhNjBrd2R3ZjN2QWplYStaY3ZUVzZjb1NoOUZaZm5PZlMrQ2V4T1kzQllUQnVkbXRxRUNSYmtnZlRacE52bW5TT3ovVUVJM1d3R0p1V1cwUEJsRk9TZGRiUVFHc0ZMcS9yZ3RnZkpNMHZRUGcrK3c2VTlSOHdpMTR4S3BMVGtMVGVYSFhabUpodnZRMXl0dnlHd3JaWXB5V1RxRFNYN2d2UUJKODIydE9XMUpsUmZZN0tlb05wVzhzQklHbDRHSGtVaTVHaGZBOWVvcmxodkE3NXNIdXJTUUlrVzVydWs1NmRYbm1qQzRCRW4xbnpDRC81YlkzNHAvOTh5MFlWeUw0THIySU5rZkJicG40RFZTQzg3cjJncXFGRVZSRk9XR1BPLy9BYlJTOE5qcjBLRnhBQUFBQUVsRlRrU3VRbUNDIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBpZD0iaW1nMSI+PC9pbWFnZT48Y2xpcFBhdGggaWQ9ImNsaXAyIj48cGF0aCBkPSJNMzMuODg2NiAwIDEzMy41MTIgMCAxMzMuNTEyIDEzMy41MTIgMzMuODg2NiAxMzMuNTEyWiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzU4IC0yNykiPjxwYXRoIGQ9Ik0zNTkuNSAxODBDMzU5LjUgOTYuMzI4OSA0MjcuMzI5IDI4LjUwMDEgNTExIDI4LjUwMDEgNTk0LjY3MSAyOC41MDAxIDY2Mi41IDk2LjMyODkgNjYyLjUgMTgwIDY2Mi41IDI2My42NzEgNTk0LjY3MSAzMzEuNSA1MTEgMzMxLjUgNDI3LjMyOSAzMzEuNSAzNTkuNSAyNjMuNjcxIDM1OS41IDE4MFoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiNGRkQ5NjYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0wIDE2LjVDLTIuMTY0MzNlLTE1IDcuMzg3MyA3LjYxMTE2LTIuMTAwNjdlLTE1IDE3LTQuMjAxMzRlLTE1IDI2LjM4ODgtOC40MDI2OGUtMTUgMzQgNy4zODczIDM0IDE2LjUgMzQgMjUuNjEyNyAyNi4zODg4IDMzIDE3IDMzIDcuNjExMTYgMzMtMS4wODIxNmUtMTQgMjUuNjEyNyAwIDE2LjVaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KC0xIC04Ljc0MjI4ZS0wOCAtOC43NDIyOGUtMDggMSA0ODEuNSAxMzguNSkiLz48cGF0aCBkPSJNMCAxNi41Qy0yLjE2NDMzZS0xNSA3LjM4NzMgNy42MTExNi0yLjEwMDY3ZS0xNSAxNy00LjIwMTM0ZS0xNSAyNi4zODg4LTguNDAyNjhlLTE1IDM0IDcuMzg3MyAzNCAxNi41IDM0IDI1LjYxMjcgMjYuMzg4OCAzMyAxNyAzMyA3LjYxMTE2IDMzLTEuMDgyMTZlLTE0IDI1LjYxMjcgMCAxNi41WiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0iIzQwNDA0MCIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAtOC43NDIyOGUtMDggLTguNzQyMjhlLTA4IDEgNTc0LjUgMTM4LjUpIi8+PHBhdGggZD0iTTU1NSAyMDcuNUM1NTUgMjIzLjI0IDUzNi44NjggMjM2IDUxNC41IDIzNiA0OTIuMTMyIDIzNiA0NzQgMjIzLjI0IDQ3NCAyMDcuNUw0ODguMjUgMjA3LjVDNDg4LjI1IDIxNS4zNyA1MDAuMDAzIDIyMS43NSA1MTQuNSAyMjEuNzUgNTI4Ljk5NyAyMjEuNzUgNTQwLjc1IDIxNS4zNyA1NDAuNzUgMjA3LjVaIiBmaWxsPSIjQzEyNzJEIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDIpIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC44NjEzMzEgLTAuNTA4MDQ0IC0wLjUwODA0NSAwLjg2MTMzNCA2NzguOTU2IDIzMS44MzYpIj48dXNlIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHhsaW5rOmhyZWY9IiNpbWcxIiB0cmFuc2Zvcm09InNjYWxlKDAuNTIxNTMgMC41MjE1MykiPjwvdXNlPjwvZz48L2c+PC9zdmc+');
    background-size: contain;
  }

  /* 笑いアイコン */
  .icon-rating i.haha {
    opacity: 0;
    position: absolute;
    left: 20%;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA1IiBoZWlnaHQ9IjMwNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHBhdGggZD0iTTY5OSAxMyAxMDA0IDEzIDEwMDQgMzE4IDY5OSAzMThaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvY2xpcFBhdGg+PGltYWdlIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUpZQUFBQ1dDQU1BQUFBTDM0SFFBQUFBQVhOU1IwSUFyczRjNlFBQUFBUm5RVTFCQUFDeGp3djhZUVVBQUFERFVFeFVSUUFBQVA4QUFQOEFBTDlBUU13ek03WWtKTDhnSU13ek04SWtNY1VqTHNFbkxyMGtMTU1vTDc0bkxyOG1MYjhwTHNFb0xiOG5MTUVsTGNJb0xjSW9MNzhuTHNJcExMOG9MTUFvTHNBbkxjQW1MTUVtTHNBbUxiOG5MTUFtTGNBbkxjQW1MY0VvTHNBbkxjRW9Mc0VvTGNFb0xjSW1MY0lvTGNJbkxNRW9Mc0ltTHNFbkxjRW5MY0VvTGNFbkxjRW5MY0VuTGNFbkxjSW1MY0VvTGNFbkxjRW9MY0VuTGNFbkxjRW9MY0VuTGNFbkxzRW5MY0VuTGNFbkxjRW5MY0VuTGNFbkxYV3dOQVVBQUFCQWRGSk9Vd0FCQWdRRkJ3Z0tGUlloSXlZbktDd3RORDQvUjBoTFRFMVZYVjVsYUhGMmZvQ0NqSm1ncHFhc3JiTzV4c2ZLeTlIVDFOdmY0ZUxqNk9ycjd2UDMrLzZIb2tSYkFBQUFDWEJJV1hNQUFBc1RBQUFMRXdFQW1wd1lBQUFEdkVsRVFWUjRYdTJjNlZiaVFCQ0ZneWlJaUtQREV0bDNHR1VaRlRmYzhQMmZha0p5WFpCQWtrNHY5NXpoKzllZHBQcWVFK2hVZDFXWHRVTXY2VnkrWEd1MFhScTFjajZYeGdWVEhCYWIvY25UK3hwUGszNnptTUZOZWptcEQyK2hZZ08zdy9vSmJ0WkR5dTdkWSt3QTdudDJDZzhwWnQ4ZXZHRFFVTHdNN0gwOHFvN2o3aU9HaThCajl4aVBLeUZSR2kwd1VrUVdvMUlDUm1TVHJONWdFQ0Z1cWtrWWtzbGVaUWI3d3N3cWV6QW1qY0lWYk1maXFnQnpjc2hld201c0xyTXdHWitEMWl1TVN1QzFkUUN6TVRtN2hrVkpYSi9CY0J5U25UZVlrOFpiSi9aLzhtZ01XMUlaSDhHOElPZlBNQ1NaNTNNTUlFS2lMVGlwQjdOb0M4LzY2UXZZVU1LRm9MZVltY0tBSXFaQ2ptSTI5c2NtaUpuQTFIcjZnSWNWOG5DS3dVSnpPc2VqU3BsSDFLVkhWVlJkV1ExdjBPTWh3dThyby96WC9zVXM5UDh4L1JlUGFHRWFjdjVLS0oxRjE3a0lOOSszY2JzMjJoaDRLK2ZLdm9PYldJVDRiaDhwOGhtMjhSem81eVNWK0ZkQmpJUDh3ZzV1MUV3SHcyL2dUTHFISEk2M3JmNzlnZVRWUkhpdXQ2MkhXcmpKQUMxSThDRXJjVDBZbGRmTkgwZHBhMmNSTGlGaWpRSnVNTVNHL1lrOUtic2Y0bHo1NytkVWNOa1lGUWhaSWFuUnlmSm41amZYVjNIUklGVkkrVVlpMWc2a0hHN1dQYThTTGhtbEJERmZqSERGS0NPSStlUll1L1BueCtMbi9uMFhGd3pUaFJ5d0x4Q2JVTUhqYWh6R1JyZHhiQWp5R0tEWE9BTUlja2xGaW5tcDVPVjduSS9tSGE2K3hSNzZDT2hCMHBLUXNWUWQzRUdTd3dtNktQaUtiOWZSUTBFZG9peHJpQjRLaGhCbFdRR1pBM3E1aFNncmd3NFNEaUdyaURZSlJjaHFvazFDRTdMNmFKUFFoNndKMmlSTUlNc25wOGdrYzA5VkdrMGF2QjN4SEZvMDVGeFplYlJveUx1eXltalJVSFpsMWRDaW9lYkthcUJGUThPVnBUMllFb1FYYk5uSkNvY255MURnWWpPN2x4Z0ZUeGJwQkVFNm5aSitmRWcvMWFTT0Rha2JTT28wc3k0eFNCZGtwTXRYMHNYK0lkb2tmR3lOa0c0a3NXNjdrVzVTa203cGttNkFzNFlMU0lNcnBLRW8wc0FkYTVpVE5DaE1Ha0puVFRnZ1RjOWdUV1loVGYwaFRaUmlUU3NqVGNKalRWa2tUZkJrVFlkbFRSNG1UYlZtVFV3blRlTm5QZlRBZWtTRTlFQU42L0VqQThFV0w1Z1NCT25STml1dCtJandLbUVQQXJJZW0yUTlaS3J4U080dkRCZ1N6Z1BNck1lOVdRL0hzNVlTVUYxNDRZOWc0UVhXTWhVT2xFVTlIRGhMb0xBV2pIR2dMSy9qd0ZtTXlJR3lkTk1TeWtKWERweGx3UndvaTZndG9TdzU1OEpZb00rRnNweWhTOHJ1M1dIUUFQUVZmd1NFcFRJL2NBdUwramo5ODJWaDBjOHNDMFA4S01QNjIzZ1oxdjhNeS9vSGpBMG4wMHg5eVBVQUFBQUFTVVZPUks1Q1lJST0iIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIGlkPSJpbWcxIj48L2ltYWdlPjxjbGlwUGF0aCBpZD0iY2xpcDIiPjxwYXRoIGQ9Ik0wIDU0LjM0NDUgMTQ1IDU0LjM0NDUgMTQ1IDE0NSAwIDE0NVoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY5OSAtMTMpIj48cGF0aCBkPSJNNzAwLjUgMTY2LjVDNzAwLjUgODMuMTA1IDc2OC4xMDUgMTUuNTAwMSA4NTEuNSAxNS41MDAxIDkzNC44OTUgMTUuNTAwMSAxMDAyLjUgODMuMTA1IDEwMDIuNSAxNjYuNSAxMDAyLjUgMjQ5Ljg5NSA5MzQuODk1IDMxNy41IDg1MS41IDMxNy41IDc2OC4xMDUgMzE3LjUgNzAwLjUgMjQ5Ljg5NSA3MDAuNSAxNjYuNVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiNGRkQ5NjYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMikiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAtMCAxLjAwMzggNzg0IDEyNS40NDkpIj48dXNlIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHhsaW5rOmhyZWY9IiNpbWcxIiB0cmFuc2Zvcm09InNjYWxlKDAuOTY2NjY3IDAuOTY2NjY3KSI+PC91c2U+PC9nPjxwYXRoIGQ9Ik03NzkuNDQzIDE1Ni40NjYgODI1LjE3OSAxMzguNDU4IDgyOC43NTQgMTQ3LjUzNyA3ODMuMDE4IDE2NS41NDVaIiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cmVjdCB4PSI4Ljg2NTU4IiB5PSIxNS44NjQ3IiB3aWR0aD0iNDkuMTUzNSIgaGVpZ2h0PSI5Ljc1Nzc0IiBmaWxsPSIjNDA0MDQwIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkzMDQ3NSAwLjM2NjM1NSAwLjM2NjM1NSAtMC45MzA0NzUgNzY1LjM4MiAxNDMuMTUzKSIvPjxyZWN0IHg9IjguODY1NTgiIHk9IjE1Ljg2NDciIHdpZHRoPSI0OS4xNTM1IiBoZWlnaHQ9IjkuNzU3NzQiIGZpbGw9IiM0MDQwNDAiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjkzMDQ3NSAtMC4zNjYzNTUgLTAuMzY2MzU1IDAuOTMwNDc1IDk0MC45NzggMTQyLjQ5OSkiLz48cGF0aCBkPSJNOTI2LjkxNyAxMjkuMTg3IDg4MS4xODEgMTQ3LjE5NCA4NzcuNjA2IDEzOC4xMTUgOTIzLjM0MiAxMjAuMTA3WiIgZmlsbD0iIzQwNDA0MCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==');
    background-size: contain;
  }

  /* びっくりアイコン */
  .icon-rating i.wow {
    opacity: 0;
    position: absolute;
    left: 40%;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA1IiBoZWlnaHQ9IjMwNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHBhdGggZD0iTTE4IDM2MiAzMjMgMzYyIDMyMyA2NjcgMTggNjY3WiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L2NsaXBQYXRoPjxpbWFnZSB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFKWUFBQUNXQ0FNQUFBQUwzNEhRQUFBQUFYTlNSMElBcnM0YzZRQUFBQVJuUVUxQkFBQ3hqd3Y4WVFVQUFBRERVRXhVUlFBQUFQOEFBUDhBQUw5QVFNd3pNN1lrSkw4Z0lNd3pNOElrTWNVakxzRW5McjBrTE1Nb0w3NG5McjhtTGI4cExzRW9MYjhuTE1FbExjSW9MY0lvTDc4bkxzSXBMTDhvTE1Bb0xzQW5MY0FtTE1FbUxzQW1MYjhuTE1BbUxjQW5MY0FtTGNFb0xzQW5MY0VvTHNFb0xjRW9MY0ltTGNJb0xjSW5MTUVvTHNJbUxzRW5MY0VuTGNFb0xjRW5MY0VuTGNFbkxjRW5MY0ltTGNFb0xjRW5MY0VvTGNFbkxjRW5MY0VvTGNFbkxjRW5Mc0VuTGNFbkxjRW5MY0VuTGNFbkxjRW5MWFd3TkFVQUFBQkFkRkpPVXdBQkFnUUZCd2dLRlJZaEl5WW5LQ3d0TkQ0L1IwaExURTFWWFY1bGFIRjJmb0NDakptZ3BxYXNyYk81eHNmS3k5SFQxTnZmNGVMajZPcnI3dlAzKy82SG9rUmJBQUFBQ1hCSVdYTUFBQXNUQUFBTEV3RUFtcHdZQUFBRHZFbEVRVlI0WHUyYzZWYmlRQkNGZ3lpSWlLUERFdGwzR0dVWkZUZmM4UDJmYWtKeVhaQkFrazR2OTV6aCs5ZWRwUHFlRStoVWQxV1h0VU12NlZ5K1hHdTBYUnExY2o2WHhnVlRIQmFiL2NuVCt4cFBrMzZ6bU1GTmVqbXBEMitoWWdPM3cvb0pidFpEeXU3ZFkrd0E3bnQyQ2c4cFp0OGV2R0RRVUx3TTdIMDhxbzdqN2lPR2k4Qmo5eGlQS3lGUkdpMHdVa1FXbzFJQ1JtU1RyTjVnRUNGdXFra1lrc2xlWlFiN3dzd3FlekFtamNJVmJNZmlxZ0J6Y3NoZXdtNXNMck13R1orRDFpdU1TdUMxZFFDek1UbTdoa1ZKWEovQmNCeVNuVGVZazhaYkovWi84bWdNVzFJWkg4RzhJT2ZQTUNTWjUzTU1JRUtpTFRpcEI3Tm9DOC82NlF2WVVNS0ZvTGVZbWNLQUlxWkNqbUkyOXNjbWlKbkExSHI2Z0ljVjhuQ0t3VUp6T3NlalNwbEgxS1ZIVlZSZFdRMXYwT01od3U4cm8velgvc1VzOVA4eC9SZVBhR0VhY3Y1S0tKMUYxN2tJTjkrM2NiczIyaGg0SytmS3ZvT2JXSVQ0Ymg4cDhobTI4UnpvNXlTVitGZEJqSVA4d2c1dTFFd0h3Mi9nVExxSEhJNjNyZjc5Z2VUVlJIaXV0NjJIV3JqSkFDMUk4Q0VyY1QwWWxkZk5IMGRwYTJjUkxpRmlqUUp1TU1TRy9ZazlLYnNmNGx6NTcrZFVjTmtZRlFoWklhblJ5ZkpuNWpmWFYzSFJJRlZJK1VZaTFnNmtIRzdXUGE4U0xobWxCREZmakhERktDT0krZVJZdS9QbngrTG4vbjBYRnd6VGhSeXdMeENiVU1IamFoekdScmR4YkFqeUdLRFhPQU1JY2tsRmlubXA1T1Y3bkkvbUhhNit4Ujc2Q09oQjBwS1FzVlFkM0VHU3d3bTZLUGlLYjlmUlEwRWRvaXhyaUI0S2hoQmxXUUdaQTNxNWhTZ3JndzRTRGlHcmlEWUpSY2hxb2sxQ0U3TDZhSlBRaDZ3SjJpUk1JTXNucDhna2MwOVZHazBhdkIzeEhGbzA1RnhaZWJSb3lMdXl5bWpSVUhabDFkQ2lvZWJLYXFCRlE4T1ZwVDJZRW9RWGJObkpDb2NueTFEZ1lqTzdseGdGVHhicEJFRTZuWkorZkVnLzFhU09EYWtiU09vMHN5NHhTQmRrcE10WDBzWCtJZG9rZkd5TmtHNGtzVzY3a1c1U2ttN3BrbTZBczRZTFNJTXJwS0VvMHNBZGE1aVROQ2hNR2tKblRUZ2dUYzlnVFdZaFRmMGhUWlJpVFNzalRjSmpUVmtrVGZCa1RZZGxUUjRtVGJWbVRVd25UZU5uUGZUQWVrU0U5RUFONi9FakE4RVdMNWdTQk9uUk5pdXQrSWp3S21FUEFySWVtMlE5WktyeFNPNHZEQmdTemdQTXJNZTlXUS9IczVZU1VGMTQ0WTlnNFFYV01oVU9sRVU5SERoTG9MQVdqSEdnTEsvandGbU15SUd5ZE5NU3lrSlhEcHhsd1J3b2k2Z3RvU3c1NThKWW9NK0ZzcHloUzhydTNXSFFBUFFWZndTRXBUSS9jQXVMK2pqOTgyVmgwYzhzQzBQOEtNUDYyM2daMXY4TXkvb0hqQTBuMDB4OXlQVUFBQUFBU1VWT1JLNUNZSUk9IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBpZD0iaW1nMSI+PC9pbWFnZT48Y2xpcFBhdGggaWQ9ImNsaXAyIj48cGF0aCBkPSJNMCAwLjAwMDg4IDg4IDAuMDAwODggODggODggMCA4OFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4IC0zNjIpIj48cGF0aCBkPSJNMTkuNTAwMSA1MTQuNUMxOS41MDAxIDQzMS4xMDUgODcuMTA1IDM2My41IDE3MC41IDM2My41IDI1My44OTUgMzYzLjUgMzIxLjUgNDMxLjEwNSAzMjEuNSA1MTQuNSAzMjEuNSA1OTcuODk1IDI1My44OTUgNjY1LjUgMTcwLjUgNjY1LjUgODcuMTA1IDY2NS41IDE5LjUwMDEgNTk3Ljg5NSAxOS41MDAxIDUxNC41WiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0iI0ZGRDk2NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTAgMTdDLTIuMTAwNjdlLTE1IDcuNjExMTYgNy4zODczLTIuMTY0MzNlLTE1IDE2LjUtNC4zMjg2NWUtMTUgMjUuNjEyNy04LjY1NzMxZS0xNSAzMyA3LjYxMTE2IDMzIDE3IDMzIDI2LjM4ODggMjUuNjEyNyAzNCAxNi41IDM0IDcuMzg3MyAzNC0xLjA1MDM0ZS0xNCAyNi4zODg4IDAgMTdaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KC0xIC04Ljc0MjI4ZS0wOCAtOC43NDIyOGUtMDggMSAxNDIuNSA0NjkuNSkiLz48cGF0aCBkPSJNMCAxN0MtMi4xMDA2N2UtMTUgNy42MTExNiA3LjM4NzMtMi4xNjQzM2UtMTUgMTYuNS00LjMyODY1ZS0xNSAyNS42MTI3LTguNjU3MzFlLTE1IDMzIDcuNjExMTYgMzMgMTcgMzMgMjYuMzg4OCAyNS42MTI3IDM0IDE2LjUgMzQgNy4zODczIDM0LTEuMDUwMzRlLTE0IDI2LjM4ODggMCAxN1oiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiM0MDQwNDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgLTguNzQyMjhlLTA4IC04Ljc0MjI4ZS0wOCAxIDIzNS41IDQ2OS41KSIvPjxwYXRoIGQ9Ik0xMDIuNzYyIDQzNy45OTRDMTAxLjc4OCA0MzAuNDExIDExMi42ODcgNDIyLjc2MiAxMjcuMTA2IDQyMC45MDkgMTQxLjUyNSA0MTkuMDU3IDE1NC4wMDQgNDIzLjcwMyAxNTQuOTc4IDQzMS4yODdMMTQ4LjExMiA0MzIuMTY5QzE0Ny42MjUgNDI4LjM3NyAxMzguNjE1IDQyNi40MSAxMjcuOTg4IDQyNy43NzUgMTE3LjM2MSA0MjkuMTQgMTA5LjE0IDQzMy4zMjEgMTA5LjYyNyA0MzcuMTEyWiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2Utd2lkdGg9IjEuMzMzMzMiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMCAxNC4xMTU2Qy0zLjM1MTJlLTE1IDYuMzE5NzkgMTEuNzg1LTUuMDI2ODFlLTE1IDI2LjMyMjUtNi43MDI0MWUtMTUgNDAuODYtMS4wMDUzNmUtMTQgNTIuNjQ0OSA2LjMxOTc5IDUyLjY0NDkgMTQuMTE1Nkw0NS41ODcyIDE0LjExNTZDNDUuNTg3MiAxMC4yMTc3IDM2Ljk2MjEgNy4wNTc3OSAyNi4zMjI1IDcuMDU3NzkgMTUuNjgyOSA3LjA1Nzc5IDcuMDU3NzggMTAuMjE3NyA3LjA1Nzc4IDE0LjExNTZaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS13aWR0aD0iMS4zMzMzMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiM0MDQwNDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuOTkxODUgLTAuMTI3NDA4IC0wLjEyNzQwOCAwLjk5MTg1IDI1NC4yNzIgNDI0LjA0OSkiLz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDIpIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgLTAgMS4yNzI3MyAxMjcgNTE1Ljk5OSkiPjx1c2Ugd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeGxpbms6aHJlZj0iI2ltZzEiIHRyYW5zZm9ybT0ic2NhbGUoMC41ODY2NjcgMC41ODY2NjcpIj48L3VzZT48L2c+PC9nPjwvc3ZnPg==');
    background-size: contain;
  }

  /* ぴえんアイコン */
  .icon-rating i.pien {
    opacity: 0;
    position: absolute;
    left: 60%;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA1IiBoZWlnaHQ9IjMwNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHBhdGggZD0iTTM1OCAzNTkgNjYzIDM1OSA2NjMgNjY0IDM1OCA2NjRaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTggLTM1OSkiPjxwYXRoIGQ9Ik0zNTkuNSA1MTEuNUMzNTkuNSA0MjguMTA1IDQyNy4zMjkgMzYwLjUgNTExIDM2MC41IDU5NC42NzEgMzYwLjUgNjYyLjUgNDI4LjEwNSA2NjIuNSA1MTEuNSA2NjIuNSA1OTQuODk1IDU5NC42NzEgNjYyLjUgNTExIDY2Mi41IDQyNy4zMjkgNjYyLjUgMzU5LjUgNTk0Ljg5NSAzNTkuNSA1MTEuNVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiNGRkQ5NjYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0wIDI2LjVDLTMuMzczOGUtMTUgMTEuODY0NSAxMS44NjQ1LTMuMzczOGUtMTUgMjYuNS02Ljc0NzYxZS0xNSA0MS4xMzU1LTEuMzQ5NTJlLTE0IDUzIDExLjg2NDUgNTMgMjYuNSA1MyA0MS4xMzU1IDQxLjEzNTUgNTMgMjYuNSA1MyAxMS44NjQ1IDUzLTEuNjg2OWUtMTQgNDEuMTM1NSAwIDI2LjVaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KC0xIC04Ljc0MjI4ZS0wOCAtOC43NDIyOGUtMDggMSA0OTEuNSA0NjcuNSkiLz48cGF0aCBkPSJNNDQyLjUgNDg2QzQ0Mi41IDQ3OS42NDkgNDQ3LjY0OSA0NzQuNSA0NTQgNDc0LjUgNDYwLjM1MSA0NzQuNSA0NjUuNSA0NzkuNjQ5IDQ2NS41IDQ4NiA0NjUuNSA0OTIuMzUxIDQ2MC4zNTEgNDk3LjUgNDU0IDQ5Ny41IDQ0Ny42NDkgNDk3LjUgNDQyLjUgNDkyLjM1MSA0NDIuNSA0ODZaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDY1LjUgNTA1LjVDNDY1LjUgNTAxLjA4MiA0NjkuMDgyIDQ5Ny41IDQ3My41IDQ5Ny41IDQ3Ny45MTggNDk3LjUgNDgxLjUgNTAxLjA4MiA0ODEuNSA1MDUuNSA0ODEuNSA1MDkuOTE4IDQ3Ny45MTggNTEzLjUgNDczLjUgNTEzLjUgNDY5LjA4MiA1MTMuNSA0NjUuNSA1MDkuOTE4IDQ2NS41IDUwNS41WiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQ3Mi41IDQ4OC41QzQ3Mi41IDQ4NC4wODIgNDc2LjA4MiA0ODAuNSA0ODAuNSA0ODAuNSA0ODQuOTE4IDQ4MC41IDQ4OC41IDQ4NC4wODIgNDg4LjUgNDg4LjUgNDg4LjUgNDkyLjkxOCA0ODQuOTE4IDQ5Ni41IDQ4MC41IDQ5Ni41IDQ3Ni4wODIgNDk2LjUgNDcyLjUgNDkyLjkxOCA0NzIuNSA0ODguNVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0wIDI2Qy0zLjMxMDE1ZS0xNSAxMS42NDA2IDExLjY0MDYtMy4zMTAxNWUtMTUgMjYtNi42MjAyOWUtMTUgNDAuMzU5NC0xLjMyNDA2ZS0xNCA1MiAxMS42NDA2IDUyIDI2IDUyIDQwLjM1OTQgNDAuMzU5NCA1MiAyNiA1MiAxMS42NDA2IDUyLTEuNjU1MDdlLTE0IDQwLjM1OTQgMCAyNloiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiM0MDQwNDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgLTguNzQyMjhlLTA4IC04Ljc0MjI4ZS0wOCAxIDU4Mi41IDQ2Ni41KSIvPjxwYXRoIGQ9Ik01MzMuNSA0ODVDNTMzLjUgNDc4LjY0OSA1MzguNjQ5IDQ3My41IDU0NSA0NzMuNSA1NTEuMzUxIDQ3My41IDU1Ni41IDQ3OC42NDkgNTU2LjUgNDg1IDU1Ni41IDQ5MS4zNTEgNTUxLjM1MSA0OTYuNSA1NDUgNDk2LjUgNTM4LjY0OSA0OTYuNSA1MzMuNSA0OTEuMzUxIDUzMy41IDQ4NVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik01NTYuNSA1MDQuNUM1NTYuNSA1MDAuMDgyIDU2MC4wODIgNDk2LjUgNTY0LjUgNDk2LjUgNTY4LjkxOCA0OTYuNSA1NzIuNSA1MDAuMDgyIDU3Mi41IDUwNC41IDU3Mi41IDUwOC45MTggNTY4LjkxOCA1MTIuNSA1NjQuNSA1MTIuNSA1NjAuMDgyIDUxMi41IDU1Ni41IDUwOC45MTggNTU2LjUgNTA0LjVaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNTYzLjUgNDg3LjVDNTYzLjUgNDgzLjA4MiA1NjcuMDgyIDQ3OS41IDU3MS41IDQ3OS41IDU3NS45MTggNDc5LjUgNTc5LjUgNDgzLjA4MiA1NzkuNSA0ODcuNSA1NzkuNSA0OTEuOTE4IDU3NS45MTggNDk1LjUgNTcxLjUgNDk1LjUgNTY3LjA4MiA0OTUuNSA1NjMuNSA0OTEuOTE4IDU2My41IDQ4Ny41WiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQ3MC41IDU4NkM0NzAuNSA1NzAuMjYgNDg4LjYzMyA1NTcuNSA1MTEgNTU3LjUgNTMzLjM2OCA1NTcuNSA1NTEuNSA1NzAuMjYgNTUxLjUgNTg2TDUzNy4yNSA1ODZDNTM3LjI1IDU3OC4xMyA1MjUuNDk4IDU3MS43NSA1MTEgNTcxLjc1IDQ5Ni41MDMgNTcxLjc1IDQ4NC43NSA1NzguMTMgNDg0Ljc1IDU4NloiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiM0MDQwNDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik00NzAuOTg4IDQyNy43NjdDNDc0LjUzNCA0MzMuOTUyIDQ2Ny4xODMgNDQ0LjgyNyA0NTQuNTcxIDQ1Mi4wNTcgNDQxLjk1OCA0NTkuMjg2IDQyOC44NiA0NjAuMTMyIDQyNS4zMTQgNDUzLjk0N0w0MzAuOTE0IDQ1MC43MzdDNDMyLjY4NyA0NTMuODMgNDQxLjg0MSA0NTEuOTEzIDQ1MS4zNjEgNDQ2LjQ1NyA0NjAuODgxIDQ0MSA0NjcuMTYxIDQzNC4wNjkgNDY1LjM4OCA0MzAuOTc3WiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2Utd2lkdGg9IjEuMzMzMzMiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMCAxMi45MDkyQy0zLjM1MTJlLTE1IDUuNzc5NjQgMTEuNzg1LTMuMzUxMmUtMTUgMjYuMzIyNS02LjcwMjQxZS0xNSA0MC44Ni0xLjAwNTM2ZS0xNCA1Mi42NDQ5IDUuNzc5NjQgNTIuNjQ0OSAxMi45MDkyTDQ2LjE5MDMgMTIuOTA5MkM0Ni4xOTAzIDkuMzQ0NDEgMzcuMjk1MiA2LjQ1NDU5IDI2LjMyMjUgNi40NTQ1OSAxNS4zNDk3IDYuNDU0NTkgNi40NTQ1OSA5LjM0NDQxIDYuNDU0NTkgMTIuOTA5MloiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0iIzQwNDA0MCIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjg2NzU4MSAwLjQ5NzI5NiAwLjQ5NzI5NiAtMC44Njc1ODEgNTQ5LjczNiA0NDAuMTU1KSIvPjwvZz48L3N2Zz4=');
    background-size: contain;
  }

  /* 悲しいアイコン */
  .icon-rating i.sad {
    opacity: 0;
    position: absolute;
    left: 80%;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA1IiBoZWlnaHQ9IjMwNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHBhdGggZD0iTTY5OSAzNTEgMTAwNCAzNTEgMTAwNCA2NTYgNjk5IDY1NloiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImNsaXAxIj48cGF0aCBkPSJNODgxIDQ4NCA5NzcgNDg0IDk3NyA1ODAgODgxIDU4MFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImNsaXAyIj48cGF0aCBkPSJNODgxIDQ4NCA5NzcgNDg0IDk3NyA1ODAgODgxIDU4MFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImNsaXAzIj48cGF0aCBkPSJNODgxIDQ4NCA5NzcgNDg0IDk3NyA1ODAgODgxIDU4MFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY5OSAtMzUxKSI+PHBhdGggZD0iTTcwMC41IDUwMy41QzcwMC41IDQyMC4xMDUgNzY4LjEwNSAzNTIuNSA4NTEuNSAzNTIuNSA5MzQuODk1IDM1Mi41IDEwMDIuNSA0MjAuMTA1IDEwMDIuNSA1MDMuNSAxMDAyLjUgNTg2Ljg5NSA5MzQuODk1IDY1NC41IDg1MS41IDY1NC41IDc2OC4xMDUgNjU0LjUgNzAwLjUgNTg2Ljg5NSA3MDAuNSA1MDMuNVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiNGRkQ5NjYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0wIDE2LjVDLTIuMTAwNjdlLTE1IDcuMzg3MyA3LjM4NzMtMi4xMDA2N2UtMTUgMTYuNS00LjIwMTM0ZS0xNSAyNS42MTI3LTguNDAyNjhlLTE1IDMzIDcuMzg3MyAzMyAxNi41IDMzIDI1LjYxMjcgMjUuNjEyNyAzMyAxNi41IDMzIDcuMzg3MyAzMy0xLjA1MDM0ZS0xNCAyNS42MTI3IDAgMTYuNVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiM0MDQwNDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgLTguNzQyMjhlLTA4IC04Ljc0MjI4ZS0wOCAxIDgyMS41IDQ1Mi41KSIvPjxwYXRoIGQ9Ik0wIDE2LjVDLTIuMTAwNjdlLTE1IDcuMzg3MyA3LjM4NzMtMi4xMDA2N2UtMTUgMTYuNS00LjIwMTM0ZS0xNSAyNS42MTI3LTguNDAyNjhlLTE1IDMzIDcuMzg3MyAzMyAxNi41IDMzIDI1LjYxMjcgMjUuNjEyNyAzMyAxNi41IDMzIDcuMzg3MyAzMy0xLjA1MDM0ZS0xNCAyNS42MTI3IDAgMTYuNVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9IiM0MDQwNDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgLTguNzQyMjhlLTA4IC04Ljc0MjI4ZS0wOCAxIDkxNC41IDQ1Mi41KSIvPjxwYXRoIGQ9Ik0wIDEyLjkwOTJDLTMuMzUxMmUtMTUgNS43Nzk2NCAxMS43ODUtMy4zNTEyZS0xNSAyNi4zMjI1LTYuNzAyNDFlLTE1IDQwLjg2LTEuMDA1MzZlLTE0IDUyLjY0NDkgNS43Nzk2NCA1Mi42NDQ5IDEyLjkwOTJMNDYuMTkwMyAxMi45MDkyQzQ2LjE5MDMgOS4zNDQ0MSAzNy4yOTUyIDYuNDU0NTkgMjYuMzIyNSA2LjQ1NDU5IDE1LjM0OTcgNi40NTQ1OSA2LjQ1NDU5IDkuMzQ0NDEgNi40NTQ1OSAxMi45MDkyWiIgc3Ryb2tlPSIjMkY1MjhGIiBzdHJva2Utd2lkdGg9IjEuMzMzMzMiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjgwMzIyMyAtMC41OTU2NzggLTAuNTk1Njc4IDAuODAzMjIzIDk1Mi4zNiA0NTMuMjA0KSIvPjxwYXRoIGQ9Ik03NjYuMDg3IDQ2My41NzNDNzYxLjg0IDQ1Ny44NDcgNzY3Ljg2MyA0NDYuMTg0IDc3OS41NCA0MzcuNTI1IDc5MS4yMTcgNDI4Ljg2NSA4MDQuMTI2IDQyNi40ODcgODA4LjM3MiA0MzIuMjE0TDgwMy4xODggNDM2LjA1OUM4MDEuMDY1IDQzMy4xOTUgNzkyLjE5OCA0MzYuMTczIDc4My4zODUgNDQyLjcwOSA3NzQuNTcxIDQ0OS4yNDUgNzY5LjE0OCA0NTYuODY1IDc3MS4yNzEgNDU5LjcyOVoiIHN0cm9rZT0iIzJGNTI4RiIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0iIzQwNDA0MCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTgxNi41IDU0OUM4MTYuNSA1MzMuMjYgODM0Ljg1NiA1MjAuNSA4NTcuNSA1MjAuNSA4ODAuMTQ0IDUyMC41IDg5OC41IDUzMy4yNiA4OTguNSA1NDlMODg0LjI1IDU0OUM4ODQuMjUgNTQxLjEzIDg3Mi4yNzQgNTM0Ljc1IDg1Ny41IDUzNC43NSA4NDIuNzI2IDUzNC43NSA4MzAuNzUgNTQxLjEzIDgzMC43NSA1NDlaIiBzdHJva2U9IiMyRjUyOEYiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBmaWxsPSIjNDA0MDQwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDEpIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDIpIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDMpIj48cGF0aCBkPSJNOTI5IDQ5NEM5MjkgNDk0IDkwNCA1MjkuMiA5MDQgNTQ1IDkwNCA1NTguOCA5MTUuMiA1NzAgOTI5IDU3MCA5NDIuOCA1NzAgOTU0IDU1OC44IDk1NCA1NDUgOTU0IDUyOS4xIDkyOSA0OTQgOTI5IDQ5NFoiIGZpbGw9IiMwMEIwRjAiLz48L2c+PC9nPjwvZz48L2c+PC9zdmc+');
    background-size: contain;
  }

  .icon-rating input {
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    display: inline-block;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
  }
  .icon-rating input:hover + i,
  .icon-rating input:checked + i {
    opacity: 1;
  }
  .icon-rating i ~ i {
    width: 40%;
  }
  .icon-rating i ~ i ~ i {
    width: 60%;
  }
  .icon-rating i ~ i ~ i ~ i {
    width: 80%;
  }
  .icon-rating i ~ i ~ i ~ i ~ i {
    width: 100%;
  }

結果

アイコンにマウスオーバーすると・・・
demo.gif

いろんなリアクションができました！！🙂😄😮🥺😢
手作り感満載のアイコンがいい味出してます（笑）
グループフィールドの値も+1されてます。

終わりに

今回は「誰が」押したかまでは分からない、何回でもクリックできるような仕様にしました。
「ユーザー選択フィールド」を追加して誰がそんなリアクションをしたのか分かるようにしてもいいな、と思いました。

🦒1年kintone案件に携わって
コードを書く機会が増えて、こういうフィールドコードにすれば処理がシンプルにかける、とか、
これをやりたいときは、この書き方のパターンで書けばいいんだとかだんだんと分かるようになってきました！
これからは、ただコードを書けるだけじゃなくて、
いいコード（メンテナンスしやすいとか、他の人が見てわかりやすいとか）を書くこと意識して
これからも経験を増やして、エンジニアとしても成長していきたいです。

参考サイト

11
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?