/**
 * コンポーネント（次に小さい単位）
 */

.container--wide {
  max-width: var(--container-wide);
}

/* Breadcrumb */
.c-breadcrumb {
  margin-bottom: 20px;
}
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.c-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--color-border);
}
.c-breadcrumb__item a {
  color: var(--color-text-muted);
}
.c-breadcrumb__item a:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Heading */
.c-heading--3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: var(--line-height-tight);
  margin: 32px 0 12px;
}

/* Button（.btn は global.css でベース定義） */
.c-button {
  /* エイリアス。追加バリアントはここへ */
}

/* Section: Page header */
.section-page-header {
  margin-bottom: 40px;
}
.section-page-header__lead {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Article inside template */
.template-article .article {
  max-width: none;
  margin: 0;
  padding: 0;
}