body {
	margin: 0;
}

canvas {
	display: block;
}

video {
	max-width: 320px;
	height: auto;
	transform: scale(-1, 1);
}

#preview {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 24px;	/*16*/
	left: 0px;	/*16*/
	overflow: hidden;
	border-radius: 16px;
}

#preview canvas {
	transform: scale(-1, 1);
}

#my-guides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1;
}

.flex{
    display: flex;	/*スイッチを横並び*/
	float: left;	/*左寄せ*/
}
/* === ボタンを表示するエリア ============================== */
.switchArea {
	line-height: 24px;
	/* 1行の高さ          */
	letter-spacing: 0;
	/* 文字間             */
	text-align: center;
	/* 文字位置は中央     */
	font-size: 9px;
	/* 文字サイズ         */

	position: relative;
	/* 親要素が基点       */
	margin: auto;
	/* 中央寄せ           */
	width: 63px;
	/* ボタンの横幅       */
	background: #fff;
	/* デフォルト背景色   */
}

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

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

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

/* === 表示する文字（標準） ================================ */
.switchArea label span:after {
	content: "OFF";
	/* 表示する文字       */
	padding: 0 0 0 14px;
	/* 表示する位置       */
	color: #6666ff;
	/* 文字色             */
}

/* === 表示する文字（ONのとき） ============================ */
.switchArea input[type="checkbox"]:checked+label span:after {
	content: "ON";
	/* 表示する文字       */
	padding: 0 14px 0 0;
	/* 表示する位置       */
	color: #ff66ff;
	/* 文字色             */
}

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

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