@charset "UTF-8";
/* ダークモード */
/* ボタン表示エリア */
/* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  font-size: 14px;
  position: relative; /* 親要素が基点       */
  margin: auto; /* 中央寄せ           */
  width: 135px;
}

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

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

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

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

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

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

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform: translateX(90px); /* 丸も右へ移動       */
  background: #fff; /* カーソルタブの背景 */
  top: 4px; /* 親要素からの位置   */
  left: 23px; /* 親要素からの位置   */
}
.light-theme {
  background: #fff;
  color: #333;
}
.dark-theme {
  background: #333;
  color: #fff;
}