@charset "utf-8";

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


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

.cp-listPage {
  padding-block: var(--spc-50) var(--cp-layout-section-gap);
}

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

.cp-listPage__favoriteLink {
  position: fixed;
  z-index: 80;
  transition: .3s;
}
.cp-listPage__favoriteLink.is-in{
  opacity: 0;
  z-index: -1;
}
@media screen and (min-width: 768px){
  .cp-listPage__favoriteLink{
    top: 165px;
    right: 50px;
  }
}
@media screen and (max-width: 767px){
  .cp-listPage__favoriteLink{
    bottom: 110px;
    right: 10px;
  }
}


/* ==========================================================================
   フィルターエリア（カテゴリ + タグ + 検索）レイアウト
   ========================================================================== */
@media screen and (min-width: 768px){
  .cp-filterNav,
  .cp-tagFilter,
  .cp-searchBar {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .cp-filterNav,
  .cp-tagFilter,
  .cp-searchBar {
    margin-top: var(--cp-space-lg);
  }
}

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

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

@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;
}