@charset "utf-8";

/* ***************************
 *
 * techInd
 *
 *************************** */

.ocp #techInd {
  position: relative;
}
.ocp #techInd h1 img {
  width: 100%;
  height: auto;
  display: block;
}
.ocp #techInd h2,
.ocp #techInd p,
.ocp #techInd li {
  overflow: hidden;
  position: absolute;
}
.ocp #techInd h2 {
  width: 87.4%;
  height: auto;
  top: 5.3%;
  left: 6.4%;
}
.ocp #techInd p {
  left: 6.3%;
}
.ocp #techInd li {
  left: 5.5%;
  width: 50.6%;
}
.ocp #techInd p.lead {
  width: 72%;
  top: 21%;
}
.ocp #techInd li.item01 {
  top: 44.5%;
}
.ocp #techInd li.item02 {
  top: 52.2%;
}
.ocp #techInd li.item03 {
  top: 59.9%;
}
.ocp #techInd li.item04 {
  top: 67.9%;
}
.ocp #techInd li.item05 {
  top: 75.6%;
}
.ocp #techInd li.item06 {
  top: 83.6%;
}
.ocp #techInd p.link {
  top: 93%;
}
.ocp #techInd p.link a {
  color: #fff;
  text-decoration: none;
  opacity: 1;
}
.ocp #techInd p.link a:hover {
  opacity: 0.7;
}
.ocp #techInd p.smart {
  top: 2%;
  left: 63.8%;
  color: #fff;
  font-size: x-small;
}

@media (min-width:768px) {
.ocp #techInd-sp {
  display: none;
}
}

@media (max-width:767px) {
.free-html .container-fluid {
  padding: 0;
}
.free-html .container-fluid img {
  width: 100%;
}
.ocp #techInd {
  display: none;
}
.ocp #techInd-sp {
  background-color: #000;
}
.ocp #techInd-sp p.lead {
  color: #fff;
  padding: 4%;
}
.ocp #techInd-sp p.link {
  margin-top: 4%;
  padding-bottom: 4%;
}
.ocp #techInd-sp p.link a {
  color: #fff;
  margin-left: 5px;
}
.ocp #techInd-sp p.smart {
  color: #fff;
  padding: 2% 4% 0 0;
  text-align: right;
}
}