@charset "UTF-8";

/* ==============================
グループホーム
============================== */
.pagetitle_wrap {
    background: url(../img/group_home_img/pagetitle_bg.jpg) center center no-repeat;
    background-size: cover;
}

/*group_home_list-------------------*/
.group_home_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    &>li {
        width: 100%;
    }

    @media (width >=768px) {
        &>li {
            width: calc(50% - 15px);
        }
    }

}

.group_home_item {
    background: var(--bg-white);
    border-radius: var(--inner-radius);
    padding: 16px;

    @media (width >=768px) {
        padding: 30px;
    }
}
.group_home_tel{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    line-height: 1;
    background: var(--bg-color01);
    padding-block: 0.6em 1em;
    border-radius: var(--inner-radius);
    margin-bottom: 1em;
    gap: 8px;
    .tel-link{
        font-size: 2em;
        font-weight: 900;
        color: var(--maincolor);

    }
}

/*btn　-------------------*/
.group_home_btn {
    width: min(100%, 700px);
    margin-inline: auto;
    margin-top: 40px;

    &>a {
        text-align: left;
        padding-block: 1em;
        font-weight: 700;
        font-size: var(--font-l);
    }
}

/*step -------------------*/
.step{
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
    &>li{
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        align-items: center;
        justify-content: center;
        background: var(--bg-color01);
        border: 4px solid var(--maincolor);
        text-align: center;
        line-height: 1.2;
        font-weight: 900;
        color: var(--maincolor);
        aspect-ratio: 1;
        border-radius: 100vmax;
        position: relative;

        font-size:1.4rem;
        width: calc(100% / 3 - 20px);
        margin-right: 20px;

        .s_em{
            letter-spacing: -0.02em;
        }

        &.start{
            background: var(--subcolor);
        }

        &:not(:last-child){
            &::after{
                content: "";
                display: block;
                width: 22px;
                height: 22px;
                background: var(--maincolor);
                clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
                position: absolute;
                top: 50%;
                right:-22px;
                transform: translateY(-50%);
            }
        }

        &:last-child{
            background: var(--maincolor);
            color: var(--light-tx-color);
            font-size: 1.2em;
        }
    }

    @media (width >= 768px) {
        &>li{
            width: calc(25% - 40px);
            margin-right: 40px;
            font-size: var(--font-l);
            &:not(:last-child){
                &::after{
                    width: 36px;
                    height: 36px;
                    right:-38px;
                }
            }
        }
    }
    @media (width >= 992px) {
        &>li{
            width: calc(20% - 40px);
        }
    }
}