// 参照元 http://www.webopixel.net/javascript/538.html
jQuery(document).ready(function($){
$(function() {

  var box1 = $('.fade1'); // 各要素のCSSを取得
  var box2 = $('.fade2'); // 各要素のCSSを取得
  var box3 = $('.fade3'); // 各要素のCSSを取得
  var box4 = $('.fade4'); // 各要素のCSSを取得


  $(window).ready(function () {
    box1.fadeIn();
  }); //ロード時にフェードイン

  $(window).scroll(function () {
    if ($(this).scrollTop() > 600) { //スクロールが数値（px）に達したら
    box2.fadeIn(); //※フェードイン
    } else {
    // box2.fadeOut(); //※フェードアウト
    }
  });

  $(window).scroll(function () {
    if ($(this).scrollTop() > 1410) { //スクロールが数値（px）に達したら
    box3.fadeIn(); //※フェードイン
    } else {
    // box3.fadeOut(); //※フェードアウト
    }
  });

  $(window).scroll(function () {
    if ($(this).scrollTop() > 2300) { //スクロールが数値（px）に達したら
    box4.fadeIn(); //※フェードイン
    } else {
    // box4.fadeOut(); //※フェードアウト
    }
  });


});
});