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


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


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

 head

----------------------------------------------------*/
.hedImg { width: 100%; height: 360px; background: url(../images/original_product/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(3) a { color: #eb6100;}



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

 sec01

----------------------------------------------------*/
.sec01 { margin: auto auto 60px;}
.sec01 .w1080 {}
.sec01 .ttl { text-align: center; margin: 0 0 50px;}
.sec01 .ttl h3 { font-size: 48px; color: #eb6100; font-family: "Times New Roman", Times, serif; font-weight: normal; margin: 0 0 20px;}
.sec01 .ttl p { font-size: 16px; margin: 0 0 10px;}

.sec01 ul { list-style: none;}
.sec01 ul li { width: 336px; float: left;}
.sec01 ul li:nth-child(3n+1) { margin: 0px 36px 0 0;}
.sec01 ul li:nth-child(3n+2) { margin: 10px 36px 0 0;}
.sec01 ul li:nth-child(3n+3) { margin: 20px 0 0 0;}

.sec01 ul li .parallelogram {
	margin: 10px 0 30px 0;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 0px 0px 0px 0px;
    color: #000;
	width: 100%;
	height: 240px;
    transform: skewY(-10deg);
    /*background: rgba(255,0,255,0.8);*/
	overflow: hidden;
}
.sec01 ul li .parallelogram img {
	height: 140%;
    transform: skewY(10deg);
	position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
	margin: auto;
}
.sec01 ul li h4 { font-size: 24px; margin: 0 0 10px;}
.sec01 ul li p { font-size: 16px; line-height: 140%; margin: 0 0 20px;}
/*.sec01 ul li p:last-child { font-size: 24px; color: #eb6100; font-size: 22px; font-family: Arial, Helvetica, sans-serif; margin: 0 0 10px;}*/





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

 sec02

----------------------------------------------------*/
.sec02 { width: 100%; margin: 0; padding: 50px 0 30px; background: #eaf0f5;}
.sec02 .ttl { text-align: center; margin: 0 0 80px; padding: 0;}
.sec02 .ttl h3 { font-size: 48px; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #000; margin: 0 0 10px;}
.sec02 .ttl p { font-size: 16px; margin: 0 0 50px;}

.sec02 .w1080 { position: relative;}
.sec02 .w1080.pos01 { background: url(../images/original_product/sec02Bg01.png) no-repeat right 0; margin: 0 auto 120px;}
.sec02 .w1080.pos01 .parallelogram { margin: -20px auto 0 80px;}
.sec02 .w1080.pos01 .item01 { position: absolute; top: 50px; left: 450px; z-index: 10; width: 205px; text-align: center;}
.sec02 .w1080.pos01 .item02 { position: absolute; top: 25px; left: 700px; z-index: 10; width: 222px; text-align: center;}

.sec02 .w1080.pos02 { background: url(../images/original_product/sec02Bg02.png) no-repeat 200px top; margin: 0 auto 100px;}
.sec02 .w1080.pos02 .parallelogram { margin: 0 auto 0 auto; float: right;}
.sec02 .w1080.pos02 .item01 { position: absolute; top: 30px; left: 0px; z-index: 10; text-align: center;}

.sec02 .w1080.pos03 { margin: 0 auto 80px;}
.sec02 .w1080.pos03 .parallelogram { margin: 20px 0 0 80px;}
.sec02 .w1080.pos03 .item01 { position: absolute; top: -30px; left: 350px; z-index: 10;}
.sec02 .w1080.pos03 .item02 { position: absolute; top: 50px; left: 700px; z-index: 20;}

	
/*----- designwork追加 ----*/	
.sec02 .w1080.pos04 { background: url(../images/original_product/tool_logo.png) no-repeat 330px top; margin: 0 auto 100px;}
.sec02 .w1080.pos04 .parallelogram { margin: 0 auto 0 auto; float: right;}
.sec02 .w1080.pos04 .item01 { position: absolute; top: 20px; left: 50px; z-index: 10; text-align: center;}

.sec02 .w1080 .parallelogram {
	margin: 80px 0 0;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 60px 25px 60px 25px;
    color: #000;
	width: 286px;
}
.sec02 .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: "";
}

.sec02 .w1080 .parallelogram h4 { font-size: 24px; color: #000; margin: 0 0 10px; color: #FFF;}
.sec02 .w1080 .parallelogram p { font-size: 14px; line-height: 120%; color: #000; margin: 0 0 10px; color: #FFF;}

.sec02 .btn3 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px;}
.sec02 .btn3 a img.on { display: none; }
.sec02 .btn3 a img.off { display: block; }
.sec02 .btn3 a:hover img.on { display: block; }
.sec02 .btn3 a:hover img.off { display: none; }



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

 sec03

----------------------------------------------------*/
.sec03 { width: 100%; margin: 0; padding: 50px 0 80px; background: #eaf0f5;}
.sec03 .ttl { text-align: center; margin: 0 0 50px; padding: 0;}
.sec03 .ttl h3 { font-size: 48px; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #000; margin: 0 0 10px;}
.sec03 .ttl p { font-size: 16px; margin: 0 0 50px;}

.sec03 ul { width: 912px; margin: auto auto 20px; list-style: none;}
.sec03 ul li { width: 288px; margin: 0 24px 10px 0; float: left;}
.sec03 ul li:nth-child(3n+3) { margin: 0;}
.sec03 ul li img { width: 100%; height: auto;}
.sec03 ul li p { font-size: 14px; margin: 0 0 5px;}
.sec03 ul li h4 { text-align: center; font-size: 18px; margin: 0; color: #eb6100;}




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

 TECHNOLOGY

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

  



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

 COMPANY

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

  





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

 RECRUIT

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






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

 NEWS

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







}

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

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

 header

----------------------------------------------------*/
.hedImg { width: 100%; height: 180px; background: url(../images/original_product/hedImg.jpg) center center no-repeat; background-size: cover; margin: 0 auto 40px; 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(3) a { color: #eb6100;}





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

 sec01

----------------------------------------------------*/
.sec01 { width: 94%; margin: auto auto 40px;}
.sec01 .w1080 {}
.sec01 .ttl { text-align: center; margin: 0 0 50px;}
.sec01 .ttl h3 { font-size: 30px; color: #eb6100; font-family: "Times New Roman", Times, serif; font-weight: normal; margin: 0 0 10px;}
.sec01 .ttl p { font-size: 14px; margin: 0 0 10px; text-align: left;}

.sec01 ul { list-style: none;}
.sec01 ul li { width: 100%; max-width: 440px; margin:  0 auto 30px; float: none;}
.sec01 ul li:last-child { margin-bottom: 0px;}
/*.sec01 ul li:nth-child(3n+1) { margin: 0px 36px 0 0;}
.sec01 ul li:nth-child(3n+2) { margin: 10px 36px 0 0;}
.sec01 ul li:nth-child(3n+3) { margin: 20px 0 0 0;}*/

.sec01 ul li .parallelogram {
	margin: 10px 0 30px 0;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 0px 0px 0px 0px;
    color: #000;
	width: 100%;
	height: 240px;
    transform: skewY(-10deg);
    /*background: rgba(255,0,255,0.8);*/
	overflow: hidden;
    text-align: center;
}
.sec01 ul li .parallelogram img {
	height: 140%;
    transform: skewY(10deg);
	position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
	margin: auto;
}
.sec01 ul li h4 { font-size: 18px; margin: 0 0 10px;}
.sec01 ul li p { font-size: 16px; margin: 0 0 20px;}
/*.sec01 ul li p:last-child { font-size: 16px; color: #eb6100; font-family: Arial, Helvetica, sans-serif; margin: 0 0 10px;}*/




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

 sec02

----------------------------------------------------*/
.sec02 { width: 100%; margin: 0; padding: 40px 3% 0; background: #eaf0f5; box-sizing: border-box;}
.sec02 .ttl { text-align: center; margin: 0 0 50px; padding: 0;}
.sec02 .ttl h3 { font-size: 30px; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #000; margin: 0 0 10px;}
.sec02 .ttl p { font-size: 16px; margin: 0 0 50px; text-align: left;}

.sec02 .w1080 { position: relative;}
.sec02 .w1080.pos01 { /*background: url(../images/original_product/sec02Bg01.png) no-repeat right center*/; margin: 0 auto 50px; background-size: contain;}
.sec02 .w1080.pos01 .parallelogram { margin: 0 auto 20px;}
.sec02 .w1080.pos01 .item01 { z-index: 10; width: 205px; text-align: center; margin: 0 auto 30px;}
.sec02 .w1080.pos01 .item02 { z-index: 10; width: 222px; text-align: center; margin: 0 auto;}

.sec02 .w1080.pos02 { /*background: url(../images/original_product/sec02Bg02.png) no-repeat right center;*/ margin: 0 auto 50px; background-size: contain;}
.sec02 .w1080.pos02 .parallelogram { margin: 0 auto 20px; float: none;}
.sec02 .w1080.pos02 .item01 { z-index: 10; text-align: center; margin: 0 auto;}
.sec02 .w1080.pos02 .item01 img { width: 100%;}

.sec02 .w1080.pos03 { margin: 0 auto 0;}
.sec02 .w1080.pos03 .parallelogram { margin: 0 auto 20px;}
.sec02 .w1080.pos03 .item01 { z-index: 10; text-align: center; margin: 0 auto;}
.sec02 .w1080.pos03 .item01 img { width: 100%;}

.sec02 .w1080 .parallelogram {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 20px 25px;
    color: #000;
	width: 100%;
    box-sizing: border-box;
    background: rgba(235,97,0,0.8);
}
/*.sec02 .w1080 .parallelogram {
	margin: 80px 0 0;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 60px 25px 60px 25px;
    color: #000;
	width: 100%;
}
.sec02 .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: "";
}*/

.sec02 .w1080 .parallelogram h4 { font-size: 18px; color: #000; margin: 0 0 10px; color: #FFF;}
.sec02 .w1080 .parallelogram p { font-size: 14px; color: #000; margin: 0 0 10px; color: #FFF;}

.sec02 .btn3 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px;}
.sec02 .btn3 a img.on { display: none; }
.sec02 .btn3 a img.off { display: block; }
.sec02 .btn3 a:hover img.on { display: block; }
.sec02 .btn3 a:hover img.off { display: none; }




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

 sec03

----------------------------------------------------*/
.sec03 { width: 94%; margin: 0 auto; padding: 40px 0 20px; background: #eaf0f5; box-sizing: border-box;}
.sec03 .ttl { text-align: center; margin: 0 0 50px; padding: 0;}
.sec03 .ttl h3 { font-size: 30px; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #000; margin: 0 0 10px;}
.sec03 .ttl p { font-size: 16px; margin: 0 0 50px;}

.sec03 ul { width: 100%; margin: 0 auto; list-style: none;}
.sec03 ul li { width: 100%; max-width: 400px; margin: 0 auto 30px; float: none;}
.sec03 ul li:last-child { margin-bottom: 0;}
.sec03 ul li img { width: 100%; height: auto;}
.sec03 ul li p { font-size: 12px; margin: 0 0 5px;}
.sec03 ul li h4 { text-align: center; font-size: 20px; margin: 0; color: #eb6100;}





















}