/* オプション画面 */
.screen-options {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 中の要素を縦並びにする */
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6); /* 背景を暗くして、目立たせる */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url('./../assets/img/options.webp'); /* 背景画像のパス */
  background-size: cover;
  background-position: center;
  z-index: -1; /* 背景画像を後ろに配置 */
}



.option-content {
  background: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
  padding: 20px;
  border-radius: 10px;
  color: white;
  width: 80%;
  max-width: 500px;
  /*height: 70vh;*/
  text-align: center;
}

.option-content h2 {
  margin-bottom: 4vh;
  color: #ddd ;
  font-size: 7vw;
}

.option-item {
  margin-bottom: 3vh;
  /*border: #4CAF50 solid 3px;*/
}

.toggle-switch {
  margin-left: 10px;
  margin-top: 2vh;
  margin-left: 10px; /* 左に余白を追加して調整 */
  margin-top: 0;   /* 上部に余白を追加して調整 */
  vertical-align: middle; /* トグルスイッチの中央揃え */
}

/* トグルスイッチのラベル */
.option-item label {
  /*border: #1f6d94 solid 3px;*/
  line-height: 20px; /* トグルスイッチの高さに合わせて調整 */
  font-size: 4vw;
  vertical-align: baseline; /* 縦方向に中央揃え */
  width: 18vw;
  display: inline-block; /* インラインブロックで幅を設定 */
}

/* 戻るボタン */
.back-btn {
  margin-bottom: 3vh;
  margin-top: 4%;
  padding: 12px 30px;
  background-color: #00000099; /* 灰色 */
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.back-btn:hover {
  background-color: #95a5a6; /* 少し暗い灰色 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px); /* 少し浮かせる */
}

.back-btn:active {
  transform: translateY(0); /* クリック時に戻る */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* 追加ボタン（ストレージ削除）BOX  */
.additional-options{
  margin-top: 2vh;
  padding: 0px;
  /*border: #4CAF50 solid 3px;*/
}
.additional-options button{
  font-size: 2vw;
  margin-bottom: 2vh;
  margin-top: 2vh;
  padding: 12px 15px;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(57, 53, 53, 0.9);

}


/* 追加ボタン（indexedDB削除） */
.resetIndexeddbBtn {
  margin-right: 2vw;
  background-color: #8e44adcc; /* 明るい紫 */
  transition: all 0.3s ease;
}

.resetIndexeddbBtn:hover {
  background-color: #7d3c8d; /* 少し暗い紫 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px); /* 少し上に浮くように */
}

.resetIndexeddbBtn:active {
  transform: translateY(0); /* クリック時に戻る */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 追加ボタン（ローカルストレージ削除） */
.resetLocalstorageBtn {
  background-color: #2980b9cc; /* クールな青 */
  transition: all 0.3s ease;
}

.resetLocalstorageBtn:hover {
  background-color: #1f6d94; /* 少し暗い青 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px); /* 少し上に浮くように */
}

.resetLocalstorageBtn:active {
  transform: translateY(0); /* クリック時に戻る */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* 仮想ボタン BOX */
.option-item-virtualButton {
  border: #ffffff33  3px solid;  ;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;

  /* 中身を縦に並べる */
  display: flex;
  flex-direction: column;
  align-items: center; /* ボタンを中央揃え */
  justify-content: flex-start; /* 上に揃える */
  gap: 0vh; /* 各アイテムの間隔を設定 */
}


 .option-item-virtualButton .option-item label {
  margin-top: 2vh;
  margin-bottom: 0%;
  font-size:4vw;
  width: 20vw;
  /*border: #1f6d94 solid 3px;*/
 }

.option-item-virtualButton .option-item{
  margin-top: 0.5vh;
  margin-bottom: 2vh;
}

/* 仮想ボタン トグルスイッチ */
#toggle-virtualButton {
  margin-top: 2vh;
  margin-left: 10px; /* 左に余白を追加して調整 */
  margin-top: 0;   /* 上部に余白を追加して調整 */
  vertical-align: middle; /* トグルスイッチの中央揃え */
}

/* 仮想ボタン リセットボタン */
/* リセットボタンのスタイル */
.resetVirtualButton {
  background-color: #5b5b5b; /* 赤色の背景 */
  color: #fff; /* 白い文字色 */
  font-size: 2.5vw; /* フォントサイズ */
  border: none; /* 枠線なし */
  border-radius: 8px; /* 丸みをつける */
  padding: 8px 20px; /* 上下10px、左右20pxの余白 */
  text-align: center; /* テキスト中央揃え */
  cursor: pointer; /* マウスカーソルをポインターに変更 */
  transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色変更とエフェクトにアニメーションを追加 */
  margin-bottom: 2.2vh; /* ボタン下部に余白を追加 */
}

/* ホバー時のスタイル */
.resetVirtualButton:hover {
  background-color: #2b2828; /* ホバー時に赤色が濃くなる */
  transform: scale(1.1); /* ホバー時に少し大きくなる */
}

/* フォーカス時のスタイル（ボタンを押したとき） */
.resetVirtualButton:focus {
  outline: none; /* フォーカスの青枠を無くす */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* フォーカス時に軽い影を追加 */
}


/* チェックボックスのデザイン */
input[type="checkbox"] {
  appearance: none; /* デフォルトのチェックボックスのスタイルをリセット */
  width: 50px;
  height: 25px;
  background-color: #ddd;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

input[type="checkbox"]:checked {
  background-color: #4CAF50; /* チェック状態での色変更 */
}

input[type="checkbox"]:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

/* チェック状態 */
input[type="checkbox"]:checked:before {
  transform: translateX(25px); /* チェック時に丸が右に移動 */
}