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


#mobile_header{
    display: none;}


* {
    margin: 0px;
    padding: 0px;
}


body{
	background-color: #F2EEEA;
	width: 100%;
	margin: 0;
	padding: 0;
}



.container0{
	display: block;
	position: relative;
	background-color: #fff;
	width:800px;
	margin: 0 auto;
	padding: 0;
}

.container0 img:first-of-type{
	position: absolute;
	display: block;
	width:800px;
	left: 0;
	right: 0;
	top: 0;
	margin:auto;
	padding: 0;
}


.container1{
	display: block;
	position:relative;
	width:800px;
	height:300px;
	margin: 0 auto;
	padding: 0;
	top: 290px;
}



/*フォント*/
.bound span{
 font-family: 'Zen Maru Gothic', sans-serif;
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom: 50px;
	margin: auto;
	font-size:5em;
	font-weight:bold;
	color:#000;
	text-align:center;
	width:100px;
	height:100px;
	opacity: 0;
}


/*アニメーション指定
文字数に合わせてleftや開始時間（2つ目のs）を設定する*/
.bound span:nth-child(1){ left:-4.2em; animation: bound-anim1 0.8s 0.0s 1 forwards; transform: rotate(-10deg);color: #ef7c00;}
.bound span:nth-child(2){ left:-2.8em; animation: bound-anim2 0.8s 0.1s 1 forwards;transform: rotate(10deg);}
.bound span:nth-child(3){	left:-1.8em; animation: bound-anim3 0.8s 0.2s 1 forwards;transform: rotate(5deg);}

.bound span:nth-child(4){	left: -1.0em; animation: bound-anim3 0.8s 0.3s 1 forwards;transform: rotate(5deg);}

.bound span:nth-child(5){	left: -0.5em; animation: bound-anim1 0.8s 0.4s 1 forwards;transform: rotate(-10deg);}

.bound span:nth-child(6){ left: 1.6em; animation: bound-anim2 0.8s 0.5s  1 forwards;transform: rotate(10deg);color: #009245;}

.bound span:nth-child(7){ left: 2.2em; animation: bound-anim1 0.8s 0.6s 1 forwards;transform: rotate(-10deg);}
		
.bound span:nth-child(8){ left: 3.2em; animation: bound-anim2 0.8s 0.7s 1 forwards;transform: rotate(10deg);}

.bound span:nth-child(9){ left: 4.2em; animation: bound-anim2 0.8s 0.8s 1 forwards;transform: rotate(10deg);}



/*アニメーションキーフレーム
小さいフォントサイズの場合はtopの数値も縮小すると飛び過ぎない*/
@keyframes bound-anim1 {
0% {top: 0;transform: scale(1); transform: rotate(-10deg);	opacity: 0;}
30% {top: -25%;transform: rotate(-10deg);}
50% {transform: scale(1);transform: rotate(-10deg);}
90% {top: 0;transform: scale(1.2,1);transform: rotate(-10deg);}
100% {opacity: 1; top: 0;transform: scale(1);transform: rotate(-10deg);}
}


@keyframes bound-anim2 {
0% {top: 0;transform: scale(1); transform: rotate(10deg);	opacity: 0;}
30% {top: -25%;transform: rotate(10deg);}
50% {transform: scale(1);transform: rotate(10deg);}
90% {top: 0;transform: scale(1.2,1);transform: rotate(10deg);}
100% {opacity: 1; top: 0;transform: scale(1);transform: rotate(10deg);}
}

@keyframes bound-anim3 {
0% {top: 0;transform: scale(1); transform: rotate(5deg);	opacity: 0;}
30% {top: -25%;transform: rotate(5deg);}
50% {transform: scale(1);transform: rotate(5deg);}
90% {top: 0;transform: scale(1.2,1);transform: rotate(5deg);}
100% {opacity: 1; top: 0;transform: scale(1);transform: rotate(5deg);}
}

		
		
	

.fadeIn{
font-family: 'Zen Maru Gothic', sans-serif;
position: absolute;
width: 0px;
right: 0;
top:200px;
bottom: 0;
margin: auto;		
animation-duration:0.5s;
animation-fill-mode:forwards;
animation-delay:1s;
opacity:0;
font-size:2.4em;
}

.fadeIn2{
font-family: 'Zen Maru Gothic', sans-serif;
position: absolute;
width: 20px;
right: 0;
top:190px;
bottom: 0;
margin: auto;		
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay:1.3s;
opacity:0;
	font-size: 2.5em;
}
			
.f_3{
animation-name:fadeInAnime3;
left: -1.3em;
	top: 205px;
transform: rotate(-10deg);
color: #ea5532;
}


.f_1{
animation-name:fadeInAnime;
left: -11.2em;
transform: rotate(-10deg);
color: #1b1464;
}

.f_2{
animation-name:fadeInAnime2;
left: -9em;
transform: rotate(10deg);		  
color: #fff;
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
}

.f_2:nth-of-type(3){
animation-name:fadeInAnime2;
left: -8em;
transform: rotate(10deg);
}


.f_1:nth-of-type(4){
animation-name:fadeInAnime;
left: -6em;
transform: rotate(-10deg);
color: #fff;
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
}	

.f_1:nth-of-type(5){
animation-name:fadeInAnime;
	top: 200px;
left: 0em;
transform: rotate(-10deg);
color: #ea5532;
	font-size:2.6em;
}	


@keyframes fadeInAnime{
10% {
opacity: 1;
transform: scale(1.2)rotate(-10deg);
}
50%{
opacity: 1;
transform: scale(2)rotate(-10deg);
}
100%{
opacity: 1;
transform: scale(1.6)rotate(-10deg);
}
}		
		
@keyframes fadeInAnime2{
10% {
opacity: 1;
transform: scale(1.2)rotate(10deg);
}
50%{
opacity: 1;
transform: scale(2)rotate(10deg);
}
100%{
opacity: 1;
transform: scale(1.6)rotate(10deg);
}
}

@keyframes fadeInAnime3{
10% {
opacity: 1;
transform: scale(1.2)rotate(-10deg);
}
50%{
opacity: 1;
transform: scale(2.5)rotate(-10deg);
}
100%{
opacity: 1;
transform: scale(2.2)rotate(-10deg);
}
}

@keyframes fadeInAnime4{
10% {
opacity: 0;
}

50%{
opacity: 0;
}

100%{
opacity: 1;
}
}

#outline{
opacity: 0.01;
}

#stroke {
stroke-dasharray:3000 3000;

}



.bound2 span{
 font-family: 'Zen Maru Gothic', sans-serif;
	position: absolute;
	left: 0;
	right: 0;
	top: 200px;
	bottom: 0;
	margin: auto;
	font-size:5em;
	font-weight:bold;
	color:#000;
	text-align:center;
	width:0;
	height:0;
	opacity: 0;
}
	

.bound2 span:nth-child(1){ left:0.4em; animation: bound-anim6 0.8s 1.6s 1 forwards; transform: rotate(-5deg);}
.bound2 span:nth-child(2){ left:1.2em; animation: bound-anim6 0.8s 1.7s 1 forwards;transform: rotate(5deg);}
.bound2 span:nth-child(3){	left:2em;  animation: bound-anim5 0.8s 1.8s 1 forwards;transform: rotate(-5deg);}

.bound2 span:nth-child(4){	left: 2.8em; animation: bound-anim5 0.8s 1.9s 1 forwards;transform: rotate(-5deg);}

.bound2 span:nth-child(5){	left: 3.9em; animation: bound-anim6 0.8s 1.9s 1 forwards;transform: rotate(5deg);
}
.bound2 span:nth-child(6){	left: 5em; animation: bound-anim6 0.8s 1.9s 1 forwards;transform: rotate(5deg);
}

/*アニメーションキーフレーム
小さいフォントサイズの場合はtopの数値も縮小すると飛び過ぎない*/


@keyframes bound-anim5 {
0% {top: 0;transform: scale(1); transform: rotate(-5deg);	opacity: 0;}
30% {top: 25%;transform: rotate(-5deg);}
50% {transform: scale(1);transform: rotate(-5deg);}
90% {top: 5%;transform: scale(1.2,1);transform: rotate(-5deg);}
100% {opacity: 1; top: 5%;transform: scale(1);transform: rotate(-5deg);}
}

@keyframes bound-anim6 {
0% {top: 0;transform: scale(1); transform: rotate(5deg);	opacity: 0;}
30% {top: 25%;transform: rotate(5deg);}
50% {transform: scale(1);transform: rotate(5deg);}
90% {top: 0;transform: scale(1.2,1);transform: rotate(5deg);}
100% {opacity: 1; top: 0;transform: scale(1);transform: rotate(5deg);}
}


h1{
position: absolute;
font-family: 'Kosugi Maru', sans-serif;
font-size: 20px;
text-align: center;
left: 0;
right: 0;
top: 280px;
bottom: 0;
margin: auto;
animation-name:fadeInAnime4;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay:1.8s;
opacity:0;
}