/* ----------------------------------------  */
/* 左右トグルボタン */
/* ----------------------------------------  */
.toggle_button_div {
  position				: relative;
  width				: 75px;
  height				: 35px;
  margin				: auto;
  padding				: 0;
}
.toggle_button_input {
  position				: absolute;
  left					: 0;
  top					: 0;
  width				: 100%;
  height				: 100%;
  z-index				: 5;
  opacity				: 0;
  cursor				: pointer;
}
.toggle_button_label {
  width				: 100%;
  height				: 100%;
  background			: #ccc;
  position				: relative;
  display				: inline-block;
  border-radius		: 40px;
  transition			: 0.4s;
  box-sizing			: border-box;
}
.toggle_button_label:after {
  content				: "";
  position				: absolute;
  width				:  45%;
  height				: 100%;
  border-radius		: 100%;
  left					: 0;
  top					: 0;
  z-index				: 2;
  background			: #fff;
  box-shadow			: 0 0 5px rgba(0, 0, 0, 0.2);
  transition			: 0.4s;
}
.toggle_button_input:checked + .toggle_button_label {
  background-color	: #007bff;
}
.toggle_button_input:checked + .toggle_button_label:after {
  left					: 55%;
}

/* ----------------------------------------  */
/* 三本線div                                 */
/* ----------------------------------------  */
/*
<div class="toggle_line3">
	<span></span>
	<span></span>
	<span></span>
</div>
*/
/*枠*/
.toggle_line3{
	position			: relative;
	background			: #efefef;
	cursor				: pointer;
	width				: 2,1em;
	height				: 2.1em;
	border-radius		: 5px;
}

/*線*/
.toggle_line3 span{
	display			: inline-block;
	position			: absolute;
	transition			: all .4s;/*アニメーションの設定*/
	left				: 20%;
	height				: 8%;
	width				: 60%;
	border-radius		: 5%;
	background			: #000000;
}
.toggle_line3 span:nth-of-type(1){
	top					: 25%; 
}
.toggle_line3 span:nth-of-type(2){
	top					: 45%;
}
.toggle_line3 span:nth-of-type(3){
	top					: 65%;
}
/*activeクラスが付与されると線が回転して×に*/
.toggle_line3.active span:nth-of-type(1){
	top					: 20%;
	left				: 20%;
	transform			: translateY(300%) rotate(-45deg);
	width				: 60%;
}
.toggle_line3.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}
.toggle_line3.active span:nth-of-type(3){
	top					: 60%;
	left				: 20%;
	transform			: translateY(-200%) rotate(45deg);
	width				: 60%;
}

/* ----------------------------------------  */
/* 文字(toggle_on,toggle_off)                */
/* ----------------------------------------  */
/*
<label	class="toggle_string">
	<input type="checkbox">
	<span data-toggle_off="非表示" data-toggle_on="表示"></span>
</label>
*/
.toggle_string{
	cursor						: pointer;
	user-select					: none;
	> input[type="checkbox"] {
		position				: absolute;
		z-index				: -1;
		opacity				: 0;
		~ span {
			display			: inline-block;
			text-align			: center;
			background-color	: #ccc;
			border				: 1px solid #888;
			border-radius		: 4px;
			transition			: all 0.5s;
			&:hover {
				box-shadow		: 0 0 8px #444;
			}
			&::after {
				content		: attr(data-toggle_off);
			}
		}
		&:focus ~ span {
			box-shadow			: 0 0 8px #444;
		}
		&:checked ~ span {
			background-color	: #f44;
			&::after {
				content		: attr(data-toggle_on);
			}
		}
	}
}