/* ===========================
   Hero
=========================== */
.p-cs-hero {
  padding: calc(var(--header-height) + 32px) 0 88px;
}

.p-cs-hero .c-breadcrumb {
  margin-bottom: 112px;
}

/* ===========================
   カテゴリナビゲーション（c-lower-anchor 共通コンポーネントの2カラム調整）
=========================== */
.p-cs-anchor {
  margin-top: 40px;
}

.p-cs-anchor__list {
  --lower-anchor-columns: 2;
  width: min(100%, 560px);
  margin-inline: auto;
}


/* ===========================
   セクション共通
=========================== */
.p-cs-section {
  scroll-margin-top: calc(var(--header-height) + 24px);
  padding: 120px 0 200px;
}

.p-cs-section--gray {
  padding: 200px 0;
  background: var(--color-section-background-light);
}

.p-cs-section .c-section-heading {
  margin-bottom: 80px;
}

/* ===========================
   カードグリッド
   既存の p-success-archive__list / p-cv-archive__list のギャップ調整
=========================== */
.p-cs-card-grid {
  gap: 80px 40px;
}

/* ===========================
   もっと見るボタン
=========================== */
.p-cs-more {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

.p-cs-more__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--color-text);
  font-size: var(--font-size-lg-plus);
  line-height: var(--line-height-normal);
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}

.p-cs-more__link:hover {
  color: rgba(54, 54, 59, 0.68);
}

.p-cs-more__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.p-cs-more__circle span {
  position: relative;
  width: 12px;
  height: 1px;
  background: currentColor;
}

.p-cs-more__circle span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ===========================
   .p-about の競合を解消
   （success-stories.css と customer-voice.css で異なる背景色が定義されているため上書き）
=========================== */
.p-about {
  padding-block: 120px;
  background: var(--color-section-background-light);
}

.p-about__grid {
  margin-top: 80px;
}

/* ===========================
   Tablet（〜1024px）
=========================== */
@media (max-width: 1024px) {
  .p-cs-hero {
    padding-bottom: 72px;
  }

  .p-cs-hero .c-breadcrumb {
    margin-bottom: 88px;
  }

  .p-cs-section {
    padding: 96px 0 120px;
  }

}

/* ===========================
   SP（〜767px）
=========================== */
@media (max-width: 767px) {
  .p-cs-hero {
    padding: calc(var(--header-height) + 20px) 0 56px;
  }

  .p-cs-hero .c-breadcrumb {
    margin-bottom: 72px;
  }

  .p-cs-section {
    padding: 72px 0 96px;
  }

  .p-cs-section--gray {
    padding: 96px 0;
  }

  .p-cs-section .c-section-heading {
    margin-bottom: 48px;
  }

  .p-cs-anchor {
    margin-top: 32px;
  }

  .p-cs-more {
    margin-top: 48px;
  }

  .p-cs-more__link {
    font-size: var(--font-size-base);
  }

  .p-about {
    padding-block: var(--sp-section-padding);
  }

  .p-about__grid {
    margin-top: var(--sp-section-gap);
  }
}