@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
@font-face {
    font-family: "D7CBI";
    src: url("DSEG7Classic-BoldItalic.woff") format('woff');
}

main h2 {
    margin-bottom: 10px;
}

#message {
    text-align: center;
}

/* 標準 */
#speedmeter.normal {
    background: black;
    border: 5.6vw solid lightgray;
    border-radius: 2.8vw;
    color: white;
    font-family: "M PLUS Rounded 1c";
    font-size: 8.4vw;
    text-align: center;
    margin: 0 auto;
    padding: 1.4vw;
    overflow: hidden;
    width: 70vw;
}

#speedmeter.normal .speed {
    color: limegreen;
    float: left;
    font-family: D7CBI;
    font-size: 14vw;
    letter-spacing: 3.5vw;
    margin: 2.8vw;
    width: 49vw;
}

#speedmeter.normal .unit {
    float: right;
    margin-top: 8.4vw;
    margin-left: -5.6vw;
    overflow: hidden;
    width: 21vw;
    transform: scale(0.9, 1);
}

/* 名鉄SR風 */
#speedmeter.sr {
    background: black;
    border: 5.6vw solid #FFF3B8;
    border-radius: 2.8vw;
    color: white;
    font-family: "M PLUS Rounded 1c";
    font-size: 8.4vw;
    text-align: center;
    margin: 0 auto;
    padding: 1.4vw;
    overflow: hidden;
    width: 70vw;
}

#speedmeter.sr .speed {
    color: #FF0044;
    float: left;
    font-family: D7CBI;
    font-size: 14vw;
    letter-spacing: 4.9vw;
    margin: 2.8vw;
    text-indent: 2.8vw;
    width: 49vw;
}

#speedmeter.sr .unit {
    float: right;
    margin-top: 8.4vw;
    margin-left: -4.2vw;
    overflow: hidden;
    width: 19.6vw;
}

#speedmeter.sr .unit_wrapper {
    transform: skewX(-15deg) scale(0.8, 1);
}

#speedmeter.sr .unit .small {
    font-size: 7vw;
}

@media(min-width: 720px) {
    #speedmeter.normal, #speedmeter.sr {
        border-width: 38.4px;
        border-radius: 19.2px;
        font-size: 57.6px;
        padding: 9.6px;
        width: 480px;
    }

    #speedmeter.normal .speed {
        font-size: 96px;
        letter-spacing: 33.6px;
        margin: 19.2px;
        width: 336px;
    }

    #speedmeter.sr .speed {
        font-size: 96px;
        letter-spacing: 33.6px;
        margin: 19.2px;
        text-indent: 19.2px;
        width: 336px;
    }

    #speedmeter.normal .unit {
        margin-top: 57.6px;
        margin-left: -38.4px;
        width: 144px;
    }

    #speedmeter.sr .unit {
        margin-top: 57.6px;
        margin-left: -28.8px;
        width: 134.4px;
    }

    #speedmeter.sr .unit .small {
        font-size: 48px;
    }
}