@charset "UTF-8";

@media all {
	.splash {
		overflow: hidden;
		position: fixed;
		z-index: 100000;
		top: 0;
		left: 0;
		width: 100dvw;
		height: 100dvh;
		transition: visibility 2s linear, opacity 2s linear, filter 1s;
		transition-delay: 1s;
	}
	.splash.end {
		visibility: hidden;
		filter: blur(3rem);
		opacity: 0;
	}
	.splash-item {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: filter .5s, opacity .5s;
	}
	.splash-item.logo {
		filter: blur(10rem);
		transition: filter 1s, opacity 1s;
	}
	.splash-figure {
		transition: transform 1s;
		transform-origin: center;
	}
	.splash-figure img {width: 100%;}

	.splash-item.show {
		filter: blur(0rem);
		opacity: 1;
	}
	.splash-item.logo,
	.splash-item.img1 {
		transition: filter 2s, opacity 2s;
	}
	
	.splash-item.img {transition-delay: 1s;}
	.splash-item.img1 {transition-delay: 0s;}

	.splash-figure img {
		transition: transform 1s linear, opacity 1s linear, filter 1s linear;
	}
	.end .splash-figure img {transform: scale(2); opacity: 0;filter: blur(8rem);}
	
	/* sp */
	@media only screen and (max-width: 767px) {
		.splash {
			background: center / contain url(../img/common/bg-sp.webp);
		}
		.splash-item {
			left: calc(50% - 450rem);
			width: 900rem;
		}
		.splash-item.logo img {width: 116rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.splash {
			background: center url(../img/common/bg.webp);
      background-size: max(1600px, 100%) auto;
		}
		.splash-item {
			left: calc(50% - 800rem);
			width: 1600rem;
		}
		.splash-item.logo img {width: 193rem;}
	}
}