.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/* .animate_tile:after {
  content: "";
  width: 2px;
  height: 40px;
  display: inline-block;
  background: #00349d;
  transform: rotate(35deg);
  position: absolute;
  top: 14px;
  right: 0;
} */

/* /// */
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* //// */
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e7211a;
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }

  50% {
    transform-origin: right;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: left;
  }

  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

/* //// */
/*背景色が伸びて出現（右から）*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e7211a;
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }

  50% {
    transform-origin: right;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: left;
  }

  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}



/* 背景色が伸びて出現（左から）*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e7211a;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}



.slider .active .item img {

  width: 100%;
  transform: scale(1.1);
  animation: zoomout 3s 1 ease-in-out forwards;
}

@-webkit-keyframes zoomout {
  from {
    transform: scale(1.1);

  }

  to {
    /* opacity: 0.8; */
    transform: scale(1);
  }
}

/*  */

/*========= ローディング画面 ===============*/
#splash {
  position: fixed;
  width: 100%;
  height:100vh;
  top: 0;
  background: #000;
  z-index: 9999999;
  text-align: center;
  color: #000;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.load_hu{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 103;
  top: 0;
}
.nen_fff{
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 101;
  top: 0;
  background-color: #fff;
}
/*========= 画面遷移 ===============*/
/*画面遷移アニメーション*/

.slider_red{
  position: relative;
  z-index: 0;
}

.splashbg {
  display: none;
}

body.appear .splashbg {
  display: block;
  content: "";
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background-color: #333;
  animation-name: PageAnime;
  animation-duration: .8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes PageAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}