@charset "utf-8";

/* CSS Document */




/***********
  title
************/
#lpfree .title {
    padding-top: 100px;
    margin-bottom: 100px;
}
@media screen and (max-width:834px) {
    #lpfree .title {
        padding-top: 60px;
        margin-bottom: 30px;
    }
}

/***********
  heading他
************/
#lpfree .topSpace {
    padding-top: 150px;
}
@media screen and (max-width:834px) {
    #lpfree .topSpace {
        padding-top: 80px;
    }
}

/***********
  heading他
************/

#lpfree .heading {
    font-size: 175%;
    border-bottom: 1px solid #333;
    letter-spacing: 0.1em;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
#lpfree .heading.-big {
    font-size: 192%;
    letter-spacing: 0.2em;
}
#lpfree .alpha {
    font-size: 125%;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    font-weight: 600;
}

#lpfree .text {
    font-size: 117%;
    font-weight: 600;
    line-height: 2.0;
}
#lpfree .text.-big {
    font-size: 125%;
    letter-spacing: 0.1em;
}
#lpfree .text span {
    display: block;
    margin: 50px 0 10px 5px;
    font-size: 200%;
    letter-spacing: 0.1em;
}

@media screen and (max-width:834px) {
    #lpfree .heading {
        font-size: 142%;
        letter-spacing: 0.1em;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    #lpfree .heading.-big {
        font-size: 159%;
        letter-spacing: 0.1em;
    }
    #lpfree .alpha {
        font-size: 92%;
    }
    #lpfree .text {
        font-size: 109%;
        font-weight: 600;
        line-height: 1.8;
    }
    #lpfree .text.-big {
        font-size: 117%;
    }
}

/***********
  hikaku
************/
#lpfree .hikakuTop {
    width: 350px;
    margin: 0 auto 50px;
}
#lpfree .hikakuTitle {
    display: flex;
}
#lpfree .hikakuTitle li {
    font-size: 175%;
    width: 630px;
    text-align: center;
    margin-bottom: 60px;
}
#lpfree .hikaku {
    margin-bottom: 200px;
}
#lpfree .hikaku li {
    margin-bottom: 60px;
}
@media screen and (max-width:834px) {
    #lpfree .hikakuTop {
        width: 100%;
        margin-bottom: 10px;
    }
    #lpfree .hikaku {
        margin-bottom: 70px;
    }
    #lpfree .hikaku li {
        font-size: 150%;
        margin-bottom: 20px;
    }
    #lpfree .hikaku .number {
        width: 100%;
        margin: 0 auto;
    }
    #lpfree .hikaku .space {
        margin-bottom: 70px;
        padding-bottom: 70px;
        border-bottom: 1px solid #333;
    }
}

/***********
  modelhouse
************/
#lpfree .modelhouse {
    display: flex;
    background: #fff;
    padding: 0;
    margin: 50px auto;
}
#lpfree .modelhouse.-reverse {
    flex-direction: row-reverse;
}
#lpfree .modelhouse .modelhouseL {
    width: 50%;
}
#lpfree .modelhouse .modelhouseR {
    width: 50%;
    text-align: center;
    font-size: 125%;
    letter-spacing: 0.1em;
    margin-top: 60px;
}
#lpfree .modelhouse.-price .modelhouseR {
    margin-top: 90px;
    font-size: 142%;
}
#lpfree .modelhouse .modelhouseR span {
    font-size: 184%;
    display: block;
}
#lpfree .modelhouse.-eigyo span {
    margin-top: 10px;
}
#lpfree .modelhouse.-price .modelhouseR span {
    font-size: 210%;
    letter-spacing: 0.1em;
}
#lpfree .modelhouse.-price h2 {
    margin-bottom: 30px;
}

#lpfree .modelhouse .modelhouseR .text {
    font-size: 110%;
    margin: 20px 0 20px;
}
#lpfree .modelhouse .sabtext {
    font-size: 100%;
    margin-top: 10px;
}
@media screen and (max-width:834px) {
    #lpfree .modelhouse {
        width: 85%;
        display: block;
        margin: 40px auto 50px;
    }
     #lpfree .modelhouse .modelhouseL {
        width: 100%;
    }
    #lpfree .modelhouse .modelhouseR {
        width: 100%;
        font-size: 100%;
        letter-spacing: 0.1em;
    }
    #lpfree .modelhouse.-price .modelhouseR {
        margin-top: 20px;
        font-size: 100%;
    }
    #lpfree .modelhouse .modelhouseR span {
        font-size: 175%;
        margin-top: 20px;
    }
    #lpfree .modelhouse.-eigyo span {
        margin-top: 0px;
    }
    #lpfree .modelhouse.-price h2 {
        margin-bottom: 20px;
    }
    #lpfree .modelhouse .modelhouseR .text {
        font-size: 110%;
        line-height: 1.7;
        margin: 20px 0 20px;
    }
    #lpfree .modelhouse .modelhouseR a {
        margin-bottom: 30px;
    }
    #lpfree .modelhouse .sabtext {
        font-size: 100%;
        margin-top: 0px;
        padding-bottom: 30px;
    }

}

/***********
  modelhouse
************/

#lpfree .block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}
#lpfree .block.-alignItems {
    align-items: end;
}
#lpfree .block.-reverse {
    flex-direction: row-reverse;
}
#lpfree .block01 {
    width: 48%;
}
#lpfree .block02 {
    width: 48%;
}


@media screen and (max-width:834px) {
    #lpfree .block {
        display: block;
        margin-bottom: 60px;
    }
    #lpfree .block01 {
        width: 100%;
        margin-bottom: 30px;
    }
    #lpfree .block02 {
        width: 100%;
    }
    #lpfree .block02.-padding {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/***********
  works
************/
#lpfree .works {
    display: flex;
    margin-bottom: 50px;
}
#lpfree .works li {
    width: 25%;
    margin: 100px 0.2% 50px;
    font-size: 125%;
    font-weight: 600;

}
#lpfree .works li span {
    display: block;
    padding: 20px 0 10px 20px;

}
#lpfree .works li a {
    text-decoration: none;
    color: #333;
}

@media screen and (max-width:834px) {
    #lpfree .works {
        overflow-x: auto;
        flex-wrap: nowrap;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        margin: 0 4% 50px;

    }
    #lpfree .works li {
        scroll-snap-align: start;
        flex: 0 0 60%;
        margin: 60px 1% 20px;
        font-size: 100%;
    }
}

/***********
  example
************/
#lpfree .example {
    display: flex;
    margin-bottom: 30px;
}
#lpfree .example li {
    width: 33.3%;
    margin: 30px 1% 30px 0;
    font-size: 125%;
    font-weight: 600;
}
#lpfree .example li span {
    display: block;
    padding: 20px 0 10px 20px;

}
#lpfree .example li a {
    text-decoration: none;
    color: #333;
}

@media screen and (max-width:834px) {
    #lpfree .example {
        overflow-x: auto;
        flex-wrap: nowrap;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    #lpfree .example li {
        scroll-snap-align: start;
        flex: 0 0 60%;
        margin: 0px 1% 20px;
        font-size: 100%;
    }
}