@charset "UTF-8";
/* Scss Document */
/* -------------------------------------------------- */
/* file   : xx.css                                  */
/* update : 2023                                      */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* pc向け */
/* --------------------------------------------------- */
.service {
  padding-bottom: 70px;
}

.service-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.service-flex_l {
  width: 51.5%;
}

.service-flex_green {
  width: 41.6%;
  padding: 34px 40px 30px 54px;
  background: #e1f3ef;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 82, 179, 0.2);
          box-shadow: 0 5px 10px rgba(0, 82, 179, 0.2);
}

.service-flex_green-text {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: #231815;
}
.service-flex_green-text span {
  font-size: 33px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7e921), to(#f7e921));
  background-image: linear-gradient(#f7e921, #f7e921);
  background-size: 100% 25%;
  background-position: 0 72%;
  background-repeat: no-repeat;
}

.service-btn {
  margin-top: 22px;
}
.service-btn a {
  padding: 12px 30px 12px 45px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  display: inline-block;
  color: #006e46;
  background: #e6e921;
  display: inline-block;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 82, 179, 0.2);
          box-shadow: 2px 2px 5px rgba(0, 82, 179, 0.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.service-btn a span {
  display: inline-block;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.service-btn a:hover {
  color: #FFF;
  background: #006e46;
}
.service-btn a:hover span {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

/* -------------------pc END------------------------------- */
/* -------------------------------------------------- */
/* tablet向け */
/* --------------------------------------------------- */
/* ---------------------tablet END----------------------------- */
/* -------------------------------------------------- */
/* sp向け */
/* --------------------------------------------------- */
@media screen and (max-width: 750px) {
  .service {
    padding-bottom: 30px;
  }
  .service-flex {
    display: block;
  }
  .service-flex_l {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  .service-flex_l img {
    width: 100%;
  }
  .service-flex_green {
    width: 100%;
    margin-top: 25px;
    padding: 25px 30px 30px 30px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 82, 179, 0.2);
            box-shadow: 0 5px 10px rgba(0, 82, 179, 0.2);
  }
  .service-flex_green-text {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    padding-left: 0;
    font-size: 22px;
    line-height: 1.25;
  }
  .service-flex_green-text span {
    font-size: 26px;
    background-size: 100% 25%;
    background-position: 0 72%;
  }
  .service-btn {
    margin-top: 22px;
  }
  .service-btn a {
    padding: 12px 0 12px;
    font-size: 16px;
    text-align: center;
    display: block;
    -webkit-transition: 0s;
    transition: 0s;
  }
  .service-btn a span {
    -webkit-transition: 0s;
    transition: 0s;
  }
  .service-btn a:hover {
    color: #006e46;
    background: #e6e921;
  }
  .service-btn a:hover span {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/* -------------------sp END------------------------------- */