/*////////////////////////////////
        共通スタイル
 ////////////////////////////////*/


 /* PC版の際非表示 */
 .clients_pc_none{
    display: none;
 }

  /* SP版の際非表示 */
 .clients_sp_none{
    display: block;
 }

 /* 幅　*/

 .clients_wrapper_1,
 .clients_main_visual,
 .clients_visual_item_pc{
    width: 116rem;
}

.clients_wrapper_1,
.clients_wrapper_2,
.clients_wrapper_box_1,
.clients_wrapper_box_2,
.clients_main_title,
.clients_title_box,
.clients_arrow{
    margin:0 auto;
}

 /* フレックス */
.clients_list_flex,.clients_box_flex{
    display: flex;
}

/*ーーーー フォントファミリー ーーーー*/
/* Zen Maru Gothic */
.clients_visual_item_text,
.clients_main_title,
.clients_title,
.clients_list_dt_text,
.clients_list_dd_text{
  font-family: "Zen Maru Gothic", sans-serif;
}

/* Noto Sans CJK JP */
.clients_sub_title,
.clients_text_item{
    font-family: "Noto Sans JP", sans-serif;
}


/*ーーーーー グラデーション ーーーーー*/
.clients_visual_item_text,
.clients_main_title,
.clients_button{
  background: linear-gradient(90deg,rgb(63, 188, 214) ,rgb(81, 207, 162) );
}   

/* タイトル */
.clients_title{
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height:1.4 ;
    color:#000000 ;
    border-bottom:0.2rem#3FBCD6 solid;
    /* レイアウト */
    padding-bottom: 2rem;
    text-align: center;
}
/*////////////////////////////////
            ラッパー 
 ////////////////////////////////*/
.clients_wrapper_1{
    padding-bottom: 5.5rem;
}

.clients_wrapper_2{
    width: 99.7rem;
    padding-bottom: 15.8rem;
}

.clients_wrapper_box_1,.clients_wrapper_box_2{
    width: 95rem;
}

.clients_wrapper_box_1{
    padding-top: 2.4rem;
    padding-left: 0.6rem;
}

.clients_wrapper_box_2{
   padding-top: 4rem;
}
/*////////////////////////////////
        メインビジュアル
 ////////////////////////////////*/

/* レイアウト */
.clients_main_visual{
    position: relative;
}

/* 画像 */

.clients_visual_item_pc,
.clients_visual_item_sp{
    height: 33.5rem;
    object-position: 50% 30%;
}

.clients_visual_item_pc{
    display: block;
}

.clients_visual_item_sp{
    display: none;
}

/* テキスト */
.clients_visual_item_text{
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.4;
    color: #FFFFFF;
    /* レイアウト */
    padding:3.1rem 3.2rem 2.9rem;
    position: absolute;
    bottom: 0;
}


/* ////////////////////////////////
    お仕事のご依頼したい方
     タイトルボックス
//////////////////////////////// */
.clients_title_box{
    width: 78.6rem;
    padding-bottom: 10.1rem;
}

.clients_main_title{
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height:1.7 ;
    color:#FFFFFF ;
    text-align: center;
    /* レイアウト */
    padding: 1rem 3.3rem;
    width:fit-content ;
}

.clients_sub_title{
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height:1.3;
    color:#008783 ;
    text-align: center;
    /* レイアウト */
    padding-top: 2.8rem;
}

/* ////////////////////////////////
    お仕事のご依頼
//////////////////////////////// */
.clients_text_item{
    width: 95rem;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height:2.2 ;
    color:#000000;
     /* レイアウト */
    padding-bottom: 3.4rem;
    
}

.clients_text_item span{
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.062em;
    line-height:2.2 ;
    color:#000000;    
}

/*---- リスト -----*/
.clients_list_layout_box{
    padding:0 0 2rem ;
}

 /* フレックス */
.clients_list_flex{
    display: flex;
    align-items: center;
    gap: 8rem;
    padding-bottom: 2.6rem;
}
/* テキスト */
.clients_list_dt_text{
    width: 26.8rem;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height:1.4 ;
    color:#FFFFFF ;
    padding:0.1rem 3.3rem 0.1rem 3.2rem;
    background-color: #3FBCD6;
    text-align: center;
}

.clients_list_dd_text{
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: #4A4A4A;
    letter-spacing: 0.03em;

}

/* ボタン */
.clients_button{
    display: block;
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: #FFFFFF;
    width: fit-content;
    padding: 1.2rem 6.3rem;
    margin-left: auto;
}

.clients_space{
    padding-bottom: 10rem;
}

.clients_li_wid{
    margin-left: 0.6rem;
    width: 94.6rem;
}

.clients_box_flex{
    border: #0CBFBA 0.2rem solid;
    border-radius: 1rem;
    align-items: center;
    padding:0.9rem 5.3rem 1.3rem 4.8rem;
    gap: 3.2rem;
}

.clients_box_number_text{
    font-size: 5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color:#0CBFBA ;
    padding-right: 1.2rem;
    padding-bottom: 1.2rem;
}

.clients_box_text{
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height:1.7 ;
    color:#000000 ;
}
/* 画像 */
.clients_box_img{
    width:16.933rem ;
    height:12.7rem ;
}
/* 矢印 */
.clients_arrow{
    width: 0;
    height: 0;
    border-top: 3.9rem solid rgb(12, 191, 186);
    border-right: 4rem solid transparent;
    border-bottom: 0;
    border-left: 4rem solid transparent;
    margin:2rem auto 2.2rem;
    display: block;
}

@media screen and (max-width: 699.98px){

    
    /* SP版の際非表示 */
    .clients_sp_none,
    .clients_sp_none_2{
        display: none;
    }

    /* SP版の際表示 */
    .clients_pc_none{
        display: block;
     }

    /*////////////////////////////////
        共通スタイルSP 及びラッパー
    ////////////////////////////////*/

    /* 幅　*/

    .clients_wrapper_1,
    .clients_main_visual{
        width: 100%;
    }
    .clients_wrapper_2,
    .clients_wrapper_box_1,
    .clients_wrapper_box_2,
    .clients_li_wid{
        width: 35.5rem;
    }

    .clients_wrapper_box_2{
        padding-top: 2.4rem;
    }

    .clients_wrapper_1{
        padding-bottom: 6.1rem;

    }

    .clients_wrapper_2{
         padding-bottom: 8.1rem;
    }

    .clients_wrapper_box_1{
        padding-top: 1.8rem;
        padding-left: 0;
    }
    /* タイトル */
    .clients_title{
    font-size: 1.8rem;
    /* レイアウト */
    padding-bottom: 1.2rem;
    }

    .clients_list_flex{
     flex-flow: column;   
    }
    /*////////////////////////////////
        メインビジュアルSP版
    ////////////////////////////////*/

    .clients_visual_item_pc{
        display: none;
    }

    .clients_visual_item_sp{
        display: block;
        height:33.5rem ;
    }


    /* テキスト */
    .clients_visual_item_text{
        font-size: 1.8rem;
        letter-spacing: 0.03em;
        padding: 2rem 2.4rem 1.5rem;
        line-height:1.5 ;
    }

    /* ////////////////////////////////
        お仕事のご依頼したい方
        タイトルボックス
    //////////////////////////////// */
    .clients_title_box{
        width: 30.6rem;
        padding-bottom: 6rem;
    }

    .clients_main_title{
        font-size: 2rem;
        text-align: left;
    }

    .clients_sub_title{
        font-size: 1.8rem;
        line-height: 1.8;
        /* レイアウト */
        padding-top: 2.1rem;
    }

    /* ////////////////////////////////
        お仕事のご依頼
    //////////////////////////////// */
    .clients_text_item{
        width: 100%;
        font-size: 1.4rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height:2.2 ;
        color:#000000;
        /* レイアウト */
        padding:0 0 2.8rem;
    }

    .clients_text_item span{
        font-size: 1.3rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        line-height: 2.5;
        color: #000000;
    }

    /* フレックス */
    .clients_list_flex{
        gap: 1rem;
        padding-bottom: 3.4rem;
    }

    /*---- リスト -----*/
    .clients_list_layout_box{
        padding:0 0 1.6rem ;
    }

    /* テキスト */
    .clients_list_dt_text{
        font-size: 1.5rem;
        padding: 0.3rem 4.1rem 0.3rem 4.5rem;
        margin-right: 0.6rem;
    }

    .clients_list_dd_text{
        font-size: 1.8rem;
    }

    /* ボタン */
    .clients_button{
        font-size: 1.6rem;
        padding: 1.8rem 4rem 1.8rem 3.9rem;
        margin-left: 0;
        margin: 0 auto;
    }

    .clients_space{
        padding-bottom: 8rem;
    }

    .clients_li_wid{
        margin-left: 0;
    }

    .clients_box_flex{
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 1.8rem 2rem 1.6rem 1.8rem;
        gap: 1.2rem 3.2rem;
    }

    .clients_box_number_text{
        font-size: 3.5rem;
        padding-right: 5.6rem;
    }

    .clients_box_text{
        font-size: 1.4rem;
        line-height: 1.9;
    }

    .clients_box_img{
        width:10rem ;
        height:7.5rem ;
    }

    /* 矢印 */
    .clients_arrow{
        border-top: 3.1rem solid rgb(12, 191, 186);
        border-right: 3rem solid transparent;
        border-left: 3rem solid transparent;
        margin: 2.031rem auto 2.2rem;
        display: block;
    }
}