/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}


/* ---------------------------------------- common */

#photos ul {
	display: flex;
	flex-wrap: wrap;
	 /* justify-content: center; */
}
#photos ul li {
	overflow: hidden;
	border: 4px var( --link-water ) solid;
}
#photos ul li a img {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#photos ul li a:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

@media (max-width:599px) {

	#photos {
		padding: 3em 0 0;
	}
	#photos ul li {
		width: 48%;
		margin: 0 4% 4% 0;
	}
	#photos ul li:nth-child( 2n + 2 ){
		margin: 0 0 4% 0;
	}

}

@media (min-width: 600px) and (max-width:959px) {

	#photos {
		padding: 4em 0 0;
	}
	#photos ul li {
		width: 31%;
		margin: 0 3.5% 3.5% 0;
	}
	#photos ul li:nth-child( 3n + 3 ){
		margin: 0 0 3.5% 0;
	}

}

@media (min-width: 960px) {

	#photos {
		padding: 5em 0 0;
	}
	#photos ul li {
		width: 22%;
		margin: 0 4% 4% 0;
	}
	#photos ul li:nth-child( 4n + 4 ){
		margin: 0 0 4% 0;
	}

}