@charset "utf-8";

/* @group reset */
*{
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
}
img{vertical-align: middle;max-width: 100%;}


#lay2{
    margin-top: 80px;
}

#lay1{
    .news_box{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .fb-page{
        display: block;
        flex: 1;
        align-self: flex-start;
        margin-bottom: 20px;
    }
    .news_list{
        flex: 2;
        display: flex;
        margin: 20px auto;
        flex-wrap: wrap;
        gap: 20px;

        li{
            width: calc((100% - 20px) / 2);
            padding: 10px;

            h3{margin-bottom: 10px;}
            figure{
                border: 1px solid #ccc;
                img{width: 100%;}
            }
        }
    }
}

.classroom_list{
    display: flex;
    gap: 15px;
    margin: 20px auto;
    flex-wrap: wrap;
    li{
        width: calc((100% - 15px * 2) / 3);
        .titlenews{
            padding: 0;
            margin-bottom: 0.5em;
            font-size: 22px;
        }
        .button{
            margin: 1em auto 2em;
        }
    }
}


.movie_shop{
    display: flex;
    width: 100%;
    align-items: center;
    margin-top: 40px;
    background: #ffe5e5;

    .shop,.movie{
        width: 50%;
        padding: 2em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .shop{
    }
    .movie{
        background: #fdc9c9;
        iframe{
            aspect-ratio: 16/9;
        }
    }
}



@media (max-width: 781px) {

    #lay1{
        padding: 10px;
        .fb-page,.news_list{flex: 100%;}
        
    }

    .classroom_list{
        li{
            width: calc((100% - 15px) / 2);
            .titlenews{
                font-size: 16px;
            }
        }
    }

}

@media (max-width: 480px) {

    .classroom_list {
            li {
                width: 100%;
            }
        }

}