/* カスタマイズ用CSS */
* {
    font-family: 'Noto Sans JP', sans-serif;
}

.ec-layoutRole__header {
    position: relative;
    z-index: 90;
    width: 100%;
    background: white;
}
.ec-headerNaviRole {
    padding: 0 10px 10px;
}

.ec-headerTitle .ec-headerTitle__title {
    text-align: left;
}
.ec-headerTitle .ec-headerTitle__title a {
    margin-bottom: 10px;
}

.headerInfoWrap {
    display: flex;
    align-items: center;
    min-height: 50px;
    background: black;
    color: white;
    padding: 5px 5px 5px 55px;
}
.headerInfoWrap >a {
    color: white;
}
.headerInfoWrap >a:hover {
    opacity:.8;
}
.ec-headerNaviRole__right {
    flex-wrap: wrap;
}
.ec-headerNav .ec-headerNav__itemIcon {
    margin-right: 0;
}
.ec-headerNav__itemImg {
    width: 18px !important;
    height: 18px;
    vertical-align: middle;
    margin: 2px 0 0 10px;
}
.ec-cartNavi {
    padding: 12px 10px 10px;
}
.ec-cartNavi .ec-cartNavi__icon {
    vertical-align: bottom;
}

.ec-headerNaviWrap {
    position:relative;
    z-index: 90;
    background: white;
}

.ec-itemNav {
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
    z-index: 10;
    background: white;
    border-top: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2;
}
.ec-itemNav__nav2 {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    width: auto;
    max-width: 1400px;
    height: auto;
    list-style-type: none;
    text-align: center;
}
.ec-itemNav__nav2 li a {
  display: block;
  margin: 0;
  padding: 8px 16px;
  height: auto;
  color: #2e3233;;
  font-size: 16px;
  text-decoration: none;
  text-align: left;
  background: #fff;
}
.ec-itemNav__nav2 li ul li:before {
    content: "";
    display: block;
    height: 1px;
    background: #c2c2c2;
    margin-top: 16px;
    margin-left: 8px;
    margin-right: 8px;
}
.ec-itemNav__nav2 li ul li {
    display: block;
    flex-basis: calc(100% / 6);
}
.ec-itemNav__nav2 li ul li a {
    color: black;
    border-bottom: none;
    font-weight: bold;
    margin: 8px;
}
.ec-itemNav__nav2 > li:hover >a,
.ec-itemNav__nav2 > li:hover li:hover > a {
    background: #f2f2f2;
}
.ec-itemNav__nav2 li ul li ul {
    position: static;
    display: flex;
    flex-flow: column;
    margin-bottom: 16px;
}
.ec-itemNav__nav2 li ul li ul li:before {
    background:none;
    margin-top: 0;
}
.ec-itemNav__nav2 li ul li ul li a {
    background: white;
    color: black;
    font-size: 15px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
}
.ec-itemNav__nav2 li:hover ul li ul li a:hover {
    background: #f2f2f2;
    color: black;
}

.ec-headerNavSP {
    top: 5px;
    left: 5px;
    border: 2px solid #ddd;
}
.ec-drawerRoleClose {
    top: 5px;
    border: 2px solid #ddd;
}

.product_description{
    margin: 20px 0px;
}

div.layout1-recommend2-slide p.title{
    margin-bottom: 20px !important;
}

/*スライドショー*/
.slick-slide img {
    object-fit: cover;
    width: 100%;
}

/*Campaignブロック*/
.wrap-campaign {
    font-size: 16px;
    border: 1px solid #333;
    border-radius: 10px;
}
.wrap-campaign a {
    padding: 12px;
    border-radius: 10px;
}
.wrap-campaign a:hover {
    background: #f2f2f2;
}

.block_main_visual img {
  object-fit: cover;
    width: 100%;
}

/*Recommendブロック*/
.recommend-img {
    border-radius: 50%;
    border: 2px solid #ddd;
    padding: 15px;
}

/*Brandブロック*/
.btn-brand {
    background: black;
    color: white;
    padding: 1em 1.5em;
    border: 1px solid black;
    border-radius: .5em;
}
a.btn-brand:hover {
    background: #f2f2f2;
}
/*Newsお知らせ*/
.ec-newsRole {
    background: none;
    padding: 0;
}
.ec-newsRole .ec-newsRole__newsItem {
    padding: 5px 0px;
    border-bottom: 1px solid #ddd;
}

.ec-footerRole {
    background: none;
    padding-top: 2rem;
}
.ec-footerNavi {
    color: black;
    margin-bottom: 0;
    border-top: 1px solid #7d7d7d;
}
.ec-footerTitle {
    background: white;
    color: black;
}
.ec-footerTitle__logo img {
    max-width: 300px;
}
.line-wrap {
    margin-top: 20px;
}

/*定休日カレンダー（プラグイン）*/
.apg_sc_table {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1.5;
    margin: 0 auto;
    float: left;
    width: 48%;
}

.apg_sc_table th,
.apg_sc_table td {
 border: 1px solid #ccc;
}

.apg_sc_table thead th {
 padding: 10px;
 font-weight: bold;
 vertical-align: top;
 color: #fff;
 background: #efefef;
}

.apg_sc_table tbody th {
 background: #efefef;
 line-height: 2.4em;
 text-align: center;
}

.apg_sc_table td {
 padding: 10px;
 vertical-align: top;
 text-align: center;
 background-color: #fff;
}

/* ★休日のカラーはここで設定しています。*/
.apg_sc_table .apg_sc_holiday {
 background: #ECC6C7 !important;
}

.apg_sc_table .apg_sc_saturday {
 /*background: #BDE2E8;*/
}

.apg_sc_table .apg_sc_sunday,
.apg_sc_table .apg_sc_sunday {
 /*background: #ECC6C7;*/
}

.calendar_txt {
    color: #232323;
    font-size: 12px;
    margin: .5em auto 2em;
}

.holiday_color {
    color: #ECC6C7;
}

.ec-welcomeMsg .ec-introductionCode{
    margin: 20px 0px 10px;
}

.ec-welcomeMsg .ec-QRCode{
    width: 150px;
    height: 150px;
    margin : 0 auto;
}

@media only screen and (max-width: 767px) {
 .apg_sc_table {
 float: none;
 margin-top: 20px;
 margin-right: auto;
 }
}

/*商品一覧*/
button.favolite {
    background: none;
    border: none;
    color: #232323;
    padding: 10px;
    height: auto;
    white-space: normal;
    text-align: left;
    line-height: normal;
}
p.no-stock {
    font-size: 13px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin: 1em 0;
}

p.no-selected {
    font-size: 15px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin: 1em 0;
}

.ec-productRole__actions .ec-select select {width:100%;}

@media only screen and (min-width: 768px) {
    .headerInfoWrap {
        padding: 5px;
        justify-content: center;
    }
    .ec-headerNaviRole {
        position: relative;
        z-index: 90;
        background: white;
        max-width: 1150px;
        padding-top: 5px;
        padding-bottom: 15px;
    }
    .ec-headerNav__itemImg {
        width: 25px !important;
        height: 25px;
        margin-top: 0;
    }
    .ec-headerNav__itemLink {
        display: none !important;
    }
    .ec-cartNavi {
        margin-left: 10px;
    }

    .ec-headerTitle .ec-headerTitle__title a {
        font-size: 30px;
    }

    .ec-headerNaviRole__search >.d-block select {
        max-width: 200px;
    }
    .ec-headerRole {
        position: relative;
        z-index:2;
        background: white;
        padding-top: 0;
    }
    .have_curtain .ec-overlayRole {
        display: block;
        z-index: 10;
    }

    .ec-categoryNaviRole {
        display: none;
    }
    .ec-itemNav__nav2 {
        position: relative;
        flex-wrap: wrap;
    }
    .ec-itemNav__nav2 li {
        display: inline-block;
        position: static;
    }
    .ec-itemNav__nav2 li .drop {
        display: none;
    }
    .ec-itemNav__nav2 li ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: absolute;
        left: 0;
        width: 100%;
        background: white;
        z-index: 100;
        padding: 0;
    }

    .ec-drawerRole.is_active {
        display: block;
    }


    .ec-itemNav__nav {
        display: block;
    }
    .ec-itemNav__nav li {
        float: none;
    }
    .ec-itemNav__nav li ul {
        display: none;
        position: static;
    }
    .ec-itemNav__nav li a {
        text-align: left;
    }

    /*Newsお知らせ*/
    .ec-newsRole .ec-newsRole__news {
        border: none;
    }
    .ec-newsRole .ec-newsRole__newsHeading {
        align-items: center;
    }
    .ec-newsRole .ec-newsRole__newsItem {
        border-bottom: 1px solid #ddd;
    }

    /*フッター*/
    .ec-footerNavi{
        border-top: none;
    }
    .ec-footerTitle__logo img {
        max-width: 300px;
    }
    .line-wrap {
        margin-top: 0;
    }
}

@media only screen and (min-width: 992px) {
    /*ロゴ*/
    .ec-headerTitle img {
        max-width: 300px;
    }

    .ec-headerNav__itemLink {
        display: inline-block !important;
    }

    .ec-categoryNaviRole {
        display: block;
        width: 100%;
        position: relative;
    }

    .ec-drawerRole.is_active {
        display:none;
    }

    .ec-itemNav__nav li {
        float: left;
        width: auto;
    }

    .menuoverlay{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.5);
    }
}