/* ======================================================================
 p_service_sns
====================================================================== */
/* =================================
 l_content
================================= */
.l_content {
  padding-top: 0;
}

/*============================
lead_sec
============================*/
.lead_sec {
  padding: 95px 0 100px;
}
@media screen and (max-width: 767px) {
  .lead_sec {
    padding: 80px 0;
  }
}
/*============================
problem_sec
============================*/
.problem_sec {
  padding: 75px 0 0;
  background-image: url("../../assets/img/p_service_sns/problem_bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.problem_sec .inner {
  display: flex;
}
.problem_sec .inner .img_area {
  position: relative;
  margin-top: 26px;
}
.problem_sec .inner .img_area::before {
  content: "";
  display: block;
  width: 74px;
  height: 77px;
  position: absolute;
  top: -42px;
  right: -81px;
  display: block;
  background-image: url("../../assets/img/p_service_sns/problem_confusion.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.problem_sec .inner .img_area .mobile_block {
  width: 486px;
  height: 598px;
  padding: 65px 15px 0;
  background-image: url("../../assets/img/p_service_sns/problem_mobile.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.problem_sec .inner .img_area .mobile_block .comment_wrap {
  height: 100%;
  overflow: auto;
}
.problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox {
  display: flex;
  padding: 21px 24px 21px 18px;
}
.problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment {
  margin-left: 12px;
}
.problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment .degree {
  margin-bottom: 6px;
  font-weight: var(--font-medium);
  font-size: 14px;
  line-height: 1.5;
}
.problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment .txt {
  font-weight: var(--font-bold);
  font-size: 16px;
  line-height: 1.625;
}
.problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox + .comment_subbox {
  border-top: 1px solid var(--color-sns-gray);
}
.problem_sec .inner .txt_area {
  width: 445px;
  margin-left: 95px;
}
.problem_sec .inner .txt_area .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 370px;
  margin-bottom: 26px;
  font-weight: var(--font-bold);
  text-align: center;
  background-image: url("../../assets/img/p_service_sns/problem_baloon.svg");
  background-size: cover;
  background-repeat: no-repeat;
}
.problem_sec .inner .txt_area .ttl .txt {
  margin-left: -25px;
  font-size: 36px;
  line-height: 1.61;
}
.problem_sec .inner .txt_area .ttl .highlight {
  color: var(--color-pink);
}
.problem_sec .inner .txt_area .lead {
  font-weight: var(--font-medium);
  font-size: 18px;
  line-height: 2.333;
}

@media screen and (max-width: 1080px) {
  .problem_sec .inner .img_area {
    margin-top: 2.41vw;
  }
  .problem_sec .inner .img_area::before {
    width: 6.85vw;
    height: 7.13vw;
    top: -3.89vw;
    right: -7.5vw;
  }
  .problem_sec .inner .img_area .mobile_block {
    width: 45vw;
    height: 55.37vw;
    padding: 6.02vw 1.39vw 0;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox {
    align-items: flex-start;
    padding: 1.94vw 2.22vw 1.94vw 1.67vw;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .img {
    width: 4.81vw;
    height: auto;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment {
    margin-left: 1.11vw;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment .degree {
    margin-bottom: 0.56vw;
    font-size: 1.296vw;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment .txt {
    font-size: 1.481vw;
  }
  .problem_sec .inner .txt_area {
    width: 41.2vw;
    margin-left: 8.8vw;
  }
  .problem_sec .inner .txt_area .ttl {
    height: 34.26vw;
    margin-bottom: 2.41vw;
  }
  .problem_sec .inner .txt_area .ttl .txt {
    margin-left: -2.31vw;
    font-size: 3.333vw;
  }
  .problem_sec .inner .txt_area .lead {
    font-size: 1.667vw;
  }
}
@media screen and (max-width: 767px) {
  .problem_sec {
    padding: 80px 0 0;
  }
  .problem_sec .inner {
    flex-direction: column-reverse;
    align-items: center;
  }
  .problem_sec .inner .img_area {
    margin-top: 70px;
  }
  .problem_sec .inner .img_area::before {
    width: 53px;
    height: 55px;
    top: -70px;
    right: 0;
  }
  .problem_sec .inner .img_area .mobile_block {
    padding: 63px 10px 0;
    width: 92vw;
    height: 113.33vw;
    padding: 63px 2.67vw 0;
    max-height: 425px;
    max-width: 345px;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox {
    padding: 16px 26px 16px 12px;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .img {
    width: 36px;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment {
    margin-left: 10px;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment .degree {
    margin-bottom: 7px;
    font-size: 9px;
  }
  .problem_sec .inner .img_area .mobile_block .comment_wrap .comment_subbox .comment .txt {
    font-size: 11px;
  }
  .problem_sec .inner .txt_area {
    width: 100%;
    margin-left: 0;
  }
  .problem_sec .inner .txt_area .ttl {
    width: 300px;
    height: 249px;
    margin: 0 auto 20px;
  }
  .problem_sec .inner .txt_area .ttl .txt {
    margin-left: -12px;
    font-size: 24px;
  }
  .problem_sec .inner .txt_area .lead {
    font-size: 16px;
  }
}
/*============================
coverage_sec
============================*/
.coverage_sec {
  position: relative;
  padding: 126px 0 100px;
  background-image: url("../../assets/img/common/pink_bg01.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--color-marketing-pink);
}
.coverage_sec::before {
  content: "";
  position: absolute;
  transform: translateX(-50%);
  top: 16px;
  left: 50%;
  width: 148px;
  height: 94px;
  background-image: url("../../assets/img/p_service_sns/coverage_arr.svg");
  background-size: cover;
  background-repeat: no-repeat;
}
.coverage_sec .inner .ttl {
  margin-bottom: 22px;
}
.coverage_sec .inner .lead {
  font-weight: var(--font-medium);
  font-size: 18px;
  line-height: 2.333;
  text-align: center;
}
.coverage_sec .inner .coverage_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
  margin-top: 40px;
}
.coverage_sec .inner .coverage_list .coverage_item {
  border-radius: 10px 0px 10px 10px;
  border-right: 2px solid var(--color-pink);
}
.coverage_sec .inner .coverage_list .coverage_item .subttl {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--font-bold);
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: #fff;
  height: 44px;
  border-radius: 10px 0px 0px 0px;
  background-color: var(--color-pink);
}
.coverage_sec .inner .coverage_list .coverage_item .coverage_contents {
  background-color: #fff;
  padding: 15px 13px 15px;
  border-radius: 0 0 10px 10px;
  border-bottom: 2px solid var(--color-pink);
  border-left: 2px solid var(--color-pink);
}
.coverage_sec .inner .coverage_list .coverage_item .coverage_contents .img {
  border-radius: 5px;
}
.coverage_sec .inner .coverage_list .coverage_item .coverage_contents .txt {
  margin-top: 15px;
  font-weight: var(--font-medium);
  font-size: 14px;
  line-height: 1.78;
}
.coverage_sec .inner .coverage_list .coverage_item:not(:last-of-type) .subttl::after {
  position: absolute;
  top: 0;
  right: -20px;
  content: "";
  display: block;
  border-style: solid;
  border-width: 22px 0 22px 19px;
  border-color: transparent transparent transparent var(--color-pink);
}
.coverage_sec .inner .coverage_list .coverage_item:last-of-type {
  border-radius: 10px;
}
.coverage_sec .inner .coverage_list .coverage_item:last-of-type .subttl {
  border-radius: 10px 10px 0 0;
}

@media screen and (max-width: 1080px) {
  .coverage_sec .inner .coverage_list {
    gap: 1.76vw;
    margin-top: 3.7vw;
  }
  .coverage_sec .inner .coverage_list .coverage_item .subttl {
    font-size: 1.667vw;
    height: 4.07vw;
  }
  .coverage_sec .inner .coverage_list .coverage_item .coverage_contents {
    padding: 1.39vw 1.2vw 1.39vw;
  }
  .coverage_sec .inner .coverage_list .coverage_item .coverage_contents .img {
    width: 100%;
    height: auto;
  }
  .coverage_sec .inner .coverage_list .coverage_item .coverage_contents .txt {
    margin-top: 1.39vw;
    font-size: 1.296vw;
  }
  .coverage_sec .inner .coverage_list .coverage_item:not(:last-of-type) .subttl::after {
    right: calc(-1.74vw - 1px);
    border-width: 2.04vw 0 2.04vw 1.76vw;
  }
}
@media screen and (max-width: 767px) {
  .coverage_sec {
    padding: 90px 0 80px;
  }
  .coverage_sec::before {
    width: 90px;
    height: 57px;
  }
  .coverage_sec .inner .lead {
    text-align: left;
  }
  .coverage_sec .inner .coverage_list {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 20px;
  }
  .coverage_sec .inner .coverage_list .coverage_item {
    position: relative;
    border-radius: 10px;
    border-right: 2px solid var(--color-pink);
  }
  .coverage_sec .inner .coverage_list .coverage_item .subttl {
    position: static;
    height: 44px;
    border-radius: 10px 10px 0 0;
    font-size: 18px;
  }
  .coverage_sec .inner .coverage_list .coverage_item .coverage_contents {
    padding: 15px;
  }
  .coverage_sec .inner .coverage_list .coverage_item .coverage_contents .txt {
    margin-top: 15px;
    font-size: 14px;
  }
  .coverage_sec .inner .coverage_list .coverage_item:not(:last-of-type) .subttl::after {
    right: auto;
    top: auto;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 19px 22px 0 22px;
    border-color: var(--color-pink) transparent transparent transparent;
  }
}
/*============================
reason_sec
============================*/
.reason_sec {
  position: relative;
  padding: 100px 0 0;
  background-color: #fff;
}
.reason_sec::before {
  content: "";
  position: absolute;
  top: 0;
  background-image: url("../../assets/img/p_top/support_bg.svg");
  opacity: 0.3;
  width: 100%;
  height: 100%;
}
.reason_sec .inner {
  position: relative;
}
.reason_sec .inner .ttl .main .highlight .num {
  line-height: 1;
}
.reason_sec .inner .lead {
  font-weight: var(--font-bold);
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}
.reason_sec .inner .lead .highlight {
  color: var(--color-pink);
}
.reason_sec .inner .lead .highlight .num {
  font-size: 28px;
  line-height: 1;
}
.reason_sec .inner .lead .highlight .jp {
  font-size: 24px;
}
.reason_sec .inner .reason_area {
  margin-top: 70px;
  padding: 60px;
  border-radius: 10px;
  background: var(--color-bg-beige);
}
.reason_sec .inner .reason_area .reason_list .reason_item {
  display: flex;
  align-items: center;
}
.reason_sec .inner .reason_area .reason_list .reason_item .img_box {
  position: relative;
}
.reason_sec .inner .reason_area .reason_list .reason_item .img_box .num {
  position: absolute;
  top: -14px;
  left: 25px;
  font-family: var(--font-en);
  font-size: 28px;
  line-height: 1;
  text-align: center;
  color: var(--color-pink);
  text-shadow: 1px 1px 0px #fff;
}
.reason_sec .inner .reason_area .reason_list .reason_item .img_box .img {
  border-radius: 10px;
}
.reason_sec .inner .reason_area .reason_list .reason_item .txt_box {
  margin-left: 40px;
}
.reason_sec .inner .reason_area .reason_list .reason_item .txt_box .head {
  margin-bottom: 13px;
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.6;
}
.reason_sec .inner .reason_area .reason_list .reason_item .txt_box .head .highlight {
  color: var(--color-pink);
}
.reason_sec .inner .reason_area .reason_list .reason_item .txt_box .txt {
  font-weight: var(--font-medium);
  font-size: 16px;
  line-height: 1.875;
}
.reason_sec .inner .reason_area .reason_list .reason_item + .reason_item {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--color-light-gray);
}
.reason_sec .inner .case_area {
  margin-top: 60px;
  padding: 60px;
  border-radius: 10px;
  background: var(--color-bg-beige);
}
.reason_sec .inner .case_area .btn_list {
  margin-top: 60px;
}
@media screen and (max-width: 1080px) {
  .reason_sec .inner .lead {
    text-align: left;
  }
  .reason_sec .inner .reason_area {
    padding: 60px 20px;
  }
  .reason_sec .inner .reason_area .reason_list .reason_item .img_box {
    width: calc(35% - 20px);
  }
  .reason_sec .inner .reason_area .reason_list .reason_item .img_box .img {
    width: 100%;
    height: auto;
  }
  .reason_sec .inner .reason_area .reason_list .reason_item .txt_box {
    width: calc(65% - 20px);
  }
  .reason_sec .inner .case_area {
    padding: 60px 20px;
  }
}
@media screen and (max-width: 767px) {
  .reason_sec {
    padding: 80px 0 0;
  }
  .reason_sec .inner .reason_area {
    margin-top: 32px;
    padding: 55px 15px 50px;
  }
  .reason_sec .inner .reason_area .reason_list .reason_item {
    flex-direction: column;
  }
  .reason_sec .inner .reason_area .reason_list .reason_item .img_box {
    width: 100%;
  }
  .reason_sec .inner .reason_area .reason_list .reason_item .img_box .num {
    z-index: 1;
  }
  .reason_sec .inner .reason_area .reason_list .reason_item .txt_box {
    margin-left: 0;
    margin-top: 30px;
    width: 100%;
  }
  .reason_sec .inner .case_area {
    padding: 55px 15px 50px;
  }
  .reason_sec .inner .case_area .btn_list {
    margin-top: 40px;
  }
}
/*============================
insight_sec
============================*/
.insight_sec {
  padding: 90px 0 100px;
  position: relative;
  background-color: #fff;
}
.insight_sec::before {
  content: "";
  position: absolute;
  top: 0;
  background-image: url("../../assets/img/p_top/support_bg.svg");
  opacity: 0.3;
  width: 100%;
  height: 100%;
}
.insight_sec .inner {
  position: relative;
}
.insight_sec .inner .ttl {
  margin-bottom: 60px;
}
.insight_sec .inner .ttl .main {
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .insight_sec {
    padding: 80px 0;
  }
  .insight_sec .inner .ttl {
    margin-bottom: 40px;
  }
  .insight_sec .inner .ttl .main {
    line-height: 1;
  }
  .insight_sec .inner .circle_area {
    margin: 0 -1.96vw;
  }
}
/*============================
graduation_sec
============================*/
.graduation_sec {
  padding: 90px 0 100px;
}
@media screen and (max-width: 767px) {
  .graduation_sec {
    padding: 80px 0;
  }
}