@charset "utf-8";

.s_visual{background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 400px;}
.s_visual .s-inner{height: 100%;}
.s_visual .text{display: flex; flex-direction: column; justify-content: center; height: 100%;}
.s_visual .text .tit{font-size: 42px; font-weight: 600;}
.s_visual .text .txt{font-size: 18px; font-weight: 300; margin-top: 15px;}

@media all and (max-width:1080px){
    .s_visual{background-position: center right -200px; position: relative;}
    .s_visual::after{content: ''; display: block; width: 100%; height: 100%;  background-color: rgba(255,255,255,0.4) !important; z-index: 2; position: absolute; left: 0; top: 0;}
    .s_visual .text{position: relative; z-index: 3;}
}
@media all and (max-width:640px){
    .s_visual{height: 320px;}
    .s_visual .text .tit{font-size: 34px;}
    .s_visual .text .txt{font-size: 16px;}
}
@media all and (max-width:480px){
    .s_visual{height: 280px;}
    .s_visual .text .tit{font-size: 28px;}
}


@media all and (min-width:999px){
	.sub_menu_wrap {width:100%; height:60px; line-height:60px; margin: 0 auto; max-width: 100%; position:relative; font-weight:400; box-sizing:border-box; z-index:14; background-color: rgba(0,0,0,0.35); }
	.sub_menu_wrap .m_dep_tit,
	.sub_menu_wrap .m_1dep_box,
	.sub_menu_wrap br{display:none;}

	.sub_menu_wrap .m_home{position:static; display:block; width:80px; height:80px; float:left; background:#002358 url("/images/sub/ico_home.png"); border:0; background-size: 100% auto; display: none;}
	.sub_menu_wrap .m_2dep_box {text-align:center; width:100%; }
	.sub_menu_wrap .m_2dep_box .smenu{display:flex; height: 60px; max-width: 1400px;margin: 0 auto;}
	.sub_menu_wrap .m_2dep_box li {position:relative; display:inline-block; color:#fff; font-size: 1.8rem; font-weight:400;width: 100%;}
	.sub_menu_wrap .m_2dep_box li:first-child:before{display:none;}
	.sub_menu_wrap .m_2dep_box li a{color: #fff; font-size: 16px; font-weight: 500; width: 100%;}
	.sub_menu_wrap .m_2dep_box li a:hover{ color:#212121; font-weight: 500; background-color: #fff;}
	.sub_menu_wrap .m_2dep_box li a{display: block; width: 100%; height: 100%;}
	.sub_menu_wrap .m_2dep_box li a.on{ color:#212121; font-weight: 500; background-color: #fff;}
}

@media all and (max-width:999px){
    .sub_menu_wrap .s-inner{width: 100%;}
    /* Sub-Menu */
    .sub_menu_wrap .m_2dep_box .smenu{display:block}
    .sub_menu_wrap .m_2dep_box li {position:relative; display:inline-block; color:#686868; padding:0 30px; font-size: 1em; }
    .sub_menu_wrap .m_2dep_box li:before{content:""; width:1px; height:12px; background:#e5e5e5; position:Absolute; left:0; top:50%; margin-top:-6px;}
    .sub_menu_wrap .m_2dep_box li:first-child:before{display:none;}
    .sub_menu_wrap .m_2dep_box li.s_on{color:#002358; }
    .sub_menu_wrap .m_2dep_box li a.on{ color:#002358; }

    .sub_menu_wrap{width:100%; max-width: 1920px;  height:60px;  line-height:60px; margin:-30px auto 0; padding:0; position:relative; font-weight:400; box-sizing:border-box; z-index:10; }
    .sub_menu_wrap .inner{background: #fff; margin: 0 auto; max-width: 1280px; height: 60px; width: 100%; border-bottom: 1px solid #ddd;  border-right: 1px solid #ddd;}
    .sub_menu_wrap .m_home a{position:static; display:block; width:60px; height:60px; float:left; background: url("/images/sub/ico_home.png"); border:0; background-size: 100% auto; border: 1px solid #e5e5e5;}
    .sub_menu_wrap .m_dep_box{display:block; width:326px; float:left; border-right:1px solid rgba(255,255,255,0.3); text-align:left; cursor:pointer;height:60px; line-height:60px; border-right:1px solid #e5e5e5; font-size: 1.7rem; }
    .sub_menu_wrap .m_dep_tit {display:block; background:url('/images/sub/arrow_down.png') no-repeat 90% center; height:60px; line-height:60px; color:#333333; box-sizing:border-box; padding:0 15px 0 35px; cursor:pointer;}
    .sub_menu_wrap .m_dep_box .smenu{ display:none; width:calc(100% + 2px); margin-left:-1px; background:#f9f9f9; box-sizing:Border-box; border:1px solid #ddd; border-top:0;}
    .sub_menu_wrap .m_dep_box .smenu li {margin:0; width:100%; display:block; box-sizing:border-box;  border-top:1px dotted #ddd; padding:0; font-weight: 500;}
    .sub_menu_wrap .m_dep_box .smenu li:hover{}
    .sub_menu_wrap .m_dep_box .smenu li:hover a { border:0; color: #000;}
    .sub_menu_wrap .m_dep_box .smenu li a.on{color:#000; border:0; font-weight: 500; background-color: #eee;}
    .sub_menu_wrap .m_dep_box .smenu li:first-child{border-top:0;}
    .sub_menu_wrap .m_dep_box .smenu a{ color:#333; display:block; width:100%;  padding:1em 5%; box-sizing:border-box; line-height:normal; font-size: 15px; font-weight: 400;}
    .sub_menu_wrap .m_2dep_box li:before{display:none;}
}
@media all and (max-width:720px){
    .sub_menu_wrap{height: 50px;}
    .sub_menu_wrap .inner{height: 50px;}
    .sub_menu_wrap .s-inner{height: 50px;}
    .sub_menu_wrap .m_home a{height: 50px; width: 50px;}
    .sub_menu_wrap .m_dep_box{width: calc(100%); height: 50px;}
    .sub_menu_wrap .m_dep_tit{padding-left: 5%; font-size: 15px; height: 50px; line-height: 50px; font-weight: 400;}
}

/* top_cate */
.top_cate{padding:40px 1%;}
.top_cate .left_box{}
.top_cate .left_box a{background-color: #2dbdb6; color: #fff; padding: 10px 20px;}
.top_cate .right_box{}

@media all and (max-width:640px){
    .top_cate{padding: 30px 1%;}
    .top_cate .left_box a{padding: 6px 12px;}
}

.solution{margin-bottom: 80px; display: flex; flex-wrap: wrap;}
.solution a{display: block; width: 31.3333%; margin: 1% 1% 2% 1%;}
.solution a .box{}
.solution a .box .img{display: flex; width: 100%; height: 240px; justify-content: center; align-items: center; font-size: 24px; font-weight: 500; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; background-color: #000;}
.solution a .box h3{color: #222; font-size: 24px; margin-top: 15px; transition: .2s;}
.solution a .box p{ letter-spacing: -0.05em; font-size: 15px; color: #555; line-height: 1.8em; font-weight: 300; margin-top: 10px;}
.solution a:hover .box h3{color: #2dbdb6;}

@media all and (max-width:1080px){
    .solution a{width: 48%; margin-bottom: 4%;}
}
@media all and (max-width:640px){
    .solution a .box .img{height: 200px;}
}
@media all and (max-width:480px){
    .solution a{width: 100%; margin-bottom: 25px;}
    .solution a .box h3{font-size: 20px;}
}

.product{margin-bottom: 80px; display: flex; flex-wrap: wrap;}
.product a{display: block; width: 31.3333%; margin: 1% 1% 2% 1%; border: 1px solid #e3e3e3; padding: 10px; }
.product a:hover{border: 5px solid #1fb96d;padding:2px 5px;}


.product a .box{ }
.product a .box .img{display: flex; width: 100%; height: 170px; justify-content: center; align-items: center; font-size: 24px; font-weight: 500; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; background-color: #000; padding: 10px;}
.product a .box h3{color: #157486; font-size: 24px; margin-top: 15px;  padding-top: 15px; border-top: 1px dashed #e3e3e3;}
.product a .box p{ letter-spacing: -0.05em; font-size: 15px; color: #555; line-height: 1.8em; font-weight: 300; margin-top: 10px;}
.product a:hover .box h3{color: #1fb96d;font-size: 24px; margin-top: 0px;  padding-top: 38px; border-top: 1px dashed #e3e3e3;}

@media all and (max-width:1080px){
    .product a{width: 48%; margin-bottom: 4%;}
}
@media all and (max-width:640px){
/*    .product a .box .img{height: 200px;}*/
}
@media all and (max-width:480px){
    .product a{width: 100%; margin-bottom: 25px;}
    .product a .box h3{font-size: 20px;}
}

.sct-ct0{text-align: left; margin: 0 auto; margin-top: 30px; margin-bottom: 30px; max-width: 1420px; display: flex; flex-wrap: wrap;}
.sct-ct0 a{display: inline-block; color: #999; background-color: #fff; padding: 10px 20px;  transition: .2s; width: 25%; border: 1px solid #dedede; margin-top: -1px; margin-left: -1px; text-align: center;}
.sct-ct0 a:hover{background-color: #ef3139; color: #fff;}
.sct-ct0 a.sct-ct-here{display: inline-block; color: #fff; background-color: #EF3139; }
.sct-ct1{text-align: center; margin-top: 20px;}
.sct-ct1 a{display: inline-block; margin: 0 8px; color: #999;}

@media all and (max-width:1080px){
    .sct-ct0 a{font-size: 15px; width: 33.33333%; padding: 8px;}
}
@media all and (max-width:640px){
    .sct-ct0{width: 94%; margin-top: 20px;}
    .sct-ct0 a{font-size: 14px; width: 50%;}
}