/* 丸も判定に入れる */

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

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

/* === チェックボックス ==================================== */
/* リュウさんへ　いつかアニメーションにしたいね */
.switchArea input[type="checkbox"] {
    display: none;
    /* チェックボックス非表示 */
}

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

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

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

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

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

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