/* -------------------------------------------------------
※下記のidとclassを使用してください。

<div id="breadcrumbs">
  <div class="bc_scrollable">
    <ul class="bc_topicpath">
      <li><a href="/">トップページ</a></li>
      <li><a href="/interior/catalog/index.html">カタログ一覧：壁紙</a></li>
      <li></li>
    </ul>
  </div>
</div>

-------------------------------------------------------*/

/* パンくず */

#breadcrumbs {
    position: relative;
    font-size: 1.2rem;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;

    & .bc_scrollable {
        max-width: 1280px;
        width: calc(100% - 160px);
        min-height: 60px;
        line-height: 60px;
        margin: 0 auto;
        overflow-x: auto;
        white-space: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

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

    & .bc_topicpath {
        & li {
            position: relative;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }

        & li + li {
            margin-left: 6px;
            padding-left: 11px;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: #e5e5e5;
                transform: translateY(-50%);
            }
        }

        & a {
            text-decoration: underline;
            text-underline-offset: 2px;

            &:hover {
                text-decoration: none;
                color: #e60012;
            }
        }
    }
}

@media (max-width: 1024px) {
    #breadcrumbs {
        & .bc_scrollable {
            width: calc(100% - 80px);
        }
    }
}

@media (max-width: 768px) {
    #breadcrumbs {
        & .bc_scrollable {
            width: calc(100% - 40px) ;
        }

        & .bc_topicpath li + li {
            margin-left: 10px;
            padding-left: 14px;
        }
    }
}