/**
 * File: archive-symptoms.css
 * Usage: archive-symptoms.php（お悩み一覧ページ）専用のスタイルを定義します。
 * Note: イントロ・スライダー・カテゴリーリストの共通スタイルは base.css に定義
 */

/* ========================================
   レイアウト
   ======================================== */
.ly_cont.ly_symptoms {
  padding-inline: 16px;
  padding-block: 40px 80px;
  background-color: #fff;
  overflow: hidden;
}

.bl_symptoms_inner{
  padding-inline: 40px;
  max-width: var(--max-width-content);
  margin-inline: auto;
  text-align: center;
  margin-bottom: 80px;
}

/* ========================================
   archive-symptoms専用：noteの色上書き
   ======================================== */
.ly_symptoms .bl_symptomsCatList_note {
  color: var(--color-text);
}
.ly_symptoms  .bl_symptomsSlide_link{
  background: #F2F4F5;
}
.bl_symptomsCatGroup{
  color: var(--color-text);
  border-color: var(--color-text);
}
.bl_symptomsCatGroup_ttl{
  color: var(--color-text);
}
.bl_symptomsCatGroup_item{
  border-color: var(--color-text);
  color: var(--color-text);
}
.bl_symptomsCatGroup_item::after{
  content: url('../img/icons/arrow_right.svg');
  background: #00000008;
}
.bl_symptomsCatGroup:nth-last-of-type(1){
  border-bottom: 1px solid var(--color-text);
}
.bl_symptomsSlider_btn__prev{
  background: url('../img/icons/arrow_button_left_navy.svg') no-repeat center center / contain;  
}
.bl_symptomsSlider_btn__next{
  background: url('../img/icons/arrow_button_right_navy.svg') no-repeat center center / contain;  
}
.bl_symptomsSlider_btn__prev img,
.bl_symptomsSlider_btn__next img{
  opacity: 0;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  background-color: #001E3C;
  opacity: 0.2;
}
.swiper_btn__wrapper.white .swiper-pagination-bullet-active{
  opacity: 1;
}
/* ========================================
   Tablet (768px〜)
   ======================================== */
@media screen and (min-width: 768px) {
  .ly_cont.ly_symptoms {
    padding-inline: 60px;
    padding-block: 70px 120px;
  }
}

/* ========================================
   PC (1024px〜)
   ======================================== */
@media screen and (min-width: 1024px) {
  .ly_cont.ly_symptoms {
    padding-inline: 80px;
  }
}