@charset "UTF-8";

#main .service_top{margin:0 0 -80px;overflow:hidden;}
#main .service_top ul{display:flex;flex-wrap:wrap;margin:0 -40px;}
#main .service_top ul li{width:calc(50% - 80px);margin:0 40px 80px;}
#main .service_top ul li .img{font-size:1px;line-height:0;margin:0 0 30px;border-radius:10px;overflow:hidden;}
#main .service_top ul li .img a{display:block;position:relative;}
#main .service_top ul li .img a::before{content:"";background-repeat: no-repeat;background-position: center center;height:180px;width:180px;position:absolute;left:50%;bottom:50%;opacity:0;transform:translate(-50%, 30%);transition:opacity .3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:15;}
#main .service_top ul li:first-child .img a::before{background-image:url(../images/service/infog01.svg);}
#main .service_top ul li:nth-child(2) .img a::before{background-image:url(../images/service/infog02.svg);}
#main .service_top ul li:nth-child(3) .img a::before{background-image:url(../images/service/infog03.svg);}
#main .service_top ul li:nth-child(4) .img a::before{background-image:url(../images/service/infog04.svg);}
#main .service_top ul li:nth-child(5) .img a::before{background-image:url(../images/service/infog05.svg);}
#main .service_top ul li:nth-child(6) .img a::before{background-image:url(../images/service/infog06.svg);}
#main .service_top ul li:nth-child(7) .img a::before{background-image:url(../images/service/infog07.svg);}
#main .service_top ul li:nth-child(8) .img a::before{background-image:url(../images/service/infog08.svg);}
@media screen and (min-width: 768px) {
  #main .service_top ul li .img a:hover::before{opacity:1;transform:translate(-50%, 50%);}
}
#main .service_top ul li .img a::after{content:"";display:block;height:100%;width:100%;border-radius:10px;position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%, -50%) scale(0.8);transition:opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);z-index:10;}
#main .service_top ul li:first-child .img a::after{background-color:#174ebb;}
#main .service_top ul li:nth-child(2) .img a::after{background-color:#f52b39;}
#main .service_top ul li:nth-child(3) .img a::after{background-color:#1eb55a;}
#main .service_top ul li:nth-child(4) .img a::after{background-color:#1caec5;}
#main .service_top ul li:nth-child(5) .img a::after{background-color:#b11f98;}
#main .service_top ul li:nth-child(6) .img a::after{background-color:#ecad19;}
#main .service_top ul li:nth-child(7) .img a::after{background-color:#1808a4;}
#main .service_top ul li:nth-child(8) .img a::after{background-color:#db5683;}
@media screen and (min-width: 768px) {
  #main .service_top ul li .img a:hover::after{opacity:1;transform:translate(-50%, -50%) scale(1);}
}
#main .service_top ul li .img a img{height:auto;width:100%;}

#main .service_top ul li .txt_box{padding:0 0 0 25px;border-left:5px solid;}
#main .service_top ul li:first-child .txt_box{border-color:#174ebb;}
#main .service_top ul li:nth-child(2) .txt_box{border-color:#f52b39;}
#main .service_top ul li:nth-child(3) .txt_box{border-color:#1eb55a;}
#main .service_top ul li:nth-child(4) .txt_box{border-color:#1caec5;}
#main .service_top ul li:nth-child(5) .txt_box{border-color:#b11f98;}
#main .service_top ul li:nth-child(6) .txt_box{border-color:#ecad19;}
#main .service_top ul li:nth-child(7) .txt_box{border-color:#1808a4;}
#main .service_top ul li:nth-child(8) .txt_box{border-color:#db5683;}
#main .service_top ul li .txt_box .ttl{font-size:30px;line-height:1.4;font-weight:700;text-align:left;margin:0 0 18px;}
#main .service_top ul li .txt_box .txt{font-size:20px;line-height:1.4;text-align:justify;}

@media (max-width: 1280px) {
  #main .service_top{margin:0 0 -6.25vw;}
  #main .service_top ul{margin:0 -3.125vw;}
  #main .service_top ul li{width:calc(50% - 6.25vw);margin:0 3.125vw 6.25vw;}
  #main .service_top ul li .img{margin:0 0 2.343vw;}
  #main .service_top ul li .img a::before{height:14.062vw;width:14.062vw;}
  #main .service_top ul li .txt_box{padding:0 0 0 1.953vw;border-left-width:0.39vw;}
  #main .service_top ul li .txt_box .ttl{font-size:2.343vw;margin:0 0 1.406vw;}
  #main .service_top ul li .txt_box .txt{font-size:1.562vw;}
}

@media screen and (max-width: 767px) {
  #main .service_top{margin:0 0 -40px;}
  #main .service_top ul{display:block;margin:0;}
  #main .service_top ul li{width:100%;margin:0 0 40px;}
  #main .service_top ul li .img{margin:0 0 15px;}
  #main .service_top ul li .txt_box{padding:0 0 0 15px;border-left-width:3px;}
  #main .service_top ul li .txt_box .ttl{font-size:14px;margin:0 0 6px;}
  #main .service_top ul li .txt_box .txt{font-size:12px;}
}