@charset "utf-8";

/* ==========================================================================
   cp-list.css — 一覧ページ固有レイアウト
   ========================================================================== */


/* ==========================================================================
   .cp-listPage — ページ全体ラッパー
   ========================================================================== */

.cp-listPage {
  padding-bottom: var(--cp-layout-section-gap);
}

.cp-listPage__header {
  margin-bottom: var(--cp-space-xl);
  text-align: center;
  margin-bottom: var(--spc-30);

}

.cp-listPage__favoriteLink {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--cp-space-md);
}
@media screen and (min-width: 768px){
  .cp-listPage__header{
    font-size: var(--fz-30);
  }
}
@media screen and (max-width: 767px) {
  .cp-listPage__header{
    font-size: 20px;
  }
  .cp-listPage__favoriteLink {
    justify-content: flex-start;
    margin-bottom: var(--cp-space-sm);
  }

}


/* ==========================================================================
   フィルターエリア（カテゴリ + タグ + 検索）レイアウト
   ========================================================================== */

.cp-filterNav {
  padding: var(--cp-space-md) 0;
  border-top: 1px solid var(--cp-color-border);
}

.cp-searchBar {
  padding: var(--cp-space-md) 0;
  border-top: 1px solid var(--cp-color-border);
}

@media screen and (min-width: 768px) {

  .cp-filterNav {
    padding: var(--cp-space-lg) 0;
  }

  .cp-searchBar {
    padding: var(--cp-space-lg) 0;
  }

}


/* ==========================================================================
   .cp-listHead — ソートUIエリア
   ========================================================================== */

.cp-listHead {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--cp-space-sm) 0;
  margin-bottom: var(--cp-space-md);
}

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

  .cp-listHead {
    justify-content: flex-start;
    padding: var(--cp-space-xs) 0;
    margin-bottom: var(--cp-space-sm);
  }

}


/* ==========================================================================
   カードグリッド — 一覧ページ固有上書き（余白）
   ========================================================================== */

.cp-listPage .cp-coordinateGrid {
  margin-bottom: var(--cp-space-2xl);
}

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

  .cp-listPage .cp-coordinateGrid {
    margin-bottom: var(--cp-space-xl);
  }

}


/* ==========================================================================
   .cp-pager — ページネーション配置（一覧ページ）
   ========================================================================== */

.cp-listPage .cp-pager {
  margin-top: 0;
}