/* カスタマイズ用CSS */

/* ===========================================
 * 共通
 * ======================================== */
 .ec-layoutRole .ec-layoutRole__contents {
    width: 100%;
    max-width: calc(1520px + 40px);
    padding: 0 20px;
    margin: 0 auto;
    justify-content: space-between;
 }
 
/* 左サイド */
/* ======================================== */
@media only screen and (min-width: 768px) {
    .ec-layoutRole .ec-layoutRole__left {
        width: 280px;
    }
}

/* メイン */
/* ======================================== */
.ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: calc(100% - 320px);
    max-width: 1200px;
    padding: 0;
    margin: 0 0 0 40px;
}

@media only screen and (max-width: 767px) {
    .ec-layoutRole .ec-layoutRole__mainWithColumn{
        width: 100%;
        margin-left: 0;
    }
}
 /* ===========================================
 * ヘッダー
 * ======================================== */
 .ec-headerNaviRole {
    width: 100%;
    max-width: calc(1520px + 40px);
    padding: 0 20px;
    margin: 0 auto;
 }

/* ログイン　ナビ */
/* ======================================== */

.ec-headerNaviRole .ec-headerNaviRole__right {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem 0;
}

.ec-headerNav .ec-headerNav__itemIcon {
    display: block;
    margin-bottom: 0.25rem;
    margin-left: 0;
    color: #0D6E38;
}

.fa-fw {
    width: auto;
}

.ec-headerNav .ec-headerNav__item {
    padding: 0 0.25rem;
}

.ec-headerNav {
    height: 44px;
}


@media only screen and (min-width: 768px) {
    .ec-headerNav .ec-headerNav__itemLink {
        display: block;
        margin-right: 0;
    }
}

/* カート */
/* ======================================== */
@media only screen and (min-width: 768px) {
    .ec-cartNavi {
        background: #fff;
    }
    
    .ec-cartNavi .ec-cartNavi__price {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .ec-headerRole__cart {
    margin-top: -1rem;
    }
    .ec-cartNavi {
        padding: 0;
    }
}

/* 検索 */
/* ======================================== */
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    background: #fff;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select {
    color: #525263;
}

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
        border-top: 6px solid #525263;
}

@media only screen and (min-width: 768px) {
    .ec-headerNaviRole .ec-headerNaviRole__left {
         width: 100%;
         text-align: center;
    }
    
    .ec-headerNaviRole .ec-headerNaviRole__search {
        margin-bottom: 2rem;
    }
    
    .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .ec-headerSearch .ec-headerSearch__keyword {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 400px;
        background: #fff;
    }
    
    .ec-headerSearch .ec-headerSearch__category {
        width: 200px;
    }
    
    .ec-headerSearch .ec-headerSearch__category .ec-select select {
        max-width: 200px;
        border-bottom:1px solid #ccc ;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
    }
}

 /* ===========================================
 * 左サイド
 * ======================================== */
 
 /* ロゴ */
/* ======================================== */
.blk_l_logo {
    padding: 1rem;
    text-align: center;
}

/* カテゴリー */
/* ======================================== */

@media only screen and (min-width: 768px) {
    /*カテゴリ縦も並べる*/
    .ec-itemNav__nav {
        display: flex;
        flex-direction: column;
    }
    
    /*文字を左寄せ*/
    .ec-itemNav__nav li a {
        text-align: left;
    }
    
    /*カテゴリの位置と横幅調整*/
    .ec-itemNav__nav li ul li ul,
    .ec-itemNav__nav li ul li:hover ul li {
        width: 100%;
    }
    
    .ec-itemNav__nav li ul {
        left: 100%;
        width: 100%;
        top: 0;
    }
    
    /*背景色、文字サイズ調整*/
    .ec-itemNav__nav > li:hover > a {
        background-color: #eee;
    }
    
    .ec-itemNav__nav li a,
    .ec-itemNav__nav li ul li a {
        font-size: 14px;
        padding: 12px;
    }
}

 /* ===========================================
 * フッター
 * ======================================== */
 .ec-footerRole {
     background: #F7F7EC;
     border: none;
 }
 .ec-footerNavi {
     color: initial;
 }
 
 .ec-footerTitle {
     color: initial;
 }
 
 @media only screen and (min-width: 768px) {
    .ec-footerNavi .ec-footerNavi__link a {
       text-decoration: none;
    }
}

 /* ===========================================
 * トップページ
 * ======================================== */
 
/* メイン画像 */
/* ======================================== */

.top_img img {
    width: 100%;
}