@charset "UTF-8";

h2
{
    text-align : center ;
}

h3
{
    text-align : center ;
}

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

*.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 ;
}

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

#colNamSub1
{
    width : 3.0em ;
}


/* For PC or Tablet */
@media screen and ( min-width : 481px )
{

    #colName  { width :  5.5em ; }
    #colValue { width : 30.5em ; }

    *.clsPhotoArea
    {
        width                 : 96% ;
        margin                : auto ;
        display               : grid ;
        grid-template-columns : 32% 32% 32% ;
        grid-template-rows    : auto auto auto ;
        grid-column-gap       : 2% ;
     }

    *.clsPhotoBox
    {
        text-align   : center ;
        border-style : none ;
        border-color : red ;
        border-width : thin ;
    }

    *.clsNameBox
    {
        text-align   : center ;
        border-style : none ;
        border-color : green ;
        border-width : thin ;
    }

    *.clsLabelBox
    {
        padding      : 0 0.5em 1em 0.5em ;
        border-style : none ;
        border-color : blue ;
        border-width : thin ;
    }

    *.clsPhotoBox1 { grid-area : 1 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox2 { grid-area : 1 / 2 / span 1 / span 1 ; }
    *.clsPhotoBox3 { grid-area : 1 / 3 / span 1 / span 1 ; }

    *.clsNameBox1  { grid-area : 2 / 1 / span 1 / span 1 ; }
    *.clsNameBox2  { grid-area : 2 / 2 / span 1 / span 1 ; }
    *.clsNameBox3  { grid-area : 2 / 3 / span 1 / span 1 ; }

    *.clsLabelBox1 { grid-area : 3 / 1 / span 1 / span 1 ; }
    *.clsLabelBox2 { grid-area : 3 / 2 / span 1 / span 1 ; }
    *.clsLabelBox3 { grid-area : 3 / 3 / span 1 / span 1 ; }

    *.clsPhotoBody { width : 100% ; }
}


/* For Smartphone */
@media screen and ( max-width : 480px )
{
    #colName  { width : 5.25em ; }

    *.clsPhotoArea
    {
        width  : 90% ;
        margin : auto ;
    }

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

    *.clsNameBox
    {
        text-align   : center ;
        border-style : none ;
        border-color : green ;
        border-width : thin ;
    }

    *.clsLabelBox
    {
        padding      : 0 0.5em 1em 0.5em ;
        border-style : none ;
        border-color : blue ;
        border-width : thin ;
    }

    *.clsPhotoBody { width : 100% ; }
}