上スワイプで詳細展開カード

<div class="d08-08-05-card">
          <div class="d08-08-05-top">
            <b>山の絶景ツアー</b>
            <span class="d08-08-05-hint">↑ スワイプ／クリックで詳細</span>
          </div>
          <div class="d08-08-05-detail">
            <p>朝焼けの稜線を歩く1日コース。集合は6:00、装備レンタルあり。定員8名。</p>
          </div>
        </div>

.d08-08-05-card{width:100%;max-width:260px;background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(30,30,60,.1);overflow:hidden}
        .d08-08-05-top{padding:18px;background:linear-gradient(135deg,#ff9a8b,#ff6a88);color:#fff;position:relative;cursor:grab;touch-action:none}
        .d08-08-05-top b{font-size:14.5px}
        .d08-08-05-hint{display:block;margin-top:6px;font-size:10.5px;opacity:.85}
        .d08-08-05-detail{max-height:0;overflow:hidden;transition:max-height .3s ease}
        .d08-08-05-card.is-open .d08-08-05-detail{max-height:120px}
        .d08-08-05-detail p{font-size:12px;color:#666;padding:14px 18px}

(function(){
        var root=document.querySelector('#item-08-08-05 .d08-08-05');
        var card=root&&root.querySelector('.d08-08-05-card');
        var top=card&&card.querySelector('.d08-08-05-top');
        if(!top)return;
        var startY=0,dragging=false;
        function getY(e){return e.touches&&e.touches.length?e.touches[0].clientY:e.clientY;}
        function onDown(e){
          dragging=true;startY=getY(e);
          document.addEventListener('mousemove',onMove);
          document.addEventListener('mouseup',onUp);
        }
        function onMove(e){
          if(!dragging)return;
          if(e.cancelable)e.preventDefault();
          var dy=getY(e)-startY;
          if(dy<-24)card.classList.add('is-open');
          else if(dy>24)card.classList.remove('is-open');
        }
        function onUp(){
          if(!dragging)return;
          dragging=false;
          document.removeEventListener('mousemove',onMove);
          document.removeEventListener('mouseup',onUp);
        }
        top.addEventListener('mousedown',onDown);
        top.addEventListener('touchstart',onDown,{passive:true});
        top.addEventListener('touchmove',onMove,{passive:false});
        top.addEventListener('touchend',onUp);
        top.addEventListener('click',function(){card.classList.toggle('is-open');});
      })();