﻿var $ = jQuery;

//「GSAP」のライブラリJS読込
//$.ajax({url:"/files/gsap/gsap.min.js",dataType:"script",async:false});

//「GSAP付属」のライブラリJS読込(※必要なものだけコメント外して使う)
//$.ajax({url:"/files/gsap/Flip.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/ScrollTrigger.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/Observer.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/ScrollToPlugin.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/Draggable.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/MotionPathPlugin.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/EaselPlugin.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/PixiPlugin.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/TextPlugin.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/EasePack.min.js",dataType:"script",async:false});
//$.ajax({url:"/files/gsap/CustomEase.min.js",dataType:"script",async:false});

/*=====================================================================*/
//PCかSPを判断する為のフラグとクラス。
var SpFlg = false;
$(function(){
    //SP判定
    var sp = $("#Side_wrap").length;
    if(sp) SpFlg = true;
    $("html").addClass((sp ? "sp" : "pc"));

    //カスタムプロパティ
    GetCustomProperty();
});
//カスタムプロパティ
function GetCustomProperty(){
    var pc_min = 1300;
    var pc_max = 2000;
    var sp_w = 640;
    $(window).bind("ready load resize scroll", function(e){
        var ww = $(window).width();
        var wh = $(window).height();
        var ww2 = window.innerWidth;
        var wh2 = window.innerHeight;
        var wx = $(window).scrollLeft();
        var wy = $(window).scrollTop();
        var scale = (SpFlg ? ww : Math.min(Math.max(ww,pc_min),pc_max))/(SpFlg ? sp_w : pc_max);
        //PC/SP
        SetCustomProperty("easys_window_w", ww+"px");   //PCスクロールバー・SPアドレスバーを含まない画面横幅
        SetCustomProperty("easys_window_h", wh+"px");   //PCスクロールバー・SPアドレスバーを含まない画面高さ
        SetCustomProperty("easys_window_w2", ww2+"px"); //PCスクロールバー・SPアドレスバーを含む画面横幅
        SetCustomProperty("easys_window_h2", wh2+"px"); //PCスクロールバー・SPアドレスバーを含む画面高さ
        SetCustomProperty("easys_window_x", wx+"px");   //横スクロール量
        SetCustomProperty("easys_window_y", wy+"px");   //縦スクロール量
        SetCustomProperty("easys_scale", scale);        //レスポンシブスケール
        //メインサイズ
        $("#jquery_slider_"+(SpFlg ? "sp" : "pc")+" img, #video_teaser"+(SpFlg ? "_sp" : "")+" video, #main_teaser img, #top_slide img").each(function(){
            var rect = this.getBoundingClientRect();
            var main_w = rect.width;
            var main_h = rect.height;
            if(main_w && main_h){
                SetCustomProperty("easys_main_w", main_w+"px");//メイン横幅
                SetCustomProperty("easys_main_h", main_h+"px");//メイン高さ
                return false;
            }
        });
        if(SpFlg){
            //SP
        }else{
            //PC
            var access_h = $("#access").outerHeight();
            SetCustomProperty("easys_access_h", access_h+"px");//ナビ高さ
            var branding_box_h = $("#branding_box").outerHeight();
            SetCustomProperty("easys_branding_box_h", branding_box_h+"px");//ブランディングボックス高さ
        }
    });
}
function SetCustomProperty(name, val, id){
    //ID指定
    if(id)  document.getElementById(id).style.setProperty("--"+name, val);
    //:root指定
    else    document.documentElement.style.setProperty("--"+name, val);
}
/*=====================================================================*/

/*=====================================================================
//「※印」は案件に応じて変更して下さい。
=====================================================================*/

/*=====================================================================
//ターゲット要素に動画を追加する ※CSS側も要編集
$(function(){
    //処理
    var func = function(target, filename){
        if($(target).length){
            //※ファイル名を変更して下さい
            var video = '<video src="/files/'+filename+'.mp4" poster="/files/'+filename+'.jpg" width="100%" preload="metadata" muted loop playsinline></video>';
            $(target).prepend(video);
            $(target+" video").get(0).play();
        }
    };
    //※ターゲットを指定する
    //func("#ターゲット", "動画とポスターのファイル名");
    func("#fzuvxc80c5qbaosjelyl", "pc_movie1_bg");
});
=====================================================================*/

/*=====================================================================
//要素を移動する
$(function(){
    //※移動元→移動先
    $("#移動元").prependTo("#移動先");//先頭に追加
    //$("#移動元").appendTo("#移動先");//最後尾に追加
});
=====================================================================*/

/*=====================================================================
//要素をコピーする
$(function(){
    //※コピー元→コピー先
    $("#コピー元").clone().prependTo("#コピー先");//先頭に追加
    //$("#コピー元").clone().appendTo("#コピー先");//最後尾に追加
});
=====================================================================*/

/*=====================================================================
//要素を追加する
$(function(){
    //※追加先←HTML
    $("#追加先").prepend("<div id='add1'></div>");//先頭に追加
    //$("#追加先").append("<div id='add1'></div>");//最後尾に追加
});
=====================================================================*/

/*=====================================================================
//ターゲット要素が画面内に収まっている時にクラス「scroll_in」を付与/削除する ※CSS側も要編集
$(function(){$(window).bind("load resize scroll", function(){
    //※ターゲットを指定する・複数指定可
    $("#ターゲット1, #ターゲット2").each(function(){
        if($(this).length){
            var wy = $(window).scrollTop();
            var wh = window.innerHeight;
            var ty = $(this).offset().top;
            var th = $(this).height();
            //if(wy < (ty+th) && ty < (wy+wh)){//画面内に少しでも入っている時
            if(wy < ty && (ty+th) < (wy+wh)){//画面内に完全に収まっている時
            //if(ty < wy && (wy+wh) < (ty+th)){//スティッキーに合わせる(画面上辺＆要素上辺～画面下辺＆要素下辺)
                $(this).addClass("scroll_in");
            }else{
                $(this).removeClass("scroll_in");
            }
        }
    });
});});
=====================================================================*/

/*=====================================================================
//見出しブロックを他ブロックと合体する
$(function(){
    //処理
    var func = function(from_id, to_id){
        //見出しブロックを取得して削除
        var html = $(from_id).html();
        $(from_id).remove();
        //ブログブロックと合体する
        $(to_id).prepend(html);
    };
    //※ターゲットを指定する
    //func("#見出しブロックID", "#合体先ブロックID");
    func("#c81jcnspb12x4yh60eat", "#mcjm4i1sgutqg0x0egdd");
});
=====================================================================*/

/*=====================================================================
//マージン不要なブロックにクラス「no_margin」を付与する ※CSS側も要編集
$(function(){
    //※ブロックIDを指定する・複数指定可
    var block_id = [
        "#ブロックID1",
        "#ブロックID2"
    ];
    $(block_id.join(",")).addClass("no_margin");
});
=====================================================================*/

/*=====================================================================
//メインや動画などの「position:fixed;」を使ったパララックス以外を塗りつぶし[JS]
$(function(){
    //※ターゲットを指定する
    var target = $("#ターゲット");
    if(target.length){
        var html = (SpFlg ? $("#main") : $("html"));
        html.css("position","relative");
        html.append("<div id='top_cover'></div><div id='bottom_cover'></div>");
        $(window).bind("load resize scroll", function(){
            var html_h = html.height();
            var t_y = target.offset().top;
            var t_h = target.height();
            //console.log([html_h,t_y,t_h]);
            $("#top_cover").css("height",t_y+"px");
            $("#bottom_cover").css("height",(html_h-t_y-t_h)+"px");
        });
    }
});
//以下のCSSを「files_xx.css」へ張り付けて使用して下さい。
#top_cover,
#bottom_cover {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 50%;
  background-color: #ffffff;
}
#top_cover {
  top: 0;
}
#bottom_cover {
  bottom: 0;
}
=====================================================================*/

/*=====================================================================
//ターゲットをスクロール量に応じて変化させる
$(function(){
    //処理
    var func = function(id, attr, start, end, s_range, e_range){
        //ターゲットFROM→TOをセット
        var id_from;
        var id_to;
        if(Array.isArray(id)){
            id_from = id[0];
            id_to = id[1];
        }else{
            id_from = id;
            id_to = id;
        }
        if($(id_from).length && $(id_to).length){
            //変数セット
            var wy = $(window).scrollTop();
            var wh = window.innerHeight;
            var ty = $(id_from).offset().top;
            var th = $(id_from).outerHeight();
            //範囲
            if(s_range == "top")    s_range = wy;
            if(s_range == "center") s_range = wy+(wh/2);
            if(s_range == "bottom") s_range = wy+wh;
            if(e_range == "top")    e_range = wy;
            if(e_range == "center") e_range = wy+(wh/2);
            if(e_range == "bottom") e_range = wy+wh;
            //console.log([wy,wh,ty,th]);
            var gauge = (s_range-ty)/((s_range-e_range)+th);
            //開始値～終了値まで均等に変化させる
            var atai = start+((end-start)*gauge);
            atai = Math.round(atai*1000)/1000;
            if(start < end){
                if(atai < start) atai = start;
                if(end < atai) atai = end;
            }else{
                if(atai > start) atai = start;
                if(end > atai) atai = end;
            }
            //console.log(atai);
            //属性
            if(-1 < attr.indexOf("!important")){
                $(id_to).css("cssText", attr.split("?").join(atai));
            }else{
                attr = attr.split(":");
                $(id_to).css(attr[0], attr[1].split("?").join(atai));
            }
        }
    };
    $(window).bind("load resize scroll", function(){
        //※1.ターゲットを指定する
        //func("#ターゲット", "属性", 開始値, 終了値, "開始範囲", "終了範囲");
        //※2.ターゲットを配列で2つ指定すると「スクロール量を計測するターゲット」と「変化させるターゲット」を別々に設定可
        //func(["#FROMターゲット", "#TOターゲット"], "属性", 開始値, 終了値, "開始範囲", "終了範囲");
        //開始範囲=top   ：ターゲット上辺と画面上辺～／終了範囲=top   ：～ターゲット下辺と画面上辺
        //開始範囲=center：ターゲット上辺と画面中央～／終了範囲=center：～ターゲット下辺と画面中央
        //開始範囲=bottom：ターゲット上辺と画面下辺～／終了範囲=bottom：～ターゲット下辺と画面下辺
        //func("#pxwf0wresaswy7wwu5la", "width:?% !important", 50, 120, "bottom", "top");
        //func("#pxwf0wresaswy7wwu5la", "opacity:?", 0, 1, "center", "top");
        //func("#zoo6nrvdd96tpwkirgrf", "background-color:rgb(?,255,?)", 255, 0, "bottom", "bottom");
        func("#pxwf0wresaswy7wwu5la", "transform:scale(?)", 0.1, 1, "bottom", "center");
    });
});
=====================================================================*/

/*=====================================================================
//スムーススクロールのズレを修正する
$(function(){
    //ページを開いた時に実行
    if(window.location.hash) SmoothScrollMisalignmentCorrection(window.location.hash);
    //アンカーリンクを押した時に実行
    $("a[href^='#']").bind("click", function(){if(this.hash) SmoothScrollMisalignmentCorrection(this.hash);});
});
function SmoothScrollMisalignmentCorrection(anchor_link){
    //ターゲット
    var target = $(anchor_link);
    //スクロール位置①
    var position1 = Math.floor(target.offset().top);
    //移動済の場合は何もしない
    var scroll_top = Math.floor($(window).scrollTop());
    if(scroll_top == position1) return;
    //スクロールの監視
    var scroll_timer = null;
    $(window).bind("scroll.anchor", function(){
        //スクロール中はクリア
        if(scroll_timer != null) clearTimeout(scroll_timer);
        //スクロール後の処理
        scroll_timer = setTimeout(function(){
            //スクロールの監視終了
            $(window).unbind("scroll.anchor");
            //スクロール位置②
            var position2 = Math.floor(target.offset().top);
            //ズレが発生した時
            if(position1 != position2){
                //アンカーリンク再指定してズレを修正する
                window.location.hash = "";
                window.location.hash = anchor_link;
            }
        },500);
    });
}
=====================================================================*/

/*=====================================================================
//複数のブロックIDにクラス名を付与してグループ化する
$(function(){
    //処理
    var func = function(name, target){
        target = target.join(",");
        if($(target).length) $(target).addClass(name);
    };
    //※ターゲットを指定する
    //func("グループ名", [
    //    "#ターゲット1",
    //    "#ターゲット2",
    //    "#ターゲット3",
    //]);
    func("block_group1", [
        "#l8niz0mfi26rotjtodiy",
        "#ptkilti0k0lhqrjw9tkk",
        "#blwz8ss8sev1dyzq4hh8",
    ]);
});
=====================================================================*/

/*=====================================================================
//ギャラリーブロックをスティッキー＆横スクロールさせる
$(function(){
    //スクロールイベント
    $(window).bind("load resize scroll", function(){
        var sticky = $(".sticky_parent");
        if(sticky.length){
            var wy = $(window).scrollTop();
            var wh = $(window).height();
            var ww = $(window).width();
            sticky.each(function(){
                var ty = $(this).offset().top;
                var tx = $(this).offset().left;
                var th = $(this).outerHeight();
                var atai = (wy-ty)/(th-wh);
                atai = Math.round(atai*1000)/1000;
                if(atai < 0.001) atai = 0;
                if(atai > 0.999) atai = 1;
                var sc = $(this).find(".sticky_child");
                var per_screen = ww/sc.width()*100;
                sc.css("transform","translateX(-"+((100-per_screen)*atai)+"%)");
                //追加縮小エフェクト
                var ss = sc.find("div.sticky_scale");
                if(ss.length){
                    ss.each(function(){
                        $(this).css("transform","");
                        var scd_x = $(this).offset().left-tx;
                        var scd_w = $(this).width();
                        var atai2 = (-1*scd_x)/scd_w;
                        atai2 = Math.round(atai2*1000)/1000;
                        if(atai2 < 0.001) atai2 = 0;
                        if(atai2 > 0.999) atai2 = 1;
                        $(this).css("transform","translateX("+(atai2*scd_w)+"px) scale("+(1-atai2)+")");
                    });
                }
            });
        }
    });
    //処理
    var func = function(id, scale_flg, cnt){
        if($(id).length){
            //ギャラリーブロックの構造をスティッキー用に変更する
            var html = "";
            var scale_class = (scale_flg ? " class='sticky_scale'" : "");
            var content = (SpFlg ? ".content_area" : ".easys_content_inner");
            var imgs = $(id).find(content+" .img_display > div:has(img)");
            imgs.each(function(){
                var href = $(this).find("a").attr("href");
                var target = $(this).find("a").attr("target");
                if(!target) target = "_self";
                var src = $(this).find("img").attr("src");
                if(!src) src = "/files/bnr_sample.jpg";
                //console.log([href, target, src]);
                if(!href || href == src){
                    html += "<div"+scale_class+"><img src='"+src+"' width='100%'></div>";
                }else{
                    html += "<div"+scale_class+"><a href='"+href+"' target='"+target+"' style='display:block;'><img src='"+src+"' width='100%'></a></div>";
                }
            });
            $(id).html("<div class='sticky_child'>"+html+"</div>");
            //スティッキー用のCSSを適用する
            $(id).addClass("sticky_parent");
            $(id).css("height",(imgs.length*100/cnt)+(SpFlg ? "vh" : "vw"));
            $(id).find(".sticky_child").css("width",(imgs.length*100/cnt)+"%");
            $(id).find(".sticky_child > div").css("width",(100/cnt)+"%");
        }
    };
    //※ターゲットを指定する
    //func("#ギャラリーブロックID", "縮小エフェクトフラグ", "1画面あたりの画像枚数");
    func("#zwq1wufjqy7i17j86utj", false, 1);
    func("#pyo9it2i4nhxjtljvcaf", true, 1);
});
//以下のCSSを「files_xx.css」へ張り付けて使用して下さい。
#main {
  overflow: clip;
}
.sticky_parent {
  position: relative;
  padding: 0 !important;
  width: 100%;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.sticky_child {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  height: 100vh;
  place-content: center;
  place-items: center;
}
=====================================================================*/

/*=====================================================================
//デザインブロックのテンプレートパターン6種(PC/SP共通)
$(function(){
    //スクロールイベント
    $(window).bind("load resize scroll", function(){
        var block = $(".template_db");
        block.each(function(){
            var wy = $(window).scrollTop();
            var wh = window.innerHeight;
            var ty = $(this).offset().top;
            var th = $(this).outerHeight();
            var tcy = $(this).find(".db_image > div").offset().top;
            var tch = $(this).find(".db_image > div").outerHeight();
            //console.log({wy,wh,ty,th});
            if(wy <= tcy && (tcy+tch) <= (wy+wh)){
                //画面内に完全に収まっている時
                $(this).addClass("on_screen");
            }else if(!(wy < (ty+th) && ty < (wy+wh))){
                //画面外に完全に出た時
                $(this).removeClass("on_screen");
            }
        });
    });
    //処理
    var func = function(id, pattern, img_ary){
        var db = $(id);
        if(db.length){
            //画像タグ生成
            var image = "";
            for(var i in img_ary) image += "<img src='"+img_ary[i]+"'>";
            image = (image ? "<div class='db_image' data-img_cnt="+img_ary.length+"><div>"+image+"</div></div>" : "");
            //専用HTML生成
            var html = "";
            var tag_name = (SpFlg ? "small" : ".main_btn");
            var t = db.find(".entry_post");
            var title = t.find(".headline_title").text();//タイトル
            title = (title ? "<div class='db_title'>"+title+"</div>" : "");
            var comment = t.find(".post_data").html();//コメント
            comment = (comment ? "<div class='db_comment'>"+comment+"</div>" : "");
            var button = t.find(tag_name).html();//リンクボタン
            button = (button ? "<div class='db_button'>"+button+"</div>" : "");
            html = image+"<div class='db_text'>"+title+comment+button+"</div>";
            db.html(html);
            //クラス付与
            db.addClass("template_db pattern"+pattern);
        }
    };
    //※ターゲットを指定する
    //func("#デザインブロックID", パターン番号, [
    //    "画像URL",
    //]);
    //※画像は「重なり：背面」＞「配置：左上」から順番になります。
    //パターン①：画像3枚
    func("#ypvzfpkise3mw7kaa16m", 1, [
        "/files/template-db1-1.jpg",
        "/files/template-db1-2.jpg",
        "/files/template-db1-3.jpg",
    ]);
    //パターン②：画像5枚
    func("#ahz9r9mb04hcma82747a", 2, [
        "/files/template-db2-1.jpg",
        "/files/template-db2-2.jpg",
        "/files/template-db2-3.jpg",
        "/files/template-db2-4.jpg",
        "/files/template-db2-5.jpg",
    ]);
    //パターン③：画像3～7枚
    func("#yjwnje191hwv6jz8bin1", 3, [
        "/files/template-db3-1.jpg",
        "/files/template-db3-2.jpg",
        "/files/template-db3-3.jpg",
    ]);
    //パターン③：画像3～7枚
    func("#q1gvf5bf4i4r94tnsbxa", 3, [
        "/files/template-db3-1.jpg",
        "/files/template-db3-2.jpg",
        "/files/template-db3-3.jpg",
        "/files/template-db3-4.jpg",
        "/files/template-db3-5.jpg",
        "/files/template-db3-6.jpg",
        "/files/template-db3-7.jpg",
    ]);
    //パターン④：画像4枚
    func("#r5xbqpph4ldfwvxff49i", 4, [
        "/files/template-db4-1.jpg",
        "/files/template-db4-2.jpg",
        "/files/template-db4-3.jpg",
        "/files/template-db4-4.jpg",
    ]);
    //パターン⑤：画像3枚
    func("#yz2vgpm8gr04h5e1snlx", 5, [
        "/files/template-db5-1.jpg",
        "/files/template-db5-2.jpg",
        "/files/template-db5-3.jpg",
    ]);
    //パターン⑥：画像3枚
    func("#l7nls7jh085cacgyhlh5", 6, [
        "/files/template-db6-1.jpg",
        "/files/template-db6-2.jpg",
        "/files/template-db6-3.jpg",
    ]);
});
=====================================================================*/

/*=====================================================================
//GSAP
$(function(){
    //要素追加
    $("#tt7wowishn42raiz94k1 .post-html").html('<div class="circle"></div><div class="circle"></div><div class="circle"></div>');
    //移動
    if($(".circle").length){
        gsap.fromTo(".circle", {y:-30}, {
            y: 30,
            ease: "power1.inOut", // 進行具合
            stagger: {
                each: 0.15, // アニメーション間の時間
                repeat: -1, // 無限に繰り返し
                yoyo: true  // アニメーションの反復
            }
        });
    }
});
=====================================================================*/
