.gpp-sp .gpp-solb { padding: var(--gpp-section-y) 0; background: var(--gpp-navy-deepest); scroll-margin-top: 96px; }
.gpp-sp .gpp-solb__h { margin-bottom: 24px !important; text-wrap: balance; }
.gpp-sp .gpp-solb__lede { max-width: 1000px; margin-bottom: 24px !important; }
.gpp-sp .gpp-solb__steps { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: gpp-solb; margin-top: 40px; border-top: 1px solid var(--gpp-line); }
.gpp-sp .gpp-solb__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 64px;
	align-items: center;
	padding: 40px 0;
	border-bottom: 1px solid var(--gpp-line);
	counter-increment: gpp-solb;
}
.gpp-sp .gpp-solb__body { min-width: 0; }
.gpp-sp .gpp-solb__step {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px !important;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gpp-gold);
	line-height: 1;
}
.gpp-sp .gpp-solb__step::before {
	content: counter(gpp-solb);
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--gpp-gold);
	font-size: 16px;
	letter-spacing: 0;
}
.gpp-sp .gpp-solb__title {
	margin-bottom: 14px !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-wrap: balance;
}
.gpp-sp .gpp-solb__text { margin-bottom: 18px !important; font-size: 17px; line-height: 1.6; max-width: 36em; text-wrap: pretty; }
.gpp-sp .gpp-solb__points { margin: 0 0 22px !important; padding: 0 !important; list-style: none !important; }
.gpp-sp .gpp-solb__points li { position: relative; margin: 0 !important; padding: 0 0 0 28px !important; font-size: 16px; line-height: 1.5; color: var(--gpp-white); }
.gpp-sp .gpp-solb__points li + li { margin-top: 6px !important; }
.gpp-sp .gpp-solb__points li::before { content: '✓'; content: '✓' / ''; position: absolute; left: 2px; top: 0; color: var(--gpp-gold); font-weight: 500; }
.gpp-sp .gpp-solb__moved {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	column-gap: 20px;
	row-gap: 4px;
	margin: 0 0 20px !important;
	padding: 14px 16px;
	border: 1px solid var(--gpp-line);
	background: var(--gpp-navy-deepest);
	font-size: 15px;
}
.gpp-sp .gpp-solb__moved dt { margin-bottom: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gpp-gold); }
.gpp-sp .gpp-solb__moved dd { margin: 0; white-space: nowrap; }
.gpp-sp .gpp-solb__moved b { font-weight: 500; margin-right: 4px; }
.gpp-sp .gpp-solb__moved .gpp-badge { vertical-align: 1px; }
.gpp-sp .gpp-solb__actions { gap: 16px 28px; }
.gpp-sp .gpp-solb__panel { min-width: 0; margin: 0 !important; }
.gpp-sp .gpp-solb__shot {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--gpp-line);
	background: var(--gpp-navy-deepest);
}
.gpp-sp .gpp-solb__shot img { position: absolute; max-width: none; height: auto; }
.gpp-sp .gpp-solb__shot--pic .gpp-pic { width: 100%; height: 100%; }
.gpp-sp .gpp-solb__shot--video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--gpp-navy-deepest); border-radius: 0; }
.gpp-sp .gpp-solb__shot--photo img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.gpp-sp .gpp-solb__mark { position: absolute; z-index: 3; border: 2px solid var(--gpp-gold); box-shadow: 0 0 0 1px var(--gpp-navy-deepest); pointer-events: none; }
.gpp-sp .gpp-solb__tag {
	position: absolute;
	z-index: 3;
	left: 28px;
	bottom: 28px;
	padding: 6px 12px;
	background: rgba(10, 15, 26, 0.8);
	border-left: 2px solid var(--gpp-gold);
	color: var(--gpp-white);
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
}
.gpp-sp a.gpp-solb__shot { cursor: zoom-in; transition: border-color 0.2s; }
.gpp-sp a.gpp-solb__shot:hover, .gpp-sp a.gpp-solb__shot:focus-visible { border-color: var(--gpp-gold); }
.gpp-sp a.gpp-solb__shot::after {
	content: '+';
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--gpp-gold);
	color: var(--gpp-navy);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}
@media (max-width: 1439px) {
	.gpp-sp .gpp-solb__moved { column-gap: 12px; padding: 12px; }
}
@media (max-width: 1365px) {
	.gpp-sp .gpp-solb__row { column-gap: 48px; }
	.gpp-sp .gpp-solb__title { font-size: 26px !important; }
	.gpp-sp .gpp-solb__moved { column-gap: 10px; padding: 10px; font-size: 14px; }
}
@media (max-width: 1279px) {
	.gpp-sp .gpp-solb__moved { grid-template-columns: repeat(2, auto); column-gap: 20px; padding: 12px 14px; font-size: 15px; }
}
@media (max-width: 980px) {
	.gpp-sp .gpp-solb__row { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 28px 0; }
	.gpp-sp .gpp-solb__body { display: contents; }
	.gpp-sp .gpp-solb__step { order: 1; margin-bottom: 0 !important; }
	.gpp-sp .gpp-solb__title { order: 2; margin: -6px 0 0 !important; font-size: 22px !important; max-width: none; }
	.gpp-sp .gpp-solb__panel { order: 3; }
	.gpp-sp .gpp-solb__text { order: 4; margin: 0 !important; max-width: none; }
	.gpp-sp .gpp-solb__moved { order: 5; grid-template-columns: repeat(2, auto); column-gap: 14px; margin: 0 !important; }
	.gpp-sp .gpp-solb__points { order: 6; margin: 0 !important; }
	.gpp-sp .gpp-solb__body > .gpp-more, .gpp-sp .gpp-solb__actions { order: 7; }
	.gpp-sp .gpp-solb__steps { margin-top: 32px; }
	.gpp-sp .gpp-solb__tag { left: 18px; bottom: 18px; font-size: 13px; }
	.gpp-sp a.gpp-solb__shot::after { right: 10px; bottom: 10px; }
}
.gpp-sp .gpp-pcard { display: none; }
@media (max-width: 600px) {
	.gpp-sp .gpp-solb__shot--card { aspect-ratio: 3 / 2; }
	.gpp-sp .gpp-solb__shot--card .gpp-pic { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
	.gpp-sp .gpp-pcard {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: absolute;
		inset: 0;
		padding: 5% 6.25% calc(5% + 6px);
		font-family: var(--gpp-font);
		font-weight: 500;
		color: var(--gpp-white);
		line-height: 1.15;
		pointer-events: none;
	}
	.gpp-sp .gpp-pcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
	.gpp-sp .gpp-pcard__k { font-size: max(9px, 2.8vw); letter-spacing: 0.12em; color: var(--gpp-gold); white-space: nowrap; }
	.gpp-sp .gpp-pcard__k b { font-weight: 500; font-size: max(13px, 4vw); letter-spacing: 0; }
	.gpp-sp .gpp-pcard__ttl { margin: 0 !important; padding: 0 !important; font-size: max(12px, 3.9vw); font-weight: 500; line-height: 1.25; text-wrap: balance; }
	.gpp-sp .gpp-pcard__ttls { display: flex; justify-content: space-between; gap: 8px; margin-top: max(2px, 0.8vw); white-space: nowrap; }
	.gpp-sp .gpp-pcard__state {
		display: inline-block;
		padding: 2px max(5px, 1.5vw);
		border: 1px solid rgba(255, 255, 255, 0.45);
		background: rgba(255, 255, 255, 0.06);
		font-size: max(10.5px, 3.1vw);
		letter-spacing: 0.08em;
		line-height: 1.2;
		color: rgba(255, 255, 255, 0.85);
		white-space: nowrap;
	}
	.gpp-sp .gpp-pcard__state.is-leak { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.12); color: #ff9a9a; }
	.gpp-sp .gpp-pcard__state.is-good { border-color: var(--gpp-gold); background: rgba(246, 166, 100, 0.12); color: var(--gpp-gold); }
	.gpp-sp .gpp-pcard__val, .gpp-sp .gpp-pcard__big { white-space: nowrap; }
	.gpp-sp .gpp-pcard__val.is-leak, .gpp-sp .gpp-pcard__big.is-leak { color: var(--gpp-pic-red); }
	.gpp-sp .gpp-pcard__off { font-size: max(10px, 3vw); font-weight: 400; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
	.gpp-sp .gpp-pcard__ruler { position: relative; display: block; height: 3px; background: rgba(255, 255, 255, 0.18); }
	.gpp-sp .gpp-pcard__zone { position: absolute; top: -4px; bottom: -4px; left: 43.7%; width: 10.8%; background: rgba(246, 166, 100, 0.35); border: 1px solid var(--gpp-gold); }
	.gpp-sp .gpp-pcard__gto { position: absolute; top: -5px; bottom: -5px; left: calc(49.5% - 1px); width: 2px; background: var(--gpp-gold); }
	.gpp-sp .gpp-pcard__mark { position: absolute; inset: 0; }
	.gpp-sp .gpp-pcard__bar { position: absolute; top: -6px; bottom: -6px; left: calc(var(--gpp-at) - 2px); width: 4px; background: var(--gpp-white); }
	.gpp-sp .gpp-pcard__mark.is-leak .gpp-pcard__bar { background: var(--gpp-pic-red); }
	.gpp-sp .gpp-pcard__mark.is-improving .gpp-pcard__bar { background: rgba(255, 255, 255, 0.75); }
	.gpp-sp .gpp-pcard__verdict { display: flex; align-items: baseline; gap: max(6px, 2vw); }
	.gpp-sp .gpp-pcard__big { font-size: max(21px, 6.6vw); line-height: 1; }
	.gpp-sp .gpp-pcard__bench { display: flex; justify-content: space-between; gap: 8px; font-size: max(16px, 4.1vw); white-space: nowrap; }
	.gpp-sp .gpp-pcard--f3 .gpp-pcard__ruler { margin-top: 10px; }
	.gpp-sp .gpp-pcard__rows { display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; min-height: 0; margin-top: max(8px, 2.5vw); padding-top: max(10px, 2.8vw); border-top: 2px solid rgba(255, 255, 255, 0.12); }
	.gpp-sp .gpp-pcard__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: max(6px, 2vw); row-gap: max(10px, 2.6vw); }
	.gpp-sp .gpp-pcard__row .gpp-pcard__ruler { grid-column: 1 / -1; }
	.gpp-sp .gpp-pcard__lbl { font-size: max(9px, 2.8vw); letter-spacing: 0.1em; color: var(--gpp-gold); white-space: nowrap; }
	.gpp-sp .gpp-pcard__row .gpp-pcard__val { font-size: max(15px, 4.8vw); line-height: 1; }
	.gpp-sp .gpp-pcard__row .gpp-pcard__state { justify-self: end; }
	.gpp-sp .gpp-pic--r2.is-ready ~ .gpp-pcard .gpp-pcard__row { opacity: 0; }
	.gpp-sp .gpp-pic--r2.is-play ~ .gpp-pcard .gpp-pcard__row { animation: gpp-r2-row 0.5s ease-out both; animation-delay: calc(0.2s + var(--gpp-r2-i) * 0.8s); }
	.gpp-sp .gpp-pic--r2.is-play ~ .gpp-pcard .gpp-pcard__mark { animation: gpp-pcard-mark 0.8s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(0.35s + var(--gpp-r2-i) * 0.8s); }
	.gpp-sp .gpp-pic--r2.is-play.is-out ~ .gpp-pcard .gpp-pcard__row { animation: gpp-r2-out 0.5s ease-in both; }
	@keyframes gpp-pcard-mark { from { transform: translateX(var(--gpp-from)); } to { transform: translateX(0); } }
	@media (max-width: 360px) {
		.gpp-sp .gpp-pcard__bench { font-size: 14px; }
		.gpp-sp .gpp-pcard { padding: 4% 6.25% calc(4% + 5px); }
		.gpp-sp .gpp-pcard__bar { top: -5px; bottom: -5px; }
		.gpp-sp .gpp-pcard__zone { top: -3px; bottom: -3px; }
		.gpp-sp .gpp-pcard__gto { top: -4px; bottom: -4px; }
	}
}
