.hrf {
  --dark-brown: #654321;
  --beige: #f3e7dd;
  --light-beige: #faf5f0;
  --cv-orange: #ffa828;
  --cv-line: #06c655;
  --yellow: #fff771;
  --white: #fff;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--dark-brown);
}

.hrf img {
  display: block;
  width: 100%;
}

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

/* 共通パーツ */
.annotation {
  color: #212121;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: normal;
}

.marker {
  background: linear-gradient(transparent 70%, var(--yellow) 0%);
  font-size: 1.125em;
  font-weight: 700;
}

.sec-title {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 32px;
  padding-bottom: 8px;
  border-bottom: 6px solid var(--dark-brown);
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec-title {
    font-size: 2.2rem;
  }
}

.sec-title__sm {
  display: block;
  margin-bottom: 1.5px;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec-title__sm {
    margin-bottom: 3px;
    font-size: 1.6rem;
  }
}

.yellow-box {
  max-width: 620px;
  margin-inline: auto;
  padding: 16px 0;
  background: var(--yellow);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .yellow-box {
    max-width: 346px;
    font-size: 1.5rem;
    line-height: 1.75;
    letter-spacing: normal;
  }
}

/* コンポーネント */
.cv-area {
  padding: 24px 24px 28px;
  background: var(--dark-brown);
  color: var(--white);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .cv-area {
    padding: 16px 16px 20px;
    font-size: 1.4rem;
  }
}

.cv-area__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 312px);
  gap: 20px;
  margin-top: 16px;
}

@media screen and (max-width: 768px) {
  .cv-area__wrapper {
    grid-template-columns: 288px;
    gap: 12px;
    justify-content: center;
  }
}

.cv-area__button-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cv-area .annotation {
  color: var(--white);
}

.button {
  display: grid;
  place-content: center;
  height: 56px;
  border-radius: 30px;
  text-decoration: none !important;
  font-size: 1.5rem;
  line-height: 1.2;
  position: relative;
}
@media screen and (max-width: 768px) {
  .button {
    height: 48px;
    font-size: 1.4rem;
  }
}

.button::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath d='M18 12.001H0V11.116H15.8459L11.5339 6.56396L12.3149 6.00098L18 12.001Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 18px;
  height: 19px;
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
}

.button--reform {
  background: var(--cv-orange);
  color: var(--white) !important;
  box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.1);
}

.button--line {
  background: var(--cv-line);
  color: var(--white) !important;
  box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.1);
}

.button--white {
  background: var(--white);
  color: var(--dark-brown) !important;
  border: 1px solid var(--dark-brown);
}

.button--white::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath d='M18 12.001H0V11.116H15.8459L11.5339 6.56396L12.3149 6.00098L18 12.001Z' fill='%23654321'/%3E%3C/svg%3E");
}

/* モーダル */
.modal {
  --padding: 40px;
  --button-height: 56px;
  --button-top: 40px;

  display: none;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(0 0 0 / 40%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .modal {
    --padding: 20px;
    --button-height: 40px;
    --button-top: 24px;
  }
}

.modal__content {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  padding: var(--padding);
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: show 0.3s linear 0s;
}

.modal__content--vertical {
  max-width: 503px;
}

.modal__content--modal04 {
  max-width: 505px;
}

.modal__content--modal05 {
  max-width: 484px;
}

.modal__inner {
  max-height: calc(
    90vh - var(--button-height) - var(--button-top) - var(--padding) * 2
  );
  overflow-y: auto;
}

.modal__close {
  display: grid;
  place-content: center;
  width: 240px;
  height: var(--button-height);
  margin-top: var(--button-top);
  margin-inline: auto;
  border-radius: 30px;
  border: 1px solid var(--dark-brown);
  font-weight: 700;
  position: relative;
  cursor: pointer;
}

.modal__close::after {
  content: "";
  width: 24px;
  aspect-ratio: 1 / 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cmask id='mask0_656_2003' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='25'%3E%3Crect y='0.5' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_656_2003)'%3E%3Cpath d='M8.4 16.8077L12 13.2078L15.6 16.8077L16.3077 16.1L12.7078 12.5L16.3077 8.9L15.6 8.19225L12 11.7923L8.4 8.19225L7.69225 8.9L11.2923 12.5L7.69225 16.1L8.4 16.8077ZM12.0033 21.5C10.7587 21.5 9.58867 21.2638 8.493 20.7915C7.3975 20.3192 6.4445 19.6782 5.634 18.8685C4.8235 18.0588 4.18192 17.1067 3.70925 16.012C3.23642 14.9175 3 13.7479 3 12.5033C3 11.2587 3.23617 10.0887 3.7085 8.993C4.18083 7.8975 4.82183 6.9445 5.6315 6.134C6.44117 5.3235 7.39333 4.68192 8.488 4.20925C9.5825 3.73642 10.7521 3.5 11.9967 3.5C13.2413 3.5 14.4113 3.73617 15.507 4.2085C16.6025 4.68083 17.5555 5.32183 18.366 6.1315C19.1765 6.94117 19.8181 7.89333 20.2908 8.988C20.7636 10.0825 21 11.2521 21 12.4967C21 13.7413 20.7638 14.9113 20.2915 16.007C19.8192 17.1025 19.1782 18.0555 18.3685 18.866C17.5588 19.6765 16.6067 20.3181 15.512 20.7908C14.4175 21.2636 13.2479 21.5 12.0033 21.5ZM12 20.5C14.2333 20.5 16.125 19.725 17.675 18.175C19.225 16.625 20 14.7333 20 12.5C20 10.2667 19.225 8.375 17.675 6.825C16.125 5.275 14.2333 4.5 12 4.5C9.76667 4.5 7.875 5.275 6.325 6.825C4.775 8.375 4 10.2667 4 12.5C4 14.7333 4.775 16.625 6.325 18.175C7.875 19.725 9.76667 20.5 12 20.5Z' fill='%23654321'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat center / contain;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translate(0, -50%);
}
@media screen and (max-width: 768px) {
  .modal__close::after {
    width: 18px;
  }
}

.js-modalBtn {
  cursor: pointer;
}

/* section */
.sec1 {
  padding: 64px 0;
  background: rgba(243, 243, 243, 0.5);
}
@media screen and (max-width: 768px) {
  .sec1 {
    padding-bottom: 56px;
  }
}

.sec1-title {
  max-width: 396px;
  margin-inline: auto;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .sec1-title {
    max-width: 344px;
    margin-bottom: 34px;
  }
}

.sec1-trouble {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 36px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec1-trouble {
    gap: 0 52px;
  }
}

.sec1-trouble + .sec1-trouble {
  margin-top: -16px;
}
@media screen and (max-width: 768px) {
  .sec1-trouble + .sec1-trouble {
    gap: 0 24px;
  }
}

.sec1-trouble::after {
  content: "";
  position: absolute;
}

.sec1-trouble.ill01::after {
  width: 56px;
  height: 59px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec1-ill01.svg")
    no-repeat center / contain;
  top: -16px;
  right: 36px;
  transform: translate(0, -100%);
}
@media screen and (max-width: 768px) {
  .sec1-trouble.ill01::after {
    width: 40px;
    height: 42px;
    top: 11px;
    right: 19px;
  }
}

.sec1-trouble.ill02::after {
  width: 55px;
  height: 64px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec1-ill02.svg")
    no-repeat center / contain;
  top: 65px;
  left: 42px;
}
@media screen and (max-width: 768px) {
  .sec1-trouble.ill02::after {
    width: 43px;
    height: 50px;
    top: -7px;
    left: 22px;
    transform: translate(0, -100%);
  }
}

.sec1-trouble li {
  display: grid;
  place-content: center;
  width: 180px;
  aspect-ratio: 1 / 1;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec1-bg.png")
    no-repeat center / contain;
  text-align: center;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec1-trouble li {
    width: 146px;
    font-size: 1.4rem;
  }

  .sec1-trouble li:nth-child(3) {
    margin-top: -16px;
  }
}

.sec1-trouble li.lg {
  width: 200px;
}
@media screen and (max-width: 768px) {
  .sec1-trouble li.lg {
    width: 162px;
  }
}

.sec1-conclusion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec1-conclusion {
    gap: 38px;
    margin-top: 7px;
  }
}

.sec1-conclusion::before {
  content: "";
  width: 80px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28' fill='none'%3E%3Cpath d='M77.6543 0.419922C80.3568 0.419922 80.7906 1.59949 78.6085 3.04386L43.9624 26.0033C41.7803 27.4477 38.2169 27.4477 36.0348 26.0033L1.38867 3.04386C-0.786725 1.59949 -0.359654 0.419922 2.34291 0.419922L77.6543 0.419922Z' fill='%237C5F42'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
@media screen and (max-width: 768px) {
  .sec1-conclusion::before {
    width: 60px;
    height: 20px;
  }
}
@media screen and (max-width: 768px) {
  .sec1-conclusion__text {
    width: 374px;
    margin-inline: auto;
  }
}

.sec1-img {
  margin-top: 88px;
}
@media screen and (max-width: 768px) {
  .sec1-img {
    margin-top: 56px;
  }
}

.sec2 {
  padding: 64px 24px 56px;
  background: var(--beige);
}

.sec2-title {
  max-width: 464px;
  margin-inline: auto;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .sec2-title {
    max-width: 319px;
    margin-bottom: 8px;
  }
}

.sec2-voice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec2-voice {
    gap: 16px;
  }
}

.sec2-voice li {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  height: 160px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec2-voice li {
    align-items: center;
    height: 140px;
  }
}

.sec2-voice li:nth-child(1) {
  --gap: 8px;

  width: 318px;
  padding: 20px 26px 0 8px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec2-bg01-pc.svg")
    no-repeat center / contain;
}
@media screen and (max-width: 768px) {
  .sec2-voice li:nth-child(1) {
    width: 350px;
    padding: 20px 32px 20px 8px;
    background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec2-bg01-sp.svg")
      no-repeat center / contain;
  }
}

.sec2-voice li:nth-child(2) {
  --gap: 0px;

  width: 310px;
  padding: 20px 0 20px 32px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec2-bg02-pc.svg")
    no-repeat center / contain;
}
@media screen and (max-width: 768px) {
  .sec2-voice li:nth-child(2) {
    width: 350px;
    padding: 20px 8px 20px 32px;
    background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec2-bg02-sp.svg")
      no-repeat center / contain;
  }
}

.sec2-voice li:nth-child(3) {
  --gap: 8px;

  width: 350px;
  padding: 35px 32px 0 0;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec2-bg03-pc.svg")
    no-repeat center / contain;
}
@media screen and (max-width: 768px) {
  .sec2-voice li:nth-child(3) {
    width: 350px;
    padding: 20px 32px 20px 8px;
    background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec2-bg03-sp.svg")
      no-repeat center / contain;
  }
}

.sec2-voice__ill {
  display: block;
  width: 76px;
}

.sec2-voice li p {
  width: calc(100% - 76px - var(--gap));
  line-height: 1.75;
  letter-spacing: normal;
}
@media screen and (max-width: 768px) {
  .sec2-voice li p {
    font-size: 1.4rem;
  }
}

.sec2-voice__annotation {
  display: block;
  width: fit-content;
  white-space: nowrap;
  position: absolute;
  bottom: 8px;
  right: -60px;
}
@media screen and (max-width: 768px) {
  .sec2-voice__annotation {
    bottom: 0;
    right: 20px;
    transform: translateY(100%);
  }
}

.sec2-text {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .sec2-text {
    margin-top: 50px;
  }
}

.sec3 {
  padding: 64px 30px 80px;
  background: var(--light-beige);
}
@media screen and (max-width: 768px) {
  .sec3 {
    padding: 56px 20px;
  }
}

.sec3-title {
  max-width: 431px;
  margin-inline: auto;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .sec3-title {
    max-width: 296px;
    margin-bottom: 20px;
  }
}

.sec3-charm {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sec3-charm > li {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 40px;
  border-radius: 12px;
  background: var(--white);
  font-weight: 700;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec3-charm > li {
    padding: 20px 20px 32px;
  }
}

.sec3-charm > li::after {
  content: "";
  position: absolute;
}

.sec3-charm > li:nth-child(1)::after {
  width: 129px;
  height: 120px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec3-ill01.svg")
    no-repeat center / contain;
  top: -13px;
  right: 50px;
}
@media screen and (max-width: 768px) {
  .sec3-charm > li:nth-child(1)::after {
    width: 93px;
    height: 86px;
    top: -10px;
    right: 7px;
  }
}

.sec3-charm > li:nth-child(2)::after {
  width: 88px;
  height: 110px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec3-ill02.svg")
    no-repeat center / contain;
  top: -11px;
  right: 58px;
}
@media screen and (max-width: 768px) {
  .sec3-charm > li:nth-child(2)::after {
    width: 77px;
    height: 96px;
    top: -6px;
    right: 3px;
  }
}

.sec3-charm > li:nth-child(3)::after {
  width: 78px;
  height: 80px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec3-ill03.svg")
    no-repeat center / contain;
  top: 17px;
  right: 53px;
}
@media screen and (max-width: 768px) {
  .sec3-charm > li:nth-child(3)::after {
    width: 64px;
    height: 66px;
    top: auto;
    bottom: -36px;
    right: auto;
    left: 28px;
  }
}

.sec3-charm__head {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
@media screen and (max-width: 768px) {
  .sec3-charm__head {
    gap: 8px;
  }
}

.sec3-charm__head::before {
  content: "";
  width: 10px;
  border-radius: 5px;
  background: var(--dark-brown);
}
@media screen and (max-width: 768px) {
  .sec3-charm__head::before {
    width: 7px;
  }
}

.sec3-charm__head p {
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .sec3-charm__head p {
    font-size: 1.8rem;
  }
}

.sec3-charm__example {
  padding: 12px 24px 16px;
  border-radius: 4px;
  background: #e0d9d3;
}
@media screen and (max-width: 768px) {
  .sec3-charm__example {
    padding: 8px 8px 12px;
  }
}

.sec3-charm__example p {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--white);
  font-size: 1.4rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec3-charm__example p {
    font-size: 1.2rem;
  }
}

.sec3-charm__example ul {
  width: fit-content;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec3-charm__example ul {
    width: 100%;
  }
}

.sec3-charm__example ul li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px;
}
@media screen and (max-width: 768px) {
  .sec3-charm__example ul li {
    grid-template-columns: 20px 1fr;
    font-size: 1.4rem;
  }
}

.sec3-charm__example ul li:not(:first-child) {
  margin-top: 8px;
}

.sec3-charm__example ul li::before {
  content: "";
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/icon-check.svg")
    no-repeat center / contain;
}

.sec3-charm__img {
  max-width: 440px;
  margin-inline: auto;
}

.sec3-method {
  margin-top: 64px;
}
@media screen and (max-width: 768px) {
  .sec3-method {
    margin-top: 56px;
  }
}

.sec3-method__title {
  margin-bottom: 24px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec3-method__title {
    margin-bottom: 16px;
    font-size: 1.8rem;
  }
}

.sec3-method__content {
  display: grid;
  grid-template-columns: repeat(2, 240px);
  justify-content: center;
  gap: 2px;
}
@media screen and (max-width: 768px) {
  .sec3-method__content {
    grid-template-columns: repeat(2, 160px);
  }
}

.sec3-method__content:not(:first-child) {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .sec3-method__content:not(:first-child) {
    margin-top: 24px;
  }
}

.sec3-method__photo {
  position: relative;
}

.sec3-method__photo--before::before,
.sec3-method__photo--after::before {
  display: grid;
  place-content: center;
  width: 80px;
  height: 30px;
  border-radius: 0 0 6px 0;
  background: var(--dark-brown);
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .sec3-method__photo--before::before,
  .sec3-method__photo--after::before {
    width: 60px;
    height: 22px;
    border-radius: 0 0 4px 0;
    font-size: 1.4rem;
  }
}

.sec3-method__photo--before::before {
  content: "before";
}

.sec3-method__photo--after::before {
  content: "after";
}

.sec3-method__photo::after {
  content: "";
  display: grid;
  place-content: center;
  width: 40px;
  aspect-ratio: 1 / 1;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/icon-zoom.svg")
    no-repeat center / contain;
  background-size: 30px 30px;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .sec3-method__photo::after {
    width: 27px;
    background-size: 20px 20px;
  }
}

.sec4 {
  padding: 64px 40px 56px;
  background: rgba(243, 243, 243, 0.5);
}
@media screen and (max-width: 768px) {
  .sec4 {
    padding: 56px 20px;
  }
}

.sec4-graph {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  margin-inline: auto;
}

.sec4-voice {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
}
@media screen and (max-width: 768px) {
  .sec4-voice {
    grid-template-columns: 350px;
    gap: 20px;
  }
}

.sec4-voice li {
  padding: 16px 24px;
  border-radius: 20px;
  background: #eedcce;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: normal;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec4-voice li {
    width: 300px;
    font-size: 1.4rem;
  }
}

.sec4-voice li::after {
  content: "";
  width: 20px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' viewBox='0 0 20 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 12.4188L0 0.419922H15.9855L20 12.4188Z' fill='%23EEDCCE'/%3E%3C/svg%3E")
    no-repeat center / contain;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 100%);
}

.sec4-voice li:nth-child(2) {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .sec4-voice li:nth-child(2) {
    margin-top: 0;
    margin-left: auto;
  }
}

.sec4-voice li:nth-child(2)::after {
  scale: -1 1;
}

.sec4-text {
  margin-top: 44px;
}

.sec5 {
  padding: 64px 40px 56px;
  background: #f4f1ed;
}
@media screen and (max-width: 768px) {
  .sec5 {
    padding: 56px 20px;
  }
}

.sec5-feature {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .sec5-feature {
    gap: 57px;
    margin-top: 57px;
  }
}

.sec5-feature > li {
  padding: 40px 40px 24px;
  background: var(--white);
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec5-feature > li {
    padding: 40px 20px 20px;
  }
}

.sec5-feature > li::before {
  content: "";
  width: 97px;
  height: 52px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .sec5-feature > li::before {
    width: 84px;
    height: 45px;
  }
}

.sec5-feature > li:nth-child(1):before {
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec5-head01.svg")
    no-repeat center / contain;
}

.sec5-feature > li:nth-child(2):before {
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec5-head02.svg")
    no-repeat center / contain;
}

.sec5-feature > li:nth-child(3):before {
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/sec5-head03.svg")
    no-repeat center / contain;
}

.sec5-feature__head {
  display: block;
  text-align: center;
}

.sec5-feature__head-text {
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .sec5-feature__head-text {
    font-size: 2.2rem;
  }
}

.sec5-feature__img {
  max-width: 360px;
  margin-top: 24px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec5-feature__img {
    max-width: 280px;
  }
}

.sec5-feature__img--lg {
  max-width: 400px;
}
@media screen and (max-width: 768px) {
  .sec5-feature__img--lg {
    max-width: 332px;
  }
}

.sec5-feature__list {
  margin-top: 20px;
}

.sec5-feature__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px;
  line-height: 1.75;
  letter-spacing: normal;
}

.sec5-feature__list li:not(:first-child) {
  margin-top: 8px;
}

.sec5-feature__list li::before {
  content: "";
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hrf/icon-check-brown.svg")
    no-repeat center / contain;
}

.sec5-feature__list + .annotation {
  margin-top: 8px;
}

.sec5-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 61px;
  font-size: 2.8rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec5-subtitle {
    margin-top: 64px;
    font-size: 2rem;
  }
}

.sec5-subtitle::before,
.sec5-subtitle::after {
  content: "";
  width: 20px;
  height: 29px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='29' viewBox='0 0 20 29' fill='none'%3E%3Cpath d='M2.5 3.41992L17.5 26.4199' stroke='%23654321' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.sec5-subtitle::after {
  scale: -1 1;
}

.sec5-subtitle + .annotation {
  text-align: center;
}

.sec5-voice {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 16px;
}

.sec5-voice li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 40px;
  border-radius: 12px;
  border: 2px solid #7c5f42;
  background: var(--white);
  color: #212121;
}
@media screen and (max-width: 768px) {
  .sec5-voice li {
    padding: 32px 18px;
  }
}

.sec5-voice__top {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eedcce;
}
@media screen and (max-width: 768px) {
  .sec5-voice__top {
    grid-template-columns: 1fr 76px;
    align-items: center;
    gap: 8px;
  }
}

.sec5-voice__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sec5-voice__text p {
  line-height: 1.75;
  letter-spacing: normal;
}
@media screen and (max-width: 768px) {
  .sec5-voice__text p {
    font-size: 1.4rem;
  }
}

.sec5-voice__name {
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec5-voice__name {
    font-size: 1.6rem;
  }
}

.sec5-voice__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec5-voice__support {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: stretch;
  gap: 12px;
}
@media screen and (max-width: 768px) {
  .sec5-voice__support {
    grid-template-columns: 56px 1fr;
  }
}

.sec5-voice__support p {
  font-size: 1.4rem;
  letter-spacing: normal;
}

.sec5-voice__support-head {
  display: grid;
  place-content: center;
  min-height: 20px;
  padding: 0 8px;
  align-self: stretch;
  background: #f4f1ed;
  color: var(--dark-brown);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec5-voice__support-head {
    min-height: 40px;
  }
}

.sec5-button {
  display: grid;
  grid-template-columns: 312px;
  justify-content: center;
  gap: 4px;
  margin-top: 40px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec5-button {
    grid-template-columns: 280px;
  }
}

.sec6 {
  padding: 56px 70px 64px;
  background: rgba(243, 243, 243, 0.5);
}
@media screen and (max-width: 768px) {
  .sec6 {
    padding: 56px 20px;
  }
}

.sec6-flow {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
@media screen and (max-width: 768px) {
  .sec6-flow {
    gap: 32px;
  }
}

.sec6-flow > li {
  padding: 20px 40px;
  background: #fffce6;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec6-flow > li {
    padding: 20px;
  }
}

.sec6-flow > li:not(:last-child)::before {
  content: "";
  width: 58px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28' fill='none'%3E%3Cpath d='M77.6543 0.419922C80.3568 0.419922 80.7906 1.59949 78.6085 3.04386L43.9624 26.0033C41.7803 27.4477 38.2169 27.4477 36.0348 26.0033L1.38867 3.04386C-0.786725 1.59949 -0.359654 0.419922 2.34291 0.419922L77.6543 0.419922Z' fill='%23EEDCCE'/%3E%3C/svg%3E")
    no-repeat center / contain;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, 100%);
}
@media screen and (max-width: 768px) {
  .sec6-flow > li:not(:last-child)::before {
    width: 48px;
    height: 16px;
  }
}

.sec6-flow__head {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--dark-brown);
}

.sec6-flow__head p {
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec6-flow__head p {
    font-size: 1.8rem;
  }
}

.sec6-flow__number {
  display: grid;
  place-content: center;
  aspect-ratio: 1 / 1;
  padding: 0 8px;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 1.8rem;
  font-weight: 700;
}

.sec6-flow__content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sec6-flow__lists {
  display: flex;
  gap: 48px;
}

.sec6-flow__content ul {
  padding: 0 48px;
}
@media screen and (max-width: 768px) {
  .sec6-flow__content ul {
    padding: 0;
  }
}

.sec6-flow__content ul.col2 {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0 48px;
}
@media screen and (max-width: 768px) {
  .sec6-flow__content ul.col2 {
    grid-template-columns: 1fr;
  }
}

.sec6-flow__content ul li {
  display: flex;
  font-weight: 700;
  line-height: 1.75;
}

.sec6-flow__content ul li::before {
  content: "・";
}

.sec6-flow__content p {
  line-height: 1.75;
  letter-spacing: normal;
}

.sec6-flow__button {
  display: grid;
  grid-template-columns: 312px;
  justify-content: center;
  gap: 4px;
  padding: 10px 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec6-flow__button {
    grid-template-columns: 288px;
  }
}

.sec6-banner {
  margin-top: 34px;
}
@media screen and (max-width: 768px) {
  .sec6-banner {
    margin-top: 56px;
  }
}

.sec6-baneer__list {
  padding: 0 24px 16px;
  background: var(--yellow);
}
@media screen and (max-width: 768px) {
  .sec6-baneer__list {
    padding: 0 20px 16px;
  }
}

.sec6-baneer__list li {
  display: flex;
}

.sec6-baneer__list li::before {
  content: "※";
}