.cat-filter { position: sticky; top: var(--header-height); z-index: var(--z-above); background: var(--bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); margin-top: var(--space-lg); }
.cat-filter__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.cat-filter__inner::-webkit-scrollbar { display: none; }

.cat-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: var(--space-sm) var(--space-md); font-family: var(--font-sans-en); font-size: var(--fs-xs); font-weight: var(--fw-regular); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-light); white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; background: none; border-left: none; border-right: none; border-top: none; border-radius: 0; transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.cat-btn:hover { color: var(--text-mid); }
.cat-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.cat-count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: transparent; color: var(--accent); border: 1px solid var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.cat-btn[data-cat="care"].is-active { color: var(--gold-brown); border-bottom-color: var(--warm); }

.articles { padding: var(--space-lg) 0; }
.articles__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.article-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-card.is-hidden { display: none; }

.article-card__img { aspect-ratio: 3/2; background: var(--bg-warm); font-family: var(--font-sans-en); font-size: var(--fs-xs); letter-spacing: var(--ls-widest); color: var(--text-light); overflow: hidden; flex-shrink: 0; }
.article-card__img img { transform: scale(1.2); transform-origin: center; }
.article-card__body { padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.article-card__meta { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.article-card__date { font-family: var(--font-sans-en); font-size: var(--fs-xs); font-weight: var(--fw-light); letter-spacing: var(--ls-wide); color: var(--text-light); }

.a-tag { display: inline-block; font-family: var(--font-sans-en); font-size: var(--fs-xs); font-weight: var(--fw-regular); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 0.2em 0.7em; border-radius: var(--radius-full); white-space: nowrap; line-height: 1; }
.a-tag--notice { background: var(--accent); color: var(--text-inv); }
.a-tag--care   { background: var(--warm-pale);   color: var(--gold-brown); }

.article-card__title { transition: color var(--duration-fast) var(--ease); }
.article-card:hover .article-card__title { color: var(--accent); }
.article-card__excerpt { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-mid); line-height: var(--lh-body); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card__footer { padding: var(--card-padding-sm) var(--card-padding); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

.care-banner { padding: var(--section-py) var(--gutter); background: var(--bg-warm); margin: var(--space-lg) 0 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.care-banner__inner { max-width: var(--max-width); margin: 0 auto; }
.care-banner__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); flex-wrap: wrap; gap: var(--space-sm); }
.care-banner__label { font-family: var(--font-sans-en); font-size: var(--fs-xs); font-weight: var(--fw-light); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--gold-brown); display: block; margin-bottom: 0.3em; }
.care-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap-sm); }

.care-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.care-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.care-card__img { aspect-ratio: 16/9; background: var(--warm-pale); overflow: hidden; }
.care-card__img img { transform: scale(1.4); transform-origin: center; }

.care-card__body { padding: var(--card-padding-sm); flex: 1; }
.care-card__title { font-family: var(--font-serif-ja); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: var(--lh-heading); margin-bottom: 0.3em; transition: color var(--duration-fast) var(--ease); }
.care-card:hover .care-card__title { color: var(--gold-brown); }
.care-card__desc { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--text-light); line-height: var(--lh-heading); }

.article-detail { padding: var(--section-py) 0; background: var(--bg); }
.article-detail__inner { 
  max-width: var(--max-width-narrow); 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: var(--gutter); 
  padding-right: var(--gutter); 
  box-sizing: border-box;
}
.article-detail__meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.article-detail__date { font-family: var(--font-sans-en); font-size: var(--fs-sm); font-weight: var(--fw-light); letter-spacing: var(--ls-wide); color: var(--text-light); }
.article-tag { display: inline-block; font-family: var(--font-sans-ja); font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 0.2em 0.8em; border-radius: var(--radius-full); }
.article-tag--care { background: var(--warm-pale); color: var(--gold-brown); border: 1px solid var(--warm); }
.article-detail__title { margin-bottom: 0; }
.article-detail__body { font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--text-mid); line-height: var(--lh-loose); }
.article-detail__body p { margin-bottom: var(--space-md); }
.article-detail__body p:last-child { margin-bottom: 0; }
.article-detail__body h3 {
  font-family: var(--font-sans-ja);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}
.article-detail__body .article-list { margin: 0 0 var(--space-md); padding-left: 1.4em; }
.article-detail__body .article-list li { margin-bottom: var(--space-xs); line-height: var(--lh-loose); }
.article-detail__body .article-list li strong { color: var(--text); font-weight: var(--fw-medium); }
.article-detail__back { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border); }

@media (max-width: 1024px) { .cat-filter { top: var(--header-height-sp); } }

@media (max-width: 1024px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 1024px) { .care-cards { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { .article-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) { .care-cards { grid-template-columns: 1fr; } }

.articles-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--text-light);
}