{% scope_css %}
.custom-slider-outer { 
  padding: 40px 10px; 
  max-width: 1240px; 
  margin: 0 auto; 
}

/* 3枚以外を隠す設定 */
.item-list-slider .slick-list {
  overflow: hidden !important; 
  padding: 20px 0 !important;
}

.item-list-slider .slick-track {
  display: flex !important; 
  align-items: stretch;      
}

.card-item { 
  padding: 15px; 
  box-sizing: border-box; 
  outline: none; 
  height: auto !important;   
  display: flex !important;  
  transition: all 0.5s ease;
}

/* カードの基本デザイン */
.card-inner {
  position: relative;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 60px 25px 30px;
  width: 100%;                
  display: flex !important;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: all 0.5s ease;
}

/* --- PC用：中央強調なし設定 --- */
@media (min-width: 768px) {
  .card-item.slick-active {
    opacity: 1 !important;      /* 透明度を1（はっきり）に固定 */
    transform: scale(1) !important; /* 拡大・縮小なし */
  }
  .card-item.slick-active:nth-of-type(2) {
    z-index: 1; /* 重なり順をフラットに */
  }
}

/* 見出しのデザイン */
.card-heading {
  position: absolute;
  top: 0; left: 50%; transform: translate(-50%, -50%);
  z-index: 10;
  padding: 8px 30px !important; 
  min-width: 160px;               
  border-radius: 30px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  margin: 0 !important;
  background-color: var(--heading-bg); /* HTMLで定義した変数 */
  color: var(--heading-font);           /* HTMLで定義した変数 */
  white-space: nowrap;
  text-align: center;
}

/* 画像・本文・ボタン */
.card-image-box { height: 100px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; }
.card-image-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
.card-body-text { flex-grow: 1; font-size: 14px; margin-bottom: 15px; line-height: 1.6; color: #555; }
.card-footer-btn { margin-top: auto; }

/* ボタン：背景色はHTMLの--btn-bg（見出し色）を参照 */
.custom-main-button {
  display: block; width: fit-content; min-width: 180px; margin: 0 auto;
  text-align: center; padding: 12px 25px; border-radius: 35px; text-decoration: none; 
  font-weight: bold; 
  background-color: var(--btn-bg) !important; 
  color: var(--btn-font) !important;
}

/* --- 矢印のデザイン --- */
.slick-prev:before, .slick-next:before {
  color: #333 !important; /* ここを var(--heading-bg) にすれば矢印も連動します */
  font-size: 30px !important; 
  opacity: 1 !important;
}

.slick-prev, .slick-next {
  z-index: 100 !important; 
  width: 40px !important;
  height: 40px !important;
  top: 50% !important;      
}

/* 矢印を枠内に戻す設定 */
.slick-prev { left: 10px !important; } 
.slick-next { right: 10px !important; }

/* スマホ用（1枚表示） */
@media (max-width: 767px) {
  .custom-slider-outer { padding: 40px 20px; } 
  .card-item.slick-active { opacity: 1; transform: scale(1.0); }
  .card-heading { font-size: 16px !important; padding: 6px 20px !important; }
  .slick-prev { left: 0px !important; }
  .slick-next { right: 0px !important; }
}
{% endscope_css %}