.p-answerResult {
  z-index: 1;
  position: fixed;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%); }
  .p-answerResult__item {
    width: 240px;
    height: 240px;
    position: relative; }
  .p-answerResult__part {
    background-size: contain;
    background-repeat: no-repeat; }
    .p-answerResult__part--shape {
      width: 240px;
      height: 240px;
      /* background-image: url(../image/p-answerResult/correct__shape.png); */
      background-image: url(../image/p-answerResult/correct__shape_s.png);
      position: absolute;
      top: 50%;
      left: 50%;
      opacity: 0;
      transform: translate(-50%, -50%);
      animation: correctShape 1.5s cubic-bezier(0.94, 0.03, 1, 1) forwards; }
      .p-answerResult__item--incorrect .p-answerResult__part--shape {
        /* background-image: url(../image/p-answerResult/incorrect__shape.png); */
        background-image: url(../image/p-answerResult/incorrect__shape_s.png); }
      .p-answerResult__item--timeup .p-answerResult__part--shape {
        /* background-image: url(../image/p-answerResult/timeup__shape.png); */
        background: none;
      }
    .p-answerResult__part--word {
      width: 144px;
      height: 144px;
      position: absolute;
      opacity: 0;
      transform: translate(-50%, -50%); }
      .p-answerResult__item--timeup .p-answerResult__part--word {
        width: 288px; }
    .p-answerResult__part--01 {
      /* background-image: url(../image/p-answerResult/correct__01.png); */
      background-image: url(../image/p-answerResult/correct__01_s.png);
      top: 52%;
      left: 20%;
      animation: correct01 0.8s cubic-bezier(1, 0, 1, 1) 0.5s forwards; }
      .p-answerResult__item--incorrect .p-answerResult__part--01 {
        /* background-image: url(../image/p-answerResult/incorrect__01.png); */
        background-image: url(../image/p-answerResult/incorrect__01_s.png);
        top: 52%;
        /* left: 18%; */
        width: 120px;
        height: 120px;
        left: 8%; }
      .p-answerResult__item--timeup .p-answerResult__part--01 {
        /* background-image: url(../image/p-answerResult/timeup__01.png); */
        background-image: url(../image/p-answerResult/timeup__01_s.png);
        /* top: 60%;
        left: 12%; */
        left: 50%;
        animation: timeup 1.2s cubic-bezier(1, 0, 0.3, 0.99) 0.5s forwards; }
    .p-answerResult__part--02 {
      /* background-image: url(../image/p-answerResult/correct__02.png); */
      background-image: url(../image/p-answerResult/correct__02_s.png);
      /* top: 44%;
      left: 60%; */
      top: 52%;
      left: 77%;
      animation: correct01 0.8s cubic-bezier(1, 0, 1, 1) 0.7s forwards; }
      .p-answerResult__item--incorrect .p-answerResult__part--02 {
        /* background-image: url(../image/p-answerResult/incorrect__02.png); */
        background-image: url(../image/p-answerResult/incorrect__02_s.png);
        /* top: 48%;
        left: 50%; */
        left: 52%;
        width: 120px;
        height: 120px;
        top: 52%; }
      .p-answerResult__item--timeup .p-answerResult__part--02 {
        /* background-image: url(../image/p-answerResult/timeup__02.png); */
        background-image: url(../image/p-answerResult/timeup__02_s.png);
        /* top: 60%;
        left: 90%; */
        top: 85%;
        left: 50%;
        animation: timeup 0.8s cubic-bezier(1, 0, 0.21, 0.22) 0.5s forwards, timeupEnd 1.2s cubic-bezier(0, 0.79, 0.29, 1.17) 0.8s forwards; }
      .p-answerResult__part--03 {
        /* background-image: url(../image/p-answerResult/correct__03.png); */
        top: 56%;
        left: 88%;
        animation: correct01 0.8s cubic-bezier(1, 0, 1, 1) 0.9s forwards; }
      .p-answerResult__item--correct .p-answerResult__part--03 {
        animation: correct01 0.8s cubic-bezier(1, 0, 1, 1) 0.9s forwards, correctEnd 1.2s cubic-bezier(1, -0.45, 0, 1.86) 1.2s forwards; }
      .p-answerResult__item--incorrect .p-answerResult__part--03 {
        /* background-image: url(../image/p-answerResult/incorrect__03.png); */
        background-image: url(../image/p-answerResult/incorrect__03_s.png);
        /* top: 56%; */
        /* left: 80%; */
        top: 52%;
        width: 120px;
        height: 120px;
        left: 95%; }
    .p-answerResult__part--04 {
      animation: correct01 0.8s cubic-bezier(1, 0, 1, 1) 1.2s forwards, incorrectEnd 0.8s cubic-bezier(1, -0.02, 0, 1.86) 1.4s forwards; }
      .p-answerResult__item--incorrect .p-answerResult__part--04 {
        /* background-image: url(../image/p-answerResult/incorrect__04.png); */
        top: 68%;
        left: 108%; }
@keyframes correctShape {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale3d(10, 10, 10);
    filter: blur(10px); }
  3% {
    opacity: 0;
    filter: blur(10px); }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    filter: blur(0px); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    filter: blur(0px); } }
@keyframes correct01 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale3d(2, 2, 2) rotate3d(0, 0, 1, -16deg); }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale3d(1, 1, 1); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg); } }
@keyframes timeup {
  0% {
    opacity: 0;
    transform: translate(-200%, -50%) scale3d(1.2, 1.2, 1.2); }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale3d(1, 1, 1); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale3d(1, 1, 1); } }
@keyframes correctEnd {
  0% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform-origin: 40% 48%; }
  64% {
    transform: translate(-50%, -50%) scale3d(1.2, 1.2, 1.2);
    transform-origin: 40% 48%; }
  100% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform-origin: 0% 0%;
    transform-origin: 40% 48%; } }
@keyframes incorrectEnd {
  0% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform-origin: 40% 48%; }
  100% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1) rotate3d(0, 0, 1, 16deg);
    transform-origin: 0% 0%;
    transform-origin: 40% 48%; } }
@keyframes timeupEnd {
  0% {
    transform: translate(-50%, -50%); }
  80% {
    transform: translate(-20%, -50%) rotate3d(0, 0, 1, 4deg);
    transform-origin: center; }
  100% {
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%; } }