@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');

#lp-sp-fsale{ margin: 0 auto; width: 800px; color: #50442F; font-family: "Zen Kaku Gothic Antique", sans-serif;}
#lp-sp-fsale *{ box-sizing: border-box;}
#lp-sp-fsale .pc{ display: block;}
#lp-sp-fsale .sp{ display: none;}
#lp-sp-fsale .anchor{ position: relative; z-index: -1;}
#lp-sp-fsale .anchor:before{ display: block; margin-top: -67px; width: 100%; height: 67px; content: ""; vertical-align: top;}
#lp-sp-fsale figure{ margin: 0; padding: 0;}
#lp-sp-fsale i{ font-style: normal;}

@media only screen and (max-width: 1560px) {
    #lp-sp-fsale .anchor:before{ margin-top: -134px; height: 134px;}
}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale{ margin: 0; width: 100%;}
    #lp-sp-fsale .pc{ display: none;}
    #lp-sp-fsale .sp{ display: block;}
    #lp-sp-fsale .anchor:before{ margin-top: -18.4vw; height: 18.4vw;}
}

#lp-sp-fsale .sec1{ margin: 0 calc(50% - 50vw); padding: 140px calc(50vw - 50%) 180px; background: #50442F; color: #D992B1;}
#lp-sp-fsale .sec1 p{ margin: 4em 0 0; letter-spacing: .08em; font-weight: 500; font-size: 20px; line-height: 2.25;}
#lp-sp-fsale .sec1 dl{ display: flex; margin: 90px 0 0; letter-spacing: .1em; font-weight: 700; font-size: 32px; align-items: center; justify-content: space-between;}
#lp-sp-fsale .sec1 dt{ letter-spacing: .2em; font-size: 31px;}
#lp-sp-fsale .sec1 dd{ display: flex; padding: .5em .4em .75em .6em; border: 1px solid; white-space: nowrap; align-items: baseline;}
#lp-sp-fsale .sec1 dd span{ font-size: 44px;}
#lp-sp-fsale .sec1 dd small{ margin: 0 0 0 -.5em; letter-spacing: 0; font-size: 26px;}
#lp-sp-fsale .sec1 h3{ margin: 150px 0 0; padding: 0 0 0 1em; letter-spacing: .15em; font-weight: 700; font-size: 32px;}
#lp-sp-fsale .sec1 .flex{ display: flex; margin: 30px 0 0; align-items: flex-end; justify-content: space-between;}
#lp-sp-fsale .sec1 .flex figure{ width: 414.65px;}
#lp-sp-fsale .sec1 .flex .detail{ width: 337px; font-weight: 500; font-size: 14px; line-height: 1.857142857;}
#lp-sp-fsale .sec1 .list-btn1{ display: flex; margin: 65px 0 0; justify-content: space-between;}
#lp-sp-fsale .sec1 .list-btn1 > li{ width: calc(50% - 17px);}
#lp-sp-fsale .sec1 .list-btn1 a{ display: flex; height: 64px; background: #fff; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16); color: #50442F; letter-spacing: .15em; font-weight: 700; font-size: 19px; justify-content: center; align-items: center;}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale .sec1{ margin: 0; padding: 16vw 10.66666667vw 26.66666667vw;}
    #lp-sp-fsale .sec1 p{ margin: 18.66666667vw 0 0; font-size: 4.266666667vw; line-height: 2.25;}
    #lp-sp-fsale .sec1 dl{ flex-direction: column; margin: 16vw 0 0; font-size: 4.266666667vw; align-items: center;}
    #lp-sp-fsale .sec1 dt{ font-size: 4.266666667vw;}
    #lp-sp-fsale .sec1 dd{ margin: 4vw 0 0; padding: .5em 0 .75em 0; width: 100%; letter-spacing: normal; justify-content: center;}
    #lp-sp-fsale .sec1 dd span{ font-size: 5.866666667vw;}
    #lp-sp-fsale .sec1 dd small{ font-size: 3.466666667vw;}
    #lp-sp-fsale .sec1 h3{ margin: 16vw 0 0; padding: 0; text-align: center; font-size: 4.266666667vw;}
    #lp-sp-fsale .sec1 .flex{ flex-direction: column; margin: 5.333333333vw 0 0; align-items: center; justify-content: flex-start;}
    #lp-sp-fsale .sec1 .flex figure{ width: 52.296vw;}
    #lp-sp-fsale .sec1 .flex .detail{ margin: 10.66666667vw 0 0; width: 100%; font-size: 3.2vw; line-height: 1.833333333;}
    #lp-sp-fsale .sec1 .list-btn1{ flex-direction: column; margin: 0; padding: 8vw 0 0;}
    #lp-sp-fsale .sec1 .list-btn1 > li{ margin: 8vw 0 0; width: 100%;}
    #lp-sp-fsale .sec1 .list-btn1 a{ height: 13.33333333vw; box-shadow: 0.8vw 0.8vw 1.6vw rgba(0, 0, 0, 0.16); font-size: 4.266666667vw;}
}

#lp-sp-fsale .sec2{ padding: 195px 0;}
#lp-sp-fsale .sec2 .list-howto{ display: flex; justify-content: space-between;}
#lp-sp-fsale .sec2 .list-howto > li{ padding: 15px 0 90px; width: 350px; border-top: 1px solid; border-bottom: 1px solid;}
#lp-sp-fsale .sec2 .list-howto h3{ text-align: center; letter-spacing: .15em; font-weight: 700; font-size: 18px;}
#lp-sp-fsale .sec2 .list-howto .tl{ margin: 80px 0 0; text-align: center;}
#lp-sp-fsale .sec2 .list-howto .tl img{ margin: 0 auto; width: auto; height: 103px;}
#lp-sp-fsale .sec2 .list-howto > li > figure{ margin: 30px 0 0; text-align: center;}
#lp-sp-fsale .sec2 .list-howto > li > figure img{ margin: 0 auto; width: 243.11px;}
#lp-sp-fsale .sec2 .list-howto > li > p{ margin: 60px 0 0; text-align: center; white-space: nowrap; letter-spacing: .15em; font-weight: 700; font-size: 18px; line-height: 2.055555556;}
#lp-sp-fsale .sec2 .list-howto > li > figure + p{ margin: 30px 0 0;}
#lp-sp-fsale .sec2 .list-howto > li > p span{ display: inline; border-bottom: 1px solid;}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale .sec2{ padding: 0 2.666666667vw;}
    #lp-sp-fsale .sec2 .list-howto{ flex-direction: column;}
    #lp-sp-fsale .sec2 .list-howto > li{ padding: 2.666666667vw 0 26.66666667vw; width: 100%; border-top: 0.266666667vw solid; border-bottom: none;}
    #lp-sp-fsale .sec2 .list-howto > li:first-child{ border: none;}
    #lp-sp-fsale .sec2 .list-howto h3{ text-align: left; font-size: 3.733333333vw;}
    #lp-sp-fsale .sec2 .list-howto .tl{ margin: 18.66666667vw 0 0;}
    #lp-sp-fsale .sec2 .list-howto .tl img{ height: 21.928vw;}
    #lp-sp-fsale .sec2 .list-howto > li > figure{ margin: 8vw 0 0;}
    #lp-sp-fsale .sec2 .list-howto > li > figure img{ margin: 0 auto; width: 52.56266667vw;}
    #lp-sp-fsale .sec2 .list-howto > li > p{ margin: 8vw 0 0; font-size: 4.266666667vw; line-height: 2.0625;}
    #lp-sp-fsale .sec2 .list-howto > li > p span{ border-bottom: 0.266666667vw solid;}
}

#lp-sp-fsale .sec2 .list-howto .box1{ position: relative; margin: 55px 0 0; padding: 40px; border: 1px solid;}
#lp-sp-fsale .sec2 .list-howto .box1:after{ position: absolute; top: -20px; right: -20px; width: 45px; height: 44px; background: url("/static/mallDefault/contents/images/sp/2610familysale/ico2-1.png") no-repeat center / contain; content: "";}
#lp-sp-fsale .sec2 .list-howto .box1 p{ letter-spacing: .15em; font-weight: 700; font-size: 15px; line-height: 2;}
#lp-sp-fsale .sec2 .list-howto .box1 p span{ display: inline; border-bottom: 1px solid;}
#lp-sp-fsale .sec2 .list-howto .box1 ul{ padding: 30px 0 0;}
#lp-sp-fsale .sec2 .list-howto .box1 ul > li{ display: flex; margin: 16px 0 0; align-items: center; justify-content: space-between;}
#lp-sp-fsale .sec2 .list-howto .box1 ul div{ color: #D992B1; font-size: 12px; font-family: "Futo Go B101";}
#lp-sp-fsale .sec2 .list-howto .box1 ul figure{ width: 211.72px;}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale .sec2 .list-howto .box1{ margin: 18.66666667vw auto 0; padding: 9.333333333vw; width: 78.66666667vw; border: 0.266666667vw solid;}
    #lp-sp-fsale .sec2 .list-howto .box1:after{ top: -4.533333333vw; right: -4.533333333vw; width: 10.13333333vw; height: 10.13333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box1 p{ font-size: 3.733333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box1 ul{ padding: 5.333333333vw 0 0;}
    #lp-sp-fsale .sec2 .list-howto .box1 ul > li{ margin: 2.666666667vw 0 0;}
    #lp-sp-fsale .sec2 .list-howto .box1 ul div{ font-size: 2.933333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box1 ul figure{ width: 47.83733333vw;}
}

#lp-sp-fsale .sec2 .list-howto .box2{ position: relative; margin: 35px 0 0; border: 1px solid;}
#lp-sp-fsale .sec2 .list-howto .box2:after{ position: absolute; bottom: -13px; left: 50%; border-width: 13px 10px 0 10px; border-style: solid; border-color: #50442F transparent transparent transparent; content: ""; transform: translate(-50%,0);}
#lp-sp-fsale .sec2 .list-howto > li > .box2:last-child:after{ content: none;}
#lp-sp-fsale .sec2 .list-howto .box2 > dt{ display: flex; height: 59.32px; background: #50442F; color: #fff; letter-spacing: .1em; font-weight: 700; font-size: 18px; justify-content: center; align-items: center;}
#lp-sp-fsale .sec2 .list-howto .box2 > dt i{ margin: 0 10px 0 0; width: 25.66px;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd{ padding: 50px 40px;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd .num3{ color: #D992B1;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd dl{ position: relative; display: flex; margin: 30px 0 0; padding: 0 0 20px; justify-content: space-between; align-items: center;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd dl:after{ position: absolute; bottom: 0; left: 7px; border-width: 7px 5.5px 0 5.5px; border-style: solid; border-color: #50442F transparent transparent transparent; content: "";}
#lp-sp-fsale .sec2 .list-howto .box2 > dd > dl:first-child{ margin: 0;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd > dl:last-child:after{ content: none;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd dl dt{ letter-spacing: .15em; font-weight: 600; font-size: 45px; font-family: din-2014, sans-serif;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd dl dd{ width: 217.12px; letter-spacing: .1em; font-weight: 700; font-size: 18px;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd dl dd .cart{ display: flex; align-items: center;}
#lp-sp-fsale .sec2 .list-howto .box2 > dd dl dd .cart i{ margin: 0 10px 0 0; width: 25.66px;}
#lp-sp-fsale .sec2 .list-howto .box2 .exp{ padding: 0 0 0 50px;}
#lp-sp-fsale .sec2 .list-howto .box2 .exp .line1{ letter-spacing: .15em; font-weight: 700; font-size: 15px;}
#lp-sp-fsale .sec2 .list-howto .box2 .exp .line2{ display: flex; margin: 20px 0 0; height: 45.08px; border: 1px solid; background: #F4D7E4; box-shadow: inset 3px 3px 6px 0px rgba(0, 0, 0, 0.16); letter-spacing: .1em; font-weight: 700; font-size: 18px; align-items: center; justify-content: center;}
#lp-sp-fsale .sec2 .list-howto .box2 .exp .line3{ margin: 15px 0 0; font-weight: 500; font-size: 12px; line-height: 1.833333333;}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale .sec2 .list-howto .box2{ margin: 13.33333333vw auto 0; width: 78.66666667vw; border: 0.266666667vw solid;}
    #lp-sp-fsale .sec2 .list-howto .box2:after{ bottom: -2.933333333vw; border-width: 2.933333333vw 2.266666667vw 0 2.266666667vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dt{ height: 13.33333333vw; font-size: 4.266666667vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dt i{ margin: 0 2.666666667vw 0 0; width: 5.765333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dd{ padding: 13.33333333vw 9.333333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dd dl{ margin: 6.666666667vw 0 0; padding: 0 0 5.333333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dd dl:after{ left: 1.333333333vw; border-width: 1.6vw 1.2vw 0 1.2vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dd dl dt{ font-size: 10.66666667vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dd dl dd{ width: 48.8vw; font-size: 4.266666667vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 > dd dl dd .cart i{ margin: 0 2.666666667vw 0 0; width: 5.765333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 .exp{ padding: 0 0 0 11.2vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 .exp .line1{ font-size: 3.733333333vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 .exp .line2{ margin: 2.666666667vw 0 0; height: 10.13333333vw; border: 0.266666667vw solid; box-shadow: inset 0.8vw 0.8vw 1.6vw 0px rgba(0, 0, 0, 0.16); font-size: 4.266666667vw;}
    #lp-sp-fsale .sec2 .list-howto .box2 .exp .line3{ margin: 2.666666667vw 0 0; font-size: 3.2vw;}
}

#lp-sp-fsale .sec3{ margin: 0 calc(50% - 50vw); padding: 190px calc(50vw - 50%) 230px; background: rgba(117,123,111,.1);}
#lp-sp-fsale .sec3 .btn2 a{ display: flex; margin: 0 auto; width: 383px; height: 64px; background: #fff; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16); letter-spacing: .15em; font-weight: 700; font-size: 19px; justify-content: center; align-items: center;}
#lp-sp-fsale .sec3 h3{ display: flex; flex-direction: column; margin: 80px 0 0; letter-spacing: .1em; font-weight: 700; font-size: 26px; align-items: center;}
#lp-sp-fsale .sec3 h3 i{ margin: 0 0 25px; width: 57.62px;}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale .sec3{ margin: 0; padding: 26.66666667vw 0 18.66666667vw;}
    #lp-sp-fsale .sec3 .btn2 a{ width: 78.66666667vw; height: 13.33333333vw; box-shadow: 0.8vw 0.8vw 1.6vw rgba(0, 0, 0, 0.16); font-size: 4.266666667vw;}
    #lp-sp-fsale .sec3 h3{ margin: 16vw 0 0; font-size: 4.266666667vw;}
    #lp-sp-fsale .sec3 h3 i{ margin: 0 0 4.8vw; width: 9.44vw;}
}

#lp-sp-fsale .sec3 .dl-shop{ margin: 65px auto 0; width: 800px; border-bottom: 1px solid; text-align: left; letter-spacing: .15em; font-weight: 400; font-size: 19px;}
#lp-sp-fsale .sec3 .dl-shop dt{ position: relative; padding: 15px 20px; border-top: 1px solid; cursor: pointer;}
#lp-sp-fsale .sec3 .dl-shop dt:after{ position: absolute; top: 50%; right: 20px; width: 36.26px; height: 6.27px; background: url("/static/mallDefault/contents/images/sp/2610familysale/arrow.png") no-repeat center / contain; content: ""; transition: transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate(0,-50%);}
#lp-sp-fsale .sec3 .dl-shop dt.active:after{ transform: translate(0,-50%) rotate(90deg);}
#lp-sp-fsale .sec3 .dl-shop dd{ display: none; padding: 0 20px 15px; font-size: 14px;}
#lp-sp-fsale .sec3 .dl-shop ul + h4{ margin: 30px 0 0;}
#lp-sp-fsale .sec3 .dl-shop ul > li{ padding: 10px 0 0;}
#lp-sp-fsale .sec3 .dl-shop ul > li:before{ padding: 0 10px 0 0; content: "▶︎"; font-size: 1rem;}
#lp-sp-fsale .sec3 .dl-shop em{ display: inline-block; margin: 0 0 0 1em; color: #f00;}
#lp-sp-fsale .sec3 .cap{ margin: 70px 0 0; text-align: center; font-weight: 500; font-size: 14px; line-height: 1.785714286;}
#lp-sp-fsale .sec3 .cap + .cap{ margin: 35px 0 0;}

@media only screen and (max-width: 736px) {
    #lp-sp-fsale .sec3 .dl-shop{ margin: 14.66666667vw auto 0; width: 86.66666667vw; border-bottom: 0.266666667vw solid; font-size: 3.733333333vw;}
    #lp-sp-fsale .sec3 .dl-shop dt{ padding: 4vw 0; border-top: 0.266666667vw solid;}
    #lp-sp-fsale .sec3 .dl-shop dt:after{ right: 0; width: 7.066666667vw; height: 1.221333333vw;}
    #lp-sp-fsale .sec3 .dl-shop dd{ padding: 0 0 4vw; letter-spacing: normal; font-size: 3.2vw;}
    #lp-sp-fsale .sec3 .dl-shop ul + h4{ margin: 4vw 0 0;}
    #lp-sp-fsale .sec3 .dl-shop ul > li{ padding: 2.666666667vw 0 0;}
    #lp-sp-fsale .sec3 .dl-shop ul > li:before{ padding: 0 2.666666667vw 0 0; font-size: 2.133333333vw;}
    #lp-sp-fsale .sec3 .cap{ margin: 13.33333333vw 0 0; padding: 0 10.66666667vw; text-align: left; font-size: 3.2vw; line-height: 1.833333333;}
    #lp-sp-fsale .sec3 .cap + .cap{ margin: 8vw 0 0;}
}