@charset "utf-8";

@import "base_layout.css";
@import "common_parts.css";

.anim{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	transition: .8s;
}
.move{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.delay1{
	transition-delay: .1s;
}
.delay2{
	transition-delay: .2s;
}
.delay3{
	transition-delay: .3s;
}
.delay4{
	transition-delay: .4s;
}
.delay5{
	transition-delay: .5s;
}
.delay6{
	transition-delay: .6s;
}
.delay7{
	transition-delay: .7s;
}
@media screen and (max-width: 979px) {
.delay1,
.delay2,
.delay3,
.delay4,
.delay5,
.delay6,
.delay7{
	transition-delay: .1s;
}

#header .mainarea .delay1{
	transition-delay: .1s;
}
#header .mainarea .delay2{
	transition-delay: .2s;
}
#header .mainarea .delay3{
	transition-delay: .3s;
}
#header .mainarea .delay4{
	transition-delay: .4s;
}
}

@media screen and (max-width: 768px){
.delay1,
.delay2,
.delay3,
.delay4,
.delay5,
.delay6,
.delay7{
	transition-delay: 0;
}
#header .mainarea .delay1{
	transition-delay: .1s;
}
#header .mainarea .delay2{
	transition-delay: .2s;
}
#header .mainarea .delay3{
	transition-delay: .3s;
}
#header .mainarea .delay4{
	transition-delay: .4s;
}
}