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


/* import style
------------------------------------------------------------------- */
@import url('../../mod_default.css');
@import url('../../mod_layout.css');
@import url('../../mod_headerfooter.css');
@import url('../../mod_common.css');
@import url('../../mod_others.css');
@import url('../../library/colorbox.css');
@import url('../../library/animate.min.css');

/* body
---------------------------------------------------------------------- */
body{
	color: #333;
	font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

/* footer
---------------------------------------------------------------------- */

#container #footerArea {
	width: 830px;
	margin: 0 auto;
	background-image:none; background-color:#f6f6f6;
	-webkit-border-radius: 5px;  /* Safari,Google Chrome */
	-moz-border-radius: 5px;      /* Firefox12まで */
	border-radius: 5px;           /* Firefox13以降 */
}

#container .btnList{
	margin: 0 auto;
}


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

/*　9/13 9周年感謝祭/仮想タウンでお花を描こう
------------------------------------------- */


/*#townWrapper170913{
	background:url(../../../image/event/september2017/town/bg_entry01.png) repeat top center #eee;
	min-width: 1000px;
}*/


#townWrapper170913_bg2{	
	background:url(../../../image/event/september2017/town/bg.png) repeat top center #eee;
	position:relative;
	display:block;
	width:100%;
	overflow:hidden;
}

#townWrapper170913 .pageTop170913{
	position: relative;
    width: 100%;
    max-width: 850px;
    height: 0;
    margin: 0 auto;
}

#townWrapper170913 .pageTop170913 a{
    left: auto;
    display: block;
    margin-left: 860px;
    z-index: 9999;
	height :117px;
	width : 117px;
}

/*@-webkit-keyframes anime_koguma  {
    0% {background-position: 0px top;}
    100% {background-position: -1968px top;}
}


@keyframes anime_koguma  {
    0% {background-position: 0px top;}
    100% {background-position: -1968px top;}
}*/
	
/*#townWrapper170913 .pageTop170913 img{
	max-width: none;
	height :117px;
	width : 117px;
}*/


#townWrapper170913 #eventHeader170913_box{	
	position:relative;
	margin:0 auto;
	padding-top:0px;
	width:100%;
	height: 440px;
	background:url(../../../image/event/september2017/town/bg_submenu.png) center top repeat-x;
}

#townWrapper170913 #eventHeader170913{	
	position:relative;
	margin:0 auto;
	width:1000px;
}

/*.howto #townWrapper170913 #eventHeader170913_box{	
	position:relative;
	margin:0 auto 177px;
	padding-top:18px;
	width:100%;
	height: 160px;
	background:url(../../../image/event/september2017/town/bg_menu.png) center top repeat-x;
}*/

#townWrapper170913 #eventHeader170913 h2.eventTit{
	position: absolute;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:76px 0 auto ;
	padding: 0;
	width:1000px;
	height:305px;
	background:url(../../../image/event/september2017/town/sub_tittle.png) 20px 20px no-repeat;
}

.howto #townWrapper170913 #eventHeader170913 h2.eventTit{
	position: absolute;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:76px auto 0;
	padding: 0;
	width:1000px;
	height:350px;
	background:url(../../../image/event/september2017/town/entry_title.png) center top no-repeat;
}

#townWrapper170913 .eventArea-outer{
	width:100%;
	margin:0 auto;
	position: relative;
}

#townWrapper170913 #leftSideImage{
background: url(../../../image/event/september2017/town/img_left_side.png) left top no-repeat;
width: 233px;
height: 402px;
position: absolute;
left: 0;
top: 0;
}

#townWrapper170913 #rightSideImage{
background: url(../../../image/event/september2017/town/img_right_side.png) right top no-repeat;
width: 233px;
height: 402px;
position: absolute;
right: 0;
top: 0;
}

.sub #townWrapper170913 #leftSideImage,
.sub #townWrapper170913 #rightSideImage{
top: 100px;
}



/*-- メニュー*/

#eventHeader170913 ul.eventMenu{
	position: relative;
	width:1000px;
	height: 120px;
	padding-top: 40px;
}

#townWrapper170913 ul.eventMenu li{
	position: absolute;
	z-index:15;
	height: 40px;
}

.sub #townWrapper170913 ul.eventMenu li.nav1,.sub #townWrapper170913 ul.eventMenu li.nav1_on {left:640px; top:200px;}
.sub #townWrapper170913 ul.eventMenu li.nav2,.sub #townWrapper170913 ul.eventMenu li.nav2_on {left:640px; top:258px;}
.sub #townWrapper170913 ul.eventMenu li.nav3,.sub #townWrapper170913 ul.eventMenu li.nav3_on {left:800px; top:200px;}
.sub #townWrapper170913 ul.eventMenu li.nav4,.sub #townWrapper170913 ul.eventMenu li.nav4_on {left:800px; top:258px;}


.howto #eventHeader170913 ul.eventMenu{
	position: relative;
	width:640px;
	height: 62px;
	margin: 0 auto;
	padding-top: 0;
	padding-left: 25px;
}

.howto #eventHeader170913 ul.add4{
	width:800px;
	padding-left: 140px;
}

.howto #townWrapper170913 ul.eventMenu li{
	position: relative;
	margin: 0 0 0 0;
	z-index:15;
	height: 24px;
	float: left;
	text-align: left;
	padding-top:20px;
	padding-left: 45px;
}

#eventHeader170913 ul.eventMenu li.nav4 a,
#eventHeader170913 ul.eventMenu li.nav4_on{
	display:none;
}

#eventHeader170913 ul.add4 li.nav4,
#eventHeader170913 ul.add4 li.nav4 a,
#eventHeader170913 ul.add4 li.nav4_on{
	display: list-item;
}
#eventHeader170913 ul.eventMenu li a{
	position: absolute;
	width: 100%;
	height: 100%;
	text-indent:9999px;
	white-space:nowrap;
	overflow:hidden;
	z-index: 999;
}

#townWrapper170913 ul.eventMenu li.nav1,#townWrapper170913 ul.eventMenu li.nav1_on {width: 123px;}
#townWrapper170913 ul.eventMenu li.nav2,#townWrapper170913 ul.eventMenu li.nav2_on {width: 123px;}
#townWrapper170913 ul.eventMenu li.nav3,#townWrapper170913 ul.eventMenu li.nav3_on {width: 190px;}
#townWrapper170913 ul.eventMenu li.nav4,#townWrapper170913 ul.eventMenu li.nav4_on {width: 189px;}

#eventHeader170913 ul.eventMenu li.nav1 a{background:url(../../../image/event/september2017/town/btn_menu01.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav2 a{background:url(../../../image/event/september2017/town/btn_menu02.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav3 a{background:url(../../../image/event/september2017/town/btn_menu03.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav4 a{background:url(../../../image/event/september2017/town/btn_menu04.png) no-repeat left top;}

#eventHeader170913 ul.eventMenu li.nav1 a:hover{background:url(../../../image/event/september2017/town/btn_menu01_on.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav2 a:hover{background:url(../../../image/event/september2017/town/btn_menu02_on.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav3 a:hover{background:url(../../../image/event/september2017/town/btn_menu03_on.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav4 a:hover{background:url(../../../image/event/september2017/town/btn_menu04_on.png) no-repeat left top;}

#eventHeader170913 ul.eventMenu li.nav1_on a{background:url(../../../image/event/september2017/town/btn_menu01_on.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav2_on a{background:url(../../../image/event/september2017/town/btn_menu02_on.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav3_on a{background:url(../../../image/event/september2017/town/btn_menu03_on.png) no-repeat left top;}
#eventHeader170913 ul.eventMenu li.nav4_on a{background:url(../../../image/event/september2017/town/btn_menu04_on.png) no-repeat left top;}


/*オープニング エンディング-----------------------------------*/
#townWrapper170913 .openingArea,
#townWrapper170913 .endingArea{
	background:url(../../../image/event/september2017/town/bg_opening.png) no-repeat center 44px;
	width:1000px;
	height:760px;
	position: relative;
	padding:0 0 30px 0;
	margin: -15px auto 0;
	
}

#townWrapper170913 .openingArea .flash,
#townWrapper170913 .endingArea .flash{
	position:absolute;
	top:55px;
	left:100px;
	
}

/*遊び方-----------------------------------*/


.howto #townWrapper170913_bg{
	background:url(../../../image/event/september2017/town/bg_entry01_waku.png) no-repeat center 440px;
}

#townWrapper170913 .entryArea01{

	position: relative;
	width:1000px;
	height:700px;
	margin:0 auto;
}

#townWrapper170913 .entryArea01 .imgs{
	display: none;
	margin:88px 0 0 96px;
	width:831px;
	height: 362px;
}

#townWrapper170913 .entryArea01 .btnArea li a,
#townWrapper170913 .entryArea01 .btnArea li div{
	position: absolute;
	top: 420px;
}

#townWrapper170913 .entryArea01 .btnArea li #imgbtn_1{
	left: 320px;
}

#townWrapper170913 .entryArea01 .btnArea li #imgbtn_2{
	left: 484px;
}

#townWrapper170913 .entryArea01 .btnArea li #imgbtn_3{
	left: 642px;
}

#townWrapper170913 .entryArea01 .btnArea li #imgbtn_4{
	top:　457px;
	left: 30px;
}


#townWrapper170913 .entryArea01 .btnArea li #imgbtn_4{	
	background:url(../../../image/event/september2017/town/entry01_message.png) no-repeat left top;
	-webkit-animation:anime_boss  2s steps(34) 0s infinite;
    animation:anime_boss  2s steps(34) 0s infinite;
}

@-webkit-keyframes anime_boss  {
    0% {background-position: 0px top;}
    100% {background-position: -8160px top;}
}


@keyframes anime_boss  {
    0% {background-position: 0px top;}
    100% {background-position: -8160px top;}
}



#townWrapper170913 .entryArea_box2{
background:url(../../../image/event/september2017/town/bg.png) repeat;	
}

#townWrapper170913 .entryArea_box{
	width:100%;
	height:100%;
	margin:0 auto;
	position:relative;
	background:url(../../../image/event/september2017/town/lace.png) repeat-x center -1px ;	
}
#townWrapper170913 .bgBoder{
	background:url(../../../image/event/september2017/town/bg_boder.png) no-repeat center 50px;
	height: 300px;
	width: 100%;
	position: absolute;
  	animation-name: slide_boder;
	transition-timing-function:ease-in-out;
}

@keyframes slide_boder {
  from {
    background-position: -2000px 120px;
  }

  to {
    background-position: center 50px;
  }
}

#townWrapper170913 .bgHeart{
	background:url(../../../image/event/september2017/town/bg_heart.png) no-repeat center 50px;
	height: 272px;
	width: 100%;
	position: absolute;
}

#townWrapper170913 .entryArea02{
	background:url(../../../image/event/september2017/town/bg_entry02.png) no-repeat center 100px;
	width:1000px;
	height:1000px;
	margin:0 auto;
	position:relative;
	z-index: 10;
}

#townWrapper170913 .entryArea03{
	background:url(../../../image/event/september2017/town/bg_entry03.png) no-repeat center center;
	width:1000px;
	height:800px;
	margin:0 auto;
	position:relative;
}

#townWrapper170913 .entryArea04{
	background:url(../../../image/event/september2017/town/bg_entry04.png) no-repeat center center;
	width:1000px;
	height:491px;
	margin:0 auto;
	position:relative;
}

#townWrapper170913 .entryArea04 img{
	position: absolute;
	width: 328px;
	height: 66px;
	left: 333px;
	top: 353px;
}

#townWrapper170913 .entryArea05{
	background:url(../../../image/event/september2017/town/bg_entry05.png) no-repeat center 50px;
	width:1000px;
	height:680px;
	margin:0 auto;
	position:relative;
}

#townWrapper170913 .entryArea05 img{
	width: 359px;
	height: 72px;
}

#townWrapper170913 .entryArea05 .btnbuyC{
	position: absolute;
	top: 500px;
	left: 76px;
}

#townWrapper170913 .entryArea05 .btnbuyP{
	position: absolute;
	top: 500px;
	right: 76px;
}

/*特典と交換する-----------------------------------*/
#townWrapper170913 .tokutenHead{ 
	background:url(../../../image/event/september2017/town/tokuten_header.png) no-repeat center bottom;
	width:1000px;
	height:540px;
	position:relative;
	margin:  0 auto;
}

#townWrapper170913 .tokutenHead .btngoSP img{
		position:absolute;
    top: 105px;
    left: 772px;
    width: 204px;
    height: 43px;
}

#townWrapper170913 .tokutenBox{
	width: 1000px;
	margin: 40px auto 20px; 
}

#townWrapper170913 .tokuten01{
	background:url(../../../image/event/september2017/town/bg_tokuten01.png) no-repeat center top;
	height: 449px;
	width: 1000px;
	position: relative;
}

#townWrapper170913 .tokutenBox .tokuten02{
	background:url(../../../image/event/september2017/town/bg_tokuten02_none.png) no-repeat center top;
	height: 328px;
	width: 1000px;
	position: relative;
}

#townWrapper170913 .tokutenBox .tokuten03{
	background:url(../../../image/event/september2017/town/bg_tokuten03_none.png) no-repeat center top;
	height: 328px;
	width: 1000px;
	position: relative;
}

#townWrapper170913 .tokutenBox .tokuten01 div,
#townWrapper170913 .tokutenBox .tokuten02 div,
#townWrapper170913 .tokutenBox .tokuten03 div,
#townWrapper170913 .tokutenBox .tokuten04 div{
	position: absolute;
	bottom:12px;
	left:35px;
}

#townWrapper170913 .tokutenBox .tokuten01 img,
#townWrapper170913 .tokutenBox .tokuten02 img,
#townWrapper170913 .tokutenBox .tokuten03 img,
#townWrapper170913 .tokutenBox .tokuten04 img{
	width: 167px;
	height: 50px;
}

#townWrapper170913 .tokutenBox .tokuten02 div,
#townWrapper170913 .tokutenBox .tokuten03 div,
#townWrapper170913 .tokutenBox .tokuten04 div{
	display: none;
}

#townWrapper170913 .tokuten_open2 .tokuten02 div,
#townWrapper170913 .tokuten_open3 .tokuten03 div,
#townWrapper170913 .tokuten_open4 .tokuten04 div{
	display: block;
}

#townWrapper170913 .tokuten_open2 .tokuten02{
	background:url(../../../image/event/september2017/town/bg_tokuten02.png) no-repeat center top;
	height: 328px;
	width: 1000px;
}

#townWrapper170913 .tokuten_open3 .tokuten03{
	background:url(../../../image/event/september2017/town/bg_tokuten03.png) no-repeat center top;
	height: 328px;
	width: 1000px;
}

#townWrapper170913 .tokutenComp_box{
	/*background:url(../../../image/event/september2017/town/bg.png) repeat;*/
	position: relative;
	height: 100%;
	width: 100%;
}

#townWrapper170913 .tokutenComp{
	background:url(../../../image/event/september2017/town/bg_tokutenSP.png) no-repeat center top;
	position: relative;
	height: 577px;
	width: 1000px;
	margin: 100px auto 0;
	padding-bottom : 20px;
	z-index: 999;
}

#townWrapper170913 .tokutenComp .btncompC img{
	position: absolute;
	height: 72px;
	width: 359px;
	bottom: -3px;
	left: 68px;
}

#townWrapper170913 .tokutenComp .btncompP img{
	position: absolute;
	height: 72px;
	width: 359px;
	bottom: -3px;
	right: 54px;
}

/* 注意事項 */

#townWrapper170913 .entryNote{
	background:url(../../../image/event/september2017/town/bg_entryNote.png) no-repeat center center;
	width:100%;
	height:500px;
	margin:0 auto;
	position:relative;
}

#townWrapper170913 .entryNote_box{
	width:100%;
	height:540px;
	margin:0 auto;
	position:relative;
	background:url(../../../image/event/september2017/town/bg_bottom.png) repeat-x center top;
}

#townWrapper170913 .tokutenNote{
	background:url(../../../image/event/september2017/town/bg_tokutenNote.png) no-repeat center 80px;
	width:100%;
	height:343px;
	margin:0 auto;
	position:relative;
}

#townWrapper170913 .tokutenNote_box{
	width:100%;
	height:360px;
	margin:0 auto;
	position:relative;
	background:url(../../../image/event/september2017/town/bg_bottom.png) repeat-x center top;
}

#townWrapper170913 .tokutenNote p,
#townWrapper170913 .entryNote p{
	padding-top: 160px;
	width:800px;
	height:500px;
	margin:0 auto;
	line-height: 1.7em;
}

#townWrapper170913 .tokutenNote  p{
	padding-top: 200px;
	height:200px;
}

#townWrapper170913 .entryNote span,
#townWrapper170913 .tokutenNote span{
	color: crimson;
	font-weight: bold;
}




/* ページトップへ戻る */
#townWrapper170913 .pageTop {
	display:none;
	position:relative;
	width:100%;
	max-width:850px;
	height:0;
	margin:0 auto;
}
#townWrapper170913 .pageTop a {
	left:auto;
	display: block;
	margin-left:920px;
	padding:1em 0 0 2px;
	z-index:999;
}

#townWrapper170913 .pageTop img {
	width:158px;
	height:156px;}