@media screen and (min-width: 0) {

	.slide, .slide > div {
		background-size: auto 100%;
		background-position: center;
		background-repeat: no-repeat;
		bottom: 0;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: opacity 4s, background-size 4s;
/* 		will-change: transition, opacity, background-size; */
		will-change: opacity, background-size;
/* 		will-change: transition; */
	}

	.slide.current {
		background-size: auto 110%;
		opacity: 1;
/* 		will-change: transition, opacity, background-size; */
	}

	.slide > div {
		background-size: auto 80%;
	}

	.slide.current > div {
		background-size: auto 120%;
		opacity: 0.7; /*0.8 ... ???*/
/* 		will-change: transition, opacity, background-size; */
	}

	#animation {
		bottom: 0;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;

	}

	#slide-1 {background-image: url(../image/slide-1b.jpg) }
	#slide-1 > div { background-image: url(../image/slide-1f-c.png) }

	#slide-2 { background-image: url(../image/slide-2b.jpg) }
	#slide-2 > div { background-image: url(../image/slide-2f-c.png) }

	#slide-3 {background-image: url(../image/slide-3b.jpg) }
	#slide-3 > div { background-image: url(../image/slide-3f.png) }

}

@media screen and (min-aspect-ratio: 16/9) {

	.slide, .slide > div {
		background-size: 100% auto;
	}

	.slide.current {
		background-size: 110% auto;
	}

	.slide > div {
		background-size: 90% auto;
	}

	.slide.current > div {
		background-size: 120% auto;
	}

}