@charset "utf-8";

/* =========================================
   Topics subhead（recruitと統一）
========================================= */

.subhead--topics{
  position: relative;
  background: #d6c9b2;          /* 指定 */
  padding: 88px 0 92px;          /* recruit と同じ */
}

.subhead--topics .subhead__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;               /* recruit と同じ */
  box-sizing: border-box;
}

.subhead--topics .subhead__band{
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 34px 20px 38px;       /* recruit と同じ */
  text-align: center;

  /* 中央が明るい左右グラデ（recruitと同じ） */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.92) 18%,
    rgba(255,255,255,0.92) 82%,
    rgba(255,255,255,0) 100%
  );
}

.subhead--topics .subhead__eyecatch{
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #cf6b59;                /* 共通の差し色 */
}

.subhead--topics .subhead__title{
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b5a47;                /* 共通の見出し色 */
}

/* ---------------------------
   Responsive（recruitと同じ）
---------------------------- */
@media screen and (max-width: 980px){
  .subhead--topics{
    padding: 72px 0 78px;
  }
  .subhead--topics .subhead__band{
    padding: 30px 18px 34px;
  }
}

@media screen and (max-width: 767px){
  .subhead--topics{
    padding: 52px 0 56px;
  }
  .subhead--topics .subhead__inner{
    padding: 0 16px;
  }
  .subhead--topics .subhead__band{
    padding: 22px 14px 26px;
    box-sizing: border-box;
  }
  .subhead--topics .subhead__title{
    font-size: 36px;
  }
}


/* =========================================
   Topics list
========================================= */

.topics{
  background: #f4efe6;
  padding: 46px 0 10px;
}

.topics,
.topics * ,
.topics *::before,
.topics *::after{
  box-sizing: border-box;
}

.topics__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- filter ---------- */
.topics-filter__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
}

.topics-filter__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 10px 18px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}

.topics-filter__btn.is-active{
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

/* 指定カラー */
.topics-filter__btn--all{     background: #c36454; }
.topics-filter__btn--blog{    background: #b28fbc; }
.topics-filter__btn--news{    background: #e2a65b; }
.topics-filter__btn--special{ background: #93b2cf; }
.topics-filter__btn--nursery{ background: #dc99aa; }

.topics__line{
  margin: 16px auto 0;
  height: 1px;
  max-width: 980px;
  background: rgba(120, 96, 72, 0.45);
}

/* ---------- grid ---------- */
.topics-grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

/* ---------- card ---------- */
.topic-card{
  background: #fff;
  border-radius: 26px;
  padding: 18px 20px 22px;
}

.topic-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.topic-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.06em;
}

/* 指定カラー（タグも同色） */
.topic-tag--all{     background: #c36454; }
.topic-tag--blog{    background: #b28fbc; }
.topic-tag--news{    background: #e2a65b; }
.topic-tag--special{ background: #93b2cf; }
.topic-tag--nursery{ background: #dc99aa; }

.topic-card__thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #cfcfcf;
  border-radius: 6px;
  margin: 0 0 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
	display: block;
}

.topic-card__date{
  display: block;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9b815f;
}

.topic-card__title{
  margin: 0;
  ;
}

.topic-card__title a{
  color: inherit;
  text-decoration: none;
  font-size: 24px;       /* 通常テキスト22px基準で少しだけ大きく */
  line-height: 1.55;
	color: #5a4b3c
}

.topic-card__title a:hover{
  text-decoration: underline;
}

/* お知らせ（画像なし） */
.topic-card--notice .topic-card__thumb{
  display: none;
}

.topic-card__excerpt{
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: #5a4b3c;
}

/* ---------- responsive ---------- */
@media screen and (max-width: 767px){
  .topics{
    padding: 36px 0 70px;
  }

  .topics__inner{
    padding: 0 16px;
  }

  .topics-filter__btn{
    min-width: 78px;
    padding: 9px 14px;
    font-size: 14px;
  }

  .topics-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .topic-card{
    padding: 16px 18px 20px;
  }

  .topic-card__title{
    font-size: 22px;
  }

  .topic-card__excerpt{
    font-size: 18px;
  }
}


/* =========================================
   Pagination section
========================================= */

.topics-pager{
  background: #fff; /* セクションの下地は白 */
}

.topics-pager__grad{
  height: 60px; /* 指定 */
  background: linear-gradient(to bottom, #f4efe6 0%, #ffffff 100%);
}

/* ---------- pagination ---------- */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 0 70px;
}

.pagination__num{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #a08a5f;
  color: #a08a5f;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.pagination__num.is-current{
  background: #a08a5f;
  color: #fff;
  border-color: #a08a5f;
}

.pagination__dots{
  color: #a08a5f;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---------- arrows (CSS only) ---------- */
.pagination__arrow{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
}

/* 矢印は擬似要素のボーダーで作る（画像不要） */
.pagination__arrow::before{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #a08a5f;
  border-right: 2px solid #a08a5f;
  display: block;
}

.pagination__arrow--prev::before{
  transform: rotate(-135deg); /* ＜ */
  margin-left: 2px;
}

.pagination__arrow--next::before{
  transform: rotate(45deg);   /* ＞ */
  margin-right: 2px;
}

/* hover（任意） */
.pagination__num:hover,
.pagination__arrow:hover{
  background: rgba(160, 138, 95, 0.08);
}

.pagination__num.is-current:hover{
  background: #a08a5f;
  color: #fff;
  border-color: #a08a5f;
}

/* ---------- responsive ---------- */
@media screen and (max-width: 767px){
  .pagination{
    gap: 10px;
    padding: 22px 0 56px;
  }
  .pagination__num,
  .pagination__arrow{
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}


/*ページ送り矢印無効*/
.pagination__arrow.is-disabled{
  pointer-events: none;
  opacity: .25;
}