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



/*　10月ガーデンイベント おばけかぼちゃ収穫イベント　*/


#obakepumpkin{
	background:url(../../../image/event/october2016/garden/bg_or.png) repeat #f9a641;
	position:relative;
	display:block;
	width:100%;
	overflow:hidden;
	
}




#obakepumpkin .main{
	width:1000px;
	height:100%;
	position:relative;
	margin:0 auto;
	
}

#obakepumpkin h2{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:0 auto;
	width:1000px;
	height:174px;
	background:url(../../../image/event/october2016/garden/title.png) top center no-repeat;
}


#obakepumpkin .titleLogo {
	position:absolute;
	top:60px;
	left:0px;
	width:1000px;
	height:155px;
	background:url(../../../image/event/october2016/garden/title_logo.png) top center no-repeat;
	z-index:35px;	
}


#obakepumpkin .obake01 {
	position:absolute;
	top:68px;
	left:185px;
	width:53px;
	height:57px;
	background:url(../../../image/event/october2016/garden/obake01.png);
	z-index:25px;
	animation:obake1 2.5s ease-in infinite;	
}


@keyframes obake1{
    0% {opacity:0;transform: translate(0px,0px);}
	25% {opacity:1;transform: translate(-15px,40px);}
    70% {opacity:1;transform: translate(-15px,40px);}
	100% {opacity:0;transform: translate(0px,0px);}
}




#obakepumpkin .obake02 {
	position:absolute;
	top:74px;
	left:408px;
	width:92px;
	height:63px;
	background:url(../../../image/event/october2016/garden/obake02.png);
	z-index:25px;
	animation:obake2 3.5s ease-in infinite;	
}


@keyframes obake2{
    0% {opacity:0;transform: translate(0px,0px);}
	45% {opacity:1;transform: translate(-70px,-40px);}
    60% {opacity:1;transform: translate(-70px,-40px);}
	85% {opacity:0;transform: translate(-90px,-20px);}
	100% {opacity:0;transform: translate(0px,0px);}
}

#obakepumpkin .obake03 {
	position:absolute;
	top:74px;
	left:520px;
	width:69px;
	height:77px;
	background:url(../../../image/event/october2016/garden/obake03.png);
	z-index:25px;
	animation:obake3 2.0s ease-in infinite;	
}


@keyframes obake3{
    0% {opacity:0;transform: translate(0px,0px);}
	20% {opacity:0;transform: translate(95px,-25px);}
    55% {opacity:1;transform: translate(150px,-50px);}
	95% {opacity:0;transform: translate(180px,-20px);}
	100% {opacity:0;transform: translate(0px,0px);}
}



#obakepumpkin .kemuri01 {
	position:absolute;
	top:25px;
	left:0px;
	width:1000px;
	height:155px;
	background:url(../../../image/event/october2016/garden/kemuri01.png);
	z-index:20px;
	animation:kemuri1 4.5s ease-in-out infinite;	
}


@keyframes kemuri1{
    0% {opacity:0;transform: translate(0px,0px);}
	45% {opacity:0.8;transform: translate(12px,-2px);}
    70% {opacity:1;transform: translate(-6px,-6px);}
	100% {opacity:0;transform: translate(8px,-38px);}
}





#obakepumpkin .kemuri02 {
	position:absolute;
	top:15px;
	left:0px;
	width:1000px;
	height:155px;
	background:url(../../../image/event/october2016/garden/kemuri02.png);
	z-index:20px;
	animation:kemuri2 3.0s ease-in-out infinite;	
}


@keyframes kemuri2{
    0% {opacity:0;transform: translate(0px,0px);}
	35% {opacity:0.8;transform: translate(-6px,-4px);}
    60% {opacity:1;transform: translate(4px,-16px);}
	100% {opacity:0;transform: translate(-6px,-32px);}
}







/*----------------------

#obakepumpkin .kemuri01 {
	position:absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:155px;
	background:url(../../../image/event/october2016/garden/kemuri01.png);
	z-index:20px;
	animation:kemuri1 2.5s ease-in-out infinite;	
}


@keyframes kemuri1{
    0% {opacity:0;transform: translate(-80px,100px);}
	45% {opacity:1;transform: translate(100px,-10px);}
    70% {opacity:1;transform: translate(-90px,-40px);}
	100% {opacity:0;transform: translate(100px,-160px);}
}

@-webkit-keyframes kemuri1{
    0% {opacity:0;transform: translate(-80px,100px);}
	45% {opacity:1;transform: translate(100px,-10px);}
    70% {opacity:1;transform: translate(-90px,-40px);}
	100% {opacity:0;transform: translate(100px,-160px);}
}



#obakepumpkin .kemuri02 {
	position:absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:155px;
	background:url(../../../image/event/october2016/garden/kemuri02.png);
	z-index:20px;
	animation:kemuri2 2.5s ease-in-out infinite;	
}


@keyframes kemuri2{
    0% {opacity:0;transform: translate(100px,100px);}
    95% {opacity:1;transform: translate(-50px,-180px);}
	100% {opacity:0;transform: translate(-50px,-180px);}
}

@-webkit-keyframes kemuri2{
    0% {opacity:0;transform: translate(100px,100px);}
    95% {opacity:1;transform: translate(-50px,-180px);}
	100% {opacity:0;transform: translate(-50px,-180px);}
}

---------------- */ 


#obakepumpkin .menu_gaiyou{
	position:absolute;
	display:block;
	left:810px;
	top:8px;
	z-index:11;
}

#obakepumpkin .menu_item{
	position:absolute;
	display:block;
	left: 878px;
	top:34px;
	z-index:12;
}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}


#obakepumpkin .menu_gaiyou:hover, #obakepumpkin .menu_gaiyoui:focus, #obakepumpkin .menu_gaiyou:active,
#obakepumpkin .menu_item:hover, #obakepumpkin .menu_item:focus, #obakepumpkin .menu_item:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}




#obakepumpkin .line_bg{
	width:1000px;
	background:url(../../../image/event/october2016/garden/bg02.png) top center repeat-y;
	position:relative;	
}


#obakepumpkin .gaiyou01{
	width:990px;
	height:630px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/gaiyou_01.png) no-repeat top center;
	position:relative;
}








#obakepumpkin .gaiyou02{
	width:990px;  
	height:433px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/gaiyou_02.png) no-repeat top center;
	position:relative;
}


#obakepumpkin .gaiyou03{
	width:990px;
	height:1132px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/gaiyou_03.png) no-repeat top center;
	position:relative;
}


#obakepumpkin .gaiyou04{
	width:990px;
	height:645px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/gaiyou_04.png) no-repeat top center;
	position:relative;
}


#obakepumpkin .gaiyou04 .gotown{
	position:absolute;
	display:block;
	left: 560px;
	top: 380px;
	
}


#obakepumpkin .gaiyou05{
	width:953px;
	height:320px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/gaiyou_05.png) no-repeat top center;
	position:relative;
}

#obakepumpkin .gaiyou05 .gotoshop{
	position:absolute;
	display:block;
	left: 156px;
	top: 211px;
	
}

#obakepumpkin .gaiyou06{
	width:908px;
	height:326px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/gaiyou_06.png) no-repeat top center;
	position:relative;
}

#obakepumpkin .gaiyou06 p{
	position:absolute;
	display:block;
	left: 70px;
	top: 100px;
	color:#c389f0;
}

#obakepumpkin .footer{
	width:1000px;
	height:158px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/footer.png) no-repeat top center;
	margin-top:-10px;

}



#obakepumpkin .item01{
	width:1000px;
	height:600px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/item_01.png) no-repeat top center;
	position:relative;
}


#item_01_f{
	position:absolute;
	display:block;
	left: 5px;
	top: 0px;
	width:990px;
	height:500px;
	
}


#obakepumpkin .item01 .gotoshop{
	position:absolute;
	display:block;
	left: 311px;
	top: 510px;
}


#obakepumpkin .item02{
	width:1000px;
	height:450px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/item_02.png) no-repeat top center;
	position:relative;
}



#obakepumpkin .item02 .recipe_n{
	position:absolute;
	display:block;
	left: 730px;
	top: 128px;
}

#obakepumpkin .item02 .recipe_r{
	position:absolute;
	display:block;
	left: 730px;
	top: 300px;
}

#obakepumpkin .item03{
	width:1000px;
	height:692px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/item_03.png) no-repeat top center;
	position:relative;
}


#item_03_f {
	position:absolute;
	display:block;
	left: 5px;
	top: 0px;
	width:990px;
	height:661px;
	
}


#obakepumpkin .item04{
	width:906px;
	height:253px;
	margin:0 auto;
	background:url(../../../image/event/october2016/garden/item_04.png) no-repeat top center;
	position:relative;
}


#obakepumpkin .item04 p{
	position:absolute;
	display:block;
	left: 60px; 
	top: 70px;
	color:#c389f0;
}

#obakepumpkin .item04 .about_link{
	position:absolute;
	top:180px;
	left:740px;
	font-weight:bold;
	color:#c389f0;
}

#obakepumpkin .item04 .about_link a{
	color:#c389f0;
}


/*-------------------------------------- */ 

/*　8周年ロゴ */
	
#obakepumpkin .anniversaryMark
{
	position:absolute;
	background:url(../../../image/event/september2016/kuji/img_8thanniversary.png) no-repeat center top;
	width:1000px;
	height:80px;
	top: 0px;
    animation: anime_8th  5s steps(10) 3s normal infinite,
	moveY_8th 2.7s 1 normal ease-out;
	z-index:10;
}

@keyframes moveY_8th {
	0% {top:-120px;}
	30% {top:0px;}
	46% {top:-15px;}
	68% {top:0px;}
	86% {top:-4px;}
	100% {top:0px;}
}

@keyframes anime_8th {
    0% {background-position: center 0;}
    20% {background-position: center -800px;}
    100% {background-position: center -800px;}
}

/* ------------------------------------------- */