@charset "UTF-8";
/* CSS Document */

.system_left_img,
.customize_left_img{
	display:block;
	float:left;
	margin-right:30px;
	
}

.system_flex{display:flex;}

.system_right_img{
	display:block
	float:right;
	margin-left:10px;
	overflow:hidden;
}


.custom_box{
	width:1200px;
	margin-right:-100px;
}

.custom_box ul{
	float:left;
	width:500px;
	margin:20px 100px 20px 0;
	padding:0;
}

.custom_box ul li{
	list-style:none;
	width:100%;
	line-height:60px;
	border-bottom:1px dotted #ccc;
	font-size:20px;
	font-weight:200;
}

.custom_box ul li.custom_icon{
	background:url(../images/system_list_icon.png) right center no-repeat;
}

.custom_box ul li a{
	display:block;
	width:100%;
	text-decoration:none;
	color:#555;
	margin:0;
	padding:0;
}

ul.b_text,
ul.b_text02{
	display:inline-block;
	color:#133f85;
}
ul.b_text{font-size:20px;}

ul.b_text02{
	margin:0;
	padding:0;
	font-size:16px;
	list-style:none;
	}

.custom_box ul li a:hover,
a:hover.system_btn,
.order_box a:hover.contact_bana{
	opacity:0.6;
	-ms-filter: "alpha(opacity=60)";
}


a.system_btn{
	display:block;
	width:100%;
	height:180px;
	color:#555;
	text-decoration:none;
	padding-top:5%;
	text-align:center;
	border:2px solid #133f85;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;	
	box-sizing:border-box;	
	clear:both;
	margin:30px auto 60px;
	background:url(../../development/images/development_mini_icon.png) right 10px bottom 10px no-repeat;
}

a.system_btn .b_text{
	display:block;
	font-weight:600;
	font-size:35px;
	margin:10px auto;
	color:#133f85;	
}

/**システム開発のご依頼はここから**/
.order_box{
	width:1100px;
	margin:30px auto;
}

.green_b,
.blue_b,
.grad_b{
	width:680px;
	padding:12px 10px;
	font-size:18px;
	color:#fff;
	margin:0 auto 10px;
	text-align:center;
}	

.green_b{background:#599f4a;}
.blue_b{background:#134186;}
.grad_b{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#599f4a+0,599f4a+50,134186+50,134186+100 */
background: #599f4a; /* Old browsers */
background: -moz-linear-gradient(left,  #599f4a 0%, #599f4a 50%, #134186 50%, #134186 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #599f4a 0%,#599f4a 50%,#134186 50%,#134186 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #599f4a 0%,#599f4a 50%,#134186 50%,#134186 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599f4a', endColorstr='#134186',GradientType=1 ); /* IE6-9 */
}

.order_box p{
	text-align:center;
	margin:0 auto 20px;
}

img.yazi{
	display:block;
	width:45px;
	margin:20px auto;
	text-align:center;
	}


.order_box a.contact_bana{
	display:block;
	width:40%;
	height:150px;	
	color:#133f85;
	text-decoration:none;
	padding-top:40px;
	margin:0 auto;
	border:2px solid #133f85;
	background:url(../../home/images/mail_icon_bana.png) left 50px center no-repeat,url(../../home/images/mail_icon_bana02.png) right 10px bottom 10px no-repeat;
	text-align:left;
	font-size:24px;
	padding-left:130px;
	line-height:1.4em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;	
	box-sizing:border-box;
}

.helf_box{
	width:100%;
	margin:30px auto;
	padding:0;
	overflow:hidden;
}

.helf_box li{
	float:left;
	width:46%;
	margin:0 2%;
	list-style:none;
}

.three_box li{
	float:left;
	width:30%;
	margin:0 1.5%;
	list-style:none;
}

.helf_box li img{
	display:block;
	width:auto;
	max-width:80%;
	margin:0 auto;
}


/*開閉QA*/

.accordionbox{width: 100%;}
.accordionlist dt{
	color:#133f85;
	font-weight:600;
	display:block;
	width:100%;
	background: #f9f9f9;
	padding: 12px;
	box-sizing:border-box;
	position:relative;
	margin-bottom:15px;
	cursor:pointer;
}
.accordionlist dd{
	display:none;
	width:100%;
	margin:0 0 15px;
	padding-left:10px;
	box-sizing:border-box;
	}

.accordionlist .accordion_icon,
.accordionlist .accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

.accordionlist .accordion_icon {
	position: absolute;
	width: 30px;
	height: 30px;
	top:40%;
	right:0px;
	margin:0 5px 0 0;
}
.accordionlist .accordion_icon span {
	position: absolute;
	left: 6px;
	width: 50%;
	height: 2px;
	background-color: #133f85;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordionlist .accordion_icon span:nth-of-type(1) {
	top: 5px;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}
.accordionlist .accordion_icon span:nth-of-type(2) {
	top: 5px;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

/*＋、－切り替え*/
.accordionlist .accordion_icon.active span:nth-of-type(1) {display:none;}
.accordionlist .accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}


/* 画面サイズが640px以下の場合に適用 */
@media only screen and (max-width: 640px) {

.custom_box{width:100%;}

.system_left_img{
	width:30%;
	margin:0 15px 0 0;
	}	
	
.system_box ul li a p{font-size:12px;}

.system_right_img,
.customize_left_img{
	float:none;
	width:100%;
	margin:0 auto 10px;
}

.b_text02{
	display:block;
	width:90%;
	margin:10px auto;
}

.custom_box ul{
	float:none;
	width:100%;
	margin:20px auto;
}

a.system_btn{padding:10% 6% 0;}

a.system_btn .b_text{
	display:block;
	font-weight:600;
	font-size:24px;
	margin-bottom:10px;
	color:#133f85;	
}

/**システム開発のご依頼はここから**/
.order_box{width:100%;}

.green_b,
.blue_b,
.grad_b{
	width:100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;	
	box-sizing:border-box;
}
	
ul.three_box{
	width:100%;
	margin:0 auto;
	padding:0;
}
.three_box li{
	float:none;
	width:66%;
	margin:15px auto;
}

.three_box li img{
	display:block;
	width:100%;
}


.order_box a.contact_bana{
    background: rgba(0, 0, 0, 0) url("../../home/images/mail_icon_bana.png") no-repeat scroll center top 10px / 50px auto;
    font-size: 20px;
    padding: 65px 0 0;
    text-align: center;
	width:90%;
}

/*開閉QA*/

.accordionlist dt{padding-right: 40px;}
.accordionlist dd{padding-left:0px;}

.accordionlist .accordion_icon {
	position: absolute;
	width: 30px;
	height: 30px;
	top:42%;
	right:0px;
	margin:0 5px 0 0;
}
.accordionlist .accordion_icon span {
	position: absolute;
	left: 6px;
	width: 50%;
	height: 2px;
	background-color: #133f85;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}

}