@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: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; 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: 12px; 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 80px; background: #eaf0f5;}
.sec02 .ttl { text-align: center; margin: 0 0 80px; padding: 0;}
.sec02 .ttl h3 { font-size: 48px; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; color: #000; margin: 0 0 10px;}
.sec02 .ttl p { font-size: 14px; 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: 25px; left: 450px; z-index: 10; width: 180px; text-align: center;}
.sec02 .w1080.pos01 .item01 .new { width: 70px; height: 70px; background: #F00; color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; position: absolute; top: -45px; left: 150px; z-index: 20;}
.sec02 .w1080.pos01 .item02 { position: absolute; top: 25px; left: 670px; z-index: 10; width: 180px; text-align: center;}
.sec02 .w1080.pos01 .item03 { position: absolute; top: 25px; left: 890px; z-index: 10; width: 180px; text-align: center;}
.sec02 .w1080.pos01 * img { width: 100%; height: auto; position: relative; z-index: 50;}

.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: 320px; 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: 12px; color: #000; margin: 0 0 10px; color: #FFF;}

.sec02 .btn3 { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; font-size: 12px;}
.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; }

.sec02 .btn4 { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; font-size: 12px; width: 300px; margin-left: -60px;}
.sec02 .btn4 span:nth-of-type(1) { background: #003894; color: #FFF; display: inline-block; padding: 5px 5px 5px 10px; border-radius: 60px 0 0 60px; border: solid 1px #003894; }
.sec02 .btn4 span:nth-of-type(2) { background: #fff100; color: #003894; display: inline-block; padding: 5px 10px 5px 5px; border-radius: 0 60px 60px 0; border: solid 1px #003894; }

.sec02 .btn4 a:hover span:nth-of-type(1) { background: #fff100; color: #003894; display: inline-block; padding: 5px 5px 5px 10px; border-radius: 60px 0 0 60px; border: solid 1px #003894; }
.sec02 .btn4 a:hover span:nth-of-type(2) { background: #003894; color: #FFF; display: inline-block; padding: 5px 10px 5px 5px; border-radius: 0 60px 60px 0; border: solid 1px #003894; }



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

 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: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; color: #000; margin: 0 0 10px;}
.sec03 .ttl p { font-size: 14px; margin: 0 0 50px;}

.sec03 ul { width: 912px; margin: auto auto 50px; 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: 10px; margin: 0 0 5px;}
.sec03 ul li h4 { text-align: center; font-size: 20px; margin: 0; color: #eb6100;}




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

 TECHNOLOGY

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

  



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

 COMPANY

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

  





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

 RECRUIT

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






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

 NEWS

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


/*----------------------------------------------------
動画追加
----------------------------------------------------*/

.hedImg{
position:relative;
}

.mv_btn_sp{
display:none;
}

.mv_btn_pc{
position:absolute;
bottom:20px;
left:2%;
}

.mv_btn_pc img{
width:340px;
height:auto;
}






}

/*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: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; 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: 14px; 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: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; 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 100px;}
.sec02 .w1080.pos01 .item01 { z-index: 10; width: 205px; text-align: center; margin: 0 auto 50px; position: relative;}
.sec02 .w1080.pos01 .item01 .new { width: 70px; height: 70px; background: #F00; color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; position: absolute; top: -45px; left: 150px; z-index: 20;}
.sec02 .w1080.pos01 .item02 { z-index: 10; width: 222px; text-align: center; margin: 0 auto 50px;}
.sec02 .w1080.pos01 .item03 { z-index: 10; width: 222px; text-align: center; margin: 0 auto;}
.sec02 .w1080.pos01 * img { position: relative; z-index: 50;}

.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%;}




/*----- designwork追加 ----*/

.sec02 .w1080.pos04 { /*background: url(../images/original_product/sec02Bg02.png) no-repeat right center;*/ margin: 0 auto 50px; background-size: contain;padding-bottom:30px;}
.sec02 .w1080.pos04 .parallelogram { margin: 0 auto 20px; float: none;}
.sec02 .w1080.pos04 .item01 { z-index: 10; text-align: center; margin: 0 auto;}
.sec02 .w1080.pos04 .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: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; font-size: 12px;}
.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; }

.sec02 .btn4 { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; font-size: 12px; width: 300px; margin-left: -60px;}
.sec02 .btn4 span:nth-of-type(1) { background: #003894; color: #FFF; display: inline-block; padding: 5px 5px 5px 10px; border-radius: 60px 0 0 60px; border: solid 1px #003894; }
.sec02 .btn4 span:nth-of-type(2) { background: #fff100; color: #003894; display: inline-block; padding: 5px 10px 5px 5px; border-radius: 0 60px 60px 0; border: solid 1px #003894; }

.sec02 .btn4 a:hover span:nth-of-type(1) { background: #fff100; color: #003894; display: inline-block; padding: 5px 5px 5px 10px; border-radius: 60px 0 0 60px; border: solid 1px #003894; }
.sec02 .btn4 a:hover span:nth-of-type(2) { background: #003894; color: #FFF; display: inline-block; padding: 5px 10px 5px 5px; border-radius: 0 60px 60px 0; border: solid 1px #003894; }




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

 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: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; 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: 10px; margin: 0 0 5px;}
.sec03 ul li h4 { text-align: center; font-size: 18px; margin: 0; color: #eb6100;}




/*----------------------------------------------------
動画追加 sp
----------------------------------------------------*/

.mv_btn_pc{
display:none;
}

.mv_btn_sp{
position:relative;
padding:0 15px 15px 15px;
text-align:center;
}

.mv_btn_sp img{
width:90%;
height:auto;
border:solid 1px #ccc;
}


















}