@charset "utf-8";
/* CSS Document */
#service h3{ text-align: center; margin: 0 0 85px;}
#service .box{ border: 1px #e5e5e5 solid; padding: 3.5%; border-radius: 5px; margin: 0 0 40px;}
#service .rowTit{ display: flex; align-items: center; margin: 0 0 20px;}
#service .rowTit .txtL{ width: 140px; min-width: 140px; font-size: 42px; margin-right: 30px; text-align: center; border-radius: 100%; line-height: 140px;}
#service .rowTit .tit{ font-size: 24px; line-height: 1.5;}

#service .inner{  display: flex; align-items: flex-start;}
#service .inner .img{ width: 46.9%; margin-right: 4.2%; position: relative;}

#service .list{ width: 48.8%; font-size: 16px;}
#service .list p{ display: flex; align-items: center; margin: 0 0 18px;}
#service .list span{ width: 72px; min-width: 72px; margin-right: 15px;}
#service .box2 .list p:last-of-type{ margin: 0;}

#service .col1{ color: #dd6b38;}
#service .col2{ color: #648c0b;}
#service .col3{ color: #45799f;}
#service .bg1{ background: #f8e1d7;}
#service .bg2{ background: #eff3e6;}
#service .bg3{ background: #ecf1f5;}

#main-cap{ margin-top: 100px;}

/* ============== Media =============== */

@media only screen and (max-width: 1080px){
	#service .list{ font-size: 14px;}
	#service .list span{ width: 50px; min-width: 50px;}	
	#service .rowTit .tit{ font-size: 22px;}
	#service .rowTit .txtL{ width: 120px; min-width: 120px; line-height: 120px; font-size: 38px;}
}
@media only screen and (max-width: 767px){
	#service .inner{ display: block;}
	#service .inner .img{ max-width: 470px; width: 100%; margin: 0 0 30px;}
	#service .list{ width: 100%;}
}
@media only screen and (max-width: 480px){
	#service .rowTit .txtL{ width: 20vw; min-width: 20vw; line-height: 20vw; font-size: 6.5vw; margin-right: 4vw;}
	#service .rowTit .tit{ font-size: 3.8vw;}
	#service .list{ font-size: 3.5vw;}
	#service .list span{ width: 11vw; min-width: 11vw; margin-right: 2vw;}
}