/*
  File Name   : function.css
  Description : 機能紹介ページ
*/

/* section
================================================== */
#main {
  margin: 50px 0 0;
}
section {
  padding: 45px 0;
}
.section__inner {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}
.sec__title {
  color: #699bac;
  text-align: center;
}
.sec__title--jp {
  font-size: 28px;
  font-weight: bold;
}
.sec__title--en {
  margin: 10px 0 0;
  font-size: 15px;
}
.sec__subtitle {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/* func-box
================================================== */
.func-box {
  margin: 20px 0 0;
  padding: 20px;
  background: #f2f2f2;
}
.func-table tr + tr {
  border-top: 5px solid #f2f2f2;
}
.func-table th {
  width: 25%;
  padding: 20px 10px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.func-table td {
  padding: 20px;
  font-size: 14px;
  background: #fff;
}

/* sec--upper
================================================== */
.sec--upper {
  padding-top: 100px;
}
.sec--upper .sec__subtitle {
  color: #dc5c5c;
}
.sec--upper .func-table th {
  background: #dc5c5c;
}

/* sec--insole
================================================== */
.sec--insole .sec__subtitle {
  color: #4684bc;
}
.sec--insole .func-table th {
  background: #4684bc;
}

/* sec--insole02
================================================== */
.sec--insole02 .sec__subtitle {
  color: #46bcb6;
}
.sec--insole02 .func-table th {
  background: #46bcb6;
}

/* sec--sole
================================================== */
.sec--sole .sec__subtitle {
  color: #6fae5a;
}
.sec--sole .func-table th {
  background: #6fae5a;
}

/* sec--impact
================================================== */
.sec--impact .sec__subtitle {
  color: #d78738;
}
.sec--impact .func-table th {
  background: #d78738;
}

/* sec--waterproof
================================================== */
.sec--waterproof .sec__subtitle {
  color: #46a3c5;
}
.sec--waterproof .func-table th {
  background: #46a3c5;
}

/* sec--antibacterial
================================================== */
.sec--antibacterial .sec__subtitle {
  color: #afb638;
}
.sec--antibacterial .func-table th {
  background: #afb638;
}

/* sec--structure
================================================== */
.sec--structure .sec__subtitle {
  color: #a86fc0;
}
.sec--structure .func-table th {
  background: #a86fc0;
}

/* sec--parts
================================================== */
.sec--parts .sec__subtitle {
  color: #e181ac;
}
.sec--parts .func-table th {
  background: #e181ac;
}

@media screen and (max-width: 811px) {
  /* section
  ================================================== */
  #main {
    margin: 25px 0 0;
  }
  section {
    padding: 20px 0;
  }
  .section__inner {
    width: 93.75%;
  }
  .sec__title--jp {
    font-size: 17px;
    font-weight: bold;
  }
  .sec__title--en {
    margin: 5px 0 0;
    font-size: 14px;
  }
  .sec__subtitle {
    font-size: 13px;
  }

  /* func-box
  ================================================== */
  .func-box {
    margin: 10px 0 0;
    padding: 10px;
  }
  .func-table tr + tr {
    border-top: 3px solid #f2f2f2;
  }
  .func-table th {
    display: block;
    width: 100%;
    padding: 5px 10px;
    font-size: 12px;
  }
  .func-table td {
    display: block;
    padding: 10px;
    font-size: 11px;
  }

  /* sec--upper
  ================================================== */
  .sec--upper {
    padding-top: 50px;
  }

}