/* newフェードイン用のCSS */

.slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s 0s ease-out;
}
.slide-left.delay01{
    transition: all 0.5s 0.2s ease-out;
}
.slide-left.delay02{
    transition: all 0.5s 0.9s ease-out;
}
.slide-left.delay03{
    transition: all 0.5s 1.0s ease-out;
}
.slide-left.delay04{
    transition: all 0.5s 1.1s ease-out;
}

.slide-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s 0s ease-out;
}



/*中央からパッと出現*/

.fadeInTrigger{
opacity: 0;
}
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInTrigger02{
opacity: 0;
}
.fadeIn02{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay: 0.3s;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInTrigger03{
opacity: 0;
}
.fadeIn03{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay: 0.6s;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInTrigger04{
opacity: 0;
}
.fadeIn04{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay: 0.9s;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}











/* change-cont ----------------------------------------------------------------------------------------------*/
.change_sli {
	overflow: hidden;
    position: relative;
}
.change_sli:before {
	-webkit-transition: 0.3s;
    transition: 0.3s;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #ededed;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.change_sli.isShow::before {
    right: -100%;
}
/* ----------------背景白ver--------------- */
.back-w.change_sli:before {
	background-color: #fff;
}
/* ----------------背景黄色ver--------------- */
.back-y.change_sli:before {
	background-color: #ffcc33;
}
/* ----------------背景青ver--------------- */
.back-b.change_sli:before {
	background-color: #184d9d;
}











/* =======================================
　　　　　　　ページTOP
======================================= */
#page-top {
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(200px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(200px);
  }
}

#page-top02 {
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top02.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(200px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top02.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(200px);
  }
}