/*
<!--▼▼▼▼▼ SHOGATSU ▼▼▼▼▼-->
<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/shared/css/sp_201912.css?<?php echo date('YmdHis'); ?>">
<div class="christmas-wrap">
	<img class="christmas pc" src="<?php bloginfo('template_url'); ?>/shared/img/season/201912/img_christmas_pc.png" width="1300" height="230" alt="MERRY CHRISTMAS">
	<img class="christmas sp" src="<?php bloginfo('template_url'); ?>/shared/img/season/201912/img_christmas_sp.png" width="375" height="100" alt="MERRY CHRISTMAS">
	<img class="yukidaruma" src="<?php bloginfo('template_url'); ?>/shared/img/season/201912/img_christmas_yukidaruma.png" width="230" height="230" alt="雪だるま">
</div>
<script>
	Snowflakes({
		color: '#FFF',
		wind: true,
		speed: 1,
		minSize: 20,
		maxSize: 40,
		rotation: false,
		container: document.querySelector('.christmas-wrap')
	});
</script>
<!--▲▲▲▲▲ SHOGATSU ▲▲▲▲▲-->
*/



div.top-kv {
	background-image: url(../img/season/202401/img_kv_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
div.top-kv div.kv-txt {
	display: none;
}
header img.hdr-logo {
	filter: brightness(0) invert(1);
}
header div.navi-btn>div:before,
header div.navi-btn>div:after,
header div.navi-btn>div span {
	background-color: #FFF;
}



@media screen and (min-width:768px) {
	div.top-kv div.shogatsu-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	div.top-kv div.shogatsu-wrap:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10vw 50vw 0 0;
		border-color: #BA7802 transparent transparent transparent;
	}
	div.top-kv img.nawa {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0 auto;
		margin-top: calc(-330px - 5vw);
		z-index: 2;
		
		transform: scale(0);
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
		
		transition: 0.3s ease-in-out;
			-webkit-transition: 0.3s ease-in-out;
			-moz-transition: 0.3s ease-in-out;
	}
	div.top-kv.active img.nawa {
		transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
	}
	div.top-kv img.kami {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0 auto;
		margin-top: calc(100px - 5vw);
		z-index: 1;
		
		filter: alpha(opacity=0); /* IE 6,7*/
		opacity: 0;
			-ms-filter: "alpha(opacity=0)"; /* IE 8,9 */
			-moz-opacity: 0; /* FF,Netscape */
			-khtml-opacity: 0; /* Safari 1.x */
		zoom: 1; /* IE */
		
		transition: 2.5s ease-in-out;
			-webkit-transition: 2.5s ease-in-out;
			-moz-transition: 2.5s ease-in-out;
		
		transform-origin: top center;
		animation: furiko linear 5s infinite;
	}
	div.top-kv.active img.kami {
		margin-top: calc(200px - 5vw);
		
		filter: alpha(opacity=100); /* IE 6,7*/
		opacity: 1;
			-ms-filter: "alpha(opacity=100)"; /* IE 8,9 */
			-moz-opacity: 1; /* FF,Netscape */
			-khtml-opacity: 1; /* Safari 1.x */
		zoom: 1; /* IE */
	}
	
	@keyframes furiko {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(-5deg); }
		50% { transform: rotate(0deg); }
		75% { transform: rotate(5deg); }
		100% { transform: rotate(0deg); }
	}
	
	div.top-kv img.kin,
	div.top-kv img.ga,
	div.top-kv img.shin,
	div.top-kv img.nen {
		position: absolute;
		margin: 0 auto;
		z-index: 1;
		
		transform: scale(0);
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
		
		transition: 0.3s ease-in-out;
			-webkit-transition: 0.3s ease-in-out;
			-moz-transition: 0.3s ease-in-out;
	}
	div.top-kv.active img.kin,
	div.top-kv.active img.ga,
	div.top-kv.active img.shin,
	div.top-kv.active img.nen {
		transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
	}
	div.top-kv img.kin {
		top: 50%;
		left: 0;
		right: -800px;
		margin-top: calc(-400px - 5vw);
		
		transition-delay: 0.4s;
	}
	div.top-kv img.ga {
		top: 50%;
		left: 0;
		right: -800px;
		margin-top: calc(-150px - 5vw);
		
		transition-delay: 0.8s;
	}
	div.top-kv img.shin {
		top: 50%;
		left: -800px;
		right: 0;
		margin-top: calc(-150px - 5vw);
		
		transition-delay: 1.2s;
	}
	div.top-kv img.nen {
		top: 50%;
		left: -800px;
		right: 0;
		margin-top: calc(100px - 5vw);
		
		transition-delay: 1.6s;
	}
	div.top-kv img.cloud1 {
		position: absolute;
		width: 200px;
		height: 75px;
		
		animation: cloud1 40s linear infinite;
			-webkit-animation: cloud1 40s linear infinite;
			-moz-animation: cloud1 40s linear infinite;
	}
	div.top-kv img.cloud2 {
		position: absolute;
		
		animation: cloud2 40s linear infinite;
			-webkit-animation: cloud2 40s linear infinite;
			-moz-animation: cloud2 40s linear infinite;
	}
	
	@keyframes cloud1 {
		0% {top: 100px; left: -200px;}
		100% {top: 100px; left: 100%;}
	}
	@-webkit-keyframes cloud1 {
		0% {top: 100px; left: -200px;}
		100% {top: 100px; left: 100%;}
	}
	@-moz-keyframes cloud1 {
		0% {top: 100px; left: -200px;}
		100% {top: 100px; left: 100%;}
	}
	@keyframes cloud2 {
		0% {bottom: calc(100px + 10vw); right: -290px;}
		100% {bottom: calc(100px + 10vw); right: 100%;}
	}
	@-webkit-keyframes cloud2 {
		0% {bottom: calc(100px + 10vw); right: -290px;}
		100% {bottom: calc(100px + 10vw); right: 100%;}
	}
	@-moz-keyframes cloud2 {
		0% {bottom: calc(100px + 10vw); right: -290px;}
		100% {bottom: calc(100px + 10vw); right: 100%;}
	}
}

@media screen and (max-width:767px) {
	div.top-kv div.shogatsu-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	div.top-kv div.shogatsu-wrap:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20vw 70vw 0 0;
		border-color: #BA7802 transparent transparent transparent;
	}
	div.top-kv img.nawa {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		width: 320px;
		height: auto;
		margin: 0 auto;
		margin-top: calc(-190px - 5vw);
		z-index: 2;
		
		transform: scale(0);
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
		
		transition: 0.3s ease-in-out;
			-webkit-transition: 0.3s ease-in-out;
			-moz-transition: 0.3s ease-in-out;
	}
	div.top-kv.active img.nawa {
		transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
	}
	div.top-kv img.kami {
		display: none;
	}
	div.top-kv img.kin,
	div.top-kv img.ga,
	div.top-kv img.shin,
	div.top-kv img.nen {
		position: absolute;
		width: 80px;
		height: 80px;
		margin: 0 auto;
		z-index: 1;
		
		transform: scale(0);
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
		
		transition: 0.3s ease-in-out;
			-webkit-transition: 0.3s ease-in-out;
			-moz-transition: 0.3s ease-in-out;
	}
	div.top-kv.active img.kin,
	div.top-kv.active img.ga,
	div.top-kv.active img.shin,
	div.top-kv.active img.nen {
		transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
	}
	div.top-kv img.kin {
		bottom: 70px;
		left: -195px;
		right: 0;
		
		transition-delay: 0.4s;
	}
	div.top-kv img.ga {
		bottom: 70px;
		left: -65px;
		right: 0;
		
		transition-delay: 0.8s;
	}
	div.top-kv img.shin {
		bottom: 70px;
		left: 0;
		right: -65px;
		
		transition-delay: 1.2s;
	}
	div.top-kv img.nen {
		bottom: 70px;
		left: 0;
		right: -180px;
		
		transition-delay: 1.6s;
	}
	div.top-kv img.cloud1 {
		position: absolute;
		width: 150px;
		height: 56px;
		
		animation: cloud1 30s linear infinite;
			-webkit-animation: cloud1 30s linear infinite;
			-moz-animation: cloud1 30s linear infinite;
	}
	div.top-kv img.cloud2 {
		position: absolute;
		width: 200px;
		height: 75px;
		
		animation: cloud2 30s linear infinite;
			-webkit-animation: cloud2 30s linear infinite;
			-moz-animation: cloud2 30s linear infinite;
	}
	
	@keyframes cloud1 {
		0% {top: 80px; left: -150px;}
		100% {top: 80px; left: 100%;}
	}
	@-webkit-keyframes cloud1 {
		0% {top: 80px; left: -150px;}
		100% {top: 80px; left: 100%;}
	}
	@-moz-keyframes cloud1 {
		0% {top: 80px; left: -150px;}
		100% {top: 80px; left: 100%;}
	}
	@keyframes cloud2 {
		0% {bottom: calc(100px + 10vw); right: -200px;}
		100% {bottom: calc(100px + 10vw); right: 100%;}
	}
	@-webkit-keyframes cloud2 {
		0% {bottom: calc(100px + 10vw); right: -200px;}
		100% {bottom: calc(100px + 10vw); right: 100%;}
	}
	@-moz-keyframes cloud2 {
		0% {bottom: calc(100px + 10vw); right: -200px;}
		100% {bottom: calc(100px + 10vw); right: 100%;}
	}
}