@charset "utf-8";


/*フェードアップ*/
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

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

/*一文字づつ表示Txt*/
@keyframes fadeInMotion {
	0% {opacity:0;}
	100% {opacity:1;}
}




/*セクションタイトル*/
h2.section-ttl{
	opacity: 0;
	animation-delay: 0.15s;
	animation-timing-function:ease-in-out;
}
h2.section-ttl.scon{
	animation-name: fadeUpAnime;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}

h2.section-ttl > span{
	opacity:0;
}

h2.section-ttl.scon > span{
	animation-name: fadeInMotion;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
}
/*
h2.section-ttl > span:nth-child(1){

}
*/


/******************************
 ４分野で課題を解決
 ******************************/
#sec01 h2.field-ttl,
#sec01 p.section-txt{
	opacity: 0;
}

#sec01 .scon h2.field-ttl{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.15s;
}

#sec01 .scon p.section-txt{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}


#quadBox .fieldBox2_illust > div,
#quadBox .fieldBox2_links > a{
	opacity: 0;
}

#quadBox.scon .fieldBox2_illust > div,
#quadBox.scon .fieldBox2_links > a{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}


#quadBox .fieldBox2_illust > div:nth-child(1){
	animation-delay: 0.45s;
}
#quadBox .fieldBox2_illust > div:nth-child(2){
	animation-delay: 0.6s;
}
#quadBox .fieldBox2_illust > div:nth-child(3){
	animation-delay: 0.75s;
}
#quadBox .fieldBox2_illust > div:nth-child(4){
	animation-delay: 0.9s;
}
#quadBox .fieldBox2_illust > div:nth-child(5){
	animation-delay: 1.05s;
}
#quadBox .fieldBox2_illust > div:nth-child(6){
	animation-delay: 1.2s;
}
#quadBox .fieldBox2_illust > div:nth-child(7){
	animation-delay: 1.35s;
}
#quadBox .fieldBox2_illust > div:nth-child(8){
	animation-delay: 1.5s;
}


#quadBox .fieldBox2_links > a:nth-child(1){
	animation-delay: 1.65s;
}
#quadBox .fieldBox2_links > a:nth-child(2){
	animation-delay: 1.8s;
}
#quadBox .fieldBox2_links > a:nth-child(3){
	animation-delay: 1.95s;
}
#quadBox .fieldBox2_links > a:nth-child(4){
	animation-delay: 2.1s;
}


/******************************
 総合力
 ******************************/
#sec03 .card-outer{
	/*opacity:0;
	animation-delay: 0.3s;*/
}

#sec03 .card-outer .card{
	opacity:0;
	animation-delay: 1.5s;
}

#sec03 .card-outer.scon .card{
	animation-name: fadeInMotion;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

#sec03 .card-outer .card-bg{
	display:block;
	overflow:hidden;
	position:relative;
}

/*枠線演出*/
#sec03 .card-outer .card-bg > p{
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:#f3f2f0;
	transition: all 0.2s linear;
	transition-delay: 1.5s;
	opacity: 1.0;
}

#sec03 .card-outer .card-bg > p > span{
	display:block;
	overflow:hidden;
/*	background-color:#cccccc;*/
	background-color:#999;
	position:absolute;
	transition: all 0.2s linear;
}

/*上線*/
#sec03 .card-outer .card-bg > p > span:nth-child(1){
	width:100%;
	height:1px;
	top:0;
	left:-100%;
	transition-delay: 0.3s;
}

/*右線*/
#sec03 .card-outer .card-bg > p > span:nth-child(2){
	width:1px;
	height:100%;
	top:-100%;
	right:0;
	transition-delay: 0.5s;
}

/*下線*/
#sec03 .card-outer .card-bg > p > span:nth-child(3){
	width:100%;
	height:1px;
	bottom:0;
	left:100%;
	transition-delay: 0.7s;
}

/*左線*/
#sec03 .card-outer .card-bg > p > span:nth-child(4){
	width:1px;
	height:100%;
	top:100%;
	left:0;
	transition-delay: 0.9s;
}


#sec03 .card-outer.scon .card-bg > p{
	opacity:0.0;
}

#sec03 .card-outer.scon .card-bg > p > span:nth-child(1),
#sec03 .card-outer.scon .card-bg > p > span:nth-child(3){
	left:0;
}

#sec03 .card-outer.scon .card-bg > p > span:nth-child(2),
#sec03 .card-outer.scon .card-bg > p > span:nth-child(4){
	top:0;
}


@media screen and (max-width:767px) {

	#sec03 .card-outer .card-bg{
		padding-top:0;
	}

}



/******************************
 ソリューション
 ******************************/
#sec04 .card-box .card{
	opacity:0;
}

#sec04 .card-box .card:nth-child(1){
	animation-delay: 0.15s;
}
#sec04 .card-box .card:nth-child(2){
	animation-delay: 0.3s;
}
#sec04 .card-box .card:nth-child(3){
	animation-delay: 0.15s;
}
#sec04 .card-box .card:nth-child(4){
	animation-delay: 0.3s;
}

#sec04 .card-box .card.scon{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}


/******************************
 トータルエンジニアリング
 ******************************/

#sec05 h2+p.section-txt{
	opacity:0;
	animation-delay: 0.75s;
}

#sec05 h2.scon+p.section-txt{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 2.25s;
}

#sec05 .totalBox2 > div{
	opacity:0;
	animation-delay: 0.5s;
}

#sec05 .totalBox2.scon > div{
	animation-name: fadeInMotion;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
}

#sec05 .section-inner > p{
	opacity:0;
	animation-delay: 5.55s;
}

#sec05 .section-inner > p.scon{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}




#sec05 .totalBox2 div.total05{
	display:inline-block;
	overflow:hidden;
	animation-delay: 1.5s;
}

#sec05 .totalBox2 .total05 > img{
	position:absolute;
	top:0;
	left:0;
}

#sec05 .totalBox2.scon .total05 > img{
	animation-name: fadeInMotion;
	animation-duration: 1.75s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
}

/*
#sec05 .total05 > img:nth-child(1){
	
}
*/

#sec05 .total05 > img:nth-child(2){
	opacity:0;
	animation-delay: 2.5s;
}

#sec05 .total05 > img:nth-child(3){
	opacity:0;
	animation-delay: 3.25s;
}

#sec05 .total05 > img:nth-child(4){
	opacity:0;
	animation-delay: 4.0s;
}

#sec05 .total05 > img:nth-child(5){
	opacity:0;
	animation-delay: 4.75s;
}


@media screen and (max-width:767px) {

	#sec05 .totalBox2 > div:nth-child(1){
		opacity:0;
		animation-delay: 0.5s;
	}
	#sec05 .totalBox2 > div:nth-child(2){
		animation-delay: 1.0s;
	}
	#sec05 .totalBox2 > div:nth-child(3){
		animation-delay: 1.5s;
	}
	#sec05 .totalBox2 > div:nth-child(4){
		animation-delay: 2.0s;
	}
	#sec05 .totalBox2 > div:nth-child(5){
		animation-delay: 2.5s;
	}

}




/******************************
 SDGsへの貢献
 ******************************/

#sec06 h2+p.section-txt{
	opacity:0;
	animation-delay: 0.75s;
}

#sec06 h2.scon+p.section-txt{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 1.5s;
}

#sec06 ul.sdgs_links > li{
	opacity:0;
}
#sec06 ul.sdgs_links > li:nth-child(1){
	animation-delay: 0.15s;
}
#sec06 ul.sdgs_links > li:nth-child(2){
	animation-delay: 0.3s;
}
#sec06 ul.sdgs_links > li:nth-child(3){
	animation-delay: 0.45s;
}
#sec06 ul.sdgs_links > li:nth-child(4){
	animation-delay: 0.6s;
}

#sec06 ul.sdgs_links.scon > li{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}


#sec06 ul.sdgs_icon{
	opacity:0;
}
#sec06 ul.sdgs_icon.scon{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}


#sec06 .section-inner > p{
	opacity:0;
	animation-delay: 5.55s;
}

#sec06 .section-inner > p.scon{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}