@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap);

@font-face {
    font-family: Noto Sans JP;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

abbr,
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
pre,
ul {
    margin: 0;
    padding: 0;
    font-size: 14px
}

body {
    font-family: Arial, sans-serif;

}

body {
    font-family: Noto Sans JP, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: 0 auto;
}


main {
    display: block
}

ol,
ul {
    list-style: none
}

div {
    word-break: break-word
}

a {
    text-decoration: none
}


/* contents */


#wrapper {
    position: relative;


}

/* set */

#set {
    background-color: #fbecb8;

}

.line {
    background: url(images/bg-line.png);
    padding-top: 25px;
}

#setinnner {
    position: relative;
}


#set p {
    text-align: center;
    margin: 2rem;
}

.category-wrap {
    display: flex;
    justify-content: center;
    padding: 2%;
}


/* campaign */

#campaign {

    background-image: url(images/bg-line.png), linear-gradient(180deg, #F0E2BB 0%, #F0E2BB 19%, #fadecc 19%, #fadecc 100%);
    background-repeat: repeat-x;
}

.campaign-wrap {
    display: flex;
    justify-content: center;
    padding: 2%;
}

.campaign-box {
    width: 22%;
}

.campaign-box p {
    text-align: center;
}

.reccomend-title {
    text-align: center;
}

.reccomend-title p {
    margin: 1%;
}


/* spotlight */

#spotlight {

    background-image: url(images/bg-line.png), linear-gradient(180deg, #F0E2BB 0%, #F0E2BB 19%, #fbecb8 19%, #fbecb8 100%);
    background-repeat: repeat-x;
}

.spotlight-wrap {
    display: flex;
    justify-content: center;
}

.spotlight-box {
    width: 311px;
    margin: 1%;
    background-color: #fff;
}

.spotlight-text {
    padding: 5%;
}

.text-red {
    color: #e35e1d;
}


/* shoplist */

#shoplist {

    background-image: url(images/bg-line.png), linear-gradient(180deg, #F0E2BB 0%, #F0E2BB 19%, #fadecc 19%, #fadecc 100%);
    background-repeat: repeat-x;

}

.shop-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.shop-box {
    width: 20%;
    margin: 1%;
}


/* device */

@media only screen and (min-width:879px) {}

@media only screen and (min-width:879px) {
    header {}
}

footer {}


@media only screen and (min-width:879px) {
    footer {}
}

.onlyPc {
    display: none !important
}

.onlySp {
    display: block !important
}

section {
    margin: 0 auto;
}

.pdt25 {
    padding-top: 25px !important;
}

.button img {
    width: 20%;
}

.mb100 {
    margin-bottom: 100px !important;
}

.pd100 {
    padding-bottom: 100px !important;
}

@media only screen and (max-width:640px) {
    .set-box {
        width: 100%;
        margin: 0 auto;
    }

    img {
        width: 100%;
    }

    .category-wrap, .campaign-wrap {
        flex-wrap: wrap;
        padding: 0;
        justify-content: space-between;
    }

    .spotlight-wrap {
        display: block;
    }

    .campaign-wrap {
        width: 80%;
        margin: 0 auto;
    }

    .text-img {
        width: 40%;
        padding: 2% 0;
    }

    .spotlight-box {
        width: 80%;
        margin: 0 auto;
    }

    .category-box, .campaign-box {
        width: 49%;
        text-align: center;
    }

    .shop-box {
        width: 45%;
        margin: 1% 1% 2%;
    }

    .set-btn {
        text-align: center;
        margin: 0.5rem;
    }

    .button {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 150px;
    }

}

@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
        /* ここが本題 */
    }
}

@media only screen and (min-width:641px) {
    .set-box {
        width: 1200px;
        margin: 0 auto;

    }


    .category-box {
        width: 22%;
        text-align: center;
    }

    .shop-box {
        width: 20%;
        margin: 1%;
    }

    .set-btn {
        text-align: center;
        margin: 2rem;
    }

    .button {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 500px;
    }

    .shop-wrap, .campaign-wrap, .category-wrap {
        max-width: 1200px;
        margin: 0 auto !important;
    }
}