/* =========================================================
   BREADCRUMB
   大米米穀店 / THE THOR
   完成版

   ・トップページは対象外
   ・木目背景をそのまま表示
   ・家アイコンを削除
   ・HOME →「大米米穀店」
   ・現在ページ名は表示
   ・現在ページはクリック不可
   ・階層間は「➜」
   ・文字色は生成り白
   ・下側paddingは0
========================================================= */


/* ---------------------------------------------------------
   パンくず全体
--------------------------------------------------------- */

body:not(.home) .breadcrumb{
    margin:0 !important;

    /* 下側paddingは0 */
    padding:14px 0 0 0 !important;

    background:transparent !important;
    background-color:transparent !important;

    border:0 !important;
    border-bottom:0 !important;

    box-shadow:none !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}


/* スクロールバー非表示 */
body:not(.home) .breadcrumb::-webkit-scrollbar{
    display:none;
}


/* ---------------------------------------------------------
   パンくず本体
--------------------------------------------------------- */

body:not(.home) .breadcrumb__list{
    position:relative !important;

    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;

    box-sizing:border-box !important;

    width:auto !important;
    max-width:1170px !important;

    margin:0 auto !important;

    /* THE THORの本文左右余白に合わせる */
    padding:0 20px !important;

    list-style:none !important;

    background:transparent !important;

    white-space:nowrap !important;
}


/* THE THORのclearfixを無効化 */
body:not(.home) .breadcrumb__list::after{
    content:none !important;
    display:none !important;
}


/* ---------------------------------------------------------
   各パンくず項目
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item{
    position:relative !important;

    display:flex !important;
    align-items:center !important;

    float:none !important;
    flex:0 0 auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#fffdf8 !important;

    font-size:1.05rem !important;
    font-weight:400 !important;
    line-height:1.4 !important;

    white-space:nowrap !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.32) !important;
}


/* ---------------------------------------------------------
   通常リンク
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item a{
    display:inline-block !important;

    margin:0 !important;
    padding:0 !important;

    color:#fffdf8 !important;

    font-size:1.05rem !important;
    font-weight:400 !important;
    line-height:1.4 !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.32) !important;
}


/* hover */
body:not(.home) .breadcrumb__item a:hover{
    color:#ffffff !important;
    opacity:.84;
}


/* ---------------------------------------------------------
   家アイコンを完全に削除
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item.icon-home::before{
    content:none !important;

    display:none !important;

    width:0 !important;
    height:0 !important;

    margin:0 !important;
    padding:0 !important;
}


/* ---------------------------------------------------------
   HOME →「大米米穀店」
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item.icon-home > a{
    font-size:0 !important;
    line-height:1 !important;
}


body:not(.home) .breadcrumb__item.icon-home > a::before{
    content:"大米米穀店" !important;

    display:inline-block !important;

    color:#fffdf8 !important;

    font-size:1.05rem !important;
    font-weight:400 !important;
    line-height:1.4 !important;

    letter-spacing:.01em !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.32) !important;
}


/* ---------------------------------------------------------
   THE THOR標準の細い矢印を削除
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item::after{
    content:none !important;

    position:static !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;

    border:0 !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   階層間に「➜」
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item:not(:last-child)::after{
    content:"➜" !important;

    display:inline-block !important;

    position:static !important;

    width:auto !important;
    height:auto !important;

    margin:0 10px !important;

    color:#f2dfaa !important;

    font-size:1.2rem !important;
    font-weight:700 !important;
    line-height:1 !important;

    border:0 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.25) !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   現在ページ

   ページ名は表示する。
   自分自身へのリンクだけクリック不可。
--------------------------------------------------------- */

body:not(.home) .breadcrumb__item-current{
    display:flex !important;

    color:#fffdf8 !important;
}


body:not(.home) .breadcrumb__item-current > a{
    color:#fffdf8 !important;

    pointer-events:none !important;

    cursor:default !important;

    text-decoration:none !important;
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width:768px){

    /* パンくず全体 */
    body:not(.home) .breadcrumb{
        /* 上だけ12px、下は0 */
        padding:12px 0 0 0 !important;
    }


    /* 左右余白 */
    body:not(.home) .breadcrumb__list{
        padding-left:20px !important;
        padding-right:20px !important;
    }


    /* 文字サイズ */
    body:not(.home) .breadcrumb__item,
    body:not(.home) .breadcrumb__item a{
        font-size:1rem !important;
        line-height:1.3 !important;
    }


    /* 「大米米穀店」 */
    body:not(.home) .breadcrumb__item.icon-home > a::before{
        font-size:1rem !important;
        line-height:1.3 !important;
    }


    /* 矢印 */
    body:not(.home) .breadcrumb__item:not(:last-child)::after{
        margin-left:8px !important;
        margin-right:8px !important;

        font-size:1.15rem !important;
    }
}

/* ---------------------------------------------------------
   パンくずとメインコンテンツの間の余白を解消
--------------------------------------------------------- */

body:not(.home) .breadcrumb + *,
body:not(.home) .l-breadcrumb + *,
body:not(.home) .l-breadcrumb + .l-main,
body:not(.home) .l-breadcrumb + .l-content{
    margin-top:0 !important;
    padding-top:0 !important;
}

body:not(.home) .l-breadcrumb{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* ---------------------------------------------------------
   パンくず直下 .l-wrapper の上マージンを解消
   （THE THORの style.min.css が margin:40px 15px を付ける）
--------------------------------------------------------- */

/* .wider（パンくず親）直後の .l-wrapper だけを縮める */
body:not(.home) .wider + .l-wrapper{
    margin-top:14px !important;
}

@media (max-width:768px){
    body:not(.home) .wider + .l-wrapper{
        margin-top:12px !important;
    }
}

/* ---------------------------------------------------------
   スマホで 01-base.css の .l-wrapper{padding:20px 0 !important}
   が付き、パンくず直下に余分な上下余白が出るため打ち消す
--------------------------------------------------------- */

@media (max-width:768px){
    body:not(.home) .wider + .l-wrapper{
        padding-top:0 !important;
    }
}