@charset "utf-8";


#service {}
#service .inner-sct { padding: 80px 0 150px;}
#service ul { width: 90%; max-width: 1200px; margin: 0 auto; font-size: 0; text-align: center;}
#service ul li { display: inline-block; width: 25%; padding: 18px; font-size: 24px; font-size: min(1.45vw,24px);}
#service ul li a { display: block; width: 100%; margin: 0 auto; padding: 20px 20px 30px; border: solid 2px #333; box-shadow: 5px 5px 0 #333;
 color: #000; font-weight: 700; text-decoration: none;}
#service ul li a dl dt { position: relative; width: 100%; margin-bottom: 15px; padding-top: 100%; text-align: center;}
#service ul li a dl dt img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; transition: 0.3s ease;}
#service ul li a dl dd span { display: block;}
#service ul li a:hover dl { opacity: 0.8;}
#service ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}
@media (max-width: 801px) {
	#service ul li { width: 33%; padding: 12px; font-size: 2.4vw;}
}
@media (max-width: 641px) {
	#service ul li { width: 50%;}
}
@media (max-width: 481px) {
	#service .inner-sct { padding: 32px 0 80px;}
	#service ul li { padding: 8px; font-size: 16px;}
	#service ul li a { padding: 16px 10px 18px; border-width: 1px; box-shadow: 3px 3px 0 #333;}
	#service ul li a dl dt { margin-bottom: 8px; padding-top: 85%;}
}