@charset "utf-8";

/**
 *
 *  仕事を知る　トップページ
 *　works
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.works h3{
	margin-bottom: 40px;	
}
.works .txt-lead{
	margin-bottom: 210px;
}
.works li{
	position: relative;
	float: left;
	padding-bottom: 38px;			
}
.works li+li{
	margin-top: -145px;
	float: right;	
}
.works li a {
	color:#000;	
}
.works li h4{
	margin-bottom: 12px;
	font-size:172%;	
}
.works li .pic{
	width: 560px;
	height: 370px;
	overflow:hidden;	
}
.works li .pic img{
	transition: transform 0.5s;	
}
.works li a:hover .pic img{
	transform: scale(1.07);		
}
.works li .btn{
	position: absolute;
	right:-28px;
	bottom:0;
	width: 350px;
	height: 65px;
	padding-top: 25px;
	text-align:center;
	transition:.3s;	
}
.works li a:hover .btn {
	padding-left: 20px;	
}
.works li a:hover .btn:after{
	right:-42px;	
}

/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	
/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	.works h3{
		margin-bottom: 20px;	
	}
	.works .txt-lead{
		margin-bottom: 50px;
	}
	
	.works ul{
		width: 280px;
		margin: 0 auto;	
	}
	.works li{
		float: none;
		padding-bottom: 19px;			
	}
	.works li+li{
		margin-top: 0;
		float: none;	
	}
	.works li h4{
		margin-bottom: 8px;
		font-size:115%;	
	}
	.works li .pic{
		width: 280px;
		height: 185px;
	}
	.works li .btn{
		right:-5px;
		width: 175px;
		height: 32px;
		padding: 12px 0;
		text-align:center;
		transition:.3s;	
	}
	#Page .works li .btn img{
		width: auto;
		height: 11px;	
	}
	.works li a:hover .btn {
		padding-left: 10px;	
	}
	.works li a:hover .btn:after{
		content:url(../images/common/ico_arrow_s_sp.png);
		right:-12px;	
	}
	.works li a:hover .btn:after{
		right:-21px;
	}
	.works li a:hover .btn{
		padding-left: 10px;	
	}

}