@charset "utf-8";

.checkup-wrap {margin: 100px auto 0; max-width: 900px;}
.checkup-wrap ul {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; grid-row-gap: 60px;}
.checkup-wrap ul li {width: 100%; max-width: 280px; height: 280px; border-radius: 50%; text-align: center; padding: 30px 30px 57px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-color: rgba(11,133,239,0.1);}
.checkup-wrap ul li .num {font-size: 1.75em; font-weight: 700; color: var(--color-blue);}
.checkup-wrap ul li .txt {font-size: 1.25em; font-weight: 600;}

.checkup-etc {margin-top: 100px;}
.checkup-etc ul {display: flex; grid-column-gap: 20px;}
.checkup-etc ul li {width: 100%;}
.checkup-etc .checkup-btn {border-radius: 10px; background-color: #fff; border: 2px solid #000; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: 700;}
.checkup-etc .checkup-btn.blue {background-color: var(--color-blue); border: 2px solid var(--color-blue); color: #fff;}
.checkup-etc .checkup-btn.blue .ico-checkupPlus {margin-right: 9px;}


@media (max-width: 1100px) {
    .checkup-wrap {margin-top: 75px;}
    .checkup-wrap ul {grid-template-columns: repeat(2, 1fr); place-items: center;}

    .checkup-etc {margin-top: 60px;}
    .checkup-etc ul {flex-wrap: wrap; grid-row-gap: 20px;}
    .checkup-etc ul li {width: calc(50% - 10px);}
    .checkup-etc ul li:last-child {width: 100%;}
}

@media (max-width: 768px) {
    .checkup-wrap {margin-top: 50px;}
    .checkup-wrap ul {grid-template-columns: repeat(1, 1fr); grid-row-gap: 30px;}

    .checkup-etc ul {grid-column-gap: 0;}
    .checkup-etc ul li {width: 100%;}
    .checkup-etc .checkup-btn {height: 70px; font-size: 1.25em;}
}