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

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

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

#happy-bag-iittala-arabia h2{ margin: 0 auto;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia h2{ margin: 0;}
}

#happy-bag-iittala-arabia .sec1{ position: relative; margin: 0 auto; padding: 100px auto 150px; background: #fff;}
#happy-bag-iittala-arabia .sec1 .lead{ text-align: center; letter-spacing: .1em; font-size: 18px; font-family: "Yu Gothic Pr6N M"; line-height: 2.666666667; margin: 80px auto 0px;}
#happy-bag-iittala-arabia .sec1 .dl1{ margin: 100px 0 0; padding: 80px 0 100px; border-top: 1px solid #414141; border-bottom: 1px solid #414141; text-align: center;}
#happy-bag-iittala-arabia .sec1 .dl1 dt{ letter-spacing: .35em; font-weight: 400; font-size: 24px; font-family: "Kulim Park", sans-serif;}
#happy-bag-iittala-arabia .sec1 .dl1 dd{ padding: 50px 0 0;}
#happy-bag-iittala-arabia .sec1 .dl1 p{ letter-spacing: .1em; font-size: 17px; line-height: 2.235294118;}
#happy-bag-iittala-arabia .sec1 .dl1 nav{ padding: 10px 0 0; text-align: center;}
#happy-bag-iittala-arabia .sec1 .dl1 nav ul{ display: flex; flex-wrap: wrap; justify-content: center;}
#happy-bag-iittala-arabia .sec1 .dl1 nav ul > li{ margin: 50px 0 0; padding: 0 20px;}
#happy-bag-iittala-arabia .sec1 .dl1 nav figure{ width: 240px;}
#happy-bag-iittala-arabia .sec1 .dl1 nav figcaption{ margin: 1em 0 0; letter-spacing: .35em; font-weight: 400; font-size: 18px; font-family: "Kulim Park", sans-serif;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .sec1{ margin: 0; padding: 13.33333333vw 10.13333333vw 16.333333vw;}
    #happy-bag-iittala-arabia .sec1 .lead{ text-align: left; letter-spacing: .05em; font-size: 4vw; line-height: 2.2; margin: 0px auto;} 
    #happy-bag-iittala-arabia .sec1 .lead p + p{ margin: 2em 0 0;}
    #happy-bag-iittala-arabia .sec1 .dl1{ margin: 21.33333333vw 0 0; padding: 13.33333333vw 0; border-top: 0.266666667vw solid #414141; border-bottom: 0.266666667vw solid #414141; text-align: center;}
    #happy-bag-iittala-arabia .sec1 .dl1 dt{ font-size: 4.8vw; line-height: 1.666666667;}
    #happy-bag-iittala-arabia .sec1 .dl1 dd{ padding: 10.66666667vw 0 0;}
    #happy-bag-iittala-arabia .sec1 .dl1 p{ letter-spacing: .01em; font-size: 3.733333333vw; line-height: 2.142857143;}
    #happy-bag-iittala-arabia .sec1 .dl1 nav{ padding: 0;}
    #happy-bag-iittala-arabia .sec1 .dl1 nav ul{ display: flex; flex-wrap: wrap; justify-content: flex-start;}
    #happy-bag-iittala-arabia .sec1 .dl1 nav ul > li{ margin: 10.66666667vw 0 0; padding: 0 4vw; width: 50%;}
    #happy-bag-iittala-arabia .sec1 .dl1 nav figure{ width: 100%;}
    #happy-bag-iittala-arabia .sec1 .dl1 nav figcaption{ letter-spacing: .3em; font-size: 3.733333333vw; line-height: 1.428571429;}
}

#happy-bag-iittala-arabia .sec2{ margin: 100px auto; padding: 0 auto 200px; background: #fff;}
#happy-bag-iittala-arabia .sec2 h3 img{ width: 650px; margin: 0 auto;}

#happy-bag-iittala-arabia .sec2 .dl2{ padding: 100px 50px 0;}
#happy-bag-iittala-arabia .sec2 .dl2 dt{ letter-spacing: .2em; font-size: 22px; font-family: "Yu Gothic Pr6N D";}
#happy-bag-iittala-arabia .sec2 .dl2 dd{ margin: 2em 0 0; letter-spacing: .1em; font-size: 17px; font-family: "Yu Gothic Pr6N M"; line-height: 2.235294118;}

#happy-bag-iittala-arabia .sec2 .dl4{ padding: 0px 50px 0;}
#happy-bag-iittala-arabia .sec2 .dl4 dt{ letter-spacing: .2em; font-size: 22px; font-family: "Yu Gothic Pr6N D"; text-align: center;}
#happy-bag-iittala-arabia .sec2 .dl4 dd{ margin: 1em 0 0; letter-spacing: .1em; font-size: 17px; font-family: "Yu Gothic Pr6N M"; line-height: 2.235294118; text-align: center;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .sec2{ margin: 0; padding: 0 10.13333333vw 32vw;}
    #happy-bag-iittala-arabia .sec2 h3{ margin: 0 auto;}
    #happy-bag-iittala-arabia .sec2 h3 img{ width: 100%;}
    #happy-bag-iittala-arabia .sec2 .dl2{ padding: 13.66666667vw 0 0;}
    #happy-bag-iittala-arabia .sec2 .dl2 dt{ font-size: 4.8vw; line-height: 1.666666667;}
    #happy-bag-iittala-arabia .sec2 .dl2 dd{ margin: 1em 0 0; letter-spacing: .05em; font-size: 3.733333333vw; line-height: 2.142857143;}

    #happy-bag-iittala-arabia .sec2 .dl4{ padding: 0vw 0 0;}
    #happy-bag-iittala-arabia .sec2 .dl4 dt{ font-size: 4.8vw; line-height: 1.666666667; text-align: left;}
    #happy-bag-iittala-arabia .sec2 .dl4 dd{ margin: 1em 0 0; letter-spacing: .05em; font-size: 3.733333333vw; line-height: 1.8; text-align: left;}
}

#happy-bag-iittala-arabia .sec2 .detail{ padding: 0 50px;}
#happy-bag-iittala-arabia .sec2 .detail figure{ position: relative; margin: 60px 0 0;}
#happy-bag-iittala-arabia .sec2 figcaption{ letter-spacing: .1em; font-size: 16px; font-family: "Yu Gothic Pr6N M"; line-height: 2.125;}
#happy-bag-iittala-arabia .sec2 .flx{ display: flex; justify-content: space-between; align-items: center;}
#happy-bag-iittala-arabia .sec2 .flx-reverse{ flex-direction: row-reverse;}
#happy-bag-iittala-arabia .sec2 .flx .slide-wrap,
#happy-bag-iittala-arabia .sec2 .flx .video-wrap{ width: 400px;}
#happy-bag-iittala-arabia .sec2 .flx .slide{ opacity: 0; transition: opacity 1s ease;}
#happy-bag-iittala-arabia .sec2 .flx .slide.slick-initialized{ opacity: 1;}
#happy-bag-iittala-arabia .sec2 .flx figcaption{ width: 350px;}
#happy-bag-iittala-arabia .sec2 .img1-1 figcaption,
#happy-bag-iittala-arabia .sec2 .img3-1 figcaption,
#happy-bag-iittala-arabia .sec2 .img3-2 figcaption,
#happy-bag-iittala-arabia .sec2 .img4-1 figcaption{ margin: 1.25em 0 0;}
#happy-bag-iittala-arabia .sec2 .img2-1 figcaption{ position: absolute; bottom: -2.125em; left: 20px; width: 365px;}
#happy-bag-iittala-arabia .sec2 .img5-1 figcaption{ position: absolute; top: 265px; right: 20px; width: 310px;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .sec2 .detail{ padding: 0;}
    #happy-bag-iittala-arabia .sec2 .detail figure{ margin: 6.33333333vw -3.466666667vw 0; width: auto;}
    #happy-bag-iittala-arabia .sec2 figcaption{ padding: 1em 3.466666667vw 0; letter-spacing: .05em; font-size: 3.466666667vw; line-height: 1.769230769;}
    #happy-bag-iittala-arabia .sec2 .flx{flex-direction: column;  margin: 13.33333333vw 0 0; justify-content: flex-start; align-items: flex-start;}
    #happy-bag-iittala-arabia .sec2 .flx-reverse{ flex-direction: column;}
    #happy-bag-iittala-arabia .sec2 .flx .slide-wrap,
    #happy-bag-iittala-arabia .sec2 .flx .video-wrap{ padding: 0 3.466666667vw; width: 100%;}
    #happy-bag-iittala-arabia .sec2 .flx .slide-wrap + figcaption{ padding: 6.13333333vw 3.466666667vw 6vw; width: auto;}
    #happy-bag-iittala-arabia .sec2 .flx .video-wrap + figcaption{ padding: 1.25em 3.466666667vw 0; width: auto;}
    #happy-bag-iittala-arabia .sec2 .img1-1 figcaption,
    #happy-bag-iittala-arabia .sec2 .img3-1 figcaption,
    #happy-bag-iittala-arabia .sec2 .img3-2 figcaption,
    #happy-bag-iittala-arabia .sec2 .img4-1 figcaption{ margin: 0;}
    #happy-bag-iittala-arabia .sec2 .detail .img2-1,
    #happy-bag-iittala-arabia .sec2 .detail .img5-1{ margin: 13.33333333vw calc(50% - 50vw) 0;}
    #happy-bag-iittala-arabia .sec2 .img2-1 figcaption{ position: relative; bottom: auto; left: auto; padding: 1em 10.13333333vw 0; width: 100%;}
    #happy-bag-iittala-arabia .sec2 .img5-1 figcaption{ position: relative; top: auto; right: auto; padding: 1em 10.13333333vw 0; width: 100%;}
    #happy-bag-iittala-arabia .sec2 .detail .img3-1,
    #happy-bag-iittala-arabia .sec2 .detail .img3-2{ margin: 13.33333333vw calc(50% - 50vw) 0; width: auto;}
    #happy-bag-iittala-arabia .sec2 .detail .img3-1{ padding: 0 0 0 10.13333333vw;}
    #happy-bag-iittala-arabia .sec2 .detail .img3-2{ padding: 0 10.13333333vw 0 0;}
    #happy-bag-iittala-arabia .sec2 .scroll{ overflow-x: scroll; -webkit-overflow-scrolling: touch;}
    #happy-bag-iittala-arabia .sec2 .scroll ul{ display: flex; width: 280.5333333vw;}
    #happy-bag-iittala-arabia .sec2 .scroll ul > li{ margin: 0 0 0 1.066666667vw; width: 69.33333333vw;}
    #happy-bag-iittala-arabia .sec2 .scroll ul > li:first-child{ margin: 0;}
    #happy-bag-iittala-arabia .sec2 .img3-1 figcaption{ padding: 1em 10.13333333vw 0 0;}
    #happy-bag-iittala-arabia .sec2 .img3-2 figcaption{ padding: 1em 0 0 10.13333333vw;}
}

#happy-bag-iittala-arabia .sec2 .dl3{ position: sticky; top: -50%; margin: 150px 0 0;}
#happy-bag-iittala-arabia .sec2 .dl3 dt{ text-align: center; letter-spacing: .20em; font-weight: 400; font-size: 24px; font-family: "Kulim Park", sans-serif;}
#happy-bag-iittala-arabia .sec2 .dl3 dd{ padding: 20px 0 0;}
#happy-bag-iittala-arabia .sec2 .dl3 note{ padding: 20px 0 0;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .sec2 .dl3{ margin: 18.66666667vw calc(50% - 50vw) 0;}
    #happy-bag-iittala-arabia .sec2 .dl3 dt{ font-size: 5.333333333vw; line-height: 1.5; }
    #happy-bag-iittala-arabia .sec2 .dl3 dd{ padding: 0;}

}

#happy-bag-iittala-arabia .sec3{ position: relative; margin: 0 calc(50% - 50vw); padding: 150px calc(50vw - 50% + 50px); background: #FAF3E2;}
#happy-bag-iittala-arabia .sec3 h3{ display: flex; flex-direction: column; align-items: center;}
#happy-bag-iittala-arabia .sec3 h3 .line2{ margin: 70px 0 0; width: 254.2px;}
#happy-bag-iittala-arabia .sec3 h3 .line3{ margin: 50px 0 0; letter-spacing: .08em; font-size: 54px; font-family: "Yu Gothic Pr6N D";}
#happy-bag-iittala-arabia .sec3 h3 .line4{ margin: 40px 0 0; width: 463.77px;}
#happy-bag-iittala-arabia .sec3 .dl4{ margin: 70px 0 0; padding: 80px 0; border-top: 1px solid #414141; border-bottom: 1px solid #414141; font-family: "Yu Gothic Pr6N M";}
#happy-bag-iittala-arabia .sec3 .dl4 dt{ display: flex; flex-direction: column; color: #414141; letter-spacing: .1em; font-size: 28px; align-items: center;}
#happy-bag-iittala-arabia .sec3 .dl4 dt small{ font-size: 22px;}
#happy-bag-iittala-arabia .sec3 .dl4 dt span{ margin: .75em 0 0; font-size: 44px;}
#happy-bag-iittala-arabia .sec3 .dl4 dt em{ letter-spacing: .2em;}
#happy-bag-iittala-arabia .sec3 .dl4 dd{ padding: 50px 0 0;}
#happy-bag-iittala-arabia .sec3 .dl4 dd figure{ display: flex; padding: 0 50px; justify-content: space-between; align-items: center;}
#happy-bag-iittala-arabia .sec3 .dl4 dd figure img{ width: 300px;}
#happy-bag-iittala-arabia .sec3 .dl4 dd figure figcaption{ width: 50%; white-space: nowrap; letter-spacing: .1em; font-size: 16px; line-height: 2.125;}
#happy-bag-iittala-arabia .sec3 .btn1{ margin: 80px 0 0;}
#happy-bag-iittala-arabia .sec3 .btn1 a{ position: relative; display: flex; margin: 0 auto; padding: 0 45px; width: 380px; height: 50px; border: 1px solid #414141; border-radius: 25px; letter-spacing: .1em; font-size: 17px; font-family: "Yu Gothic Pr6N D"; align-items: center;}
#happy-bag-iittala-arabia .sec3 .btn1 a:after{ position: absolute; top: 50%; right: 50px; width: 7.5px; height: 12.5px; background: url("/static/mallDefault/contents/images/sp/hibito-daily/arrow2.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}
#happy-bag-iittala-arabia .sec3 .btn1 a span{ margin: 0 1em 0 0; letter-spacing: .5em;}
#happy-bag-iittala-arabia .sec3 .attention{ margin: 50px 0px 0px;  text-align: center;}
#happy-bag-iittala-arabia .sec3 .attention span{ font-size: 12px; font-family: "Yu Gothic Pr6N M"; line-height: 2.235294118;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .sec3{ margin: 0; padding: 1.333333333vw 10.13333333vw 26.66666667vw;}
    #happy-bag-iittala-arabia .sec3 h3 .line1{ margin: 0 calc(50% - 50vw); padding: 0 1.333333333vw; width: auto;}
    #happy-bag-iittala-arabia .sec3 h3 .line2{ margin: 9.333333333vw 0 0; width: 43.12533333vw;}
    #happy-bag-iittala-arabia .sec3 h3 .line3{ margin: 8vw 0 0; white-space: nowrap;font-size: 6.933333333vw; }
    #happy-bag-iittala-arabia .sec3 h3 .line4{ margin: 5.333333333vw 0 0; width: 58.576vw;}
    #happy-bag-iittala-arabia .sec3 .dl4{ margin: 10.66666667vw 0 0; padding: 10.66666667vw 0 13.33333333vw; border-top: 0.266666667vw solid #414141; border-bottom: none;}
    #happy-bag-iittala-arabia .sec3 .dl4 dt{ text-align: center; letter-spacing: .05em; font-size: 4.8vw; line-height: 1.666666667;}
    #happy-bag-iittala-arabia .sec3 .dl4 dt small{ font-size: 3.2vw;}
    #happy-bag-iittala-arabia .sec3 .dl4 dt span{ margin: 0; font-size: 4.8vw;}
    #happy-bag-iittala-arabia .sec3 .dl4 dt em{ letter-spacing: .15em;}
    #happy-bag-iittala-arabia .sec3 .dl4 dd{ padding: 8vw 0 0;}
    #happy-bag-iittala-arabia .sec3 .dl4 dd figure{ flex-direction: column; padding: 0; justify-content: flex-start;}
    #happy-bag-iittala-arabia .sec3 .dl4 dd figure img{ width: 53.33333333vw;}
    #happy-bag-iittala-arabia .sec3 .dl4 dd figure figcaption{ margin: 8vw 0 0; width: 100%; text-align: center; font-size: 3.466666667vw; line-height: 1.769230769;}
    #happy-bag-iittala-arabia .sec3 .btn1{ margin: 0;}
    #happy-bag-iittala-arabia .sec3 .btn1 a{ padding: 0 10.66666667vw; width: 80vw; height: 10.66666667vw; border: 0.266666667vw solid #414141; border-radius: 5.333333333vw; font-size: 3.733333333vw;}
    #happy-bag-iittala-arabia .sec3 .btn1 a:after{ right: 8vw; width: 1.6vw; height: 2.666666667vw;}
    #happy-bag-iittala-arabia .sec3 .btn1 a span{ margin: 0 1em 0 0; letter-spacing: .5em;}
    #happy-bag-iittala-arabia .sec3 .attention{ margin: 0px 0px 50px; text-align: left;}
}

#happy-bag-iittala-arabia .sec4{ position: relative; margin: 0 calc(50% - 50vw); padding: 150px calc(50vw - 50% + 50px); background: #fff;}
#happy-bag-iittala-arabia .sec4 p{ margin: 1.5em 0 0; letter-spacing: .1em; font-size: 17px; font-family: "Yu Gothic Pr6N M"; line-height: 2.235294118;}
#happy-bag-iittala-arabia .sec2 .btn2{ margin: 50px 0 0;}
#happy-bag-iittala-arabia .sec2 .btn2 a{ position: relative; display: flex; padding: 0 0 15px; width: 340px; letter-spacing: .3em; font-size: 17px; font-family: "Yu Gothic Pr6N D";}
#happy-bag-iittala-arabia .sec2 .btn2 a:after{ position: absolute; bottom: 0; left: 0; width: 340px; height: 10.68px; background: url("/static/mallDefault/contents/images/sp/hibito-daily/arrow3.png") no-repeat 0 0 / 340px 10.68px; content: "";}
#happy-bag-iittala-arabia .sec2 .btn2 a span{ margin: 0 1em 0 0; letter-spacing: .5em;}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .sec4{ margin: 0; padding: 16vw 10.13333333vw;}
    #happy-bag-iittala-arabia .sec4 h3{ margin: 0 calc(50% - 50vw); padding: 0 1.333333333vw;}
    #happy-bag-iittala-arabia .sec4 p{ margin: 8vw 0 0; letter-spacing: .05em; font-size: 3.733333333vw; line-height: 1.857142857;}
    #happy-bag-iittala-arabia .sec2 .btn2{ margin: 5.66666667vw 0 0;}
    #happy-bag-iittala-arabia .sec2 .btn2 a{ padding: 0 0 2.666666667vw; width: 100%; font-size: 3.733333333vw;}
    #happy-bag-iittala-arabia .sec2 .btn2 a:after{ width: 79.86666667vw; height: 2.133333333vw; background: url("/static/mallDefault/contents/images/sp/hibito-daily/arrow3_sp.png") no-repeat 0 0 / 79.86666667vw 2.133333333vw;}
    #happy-bag-iittala-arabia .sec2 .btn2 a span{ margin: 0 1em 0 0;}
}

#happy-bag-iittala-arabia .app{ position: fixed; right: 2.604166667vw; bottom: 2.604166667vw;}
#happy-bag-iittala-arabia .app a{ display: block; width: 9.130208333vw; filter: drop-shadow(0.15625vw 0.15625vw 0.416666667vw rgba(0, 0, 0, 0.16));}

@media only screen and (max-width: 736px) {
    #happy-bag-iittala-arabia .app{ right: 2.666666667vw; bottom: 2.666666667vw;}
    #happy-bag-iittala-arabia .app a{ width: 29.33333333vw; filter: drop-shadow(0.8vw 0.8vw 2.133333333vw rgba(0, 0, 0, 0.16));}
}

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

/* Dots */
.slick-dotted.slick-slider{ margin-bottom: 0;}
.slick-dots{ bottom: -4.8vw; text-align: left;}
.slick-dots li{ margin: 0 2.666666667vw 0 0; width: 1.6vw; height: 1.6vw;}
.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: #AFBEC3; content: ''; line-height: 1; opacity: 1;}
.slick-dots li.slick-active button:before{ background: #414141; opacity: 1;}