/* デバッグ用 */
.quiz {
  background: #fff;
  max-width: 960px;
  margin: 0 auto 25px;
  font-size: 18px;
}

.quiz {
  font-family: Meiryo, sans-serif;
  line-height: 27px;
  position: relative;
}

.quiz button {
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.quiz:not(.quiz-top) .quiz_page-top,
.quiz:not(.quiz-quiz) .quiz_page-quiz,
.quiz:not(.quiz-explanation) .quiz_page-explanation,
.quiz:not(.quiz-result) .quiz_page-result {
  display: none;
}

.quiz-beginner .quiz_page {
  background: #E8F5E9;
}
.quiz-master .quiz_page {
  background: #FFEBEE;
}
.quiz-beginner:not(.quiz-result) .quiz_page::before {
  content: url(../../../../documents/d/kensetsu/label_beginner_1);
  display: block;
  padding: 7px 0;
  /* height: 17px; */
  background: #388E3C;
  text-align: center;
}
.quiz-master:not(.quiz-result) .quiz_page::before {
  content: url(../../../../documents/d/kensetsu/label_master_1);
  display: block;
  padding: 7px 0;
  /* height: 17px; */
  background: #D84315;
  text-align: center;
}


.quiz_page-top {
  background: url(../../../../documents/d/kensetsu/bg_top_1) center bottom no-repeat, url(../../../../documents/d/kensetsu/bg_top_2) center bottom repeat-x, #4188DE;
  border-radius: 10px;
}
.quiz_top_title {
  text-align: center;
  background: none !important;
  margin: 0 !important;
  padding: 30px 0 0 !important;
}
.quiz_top_title > img {
  max-width: 90%;
  height: auto;
}
.quiz_startButtonContainer {
  color: #fff;
  font-size: 24px;
  text-align: center;
  margin-top: 15px;
}
.quiz_startButtonContainer-beginner button {
  background-color: #E8F5E9; /* 背景色 */
  border: solid 2px #336633;
  box-shadow: 0 5px 0 #336633; /* 影の太さ・色 */
  border-radius: 60px;
  text-decoration: none; /* 文字の下線を消す */
  padding: 5px 0px 0px 5px;
  display: inline-flex;
}
.quiz_startButtonContainer-beginner button::before {
  content: '';
  display: inline-block;
  width: 40px;/*画像の幅*/
  height: 40px;/*画像の高さ*/
  background-image: url(../../../../documents/d/kensetsu/mark_beginner_2);
  background-size: contain;
  transform: translate(0, -1px);
}
.quiz_startButtonContainer-master button {
  background-color: #FFEBEE; /* 背景色 */
  border: solid 2px #D84315;
  box-shadow: 0 5px 0 #D84315; /* 影の太さ・色 */
  border-radius: 60px;
  text-decoration: none; /* 文字の下線を消す */
  padding: 5px 0px 0px 5px;
  display: inline-flex;
}
.quiz_startButtonContainer-master button::before {
  content: '';
  display: inline-block;
  width: 40px;/*画像の幅*/
  height: 40px;/*画像の高さ*/
  background-image: url(../../../../documents/d/kensetsu/mark_master_2);
  background-size: contain;
  transform: translate(0, -1px);
}
.quiz_balloon {
  text-align: center;
  margin-top: 25px;
}
.quiz_balloon_img {
  z-index: 1;
  position: relative;
  transform: translateY(14px);
}
.quiz_balloon_text {
  background: #fff;
  border-radius: 37px;
  display: block;
  margin: 0 auto;
  padding: 15px 25px;
  transform: translateY(-6px);-
}
.quiz_top_character {
  text-align: center;
  padding-bottom: 11px;
}
.quiz_top_character img {
  max-width: 85%;
  height: auto;
}

.quiz_question,
.quiz_question_image,
.quiz_choice,
.quiz_explanation,
.quiz_explanation_image,
.quiz_nextButton,
.quiz_explanation_relatedLinks {
  margin: 0 15px;
}



.quiz_progress {
  font-weight: bold;
  margin: 15px 0 10px;
}
.quiz_progress_current {
  font-size: 24px;
  margin-left: 5px;
}
.quiz_progress_total {
  font-size: 14px;
  margin-left: 5px;
}

.quiz_progress::before {
  width: 26px;
  height: 26px;
  display: inline-block;
  transform: translateY(3px);
}
.quiz-beginner .quiz_progress::before {
  content: '';
  display: inline-block;
  width: 26px;/*画像の幅*/
  height: 26px;/*画像の高さ*/
  background-image: url(../../../../documents/d/kensetsu/mark_beginner_2);
  background-size: contain;
  transform: translate(0, 5px);
}
.quiz-master .quiz_progress::before {
  content: '';
  display: inline-block;
  width: 26px;/*画像の幅*/
  height: 26px;/*画像の高さ*/
  background-image: url(../../../../documents/d/kensetsu/mark_master_2);
  background-size: contain;
  transform: translate(0, 5px);
}

.quiz_question_text {
  white-space: pre-line;
  margin-top: 15px;
}

.quiz_question_image figure,
.quiz_explanation_image figure {
  margin: 15px 0 0;
}
.quiz_question_image img,
.quiz_explanation_image img {
  max-width: 100%;
  height: auto;
}
.quiz_question_image figcaption,
.quiz_explanation_image figcaption {
  text-align: center;
}

.quiz_choice {
  margin-top: 25px;
  padding: 0 0 20px;
}

.quiz_choice li {
  list-style: none;
}
.quiz_choice li:not(:first-of-type) {
  margin-top: 5px;
}
.quiz_choice button,
.quiz_nextButton button,
.quiz_topButton {
  font-size: 18px;
  background: #fff;
  border: #000 solid;
  border-width: 2px 2px 6px;
  border-radius: 10px;
  width: 100%;
  padding: 15px;
  text-align: left;
}
.quiz_nextButton button,
.quiz_topButton {
  font-weight: bold;
  text-align: center;
  font-size: 32px;
  padding: 0 15px;
  line-height: normal;
}
.quiz_topButton {
  width: auto;
}

.quiz_overlay {
  display: none;
  z-index: 1;
  text-align: center;
  padding: 15px;

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background: rgba(255, 255, 255, 0.85);
}
.quiz-correct .quiz_overlay,
.quiz-incorrect .quiz_overlay {
  display: block;
}
.quiz_correctSign,
.quiz_incorrectSign {
  display: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.quiz-correct .quiz_correctSign {
  display: inline-block;
}
.quiz-incorrect .quiz_incorrectSign {
  display: inline-block;
}
.quiz_character1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.quiz_explanationButton {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50vw;

  background: #FFF100;
  border: 4px solid #000;
  border-radius: 50px;
  font-size: 32px;
  font-weight: bold;
  padding: 15px 60px;
  white-space: nowrap;
}


.quiz_page-explanation {
  padding-bottom: 20px;
}
.quiz_explanation dl {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  display: -ms-grid;
  -ms-grid-columns: auto;
  -ms-grid-rows: auto auto auto;
}
.quiz_explanation dt:first-of-type {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.quiz_explanation dd:first-of-type {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}
.quiz_explanation dt:nth-of-type(2) {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
.quiz_explanation dd:nth-of-type(2) {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  -ms-grid-row: 3;
}
.quiz_explanation dt {
  font-weight: bold;
}
.quiz_explanation dd {
  margin-left: 0;
}
.quiz_nextButton {
  margin-top: 30px;
}
.quiz_explanation_relatedLinks {
  background: #fff;
  border-radius: 16px;
  margin-top: 40px;
  padding: 15px 10px;
}
.quiz_explanation_relatedLinks_title_1 {
  font-size: 22px;
  font-weight: bold;
  display: block;
  text-align: center;
}
.quiz_explanation_relatedLinks_title_2 {
  display: block;
  font-size: 22px;
  text-align: center;
  margin-top: 8px;
}
.quiz_explanation_relatedLinks ul {
  margin: 10px;
  padding: 0 0 0 20px;
}
.quiz_explanation_relatedLinks ul li {
  list-style-image: url(../../../../documents/d/kensetsu/ul);
  font-size: 20px;
  line-height: 40px;
}

.quiz_page-result {
  text-align: center;
  padding: 14px 14px 30px;
}
.quiz-beginner .quiz_page-result {
  background: url(../../../../documents/d/kensetsu/bg_result_beginner_1) no-repeat left top, url(../../../../documents/d/kensetsu/bg_result_beginner_2) no-repeat right bottom, #E8F5E9;
}
.quiz-master .quiz_page-result {
  background: url(../../../../documents/d/kensetsu/bg_result_master_1) no-repeat left top, url(../../../../documents/d/kensetsu/bg_result_master_2) no-repeat right bottom, #FFEBEE;
}
.quiz_result_title {
  font-size: 32px;
  font-weight: bold;
  white-space: nowrap;
}
.quiz-beginner .quiz_result_title {
  color: #388E3C;
}
.quiz-master .quiz_result_title {
  color: #E1524E;
}
.quiz_result_title > div {
  padding-top: 25px;
}
.quiz-beginner .quiz_result_title > div {
  background: url(../../../../documents/d/kensetsu/result_title_border_beginner) no-repeat center 10px;
}
.quiz-master .quiz_result_title > div {
  background: url(../../../../documents/d/kensetsu/result_title_border_master) no-repeat center 10px;
}

.quiz-beginner .quiz_result_title::before {
  /*content: url(../../../../documents/d/kensetsu/mark_beginner_2);*/
  content: '';
  display: inline-block;
  width: 28px;/*画像の幅*/
  height: 28px;/*画像の高さ*/
  background-image: url(../../../../documents/d/kensetsu/mark_beginner_2);
  background-size: contain;
  transform: translate(0, 5px);
}
.quiz-master .quiz_result_title::before {
  /*content: url(../../../../documents/d/kensetsu/mark_master_1);-------------------------*/

  content: '';
  display: inline-block;
  width: 28px;/*画像の幅*/
  height: 28px;/*画像の高さ*/
  background-image: url(../../../../documents/d/kensetsu/mark_master_2);
  background-size: contain;
  transform: translate(0, 5px);
}
.quiz:not(.quiz-beginner) .quiz_result_logo-beginner,
.quiz:not(.quiz-master) .quiz_result_logo-master {
  display: none;
}

.quiz_result_body {
  margin-top: 15px;
}
.quiz_result_body table {
  background: #fff;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
  border-collapse: collapse;
  overflow: hidden;

  margin: 0 auto;
}
.quiz_result_body th,
.quiz_result_body td {
  padding: 5px 10px;
}
.quiz_result_body th {
  color: #fff;
}
.quiz-beginner .quiz_result_body tr:first-of-type th {
  background: url(../../../../documents/d/kensetsu/result_table_border_1) repeat-x left bottom, #336635;
}
.quiz-beginner .quiz_result_body th {
  background: #336635;
}
.quiz-master .quiz_result_body tr:first-of-type th {
  background: url(../../../../documents/d/kensetsu/result_table_border_1) repeat-x left bottom, #E1524E;
}
.quiz-master .quiz_result_body th {
  background: #E1524E;
}
.quiz-beginner .quiz_result_body tr:first-of-type td {
  background: url(../../../../documents/d/kensetsu/result_table_border_2) repeat-x left bottom;
}
.quiz-master .quiz_result_body tr:first-of-type td {
  background: url(../../../../documents/d/kensetsu/result_table_border_2) repeat-x left bottom;
}
.quiz-beginner .quiz_result_body tr:nth-of-type(2) td {
  color: #336635;
}
.quiz-master .quiz_result_body tr:nth-of-type(2) td {
  color: #E1524E;
}
.quiz_result_body strong {
  font-size: 32px;
  color: #E1524E;
  vertical-align: middle;
  margin: 0 5px 0 5px;
}
.quiz_result_body img {
  max-width: 100%;
  margin-top: 15px;
  width: 220px;
  height: auto;
}
.quiz_result_message {
  font-size: 18px;
  font-weight: bold;
  white-space: pre-line;
}
.quiz_topButton {
  margin-top: 30px;
}
.levelText{
margin:12px 0 6px 0;
}

@media screen and (min-width: 600px) {
  .quiz_page-top {
    display: grid;
    grid-template-columns: 1fr 170px 1fr;
    grid-template-rows: auto auto auto;
    display: -ms-grid;
    -ms-grid-columns: 1fr 170px 1fr;
    -ms-grid-rows: auto auto auto;
  }
  .quiz_top_title {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
  }
  .quiz_startButtonContainer-beginner {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }
  .quiz_balloon {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    margin-top: 0;
  }
  .quiz_startButtonContainer-master {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
  }
  .quiz_top_character {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
  }

  .quiz_page-quiz {
    display: grid;
    grid-template-columns: 660fr 240fr;
    grid-template-rows: 30px auto auto;
    display: -ms-grid;
    -ms-grid-columns: 660fr 240fr;
    -ms-grid-rows: 30px auto auto;
  }
  .quiz_page-quiz::before {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  .quiz_question {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }
  .quiz_choice {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }
  .quiz_question_image {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
  }
  .quiz_overlay {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
  }
  .quiz_correctSign,
  .quiz_incorrectSign {
    position: absolute;
    max-width: calc(100% - 15px);
    max-height: calc(100% - 15px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .quiz_character1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 125px));
  }
  .quiz_explanationButton {
    font-size: 38px;
    top: 50%;
  }
  


  .quiz_page-explanation {
    display: grid;
    grid-template-columns: 660fr 240fr;
    grid-template-rows: 30px auto auto auto;
    display: -ms-grid;
    -ms-grid-columns: 660fr 240fr;
    -ms-grid-rows: 30px auto auto auto;
  }
  .quiz_page-explanation::before {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  .quiz_explanation {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }
  .quiz_nextButton {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }
  .quiz_explanation_relatedLinks {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
  }
  .quiz_explanation_image {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
  }

  .quiz_explanation dt:first-of-type {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  .quiz_explanation dd:first-of-type {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }
  .quiz_explanation dt:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
  }
  .quiz_explanation dd:nth-of-type(2) {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
  }

  .quiz_nextButton {
    text-align: center;
  }
  .quiz_nextButton button {
    width: 330px;
  }
  .quiz_explanation_relatedLinks {
    padding: 15px;
  }
  .quiz_explanation_relatedLinks_title_1,
  .quiz_explanation_relatedLinks_title_2 {
    display: inline-block;
  }
  .quiz_explanation_relatedLinks_title_1 {
    font-size: 24px;
  }
  .quiz_explanation_relatedLinks_title_2 {
    font-size: 18px;
    margin-left: 10px;
  }

  .quiz_result_body {
    display: flex;
    justify-content: center;
  }

  .quiz_result_body table {
    margin: 0;
  }
  .quiz_result_body img {
    margin-left: 40px;
  }
  .quiz_result_message {
    margin-top: 25px;
  }
}