@charset "utf-8";
/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
}
.fv .bg_wrap {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 143px 0 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .fv .bg_wrap {
    padding: 132px 0 0;
  }
}
.fv .inner {
  position: relative;
  max-width: 1032px;
  container-type: inline-size;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .fv .inner {
    padding-bottom: 40px;
  }
}
.fv .inner .creature {
  position: absolute;
}
.fv .inner .creature01 {
  width: min(15.703125000000002vw,201px);
  opacity: 0;
  translate: -10% -10%;
  bottom: -160px;
  right: max(calc((-20 - 24) * ((100vw - 768px) / (1280 - 768)) + 24px),-20px);
}
.fv .inner .creature02 {
  width: min(14.6875vw,188px);
  opacity: 0;
  translate: 10% 0%;
  bottom: -167px;
  left: min(1.40625vw,18px);
}
@media screen and (max-width: 768px) {
  .fv .inner .creature01 {
    width: 88px;
    bottom: -62px;
    right: 22px;
  }
  .fv .inner .creature02 {
    width: 98px;
    bottom: -60px;
    left: 25px;
  }
}
.fv .page_ttl {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.fv .page_ttl::before {
  content: '';
  position: absolute;
  width: 9.39922480620155cqw;
  height: auto;
  aspect-ratio: 97/102;
  background-image: url(../img/recycle/pagettl_deco.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  top: -2.9069767441860463cqw;
  right: -6.104651162790697cqw;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .fv .page_ttl::before {
    width: 43px;
    aspect-ratio: 43/45;
    top: -6px;
    right: 4px;
  }
}
.fv .page_ttl::after {
  content: '';
  position: absolute;
  width: 2.5193798449612403cqw;
  height: auto;
  aspect-ratio: 1/1;
  background-image: url(../img/recycle/pagettl_deco2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  translate: -50% 100%;
  bottom: -0.29069767441860467cqw;
  left: 50%;
}
@media screen and (max-width: 768px) {
  .fv .page_ttl::after {
    width: 16px;
    bottom: -4px;
  }
}
.fv .page_ttl .en {
  position: relative;
  width: fit-content;
  font-size: 9.689922480620156cqw;
  font-family: var(--Livvic);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--recycle_color);
  display: block;
  -webkit-text-stroke: 2px #000;
}
@media screen and (max-width: 768px) {
  .fv .page_ttl .en {
    font-size: 5.6rem;
    -webkit-text-stroke: 1px #000;
  }
}
.fv .page_ttl .ja {
  position: relative;
  width: fit-content;
  font-size: clamp(1.4rem,1.744186046511628cqw,1.8rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #000;
  display: block;
  padding: 0.3875968992248062cqw 1.550387596899225cqw;
  margin: 1.937984496124031cqw auto 0;
}
@media screen and (max-width: 768px) {
.fv .page_ttl .ja {
    font-size: 1.6rem;
    padding: 4px 16px;
    margin: 16px auto 0;
  }
}
.fv .bg_bottom {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: clip;
  translate: -50% 100%;
  bottom: min(0.625vw, 8px);
  left: 50%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .fv .bg_bottom {
    bottom: 2px;
  }
}
.fv .bg_bottom .bg_parts {
  width: max(100%,1920px);
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .fv .bg_bottom .bg_parts {
    width: 100%;
  }
}
/* ↑↑↑ fv ↑↑↑ */
.lead_img {
  width: 100%;
  height: max(62.5vw,800px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .lead_img {
    height: auto;
  }
}
.lead_img img {
  width: max(100%,1280px);
}
@media screen and (max-width: 768px) { 
  .lead_img img {
    width: min(190.66666666666669vw,800px);
  }
}
/* ↓↓↓ lead_block ↓↓↓ */
.lead_block {
  position: relative;
  padding: 0 30px;
}
@media screen and (max-width: 768px) {
  .lead_block {
    padding: 40px 25px 0;
  }
}
.lead_block .bg_top {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: clip;
  translate: -50% -100%;
  top: 1px;
  left: 50%;
}
.lead_block .bg_top .bg_parts {
  width: max(100%, 1920px);
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .lead_block .bg_top .bg_parts {
    width: 100%;
  }
}
.lead_block .inner {
  max-width: 1032px;
  container-type: inline-size;
  margin: 0 auto;
}
.lead_block .inner .lead_txt {
  font-size: clamp(1.4rem,1.550387596899225cqw,1.6rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .lead_block .inner .lead_txt {
    font-size: 1.6rem;
  }
}
.lead_block .inner .anchor_block {
  display: flex;
  flex-wrap: wrap;
  gap: 6.87984496124031cqw 2.2286821705426356cqw;
  margin: 7.751937984496124cqw auto 0;
}
@media screen and (max-width: 768px) {
  .lead_block .inner .anchor_block {
    gap: 36px 12px;
    margin: 48px auto 0;
  }
}
.lead_block .anchor_block .anchor {
  position: relative;
  width: calc((100% - 2.2286821705426356cqw*4)/5);
  min-height: 22.48062015503876cqw;
}
@media screen and (max-width: 768px) {
  .lead_block .anchor_block .anchor {
    width: calc((100% - 12px*2)/3);
    min-height: unset;
  }
}
.lead_block .anchor_block .anchor_link {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 2.3255813953488373cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.550387596899225cqw;
  padding: 3.10077519379845cqw 0.9689922480620154cqw 3.391472868217054cqw;
}
@media screen and (max-width: 768px) {
  .lead_block .anchor_block .anchor_link {
    border-radius: 16px;
    border: 1px solid #000;
    gap: 4px;
    padding: 16px 8px 30px;
  }
}
.lead_block .anchor_block .anchor_link .anchor_img {
  width: 9.689922480620156cqw;
  transform-origin: center;
  transition: scale ease .3s;
}
@media screen and (min-width: 769px) {
  .lead_block .anchor_block .anchor_link:hover .anchor_img {
    animation: anchorAnimation 0.4s ease forwards;
  }
}
@media screen and (max-width: 768px) {
  .lead_block .anchor_block .anchor_link .anchor_img {
    width: 64px;
  }
}
@keyframes anchorAnimation {
  0% {
    rotate: 0;
    scale: 1;
  }
  30% {
    rotate: 10deg;
    scale: 1.1;
  }
  60% {
    rotate: -10deg;
    scale: 1.1;
  }
  100% {
    rotate: 0;
    scale: 1;
  }
}
.lead_block .anchor_block .anchor_link .anchor_txt {
  font-size: clamp(1.6rem,1.937984496124031cqw,2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  flex: 1;
  align-content: center;
}
@media screen and (max-width: 768px) {
  .lead_block .anchor_block .anchor_link .anchor_txt {
    font-size: 1.8rem;
    line-height: 1.44445;
  }
}
.lead_block .anchor_block .anchor_link .anchor_txt .s_txt {
  font-size: clamp(1rem,1.3565891472868217cqw,1.4rem);
  display: block;
}
@media screen and (max-width: 768px) {
  .lead_block .anchor_block .anchor_link .anchor_txt .s_txt {
    font-size: 1.4rem;
    line-height: 1.42857;
  }
}

.lead_block .anchor_block .anchor_link .arrow {
  position: absolute;
  width: 4.651162790697675cqw;
  filter: drop-shadow(0 0.3875968992248062cqw 0 var(--anchor_color));
  transition: filter ease .3s, bottom ease .3s;
  translate: -50% 50%;
  bottom: 0;
  left: 50%;
}
@media screen and (min-width: 769px) {
  .lead_block .anchor_block .anchor_link:hover .arrow {
    filter: drop-shadow(0 0 0 var(--anchor_color));
    bottom: -0.3875968992248062cqw;
  }
}
@media screen and (max-width: 768px) {
  .lead_block .anchor_block .anchor_link .arrow {
    width: 40px;
    filter: drop-shadow(0 4px 0 var(--anchor_color));
  }
}
.lead_block .anchor_block .anchor.-yellow .arrow {
  --anchor_color: var(--story_color);
}
.lead_block .anchor_block .anchor.-green .arrow {
  --anchor_color: var(--recycle_color);
}
.lead_block .anchor_block .anchor.-l_blue .arrow {
  --anchor_color: var(--keywords_color);
}
.lead_block .anchor_block .anchor.-blue .arrow {
  --anchor_color: #83A7E7;
}
.lead_block .anchor_block .anchor.-purple .arrow {
  --anchor_color: #C2C0ED;
}
.lead_block .anchor_block .anchor.-pink .arrow {
  --anchor_color: var(--news_color);
}
/* ↑↑↑ lead_block ↑↑↑ */
/* ↓↓↓ article ↓↓↓ */
.article {
  padding: 0 30px;
  margin: min(17.34375vw,222px) auto 0;
}
#anchor01 {
  margin: min(22.34375vw,286px) auto 0;
}
@media screen and (max-width: 768px) {
  .article {
    padding: 0 25px;
    margin: 119px auto 0;
  }
  #anchor01 {
    margin: 179px auto 0;
  }
}
.article.-yellow {
  --article_color: var(--story_color);
  --article_flow_color: #FFFBCC;
}
.article.-green {
  --article_color: var(--recycle_color);
  --article_flow_color: #F8FFEB;
}
.article.-l_blue {
  --article_color: var(--keywords_color);
  --article_flow_color: #DDF2FF;
}
.article.-blue {
  --article_color: #83A7E7;
  --article_bg_color: #DEF5EF;
}
.article.-purple {
  --article_color: #C2C0ED;
}
.article.-pink {
  --article_color: var(--news_color);
}
.article .wrap {
  position: relative;
  max-width: 1032px;
  border: 2px solid #000;
  background-color: #fff;
  container-type: inline-size;
  padding: min(3.4375000000000004vw,44px) min(6.875000000000001vw,88px) min(6.875000000000001vw,88px);
  margin: 0 auto;
}
.article.-blue .wrap {
  background-color: var(--article_bg_color);
}
@media screen and (max-width: 768px) {
  .article .wrap {
    border: 1px solid #000;
    padding: 32px 24px 64px;
  }
}
.article .wrap::before {
  content: '';
  position: absolute;
  width: 4.694835680751173cqw;
  height: auto;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--article_color) 50%, #F8FFEB 50%);
  bottom: -2px;
  right: -2px;
}
@media screen and (max-width: 768px) {
  .article .wrap::before {
    width: 40px;
  }
}
.article .wrap .head_block {
  position: absolute;
  width: 46.948356807511736cqw;
  height: 23.474178403755868cqw;
  background-color: #fff;
  border-radius: 23.474178403755868cqw 23.474178403755868cqw 0 0;
  padding-top: 2.8169014084507045cqw;
  translate: -50% -100%;
  top: 6.807511737089202cqw;
  left: 50%;
}
.article.-blue .head_block {
  background-color: var(--article_bg_color);
}
@media screen and (max-width: 768px) {
  .article .wrap .head_block {
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    padding-top: 24px;
    top: 14px;
  }
}
.article .wrap .head_block::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 23.474178403755868cqw 23.474178403755868cqw 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 16.666666666666664cqw, 0% 16.666666666666664cqw);
  top: 0;
  left: 0;
  z-index: -1;
}
.article.-blue .head_block::before {
  background-color: var(--article_bg_color);
}
@media screen and (max-width: 768px) {
  .article .wrap .head_block::before {
    border-radius: 100px 100px 0 0;
    border: 1px solid #000;
    clip-path: polygon(0 0, 100% 0, 100% 86px, 0% 86px);
  }
}
.article .wrap .head_block .head_img {
  width: 14.084507042253522cqw;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .article .wrap .head_block .head_img {
    width: 80px;
  }
}
.article .wrap .article_ttl {
  position: relative;
  font-size: 4.694835680751173cqw;
  font-family: var(--Zen_Maru);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .article .wrap .article_ttl {
    font-size: 2.4rem;
  }
}
.article .wrap .article_ttl .s_txt {
  font-size: 2.8169014084507045cqw;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) {
  .article .wrap .article_ttl .s_txt {
    font-size: 1.6rem;
  }
}
.article .wrap .article_img {
  width: 100%;
  outline: 2px dashed #000;
  outline-offset: -2px;
  margin-top: 3.755868544600939cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .article_img {
    border: 1px dashed #000;
    margin-top: 24px;
  }
}
.article .wrap .flex_box {
  display: flex;
  gap: 64px 9.389671361502346cqw;
  margin-top: 5.633802816901409cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box {
    flex-direction: column;
    margin-top: 40px;
  }
}
.article .wrap .flex_box .box1 {
  width: 48.82629107981221cqw;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 {
    width: 100%;
  }
}
.article .wrap .flex_box .box1 .ttl_block {
  display: flex;
  flex-direction: column;
  gap: 1.4084507042253522cqw 0.9389671361502347cqw;
  margin-top: 0.4694835680751174cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .ttl_block {
    gap: 8px;
    margin-top: 4px;
  }
}
.article .wrap .flex_box .box1 .ttl {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2.8169014084507045cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .ttl {
    gap: unset;
    display: inline;
    padding-left: 49px;
  }
}
.article .wrap .flex_box .box1 .ttl .icon_block {
  display: flex;
  gap: 4px 1.8779342723004695cqw;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .ttl .icon_block {
    position: absolute;
    flex-direction: column;
    top: 0;
    left: 0;
  }
}
.article .wrap .flex_box .box1 .ttl .icon_block .icon {
  width: 3.755868544600939cqw;
}
@media screen and (max-width: 768px) {
.article .wrap .flex_box .box1 .ttl .icon_block .icon {
    width: 29px;
    aspect-ratio: 29/28;
  }
}
.article .wrap .flex_box .box1 .ttl .txt_box {
  font-size: clamp(2rem,2.8169014084507045cqw,2.4rem);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(90deg, #000 0%, #000 0%);
  filter: drop-shadow(0px -0.2347417840375587cqw 0 #000) drop-shadow(0px 0.2347417840375587cqw 0 #000) drop-shadow(-0.9389671361502347cqw 0px 0 #000) drop-shadow(0.9389671361502347cqw 0px 0 #000);
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .ttl .txt_box {
    font-size: 2rem;
    filter: drop-shadow(0px -4px 0 #000) drop-shadow(0px 4px 0 #000) drop-shadow(-8px 0px 0 #000) drop-shadow(8px 0px 0 #000);
  }
}
.article .wrap .flex_box .box1 .txt {
  font-size: clamp(1.2rem,1.8779342723004695cqw,1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: justify;
  margin-top: 3.755868544600939cqw;
}
.article .wrap .flex_box .box1 .txt:first-child {
  margin-top: unset;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .txt {
    font-size: 1.6rem;
    margin-top: 16px;
  }
}
.article .wrap .flex_box .box1 .num_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5.633802816901409cqw auto 0;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .num_block {
    margin: 32px auto 0;
  }
}
.article .wrap .flex_box .box1 .num_head {
  position: relative;
  font-size: clamp(1.6rem,2.3474178403755865cqw,2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 3.755868544600939cqw;
}
@media screen and (max-width: 768px) { 
  .article .wrap .flex_box .box1 .num_head {
    font-size: 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
  }
}
.article .wrap .flex_box .box1 .num_head::before,
.article .wrap .flex_box .box1 .num_head::after {
  content: '';
  position: absolute;
  width: 2.8169014084507045cqw;
  height: 0.2347417840375587cqw;
  background-color: #000;
  border-radius: 9999px;
  translate: 0 -50%;
  top: 56%;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .num_head::before,
  .article .wrap .flex_box .box1 .num_head::after {
    width: 45px;
    height: 1px;
  }
}
.article .wrap .flex_box .box1 .num_head::before {
  rotate: 56deg;
  left: 0;
}
.article .wrap .flex_box .box1 .num_head::after {
  rotate: -56deg;
  right: 0;
}
.article .wrap .flex_box .box1 .num_head .s_txt {
  font-size: clamp(1.2rem,1.8779342723004695cqw,1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-right: -1.4084507042253522cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .num_head .s_txt {
    font-size: 1.6rem;
    margin-right: unset;
  }
}
.article .wrap .flex_box .box1 .num_block .num .unit_about {
  font-size: 3.755868544600939cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 0.9389671361502347cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .num_block .num .unit_about {
    font-size: 1.8rem;
    margin-right: 8px;
  }
}
.article .wrap .flex_box .box1 .num_block .num .value {
  font-size: 8.450704225352112cqw;
  font-family: var(--Livvic);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--article_color);
  -webkit-text-stroke: 0.1937984496124031cqw #000;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .num_block .num .value {
    font-size: 4rem;
  -webkit-text-stroke: 1px #000;
  }
}
.article .wrap .flex_box .box1 .num_block .num .unit {
  font-size: 5.633802816901409cqw;
  font-family: var(--Livvic);
  font-weight: 600;
  margin-left: 0.9389671361502347cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .num_block .num .unit {
    font-size: 2.4rem;
    margin-left: 8px;
  }
}
.article .wrap .flex_box .box1 .note {
  font-size: clamp(1.2rem,1.8779342723004695cqw,1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box1 .note {
    font-size: 1.6rem;
  }
}
.article .wrap .flex_box .box2 {
  position: relative;
  flex: 1;
}
.article .wrap .flex_box .box2::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  top: 0;
  left: -4.69483568075117cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2::before {
    width: 100%;
    height: 1px;
    top: -32px;
    left: 0;
  }
}
.article .wrap .flex_box .box2 .txt_group {
  position: relative;
  padding-left: 3.286384976525822cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .txt_group {
    padding-left: 28px;
  }
}
.article .wrap .flex_box .box2 .txt_group::before {
  content: '';
  position: absolute;
  width: 2.347417840375586cqw;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--article_color);
  top: 0.7042253521126761cqw;
  left: 0;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .txt_group::before {
    width: 20px;
    top: 5px;
  }
}
.article .wrap .flex_box .box2 .txt_group+.txt_group {
  margin-top: 5.633802816901409cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .txt_group+.txt_group {
    margin-top: 32px;
  }
}
.article .wrap .flex_box .box2 .txt_group .head {
  font-size: clamp(1.6rem,2.347417840375586cqw,2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .txt_group .head {
    font-size: 1.8rem;
  }
}
.article .wrap .flex_box .box2 .txt_group .txt {
  font-size: clamp(1.2rem,1.8779342723004695cqw,1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .txt_group .txt {
    font-size: 1.6rem;
  }
}
.article .wrap .flex_box .box2 .img_block {
  display: flex;
  gap: 0.9389671361502347cqw;
  margin-top: 2.8169014084507045cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .img_block {
    gap: 12px;
    margin-top: 16px;
  }
}
.article .wrap .flex_box .box2 .img_block .img {
  width: calc((100% - 0.9389671361502347cqw)/2);
}
@media screen and (max-width: 768px) {
  .article .wrap .flex_box .box2 .img_block .img {
    width: calc((100% - 12px)/2);
  }
}
.article .wrap .flow_block {
  position: relative;
  margin-top: 5.633802816901409cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block {
    margin-top: 40px;
  }
}
.article .wrap .flow_block::before,
.article .wrap .flow_block::after {
  content: '';
  position: absolute;
  width: 1.4084507042253522cqw;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--article_color);
  border: 1px solid #000;
  top: 1.8779342723004695cqw;
  z-index: 1;
}
.article .wrap .flow_block::before {
  left: 1.8779342723004695cqw;
}
.article .wrap .flow_block::after {
  right: 1.8779342723004695cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block::before,
  .article .wrap .flow_block::after {
    width: 12px;
    top: 16px;
  }
  .article .wrap .flow_block::before {
    left: 16px;
  }
  .article .wrap .flow_block::after {
    right: 16px;
  }
}
.article .wrap .flow_block .flow_inner {
  position: relative;
  background-color: var(--article_flow_color);
  padding: 4.694835680751173cqw 5.633802816901409cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .flow_inner {
    padding: 40px 24px;
  }
}
.article .wrap .flow_block .flow_inner::before,
.article .wrap .flow_block .flow_inner::after {
  content: '';
  position: absolute;
  width: 1.4084507042253522cqw;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--article_color);
  border: 1px solid #000;
  bottom: 1.8779342723004695cqw;
}
.article .wrap .flow_block .flow_inner::before {
  left: 1.8779342723004695cqw;
}
.article .wrap .flow_block .flow_inner::after {
  right: 1.8779342723004695cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .flow_inner::before,
  .article .wrap .flow_block .flow_inner::after {
    width: 12px;
    bottom: 16px;
  }
  .article .wrap .flow_block .flow_inner::before {
    left: 16px;
  }
  .article .wrap .flow_block .flow_inner::after {
    right: 16px;
  }
}
.article .wrap .flow_block .ttl {
  position: relative;
  font-size: clamp(1.6rem,2.3474178403755865cqw,2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 2px dashed #000;
  padding-bottom: 2.8169014084507045cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .ttl {
    font-size: 1.8rem;
    border-bottom: 1px dashed #000;
    padding-bottom: 16px;
  }
}
.article .wrap .flow_block .sp_txt {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  display: none;
  margin: 16px -2px 0;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .sp_txt {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .scroll_wrap {
    overflow: scroll;
    margin-right: -24px;
  }
}
.article .wrap .flow_block .flow_list {
  display: flex;
  gap: 5.868544600938967cqw;
  margin-top: 7.511737089201878cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .flow_list {
    position: relative;
    width: 632px;
    gap: 40px;
    margin: 56px auto 0;
  }
  .article .wrap .flow_block .flow_list::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 1px;
    translate: 100% 0;
    top: 0;
    right: 0;
  }
}
.article .wrap .flow_block .flow_list .flow {
  position: relative;
  flex: 1;
}
.article .wrap .flow_block .flow_list .flow:not(:first-of-type)::before {
  content: '';
  position: absolute;
  width: 2.8169014084507045cqw;
  height: auto;
  aspect-ratio: 24/20;
  background-image: url(../img/recycle/flow_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  translate: -100% -50%;
  top: 40%;
  left: -1.1737089201877933cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .flow_list .flow:not(:first-of-type)::before {
    width: 24px;
    top: 32%;
    left: -8px;
  }
}
.article .wrap .flow_block .flow_list .flow .flow_head {
  position: absolute;
  width: 9.389671361502346cqw;
  height: 4.694835680751173cqw;
  font-size: 3.755868544600939cqw;
  font-family: var(--Livvic);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--article_color);
  -webkit-text-stroke: 0.2347417840375587cqw #000;
  border-radius: 4.694835680751173cqw 4.694835680751173cqw 0 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  translate: -50% -100%;
  top: 0.5868544600938966cqw;
  left: 50%;
  padding-top: 0.5868544600938966cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .flow_list .flow .flow_head {
    width: 80px;
    height: 40px;
    font-size: 2.8rem;
    -webkit-text-stroke: 1px #000;
    border-radius: 40px 40px 0 0;
    top: 0;
    padding-top: 5px;
  }
}
.article .wrap .flow_block .flow_list .flow .flow_img {
  width: 100%;
  background-color: #fff;
}
.article .wrap .flow_block .flow_list .flow .flow_txt {
  font-size: clamp(1.2rem,1.8779342723004695cqw,1.6rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1.173708920187793cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .flow_block .flow_list .flow .flow_txt {
    font-size: 1.6rem;
    margin-top: 8px;
  }
}
.article .wrap .map_box {
  width: 100%;
  display: block;
  margin-top: 5.633802816901409cqw;
}
@media screen and (max-width: 768px) {
  .article .wrap .map_box {
    margin-top: 40px;
  }
}
/* ↑↑↑ article ↑↑↑ */