@charset "utf-8";

*.clsTitle
{
    font-weight : bold ;
    font-size   : x-large ;
    text-align  : center ;
    margin      : 0 0 1em 0 ;
}

*.clsStmnt
{
    font-weight : normal ;
    font-size   : medium ;
    text-indent : 1em ;
    margin      : 0 0 0 0 ;
}

#idTblItems
{
    width            : 100% ;
    background-color : transparent /* skyblue */ ;
}

#colName  { width : 4.5em ; }
/* #colValue { width : 25em ; } */

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

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

#idLinkArea
{
    text-align : center ;
    margin     : 1em 0 1em 0 ;
}

*.clsLink
{
    font-size : x-large ;
    margin    : 0 1em 0 1em ;
}


/* For PC or Tablet */
@media screen and ( min-width : 481px )
{
    #idMainArea
    {
        display               : grid ;
        grid-template-columns : 50% 50% ;
        grid-template-rows    : auto ;
    }

    #idIntro
    {
        grid-area        : 1 / 1 / span 1 / span 1 ;
        padding          : 1rem 1rem 1rem 0 ;
        background-color : transparent /* beige */ ;
    }

    #idMainItems
    {
        grid-area        : 1 / 2 / span 1 / span 1 ;
        padding          : 1rem 0 1rem 1rem ;
        background-color : transparent /* linen */ ;
    }
}


/* For Smartphone */
@media screen and ( max-width : 480px )
{
    #idIntro
    {
       padding : 1rem 0 0 0 ;
    }

    #idMainItems
    {
       padding : 1rem 0 0 0 ;
    }
}