@charset "UTF-8";



.container {
        width:500px;
        height:400px;
        position: relative;
}

.c{
        top: 20px;
        left: 10px;
        width:120px;
        height:120px;
        float: left;
        position: absolute;
        z-index: 10;
}

.l{
        top: 20px;
        left: 100px;
        width:120px;
        height:120px;
        float: left;
        position: absolute;
        z-index: 10;
}

.e{
        top: 20px;
        left: 180px;
        width:120px;
        height:120px;
        float: left;
        position: absolute;
        z-index: 10;
}

.a{
        top: 20px;
        left: 275px;
        width:120px;
        height:120px;
        float: left;
        position: absolute;
        z-index: 10;
}

.r{
        top: 20px;
        left: 375px;
        width:120px;
        height:120px;
        float: left;
        position: absolute;
        z-index: 10;
}


.leftColor{
        top: 232px;
        left: 63px;
        width:4px;
        height:4px;
        float: left;
        position: absolute;
        z-index: 10;
        border: 1px solid #000000;
}

.rightColor{
        top: 232px;
        left: 431px;
        width:4px;
        height:4px;
        float: left;
        position: absolute;
        z-index: 10;
        border: 1px solid #000000;
}

.gauge{
        top: 234px;
        left: 66px;
        width:368px;
        height:2px;
        background: #000000;
        float: left;
        position: absolute;
        z-index: 5;
}

.gauge2{
        top: 235px;
        left: 433px;
        width:2px;
        height:25px;
        background: #000000;
        float: left;
        position: absolute;
        z-index: 5;
}

.nowColor{
        top: 217px;
        width:15px;
        height:15px;
        clip-path: polygon(0 0, 50% 100%, 100% 0%);
        background: #000000;
        float: left;
        position: absolute;
        z-index: 10;
}



/*レスポンシブ対応*/
@media screen and (max-width: 600px){

                
}