/* コーポレートカラー */
:root {
    --color-1: rgb(255, 255, 255);
    --color-2: rgb(0, 88, 162);
    --color-3: rgb(232, 26, 47);
    --color-4: rgb(125, 125, 125);
}

body {
    /* background:#eef0f3; */
    font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
    max-width: 425px;
    max-height: 310px;
    height: 310px;
}

#container {
    /* width:360px; */
    /* margin:40px auto; */
    padding: 10px;
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    text-align: center;
}

.title {
    margin-bottom: 10px;
}

.title div:nth-child(1) {
    font-size: 26px;
    line-height: 1.3;
}

.title div:nth-child(2) {
    font-size: 16px;
}

.info {
    margin-bottom: 10px;
}

.lastday {
    background: var(--color-2);
    color: var(--color-1);
    border-radius: 4px;
    padding: 6px 0;
    font-size: 18px;
}

#time {
    margin-top: 10px;
    color: var(--color-4);
    font-size: 14px;
    font-weight: 600;
}

.lastprice {
    background: var(--color-2);
    color: #fff;
    border-radius: 4px;
    padding: 6px 0;
    font-size: 18px;
    margin-bottom: 5px;
}

.price {
    color: #000;
}

.value {
    display: inline-block;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    padding-bottom: 10px;
}

.unit {
    display: inline-block;
    font-size: 38px;
    font-weight: 700;
}

.change {
    margin-top: 5px;
    font-size: 32px;
    font-weight: bold;
}

#button {
    display: flex;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto;
    padding: 10px 0;
    background: var(--color-2);
    text-decoration: none;
    border-radius: 6px;
    transition: .2s;
}

#button div {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
}

#button:hover {
    background: var(--color-3);
}

#button img {
    width: 20px;
    margin-right: 10px;
}

/* 前日比切り替え用CSS */
.plus {
    color: red;
}

.minus {
    color: blue;
}

.equal {
    color: rgb(255, 180, 0);
}

@media screen and (width<=300px) {
    body {
        /* background:#eef0f3; */
        max-width: 300px;
        max-height: 219px;
        height: 219px;
    }

    .title {
        margin-bottom: 5px;
    }

    #container {
        padding: 5px 20px;
    }

    .title div:nth-child(1) {
        font-size: 19px;
    }

    .title div:nth-child(2) {
        font-size: 13px;
    }

    .lastprice {
        padding: 5px 0;
        font-size: 17px;
        margin-bottom: 5px;
    }

    .value {
        font-size: 23px;
        padding-bottom: 5px;
    }

    .unit {
        font-size: 23px;
    }

    .lastday {
        padding: 5px 0;
        font-size: 17px;
        margin-bottom: 5px;
    }

    .change {
        margin: 0;
        font-size: 19px;
    }

    #time {
        margin-top: 5px;
        font-size: 11px;
    }

    #button {
        padding: 5px 0;
    }
    #button div {
        color: #fff;
        font-size: 13px;
        line-height: 20px;
    }

    #button img {
        width: 13px;
        margin-right: 10px;
    }

    .info {
        margin-bottom: 5px;
    }

}