/* 冒頭のsection */
.service_sec {
  &:has(> .service_sec--left) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-30);
  }
  & > .cmn_introHead {
    text-align: center;
    margin-bottom: var(--space-20);
  }
  & > .cmn_introHead ~ * {
    width: 100%;
    max-width: max-content;
    margin-inline: auto;
  }
  @media screen and (max-width: 767px) {
    &:has(> .service_sec--left) {
      flex-direction: column;
    }
  }
}
.service_sec--left {
  .cmn_introHead {
    font-size: var(--font-20);
    letter-spacing: var(--letter-10);
    margin-bottom: 1em;
  }
}
.service_sec--img {
  width: 100%;
  max-width: max-content;
  &:has(img:nth-child(2)) {
    display: flex;
    gap: var(--space-20);
    margin-top: 1.5em;
  }
  @media screen and (max-width: 767px) {
    &:has(img:nth-child(2)) {
      flex-direction: column;
    }
  }
}

/* こんなお悩みはありませんか？ */
.problem_sec {
  width: 90%;
  max-width: var(--contents-w);
  margin-inline: auto;
  background: var(--gray-color);
  padding: var(--space-65);
  padding-bottom: 0;
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}
.problem_cont {
  position: relative;
  background: #fff;
  padding: var(--space-45);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-45);
  & > * {width: 100%;}
  figure {
    max-width: max-content;
    transform: translateY(var(--space-45));
  }
  @media screen and (max-width: 767px) {
    padding: var(--space-45) 5% 110px;
    figure {
      position: absolute;
      bottom: 0;
      transform: initial;
      height: 88px;
      img {
        height: 100%;
        aspect-ratio: auto;
      }
    }
    figure:has(img[src*="problem_left.svg"]) {left: 0;}
    figure:has(img[src*="problem_right.svg"]) {right: 0;}
  }
}
.problem_result {
  margin-top: var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  &::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    border: 0;
    border-top: solid 3px var(--blue-color);
    border-right: solid 3px var(--blue-color);
    transform: translateY(-5px) rotate(135deg);
  }
  @media screen and (max-width: 767px) {
    &::before {
      width: 35px;
      height: 35px;
    }
    figure {
      height: 104px;
      img {
        height: 100%;
        aspect-ratio: auto;
      }
    }
  }
}
.problem_result--head {
  font-weight: bold;
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
}

/* ～とは */
.what_lists {
  display: flex;
  justify-content: center;
  gap: var(--space-30);
  margin-top: 2em;
  &:has(+ *) {margin-bottom: 2em;}
  &.pc-wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  @media screen and (max-width: 767px) {
    max-width: 255px;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px var(--space-20);
  }
}
.what_lists--img {
  width: calc(100%/7 - 180px/7);
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  & > span:has(img) {
    background: #E2F0E9;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1;
  }
  figcaption {
    font-weight: bold;
    font-size: var(--font-20);
    letter-spacing: var(--letter-10);
  }
  @media screen and (max-width: 767px) {
    width: calc(50% - 7.5px);
    max-width: 120px;
    & > span:has(img) {
      img {
        max-width: 90px;
        max-height: 75px;
      }
    }
  }
}
.what_lists--normalImg {
  width: calc(50% - 15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  figcaption {
    width: 100%;
    max-width: 479px;
    margin-inline: auto;
  }
  @media screen and (max-width: 767px) {
    width: calc(50% - 7.5px);
  }
}

/* 対応業種 */
.sector_sec {
  width: 90%;
  max-width: var(--contents-w);
  margin: 0 auto var(--space-65);
  border: 1px solid var(--blue-color);
  padding: var(--space-45) var(--space-65);
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}
.sector_lists {
  display: flex;
  justify-content: center;
  gap: var(--space-30);
  margin-bottom: var(--space-20);
  &.pc-wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-20);
  }
}
.sector_lists--item {
  width: calc(100%/6 - 150px/6);
  max-width: 153px;
  height: 147px;
  background: var(--gray-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-bottom: 1em;
  @media screen and (max-width: 767px) {
    width: calc(50% - 7.5px);
    height: auto;
    padding: 1em 5px;
    & > p {
      white-space: nowrap;
      font-size: 1.4rem;
    }
  }
}

/* 対応エリア */
.area_sec {
  display: flex;
  justify-content: space-between;
  gap: var(--space-45);
  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}
.area_des {
  width: 100%;
}
.area_des--item {
  &:not(:last-child) {margin-bottom: var(--space-30);}
  & > .service_squareHead ~ * {
    width: calc(100% - 52px);
    margin-inline: auto;
  }
  @media screen and (max-width: 767px) {
    & > .service_squareHead ~ * {width: calc(100% - 52px);}
  }
}
.area_des--lists {
  display: flex;
  justify-content: space-between;
  gap: var(--space-20);
}
.area_des--listsItem {
  width: calc(50% - 10px);
  & > li:not(.bold_txt) {
    display: flex;
    &::before {content: '・';}
  }
}
.area_img {
  width: 100%;
}
.area_img--cap {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  &:not(:last-child) {padding-bottom: var(--space-20);}
  &::before {
    content: '';
    display: inline-block;
    width: 104px;
    height: 52px;
  }
  &.green::before {background: #BCD9AC;}
  &.red::before {background: #FFBEBB;}
  &.lightBlue::before {border: 2px solid #2ca0b9;}
  @media screen and (max-width: 767px) {
    &::before {
      width: 64px;
      min-width: 64px;
      height: auto;
      aspect-ratio: 2 / 1;
    }
  }
}
.area_img--capNote {color: #f00;font-weight: bold;}
.area_des--cat {
  background: var(--green-color);
  color: #fff;
  padding: 0 0.5em;
  margin-inline: 0.5em;
}
.bullet_lists li:has(> .area_des--cat) {flex-wrap: wrap;}

/* 選ばれる理由 */
.reason_sec {
  position: relative;
  background: var(--green-color);
  &::before {
    content: '';
    position: absolute;
    background: #fff;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    inset: 0;
    margin: auto;
  }
  .cmn_heading {padding-bottom: var(--space-30);}
  @media screen and (max-width: 767px) {
    &::before {width: 90%;}
    & > .page_section {padding-inline: 5%;}
  }
}
.reason_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-20);
  @media screen and (max-width: 767px) {
    gap: 35px;
  }
}
.reason_lists--item {
  display: flex;
  flex-direction: column;
  width: calc(50% - 10px);
  & > * {
    width: 100%;
    max-width: 481px;
  }
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}
.reason_lists--card {
  min-height: 220px;
  background: var(--green-color);
  margin-inline: auto 0;
  padding: var(--space-20);
  color: #fff;
  transform: translateY(-20px);
  .cmn_flowLists--head {color: inherit;}
  @media screen and (max-width: 767px) {
    transform: initial;
    min-height: initial;
    padding-block: 20px;
  }
}

/* 回収後の廃棄物の流れ */
.flow_sec {
  position: relative;
  min-height: 578px;
  &::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    background: var(--gray-color);
    width: 100%;
    height: 460px;
    z-index: -1;
  }
  @media screen and (max-width: 767px) {
    min-height: initial;
    &::before {height: 100%;}
  }
}
.flow_abs--right, .flow_abs--left {
  position: absolute;
  z-index: -1;
}
.flow_abs--right {
  top: var(--space-65);
  right: 0;
  @media screen and (max-width: 767px) {
    /* top: var(--space-45); */
    display: none;
  }
}
.flow_abs--left {
  bottom: 0;
  left: 0;
  @media screen and (max-width: 767px) {
    top: var(--space-45);
    bottom: auto;
  }
}
.flow_recycleFig {
  position: absolute;
  top: -30px;
  right: 0;
  @media screen and (max-width: 767px) {
    position: initial;
    top: auto;
    right: auto;
    margin-bottom: 1.5em;
  }
}
.flow_sec:has(.flow_recycleFig) > .page_section > *:not(.flow_recycleFig) {
  width: 100%;
  max-width: 526px;
}
.flow_lists {
  display: flex;
  gap: var(--space-30);
  margin-bottom: var(--space-45);
  & + .more_btn--arrow {justify-content: center;}
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    width: calc(100% - 30px);
    margin-inline: auto 0;
  }
}
.flow_lists--item {
  position: relative;
  width: calc(100%/6 - 150px/6);
  min-height: 230px;
  background: #fff;
  padding: 1em 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 0;
    border-top: solid 3px var(--blue-color);
    border-right: solid 3px var(--blue-color);
    transform: rotate(45deg);
    inset: 0 -20px 0 auto;
    margin: auto;
  }
  @media screen and (max-width: 767px) {
    width: calc(50% - 10px);
    min-height: initial;
    &:not(:last-child)::after {right: -15px;}
    &:nth-child(odd)::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border: 0;
      border-top: solid 3px var(--blue-color);
      border-right: solid 3px var(--blue-color);
      transform: rotate(45deg);
      inset: 0 auto 0 -25px;
      margin: auto;
    }
    &:first-child::before, &:nth-child(even)::after {display: none;}
  }
}
.flow_lists--head {
  text-align: center;
  padding-top: 1em;
  font-size: var(--font-20);
  letter-spacing: var(--letter-10);
}
.flow_lists--headNum {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  color: var(--blue-color);
  border-bottom: 1px solid;
  span:first-child {
    font-size: var(--main-txt);
    letter-spacing: var(--letter-08);
  }
  span:last-child {
    font-size: 5.5rem;
    letter-spacing: 2.75px;
    margin-block: -25px -5px;
  }
  @media screen and (max-width: 767px) {
    span:last-child {
      font-size: 4rem;
      letter-spacing: 2px;
      margin-top: -20px;
      white-space: nowrap;
    }
  }
}

/* ■付き見出し */
.service_squareHead {
  font-weight: bold;
  font-size: var(--font-20);
  letter-spacing: var(--letter-32);
  display: flex;
  gap: 10px;
  margin-bottom: 0.75em;
  &::before {
    content: '';
    background: var(--green-color);
    width: 16px;
    min-width: 16px;
    height: 16px;
    aspect-ratio: 1;
    transform: translateY(10px);
  }
  @media screen and (max-width: 767px) {
    &::before {
      width: 12px;
      min-width: 12px;
      height: 12px;
      transform: translateY(8px);
    }
  }
}

/* テキスト＋画像のflex */
.service_flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-30);
  & > *:not(figure) {
    width: 100%;
    max-width: calc(100% - 30px - 479px);
  }
  & > figure {
    width: 100%;
    max-width: 479px;
  }
  @media screen and (max-width: 767px) {
    & > *:not(figure),
    & > figure {max-width: initial;}
  }
}

/* 課題解決事例を見る（最下部リンク） */
.service_bottomLink {
  width: 90%;
  max-width: 580px;
  margin: 0 auto var(--space-65);
  display: flex;
  & > * {
    display: block;
    width: 50%;
  }
}
.service_bottomLink--txt {
  background: var(--green-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
}