@charset "UTF-8";
/*--==========================
package.css - Package page styles
============================--*/

/* ========
o-voice-list (お客様の声 2カラムレイアウト)
======== */
.o-voice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

@media (max-width: 750px) {
  .o-voice-list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
  }
}

/* 奇数の要素が最後の場合にセンタリング */
.o-voice-list__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 15px);
  margin: 0 auto;
}

@media (max-width: 750px) {
  .o-voice-list__item:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: 100%;
    margin: 0;
  }
}

.o-voice-list__item .c-box-blur {
  margin-top: 0;
  height: 100%;
  position: relative;
  border-radius: 10px;
  border: 1px solid #dee0e2;
}

/* 吹き出しの三角形（ボーダー部分） */
.o-voice-list__item .c-box-blur::before {
  content: "";
  position: absolute;
  bottom: -21px;
  left: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 21px 15px 0 15px;
  border-color: #dee0e2 transparent transparent transparent;
}

/* 吹き出しの三角形（内側の白部分） */
.o-voice-list__item .c-box-blur::after {
  content: "";
  position: absolute;
  bottom: -19px;
  left: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #f8fafc transparent transparent transparent;
}

.o-voice-list__item .c-box-blur p {
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

@media (max-width: 750px) {
  .o-voice-list__item .c-box-blur p {
    font-size: 1.4rem;
  }
  
  /* SPでは三角形を小さめに（ボーダー部分） */
  .o-voice-list__item .c-box-blur::before {
    bottom: -17px;
    left: 20px;
    border-width: 16px 12px 0 12px;
  }
  
  /* SPでは三角形を小さめに（内側の白部分） */
  .o-voice-list__item .c-box-blur::after {
    bottom: -15px;
    left: 20px;
    border-width: 15px 12px 0 12px;
  }
}