@charset "UTF-8";

/***********************************

 PCコンテンツ

 ***********************************/

#pcContent > p > span > img{
	transform-origin:bottom center;
}

.pc #pcContent > p:nth-child(1) > span > img{
	animation: wave 3s steps(1) .3s infinite;
	transform-origin:bottom center;
}

.pc #pcContent > p:nth-child(2) > span > img{
	animation: slyde 3s steps(1) .3s infinite;
	transform-origin:bottom center;
}

.pc #pcContent > p:nth-child(3) > span > img{
	animation: jump 3s steps(1) .3s infinite;
	transform-origin:bottom center;
}


@keyframes wave{

	0% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(-7deg) translateY(-5px);
	}
	35% {
		transform: rotate(0);
	}
	45% {
		transform: rotate(7deg) translateY(-5px);
	}
	55% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}


@keyframes slyde{

	0% {
		transform: translateX(0);
	}
	60% {
		 transform: translateX(15px);
	}
	65% {
		transform: translateX(0);
	}
	70% {
		 transform: translateX(15px);
	}
	75% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes jump{

	0% {
		transform: translateY(0);
	}
	40% {
		 transform: translateY(-10px);
	}
	45% {
		transform: translateY(0);
	}
	50% {
		 transform: translateY(-10px);
	}
	55% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}


/* for Sp --------------------*/
@media screen and (max-width:1280px){

	.pc #pcContent > p:nth-child(1) > span > img,
	.pc #pcContent > p:nth-child(2) > span > img,
	.pc #pcContent > p:nth-child(3) > span > img{
		animation:unset;
	}


}


/***********************************

 ページ大枠

 ***********************************/
.decoImg{
	display:inline-block;
	/*overflow:hidden;*/
	position:absolute!important;
	z-index:5;
}

.decoImg > img{
	position:relative;
	top:0;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}



/* for Sp --------------------*/
@media screen and (max-width:768px){

	.decoImg{
		
	}

}


/***********************************

 カバー

 ***********************************/


#deoA04{
	width:100%;
	bottom:0;
	left: 0;
}
#deoA04 > img:nth-child(1){
	opacity:0.0;
	top:30px;
	left:30px;
}

#deoA04 > img:nth-child(2){
	opacity:0.0;
	position: absolute;
	top:-30px;
	right:50px;
	transition-delay: 0.5s;
}

#deoA04.scon > img:nth-child(1){
	opacity:1.0;
	top:0;
}

#deoA04.scon > img:nth-child(2){
	opacity:1.0;
	top:-60px;
	right:30px;
}

/* for Sp --------------------*/
@media screen and (max-width:768px){

	#deoA04 img:nth-child(1){
		width:82vw;
		height:auto;
		left:3vw;
	}
	#deoA04 img:nth-child(2){
		width:27vw;
		height:auto;
		top:0;
		right:6vw;
	}

	#deoA04.scon > img:nth-child(2){
		top:-3vw;
		right:3vw;
	}
	
}



/***********************************

 展示・発表

 ***********************************/

#deoA01{
	top:30px;
	right:45px;
}

#deoA01 > img{
	opacity:0.0;
	right:-135%;
}

#deoA01.scon > img{
	opacity:1.0;
	right:0;
}


#deoA02{
	bottom:400px;
	left:60px;
}

#deoA02 > img{
	opacity:0.0;
	left:-135%;
}

#deoA02.scon > img{
	opacity:1.0;
	left:0;
}



#deoA03{
	bottom:200px;
	right:45px;
}
#deoA03 > img{
	opacity:0.0;
	right:-135%;
}

#deoA03.scon > img{
	opacity:1.0;
	right:0;
}





/* for Sp --------------------*/
@media screen and (max-width:768px){

	#deoA01{
		top:-5vw;
		right:5vw;
	}

	#deoA01 img{
		width:17vw;
		height:auto;
	}


	#deoA02{
		bottom:300px;
		left:3vw;
	}

	#deoA02 img{
		width:16vw;
		height:auto;
	}

	#deoA03{
		bottom:60vw;
		right:3vw;
	}
	#deoA03 img{
		width:16vw;
		height:auto;
	}

	#deoA03 img{
		width:16vw;
		height:auto;
	}
}


/***********************************

 イベント

 ***********************************/

#deoB01{
	top:-180px;
	left:40px;
}

#deoB01 > img{
	opacity:0.0;
	left:-135%;
}

#deoB01.scon > img{
	opacity:1.0;
	left:0;
}

#deoB02{
	top:15%;
	right:0;
}

#deoB03{
	top:60%;
	right:0;
}

#deoB04{
	top:1em;
	right:0;
}

#deoB02 > img,
#deoB03 > img,
#deoB04 > img{
	opacity:0.0;
	right:-120%;
}

#deoB02.scon > img,
#deoB03.scon > img,
#deoB04.scon > img{
	opacity:1.0;
	right:0;
}



/* for Sp --------------------*/
@media screen and (max-width:768px){
	#deoB01{
		top:12vw;
		left:10vw;
	}

	#deoB01 img{
		width:18vw;
		height:auto;
	}

	#deoB02{
		top:25%;
		right:0;
	}

	#deoB03{
		top:70%;
		right:0;
	}

	#deoB04{
		top:1em;
		right:0;
	}

	#deoB02 > img,
	#deoB03 > img,
	#deoB04 > img{
		width:30vw;
		height:auto;
	}

}


/***********************************

 オープンキャンバス

 ***********************************/
#deoC01{
	top:0;
	left:45px;
}
#deoC01 > img{
	opacity:0.0;
	left:-135%;
}

#deoC01.scon > img{
	opacity:1.0;
	left:0;
}



#deoC02{
	top:0;
	right:20px;
	text-align: center;
}


#deoC02 > img:nth-child(3){
	opacity:0.0;
	right:-135%;
}


#deoC02 > img:nth-child(1){
	opacity:0.0;
	top:25px;
	-webkit-transform: scale(0.75);
	transform: scale(0.75);
}

#deoC02.scon > img:nth-child(1){
	opacity:1.0;
	top:0;
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	transition-delay: 0.3s;
}

#deoC02.scon > img:nth-child(3){
	opacity:1.0;
	right:0;
}




#deoC03{
	width:100%;
	text-align:center;
	bottom:0;
	left:0;
	z-index:initial;
	overflow:hidden;
	line-height:0;
}

#deoC03.scon{
	bottom:0;
}


#deoC03 > img:nth-child(1){
	top:0;
	left:25px;
	opacity:0.0;
	-webkit-transform: scale(0.75);
	transform: scale(0.75);
	transition-delay: 0.3s;
	vertical-align:top;
}

#deoC03.scon > img:nth-child(1){
	top:0;
	left:0;
	opacity:1.0;
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}

#deoC03 > img:nth-child(2){
	opacity:0.0;
	left:-60px;
	top:250px;
}

#deoC03.scon > img:nth-child(2){
	opacity:1.0;
	top:0;
}


/* for Sp --------------------*/
@media screen and (max-width:768px){

	#deoC01{
		left:2vw;
	}

	#deoC01 img{
		width:24vw;
		height:auto;
	}

	#deoC02{
		top:4vw;
		right:2vw;
	}

	#deoC02 > img:nth-child(1){
		width:25vw;
		height:auto;
	}
	#deoC02 > img:nth-child(3){
		width:17vw;
		height:auto;
	}


	#deoC03{
		/**/
	}

	#deoC03 > img:nth-child(1){
		width:29vw;
		height:auto;
	}
	#deoC03 > img:nth-child(2){
		width:60vw;
		height:auto;
		left:-3vw;
	}
}


/***********************************

 飲食・休憩スペース

 ***********************************/

#deoE01{
	top: 350px;
	right: 40px;
}

#deoE01 > img{
	opacity:0.0;
	right:-120%;
}

#deoE01.scon > img{
	opacity:1.0;
	right:0;
}


/* for Sp --------------------*/
@media screen and (max-width:768px){

	#deoE01{
		top: 30%;
		right: 3vw;
	}

	#deoE01 > img{
		width:31vw;
		height:auto;
		right:-120%;
	}

	#deoE01.scon > img{
		right:0;
	}
}



/***********************************

 フェード画像

 ***********************************/
.fadeImg span{
	position:relative;
	opacity:0.0;
	top:50px;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.fadeImg span:nth-child(2){
	transition-delay: 0.1s;
}

.fadeImg.scon span{
	opacity:1.0;
	top:0;
}


#section_b .fadeImg{

}
