@charset "utf-8";
/* CSS Document */

#breadcrumb {padding: 10px 20px;}
#breadcrumb ul li {margin-left: 7px;padding-left: 11px;background: url(https://www.ecbeing.net/cms/images/b2b/common/arrow_breadcrumb.png) no-repeat 0 10px;float: left;line-height: 2.5em;font-size: 11px;}
#breadcrumb ul li:first-child {margin-left: 0;padding-left: 0;background: none;}
#breadcrumb ul li a {color: #000;text-decoration: none;}
#breadcrumb ul:after {content: ".";display: block;height: 0px;clear: both;visibility: hidden;}

.feature_main{background: #ebecf2;padding: 0px 0 50px;}
.flex_trape{display: flex;justify-content: space-between;flex-wrap: wrap;width:1120px; margin: 0 auto 20px;align-items: flex-end;}
a.trapezoid01 {clip-path: polygon(0 17%, 100% 0, 100% 100%, 0% 100%);background: #fff;width: 373px;height:107px;display: block; padding: 60px 0 70px;text-align: center;}
a.trapezoid02 {clip-path: polygon(0 24%, 100% 0, 100% 100%, 0% 100%);background: #19a8d3;width: 724px;height:172px;display: block; padding: 73px 0 70px;text-align: center;position: relative;}
a.trapezoid02::before {content: "";position: absolute;inset: 17px 13px;background-color: #fff;clip-path: polygon(0 24%, 100% 0, 100% 100%, 0% 100%);z-index: -1;width: 696px;height: 155px;padding: 60px 0 70px;}
a.trapezoid01:hover,a.trapezoid02:hover{opacity: 0.8;}
	
.trape_arrow{text-align:center;}
.feature_main a .logo{ margin-bottom: 20px}
.feature_main a .logo_text {font-size:16px; font-weight:bold; line-height: 1.6em; color: #000;margin-bottom: 10px;}
.feature_main a.trapezoid02 .logo_text span {color:#1c4777;font-size:22px; }
.feature_main a .logo_btn {font-weight:bold; color:#fff;padding: 5px 40px; border-radius: 10px;display: inline-block;font-size:15px; }
.feature_main a.trapezoid01 .logo_btn {background:#19bc9f;}
.feature_main a.trapezoid02 .logo_btn {background:linear-gradient(160deg, #006ba7 0%, #00a0d3 100%);}
.feature_main h1{text-align: center;font-weight: bold;font-size: 30px;color: #171717; margin-bottom: 30px;}
.feature_main .read{font-weight: bold;font-size: 22px;text-align: center;color: #171717;line-height: 1.6em;margin-bottom: 50px;}
.feature_main .read span.yellow{font-size: 29px; background: linear-gradient(transparent 50%, #f3ffc2 50%);}
.feature_main .read span.mid{font-size: 25px;}
	
.type3 {background: #fff;padding: 80px 0;}
.type3 .type3_flex{display: flex;flex-wrap: wrap;justify-content: space-between;width: 1400px;margin: 0 auto;position:relative;}
.type3_flex .type_ch{background: #fff;;width:29%;display: block;padding:2% 1% 2%;transition: all 250ms;text-align: center;border-radius: 30px;}
.type3_flex .type_ch.open{border: 8px solid #d3f5eb;}
.type3_flex .type_ch.close{border: 8px solid #d2e6f0;}
.type3_flex .type_ch.tob{border: 8px solid #fddcd0;}
.type3_flex .type_ch .tl{font-weight: bold;font-size: 22px;text-align: center;color:#171717;margin-bottom: 30px;}
.type3_flex .type_ch .tl_text{font-weight: bold;font-size: 18px;text-align: center;color:#171717;line-height: 1.8em;margin-bottom: 15px;text-align: left;}
.type3_flex .type_ch .img{margin-bottom: 20px;}
.type3_flex .type_ch .img img{width:100%;}

.type3_flex .type_ch .type3_btn a{color: #fff; font-weight:bold;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);border-radius: 26px;font-size: 15px;text-align: center;display: block;padding: 15px 0;position: relative;}	
.type3_flex .type_ch .type3_btn a:after {content: "";position: absolute;width: 0px;height: 0px;border-top: solid 5px transparent;border-bottom: solid 5px transparent;border-left: solid 7px #fff;border-right: solid 10px transparent;top: 39%;right: 6px;}
.type3_flex .type_ch.open .type3_btn a{background: #1ccd99;}
.type3_flex .type_ch.close .type3_btn a{background: #1DA8EE;}
.type3_flex .type_ch.tob .type3_btn a{background: #ffa156;}
.type3_flex .type_ch .type3_btn a:hover{opacity: 0.8;box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);}

.type3_flex .jirei_flex{display: flex;flex-wrap: wrap;justify-content: space-between;text-align: left;margin-bottom: 20px;}
.type3_flex .jirei_flex:hover{ opacity: 0.8;}
.type3_flex .jirei_flex .left {width:49%;}
.type3_flex .jirei_flex .left img {width:100%;height: auto}
.type3_flex .jirei_flex .right {width:49%;}
.type3_flex .jirei_flex .ji_tt{font-weight: bold;font-size: 17px;color: #171717; margin-bottom: 10px;}
.type3_flex .jirei_flex .ji_tex{font-weight: bold;font-size: 13px;line-height: 1.6em;color: #171717;}

h2 {text-align: center;color: #232323;font-weight: bold;font-size: 30px;margin-bottom: 30px;}
h2 span.logo1 {position: relative;bottom: 20px;}
h2 span.color {font-size: 40px;}
	
	
	
.kinou{padding:80px 0;background: #fff; position: relative;margin-bottom: 20px;background: #ebecf2;}
.kinou_tex{font-weight: bold;font-size: 17px;line-height: 1.6em;text-align: center;color: #171717;margin-bottom: 30px;}
.kinou_flex{width: 1350px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.kinou_ch {background: #fff;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);width: 31%;display: block;transition: all 250ms;text-align: left;margin-bottom: 30px;}
.kinou_ch .img{margin-bottom: 20px;}
.kinou_ch .img img {width:100%;height: auto;}
.kinou_ch .ki1{padding:0 30px;margin-bottom: 10px;font-weight: bold;font-size: 18px;color: #2e2e2e;}
.kinou_ch .ki2{padding:0 30px 20px;font-size: 16px;line-height: 1.6em;color: #171717;}
.kinou:before {display: block;position: absolute;bottom: -25px;left: 50%;width: 0;height: 0;transform: translateX(-50%);border-width: 25px 40px 0 40px;border-style: solid;border-color: #fff transparent transparent transparent;content: "";transition: 0.2s;}

.kinou .plus{font-weight: bold;font-size: 100px;text-align: center;color: #4c4c4c;line-height: 1em;margin-bottom: 20px;}
.kinou .sec_ttl{font-weight: bold;font-size: 28px;line-height: 1.6em;text-align: center;color: #171717;margin-bottom: 40px;}
.kinou .sec_ttl span{position: relative;top:-5px;top: -7px;right: 10px;}
.kinou .op_ttl{font-weight: bold;font-size: 28px;text-align: center;color: #171717;margin-bottom: 40px;}
.kinou .op_area{width: 1170px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin-bottom: 50px;}
.kinou .op_area .op{border-radius: 26px;background: #fff;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);padding: 40px;}
.kinou .op_area .op .t1{font-weight: bold;font-size: 21px;line-height: 1em;text-align: center;color: #171717; margin-bottom: 20px;padding-bottom: 15px;  border-bottom: 3px solid #3977F6;
  border-image: linear-gradient(to right, #3977F6 0%, #67D8DF 100%) 1;width: 370px;margin: 0 auto 20px;}
.kinou .op_area .op .t1 span{font-size: 16px;}
.kinou .op_area .op .t2{font-weight: bold;font-size: 14px;line-height: 1.6em;text-align: center;color: #171717; margin-bottom: 20px;}
.kinou .op_area .op .t3_area{background: #f7f7f7;width: 80%; margin: 0 auto 30px; padding: 10px 30px;}
.kinou .op_area .op .t3_area.ce{padding: 10px 0; text-align: center;width: 100%;}
.kinou .op_area .op .t3{font-weight: normal;font-size: 13px;line-height: 1.8em;color: #171717;}
.kinou .op_area .op .t3 span{font-weight: bold;font-size: 15px;color: #171717;}
.text_btn_on{font-weight: bold;font-size: 20px;margin-bottom: 20px; text-align: center;color: #171717;}
.btn_contact a{text-align: center;display: block;font-size: 20px;font-weight: bold;color: #fff;border-radius: 28px;padding: 0px 10px;position: relative;overflow: hidden;transition: all 0.2s ease-out;z-index: 1;height: 56px;line-height: 56px;width: 330px;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.38);margin: 0 auto;}
.btn_contact a:before {content: "";width: 100%;height: 100%;position: absolute;background: linear-gradient(90deg,#3977F6 ,#67D8DF );z-index: -1;left: 0;transition: 0.5s;}
.btn_contact a span:after {content: "";border-top: solid 2px #fff;border-right: solid 2px #fff;width: 5px;height: 5px;transform: rotate(45deg);display: block;position: absolute;top: 40%;right: 30px;}
.btn_contact a:after {content: "";width: 100%; height: 100%;position: absolute;z-index: -2;left: 0;background: #0163E3;top: 0;}
.btn_contact a:hover {box-shadow: 0px 0px 4px rgb(19 129 182 / 32%);}
.btn_contact a:hover:before {opacity: 0;}
	
	

	
@media screen and (max-width: 640px){
.kinou {padding: 20px 4% 40px;}
.kinou_flex {width: 100%;display: block;}
.kinou_ch {width: 100%;margin-bottom: 20px;}
.kinou_tex {font-size: 15px;margin-bottom: 20px;}
.kinou_ch .ki1 {font-size: 16px;}
.kinou_ch .ki2 {font-size: 15px;}

.feature_main { padding: 0px 2% 50px;}
.flex_trape{width:100%;}
a.trapezoid01 {width: 36%;padding: 60px 2% 70px; height: 70px;}
a.trapezoid02 {width: 51%;padding: 73px 4% 70px; height: 121px;}
a.trapezoid02::before {height: 103px;width: 89%;}
.feature_main a .logo_text {font-size: 10px;}
.feature_main a .logo_btn {font-size: 10px;}
.feature_main a .logo_btn {padding: 5px 15px;}
.feature_main a.trapezoid02 .logo_text span {font-size: 17px;}
.feature_main .read {font-size: 16px;margin-bottom: 20px;}
.feature_main .read span.yellow {font-size: 20px;}
.feature_main .read span.mid {font-size: 20px;}
.feature_main h1 {font-size: 25px;margin-bottom: 20px;}
h2 span.color {font-size: 30px;}
.type3 .type3_flex {display: block;width: 94%;padding: 0 3%;}
.type3_flex .type_ch {width: 93%;padding: 2% 1% 5%;margin-bottom: 20px;}
.type3_flex .type_ch .tl_text {font-size: 14px;}
.type3_flex .jirei_flex .ji_tex {font-size: 11px;}
.type3_flex .jirei_flex .ji_tt {font-size: 15px;margin-bottom: 6px;}
.type3_flex .type_ch .tl {font-size: 20px;margin-bottom: 10px;}
.type3 {padding: 80px 0 30px;}
.type3_flex .type_ch .type3_btn a {font-size: 11px;}
	
.kinou .plus {font-size: 50px;}
.kinou .sec_ttl span img{width:80%;}
.kinou .sec_ttl {font-size: 15px;}
.kinou .op_ttl {font-size: 20px;margin-bottom: 20px;}
.kinou .op_area {width: 100%;display: block;}
.kinou .op_area .op {padding: 20px;margin-bottom: 20px;}
.kinou .op_area .op .t1 {width: 100%;}
.kinou .op_area .op .t2 {font-size: 12px;}
.kinou .op_area .op .t3 span {font-size: 12px;}
.kinou .op_area .op .t3 {font-size: 10px;}
.text_btn_on {font-size: 14px;}
.btn_contact a {font-size: 17px;padding: 0px 10px;width: 85%;}
	

	

}