@charset "UTF-8";
/* ------------------------------
- .contentArea
------------------------------ */
.contentArea {
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
}
@media only screen and (max-width: 640px) {
  .contentArea {
      padding: 30px 0;
  }
}
/* ------------------------------
- .section
------------------------------ */
.section{
    margin-bottom: 50px;
}
.section:last-child{
    margin-bottom: 0;
}
.section_heading{
    font-size: 28px;
    color: #f3993a;
    padding-bottom: 27px;
    margin-bottom: 40px;
    border-bottom:  2px solid #f3993a;
}
/* ------------------------------
- modules
------------------------------ */
.detailButton {
    display: block;
    width: 480px;
    margin: 0 auto;
    color: #fff;
    font-size: 19px;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
    background-color: #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    font-weight: 400;
}
.detailButton::after {
    content: '';
    width: 21px;
    height: 21px;
    background: url(../../common/images/icon_arrow.png) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
@media only screen and (max-width: 640px) {
  .detailButton {
    width: 100%;
    font-size: 14px;
    padding: 14px 20px 14px 0;
  }
  .detailButton::after {
    right: 4vw;
  }
}
/* ------------------------------
- about
------------------------------ */
.about{

}
.about_text{
    margin-bottom: 60px;
}
.about_foot{
    padding-bottom: 20px;
}
@media only screen and (max-width: 640px) {
  .about_foot{
      padding-bottom: 0;
  }
}
/* ------------------------------
- topics
------------------------------ */
.topics_thumb{
    width: 32%;
}
@media only screen and (max-width: 640px) {
  .topics_thumb{
      width: 100%;
  }
  .topics_thumb + .topics_thumb{
      margin-top: 5%;
  }
}
/* ------------------------------
- usage
------------------------------ */
.usage_thumb{
    width: 32%;
}
@media only screen and (max-width: 640px) {
  .usage_thumb{
      width: 100%;
  }
  .usage_thumb + .usage_thumb{
      margin-top: 5%;
  }
}
/* ------------------------------
- service
------------------------------ */
.service_thumb{
    width: 32%;
}
@media only screen and (max-width: 640px) {
  .service_thumb{
      width: 100%;
  }
  .service_thumb + .service_thumb{
      margin-top: 5%;
  }
}