@charset "utf-8";
/* CSS Document */

/* xxxxxxx.com */



#online-lesson {
    width: 100%;
    display: grid;
    gap: 20px 20px;
    padding-top: 20px;

    div {

        border-radius: 20px;

        a {
            text-align: center;
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    img {
        width: 100%;
        max-width: 280px;
        border-radius: 20px;
    }

    #beginner {
        /*
        background-image: url("../img_l/img-001.png");
        background-size: cover;
        */
    }
}

#face_a_face-lesson {
    display: grid;
    gap: 20px 20px;

    div {
        background: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        padding: 20px 10px;
    }

    p {
        font-size: 1.4em;
    }
}

/* Media Query Breakpoints: 576px - 768px - 992px - 1200px - 1400px */

/* ------------------------------ ◆ bootstrap media query (single) ◆ ---------------------------- */

/* ～576px */
@media (width < 576px) {}

/* 576～768px */
@media (576px <=width < 768px) {}

/* 768～992px */
@media (768px <=width < 992px) {}

/* 992～1200px */
@media (992px <=width < 1200px) {}

/* 1200～1400px */
@media (1200px <=width < 1400px) {}

/* 1400px～ */
@media (1400px <=width) {}


/* ------------------------------ ◆ bootstrap media query (multi-2) ◆ ---------------------------- */

/* ～768px */
@media (width < 768px) {
    #online-lesson {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 200px);
    }

    #face_a_face-lesson {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }
}

/* 576px～992px */
@media (576px <=width < 992px) {}

/* 768px～1200px */
@media (768px <=width < 1200px) {}

/* 992px～1400px */
@media (992px <=width < 1400px) {}

/* 1200px～ */
@media (1200px <=width) {}

/* ------------------------------ ◆ bootstrap media query (multi-3) ◆ ---------------------------- */

/* ～992px */
@media (width < 992px) {}

/* 576px～1200px */
@media (576px <=width < 1200px) {}

/* 768px～1400px */
@media (768px <=width < 1400px) {}

/* 992px～ */
@media (992px <=width) {
    .tab-content {
        height: 800px;
    }
}

/* ------------------------------ ◆ bootstrap media query (multi-4) ◆ ---------------------------- */

/* ～1200px */
@media (width < 1200px) {}

/* 576px～1400px */
@media (576px <=width < 1400px) {}

/* 768px～ */
@media (768px <=width) {
    #online-lesson {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 200px);
    }

    #face_a_face-lesson {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr auto;
    }
}

/* ------------------------------ ◆ bootstrap media query (multi-5) ◆ ---------------------------- */

/* ～1400px */
@media (width < 1400px) {}

/* 576px～ */
@media (576px <=width) {}