/* ======================================= */
/* パンくずリスト breadcrumb.css (干渉対策・最終版) */
/* ======================================= */

/* 1. 全般的な余白調整コンテナ */
.room-container {
    padding-top: 20px; 
    padding-bottom: 5px; 
}

/* 干渉対策の最重要ポイント:
   header.css の nav スタイルがパンくずリストに適用されないように
   z-index を低く設定し、headerの z-index(1000) より背面に配置します。
*/
.breadcrumb-nav {
    border-bottom: none !important; /* header.css の線を強制消去 */
    height: auto !important;        /* header.css の 60px を打ち消し */
    padding: 0 !important;          /* header.css の左右 padding をリセット */
    position: relative;
    z-index: 1;                     /* メニュー(1000)より圧倒的に低い値 */
    display: block !important;      /* flex表示を解除 */
}

/* 2. ラッパー要素 */
.breadcrumb-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: left;
}

.breadcrumb-list {
    display: flex !important;
    flex-wrap: wrap; /* SPで溢れた場合に折り返し */
    gap: 5px;
    font-size: 16px; /* パンくずとして適切なサイズ(18pxから変更) */
    margin: 0;
    padding: 10px 0; /* 上下に最低限の余白 */
    list-style: none;
    justify-content: flex-start; 
}

/* 区切り文字 */
.breadcrumb-list li + li::before {
    content: "＞";
    margin: 0 5px;
    color: #777;
    font-size: 16px;
}

.breadcrumb-list a {
    text-decoration: none;
    color: #333;
}

.breadcrumb-list a:hover {
    text-decoration: underline;
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 768px) {
    .room-container {
        padding-top: 15px;
        padding-bottom: 8px;
    }
    
    .breadcrumb-wrapper {
        padding: 0 10px;
    }

    .breadcrumb-list {
        font-size: 14px; /* 13px から 14px へ変更 */
    }
    
    .breadcrumb-list li + li::before {
        font-size: 12px;
        margin: 0 5px;
    }
}