html,body{
    overflow-x: hidden;
    max-width:100vw;
}
.yellow{
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 75%, #ffe674 75%);
}
#question .section-cp{
    padding-bottom: 80px;;
}
h2 span.h2-sub{
    font-size: 20px;
    color: #6CA7F5;
    font-weight: bold;
    display: block;
    margin-bottom:8px;
}
.uservoice .section-cp{
    padding-bottom: 0;
    margin-bottom:64px;
}
section{
    padding:80px 0 40px;
}
.top{
    padding:0;
}
section.uservoice{
    padding:80px 0 40px;
}
#question{
    padding-top:0;
}
@media screen and (min-width: 765px) {
    section.uservoice{
        padding:80px 0 40px;
    }
    .uservoice .section-cp{
        padding-bottom: 0;
        margin-bottom:80px;
    }
}
@media screen and (min-width: 1080px) {
    section.uservoice{
        padding:120px 0 40px;
    }
}

/*FV*/
.top{
    height:auto;
    padding-bottom: 80px;
}
.top__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}
.top__sentence .btn__container{
    position:static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.top__sentence .btn__container a{
    margin:8px auto;
}
.top__sentence .btn__container .btn + .btn{
    margin-left: auto;
}
#lottie{
    margin:40px auto 0;
    width:80vw;
}
@media screen and (min-width: 640px) {
    .top__container{
        flex-direction: row;
    }
    #lottie{
        margin:0;
        position: relative;
        top:36px;
        width:32vw;
        max-width:480px;
    }
    .top__sentence .btn__container{
        flex-direction: row;
        justify-content: flex-start;
    }
    .top__sentence .btn__container a{
        width:40%;
        margin:0;
        margin-right:16px;
    }
    .top__sentence .btn__container .btn + .btn{
        margin-left:0;
    }
}

/*お客様の声*/
.uservoice{
    background-color: #fafdff;
    overflow-x: hidden;
    max-width:100vw;
}
.uservoice .voice_blc{
    position: relative;
    width:96%;
    max-width:1040px;
    margin:104px auto;
    border-top: solid 2px #4971A6;
    border-bottom: solid 2px #4971A6;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:64px 0;
}
.uservoice .voice_blc:nth-of-type(1){
    margin-top:80px;
}
.uservoice .voice_blc:before, .uservoice .voice_blc:after{
    content: '';
    position: absolute;
    top: -20px;
    width: 2px;
    height: -webkit-calc(100% + 40px);
    height: calc(100% + 40px);
    background-color: #4971A6;
}
.uservoice .voice_blc:before {left: 20px;}
.uservoice .voice_blc:after {right: 20px;}
.uservoice .voice_blc .voice_num{
    position: absolute;
    top:-20px;
    left:0px;
    display: block;
    width:80px;
    height:80px;
    color:#fff;
    border-radius:50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    line-height: 16px;
}
.uservoice .voice_blc .voice_num span{
    font-size: 32px;
    line-height: 32px;
}
.uservoice .voice_blc:nth-of-type(1) .voice_num{
    background-color: #4971A6;
}
.uservoice .voice_blc:nth-of-type(2) .voice_num{
    background-color: #4971A6;
}
.uservoice .voice_blc:nth-of-type(3) .voice_num{
    background-color: #4971A6;
}

.uservoice .voice_blc .voice_from{
    margin:0 0 16px;
}
.uservoice .voice_blc .voice_from span{
    color:#fff;
    padding:4px 8px;
    border-radius:2px;
    font-size:12px;
}

.uservoice .voice_blc:nth-of-type(1) .voice_from span{
    background-color: #4971A6;
}
.uservoice .voice_blc:nth-of-type(2) .voice_from span{
    background-color: #4971A6;
}
.uservoice .voice_blc:nth-of-type(3) .voice_from span{
    background-color: #4971A6;
}

.uservoice .voice_blc h3,.uservoice .voice_blc p,.uservoice .voice_blc .voice_from{
    max-width:680px;
    width:70%;
    color:#313135;
}
.uservoice .voice_blc h3{
    font-weight: 700;
    font-size:24px;
    line-height: 40px;
    letter-spacing: 0.04em;
    margin-bottom:20px;
}
.uservoice .voice_blc h3 span{
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 75%, #ffe674 75%);;
}
.uservoice .voice_blc p{
    font-size:12px;
    line-height: 24px;
}
.uservoice .voice_blc img{
    position: absolute;
    bottom:0;
    height:160px;
    width:auto;
    z-index: 100;
}
.uservoice .voice_blc:nth-of-type(1) img{
    left:-10px;
    bottom:-40px;
}
.uservoice .voice_blc:nth-of-type(2) img{
    right:-20px;
    bottom:-64px;
}
.uservoice .voice_blc:nth-of-type(3) img:nth-of-type(1){
    left:-72px;
    bottom:-64px;
}
.uservoice .voice_blc:nth-of-type(3) img:nth-of-type(2){
    right:-96px;
    bottom:-24px;
}

@media screen and (min-width: 1080px) {
    .uservoice .voice_blc{
        margin:200px auto;
        padding:80px 0;
    }
    .uservoice .voice_blc h3{
        font-size:36px;
        line-height: 56px;
        letter-spacing: 0.04em;
        margin-bottom:32px;
    }
    .uservoice .voice_blc p{
        font-size:16px;
        line-height: 32px;
    }
    .uservoice .voice_blc .voice_num{
        width:160px;
        height:160px;
        font-size: 20px;
        line-height: 20px;
        top:-40px;
        left:-32px;
    }
    .uservoice .voice_blc .voice_num span{
        font-size: 48px;
        line-height: 48px;
    }
    .uservoice .voice_blc img{
        position: absolute;
        bottom:0;
        height:240px;
        width:auto;
    }
    .uservoice .voice_blc:nth-of-type(1) img{
        left:-10px;
        bottom:-40px;
    }
    .uservoice .voice_blc:nth-of-type(2) img{
        right:-40px;
        bottom:-40px;
    }
    .uservoice .voice_blc:nth-of-type(3) img:nth-of-type(1){
        left:-64px;
        bottom:-20px;
    }
    .uservoice .voice_blc:nth-of-type(3) img:nth-of-type(2){
        right:-80px;
        bottom:20px;
    }
}

/*追記*/
@media screen and (max-width: 768px) {
    #flow .flexbox{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #flow .flexbox .right{
        transform: rotate(90deg);
    }
    .box-inner{
        padding:32px 16px;
    }
    .box-text p,.box-text h3{
        width:100%;
    }
    #feature img{
        display: block;
        transform: none;
        max-width:400px;
        margin-bottom: 10px;
    }
    .feature-container,.feature-container2,.feature-container3{
        width:88vw;
        justify-content: center;
        align-items: center;
        transform: none;
    }
    .feature-container2,.feature-container3{
        padding-top:80px;
    }
    .feature-container3{
        margin-bottom:64px;
    }
    .section-cp{
        padding-bottom:80px;
    }
    .Form{
        padding:0 12px;
    }
}
@media screen and (max-width: 640px) {
    .top__sentence h1{
        font-size: 2.2rem;
    }
    .top__sentence p,.top__sentence h1{
        width:88vw;
    }
    .top__sentence .btn__container .btn{
        width:88vw;
    }
}
@media screen and (max-width: 640px) {
    .box{
        transform: none;
    }
    .Form-Item-Label{
        max-width: 216px;
    }
    .Form-Item-Label-Required{
        margin-right:12px;
    }
}
@media screen and (max-width: 485px) {
    .Form{
        margin-top: 0;
    }
    .top__sentence h1{
        font-size: 32px;
    }
    .top__sentence p{
        letter-spacing: 0.08em;
        font-size: 16px;
    }
    #feature{
        background-color: #fff;
    }
    .feature-container3{
        margin-bottom: 32px;
    }
    .box-text h3{
        font-size:1.8rem;
    }
    .box{
        width:100%;
    }
    .box-inner{
        width:100%;
        margin:0 auto;
        padding: 0;
    }
    .uservoice .section-cp{
        padding-bottom:0 !important;
    }
    .trial h2{
        font-size: 1.6rem;
        letter-spacing: 0.08em;
        margin-bottom:16px;
        padding:0 !important;
    }
    #flow h3{
        margin-bottom: 16px;
    }
    .container .container{
        padding:0;
    }
    #feature{
        height: auto;
    }
    .section-cp{
        width:88vw;
        padding-bottom: 40px;
    }
    #question .container{
        padding:16px;
    }
    .Form-Item{
        flex-direction: column;
        align-items: flex-start;
    }
    .Form-Item--radio div{
        display: flex;
        align-items: center;
    }
    .Form-Item--radio div label{
        font-size: 1.2rem !important;
    }
    .Form-Btn{
        margin-bottom: 40px;
    }
    .footerbox{
        padding: 36px 0 64px 0;
    }
}
.Form-Item--radio div{
    display: flex;
    align-items: center;
}
.btn2{
    padding:12px 16px;
    letter-spacing: 0.08em;
    min-width: 280px;
}
.Form-Btn{
    padding:12px 0;
    min-width: 280px;
    border-radius: 100px;
    border:2px solid #4B69A6;
    transition:  0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.Form-Btn:hover{
    background-color: #4B69A6;
    color: #fff;
    transition:  0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
