@charset "utf-8";

/* ============================================

   02 - クイズ                                  */

/* --------------------------------------------
   style
----------------------------------------------- */

.wrapper {
  background: url("../img/quiz/bac-base.png");
}
.bac-illust {
  background: url("../img/quiz/bac-illust.png");
}

/* Vue.js Transition Animations */
.fade-enter, .fade-leave-to {
  position: fixed;
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}

/* ボタン */
.btn-start {
  width: 840px;
  height: 270px;
  margin: 120px auto 0;
  overflow: hidden;
}
.btn-start:active img {
  margin-top: -270px;
}

/* 博士 */
.info {
  margin-top: 131px;
}

/* -----[ 問題 ]----- */

.quiz-q {
  width: 1430px;
  min-height: 83px;
  margin: 0 auto 40px;
  padding: 6px 0 0 90px;
  background: url("../img/quiz/quiz/ico-q.png") no-repeat 0 0;
  font-size: 30px;
}
.quiz-choice {
  width: 1340px;
  margin: 0 auto 50px;
  padding: 35px 90px 27px;
  border-radius: 25px;
  background-color: #fff;
}
.quiz-choice dt {
  float: left;
  clear: both;
  width: 40px;
  height: 40px;
  margin-top: 7px;
  border-radius: 50%;
  background-color: #ffb000;
  color: #fff;
  font-weight: 600;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
}
.quiz-choice dd {
  padding-left: 60px;
  font-size: 30px;
}
.quiz-btn {
  width: 1608px;
  height: 210px;
  margin-left: -44px;
  overflow: hidden;
  font-size: 0;
  text-align: center;
}
.quiz-btn li {
  display: inline-block;
  width: 492px;
  height: 210px;
  margin: 0 22px;
  overflow: hidden;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.quiz-btn li:active {
  background-position: 0 -210px;
}
.quiz-btn input[type="button"],
.quiz-btn button,
.quiz-btn li a {
  display: block;
  width: 492px;
  height: 210px;
  overflow: hidden;
  line-height: 200;
}
.btn-a { background-image: url("../img/quiz/quiz/btn-a.png"); }
.btn-b { background-image: url("../img/quiz/quiz/btn-b.png"); }
.btn-c { background-image: url("../img/quiz/quiz/btn-c.png"); }
.quiz-step {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1350px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.quiz-step li {
  position: relative;
  float: left;
  width: 270px;
  height: 300px;
  background: url("../img/quiz/img-doctor.png") no-repeat center 136px;
  background-size: 270px auto;
  text-align: center;
}
.quiz-step img {
  display: none;
}
.quiz-step li.current img {
  display: inline;
}

/* -----[ 解説 ]----- */

.quiz {
  display: -webkit-flex;
  display: flex;
  width: 1520px;
  height: 890px;
  margin: 100px auto 40px;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.quiz-a {
  margin-bottom: 40px;
  font-size: 25px;
}
.quiz-a::before {
  float: left;
  margin: 0 1em -5px 0;
  content: url("../img/quiz/answer/ico-a.png");
}
.quiz-img {
  display: -webkit-flex;
  display: flex;
  width: 1230px;
  height: 680px;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  -webkit-flex: 1;
          flex: 1;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}
.quiz-img img {
  max-width: 1230px;
  max-height: 680px;
}
.btn-next {
  position: absolute;
  right: 87px;
  bottom: 87px;
  width: 333px;
  height: 163px;
  overflow: hidden;
}
.btn-next:active img {
  margin-top: -163px;
}

/* -----[ 結果 ]----- */

.result,
.result-right,
.result-wrong {
  margin: 0 100px 100px;
  text-align: center;
}
.result {
  margin-left: -5px;
}
.result-txt,
.result-doctor,
.result-effect {
  position: relative;
  margin: 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
}
.result-txt {
  z-index: 2;
  width: 880px;
  height: 224px;
}
.result-doctor {
  z-index: 1;
  width: 800px;
  height: 982px;
  margin-top: 100px;
}
.result-effect {
  position: absolute;
  top: 200px;
  right: 0;
  left: 0;
  width: 100%;
  height: 500px;
}
.result-step {
  width: 1530px;
  margin: 0 auto;
}
.result-step li {
  position: relative;
  float: left;
  width: 306px;
  padding-top: 390px;
  background-position: center 0;
  background-size: 306px auto;
  background-repeat: no-repeat;
  text-align: center;
}
.btn-answer {
  position: absolute;
  right: 82px;
  bottom: 77px;
  z-index: 3;
  width: 466px;
  height: 228px;
  overflow: hidden;
}
.btn-answer:active img {
  margin-top: -228px;
}
.btn-retry,
.btn-finish {
  position: absolute;
  bottom: 87px;
  z-index: 3;
  width: 333px;
  height: 163px;
  overflow: hidden;
}
.btn-retry:active img,
.btn-finish:active img {
  margin-top: -163px;
}
.btn-retry {
  left: 87px;
}
.btn-finish {
  right: 87px;
}

/* 現在 */
li.current { background-image: url("../img/quiz/img-doctor-current.png"); }

/* 正解 */
li.right { background-image: url("../img/quiz/img-doctor-right.png"); }
.result-right .result-txt    { background-image: url("../img/quiz/result/txt-right.png"); }
.result-right .result-doctor { background-image: url("../img/quiz/img-doctor-right.png"); }
.result-right .result-effect { background-image: url("../img/quiz/result/bac-right.png"); }

/* 不正解 */
li.wrong { background-image: url("../img/quiz/img-doctor-wrong.png"); }
.result-wrong .result-txt    { background-image: url("../img/quiz/result/txt-wrong.png"); }
.result-wrong .result-doctor { background-image: url("../img/quiz/img-doctor-wrong.png"); }
.result-wrong .result-effect { background-image: url("../img/quiz/result/bac-wrong.png"); }

/* パーフェクト */
.result-txt.perfect::after {
  position: absolute;
  top: -85px;
  right: -266px;
  content: url("../img/quiz/result/img-perfect.png");
}

/* --------------------------------------------
   animation
----------------------------------------------- */

.result-doctor,
.result-txt,
.result-effect {
  opacity: 0;
}
.result-right .result-doctor {
  -webkit-animation: fadeInUpBig 0.7s ease-out 0.5s 1 forwards;
          animation: fadeInUpBig 0.7s ease-out 0.5s 1 forwards;
}
.result-right .result-txt {
  -webkit-animation: fadeIn 2s ease-out 1.3s 1 forwards, rubberBand 1s ease-out 1.5s 1 forwards;
          animation: fadeIn 2s ease-out 1.3s 1 forwards, rubberBand 1s ease-out 1.5s 1 forwards;
}
.result-right .result-effect {
  -webkit-animation: fadeIn 1s ease-out 1.5s 1 forwards, tada 1s ease-out 1.5s 1 forwards;
          animation: fadeIn 1s ease-out 1.5s 1 forwards, tada 1s ease-out 1.5s 1 forwards;
}
.result-wrong .result-doctor {
  -webkit-animation: fadeInUp 1.8s ease-out 0s 1 forwards;
          animation: fadeInUp 1.8s ease-out 0s 1 forwards;
}
.result-wrong .result-txt {
  -webkit-animation: fadeInDown 1s ease 1.2s 1 forwards;
          animation: fadeInDown 1s ease 1.2s 1 forwards;
}
.result-wrong .result-effect {
  -webkit-animation: fadeIn 1s ease-out 2s 1 forwards, shake 1s ease-out 2s 2 forwards;
          animation: fadeIn 1s ease-out 2s 1 forwards, shake 1s ease-out 2s 2 forwards;
}
.result .result-txt,
.result-txt.perfect::after,
.result-step li {
  opacity: 0;
}
.result .result-txt {
  -webkit-animation: fadeIn 1s ease-out 2.5s 1 forwards;
          animation: fadeIn 1s ease-out 2.5s 1 forwards;
}
.result-txt.perfect::after {
  -webkit-animation: stamp 0.6s ease-in 2.7s 1 forwards;
          animation: stamp 0.6s ease-in 2.7s 1 forwards;
}
.result-step li:nth-child(1) {
  -webkit-animation: fadeIn 0.7s ease 0.5s 1 forwards;
          animation: fadeIn 0.7s ease 0.5s 1 forwards;
}
.result-step li:nth-child(2) {
  -webkit-animation: fadeIn 0.7s ease 1.0s 1 forwards;
          animation: fadeIn 0.7s ease 1.0s 1 forwards;
}
.result-step li:nth-child(3) {
  -webkit-animation: fadeIn 0.7s ease 1.5s 1 forwards;
          animation: fadeIn 0.7s ease 1.5s 1 forwards;
}
.result-step li:nth-child(4) {
  -webkit-animation: fadeIn 0.7s ease 2.0s 1 forwards;
          animation: fadeIn 0.7s ease 2.0s 1 forwards;
}
.result-step li:nth-child(5) {
  -webkit-animation: fadeIn 0.7s ease 2.5s 1 forwards;
          animation: fadeIn 0.7s ease 2.5s 1 forwards;
}

@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,500px,0);transform:translate3d(0,500px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,500px,0);transform:translate3d(0,500px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(0.95,1.05,1);transform:scale3d(0.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,0.95,1);transform:scale3d(1.05,0.95,1)}}@keyframes rubberBand{0%,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(0.95,1.05,1);transform:scale3d(0.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,0.95,1);transform:scale3d(1.05,0.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

@-webkit-keyframes shake{0%,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}

@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0);transform:rotate3d(0,0,1,0)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0);transform:rotate3d(0,0,1,0)}}

@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(0.9,0.9,0.9)rotate3d(0,0,1,-3deg);transform:scale3d(0.9,0.9,0.9)rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg)}}@keyframes tada{0%,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(0.9,0.9,0.9)rotate3d(0,0,1,-3deg);transform:scale3d(0.9,0.9,0.9)rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

@-webkit-keyframes stamp{0%{opacity:0;-webkit-transform:translate(0px,0px) scale(1.2);transform:translate(0px,0px) scale(1.2)}60%{opacity:1;-webkit-transform:translate(0px,0px) scale(1);transform:translate(0px,0px) scale(1)}70%{-webkit-transform:translate(0px,0px) scale(1);transform:translate(0px,0px) scale(1)}75%{-webkit-transform:translate(4px,4px) scale(1);transform:translate(4px,4px) scale(1)}80%{-webkit-transform:translate(3px,-3px) scale(1);transform:translate(3px,-3px) scale(1)}85%{-webkit-transform:translate(-3px,3px) scale(1);transform:translate(-3px,3px) scale(1)}90%{-webkit-transform:translate(-2px,-2px) scale(1);transform:translate(-2px,-2px) scale(1)}95%{-webkit-transform:translate(2px,2px) scale(1);transform:translate(2px,2px) scale(1)}100%{opacity:1;-webkit-transform:translate(0px,0px) scale(1);transform:translate(0px,0px) scale(1)}}@keyframes stamp{0%{opacity:0;-webkit-transform:translate(0px,0px) scale(1.2);transform:translate(0px,0px) scale(1.2)}60%{opacity:1;-webkit-transform:translate(0px,0px) scale(1);transform:translate(0px,0px) scale(1)}70%{-webkit-transform:translate(0px,0px) scale(1);transform:translate(0px,0px) scale(1)}75%{-webkit-transform:translate(4px,4px) scale(1);transform:translate(4px,4px) scale(1)}80%{-webkit-transform:translate(3px,-3px) scale(1);transform:translate(3px,-3px) scale(1)}85%{-webkit-transform:translate(-3px,3px) scale(1);transform:translate(-3px,3px) scale(1)}90%{-webkit-transform:translate(-2px,-2px) scale(1);transform:translate(-2px,-2px) scale(1)}95%{-webkit-transform:translate(2px,2px) scale(1);transform:translate(2px,2px) scale(1)}100%{opacity:1;-webkit-transform:translate(0px,0px) scale(1);transform:translate(0px,0px) scale(1)}}