@charset "utf-8";

.inRead {
    padding: 0 0 13rem 0;
}

.indiviReadImg {
    width: 100%;
    max-width: 80rem;
    margin: 4rem auto 0;
}

.inReadTxtUl {
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 .4rem 0;
    border-bottom: .2rem solid var(--primary);
}

.indiviRecoBx {
    margin: 10rem 0 0;
    padding: 5rem 1.5rem 4rem;
    border: .3rem solid var(--black);
    border-radius: 2rem;
}

.indiviRecoIn {
    width: 100%;
    max-width: 112rem;
    margin: 0 auto;
}

.indiviRecoTit {
    text-align: center;
    padding: 0 0 .8rem 0;
    border-bottom: .3rem solid #FFF07E;
}

.indiviRecoGr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 4rem 2rem;
    width: 100%;
    max-width: 110rem;
    margin: 4.5rem 0 0;
}

.indiviRecoItem {
    width: 100%;
    height: 100%;
    max-width: 24rem;
}

.indiviRecoImg {
    width: 100%;
    max-width: 18rem;
    margin: 0 auto;
}

.indiviRecoTxt {
    margin: 2.5rem auto 0;
    text-align: center;
}

.indiviClassTit {
    display: flex;
    max-width: max-content;
    margin: 0 auto;
}

.indiviClassBx {
    margin: 9rem 0 0;
}

.indiviClassFl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
}

.indiviClassFl:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.indiviClassFl:nth-of-type(n+2) {
    margin: 4rem 0 0;
}

.indiviClassFlImg {
    width: 48%;
    max-width: 55rem;
}

.indiviClassFlTxtBx {
    width: 48%;
    max-width: 55rem;
}

.indiviClassFlTxtBxIn {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
}

.indiviClassFlNum {
    font-size: 2.2rem;
    line-height: 1.45;
    color: var(--primary);
}

.indiviClassFlTit {
    max-width: max-content;
    margin: .6rem 0 0;
    background: #FFF07E;
    padding: .3rem 1.5rem;
    line-height: 1.45;
    color: var(--primary);
}

.indiviClassFlTxt {
    margin: 4rem 0 0;
}

.indiviRecoBx {
    position: relative;
}

.indiviRecoBx:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    width: 5.6rem;
    height: 3.4rem;
    margin: auto;
    background: url(../../../../uploads/individual_hukidasi.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    display: block;
}



/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=768px) {

    .inRead {
        padding: 0 0 6rem 0;
    }

    .indiviReadImg {
        margin: 2rem auto 0;
    }

    .indiviRecoBx {
        margin: 5rem 0 0;
        padding: 3rem 1.5rem;
    }

    .indiviRecoGr {
        grid-template-columns: repeat(2, 1fr);
    }

    .indiviRecoTxt {
        margin: 1.5rem auto 0;
    }

    .indiviClassBx {
        margin: 4rem 0 0;
    }

    .indiviClassFl {
        flex-direction: column;
    }

    .indiviClassFl:nth-of-type(2n) {
        flex-direction: column;
    }

    .indiviClassFlImg {
        width: 100%;
    }

    .indiviClassFlTxtBx {
        width: 100%;
    }

    .indiviClassFlNum {
        font-size: 1.8rem;
    }

    .indiviClassFlTxt {
        margin: 2.5rem 0 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=576px) {

    .indiviRecoGr {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */