/* Otonacica JOURNALカテゴリ別一覧ページ専用CSS
   記事カード・カテゴリボタン等は journal.css を共用 */

.category-hero {
  position: relative;
  padding: 35px 20px 75px;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(247, 243, 235, .98), rgba(247, 243, 235, .89)),
    url("../images/journal-category-main.jpg") center / cover no-repeat;
  text-align: center;
}

.category-hero::before,
.category-hero::after {
  position: absolute;
  border: 1px solid rgba(53, 72, 61, .12);
  border-radius: 50%;
  content: "";
}

.category-hero::before {
  top: -105px;
  left: -75px;
  width: 260px;
  height: 260px;
}

.category-hero::after {
  right: 7%;
  bottom: -70px;
  width: 180px;
  height: 180px;
}

.category-hero__inner { position: relative; z-index: 1; }

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 48px;
  overflow: hidden;
  color: #92928b;
  font-size: 9px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.breadcrumb a:hover { color: var(--journal-coral); }
.breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; }

.category-hero__label {
  margin: 0 0 11px;
  color: var(--journal-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
}

.category-hero h1 {
  margin: 0 0 18px;
  color: var(--journal-green-dark);
  font: 500 40px/1.45 Georgia, "Times New Roman", "Noto Serif JP", serif;
  letter-spacing: .08em;
}

.category-hero__description {
  margin: 0;
  color: var(--journal-muted);
  font-size: 14px;
  line-height: 2;
}

.category-hero__count {
  display: block;
  margin-top: 20px;
  color: #96958e;
  font: 9px Georgia, serif;
  letter-spacing: .18em;
}

.category-filter-section { margin-bottom: 77px; }
.category-back { margin-top: 56px; text-align: center; }

.category-back a {
  display: inline-flex;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #aaa8a1;
  color: #6c6d68;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

.category-back a:hover { color: var(--journal-coral); }

@media (max-width: 640px) {
  .category-hero { padding: 25px 18px 54px; text-align: left; }
  .breadcrumb { justify-content: flex-start; margin-bottom: 37px; }
  .category-hero h1 { font-size: 29px; letter-spacing: .04em; }
  .category-hero__description { font-size: 13px; line-height: 1.9; }
  .category-hero__description br { display: none; }
  .category-hero__count { margin-top: 16px; }
  .category-filter-section { margin-bottom: 55px; }
  .category-back { margin-top: 47px; }
}