.empathy-section{
  padding:0 0 34px;
  margin-top: -30px;
}
.empathy-container{
  width:min(100%,390px);
  margin:0 auto;
}
.empathy-title{
  position:relative;
  min-height:80px;
  margin:0;
  padding:43px 116px 5px 20px;
  border-bottom:2px solid #10294a;
  color:#10294a;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:visible;
}
.empathy-title::after{
  content:"";
  position:absolute;
  right:max(0px, calc((390px - 100vw) / 2));
  bottom:-26px;
  width:134px;
  height:115px;
  background:url('../img/empathy/person-thinking.png') no-repeat right bottom / contain;
  pointer-events:none;
}
.empathy-list{
  margin:0;
  padding:9px 16px 0;
  list-style:none;
  display:grid;
  gap:17px;
}
.empathy-list li{
  position:relative;
  min-height:61px;
  margin:0;
  padding:10px 14px 10px 43px;
  background:#fff;
  color:#10294a;
  font-size:14px;
  line-height:1.65;
  font-weight:600;
  letter-spacing:.01em;
}
.empathy-list li::before{
  content:'?';
  position:absolute;
  left:21px;
  top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#d8ad4b;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:700;
}
.empathy-callout{
  position:relative;
  display:block;
  min-height:575px;
  margin:28px 0 0;
  padding:0 18px;
  background:url('../img/cta/person-consultation.webp') no-repeat center 178px / 246px auto;
  color:transparent;
  font-size:0;
  line-height:1;
  text-align:center;
}
.empathy-callout::before{
  content:"ひとつでも当てはまったら\A売却を決める前に";
  display:block;
  white-space:pre;
  color:#10294a;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:20px;
  line-height:1.42;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
}
.empathy-callout::after{
  content:"秘密保持と進め方の整理から\Aご相談ください。";
  display:table;
  margin:11px auto 0;
  white-space:pre;
  color:#10294a;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:27px;
  line-height:1.72;
  font-weight:700;
  letter-spacing:.015em;
  text-align:center;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:8px;
}
.empathy-cta{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% - 32px);
  min-height:68px;
  margin:-22px auto 0;
  border:0;
  border-radius:11px;
  background:#f56d21;
  color:#fff;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:22px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 5px 8px rgba(0,0,0,.18);
}
.empathy-cta:hover{background:#f56d21;color:#fff;}

@media(max-width:374px){
  .empathy-title{
    min-height:90px;
    padding-left:16px;
    padding-right:108px;
    font-size:18px;
  }
  .empathy-title::after{
    right:max(-30px, calc((390px - 100vw) / 2));
    bottom:-24px;
    width:124px;
    height:107px;
  }
  .empathy-list{
    padding-left:12px;
    padding-right:12px;
  }
  .empathy-list li{
    font-size:13px;
    padding-left:40px;
  }
  .empathy-list li::before{
    left:18px;
  }
  .empathy-callout{
    min-height:536px;
    margin-top:25px;
    padding:0 12px;
    background-position:center 167px;
    background-size:228px auto;
  }
  .empathy-callout::before{font-size:18px;}
  .empathy-callout::after{
    margin-top:9px;
    font-size:24px;
    line-height:1.7;
  }
  .empathy-cta{
    width:calc(100% - 28px);
    min-height:62px;
    font-size:20px;
  }
}

@media(min-width:768px){
  .empathy-section{
    padding-bottom:56px;
  }
  .empathy-container{
    width:min(100% - 48px,900px);
  }
  .empathy-title{
    min-height:130px;
    padding:56px 170px 14px 0;
    font-size:30px;
  }
  .empathy-title::after{
    right:0;
    bottom:0;
    width:168px;
    height:144px;
  }
  .empathy-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    padding:24px 0 0;
  }
  .empathy-list li{
    min-height:96px;
    padding:18px 20px 18px 50px;
    font-size:15px;
  }
  .empathy-list li::before{
    left:22px;
    top:20px;
  }
  .empathy-callout{
    min-height:690px;
    margin-top:44px;
    background-position:center 220px;
    background-size:330px auto;
  }
  .empathy-callout::before{font-size:28px;}
  .empathy-callout::after{
    margin-top:14px;
    font-size:36px;
  }
  .empathy-cta{
    max-width:520px;
    min-height:76px;
    margin-top:-28px;
    font-size:26px;
  }
}


/* PC: FVフォーム直下の共感ブロック。SPには適用しない。 */
@media (min-width:768px) {
  .empathy-section {
    margin-top:0;
    padding:0;
    background:#f7faff;
  }
  .empathy-container {
    width:min(calc(100% - 96px),1274px);
    margin:0 auto;
  }
  .empathy-title {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:90px;
    margin:0 0 36px;
    padding:0 20px;
    border-bottom:1px solid #173463;
    color:#173463;
    font-size:clamp(31px,3.7vw,52px);
    line-height:1.35;
    text-align:center;
    white-space:normal;
  }
  .empathy-title::after {
    right:0;
    bottom:-70px;
    width:305px;
    height:235px;
    background:url('../img/empathy/person-thinking-pc.png') no-repeat right bottom / contain;
  }
  .empathy-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
    margin:0;
    padding:0;
  }
  .empathy-list li {
    display:flex;
    align-items:center;
    min-height:98px;
    padding:18px 25px 18px 80px;
    border-radius:15px;
    font-size:18px;
    line-height:1.55;
    font-weight:700;
  }
  .empathy-list li::before {
    left:25px;
    top:50%;
    width:37px;
    height:37px;
    font-size:23px;
    transform:translateY(-50%);
  }
  /* PC: 人物を左、メッセージとCTAを右に配置する */
  .empathy-callout {
    min-height:440px;
    margin:30px 0 0;
    padding:28px 0 0 43%;
    background-position:10% bottom;
    background-size:auto 435px;
    text-align:left;
  }
  .empathy-callout::before {
    content:"ひとつでも当てはまったら、売却を決める前に";
    display:block;
    color:#173463;
    font-size:clamp(21px,2.1vw,31px);
    line-height:1.55;
    letter-spacing:.015em;
    white-space:normal;
    text-align:left;
    transform:translateY(-22px);
  }
  .empathy-callout::after {
    content:"秘密保持と進め方の整理から\Aご相談ください。";
    display:block;
    width:max-content;
    max-width:100%;
    margin:18px 0 0;
    color:#173463;
    font-size:clamp(35px,3.35vw,55px);
    line-height:1.65;
    letter-spacing:.01em;
    white-space:pre-line;
    text-align:left;
    text-decoration-line:underline;
    text-decoration-thickness:1px;
    text-underline-offset:14px;
    transform:translateY(-22px);
  }
  .empathy-cta {
    width:50%;
    max-width:none;
    min-height:100px;
    margin:-150px 0 100px 43%;
    font-size:clamp(22px,2.1vw,31px);
    transform:translateY(-22px);
  }
}
@media (min-width:768px) and (max-width:1100px) {
  .empathy-container {
    width:calc(100% - 48px);
  }
  .empathy-title {
    padding:0 20px;
    font-size:clamp(27px,3.6vw,38px);
  }
  .empathy-title::after {
    width:210px;
    height:165px;
  }
  .empathy-list {
    gap:16px;
  }
  .empathy-list li {
    padding:14px 15px 14px 58px;
    font-size:15px;
  }
  .empathy-list li::before {
    left:16px;
    width:30px;
    height:30px;
    font-size:19px;
  }
  .empathy-callout {
    min-height:405px;
    padding:25px 0 0 43%;
    background-size:auto 385px;
  }
  .empathy-callout::before { font-size:clamp(17px,2vw,23px); }
  .empathy-callout::after {
    font-size:clamp(27px,3.3vw,38px);
    line-height:1.65;
  }
  .empathy-cta {
    width:50%;
    min-height:78px;
    margin:-180px 0 54px 43%;
    font-size:clamp(19px,2.2vw,24px);
  }
}