@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@500;700&family=Zen+Maru+Gothic:wght@500;700&display=swap");

.hre3 {
  --white: #fff;
  --light-gray: #e1e1e1;
  --black: #3e3e3e;
  --pastel-blue: #ebf8f8;
  --aqua-green: #3db3b7;
  --hub-light-blue: #edf3ff;
  --hub-blue: #6288d9;
  --hub-dark-blue: #2d5bc3;
  --chukai-light-red: #ffe8e9;
  --chukai-red: #f6656e;
  --chukai-dark-red: #f13c48;
  --renov-light-orange: #ffead8;
  --renov-orange: #f37d3e;
  --pastel-pink: #fff4f5;
  --pastel-yellow: #fff797;
  --line-light-green: #e4ffef;
  --line: #06c755;

  --zenkaku: "Zen Kaku Gothic Antique", sans-serif;
  --zenmaru: "Zen Maru Gothic", sans-serif;
  --notosans: "Noto Sans JP", sans-serif;

  --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');

  --arrow-anchor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="none"><path d="M1 1L7 7L13 1" stroke="%2306c755" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');

  font-family: var(--zenkaku);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: justify;
  color: var(--black);
}

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

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

/* --------------------- */
/* 共通パーツ */
/* --------------------- */
/* ボタン */
.btn {
  display: grid;
  grid-template-columns: 1fr 8px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .btn {
    border-radius: 6px;
  }
}

.btn::after {
  content: "";
  -webkit-mask-image: var(--arrow);
  mask-image: var(--arrow);
  width: 8px;
  height: 14px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: var(--white);
}

.btn--blue {
  background: var(--hub-blue);
  box-shadow: 0 4px 0 0 #375eb1;
  color: var(--white) !important;
}

.btn--darkBlue {
  background: var(--hub-dark-blue);
  box-shadow: 0 4px 0 0 #1140a4;
  color: var(--white) !important;
}

.btn--red {
  background: var(--chukai-red);
  box-shadow: 0 4px 0 0 #c7474f;
  color: var(--white) !important;
}

.btn--orange {
  background: var(--renov-orange);
  box-shadow: 0 4px 0 0 #cb622a;
  color: var(--white) !important;
}

.btn--line {
  background: var(--line);
  box-shadow: 0 4px 0 0 #09a147;
  color: var(--white) !important;
}

.btn--whiteBlue {
  padding: 8px 20px 10px;
  background: var(--white);
  border: 2px solid var(--hub-blue);
  border-bottom: none;
  box-shadow: 0 4px 0 0 #6288d9;
  color: var(--hub-blue) !important;
}
.btn--whiteBlue::after {
  background-color: var(--hub-blue);
}

.btn--whiteRed {
  padding: 8px 20px 10px;
  background: var(--white);
  border: 2px solid var(--chukai-red);
  border-bottom: none;
  box-shadow: 0 4px 0 0 #f6656e;
  color: var(--chukai-red) !important;
}
.btn--whiteRed::after {
  background-color: var(--chukai-red);
}

/* アンカーボタン */
.anchor {
  display: grid;
  grid-template-columns: auto 14px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 14px 10px;
  color: var(--color) !important;
  border-radius: 8px;
  border: 2px solid var(--color);
  text-decoration: none !important;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .anchor {
    gap: 16px;
    width: min(100%, 310px);
    margin-inline: auto;
    padding: 12px 10px;
  }
}

.anchor--blue {
  --color: var(--hub-blue);
}

.anchor--red {
  --color: var(--chukai-red);
}

.anchor--orange {
  --color: var(--renov-orange);
}

.anchor::after {
  content: "";
  -webkit-mask-image: var(--arrow-anchor);
  mask-image: var(--arrow-anchor);
  width: 14px;
  height: 8px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: var(--color);
}

/* 注意事項 */
.annotation {
  font-family: var(--notosans);
  font-size: 1.2rem;
  font-weight: 400;
}

.annotation + .annotation {
  margin-top: 1em;
}

.btn + .annotation {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .btn + .annotation {
    margin-top: 8px;
  }
}

/* cv */
.cv {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 654px;
  margin-inline: auto;
  padding: 24px 16px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 4px 4px 6px 0 rgba(186, 224, 224, 0.6);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .cv {
    width: calc(340 / 362 * 100%);
    min-width: 320px;
    padding: 24px 25px;
    border-radius: 8px;
  }
}

.cv--blue {
  background: var(--pastel-blue);
}

.cv__head {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .cv__head {
    line-height: 1.4;
  }
}
.cv__head--sm {
  font-size: 1.6rem;
}

.cv__btn {
  width: min(100%, 290px);
  margin-inline: auto;
  text-align: center;
}

.cv__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .cv__btns {
    grid-template-columns: 1fr;
    width: min(100%, 290px);
    margin-inline: auto;
  }
}

/* リスト */
.lists {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lists li {
  padding-left: 12px;
  font-weight: 700;
  position: relative;
}

.lists li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  top: calc(1lh / 2);
  left: 0;
  transform: translateY(-50%);
}

/* マーカー */
.marker {
  background: linear-gradient(transparent 70%, var(--pastel-yellow) 0%);
}

/* --------------------- */
/* セクション */
/* --------------------- */
/* メインビジュアル */
.mv {
  background: var(--aqua-green);
  position: relative;
}

.mv::before,
.mv::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 50%;
}

.mv::before {
  height: 60px;
  background: inherit;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  bottom: 0;
  transform: translate(-50%, 100%);
}

.mv::after {
  display: block;
  width: 100%;
  height: 93px;
  background: url("https://www.haseko.co.jp/branchera/assets/hre3/mv-bottom-pc.svg")
    no-repeat center / contain;
  bottom: 2px;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .mv::after {
    background: url("https://www.haseko.co.jp/branchera/assets/hre3/mv-bottom-sp.svg")
      repeat-x center / contain;
  }
}

.mv__inner {
  margin-inline: 16px;
  padding: 28px 0 42px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .mv__inner {
    max-width: 362px;
    margin-inline: auto;
  }
}

.mv__inner::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 668 / 540;
  background: url("https://www.haseko.co.jp/branchera/assets/hre3/mv-bg-pc.png")
    no-repeat center / contain;
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .mv__inner::before {
    aspect-ratio: 362 / 441;
    background: url("https://www.haseko.co.jp/branchera/assets/hre3/mv-bg-sp.png")
      no-repeat center / contain;
    top: 45px;
  }
}

.mv__copy {
  width: 368px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .mv__copy {
    width: 231px;
    margin-left: 2px;
  }
}

.mv__text {
  width: 56px;
  position: absolute;
  top: 24px;
  right: 0;
}
@media screen and (max-width: 768px) {
  .mv__text {
    width: 46px;
  }
}

.mv__cv {
  margin-top: 293px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .mv__cv {
    margin-top: min(calc(250 / 390 * 100vw), 250px);
  }
}

/* section1 */
.sec1 {
  padding: 80px 0 48px;
  background: var(--pastel-blue);
}

.sec1__title {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec1__title {
    font-size: 2rem;
  }
}

.sec1-speech {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 532px;
  margin-inline: auto;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .sec1-speech {
    width: min(calc(350 / 390 * 100vw), 400px);
    gap: 7px;
  }
}

.sec1-speech__item {
  width: 304px;
}
@media screen and (max-width: 768px) {
  .sec1-speech__item {
    width: 260px;
  }
}

.sec1-speech__item:nth-child(even) {
  margin-left: auto;
}

.sec1-speech__illust {
  max-width: 600px;
  margin-top: -74px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec1-speech__illust {
    max-width: 500px;
    margin-top: -14px;
  }
}

.sec1-speech__illust img {
  width: 290px;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .sec1-speech__illust img {
    width: 255px;
  }
}

/* section2 */
.sec2 {
  padding: 56px 64px;
}
@media screen and (max-width: 768px) {
  .sec2 {
    padding: 48px 18px;
  }
}

.sec2-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec2-title {
    gap: 8px;
  }
}

.sec2-title__text {
  font-weight: 700;
  line-height: 1;
}

.sec2-title__text--sm {
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .sec2-title__text--sm {
    font-size: 1.8rem;
  }
}

.sec2-title__text--lg {
  font-size: 2.6rem;
}
@media screen and (max-width: 768px) {
  .sec2-title__text--lg {
    font-size: 2.4rem;
  }
}

.sec2-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 32px;
}
@media screen and (max-width: 768px) {
  .sec2-content {
    gap: 32px;
  }
}

.sec2-content__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .sec2-content__item {
    gap: 12px;
  }
}

.sec2-content__title {
  padding: 8px;
  border-radius: 100vmax;
  background: var(--aqua-green);
  color: var(--white);
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec2-content__title {
    font-size: 1.8rem;
  }
}

.sec2-content__img--sm {
  max-width: 350px;
  margin-inline: auto;
}

.sec2-content__lists {
  padding: 20px;
  border-radius: 12px;
  background: var(--pastel-blue);
}
@media screen and (max-width: 768px) {
  .sec2-content__lists {
    border-radius: 8px;
  }
}

.sec2-content__lists li {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec2-content__lists li {
    font-size: 1.6rem;
  }
}

.sec2-content__lists li::before {
  background: var(--aqua-green);
}

/* section3 */
.sec3 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 64px;
  background: var(--pastel-blue);
}
@media screen and (max-width: 768px) {
  .sec3 {
    padding: 48px 20px;
  }
}

.sec3__title {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec3__title {
    font-size: 2.4rem;
  }
}

.sec3-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .sec3-content {
    gap: 16px;
  }
}

.sec3-content__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 32px;
  border-radius: 8px;
  border: 1px solid var(--color);
  background: var(--white);
  box-shadow: 4px 4px 6px 0 rgba(186, 224, 224, 0.6);
}
@media screen and (max-width: 768px) {
  .sec3-content__item {
    gap: 16px;
    padding: 24px 20px;
  }
}

.sec3-content__item--blue {
  --color: var(--hub-blue);
}

.sec3-content__item--red {
  --color: var(--chukai-red);
}

.sec3-content__item--orange {
  --color: var(--renov-orange);
}

.sec3-content__title {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font-weight: 700;
  line-height: 1;
}

.sec3-content__title--column {
  flex-direction: column;
  align-items: flex-start;
}

.sec3-content__title-lg {
  color: var(--color);
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .sec3-content__title-lg {
    font-size: 2rem;
  }
}

.sec3-content__title-sm {
  font-size: 1.6rem;
}

.sec3-content__lists li::before {
  background: var(--color);
}

/* section4 */
.sec4 {
  padding: 48px 64px;
}
@media screen and (max-width: 768px) {
  .sec4 {
    padding: 48px 20px;
  }
}

.sec4:has([data-tab="new"].is-active) {
  border-top: 2px solid var(--hub-blue);
  border-bottom: 2px solid var(--hub-blue);
  background: var(--hub-light-blue);
}

.sec4:has([data-tab="used"].is-active) {
  border-top: 2px solid var(--chukai-red);
  border-bottom: 2px solid var(--chukai-red);
  background: var(--chukai-light-red);
}

.sec4-menu {
  display: grid;
  grid-template-columns: repeat(2, 230px);
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .sec4-menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 18px;
  }
}

.sec4-menu__item {
  height: 60px;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px 4px 6px 0 var(--drop-color);
  overflow: hidden;
  transition: height 0.3s ease;
}
@media screen and (max-width: 768px) {
  .sec4-menu__item {
    height: 58px;
  }
}

.sec4-menu__item[data-tab="new"] {
  --bg-color: var(--hub-light-blue);
  --text-color: var(--hub-blue);
  --drop-color: rgba(255, 102, 102, 0.6);
}

.sec4-menu__item[data-tab="new"].is-active {
  --bg-color: var(--hub-blue);
  --text-color: var(--white);
  --drop-color: rgba(175, 194, 228, 0.6);
}

.sec4-menu__item[data-tab="used"] {
  --bg-color: var(--chukai-light-red);
  --text-color: var(--chukai-red);
  --drop-color: rgba(175, 194, 228, 0.6);
}

.sec4-menu__item[data-tab="used"].is-active {
  --bg-color: var(--chukai-red);
  --text-color: var(--white);
  --drop-color: rgba(255, 102, 102, 0.6);
}

.sec4-menu__item.is-active {
  height: 70px;
}

.sec4-menu__item a {
  display: grid;
  place-content: center;
  height: 100%;
  background: var(--bg-color);
  color: var(--text-color) !important;
  text-decoration: none !important;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec4-menu__item a {
    font-size: 1.8rem;
  }
}

.sec4-main {
  position: relative;
}

.sec4-main__panel {
  display: none;
}

.sec4-main__panel.is-show {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 32px;
  border-radius: 12px;
  border: 2px solid var(--main-color);
  background: var(--white);
  box-shadow: 4px 4px 6px 0 var(--drop-color);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec4-main__panel.is-show {
    border-radius: 8px;
  }
}

.sec4-main__panel.is-show:has(.sec4-main__id) {
  padding-bottom: 0;
}

.sec4-main__panel[data-panel="new"] {
  --main-color: var(--hub-blue);
  --bg-color: var(--hub-light-blue);
  --drop-color: rgba(175, 194, 228, 0.6);
}

.sec4-main__panel[data-panel="used"] {
  --main-color: var(--chukai-red);
  --bg-color: var(--chukai-light-red);
  --sub-color: var(--pastel-pink);
  --drop-color: rgba(255, 102, 102, 0.6);
}

/* sec4-common */
.sec4-main__sec1 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 32px 0;
}
@media screen and (max-width: 768px) {
  .sec4-main__sec1 {
    gap: 24px;
    padding: 32px 20px 0;
  }
}

.sec4-main__head {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 32px;
  padding: 14px 62px;
  background: var(--main-color);
}
@media screen and (max-width: 768px) {
  .sec4-main__head {
    grid-template-columns: 60px 1fr;
    gap: 10px;
    padding: 14px 10px;
  }
}

.sec4-main__head--id {
  padding: 14px;
  background: var(--chukai-dark-red);
  text-align: center;
}

.sec4-main__head-feature {
  display: grid;
  place-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--pastel-yellow);
  color: var(--main-color);
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec4-main__head-feature {
    font-size: 1.8rem;
  }
}

.sec4-main__head-number {
  font-size: 2.6rem;
}
@media screen and (max-width: 768px) {
  .sec4-main__head-number {
    font-size: 2.4rem;
  }
}

.sec4-main__head-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  line-height: 1;
}

.sec4-main__head-text--sm {
  color: var(--white);
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec4-main__head-text--sm {
    font-size: 1.6rem;
  }
}

.sec4-main__head-text--lg {
  color: var(--white);
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec4-main__head-text--lg {
    font-size: 2rem;
  }
}

.sec4-main__head-text--lg sup {
  vertical-align: super;
  font-size: 1.4rem;
}

.sec4-main__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 30px 0;
}
@media screen and (max-width: 768px) {
  .sec4-main__inner {
    padding: 24px 18px 0;
  }
}

.sec4-main__box-lists {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .sec4-main__box-lists {
    gap: 16px;
  }
}

.sec4-main__box-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 32px;
  border-radius: 12px;
  background: var(--bg-color);
}
@media screen and (max-width: 768px) {
  .sec4-main__box-list {
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
  }
}

.sec4-main__box-head {
  color: var(--main-color);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.sec4-main__box-head sub {
  font-size: 1.2rem;
}

.sec4-main__box-col1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec4-main__box-col2 {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .sec4-main__box-col2 {
    flex-direction: column;
    gap: 10px;
  }
}

.sec4-main__box-col2 > .flex1 {
  flex: 1;
}

.sec4-main__box-col2--center {
  align-items: center;
}

.sec4-main__box--gap16 {
  gap: 16px;
}

.sec4-main__box--gap6 {
  gap: 6px;
}
@media screen and (max-width: 768px) {
  .sec4-main__box--gap16,
  .sec4-main__box--gap6 {
    gap: 10px;
  }
}

.sec4-main__box--gap28 {
  gap: 28px;
}
@media screen and (max-width: 768px) {
  .sec4-main__box--gap28 {
    gap: 22px;
  }
}

@media screen and (max-width: 768px) {
  .sec4-main__box--gap24 {
    gap: 24px;
  }
}

.sec4-main__line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 20px;
  border-radius: 8px;
  background: var(--line-light-green);
}

.sec4-main__line .cv__btn {
  max-width: 270px;
}

.sec4-main__checkbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px;
}
@media screen and (max-width: 768px) {
  .sec4-main__checkbox {
    gap: 8px;
    padding: 0;
  }
}

.sec4-main__checkbox-text {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.sec4-main__checkbox-text::before {
  content: "";
  width: 100%;
  aspect-ratio: 18 / 16;
  background: url("https://www.haseko.co.jp/branchera/assets/hre3/icon-check.png")
    no-repeat center / contain;
}

@media screen and (max-width: 768px) {
  .sec4-main__checkbox-text + .annotation {
    margin-left: 26px;
  }
}

.sec4-main__voice {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .sec4-main__voice {
    gap: 16px;
  }
}

.sec4-main__voice-head {
  color: var(--main-color);
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec4-main__voice-head {
    font-size: 1.8rem;
  }
}

.sec4-main__voice-box {
  display: grid;
  grid-template-columns: 1fr 80px;
  grid-template-rows: 1fr 80px;
  padding: 16px 32px;
  align-items: flex-end;
  gap: 20px;
  border-radius: 12px;
  border: 2px dashed var(--main-color);
  background: var(--sub-color);
}
@media screen and (max-width: 768px) {
  .sec4-main__voice-box {
    padding: 16px;
    gap: 8px;
    border-radius: 8px;
  }
}

.sec4-main__voice-box-text {
  grid-column: span 2;
  font-family: var(--zenmaru);
}

.sec4-main__voice-box-text .strong {
  color: var(--main-color);
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .sec4-main__lists {
    width: 100%;
  }
}

.sec4-main__lists li::before {
  background: var(--main-color);
}

.sec4-main__textbox {
  width: 285px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-color);
}
@media screen and (max-width: 768px) {
  .sec4-main__textbox {
    width: 100%;
  }
}

.sec4-main__text--lg {
  font-size: 1.8rem;
  font-weight: 700;
}

.sec4-main__id {
  padding: 32px 0;
  background: repeating-linear-gradient(
    45deg,
    var(--pastel-yellow),
    var(--pastel-yellow) 3px,
    var(--white) 0,
    var(--white) 6px
  );
}
@media screen and (max-width: 768px) {
  .sec4-main__id {
    padding: 24px 0;
  }
}

.sec4-main__id-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 30px 0;
}
@media screen and (max-width: 768px) {
  .sec4-main__id-inner {
    gap: 24px;
    padding: 24px 18px 0;
  }
}

.sec4-main__id-col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media screen and (max-width: 768px) {
  .sec4-main__id-col2 {
    gap: 22px;
  }
}

.sec4-main__id-box {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  justify-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 4px 4px 6px 0 rgba(255, 76, 76, 0.2);
}
@media screen and (max-width: 768px) {
  .sec4-main__id-box {
    padding: 16px 12px;
    border-radius: 8px;
  }
}

.sec4-main__id-box-head {
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--chukai-dark-red);
  text-align: center;
  font-weight: 700;
}

/* 画像 */
.sec4-main__img--sumaiLogo {
  max-width: 380px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--sumaiLogo {
    max-width: 310px;
  }
}

.sec4-main__img--chukaiLogo {
  max-width: 150px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--chukaiLogo {
    max-width: 130px;
  }
}

.sec4-main__img--no1 {
  max-width: 312px;
  margin-inline: auto;
}

.sec4-main__img--fe2il1 {
  max-width: 142px;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--fe2il1 {
    max-width: 168px;
  }
}

.sec4-main__img--fe2il2 {
  max-width: 198px;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--fe2il2 {
    max-width: 278px;
  }
}

.sec4-main__img--fe3il1 {
  max-width: 142px;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--fe3il1 {
    max-width: 278px;
  }
}

.sec4-main__img--used-hosho {
  max-width: 272px;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--used-hosho {
    max-width: 290px;
    margin-inline: auto;
  }
}

.sec4-main__img--used-fe3il1 {
  max-width: 260px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--used-fe3il1 {
    max-width: 218px;
  }
}

.sec4-main__img--idtext {
  max-width: 170px;
}
@media screen and (max-width: 768px) {
  .sec4-main__img--idtext {
    max-width: 120px;
  }
}

/* アコーディオン */
.accordion {
  width: 100%;
  border-radius: 6px;
  border: 2px solid var(--aqua-green);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .accordion {
    max-width: 290px;
    margin-inline: auto;
    border-radius: 8px;
  }
}

.accordion-header {
  display: grid;
  place-content: center;
  width: 100%;
  height: 62px;
  border-radius: 6px 6px 0 0;
  background: var(--pastel-blue);
  color: var(--aqua-green);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 768px) {
  .accordion-header {
    border-radius: 8px 8px 0 0;
  }
}
.accordion-header:hover {
  opacity: 1;
}

.accordion-header::before,
.accordion-header::after {
  content: "";
  background: var(--aqua-green);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.accordion-header::before {
  width: 18px;
  height: 2px;
  right: 19px;
}

.accordion-header::after {
  width: 2px;
  height: 18px;
  right: 27px;
  transition: opacity 0.3s ease;
}

.accordion-item:has(.open) .accordion-header::after {
  opacity: 0;
}

.accordion-body {
  height: 0;
  background: var(--white);
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-cont {
  padding: 32px;
}
@media screen and (max-width: 768px) {
  .accordion-cont {
    padding: 20px 11px;
  }
}

.accordion-cont_head {
  display: block;
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--chukai-red);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .accordion-cont_head {
    padding: 8px 24px;
    border-radius: 6px;
  }
}

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

.accordion-text {
  margin-top: 10px;
  font-size: 1.2rem;
  font-family: var(--notosans);
}
@media screen and (max-width: 768px) {
  .accordion-text {
    margin-top: 8px;
  }
}

.accordion-text_head {
  color: var(--aqua-green);
  font-size: 1.4rem;
  font-weight: 700;
}

.accordion-img {
  margin-top: 16px;
}

/* section5 */
.sec5 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 64px;
  background: var(--renov-light-orange);
}
@media screen and (max-width: 768px) {
  .sec5 {
    gap: 24px;
    padding: 48px 20px;
  }
}

.sec5__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}

.sec5__head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec5__head-text--lg {
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .sec5__head-text--lg {
    font-size: 1.8rem;
  }
}

.sec5__head-text--sm {
  display: inline-block;
  font-size: 1.8rem;
  margin: 0 4px;
}

.sec5__head-text--orange {
  display: inline-block;
  padding: 6px 8px;
  font-size: 1.8rem;
  background: var(--renov-orange);
  color: var(--white);
}
@media screen and (max-width: 768px) {
  .sec5__head-text--orange {
    font-size: 1.6rem;
  }
}

.sec5__head-title {
  font-size: 2.6rem;
}
@media screen and (max-width: 768px) {
  .sec5__head-title {
    font-size: 2.4rem;
  }
}

.sec5__img {
  border-radius: 12px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec5__img {
    border-radius: 8px;
  }
}

.sec5__lists {
  padding: 20px;
  border-radius: 12px;
  background: var(--white);
}
@media screen and (max-width: 768px) {
  .sec5__lists {
    padding: 24px 16px;
    border-radius: 8px;
  }
}

.sec5__lists li::before {
  background: var(--renov-orange);
}

/* section6 */
.sec6 {
  padding: 48px 14px;
}