/* sample5: 動きの CSS（M-059 下線・M-173 写真の入れ替え・M-111 並べ替え） */
.s5 .tabs__list {
	position: relative;
}
.s5 .tabs__bar {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: var(--bar-w, 0);
	background: var(--moss);
	translate: var(--bar-x, 0) 0;
	transition: translate 0.3s ease, width 0.3s ease;
	pointer-events: none;
}
.s5 .tabs:not(.is-ready) .tab-btn[aria-selected="true"] {
	box-shadow: inset 0 -2px 0 var(--moss);
}
.s5 .tab-panel[hidden] {
	display: none;
}

/* 固定写真 */
.s5 .steps__fig {
	opacity: 0;
	scale: 0.97;
	transition: opacity 0.6s ease, scale 0.6s ease;
}
.s5 .steps__fig.is-on {
	opacity: 1;
	scale: 1;
}
.s5 .steps.is-live .steps__step {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}
.s5 .steps.is-live .steps__step.is-on {
	opacity: 1;
}

/* 絞り込み */
::view-transition-group(*) {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(*) {
	animation-duration: 0.2s;
}
::view-transition-new(*) {
	animation-duration: 0.35s;
}
@media (prefers-reduced-motion: reduce) {
	.s5 .tabs__bar,
	.s5 .steps__fig,
	.s5 .steps.is-live .steps__step {
		transition: none;
	}
	.s5 .steps.is-live .steps__step {
		opacity: 1;
	}
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none;
	}
}