@charset "utf-8";

body
{
    background-color : #ffffff ;
    font-family      : "MS Mincho", "Hiragino Mincho Pro", serif ;
    font-style       : normal ;
    font-variant     : normal ;
    font-weight      : normal ;
    font-stretch     : normal ;
    font-size        : medium ;
    line-height      : 1.5em ;
}

h1
{
    text-align : center ;
}

table
{
    table-layout    : fixed ;
    border-collapse : collapse ;
    margin          : auto ;
}


:link
{
    color : #0000ff ;
}


*.clsCenter
{
    text-align : center ;
}

*.clsRight
{
    text-align : right ;
}

*.clsTop
{
    vertical-align : top ;
}

*.clsBold
{
    font-weight : bold ;
}

*.clsUnderLine
{
    text-decoration : underline ;
}

*.clsNoWork
{
    color  : #808080 ;
    cursor : text ;
    text-decoration-line : none ;
}

#idHdrArea { display : grid ; }

#idMainHdr { text-align  : center ; }

#idHdrTitle
{
    display     : inline-block ;
    font-family : "メイリオ", "MS PGothic", sans-serif ;
    margin      : 0 0 0 0 ;
}

#idUser
{
    color        : lightcyan /* #00ff00 */ ;
    padding-left : 0.5rem ;
}

#idLogin
{
    color         : lightcyan /* #00ff00 */ ;
    padding-right : 0.5rem ;
}


@media screen and ( min-width : 481px )
{
    body
    {
        max-width : 984px ;
        min-width : 784px ;
    }

    #idHdrArea
    {
        grid-template-columns : 20% auto 20% ;
        grid-template-rows    : auto ;
        background-color      : lightcyan ;
    }

    #idMainHdr
    {
        grid-area        : 1 / 2 / span 1 / span 1 ;
        background-color : transparent /* aquamarine */ ;
    }

    #idLogoBody { height : 2.5rem ; }

    #idHdrTitle
    {
        font-size    : 3rem ;
        font-weight  : bold ;
    }

    #idUser
    {
        grid-area        : 1 / 1 / span 1 / span 1 ;
        background-color : transparent /* powderblue */ ;
    }

    *.clsLogin
    {
        grid-area        : 1 / 3 / span 1 / span 1 ;
        background-color : transparent /* turquoise */ ;
    }

    *.forMbl { display : none ; }
}

@media screen and ( max-width : 480px )
{
    #idHdrArea
    {
        grid-template-columns : 50% 50% ;
        grid-template-rows    : auto auto ;
        background-color      : lightcyan ;
    }

    #idMainHdr
    {
        grid-area        : 1 / 1 / span 1 / span 2 ;
        background-color : transparent /* lightcyan */ ;
    }

    #idLogoBody { height : 1.25rem ; }

    #idHdrTitle
    {
        font-size   : x-large ;
        font-weight : bold ;
    }

    #idUser
    {
        display          : none ;
        grid-area        : 2 / 1 / span 1 / span 1 ;
        background-color : transparent /* powderblue */ ;
    }

    #idLogin
    {
        display          : none ;
        grid-area        : 2 / 2 / span 1 / span 1 ;
        background-color : transparent /* turquoise */ ;
    }

    *.forPC  { display : none ; }
}