@charset "UTF-8";
/* CSS Document */

/*====================================================================
FV
====================================================================*/
.sliderArea {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	display: block;
	position: relative;
}
.slick-slide img {
	width: 100%;
	height: auto;
}
.thumb {
	width: 85.5%;
	position: absolute;
	bottom: 10.5%;
	left: 9.3%;
}
.thumb img{width:100%;}
h1{
	max-width: 66.2%;
	width: 100%;
	position: absolute;
	top: 2.5%;
	left: 15%;
	z-index: 100;
	margin: 0;
}
h2{
	max-width: 80.5%;
	width: 100%;
	position: absolute;
	top: 14.5%;
	left: 9.5%;
	z-index: 100;
	margin: 0;
}
.fv_copy{
	max-width: 100%;
	width: 100%;
	position: absolute;
	bottom:0;
	left: 0;
	z-index: 100;
	margin: 0;
}
.btf {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-ms-align-items: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: center;
	gap: 0;
}

.btf01 {
	transform: rotate(-40deg);
	max-width: 8%;
	position: absolute;
	top: 5.5%;
	right: 5.5%;
}
	
.btf02 {
	transform: rotate(40deg);
	max-width: 7.5%;
	position: absolute;
	top: 23%;
	left: 5%;
}
	
.btf03 {
	transform: rotate(40deg);
	max-width: 7.5%;
	position: absolute;
	bottom: 6.3%;
	left: 5%;
}
	
.btf04 {
	transform: rotate(-40deg);
	max-width: 8%;
	position: absolute;
	bottom: 5%;
	right: 5%;
}
	
.btf05{
	transform: rotate(40deg);
	max-width: 8%;
	position: absolute;
	top: 15%;
	left: 8%;
}
	
.btf06{
	transform: rotate(-40deg);
	max-width: 7%;
	position: absolute;
	top: 23%;
	right: 8%;
}

/*.btf04 img{
	transform: rotate(50deg);
}*/
	
.btf01__l {
	transform-origin: 100% 50%;
	transform: rotate3d(0,1,0,0deg) skewY(0deg);
	animation: btf 3s ease-in-out infinite;
}

.btf01__r {
	transform-origin: 0% 50%;
	transform: rotate3d(0,1,0,85deg) skewY(0deg);
	animation: btf2 3s ease-in-out infinite;
}

.btf02__l {
	transform-origin: 100% 50%;
	transform: rotate3d(0,1,0,0deg) skewY(0deg);
	animation: btf 2.5s ease-in-out infinite;
}

.btf02__r {
	transform-origin: 0% 50%;
	transform: rotate3d(0,1,0,85deg) skewY(0deg);
	animation: btf2 2.5s ease-in-out infinite;
}

@keyframes btf {
	0% {transform: rotate3d(0,1,0,0deg) skewY(0deg);}
	50%{transform: rotate3d(0,1,0,85deg) skewY(15deg);}
	100%{transform: rotate3d(0,1,0,0deg) skewY(0deg);}
}

@keyframes btf2 {
	0% {transform: rotate3d(0,1,0,0deg) skewY(0deg);}
	50%{transform: rotate3d(0,1,0,85deg) skewY(-15deg);}
	100% {transform: rotate3d(0,1,0,0deg) skewY(0deg);}
}

.grow01 {
	position: absolute;
	top: 8%;
	left: 4.4%;
	width: 7%;
	margin: 0;
	animation: turn 6s linear infinite;
}

.grow02 {
	position: absolute;
	top: 3.5%;
	left: 10.5%;
	width: 5%;
	margin: 0;
	animation: turn 5.5s linear infinite;
}

.grow03 {
	position: absolute;
	top: 4.4%;
	right: 2.7%;
	width: 10.5%;
	margin: 0;
	animation: turn 6s linear infinite;
}
	
.grow04 {
	position: absolute;
	bottom: 4%;
	left: 4%;
	width: 7%;
	margin: 0;
	animation: turn 6s linear infinite;
}

.grow05 {
	position: absolute;
	bottom: 7.5%;
	left: 13%;
	width: 4.5%;
	margin: 0;
	animation: turn 5s linear infinite;
}

.grow06 {
	position: absolute;
	bottom: 7.5%;
	right: 13%;
	width: 4.5%;
	margin: 0;
	animation: turn 6s linear infinite;
}
	
.grow07 {
	position: absolute;
	bottom: 4%;
	right: 4%;
	width: 7%;
	margin: 0;
	animation: turn 5s linear infinite;
}

.grow08 {
	position: absolute;
	top: 4.5%;
	right: 7.3%;
	width: 6.5%;
	margin: 0;
}
	
.grow09 {
	position: absolute;
	top: 22.5%;
	left: 7.3%;
	width: 5.5%;
	margin: 0;
}

.grow10 {
	position: absolute;
	top: 34%;
	right: 5.3%;
	width: 4.5%;
	margin: 0;
}
	
.grow11 {
	position: absolute;
	bottom: 33.5%;
	left: 5.3%;
	width: 4.5%;
	margin: 0;
}
	
.grow12 {
	position: absolute;
	bottom: 5.5%;
	right: 5.3%;
	width: 10%;
	margin: 0;
}

.grow13 {
	position: absolute;
	top: 26.5%;
	left: 33.5%;
	width: 5%;
	margin: 0;
	animation: turn 6s linear infinite;
}
	
.grow14 {
	position: absolute;
	top: 13.5%;
	left: 41%;
	width: 5%;
	margin: 0;
	animation: turn 5s linear infinite;
}

.grow15 {
	position: absolute;
	top: 20%;
	right: 35.5%;
	width: 15%;
	margin: 0;
	animation: turn 5.5s linear infinite;
}

.grow16 {
	position: absolute;
	top: 20.5%;
	right: 34%;
	width: 5%;
	margin: 0;
	animation: turn 6s linear infinite;
}
	
.grow17 {
	position: absolute;
	top: 53%;
	left: 8%;
	width: 7%;
	margin: 0;
	transform: rotate(22deg);
}
	
.grow18 {
	position: absolute;
	top: 5%;
	left: 24%;
	width: 5%;
	margin: 0;
	transform: rotate(-20deg);
}
	
.grow19 {
	position: absolute;
	bottom: 24%;
	right: 10%;
	width: 7%;
	margin: 0;
	transform: rotate(10deg);
}

.grow__img {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
}

.grow__light {
	position: absolute;
	z-index: 2;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	filter: blur(0px) brightness(1);
	opacity: 1;
	animation: grow 3s ease-in-out infinite;
}

.grow04 .grow__img,.grow04 .grow__light{
	transform: rotate(50deg);
}

.grow05 .grow__img,.grow05 .grow__light{
	transform: rotate(-50deg);
}

.grow06 .grow__img,.grow06 .grow__light{
	transform: rotate(50deg);
}

.grow07 .grow__img,.grow07 .grow__light,
.grow08 .grow__img,.grow08 .grow__light{
	transform: rotate(30deg);
}
	
.grow09 .grow__img,.grow09 .grow__light{
	transform: rotate(-30deg);
}

.grow10 .grow__img,.grow10 .grow__light,
.grow11 .grow__img,.grow11 .grow__light{
	transform: rotate(35deg);
}
	
.grow12 .grow__img,.grow12 .grow__light{
	transform: rotate(28deg);
}

@keyframes grow {
	0% {
		filter: blur(0px) brightness(1);
		opacity: 0;
	}
	50%{
		filter: blur(10px) brightness(1.2);
		opacity: 1;
	}
	100% {
		filter: blur(0px) brightness(1);
		opacity: 0;
	}
}

@keyframes turn {
	0% {transform: rotate3d(0,1,0,-50deg);}
	50% {transform: rotate3d(0,1,0,50deg);}
	100% {transform: rotate3d(0,1,0,-50deg);
	}
}
	
.snow__l1{
	position: absolute;
	top: 1.8%;
	left: 7.8%;
	width: 8%;
	animation: rotate_anime 8s linear infinite;
}
	
.snow__l2{
	position: absolute;
	top: 8.8%;
	left: 1.8%;
	width: 5%;
	animation: rotate_anime 7.5s linear infinite;
}
	
.snow__l3{
	position: absolute;
	top: 23.2%;
	left: 8.2%;
	width: 5%;
	animation: rotate_anime 8.5s linear infinite;
}
	
.snow__l4{
	position: absolute;
	top: 29%;
	left: 13%;
	width: 8.0%;
	animation: rotate_anime 8s linear infinite;
}
	
.snow__r1{
	position: absolute;
	top: 5.8%;
	right:7.2% ;
	width: 6%;
	animation: rotate_anime 7s linear infinite;
}
	
.snow__r2{
	position: absolute;
	top: 1.8%;
	right: 18.2%;
	width: 3%;
	animation: rotate_anime 7s linear infinite;
}
	
.snow__r3{
	position: absolute;
	top: 27%;
	right: 4.2%;
	width: 3.5%;
	animation: rotate_anime 6s linear infinite;
}
	
.snow__r4{
	position: absolute;
	top: 34.2%;
	right: 5.8%;
	width: 3%;
	animation: rotate_anime 5.5s linear infinite;
}
	
.snow__r5{
	position: absolute;
	top: 26.0%;
	right: 3.8%;
	width: 5.5%;
	animation: rotate_anime 5s linear infinite;
}

@keyframes rotate_anime {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.snow-container {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.petal {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -3%;
  left: -3%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transform: rotate(15deg);
}

@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(3000deg);
  }
}