@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

#lp-sp-knowledge{ margin: 0 auto; width: 1100px; letter-spacing: .1em; font-family: "Source Sans 3", "Noto Sans JP", sans-serif; line-height: 1.75;}
#lp-sp-knowledge *{ box-sizing: border-box;}
#lp-sp-knowledge .pc{ display: block;}
#lp-sp-knowledge .sp{ display: none;}
.anchor{ position: relative; z-index: -1;}
.anchor:before{ display: block; margin-top: -67px; width: 100%; height: 67px; content: ""; vertical-align: top;}
#lp-sp-knowledge figure{ margin: 0; padding: 0;}
#lp-sp-knowledge i,
#lp-sp-knowledge em{ font-style: normal;}

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

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

#lp-sp-knowledge .flex{ display: flex; align-items: center;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .flex{ display: block;}
}

#lp-sp-knowledge .row2{ display: flex; margin: -60px -10px 0; padding: 60px 0 0; flex-wrap: wrap;}
#lp-sp-knowledge .row2 > li{ padding: 60px 10px 0; width: 50%;}
#lp-sp-knowledge .row2 p{ margin: 20px 0 0;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .row2{ margin: -8vw -1.333333333vw 0; padding: 8vw 0 0;}
    #lp-sp-knowledge .row2 > li{ padding: 8vw 1.333333333vw 0;}
    #lp-sp-knowledge .row2 p{ margin: 2.666666667vw 0 0;}
}

#lp-sp-knowledge .row3{ display: flex; margin: 0 -10px; flex-wrap: wrap;}
#lp-sp-knowledge .row3 > li{ padding: 60px 10px 0; width: calc(100% / 3);}
#lp-sp-knowledge .row3 p{ margin: 10px 0 0; font-size: 12px;}
#lp-sp-knowledge .row3 figure{ position: relative;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .row3{ margin: 0 -1.866666667vw;}
    #lp-sp-knowledge .row3 > li{ padding: 8vw 1.866666667vw 0; width: 50%;}
    #lp-sp-knowledge .row3 p{ margin: 2.666666667vw 0 0; font-size: 3.2vw;}
}


#lp-sp-knowledge .sec1{ margin: 0 calc(50% - 50vw); padding: 100px calc(50vw - 50%); width: 100vw; background: url("/static/mallDefault/contents/images/sp/sofa-guide/knowledge/bg.jpg");}
#lp-sp-knowledge .sec1 h2{display: flex; flex-direction: column;  margin: 0; font-size: 30px; line-height: 1.5;}
#lp-sp-knowledge .sec1 h2 span{margin: 1em 0 0; font-size: 20px; }
#lp-sp-knowledge .sec1 .lead{ margin: 40px 0 0; font-size: 16px;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .sec1{ margin: 0; padding: 8vw 4vw; width: 100%;}
    #lp-sp-knowledge .sec1 h2{ margin: 0; font-size: 5.333333333vw;}
    #lp-sp-knowledge .sec1 h2 span{ display: block; font-size: 2.666666667vw;}
    #lp-sp-knowledge .sec1 .lead{ margin: 4vw 0 0; font-size: 3.733333333vw;}
}

#lp-sp-knowledge .list-prof{ display: flex; margin: 75px 0 0; justify-content: flex-start;}
#lp-sp-knowledge .list-prof > li{ display: flex; width: 500px; align-items: center;}
#lp-sp-knowledge .list-prof figure{ width: 150px;}
#lp-sp-knowledge .list-prof .detail{ padding: 0 0 0 20px;}
#lp-sp-knowledge .list-prof .name{ margin: 0; font-size: 20px;}
#lp-sp-knowledge .list-prof .name span{ display: inline-block; padding: 0 0 0 30px; font-size: 16px;}
#lp-sp-knowledge .list-prof p{ margin: 20px 0 0;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .list-prof{ display: block; margin: 0;}
    #lp-sp-knowledge .list-prof > li{ margin: 8vw 0 0; width: 100%;}
    #lp-sp-knowledge .list-prof figure{ width: 35%;}
    #lp-sp-knowledge .list-prof .detail{ padding: 0 0 0 2.4vw;}
    #lp-sp-knowledge .list-prof .name{ font-size: 4.266666667vw;}
    #lp-sp-knowledge .list-prof .name span{ padding: 0 0 0 4vw; font-size: 3.2vw;}
    #lp-sp-knowledge .list-prof p{ margin: 2.666666667vw 0 0;}
}

#lp-sp-knowledge .cnt{ margin: 150px 0 0;}
#lp-sp-knowledge .sec1 > .cnt{ counter-increment: point;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .cnt{ margin: 12vw 0 0;}
}

#lp-sp-knowledge .cnt h3{ position: relative; padding: 0 0 0 55px; font-size: 24px;}
#lp-sp-knowledge .cnt h3:before{ position: absolute; top: 50%; left: 0; content: counter(point, decimal-leading-zero) "."; font-size: 30px; transform: translate(0,-50%);}
#lp-sp-knowledge .cnt h4{ font-size: 18px;}
#lp-sp-knowledge .cnt h5{ margin: 30px 0 0; font-size: 18px;}
#lp-sp-knowledge .cnt p{ margin: 30px 0 0;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .cnt h3{ padding: 0 0 0 12vw; font-size: 4.6vw;}
    #lp-sp-knowledge .cnt h3:before{ font-size: 6.4vw;}
    #lp-sp-knowledge .cnt h4{ font-size: 4.266666667vw;}
    #lp-sp-knowledge .cnt h5{ margin: 4vw 0 0; font-size: 3.2vw;}
    #lp-sp-knowledge .cnt p{ margin: 4vw 0 0;}
}

#lp-sp-knowledge .cnt .list{ margin: 0 0 0 24px; padding: 30px 0 0;}
#lp-sp-knowledge .cnt h5 + .list{ padding: 15px 0 0;}
#lp-sp-knowledge .cnt .list > li{ list-style: disc;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .cnt .list{ padding: 4vw 0 0;}
    #lp-sp-knowledge .cnt h5 + .list{ padding: 4vw 0 0;}
}

#lp-sp-knowledge .flex{ align-items: center;}
#lp-sp-knowledge .cnt .flex{ margin: 50px 0 0;}
#lp-sp-knowledge .flex figure{ width: 520px;}
#lp-sp-knowledge .flex .detail{ padding: 0 60px 0 0; width: calc(100% - 520px);}
#lp-sp-knowledge .flex figure + .detail{ padding: 0 0 0 60px;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .flex{ display: block;}
    #lp-sp-knowledge .cnt .flex{ margin: 13.33333333vw 0 0;}
    #lp-sp-knowledge .flex figure{ margin: 8vw 0 0; width: 100%;}
    #lp-sp-knowledge .flex .detail{ padding: 0; width: 100%;}
    #lp-sp-knowledge .flex figure + .detail{ padding: 8vw 0 0;}
}

#lp-sp-knowledge .flex2 figure{ width: 680px;}
#lp-sp-knowledge .flex2 .detail{ padding: 0; width: calc(100% - 680px);}
#lp-sp-knowledge .flex2 .detail p{ width: 350px;}
#lp-sp-knowledge .flex2 figcaption{ display: flex; margin: 0;}
#lp-sp-knowledge .flex2 figcaption p{ margin: 0; padding: 0 0 0 60px; width: 50%;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .flex2 figure{ width: 100%;}
    #lp-sp-knowledge .flex2 .detail{ width: 100%;}
    #lp-sp-knowledge .flex2 .detail p{ width: 100%;}
    #lp-sp-knowledge .flex2 figcaption{ display: flex;}
    #lp-sp-knowledge .flex2 figcaption p{ padding: 0; width: 50%; font-size: 2.666666667vw;}
    #lp-sp-knowledge .flex2 figcaption p + p{ margin: 0;}
}

#lp-sp-knowledge .tl-2{ display: flex; flex-direction: column; font-size: 18px;}
#lp-sp-knowledge .tl-2 span{ font-size: 12px;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .tl-2{ font-size: 4.8vw;}
    #lp-sp-knowledge .tl-2 span{ font-size: 3.2vw;}
}

#lp-sp-knowledge .cnt .row2 figure{ margin: 15px 0 0;}
#lp-sp-knowledge .cnt .row2 .list2{ min-height: 125px;}
#lp-sp-knowledge .cnt .row2 p{ width: 530px;}
#lp-sp-knowledge .bg-img{ position: relative; padding: 60px 0; background: url("/static/mallDefault/contents/images/sp/sofa-guide/knowledge/img17.png") no-repeat right bottom / 540px 320px;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .cnt .row2{ display: block; margin: 0; padding: 0;}
    #lp-sp-knowledge .cnt .row2 > li{ padding: 8vw 0 0; width: 100%;}
    #lp-sp-knowledge .cnt .row2 figure{ margin: 8vw 0 0;}
    #lp-sp-knowledge .cnt .row2 .list2{ min-height: 0;}
    #lp-sp-knowledge .cnt .row2 p{ width: 100%;}
    #lp-sp-knowledge .bg-img{ padding: 0; background: none;}
}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .cnt .row3{ display: block; margin: 0; padding: 0;}
    #lp-sp-knowledge .cnt .row3 > li{ padding: 8vw 0 0; width: 100%;}
}

#lp-sp-knowledge .sec2{ padding: 60px 0;}
#lp-sp-knowledge .sec2 h2{ text-align: center; font-weight: 300; font-size: 30px;}
#lp-sp-knowledge .sec2 h2 span{ display: block; font-size: 16px;}
#lp-sp-knowledge .sec2 figure{ margin: 50px 0 0;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .sec2{ padding: 8vw 0;}
    #lp-sp-knowledge .sec2 h2{ font-size: 5.333333333vw;}
    #lp-sp-knowledge .sec2 h2 span{ font-size: 2.666666667vw;}
    #lp-sp-knowledge .sec2 figure{ margin: 8vw 0 0;}
}

#lp-sp-knowledge .more{ margin: 60px 0 0; text-align: center;}
#lp-sp-knowledge .more a{ display: inline-block; padding: 25px 50px; min-width: 320px; border: 1px solid; text-align: center; text-decoration: none; line-height: 1;}
#lp-sp-knowledge .more a:hover{ color: #9fa0a0;}

@media only screen and (max-width: 736px) {
    #lp-sp-knowledge .more{ margin: 12vw 0 0;}
    #lp-sp-knowledge .more a{ padding: 4vw; min-width: 50%;}
}