@charset "utf-8";
/* ==================================================
		
		イントロダクション PC

================================================== */
@media screen and (min-width:751px) {
 
/* --------------------------------------------------
		.intro
-------------------------------------------------- */
#contents .intro {
 background: url(../../common/img/film/bak_img01_pc.jpg) no-repeat center top / cover;
 height: 400px;
} 
#contents .intro .intro-inner > .img {
 padding-top: 35px;
} 
 
/* --------------------------------------------------
		.main
-------------------------------------------------- */
#contents .main {
  width: 1040px;
  margin: 0 auto 43px;
} 
#contents .main .main-inner {
  margin: 51px 0 0 1px;
} 

#contents .main h1 {
  font-size: 1.8em;
  font-weight: bold;
  padding: 0 0 0 10px;
  letter-spacing: 1.5px;
  color: #595757;
  border-left: solid 4px #c82918;
}

#contents .main h2 {
   margin-top: 30px;
   padding: 6px 15px 5px;
   font-size: 1.2em;
   background-color: #c82918;
   color: #fff;
   font-weight: bold;
}

#contents .main p {
  margin-top: 25px;
  line-height : 1.8;
}

/* 特長 */
#contents .main .featuresBox {
  margin-top: 20px;
}

#contents .main .featuresBox h3 {
  margin: 0 0 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  color: #3d3d3d;
}

#contents .main .featuresBox .leftBox {
  float: left;
  width: 450px;
}

#contents .main .featuresBox .rightBox {
  float: right;
  width: 490px;
}

#contents .main .main ul {
  margin: 15px 0 0 0;
}
#contents .main li {
  margin: 0 0 5px 25px;
  list-style-type: disc;
}

/* LiDARカバー */
#contents .main .lidarBox {
  padding-top: 30px;
}

#contents .main .lidarBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .lidarBox h4 {
  margin: 20px 0 10px;
  color: #4f81bd;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

#contents .main .lidarBox img {
  max-width: 100%;
  height: auto;
}

#contents .main .lidarBox .leftBox {
  float: left;
  width: 320px;
}

#contents .main .lidarBox .middleBox {
  float: left;
  width: 320px;
  margin-left: 40px;
}

#contents .main .lidarBox .rightBox {
  float: right;
  width: 320px;
}


/* 高速Cu電極成膜 */
#contents .main .cuBox {
  padding-top: 30px;
}

#contents .main .cuBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .cuBox .leftBox {
  float: left;
  width: 500px;
  margin: 0;
}

#contents .main .cuBox .rightBox {
  float: right;
  width: 500px;
  text-align: center;
}

#contents .main .cuBox .rightBox table {
  width: 100%;
  border-collapse:  collapse;
}

#contents .main .cuBox .rightBox table th,
#contents .main .cuBox .rightBox table td {
  border: solid 1px #000;
  padding: 8px;
  margin: 0;
}

#contents .main .cuBox .rightBox table th {
  background-color: #4f81bd;
  color: #fff;
}

/* 難めっき樹脂へのドライシード層 */
#contents .main .dryseedBox {
  padding-top: 30px;
}

#contents .main .dryseedBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .dryseedBox img {
  max-width: 70%;
  height: auto;
}

#contents .main .dryseedBox .leftBox_dry {
  float: left;
  width: 700px;
  margin: 0;
}

#contents .main .dryseedBox .rightBox_dry {
  float: right;
  width: 300px;
  text-align: center;
}

/* ヘッドアップディスプレイ（HUD）用ミラー反射膜/ヘッドランプ用リフレクタ反射膜 */
#contents .main .hudBox {
  padding: 0 0 70px 0;
  border-bottom: solid 1px #a6a6a6;
}

#contents .main .hudBox h3 {
  margin: 100px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .hudBox img {
  max-width: 90%;
  height: auto;
}

#contents .main .hudBox p.title {
  margin: 30px 0 15px 0;
  font-weight: bold;
  text-align: left;
}

#contents .main .hudBox .leftBox {
  float: left;
  width: 290px;
  text-align: center;
}

#contents .main .hudBox .middleBox {
  float: left;
  width: 290px;
  margin-left: 75px;
}
#contents .main .hudBox .middleBox img {
  max-width: 100%;
  height: auto;
}

#contents .main .hudBox .rightBox {
  float: right;
  width: 290px;
  text-align: center;
}

#contents .main .hudBox ul {
  clear: both;
  padding-top: 20px;
  text-align: left;
}

/* 製品 */
#contents .productBox {
  margin-top: 50px;
  padding: 30px 0 0 0;
}

#contents .productBox .leftBox {
  float: left;
  width: 500px;
}

#contents .productBox .rightBox {
  float: right;
  width: 450px;
}

#contents .productBox .rightBox img {
  max-width: 90%;
  height: auto;
}

#contents .productBox .leftBox h3 {
  margin: 0;
  padding: 0 0 3px 0;
  font-size: 1.0em;
  color: #000;
  background-color: #fff;
}

#contents .productBox h4 {
  margin: 0 0 0;
  color: #c82918;
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
}

#contents .productBox p {
  margin: 15px 0 0 0;
}

/* 動画 */
#contents .videoBox {
  clear: both;
  margin-top: 100px;
}

#contents .videoBox h3.video {
   margin-top: 30px;
   padding: 6px 0 5px;
   font-size: 1.4em;
   border-bottom: solid 1px #e7280e;
   background-color: #fff;
   color: #e7280e;
   font-weight: bold;
}

/* ボタン */
.productBox .button {
  clear: both;
  position:relative;
  width:200px;
  height:40px;
  margin-top: 15px;
  padding: 10px; 5px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  background: #c82918;
}

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

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

/* ボタン */
#buttonBox {
  width: 1040px;
  margin: 100px auto 0;
}

#buttonBox .inquiryBox {
  position:relative;
  margin: 0 auto 20px;
  padding: 29px 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%;
}

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

}

/* ==================================================
		
		イントロダクション SP

================================================== */
@media screen and (max-width:750px) {
 
/* --------------------------------------------------
		.intro
-------------------------------------------------- */
#contents .intro {
 background: url(../../common/img/film/bak_img01_sp.jpg) no-repeat center top / cover;
 height: 300px;
 position: relative;
}
#contents .intro .intro-inner {
 width: 100%;	
 position: absolute; 
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
 
/* --------------------------------------------------
		.main
-------------------------------------------------- */
#contents .main {
 margin: 30px 20px 30px;
} 
#contents .main h1 {
  font-size: 1.8em;
  font-weight: bold;
  padding: 0 0 0 10px;
  letter-spacing: 1.5px;
  color: #595757;
  border-left: solid 4px #c82918;
}

#contents .main h2 {
   margin-top: 30px;
   padding: 6px 15px 5px;
   font-size: 1.2em;
   background-color: #c82918;
   color: #fff;
   font-weight: bold;
}

#contents .main p {
  margin-top: 25px;
  line-height : 1.8;
}

/* 特長 */
#contents .main .featuresBox {
  margin-top: 10px;
}

#contents .main .featuresBox h3 {
  margin: 0 0 0 0;
  font-size: 1.1em;
  font-weight: bold;
  color: #3d3d3d;
}

#contents .main .featuresBox .leftBox {
  width: 95%;
}

#contents .main .featuresBox .rightBox {
  margin: 30px 0 0 0;
  width: 95%;
}

#contents .main .main ul {
  margin: 15px 0 0 0;
}
#contents .main li {
  margin: 0 0 5px 25px;
  list-style-type: disc;
}

/* LiDARカバー */
#contents .main .lidarBox {
  padding-top: 30px;
}

#contents .main .lidarBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .lidarBox h4 {
  margin: 20px 0 10px;
  color: #4f81bd;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

#contents .main .lidarBox img {
  max-width: 100%;
  height: auto;
}

#contents .main .lidarBox .leftBox {
  width: 95%;
  margin: 0 auto;
}

#contents .main .lidarBox .middleBox {
  width: 95%;
  margin: 0 auto;
}

#contents .main .lidarBox .rightBox {
  width: 95%;
  margin: 0 auto;
}


/* 高速Cu電極成膜 */
#contents .main .cuBox {
  padding-top: 10px;
}

#contents .main .cuBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .cuBox .leftBox {
  width: 95%;
  margin: 0;
}

#contents .main .cuBox .rightBox {
  width: 95%;
  margin-top: 15px;
  text-align: center;
}

#contents .main .cuBox .rightBox table {
  width: 100%;
  border-collapse:  collapse;
}

#contents .main .cuBox .rightBox table th,
#contents .main .cuBox .rightBox table td {
  border: solid 1px #000;
  padding: 8px;
  margin: 0;
}

#contents .main .cuBox .rightBox table th {
  background-color: #4f81bd;
  color: #fff;
}

/* 難めっき樹脂へのドライシード層 */
#contents .main .dryseedBox {
  padding-top: 30px;
}

#contents .main .dryseedBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .dryseedBox img {
  max-width: 70%;
  height: auto;
}

#contents .main .dryseedBox .leftBox_dry {
  width: 95%;
  margin: 0;
}

#contents .main .dryseedBox .rightBox_dry {
  width: 95%;
  margin-top: 20px;
  text-align: center;
}

/* ヘッドアップディスプレイ（HUD）用ミラー反射膜/ヘッドランプ用リフレクタ反射膜 */
#contents .main .hudBox {
  padding: 0 0 70px 0;
  border-bottom: solid 1px #a6a6a6;
  text-align: center;
}

#contents .main .hudBox h3 {
  margin: 60px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .hudBox img {
  max-width: 100%;
  height: auto;
}

#contents .main .hudBox p.title {
  margin: 30px 0 15px 0;
  font-weight: bold;
  text-align: left;
}

#contents .main .hudBox .leftBox {
  width: 95%;
  margin: 0 auto;
}

#contents .main .hudBox .middleBox {
  width: 95%;
  margin: 0 auto;
  margin-top: 30px;
}
#contents .main .hudBox .middleBox img {
  max-width: 100%;
  height: auto;
}

#contents .main .hudBox .rightBox {
  width: 95%;
  margin: 0 auto;
  margin-top: 30px;
}

#contents .main .hudBox ul {
  clear: both;
  padding-top: 20px;
  text-align: left;
}

/* 製品 */
#contents .productBox {
  margin-top: 20px;
  padding: 20px 0 0 0;
  text-align: center;
}

#contents .productBox .rightBox img {
  max-width: 100%;
  height: auto;
}

#contents .productBox .rightBox {
  width: 95%;
}

#contents .productBox .leftBox h3 {
  margin: 20px 0 0 0;
  padding: 0 0 3px 0;
  font-size: 1.0em;
  color: #000;
  background-color: #fff;
  text-align: left;
}

#contents .productBox h4 {
  margin: 0 0 0;
  color: #c82918;
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
}

#contents .productBox p {
  margin: 15px 0 0 0;
  text-align: left;
}

/* 動画 */
#contents .videoBox {
  clear: both;
  margin-top: 50px;
}

#contents .videoBox h3.video {
   padding: 6px 0 5px;
   font-size: 1.4em;
   border-bottom: solid 1px #e7280e;
   background-color: #fff;
   color: #e7280e;
   font-weight: bold;
}

/* ボタン */
.productBox .button {
  clear: both;
  position:relative;
  width:200px;
  margin: 0 auto;
  height:40px;
  margin-top: 15px;
  padding: 10px; 5px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  background: #c82918;
}

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

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

/* ボタン */
#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 9px 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%;
}

}


@media screen and (min-width: 751px) and (max-width: 1100px) {

#contents .intro .intro-inner .intro-box {
 width: 950px;
 margin: 30px auto 0;
} 
#contents .main .main-inner {
 width: 950px;
 margin: 30px auto;
}
#contents .main > ul {
 width: 1000px;
 margin: 4px auto 0;
}

/* オプション */
#contents .optionBox {
  margin: 40px 0;
  text-align: center;
}

#contents .optionBox p {
  margin: 5px 0 0 0;
  text-align: left;
}

#contents .optionBox .leftBox {
  float: left;
  width: 280px;
}
#contents .optionBox .middleBox {
  float: left;
  width: 280px;
  margin: 0 0 0 60px;
}
#contents .optionBox .rightBox {
  float: right;
  width: 280px;
}

/* 電波透過膜 ELTRA */
#contents .main .lidarBox {
}

#contents .main .lidarBox h3 {
  margin: 40px 0 10px;
  color: #c82918;
  font-size: 1.2em;
  font-weight: bold;
}

#contents .main .lidarBox img {
  max-width: 80%;
  height: auto;
}

#contents .main .lidarBox p.title {
  margin: 0 0 15px 0;
  font-weight: bold;
  text-align: left;
}

#contents .main .lidarBox-in {
  width: 950px;
  margin: 30px auto 0;

}

#contents .main .lidarBox .leftBox {
  float: left;
  width: 300px;
  text-align: center;
}

#contents .main .lidarBox .middleBox {
  float: left;
  width: 300px;
  margin-left: 25px;
  margin-right: 25px;
  text-align: center;
}

#contents .main .lidarBox .rightBox {
  float: right;
  width: 300px;
  text-align: center;
}

/* ボタン */
#buttonBox {
  width: 100%;
  margin: 100px auto 0;
}

#contents .main .hudBox .middleBox {
  float: left;
  width: 290px;
  margin-left: 35px;
}
#contents .main .hudBox .middleBox img {
  max-width: 100%;
  height: auto;
}

/* 高速Cu電極成膜 */
#contents .main .cuBox .leftBox {
  float: left;
  width: 600px;
  margin: 0;
}

/* 難めっき樹脂へのドライシード層 */
#contents .main .dryseedBox .leftBox_dry {
  float: left;
  width: 600px;
  margin: 0;
}

/* 製品 */
#contents .productBox .leftBox {
  float: left;
  width: 450px;
}

}