/* =================================================================
 * c-breadcrumb — パンくずリスト
 *   Figma: 3875:94712（標準コンポーネント）
 *          5824:94516（Wireframe-13「パンくずリスト」styleguide・配置/仕様の正）
 *
 * 構成:
 *   .c-breadcrumb            <nav> ルート（横スクロールコンテナ）
 *     .c-breadcrumb__icon    先頭のリンクアイコン（オレンジグラデの角丸 8×8）
 *     .c-breadcrumb__list    <ol>（Schema.org BreadcrumbList、改行なし横並び）
 *       .c-breadcrumb__item    <li>
 *         .c-breadcrumb__link    途中ページへのアンカー（#333 / Bold）
 *         .c-breadcrumb__current 現在ページ（最後の項目、Key Color / Bold）
 *       区切り矢印は 2 番目以降の item ::before（mask-image で色制御）
 *
 * 仕様（Figma）:
 *   - 改行なし。あふれたら横スクロール（スクロールバーを明示表示）。PC/SP 共通
 *   - テキストは Noto Sans JP Bold 14px / lh1.8 / tracking 0.04em（SP 12px）
 *   - リンク = Default font color(#333)、現在ページ = Key Color(#FF6243)
 *   - 区切り矢印 = Secondary(#787878)、/img/common/icons/breadcrumb-arrow.svg（4×7px）
 * =================================================================*/

.c-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8rem;                              /* link icon ↔ リスト */
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                 /* Firefox: あふれ時に細いバー */
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);          /* 14px */
  font-weight: var(--fw-bold);           /* 700（リンク・現在ページとも Bold） */
  line-height: var(--lh-loose);          /* 1.8 */
  letter-spacing: var(--letter-spacing-body); /* 0.04em = 0.56px @14px */
  color: var(--color-text-default);
}

/* 横スクロール発生時にスクロールできることを明示する（WebKit） */
.c-breadcrumb::-webkit-scrollbar {
  height: 6rem;
}
.c-breadcrumb::-webkit-scrollbar-thumb {
  background-color: var(--color-light-orange-01);
  border-radius: 3rem;
}
.c-breadcrumb::-webkit-scrollbar-track {
  background: transparent;
}

/* 先頭のリンクアイコン（Orange_gradient01（横）の角丸スクエア） */
.c-breadcrumb__icon {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, var(--color-orange-01) 0%, var(--color-key) 100%);
}

.c-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16rem;
  flex-shrink: 0;                        /* 縮まずにあふれさせ、横スクロールへ */
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
}

/* 2 番目以降の項目の前に区切り矢印を入れる */
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 4rem;
  height: 7rem;
  flex-shrink: 0;
  background-color: var(--color-text-sub);
  -webkit-mask: url("/img/common/icons/breadcrumb-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/breadcrumb-arrow.svg") no-repeat center / contain;
}

.c-breadcrumb__link {
  color: var(--color-text-default);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-default);
}

.c-breadcrumb__link:hover {
  color: var(--color-key);
  text-decoration: underline;
  text-underline-offset: 2rem;
}

.c-breadcrumb__current {
  color: var(--color-key);
  white-space: nowrap;
}

/* =================================================================
 * SP（≤1023.98px）— アイコン/矢印サイズは固定、文字のみ縮小
 * =================================================================*/
@media (max-width: 1023.98px) {
  .c-breadcrumb {
    font-size: 12rem;
  }
}