フィルターギャラリー

<div class="d07-01-06-inner">
          <div class="d07-01-06-btns">
            <button class="d07-01-06-btn is-active" data-cat="all" type="button">すべて</button>
            <button class="d07-01-06-btn" data-cat="sea" type="button">海</button>
            <button class="d07-01-06-btn" data-cat="mt" type="button">山</button>
          </div>
          <div class="d07-01-06-tiles">
            <div class="d07-01-06-tile" data-cat="sea"><span>🌊</span></div>
            <div class="d07-01-06-tile" data-cat="mt"><span>⛰️</span></div>
            <div class="d07-01-06-tile" data-cat="sea"><span>🐚</span></div>
            <div class="d07-01-06-tile" data-cat="mt"><span>🌲</span></div>
            <div class="d07-01-06-tile" data-cat="sea"><span>⛵</span></div>
            <div class="d07-01-06-tile" data-cat="mt"><span>🏕️</span></div>
          </div>
        </div>

.d07-01-06-inner{display:flex;flex-direction:column;gap:12px;align-items:center}
        .d07-01-06-btns{display:flex;gap:8px}
        .d07-01-06-btn{border:1px solid #cbd5e1;background:#fff;color:#475569;font-size:12px;padding:5px 14px;border-radius:999px;cursor:pointer;transition:all .25s ease}
        .d07-01-06-btn.is-active{background:#0f172a;border-color:#0f172a;color:#fff}
        .d07-01-06-tiles{display:grid;grid-template-columns:repeat(3,66px);gap:8px}
        .d07-01-06-tile{height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease,transform .35s ease}
        .d07-01-06-tile span{font-size:24px}
        .d07-01-06-tile[data-cat="sea"]{background:linear-gradient(135deg,#22d3ee,#2563eb)}
        .d07-01-06-tile[data-cat="mt"]{background:linear-gradient(135deg,#65a30d,#15803d)}
        .d07-01-06-tile.is-hide{opacity:0;transform:scale(.7);pointer-events:none;position:absolute;visibility:hidden}
        .d07-01-06-tile.is-pop{animation:d056pop .4s ease}
        @keyframes d056pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

(function(){
        var root=document.querySelector('#item-07-01-06 .d07-01-06-inner');if(!root)return;
        var btns=root.querySelectorAll('.d07-01-06-btn');
        var tiles=root.querySelectorAll('.d07-01-06-tile');
        btns.forEach(function(btn){
          btn.addEventListener('click',function(){
            btns.forEach(function(b){b.classList.remove('is-active');});
            btn.classList.add('is-active');
            var cat=btn.getAttribute('data-cat');
            tiles.forEach(function(t){
              var show=(cat==='all'||t.getAttribute('data-cat')===cat);
              t.classList.toggle('is-hide',!show);
              t.classList.remove('is-pop');
              if(show){void t.offsetWidth;t.classList.add('is-pop');}
            });
          });
        });
      })();