@charset "utf-8";

.ttlWrap{gap: 10px;}
.ttlWrap .linkArea{margin: 0 auto; width: 100%;}

h2.ttl span{font-size: 50%;}

/* materials */
#materials{
	position: relative;
	padding: 20px 0 40px 0;
}
#materials ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 960px;
	gap: 20px 10px;
}
#materials ul li{
	position: relative;
	margin: 0;
	width: calc(33.333% - 7px);
	max-width: 240px;
	text-align: center;
	font-size: 80%;
	line-height: 1.2em;
}
#materials ul li a{
	position: relative;
	margin: 0 auto 0.5em auto;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
#materials ul li img{
	position: relative;
	margin: 0 auto;
	display: block;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	.ttlWrap{gap: 0;}
	.ttlWrap .linkArea{margin: 0; width: auto;}
	
	/* materials */
	#materials{padding: 40px 0 90px 0;}
	#materials ul{gap: 40px 20px;}
	#materials ul li{
		width: calc(33.333% - 10px);
		max-width: 220px;
		font-size: 100%;
	}
	#materials ul li a img:hover{transform: scale(1.05, 1.05);transition: all .3s ease-out;}
	

}