@charset "utf-8";

#clinicTop #imgWrap.clinic1 {background-image:url('/images/sub/clinictop-clinic1.png')} 
#clinicTop #imgWrap.clinic2 {background-image:url('/images/sub/clinictop-clinic2.png')} 
#clinicTop #imgWrap.clinic3 {background-image:url('/images/sub/clinictop-clinic3.png')} 
#clinicTop #imgWrap.clinic4 {background-image:url('/images/sub/clinictop-clinic4.png')} 
#clinicTop #imgWrap.clinic5 {background-image:url('/images/sub/clinictop-clinic5.png')} 
#clinicTop #imgWrap.clinic6 {background-image:url('/images/sub/clinictop-clinic6.png')}

#needWrap.clinic1 { background-image:url('/images/sub/need-clinic1.png'); }
#needWrap.clinic3 { background-image:url('/images/sub/need-clinic3.png'); }


.step2{display: flex; gap:20px;}
.step2 li{flex: 100%; background-color: #fff;}
.step2 li .img{position:relative;}
.step2 li .img .num {position:absolute;  padding:0 1.5em; line-height:40px;  font-size:1.4rem; color:#fff; background:#61c0d6; left:50%; bottom:-20px;  transform:translateX(-50%); border-radius:5px; font-family: 'Montserrat', sans-serif; font-weight:600}
.step2 li .img img{width: 100%;}
.step2 li .txt{ padding:50px 2em 2em; ; text-align: center;}
.step2 li .txt h3{color: #000; font-size: 2.4rem; margin-bottom: 15px;}
.step2 li .txt p{font-size: 1.6rem; line-height: 1.6em; word-break: keep-all; color: #666;}

@media all and (max-width:976px){
	.step2{flex-wrap: wrap;}
	.step2 li{flex:calc(50% - 20px / 2);}
	.step2 li .txt{padding: 25px 15px;}
	.step2 li .txt h3{font-size: 2.1rem; margin-bottom: 10px;}
}
@media all and (max-width:640px){
	.step2 li .txt{padding: 20px 12px;}
	.step2{gap:10px;}
}
@media all and (max-width:480px){
	.step2 li .img .num { line-height:30px; }
	.step2 li .txt{ padding:35px 1em 1em; }
}