.wrapper {
        min-width: 100%;
    }


/***** css sp *****/

@media screen and (max-width: 767px) {

    .sp {
        display: none;
    }

main {
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

/*-- ‹¤’Ê --*/

:root {
    --color-red: #B30404;
    --color-navy: #251754;
    --color-gray: #999;
}

.gray {
    color: #666;
}

.red {
    color: var(--color-red);
}

/*-- sec-mv --*/

.sec-mv {
    width: 100%;
    margin: 0 auto calc(40 * (100vw / 375));
}

/*-- sec-campaign --*/

.sec-campaign {
    margin: 0 auto calc(60 * (100vw / 375));
    padding: calc(40 * (100vw / 375)) calc(30 * (100vw / 375));
    text-align: center;
    width: 90%;
    border: 1px solid #000;
    position: relative;
 
    & h2 {
        font: 600 calc(22 * (100vw / 375)) / 2 "Noto Sans JP", sans-serif;
        margin-bottom: calc(20 * (100vw / 375));
    }
}

.campaign-card {

    & .campaign-img {
        margin-bottom: calc(20 * (100vw / 375));
    }


    & div {
        width: 100%;
        font: 400 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        text-align: left;
    }

    & .txt-s {
        font: 600 calc(12 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        padding: calc(6 * (100vw / 375)) 0;
    }

    & .txt-m {
        font: 600 calc(15 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        padding: calc(6 * (100vw / 375)) 0;
    }

    & .txt-l {
        font: 600 calc(18 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        padding: calc(6 * (100vw / 375)) 0;
    }

    & .center-sp {
        text-align: center;
    }

    & .coupon-code {
        padding: calc(6 * (100vw / 375)) 0;
        text-align: center;
        margin-bottom: calc(6 * (100vw / 375));

        & span {
            color: #fff;
            background: var(--color-navy);
            padding: calc(6 * (100vw / 375)) calc(40 * (100vw / 375));
            font: 600 calc(20 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        }

    }
}

.sec-ttl {
    text-align: center;
    margin: 0 auto calc(40 * (100vw / 375));

    & h2 {
        color: var(--color-navy);
        font: 700 calc(26 * (100vw / 375)) / .8em "Noto Sans JP", sans-serif;
    }

    & p {
        font: 400 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
    }
}

/*-- sec-pickup --*/

.sec-pickup {
    margin-bottom: calc(60 * (100vw / 375));
}

.pickup-con {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: calc(40 * (100vw / 375)) 0;
    background: #F6F5FA;

    h3 {
        font: 600 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: calc(10 * (100vw / 375));
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: calc(10 * (100vw / 375));
        width: 90%;
        margin: 0 auto;
    }

    & li {
        width: calc((100% - calc(10 * (100vw / 375))) / 2);
        font: 600 calc(17 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        text-align: center;
    }

    & li span {
        background: var(--color-navy);
        color: #fff;
        padding: calc(10 * (100vw / 375)) 0;
        width: 100%;
        display: block;
    }
}

/*-- sec-category --*/

.sec-category {
    width: 100%;
    background: var(--color-navy);
    border-bottom: solid 1px #fff;
    padding: calc(50 * (100vw / 375)) 0 calc(60 * (100vw / 375));

    & .category-ttl h2 {
        color: #fff;
        text-align: center;
        font: 600 calc(22 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: calc(30 * (100vw / 375));
    }
}

.category-wrap {
    background: #fff;
    width: 90%;
    margin: 0 auto;
    padding: calc(80 * (100vw / 375)) calc(20 * (100vw / 375));
}

.category-item-l {
    width: 80%;
    margin: 0 auto calc(60 * (100vw / 375));
    align-items: center;
    position: relative;

    & .item-label {
        width: calc(100 * (100vw / 375));
        height: calc(100 * (100vw / 375));
        border-radius: 50%;
        background: var(--color-red);
        color: #fff;
        position: absolute;
        z-index: 1;
        left: calc(-30 * (100vw / 375));
        top: calc(-30 * (100vw / 375));

        & .item-label-inner {
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            align-items: center;
        }

        & .item-label-l {
            font: 800 calc(38 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            width: 60%;
            text-align: right;
        }

        & .item-label-m {
            font: 800 C / 1.1em "Montserrat","Noto Sans JP", sans-serif;
            width: 40%;
            text-align: left;
        }

    }

    & .item-img {
        width: 100%;
        margin-bottom: calc(10 * (100vw / 375)) ;
    }

    & .item-txt-wrap {
        width: 100%;

        & .item-img {
            margin-bottom: calc(20 * (100vw / 375));
        }

        & .item-brand {
            color: var(--color-gray);
            font: 600 calc(14 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: calc(4 * (100vw / 375));
        }

        & .item-name {
            font: 500 calc(17 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: calc(4 * (100vw / 375));
        }

        & .item-normal-price {
            font: 600 calc(16 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            text-decoration: line-through;
        }

        & .item-rate span {
            font: 600 calc(16 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: #fff;
            background: var(--color-red);
            padding: calc(2 * (100vw / 375)) calc(10 * (100vw / 375));
            margin-bottom: calc(10 * (100vw / 375));
        }

        & .item-sale-price {
            font: 800 calc(22 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: var(--color-red);
            margin-bottom: calc(10 * (100vw / 375));
        }

        & .item-btn span {
            background: #E6E3F1;
            text-align: center;
            padding: calc(10 * (100vw / 375)) 0;
            color: var(--color-navy);
            font: 800 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            width: 100%;
            display: block;
        }
    }
}


.category-item-m {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;

    & li {
        width: calc((100% - 4%) / 2);
        position: relative;
        margin-bottom: calc(40 * (100vw / 375));

        & .item-img {
            margin-bottom: calc(20 * (100vw / 375));
        }

        & .item-brand {
            color: var(--color-gray);
            font: 600 calc(12 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: calc(4 * (100vw / 375));
        }

        & .item-name {
            font: 500 calc(14 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: calc(4 * (100vw / 375));
        }

        & .item-normal-price {
            font: 600 calc(14 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            text-decoration: line-through;
        }

        & .item-rate span {
            font: 600 calc(14 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: #fff;
            background: var(--color-red);
            padding: calc(2 * (100vw / 375)) calc(10 * (100vw / 375));
            margin-bottom: calc(10 * (100vw / 375));
        }

        & .item-sale-price {
            font: 800 calc(21 * (100vw / 375)) / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: var(--color-red);
            margin-bottom: calc(50 * (100vw / 375));
        }

        & .item-btn {
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        & .item-btn span {
            background: #E6E3F1;
            text-align: center;
            padding: calc(10 * (100vw / 375)) 0;
            color: var(--color-navy);
            font: 800 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            width: 100%;
            display: block;
        }
    }
}


.category-btn {
    text-align: center;
    margin: calc(10 * (100vw / 375)) auto 0;

    & span {
        font: 800 calc(15 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        color: #fff;
        background: var(--color-red);
        padding: calc(14 * (100vw / 375)) calc(60 * (100vw / 375));
        border-radius: calc(35 * (100vw / 375));
    }
}



/*-- sec-itemsearch --*/

.sec-itemsearch {
    width: 100%;
    background: #f9f9f9;
    padding: calc(80 * (100vw / 375)) 0;
}

.itemsearch-con {
    width: 90%;
    margin: 0 auto calc(40 * (100vw / 375));

    & h3 {
        text-align: center;
        font: 600 calc(15 * (100vw / 375)) / 1.3em "Noto Sans JP", sans-serif;
        color: var(--color-gray);
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: calc(14 * (100vw / 375));
    }

    & li {
        width: calc((100% - calc(14 * (100vw / 375))) / 2);
        border: 1px solid #000;
        background: #fff;
	text-align: center;
        font: 600 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
	padding: calc(10 * (100vw / 375)) 0;
    }
}

.sec-itemsearch .brand {

        & div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 5%;
            margin: 0 calc(10 * (100vw / 375));
            align-items: center;
            height: 100%;
        }

        & img {
            width: 40%;
        }

        & p {
            width: 55%;
        }

}

.itemsearch-btn {
    text-align: center;
    margin: calc(80 * (100vw / 375)) auto 0;

    & span {
        font: 800 calc(15 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        color: #fff;
        background: var(--color-red);
        padding: calc(14 * (100vw / 375)) calc(70 * (100vw / 375));
        border-radius: calc(35 * (100vw / 375));
    }
}


/*-- sec-bottom --*/

.sec-bottom {
    width: 100%;
    border-top: 1px solid #ccc;
    padding-top: calc(60 * (100vw / 375));

    & .btn-3col {
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    & .btn-3col ul {
    }

    & .btn-3col li {
        flex: 0 0 calc(100% / 3 - 20px);
    }

    & .btn-3col div {
        font: 700 calc(15 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #666;
        border-radius: calc(30 * (100vw / 375));
        margin: 0 auto calc(20 * (100vw / 375));
        text-align: center;
        width: 100%;
        height: calc(60 * (100vw / 375));
        background: #fff;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-1col {
        width: calc(400 * (100vw / 375));
        margin: 0 auto;
    }

    & .btn-1col p {
        font: 700 calc(15 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        padding: calc(14 * (100vw / 375)) 0;
        margin: 0 auto calc(60 * (100vw / 375));
        text-align: center;
        width: calc(330 * (100vw / 375));
        background: #fff;
        position: relative;
    }

    & .btn-1col p::before {
    font: 300 1.8em / 1 'Material Symbols Outlined';
    content: '\e88a';
    position: absolute;
    top: .45em;
    left: 2.3em;
    }



}


}

/*******************************************************/

/***** css pc *****/

@media screen and (min-width: 768px) {

.sp {
    display: none;
}

main {
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

/*-- ‹¤’Ê --*/

:root {
    --color-red: #B30404;
    --color-navy: #251754;
    --color-gray: #999;
}

.gray {
    color: #666;
}

.red {
    color: var(--color-red);
}

/*-- sec-mv --*/

.sec-mv {
    width: 1200px;
    margin: 0 auto 100px;
}

/*-- sec-campaign --*/

.sec-campaign {
    margin: 0 auto 100px;
    padding: 40px 60px;
    text-align: center;
    width: 900px;
    border: 1px solid #000;
    position: relative;
 
    & h2 {
        font: 600 22px / 2 "Noto Sans JP", sans-serif;
        margin-bottom: 40px;
    }
}

.campaign-card {

    display: flex;
    flex-wrap: wrap;
    gap: 40px;

    & div {
        width: calc((100% - 40px) / 2);
        font: 400 16px / 1.4em "Noto Sans JP", sans-serif;
        text-align: left;
    }

    & .txt-s {
        font: 600 13px / 1.4em "Noto Sans JP", sans-serif;
        padding: 6px 0;
    }

    & .txt-m {
        font: 600 15px / 1.4em "Noto Sans JP", sans-serif;
        padding: 6px 0;
    }

    & .txt-l {
        font: 600 18px / 1.4em "Noto Sans JP", sans-serif;
        padding: 6px 0;
    }

    & .coupon-code {
        padding: 6px 0;

        & span {
            color: #fff;
            background: var(--color-navy);
            padding: 6px 40px;
            font: 600 20px / 1.4em "Noto Sans JP", sans-serif;
        }

    }
}

.sec-ttl {
    text-align: center;
    margin: 0 auto 40px;

    & h2 {
        color: var(--color-navy);
        font: 700 26px / .8em "Noto Sans JP", sans-serif;
    }

    & p {
        font: 400 14px / 1.4em "Noto Sans JP", sans-serif;
    }
}

/*-- sec-pickup --*/

.sec-pickup {
    margin-bottom: 100px;
}

.pickup-con {
    width: 700px;
    text-align: center;
    margin: 0 auto;
    padding: 60px 0;
    background: #F6F5FA;

    h3 {
        font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: 10px;
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 440px;
        margin: 0 auto;
    }

    & li {
        width: calc((100% - 20px) / 2);
        font: 600 17px / 1.4em "Noto Sans JP", sans-serif;
        text-align: center;
    }

    & li span {
        background: var(--color-navy);
        color: #fff;
        padding: 10px 0;
        width: 100%;
        display: block;
    }
}

/*-- sec-category --*/

.sec-category {
    width: 100%;
    background: var(--color-navy);
    border-bottom: solid 1px #fff;
    padding: 70px 0 100px;

    & .category-ttl h2 {
        color: #fff;
        text-align: center;
        font: 600 22px / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: 30px;
    }
}

.category-wrap {
    background: #fff;
    width: 1200px;
    margin: 0 auto;
    padding: 80px 100px;
}

.category-item-l {
    width: 700px;
    margin: 0 auto 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 10%;
    align-items: center;
    position: relative;

    & .item-label {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: var(--color-red);
        color: #fff;
        position: absolute;
        z-index: 1;
        left: -30px;
        top: -30px;

        & .item-label-inner {
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            align-items: center;
        }

        & .item-label-l {
            font: 800 38px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            width: 60%;
            text-align: right;
        }

        & .item-label-m {
            font: 800 16px / 1.1em "Montserrat","Noto Sans JP", sans-serif;
            width: 40%;
            text-align: left;
        }

    }

    & .item-img {
        width: 40%;
    }

    & .item-txt-wrap {
        width: 50%;

        & .item-img {
            margin-bottom: 20px;
        }

        & .item-brand {
            color: var(--color-gray);
            font: 600 16px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: 4px;
        }

        & .item-name {
            font: 500 18px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: 4px;
        }

        & .item-normal-price {
            font: 600 16px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            text-decoration: line-through;
            margin-bottom: 4px;
        }

        & .item-rate span {
            font: 600 18px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: #fff;
            background: var(--color-red);
            padding: 2px 10px;
            margin-bottom: 20px;
        }

        & .item-sale-price {
            font: 800 24px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: var(--color-red);
            margin-bottom: 20px;
        }


        & .item-btn span {
            background: #E6E3F1;
            text-align: center;
            padding: 10px 0;
            color: var(--color-navy);
            font: 800 16px / 1.4em "Noto Sans JP", sans-serif;
            width: 100%;
            display: block;
        }
    }
}


.category-item-m {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;

    & li {
        width: calc((100% - 12%) / 4);
        position: relative;

        & .item-img {
            margin-bottom: 20px;
        }

        & .item-brand {
            color: var(--color-gray);
            font: 600 12px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: 4px;
        }

        & .item-name {
            font: 500 14px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            margin-bottom: 4px;
        }

        & .item-normal-price {
            font: 600 14px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            text-decoration: line-through;
        }

        & .item-rate span {
            font: 600 14px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: #fff;
            background: var(--color-red);
            padding: 2px 10px;
            margin-bottom: 10px;
        }

        & .item-sale-price {
            font: 800 21px / 1.4em "Montserrat","Noto Sans JP", sans-serif;
            color: var(--color-red);
            margin-bottom: 50px;
        }

        & .item-btn {
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        & .item-btn span {
            background: #E6E3F1;
            text-align: center;
            padding: 10px 0;
            color: var(--color-navy);
            font: 800 16px / 1.4em "Noto Sans JP", sans-serif;
            width: 100%;
            display: block;
        }
    }
}

.category-btn {
    text-align: center;
    margin: 80px auto 0;

    & span {
        font: 800 15px / 1.4em "Noto Sans JP", sans-serif;
        color: #fff;
        background: var(--color-red);
        padding: 14px 70px;
        border-radius: 35px;
    }
}



/*-- sec-itemsearch --*/

.sec-itemsearch {
    width: 100%;
    background: #f9f9f9;
    padding: 80px 0;
}

.itemsearch-con {
    width: 780px;
    margin: 0 auto 40px;

    & h3 {
        text-align: center;
        font: 600 15px / 1.3em "Noto Sans JP", sans-serif;
        color: var(--color-gray);
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    & li {
        width: calc((100% - 42px) / 4);
        border: 1px solid #000;
        background: #fff;
	text-align: center;
        font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
	padding: 10px 0;
    }
}

.sec-itemsearch .brand {

        & div {
            display: flex;
            flex-wrap: wrap;
            gap: 5%;
            margin: 0 10px;
            align-items: center;
            height: 100%;
        }

        & img {
            width: 40%;
        }

        & p {
            width: 55%;
        }

}

.itemsearch-btn {
    text-align: center;
    margin: 80px auto 0;

    & span {
        font: 800 15px / 1.4em "Noto Sans JP", sans-serif;
        color: #fff;
        background: var(--color-red);
        padding: 14px 70px;
        border-radius: 35px;
    }
}

/*-- sec-bottom --*/

.sec-bottom {
    width: 100%;
    padding-top: 100px;
    border-top: 1px solid #ccc;

    & .btn-3col {
        width: 900px;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    & .btn-3col ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    & .btn-3col li {
        flex: 0 0 calc(100% / 3 - 20px);
    }

    & .btn-3col div {
        font: 700 17px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #666;
        border-radius: 35px;
        margin: 8px auto 40px;
        text-align: center;
        width: 100%;
        height: 70px;
        background: #fff;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-1col {
        width: 400px;
        margin: 0 auto;
    }

    & .btn-1col p {
        font: 700 17px / 1.4em "Noto Sans JP", sans-serif;
        padding: 14px 0px;
        margin: 0 auto 100px;
        text-align: center;
        text-indent: 1em;
        width: 400px;
        background: #fff;
        position: relative;
    }

    & .btn-1col p::before {
    font: 300 1.8em / 1 'Material Symbols Outlined';
    content: '\e88a';
    position: absolute;
    top: .3em;
    left: 2.0em;
    }


}