/* CSS Document */

article{
	margin: 2% auto;
	padding: 3% 0;
	position: relative;
	max-width: 1600px;
}
article.worksglay{
	background: #f5f5f5;
}
.num{
	text-align: center;
	font-size: 5.0rem;
	letter-spacing: 0.05em;
	font-weight: bold;
	color: #377dc3;
	font-family: 'Questrial', sans-serif;
}
h3{
	background: url("../img/common/blueline_back.png");
	color: #fff;
	border-radius: 30px;
	padding: 8px;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 0 auto 2%;
	
}

h4{
	display: flex;
	align-items: center;
	margin: 2% 20px;
}
h4:before,
h4:after {
border-top: 3px solid #377dc2;
content: "";
flex-grow: 1;
}
h4:before {
margin-right: 1rem;
}
h4:after {
margin-left: 1rem;
}

.photo-list{
	margin: 3% auto;
}

.photo-list .item{
	width: 33.3333%;
	padding: 10px;
}
.photo-list .item:hover{
	opacity: 0.7;
}

.white-popup{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

@media only screen and (min-width:1px) and (max-width: 768px) {


h3{
	padding: 5px;
	
}
.photo-list .item{
	padding: 5px;
}
	
}
@media only screen and (min-width:1px) and (max-width: 480px) {
.photo-list .item{
	width: 50%;
	padding: 5px;
}
}