.service{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 30px;
}
.service .service__item{

color: #222;
}

.service .service__imgwrap{
	position: relative;
}
.service__imgtxt{
	position: absolute;
	right : 7px;
	bottom : 7px;
	color : #fff;
	font-weight: bold;
	text-shadow: 1px 1px 2px black;
	font-size : 1.4rem;
}

.service .service__img{
	height : 346px;
	object-fit: cover;
    box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 10%);
}

.service .service__ttl{
  font-size : 2rem;
  margin-top:12px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.service .service__con{
  
}

@media all and ( min-width: 768px) and ( max-width: 1024px) {
.service{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service .service__item{

}
.service .service__imgwrap{
	
}
.service .service__img{
}
.service .service__ttl{
}
.service .service__con{  
}
}
@media all and ( max-width: 767px) {
.service{
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.service .service__item{

}
.service .service__imgwrap{
	
}
.service .service__img{
    width : 100%;
}
.service .service__ttl{
}
.service .service__con{
  
}
}