@charset "UTF-8";
/* 推薦文セクションのCSS - トップコンテナーと同じ構造 */

#testimonial-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
}

.testimonial-slider-box, .inner {
  max-width: 1000px;
  width: 90%;
  margin: 40px auto;
}
.testimonial-slider {
  position: relative;
  z-index: 1;
}
.testimonial-item01,
.testimonial-item02,
.testimonial-item03 {
  border: 1px solid #777;
  position: relative;
}
.testimonial-slider-item {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: #fff;
}

.testimonial-content-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.testimonial-stars {
  color: #f4c430;
  font-size: 2.88rem;  /* LPの1.8rem = 28.8px → SOIFULの2.88rem */
  margin-bottom: 3.2rem;
  letter-spacing: 0.32rem;
  filter: drop-shadow(0 0 10px rgba(244, 196, 48, 0.5));
}

.testimonial-title {
  font-size: 2.4rem;  /* LPの1.5rem = 24px → SOIFULの2.4rem */
  font-weight: 700;
  color: #333;
  margin-bottom: 2.4rem;
}

.testimonial-quote {
  font-size: 1.68rem;  /* LPの1.05rem = 16.8px → SOIFULの1.68rem */
  line-height: 1.8;
  color: #333;
  font-weight: 400;
  margin-bottom: 4.8rem;
  text-align: left;
  font-style: normal;
  padding: 0 3.2rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  padding-top: 3.2rem;
}

.testimonial-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-info {
  text-align: left;  /* 左揃え */
}

.testimonial-info h4 {
  font-size: 1.92rem;  /* LPの1.2rem = 19.2px → SOIFULの1.92rem */
  font-weight: 700;
  color: #333;
  margin: 0;
  margin-bottom: 0.8rem;  /* 名前と肩書きの間隔を広げる */
  text-align: left;  /* 左揃え */
  display: flex;
  align-items: baseline;
  gap: 0.48rem;  /* LPの0.3rem = 4.8px → SOIFULの0.48rem */
}

.testimonial-info h4 .honorific {
  font-size: 1.52rem;  /* LPの0.95rem = 15.2px → SOIFULの1.52rem */
  font-weight: 500;
  opacity: 0.9;
}

.testimonial-info p {
  font-size: 1.6rem;  /* LPの1rem = 16px → SOIFULの1.6rem */
  font-weight: 400;  /* フォントウェイトを細くする */
  color: #666;
  margin: 0;
  text-align: left;  /* 左揃え */
}

.testimonial-divider {
  font-size: 3.2rem;  /* LPの2rem = 32px → SOIFULの3.2rem */
  color: #ddd;
  font-weight: 100;
}

.company-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* 初期状態ではスマホ用スライダーを非表示にする */
.testimonial-slider-mobile {
  display: none;
}

/*矢印の設定*/
.testimonial-slider .slick-prev, .testimonial-slider .slick-next {
  position: absolute;
  z-index: 3;
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #555; /*矢印の色*/
  border-right: 2px solid #555; /*矢印の色*/
  height: 25px;
  width: 25px;
}
.testimonial-slider .slick-prev { /*戻る矢印の位置と形状*/
  left: -2%;
  transform: rotate(-135deg);
}
.testimonial-slider .slick-next { /*次へ矢印の位置と形状*/
  right: -2%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.testimonial-slider .slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: 20px 0 0 0;
}
.testimonial-slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.testimonial-slider .slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 0%;
  border: 1px solid #555;
  padding: 5px;
  margin: 0 10px;
  background: #fff; /*ドットボタンの色*/
}
.testimonial-slider .slick-dots .slick-active button {
  background: #555; /*ドットボタンの現在地表示の色*/
}

@media (max-width: 600px) {
  /* 600px以下でPC用スライダーを非表示にし、スマホ用スライダーを表示 */
  .testimonial-slider-pc {
    display: none;
  }
  .testimonial-slider-mobile {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .testimonial-slider .slick-dots {
    margin: 20px 0 20px 0;
  }
  .testimonial-slider-item {
    aspect-ratio: unset;
    height: auto !important;
    min-height: 70vh;
  }
  .testimonial-slider .slick-prev, .testimonial-slider .slick-next {
    border-top: rgba(0, 0, 0, 0.00);
    border-right: rgba(0, 0, 0, 0.00);
  }
  /* スマホ用推薦文の調整 */
  .testimonial-slider-item {
    padding: 20px !important;
    height: auto !important;
    min-height: 70vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }
  .testimonial-title {
    font-size: 2.08rem;  /* LPの1.3rem = 20.8px → SOIFULの2.08rem */
  }
  .testimonial-quote {
    font-size: 1.52rem;  /* LPの0.95rem = 15.2px → SOIFULの1.52rem */
    padding: 0 1.6rem;
  }
  .testimonial-author {
    flex-direction: column;
    gap: 1.6rem;
    text-align: center;
  }
  .testimonial-photo {
    width: 100px;
    height: 100px;
    margin-bottom: 0.8rem;
  }
  .testimonial-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }
  .testimonial-divider {
    display: none;
  }
  
  /* SP版のコンテンツオーバーレイ調整 */
  .testimonial-content-overlay {
    height: auto !important;
    min-height: auto !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
  }
  
  .testimonial-stars {
    margin-bottom: 1.5rem;
    font-size: 2.4rem;
  }
  
  .testimonial-title {
    margin-bottom: 1.2rem;
  }
  
  .testimonial-quote {
    margin-bottom: 2rem;
    flex: 1;
  }
  
  /* SP版とPC版のタイトル表示切り替え */
  .sp-title-break {
    display: inline;
  }
  .pc-title-break {
    display: none;
  }
}

/* PC版では逆にする */
@media (min-width: 601px) {
  .sp-title-break {
    display: none;
  }
  .pc-title-break {
    display: inline;
  }
}