.introduction {
  padding: 0 0 170px;
}
.introduction .media01 {
  margin-top: 132px;
}
.introduction .media01 .img_wrap {
  width: 47.5841874085%;
  padding-top: 32.9428989751%;
}
.introduction .media01 figure {
  width: 116.6153846154%;
}
.introduction .media02 {
  margin-top: 127px;
}
.introduction .media02 .img_wrap {
  width: 50.2196193265%;
  padding-top: 32.9428989751%;
}
.introduction .media02 figure {
  width: 110.4956268222%;
}
.introduction .media02 .body::before, .introduction .media02 .body::after {
  content: "";
  position: absolute;
}
.introduction .media02 .body::before {
  width: 333px;
  height: 297px;
  background: url("../img/common/texture07.png") center center/cover no-repeat;
  top: -100px;
  left: -90px;
}
.introduction .media02 .body::after {
  width: 300px;
  height: 300px;
  background: url("../img/common/texture02.png") center center/cover no-repeat;
  bottom: -120px;
  right: -240px;
  z-index: -10;
}
.introduction .body {
  position: relative;
}
.introduction .body .item {
  width: 490px;
  height: 490px;
  background: url("../img/services/circle_bg.png") center center/cover no-repeat;
  border-radius: 50%;
  position: absolute;
  transition: all .3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.introduction .body .item:hover {
  transform: scale(1.1);
}
.introduction .body .item p {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}
.introduction .body .item p span {
  font-size: 16px;
  font-weight: 400;
  display: block;
  color: #696969;
}
.introduction .body .item figure {
  position: relative;
}
.introduction .item01 {
  top: -264px;
  left: -193px;
}
.introduction .item01 p {
  margin-top: 32px;
}
.introduction .item01 figure {
  width: 114px;
}
.introduction .item02 {
  top: 40px;
  left: 55px;
}
.introduction .item02 p {
  margin-top: 18px;
}
.introduction .item02 figure {
  width: 103px;
}
.introduction .item03 {
  top: -10px;
  left: 15px;
}
.introduction .item03 p {
  margin-top: 40px;
}
.introduction .item03 figure {
  width: 134px;
}
@media screen and (min-width: 768px) and (max-width: 1180px) {
  .introduction .body .item {
    width: 41.5254237288vw;
    height: 41.5254237288vw;
  }
  .introduction .body .item p {
    font-size: 2.0338983051vw;
  }
  .introduction .body .item p span {
    font-size: 1.3559322034vw;
  }
  .introduction .item01 {
    top: -22.3728813559vw;
    left: -16.3559322034vw;
  }
  .introduction .item01 p {
    margin-top: 2.7118644068vw;
  }
  .introduction .item01 figure {
    width: 9.6610169492vw;
  }
  .introduction .item02 {
    top: 3.3898305085vw;
    left: 4.6610169492vw;
  }
  .introduction .item02 p {
    margin-top: 1.5254237288vw;
  }
  .introduction .item02 figure {
    width: 8.7288135593vw;
  }
  .introduction .item03 {
    top: -0.8474576271vw;
    left: 1.2711864407vw;
  }
  .introduction .item03 p {
    margin-top: 3.3898305085vw;
  }
  .introduction .item03 figure {
    width: 11.3559322034vw;
  }
}
main .menu {
  text-align: center;
  padding: 100px;
  font-size: 19px;
}
.br-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .br-sp {
    display: block;
}
  main .menu {
    display: block;
    padding: 10vw 0 0;
    font-size: 3.7333333333vw;
    line-height: 1.78;
    max-width: 86.6666666667vw;
    margin: 0 auto;
    font-weight: 400;
  }
  .introduction {
    padding: 0 0 23.2vw;
  }
  .introduction .media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .introduction .media01 {
    margin-top: 5.8666666667vw;
  }
  .introduction .media01 .img_wrap {
    width: 100%;
    padding-top: 106.6666666667vw;
  }
  .introduction .media01 figure {
    width: 93.3333333333vw;
  }
  .introduction .media02 {
    margin-top: 0;
  }
  .introduction .media02 .img_wrap {
    position: relative;
    top: 0;
    width: 100%;
    padding-top: 72.2666666667vw;
  }
  .introduction .media02 figure {
    width: 93.3333333333vw;
    margin: 0 0 0 auto;
  }
  .introduction .media02 .body::before {
    width: 44.4vw;
    height: 44.4vw;
    background: url("../img/common/texture02.png") center center/contain no-repeat;
    top: -86.6666666667vw;
    left: -20vw;
  }
  .introduction .media02 .body::after {
    width: 44.4vw;
    height: 44.4vw;
    background: url("../img/common/texture02.png") center center/contain no-repeat;
    bottom: -86.6666666667vw;
    right: -20vw;
    z-index: -10;
  }
  .introduction .body .item {
    width: 68.2666666667vw;
    height: 68.2666666667vw;
  }
  .introduction .body .item:hover {
    transform: scale(1);
  }
  .introduction .body .item p {
    font-size: 3.2vw;
  }
  .introduction .body .item p span {
    font-size: 3.7333333333vw;
  }
  .introduction .item01 {
    top: -5.3333333333vw;
    left: -6.6666666667vw;
    z-index: 2;
  }
  .introduction .item01 p {
    margin-top: 4.2666666667vw;
  }
  .introduction .item01 figure {
    width: 15.2vw;
  }
  .introduction .item02 {
    top: 35.7333333333vw;
    left: auto;
    right: -7.3333333333vw;
    z-index: 1;
  }
  .introduction .item02 p {
    margin-top: 2.2666666667vw;
  }
  .introduction .item02 figure {
    width: 13.7333333333vw;
  }
  .introduction .item03 {
    top: 4.5333333333vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .introduction .item03 p {
    margin-top: 5.3333333333vw;
  }
  .introduction .item03 figure {
    width: 17.8666666667vw;
    margin: 0 auto;
  }
}