@charset "utf-8";
/* CSS Document */
@media all and (min-width:641px) {
	div#portfolio{
		width: 1000px;
		height: auto;
		clear: both;
		margin: 0 auto 10%;
	}	
	ul.portList{
		width: 100%;
		padding-top: 3%;
		margin-left: 0.5%
	}
	ul.portList li{
		width: 24%;
		height: auto;
		float: left;
		margin-right: 1%;
		margin-bottom: 1%;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}
	ul.portList li:nth-child(4n){
		margin-right: 0;
	}
	ul.portList li img{
		width: 100%;
	}
	ul.portList li a img{
		transition: 0.5s ease;
	}
	ul.portList li a img:hover{
		opacity: 0.6;
	}
	
	ul.portList li p{
		text-align: center;
		font-size: 0.8vw;
		margin: 2% 0;
	}
	/* end index用 */
		
	@media screen and (max-width: 1000px){
		div#portfolio{
			width: 100%;
		}
		ul.portList{
			width: 98%;
			margin-left: 1%
		}
	}
	@media screen and (max-width: 850px){
		ul.portList li{
			width: 32%;
			margin:  0 2% 3% 0;
		}
		ul.portList li:nth-child(4n){
			margin-right: 2%;
		}
		ul.portList li:nth-child(3n){
			margin-right: 0;
		}
		ul.portList li p{
			font-size: 1.5vw;
		}
	}

}
/* css for SP 開始*/
@media screen and (max-width: 640px){
	div#portfolio{
		width: 100%;
		height: auto;
		clear: both;
		margin: 0 auto 10%;
	}
	ul.portList{
		width: 100%;
		padding-top: 3%;
		margin-left: 2%
	}
	ul.portList li{
		width: 46%;
		height: auto;
		float: left;
		margin-right: 4%;
		margin-bottom: 4%;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}
	ul.portList li:nth-child(2){
		margin-right: 0;
	}
	ul.portList li img{
		width: 100%;
	}
	ul.portList li p{
		text-align: center;
		font-size: 3vw;
		margin: 2% 0;
	}
	/* end index用 */
}