/* ---------------------- */
/* 変更箇所は以下から全部 */

.kv {
	position: relative;
	display: block;
	width: 100%;
	height: 100vh;
	min-height: 400px;
}

.kv-background:before {
	position: absolute;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.kv-background:before {
	background-color: rgb(0, 0, 0);
	transition: all 1.5s ease-out 0.5s;
	z-index: 30;
}

.kv-background.onload:before {
	opacity: 0;
}

.kv-background {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: url(../images/home/kv/00/01.jpg) no-repeat center bottom / cover;
	background-attachment: fixed;
}

.kv-layer {
	position: absolute;
	bottom: 0;
	left: 0;
	top: auto;
	width: 100%;
	height: 100%;
	min-width: 300px;
	margin: auto;
	backface-visibility: hidden;
}

@media screen and (min-width: 1441px) {
	.kv-layer {
		min-width: 1400px;
		max-width: 1800px;
	}
}

.kv-layer-inner {
	position: absolute;
	bottom: 0;
	left: 0;
	top: auto;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	will-change: transform;
}

.kv-layer--sky img {
	top: 0;
	bottom: auto;
}

.kv-layer-inner img {
	position: absolute;
	display: block;
	width: 100%;
	max-width: 260px;
	margin: auto;
	bottom: 0;
	left: 0;
	top: auto;
	z-index: 2;
	backface-visibility: hidden;
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
}

.kv-layer-inner .elm {
	z-index: 1;
}


.kv-character-container {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.kv-character-container:before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	background-image: linear-gradient(0deg, rgba(114, 91, 15, 0.1), rgba(114, 50, 15, 0.5));
}

.kv-character-object {
	position: absolute;
	display: block;
	width: 30px;
	height: auto;
	z-index: 2;
}

.kv-character-object.hit {
	animation: hitAnimation 0.5s steps(10) 1;
}

@media screen and (min-width: 1024px) {
	.kv-character-object {
		width: 40px;
	}
	.kv-layer-inner img {
		max-width: 320px;
	}
}

@media screen and (min-width: 1441px) {
	.kv-character-object {
		width: 60px;
	}
	.kv-layer-inner img {
		max-width: 425px;
	}
}

@keyframes hitAnimation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}