/**
 * File: shop-symptoms.css
 * Usage: 当院で対応している症状セクション共通スタイル
 * 使用ページ: front-page, page-first, single-shop
 * ※ single-shop.css から抽出
 */

/* ========================================
   当院で対応している症状 (.ly_shopSymptoms)
   ※ CSS変数は base.css で一元管理
   ======================================== */
.ly_shopSymptoms {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bl_shopSymptoms_bgTop,
.bl_shopSymptoms_bgBtm {
  display: block;
  min-height: 64px;
  width: 100%;
  height: auto;
}

.bl_shopSymptoms_bg {
  background: linear-gradient(180deg, #fffaf0 0%, #fcc14a 100%);
  overflow: hidden;
}

.bl_shopSymptoms_inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--section-padding-inline);
}

.bl_symptomsIntro__shop {
  margin-bottom: 24px;
}

.bl_shopSymptoms_subttl {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 24px;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-dark);
}

.bl_shopSymptoms_subttl_icon {
  width: 28px;
  height: auto;
}

.bl_symptomsSlider__shop {
  margin-bottom: 48px;
}

.bl_symptomsCatList__shop .bl_symptomsCatList_note {
  color: #fff;
}

/* ----------------------------------------
   タブレット (768px以上)
   ---------------------------------------- */
@media screen and (min-width: 768px) {
  .bl_shopSymptoms_bg {
    margin-top: -40px;
  }

  .bl_symptomsIntro__shop {
    margin-bottom: 32px;
  }

  .bl_shopSymptoms_subttl {
    gap: var(--space-sm);
    margin-bottom: 32px;
    font-size: var(--font-xl);
  }

  .bl_shopSymptoms_subttl_icon {
    width: 28px;
  }

  .bl_symptomsSlider__shop {
    margin-bottom: 64px;
  }
}

/* ----------------------------------------
   PC (1024px以上)
   ---------------------------------------- */
@media screen and (min-width: 1024px) {
  .bl_symptomsIntro__shop {
    margin-bottom: 40px;
  }

  .bl_shopSymptoms_subttl {
    margin-bottom: 40px;
    font-size: var(--font-2xl);
  }

  .bl_shopSymptoms_subttl_icon {
    width: 32px;
  }
}