/* =========================
Breadcrumb（Cartier系 完全版）
========================= */

.breadcrumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  font-size:11px;
  letter-spacing:1.5px;
  color:#aaa;
  margin-top:10px;
  transition:opacity .4s ease;
}

.breadcrumb.is-changing{
  opacity:0.3;
}

/* リスト */
.breadcrumb li{
  list-style:none;
  position:relative;
}

/* 区切り（繊細に） */
.breadcrumb li::after{
  content:"/";
  margin:0 12px;
  color:#ddd;
  font-weight:300;
}

.breadcrumb li:last-child::after{
  display:none;
}

/* リンク */
.breadcrumb a{
  position:relative;
  color:#999;
  text-decoration:none;

  transition:color .3s ease;
}

/* 下線（ヘッダーと統一） */
.breadcrumb a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:1px;
  background:#000;

  transition:.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover */
.breadcrumb a:hover{
  color:#000;
}

.breadcrumb a:hover::after{
  width:100%;
}

/* 現在地（最重要） */
.breadcrumb .current,
.breadcrumb .dynamic-filter.current{
  color:#000;
  font-weight:500;
  letter-spacing:2px;
}

/* 非リンク（current）は下線なし */
.breadcrumb .current::after{
  display:none;
}

/* =========================
レスポンシブ（少し詰める）
========================= */

@media(max-width:768px){

  .breadcrumb{
    font-size:10px;
    letter-spacing:1px;
  }

  .breadcrumb li::after{
    margin:0 8px;
  }
}