/* === ボタンを表示するエリア ============================== */
.onoffswitch {
    margin         : auto;                /* 中央寄せ           */
    width          : 40px;                /* ボタンの横幅       */
}

/* === チェックボックス ==================================== */
.onoffswitch input[type="checkbox"] {
    display        : none;            /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.onoffswitch label {
display        : block;               /* ボックス要素に変更 */
box-sizing     : border-box;          /* 枠線を含んだサイズ */
text-align     : center;              /* 文字位置は中央     */
border         : 2px solid #ccc;      /* 枠線(一旦四方向)   */
border-radius  : 3px;                 /* 角丸               */
height         : 40px;                /* ボタンの高さ       */
font-size      : 16px;                /* 文字サイズ         */
line-height    : 38px;                /* 太字               */
padding-bottom : 2px;
font-weight    : bold;                /* 太字               */
background     : #eee;                /* 背景色             */
box-shadow     : 3px 3px 6px #888;    /* 影付け             */
transition     : .3s;                 /* ゆっくり変化       */
}

/* === ON側のチェックボックスのラベル（ONのとき） ========== */
.onoffswitch label span:after{
content        : "OFF";               /* 表示する文字       */
color          : #aaa;
}
.onoffswitch input[type="checkbox"]:checked + label {
background     : #007bff;
box-shadow     : none;                /* 影を消す           */
}
.onoffswitch input[type="checkbox"]:checked + label span:after {
content        : "ON";                /* 表示する文字       */
color          : #fff;                /* 文字色             */
}