@charset "UTF-8";

body {
    line-height: 1.7;
}
.text-center{
    text-align: center;
}
.ttl-h1{
    font-size: 30px;
    color:#78282a;
    font-weight: 700;
    padding-top: 30px;
}
.ttl-h2{
    font-size: 28px;
    color: #333;
}
.bold{
    font-weight: bold;
}
a,a.a-link{
    color: #0856A0;
}
a[target="_blank"].a-link,
a[target="_blank"].linker{
    padding-right: 0;
    background-image: none;
}
.inner{
    width: 90%;
    max-width: 1000px;
    margin: auto;
}
.in-sec{
    padding: 80px 0;
}
.bg-hard-gray{
    background: #e5e5e5;
}
.bg-gray{
    background: #eeeeee;
}
.bg-blue{
    background: #fff;
    color: #0856A0;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 32%);
}

.kv{
    padding: 50px 0;
}
.intr{
    font-size: 20px;
}
.font-size-s{
    font-size: 1em;
    padding-top: 15px;
}
.none{
    font-size: 12px;
    margin-top: 10px;
}
img{
    width: 100%;
}

.about-box{
    display: flex;
    flex-flow:row wrap;
    padding: 50px 0;
}

.l-txt{
    width: 55%;
    margin-right: 5%;
    font-size: 16px;
}
.l-txt .agree-logo{
    text-align: center;
    margin-bottom: 20px;
}
.l-txt .agree-logo img{
    width: 220px;
    height: 52px;
}
.r-fig{
    width: 40%;
    text-align: center;
}

.flow-box{
    display: flex;
    flex-flow: row wrap;
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-top: 50px;
}
.flow-box .card{
    width: calc(25% - 30px);
    padding: 0 15px 30px;
}
.flow-box .card .ttl{
    font-size: 20px;
    margin-top: 10px;
}
.flow-box .card .step{
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #0856A0;
    border-radius: 20px;
    padding: 7px 15px;
}
.seco-sec {
    padding: 80px 0;
}
.feature-blocks{
    display: flex;
    flex-flow:row wrap;
    width: calc(100% + 30px);
    margin-left: -15px;
}
.feature-blocks .block{
    width: calc(25% - 30px);
    padding: 0 15px 30px;
}
.feature-blocks .block .ttl{
    font-size: 18px;
    margin-top: 10px;
}
.feature-blocks .block img{
    width: 80%;
}

.linker{
    color: #0856a0;
    font-size: 20px;
}

.thir-sec{
    padding: 80px 0;
}

a[target="_blank"].btn{
    padding-right: 0;
    background-image: none;
}
a[target="_blank"].btn,.btn{
    font-size: 20px;
    padding: 15px 40px;
    border: 2px solid #0856A0;
    border-radius: 50px;
    display: inline-block;
    background: #fff;
    color: #0856A0;
    transition: 0.25s;
    text-decoration: initial;
}
a[target="_blank"].btn:hover,.btn:hover{
    text-decoration: none;
    color: #fff;
    background-color: #0856a0;
    transition: 0.25s;
}
.cvtxt{
    margin-bottom: 30px;
}

.footer-zone{
    display: flex;
    flex-flow: row wrap;
    padding: 20px 0;
}
.footer-zone .l-ft ul{
    display: flex;
}
.footer-zone .l-ft ul li{
    padding-right: 20px;
}
.footer-zone .r-ft{
    margin-left: auto;
}
.footer-zone .r-ft ul{
    display: flex;
}
.footer-zone .r-ft ul li{
    padding-left: 20px;
}
.footer-zone a[target="_blank"]{
    background-image: none;
    padding-right: 0;
}


/* アコーディオン */
.cards .item{
    margin-bottom: 0;
}
.q-and-a{
    margin-top: 50px;
}
.q-and-a .cards{
    margin-bottom: 50px;
}
.q-and-a .cards .upper-conts{
    display: flex;
    font-size: 18px;
    padding: 40px;
    border-radius: 7.5px;
    border:1px solid #ccc;
    position: relative;
}
.q-and-a .cards .upper-conts:hover{
    cursor: pointer;
}
.q-and-a .cards .upper-conts::before,
.q-and-a .cards .upper-conts::after{
    content: "";
    width: 20px;
    height: 3px;
    border-radius: 5px;
    right: 40px;
    top: calc(50% - 1.5px);
    position: absolute;
    background-color: #0856A0;
}
.q-and-a .cards .upper-conts::after{
    transform: rotate(-90deg);
    transition: 0.5s;
}
.q-and-a .cards .open .upper-conts::after{
    transform: rotate(0);
    transition: 0.5s;    
}
.q-and-a .cards .open .upper-conts{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.q-and-a .lower-conts{
    background: #eee;
    padding: 40px;    
    border-bottom-left-radius: 7.5px;
    border-bottom-right-radius: 7.5px;
    /* display: none; */
}
.q-and-a .lower-conts p.only-qa{
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 105px;
}
.q-and-a.case .lower-conts p.only-case{
    padding-left: 222px;
}
.cards .upper-conts{
    background: #fff;
}
.q-and-a .cards .lower-conts,.function .cards .lower-conts{    
    display:none;
    /* z-index: -1;
    position: relative;     */
    transition:max-height 0.75s ease;
    /* max-height: 0; */
}
.q-and-a .cards .open + .lower-conts,.function .cards .open + .lower-conts{
    transition:max-height 0.75s ease;            
    /* max-height: 2000px; */
}

.q-and-a .cards .lower-conts .c-ttl{
    margin-bottom: 15px;
}
.q-and-a .cards .c-ttl{
    font-size: 34px;
    line-height: 50px;
    letter-spacing: 1.7px;
    font-family: FP-ヒラギノ角ゴ ProN W6;
}
.q-and-a .cards .c-ttl .subj{
    display: inline-block;
}
.q-and-a .cards .c-ttl .icon{
    display: inline-block;
    padding-left: 70px;
    padding-right: 80px;
    text-align: center;
    position: relative;
    vertical-align: top;
}
.q-and-a .cards .c-ttl .icon::before{
    content: "\f630";
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    left: 0;
    color: #0856A0;
}
.q-and-a .cards .c-ttl .icon.qa-q,.q-and-a .cards .c-ttl .icon.qa-a{
    padding-left: 0;
    padding-right: 30px;
    width: 75px;
    height: 75px;
}
.q-and-a .cards .c-ttl .icon.qa-q::before{    
    content: "";
    position: absolute;
    background: url(../img/icon/icon_question.PNG)no-repeat 50% 50%;
    background-size: contain;
    width: 75px;
    height: 75px;
}
.q-and-a .cards .c-ttl .icon.qa-a::before{
    content: "";
    position: absolute;
    background: url(../img/icon/icon_question.PNG)no-repeat 50% 50%;
    background-size: contain;
    width: 75px;
    height: 75px;
}

.sp{
    display: none;
}
@media screen and (max-width: 768px){
    .sp{
        display: block;
    }
    #join{
        min-width: 0;
    }
    .intr{
        font-size: 16px;
    }
    .in-sec{
        padding: 40px 0;
    }
    .l-txt{
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .r-fig{
        width: 100%;
    }
    .r-fig img{
        width: 80%;
    }

    .ttl-h1{
        font-size: 22px;
    }
    .ttl-h2{
        font-size: 20px;
    }

    .flow-box{
        width: 100%;
        margin-left: 0;
    }
    .flow-box .card{
        width: 100%;
        margin: 0 auto;
        padding: 0 0 40px;
    }
    .flow-box .card img{
        width: 60%;
    }
    .flow-box .card .ttl{
        font-size: 16px;
        text-align: center;
    }
    .feature-blocks {
        width: 100%;
        margin-left: 0;
    }
    .feature-blocks .block{
        width: 100%;
        padding: 0 0 40px;
    }
    .feature-blocks .block img{
        width: 60%;
    }
    .feature-blocks .block .ttl{
        font-size: 16px;
        text-align: center;
    }

    .q-and-a .cards .upper-conts::before, .q-and-a .cards .upper-conts::after{
        right: 20px;
    }
    .q-and-a .cards .upper-conts{
        font-size: 16px;
        line-height: 1.5;
        padding: 20px;
        padding-right: 60px;
    }
    .q-and-a .lower-conts{
        padding: 20px;
    }
    a[target="_blank"].btn, .btn{
        font-size: 18px;
        padding: 10px 30px;
    }
    .footer-zone .l-ft{
        margin-bottom: 30px;
    }
    .footer-zone .r-ft{
        margin-left: 0;
    }
    .footer-zone .r-ft ul{
        display: block;
    }
    .footer-zone .r-ft ul li{
        padding-left: 0;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 860px){
    body {
        padding: 0 0;
    }
}