@charset "utf-8";
/* commmon----------------------------------------------------------------*/
.mainvis_main_btn.layout_box2 .link_btn.ico_btn::after{vertical-align: text-bottom; transform: translateY(0px);}
/*都度要望に合わせていろいろと影響がでるので、共通箇所を個別に対応*/

.box{padding-top: 50px; padding-bottom: 50px;}
.mainvis_main_btn{width: 620px; margin: 0 auto;}
/*.mainvis_main_btn .link_btn.cv_btn_color2{background-color: #fff !important; color: #333; border: 2px solid #333;}*/

.cv_box{background-color: #2FAECB; overflow: inherit !important;}
.cv_box .cv_box_img{ margin-top: -130px; text-align: center;}
.cv_box .cv_box_img img{display: inline-block; max-width: 449px}
.cv_box .cv_box_tit{color: #fff;}

@media screen and (max-width: 450px) {
  .mainvis_main_btn{width: auto;}
  .cv_box .cv_box_tit{font-size: 20px !important;}
  .cv_box .cv_box_img{margin-top: -90px;}
  .cv_box .cv_box_img img{width: 60%;}
}


/* contents----------------------------------------------------------------*/
#m_main-vis{text-align: center; height: 670px; display: flex; justify-content: center; align-items: flex-end; text-align: center; position: relative;}
#m_main-vis img{display: inline-block;}
#m_main-vis::before,
#m_main-vis::after{content: ""; width: 352px; background-size: contain; height: 100%; background: no-repeat; position: absolute; z-index: -1; }
#m_main-vis::before{background-image: url("../../images/main_side_l.png"); top: 0; left: 0;background-position: top left;}
#m_main-vis::after{background-image: url("../../images/main_side_r.png"); bottom: 0; right: 0; background-position: bottom right;}
/*#m_main-vis .mainvis_main_btn{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1;}*/

.box1_how{background-color: #F4F4F4;}
.box1_how_box{background-color: #fff; padding: 35px 5%; position: relative; margin-bottom: 80px; min-height: 230px;}
.box1_how_box .box1_how_img{position: absolute; top: 50%; right: 5%; height: 90%; transform: translateY(-50%); display: flex; align-items: center;}
.box1_how_box:nth-child(2n+1) .box1_how_img{right: inherit; left: 5%;}
.box1_how_box .box1_how_img img{max-height: 100%; width: auto;}
.box1_how_box dl dt{ background-color: #55BDE8; width: 130px; color: #fff; padding: 5px 10px; box-sizing: border-box; font-weight: bold; text-align: center; margin: -50px auto 20px auto; font-size: 20px; line-height: 2.0;}
.box1_how_box dl dd {display: flex; justify-content: center; align-items: center; min-height: 150px; flex-flow: column;}
.box1_how_box dl dd > *{text-align: left; font-weight: bold; font-size: 18px;}
.box1_how_box dl dd .round_list > *::before{top: 15px;}

.box1_solution_wrp{padding-top: 50px;}
.box1_solution{padding: 80px 0;}
.box1_solution_main{background-color: #fff; padding: 35px 5% 60px 5%; margin-bottom: 80px; margin-left: calc(50% - 700px); margin-right: calc(50% - 700px);}
.box1_solution_main dl dt{ background-color: #2C64AF; width: 130px; color: #fff; padding: 5px 10px; box-sizing: border-box; font-weight: bold; text-align: center; margin: -50px auto 20px auto; font-size: 20px; line-height: 2.0;}
.box1_solution_main dl dt::before{content: ""; display: inline-block; vertical-align: sub; background: url("../../images/solution_ico.png"); width: 25px; height: 25px; background-size: contain; margin-right: 5px;}
.box1_solution_main dl dd {display: flex; justify-content: center; align-items: center; padding: 0 0 25px 0;}
.box1_solution_main .box1_solution_box{background-color: #EEF9FB; padding: 35px 5%; margin-bottom: 40px;}
.box1_solution_main .box1_solution_box:last-child{margin-bottom: 0;}
.box1_solution_main .box1_solution_box img{display: inline-block;}
.box1_solution_main .box1_solution_box .box1_solution_ico{font-weight: bold; margin-bottom: 20px; text-align: center;}
.box1_solution_main .box1_solution_box .box1_solution_ico i{vertical-align: middle; display: inline-block; margin-right: 5px;}
.box1_solution_main .box1_solution_box .box1_solution_in_tit{background-color: #2C64AE; color: #fff; text-align: center; padding: 5px 5%; font-size: 20px; border-radius: 2px; font-weight: bold;}

#box2{margin-top: 70px;}
#box2.box2_works{background-color: #F8F8F8; padding: 50px 80px;}
#box2.box2_works img{display: inline-block;}
#box2.box2_works .bl_contentsBlock_inner { padding: 40px 5%; background: #fff; width: 1000px;}
#box2.box2_works .box2_works_main {align-items: center; flex-direction: row-reverse; text-align: center;}
#box2.box2_works .box2_works_main .box2_works_box_txt{min-width: 350px;}
#box2.box2_works .box2_works_main .box2_works_box_data { background-color: #EEF9FB; padding: 20px 10px; text-align: center; margin-top: 15px;}


#box3 img{display: inline-block;}


@media screen and (max-width: 1025px) {
  #m_main-vis{height: auto; padding: 60px 10%;}
  #m_main-vis::before,
  #m_main-vis::after{width: 20%; background-size: contain;}
  .box1_how{ padding-left: 5%; padding-right: 5%;}
  .box1_how_box{margin-bottom: 60px; padding: 25px 5% 10px 5%; min-height: inherit;}
  .box1_how_box dl dd > *{font-size: 15px;}
  .box1_how_box .box1_how_img{display: none;}
  .box1_how_box dl dd{min-height: inherit;}
  .box1_how_box dl dd .round_list > *::before{top: 12px;}
  .box1_solution_main{margin-left: 0; margin-right: 0; margin-bottom: 20px; padding: 5%;}
  .box1_solution_main .bl_contentsBlock_inner{width: auto !important;}
  #box2{margin-top: 0;}
  #box2.box2_works{margin-left: 0; margin-right: 0; padding: 30px 5%;}
  #box2.box2_works .bl_contentsBlock_inner{width: auto;}
  #box2.box2_works .box2_works_main_img{margin-bottom: 15px;}
  #box2.box2_works .box2_works_main .box2_works_box_data{padding: 10px;}
  #box3.work_list .company_case_license{margin-left: 0; margin-right: 0;}
  #box4{padding-left: 10%; padding-right: 10%;}
  #box4 .bl_contentsBlock{overflow: inherit;}
}

@media screen and (max-width: 450px) {
/* commmon----------------------------------------------------------------*/
  .box1_how{padding: 25px 5%;}
  .box1_how_box dl dt{margin-top: -40px;}
  .box1_how_box{margin-bottom: 40px;}
  .box1_how_box:last-child{margin-bottom: 0;}
  .link_btn.long{width: 100%;}
  .txt35{font-size: 20px !important;}
  .txt25{font-size: 19px !important;}
  .cv_box{padding-bottom: 15px !important;}
  .cv_box .link_btn{margin-bottom: 0;}
  
  
/* contents----------------------------------------------------------------*/
  #m_main-vis {padding: 30px 10%;}
  #m_main-vis .main_title_bg{margin-bottom: 10px;}
  #m_main-vis .mainvis_main_btn{width: auto; position: static; transform: inherit;}
  #m_main-vis .mainvis_main_btn .link_btn{margin-bottom: 0;}
  #box1 .box1_how h3.pablue{margin-bottom: 40px !important;}
  #box1 .box1_solution{ padding-top: 20px; margin-left: 5%; margin-right: 5%;}
  #box1 .box1_introduction {margin-right: 10%; margin-left: 10%; width: auto; padding-top: 25px; padding-bottom: 25px;}
  #box1 .box1_introduction .txt25{font-size: 18px !important;}
  #box1 .box1_solution_main dl dt{margin-top: -40px;}
  #box1 .box1_solution_main .box1_solution_box{margin-bottom: 20px; padding: 5%;}
  #box1 .box1_solution_main .box1_solution_box:last-child{margin-bottom: 0;}
  #box1 .box1_introduction .box1_read br{display: none;}
  #box1 .layout_box3{display: block;}
  #box1 .layout_box3 > *{width: 100% !important;}
  #box2.box2_works .box2_works_main .box2_works_box_txt{min-width: inherit;}
  #box2.box2_works .bl_contentsBlock_inner{padding: 5%;}
  #box2.box2_works .bl_contentsBlock_inner:last-child{margin-bottom: 0 !important;}
}