/* === ボタンを表示するエリア ============================== */
.switchArea {
  position       : relative;            /* 親要素が基点       */
  text-align     : left;
  /* margin         : auto;                /* 中央寄せ           */
  width          : 46px;               /* ボタンの横幅       */
  height         : 23px;
  background     : #fff;                /* デフォルト背景色   */
  display: inline-block;
}

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

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 22px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 11px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
/*border-color   : #1a1aff;*/           /* 選択タブの枠線     */
  border-color   : #00aaff;             /* 選択タブの枠線     */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 14px;                /* 丸の横幅           */
  height         : 14px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 7px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(24px);    /* 丸も右へ移動       */
/*background     : #1a1aff;*/           /* カーソルタブの背景 */
  background     : #00aaff;             /* カーソルタブの背景 */
}

 /* === 丸部分のSTYLE（disableのとき） =========================== */
.switchArea input[type="checkbox"]:disabled ~ #swImg {
  background     : #cccccc;             /* カーソルタブの背景 */
}

 /* === チェックボックスのラベル（disableのとき） ================ */
.switchArea input[type="checkbox"]:disabled +label {
  border-color   : #cccccc;             /* 選択タブの枠線     */
}