@charset "UTF-8";

*.clsPhotoBox { text-align : center ; }

*.clsPhotoBody { width : 100% ; }


/* For PC or Tablet */
@media screen and ( min-width : 481px )
{
    *.clsLectureGrid
    {
        display               : grid ;
        grid-template-columns : 32% 32% 32% ;
        grid-template-rows    : auto auto ;
        grid-column-gap       : 2% ;
        grid-row-gap          : 1em ;
        padding               : 0 0 1em 0 ;
    }

    *.clsLectureBox
    {
        padding          : 0 0.5em 0 0.5em ;
        background-color : transparent /* lightyellow */ ;
    }

    *.clsTitleBox
    {
        padding          : 0 0.5em 0.5em 0.5em ;
        background-color : transparent /* lightcyan */ ;
}

    *.clsLectureBox1 { grid-area : 1 / 1 / span 1 / span 1 ; }
    *.clsLectureBox2 { grid-area : 1 / 2 / span 1 / span 1 ; }
    *.clsLectureBox3 { grid-area : 1 / 3 / span 1 / span 1 ; }
    *.clsLectureBox4 { grid-area : 2 / 1 / span 1 / span 1 ; }
    *.clsLectureBox5 { grid-area : 2 / 2 / span 1 / span 1 ; }
    *.clsLectureBox6 { grid-area : 2 / 3 / span 1 / span 1 ; }
}


/* For Smartphone */
@media screen and ( max-width : 480px )
{
    h1 { font-size : large ; }

    *.clsLectureGrid
    {
        display               : grid ;
        grid-template-columns : 50% 50% ;
        grid-template-rows    : auto auto auto ;
        grid-row-gap          : 1em ;
        padding               : 0 0 1em 0 ;
    }

    *.clsLectureBox
    {
        padding          : 0 0.5em 0 0.5em ;
        background-color : transparent /* lightyellow */ ;
    }

    *.clsLectureBox1 { grid-area : 1 / 1 / span 1 / span 1 ; }
    *.clsLectureBox2 { grid-area : 1 / 2 / span 1 / span 1 ; }
    *.clsLectureBox3 { grid-area : 2 / 1 / span 1 / span 1 ; }
    *.clsLectureBox4 { grid-area : 2 / 2 / span 1 / span 1 ; }
    *.clsLectureBox5 { grid-area : 3 / 1 / span 1 / span 1 ; }
    *.clsLectureBox6 { grid-area : 3 / 2 / span 1 / span 1 ; }
}