/* くすナビ B2B: 進め方を Clutch 版の図に差し替え (kusunavi-about-flow.js)。色は Clutch 版の値、書体は MECHA の本文書体 */
.kaf { --color-primary-text: #C9564E; --color-surface: #fff; --color-text-muted: #585e74; --color-primary: #E8837C; --color-primary-hover: #FDEEEC;
  --color-text: #16171d; --font-size-body: 14px; --letter-spacing-body: .04em; --font-family-base: inherit;
  padding: 24px 0 140px; }
.kaf-on .container > .recycling-title.is-2, .kaf-on .container > .cw_team, .kaf-on .container > .line.is-animated.is-desktop { display: none !important; }
.kaf-body { margin-top: 40px; max-width: 640px; }
.kaf-body p { margin: 0 0 1.1em; line-height: 1.9; }
.kaf-visual { margin-top: 72px; margin-bottom: 4em; }
.kaf .about-visual[data-interactive] { position: relative; container-type: inline-size; }
.kaf .clutch-flow { position: relative; width: 100%; aspect-ratio: 878 / 574; color: var(--color-primary-text); }
.kaf .clutch-flow > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kaf .flow-line { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .55; }
.kaf .flow-return { stroke-dasharray: 5 7; opacity: .3; }
.kaf .flow-particle { fill: var(--color-primary-text); }
.kaf .flow-particles { pointer-events: none; }
.kaf .flow-motion-toggle { position: absolute; top: 0; right: 0; background: transparent; border: 0; padding: .6rem 0; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-body); cursor: pointer; text-decoration: underline; text-underline-offset: .3em; }
.kaf .flow-motion-toggle:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 3px; }
.kaf .flow-node { fill: var(--color-surface); stroke: currentColor; stroke-width: 1.3; }
.kaf .flow-label { fill: var(--color-text); font-family: var(--font-family-base); font-weight: 700; font-size: 27px; text-anchor: middle; }
.kaf .flow-small { fill: var(--color-text-muted); font-size: 20px; }
.kaf .flow-choice {
  position: absolute; left: 46.697%; width: 20.501%; height: 31.359%;
  border: 1px solid var(--color-primary-text); border-radius: 0;
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-family-base); font-weight: 700;
  font-size: clamp(11px, 2.7cqw, 24px); line-height: 1.6; padding: 0;
  cursor: pointer; transition: background-color .2s, box-shadow .2s;
}
.kaf .flow-choice-existing { top: 9.582%; }
.kaf .flow-choice-fde { top: 56.620%; }
.kaf .flow-choice small { display: block; font-size: .65em; }
.kaf .flow-choice:hover,.kaf .flow-choice[aria-pressed=true] { background: var(--color-primary-hover); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.kaf .flow-choice:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 5px; }
.kaf [data-route=existing] .flow-route-fde,.kaf [data-route=fde] .flow-route-existing { opacity: .18; }
.kaf .about-visual .clutch-diagram-detail {
  position: absolute; top: 100%; left: 0; width: 100%; min-height: 3.3em;
  margin: 1.2rem 0 0; color: var(--color-text);
  font-family: var(--font-family-base); font-size: var(--font-size-body);
  font-weight: 700; letter-spacing: var(--letter-spacing-body); line-height: 1.65;
}
@media (max-width: 767px) {
  .kaf .about-visual[data-interactive] { margin-bottom: 7rem; }
  .flow-choice small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-choice { transition: none; }
}
/* 書体を MECHA に合わせる: 図の文字も本文と同じ書体・太さ */
.kaf .flow-label, .kaf .flow-choice, .kaf .about-visual .clutch-diagram-detail { font-family: inherit; font-weight: 400; }
/* 余白: MECHA の書体は Clutch より字幅が広いので、図の文字を一回り小さくし、図全体を左右 4% ずつ内側に寄せる */
.kaf .clutch-flow { width: 92%; margin: 0 auto; }
.kaf .flow-label { font-size: 18px; letter-spacing: .04em; }
.kaf .flow-small { font-size: 14px; }
.kaf .flow-choice { font-size: clamp(11px, 1.9cqw, 18px); line-height: 1.7; }
.kaf .flow-choice small { margin-top: .35em; }
.kaf .about-visual .clutch-diagram-detail { margin-top: 48px; }
.kaf-visual { margin-bottom: 7em; }
/* 丸を押すと裏返って説明が出る */
.kaf .flow-choice { perspective: 900px; background: transparent; border: 0; overflow: visible; }
.kaf .flow-choice:hover, .kaf .flow-choice[aria-pressed=true] { background: transparent; box-shadow: none; }
.kaf-card { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.45,.05,.25,1); }
.kaf .flow-choice[aria-pressed=true] .kaf-card { transform: rotateY(180deg); }
.kaf .kaf-flip .clutch-diagram-detail { display: none; }
/* 図が狭いと丸の中に説明が入りきらないので、裏返さずに下へ出す */
@container (max-width: 560px) {
  .kaf .flow-choice[aria-pressed=true] .kaf-card { transform: none; }
  .kaf .kaf-flip .clutch-diagram-detail { display: block; }
}
.kaf-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--color-primary-text); border-radius: 0; background: var(--color-surface);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: background-color .2s; }
.kaf .flow-choice:hover .kaf-front { background: var(--color-primary-hover); }
.kaf-back { transform: rotateY(180deg); background: var(--color-primary-hover); padding: 0 16%; box-sizing: border-box;
  font-size: max(12px, .62em); line-height: 1.7; text-align: center; }
@media (prefers-reduced-motion: reduce) { .kaf-card { transition: none; } }