/* ========================================================
   パンくずリスト (Breadcrumbs) - スタイル強制適用版
======================================================== */
.cmn-breadcrumbs {
    width: 100%;
    background-color: #f8f8f8;
    text-align: left; /* 親要素からの「中央揃え」の遺伝をリセット */
}

.cmn-breadcrumbs__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 6px 20px;
    box-sizing: border-box;
}

/* クラスを繋げて優先度を高くしています */
.cmn-breadcrumbs .cmn-breadcrumbs__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start; /* 確実に左寄せにする */
    align-items: center;
    font-size: 13px;
}

.cmn-breadcrumbs .cmn-breadcrumbs__item {
    display: flex;
    align-items: center;
    color: #333333;
}

/* リンクの基本スタイル（!important で既存のスタイルを上書き） */
.cmn-breadcrumbs .cmn-breadcrumbs__item a {
    color: #005eb8 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

/* リンクのホバー時アクション */
.cmn-breadcrumbs .cmn-breadcrumbs__item a:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}

/* 区切り文字（セパレーター）の設定 */
.cmn-breadcrumbs .cmn-breadcrumbs__item:not(:last-child)::after {
    content: '>';
    margin: 0 10px;
    color: #999999;
    font-size: 11px;
    font-family: "Roboto", sans-serif;
}

/* スマートフォン（SP）表示時のレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .cmn-breadcrumbs__inner {
        padding: 4px 15px;
    }
    .cmn-breadcrumbs .cmn-breadcrumbs__list {
        font-size: 11px;
    }
    .cmn-breadcrumbs .cmn-breadcrumbs__item:not(:last-child)::after {
        margin: 0 6px;
    }
}