@charset "utf-8";



/* common */
.fadeUpTrigger{
text-align: center;
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 50px;
position: relative;
display: inline-block;
}
@media screen and (max-width: 767px) {
.fadeUpTrigger{
font-size: 2rem;
margin-bottom: 40px;
}
}

.fadeUpTrigger img{
width: 80px;
}
@media screen and (max-width: 767px) {
.fadeUpTrigger img{
width: 50px;
}
}

.zoomInTrigger{
font-size: 2rem;
font-weight: 500;
margin-bottom: 50px;
display: inline-block;
padding: 0 50px;
margin-top: 100px;
}

.btn{
text-align: center;
}

　section{
padding: 20px 0;
text-align: center;
}

@media screen and (max-width: 820px) {
h2{
margin-bottom: 80px;
}


}

@media screen and (max-width: 550px) {
h2{
font-size: 1.6rem;
}

h3{
font-size: 1.3rem;
}
}

@media screen and (max-width: 428px) {
h2{
font-size: 1.2rem;
margin-bottom: 50px;
}

h3{
font-size: 1rem;
}

h2 span:first-of-type{
left: -50px;
}

h2 span:last-of-type{
right: -50px;
}


}




/* result-voice */
/*--- result ---*/


#result-voice{
text-align: center;
margin-bottom: 20px;
    }


#result-voice h2 span:first-of-type{
top: -15px;
}

#result-voice h2 span:last-of-type img{
width: 90px;
}

.result-box{
border: 1px solid #13B5BB;
border-radius: 50px;
padding: 50px;
width: 100%;
}

.bf-af_box{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}

.result-title{
color: #A3977F;
font-size: 1.3rem;
font-weight: 500;
}

.bf-af{
color: #13B5BB;
font-size: 1.3rem;
}

.bf-af_arrow{
width: 50px;
margin: 0 10px;
}

.result-text{
text-align: left;
margin-bottom: 30px;
}

.result-comment{
text-align: left;
color: #A3977F;
background-color: #F2F0EC;
border-radius: 30px;
padding: 30px;
}

@media screen and (max-width: 550px) {
.result-box{
width: 85%;
margin: 0 auto;
padding: 30px;
}
.result-title{
font-size: 1.1rem;
}
}

@media screen and (max-width: 428px) {
#result-voice h2 span:last-of-type img{
width: 70px;
top: -10px;
}

#result-voice h2 span:last-of-type{
top: -10px;
right: -60px;
}

.result-box {
width: 92%;
padding: 20px 15px
}
}

@media screen and (max-width: 320px) {
.result-title{
font-size: 1rem;
}
}

/*--- voice ---*/

#voice{
text-align: center;
    }



.voice-list li{
display: flex;
justify-content: center;
margin-bottom: 80px;
}

.voice-list li:last-of-type{
margin-bottom: 0;
}

.voice-list li:nth-of-type(2){
flex-direction: row-reverse;
}

.voice-list img{
width: 80%;
max-width: 200px;
}

.user{
margin:0 30px;
}

.user-info{
color: #A3977F;
}

.voice-comment,
.voice-comment02{
text-align: left;
background-color: rgba(106,187,229,0.2);
padding: 30px 50px;
width: 60%;
position: relative;
}

.voice-comment::before{
content:'';
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 60px solid rgba(106,187,229,0.2);
position: absolute;
left: -60px;
top: 30px;
}

.voice-comment02::before{
content:'';
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 60px solid rgba(106,187,229,0.2);
position: absolute;
right: -60px;
top: 30px; 
}

.voice-comment p,
.voice-comment02 p{
margin-bottom: 10px;
}

.voice-comment p:nth-of-type(2),
.voice-comment02 p:nth-of-type(2){
color: #13B5BB;
font-size: 120%;
font-weight: 500;
}

@media screen and (max-width: 550px) {
.voice-list img{
width: 100%;
max-width: inherit;
}

.voice-comment,
.voice-comment02{
padding: 30px;
width: 100%;
}

.voice-comment::before{
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 40px solid rgba(106,187,229,0.2);
left: -40px;
}

.voice-comment02::before{
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 40px solid rgba(106,187,229,0.2);
right: -40px;
}
}

@media screen and (max-width: 428px) {
.voice-list li,
.voice-list li:nth-of-type(2){
flex-direction: column;
margin-bottom: 50px;
}

.user{
background-color:rgba(106,187,229,0.2);
padding-top: 20px;
width: 90%;
margin: 0 auto;
}

.voice-list img{
width: 50%;
}

.voice-comment,
.voice-comment02{
padding: 20px;
width: 90%;
margin: 0 auto;
font-size: 1.2rem;
}

.voice-comment::before,
.voice-comment02::before{
content: none;
}
}