@charset "utf-8";

/*ヘッダーアニメーション*/
header {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	}

@media only screen and (max-width: 960px){
	header {
		min-width:inherit;
		}
	}

h1 {
	position: absolute;
	width: 60%;
	max-width: 1920px;
	transform: translate(-50%, -50%);
	top: 75%;
	left: 50%;
	z-index: 9;
	}

h1 > img {
	display: block;
	width: 100%;
	opacity: 0;
	animation: titleLogoIn 4s ease-out 4s normal forwards;
	}

	@keyframes titleLogoIn {
		0% {opacity: 0;transform: scale(1.5);}
		100% {opacity: 1;transform: scale(1);}
		}

@media only screen and (max-width: 960px){
	h1 {width: 95%}
	}


h1::after, h1::before {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	aspect-ratio: 10 / 3;
	background: url("../images/gc/kurayami/img_250717_kurayami_kv_logo.webp") no-repeat top center;
	background-size: cover;
	opacity: 0;
	}

h1::after {animation: titleLogoOverlay 3s ease-out 4.5s normal forwards;}
h1::before {animation: titleLogoOverlay 3s ease-out 5s normal forwards;}

	@keyframes titleLogoOverlay {
		0% {opacity: 0;transform: translate(-50%, -50%) scale(2);}
		100% {opacity: 0.5;transform: translate(-50%, -50%) scale(1);display: none;}
		}

.site-header {
	width: 100%;
	overflow: hidden;
	}

.headBgObject {
	/*background-color: #5F4513;*/
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	}

.headBgObject > img {
	box-sizing: border-box;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 45%;
	left: 50%;
	width: 50%;
	opacity: 0;
	}

@media only screen and (max-width: 960px){
	.headBgObject {
		height: 80vh;
		}
	.headBgObject > img {
		width: 100%;
		}
	}

/*顔の切り替え*/
.headBgObject > img:nth-child(1) {animation:  faceChange 2s linear 0s normal forwards;}
.headBgObject > img:nth-child(2) {animation:  faceChange 2s linear 1s normal forwards;}
.headBgObject > img:nth-child(3) {animation:  faceChange 2s linear 2s normal forwards;}
.headBgObject > img:nth-child(4) {animation:  faceChange 2s linear 3s normal forwards;}
.headBgObject > img:nth-child(5) {animation:  faceChange 2s linear 4s normal forwards;}
.headBgObject > img:nth-child(6) {animation:  faceChange 2s linear 5s normal forwards;}
.headBgObject > img:nth-child(7) {animation:  faceChangeLast 1s linear 5.5s normal forwards, faceRoop 1.6s ease-in-out 7s alternate infinite;}

	@keyframes faceChange {
		0% {opacity: 0;}
		50% {opacity: 1;}
		0% {opacity: 0;display: none;}
		}

	@keyframes faceChangeLast {
		0% {opacity: 0;}
		100% {opacity: 1;}
		}

	@keyframes faceRoop {
		0% {opacity: 1;padding: 0;}
		100% {opacity: 0.8;padding: 0.8%;}
		}

/*血痕*/
.headBloodObject > img {
	box-sizing: border-box;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	opacity: 0;
	mix-blend-mode: screen;
	}

.headBloodObject > img:first-child {
	top: 30%;
	left: 20%;
	width: 20%;
	animation:  bloodin 0.1s ease-in 2.5s normal forwards;
	}

.headBloodObject > img:nth-child(2) {
	top: 6%;
	left: 45%;
	width: 15%;
	animation:  bloodin 0.1s ease-in 4.3s normal forwards;
	}

.headBloodObject > img:nth-child(3) {
	top: 50%;
	left: 85%;
	width: 10%;
	animation:  bloodin 0.1s ease-in 4.5s normal forwards;
	}

	@keyframes bloodin {
		0% {opacity: 0;}
		100% {opacity: 0.5;padding: 1%;}
		}

@media only screen and (max-width: 960px){
	.headBloodObject > img:first-child {
		top: 20%;
		left: 5%;
		width: 30%;
		}
	.headBloodObject > img:nth-child(2) {
		top: 8%;
		left: 55%;
		width: 30%;
		}

	.headBloodObject > img:nth-child(3) {
		top: 65%;
		left: 90%;
		width: 20%;
		}
}