@charset "UTF-8";


/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity .5s, transform .5s; 
}
.js-fadeUp.is-inview {
  opacity: 1; 
  transform: translateY(0); 
  transition-delay: .5s;
}

.bgextend {
  position: relative;
  overflow: hidden;
}

/* 背景が左→右に伸びて消える */
.bgLRextend.on::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #5573b7;
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  z-index: 1;
  top: 0;
  left: 0;
}
.col-sm-6.bgextend.bgLRextend.on {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@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);
  }
}

/* 中身非表示 → アニメーションで表示 */
.bgappear {
  position: relative;
  opacity: 0;
  z-index: 2;
}

.bgextend.on .bgappear {
  animation: bgContentFadeIn 0.6s ease-out 1s forwards;
}

@keyframes bgContentFadeIn {
  from {
    opacity: 0;
    /* transform: translateY(10px); */
  }
  to {
    opacity: 1;
    /* transform: translateY(0); */
  }
}



/* ランダム表示 */
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

.box{
	opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 初期状態の splashbg */
.splashbg {
  display: none;
}

/* appear がついたら splashbg 表示＆アニメーション開始 */
body.appear .splashbg {
  display: block;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #5573b7;
  animation: slideDown .5s ease-in-out forwards;
  animation-delay: 0.3s;
}

@keyframes slideDown {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* #wrap {
  opacity: 0;
}

body.appear #wrap {
  animation: PageAppear .5s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes PageAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} */