let listItem1 = new Vue({
  el: '#listItem1',
  data: {
    posts:[
{ title: '#1101 エキストラクリアー', sub: '【透明/つやのない仕上がり】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor1101extraclear/', img: "/wp/wp-content/uploads/ex_clr.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: '#3101 ノーマルクリアー', sub: '【透明/3分つや】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor3101normalclear/', img: "/wp/wp-content/uploads/normal_clr.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'カウンタートップオイル', sub: '', sub2: '国土交通省大臣官房官庁営繕部監修<br class="pc">公共建築/木造工事標準仕様書<br class="pc">JASS18塗装工事M-301(UC塗り)適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/countertopoil/', img: "/wp/wp-content/uploads/top_oil.jpg", icon: ['table',], iconImg: ['/wp/wp-content/uploads/icon_table.png',], iconName: 'テーブルにおすすめ', display: true },
{ title: 'フロアークリアー', sub: '【透明/3分つやとつや消し】', sub2: '国土交通省大臣官房官庁営繕部監修<br class="pc">公共建築/木造工事標準仕様書<br class="pc">JASS18塗装工事M-301(UC塗り)適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor3032floorclearwithgloss/', img: "/wp/wp-content/uploads/floorclr-1.jpg", icon: ['floor',], iconImg: ['/wp/wp-content/uploads/icon_floor.png',], iconName: '床におすすめ', display: true },
{ title: 'フロアークリアーエクスプレス', sub: '【速乾性プロ向け！<br>透明/2～3分とつや消し】', sub2: '国土交通省大臣官房官庁営繕部監修<br class="pc">公共建築/木造工事標準仕様書<br class="pc">JASS18塗装工事M-301(UC塗り)適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor3332floorclearexpresswithgloss/', img: "/wp/wp-content/uploads/floorclrex.jpg", icon: ['floor',], iconImg: ['/wp/wp-content/uploads/icon_floor.png',], iconName: '床におすすめ', display: true },
{ title: 'フロアーカラー<br>フロアーカラーナチュラル', sub: '【半透明仕上げ/白木仕上げ】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/floorcolornatural/', img: "/wp/wp-content/uploads/fc3040-3041.jpg", icon: ['floor',], iconImg: ['/wp/wp-content/uploads/icon_floor.png',], iconName: '床におすすめ', display: true },
{ title: 'ウッドワックス', sub: '【半透明/3分つや】', sub2: '日本建築学科建築工事標準仕様書・<br class="pc">同解説JASS18塗装工事M-306（ST塗り）<br class="pc">適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorwoodwax/', img: "/wp/wp-content/uploads/woodwax.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'ウッドワックスオパーク', sub: '【塗りつぶし仕上げ/3分つや】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorwoodwaxopaque/', img: "/wp/wp-content/uploads/woodwax_opk.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: '#4006 ウッドプロテクター（下塗り剤）', sub: '【湿気の多い場所に防カビ】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor4006woodprotector/', img: "/wp/wp-content/uploads/wood_prtctr.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
    ],
    category_lists: [
      {
        name: 'すべて',
        slug: 'all',
        src: './assets/img/icon_all.png',
        nameimg: 'すべて',
        done: true
      },

      {
        name: '床におすすめ',
        slug: 'floor',
        src: '/wp/wp-content/uploads/icon_floor.png',
        nameimg: '/wp/wp-content/uploads/name_floor.png',
        done: false
      },

      {
        name: 'テーブルにおすすめ',
        slug: 'table',
        src: '/wp/wp-content/uploads/icon_table.png',
        nameimg: '/wp/wp-content/uploads/name_table.png',
        done: false
      },
    ],
    preview1: 'all'
  },
  methods: {
    find_categories1: function(e){
      var posts = this.posts;
      <!-- var preview = this.preview1; -->
      var preview = e.target.value;
      var rep = $(e.target).parents("label").html().replace(/<input.+?> <span.+?><\/span>/,"");
      $('#listItem1 .disp-text span').html(rep);
      if(matchMedia("(max-width: 768px)").matches){
        <!-- $(this).parents('.inner').slideUp(); -->
      }

      if(preview.length > 0) {

postsicon = posts.map((obj) => obj.icon)
postsicon = postsicon.join(',');

        //無い時の判定 //
        if(postsicon.indexOf(preview) > -1 || preview == "all"){
          $('#listItem1 .nainai').hide()
        } else {
          $('#listItem1 .nainai').show()
          //console.log('nannmonainen')
        }


        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].icon;
          if(categories.indexOf(preview) >= 0 || preview == "all"){
            posts[i].display = true;
          } else {
            posts[i].display = false;
          }
        }


      } else {
        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].categories;
          posts[i].display = true;
        }
      }


    }
  }
});

let listItem2 = new Vue({
  el: '#listItem2',
  data: {
    posts:[
{ title: 'ワンコートオンリー', sub: '【半透明/つやのない仕上がり】', sub2: '日本建築学科建築工事標準仕様書・<br class="pc">同解説JASS18塗装工事M-306（ST塗り）<br class="pc">適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocoloronecoatonly/', img: "/wp/wp-content/uploads/onecoatonly.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'カントリーカラー', sub: '【塗りつぶし仕上げ/<br>3～5分つや】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorcountrycolor/', img: "/wp/wp-content/uploads/country_color.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
    ],
    category_lists: [
      {
        name: 'すべて',
        slug: 'all',
        src: './assets/img/icon_all.png',
        nameimg: 'すべて',
        done: true
      },
    ],
    preview2: 'all'
  },
  methods: {
    find_categories2: function(e){
      var posts = this.posts;
      <!-- var preview = this.preview2; -->
      var preview = e.target.value;
      var rep = $(e.target).parents("label").html().replace(/<input.+?> <span.+?><\/span>/,"");
      $('#listItem2 .disp-text span').html(rep);
      if(matchMedia("(max-width: 768px)").matches){
        <!-- $(this).parents('.inner').slideUp(); -->
      }

      if(preview.length > 0) {

postsicon = posts.map((obj) => obj.icon)
postsicon = postsicon.join(',');

        //無い時の判定 //
        if(postsicon.indexOf(preview) > -1 || preview == "all"){
          $('#listItem2 .nainai').hide()
        } else {
          $('#listItem2 .nainai').show()
          //console.log('nannmonainen')
        }


        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].icon;
          if(categories.indexOf(preview) >= 0 || preview == "all"){
            posts[i].display = true;
          } else {
            posts[i].display = false;
          }
        }


      } else {
        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].categories;
          posts[i].display = true;
        }
      }


    }
  }
});

let listItem3 = new Vue({
  el: '#listItem3',
  data: {
    posts:[
{ title: 'ウッドステインプロテクター', sub: '【半透明】', sub2: '国土交通省大臣官房官庁営繕部監修<br class="pc">公共建築/木造工事標準仕様書<br class="pc">JASS18塗装工事M-307(WP塗り)適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorwoodstainprotector/', img: "/wp/wp-content/uploads/wsp075.jpg", icon: ['wooddeck',], iconImg: ['/wp/wp-content/uploads/icon_wooddeck.png',], iconName: 'ウッドデッキにおすすめ', display: true },
{ title: 'カントリーカラープラス', sub: '【再塗装に最適】', sub2: '国土交通省大臣官房官庁営繕部監修<br class="pc">公共建築/木造工事標準仕様書<br class="pc">JASS18塗装工事M-304/<br class="pc">JIS K5516(SOP塗り)、及び<br class="pc">公共建築改修工事標準仕様書<br class="pc">JASS18塗装工事M-304/<br class="pc">JIS K5516(SOP塗りB種塗替え)適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorcountrycolorplus/', img: "/wp/wp-content/uploads/ccp25L.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: '外装用クリアープラス', sub: '【透明外装用 つや消し】', sub2: '国土交通省大臣官房官庁営繕部監修<br class="pc">公共建築/木造工事標準仕様書<br class="pc">JASS18塗装工事M-307(WP塗り)適合品', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor420exteriorclearplus/', img: "/wp/wp-content/uploads/701_exteriorclear_plus.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: '#430 ノンスリップデッキ', sub: '【滑り止め上塗り剤】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolor430nonslipperingdeck/', img: "/wp/wp-content/uploads/nonslip_dec.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'WRウォーターレペレント(下塗り剤)', sub: '【防虫、防腐、防カビ剤】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorwaterrepellent/', img: "/wp/wp-content/uploads/water_repellent.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'カントリーカラー「鳥居色」', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorcountrycolorshrine/', img: "/wp/wp-content/uploads/country_color_shrine.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
    ],
    category_lists: [
      {
        name: 'すべて',
        slug: 'all',
        src: './assets/img/icon_all.png',
        nameimg: 'すべて',
        done: true
      },

      {
        name: 'ウッドデッキにおすすめ',
        slug: 'wooddeck',
        src: '/wp/wp-content/uploads/icon_wooddeck.png',
        nameimg: '/wp/wp-content/uploads/name_wooddeck.png',
        done: false
      },
    ],
    preview3: 'all'
  },
  methods: {
    find_categories3: function(e){
      var posts = this.posts;
      <!-- var preview = this.preview3; -->
      var preview = e.target.value;
      var rep = $(e.target).parents("label").html().replace(/<input.+?> <span.+?><\/span>/,"");
      $('#listItem3 .disp-text span').html(rep);
      if(matchMedia("(max-width: 768px)").matches){
        <!-- $(this).parents('.inner').slideUp(); -->
      }

      if(preview.length > 0) {

postsicon = posts.map((obj) => obj.icon)
postsicon = postsicon.join(',');

        //無い時の判定 //
        if(postsicon.indexOf(preview) > -1 || preview == "all"){
          $('#listItem3 .nainai').hide()
        } else {
          $('#listItem3 .nainai').show()
          //console.log('nannmonainen')
        }


        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].icon;
          if(categories.indexOf(preview) >= 0 || preview == "all"){
            posts[i].display = true;
          } else {
            posts[i].display = false;
          }
        }


      } else {
        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].categories;
          posts[i].display = true;
        }
      }


    }
  }
});

let listItem4 = new Vue({
  el: '#listItem4',
  data: {
    posts:[
{ title: 'オスモウォッシュアンドケア―', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmowashandcare/', img: "/wp/wp-content/uploads/wash_and_care-1.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモワックスアンドクリーナー', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmowaxandcleaner/', img: "/wp/wp-content/uploads/wax_and_cleaner.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモモップ', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmomop/', img: "/wp/wp-content/uploads/osmo_mop_thumb.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモポリッシングパッド', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmopolishingpad/', img: "/wp/wp-content/uploads/polishingPad.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
    ],
    category_lists: [
      {
        name: 'すべて',
        slug: 'all',
        src: './assets/img/icon_all.png',
        nameimg: 'すべて',
        done: true
      },
    ],
    preview4: 'all'
  },
  methods: {
    find_categories4: function(e){
      var posts = this.posts;
      <!-- var preview = this.preview4; -->
      var preview = e.target.value;
      var rep = $(e.target).parents("label").html().replace(/<input.+?> <span.+?><\/span>/,"");
      $('#listItem4 .disp-text span').html(rep);
      if(matchMedia("(max-width: 768px)").matches){
        <!-- $(this).parents('.inner').slideUp(); -->
      }

      if(preview.length > 0) {

postsicon = posts.map((obj) => obj.icon)
postsicon = postsicon.join(',');

        //無い時の判定 //
        if(postsicon.indexOf(preview) > -1 || preview == "all"){
          $('#listItem4 .nainai').hide()
        } else {
          $('#listItem4 .nainai').show()
          //console.log('nannmonainen')
        }


        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].icon;
          if(categories.indexOf(preview) >= 0 || preview == "all"){
            posts[i].display = true;
          } else {
            posts[i].display = false;
          }
        }


      } else {
        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].categories;
          posts[i].display = true;
        }
      }


    }
  }
});

let listItem5 = new Vue({
  el: '#listItem5',
  data: {
    posts:[
{ title: 'オスモウッドリバイバージェル', sub: '【灰色化した木部を<br>削らずに木地に戻します】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmowoodrevivergel/', img: "/wp/wp-content/uploads/wood_reviver_gel-1.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモガーデンクリーナー', sub: '【藻が生えてきません】', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmogardencleaner/', img: "/wp/wp-content/uploads/garden_clnr.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
    ],
    category_lists: [
      {
        name: 'すべて',
        slug: 'all',
        src: './assets/img/icon_all.png',
        nameimg: 'すべて',
        done: true
      },
    ],
    preview5: 'all'
  },
  methods: {
    find_categories5: function(e){
      var posts = this.posts;
      <!-- var preview = this.preview5; -->
      var preview = e.target.value;
      var rep = $(e.target).parents("label").html().replace(/<input.+?> <span.+?><\/span>/,"");
      $('#listItem5 .disp-text span').html(rep);
      if(matchMedia("(max-width: 768px)").matches){
        <!-- $(this).parents('.inner').slideUp(); -->
      }

      if(preview.length > 0) {

postsicon = posts.map((obj) => obj.icon)
postsicon = postsicon.join(',');

        //無い時の判定 //
        if(postsicon.indexOf(preview) > -1 || preview == "all"){
          $('#listItem5 .nainai').hide()
        } else {
          $('#listItem5 .nainai').show()
          //console.log('nannmonainen')
        }


        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].icon;
          if(categories.indexOf(preview) >= 0 || preview == "all"){
            posts[i].display = true;
          } else {
            posts[i].display = false;
          }
        }


      } else {
        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].categories;
          posts[i].display = true;
        }
      }


    }
  }
});

let listItem6 = new Vue({
  el: '#listItem6',
  data: {
    posts:[
{ title: 'オスモブラシ', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmobrush/', img: "/wp/wp-content/uploads/brush.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモ筋違い刷毛', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmostrainbrush/', img: "/wp/wp-content/uploads/strain_brush.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモカラー専用刷毛洗浄液', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocolorstrainbrushcleaningsolution/', img: "/wp/wp-content/uploads/strain_brush_cleaning_solution.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモワイドブラシ', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmowidebrush/', img: "/wp/wp-content/uploads/wide_brush.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモコテバケ', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmotrowelbrush/', img: "/wp/wp-content/uploads/trowel_brush.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモコテバケスペア', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmotrowelbrushspare/', img: "/wp/wp-content/uploads/trowel_brush_spare.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモコテバケ用継ぎ柄（120ｃｍ）', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocementforbrush/', img: "/wp/wp-content/uploads/cement_for_brush.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
{ title: 'オスモパテ', sub: '', sub2: '', link: 'https://osmo-edel.jp/osmocolor_lineup/osmocement/', img: "/wp/wp-content/uploads/cement-1.jpg", icon: ['',], iconImg: ['',], iconName: '', display: true },
    ],
    category_lists: [
      {
        name: 'すべて',
        slug: 'all',
        src: './assets/img/icon_all.png',
        nameimg: 'すべて',
        done: true
      },
    ],
    preview6: 'all'
  },
  methods: {
    find_categories6: function(e){
      var posts = this.posts;
      <!-- var preview = this.preview6; -->
      var preview = e.target.value;
      var rep = $(e.target).parents("label").html().replace(/<input.+?> <span.+?><\/span>/,"");
      $('#listItem6 .disp-text span').html(rep);
      if(matchMedia("(max-width: 768px)").matches){
        <!-- $(this).parents('.inner').slideUp(); -->
      }

      if(preview.length > 0) {

postsicon = posts.map((obj) => obj.icon)
postsicon = postsicon.join(',');

        //無い時の判定 //
        if(postsicon.indexOf(preview) > -1 || preview == "all"){
          $('#listItem6 .nainai').hide()
        } else {
          $('#listItem6 .nainai').show()
          //console.log('nannmonainen')
        }


        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].icon;
          if(categories.indexOf(preview) >= 0 || preview == "all"){
            posts[i].display = true;
          } else {
            posts[i].display = false;
          }
        }


      } else {
        for (var i = 0; i < posts.length; i++) {
          var categories = posts[i].categories;
          posts[i].display = true;
        }
      }


    }
  }
});