@charset "UTF-8";

/* --------------------
  .service_top_mv_block
-------------------- */
.service_top_mv_img {
  background-size: clamp(420px,calc(420px + calc(1180 - 420) * (100vw - 668px) / 932),1180px);
  background-image: url("/asset/images/service/top/mv_img.jpg");
  background-position: top 75% right;
}
.service_top_mv_block .inner {
  position: relative;
}
.service_top_mv_block .inner::before,
.service_top_mv_block .inner::after {
  content: "";
  background-image: url("/asset/images/common/decoration_clover.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
.service_top_mv_block .inner::before {
  width: clamp(50px,calc(50px + calc(73 - 50) * (100vw - 668px) / 632),73px);
  height: clamp(50px,calc(50px + calc(73 - 50) * (100vw - 668px) / 632),73px);
  bottom: -97px;
  left: clamp(-37px,calc(20px + calc(-37 - 20) * (100vw - 1300px) / 300),20px)
}
.service_top_mv_block .inner::after {
  width: clamp(80px,calc(80px + calc(129 - 80) * (100vw - 668px) / 632),129px);
  height: clamp(80px,calc(80px + calc(129 - 80) * (100vw - 668px) / 632),129px);
  bottom: -41px;
  right: clamp(-63px,calc(20px + calc(-63 - 20) * (100vw - 1300px) / 300),20px)
}
@media (max-width: 667px) {
  .service_top_mv_img {
    background-size: cover;
    background-position: right 45% top 100%;
  }
  .service_top_mv_block .inner::before {
    width: 32px;
    height: 32px;
    bottom: -46px;
    left: 21px;
  }
  .service_top_mv_block .inner::after {
    width: 69px;
    height: 69px;
    bottom: -104px;
    right: 22px;
  }
}


/* --------------------
  .reason_block
-------------------- */
.reason_block {
  margin-bottom: 150px;
}
.reason_title_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 111px;
}
.reason_title_block h2 {
  font-size: clamp(35px,calc(35px + calc(63 - 35) * (100vw - 668px) / 632),63px);
  font-weight: 700;
}
.reason_title_block h2 span {
  font-size: clamp(20px,calc(20px + calc(32 - 20) * (100vw - 668px) / 632),32px);
  font-weight: 600;
  margin-bottom: 7px;
  display: block;
}
.reason_title_block .reason_title_logo {
  border-right: 1px solid #D9D9D9;
  border-left: 1px solid #D9D9D9;
  padding: 29px clamp(35px,calc(35px + calc(66 - 35) * (100vw - 668px) / 632),66px) 38px;
}
.reason_title_block .reason_title_logo img {
  width: clamp(100px,calc(100px + calc(189 - 100) * (100vw - 668px) / 632),189px);
}
.reason_list {
  counter-reset: reason_number;
  margin-bottom: 130px;
}
.reason_list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  counter-increment: reason_number;
}
.reason_list li:not(:last-child) {
  margin-bottom: 80px;
}
.reason_list li img {
  width: 48.5%;
  border-radius: clamp(50px,calc(50px + calc(100 - 50) * (100vw - 668px) / 632),100px);
}
.reason_list li dl {
  width: 44%;
}
.reason_list li dt {
  font-size: clamp(20px,calc(20px + calc(32 - 20) * (100vw - 668px) / 632),32px);
  font-weight: 600;
  margin-bottom: 24px;
}
.reason_list li dt::before {
  content: counter(reason_number);
  color: #E60044;
  font-family: 'lexend';
  font-size: clamp(50px,calc(50px + calc(100 - 50) * (100vw - 668px) / 632),100px);
  display: block;
  margin-bottom: 34px;
  margin-bottom: clamp(20px,calc(20px + calc(34 - 20) * (100vw - 668px) / 632),34px);
  line-height: 1;
  font-weight: 400;
}
.reason_list li dd {
  line-height: 2;
}
.reason_badge_title {
  font-size: clamp(20px,calc(20px + calc(40 - 20) * (100vw - 668px) / 632),40px);
  font-weight: 700;
  line-height: 2;
  text-align: center;
  margin-bottom: 36px;
}
.reason_badge_list {
  display: flex;
  justify-content: space-between;
}
.reason_badge_list li {
  width: 22%;
}
.reason_badge_list li img {
  width: 95%;
  margin: 0 auto 12px;
}
.reason_badge_list p {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 667px) {
  .reason_block {
    margin-bottom: 92px;
  }
  .reason_title_block {
    margin-bottom: 57px;
    flex-flow: column;
  }
  .reason_title_block h2 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 22px;
  }
  .reason_title_block h2 span {
    font-size: 16px;
    font-weight: 400;
  }
  .reason_title_block .reason_title_logo {
    border: none;
    padding: 0;
  }
  .reason_title_block .reason_title_logo img {
    width: 114px;
  }
  .reason_list {
    margin-bottom: 79px;
  }
  .reason_list li {
    flex-flow: column;
  }
  .reason_list li:not(:last-child) {
    margin-bottom: 64px;
  }
  .reason_list li img {
    width: 100%;
    border-radius: 70px;
  }
  .reason_list li dl {
    width: 100%;
  }
  .reason_list li dt {
    display: flex;
    column-gap: 16px;
    align-items: center;
  }
  .reason_list li dt::before {
    font-size: 65px;
    margin-bottom: 0;
    line-height: .91;
  }
  .reason_list li dd img {
    margin-bottom: 24px;
  }
  .reason_badge_title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 32px;
  }
  .reason_badge_list {
    flex-wrap: wrap;
    padding: 0 2%;
    row-gap: 7vw;
  }
  .reason_badge_list li {
    width: 45%;
  }
  .reason_badge_list li img {
    margin-bottom: 8px;
  }
  .reason_badge_list p {
    font-size: 12px;
    font-weight: 400;
    text-align: left;
  }
}


/* --------------------
  .service_block
-------------------- */
.service_block {
  background-color: #00C0E8;
  border-radius: clamp(60px,calc(60px + calc(120 - 60) * (100vw - 668px) / 632),120px) clamp(60px,calc(60px + calc(120 - 60) * (100vw - 668px) / 632),120px) 0 0;
  padding: 93px 0 132px;
}
.service_block h2 {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 90px;
  text-align: center;
  color: #fff;
}
.service_list {
  display: flex;
  gap: clamp(20px, calc(20px + calc(50 - 20) * (100vw - 668px) / 632), 50px);
  margin-bottom: 90px;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.service_list li {
  background-color: #fff;
  border-radius: clamp(50px, calc(50px + calc(100 - 50) * (100vw - 668px) / 632), 100px);
  padding: clamp(30px, calc(30px + calc(63 - 30) * (100vw - 668px) / 632), 63px) clamp(20px, calc(20px + calc(55 - 20) * (100vw - 668px) / 632), 55px) clamp(30px, calc(30px + calc(69 - 30) * (100vw - 668px) / 632), 69px);
  display: flex;
  flex-flow: column;
  width: 30.5%;
}
.service_list li h3 {
  text-align: center;
  font-size: clamp(24px,calc(24px + calc(32 - 24) * (100vw - 668px) / 632),32px);
  font-weight: 700;
  margin-bottom: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  flex-flow: column;
}
.service_list li h3 span {
  font-size: clamp(18px,calc(18px + calc(24 - 18) * (100vw - 668px) / 632),24px);
}
.service_list li .btn_blue {
  margin-top: auto;
}
.service_list_content {
  display: flex;
  flex-flow: column;
  align-items: center;
  row-gap: 46px;
  margin-bottom: 37px;
}
.service_list_content img {
  height: 153px;
}
.service_list_content p {
  line-height: 2;
}
.combination_service_block {
  color: #fff;
}
.combination_service_block h3 {
  font-size: clamp(30px,calc(30px + calc(40 - 30) * (100vw - 668px) / 632),40px);
  text-align: center;
  line-height: 2;
  margin-bottom: 64px;
  font-weight: 700;
}
.combination_content {
  max-width: 894px;
  margin: auto;
}
.combination_content + .combination_content {
  margin-top: 70px;
}
.combination_service {
  display: flex;
  align-items: center;
  column-gap: 25px;
  width: 100%;
  margin-bottom: 29px;
}
.combination_service img {
  width: clamp(30px,calc(30px + calc(51 - 30) * (100vw - 668px) / 632),51px);
}
.combination_service_name {
  font-size: clamp(24px,calc(24px + calc(32 - 24) * (100vw - 668px) / 632),32px);
  font-weight: 700;
  text-align: center;
  width: 100%;
  flex: 1;
  background-color: #0081CC;
  padding: 12px;
  border-radius: 100px;
}
.combination_service_text {
  font-size: clamp(18px,calc(18px + calc(24 - 18) * (100vw - 668px) / 632),24px);
  font-weight: 500;
}
.service_balloon_block {
  position: relative;
  max-width: 1100px;
  margin: 171px auto 0;
}
.service_balloon_block img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 172px;
  max-height: none;
  z-index: 1;
}
.service_balloon_block p {
  font-size: clamp(25px, calc(25px + calc(36 - 25) * (100vw - 668px) / 632), 40px);
  background-color: #fff;
  color: #0081CC;
  font-weight: 700;
  padding: 14px 20px 14px 200px;
  border-radius: 100px;
  position: relative;
}
.service_balloon_block p::before {
  content: "";
  background-image: url("/asset/images/service/top/service_balloon_before.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 32px;
  height: 113px;
  background-position: bottom center;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%,-100%);
}

@media (max-width: 999px) {
  .service_list {
    justify-content: center;
  }
  .service_list li {
    width: calc(50% - 20px);
  }
}
@media (max-width: 667px) {
  .service_block {
    padding: 41px 0 67px;
  }
  .service_block h2 {
    font-size: 32px;
    margin-bottom: 29px;
  }
  .service_list {
    display: flex;
    gap: 40px;
    margin-bottom: 70px;
  }
  .service_list li {
    border-radius: 70px;
    padding: 30px;
    min-width: 0;
    width: 100%;
  }
  .service_list li h3 {
    margin-bottom: 21px;
    height: auto;
  }
  .service_list li h3 span {
    font-size: 14px;
  }
  .service_list_content {
    column-gap: 30px;
    margin-bottom: 32px;
    flex-flow: row
  }
  .service_list_content img {
    width: 100px;
    height: auto;
    flex-shrink: 0;
  }
  .service_list_content p {
    line-height: 1.5;
    font-size: 14px;
  }
  .service_list li .btn_blue {
    width: 74%;
    padding: 10px;
    margin: auto;
  }
  .service_list li a::after {
    width: 8px;
    height: 8px;
    right: 20px;
  }
  .combination_service_block h3 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 45px;
  }
  .combination_content {
    width: 74%;
    margin: auto;
  }
  .combination_content + .combination_content {
    margin-top: 56px;
  }
  .combination_service {
    flex-flow: column;
    row-gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
  }
  .combination_service img {
    width: 21px;
  }
  .combination_service_name {
    font-size: 20px;
    width: 100%;
    padding: 10px;
  }
  .combination_service_text {
    font-size: 16px;
    font-weight: 400;
  }
  .service_balloon_block {
    margin-top: 91px;
  }
  .service_balloon_block img {
    width: 100px;
  }
  .service_balloon_block p {
    font-size: 16px;
    padding: 9px 30px 9px 112px;
  }
  .service_balloon_block p::before {
    width: 19px;
    height: 70px;
    top: 9px;
  }
}