@charset "utf-8";
/* ==================================================
		
		トップ PC

================================================== */
@media screen and (min-width:751px) {
 
/* --------------------------------------------------
		.main
-------------------------------------------------- */
.content01 {
  position:relative;
  height: 300px;
  width: 100%;
  background-image: url(../img/top/bg_car.jpg);
  background-size: cover;
}
.content02 {
  position:relative;
  height: 300px;
  width: 100%;
  background-color: #292a2d; 
}
.content03 {
  position:relative;
  height: 300px;
  width: 100%;
  background-color: #00000; 
}

.content04 {
  height: 1000px;
  width: 100%;
  background-color: #272629;
}

.content05 {
  height: 1250px;
  width: 100%;
  background: -moz-linear-gradient(45deg, #000, #000); 
  background: -webkit-linear-gradient(45deg, #000, #000); 
  background: linear-gradient(5deg, #313131, #000); 
}

.content {
  overflow: hidden; /* はみ出た部分は表示しない */
  background-color: #272729;
}
.content01{
  position: relative;
  height: 470px;
  width: 100%;
  background-color: #000;
}
.content01::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 60vw solid #292a2d;  /* むらさき */ 
  border-bottom: 70px solid #292a2d;  /* むらさき */  
}

.content02{
  height: 200px;
  width: 100%;
  background-color: #292a2d;
}
.content02::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid #2e2d30;  /* 透明 */ 
  border-right: 50vw solid transparent;  /* 黒 */ 
  border-bottom: 60px solid #2e2d30;  /* 黒 */ 
}

.content03{
  position: relative;
  height: 200px;
  width: 100%;
  background-color: #2e2d30;
}
.content03::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 160px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #0d0e0e;  /* 黒 */ 
  border-bottom: 150px solid #0d0e0e;  /* 黒 */
  opacity: .2;
}

.content04{
  position: relative;
  height: 1100px;
  width: 100%;
  background-color: #272629;
}
.content04::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 160px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #000;  /* 黒 */ 
  border-bottom: 150px solid #000;  /* 黒 */
}

@media only screen and (max-width: 2000px) {
  .content01::after {
    border-left: 1000px solid transparent;  /* 実数で幅を指定 */
    border-right: 1000px solid #292a2d;  /* 実数で幅を指定 */
  }
}

/* メインイメージコピー  */
.maincopyBox {
  position:relative;
  width: 950px;
  margin: 0 auto;
}
.maincopyBox h1 {
  position:absolute;
  right:20px;
  float: right;
  top:100px;
  color: #e6e6e6;
  font-size: 2.0em;
  letter-spacing: 3px;
  text-shadow: 0px 0px 5px #fff;
  position:relative;
  line-height: 1.5;

}
.maincopyBox p {
  position:absolute;
  width: 500px;
  right: 0px;
  top:210px;
  color: #e6e6e6;
  font-size: 1.2em;
  letter-spacing: 1px;
}


.automotiveBox2 {
  position: absolute;
  top: 390%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1040px;
  margin: 0 auto;
  z-index: 1;
}

.automotiveBox2 img {
  max-width: 100%;
  height: auto;
  z-index: 3;
}

/* リード文  */
.automotiveBox2 .readtxtBox {
  width: 950px;
  margin: 0 auto;
}

.automotiveBox2 .readtxtBox p {
  color: #fff;
  font-size: 1.3em;
  line-height: 2.0;
}

/* Our Technology  */
.automotiveBox2 .technologyBox {
  width: 950px;
  margin: 0 auto;
  margin-bottom: 50px;

}

.automotiveBox2 .technologyBox h2 {
  margin: 80px 0 20px 0;
  font-size: 1.8em;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

.automotiveBox2 .technologyBox .leftBox {
  float: left;
  width: 450px;
  margin-right: 20px;
  background-color: #fff;
}

.automotiveBox2 .technologyBox .rightBox{
  float: right;
  width: 450px;
  margin-left: 20px;
  background-color: #fff;
}

.automotiveBox2 .technologyBox h3 {
  margin: 10px 0;
  padding: 5px 20px 0;
  font-size: 1.2em;
  font-weight: bold;
}

.fc_green { color: #00a27b; }
.fc_blue { color: #008dd6; }
.fc_purple { color: #724c9e; }
.fc_red { color: #e7280f; }
.fc_orange { color: #f5b400; }

.automotiveBox2 .technologyBox p {
  margin: 10px 0 25px;
  padding: 0 20px;
}

.automotiveBox2 .technologyBox .button {
  position:relative;
  width:200px;
  height:40px;
  margin: 0 auto 20px;
  padding: 10px; 5px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
}

.automotiveBox2 .technologyBox .link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.automotiveBox2 .technologyBox a:hover{/* マウスオーバー時に色変更*/
    opacity: 0.2;
    background: #fff;
}

.bg_green { background: #00a27b; }
.bg_blue { background: #008dd6; }
.bg_purple { background: #724c9e; }
.bg_red { background: #e7280f; }
.bg_orange { background: #f5b400; }


.technologyBox a:link {color:#ffffff;} /*未訪問のリンクの色*/
.technologyBox a:visited {color:#ffffff;} /*訪問済みのリンクの色*/
.technologyBox a:hover {color:#ffffff;} /*カーソルが乗っているリンクの色*/
.technologyBox a:active {color:#ffffff;} /*クリック中のリンクの色*/


/* Target Parts  */
.automotiveBox2 .targetpartsBox {
  width: 1040px;
  margin: 0 auto;
}

.automotiveBox2 .targetpartsBox h2 {
  margin: 0 0 50px 0;
  padding: 40px 0 0 0;
  font-size: 1.8em;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

/* ボタン */
#buttonBox {
  width: 1000px;
  margin: 0 auto;
  margin: 150px auto 0;
  z-index: 1;
}

#buttonBox .industryBox {
  position:relative;
  height:96px;
  margin: 0 auto 20px;
  padding: 30px 10px;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  border: solid 1px #cccccc;
  background-color: #fff;
  color: #464646;
}

#buttonBox .industryBox .link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#buttonBox .industryBox a:hover{/* マウスオーバー時に色変更*/
    opacity: 0.2;
    background: #fff;
}

#buttonBox .inquiryBox {
  position:relative;
  height:96px;
  margin: 0 auto 20px;
  padding: 30px 10px;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  border: solid 1px #cccccc;
  background-color: #fff;
  color: #464646;
}

.iconmail {
  padding: 0 0 8px 50px;
  background: url(../img/ico_mail.png) no-repeat 0 0 #fff;
}

#buttonBox .inquiryBox .link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#buttonBox .inquiryBox a:hover{/* マウスオーバー時に色変更*/
    opacity: 0.2;
    background: #fff;
}
}

/* ==================================================
		
		トップ SP

================================================== */
@media screen and (max-width:750px) {
 
/* --------------------------------------------------
		.main
-------------------------------------------------- */
.content01 {
  position:relative;
  height: 100px;
  width: 100%;
  background-image: url(../img/top/bg_car_sp.jpg);
  background-size: cover;
}
.content02 {
  position:relative;
  height: 200px;
  width: 100%;
  background-color: #292a2d;  /* むらさき */
}
.content03 {
  position:relative;
  height: 300px;
  width: 100%;
  background-color: #00000;  /* 黒 */ 
}

.content04 {
  position:relative;
  height: 1000px;
  width: 100%;
  background-color: #272729;  /* グレー */
}

.content05 {
  position:relative;
  height: 750px;
  width: 100%;
  background: -moz-linear-gradient(45deg, #000, #000); 
  background: -webkit-linear-gradient(45deg, #000, #000); 
  background: linear-gradient(5deg, #313131, #000); 
}

.content {
  overflow: hidden; /* はみ出た部分は表示しない */
  background-color: #272729;
}
.content01{
  height:390px;
  width: 100%;
  background-color: #74c23a;
}
.content01::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 60vw solid #292a2d;  /* むらさき */ 
  border-bottom: 70px solid #292a2d;  /* むらさき */  
}

.content02{
  height: 200px;
  width: 100%;
  background-color: #292a2d;
}
.content02::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid #2e2d30;  /* 透明 */ 
  border-right: 50vw solid transparent;  /* 黒 */ 
  border-bottom: 60px solid #2e2d30;  /* 黒 */ 
}

.content03{
  height: 200px;
  width: 100%;
  background-color: #2e2d30;
  /*opacity: .5;*/
}
.content03::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 160px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #0d0e0e;  /* 黒 */ 
  border-bottom: 150px solid #0d0e0e;  /* 黒 */
  opacity: .2;
}

.content04{
  height: 2100px;
  width: 100%;
  background-color: #272629;
}
.content04::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 100px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #000;  /* 黒 */ 
  border-bottom: 100px solid #000;  /* 黒 */
}

@media only screen and (max-width: 2000px) {
  .content01::after {
    border-left: 1000px solid transparent;  /* 実数で幅を指定 */
    border-right: 1000px solid #292a2d;  /* 実数で幅を指定 */
  }
}

/* メインイメージコピー  */
.maincopyBox {
  width: 90%;
  margin: 0 auto;
}
.maincopyBox h1 {
  padding-top: 130px;
  right:0;
  color: #e6e6e6;
  font-size: 1.5em;
  text-shadow: 0px 0px 5px #fff;
  position:relative;

}
.maincopyBox p {
  margin-top: 20px;
  color: #e6e6e6;
  letter-spacing: 2px;
  text-aling: right;
  text-shadow: 0px 0px 5px #000;
  position:relative;
}

.automotiveBox2 {
  position: absolute;
  top: 490%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

.automotiveBox2:before{
	content:"";
	display: block;
	width:0;
	height:0;
	padding-bottom:40%;
}

.automotiveBox2 img {
  max-width: 100%;
  height: auto;
  z-index: 3;
}

/* リード文  */
.automotiveBox2 .readtxtBox {
   width: 77%;
   margin: 0 auto;
}
.automotiveBox2 p {
  color: #fff;
  line-height: 1.8;
}

/* Our Technology  */
.automotiveBox2 .technologyBox {
   width: 360px;
   margin: 0 auto;
}

.automotiveBox2 .technologyBox h2 {
  margin: 65px 0 20px 0;
  font-size: 1.8em;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

.automotiveBox2 .technologyBox .leftBox {
  margin-bottom: 20px;
  padding-bottom: 10px;
  background-color: #fff;
}

.automotiveBox2 .technologyBox .rightBox{
  margin-bottom: 20px;
  padding-bottom: 10px;
  background-color: #fff;
}

.automotiveBox2 .technologyBox h3 {
  margin: 10px 0;
  padding: 5px 20px 0;
  font-size: 1.2em;
  font-weight: bold;
}

.fc_green { color: #00a27b; }
.fc_blue { color: #008dd6; }
.fc_purple { color: #724c9e; }
.fc_red { color: #e7280f; }
.fc_orange { color: #f5b400; }

.automotiveBox2 .technologyBox p {
  margin: 10px 0 25px;
  padding: 0 20px;
  color: #000;
}

.automotiveBox2 .technologyBox .button {
  position:relative;
  width:200px;
  height:40px;
  margin: 0 auto 20px;
  padding: 10px; 5px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
}

.automotiveBox2 .technologyBox .link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.alpha a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.bg_green { background: #00a27b; }
.bg_blue { background: #008dd6; }
.bg_purple { background: #724c9e; }
.bg_red { background: #e7280f; }
.bg_orange { background: #f5b400; }


.technologyBox a:link {color:#ffffff;} /*未訪問のリンクの色*/
.technologyBox a:visited {color:#ffffff;} /*訪問済みのリンクの色*/
.technologyBox a:hover {color:#ffffff;} /*カーソルが乗っているリンクの色*/
.technologyBox a:active {color:#ffffff;} /*クリック中のリンクの色*/

/* Target Parts  */
.automotiveBox2 .targetpartsBox {
  width: 90%;
  margin: 0 auto;
}

.automotiveBox2 .targetpartsBox h2 {
  margin: 0 0 20px 0;
  padding: 40px 0 0 0;
  font-size: 1.8em;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

/* ボタン */
#buttonBox {
  width: 95%;
  margin: 0 auto;
  margin: 80px auto 0;
  z-index: 1;
}

#buttonBox .inquiryBox {
  position:relative;
  height:70px;
  margin: 0 auto 20px;
  padding: 20px 10px;
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  border: solid 1px #cccccc;
  background-color: #fff;
  color: #464646;
}

.iconmail {
  padding: 0 0 8px 50px;
  background: url(../../common/img/ico_mail.png) no-repeat 0 0 #fff;
}

#buttonBox .inquiryBox .link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

}