/*anime*/
#bg-wrap{
	position: fixed;
    width: 100%;
    height: 100vh;
	pointer-events: none;
	transition:transform 1s ease;
	z-index: 100;
}

#bg-anime{
	margin: auto; width: 500px;height: 1150px;
	background-repeat: no-repeat;
	background-size: auto;
	position: absolute;
	z-index: -5;
	pointer-events: none;
	background-image: url("../images/anime-bg.png");
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transform: translateY(600px) scale(0.5);
}
	
[class*="bg1"]{background-position-y:0;}	
		.bg1-1{background-position-x: 0px;}
		.bg1-2{background-position-x: calc(-500px *1);}
		.bg1-3{background-position-x: calc(-500px *2);}
		.bg1-4{background-position-x: calc(-500px *3);}
		.bg1-5{background-position-x: calc(-500px *4);}
		.bg1-6{background-position-x: calc(-500px *5);}


/*scroll anime*/
.sa {
  opacity: 1;
  transition: all 0.5s ease;
}

.sa.show {
  opacity: 0;
  transform:none;
}
.sa.show-kyouin {
	transition: all 2s ease;
}


.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {ransform: rotate(-5deg);}


.z1 { z-index:1;}
.z0 { z-index:0;}




/*花弁　小*/
.cherry-blossom-container {
	 display: block;
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 100;
    top: 0;
	 opacity: 1;
}
.cherry-blossom-container.fix-sec{
	z-index: 0;
}

.petal {
  position: absolute;
  background-color: #ffc0cb; /* 花びらの色 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
	opacity: 0.8;
}

.petal.z-petal01{
	animation: animate-petal1 15s ease;
}

.petal.z-petal01.z-petal02{
	animation: animate-petal2 15s ease;
}

.petal.fly-petal{
	animation: animate-petal3 15s ease;
}


.petal::after{
	font-size: 15px;
	color: #F26E9A;
	position: absolute;
	left: 20%;
   top: 20%;
}

.petal::before {;
  content: '';
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

.a1::after{content: 'あ'}
.a2::after{content: 'い'}
.a3::after{content: 'う'}
.a4::after{content: 'え'}
.a5::after{content: 'お'}

.k1::after{content: 'か'}
.k2::after{content: 'き'}
.k3::after{content: 'く'}
.k4::after{content: 'け'}
.k5::after{content: 'こ'}

.s1::after{content: 'さ'}
.s2::after{content: 'し'}
.s3::after{content: 'す'}
.s4::after{content: 'せ'}
.s5::after{content: 'そ'}

.t1::after{content: 'た'}
.t2::after{content: 'ち'}
.t3::after{content: 'つ'}
.t4::after{content: 'て'}
.t5::after{content: 'と'}

.n1::after{content: 'な'}
.n2::after{content: 'に'}
.n3::after{content: 'ぬ'}
.n4::after{content: 'ね'}
.n5::after{content: 'の'}

.h1::after{content: 'は'}
.h2::after{content: 'ひ'}
.h3::after{content: 'ふ'}
.h4::after{content: 'へ'}
.h5::after{content: 'ほ'}

.m1::after{content: 'ま'}
.m2::after{content: 'み'}
.m3::after{content: 'む'}
.m4::after{content: 'め'}
.m5::after{content: 'も'}

.y1::after{content: 'や'}
.y2::after{content: 'ゆ'}
.y3::after{content: 'よ'}

.w1::after{content: 'わ'}
.w2::after{content: 'を'}
.w3::after{content: 'ん'}


/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 20vh;
    opacity: 0;
    transform: rotate(0deg) translateX(15px);
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    top: 120vh;
    transform: rotate(500deg) translateX(30px);
  }
}

@keyframes animate-petal1 {
  0% {
    top: 20vh;
    opacity: 0;
    transform: rotate(0deg) translateX(15px) scale(0.5);
  }
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    top: 110vh;
    transform: rotate(500deg) translateX(30px) scale(0.5);
  }
}

@keyframes animate-petal2 {
  0% {
    top: 20vh;
    opacity: 0;
    transform: rotate(0deg) translateX(15px) scale(1.5);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 130vh;
    transform: rotate(500deg) translateX(-30px) scale(1.5);
  }
}


@keyframes animate-petal3 {
  0% {
    top: 20vh;
    opacity: 0;
    transform: rotate(0deg) translateX(15px);
  }
  10% {
    opacity: 1;
  }
  50% {
	 top: 50vh;
	 opacity: 1;
  }
	75%{
		opacity: 0;
	}
  100% {
    top: -20vh;
    transform: rotate(500deg) translateX(80px) scale(1.5);
  }
}



/*花弁　大*/
.random_message > div{
	width: 100%;
   height: 100%;
   position: fixed;
	opacity: 0;
	transition: all 4s ease;
	left: 0;
}

.random_message .random-wrap{
    z-index: 999;
    width: 346px;
    height: 507px;
    box-sizing: border-box;
    background-image: url(../images/sakura1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px 50px 50px;
	 margin: auto;
	 position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	 font-size:20px;
	animation-fill-mode:forwards;
	overflow: hidden;
	line-height: 1.8;
}


.random_message .random_m02 .random-wrap{
	background-image: url(../images/sakura2.png);
}
.random_message .random_m03.random-wrap{
	background-image: url(../images/sakura3.png);
}

.random_message .from-name{
	text-align: center;
   margin-top: 30px;
	display: block;
}

.random_message > div .random-inner span:not(.from-name){
	font-size: 40px;
	vertical-align: top;
	background-image: url(../images/kazari-hana01.png);
	background-position: center;
	background-repeat: no-repeat;
   background-size: contain;
   display: inline;
	line-height: 0.7;
	color: #f9749e;
}

/*0%*/
.random_message > div{
	transform: rotate(-60deg) translate(0px,-600px);
	opacity: 0;
}
.random_message > div .random-wrap{
	transform: scale(0.1);
}

/*50%*/
.random_message > div.in{
   transform: rotate(0deg) translate(0px,-0px);
	opacity: 1;
}
.random_message > div.in .random-wrap{
	transform: scale(1);
	transition: all 5s cubic-bezier(.65,0,.35,1) 0s;
}
.random_message > div.in .random-inner{
	opacity: 1;
	 transition: all 2s ease 3s;
}


/*100%*/
.random_message >div.out{
	transform: rotate(-30deg) translate(0px,-600px);
	opacity: 0;
}
.random_message > div.out .random-wrap{
	transform: scale(0.1);
	transition: all 2s cubic-bezier(.26,0,0,1) 1s;
}
.random_message > div.out .random-inner{
	opacity: 0;
	 transition: all 1.5s cubic-bezier(.26,0,0,1) 0.5s;
}



/*02パターン*/
.random_message > div.random_m02{
	transform: rotate(60deg) translate(300px,-600px);
}

.random_message > div.random_m02.in{
	transform: rotate(0deg) translate(0px,0px);
}

.random_message >div.random_m02.out{
	transform: rotate(30deg) translate(-300px,-600px);

}

/*03パターン*/
.random_message > div.random_m03{
	transform: rotate(20deg) translate(-300px,-600px);
}

.random_message > div.random_m03.in{
	transform: rotate(0deg) translate(0px,0px);
}

.random_message >div.random_m03.out{
	transform: rotate(-20deg) translate(300px,-600px);
	opacity: 0;
}

@media only screen and (max-width: 560px)  {
	.random_message{
	 transform: scale(0.75);
    left: 0;
    width: 100%;
	}
}