@charset "utf-8";
/* CSS Document */
/* -- ローディング画面 -- */
#loading {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999999999;
	background: #82b0ddab;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	text-align:center;
	color:#fff;
}
#loading_logo {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 150px;
	height: auto;
	transform: translate(-50%, -50%);
}
#loading_logo img {
	width: clamp(100px, 31.25vw, 260px);
	filter: drop-shadow(1px 2px 3px #0000007d);
}
header {
    top: -150px;
    opacity: 0;
    transition: all 0.5s ease-out;
}
header.header_active {
    top: 0;
    opacity: 1;
    transition: all 0.5s ease-out;
}
.purchase_promotion {
	bottom: -150px;
	opacity: 0;
	transition: all 0.5s ease-out;
}
.purchase_promotion_active {
	bottom: 10px;
	opacity: 1;
	transition: all 0.5s ease-out;
}
/*　ーー　slider_01　ーー　*/
.slick-prev, .slick-next {
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	z-index: 999999;
}
.slick-prev:before, .slick-next:before {
	opacity: 0.3;
	font-size: 30px;
}

/*　ーー　/slider_01　ーー　*/

/*　ーー　bound　ーー　*/
.bound {
  animation: bound 3s infinite;
}
@keyframes bound {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-25px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
/*　ーー　/bound　ーー　*/

/*　ーー　fadeUp　ーー　*/
.fuwa_scroll_fadeUp {
	opacity: 0;
	transform: translate(0,30);
	transition: translate all 0.5s;
}
.box{
	opacity: 0;
}
.fuwa_scroll_fadeUp.active {
	opacity: 1;
	transform: translate(0,0);
	animation-name: fadeUpAnime;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



/* 　Y 軸（横へ） */
.rotateY {
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
	}
  	to{
		transform: rotateY(-360deg);
		opacity: 1;
    }
}














@media screen and (max-width: 768px) {
	.slick-prev, .slick-next {
		top: 60%;
		transform: translateY(-60%);
	}

	
	
	
	
	
	
	
	
	
}