@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,700&display=swap&text=0123,");

.hre {
  --black: #212121;
  --blue: #4061af;
  --white: #fff;
  --red: #db4e4e;
  --bg-color: #f0eeeb;
  --marker-color: #ffb5b5;

  display: flex;
  flex-direction: column;
  gap: 80px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--black);
  overflow-x: hidden;
}
@media screen and (max-width: 768px) {
  .hre {
    gap: 64px;
    font-size: 1.4rem;
  }
}

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

.hre sup {
  vertical-align: super;
  font-size: 0.6em;
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    border-bottom: none;
  }
  .service-detail-items {
    width: 100%;
  }
  .content-wrapper {
    padding-top: 0;
  }
}

/* 共通パーツ */
.sec-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec-title {
    flex-direction: column;
    gap: 8px;
  }
}

.sec-title p {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.41666666;
}
@media screen and (max-width: 768px) {
  .sec-title p {
    font-size: 2rem;
    line-height: 1;
  }
}

.sec-title__red {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 2px 4px 2px;
  background: var(--red);
  color: var(--white);
  font-size: 2.8rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec-title__red {
    margin: 0 2px;
    font-size: 2rem;
  }
}

.sec-title--sm p {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec-title--sm p {
    font-size: 1.4rem;
  }
}

.sec-title--sm .sec-title__red {
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .sec-title--sm .sec-title__red {
    font-size: 1.6rem;
  }
}

.sec-title--md p {
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .sec-title--md p {
    font-size: 1.6rem;
  }
}

.sec-title--md .sec-title__red {
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .sec-title--md .sec-title__red {
    font-size: 2rem;
  }
}

.sec-title--lg p {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec-title--lg p {
    font-size: 1.6rem;
  }
}

.sec-title--lg .sec-title__red {
  font-size: 4rem;
}
@media screen and (max-width: 768px) {
  .sec-title--lg .sec-title__red {
    font-size: 3rem;
  }
}

.sec-title--column {
  display: flex;
  flex-direction: column;
}

.sec-title__wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec-title__wrapper--lg {
  gap: 16px;
}

.sec-title--mb,
.sec-title__wrapper--mb,
h3.sec-title,
h3.sec-title__wrapper {
  margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .sec-title--mb,
  h3.sec-title,
  h3.sec-title__wrapper {
    margin-bottom: 32px;
  }
}

.annotation {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: right;
}

.annotation::before {
  content: "※";
}

.marker {
  background: linear-gradient(transparent 80%, var(--marker-color) 0%);
  font-weight: 700;
}

/* コンポーネント */
.cv-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-color);
}
@media screen and (max-width: 768px) {
  .cv-area {
    padding: 16px;
  }
}

.cv-area__head {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .cv-area__head {
    font-size: 1.4rem;
  }
}

.cv-area__wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 10px;
}
@media screen and (max-width: 768px) {
  .cv-area__wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

.cv-area__button {
  display: grid;
  place-content: center;
  height: 46px;
  background: var(--blue);
  color: var(--white) !important;
  text-decoration: none !important;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .cv-area__button {
    height: 36px;
    font-size: 1.6rem;
  }
}

.cv-area .annotation {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .cv-area .annotation {
    text-align: left;
  }
}

/* section */
.mv-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 16px 0 42px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .mv-inner {
    gap: 50px;
    padding: 40px 0 54px;
  }
}

.mv-inner::before {
  content: "";
  width: 24px;
  height: 100%;
  background: var(--bg-color);
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .mv-inner::before {
    width: 16px;
  }
}

.mv-title {
  max-width: 580px;
  margin-left: 56px;
}
@media screen and (max-width: 768px) {
  .mv-title {
    max-width: 290px;
    margin-left: 10.256%;
  }
}

.mv-bg {
  display: block;
  width: 385px;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .mv-bg {
    width: 246px;
  }
}

.mv-slider {
  display: flex;
  gap: 8px;
  overflow: hidden;
}

.mv-slider__img {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  gap: 8px;
  animation: scroll-left 26s infinite linear 0.5s both;
}
@media screen and (max-width: 768px) {
  .mv-slider__img {
    grid-template-columns: repeat(3, 256px);
  }
}

.mv-annotation {
  text-align: left;
  position: absolute;
  bottom: 17px;
  left: 56px;
}
@media screen and (max-width: 768px) {
  .mv-annotation {
    bottom: 29px;
    left: 40px;
  }
}

.mv-ill {
  display: block;
  width: 195px;
  position: absolute;
  right: 0;
  bottom: 0;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sec1-speech {
  height: 315px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec1-speech {
    height: 383px;
  }
}

.sec1-speech::before {
  content: "";
  width: 24px;
  height: 20px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-bg05.png")
    no-repeat center / contain;
  position: absolute;
  left: 537px;
  bottom: 111px;
}
@media screen and (max-width: 768px) {
  .sec1-speech::before {
    left: calc(50% + 35px);
    bottom: 74px;
  }
}

.sec1-speech__voice {
  position: absolute;
}

.sec1-speech__voice--1 {
  width: 246px;
  aspect-ratio: 123 / 52;
  padding: 38px 32px 22px 22px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-bg01.png")
    no-repeat center / contain;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .sec1-speech__voice--1 {
    width: 205px;
    padding: 32px 0 16px 18px;
    top: 0;
    left: calc(50% - 50px);
  }
}

.sec1-speech__voice--2 {
  width: 206px;
  aspect-ratio: 103 / 50;
  padding: 29px 43px 28px 51px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-bg02.png")
    no-repeat center / contain;
  top: 0;
  left: 271px;
}
@media screen and (max-width: 768px) {
  .sec1-speech__voice--2 {
    width: 191px;
    padding: 24px 48px 31px 45px;
    top: 82px;
    left: calc(50% - 180px);
  }
}

.sec1-speech__voice--3 {
  width: 291px;
  aspect-ratio: 291 / 127;
  padding: 35px 34px 26px 33px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-bg03.png")
    no-repeat center / contain;
  top: 101px;
  left: 132px;
}
@media screen and (max-width: 768px) {
  .sec1-speech__voice--3 {
    width: 243px;
    padding: 28px 23px 20px 24px;
    top: 182px;
    left: calc(50% - 170px);
  }
}

.sec1-speech__voice--4 {
  width: 185px;
  aspect-ratio: 185 / 126;
  padding: 36px 15px 20px 58px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-bg04.png")
    no-repeat center / contain;
  top: 67px;
  left: 418px;
}
@media screen and (max-width: 768px) {
  .sec1-speech__voice--4 {
    width: 175px;
    top: 90px;
    left: calc(50% + 10px);
  }
}

.sec1-ill {
  display: block;
  width: 138px;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .sec1-ill {
    right: auto;
    left: calc(50% + 57px);
  }
}

.sec1-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 78px;
  padding: 24px 0;
  gap: 8px;
  border: 1px solid var(--black);
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec1-box {
    max-width: 360px;
    padding: 24px 8px;
    margin-inline: auto;
    margin-bottom: 72px;
  }
}

.sec1-box::after {
  content: "";
  width: 5px;
  height: 51px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-deco.svg")
    no-repeat center / contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% - 2px));
}

.sec1-box2 {
  padding: 48px 54px 32px;
  background: var(--bg-color);
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec1-box2 {
    padding: 74px 24px 24px;
  }
}

.sec1-box2 .sec-title {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .sec1-box2 .sec-title {
    transform: translateY(-20%);
  }
}

.sec1-box2 ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 23px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--white);
}
@media screen and (max-width: 768px) {
  .sec1-box2 ul {
    padding: 24px 26px;
  }
}

.sec1-box2 ul li {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .sec1-box2 ul li {
    align-items: flex-start;
  }
}

.sec1-box2 ul li::before {
  content: "";
  aspect-ratio: 1 / 1;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/icon-check.svg")
    no-repeat center / contain;
}
@media screen and (max-width: 768px) {
  .sec1-box2 ul li::before {
    margin-top: 3px;
  }
}

.sec3 ol {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sec3 ol > li {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 24px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec3 ol > li {
    gap: 24px;
    padding-left: 8px;
  }
}

.sec3 ol > li::before {
  content: "";
  width: 468px;
  height: 252px;
  background: var(--bg-color);
  position: absolute;
  top: 36px;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .sec3 ol > li::before {
    width: calc(100% - 16px);
    height: 206px;
    top: 26px;
  }
}

.sec3-item__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .sec3-item__head {
    flex-direction: row;
  }
}

.sec3-item__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .sec3-item__num {
    gap: 4px;
  }
}

.sec3-item__num-text {
  display: block;
  font-weight: 700;
  line-height: 1;
}

.sec3-item__num-text--ja {
  font-size: 1.2rem;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .sec3-item__num-text--ja {
    font-size: 1rem;
  }
}

.sec3-item__num-text--num {
  display: grid;
  place-content: center;
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
  .sec3-item__num-text--num {
    width: 24px;
    font-size: 1.2rem;
  }
}

.sec3-item__main {
  display: grid;
  grid-template-columns: 1fr 388px;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .sec3-item__main {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.sec3-item__title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .sec3-item__title {
    padding-top: 10px;
    font-size: 2rem;
  }
}

.sec3-item__img {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec3-item__bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .sec3-item__bottom {
    padding-left: 48px;
    padding-right: 16px;
  }
}

.sec3-item__bottom ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec3-item__bottom ul li {
  display: grid;
  grid-template-columns: 4px 1fr;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .sec3-item__bottom ul li {
    align-items: flex-start;
  }
}

.sec3-item__bottom ul li::before {
  content: "";
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--red);
}
@media screen and (max-width: 768px) {
  .sec3-item__bottom ul li::before {
    margin-top: 8px;
  }
}

.sec3-item__bottom .annotation {
  text-align: left;
}

.sec3-item__bottom .annotation + .annotation {
  margin-top: 4px;
}

.sec4-box {
  padding: 40px;
  background: var(--bg-color);
}
@media screen and (max-width: 768px) {
  .sec4-box {
    margin-inline: 24px;
    padding: 24px 8px;
  }
}

.sec4-box + .sec4-box {
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .sec4-box + .sec4-box {
    margin-top: 16px;
  }
}

.sec4-box__title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec4-box__title {
    font-size: 1.6rem;
  }
}

.sec4-box__title--top {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .sec4-box__title--top {
    margin-bottom: 24px;
  }
}

.sec4-box__title--bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
}

.sec4-box__title--bottom::before,
.sec4-box__title--bottom::after {
  content: "";
  height: 1px;
  background: var(--black);
}

@media screen and (max-width: 768px) {
  .sec4-box__inner {
    padding: 0 8px;
  }
}

.sec4-box__annotation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
@media screen and (max-width: 768px) {
  .sec4-box__annotation {
  }
}

.sec4-box__annotation .annotation {
  text-align: left;
}

.sec4-box ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .sec4-box ul {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 20px;
  }
}

.sec4-box ul li {
  display: grid;
  place-content: center;
  padding: 24px 23px;
  background: var(--white);
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec4-box ul li {
    width: calc(100% - 26px);
    max-width: 400px;
  }
  .sec4-box ul li:nth-child(odd) {
    margin-right: auto;
  }
  .sec4-box ul li:nth-child(even) {
    margin-left: auto;
  }
}

.sec4-box ul li::before,
.sec4-box ul li::after {
  content: "";
  width: 20px;
  height: 19px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDIwIDE5IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjAgMTlIMTJWMTAuNDEyQzEyIDQuNzEyIDE0LjUzODUgMS4xNCAyMCAwVjQuNzg4QzE4LjE1MzggNS4zOTYgMTcuMTUzOCA2LjIzMiAxNy4xNTM4IDkuNzI4SDIwVjE5Wk04IDE5SDBWMTAuNDEyQzAgNC43MTIgMi41Mzg0NiAxLjE0IDggMFY0Ljc4OEM2LjE1Mzg1IDUuMzk2IDUuMTUzODUgNi4yMzIgNS4xNTM4NSA5LjcyOEg4VjE5WiIgZmlsbD0iI0Q1RDJDRSIvPgo8L3N2Zz4=")
    no-repeat center / contain;
  position: absolute;
}

.sec4-box ul li::before {
  top: -4px;
  left: 8px;
}

.sec4-box ul li::after {
  bottom: -4px;
  right: 8px;
  rotate: 180deg;
}

.sec5-top {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 64px;
  padding: 24px;
  border: 1px solid var(--black);
  font-weight: 700;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec5-top {
    width: min(100%, 360px);
    padding: 24px 16px;
  }
}

.sec5-top::after {
  content: "";
  width: 5px;
  height: 51px;
  background: url("https://www.haseko.co.jp/branchera/assets/service-hre/sec1-deco.svg")
    no-repeat center / contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% - 2px));
}

.sec5-top__head {
  display: block;
  padding: 0 10px;
  background: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .sec5-top__head {
    font-size: 1.6rem;
  }
}

.sec5-top p {
  font-size: 2rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .sec5-top p {
    font-size: 1.6rem;
  }
}

.sec5 .sec-title__wrapper {
  margin-bottom: 0;
}

.sec5-box {
  margin-top: -22px;
  padding: 64px 52px 40px;
  background: var(--bg-color);
}
@media screen and (max-width: 768px) {
  .sec5-box {
    margin-top: -19px;
    padding: 48px 24px 24px;
  }
}

.sec5-box__inner {
  padding: 32px 64px 24px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--white);
}
@media screen and (max-width: 768px) {
  .sec5-box__inner {
    padding: 24px 16px 16px;
  }
}

.sec5-box__head {
  margin-bottom: 40px;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec5-box__head {
    margin-bottom: 24px;
    font-size: 2rem;
  }
}

.sec5-box__head .sec5-box__head-red {
  color: var(--red);
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .sec5-box__head .sec5-box__head-red {
    font-size: 2.8rem;
  }
}

.sec5-box__title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec5-box__title {
    margin-bottom: 16px;
  }
}

.sec5-box__title::before,
.sec5-box__title::after {
  content: "";
  height: 1px;
  background: var(--bg-color);
}

.sec5-box__guarantee {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.sec5-box__guarantee-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 16px;
}

.sec5-box__guarantee-item--red {
  border-bottom: 1px solid var(--red);
}

.sec5-box__guarantee-item--blue {
  border-bottom: 1px solid var(--blue);
}

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

.sec5-box__guarantee-item .flex {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}
@media screen and (max-width: 768px) {
  .sec5-box__guarantee-item .flex {
    justify-content: space-between;
  }
}

.sec5-box__guarantee-item .sp-none {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .sec5-box__guarantee-item .sp-none {
    display: none;
  }
}

.sec5-box__guarantee-item .sm {
  display: inline-block;
  font-size: 1.2rem;
}

.sec5-box table {
  width: 100%;
  background: #f5f5f5;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
}

.sec5-box table .logo {
  width: 90px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec5-box table .logo {
    width: 84px;
  }
}

.sec5-box tr > *:nth-child(2) {
  background: var(--red);
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
}

.sec5-box tr:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}

.sec5-box tr th,
.sec5-box tr td {
  height: 54px;
  vertical-align: middle;
  border-right: 1px solid #e0e0e0;
}

.sec5-box tr > * {
  border-right: 1px solid #e0e0e0;
}
.sec5-box tr > *:last-child {
  border-right: none;
}

.sec5-box tr th {
  font-weight: 500;
}

.sec5-box tr th:first-child {
  padding-left: 16px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .sec5-box tr th:first-child {
    padding: 0 8px;
  }
}

.sec5-box tr > *:nth-child(1) {
  width: calc(130 / 468 * 100%);
}
@media screen and (max-width: 768px) {
  .sec5-box tr > *:nth-child(1) {
    width: calc(74 / 310 * 100%);
  }
}

.sec5-box tr > *:nth-child(2),
.sec5-box tr > *:nth-child(3) {
  width: calc(114 / 468 * 100%);
}
@media screen and (max-width: 768px) {
  .sec5-box tr > *:nth-child(2) {
    width: calc(104 / 310 * 100%);
  }
}

.sec5-box tr > *:nth-child(4) {
  width: calc(112 / 468 * 100%);
}
@media screen and (max-width: 768px) {
  .sec5-box tr > *:nth-child(3),
  .sec5-box tr > *:nth-child(4) {
    width: calc(66 / 310 * 100%);
  }
}

.sec5-box__text {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .sec5-box__text {
    margin: 16px 0;
  }
}

.sec5-box .annotation {
  text-align: left;
}

.sec6 {
  padding: 40px 24px 24px;
  background: var(--bg-color);
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec6 {
    margin-inline: 16px;
    padding: 32px 24px 24px;
  }
}

.sec6-head {
  width: fit-content;
  padding: 8px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--red);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .sec6-head {
    font-size: 1.6rem;
  }
}

.sec6 .sec-title__wrapper {
  margin-bottom: 24px;
}

.sec6-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 24px 16px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--white);
}

.sec6-box__smile {
  color: var(--red);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec6-box__smile {
    font-size: 1.6rem;
  }
}

.sec6-box__smile-num {
  font-family: "Inter", sans-serif;
  font-size: 5.6rem;
}
@media screen and (max-width: 768px) {
  .sec6-box__smile-num {
    font-size: 4.8rem;
  }
}

.sec6-box__text {
  text-align: center;
  font-weight: 500;
  line-height: 1.47;
}

.sec6 ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sec6 ul li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
  font-weight: 400;
}

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