@charset "utf-8";



/*HEADER_OFF*/
.header_button_off .header_button > div:nth-child(4) { display:none; }
.header_button_off .header_button > div:nth-child(1) > span:nth-child(1),
.header_button_off .header_button > div:nth-child(2) > span:nth-child(1) { animation:header_button_off_1 3s ease-in-out infinite; }
@keyframes header_button_off_1 {
	0% { left:-100%; }
	20% { left:0; }
	100% { left:0; }
}
.header_button_off .header_button > div:nth-child(1) > span:nth-child(2),
.header_button_off .header_button > div:nth-child(2) > span:nth-child(2) { animation:header_button_off_2 3s ease-in-out infinite; }
@keyframes header_button_off_2 {
	0% { top:-100%; }
	20% { top:-100%; }
	40% { top:0; }
	100% { top:0; }
}
.header_button_off .header_button > div:nth-child(1) { animation:header_button_off_3 3s ease-in-out infinite; }
@keyframes header_button_off_3 {
	0% { opacity:0; transform:rotate(0deg); }
	20% { opacity:0; transform:rotate(0deg); }
	40% { opacity:0; transform:rotate(0deg); }
	60% { opacity:1; transform:rotate(-45deg); }
	100% { opacity:1; transform:rotate(-45deg); }
}
.header_button_off .header_button > div:nth-child(3) { animation:header_button_off_4 3s ease-in-out infinite; }
@keyframes header_button_off_4 {
	0% { transform:scale(3); }
	5% { transform:scale(0); }
	70% { transform:scale(0); }
	90% { transform:scale(3); }
	100% { transform:scale(3); }
}



/*HEADER_HOVER*/
.header_button_off .header_button_on > div:nth-child(1),
.header_button_off .header_button_on > div:nth-child(2),
.header_button_off .header_button_on > div:nth-child(3) { display:none; }
.header_button_off .header_button_on > div:nth-child(4) { display:block; }
.header_button_off .header_button_on > div:nth-child(4) > span:nth-child(1) { animation:header_button_hover_1 0.25s linear forwards; }
@keyframes header_button_hover_1 {
	0% { margin:-1px 0 0 0; }
	100% { margin:-12px 0 0 0; }
}
.header_button_off .header_button_on > div:nth-child(4) > span:nth-child(2) { animation:header_button_hover_2 0.25s linear forwards; }
@keyframes header_button_hover_2 {
	0% { margin:-1px 0 0 0; }
	100% { margin:-1px 0 0 10px; }
}
.header_button_off .header_button_on > div:nth-child(4) > span:nth-child(3) { animation:header_button_hover_3 0.25s linear forwards; }
@keyframes header_button_hover_3 {
	0% { margin:-1px 0 0 0; }
	100% { margin:10px 0 0 0; }
}



/*HEADER_ON*/
.header_button_on .header_button > div:nth-child(1),
.header_button_on .header_button > div:nth-child(2),
.header_button_on .header_button > div:nth-child(3) { display:none; }
.header_button_on .header_button > div:nth-child(4) { display:block; width:33px; height:33px; top:4px; left:4px; }
.header_button_on .header_button > div:nth-child(4) > span:nth-child(1) { animation:header_button_on_1 0.25s linear forwards; }
@keyframes header_button_on_1 {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(-45deg); }
}
.header_button_on .header_button > div:nth-child(4) > span:nth-child(2) { animation:header_button_on_2 0.25s linear forwards; }
@keyframes header_button_on_2 {
	0% { margin:-1px 0 0 0; opacity:1; }
	100% { margin:-1px 0 0 100%; opacity:0; }
}
.header_button_on .header_button > div:nth-child(4) > span:nth-child(3) { animation:header_button_on_3 0.25s linear forwards; }
@keyframes header_button_on_3 {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(45deg); }
}



/*HEADER_SCROLL*/
@media (min-width:641px){
	.header_scroll_on { animation:header_scroll_on 0.25s linear forwards; }
	@keyframes header_scroll_on {
		0% { height:150px; }
		100% { height:100px; }
	}
	.header_scroll_off { animation:header_scroll_off 0.25s linear forwards; }
	@keyframes header_scroll_off {
		0% { height:100px; }
		100% { height:150px; }
	}
}



/*MENU_LIST_HOVER*/
.menu_list p { transition:background-position 0.25s ease-in-out; }
.header .menu_list_on p { background-position:-100% 2px; }
.footer .menu_list_on p { background-position:-100% 3px; }
.contents_menu .menu_list_on p { background-position:-100% 1px; }
@media (max-width:640px){
	.header .menu_list_on p { background-position:-100% 4px; }
}



/*HOME_LIST_HOVER*/
.project_list p { transition:background-position 0.5s ease-in-out; }
.project_list_on.en0 .project_text { background-position:-99.75% 40px; }
.project_list_on.en1 .project_text { background-position:-99.75% 27px; }
.project_list_on.en2 .project_text { background-position:-99.75% 33px; }
.project_list_on.en3 .project_text { background-position:-99.75% 25px; }
@media (max-width:1024px){
	.project_list_on.en0 .project_text { background-position:-99.75% 37px; }
	.project_list_on.en1 .project_text { background-position:-99.75% 26px; }
	.project_list_on.en2 .project_text { background-position:-99.75% 31px; }
	.project_list_on.en3 .project_text { background-position:-99.75% 24px; }
}
@media (max-width:640px){
	.project_list_on.en0 .project_text { background-position:-99.75% 26px; }
	.project_list_on.en1 .project_text { background-position:-99.75% 14px; }
	.project_list_on.en2 .project_text { background-position:-99.75% 19px; }
	.project_list_on.en3 .project_text { background-position:-99.75% 14px; }
}
.project_list_on img { animation:project_img_on 0.25s linear forwards; }
@keyframes project_img_on {
	0% { opacity:0; }
	100% { opacity:1; }
}
.project_list_off img { animation:project_img_off 0.25s linear forwards; }
@keyframes project_img_off {
	0% { opacity:1; }
	100% { opacity:0; }
}
.project_list_on canvas { animation:project_cvs_on 0.25s linear forwards; }
@keyframes project_cvs_on {
	0% { opacity:1; }
	100% { opacity:0; }
}
.project_list_off canvas { animation:project_cvs_off 0.25s linear forwards; }
@keyframes project_cvs_off {
	0% { opacity:0; }
	100% { opacity:1; }
}



/*WORKS_LIST_HOVER*/
.works_list_on .works_list_img { animation:works_list_img_on 0.25s linear forwards; }
@keyframes works_list_img_on {
	0% { transform:scale(1.0); }
	100% { transform:scale(1.05); }
}
.works_list_off .works_list_img { animation:works_list_img_off 0.25s linear forwards; }
@keyframes works_list_img_off {
	0% { transform:scale(1.05); }
	100% { transform:scale(1.0); }
}
.works_list_on .works_list_frame { animation:works_list_frame_on 0.25s linear forwards; }
@keyframes works_list_frame_on {
	0% { transform:scale(1.2); opacity:0; }
	100% { transform:scale(1.0); opacity:1; }
}
.works_list_off .works_list_frame { animation:works_list_frame_off 0.25s linear forwards; }
@keyframes works_list_frame_off {
	0% { transform:scale(1.0); opacity:1; }
	100% { transform:scale(1.2); opacity:0; }
}



/*CONTENTS_CIRCLE_HOVER*/
.contents_circle_on { animation:contents_circle_on 0.25s linear forwards; }
@keyframes contents_circle_on {
	0% { transform:scale(1.1); }
	100% { transform:scale(1.0); }
}
.contents_circle_off { animation:contents_circle_off 0.25s linear forwards; }
@keyframes contents_circle_off {
	0% { transform:scale(1.0); }
	100% { transform:scale(1.1); }
}



/*CONTENTS_BUTTON_HOVER*/
.contents_button_on:before { animation:contents_button_on 0.25s linear forwards; }
@keyframes contents_button_on {
	0% { opacity:0; }
	100% { opacity:1; }
}
.contents_button_on p { color:#ffffff; }
.contents_button_off:before { animation:contents_button_off 0.25s linear forwards; }
@keyframes contents_button_off {
	0% { opacity:1; }
	100% { opacity:0; }
}



/*LEFT_BUTTON_HOVER*/
.left_button_on:before { animation:left_button_on 0.25s linear forwards; }
@keyframes left_button_on {
	0% { opacity:0; }
	100% { opacity:1; }
}
.left_button_on:after { opacity:1 !important; }
.left_button_on p { color:#ffffff !important; }
.left_button_off:before { animation:left_button_off 0.25s linear forwards; }
@keyframes left_button_off {
	0% { opacity:1; }
	100% { opacity:0; }
}