/* 背景装飾要素のスタイル */
/* 3級用の背景装飾 */
.quiz-bg-image-class3 {
  position: absolute;
  width: 1130px;
  height: 662px;
  transform: translateX(-10%);
  background-image: url(../../images/quizPage/3class_decoration.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -20;
}

/* 2級用の背景装飾 */
.quiz-bg-image-class2 {
  position: absolute;
  width: 1130px;
  height: 662px;
  transform: translateX(-10%);
  background-image: url(../../images/quizPage/2class_decoration.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -20;
}

/* 1級用の背景装飾 */
.quiz-bg-image-class1 {
  position: absolute;
  width: 1130px;
  height: 662px;
  transform: translateX(-10%);
  background-image: url(../../images/quizPage/1class_decoration.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -20;
}

/* 超1級用の背景装飾 */
.quiz-bg-image-class0 {
  position: absolute;
  width: 1130px;
  height: 662px;
  transform: translateX(-10%);
  background-image: url(../../images/quizPage/ex1class_decoration.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -20;
} 

@media screen and (min-width: 768px) and (max-width: 1024px ) {
  .quiz-bg-image-class3 {
    width: 100%;
    height: 100%;
    background-image: url(../../images/quizPage/tablet_3class_decoration.svg);
    background-size: 100% 100%;
  }

  .quiz-bg-image-class2 {
    width: 100%;
    height: 100%;
    background-image: url(../../images/quizPage/tablet_2class_decoration.svg);
    background-size: 100% 100%;
  }

  .quiz-bg-image-class1 {
    width: 100%;
    height: 100%;
    background-image: url(../../images/quizPage/tablet_1class_decoration.svg);
    background-size: 100% 100%;
  }

  .quiz-bg-image-class0 {
    width: 100%;
    height: 100%;
    background-image: url(../../images/quizPage/tablet_ex1class_decoration.svg);
    background-size: 100% 100%;
  }
}

@media screen and (min-width: 360px) and (max-width: 767px) {
  .quiz-bg-image-class3 {
    position: fixed;
    width: 120vw;
    height: 660px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_3class_decoration.svg);
    background-size: 100% 100%;
  }

  .quiz-bg-image-class2 {
    position: fixed;
    width: 120vw;
    height: 660px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_2class_decoration.svg);
    background-size: 100% 100%;
  }

  .quiz-bg-image-class1 {
    position: fixed;
    width: 120vw;
    height: 660px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_1class_decoration.svg);
    background-size: 100% 100%;
  }

  .quiz-bg-image-class0 {
    position: fixed;
    width: 120vw;
    height: 660px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_ex1class_decoration.svg);
    background-size: 100% 100%;
  }
}

@media (max-width: 359px) {
  .quiz-bg-image-class3 {
    position: fixed;
    width: 130vw;
    height: 525px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_3class_decoration_small.svg);
    }

  .quiz-bg-image-class2 {
    position: fixed;
    width: 120vw;
    height: 525px;
    max-height: 525px;
    min-height: 525px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);  
    background-image: url(../../images/quizPage/sp_2class_decoration_small.svg);
  }

  .quiz-bg-image-class1 {
    position: fixed;
    width: 120vw;
    height: 525px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_1class_decoration_small.svg);
  }

  .quiz-bg-image-class0 {
    position: fixed;
    width: 120vw;
    height: 525px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); 
    background-image: url(../../images/quizPage/sp_ex1class_decoration_small.svg);
  }
}