

.proof__title--case { font-size: min(8vw, calc(88vw / var(--n, 8))); margin-bottom: 4vw; }

.case-label { display: flex; align-items: center; gap: .9em; margin-bottom: 1.2em; font-size: clamp(.74rem, .92vw, 1.25rem); font-weight: 500; letter-spacing: .06em; line-height: 1.4; }
.case-label::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--c-blue); }
.case-label b { font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.case-label i { flex: none; width: 2.4em; height: 1px; background: currentColor; opacity: .35; }

.case-slider { position: relative; z-index: 1; grid-column: 1 / -1; margin: 5.5vw calc(-1 * var(--pad-x)) 0; }
.case-slider__track { position: relative; display: flex; gap: var(--gap); margin: 0; padding: 0 var(--pad-x) .5rem; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.case-slider__track::-webkit-scrollbar { display: none; }

.case-slider__track::after { content: ""; flex: none; width: calc(var(--pad-x) - var(--gap)); }

@media (hover: none), (pointer: coarse) {
	.case-slider__track { scroll-snap-type: x mandatory; scroll-padding-left: var(--pad-x); }
}

@media (hover: hover) and (pointer: fine) {
	.js .case-slider__track { cursor: grab; }
	.js .case-slider__track.is-drag { cursor: grabbing; }
	.js .case-slider__track.is-drag .case-card { pointer-events: none; }
}

.case-slide { flex: none; width: clamp(17.5rem, 33vw, 46rem); scroll-snap-align: start; }
.case-card { display: flex; flex-direction: column; height: 100%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.case-card__visual { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-card); overflow: hidden; background: #d9dcea; transform: translateZ(0); }
.case-card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.case-card__no { position: absolute; left: 1rem; top: 1rem; min-width: 2.4em; height: 2.4em; padding: 0 .9em; display: inline-flex; align-items: center; justify-content: center; border-radius: 2em; background: rgba(255, 255, 255, .92); color: #000; font-family: var(--font-mono); font-size: clamp(.7rem, .85vw, 1.1rem); font-weight: 500; letter-spacing: .06em; line-height: 1; }
.case-card__industry { display: flex; align-items: center; gap: .7em; margin-top: 1.3em; font-size: clamp(.74rem, .92vw, 1.25rem); font-weight: 500; letter-spacing: .06em; line-height: 1.4; }
.case-card__industry::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--c-blue); }
.case-card__title { margin-top: .5em; font-size: clamp(1.14rem, 1.66vw, 2.6rem); line-height: 1.5; font-weight: 500; letter-spacing: -.005em; text-wrap: balance; }
.case-card__desc { margin-top: .8em; font-size: clamp(.86rem, 1vw, 1.45rem); line-height: 1.85; color: var(--c-sub); text-wrap: pretty; }
.case-card__chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: auto; padding-top: 1.4em; }

.case-card__model { display: flex; align-items: baseline; gap: .8em; margin-top: auto; padding-top: 1.3em; font-size: clamp(.8rem, .92vw, 1.3rem); line-height: 1.6; text-wrap: pretty; }
.case-card__model b { flex: none; padding: .22em .85em; border: 1px dashed rgba(0, 0, 0, .45); border-radius: 2em; font-size: .84em; font-weight: 500; letter-spacing: .03em; line-height: 1.4; white-space: nowrap; }
.case-card__model + .case-card__chips { margin-top: 0; padding-top: 1em; }
.case-card__more { display: inline-flex; align-items: center; gap: .7em; align-self: flex-start; margin-top: 1.3em; padding-bottom: .25em; border-bottom: 1px solid currentColor; font-size: clamp(.82rem, .98vw, 1.35rem); font-weight: 500; line-height: 1.4; }
.case-card__more::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .5s var(--ease); }
@media (hover: hover) {
	.case-card:hover .case-card__visual img { transform: scale(1.05); }
	.case-card:hover .case-card__more { color: var(--c-blue); }
	.case-card:hover .case-card__more::after { transform: translate3d(.35em, 0, 0); }
}

.case-chip { display: inline-flex; align-items: center; gap: .55em; height: 2.15em; padding: 0 1em; border: 1px solid rgba(0, 0, 0, .22); border-radius: 2em; font-size: clamp(.68rem, .8vw, 1.08rem); font-weight: 500; letter-spacing: .03em; line-height: 1; white-space: nowrap; }
.case-chip--state { border-color: #000; background: #000; color: #fff; }
.case-chip--state::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: #fff; }
.case-chip--state.is-live { border-color: var(--c-blue); background: var(--c-blue); }

.case-slider__ui { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.6rem); margin-top: clamp(1.5rem, 2.8vw, 3.4rem); padding: 0 var(--pad-x); }
.case-slider__bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .14); overflow: hidden; }
.case-slider__bar i { position: absolute; left: 0; top: 0; width: 30%; height: 100%; border-radius: 2px; background: #000; will-change: transform; }
.case-slider__count { flex: none; min-width: 6.6em; text-align: right; font-family: var(--font-mono); font-size: clamp(.76rem, .9vw, 1.2rem); letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-sub); }
.case-slider__count b { font-weight: 500; color: #000; }
.case-slider__nav { flex: none; display: flex; gap: .6rem; }
.case-slider__btn { display: grid; place-items: center; width: clamp(2.9rem, 3.7vw, 4.8rem); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: #000; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, .16), 0 3px 8px rgba(0, 0, 0, .1); transition: background-color .4s var(--ease), transform .4s var(--ease), opacity .3s; }
.case-slider__btn svg { width: 38%; height: 38%; }
.case-slider__btn[disabled] { opacity: .22; cursor: default; box-shadow: none; }
@media (hover: hover) { .case-slider__btn:not([disabled]):hover { background: var(--c-blue); transform: scale(1.06); } }
html.no-js .case-slider__ui { display: none; }

.case-slider__auto { position: relative; display: grid; place-items: center; width: clamp(2.9rem, 3.7vw, 4.8rem); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #000; font: inherit; cursor: pointer; transition: color .4s var(--ease), transform .4s var(--ease); }
.case-slider__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.case-slider__ring circle { fill: none; stroke: rgba(0, 0, 0, .14); stroke-width: 1.5; }
.case-slider__ring .is-left { stroke: var(--c-blue); stroke-width: 2; stroke-linecap: round; }
.case-slider__mark { grid-area: 1 / 1; width: 38%; height: 38%; }
.case-slider__mark.is-play { display: none; }
.case-slider__auto.is-off .case-slider__mark.is-pause { display: none; }
.case-slider__auto.is-off .case-slider__mark.is-play { display: block; }
.case-slider__auto.is-off .case-slider__ring .is-left { visibility: hidden; }
@media (hover: hover) { .case-slider__auto:hover { color: var(--c-blue); transform: scale(1.06); } }

.js .case-slider.is-anim .case-slide { opacity: 0; transform: translate3d(0, 2.6rem, 0); transition: opacity .9s ease, transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.js .case-slider.is-anim.is-in .case-slide { opacity: 1; transform: none; }

.case-more { margin-top: 4.5vw; }
.case-note { position: relative; z-index: 1; grid-column: 1 / -1; justify-self: center; margin-top: 1.5em; max-width: 46em; font-size: clamp(.7rem, .82vw, 1.1rem); line-height: 1.8; letter-spacing: .04em; color: var(--c-sub); text-align: center; text-wrap: pretty; }

.case-index { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .7em; margin: 2.6vw 0 0; padding: 0; list-style: none; }
.case-index a { display: inline-flex; align-items: center; gap: .75em; height: 3.2em; padding: 0 1.5em 0 1.2em; border-radius: 3em; background: #fff; font-size: clamp(.88rem, 1.04vw, 1.55rem); font-weight: 500; line-height: 1; box-shadow: 0 6px 10px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .04); transition: background-color .4s var(--ease), color .4s var(--ease); }
.case-index a b { font-family: var(--font-mono); font-size: .76em; font-weight: 400; letter-spacing: .06em; color: var(--c-sub); transition: color .4s var(--ease); }
@media (hover: hover) {
	.case-index a:hover { background: #000; color: #fff; }
	.case-index a:hover b { color: rgba(255, 255, 255, .7); }
}

.case { padding-top: 10vw; align-items: start; scroll-margin-top: 5rem; }
.case + .case { padding-top: 9vw; }
.case__visual { position: sticky; top: calc(var(--vh) * 16); grid-column: 1 / span 6; grid-row: 1; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: #d9dcea; }
.case__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__no { position: absolute; left: 1rem; top: 1rem; min-width: 2.4em; height: 2.4em; padding: 0 .9em; display: inline-flex; align-items: center; justify-content: center; border-radius: 2em; background: rgba(255, 255, 255, .92); color: #000; font-family: var(--font-mono); font-size: clamp(.7rem, .85vw, 1.1rem); font-weight: 500; letter-spacing: .06em; line-height: 1; }
.case__visual figcaption { position: absolute; right: 1rem; bottom: .9rem; padding: .45em .9em; border-radius: 2em; background: rgba(255, 255, 255, .9); color: #000; font-size: clamp(.62rem, .72vw, .95rem); letter-spacing: .04em; line-height: 1; }
.case__body { grid-column: 8 / -1; grid-row: 1; }
.case.is-flip .case__visual { grid-column: 7 / -1; }
.case.is-flip .case__body { grid-column: 1 / span 5; }
.case__industry { display: flex; align-items: center; gap: .7em; font-size: clamp(.8rem, .98vw, 1.4rem); font-weight: 500; letter-spacing: .06em; line-height: 1.5; }
.case__industry::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--c-blue); }
.case__industry small { font-size: 1em; font-weight: 400; color: var(--c-sub); letter-spacing: .02em; }
.case__title { margin-top: .55em; font-size: clamp(1.5rem, 2.6vw, 4.1rem); line-height: 1.42; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.case__lead { margin-top: 1.1em; font-size: clamp(.95rem, 1.15vw, 1.8rem); line-height: 2; text-wrap: pretty; }
.case__chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1.6em; }

.case .svc-facts { margin-top: 2em; font-size: clamp(.92rem, 1.08vw, 1.7rem); }
.case .svc-facts > div { grid-template-columns: 9.4em minmax(0, 1fr); padding: 1em 0 1.05em; border-top: 1px solid rgba(0, 0, 0, .16); line-height: 1.85; }
.case .svc-facts > div:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.case .svc-facts dd { text-wrap: pretty; }
.case__list { margin: 0; padding: 0; list-style: none; }
.case__list li { position: relative; padding-left: 1.15em; }
.case__list li + li { margin-top: .35em; }
.case__list li::before { content: ""; position: absolute; left: .2em; top: .78em; width: .32em; height: .32em; border-radius: 50%; background: currentColor; opacity: .55; }
.case__after { margin-top: 1.5em; font-size: clamp(.86rem, 1vw, 1.5rem); line-height: 1.9; font-weight: 500; text-wrap: pretty; }

.case-voice { margin: 2em 0 0; padding: .2em 0 .2em 1.3em; border-left: 3px solid var(--c-blue); }
.case-voice__label { font-size: clamp(.74rem, .86vw, 1.2rem); font-weight: 500; letter-spacing: .06em; color: var(--c-sub); }
.case-voice__text { margin: .4em 0 0; font-size: clamp(.98rem, 1.18vw, 1.85rem); line-height: 1.85; font-weight: 500; text-wrap: pretty; }
.case-voice__text + .case-voice__text { margin-top: .7em; }
.case-voice__from { margin-top: .5em; font-size: clamp(.72rem, .82vw, 1.15rem); color: var(--c-sub); }

.case-model { margin-top: 2em; padding: 1.3em 1.5em 1.45em; border: 1px dashed rgba(0, 0, 0, .42); border-radius: 16px; font-size: clamp(.9rem, 1.04vw, 1.6rem); line-height: 1.85; }
.case-model__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1em; font-size: .84em; line-height: 1.6; }
.case-model__label b { font-weight: 500; letter-spacing: .06em; }
.case-model__label small { font-size: 1em; color: var(--c-sub); }
.case-model__title { margin-top: .45em; font-size: 1.28em; font-weight: 500; line-height: 1.5; }
.case-model__flow { display: flex; flex-wrap: wrap; gap: .35em 0; margin: .8em 0 0; padding: 0; list-style: none; }
.case-model__flow li { display: flex; align-items: baseline; }
.case-model__flow li + li::before { content: "→"; flex: none; margin: 0 .7em; color: var(--c-blue); }
.case-model__items { margin-top: .8em; }
.case-model__text { margin-top: .75em; font-size: .94em; color: var(--c-sub); text-wrap: pretty; }

.case-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-score { grid-column: 1 / -1; margin-top: 1.8em; max-width: 40em; font-size: clamp(.9rem, 1.08vw, 1.6rem); line-height: 1.9; text-wrap: pretty; }
.case-score b { font-weight: 500; }

@media (max-width: 812px) {
	.proof__title--case { font-size: min(12.4vw, calc(94vw / var(--n, 8))); margin-bottom: 8vw; }
	.case-label { font-size: .8rem; margin-bottom: 1em; }

	.case-slider { margin-top: 11vw; }
	.case-slide { width: 78vw; }
	.case-card__industry { font-size: .8rem; }
	.case-card__title { font-size: 1.2rem; min-height: 3em; }
	.case-card__desc { font-size: .9rem; }
	.case-card__more { font-size: .86rem; }
	.case-chip { font-size: .72rem; }
	.case-slider__ui { margin-top: 1.5rem; }
	@media (max-width: 360px) { .case-slider__ui { gap: .7rem; } .case-slider__count { min-width: 0; } }
	.case-more { margin-top: 12vw; }
	.case-note { justify-self: start; margin-top: 1.4rem; font-size: .72rem; text-align: left; }

	.case-index { margin-top: 1.6rem; gap: .55em; }
	.case-index a { height: 2.9em; padding: 0 1.2em 0 1em; font-size: .88rem; }

	.case, .case + .case { padding-top: 18vw; }
	.case__visual, .case.is-flip .case__visual { position: relative; top: auto; grid-column: 1 / -1; grid-row: auto; }
	.case__body, .case.is-flip .case__body { grid-column: 1 / -1; grid-row: auto; margin-top: 1.7rem; }
	.case__industry { font-size: .82rem; }
	.case__title { font-size: 1.5rem; }
	.case__lead { font-size: .98rem; }
	.case .svc-facts { font-size: .95rem; }
	.case .svc-facts > div { grid-template-columns: minmax(0, 1fr); row-gap: .2em; }
	.case .svc-facts dt { font-size: .82em; color: var(--c-sub); }
	.case__after { font-size: .9rem; }
	.case-model { padding: 1.1em 1.1em 1.2em; font-size: .92rem; }
	.case-model__flow { flex-direction: column; gap: 0; }
	.case-model__flow li { display: block; }
	.case-model__flow li + li::before { content: "↓"; display: block; margin: .05em 0; line-height: 1.5; }
	.case-card__model { font-size: .84rem; }
	.case-numbers { grid-template-columns: minmax(0, 1fr); }
	.case-score { font-size: .95rem; }
}

html.is-reduced .case__visual, html.no-js .case__visual { position: relative; top: auto; }
@media (prefers-reduced-motion: reduce) {
	.case-card__visual img, .case-card__more::after, .case-slider__btn, .case-slider__auto, .case-slide { transition: none !important; }
}
