/*========= 2022追加 ===============*/

/* fadeIn */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  /* fadeUp */
  .fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

  /* lipLeftTop */
.flipLeftTop{
  animation-name:flipLeftTopAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes flipLeftTopAnime{
    from {
     transform: translate(-20px,80px) rotate(-15deg);
    opacity: 0;
    }
  
    to {
     transform: translate(0,0) rotate(0deg);
    opacity: 1;
    }
  }
  
  /* flipRightTop */
  .flipRightTop{
  animation-name:flipRightTopAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes flipRightTopAnime{
    from {
     transform: translate(-20px,80px) rotate(25deg);
     opacity: 0;
    }
  
    to {
     transform: translate(0,1) rotate(0deg);
    opacity: 1;
    }
  }

  /* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02{
  animation-delay: 0.2s;
  }
  .delay-time04{
  animation-delay: 0.4s;
  }
  .delay-time06{
    animation-delay: 0.6s;
  }
  .delay-time08{
    animation-delay: 0.8s;
  }
  .delay-time10{
    animation-delay: 1s;
  }









/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  /* background:#333; */
  background: linear-gradient(to bottom, #666, #fff);
  text-align:center;
  color:#fff;

  
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:320px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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

/*========= レイアウトのためのCSS ===============*/

#container{
    width:100%;
    /* height: 100vh; */
	height: 100%;
    /* background: #ccc; */
	background: #fff;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* text-align: center; */
}

a{
    /* color: #333; */
}

a:hover{
     /* text-decoration: none; */
}








/*========= animate フェードインのためのCSS ===============*/
.fadeInUpTrigger,
.fadeInTrigger {
	opacity: 0;
}





/*========= ページトップのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	/* bottom:30px; */
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	/* transform: translateY(150px); */
	transform: translateY(195px);
	/*GD追加　画像下くぐるため対策*/
	/* z-index: 1000; */
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	/* transform: translateY(150px); */
	transform: translateY(195px);
  }
  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(150px); */
	transform: translateY(195px);
  }
}

/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
	display: block;
	width: 100px;
	height: 140px;
	color: #333;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    /*背景画像の指定*/
	background: url("../img/pagetop03.png") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 100px;
	height: 168px;
    /*背景画像の指定*/
	background: url("../img/pagetop04.png") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}

/*Page Topと書かれたテキストの位置*/
#page-top span{
    position: absolute;
    bottom: -20px;
    right: 20px;
	color: #666;
}
/*検証のためのCSS*/
section{
padding: 500px 0;
}
/*# sourceMappingURL=anime.css.map */