$(function () {
  //---------------------------------------------
  // ハンバーガーメニュー
  //---------------------------------------------
  $(document).ready(function () {
    $(".toggle").click(function () {
      $(this).toggleClass("active"); // ボタンのアイコンをアクティブに切り替える
      $(".nav").toggleClass("show"); // サイドバー（メニュー）の表示・非表示を切り替える
    });
    //ページ内リンククリック時にハンバーガーメニューを閉じる
    $(".nav a[href]").on("click", function () {
      $(".toggle").trigger("click");
    });
  });
  //---------------------------------------------
  // スクロールでヘッダーを上部に固定
  //---------------------------------------------
  $(document).ready(function () {
    if ($(window).width() >= 901) {
      // 画面幅が901px以上の場合に実行
      var nav = $("nav");
      var navTop = nav.offset().top; // nav要素の位置を取得
    }
  });
  //---------------------------------------------
  //  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();
    }
  });
  //---------------------------------------------
  //  チケットボタン スクロールでフェードイン
  //---------------------------------------------

  var ticketBtn = $("#ticketBtn");
  ticketBtn.hide();

  $(window).scroll(function () {
    if ($(this).scrollTop() > 200 && $(window).width() <= 480) {
      ticketBtn.fadeIn();
    } else {
      ticketBtn.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);
});