/* -------------------------------------
PC  1050px
TABLET 750px
SMARTPHONE 100%
------------------------------------- */

/* for PC (width 1100px) */
body {
    width: 1000px;
    margin: auto;
    background-image: url("../../../images/websignage/green/@background.png");
    background-position: bottom;
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-color: #dbd2b9;
    font-family: sans-serif;
    overflow-y: scroll;
}

.message1 {
    border: double 5px #FF0000;
    border-radius: 10px;
    background-color: #FFFFFF;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    word-break: break-all;
}

.msg_title1 {
    background-color: #FF0000;
    font-size: 1.3em;
    color: #ffffff;
    text-align: center;
    padding: 0;
    margin: 0;
}

.msg_main1 {
    background-color: #FFFFFF;
    font-size: 1.0em;
    color: #000000;
    padding: 0;
    margin: 1em;
}

.message2 {
    border: solid 3px #4A3013;
    border-radius: 10px;
    background-color: #FFFFFF;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    word-break: break-all;
}

.msg_title2 {
    background-color: #4A3013;
    font-size: 1.3em;
    color: #ffffff;
    text-align: center;
    padding: 0;
    margin: 0;
}

.msg_main2 {
    background-color: #FFFFFF;
    font-size: 1.0em;
    color: #000000;
    padding: 0;
    margin: 1em;
}

ul {
    list-style: none;
    border: solid 1px #000000;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 3.5em;
    font-size: 2em;
    text-align: right;
    border: solid 0px #000000;
    padding: 0.3em 0.5em 0.3em 0;
    margin: 0 0 0.1em 0;
    vertical-align: top;
}

.footer {
    position: fixed;
    width: 1000px;
    bottom: 0;
    margin: 0;
}

#lastupdate {
    background-color: #FFFFFF;
    margin: 0;
}

img {
    width: 100%;
}



/* ========== Remark ========== */
/* － */
li.status_0 {
    background-image: url("../../../images/websignage/green/status_0.svg");
    background-color: transparent;
    background-position: left;
    background-size: 2em;
    background-repeat: no-repeat;
    border-right: solid 0.1em #CCCCCC;
    border-bottom: solid 0.2em #CCCCCC;
}

/* ◎ */
li.status_1 {
    background-image: url("../../../images/websignage/green/status_1.svg");
    background-color: transparent;
    background-position: left;
    background-size: 2em;
    background-repeat: no-repeat;
    border-right: solid 0.1em #CCCCCC;
    border-bottom: solid 0.2em #CCCCCC;
}

/* ○ */
li.status_2 {
    background-image: url("../../../images/websignage/green/status_2.svg");
    background-color: transparent;
    background-position: left;
    background-size: 2em;
    background-repeat: no-repeat;
    border-right: solid 0.1em #CCCCCC;
    border-bottom: solid 0.2em #CCCCCC;
}

/* △ */
li.status_3 {
    background-image: url("../../../images/websignage/green/status_3.svg");
    background-color: transparent;
    background-position: left;
    background-size: 2em;
    background-repeat: no-repeat;
    border-right: solid 0.1em #CCCCCC;
    border-bottom: solid 0.2em #CCCCCC;
}



@media screen and (max-width: 1049px) {
/* for TABLET (width 750px) */
body {
    width: 700px;
}

.footer {
    position: fixed;
    background-color: #FFFFFF;
    width: 700px;
    bottom: 0;
    margin: 0;
}
}



@media screen and (max-width: 749px) {
/* for SMARTPHONE (width 100%) */
body {
    width: 100%;
    max-width: 600px;
}

.footer {
    position: fixed;
    background-color: #FFFFFF;
    width: 100%;
    bottom: 0;
    margin: 0;
}
}