// ================================================
// オープニングアニメーション
// ================================================

// トップのエフェクト ページ開くと表示されその後フェードアウト
if (sessionStorage.getItem("startMv")) {
  $(".start").css("display", "none");
  // 2回目以降のアクセス時はヘッダーを即座に表示（重要度を上げる）
  $(".header").css({
    opacity: "1",
    transition: "none",
  });
  // トップの動画の遅延再生
  $("#opv")
    .delay(0)
    .queue(function (next) {
      $("#opv").get(0).play();
      next();
    });
  $("#opv_sp")
    .delay(0)
    .queue(function (next) {
      $("#opv_sp").get(0).play();
      next();
    });
}
// ページ読み込み時にヘッダーの高さを取得してmainにpadding-topを設定
$(document).ready(function () {
  // main.no-ptクラスがある場合はpadding-topを設定しない
  if (!$("main").hasClass("no-pt")) {
    // ヘッダーの高さを取得
    var headerHeight = $(".header").outerHeight();

    // mainにpadding-topを設定
    $("main").css("padding-top", headerHeight + "px");

    // ウィンドウのリサイズ時にも再計算
    $(window).resize(function () {
      var headerHeight = $(".header").outerHeight();
      $("main").css("padding-top", headerHeight + "px");
    });
  }
});
// ================================================
// オープニングアニメーション タイミング設定
// ================================================
// 【先方確認により変更される可能性があります】
//
// ■ タイミング設定値
const OPENING_TIMING = {
  LOGO_APPEAR_DELAY: 800, // ロゴ登場開始時間（ms）
  LOGO_ANIMATION_DURATION: 800, // ロゴアニメーション時間（ms）※CSSも要変更
  FADEOUT_START_DELAY: 3000, // フェードアウト開始時間（ms）
  FADEOUT_DURATION: 800, // フェードアウト時間（ms）
  COMPLETE_HIDE_DELAY: 4000, // 完全非表示時間（ms）
};
//
// ■ 計算結果
// - ロゴ完全表示: 1.6秒後（800ms + 800ms）
// - ロゴ表示時間: 1.4秒間（3000ms - 1600ms）
// - 総表示時間: 4秒
// ================================================

$(window).on("load", function () {
  if (!sessionStorage.getItem("startMv")) {
    sessionStorage.setItem("startMv", "start");

    // 背景画像は即座に表示（最初から表示）
    $(".start-bg").show();

    // ロゴを指定時間後にゆっくりと登場
    setTimeout(function () {
      $(".start-logo").addClass("show");
    }, OPENING_TIMING.LOGO_APPEAR_DELAY);

    // 指定時間後に全体を同時にフェードアウト開始
    setTimeout(function () {
      $(".start-bg").addClass("fadeout");
      $(".start").addClass("fadeout");
      $(".start-logo").css({
        opacity: "0",
        transition: `opacity ${OPENING_TIMING.FADEOUT_DURATION}ms ease-out`,
      });
    }, OPENING_TIMING.FADEOUT_START_DELAY);

    // 指定時間後に全体を非表示
    setTimeout(function () {
      $(".start").fadeOut(0);

       // 少し遅延させてから.top-mv-logoを表示
      setTimeout(function () {
        if (
          $(".top-mv-logo").css("opacity") === "0" ||
          $(".top-mv-logo").css("opacity") === "0px"
        ) {
          $(".top-mv-logo").addClass("gentleFade");
        }
      }, 500); // 0.5秒後に表示

    }, OPENING_TIMING.COMPLETE_HIDE_DELAY);

    // 5秒後にテキストアニメーション開始（一文字ずつ）
    setTimeout(function () {
      // <object>で埋め込まれたSVGにアクセス
      var svgObject = document.querySelector(".catch-text-svg");
      if (svgObject && svgObject.contentDocument) {
        var svgDoc = svgObject.contentDocument;
        var catchText = svgDoc.getElementById("CatchText");
        if (catchText) {
          catchText.classList.add("animate");
        }
      }
    }, 5000);

    // トップの動画の遅延再生
    $("#opv")
      .delay(2500)
      .queue(function (next) {
        $("#opv").get(0).play();
        next();
      });
    $("#opv_sp")
      .delay(2500)
      .queue(function (next) {
        $("#opv_sp").get(0).play();
        next();
      });
  } else {
    // 2回目以降のアクセス時もテキストアニメーションを実行（一文字ずつ）
    setTimeout(function () {
      // <object>で埋め込まれたSVGにアクセス
      var svgObject = document.querySelector(".catch-text-svg");
      if (svgObject && svgObject.contentDocument) {
        var svgDoc = svgObject.contentDocument;
        var catchText = svgDoc.getElementById("CatchText");
        if (catchText) {
          catchText.classList.add("animate");
        }
      }
    }, 1000); // 1秒後に開始

    // 2回目以降のアクセス時は即座に.top-mv-logoを表示
    setTimeout(function () {
      $(".top-mv-logo").addClass("gentleFade");
    }, 500); // 0.5秒後に表示
    
  }
});
// ふわっとさせる
// --------------------------------------------------------------
// 動きのきっかけとなるアニメーションの名前を定義
function fadeAnime() {
  // ふわっ
  $(".fadeUpTrigger").each(function () {
    //fadeUpTriggerというクラス名が
    var elemPos = $(this).offset().top - 50; //要素より、50px上の
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("fadeUp"); // 画面内に入ったらfadeUpというクラス名を追記
    } else {
      $(this).removeClass("fadeUp"); // 画面外に出たらfadeUpというクラス名を外す
    }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述

// 順番に現れる
// --------------------------------------------------------------

function delayScrollAnime() {
  var time = 0.2; //遅延時間を増やす秒数の値
  var value = time;
  $(".delayScroll").each(function () {
    var parent = this; //親要素を取得
    var elemPos = $(this).offset().top; //要素の位置まで来たら
    var scroll = $(window).scrollTop(); //スクロール値を取得
    var windowHeight = $(window).height(); //画面の高さを取得
    var childs = $(this).children(); //子要素を取得

    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      //指定領域内にスクロールが入ったらまた親要素にクラスplayがなければ
      $(childs).each(function () {
        if (!$(this).hasClass("fadeUp")) {
          //アニメーションのクラス名が指定されているかどうかをチェック

          $(parent).addClass("play"); //親要素にクラス名playを追加
          $(this).css("animation-delay", value + "s"); //アニメーション遅延のCSS animation-delayを追加し
          $(this).addClass("fadeUp"); //アニメーションのクラス名を追加
          value = value + time; //delay時間を増加させる

          //全ての処理を終わったらplayを外す
          var index = $(childs).index(this);
          if (childs.length - 1 == index) {
            $(parent).removeClass("play");
          }
        }
      });
    } else {
      $(childs).removeClass("fadeUp"); //アニメーションのクラス名を削除
      value = time; //delay初期値の数値に戻す
    }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  delayScrollAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
  delayScrollAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述

// ================================================
// ヘッダーメニュー（ハンバーガーメニュー）
// ================================================

$(document).ready(function () {
  // ハンバーガーメニューボタンのクリックイベント
  $(".js-btn").on("click", function () {
    // ボタンの状態を切り替え
    $(this).find(".btn-line").toggleClass("open");

    // メニューの表示/非表示を切り替え
    $(".container").toggleClass("open");

    // スクロールを無効化/有効化
    if ($(".container").hasClass("open")) {
      $("body").css("overflow", "hidden");
    } else {
      $("body").css("overflow", "auto");
    }
  });

  // メニュー項目をクリックした時にメニューを閉じる
  $(".header-nav-item a").on("click", function () {
    $(".js-btn .btn-line").removeClass("open");
    $(".container").removeClass("open");
    $("body").css("overflow", "auto");
  });

  // 画面外をクリックした時にメニューを閉じる
  $(document).on("click", function (e) {
    if (!$(e.target).closest(".container, .js-btn").length) {
      $(".js-btn .btn-line").removeClass("open");
      $(".container").removeClass("open");
      $("body").css("overflow", "auto");
    }
  });
});

// ================================================
// ページトップボタン
// ================================================

$(function () {
  var showFlag = false;
  var topBtn = $("#page-top");
  topBtn.css("bottom", "-100px");

  // スクロールが100に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      if (showFlag == false) {
        showFlag = true;
        topBtn.stop().animate({ bottom: "20px" }, 200);
      }
    } else {
      if (showFlag) {
        showFlag = false;
        topBtn.stop().animate({ bottom: "-100px" }, 200);
      }
    }
  });

  // スクロールしてトップ
  topBtn.click(function () {
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      500
    );
    return false;
  });
});

// ================================================
// 固定ヘッダー制御（スクロール時ヘッダー）
// ================================================

(function () {
  const fh = document.getElementById("fixed-header");

  // デバッグ用：要素の存在確認
  if (!fh) {
    console.error("fixed-header要素が見つかりません");
    return;
  }

  console.log("fixed-header要素を発見:", fh);

  window.addEventListener("scroll", () => {
    const scrollTop = window.pageYOffset;
    console.log("スクロール位置:", scrollTop);

    if (scrollTop > 200) {
      fh.classList.add("is-show");
      console.log("is-showクラスを追加");
    } else {
      fh.classList.remove("is-show");
      console.log("is-showクラスを削除");
    }
  });
})();

// 250917add
document.addEventListener('DOMContentLoaded', () => {
  // 動画とロゴの要素を取得
  const video = document.getElementById('opv');
  
  video.addEventListener('ended', () => {
     $(".top-mv-logo_v2").addClass("gentleFade");
  });
});

// 画像のモーダル（ルームプラン用）
$(".rp").modaal({
  type: "image",
  overlay_close: true, //モーダル背景クリック時に閉じるか
  before_open: function () {
    // モーダルが開く前に行う動作
    $("html").css("overflow-y", "hidden"); /*縦スクロールバーを出さない*/
  },
  after_close: function () {
    // モーダルが閉じた後に行う動作
    $("html").css("overflow-y", "scroll"); /*縦スクロールバーを出す*/
  },
});

// 251010add
document.addEventListener('DOMContentLoaded', () => {
  // 動画とロゴの要素を取得
  const video = document.getElementById('opv');
  
  video.addEventListener('ended', () => {
     $(".top-mv-logo_v2").addClass("gentleFade");
  });
});