@charset "utf-8";


/*--------------------------------------------------------------
    未来創造教室事業
  --------------------------------------------------------------*/

#school .titlearea {
    width: 80%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 3rem;
    margin: 0;
    padding: 0;
    margin-top: 120px;

    background-position: center 70%;
}

#school .textarea {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#school h1.textarea {
    color: #fff;
    text-shadow: 2px 2px 10px rgb(var(--ronri-color) / 1.0),
        -2px 2px 10px rgb(var(--ronri-color) / 1.0),
        2px -2px 10px rgb(var(--ronri-color) / 1.0),
        -2px -2px 10px rgb(var(--ronri-color) / 1.0);
}



#school-about {
    margin: 0;
    padding: 0;
}

#school-about h3,
#school-about h3>* {
    margin: 0;
    padding: 2rem 0 3rem 0;
    font-size: clamp(1.8rem, 2.0vw, 3.0rem);
    line-height: 1.2;
    font-weight: 400;
}

#school-about h3>strong {
    font-weight: 600;
}

#school-about p {
    font-size: 1.2rem;
    line-height: 2;
}

#school-about .school-grid-a {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
}

#school-about .school-grid-b {
    margin: 0;
    padding: 0;
    display: block;
}

#school-about .school-grid-b>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#school-about .school-grid-b>div:first-child {
    margin: 0;
    padding: 1rem;
    width: 100%;
    background-color: rgb(var(--ronri-color) / 1.0);
}

#school-about .school-grid-b>div:last-child {
    margin: 0;
    padding: 1rem;
    width: 100%;
    background-color: rgb(var(--taiso-color) / 1.0);
}

#school-about .school-grid-b h3,
#school-about .school-grid-b h3>* {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1.6rem, 1.8vw, 2.8rem);
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
}

#school-about .school-grid-b h4,
#school-about .school-grid-b h4>* {
    display: inline-block;
    margin: 0.5rem 0 0.5rem 0;
    padding: 0.2rem 1rem 0.2rem 1rem;
    color: #fff;
    font-size: clamp(0.8rem, 1.0vw, 1.8rem);
    line-height: 1.2;
    font-weight: 400;
    border: 1px solid #fff;
}

#school-about .school-grid-b h5,
#school-about .school-grid-b h5>* {
    margin: 0 0 0.5rem 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1.0rem, 1.2vw, 2rem);
    line-height: 1.2;
    font-weight: 400;
}

#school-about .school-grid-b .black,
#school-about .school-grid-b .black>* {
    color: #000;
}

#school-about .school-grid-b h4.black {
    border-color: #000;
}

#school-about .school-grid-c {
    display: grid;
    justify-content: center;
    align-items: stretch;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
}

#school-about .school-grid-c {
    flex: 1;
}

@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */
    #school .titlearea {
        width: 100%;
        border-radius: 0;
    }

    #school-about .school-grid-a {
        grid-template-columns: 1fr;
    }

    #school-about .school-grid-c {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    /* md の画面サイズの場合のスタイル */
    #school .titlearea {
        width: 100%;
        border-radius: 0;
    }

    #school-about .school-grid-a {
        grid-template-columns: 1fr;
    }

    #school-about .school-grid-c {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    /* lg 以上の画面サイズの場合のスタイル */
}

/*--------------------------------------------------------------
    未来創造教室事業
  --------------------------------------------------------------*/

#school-about .school-ronri {
    background-color: rgb(var(--ronri-color) / 1.0);
    border-radius: 1rem;
}

#school-about .school-taiso {
    background-color: rgb(var(--taiso-color) / 1.0);
    border-radius: 1rem;
}

/* ろんり教室 */
#school-about .school-ronri a {
    color: #fff;
    text-decoration: none;
}

#school-about .school-ronri>span {
    margin: 0;
    padding: 0.5rem;

    z-index: 10;
    display: block;
    position: absolute;
    font-size: 3rem;
    padding: 0.5rem;
    color: #fff;
    border-radius: 2rem;
    transform: translate(-1rem, -2rem);

    background-color: rgb(var(--ronri-color) / 1.0);
}

#school-about .school-ronri a div:first-child {
    width: 100%;
    height: 200px;
    border-radius: 1rem 1rem 0 0;
}

#school-about .school-ronri a div:last-child {
    width: 100%;

    margin: 0;
    padding: 1rem;
}

#school-about .school-ronri h5 {
    margin: 0;
    padding: 0 0 1rem 0;
    color: #fff;
}

#school-about .school-ronri p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.2;
}

/* たいそう教室 */
#school-about .school-taiso a {
    color: #fff;
    text-decoration: none;
}

#school-about .school-taiso>span {
    margin: 0;
    padding: 0.5rem;

    z-index: 10;
    display: block;
    position: absolute;
    font-size: 3rem;
    padding: 0.5rem;
    color: #fff;
    border-radius: 2rem;
    transform: translate(-1rem, -2rem);

    background-color: rgb(var(--taiso-color) / 1.0);
}

#school-about .school-taiso a div:first-child {
    width: 100%;
    height: 200px;
    border-radius: 1rem 1rem 0 0;
}

#school-about .school-taiso a div:last-child {
    width: 100%;

    margin: 0;
    padding: 1rem;
}

#school-about .school-taiso h5 {
    margin: 0;
    padding: 0 0 1rem 0;
}

#school-about .school-taiso p {
    font-size: 1rem;
    line-height: 1.2;
}