<?php if ( is_home() || is_front_page() ) : ?>
    <div id="loader_wrap"><div class="loader"></div></div>

    <script>
        var flg = null;
        var check_access = function () {
            if (sessionStorage.getItem('access_flg')) {
                flg = 1;
            } else {
                sessionStorage.setItem('access_flg', true);
                flg = 0
            }
            return flg;
        }
    
        var $i = check_access();
        const loader = document.getElementById("loader_wrap");
        setTimeout(() => {
            loader.style.opacity = 0;
        }, 2500);
        loader.addEventListener("transitionend", () => {
            loader.remove();
        });
    </script>
<?php endif; ?>

/* 画面全体の設定 */
#loader_wrap {
    z-index: 999;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    background: #fff;
    pointer-events: none;
    transition: all 0.3s;
}

/* ローディングアニメーションの設定 */
.loader {
    width: 12%;
    height: 100vh;
    background: url("../img/rc-logo.png") #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    opacity: 0;
    animation: blinkAnime 3s infinite linear;
}

@keyframes blinkAnime {
	0% {opacity: 0;}
	50% {opacity: 1; }
	100% {opacity: 1; }
}

@media screen and (max-width:768px) { 
	.loader {
		width: 30%;
	}
}

<div class="mv wow animate__animated animate__fadeIn">
    <div class="inner">
        <div class="mv_text_wrapper">
            <div class="text_wrapper_main eachTextAnime">
                <p>Building Your Bright<br> Future Together.</p>
            </div>
            <div class="text_wrapper_sub text_animetion_sub wow animate__animated animate__fadeIn"><p>人とのつながりを大切に、共に歩む</p></div>
        </div>
    </div>
</div>

// eachTextAnimeにappeartextというクラス名を付ける定義
function EachTextAnimeControl() {
  jQuery('.eachTextAnime').each(function () {
  var elemPos = jQuery(this).offset().top - 50;
  var scroll = jQuery(window).scrollTop();
  var windowHeight = jQuery(window).height();
  if (scroll >= elemPos - windowHeight) {
    jQuery(this).addClass("appeartext");

  } else {
    jQuery(this).removeClass("appeartext");
  }
  });
}

// 画面が読み込まれたら動かす
jQuery(window).on('load', function () {
  var element = jQuery(".eachTextAnime");
  element.each(function () {
  var text = jQuery(this).text();
  var textbox = "";
  text.split('').forEach(function (t, i) {
    if (t !== " ") {
    if (i < 10) {
        textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
    } else {
        var n = i / 10;
        textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
    }

    } else {
    textbox += t;
    }
  });
  jQuery(this).html(textbox);
  });

  // 2.8秒(2800ミリ秒)後にアニメーション用の関数を呼ぶ
  setTimeout(function () {
      EachTextAnimeControl();
  }, 2800);
});

.mv {
    color: b.$fc-white;
    background-image: url("../img/mv-img.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        top: 0;
        left: 0;
        border-top: 0px solid b.$color-main;
        border-left: 303px solid b.$color-main;
        border-bottom: 354px solid rgba(0 0 0 / 0);
        border-right: 0px solid rgba(0 0 0 / 0);
        opacity: 0;
        animation: pulseMotion 1s linear 8.5s 1 forwards;

        @include b.mq(tab) {
            border-left: 240px solid b.$color-main;
            border-bottom: 300px solid rgba(0 0 0 / 0);
        }

        @include b.mq(sp) {
            border-left: 120px solid b.$color-main;
            border-bottom: 280px solid rgba(0 0 0 / 0);

            display: none;
        }
    }
    @keyframes pulseMotion {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    &::after {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        bottom: -50px;
        right: 0;
        border-top: 0px solid rgba(0 0 0 / 0);
        border-left: 635px solid rgba(0 0 0 / 0);
        border-bottom: 788px solid b.$color-main;
        border-right: 0px solid b.$color-main;
        z-index: 2;
        opacity: 0;
        animation: pulseMotion 1s linear 8.5s 1 forwards;

        @include b.mq(tab) {
            border-left: 400px solid rgba(0 0 0 / 0);
            border-bottom: 650px solid b.$color-main;
        }

        @include b.mq(sp) {
            border-left: 200px solid rgba(0 0 0 / 0);
            border-bottom: 600px solid b.$color-main;

            display: none;
        }

        @keyframes pulseMotion {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    }
}
.eachTextAnime span {
    opacity: 0;
}
.eachTextAnime.appeartext span {
    animation: text_anime_on 0.8s ease-out forwards;
}
@keyframes text_anime_on {
	0% {opacity:0;}
    100% {opacity: 1;}
}
.text_animetion_sub {
    animation-name: mv-text-sub;
    animation-delay: 7s;
}
@keyframes mv-text-sub {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.js-header{
    animation-name: mv-delay;
    animation-delay: 8s;
}
@keyframes mv-delay {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.about{
    opacity: 0;
}

jQuery(function() {
  window.addEventListener("scroll", function () {
    const about = document.querySelector(".about");
    const scroll = window.pageYOffset;
    if (scroll > 50) {
      about.style.opacity = "1";
    } else {
      about.style.opacity = "1";
    }
  });
});