/**
 * File: recommend-voice.css
 * Usage: 推薦者の声セクション共通スタイル
 * 使用ページ: front-page, single-symptoms, single-shop
 * ※ single-symptoms.css から抽出
 */

/* ========================================
   推薦者の声
   ======================================== */

/* ========================================
   推薦者の声 (.ly_assessment) 
   ======================================== */



.ly_recommendVoice {
  overflow-x: clip;
  padding: 100px 0 100px ;
}
@media (max-width: 768px) {
  .ly_recommendVoice {
    padding: 60px 0 40px ;
  }
}

.ly_recommendVoice_inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-20);
  position: relative;
}

.ly_recommendVoice .bl_assesment_h2_sub{
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align:center;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .ly_recommendVoice .bl_assesment_h2_sub{
    font-size: 12px;
  }
}
.ly_recommendVoice .bl_assesment_h2_sub span{
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding: 5px 16px;
}

.ly_recommendVoice h2{
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 80px;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .ly_recommendVoice h2{
    font-size: 20px;
    margin-bottom: 40px;
  }
}
.bl_recommendVoice_content {
  position: relative;
  padding: 0;
}
.bl_recommendVoice_text span{
  color: #BF5C00;
}

.bl_recommendVoice_company {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}


.bl_recommendVoice_name {
  margin-top: 4px;
  font-size: clamp(1.5rem, 0.619rem + 3.81vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.bl_recommendVoice_name small{
  font-size: clamp(0.875rem, 0.214rem + 2.86vw, 1.25rem);
}

.bl_recommendVoice_badge {
  position: absolute;
  top: -16px;
  left: -10%;
  z-index: 2;
  max-width: 80px;
  height: auto;
  width: 38%;
}
.bl_recommendVoice_imgWrap {
  position: relative;
  flex-shrink: 0;
}
.bl_recommendVoice_badge img {
  width: 100%;
  height: auto;
}

.bl_recommendVoice_thumb {
  width: 100%;
}
@media (min-width: 768px) {
  .bl_recommendVoice_imgWrap{
    width: 45%;
    max-width: 240px;
  }
}

.bl_recommendVoice_thumb img {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}

.bl_recommendVoice_meta {
  margin-top: 10px;
  margin-bottom: 24px;
}





.bl_recommendVoice_sliderWrap {
  position: relative;
  margin-inline: auto;
  overflow: visible;
  padding-inline: 16px;
}

.bl_recommendVoice_btn {
  position: absolute;
  top: 40%;
  z-index: 10;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.bl_recommendVoice_btn__prev {
  left: 8px;
}

.bl_recommendVoice_btn__next {
  right: 8px;
}

.bl_recommendVoice_slider {
  max-width: 100%;
  margin-inline: auto;
}

.bl_recommendVoiceSwiper {
  overflow: visible;
}

.bl_recommendVoiceSwiper.swiper,
.bl_recommendVoiceSwiper.swiper-horizontal {
  overflow: visible;
}

.bl_recommendVoice_slide {
  height: auto;
}

.bl_recommendVoice_slide:only-child {
  margin-inline: auto;
}

.bl_recommendVoice_card {
  position: relative;
  height: 100%;
  max-width: 400px;
  margin-inline: auto;
  background-color: #F2F4F5;
  border-radius: 16px;
  padding-inline: 8px;
  padding-block: 12px;
}

@media (max-width: 767px) {
  .bl_recommendVoice_card {
    padding-inline: 15px;
    padding-block: 15px;
  }
}


.bl_recommendVoice_noImg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  font-size: var(--font-xs);
  color: var(--color-gray);
}


.bl_recommendVoice_quote {
  position: relative;
  margin: 0;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-dark);
}

.bl_recommendVoice_highlight {
  color: var(--color-primary);
}

.bl_recommendVoice_comma {
  position: absolute;
  top: -12px;
  right: -8px;
  width: 36px;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.bl_recommendVoice_pager {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: var(--font-7xl);
  font-weight: 700;
  color: var(--color-cream-dark);
  line-height: 1;
}

/* ----------------------------------------
   タブレット (768px以上)
   ---------------------------------------- */
@media screen and (min-width: 768px) {

  .ly_recommendVoice_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
  }
  .ly_recommendVoice_wrapper .bl_recommendVoice_slide{
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
    width: 80%;
    margin: 0 auto;
  }

  .bl_recommendVoice_ttl {
    margin-bottom: 32px;
    font-size: var(--font-3xl);
  }

  .bl_recommendVoice_btn {
    top: 50%;
  }

  .bl_recommendVoice_btn__prev {
    left: 8px;
  }

  .bl_recommendVoice_btn__next {
    right: 8px;
  }

  .bl_recommendVoice_card {
    display: flex;
    align-items: stretch;
    max-width: none;
    padding: 16px;
    border-radius: 40px;
  }
}

/* ----------------------------------------
   PC (1024px以上)
   ---------------------------------------- */
@media screen and (min-width: 1024px) {

  .bl_recommendVoice_text {
    font-size: 20px;
    font-weight: 700;
  }

  .bl_recommendVoice_slide.swiper-slide-active {
    max-width: 1440px;
  }

  .bl_recommendVoice_pager {
    right: 32px;
    bottom: 24px;
    font-size: var(--font-9xl);
  }
  .ly_recommendVoice_wrapper .bl_recommendVoice_slide{
    width: calc(50% - 1.5rem);
  }
}