@charset "utf-8";

/*プロ詳細
--------------------------------------*/
/*no-img*/
.no-img{
    border: 1px solid #CCCCCC;
}

.note-chip{
    width: 100%;
    font-size: 0.8em;
    text-align: right;
    margin: 0 0 5px 0;
}

/*バリュー*/
.value-list{
    margin: 0 0 40px 0;
}
.value-list dt{
    font-weight: bold;
    margin: 0 0 5px 0;
}
.value-list dd{
    margin: 0 0 20px 0;
    line-height: 1.5;
    font-size: 0.9em;
}
.value-link{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0 0 40px -1%;
}
.value-link li{
    width: 24%;
    margin: 0 0 1% 1%;
}
.value-link li a{
    display: block;
    text-align: center;
    text-decoration: none;
    color: #323333;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    padding: 5px;
    position: relative;
}
.value-link li a::after{
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: solid 1px #323333;  /* 好みで色を変えてください */ 
    border-right: solid 1px #323333;   /* 好みで色を変えてください */  
    transform: rotate(135deg);
    position: absolute;
    top: calc( 50% - 2px );
    right: 15px;
}
.value-link li a:hover{
    opacity: 0.8;
}
@media screen and (max-width: 900px) {
    .value-link li{
        width: 32%;
    }    
}
@media screen and (max-width: 500px) {
    .value-link li{
        width: 49%;
    }  
}
/*経歴*/
.history-wrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 30px -3%;
}
.history-wrap__yeararea{
    width: 20%;
    margin: 0 0 0 3%;
}
.history__year{
    text-align: center;  
}
.history__year--num{
    font-size: 2em; 
}
.history-wrap__detail{
    width: 77%;
    margin: 0 0 0 3%; 
    font-size: 0.9em;
    background: #f7f5f5;
    border-radius: 5px;
    padding: 20px;       
}
.history__title{
    font-weight: bold;
    margin: 0 0 0 0;
}
.history__now{
    font-size: 0.8em;
    margin: 0 0 0 20px;
}
.history__sabtitle{
    margin: 0 0 10px 0;
}
.history__txt{
}
/*料金プラン*/
.price-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 0 0 -3%;
}
.price-item{
    width: 47%;
    margin: 0 0 30px 3%;
}
@media screen and (max-width: 900px) {
    .price-wrap{
        margin: 0 0 0 0;
    }
    .price-item{
        width: 100%;
        margin: 0 0 30px 0;
    }    
}
.price-item__title{
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0 0;
}
.price-item__pricewrap{
    text-align: center;
    text-align: center;
    border-bottom: 1px solid #CCCCCC;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;    
}
.price-item__price{
    font-size: 1.2em;

}
.price-item__pricetag{
    font-size: 0.9em;
}
.price-item__txt{
    font-size: 0.9em;
}
/*お客様の声*/
.voice-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 0 40px -3%;
}
.voice-imgarea{
    max-width: 300px;
    width: 30%;
    margin: 0 2% 0 3%;
}
.voice-imgarea img{
    border-radius: 10px;
}
.voice-txtarea{
    width: 65%;
    margin: 0 0 0 0; 
    font-size: 0.9em;
}
.voice-txtarea__title{
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px 0 0 0; 
}
.voice-txtarea__txt{
    font-size: 0.9em;
}
@media screen and (max-width: 768px) {
    .voice-wrap{
        flex-direction: column;
        margin: 0 0 40px 0;
    }
    .voice-imgarea{
       max-width: none;
       width: 100%;
       text-align: center;
       margin: 0 2% 0 0; 
    }
    .voice-txtarea{
        width: 100%;
    }
}
/*取引企業一例*/
.company-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0 0 0 -20px;
}
.company-wrap li{
    max-width: 300px;
    /*width: 22%;*/
    text-align: center;
    margin: 0 0 20px 20px;    
}
.company-img{
    margin: 0 0 5px 0;  
}
.company-img img{
    border-radius: 10px;
}
.company-name{
    text-align: center;
}
@media screen and (max-width: 768px) {
    .company-wrap li{
        width: 47%;
        text-align: center;
    }
}

/*実績*/
.jisseki-wrap{
    margin: 0 0 40px 0;
}
.jisseki-list{
    margin: 0 0 20px 0;
}
.jisseki-list li.jisseki-item:nth-child(2n){
    background: #f7f5f5;
}
.jisseki-item{
    padding: 10px;
}
.jisseki-title{
    padding: 0 30px 0 0;
    font-weight: bold;
    display: inline-block;
}
.mark{
    background: url(../../images/cmn_img/ninsyo-mark.png) no-repeat right center;
}
.jisseki-detail-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #CCCCCC;
}
.jisseki-detail-list li{
    margin: 0 20px 0 0;
    font-size: 0.9em;
}
.jisseki-detail-txt{
    font-size: 0.9em;
}
.jisseki-note{
    margin: 0 0 0 10px;
    padding: 0 0 0 25px;
    font-size: 0.9em;
    background: url(../../images/cmn_img/ninsyo-mark.png) no-repeat left center;
}
@media screen and (max-width: 900px) {  
    .jisseki-detail-list{
        flex-direction: column;
    }  
}
/*対応業務*/
.work-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0 0 0 -10px;
}
.work-list li{
    padding: 2px 20px 2px 20px;
    border: 1px solid #CCCCCC;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: 5px;
    margin: 0 0 10px 10px;
}
/*契約前後のフロー*/
.flow{}
.flow-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 0 40px -3%;
    position: relative;
}
.flow-wrap::after{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 2px #b39354;
    border-right: solid 2px #b39354;
    transform: rotate(135deg);
    position: absolute;
    left: calc(50% - 3px);
    bottom: -20px;
    margin: auto;
}
/*最後の要素を消す*/
.flow-wrap:last-of-type::after {
    content:none;
}
.flow-imgarea{
    max-width: 200px;
    width: 25%;
    margin: 0 2% 0 3%;
}

.flow-imgarea img{
    border-radius: 10px;
}
.flow-txtarea{
    width: 70%;
    margin: 0 0 0 0; 
    font-size: 0.9em;
}
.flow-txtarea__title{
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px 0 0 0;
    padding: 0 0 0 5px; 
}
.flow-txtarea__title::before{
    content: attr(data-step)"";
    padding: 0 10px 0 0;
    font-size: 0.8em;
    color: #b39354;
}
.flow-txtarea__txt{
    font-size: 0.9em;
}
@media screen and (max-width: 768px) {
    .flow-wrap{
        flex-direction: column;
        margin: 0 0 40px 0;
    }
    .flow-imgarea{
        max-width: none;
        width: 100%;
        text-align: center;
        margin: 0 2% 0 0;
    }
    .flow-txtarea{
        width: 100%;
    }
}