@charset "UTF-8";
#title h1::before {content:url("images/title.png");}

h2.title { padding:0 0 10px 0; font-size:20px; text-align: left; border-bottom: 1px solid #333;}

.intro {padding:10px 0; text-align: left; max-width:960px;margin: 0 auto; }
	.intro p { padding:10px 0; font-size:16px;}

.works { padding:0 0 20px 0; text-align: left; max-width:960px;margin: 0 auto;}
	.works h3 { padding:40px 0 5px 0; font-size:16px; }
	.works h3 strong { display: inline-block; padding: 5px 10px; background:#F2F2F2;}

.photo { width: 100%; padding:10px 0; margin: 0; list-style: none;}
	.photo li { padding: 10px 0; font-size:14px;}
		.photo li a { color:#333; text-decoration: none; opacity: 1;}
			.photo li a:hover {opacity: .6;}
		.photo li a img { padding-bottom: 4px;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	.photo { display: block;}
		.photo li { display: block; width: 100%;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.photo { display: flex; flex-wrap: wrap; justify-content: space-between;}
		.photo li { display: block; width: 48%; }
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.photo li { display: block; width: 32%; }
	.photo::after { display: block; content:""; height: 1px; width: 32%; overflow: hidden;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}