ripple effect

クリックエフェクト

詳しい導入事例は導入方法を参照してください。

クリックしたボタンに波紋のエフェクトをかける。

  • DEMO
  • 色指定

使い方

エフェクトをかける対象に[data-ripple]の属性を追加。
波紋の色は[data-ripple]属性が空の場合は半透明の白、カラーコードを入れることで色の指定可能。

他のクリックイベントと競合して遅れて表示される場合あり。
  • HTML
  • CSS
  • Script
.ripple {
  position: absolute;
  top:0; left:0; bottom:0; right:0;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: inherit;
  pointer-events: none;
}
.rippleWave {
  backface-visibility: hidden;
  position: absolute;
  border-radius: var(--radius-circle);
  transform: scale(.7);
  background: rgb(255 255 255 / .5);
  opacity: .45;
  animation: ripple 1s forwards;
}
@keyframes ripple {
  to {transform: scale(24); opacity:0;}
}

-----------------------

// tableFit
//==============================
function mod_tableFit(){
  $('.mod_tableFit-tb').each(function(){
    if($(this).is(':hidden')){return true;}

    let $td = $('.mod_tableFit-td',this);
    $td.removeAttr('style');

    let leng = $('.mod_tableFit-tr:first-child',this).children('.mod_tableFit-td').length;
    for(let i = 0; i < leng+1; i++){
      let wList = new Array();
      $(this).find('.mod_tableFit-td:nth-child('+i+')').each(function(is){
        wList[is] =  $(this).width()+1;
      });
      let maxW = Math.max.apply(null, wList);
      $(this).find('.mod_tableFit-td:nth-child('+i+')').css({'width':maxW+'px'});
    }
  
    let tw = $(this).parent().width();
    let sw = $('.mod_tableFit-tr',this).get(0).scrollWidth;
    if(tw < sw){
      let wLists = new Array();
      $td.each(function(i){
        wLists[i] = $(this).width();
      });
      let maxW = Math.max.apply(null, wLists);
      let ss = sw-tw;
      $td.css({"max-width":maxW - ss+"px"});
    }
  });
}
$win.load(function(){
  mod_tableFit();
});
/* ed tableFit ===============*/


// js
// ---------------------------------------------------------------

// accordion
//==============================
$('.mod_acc').each(function(){
  $(this).children('.mod_acc-head').append('<button class="mod_acc-btn"><i class="ico-mui"></i></button>');
  if($(this).hasClass('open')){$(this).children('.mod_acc-body').show();}
});
$bd.on('click','.mod_acc-head',function(){
  let $papa = $(this).closest('.mod_acc');
  let $accBody = $papa.children('.mod_acc-body');

  $papa.toggleClass('open');
  if($accBody.is(':hidden')){
    $accBody.slideDown('normal');
  } else {
    $accBody.slideUp('normal');
  }
});
/* ed accordion ===============*/


// slider
//==============================
var frag_slider = false;
var frag_scroll = false;
var frag_resize = false;

function sliderSet(){
  let $slider = $('.mod_slider');
  $slider.each(function(){
    let w = $win.width();
    let $li = $(this).children('li');
    let i = $li.size();
    $li.addClass('slider-li');
    if(($li.width() + 8) * i > $(this).parent().width() && w > 769 && !$(this).hasClass('set')){
      let obj = '<div class="slider-nav"><button class="slider-nav-btn prev"><i class="ico-mui"></i></button><button class="slider-nav-btn next"><i class="ico-mui"></i></button></div>';
      if($(this).data('scrollber') === 'set'){
        obj = '<div class="slider-nav"><button class="slider-nav-btn prev"><i class="ico-mui"></i></button><div class="slider-scrollbar"><div class="slider-scrollbar-btn"></div></div><button class="slider-nav-btn next"><i class="ico-mui"></i></button></div>';
      }
      $(this).addClass('set').wrap('<div class="mod_slider-wrap"></div>').parent('.mod_slider-wrap').append(obj).find('.slider-scrollbar-btn').width(100 / i + '%');
    }
  });
}

// 戻る
$bd.on({
  'mousedown': function(){
    let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
    frag_slider=setInterval(function(){
      $slider.scrollLeft($slider.scrollLeft() - 12);
    },1);
  },
  'mouseup': function(){
    let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
    $slider.animate({
      scrollLeft: $slider.scrollLeft() - 24
    },200, 'swing');
    clearInterval(frag_slider);
  }
}, '.slider-nav-btn.prev');

// 進む
$bd.on({
  'mousedown': function(){
    let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
    frag_slider=setInterval(function(){
      $slider.scrollLeft($slider.scrollLeft() + 12);
    },1);
  },
  'mouseup': function(){
    let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
    $slider.animate({
      scrollLeft: $slider.scrollLeft() + 24
    },200, 'swing');
    clearInterval(frag_slider);
  }
}, '.slider-nav-btn.next');

// スクロール同期
$('.mod_slider').scroll(function(){
  let $slideWrap = $(this).parents('.mod_slider-wrap');
  let $slide = $slideWrap.find('.mod_slider');
  let $barBtn = $slideWrap.find('.slider-scrollbar-btn');
  let disp_width = $slide.width();

  // スクロールバー移動可能量(スライダー表示幅 - スライダー幅) / スクロール可能量(スライダー全幅 - スライダー表示幅)
  let offset = $(this).scrollLeft() * (disp_width - $barBtn.width()) / ($slide.get(0).scrollWidth - disp_width);
  $barBtn.css('transform', 'translateX(' + offset + 'px)');
});

// スクロールバードラッグ
$bd.on({
  'mousedown': function(e){
    tar = $(this);
    frag_scroll = true;
    scrollbar_x = (e.pageX - tar.offset().left) * 4;
    tar.parents('.mod_slider-wrap').addClass('moveing');
  }
}, '.slider-scrollbar-btn');
$bd.on('mousemove', function(e){
  if(!frag_scroll) return;

  let $slideWrap = tar.parents('.mod_slider-wrap');
  let $slide = $slideWrap.find('.mod_slider');
  let $bar = tar.parents('.slider-scrollbar');
  let bar_left = $bar.offset().left;
  let disp_width = $slide.width();

  let scrollbar_track = disp_width - tar.width(); // スクロールバー移動可能量
  let scroll_move = ((e.pageX - bar_left) * 4 / scrollbar_track * scrollbar_track) - scrollbar_x;

  if (scroll_move < 0) {scroll_move = 0;}
  else if (scroll_move > scrollbar_track * 2) {return;}

  tar.css('transform', 'translateX(' + scroll_move + 'px)');
  $slide.scrollLeft(((tar.offset().left - bar_left) / scrollbar_track * ($slide.get(0).scrollWidth - disp_width)));
});
$bd.on('mouseup', function(){
  frag_scroll = false;
  $('.mod_slider-wrap').removeClass('moveing');
});

// リストドラッグ
$.prototype.mousedragscrollable = function(){
  let target;
  $(this).each(function(i, e){
    $(e).mousedown(function (event) {
      event.preventDefault();
      target = $(e);
      $(e).data({
        down: true,
        move: false,
        x: event.clientX,
        y: event.clientY,
        scrollleft: $(e).scrollLeft(),
        scrolltop: $(e).scrollTop(),
      });
      return false;
    });
    $(e).click(function(event){
      if($(e).data('move')){return false;}
    });
  });
  $(document)
  .mousemove(function(event){
    if($(target).data('down')){
      event.preventDefault();
      let move_x = $(target).data('x') - event.clientX;
      let move_y = $(target).data('y') - event.clientY;
      if(move_x !== 0 || move_y !== 0){
        $(target).data('move', true);
      } else {
        return;
      }
      $(target).scrollLeft($(target).data('scrollleft') + move_x);
      $(target).scrollTop($(target).data('scrolltop') + move_y);
      return false;
    }
  })
  .mouseup(function(){
    $(target).data('down', false);
    return false;
  });
};
$('.mod_slider[data-drag]').mousedragscrollable();

$win.load(function(){
  sliderSet();
});

$win.on('orientationchange , resize', function(){
  if (frag_resize !== false) {clearTimeout(frag_resize);}
  frag_resize = setTimeout(function(){
    sliderSet();
  }, 300);
});
/* ed slider ===============*/


// confirm
//==============================
$bd.on('click', '[data-confirm]', function(e){
  if(!confirm($(this).data('confirm'))){
    e.stopImmediatePropagation();
    return false;
  }
});
/* ed confirm ===============*/


// copy
//==============================
$bd.on('click','.mod_copy',function(){
  if($('#mod_copy-alert')[0]){$('#mod_copy-alert').remove();}

  let $copyarea = $('<textarea></textarea>');
  let copyTxt = $(this).data('copy');
  if(copyTxt == undefined){copyTxt = $(this).text();}
  let $copyalert = $('<div id="mod_copy-alert"><p class="mod_copy-alert-txt"><span class="mod_copy-alert-tar">[ '+copyTxt+' ]</span>クリップボードにコピーしました</p></div>');

  $copyarea.text(copyTxt);
  $bd.append($copyarea).append($copyalert);
  $copyarea.select();
  document.execCommand('copy');
  $copyarea.remove();

  $copyalert.fadeIn();
  setTimeout(function(){
    $copyalert.fadeOut().queue(function(){
      this.remove();
    });
  },1000);
});
/* ed copy ===============*/


// drawer
//==============================
$bd.on('click','.mod_drawer-btn',function(){
  let $posi = $(this).data('drawer_position');
  let $type = $(this).data('drawer_type');
  let $size = $(this).data('drawer_size');
  let slide = '';
  let overlay = '';
  if($type == 'temporary'){
    slide = '<div class="mod_drawer-slider-bar"><div class="mod_drawer-slider-bar-btn"></div></div>';
    overlay = '<div class="overlay drawer"></div>';
  }

  if($size.match('xs|xm|xl')){
    $bd.append('<section id="mod_drawer" class="'+$posi+' '+$type+' '+$size+'" style="display:none;" data-position="'+$posi+'" data-type="'+$type+'" data-size="'+$size+'">\
    <div class="mod_drawer-sec">\
      '+slide+'\
      <button class="mod_drawer-close center ico-mui">keyboard_double_arrow_up</button>\
      <div class="mod_drawer-set"></div>\
    </div>\
    '+overlay+'\
  </section>');
  } else {
    let size = '';
    if($posi == 'top' || $posi == 'bottom'){size = 'width:100%; height:'+$size+';'}
    else if($posi == 'left' || $posi == 'right'){size = 'width:'+$size+'; height:100%; top: 0;'}

    $bd.append('<section id="mod_drawer" class="'+$posi+'" style="display:none;" data-position="'+$posi+'" data-type="'+$type+'" data-size="'+$size+'">\
    <div class="mod_drawer-sec" style="'+size+'">\
      <div class="mod_drawer-slider-bar"><div class="mod_drawer-slider-bar-btn"></div></div>\
      <button class="mod_drawer-close center ico-mui">keyboard_double_arrow_up</button>\
      <div class="mod_drawer-set"></div>\
    </div>\
    <div class="overlay drawer"></div>\
  </section>');
  }
  $rt.toggleClass('drawerDisp');
  $('.overlay').fadeIn(200);

  //スライドバー
  $('.mod_drawer-set').scroll(function(){
    let $wrap = $(this).parents('#mod_drawer');
    let $slide = $(this);
    let $barBtn = $wrap.find('.mod_drawer-slider-bar-btn');
    let disp_height = $slide.height();
  
    // スクロールバー移動可能量(スライダー表示幅 - スライダー幅) / スクロール可能量(スライダー全幅 - スライダー表示幅)
    let offset = $(this).scrollTop() * (disp_height - $barBtn.height()) / ($slide.get(0).scrollHeight - disp_height);
    $barBtn.css('transform', 'translateY(' + offset + 'px)');
  });
});
function drawerOpen(obj){
  let $drawer = $('#mod_drawer');
  let $sec = $('.mod_drawer-sec');
  let posi = $drawer.data('position');
  let trans = 'transX';
  if(posi == 'top' || posi == 'bottom'){trans = 'transY';}

  $('.mod_drawer-set').append(obj);
  $drawer.fadeIn(250);
  $sec.addClass(trans);
  if($('.mod_drawer-set').children().height() > $sec.height()){
    $('.mod_drawer-slider-bar').show();
  }

  if($drawer.data('type') == 'persistent'){
    let ws = $win.scrollTop();
    $rt.addClass('drawer').css('transition','.25s');

    let scale = $sec.height();
    if(posi == 'top'){
      $rt.css({
        'height':'calc(100vh - '+scale+'px)',
        'margin-top':scale
      })
      if(ws>scale){
        $rt.css('transition','0s').scrollTop(ws+scale);
      } else {
        $rt.scrollTop(ws);
      }
    } else if(posi == 'bottom'){
      $rt.css('height','calc(100vh - '+scale+'px)').scrollTop(ws);
    } else if(posi == 'left'){
      $rt.css('padding-left',$sec.width()).scrollTop(ws);
    } else if(posi == 'right'){
      $rt.css('width','calc(100% - '+$sec.width()+'px)').scrollTop(ws);
    }
  } else {
    noscroll();
  }
}
function drawerClose(){
  $('.mod_drawer-sec').removeClass('transY transX');
  $('.overlay').fadeOut(250);
  let close = function(){
    $('#mod_drawer').remove();
    $rt.removeClass('drawer');
  }

  if(!$('.noscroll')[0]){
    let rs = $rt.scrollTop();
    $rt.removeAttr('style').toggleClass('drawerDisp');
    setTimeout(function(){
      close();
      $('body,html').scrollTop(rs);
    },300);
  } else {
    setTimeout(function(){
      noscroll();
      close();
    },300);
  }
}
$bd.on('click','.overlay.drawer ,.mod_drawer-close',function(){drawerClose();});
/* ed drawer ===============*/


// dropdown
//==============================
$('.mod_drop').each(function(){
  $('li',this).addClass('mod_drop-li').attr('data-ripple','rgb(0 0 0 / .1)');
  $(this).wrap('<div class="mod_dropOuter">');
});
$bd.on('click','[data-drop]',function(){
  if($('.dropDisp')[0]){
    dropClose();
    return false;
  }

  noscroll();
  $rt.addClass('dropDisp');

  let t = $(this);
  let td = t.data('drop');
  let $tar = $('.mod_drop[data-drop='+td+']');
  let $par = $tar.parent();

  //下部・右部 空きスペース確認
  let dropHeight = $par.innerHeight();
  let winHeight = $win.height();
  let offsetTop = t.offset().top;
  let scroll = $win.scrollTop();
  let ot = '';
  if(winHeight < offsetTop-scroll+dropHeight+t.innerHeight()){
    ot = offsetTop - dropHeight - 8;
  } else {
    ot = offsetTop + t.innerHeight();
  }
  
  let dropWidth = $par.width();
  let winWidth = $win.width();
  let offsetLeft = t.offset().left;
  let leftPosi = offsetLeft+dropWidth;
  let ol = '';
  if(winWidth < leftPosi){
    ol = offsetLeft - (leftPosi - winWidth + 16);
  } else {
    ol = offsetLeft;
  }

  $par.css({
    'top':ot,
    'left':ol,
  }).fadeIn(130);
  $tar.css('transform','scale(1)');
});
$bd.on('click','.mod_drop-li',function(){
  let href = $(this).attr('href');
  if(href != undefined){
    if($(this).attr('target') == '_blank'){
      window.open(href, '_blank')
    } else {
      window.location.href = href;
    }
  }
  dropClose();
});
function dropClose(){
  if($('.dropDisp')[0]){
    $('.mod_dropOuter').fadeOut(130);
    $('.mod_drop').removeAttr('style');
    noscroll();
    $rt.removeClass('dropDisp');
  }
}
$bd.on('click','.dropDisp',function(){dropClose();});
/* ed dropdown ===============*/


// imgGzoom
//==============================
//初期設定
$('.mod_imgGzoom img').each(function(){
  $(this).addClass('mod_imgGzoom-img');
  let wrapOBJ = '<span class="mod_imgGzoom-wrap ico-aft"></span>';
  if($(this).siblings('img')[0] || $(this).parents('.mod_imgGzoom').find('img').length > 1){
    //複数画像
    wrapOBJ = '<span class="mod_imgGzoom-wrap list ico-aft"></span>';
  }
  if(!$(this).parents('.mod_imgGzoom-wrap')[0]){
    $(this).wrap(wrapOBJ);
  }
});

//ズームアクション
$bd.on('click','.mod_imgGzoom-wrap',function(){
  let $Mod = $(this).parents('.mod_imgGzoom');
  let imgleng = $Mod.find('.mod_imgGzoom-wrap').length;
  let $i = $Mod.find('.mod_imgGzoom-wrap').index($(this));
  let $img = $(this).find('.mod_imgGzoom-img');

  let src = $img.attr('src');
  if($img.data('suffix') != ''){
    let suffix = 'zoom';
    if($img.data('suffix') != undefined){
      suffix = $img.data('suffix');
    }
    src = src.replace('.','_'+suffix +'.');
  }
  let obj = '<div class="mod_imgGzooms"><figure class="mod_imgGzooms-imgset-fig"><img class="mod_imgGzooms-imgset-img" src="' + src + '" alt=""></figure></div>';

  if($(this).hasClass('list')){
    //複数画像
    obj = '<div class="mod_imgGzooms"><ul class="mod_imgGzooms-imgset"></ul><div class="mod_imgGzooms-pager"><ul class="mod_imgGzooms-pager-dot"></ul><button class="mod_imgGzooms-pager-btn prev"><i class="ico-mui"></i></button><button class="mod_imgGzooms-pager-btn next"><i class="ico-mui"></i></button></div></div>';
    modalOpen(obj,'swip-zoom','zoom','','hug');
    
    //画像・ドット作成
    for(var i = 0; i < imgleng; i++) {
      let t = $Mod.find('.mod_imgGzoom-img').eq(i);
      let src = t.attr('src');
      if(t.data('suffix') != ''){
        let suffix = 'zoom';
        if(t.data('suffix') != undefined){
          suffix = t.data('suffix');
        }
        src = src.replace('.','_'+suffix +'.');
      }
      $('.mod_imgGzooms-imgset').append('<li class="mod_imgGzooms-imgset-li"><figure class="mod_imgGzooms-imgset-fig"><img class="mod_imgGzooms-imgset-img" src="' + src + '" alt=""></figure></li>');
      $('.mod_imgGzooms-pager-dot').append('<li class="mod_imgGzooms-pager-dot-li"><button class="mod_imgGzooms-pager-dot-btn"></button></li>');
    }

    $('.mod_imgGzooms-imgset-li').css('transform',translateX($i));
    $('.mod_imgGzooms-pager-dot-li').eq($i).addClass('act');
  } else {
    //単体画像
    modalOpen(obj,'swip','zoom','','fill');
  }
});

//ページングアクション
$bd.on('click','.mod_imgGzooms-pager-btn',function(){
  let $li = $('.mod_imgGzooms-imgset-li');
  let $dot = $('.mod_imgGzooms-pager-dot-li');
  let full = $dot.length;
  let now = $('.mod_imgGzooms-pager-dot-li.act').index() + 1;

  $('.mod_imgGzooms-pager-dot-li.act').removeClass('act');

  if($(this).hasClass('next')){
    //次へ
    if(full == now){
      //最後なら
      $dot.eq(0).addClass('act');
      $li.css('transform','translateX(0)');
    } else {
      $dot.eq(now).addClass('act');
      $li.css('transform',translateX(now));
    }
  } else if($(this).hasClass('prev')){
    //前へ
    if(now == 1){
      //最初なら
      $dot.last().addClass('act');
      $li.css('transform',translateX(full - 1));
    } else {
      let Num = Number(now - 2);
      $dot.eq(Num).addClass('act');
      $li.css('transform',translateX(Num));
    }
  }
});

//ドットアクション
$bd.on('click','.mod_imgGzooms-pager-dot-btn',function(){
  let $papa = $(this).parent();
  let $i = $papa.index();

  $('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
  $papa.addClass('act');
  $('.mod_imgGzooms-imgset-li').css('transform',translateX($i));
});

//移動量計算
function translateX(num){
  return 'translateX(calc(-' + num + '00% - ' + 24 * num + 'px))';
}

//スワイプ
$bd.on({
  'touchstart': function(e){
    this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
    this.touchedTree = true;
    this.touched = false;
  },
  'touchmove': function(e){
    if(!this.touchedTree){return;}
    this.pageXm = (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.pageYm = (isTouch ? event.changedTouches[0].pageY : e.pageY);

    if(this.pageXm != 0){
      var act = $('.mod_imgGzooms-pager-dot-li.act').index();

      //最初もしくは最後のアイテムの場合は動かさない
      if(this.pageXm - this.pageX > 0 && act === 0 || this.pageXm - this.pageX < 0 && act + 1 == $('.mod_imgGzooms-pager-dot-li').length){
        this.touchedTree = false;
        return;
      }

      //移動量計算
      if(act === 0){var X = 0;} else {var X = -(act * 100);}
      let Y = this.pageXm - this.pageX;
      let yc = Y + X;
      if(Y > 100 || Y < -108 - (act * 8)){
        return;
      } else {
        $('.mod_imgGzooms-imgset-li').css({
          'transform':'translateX(' + yc + '%)',
          'transition':'none'
        });
      }
      nowTouch = true;
    }
  },
  'touchend': function(e){
    if(!this.touchedTree){return;}
    this.touchedTree = false;
    this.left = this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.top = this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY);
    let act = $('.mod_imgGzooms-pager-dot-li.act').index();
    if(this.top == 0 && this.left == 0){
      return;
    } else if(this.left > 30){
      let Xm = act + 1;
      if(act == 0){Xm = 1;}
      $('.mod_imgGzooms-imgset-li').css('transform',translateX(Xm));
      $('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
      $('.mod_imgGzooms-pager-dot-li').eq(act + 1).addClass('act');
      nowTouch = false;
    } else if(this.left < -30){
      let Xm = act - 1;
      if(act == 0){Xm = 100;}
      $('.mod_imgGzooms-imgset-li').css('transform',translateX(Xm));
      $('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
      $('.mod_imgGzooms-pager-dot-li').eq(act - 1).addClass('act');
      nowTouch = false;
    } else {
      let tX = '-' + act + '00%';
      if(act == 0){tX = 0;}
      $('.mod_imgGzooms-imgset-li').css({'transform':translateX(tX)});
    }
    $('.mod_imgGzooms-imgset-li').css({'transition':'0.2s'});
  }
}, '.mod_modal-sec.swip-zoom');
/* ed imgGzoom ===============*/


// imgZoom
//==============================
//初期設定
$('.mod_imgZoom').each(function(){
  $(this).wrap('<span class="mod_imgZoom-wrap ico-aft"></span>');
});

$bd.on('click','.mod_imgZoom-wrap',function(){
  let $img = $('.mod_imgZoom',this);

  //閉じる
  if($('.zooming')[0]){
    zoomClose();
    return false;
  }

  //計算
  let w = $img.width();
  let h = $img.height();
  let ww = $win.width();
  let wh = $win.height();
  let sw = (ww - 80) / w;
  let sh = (wh - 80) / h;
  let scale = sw;
  if(h*sw > wh){scale = sh;}

  let ol = $(this).offset().left;
  let ml = (ww-(w*scale))/2;
  let translateX = (ol/scale)-(ml/scale);

  let ot = $(this).offset().top;
  let mt = (wh-(h*scale))/2;
  let translateY = (ot/scale)-(mt/scale)-($win.scrollTop()/scale);

  //下処理
  $img.width(w).height(h);
  if($img.data('suffix') != ''){
    let suffix = 'zoom';
    if($img.data('suffix') != undefined){
      suffix = $img.data('suffix');
    }
    $img.attr('src',$img.attr('src').replace('.','_'+suffix +'.'));
  }
  $bd.append('<div class="overlay zoom"></div>');
  noscroll();
  $('.overlay').fadeIn(200);
  $(this).css({
    'width':w,
    'height':h
  }).addClass('zooming');

  //拡大
  $img.css('transform','scale('+scale+') translate('+-(translateX)+'px, '+-(translateY)+'px)');


});
$bd.on('click','.overlay.zoom',function(){zoomClose();});
function zoomClose(){
  $('.overlay').remove();
  noscroll();
  let $img = $('.zooming').children();
  if($img.data('suffix') != ''){
    let suffix = 'zoom';
    if($img.data('suffix') != undefined){
      suffix = $img.data('suffix');
    }
    $img.attr('src',$img.attr('src').replace('_'+suffix +'.','.'))
  }
  $img.removeAttr('style').css('z-index','1001');
  $('.zooming').removeAttr('style').removeClass('zooming');
  setTimeout(function(){
    $img.removeAttr('style');
  },200);
}
/* ed imgZoom ===============*/


// modal
//==============================
var modal_frag = false;
//モーダル設置
function modalOpen(obj,swip,cl,act,size){
  $bd.append('<div id="mod_modal"><section class="mod_modal-sec"><ul class="mod_modal-action"><li class="mod_modal-action-li"><button class="mod_modal-action-btn close"><i class="ico-mui"></i></button></li></ul><div class="mod_modal-body"></div></section><div class="mod_modal-bg"></div></div>');
  $('.mod_modal-body').append(obj);
  let $mod_modal = $('#mod_modal');
  let $mod_modalSec = $('.mod_modal-sec');
  let $mod_modalBody = $('.mod_modal-body');

  //スワイプタイプ追加
  if(swip !== ''){$mod_modalSec.addClass(swip);}

  //bodyにclass追加
  if(cl !== ''){
    $bd.addClass(cl);
    $rt.data('dellClass', cl);
  }

  //アクションボタン追加
  if(act !== ''){
    for(var i = 0; i < act.length; i++) {
      $('.mod_modal-action').prepend('<li class="mod_modal-action-li"><button class="mod_modal-action-btn ' + act[i] + '"><i class="ico-mui"></i></button></li>');
    }
  }

  //サイズ設定
  if(size === 'fill' || size === 'hug'){
    $mod_modal.addClass(size);
  } else if($.isNumeric(size)){
    $mod_modalSec.width(size);
  }

  //実行・表示
  if(modal_frag != true){noscroll();}
  $mod_modal.fadeIn(200).css('display','flex');

  //スクロールバー追加
  let secHeight = $mod_modalSec.height()
  let objHeight = $mod_modalBody.children().height();
  if(objHeight  > secHeight){
    $mod_modal.addClass('scrl');
    if($win.width() > 769){
      let scrollerHeight = parseInt(secHeight * secHeight / objHeight);
      
      $mod_modal.addClass('scrl');
      $mod_modalBody.wrap('<div class="mod_modal-scroller"></div>');
      $mod_modalSec.append('<div class="mod_modal-scrollbar"><div class="mod_modal-scrollbar-btn"></div></div>');
      $('.mod_modal-scrollbar-btn').height(scrollerHeight + 'px');

      let scrollerTrack = secHeight - scrollerHeight;
      $('.mod_modal-scroller').on('scroll', function(){
        let offset = $(this).scrollTop() * scrollerTrack / (objHeight - secHeight);
        $('.mod_modal-scrollbar-btn').css('transform','translateY(' + offset + 'px)');
      });
    }
  };
}

//クローズトリガー
$bd.on('click','.mod_modal-action-btn.close , .mod_modal-bg',function(){modalClose();});

//クローズアクション
function modalClose(){
  $('#mod_modal').fadeOut();
  if(modal_frag != true){noscroll();}
  modal_frag = true;

  setTimeout(function(){
    $('#mod_modal').remove();
    if($rt.data('dellClass') !== ''){
      $bd.removeClass($rt.data('dellClass'));
    }
  modal_frag = false;
  },600);
}

//スワイプ 縦横
var isTouch = ('ontouchstart' in window);
$bd.on({
  'touchstart': function(e){
    if($('#mod_modal.scrl')[0]){return;}
    this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
    this.touched = true;
  },
  'touchmove': function(e){
    if(!this.touched){return;}
    this.pageXm = (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.pageYm = (isTouch ? event.changedTouches[0].pageY : e.pageY);
    if(this.pageYm != 0){
      var yc = this.pageYm - this.pageY + 1;
      var yco = yc / 160;
      var ycod = Math.sqrt(Math.pow(yco,2));
      var opc = 1 - ycod;
      $('.mod_modal-sec').css({
        'transform':'translateY(' + yc + 'px)',
        'opacity':opc,
        'transition':'none'
      });
      nowTouch = true;
    }
  },
  'touchend': function(e){
    if(!this.touched){return;}
    this.touched = false;
    this.left = this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.top = this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY);

    if(this.top == 0 && this.left == 0){
      modalClose();
      return false;
    } else if(this.top > 60){
      $('.mod_modal-sec').css('transform','translateY(-150%)');
      modalClose();
      nowTouch = false;
    } else if(this.top < -60){
      $('.mod_modal-sec').css('transform','translateY(150%)');
      modalClose();
      nowTouch = false;
    } else {
      $('.mod_modal-sec').css({
        'transform':'translateY(0)',
        'opacity':'1',
        'transition':'0.1s'
      });
    }
  }
}, '.mod_modal-sec.swip');

/* ed modal ===============*/


// sortAsc
//==============================
function sorts(tar,order){
  if(!$('mod_sortAsc-li')[0]){
    $('.mod_sortAsc').each(function(){
      $(this).children().addClass('mod_sortAsc-li');
    });
  }
  let $sortLi = $(tar).children('.mod_sortAsc-li');
  let Adata = '';
  let Bdata = '';

  $(tar).html(
    $sortLi.sort(function(a,b){
      if($sortLi.data('sort') === undefined || $sortLi.data('sort') === ''){
        //data属性なし
        Adata = $(a).text();
        Bdata = $(b).text();
      } else {
        //data属性あり
        Adata = $(a).data('sort');
        Bdata = $(b).data('sort');
      }

      if($.isNumeric(Adata)){ //数字
        if(order === 'big'){
          return Number(Bdata) - Number(Adata); //大きい順
        } else if(order === 'small'){
          return Number(Adata) - Number(Bdata); //小さい順
        }
      } else { //文字列
        if(order === 'big'){
          if(Adata < Bdata){return 1;} //逆順
        } else if(order === 'small'){
          if(Adata > Bdata){return 1;} //正順
        }
      }
    })
  );
}
/* ed sortAsc ===============*/


// sortManual
//==============================
$('.mod_sortManual').each(function(){
  $('li',this).addClass('mod_sortManual-li').append('<i class="mod_sortManual-handle ico-mui"></i>');
});

if($('.mod_sortManual')[0]){
  $('.mod_sortManual').sortable({
    tolerance: 'intersect', //入れ替わる重なり具合
    containment: '.mod_sortManual', //ドラッグ可能範囲
    axis: 'y', //移動方向
    items: '.mod_sortManual-li', //並び替え機能対象
    handle: '.mod_sortManual-handle', //ドラッグ開始ハンドル
    opacity: '0.8', //ドラッグ要素の透過
    revert: '300', //アニメーション
    stop: function(event, ui){
      //移動後の処理
    }
  });
}
/* ed sortManual ===============*/


// sortRandom
//==============================
function mod_sortRandom(tars,ele){
  let Arr = [];
  let set1 = '';
  let set2 = '';
  let tar = $(tars);
  let Num = tar.find(ele).length;
  tar.find(ele).each(function(){
    Arr.push($(this).html());
  });
  Arr.sort(function(){
    return Math.random() - Math.random();
  });
  tar.empty();
  if(ele.match(/\./)){
    let cn = ele.split('.');
    set1 = cn[0] + ' class="' + cn[1] + '"';
    set2 = cn[0];
  } else {
    set1 = ele;
    set2 = ele;
  }
  for(var i = 0; i < Num; i++){
    tar.append('<'+set1+'>' + Arr[i] + '</'+set2+'>');
  }
}

/* ed sortRandom ===============*/


// tabDef
//==============================
//初期設定
$('.mod_tab').each(function(){
  //関連付け
  let name = $(this).data('name');
  let search = $(this).data('search');
  let $btn_papa = $(this).children('.mod_tab-list');
  let $btn = $btn_papa.children('.mod_tab-btn');
  let $itm_papa = $(this).children('.mod_tab-sec');
  let $itm = $itm_papa.children('.mod_tab-item');

  $btn.each(function(i){
    $(this).data('name',name);
  });
  if(search == 'index'){
    //index
    $btn.each(function(i){
      $(this).data('tar',i);
    });
    $itm.each(function(i){
      $(this).addClass('tar_'+i);
    });
  } else if(search == 'id'){
    //id
    $itm.each(function(){
      $(this).addClass('tar_'+$(this).attr('id'));
    });
  } else if(search == 'name'){
    //name
    $itm.each(function(){
      $(this).addClass('tar_'+$(this).attr('name'));
    });
  }

  //初期表示
  if($btn_papa.children('.mod_tab-btn.act')[0]){
    let i = $btn_papa.children('.mod_tab-btn.act').index();
    $itm.eq(i).addClass('act');
  } else {
    let $t = $btn.eq(0);
    $t.addClass('act');
    $itm_papa.children('.tar_'+$t.data('tar')).addClass('act');
  }
});

$('.mod_tab-btn').click(function(){
  if($(this).hasClass('act')){return false;}

  let name = $(this).data('name');
  let tar = $(this).data('tar');
  let $mod = $('.mod_tab[data-name='+name+']');
  let $sec = $mod.children('.mod_tab-sec');

  //ボタン切替
  $(this).addClass('act').siblings().removeClass('act');

  //表示切替
  $sec.children('.mod_tab-item').fadeOut().removeClass('act');
  $sec.children('.mod_tab-item.tar_'+tar).hide().addClass('act').fadeIn();
});
/* ed tabDef ===============*/


// tabAnime
//==============================
var isTouch = ('ontouchstart' in window);
$('.mod_tabAnime').each(function(){
  let $list = $('.mod_tabAnime-list',this);
  let $btn = $list.children();
  let $sec = $('.mod_tabAnime-sec',this);
  let $itm = $sec.children();

  $btn.addClass('mod_tabAnime-btn').wrapInner('<div class="mod_tabAnime-btn-in"></div>');
  $itm.addClass('mod_tabAnime-item');
  $sec.show();

  //初期表示
  if($list.children('.act')[0]){
    let i = $list.children('.mod_tabAnime-btn.act').index();
    let mgn = 0;
    if(i != 0){mgn = 16*i}
    $itm.css('transform','translateX(calc(-'+ i +'00% - '+mgn+'px))');
    $sec.height($('.mod_tabAnime-item').eq(i).children().height());
  } else {
    let $t = $btn.eq(0);
    $t.addClass('act');
  }
});
$bd.on('click','.mod_tabAnime-btn-in',function(){
  if($(this).hasClass('act')){return false;}

  let $btn = $(this).parent();
  let $Mod = $(this).parents('.mod_tabAnime');
  let $sec = $Mod.find('.mod_tabAnime-sec');
  let $itm = $Mod.find('.mod_tabAnime-item');
  let i = $btn.index();
  let mgn = 0;
  if(i != 0){mgn = 16*i}

  $btn.addClass('act').siblings().removeClass('act');
  $itm.css('transform','translateX(calc(-'+ i +'00% - '+mgn+'px))');
  $sec.height($itm.eq(i).children().height());
});
$('.mod_tabAnime-sec').bind({
  'touchstart': function(e){
    this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
    this.touchedTabSec = true;
    this.touched = false;
  },
  'touchmove': function(e){
    if(!this.touchedTabSec){return;}
    this.pageXm = (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.pageYm = (isTouch ? event.changedTouches[0].pageY : e.pageY);

    if(this.pageXm != 0){
      let i = $('.mod_tabAnime-btn.act').index();
      if(this.pageXm - this.pageX > 0 && i == 0 || this.pageXm - this.pageX < 0 && i + 1 == $('.mod_tabAnime-btn').length){
        this.touchedTabSec = false;
        return;
      }
      if(i == 0){var X = 0;}
      else {var X = -(i * 100);}
      let yc = this.pageXm - this.pageX + 1 + X;
      $('.mod_tabAnime-item').css({
        'transform':'translateX(' + yc + '%)',
        'transition':'0.1s'
      });
      nowTouch = true;
    }
  },
  'touchend': function(e){
    if(!this.touchedTabSec){return;}
    this.touchedTabSec = false;
    this.left = this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX);
    this.top = this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY);

    if(this.top == 0 && this.left == 0){return;}

    let $btn = $('.mod_tabAnime-btn');
    let $act = $('.mod_tabAnime-btn.act');
    let $itm = $('.mod_tabAnime-item');
    let i = $act.index();
    let mgn = 16;
    let Xm = 100;

    if(this.left > 24){// NEXT Move
      if(i != 0){
        Xm = i + 1 + '00';
        mgn = 16 * (i + 1);
      }

      $itm.css('transform','translateX(calc(-' + Xm + '% - '+mgn+'px))');
      $act.removeClass('act');
      $btn.eq(i + 1).addClass('act');
      $('.mod_tabAnime-sec').height($itm.eq(i + 1).children().height());
      nowTouch = false;

    } else if(this.left < -24){// PREV  Move
      if(i != 0){
        Xm = i - 1 + '00';
        mgn = 16 * (i - 1);
      }

      $itm.css('transform','translateX(calc(-' + Xm + '% - '+mgn+'px))');
      $act.removeClass('act');
      $btn.eq(i - 1).addClass('act');
      $('.mod_tabAnime-sec').height($itm.eq(i - 1).children().height());
      nowTouch = false;

    } else {// BACK Move
      let tX = 0;
      if(i != 0){tX = '-' + i + '00%';}

      $itm.css({
        'transform':'translateX(' + tX + ')',
        'transition':'0.1s'
      });
    }
  }
});
/* ed tabAnime ===============*/


// tooltip
//==============================
$bd.on({
  'mouseover': function(){tooltip_disp($(this),$(this).data('tip'));},
  'mouseout': function(){tooltip_remove();}
}, '[data-tip]');
$bd.on('click','[data-tip_click]',function(){
  tooltip_disp($(this),$(this).data('tip_click'));
  $rt.addClass('tooltip');
});
$bd.on('click','.tooltip',function(){
  tooltip_remove();
  $rt.removeClass('tooltip');
});

function tooltip_disp(me,obj){
  $bd.append('<div class="mod_tooltip-obj">' + obj + '</div>');
  let $tip = $('.mod_tooltip-obj');
  let tipHeight = $tip.innerHeight();
  let offsetTop = me.offset().top;
  let offsetLeft = me.offset().left;

  let t = '';
  let tb = '';
  let l = '';
  //上部空きスペース確認
  if(offsetTop < tipHeight + 8){
    t = offsetTop + me.innerHeight() + 8;
    tb = 'bottom';
  } else {
    t = offsetTop - (tipHeight + me.innerHeight() - 10);
    tb = 'top';
  }

  //左右空きスペース確認
  if(offsetLeft < $tip.innerWidth() / 2) {
    l = 8;
    $bd.append('<style class="mod_tooltip-style">.mod_tooltip-obj::after {left: ' + (offsetLeft + (me.innerWidth() / 2) - 8 - 3) + 'px; right: auto;}</style>');
  } else {
    l = offsetLeft - ($tip.innerWidth() / 2) + (me.innerWidth() / 2);
  }

  $tip.addClass(tb).css({'top':t + 'px','left':l + 'px'}).fadeIn(200);
}
function tooltip_remove(){
  $('.mod_tooltip-obj , .mod_tooltip-style').remove();
}
/* ed tooltip ===============*/




















//LazyLoad
//-----------------------------------------
function LazyLoad(wst){
  $('img[lz] , video[lz]').each(function(){
    let lz = $(this).attr('lz');
    if(wst + $win.height() > $(this).offset().top - 200){
      $(this).attr('src',lz).removeAttr('lz');
      $(this).on('load', function(){$(this).removeClass('lz');});
    }
    if(lz != undefined){$(this).addClass('lz');}
  });
}

$win.load(function(){
  LazyLoad($win.scrollTop());
});

$win.sc