@charset "UTF-8";
#title::before { display:block; width: 64px; height: 64px; content:url("../images/icon-news.svg"); margin: 0 auto;}

#newsnav {width: 100%; box-sizing: border-box; margin: 0 auto; padding: 2rem;}
	#newsnav a { display: inline-block; color:#FFF; text-decoration: none; opacity: 1; width: 7em; border-radius:1rem; padding:.25rem 0; text-align: center; font-size: .75rem;}
		#newsnav a:hover { opacity: .5;}
	#newsnav p { display: block; padding:.5rem 0; margin: 0;}
		#newsnav p a { background:#AAA;}
	#newsnav ul { display: flex; flex-wrap: wrap; padding:0; margin: 0; list-style: none;}
	#newsnav li { padding:.5rem 1rem .5rem 0; }
		#newsnav li:nth-of-type(1) a { background:#F00;}
		#newsnav li:nth-of-type(2) a { background:#F93;}
		#newsnav li:nth-of-type(3) a { background:#C6B1E0;}
		#newsnav li:nth-of-type(4) a { background:#EEB1E0;}
		#newsnav li:nth-of-type(5) a { background:#77B1E0;}
		#newsnav li:nth-of-type(6) a { background:#87D071;}
		#newsnav li:nth-of-type(7) a { background:#FFB900;}
		#newsnav li:nth-of-type(8) a { background:#A2BBAD;}

.arttitle { padding:3rem 0 0 0; margin-bottom: -1.5rem;}

.art { padding:2rem 1rem; }
	.art h3 { display:block; width: 100%; box-sizing:border-box; padding:.75rem 1rem; font-size: 1em; border-bottom:1px solid #CCC; font-weight: normal;}
		.art h3 span { display: block; font-size:.75rem;}
		.art h3::before { display:block; text-align: center; width: 6em; padding: .1rem 0; border-radius: .5rem; font-size:.5rem; color:#FFF; white-space: nowrap;}
			.cat101::before { content:"重要"; background:#F00;}
			.cat102::before { content:"全部門"; background:#F93;}
			.cat103::before { content:"社会人男子"; background:#C6B1E0;}
			.cat104::before { content:"社会人女子";background:#EEB1E0;}
			.cat105::before { content:"中学部";background:#77B1E0;}
			.cat106::before { content:"小学部";background:#87D071;}
			.cat107::before { content:"幼児部";background:#FFB900;}
			.cat108::before { content:"その他";background:#A2BBAD;}
	.arttext { padding: 1rem 1rem; font-size: 1rem;}
	.artphoto { padding:1rem 0;}
		.artphoto ul { width:100%; display: flex; flex-wrap: wrap; justify-content:flex-start; margin: 0; padding:1rem 0 1rem 0; list-style: none;}
			.artphoto li { display: block; box-sizing: border-box; padding:.5rem 1rem; margin: 0; font-size:1rem;}
				.artphoto li a img {width: 100%;}
	.download ul { padding:1rem; margin:0; list-style:none;}
		.download li { display:block; padding: .25rem 0 .25rem 30px; font-size:1rem; }
			.download li a {color:#333; text-decoration:underline;}
			.download li a:hover { color:#999; text-decoration:none;}
			.download li:before { display: block; width: 30px; height:28px; content:""; margin-left:-30px; float:left; background-position: left; background-repeat: no-repeat;background-size: contain;}
			li.pdf:before { background-image:url(../images/fileicons/pdf.png); }
			li.doc:before { background-image:url(../images/fileicons/doc.png);}
			li.xls:before { background-image:url(../images/fileicons/xls.png);}
			li.txt:before { background-image:url(../images/fileicons/txt.png);}
			li.jpg:before { background-image:url(../images/fileicons/jpg.png);}
			li.ppt:before { background-image:url(../images/fileicons/ppt.png);}

@media all and (min-width:320px){
	.artphoto li { width:100%; }
}

@media all and (min-width:640px){
	.artphoto li { width: calc(100% / 2);}
		.art h3 { padding-left:6rem;}
			.art h3::before { float: left; margin-left: -5rem;}
			.art h3 span { display: inline-block;}
}

@media all and (min-width:960px) {
	#newsnav { min-width:960px; max-width:1200px; }
	.artphoto li { width: calc(100% / 3);}
}