@charset "utf-8";
/* service */
.wrap.service .card-list ul {list-style: none; display: flex; flex-wrap: wrap; gap: 2vw;}
.wrap.service .card-list ul li {width: calc(50% - 1vw); padding: 3vw; background-color: #F2F4F7; border-radius: 1.56vw;}
.wrap.service .card-list ul li h4 {font-size: 20px; text-align: center;}
.wrap.service .card-list ul li .img {margin: 2vw auto 3vw;}
.wrap.service .card-list ul li .img img {max-width: 540px; margin: 0 auto;}
@media screen and (max-width:768px) {

    .wrap.service .card-list ul li {width: 100%;}
    .wrap.service .card-list ul li h4 {font-size: 18px;}
}
/* step */
.wrap.step {background-color: #F2F4F7; padding: 100px 0;}
.wrap.step .block {max-width: calc(1360px - 2vw); margin: 0 auto; padding: 0 2vw;}
.wrap.step .block  h3 {font-size: 24px; line-height: 1;}
.wrap.step .block  h3 span {font-size: 14px;}
.wrap.step .block .step-list {margin: 50px auto 0;}
.wrap.step .block .step-list ol {list-style: none; display: flex; flex-direction: column; gap: 50px;}
.wrap.step .block .step-list ol li {background-color: #fff; border-radius: 1.56vw; position: relative; counter-increment: mycounter;}
.wrap.step .block .step-list ol li::before {font-size: 50px; font-weight: bold; position: absolute; top: 1.5vw; left: 1.5vw; line-height: 1; color: #F2F4F7; content: counter(mycounter, decimal-leading-zero);}
.wrap.step .block .step-list ol li .step {display: flex; padding: 3.5vw 7vw;}
.wrap.step .block .step-list ol li .step .text {width: 50%;}
.wrap.step .block .step-list ol li .step .text h4 {font-size: 20px; border-bottom: 1px solid #2C3E50;}
.wrap.step .block .step-list ol li .step .text .subttl {font-size: 12px;}
.wrap.step .block .step-list ol li .step .text .detail {margin: 2vw auto 0;}
.wrap.step .block .step-list ol li .step .img {width: 50%; padding: 0 0 0 2vw;}
@media screen and (max-width:1080px) {
    .wrap.step .block .step-list ol li .step {display: block; padding: 70px 3vw;}
    .wrap.step .block .step-list ol li .step .text {width: 100%;}
    .wrap.step .block .step-list ol li .step .img {width: 100%; padding: 2vw 0 0 0;}
    .wrap.step .block .step-list ol li .step .img img {max-width: 540px; margin: 0 auto;}
}
@media screen and (max-width:768px) {
    .wrap.step .block h3 {font-size: 20px;}
    .wrap.step .block h3 span {font-size: 10px;}
    .wrap.step .block .step-list ol li .step .text h4 {font-size: 18px;}
}