/* index
--------------------------------------------------------- */
.about_intro_wrap {
  width: 1280px;
  position: relative;
}

.about_intro_wrap > .about_intro .mv {
  width: 100%;
}

.about_intro_wrap > .about_intro .txt_area {
  position: relative;
  width: 1120px;
  margin: -32px auto 0;
  padding: 72px 40px 40px;
}

.about_intro_wrap > .about_intro .txt_area.w_bk {
  background: #ffffff;
}

.about_intro_wrap > .about_intro .txt_area h2.ttl {
  color: #2a5a88;
  font-size: 3.2rem;
  line-height: 4.8rem;
  font-weight: bold;
}

.about_intro_wrap > .about_intro .txt_area > .txt {
  margin-top: 32px;
  font-size: 1.8rem;
  line-height: 3.2rem;
}

.about_intro_wrap > .about_intro .txt_area > ul.explanation {
  margin-top: 40px;
  background: #f5f4f0;
  padding: 40px;
}

.about_intro_wrap > .about_intro .txt_area > ul.explanation > .ttl {
  font-size: 1.4rem;
  font-weight: bold;
  color: #666666;
  line-height: 1;
}

.about_intro_wrap > .about_intro .txt_area > ul.explanation > .txt {
  margin-top: 8px;
  font-size: 1.4rem;
  line-height: 2.6rem;
}

.promise {
  margin-top: 120px;
}

.promise h3.ttl {
  font-size: 4.8rem;
  line-height: 2.5;
  font-weight: bold;
  position: relative;
}

.promise h3.ttl:after {
  content: '';
  width: 60px;
  height: 54px;
  background: url(/cmn/img/icon_ttl.svg) no-repeat;
  display: inline-block;
  margin-left: 16px;
}

.promise h3.ttl > .shoulder {
  display: block;
  width: 100%;
  position: absolute;
}

.promise h3.ttl > .shoulder img {
  width: 120px;
  margin-bottom: 16px;
}

.promise h3.ttl + h4.ttl {
  margin-top: 24px;
}

.promise h4.ttl {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 6.4rem;
  margin-top: 80px;
}

.promise h4.ttl > .num {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 6.4rem;
  color: #2a5a88;
}

.promise h4.ttl > .txt {
  font-size: 3.2rem;
  font-weight: bold;
  margin-left: 32px;
  border-left: solid 2px #cccbc8;
  padding-left: 24px;
  /* &:nth-of-type(1) {
        @include sp {
          width: 23%;
        }
      }
      &:nth-of-type(2) {
        @include sp {
          width: 21%
        }
      }
      &:nth-of-type(3) {
        @include sp {
          width: 37%;
        }
      } */
}

.promise h4.ttl > .img {
  margin-left: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 8px;
}

.promise h4.ttl:nth-of-type(1) .img {
  width: 116px;
}

.promise h4.ttl:nth-of-type(1) .img img {
  width: 100%;
}

.promise h4.ttl:nth-of-type(2) .img {
  width: 148px;
}

.promise h4.ttl:nth-of-type(2) .img img {
  width: 100%;
}

.promise h4.ttl:nth-of-type(3) .img {
  width: 142px;
}

.promise h4.ttl:nth-of-type(3) .img img {
  width: 100%;
}

.promise .promise_detail {
  width: 1120px;
  margin: 24px auto 0;
}

.promise .promise_detail .kv {
  width: 1008px;
  margin: 0 auto;
}

.promise .promise_detail .txt_area {
  position: relative;
  width: 928px;
  margin: -40px auto 0;
  padding: 40px;
}

.promise .promise_detail .txt_area.w_bk {
  background: #ffffff;
}

.promise .promise_detail .txt_area h5.ttl {
  color: #263238;
  font-size: 2.0rem;
  line-height: 2.8rem;
  font-weight: bold;
}

.promise .promise_detail .txt_area > .txt {
  margin-top: 24px;
  font-size: 1.6rem;
  line-height: 2.8rem;
}

@media screen and (max-width: 768px) {
  .about_intro_wrap {
    width: 100%;
  }
}

@media screen and (max-width: 750px) {
  .about_intro_wrap {
    width: 100%;
  }
  .about_intro_wrap > .about_intro .txt_area {
    width: 89%;
    margin: -16px auto 0;
    padding: 72px 20px 20px;
  }
  .about_intro_wrap > .about_intro .txt_area h2.ttl {
    font-size: 2.4rem;
    line-height: 4.0rem;
  }
  .about_intro_wrap > .about_intro .txt_area > .txt {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
  .about_intro_wrap > .about_intro .txt_area > ul.explanation {
    padding: 20px;
  }
  .about_intro_wrap > .about_intro .txt_area > ul.explanation > .ttl {
    font-size: 1.2rem;
  }
  .about_intro_wrap > .about_intro .txt_area > ul.explanation > .txt {
    margin-top: 12px;
    font-size: 1.2rem;
    line-height: 2.2rem;
  }
  .promise h3.ttl {
    font-size: 4.0rem;
  }
  .promise h3.ttl:after {
    width: 45px;
    height: 50px;
    background-size: 100%;
    position: absolute;
    bottom: 24px;
  }
  .promise h3.ttl > .shoulder img {
    width: 29%;
  }
  .promise h4.ttl {
    width: 89%;
    margin: 80px auto 0;
  }
  .promise h4.ttl > .num {
    font-size: 4.0rem;
  }
  .promise h4.ttl > .txt {
    font-size: 2.4rem;
    margin-left: 16px;
    padding-left: 0;
    border-left: none;
    white-space: nowrap;
  }
  .promise h4.ttl > .img {
    margin-left: 8px;
  }
  .promise h4.ttl:nth-of-type(1) .img {
    width: 23%;
  }
  .promise h4.ttl:nth-of-type(2) .img {
    width: 30%;
  }
  .promise h4.ttl:nth-of-type(3) .img {
    width: 28%;
  }
  .promise .promise_detail {
    width: 100%;
    margin: 0 auto;
  }
  .promise .promise_detail .kv {
    width: 100%;
  }
  .promise .promise_detail .txt_area {
    width: 89%;
    margin: -20px auto 0;
    padding: 40px 20px;
  }
  .promise .promise_detail .txt_area > .txt {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
}