@charset "UTF-8";
/* -------------------------------------
beginner_common
------------------------------------- */

/* -------------------------------------
question
------------------------------------- */
.question .bg_wh::before {
  content: "";
  /* width: 160px; */
  width: 18.78vh;
  /* max-width: 22.01vw; */
  max-width: 13.56vw;
  height: 169px;
  background: url(../imgs/beginner/illust_1.png) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25%, -53%);
  -webkit-transform: translate(-25%, -53%);
  -ms-transform: translate(-25%, -53%);
  -ms-transform: translate(-25%, -53%);
  -o-transform: translate(-25%, -53%);
}

.question .choice .choice_item:hover {
  border-color: #50b4ff;
  background-color: #dcf0ff;
}
.question .choice .choice_item:hover::before {
  background-color: #50b4ff;
}

/* -------------------------------------
answer
------------------------------------- */
.answer.correct .bg_wh::before {
  content: "";
  /* width: 141px; */
  width: 15.67vh;
  max-width: 18.36vw;
  height: 169px;
  background: url(../imgs/beginner/illust_2.png) no-repeat center/contain;
  position: absolute;
  top: 15%;
  left: 11%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.answer.disappointing .bg_wh::before {
  content: "";
  /* width: 101px; */
  width: 11.22vh;
  max-width: 13.15vw;
  height: 162px;
  background: url(../imgs/beginner/illust_3.png) no-repeat center/contain;
  position: absolute;
  top: 15%;
  left: 10%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/* q3 */
.answer #q3 .txtblk {
  width: 60%;
}
.answer #q3 .imgblk {
  width: 40%;
  max-width: 392px;
}

@media screen and (max-width: 640px) {
  .question .bg_wh::before {
    width: 25%;
    max-width: 102px;
    height: 107px;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transform: translate(-21%, 53%);
    -webkit-transform: translate(-21%, 53%);
    -ms-transform: translate(-21%, 53%);
    -ms-transform: translate(-21%, 53%);
    -o-transform: translate(-21%, 53%);
  }
  /* q1 */
  .question #q1 .bg_wh {
    padding: 15.48% 5px 14.29%;
  }

  /* -------------------------------------
answer
------------------------------------- */
  .answer.correct .bg_wh::before {
    width: 21%;
    max-width: 84px;
    height: 100px;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: translate(-25%, 34%);
    -webkit-transform: translate(-25%, 34%);
    -ms-transform: translate(-25%, 34%);
    -ms-transform: translate(-25%, 34%);
    -o-transform: translate(-25%, 34%);
  }
  .answer.disappointing .bg_wh::before {
    width: 15%;
    max-width: 61px;
    height: 98px;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: translate(-25%, 34%);
    -webkit-transform: translate(-25%, 34%);
    -ms-transform: translate(-25%, 34%);
    -ms-transform: translate(-25%, 34%);
    -o-transform: translate(-25%, 34%);
  }
}