#renewal-home .why-autofix { padding: 110px 0 120px; background: #fff; overflow: clip; }
.why-visual-heading { margin: 0 auto 58px; text-align: center; }
.why-visual-heading > p { margin: 0 0 16px; color: #17836c; font-size: 17px; font-weight: 750; }
#renewal-home .why-visual-heading h2 { font-size: clamp(34px,4vw,56px); }
.why-scroll-scenes { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; }
.why-scene { --entry-x: -180px; --entry-y: 90px; position: relative; grid-column: span 6; min-height: 470px; border-radius: 22px; background: #f3f4f4; overflow: hidden; isolation: isolate; }
.why-scene:nth-child(even) { --entry-x: 180px; }
.why-scene:nth-child(-n+2) { grid-column: span 6; min-height: 500px; }
.why-scene-copy { position: relative; z-index: 2; padding: 32px; pointer-events: none; }
.why-scene-number { display: block; margin-bottom: 12px; color: #57616a; font-size: 14px; font-weight: 650; }
.why-scene-copy h3 { margin: 0; color: var(--navy); font-size: clamp(23px,2vw,29px); font-weight: 850; line-height: 1.45; letter-spacing: -.04em; word-break: keep-all; }
.why-scene-visual { position: absolute; inset: 34% -16% -4% -12%; margin: 0; z-index: 1; }
.why-scene-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.why-card-partners { background: #081c37; }
.why-card-partners .why-scene-number, .why-card-partners h3 { color: #fff; }
.why-card-partners .why-scene-visual { inset: 25% -33% -12% 19%; }
.why-partner-count { display: block; margin-top: 32px; color: #56cbb8; font-size: clamp(50px,5vw,72px); font-weight: 850; letter-spacing: -.06em; }
.why-partner-count span { font-size: .7em; }
.why-card-export { background: #1764ef; }
.why-card-export .why-scene-visual { inset: 30% -12% -12% 7%; }
.why-card-export h3, .why-card-export .why-scene-number, .why-card-repair-as h3, .why-card-repair-as .why-scene-number { color: #fff; }
.why-scene-copy h3::after { content: ""; display: block; width: 76px; height: 4px; margin-top: 12px; border-radius: 50%; background: #19a5ed; transform: rotate(-2deg); }
.why-card-export h3::after, .why-card-repair-as h3::after { background: #b8eaff; }
.why-card-no-deduction { background: #e5f1ff; }
.why-card-highest { background: #ecf2f8; }
.why-card-same-day { background: #e0edff; }
.why-card-repair-as { background: #185ade; }
.why-card-real-quote { background: #eef6ff; }
.why-card-tailored { background: #081c37; }
.why-card-tailored h3, .why-card-tailored .why-scene-number { color: #fff; }
.why-card-index { position: absolute; right: 22px; bottom: 18px; z-index: 2; color: #677981; font-size: 13px; font-weight: 700; }
.why-card-partners .why-card-index, .why-card-tailored .why-card-index, .why-card-export .why-card-index, .why-card-repair-as .why-card-index { color: #8eb8af; }
@supports (animation-timeline: view()) {
  .why-scene { animation: why-card-enter linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .why-scene-visual { animation: why-object-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
}
@keyframes why-card-enter { from { opacity: .15; transform: translate(var(--entry-x),var(--entry-y)); } to { opacity: 1; transform: translate(0,0); } }
@keyframes why-object-rise { from { transform: translateY(100px) scale(.92); } to { transform: translateY(0) scale(1); } }
.why-fallback-motion .why-scene { opacity: .25; transform: translate(var(--entry-x),var(--entry-y)); transition: opacity .85s, transform .85s cubic-bezier(.22,.61,.36,1); }
.why-fallback-motion .why-scene.is-in-view { opacity: 1; transform: translateY(0); }
@media (max-width: 980px) {
  .why-scene { grid-column: span 6; min-height: 540px; }
  .why-scene-copy { padding: 28px; }
}
@media (max-width: 600px) {
  #renewal-home .why-autofix { padding: 70px 0; }
  .why-visual-heading { margin-bottom: 36px; }
  .why-visual-heading > p { font-size: 13px; }
  .why-scroll-scenes { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .why-scene, .why-scene:nth-child(-n+2) { grid-column: auto; min-height: 550px; }
  .why-scene { --entry-x: -80px; --entry-y: 60px; }
  .why-scene:nth-child(even) { --entry-x: 80px; }
  .why-scene-copy { padding: 28px; }
  .why-scene-copy h3 { font-size: 27px; }
  .why-partner-count { font-size: 66px; }
  .why-card-partners .why-scene-visual { inset: 32% -23% -8% -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .why-scene, .why-scene-visual { animation: none; }
  .why-fallback-motion .why-scene { opacity: 1; transform: none; transition: none; }
}