@charset "UTF-8";
/******************************************************************

Stylesheet: ベーススタイル

******************************************************************/
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "P PLUS 1p";
  font-weight: bolder;
  background-color: #fafafa;
  width: 100%;
  height: auto;
}

header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 50px;
  margin: -48px 0 0 0;
}
header .logo__area {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
header .logo__area .logotop {
  width: 50%;
  margin-left: 20px;
}
header .logo__area .logotop a .logo {
  width: 100px;
  height: 30px;
  border: 3px solid #8f8f8f;
  background-color: #ffffff;
  opacity: 0.8;
  position: relative;
  text-align: center;
}
header .logo__area .logotop a .logo p {
  width: 100%;
  height: auto;
  text-decoration: none;
  color: #8f8f8f;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
header .logo__area .about {
  width: 50%;
  height: auto;
  margin-right: 20px;
}
header .logo__area .about p {
  padding: 7px 0;
  text-align: right;
}
header .logo__area .about a {
  color: #6d6d6d;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}

.mainarea {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
}
.mainarea .top_image {
  width: 85%;
  margin: 60px auto 0;
}
.mainarea .top_image img {
  width: 100%;
  height: auto;
}
.mainarea .main .product_title {
  width: 85%;
  height: auto;
  margin: 10px auto 0;
}
.mainarea .main .product_title .name p {
  font-size: 21px;
  font-weight: 700;
}
.mainarea .main .product_title .sub_name p {
  font-size: 17px;
  font-weight: 300;
  color: grey;
}
.mainarea .main .product_title .sub_name a {
  font-size: 14px;
  text-decoration: none;
}
.mainarea .main .product_explanation {
  width: 85%;
  height: auto;
  margin: 10px auto 10px;
}
.mainarea .main .product_explanation .explanation {
  width: 100%;
  height: auto;
  margin: 10px auto 10px;
}
.mainarea .main .product_explanation .explanation p {
  font-size: 14px;
  font-weight: 300;
}
.mainarea .main .product_explanation .product_owner .p_a,
.mainarea .main .product_explanation .role .p_a {
  margin: 15px auto 0;
}
.mainarea .main .product_explanation .product_owner .p_a p,
.mainarea .main .product_explanation .role .p_a p {
  color: #8b8b8b;
  font-size: 17px;
  font-weight: 300;
}
.mainarea .main .product_explanation .product_owner .p_a .my,
.mainarea .main .product_explanation .role .p_a .my {
  font-weight: 700;
}
.mainarea .main .product_explanation .product_owner .p_b,
.mainarea .main .product_explanation .role .p_b {
  margin: 0 auto 10px;
}
.mainarea .main .product_explanation .product_owner .p_b p,
.mainarea .main .product_explanation .role .p_b p {
  font-size: 14px;
  font-weight: 100;
}
.mainarea .main .product_explanation .product_owner .p_b .my,
.mainarea .main .product_explanation .role .p_b .my {
  font-weight: 700;
}
.mainarea .main .product_explanation .skill,
.mainarea .main .product_explanation .method,
.mainarea .main .product_explanation .machine {
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
.mainarea .main .product_explanation .skill p,
.mainarea .main .product_explanation .method p,
.mainarea .main .product_explanation .machine p {
  font-size: 14px;
  font-weight: 100;
  color: #8b8b8b;
  margin: 5px 3px 3px 0;
}
.mainarea .main .product_explanation .skill .sk,
.mainarea .main .product_explanation .method .sk,
.mainarea .main .product_explanation .machine .sk {
  font-size: 10px;
  color: #ffffff;
  border: 1px solid #5d740a;
  background-color: #89a720;
  padding: 2px;
}
.mainarea .main .product_explanation .skill .meth,
.mainarea .main .product_explanation .method .meth,
.mainarea .main .product_explanation .machine .meth {
  font-size: 10px;
  color: #ffffff;
  border: 1px solid #197aa7;
  background-color: #2799ce;
  padding: 2px;
}
.mainarea .main .product_explanation .skill .meth2,
.mainarea .main .product_explanation .method .meth2,
.mainarea .main .product_explanation .machine .meth2 {
  font-size: 10px;
  color: #ffffff;
  border: 1px solid #197aa7;
  background-color: #5cb2da;
  padding: 2px;
}
.mainarea .main .product_explanation .skill .mac,
.mainarea .main .product_explanation .method .mac,
.mainarea .main .product_explanation .machine .mac {
  font-size: 10px;
  color: #ffffff;
  border: 1px solid #2f2646;
  background-color: #534b66;
  padding: 2px;
}
.mainarea .main .bc {
  width: 85%;
  height: auto;
  padding-bottom: 40px;
  margin: 0 auto 30px;
  border: 0.5px solid #c9c9c9;
}
.mainarea .main .bc .sub {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: flex-start;
}
.mainarea .main .bc .sub p {
  font-size: 14px;
  font-weight: 300;
  color: #ffffff;
  border: 1px solid #575757;
  background-color: #acacac;
  margin: 15px 0 10px 15px;
  padding: 3px;
}
.mainarea .main .bc .i {
  width: 100%;
  height: auto;
  margin: 10px auto;
}
.mainarea .main .bc .i .i_i {
  width: 95%;
  height: auto;
  margin: 0 auto 20px;
}
.mainarea .main .bc .i .i_i img {
  width: 100%;
  height: auto;
}
.mainarea .main .bc .i .i_sub {
  max-width: 95%;
  height: auto;
  padding: 0 10px;
  margin: 0 auto 20px;
}
.mainarea .main .bc .i .i_sub p {
  font-size: 17px;
  font-weight: 300;
}
.mainarea .main .bc .i .bol p {
  font-weight: 700;
}
.mainarea .main .bc .i .work__button {
  width: 200px;
  text-align: center;
  margin: 0 auto;
}
.mainarea .main .bc .i .work__button .btn {
  border: 1px solid #bebebe;
  background-color: #ffe033;
  padding: 10px 40px;
  margin: 20px 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.mainarea .main .bc .i .work__button .btn:hover {
  background-color: #dfa812;
  color: white;
}
.mainarea .main .bc .i .youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 95%;
  margin: 0 auto;
}
.mainarea .main .bc .i .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mainarea .main .bc .i .space {
  width: 100%;
  height: 50px;
}
.mainarea .main .bc .nc {
  width: 100%;
  height: auto;
  background-color: #fafafa;
}
.mainarea .main .sa {
  opacity: 0;
  transition: all 0.8s ease;
}
.mainarea .main .sa.show {
  opacity: 1;
  transform: none;
}
.mainarea .main .sa--up {
  transform: translate(0, 50px);
}

footer {
  width: 100%;
  height: 30px;
  text-align: center;
}
footer p {
  color: #8f8f8f;
  font-size: 8px;
}

@media screen and (min-width: 480px) {
  /******************************************************************

  Stylesheet: 480px以上(スマホの横向き)のモニタで適用

  ******************************************************************/
}
@media screen and (min-width: 600px) {
  /******************************************************************

  Stylesheet: 600px以上のタブレットやモニタで適用

  ******************************************************************/
}
@media screen and (min-width: 855px) {
  /******************************************************************

  Stylesheet: 960px以上のモニタで適用

  ******************************************************************/
}
@media screen and (min-width: 1280px) {
  /******************************************************************

  Stylesheet: 1280px以上のモニタで適用

  ******************************************************************/
}
@media screen and (min-width: 1600px) {
  /******************************************************************

  Stylesheet: 1280px以上のモニタで適用

  ******************************************************************/
}
@media screen and (min-width: 1700px) {
  /******************************************************************

  Stylesheet: 1280px以上のモニタで適用

  ******************************************************************/
}
@media (min-resolution), (-webkit-min-device-pixel-ratio: 2) {
  /******************************************************************

  Stylesheet: Retinaディスプレイで適用

  ******************************************************************/
  /* 

  EXAMPLE 
  .icon {
  	background: url(images/test@2x.png) no-repeat;
  	background-size: 24px 24px;
  }

  */
}
@media print {
  /******************************************************************

  Stylesheet: プリンタのみに適用

  ******************************************************************/
}/*# sourceMappingURL=style.css.map */