@charset "UTF-8";

/* =================================================   
   パンくずリスト（Breadcrumb）完全版
   ================================================= */

/* 外枠：ナビゲーション全体の設定 */
.breadcrumb-nav {
    display: block !important;    /* 強制的にブロック要素にする */
    width: 100% !important;
    height: auto !important;      /* style.cssのheight設定を解除 */
    margin-top: 15px !important;  /* 上の画像との余白 */
    margin-bottom: 10px !important; /* 下のコンテンツとの余白 */
    background: transparent !important;
    border-bottom: none !important; /* 余計な線を消す */
}

/* コンテンツ幅を制御するラッパー */
.breadcrumb-wrapper {
    max-width: 800px !important; /* style.cssの最大幅に合わせる */
    margin: 0 auto !important;    /* 画面中央に配置 */
    padding: 0 20px !important;   /* 左右の余白（ロゴの開始位置に合わせる） */
    text-align: left !important;  /* 確実に左寄せ */
}

/* リスト本体（ol） */
.breadcrumb-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;     /* 横並びにする */
    flex-wrap: wrap;              /* スマホで長くなった場合に折り返す */
    align-items: center;
    justify-content: flex-start !important; /* 左端から並べる */
}

/* 各項目（li） */
.breadcrumb-list li {
    font-size: 16px;              /* 文字サイズを大きく読みやすく */
    color: #666;
    display: flex;
    align-items: center;
    font-family: "Yu Mincho", "游明朝体", serif; /* 旅館らしいフォント */
}

/* リンクの設定 */
.breadcrumb-list li a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb-list li a:hover {
    color: #ea6800;               /* style.cssのアクセントカラー */
    text-decoration: underline;
}

/* 区切り文字（ ＞ ）の設定 */
.breadcrumb-list li:not(:last-child)::after {
    content: ">";
    margin: 0 12px;               /* 左右の隙間をしっかり取る */
    color: #888;                  /* 以前より少し濃くして見やすく */
    font-size: 16px;              /* 文字と同じサイズに大きく */
    font-weight: bold;            /* 太字で存在感を出す */
    font-family: sans-serif;      /* 記号が潰れないように設定 */
    display: inline-block;
    transform: translateY(-1px);  /* 文字との高さのバランスを微調整 */
}

/* 現在のページのスタイル（最後の項目） */
.breadcrumb-list li[aria-current="page"] {
    color: #999;
    font-weight: normal;
}

/* =================================================   
   レスポンシブ対応
   ================================================= */
@media screen and (max-width: 768px) {
    .breadcrumb-nav {
        margin-top: 15px !important;
        margin-bottom: 25px !important;
    }
    
    .breadcrumb-wrapper {
        padding: 0 16px !important; /* style.cssのスマホ余白に合わせる */
    }

    .breadcrumb-list li {
        font-size: 14px;            /* スマホでは少しだけ小さく */
    }

    .breadcrumb-list li:not(:last-child)::after {
        font-size: 14px;
        margin: 0 8px;
    }
}