@charset "UTF-8";

/* **************************************************

Name: interview01_animation.css

Create: 2021.07.30
Update: 2021.07.30

***************************************************** */

.scrollAnime { position: relative; }


@keyframes opacity100 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes bottom30 {
	from {
        bottom: -30px;
		opacity: 0;
	}
	to {
        bottom: 0;
		opacity: 1;
	}
}
@keyframes left50 {
	from {
        left: -50px;
		opacity: 0;
	}
	to {
        left: 0;
		opacity: 1;
	}
}


/* brandingBlockArea
----------------------------------------------------- */
#brandingBlockArea { opacity: 0; }
#brandingBlockArea.isShow {
	animation-name: opacity100;
	animation-duration: 0.6s;
	animation-delay: 0.0s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.brandingTextArea {
	opacity: 0;
	bottom: -30px;
}
.brandingTextArea.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}


/* brandingMember
----------------------------------------------------- */
#brandingMember ul li .memverCover {
	opacity: 0;
	bottom: -30px;
}
#brandingMember ul li .memverCover.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}


/* title
----------------------------------------------------- */
.scienceTitle {
	opacity: 0;
	bottom: -30px;
}
.scienceTitle.isShow,
.scienceTitle02.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}


/* scienceColumn
----------------------------------------------------- */
.scienceImgBox {
	opacity: 0;
	bottom: -30px;
}
.scienceImgBox.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.scienceText {
	opacity: 0;
	bottom: -30px;
}
.scienceText.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.scienceCol03.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}


/* collaborationArea
----------------------------------------------------- */
#collaborationArea { opacity: 0; }
#collaborationArea.isShow {
	animation-name: opacity100;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.tit01 {
	opacity: 0;
	bottom: -30px;
}
.tit01.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.collaborationBox h3 {
	opacity: 0;
	bottom: -30px;
}
.collaborationBox h3.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.collaborationBox p {
	opacity: 0;
	bottom: -30px;
}
.collaborationBox p.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.collaborationCol02 {
	opacity: 0;
	bottom: -30px;
}
.collaborationCol02.isShow {
	animation-name: bottom30;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}