@charset "utf-8";
/* CSS Document */
/* color */
body,.txt_color_nomal{color: #4d4d4d;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #3c86e1} /* メインカラー */
.txt_color2{color: #f3f8fe} /* サブカラー */
.txt_color3{color: #F78E1E} /* アクセントカラー1 */
.txt_color4{color: #FFEC73} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #3c86e1} /* メインカラー */
.bg_color2{background-color: #f3f8fe} /* サブカラー */
.bg_color3{background-color: #F78E1E} /* アクセントカラー1 */
.bg_color4{background-color: #FFEC73} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #3c86e1}
.border_color2{border-color: #F78E1E}
.border_color3{border-color: #F78E1E}
.border_color4{border-color: #FFEC73}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #4d4d4d;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #3c86e1} /* メインカラー */
.hvr_txt_color2:hover{color: #f3f8fe} /* サブカラー */
.hvr_txt_color3:hover{color: #F78E1E} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #FFEC73} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #3c86e1} /* メインカラー */
.hvr_bg_color2:hover{background-color: #f3f8fe} /* サブカラー */
.hvr_bg_color3:hover{background-color: #F78E1E} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #FFEC73} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #3c86e1}
.hvr_border_color2:hover{border-color: #F78E1E}
.hvr_border_color3:hover{border-color: #F78E1E}
.hvr_border_color4:hover{border-color: #FFEC73}


/*全ページ*/
body{line-height: 1.7;}
#logo .logo {width: 300px;}
#logo2{width:300px;}
header{background:transparent;}
/*header.transform {background: rgba(135, 199, 242, 0.6);}*/
/*#header_menu li a span{color:white!important;}*/
#info .info_txt {width: 45%;}

/*トップページ*/
html {font-size: 120%;}
#intro_txt{
height: 400px;
background-image: url(dup/img/intro.png);
background-position: left 50% bottom 20px;
background-repeat:no-repeat;
}
#intro #intro_txt::before{
background-image: url(dup/img/intro_sb.png);
width:160px;
height:40px;
top: 50px;
left: 0;
right: 0;
margin: 0 auto;
}
#intro_txt span,.con_title1 span,.con_title2 span{
border-bottom: 2px dashed;
border-color: #4b4b4b;
padding-bottom: 5px;
}
#contents{max-width: 100%;}
#contents img{
width: 80%!important;
box-shadow:none!important;
}

#intro_txt h2,#contents h3{
font-size: 30px;
color: #4d4d4d;
font-weight:bold;
}
#contents .box_wrap{padding-top:0;}
#contents .con1{
padding-top: 100px;
background-color: #fef0b5;
position:relative;
padding-bottom:0;
}
#intro #intro_txt::before,#contents .con1::before,#contents .con1::after,#top_cms .cms_1-a::before,#top_cms .cms_2-c::before,#top_cms::before,#top_cms::after{
content:'';
position:absolute;
display:block;
background-repeat:no-repeat;
}
#contents .con1::before,#contents .con1::after{
width: 100%;
height: 100px;
background-size: 100% 100%;
}
#contents .con1::before{
background-image:url(dup/img/con1_bg2.png);
bottom: -99px;
z-index:-1
}
#contents .con1::after{
background-image:url(dup/img/con1_bg.png);
z-index:1;
}
.con_title1,.con_title2{position:relative;}
.con_title1::before,.con_title2::before{
content:'';
position:absolute;
background-repeat:no-repeat;
display:block;
width:100px;
height:100px;
left: -120px;
top: -20px;
z-index:1;
}
.con_title1::before{background-image:url(dup/img/con_title1.png);}
.con_title2::before{background-image:url(dup/img/con_title2.png);}
#contents .con2{padding-top: 200px;}

#top_cms{
max-width: 100%;
background-color:#3c86e1;
position:relative;
}
#top_cms::before,#top_cms::after{
width: 100%;
height: 100px;
background-size: 100% 100%;
top: -99px;
}
#top_cms::before{
background-image:url(dup/img/cms_bg.png);
z-index:2;
}
#top_cms::after{
background-image:url(dup/img/cms_bg2.png);
z-index:1;
}
#top_cms .top_cms_box{
width: 80%;
padding-top: 50px;
padding-bottom: 250px;
margin-bottom:0!important;
color:white;
}
#top_cms h2{color:#fef0b5;}
#top_cms .cms_1-a,#top_cms .cms_2-c{position:relative;}

#top_cms .cms_1-a::before{
background-image:url(dup/img/cms1.png);
width:300px;
height:140px;
z-index: 3;
top: -200px;
left: -100px;
}
#top_cms .cms_2-c::before{
background-image:url(dup/img/cms2.png);
width:350px;
height:140px;
z-index: 3;
top: -200px;
left: -100px;
}
#top_cms .more a{color:white;}

/*下層ページ*/
#filter_white{background-color: rgba(255,255,255,0.7)!important;}
.cate_title{border-left: 0;}



/*新着情報*/
#cms_1-a .pager li a{border-radius: 50px;}

/*顧客管理システム*/
#cms_2-b img{
border-right:0;
border-bottom:0;
box-shadow:none;
}
#cms_2-b .cate_box{
border:0;
border-left:0;
background-color:#f3f8fe;
}

#cms_2-c .cate{border-bottom:0;}


/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 1200px){
#info .info_txt {width: 40%;}
}
@media screen and (max-width: 950px){
#intro_txt{
background-position: left 50% bottom -5px;
height: 500px;
}
.con_title1::before, .con_title2::before{
left: -80px;
top: -15px;
background-size: 70%;
}
#contents img{width: 90%!important;}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
header{background:transparent;}
#header_menu ul li a span{
color:#3c86e1!important;
font-size:11px!important;
}
#main_img{margin-top: 150px;}
#intro_txt{
height: 360px;
background-size: 13%;
}
#intro #intro_txt::before{top: 35px;}
#top_cms .cms_1-a::before,#top_cms .cms_2-c::before{
top: -170px;
left: -20px;
background-size: 70%;
}
#top_cms .box_item {padding-left: 20px;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
html {font-size: 100%;}
header{padding-bottom: 0px;}
#logo{padding-top: 15px;}
#logo .logo {width: 190px;}
#main_img {margin-top: 60px;}
#intro_txt {background-position: left 50% bottom 10px;}
#intro_txt h2, #contents h3 {font-size: 20px;}
#contents p{font-size:calc(1rem);}
#contents img {width: 100%!important;}
.con1 p{width:100%!important;}
.con_title1::before, .con_title2::before{
left: 0px;
top: -80px;
}
.con2 h3,.con2 p{
width:100%!important;
margin-left:0!important;
}
#top_cms .box_item {padding-left: 0;}
#logo2{width: 210px;}
#info .info_txt {width: 90%;}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
.pager li a{padding-bottom:17px;}
}