@charset "utf-8";

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


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

.cp-listPage {
  position: relative;
  isolation: isolate;
  padding-block: 0 var(--cp-layout-section-gap);
  background: none;
}

.cp-listPage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--bg-c-beige, #f0eee6);
  background-image: linear-gradient(to bottom, var(--cp-color-bg), transparent 875px);
  background-position: 0 calc(140px + var(--cp-list-wave-height));
  background-size: 100% 875px;
  background-repeat: no-repeat;
  pointer-events: none;
}

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

.cp-listPage .cp-sectionHeading {
  font-family: "Zen Old Mincho", serif;
  font-size: var(--cp-font-size-3xl);
  font-weight: 500;
  line-height: var(--cp-line-height-tight);
  letter-spacing: var(--cp-letter-spacing-wide);
}

body:has(.cp-listPage) > .fs-c-breadcrumb {
  margin-bottom: 0;
  background-color: var(--bg-c-beige, #f0eee6);
}

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

  .cp-listPage::before {
    background-image: linear-gradient(to bottom, var(--cp-color-bg), transparent 520px);
    background-position: 0 calc(130px + var(--cp-list-wave-height));
    background-size: 100% 520px;
  }

  .cp-listPage .cp-sectionHeading {
    font-size: var(--cp-font-size-2xl);
  }

}

.cp-listPage__favoriteLink {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--cp-space-md);
}

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

  .cp-listPage__favoriteLink {
    justify-content: flex-start;
    margin-bottom: var(--cp-space-sm);
  }

}


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

.cp-filterNav {
  
}

.cp-tagFilter {
  
}

.cp-searchBar {
  border-bottom: 1px solid var(--cp-color-border);
  padding-block-end: var(--cp-space-md);
}

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

  .cp-filterNav {

  }

  .cp-tagFilter {
    
  }

  .cp-searchBar {
  }

}


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

.cp-listHead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  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;
}