@charset "UTF-8";


/* ##############################################
##
##  ロード画面（header.php、header-loading.php）
##
############################################## */
/* --------------------
ロード画面 初期状態
-------------------- */
.home_loading_animation {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
}

/* ------------------//
//  ローディング中
//------------------ */
body.is-loading .home_loading_animation {
  display: flex;
}
body.is-loading {
  overflow: hidden;
}

/* ------------------//
//  ローダー
//------------------ */

.loader {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 3.5em;
  text-transform: uppercase;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(to right, var(--color-darkcyan), var(--color-darkblue), var(--color-navy), var(--color-skyblue));
  background-clip: text; -webkit-background-clip: text;
  animation: loadingBlink 2.0s linear infinite alternate;
  user-select: none;
}

.loader::before {
  content: "technology oriented company";/*Loading...*/
}

@media screen and (max-width: 1023px) {}
@media screen and (max-width: 767px) {
  .loader {
    opacity: 0;
    font-size: 1.7em;
  }
}
@media screen and (max-width: 567px) {}

/*
@keyframes loadingBlink {
  to {
    opacity: 0;
  }
}
*/
@keyframes loadingBlink {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  25% {
    opacity: 1.0;
  }
  75% {
    opacity: 1.0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



/* ------------------//
//  本体表示制御
//------------------ */
/* 初期非表示 */
.home .site,
.front-page .site {
  opacity: 0;
  transition: opacity .6s ease;
}

/* 表示 */
body.is-site-visible .site {
  opacity: 1;
}

/* ロード完了 */
body.is-ready .home_loading_animation {
  display: none;
}