/* ======================================= */
/* パンくずリスト breadcrumb.css (ブラッシュアップ版) */
/* ======================================= */

.breadcrumb-nav {
    border-bottom: none !important;
    height: auto !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    display: block !important;
    background-color: #f9f9f9; /* 薄いグレーの背景を敷くと区切りが明確に */
}

.breadcrumb-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumb-list {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0;
    padding: 12px 0; /* 上下余白を少し広げてゆとりを持たせる */
    list-style: none;
    align-items: center;
}

.breadcrumb-list li {
    line-height: 1.5;
    color: #666; /* 現在地の文字色を少し柔らかく */
    font-weight: 500;
}

/* 区切り文字を「＞」からシャープな「/」または細い矢印へ */
.breadcrumb-list li + li::before {
    content: "/"; 
    margin: 0 12px;
    color: #ccc; /* 区切りはあえて目立たせないのがモダン */
    font-size: 14px;
    font-weight: 300;
}

.breadcrumb-list a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease; /* ふわっと色を変える */
    position: relative;
}

/* ホバー時に下線を出すのではなく、色を薄くするスタイルが最近の流行り */
.breadcrumb-list a:hover {
    color: #888; 
    text-decoration: none;
}

/* 「ホーム」にアイコンを添える（任意） */
.breadcrumb-list li:first-child a::before {
    content: "HOME"; /* テキストにするか、Webフォントがあればアイコンに */
    font-size: 10px;
    margin-right: 5px;
    letter-spacing: 0.1em;
    color: #999;
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 768px) {
    .breadcrumb-list {
        padding: 10px 0;
        font-size: 13px; /* スマホでは少し小さくして1行に収まりやすく */
    }
    
    .breadcrumb-list li + li::before {
        margin: 0 8px;
    }
}