@charset "utf-8";

/******************************************************************************
/* 利用事例メニュー
*******************************************************************************/



#subnav {
	overflow:hidden;
	width: 300px;
	margin:0px auto 0px auto;
}

ul#subnav li {
	width: 100%;
	text-align:left;

}

#subnav li a{
text-decoration:none;
color:#222;
display:block;
font-size:85%;
font-weight:500;
padding:15px 15px;
transition: all 0.2s ease 0s;
height: auto;
line-height:150%;
}



#subnav li a.active,
#subnav li a:hover{
color: #ffffff;
background-color: #76CB5C;
}


#subnav li{
	width: 100%;
	float:left;
	text-align:left;
	border-top:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;

}

#subnav li:last-child{
	border-bottom:1px solid #cccccc;

}

/******************************************************************************
/* 利用事例レイアウト
*******************************************************************************/



.result_main {
	width: 100%;
	margin: 0px auto 50px auto;
	font-size: 90%;

}

.result_left {
	float: left;
	width: 300px; 
	margin-right: 20px;
}

.result_right {
	float: right;
	width: calc(100% - 330px);
	text-align: left;
	margin: 0px auto 0px auto;

}





/******************************************************************************
/* 利用事例本文
*******************************************************************************/



.result_box {
	width: 100%;
	margin: 0px auto 0 auto;
	color: #5d627b;
	background: white;
	border-radius: 10px;
	border: solid 1px #cccccc;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	text-align: center;
}


.result_box .subimage {
	position: relative;
	margin: 0px auto 0 auto;
}

.result_box .subimage_img {
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
}


.result_box .subimage_on {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 60%;
	height: auto;

}


.result_box_in {
	width: 90%;
	margin: 40px auto 40px auto;
	text-align: left;
}

.result_box_in p {
	line-height: 150%;
	margin-top: 30px;
}


.result_box_in .blue {
	color: #5AC2DC;
	font-weight: 500;
	line-height: 150%;
	margin-top: 20px;
	margin-bottom: 10px;

}



.result_box_in span {
	font-size: 90%;
	color: #1796A4;
}





.result_title {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #76CB5C;
	font-size: 110%;
	font-weight:500;
	margin-top: 40px;
	margin-bottom: 30px;
	color: #76CB5C;

}

.result_title::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}




.result_main {
width: 100%;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;

}





.image_area img {
  float: left;
  margin: 0px 30px 20px 0;
}

.image_area2 img {
  float: right;
  margin: 10px 0px 30px 30px;
}

.image_area .width48 {
	width: 48%;
}



/******************************************************************************
/* タイトル
*******************************************************************************/

a#result001::before {
  content:'';
  display: block;
  padding-top: 140px;
  margin-top: -140px;
}



/******************************************************************************
/* タイトル
*******************************************************************************/




h1 {
 	position: relative;
	width: 100%;
	margin: 20px auto 0px auto;
	padding:0.5em 0.5em 0.5em 2.0em;
	border: 1px solid #CCC;
	border-radius: 5px;
	font-size: 18px;
	font-weight:500;
	letter-spacing: 1.5px;
	text-align: left;
	color: #3C3C3C;
}
 
h1::after {
	position: absolute;
	top: 50%;
 	left:1.0em;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:20px;
	background-color: #76CB5C;
}



h2 {
	position: relative;
	padding-bottom: 10px;
	border-bottom: 4px solid #ccc;
	text-align: left;
	font-size: 120%;
	line-height: 110%;
	font-weight:500;
	margin-bottom: 10px;
	color: #76CB5C;
}

h2::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #76CB5C;
}


h3 {
	padding: 0.1em 0.5em;
	color: #494949;
	background: transparent;
	border-left: solid 5px #9dc04c;
	font-size: 110%;
	font-weight:400;
	margin-top: 50px;
	margin-bottom: 20px;
	color: #9dc04c;
}



h4 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #9dc04c;
	font-size: 110%;
	font-weight:400;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #9dc04c;

}
h4::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}



h5 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #3498db;
	margin-bottom: 30px;
}
h5::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}




h6 {
	position: relative;
	display: inline-block;
	padding: 0 55px;
	margin-bottom: 10px;
	color: #78B553;
}

h6:before, h6:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #78B553;
}

h6:before {
	left:0;
}
h6:after {
	right: 0;
}


span.red {
	font-weight: 600;
	color: #BB0931;
}

span.blue {
	font-weight: 600;
	color: #1796A4;
}



/******************************************************************************
/* スマートフォン・タブレットサイズ
*******************************************************************************/


@media screen and (max-width:768px) {




/******************************************************************************
/* 利用事例レイアウト
*******************************************************************************/



.result_main {
	width: 100%;
	margin:0px auto 50px auto;
	font-size: 100%;

}

.result_left {
	float: left;
	width: 100%; 
	margin-right: 20px;
}

.result_right {
	float: right;
	width: 100%; 
	text-align: left;
	margin: 0px auto 0;

}


/******************************************************************************
/* 利用事例メニュー
*******************************************************************************/



#subnav {
	overflow:hidden;
	width: 100%;
	margin:30px auto 30px auto;
}

ul#subnav {
display:table;
table-layout: fixed;
	width: 100%;
	text-align:left;


}

#subnav li a{
text-decoration:none;
color:#222;
display:block;
font-size:80%;
font-weight:500;
padding:15px 15px;
transition: all 0.2s ease 0s;
height: auto;
line-height:150%;
}



#subnav li a.active,
#subnav li a:hover{
color: #ffffff;
background-color: #76CB5C;
}


#subnav li{
    display:table-cell;
	width: 100%;
	float:left;
	text-align:left;

}

#subnav li:last-child{
    display:table-cell;


}




/******************************************************************************
/* タイトル
*******************************************************************************/

h1 {
	font-size: 110%;
	margin: 80px auto 20px auto;

}
 



h2 {
	position: relative;
	padding-bottom: 10px;
	border-bottom: 4px solid #ccc;
	text-align: left;
	font-size: 100%;
	line-height: 110%;
	font-weight:500;
	margin-bottom: 10px;
	color: #76CB5C;
}

h2::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #76CB5C;
}


h3 {
	padding: 0.1em 0.5em;
	color: #494949;
	background: transparent;
	border-left: solid 5px #9dc04c;
	font-size: 100%;
	font-weight:400;
	margin-top: 50px;
	margin-bottom: 20px;
	color: #9dc04c;
}



h4 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #9dc04c;
	font-size: 100%;
	font-weight:400;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #9dc04c;

}
h4::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}



h5 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #3498db;
	margin-bottom: 30px;
}
h5::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}




h6 {
	position: relative;
	display: inline-block;
	padding: 0 55px;
	margin-bottom: 10px;
	color: #78B553;
}

h6:before, h6:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #78B553;
}

h6:before {
	left:0;
}
h6:after {
	right: 0;
}


span.red {
	font-weight: 600;
	color: #BB0931;
}

span.blue {
	font-weight: 600;
	color: #1796A4;
}




/******************************************************************************
/* 利用事例レイアウト
*******************************************************************************/



.result_main {
	width: 100%;
	margin:0px auto 50px auto;
	font-size: 100%;

}

.result_left {
	float: right;
	width: 100%; 
	margin-right: 0px;
}

.result_right {
	float: left;
	width: 100%; 
	text-align: left;
	margin: 0px auto 0;

}



/******************************************************************************
/* トップメニューエリア
*******************************************************************************/



ul.submenu_nav {
	margin-top: 20px;
	margin-bottom: 20px;
	width:100%; 
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


ul.submenu_nav::after {
	content: "";
	display: block;
	width: 49%;
	height: 0;
}

 
ul.submenu_nav li {
	letter-spacing:normal;
	display: inline-block;
	width: 49%; 
	vertical-align: top;
	text-align: center;
	margin-bottom: 20px;

}







/******************************************************************************
/* タイトル
*******************************************************************************/

h1 {
	margin: 20px auto 0px auto;
	font-size: 14px;
}
 





h2 {

	font-size: 90%;
	margin-bottom: 0px;

}




h3 {
	font-size: 100%;
}



h6 {
	position: relative;
	display: inline-block;
	padding: 0 35px;
	margin-bottom: 10px;
	color: #78B553;
}

h6:before, h6:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 30px;
	height: 1px;
	background-color: #78B553;
}

h6:before {
	left:0;
}
h6:after {
	right: 0;
}



/******************************************************************************
/* 利用事例レイアウト
*******************************************************************************/



.result_main {
	width: 100%;
	margin: 20px auto 30px auto;
	font-size: 100%;

}


.image_area {
	position: relative;
	width: 100%;
  display: flow-root;
    /*コレ*/margin: auto;
}

.image_area img {
	position: relative;
    /*コレ*/display: block;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
	margin-top: 190px;
	margin-bottom: -180px;
}


.image_area2 {
	position: relative;
	width: 100%;
  display: flow-root;
    /*コレ*/margin: auto;
}


.image_area2 img {
	position: relative;
    /*コレ*/display: block;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
	margin-top: 190px;
	margin-bottom: -180px;

}


.image_area3 {
	position: relative;
	width: 100%;
  display: flow-root;
    /*コレ*/margin: auto;
}


.image_area3 img {
	position: relative;
    /*コレ*/display: block;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
	margin-top: 80px;
	margin-bottom: -100px;

}


.image_area4 {
	position: relative;
	width: 100%;
  display: flow-root;
    /*コレ*/margin: auto;
}


.image_area4 img {
	position: relative;
    /*コレ*/display: block;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
	margin-top: 140px;
	margin-bottom: -100px;

}


.image_area5 {
	position: relative;
	width: 100%;
  display: flow-root;
    /*コレ*/margin: auto;
}


.image_area5 img {
	position: relative;
    /*コレ*/display: block;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
	margin-top: 180px;
	margin-bottom: -100px;

}



.image_area6 {
	position: relative;
	width: 100%;
  display: flow-root;
    /*コレ*/margin: auto;
}

.image_area6 img {
	position: relative;
    /*コレ*/display: block;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
	margin-top: 160px;
	margin-bottom: -130px;
}




.image_area .width48 {
	width: 48%;
    /*コレ*/display: block;
}


img.width40 {
	width: 30%;
    /*コレ*/display: block;
	margin-top: 80px;
	margin-bottom: -80px;
}

.image_area4 {
	position: relative;
	width: 100%;
  display: flow-root;
  margin: 10px auto -20px auto;
}


.image_area4 img {
  float: left;
}



}