@charset "utf-8";


/* ixctg
---------------------------------------------------- */

.ixctg {
	opacity: 0;
	transition: 1.8s;
	-webkit-transform: translate(0,60px);
	transform: translate(0,60px);
}
.ixctg .smpbgimg {
	display: none;
}
.ixctgleft {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.ixctg_01 .ixctgleft {
	background: url(../images/contents_pc.jpg) no-repeat center center;
	background-size: cover;
}
.ixctg_03 .ixctgleft {
	background: url(../images/bposervice_pc.jpg) no-repeat center center;
	background-size: cover;
}
.ixctgleft .text_area {
	width: 50%;
	padding: 80px;
	z-index: 1;
	position: relative;
}
.ixctgsub {
	margin: 0 0 30px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.2em;
	color: #fff;
	line-height: 2.4em;
}
.ixctgsub span {
	display: block;
	margin-top: -4px;
	font-size: 30px;
	font-family: 'Spectral', serif;
	letter-spacing: 0em;
}
.text_area .textbox {
	margin: 0 0 40px;
	font-size: 13px;
	font-weight: normal;
	color: #fff;
	line-height: 1.6em;
}
.ixctgleft .morebtnbox {
	width: 50%;
	margin: 0 50% 0 0;
}
.ixctgright {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: -1px;
}
.ixctg_02 .ixctgright {
	background: url(../images/dataentry_pc.jpg) no-repeat center center;
	background-size: cover;
}
.ixctg_04 .ixctgright {
	background: url(../images/system_pc.jpg) no-repeat center center;
	background-size: cover;
}
.ixctgright .text_area {
	width: 48%;
	margin: 0 0 0 52%;
	padding: 80px;
	z-index: 1;
	position: relative;
}
.ixctgright .morebtnbox {
	width: 50%;
	margin: 0 0 0 50%;
}

/* cont01
---------------------------------------------------- */

#cont01 {
	padding: 0;
}
#cont01 .box {
	padding: 50px 0;
}
#cont01 .box .gridWrapper {
	width: 100%;
	margin: 0 auto 20px;
}
#cont01 .box .grid {
	position: relative;
	opacity: 0;
	transition: 1.0s;
	-webkit-transform: translate(0,60px);
	transform: translate(0,60px);
	width: 49%;
	margin: 0;
	background: #000;
}
#cont01 .box .gridWrapper .grid02 {
	transition: 1.8s;
	margin: 0 0 0 2%;
}
#cont01 .box .grid03 {
	transition: 2.4s;
	width: 100%;
}
#cont01 .box .grid03 span.pconly {
	display: block;
}
#cont01 .box .grid03 span.smponly {
	display: none;
}
#cont01 .box .grid img {
	width: 100%;
	height: auto;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
	transition: all 0.2s;
}
#cont01 .box .grid a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
#cont01 .box .grid:hover img {
	opacity: 0.8;
}
#cont01 .box .grid .ix01sub {
	position: absolute;
	top: 48%;
	left: 50%;
	font-size: 20px;
	color: #fff;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1;
}
#cont01 .box .grid .ix01sub span {
	display: block;
	font-size: 1.4em;
	font-family: 'Spectral', serif;
	letter-spacing: 0.1em;
	margin-top: 8px;
}


/* ixancbox
---------------------------------------------------- */

#ixancbox {
	padding: 0;
	background: #eef7fd;
}
#ixancbox .box {
	padding: 80px 0 50px;
}
#ixancbox .box .gridWrapper {
	width: 100%;
	margin: 0 auto 20px;
}
#ixancbox .box .grid {
	position: relative;
	opacity: 0;
	transition: 1.0s;
	-webkit-transform: translate(0,60px);
	transform: translate(0,60px);
	width: 49%;
	margin: 0;
}
#ixancbox .box .gridWrapper .grid02 {
	transition: 1.8s;
	margin: 0 0 0 2%;
}
#ixancbox .box .grid  h2 {
	position: relative;
	width: 90%;
	font-size: 20px;
	color: #3280c4;
	margin: 0 10% 16px 0;
}
#ixancbox .box .grid  h2 span {
	position: relative;
	padding: 0 10px 0 0;
	background: #eef7fd;
}
#ixancbox .box .grid  h2:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 1px;
	content: '';
	background: #3280c4;
}
#ixancbox .box .grid  li a {
	font-size: 15px;
	color: #666;
	margin: 0;
	padding: 2px 0 4px 10px;
	text-decoration: underline;
}
#ixancbox .box .grid  li a:hover {
	color: #3280c4;
	text-decoration: none;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1024px){

	.smptopbnr {
		display: block;
		background: #333;
	}
	.smptopbnr .grid {
		float: left;
	}
	.smptopbnr .grid.grid01 {
		width: 52%;
		margin: 0 2%;
	}
	.smptopbnr .grid.grid01 ul {
		padding: 15px 0 0;
	}
	.smptopbnr .grid.grid01 ul li {
		padding: 0 0 5px;
	}
	.smptopbnr .grid.grid02 {
		width: 40%;
		margin: 0 2%;
	}
	.smptopbnr .grid img {
		width: 100%;
		height: auto;
	}
	.smptopbnr .grid img {
		width: 100%;
		height: auto;
	}


.box {
    width: 100%;
    margin: 0 auto;
}


/* cont01
---------------------------------------------------- */

#cont01 {
	overflow: hidden;
	padding: 0;
}
#cont01 .box {
	width:94%;
	margin: 0 3%;
	padding: 100px 0;
}
#cont01 .box .absbox {
	display: block;
	padding: 0 0 100px;
	clear: both;
}


/* cont02
---------------------------------------------------- */

#cont02 {
	overflow: hidden;
	padding: 0;
}
#cont02 .box {
	width:94%;
	margin: 0 3%;
	padding: 100px 0;
}
#cont02 .box .absbox {
	display: block;
	padding: 0 0 0px;
	clear: both;
}

/* cont03
---------------------------------------------------- */

#cont03 {
	overflow: hidden;
	padding: 0;
}
#cont03 .box {
	width:94%;
	margin: 0 3%;
	padding: 100px 0;
}
#cont03 .box .absbox {
	display: block;
	padding: 0 0 0px;
	clear: both;
}
#cont03 .box .textbox2 {
	padding: 0;
}


/* cont04
---------------------------------------------------- */



/* ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 896px){


/* ixctg
---------------------------------------------------- */

.ixctg {
	opacity: 0;
	transition: 1.8s;
	-webkit-transform: translate(0,60px);
	transform: translate(0,60px);
	background: #3280c4;
}
.ixctg .smpbgimg {
	display: block;
	width: 100%;
}
.ixctg .smpbgimg img {
	width: 100%;
	height: auto;
}
.ixctgleft {
	display: block;
}
.ixctg_01 .ixctgleft,
.ixctg_02 .ixctgright,
.ixctg_03 .ixctgleft,
.ixctg_04 .ixctgright {
	background: none;
}
.ixctgleft .text_area,
.ixctgright .text_area {
	width: 90%;
	margin: 0 5%;
	padding: 50px 0 60px;
}
.ixctgleft .morebtnbox,
.ixctgright .morebtnbox {
	width: 60%;
	margin: 0 20%;
}


/* cont01
---------------------------------------------------- */

#cont01 .box .grid {
	display: block;
	width: 94%;
	margin: 0 3%;
}
#cont01 .box .gridWrapper .grid01 {
	margin-bottom: 20px;
}
#cont01 .box .gridWrapper .grid02 {
	transition: 1.8s;
	margin: 0 3%;
}
#cont01 .box .grid03 {
	transition: 2.4s;
	width: 94%;
	margin: 0 3%;
}
#cont01 .box .grid03 span.pconly {
	display: none;
}
#cont01 .box .grid03 span.smponly {
	display: block;
}
#cont01 .box .grid .ix01sub {
	position: absolute;
	top: 48%;
	left: 50%;
	font-size: 20px;
	color: #fff;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1;
}
#cont01 .box .grid .ix01sub span {
	display: block;
	font-size: 1.4em;
	font-family: 'Spectral', serif;
	letter-spacing: 0.1em;
	margin-top: 8px;
}



/* cont02
---------------------------------------------------- */

#cont02 {
	overflow: hidden;
	padding: 0;
}
#cont02 .box {
	width: 94%;
	margin: 0 3%;
	padding: 60px 0 30px;
}
#cont02 .box .absbox {
	padding: 0 0 30px;
}
#cont02 .box .ph01 {
	transition: 0.6s;
	float: none !important;
	width: 70%;
	margin: 0 15% 30px;
	padding: 0;
}
#cont02 .box .ph02 {
	transition: 0.6s;
	width: 70%;
	float: none !important;
	margin: 0 15% 30px;
	padding: 0;
}
#cont02 .box .textbox .tinbox {
	padding: 30px;
}
#cont02 .box .textbox2 ul {
	margin: 0;
	padding: 0 20px;
}
#cont02 .box .textbox {
	color: #111;
}
#cont02 .box .textbox1 {
	transition: 0.6s;
	float: none !important;
	width: 84%;
	margin: -50px 8% 30px;
}
#cont02 .box .textbox2 {
	transition: 0.6s;
	float: none !important;
	width: 84%;
	margin: -50px 8% 30px;
}


/* cont02
---------------------------------------------------- */

#cont03 {
	overflow: hidden;
	padding: 0;
}
#cont03 .box {
	width: 84%;
	margin: 0 8%;
	padding: 60px 0 30px;
}
#cont03 .box .absbox {
	padding: 0 0 10px;
}
#cont03 .box .textbox {
	color: #111;
}
#cont03 .box .textbox1 {
	transition: 0.6s;
	float: none !important;
	width: 94%;
	margin: 0 3% 30px;
}
#cont03 .box .ph01,
#cont03 .box .ph02,
#cont03 .box .ph03,
#cont03 .box .ph04,
#cont03 .box .ph05,
#cont03 .box .ph06 {
	transition: 0.6s;
	width: 94%;
	float: none !important;
	margin: 0 3% 30px;
	padding: 0;
}
#cont03 .box .textbox2 {
	transition: 0.6s;
	float: none !important;
	width: 94%;
	margin: 0 3% 30px;
}

.entrybnr {
	transition: 0.6s;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
	width: 90%;
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
}
.entrybnr img {
	width: 100%;
	height: auto;
}


/* cont04
---------------------------------------------------- */






}



/* ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 640px){


/* cont01
---------------------------------------------------- */



/* cont02
---------------------------------------------------- */



/* cont03
---------------------------------------------------- */


/* cont04
---------------------------------------------------- */



/* cont05
---------------------------------------------------- */

}



/* ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 480px){


/* ixctg
---------------------------------------------------- */

.ixctgleft .morebtnbox,
.ixctgright .morebtnbox {
	width: 100%;
	margin: 0;
}


}