/* チェックボックス */
#CHK {
	display:flex;
	padding:0;
}

#CHK label{
	margin-bottom:15px;
	padding-left:30px;
	display:block;
	font-size:12px;
	cursor:pointer;
	position:relative;
}
#CHK input{
	position:absolute;
	z-index:-1;
	opacity:0;
}
#CHK .indicator{
	width:24px;
	height:24px;
	background:#fffffc;
	position:absolute;
	top:2px;
	left:0;
    border-radius: 8px;
}
#CHK .typeA-radio .indicator{
	border-radius:50%;
}
#CHK label:hover input ~ .indicator,
#CHK label input:focus ~ .indicator{
	background:#fffffc;
}

.theme_chk_A1 label input:checked ~ .indicator{
	background:#522f60 !important;
}
.theme_chk_A1 label:hover input:not([disabled]):checked ~ .indicator{
	background:#522f60 !important;
}
.theme_chk_A1 .typeA-radio input:checked ~ .indicator{
	background: #522f60 !important;
}

#CHK .typeA-radio:hover input:not([disabled]):checked ~ .indicator{
	background:rgba(232,122,144,.7);
}
#CHK label input:disabled ~ .indicator,
#CHK .typeA-radio input:disabled ~ .indicator{
	background:#fffffc;
	opacity:0.6;
	pointer-events:none;
}
#CHK .indicator::after{
	content:'';
	display:none;
	position:absolute;
}
#CHK label input:checked ~ .indicator::after{
	display:block;
}
#CHK .typeA-checkbox .indicator::after{
	width:8px;
	height:12px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	left:8px;
	top:4px;
	transform:rotate(45deg);
}
#CHK .typeA-checkbox input:disabled ~ .indicator::after{
	border-color:#fffffc;
}
#CHK .typeA-radio .indicator::after{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#fff;
	top:7px;
	left:7px;
}
#CHK .typeA-radio input:disabled ~ .indicator::after{
	background:#fffffc;
}

#CHK span {
	/* padding:5px 0 0 5px */
}


/* スイッチボタン */
 /* === ボタンを表示するエリア ============================== */
 .switchArea {
	line-height    : 28px;                /* 1行の高さ          */
	letter-spacing : 0;                   /* 文字間             */
	text-align     : center;              /* 文字位置は中央     */
	font-size      : 11px;                /* 文字サイズ         */
  
	position       : relative;            /* 親要素が基点       */
	/* margin         : auto;                中央寄せ           */
	width          : 73px;               /* ボタンの横幅       */
	/* background     : #fff;                デフォルト背景色   */
  }
  
   /* === チェックボックス ==================================== */
  .switchArea input[type="checkbox"] {
	display        : none;            /* チェックボックス非表示 */
  }
  
   /* === チェックボックスのラベル（標準） ==================== */
  .switchArea label {
	display        : block;               /* ボックス要素に変更 */
	box-sizing     : border-box;          /* 枠線を含んだサイズ */
	height         : 28px;                /* ボタンの高さ       */
	/* border         : 2px solid #b2b2b2;   未選択タブのの枠線 */
	border-radius  : 14px;                /* 角丸               */
	background-color: #fffffc;
  }
  
   /* === チェックボックスのラベル（ONのとき） ================ */
  /* .switchArea input[type="checkbox"]:checked +label { */
	/* border-color   : #f28280;             選択タブの枠線     */
	/* background-color: #f28280; */
  /* } */
  .theme_switch_1 input[type="checkbox"]:checked +label {
	/* border-color   : #f28280;             選択タブの枠線     */
	background-color: #522f60;
  }
  .theme_switch_2 input[type="checkbox"]:checked +label {
	/* border-color   : #f28280;             選択タブの枠線     */
	background-color: #98CE97;
  }
  .theme_switch_3 input[type="checkbox"]:checked +label {
	/* border-color   : #f28280;             選択タブの枠線     */
	background-color: #8E5E4A;
  }
  .theme_switch_4 input[type="checkbox"]:checked +label {
	/* border-color   : #f28280;             選択タブの枠線     */
	background-color: #4E454A;
  }
  
   /* === 表示する文字（標準） ================================ */
  .switchArea label span:after{
	content        : "OFF";               /* 表示する文字       */
	padding        : 0 0 0 16px;          /* 表示する位置       */
	color          : #ffffff;           /* 文字色             */ 
  }
  
   /* === 表示する文字（ONのとき） ============================ */
  .switchArea  input[type="checkbox"]:checked + label span:after{
	content        : "ON";                /* 表示する文字       */
	padding        : 0 16px 0 0;          /* 表示する位置       */
	color          : #ffffff;           /* 文字色            */
  }
  
   /* === 丸部分のSTYLE（標準） =============================== */
  .switchArea #swImg {
	position       : absolute;            /* 親要素からの相対位置*/
	width          : 20px;                /* 丸の横幅           */
	height         : 20px;                /* 丸の高さ           */
	background     : #ffffff;             /* カーソルタブの背景 */
	top            : 4px;                 /* 親要素からの位置   */
	left           : 4px;                 /* 親要素からの位置   */
	border-radius  : 10px;                /* 角丸               */
	transition     : .2s;                 /* 滑らか変化         */
  }
  
   /* === 丸部分のSTYLE（ONのとき） =========================== */
  .switchArea input[type="checkbox"]:checked ~ #swImg {
	transform      : translateX(45px);    /* 丸も右へ移動       */
	/* background     : #f28280;             カーソルタブの背景 */
  }