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

/*PC*/
@media print, screen and (min-width: 769px) {
.hed_img { background: url("../images/operation/hed_img.jpg") center center no-repeat; background-size: cover; height: 600px; } 
#contents { overflow: visible!important; }
/*---------------------------*/

#box01 { margin-bottom: 100px; overflow: visible; position: relative; }
#box01::before { position: absolute; content: ""; width: 1000px; height: 727px;  background: url("../images/operation/bg_img01.png"); background-repeat: no-repeat; background-size: 100%; content: ""; display: block; right: -150px; top: -50px; opacity: 0.15; overflow: visible; z-index: -1;  }
#box01 .main_txt { margin-bottom: 50px; }
.box01_box { margin: 0 auto 50px; }

#box02 { margin-bottom: 100px; padding: 100px 0px; background: #eff2f5; }
#box02 .main_txt { margin-bottom: 50px; }


.box02_img { width: 700px; margin: 0 auto; margin-top: 50px; }
.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: 50px; 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: 23.5%; box-sizing: border-box; background: #fff; padding: 30px; position: relative; z-index: 10; }
.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 .main_txt { margin-bottom: 50px; }
.box03_list { width: 100%; margin: 50px auto 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.box03_list li { width: 18%; padding:50px 30px; box-sizing: border-box; background: linear-gradient(to right,#5194e8,#074ca2); }
.box03_list_tit { font-size: 14px; text-align: center; font-weight: 500; color: #fff; }
.box03_list_tit span.en { font-size: 10px; display: block; }

/*----------導入事例一覧-------------*/

.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_imgbox { width: 100%; margin: 0 auto 15px; }
.op_list_img { width: 100%; margin: 0 auto;}
.op_list_img img { width: 100%; height: auto; }
.op_list_txtbox { width: 100%; margin: 0 auto; position: relative; }
.op_list_name { font-weight: bold; margin-bottom: 15px; }
.op_list_txt { text-align: left;  }
.op_list_btn { font-weight: bold; font-size: 16px;  color: #074ca2; text-align: right; padding-right: 5px; -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; }
.op_list li a:hover .op_list_btn { padding-right: 0px; -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; }


.photo_hover_wrap img {
width: 100%;
height: auto;
}

.photo_hover_wrap {
display: block;
height: 210px;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
}
.photo_hover_wrap .photo {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.op_list li a:hover .photo_hover_wrap {
text-decoration: none;
cursor: pointer;
}
.op_list li a:hover .photo_hover_wrap .photo {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

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

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


/*------サービスボックス------*/

.box00 { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.box00_txtbox { flex-basis: 65%; max-width: 65%; }
.box00_imgbox { flex-basis: 30%; max-width: 30%; }
.box00_img { width: 100%; margin: 0 auto; }
.box00_img img { width: 100%; height: auto; }
.box00_txt { margin-top: 15px; padding: 10px; border: 1px solid #074ca2; }
.box00_txt span { display: block; font-weight: bold; }
.box01_txtsub { margin-top: 10px; font-size: 12px; color: #999;}


}




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




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

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

#contents { overflow: visible!important; }
#box01 .main_txt { margin-bottom: 50px; }
#box01 { margin-bottom: 70px; overflow: visible; position: relative; }
#box01::before { position: absolute; content: ""; width: 700px; height: 509px;  background: url("../images/operation/bg_img01.png"); background-repeat: no-repeat; background-size: 100%; content: ""; display: block; right: -200px; top: -50px; opacity: 0.1; overflow: visible; }
#box02 .main_txt { margin-bottom: 50px; }
#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 .main_txt { margin-bottom: 50px; }

.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: linear-gradient(to right,#5194e8,#074ca2); }
.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; }

/*----------導入事例一覧-------------*/
.op_list { width: 100%; margin: 0 auto;  display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 30px; position: relative; z-index: 10; }
.op_list li { width: 100%; }
.op_list li:nth-child(n+2) { margin-top: 30px; }
.op_list li:nth-child(4n+4) { margin-right: 0px; }
.op_list_imgbox { width: 100%; margin: 0 auto 15px; }
.op_list_img { width: 100%; margin: 0 auto;}
.op_list_img img { width: 100%; height: auto; }
.op_list_txtbox { width: 100%; margin: 0 auto; position: relative; }
.op_list_name { font-weight: bold; margin-bottom: 15px; }
.op_list_txt { text-align: left;  }
.op_list_btn { font-weight: bold; font-size: 16px;  color: #074ca2; text-align: right; padding-right: 5px; -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; }
.op_list li a:hover .op_list_btn { padding-right: 0px; -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; }


.box01_box { margin: 0 auto 50px; }

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

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

/*------サービスボックス------*/

.box00 { width: 100%; margin: 0 auto;  }
.box00_txtbox { width: 100%; margin: 0 auto; }
.box00_imgbox { width: 100%; margin: 0 auto; margin-bottom: 30px; }
.box00_img { width: 100%; margin: 0 auto; }
.box00_img img { width: 100%; height: auto; }
.box00_txt { margin-top: 15px; padding: 10px; border: 1px solid #074ca2; }
.box00_txt span { display: block; font-weight: bold; }
.box01_txtsub { margin-top: 10px; font-size: 12px; color: #999;}


}