@charset "UTF-8";

/* ==========================================
   パンくず（下層ページ共通。XD 05〜12 の グループ 1510 / 07 の グループ 1892）
   XD: 文字 YuGo-Medium 14px・#000。区切りは緑（#93c572）の矢印（5×11、前後 10px）。
   PC は 960px の中身の左端（x=203）、ベースライン y=156（ページの上の余白 144 の行より 2px 上）。SP は x=14、ベースライン y=82
   ========================================== */
.breadcrumb {
  box-sizing: border-box;
  width: 100%;
  max-width: 375px;
  margin: 0 auto 41.58px; /* XD SP: パンくずの行の下端 86 → 見出しの上端 127.58 */
  padding: 0; /* 左右の余白は外側の __inner の padding 15px だけ（XD SP: ホーム x=14） */
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2858; /* 18px ÷ 14px（小数 4 桁。切り上げて 18px ちょうどにする） */
  color: var(--color-black);
}

.breadcrumb__link {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (any-hover: hover) {
  .breadcrumb__link:hover {
    color: var(--color-main);
  }
}

.breadcrumb__item span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-black);
}

.breadcrumb__sep {
  /* XD: 区切りの矢印（パス 3）5.09×11.33。文字の間 10px */
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 5px;
  height: 11px;
  margin: 0 10px;
  border: none;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  background-color: var(--color-main);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 11'%3E%3Cpath d='M0.5 0.5L4.5 5.5L0.5 10.5' stroke='%23000' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.breadcrumb__list--wrap {
  /* 折り返すパンくず（XD 07 の グループ 1892）：区切りを項目の先頭に入れ、2 行目は区切りから始まる。行の間隔 24（XD SP: ベースライン 82 → 106） */
  gap: 6px 10px;
}

.breadcrumb__item--next .breadcrumb__sep {
  margin: 0 10px 0 0;
}

@media (width >= 768px) {
  .breadcrumb {
    /* XD PC: 行の上端 144 から 14px の文字（ベースライン 156）。ページの上の余白（144）の下に行を置くと 2px 下がるので、2px 引き上げる。見出しの上端 240 まで 80 */
    max-width: 960px;
    margin: -2px auto 80px;
  }

  .breadcrumb__sep {
    /* XD PC: 文字と文字の間 25.85（ホーム 244.3 → お知らせ一覧 270 は 25.7、お知らせ一覧 354 → カテゴリー1 380 は 26）。矢印 5.09 ＋ 前後 10.38 */
    width: 5.09px;
    margin: 0 10.38px;
  }

  .breadcrumb__list--wrap {
    gap: 6px 10.38px;
  }

  .breadcrumb__item--next .breadcrumb__sep {
    margin: 0 10.38px 0 0;
  }
}