$(function() {   
     
//---------------------------------------------
//  SP閲覧時のみ電話番号にリンクを付ける
//---------------------------------------------
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }

//---------------------------------------------
//  外部リンクを別ウィンドウで開く
//---------------------------------------------
	$('a[href^=https]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');
	$('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');

    
//---------------------------------------------
//  スムーズスクロール
//---------------------------------------------
	
//#を含むリンクが対象
   $('a[href^="#"]').click(function(){ 
   var speed = 600,
   href = $(this).attr("href"),
	
//href="#"ならページトップ(html)へ href="#"以外ならhrefの指定先へ
   target = $(href == "#" || href=="" ? 'html':href),
   position = target.offset().top;
   
  $('body,html').animate({scrollTop:position},speed,'swing');
   return false;   
   });

//---------------------------------------------
//  pagetopボタン スクロールでフェードイン
//---------------------------------------------
	
 // 300pxスクロールしたらpagetopボタンを表示する
	var topBtn=$('#PageTop');
    topBtn.hide();
	
	$(window).scroll(function() {
		if($(this).scrollTop() > 300){
			topBtn.fadeIn();
	} else {
		topBtn.fadeOut();	
	}        
});


//---------------------------------------------
// スクロールで要素を表示
//---------------------------------------------
function showElementAnimation() {

  var element = document.getElementsByClassName('js-animation');
  if(!element) return; // 要素がなかったら処理をキャンセル
  
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;

  for(var i=0;i<element.length;i++) {
    var elemClientRect = element[i].getBoundingClientRect();
    var elemY = scrollY + elemClientRect.top;
    if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);
     

//---------------------------------------------
// ローディング画面
//---------------------------------------------
  $(window).on('load', function(){
  var loading = $("#loading");
  //ローディングエリアを隠す処理
  var isHidden = function(){
    loading.fadeOut(1000); //1000ミリ秒かけてフェードアウト
    $("body").removeClass("js-no-scroll");
  };
  //1000ミリ秒後にloadingFunc開始
  setTimeout(isHidden,1000);
});  

//---------------------------------------------
//  タイムライン
//---------------------------------------------
//線が伸びるための設定を関数でまとめる
function ScrollTimelineAnime(){
  $('.timeline li').each(function(){// それぞれのli要素の
    var elemPos = $(this).offset().top;// 上からの高さ取得
    var scroll = $(window).scrollTop();// スクロール値取得
    var windowHeight = $(window).height();// windowの高さ取得
    var startPoint = 300; //線をスタートさせる位置を指定※レイアウトによって調整してください
    if (scroll >= elemPos - windowHeight-startPoint){       
      var H = $(this).outerHeight(true)//liの余白と高さを含めた数値を取得
      //スクロール値から要素までの高さを引いた値を、liの高さの半分のパーセントで出す
      var percent = (scroll+startPoint - elemPos) / (H/2) *100;//liの余白と高さの半分で線を100％に伸ばす

      // 100% を超えたらずっと100%を入れ続ける
      if(percent  > 100){
        percent  = 100;
      }
      // ボーダーの長さをセット
      $(this).children('.border-line').css({
        height: percent + "%", //CSSでパーセント指定
      });
    } 
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).on('scroll', function(){
  ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
  ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});
     
 });