@charset "utf-8";

/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}




/*サステナビリティ
---------------------------------------------------------------------------*/
/*タイピング*/







.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}



.zoom-out{
	animation-name:ZoomOut;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	opacity: 1;
}

@keyframes ZoomOut {
	0% {
	  opacity: 0;
	  transform: scale(2);

	}
	100% {
	  opacity: 1;
	  transform: scale(1);

	}
}


.zoom-In-FadeOut{
	animation-name:ZoomInFadeOut;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity: 1;
}

@keyframes ZoomInFadeOut {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
}


/*--sus.html  コンテナの中にある全てのSDGsアイコンが対象、JSのaddclassdで移動--*/
.to-right {
	animation: anim-to-right 1s;
	animation-fill-mode: forwards;
}


/*SDGsアイコンを右へ移動させるときに実行*/
@keyframes anim-to-right {
	0% {
	transform: translateX(-50%);
	}
  
	100% {
	transform: translateX(-40%);
	}
}



.up-text{
	/*-- animation-name:fadeUpAnime; --*/
	/*-- animation-duration:1.5s; --*/
	/*-- animation-fill-mode:forwards; --*/
	animation: fadeUpAnime 0.5s forwards ease-out;
}
	
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(10vh);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.up-img{
	animation-name:fadeUpImg;
	animation-duration:1s;
	animation-delay: -1s;
	animation-fill-mode:forwards;
}
	
@keyframes fadeUpImg{
	from {
		opacity: 0;
		transform: translateY(5vh);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}





.from-left{
	animation-name:SlideInFromLeft;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes SlideInFromLeft {
	0% {
	  opacity: 0;
	  transform: translateX(-1vw);
	}
	100% {
	  opacity: 1;
	  transform: translateX(0);
	}
}


.from-right{
	animation-name:SlideInFromRight;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes SlideInFromRight {
	0% {

	  transform: translateX(1vw);
	}
	100% {
	  transform: translateX(0);
	}
}

/*--罫線を引く（左から右へ）
https://1-notes.com/css-border-animation/　--*/
.border-left-to-right{
	position: relative;
}
  
.border-left-to-right::before{
	content: '';
	position: absolute;
	left: 0;	/*線の基点（左右は左から引く）*/
	bottom: 0;	/*線の基点（上下は下から引く）*/
	width: 100vw;
	border-bottom: solid 1px;
	border-image: linear-gradient(to right, #000000 0%, #f7f6f6 100%);
	border-image-slice: 1;
	/*--transform: translateX(-50%);　　中心から引くとき--*/
	animation: border_anim 1.5s linear forwards;
}


/*--罫線を引く（中央から左右に伸びる）
https://1-notes.com/css-border-animation/　--*/
.border-to-center{
	position: relative;
	text-align: center;
}

.border-to-center::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	/*bottom: 0;*/
	width: 100vw;
	height: 1px;
	background-image: linear-gradient(40deg, #ffffff, #000000, #ffffff);
	transform: translateX(-50%);
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	animation: border_anim 1.5s linear forwards;
}

@keyframes border_anim {
	from {
	  width: 0;
	}
	to {
	  width: 100vw;
	}
}
  




/*--罫線を引く（右から左へ）
https://1-notes.com/css-border-animation/　--*/
.border-right-to-left{
	position: relative;
}
  
.border-right-to-left::before{
	content: '';
	position: absolute;
	left: 100%;	/*線の基点（左右は右から引く）*/
	top: 0;	/*線の基点（上下は「上」から引く）*/
	width: 100vw;
	border-bottom: solid 1px;
	border-image: linear-gradient(to left, #000000 0%, #f7f6f6 100%);
	border-image-slice: 1;
	transform: translateX(-100%);	/*--中心から引くとき--*/
	animation: border_anim 1.5s linear forwards;
}

@keyframes border_anim {
	0%{
	  width: 0%;
	}
	100%{
	  width: 95vw; /*--長さを指定--*/
	}
}