/* ========================================
   CASE 記事スライダー（共通）
   TOP・施術詳細ページ
======================================== */

/* ----------------------------------------
   スライダー基本設定
---------------------------------------- */

.post-slider {
  max-width: 1142px;
  margin-left: auto;
  margin-right: auto;
}

.post-slider .p-postList {
  flex-wrap: nowrap;
  margin: 0;
}

.post-slider .p-postList__item {
  height: auto;
  padding: 0 !important;
}


/* ----------------------------------------
   カード幅
---------------------------------------- */

/* PC */
@media (min-width: 960px) {

  .post-slider .p-postList__item {
    width: 374px !important;
  }

}

/* SP・タブレット */
@media (max-width: 959px) {

  .post-slider .p-postList__item {
    width: 280px !important;
  }

}


/* ----------------------------------------
   SP：スライダー左右の余白
---------------------------------------- */

@media (max-width: 767px) {

  .post-slider {
    width: calc(100% + 8px);
    max-width: none;
    margin-left: 12px;
  }

}


/* ----------------------------------------
   サムネイル（4:5）
---------------------------------------- */

.post-slider .p-postList__thumb {
  overflow: hidden;
  border-radius: 10px;
}

/* SWELL標準の画像比率を解除 */
.post-slider .c-postThumb__figure {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* SWELL標準の疑似要素を無効化 */
.post-slider .c-postThumb__figure::before {
  content: none;
}

/* 画像を枠いっぱいに表示 */
.post-slider .c-postThumb__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ----------------------------------------
   記事本文エリア
---------------------------------------- */

.post-slider .p-postList__body {
  padding-top: 20px;
}


/* ----------------------------------------
   日付
---------------------------------------- */

.post-slider .p-postList__times {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.08em;
  opacity: 1;
}


/* ----------------------------------------
   記事タイトル
---------------------------------------- */

.post-slider .p-postList__title {
  margin: 8px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}


/* ----------------------------------------
   症例紹介文（ACF）
---------------------------------------- */

.post-slider .case-description {
  margin: 0;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.08em;
  white-space: pre-line;
}


/* ----------------------------------------
   ホバー時の色変化を無効化
---------------------------------------- */

.post-slider .p-postList__link:hover,
.post-slider .p-postList__thumb:hover,
.post-slider .c-postThumb:hover,
.post-slider .c-postThumb__img:hover {
  opacity: 1 !important;
  filter: none !important;
}


/* ----------------------------------------
   疑似要素の表示・操作を無効化
---------------------------------------- */

.post-slider .p-postList__thumb::before,
.post-slider .p-postList__thumb::after,
.post-slider .c-postThumb__figure::before,
.post-slider .c-postThumb__figure::after {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ----------------------------------------
   画像の拡大を無効化
---------------------------------------- */

.post-slider .p-postList__item:hover .c-postThumb__img,
.post-slider .p-postList__item:active .c-postThumb__img {
  transform: none !important;
}


/* ========================================
   CASE 記事スライダー：スマホ表示
======================================== */

@media (max-width: 767px) {

  /* 日付 */
  .post-slider .p-postList__times {
    font-weight: 600;
  }

  /* 記事タイトル */
  .post-slider .p-postList__title {
    font-size: 18px !important;
  }

}