@charset "utf-8";
html.noscroll {
  overflow: hidden;
}
body.noscroll {
  overflow: hidden;
}
main {
  overflow: clip;
}
/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
}
.fv .bg_wrap {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 143px 0 min(16.40625vw,210px);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .fv .bg_wrap {
    padding: 138px 0 min(16vw,120px);
  }
}
.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 .item,
.fv .bg_bottom .item {
  position: absolute;
}
.fv .inner .item01 {
  width: min(20.391vw, 261px);
  opacity: 0;
  top: max(-3.876cqw, -40px);
  left: max(calc((-20 - 24) * ((100vw - 768px) / (1280 - 768)) + 24px), -20px);
}
.fv .inner .item03 {
  width: min(12.657vw, 162px);
  overflow: clip;
  top: -30px;
  right: max(calc((-15 - 4) * ((100vw - 768px) / (1280 - 768)) + 30px), -30px);
}
.fv .inner .item03 img {
  display: block;
  opacity: 0;
  translate: 0 40%;
}
@media screen and (max-width: 768px) {
  .fv .inner .item01 {
    width: 124px;
    top: -53px;
    left: 14px;
  }
  .fv .inner .item03 {
    width: 60px;
    top: -25px;
    right: 8px;
  }
}
.fv .page_ttl {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.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(--about_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_block ↓↓↓ */
.lead_block {
  position: relative;
  padding: min(7.8125vw,100px) 30px 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lead_block {
    padding: 64px 25px 0;
  }
}
.lead_block .trolley_wrap {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  translate: -50% -100%;
  top: 0;
  left: 50%;
  z-index: 1;
}
.lead_block .trolley_wrap #motionPath {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.lead_block .trolley_wrap .trolley {
  position: absolute;
  width: max(100%, 1922px);
  height: 100%;
  translate: -50% 0;
  top: 0;
  left: 50%;
}
.lead_block .trolley_wrap .trolley .motion-path {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .lead_block .trolley_wrap .trolley {
    width: 100%;
  }
  .lead_block .trolley_wrap .trolley .motion-path.sp {
    display: flex;
    align-items: flex-end;
  }
}
.lead_block .trolley_wrap .trolley .trolley_img {
  position: absolute;
  width: min(23.203125vw,297px);
  transform-origin: bottom;
  display: block;
  opacity: 0;
  top: 0;
  left: min(28.281250000000004vw,362px);
}
@media screen and (max-width: 768px) {
  .lead_block .trolley_wrap .trolley .trolley_img {
    width: min(41.06666666666667vw,200px);
    top: -15px;
    left: 0;
  }
}
.lead_block .top_parts {
  width: max(100%, 1922px);
  display: block;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .lead_block .top_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 .sun,
.lead_block .cloud {
  position: absolute;
  z-index: -1;
}

.lead_block .sun {
  top: -6.20151cqw;
  left: calc(50% + 38.179cqw);
  width: 9.11cqw;
}

@media (max-width: 768px) {
  .lead_block .sun {
    top: -58px;
    left: unset;
    right: -12px;
    width: 68px;
  }
}

.lead_block .cloud01 {
  bottom: -9.3992cqw;
  left: calc(50% - 53.876cqw);
  width: 13.566cqw;
}

@media (max-width: 768px) {
  .lead_block .cloud01 {
    display: none;
  }
}

.lead_block .cloud02 {
  bottom: -13.5659cqw;
  left: calc(50% + 30.234cqw);
  width: 24.322cqw;
}

@media (max-width: 768px) {
  .lead_block .cloud02 {
    display: none;
  }
}
/* ↑↑↑ lead_block ↑↑↑ */

/* ↓↓↓ diagram ↓↓↓ */
.diagram {
  width: 100%;
  max-width: 1280px;
  margin: 150px auto 0;
  padding: 0 24px;
  position: relative;
}

@media (max-width: 768px) {
  .diagram {
    margin-top: 65px;
    padding: 0;
  }
}

.diagram .inner {
  max-width: 1232px;
  margin: 0 auto;
  position: relative;
  container-type: inline-size;
}

@media (max-width: 768px) {
  .diagram .inner {
    padding: 0 24px;
    overflow-x: scroll;
  }
}

.diagram .image {
  display: block;
  width: 100%;
  position: relative;
  container-type: inline-size;
}

@media (max-width: 768px) {
  .diagram .image {
    width: 1000px;
  }
}

.diagram .balloon {
  position: absolute;
  width: 8.442cqw;
  aspect-ratio: 104/114;
  background-color: unset;
  border: unset;
  cursor: pointer;
}

.diagram .balloon img {
  transition: scale 0.5s;
  animation: float01 1s linear infinite;
}
@media (min-width: 769px) {
  .diagram .balloon:hover img,
  .diagram:has(.balloon[data-modal="cement"]:hover) .balloon[data-modal="cement"] img {
    scale: 1.18;
    animation-play-state: paused;
  }
}

.diagram .cementman01 {
  top: 0;
  left: 25.974cqw;
}

@media screen and (max-width: 768px) {
  .diagram .cementman01 {
    top: 46px;
  }
}

.diagram .cementman02 {
  top: 15.4221cqw;
  left: 59.25322cqw;
}

@media screen and (max-width: 768px) {
  .diagram .cementman02 {
    top: 202px;
  }
}

.diagram .cementman03 {
  top: 28.00323cqw;
  left: 53.1656cqw;
}

@media screen and (max-width: 768px) {
  .diagram .cementman03 {
    top: 328px;
  }
}

.diagram .cementman04 {
  top: 9.49676cqw;
  left: 87.825cqw;
}

@media screen and (max-width: 768px) {
  .diagram .cementman04 {
    top: 140px;
  }
}

.diagram .cementman05 {
  top: 29.8701cqw;
  left: 75.3247cqw;
}

@media screen and (max-width: 768px) {
  .diagram .cementman05 {
    top: 352px;
  }
}

.diagram .balloon01 {
  top: 0px;
  left: 10.79544cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon01 {
    top: 38px;
  }
}

.diagram .balloon02 {
  top: 13.7987cqw;
  left: 2.27273cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon02 {
    top: 177px;
  }
}

.diagram .balloon03 {
  top: 13.3117cqw;
  left: 22.3214cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon03 {
    top: 180px;
  }
}

.diagram .balloon04 {
  top: 24.9188cqw;
  left: 15.0162cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon04 {
    top: 297px;
  }
}

.diagram .balloon05 {
  top: 33.9286cqw;
  left: 36.9318cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon05 {
    top: 378px;
  }
}

.diagram .balloon06 {
  top: 3.24675cqw;
  left: 61.6883cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon06 {
    top: 72px;
  }
}

.diagram .balloon07 {
  top: 6.98052cqw;
  left: 75cqw;
}

@media screen and (max-width: 768px) {
  .diagram .balloon07 {
    top: 128px;
  }
}

.diagram .balloon08 {
  top: -4.707789cqw;
  left: 40.5844cqw;
}

@media (max-width: 768px) {
  .diagram .balloon08 {
    top: 0;
  }
}
/* ↑↑↑ diagram ↑↑↑ */

/* ↓↓↓ modal ↓↓↓ */
.diagram_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 30;
}
.diagram_modal .modal__bg {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(248, 255, 235, 0.9);
  position: absolute;
}
.diagram_modal .close_btn {
  position: absolute;
  width: 80px;
  height: auto;
  aspect-ratio: 1/1;
  background-color: #000;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  translate: 50% -50%;
  top: 0;
  right: 0;
  z-index: 1;
  transition: background-color 0.3s ease;
}
@media screen and (min-width: 769px) {
  .diagram_modal .close_btn:hover {
    background-color: #FDA486;
  }
}
@media screen and (max-width: 768px) {
  .diagram_modal .close_btn {
    width: 64px;
    translate: unset;
    top: -20px;
    right: -20px;
  }
}
.diagram_modal .close_btn::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  background: url(../img/story/close-icon.svg) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .diagram_modal .close_btn::after {
    width: 16px;
    height: 16px;
  }
}
.diagram_modal .splide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(856px, 100% - 100px);
  max-height: calc(82dvh - 60px);
  height: min(548px, 57.98941798cqw);
  border: 2px solid #000;
  border-radius: 32px;
  background: #fff;
  container-type: inline-size;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide {
    width: 86.4%;
    max-width: 500px;
    height: 78dvh;
    max-height: 78dvh;
    border: 1px solid #000;
    top: 48%;
  }
}
.diagram_modal .splide .splide__arrows {
  position: absolute;
  translate: -50% 0;
  bottom: -24px;
  left: 50%;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .splide__arrows {
    position: absolute;
    translate: -50% 0;
    bottom: -16px;
    left: 50%;
  }
}
.diagram_modal .splide .splide__arrow {
  position: absolute;
  width: 46px;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: #000;
  border: 2px solid #000;
  transform-origin: center;
  opacity: unset;
  transition: background-color ease .3s;
  transform: unset;
}
@media screen and (min-width: 769px) {
  .diagram_modal .splide .splide__arrow:hover {
    background-color: #FDA486;
  }
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .splide__arrow {
    width: 40px;
  }
}
.diagram_modal .splide .splide__arrow.splide__arrow--prev {
  left: -113px;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .splide__arrow.splide__arrow--prev {
    left: -95px;
  }
}
.diagram_modal .splide .splide__arrow.splide__arrow--prev::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 48%;
  left: 50%;
  width: 26px;
  height: 10px;
  background: url(../img/about/modal_arrow.svg) no-repeat;
  background-size: contain;
  transform: scale(-1, 1);
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .splide__arrow.splide__arrow--prev::after {
    left: 44%;
    width: 17px;
    height: 5px;
  }
}
.diagram_modal .splide .splide__arrow.splide__arrow--next {
  right: -113px;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .splide__arrow.splide__arrow--next {
    right: -95px;
  }
}
.diagram_modal .splide .splide__arrow.splide__arrow--next::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 48%;
  left: 50%;
  width: 26px;
  height: 10px;
  background: url(../img/about/modal_arrow.svg) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .splide__arrow.splide__arrow--next::after {
    left: 56%;
    width: 17px;
    height: 5px;
  }
}
.diagram_modal .splide .page-number {
  position: absolute;
  translate: -50% 0;
  bottom: -70px;
  left: 50%;
  font-family: var(--Livvic);
  font-size: 1.6rem;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .page-number {
    font-size: 1.4rem;
    bottom: -60px;
  }
}
.diagram_modal .splide .page-number .current-page {
  font-family: var(--Livvic);
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #FDA486;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

@media screen and (max-width: 768px) {
  .diagram_modal .splide .page-number .current-page {
    font-size: 2.8rem;
  }
}
.diagram_modal .splide .page-number .total-page {
    font-size: 2.0rem;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide .page-number .total-page {
    font-size: 1.6rem;
  }
}
.diagram_modal .inner {
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.diagram_modal .inner::-webkit-scrollbar{
  display: none;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner {
    position: relative;
    height: 100%;
  }
}
.diagram_modal .inner .scroll_wrap {
  display: grid;
  grid-template-columns: 39.4366197183cqw 1fr;
  grid-template-rows: auto auto;
  column-gap: 4.6948356807cqw;
  grid-template-areas:
    "head img"
    "txt img";
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .scroll_wrap {
    display: block;
  }
}
.diagram_modal .inner .text_wrap {
  grid-area: txt;
}
.diagram_modal .splide .splide__track {
  height: 100% !important;
}
.diagram_modal .simplebar-track.simplebar-vertical {
  right: -4.906542056074766cqw !important;
}
@media screen and (max-width: 768px) {
.diagram_modal .simplebar-track.simplebar-vertical {
    right: -14px !important;
  }
}
.diagram_modal .inner .text_wrap::-webkit-scrollbar {
  display: none;
}
.diagram_modal .simplebar-scrollbar {
  z-index: 10;
  pointer-events: auto !important;
}
.diagram_modal .simplebar-scrollbar::before {
  background: #FDA486;
  border-radius: 2px;
  width: 4px;
  margin-left: -2px;
  margin-top: -1px;
}
.diagram_modal .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
.diagram_modal .simplebar-track {
  background: #E7E5E1;
  width: 4px !important;
  border-radius: 2px;
}
.diagram_modal .splide__slide {
  width: 100%;
  padding: 6.542056074766354cqw 7.276995305cqw;
}
@media screen and (max-width: 768px) {
  .diagram_modal .splide__slide {
    padding: 48px 24px 24px;
  }
}
.diagram_modal .splide__slide[data-slide-id="balloon01"] {
  --slide_color: #7DE24F;
}
.diagram_modal .splide__slide[data-slide-id="balloon02"] {
  --slide_color: #FDBBE6;
}
.diagram_modal .splide__slide[data-slide-id="balloon03"] {
  --slide_color: #C9F7F0;
}
.diagram_modal .splide__slide[data-slide-id="balloon04"] {
  --slide_color: #B6E4FF;
}
.diagram_modal .splide__slide[data-slide-id="balloon05"] {
  --slide_color: #CAF555;
}
.diagram_modal .splide__slide[data-slide-id="balloon06"] {
  --slide_color: #FDA486;
}
.diagram_modal .splide__slide[data-slide-id="balloon07"] {
  --slide_color: #FEF589;
}
.diagram_modal .splide__slide[data-slide-id="balloon08"] {
  --slide_color: #C2C0ED;
}
.diagram_modal .splide__slide[data-slide-id="cement"] {
  --slide_color: #E7E5E1;
}
.diagram_modal .inner .ttl_wrap {
  grid-area: head;
  position: relative;
  padding-left: 11.737089201877934cqw;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .ttl_wrap {
    position: relative;
    padding-left: 80px;
  }
}
.diagram_modal .inner .ttl_wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10.3286384976cqw;
  height: 10.3286384976cqw;
  background: url(../img/about/modalttl_icon01.svg) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .ttl_wrap::after {
    width: 64px;
    height: 64px;
  }
}
.diagram_modal .splide__slide[data-slide-id="balloon01"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon02.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon02"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon03.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon03"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon04.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon04"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon05.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon05"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon06.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon06"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon07.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon07"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon08.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .splide__slide[data-slide-id="balloon08"] .inner .ttl_wrap::after {
  background: url(../img/about/modalttl_icon09.svg) no-repeat;
  background-size: contain;
}
.diagram_modal .inner .ttl_wrap .text01 {
  position: relative;
  width: fit-content;
  font-family: var(--Zen_Kaku_New);
  font-size: 1.8779342723cqw;
  font-weight: 500;
  line-height: 1.9;
  display: block;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .ttl_wrap .text01 {
    font-size: 1.6rem;
  }
}
.diagram_modal .inner .ttl_wrap .text01 .txt_line{
  border-bottom: 2px dashed var(--slide_color);
  display: inline-block;
}
.diagram_modal .inner .ttl_wrap .text02 {
  font-family: var(--Zen_Maru);
  font-size: 2.8169014084cqw;
  font-weight: 700;
  margin-top: 2.1126760563cqw;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .ttl_wrap .text02 {
    font-size: 1.8rem;
    margin-top: 6px;
  }
}
.diagram_modal .inner .card {
  display: flex;
  background-color: var(--slide_color);
  margin-top: 3.7558685446cqw;
  column-gap: 1.8779342723cqw;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .card {
    column-gap: 12px;
    margin-top: 30px;
  }
}
.diagram_modal .inner .card + .card {
  margin-top: 0.93896713615cqw;
}
.diagram_modal .inner .card .text01 {
  width: 19.131455399cqw;
  height: auto;
  align-self: stretch;
  background-color: #fff;
  border: 2px solid var(--slide_color);
  border-radius: 3000px 9999px 9999px 3000px;
  display: grid;
  justify-items: center;
  align-items: center;
  font-family: var(--Zen_Kaku_New);
  font-size: 2.112676056cqw;
  font-weight: 700;
  padding: 1.1737089201877933cqw 0;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .card .text01 {
    width: 150px;
    font-size: 1.6rem;
    padding: 10px 0;
  }
}
.diagram_modal .inner .card .text02 {
  font-family: var(--Zen_Kaku_New);
  font-size: 2.112676056cqw;
  font-weight: 700;
  line-height: 1.7777778;
} 
@media screen and (max-width: 768px) {
  .diagram_modal .inner .card .text02 {
    font-size: 1.6rem;
    line-height: 1.4;
  } 
}
.diagram_modal .inner .modal_img {
  grid-area: img;
}
.diagram_modal .inner .text_wrap .modal_img {
  display: none;
  position: absolute;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .modal_img {
    width: 274px;
    margin: 24px auto 0;
  }
}
.diagram_modal .inner .text_wrap .text {
  font-family: var(--Zen_Kaku_New);
  font-size: 1.8779342723cqw;
  font-weight: 500;
  line-height: 2.0;
  margin-top: 1.8779342723cqw;
  text-align: justify;
  word-break: break-all;
}
@media screen and (max-width: 768px) {
  .diagram_modal .inner .text_wrap .text {
    font-size: 1.6rem;
    line-height: 2.0;
    margin-top: 24px;
  }

  .diagram_modal .inner .ttl_wrap + .text {
    margin-top: 385px;
  }
}
/* ↑↑↑ modal ↑↑↑ */

/* ↓↓↓ link_group ↓↓↓ */
.link_group {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  margin-top: min(9.375vw, 120px);
  padding: 0 24px;
}

@media (max-width: 768px) {
  .link_group {
    margin-top: 80px;
  }
}

.link_group .inner {
  max-width: 1032px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .link_group .inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

.link_group .link_wrap {
  width: 48.838%;
  aspect-ratio: 504/160;
  border-radius: 24px;
  background-color: #000;
}

@media (max-width: 768px) {
  .link_group .link_wrap {
    width: 100%;
    max-width: 324px;
    height: 120px;
    aspect-ratio: unset;
    border-radius: 16px;
  }
}

.link_group .link_wrap a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 2px solid #000;
  translate: 0 -4px;
  transition: translate 300ms 0s ease;
  container-type: inline-size;
}

@media (min-width: 769px) {
  .link_group .link_wrap:hover a {
    translate: 0 0;
  }
}

@media (max-width: 768px) {
  .link_group .link_wrap a {
    border-radius: 16px;
    border: 1px solid #000;
  }
}

.link_group .link_wrap .story {
  background-color: var(--story_color);
}

.link_group .link_wrap .recycle {
  background-color: var(--recycle_color);
}

.link_group .link_wrap .ttl {
  position: absolute;
  top: 7.6cqw;
  left: 8cqw;
  width: fit-content;
  font-size: 11.2cqw;
  font-family: var(--Livvic);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: 0.05em;
  color: #fff;
  display: block;
  -webkit-text-stroke: 2px #000;
}

@media (max-width: 768px) {
  .link_group .link_wrap .ttl {
    top: 28px;
    left: 24px;
    font-size: 4.8rem;
    -webkit-text-stroke: 1px #000;
  }
}

.link_group .link_wrap .ttl::after {
  content: '';
  position: absolute;
  z-index: -1;
}

.link_group .link_wrap .story .ttl::after {
  top: -5.4cqw;
  right: -16cqw;
  width: 19.2cqw;
  aspect-ratio: 96/78;
  background: url(../img/about/link_wrap_icon01.svg) no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  .link_group .link_wrap .story .ttl::after {
    top: -12px;
    right: -45px;
    width: 60px;
  }
}

.link_group .link_wrap .recycle .ttl::after {
  top: -5.4cqw;
  right: -12cqw;
  width: 15cqw;
  aspect-ratio: 75/79;
  background: url(../img/about/link_wrap_icon02.svg) no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  .link_group .link_wrap .recycle .ttl::after {
    top: -10px;
    right: -32px;
    width: 41px;
  }
}

.link_group .link_wrap .subttl {
  position: absolute;
  left: 8cqw;
  bottom: 5.4cqw;
  width: fit-content;
  font-size: 3.2cqw;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
}

@media (max-width: 768px) {
  .link_group .link_wrap .subttl {
    left: 24px;
    bottom: 7px;
    font-size: 1.6rem;
  }
}

.link_group .link_wrap .arrow {
  position: absolute;
  top: 50%;
  right: 4.8cqw;
  width: 9.6cqw;
  aspect-ratio: 1/1;
  background-color: #000;
  border-radius: 100%;
  translate: 0 -50%;
}

@media (max-width: 768px) {
  .link_group .link_wrap .arrow {
    right: 8px;
    width: 40px;
  }
}

.link_group .link_wrap .arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -70%;
  width: 5.2cqw;
  aspect-ratio: 26/10;
  background-color: #fff;
  mask-image: url(../img/about/link_arrow.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
}

@media (max-width: 768px) {
  .link_group .link_wrap .arrow::after {
    translate: -50% -70%;
    width: 17px;
    aspect-ratio: 26/12;
  }
}
/* ↑↑↑ link_group ↑↑↑ */

/* ↓↓↓ scroll-hint ↓↓↓ */
.scroll-hint-icon {
  translate: -50% 0;
  top: 48px;
  left: 50%;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 16px;        
  width: 156px;
  height: 120px;
}
.scroll-hint-icon:before {
  width: 24px;
  height: 39px;
  background-image: url(../img/story/scroll-hint-hand.svg);
}
.scroll-hint-icon::after {
  background-image: url(../img/story/scroll-hint-arrow.svg);
}
.scroll-hint-icon-white:before {
  background-image: url(../img/story/scroll-hint-hand.svg);
}
.scroll-hint-icon-white:after {
  background-image: url(../img/story/scroll-hint-arrow.svg);
}
.scroll-hint-text {
  display: block;
  font-family: var(--Zen_Kaku_New);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  color: #fff;
}
/* ↑↑↑ scroll-hint ↑↑↑ */