.p-breadcrumb {
    width: 100%;
}

.p-breadcrumb.p-breadcrumb--download-archive {
    width: calc(100% - 120px);
    max-width: 1080px;
    margin: 0 auto;

    @media screen and (max-width: 550px) {
        width: calc(100% - 80px);
    }
    
    @media screen and (max-width: 450px) {
        width: calc(100% - 40px);
    }
}

.p-breadcrumb__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.p-breadcrumb.p-breadcrumb--download-archive .p-breadcrumb__inner {
    padding: 0;
}

/* パンくずリスト本体 */
.p-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Breadcrumb NavXT が生成する <span> ラッパー */
.p-breadcrumb__list>span {
    display: flex;
    align-items: center;
}

.p-breadcrumb__list > span:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #383B42;
    border-right: 1.5px solid #383B42;
    transform: rotate(45deg);
    margin: 0 8px;
    flex-shrink: 0;
  }

/* ホームアイコン（最初のspanのリンク） */
.p-breadcrumb__list>span:first-child a {
    display: flex;
    align-items: center;
}

.p-breadcrumb__list>span:first-child a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #383B42;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
}

/* ホームのテキストは非表示（アイコンのみ） */
.p-breadcrumb__list>span:first-child a span,
.p-breadcrumb__list>span:first-child a .bcn-item {
    display: none;
}

/* リンク（クリッカブルな階層） */
.p-breadcrumb__list a {
    color: #383B42;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.p-breadcrumb__list a:hover {
    opacity: 0.7;
}

/* 現在のページ（最後の要素） */
.p-breadcrumb__list>span:last-child a,
.p-breadcrumb__list>span:last-child span {
    color: #383B42;
    font-weight: 400;
    pointer-events: none;
    cursor: default;
    white-space: nowrap;
}

/* ============================
     レスポンシブ対応
     ============================ */
@media (max-width: 768px) {
    .p-breadcrumb__inner {
        padding: 0 16px;
    }

    .p-breadcrumb__list {
        font-size: 12px;
        padding: 8px 0;
    }
}