@charset "UTF-8";



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

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

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

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

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

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


.leftColor{
        top: 280px;
        left: 62.5px;
        width:9px;
        height:9px;
        float: left;
        position: absolute;
        z-index: 10;
        border: 1px solid #000000;
}

.rightColor{
        top: 280px;
        left: 427.5px;
        width:9px;
        height:9px;
        float: left;
        position: absolute;
        z-index: 10;
        border: 1px solid #000000;
}

.gauge{
        top: 284px;
        left: 70px;
        width:360px;
        height:2px;
        background: #000000;
        float: left;
        position: absolute;
        z-index: 5;
}

.gauge2{
        top: 285px;
        left: 66.5px;
        width:2px;
        height:137px;
        background: #000000;
        float: left;
        position: absolute;
        z-index: 5;
}

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



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

                
}