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


/*PC*/
@media print, screen and (min-width: 600px) {


/*----------------------------------------------------

 head

----------------------------------------------------*/
.hedImg { width: 100%; height: 360px; background: url(../images/development/hedImg.jpg) center center no-repeat; background-size: cover; margin: 0 auto 80px; text-align: center; color: #FFF; padding: 100px 0 0; box-sizing: border-box;}
.hedImg h2 { width: 100%; font-size: 66px; font-family:Arial, Helvetica, sans-serif;}
.hedImg p { width: 100%; font-size: 20px;}

.navBg ul li:nth-of-type(4) a { color: #eb6100;}



/*----------------------------------------------------

 sec01

----------------------------------------------------*/
.sec01 {}
.sec01 .ttl { text-align: center; padding: 60px 0 80px 0;}
.sec01 .ttl h3 { font-size: 48px; font-family : 'SimSun','sans-serif'; color: #eb6100; margin: 0 auto 20px;}
.sec01 .ttl p { width: 100%; font-size: 14px;}

.sec01 ul { width: 1080px; margin: auto auto 50px; list-style: none;}
.sec01 ul li { width: 252px; float: left; margin: auto 24px auto 0;}
.sec01 ul li:nth-child(4n+4) { margin: auto 0 auto 0;}
.sec01 ul li img { width: 100%; margin: 0 0 10px;}
.sec01 ul li h4 { font-size: 24px; color: margin: 0 0 10px; color: #eb6100;}
.sec01 ul li p { font-size: 12px; margin: 0 0 10px;}
.sec01 ul li p:last-child { font-size: 21px; font-family:Arial, Helvetica, sans-serif; color: margin: 0 0 10px; color: #eb6100;}



/*----------------------------------------------------

 sec01

----------------------------------------------------*/
.sec01 { width: 100%; margin: 0;}
/*.sec01 .w1200 { position: relative;}*/
.sec01 .parallelogram {
	margin: 80px 0 0;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 65px 60px 120px;
    color: #000;
}
.sec01 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,0.8);
    content: "";
}
.sec01 .parallelogram h3 { font-size: 48px; color: #eb6100; font-family : 'SimSun','sans-serif'; margin: 0 0 20px;}
.sec01 .parallelogram p { font-size: 15px; line-height: 25px;}




/*----------------------------------------------------

 sec02

----------------------------------------------------*/
.sec02 { width: 100%; margin: 0; padding: 0 0 0; background: #eaf0f5;}
.sec02 .ttl { text-align: center; padding: 60px 0 30px 0;}
.sec02 .ttl h3 { font-size: 48px; font-family : 'SimSun','sans-serif'; color: #000; margin: auto auto 10px;}
.sec02 .ttl p { width: 100%; font-size: 14px; margin: 0 0 10px;}

.sec02 ul { width: 420px; margin: auto; list-style: none;}
.sec02 ul li { width: 130px; float: left; margin: auto 15px auto 0;}
.sec02 ul li:nth-child(3n+3) { margin: auto 0 auto 0;}
.sec02 ul li img { width: 100%; height: auto; margin: 0 0 2px; border: solid 1px #000;}
.sec02 ul li p { font-size: 14px; margin: 0;}







/*----------------------------------------------------

 sec03

----------------------------------------------------*/
.sec03 { width: 100%; padding: 0 0 60px; background: #eaf0f5; max-height: 720px;}
.sec03 .parallelogramBg {
	margin: 80px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 0 60px 0;
    color: #000;
	width: 100%;
}

.sec03 .parallelogramBg:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,1.0);
    content: "";
}

.sec03 .w1080 .parallelogram {
	margin: -70px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: 286px;
}
.sec03 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec03 .w1080 .parallelogram h4 { font-size: 19px; color: #FFF; margin: 0 0 10px;}
.sec03 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec03 .w1080 .item01 { float: right; margin: -300px 0 0 0;}
  



/*----------------------------------------------------

 sec04

----------------------------------------------------*/
.sec04 { width: 100%; padding: 0 0 60px; background: #eaf0f5; max-height: 720px;}
.sec04 .parallelogramBg {
	margin: 20px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 0 60px 0;
    color: #000;
	width: 100%;
}

.sec04 .parallelogramBg:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,1.0);
    content: "";
}

.sec04 .w1080 .parallelogram {
	float: right;
	margin: 80px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: 286px;
}
.sec04 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec04 .w1080 .parallelogram h4 { font-size: 19px; color: #FFF; margin: 0 0 10px;}
.sec04 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec04 .w1080 .item01 { float: left; margin: -300px 0 0 0; position: relative;}






/*----------------------------------------------------

 sec05

----------------------------------------------------*/
.sec05 { width: 100%; padding: 0 0 60px; background: #eaf0f5; max-height: 720px;}
.sec05 .parallelogramBg {
	margin: 80px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 0 60px 0;
    color: #000;
	width: 100%;
}

.sec05 .parallelogramBg:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,1.0);
    content: "";
}

.sec05 .w1080 .parallelogram {
	margin: -70px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: 286px;
}
.sec05 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec05 .w1080 .parallelogram h4 { font-size: 19px; color: #FFF; margin: 0 0 10px;}
.sec05 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec05 .w1080 .item01 { float: right; margin: -100px 0 0 0; position: relative;}






/*----------------------------------------------------

 sec06

----------------------------------------------------*/
.sec06 { width: 100%; padding: 0 0 60px; background: #eaf0f5; max-height: 720px;}
.sec06 .w1080 .parallelogram {
	float: right;
	margin: 20px -30px 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: 286px;
}
.sec06 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec06 .w1080 .parallelogram h4 { font-size: 19px; color: #FFF; margin: 0 0 10px;}
.sec06 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec06 .w1080 .item01 { float: left; margin: -300px 0 0 0; position: relative;}






/*----------------------------------------------------

 NEWS

----------------------------------------------------*/







}

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

/*----------------------------------------------------

 head

----------------------------------------------------*/
.hedImg { width: 100%; height: 180px; background: url(../images/development/hedImg.jpg) center center no-repeat; background-size: cover; margin: 0 auto 0px; text-align: center; color: #FFF; padding: 50px 0 0; box-sizing: border-box;}
.hedImg h2 { width: 100%; font-size: 30px; font-family:Arial, Helvetica, sans-serif;}
.hedImg p { width: 100%; font-size: 18px;}

.navBg ul li:nth-of-type(4) a { color: #eb6100;}



/*----------------------------------------------------

 sec01

----------------------------------------------------*/
.sec01 { width:94%; margin:auto;}
.sec01 .ttl { text-align: left; padding: 60px 0 80px 0;}
.sec01 .ttl h3 { font-size: 30px; font-family : 'SimSun','sans-serif'; color: #eb6100; margin: 0 auto 20px;}
.sec01 .ttl p { width: 100%; font-size: 14px;}

.sec01 ul { width: 100%; margin: auto auto 30px; list-style: none;}
.sec01 ul li { width:100%; float: none; margin: 0 auto 30px;}
.sec01 ul li img { width: 100%; margin: 0 0 10px;}
.sec01 ul li h4 { font-size: 18px; color: margin: 0 0 10px; color: #eb6100;}
.sec01 ul li p { font-size: 12px; margin: 0 0 10px;}
.sec01 ul li p:last-child { font-size: 16px; font-family:Arial, Helvetica, sans-serif; color: margin: 0 0 10px; color: #eb6100;}








/*----------------------------------------------------

 sec02

----------------------------------------------------*/
.sec02 { width: 100%; margin:0 auto; padding: 0 0 0; background: #eaf0f5;}
.sec02 .ttl { text-align: center; padding: 30px 0 30px 0;}
.sec02 .ttl h3 { font-size: 30px; font-family : 'SimSun','sans-serif'; color: #000; margin: auto auto 10px;}
.sec02 .ttl p { width: 100%; font-size: 14px; margin: 0 0 10px; text-align:left;}

.sec02 ul { width:94%; margin: auto; list-style: none;}
.sec02 ul li { width:32%; float: left; margin: auto 2% auto 0;}
.sec02 ul li:nth-child(3n+3) { margin: auto 0 auto 0;}
.sec02 ul li img { width: 100%; height: auto; margin: 0 0 2px; border: solid 1px #000;}
.sec02 ul li p { font-size: 10px; margin: 0;}







/*----------------------------------------------------

 sec03

----------------------------------------------------*/
.sec03 { width: 100%; padding: 0 0 60px; background: #eaf0f5;}
.sec03 .parallelogramBg {
	margin: 40px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 0 60px 0;
    color: #000;
	width: 100%;
}

.sec03 .parallelogramBg:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,1.0);
    content: "";
}

.sec03 .w1080 .parallelogram {
	margin: -100px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: auto;
}
.sec03 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec03 .w1080 .parallelogram h4 { font-size: 16px; color: #FFF; margin: 0 0 10px;}
.sec03 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec03 .w1080 .item01 { float: none; margin:0 auto;}
.sec03 .w1080 .item01 img { width:100%; height:auto;}



/*----------------------------------------------------

 sec04

----------------------------------------------------*/
.sec04 { width: 100%; padding: 0; background: #eaf0f5;}
.sec04 .parallelogramBg {
	margin: 40px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 0 60px 0;
    color: #000;
	width: 100%;
}

.sec04 .parallelogramBg:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,1.0);
    content: "";
}

.sec04 .w1080 .parallelogram {
	margin: -100px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: auto;
}
.sec04 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec04 .w1080 .parallelogram h4 { font-size: 16px; color: #FFF; margin: 0 0 10px;}
.sec04 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec04 .w1080 .item01 { float: none; margin:0 auto;}
.sec04 .w1080 .item01 img { width:100%; height:auto;}






/*----------------------------------------------------

 sec05

----------------------------------------------------*/
.sec05 { width: 100%; padding: 0; background: #eaf0f5;}
.sec05 .parallelogramBg {
	margin: 40px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 100px 0 60px 0;
    color: #000;
	width: 100%;
}

.sec05 .parallelogramBg:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(255,255,255,1.0);
    content: "";
}

.sec05 .w1080 .parallelogram {
	margin: -100px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: auto;
}
.sec05 .w1080 .parallelogram:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec05 .w1080 .parallelogram h4 { font-size: 16px; color: #FFF; margin: 0 0 10px;}
.sec05 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec05 .w1080 .item01 { float: none; margin:0 auto 30px;}
.sec05 .w1080 .item01 img { width:100%; height:auto;}






/*----------------------------------------------------

 sec06

----------------------------------------------------*/
.sec06 {  width: 100%; padding: 0 0 20px; background: #eaf0f5;}
.sec06 .w1080 .parallelogram {
	margin: -70px 0 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 25px 50px 25px;
    color: #FFF;
	width: auto;
}
.sec06 .w1080 .parallelogram:before {
  position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewY(-10deg);
    background: rgba(235,97,0,0.8);
    content: "";
}

.sec06 .w1080 .parallelogram h4 { font-size: 16px; color: #FFF; margin: 0 0 10px;}
.sec06 .w1080 .parallelogram p { font-size: 12px; color: #FFF; margin: 0;}
.sec06 .w1080 .item01 { float: none; margin:0 auto;}
.sec06 .w1080 .item01 img { width:100%; height:auto;}

	
	
	
}