/*螟匁ｰ励せ繧､繝�メ繝懊ち繝ｳ*/
#toggle-button {
    display: none;
}
/*螟匁ｰ励せ繧､繝�メ縺ｮ繝懊ち繝ｳ繝代ち繝ｼ繝ｳ縺ｮ繧ｫ繝舌�*/
.button-label {
    position: relative;
    display: inline-block;
    width: 19%;
    height: 8%;
    background-color: #ccc;
    box-shadow: #ccc 0px 0px 0px 2px;
    border-radius: 30px;
    min-width: 46px;
} 
/*繧ｹ繝ｩ繧､繝€繝ｼ*/
.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
}
/*髢区凾縺ｮ繧ｹ繝ｩ繧､繝€縺ｮ迥ｶ諷� */
.on {
    color: #fff;
    display: none;
    text-indent: 5px;
    font-size: 1.16667vw;               
}
/*繧ｪ繝墓凾縺ｮ繧ｹ繝ｩ繧､繝€縺ｮ迥ｶ諷� */
.off {
    color: #fff;
    display: inline-block;
    text-indent: 85%;
    font-size: 1.16667vw;
    min-width: 24px;  
}
/*繧ｹ繝ｩ繧､繝€繝ｼ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ*/
.button-label .circle {
    left: 0;
    transition: all 0.3s;
}

/*繧ｹ繝ｩ繧､繝€繝ｼ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ*/
#toggle-button:checked + label.button-label .circle {
    left: 55%;
}

#toggle-button:checked + label.button-label .on {
    display: inline-block;
}

#toggle-button:checked + label.button-label .off {
    display: none;
}

#toggle-button:checked + label.button-label {
    background-color: #3685ce;
}