@charset "UTF-8";

/*==============================================
 共通 ここから
================================================*/
html {
    font-size: 18px;
    @media screen and (max-width: 1000px) {
    font-size: 14px;
    .tablet-none{display: none;}
    }
}
/* 変数指定 */
:root {
    --main-text-color: #333333;
    --title-text-color: #a9894a;
    --font-size-text: 1rem;
}

/* フッター外の背景も指定 */
body {
    background-color: #fff;
}
/* パンくず削除 */
#pankuzu {
    display: none;
}
main, main#wrapper {
    padding: 0;
    max-width: none !important;
}

#forfurusato img {
    width: 100%;
    height: 100%;
    display: block;
}
#forfurusato a {
    display: block;
}
#forfurusato h2{
    color: var(--title-text-color);
    font-size: 2rem;
    margin-bottom: 3%;
}
#forfurusato h3{
    color: var(--title-text-color);
    font-size: 1.5rem;
}
#forfurusato a:hover {
    opacity: .7;
}
#forfurusato .pc-none {
    display: none;
}
/* マーカー */
span.marker {
    background: linear-gradient(transparent 60%, #fbab3b99 40%);
    font-weight: bold;
    line-height: 1;
}
/* SVG共通 */
#forfurusato svg {
    width: 100%;
    height: auto;
    display: block;
}
/* 価格プロリセット */
.buy_price>ol .spesicalprice, .buy_price>ul .spesicalprice {
    display: none;
}
.buy_price>ul .intax {
    display: none !important;
}
.buy_price>ol .price, .buy_price>ul .price {
    color: #eb0012;
    font-size: 4cqw; /* 30px */
    display:inline-block
}
/* ¥マークの指定 */
.buy_price>ol .price, .buy_price>ul .price::first-letter {
    font-size: 3cqw;
}

/* ヘッダー画像削除 */
.header-info-red a{
    display: none;
}
/* header-sticky 高さ固定 */
.header-sticky {
    top: 141px !important;
}

/* ヘッダー画像削除 */
.header-info img {
    display: none;
}
/* フッター調整 */
footer {
    position: relative;
}
footer,
footer .bottom {
    margin: 0 !important;
}
article#contents {
    padding-bottom: 0 !important;
}

/*==============================================
#forfurusato 共通 ここから
================================================*/
/* フォント */
#forfurusato{
    color: var(--main-text-color);
    font-size: var(--font-size-text);
}
#forfurusato p {
    font-size: var(--font-size-text);
}

/* セクション共通 */
#forfurusato .section {
    position: relative;
}

/*==============================================
#forfurusato 共通 ここまで
================================================*/
#forfurusato .furusato__outer{
    /* background: url(../../IMAGE/forfurusato//parts_confetti02.webp),url(../../IMAGE/forfurusato//parts_confetti01.webp)  ;
    background-position: top 0px right 0px,bottom 0px left 0px;
    background-size: 30%;
    background-repeat: no-repeat;
    background-color: #f6f9fc; */

    background: url(../../IMAGE/forfurusato/main_2.webp);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover; /* 画像を要素全体に合わせる */
}


#forfurusato .furusato__inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    @media screen and (max-width: 1400px) {
    min-width: 600px;
    }
}

#forfurusato #top {
    justify-content: center;
    display: flex;
    position: relative;
    padding: 2%;
    /* overflow-x: clip;*/
    /* display: flex; */
    /* align-items: center;  */

    .top-item__logo {
        width: 16%;
        /* margin: 0 auto; */
        position: absolute;
        left: 2%;
        bottom: 38%;
        }

    & h1{
        padding: 2% 0 6%;
            & img{
            width: 100%;
            margin: 0 auto;
            }
    }
    .top-banner{
        width: 70%;
        height: auto;
        position: absolute;
        top: 116%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 7px solid #f7f3ed;
        background-color: #f7f3ed;
        /* box-shadow: 0px 10px 10px -6px rgba(32, 23, 4, 0.3); */
        box-shadow:0px 14px 14px -7px rgba(32, 23, 4, 0.3);
    }
        & p{
width: 100%;
        height: auto;
        position: absolute;
        top: 88%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 1.3rem;
        text-shadow: 4px 4px 4px rgba(32, 23, 4, 0.1), -4px -4px 4px rgba(32, 23, 4, 0.1), -4px 4px 4px rgba(32, 23, 4, 0.1), 4px -4px 4px rgba(32, 23, 4, 0.1), 4px 0 4px rgba(32, 23, 4, 0.1), -4px 0 4px rgba(32, 23, 4, 0.1), 0 4px 4px rgba(32, 23, 4, 0.1), 0 -4px 4px rgba(32, 23, 4, 0.1);
    }
}



/**************************
anchor
****************************/
#forfurusato #anchor{
    background: #f7f3ed;
        padding: 30px 0 30px;
        .flex-box {
            display: flex;
            justify-content: center;
            gap: 2%;
            width: 100%;

            & li{
                width: calc(80% / 2);
                }

        }

        .anchor__btn {
            position: relative;
            width: 100%;
            margin: 4% auto;
            padding: .8em 0;
            text-align: center;
            background: linear-gradient(135deg, #a9894a 10%, #c2a467 90%);
            background-size: 200% auto;
            background-position: right center;
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1.3rem;
            box-shadow: 0px 10px 10px -6px rgba(32, 23, 4, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(135deg);
                transition: all 0.3s ease 0s;
            }
            &:hover {
            background-position: left center !important;
            color: white !important;
            }
        }
}
#forfurusato #anchor.campaign{
    padding: 210px 0 30px !important;
}

/**************************
btn
****************************/
#forfurusato .btn {
            position: relative;
            width: 56%;
            margin: 2% auto;
            padding: .8em 0;
            text-align: center;
            background: linear-gradient(135deg, #a9894a 10%, #c2a467 90%);
            background-size: 200% auto;
            background-position: right center;
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1.3rem;
            box-shadow: 0px 10px 10px -6px rgba(32, 23, 4, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
            &:hover {
            background-position: left center !important;
            color: white !important;
            }
        }
/* ==============================================
コンテンツ
================================================*/
/* #forfurusato #contents01{
    background: linear-gradient(135deg, #e9eef3 10%, #f6f9fc 90%);
    color: white;
    padding: 5% 5% 1%;

    .contents-wrap{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 5%;

        .contentsbox{
            width: calc(100% / 2);

            .elementsbox{
                display: flex;
                flex-wrap: wrap;
                gap:2%;
                color: #1c1c1d;

                & h2{font-size: 2rem;}
                & p{
                    margin: 5% 0;}
                .co_02{width: calc(66% / 2)}              
                }
        }
    }
} */
            /* .elementsbox-picture{
                margin: 0 auto; 
                .pic{width: 80% !important; }
                } */

#forfurusato #contents01{
    /* background: linear-gradient(135deg, #ffffff 10%, #f7f3ed 90%); */
    background-color: white;
    
    padding: 5% 5% 1%;
    text-align: center;

    .parts-img{
        width: 10%;
        margin: 0 auto;
        padding-bottom: 2%;}

    
    .contents-wrap{
        display: flex;
        flex-direction: row;
        margin-bottom: 1%;
        justify-content: center;
        gap:2%;

        .contentsbox{
            width: calc(90% / 4);
            /* gap: 1%; */
            background: white;
            padding: 1%;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 20px;
            /* box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); */
            position: relative;

                
                & p{object-fit: contain;}
                & img{
                    /* height:220px; */
                    object-fit: contain;
                    margin: 8% 0;
                }


        }
    }
    .text__btn{
            width: 100%;
            margin: 0 0 4%;
            padding: .8em 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap:2%;

            & img {
                width: 28px;
            }
            & p{
                font-size: large;
                color: #b10e18;
                border-bottom: solid 2px #b10e18 ;
            }


            /* &:hover {
            background-position: left center !important;
            color: white !important;
            } */
    }
}

#forfurusato #contents02{
    background: linear-gradient(135deg, #c3ac80 10%, #dac294 90%);
    padding: 5% 5% 1%;
    text-align: center;
    .parts-img{
        width: 20%;
        margin: 0 auto;
        padding-bottom: 2%;}

    & h2{
        color: white;
            & span{font-size: 1.2rem;}
    
    }

    .contents-wrap{
        display: flex;
        /* flex-direction: row; */
        align-items: center;
        margin-bottom: 5%;
        justify-content: center;
        gap:2%;
        flex-direction: column;

        li.goods:nth-child(n+5):nth-child(-n+12){display: none;}

        .contentsbox{
            width: calc(90% / 1);
            background: #f7f3ed;
            padding: 3%;
            margin-bottom: 2%;
            display: flex;/* 直下の要素を並列に */
            flex-direction: column; /* 直下の要素を縦積みに */
            align-items: center;
            border-radius: 20px;
            position: relative;
                
                & p{object-fit: contain;margin-bottom: 2%;}
                & img{
                    width: 16%;
                    object-fit: contain;
                    margin: 2% 0;
                }
                /* .flex-box {
                    display: flex;
                    overflow-x: scroll;
                    scroll-snap-type: x mandatory;
                    gap: 2%;
                    width: 100%;
                } */
                .flex-box {
                    width: 100%;
                    margin: 0 auto;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 2%;
                }

                .goods{
                    scroll-snap-align: start;
                    width: calc(96% / 5);
                    margin-bottom: 2%;
                    display: flex;
                    justify-content: center;

                    & a{
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background:white;
                        padding: 5%;
                        border-radius: 5px;
                        aspect-ratio: 1 / 1;
                        min-width: 200px;
                        box-sizing: border-box;
                    }

                    & .flex_r {
                            width: 100%;
                    }

                    & img{
                        object-fit: contain;
                        width: 100%;
                        border-radius: 5px;
                        overflow: hidden;
                        margin: 0 0 5% !important;
                        background-color: white;
                    }
                    
                    & h5{
                        font-size: 0.8rem;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        line-height: 2rem;
                    }
                    .price{color: #b10e18;font-size: 0.8rem;}
                    .local{font-size: 0.8rem;}

                    & a .btn-black.red {
                        position: relative;
                        color: #fff;
                        border-radius: 5px;
                        transition: .2s;
                        margin: 0;
                        width: 100%;
                        background-color: #cf1d2b;
                        border: 1px solid #cf1d2b;
                        font-size: .8rem;
                        padding: .3rem 0;
                        box-sizing: border-box;
                    }
                }
        }
    }
}


/*ランキング*/
#forfurusato #contents02-1{
    /*background: linear-gradient(135deg, #c3ac80 10%, #dac294 90%);*/
    background: #f7f3ed;
    padding: 5% 5% 1%;
    text-align: center;
    .parts-img{
        width: 20%;
        margin: 0 auto;
        padding-bottom: 2%;}

    & h2{
        color: var(--title-text-color);
            & span{font-size: 1.2rem;}
    
    }

    .contents-wrap{
        display: flex;
        /* flex-direction: row; */
        align-items: center;
        margin-bottom: 5%;
        justify-content: center;
        gap:2%;
        flex-direction: column;

        .contentsbox{
            width: calc(90% / 1);
            /*background: #f7f3ed;*/
            /*padding: 3%;*/
            margin-bottom: 2%;
            display: flex;/* 直下の要素を並列に */
            flex-direction: column; /* 直下の要素を縦積みに */
            align-items: center;
            border-radius: 20px;
            position: relative;
                
                & p{object-fit: contain;margin-bottom: 2%;}
                & img{
                    width: 16%;
                    object-fit: contain;
                    margin: 2% 0;
                }
                /* .flex-box {
                    display: flex;
                    overflow-x: scroll;
                    scroll-snap-type: x mandatory;
                    gap: 2%;
                    width: 100%;
                } */
                .flex-box {
                    width: 100%;
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    gap: 2%;

                    /* CSSカウンター */
                    counter-reset: item;
                }
                
                .goods{
                    position: relative;
                    scroll-snap-align: start;
                    width: calc(96% / 5);
                    min-width: 200px;
                    margin-bottom: 2%;
                    display: flex;
                    justify-content: center;
                    box-sizing: border-box;
                    background:white;
                    padding: 1%;
                    border-radius: 5px;
                    overflow: hidden;

                    &::after {
                        position: absolute;
                        top: 0;
                        right: 0;
                        color: #FFF;
                        background-color: rgb(34, 34, 34);
                        line-height: 1;
                        padding: .5em;
                        font-size: .8rem;

                        /* CSSカウンター */
                        counter-increment: item;
                        content: counter(item);
                    }

                    & a{
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                    }

                    & .flex_r {
                            width: 100%;
                    }

                    & img{
                        object-fit: contain;
                        width: 100%;
                        border-radius: 5px;
                        overflow: hidden;
                        margin: 0 0 5% !important;
                        background-color: white;
                    }
                    
                    & h5{
                        font-size: 0.8rem;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        line-height: 2rem;
                        color: #222;
                    }
                    .price{color: #b10e18;font-size: 0.8rem;}
                    .local{font-size: 0.8rem;color: #222;}

                    & a .btn-black.red {
                        position: relative;
                        color: #fff;
                        border-radius: 5px;
                        transition: .2s;
                        margin: 0;
                        width: 100%;
                        background-color: #cf1d2b;
                        border: 1px solid #cf1d2b;
                        font-size: .8rem;
                        padding: .3rem 0;
                        box-sizing: border-box;
                    }
                }

        }
    }
}

.css-l6g1p6 {
    position: absolute;
    display: flex
;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    top: 0px;
    right: 0px;
    background-color: rgb(34, 34, 34);
    width: 28px;
    height: 28px;
    border-top-right-radius: 5px;
    z-index: 1;
}

.css-l6bw6a {
    margin: 0px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: rgb(255, 255, 255);
}

/* #forfurusato #contents03{
    background: linear-gradient(145deg, #3b70f1 10%, #5151e1 90%);
    color: white;
    padding: 5% 5% 1%;
    text-align: center;

    & h2{font-size: 2rem; margin-bottom: 3%;}

    .contents-wrap{
        display: flex;
        flex-direction: row;
        margin-bottom: 5%;
        justify-content: center;
        gap:2%;


        .contentsbox{
            color: #1c1c1d;
            width: calc(72% / 2);
            background: white;
            padding: 3%;
            display: flex;
            flex-direction: column; 

            border-radius: 20px;
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
            position: relative;

            &::after {
                content: "";
                position: absolute;
                bottom: 17px;
                left: 50%;
                transform: translateX(-50%);
                width: 82%;
                height: 10px;
                box-shadow: 0 34px 21px rgba(8, 78, 143, 0.3);
                background-color: transparent;
                border-radius: 80px / 4px;
            }
                & h3{font-size: 1.5rem;margin-bottom: 2%;}

                & img{height:100px;object-fit: contain;margin:6%;}
                & img.num{height:50px;margin: 6% 0;}


        }
    }
} */

#forfurusato #contents03{
    /* background: linear-gradient(135deg, #ffffff 10%, #f7f3ed 90%); */
    background-color: white;
    
    padding: 5% 5% 6%;
    text-align: center;

    
    .contents-wrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .contentsbox{
            width: calc(90% / 2);
            background: #f7f3ed;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            
            border: solid 1px #a9894a;        
            margin-bottom: -1px;
            margin-right: -1px;

            & a{
                font-size: 1.2rem;display: block;padding:4% 30% ; 

                &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #a9894a;
                border-right: 3px solid #a9894a;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
            &:hover {
            background-position: left center !important;
            color: #a9894a !important;
            }
            }

                & p{object-fit: contain;}
                & img{
                    /* height:220px; */
                    object-fit: contain;
                    margin: 8% 0;
                }
        }
        /*
        .contentsbox:last-child {
            width: 90%;
            & a{
                font-size: 1.1rem;display: block;padding:2.5% ; 
            }
        }
        */
    }

}

#forfurusato #contents04{
    background-color: #f7f3ed;
    padding: 5% 5% 1%;
    text-align: center;

    .parts-img{
        width: 10%;
        margin: 0 auto;
        padding-bottom: 4%;}

    & h2{
        
            & span{font-size: 1.2rem;}
    }

    .contents-wrap{
        display: flex;
        margin-bottom: 5%;
        justify-content: center;
        gap:2%;
        flex-wrap: wrap;

        .contentsbox:nth-child(1) {width: calc(82% / 2);}
        .contentsbox:nth-child(2) {width: calc(82% / 2);}
        .contentsbox:nth-child(3) {width: calc(90% / 1);padding:3% 3% 6%;}

        .contentsbox{
            background: white;
            padding:3%;
            margin-bottom: 2%;
            display: flex;/* 直下の要素を並列に */
            flex-direction: column; /* 直下の要素を縦積みに */
            align-items: center;
            position: relative;
            border: solid 1px #a9894a;

                & h3{
                    
                    margin-bottom: 2%;
                    & span{font-size: 3rem;}
                }
                & p{
                    margin-bottom: 3%;
                }
                /* & img{
                    width: 16%;
                object-fit: contain;
                margin: 2% 0;
                } */

        .btn {
            position: relative;
            width: 100%;
            margin: 4% auto;
            padding: 0.6em 0;
            text-align: center;
            background: linear-gradient(135deg, #a9894a 10%, #c2a467 90%);
            background-size: 200% auto;
            background-position: right center;
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1.1rem;
            box-shadow: 0px 10px 10px -6px rgba(32, 23, 4, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
            &:hover {
            background-position: left center !important;
            color: white !important;
            }
        }
        .flex-box {
            display: flex;
            justify-content: center;
            gap: 2%;
            width: 100%;

            & li{
                width: calc(100% /2);
                }
        }

        .anchor__btn {
            position: relative;
            width: 100%;
            margin: 4% auto;
            padding: .8em 0;
            text-align: center;
            background: linear-gradient(135deg, #a9894a 10%, #c2a467 90%);
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1rem !important;
            box-shadow: 0px 9px 9px -9px rgba(32, 23, 4, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(135deg);
                transition: all 0.3s ease 0s;
                &:hover {
                background-position: left center !important;
                color: white !important;
                }
            }
        }

        }
    }
}


#forfurusato #finish{
    background: #f7f3ed;
    color: #1c1c1d;
    padding: 0 5% 5%;
    text-align: center;

    & h2{
        color:#e42537;
        font-size: 1.8rem; 
        margin-bottom: 3%;}
    & p{font-size: 1.2rem;}

        .top-item__btn {
            position: relative;
            width: 60%;
            margin: 4% auto;
            padding: .8em 0;
            text-align: center;
            background: linear-gradient(135deg, #b10e18 10%, #d02a34 90%);
            background-size: 200% auto;
            background-position: right center;
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1.5rem;
            box-shadow: 0px 10px 10px -6px rgba(32, 23, 4, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
            &:hover {
            background-position: left center !important;
            color: white !important;
            }
        }
}


/*-----------------------------------------------*/
/*トップページ*/
/*-----------------------------------------------*/
/* #forfurusato .pagetop {
position: fixed;
bottom: 20px;
right: 20px;
	z-index: 9999;
}

 #forfurusato .pagetop a ::before {
 font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 22px;
color: #fff;
 } 

#forfurusato .pagetop a {
	display: flex;
	justify-content: center;
align-items: center;
text-align: center;
	vertical-align: middle;
	color: #fff;
	background:rgba(86,73,68,0.8);
	border-radius: 80px; 
	width:70px;
	height:70px;
}
#forfurusato .pagetop a:hover{
	color: #fff !important; 
	transform: translateY(-2px);
} */

/*==============================================
ページトップ　ここまで
================================================*/