@charset 'utf-8';

.func {padding: 2em 1em 0;}
.func ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 3em;
    flex-wrap: wrap;
}

.func ul li {
    position: relative;
    height: 220px;
    border: 1px solid var(--color-grey);
    padding: 1.5em;
    border-radius: 1.5em;
}
.func ul li .num {
    float: left;
    padding: .5em 1em .5em 0;
    font-family: var(--point-font-family);
    border-right: 1px solid var(--color-grey);
}
.func ul li .no {
    position: absolute;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--color-main);
    color: var(--color-bak);
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -1em;
    left: -1em;
    box-shadow: var(--box-shadow);
}
.func ul li .no span {padding-top: .2em;}
.func ul li strong {font-size: 1.2em;}
.func ul li p {border-top: 1px solid var(--color-grey);padding-top: 1em;margin-top: .5em;}

@media all and (max-width: 768px) {
    .func ul {grid-template-columns: 1fr;}
    .func ul li {height: unset;}
}