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

#lp-sp-eco{ margin: 0 auto; width: 960px; color: #000; font-family: "Yu Gothic Pr6N M";}
#lp-sp-eco::-webkit-scrollbar{ display: none;}
#lp-sp-eco *{ box-sizing: border-box;}
#lp-sp-eco *::-webkit-scrollbar{ display: none;}
#lp-sp-eco img{ max-width: none; width: 100%;}
#lp-sp-eco .pc{ display: block;}
#lp-sp-eco .sp{ display: none;}
#lp-sp-eco .anchor{ position: relative; z-index: -1;}
#lp-sp-eco .anchor:before{ display: block; margin-top: -67px; width: 100%; height: 67px; content: ""; vertical-align: top;}
#lp-sp-eco figure{ margin: 0; padding: 0;}

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

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

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

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

#lp-sp-eco .sec1{ padding: 140px 0 190px;}
#lp-sp-eco .sec1 > h3{ margin: 0 calc(50% - 50vw); text-align: center; letter-spacing: .08em; font-size: 49px; font-family: "A1 Mincho"; line-height: 1.836734694;}
/*#lp-sp-eco .sec1 > h3{ margin: 0 calc(50% - 50vw);}
#lp-sp-eco .sec1 > h3 img{ margin: 0 auto; width: 976.57px;}*/
#lp-sp-eco .sec1 > dl{ display: flex; flex-direction: column; margin: 90px 0 0; align-items: center;}
#lp-sp-eco .sec1 > dl > dt{ display: flex; width: 193.96px; height: 31.03px; border-radius: 15.52px; background: #79c7d6; font-size: 20px; font-family: "Gothic MB101 DemiBold"; justify-content: center; align-items: center;}
#lp-sp-eco .sec1 > dl > dd{ padding: 30px 0 50px; width: 100%; text-align: center; font-size: 36px; font-family: "A1 Mincho";}
#lp-sp-eco .sec1 > dl > dd > img{ margin: 0 auto; width: 277.26px;}
#lp-sp-eco .sec1 > dl > dd a{ text-decoration: underline;}
/*#lp-sp-eco .sec1 > dl > dd a img{ margin: 0 auto; width: 273.6px;}*/
#lp-sp-eco .sec1 > dl > dd .lead{ margin: 75px 0 0; padding: 0 0 50px; letter-spacing: .08em; font-weight: 500; font-size: 18px; font-family: "Zen Kaku Gothic New", sans-serif; line-height: 2.222222222;}

@media only screen and (max-width: 736px) {
    #lp-sp-eco .sec1{ padding: 10.13333333vw 5.333333333vw 29.33333333vw; width: 100%;}
    #lp-sp-eco .sec1 > h3{ margin: 0; letter-spacing: .03em; font-size: 6.4vw; line-height: 1.75;}
    /*#lp-sp-eco .sec1 > h3{ margin: 0;}*/
    #lp-sp-eco .sec1 > h3 img{ width: 73.376vw;}
    #lp-sp-eco .sec1 > dl{ margin: 13.33333333vw 0 0;}
    #lp-sp-eco .sec1 > dl > dt{ width: 35.90666667vw; height: 5.744vw; border-radius: 2.872vw; font-size: 3.733333333vw;}
    #lp-sp-eco .sec1 > dl > dd{ padding: 4vw 0 8vw; font-size: 6.933333333vw;}
    #lp-sp-eco .sec1 > dl > dd > img{ margin: 0 auto; width: 51.64266667vw;}
    /*#lp-sp-eco .sec1 > dl > dd a img{ width: 52.69333333vw;}*/
    #lp-sp-eco .sec1 > dl > dd .lead{ margin: 13.33333333vw 0 0; padding: 0 0 5.333333333vw; text-align: left; letter-spacing: .06em; font-size: 3.466666667vw; line-height: 2.307692308;}
}

#lp-sp-eco .box1{ position: relative; margin: 0 0 50px; padding: 85px 100px; border-radius: 40px; background: #efe9cd; text-align: left; font-family: "Zen Kaku Gothic New", sans-serif;}
#lp-sp-eco .box1 h4{ position: absolute; top: 100px; left: 100px; font-weight: 700; font-size: 28px; line-height: 1.714285714;}
#lp-sp-eco .box1 figure{ display: flex; flex-direction: row-reverse; width: 100%; align-items: flex-end; justify-content: space-between;}
#lp-sp-eco .box1 figure > img{ width: 286px;}
#lp-sp-eco .box1 figcaption{ padding: 0 0 160px;}
#lp-sp-eco .box1 figcaption dl{ display: flex; flex-direction: column;}
#lp-sp-eco .box1 figcaption dl dt{ display: flex; flex-direction: column; font-weight: 700; font-size: 20px;}
#lp-sp-eco .box1 figcaption dl dt img{ margin: 0 0 24px; width: 206px;}
#lp-sp-eco .box1 figcaption dl dd{ padding: 20px 0 0; width: 401.36px;}
#lp-sp-eco .box1 .btn1{ position: absolute; bottom: 100px; left: 100px;}
#lp-sp-eco .box1 .btn1 a{ position: relative; display: block; width: 275px; filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.2));}
#lp-sp-eco .box1 .btn1 a:after{ position: absolute; right: -17px; bottom: -11px; width: 43.24px; height: 34.07px; background: url("/static/mallDefault/contents/images/sp/2026_ecoloop-rokko/btn_live2.png") no-repeat center / contain; content: "";}

@media only screen and (max-width: 736px) {
    #lp-sp-eco .box1{ margin: 0 0 8vw; padding: 13.33333333vw 6.666666667vw; border-radius: 5.333333333vw;}
    #lp-sp-eco .box1 h4{ position: relative; top: auto; left: auto; font-size: 4.8vw; line-height: 1.777777778;}
    #lp-sp-eco .box1 figure{ margin: 5.333333333vw 0 0;}
    #lp-sp-eco .box1 figure > img{ width: 35.2vw;}
    #lp-sp-eco .box1 figcaption{ padding: 0 0 2.666666667vw;}
    #lp-sp-eco .box1 figcaption dl dt{ font-size: 3.733333333vw; line-height: 1.75;}
    #lp-sp-eco .box1 figcaption dl dt img{ margin: 0 0 5.333333333vw; width: 35.73333333vw;}
    #lp-sp-eco .box1 figcaption dl dd{ padding: 5.333333333vw 0 0; width: 32.44266667vw;}
    #lp-sp-eco .box1 .btn1{ position: relative; bottom: auto; left: auto; margin: 9.333333333vw 0 0;}
    #lp-sp-eco .box1 .btn1 a{ width: 100%; filter: drop-shadow(0.8vw 0.8vw 2.133333333vw rgba(0, 0, 0, 0.2));}
    #lp-sp-eco .box1 .btn1 a:after{ right: -3.2vw; bottom: -4.533333333vw; width: 11.53066667vw; height: 9.085333333vw;}
}

#lp-sp-eco .box2{ padding: 55px 100px 100px; border-radius: 40px; background: #efe9cd; text-align: left; font-family: "Zen Kaku Gothic New", sans-serif;}
#lp-sp-eco .box2 > dl{ font-weight: 700;}
#lp-sp-eco .box2 > dl > dt{ display: flex; flex-direction: column; font-size: 28px;}
#lp-sp-eco .box2 > dl > dt span{ margin: 0 0 .15em; width: 302px;}
#lp-sp-eco .box2 > dl > dd{ padding: .15em 0 0; font-size: 55px; line-height: 1.272727273;}
#lp-sp-eco .box2 .flex{ display: flex; margin: 30px 0 0; justify-content: space-between;}
#lp-sp-eco .box2 .flex > div{ width: 340px;}
#lp-sp-eco .box2 .flex > div + div{ width: 370px;}
#lp-sp-eco .box2 .flex .line1{ display: flex; flex-direction: column; margin: 30px 0 0;}
#lp-sp-eco .box2 .flex .line1 img{ width: 167.8px;}
#lp-sp-eco .box2 .flex .line1 span{ margin: .15em 0 0; font-weight: 400; font-size: 20px;}
#lp-sp-eco .box2 .flex .line1 span small{ font-size: 14px;}
#lp-sp-eco .box2 .flex .line2{ margin: 30px 0 0; font-weight: 400; font-size: 14px; line-height: 1.714285714;}
#lp-sp-eco .box2 .flex .line3{ font-weight: 400; font-size: 16px; line-height: 2;}
#lp-sp-eco .box2 .flex dl{ margin: 30px 0 0;}
#lp-sp-eco .box2 .flex dl dt{ font-weight: 500; font-size: 16px;}
#lp-sp-eco .box2 .flex dl dd{ padding: 1em 0 0; font-weight: 400; font-size: 14px; line-height: 2.142857143;}
#lp-sp-eco .box2 .flex .btn1{ margin: 30px 0 0;}
#lp-sp-eco .box2 .flex .btn1 a{ display: flex; width: 100%; height: 74px; border: 1px solid #bababa; border-radius: 20px; background: #fff; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2); text-decoration: none; font-weight: 500; font-size: 20px; justify-content: center; align-items: center;}

@media only screen and (max-width: 736px) {
    #lp-sp-eco .box2{ padding: 10.66666667vw 6.666666667vw 16vw; border-radius: 5.333333333vw;}
    #lp-sp-eco .box2 > dl > dt{ letter-spacing: -.05em; font-size: 4.266666667vw;}
    #lp-sp-eco .box2 > dl > dt span{ margin: 0 0 .15em; width: 53.06666667vw;}
    #lp-sp-eco .box2 > dl > dd{ padding: .15em 0 0; white-space: nowrap; letter-spacing: -.05em; font-size: 6.933333333vw; line-height: 1.384615385;}
    #lp-sp-eco .box2 .flex{ flex-direction: column; margin: 4vw 0 0; justify-content: flex-start;}
    #lp-sp-eco .box2 .flex > div{ padding: 0 0 6.666666667vw; width: 100%;}
    #lp-sp-eco .box2 .flex > div + div{ position: relative; padding: 6.666666667vw 0 0; width: 100%;}
    #lp-sp-eco .box2 .flex > div + div:after{ position: absolute; top: 0; left: 50%; width: 81.33333333vw; height: 0.266666667vw; background: #707070; content: ""; transform: translate(-50%,0);}
    #lp-sp-eco .box2 .flex figure{ margin: 0 -3.2vw; width: auto;}
    #lp-sp-eco .box2 .flex .line1{ margin: 8vw 0 0;}
    #lp-sp-eco .box2 .flex .line1 img{ width: 39.62933333vw;}
    #lp-sp-eco .box2 .flex .line1 span{ margin: .25em 0 0; font-size: 4.8vw;}
    #lp-sp-eco .box2 .flex .line1 span small{ font-size: 3.2vw;}
    #lp-sp-eco .box2 .flex .line2{ margin: 4vw 0 0; font-size: 3.733333333vw; line-height: 1.714285714;}
    #lp-sp-eco .box2 .flex .line3{ font-weight: 500; font-size: 4.266666667vw; line-height: 1.875;}
    #lp-sp-eco .box2 .flex dl{ margin: 6.666666667vw 0 0;}
    #lp-sp-eco .box2 .flex dl dt{ letter-spacing: -.05em; font-size: 3.733333333vw;}
    #lp-sp-eco .box2 .flex dl dd{ padding: 1em 0 0; font-size: 3.466666667vw; line-height: 2;}
    #lp-sp-eco .box2 .flex .btn1{ margin: 6.666666667vw 0 0;}
    #lp-sp-eco .box2 .flex .btn1 a{ height: 19.73333333vw; border: 0.266666667vw solid #bababa; border-radius: 5.333333333vw; box-shadow: 0.8vw 0.8vw 2.133333333vw rgba(0, 0, 0, 0.2); font-size: 4.8vw;}
}

#lp-sp-eco .box3{ padding: 90px 80px 110px; border: 1px solid rgba(186,186,186,.8); border-radius: 40px;}
#lp-sp-eco .box3 h3{ width: 179.18px;}
#lp-sp-eco .box3 .cnt-wrap{ display: flex; margin: 60px 0 0; font-size: 16px; justify-content: space-between;}
#lp-sp-eco .box3 .cnt{ width: 375px;}
#lp-sp-eco .box3 .blk-tl{ margin: 150px 0 0; padding: 20px 25px 120px; border-top: 25px solid #79C7D6; background: url("/static/mallDefault/contents/images/sp/2026_ecoloop-rokko/bg.jpg") repeat-y top center / 375px 520px;}
#lp-sp-eco .box3 .cnt > .blk-tl:first-child{ margin: 0;}
#lp-sp-eco .box3 .blk-tl h4{ font-weight: 300; font-size: 40px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif;}
#lp-sp-eco .box3 .blk-tl + figure{ margin: 20px 0 0;}
#lp-sp-eco .box3 p + figure{ margin: 50px 0 0;}
#lp-sp-eco .box3 p{ margin: 1em 0 0; line-height: 2.1875;}
#lp-sp-eco .box3 .blk{ margin: 50px 0 0; padding: 37px; background: url("/static/mallDefault/contents/images/sp/2026_ecoloop-rokko/bg.jpg") repeat-y top center / 375px 520px; font-family: "Midashi Go MB31";}
#lp-sp-eco .box3 .blk dt,
#lp-sp-eco .box3 .blk > h5{ font-size: 18px; font-family: "Midashi Go MB31"; line-height: 1.77;}
#lp-sp-eco .box3 .blk dd{ margin: 15px 0 0; padding: 15px 0 0; border-top: 1px dashed;}
#lp-sp-eco .box3 .blk dd p{ margin: 0; line-height: 1.875;}
#lp-sp-eco .box3 .blk figure{ margin: 30px 0 0;}
#lp-sp-eco .box3 .blk p{ font-family: "Yu Gothic Pr6N M";}
#lp-sp-eco .box3 .blk > p{ margin: 1.5em 0 0; line-height: 1.875;}

@media only screen and (max-width: 736px) {
    #lp-sp-eco .box3{ padding: 6.666666667vw 5.333333333vw 21.33333333vw; border-radius: 5.333333333vw;}
    #lp-sp-eco .box3 h3{ width: 27.8vw;}
    #lp-sp-eco .box3 .cnt-wrap{ flex-direction: column; margin: 6.666666667vw 0 0; font-size: 3.733333333vw;}
    #lp-sp-eco .box3 .cnt{ width: 100%;}
    #lp-sp-eco .box3 .cnt + .cnt{ margin: 26.66666667vw 0 0;}
    #lp-sp-eco .box3 .blk-tl{ margin: 26.66666667vw 0 0; padding: 4vw 5.333333333vw 25.33333333vw; border-top: 5.333333333vw solid #79C7D6;}
    #lp-sp-eco .box3 .cnt > .blk-tl:first-child{ margin: 0;}
    #lp-sp-eco .box3 .blk-tl h4{ font-size: 8.266666667vw;}
    #lp-sp-eco .box3 .blk-tl + figure{ margin: 10.66666667vw 0 0;}
    #lp-sp-eco .box3 p + figure{ margin: 10.66666667vw 0 0;}
    #lp-sp-eco .box3 p{ margin: 10.66666667vw 0 0; font-size: 3.733333333vw; line-height: 2;}
    #lp-sp-eco .box3 .blk{ margin: 10.66666667vw 0 0; padding: 5.333333333vw;}
    #lp-sp-eco .box3 .blk dt,
    #lp-sp-eco .box3 .blk > h5{ font-size: 4.266666667vw; line-height: 2;}
    #lp-sp-eco .box3 .blk dd{ margin: 5.333333333vw 0 0; padding: 5.333333333vw 0 0; border-top: 0.266666667vw dashed;}
    #lp-sp-eco .box3 .blk dd p{ line-height: 2;}
    #lp-sp-eco .box3 .blk figure{ margin: 5.333333333vw 0 0;}
    #lp-sp-eco .box3 .blk > p{ margin: 5.333333333vw 0 0; line-height: 2;}
}

#lp-sp-eco .sec2{ position: relative; margin: 0 calc(50% - 50vw); padding: 285px calc(50vw - 50% + 80px) 240px; background: #f4f4f4;}
#lp-sp-eco .sec2:after{ position: absolute; bottom: 0; left: 50%; width: 800px; height: 1px; background: #707070; content: ""; transform: translate(-50%,0);}
#lp-sp-eco .sec2 .tl-wrap{ display: flex; padding: 0 0 50px; justify-content: space-between; align-items: center;}
#lp-sp-eco .sec2 .tl-wrap h3{ font-weight: 300; font-size: 46px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; line-height: 1.95;}
#lp-sp-eco .sec2 .tl-wrap figure{ width: 260px;}
#lp-sp-eco .sec2 p{ margin: 50px 0 0; letter-spacing: .03em; font-size: 16px; line-height: 2.1875;}
#lp-sp-eco .sec2 p span{ position: relative; display: inline-block; width: 70px; height: 16px;}
#lp-sp-eco .sec2 p span:after{ position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #000; content: "";}

@media only screen and (max-width: 736px) {
    #lp-sp-eco .sec2{ margin: 0; padding: 26.66666667vw 10.66666667vw;}
    #lp-sp-eco .sec2:after{ width: 78.66666667vw; height: 0.266666667vw;}
    #lp-sp-eco .sec2 .tl-wrap{ flex-direction: column; padding: 0;}
    #lp-sp-eco .sec2 .tl-wrap h3{ white-space: nowrap; letter-spacing: -.05em; font-size: 8vw; line-height: 1.666666667;}
    #lp-sp-eco .sec2 .tl-wrap figure{ margin: 13.33333333vw 0 0; width: 100%;}
    #lp-sp-eco .sec2 p{ margin: 10.66666667vw 0 0; letter-spacing: .02em; font-size: 3.733333333vw; line-height: 2;}
    #lp-sp-eco .sec2 p + p{ margin: 10.66666667vw 0 0 !important;}
    #lp-sp-eco .sec2 p span{ width: 17.2vw; height: 14px;}
}

#lp-sp-eco .sec3{ margin: 0 calc(50% - 50vw); padding: 200px calc(50vw - 50% + 80px) 370px; background: #F4F4F4;}
#lp-sp-eco .sec3 h3{ padding: 0 0 120px; white-space: nowrap; letter-spacing: -.05em; font-weight: 300; font-size: 46px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; line-height: 1.95;}
#lp-sp-eco .sec3 .num{ margin: 100px 0 0;}
#lp-sp-eco .sec3 .num img{ width: auto; height: 113px;}
#lp-sp-eco .sec3 h4{ margin: 60px 0 0; white-space: nowrap; letter-spacing: -.05em; font-weight: 300; font-size: 38px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; line-height: 1.57;}
#lp-sp-eco .sec3 .flx{ display: flex; justify-content: space-between;}
#lp-sp-eco .sec3 .flx2{ align-items: flex-end;}
#lp-sp-eco .sec3 .flx > *{ width: 375px;}
#lp-sp-eco .sec3 p{ margin: 50px 0 0; font-size: 14px; line-height: 2.14;}
#lp-sp-eco .sec3 figure{ margin: 50px 0 0;}
#lp-sp-eco .sec3 .video{ position: relative; padding-top: 56.25%;}
#lp-sp-eco .sec3 .video iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#lp-sp-eco .sec3 figure figcaption{ margin: 20px 0 0; letter-spacing: .01em; font-size: 12px; line-height: 2;}
#lp-sp-eco .sec3 dl{ margin: 50px 0 0;}
#lp-sp-eco .sec3 dt{ font-weight: 500; font-size: 20px; font-family: "garamond-premier-pro", serif;}
#lp-sp-eco .sec3 dd{ margin: 1em 0 0; letter-spacing: .01em; font-size: 12px;}
#lp-sp-eco .sec3 a{ text-decoration: underline;}

@media only screen and (max-width: 736px) {
    #lp-sp-eco .sec3{ margin: 0; padding: 26.66666667vw 10.66666667vw;}
    #lp-sp-eco .sec3 h3{ padding: 0; text-align: center; font-size: 8vw; line-height: 1.666666667;}
    #lp-sp-eco .sec3 .num{ margin: 18.13333333vw 0 0;}
    #lp-sp-eco .sec3 .num img{ width: auto; height: 19.70133333vw;}
    #lp-sp-eco .sec3 h4{ margin: 8vw 0 0; font-size: 6.933333333vw; line-height: 1.538461538;}
    #lp-sp-eco .sec3 .flx{ flex-direction: column;}
    #lp-sp-eco .sec3 .flx2{ align-items: flex-start;}
    #lp-sp-eco .sec3 .flx > *{ width: 100%;}
    #lp-sp-eco .sec3 p{ margin: 8vw 0 0; letter-spacing: .01em; font-size: 3.733333333vw; line-height: 2;}
    #lp-sp-eco .sec3 figure{ margin: 8vw 0 0;}
    #lp-sp-eco .sec3 dl{ margin: 8vw 0 0;}
    #lp-sp-eco .sec3 dt{ font-size: 5.333333333vw;}
    #lp-sp-eco .sec3 dd{ font-size: 3.2vw;}
}