@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 769px) {

.hed_img { background: url("../images/gallery/gallery_img02.png") center center no-repeat; background-size: cover; height: 600px; } 

.hed_img_voice { display: none; }




#contents { overflow: visible!important; }
/*---------------------------*/

#box01 { margin-bottom: 100px; overflow: visible; position: relative; }
/*#box01::before { position: absolute; content: ""; width: 1000px; height: 323px;  background: url("../images/about/bg_img01.png"); background-repeat: no-repeat; background-size: 100%; content: ""; display: block; right: -50px; bottom: -150px; opacity: 0.2; overflow: visible; }*/

#box02 { margin-bottom: 100px; position: relative; }
/*#box02::before { position: absolute; width: 100%; height: 500px; content: ""; display: block; background: url("../images/product/package/bg_img01.jpg") top center; background-size: cover; background-repeat: no-repeat; top: 0; }
.box02_in { position: relative; z-index: 10; background: #fff; width: 1300px; margin: 0 auto; padding-top: 100px; }*/


.main_txt_c { text-align: center; }

.box01_in { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; }
.box01_in_txtbox { width: 48%; }
.box01_in_imgbox { width: 48%; }
.box01_in_img { width: 100%; margin: 0 auto; }
.box01_in_img img { width: 100%; height: auto; }

.op_list { width: 100%; margin: 0 auto;  display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 30px;  }
.op_list li { width: 23.5%; margin-right: 2%; }
.op_list li:nth-child(4n+4) { margin-right: 0px; }
.op_list_img { width: 100%; margin: 0 auto 15px;}
.op_list_img img { width: 100%; height: auto; }

#box02 .main_tit { text-align: center; }
#box02 .main_txt { text-align: center; margin-bottom: 50px; }

.box02_txt { text-align: left; }
.box02_txt span { font-size: 18px; font-weight: bold; color: #074ca2; display: block; margin-bottom: 10px;  }

/*-------------運転能力評価サポートソフト--------------*/

.box02_box_titbox { margin-bottom: 50px; margin-top: 50px; }
.box02_box_titbox_tit { text-align: center; margin-bottom: 30px; }
.box02_box_titbox_tit span { border: 1px solid #074ca2; font-size: 18px; font-weight: bold; padding: 5px 15px;}
.box02_box_titbox_txt { text-align: center; }

.box02_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 50px; }
.box02_box_imgbox { width: 48%; }
.box02_box_txtbox { width: 48%; }

.box02_box_txtbox_txt { line-height: 1.8em; margin-bottom: 30px;  text-align: left; }
.box02_box_txtbox_point_tit { font-size: 16px; font-weight: bold; margin-bottom: 15px; }
.box02_box_txtbox_point_txt i { color:  #074ca2; font-size: 20px; padding-right: 5px; }
.box02_box_txtbox_sub { margin-bottom: 15px; }
.box02_box_txtbox_sub span { border: 1px solid #074ca2; padding: 3px 7px; margin-right: 10px; }
.box02_box_txtbox_sub_arrow { font-size: 20px; margin-bottom: 15px; color: #074ca2; }

.car_conatct { width: 100%; margin: 0 auto; }
.car_conatct a { display: block; padding: 30px; background: #518de1; color: #fff; text-align: center; position: relative; }
.car_conatct a::before { position: absolute; font-family: "Font Awesome 5 Free"; content: "\f054"; display: block; right: 40px; font-size: 14px; font-weight: bold; color: #fff; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.car_conatct a:hover::before { right: 30px; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }

#box03 .box02_box { margin-bottom: 0px; }



/*-----------------CRMソリューションサービス---------------------------*/

.crm_box01 { margin-bottom: 50px; }

.crm_txt2 { margin-bottom: 50px; }


/*-----------プロダクト-----------*/

.soft_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.soft_list li { flex-basis: 48%; max-width: 48%; }
.soft_list_tit { padding: 3px 10px; border: 1px solid #074ca2; text-align: center; font-weight: bold; margin-bottom: 10px; }
.soft_list_txt { text-align: left; }
.soft_list li:nth-child(n+3) { margin-top: 30px; }


.flow_list { width: 100%; margin: 0 auto; }
.flow_list li { padding: 50px; box-sizing: border-box; border: 1px solid #e8e8e8; position: relative;  background: #fff; }
.flow_list li::after { content: ""; width: 100%; height: 100%; position: absolute; right: -15px; bottom: -15px; display: block; z-index: -10; background: #518de1;  }
.flow_list li::before { position: absolute; bottom: -55px; left: 0; right: 0; font-family: "Font Awesome 5 Free"; content: "\f078"; font-size: 30px; font-weight: bold; display: block; margin: auto; text-align: center; color: #518de1; }
.flow_list li:nth-last-of-type(1)::before { display: none; }
.flow_list li:nth-child(n+2) { margin-top: 65px; }
.flow_list_imgbox { width: 25%; margin: 0 auto; }
.flow_list_img { width: 100%; margin: 0 auto; }
.flow_list_img img { width: 100%; height: auto; }
.flow_list_txtbox { width: 100%; }
.flow_list_txt { line-height: 1.8em; }

.flow_list_tit {
position: relative;
margin-bottom: 30px;
}

.flow_list_tit span.no {
position: absolute;
left: 0;
top: 0;
font-size: 3.6rem;
letter-spacing: 0.1em;
color: #518de1;
font-weight: bold;
}

.flow_list_tit span.no:after {
content: "";
display: block;
position: absolute;
left: 60px;
top: 10px;
background-color: #000;
-webkit-transform: skewX(-40deg);
transform: skewX(-40deg);
height: 43px;
width: 1px;
}

.title_wrap {
padding-top: 18px;
padding-left: 80px;
}

.title {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 20px;
letter-spacing: 0.05em;
}

.flow_list_subbox { margin-top: 30px; }
.flow_list_subbox_tit { font-size: 16px; color: #518de1; font-weight: bold; }
ol.flow_list_subbox_list { margin-top: 15px; }
ol.flow_list_subbox_list li:nth-child(n+2) { margin-top: 15px;  }
ol.flow_list_subbox_list li {  padding: 0px; border: 0px; }
.flow_list_subbox_list_tit { font-weight: bold; margin-bottom: 5px; }
.flow_list_subbox_list_img { margin-top: 15px; text-align: center; }
.flow_list_subbox_list_img span { display: block; color: #df5b36; border: 1px solid #df5b36; margin-top: 10px; text-align: left; padding: 10px;  }



#box000 { margin-top: 70px; }
#box000 .title_wrap { padding: 0px; }

#box000 .flow_list li::before { display: none; }

.lineup { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.lineup li { flex-basis: 48%; max-width: 48%; }
.lineup li:nth-child(n+3) { margin-top: 50px; }
.lineup_tit { font-size: 16px; font-weight: bold; text-align: center; color: #518de1; margin-bottom: 15px; }
.lineup_img { width: 100%; margin: 0 auto; }
.lineup_img img { width: 100%; height: auto; }

#box0000 { margin-top: 70px; }

.lineup_txtbox { margin-top: 15px;  display: flex; flex-wrap: wrap; padding: 15px; box-sizing: border-box; border: 1px solid #518de1; align-items: center; margin-bottom: 30px; }
.lineup_icon {  width: 40px; height: 40px; border-radius: 40px; background: #518de1; color: #fff; text-align: center; line-height: 40px; margin-right: 10px; }
.lineup_icon i { font-size: 16px; }
.lineup_txt { flex-basis:  calc(100% - 50px); max-width: calc(100% - 50px);}


.lineup:nth-child(n+2) { margin-top: 50px; }

.v_imgbox { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 15px; }
.v_img { flex-basis: 200px; max-width: 200px; margin-right: 30px; }
.v_img img { width: 100%; height: auto; }
.v_imgtxtbox { }
.v_imgtxtbox_tit { margin-bottom: 10px; }
.v_imgtxtbox_tit span { border: 1px solid #000; padding: 2px 7px; border-radius: 5px;  }
.v_imgtxtbox_txt { line-height: 1.5em; }



/*----------導入事例下層-------------*/

.detail_profile_box_waku { border: 5px solid #074ca2; padding: 30px; }
.detail_profile_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.detail_profile_txtbox { width: 55%; }
.detail_profile_imgbox { width: 40%; }
.detail_profile_img { width: 100%; margin: 0 auto; }
.detail_profile_img img { width: 100%; height: auto; }

.solution_name { margin-bottom: 15px; }
.solution_name span { padding: 3px 10px; background: #074ca2; color: #fff; }
.profile_company_box { margin-bottom: 30px; }
.profile_tit { font-weight: bold; font-size: 18px; margin-bottom: 15px; }
.profile_company { margin-bottom: 10px; }
.profile_company span { color: #074ca2; padding-right: 5px; font-weight: bold; }

.request_box { width: 100%; margin: 0 auto; }
.request_box dl { width: 100%; margin: 0 auto; }
.request_box dl dt { font-weight: bold; margin-bottom: 10px; border-left: 3px solid #074ca2; padding-left: 15px; font-size: 16px;  }
.request_box dl dd { text-align: left; }
.request_box dl:nth-child(n+2) { margin-top: 30px; }

#d_box01 { margin-bottom: 100px; }

.detail_txtbox { margin-bottom: 50px; }

    /* 2024/04/27 金澤追加 */
    .hed_img {
        /* ↓このURLを変えればヘッダ画像変更できます。 */
        background: url("../images/gallery/gallery2.png") right center no-repeat;
        background-size: cover;
        height: 100%!important;
    }
    .com_hed_box2 {
        background-color: transparent;
    }
}
/* 2024/04/27 金澤追加 */
/* パンくずリストを黒文字に変更 */
#pan_area * {
    color: #333!important;
}
#pan_area .pan_list::before {
    border-top: 1px solid #333!important;
    border-right: 1px solid #333!important;
}





/*----------------------------------------------------*/




/*sp*/
@media only screen and (max-width: 768px) {


.hed_img { background: url("../images/gallery/gallery2.png") center center no-repeat; background-size: cover; height: 200px; }

.box02_txt { text-align: left; }
.box02_txt span { font-size: 16px; font-weight: bold; color: #074ca2; display: block; margin-bottom: 10px;  }
#box01 { margin-bottom: 70px; overflow: visible; position: relative; }
/*#box01::before { position: absolute; content: ""; width: 700px; height: 226px;  background: url("../images/about/bg_img01.png"); background-repeat: no-repeat; background-size: 100%; content: ""; display: block; right: -200px; bottom: -100px; opacity: 0.2; overflow: visible; }*/

#box02 { margin-bottom: 70px; padding: 70px 0px; background: #eff2f5; }
.box02_img { width: 100%; margin: 0 auto; margin-top: 30px; }
.box02_img img { width: 100%; height: auto; }
.box02_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; position: relative; }
/*.box02_list::before { position: absolute; height: 2px; width: 80%; left: 0; right: 0; margin: auto; top: 47%; content: ""; display: block; background: linear-gradient(to right,#5194e8,#074ca2); z-index: 1; }*/
.box02_list li { width: 48%; box-sizing: border-box; background: #fff; padding: 30px; position: relative; z-index: 10; }
.box02_list li:nth-child(n+3) { margin-top: 30px; }
.box02_list_tit { font-size: 16px; text-align: center; font-weight: 500; margin-bottom: 15px; color: #074ca2; }
.box02_list_tit span.en { font-size: 10px; display: block; }
.box02_list_txt { font-size: 12px; display: block; text-align: center; }


.box03_list { width: 100%; margin: 30px auto 0px; display: flex; flex-wrap: wrap; justify-content: center; }
.box03_list li { width: 32%; padding:50px 30px; box-sizing: border-box; background: #518de1; }
.box03_list li:nth-child(n+4) { margin-top: 30px; }
.box03_list_tit { font-size: 14px; text-align: center; font-weight: 500; color: #fff; }
.box03_list_tit span.en { font-size: 10px; display: block; }

#box02 .main_tit { text-align: center; }
#box02 .main_txt { text-align: center; margin-bottom: 50px; }
.main_txt_c { text-align: center; }

.box01_in { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; }
.box01_in_txtbox { width: 100%; margin: 0 auto 30px; }
.box01_in_imgbox { width: 100%; margin: 0 auto 50px; }
.box01_in_img { width: 100%; margin: 0 auto; }
.box01_in_img img { width: 100%; height: auto; }

/*-------------運転能力評価サポートソフト--------------*/

.box02_box_titbox { margin-bottom: 50px; margin-top: 50px; }
.box02_box_titbox_tit { text-align: center; margin-bottom: 30px; }
.box02_box_titbox_tit span { border: 1px solid #074ca2; font-size: 14px; font-weight: bold; padding: 5px 15px;}
.box02_box_titbox_txt { text-align: center; }

.box02_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 50px; }
.box02_box_imgbox { width: 100%; margin: 0 auto 30px; }
.box02_box_txtbox { width: 100%; }

.box02_box_txtbox_txt { line-height: 1.8em; margin-bottom: 30px;  text-align: left; }
.box02_box_txtbox_point_tit { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.box02_box_txtbox_point_tit i { color:  #074ca2; font-size: 20px; padding-right: 5px; }
.box02_box_txtbox_sub { margin-bottom: 15px; }
.box02_box_txtbox_sub span { border: 1px solid #074ca2; padding: 3px 7px; margin-right: 10px; }
.box02_box_txtbox_sub_arrow { font-size: 20px; margin-bottom: 15px; color: #074ca2; }

.car_conatct { width: 100%; margin: 0 auto; }
.car_conatct a { display: block; padding: 30px; background: #518de1; color: #fff; text-align: center; position: relative; }
.car_conatct a::before { position: absolute; font-family: "Font Awesome 5 Free"; content: "\f054"; display: block; right: 40px; font-size: 14px; font-weight: bold; color: #fff; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.car_conatct a:hover::before { right: 30px; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }

#box03 .box02_box { margin-bottom: 0px; }


/*-------------プロダクト-----------*/

.soft_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; }
.soft_list li { width: 100%; margin: 0 auto; }
.soft_list_tit { padding: 3px 10px; border: 1px solid #074ca2; text-align: center; font-weight: bold; margin-bottom: 10px; }
.soft_list_txt { text-align: left; }
.soft_list li:nth-child(n+2) { margin-top: 30px; }

.o_img { width: 90%; margin: 0 auto; margin-top: 30px;  }
.o_img img { width: 100%; height: auto; }

.flow_list { width: 100%; margin: 0 auto; }
.flow_list li { padding: 30px;  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; box-sizing: border-box; border: 1px solid #e8e8e8; position: relative;  background: #fff; }
.flow_list li::after { content: ""; width: 100%; height: 100%; position: absolute; right: -15px; bottom: -15px; display: block; z-index: -10; background: #518de1;  }
.flow_list li::before { position: absolute; bottom: -55px; left: 0; right: 0; font-family: "Font Awesome 5 Free"; content: "\f078"; font-size: 30px; font-weight: bold; display: block; margin: auto; text-align: center; color: #518de1; }
.flow_list li:nth-last-of-type(1)::before { display: none; }
.flow_list li:nth-child(n+2) { margin-top: 65px; }
.flow_list_imgbox { width: 100%; margin: 0 auto; }
.flow_list_img { width: 80%; margin: 0 auto; }
.flow_list_img img { width: 100%; height: auto; }
.flow_list_txtbox { width: 100%; margin: 0 auto 15px; }
.flow_list_txt { line-height: 1.8em; }

.flow_list_tit {
position: relative;
margin-bottom: 30px;
}

.flow_list_tit span.no {
position: absolute;
left: 0;
top: 0;
font-size: 3rem;
letter-spacing: 0.1em;
color: #518de1;
font-weight: bold;
}

.flow_list_tit span.no:after {
content: "";
display: block;
position: absolute;
left: 50px;
top: 10px;
background-color: #000;
-webkit-transform: skewX(-40deg);
transform: skewX(-40deg);
height: 43px;
width: 1px;
}

.title_wrap {
padding-top: 18px;
padding-left: 80px;
}

.title {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 18px;
letter-spacing: 0.05em;
}



.flow_list_subbox { margin-top: 30px; }
.flow_list_subbox_tit { font-size: 16px; color: #518de1; font-weight: bold; }
ol.flow_list_subbox_list { margin-top: 15px; }
ol.flow_list_subbox_list li:nth-child(n+2) { margin-top: 15px;  }
ol.flow_list_subbox_list li {  padding: 0px; border: 0px; }
.flow_list_subbox_list_tit { font-weight: bold; margin-bottom: 5px; }
.flow_list_subbox_list_img { margin-top: 15px; text-align: center; }
.flow_list_subbox_list_img span { display: block; color: #df5b36; border: 1px solid #df5b36; margin-top: 10px; text-align: left; padding: 10px;  }



#box000 { margin-top: 70px; }
#box000 .title_wrap { padding: 0px; }

#box000 .flow_list li::before { display: none; }

.lineup { width: 100%; margin: 0 auto; }
.lineup li { width: 100%; margin: 0 auto; }
.lineup li:nth-child(n+2) { margin-top: 50px; }
.lineup_tit { font-size: 16px; font-weight: bold; text-align: center; color: #518de1; margin-bottom: 15px; }
.lineup_img { width: 100%; margin: 0 auto; }
.lineup_img img { width: 100%; height: auto; }

#box0000 { margin-top: 70px; }

.lineup_txtbox { margin-top: 15px;  display: flex; flex-wrap: wrap; padding: 15px; box-sizing: border-box; border: 1px solid #518de1; align-items: center; margin-bottom: 15px;  }
.lineup_icon {  width: 40px; height: 40px; border-radius: 40px; background: #518de1; color: #fff; text-align: center; line-height: 40px; margin-right: 10px; }
.lineup_icon i { font-size: 16px; }
.lineup_txt { flex-basis:  calc(100% - 50px); max-width: calc(100% - 50px);}


.lineup:nth-child(n+2) { margin-top: 50px; }


.v_imgbox { width: 100%; margin: 0 auto; margin-top: 15px; }
.v_img { width: 60%; margin: 0 auto 10px; }
.v_img img { width: 100%; height: auto; }
.v_imgtxtbox { }
.v_imgtxtbox_tit { margin-bottom: 10px; text-align: center; }
.v_imgtxtbox_tit span { border: 1px solid #000; padding: 2px 7px; border-radius: 5px;  }
.v_imgtxtbox_txt { line-height: 1.5em; }



/*----------導入事例下層-------------*/

.detail_profile_box_waku { border: 3px solid #074ca2; padding: 15px; }
.detail_profile_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.detail_profile_txtbox { width: 100%; margin: 0 auto 30px}
.detail_profile_imgbox { width: 100%; }
.detail_profile_img { width: 100%; margin: 0 auto; }
.detail_profile_img img { width: 100%; height: auto; }

.solution_name { margin-bottom: 15px; }
.solution_name span { padding: 3px 10px; background: #074ca2; color: #fff; }
.profile_company_box { margin-bottom: 30px; }
.profile_tit { font-weight: bold; font-size: 18px; margin-bottom: 15px; }
.profile_company { margin-bottom: 10px; }
.profile_company span { color: #074ca2; padding-right: 5px; font-weight: bold; }

.request_box { width: 100%; margin: 0 auto; }
.request_box dl { width: 100%; margin: 0 auto; }
.request_box dl dt { font-weight: bold; margin-bottom: 10px; border-left: 3px solid #074ca2; padding-left: 15px; font-size: 16px;  }
.request_box dl dd { text-align: left; }
.request_box dl:nth-child(n+2) { margin-top: 30px; }

#d_box01 { margin-bottom: 70px; }

.detail_txtbox { margin-bottom: 50px; }



.boxbefore {
    margin-left: 20vw!important;
}
.boxbefore::before {
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    right: 80%;
    top: -50px;
    opacity: 0.50;
    overflow: visible;
    z-index: -1;

}

/*--パンくず---------*/
#pan_area2 {
display: none;
width: 100%;
font-size: 10px;
padding-top: 10px;
}
#pan_area h3 {
font-size: 10px;
font-weight: 500;
}
#pan_area #pan_area_in {
width: 100%;
margin: 0 auto 15px;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: flex-end;
}
#pan_area #pan_area_in .pan_list {
padding-right: 16px;
margin-right: 10px;
position: relative;
}
#pan_area #pan_area_in .pan_list::before {
position: absolute;
content: "";
right: 0;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-top: 1px solid #303030;
border-right: 1px solid #303030;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#pan_area #pan_area_in .pan_list:last-child {
padding-right: 0;
margin-right: 0;
}
#pan_area #pan_area_in .pan_list:last-child::before {
display: none;
}
#pan_area #pan_area_in .pan_list a {
text-decoration: underline;
/*text-shadow:1px 1px 0 #FFF, -1px -1px 0 #333,
              -1px 1px 0 #FFF, 1px -1px 0 #333,
              0px 1px 0 #FFF,  0-1px 0 #333,
              -1px 0 0 #FFF, 1px 0 0 #333;*/
}

@media print, screen and (min-width: 769px) {
    .hed_img {
        background: url("../images/gallery/gallery2.png") right center no-repeat;
        background-size: cover;
        height: 600px;
    }
}