/* toggleボタンデザイン */
 /* === ボタンを表示するエリア ============================== */
 .switch-area {
  line-height    : 20px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  width          : 50px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */

  float          : right;              /* 表示位置   */
}

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

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

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

 /* === 表示する文字（標準） ================================ */
.switch-area label > span:after{
  content        : "個人";                /* 表示する文字       */
  padding        : 0 0 0 12px;          /* 表示する位置       */
  color          : #4da6ff;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switch-area input[type="checkbox"]:checked + label > span:after{
  content        : "法人";               /* 表示する文字       */
  padding        : 0 12px 0 0 ;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

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

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switch-area input[type="checkbox"]:checked ~ #sw-img {
  transform      : translateX(28px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}


/* toggleボタンデザイン disable時*/
/* === ボタンを表示するエリア ============================== */
.switch-area-master {
  line-height    : 20px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  width          : 50px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */

  float          : right;              /* 表示位置   */
}

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

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

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

 /* === 表示する文字（標準） ================================ */
.switch-area-master label > span:after{
  content        : "個人";                /* 表示する文字       */
  padding        : 0 0 0 12px;          /* 表示する位置       */
  color          : #aaaaaa;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switch-area-master input[type="checkbox"]:checked + label > span:after{
  content        : "法人";               /* 表示する文字       */
  padding        : 0 12px 0 0 ;          /* 表示する位置       */
  color          : #aaaaaa;             /* 文字色             */
}

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

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switch-area-master input[type="checkbox"]:checked ~ #sw-img {
  transform      : translateX(28px);    /* 丸も右へ移動       */
  background     : #aaaaaa;             /* カーソルタブの背景 */
}

 /* === 表示する文字（非活性） ================================ */
 .switch-area input[type="checkbox"]:disabled + label > span:after {
  color          : #aaaaaa !important;             /* 文字色             */
}

/* === チェックボックスのラベル（非活性） ================ */
.switch-area input[type="checkbox"]:disabled + label {
  border-color   : #aaaaaa !important;             /* 選択タブの枠線     */
}

/* === 丸部分のSTYLE（非活性） =========================== */
.switch-area input[type="checkbox"]:disabled ~ #sw-img {
  background     : #aaaaaa !important;             /* カーソルタブの背景 */
}