@charset 'utf-8';
.f-sale{
    background-color: #E3F0F6;
    .mainw{
        max-width:calc(360 / 393* 100vw) ;
        margin-left: auto;
        margin-right: auto;
        @media (min-width: 768px) {
            max-width:1080px;
            padding: 0 20px;
            width: 100%;
        }
    }
    .txt{
        font-size: calc(14 / 393* 100vw);
        line-height: calc(20 / 14* 1);
        @media (min-width: 768px) {
            font-size: 16px;
            line-height: calc(24 / 16* 1);
            text-align: center;
        }
    }
    .item_name{
        font-size: calc(18 / 393* 100vw);
        line-height: calc(28 / 18* 1);
        font-weight: 600;
        font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
        @media (min-width: 768px) {
            margin-top: 36px;
            font-size: 28px;
            text-align: center;
        }
    }
    .yen{
        font-size: calc(36 / 393* 100vw);
        font-weight: 600;
        font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
        color: #A11931;
        padding-right:  calc(6 / 393* 100vw);
        @media (min-width: 768px) {
            padding-right: 12px;
            font-size: 48px;
        }
    }
    .price{
        font-size: calc(12 / 393* 100vw);
        @media (min-width: 768px) {
            font-size: 20px;
            text-align: center;
        }
    }
    /*-----------mv*/
    .mv{
        img{
            width: 100%;
        }
        p+p{
            margin-top: 1em;
        }
    }
    .mv_contents{
        padding: calc(40 / 393* 100vw) calc(32 / 393* 100vw)  calc(36 / 393* 100vw);
        @media (min-width: 768px) {
            padding: 66px 0 113px;
        }
    }
    .member-registration{
        padding: 20px 0 0;
        @media (min-width: 768px) {
            max-width: 1080px;
            margin-left: auto;
            margin-right: auto;
            padding: 80px 20px 0;
        }
    }
    .benefits{
        .benefits_box{
         position: relative;
         border: 1px solid #C0AA79;
         padding: 7.6rem 0 5.5rem;
         margin-top: 11.6rem;
         max-width: 79.2rem;
         width: 100%;
         margin-left: auto;
         margin-right: auto;
 
            h2{
                word-break: keep-all;
                font-size: 2.4rem;
                text-align: center;
                font-weight: 600;
                padding: 0 2rem;
                background-color: #fff;
                position: absolute;
                top: 0;
                left: 50%;
                line-height: 1;
                transform: translate(-50%,-150%);
                z-index: 10;
            }
            p{
                text-align: center;
                font-weight: 500;
                position: relative;
                z-index: 10;
            }
        }
    }
    .bg-benefits{
        .benefits_box{
            position: relative;
            &::after{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.6;
                content:'';
                background: #fff;
            }
            h2{
                background-color: #E3F0F6;
                width: max-content;
                @media (max-width: 767px) {
                    line-height: 1.3;
                    transform: translate(-50%, -115%);
                }
            }
            p{
                @media (max-width: 767px) {
                    text-align: center!important;
                }
            }
            .linkbtn{
                position: relative;
                z-index: 10;
                a{
                    @media (max-width: 767px) {
                        width: 100%;
                    }
                }
            }
        }
    }
     @media (max-width: 767px) {
         .benefits{
            .benefits_box{
                padding: calc( 55 / 375 * 100vw ) calc( 26 / 375 * 100vw ) calc( 38 / 375 * 100vw );
                margin-top: calc( 62 / 375 * 100vw );
                max-width:calc( 330 / 375 * 100vw );
                h2{
                    font-size:calc( 16 / 375 * 100vw );
                    padding: 0 calc( 6 / 375 * 100vw );
                }
                p{
                    text-align: initial;
                }
            }
          }
     }
    /*-----------pickup*/
    .pickup{
        h2{
            text-align: center;
            img{
                max-width: calc(288 / 393* 100vw);
                margin-left: auto;
                margin-right: auto;
                @media (min-width: 768px) {
                    max-width: 335px;
                    width: 100%;
                }
            }
        }
        a{
            text-decoration: none;
        }
    }
    .list > li + li{
        margin-top: calc(114 / 393* 100vw);
        @media (min-width: 768px) {
            margin-top: 168px;
        }
    }
    .list_img{
        @media (min-width: 768px) {
            max-width:1080px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 20px;
            width: 100%;
            display: flex;
            align-items: baseline;
            gap: 0 35px;
        }
        picture{
            display: block;
            @media (min-width: 768px) {
                width: calc(540 / 1040* 100%);
            }
        }
        picture+picture{
            margin: calc(-30 / 393* 100vw) auto 0;
            max-width:calc(360 / 393* 100vw) ;
            z-index: 1;
           
            @media (min-width: 768px) {
                width: calc(465 / 1040* 100%);
                margin-top: 0;
            }
        }
    }
    .reverse{
        @media (min-width: 768px) {
            flex-direction: row-reverse;
        }
    }
    .price{
        img{
            width: calc(151 / 393* 100vw);
            margin-right: calc(16 / 393* 100vw);
            margin-left: calc(8 / 393* 100vw);
            vertical-align: text-bottom;
            @media (min-width: 768px) {
                max-width: 225px;
                margin-left:0;
                margin-right: 26px;
            }
        }
    }
    .sku_contents{
        max-width:calc(324 / 393* 100vw) ;
        margin: calc(21 / 393* 100vw) auto 0;
        @media (min-width: 768px) {
            max-width: auto;
            margin: 34px auto 0;
        }
    }
    .sku{
        display: flex;
        flex-wrap: wrap;
        gap: calc(10 / 393* 100vw) calc(14 / 393* 100vw);
        @media (min-width: 768px) {
            gap: 26px 34px;
            justify-content: center;
        }
        figure{
            max-width:calc(155 / 393* 100vw) ;
            margin: 0;
            @media (min-width: 768px) {
                max-width: 233px;
            }
        }
       
        figcaption{
            
            @media (min-width: 768px) {
                font-size: 20px;
            }
        }
        figure{
            overflow: hidden;
            
        }

    }
    .submit{
        display: block;
        max-width: 100%;
    }
    .sku + p{
        margin-top: calc(16 / 393* 100vw);
        @media (min-width: 768px) {
            margin-top: 28px;
            text-align: center;
        }
    }
    .c-btn{
        margin-top: calc(16 / 393* 100vw);
        @media (min-width: 768px) {
            margin-top: 24px;
        }
        a{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(50 / 393* 100vw);
            background-color: #fff;
            font-size: calc(18 / 393* 100vw);
            color: #482F2B;
            border: 1px solid #482F2B;
            @media (min-width: 768px) {
                max-width: 300px;
                height: 50px;
                font-size: 24px;
                margin-left: auto;
                margin-right: auto;
            }
        }
        a:hover{
            transform: scale(1.05);
        }
    }
    .sale-btn{
        margin-top: calc(54 / 393* 100vw);
        padding-bottom:calc(114 / 393* 100vw) ;
        @media (min-width: 768px) {
            margin-top: 54px;
            padding-bottom: 114px;
        }
        a{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(50 / 393* 100vw);
            background-color: #BBA45E;
            font-size: calc(18 / 393* 100vw);
            color: #fff;
            border: 1px solid #BBA45E;
            @media (min-width: 768px) {
                max-width: 300px;
                height: 50px;
                font-size: 20px;
                margin-left: auto;
                margin-right: auto;
            }
        }
       
    }
}