body{
  background: #000;
}
.display-none{
  display: none;
}

.matching-wrapper{
  height: auto;
  height: 38.4rem;
  background-color: #F7F8FC;
  border-radius: 0.6rem;
}
.area-matching-conts{
  padding: 3rem;
  height: 100%;
  position: relative;

}
.item-matching-conts:not(.display-none){
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #00125E;
  font-weight: bold;
}
.matching-headline img{
  width: 16.8rem;
}
.matching-title img{
  width: 25.3rem;
}
.matching-discription{
  text-align: center;
  margin-bottom: 3.8rem;
}
.matching-note{
  font-size: 1.1rem;
  color: #B10606;
  text-align: center;
  line-height: 1.5;
}
.bt-matching-start{
  width: 14rem;
  margin-bottom: 1.8rem;
}
.matching-img{
  position: absolute;
  bottom: 1.5rem;
  width: calc(100% - 5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.matching-img :is(.img-left,.img-right){
  width:5.5rem;
}


/*設問*/
.item-matching-conts.page-questions{
  padding: 0 1.8rem;
  align-items: stretch;
}
.box-question h1{
  background-image: url(../../../../recruit/img/matching/SP_match_01_question_fukidashi.png);
  background-size: 8rem;
  background-position: center top;
  width: 100%;
  text-align: center;
  height: 5.3rem;
  padding-top: 0.8rem;
  font-size: 1.6rem;
}
.question{
  text-align: left;
  font-size: 1.8rem;
}
.box-question-answer{
  position: absolute;
  bottom: 9rem;
  width: calc(100% - 9.6rem);
}
.box-question-answer .flex_row{
  margin-bottom: 0;
}
.bt_cmn.question-answer{
  width: calc(50% - 0.8rem);
}
.page-questions .matching-img{
  width: calc(100% - 3rem);
  bottom: -0.8rem;
  left: 1.5rem;
}

/*進捗*/
.progress-bar{
  display: flex;
  list-style: none;
  width: 11.6rem;
  margin: auto;
  justify-content: space-between;
  position: absolute;
  bottom: 2.5rem;
  right: 0;
  left: 0;
  margin: auto;
}
.progress-bar li{
  width: 2rem;
  height: 0.2rem;
  background-color:#CCCFDF;
}
.progress-bar li.bar-done{
  background-color:#060B62;
}
/*判定中*/
.page-judging{
  height: 100%;
}
.inner-judging{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.inner-judging picture{
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-judging picture img{
  width: 40%;
}
.judging{
  margin-top: 1rem;
}
/*診断結果*/
.page-judgement-result .matching-headline img{
  width: 8.4rem;
}
.page-judgement-result .matching-title img{
  width: 21.6rem;
}
.judgement-result{
  font-size: 9.4rem;
  line-height: 1;
  text-align: center;
}
.unit-judgement-result{
  font-size:5.3rem ;
}
.page-judgement-result .matching-img{
  left: 3rem;
}
.page-judgement-result .matching-img :is(.img-left,.img-right){
  width: 15%;
}
/*マッチ率高*/
.page-judgement-result .match-high .matching-img{
  width: calc(100% - 3rem);
    left: 1.5rem;
}
.page-judgement-result .match-high .matching-img :is(.img-left,.img-right){
  width: 25%;
}
.area-entry-btn{
  justify-content: space-between;
  flex-wrap: nowrap;
} 
a.bt-matching-entry{
  width: 47%;
}
.bt-matching-entry:nth-child(1){
  margin-right: 1rem;
}
.bt-matching-entry:nth-child(2){
  margin-left: 1rem;
}

.judge-again{
  font-size: 1.3rem;
  text-decoration: underline;
  margin: 2rem 0;
}
.bt_cmn,.judge-again{
  z-index: 1;
}
@media (min-width: 600px) {/*mobile first*/

  .matching-wrapper{
    height:43.6rem;
    display: flex;
    justify-content: center;
    width: 63rem;
/*    position: relative;*/
  }
  .area-matching-conts{
    padding: 4.3rem;
    position: static;
  }
  .matching-headline img{
    margin-bottom: 2rem;
  }
  .matching-title img{
    width: 30rem;
  }
  .bt-matching-start{
    width: 19.6rem;
  }
  .matching-img{
    width: calc(100% - 10rem);
  }
  .matching-img :is(.img-left,.img-right){
    width: 10rem;
  }
  .matching-note{
    font-size: 1.2rem;
  }
  
  /*設問*/
  .box-question,.box-question-answer{
    width:31.6rem;
  }
  .page-questions .matching-img{
    width: calc(100% - 10rem);
    bottom: 1.5rem;
    left: 5rem;
  }
  .page-questions .matching-img :is(.img-left,.img-right){
    width: 7rem;
  }
  .box-question h1{
    font-size: 2.2rem;
    background-size: 10rem;
    height: 8rem;
  }
  .progress-bar{
    bottom: 4.9rem;
    width: 22.4rem;
  }
  .progress-bar li{
    width: 1.8rem;
  }
  .box-question-answer{
    bottom: 11.7rem;
  }
  /**判定中*/
  .inner-judging picture img{
    width:9.1rem ;
  }
  .judging{
    font-size: 1.6rem;
  }

  /*判定結果*/
  .page-judgement-result .matching-headline img{
    width: 9.2rem;
  }
  .judgement-result{
    font-size: 11.6rem;
  }
  .unit-judgement-result{
    font-size: 6.4rem;
  }
  .page-judgement-result .matching-img{
    left: 5rem;
  }
  .page-judgement-result .match-high .matching-img :is(.img-left,.img-right){
    width: 39%;
  }

}