/* === ボタンを表示するエリア ============================== */

.switchArea {
    position: absolute;
    bottom: -340px;
    right: 30px;
    /* 親要素が基点       */
    margin: auto;
    /* 中央寄せ           */
    width: 150px;
    /* ボタンの横幅       */
    background: #fff;
    /* デフォルト背景色   */
}


/* === チェックボックス ==================================== */

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


/* === チェックボックスのラベル（標準） ==================== */

.switchArea label {
    display: block;
    /* ボックス要素に変更 */
    box-sizing: border-box;
    /* 枠線を含んだサイズ */
    height: 60px;
    /* ボタンの高さ       */
    border: 2px solid #999999;
    /* 未選択タブのの枠線 */
    border-radius: 30px;
    /* 角丸               */
}


/* === チェックボックスのラベル（ONのとき） ================ */

.switchArea input[type="checkbox"]:checked+label {
    border-color: #78bd78;
    /* 選択タブの枠線     */
}


/* === 丸部分のSTYLE（標準） =============================== */

.switchArea #swImg {
    position: absolute;
    /* 親要素からの相対位置*/
    width: 52px;
    /* 丸の横幅           */
    height: 52px;
    /* 丸の高さ           */
    background: #999999;
    /* カーソルタブの背景 */
    top: 4px;
    /* 親要素からの位置   */
    left: 4px;
    /* 親要素からの位置   */
    border-radius: 26px;
    /* 角丸               */
    transition: .2s;
    /* 滑らか変化         */
}


/* === 丸部分のSTYLE（ONのとき） =========================== */

.switchArea input[type="checkbox"]:checked~#swImg {
    transform: translateX(90px);
    /* 丸も右へ移動       */
    background: #78bd78;
    /* カーソルタブの背景 */
}


/* === ボタンを表示するエリア ============================== */

.switchArea2 {
    position: absolute;
    bottom: -230px;
    right: 30px;
    /* 親要素が基点       */
    margin: auto;
    /* 中央寄せ           */
    width: 150px;
    /* ボタンの横幅       */
    background: #fff;
    /* デフォルト背景色   */
}


/* === チェックボックス ==================================== */

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


/* === チェックボックスのラベル（標準） ==================== */

.switchArea2 label {
    display: block;
    /* ボックス要素に変更 */
    box-sizing: border-box;
    /* 枠線を含んだサイズ */
    height: 60px;
    /* ボタンの高さ       */
    border: 2px solid #999999;
    /* 未選択タブのの枠線 */
    border-radius: 30px;
    /* 角丸               */
}


/* === チェックボックスのラベル（ONのとき） ================ */

.switchArea2 input[type="checkbox"]:checked+label {
    border-color: #78bd78;
    /* 選択タブの枠線     */
}


/* === 丸部分のSTYLE（標準） =============================== */

.switchArea2 #swImg2 {
    position: absolute;
    /* 親要素からの相対位置*/
    width: 52px;
    /* 丸の横幅           */
    height: 52px;
    /* 丸の高さ           */
    background: #999999;
    /* カーソルタブの背景 */
    top: 4px;
    /* 親要素からの位置   */
    left: 4px;
    /* 親要素からの位置   */
    border-radius: 26px;
    /* 角丸               */
    transition: .2s;
    /* 滑らか変化         */
}


/* === 丸部分のSTYLE（ONのとき） =========================== */

.switchArea2 input[type="checkbox"]:checked~#swImg2 {
    transform: translateX(90px);
    /* 丸も右へ移動       */
    background: #78bd78;
    /* カーソルタブの背景 */
}