@charset "utf-8";
.rec_page_mv {
  background: url("../img/rec_page_hd.webp")no-repeat center / cover;
}
.page_section {
  counter-reset: num 0; 
}
.rec_section--title {
  display: flex;
  align-items: center;
  gap: 10px;
  &::before {
    /* numの値を+1する指定 */
    counter-increment: num 1;
    /* counter(num)でカウンタの値を出力 */
    content: 'Q' counter(num) ' ';
    color: var(--main-color);
    font-size: var(--font-24);
    min-width: 25px;
  }
}
.rec_section--txt {
  margin-bottom: var(--space-20);
}
.rec_voice--item {
  margin-block: var(--space-65);
}
/* Q1 */
.rec_voice--flex {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rec_voice--flex_inner {
  background: var(--light-yellow);
  width: calc((100% - 40px) / 5);
  padding: var(--space-20) 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  @media screen and (max-width: 767px) {
    width: calc((100% - 10px) / 2);
  }
}
.rec_voice--flex_title {
  font-weight: bold;
}
.rec_voice--flex_people {
  color: #76B9DE;
  span {
    font-size: var(--font-48);
    font-weight: bold;
    letter-spacing: var(--letter-32);
  }
}
/* Q2,Q3 */
.rec_voice--itemFlex {
  display: flex;
  gap: var(--space-20);
  margin-block: var(--space-65);
  .rec_voice--item {
    margin-block: 0;
    width: calc((100% - 20px) / 2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
  .rec_voice--itemFlex_img {
    display: flex;
    justify-content: center;
  }
  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 40px;
  }
}
/* Q4 */
.voice_comment {
  border-radius: 100px;
  border: 1px solid #76B9DE;
  padding: 30px;
  min-height: 120px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  &::before {
    content: "";
    background: url(../img/voice_comment.svg) no-repeat center / cover;
    width: 27px;
    height: 27px;
    top: -27px;
    left: 70px;
    position: absolute;
  }
  @media screen and (max-width: 767px) {
    padding: 20px;
  }
}
.swiper-slide {
  width: auto;
  min-width: 232px;
  padding-top: 30px;
}
.top_swiper--button {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-20);
  margin-top: 20px;
}

.voice-button-prev,
.voice-button-next {
  position: relative;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 50%;

  background: var(--main-color);
  color: #fff;

  cursor: pointer;

  &::after {
    font-size: 14px;
  }
}