/*
<!--▼ HALLOWEEN ▼-->
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/shared/css/sp_202510.css?<?php echo date('YmdHis'); ?>">
<div class="bat bat1">
	<div class="wing-l"></div>
	<div class="wing-r"></div>
</div>
<div class="bat bat2">
	<div class="wing-l"></div>
	<div class="wing-r"></div>
</div>
<p class="sub-txt">Halloween</p>
<!--▲ HALLOWEEN ▲-->
*/

@keyframes bat {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}
@keyframes bat-right-wing {
	0% { transform: rotateZ(0); }
	33% { transform: rotateZ(-20deg); }
	66% { transform: rotateZ(50deg); }
	100% { transform: rotateZ(0); }
}
@keyframes bat-left-wing {
	0% { transform: rotateZ(0); }
	33% { transform: rotateZ(20deg); }
	66% { transform: rotateZ(-50deg); }
	100% { transform: rotateZ(0); }
}

div.opening div.logo-wrap svg.logo {}
div.opening p.sub-txt {
	color: #FA4A00;
}
div.opening p.halloween.active {
	top: calc(50% + 35px);
	visibility: visible;
	opacity: 1;
}
div.opening.hidden p.halloween {
	visibility: hidden;
	opacity: 0;
}
div.opening.hidden .bat {
	visibility: hidden;
	opacity: 0;
}
div.opening.hidden img.pumpkin {
	visibility: hidden;
	opacity: 0;
}

div.opening .bat {
	width: 15px;
	height: 25px;
	background-image: url(../img/season/202510/img_bat_body.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: 1s ease-in-out;
	backface-visibility: hidden;
	
	animation: bat 1s linear infinite alternate;
}
div.opening .bat .wing-l {
	position: absolute;
	top: calc(50% - 15px);
	left: -40px;
	width: 42px;
	height: 23px;
	background-image: url(../img/season/202510/img_bat_wing_l.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
	transform-origin: right top;
	
	animation: bat-left-wing 0.2s linear infinite;
	
	transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
}
div.opening .bat .wing-r {
	position: absolute;
	top: calc(50% - 15px);
	right: -40px;
	width: 42px;
	height: 23px;
	background-image: url(../img/season/202510/img_bat_wing_r.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
	transform-origin: left top;
	
	animation: bat-right-wing 0.2s linear infinite;
	
	transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
}

@media screen and (min-width:1000px) {
	div.opening div.logo-wrap {
		left: calc(50% + 50px);
	}
	div.opening .bat.bat1 {
		position: fixed;
		top: 50%;
		left: calc(50% - 250px);
		transform: translate(-50%, -50%);
	}
	div.opening .bat.bat2 {
		position: fixed;
		top: 50%;
		left: calc(50% + 235px);
		transform: translate(-50%, -50%);
	}
	div.opening img.pumpkin {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 65px;
		height: auto;
		transform: translate(-50%, -50%);
		transition: 0.85s linear;
		backface-visibility: hidden;
	}
	div.opening img.pumpkin.active {
		left: calc(50% - 150px);
		transform: translate(-50%, -50%) rotate(-360deg);
	}
}

@media screen and (max-width:999px) {
	div.opening div.logo-wrap {
		left: calc(50% + 20px);
	}
	div.opening .bat.bat1 {
		position: fixed;
		top: 50%;
		left: calc(50% - 150px);
		transform: translate(-50%, -50%);
	}
	div.opening .bat.bat2 {
		position: fixed;
		top: 50%;
		left: calc(50% + 135px);
		transform: translate(-50%, -50%);
	}
	div.opening img.pumpkin {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 40px;
		height: auto;
		transform: translate(-50%, -50%);
		transition: 0.85s linear;
		backface-visibility: hidden;
	}
	div.opening img.pumpkin.active {
		left: calc(50% - 100px);
		transform: translate(-50%, -50%) rotate(-360deg);
	}
}