/* ==================================
  対象：サイトの枠組みや、全体に影響する可能性のあるもの
  ・サイト全体の文字サイズやカラー、背景
  ・ヘッダ、フッタ、レフトナビ
  ・ハンバーガーメニュー
  　……など。
================================== */

@charset "UTF-8";

/* ヘッダのレイアウトシフト軽減 */
body {
    margin-top: 155px;
}
@media screen and (max-width: 750px) {
    body {
        margin-top: calc(100vw * 0.33 + 8px);
    }
    .b-header__navi {
        height: calc(100vw * 0.16);
    }
    .b-header__main {
        height: calc(100vw * 0.175);
    }
}

/* レフトナビ（PC用）↓↓----- */
.bebe-nav{
    width:100%;
    max-width:240px;
    height:100%;
    background:#ffffff;
    border:1px solid #96d2b0;
    border-radius:2px;
    overflow:hidden;
    box-sizing:border-box;
    margin-right:40px;
}
.bebe-nav__header{
    background:#96d2b0;
    color:#ffffff;
    font-family:'Italianno';
    font-size:32px;
    font-weight:400;
    padding:5px 14px 10px;
    text-align:center;
}
.bebe-nav__cat{
    border-bottom:1px solid #96d2b0;
}
.bebe-nav__cat:last-child{
    border-bottom:none;
}
.bebe-nav__trigger{
    width:100%;
    display:flex;
    align-items:center;
    background:none;
    border:none;
    border-radius:0;
    padding:7px 10px 7px 8px;
    cursor:pointer;
    font-size:13px;
    color:#595151;
    text-align:left;
    transition:background .18s,color .18s;
    gap:6px;
    line-height:1.35;
    box-sizing:border-box;
}
.bebe-nav__trigger::after{
    content:'';
    width:6px;
    height:6px;
    border-right:1.2px solid currentColor;
    border-bottom:1.2px solid currentColor;
    transform:rotate(45deg);
    flex-shrink:0;
    opacity:.4;
    transition:transform .24s ease,opacity .24s;
    margin-bottom:3px;
}
.bebe-nav__trigger:hover{
    background:#fbfaed;
    color:#595151;
}
.bebe-nav__trigger.is-open{
    background:#fcf8e0;
    color:#595151;
}
.bebe-nav__trigger.is-open::after{
    transform:rotate(225deg);
    opacity:.7;
    margin-bottom:-1px;
}
.bebe-nav__cat-img{
    width:32px;
    height:32px;
    object-fit:contain;
    flex-shrink:0;
    background:#ede6dc;
    border:1px dashed #c8b89e;
}
.bebe-nav__cat-img[src]:not([src=""]){
    border:none;
    background:transparent;
}
.bebe-nav__trigger-label{
    flex:1;
    min-width:0;
}
.bebe-nav__sub{
    max-height:0;
    overflow:hidden;
    transition:max-height .32s ease;
    background:#ffffff;
    border-top:1px solid rgba(89, 81, 81, .2);
}
.bebe-nav__sub.is-open{
    max-height:900px;
}
.bebe-nav__link{
    display:block;
    padding:7px 12px 7px 22px;
    font-size:12px;
    text-decoration:none;
    border-bottom:1px solid rgba(89, 81, 81, .2);
    transition:background .14s,color .14s,padding-left .14s;
    position:relative;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.5;
    box-sizing:border-box;
}
.bebe-nav__link:last-child{
    border-bottom:none;
}
.bebe-nav__link::before{
    content:'';
    position:absolute;
    left:12px;
    top:50%;
    margin-top:-1px;
    width:4px;
    height:1px;
    background:#c4b09a;
    transition:width .14s,background .14s;
}
.bebe-nav__link:hover{
    background:#fcf8e0;
    padding-left:26px;
    text-decoration:none;
}
.bebe-nav__link:hover::before{
    width:8px;
    background:#8c7560;
}
.bebe-nav__cat--accent{
    background:#fdf8f0;
}
.bebe-nav__cat--accent:first-of-type{
    border-top:2px solid #d5a95c;
}
.bebe-nav__cat--accent .bebe-nav__trigger{
    color:#595151;
}
.bebe-nav__cat--accent .bebe-nav__trigger:hover{
    background:#f5e8cf;
    color:#595151;
}
.bebe-nav__cat--accent .bebe-nav__trigger.is-open{
    background:#f5e8cf;
    color:#595151;
}
.bebe-nav__cat--accent .bebe-nav__sub{
    background:#fffdf8;
    border-top-color:rgba(181,140,60,.25);
}
.bebe-nav__cat--accent .bebe-nav__link{
    border-bottom-color:rgba(181,140,60,.25);
}
.bebe-nav__cat--accent .bebe-nav__link::before{
    background:#d5a95c;
}
.bebe-nav__cat--accent .bebe-nav__link:hover{
    background:#f5e8cf;
}
.bebe-nav__cat--accent .bebe-nav__link:hover::before{
    background:#8c6a30;
}
/* PC専用表示制御 */
@media (max-width: 1024px) {
  .bebe-nav { display: none; }
}
/* レフトナビ（PC用）ここまで↑↑----- */