/* :rootで色の変数を定義し、管理しやすくします */
:root {
  --color-sunday: #e85d5d;
  --color-monday: #354cfc;
  --color-tuesday: #f2994a;
  --color-wednesday: #56ccf2;
  --color-thursday: #6fcf97;
  --color-friday: #f2c94c;
  --color-saturday: #bb6bd9;
  --color-net-delivery: #828282;
  --color-default: #828282;
  --text-light: #ffffff;
  --text-dark: #333333;
  /* レイアウト用の変数を追加 */
  --content-max-width: 800px;
  --modal-max-width: 450px;
}

* { box-sizing: border-box; }
/* 簡単なスタイルを追加して見やすくします */
body { font-family: sans-serif; }
section { margin-bottom: 1.5em; }
h2 {
  font-size: 1.1em;
  border-bottom: none; /* 既存の下線を削除 */
  padding: 8px 12px;
  margin: 0 0 1em 0;
  border-radius: 4px;
  font-weight: bold;
}
ul { list-style: none; padding-left: 0; margin: 0; }

/* --- 表示モードのスタイル --- */
/* 各アニメを囲うコンテナ（カード） */
main > section > ul > li {
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 8px 16px; /* 曜日帯と高さを合わせる */
  margin-bottom: 10px; /* タイトル間の行間を詰める */
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  /* Flexboxレイアウトを適用 */
  display: flex;
  align-items: center; /* アイテムを垂直方向中央に揃える */
  flex-wrap: wrap;     /* スペースがなければ折り返す */
}
main > section > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* コンテナ内の全てのリンクから下線を削除 */
main > section > ul > li a {
  text-decoration: none;
}

/* アニメタイトル (最初のリンク) */
main > section > ul > li > a:first-child {
  font-size: 1.25em;
  font-weight: 600; /* boldより少し細いsemibold */
  color: var(--text-dark);
  margin-right: 16px; /* タイトルとリンク間のスペース */
  transition: color 0.2s;
}
main > section > ul > li > a:first-child:hover {
  color: #0d6efd; /* モダンな青色 */
}

/* 配信サービス等のリンク (タイトル以外) */
main > section > ul > li > a:not(:first-child) {
  display: inline-block;
  background-color: #f1f3f5;
  color: #495057;
  padding: 5px 10px;
  border-radius: 16px; /* 角丸を強めにしてモダンに */
  font-size: 0.85em;
  /* 折り返した際の上下マージンを調整 */
  margin: 4px 8px 4px 0;
  transition: background-color 0.2s, color 0.2s;
}
main > section > ul > li > a:not(:first-child):hover {
  background-color: #e9ecef;
  color: #212529;
}

/* --- 放送情報スタイル --- */
.anime-broadcast-info {
  width: 100%; /* 親要素の幅いっぱいに広がり、改行させる */
  margin-top: 6px; /* 上の要素（配信サービスボタン）との間隔 */
  padding-left: 2px; /* タイトルとのインデントを微妙に合わせる */
  font-size: 0.8em; /* 配信サービスボタン(0.85em)より小さく */
  color: #555;
}
.anime-broadcast-info .channel {
  font-weight: 600; /* チャンネル名を少し強調 */
}
.anime-broadcast-info .time {
  margin-left: 0.5em;
}

/* --- 編集モード用のスタイル --- */
.edit-item { border: 1px solid #ddd; margin-bottom: 6px; border-radius: 3px; }
.edit-broadcast-container {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.edit-broadcast-container input {
  flex: 1;
  width: 100%; /* 既存のwidth: 98%を上書き */
  margin-bottom: 0; /* マージンはコンテナで管理 */
}
.edit-item input[type="text"] { width: 98%; margin-bottom: 4px; padding: 4px; }
.edit-links-container { margin-top: 8px; }
.edit-link-item { display: flex; align-items: center; margin-bottom: 4px; }
.edit-link-item select { flex: 0 0 120px; padding: 4px; }
.edit-link-item input { flex: 1 1 auto; margin-left: 5px; padding: 4px; }
.delete-btn { background: #fdd; border: 1px solid #fbb; cursor: pointer; margin-left: 5px; }
.add-btn { background: #dfd; border: 1px solid #bfb; cursor: pointer; margin-top: 5px; }

/* --- 設定モーダル用のスタイル --- */
/* --- 編集モードの折り畳みUI用スタイル --- */
.edit-item-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  background-color: #f7f7f7;
  border-radius: 3px 3px 0 0;
}
.toggle-icon {
  margin-right: 10px;
  font-size: 0.8em;
  width: 1em;
  text-align: center;
  user-select: none; /* アイコンのテキストを選択不可にする */
}
.edit-item-header .edit-title {
  flex-grow: 1;
  margin-bottom: 0;
}
.edit-item-body {
  padding: 8px 8px 8px 12px;
  border-top: 1px solid #eee;
  display: none; /* 初期状態は非表示 */
}

/* ドラッグハンドルのスタイル */
.drag-handle {
  cursor: grab;
  padding: 0 8px;
  color: #999;
  font-size: 1.2em;
  user-select: none; /* ハンドルのテキストを選択不可にする */
}
.drag-handle:active { cursor: grabbing; }

/* ドラッグ中のアイテムに適用するスタイル */
.sortable-ghost {
  opacity: 0.4;
  background: #cde;
}

.modal {
  display: none; position: fixed; z-index: 1002; left: 0; top: 0;
  width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5);
}
.modal-content {
  background-color: #fefefe; margin: 10% auto; padding: 20px;
  border: 1px solid #888; width: 80%; max-width: var(--modal-max-width); position: relative;
}
.close-button {
  color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;
}
#services-list-container { max-height: 40vh; overflow-y: auto; margin-bottom: 1em; }
.service-edit-item { display: flex; margin-bottom: 5px; }
.service-edit-item input { flex: 1; margin-right: 5px; padding: 4px; }

/* --- 登録/設定モーダルのフォームスタイル --- */
.modal-content form { margin-top: 1em; }
.modal-content form label { display: block; margin-bottom: .5em; font-weight: bold; }
.modal-content form input[type="text"], .modal-content form input[type="password"], .modal-content form input[type="email"] { width: 100%; padding: 8px; margin-bottom: .5em; border: 1px solid #ccc; border-radius: 4px; }
.modal-content form .form-hint { font-size: 0.8em; color: #666; margin: -0.5em 0 1em 0; }
.modal-content form button[type="submit"] { width: 100%; padding: 10px; font-size: 1em; }

.modal-content form.import-drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}
.modal-content form.import-drop-zone.dragover {
  background-color: #e9f5ff;
}
.modal-content form input[type="file"] {
  margin-bottom: 1em;
}
/* --- ユーザー管理モーダル --- */
#user-list-container {
  margin-top: 1em;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}
.user-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.user-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.user-list-item:last-child { border-bottom: none; }

/* --- ヘッダーコントロール --- */
#main-controls {
  display: flex;
  justify-content: space-between; /* 左右のグループを両端に配置 */
  align-items: center;          /* 全ての要素を垂直方向中央に揃える */
}

.main-controls-left {
  display: flex;
  align-items: center;
  gap: 16px; /* 左側グループ内の要素間のスペース */
}

/* 各コントロール内のボタンの間隔を統一 */
#view-mode-controls, #edit-mode-controls { display: inline-flex; align-items: center; gap: 8px; }

/* ヘッダー内アクションボタンのスタイル */
.btn-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  font-size: 0.9em;
  font-weight: 600;
  border-radius: 8px; /* ハンバーガーボタンと合わせる */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: white; /* 基本の文字色は白 */
  line-height: 1.5; /* 高さを調整 */
  text-decoration: none;
}
/* プライマリ（保存） */
.btn-header.primary {
  background-color: rgba(13, 110, 253, 0.7); /* 半透明の青 */
}
.btn-header.primary:hover { background-color: rgba(13, 110, 253, 0.9); }
/* セカンダリ（編集モード） */
.btn-header.secondary {
  background-color: rgba(255, 166, 0, 0.393); /* 半透明の白 */
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-header.secondary:hover { background-color: rgba(255, 255, 255, 0.4); }
/* ターシャリ（キャンセル、戻る） */
.btn-header.tertiary {
  background-color: rgba(108, 117, 125, 0.5); /* 半透明のグレー/ブルー */
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-header.tertiary:hover { 
  background-color: rgba(108, 117, 125, 0.8); 
}

/* --- ユーザー挨拶表示 --- */
.user-greeting {
  font-size: 0.9em;
  color: #444;
}

.user-greeting .greet-username {
  font-weight: 600; /* boldより少し細いsemibold */
  font-size: 1.3em;
  color: #212529; /* 少し濃い色にする */
}

/* --- ドロップダウンメニュー --- */
.dropdown-container {
  position: relative; /* ドロップダウンの位置の基準点 */
  display: inline-block;
}

.dropdown-menu {
  /* display: none; はJSで制御するため、ここでは指定しない */
  position: absolute;
  right: 0; /* 親要素の右端に合わせる */
  background-color: #fefefe;
  min-width: 220px; /* 200pxから220pxに少し広げてゆとりを持たせる */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
  z-index: 1003; /* モーダル(1002)より手前に表示 */
  border-radius: 4px;
  border: 1px solid #ddd;
}

.dropdown-menu a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-menu a.is-disabled {
  color: #999; /* テキストを薄くする */
  cursor: not-allowed; /* 禁止カーソルを表示 */
  background-color: #f1f1f1 !important; /* ホバー効果を上書き */
}

.dropdown-menu a:hover { background-color: #f1f1f1; }

/* --- 全体のレイアウト --- */
.app-container {
  max-width: var(--content-max-width); /* PCでの最大幅 */
  margin: 0 auto;   /* 中央揃え */
  padding: 0 15px;  /* スマホでの左右の余白 */
}

/* --- 曜日ごとのグラデーションと文字色 --- */
.category-sunday h2 {
  background: linear-gradient(135deg, var(--color-sunday) 0%, white 140%);
  color: var(--text-light);
}
.category-monday h2 {
  background: linear-gradient(135deg, var(--color-monday) 0%, white 140%);
  color: var(--text-light);
}
.category-tuesday h2 {
  background: linear-gradient(135deg, var(--color-tuesday) 0%, white 140%);
  color: var(--text-light);
}
.category-wednesday h2 {
  background: linear-gradient(135deg, var(--color-wednesday) 0%, white 140%);
  color: var(--text-light);
}
.category-thursday h2 {
  background: linear-gradient(135deg, var(--color-thursday) 0%, white 140%);
  color: var(--text-light);
}
.category-friday h2 {
  background: linear-gradient(135deg, var(--color-friday) 0%, white 140%);
  color: var(--text-dark);
}
.category-saturday h2 {
  background: linear-gradient(135deg, var(--color-saturday) 0%, white 140%);
  color: var(--text-light);
}
.category-net-delivery h2,
.category-default h2 {
  background: linear-gradient(135deg, var(--color-net-delivery) 0%, white 140%);
  color: var(--text-light);
}

/* --- ヘッダー --- */
#app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, rgb(255, 121, 239) 0%, rgb(255, 247, 176) 160%); /* ヘッダーの背景色 */
  border-bottom: 1px solid #dee2e6; /* ヘッダーの下線 */
}

.header-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 15px 15px 0px; /* 下の余白をさらに詰める */
}

.header-content h1 {
  margin: 16px 0 12px 0; /* 上下のマージンを調整してバランスを取る */
  text-align: center;
  font-size: 3em;
  font-weight: 700;
  color: white;
	-webkit-text-stroke: 1px #ffff86;
	text-shadow: 0px 1px 4px #23430C;
}

.app-subtitle {
  text-align: center;
  font-size: 0.9em;
  color: #000;
  margin-top: -10px;
  margin-bottom: 16px;
}

/* 設定ボタン（ハンバーガーメニュー）のスタイル */
#settings-button {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2); /* ホバー時のレイアウト崩れを防ぐ */
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  /* アイコンを中央に配置するための設定 */
  position: relative; /* 擬似要素の位置の基準点 */
  width: 44px; /* クリック領域の幅 */
  height: 44px; /* クリック領域の高さ */
}
#settings-button:hover { background-color: rgba(255, 255, 255, 0.3); }

/* ハンバーガーアイコンの描画 */
.hamburger-icon {
  display: block;
  background-color: white; /* 線の色 */
  position: absolute;
  height: 2px; /* 線の太さ */
  width: 24px; /* 線の長さ */
  left: 10px; /* (ボタン幅44px - 線幅24px) / 2 */
  top: 21px; /* (ボタン高さ44px - 線太さ2px) / 2 */
  transition: all 0.2s ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  background-color: white; /* 線の色 */
  position: absolute;
  height: 3px; /* 中央の線と同じ太さ */
  width: 100%; /* 中央の線と同じ長さ */
  left: 0;
  transition: all 0.2s ease-in-out;
}
.hamburger-icon::before { top: -8px; /* 中央の線から8px上 */ }
.hamburger-icon::after { top: 8px; /* 中央の線から8px下 */ }

/* --- メニューが開いた時の「×」印アニメーション --- */
#settings-button.is-open .hamburger-icon {
  background-color: transparent; /* 中央の線を消す */
}
#settings-button.is-open .hamburger-icon::before {
  top: 0; /* 中央の位置に移動 */
  transform: rotate(45deg);
}
#settings-button.is-open .hamburger-icon::after {
  top: 0; /* 中央の位置に移動 */
  transform: rotate(-45deg);
}

/* 管理者モード表示用のスタイル */
.admin-indicator {
  display: inline-block;
  padding: 1px 24px; /* ボタンと高さを合わせる */
  background-color: #dc3545;
  color: white;
  font-size: 0.9em;

  border-radius: 4px;
  /* margin-left: 8px; */ /* gapプロパティで管理するため不要 */
}

/* --- ログアウト時メッセージ --- */
.logged-out-message {
  text-align: center;
  margin: 4em auto;
  padding: 2em;
  max-width: 500px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.logged-out-message p {
  font-size: 1em;
  color: #6c757d;
  margin: 0 0 1.5em 0;
}

.logged-out-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* パスワードリセットリンクのスタイル */
.logged-out-actions a {
  color: #6c757d; /* 周囲のテキストと色を合わせる */
  text-decoration: none;
  font-size: 0.9em;
  transition: color 0.2s, text-decoration 0.2s;
}

.logged-out-actions a:hover {
  color: #343a40; /* ホバー時に少し濃くする */
  text-decoration: underline;
}

/* iEPG解析結果の表示スタイル */
#iepg-result-display {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 1em;
}

#iepg-result-display p {
  margin: 0 0 0.5em 0;
  font-size: 0.9em;
}

#iepg-result-display p strong {
  color: #333;
}

/* --- しょぼいカレンダー検索UIのスタイル --- */
#syoboi-search-container {
  background-color: #fff9e6; /* 薄い黄色で検索エリアを強調 */
  border: 1px solid #ffeeba;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-bar {
  display: flex;
  gap: 10px;
}

#syoboi-search-input,
#global-search-input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  transition: border-color 0.2s;
}

#syoboi-search-input:focus,
#global-search-input:focus {
  outline: none;
  border-color: #ffc107;
}

#syoboi-search-button,
#global-search-button {
  padding: 0 20px;
  font-weight: bold;
}

.search-results-list {
  margin-top: 15px;
  background: white;
  border: 1px solid #eee;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.search-result-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #fff8e1;
}

.search-result-title {
  font-weight: bold;
  color: #333;
}

.search-result-info {
  font-size: 0.85em;
  color: #666;
}

.syoboi-credit {
  font-size: 0.75em;
  color: #999;
  text-align: right;
  margin-top: 12px;
}

.syoboi-credit a {
  color: inherit;
  text-decoration: underline;
}

.syoboi-credit a:hover {
  color: #666;
}

/* 番組詳細ポップアップ用 */
.syoboi-detail-header {
  border-bottom: 2px solid #ffc107;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.syoboi-detail-title {
  font-size: 1.4em;
  margin: 0;
  color: #333;
}

.syoboi-detail-body p {
  margin: 8px 0;
  line-height: 1.4;
}

.syoboi-detail-label {
  font-weight: bold;
  color: #555;
  width: 100px;
  display: inline-block;
}

.syoboi-detail-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 公開リストセクション */
.public-lists-section {
  margin: 0;
  padding: 16px 20px;
  background: #fff; /* 背景色を白に統一 */
  border: 1px solid #333;
  border-top: 1px solid #eee; /* セクション間の薄い区切り線 */
  border-radius: 0 0 8px 8px;
  text-align: center;
}

.public-lists-section h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1em;
  color: #333;
}

.public-users-grid {
  display: flex;
  flex-direction: column; /* 1行ずつ縦に並める */
  gap: 12px;
  margin-top: 20px;
}

.public-user-card {
  display: flex;
  flex-direction: row; /* カード内の情報を横並びにする */
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 5px solid #F88;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  transition: all 0.2s;
}

.public-user-card:hover {
  transform: translateX(5px); /* 横に少しずれるアニメーション */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #F88;
}

.card-username {
  font-weight: bold;
  font-size: 1.1em;
  color: #212529;
  flex: 1; /* 名前部分を広げる */
  margin-bottom: 0;
  text-align: left;
}

.card-info {
  display: flex;
  flex-direction: row; /* 情報も横並び */
  gap: 20px;
  font-size: 0.9em;
  color: #666;
  white-space: nowrap;
}

.card-info strong {
  color: #333;
}

/* --- 汎用ボタン --- */
.button-primary {
  background-color: #F88;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.button-primary:hover {
  background-color: #FAA;
}

.button-secondary {
  background-color: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.button-secondary:hover {
  background-color: #dee2e6;
  color: #212529;
}

/* --- 初期ページ追加セクション --- */
.registration-cta {
  margin-bottom: 0;
  padding: 16px 20px;
  background-color: #fff;
  border: 1px solid #333;
  border-bottom: none; /* 下のセクションと繋げる */
  border-radius: 8px 8px 0 0;
  text-align: center;
}

.registration-cta h2 {
  background: none;
  color: #333;
  font-size: 1.1em;
  padding: 0;
  margin: 0 0 4px 0;
  border: none;
}

.registration-cta p {
  font-size: 0.85em;
  margin: 0 0 10px 0;
  color: #555;
}

.global-search-section {
  margin: 0;
  padding: 16px 20px;
  background-color: #fff; /* 背景色を白に統一 */
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-top: 1px solid #eee; /* セクション間の薄い区切り線 */
  border-bottom: none;
  border-radius: 0;
}

.global-search-section h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1em;
  color: #333;
}
.global-search-results-list {
  margin-top: 20px;
  text-align: left;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
}

.global-search-result-item {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}
.global-search-result-item:last-child {
  border-bottom: none;
}
.global-search-result-item:hover {
  background-color: #f8f9fa;
}

.result-title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  color: #212529;
}

.result-users {
  font-size: 0.9em;
  color: #666;
}

.result-user-link {
  display: inline-block;
  background-color: #e9ecef;
  color: #495057;
  padding: 2px 10px;
  border-radius: 12px;
  margin-right: 5px;
  text-decoration: none;
  transition: all 0.2s;
}
.result-user-link:hover {
  background-color: #333;
  color: #fff;
}

.result-extra-count {
  color: #999;
  font-style: italic;
}

/* 編集画面の非公開設定 */
.edit-private-container {
  background: #f8f9fa; /* 赤系からグレー系に変更 */
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.edit-private-checkbox {
  margin-right: 5px;
}

.form-group-checkbox {
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- スライドスイッチ（トグルスイッチ） --- */
.dropdown-item-toggle {
  padding: 8px 16px;
  /* display: flex;  header.phpで構造的にaタグと同列に置かれているため、paddingを合わせる */
}

.switch-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  justify-content: space-between; /* テキストとスイッチを両端に */
  font-weight: normal;
  margin: 0;
  color: #333;
  white-space: nowrap; /* 文字の折り返しを禁止 */
}

/* チェックボックス本体は非表示 */
.switch-label input {
  display: none;
}

/* スライダーの背景 */
.slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  transition: .4s;
  margin-left: 10px;
  flex-shrink: 0; /* 幅が縮まないようにする */
}

/* スライダーのつまみ */
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

/* チェックされた時のスタイル */
input:checked + .slider {
  background-color: #2196F3; /* 青色 */
}

input:checked + .slider:before {
  transform: translateX(16px);
}