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

/*　8周年ロゴ */
	
#townWrapper161220 .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;}
}

/*　年末年始イベント */


#townWrapper161220_bg{
	position: relative;
	overflow: hidden;
	width: 1000px;
	margin: 0 auto;
	background: url(/image/event/january2017/newyeare2017/bg.png) repeat center top #d8cab4;
	width: 100%;
	height: 100%;
}

#townWrapper161220{
	background: url(/image/event/january2017/newyeare2017/bg_hedder.png) repeat-x center top;
}

#eventHeaderArea{
	width: 1000px;
	margin: 0 auto;
	height: 188px;
	background: url(/image/event/january2017/newyeare2017/hedder.png) no-repeat center 8px;	
}

#eventHeaderArea h2{
	display: none;
}

#eventContentArea{
	position: relative;
	width: 896px;
	height: 1080px;
	margin: 0 auto;
	background: url(/image/event/january2017/newyeare2017/img_05.png) no-repeat center 360px;
}

#eventContentArea #event1,
#townWrapper161220 #event2,
#townWrapper161220 #event3,
#eventContentArea #event4{
	position: absolute;
	width: 222px;
	height: 296px;
	top: 20px;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

#eventContentArea #event1 img,
#townWrapper161220 #event2 img,
#townWrapper161220 #event3 img,
#eventContentArea #event4 img{
	width: 222px;
	height: 296px;
	
}

#eventContentArea #event1 ,
#townWrapper161220 #event2 img,
#townWrapper161220 #event3 img,
#eventContentArea #event4 img{
	width: 222px;
	height: 296px;
}

#eventContentArea #event1{
	left: -14px;
}

#eventContentArea #event2{
	left: 215px;
}

#eventContentArea #event3{
	right: 227px;
}

#eventContentArea #event4{
	right: 0px;
}

#eventContentArea #event5{
	position: absolute;
	width: 911px;
	height: 608px;
	top: 420px;
	left: -14px;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

#eventContentArea #event5 img{
	width: 911px;
	height: 608px;
}