@charset "UTF-8";
.quiz__qa {
  background: #ffba00;
  margin-bottom: 50px;
  padding-bottom: 20px;
}

@media (min-width: 769px) {
  .quiz__qa_main {
    margin: -5px 0 0 0;
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  .quiz__qa_main {
    margin: -2px 0 0 0;
    padding: 0 15px;
  }
}

/**********ここから、タブ**********/
/* タブ全体の設定 */
.tab-switch {
  --tab-color: #a1d8e6; /* アクティブタブの色 */
  display: flex; /* タブを横並びに配置 */
  flex-wrap: wrap; /* 幅が足りない場合は折り返し */
  margin: auto; /* 全体を中央寄せ */
  justify-content: center; /* 中央揃え */
  max-width: 800px; /* 最大幅の制限 */
}
@media (min-width: 769px) {
  .tab-switch {
    gap: 20px; /* タブ間の間隔 */
    margin-bottom: 10px;
  }
}
@media (max-width: 768px) {
  .tab-switch {
    gap: 5px; /* タブ間の間隔 */
    margin-bottom: 5px;
  }
}

/* 各タブボタンの設定 */
.tab-switch > label {
  flex: 1 1 auto; /* 均等に幅を分配 */
  order: -1; /* タブ部分を先に表示 */
  position: relative; /* 子要素の絶対位置の基準 */
  padding: 0.7em 1em; /* 内側余白 */
  background-color: #fff; /* 通常時の背景色 */
  color: #999; /* 通常時の文字色 */
  text-align: center; /* テキスト中央揃え */
  cursor: pointer; /* ポインター表示 */
  transition: background-color 0.3s, color 0.3s; /* 背景色と文字色を滑らかに切り替え */
  border: 2px solid #000;
  line-height: 1;
}
@media (min-width: 769px) {
  .tab-switch > label {
    width: 136px;
  }
}
@media (max-width: 768px) {
  .tab-switch > label {
    width: 20%;
  }
}

/* タブボタンのホバーおよび選択時のスタイル */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
  background-color: var(--tab-color); /* 背景色 */
  color: #fff; /* 文字色 */
}

/* ラジオボタンを非表示にする */
.tab-switch input {
  display: none;
}

/* 各タブコンテンツの設定 */
.tab-switch > div {
  display: none; /* 初期は非表示 */
  width: 100%; /* コンテンツ幅を全幅に */
}

/* 選択されたタブに対応するコンテンツを表示 */
.tab-switch label:has(:checked) + div {
  display: block;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .dammy {
    border: none !important;
    background: #ffba00 !important;
  }
}

/**********ここまで、タブ**********/
/**********ここから、クリックで画像の表示を切り替える**********/
.tab-content div {
  cursor: pointer;
}

#quiz_qa_a-1, #quiz_qa_a-2, #quiz_qa_a-3, #quiz_qa_a-4, #quiz_qa_a-5, #quiz_qa_a-6, #quiz_qa_a-7, #quiz_qa_a-8, #quiz_qa_a-9, #quiz_qa_a-10 {
  display: none;
  opacity: 0;
}

/**********ここまで、クリックで画像の表示を切り替える**********//*# sourceMappingURL=qa.css.map */