/* ============================================
   s-nav-01 - Breadcrumb (パンくずリスト)
   ============================================ */
.s-nav-01 {
  background: var(--color-bg-sub);
  border-bottom: 1px solid var(--color-border);
}

:is(.s-nav-01 *) {
  margin: 0;
}

.s-nav-01__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  list-style: none;
  padding: 0;
}

.s-nav-01__item:not(:last-child)::after {
  content: ">";
  margin-left: var(--space-xs);
  color: var(--color-border);
}

.s-nav-01__link {
  color: var(--color-text-light);
  text-decoration: none;
}

.s-nav-01__link:hover {
  color: var(--color-primary);
}

.s-nav-01__current {
  color: var(--color-text);
}

/* ============================================
   s-nav-01 — Breadcrumb component
   ============================================ */

.s-nav-01 {
  width: 100%;
  background: var(--color-bg-sub);
  border-bottom: 1px solid var(--color-border);
}

.s-nav-01__inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-md) var(--space-3-xl);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.s-nav-01 h1 {
  font-size: inherit;
  font-weight: var(--font-weight-normal);
  display: inline;
}

/* jj-breadcrumb プラグインの SP 時 font-size:0.75rem(=本テーマの10pxremで7.5px) を打ち消す。
   パンくずは常にテーマ基準の読みやすいサイズに固定する。 */
.s-nav-01 .c-breadcrumb {
  font-size: var(--font-size-sm);
}