@charset "utf-8";



.loading {

    background-color: transparent;

}



.loading::after {

    display: none;

}



.noise {

    z-index: 4;

}



.maintitle {

    position: relative;

    margin: 5.64375rem 2rem 0 auto;

    ;

    filter: drop-shadow(9px 22px 1.5px rgba(11, 52, 128, 0.39));

    width: 20rem;

    z-index: 50;

}



.slick-slider {

    overflow: hidden;

    margin: 0 auto 64px;

}



.goods_pickup {

    position: relative;

    display: flex;

    align-items: center;

    transform: translateY(-21px);

}



/* ↓PICK UPの場合は以下をコメントアウト↓ */

/* .goods_pickup::before {

    content: 'NEW';

    font-size: 2.7275rem;

    font-family: 'Passion One';

    font-weight: 400;

    line-height: normal;

    text-align: center;

    color: var(--primary_truewhite);

    display: inline-block;

    width: auto;

    height: auto;

    position: absolute;

    top: 1.3rem;

    left: 2.2rem;

    z-index: 101;

} */

/* ↑PICK UPの場合はコメントアウト↑*/



/* ↓NEWの場合は以下をコメントアウト↓ */

.goods_pickup::before {

    content: 'PICK UP';

    font-size: 2.6rem;

    font-family: 'Passion One';

    font-weight: 400;

    line-height: 2.1975rem;

    text-align: center;

    color: #d5d5d5;

    display: inline-block;

    width: 7.1875rem;

    height: 7.1875rem;

    position: absolute;

    top: 0.9rem;

    left: 0.8rem;

    z-index: 101;

}

/* ↑NEWの場合はコメントアウト↑*/



.goods_pickup::after {

    content: '';

    display: inline-block;

    width: 8.1rem;

    height: 8.1rem;

    background-image: url(../images/star_black.png);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    transform: translateY(-50%);

    top: -1.2rem;

    left: 0.4rem;

    z-index: 100;

    animation: 5s linear infinite rotation1;

}



@keyframes rotation1 {

    0% {

        transform: rotate(0);

    }



    100% {

        transform: rotate(360deg);

    }

}



.slider__item {

    height: fit-content;

    margin: 0 2.6rem 1.5rem;

    position: relative;

    filter: drop-shadow(6px 13px 1px rgba(0, 0, 0, 0.25));

    padding-top: 2rem;

}



.slider__item img {

    width: 20rem;

}



.slider__item_name {

    color: #FFF;

    font-family: var(--gill_sans);

    font-size: 2.213125rem;

    font-style: normal;

    font-weight: 1000;

    line-height: normal;

    letter-spacing: -0.02275rem;

    position: absolute;

    top: 5.5rem;

    right: 1.55rem;

}



.goods_photo {

    width: 14rem;

    position: absolute;

    top: 65%;

    left: 50%;

    transform: translateY(-50%) translateX(-50%);

    filter: drop-shadow(4px 4px 4px rgba(61, 20, 7, 0.25));

}



.goods_lists_photo {

    width: 14.5rem;

    position: absolute;

    top: 62%;

    left: 50%;

    transform: translateY(-50%) translateX(-50%);

    filter: drop-shadow(4px 4px 4px rgba(61, 20, 7, 0.25));

}





.slick-arrow {

    width: 10rem;

    top: 0rem;

    z-index: 1000
}













.arrow_box {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin: 1.25rem 1.25rem 0;

    position: relative;

}



.prev-arrow,

.next-arrow {

    display: block;

    width: 3.125rem;

    height: 3.125rem;

    background: var(--primary_truewhite);

    border: 0.251rem solid var(--primary_black);

    border-radius: 50%;

    transition: all .3s ease;

    cursor: pointer;

    position: relative;

}



.prev-arrow {

    transform: rotate(180deg);

    margin-right: 0.554375rem;

}



.prev-arrow::before,

.next-arrow::before {

    position: absolute;

    background-image: url(../images/arrow-left-bold.png);

    content: '';

    display: inline-block;

    width: 1.241875rem;

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    /* border-right: 0.3rem solid var(--primary_black);

    border-top: 0.3rem solid var(--primary_black);

    border-radius: 0.1rem; */

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    transform: rotate(180deg);

}



.prev-arrow:hover::before,

.next-arrow:hover::before {

    transform: scale(1.2) rotate(180deg);

    transition: 0.2s;

}









.slick-dots li button:before {

    font-size: 18px;

    top: 6px;

}







/* dotsを丸くカスタマイズするCSS */

.dots-wrap {

    display: flex;

    margin-top: 0.5rem;

    justify-content: center;

    filter: drop-shadow(3px 3px 2.5px rgba(5, 21, 52, 0.7));

    padding-bottom: 2rem;

}





.dots-wrap li {

    width: 1.3rem;

    height: 1.3rem;

    margin: 0 0.4375rem;

    background: #0C7479;

    border-radius: 50%;

    cursor: pointer;

}



.dots-wrap li:hover,

.dots-wrap li.slick-active {

    width: 1.3rem;

    height: 1.3rem;

    background: var(--primary_truewhite);

}



.dots-wrap li button {

    display: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    outline: none;

    padding: 0;

    border: none;

    background-color: transparent;

}



/* pickup */

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



    .goods_pickup {

        position: relative;

        width: 130%;

        margin: 0 auto;

        display: flex;

        align-items: center;

        transform: translateX(-13rem);

    }



    .maintitle {

        margin: 4.984375rem auto 0 3rem;

        filter: drop-shadow(1.4375rem 1.625rem 1.5px rgba(11, 52, 128, 0.39));

        width: 34.75rem;

    }



    .slider__item {

        width: 25.5625rem;

        height: fit-content;

        margin: 0 8rem 2rem;

        position: relative;

        filter: drop-shadow(0.375rem 0.8125rem 1px rgba(0, 0, 0, 0.25));

        padding-top: 3rem;

    }





    .slider__item img {

        width: 25.5625rem;

    }



    .goods_photo {

        width: 16rem;

        top: 20.5rem;

        left: 11rem;

        filter: drop-shadow(4px 4px 4px rgba(61, 20, 7, 0.25));

    }



    .slider__item_name {

        color: #FFF;

        font-family: var(--gill_sans);

        font-size: 2.5rem;

        font-style: normal;

        font-weight: 1000;

        line-height: normal;

        letter-spacing: -0.02275rem;

        position: absolute;

        top: 8.24rem;

        right: 2.05rem;

    }



    .arrow_box {

        width: 45%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin: 15.4rem 25rem 0;

        position: absolute;

    }



    .prev-arrow,

    .next-arrow {

        display: block;

        width: 4.5rem;

        height: 4.5rem;

        background: var(--primary_truewhite);

        border: 0.3rem solid var(--primary_black);

        border-radius: 50%;

        transition: all .3s ease;

        cursor: pointer;

        position: relative;

    }



    .prev-arrow {

        transform: rotate(180deg);

        margin-right: 0.554375rem;

    }



    .prev-arrow::before,

    .next-arrow::before {

        position: absolute;

        background-image: url(../images/arrow-left-bold.png);

        content: '';

        display: inline-block;

        width: 1.641875rem;

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        /* border-right: 0.3rem solid var(--primary_black);

        border-top: 0.3rem solid var(--primary_black);

        border-radius: 0.1rem; */

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        margin: auto;

        transform: rotate(180deg);

        transition: 0.2s;

    }







    .slider__item__content {

        position: relative;

    }



    .article {

        position: relative;

    }



    /* .goods_pickup::before {

        content: 'NEW';

        font-size: 3.25rem;

        line-height: 7.1875rem;

        width: 7.1875rem;

        height: 7.1875rem;

        top: 4.29rem;

        left: 45.55rem;

    } */



    .goods_pickup::before {

        content: 'PICK UP';

        font-size: 3.1rem;

        line-height: 2.4875rem;

        width: 7.1875rem;

        height: 7.1875rem;

        top: 3.475rem;

        left: 45.5rem;

        z-index: 101;

    }



    .goods_pickup::after {

        width: 10rem;

        height: 10rem;

        background-image: url(../images/star_black.png);

        transform: translateY(-50%);

        top: 0.6rem;

        left: 44.1rem;

    }



}



.goods_buy_caution {

    margin-top: 4rem;

    margin-bottom: 5rem;

}



.goods_buy_caution_hukidasi {

    position: relative;

}



.goods_buy_caution_hukidasi {

    width: 14.8125rem;

    height: 9.1875rem;

    margin: 0 auto;

    font-family: "Zen Maru Gothic", sans-serif;

    font-size: 1.0625rem;

    font-style: normal;

    font-weight: 900;

    line-height: 2.25rem;

    /* 211.765% */

    letter-spacing: 0.074375rem;

    filter: drop-shadow(6px 13px 1px rgba(0, 0, 0, 0.25));



}



.hukidasi_img {

    position: absolute;

    content: '';

    display: inline-block;

    height: 22.8125rem;

    width: 22.8125rem;

    bottom: -10.36rem;

    right: -5.4rem;

    z-index: -1;

    animation: poyopoyo 2.1s ease-out infinite;

}



.hukidasi_img_pc {

    display: none;

}



@keyframes poyopoyo {



    0%,

    35%,

    45%,

    55% {

        transform: scale(1);

    }



    40%,

    50% {

        transform: scale(0.95);

    }

}



.goods_buy_caution_sns_icon {

    margin-top: 1.4rem;

    margin-left: 0.2rem;

    height: 1.939312rem;

}





.goods_buy_caution_sns_icon_item img {

    height: 2.2393125rem;

    margin-right: 0.3rem;



}



.goods_buy_caution_sns_icon_item_Thread {

    margin-left: 0.19rem;

}



.goods_buy_caution_sticker {

    padding-top: 8rem;

    padding-left: 4rem;

    padding-bottom: 0rem;

    width: 100%;

    height: 23.55rem;

    transform: rotate(15.07deg);

    position: relative;

}



.goods_buy_caution_sticker img {

    filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.7));

}



.goods_buy_caution_sticker::before {

    content: '';

    display: inline-block;

    width: 4rem;

    height: 4rem;

    background-image: url(../images/star_yellow_small.png);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    transform: translateY(-50%);

    top: 16.4rem;

    left: 2.8rem;

    z-index: 100;

}



.goods_buy_caution_sticker::after {

    content: '';

    display: inline-block;

    width: 3.5rem;

    height: 3.6rem;

    background-image: url(../images/star_yellow_small.png);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    transform: translateY(-50%);

    top: 9.6rem;

    left: 17rem;

    z-index: 100;

}



/* goods_buy_caution */

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

    .goods_buy_caution {

        margin-top: 6.8rem;

        margin-bottom: 17.2rem;

        display: flex;

    }



    .hukidasi_img {

        display: none;

    }



    .hukidasi_img_pc {

        display: block;

        position: absolute;

        height: 22.8125rem;

        width: 43.625rem;

        bottom: -11rem;

        right: -3.9rem;

        z-index: -1;

        animation: poyopoyo 2.1s ease-out infinite;

    }



    .goods_buy_caution_hukidasi {

        width: 34rem;

        height: 9.1875rem;

        margin: 0 auto 0 14.1875rem;

        font-size: 1.2625rem;

    }



    .goods_buy_caution_sticker {

        position: absolute;

        padding-top: 3rem;

        margin: -3rem auto 0 52rem;

        width: 31%;

    }



    .goods_buy_caution_txt {

        margin-top: 0.5rem;

        margin-left: 0.2rem;

    }



    .goods_buy_caution_sticker::before {

        content: '';

        display: inline-block;

        width: 4.1875rem;

        height: 4.1875rem;

        background-image: url(../images/star_yellow_small.png);

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        position: absolute;

        transform: translateY(-50%);

        top: 7.5rem;

        left: 3.8rem;

        z-index: 100;

    }



    .goods_buy_caution_sticker::after {

        content: '';

        display: inline-block;

        width: 3.5rem;

        height: 3.5rem;

        padding-bottom: 3rem;

        background-image: url(../images/star_yellow_small.png);

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        position: absolute;

        transform: translateY(-50%);

        top: 18rem;

        left: 25.6rem;

        z-index: 100;

    }





}





.title_goodslist {

    margin-left: 1.75rem;

    font-family: var(--gill_sans);

    font-size: 4.125rem;

    font-style: italic;

    font-weight: 800;

    line-height: 3.6875rem;

    letter-spacing: 0.0825rem;

    filter: drop-shadow(9px 15px 1.2px rgba(11, 52, 128, 0.32));

}



.goods_list_content {

    width: 20.135375rem;

    margin: 1.4rem auto;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.goods_list_content_item {

    position: relative;

    filter: drop-shadow(6px 13px 1px rgba(0, 0, 0, 0.25));

}



.goods_list_content_item_title {

    position: absolute;

    color: #FFF;

    font-family: var(--gill_sans);

    font-size: 2rem;

    font-style: normal;

    font-weight: 1000;

    line-height: normal;

    letter-spacing: -0.305px;

    top: 4.29rem;

    right: 1.9rem;

}





.container {

    position: relative;

    background-color: var(--primary_turquoise);

}



.section_goods_pickup {

    will-change: transform;



}



.white_line {

    margin-top: 8.8rem;

    width: 103vw;

    position: absolute;

    border: var(--primary_truewhite) solid 1.4rem;

    z-index: 4;

    filter: drop-shadow(0.6rem 0.6rem 0.0625rem rgba(11, 52, 128, 0.29)) blur(0.45px);

    transform: translateX(-0.6rem);

}



.white_line_shadow {

    margin-top: 10.5rem;

    width: 100vw;

    position: absolute;

    border: #dddddd solid 0.7rem;

    filter: blur(0.45px);

    z-index: 5;



}



.grid_shadow {

    margin-top: 11.5rem;

    transform: translateX(-3vw);

    width: 104vw;

    height: 1000vh;

    position: absolute;

    background-size: 3.8125rem 3.8125rem;

    /* 固定したいときはbackground-positionを変更 */

    background-position: 50% 0%;

    background-image:

        repeating-linear-gradient(90deg,

            #FFF,

            #FFF 0.1875rem,

            transparent 0.0625rem,

            transparent 3.8125rem),

        repeating-linear-gradient(0deg,

            #FFF,

            #FFF 0.1875rem,

            transparent 0.0625rem,

            transparent 3.8125rem);

    filter: drop-shadow(0.4rem 0.4rem 0.0625rem rgba(11, 52, 128, 0.29)) blur(0.55px);





}



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


    .grid_shadow {

        transform: translateX(-1vw);

        width: 101vw;

        background-size: 9.0625rem 9.0625rem;

        background-position: 50% 0%;

        background-image:

            repeating-linear-gradient(90deg,

                #FFF,

                #FFF 0.375rem,

                transparent 0.0625rem,

                transparent 9.0625rem),

            repeating-linear-gradient(0deg,

                #FFF,

                #FFF 0.375rem,

                transparent 0.0625rem,

                transparent 9.0625rem);

        filter: drop-shadow(0.6rem 0.6rem 0.0625rem rgba(11, 52, 128, 0.27)) blur(0.45px);

    }

}



/* goods-list_pc */

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



    .goods_list_content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        gap: 4.5rem 3rem;
        width: 87.77777778%;
        margin: 0.8rem auto 6rem;
    }



    .goods_list_content_item {

        width: 24.135375rem;

    }



    .goods_lists_photo {

        width: 19.5rem;

    }



    .title_goodslist {

        margin-left: 5.3rem;

        padding-bottom: 2.1rem;

        font-size: 6.5rem;

        line-height: 59px;

        letter-spacing: 1.32px;

        filter: drop-shadow(9px 22px 1.5px rgba(11, 52, 128, 0.39));

    }



    .goods_list_content_item_title {

        font-size: 2.47rem;

        font-weight: 1000;

        letter-spacing: -0.0190625rem;

        top: 4.6rem;

        left: unset;

        right: 2.4rem;

    }



}





/* GOODS揺れのアニメーション */

/* .slick01 .slick-slide {

    transform-origin: 50% 0;

    transform: rotate(-8deg);

    transition-delay: 0.2s;

    transition-duration: 0.8s;

    transition-property: all;

    transition-timing-function: ease;

} */



/* .slick01 .slick-slide.slick-active {

    transform-origin: 50% 0;

    transform: rotate(40deg);

}  */