@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
html{overflow-x: hidden;}


/* common start */
img{display: inline-block; max-width: 100%; height: auto;}
.pa_title01_ico{display: inline-block;}

/*ブロックごとのデフォルトのパディング*/
.box{padding: 80px 0 100px;}
.function_title{border-bottom: 2px solid #ccc; background-color: #fff; text-align: center; padding: 20px 5%; position: relative; color: #2C64AF; font-size: 32px; font-weight: bold;}
.function_title::after{content: ""; display: block; width: 36px; height: 36px; border-top: 2px solid #ccc; border-right: 2px solid #ccc; background-color: #fff; position: absolute; bottom: -32px; left: 50%; transform:translate(-50%,-12px) rotate(135deg);}
.function_title > *{display: inline-block; vertical-align:text-bottom;}
.function_title i,
.function_title .emphasis{ display: inline-block; position: relative; font-size: 55px; line-height: 1; font-style: normal; font-weight: bold; }
.function_title .emphasis::before{content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; position: absolute; top: -15px; left: 50%; transform: translate(-50%, 0); background-color: #2C64AF; }
@media only screen and (max-width :769px) {
  .box{padding: 40px 0 40px;}
}
@media only screen and (max-width :450px) {
  .box{padding: 20px 0 20px; margin-left:15px; margin-right: 15px;}
}
/* common end */
#in_main_vis{background: #fff url("../images/bg.jpg") no-repeat top center; background-size: cover; padding: 50px 0;}
#in_main_vis #main_vis_main{flex: 0.9;}
#in_main_vis .main_box{ flex-direction:row; height: auto;justify-content: space-between;}
#in_main_vis #main_vis_main #main_vis_title{background-color: #2FAECB; color: #fff; padding: 12px; margin:0 auto 25px auto; font-size: 40px; line-height: 1.0; font-weight: bold; display: table; align-items: center; justify-content: flex-start;}
#in_main_vis #main_vis_main #main_vis_title > *{display: table-cell;}
#in_main_vis #main_vis_main #main_vis_title .main_ico{background-color: #fff; text-align: center; padding: 3px; border-radius: 3px; margin-right: 8px; vertical-align: middle; flex-basis: 65px; width: 65px; height: 65px; display: inline-block;}
#in_main_vis #main_vis_main #main_vis_title .main_ico img{height: 100%; width: auto; vertical-align:middle;}
#in_main_vis #main_vis_main #main_vis_title .main_vis_tit{flex: 1; text-align: center; line-height: 1.2;}
#in_main_vis #main_vis_main #main_vis_title .main_vis_tit br{display: none;}
#in_main_vis #main_vis_main .main_vis_read{font-size: 32px; font-weight: bold; text-align: center; line-height: 1.8;}
#in_main_vis #main_vis_main .main_vis_read span.under_line{font-size: 42px;}

#function_index{padding-bottom: 0;}
#pap_function_list{background-color: #EEF9FB;}

#box1 {padding-bottom: 0; padding-top: 20px;}
#box1 .function_title,
#box1 .function_title::after{border-color: #2C64AF;}
#box1 .task_box{background-color: #F4F4F4; text-align: center; padding: 45px 5%;}
#box1 .task_box h3{font-size: 16px; font-weight: bold;color: #2C64AF; }

#box2{padding-top: 0; padding-bottom: 0;}
#box2 .function_title,
#box2 .function_title::after{border-color: #2FAECB;}
#box2 .function_title .function_title_img{ margin-right: 8px;}
#box2 .function_title .function_title_img img{min-height: 70px; vertical-align: middle; }
#box2 .solution_main_wrp{background-color: #ECF7FD; padding: 45px 5%;}
#box2 .solution_list li{background: #fff; border: 1px solid #2FAECB; border-radius: 3px; padding: 0px 10px 25px 10px; position:relative; font-weight: bold; transition: 0.5s;}
#box2 .solution_list li:hover{opacity: 0.5;}
#box2 .solution_list li::after{content:"";position:absolute;bottom: 10px; left:50%;width:6px;height:6px; border-top:2px solid #2FAECB;border-right:2px solid #2FAECB;transform:rotate(135deg); z-index:0; transition: 0.5s;}
#box2 .solution_list li:hover::after{bottom:7px;}
#box2 .solution_list li .solution_no{background-color: #fff; font-size: 45px; line-height: 1; border-radius: 50%; padding: 15px; border: 1px solid #2FAECB; margin-bottom: 25px; font-weight: bold; color: #2FAECB; display: table; margin: -35px auto 10px auto; display:flex; justify-content: center; align-items: center; line-height: 1; width: 83px; height: 83px;}
#box2 .solution_main_box{background: #fff; margin-bottom: 60px;}
#box2 .solution_main_box:last-child{margin-bottom: 0;}
#box2 .solution_main_box .solution_main_tit{background-color: #2FAECB; color: #fff; padding: 18px 25px 18px 45px; font-weight: bold; font-size: 30px; line-height: 1.2;}
#box2 .solution_main_box .solution_main_tit .solution_no{display: inline-block; vertical-align: middle; margin-right: 15px; font-size: 50px;}
#box2 .solution_main_box .solution_detail{flex-direction: row-reverse; padding: 35px 45px; flex-wrap: wrap;}
#box2 .solution_main_box .solution_detail .solution_detail_img{flex-basis: 450px; margin-bottom: 15px;}
#box2 .solution_main_box .solution_detail .solution_detail_main{flex: 0.9; margin-bottom: 15px;}
#box2 .solution_main_box .solution_detail .solution_detail_check > li{padding-left: 40px; padding-top: 0px; line-height: 1.8; margin-bottom: 10px; font-weight: bold; position: relative; font-size: 20px; }
#box2 .solution_main_box .solution_detail .solution_detail_check > li::before{content: ""; position: absolute; top: 0; left: 0; display: inline-block; width: 33px; height: 33px; background: url("../images/ico_check.svg") no-repeat 0 0; background-size: contain; }
#box2 .solution_main_box .solution_detail_point {border: 2px solid #2C64AF; border-radius: 5px; padding: 0px 5% 15px 5%; width: 100%;}
#box2 .solution_main_box .solution_detail_point dt{background-color: #2C64AF; color: #fff; text-align: center; font-weight: bold; font-size: 18px; padding: 5px 30px; display: table; margin: -17px auto 10px auto; border-radius: 40px; line-height: 1; position: relative;}
#box2 .solution_main_box .solution_detail_point dt::before{content: ""; display: inline-block; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width:0;height:0;border-style:solid;border-width: 8.7px 5px 0 5px;border-color:  #2C64AF transparent transparent transparent;}
#box2 .solution_main_box .solution_detail_point dt::after{content: ""; display: inline-block; width:16px; height: 24px; background: url("../images/ico_point.svg") no-repeat; margin-left: 8px; vertical-align: middle;}
#box2 .solution_main_box .solution_detail_point dd{font-weight: bold; font-size: 20px; color: #2C64AF;}

#box4 {background-color: #EEF9FB;}

.function_download{justify-content: center; align-items: center; text-align: left !important; width: 900px; margin: 0 auto;}
.function_download .function_download_main{ margin-left: 30px; flex: 1; text-align: center;}
.function_download .function_download_main .box_cta_btn{text-align: center;}
.box_cta{background-color: #f8f8f8;}
.box_cta .box_cta_list > li{background-color: #f8f8f8; border: 7px solid #c5ebff; width: 1000px;}


@media only screen and (max-width :1241px) {
    .bl_contentsBlock .bl_contentsBlock_inner{width: auto; padding-left: 5%; padding-right: 5%;}
    #in_main_vis .main_box{max-width: inherit; flex-wrap: nowrap; padding-top: 0;}
    #in_main_vis #main_vis_main{flex-basis: 48vw; margin-right: 2vw;}
    #in_main_vis #main_vis_img{flex-basis: 49vw;}
    #in_main_vis #main_vis_main #main_vis_title{font-size: 20px;}
    #in_main_vis #main_vis_main #main_vis_title .main_ico{ flex-basis: 32px; width: 32px; height: 32px;}
    #in_main_vis #main_vis_main #main_vis_title .main_ico img{height: 25px;}
    #in_main_vis #main_vis_main .main_vis_read{font-size: 18px;}
    #in_main_vis #main_vis_main .main_vis_read span.under_line{font-size: 25px;}
    #box1 .task_box ul,
    #box2 .solution_main_wrp .solution_list {justify-content: center;}
    #box2 .solution_list li{margin-bottom: 45px;}
    #box2 .solution_main_box .solution_main_tit{ display: flex; justify-content: flex-start; align-items: center; padding-left: 25px;}
    #box2 .solution_main_box .solution_main_tit .solution_no{ margin-right: 10px;}
    #box2 .solution_main_box{padding-left: 0; padding: 0;}
    #box2 .solution_main_box .solution_detail .solution_detail_main{margin-bottom: 35px;}
    #box2 .solution_main_box .solution_detail .solution_detail_img{text-align: center;}
    #box2 .function_title .function_title_img img{min-height:inherit;}
    
    .function_download{display: block; width:auto; }
    .function_download .function_download_main{ margin-left: 0px; margin-top: 15px; text-align: center !important;}

}

@media only screen and (max-width :769px) {
    #box2 .solution_main_box .solution_detail .solution_detail_check > li::before{top: 5px;}
    .box_cta .box_cta_list > li{width:auto;}
}

@media only screen and (max-width :450px) {
    .function_title{font-size: 20px;}
    .function_title i, .function_title .emphasis{font-size: 28px}
    
    #in_main_vis{padding: 20px 0;}
    #in_main_vis #main_vis_main #main_vis_title{padding: 7px;}
    #in_main_vis .main_box{display:block;}
    #in_main_vis #main_vis_main{text-align: center;}
    #in_main_vis #main_vis_main #main_vis_title{display: inline-flex;}
    #in_main_vis #main_vis_main #main_vis_title > *{display:inline-block !important;}
    #in_main_vis #main_vis_main #main_vis_title,
    #in_main_vis #main_vis_main .main_vis_read{margin-bottom: 15px;}
    #in_main_vis #main_vis_main #main_vis_title .main_vis_tit br{display:block;}
    #box1,#box2{margin-left: 0; margin-right: 0;}
    
    #function_index{margin-left: 0px; margin-right: 0;}
    #pap_function_list{margin-left: 0px; margin-right: 0;}
    #function_index .function_index_read{padding-left: 5%; padding-right: 5%;}
    /*#pap_function_list.bl_contentsBlock .bl_contentsBlock_inner{padding-left: 0; padding-right: 0;}*/
    
    #box1 .task_box ul, #box2 .solution_main_wrp .solution_list{display: block;}
    #box1 .task_box ul > *, #box2 .solution_main_wrp .solution_list > *{width: 100% !important; margin: 0 auto 20px auto !important;}
    #box1 .task_box ul > *, #box2 .solution_main_wrp .solution_list > *{margin-bottom: 40px !important;}
    #box2 .solution_main_box .solution_main_tit{font-size: 20px;}
    #box2 .solution_main_box .solution_main_tit .solution_no{font-size: 28px;}
    #box2 .solution_main_box .solution_detail{padding: 25px 5%;}
    #box2 .solution_main_box .solution_detail_point dd{font-size: 15px;}
    #box2 .solution_main_box .solution_detail_point dd br{display: none;}
    #box2 .solution_main_box .solution_detail .solution_detail_check > li{font-size: 15px; padding-left: 30px;}
    #box2 .solution_main_box .solution_detail .solution_detail_check > li::before{width: 22px; height: 22px;}
    #box4{margin-left: 0; margin-right: 0;} 
}