@charset "UTF-8";
/* CSS Document */
i { vertical-align: -18%; font-size: 130%; padding: 0 8px 0 0;}
strong { font-weight: bold;}
.goast {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
}
/*===============================================
●PC　画面の横幅が769px以上
===============================================*/

@media screen and (min-width: 769px) {
	/* main visual */
	h2.main_v {
		width: 100%;
		height: 400px;
		text-align: center;
		margin: 0 auto;
		border-bottom: 16px solid #b4d2e6;
	}
	/* Sub Menu */
	.sub_m { width: 100%; overflow: hidden; margin: 0 0 32px 0;}
	.sub_m li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		border-right: 2px solid #ffffff;
		text-align: center;
		background-color: #f2f2f2;
		float: left;
	}
	.sub_m li a { display: block; padding: 16px 8px;} 
	.sub_m li a:hover { color: #ffffff !important;} 
	.sub_m li:last-child { border-right: none !important;}
	.here { 
		color: #ffffff;
		padding: 16px 8px;
	}
	.sub_m li a::before,
	.sub_m li a::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	.sub_m li a,
	.sub_m li a::before,
	.sub_m li a::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	/* 製品一覧 共通 (footer) */
	.pd_list { overflow: hidden; margin: 24px 0 0;}
	.first {margin: 24px 0 56px;}
	.pd_list li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		width: 25%;
		height: 85px;
		float: left;
		border: 1px solid #cccccc;
		border-right: none;
		position: relative;
		text-align: center;
	}
	/* ↓.second li:last-child { width: 313px !important;}は12個になったら削除！ */
	.second li:last-child { width: 313px !important;}
	.second li:nth-child(n+5) { border-top: none;}
	.pd_list li:nth-child(4n), .pd_list li:last-child { border-right: 1px solid #cccccc;}
	.pd_list figure {
		position: absolute;
		top: 8px;
		left: 0;
		margin: 0 !important;
	}
	.pd_list img {
		max-width: 80%;
		height: auto;
		width /***/:auto;
	}
	.pd_list p {
		font-size: 85%;
		color: #546E7A;
		line-height: 1;
		position: absolute;
		bottom: 8px;
		left: 0;
		right: 0;
	}
	dl.hov {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		-webkit-transition: .3s;
		transition: .3s;
		opacity: 0;
		color: #ffffff;
		padding: 16px 0;
	}
	dl.hov dd {margin: 8px 0 0;font-size: 85%;}
	.pd_list li:hover dl.hov { opacity: 1;}
	/*======== contents ========*/
	/* h3 */
	h3 {
		font-size: 130%;
		position: relative;
		line-height: 1;
		margin: 8px 0 8px 16px;
		padding: 16px 8px 8px 16px;
		clear: both;
	}
	h3:before {
		content: "";
		position: absolute;
		background: #b4d2e6;
		top: 0;
		left: -5px;
		height: 12px;
		width: 12px;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	h3:after {
		content: "";
		position: absolute;
		background: #506e9b;
		top: 15px;
		left: -10px;
		height: 8px;
		width: 8px;
		-moz-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	h3 + hr { border: 1px solid #506e9b;}
	/* goast button */
	.goast {
		display: block;
		color: #506e9b;
		font-size: 110%;
		width: 345px;
		padding: 16px;
		text-align: center;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: rgba(255,255,255,0.5);
		border: solid 5px #506e9b;
	}
	.goast:hover {
		color: #ffffff !important;
		background-color: #506e9b;
		transition: all .7s;
		/*font-size: 120%;*/
	}
	.goast:hover::before,
	.goast:hover::after {
		width: 0;
		height: 0;
		opacity: 0;
		transition: all .7s;
	}
	/* 概要 */
	hr + .lead, h4 + .lead  { margin: 24px 0;}
	.lead { margin: 0 0 24px 0; text-align: justify;}
	.cts_wrap {
		overflow: hidden;
		margin: 0 0 40px 0;
		position: relative;
	}
	.s_cts { width: 960px; margin: 0 auto 40px auto !important;}
	.s_cts dl dd p { text-align: justify;}
	.sys_wrap {
		overflow: hidden;
		margin: 24px 0 40px 0;
	}
	.btm_l { border-bottom: 1px dotted #cccccc; padding: 0 0 16px 0;}
	.l_cts {
		float: left;
		width: 46%;
	}
	.l_cts dt strong { font-size: 120%;}
	.r_cts {
		float: right;
		width: 51%;
	}
	.ct { text-align: center; margin: 0 auto;}
	.cts_wrap dl {margin: 24px 0 0;}
	.cts_wrap dl dd { margin: 16px 0 24px 0; text-align: justify;}
	.cts_wrap dl dd:last-child { margin: 8px 0 0 0;}
	.cts_wrap dl dd > div { text-align: center;  margin: 32px auto 16px;}
	.cts_wrap h4 { font-weight: bold; font-size: 120%;}
	img.btm {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	ul.point li {
		list-style: disc;
		margin: 8px 0 0 32px;
	}
	/* 他機能 */
	.app { clear: both; overflow: hidden; margin: 0 0 120px 0;}
	.app ul { width: 100%; display: table;}
	.app ul li {
		display: table-cell;
		height: 70px;
		vertical-align: middle;
		padding: 0 16px;
	}
	.app ul li > img {
		max-width: 100%;
		height: auto;
		width /***/:auto;
	}
	.app ul li:first-child {padding: 0 16px 0 0;width: 27%;}
	.app ul li:last-child { padding: 0 0 0 16px;}
	.sp_menu { display: none !important;}
	/* システム環境 */
	.sys_wrap dl {
		width: 100%;
		overflow: hidden;
		background-color: #f1efe9;
		margin: 0 !important;
		border-bottom: 8px solid #ffffff;
	}
	.sys_wrap dt, .sys_wrap dd {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		padding: 16px;
		float: left;
	}
	.sys_wrap dt { width: 25%; font-weight: bold;}
	.sys_wrap dd {
		width: 75%;
		border-left: 8px solid #ffffff;
		background: #f2f2f2 !important;
		word-break: break-all;
	}
	.sys_wrap ul li { list-style: disc; margin: 8px 0 8px 32px; line-height: 140%;}
	/* 導入事例 */
	ul.link_box { overflow: hidden; margin: 24px 0;}
	ul.link_box a:last-child { margin: 0 0 8px 0;}
	ul.link_box a {
		width: 306px;
		height: 240px;
		border: 1px solid #cccccc;
		background: #f2f2f2;
		float: left;
		margin: 0 8px 8px 0;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	ul.link_box a::before,
	ul.link_box a::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	ul.link_box a,
	ul.link_box a::before,
	ul.link_box a::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .5s;
		transition: all .5s;
	}	
	ul.link_box a:hover { background: #506e9b;}
	ul.link_box a:hover h4, ul.link_box a:hover p { color: #ffffff !important;}
	/* image box */
	.img_box { line-height: 0;}
	/* under box */
	.desc {
		padding: 8px;
		position: absolute;
		bottom: 0;
		width: 95%;
		height: 56px;
	}
	ul.link_box h4 {
		font-weight: bold;
		font-size: 120%;
		margin: 16px 0 0 8px;
		color: #506e9b;
		line-height: 1;
	}
	ul.link_box p {
		color: #333333;
		font-size: 80%;
		padding: 8px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.all {
		text-align: center;
		font-size: 1.1rem;
		margin: 24px 0 0;
	}
} 

/*===============================================
● TB　画面の横幅が641px〜768px 
===============================================*/

@media screen and (max-width: 768px) and (min-width: 641px)  {
	/* main visual */
	h2.main_v {
		width: 100%;
		height: auto;
		text-align: center;
		margin: 0 auto;
		border-bottom: 16px solid #b4d2e6;
	}
	/* Sub Menu */
	.sub_m { width: 100%; overflow: hidden;margin: 0 0 16px 0;}
	.sub_m li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		border-right: 2px solid #ffffff;
		text-align: center;
		background-color: #f2f2f2;
		float: left;
	}
	.sub_m li a { display: block; padding: 12px 8px;} 
	.sub_m li a:hover { color: #ffffff !important;} 
	.sub_m li:last-child { border-right: none !important;}
	.here { 
		color: #ffffff;
		padding: 12px 8px;
	}
	.sub_m li a::before,
	.sub_m li a::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	.sub_m li a,
	.sub_m li a::before,
	.sub_m li a::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	.br_n { border-right: none !important;}
	/* 製品一覧 共通 (footer) */
	.pd_list {overflow: hidden;margin: 16px 0 0;}
	.first {margin: 16px 0 39px;}
	.pd_list li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		width: 25%;
		padding: 1.5% 0;
		float: left;
		border: 1px solid #cccccc;
		border-right: none;
		position: relative;
		text-align: center;
	}
	.pd_list a {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	/* ↓.second li:last-child { width: 313px !important;}は12個になったら削除！ */
	.second li:last-child {width: 25.1% !important;}
	.second li:nth-child(n+5) { border-top: none;}
	.second li:last-child { padding: 1.4% 0;}
	.pd_list li:nth-child(4n), .pd_list li:last-child { border-right: 1px solid #cccccc;}
	.pd_list figure { line-height: 0;}
	.pd_list img {
		max-width: 80%;
		height: auto;
		width /***/:auto;
	}
	.pd_list p {
		display: none;
	}
	dl.hov { display: none;}
	/*======== contents ========*/
	/* h3 */
	h3 {
		font-size: 130%;
		position: relative;
		line-height: 1;
		margin: 8px 0 16px 16px;
		padding: 16px 8px 8px 16px;
	}
	h3:before {
		content: "";
		position: absolute;
		background: #b4d2e6;
		top: 0;
		left: -5px;
		height: 12px;
		width: 12px;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	h3:after {
		content: "";
		position: absolute;
		background: #506e9b;
		top: 15px;
		left: -10px;
		height: 8px;
		width: 8px;
		-moz-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	h3 + hr { border: 1px solid #506e9b;}
	/* goast button */
	.goast {
		display: block;
		color: #506e9b;
		font-size: 110%;
		width: 80%;
		padding: 16px;
		text-align: center;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: rgba(255,255,255,0.5);
		border: solid 5px #506e9b;
		margin: 0 auto;
	}
	.goast:hover {
		color: #ffffff !important;
		background-color: #506e9b;
		transition: all .7s;
	}
	.goast:hover::before,
	.goast:hover::after {
		width: 0;
		height: 0;
		opacity: 0;
		transition: all .7s;
	}
	/* 概要 */
	hr + .lead, h4 + .lead  { margin: 24px 0;}
	.lead { margin: 0 0 24px 0;}
	.cts_wrap {
		overflow: hidden;
		margin: 0 0 40px 0;
	}
	.sys_wrap {
		overflow: hidden;
		margin: 24px 0 40px 0;
	}
	.btm_l { border-bottom: 1px dotted #cccccc; padding: 0 0 16px 0;}
	.s_cts dl dd p { text-align: justify;}
	.l_cts {
		float: none;
		width: 100%;
	}
	.l_cts dt strong { font-size: 120%;}
	.r_cts {
		float: none;
		width: 100%;
	}
	.ct { text-align: center; margin: 0 auto;}
	.cts_wrap dl { margin: 16px;}
	.cts_wrap dl dd { margin: 16px 0 24px 0;}
	.cts_wrap dl dd:last-child { margin: 8px 0 0 0;}
	.cts_wrap dl dd > div { text-align: center;  margin: 32px auto 16px;}
	.cts_wrap h4 { font-weight: bold; font-size: 120%;}
	ul.point li {
		list-style: disc;
		margin: 8px 0 0 32px;
	}
	/* 他機能 */
	.app { clear: both; overflow: hidden; margin: 0 0 80px 0;}
	.app ul { width: 100%;}
	.app ul li {
		float: left;
		text-align: center;
		width: 50%;
		height: 65px;
		margin: 0 0 16px 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.app ul li:nth-child(3) { padding: 20px 0 0 0 !important;}
	.sp_menu { display: none !important;}
	/* システム環境 */
	.sys_wrap dl {
		width: 100%;
		overflow: hidden;
		background-color: #f1efe9;
		border-bottom: 8px solid #ffffff;
	}
	.sys_wrap dt, .sys_wrap dd {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		padding: 16px;
		float: left;
	}
	.sys_wrap dt { width: 25%;}
	.sys_wrap dd {
		width: 75%;
		border-left: 8px solid #ffffff;
		background: #f2f2f2 !important;
		word-break: break-all;
	}
	.sys_wrap ul li { list-style: disc; margin: 8px 0 8px 32px; line-height: 140%;}
	/* 導入事例 */
	ul.link_box {overflow: hidden;width: 82.5%;margin: 24px auto 0;}
	ul.link_box a:nth-child(2n) { margin: 0 0 8px 0;}
	ul.link_box a {
		width: 306px;
		height: 240px;
		border: 1px solid #cccccc;
		background: #f2f2f2;
		float: left;
		margin: 0 8px 8px 0;
		position: relative;
	}
	ul.link_box a::before,
	ul.link_box a::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	ul.link_box a,
	ul.link_box a::before,
	ul.link_box a::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .5s;
		transition: all .5s;
	}	
	ul.link_box a:hover { background: #506e9b;}
	ul.link_box a:hover h4, ul.link_box a:hover p { color: #ffffff !important;}
	/* image box */
	.img_box { line-height: 0;}
	.img_box img { width: 100%;}
	/* under box */
	.desc {
		padding: 8px;
		position: absolute;
		bottom: 0;
		width: 95%;
		height: 56px;
	}
	ul.link_box h4 {
		font-weight: bold;
		font-size: 120%;
		margin: 16px 0 0 8px;
		color: #506e9b;
		line-height: 1;
	}
	ul.link_box p {
		color: #333333;
		font-size: 80%;
		padding: 8px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.all {
		text-align: center;
		font-size: 1.1rem;
		margin: 24px 0 0;
	}
}

/*===============================================
● SP　画面の横幅が0px〜640px 
===============================================*/

@media screen and (max-width: 640px) and (min-width: 0px) {
	/* main visual */
	h2.main_v {
		width: 100%;
		height: auto;
		text-align: center;
		margin: 0 auto;
		border-bottom: 16px solid #b4d2e6;
	}
	/* 製品一覧 共通 (footer) */
	.pd_list { overflow: hidden; margin: 16px 0 0;}
	.first { margin: 16px 0 39px;}
	.pd_list li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		width: 50%;
		padding: 3% 0;
		float: left;
		border: 1px solid #cccccc;
		border-right: none;
		position: relative;
		text-align: center;
	}
	.pd_list a {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.pd_list li:nth-child(n+3) { border-top: none;}
	.second li:nth-child(n+3) {  width: 50.1%;}
	.second li:nth-child(2n) { width: 49.9%;}
	.second li:nth-child(2) {padding: 3.7%;}
	.second li:last-child {padding: 3.4%;}
	.pd_list li:nth-child(2n), .pd_list li:last-child { border-right: 1px solid #cccccc;}
	.pd_list figure { line-height: 0;}
	.pd_list img {
		max-width: 80%;
		height: auto;
		width /***/:auto;
	}
	.pd_list p {
		display: none;
	}
	dl.hov { display: none;}
	/*======== contents ========*/
	/* h3 */
	h3 {
		font-size: 130%;
		position: relative;
		margin: 8px 0 8px 16px;
		padding: 16px 8px 8px 16px;
		line-height: 150%;
	}
	h3:before {
		content: "";
		position: absolute;
		background: #b4d2e6;
		top: 0;
		left: -5px;
		height: 12px;
		width: 12px;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	h3:after {
		content: "";
		position: absolute;
		background: #506e9b;
		top: 15px;
		left: -10px;
		height: 8px;
		width: 8px;
		-moz-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	h3 + hr { border: 1px solid #506e9b;}
	/* goast button */
	.goast {
		display: block;
		color: #506e9b;
		font-size: 110%;
		width: 90%;
		padding: 16px;
		text-align: center;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: rgba(255,255,255,0.5);
		border: solid 5px #506e9b;
		margin: 0 auto;
	}
	.goast:hover {
		color: #ffffff !important;
		background-color: #506e9b;
		transition: all .7s;
	}
	.goast:hover::before,
	.goast:hover::after {
		width: 0;
		height: 0;
		opacity: 0;
		transition: all .7s;
	}
	/* 概要 */
	hr + .lead, h4 + .lead  { margin: 24px 0;}
	.lead { margin: 0 0 24px 0;}
	.cts_wrap {
		overflow: hidden;
		margin: 0 0 40px 0;
	}
	.sys_wrap {
		overflow: hidden;
		margin: 24px 0 40px 0;
	}
	.btm_l { border-bottom: 1px dotted #cccccc; padding: 0 0 16px 0;}
	.s_cts dl dd p { text-align: justify;}
	.l_cts {
		float: none;
		width: 100%;
	}
	.l_cts dt strong { font-size: 120%;}
	.r_cts {
		float: none;
		width: 100%;
	}
	.ct { text-align: center; margin: 0 auto;}
	.cts_wrap dl {margin: 16px 0;}
	.cts_wrap dl dd { margin: 16px 0 24px 0;}
	.cts_wrap dl dd  > div { margin: 16px 0;}
	.cts_wrap dl dd:last-child { margin: 8px 0 0 0;}
	.cts_wrap h4 { font-weight: bold; font-size: 120%;}
	ul.point li {
		list-style: disc;
		margin: 8px 0 0 24px;
	}
	/* 他機能 */
	.app { clear: both; overflow: hidden; margin: 0 0 40px 0;}
	.app ul { width: 100%;}
	.app ul > li {
		float: none;
		text-align: center;
		width: 100%;
		height: 65px;
		margin: 0 0 16px 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.app ul > li.sp_menu { height: auto !important; }
	/* Sub Menu */
	.sub_m { width: 100%; overflow: hidden; margin: 0 0 16px 0;}
	.sub_m li {
		text-align: left !important;
		height: auto !important;
		margin: 0 0 16px 16px !important;
		padding: 0 0 8px 0;
		border-bottom: 1px dotted #333333;
	}
	.sub_m li:nth-child(2) { padding: 0 0 8px 0 !important;}
	.sub_m li a {
		display: block;
		height: 24px;
	}
	/* システム環境 */
	sys_wrap dl {
		width: 100%;
		background-color: #f1efe9;
		overflow: hidden;
	}
	.sys_wrap dt, .sys_wrap dd {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		padding: 16px;
		float: none;
		width: 100%;
	}
	.sys_wrap dt { font-weight: bold; background-color: #f1efe9;/* border-bottom: 5px solid #ffffff; */}
	.sys_wrap dd {
		padding: 8px !important;
		background-color: #f2f2f2;
		border-bottom: 8px solid #ffffff;
		word-break: break-all;
	}
	.sys_wrap ul li {
		font-size: 90%;
		line-height: 140%;
		list-style: disc;
		margin: 8px 0 8px 24px;
	}
}