@charset "UTF-8";

/*-------------------------
__service_common_style
-------------------------*/

#page .work_list{margin:80px calc(var(--pageSideMargin) * -1) 0;padding:80px var(--pageSideMargin);background-color:#f4f4f4;}
#page .work_list ul{display:flex;flex-wrap:wrap;margin:-20px 0 0;}
#page .work_list ul li{line-height:1.3;padding:18px 20px 18px 45px;box-sizing:border-box;border-radius:10px;background-color:#FFF;position:relative;}
#page .work_list ul li::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background-color:var(--colorBlue);position:absolute;top:25px;left:20px;}
#page .work_list ul li span{display:block;font-size:112.5%;font-weight:700;margin:0 0 5px;}
#page .work_list.row3 ul li{width:calc((100% - 80px)/3);margin:20px 40px 0 0;}
#page .work_list.row3 ul li:nth-child(3n){margin-right:0;}
#page .work_list.row2 ul li{width:calc((100% - 40px)/2);margin:20px 40px 0 0;}
#page .work_list.row2 ul li:nth-child(2n){margin-right:0;}
#page .other_services{margin:80px 0 0;}
#page .other_services .other_services_ttl{font-size:3em;margin:0 0 30px;}
#page .other_services .row{display:flex;flex-wrap:wrap;margin:-20px 0 0;}
#page .other_services .box{width:calc((100% - 90px) / 6);margin:20px 18px 0 0;}
#page .other_services .box:nth-child(6n){margin-right:0;}
#page .other_services .box a{text-decoration:none;}
#page .other_services .box .img{height:150px;overflow:hidden;box-sizing:border-box;border-radius:8px;}
#page .other_services .box .img img{width:100%;height:100%;object-fit:cover;}
#page .other_services .box .box_ttl{display:inline-block;font-size:1.6em;font-weight:700;line-height:1.5;margin:15px 0 0;padding:0 30px 0 0;color:var(--colorBlack);position:relative;}
#page .other_services .box .box_ttl .ic{display:inline-block;width:20px;height:20px;margin:0 0 0 10px;border-radius:50%;background-color:#FFF;box-shadow:0px 5px 10px 0px rgba(55,98,112,0.15);position:absolute;top:2px;right:0;}
#page .other_services .box .box_ttl .ic:before,
#page .other_services .box .box_ttl .ic::after{content:"";display:inline-block;width:1.5px;height:6px;margin:auto;border-radius:10px;background-color:var(--colorBlue);position:absolute;top:0;right:0;bottom:0;left:0;}
#page .other_services .box .box_ttl .ic::before{top:-3px;transform:rotate(-45deg);}
#page .other_services .box .box_ttl .ic::after{bottom:-3px;transform:rotate(45deg);}
#page .other_services.b01 .box:nth-child(1) .img,
#page .other_services.b02 .box:nth-child(2) .img,
#page .other_services.b03 .box:nth-child(3) .img,
#page .other_services.b04 .box:nth-child(4) .img,
#page .other_services.b05 .box:nth-child(5) .img,
#page .other_services.b06 .box:nth-child(6) .img{border:4px solid var(--colorBlue);}

@media screen and (min-width:768px) {
  #page .other_services .box a .img img{transition:transform 0.3s;}
  #page .other_services .box a:hover .img img{transform:scale(1.2);}
  #page .other_services .box a .box_ttl .ic{transition:transform 0.3s;}
  #page .other_services .box a:hover .box_ttl .ic{transform:translate(5px,0);}
}
@media screen and (max-width:1180px) {
  #page .other_services .other_services_ttl{font-size:2.8em;}
  #page .other_services .box .box_ttl{font-size:1.5em;}
}
@media screen and (max-width:980px) {
  #page .work_list{margin:60px calc(var(--pageSideMargin) * -1) 0;padding:60px var(--pageSideMargin);}
  #page .work_list ul li{padding:13px 15px 13px 40px;}
  #page .work_list ul li::before{top:21px;left:15px;}
  #page .work_list.row3 ul li{width:calc((100% - 60px)/3);margin:20px 30px 0 0;}
  #page .work_list.row2 ul li{width:calc((100% - 30px)/2);margin:20px 30px 0 0;}
  #page .other_services{margin:60px 0 0;}
  #page .other_services .box{width:calc((100% - 36px) / 3);}
  #page .other_services .box:nth-child(3n){margin-right:0;}
  #page .other_services .box .box_ttl{margin:10px 0 0;}
}
@media screen and (max-width:767px) {
  #page .work_list{margin:30px calc(var(--pageSideMargin) * -1) 0;padding:30px var(--pageSideMargin);}
  #page .work_list ul{margin:-15px 0 0;}
  #page .work_list ul li{padding:8px 10px 8px 30px;border-radius:6px;}
  #page .work_list ul li::before{width:6px;height:6px;top:14px;left:12px;}
  #page .work_list ul li span{margin:0 0 2px;}
  #page .work_list.row3 ul li{width:calc((100% - 15px)/2);margin:15px 15px 0 0;}
  #page .work_list.row3 ul li:nth-child(3n){margin-right:15px;}
  #page .work_list.row3 ul li:nth-child(2n){margin-right:0;}
  #page .work_list.row2 ul li{width:100%;margin:15px 0 0;}
  #page .other_services{margin:30px 0 0;}
  #page .other_services .other_services_ttl{font-size:2.3em;}
  #page .other_services .box{width:calc((100% - 15px) / 2);margin:20px 15px 0 0;}
  #page .other_services .box:nth-child(3n){margin-right:15px;}
  #page .other_services .box:nth-child(2n){margin-right:0;}
  #page .other_services .box .img{height:120px;}
  #page .other_services .box .box_ttl{font-size:1.3em;}
}