@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* CSS Document */
.topArea{
	position: relative;
	z-index: 5;
	height: 90vh;
	display: grid;
	align-items: center;
	justify-content: center;
	transition:opacity 1200ms 0.2s ease;
	opacity: 0;
	padding-top: 2em;

}
.action .topArea{
	opacity: 1;
}
.movie{
	position: relative;

	transition:opacity 1000ms 0.8s ease,transform 1000ms 0.8s ease-out;
	opacity: 0;
	padding: 2em 0;
	transform: translateY(1em);
}
.action .movie{
	opacity: 1;
	transform: translateY(0);
}
.announce{
	width: 75%;
	max-width: 600px;
	margin: 1em auto;
	padding: 0 2em 2em;
	transition:opacity 800ms 0.9s ease,transform 800ms 0.9s ease-out;
	opacity: 0;
	transform: translateY(1em);

}
.action .announce{
	opacity: 1;
	transform: translateY(0);
}
.creator{
	background: repeating-linear-gradient(rgba(159,17,202,0.14),rgba(112,51,165,0.14),rgba(159,17,202,0.14));
	padding: 2em 0; 
	text-align: center;
	transition:opacity 800ms 0.8s ease,transform 800ms 0.8s ease-out;
	opacity: 0;
	transform: translateY(1em);

}
.action .creator{
		opacity: 1;
	transform: translateY(0);
}
.creator h2{
	height: 3em;
	width: 100%;
	background-image: url("../img/h2.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.creatorList{
	padding: 1em 0 0;
}
.creatorList .box{
	padding: 1em 4em;
}
.follow{
	padding: 0.5em  0 5em 3em;
	width: 60%;
	max-width: 25em;
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-top: 1em;
	z-index: 5;
}
.follow:before{
	content: "";
	width: 100%;
	top:0;
	left: 1em;
	bottom: 4em;
	background: rgba(0,0,0,0.7);
	display: block;
	position: absolute;
	transform: skewX(-15deg);
}
.follow:after{
	content: "";
	width: 100%;
	top:auto;
	left: 0.3em;
	bottom: 4.5em;
	height: 2px;
	background: var(--purple);
	display: block;
	position: absolute;
	transform: skewX(-15deg);
}
.follow .box{
	position: relative;
	z-index: 2;
	
}
.follow .box .followImg{
	width: 55%;
	max-width: 10em;
	display: inline-block;
	vertical-align: middle;
	margin-right: 1.5em;
}
.follow .box a{
	width: 4em;
	display: inline-block;
	vertical-align: middle;
	background-color: var(--purple);
	padding: 0.5em;
	border-radius: 50%;
	transition:transform 200ms 0s ease-out;
}
.follow .box a:hover{
	transform: scale(0.9);
}
/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (min-width: 769px) {

/*	.topArea{
		min-height: 600px;
	}*/
}
@media (min-width: 1025px) {/*PC*/

	.topArea{
		height: 85vh;
	}
	.creator h2{
		height: 5em;
	}

	.creatorList{
		padding: 1em 0 0;
		display: grid;
		grid-template-areas:
		". a ."
		"b c d";
	}
	.creatorList .box:nth-child(1){grid-area: a;}
	.creatorList .box:nth-child(2){grid-area: b;}
	.creatorList .box:nth-child(3){grid-area: c;}
	.creatorList .box:nth-child(4){grid-area: d;}
	.creatorList .box{
		padding: 1em;
	}
}