/* ============================================
   「ココがすごい！」セクション
   スマホ表示時のみカルーセルスライダー化
   PC表示には一切影響なし（767px以下のみ適用）
   既存の style.css は変更せず、本ファイルを
   style.css の後に読み込むことで上書きします。
   ============================================ */

@media screen and (max-width: 767px) {

  /* JSでカルーセル初期化された場合のみ有効になるクラス */
  .fc-viewport {
    overflow: hidden;
    position: relative;
    margin-top: 20px;
  }

  .bl_feature_cardGrid.fc-track {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none; /* 既存styleのgridを打ち消す */
    gap: 0;
    margin-top: 0;
    transition: transform 0.4s ease;
    will-change: transform;
  }

  .bl_feature_cardGrid.fc-track .bl_feature_card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  .bl_feature_cardGrid.fc-track .bl_feature_card.bl_feature_card__center {
    grid-column: auto;
    max-width: 100%;
    margin: 0;
  }

  /* 矢印ボタン */
  .fc-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  .fc-arrow::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }

  .fc-arrow__prev {
    left: 8px;
  }

  .fc-arrow__prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
  }

  .fc-arrow__next {
    right: 8px;
  }

  .fc-arrow__next::before {
    transform: rotate(45deg);
    margin-right: 3px;
  }

  /* ドットナビゲーション */
  .fc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  .fc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .fc-dot.fc-dot__active {
    background: var(--customize_main_color, #56b2e3);
  }
}