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

/* -------------------------------------
question
------------------------------------- */
.question .bg_wh {
  min-height: 20vh;
  padding: 3.33vh 5.56vh 1.89vh;
}
.question .bg_wh::before {
  content: "";
  /* width: 164px; */
  width: 18.22vh;
  max-width: 13.9vw;
  height: 160px;
  background: url(../imgs/advanced/illust_1.png) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-33%, -53%);
  -webkit-transform: translate(-33%, -53%);
  -ms-transform: translate(-33%, -53%);
  -ms-transform: translate(-33%, -53%);
  -o-transform: translate(-33%, -53%);
}
.question .q_blk {
  display: flex;
  justify-content: center;
  align-items: center;
}

.question .choice .choice_item:hover {
  border-color: #ee87b4;
  background-color: #fce7f0;
}
.question .choice .choice_item:hover::before {
  background-color: #ee87b4;
}

/* -------------------------------------
answer
------------------------------------- */
.answer.correct .bg_wh::before {
  content: "";
  /* width: 154px; */
  width: 17.11vh;
  max-width: 20.5vw;
  height: 145px;
  background: url(../imgs/advanced/illust_2.png) no-repeat center/contain;
  position: absolute;
  top: 25%;
  left: 4%;
  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: 122px; */
  width: 13.56vh;
  max-width: 15.89vw;
  height: 141px;
  background: url(../imgs/advanced/illust_3.png) no-repeat center/contain;
  position: absolute;
  top: 26%;
  left: 3%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/* -------------------------------------
result
------------------------------------- */

@media screen and (max-width: 640px) {
  .question .bg_wh {
    min-height: initial;
    padding: 65px 5px 60px;
  }
  .question .bg_wh::before {
    width: 25%;
    max-width: 105px;
    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%);
  }
  /* -------------------------------------
answer
------------------------------------- */
  .answer.correct .bg_wh::before {
    width: 23%;
    max-width: 93px;
    height: 88px;
    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: 18%;
    max-width: 73px;
    height: 85px;
    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%);
  }
}