@charset "UTF-8";


*.clsHeader
{
    font-family  : "MS Gothic", "Osaka-Mono", monospace ;
    font-style   : normal ;
    font-variant : normal ;
    font-weight  : bold ;
    font-stretch : normal ;
    font-size    : large ;
    text-align   : center ;
    padding      : 1.5em 0 0.5em 0 ;
}

*.clsSubHdr
{
    text-align : center ;
    padding    : 0 0 0.5em 0 ;
}

#idTblItems
{
    background-color : transparent /* lavender */ ;
}

*.clsItemNam
{
    font-family  : "MS Gothic", "Osaka-Mono", monospace ;
    border-style : none ;
    border-width : thin ;
    border-color : blue ;
}

*.clsItemVal
{
    padding      : 0 0 0.5rem 0 ;
    border-style : none ;
    border-width : thin ;
    border-color : blue ;
}

#idTblSub1
{
    width            : 100% ;
    margin-top       : 10px ;
    background-color : transparent /* pink */ ;
}

#colNamSub1
{
    width : 3.0em ;
}


/* For PC or Tablet */
@media screen and ( min-width : 481px )
{
    #colSchNameM { width :  4.5em ; }
    #colSchNameS { width :  3.5em ; }
    #colSchValue { width : 20.0em ; }

    #colEntName  { width :  3.5em ; }
    #colEntValue { width : 37.5em ; }

    *.clsTitlesArea
    {
        width                 : 48em ;
        margin                : auto ;
        display               : grid ;
        grid-template-columns : 1.0em auto 18.0em ;
        grid-template-rows    : auto auto ;
        background-color      : transparent /* yellow */ ;
    }

    *.clsMark1   { grid-area :  1 / 1 / span 1 / span 1 ; }
    *.clsTitle1  { grid-area :  1 / 2 / span 1 / span 1 ; }
    *.clsAuthor1 { grid-area :  1 / 3 / span 1 / span 1 ; }
    *.clsMark2   { grid-area :  1 / 1 / span 2 / span 1 ; }
    *.clsNote    { grid-area :  1 / 2 / span 1 / span 2 ; }
    *.clsTitle2  { grid-area :  2 / 2 / span 1 / span 1 ; }
    *.clsAuthor2 { grid-area :  2 / 3 / span 1 / span 1 ; }

    *.clsAuthor
    {
        padding : 0 0 1.0em 0 ;
    }

    *.clsAccsGuide
    {
        margin : auto ;
    }

    *.clsAccsGuideA
    {
        width                 : 31.5em ;
        display               : grid ;
        grid-template-columns : 5em 2em 2em auto ;
        grid-template-rows    : auto auto auto auto auto ;
        padding               : 0 0 0.5em 0 ;
        background-color      : transparent /* wheat */ ;
    }

    *.clsAccsItemA  { grid-area :  1 / 1 / span 1 / span 1 ; }
    *.clsAccsValA1  { grid-area :  1 / 2 / span 1 / span 3 ; }
    *.clsAccsNoteA1 { grid-area :  2 / 3 / span 1 / span 2 ; }
    *.clsAccsValA2  { grid-area :  3 / 2 / span 1 / span 3 ; padding-top : 0.5em ; }
    *.clsAccsNoteA2 { grid-area :  4 / 3 / span 1 / span 2 ; }
    *.clsAccsMarkA3 { grid-area :  5 / 3 / span 1 / span 1 ; }
    *.clsAccsNoteA3 { grid-area :  5 / 4 / span 1 / span 1 ; }

    *.clsAccsGuideB
    {
        width                 : 31.5em ;
        display               : grid ;
        grid-template-columns : 10em 5.5em auto ;
        grid-template-rows    : auto auto auto ;
        row-gap               : 0.5em ;
        padding               : 0 0 1em 0 ;
        background-color      : transparent /* lightgreen */ ;
    }

    *.clsAccsItemB  { grid-area :  1 / 1 / span 1 / span 1 ; }
    *.clsAccsValB11 { grid-area :  1 / 2 / span 1 / span 1 ; }
    *.clsAccsValB12 { grid-area :  1 / 3 / span 1 / span 1 ; }
    *.clsAccsValB21 { grid-area :  2 / 2 / span 1 / span 1 ; }
    *.clsAccsValB22 { grid-area :  2 / 3 / span 1 / span 1 ; }
    *.clsAccsValB31 { grid-area :  3 / 2 / span 1 / span 1 ; }
    *.clsAccsValB32 { grid-area :  3 / 3 / span 1 / span 1 ; }

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


/* For Smartphone */
@media screen and ( max-width : 480px )
{
    #idTblItems
    {
        width :  98% ;
    }

    #colSchNameM { width :  4.0em ; }
    #colSchNameS { width :  3.25em ; }

    *.clsTblDesc
    {
        width : 98% ;
    }

    #colCntName  { width :  3.5em ; }

    #colEntName  { width :  3.5em ; }

    *.clsTitlesArea
    {
        width                 : 95% ;
        margin                : auto ;
        display               : grid ;
        grid-template-columns : 1.0em auto ;
        grid-template-rows    : auto auto auto  ;
        background-color      : transparent /* yellow */ ;
    }

    *.clsMark1   { grid-area :  1 / 1 / span 2 / span 1 ; }
    *.clsTitle1  { grid-area :  1 / 2 / span 1 / span 1 ; }
    *.clsAuthor1 { grid-area :  2 / 2 / span 1 / span 1 ; }
    *.clsMark2   { grid-area :  1 / 1 / span 3 / span 1 ; }
    *.clsNote    { grid-area :  1 / 2 / span 1 / span 1 ; }
    *.clsTitle2  { grid-area :  2 / 2 / span 1 / span 1 ; }
    *.clsAuthor2 { grid-area :  3 / 2 / span 1 / span 1 ; }

    *.clsAuthor
    {
        padding : 0 0 1.0em 3.0em ;
    }

    *.clsAccsGuide
    {
        width   : 98% ;
        margin  : auto ;
    }

    *.clsAccsGuideA
    {
        display               : grid ;
        grid-template-columns : 1em 2em 1.5em auto ;
        grid-template-rows    : auto auto auto auto auto auto ;
        padding               : 0 0 0.5em 0 ;
        background-color      : transparent /* lightyellow */ ;
    }

    *.clsAccsItemA  { grid-area :  1 / 1 / span 1 / span 4 ; }
    *.clsAccsValA1  { grid-area :  2 / 2 / span 1 / span 3 ; }
    *.clsAccsNoteA1 { grid-area :  3 / 3 / span 1 / span 2 ; }
    *.clsAccsValA2  { grid-area :  4 / 2 / span 1 / span 3 ; padding-top : 0.5em ; }
    *.clsAccsNoteA2 { grid-area :  5 / 3 / span 1 / span 2 ; }
    *.clsAccsMarkA3 { grid-area :  6 / 3 / span 1 / span 1 ; }
    *.clsAccsNoteA3 { grid-area :  6 / 4 / span 1 / span 1 ; }

    *.clsAccsGuideB
    {
        display               : grid ;
        grid-template-columns : 1em 2em auto ;
        grid-template-rows    : auto auto auto auto auto auto auto ;
        padding               : 0 0 1em 0 ;
        background-color      : transparent /* lightgreen */ ;
    }

    *.clsAccsItemB  { grid-area :  1 / 1 / span 1 / span 3 ; }
    *.clsAccsValB11 { grid-area :  2 / 2 / span 1 / span 2 ; }
    *.clsAccsValB12 { grid-area :  3 / 3 / span 1 / span 1 ; }
    *.clsAccsValB21 { grid-area :  4 / 2 / span 1 / span 2 ; padding-top : 0.5em ; }
    *.clsAccsValB22 { grid-area :  5 / 3 / span 1 / span 1 ; }
    *.clsAccsValB31 { grid-area :  6 / 2 / span 1 / span 2 ; padding-top : 0.5em ; }
    *.clsAccsValB32 { grid-area :  7 / 3 / span 1 / span 1 ; }

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