.overflow-auto {
    overflow: auto;
  }
  
  #popup {
    max-width: 90vw; /* ビューポート幅の90%まで */
    max-height: 90vh; /* ビューポート高さの90%まで */
    overflow: auto; /* コンテンツがポップアップを超えた場合にスクロールできるようにする */
  }
  
  .table th:first-child, .table td:first-child {
    width: 10%; /* この値は必要に応じて調整 */
  }
  
  /* アコーディオンのヘッダーのスタイル */
  .accordion-button {
    border: 1px solid #dee2e6; /* Bootstrapのデフォルトの枠色と一致させる */
    background-color: #d9feff; /* 背景色を少し暗くして視認性を向上 */
  }
  
  /* アコーディオンが展開された時のスタイル */
  .accordion-button:not(.collapsed) {
    background-color: #e9ecef; /* 展開時の背景色を少し暗く */
    color: #000; /* 文字色を黒に */
  }
  
  /* アコーディオンのボディのスタイル */
  .accordion-body {
    border: 1px solid #dee2e6; /* 枠線を明確に */
  }
  
/* ラジオボタンの基本スタイル */
.radio-group {
  margin: 10px 0;
}

.radio-group label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* カスタムラジオボタン */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #ccc; /* 薄いグレーの丸枠 */
  transition: background-color 0.3s, border-color 0.3s;
}

/* ラジオボタンがマウスオーバーされたときのホバー効果 */
.radio-group label:hover input ~ .checkmark {
  background-color: #f1f1f1;
}

/* ラジオボタンが選択されたときのチェックマークのスタイル */
.radio-group input:checked ~ .checkmark {
  background-color: #2196F3;
  border-color: #2196F3; /* 青いボーダー */
}

/* 選択されたときのチェックマークの内側の点のスタイル */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-group input:checked ~ .checkmark:after {
  display: block;
}

.radio-group .checkmark:after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}