@charset "UTF-8";
/*------------------
common
--------------------*/
.ttl-area .f-en span:last-child {
  font-size: 3.2rem;
}
h2 span.en-font {
  font-size: 1.9rem;
  color: #10577F;
}
.thumb-content {
  position: relative;
}
.thumb-content .list-box figure {
  width: 50%;
  margin-right: 30px;
}
.thumb-content .list-box figure:last-child {
  margin-right: 0;
}
.thumb-content .list-box figure div {
  margin-bottom: 15px;
}
.thumb-content .list-box figure h3 {
  font-size: 1.27rem;
}
.thumb-content .list-box figure figcaption {
  margin-top: 15px;
}
.thumb-content .list-box figure:first-child img {
  transition-delay: 150ms;
}
.thumb-content .list-box figure:last-child img {
  transition-delay: 400ms;
}
.thumb-content .list-box:after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: -1;
  right: -5%;
  top: -9%;
  width: 75%;
  height: 114%;
  background: #F8F7F7;
}
.kv-page-area {
  margin: 370px 0 0;
}
.btn-dl > div {
margin-bottom: 40px;
}
/*----生産性向上のための3つのPOINT----*/
.three-point-area .content-group {
  margin: 0 auto 60px;
}
.three-point-area .hearing-area .content-group {
  margin-bottom: 0;
}
.hearing-area {
  background: linear-gradient(53deg, #F8F7F7 62%, #fff 28%);
  padding-bottom: 100px;
}
.hearing-area .hearing-area-inner {
  background-image: url(../images/factory-transformation/bg-point.png);
  background-size: 40%;
  background-repeat: repeat;
  background-position: 0 90px;
}
/*----POINT01----*/
.point01-area {
  position: relative;
}
.point01-area .left-box {
  margin-right: 57px;
  max-width: 440px;
  width: 100%;
  position: relative;
}
.point01-area .right-box {
  position: relative;
  max-width: 800px;
  width: 100%;
  padding-top: 30px;
}
.point01-area .right-box p {
  margin-bottom: 15px;
  font-size: 0.95rem;
}
.point01-area .right-box ul li {
  margin-bottom: 5px;
}
.point01-area .right-box img {
  margin-bottom: 15px;
  transition-delay: 200ms;
}
/*----POINT02----*/
.point02-area h4 + p {
  margin: 10px 0 0;
}
.point02-area figure {
  position: relative;
  width: 50%;
  margin: 40px 60px 0 0;
  background: #fff;
  padding: 25px;
  border: solid 1px #D9E1E0;
}
.point02-area figure:last-child {
  margin-right: 0;
}
.point02-area figure:first-child img {
  transition-delay: 100ms;
}
.point02-area figure:last-child img {
  transition-delay: 400ms;
}
.point02-area figure h3 {
  font-size: 1.25rem;
  border-bottom: solid 1px #ccc;
  margin-bottom: 10px;
}
.point02-area figure p {
  margin-bottom: 15px;
  font-size: 0.9rem;
}
.point02-area figure h3 > span {
  display: inline-block;
  position: relative;
  margin: 0 10px 3px 10px;
  color: #20978b;
  font-size: 1rem;
  line-height: 1;
}
.point02-area figure h3 > span > span {
  color: #94beb6;
  font-size: 33px;
  display: inline-block;
  margin-left: 2px;
}
.point02-area h3 span:before {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  left: -7px;
  width: 3px;
  height: 15px;
  background: #20978b;
}
/*----POINT03----*/
.point03-area .step3-area h3 {
  text-align: center;
}
.point03-area .point03-area-inner .ttl-box {
  margin-bottom: 30px;
}
.point03-area .img-box {
  position: relative;
  width: 100%;
  margin-left: auto;
  padding-bottom: 0;
}
.point03-area .img-box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 69%;
  text-align: center;
}
.point03-area .img-box p span {
  display: block;
  font-weight: 600;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 15px;
}
.point03-area .step3-area {
  padding: 45px;
  background: #ffffff;
  margin: 0;
}
.point03-area .step3-area h3 > span {
  display: inline-block;
  border-top: solid 1px #10577F;
  border-bottom: solid 1px #10577F;
  padding: 4px;
  margin: 10px 0;
}
.point03-area .step3-area h3 > span > span {
  font-size: 2.5rem;
  font-family: 'Unica One', cursive;
}
.point03-area .step3-area ul.step3-box {
  margin-top: 50px;
}
.step-list-area ul li:before {
  bottom: 318px;
}
.point03-area .step3-area ul.step3-box > li:nth-child(1) img {
  transition-delay: 150ms;
}
.point03-area .step3-area ul.step3-box > li:nth-child(2) img {
  transition-delay: 400ms;
}
.point03-area .step3-area ul.step3-box > li:nth-child(3) img {
  transition-delay: 600ms;
}
.point03-area .step3-area ul.step3-box li:last-child:before {
  display: none;
}
.point03-area .step3-area ul.step3-box img {
  margin: 10px 0;
}
.point03-area .step3-area ul.step3-box li p {
  margin-bottom: 10px;
}
.point03-area .step3-area ul.step3-box ul.circle-list li {
  margin-bottom: 5px;
  padding-left: 5px;
  font-size: 0.9rem;
}
.point03-area .step3-area ul.step3-box ul.circle-list:last-child li:last-child {
  margin-bottom: 0;
}
/*----導入の流れ----*/
.implement-area {
  padding: 100px 0;
  background: linear-gradient(312deg, #F8F7F7 62%, #fff 28%);
}
.implement-area h2 {
  margin-bottom: 40px;
}
.implement-area .implement-area-inner {
  background-image: url(../images/factory-transformation/bg-implement.png);
  background-size: 96%;
  background-repeat: no-repeat;
  background-position: 0 26px;
}
.implement-area ul {
  margin: 0 auto;
  max-width: 900px;
}
.implement-area ul li {
  position: relative;
  margin-bottom: 65px;
}
.implement-area ul li:last-child {
  margin-bottom: 0;
}
.implement-area ul li .implement-txt {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(0);
  padding: 50px;
  width: 56%;
  background: #ffffff;
  z-index: 2;
}
.implement-area ul li .implement-txt:before, .implement-area ul li .implement-txt:after {
  width: calc(100% - 20px);
  height: 0;
  display: block;
  position: absolute;
  left: 0;
  content: ""
}
.implement-area ul li .implement-txt:before {
  border-bottom: solid 20px #ffffff;
  border-right: solid 20px transparent;
  bottom: 100%;
}
.implement-area ul li .implement-txt:after {
  border-top: solid 20px #ffffff;
  border-right: solid 20px transparent;
  top: 100%;
}
.implement-area ul li .implement-txt + div {
  max-width: 429px;
  margin-left: auto;
}
.hearing-area:before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 120px;
  background: #f8f7f7;
  z-index: 0;
}
@media screen and (max-width: 640px) {
  body {
    font-size: 0.9rem;
  }
  main section h2 + p, main p {
    font-size: 0.9rem;
  }
}