#lp-sp-kitokie{ position: relative; margin: 0 auto; width: 800px; color: #000; font-family: "Yu Gothic Pr6N M";}
#lp-sp-kitokie *{ box-sizing: border-box;}
#lp-sp-kitokie .pc{ display: block;}
#lp-sp-kitokie .sp{ display: none;}
#lp-sp-kitokie .anchor{ position: relative; z-index: -1;}
#lp-sp-kitokie .anchor:before{ display: block; margin-top: -67px; width: 100%; height: 67px; content: ""; vertical-align: top;}
#lp-sp-kitokie figure{ margin: 0; padding: 0;}
#lp-sp-kitokie video{ width: 100%;}
#lp-sp-kitokie h2{ margin: 0 calc(50% - 50vw);}

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

#lp-sp-kitokie .sec1{ position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); padding: 250px calc(50vw - 50% - 175px) 200px; background: #ECF2E2;}
#lp-sp-kitokie .sec1 h3{ letter-spacing: .3em; font-size: 26px; font-family: "Yu Mincho Pr6N D"; line-height: 2.307692308;}
#lp-sp-kitokie .sec1 h3 span{ display: block; margin: 1em 0 0;}
#lp-sp-kitokie .sec1 p{ margin: 5em 0 0; letter-spacing: .1em; font-size: 18px; line-height: 2.666666667;}
#lp-sp-kitokie .sec1 p + p{ margin: 2.5em 0 0;}
#lp-sp-kitokie .sec1 figure{ position: absolute;}
#lp-sp-kitokie .sec1 .img1-0{ top: 170px; left: calc(50% + 90px); width: 360px;}
#lp-sp-kitokie .sec1 .img1-1{ top: 405px; left: calc(50% + 520px); width: 180px;}
#lp-sp-kitokie .sec1 .img1-2{ top: 690px; left: calc(50% + 308px); width: 350px;}

@media only screen and (max-width: 736px) {
    #lp-sp-kitokie .sec1{ margin: 0; padding: 101.3333333vw 10.66666667vw 40vw;}
    #lp-sp-kitokie .sec1 h3{ white-space: nowrap; letter-spacing: .2em; font-size: 4.8vw; line-height: 2.222222222;}
    #lp-sp-kitokie .sec1 p{ margin: 5em 0 0; white-space: nowrap; font-size: 3.733333333vw; line-height: 2.285714286;}
    #lp-sp-kitokie .sec1 .img1-0{ top: 21.33333333vw; right: 8vw; left: auto; width: 53.33333333vw;}
    #lp-sp-kitokie .sec1 .img1-2{ position: relative; top: auto; left: auto; margin: 32vw -10.66666667vw 0; width: auto;}
    #lp-sp-kitokie .sec1 .img1-2 img{ width: 82.93333333vw;}
    #lp-sp-kitokie .sec1 .img1-1{ position: relative; top: auto; left: auto; display: flex; margin: 13.33333333vw -10.66666667vw 0; padding: 0 5.333333333vw; width: auto; justify-content: flex-end;}
    #lp-sp-kitokie .sec1 .img1-1 img{ width: 50.66666667vw;}
}

#lp-sp-kitokie .list-btn1{ display: flex; margin: 165px 0 0; justify-content: center;}
#lp-sp-kitokie .list-btn1 > li{ padding: 0 40px;}
#lp-sp-kitokie .list-btn1 a{ position: relative; display: flex; flex-direction: column; padding: 0 0 20px; width: 360px; height: 152px; border: 1px solid #414141; letter-spacing: .3em; font-size: 14px; font-family: "Yu Mincho Pr6N D"; align-items: center; justify-content: center;}
#lp-sp-kitokie .list-btn1 a span{ margin: 0 0 .5em; letter-spacing: .26em; font-size: 30px; font-family: garamond-premier-pro-caption, serif;}
#lp-sp-kitokie .list-btn1 a:after{ position: absolute; bottom: 30px; left: 50%; width: 16px; height: 8px; background: url("/static/mallDefault/contents/images/sp/kitokie-haoto/arrow1.png") no-repeat center / contain; content: "";}

@media only screen and (max-width: 736px) {
    #lp-sp-kitokie .list-btn1{flex-direction: column; margin: 13.33333333vw 0 0; }
    #lp-sp-kitokie .list-btn1 > li{ padding: 13.33333333vw 0 0; width: 100%;}
    #lp-sp-kitokie .list-btn1 a{ padding: 0 0 4vw; width: 100%; height: 40vw; font-size: 3.2vw;}
    #lp-sp-kitokie .list-btn1 a span{ font-size: 6.933333333vw;}
    #lp-sp-kitokie .list-btn1 a:after{ bottom: 5.333333333vw; width: 4.266666667vw; height: 2.133333333vw;}
}

#lp-sp-kitokie .sec2{ padding: 200px 0; color: #414141;}
#lp-sp-kitokie .tl{ display: flex; flex-direction: column; letter-spacing: .3em; font-size: 18px; font-family: "Yu Mincho Pr6N D"; align-items: center;}
#lp-sp-kitokie .tl span{ margin: 0 0 .75em; letter-spacing: .26em; font-size: 40px; font-family: garamond-premier-pro-caption, serif;}
#lp-sp-kitokie .sec2 figure{ margin: 120px 0 0;}
#lp-sp-kitokie .sec2 h4{ margin: 40px 0 0;}
#lp-sp-kitokie .sec2 h4 img{ width: 169.15px;}
#lp-sp-kitokie .sec2 .dl1{ margin: 40px 0 0;}
#lp-sp-kitokie .sec2 .dl1 > dt{ padding: 0 0 30px; border-bottom: 1px solid; letter-spacing: .2em; font-size: 22px; font-family: "Yu Mincho Pr6N D";}
#lp-sp-kitokie .sec2 .dl1 > dd{ padding: 30px 0 0;}
#lp-sp-kitokie .sec2 .dl1 > dd p{ letter-spacing: .1em; font-size: 16px; line-height: 2.25;}
#lp-sp-kitokie .sec2 .dl2{ display: flex; margin: 40px 0 0; letter-spacing: .1em; font-size: 16px; line-height: 2.25; flex-wrap: wrap;}
#lp-sp-kitokie .sec2 .dl2 > dt{ width: 130px;}
#lp-sp-kitokie .sec2 .dl2 > dd{ width: calc(100% - 130px);}
#lp-sp-kitokie .sec2 .btn2{ margin: 50px 0 0;}

@media only screen and (max-width: 736px) {
    #lp-sp-kitokie .sec2{ padding: 40vw 8vw 45.33333333vw;}
    #lp-sp-kitokie .tl{ font-size: 3.2vw;}
    #lp-sp-kitokie .tl span{ font-size: 8vw;}
    #lp-sp-kitokie .sec2 figure{ margin: 26.66666667vw -6.666666667vw 0;}
    #lp-sp-kitokie .sec2 h4{ margin: 10.66666667vw 0 0; padding: 0 2.133333333vw;}
    #lp-sp-kitokie .sec2 h4 img{ width: 40.904vw;}
    #lp-sp-kitokie .sec2 .dl1{ margin: 9.333333333vw 0 0;}
    #lp-sp-kitokie .sec2 .dl1 > dt{ padding: 0 2.133333333vw 8vw; font-size: 4.266666667vw; line-height: 1.75;}
    #lp-sp-kitokie .sec2 .dl1 > dd{ padding: 8vw 2.133333333vw 0;}
    #lp-sp-kitokie .sec2 .dl1 > dd p{ font-size: 3.466666667vw; line-height: 2.153846154;}
    #lp-sp-kitokie .sec2 .dl2{ margin: 8vw 0 0; font-size: 3.2vw; line-height: 2.166666667;}
    #lp-sp-kitokie .sec2 .dl2 > dt{ width: 17.33333333vw;}
    #lp-sp-kitokie .sec2 .dl2 > dt span{ display: none;}
    #lp-sp-kitokie .sec2 .dl2 > dd{ width: calc(100% - 17.33333333vw);}
    #lp-sp-kitokie .sec2 .btn2{ margin: 10.66666667vw 0 0;}
}

#lp-sp-kitokie .btn2 a{ position: relative; display: flex; padding: 0 20px; width: 310px; height: 56px; border: 1px solid #414141; letter-spacing: .3em; font-size: 16px; font-family: "Yu Mincho Pr6N D"; align-items: center;}
#lp-sp-kitokie .btn2 a:after{ position: absolute; top: 50%; right: 30px; width: 8px; height: 14px; background: url("/static/mallDefault/contents/images/sp/kitokie-haoto/arrow2.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media only screen and (max-width: 736px) {
    #lp-sp-kitokie .btn2 a{ padding: 0 8vw; width: 100%; height: 12.8vw; font-size: 3.733333333vw;}
    #lp-sp-kitokie .btn2 a:after{ right: 8vw; width: 1.6vw; height: 2.666666667vw;}
}

#lp-sp-kitokie .sec3{ margin: 0 calc(50% - 50vw); padding: 200px calc(50vw - 50%); background: #ECF2E2;}
#lp-sp-kitokie .sec3 .list-item{ margin: 120px 0 0;}
#lp-sp-kitokie .sec3 .list-item > li{ padding: 0 10px 150px;}
#lp-sp-kitokie .sec3 .list-item figure{ margin: 0 -10px;}
#lp-sp-kitokie .sec3 .list-item h4{ margin: 40px 0 0; letter-spacing: .1em; font-size: 22px; font-family: "Yu Mincho Pr6N D";}
#lp-sp-kitokie .sec3 .list-item p{ margin: 2em 0 0; letter-spacing: .06em; font-size: 16px; line-height: 2.125;}
#lp-sp-kitokie .sec3 .list-item .btn3{ margin: 30px 0 0;}
#lp-sp-kitokie .sec3 .list-item .btn3 a{ display: block; width: 186.53px;}
#lp-sp-kitokie .sec3 .btn2 a{ margin: 0 auto;}
#lp-sp-kitokie .sec3 .bn{ margin: 200px 0 0;}
#lp-sp-kitokie .sec3 .bn a{ display: block;}
#lp-sp-kitokie .sec3 .bn figcaption{ display: none;}

@media only screen and (max-width: 736px) {
    #lp-sp-kitokie .sec3{ margin: 0; padding: 34.66666667vw 10.66666667vw 40vw;}
    #lp-sp-kitokie .sec3 .list-item{ margin: 26.66666667vw 0 0;}
    #lp-sp-kitokie .sec3 .list-item > li{ padding: 0 0 32vw;}
    #lp-sp-kitokie .sec3 .list-item figure{ margin: 0 -8vw;}
    #lp-sp-kitokie .sec3 .list-item h4{ margin: 9.333333333vw 0 0; font-size: 5.866666667vw;}
    #lp-sp-kitokie .sec3 .list-item p{ letter-spacing: .1em; font-size: 3.466666667vw; line-height: 2.153846154;}
    #lp-sp-kitokie .sec3 .list-item .btn3{ margin: 6.666666667vw 0 0;}
    #lp-sp-kitokie .sec3 .list-item .btn3 a{ width: 43.97866667vw;}
    #lp-sp-kitokie .sec3 .btn2 a{ margin: 0;}
    #lp-sp-kitokie .sec3 .bn{ margin: 40vw -8vw 0; width: auto;}
    #lp-sp-kitokie .sec3 .bn figcaption{ display: block; margin: 5.333333333vw 0 0; text-align: center; text-decoration: underline; letter-spacing: .3em; font-size: 3.733333333vw; font-family: "Yu Mincho Pr6N D";}
}

#lp-sp-kitokie .act { opacity: 0; transform: translateY(30px);}
#lp-sp-kitokie .fadein { animation: fadein 1.6s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes fadein {
    0% { opacity: 0; transform: translateY(30px);}
    100% { opacity: 1; transform: translateY(0);}
}