@charset "utf-8";





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




/* works
----------------------------------------------- */


.works {
margin: 0 auto 0 auto;
padding: 0 0 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.works-box{
	width: 90px;
	height: 90px;
}

.works-box img{
	width: 90px;
	height: 90px;	
}









#slide{
	width:100%;
	margin:0 0 25px 0;
}


.works-note{
	text-align: left;
	margin: 45px 0 45px 0;
}


.back-to-works{
font-size:15px;
margin: 24px 0 24px 0;
padding: 0 0 0 0 ;
}

/*======================================

	slider
	
========================================*/
#slide{
	width:100%;
	height: auto;
	margin:0px auto 10px auto;
	padding: 0 0 0 0;
	position:relative;
	overflow: hidden;
}


.slide-box{
	margin: 0 0px 0 0px;
}

.slide-box img{
	height: 220px;
	margin: 0 12px 0 12px;
}



}/*//end  min-width: 481px ///////////////////////*/











@media only screen and (min-width: 481px) {



/* works
----------------------------------------------- */


.works {
margin: 0 0 0 0;
padding: 0 0 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.works-box{
	width: 120px;
	height: 120px;
}

.works-box img{
	width: 120px;
	height: 120px;
	transition: 0.3s;
	
}

.works-box img:hover{
	opacity: 0.7;
}








#slide{
	width:100%;
	margin:0 0 25px 0;
}


.works-note{
	text-align: left;
	margin: 45px 0 45px 0;
}


.back-to-works{
font-size:15px;
margin: 24px 0 24px 0;
padding: 0 0 0 0 ;
}



/*======================================

	slider
	
========================================*/
#slide{
	width:660px;
	height: auto;
	margin:0px auto 10px auto;
	padding: 0 0 0 0;
	position:relative;
	overflow: hidden;
}


.slide-box{
	margin: 0 0 0 0;
}

.slide-box img{
	height: 330px;
	margin: 0 9px 0 9px;
}






}/*//end  min-width: 769px ///////////////////////*/