@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

#lp-sp-newyear{ margin: 0 auto; padding: 0 0 150px; width: 900px; color: #000;}
#lp-sp-newyear *{ box-sizing: border-box;}
#lp-sp-newyear .pc{ display: block;}
#lp-sp-newyear .sp{ display: none;}
#lp-sp-newyear .anchor{ position: relative; z-index: -1;}
#lp-sp-newyear .anchor:before{ display: block; margin-top: -67px; width: 100%; height: 67px; content: ""; vertical-align: top;}
#lp-sp-newyear figure{ margin: 0; padding: 0;}

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

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

#lp-sp-newyear h2{ margin: 0 calc(50% - 50vw);}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear h2{ margin: 0;}
}

#lp-sp-newyear .sec1{ padding: 200px 0;}
#lp-sp-newyear .sec1 p{ text-align: center; white-space: nowrap; letter-spacing: .05em; font-size: 22px; font-family: "Yu Gothic Pr6N M"; line-height: 2.272727273;}
#lp-sp-newyear .sec1 nav{ margin: 95px 0 0;}
#lp-sp-newyear .sec1 nav ul{ display: flex; justify-content: center; align-items: baseline;}
#lp-sp-newyear .sec1 nav ul > li{ padding: 0 30px;}
#lp-sp-newyear .sec1 nav a{ display: block; width: 230px;}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear .sec1{ padding: 21.33333333vw 11.33333333vw 24vw;}
    #lp-sp-newyear .sec1 p{ text-align: left; font-size: 4.266666667vw; line-height: 2;}
    #lp-sp-newyear .sec1 nav{ margin: 8vw 0 0;}
    #lp-sp-newyear .sec1 nav ul{ justify-content: space-between;}
    #lp-sp-newyear .sec1 nav ul > li{ padding: 0;}
    #lp-sp-newyear .sec1 nav a{ width: 37.33333333vw;}
}

#lp-sp-newyear .sec2{ padding: 0 0 200px;}
#lp-sp-newyear .sec2 .slide1{ opacity: 0; transition: opacity .3s linear;}
#lp-sp-newyear .sec2 .slide1.slick-initialized{ opacity: 1;}
#lp-sp-newyear .sec2 .slide2{ opacity: 0; transition: opacity .3s linear;}
#lp-sp-newyear .sec2 .slide2.slick-initialized{ opacity: 1;}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear .sec2{ padding: 0;}
}

#lp-sp-newyear .sec2 .set{ padding: 0 0 100px;}
#lp-sp-newyear .sec2 .set h4{ display: flex; flex-direction: column; padding: 150px 0 0; letter-spacing: .05em; font-size: 32px; font-family: "Yu Gothic Pr6N B"; align-items: center;}
#lp-sp-newyear .sec2 .set h4 small{ margin: 1em 0 .5em; font-size: 22px;}
#lp-sp-newyear .sec2 .set h4 i{ width: 100%;}
#lp-sp-newyear .sec2 .set p{ margin: 2em 0 0; text-align: center; letter-spacing: .1em; font-size: 18px; font-family: "Yu Gothic Pr6N M"; line-height: 2.111111111;}
#lp-sp-newyear .sec2 .slide-type1{ margin: 80px 0 0; padding: 0 80px;}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear .sec2 .set{ padding: 0 0 21.33333333vw;}
    #lp-sp-newyear .sec2 .set h4{ margin: 0 auto; padding: 21.33333333vw 0 0; width: 80vw; white-space: nowrap; font-size: 6.4vw;}
    #lp-sp-newyear .sec2 .set h4 small{ margin: 1em 0 .5em; font-size: 4.266666667vw;}
    #lp-sp-newyear .sec2 .set h4 i{ width: 100%;}
    #lp-sp-newyear .sec2 .set p{ margin: 2em auto 0; width: 77.33333333vw; text-align: left; letter-spacing: .05em; font-size: 4vw; line-height: 1.8;}
    #lp-sp-newyear .sec2 .slide-type1{ margin: 10.66666667vw 0 0; padding: 0;}
    #lp-sp-newyear .sec2 .slide-type1 .slick-slide{ padding: 0 4vw; width: 85.33333333vw;}
}

#lp-sp-newyear .sec2 .box{ position: relative; padding: 0 100px 100px; background: #BA4A41; color: #FFFFFF;}
#lp-sp-newyear .sec2 .box:before{ position: absolute; top: 30px; left: 36px; width: 1px; height: 16px; background: #fff; content: "";}
#lp-sp-newyear .sec2 .box:after{ position: absolute; top: 58px; left: 25px; color: #fff; content: "NEW YEAR’S TABLEWARE"; white-space: nowrap; letter-spacing: .25em; font-size: 20px; font-family: "Forum", serif; text-orientation: sideways; writing-mode: vertical-rl;}
#lp-sp-newyear .sec2 .box-s:before,
#lp-sp-newyear .sec2 .box-s:after{ content: none;}
#lp-sp-newyear .sec2s .box:after{ content: "NEW YEAR’S DECORATIONS";}
#lp-sp-newyear .sec2 .slide-type2{ padding: 100px 0 50px;}
#lp-sp-newyear .sec2 .box > p{ text-align: justify; letter-spacing: .1em; font-size: 18px; font-family: "Yu Gothic Pr6N M"; line-height: 2.111111111;}
#lp-sp-newyear .sec2 .box > p small{ font-size: 14px;}
#lp-sp-newyear .sec2 .box > h5{ margin: 100px 0 0; padding: 100px 0 0; border-top: 1px solid; text-align: center; letter-spacing: .2em; font-weight: 400; font-size: 30px; font-family: "Forum", serif;}
#lp-sp-newyear .sec2 .box > h5:first-child{ margin: 0; border: none;}
#lp-sp-newyear .sec2 .item-wrap{ margin: 50px 0 0;}
#lp-sp-newyear .sec2 .btn1{ display: flex; margin: 60px 0 0; justify-content: center;}
#lp-sp-newyear .sec2 .btn1 a{ display: flex; width: 260px; height: 50px; border-radius: 25px; background: #fff; color: #ba4a41; letter-spacing: .2em; font-size: 18px; font-family: "Yu Gothic Pr6N B"; justify-content: center; align-items: center;}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear .sec2 .box{ padding: 2.666666667vw 11.33333333vw 16vw;}
    #lp-sp-newyear .sec2 .box:before{ top: 5.333333333vw; left: 4vw; width: 0.266666667vw; height: 2.666666667vw;}
    #lp-sp-newyear .sec2 .box:after{ top: 10.13333333vw; left: 2.666666667vw; font-size: 3.733333333vw;}
    #lp-sp-newyear .sec2 .slide-type2{ padding: 13.33333333vw 0 8vw;}
    #lp-sp-newyear .sec2 .box > p{ letter-spacing: .05em; font-size: 3.733333333vw; line-height: 1.642857143;}
    #lp-sp-newyear .sec2 .box > p small{ font-size: 2.933333333vw;}
    #lp-sp-newyear .sec2 .box > h5{ position: relative; margin: 16vw 0 0; padding: 16vw 0 0; border-top: none; font-size: 5.866666667vw;}
    #lp-sp-newyear .sec2 .box > h5:before{ position: absolute; top: 0; left: 50%; width: 90.66666667vw; height: 0.266666667vw; background: #fff; content: ""; transform: translate(-50%,0);}
    #lp-sp-newyear .sec2 .box > h5:first-child{ margin: 0; padding: 16vw 0 0;}
    #lp-sp-newyear .sec2 .box > h5:first-child:before{ content: none;}
    #lp-sp-newyear .sec2 .item-wrap{ margin: 12vw calc(50% - 50vw) 0;}
    #lp-sp-newyear .sec2 .btn1{ margin: 13.33333333vw 0 0;}
    #lp-sp-newyear .sec2 .btn1 a{ width: 64vw; height: 13.33333333vw; border-radius: 6.666666667vw; font-size: 4.8vw;}
}

#lp-sp-newyear .sec2s{ padding: 0;}
#lp-sp-newyear .sec2s .set p{ margin: 100px 0 0;}
#lp-sp-newyear .sec2s .box{ background: #405D58;}
#lp-sp-newyear .sec2s .btn1 a{ color: #405d58;}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear .sec2s{ padding: 0;}
    #lp-sp-newyear .sec2s .set p{ margin: 16vw auto 0;}
}

#lp-sp-newyear .btn2{ display: flex; margin: 120px 0 0; justify-content: center;}
#lp-sp-newyear .btn2 a{ width: 400px; filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));}

@media only screen and (max-width: 736px) {
    #lp-sp-newyear .btn2{ margin: 26.66666667vw 0 0;}
    #lp-sp-newyear .btn2 a{ width: 82.66666667vw; filter: drop-shadow(0.8vw 0.8vw 2.666666667vw rgba(0, 0, 0, 0.15));}
}

.slick-prev,
.slick-next{ z-index: 10; width: 12px; height: 30px;}
.slick-prev:before,
.slick-next:before{ display: block; width: 100%; height: 100%; background: url("/static/mallDefault/contents/images/sp/newyear2025/arrow1.png") no-repeat center / contain; content: ""; opacity: 1;}
.slick-prev{ left: -44px;}
.slick-next{ right: -44px; transform: scale(-1,1) translate(0,-50%);}

@media only screen and (max-width: 736px) {
    .slick-prev,
    .slick-next{ width: 2.133333333vw; height: 5.333333333vw;}
    .slick-prev{ left: 6.4vw;}
    .slick-next{ right: 6.4vw;}
}

#lp-sp-newyear .sec2s .slick-prev:before,
#lp-sp-newyear .sec2s .slick-next:before{ background: url("/static/mallDefault/contents/images/sp/newyear2025/arrow2.png") no-repeat center / contain;}

@media only screen and (max-width: 736px) {
}

.slick-dotted.slick-slider{ margin-bottom: 0;}
.slick-dots{ bottom: -28px; text-align: right;}
.slick-dots li{ margin: 0 0 0 14px; width: 8px; height: 8px;}
.slick-dots li button{ padding: 0; width: 100%; height: 100%;}
.slick-dots li button:before{ display: block; width: 100%; height: 100%; border-radius: 100%; background: #CAB268; content: ''; opacity: 1;}
.slick-dots li.slick-active button:before{ background: #fff; opacity: 1;}

@media only screen and (max-width: 736px) {
    .slick-dots{ bottom: -4.8vw;}
    .slick-dots li{ margin: 0 0 0 2.666666667vw; width: 1.6vw; height: 1.6vw;}
}