@charset "UTF-8";

/* topImage
--------------------------------------------------------------------*/
#headImage {
  background: url(../products/img/topimg_products.jpg) center no-repeat;
  background-size: cover;
}




/* ばねづくりのプロセス
--------------------------------------------------------------------*/
#processArea::after,
.processConcept::after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}

.processConcept {
  margin: 0 auto 3em;
  max-width: 1000px;
}
.processConcept h2 {
  float: left;
  padding-top: 1em;
}
.processConcept p {
  float: right;
  width: 60%;
  padding: 1em;
  background: #f7f6f5;
  border-left: solid #00A0E9 2px;
  border-right: solid #00A0E9 2px;
  border-radius: 13px;
}

.processBox {
  margin: 45px 15px 20px 0;
  padding: 1em 1em 1px;
  width: 29%;
  height: auto;
  min-height: 400px;
  background: #757880;
  color: #fff;
  position: relative;
  float: left;
}
.processBox:nth-of-type(3),
.processBox:nth-of-type(6),
.processBox:nth-of-type(9) {margin-right: 0;}
.processBox h4 {
  position: absolute;
  top: -32px;
  left: 10px;
  padding: 5px 0 15px 0.4em;
  border-left: solid #e60012 6px;
  line-height: 1;
  color: #000;
}
.processBox h5 {
  margin-bottom: 10px;
}
.processBox h5::before {
  content: "";
  margin-right: -1.25em;
  padding-left: 1.4em;
  background: #e60012;
  border: solid #e60012 1px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
}
.processBox .img {
  margin-bottom: 10px;
  width: 100%;
}
.processContacBtn{
  clear:both;
  margin-top:3em;
}

@media only screen and (max-width:768px){
  .processConcept {margin: 0 20px 3em;}
  .processConcept h2 {padding-top: 0;}
  .processConcept h2,
  .processConcept p {
    float: none;
    width: auto;
  }
  .processBox {
    float: none;
    width: auto;
    min-height: inherit;
  }
}




/* ばね
--------------------------------------------------------------------*/
.springBox {
  margin-bottom: 2em;
  width: 48%;
  background: #ecebec;
}
.springBox:nth-child(even) {float: right;}
.springBox:nth-child(odd) {float: left;}
.springBox h4 {
  padding: 11px 0 10px 30px;
  line-height: 1.2;
  color: #fff;
}
.springBox h4.spring01 {background: #009891;}
.springBox h4.spring02 {background: #f39700;}
.springBox h4.spring03 {background: #0c358e;}
.springBox h4.spring04 {background: #00a0e9;}
.springBox h4.spring05 {background: #a40b5e;}
.springBox h4.spring06 {background: #757880;}
.springBox h4::before {
  margin: 0 10px 0 -15px;
  padding-bottom: 20px;
  content: "";
  border-left: solid #fff 5px;
}
.springBox h4 span {
  font-weight: normal;
  font-size: 80%;
}
.springBox h4 span::before {
  content: "\A";
  white-space: pre;
}
.springBox .img {
  margin: 1.5em 1.5em 1em;
  text-align: center;
}
.springBox p {
  margin: 0 1.5em 2em;
}
.springBox p a {
  margin-left: 1em;
  color: #2405E9;
  text-decoration: underline;
}
.springBox p a:hover {
  color: #0e3480;
  text-decoration: none;
}
.springBox p a::before {
  content: "▶";
}
.springContacBtn{
  clear:both;
  margin-top:2em;
}

@media only screen and (max-width:768px){
  .springBox {width: 100%;}
  .springBox:nth-child(even),
  .springBox:nth-child(odd) {float: none;}
  .springBox p {padding-bottom: 1em;}
}





/* フレキシブル・カップリング
--------------------------------------------------------------------*/
#processArea h3.h3coupling {line-height: 1.2;}
#processArea h3.h3coupling span {font-size: 80%;}
#processArea h3.h3coupling span::before {
  content: "\A";
  white-space: pre;
}
/* box */
.couplingBox {margin-bottom: 3em;}
.couplingBox.floatLeft,
.couplingBox.floatRight,
.floatLeft.graph,
.floatRight.graph,
.nova {width: 48%;}
/* h4 */
.couplingBox h4 {
  margin-bottom: 0.8em;
  padding: 5px 1em;
  background: #DBE4EC;
  border: solid #ddd 1px;
}
/* h5 */
.couplingBox h5 {
  margin-bottom: 1em;
  padding: 3px 1em;
  border-bottom: dashed #d2d2d2 1px;
  border-left: solid #009891 5px;
}
.couplingBox h5 span {
  margin-left: 1em;
  font-size: small;
}
/* ul list */
ul.couplingList {margin: 0 1em 1em 1.3em;}
ul.couplingList li::before {
  margin-left: -1.3em;
  margin-right: 0.3em;
  content: "●";
  color: #009891;
}
/* image resize */
.imgCoupling01 {
  margin: 0 auto 2em;
  width: 70%;
}
.imgCoupling03 {
  margin: 0 auto;
  width: 70%;
}
.imgCoupling05 {
  width: 48%;
  text-align: center;
}
/* table */
.tableProducts {margin-bottom: 1em;}
.tableProducts::after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}
.tableProducts .img {
  float: left;
  width: 240px;
}
.tableProducts table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid #ccc 1px;
  border-left: solid #ccc 1px;
}
.tableProducts table th,
.tableProducts table td {
  padding: 1em 5px;
  border-bottom: solid #ccc 1px;
  border-right: solid #ccc 1px;
  text-align: center;
}
.tableProducts table th {
  background: #F0DFE0;
}
.tableProducts table td {
  text-align: center;
}
.tableProducts.shiyou table {
  float: right;
  width: 74%;
}
.tableProducts.shiyou table tr:nth-child(even),
.tableProducts.shiyou2 table tr:nth-child(even){background: #f2f2f2;}
.tableProducts.shiyou.tableSmall table,
.tableProducts.shiyou2.tableSmall table{font-size: small;}

@media only screen and (max-width:768px){
  #processArea h3.h3coupling span::before {
    content: " ";
  }
  .imgCoupling01,
  .imgCoupling03 {width: 100%;}
  .imgCoupling05 {font-size: small;}
  .couplingBox.floatLeft,
  .couplingBox.floatRight,
  .floatLeft.graph,
  .floatRight.graph,
  .floatLeft.nova,
  .floatLeft.novaImg,
  .floatRight.novaImg {
    float: none;
    width: 100%;
  }
  .couplingList.floatLeft,
  .couplingList.floatRight {
    margin-right: 0;
    width: 44%;
    font-size: 90%;
  }
  .tableProducts .img {
    float: none;
    margin: auto;
    width: 80%;
  }
  .tableProducts.shiyou table {
    float: none;
    width: 100%;
  }
  .spScroll {
    overflow: auto;
    white-space: nowrap;
  }
  .spScroll::-webkit-scrollbar{height: 5px;}
  .spScroll::-webkit-scrollbar-track{background: #F1F1F1;}
  .spScroll::-webkit-scrollbar-thumb {background: #BCBCBC;}
}




/* NOVA
--------------------------------------------------------------------*/
.floatLeft.novaImg,
.floatRight.novaImg {margin-bottom: 1em;}
.floatLeft.novaImg {width: 31%;}
.floatRight.novaImg {width: 67%;}
.novaImg_kata {
  margin: auto;
  width: 40%;
}

@media only screen and (max-width:768px){
  .floatLeft.nova,
  .floatLeft.novaImg,
  .floatRight.novaImg {
    float: none;
    width: 100%;
  }
  .novaImg_kata {width: 100%;}
}