/*
|---------------------------------------------------------------
| 本店商材の各店受取(和歌山店･四日市店)
|---------------------------------------------------------------
*/
:root {
    --ep-theme-color: #e57311;
    --ep-wakayama-color: #f4b350;
    --ep-yokkaichi-color: #f7bbca;
    --ep-header-padding-x: 30px;
}
:root {
    --ep-nav-color: #000000;
    --ep-nav-bgcolor: var(--ep-wakayama-color);
    --ep-nav-active-color: #e6750f;
    --ep-nav-active-bgcolor: #ffffff;
    --ep-nav-border-color: var(--ep-wakayama-color);
    --ep-nav-tab-color: #494949;
    --ep-nav-tab-bgcolor: #ffffff;
    --ep-nav-tab-active-color: #000000;
    --ep-nav-tab-active-bgcolor: var(--ep-wakayama-color);
    --ep-nav-tab-border-color: var(--ep-nav-border-color);
}

/* reset */
.mainframe_ .m-titleimg_,
.mainframe_ .m-title06_,
.mainframe_ .m-title01_,
.wrapper_ .m-title03_ {
    display: none;
}

/*
 * Contents
------------------------------------------------*/
.e-storePickup {
    container-type: inline-size;
    display: block;
    width: 840px;
    max-width: 100%;
    font-size: 1.6rem;
}
.e-storePickup__mv {
    display: block;
    width: 100%;
    margin: 0 0 clamp(20px, 3.57vw, 30px);
}
.e-storePickup__topics {
    display: block;
    width: 100%;
    margin: 0 0 clamp(20px, 3.57vw, 60px);
    padding: 0 min(3%, var(--ep-header-padding-x));
}
.e-storePickup__nav {
    display: block;
    width: 100%;
}
.e-storePickup__nav:not(.js--active) {
    visibility: hidden;
}
.e-storePickup__heading {
    padding: 10px 3%;
    border-top: 3px solid #211813;
}

.e-storePickup-mv {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.e-storePickup-mv img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * 必ずお読みください
------------------------------------------------*/
.e-storePickup-topic {
    --topic-color: #fe0e11;
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px var(--ep-padding-x, 30px);
    margin: 0 auto;
    color: #111;
    background: #fff;
    border: 1px solid var(--topic-color);
    border-radius: 3px;
    position: relative;
    text-decoration: none !important;
}
a.e-storePickup-topic {
    color: #111;
    background: #fff;
}
.e-storePickup-topic::before {
    content: "";
    display: block;
    width: 44px;
    height: auto;
    aspect-ratio: 48/41;
    background-image: url("/contents/common/img/icon_attention.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}
.e-storePickup-topic:hover {
    opacity: 1;
    background: #fff6cc;
}
.e-storePickup-topic[href] {
    --arrow-size: 10px;
    --arrow-offset: clamp(10px, 2vw, 20px);
    --ep-padding-x: calc(var(--arrow-size) * 1.5 + var(--arrow-offset));
}
.e-storePickup-topic[href]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--arrow-offset);
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-width: 0 1px 1px 0;
    border-color: #111;
    border-style: solid;
    transform: translateY(-50%) rotate(-45deg);
}
.e-storePickup-topic__content {
    display: block;
}

.e-storePickup-topic-title {
    color: var(--topic-color);
}

/*
 * タブ
------------------------------------------------*/
.e-storePickup__nav {
    --ep-nav-padding-x: var(--ep-header-padding-x);
    --ep-tab-gap: 6px;
    --ep-tab-bottom-gap: 10px;
    --ep-tab-border-radius: 3px;
    --ep-tab-border-width: 2px;
}
@container (width > 750px) {
    .e-storePickup__nav {
        --ep-nav-padding-x: 0;
        --ep-tab-gap: 2px;
        --ep-tab-bottom-gap: 0px;
        --ep-tab-bottom-border-width: 5px;
        --ep-tab-border-radius: 8px 8px 0 0;
        --ep-tab-border-width: 1px;
    }
}

.e-storePickup-tab {
    width: 100%;
    border-bottom: var(--ep-tab-bottom-border-width, 4px) solid var(--ep-nav-border-color);
    padding: 0 var(--ep-nav-padding-x);
    padding-bottom: var(--ep-tab-bottom-gap);
    overflow-x: auto;
}
.e-storePickup-tab__list {
    list-style: none;
    padding: 0;
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ep-tab-gap);
}
.e-storePickup-tab__list__item {
    display: flex;
    flex: 1 0 auto;
    max-width: 100%;
}
.e-storePickup-tab-link {
    width: 100%;
    padding: 0.75em 0.5em calc(0.75em + 8px);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: var(--ep-nav-tab-color);
    background-color: var(--ep-nav-tab-bgcolor);
    text-decoration: none !important;
    text-align: center;
    border: var(--ep-tab-border-width) solid var(--ep-nav-tab-border-color);
    border-radius: var(--ep-tab-border-radius);
}
.e-storePickup-tab-link:hover {
    opacity: 1;
}
.e-storePickup-tab-link[href]:hover {
    color: var(--ep-nav-tab-active-color);
    background-color: color-mix(in srgb, var(--ep-nav-tab-active-bgcolor), #ffffff 85%);
}
.e-storePickup-tab-link.js--active {
    color: var(--ep-nav-tab-active-color);
    background-color: var(--ep-nav-tab-active-bgcolor);
    pointer-events: none;
}
.e-storePickup-tab-link[href]::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: var(--ep-nav-border-color);
    transform: rotate(45deg);
    margin: 0 auto;
}
.e-storePickup-tab-link.js--active::after {
    opacity: 0;
    visibility: hidden;
}
@container (width > 750px) {
    .e-storePickup-tab-link {
        padding: 0.75em 0.5em;
    }
    .e-storePickup-tab-link::after {
        display: none !important;
    }
}
.e-storePickup-tab-link > b {
    display: block;
    font-size: 1.0em;
    font-weight: 700;
}
.e-storePickup-tab-link > span {
    display: block;
    font-size: 0.8em;
    font-weight: 500;
}

/*
 * ボタン類
------------------------------------------------*/
.e-storePickup-navs {
    width: 100%;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 var(--ep-nav-padding-x, 0px);
}

.e-storePickup-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.e-storePickup-nav__head {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    color: #231816;
    text-align: center;
}
.e-storePickup-nav__body {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: normal;
}

.e-storePickup-nav-items {
    container-type: inline-size;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(45%, 12em), 1fr));
    gap: clamp(5px, 1.2cqw, 10px);
}
.e-storePickup-nav-items a {
    width: 100%;
    height: auto;
    min-height: 3.125em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0.25em 0.25em;
    color: var(--ep-nav-color);
    background-color: var(--ep-nav-bgcolor);
    font-size: clamp(12px, 4.5cqw, 16px);
    line-height: 1.25;
    border-radius: 3px;
    border: 1px solid var(--ep-nav-border-color);
    position: relative;
    text-decoration: none !important;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.e-storePickup-nav-items a:hover {
    opacity: 1;
}
.e-storePickup-nav-items a[href]:hover,
.e-storePickup-nav-items a.js--active {
    color: var(--ep-nav-active-color);
    background-color: var(--ep-nav-active-bgcolor);
}

.e-storePickup-nav-items a small {
    font-size: max(10px, 0.5em);
}

.e-storePickup-tab-contents {
    display: contents;
}
.e-storePickup-tab-contents *[data-filtercode31]:not(.js--active) {
    display: none;
}

/*
 * Title
------------------------------------------------*/
.e-storePickup-title {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #211813;
    font-weight: bold;
    font-size: 2.0rem;
    text-align: center;
}