@charset "utf-8";





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



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


#works {
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}

#works-left {
margin: auto;
padding: 0 0 0 0;
width:100%;
text-align: left;
float:left;
background: transparent  ;
}

#works-right {
margin: auto;
padding: 0 0 0 0;
width:100%;
text-align: left;
float:right;
background: transparent  ;
}


.works-thum {
width:20%;
margin: 0px 0 0 0px  ;
padding: 0 0 0 0  ;
float:left;
background-color: #ddd ;
text-align:center middle;
}

.works-thum img{
	width:100%;
	height: auto;
}


.works-detail-navi {
width:660px;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
margin: 16px 0 16px 0;
padding: 4px 0 4px 0 ;
text-align: right;
font-size:12px;
background: #efefef; 
color:#ff3300;
}

.works-detail-navi ul{
background: transparent; 
padding: auto ;
margin: auto;
}

.works-detail-navi li{
display:inline;
list-style:none ;
background: transparent; 
padding: 0 0 0 0 ;
margin: 0 4px 0 0 ;
}

.works-detail-navi li .now{
display:inline;
list-style:none ;
background: transparent; 
padding: 0 0 0 0 ;
margin: 0 4px 0 0 ;
font-color:#99cc00;
}


.back-to-works{
font-size:12px;
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 ///////////////////////*/