@charset "UTF-8";

.inner { max-width:960px;}

.art { padding:10px 0 40px 0; text-align: left;}
	.art h3 { display: block; padding:10px 0; font-size:18px; text-align: left; color:#333; border-bottom: 1px solid #999;}
		.art h3 span { white-space: nowrap; font-size:16px; font-weight: normal;}
			.art h3 span::before { content:"（";}
			.art h3 span::after { content:"）";}
	.arttext { padding: 10px 0; font-size:16px;}
	.artphoto { padding: 0;}
		.artphoto ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding:0 0 5px 0; list-style: none;}
			.artphoto ul::after { display: block; content:""; width: 32%; height: 1px; overflow: hidden;}
			.artphoto li { width:32%; box-sizing: border-box; padding:10px 0; font-size:14px; align-self: center;}
				.artphoto li a { text-decoration: none; opacity:1; }
					.artphoto li a:hover { color:#666; opacity:.6; }
				.artphoto li a span { display: block; width: 100%; height:320px; margin-bottom: 5px; background: no-repeat center center; background-size: cover; opacity: 1;}
					.artphoto li a:hover span {  opacity:.6; }

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

@media all and (min-width:640px) {
	/* 640px+ settings */
	ul.photo li { width:50%; max-width: 420px ;padding:0 10px;} 
}

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

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