@charset "UTF-8";

div.loading { width:100%; height:100%; margin:0; padding:0; background: rgba(0,0,0,0.8); position: fixed; top:0; left:0; z-index: 99; }
p.ldt { width:100%; margin:0; padding:0; font-size: 440%; font-family: Miama; text-align: center; position: absolute; bottom:24%; left:0; color:#A71D1D; }
p.str404 { width:100%; margin:0; padding:0; font-size: 200%; font-family: utsukushi; text-align: center; position: absolute; top:30vh; left:0; color:#F1EEE0; }

@keyframes scaleUpDown {
	0%,100% { transform: scaleY(1) scaleX(1); }
	50%,90% { transform: scaleY(1.1); }
	75% { transform: scaleY(0.95); }
	80% { transform: scaleX(0.95); }
}

@keyframes shake {
	0%,100% { transform: skewX(0) scale(1); }
	50% { transform: skewX(5deg) scale(0.9); }
}

@keyframes particleUp {
	0% { opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; top: -100%; transform: scale(0.5); }
}

@keyframes glow {
	0%,100% { background-color: #ef5a00; }
	50% { background-color: #ff7800; }
}

.fire_logo {
	position: absolute;
	top: calc(30% - 50px);
	left: calc(50% - 25px);
	width: 50px; height: 50px;
	background-color: transparent;
	margin-left: auto; margin-right: auto;
}


.fire {
	position: absolute;
	top: calc(60% - 50px);
	left: calc(50% - 50px);
	width: 100px; height: 100px;
	background-color: transparent;
	margin-left: auto; margin-right: auto;
}

.fire-center {
	position: absolute;
	height: 100%;
	width: 100%;
	animation: scaleUpDown 3s ease-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;

	.main-fire {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: radial-gradient(
			farthest-corner at 10px 0,
			#d43300 0%,
			#ef5a00 95%
		);
		transform: scaleX(0.8) rotate(45deg);
		border-radius: 0 40% 60% 40%;
		filter: drop-shadow(0 0 10px #d43322);
	}

	.particle-fire {
		position: absolute;
		top: 60%;
		left: 45%;
		width: 10px;
		height: 10px;
		background-color: #ef5a00;
		border-radius: 50%;
		filter: drop-shadow(0 0 10px #d43322);
		animation: particleUp 2s ease-out 0;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
	}
}

.fire-right {
	height: 100%;
	width: 100%;
	position: absolute;
	animation: shake 2s ease-out 0;
	animation-iteration-count: infinite;
	animation-fill-mode: both;

	.main-fire {
		position: absolute;
		top: 15%;
		right: -25%;
		width: 80%;
		height: 80%;
		background-color: #ef5a00;
		transform: scaleX(0.8) rotate(45deg);
		border-radius: 0 40% 60% 40%;
		filter: drop-shadow(0 0 10px #d43322);
	}

	.particle-fire {
		position: absolute;
		top: 45%;
		left: 50%;
		width: 15px;
		height: 15px;
		background-color: #ef5a00;
		transform: scaleX(0.8) rotate(45deg);
		border-radius: 50%;
		filter: drop-shadow(0 0 10px #d43322);
		animation: particleUp 2s ease-out 0;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
	}
}

.fire-left {
	position: absolute;
	height: 100%;
	width: 100%;
	animation: shake 3s ease-out 0;
	animation-iteration-count: infinite;
	animation-fill-mode: both;

	.main-fire {
		position: absolute;
		top: 15%;
		left: -20%;
		width: 80%;
		height: 80%;
		background-color: #ef5a00;
		transform: scaleX(0.8) rotate(45deg);
		border-radius: 0 40% 60% 40%;
		filter: drop-shadow(0 0 10px #d43322);
	}

	.particle-fire {
		position: absolute;
		top: 10%;
		left: 20%;
		width: 10%;
		height: 10%;
		background-color: #ef5a00;
		border-radius: 50%;
		filter: drop-shadow(0 0 10px #d43322);
		animation: particleUp 3s infinite ease-out 0;
		animation-fill-mode: both;
	}
}

.fire-bottom .main-fire {
	position: absolute;
	top: 30%;
	left: 20%;
	width: 75%;
	height: 75%;
	background-color: #ff7800;
	transform: scaleX(0.8) rotate(45deg);
	border-radius: 0 40% 100% 40%;
	filter: blur(10px);
	animation: glow 2s ease-out 0;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}



/* ------------------------------------------------------
300 - 350 (iphone 4)
-------------------------------------------------------- */
@media screen and (min-width: 300px ) and (max-width:350px) {
	.fire { top: calc(60% - 50px); left: calc(50% - 40px); width: 80px; height: 80px; }
	/* ------------------------------------------------------
	300 - 350 (iphone 5)
	-------------------------------------------------------- */
	@media screen and (max-width : 350px) and (max-height : 568px) {
		.fire { top: calc(60% - 50px); left: calc(50% - 40px); width: 80px; height: 80px; }
		p.ldt { bottom:20vh; font-size: 300%; }
		.fire_logo { top: calc(26% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	}
}


/* ------------------------------------------------------
350 - 400 ( android)(iphone6-375)
-------------------------------------------------------- */
@media screen and (min-width: 351px ) and (max-width:400px) {
	.fire { top: calc(60% - 50px); left: calc(50% - 40px); width: 80px; height: 80px; }
	p.ldt { bottom:20vh; font-size: 300%; }
}


/* ------------------------------------------------------
400 - 450(iphone6plus 414)
-------------------------------------------------------- */
@media screen and (min-width: 401px) and (max-width:450px) {
	.fire { top: calc(60% - 50px); left: calc(50% - 40px); width: 80px; height: 80px; }
	p.ldt { bottom:20vh; font-size: 300%; }
}


/* ------------------------------------------------------
450 - 500(iphone4 横)
-------------------------------------------------------- */
@media screen and (min-width: 451px) and (max-width:500px) {
	.fire { top: calc(60% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; }
	p.ldt { bottom:13vh; font-size: 300%; }
	.fire_logo { top: calc(26% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	/* ------------------------------------------------------
	450 - 500(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 500px) and (min-height : 480px) {

	}
}


/* ------------------------------------------------------
500 - 550 ( xperia z ultra)
-------------------------------------------------------- */
@media screen and (min-width: 501px) and (max-width:550px){
}


/* ------------------------------------------------------
550 - 600(iphone5 横)
-------------------------------------------------------- */
@media screen and (min-width: 551px) and (max-width:600px){
	.fire { top: calc(60% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; }
	p.ldt { bottom:15vh; font-size: 300%; }
	.fire_logo { top: calc(26% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	/* ------------------------------------------------------
	550 - 600(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 600px) and (min-height : 350px) {
	}
}


/* ------------------------------------------------------
600 - 650(android 横)
-------------------------------------------------------- */
@media screen and (min-width: 601px) and (max-width:650px){
	.fire { top: calc(60% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; }
	p.ldt { bottom:15vh; font-size: 340%; }
	/* ------------------------------------------------------
	600 - 650(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 650px) and (min-height:420px){
	}
}


/* ------------------------------------------------------
650 - 700(iphone6横=667)
-------------------------------------------------------- */
@media screen and (min-width: 651px) and (max-width:700px){
	.fire { top: calc(60% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; }
	p.ldt { bottom:15vh; font-size: 340%; }
	/* ------------------------------------------------------
	650 - 700(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 700px) and (min-height:450px){
	}
}


/* ------------------------------------------------------
700 - 750(iphone6plus横=736)
-------------------------------------------------------- */
@media screen and (min-width: 701px) and (max-width:750px){
	p.ldt { bottom:17vh; font-size: 340%; }
	/* ------------------------------------------------------
	700 - 750(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 750px) and (min-height:450px){
	}
}


/* ------------------------------------------------------
750 - 800( ipad )
-------------------------------------------------------- */
@media screen and (min-width: 751px) and (max-width:800px){
}


/* ------------------------------------------------------
800 - 850
-------------------------------------------------------- */
@media screen and (min-width: 801px) and (max-width:850px) {
}


/* ------------------------------------------------------
850 - 900
-------------------------------------------------------- */
@media screen and (min-width: 851px) and (max-width:900px) {
}


/* ------------------------------------------------------
900 - 1000 (xperia z ultra 横)
-------------------------------------------------------- */
@media screen and (min-width: 901px) and (max-width:1000px) {
	p.ldt { bottom:20vh; font-size: 400%; }
	/* ------------------------------------------------------
	900 - 1000(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 1000px) and (min-height : 600px) {
	}
}


/* ------------------------------------------------------
1000 - 1100(ipad 横)
-------------------------------------------------------- */
@media screen and (min-width: 1001px) and (max-width:1100px){
	/* ------------------------------------------------------
	1000 - 1100( height 700まで)
	-------------------------------------------------------- */
	@media screen and (max-width : 1100px) and (max-height : 700px) {
	}
}