@charset "utf-8";

.voice{
  width:80%;
  margin:0 auto;
  max-width:1080px;
}

.voice > p{
  margin-bottom:5rem;
}

.voice-wrap{
  background:#fff;
  border-radius:20px;
  padding:2rem 5%;
  display:flex;
  justify-content: space-between;
}

.voice-wrap:not(:last-child){
  margin-bottom:20px;
}

.voice-img{
  width:120px;
  text-align:center;
}

.voice-img img{
  margin-bottom:1rem;
}

.voice-text{
  width:calc(100% - 180px);
}

.voice-text div{
  display:flex;
  gap:2rem;
  align-items:center;
}

.voice-text div p:first-child{
  color:#fff;
  line-height:1;
  padding:12px 24px;
  border-radius:1.5rem;
  background:#57AA84;
}
.voice-text div p strong{
  color:#57AA84;
  font-weight:bold;
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  line-height:1;
  margin:0 4px;
}

.voice-text h2{
  margin:20px 0;
  font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
  line-height:1.5;
  color:#57AA84;
}

.voice-text h2 strong{
  font-weight:bold;
}

.voice-wrap:nth-child(3) .voice-text h2,
.voice-wrap:nth-child(3) .voice-text div p strong{
  color:#E57AAC;
}

.voice-wrap:nth-child(3) .voice-text div p:first-child{
  background:#E57AAC;
}

.voice-wrap:nth-child(4) .voice-text h2,
.voice-wrap:nth-child(4) .voice-text div p strong{
  color:#F07E2E;
}

.voice-wrap:nth-child(4) .voice-text div p:first-child{
  background:#F07E2E;
}

.voice-wrap:nth-child(5) .voice-text h2,
.voice-wrap:nth-child(5) .voice-text div p strong{
  color:#2F6730;
}

.voice-wrap:nth-child(5) .voice-text div p:first-child{
  background:#2F6730;
}

.voice-wrap:nth-child(6) .voice-text h2,
.voice-wrap:nth-child(6) .voice-text div p strong{
  color:#33B0BE;
}

.voice-wrap:nth-child(6) .voice-text div p:first-child{
  background:#33B0BE;
}

.voice-wrap:nth-child(7) .voice-text h2,
.voice-wrap:nth-child(7) .voice-text div p strong{
  color:#0C5EA5;
}

.voice-wrap:nth-child(7) .voice-text div p:first-child{
  background:#0C5EA5;
}

.voice-wrap:nth-child(8) .voice-text h2,
.voice-wrap:nth-child(8) .voice-text div p strong{
  color:#9D3E8A;
}

.voice-wrap:nth-child(8) .voice-text div p:first-child{
  background:#9D3E8A;
}


@media screen and (max-width: 1024px) {
  .voice-img {
    width: 100px;
  }
  .voice-text {
    width: calc(100% - 130px);
  }
}

@media screen and (max-width: 767px) {
  .voice-wrap{
    flex-direction: column;
    align-items: center;
  }
  .voice-text {
    width: 100% ;
  }
  .voice{
    width:90%;
  }
  .voice > p {
    margin-bottom: 2rem;
  }
  .voice-img {
    display:flex;
    flex-direction: column-reverse;
  }

}