/* MF Japan — recycle.css = React src/styles/recycle-page.css + recycle-page-1440.css 完全移植
   WP用シム: --color-muted / --color-muted-foreground（WP tokens.css 未定義分）。
   基本トークン(--color-*/--font-*/--space-*/--fs-*/--layout-*) は WP tokens.css で解決。 */
.recycle-page {
  --color-muted: var(--color-surface-paper);
  --color-muted-foreground: var(--color-ink-300);
}

/**
 * 繊維リサイクルを知ろう（/recycle）— Figma MF_Web Textile Recycling
 */

.recycle-page {
  /* Figma .paragraph / .wrapper / .div — 約64% */
  --recycle-stat-muted: color-mix(in srgb, var(--color-ink-900) 55%, transparent); /* #3a4558 */
  --recycle-stat-stack-gap: var(--space-2); /* 8px · Figma .container */
  --recycle-stat-paragraph-h: 152px; /* 152px · .paragraph */
  --recycle-stat-wrapper-top: 30px; /* 30px */
  --recycle-stat-figure-w: 173px; /* 173px · .div2 */
  --recycle-stat-value-h: 6rem; /* 96px · .wrapper */
  --recycle-stat-prefix-size: 2rem; /* 32px */
  --recycle-stat-num-size: 6rem; /* 96px */
  --recycle-stat-suffix-size: 40px; /* 40px */
  --recycle-stat-legend-w: 280px; /* 280px · .container3 */
  --recycle-stat-legend-gap: 6px;
  --recycle-stat-legend-pad-top: 14px;
  --recycle-stat-col-min-w: var(--recycle-stat-legend-w);
  /* Figma .legend / フロー図（2020） */
  --recycle-flow-overseas: #c9d1ec;
  --recycle-flow-domestic: #7a8dd1;
  --recycle-flow-supply: #f5b800;
  --recycle-flow-stock: #e28818;
  --recycle-flow-reuse: #2545c0;
  --recycle-flow-recycle: #18769f;
  --recycle-flow-waste: #0b1326;
  /* Figma .container — これからの繊維リサイクル 2カラム */
  --recycle-future-grid-h: 382px;
  --recycle-future-col-w: 510px;
  --recycle-future-col-gap: 60px;
  --recycle-future-copy-gap: 19px;
  /* Figma .recyclepage — 江戸時代（container-parent / container3 = 673px · container4 = 679px） */
  --recycle-edo-col-h: 673px;
  --recycle-edo-copy-w: 579px;
  --recycle-edo-copy-h: 679px;
  --recycle-edo-head-w: 512px;
  --recycle-edo-head-gap: 16px; /* Figma .recyclepage-parent */
  --recycle-edo-body-top: 109.23px; /* Figma .container5 top */
  --recycle-edo-body-inset-r: 23px;
  --recycle-edo-body-gap: 22.8px; /* Figma .container3 gap */
  --recycle-edo-list-pad-top: 1.2px; /* Figma .descriptions */
  --recycle-edo-list-w: 556px;
  --recycle-edo-desc-w: 573px;
  --recycle-edo-eyebrow-track-w: 118.1px; /* Figma .paragraph */
  --recycle-edo-photo-col-w: 619px; /* Figma .container-parent */
  --recycle-edo-photo-gap: 28px; /* Figma .container-parent gap */
  --recycle-edo-photo-w: 619px;
  --recycle-edo-photo-h: 320px;
  --recycle-edo-copy-panel-w: 700px; /* Figma 右カラム */
  --recycle-edo-copy-panel-pl: 24px; /* Figma 右カラム padding-left */
  --recycle-edo-backdrop-w: 701px;
  --recycle-edo-backdrop-h: 765px;
  --recycle-edo-backdrop-top: 0.5px; /* Figma .imagewithfallback-icon */
  --recycle-edo-hero-w: 768px;
  --recycle-edo-hero-h: 432px;
  --recycle-edo-hero-top: 1.23px; /* Figma .n-1-1 */
  --recycle-edo-hero-offset-x: -44px;
  /* 下段街並み — recycle-edo-street.jpg（縦 737×1118 · cover） */
  --recycle-edo-lower-object-position: center 58%;
  --recycle-edo-lower-shift-y: 0%;
  --recycle-edo-lower-scale: 1;
  /* Figma .container — リフォーム / リサイクルコットン 2列 */
  --recycle-futon-cards-h: 586px; /* 586px */
  --recycle-futon-cards-row-h: 539px; /* 539px */
  --recycle-futon-cards-gap: 20px;
  --recycle-futon-cards-pad-y: 24px;
  --recycle-futon-card-img-w: 538px; /* 538px */
  --recycle-futon-card-img-h: 302px; /* 302px */
  --recycle-futon-card-body-pad: 28px 32px;
  --recycle-futon-card-body-gap: 10px;
  --recycle-futon-card-eyebrow-size: 12px; /* lh 17.28 · ls 3px */
  --recycle-futon-card-eyebrow-lh: 17px;
  --recycle-futon-card-eyebrow-ls: 3px;
  --recycle-futon-card-eyebrow-color: var(--color-ink-300); /* #9b9bab 相当 */
  --recycle-futon-card-title-size: 15px;
  --recycle-futon-card-desc-size: 13px;
  --recycle-futon-card-steps-size: 11px;
  --recycle-futon-card-sep-size: 12px;
}

.recycle-page__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.25em;
}

/* ----- PageHero（Figma .pagehero · 378px） ----- */
.page-hero--recycle .page-hero__overlay-v {
  width: 100%;
  height: 100%;
  background: var(--page-hero-overlay-v);
}

/* Figma .container2（単体 export では .container）— 378px 横グラデーション */
.page-hero--recycle .page-hero__overlay-h {
  width: 100%;
  height: 100%;
  background: var(--page-hero-overlay-h);
}

.page-hero--recycle .page-hero__bottom-rule {
  height: 1px;
  background: var(--page-hero-bottom-rule);
}

.page-hero--recycle .page-hero__media-img--recycle {
  inset: auto;
  /* 下寄せ：トリミング位置（微調整） */
  top: clamp(-560px, -70vw, -820px);
  left: -8%;
  right: -19%;
  width: 127%;
  height: clamp(576px, 110vw, 1333px);
  max-width: none;
  object-fit: cover;
  object-position: center 66%;
}

/* 1023px 未満 — 倉庫の左右壁が見えないよう中央をアップ（親は overflow:hidden） */
@media (max-width: 1023px) {
  .page-hero--recycle .page-hero__media-img--recycle {
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center 58%;
    transform: scale(1.16);
    transform-origin: center center;
  }
}

@media (max-width: 767px) {
  .page-hero--recycle .page-hero__media-img--recycle {
    object-position: center 56%;
    transform: scale(1.24);
  }
}


/* ----- 64% 統計（Figma .paragraph > .wrapper > .div） ----- */
.recycle-page .recycle-stat__paragraph {
  position: relative;
  box-sizing: border-box;
  align-self: stretch;
  width: 100%;
  min-height: clamp(6rem, 18vw, var(--recycle-stat-paragraph-h));
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--recycle-stat-prefix-size);
  color: var(--color-ink-900);
}

.recycle-page .recycle-stat__wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--recycle-stat-value-h);
  margin: 0;
}

.recycle-page .recycle-stat__figure {
  position: relative;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  margin: 0;
  color: inherit;
}

/* Figma .b — Noto Sans JP 700 · 32px / ls 2px */
.recycle-page .recycle-stat__prefix {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(24px, calc(19px + 1vw), var(--recycle-stat-prefix-size));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  color: inherit;
}

/* Figma .span — Source Sans 3 900 · 96px */
.recycle-page .recycle-stat__digits {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  font-family: var(--font-num);
  font-size: clamp(52px, calc(40px + 5vw), var(--recycle-stat-num-size));
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: inherit;
}

/* Figma .span2 */
.recycle-page .recycle-stat__digit--6 {
  letter-spacing: -2.8px;
}

/* Figma .span3 */
.recycle-page .recycle-stat__digit--4 {
  letter-spacing: 3px;
}

/* Figma .b2 — 40px / ls -5px */
.recycle-page .recycle-stat__suffix {
  margin: 0;
  font-family: var(--font-num);
  font-size: clamp(28px, calc(22px + 2vw), var(--recycle-stat-suffix-size));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4.8px;
  color: inherit;
}

/* Figma .container2 / .div */
.recycle-page .recycle-stat__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.recycle-page .recycle-stat__label {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.24px;
  color: var(--recycle-stat-muted);
}

/* ----- 共通タイポ（Figma .heading-2 / .enterprisepage3） ----- */
.recycle-page__eyebrow {
  color: var(--color-brand-primary);
}

.recycle-page__eyebrow--orange {
  color: var(--color-brand-accent-orange);
}

.recycle-page__section-title {
  margin: 0;
  font-family: var(--font-en);
  font-size: var(--fs-h2-lg);
  font-weight: 900;
  line-height: 1.5; /* 48px */
  letter-spacing: 0.02125em; /* 0.68px */
  color: var(--color-ink-900);
}

.recycle-page__section-title--md {
  font-family: var(--font-jp);
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  line-height: 1.5; /* 36px */
  letter-spacing: 0.024em;
}

.recycle-page__body {
  margin: 0;
  max-width: none;
  font-family: var(--font-jp);
  font-size: var(--fs-body); /* 14px · Figma .t64 */
  font-weight: 400;
  line-height: 2.14; /* 30px */
  color: var(--color-ink-500);
}

.recycle-page__body--narrow {
  max-width: 45rem; /* 720px */
}

/* ----- CURRENT STATE（Figma .section） ----- */
.recycle-page .recycle-page__current {
  background-color: var(--color-surface-white);
}

/* Figma .section */
.recycle-page .recycle-page__current-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px; /* 18px */
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 40px var(--layout-inline-sm);
  box-sizing: border-box;
  text-align: left;
  font-size: 13px;
  color: var(--color-brand-primary);
  font-family: var(--font-jp);
}

@media (min-width: 768px) {
  .recycle-page .recycle-page__current-inner {
    padding-inline: var(--layout-inline-md);
  }
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__current-inner {
    padding-inline: 56px; /* Figma .section 40px 56px */
  }
}

/* Figma .container-parent */
.recycle-page .recycle-page__current-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: var(--space-4);
  flex-shrink: 0;
  text-align: left;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-brand-primary);
}

/* Figma .container */
.recycle-page .recycle-page__current-eyebrow-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  max-width: 68rem; /* 1088px */
  padding: var(--space-2) 0 0 3px;
}

/* Figma .container2 */
.recycle-page .recycle-page__current-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma .current-state */
.recycle-page .recycle-page__eyebrow--current {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  width: 181px; /* 181px */
  height: 22px; /* 22px */
  margin: 0;
  padding: 0;
  font-family: var(--font-en);
  font-size: inherit;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: 0.171875rem; /* 2.75px */
  text-transform: uppercase;
  color: inherit;
}

/* Figma .heading-2 */
.recycle-page .recycle-page__current-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 45rem; /* 720px */
  font-size: 32px;
  color: var(--color-ink-900);
}

/* Figma .b */
.recycle-page .recycle-page__current-title {
  position: relative;
  flex: 1;
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-jp);
  font-size: inherit;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.02125em; /* 0.68px @ 32px */
  color: inherit;
}

/* Figma .container3 */
.recycle-page .recycle-page__current-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-self: stretch;
  gap: var(--space-10);
  padding-top: 30px;
  box-sizing: border-box;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-ink-900) 55%, transparent); /* #3a4558 相当 */
}

@media (min-width: 768px) {
  .recycle-page .recycle-page__current-grid {
    /* 左列は 64% ブロック分を確保（absolute 子は max-content に効かない） */
    grid-template-columns: minmax(var(--recycle-stat-col-min-w), auto) minmax(0, 1fr);
    grid-template-rows: minmax(0, 259px); /* 259px */
    gap: 70px;
    min-height: 289px; /* 289px */
  }
}

/* Figma .container4 / .container5 */
.recycle-page .recycle-page__current-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: var(--recycle-stat-col-min-w);
  padding: 0 0 6px;
}

/* Figma .container — gap 8px · 12px / #3a4558 */
.recycle-page .recycle-page__current-stat-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--recycle-stat-stack-gap);
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--recycle-stat-muted);
}

/* Figma .container3 — 凡例 */
.recycle-page .recycle-stat__legend {
  list-style: none;
  width: var(--recycle-stat-legend-w);
  max-width: 100%;
  margin: 0;
  padding: var(--recycle-stat-legend-pad-top) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--recycle-stat-legend-gap);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  /* Figma .paragraph — 152px（数値のみ） */
  .recycle-page .recycle-stat__paragraph {
    align-self: stretch;
    height: var(--recycle-stat-paragraph-h);
    min-height: var(--recycle-stat-paragraph-h);
  }

  .recycle-page .recycle-stat__wrapper {
    position: absolute;
    top: var(--recycle-stat-wrapper-top);
    left: 0;
    width: 100%;
    height: var(--recycle-stat-value-h);
  }

  .recycle-page .recycle-stat__figure {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* Figma .container4 */
.recycle-page .recycle-stat__legend-row {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 22px;
  color: var(--recycle-stat-muted);
}

.recycle-page .recycle-stat__legend-text {
  position: relative;
}

.recycle-page .recycle-stat__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.recycle-page .recycle-stat__legend-dot--recycle {
  background-color: var(--recycle-flow-supply);
}

.recycle-page .recycle-stat__legend-dot--reuse {
  background-color: var(--recycle-flow-reuse);
}

.recycle-page .recycle-page__body--current {
  color: var(--color-ink-700);
}

.recycle-page .recycle-page__current-copy {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-bottom: 17px;
}

/* ----- マテリアルフロー（Figma .backgroundborder） ----- */
.recycle-page .recycle-page__flow-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 18px; /* 18px */
  box-sizing: border-box;
  padding: var(--space-6);
  border-radius: 6px;
  background-color: var(--color-surface-white);
  border: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  text-align: left;
  font-family: var(--font-jp);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-ink-900) 88%, var(--color-ink-700)); /* #1a2236 相当 */
}

@media (min-width: 768px) {
  .recycle-page .recycle-page__flow-chart {
    padding: 36px;
  }
}

/* Figma .container */
.recycle-page .recycle-page__flow-chart-head {
  display: flex;
  align-self: stretch;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: space-between;
}

/* Figma .container2 */
.recycle-page .recycle-page__flow-chart-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Figma .b */
.recycle-page .recycle-page__flow-chart-title {
  position: relative;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 23px;
  color: inherit;
}

/* Figma .t66-34 */
.recycle-page .recycle-page__flow-chart-lead {
  position: relative;
  margin: 0;
  align-self: stretch;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 23px;
  color: var(--color-ink-900);
}

/* Figma .container23 / .httpswwwenvgojppolicyp */
.recycle-page .recycle-page__flow-chart-source-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: min(404px, 100%); /* 404px · Figma */
  min-width: 0;
  height: auto;
  min-height: 60px;
  flex-shrink: 0;
  text-align: left;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  color: color-mix(in srgb, var(--color-ink-500) 75%, var(--color-ink-300)); /* #6a7489 相当 */
}

.recycle-page .recycle-page__flow-chart-source {
  margin: 0;
  width: 100%;
  min-width: 0;
  font: inherit;
  color: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.recycle-page .recycle-page__flow-chart-source a {
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.recycle-page .recycle-page__flow-chart-source a:hover {
  color: var(--color-brand-primary);
}

/* Figma .img-2020 + .group-parent */
.recycle-page .recycle-page__flow-diagram,
.recycle-page .recycle-page__flow-img-2020 {
  position: relative;
  align-self: stretch;
  flex-shrink: 0;
  width: 100%;
  min-height: 20px;
  margin: 0;
  overflow: hidden;
  text-align: center;
  font-family: var(--font-en);
  font-size: 15px;
  color: var(--color-ink-900);
}

@media (max-width: 1023px) {
  .recycle-page .recycle-page__flow-diagram,
  .recycle-page .recycle-page__flow-img-2020 {
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

.recycle-page .recycle-page__flow-diagram-img {
  display: block;
  width: 100%;
  max-width: 604px; /* 604px · Figma .group-group */
  min-width: 0;
  height: auto;
  margin: 0 auto;
}

.recycle-page .recycle-page__flow-diagram-rule {
  display: block;
  width: 100%;
  max-width: 938px; /* 938px · Figma .group-icon3 */
  height: 1px;
  margin: 0 auto;
  border: none;
  background-color: var(--color-line-border);
}

.recycle-page .recycle-page__flow-diagram-captions {
  position: relative;
  width: 100%;
  max-width: 579px; /* 579px · Figma .parent */
  min-width: 0;
  height: 24px; /* 24px */
  margin: 0 auto;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.846; /* 24px */
  color: #1a2236;
}

.recycle-page .recycle-page__flow-diagram-captions > span {
  position: absolute;
  top: 0;
  text-align: center;
  white-space: nowrap;
}

.recycle-page .recycle-page__flow-diagram-captions > span:nth-child(1) {
  left: 0;
  width: 18%;
}

.recycle-page .recycle-page__flow-diagram-captions > span:nth-child(2) {
  left: 41%;
  width: 16%;
}

.recycle-page .recycle-page__flow-diagram-captions > span:nth-child(3) {
  left: 80%;
  width: 20%;
}

@media (max-width: 639px) {
  .recycle-page .recycle-page__flow-diagram-captions {
      max-width: 604px;
      height: 24px;
    }

  .recycle-page .recycle-page__flow-diagram-captions > span {
    font-size: 11px;
  }
}

@media (max-width: 425px) {
  .recycle-page .recycle-page__flow-diagram-captions > span {
    font-size: 7.5px;
  }
}
/* Figma .legend */
.recycle-page .recycle-page__flow-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 22px));
  column-gap: 18px;
  row-gap: 6px;
  box-sizing: border-box;
  align-self: stretch;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
  font-family: inherit;
  font-size: 12px;
  color: inherit;
}

@media (min-width: 640px) {
  .recycle-page .recycle-page__flow-legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 22px); /* 22px */
    min-height: 51px; /* 51px */
  }

  .recycle-page .recycle-page__flow-legend-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .recycle-page .recycle-page__flow-legend-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  /* Figma DOM順: 海外, 国内, リユース, 国内新規供給, 在庫, リサイクル, 廃棄 */
  .recycle-page .recycle-page__flow-legend-item:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
  }

  .recycle-page .recycle-page__flow-legend-item:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
  }

  .recycle-page .recycle-page__flow-legend-item:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
  }

  .recycle-page .recycle-page__flow-legend-item:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }

  .recycle-page .recycle-page__flow-legend-item:nth-child(7) {
    grid-column: 4;
    grid-row: 2;
  }
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__flow-diagram {
    min-height: 423px; /* 423px · Figma .img-2020 */
    padding-top: 83px; /* 83px · Figma .group-parent top */
    box-sizing: border-box;
  }

  .recycle-page .recycle-page__flow-diagram-img {
    margin-bottom: 0;
  }
}

/* Figma .container3–9 */
.recycle-page .recycle-page__flow-legend-item {
  position: relative;
  min-height: 22px; /* 22px */
  min-width: 0;
}

.recycle-page .recycle-page__flow-legend-swatch {
  position: absolute;
  top: 6px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.recycle-page .recycle-page__flow-legend-text {
  position: absolute;
  top: 0px;
  left: 20px;
  display: flex;
  align-items: center;
  min-height: 22px; /* 22px */
  line-height: 22px;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .recycle-page .recycle-page__flow-legend {
    min-height: 0;
    grid-template-rows: auto;
  }

  .recycle-page .recycle-page__flow-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 22px;
  }

  .recycle-page .recycle-page__flow-legend-swatch,
  .recycle-page .recycle-page__flow-legend-text {
    position: static;
  }

  .recycle-page .recycle-page__flow-legend-text {
    white-space: normal;
  }
}

/* ----- 江戸（Figma .recyclepage） ----- */
.recycle-page .recycle-page__edo {
  background-color: var(--color-surface-white);
}

/* 江戸セクション — モバイルファースト · 1024px+ で Figma 2 列 */
.recycle-page .recycle-page__edo-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  /* 上下パディング：320→1400pxで 48→96px に流体スケール（Figma 80px 基準） */
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  padding-inline: var(--layout-inline-sm);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .recycle-page .recycle-page__edo-layout {
    padding-inline: var(--layout-inline-md);
    gap: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    height: auto;
    min-height: 0;
    padding-inline: var(--layout-inline-lg);
  }
}

/* Figma .container-parent — 673px · gap 28px · 上揃え */
.recycle-page .recycle-page__edo-photo-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--recycle-edo-photo-gap);
  width: 100%;
  max-width: var(--recycle-edo-photo-col-w);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Figma .container / .container-icon */
.recycle-page .recycle-page__edo-photo-frame {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: var(--recycle-edo-photo-h);
  overflow: hidden;
  flex-shrink: 0;
}

/* Figma .imagewithfallback-icon */
.recycle-page .recycle-page__edo-photo-img--backdrop {
  position: absolute;
  top: var(--recycle-edo-backdrop-top);
  left: 0;
  z-index: 0;
  display: block;
  width: var(--recycle-edo-backdrop-w);
  height: var(--recycle-edo-backdrop-h);
  max-width: none;
  object-fit: cover;
  flex-shrink: 0;
}

/* Figma .container2 */
.recycle-page .recycle-page__edo-photo-shade {
  position: absolute;
  top: var(--recycle-edo-backdrop-top);
  left: 0;
  z-index: 1;
  width: var(--recycle-edo-backdrop-w);
  height: var(--recycle-edo-backdrop-h);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

/* Figma .n-1-1 */
.recycle-page .recycle-page__edo-photo-img--hero {
  position: absolute;
  top: var(--recycle-edo-hero-top);
  left: var(--recycle-edo-hero-offset-x);
  z-index: 2;
  display: block;
  width: var(--recycle-edo-hero-w);
  height: var(--recycle-edo-hero-h);
  max-width: none;
  object-fit: cover;
  flex-shrink: 0;
}

/* Figma .container-icon — 下段 320px · 街並み（縦原稿を横枠で cover） */
.recycle-page .recycle-page__edo-photo-frame--lower {
  padding: 0;
  overflow: hidden;
}

.recycle-page .recycle-page__edo-photo-lower {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--recycle-edo-lower-object-position);
  flex-shrink: 0;
  transform: translateY(var(--recycle-edo-lower-shift-y))
    scale(var(--recycle-edo-lower-scale));
  transform-origin: center center;
}

/* 1400px 未満 — 下段街並みを大きく下寄せ（1401px+ は 58% のまま） */
@media (max-width: 1400px) {
  .recycle-page .recycle-page__edo-photo-lower {
    --recycle-edo-lower-object-position: center 82%;
    --recycle-edo-lower-shift-y: 12%;
    --recycle-edo-lower-scale: 1.1;
  }
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-photo-col {
    flex: 619 1 0%; /* Figma 619:700 比で伸縮 */
    width: auto;
    max-width: var(--recycle-edo-photo-col-w); /* 上限 619px */
    min-width: 0;
    height: var(--recycle-edo-col-h);
    min-height: var(--recycle-edo-col-h);
  }
}

@media (max-width: 1023px) {
  /* 写真列 — 画面端までフルブリード（左右の余白を出さない） */
  .recycle-page .recycle-page__edo-photo-col {
    gap: var(--space-3);
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    margin-inline: calc(50% - 50vw);
  }

  .recycle-page .recycle-page__edo-photo-frame {
    align-self: stretch;
    width: 100%;
    height: clamp(6rem, 22vw, 9rem);
    overflow: hidden;
  }

  .recycle-page .recycle-page__edo-photo-img--backdrop,
  .recycle-page .recycle-page__edo-photo-shade {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .recycle-page .recycle-page__edo-photo-img--hero {
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    transform: scale(1.06);
    transform-origin: center center;
  }

  .recycle-page .recycle-page__edo-photo-img--backdrop {
    transform: scale(1.04);
    transform-origin: center center;
  }

  .recycle-page .recycle-page__edo-photo-lower {
    --recycle-edo-lower-object-position: center 92%;
    --recycle-edo-lower-shift-y: 18%;
    --recycle-edo-lower-scale: 1.14;
  }

  .recycle-page .recycle-page__edo-photo-frame [role="img"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .recycle-page .recycle-page__edo-photo-img--hero,
  .recycle-page .recycle-page__edo-photo-img--backdrop {
    object-fit: cover;
    object-position: center;
  }
}

/* タブレット(768〜1023): 全幅(約672px)に対し 144px だと横長すぎて低いので、
   1024〜1399px と同等の高さに引き上げてバランスを取る */
@media (min-width: 768px) and (max-width: 1023px) {
  .recycle-page .recycle-page__edo-photo-frame {
    height: clamp(220px, 32vw, 320px);
  }
}

/* スマホ(320〜767): 写真エリアの高さ・トリミング */
@media (max-width: 767px) {
  .recycle-page .recycle-page__edo-layout {
    gap: var(--space-6);
  }

  .recycle-page .recycle-page__edo-photo-frame {
    height: clamp(11rem, 52vw, 16rem);
  }

  .recycle-page .recycle-page__edo-photo-frame--upper .recycle-page__edo-photo-img--hero {
    object-position: 50% 22%;
  }

  .recycle-page .recycle-page__edo-photo-lower {
    --recycle-edo-lower-object-position: center 100%;
    --recycle-edo-lower-shift-y: 24%;
    --recycle-edo-lower-scale: 1.18;
  }

  .recycle-page .recycle-page__edo-head-stack {
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .recycle-page .recycle-page__edo-title-wrap {
    height: auto;
    min-height: 0;
    margin-bottom: var(--space-1);
  }

  .recycle-page .recycle-page__edo-title {
    position: static;
    font-size: var(--fs-h2);
    line-height: 1.35;
  }

  .recycle-page .recycle-page__edo-body {
    margin-top: 0;
    padding-top: var(--space-2);
  }
}

/* Figma .container — 673px · pl 24 · テキスト列ラッパー */
.recycle-page .recycle-page__edo-copy {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--color-brand-accent-orange);
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-copy {
    flex: 700 1 0%; /* Figma 619:700 比で伸縮 */
    width: auto;
    max-width: var(--recycle-edo-copy-panel-w); /* 上限 700px */
    min-width: 0;
    height: auto; /* 本文量に応じて伸縮（固定高で見切れていたのを解消） */
    min-height: var(--recycle-edo-col-h);
    padding: 0 0 0 var(--recycle-edo-copy-panel-pl);
  }
}

@media (max-width: 1023px) {
  .recycle-page .recycle-page__edo-copy {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: var(--space-8);
  }

  .recycle-page .recycle-page__edo-copy-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  .recycle-page .recycle-page__edo-head-stack {
    position: static;
    width: 100%;
    max-width: 100%;
    gap: var(--space-4);
  }

  .recycle-page .recycle-page__edo-body {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    gap: var(--space-6);
  }

  .recycle-page .recycle-page__edo-eyebrow-block {
    height: auto;
    min-height: 18px;
  }

  .recycle-page .recycle-page__edo-eyebrow-wrap {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  .recycle-page .recycle-page__edo-title-wrap {
    height: auto;
    min-height: 0;
  }

  .recycle-page .recycle-page__edo-title {
    position: relative;
    top: 0;
    font-size: var(--fs-h2-lg);
    line-height: 1.5;
  }

  .recycle-page .recycle-page__edo-term-text {
    font-size: var(--fs-body-m);
    line-height: var(--fs-body-lh-m);
  }

  .recycle-page .recycle-page__edo-list {
    width: 100%;
    max-width: 100%;
    padding-top: var(--space-2);
  }

  .recycle-page .recycle-page__edo-item {
    width: 100%;
    padding: var(--space-5) 0;
  }

  .recycle-page .recycle-page__edo-item-desc {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .recycle-page .recycle-page__edo-item-details--last,
  .recycle-page .recycle-page__edo-item-details--last .recycle-page__edo-item-desc {
    width: 100%;
    max-width: 100%;
  }
}

/* Figma .container2 — 1024px+ で 679×579 */
.recycle-page .recycle-page__edo-copy-inner {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-copy-inner {
    width: 100%;
    max-width: var(--recycle-edo-copy-w); /* 上限 579px */
    min-width: 0;
    height: auto; /* 本文量に応じて伸縮 */
    min-height: var(--recycle-edo-copy-h);
  }
}

/* Figma .recyclepage-parent */
.recycle-page .recycle-page__edo-head-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--recycle-edo-head-gap);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-head-stack {
    position: static; /* body と共に通常フロー化（絶対配置の重なりを解消） */
    width: var(--recycle-edo-head-w);
  }
}

/* Figma .recyclepage */
.recycle-page .recycle-page__edo-eyebrow-block {
  display: flex;
  align-self: stretch;
  align-items: center;
  height: 18px;
  padding: 0 3px;
  box-sizing: border-box;
}

/* Figma .paragraph — 幅固定は 1024px+ のみ */
.recycle-page .recycle-page__edo-eyebrow-wrap {
  display: flex;
  align-items: flex-start;
  width: auto;
  max-width: 100%;
  min-height: 18px;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-eyebrow-wrap {
    width: var(--recycle-edo-eyebrow-track-w);
    height: 18px;
  }
}

/* Figma .edo-era-wisdom */
.recycle-page .recycle-page__edo-eyebrow {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1.8px;
  color: inherit;
}

/* Figma .recyclepage2 */
.recycle-page .recycle-page__edo-title-wrap {
  position: relative;
  align-self: stretch;
  height: auto;
  min-height: 0;
  font-family: var(--font-jp);
  font-size: 32px;
  color: var(--color-ink-900);
}

/* Figma .b — モバイルは static · 1024px+ で absolute */
.recycle-page .recycle-page__edo-title {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  font-family: var(--font-jp);
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-title-wrap {
    height: 48px;
  }

  .recycle-page .recycle-page__edo-title {
    position: absolute;
    top: -4px;
    line-height: 48px;
  }
}

/* Figma .container3 — 本文 + descriptions */
.recycle-page .recycle-page__edo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--recycle-edo-body-gap);
  width: 100%;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-ink-500);
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-body {
    position: static; /* 絶対配置をやめ通常フロー化（固定高内に閉じ込めず伸ばす） */
    /* Figma の body 開始位置 109.23px を、固定高の head-stack（eyebrow18 + gap16 + title48 = 82px）からの余白で再現 */
    margin-top: calc(var(--recycle-edo-body-top) - 18px - var(--recycle-edo-head-gap) - 48px);
    width: calc(100% - var(--recycle-edo-body-inset-r));
    min-width: 0;
  }
}

/* Figma .term（本文段落） */
.recycle-page .recycle-page__edo-term {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.recycle-page .recycle-page__edo-term-text {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 30px;
  color: inherit;
}

/* Figma .descriptions */
.recycle-page .recycle-page__edo-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--recycle-edo-list-pad-top) 0 0;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--color-ink-900);
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-list {
    width: 100%;
    max-width: var(--recycle-edo-list-w); /* 上限 556px */
    min-width: 0;
  }
}

/* Figma .horizontalborder / .border */
.recycle-page .recycle-page__edo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 3px;
  padding: 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
}

.recycle-page .recycle-page__edo-item--last {
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
}

.recycle-page .recycle-page__edo-item-term {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

/* Figma .b2 */
.recycle-page .recycle-page__edo-item-title {
  align-self: stretch;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 26px;
  color: inherit;
}

/* Figma .details */
.recycle-page .recycle-page__edo-item-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  color: var(--color-ink-500);
}

/* Figma .div3 */
.recycle-page .recycle-page__edo-item-desc {
  display: block;
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.75;
  color: inherit;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__edo-item-desc {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    width: 100%;
    max-width: var(--recycle-edo-desc-w);
    min-width: 0;
    line-height: 26px;
  }

  .recycle-page .recycle-page__edo-item-details--last {
    width: 100%;
    max-width: var(--recycle-edo-list-w);
    min-width: 0;
  }

  .recycle-page .recycle-page__edo-item-details--last .recycle-page__edo-item-desc {
    width: 100%;
    max-width: var(--recycle-edo-list-w);
    min-width: 0;
  }
}

/* ----- ふとん（Figma .recyclepage） ----- */
.recycle-page .recycle-page__futon {
  background-color: var(--color-surface-paper);
}

/* Figma .recyclepage — padding 99/80/100 · 1200 内コンテンツ */
.recycle-page .recycle-page__futon-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(4rem, 7vw, 99px) clamp(4rem, 7vw, 100px);
  text-align: left;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-brand-primary);
}

/* Figma .container */
.recycle-page .recycle-page__futon-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
  width: 100%;
  max-width: 75rem; /* 1200px */
  margin-inline: auto;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__futon-inner {
    min-height: 853px; /* 853px */
  }
}

/* Figma .container-parent */
.recycle-page .recycle-page__futon-head-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  font-family: var(--font-en);
}

/* Figma .container2 — 1080px */
.recycle-page .recycle-page__futon-eyebrow-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1080px;
  padding: 0 0 1px 3px; /* 1px bottom · 3px left */
  box-sizing: border-box;
}

/* Figma .recycling-process */
.recycle-page .recycle-page__futon-eyebrow {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: 0.171875rem; /* 2.75px */
  color: inherit;
}

/* Figma .heading-2 — 1080px */
.recycle-page .recycle-page__futon-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1080px;
  font-family: var(--font-jp);
  font-size: 24px;
  color: var(--color-ink-900);
}

/* Figma .b */
.recycle-page .recycle-page__futon-title {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: var(--font-jp);
  font-size: inherit;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.03625rem; /* 0.58px */
  color: inherit;
}

/* Figma .container3 */
.recycle-page .recycle-page__futon-lead-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 45rem; /* 720px */
  padding: 8px 0 1px; /* 8px top · 1px bottom */
  box-sizing: border-box;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-ink-500) 95%, var(--color-ink-300));
}

.recycle-page .recycle-page__futon-lead {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 30px;
  color: inherit;
}

/* Figma .container — 2列グリッド · 586px */
.recycle-page .recycle-page__futon-cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  column-gap: var(--recycle-futon-cards-gap);
  row-gap: 1px;
  width: 100%;
  max-width: 1098px; /* 1098px */
  padding-block: var(--recycle-futon-cards-pad-y);
  box-sizing: border-box;
  text-align: left;
  font-family: var(--font-jp);
  font-size: 10px;
  color: var(--recycle-futon-card-eyebrow-color);
}

/* 768–1023px は1カラム（固定586px高＋2列だとステップ行がはみ出す） */
@media (min-width: 768px) and (max-width: 1023px) {
  .recycle-page .recycle-page__futon-cards {
    row-gap: var(--space-8);
  }

  .recycle-page .recycle-page__futon-card-media {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 538 / 302;
  }

  .recycle-page .recycle-page__futon-card-img {
    width: 100%;
    max-width: none;
    height: 100%;
    transform: scale(1.18);
  }

  .recycle-page .recycle-page__futon-card:nth-child(2) .recycle-page__futon-card-img {
    transform: scale(1.28);
    object-position: center 42%;
  }
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__futon-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: var(--recycle-futon-cards-row-h) 1fr;
    align-items: stretch;
    height: var(--recycle-futon-cards-h);
    min-height: var(--recycle-futon-cards-h);
  }
}

/* Figma .background / .background3 */
.recycle-page .recycle-page__futon-card {
  container-type: inline-size;
  container-name: recycle-futon-card;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  min-width: 0;
  background-color: var(--color-surface-white);
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .recycle-page .recycle-page__futon-card {
    height: auto;
    padding-bottom: var(--space-8);
  }
}

/* Figma .background2 — 538×302 */
.recycle-page .recycle-page__futon-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--recycle-futon-card-img-w);
  height: var(--recycle-futon-card-img-h);
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__futon-card-media {
    max-width: none;
    width: 100%;
  }
}

/* Figma .mask-group-icon — cover + 拡大 */
.recycle-page .recycle-page__futon-card-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.18);
  transform-origin: center center;
  flex-shrink: 0;
}

/* リサイクルコットンカード */
.recycle-page .recycle-page__futon-card:nth-child(2) .recycle-page__futon-card-img {
  transform: scale(1.28);
  object-position: center 42%;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__futon-card-img {
    width: 100%;
    max-width: none;
  }
}

/* Figma .border */
.recycle-page .recycle-page__futon-card-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--recycle-futon-card-body-gap);
  width: 100%;
  min-height: 0;
  padding: var(--recycle-futon-card-body-pad);
  box-sizing: border-box;
  border-right: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  text-align: left;
  font-family: var(--font-jp);
  font-size: 10px;
  color: var(--recycle-futon-card-eyebrow-color);
}

/* Figma .container2 / .reform */
.recycle-page .recycle-page__futon-card-eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-family: var(--font-en);
}

.recycle-page .recycle-page__futon-card-eyebrow {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: var(--font-en);
  font-size: var(--recycle-futon-card-eyebrow-size);
  font-weight: 600;
  line-height: var(--recycle-futon-card-eyebrow-lh);
  letter-spacing: var(--recycle-futon-card-eyebrow-ls);
  text-transform: uppercase;
  color: var(--recycle-futon-card-eyebrow-color);
}

/* Figma .heading-3 / .b */
.recycle-page .recycle-page__futon-card-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-family: var(--font-jp);
  font-size: var(--recycle-futon-card-title-size);
  color: var(--color-ink-900);
}

.recycle-page .recycle-page__futon-card-title {
  align-self: stretch;
  margin: 0;
  font: inherit;
  color: inherit;
}

.recycle-page .recycle-page__futon-card-title-text {
  display: block;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 36px;
  color: inherit;
}

/* Figma .container3 / .div */
.recycle-page .recycle-page__futon-card-desc-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 1px 0 10px;
  font-family: var(--font-jp);
  font-size: var(--recycle-futon-card-desc-size);
  color: var(--color-muted-foreground);
}

.recycle-page .recycle-page__futon-card-desc {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 26px;
  color: inherit;
}

/* Figma .horizontalborder */
.recycle-page .recycle-page__futon-card-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 10px;
  row-gap: var(--space-2);
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  font-family: var(--font-jp);
  font-size: var(--recycle-futon-card-steps-size);
  color: var(--color-ink-900);
}

/* 〜1023px（768px含む）— プロセス行を必ず折り返し、長いラベルもカード内に収める */
@media (max-width: 1023px) {
  .recycle-page .recycle-page__futon-card-steps {
    flex-wrap: wrap;
    column-gap: var(--space-2);
    row-gap: var(--space-2);
  }

  .recycle-page .recycle-page__futon-card-steps-label-wrap,
  .recycle-page .recycle-page__futon-card-steps-sep-wrap {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .recycle-page .recycle-page__futon-card-steps-label {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 1024px+ 2列：基本は1行。カード幅が狭いときだけ折り返し */
@media (min-width: 1024px) {
  .recycle-page .recycle-page__futon-card-steps {
    flex-wrap: nowrap;
    row-gap: 0;
  }
}

@container recycle-futon-card (max-width: 520px) {
  .recycle-page .recycle-page__futon-card-steps {
    flex-wrap: wrap;
    column-gap: var(--space-2);
    row-gap: var(--space-2);
  }
}

/* Figma .container4 / .div2 */
.recycle-page .recycle-page__futon-card-steps-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

.recycle-page .recycle-page__futon-card-steps-label {
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 900;
  line-height: 20px;
  color: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Figma .container5 / .div3 */
.recycle-page .recycle-page__futon-card-steps-sep-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  opacity: 0.3;
  font-size: var(--recycle-futon-card-sep-size);
}

.recycle-page .recycle-page__futon-card-steps-sep {
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 22px;
  color: inherit;
}

/* ----- ふとん内コットン CTA（Figma .container19） ----- */
.recycle-page .recycle-page__futon-promo {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  font-size: 14px;
}

/* Figma .container19 — 360px · shadow · border */
.recycle-page .recycle-page__futon-promo-panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  background-color: var(--color-surface-white);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 12px 40px color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
}

.recycle-page .recycle-page__futon-promo-visual {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background-color: var(--color-surface-paper);
}

.recycle-page .recycle-page__futon-promo-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.26);
  transform-origin: center center;
}

.recycle-page .recycle-page__futon-promo-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3));
  pointer-events: none;
}

.recycle-page .recycle-page__futon-promo-copy {
  padding: var(--space-10) var(--space-6);
  background-color: var(--color-surface-white);
}

/* Figma .frame-parent — 512×215 · 縦スタック */
.recycle-page .recycle-page__futon-promo-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 32rem; /* 512px */
  box-sizing: border-box;
}

/* Figma .container-parent — gap 12px */
.recycle-page .recycle-page__futon-promo-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3); /* 12px */
  min-width: 0;
  width: 100%;
}

/* Figma .container2 — 17px · padding 0 3px */
.recycle-page .recycle-page__futon-promo-eyebrow-wrap {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 17px;
  padding: 0 3px;
}

/* Figma .wiping-cloth — 11px · 800 · letter-spacing 1.65px */
.recycle-page .recycle-page__futon-promo-eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  letter-spacing: 0.103125rem;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

/* Figma .heading-3 .b — 24px · line-height 42px */
.recycle-page .recycle-page__futon-promo-title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.75; /* 42px */
  color: var(--color-ink-900);
}

/* Figma .paragraph — 512×58.8 */
.recycle-page .recycle-page__futon-promo-desc {
  margin: var(--space-5) 0 0;
  width: 100%;
  max-width: 32rem;
  min-height: 59px; /* 59px */
  color: var(--color-ink-500);
}

.recycle-page .recycle-page__futon-promo-desc p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: inherit;
}

.recycle-page .recycle-page__futon-promo-desc p + p {
  margin-top: 0;
}

/* Figma .link — 152×37 */
.recycle-page .recycle-page__futon-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  width: 152px;
  min-width: 152px;
  height: 37px;
  padding: 8px 20px;
  box-sizing: border-box;
  background-color: var(--color-brand-primary);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: var(--color-surface-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.recycle-page .recycle-page__futon-promo-cta:hover {
  background-color: var(--color-ink-900);
}

.recycle-page .recycle-page__futon-promo-cta:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .recycle-page .recycle-page__futon-promo-panel {
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    min-height: 360px;
  }

  .recycle-page .recycle-page__futon-promo-visual {
    min-height: 100%;
  }

  .recycle-page .recycle-page__futon-promo-photo {
    min-height: 100%;
    height: 100%;
  }
}

/* タブレット(768〜1023): 画像540px列だとテキスト列が約130pxしか残らず
   1〜3文字で折り返して崩れる。モバイル同様に縦積みへ統一する */
@media (min-width: 768px) and (max-width: 1023px) {
  .recycle-page .recycle-page__futon-promo-panel {
    display: block;
    min-height: 0;
  }

  .recycle-page .recycle-page__futon-promo-visual {
    min-height: clamp(240px, 36vw, 340px);
  }

  .recycle-page .recycle-page__futon-promo-photo {
    height: 100%;
  }
}

@media (min-width: 1024px) {
  /* Figma .container — 1240×360（24 + 540 + 60 + 512 + 余白） */
  .recycle-page .recycle-page__futon-promo-panel {
    height: auto; /* 本文量に応じて伸縮（固定高+overflow:hidden での見切れを解消） */
    min-height: 360px;
    display: grid;
    grid-template-columns: 24px minmax(0, 540px) 60px minmax(0, 32rem) minmax(0, 1fr);
    grid-template-rows: 24px minmax(313px, auto) 23px;
  }

  .recycle-page .recycle-page__futon-promo-visual {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    height: 313px;
  }

  /* Figma .frame-parent — left 624px · top 73px */
  .recycle-page .recycle-page__futon-promo-copy {
    grid-column: 4;
    grid-row: 2;
    align-self: start;
    margin-top: 49px; /* 73 − 24 */
    padding: 0;
    width: 100%;
    max-width: 32rem;
    background-color: var(--color-surface-white);
  }

  .recycle-page .recycle-page__futon-promo-frame {
    min-height: 215px;
  }

  .recycle-page .recycle-page__futon-promo-desc {
    margin-top: 34px; /* 98.75 − (16.5 + 12 + 42) */
    min-height: 59px;
  }

  .recycle-page .recycle-page__futon-promo-cta {
    margin-top: var(--space-5);
  }
}

@media (max-width: 1023px) {
  .recycle-page .recycle-page__futon-promo-title {
    font-size: var(--fs-h3-m);
    line-height: 1.5;
  }
}

/* ----- CO₂（Figma .recyclepage） ----- */
.recycle-page .recycle-page__co2 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-surface-paper);
  border-top: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  padding: clamp(4rem, 7vw, 99px) clamp(var(--space-6), 6vw, 100px) clamp(4rem, 7vw, 100px);
  text-align: left;
  font-family: var(--font-jp);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-ink-500) 95%, var(--color-ink-300));
}

/* Figma .container */
.recycle-page .recycle-page__co2-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: clamp(0px, 4vw, 60px);
  box-sizing: border-box;
}

/* Figma .container-parent */
.recycle-page .recycle-page__co2-head-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4); /* 16px */
  width: 100%;
  text-align: left;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-brand-primary);
}

/* Figma .container — 1080px */
.recycle-page .recycle-page__co2-eyebrow-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1080px;
  padding: 0 0 0 3px;
  box-sizing: border-box;
}

/* Figma .resource-co */
.recycle-page .recycle-page__co2-eyebrow {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: 0.171875rem; /* 2.75px */
  color: inherit;
}

/* Figma .heading-2 */
.recycle-page .recycle-page__co2-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1080px;
  font-family: var(--font-jp);
  font-size: 32px;
  color: var(--color-ink-900);
}

/* Figma .co */
.recycle-page .recycle-page__co2-title {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.03625rem; /* 0.58px */
  color: inherit;
}

/* Figma .container3 */
.recycle-page .recycle-page__co2-lead-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 45rem;
  padding-top: 8px; /* 8px */
  box-sizing: border-box;
  font-size: 14px;
  color: inherit;
}

/* Figma .co2 */
.recycle-page .recycle-page__co2-lead {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 30px;
  color: inherit;
}

/* Figma .container4 */
.recycle-page .recycle-page__co2-cards-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  padding-block: 25px;
  gap: 0;
}

/* 横並びは 1024px 以上のみ。768〜1023 は縦積み（max-width:1023 で
   card が width:100% のため、横並びにすると 2 枚目が画面外に出る） */
@media (min-width: 1024px) {
  .recycle-page .recycle-page__co2-cards-row {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Figma .container6 — カード間 60px */
.recycle-page .recycle-page__co2-cards-gap {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__co2-cards-gap {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: 60px;
  }
}

/* Figma .backgroundborder */
.recycle-page .recycle-page__co2-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 12px; /* 12px */
  padding: 48px;
  background-color: var(--color-surface-white);
  border: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  box-sizing: border-box;
}

/* Figma .container5 / .b */
.recycle-page .recycle-page__co2-card-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.recycle-page .recycle-page__co2-card-label {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: var(--font-jp);
  font-size: inherit;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-ink-900);
}

/* Figma .paragraph */
.recycle-page .recycle-page__co2-card-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: stretch;
  gap: 4px;
  padding-top: 8px; /* 8px */
  font-size: 20px;
  color: var(--color-ink-900);
}

/* Figma .div */
.recycle-page .recycle-page__co2-card-prefix {
  position: relative;
  font-family: var(--font-en);
  font-size: inherit;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: -0.1215rem; /* -2.43px @ 20px */
  color: inherit;
}

/* Figma .div2 */
.recycle-page .recycle-page__co2-card-num {
  position: relative;
  font-family: var(--font-num);
  font-size: clamp(36px, calc(28px + 2vw), 60px);
  font-weight: 800;
  line-height: 60px;
  letter-spacing: -0.0405em;
  color: inherit;
  font-variant-numeric: lining-nums;
}

/* Figma .kg */
.recycle-page .recycle-page__co2-card-unit {
  position: relative;
  font-family: var(--font-jp);
  font-size: 14px; /* 14px */
  font-weight: 500;
  line-height: 26px;
  color: var(--color-ink-300);
}

/* Figma .ml255 */
.recycle-page .recycle-page__co2-card-note {
  position: relative;
  font-family: var(--font-jp);
  font-size: 10px;
  line-height: 34px;
  color: color-mix(in srgb, var(--color-ink-500) 80%, var(--color-ink-300));
}

/* Figma .co4 */
.recycle-page .recycle-page__co2-card-suffix {
  margin: 0;
  position: relative;
  font-family: var(--font-jp);
  font-size: inherit;
  font-weight: 400;
  line-height: 26px;
  color: inherit;
}

/* Figma .httpswwwenvgojppolicys */
.recycle-page .recycle-page__co2-source {
  position: relative;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 10px;
  line-height: 20px;
  color: color-mix(in srgb, var(--color-ink-500) 80%, var(--color-ink-300));
}

.recycle-page .recycle-page__co2-source a {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.recycle-page .recycle-page__co2-source a:hover {
  color: var(--color-brand-primary);
}

@media (max-width: 1023px) {
  .recycle-page .recycle-page__co2-title-wrap {
    font-size: var(--fs-h2-lg);
  }

  .recycle-page .recycle-page__co2-title {
    line-height: 1.5;
  }

  .recycle-page .recycle-page__co2-cards-row {
    gap: var(--space-6);
  }

  .recycle-page .recycle-page__co2-card {
    flex: none;
    width: 100%;
  }
}

/* ----- これから（Figma .recyclepage） ----- */
.recycle-page .recycle-page__future {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  padding: clamp(4rem, 7vw, 99px) clamp(var(--space-6), 6vw, 100px) clamp(4rem, 7vw, 100px);
  text-align: left;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-brand-primary);
  background-color: var(--color-surface-white);
}

/* Figma .container */
.recycle-page .recycle-page__future-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: clamp(0px, 4vw, 60px);
  box-sizing: border-box;
}

/* Figma .container-parent */
.recycle-page .recycle-page__future-head-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4); /* 16px */
  width: 100%;
  text-align: left;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-brand-primary);
}

/* Figma .container — 1080px */
.recycle-page .recycle-page__future-eyebrow-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1080px;
  padding: 0 0 0 3px;
  box-sizing: border-box;
}

/* Figma .future-vision */
.recycle-page .recycle-page__future-eyebrow {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: 0.171875rem; /* 2.75px */
  color: inherit;
}

/* Figma .heading-2 */
.recycle-page .recycle-page__future-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1080px;
  font-family: var(--font-jp);
  font-size: 32px;
  color: var(--color-ink-900);
}

/* Figma .b */
.recycle-page .recycle-page__future-title {
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.03625rem; /* 0.58px */
  color: inherit;
}

/* Figma .container */
.recycle-page .recycle-page__future-body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  align-self: stretch;
  gap: var(--space-10);
  width: 100%;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-muted-foreground);
}

/* 2カラムは 1024px 以上のみ。768〜1023 は写真列が約100pxに潰れるため縦積み */
@media (min-width: 1024px) {
  .recycle-page .recycle-page__future-body {
    grid-template-columns: var(--recycle-future-col-w) minmax(0, 1fr);
    column-gap: var(--recycle-future-col-gap);
    height: var(--recycle-future-grid-h);
    min-height: var(--recycle-future-grid-h);
    grid-template-rows: var(--recycle-future-grid-h);
  }
}

/* Figma .container2 */
.recycle-page .recycle-page__future-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--recycle-future-copy-gap);
  width: 100%;
  max-width: var(--recycle-future-col-w);
  padding-bottom: 60px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__future-copy {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Figma .container3 / .container4 */
.recycle-page .recycle-page__future-copy-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

/* Figma .div */
.recycle-page .recycle-page__future-copy-text {
  align-self: stretch;
  margin: 0;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 30px;
  color: inherit;
}

/* Figma .background */
.recycle-page .recycle-page__future-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--recycle-future-grid-h);
  min-height: var(--recycle-future-grid-h);
  overflow: hidden;
  background-color: var(--color-muted);
}

@media (min-width: 1024px) {
  .recycle-page .recycle-page__future-media {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Figma .container */
.recycle-page .recycle-page__future-media-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Figma .container-child */
.recycle-page .recycle-page__future-media-img {
  position: relative;
  display: block;
  width: 100%;
  height: var(--recycle-future-grid-h);
  max-width: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .recycle-page .recycle-page__future-title-wrap {
    font-size: var(--fs-h2-lg);
  }

  .recycle-page .recycle-page__future-title {
    line-height: 1.5;
  }

  .recycle-page .recycle-page__future-copy {
    padding-bottom: 0;
  }
}

/* 768〜1023 も縦積み。写真は固定382pxではなく自然な比率にする */
@media (max-width: 1023px) {
  .recycle-page .recycle-page__future-media {
    height: auto;
    min-height: 0;
  }

  .recycle-page .recycle-page__future-media-img {
    width: 100%;
    height: auto;
    aspect-ratio: 510 / 382;
  }
}

/* ----- CTA（Figma .enterprisepage） ----- */
.recycle-page .recycle-page__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28rem, 50vw, 559px); /* 559px */
  padding: var(--space-24) var(--space-6);
  overflow: hidden;
  text-align: center;
}

.recycle-page .recycle-page__cta-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.recycle-page .recycle-page__cta-media-img {
  position: absolute;
  top: -168px;
  left: 0;
  right: -1%;
  width: 101%;
  height: 944px;
  max-width: none;
  object-fit: cover;
}

.recycle-page .recycle-page__cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: color-mix(in srgb, var(--color-ink-900) 55%, transparent);
  pointer-events: none;
}

.recycle-page .recycle-page__cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 476px; /* 476px · Figma 見出し .b と同幅 */
  margin: 0 auto;
}

.recycle-page .recycle-page__cta-eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 900;
  line-height: 17px;
  letter-spacing: 0.25em; /* 2.75px */
  text-transform: uppercase;
  color: var(--color-surface-white);
}

.recycle-page .recycle-page__cta-title {
  margin: 0 0 17px;
  display: inline-block;
  box-sizing: border-box;
  width: min(476px, 100%); /* 476px · Figma .b */
  min-height: 90px; /* Figma 2行 × 45px */
  font-family: var(--font-jp);
  font-size: var(--fs-h2-md);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--color-ink-inv-900);
}

.recycle-page .recycle-page__cta-lead {
  margin: 0 0 11px;
  width: 100%;
  max-width: 364px; /* 364px */
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: var(--color-ink-inv-700);
}

.recycle-page .recycle-page__cta-rule {
  width: 40px;
  height: 1px;
  margin: 0 auto 40px;
  border: none;
  background-color: color-mix(in srgb, var(--color-surface-white) 20%, transparent);
}

.recycle-page .recycle-page__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 259px;
  height: 54px;
  padding: 15px 42px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-surface-white) 60%, transparent);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.06em; /* 0.78px */
  color: var(--color-ink-inv-900);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

@media (max-width: 480px) {
  .recycle-page .recycle-page__cta-media-img {
    top: -20%;
    width: 100%;
    right: 0;
    height: 140%;
  }

  .recycle-page .recycle-page__cta-title {
    min-height: 0;
    width: 100%;
    font-size: var(--fs-h2-md);
    line-height: 1.6;
  }
}

.recycle-page .recycle-page__cta-link:hover {
  background-color: var(--color-surface-white);
  color: var(--color-ink-900);
  border-color: var(--color-surface-white);
}

.recycle-page .recycle-page__cta-link:focus-visible {
  outline: var(--focus-ring-light);
  outline-offset: 3px;
}

/* ≤1023px — ベース固定pxの本文段落を流体化（1024px+ の指定は不変） */
@media (max-width: 1023px) {
  .recycle-page .recycle-page__future-body,
  .recycle-page .recycle-page__futon-promo-desc p {
    font-size: var(--fs-body-fluid);
    line-height: var(--fs-body-lh-fluid);
  }
}

/**
 * 繊維リサイクルページ — 1400px 基準
 */
@media (min-width: 1024px) {
  /* Figma .div — 173×96 · 固定タイポ */
  .recycle-page .recycle-stat__figure {
    width: var(--recycle-stat-figure-w);
  }

  .recycle-page .recycle-stat__prefix {
    font-size: var(--recycle-stat-prefix-size);
    line-height: var(--recycle-stat-prefix-size);
  }

  .recycle-page .recycle-stat__digits {
    font-size: var(--recycle-stat-num-size);
    line-height: var(--recycle-stat-num-size);
  }

  .recycle-page .recycle-stat__suffix {
    font-size: var(--recycle-stat-suffix-size);
    line-height: var(--recycle-stat-suffix-size);
  }

  .recycle-page .recycle-page__co2-card-num {
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -0.0405em;
  }

  .recycle-page .recycle-page__co2-title {
    font-size: 32px;
    line-height: 48px;
  }

  .recycle-page .recycle-page__future-title {
    font-size: 32px;
    line-height: 48px;
  }

  .recycle-page .recycle-page__current-title {
    font-size: 32px;
    line-height: 48px;
  }

}

/* WP補正: React版 whitespace-pre-line（Tailwind）相当。江戸リスト説明文の改行(\n)を反映 */
.recycle-page .recycle-page__edo-item-desc { white-space: pre-line; }

/* WP補正: React layout.css の .layout-frame（1400px中央フレーム）。
   edo-layout 等が左右paddingを別途持つため、ここでは max-width＋中央寄せのみ。 */
.layout-frame {
  width: 100%;
  max-width: var(--layout-frame);
  margin-inline: auto;
  box-sizing: border-box;
}