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

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

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

.hed_img_voice { display: none; }

.com_hed_box2 .com_hed_txtbox_blue { 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: 25px; }

.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; }
.box02_box_txtbox_point_tit { font-size: 16px; 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: 0px; 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; 
background-image: url("../images/product/package/saim01.png");
height: 20rem;
top: -70%;
width: 17rem;
background-size: contain;
background-repeat: no-repeat;
content: ''!important;
}
.car_conatct a:hover::before { right: -10px; -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; 
background-image: url("../images/product/package/saim02.png");}

#box03 .box02_box { margin-bottom: 0px; }
.saim { position: relative; }
.profile { 
    position: absolute;
    width: 75px;
    height: 25px;
    top: 185px;
    right: 17.5%; 
}
.profile:hover .balloon {
    display: inline;
}
.balloon {
    position: absolute;                
    display: none;                        
    padding: 10px 10px;                         
    background-color: rgba(81, 140, 224, 1);
    width:275px;                          
    left: 80px;
    top: -170px;                 
    font-size: 14px;
    color: rgba(81, 140, 224, 1);
    font-weight:bold;
    animation: balloonAnime 0.5s linear;
    border-radius: 5px;
}
.balloon_item {
    color: #074cb4;
}
.balloon_div_w{
    margin-top: 5px;
    padding: 3px 5px;
    background-color: #ffffff;
    border-radius: 5px;
    line-height: 1.5em;
    width: 265px;
}
.balloon_smallfont {
    font-size: 13px;
    color: #074cb4;
    font-weight:bold;
}
.balloon:after{
    border-right: 12px solid rgba(81, 140, 224, 1);
    border-top: 10px solid transparent;     
    border-bottom: 10px solid transparent;  
    left: -10px;                            
    top: 55.5%;                               
    content: ""; 
    position: absolute; 
}
@keyframes balloonAnime{
    100%{ color : white; background:rgba(81, 140, 224, 1) }
     50%{ color : white; background:rgba(81, 140, 224, 0.50)}
      0%{ color : white; background:white   }
}
.saim_img00 { margin-right: 17.5%; }
.imgR { text-align: right; }
.box02_img04 { width: 350px; }
.margin { height: 50px; }

/*-----------------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; }


}




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




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


.hed_img { background: url("../images/product/hed_img.jpg") 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; }
.balloon { display: none; }

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

.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; }
.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; }














}