@charset "UTF-8";

/* ==========================================================================
   お客様の声
   ヒーロー・イントロ・お問い合わせは lower.css / style.css の共通パーツ
   ========================================================================== */

/* 499px以下だけ、キャッチを「心に残るひとときが、／言葉になりました」で改行する */
.p-reviews-catch-br {
  display: none;
}

@media (max-width: 499px) {
  .p-reviews-catch-br {
    display: inline;
  }
}

.p-reviews-list {
  padding-top: 80px;
}

.p-reviews-list__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: min(362px, calc(100% - 40px));
  margin-inline: auto;
}

/* 和文タイトルは共通の .section-title__ja / var(--fs-heading-lg) */

.p-reviews-list__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.p-reviews .reviews-item__media {
  display: block;
  width: 100%;
  margin: 0;
}

@media (min-width: 500px) and (max-width: 1000px) {
  .p-reviews-list__inner {
    width: min(640px, calc(100% - 80px));
  }
}

/* 769〜1000 は共通CSSがカードを横並びにするため、一覧だけSPの縦積みへ戻す。
   ヒーローとイントロは lower.css の 769px 切り替えのまま */
@media (max-width: 1000px) {
  .p-reviews .reviews-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
  }

  .p-reviews .reviews-item__media,
  .p-reviews .reviews-item__img {
    flex: none;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  .p-reviews .reviews-item__body {
    flex: none;
    width: 100%;
    gap: var(--space-20);
  }

  .p-reviews .reviews-item__review {
    gap: var(--space-16);
  }

  .p-reviews .reviews-item__reply {
    gap: var(--space-12);
  }

  .p-reviews .reviews-item__title {
    line-height: var(--lh-heading);
  }
}

@media (min-width: 1001px) {
  .p-reviews-list {
    padding-top: 160px;
  }

  .p-reviews-list__inner {
    gap: 80px;
    width: min(1440px, 100%);
    padding-inline: clamp(40px, 11.11vw, 160px);
  }

  .p-reviews-list .section-title {
    gap: 13px;
  }

  .p-reviews-list__list {
    gap: 80px;
  }

  .p-reviews .reviews-item__media {
    flex: 0 1 534px;
    min-width: 0;
    margin-top: var(--space-8);
  }

  .p-reviews .reviews-item__img {
    flex: none;
    width: 100%;
    margin-top: 0;
  }
}