/**
** type = default
** 何も選択されていない
**/


/* ショートコードが生成するHTMLに対する画像サイズの指定 */
.wp-make-quiz-image img {
  max-width: 100%;
  height: auto;
}

.wp-make-quiz.default {
  margin: 0 0 30px 0;
  padding: 0;
  box-sizing: border-box;
}

.wp-make-quiz.default .wp-make-quiz-title {
  font-weight: normal;
  margin: 0 0 1em 0;
}

.wp-make-quiz.default .wp-make-quiz-title p:first-of-type {
  margin: 0;
  padding: 0;
}

.wp-make-quiz.default .wp-make-quiz-question {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 元のスタイル */
.wp-make-quiz.default .wp-make-quiz-question-list {
  position: relative;
  background: #fff;  /* 白色の背景 */
  border: 1px solid #ddd;
  cursor: pointer;
  font-weight: normal;
  padding: 10px 40px 10px 10px;
  margin: 0 0 10px 0;
  border-radius: 5px;
  box-sizing: border-box;
  transition: .2s;
}

/* 正解のスタイルとアイコン */
.wp-make-quiz.default .wp-make-quiz-question-list.correct.answered {
    background-color: #62b065; color: black; /* 緑色 */
    color: white;
    position: relative;
	padding-left: 40px; /* アイコンのスペースを確保 */
}

.wp-make-quiz-question-list.correct.answered::before {
    content: '';
    display: inline-block;
    width: 20px; /* アイコンのサイズに合わせて調整 */
    height: 20px; /* アイコンのサイズに合わせて調整 */
    background-image: url('https://kaigo.website/keamane/wp-content/uploads/2024/07/チェックポイントのアイコン-1.png'); /* 正解アイコンのURL */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* アイコンとテキストを中央揃え */
    color: white;
    margin-right: 8px;
}

/* 不正解のスタイルとアイコン */
.wp-make-quiz.default .wp-make-quiz-question-list.incorrect.answered {
    background-color: #ff5e5e; /* 赤色 */
    color: white;
    position: relative;
	padding-left: 40px; /* アイコンのスペースを確保 */
}

.wp-make-quiz-question-list.incorrect.answered::before {
    content: '';
    display: inline-block;
    width: 20px; /* アイコンのサイズに合わせて調整 */
    height: 20px; /* アイコンのサイズに合わせて調整 */
    background-image: url('https://kaigo.website/keamane/wp-content/uploads/2024/07/禁止、閉じるのアイコン素材-2.png'); /* 正解アイコンのURL */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* アイコンとテキストを中央揃え */
    color: white;
    margin-right: 8px;
}

/* Font Awesomeアイコンの設定 */
.wp-make-quiz-question-list.correct.answered::before,
.wp-make-quiz-question-list.incorrect.answered::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    margin-right: 8px;
    position: absolute;
    left: 10px; /* アイコンの左位置を調整 */
    top: 50%;
    transform: translateY(-50%);
}

/* 選択肢のスタイル */
.wp-make-quiz-question-list {
    position: relative;
    padding-left: 40px; /* アイコンのスペースを確保 */
    box-sizing: border-box;
}

.wp-make-quiz.default .wp-make-quiz-question-list:not(.disabled):hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.wp-make-quiz.default .wp-make-quiz-question-list:after {
  font-family: "dashicons";
  position: absolute;
  left: 10px;
  top: 50%; /* アイコンを垂直方向中央に配置 */
  transform: translateY(-50%);
  font-size: 32px;
  color: #fff;
  line-height: 1;
  display: none;
}

.wp-make-quiz.default .wp-make-quiz-question-list.show-icon:after {
  display: inline-block;
}

.wp-make-quiz.default .wp-make-quiz-question-list.correct.choice {
    background-color: #8FBCDB; /* 水色 */
    color: #FFFFFF; /* テキストの色を白に設定 */
}

.wp-make-quiz.default .wp-make-quiz-question-list.correct.choice:after {
  content: "\f147";
}

.wp-make-quiz.default .wp-make-quiz-question-list.incorrect.choice {
    background-color: #8FBCDB; /* 水色 */
    color: #FFFFFF; /* テキストの色を白に設定 */
}

.wp-make-quiz.default .wp-make-quiz-question-list.incorrect.choice:after {
  content: "\f158";
}

/***
** 正解ボックス
**/

.wp-make-quiz.default .wp-make-quiz-answer {
  display: none;
  background: #fff;
  border: 1px solid #bbb;
  font-weight: normal;
  padding: 10px;
  margin: 0 0 10px 0;
  border-radius: 5px;
  box-sizing: border-box;
  animation: wp-make-quiz-default-appear 1s ease;
}

.wp-make-quiz.default .wp-make-quiz-result.show {
  display: block;
}

.wp-make-quiz.default .wp-make-quiz-result {
  display: none;
  margin: 0 0 10px 0;
  padding: 0;
  font-weight: normal;
  position: relative;
  font-weight: 700;
}

.wp-make-quiz.default .wp-make-quiz-result:before {
  font-family: "dashicons";
  display: inline-block;
  margin-right: 0.2em;
  line-height: 1;
  position: relative;
  top: 3px;
}

/** 正解の場合 **/
.wp-make-quiz.default .wp-make-quiz-result.correct {
  color: #68AF15;
}


/** 不正解の場合 **/
.wp-make-quiz.default .wp-make-quiz-result.incorrect {
  color: #BE1515;
}

.wp-make-quiz-overall-commentary {
  background: #fff;
  border: 1px solid #bbb;
  font-weight: normal;
  padding: 10px;
  margin: 0 0 10px 0;
  border-radius: 5px;
  box-sizing: border-box;
  animation: wp-make-quiz-default-appear 1s ease;
}

.wp-make-quiz.default .wp-make-quiz-commentary {
  display: none;
  margin: 0 0 10px 0;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid #bbb;
  border-radius: 5px;
  box-sizing: border-box;
  transition: .2s;
}

.wp-make-quiz.default .wp-make-quiz-commentary.correct {
  background: #d9f0d3;
}

.wp-make-quiz.default .wp-make-quiz-commentary.incorrect {
  background: #f0d3d3;
}
/**
** アニメーション
**/
@keyframes wp-make-quiz-default-appear {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}


.wp-make-quiz-buttons {
    display: flex; /* Flexboxを利用してボタンを横に並べる */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: flex-start; /* 左から始める */
    gap: 10px; /* ボタン間の隙間を設ける */
	 margin: 10px 0 10px 0;  /* 上と下にマージンを設定 */

}

.wp-make-quiz-button {
    padding: 10px 20px; /* パディング */
    background-color: #0073aa; /* プライマリーカラー */
    color: white; /* 文字色 */
    border: none; /* 枠線なし */
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインターに */
    font-size: 16px; /* フォントサイズ */
}


/* 回答するボタンのスタイル */
.wp-make-quiz .wp-make-quiz-submit {
  background-color: #0073aa; /* プライマリーカラー */
}

.wp-make-quiz .wp-make-quiz-submit:hover {
  background-color: #005077; /* ホバー時の背景色 */
}

/* 解説ボタンのスタイリング */
.wp-make-quiz .wp-make-quiz-show-commentary {
    background-color: #cccccc; /* 背景色を灰色に設定 */
    color: black; /* 文字色を黒に設定 */
}

.wp-make-quiz .wp-make-quiz-show-commentary:hover {
    background-color: #bfbfbf; /* ホバー時の背景色を少し明るくする */
}

/* もう一度ボタンのスタイリング */
.wp-make-quiz .wp-make-quiz-try-again {
    background-color: #cccccc; /* 背景色を灰色に設定 */
    color: black; /* 文字色を黒に設定 */
}

.wp-make-quiz .wp-make-quiz-try-again:hover {
    background-color: #bfbfbf; /* ホバー時の背景色を少し明るくする */
}

/* 空白の除去 */
.wp-make-quiz-question-list {
    padding-right: 0 !important; /* パディングの右側をゼロに設定 */
    margin-right: 0 !important;  /* マージンの右側をゼロに設定 */
}

/* キャプションのスタイル */
.wp-make-quiz-image-caption {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.wp-make-quiz-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

/* 除外する選択肢ののスタイル */
.wp-make-quiz-question-list.excluded {
    color: gray;
    text-decoration: line-through;
}

/* PC/タブレット用：横並び表示、各カラムの幅は固定して統一 */
.quiz-stats-container {
  display: flex;
  gap: 30px;
  align-items: center;
  overflow-x: auto;  /* 幅が足りない場合は横スクロール */
  margin-bottom: 15px; /* 罫線との間に余白 */
}

/* 各カラム（分野、合計、ボタン）の共通スタイル */
.quiz-stats-column {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap; /* 文字を折り返さない */
  width: 180px;        /* 全て同じ固定幅（必要に応じて調整） */
  flex: 0 0 auto;
}

/* ボタン用カラム：ボックスの境界線・背景を消す */
.quiz-stats-delete-col {
  border: none;
  background: none;
  padding: 0;
}

/* 各要素のフォントサイズなど */
.quiz-stats-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.quiz-stats-fraction {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.quiz-stats-percent {
  font-size: 1.2em;
  font-weight: bold;
}

/* 削除ボタン */
.quiz-reset-button {
  background-color: #cc3333; /* 色はそのまま */
  color: #fff;
  border: none;
  padding: 4px 8px;      /* パディングを減らして小さく */
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.8em;      /* 文字サイズを小さく */
}
.quiz-reset-button:hover {
  background-color: #bb0000; /* 色はそのまま */
}

/* 罫線（下部の区切り線）、上部に余白を設定 */
.quiz-stats-separator {
  border: none;
  border-top: 1px solid #aaa;
  margin-top: 15px;
}

/* スマホ用：画面幅600px以下 → 2列表示に切り替え */
@media (max-width: 600px) {
  .quiz-stats-container {
    flex-wrap: wrap;
  }
  /* 先頭4カラム（分野＋合計）は幅50%にする */
  .quiz-stats-column:not(.quiz-stats-delete-col) {
    width: calc(50% - 15px); /* gap考慮 */
  }
  /* ボタン用カラムは幅100%にして独自の行に配置 */
  .quiz-stats-delete-col {
    width: 100%;
    text-align: center;
  }
  /* 必要なら文字サイズも小さく */
  .quiz-stats-column {
    font-size: 0.9em;
  }
}