/* パンくずリストの全体スタイル */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0; /* 全てのマージンをリセット */
    font-size: 0.9rem;
    display: flex;
    justify-content: flex-start;
    max-width: 100%; /* 幅を100%に */
}

/* パンくずリスト内の各アイテム */
.breadcrumb-item {
    display: inline-block;
    color: #3498db; /* 通常のリンクの色 */
}

.breadcrumb-item a {
    text-decoration: none; /* デフォルトの下線を消す */
    color: #3498db; /* リンクの色 */
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #1abc9c; /* ホバー時の色 */
    text-decoration: underline; /* ホバー時に下線を追加 */
}

/* 現在のページ（アクティブアイテム） */
.breadcrumb-item.active {
    color: #7f8c8d; /* アクティブなアイテムは灰色にしてリンク化しない */
    font-weight: bold;
}

/* パンくずリストの区切り文字（スラッシュや矢印） */
.breadcrumb-item::before {
    content: "/";
    color: #bdc3c7; /* 区切り文字の色を薄く */
    padding: 0 5px;
}

.breadcrumb-item:first-child::before {
    content: ""; /* 最初のアイテムには区切り文字を表示しない */
}

/* レスポンシブ対応: 小さい画面ではフォントサイズを少し小さく */
@media (max-width: 576px) {
    .breadcrumb {
        font-size: 0.8rem;
    }
}